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

آموزش وبسایت

تکنیک HERO HEADER در طراحی وب سایت
عنوان آموزش امروز:

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

مقدمه:

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

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

Hero Header

Photo credit: Pierre’s Ice Cream Company

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

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

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

Photo Credit: Apple

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

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

 

Letterboxing

Photo credit: Playstation

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

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

Universal Appeal

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

Photo credit: PayPal

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

Photo credit: Ride for the Child

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

 

Photo credit: Species in Pieces

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

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

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

در اینجا 10 راه برای انجام این کار وجود دارد:
1.رها کردن رنگ را برای عناصر برندسازی در نظر بگیرید.

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

Photo credit: Tom Cole Architecture

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

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

Photo credit: Teamgeek

اعتبار عکس: Teamgeek

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

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

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

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

اعتبار عکس: ESPN Media

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

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

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

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

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

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

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

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

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

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

Photo credit: Wild Renfrew

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

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

بردن

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

برای راهنمایی های بیشتر در مورد نحوه استفاده از بهترین گرایش های طراحی وب سال، کتاب الکترونیکی رایگان گرایش های طراحی وب 2015-2016 را بررسی کنید. 166 نمونه دستچین شده از شرکت هایی مانند آدیداس، اینترکام، اپل، گوگل، ورساچه و دیگران را خواهید یافت. برای کمک به سرعت بخشیدن به فرآیند طراحی، فهرستی از 100 منبع رایگان نیز وجود دارد

 

برگرفته از :

www.uxpin.com

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

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

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

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

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

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

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

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

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

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

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دو × 3 =