تکنیک HERO HEADER در طراحی وب سایت

مطالب مرتبط:

چطور طراح وب سایت خودمان شویم؟!

چگونه از نام دامنه وب سایت خود محافظت کنیم؟

چرا گرافیک برای توسعه وب مهم است؟

توسعه دهنده وب سایت و طراح وب سایت : مفهوم ها و تفاوت ها

عنوان آموزش امروز:

تکنیک HERO HEADER در طراحی وب سایت

مقدمه:

تصاویر با عرض کامل بالای اسکرول یکی از محبوب ترین گرایش ها در طراحی وب سایت هستند. چه تصویر ثابت باشد و چه یک ویدیوی مبتنی بر حرکت، استفاده از هدر قهرمان قطعا گزینه محبوبی است.

و این کاملا منطقی است. این فرمت با تعداد زیادی از انواع مختلف تصاویر عالی کار می کند، در چارچوب های طراحی واکنش گرا قرار می گیرد و به دلیل ماهیت بسیار بصری آن برای کاربران جذاب است. در این پست، ما به شما نشان خواهیم داد که چگونه ازHero Header یا سبک Letterboxing برای ذخیره کردن کاربران خود و جلب توجه آنها استفاده کنید. اما ابتدا، بیایید تفاوت های بین این دو را بررسی کنیم.

Hero Header

یک صفحه نمایش بزرگ با عناصر بصری، متنی و ناوبری در بالای اسکرول در چارچوب طراحی شما است. چیدمان و لایه‌بندی عناصر کاملاً به طراح بستگی دارد، اما یکی از رایج‌ترین استفاده‌ها، عکس‌هایی با روکش‌های متن و عناصر است، مانند Pierre’s Ice Cream Company در بالا.

Hero Header را می توان با استفاده از تصاویر موجود از مجموعه شما ساخت. یا می توانید تصاویر جدیدی ایجاد کنید که جسورانه برجسته باشد. یا می توانید از یک کیت برای ترکیب و هماهنگ کردن قطعات برای ظاهری نیمه سفارشی استفاده کنید

یکی از مواردی که باید در نظر داشته باشید استفاده شما از تصاویر است. شما چیزی می خواهید که متمایز و برجسته باشد. به اپل فکر کنید – که استاد هدر قهرمان هستند. در مثال زیر، شما بلافاصله توسط آیفون های آبشاری به سمت کپی کشیده می شوید.

تصاویر می توانند یک Hero Header را بسازند یا بشکنند. تصویر اشتباهی را انتخاب کنید و بازدیدکنندگان سایت شما سریعتر از یک گلوله سریع به بیرون پرتاب خواهند شد. مورد مناسب را انتخاب کنید و آنها به سایت شما کشیده می شوند و در اطراف می مانند تا چیزهای بیشتری را که ارائه می دهید ببینید.

استایل Letterboxing مقداری استایل و رنگ اضافی به Hero Header اضافه می کند. وقتی از سایتی بازدید می کنید که از جعبه نامه استفاده می کند، متوجه خواهید شد که یک حاشیه تصویر اصلی را قاب می کند – مانند زمانی که فیلمی را در تلویزیون خود تماشا می کنید. در زیر تصویر عناصر طراحی مانند ناوبری، جستجو یا نام تجاری را مشاهده خواهید کرد.

 

Letterboxing

به تصویر اجازه می دهد فضای بیشتری داشته باشد و صفحه را کمتر به هم ریخته کند. تصویر همچنان بر روی صفحه نمایش غالب است. اجرای این سبک آسان است زیرا نسبت‌های تصویر بسیار شبیه به مواردی است که برای عکس‌های روی جلد رسانه‌های اجتماعی رایج استفاده می‌کنید. این یک امتیاز قطعی برای برندهایی است که به دنبال حفظ بصری ثابت در کانال های مختلف هستند.

یک بار دیگر، هنگام انتخاب عکس انتخابی باشید. شما می خواهید به اندازهHero Header معمولی جسور باشید. اکنون که تفاوت جزئی بین هدرهای Letterboxing و Hero Header را درک کردیم، بیایید به نحوه استفاده از آنها در کار خود بپردازیم.

Universal Appeal

دلیل محبوبیتHero Header و طرح‌های Letterboxing این است که جذابیت تقریباً جهانی دارند. آنها برای انواع محتوا کار می کنند و به ویژه با عکس ها، ویدیوها و انیمیشن ها خوب بازی می کنند. تنها چیزی که واقعاً برای استفاده حداکثری از این روند نیاز دارید یک تصویر بصری عالی است – آیا هنوز موضوعی را حس کرده اید؟

Hero Header محفظه مناسبی برای یک بیت اطلاعات هستند. پی پال این کار را به خوبی انجام می دهد. در سرتاسر سایت، مجموعه‌ای از تصاویر و Hero Header را خواهید یافت که کاربر را وادار می‌کند هر بار که از سایت بازدید می‌کند توقف کرده و سایت را بررسی کند. عناصر متن و دکمه به‌طور یکپارچه با هر تصویر کار می‌کنند تا کاربر برای دیدن اینکه آیا محتوا مربوط است یا نه. به آنها.

وقتی صحبت از طراحی به Hero Header به میان می‌آید، ویدیو تقریباً مانند تصاویر عمل می‌کند. برای جذب کاربران به یک کلیپ ویدیویی قوی و یک کپی خوش نوشت نیاز است. Ride for the Child این کار را با مجموعه‌ای از کلیپ‌های ویدیویی با سرعت بالا انجام می‌دهد تا علاقه‌مندی را به همراه تایپوگرافی جسورانه و بزرگ جلب کند تا کاربران واقعاً روی آن کلیک کنند.

 

از تصاویر یا انیمیشن های جالب خود با یک عنصر طراحی غالب نهایت استفاده را ببرید. شما در واقع می توانید یک سایت کامل را پیرامون برخی از این عناصر جالب طراحی کنید، مانند گونه ها در قطعات. ماهیت تعاملی طراحی همراه با تصویر به سبک قهرمان برای ظاهری مد روز، اما واقعاً کاربران را با تعاملات HTML جالب نگه می دارد.

10 نکته طراحی برای Hero Header بهتر و حروف‌ باکسینگ

در حالی که تصویر در این نوع طراحی ظاهر را ربوده است، شما همچنان باید عناصر ضروری مانند نام تجاری و دعوت به عمل را در آن لحاظ کنید. تطبیق این عناصر با تصویر مهم است. ممکن است لازم باشد کمی جسورتر از آنچه انتظار دارید پیش بروید تا وزن بصری متن و سایر عناصر با تصاویر بزرگ به خوبی کار کند.

در اینجا 10 راه برای انجام این کار وجود دارد:

1.رها کردن رنگ را برای عناصر برندسازی در نظر بگیرید.

از یک لوگوی سفید یا سیاه استفاده کنید تا با یک تصویر رنگارنگ رقابت نکند.

2. طراحی برای کنتراست

حروف چاپی جسور و خوانا را انتخاب کنید که با جلوه های بصری همخوانی دارند اما از آنها جدا هستند. تایپ را به زور روی تصویر تحمیل نکنید. گاهی اوقات بهترین کار این است که آن را درست در بالای یا پایین تصویر قرار دهید.

3. ناوبری Letterboxing یک امتیاز واقعی است.

این یک ظرف ساده برای عناصر ضروری در یک بسته طراحی به شما می دهد که درک آن برای کاربران آسان است. (پاداش: پیمایش را چسبناک کنید تا کاربران هنگام پیمایش گم نشوند.) اگر سبک Letterboxing را احساس نمی کنید، ناوبری بازشو را امتحان کنید، مانند سبک همبرگر که توسط Teamgeek استفاده می شود.

4. عمق تصویر را در نظر بگیرید.

آن را طوری طراحی کنید که کاربران بدانند قرار است چه کاری انجام دهند. (Hero Header چیزی بیش از یک تصویر زیباست.)

5. از رنگ یا محو شدن استفاده کنید

این به ایجاد کنتراست بیشتر برای متن، دکمه ها یا عناصر دیگر کمک می کند.

6. دستگاه های تلفن همراه را در نظر بگیرید

مطمئن شوید که تصویر شما در همه دستگاه‌ها کار می‌کند، حتی اگر این شامل تغییر اندازه یا تعویض یک تصویر بزرگتر با یک عکس کوچکتر در یک دستگاه کوچکتر باشد.

7. به متن در ارتباط با تصویر فکر کنید

اگر قصد دارید از طراحی متن روی تصویر استفاده کنید، مطمئن شوید که قسمت اصلی تصویر هنگام قرار دادن متن قابل مشاهده و قابل درک است.

8. تصویر را در مرکز خود قرار دهید

این تصویر بزرگ را به عنوان “ترفند طراحی” خود در نظر بگیرید و یک چارچوب ساده برای بقیه طراحی ایجاد کنید.

9. از فعالیت یا تحرک زیاد دوری کنید

با یک تصویر، ویدیو یا انیمیشن مصور همراه شوید. سعی نکنید هر سه مورد را انجام دهید. اگر می خواهید از نوار لغزنده استفاده کنید، حرکت را آهسته و عمدی نگه دارید، به خصوص اگر می خواهید کاربران چیزی را روی صفحه بخوانند.

10. بالا بردن رزولوشن

هیچ چیز بدتر از یک تصویر بزرگ و کم کیفیت نیست. یک بار دیگر، اگر می خواهید از این روند استفاده کنید، تصویر همه چیز است.

 

برگرفته از :

www.uxpin.com

پاسخ به سوال دوستان :

شاید تاکنون به این فکر کرده باشین که چرا باید برای کسب و کار خود وبسایت داشته باشین ؟

دلیل اینکه می‌گوییم باید سایت داشته باشید این آمار است. توجه کنید که ۸۱٪ از افراد قبل از

تصمیم گیری در مورد خرید و فروش در یک کسب وکار یا خدمات، در اینترنت تحقیق می کنند.

یعنی ۲۵.۹۲ میلیون نفر هستند که مشاغل را به صورت آنلاین جستجو می کنند. با این وجود ۴۶% کسب و کارها فکر می‌کنند نیاز به وب سایت ندارند.

توجه داشته باشید که جهان به سمت دیجیتالی شدن پیش می‌رود و نداشتن وب سایت

برای یک شرکت یا هر کسب و کاری، به منزلۀ جا ماندن از گردونۀ روزگار است.

برای اطلاعات بیشتر با همکاران ما در شرکت آراز پردازش در ارتباط باشید

آدرس ایمیل:  info@arazpardazesh.com

اینستاگرام شرکت:   https://instagram.com/araz_pardazesh_kla

تماس با ما:     https://arazpardazesh.com/contact