بناء تدرج من 10 خطوات بين ألوان العلامة التجارية

1. تدقيق لونا العلامة التجارية

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

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

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

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

2. تحضير نقاط نهاية HEX صحيحة

يستخدم خلاط الألوان قيم HEX كنقاط النهاية الخاصة به. تبدأ كل قيمة HEX مكونة من ستة أرقام برمز hash وتحتوي على أزواج تمثل الأحمر والأخضر والأزرق. على سبيل المثال، #2563EB هو أزرق قوي و #E11D48 هو أحمر وردي حيوي.

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

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

امنح نقاط النهاية أسماء عمل مؤقتة مثل brand-start وbrand-end. تجنب تسميتها "يسار" و"يمين" لأن اتجاه التدرج قد يتغير لاحقًا. يجب أن تحافظ الألوان على هويتها حتى عندما يصبح التدرج عموديًا أو قطريًا أو شعاعيًا.

3. إنشاء تدرج من عشر خطوات

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

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

التسلسل الموحد رياضيًا لا يبدو دائمًا متساويًا بصريًا. قد يبدو الأصفر الفاتح أفتح وأكثر طاقة من الأزرق الداكن حتى عندما تكون نسب الخلط موزعة بالتساوي. تؤثر السطوع المتصور والصبغة والتشبع على شعور التسلسل.

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

4. فحص النقطة الوسطى ومسار الانتقال

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

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

قارن النقطة الوسطى المولدة مع طبقة تراكب بسيطة بنسبة 50٪ في برنامج التصميم الخاص بك. قد تختلف القيم لأن التطبيقات يمكن أن تقيس الألوان بشكل مختلف أو تطبق الشفافية بشكل مختلف. استخدم سير العمل الذي يطابق بيئة الإنتاج النهائية.

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

5. إزالة المحطات الضعيفة أو الغامقة

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

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

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

لا "تصلح" كل انتقال غير عادي. الغرض من خلط لونا العلامة التجارية هو اكتشاف كيف يرتبطان. أحيانًا يكون الاستنتاج الصحيح هو أنهما لا يجب أن يشكلا تدرجًا واحدًا متصلاً. قد يعملان بشكل أفضل كألوان صلبة منفصلة مع انتقال محايد بينهما.

6. إنشاء نظام تسمية يمكن التنبؤ به

بمجرد مراجعة المحطات، عيّن أسماء مستقرة. أبسط نظام يرقم الألوان وفقًا لموضعها، مثل blend-01 إلى blend-10. هذا يحافظ على التسلسل لكنه لا يصف كيفية استخدام كل قيمة.

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

:root {
  --blend-01: #2563eb;
  --blend-02: #3a5bd9;
  --blend-03: #4f53c7;
  --blend-04: #644cb5;
  --blend-05: #7944a3;
  --blend-06: #8d3c90;
  --blend-07: #a2347e;
  --blend-08: #b72d6c;
  --blend-09: #cc255a;
  --blend-10: #e11d48;

  --campaign-gradient-start: var(--blend-01);
  --campaign-gradient-middle: var(--blend-06);
  --campaign-gradient-end: var(--blend-10);
}

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

7. تعيين أدوار تصميم مفيدة

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

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

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

8. اختبار اتجاه التدرج وطباعة النص

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

يصف الدليل الرسمي لـ Figma بشأن استخدام التدرجات كحشوات أو حدود أنواع التدرجات الخطية والشعاعية والزاوية والماسية. اختبر أكثر من نوع واحد، لكن اختر النسخة التي تدعم التكوين بدلاً من الخيار الأكثر دراماتيكية بصريًا.

أضف عنوانًا حقيقيًا وفقرة وزرًا إلى التدرج. اختبر اللون الأبيض والرمادي الغامق والألوان المعتمدة الأخرى في عدة مواضع. قد يكون لون النص قابلاً للقراءة فوق اللون A والفشل مع اقتراب الخلفية من اللون B.

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

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

9. تطبيق التدرج في CSS

بمجرد الموافقة على الاتجاه والمحطات، أنشئ نسخة الويب باستخدام CSS. يعرّف MDN linear-gradient() كدالة CSS تنتج انتقالاً تدريجيًا بين لونين أو أكثر على طول خط مستقيم.

.brand-gradient {
  background-color: #2563eb;
  background-image: linear-gradient(
    135deg,
    #2563eb 0%,
    #4f53c7 22%,
    #7944a3 44%,
    #a2347e 66%,
    #cc255a 84%,
    #e11d48 100%
  );
}

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

توفر CSS-Tricks دليلاً مفصلاً إلى تدرجات CSS يغطي الاتجاهات ومحطات الألوان والتدرجات الشعاعية والتدرجات المتكررة وأنماط التطبيق ذات الصلة.

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

10. اختبار وتوثيق وتصدير النظام

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

ابحث عن انقسام مرئي وتباين ضعيف ومناطق غامقة غير متوقعة وألوان وسيطة تبدو غير مرتبطة بنقاط النهاية. اختبر أيضًا صورة ثابتة مُصدَّرة لأن منصات وسائط التواصل الاجتماعي وبرامج العروض التقديمية قد تضغطها أو تعالجها بشكل مختلف عن خلفية CSS المباشرة.

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

إذا تم تحضير كل صفحة مواصفات كـ JPG، فإن محول JPG إلى PDF يمكنه دمجها في وثيقة واحدة مرتبة. افتح ملف PDF المُصدَّر وقارن الألوان مع التصميم الأصلي قبل مشاركته مع عميل أو فريق تطوير.