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

ما هو التناظر (Symmetry)؟

نحن نرى الجمال في الأشياء المتناظرة وفي الناس المتناسقين. التناظر هو عامل أساسي في علوم الجمال والجماليات. ولكن ماذا يعني ذلك حقاً؟

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

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

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

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

وهناك أنواع عديدة من التناظر الانعكاسي (الثنائي) في الطبيعة، مثل التناظر الأفقي (وهو الأكثر شيوعاً)، العمودي، القطري والخ.

التباين (Asymmetry)

التباين (Asymmetry) يظهر جلياً في غياب التناظر. ويمكن تحقيق التوازن التركيبي في التباين.

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

الجمال في التباين (الصورة من WIKI)

التباين في لوحة فنية رائعة للفنان Wassily Kandinsky

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

التناظر (Symmetry) ضد التباين (Asymmetry) في تصميم المواقع

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

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

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

وهذه أمثلة عن مواقع متناظرة:

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

يوجد شكل آخر من أشكال التناظر والتناسق وهو التناظر الدوراني (Rotational Symmetry) والذي يساعد على خلق الإيقاع والتناغم والتدفق. وهو يوجّه عيون المشاهدين إلى أين ستكون البداية وأين ستكون الخطوة التالية.

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

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

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

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

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

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

المزيد من الأمثلة عن مواقع مثيرة للإعجاب

إن معظم المواقع لا تتبع أسلوباً واحداً فقط (متناظر أو متباين) إنما تستخدم كلا الطريقتين معاً، وفيما يلي بعض الأمثلة عن مواقع رائعة تستخدم التناظر والتباين معاً:

خلاصة

سنلخص هذه المقالة بتقديم بعض النصائح التي تساعدك على استخدام التناظر (Symmetry) والتباين (Asymmetry) لصالحك:

التناظر عظيم جداً لهيكل التصميم الأساسي

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

التباين رائع للفت انتباه المشاهدين

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

مع التباين، يجب أن يتم التركيز على التوازن التركيبي دائما

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

اتبع غريزتك في التصميم

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

اللجوء الى الأساسيات

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

ترجمة -وبتصرّف- للمقال: Web Design Symmetry and Asymmetry.

حقوق الصورة البارزة: Designed by Freepik.

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

نأمل أن توفر لك معرفة هذه اﻷخطاء المعلومات الكافية لتحضير التصاميم بالصورة الصحيحة لعملية الطباعة.

اعرف الفرق بين RGB و CMYK

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

أما نظام CMYK (السماوي، الأرجواني، اﻷصفر واﻷسود (المفتاح)) فهو نظام ألوان طرحي subtractive، حيث تمزج اﻷحبار ﻹنتاج درجات اﻷلوان المختلفة بصورة تشبه كثيرًا مزج الرَّسام للألوان، وكلما زادت كمّية الحبر الممزوجة كان اللون الناتج غامقًا أكثر.

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

قد يؤدّي اعتماد نظام RGB بدلاً من CMYK إلى اختيار ألوان تبدو جميلة على الشّاشة ولكن لا يمكن طباعتها على الورق (دون استخدام أحبار خاصّة)، لذا ﻻ تفاجأ إذا وصلتك المطبوعة بألوان باهتة.

راقب قيم ألوان CMYK

تصبح اﻷلوان في نظام CMYK أغمق كلما زادت كمية الحبر، وتتم عملية إضافة اﻷلوان باستخدام مطبعة اﻷوفست offset (أو طابعة رقمية للكميات الصّغيرة)، حيث توضع طبقات من اﻷحبار اﻷربعة السماوي، الأرجواني، الأصفر واﻷسود على نفس المساحة في الورقة وذلك ﻹكساءها بالحبر وإنتاج مدى أوسع من اﻷلوان، وتحدد الشبكة النقطية Halftone Screen كمية الحبر المستخدمة خلال الطّباعة.

أما في برامج التّصميم فإن عمليّة اختيار اﻷلوان سهلة وبسيطة، إذ يمكن الاستفادة من أداة اختيار اﻷلوان Color Picker أو اختيار اﻷلوان من لوحات اﻷلوان الجاهزة Swatches أو إدخال قيم C, M, Y و K يدويًّا.

يجب الانتباه كذلك إلى أن اﻷلوان النّاتجة من نسب عالية من ألوان الطباعة اﻷربعة ستصبح مشبعة جدّا، وإذا تجاوز مجموع هذه النّسب 280% فإنّ اﻷلوان ستصبح داكنة وبشعة، وقد تحدث حالة نقع الحبر set-off (عندما يبقى الحبر رطباً فينتقل من ورقة إلى أخرى)، كذلك قد تظهر ألوان التّصميم جيدةً على شاشة الحاسوب، لكنها ستبدو في الطّباعة أغمق من ألوان التّصميم اﻷصليّة.

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

لا تستخدم اللون اﻷسود الخاص بالفوتوشوب

افتح برنامج الفوتوشوب واضغط على المفتاح D في لوحة المفاتيح لإعادة تعيين اللّونين الخلفيّ واﻷماميّ إلى القيم الافتراضيّة. اختر اللّون اﻷسود الذي سيُنتجه البرنامج، إنّه أسود أليس كذلك؟ انظر اﻵن إلى قيم CMYK التي تكوِّن هذا اللون، ستجد أنّه مؤلّف من 75% سماويّ، 68% أرجوانيّ، 67% أصفر و 90% أسود (المجموع 300%) وهذه كمّيّة كبيرة جداً من الحبر ستوضع على الورق، لذا تعوّد على اختيار اللّون اﻷسود يدويًّا. يمكن اختيار النّسب 0,0,0,100 للنّصوص ذات الحواف الحادّة واللّون اﻷسود، ولكنّ هذه القيم لن تعطي نتيجة جيّدة إذا ما استُخدمت في تلوين المساحات الكبيرة، إذ سيبدو اللّون رماديًّا داكنًا، لذا يمكن استخدام ما يسمّى بـ (اﻷسود الغني Rich Black) وهناك الكثير من النّسب المقترحة لهذا اللّون ولكن اﻷكثر شيوعًا هي 50,40,40,100. تعمل اﻷلوان اﻹضافيّة على جعل اللّون اﻷسود غامقًا بما فيه الكفاية مع مراعاة عدم تجاوز مجموع النسب لـ 280%.

انتبه إلى أوزان الخطوط

تؤدّي الشبكات النّقطية وظيفتها بصورة رائعة وذلك من خلال السّيطرة على كمّية الحبر التي ستوضع على الورق، ويتم ذلك عن طريق استخدام عدد أقل من النّقاط الصّغيرة في المساحات التي لا تحتاج إلى تغطية كثيرة. ولكنّ المشكلة هنا هي فقدان التفاصيل وخاصّةً عندما تكون النّصوص صغيرة أو ناعمة؛ لذا - وبحكم التجربة - فإنّ الحدّ اﻷدنى لوزن الخط هو 6 نقاط وهذا الحد يتغير بتغير نوع الخط، فعلى سبيل المثال سيختفي خطّ Helvetica Ultra-Light في أوزان أعلى من هذا الحد نظرًا لنعومته الفائقة، لذا يجب الانتباه إلى هذا اﻷمر عند إعداد المطبوعات ذات المقاسات الصغيرة.

استخدم الدقة الصحيحة

تؤثر الدقة في الحاسوب على مقاس الصورة في الشاشة فقط، أما في الطباعة فتحدد الدقة مدى الوضوح الذي ستظهر عليه التصاميم. يُعدّ المقدار 72ppi (نقطة في البوصة) مثالياً لصور اﻹنترنت، أما للطباعة فإن المقدار القياسي هو 300ppi، وكلما زادت النقاط أو البكسلات التي يمكن وضعها في كل بوصة، زادت كمية التفاصيل التي يمكن المحافظة عليها بعد إعادة إنتاج الصورة بواسطة الأحبار.

يجب التأكد دائمًا أن دقة التصميم هي 300ppi، ولو حاولت وضع صورة ذات دقة 72ppi في ملف دقته 300ppi ستلاحظ أنها أصبحت صغيرة جدًّا وذلك ﻷن البرنامج سيقوم بإعادة تحجيمها لتلائم الدقة الجديدة، لذا ستحتاج إلى صور ذات أحجام كبيرة جدّا عند التّعامل مع الملفات بدقة 300ppi، وستصبح صور الإنترنت العشوائيّة عديمة الفائدة.

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

ﻻ تنس التسييل Bleed

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

وتختلف مسافة التّسييل من مطبعة إلى أخرى ومن مشروع إلى آخر، لذا ﻻ تتردّد في الاتّصال بالمطبعة الّتي ستتعامل معها لمعرفة كافّة التّفاصيل.

راجع التصميم وصحح اﻷخطاء

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

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

ترجمة ـوبتصرّفـ للمقال 7Beginner Mistakes to Avoid When Designing for Print لصاحبه Chris Spooner.

حقوق الصورة البارزة: Designed by Freepik.

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

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

اطرح الأسئلة لتكون نبذة جيدة عن التصميم

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

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

نظراً لكون المشروع خياليًّا فإنّ جميع المعلومات عن شركة Media Stack هي من نسج الخيال، ولكني توخيت جعل المشروع نموذجيًّا لشركة صغيرة إلى متوسّطة. تلخص النبذة هوية شركة Media Stack وطبيعة عملها والصورة التي ترغب في عكسها إلى زبائنها. يمكن الاستفادة من كل هذه المعلومات في تكوين شعار فريد يمثل الشركة بصورة لائقة.

يبدأ التصميم اليومي بمسودة

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

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

كون فكرة

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

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

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

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

صمم الشعار على هيئة Vector

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

تسمح التصاميم المُوجهة vector format بتغيير مقاسات التصميم بحرية دون المساس بجودته، بعكس الصور النقطية المكونة من البكسلات والتي يؤدي تغيير حجمها إلى تشويهها وفقدان وضوحها.

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

يعد برنامج Adobe Illustrator الأكثر شهرة في هذا المجال، أما صيغ الملفات الأكثر شهرة هي Ai، EPS، و PDF. قد لا يمتلك الزبون البرامج اللازمة للتعامل مع هذه الملفات، لذا يجب تزويده بالشّعار وبأحجام مختلفة على هيئة صور بصيغة JPEG أو PNG للاستخدام اليومي، وتزويد ملف بإحدى صيغ المتجهات للاستخدام الاحترافيّ.

صمّمت شعار Media Stack بواسطة برنامج Adobe Illustrator، وهو برنامجي المفضل في مجال العمل على المتجهات. بدأت بمستطيل بسيط تلاعبت به بواسطة أداة التحديد المباشر Direct Selection Tool لإضفاء المظهر المائل عليه، وعن طريق مضاعفة المستطيل المائل وقلبه حصلت على الشكل النهائي للشعار. تمّ ضبط مواضع كل الأشكال بصورة دقيقة جدّاً، وذلك عن طريق تكبير العرض إلى الدّرجة القصوى واختيار نمط الحدود الخارجيّة (Outline mode (Ctrl+Y, CMD.

تأكد أن الشعار متوازن

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

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

هل تستخدم المؤثرات في الشعار؟

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

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

الشعار الجيد يبدو جيدا في لون واحد

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

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

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

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

استخدم سيكولوجية الألوان في تصميمك

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

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

هل تحتاج إلى إنشاء دليل للهوية التجارية؟

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

كذلك يجب أن يتضمن الدليل قسمًا خاصا توضح فيه أنه لا يجوز ضغط، مط أو تغيير ألوان الشعار، وقد يتضمن الدليل كذلك تفاصيل عن الألوان المستخدمة في الشعار بصيغ Hex, RGB, CMYK و Pantone والخطوط المستخدمة في التصميم.

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

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

قد تبدو هذه الأمثلة واضحة لنا نحن معاشر المصمّمين، ولكننا نعرف ما قد يحصل لأبنائنا عندما يضع الزّبائن أيديهم عليهم.

ترجمة -وبتصرّف- للمقال A Guide to Creating Professional Quality Logo Designs لصاحبه Chris Spooner.

حقوق الصورة البارزة: Designed by Freepik.

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

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

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

الأطر المفرغة – نظرة عامة

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

الصورة من Zach Hoeken.

الأطر المفرغة أم تصاميم فوتوشوب؟

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

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

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

الصورة من Denkbeelhouwer.

مرحلة عمل التصاميم الأولية

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

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

أدوات لعمل تصاميم أولية للمواقع

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

1. iPlotz

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

2. Balsamiq

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

3. Pencil Project

يمكن استخدام هذه الأداة لعمل مخططات انسيابية وتصاميم أوليّة للواجهات بسهولة.

4. templatr

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

5. Flair Builder

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

صورة من Michael Lancaster.

خلاصة القول

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

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

ترجمة -وبتصرف- للمقال: Beginner's Guide to Wireframes and Tools to Create Them.

يهتم كل من التصميم الُمتلائم AWD والتصميم الُمتجاوب RWD في كيفيّة عرض صفحة الموقع على مختلف الأجهزة والشاشات، إذا ما الذي يجعل لكل منهما كينونة خاصة به؟ هذا ما سيُجاب عليه في السطور القادمة في توضيح للفروقات الجوهرية بين التصميم المتجاوب RWD والتصميم المتلائم AWD.

ما هو التصميم المتلائم (Adaptive Web Design (AWD؟

يَستخدم التصميم المُتلائم الخادوم server في تحديد الجهاز المستخدم في تصفّح الموقع، بمعنى آخر، سيُستخدم الخادوم في تحديد فيما إذا كان الموقع يُعرض على جهاز سطح مكتب أو هاتف ذكي smartphone أو جهاز لوحي tablet، وكما سيُستخدم قالب template منفصل لكل جهاز على حِدة، بمعنى سيختلف القالب template المعروض على شاشة الحاسب المحمول عن القالب المعروض على شاشة الهاتف الذكي، وبما أن الموقع المصمم باستخدام التصميم المتلائم مستضاف على مجال domain خاص به، فإن صفحات الموقع تحمّل بسرعة عالية نسبيًا.

ما هو التصميم المتجاوب (Responsive Web Design (RWD؟

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

ما هو الفرق إذا؟

يكمن الاختلاف الجوهري بين التصميم المتلائم والتصميم المتجاوب في أن المتلائم سيتغيّر تغيّرًا كليًّا لكي يُلائم أبعاد الشاشة المختلفة، بينما المتجاوب سيتغيّر بانسيابية ليتجاوب مع مجموعة من الأجهزة وقياسات الشاشات، وعليه سنستعرض بقيّة الفروقات التفصيليّة بين التصميم المتلائم AWD والتصميم المتجاوب RWD:

• يَستوجب استخدام التصميم المتلائم تطوير موقع منفصل إما عن طريق عناوين URLs منفصلة أو عن طريق تطوير شيفرة HTML/CSS منفصلة، وبالمقارنة بالمثل، فإن التصميم المتجاوب RWD يعتمد على HTML/CSS3 و جافا سكريبت كليًّا، مما يوفّر على المطوّر تطوير وصيانة عناوين URLs منفصلة و/أو HTML/CSSs.
• إن صُمّم الموقع باستخدام التصميم المتلائم، فإن إجراء التعديلات سيَستوجب مراجعة SEO (تحسين محركات البحث) والمحتوى وبُنية الموقع، وبعكس ذلك فإن صُمّم الموقع باستخدام التصميم المتجاوب، فإن إجراء التعديلات سيكون سهلًا للغاية لأن إجراءات تحسين محركات البحث والمحتوى والروابط links  موجودة جنبًا إلى جنب مع HTML/CSS وجافا سكريبت JavaScript.
• بينما يَعتمد التصميم المتلائم على قياسات الشاشة المحددة مسبقًا، فيعتمد التصميم المتجاوب على شبكة grid مرنة وسلسة، بمعنى آخر، يتطلّب التصميم المتجاوب مزيدًا من الشيفرة البرمجية ليلائم صفحات الويب مختلفة القياسات، بينما يملك التصميم المتلائم تصميم معدّ مسبقًا تحدده برمجية معينة من جهة الخادوم في سبيل ملائمة قياسات الشاشة المختلفة.
• يقع الحمل الأكبر على عاتق الخادوم في معالجة تجاوبيّة الصفحات مع التصاميم المتلائمة، بينما يقع الحمل الأكبر على عاتق المُتصفّح (جهة العميل) في معالجة تجاوبيّة الصفحات.
• يستغرق التصميم المتلائم وقتًا أطول في التطوير، على عكس التصميم المتجاوب والذي يتطلّب وقتًا أقل نسبيًا.
• إن المواقع المصممة باستخدام التصميم المتلائم AWD تتعامل مع صور محسنة ومعدّلة لكل جهاز وقياس شاشة، بينما المواقع المصممة باستخدام التصميم المتجاوب RWD تحمّل الصور أوّلًا على المتصفّح ومن ثم يُعاد تحجيمها لتُلائم الجهاز الموافق لها.

خاتمة

بصرف النظر فيما لو اختير التصميم المتلائم Adaptive Web Design أو التصميم المتجاوب Responsive Web Design، فمن المهم وجود استراتيجية معينة من أجل أجهزة الهاتف، والتأكّد دائمًا من أن محتوى الموقع مُحسّن للزوّار مهما كان الجهاز المستخدم في تصفّح الموقع، طبعًا مع الحفاظ على موقع جميل ومتناغم الألوان والعناصر.

ترجمة وبتصرّف للمقال Responsive Web Design vs Adaptive Web Design - Whats the Difference لصاحبه Mike Swan.

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

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

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

تصِف مجلّة Smashing Magazine فن تنسيق النصوص بأنّه روح التصميم. ويشتمل هذا الفن على الاختيار المناسب للخطوط، محاذاة النصوص مع بعضها، وتنسيقها وفق نمط معيّن لغرض خلق تأثير أفضل، لكي يخدم التصميم الهدف الذي صُمّمَ من أجله بشكل أفضل. يمكن لفن التنسيق أن يجلب الحياة إلى النصوص الجرداء. وقد تطوّر هذا الفن تبعًا لازدهار العصر الرقميّ. اليوم، أصبح فنّ تجميل الحروف يتضمّن مجموعة واسعة من الموضوعات والتطبيقات من واقع الحياة. كما إنّ فنانيّ تنسيق النصوص يركّزون على المفهوم التواصلي من هذا الفن، جاعِلين إياه أسهل للقراءة، أسهل للتمييز، قابلًا للبيع، وبالطبع أكثر إثارة للاهتمام. نحن نُصادف هذا الفن في حياتنا كلّ يومٍ تقريبًا؛ في الكتب التي نقرأها، أو في الصحيفة التي يتصفّحها شخص جالسٌ بجانبنا، في الإعلانات، في الإنترنت، في الإشارات في الشارع؛ في كلّ مكان. إنّ أهمية فن تنسيق النصوص تتسع أكثر وأكثر كلّما تطوّر استخدام هذا الفن في مخططات التصميم.

قد يكون من السهل بمكان أن تدرس فن تنسيق النصوص. ربّما يقول البعض: "إنّها مجرّد حروف؛ كيف يكون الأمر صَعبًا؟"، لكن مهما بدا سهلًا، فإنهّ يبقى فنًّا صعبًا جدّاً للاحتراف. يواجه معظم المصمّمون صعوبات في محاولة إتقان مهارات هذا الفن، حتّى إنّ بعضهم ينفق مبالغ كبيرة من المال في سبيل ذلك، وفي النهاية لا يفلحون. نعم، الأمر محبطٌ في بعض الأحيان، لكنّ دراسة هذا الفن وإتقانه هي من الفرص الرائعة لاكتسابها ومعرفتها.

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

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

إذًا، ما الذي يجب عليك تجنّبه؟

لا تستخدم العديد من عائلات الخطوط typefaces في صفحة واحدة

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

لا تستخدم خطوط Serif وSans Serif بدل بعضهما البعض

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

لا تستخدم الحروف الكبيرة caps دائمًا

WHAT DO YOU FEEL WHEN YOU READ THIS PARTICULAR SENTENCE?

بماذا تشعر عندما تقرأ الجملة أعلاه؟ ألا تشعر بالزحمة والانزعاج؟ تُستخدم الحروف الكبيرة (بالنسبة للغة الإنجليزية) لغرض التأكيد على أهمية رسالة ما في النص. لكن عندما تكتب نص مكون من 100 كلمة جميعها بالحروف الكبيرة فإن ذلك يعتبر مُبالغة، وسيعطي ذلك انطباعًا على Hنّك غاضبٌ أو تصرخ. تذكّر، ليست كلّ الرسائل مهمّة؛ يجب عليك معرفة الفرق.

حاول قدر الإمكان ألّا تستخدم الخطوط Comic Sans، Papyrus، أو Curls MTz

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

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

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

لا تستخدم التقنين التلقائي

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

لا تستخدم حجم أقل من 10 للنصوص في المحتوى

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

الخلاصة

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

ترجمة -وبتصرّف- للمقال How to Not Suck at Typography And Become A Professional لموقع: 1stwebdesigner.

حقوق الصورة البارزة: Designed by Freepik.

موقعك ميّت؟ يوجد أمل في ذلك.

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

1. فكر في التحويلات Conversion

يجب أن يجد العملاء سببًا مبررًا من شأنه إن يؤدي إلى التحويل.

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

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

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

يلعب كل جانب من جوانب تصميم الموقع دورًا في قيادة العملاء إلى وجهاتهم وتحويلهم.

• الصور: يجب أن تكون الصور مثيرة للاهتمام، فريدة من نوعها، وذات جودة عالية.
• اللون: هل نظام الألوان جذّاب وملفت للنظر؟
• النص: ويشمل النص المستخدم للمراسلة وكذلك الوصف، التعليمات، والبطاقات.
• التصفّح: كيف يمكن للأشخاص أن يتنقلوا بسلاسة خلال موقع؟

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

موقع Device Magic يمتلك جميع عناصر التحويل الجيد.

مفاجأة! هذا الموقع هو موقع حقيقي.

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

إنّ اختبار A/B هو وسيلة رائعة لمقارنة النتائج بين تصميمين مختلفين. على سبيل المثال، إذا كان لديك زر دعوة إلى إجراء (call-to-action button) كبير على الصفحة الرئيسية لموقعك؛ يجب عليك معرفة اللون، الخط، وحتّى الموضع الذي سيكون أكثر فعّالية لهذا الزرّ.

اختبار A/B ضروري لمعرفة ما يصلح أو لا يصلح لتحويل أفضل.

عندما تُجري الاختبار الذي يرى فيه بعض المستخدمين الخيار (A) والبعض الآخر يرى الخيار (B) يمكنك بذلك دراسة النتائج لمعرفة البُنية ذات الأداء الأفضل والتي ينتج عنها تحويل أكبر للعملاء. عندئذ يمكنك عمل تغييرات وإجراء تجارب إضافية في محاولة إيجاد أفضل خيار مُتاح للزرّ. وهذا هو الشيء الذي يجب أن تفعله للتصميم النهائي لموقعك.

2. لا تخش المساحات البيضاء

المساحات الكافية بين العناصر تعني تجربة قراءة ممتعة أكثر.

الاستخدام الفعّال للمساحات البيضاء هو خاصيّة أخرى مهمّة لتصميم موقع عظيم. يُنظر إلى المساحات البيضاء من قِبل غير المصمّمين على أنها المساحات من الموقع التي لم يُطبّق عليها تصميمًا معيّنًا. بينما يعتبرها خبراء تصميم المواقع مساحات مصمّمة بتأنٍّ، سواءً استُخدمت هذه المساحات حول الصور، المحتوى النصّي، أزرار التحويل، أو أي عنصر آخر من عناصر الموقع. ويصِف المصمم البارز Ellen Lupton المساحات البيضاء أفضل وصفٍ بقوله:

"التصميم هو مُباعدة بقدر ما هو تخصيص".

(أي إنّ المساحات البيضاء مهمّة بقدر المساحات المملوءة بعناصر التصميم).

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

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

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

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

3. تنسيق النصوص، تنسيق النصوص، تنسيق النصوص

لا تستخفّ أبدًا بالخطوط.

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

اقتصرت إمكانية المواقع، ولعدة سنوات، على استخدام مجموعة من "الخطوط الآمنة للمواقع" مثل:

• Arial
• Verdana
• Times New Roman
• Georgia
• Tahoma
• Lucida
• Impact
• وغيرها الكثير

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

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

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

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

صفحة Design Can Change هي مثال جيد على التوازن.

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

تذكّر، الموقع ليس مجرّد صورة جميلة وُجدت لغرض الإعجاب بها. إذا احتوى الموقع على نصوص (وأي موقع لا يحتوي على نصوص؟) فإنّ ذلك يعني أنه وُجِد لكي يُقرأ. قد يكون إيصال الرسالة من خلال موقعك هو من مهام كاتب المحتوى، لكنّ تنسيق النصوص بشكل رائع سيضمن وصول الرسالة بشكل واضح ومؤثّر.

4. أقل وليس أكثر

قد تكون بضع كلمات جيّدة المعاني أقوى تأثيرًا من مجموعة من المعلومات إذا أردت توضيح نقطة معيّنة.

هنالك مقولة لِـ Antoine de Saint-Exupery من المقولات المتعلّقة بالتصميم المفضّلة لديّ:

"يَعرف المصمّم أنّه حقّق الكمال عندما لا يتبقّى شيء لإزالته وليس عندما لا يتبقّى شيء لإضافته "

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

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

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

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

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

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

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

5. أضف بعض المرح ولكن لا تتجاوز المعقول

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

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

لنأخذ موقع "The Dangers of Fracking" كمثال. هذا الموقع يدور حول مخاطر التكسير الهيدروليكي، لن يتبادر إلى ذهنك المرح إذا فكّرت بهذا الموضوع، مع ذلك هو موقع جذّاب، لافت للانتباه، وبارز بسبب استخدام الرسوم التوضيحية، الرسوم المتحرّكة، وتأثير parallax-style storytelling. يعتبر هذا مثالًا رائعًا على استخدام "المرح" في موقع جادّ لجعل الرسالة والتجربة أكثر قوّةً وتأثيرًا.

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

ختاما

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

ترجمة -وبتصرّف- للمقال 5Web Design Best Practices For a Great Website لصاحبه: Tomer Lerner.

التسلسل (أو التتابع Hierarchy) هو مفهوم واسع ومُهمّ لكنّه سهل التّنفيذ في مجال الخطوط Typography، وسنقوم في هذا المقال بإرشادك إلى طريقة تسخير هذا المفهوم لتحسين مشاريعك التصميمية.

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

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

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

إذًا، كيف يكون باستطاعتك تنسيق النصوص بتسلسلٍ مؤثّر في تصميمك؟ سيكون من الجيّد والكافي للكثير من التصاميم أن تبدأ بإضافة ثلاثة مستويات منفصلة عند تنسيق النصوص.

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

فعلى سبيل المثال؛ تصميم الصفحة الخاصّة بهذا المنتج بسيط، ولكنّه مع ذلك يحتوي على ثلاث مستويات على الأقل من التسلسل في تنسيق النصوص. بإمكاننا القول إنّ اسم المنتج " Major Black headphones" هو المستوى الأول، السعر هو المستوى الثاني، ووصف المنتج هو المستوى الثالث. لاحظ كيف أن فقرة الوصف منسّقة بخط رقيق سهل القراءة وبمسافات كبيرة بين الأسطر (يعرف أيضًا بالتباعد الرأسي للأسطر Leading).

توجد العديد من الطرق التي يمكن الاختيار من بينها لغرض تنظيم محتوى التصميم بصريًّا. قد يبدو العديد منها كتفاصيل صغيرة، ولكن على حد تعبير المصمم والمعماريّ الأمريكي المشهور؛ تشارلز إيميز Charles Eames: " التفاصيل ليست بالتفاصيل. التفاصيل هي التي تصنع التصميم" ( “The details are not the details. They make the design.”)

دعونا نلقي نظرة على الخيارات التي تمكّن المصمّم من تحقيق التسلسل في تنسيق النصوص بحيث تعطي وقْعًا قويًّا ومؤثّرًا.

كيفية إنشاء نصوص ذات نسق متسلسل وتنظيم التصميم بصريا.

1. نسّق أحجام الخطوط

إنّ الحجم هو الطريقة الأبسط لخلق التباين بين العناصر النصّية المختلفة في التصميم، خصوصًا إذا كنتَ تعمل مع خطوط من عائلة خطوط typeface واحدة فقط (يُطلق أيضًا اسم Font Family على عائلات الخطوط). عند العمل بالمستويات الثلاثة لتنسيق النصوص سيكون الحجم الأكبر عادةً في الأعلى (المستوى الأول؛ المعلومات الأكثر أهميّة)، ثمّ يتناقص الحجم كلمّا نزلنا نحو أسفل الصفحة (في النهاية يكون حجم نصّ المحتوى هو الأصغر؛ أي المستوى الثالث). إن التسلسل المتجه من الأعلى إلى الأسفل هو الأكثر طبيعية بالنسبة للقرّاء عند التصفّح، لأننا نقرأ عادةً من اليمين إلى اليسار (أو العكس)، ومن الأعلى إلى الأسفل. وهذا النمط شائعٌ جدّا في التخطيط لكل الأشياء المقروءة، كالكتب، المجلّات، أو المقالات على شبكة الأنترنت.

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

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

2. اختر العديد من عائلات الخطوط المتباينة

فكّر مرّة أخرى بالعنوان الرئيسي "On The Moon" في الصفحة التي شاهدناها في بداية المقال. ألا يتميّز الخط السميك من عائلة sans-serif بصورة واضحة عن الخط المائل والنصوص المكتوبة بخطوط عائلة serif في بقية الصفحة؟ لا يُشترط دائمًا أن يكون الجمع بين عائلات الخطوط Typefaces ملحوظًا كهذا، ولكنّ التباين عنصرٌ أساسيٌّ في أيّ تركيبة خطوط.

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

لتضع في حسابك أنّ اختيار العديد من أنواع الخطوط غير محبّذ، وسيجعل ذلك تصميمك مُبعثرًا ومُزدحِمًا؛ نوعان أو ثلاثة كافيان في أغلب التصاميم. كما يجب أن تتأكد من أنّ اختياراتك ملائمةٌ لنمط وسياق تصميمك.

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

3. جرب أنماط وأسماك خطوط مختلفة

تأتي العديد من الخطوط مع خيارات متعددة للنمط والسُمْك -أرجو ألّا يكون قد تبادر السَّمَك إلى أذهانكم عند قراءتكم لكلمة أسماك-الأنماط المختلفة يمكن أن تتضمن الإمالة Italic، تحويل الأحرف الصغيرة إلى كبيرة Small Caps، أو الإصدارات المتقاربة أو المتباعدة من الخطوط. أمّا السُمْك فهو يشير إلى رِقّة أو غِلط الخطوط. إذا كان الخط الذي تستخدمه بخيارات رقيق، متوسط، سميك، وسميك جدّا فتلك هي الأسماك المختلفة. إنّ هذه الخصائص تعطيك الكثير من الخيارات عندما يتعلّق الأمر بتوزيع الأدوار المختلفة (أو إعطاء مظهر مختلف ولكن متكامل) بين العناصر النصيّة المتنوعة في تصميمك. لنأخذ الصورة أدناه كمثال (وهي إشهار لرسالة إخبارية). جميع النصوص من عائلة sans-serif هي بنفس الخط ولكن بأسماك مختلفة. الحروف السميكة لعنوان الرسالة الإخبارية تجعلها أكثر وضوحًا؛ أي إنّ السُمْك البصريّ يشير إلى أنها الجزء الأهمّ في تسلسل التصميم هذا.

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

4. قم بإضافة بعض الألوان

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

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

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

5. أعط المسافات حقها من الاهتمام

إن المسافات بين العناصر النصّية في أي تصميم، سواءً كانت المسافات بين الحروف أو بين الأسطر، هي التي تصنع كل الفرق بين تصميم متوازن وسهل القراءة، وآخر مبعثر ومُربِك.

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

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

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

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

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

6. أعط المسافات حقها من الاهتمام: التقارب

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

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

7. تلاعب باتجاه النص

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

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

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

ترجمة -وبتصرّف- للمقال: Why Every Design Needs Three Levels Of Typographic Hierarchy لصاحبته: Janie Kliever.

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

كيف تفهم أساسيات عجلة الألوان Color Wheel

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

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

الألوان الأحادية monochromatic colors

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

الّلون الأساسي الذي قمنا باستخدامه في الصورة السابقة هو الّلون الأخضر، الأخضر الفاتح (50% أبيض) والأخضر الغامق (50% أسود). واستخدام الألوان الأحادية monochromatic colors في التصاميم يضيف لها رونقًا واحترافية، فيكون التصميم بسيطًا لا تعقيد فيه (خاصة إذا كان التصميم يستخدم قليلا من الإضافات والتأثيرات إلا أن ذلك قد يجعل منه تصميما مملًا ومنفرًا.

الألوان المكملة  Complementary colors

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

الألوان التماثلية Analogous colors

الألوان التّماثلية Analogous colors هي الألوان التي تصطف بجانب بعضها البعض علي عجلة الألوان الأساسية، وهي شبيهة بالألوان الأحادية monochromatic colors في كونها مناسبة جدا للتّصاميم المهنية والتّجارية، كما أنّها ملفتة للانتباه باعتبارها تضيف نوعا من التباين والجاذبية على التّصميم.

الألوان التّماثلية سهلة الاستخدام ودائما تظهر بشكل جميل.

الألوان المثلثية Triadic colors 

الألوان المثلّثية Triadic colorsهي ألوان مستقلة موجودة على العجلة والتي تشكل مثلّثا بمجرد الربط فيما بينها، ويتميز هذا النمط من الألوان في كونه يخلق نوعا من الجماليّة والتوازن.

إرضاء العملاء باستخدام تركيبات لونية صحيحة ومناسبة 

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

المطاعم، الوجبات السريعة والمنتجات الغذائية

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

أجسامنا تتفاعل سلبيا مع اللون الأزرق والأرجواني، أما الأخضر والبني فهما لونين مناسبين للاسترخاء و الأطعمة غير الرسمية (casual) كالمقاهي مثلا، كذلك جرّب أن تستخدم الألوان المكمّلة والألوان المثلثية.

هذه مجموعة من لوحات الألوان الجذابة والتي يمكن استخدامها للمطاعم، الوجبات السريعة والمنتجات الغذائية:

مساحيق التجميل ومواد التنظيف

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

هذه مجموعة من لوحات الألوان الجذابة والتي يمكن استخدامها لمساحيق التّجميل ومواد التّنظيف:

المؤسسات الحكومية، المؤسسات العامة، المنظمات الحكومية وغير الحكومية

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

المنظّمات الحكومية وغير الحكومية تفضل أن تستخدم الأحمر، الأبيض والأزرق في تصاميم شعاراتها مثل ما هو مستخدم في العلم الأمريكي وهي أيضا علامة على القومية والنزاهة. حاول استخدام الألوان الأحادية والتماثلية وقلل من استخدام الألوان المتباينة (الألوان المكملة).

هذه مجموعة من لوحات الألوان الجذابة والتي يمكن استخدامها للمؤسّسات الحكومية، المؤسسات العامّة، المنظّمات الحكومية وغير الحكومية:

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

الفنادق، المنتجعات ومنشآت الضيافة الأخرى

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

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

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

الخلاصة

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

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

ترجمة -وبتصرّف- للدّرس Guide to Choosing Color Combinations When Building Sites For Clients لصاحبه James Richman.

حقوق الصورة البارزة: Designed by Freepik.

تتطور أدوات التصميم المبدئي (prototype) للواجهات الرسومية UI بسرعة. لقد أتى إصدار فوتوشوب 2015 محمّلًا بمزايا جيدة تتعلق بـPreview CC الذي يسمح للمصممين بعرض ألواح التصميم الخاصة بهم وكذلك تراكيب الطبقات (layer comps) على الأجهزة. إن رؤية العمل ضمن سياقه على الأجهزة طريقة ثمينة لتقييم وتحسين المفهوم المتعلق بالتصميم. الوصول بالعمل إلى شاشات الأجهزة ذات العلاقة لهو مفتاح الوصول إلى توجهات تقديم المحتوى (content first approaches).

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

ما هو التصميم الأولي (prototype)؟

التعريف المفضل لدي لكلمة prototype تأتي من المصمم Adam St. John Lawrence:

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

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

الدقّة العالية والمنخفضة

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

يجب أن تتطور دقة التصميم الأولي مع الوقت. لقد تم اقتباس المخطط أعلاه من Scott Klemmer.

عمل سكتش على الورق

سكِتشات المراحل الأولى تستعرض تجربة المستخدِم لتطبيق جهاز محمول.

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

نصائح للتصاميم الأولية للواجهات المستجيبة وواجهات الموبايل:

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

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

رسم سكِتشات على اللوح

يسمح رسم السكِتش على اللوح بجعل العمل مرئيًّا لفريق أكبر.

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

نصائح للتصاميم الأولية للواجهات المستجيبة وواجهات الموبايل:

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

عمل تصاميم أوليّة على الورق:

تصميم أولي بسيط على الورق في بداية العمل.

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

اختبار التصاميم الأولية على الورق طريقة سهلة وغير مكلفة للتحقق من الأفكار. يمكنك أن تسأل المستخدمين أن يعبروا ببساطة عن ما يرونه، أو أن يقوموا بعمل اختبار يتعلق بالوظيفة. يمكن للإنسان أن يعمل كحاسوب وأن يُبدِل الصفحات أو يخرج نوافذ منبثقة وأن يتفاعل مع المستخدم بشكل عام. هذه طريقة فعَالة للغاية، ويتفاعل معها المشاركون بجدية. تُدعى هذه الطريقة من التصاميم الأولية لـ"ساحر أوز" (بالإنجليزية: “Wizard of Oz prototyping”، كما في الرواية الأمريكيّة).

نصائح للتصاميم الأولية للواجهات المستجيبة وواجهات الموبايل:

• يُمكِن للودجات (جمع وِدجَة، بالإنجليزية widget) أن تُمثَّل بورقة أو بطاقة.
• يُفضَّل العمل على التحجيم في هذه المرحلة، وخاصة إذا كنت تنوي اختبار الواجهة باستخدام النماذج الورقية.
• أنشئ إطارات أجهزة بالورق أو الورق المقوّى لعرض الصفحات بداخلها.
• أنشئ قوائم منسدلة وعناصر تفاعلية أخرى بقصّ وطيّ قطع الورق، حيث يمكن إلصاقها باستخدام اللاصق أو تمريرها عبر فتحات في الصفحة.
• الصق شاشات النموذج الأوليّ الورقيّة بأجهزة حقيقية لأخذ فكرة عن كيفيّة استخدام الناس للجهاز في سياق الواقع، وإلى أيّ حدّ يمكنهم أن يصلوا في الشاشة عند إمساكهم للجهاز في وضعيات مختلفة.

التفاعل بلعب الأدوار

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

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

نصائح للتصاميم الأولية للواجهات المستجيبة وواجهات الموبايل:

• فكّر بالرسائل أو لغة التفاعل الخاصّة بالمنصة (البيئة، نظام التشغيل، الجهاز ...) عند تصميم واجهات الموبايل.
• خذ بعين الاعتبار الاختلاف في الشكل العام بين الأحجام المختلفة للشاشات، وكيف يمكن له أن يؤثر على المسار المحادثة/التفاعل.

خلاصة

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

ترجمة -وبتصرف- للمقال: Early Stage UX Prototyping: Tips for Mobile and Responsive Design لصاحبه: Linn Vizard.

حقوق الصورة البارزة: Designed by Freepik.

استكشف الأفكار باستخدام ورقة وقلم

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

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

شخصيًّا، أجد أن تَحْريك قصاصات الورق يسمح لي بتحديد النمط والتفكير بكيفية تفاعل المستخدم مع حلول التصميم وتفسيره لرسائلي.

نحن لا نصمم صفحات. نحن نصمم أنظمة ذات مكونات. - Stephen Hay

لقد بدأت حديثًا باستخدام حاسوب محمول متصل بـCreative Cloude لتوريد الـسكتشات بسرعة إلى التطبيقات لتحسينها أكثر ولعمل تصاميم أولية سريعة.

تعتمد إعادتك وتقييمك لحلول التصميم الخاصة بك على التدريب. ارسم سكتشات يوميًا وبتكرار ونفّذ تصاميم أولية. اتبع نمط ABC والذي يعني (Always Be Creating).

هرم التصميم

يساعدك رسم سكتشات وتكرارها مراراً على التقدم في هرم التصميم. يسمح لك هذا أن تسير بأفكارك وتصميمك من حلول غير تفصيلية إلى تفصيلية، وأن تفصل التصميم بما يتناسب مع رسالة التواصل أو المنتج الرقمي. يعتمد هرم التصميم على مفهوم التصميم المتكامل Total Design لـ Stuart Pugh الذي يقسم الأنشطة إلى ست مراحل. أما بالنسبة للتصاميم الرقمية، فقد بسطتها إلى: رسم سكتشات، عمل أطر مفرغة، تمثيل، عمل تصاميم أولية. تذكر أن السكتش لا يساوي الإطار المفرغ.

تخط النصوص الحافظة للمكان. استخدم محتوى حقيقيا

يجب أن يبدأ تصميم أيّ حل رقمي بمحتوى نابع من الحقيقة. النصوص الحافظة للمكان مجرد تقدير لأي تصميم ممكن. يجب أن يشمل تصميمك سياقًا للمحتوى المقدم للمستخدمين (وللزبائن). يمكن أن يُفضي استخدام المحتوى الحافظ للمكان إلى اتخاذ قرارات تصميم خاطئة يمكن أن تؤثر على التصميم وعلى التطوير في المستقبل. لقد رأيت ما لا يعد من النماذج والتصاميم الأولية التي فيها عبارة "Bob Smith, job title here". استخدم محتوى حقيقيًّا لتعرف كيف سيبدو تصميمك متى تمّ إكماله. ستساعدك النسخة الحقيقية من المحتوى على تحديد طول مستطيلات الإدخال في نماذج الوِب، وطول الأقسام وأشرطة التمرير الجانبية. ستعطيك النصوص الحافظة للمكان (lorem ipsum) شعورًا مزيفًا بالأمن وستؤدي إلى افتراضات غير واقعية عن عمل التصميم الخاص بك. ستصمم لتصل إلى مقدار مثالي من النسخ أو المحتوى، والتي لا تحدث أيّ منها في العالم الحقيقيّ. قم باتخاذ قرارات التصميم التي تدعم المحتوى.

التصميم يحدد كيفية العمل

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

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

اختبر الافتراضات في المتصفح

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

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

قائمة التحقق من أدوات تصميم تجربة المستخدم:

• قلم رصاص وممحاة.
• أقلام حبر شبه سائلة (جِل)، وهي المفضلة لدي.
• مسطرة.
• دفتر رسم سكتشات (إما بورق غير مسطور أو ورق مربعات).
• أقلام بتدرجات رمادية.
• شبلونة رسم مفرغة.
• قصاصات ورقية ملونة.
• أقلام (ماركَر).

هل هناك شيء آخَر ترغب بإضافته إلى هذه القائمة؟ أخبرنا في التعليقات.

رحلة تصميم موفقة!

ترجمة -وبتصرف- للمقال: Sketch, Iterate, Repeat: Prototyping Your Website Design لصاحبه: Andrew Smyk.

حقوق الصورة البارزة: Designed by Freepik.

إن آخر ما تريد سماعه من المستخدم لديك عند دخوله إلى موقعك لأول مرة هو "لحظة، ما الذي علي أن أفعله هنا بالضبط؟!"

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

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

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

ولهذا، فما ستقرأه هنا هو دليل موجز: أساسيّات تصميم عناصر التنقلات. أول ما سنركز عليه هنا هو فصل الأشياء الضرورية للتنقل السليم عن غير الهامّة.

ونبدأ بما يلي:

إن الانطباع الأول هو ما يحدد النجاح أو الخسارة

لدى كل منا موقع في العلامات (bookmarks) نستمتع بزيارته رغم سوء تصميم عناصر التنقلات فيه، أليس كذلك؟ لقد تعلمنا بطريقة ما أن نتنقل فيه وأن نحصل على محتواه، رغم صعوبة التنقلات. ما أحاول قوله هنا هو أن الزائر العادي لديك سيتعلم كيف يتعامل مع موقعك مع الوقت، بغض النظر عن مدى سوء تصميم عناصر التنقلات.

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

يبدأ التنقل الجيد بهيكلية جيدة للمحتوى

في الواقع الأمر سهل:

المحتوى أولًا، ثم القوائم.

يجب ان لا يكون تصميم عناصر التنقلات فكرة متأخرة، بل أن يكون نتيجة مباشرة لهيكلية المعلومات التي على الموقع.

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

دائما فكر بأهدافك أنت

تُعلمُنا إحدى مدارس تصميم عناصر التنقلات أن نركز دائمًا على ما يريد المستخدم عمله أولًا: اهتم بأهداف المستخدمين أولًا.

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

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

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

خمن طريقة تفكير المستخدم

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

دعني أعرض عليك مثالين هنا:

• المثال الأول: جوجل. كل من يذهب إلى موقع جوجل يعرف تمامًا ما يبحث عنه. كل ما يحتاجه الزائر هو حقل إدخال للبحث يمكنه أن يضع فيه الموضوع الذي يبحث عنه وحسب.

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

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

يجب أن تكون التنقلات مألوفة

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

وفوق كل شيء، يجب أن لا يكون التنقل مُربكًا. يجب أن يتمكن جميع المستخدمين من تمييز القوائم بمجرد رؤيتها، دون أن يضطروا للبحث عنها. وبمناسبة الحديث عن ذلك، فهذا ليس رأيي وحدي. لقد طلبت من Robert Hapiuc -وهو مصمم في CodeinWP blog- أن يشاركني رأيه فيما يراها الأخطاء الأكثر شيوعًا التي يقع فيها مصممو المواقع عندما يتعلق الأمر بتصميم التنقلات. وفيما يلي ما قال:

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

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

والأهم من هذا كلّه:

لا تتجاهل الأعراف المتبعة في الشبكة العنكبوتية

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

لذا، فالقاعدة الرئيسيّة هي الالتزام بالأعراف الموجودة، وجعلها توافق تصميمك، ولا تعد اختراع العجلة دون داعٍ.

أظهر المحتوى الرئيسي بما يكفي

بناء تنقلاتك حول المحتوى الرئيسيّ للموقع بداية جيدة.

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

لا تقع في فخّ بناء تنقلاتك حول القطاعات أو التصنيفات الرئيسيّة للمحتوى.

قد يكون توجه كهذا قد يكون جيدًا لموقع دليل (مثل Alltop)، ولكنه لن يكون فعالًا على المدى البعيد لمواقع من نوع آخر. وهذا لأن تصميم عناصر التنقلات بناء على التصنيفات وحدها يتطلب أن يكون الزائر على اطلاع على ما يُتوقَّع أن يجد في كل تصنيف.

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

أي نوع من عناصر التنقلات أستخدم؟

هل نوع عناصر التنقلات التي تستخدمها مهم؟ هل هناك ميزة هامّة لاستخدام شريط التنقل العلوي (top nav. menus) بدلًا من القوائم المنسدلة الكبيرة (mega menus)؟ هل القوائم المنسدلة هي الطريقة السليمة؟

كالعادة -وكم أكره أن أقولها- هذا يعتمد على عدة أمور.

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

أشرطة التنقل العلوية (top nav bars)

هي أداة التنقل الأكثر شيوعًا وربما الأكثر عمليّة. وأما عن عيبها الوحيد، فهو أنها تتسع فقط لقدر محدّد من العناصر. ولكن لا يشترط أن يكون هذا عيبًا. يتطلب استخدامك لشريط الانتقال العلويّ أن تراجع أولوياتك، بحيث تختار فقط أهم العناصر لتعرضها في الشريط العلويّ. كما وتجعل هذه الأشرطة اختيارات المستخدم أسهل. وفي النهاية، يذكرني هذا الكلام بالمثل العربيّ القائل "خير الكلام ما قلّ ودلّ"، والمثل الأجنبي القائل "less is more”.

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

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

القوائم الجانبية

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

الجانب السلبي لهذه القوائم هو أنها يمكن أن تجذب قدرًا كبيرًا من اهتمام الزائر وتحدّ من ظهور وجاذبيّة الجزء الخاصّ بالمحتوى الرئيسيّ.

وفي النهاية، لدينا نوع القوائم الأكثر إثارة للجدل، وهو القوائم المنسدلة (drop-down)

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

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

اسع إلى النجاح على المدى البعيد

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

ما التالي؟

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

أرى أن ندع الباقي إلى يوم آخَر، ونتوقف هنا لنسمح لعقلنا أن يتشرّب هذه المعلومات.

ما رأيك؟ وما هي استراتيجيتك في تصميم عناصر تنقلات فعالة تقوم بمهمتها على أكمل وجه؟

ترجمة -وبتصرف- للمقال: Navigation Design 101 لصاحبته Karol K.

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

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

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

مالذي يعنيه المصممون بالمساحات البيضاء؟

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

الآن وبعد أن قمنا بتعريف مصطلح "المساحات البيضاء" بوضوح، فإنّ السؤال التالي سيكون: “لماذا هي مهمّة؟".

لماذا المساحات البيضاء مهمّة

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

أشارك معكم أدناه 4 إيجابيات لهذا النوع الأخير:

تحسين الوضوح

أفضل ميّزة للمساحات البيضاء هي أنّها تزيد من الوضوح. تحتاج فقط إلى مقارنة الأمثلة الظاهرة أدناه والمستنقاة من http://alistapart.com/article/whitespace حول المساحات البيضاء لتلاحظ كيفّ أنّ استخدامها بشكلٍ جيّد يمكنه أن يحسّن بشكلٍ هائل من درجة وضوح موقعك:

فهمٌ أعلى

صدّق أو لا تصدّق، يمكن للمساحات البيضاء بين الفقرات وحول أقسام النصوص أن تساعد الناس على أن يفهموا ما يقرؤون بشكلٍ أفضل. وفقًا لدراسة في 2004، يمكن لهذا النوع من المساحات البيضاء أن يحسّن نسبة الفهم بنسبة 20% تقريبًا.

تركيزٌ أفضل

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

إيصال النبرة الصحيحة

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

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

أعداء المساحات البيضاء الثلاث

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

فلنبدأ بالحديث عن الطيّ (the fold).

الطيّ The fold

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

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

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

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

محاولة قول الكثير

سببٌ شائع آخر يتم من أجله عدم استخدام المساحات البيضاء ضمن التصميم هو وجود الرغبة في إيصال الكثير من المعلومات في وقتٍ واحد. يمتلك معظم أصحاب المواقع الكثير من الأشياء التي يريدون قولها ولكنّ المستخدمين لسوء الحظ لا يعيرون سوى القليل من الاهتمام. لذلك فإنّه من المهم بالنسبة لك أن تقوم بـ"صرف" هذا الاهتمام بشكلٍ حكيم.

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

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

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

السياسات

بالطبع وحتّى في أحسن الأحوال في العالم فإنّ صاحب الموقع قد يضطر إلى إضافة الكثير من المحتوى إلى صفحةٍ ما بسبب سياساتٍ داخلية. عندما يصرّ أحدٌ ما أعلى منك ضمن المؤسسة أن يظهر محتوى مشروعه أو مشروعها بأكمله على الصفحة الرئيسية فإنّه هناك القليل مما يمكنك فعله.

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

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

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

الخاتمة

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

ولكن مالذي تعتقدونه أيها الأصحاب؟ مالمشاكل التي واجهتموها مع المساحات البيضاء؟ لماذا تعتقدون أنّ المساحات البيضاء ضمن التصميم مهمّة جدًا؟ أو لماذا لا تعتقدون ذلك؟ شاركونا آرائكم في التعليقات أدناه.

تمّت ترجمة المقال: Why whitespace matters وبتصرّف لصاحبه Paul Boag.

حقوق الصورة البارزة: Designed by Freepik.

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

أعلم أن هذا قد يبدو مُبهمًا نوعًا ما، ولذا -لأوضح الأمور- لنلقِ نظرة على ثماني خرافات تتعلق بتصميم صفحة البداية يفترض على الجميع أن يعرفها.

الخرافة الأولى: يجب أن تبدو صفحة البداية جميلة

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

وبعبارة أخرى، تركيزك على عمل صفحة تسرّ الناظرين لهو أمر غير كافٍ للوصول بك إلى إسعاد زبونك (على المدى البعيد على الأقل).

هناك أمر واحد يهمّ أكثر بكثير من المنظر الجذاب لصفحة البداية، وهو قدرة هذه الصفحة على تحقيق هدفها الرئيسيّ. يجب أن يكون لكل صفحة هدفها الخاص بها، وهو الهدف الرئيسيّ الذي من أجله وُجِدَت هذه الصفحة، لذا من أهم مهامك الرئيسيّة عند العمل على تصميم أن تحدد هذا الغرض.

يمكنك أن تجرب الإجابة على السؤال التالي لجعل عملك أسهل:

ما الأمر الرئيسيّ الذي ترغب أن يقوم به زوارك عند رؤيتهم لصفحة البداية لديك؟

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

إذا كانت النتيجة جميلة (تسرّ الناظرين)، فهذه ميزة تكميليّة.

إن أحد أفضل الأمثلة على تصميم الواجهة الرئيسيّة بالتركيز على الأهداف على الإنترنت هو موقع Craigslist. الواجهة قبيحة، لكنها تفي بالغرض:

الخرافة الثانية: يجب أن تكون صفحة البداية مناسبة للجميع

وبعبارة أخرى، تقول الخرافة أنه بغض النظر عن من يأتي لزيارة صفحة البداية، فعليه أن يُعجَب بها وأن يسعد بما يجده.

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

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

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

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

الخرافة الثالثة: يجب أن تعرض صفحة البداية الكثير من المعلومات

يمكننا أن نقول ونحن واثقون أن عصر صفحات البداية ذات التفاصيل الكثيرة قد ولّت أيامه.

لا تحتاج صفحات البداية أن تكون ضخمة لتحقق أهدافها.

وكما كنا نقول: خير الكلام ما قلّ ودلّ. الأمر هنا نفسه تقريبًا.

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

ولقد أكدت مجموعة Nielsen Normal Group هذا الأمر في دراساتها. تقول هذه المجموعة أنّ 79% من المستخدمين يتفحصون كلّ صفحة جديدة يرونها بسرعة، بينما 16% فقط يقرؤونها كلمة بكلمة. ولهذا، فخلاصة الكلام أن جعل صفحة ما موجزة يؤدي إلى زيادة في قابلية الاستخدام قدرها 124%.

لنلق نظرة على صفحة البداية لـ Contently.com على سبيل المثال:

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

الخرافة الرابعة: تحتاج صفحة البداية لشريط تمرير

استخدام أشرطة التمرير في التصميم توجه كسول جدًّا.

في نهاية الأمر، من السهل وضع شريط تمرير تحت الترويسة مباشرة ووضع بعض الرسوميات الشبيهة بالـ "بانر" فيه. الأكثر شيوعًا هو أن تقوم بعمل 3 - 4 شرائح وأن تجعلها تتبدل تلقائيًّا. هذا أسلوب شائع جدًّا وتتبعه آلاف صفحات البداية.

ولكن، كما تؤكد المعلومات، فإن هذه الشرائح غير مجدية عندما يتعلق الأمر ببدء حوار، أو جذب انتباه المستخدم، أو عمل أيّ شيء آخَر يمكن أن ينتُج عنه نتائج إيجابيّة. وعلى سبيل المثال، هذا ما قاله عنها Chris Goward من WiderFunnel في إحدى أوراقه البحثيّة:

لقد اختبرنا العروض التي تتبدل مرات عديدة ووجدناها طريقة ضعيفة لعرض محتوى صفحة البداية.

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

الخرافة الخامسة: يجب أن تتحدث صفحة البداية عنك أنت

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

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

ولكن ما يهم هنا هو الطريقة التي تستخدمها للتعبير عن الأمر.

فمثلًا، استخدام تعبير مثل "نقدم خدماتنا من عام 2004. انقر هنا لمعرفة عرضنا." لا يحقق أيّ شيء فيما يتعلق بالتواصل مع الزائر.

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

لنلق نظرة مثلًا على صفحة البداية لموقع Due.com:

الصفحة لا تقول: "نحن نعمل في مجال تتبع الوقت منذ 'س' من السنوات".

بل تقول: "يساعدك Due.com على تتبع وقتك باستمرار وإخراج فاتورة احترافية". يرتكز النصّ حول الزائر تمامًا تقريبًا.

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

الخرافة السادسة: يجب أن تعرض الصفحة الرئيسيّة أخبار الشركة

لا تفعل هذا، رجاءً!

لا يولي الناس -عمومًا- اهتمامًا بما يحدث داخل الشركة. لماذا؟ سأقولها مرة أخرى، لأن هذا الأمر لا يعنيهم هم.

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

الخرافة السابعة: يجب أن تبدو صفحة البداية بنفس الشكل على كلّ الأجهزة

إن فكرة تصميم المواقع لأكثر من جهاز لَهُوَ فصل جديد في تاريخ تصميم المواقع. قبل زمن ليس ببعيد، كان كل ما علينا أخذه بعين الاعتبار هو ما إذا كان سيبدو الموقع جيدًا على دقة 800×600 كما هو جيد على دقة عرض 1024×768.

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

المشكلة الرئيسيّة في التفكير بهذه الطريقة هو أنّ من يزور موقعك من هاتف محمول لن يفكر بنفس الطريقة التي يفكر بها الشخص الذي يزور الموقع من الحاسوب الشخصيّ.

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

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

الخرافة الثامنة: بعد أن تنتهي من بنائها، ستبقى كما هي

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

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

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

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

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

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

الخلاصة

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

أظننا سنترك هذه المواضيع للمرة القادمة.

هل كنت ضحية إحدى الخرافات المذكورة أعلاه؟ شاركنا برأيك!

ترجمة -وبتصرف- للمقال 8Homepage Design Myths Debunked لصاحبه: Karol K.

حقوق الصورة البارزة: Designed by Freepik.

لقد صار التصميم الماديّ (material design) شائعًا جدًّا هذه الأيام، حيث بدأ كثير من المصممين بتضمينه في تصاميمهم ليس فقط لتطبيقات أندرويد، بل ولمشاريع الويب أيضًا.

لأذكّرك، لقد تم طرح المفهوم لأول مرة من طرف جوجل في Google I/O 2014 keynote. لقد شوهد هذا العرض التقديميّ أكثر من 1.5 مليون مرة حتى الآن، وما زال يتم التعامل معه على أنه العرض الأساسيّ لماهيّة التصميم الماديّ وكيف علينا أن نتخيله.

هل التصميم الماديّ مناسب لك؟

السؤال الأول الذي سنحاول الإجابة عليه الآن هو ما إذا كان التصميم الماديّ شيء عليك تعلمه والبدء باستخدامه في عملك.

ولكن، كما هي العادة عندما يتعلق الأمر بهذه الأسئلة، ليست هناك إجابة واحدة تناسب الجميع.

لنحاول إذًا أخذ هذه المسألة من زاوية أخرى.

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

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

وبشكل أساسي، أجب الأسئلة التالية بنفسك:

هل تتوافق مبادئ وتوجيهات التصاميم المادية مع ما أريد تحقيقه؟

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

1. تعرف على المصدر الرئيسي

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

أنصحك بشدة أن تقرأ على الأقل الفصول الأولى من التوثيق لتتعرف على المفاهيم الأساسيّة.

2. افهم معنى "ماديّ" في التصميم الماديّ

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

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

مصدر الصورة: ظلّ - لـNikhil Vootkur من Behance.

3. استخدم الظلال لتوصل مفهوم التقسيم الشجريّ

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

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

مصدر الصورة: WhatsApp | Material Design Concept -  لـMário Gomide من Behance.

4. استخدم ألوان جريئة

ثلاثة من المبادئ الرئيسيّة للتصاميم الماديّة هي أن تكون جرئية، وجميلة التصميم، وعالميّة.

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

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

مثال على تصميم ملون:

مصدر الصورة: Behance New App Concept (Material Design - لـ Fabrizio Vinci من Behance.

5. استخدم لونا أساسيا وآخر ثانويا

تقول مستندات جوجل الرسميّة:

"حدّد اختيارك للألوان باختيار ثلاثة ألوان من منقاة الألوان (palette) الرئيسيّة، ولونًا ثانويًا من منقاة الألوان الثانوية."

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

سيكون من الضروريّ بالتأكيد أن يكون اللون الثانوي متباينًا بشدّة مع الألوان الرئيسيّة.

مصدر الصورة: Snapchat – Material Design - لـ Vinfotech من Behance.

6. استخدم المساحات الفارغة

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

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

مصدر الصورة: Material Design Sign Up Page - لـ Omkar Abnave من Behance.

7. استخدم الصور من الحافة إلى الحافة

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

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

مصدر الصورة: Twitter Material Design - لـ Rico Monteiro على Behance.

8. للتصاميم المعتمدة على الصور، استخرج الألوان من الصور

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

مصدر الصورة: Material Design Colors Recontextualization - لـ Lonely Pig Ringo على Behance.

9. استخدم الحركات

وبحسب تعبير جوجل، فإن الحركة تُضفي معنىً.

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

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

كيف تستخدم الحركة؟ ببساطة، أعطِ المستخدم تغذية راجعة عن الحدث الذي قام به. فمثلًا، هل ضغط المستخدم زرًّا؟ حرّكه لتظهر أن الأمر قد تمّ.

مصدر الصورة: REDBUS APP – Material Design Preview - لـ Anish Chandran على Behance.

10. اجعل الحركات واقعية

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

تخصص جوجل قسمًا كاملًا من توجيهات التصاميم المسطحة لمفهوم الحركة الواقعية. تشرح جوجل في هذه التوجيهات كيفية تقديم الكتلة والوزن، والتسارع والتباطؤ، وكيف يتم تحسين الحركة (بالإنجليزيّة: easing؛ وهي طريقة لجعل الحركة تبدو طبيعية أكثر بتغيير السرعة في أوقات محددة).

التصاميم المادية جيدة فقط ما دامت تحاكي الحركة في الحياة الحقيقيّة. هذه هي الطريقة الوحيدة التي ستغني فيها الحركةُ الواجهةَ وتجعلها مفهومة أكثر للمستخدم.

11. اجعل كل شيء مستجيبًا

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

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

12. تذكر أن كل شيء في التفاصيل

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

وفيما يلي كيف أتت هذه الأشياء إلى الواقع:

مصدر الصورة: 15 Puzzle - لـ Kamil Ginatulin على Behance.

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

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

إن كنت في ريب، فتصفح بعض المعارض على الإنترنت لتوحي إليك ببعض الأفكار.

هل لك تجارب مع التصاميم الماديّة بعد؟ هل تظن بالإمكان استخدامها لأكثر من مجرد تصميم تطبيقات أندرويد التي وُجِدَت أصلًا لأجله؟ شاركنا برأيك!

ترجمة -وبتصرف- للمقال New to Material Design? 12 Principles You Need to Know لصاحبه Karol K.

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

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

ملاحظات عامة

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

التصميم حس فني قبل كل شيء

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

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

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

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

تجنب تطبيقات التصميم الاحترافية

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

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

لا تحاول وصول عنان السماء بالتصميم بل حاول أن تكون موضوعيا

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

العب على المضمون، اجعل من التصميم خفيف الظل سريع الفهم، فلنكن واقعيين التصميم المناسب أو لنقل المقبول لا يترسخ في أذهان الناس، بمعنى آخر التصميم الجيّد يُستخدم ولا يُنتقد.

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

النصائح العملية

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

الخطوط Typography

إن نجاح استخدام الخطوط Typography في التصميم يأتي من خلال الثبات على مبدأ واحد في كامل التصميم، بمعنى تجنّب استخدام العديد من أنواع الخطوط typefaces، خطّ أو خطّان سيكفيان بالغرض، وتجنّب أيضًا استخدام أحجام متعدّدة وأوزان لونيّة مختلفة، بل استخدمها في التأكيد على أهميّة جزء معيّن من المحتوى، فكلما كان المحتوى هام كلما كان الخط أكبر وأعرض.

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

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

استخدم المساحات البيضاء whitespace

إن استخدام المساحات البيضاء whitespace ليس بذلك السر في التصميم، ومن خلال خبرتي فإن إضافة المزيد من المساحة دائمًا هو أمر جيّد، لأن المسافات تسهّل من عمليّة القراءة، وتعطي إحساسًا بالبساطة وتُوصِل الفكرة بيُسر ورحابة وإبداع فنّي وبأقل مجهود ممكن.

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

النظام الشبكي

قد يشتكي البعض بأن تصميم الموقع صَندوقيّ عند استخدام الأنظمة الشبكيّة في التصميم، ولكن في الحقيقة إن التصاميم الصندوقيّة جيّدة ومناسبة لأغلب المواقع والتصاميم، يجب على الموقع الحسن أن يتكوّن من بنية تحتيّة تتألف من أعمدة (columns) وصفوف (rows)، فهي تساعد المستخدم على فهم هرميّة الموقع وتنظم أركانه، وعلى الرغم من أن المصمّم الشاطر سيخرج عن النص في بعض الأحيان ولا يلتزم بالنظام الشبكي، ولكن سيكون دائمًا هناك بُنيّة شبكيّة خلف الستار تسهل من تطبيق تصميمه على أرض الواقع.

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

قد يبدو النظام الشبكي مقيّدًا لعمليّة التصميم ولا يحث على الإبداعيّة ولكنّه أمر أساسي لنجاح أي تصميم.

الألوان

يُعتبر التعامل مع الألوان أمرًا ليس بالهيّن، وطالما لديك المجال تجنّب استخدام الكثير من الألوان، لا بل من الأفضل استخدام أدوات آليّة في توليد الألوان، مثل أداة الألوان المقدّمة من شركة أدوبي Adobe Color CC، حيث تسمح لك هذه الأداة إما بالاختيار من مجموعة ألوان موجودة بالفعل أو إنشاء مجموعة لونيّة جديدة تُناسب الهويّة البصريّة/اللونيّة للموقع corporate colour.

لاحظ أنها تتضمّن على خمسة ألوانٍ في اللوحة الواحدة، وهذا أمر حسن في الحقيقة، لا تُفرط في استخدام عديد الألوان، ولا تنس الاستفادة من تباين الألوان في التمييز بين المحتوى الهام والمحتوى الأهم، لأن التباين في الألوان هو الطريقة الأفضل في تمييز المحتوى وليس تعدّد الألوان.

الصور

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

يُمكن لاختيار الصور أن يكون صعبًا، ولكن إليك بعض الاقتراحات التي ستوجهك نحو الطريق الصحيح في الاختيار:

• تجنّب استخدام الصور المتحركة.
• اختر الصور ذات الأماميّة foreground (صدر الصورة) القويّة
• اضغط الصور (compression) ولكن لا تبالغ في الضغط.
• استخدم الوجوه، فهي تجذب نظر الزوّار.
• تجنّب استخدام القصاصات الفنيّة clipart.

خاتمة

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

ترجمة وبتصرف للمقال: When developers design لصاحبه: Paul Boag.

هل بدأت رحلتك في التصميم مؤخرَا؟

تشعر بالتخبط وبتدني المستوى، وتتمتع بمستوى من التصاميم أقل ما يوصف بالبشاعة؟!

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

البدأ في استعمال البرامج على الفور

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

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

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

وتكون النتيجة كارثية بالطبع!

عوضَا عن البدأ بالبرامج مباشرة هل سألت نفسك يومَا بعضَا من هذه الأسئلة؟

• هل لديك فكرة عن عناصر التصميم؟ هل تدرك ما هي أساسيات التصميم أصلَا؟
• هل روادتك الأفكار مرة عن كيفية استعمال مهارات التصميم المختلفة لتوصيل الأفكار؟
• هل تعرف الأدوات اللازمة لتكون مصمم بغض النظر عن البرامج؟

بالطبع لم تفكر في تلك الأسئلة لإنك مشغول وبشدة في كيفية صنع التصاميم بأسرع وقت ممكن تفكر طوال الوقت في السؤال الأبدي "كم من الوقت يلزمني لأصل للاحتراف؟".

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

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

عدم ترتيب الأفكار قبل البدأ في التصميم

لا تبدأ تصاميمك على ورقة بيضاء تحدق فيها متساءلَا ماذا أصمم!

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

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

لا تكن مصممَا من الإبرة للصاروخ!

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

كنت أرى أن المصمم المثالي لا بد أن يكون على خبرة بجميع برامج التصميم ابتداء من البرامج الرسومية إلى برامج الحركة والتصاميم ثلاثية الأبعاد إضافة لتعديل الصور وتصميم الخطوط!

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

أعلم هذا لأن الكثيرين إلى الآن يؤمنون أن تخصصات أكثر تعني فرص عمل أعلى ومرونة أعلى بالضرورة وهي مدرسة في التفكير أفخر بتخلصي منها إلى الأبد!

دراسة تخصص بعينه والوصول لمستوى الاحتراف فيه قد يستلزم منك قضاء حوالي 10,000 ساعة فماذا عن أربع إلى خمس تخصصات معَا!

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

هل تريد أن تصبح مصمم جرافيكي أم تعشق الرسم وتود التخصص في مجال الـ Illustration، ربما تهتم بأن تكون مصمم لتجربة المستخدم أو مصمم حركة أو حتى مصمم هوية وشعارات!

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

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

تذكر أن هناك من صنع لنفسه تخصص في تصميم الأغلفة للكتب فقط أو أغلفة الأكواب الورقية ولكن هناك أيضَا مصممون عالميون يستمتعون بتصاميم الهويات إضافة إلى تصاميم الـIllustration.

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

عدم معرفة أساسيات البرامج

صدق أو لا تصدق هناك من يفخر بكونه تعلم برنامج معين بدون دروس عن طريق فتح الواجهة وبدأ التجربة! لا أمانع أبدَا من أن تجرب بنفسك و أن تحاول اكتشاف البرامج عن طريق استخدام الأدوات ولكن على الأقل تعرف على الأساسيات!

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

لأعطيك مثال حقيقي أنا واحدة من هؤلاء الأشخاص الذين ظلوا لفترة لا بأس بها يتعلمون الدروس ويطبقونها دون معرفة أساسيات وأدوات البرنامج في الفوتوشوب، والنتيجة أنني كنت إذا أخطأت خطأً واحدَ صغيرَا في التصميم أمسحه وأقوم بالتصميم من البداية لإنني لم أكن أعرف أداة الـ History، أو أستغرب بشدة عندما يعرض أحد المصممين تصميمَا له ويرحب بالانتقادات ويعدل التصميم المرة بعد المرة، بالنسبة إليّ آخر خطوة لا أستطيع التراجع بعدها هي الخطوة التي أقوم فيها بحفظ التصميم بصيغة JPEG لإنني لم أكن أعرف صيغة الـPSD وبالتالي طلب أي تعديل في التصميم كان يتطلب مني بدأ التصميم منذ البداية في كل مرة! 

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

الثبات على المستوى

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

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

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

حاول أن تتعلم كل يوم أو كل فترة زمنية قصيرة -تبعَا لجدولك- درسَا جديدَا أو تقنية مختلفة أو حتى قراءة كتاب عن التصميم جديد بالنسبة إليك.

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

أي نوع من أنواع الفنون المختلفة قد يساعدك في استلهام أفكار مميزة وغير تقليدية في تصاميمك.

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

المشاهدة بدون تطبيق

واحدة من تجاربي الأليمة هي احتراف مشاهدة الدورات التعليمية وفهم التقنيات المستعملة في التصميم فهم جيد ولكن بدون التطبيق!

حجتي في هذا كانت كثرة الدروس والدروات التي يتوجب عليَ الانتهاء منها قبل فترات الدراسة مثلَا فأعمل بجد لكي أنهي الدورات ولو جاء هذا على حساب التطبيق!

من جديد اكتشفت التبعات الرهيبة لهذا الأسلوب! فبعد مشاهدة أكثر من ثلاثين إلى أربعين ساعة في برنامج معين اكتشفت بعد شهرين أو أكثر أنني قد نسيت معظم ما تعلمته لأنني لم أطبقه واكتفيت بالمشاهدة فقط!

صدقني لا شيء قد يؤثر فيك ويرتبط في ذاكرتك بشكل قوي مالم تكن قد طبقته بشكل جيد أيَا كانت وسيلة التطبيق.

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

عدم تقبل النقد والابتهاج الشديد بالمدح

من العيوب القاتلة التي قد تدمر مستقبل أي مصمم مبتدئ هو عدم تقبل النقد!

أوافقك تمامَا في أنّ تقبل فكرة أن ينتقدك أحدهم مُظهرَا أسوأ ما في تصاميمك حتى لا يكاد يترك شيئَا واحدَا لم ينتقده هي عملية ليست سعيدة إلى تلك الدرجة!

ولكن لك أن تتخيل مغبة أن تكون مصمم مبتدئ يمتلئ تصميمك -على الأرجح- بعيوب كثيرة ومتنوعة ثم يأتي أحدهم ليقول لك: " يا لك من مصمم عظيم لقد أصبحت محترف!"

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

لا تستسلم لفكرة تقبل المديح من الآخرين وحاول أن تكون أنت العين الناقدة لتصميماتك وخذ دومَا آراء الآخرين بعين الاعتبار وحاول ألا تجعل الموضوع شخصيَا بينك وبين من ينتقدك.

على الجانب الآخر أعلم أن الكثيرين لا يجيدون فن تزويق الكلام أو الانتقاد بالأسلوب السليم الذي يظهر المحاسن قبل المساوئ ويشجع المصمم على أن يكمل التعلم ليصل لمستوى أفضل! ولكن بربك ليس هذا الذي سيوقفك عن إكمال هدفك لتصبح مصمم مميز أليس كذلك؟!

استعمال "الجاهز" هو خيارك الأول!

لماذا أصمم تدرجات لونية أو تأثير معين طالما أنه يوجد الكثير منهم مصممين بالفعل؟

هل عليَ رسم التصميم من البداية للنهاية بدون استعمال بعض الفكتورز الجاهزة والمصممة بالفعل؟

نعم! كلنا كمصممين نُصاب بالإرهاق أحيانَا من كثرة التفاصيل التي يجب أن تنتبه إليها وتعدلها وتأخذها بحسبانك فنركن للحل الأسهل وهو استعمال الأدوات الجاهزة قدر الإمكان.

مشكلات هذا الأسلوب عديدة للأسف فأولَا أنت على الأغلب لم تقم بعمل تصميم أصيل أو مختلف بل جمعت بعض العناصر في تصميمك و قمت بعملية تجميع ليس أكثر!

وثانيَا لم تقم بابتكار فكرة جديدة.

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

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

الاهتمام المبالغ فيه بنسخ البرامج المستخدمة والأجهزة المستخدمة للتصميم

أدرك تمامَا أن هناك فروقات شاسعة بين نسخ الفوتوشوب القديمة والحديثة. بل إن إضافة واحدة قيمة في نسخة جديدة قد توفر عليك ساعات وساعات من العمل الشاق!

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

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

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

الأمر نفسه في ولع البعض الشديد في امتلاك أجهزة مميزة مثل ماك أو استعمال تابلت للرسم في بداية مشوارهم في التصميم!

سرقة التصاميم!

نعم لم تخطئ القراءة! بعد كل تلك المشكلات التي وضعتها لكي تتجنبها كمصمم مبتدئ يبدو الأمر معقدًا للغاية وصعب!

كل ما تريده هو كسب المال بأقل قدر ممكن من الجهد والوقت!

تفكر في سرقة الأفكار فأنت لست ملاكًا كما أنه ليس أمرًا مستبعدًا فأكبر الشركات العربية والعالمية تقوم بسرقة الأفكار والمخططات فلماذا تختلف أنت عنهم؟!

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

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

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

لا تفكر حتى في هذا الموضوع وأسقطه من اعتباراتك وبشكل قاطع!

أسئلة مفتوحة للنقاش

• منذ متى تصمم وما هي أهم الأخطاء التي وقعت بها كمصمم مبتدئ؟
• كيف تعلمت التصميم بالدراسة الذاتية أم بالالتحاق بالدورات والورش وأيهما أفضل برأيك؟
• كيف اخترت تخصصك في التصميم؟

واحدة فقط من تطبيقات الطّقس هذه تسعى لحلّ المشكلة الحقيقيّة:

أمورٌ متباينة تقع وسط مجتمع التصميم. لدينا من جهةٍ كتاباتٌ بديعة من أمثال راين سينقر وجولي شو، تدفع بحرفتنا قُدُمًا. ولدينا من الجهة المقابلة عدد متزايد ممّن يضعون أعمالهم ويتناقشونها على Dribbble، ما مُجمل حصيلته الدفع بحرفتنا إلى الوراء. ليس هذا المقال عن Dribbble نفسه، ولكن عمّا يُجلّه مجتمع Dribbble. سأستعمل في ما يأتي مصطلح "تصميم المنتجات" Product Design، ولكنّ ذلك يشمل أيضا  تصميم تجربة المستخدم UX وتصميم التفاعل Interaction Design.

”يبدو مذهلًا!“ هي ما يكافئ به مجتمع Dribbble العملَ السّطحيّ

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

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

أهمّ أعمال تصميم المنتجات هي عادةً أشدُّها قبحا

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

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

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

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

تصميم المنتجات يُعنى بمهمّة، برؤية، و بهندسة

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

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

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

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

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

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

الرسومات والخربشات القبيحة والمبعثرة التي تصوّر هذه اﻷشياء هي أهمّ بكثير من ملفّات PNG و PDF التي ينتهي بها المطاف في Dribbble. بالنّسبة لي، ملفّات فوتوشوب و PNG هي الجانب اﻷقلّ أهميّة في العمليّة كلّها من البداية و إلى غاية تقديم منتج جاهز. ما يهمّ أكثر هو حينما تُناقش الإيجابيّات والسّلبيات، حينما تُربط اﻷفكار برؤية الشّركة، أو تُطوّر اﻷشياء بناء على هندسة المنتج. كلّ تلك المخطّطات على السّبورة، كلّ تلك الرّسومات اليدويّة وحلول المشاكل على ظهر المنديل، هي ما يجدر بالمصمّمين أن ينشروه على Dribbble. أروني ذلك. بل إنّ وصفا مكتوبا لما يُقصد بناؤه هو أهمّ بكثير من ملفّات الـ PNG  أو PDF.

فكّر في أربع طبقات للتّصميم

التّصميم عمليّة متعدّدة الطّبقات. من خلال خبرتي، يوجد ترتيب مثاليّ للانتقال بين تلك الطّبقات. أبسطها هو أن تنظر إليها كأربعة طبقات:

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

سيزداد تصميم اﻷنظمة أهميّة مع وصول الويب إلى المزيد من اﻷشياء

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

تصميم صفحات ويب ساكنة ومرتبطة بعضها ببعض هي مهنة في طريقها إلى الموت. الصّعود الباهر للتكنولوجيات الهواتف والأجهزة المُتحرّكة، واجهات برمجة التطبيقاتAPI ، حزمات تطوير البرمجيّات SDK ، والشّراكات المفتوحة بين مختلف المنصّات والمنتجات يرسم صورة واضحة لمستقبل سنقوم فيه جميعنا بتصميم أنظمةٍ متكاملة. ملفاتُ PDF المليئة بالإطارات الشّبكية هي تسليماتdeliverable في طريقها للاضمحلال، فوتوشوب هو أداة تصميم منتجات في طريق الاضمحلال أيضا. المصمّمون الذين يدفعون حقّا بحرفتنا إلى اﻷمام ينتقلون بين الرّسومات، والسبّورات، وأدوات تصنيع النّماذج اﻷوليّة (Quartz Composer، After Effects، Keynote ، CSS/HTML).

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

تصميمنا يدور حول الوظائف

في انتركوم، نتّبع إطار عمل كلاي كريستنسن للوظائف لتصميم المنتجات. نعمل على حصر كل مشكلة تصميم في وظيفة، مركّزين في ذلك على الحدث المسببّ، على الدافع والغاية، والنتيجة المرجوّة:

عندما _______ ، أودّ أن  _______ ، حتّى أتسطيع أن  _______ .

على سبيل المثال: عندما يسجّل مستخدم جديد، أودّ أن أُنبَّه بذلك، حتّى أستطيع أن أبدء معه محادثة.

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

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

ترجمة -وبتصرّف- للمقال The Dribbblisation of Design لصاحبه: Paul Adams.

tuto-gratuit-photoshop-les-dents-de-la-mer.zip