البحث في الموقع

هناك العديد من شركات تطوير صفحات الويب التي تستخدم أُطُر تصميم مواد حصرية لمشاريع تطوير صفحات الويب وتطبيقات الهواتف المحمولة الخاصة بتجربة المستخدم UX أو واجهة المستخدم UI. وبما أنّ أُطُر تصميم المواد هي مصادر مفتوحة، فإنها توفر أُطُر ومكونات واجهة مستخدم مصممة مسبقًا تساعد في تطوير تطبيقات مخصصة للهاتف المحمول وصفحات الإنترنت. تم إطلاق مفهوم إطار تصميم المواد من قِبَل جوجل في عام 2014. وقد تم استخدامه في البداية لتحسين تصاميم تطبيقات آندرويد، وتطبيقات الويب، ونظام تشغيل Chrome، وتطبيقات iOS وما إلى ذلك. وساعد الإطار كثيرًا في إنشاء واجهات سهلة الاستخدام للتطبيقات التي تمكّن المستخدمين من فهمها واستخدامها بسهولة. تقدّم العديد من أطر تصميم المواد الحديثة، واجهات مفيدة ومكونات أخرى مثل الأيقونات، والأزرار، ومربعات الاختيار، والألوان، والخطوط، وغيرها. تساعد هذه العناصر في تطوير تطبيقات مبتكرة للغاية وسهلة الاستخدام لجميع مشاريع التطبيقات القائمة على صفحات الويب والهواتف المحمولة. إضافةً إلى أنّ الأُطُر توفر مرونة لإجراء التغييرات اللازمة في التطبيقات وتعزيز نهجها سهل الاستخدام للعميل. ومع ذلك، فقد قامت أُطُر تصميم المواد بتحديث طريقة عمل تصميم التطبيقات واقتراح السُبُل المناسبة للمطورين لإكمال مشاريع تطبيقات صفحات الويب والهواتف المحمولة بنجاح. لنستكشف بعض أُطُر تصميم المواد المطلوبة بشدةّ والتي يستخدمها المطورون بشكل متكرر في مشاريعهم، مثل: Material UI هذا إطار عمل CSS، ويتضمن مجموعة من مكونات واجهة المستخدم المفيدة التي تستخدم تصاميم المواد من جوجل. إنّها مجموعة من العديد من العناصر سهلة الاستخدام مثل مفاتيح التحويل، ومربعات الحوار، وأشرطة الأدوات، والقوائم المنسدلة، وخانات الاختيار، وما إلى ذلك. يمكنك استخدام هذه الواجهات في تطبيقاتك ويمكنك جعلها سهلة الاستخدام للعميل. Ionic Material هذا إطار متقدم، يُستخدم على نطاق واسع لتطوير التطبيقات الهجينة في HTML5. يمكن للمطورين الذين يعملون على إطار عمل Ionic، استخدام هذا التصميم لإنشاء تطبيقات سهلة الاستخدام لمشروع العميل المرتكز على صفحات الويب. Materialize هذا إطار متجاوب بالكامل، يستند إلى دليل تصميم المواد (material design) من جوجل. ويوفر مجموعة من مكونات CSS مثل grid، و table، و color، و shadow وغيرها. علاوةً على ذلك، يستخدم أيضًا مكونات الـ JavaScript مثل القائمة المنسدلة، ومربعات الحوار، واختلاف الموضع، وعلامات التبويب، والانتقال وغيرها. Leaf إنه إطار حديث لتصميم المواد القائمة على CSS وفقًا لمعايير جوجل. يوفر هذا الإطار مكونات مفيدة ومتنوعة لإضافتها في التطبيقات مثل الأزرار والصور، والقوائم المنسدلة، والرموز، والشبكة، والألوان وغيرها الكثير. Angular Material سيساعدك استخدام إطار تصميم المواد هذا على جعل مكونات واجهة المستخدم قابلة لإعادة الاستخدام ويسهل الوصول إليها من المعرض. تتوفر جميع عناصر تصميم المواد في هذا الإطار، كموجهات Angular وخدمات يمكن تخصيصها بناءً على المتطلبات. MUI هو إطار مجاني مفتوح المصدر ولا يزال قيد التطوير. يتيح لك تخصيص تصميم التطبيق عن طريق تغيير لونه، وخطه، ونقطة توقفه وغيرها. Bootstrap Material Design هذا إطار عمل للجودة يعتمد على السمات ويوفر 740 أيقونة مفيدة لتصميم المواد التي يمكن استخدامها لمشاريع تطوير تطبيقات صفحات الويب والهاتف المحمول. يمكنك أيضًا العثور على هذه الرموز في معرض تصميم المواد من جوجل. Lum X هذا إطار آخر مفيد لتصميم المواد لمحبي Angular. إنه إطار متجاوب بالكامل، تم تطويره باستخدام أساس jQuery ويوفر أداء أفضل في مشاريع التطبيقات القائمة على صفحات الويب. Polymer يعتمد هذا الإطار على مكونات صفحات الويب التي يمكن تخصيصها أيضًا وفقًا للمتطلبات. يوفر Polymer دعمًا أفضل لجميع المتصفحات الحديثة مثل Firefox و Safari و Chrome وما إلى ذلك. سيساعدك هذا الإطار في استخدام مكونات صفحات الويب بطريقة مخصصة ويمكن الوصول إليها من خلال جميع المتصفحات. Paper إنّه سمة مخصصة تنفذ تصميم المواد باستخدام المواد الأولية، والأيقونات والخطوط من جوجل. يمكّن هذا الإطار من تطوير أنماط تصميم مواد مخصصة جاهزة للاستخدام ويمكن تعديلها وفقًا للمتطلبات. الخلاصة لتطوير تطبيقات الويب وتطبيقات هاتف محمول سهلة الاستخدام وإبداعية، يمكنك استخدام أُطُر تصميم مواد واجهة المستخدم وتجربة المستخدم الأنسب لك والتي اقترحتها جوجل. توفر هذه الأُطُر العديد من المكونات المفيدة لتنفيذها في التطبيقات وإنشاء تطبيقات فعّالة للغاية للعميل. ترجمة – وبتصرف – للمقال Best Material Design Frameworks for Modern UX/UI Web Design لصاحبه Tom Hardy

إن السعي إلى إنشاء برامج خالية من الأخطاء في العالم الرقمي هو أمر جدير بالاهتمام. ولكن في حال وجدت هذه الأخطاء، فليس من الضروري أن تتسبب في مشكلة، إذ يمكن أن نقابل نتائج غير مرضية أو أقل من المتوقع للموقع أو التطبيق. بمعنى آخر، لا تكمن المشكلة غالبًا في الشيفرة بل في تصميم واجهة المستخدم (UI) أو تجربة المستخدم (UX) أو كليهما. يمكن للأدوات والموارد المطروحة هنا أن توفر لك الوقت والمال وتساعدك في تجنب مشكلات ناتجة عن قابلية الاستخدام (usability issues) عند استخدام المواقع والتطبيقات الخاصة بك. تعدُّ هذه الأدوات الأفضل في مجالها، إذ اخترناها بعناية من بين العديد من الخيارات المتوافرة. هل أنت جاهز؟ لنبدأ رحلة التعرف عليها. 1. Mason من الأمور البديهية في عالم تصميم وتطوير البرمجيات هو أن الحاجة إلى إجراء تغيير بسيط في منتج سبق نشره سيسبب في حدوث إشكاليات كبيرة في التخطيط والتنفيذ عدا عن النفقات غير المتوقعة وغير المخطط لها. لذلك، من الضروري أن تحمل الفرق على عاتقها مسؤولية تصميم التغيير، والذي يتم غالبًا من خلال استخدام أسلوب النموذج الأولي (prototyping approach) واختباره وبرمجته ثم الانتظار لحين دورة النشر القادمة لتثبيته واعتماده. وأثناء ذلك، لن يتمكن العميل أو المستخدم النهائي من فعل شيء سوى أن يتنتظر. لكن مع Mason، الأمر مختلف؛ فهو يقدم منصة مرئية مدعمَّة بأدوات بناء الواجهة الأمامية مما يوفر للفِرق بيئة عمل مشتركة وسريعة لإضافة الميزات للتطبيقات أو المنتجات الرقمية الأخرى المطلقة (أو المنشورة)، حيث يمكن بسهولة بناء تلك الميزات دون الحاجة إلى النماذج الأولية، أو الإطارات الشبكية، أو فحص ضمان الجودة (QA inspection). كذلك لا حاجة إلى البرمجة أيضًا نظرًا لأنَّ Mason ينشئ قاعدة بيانات خاصة به لإضافتها إلى قاعدة بيانات موجودة مسبقًا، مما يتيح للمطورين العمل في مشاريع برمجية أكبر وأكثر تعقيدًا. إن التطور السريع والقدرة الفائقة لـ Mason جعلت العملاء يشعرون بمزيد من الرضا والسعادة. يتم تشغيل Mason عند الحاجة دون أن يؤثر تشغيله على سرعة موقعك، وستظل الميزات التي تنشئها دائمًا موثوقة وقوية وقابلة للتوسيع والتطوير. 2. UXPin يوجد نماذج أولية مخصصة بالأساس لأغراض معينة ويوجد ونماذج أخرى تفاعلية، وواقعية، وقوية تثير لديك السؤال التالي: لماذا لا يمكن تجاهل مرحلة التطوير برمتها؟ تلك هي درجة الواقعية التي يمكن للمستخدم توقعها من الأداة UXPin. وذلك بفضل أنها أدة تصميم تعتمد على الشيفرة. تعرض UXPin حلولًا قريبة من رغبة المستخدم، فربط اللوحات الفنية الثابتة معًا لم يعد متواجدًا في وقتنا الحالي. هذه الأداة هي بمثابة الحلم الذي تحقق للمصمم. لماذا؟ لأنها تسهل عليه التصميم، وإنتاج النموذج الأولي، والتعاون مع مصممين آخرين في مكان واحد وآنيًّا. إبدأ بفكرة إثبات مفهوم الإطارات الشبكية، ثم تدرج في العمل نحو النماذج منخفضة الدقة إلى النماذج عالية الدقة. أنجز كل شيء آنيًّا دون الحاجة إلى ترك ومغادرة UXPin. تعد أداة تصميم واجهة وتجربة المستخدم UX/UI المعتمدة على السحابة أداةً ثابتةً ومفضلة لدى شركات 500 Fortune كشركة PayPal و Microsoft وذلك بفضل امكانياتها الهائلة في تصميم النماذج الأولية. فهي تتضمن العديد من الخصائص مثل: حالات التفاعل، والشرط المنطقي، والمتغيرات، ومكونات الشيفرة، وتعابير JavaScript وغيرها. ناهيك عن الطريقة التي تعزز وتبسط بها تعاون الفريق. 3. Interfacer متى كانت آخر مرة اضطررت فيها إلى إجراء بحث موسع للعثور بسهولة على أنسب خط، أو أيقونة، أو صورة، أو مجموعة أدوات واجهة المستخدم UI؟ سواء كان ذلك بالأمس القريب أو قبل عام، فمن المحتمل أنك تتذكره وتتذكر كم كان ذلك مضيعة للوقت! إن Interfacer هي عبارة عن مجموعة من المكتبات المصغرة المليئة بأدوات تصميم عالية الجودة من جميع الأنواع. كل ما يتم تقديمه ليس مجانيًا فحسب، ولكنه مجاني للاستخدام في المنتجات التجارية أيضًا. 4. Webflow من الأهمية بمكان أن تبحث عن منتج يتيح لك تصميم وتطبيق وإنشاء وإطلاق واستضافة موقع سريع الاستجابة من خلال منصة واحدة؛ وهذا تماما ما تقوم به الأداة Webflow. يمكنك من خلال تلك الأداة متعددة الامكانيات القيام بجميع ما سبق ذكره، بما في ذلك إنشاء نظام إدارة محتوى CMS سهل الاستخدام لكل موقع تقوم بإنشائه، دون الحاجة إلى برمجته. يمكنك كذلك بدء المشروع من واجهة فارغة أو باستخدام أحد القوالب المتوافرة أو مجموعة أدوات واجهة المستخدم UI المقدمة من قبل المجتمع. لماذا من المهم أن تختار واحدة أو أكثر من بين تلك الأدوات أو الموارد؟ التصميم الجيد لتجربة المستخدم UX يزيد من نسبة العثور على الموقع واستعماله وتفوقه على منافسيه. ربما صادفت أكثر من مرة وأنت تتصفح الويب بحثًا عن خدمة أو منتج معين ظهور عدة مواقع أخرى تخدم نفس الغرض في وجهك مباشرة؛ إذن، ما السبب في ظهور تلك المواقع؟ السبب هو تجربة المستخدم UX المتميزة التي تسهل استخدامك للموقع وكذلك تساعدك على العثور على ما تريده بسرعة ودون عناء. بعد أن تنجز ما أردته، يمكنك وضع إشارة مرجعية على الموقع لتتمكن من استخدامه في المستقبل. أليس من الرائع أن تكون مالكاً لذلك الموقع؟ التركيز على تصميم تجربة المستخدم UX يمكن أن يزيد من إخلاص العملاء للعلامة التجارية. إن التصميم الفريد والفعال لتجربة المستخدم UX يأخذك في رحلة فريدة وممتعة، إذ أنه يزيد من ثقة وإخلاص العملاء والمستخدمين لعلامتك التجارية أو لمنتجك أو الخدمة التي تقدمها. تعد تجربة المستخدم UX يستخدمها المصمم ليسهِّل على المستخدم عثوره على ما يريد أو إيصاله للمكان الذي يطلبه دون عناء بالإضافة إلى توفير أجواء ممتعة له خلال التصفح. صمم تجربة مستخدم UX تذهل العقول وتجعل كل من استعمل الموقع أو التطبيق يتحدث عنها. كيف يمكنك تحقيق ذلك؟ ببساطة من خلال تصميم تجربة المستخدم UX بشكل يسهل على المستخدمين التصفح بمرونة. فتزيد لديهم الرغبة بمشاركة خبراتهم مع الآخرين. والنتيجة؟ ستكون سلسة عملاء متنقلين يمدحون بك ويسهون في إذاعه صيتك، وهؤلاء العملاء من يقاتل الجميع حتى الموت لكسبهم. خاتمة ما الذي تحاول تحقيقه؟ توفير الوقت والمال وضمان توفير التحسيان دون الحاجة إلى النماذج الأولية؟ توفير الوقت والمال على المدى الطويل باستخدام أسلوب النماذج الأولية التكرارية أو السريعة؟ استخدام منصة واحدة فقط لإنجاز جميع الأعمال؟ البحث عن مصدر واحد يجمع أدوات تصميم مساعدة عالية الجودة (مثل الخطوط والصور والأيقونات ...إلخ.) تبقى متاحة عند الحاجة إليها؟ الأدوات والخيارات التي ذكرناها آنفًا توفر وتتيح لك ذلك بالإضافة إلى تحسين تصميم واجهة وتجربة المستخدم UI/UX. يمكنك اختيار واحدة منها، أو جميعها، ومن المؤكد أنك ستصل إلى نتائج جيدة باستعمالها. ترجمة -وبتصرف- للمقال Need help choosing a UX/UI tool? Check out these options

كان سيكون من الرائع لو أن المصمّم هو من يصمّم والمطوّر هو من يطوّر/يبرمج، لكن للأسف هذا ليس الحال، بل سيتبادل المصمم والمطوّر الأدوار بين الحين والآخر، وما لفت نظري هو وجود العديد من الدروس والمقالات الّتي تشرح للمصمم كيف يطوّر ولكن القليل منها يشرح للمطوّر كيف يُصمّم، ومن هذا المنطلق فكرت في مشاركة بعض الحيل والأفكار البسيطة لكم معشر المطورين. ما يسعني قوله بدايةً، أني لن أكون قادرًا على تعليمك أساليب التصميم الأنسب في مقالة واحدة، حيث يأتي هذا الأمر مع الوقت والتدريب وربما شهادة معتمدة، وقبل أن أنسى الملكة/الموهبة، علمًا أني لن أجعل منك مصممًا محترفًا، لكنّي سأقدّم لك بعض النصائح في كيفيّة تجنّب أبرز المشاكل الّتي تواجه بعض المطوّرين بين الحين والآخر. ملاحظات عامةقبل أن أشرع في التطرّق إلى الحيل نفسها، أود فقط مشاركة بعض الملاحظات العامة والتي بَنيتها من خلال مشاهدتي لتصاميم صمّمها مطوّرون، أهدف بهذه الملاحظات تغيير نظرة المطوّر حول التصميم، فالتصميم ليس مجرّر ترتيب للبكسلات (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.