8 طرق لتصميم مواقع أسرع في فوتوشوب
كمصمّم ويب ، من الصعب البقاء منظمًا. لا تكتفي بموازنة عدة مشاريع في وقت واحد ، ولكن من المحتمل أن تواجه المواعيد النهائية الضيقة والعملاء الأقوياء أيضًا. يمكنك أيضًا الارتداد من العلامة التجارية إلى العلامة التجارية ، والاضطرار إلى تعلم إرشادات وأساليب جديدة للعلامة التجارية باستمرار.
لحسن الحظ ، هناك العديد من الطرق لجعل سير العمل الخاص بك أكثر كفاءة. لمساعدتك ، قمت بتجميع هذه النصائح الثمانية لإبقائك عاقلًا في حياتك المهنية في تصميم الويب
1. حافظ على ملفاتك منظمة
واحدة من أسهل الأشياء التي يمكنك القيام بها للحفاظ على سلامة عقلك هي الحفاظ على ملفاتك منظمة. إنشاء وصيانة بنية مجلد متناسقة سيجعل العثور على ملفاتك نسيمًا. تنشأ المشاكل عندما تقوم ببناء مجلد بشكل مختلف عن مجلد آخر ، مما يجعل من الصعب تحديد موقع الملف Final-Final-logo.ai .
تعتبر اصطلاحات تسمية الملفات المتناسقة ضرورية عند تنظيم ملفاتك. هذا هو المكان الذي يأتي فيه إصدار. يستخدم بعض المصممين التواريخ ، والبعض الآخر يستخدم أرقام الإصدارات ، وبعضها يستخدم جولات. هذا يعتمد على صناعتك وتفضيلاتك الشخصية ، لكنها ممارسة جيدة. بفضل الإصدارات ، يمكنك بسهولة تعقب الملف الأكثر حداثة ، خاصة إذا كان لديك إصدارات قديمة محفوظة كمرجع.
أحتفظ عادة بنسختين أو ثلاث إصدارات قديمة في حال أراد العميل العودة إلى إستراتيجية البطل هذه من الجولة الأولى ، أو تفضل علاجك المحمول من الجولة الثانية. لتجنب عقلية الجرذان ، من الجيد أرشفة أو حذف الملفات القديمة للحفاظ على القرص الصلب من أن يتعطل.
وإليك بنية نموذج يمكنني استخدامها في Clearlink.
كما أن الجمع بين بنية المجلد المتسقة واتفاقيات التسمية مع تعيين الإصدارات سيساعد أيضًا في إمكانية البحث. على سبيل المثال ، إذا بدأت جميع أسماء الملفات من علامة تجارية واحدة باسم العلامة التجارية أو الاختصار ، يمكنك تصفية الأصول لهذه العلامة التجارية بسهولة. سيساعد هذا على التفريق بين "ATT-logo-final.ai" وما يمكن أن يكون بحرًا من "logo-final.ai's".
2. افهم إطارك
شيء واحد لم أتعلمه قبل عدة سنوات من مهنتي في التصميم هو كيفية استخدام إطار قائم بشكل صحيح. الضاربين الثقيلين في العالم الإطاري حاليا التمهيد و المؤسسة ، ولكن جوجل تجسد سيعطيهم بالتأكيد المدى لأموالهم في المستقبل القريب. تستخدم الشركة التي أعمل من أجلها المؤسسة لغالبية مواقعها التي تحمل علامات تجارية.
تأتي المؤسسة مع شبكة مدمجة مستجيبة ، بالإضافة إلى تصميم للأزرار والحقول والطباعة والملاحة وما إلى ذلك من بين العديد من الأشياء الأخرى لجعل حياتك أسهل. من خلال الاستفادة من الشبكة المدمجة للمؤسسة ضمن PSDs ، ستجعل من الأسهل على مطور البرامج تنفيذ التصميمات الخاصة بك بطريقة أكثر مثالية من البكسل إن كنت تفعل الشيء الخاص بك. يحتوي Photoshop على هذه الأداة الرائعة لتخطيط الدليل التي لا تجعل إنشاء الشبكات نسيمًا فحسب ، بل تعلقها أيضًا بلوحة الرسم لسهولة إعادة هيكلة الملفات والحركة.
لقطة من الشاشه مؤسسة الغش ورقة
توفر الأطر أيضًا نقطة بداية جيدة لتصميم الأزرار ، والنماذج ، وما إلى ذلك ، وتساعد في إظهار إمكانيات وقيود استراتيجيات التصميم التي يمكنك تنفيذها. لن يمنحك ذلك فقط نقطة بداية رائعة لتصميمك ، ولكنه سيساعد أيضًا في تعزيز التعاون الودي مع مطور البرامج.
3. تنظيم طبقات حسب قسم المحتوى
عندما تتعامل مع PSDs المعقدة لتصميم مواقع الويب مع العديد من المجلدات والطبقات والأشياء الذكية وما إلى ذلك ، فمن السهل أن تحصل الأمور على الفوضى. بمجرد أن تأتي الطبقة 2،455 ، تبدأ في إدراك أنك تحتاج إلى نوع من التنظيم داخل PSD الخاص بك. هذا هو السبب في أنني أوصي بتنظيم PSD الخاص بك حسب الأقسام.
تتكون المنجم بشكل عام من مجلدات تتضمن Nav و Hero و Intro و Packages و Benefits و Footer وما إلى ذلك. أقوم أيضًا برمز لون هذه المجلدات بطريقة قوس قزح ، لذلك فهي سهلة التنقل. هذا يجعل أقسام التحديث وإعادة صياغة PSD الخاص بك نسيم.
أقوم بتنظيم ملفي في مجلدات القسم التي هي ترميز ألوان قوس قزح لسهولة القدرة على المسح الضوئي.
على سبيل المثال ، إذا كنت تريد جعل قسم البطل أكبر ، فيمكنك بسهولة سحب كل المجلدات أدناه كوحدة واحدة (أمر الإمساك) ثم سحبها مرة أخرى بعد إجراء التحديث. تساعد هذه الاستراتيجية أيضًا المطورين والمصممين الآخرين على التنقل بسهولة في ملفك. باستخدام أسماء مفهومة مثل "البطل" و "ناف" ، يمكن لمصمم جديد القفز بسهولة إلى المجلد وإجراء التغييرات التي يحتاجونها.
سيصل بعض المصممين إلى تسمية طبقات فردية ، والتي يمكن أن تكون مفيدة بشكل لا يصدق ولكن يمكن أن تستغرق وقتًا طويلاً. نظرًا لأنه من السهل العثور على الطبقات عبر أداة التحديد التلقائي عند تعيينها على "طبقة" ، فمن السهل الوصول إلى الطبقات الفردية في هذه الأيام ، لذا يعود الأمر إلى المصمم الفردي حول كيفية تنظيم طبقاته. الهدف هو أن تقوم به.
4. استظهر جميع اختصارات لوحة المفاتيح التي تستخدمها عادة
هذا واحد هو biggie للكفاءة. إذا وجدت نفسك تستخدم أمر مفتاح معين بشكل منتظم ، فاحفظه. ستزيد من فاعلية أفضلية إذا كان لديك جميع اختصارات لوحة المفاتيح الرئيسية لأسفل.
ومن بين هذه المهام المهمة توفير الحجم وحجم الخط والطلب المتقدم للصفحات وحفظها على الويب والعتامة بين المزيد. يوفر لك Photoshop أيضًا إمكانية إنشاء اختصارات مخصصة. في كتابي ، أهم الأوامر التي حفظت هي حفظ ملفك. بسبب الأعطال العشوائية لـ Adobe ، من الجيد أن تخطئ إلى جانب الادخار في كثير من الأحيان بدلاً من المخاطرة بفقدان أي تقدم.
يوفر لك Adobe خيار تخصيص اختصارات لوحة المفاتيح ضمن Edit> Keyboard Shortcuts
تقترن الاختصارات أيضًا بتنظيم الطبقات حسب مجلدات قسم المحتوى (كما هو مذكور أعلاه). من الأسهل إحضار الطبقات إلى أعلى وأسفل المجلد باستخدام اختصارات لوحة المفاتيح بدلاً من إعادة ترتيب الطبقات في ملف غير منظم. هذا هو المكان الذي ينظم فيه تنظيم ملفك أثناء تصميمك. سيؤدي حفظ اختصارات لوحة المفاتيح المستخدمة بشكل متكرر والحفاظ على تنظيم طبقاتك إلى تحسين كفاءتك إلى حد كبير ومساعدة المصممين الآخرين على العمل مع ملفاتك.
5. استخدام مكتبات CC
واحدة من أفضل الأشياء التي أضافتها Adobe منذ إنشاء CC هي المكتبات. إذا لم تكن قد سمعت بها ، فعليك التحقق من ذلك برنامج تعليمي مذهل حول كيفية استخدامها.
أشعر أن كل فريق تصميم يجب أن يستخدم هذه الميزة المدهشة. تسمح لك المكتبات بإنشاء مكتبة علامات تجارية ذات أصول مثل الألوان وأنماط الخطوط والصور والرموز والرموز (مثل الرؤوس والتذييلات). بفضل المكتبات ، يمكنك التعاون بسهولة مع تصميمات الإعلانات من مؤسسات متعددة باستخدام مكتبة علامات تجارية واحدة.
تسهل المكتبات تغيير الألوان وتحديث أنماط النص بنقرة زر واحدة. كما أنها تساعد في تخزين رموز العلامات التجارية التي يمكن تحديثها بسهولة في مكان واحد مع ظهور التحديثات التي تظهر بسرعة عبر أجهزة PSD. هذا مفيد بشكل لا يصدق للرؤوس والتذييلات لموقعك ، حيث من المحتمل أن تقوم بتحديثات صغيرة طوال المشروع.
أستخدم أيضًا مكتبات CC لتصميم الخطوط في جميع أنحاء تصميمي. سوف أقوم بإعداد أنماط لنسخة البطل ، والعناوين ، والعناوين الفرعية ، ونسخ الجسم ، وإخلاء المسؤولية ، وما إلى ذلك لتطبيقات سطح المكتب والكمبيوتر اللوحي والتطبيقات المتنقلة. فيما يتعلق بمفتاح العرض ، أجد نفسي باستخدام تنسيق القائمة أكثر من عرض المخطط نظرًا لقدرته على المسح الضوئي بسهولة.
مشاهدة عناصر المكتبة كمتعاون
المكتبات أيضًا رائعة لتعاون الفريق. يمكنك اختيار التعاون مع تصميمات الإعلانات الأخرى حتى يتمكنوا من التعديل والإضافة إلى المكتبة ، أو يمكنك مشاركة رابط المكتبة لسهولة الوصول إليه. لديهم أيضًا ميزة "إنشاء مكتبة جديدة من المستند" ، لكنني أفضل إنشاء المكتبة بنفسي ، لذلك يبقى منظمًا ولديه الأصول الأكثر ملاءمة فقط.
لسوء الحظ ، هناك بعض الجوانب السلبية للمكتبات ، واحد منها هو عدم وجود أنماط حروف وأحرف منفصلة للنص. أنا أعمل حول هذا من خلال تطبيق نمط الحرف الخاص بي في مربع منفصل ثم لصق أنماط مختلفة في مربع معاً لجعل مربعات النص أسهل لإدارة داخل الملف. هناك جانب سلبي آخر وهو أنه لا يمكنك حاليًا تحديث نمط حرف على مستوى العالم. في الوقت الحالي ، لا توجد قدرات تنظيمية داخل المكتبة لإنشاء مجلدات فرعية ضمن الفئات (اللون ، أنماط الحروف ، إلخ) ، ولكن نأمل أن تعمل Adobe أيضًا على هذا.
الطريقة الحالية لعمل مكتبات CC هي أن آخر الأصول المحدثة / المضافة ستظهر أعلى. لا يمكن تطبيق ألوان مكتبة CC على نص فردي داخل مربعات النص ويتم تطبيقه بسهولة على الأشكال ومربعات النص بالكامل. أنا متأكد من أن Adobe تعمل بجد لإصلاح هذه المشكلات ، لذا فأنا لست قلقاً للغاية ، لا سيما وأن الإيجابيات تفوق بالتأكيد السلبيات.
6. الحفاظ على الصور وناقلات في شكل كائن ذكي
على الرغم من أنه سيجعل ملفك أكبر ، فإن الاحتفاظ بصورك وناقلاتك بتنسيق الكائن الذكي سيجعل من السهل على المصممين المستقبليين تعديل ملفات PSD الخاصة بك. صورة هذا: يعود العميل مع التعديلات التي تتضمن إعادة اقتصاص صورة البطل وإجراء تعديلات صغيرة على أيقونة متجه. ويتم إجراء ذلك بشكل أكثر سلاسة إذا تضمنت PSD صورة كاملة الدقة بدلاً من نسخة أصغر تنقطت. من السهل أيضًا تعديل المؤشرات عندما تكون كائنات ذكية من Illustrator بدلاً من رسومات نقطية.
تأتي ميزة أخرى تتمثل في الحصول على صور بتنسيق الكائن الذكي عند حفظها كملفات PSD ثم وضعها في ملفك ككائن ذكي. إن استخدام PSD الذي تم وضعه في الصورة يجعل من السهل إضافة طبقات التعديل والتعديلات في ملف صور منفصل ومستقل بدلاً من ازدحام الملف المصدر الخاص بك. يتيح لك استخدام الكائنات الذكية كرسومات للمكتبات الحصول على مزيج أكثر نجاحًا. لا يمكنك فقط تحرير الكائنات المتجهة بسهولة ، ولكن سيتم تحديث رسومات المكتبة عبر جميع التطبيقات.
يمكن تحرير رسم "Hero Illustration" في PSD منفصل للحفاظ على فوضى الملف الرئيسي إلى الحد الأدنى.
7. إنشاء دليل أسلوب والتشبث به
سيكون لدى الكثير من العلامات التجارية دليل نمط عام لتتبعه عندما يتعلق الأمر بالخطوط ، والألوان ، والصور ، والرموز ، والرسوم التوضيحية ، وما إلى ذلك. هذا مفيد كمورد ولكن لن يبقيك دائمًا متناسقًا مع التصميم الخاص بموقعك على الويب . لقد قمت بتحسين كفاءتي إلى حد كبير عن طريق إنشاء أدلة لأسلوب الويب لكل موقع محدد أعمل عليه.
في بعض الأحيان ، ستحتوي العلامات التجارية على مواقع متعددة ذات أنماط مختلفة ، لذلك أحرص على امتلاك واحدة لكل موقع ، حتى أتمكن من المحافظة على الاتساق أثناء التصميم. وهذا أيضًا يخلق موردًا سهل السحب والإسقاط عندما أحتاج إلى الأزرار والأيقونات والرسوم التوضيحية والصور وما إلى ذلك. وهذا الأمر لن يجعلك أكثر كفاءة كمصمم فحسب ، بل سيساعدك أيضًا على الحفاظ على ثباتك في التصميم الخاص بك في جميع أنحاء الموقع.
ما التباعد الذي أستخدمه بين الأقسام؟ تحقق من دليل الاسلوب! ما كان لون الزر الأساسي والحشو مرة أخرى؟ الاستيلاء عليها من دليل الاسلوب! سيساعد هذا أيضًا المصممين الآخرين على القفز بسهولة على تصاميم الموقع بكل سهولة وكفاءة. إذا قمت بدمج استخدام CC Libraries مع دليل النمط ، فستكون أكثر تقدمًا في اللعبة.
أقوم بإنشاء دليل نمط PSD لجميع الماركات المختلفة التي أعمل عليها حتى أتمكن بسهولة من انتزاع عناصر مثل الأزرار والرموز.
يميل الكثير من المصممين لإضافة أساليب جديدة في كل مرة يواجهون فيها مشكلة جديدة داخل التصميم. لتحقيق التناسق ، من الأفضل تجنب ذلك والالتزام بالمعايير التي وضعتها في دليل الأنماط. إذا قمت بإضافة طبقات وأنماط جديدة ، فتأكد من تطبيقها على الموقع بأكمله.
وكلما تم إنشاء المزيد من الأنماط الجديدة ، ستكون التصاميم المستقبلية الأكثر تعقيدًا ، وسيكون من الأصعب على المصممين الجدد القفز على المشاريع والحفاظ على التصميمات متسقة. في كثير من الحالات ، يكون الاتساق أكثر أهمية من الابتكار الثابت عندما يتعلق الأمر بتجربة المستخدم. على الرغم من أنه قد يستغرق المزيد من الوقت لإنشاء دليل نمط الويب في بداية المشروع ، إلا أنه سيزيد من كفاءتك في جميع الصفحات المستقبلية.
واحدة من أفضل الممارسات التي تعلمتها من براد فروست هي أن تفعل جرد واجهة إما أثناء عملية التصميم أو في موقع حالي ستعمل عليه. يتكون مخزون الواجهة من جمع جميع أنماط النصوص المختلفة وأنماط الأزرار وما إلى ذلك عبر لقطات الشاشة وتجميعها للعثور على حالات عدم الاتساق. يمكنك بعد ذلك تقديم النتائج الخاصة بك إلى العميل لاقتراح التحديثات والتحسينات.
نظرًا لأن مواقع الويب تلمس مصممين متعددين بسبب حالة وجودها ، فإن الأمور يمكن أن تحصل على شعر جميل في قسم التناسق. بمجرد العثور على نمط تصميم موحد للعناصر الموجودة على الصفحة ، تأكد من تحديث دليل الأنماط الخاص بك بحيث يكون الجميع محدثًا.
لقطة شاشة واجهة الجرد من http://bradfrost.com/blog/post/interface-inventory/
8. تعزيز التعاون بين الإدارات
كثير من الناس الذين يسعون إلى الحصول على وظائف في مجال الإنتاج التسويقي (المصممين ، والمطورين ، والمؤلفين ، وغيرهم) يميلون إلى الانطواء ، لذلك من الصعب الخروج من منطقة الراحة الخاصة بك عندما يتعلق الأمر بالتعاون. من الصعب أيضًا ترك فقاعة خبرتك ، خاصة عندما يكون من الأسهل ربط الأشخاص في مجالك. على الرغم من أن الأمر قد يكون مربكًا أو غير مريح في بعض الأحيان ، فإن ترك الفقاعة والتعاون بانتظام مع أشخاص من الأقسام الأخرى يمكن أن يحسِّن بشكل كبير جودة التصميمات بالإضافة إلى كفاءتك.
مثال ساطع على ذلك هو عندما يتعاون المصممون والمطورون في إعادة التصميم. يجب أن تلتقي بالمطور مسبقًا لتتعرف على الإطار الذي تستخدمه ، وتعلم نفسك على نظام الشبكة ، وتقييم الاحتمالات. عند اكتمال عمل التصميم ، تأكد من مشاركة مكتبة Photoshop الخاصة بك ، بحيث يكون لدى المطور إمكانية الوصول بسهولة إلى لوحة الألوان وأنماط الخطوط وما إلى ذلك. كما أنه من المفيد مشاركة دليل الأنماط مقدمًا ، بالإضافة إلى أي مكونات مصممة لمنحهم بداية جيدة.
يساعدك التعاون مع المصممين الآخرين على فريقك باستخدام المكتبات أيضًا في الحفاظ على الاتساق وزيادة الكفاءة. إن منح المدير الفني أو معظم مسؤولية كبار المصممين على تحديثات دليل المكتب والأسلوب سيؤدي إلى إزالة الارتباك والحفاظ على اتساق العلامة التجارية. فقط تأكد من وجود خط اتصال عند إجراء تحديثات ، بحيث يكون الجميع على نفس الصفحة.
ابقى عاقل
يمكن أن يكون تصميم الويب ساحقًا ومحفزًا في بعض الأحيان. ليس بالضرورة أن يكون الأمر كذلك. من خلال اتباع هذه النصائح البسيطة حول كفاءة Photoshop ، يمكنك تخفيف جزء جيد من الإجهاد. لن يؤدي هذا فقط إلى تحسين رفاهيتك ، ولكن المديرين والمديرين في كل من قطاع الأعمال والإبداع سيقدرون عملكم الجاد ويثنيوا عليه. بعد كل شيء ، الجميع جيد مع تصميم أكثر اتساقا وكفاءة ، وضعت بشكل جميل.