أنت تعرف ذلك بنفسك: ترتبط الألوان أحيانا بمشاعرنا، فتجعلنا نرغب في قضاء وقت أطول داخل موقع ما.
إذا كنت تصمم موقعك الجديد أو تراجع لوحة ألوان موقعك الحالي، فسيساعدك هذا المقال على اختيار مخطط ألوان مناسب. سنعرفك بأفضل الألوان لتصميم المواقع، ونساعدك على إيجاد لون يلائم شخصية موقعك وأسلوبه الفريدين.
لماذا تعد ألوان الموقع مهمة؟
هل لاحظت أن معظم المطاعم أو مطاعم الوجبات السريعة تستخدم الأحمر والأصفر في شعاراتها؟
يرجع حضور هذين اللونين الدائم في شعارات المطاعم إلى أنهما يحفزان الشعور بالجوع لدى المشاهد. كما يعبر البرتقالي عن المرح والود، ويوحي الأزرق بالثقة، ويمثل الأخضر الانتعاش والطبيعة، بينما يستخدم الأسود للتعبير عن الفخامة أو الأناقة.
نقول كل ذلك لنصل إلى أن اللون عنصر مؤثر في بناء العلامة التجارية. فوراء علم نفس الألوان جوانب كثيرة، إذ يمكن للألوان إثارة مشاعر محددة لدى المشاهد. لذلك ينبغي للعلامات التجارية التركيز على اللون تحديدا.
قد تظن أن الألوان لا تؤثر فيك، لكنك ستندهش من الفرق الذي قد يحدثه اختيار اللون في المبيعات وفي علاقة العلامات التجارية بجمهورها. وفي الواقع، قال 85 بالمئة من الناس إن اللون يؤثر كثيرا في مشترياتهم.
عندما اختبرت بعض الشركات ألوان أزرارها وغيرتها، لاحظت ارتفاعا أو انخفاضا حادا في معدلات تحويل الزوار إلى عملاء. فمثلا، وجدت شركة Beamax المصنعة لشاشات العرض زيادة بنسبة 53.1 بالمئة في النقرات على الروابط الحمراء مقارنة بالزرقاء.
ولا يقتصر الأمر على النقر على الروابط الملونة. فقد وجدت دراسة عن التأثير النفسي للألوان أن التعرف على العلامة التجارية يزداد في المتوسط بمقدار 80٪ عبر الألوان. فكر مثلا في كوكاكولا، ومن المرجح أن تخطر ببالك علبها الحمراء الزاهية.
رغم ذلك، لا تظن أن الأحمر هو الأفضل دائما، فلا توجد قاعدة ثابتة لهذا الأمر. إذا كان موقعك يغلب عليه الأحمر، فلن تبرز دعوة لاتخاذ إجراء باللون الأحمر ولن تلفت الانتباه كثيرا. لذلك عليك تجربة الألوان حتى تجد التركيبة المناسبة لك.
كيف تختار مخطط ألوان لموقعك؟
أنت تعرف الآن مدى أهمية الألوان لعلامتك التجارية ولرضا زوار موقعك. فلنلق نظرة على النقاط التي ينبغي مراعاتها عند اختيارها.
أولا، يجب أن تفهم جيدا ما تبيعه أو الخدمة التي تقدمها. إذا أردت إظهار صورة أعلى جودة، فإن اللون البنفسجي يناسبك، لأن الناس يربطونه بالعظمة والجودة العالية والجاذبية.
أما إذا أردت الوصول إلى جمهور أوسع، فإن الأزرق لون هادئ ولطيف يلائم الموضوعات الأكثر حساسية، مثل الرعاية الصحية أو الشؤون المالية.
اختر اللون الأساسي
أفضل طريقة لتحديد اللون الأساسي لموقعك هي التفكير في طابع منتجاتك أو خدماتك، وانتقاء ألوان تلائمها حتى تجد اللون المؤثر المناسب. لنتحدث عن بعض أكثر الألوان استخداما لدى العلامات التجارية الشهيرة.
- الأحمر: لون علامتي كوكاكولا وكيت كات، ويدل على الحماس أو السعادة.
- البرتقالي: لون علامتي Nickelodeon وFanta، ويوحي بلحظات ودية وممتعة قادمة.
- الأصفر: لون علامتي نيكون وماكدونالدز، ويدل على التفاؤل والسعادة.
- الأخضر: لون علامتي Whole Foods وAnimal Planet، ويدل على انتعاش الطبيعة وحيويتها.
- الأزرق: لون علامتي Walmart وAmerican Express، ويدل على الموثوقية.
- البنفسجي: لون علامتي Hallmark وCadbury، ويشير إلى علامة متميزة أثبتت جودتها.
- البني: لون علامتي Hallmark وCadbury، ويوحي بمنتج موثوق يمكن لأي شخص استخدامه.
- الأسود: لون علامتي Chanel وAdidas، ويدل على الفخامة أو الأناقة.
- الأبيض: لون علامتي آبل ونايكي، ويشير إلى منتجات أنيقة ومحببة للجمهور.
إذا كان لديك شعار ملون بالفعل، فمن المنطقي اختيار لون للموقع يتوافق مع علامتك الحالية. فعلامة كيت كات مثلا معروفة بالأحمر، ويظهر ذلك أيضا في صفحتها الرئيسية.
اختر ألوانك الثانوية
بعد التفكير في اللون الأساسي واختياره، انتقل إلى ألوان أخرى تدعم تصميم الموقع وتكون ألوانا ثانوية. ومن نقاط البداية الجيدة النظر في الألوان المتكاملة. فلكل لون نظير يكمله، وعند استخدامهما معا ينتجان تركيبة جذابة.
فمثلا، تلفت دائرة حمراء على خلفية خضراء الانتباه أكثر من دائرة زرقاء على خلفية خضراء. لكن دائرة زرقاء على خلفية برتقالية تبدو أفضل وأوضح بكثير. هل توافق؟
لذلك، إذا كان اللون الأساسي لموقعك أخضر، فمن الجيد استخدام اللون الأحمر للدعوة لاتخاذ إجراء، أو استخدام الأحمر لإبراز الخصائص المهمة التي تريدها أن تلفت نظر كل قارئ.
حاول أيضا استخدام لون واحد أو لونين فقط إلى جانب اللون الأساسي، لأن الزيادة على ذلك تجعل مخطط ألوان الموقع غير منظم. وبعبارة أخرى، إذا أغرقت أعين الزوار بمثيرات لونية متعددة، فلن يبرز شيء كما ينبغي، وسيفقد الموقع تأثيره.
تمثل علامة Eargo مثالا جيدا على كيفية استخدام الألوان الثانوية مع اللون الأساسي. كما ترى في الصورة أعلاه، فإن لونها الأساسي هو البرتقالي، لذلك استخدمت الأزرق الداكن لإبراز هذا الجزء المهم من موقعها. وإذا نظرت إلى الألوان المتكاملة، فستلاحظ مدى التباين بين الأزرق الداكن والبرتقالي الفاتح. كما يجعل اللون البرتقالي عناصر مهمة، مثل أيقونة «إضافة إلى السلة» والشعار، أكثر وضوحا.
يساعدك النظر إلى عجلة الألوان على العثور على ألوان تعمل معا بفعالية أكبر. تقع الألوان المتكاملة في جهات متقابلة تماما، بينما تشغل الألوان الأساسية الثلاثة رؤوس مثلث.
اختر لون الخلفية
اختيار لون الخلفية قرار مهم، لأن خلفية الموقع تشغل نظريا مساحة أكبر من أي لون آخر. ومع ذلك، فالاختيار سهل لأنه ينحصر فعليا في خيارين.
يمكنك لتوحيد الهوية استخدام نسخة أخف من اللون الأساسي لخلفية الموقع، مع طبقة بيضاء أو رمادية فوق الخلفية لعرض النص.
أو يمكنك تصميم الموقع كله بلون أبيض مائل إلى الرمادي، وهو خيار شائع جدا.
اختر لون الخط
الخطوة الأخيرة في رحلتك الملونة لتصميم الموقع هي تحديد لون الخط. قد تختار الطريق الأسهل وتستخدم الأسود، لكن البحث على الإنترنت سيبين لك أن الحروف السوداء ليست شائعة كما تظن. لماذا؟
قد تسبب الحروف السوداء على خلفية بيضاء إجهاد العين بسبب التباين الكامل بينهما. وإذا صعبت قراءة الموقع على الزائر، انخفض احتمال نقره على الروابط والأيقونات كثيرا.
أما الروابط والمعلومات المهمة، فينبغي استخدام حروف ملونة واضحة وجذابة لها. لذلك يمكنك اختيار الرمادي للنص كي تضفي على موقعك مظهرا ألطف وأكثر جاذبية.
لا توجد مساحة كبيرة لتجربة الألوان التي تفكر فيها واختبارها، لكن يمكنك تجربة مخطط تراه مناسبا مرة على الموقع، وملاحظة مدى جذبه لانتباه الزوار.
انظر مثلا إلى الصورة أدناه، وهي صفحة من موقع Roshdmarket. تظهر الصورة استخدام الموقع درجة رمادية ألطف للخط. وهذه التركيبة أقل حدة بكثير من التباين بين الأسود والأبيض، وتتيح تقديم مشهد أهدأ للزائر وتقليل إجهاد العين.
مصادر مفيدة لمساعدتك على العثور على الألوان واختيارها
إذا كنت تقرأ هذا المقال، فالأرجح أنك تبحث عن أفضل لون لتصميم موقعك. لكن من أين تبدأ؟
حتى عندما تكون عجلة الألوان أمامك، قد يصعب الاختيار. وغالبا ما تختار ألوانا تبدو مختلفة تماما عند تطبيقها. وحتى إذا وجدت لونا تحبه، فستحتاج إلى لوحة ألوان تنسجم معه جيدا. لذلك لا ينتهي العمل بمجرد النجاح في اختيار اللون الأساسي.
لهذا توجد أدوات متخصصة تساعدك على اختيار تركيبة ألوان الموقع. فمثلا، يعد موقع Coolors من الأدوات التي تحتاج إليها للحصول على مخطط ألوان جاهز وتطبيقه على موقعك، بكل هذه البساطة والجاذبية.
من الأدوات العملية الأخرى لاختيار الألوان موقع Color Safe، الذي يساعدك على توليد الألوان من النوع الذي تحتاج إليه وتصفح الخيارات المتاحة، لعل لونا أو لونين يلفتان انتباهك. فمثلا، يتيح هذا الموقع بسهولة العثور على درجتين من الأحمر والأخضر تصلحان أساسا لألوان أخرى.
في المرحلة الأخيرة، بعد إتمام اختيارات الألوان وإعداد الموقع الجذاب الذي يعجبك، يحين وقت التحقق مما إذا كان مخطط ألوانه قد نجح فعلا.
هنا يمكنك الانتقال إلى موقع checkmycolours.com وإدخال عنوان موقعك، ليحلله ويقدم ملاحظات تقنية ويبين مدى ملاءمة ألوانه لمن لديهم عمى ألوان أو شاشات ضعيفة الجودة.
خلاصة كيفية اختيار ألوان الموقع
توجد خطوات ينبغي اتباعها عند اختيار ألوان موقعك:
- اختر اللون الأساسي: اختر لونا يتوافق مع حيوية منتجك أو خدمتك وأسلوبهما.
- اختر ألوانك الثانوية: اختر لونا أو لونين ثانويين يكملان اللون الأساسي، ويفضل أن يجعلاه أكثر لفتا للنظر.
- اختر لون الخلفية: اختر لخلفية الموقع لونا لا يتباين تباينا كاملا مع اللون الأساسي.
- اختر لون الخط: اختر للنص لونا لا يتعب عين المشاهد. فمثلا، لا يعد الخط الأسود على خلفية بيضاء خيارا جيدا، لأن اللونين متقابلان تماما.
أخيرا، لا تقلق بشأن اختيار أفضل لون والتركيبة المناسبة لموقعك، فهناك مواقع تقدم المشورة والإرشاد وتسهل عليك الاختيار. ومن هذه المواقع والأدوات:
- موقع Coolors من الأدوات التي تساعدك على الحصول على مخطط ألوان جاهز وتطبيقه على موقعك.
- موقع Color Safe يساعدك على توليد الألوان التي تحتاج إليها، وتصفح الخيارات المتاحة لعل لونا أو لونين يلفتان انتباهك.
- موقع checkmycolours.com لتحليل موقعك بعد الانتهاء من تصميم ألوانه وتقديم ملاحظات تقنية.
كلمتنا الأخيرة أننا نأمل أن تجد هذا المقال مفيدا، ويسعدنا أن تطرح أسئلتك التي لم تجد لها إجابة في قسم التعليقات أدناه.