كيفية اختيار لوحة الألوان المثالية وإقران الخطوط

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

تمثيل العلامة التجارية

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

الحد الأدنى، الحد الأقصى، أو "فقط الحق"؟

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

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

الموسمية

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

لوحات المزاج

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

مواقع القراءة

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

اختيار لوحة الألوان المثالية

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

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

أنظمة الألوان (مجموعات لوحة الألوان)

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

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

هناك العديد من الأدوات عبر الإنترنت لإنشاء لوحات الألوان، ويُعد Coolors أحد المواقع المجانية الشهيرة. يمكن أن يساعد في إنشاء لوحات الألوان بسرعة ودقة.

المصدر: موقع Coolors.co، 2023

تصميم لعمى الألوان

يعاني حوالي 300 مليون شخص في جميع أنحاء العالم من شكل من أشكال عمى الألوان (معظمهم من اللون الأحمر والأخضر). هذه قاعدة كبيرة جدًا من العملاء المحتملين الذين قد لا يتمكنون من رؤية بعض أو معظم عناصر موقع الويب الخاص بك. الأشكال الأربعة الرئيسية لعمى الألوان الأحمر والأخضر هي:

• البروتانوبيا : ظلال اللون الأحمر غير محسوسة ويُنظر إليها على أنها سوداء؛ يُنظر إلى الألوان على أنها ظلال من اللون الأزرق أو الذهبي. يتم الخلط بين اللون البني الداكن والظلال الداكنة للألوان الأخرى مثل الأحمر أو البرتقالي أو الأخضر.
• Deuteranopia : الخضر غير محسوسة. عادة ما يتم رؤية اللون الأزرق والذهبي. يتم إدراك ظلال اللون الأحمر والأخضر بالتبادل. يبدو اللون الأصفر والظلال الساطعة من اللون الأخضر متشابهة.
• Protanomaly : يظهر اللون الأحمر باللون الرمادي الداكن. كل الألوان الحمراء أقل سطوعًا.
• Deuteranomaly : ترى في الغالب الألوان الزرقاء والصفراء والألوان الصامتة بشكل عام.

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

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

تقنيات إقران الخطوط

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

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

بعض الأمثلة هي كالتالي:

• أبريل فاتفيس وبوبينز
• اليغريا (جريئة ومنتظمة)
• بارلو المكثف ومونتسيرات
• الغاق جاراموند و بروزا ليبر
• عرض DM Serif وDM Sans
• الخاتمة وأي شخص، من إنتاج شركة Etcetera Type

• IBM Plex Sans المكثف وIBM Plex Sans
• كارلا وإنكونسولاتا
• كارلا وميريويذر
• ليبر باسكرفيل (جريئة ومنتظمة)
• ليبر باسكرفيل ومصدر بلا برو
• جراد البحر اثنان ونص كوشان، من نوع إمبالاري
• مونتسيرات وهند
• نونيتو ​​و بي تي سانس
• نونيتو ​​سانس (جريء ومنتظم)
• أوزوالد ومصدر بلا برو

• أوزوالد ومصدر Serif Pro
• عرض بلايفير ولاتو
• عرض Playfair وSource Sans Pro
• كواتروسينتو ولورا
• كواتروسينتو و كواتروسينتو بلا
• الرمال المتحركة (جريئة ومنتظمة)
• Roboto المكثف وRoboto
• Stint Ultra Expanded و Pontano Sans
• الترا و بي تي شريف
• العمل بلا وميريويذر
• Yeseva One و Josefin Sans

أدوات لإقران الخطوط

1. يعد Google Fonts موقعًا يجب مشاهدته للحصول على أفكار عامة حول اختيار أزواج الخطوط. جميع الخطوط مفتوحة المصدر ومجانية الاستخدام.
2. يسمح لك FontPair برؤية أزواج الخطوط التفاعلية وأي خطوط من Googe Fonts، والتي يمكن استخدامها مجانًا.

تطوير الخطوط الخاصة بك

لماذا لا تصنع الخطوط الخاصة بك فقط؟ غيرت شركة Apple من Helvetica Neue إلى الخط الذي أنشأته داخل الشركة والذي يسمى San Francisco، والذي كان ناجحًا بالنسبة لها. إحدى الأدوات المجانية عبر الإنترنت هي Birdfont مفتوح المصدر - قم بإنشاء الخطوط الخاصة بك واختبارها!

اللون والخط بعيدا!

التقنيات المذكورة أعلاه ثانوية فقط بالنسبة للرسالة وتجربة المستخدم. يعتمد التصميم على التعليقات وهو متكرر - مع اختبار أ/ب على عينة صغيرة من المستخدمين والعملاء، توقع العديد من تغييرات التصميم. استخدم خيالك وخلق وسيلة!