تريد أن تجعل انطباع أول عظيم؟ يبدأ برأس موقعك على الويب. ستظهر الصورة التي يراها المستخدم انطباعًا - جيدًا أو سيئًا - وتحدد ما إذا كان المستخدم ينقر أو يستمر ، أو يغادر الموقع تمامًا.
هذا هو طلب طويل لصورة واحدة.
العنصر الأساسي في إنشاء صورة بطل من شأنها جذب المستخدمين وإبقائهم يتحركون حول التصميم هو النقيض. (جديًا! يعود كل ذلك إلى نظرية التصميم 101). يوفر الرأس الذي يضم عناصر متناقضة في الحجم واللون والمقياس المزيج الصحيح من الاهتمام المرئي ويخبر المستخدمين كيفية التفاعل مع التصميم. في ما يلي بعض الطرق لزيادة التباين على المسار لإنشاء صورة مثالية للبطل.
لا تحتاج صورة البطل إلى ملء الشاشة "الأولى" على الأجهزة. لا تقع في هذا الفخ.
اقتصاص الصورة للتأثير بناء على المحتوى الموجود بها. فكر في العناصر الأخرى التي تهم المستخدمين عند هبوطهم على الصفحة وإجراء ترتيبات لها أيضًا. واعتمادًا على هذا الإطار ، قد يعني ذلك أن صورة البطل يتم تغيير حجمها لتصبح أكبر أو أصغر من نافذة المتصفح (دعنا فقط نأخذ بعين الاعتبار المزيد من الدقة القياسية من أجل الحجة).
قبل أن ترفض الفكرة ، اعتبرها لحظة.
لا يتعين عليك إنشاء تجربة سينمائية شاملة لعرض الصور المتحركة لرأس البطل. اللمسات الأصغر للحركة تخلق تناقضًا كافيًا لجذب العين.
تقدم الحركات الرقيقة ، مثل الطائرة التي تحلق عبر الصورة إلى Bar Z Winery ، عنصر التناقض هذا دون أن تكون ساحقة. إنه بديل بسيط لبعض رؤوس الفيديو المبهرجة التي أصبحت شائعة. عنصر التباين ذو شقين: يختلف التصميم عن العديد من الآخرين التي يتعرض لها المستخدمون والحركة الخفية مبهجة وغير متوقعة.
من ناحية أخرى ، يمكنك الدخول مع الرسوم المتحركة أو الفيديو للحصول على صورة بطل. يمكن أن تكون الحركة جذابة بشكل خاص وهي خيار شائع. استخدمها بنفس الطريقة التي تستخدمها للصورة الثابتة عندما يتعلق الأمر بإضافة تأثيرات مثل الطباعة والعبارات التي تحث المستخدم على اتخاذ إجراء.
الطباعة في الصورة البطل يجب أن تبهر المستخدم. يجب أن يكون جريئًا ومؤثرًا ولا يُنسى.
يمكنك إنشاء هذا باستخدام كل من تحديد الكتابة والكلمات التي تظهر على الشاشة. (لا توجد رؤوس Arial تقول "مرحبًا" هنا.)
يحتاج الجمع بين نمط الحروف والمراسلة إلى التأثير المباشر والاستئناف على المستخدم. لقد سمعت أن الناس لديهم اهتمام أقصر من الأسماك الذهبية. انها مهمتك للقبض عليهم بالحروف الجميلة واللغة.
عندما يتعلق الأمر بالخط العريض ، فإن العناصر الأساسية للتباين هي اللون والحجم.
قد لا تكون صورة البطل صورة على الإطلاق. يمكن أن يكون كتلة اللون أو مادة باردة.
اختر لونًا بعناية يصور المعنى الدقيق الذي تعتزمه. يمكن لرأس البطل ذو اللون الغامق أن يثير إعجاب المستخدمين ، ولكن يمكن أن يكون اللون الخاطئ منعطفًا.
خيارات مشرقة وعصرية هي بديل جيد. الشيء الجميل في هذا الخيار هو أنه يمكنك مزجها من وقت لآخر بمجرد تغيير لون الخلفية. يمكن أن تساعد الخلفية ذات الألوان الكبيرة أيضًا على تعزيز هوية العلامة التجارية - خاصةً إذا كان لديها ارتباط قوي بالألوان - وتتيح إمكانية القراءة بسبب الطبيعة البسيطة للتصميم.
اللون هو أيضًا اعتبار مهم عند استخدامه مع صورة أو فيديو آخر. من الطباعة الملونة إلى عناصر واجهة المستخدم الملونة ، من المهم التأكد من أن خيارات الألوان في الصورة تتطابق مع بقية التصميم. يعود الكثير من هذا إلى نظرية الألوان وفهم عجلة الألوان بحيث تعمل خيارات الصور والألوان معًا في التصميم.
ولكن ماذا لو لم تتشابك ألوان الصورة البطل والعلامة التجارية؟ فكر بشكل خلاق في كيفية استخدام الأجزاء في صورة البطل معًا. جرب تراكب لون على الصورة ؛ ضع في الاعتبار الأسود والأبيض للصورة أو النص. نقل عناصر عالية الجودة إلى شريط تنقل أبيض أو أسود لإبقائها بعيدة عن الصورة الفعلية. عندما لا تلعب الصورة والألوان المطلوبة بشكل جيد ، فإن أفضل خيار هو إزالة اللون أو فصله.
قد تكون المحاسبة للمساحات المظلمة والضوئية في إحدى الصور هي المهمة الأكثر صعوبة عند إضافة عناصر لإنشاء تباين في صورة بطل. بشكل خاص مع التنسيقات المتجاوبة ونقاط التوقف ، يمكن تغيير موضع النص أو الأزرار على الصورة ولا يمكنك دائمًا العثور على موقع رائع.
ما هو المصمم أن تفعل؟
كل ما سبق هو خيار قابل للتطبيق. قد يختلف الخيار الأفضل حسب المشروع.
جمعية المجتمع كان الحل في شريط صورة البطل - مع الكثير من التباين بين المساحات المضيئة والظلام - هو تضمين تراكب الشعار بنص أبيض في شكل أسود. لا ينتقص من الصور وهو أقل بكثير من التفكير في سماع الفكرة. كما يساعد الشعار الموجود في المركز على إنشاء هوية تجارية وبصرية.
لا تنس CTA!
ماذا تريد أن يفعل المستخدمون بعد أن ينظروا إلى صورة البطل البارد؟ اخبرهم.
يجب أن تكون العبارة التي تحث المستخدم على اتخاذ إجراء واضحة ، سواء كان ذلك لملء نموذج ، أو التمرير للحصول على المزيد من المحتوى أو النقر على رابط إلى صفحة أخرى. يجب أن يشتمل على تعريف كافٍ وتباين بحيث يمكن رؤيته بسهولة على خلفية الصورة. (ما هي النقطة في CTA إذا لم يراها أحد؟)
اللون والحجم لهما أهمية خاصة هنا. يجب أن يميز لون الزر (علامة cta الشائعة) عن بقية الصورة. يجب أن تكون الكلمات التي تخبر المستخدمين عما يجب أن يكونوا قابلين للقراءة بشكل استثنائي وبسيط وواضح.
التباين هو أحد التقنيات الرئيسية لأي تصميم جيد. إنه ينشئ الفصل بين العناصر ويساعد في توجيه المستخدمين نحو الإجراء المطلوب.
انتبه بشكل خاص لإنشاء تباين كافٍ عند تصميم صورة البطل حتى يعرف المستخدمون بالضبط الإجراءات التي يجب اتخاذها على الصفحة. ألق نظرة على المقاييس ، وإذا لم تحدث هذه التحويلات ، فعليك إعادة التفكير في مقدار التباين في التصميم. قد يكون الوقت قد حان لرفعه أكثر.