كيفية الحصول على نظرة احترافية مع اللون
ما الذي يجعل التصميم يبدو منسقًا ومخططًا ومهنيًا؟ الجواب هو: "اللون" .
ليس كل مشروع يحتاج إلى أزرق لطيف للشركات ليبدو احترافيًا. لون التخطيط يعني إنشاء إطار يصف الألوان المستخدمة وكيفية استخدامها.
اللون هو عنصر التصميم الأكثر خداعًا. يرتبط اللون "الجيد" ارتباطًا وثيقًا بأشياء محيرة مثل الذوق الشخصي والحدس ، فضلاً عن الاعتبارات التقنية مثل المعايرة ومراقبة المعايرة.
لكن اللون ضروري للمحتوى . إذا كنت تعتبر موقعًا إلكترونيًا مهمًا بما فيه الكفاية لقضاء وقت في التنقيح ، فمن المرجح أن يرى القراء أنه من الأهمية بمكان قضاء وقت في القراءة. خيارات الألوان الجيدة تجعل ذلك يحدث.
في هذه المقالة سنقوم بمراجعة بعض التقنيات لتحقيق منصات ملونة جميلة لتصميمات الويب الخاصة بك.
أفضل طريقة لجعل موقع الويب يبدو غير مخطط له هو اختيار ألوانه عشوائياً.
حتى عندما يتخلص الزوار من الصفحة الرئيسية لموقع الويب للمرة الأولى ، تؤثر الألوان على موقفهم تجاه المحتوى . هل هذا الموقع مثير؟ مطمئنة؟ جرأة؟ ماصخ؟ السياسية؟ رسمي؟
يؤثر اللون على الطريقة التي يفسر بها الأشخاص ما يرونه بقدر ما يستخدم في الطباعة.
العثور على الألوان الصحيحة ليس بالأمر السهل ، ولكن يمكن أن تكون العملية منهجية.
تتضمن إستراتيجية التصميم الجيد مخطط ألوان (أي مجموعة من الألوان المختارة لإيصال الحالة المزاجية أو الرسالة) وترتيب ذلك المخطط.
لنفترض أنك طُلب منك تصميم موقع ويب محترف. (ويمكن أن يتحول هذا إلى لعبة مشروبات: أخذ لقطة في كل مرة يستخدم فيها العميل كلمة "احترافي" أو "نظيف" أو "حديث". صورتان ل "أحب هذا الموقع الآخر. انسخه.").
يعتمد مخطط الألوان على الطبيعة الخاصة لموقع الويب. على سبيل المثال ، يمكن أن يكون لدى كل من البنوك و محلات الزهور مواقع ويب ذات مظهر احترافي.
ولكن قد يكون الناس أقل ميلاً لشراء الزهور من موقع على شبكة الإنترنت ، وهو موقع أزرق ورمادي للمحيط. وتخيل موقع بنك أوف أميركا على الإنترنت باللون الأصفر والأخضر.
يخبر التصميم "الاحترافي" الزائرين أنهم وجدوا موقعًا على الويب يأخذ موضوعه على محمل الجد ، حتى لو كان هذا الموضوع خفيفًا. أيا كان الشكل والقيم ، تعني كلمة "محترف" التنسيق والتخطيط والتفكير .
الذهاب تدرج الرمادي
أفضل طريقة للعمل مع اللون هي البدء بلا.
إزالة اللون من التصميم يكشف عن المشاكل الأساسية التي ينبغي معالجتها قبل القلق بشأن أي درجة من chartreuse يعمل بشكل أفضل. إذا كان التصميم لا يبدو صحيحًا باللونين الأبيض والأسود ، فقد حان الوقت لإجراء التغييرات.
هل تحتوي كل صفحة على غرض واضح؟ هل يقوم دليل التصميم بالقراء من خلال المحتوى؟ هل المحتوى مقنع أو ملهم أو مفيد؟ هل العناوين واضحة؟ هل الروابط تتناقض مع النص الآخر؟ يحسن اللون هذه التأثيرات ، ولكن لا يمكن حل المشاكل في التصميم والنوع والتنظيم بالألوان فقط .
للقيام بعملية إعادة تصميم ، قم بإخراج اللون أولاً. إن الفعل البسيط المتمثل في غسل الانتخابات التمهيدية المشبعة يظهر في الواقع المكان الذي يقف فيه الموقع. (في الواقع ، يجب عليك البدء في إعادة التصميم عن طريق إعادة تقييم أهدافك ومحتوىك ، لكن هذه قصة أخرى.)
في بعض الأحيان إزالة اللون هو الحل في حد ذاته .
عملت ذات مرة مع شركة تصميم مواقع ويب لإعادة تصميم موقع الويب الخاص بهم. كان المالكين شخصيين حول المشروع وحريصون على الحصول عليه بشكل صحيح. ولكن إذا كنت تعتقد أن التصميم لنفسك صعب ، فحاول القيام بذلك من خلال اللجنة. في النهاية ، كان الثلاثة منا يحدقون في لقطة من المسودة التاسعة بعد ساعات قليلة من المشروبات.
فجأة ، قمت بتسوية طبقات Photoshop وضربت “Desaturate” لتحويل التصميم النحاسي والأزرق النابض بالحياة إلى ظلال رمادية. مفاجأة للجميع ، لقد نجحت.
بحلول نهاية الأسبوع ، كان لدينا تصميم رمادي "دافئ" مع لهجات حمراء. كنا نعلم أن لدينا فائزًا عندما أثنى عليهم العملاء السابقون على المظهر الجديد ، وجاءت المزيد من المكالمات من العملاء المحتملين.
قم بتحليل نظام الألوان الخاص بك باستخدام اختبار Photoshop "squint" :
- التقط لقطات شاشة لثلاث صفحات على الأقل من موقعك على الويب. افتحها في Photoshop.
- قم بتكرار طبقة الخلفية في كل لقطة شاشة ( Layer → Duplicate Layer ، أو Command + J على جهاز Mac ، أو Control + J في Windows).
- تطبيق تعتيم غوسي يبلغ حوالي 10 بكسل على الطبقات الجديدة.
- اذهب إلى الصورة ← التعديلات ← التأييد . استخدم 8 إلى 12 مستوى أو اذهب إلى Filter ← Pixellate → Mosaic . استخدم من 15 إلى 30 بكسل.
هذا يدل على الألوان التي هي في الواقع المهيمنة. كلما ازدادت مهارة الألوان ، كان المخطط أكثر ثباتًا في عقل الزائر.
بمجرد أن يعمل تخطيط الموقع وتنظيمه بدون لون ، فقد حان الوقت لاختيار اللوحة. لكن اي واحدة؟ وكم من الاستخدام؟
محاذاة الأشكال الخاص بك
يحتوي اللون على ثلاث خصائص: تدرج اللون والتشبع والقيمة (تسمى أحيانًا الخفة).
التشبع هو مدى ثراء اللون: ألوان النيون مشبعة للغاية ، في حين أن الباستيل أقل تشبعًا.
تشير القيمة إلى مدى سطوع اللون (أي أنه قريب من الأسود أو الأبيض).
يشير Hue إلى أي جزء من قوس قزح ينتمي إليه لون ، مثل الأحمر أو الأخضر ؛ إنها الخاصية التي يقوم الناس بجمعها
لا شيء يقتل نظام الألوان مثل الأشكال المتداخلة. يمكن أن يحتوي التصميم على مائة ظلال من لون واحد ، من الباستيل إلى النيون ، ولا تزال تبدو مخططة. ولكن إذا اختلطت الأشكال بطريقة خاطئة ، فسينهار المخطط.
هناك طريقة واحدة لتجنب تداخل الصيغ وهي فصلها بلون ثالث. المخزن المؤقت باللون الأسود أو الرمادي أو الأبيض هو الأكثر أمانًا ، لأن تدرج الرمادي يكون محايدًا: حيث يمكنك تنسيق أي جزء من قوس قزح باللون الأسود والأبيض والرمادي.
الحل الثاني هو استخدام الأشكال بنسب مختلفة . إذا كان مخطط الألوان يحتوي ، على سبيل المثال ، بنفسجي وبني ، فيمكن أن يحتوي التصميم على العديد من درجات اللون البني مع بعض النقاط البارزة الساطعة للبنفسج.
خيار آخر هو تغيير القيم. الأزرق النقي والسماوي اللامع يضفيان مزيجًا متساويًا ، ولكن الأزرق الداكن (الأزرق الداكن) والأزرق الفاتح (الأزرق السماوي) يتناقضان بما يكفي لتعيين بعضهما البعض. الأحمر والبنفسجي يمكن أن يكونا مختلفين بما فيه الكفاية حتى لا يتصادمان ولكنهما قريبان بما يكفي حتى لا يبدو متعمدا. الضوء الأحمر (الوردي) والبنفسجي الداكن تجلب التميز.
لسوء الحظ ، فإن تجنب تركيبة لونية سيئة ليس هو نفس اختيار مجموعة جيدة. لا ينجح نظام الألوان عندما تكون راضيًا ، ولكن عندما يشعر جمهورك بالراحة.
اكتشاف مخططات العظمى
من أين تأتي أنظمة الألوان الرائعة؟ مع مئات الألوان والآلاف من المجموعات ، كيف تقرر؟
يجب على مصممي المواقع الإلكترونية الصغيرة رسم اللون من المحتوى . هذا يعني عادة الصور.
كان تصميم موقع الويب المكون من ثماني صفحات والذي قمت ببنائه مؤخرًا يعلوه سقالة معدنية متقنة تضاهي السماء النيلية. وضع أداة شافطة فوتوشوب إلى معدل 5 × 5 ، أنا عينات من أحلك وأخف أجزاء من السماء وأعطى الشريط الجانبي ، وصلات ، عناوين وتذييل تلك الظلال القليلة.
عندما سأل العميل كيف تمكنا من تصميم موقع ويب جيدًا وسريعًا ، كان ردنا هو "هذا ما نفعله". لكن اللون كان موجودًا بالفعل. أنا فقط كان لا بدّ من البحث عنها.
في حين تعمل الصور المخزنة على مواقع الويب السريعة ، يجب على مصممي المواقع الأكبر والأكثر ديناميكية أن يستلهموا جمهورهم .
هناك مؤشر ممتاز للألوان التي تجذب جمهورك هو ملابسهم اليومية. اكتشف ما يرتديه الزوار ، وستعرف ما هي الألوان التي تجعلهم مرتاحين. إذا كان موقع الويب الخاص بك يدور حول ، على سبيل المثال ، الدوريات الرياضية ، اكتشف ما يرتديه الناس للألعاب ، بدلاً من وظائفهم اليومية.
إذا كنت محظوظًا بما يكفي للحصول على صور لجمهورك المستهدف ، فاعرضها بشكل جماعي ؛ تريد متوسط الحشد. ولكن إذا كانت الصور غير متوفرة ، فانتقل للتسوق.
مصممو الملابس القادرين على البقاء في العمل لديهم إحساس لوني ممتاز لكل مزاج ونمط حياة. لا يجب أن تكون 5th Avenue haute couture. سيكشف بحث Google عن "متاجر المخيمات" و "ملابس الأطفال" و "التزلج وملابس السباحة" و "المعيشة غير الرسمية" عن العديد من تركيبات الألوان الجيدة.
يرتدي الناس الملابس وفقا لأذواقهم. إذا كنت تستخدم الألوان التي يعجبهم ، فسوف يشعرون براحة أكبر على موقع الويب الخاص بك.
استخدم القوام
اختلافات طفيفة في الصبغة ، التشبع أو القيمة إنشاء القوام .
القوام أحادي اللون (أي مواد ذات لون واحد فقط) وأنماط توفر بُعدًا خفيًا لمعظم مواقع الويب بدون أي تعارض.
من السهل إنشاء خلفيات نسيج بسيطة ، على وجه الخصوص:
- التقط صورة لجدار داخلي ، أو شيئًا عاريًا ولكنه يشعر بالخوف.
- افتحه في Photoshop.
- تكرار طبقة الخلفية وسمها "الملمس 1."
- املأ طبقة الخلفية بألوان من نظام الألوان الخاص بك.
- اضبط نمط مزيج طبقة "النسيج 1" على "" Soft Light "وتعتيمها إلى 30٪.
- جربه على موقع الويب الخاص بك. إذا لم يكن ذلك صحيحًا ، فاعرض مع تعتيم الطبقة.
اسم الطبقة متعمد. قد تتلاعب بأكثر من صورة واحدة ، ولكن تجنب إعطاء أسماء الطبقات مثل "نسيج الجدار" أو "نسيج ورقي". تريد التركيز على التأثير على موقع الويب الخاص بك ، وليس من أين جاء.
خلق خطة جيدة
مخطط ألوان جيد له خصائص معينة. فكر فيه كإطار أو مجموعة من الإرشادات للحفاظ على التصميم متسقًا. يجب على المخطط:
- قائمة اثنين إلى خمسة الأشكال التي تعمل بشكل جيد معا ،
- وضّح إلى أي مدى يمكن أن يختلف التصميم عن تلك الأشكال ،
- حساب لظلال كل لون ،
- تعمل بشكل جيد ضد الأسود والأبيض.
إليك مثال على ذلك:
بدأ المصمم باختيار معظم الألوان الدافئة التي شعرت بها. لم يكن هناك منطق ، فقط الهدف الغامض "الخريف" وحدسها.
في Photoshop ، توفر طبقتان ظلالًا من الأسود والأبيض. تم تعيين وضع مزيج كل طبقة إلى "Soft Light". كان اللون الأسود النقي داكنًا جدًا بالنسبة إلى اللون الأكثر ملاءمة ، لذلك تم تعديل تعتيم الطبقة السوداء.
لتوحيد الألوان ، تم إنشاء طبقة جديدة ومليئة باللون الأحمر الخالص. تم تعيين وضع المزيج على "اللون" وتقطع عتمته إلى حوالي 40٪. (ملاحظة: ترتيب الطبقات مهم للغاية. ستتغير الألوان إذا تم تعيين طبقة "الصبغة" أسفل الطبقات السوداء والبيضاء.)
هذا أعطى المصمم 15 لونًا للاختيار من بينها. اخترت أربعة لديها مجموعة من النغمات والألوان. هنا ، يتم تعيين الألوان على اللون الأبيض.
الاختلافات مهمة ، لذلك جرب المصمم. كيف تبدو الألوان في مواجهة اللون الأسود؟ ماذا يحدث إذا قمنا بتظليلهم قليلاً؟
ماذا لو قمنا بتغييرها بالكامل؟ استخدام Image ← Adjustments → ينشئ Hue / Saturation على طبقة "الصبغة" إحساسًا واضحًا بعدم خريف ، ولكن الألوان لا تزال منسقة. ربما يمكن استخدام هذه اللوحة لعيد الفصح.
والنتيجة النهائية هي مخطط ألوان: مرجع يوفر درجات مختلفة (ولكنها ليست مختلفة) ومجموعة من الدرجات التي تعمل بشكل جيد. قم بتنزيل ملف العينة.
استخدم الإطار
هل ستعمل رسومات الغد والصور والأيقونات مع مخطط ألوان اليوم؟ ما الصور التي يحتاجها موقع الويب في غضون ستة أيام أو ستة أسابيع أو ستة أشهر؟ من الصعب القول ، ولكن المحتوى جزء من نظام الألوان الخاص بك .
يمكنك حل هذه المشكلة إما عن طريق جعل الصور تتبع نظام الألوان أو جعل نظام الألوان يتبع صورك.
يُعد فرض نظام الألوان ، حتى مع الصور ، طريقة رائعة لتحقيق مظهر موحد عبر جميع الصفحات .
الحل الأسهل هو العثور على الصور التي تناسب مخططك. تذكر أن نظام الألوان يتيح مساحة كبيرة للمناورة: طالما أن ألوان الصورة الرئيسية مناسبة ، يجب أن تعمل الصورة. تسمح لك العديد من مواقع صور الأسهم بالبحث حسب اللون (بمعنى اللون: عادةً ما تكون الانتخابات التمهيدية مثل الأحمر والأخضر والأزرق).
إذا كانت الصورة لا تتناسب مع لونك ، فاعطها صبغة:
- افتح الصورة في Photoshop.
- قم بإنشاء طبقة جديدة. اضبط وضع المزج على "اللون".
- املأ هذه الطبقة بأحد الألوان من لوحة الألوان ، ويفضل أن تكون تلك الطبقة الأكثر ملاءمة للصورة.
- اضبط عتامة طبقة الألوان على 50٪.
- العب مع العتامة حتى تحصل على توازن جيد بين لون الصورة الأصلي ولون ألوان موقع الويب الخاص بك.
- تعمل هذه التقنية للصور والرسوم التوضيحية والرموز - أي شيء يعتمد على البيكسل. (إذا كنت لا تملك الصورة ، فتأكد من الحصول على إذن قبل تغييرها. يمكنك تحسين مظهره على موقع الويب الخاص بك ، ولكنك مازلت تأخذ الحريات بفن شخص آخر.)
تبحث المهنية
لا توجد مجموعة من الألوان تبدو "احترافية" في حد ذاتها. بدلاً من ذلك ، عليك اتباع عملية للوصول إلى إحساس منسق ومخطط.
بغض النظر عن موضوع الموقع ، سيعرف الجمهور أنه يأخذ نفسه على محمل الجد.
نصائح
- عندما تعتقد أن لديك نظام ألوان جيد ، جربه لمدة أسبوع واحد على الأقل. تقييم اللون يتطلب الحدس الذي يبني مع مرور الوقت. امنح نفسك الوقت الكافي لامتصاص شخصية المخطط بالكامل.
- عندما تعتقد أن لديك نظام ألوان جيد ، لا تدعها تفلت. تتغير أذواق زوارك ، مثل أذواقك ، بمرور الوقت. اكتب ملاحظة لمراجعة الألوان بعد أربعة أشهر. ثم اسأل ، هل ما زالت مناسبة؟ إن لم يكن ، ما الذي تغير؟ ما هي العوامل التي تؤثر على التكيف الخاص بك؟
- استخدام الألوان الرائعة لماما. وهناك مجموعة من قزحية شيء سوف تجذب الزوار هناك ، ولكن إذا رأوه في كل مكان ، فسوف يهيمون على وجوههم دون هدف.
- بعض الناس يعتقدون أن أنظمة الألوان لها نطاق ضيق. السماح لبعض الفسحة لإضفاء المزيد من العمق على التصميمات الخاصة بك.
- تجنب الانتخابات الأولية الصرفة مثل الأحمر والأخضر والأزرق والأصفر. أعطهم مسحة لشخصية حقيقية: أحمر ، ولكن بنفسجي قليل ، أزرق مع لمسة من اللون الأخضر "الأصفر الدافئ" مع لون برتقالي.
- تأكد من أن ألوانك تعمل عندما تلاشي. إذا اخترت اللون الأحمر ، فكن على دراية بأن اللون الأحمر الفاتح يمكن أن يكون أنثويًا وأن اللون الأحمر الداكن يمكن أن يشبه الصدأ أو الدم. يدير الأصفر من أشعة الشمس الباهتة إلى اللون البني الداكن. الأزرق الغامق غامض ، والأزرق الفاتح هادئ أو كهربائي إذا قمت بتغطيته.
- مستخدمو Mac ، اضبطوا شاشتك. انتقل إلى "تفضيلات النظام" وانقر على "وصول عالمي". اضبط شاشة العرض على "استخدم تدرج الرمادي". هذا أيضًا مفيد عندما تكون في مزاج فيلم نوار.
- بغض النظر عن مدى نشاطك الذي تريد أن يشعر به موقعك الإلكتروني ، استخدم خلفية محايدة. الأسود والأبيض والرمادي تعمل بشكل جيد مع كل لون تقريبا.
- إذا كنت تريد نصًا صغيرًا (على سبيل المثال ، 14 نقطة أو أقل) لمطابقة حقل كبير من الألوان ، اجعل النص بضعة ظلال أغمق من المعتاد. سيؤدي ذلك إلى تعويض عدادات الضوء داخل الأحرف.
- استخدم المزيد من الظلال بألوان أقل.
- ما "تبدو جيدة" هو الحدس. لكن الحدس هو معركة بين نفسك ، والجمهور الخاص بك ، وسلطة الناس الذين يمولون المشروع.
- استخدم الخلفيات التي تم تجاهلها لجعل المحتوى بارزًا:
مكتوبة حصرا ل WDD من قبل بن جريميليون . وهو مصمم على شبكة الإنترنت لحسابه الخاص الذي تعلم أن عدم مرونة الموعد النهائي يتناسب عكسيا مع عدد الميزات المطلوبة في اللحظة الأخيرة.
كيف يمكنك إنشاء مخططات ألوان ناجحة؟ ما الذي ينجح وما لا يصلح لك؟