هوية بصرية بسيطة لمتجرك التعليمي

فتحتَ كانفا لتصميم غلاف دورتك، فوجدت نفسك بعد ساعتين أمام أربع عشرة تجربة لون مختلفة. وفي النهاية اخترت الأزرق لأنه بدا «آمناً»، ثم استعملت الأخضر في الغلاف التالي. الآن يبدو متجرك كأن أربعة أشخاص صمّموه في أوقات متباعدة.

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

الحد الأدنى: لون وخط وشعار

ثلاثة عناصر تصنع تسعين بالمئة من الانطباع البصري لمتجرك. لون أساسي يتكرر، وخط واحد للنصوص، وشعار يظهر في الترويسة وفي الفاتورة. أي شيء بعدها تحسين لا أساس.

اكتب هذه القرارات الثلاثة في ملف واحد اليوم. اسمه «هوية متجري»، وفيه سطر لكل قرار مع القيمة الدقيقة. مثال: اللون الأساسي #1F5F4B، الخط «IBM Plex Sans Arabic»، الشعار نص باسم «أكاديمية حصة».

هذا الملف يوفّر عليك القرار في كل مرة تصمّم فيها غلافاً أو منشوراً. القرار المتكرر هو ما يستنزف وقتك، لا التصميم نفسه.

اختيار اللون: واحد أساسي وواحد للأزرار

ابدأ بلونين فقط، ولا تزد قبل أن تحتاج فعلاً. لون أساسي يحمل شخصية العلامة، ولون للأفعال يستعمل في الأزرار وحدها. الجدول التالي يوزّع الأدوار.

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

الجمال وحده لا يكفي، فالمقياس الحاسم هو التباين. تشترط إرشادات الوصولية WCAG 2.1 من W3C نسبة تباين لا تقل عن 4.5:1 بين النص العادي وخلفيته، عند المستوى AA. وتخفّض الشرط إلى 3:1 للنص الكبير.

وتعرّف الإرشادات النص الكبير بأنه 18 نقطة على الأقل، أو 14 نقطة عريضة. أي ما يعادل تقريباً 24 بكسل للأول و18.5 بكسل للثاني. فالعنوان يحتمل تبايناً أقل، والنص الصغير لا يحتمل.

وهناك شرط ثانٍ يغفل عنه كثيرون. تشترط إرشادات التباين غير النصي في WCAG 2.1 نسبة 3:1 على الأقل لعناصر الواجهة نفسها مقابل الألوان المجاورة. أي أن حدود حقل الإدخال وحدود الزر يجب أن تُرى، لا نصهما فقط.

وتنبّه الإرشادات إلى أن القيم لا تُقرَّب، فنسبة 2.999:1 لا تحقق شرط 3:1. استعمل أي أداة تباين مجانية، وأدخل لوني النص والخلفية قبل أن تعتمد اللون.

الخط العربي: ما الذي يُقرأ فعلاً على الشاشة

اختر خطاً واحداً واستعمله في كل مكان، وميّز العناوين بالحجم والوزن لا بخط ثانٍ. الخط الثاني يضيف تعقيداً بلا مكسب واضح في متجر صغير.

وفضّل الخطوط غير المزخرفة للنصوص الطويلة على الشاشة. الخط المزخرف يصلح لكلمة في شعار، ويتعب العين في فقرة من أربعة أسطر.

الاستعمال	الحجم المقترح	شرط التباين الأدنى
العنوان الرئيسي	28 بكسل فما فوق	3:1 لأنه يُعدّ نصاً كبيراً
العناوين الفرعية	20 إلى 24 بكسل	3:1 عند 24 بكسل، و4.5:1 دونها
نص الفقرات	16 إلى 18 بكسل	4.5:1
النص الثانوي والملاحظات	14 بكسل ولا تقل	4.5:1

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

اكتفِ بوزنين من الخط، عادي وعريض. كل وزن إضافي ملف إضافي يحمّله المتصفح ويؤخر ظهور النص.

الشعار: النصي يكفي في البداية

اكتب اسمك بخطك المختار بوزن عريض، واجعله شعارك. الشعار النصي واضح في كل مقاس، ويعمل في الترويسة وفي الفاتورة وفي صورة الملف الشخصي.

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

واختبر شعارك بمقياس واحد: هل يُقرأ وهو بعرض 32 بكسل؟ لو اختفت تفاصيله عند التصغير، فبسّطه. الرمز المعقّد يتحول إلى بقعة رمادية في تبويب المتصفح.

ولا تنفق على شعار احترافي قبل أن تعرف ما تبيعه بالضبط. راجع خياراتك أولاً في 25 منتجاً رقمياً تصلح للبيع، ثم صمّم حول ما استقررت عليه.

الصور: كيف تحافظ على نفس الطابع

اختر قاعدة واحدة لكل صورك والتزم بها. مثال عملي: كل الأغلفة بخلفية بيضاء، والعنوان بالأخضر الأساسي في الزاوية العليا، وصورة واحدة على اليمين.

وثبّت ثلاثة مقاسات فقط: غلاف الدورة، وصورة المنشور المربعة، وصورة القصة الطولية. احفظ لكل مقاس قالباً واحداً وانسخه في كل مرة.

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

واضغط كل صورة قبل رفعها. الصورة الثقيلة تؤخر ظهور أكبر عنصر مرئي في الصفحة، وحدّه الجيد عند جوجل 2.5 ثانية أو أقل.

الاتساق أهم من الجمال

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

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

ويمتد الاتساق إلى المحتوى لا إلى الشكل وحده. اجعل مقالاتك ومنشوراتك تحمل الطابع نفسه. وربطنا ذلك بحركة الزيارات في لماذا يحتاج متجرك مدونة، وبتحويل المشاهدات إلى مبيعات في تحويل مشاهدات الريلز إلى مبيعات.

أخطاء تجعل المتجر يبدو غير محترف

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

الخطأ الجامع بينها واحد: أنك تعامل الهوية كذوق شخصي لا كنظام. والنظام يعني قاعدة مكتوبة تُطبَّق حتى حين لا تعجبك في لحظة ما.

متى تستثمر في مصمم فعلاً؟

أجّل الاستثمار حتى تتحقق إشارة واضحة، لا حتى تشعر بالملل من شكلك الحالي. أوضح الإشارات ثلاث:

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

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

الأسئلة الشائعة

كم لوناً أحتاج فعلاً؟

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

هل أستعمل خطاً عربياً مجانياً أم مدفوعاً؟

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

كيف أتحقق من نسبة التباين عملياً؟

افتح أي أداة تباين مجانية على الويب، وأدخل رمز لون النص ورمز لون الخلفية. ستعطيك النسبة مباشرة مع نتيجة المستوى AA. استهدف 4.5:1 للنص العادي، و3:1 للنص الكبير وحدود الأزرار.

هل أغيّر هويتي إن لم تنجح مبيعاتي؟

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

كم وقتاً أعطي لهذه القرارات؟

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

الخلاصة

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

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

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