تتعدد المشاكل التي تواجه أى مصمم مواقع ومن بين هذه المشاكل هناك واحدة يمكن أن تكون في آخر القائمة أو ربما لن تكون موجودة على الإطلاق وهي مشكلة الألوان ، بالرغم من أن الحصول على ألوان جيدة سيمنع الموقع من أن يظهر مثل قوس قزح بالإضافة إلى أنه سيمنع استخدام الخيالات المختلفة من اللون ذاته.
هذه المقالة ستتحدث عن 7 أشياء أقوم بها لضبط الألوان في المواقع التي اعمل عليها
والتي من الممكن أن تفيد أي مصمم مواقع :
1 – ضع كل ألوانك التي ستستخدمها على لوحه ألوان :
أولاً قبل أن تكوّن موقعاً يجب عليك أن تمتلك لوحة ألوان رئيسية بها كل الألوان التي تخطط لاستخدامها في تصميم الموقع ،
هذا لا يعني أنه لا يمكنك إضافة ألوان إلى الموقع في أثناء تطويره ولكن سيساعدك ذلك على تذكر الألوان التي تمتلكها بالفعل
لكي لا يتم إعادتها بظلال مختلفة قليلاً، و من الأفضل أن لا تمتلك أكثر من 5 ألوان بالاضافة إلى اللون الأسود والرمادي والأبيض
ولكن يمكن أن توجد بعض الاستثناءات.
2 – استخدم ملفاً واحداً للألوان:
واحدة من مميزات أداة CSS هي قدرتها على فصل الأشكال إلى عدة ملفات مختلفة ودمجها وإخراجها
في صورة ملف CSS واحد، ومن المفضل وجود ملف ألوان واحد يحتوي على الألوان الرئيسية لموقعك
بالإضافة إلى أي تنوعات منهم ، هذا يساعدك في تحديد تغييرات اللون بالإضافة إلى أنه يكون مرجعاً دائماً لنوع
وعدد الألوان التي يتم استخدامها.
3 – متغيرات اللون :
إن الأفضل هو إعطاء الألوان الرئيسية في موقعك أسماءً مختلفة والتي تتطابق مع مظهر الألوان وما تدل عليه،
فمثلاً فإن اللون الأصفر لموقع McDonald’s سيحمل الاسم المخصص $mc-yellow.
اسماء الألوان في HTML مثل AliceBlue و DeepPink وباقي ال140 لون لا يحتاجون إلى أسماء مخصصة
لهم حيث أنها سهلة التذكر .
وإذا كنت تتستخدم مكتبة للألوان تحتوي على أسماء مخصصة لهم فيمكنك جعل هذه الأسماء المخصصة متساوية
مع أسماء الألوان في المكتبة مثل $mc-yellow = $yellowGold.
4 – استخدام خرائط Sass للألوان:
من بين كل النصائح المذكورة في هذه المقالة فأنا أعتبر هذه النصيحة اختيارية بالإضافة إلى أنها معتمدة على كيفية كتابتك CSS.
خرائط Sass تجعل تعيين أسماء الصفوف المختلفة للألوان المختلفة أسهل وهي مشابهة جداً للكتابة في معظم لغات البرمجة،
وكمثال إن أردت أن تعرف الوان الخلفية المستخدمة في موقعك فإن هذه هي الطريقة الأفضل والأكثر سهولة لهذا الأمر .
هذه الطريقة مفيدة خاصة للذين يكتبون على Atomic CSS.
5 – استخدام Sass من أجل التعتيم والإضاءة والظلام:
من أجل الحصول على بعض الاختلافات البسيطة للألوان الرئيسية لموقعك الالكتروني مثل الإضاءة والظلام والتعتيم ،
استخدام الأوامر الموجودة في Sass بدلاً من تخصيص شريط جديد من HEX،
فمثلاً من أجل التعتيم استخدم rgba ومن أجل الإضاءة والظلام استخدم الأوامر الخاصة بهما .
Sass يتضمن أيضاً أوامر لدمج الألوان بالإضافة إلى تعديل درجة اللون والإشباع ويمكنك استخدامها ولكنني لم أجد
أي سبب لاستخدامها في مشاريعي، بالطبع أنا أنصح بأن تعطي هذه الأوامر أسماء مخصصة لكي تجعل عملية تذكرهم أسهل.
6 – استخدام اللوحات المخصصة في أدوات المطور :
أدوات المطور في كروم تأتي معها أداة رائعة لاختيار الألوان،
فهي يمكنها مساعدتك ليس فقط في اختبار الألوان في الخلفية والحواف والنص الكتابي
بل أنها مفيدة للغاية لوضع ألوان الموقع الرئيسية من الموضوع الخاص بي إلى لوحة الألوان المخصصة
في أدوات المطور والتي تسمح بتحديث الألوان بضغطة زر واحدة.
7 – الصبغات لـ Atom :
و أخيراً وليس آخراً هذه الحزمة المذهلة من Atom ( أنا لا أعلم إن كانت متوفرة ل Sublime Text )،
إن الصبغات توضح تدرج اللون بالاضافة أنها تصبح مفيدة جداً عندما يتم استخدامها مع Sass.
كما انها تقوم بتوضيح ألوان Sass مع إظهار أي لون مشابه له مهما كان مكانه في الشفرة حتى إن كان في ملف آخر ،
كما أنها تغير الألوان مباشرة اعتماداً على التعتيم أو على أوامر Sass المطبقة عليها.
شكراً لكم لأخذ الوقت لقراءة هذه المقالة وأتمنى أنها قد ساعدتك في تطوير الويب واختيار الألوان الخاصة بك،
لا تشعر أنه يجب عليك تطبيق كل نصيحة لسير العمل الخاص بك، إن هذه مجرد إرشادات بسيطة لأي مصمم مواقع ،
و أحب أن أعرف إن كنتم تملكون خدعاً وتظنون أنها أفضل من أي النصائح المذكورة سابقاً.
هل هنالك نصائح اخرى لإدارة الألوان؟ شاركنا برأيك في خانة التعليقات اسفل المقال.
