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

هذا هو طلب طويل لصورة واحدة.

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

المحاصيل استراتيجيا

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

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

قبل أن ترفض الفكرة ، اعتبرها لحظة.

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

النظر في الرسوم المتحركة

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

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

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

شريط زي

اعتقد بولد الطباعة

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

يمكنك إنشاء هذا باستخدام كل من تحديد الكتابة والكلمات التي تظهر على الشاشة. (لا توجد رؤوس Arial تقول "مرحبًا" هنا.)

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

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

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

اختر اللون بعناية

قد لا تكون صورة البطل صورة على الإطلاق. يمكن أن يكون كتلة اللون أو مادة باردة.

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

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

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

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

deskpass

فكر في الضوء والمساحات المظلمة

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

ما هو المصمم أن تفعل؟

  • اختر صورة أخرى
  • اختيار عائلة أو حجم أو لون من نوع مختلف ؛
  • إضافة تراكب لون ؛
  • تحقيق أفضل من ذلك.

كل ما سبق هو خيار قابل للتطبيق. قد يختلف الخيار الأفضل حسب المشروع.

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

المجتمع

تضمين عبارة مميزة للعمل

لا تنس CTA!

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

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

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

الأزرق الأيل

استنتاج

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

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