لوحة المتصدرين

سيساعدك هذا الدّرس على تعلّم طريقة عمل خلفية مُلفتة وفريدة من نوعها في بضع خطوات، حتّى المبتدئين بإمكانهم تطبيق هذا الدرس وإضافة لمساتهم وأسلوبهم الخاص، أنا على ثقة تامّة بأنكم ستستمتعون وتتعلّمون. من بين المهارات التي ستُتقنونها هي طريقة عمل خلفيّة جميلة، إضافة تأثير التوهّج وكذلك التعامل مع الخط، الحجم والألوان لجعل بعض المناطق بارزة. حسنا فلنبدأ. الخطوة الأولى: عمل الخلفيةبداية نقوم بفتح ملف جديد بالمقاسات التالية: 1920px*1200px ونختار له اللّون 242424#، نضاعف طبقة الخلفية ونغير اسمها إلى Film grain. بعدها نتّبع المسار التّالي: Filter > Artistic > Film Grain مع تطبيق الإعدادات التي تظهر في الصورة: نخفّض قيمة opacity للطّبقة إلى 50 بالمئة حتى تظهر لنا النتيجة كما في الصورة: الخطوة الثانية: عمل التوهجنقوم بعمل طبقة جديدة وليكن اسمها Lighting، بعدها نحدد أداة Radial Gradient مع استخدام اللونين الأبيض والأسود: نغيّر نوع الطبقة إلى Overlay وقيمة opacity إلى 50 بالمئة حتى نحصل على التالي: الخطوة الثالثة: استخدام الفرشنحمِّل الفرشاة التالية، نضيف طبقة جديدة ونقوم باستخدامها قليلا حول الشّكل السابق، ثم نحدد قيمة opacity بـ: 50 بالمئة. نقوم بوضع الخامة التالية فوق الشكل الذي قمنا بتصميمه: ونقوم بتحديد نوع الطبقة بـ: Overlay وقيمة opacity بـ: 10 بالمئة: الخطوة الرابعة: كتابة النص الأساسينقوم بتحميل الخط BEBAS، ثم نفتح طبقة جديدة ونكتب فيها النّص الذي نريد، اخترت مقاس الخط 350pt وفضّلت أن يكون ناعما (smooth mode) أمّا اللون فلك حرية الاختيار، أخيرا نقوم بتسمية الطبقة PEACE: الخطوة الخامسة: إضافة خلفية النص (خطوة جد هامة)نقوم بتخفيض قيمة opacity الخاصّة بالنّص إلى: 15%، بعدها نتبع المسار التالي لعمل مجموعة طبقات: Layer > New > Group ونقوم بتسمية تلك المجموعة بـ Words. نفتح طبقة جديدة ونحاول كتابة كلمات مختلفة واستعمال مقاسات وأنواع خطوط مختلفة كذلك، مع تجنب وضع مسافات كبيرة بين تلك الكلمات، بالنسبة لي استخدمت هذه الخطوط: ArialCambriaCandaraImpactTahomaTimes New RomanVerdanaوبعض الخطوط الإفتراضيةكذلك يمكن استعمال بعض من هذه الخطوط المجانية dafont ،Colaborate ،Extravaganzza الخطوة السادسة: عمل بعض التأثيراتنقوم بمضاعفة مجموعة الطّبقات التي قمنا بتسميّتها بـ Words: Layer > Duplicate Group ثمّ ندمجها (Ctrl+E)، بعدها نجعل مجموعة الكلمات (غير المدمجة) غير مرئية invisible، نحدّد أكبر نص لدينا (في تصميمي حددت كلمة PEACE) ونضغط على CTRL (لمستعملي أجهزة mac نختار Command) ثم نضغط على الصورة المصغّرة في الطبقات: نضغط على طبقة الكلمات المدمجة ثم نضغط على Ctrl+J، إذا كنت قد دمجت الطبقة Words وكانت مجموعة الطبقات غير المدمجة لازالت غير مرئية فستحصل على النتيجة التالية: الخطوة السابعة: عمل تأثيرات لخلفية النصنقوم بإظهار طبقة Words المدمجة من جديد ونطبق النمط التالي: نحدد قيمة opacity بـ:30%: نضاعف الطبقة المدمجة Words، ونضعها في الأسفل، بعدها نتبع المسار التّالي: Filter > Blur > Motion Blur مع تطبيق نفس الإعدادات التي في الصّورة: نحدد قيمة opacity بـ:15%: بإمكاننا أن نضيف أيضا نص أسفل العنوان: الخطوة الثامنة: اللمسات الأخيرةنحدّد الطبقة التي تحتوي على كلمة PEACE ونغير قيمة opacity إلى 4 بالمئة: نقوم بعمل طبقة جديدة ونذهب إلى: Image > Apply Image ثم نتبع المسار التالي: Filter > Render > Lightning Effects مع تحديد الإعدادات التالية: نحدد قيمة opacity بـ:30%، وبهذا نكون قد أنهينا درسنا. كذلك قمت بإضافة gradient map لإحدى طبقات الكلمات وكانت هذه هي النتيجة: ترجمة -وبتصرّف- للدّرس How To Create Great Typographic Wallpaper In Photoshop لصاحبه James Richman.

تحدّثنا في الجزء الأول من سلسلة أساسيّات التصميم الجرافيكي هذه عن العناصر الأساسية للتصميم، كالأشكال، الخطوط، الخامات والعناصر الأخرى. وفي هذا الجزء سنلقي نظرة، وبشكل مفصّل أكثر، على مبادئ التصميم التي من المهّم التعرّف عليها، لأنها هي التي تفصل بين المصمّم الجيّد والمصمّم الرائع. بعض المبادئ التي سنغطّيها اليوم يتّم تطبيقها لا شعوريًّا، لكنّها موجودة بالتأكيد، وسنقوم بعرض بعض الأمثلة من المواقع لكي نوضّح المفاهيم. 1. التوازنالتوازن هو طريقة توزيع عناصر التصميم في مخطط الصفحة. وإذا كان التوازن جيّدًا يمكن تحقيق المتانة في التصميم، على الرغم من أنّ بعض المصمّمين في الآونة الأخيرة يفضّلون التصاميم غير المتوازنة لأنها مُفعمة بالحركة وتعرض وجهة نظر مختلفة تمامًا. وتعتبر الصفحات الشخصيّة هي الأكثر ملائمة للمخططات غير المتوازنة، وسنرى بعض الأمثلة لاحقًا. يجب أن تعرف الأنواع الثلاثة من التوازن لكي تكون قادرًا على ملاحظة أي نوع من التوازن يمتلك الموقع الّذي تعاينه. وهذه الأنواع هي: المتناظر symmetrical.غير المتناظر asymmetrical.الشعاعي radial.النوع الأول يعني أن جانبيّ التصميم هما بنفس الشكل، الخطوط، الخامات، وهكذا. ونقصد بجانبيّ التصميم؛ الأيمن والأيسر، لأن هذا النوع من التناظر يكون غالبًا حول المحور العمودي، وهو الشائع في التصميم هذه الأيام. توجد بعض الأمثلة عن التناظر حول المحور الأفقي، أو المحورين معًا، ولكنّ هذا الأمر نادرًا. التصاميم المتناظرة هي الغالبة في مواقع الأنترنت حتّى خمس سنوات مضت. النوع الثاني من التناظر يحدث عندما يكون جانبّي الموقع لا يشبهان بعضهما، لكن مع ذلك تبقى بعض العناصر متشابهة. وعلى الرغم من أن هذا النوع يسمى غير متناظر ألا إنه يحتوي على بعض سمات التناظر، كما في النوع الأول من التوازن، ولكن بمستوى أقلّ. والمواقع غير المتناظرة تصبح أكثر وأكثر شعبيّة هذه الأيام (لاحظ مخططات وورد بريس التي تملك جهة للمحتوى وجهة للشريط الجانبي). التوازن الشعاعي يحدث عندما تكون عناصر التصميم موزّعة بشكل دائري. وهذا النوع يعطي إحساسًا بالحركة والحيويّة. لكن هذا النوع لا يستخدم بكثرة، لأن المصمّمين، وحتّى الخبراء منهم، يواجهون المشاكل في تخطيط التصاميم من هذا النوع. وكما ذكرنا سابقًا، يمكن تحقيق التوازن من خلال الأشكال، الألوان، الخامات، الخطوط، والعناصر الأخرى التي تحدّثنا عنها في الجزء الأول. صفحة Florida Flourish تعتبر مثالًا جيّدًا على موقع متناظر كلّيًّا. في موقع Duplos تم استخدام النوع غير المتناظر وقد عمل بصورة جيّدة جدًا. 2. السيادة والأولوية (Dominance and Priority)تمّ جمع هذين المبدئَين معًا لأنّهما مرتبطان بشكل وثيق. فكلاهما يتعلّق بتجربة المستخدم، لأن عدم وجود الأولويّة والسيادة لبعض العناصر قد يؤدّي إلى الإرباك. إنّ مستوى السيادة هو الّذي يحدّد أهمّية العناصر المختلفة، مثل القائمة، الشعار، المحتوى، أو ذيل الصفحة. وبالطبع يمكن تحقيق ذلك أيضًا عن طريق التلاعب بنوع الخط والحجم. مع ذلك لنتعمّق أكثر للتعرّف على معنى ودور كل من السيادة والأولويّة. هنالك ثلاث مستويات رئيسية للأولوية، وأوّلها العنوان أو نقطة التحويل (تسمّى أيضًا الدعوة إلى الإجراء CTA) والّذي يُعتبر كعنصر أساسي. تأتي بعده العناصر الثانوية مثل الصور التي تستخدم للتعبير عن شيء معيّن، أو تستخدم، في أغلب الأحيان، للتصّفح. من الواضح إن هذه العناصر ليست الأكثر أهمية في الموقع، لكن مع ذلك لا يمكن إنشاء أيّ موقع بدونها. العناصر التي تأتي في المرتبة الثالثة هي المعلومات؛ مثل روابط الذيل أو المعلومات الوصفية في المدوّنات أو العناصر المختلفة، ويمكن أن يقوم الموقع بدون هذه العناصر (الثالثة). مع ذلك تستخدم هذه العناصر في كثير من الأحيان لأنها تُكمل التصميم؛ إما بتوفير المزيد من المعلومات، أو بإكمال المخطط مع بعض العناصر. في موقع Area17 تمّ التشديد على العنصر السائد في الزاوية العلويّة اليسرى. كما تجذب عبارة الترحيب الانتباه بسبب اللون. 3. التناسب Proportionالتناسب مهمّ، وهو الذي يمثّل حجم العناصر مقارنة ببعضها البعض. للتناسب تأثير قويّ على المستخدم، وهو مرتبط أيضًا بالمبدأ السابق. من البديهي أن تكون العناصر الأكبر ذات وقع على المستخدم أقوى من العناصر الصغيرة. تعمل السيادة، الأولوية، والتناسب معًا على تأكيد رؤية المستخدم للمعلومات على الموقع بصورة صحيحة. فمثلًا، من الخطأ أن تجعل حجم الخط في الذيل أكبر منه في المحتوى، لأن ذلك يعني عدم أخذ هذه العناصر الثلاثة بالاعتبار. يستخدم موقع Bluecated Interactive مبدأ التناسب لغرض جذب الانتباه إلى الصورة. 4. التباين Contrastمبدأ آخر من المبادئ المهمّة، ليس فقط في التصميم، وإنّما في التصوير والفنون البصريّة الأخرى. لا نظن أن هنالك حاجة للتعمّق في هذا المبدأ، لأن كل شخص يعرف معنى التّباين. فعندما يكون هنالك تباين كاف بين العناصر، فإن ذلك يعني أنّ بعضها يبرز أكثر من الأخرى. وإذا رغب المصمّمون بدمج العناصر معًا، فإنّهم يقومون بذلك عبر التباين الضئيل بين هذه العناصر. ويمكن تمييز العناصر بعضها عن بعض باستخدام درجة عالية من التباين. إذا كان التوازن يتحقق من خلال الأشكال والخطوط، فإنّ التباين يتحقق من خلال الألوان. مع ذلك، فإنّ مبدأ التباين تغيّر مؤخّرًا بواسطة الخامات وأسلوب تنسيق النصوص Typography، لذلك يصبح أكثر وأكثر شعبيّة. عندما يكون للتصميم أسلوبًا مثاليًا لتنسيق النصوص، فإنّ ذلك يؤدّي، ليس إلى تباينٍ مثاليّ فحسب، وإنما إلى التناسب، السيادة والأولوية كذلك. من السهل ملاحظة أنّ المبادئ الثلاثة الأخيرة مرتبطة نوعًا ما مع بعضها، بطريقة أو بأخرى. فلو حصل وتحدّثنا بصورة عامّة عن هذا الموضوع، يمكننا أن نُدرج هذه المبادئ معًا في نفس الفقرة. في موقع i love typography أعلاه، تجد حسن استعمال التباين مباشرة في العنوان الرئيسي للموقع، حيث أن اللون الأخضر تباين بشكل ملحوظ مع اللون الرمادي الغامق. قد يكون التباين أيضا لإبراز زر معين أو زر إجراء (Call to action). 5. الإيقاع Rhythmقد يكون هذا المبدأ جديدًا على القارئ. إيقاع الصفحة هو المبدأ الذي يجعل عين الإنسان تتحرك من عنصر باتّجاه الآخر. يضمن الإيقاع حركة العين وبأي ترتيب يجب على المستخدم رؤية العناصر. قد يكون هذا المبدأ صعب لتحقيقه، لأن كل شخص لديه طريقة خاصّة للنظر إلى الموقع، وعملية جعل كل شخص ينظر بنفس الطريقة قد تكون مرهقة جدّا. هنالك نوعان من الإيقاع: السلس والتدريجي. النوع الأول هو التفاوت، وأبسط مثال هو حركة المياه التي تجري في الأساس بنفس الاتّجاه لكن هنالك الكثير من التفاوت في طريقة تحرّكها. أمّا الإيقاع التدريجي فيحدث عندما يكون هنالك تسلسل واضح في الطريقة التي يجب أن تتحرك بها العين بين العناصر. في معرض أعمال David Desandro تمّ اتّباع إيقاع منتظم جدّا وتدريجي. 6. الانسجام والوحدةإنّ الحصول على تصميم مذهل لا يمكن أن يتحقق، حتى وإن طبّقنا جميع المبادئ أعلاه بصورة صحيحة، بدون الانسجام والوحدة، وهذا ما نراه غالِبًا في الحياة الواقعية. فكثيرًا ما نسمع عن الأغنياء الذين يمتلكون كلّ شيء يريدونه، لكنّهم يفتقرون إلى الانسجام والألفة في حياتهم. القاعدة نفسها تسري في التصميم؛ فإذا كانت جميع العناصر مرتبطة بصورة صحيحة نكون بذلك قد حققنا ما نسمّيه بالوحدة. لكن أن تضع جميع هذه العناصر في الصفحة دون ربطها ببعضها لا ينتج لك تصميمًا، وإنّما صفحة ذات كومة من العناصر. وبالعكس؛ إذا كانت العناصر مُكملة لبعضها البعض، والموقع سهل على العين ويتيح تجربة جيّدة للمستخدم فهذا يعني أن عملك قد انتهى إلى حدّ ما. لا يوجد هنالك داع للمثال هنا، نحن نعلم جميعًا أنّ المواقع ذات الانسجام والوحدة يمكن إيجادها في كل مكان؛ فلتفكّر في موقع يُعجبكَ كثيرًا وتستحضره في ذاكرتك دائمًا. على الأرجح هذا الموقع يتّسم بالانسجام والوحدة. الخلاصةدار المقال الثاني من السلسلة حول عملية تحليل المبادئ الأساسية للتصميم والتي يجب أن تعرف عنها كمصمّم. بعد قراءتك للمقالين الأولين تكون قد حصلت على الدراية الكافية لكي تبدأ تصميم مخططك الخاص، لكن تمهّل قليلًا! المقال الثالث من هذه السلسلة سيُغطّي أساسيات التكوين، كالنقطة المحورية، نظرية الشبكة، وقوانين جِشتالت (gestalt laws)، وغيرها التي تستخدم في تصميم منتجات أخرى كالمجلّات، النشرات، أو الكتيّبات. ترجمة -وبتصرّف- للمقال Graphic Design Basics Part 2: Design Principles لصاحبه: James Richman. حقوق الصورة البارزة: 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. تنسيق النصوص، تنسيق النصوص، تنسيق النصوصلا تستخفّ أبدًا بالخطوط. على الرغم من أن الفيديوهات الرائعة والصور المذهلة لها مكانة عظيمة على الإنترنت، ألا أنّ حقيقة الأمر إنّ المواقع هي في الغالب عبارة عن محتوى نصّي. فلو كانت هنالك مساحة واحدة في موقعك يمكن من خلالها جلب انتباه إضافي إلى التصميم، سيكون ذلك عن طريق أسلوب تنسيق النص لهذا الموقع. اقتصرت إمكانية المواقع، ولعدة سنوات، على استخدام مجموعة من "الخطوط الآمنة للمواقع" مثل: ArialVerdanaTimes New RomanGeorgiaTahomaLucidaImpactوغيرها الكثيرهذه هي الخطوط المؤكّد تثبيتها أساسًا على جهاز الحاسوب الخاص بك (لأن المواقع ستقرأ الخطوط من جهاز الحاسوب). على الرغم من ذلك، اتخذ اختيار الخطوط في السنوات الأخيرة قفزة كبيرة إلى الأمام وذلك بعد استحداث خاصيّة 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.

ما الذي يجعل من موقع الإنترنت سهل الاستخدام؟ يتردد هذا السؤال في الشبكة العنكبوتية كثيرًا، ومع ذلك لم يحصل هذا السؤال على إجابة شافية ووافية حتى الآن، حيث أنه لا يوجد خلطة أو وصفحة سحرية لتحقيق هذه السهولة. يتمحور مفهوم قابلية الاستخدام في عالم الويب حول جعل موقع الإنترنت قابلًا للفهم سهلًا للاستخدام، وقد تطوّر هذا المفهوم ليصبح فرعًا له قواعد وأسس، ولم يعد الأمر مجرّد اتباع تصميم دارج/شائع أو موضة جديدة، بل الأمر متعلّق بخواص ومميزات يجب على كل موقع امتلاكُها. يوجد هدفان رئيسيان خلف قابلية استخدام في مواقع الويب: توفير الوقت على المستخدم من خلال توضيح كل شيء في الموقع وتسهيله قدر الإمكان على المستخدم النهائي.زيادة رضا الزوّار من تجربة الموقع والتقليل من الأخطاء وردود الفعل السلبية من الزوّار.يجب إجراء دراسة في قابلية الاستخدام تخص موقعك والزوّار المستهدفين من الموقع للحصول على أفضل النتائج، ولكن يوجد مبادئ عامة يمكن تطبيقها على أي موقع: وضح الغرض الجوهري من موقعك لا يقتصر هذا الأمر على صفحة البداية homepage فقط، بل على أي صفحة هبوط في الموقع، وذلك لكي يملك المستخدم فكرة واضحة لا تشوبها شائبة عن مقصد الموقع، بمعنى على صفحات الموقع أن تجيب عن أسئلة المستخدم لا أن تطرح أسئلة جديدة، من الحلول الشائعة الاستخدام هو استخدام العبارات tagline ("في مهمّة لتطوير الويب العربي" مثلًا) والشعارات logo، ولكن وعند الرغبة في صنع انطباع مثالي ولا يُنسى فمن الممكن استخدام الإنفوجرافيك أو حتى خلفيات الفيديو background video والتي ستدعم فكرة الموقع بشكل أفضل. أرشد المستخدم في أرجاء الموقع رويدا رويدا إن المهم مساعدة المستخدم على إيجاد ما يَبحث عنه بأقل جهد ممكن، بمعنى حاول دائمًا أن تكون واضحًا باستخدام الكلمات والتعابير والصياغة اللغوية، وتجنّب استخدام العناوين الغامضة والمبهمة، ولا تجعل المستخدم يُمعن في التفكير، وإن توفّر بنية من المعلومات وتصفح سلس بين الصفحات هو من العوامل الأساسية لتحقيق قابلية استخدام ناجحة، وإن كان لديك فيض من المحتوى ولا يمكن الوصول إليه بالبحث وبالسهولة المطلوبة، إذًا يوجد مشكلة ويجب حلّها على الفور. قلل من الأخطاء وحاول تقديم الحلول لا يُلام المستخدم على أخطاء الموقع بأي حال من الأحوال، حتى لو كان هو مُسبب الخطأ، ولذلك من واجب صاحب الموقع التقليل من العوامل المسبّبة للأخطاء قدر الإمكان، فمن المجدي جدًا استخدام التلميحات المرئيّة والإرشادات النصيّة والتي من الممكن أن تقلّل من أخطاء ملئ النموذج form مثلًا، مع ذلك ستبقى هناك أخطاء لا يُمكن تجنبها، وهنا يمكن الاستفادة من صفحة منسقة ومرتبة لتعرض الأخطاء المتوقعة والتي قد يتعرّض لها المستخدم وكيف له تجنّبها. أبق المستخدم على إطلاع بحالة الموقعتُعتبر هذه النصيحة من أهم النصائح في قابليّة الاستخدام، والتي اقترحها Jacob Nielsen عام 1995، وهي ذات تأثير وفعالية ليومنا هذا، وبالتالي يجب التصريح والإشارة إلى حالة الموقع دون تأخير. اعمل على بناء ثقة ومصداقية لا تدور قابلية الاستخدام حول الأمور التقنية فحسب، فإن كان المستخدم لا يثق بموقع أو منتجك، فلا شيء سيصنع الفرق، لا المحتوى ولا التأثيرات البصرية، لذا تأكّد من وجود صفحة "من نحن" أو "حول الموقع" وقدّم من خلالها فريق العمل، وحبّذا أيضًا لو تم تدعيم هذا النوع من الصفحات بالتغطيات الإعلامية أو استطلاعات الرأي أو ربما شيء من الإحصائيات التي تخص الموقع، والأهم من هذا كله شهادات العملاء وتقديرهم لخدمتك customer testimonials. خاتمةتذكّر دائمًا عند العمل على قابلية الاستخدام أن المستخدم لا يرى الواجهة بالطريقة ذاتها التي أنت تراها كمُصمّم UI، ويجب الانتباه دائمًا إلى وجود نماذج مختلفة من المستخدمين، فمنهم الصبور ومنهم المتذمّر، ومنهم من ينبه إلى التفاصيل ومنهم الذي لا يدقّق، وعليه فإن التفكير بهذه الطريقة هو السبيل في الحصول على نتائج مرضية. ترجمة وبتصرّف للمقال 5Basic Usability Principles Every Website Should Follow لصاحبه Armen Ghazarian. حقوق الصورة البارزة: Designed by Freepik.