اذهب إلى المحتوى

اختيار أفضل المجموعات اللونية للمواقع التي تصممها


ولاء شبلاق

دائمًا ما هنالك خطوة واحدة تود من زوار الموقع الخاص بك اتخاذها بنظرك تكون هي الخطوة الأهم. قد تكون متعلقة بزر الاشتراك للموقع الخاص بك، أو زر المتابعة أو حتى زر الشراء.

بغض النظر عن الوظيفة المرجوة من ذلك الزر، تذكر دائمًا أن نقر زوار الموقع على الزر أو عدمه يعتمد على طبيعة الشعور الذي يحظون به أثناء تواجدهم على موقعك.

للاستزادة ربما تود القراءة عن إدراك الألوان، وعلم نفس الألوان، أو المزيد عن كيف تحفز المجموعات اللونية إدراك الإنسان.

1. موقع Pinterest زاخر بالكثير من اللون الأحمر

بلا شك، يعد اللون الأحمر اللون الأكثر حرارة. إذا تفقدت المجموعة اللونية الخاصة بموقع Pinterest ستلاحظ على الفور أن اللون الأحمر هو اللون الأساسي.

يرتبط اللون الأحمر عادةً بالحب، وهو لونٌ ديناميكيٌ وقوي، هذا يضعك في جوٍ عالٍ من الحماس بخصوص أي شيء يتمركز حول هذا اللون.

01.jpg

غالبًا ما يُرى اللون الأحمر في عروض التصفيات والمبيعات، حيث تضفي شدته شعورًا ملحًا على من يرى العروض بضرورة إلزامية الشراء.

على الرغم من أن هذا اللون الحاد يمكن أن يترك انطباعًا حماسيًا ومشجعًا للزوار، كن حذرًا دائمًا. الكثير من اللون الأحمر يمكن أن يُقصيهم تمامًا عن نطاق رد الفعل المطلوب.

يمكنك استخدام اللون الأحمر في نظام الألوان الخاص بك للتركيز على تصميم الويب خاصتك. امزجه في خليطٍ لونيٍ من اللون الأبيض أو الرمادي أو الأزرق الفاتح أو الفضي.

مثال رائع لاستخدام اللون الأحمر في تصميم الويب

02.png

أتحدى أن تكون على علمٍ بهذا

اقتباس

ترى عين الإنسان اللون الأحمر عندما تنظر إلى ضوء بطول موجي يتراوح بين 630 و700 نانومتر. يُطلق على الأشعة الضوئية التي تتعدى هذا النطاق بالأشعة تحت الحمراء، وهي لا تُرى بعين الإنسان، بالرغم من ذلك يمكن استشعارها كحرارة. -المرجع

مجموعة لونية جذابة بإضافة اللون الأحمر

03.png

10 أشياء مرتبطة باللون الأحمر

  1. الدم
  2. الحرب
  3. النار
  4. الرجولة
  5. الشغف
  6. الإغراء
  7. الغضب
  8. القوة
  9. الطاقة
  10. الشجاعة

إحداثيات اللون الأحمر حسب نظام الألوان

  • Hex Triplet: ‏FF0000‏#
  • RGB: ‏(0, 0, 225)

2. موقع Amazon يحتفل بقوة اللون البرتقالي

اللون البرتقالي لونٌ حار، لكن ليس بحدة اللون الأحمر فهو يوحي بالدفء أكثر من الحرارة.

04.jpg

هذا اللون النابض بالحياة والمليء بالحيوية، يحفز الناس على فعل الشيء بدلًا من دفعهم أو إجبارهم عليه بصورة عاجلة. يعد اللون البرتقالي عدوانيًا أحيانًا في الطريقة التي يشجع بها إلى اتخاذ إجراءٍ مثل الشراء أو الاشتراك أو البيع أو المتابعة.

يُوصى باستخدام اللون البرتقالي إذا كنت ترغب في ترك شعورٍ بالتحفيز والبهجة والإبداع والحماس الكامل للأشخاص بعد زيارتهم للموقع.

كيف ينبغي عليك استخدام اللون البرتقالي

05.png

أتحدى أن تكون على علمٍ بهذا

اقتباس

لون الويب البرتقالي المعرف كـ FFA500، هو اللون الوحيد المسمى والمعرف في CSS بينما ليس معرفًا في HTML 4.01. -المرجع

مجموعة لونية جذابة بإضافة اللون البرتقالي

06.png

10 أشياء مرتبطة باللون البرتقالي

  1. التفاؤل
  2. العزم
  3. الحريق
  4. التخذير
  5. الخريف
  6. الأديان
  7. قوة الاحتمال
  8. التعاطف
  9. موسم الهالوين
  10. الحياة

إحداثيات اللون البرتقالي حسب نظام الألوان

  • Hex Triplet: ‏FF7F00‏#
  • RGB: ‏(0, 127, 225)

3. اللون الأزرق في موقع Facebook يُشعرنا بالأمان

07.jpg

ستجد العديد من المواقع التجارية والشركات تستخدم درجات اللون الأزرق. هذا اللون يجعلنا نفكر في شيءٍ مُحكمٍ وآمنٍ ومُعتمد ومليءٍ بالخبرة.

لذلك، ليس من المفاجئ أن كل مشروعٍ تجاريٍ يهتم بشعور العملاء على المدى البعيد يفضل استخدام اللون الأزرق.

يخلق اللون الأزرق شعورًا مُخالفًا تمامًا عن اللون الأحمر، فالأزرق يوحي بالهدوء ومن هنا فلا يجب أن تقلق بشأن استخدامه أكثر من اللازم. يمكنك نثر اللون الأزرق كيفما تشاء في تصميم الويب خاصتك.

كيف ينبغي عليك استخدام اللون الأزرق

08.png

أتحدى أن تكون على علمٍ بهذا

اقتباس

أُجريت دراسة في ألمانيا نشرت عام 2009 وجدت أن اللون الأزرق لونٌ مفضلٌ لـ 46% من الذكور و44% من الإناث. -المرجع

مجموعة لونية جذابة بإضافة اللون الأزرق

09.png

10 أشياء مرتبطة باللون الأزرق

  1. الصدق
  2. الصداقة
  3. السحر
  4. الأولاد
  5. الجليد
  6. النبل
  7. الشتاء
  8. الشرطة
  9. السماء
  10. الحياة

إحداثيات اللون الأزرق حسب نظام الألوان

  • Hex Triplet: ‏#0000FF
  • RGB: ‏(255, 0, 0)

4. اللون الأخضر في موقع Groupon يضفي صفة القوة الجماعية

تشعر بالتفاؤل الآن؟ لنخمّن -كنت تنظر إلى شيءٍ أخضر؟ ربما كنت تنظر إلى نباتٍ أخضر، بما أنك تشعر بالهدوء والتفاؤل.

10.jpg

أي شخصٍ مرتبطٍ بالحياة الخضراء أو أي أنشطةٍ بيئيةٍ من المرجح أن يستخدم اللون الأخضر على الأقل في بعض الأجزاء خلال مرحلة التصميم.

ألقِ نظرة على ورقة 100$. إنها خضراء! مواقع أخرى مثل Groupon تتبنى اللون الأخضر في علامتها التجارية، كونها تتعامل مباشرةً مع المال.

اللون الأخضر منعشٌ ومريحٌ للغاية، هذا يولّد شعورًا بالتوازن والإلهام. ويعكس التوازن والانسجام في التصميم.

استخدام رائع للون الأخضر في تصميم الويب

11.png

أتحدى أن تكون على علمٍ بهذا

اقتباس

في بعض اللغات، كاللغة الصينية القديمة والتايلاندية واليابانية القديمة والفيتنامية نفس الكلمة التي تعبر عن اللون الأخضر تستخدم للتعبير عن اللون الأزرق أيضًا. لا يوجد مصدرٌ طبيعيٌ للأصباغ الغذائية الخضراء المتفق عليها من قبل إدارة الغذاء والدواء الأمريكية. - المرجع

مجموعة لونية جذابة بإضافة اللون الأخضر

12.png

10 أشياء مرتبطة باللون الأخضر

  1. المال
  2. الطمع
  3. النمو
  4. الحسد
  5. الطبيعة
  6. الربيع
  7. الصحة
  8. الشباب
  9. العشب
  10. الأمل

إحداثيات اللون الأخضر حسب نظام الألوان

  • Hex Triplet: ‏#00FF00
  • RGB: ‏(0, 255, 0)

5. موقع Yahoo ينثر الكثير من اللون الأرجواني في شعاره

13.jpg

غالبًا ما يوصف اللون الأرجواني بكلماتٍ مثل الخيال والإبداع والوقار والنبل والوفرة. ترتبط درجات الظلال الأرجوانية بالربيع والعاطفة القوية، في حين ترتبط الدرجات الداكنة بالرفاهية والثراء.

يستخدم اللون الأرجواني بتنوعٍ في الجمال والموضة ومنتجات الملابس، لما له من تأثيرٍ كبيرٍ في إضفاء الهدوء والسكينة أكثر من أي لون آخر.

كما ويعد لونٌ أنثويٌ وعاطفيٌ أكثر من كونه لونٌ ذكوري. عند النظر إلى أي شيءٍ أرجوانيٍ، يشعر الكثيرين بأنه يبدو مصطنعًا، نظرًا لندرة وجوده في الطبيعة.

تمامًا مثل اللون الأحمر، يضيف اللون الأرجواني تأثيرٌ قويٌ لا يُقاوم ويشكل بعض الضغط على الأشخاص لاتخاذ ردة فعل. لذا سيكون من الحكيم الجمع بين اللون الأرجواني وأي لونٍ آخر مثل الأسود والأبيض.

استخدام رائع للون الأرجواني في تصميم الويب

14.png

أتحدى أن تكون على علمٍ بهذا

اقتباس

في أبريل 2007، وُضع مقترحٌ للعلائق يفترض أنها تحتوي على أصباغ شبكية أرجوانية بدلًا من الكلوروفيل، لاستخراج الطاقة من الشمس. إن كان الأمر كذلك، مساحاتٌ شاسعةٌ من المحيطات والسواحل ستظهر باللون الأرجواني، وهذا ما يسمى بفرضية الأرض الأرجوانية. -المرجع

مجموعة لونية جذابة بإضافة اللون الأرجواني

15.png

10 أشياء مرتبطة باللون الأرجواني

  1. الثروة
  2. الملكية
  3. النبل
  4. الأناقة
  5. العاطفة
  6. الاصطناع
  7. الغرابة
  8. الروحانية
  9. الترف
  10. الأنوثة

إحداثيات اللون الأرجواني حسب نظام الألوان

  • Hex Triplet: ‏#800080
  • RGB: ‏(128, 0, 128)

6. استخدام عبقري للألوان المحايدة في موقع 1WD's

عادةً ما تستخدم الألوان المحايدة مثل الأبيض والأسود والرماديات الفاتحة والداكنة كخلفيات في التصاميم مع إضافة ألوان أكثر قوةٍ وسطوع.

16.jpg

ألقِ نظرةً على موقع 1stwebdesigner – 1WD. هناك استُخدم القليل من اللون البرتقالي كونه لون قوي وساطع -لكن فقط في مزيجٍ جيدٍ مع الرمادي الداكن والفاتح. والأبيض بالتأكيد (ما هو لون الخلفية في الموقع؟)

تمامًا كحقيقة أن العصافير دومًا ستطير، فاللون الأسود يعبر دومًا عن الحداثة والقوة والأناقة. في حين أن اللون الرمادي هو لونٌ محايد، يعبر عن أشياء هادئةٍ وغير مرئيةٍ مثل الظلال.

إذا كان اللون الرمادي يبدو متّسخًا في بعض الأحيان، فعلى العكس سيولد اللون الأبيض تأثيرًا مُعاكسًا. يعبر اللون الأبيض عن الرحابة والانفتاح والبساطة.

استخدام رائع للون الأبيض في تصميم الويب

17.png

أتحدى أن تكون على علمٍ بهذا

اقتباس

في التصوير الرقمي، تعبر كلمة monochrome -التصوير الأحادي- عن التقاط المستشعر للظلال السوداء، أو عن عملية المعالجة اللاحقة لصورةٍ ملونةٍ تَظهر فقط درجة السطوع المتوقعة من خلال جمع قيم القنوات المتعددة لإظهار الصورة بتدرجات رمادية. -المرجع.

مجموعة لونية جذابة بإضافة اللون الأرجواني

18.png

10 أشياء مرتبطة بالألوان المحايدة

  1. القوة
  2. الأناقة
  3. الفراغ
  4. النعومة
  5. الجنة
  6. السلام
  7. البراءة
  8. التشاؤم
  9. الكآبة
  10. الملل

إحداثيات اللون الأرجواني حسب نظام الألوان

اللون الأسود:

  • Hex Triplet: ‏#000000
  • RGB: ‏(0, 0, 0)

اللون الرمادي:

  • Hex Triplet: ‏#808080
  • RGB: ‏(128, 128, 128)

اللون الأبيض:

  • Hex Triplet: ‏FFFFFF#
  • RGB: ‏(255, 255, 255)

والآن، ما هو لونك المفضل؟

ما الشعور الذي يمنحك إياه لونك المفضل؟ تطرقنا للحديث عن أكثر 5 ألوان شيوعًا. الآن حان دورك لتختبر تأثير الألوان على الحسّ الإنساني وكيف يمكن دمجها في مجموعات لونية مؤثرة في صفحات الويب التي تقوم بتصميمها.

ترجمة وبتصرف للمقال Choosing the Best Color Scheme for the Websites You Design لصاحبه Editorial Team


تفاعل الأعضاء

أفضل التعليقات

لا توجد أية تعليقات بعد



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...