إلى المصممين المحبين (رسالة من مطور الواجهة الأمامية)

المصممين الأعزاء ،

هذه الرسالة كانت تختمر لسنوات. تم تسليم أجزاء منه في الكلام والكتابة إلى مصممين مختلفين على مدى فترة طويلة من الزمن.

ومع ذلك ، كنت أخشى دائمًا نشره خوفًا من تورط المصمم أو العميل الحالي الذي أعمل معه. لذا قبل المتابعة أود التأكيد على أن هذه ليست شكوى محددة بل قائمة مفصلة من 18 عامًا من الخلافات.

لقد عملنا معًا منذ ما يقرب من عقدين ، وكل ملف PSD أرسلته إليّ به (أكثر أو أقل) نفس المشكلات. سامحني إذن على عدم الاحتشام في محاولة تعليمك وظيفتك.

أنا لا أفترض أن أعلمك عن الرسومات أو الجماليات. لن أخوض في الطباعة أو الوضوح أو استخدام المساحة البيضاء.

بدلاً من ذلك ، أود أن أشرح كيف تُعلمني ثمار عملك.

أود أن أذكرك بما هو مطلوب لإعادة إنتاج التصميمات كصفحات ويب مثالية للبكسل. أود أن أخبرك كيف سيتم استخدام ملفات التصميم الخاصة بك للتوثيق وكيف تحدد الصور التي تقوم بإنشائها التقنيات المستخدمة - وصولاً إلى المستويات الأساسية لقابلية التوسع والأداء.

أيضًا ، أود أن أوضح ما يمكن عمله بسرعة وسهولة وما الذي سينتج عنه عبء يسحب الإنتاج بالكامل إلى الزحف.

والأهم من ذلك كله ، أود أن أذكرك أن الصورة التي تنشئها الآن ستتحول إلى كائن حي يتفاعل ويستجيب ، ويتواصل مع آلاف الأفراد المختلفين ، ويحتاج إلى تعليمهم ، والتعلم منهم لهم بأسهل طريقة ممكنة. سواء من أجلها أو لهم.

التصميم من أجل التوثيق

بادئ ذي بدء ، أود أن أذكرك أن ملفات PSD التي تنتجها ليست فقط مصدر الصور ليوافق عليها العميل ، بل هي أيضًا وثائق فنية ومواد مصدر للمطورين. لذلك ، يرجى الحفاظ على طبقاتك ومجموعاتك مرتبة ومنظمة وتسمية .

علق التصميم الخاص بك. إما أن تقوم بإنشاء ملف منفصل باستخدام الاصطلاحات التي استخدمتها ، أو قم بتدوينها في طبقة مخفية منفصلة.

أخبرني ما هي الخطوط التي استخدمتها من أجل ماذا. اسمحوا لي أن أعرف الألوان ، والمسافات ، والسياقات التي يجب استخدامها. أريد أن أعرف.

أحتاج أيضًا إلى معرفة ما يجب استقراءه إذا لم يتم إجراء تصميم لميزة معينة.

أعتقد أن ما أحاول قوله هو: إذا كان ذلك ممكنًا ، فقم بإنشاء دليل نمط موجز للمنتج الذي تقوم بتصميمه.

من أجل كل منّا ، عند إضافة كتل نصية قياسية - مثل العناوين - أضف مستطيلاً خلفها للإشارة إلى التباعد حولها. يجب أن يمكّنك ذلك من وضعها باستمرار في كل مرة. إذا كان هذا يتطلب الكثير من العمل ، فأشر على الأقل إلى أي مثال في المستند هو الكنسي.

لا يمكنني إخبارك بعدد المرات التي أجد فيها أن العناوين توضع بالعين بحيث تلائم بصريًا المثيل الفردي الذي يتم وضعها فيه ، ولكن عند القياس ، أظهر أن لكل منها مسافات فردية خاصة به.

الشيء نفسه ينطبق على كتل المحتوى. إذا كانت لديك قائمة بكتل محتوى مختلفة ، فيرجى تباعد بينها بشكل متسق.

سأخبرك بالمزيد في قسم التصميم للمحتوى ، لكن من فضلك لا تفترض أن عناوينك ستكون دائمًا في سطر واحد ، واستخدم هذه المعلومات في الملف.

ما زلت أواجه هذه العناوين التي يبلغ حجم الخط فيها 22 بكسل وارتفاع السطر 92 بكسل (من الواضح أنه تم نسخها ولصقها من عنوان الصفحة الرئيسية). الإعدادات التي تختارها ذات صلة حتى إذا لم تغير الملف الذي تم تصديره بشكل مرئي.

التصميم للتكنولوجيا

لهذا وجهان: ما يمكن عمله وما هو مناسب للوسيط.

بينما نصل سريعًا إلى النقطة التي سيكون فيها كل شيء ممكنًا تقنيًا لتطوير مواقع الويب (إذا لم يكن هناك شيء آخر ، فلا يزال بإمكاني استخراجه بكسل تلو الآخر باستخدام قماش) ، فإن الكثير من هذه الحلول ليست جاهزة للإنتاج.

حقيقة أنك عثرت على مثال قام فيه شخص ما بدمج WebGL 3D بنجاح مع أقنعة CSS blur plus filter لصفحة تجريبية لا يعني أنه يمكنك استخدام ذلك كلوحة اختلاف في نافذة كاملة في تطبيق صفحة واحدة.

وإذا كنت ترغب حقًا في تجاوز حد النزيف ، فيرجى استشارة المطور قبل تقديم التصميم للموافقة عليه. خلاف ذلك ، سيكون من الصعب إقناع العميل بأقل من ذلك.

إذا كنت تريد حقًا اختبار الحواف ، وإذا كنت تريد تجربتها من أجل المتعة ، فاتصل بي على انفراد. أحب إنشاء أشياء من هذا القبيل بقدر ما تفعله أنت. فقط لا تضع هذه الأشياء في مشروع إنتاج مدرج في الميزانية.

أبعد من هذه الأشياء - إلى جانب اختبار حدود ما يمكن القيام به ، حاول أن تكون حساسًا وعقلانيًا فيما يتعلق بما يجب القيام به .

أنت لست فنان رسومات. أنت أكثر من ذلك ، أنت مصمم.

أنت لا تصممها لتبدو بطريقة معينة فحسب ، بل عليك أيضًا تصميمها لتعمل بطريقة معينة وتتواصل وتتصرف بطريقة معينة.

للذهاب إلى الكليشيهات المألوفة للمصممين في كل مكان: ما فائدة كرسي رائع المظهر إذا لم يكن بإمكان أحد الجلوس عليه ؟

يجب أن تدمج سرعة التحميل وسرعة التنفيذ وسهولة الاستخدام في التصميم الخاص بك حتى يكون تصميمًا بدلاً من صورة.

حاول تحقيق أكبر قدر ممكن باستخدام HTML و CSS فقط. تجنب استخدام الميزات ذات المظهر الجميل والمتوفرة في Photoshop. لا تستخدم المزج! لا تستخدم خطًا مائلًا زائفًا وخطًا مائلًا زائفًا.

ما لم تكن تنوي أن يكون العنصر صورة ، فلا تستخدم المرشحات على الإطلاق - بخلاف أبسط الظلال.

لا تجعلني أحسب الألوان أو أختارها لأنك استخدمت تعبئة الألوان الممزوجة. من فضلك لا تزيف الصور الشفافة باستخدام التراكب المزج ؛ أنا في الواقع بحاجة إلى صورة شفافة في الموقع.

إذا كنا نستخدم إطار عمل للواجهة الأمامية ، مثل Bootstrap ، فسيتم بالفعل حل العديد من هذه المشكلات ، لذا تعرف على كيفية القيام بذلك وكيف يمكن تعديله. لا تقم فقط بتصميم شيء غير ذي صلة.

إذا كان تصميمك لا يتماشى مع ما يفعله إطار العمل ، فإن تنفيذه لا يعني تنفيذ التصميم. بدلاً من ذلك ، ينتهي بنا المطاف بتجاوز إطار العمل بشكل انتقائي ، لذلك لا يعبث بتصميمنا ثم ننفذها من البداية. يتضاعف عبء العمل بدلاً من النصف.

وأخيرًا ، لا تستخدم أكثر من ثلاثة خطوط - أو متغيرات الخطوط - على الموقع. إذا كنت بحاجة إلى ستة أوزان مختلفة ، لكل منها متغيراته العادية والمائلة ، فإنك لم تعد تصمم للويب.

التصميم من أجل التفاعل

هذا ضخم وقد كُتبت هذه الرسالة في الأصل حصريًا لهذا الموضوع. عليك حقًا معرفة وفهم جميع الطرق التي يمكن للمستخدمين والوظائف التفاعل من خلالها.

لنبدأ بأبسط الأشياء: الروابط.

الروابط لا تحتوي على دولتين فقط.

في التنقل الذي أتلقاه ، تقدم دائمًا تصميمات للروابط ورابطًا نشطًا (الصفحة الحالية).

في حالات أخرى ، عادة ما تقدم حالات القاعدة والحوامة .

إذا كنت تريد أن تكون أقل سهولة في الاستخدام ، فيجب أن يكون لديك تصميمات مميزة لحالات القاعدة والتأرجح والتركيز (التي تمت زيارتها والنشطة هي أيضًا من الأشياء الجيدة لتجربة المستخدم). وللتنقل ، يحتوي كل من الرابط والرابط النشط على جميع الحالات المذكورة أعلاه .

أوه ، ولا تجرؤ على تغيير تخطيط الارتباط بين الدول (عرض الحدود المتغير ، والحشو ، وما شابه ذلك).

وبالمثل ، إذا لم يكن يبدو كزر ، فلن يكون له خلفية. فترة. يعد حشو عنصر نص مضمن فوضى ، ولن تعمل الخلفيات النصية غير المبطنة أبدًا.

نظرًا لأننا سنستخدم هذا على الهاتف المحمول ، فتأكد من وجود مسافة بيضاء كافية بين العناصر التفاعلية المنفصلة ، وأن كل مربع نتائج كبير بدرجة كافية. أعتقد أن الحد الأدنى من 42 بكسل لكل محور هو القاعدة.

ارسم مستطيلاً غير مرئي ، أو طبقة مخفية تظهر علب الوصول ؛ تأكد من عدم تداخلها وأن تفاعلات المستخدم لا لبس فيها.

عناصر النموذج أسوأ.

الحالة الأكثر شيوعًا التي أراها هي أزرار الاختيار ومربعات الاختيار. المعايير قبيحة! لذلك ، أنت تصمم خاصتك ، وتعطيني حالة محددة وغير مقيدة ، وتعتبر نفسك قد انتهيت.

ومع ذلك ، هناك جدول كامل متعدد الأبعاد للحالات لمربع اختيار ، ويجب الإشارة إلى كل منها بصريًا للمستخدم.

لدينا الحالات التالية:

• فحص أو لم يتم التحقق منه
• تحوم أم لا
• ركز أم لا
• ممكن أو معطل
• خطأ أم لا

يمكن لكل من هؤلاء أن يتحد مع الآخرين.

يمنع تعطيل بعض المجموعات (عادةً ما يكون التمرير والتركيز غير ذي صلة عند التعطيل) ولكن ليس كل شيء (خطأ تم تعطيله هو حالة صالحة تمامًا وغنية بالمعلومات لمربع اختيار). لذلك انتهى بنا المطاف بـ 16 حالة ممكّنة وأربع حالات معاق ، مما يعطي ما لا يقل عن 20 حالة مميزة. على سبيل المثال ، الحالات التي تعطيني إياها عادةً هي الحالات التي تم تحديدها - ليست - غير - - - - - - - - - - - - - - - - - - - - - - - - - - ليست في هذا الإعداد.

قد لا تحتوي عناصر النموذج الأخرى على حالة لم يتم تحديدها ولكن يمكن أن تكون فارغة أو غير فارغة (إظهار نص العنصر النائب). يمكن أن يكون لديهم أيضًا حالة إعلامية أكثر تعقيدًا بحيث يمكن أن تكون حالة الخطأ أو عدمه معقدة مثل نجاح التحذير من الخطأ المحايد.

بعد ذلك ، علاوة على ذلك ، يجب أن يكون لديك مؤشرات إلزامية أو اختيارية جنبًا إلى جنب مع تخطيط وتصميم محددين بوضوح للتسميات وتعليمات الإدخال ونص الخطأ.

وإذا كنت تريد حقًا أن تكون سهل الاستخدام ، فأنت بحاجة إلى حالات متسخة أصيلة ، مما يشير إلى أن المستخدم لم يقدم البيانات مطلقًا ، أو أن البيانات مخزنة بالفعل ، أو تم تغييرها ولكن لم يتم تخزينها ، حتى الآن.

ما أقوله هو: التصميم من أجل التفاعل صعب. وإذا كنت تريد تغيير شكل أزرار الاختيار ، فلا تفعل ذلك بشكل واضح مع حالتين.

مجرد نقطة أخيرة في التصميم من أجل التفاعل: قرر كيف يبدو التفاعل. بمعنى ، حدد الاصطلاحات التي ستستخدمها للعناصر التفاعلية ، ولا تستخدمها في أي شيء آخر.

لا ، لا يُسمح لك باستخدام لون علامتك التجارية الأساسي للإشارة إلى الروابط ، خاصة إذا كنت ستستخدم نفس الحل لإبراز المحتوى المهم!

التصميم للمحتوى

يعد التصميم المثالي لكل عنصر مليء بمحتوى lipsum جيدًا بما يكفي لتقديم صورة للعميل للحصول على الموافقة على النمط المرئي. لكن تصميم المحتوى لا يبدأ ولا ينتهي عند هذا الحد.

بمجرد أن تكون لديك فكرة تقريبية عما تريد القيام به بتخطيط المحتوى ، تذكر أنك تعمل بمحتوى ديناميكي. هناك حالتان يجب عليك التحقق منهما لكل جزء من المحتوى:

• ماذا لو كان هناك الكثير منه؟
• ماذا لو كان هناك القليل جدًا منه (أو مفقود تمامًا)؟

تحقق مما يحدث إذا كان العنوان قصيرًا بشكل يبعث على السخرية أو طويل بشكل غير عادي. كيف يجب أن تبدو كتلة المحتوى إذا كانت العناصر الأساسية مفقودة؟ ماذا لو لم يكن هناك صورة؟

إذا لم يكن هناك محتوى لقسم الصفحة ، فهل نزيل القسم بالكامل - العنوان والحاوية وكل شيء - أم هل نحتفظ بالقسم ونعرض شيئًا على غرار: "لا توجد مقالات بعد ، تحقق مرة أخرى لاحقًا؟" والأفضل من ذلك: "هل ترغب في أن يتم إخطارك عند وصول هذا المحتوى؟ سجل للحصول على اخر اخبارنا!"

اتخذ القرارات! ثم صمم تلك الأشياء!

إذا كنت تقوم بتصميم موجز أو محتوى تم تحميله من مصدر خارجي أو ديناميكي ، فلا تنس تضمين جميع الأخطاء والإشعارات. في الواقع ، صمم المحتوى الوصفي لإشعار الصفحة لإظهار الشكل العام ، ثم التزم باتفاقيات التصميم هذه لإعلام المستخدم في حالة حدوث خطأ ما.

تجنب الأزرار ذات العرض الثابت وكتل النص ذات الارتفاع الثابت. وإذا لم أقل ذلك من قبل ، إذا كنت تعتقد أنه سيكون دائمًا سطرًا واحدًا من النص ، فأنت مخطئ! الآن ، اذهب للتحقق من أفضل طريقة لجعله متعدد الأسطر.

تأكد من أن نفس المحتوى له نفس البنية.

إذا كان العنوان نفسه مرئيًا في عدة أماكن ، فلا تجعل كلمة واحدة غامقة في حالة واحدة وأخرى في مكان آخر!

في الواقع ، حاول تجنب هياكل التنسيق داخل العناوين تمامًا. وبالمثل ، لا تقسم النص يدويًا في مكان واحد ، ولكن قسمه بشكل مختلف في مكان آخر. في الواقع ، لا تقسم النص يدويًا!

قد تجعل هذه الأشياء تصميمك أفضل ، ولكن تذكر أنه من المرجح أن يتم إدخال المحتوى من خلال نظام إدارة المحتوى ، وقد لا يرى الشخص الذي يقوم بإدخاله كيف يبدو حتى يتم نشره ، أو قد لا يمتلك الأدوات اللازمة لكسرها يدويًا ، أو تنسيق النص.

صمم بنفس القيود التي سيشملها المحتوى النهائي - حاويات نصية ذات عرض ثابت والتفاف تلقائي للكلمات. إذا كان يبدو قبيحًا بهذه الطريقة ، فإن التصميم ليس جيدًا.

التصميم من أجل الاستجابة

لقد تقدم هذا كثيرًا مؤخرًا. على الأقل في الحالات التي يتم فيها تصميم الهاتف المحمول بالفعل. أكثر وأكثر ، تركنا bootstrap يكتشف ذلك ، وصفع الضمادات على الشقوق.

بغض النظر ، هناك بعض المبادئ البسيطة التي يجب أن تعرفها.

أولاً ، لا تعد متغيرات الجوال وسطح المكتب صفحات منفصلة. أنا أعلم أنك تعرف هذا. هم ببساطة يعاد تدفق من نفس الصفحة.

ببساطة ، هو نفس العمل مع النص المحاذي لليسار. الجملة لا تغير ترتيب الكلمات أو الحروف لمجرد أنك وضعتها في حاوية أصغر.

أيضًا ، يجب مشاركة مجموعات المحتوى عبر جميع التخطيطات. عندما تضيف أعمدة ، تأكد من تناسق فواصل الأعمدة.

أيضًا ، يجب أن تتبع الاصطلاحات الخاصة بك نفس الهيكل للإصدارات المختلفة من الصفحة. بمعنى أنه إذا ظهر عنصران متطابقان على سطح المكتب ، فيجب أن يكونا متطابقين على الهاتف المحمول أيضًا.

أوه ، وإذا كنت تريد اختلاف المنظر ، فيرجى تقديم صورة كبيرة بما يكفي للتنقل. إذا كنت مناسبًا أو قص الصورة بحيث تبدو صحيحة في الملف الذي تعرضه للعميل ، فلن يكون لدي أي شيء أتحرك فيه.

تصميم الاستثناءات

بالطبع ، الاستثناءات ممكنة دائمًا. علاوة على ذلك ، فهي ضرورية لكي يبدو المنتج جذابًا وفعالًا. ومع ذلك ، لا تقم بإضافتها في مربع المرور الأول.

إذا وجدت نفسك تحل نفس مشكلة التصميم مرارًا وتكرارًا ، فلن ينجح ذلك ، خاصة إذا كنت تبحث عن حل مختلف في كل حالة.

بمجرد الانتهاء من كل ما سبق ، يجب أن تحصل على تصميم فعال ومستقر ومتسق (إذا كان مملًا إلى حد ما). حان الوقت الآن لإضفاء الإثارة على الأمور. بالنظر إلى الصفحة ككل ، تحدث إلى العميل لتحديد الأموال - العناصر التي ستمنحهم أكبر قدر من الفائدة على أموالهم.

لقد عملنا معًا لسنوات ، وكان عملاؤنا سعداء دائمًا بالنتيجة النهائية.

بالطبع سأنتقل إذا فاتتك بعض هذه النقاط ، وعند استخدام تصميم معقد له ما يبرره ، سأبدأ في كتابة منطق العرض في JavaScript إذا كنت بحاجة إلى ذلك.

سأتدخل وأبرر العمل الإضافي للعميل إذا لزم الأمر. هيك ، لقد كنت أصمم النماذج والتفاعل على رأس التصميمات المستلمة على مر العصور ، لذلك لن تكون هذه مشكلة.

أتمنى فقط بعد قراءة هذا أن تضع بعض هذه التلميحات في الاعتبار في المرة القادمة التي نعمل فيها معًا. آمل أن يقوموا بإبلاغ عملك وتقديم التوجيه عندما لا تعرف ماذا تفعل. أود منك أن تفهم أن علاقتنا تهمني وأنني لم أكتب هذا لإيذاءك ، ولكن لتحسين علاقتنا.

مع حبي،

مطور الواجهة الأمامية الخاص بك