لمسة من النيون في تصميم الويب: استخدام الألوان لجذب انتباه المستخدم

نشرت: 2021-01-12

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

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

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

جرينليف للخدمات اللوجستية

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

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

مثال على شركة Greenleaf Logistics

فلوهب

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

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

مثال على Flowhub

هيربا موجو

النيون الأخضر هو نغمة عالمية تعمل بشكل جيد مع كل من السمات الفاتحة والداكنة. ضع في اعتبارك Herba Mojo لإظهاره في الممارسة العملية.

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

مثال على Herba Mojo

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

دانيلو ديماركو

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

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

مثال على Danilo Demarco

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

DesignGapp

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

مثال على DesignGapp

كوستومن 1

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

مثال على Kostumn 1

الأعمال الفنية الحرجة

تستخدم Critical Techworks واحدة من أكثر نغمات النيون شهرة: الفيروز الغني. تبدو رائعة داخل بيئة تكنو مظلمة. كل تفاصيل واجهة المستخدم الغنية بجاذبيتها تلفت الانتباه منذ البداية.

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

مثال على الأعمال الفنية الحرجة

النظرية النشطة

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

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

مثال على النظرية النشطة

التحف الذكية

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

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

مثال على القطع الأثرية الذكية

هواماما ديزاين

قام الفريق الذي يقف وراء Whoamama Design ببناء جمالياتهم الكاملة حول تلوين النيون. انهم في كل مكان. موقع الويب يبدو كهربائيًا وغريبًا ورائعًا. إنه مثل انفجار من الماضي الديسكو.

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

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

مثال على تصميم Whoamama

وجود أكثر ملونة

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

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