طريقة اختيار أفضل الألوان لموقعك على الويب

اختيار لون موقعك الالكتروني

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

ثلاث استراتيجيات بسيطة لاستخدام الألوان على موقعك على الإنترنت

  • أين تجد الألوان التي تحبها وكيفية العثور على “رمز اللون” الخاص بها بالضبط؟
  • كيفية تطبيق رمز الألوان هذا على موقعك الإلكتروني؟
  • أمثلة لمواقع جيمدو الأخرى باستخدام الألوان بطرق سهلة؟

فكّر في الإقران اللوني ، وليس لوح الألوان. هناك على موقعك الالكتروني

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

اختيار الألوان المناسبة لأعمالك

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

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

تعكس شخصية علامتك التجارية

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

ثلاثة استراتيجيات لون موقع الويب للمبتدئين

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

1. استخدم لونًا واحدًا زاهيًا بالأبيض والأسود.

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

عندما تختار لونًا مميزًا ، إليك بعض الأماكن التي قد تستخدمها في موقعك على الويب:

  • العناوين
  • Hyperlinks
  • Navigation القوائم
  • أزرار
  • الخطوط الأفقية

2. استخدام اللون الأساسي والثانوي

إذا كان لون واحد لا يبدو كفاية ، اختر اثنين. ولكن بدلاً من استخدام كلا اللونين بشكل متساوٍ ، فإن الخدعة هي اختيار واحد على أنه اللون “الأساسي” والأخرى ثانوية ، مما يعني أنك ستستخدمها كثيرًا في كثير من الأحيان. بهذه الطريقة تكمل الألوان بدلاً من التنافس مع بعضها البعض.
ألق نظرة على موقعي جيمدو أدناه. إنها مواقع مختلفة تمامًا ، ولكنها في الواقع تستخدم ألوانًا متشابهة.
في الموقع الأول ، لاحظ كيف تستخدم Laurène صورة خلفية تعكس الألوان الفيروزية والوردية في شعارها. ثم استخدمت الفيروز (لونها الأساسي) في الملاحة وعناصرها الرئيسية أيضًا. على الجانب الآخر من الموقع ، يجعل اللون الوردي مظهرًا عرضيًا لربط كل شيء معًا ، لكنه لا يظهر كثيرًا مثل الفيروز.

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

3. اعرض ألوانك من خلال الصور الفوتوغرافية

معظم تغيرات اللون التي نتحدث عنها هنا يمكنك القيام بها في Jimdo Style Editor ، عن طريق تغيير ألوان الخلفية ، والعناوين ، وما إلى ذلك. ولكن إذا كنت في مجال التصوير الفوتوغرافي ، يمكنك أيضًا استخدام الصور على موقعك على الويب لإخبار “قصة” الألوان وتكمل هوية علامتك التجارية.
على سبيل المثال ، ألق نظرة على موقع Le Velo ، أدناه. أنشأ صاحب متجر الدراجات Senad ما هو أساسًا موقع ويب أبيض وأسود ، حيث أن خلفيته بيضاء ونصه أسود. يأتي لون موقعه الإلكتروني بالكامل من صوره ، التي تشترك جميعها في نفس اللون الأزرق / الأخضر والبني. رائع ، صحيح؟

يتطلب الأمر بعض الانضباط لاستخدام ألوان متناسقة في صورك. لسحبها ، يساعدك ذلك في معرفة كيفية تحرير صورك أو على الأقل وضع فلاتر متناسقة عليها (يمكنك تجربة ذلك باستخدام محرر صور Adobe الجديد الخاص بـ Jimdo).
فيما يلي مثال آخر لموقع جيمدو الذي يستخدم لوحة ثلاثية الألوان ودمج تلك الألوان من خلال جميع صورها الفوتوغرافية أيضًا. أحب الطريقة التي يستخدم بها الفنان سامي غرة لونًا أخضرًا ورديًا وأصفرًا متميزًا في جميع أنحاء موقعها. تشير كل صورة على الأقل إلى تلك الألوان. تحقق من الصفحة الخاصة بها أيضًا ، وستلاحظ أنه حتى لون شعرها وورشها الواقعية تستخدم تلك الألوان أيضًا! الحديث عن التفاني!

حسنًا ، لن تضطر إلى تغيير لون شعرك لتتناسب مع موقعك على الويب (إذا فعلت ذلك ، يُرجى إرسال صورة إلينا!) ولكن بالنظر إلى هذه الأمثلة ، نأمل أن تتعرف على مدى قوة اللون عند استخدمه باستمرار ، حتى إذا كنت تفضل استخدام القليل من الألوان هنا وهناك.
أين يمكنك الحصول على أفكار لألوان موقع الويب
الآن ، بعد أن أصبحت لديك فكرة أفضل عن إستراتيجية الألوان ، فإن الجزء الممتع هو في الواقع اختيار اللون الدقيق الذي ترغب في استخدامه. الشيء الجميل هو أن إلهام اللون هو كل شيء من حولك. فيما يلي بعض الأفكار:
ما هو رمز اللون؟ عندما ترى لونًا يعجبك ، يمكنك استخدامه على موقع Jimdo الخاص بك عن طريق البحث عن اللون RGB أو القيمة السداسية. هذه رموز فريدة تحدد اللون الدقيق الذي تبحث عنه ، وستظهر عادةً مثل RGB (26 ، 119 ، 127) أو # E82C0C. بمجرد الحصول على رمز اللون ، استخدم محرر نمط Jimdo لإعادة إنشاء اللون عن طريق لصق الشفرة في محدد الألوان.

انظر إلى ألوان المواد والعلامة التجارية التي لديك بالفعل

إذا كان لديك بالفعل شعار أو تغليف منتج أو لون تستخدمه باستمرار في عملك ، فسيكون ذلك مناسبًا بشكل طبيعي لموقعك على الويب. ربما يكون لونًا تستخدمه في أحد منتجاتك ، أو في حالة Dotty About Ice Cream ، ربما يكون لون شاحنة الآيس كريم القديمة!
يأتي لون موقع Dotty About Ice Cream مباشرة من شاحنة الآيس كريم الوردية.

إذا كان لديك بالفعل شعارًا مصممًا بشكل احترافي ، فيمكن للمصمم أن يخبرك بما هي رموز الألوان الخاصة بك. أو يمكنك تحميل ملف شعارك إلى برنامج مجاني مثل Color Code Picker وسوف يخبرك بالألوان الموجودة في شعارك.
اختر لونًا من صورة فوتوغرافية تحب
قوالب Most Jimdo لها مساحة لخلفية رأس أو صورة كاملة العرض. إذا كان لديك بالفعل صورة مثالية في ذهنك (أو وجدت واحدة على العديد من مواقع صور الأسهم المجانية المتاحة الآن) ، فإن الخطوة التالية سهلة هي اختيار الألوان لمطابقتها.

في هذا الموقع ، قمنا بتغيير شريط القوائم والأزرار لمطابقة الشجرة الصفراء في صورة الخلفية.
لمطابقة اللون في صورة ، قم بتحميل ملف صورة (أو ملف شعارك) إلى Adobe Color CC وسيقوم هذا الموقع المجاني بإنشاء لوحة ألوان لمطابقتها. حرك الدوائر على الجزء المحدد من الصورة التي تريد نسخها. هنا قمت بتحميل صورة مخزنة من Unsplash إلى برنامج Adobe لمعرفة ما إذا كان بإمكاني العثور على لون تلك الآلة الكاتبة الخضراء الجميلة.

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

سيخبرك ملحق متصفح ColorZilla بالضبط بالألوان التي تستخدمها مواقعك المفضلة. فقط اسحب الماوس فوق اللون الذي يعجبك ، وسوف يعطيك رمز اللون في الأعلى. هنا يظهر أن اللون الأصفر على موقع جيمدو هو # FCEC59.
تحقق من موارد الألوان عبر الإنترنت
هناك الكثير من مواقع الويب الممتعة لخبراء الألوان لمشاركة الألواح المفضلة لديهم ومجموعات الألوان. يوفر الكثير منهم رموز الألوان بحيث يمكنك نسخ الألوان على موقعك الخاص. فقط تذكر أن الكثير من هذه المواقع سيوفر لوحات واسعة مع 5-6 ألوان أو أكثر ، وهو على الأرجح أكثر مما تحتاج إليه. ما عليك سوى اختيار زوجين من لوحة الألوان المفضلة لديك والبدء من هناك.

حسنًا ، لقد اخترت ألوانك. ماذا الآن؟

لنفترض أنك اخترت لونًا واحدًا أو لونين تحبينه حقًا ، ولديك رموز ألوان فريدة (إما قيمة RGB أو ست عشرية) لتستخدمها. (انتظر ، ما هو رمز اللون؟ إذا فقدت هذه الخطوة ، فارجع إلى “أين يمكنك الحصول على أفكار ملونة” أعلاه أو تحقق من هذا البرنامج التعليمي الأكثر تفصيلاً حول كيفية العثور على رمز لون ، لأنه مهم لهذه القطعة التالية).
الآن عليك أن تقرر أين تريد استخدام هذا اللون على موقع الويب الخاص بك. في Jimdo’s Style Editor ، يمكنك تعيين لون النص والوصلات والقوائم والأزرار والخطوط الأفقية والمزيد. يحتوي كل نوع من العناصر تقريبًا على إعداد لوني يمكنك ضبطه في محرر الأنماط ، بما في ذلك عناصر عنصر المتجر ونماذج جهات الاتصال.
إذا كنت تريد ضبط لون “عناصر العناوين الكبيرة” ، على سبيل المثال ، افتح محرر الأنماط وانقر على “عنوان العنوان”. سترى خيارات التصميم مفتوحة في الشريط الأسود في الجزء العلوي من الشاشة. انقر على مربع اللون لفتح قائمة الألوان. ثم ، أدخل رمز اللون في المربع المميز باللون الأحمر أدناه. إذا قمت بكتابة التعليمات البرمجية السداسي ، سيقوم نظام Jimdo تلقائياً بتحويلها إلى رمز RGB ، ولكن النتائج ستكون هي نفسها.
أدخل رمز اللون الخاص بك في منتقي الألوان.
الآن سيظهر هذا اللون دائمًا في الصف السفلي من لوحة الألوان الخاصة بك بحيث يمكنك استخدامها بشكل متكرر للعناصر المختلفة.
نصيحة احترافية: هل تريد تغيير لون رموز الوسائط الاجتماعية لتتطابق؟ استخدم موقعًا مثل iconmonstr لإنشاء رموز مجانية برمز الألوان الخاص بك ، ثم تحميلها إلى موقعك على الويب كعناصر Photo.

تعيين نظام ألوان لموقعك الإلكتروني بالكامل

إذا أردت ، يمكنك تكرار هذه الخطوة لكل نوع من أنواع العناصر التي ترغب في تغييرها. أو يمكنك القيام بذلك بشكل أسرع عن طريق تطبيق هذا اللون على موقع الويب الخاص بك بالكامل في وقت واحد. وإليك هذه الخدعة:
افتح محرر الأنماط وقم بتغيير مفتاح التبديل حسب النمط إلى وضع “إيقاف التشغيل”.
عندما تفعل ذلك ، سترى خيار تحديد نظام الألوان لموقعك الإلكتروني بأكمله.
انقر فوق المربع Color Colour Scheme ، ثم أدخل رمز اللون في منتقي الألوان كما فعلت من قبل.
اضغط على “اختيار” ، وسيظهر هذا اللون في جميع أنحاء موقعك على الويب – في تنقلاتك وتذييلاتك وروابطك وخطوطك الأفقية وغير ذلك الكثير. تعتمد الأماكن الدقيقة التي سيظهر عليها اللون على النموذج الذي تستخدمه ، لذا حاول أن تجربها وشاهد ما تفكر فيه! إذا كنت ترغب في ذلك ، فاضغط على “حفظ”. إذا لم تقم بذلك ، فقط حدد “تراجع”.
بمجرد تعيين “نظام الألوان” ، يمكنك دائمًا قلب مفتاح التبديل إلى وضع “التشغيل” وضبط العناصر الفردية حسب رغبتك.
استخدم مفتاح التبديل Style by Element لتحديد نظام ألوان لموقعك بالكامل
نصيحة للمحترفين: هل تريد تشغيلها بأمان للبدء؟ ابدأ بتغيير لون عناصر العنوان ، والخطوط الأفقية ، والأزرار ، وربما في قائمة التنقل. سيضيف ذلك لونًا ممتعًا إلى موقعك على الويب دون المخاطرة به. بعد ذلك ، عندما تشعر بأنك جاهز ، يمكنك محاولة تغيير المزيد من العناصر ومعرفة كيف تبدو!

اللون والنص والتباين

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

استنتاجات الألوان

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

أي نصائح أخرى للألوان ستشاركها مع مستخدمي Jimdo؟ اسمحوا لنا أن نعرف في التعليقات.

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

ثلاث استراتيجيات بسيطة لاستخدام الألوان على موقعك على الإنترنت

أين تجد الألوان التي تحبها وكيفية العثور على “رمز اللون” الخاص بها بالضبط
كيفية تطبيق رمز الألوان هذا على موقعك الإلكتروني
أمثلة لمواقع جيمدو الأخرى باستخدام الألوان بطرق سهلة

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

Leave a Reply

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *