اقرأ في هذا المقال
في البداية قبل التعرف على أدوات اختيار ألوان العلامات التجارية على مواقع الويب الخاصة بنا، علينا أن نتعرف على التفاصيل حول اختيار الألوان ما الذي سنقوم به. هل سنستخدم خمسة ألوان للعلامة التجارية أم سنبقيها أبسط؟ هل أنت شخص حدسي أم أنك شخص علمي قائم على البحث؟ أم أنه بالنسبة لك لا بأس من خلط الاثنين. من ثم نبدأ باختيار الأدوات المناسبة
أدوات لاختيار ألوان العلامة التجارية
هناك بعض الأدوات والتطبيقات المجانية الرائعة عبر الإنترنت والتي يمكن أن تساعدك في رحلة استكشاف الألوان.
أدوات شخصية تجارية لاختيار الوان العلامة التجارية
قد يساعدك أن تبدأ بتحديد شخصية علامتك التجارية وفكر في الألوان التي تناسب تلك الشخصيات. على سبيل المثال، قد يكون “Maker” باللون البرتقالي، وقد يكون لون “Healer” باللون الأخضر، وقد يتجه “Professional” نحو اللون الأزرق.
أدوات تساعد على انتقاء الألوان
عندما ذكرت أعلاه عن العثور على الألوان في مواقع المنافسين؟ إذا عثرت على موقع ويب بلون تحبه ولم تكن متأكدًا من كيفية حفظه، فهذا أمر سهل حقًا. ما عليك سوى استخدام أداة خاصة مثل (ColorPick Eyedropper). إنها وظيفة إضافية لمتصفح (Chrome) تتيح لك تحديد قيم الألوان من صفحات الويب من خلال النقر عليها باستخدام أداة قطارة صغيرة.
أدوات تعتبر كمولدات لوح الألوان
أداة رائعة أخرى لمساعدتك في اختيار ألوان العلامة التجارية هي مولدات لوحة الألوان. تساعدك هذه التطبيقات على أخذ عينات من الألوان من التصميمات الحالية، والتنقل بين الأفكار والتعرف على ألوانك المثالية.
فيما يلي 3 أدوات شائعة للوحة الألوان عبر الإنترنت يمكن أن تساعدك على البدء:
- Coolors.co: هو تطبيق عبر الإنترنت يسمح لك بالضغط على مفتاح المسافة على لوحة المفاتيح للتنقل بين اللوحات المقترحة عشوائيًا. يمكنك أيضًا اختيار ألوان العلامة التجارية من صورة، وحفظ لون واحد تراه وإنشاء المزيد من الألوان لتتماشى معه، وحفظ / تصدير اختياراتك النهائية عند الانتهاء.
- Canva / color-palette: هو تطبيق موقع ويب بسيط حيث يمكنك تحميل صورة ويقوم تلقائيًا بإنشاء خمسة ألوان متطابقة. ثم يمكنك فقط تدوين الرموز السداسية للألوان التي تريدها. إنه سريع وسهل. يمكنك أيضًا الانتقال من هناك مباشرةً إلى تطبيق (Canva) والبدء في إنشاء رسومات ومستندات باستخدام لوحة الألوان الجديدة.
يصف Colormind.io نفسه بأنه “منشئ مخطط ألوان يستخدم التعلم العميق. يمكنه تعلم أنماط الألوان من الصور الفوتوغرافية والأفلام والفنون الشعبية “.
إنها كاملة الميزات قليلاً، مع لوحات ألوان ملهمة يومية ومحتوى تعليمي حول اللون وكيفية تطبيقه على الصفحات والتصميم.
يمكن لـ (Colormind) أيضًا اختيار الألوان من الصورة. لذا تأكد من حفظ الصور التي تلهمك لأنها ستمنحك نقطة انطلاق رائعة عند استخدام مولدات لوحة الألوان مثل هذه.
اختبار عمى الألوان
عندما تقوم بتضييق خيارات الألوان الخاصة بك المرجح أن تقوم باختيارها من بين الكل وتكون مستعدًا لنقلها عبر الإنترنت، عليك أن تتأكد من اختبار صفحتك بحثًا عن مشكلات عمى الألوان قبل الإطلاق حيث ستندهش من الألوان التي ستكون غير مقروءة لبعض الزوار.
ليس كل شخص لديه رؤية مثالية 20/20. سهولة الاستخدام هي مفتاح القدرة على خدمة المزيد من الأشخاص. قم بزيارة إرشادات تصميم الويب لـ (Color Blind Audience) للحصول على أفضل الممارسات حول كيفية التصميم لإمكانية الوصول.
توثيق ألوان علامتك التجارية
بمجرد الانتهاء من كل الأعمال المتعلقة بتحديد الألوان التي تناسب علامتك التجارية، من المهم ألا تفقد هذه المعلومات. اقض بعض الوقت في إنشاء دليل العلامة التجارية لإيواء هذه التفاصيل وغيرها من تفاصيل العلامة التجارية المهمة مثل الخطوط والشعارات ونسخ الصوت.
كيفية تطبيق ألوان العلامة التجارية على موقع الويب الخاص بك
لقد اخترت مجموعة الألوان المثالية، والآن تحتاج إلى تحديد المكان الذي يجب أن تذهب إليه على موقع الويب الخاص بك. فيما يلي بعض المناطق الشائعة حيث ستذهب ألوانك الجديدة، جنبًا إلى جنب مع توصياتي بشأن الألوان الأكثر ملاءمة لكل منها.
تطبيق الألوان على زر الشراء
التعريف: يؤدي زر الشراء إلى مكان يمكن للقارئ الخاص بك إجراء عملية شراء فيه بالفعل، مثل صفحة عربة التسوق أو نموذج الدفع. عادةً ما تكون الصياغة هي “اشترِ الآن”.
اللون: استخدم اللون الأساسي لعلامتك التجارية أو اللون الثانوي الذي يسهل رؤيته ويبرز جيدًا على الصفحة. لذلك يمكن أن تكون مظلمة على صفحة فاتحة. أو مشرقة جدا.
أنت لا تريد أن يتم التغاضي عن هذا النوع من الأزرار أبدًا، لذا كن جريئًا. البرتقالي أو الأرجواني أو الأزرق الساطع خيارات جيدة.
تطبيق الألوان على الزر الإعلامي
التعريف: زر المعلومات هو الزر الذي ينقلك إلى صفحة تحتوي على معلومات إضافية حول موضوع ما. لذلك بدلاً من التوجيه مباشرةً إلى عربة التسوق حيث يمكن للعميل شراء منتجك، فقد يؤدي ذلك إلى صفحة مقصودة حيث يمكنهم معرفة المزيد عنها. عادةً ما تكون الصياغة هي “معرفة المزيد”.
اللون: يمكنك استخدام لونك الأساسي هنا أيضًا، أو استخدام لون ثانوي، ربما يكون أخضر أو أزرق فاتح. ستستخدم العديد من المواقع لونًا خالصًا لأزرار الشراء الرئيسية ولزر “المعلومات” الثانوي، ستستخدم زرًا أبيض مع مخطط أسود. لا يزال هذا يبدو مرئيًا ولكن ليس بارزًا مثل الزر الصلب. يمكنك أيضًا ببساطة استخدام رابط نصي لجميع عبارات “معرفة المزيد” التي تحث المستخدم على اتخاذ إجراء وترك أشكال الزر فقط لأهم الإجراءات المدرة للدخل.
تطبيق الألوان على الروابط
التعريف: الروابط الموجودة داخل الفقرات أو مجموعات النص تسمى “الروابط المضمنة”. يمكنك أيضًا الحصول على روابط في العنوان.
اللون: تحتوي معظم صفحات الويب افتراضيًا على لون أزرق فاتح لجميع هذه الأنواع من الروابط وعليك بذل جهد متعمد لتغيير ذلك إلى لون مختلف. ستعمل ألوانك الثانوية أو الثلاثية بشكل جيد مع ألوان الارتباط وتقطع شوطًا طويلاً نحو ترسيخ علامتك التجارية على موقع الويب الخاص بك.
تطبيق الألوان على نص العنوان
التعريف: هذا لا يحتاج إلى شرح. إنها عناوين نصية أو علامات <h1> أو <h2> أو <h3> على موقعك على الويب.
اللون: يعمل الرمادي والأسود الغامق بشكل رائع ولكن في بعض الأحيان يبدو رائعًا إذا قمت بتغيير العناوين إلى لون آخر. فقط تأكد من عدم استخدام لون الرابط في العناوين الرئيسية وإلا فلن يعرف الزائرون ما هو قابل للنقر وما هو غير قابل للنقر.
تطبيق الألوان على الرسومات والصور
التعريف: الأيقونات والرسومات والصور.
اللون: يمكنك تلوين أيقوناتك بأي من ألوان علامتك التجارية. يمكنك أيضًا إضافة لون إلى المربعات التي تحتوي على تراكبات نصية أو إلى الصور.
و الآن ما عليك سوى الحصول على دفتر ملاحظات وتدوين أفكارك أثناء التعمق في هذه العملية. بعد توثيق كل الألوان الجديدة المفضلة لديك، يمكنك البدء في تطبيقها على موقع الويب الخاص بك.
