قبل اعتماد ألوان موقعك وخطوطه، ضعها في فقرة وزر ونموذج. في هذا الدليل ستجد لوحة افتراضية بقيم محددة، ومقارنة تباين محسوبة، والفقرة العربية نفسها بخطّين؛ استخدمها لفهم الاختبار ثم كرره بمحتواك وهويتك.
ابدأ من طبيعة العمل والجمهور، ثم حوّل اختياراتك إلى قواعد يستطيع المصمم ومحرر المحتوى والمطور تطبيقها. اسم اللون ووظيفته، وتركيباته المعتمدة، وأوزان الخط المستخدمة تمنع اختلاف التنفيذ بين الصفحات.
قبل اختيار الألوان والخطوط: صف العلامة بوضوح
اكتب وصفًا قصيرًا لمن تخدمه وما يحتاج إلى الشعور به عند التعامل معك. «شركة استشارات للمصانع تريد شرح خدمات معقدة بوضوح» وصف أنفع من «علامة عصرية واحترافية». الوصف الأول يوجّه كثافة المعلومات وطبيعة الصور واللغة إلى جانب الشكل.
اختر صفات يمكن ترجمتها إلى قرارات. إذا كانت العلامة هادئة، فقد تفضّل مساحات مريحة واستخدامًا محدودًا للألوان اللافتة. وإذا كانت تقدم منتجًا ممتعًا، يمكن اختبار حضور لوني أكبر. هذه فرضيات تصميم تحتاج إلى تقييم، وليست قوانين نفسية ثابتة.
راجع السوق حتى تفهم ما يتوقعه الجمهور، دون نسخ منافس. ولا تعتمد على وصفة تقول إن لونًا بعينه يصنع الثقة أو يضمن الشراء لدى الجميع. السياق والتباين وطريقة استخدام اللون تؤثر في معناه.
ابنِ لوحة ألوان بوظائف محددة
بدل تجميع درجات تعجبك، ابدأ بما تحتاجه الواجهة. هناك لون للنص الأساسي، وخلفية للقراءة، ولون للإجراء المهم، ودرجات للفواصل والمحتوى الثانوي. وقد تحتاج أيضًا إلى ألوان لحالات النجاح والخطأ والتنبيه.
| الدور | مثال استخدام | ما تختبره |
|---|---|---|
| النص الأساسي | الفقرات والعناوين | وضوح القراءة فوق الخلفية |
| الخلفية والسطح | الصفحة والبطاقات | فصل الأقسام دون تشويش |
| الإجراء الرئيسي | زر الطلب أو الحجز | وضوح الزر ونصه وحالاته |
| المحتوى الثانوي | الوصف والملاحظات | بقاؤه مقروءًا رغم انخفاض بروزه |
| الحالات | الخطأ والنجاح والتنبيه | وجود رسالة مفهومة إلى جانب اللون |
ابدأ بعدد محدود من الخيارات وزدها عند وجود حاجة. كثرة الدرجات المتقاربة قد تجعل التمييز بينها صعبًا، وتزيد اختلاف التنفيذ بين الصفحات. وأعطِ الألوان أسماء بحسب الوظيفة مثل «نص أساسي» و«إجراء رئيسي» حتى يسهل تغيير الهوية لاحقًا دون مراجعة كل عنصر يدويًا.
اختبر التباين قبل اعتماد اللوحة
تحدد إرشادات WCAG للحد الأدنى من تباين النص نسبة 4.5:1 للنص العادي، و3:1 للنص الكبير ضمن شروط المعيار. المقصود بالنص الكبير نحو 18 نقطة بالحجم العادي أو 14 نقطة بخط عريض؛ فلا تصنّف أي عنوان صغير تلقائيًا ضمن الاستثناء.
افحص تركيبة اللون والخلفية، لا اللون منفردًا. درجة مناسبة على الأبيض قد تفشل فوق خلفية ملونة أو صورة. راجع أيضًا النصوص الثانوية ورسائل الخطأ وأسماء الحقول، فهذه معلومات يحتاجها المستخدم وليست مجرد تفاصيل زخرفية.
إذا كان لون العلامة فاتحًا جدًا للنص، يمكنك الاحتفاظ به كلون مساند واختيار درجة أغمق للاستخدامات التي تتطلب قراءة. الحفاظ على الهوية لا يستلزم استخدام القيمة نفسها في كل مكان.
مثال محسوب: متى يصبح النص مقروءًا؟
| الاستخدام | القيمة | النتيجة |
|---|---|---|
| نص أساسي في اللوحة | #16302B | لون داكن؛ اختبره مع الخلفية المختارة |
| خلفية اللوحة | #F5F3EE | خلفية فاتحة للمثال |
| لون الإجراء فوق الأبيض | #146C54 فوق #FFFFFF | نحو 6.36:1، يحقق الحد الأدنى للنص العادي |
| رمادي ضعيف فوق الأبيض | #AAAAAA فوق #FFFFFF | نحو 2.32:1، أقل من الحد الأدنى للنص العادي |
| لون مساند | #E9B96E | للزخرفة أو المساحات المساندة؛ لا تفترض صلاحيته للنص |
حُسبت النسب وفق معادلة التباين في WCAG للألوان المحددة. نجاح مثال الأخضر على الأبيض لا يثبت نجاحه فوق كل خلفية. المثال الرمادي الضعيف موجود لإظهار الفرق فقط، والنص المكافئ في الجدول يتيح قراءة معلوماته دون الاعتماد على الصورة.
اختر الخط العربي داخل فقرة حقيقية
لا تعتمد على معاينة الخط بكلمة واحدة. جهّز فقرة من محتوى موقعك تشمل حروفًا متصلة، وأرقامًا، وأقواسًا، وعلامات ترقيم، وكلمة إنجليزية إذا كان المحتوى يستخدمها. اعرضها بالحجم المتوقع على الهاتف والكمبيوتر.
راقب تمييز الحروف والكثافة والمسافة بين السطور. بعض الخطوط تصلح للعناوين أكثر من النص الطويل. وقد يبدو وزن خفيف لطيفًا على شاشة كبيرة بينما يفقد الوضوح في حجم أصغر. القرار النهائي يكون من القراءة، لا من اسم الخط أو شهرته.
إذا كان الموقع ثنائي اللغة، اختبر العربية واللاتينية معًا. هل يتقارب حجمهما الظاهر؟ هل تبقى الأرقام والأسعار واضحة؟ وهل يعمل اتجاه النص المختلط دون ارتباك؟ راجع أمثلة فعلية من الهاتف والبريد والعناوين بدل الاكتفاء بنص تجريبي.
مقارنة الفقرة نفسها بخطّين
تعرض الصورة خطي Tahoma وArial كما رُسما على جهاز Windows، بالحجم والوزن وتباعد السطور أنفسها. لاحظ أن الحجم الرقمي المتساوي لا يعطي كثافة أو حجمًا بصريًا متطابقًا للحروف.
اختر الخدمة المناسبة لمشروعك، وراجع تفاصيلها قبل إرسال الطلب. يشمل المثال 3 صفحات، ويمكن لفريقك تعديل المحتوى بعد التسليم.
الفقرة مثال للاختبار وليست وصفًا لباقة. قارن تمييز الحروف ووضوح الأرقام وعدد الكلمات في السطر، ثم جرّب النص داخل صفحة فعلية على الهاتف. تضمين أي ملف خط في موقعك يتطلب مراعاة ترخيصه؛ وجود الخط على جهازك لا يعني السماح بإعادة توزيع ملفه.
كم خطًا ووزنًا يحتاج الموقع؟
يمكن أن يبدأ الموقع بعائلة واحدة جيدة تدعم العربية وأوزانًا قليلة واضحة الوظيفة. خط للنص وآخر للعناوين قد يكونان مناسبين أيضًا، لكن إضافة خط ثالث تحتاج إلى سبب عملي. اختلاف الوزن والحجم والمساحة يستطيع إنشاء تسلسل بصري دون تبديل العائلة كل مرة.
حدّد نمطًا للعنوان الرئيسي والعناوين الفرعية والنص والأزرار والتعليقات. لا تجعل كل فقرة ذات أهمية تتحول إلى عنوان كبير؛ يفقد القارئ عندها الإحساس بالأولوية. واختبر المحتوى الطويل حتى لا تتزاحم السطور أو تنكسر الأزرار بصورة مزعجة.
تحقق من ترخيص الخط للاستخدام على الويب ومن الملفات والأوزان التي يحتاجها الموقع. واطلب مراجعة التحميل والخط البديل مع المطور؛ اختيار الخط قرار قراءة وهوية، لكنه يؤثر أيضًا في تنفيذ الصفحة وأدائها.
إذا كانت هويتك جاهزة وتريد تطبيقها على موقع جديد، راجع خدمة تصميم المواقع.
جرّب الهوية على صفحة ونموذج قبل تعميمها
صمّم صفحة خدمة قصيرة تحتوي على عنوان وفقرة وبطاقة وزر ونموذج. أضف حالات خطأ ونجاح وروابط وزرًا أثناء التركيز بلوحة المفاتيح. هذا الاختبار يكشف ما لا يظهر في لوحة ألوان ساكنة.
لا تجعل حالة الخطأ حمراء فقط؛ اكتب ما حدث وكيف يمكن تصحيحه. واستخدم تسطيرًا أو إشارة بصرية واضحة للروابط داخل الفقرات عندما يلزم تمييزها. الهدف أن يفهم الشخص الواجهة حتى إن لم يلاحظ فرق اللون بسهولة.
ثم اعرض النموذج على أشخاص قريبين من جمهورك. اسألهم عن أكثر جزء يصعب قراءته، وأين يتوقعون الضغط، وما الانطباع الذي تركته الصفحة. السؤال «هل يعجبك التصميم؟» وحده ينتج ذوقًا عامًا أكثر من ملاحظات قابلة للتنفيذ. وجرّب الصفحة بنصوص حقيقية لا بنص تجريبي؛ دليل كتابة محتوى الموقع يساعدك على تجهيزها.
وثّق قرارات اختيار الألوان والخطوط في دليل مختصر
يكفي كبداية ملف يضم قيم الألوان وأدوارها، وتركيبات التباين المعتمدة، وعائلات الخطوط وأوزانها، وأمثلة للعناوين والأزرار والحقول. أضف ما لا ينبغي فعله، مثل استخدام لون مساند فاتح لفقرة طويلة أو تمديد شعار لتعبئة مساحة.
أسئلة شائعة عن اختيار الألوان والخطوط
كم لونًا تحتاج هوية الموقع؟
يكفي غالبًا لون أساسي للعلامة، ولون للإجراءات المهمة، ودرجات محايدة للنص والخلفيات، مع ألوان للحالات مثل الخطأ والنجاح. ابدأ بالحد الأدنى الذي يغطي وظائف الواجهة، وأضف درجات عند ظهور حاجة فعلية.
هل يمكن استخدام خطوط Google العربية في موقع تجاري؟
خطوط Google Fonts منشورة برخص مفتوحة تسمح عادة بالاستخدام التجاري، مثل رخصة SIL Open Font License. راجع رخصة كل خط في صفحته قبل اعتماده، وحمّل الأوزان التي يحتاجها الموقع فقط حتى لا تتأثر سرعة الصفحات.
كيف أتأكد أن ألوان موقعي مقروءة لكل الزوار؟
افحص تباين كل تركيبة نص وخلفية بأداة تباين وفق حدود WCAG، ولا تعتمد على اللون وحده لنقل معلومة مثل الخطأ أو الرابط. واطلب من شخص تجربة الصفحة على الهاتف في إضاءة مختلفة.
عند تطوير الهوية، حدّث الدليل مع الموقع حتى لا يتحولا إلى نسختين متعارضتين. ويمكنك مراجعة أعمال WP Star وخدمة تصميم المواقع، ثم مشاركة هوية مشروعك وصفحة مرجعية لمناقشة تطبيقها على الموقع. أحضر أمثلة من محتواك الحقيقي؛ فهي الاختبار الأهم لنجاح الاختيارات.
