أحمد النجار3

إن اختيار نظام الألوان المثالي ليس بالمهمة الصعبة. كل ما تحتاجه هو الأدوات الصحيحة لعملك وعينك لتبدأ التصميم. لا يمكنني تطوير عينيك لاختيار الألوان، لكنني أستطيع اقتراح مجموعة من أدوات الألوان المفيدة والتي من المحتمل أن تحسن ذوقك عند استخدامها. جميع هذه الأدوات مجانية 100٪، لذا يسهل وضعها في المفضلة وإعادة استخدامها مرارًا وتكرارًا. كما يمكنك استخدامها في تصميم الويب أو الهاتف المحمول أو الطباعة أو أي وسيط آخر يحتاج إلى ألوان مذهلة. 1. ColorHexa كنت أتصفح الويب في الآونة الأخيرة وعثرت على ColorHexa. إنها إلى حد بعيد إحدى أروع أدوات الألوان التي رأيتها على الإطلاق. من الناحية الفنية ليست هذه الأداة مُولّد ألوان أو أداة تصميم مخطط، بل هي مكتبة معلومات عن جميع الألوان مع تدرجات لونية مقترحة، وظلال ذات صلة، وعشرات من رموز الألوان (مثل:hex ، RGB،CMYK ،CIE-LAB ،HSL والمزيد). لن تجد قائمة من المعلومات عن الألوان أكثر كمالًا منها. فهذه الأداة مفيدة للغاية لجميع المصممين، بمن فيهم مصممي الويب، وهي مكان رائع للبدء في البحث عن الألوان لمشاريعك. 2. Colors.css إذا قمت ببعض الأبحاث في التأثير النفسي للألوان فستتعلم كيف تترابط الألوان المختلفة معًا وما الحالة المزاجية التي تعبر عنها. وهذا ما يتناقض مع أنواع محددة من الألوان وكيفية عملها معًا. غالبًا ما يأتي كل متصفح بألوان افتراضية مزعجة جدًا. Color.css ستقوم بإصلاح ذلك. إنها مكتبة CSS مجانية تعمل على إعادة تشكيل لوحة الألوان الافتراضية. هذا يعني أنه يمكنك استخدام أسماء الألوان مثل "الأزرق" و"الأحمر" بقيم مختلفة تمامًا. كما أن لدى موقع الأداة صفحة مليئة بالأفكار لمطابقة أنظمة الألوان التي من شأنها تحسين قابلية القراءة على موقعك. 3. ColorPick Eyedropper ترى كم وجدت من المواقع ذات الألوان الجميلة؟ أجد مواقع مذهلة طوال الوقت ومن الصعب تصدير هذه الألوان من ورقة الأنماط. يمكنك استخدام أدوات مطور كروم ولكن هذا يتطلب التنقيب في التعليمات البرمجية (الكود) لاختيار الألوان السداسية (الهيكسا). بدلاً من ذلك ، يمكنك استخدام إضافة ColorPick Eyedropper المصمم حصريًا لـ Google Chrome. يمكنك فقط النقر فوق نافذة التبديل في لوحة الإضافات، ثم المرور فوق أي لون تريد دراسته. تمنحك هذه الإضافة الرمز الكامل السداسي عشري مع رابط "نسخ" لنسخ اللون المحدد إلى حافظتك الخاصة. رائعة حقًّا أليس كذلك؟ إنها إضافة مجانية، لذلك لن تخسر شيئًا إن جربتها. 4. Coolors موقع Coolors عبارة عن مولد كبير لمخططات الألوان. يمكنك العثور على العشرات من المولدات على شبكة الإنترنت، ولكن هذا يختلف قليلاً لأنه يدعم برامج Adobe بإضافاتها الخاصة. يمكنك أيضًا الحصول على هذه الإضافة لكروم أو حتى كتطبيق iOS مخصص لهاتفك. حقا القيمة الحقيقية تكمن في تطبيق الويب للمتصفح هذا الذي يولد تلقائيًّا مخططات الألوان بلمح البصر. يمكنك بعد ذلك مزج الألوان ومطابقتها، وتغيير الإعدادات، وضبط العمى اللوني، وإضفاء الطابع العشوائي على المخططات الخاصة بك وفقًا لمعايير معينة. إنه تطبيق رائع، ولكنه يأتي مع منحنى تعليمي صغير. فلن يأخذ منك أكثر من 15-20 دقيقة حتى تعرف كيف يعمل كل شيء. 5. Palettte App Palettte هو أداة تحرير الألوان وإعادة رسم خرائطها. يتيح لك إنشاء مخططات ألوان تتدفق من واحدة إلى أخرى وتضبط عينات الألوان الفردية. يمكنك أيضًا استيراد مخططات الألوان الحالية وتحليلها وتحريرها. وقد أورد كاتب المقال المزيد عن دوافع ومزايا استخدام تطبيق الألوان هذا. 6. Material UI Colors من خلال بحث Google السريع، ستجد مجموعة من أدوات تصميم المواد الجميلة على الويب. يبدو أنها لا تنتهي، ويعتمد الكثير منها على أنماط الألوان الموجودة عادة في تطبيقات Android. باستخدام تطبيق الويب Material UI Colors، يمكنك العثور على مخططات ألوان مثالية تتوافق مع إرشادات Google’s material. قم بتغيير درجة جميع الألوان بسهولة باستخدام شريط التمرير الموجود في الزاوية العلوية اليسرى من الشاشة. أو اعمل على تحديد اختياراتك لتتناسب مع خيارات ألوان الموقع الحالي. يمكنك أيضًا التبديل بين hex و RGB وفقًا لأي تنسيق تريده. إنه تطبيق رائع لمحبي تصميم البطاقات ((material design. 7. Color Supply موقع Color Supply فريد من نوعه ولكنه غريب أيضًا. يمنحك مجموعة من أدوات الألوان المثيرة للاهتمام لمطابقة مخططات الألوان، واختيار الواجهات الأمامية والخلفيات، إضافة إلى طرق مختلفة لمقارنة كيف ستبدو تلك الألوان على الصفحة. لكن هذا الموقع ليس له أي دليل استخدام أو غرض محدد. إنه يعمل كمولد مخططات للألوان. ويتم إخراج ألوان مختلفة مع رموز ست عشرية (hexadecimal) بالقرب من أسفل الصفحة لنسخها. بالإضافة إلى أنه سيوضح لك كيفية عمل هذه الألوان في التدرج اللوني والأيقونات والنص. أداة رائعة ولكنها تأتي مع منحنى تعلم حرج. 8. Color Safe تعمل WCAG (قواعد إتاحة محتوى الويب) بجدّ نحو شبكة سهلة الوصول. ويعد اللون أحد أسهل الطرق لإنشاء إمكانية الوصول دون فقد اختبار الوقت. Color Safe هو تطبيق ويب مجاني يمكنه اختبار خيارات الألوان الخاصة بك. يمكنك الاختيار من مجموعة صغيرة من الخطوط والأحجام، ثم اختيار الألوان التي تريدها للمقدمة والخلفية. ستحصل من هناك على تصنيف إمكانية الوصول إلى جانب اقتراحات حول كيفية تحسين خيارات الألوان الخاصة بك (إذا لزم الأمر). أداة رائعة حقًا لأي شخص مهتم بإمكانية الوصول على الشبكة. 9. Color Hunt للاطلاع على معرض مخططات الألوان، ألق نظرة على Color Hunt. تم إطلاق هذا المشروع المجاني قبل عامين ولا يزال مصدر إلهام للتصميم. يقدم الأشخاص مخططات الألوان الخاصة بهم إلى الموقع، ثم يصوت آخرون على مخططات الألوان هذه. يمكنك الترتيب حسب الأحدث أو الأكثر شعبية وحتى التصويت على المفضلات لديك. رائع حقًّا أليس كذلك؟ إنه تطبيق ويب بسيط للغاية لذا لا تتوقع الكثير من الميزات. إنها مجرد طريقة رائعة للتصفح بصريًا عبر العديد من أنماط الألوان المختلفة دفعة واحدة. 10. أوبن كلر Open Color تبحث عن شيء أكثر ملاءمة للويب؟ إذَا قم بزيارة مكتبة Open Color. إنها مجموعة ضخمة مفتوحة المصدر من خيارات الألوان مبنية على إمكانية الوصول ودعم المتصفح. تم تحسين كل لون لسهولة المطابقة بغض النظر عن التصميم الخاص بك. لمزيد من المعلومات ولتنزيل نسخة من الأنماط زر صفحة التطبيق على موقع GetHub. 11. HTML Color Codes HTML Color Codes هو تطبيق ويب معلوماتي خاص بالألوان. يتيح لك هذا التطبيق سحب جميع أشكال كود HTML / CSS لخيارات الألوان الخاصة بك مباشرة. يمكنك البحث عن أي لون تريده، أو الاطلاع على التوصيات. بالإضافة إلى أن هذا التطبيق يحتوي أيضًا على أداة لإنشاء لوحات ألوان يمكنك تنزيلها كملفات Adobe Swatch. لا تدع الاسم يخدعك: هذا التطبيق لا يقتصر فقط على استخراج ألوان HTML بل يتعدى ذلك بكثير. إنها أداة رائعة للمصممين الرقميين من جميع التخصصات والذين يريدون الوصول بسهولة إلى أكواد الألوان ولوحات الألوان القابلة لإعادة الاستخدام. 12. أدوبي كلر سي سي Adobe Color CC لا يمكنني تجاوز تطبيق الويب المذهل Adobe Color CC. كانت هذه الأداة المجانية تسمى Adobe Kuler لكنها مرت بتكرارات قليلة على مر السنين. ولا يزال منتقي الألوان هذا مجانيًا ولكن الواجهة قد تغيرت لتسهيل قيام المصممين بإنشاء مخططات الألوان وحفظها. إذا كنت أحد مستخدمي Adobe، فهذه الأداة تستحق أن تكون في مفضلتك. يدعم أدوبي كلر ما يصل إلى 5 ألوان مختلفة في مخطط واحد، ويمكنك حتى تحميل الصور لسحب مخططات الألوان الديناميكية تلقائيًا. ترجمة -وبتصرف- للمقال ‎Top 12 Web-Based Color Tools for Web Designers لصاحبه Jake Rocheleau

معظمنا لا يدرك تأثيرها والقليل منا ربما من يتنبهون لذلك. رغم أن تأثير الألوان مبالغ في تقديره يمكننا الشعور بذلك بوضوح في بعض المواقف (تخيل نفسك مثلًا في غرفة مظلمة حمراء فسوف تشعر بالغضب والانفعال بالتأكيد، أو أنك في غرفة باللون السماوي فستشعر حينها بالهدوء والسكينة). سوف نتكلم اليوم عن التأثير النفسي للألوان في تصميم الويب والطرائق التي تنتهجها شركات عديدة في استخدامها للألوان وماهي الرسائل التي توجهها من وراء ذلك. كيف تعمل سيكولوجية الألوان؟ تنقسم الألوان إلى مجموعتين رئيستين: الألوان الدافئة:هي الألوان في المنطقة الحمراء مثل: الأحمر، والبرتقالي، والأصفر. الألوان الباردة: وهي الألوان التي تقع في المنطقة الزرقاء مثل: الأزرق، والقرمزي، والأخضر. الألوان الدافئة تستثير المشاعر التي تتدرج من الدفء والراحة (مثل النار المشتعلة في مساء يوم ماطر) وصولًا إلى الغضب والعداء. أما الألوان الباردة فهي تتصف بالهدوء والاطمئنان ويمكن أن ترتبط بالحزن أو اللامبالاة أيضًا. فقديمًا كان الناس يؤمنون أن الألوان تشفي من أمراض مختلفة. هذا العلم كان يسمى بالعلاج الكيميائي وبعض أسسه يمكن تلخيصها فيما يلي: الأحمر: يزيد من نشاط الدورة الدموية وبالتالي ينشط الجسم والعقل. الأصفر: يحفز الأعصاب وينعش الجسد. البرتقالي: يزيد من طاقتك. الأزرق: يعالج الآلام. النيلي: يخفف من مشاكل وأمراض الجلد. وعلى الرغم من أن غالبية علماء النفس تعاملوا مع نظرية الألوان بنوع من الشك إلا أن العديد من العلامات التجارية والشركات لم توافقهم الرأي. فقد قامت هذه الشركات بحملات تسويقية هائلة معتمدة على طريقة إدراكنا للألوان وجعل الناس يشترون منتجاتها. في ما يلي الجدول الذي يحتوي على الألوان والمشاعر/الأحاسيس المرتبطة بها على نطاق واسع. ولنحاول هنا تحليل مواقع الإنترنت لبعض الشركات المعروفة على مستوى العالم ونتعرف إلى الكيفية التي تنفذ بها تقنيات الألوان. table { width: 100%; } thead { vertical-align: middle; text-align: center; } td, th { border: 1px solid #dddddd; text-align: right; padding: 8px; text-align: inherit; } tr:nth-child(even) { background-color: #dddddd; } اللون المعاني والمشاعر الأسود رمز التهديد أو الشر، ويشار إليه كدليل على القوة. ويرتبط بالموت والحداد وعدم السعادة والحياة الجنسية والالتزام والأناقة والغموض. الأبيض يرمز للنقاء والبراءة والبرود والنعومة والنظافة. الأحمر يثير مشاعر قوية مرتبطة بالحب والدفء والراحة. لا يزال يعتبر لونًا انفعاليًا يرمز للغضب ويخلق مشاعر الإثارة والشدة والنشاط الجنسي. الأزرق لون مفضل للعديد من الأشخاص كما أنه اللون المفضل لدى الرجال. يعطي الشعور بالهدوء و السكينة. يتصف بالسلام والأمن والنظام. الأخضر يرمز إلى الطبيعة والعالم الطبيعي. يمثل الهدوء والحظ السعيد والصحة والغيرة. يعتبر رمزًا للخصوبة وله تأثير مهدئ ويخفف من الإجهاد والضغط النفسي. الأصفر حماسي ودافئ، ولكنه قد يخلق أيضًا الشعور بالإحباط والغضب. أكثر إرهاق للعين (ولهذا السبب نادرًا ما تشاهد موقع ويب أصفر ساطع أو غرفة مطلية باللون الأصفر باستثناء قاعات اللعب المخصصة للأطفال). ومع ذلك فإن معظم الألوان التي تلفت الانتباه (ألوان رائعة جدًا للتفاصيل المهمة أو التنبيهات التي تحتوي إجراءً أو تذكيرًا أو تحذيرًا مثل تلك الرموز واللوحات الصفراء الخاصة بالتوقف/التنبيه والتحذير). الأرجواني المَلَكية والثروة، الحكمة والروحانية، الجنس والعلاقات الخفية والخاصة. البني لون طبيعي يوحي بالقوة والثقة والدفء والراحة والأمان. البرتقالي إن اللون الصارخ والفاقع يجعلك تشعر بالإثارة والحماس والدفء. كمزيج من الأحمر والأصفر، غالبًا ما يستخدم لجذب الانتباه. الوردي يرتبط بالحب والرومانسية والشباب والانتعاش، وقد يكون له تأثير مهدئ. يعتمد تأثير اللون الوردي على درجته وعمقه. والآن بمعرفتنا لما تعنيه الألوان والمشاعر التي تستحضرها، فلنحاول إجراء تحليل بسيط لمخططات الألوان التي تستخدمها 18 علامة تجارية عالمية معروفة على مواقع شركاتها على شبكة الإنترنت. هذا الأمر مثير حقاً، فقد بدأنا في اتخاذ الأمور على نحو مختلف. 1. كوكا-كولا Coca-Cola اللون الأساسي هو الأحمر المصبوغ على خلفية من الأبيض والرمادي الفاتح من أجل رؤية وتباين أوضح. الأحمر يفترض أن يخلق مشاعر الاستمتاع والحركة وعلى الرغم من أن الابيض من المرجح أنه يستخدم ليخفف حدة الأحمر كونه لون بارد, فانه من المفترض أن يمنح شعور البهجة ويمثل انعكاس الأفكار كما يقول العاملون المهرة "عمل رائع!". 2. ماكدونالدز McDonalds على الرغم من أن مطاعم ماكدونالدز تستخدم اللونين الأصفر والأحمر بهدف تحميس الأطفال إلا أن الموقع الإلكتروني يبدو أكثر رسمية باللونين الأبيض والأسود. ولا عجب في ذلك فبزيارته من قبل الوالدين الراغبين بمعرفة ماذا يأكل أبناؤهم وكم سببت لهم من سمنة فإن اللونين الأبيض والأسود حل مثالي لجعل الموقع يبدو أكثر اعتدالًا، ورسميًا، ومفهومًا، ونظيفًا مرتبًا. الآن تخيل لو أنه صمم باللونين الأصفر والأحمر (الذين يسببان الإثارة للعين) فإن ذلك سيُغضب الوالدين. وحسب رأيهم فإن: والدين محبطين = أموالًا أقل. 3. إم آند إمز M&M’s ألوان إم آند إمز والتي نراها عادة في التلفزيون من خلال الإعلانات هي الأصفر والأحمر (وهذا يضاعف الشعور بالحماس). الموقع نفسه مزيج من كل الألوان الممكنة بدءًا من الأزرق الخفيف في الخلفية للأزرق الغامق والأخضر والأصفر والبرتقالي والأحمر في البانرات والترويسة. رجال إم آند إمز M&M’s أذكياء للغاية، فكل منا يختار الحلوى التي يحبها، لكن هناك مشكلة واحدة وهي أن الموقع يبدو غير متناسق وأنه مكون من قصاصات غير متوائمة. 4. كولجيت Colgate الأحمر والأبيض والأزرق هي الألوان المتعارف عليها عالميًا والمشهورة لمعجون الأسنان وهي الثلاثة ألوان الوحيدة المستخدمة في الموقع الإلكتروني (حتى أن الأم والأطفال في الصورة على الترويسة يلبسون الأحمر والأبيض على خلفية زرقاء سماوية!). نرى أن الأحمر يعبر عن الطاقة والسعادة والأبيض يعبر عن اللمعان بينما يعبر اللون الأزرق عن البرودة المنعشة لسريان الماء والثقة بالنفس. وعلى الرغم من أنني أحببت معجون الأسنان هذا إلا أن منظمة ألوان الموقع لم تسعدني ولم تشعر عيناي بالراحة. فاللون الأحمر الفاقع جعلني أشعر بعدم الارتياح وغالبًا ما أفقدني التركيز على النص والمعلومات. 5. نستله Nestle شعار نستله يقول: (طعام جيد، حياة جيدة) ومنظومة الألوان المكونة من الأبيض-الرمادي-الأزرق ستشعرك بالهدوء والأمان والثقة بأن كل شيء سيكون على ما يرام. سوف تتذكر هذا الشعور حين تشتري منتجًا من نستله في المرة القادمة ستفكر بطريقة ما وتقول: "إنني أدرك بأن هذه الشركة معتمدة لإنتاج الطعام الجيد، ربما أكون قد قرأت هذا في مكان ما". وهذا يعتبر مثالًا عظيمًا يؤكد كيف أن التسويق مرتبط ارتباطًا وثيقًا بإدراكنا للألوان. 6. نسكافيه Nescafe هو أحد منتجات نستله ومع ذلك فإن موقع نسكافيه صُمّم بألوان الخوخ الغامقة المميزة -المكونة من مزيج من الأحمر الباعث على الدفء والنشاط والأرجواني المريح- والذي يجعلك تشعر بالتميز والانفراد. أنا أحب منظومة الألوان هذه، إنها ليس مزعجة كما اللون الأحمر وليست مرهقة كاللون الأرجواني إنها تجعلك تشعر بأنك مميز ومرتاح. 7. كادبوري Cadbury موقع إلكتروني مصنوع من ظلال اللون الأرجواني. أخمن أنه من المفترض القول بأن منتجات كادبوري مميزة للغاية، ولكن هذا يثير الشك في نفسي لبعض الأسباب. إنها نظرية مثيرة للاهتمام، بينما الشوكولاتة عادة ما ترتبط بالطاقة والنشاط (مثل سنكرز) أو الجنس (مثل الشوكولاتة السادة) ولكن نظرية الخدعة تجعل المنتج يصنف خارج المنظومة .أو ربما أنا الوحيد الذي يفكر بهذه الطريقة. 8. نوكيا Nokia أزرق، أخضر، رمادي، أبيض، وقليل من الوردي. أمّا الأزرق فهو للراحة النفسية والأخضر للطمأنينة والطبيعية والرمادي للمزج بشكل جميل بين الأزرق والأخضر، والأبيض للوضوح، أمّا الوردي فربما لجذب الفتيات. الموقع مصمم بألوان تشعرك بالثقة في الجودة وهذا التصميم بعيد عن منظومة الألوان الافتراضية والمكونة من الأزرق والرمادي والأبيض. من المعروف عن اللون الأخضر أنه يزيل التوتر وله تأثير مهدئ على بعض المحبطين والمنهكين من أعبائهم اليومية وأولئك الذين يأتون للبحث عن آخر التطورات. 9. كوداك Kodak على الرغم من أن منتجات كوداك مرتبطة باللون الأصفر (لاستثارة الانتباه) لكن الموقع مصمم بمنظومة الألوان الكلاسيكية المكونة من الرمادي-الأبيض -الأزرق وهذا ما يجعله مريحًا للعين ويسمح بالتركيز على النصوص والمعلومات. إنك تشعر بأنك ستحصل على المعلومة التي تريدها بطريقة واضحة، وبالتأكيد أنك لم تشعر بالرسمية بل بالطريقة الاحترافية لعرض الأشياء. 10. جيليت Gillette الأزرق هو اللون المفضل للرجال والقائمون على جيليت يعلمون هذا. "أفضل ما يمكن أن يحصل عليه الرجل"- اللون المفضل للرجال مع قليل من الأحمر والبرتقالي في العروض لجذب الانتباه. لقد عرفوا ماذا تحبون يا رفاق، وبالتالي فإنهم يعرفون كيف يبيعون منتجاتهم لكم. 11. إيكيا Ikea ترويسة الموقع مصممة بألوان مشرقة الأصفر والأخضر المصفر والأزرق السماوي الذي يجعلك تشعر إلى حد ما بالمتعة (والرغبة بشراء شيء ما). الصور المستخدمة في الفلاش المتحرك أيضا براقة وتشعرك بإثارة أكبر. جسم الموقع جميل وبسيط إلى حد ما - نصوص سوداء وزرقاء على خلفية بيضاء لتعطيك وضوحًا ووصولًا كاملًا للمعلومات. صفحة العروض المميزة يتربع بنر أحمر كبير في أعلاها ولا يمكنك أن لناظريك الابتعاد عنه! في اللحظة نفسها يظل عقلك يقرأ عبارة "عروض مميزة" مرة تلو أخرى … لقد استحوذت عليك إيكيا. 12. لوريال L'oreal ليس لدي الكثير لأقوله عن موقع لوريال المصمَّم بكافة الظلال الممكنة للون للأرجواني إنه يجعلك تشعر بالتميز حقًّا. مع منتجات لوريال سوف تكون مثيرًا وأنيقًا وواثقًا بنفسك ومميزًا بحق. 13. كِلوقز Kellogg’s منذ عام 1906 عرف الناس كلوقز كشركة يمكن الاعتماد عليها للمذاق الرائع، والأطعمة ذات الجودة العالية. كل ما في الموقع يتكلم عن المتعة والحماسة (الكثير من الأصفر والأحمر) وصور العائلات المبتسمة في رأس الصفحة التي تشعرك بسعادة أكبر. حتى الأطفال يحبون ذلك! فالنصوص على الموقع تتحدث عن ذلك "يسعدنا أن نعرض عليكم عروضنا الممتعة المتعلقة بمنتجاتنا." إنه ممتع! 14. غوتشي Gucci اللون البني الفاتح الطبيعي يجعلك تعتقد أن منتجات غوتشي كأنها طبيعية جدًا (بمعنى آخر لأنها مصنوعة من الجلد). ومثل لوريال الموقع المصمم بلون منفرد بينما الظلال المختلفة تشكل بقيته. ويقول الكاتب: "على الرغم من أنني ضد قتل الحيوانات من أجل الفراء والجلد، فقد أحببت موقع غوتشي، إنه مريح وطبيعي جدًا". 15. هاينز Heinz الصفحة الرئيسية للموقع فيها صورة كبيرة مستخدمة كخلفية، ويمكنك أن ترى السماء، والحقول وتتذوق الطماطم إنه ببساطة لأمر مؤثر. خلفية الموقع داخل الصفحات تتغير من صفحة إلى أخرى: البني الذي يمثل الأرض والأزرق الذي يمثل السماء والرمادي الذي يشبه السماء قبل هطول المطر. القائمون على موقع هاينز يستخدمون الألوان بشكل مؤثر جدًّا، فمغزى منتجاتهم نابع مما يزرعونه (أو مما يشترونه من طرف ثالث) إنهم يستخدمون كل الألوان الطبيعية والصور ليبينوا لك أن منتجهم هو خلاصة ما تعطيه لنا الطبيعة. 16. كونفرس Converse في حين أن منتجات كونفيرس متاحة بكل الألوان الممكنة، فإن موقعها مصمم بنمط وألوان تشبه حجارة الرصيف وبناطيل الجينز القديمة. إن النمط هنا ليس معتمدًا على الألوان ولكن على الجمهور الذين يجب أن ينجذبوا لهذا النمط من التصميم، العناصر المرسومة بخط اليد والشكل الغريب الذي يبدو عليه. 17. كلينكس Kleenex كلينكس مثال آخر رائع على تصميم المواقع باللونين الأخضر والأزرق الطبيعيين (لتشعرك بالثقة من أن المنتج طبيعي) المختلط بالعناصر البرتقالية لجذب الانتباه. إنه من الممتع أنني لم يلفت انتباهي سابقًا هذا القدر من المواقع الكثيرة التي تستخدم نفس منظومة الألوان ولكنها لا تزال لا تشير لبعضها. ربما لأننا لا ننظر إلى الألوان بطريقة أخرى تجعلنا ندرك ونتعرف على اللون، أعتقد أننا نراه كجزء مكمل للنظام. 18. دوراسيل Duracell موقع دوراسيل مصمم بثلاثة ألوان رئيسة مع ظلالها: الأسود، البرتقالي، والأخضر. الأسود ليصنع تباينًا أكثر للبرتقالي وليضيف بعض الرسمية والثبات. البرتقالي يعبر عن القوة، والطاقة، والمرح. الأخضر يمثل الطبيعة ويعمل بشكل رائع مع البرتقالي. "الطاقة الذكية" كما يصفون منتجهم، كل ما في الموقع يشعرك أن منتجات دوراسيل هي فقط ما تحتاجه، البطاريات قوية جدًّا ويمكنك الاعتماد عليها في أي موقف. وعلى كل حال فأنا أشتري بطاريات دوراسيل. ما هو الألوان التي ستستخدمونها في تصميم مواقعكم؟ وما هي ألوانكم المفضلة؟ ننتظر تعليقاتكم يا رفاق! ترجمة -وبتصرف- للمقال The Psychology of Colors in Web Design.

في حالة كنت عالقًا في كهف طيلة السنوات القليلة الماضية، دعني أخبرك هذه الأخبار الرائعة: التصاميم المسطحة (Flat Design) للمواقع هي الرائجة الآن. علينا الآن أن نودع تلك التصاميم التقليدية التي سيطرت عليها الفراشي، وتدرجات الألوان، والظلال، وكل تلك الأنواع من التصاميم. أكرر، البساطة هي التوجه الجديد. إن التوجه للتصميم المسطح هو ظهور نمط من التصميم يستخدم الأشكال المسطحة والأيقونات. وبالأساس يتمحور حول استخدام المستطيلات، والدوائر، والمثلثات وأشكال أخرى مع غياب عناصر التصميم الأخرى كالظلال، والحدود والتدرجات اللونية. لقد أصبحت معروفة بفضل مايكروسوفت التي أدخلتها ضمن أنظمة حواسيبها، خاصة نظام التشغيل الجديد ويندوز 8. بساطة المواقع مسطحة التصميم إنها حالة التصميم التي تتجنب استخدام التعقيدات. فالتصميم المسطح البسيط يبتعد عن استخدام الظلال، والحدود وعناصر التصميم الأخرى. السبب وراء ذلك هو أن الناس الآن يقدرون الأنماط البسيطة والسهلة التمييز. ومع ظهور تصفح الهاتف، حيث مساحة الشاشة محدودة، فإن استخدام الصور البسيطة سوف يضاعف استخدام البكسلات على الشاشة. النمط المصغر أيضًا يُطبّق حين يركز المصممون على التباعد بين الأيقونات، والصور والعناصر في صفحة الويب أو التطبيق. زد على ذلك، فإن الصور البسيطة والمسطحة يتم تحميلها أسرع من تلك في التصميمات المعقدة لأن المتصفح لن يحمل عناصر التصميم مجتمعة مع الصورة الرئيسية. في الوقت نفسه، فإن أسس قابلية القراءة تتحقق جميعها في النمط المصغر. ومع مزيد من "المسافات البيضاء" (أو المساحات الفارغة) فإن النص سيكون أكثر وضوحًا. ومع غياب الظلال، والحدود والتدرجات اللونية سيحقق القراءة السهلة للنص المضمّن في الصفحة. فيس بوك هي أول من تبنّى هذا التصميم. قبل سنوات غيرت فيس بوك مخططات تصميمها بشكل واضح، بحيث أتاحت للمستخدمين رؤية أيقونات بسيطة، وتصميمات أكثر راحة للعين. جوجل أيضًا اقتفت نفس الأثر بتغيير أيقوناتها إلى أخرى مسطحة بسيطة وزاهية الألوان. إنها الحقيقة، فتوجه التصميم المسطح غزا بتدريج وثقة مواقعنا، وتطبيقاتنا وحواسيبنا. وقريبًا جدًّا سوف يحكمنا تمامًا. وقبل أن يحدث ذلك فلنتعرّف على فلسفة التصميم البسيط. سوف نتكلم عن عناصر التصميم وكيفية توظيفها للاستفادة الكاملة من مساحة الشاشة. في الحقيقة هناك خمسة عناصر يتصف بها التصميم المسطح: غياب العمق استخدام العناصر البسيطة الطباعة اللون البساطة لقد انتهى العمق في التصميم لم يعد للعمق وجود الآن. اتجاه جديد للتصميم بات يحكم الجميع. فعلى عكس اتجاهات التصميم السابقة حيث لم نتمكن من العيش دون الظلال الساقطة، والحدود، والبروزات والتدرجات اللونية، يركز نمط التصميم المسطح الجديد بشكل أكبر على مخطط بسيط ثنائي الأبعاد. تتناقض فلسفة التصميم المسطح تمامًا مع التصميم الانسيابي، حيث يتم إعداد الصور لمحاكاة شكل، أو لون أو كائن حقيقي. وعادةً ما تحتوي مواقع الويب والتطبيقات انسيابية التصميم بطبيعة الحال على صور خلفية واقعية في الطبيعة. هذه المواقع تستخدم البنيات والأنماط الموجودة في العالم الواقعي. مثال جيد على هذا النوع من التصميم هو تصميم iOS6 (والإصدارات السابقة من iOS). فمن المفترض أن يكون كل تصميم تقليدًا للكائن الحقيقي. استخدام الصور ثلاثية الأبعاد المنشأة بوساطة الحاسوب، واستخدام التدرجات، والأنسجة، والحدود، والبروزات، والزخارف لجعل الصورة تبدو وكأنها حقيقية. يشبه تطبيق newsstand كشك بيع صحف حقيقي مصنوع من الخشب. على النقيض، تتم إزالة هذه العناصر في التصميم المسطح. ويزيل مخطط التصميم المسطح تلك العناصر ثلاثية الأبعاد. ويسقط العمق. ويزيل كل تلك الظلال والتدرجات والحدود الخارجية! ستبقى البساطة عنوان الجمال بإزالة العمق في التصميمات، من الطبيعي أن تصبح الصور، والأيقونات وعناصر التصميم الأخرى بسيطة بصريًا. تصنع الأيقونات الآن حتى تكون مسطحة وتستخدم أشكالًا هندسية أساسية مثل الدوائر، والمربعات، والمستطيلات. وهذا سيعطي واجهة مستخدم رسومية بسيطة وسهلة الاستخدام. لن يشعر الشخص العادي بعد الآن بالحاجة إلى دليل استخدام لأن الكائنات المرئية تقدم نفسها أثناء استخدامها. عندما ترى أيقونة " الحرف f" موضوعًا في مربع أزرق، ستعرف بسهولة أنها فيسبوك. عندما ترى رمز الترس، فسيخبرك بسهولة أنها قائمة إعدادات. التصميم المسطح يعمل هكذا. عندما ترى شكل قرص مرن، ستعلم تلقائيًا أنها أيقونة الحفظ. أو عندما ترى حرف M أصفرًا كبيرًا على خلفية حمراء، فسيتجه تفكيرك دائمًا نحو McDonald. انظر، كلما أصبح الشعار أكثر بساطة، كلما كان إدراك الأشياء أفضل. ما تراه هو ما تحصل عليه في الأساس. الطباعة، كما أخبرتكم سابقًا للطباعة مكانتها في التصاميم المسطحة. فهي تضيف نسقًا حتى مع النصوص وتمنحك واجهة سهلة القراءة. لا مزيد من تنسيق الخطوط. استخدم خطوطًا واضحة مع رسائل أقصر متناسقة مع الألوان والأشكال. لمزيد من المعلومات حول هذا، اقرأ برنامجنا التعليمي حول الطباعة. الألوان كما ذُكر سابقًا أن اللون مهم. فبإمكانه تكوين صفحتك أو تدميرها. إنه يحدد بشكل أساسي الشعور الكامل بموقعك أو صفحتك. في مبدأ التصميم المسطح، يُنصح باستخدام ألوان الحلوى قليلة الإشباع لأنها تميل إلى إضافة جمالية إلى صفحتك دون أن تجهد عيون القارئ بسبب كثرة السطوع. فتجذب ألوان الحلوى قليلة الإشباع العين بشكل أفضل لأنها جذابة، ويمكن تكاملها وتباينها بسهولة مع الألوان الأخرى. تذكر فقط أن الألوان موجودة في كل مكان؛ فلا تجعل الناس يشعرون بالملل باختيارك ألوانًا غير مناسبة. التدرجات اللونية أيضًا لم تعد جميلة. تجنب استخدام الأصفر الفاتح، الفسفوري، والأحمر الساطع والبرتقالي الساطع. لا تجعل زوار موقعك ساخطين. فن البساطة (كلما نقصت التفاصيل، ازداد الجمال) البساطة هي فن إزالة التشويش من صفحتك أو شاشتك. نشأ هذا المبدأ من مجلات الوسائط المطبوعة حيث تكون المساحات البيضاء أكثر وضوحًا من النص نفسه. أي أنها تعطي مساحة للحشو أو متنفسًا لنصوصك وطباعة سليمة. اترك الكثير من المساحات الفارغة. تخلص من العناصر غير الضرورية واحصل على إعجاب الناس. البساطة جميلة. التصميم المسطح يمكن أن يكون بسيطًا كما يبدو، لكن الإبداع يظل كل شيء. فعند التفكير في احتمالية استخدام هذا التصميم، تذكر أن تصفي ذهنك. فكر في التصميمات الأحدث والأكثر أناقة. هذا النمط من التصميم سيبقى أنيقًا، لكنّ عمل أجزاء منه لن يجعله محبّذًا. كن مبدعًا. حاول وجرب. شاهد المواقع الجذابة. جرب أن تصنع تصميمك الخاص، ارتكب الأخطاء، صححها وكن فنانًا أفضل! اعلم أنك تعرف كيف تكون بسيطًا. فلنكن جميعًا بسطاء. ترجمة -وبتصرف- للمقال Getting Started With Flat Web Design

لا شك أن شركة أدوبي (Adobe) تتربع على عرش العالم في برامج التصميم. إنها توفر كل شيء بدءًا من تصميم الفكتورات (الصور المتجهة Vectors) وصولًا إلى الأعمال المطبوعة، ومع إصدارها لبرنامج أدوبي إكس دي (Adobe XD)، فإنها تقدم الآن نماذج الويب الأولية (Prototypes). وعلى الرغم من أن هذه البرامج بها الكثير من الميزات، فإنها تزداد توسّعًا لتشمل مزيدًا من الإضافات. ولهذا السبب أسرد هنا أفضل البرامج المساعدة والإضافات لجميع مصممي سحابة أدوبي الإبداعية (Adobe CC) الذين يقومون بإنشاء أي شيء انطلاقًا من تطبيقات الجوال وحتى نماذج المواقع الإلكترونية. فبغض النظر عن مستوى خبرتك، من المؤكد أنك ستجد شيئًا مفيدًا هنا. Craft أبدأ قائمة الإضافات بحديثي عن InVision Craft والتي تعتبر إلى حد بعيد أكبر إضافة. فهي متوفرة للفوتوشوب (Photoshop) وسكتش (Sketch)، واللذيْن يوفران نفس الميزات. وتمثّل Craft مكتبة من المكونات الإضافية مع العديد من الميزات المختلفة المدمجة معًا. فيمكنك تصميم نماذج أولية prototypes، وأتمتة "المحتوى الوهمي المولّد" أو ما نطلق عليه اسم (لوريم-إيبسوم Lorem Ipsum)، ومزامنة موارد التصميم تلقائيًا مع السحابة. كل ذلك من لوحة الإضافة Craft. هذه الإضافة مجانية وستظل هكذا إلى الأبد. أوصيك بتجربتها وسترى كيف سيتحسن سير عملك الرقمي بها. Fontea يشكّل فن صياغة الحروف وطباعتها (التايبوغرافي) جزءًا كبيرًا من تصميم الويب، وبواسطة خطوط جوجل للويب Google Web Fonts يمكنك الذهاب إلى أبعد من خطوط النظام الافتراضية (default system fonts). لهذا السبب بالضبط تم بناء Fontea؛ لمساعدة مصممي الويب في صياغة الطباعة الجميلة دون الاعتماد على عائلات الخطوط المثبتة مسبقًا. يمكنك مع Fontea الاختيار من بين مئات الخطوط من Google مجانًا. ويمكنك أيضًا تضمين جميع هذه الخطوط في مواقع الويب الخاصة بك، لذا فهي مثالية لأي مشروع. كما يمكنك التنقل بسرعة بين الأنماط المختلفة دون تنزيل أي شيء. Block HTML تتيح لك الإضافة المجانية HTML Block كتابة التعليمات البرمجية وتحويلها مباشرةً إلى عناصر في Photoshop، ويشبه هذا عكس ما يقوم به البرنامج المساعد لتصدير الكود، حيث يمكنك الآن استيراد الكود مباشرة إلى ملفات Photoshop. سيحب المطورون خصوصًا هذا المكون الإضافي؛ لأنه غالبًا ما سيسهل عليهم إنشاء أزرار وقوائم وأعمدة باستخدام CSS أولاً. فإذا كنت تفضل الترميز باستخدام أدوات أشكال Photoshop وتأثيرات الطبقة، فإن تثبيت هذا المكون الإضافي سيوفر عليك ساعات من الهمّ. PS Pen Panel لم يكن الغرض من Photoshop أن يكون أداة تحرير رسوم متجهة (فكتور). ومع ذلك، فهو يحتوي على هذه الأدوات التي تُعتبر واحدة من أفضل الطرائق لتصميم العناصر المتجهة (الفكتورات) للويب. إن التنقل بين أدوات القلم المختلفة وفتح قائمة التفضيلات لتشغيل / إيقاف تشغيل "أدوات Snap Vector Tools" يمثل إزعاجًا كبيرًا بالنسبة لنا، PS Pen Panel ستحل هذه المشكلة تمامًا. إنها إضافة مجانية يضيف لوحة جديدة إلى واجهة المستخدم الرسومية. وقد تم تصميم هذه اللوحة لمصممي الكائنات المتجهة (الفكتورات) الذين يصنعون الرموز باستمرار في Photoshop بدلاً من Illustrator. وقد يستغرق الأمر بعض الوقت للتكيف معه، لكنه سيسرع من سير عملك. ملاحظة: هذه الإضافة مجانية 100٪ لكنها لا تزال تخضع لعملية اختبار من الموقع. إنها الطريقة التي تم بها تصميم منظومة الإضافات، لكن لوحة القلم هذه مجانية للتنزيل، لذا لا تدع الموقع يربكك! AI2Canvas يمكنك القيام بالكثير باستخدام لوح الرسم (HTML5 Canvas) ورسومات الويب المتجهة من نوع SVG. لكن هذه الخطوة الإضافية لتصدير ملفات SVG وترميزها إلى عناصر لوح الرسومات (canvas elements) تستنزف الكثير من الوقت. مع الإضافة AI2Canvas، يمكنك أتمتة ميزة تصدير Illustrator بكل سهولة. حيث يتيح لك ذلك إنشاء رسومات متجهة وتصديرها إلى لوح رسم HTML5 Canvas تلقائيًا. ويمكنك حتى إضافة ميزات الدوران لإنشاء تأثيرات متحركة، وكل ذلك من Illustrator! Copio إذا كنت تريد نسخ طبقة في Photoshop ، فيمكنك تكرار ذلك دائمًا بنقرة زر واحدة. لكنك لن تتمكن مطلقًا من نسخ طبقة من ملف واحد ولصقه في ملف مختلف. يمكن مع Copio أن يتغير كل شيء. فهذا البرنامج المساعد البسيط المجاني يمكِّنك من النسخ / اللصق الكامل لأية طبقات ترغب في نقلها من ملف إلى ملفات فوتوشوب PS أخرى. عادةً ما يتعين عليك سحب وإسقاط الطبقات، وقد يكون ذلك محاولة شاقة لمطابقة المؤشر فوق علامة تبويب ملف Photoshop معينة. باستخدام هذا البرنامج المساعد، يمكنك فقط تحديد الطبقة ونسخ / لصق باستخدام اختصارات لوحة المفاتيح في Copio. لقد أصبح التصميم في Photoshop أسهل كثيرًا. Cut&Slice Me زادت أجهزة رتينا (منتجات شركة Apple) من الوقت اللازم لتصميم تطبيقات الهواتف الذكية. لكنها أيضًا جلبت هذه المتطلبات إلى تصميم الويب المتجاوب حيث تحتاج حتى مواقع الويب إلى صور بمقاسات @2x و @3x لتبدو واضحة على كل شاشة. فباستخدام الإضافة Cut & Slice Me، يمكنك أتمتة عملية التصدير من خلال الصور ذات الحجم المناسب والمسمى الصحيح. ما عليك سوى اختيار الأجهزة التي تحتاج إلى دعمها، ودع هذه الإضافة تتكفل بالباقي. Composer يعتبر Adobe Photoshop برنامجًا رائعًا لصناعة النماذج نظرًا لوجود ميزة تكوين وتجميع الطبقات (layer comps). حيث تتيح لك هذه التكوينات إعادة تصميم الواجهات بألوان، وحالات مستخدم، وميزات مختلفة مع الاحتفاظ بها جميعًا في مستند واحد. ينتقل Composer بتكوينات الطبقة إلى المرحلة التالية. فهذه الإضافة تتيح لك تحديث العناصر المتشابهة عبر جميع تكوينات الطبقة، وبذلك فلن تحتاج إلى العمل عليها فرادى. لذلك، لنفترض أن لديك شعارًا في الزاوية العلوية اليسرى مؤلف من أربع تكوينات طبقية مختلفة. وأردت نقله إلى المركز. تقليديًا، ستحتاج إلى سحب هذه التكوينات عبر الشاشة لكل طبقة أربع مرات. باستخدام Composer، فأنت تقوم بتحديد جميع تكوينات الطبقة، وتحرك الشعار، وتكون قد أنجزت ما تريد بكل سهولة ويسر. Long Shadow Generator لقد ساهمت اتجاهات التصميم الحديثة مع material Design ودفعت إلى إبراز تأثير الظل الطويل. وأصبح من الشائع جدًا أن يكون لدى مستخدمي Photoshop مولّد الظل الطويل Long Shadow Generator هذه الإضافة الذي يعيد إنشاء الظل المطلوب بنقرة واحدة. يمكنك تحديد طول الظل، العتامة، والاتجاه مع نوع اللون. ثم النقر فوق "إنشاء"، ومن ثم يتم تطبيق ظلك الطويل على أي عنصر تريده. CSS3Ps لايمكن ختام هذه المقالة دون ذكر أداة تصدير الكود المهمة CSS3Ps. فهي تُعتبر أفضل خيار مجاني متاح مع الدعم الكامل لخصائص CSS3 الحديثة. قم أولاً بتصميم عناصر في Photoshop، ثم حدد تلك الطبقات وانقر فوق الزر CSS3Ps. ستقوم الإضافة تلقائيًا بإخراج شفرة CSS3 الخالصة جنبًا إلى جنب مع الأصناف (classes) لإعادة إنشاء هذه العناصر في صفحتك. يمكنك تطبيق هذا المكون الإضافي على كل شيء بدءًا من طبقات النص وصولًا إلى الأزرار، كما أنه يدعم طبقات متعددة في آنٍ واحد. يمكنك مشاهدة هذا الفيديو التوضيحي للتعرف على كيفية استعمال هذه الإضافة. كل هذا ليس إلا نزرًا يسيرًا من الإضافات المفضلة لمصممي الويب، ولكن توجد هناك إضافات جديدة دائمًا يتم إصدارها، لذا كن على اطلاع وانتظر المزيد من مكونات Adobe CC الإضافية في المستقبل القريب. ترجمة -وبتصرف- للمقال ‎10 Free Web Design Plugins For Adobe Photoshop لصاحبه Jake Rocheleau