أهم عشر قواعد تصميم للواجهة الأمامية للمطورين

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

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

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

القيام بالأشياء في برنامج رسومي

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

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

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

تطابق التصميم ، لا تحاول التغلب عليه

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

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

بدلاً من طرح السؤال "هل تبدو علامة الاختيار الخاصة بي رائعة؟" يجب أن تسأل ، "ما مدى توافق علامة الاختيار الخاصة بي مع التصميم؟"

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

تصنع الطباعة كل الفرق

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

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

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

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

تصميم الواجهة الأمامية لا يتسامح مع رؤية النفق

من المحتمل أن تقوم بعمل أجزاء صغيرة من التصميم العام.

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

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

العلاقات والتسلسل الهرمي

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

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

كن من الصعب إرضاءه بشأن المسافات البيضاء والمحاذاة

هذه نصيحة رائعة لتحسين تصميماتك و / أو تنفيذ تصميمات الآخرين بشكل أفضل: إذا كان التصميم يبدو أنه يستخدم مسافات من 20 وحدة ، 40 وحدة ، وما إلى ذلك ، فتأكد من أن كل تباعد هو مضاعف 20 وحدة.

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

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

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

إذا كنت لا تعرف ما تفعله ، فافعل أقل

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

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

دع عمل المصمم يحتل مركز الصدارة ودع عملك يأخذ المقعد الخلفي.

الوقت يجعلنا جميعًا حمقى

سأخبرك بسر عن المصممين: 90 في المائة (أو أكثر) مما وضعوه بالفعل على الورق ، أو قماش الفوتوشوب ، ليس بهذه الروعة.

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

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

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

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

بكسل مهم

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

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

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

احصل على تعليقات

من الصعب أن تكتسب "عينًا للتصميم". من الصعب أن تفعل ذلك بنفسك. يجب أن تسعى للحصول على مدخلات الآخرين لترى حقًا كيف يمكنك إجراء تحسينات.

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

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

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

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

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

خاتمة

للتلخيص ، فيما يلي قائمة قصيرة بنصائح التصميم لمطوري الواجهة الأمامية:

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

لن يكون كل مطور للواجهة الأمامية مصممًا رائعًا ، ولكن يجب أن يكون كل مطور للواجهة الأمامية على الأقل مؤهلاً من حيث التصميم.

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

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

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