حول لون عشوائي إلى اتجاه تصميمي

1. اكتب تحديًا تصميميًا بجملة واحدة

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

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

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

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

2. اختر ألوانًا دون التمرير اللا نهائي

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

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

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

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

3. سجّل اللون في صيغ قابلة للاستخدام

لقطة شاشة ليست سجل لون كافٍ. انسخ قيم HEX و RGB و HSL المولدة إلى مستند عملي. تصف كل صيغة نفس اللون المعروض بشكل مختلف وقد تكون مفيدة في جزء مختلف من سير العمل.

دليل MDN حول قيم ألوان CSS يشرح كيف يمكن تمثيل الألوان باستخدام الترميز السادس عشري، rgb()، hsl() وتوابع اللون الأحدث.

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

4. ادرس خصائصه بدلاً من اسمه

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

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

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

5. بناء مزاج بصري دون الاعتماد على الصور النمطية

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

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

اكتب ثلاث صفات لكل تفسير محتمل. ثم قارن تلك الصفات مع التحدي التصميمي الأصلي. اختر التفسير الذي ينشئ العلاقة الأكثر فائدة بين اللون والمشروع.

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

6. أنشئ فكرة مشروع للون

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

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

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

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

7. ترجم اللون إلى قواعد بصرية

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

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

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

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

8. تحكم في مقدار ظهور اللون

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

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

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

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

9. أضف ألوانًا محايدة وحدد الأدوار الوظيفية

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

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

إرشادات Google حول أدوار الألوان في Material Design توضح قيمة تعيين الألوان وفقًا للغرض بدلاً من معاملة اللوحة كمجموعة غير منظمة من الألوان.

10. أنشئ عينة تصميم واحدة واقعية

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

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

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

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

11. انقل الاتجاه إلى CSS

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

:root {
  --color-page: #f7f7f4;
  --color-surface: #ffffff;
  --color-text: #1d1e20;
  --color-text-muted: #63666b;
  --color-primary: #7b4de3;
  --color-on-primary: #ffffff;
  --color-border: #d9d9df;
}

أنشئ حالات التحوم والضغط والاختيار فقط بعد اختبارها داخل المكونات. تناقش مقالة Smashing Magazine حول تبسيط لوحات الألوان مع color-mix() في CSS كيف يمكن اشتقاق الاختلافات السياقية من ألوان السمة الموجودة.

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

12. اختبر وثّق الاتجاه النهائي

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

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

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

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