Anis Aliabadi | انیس علی آبادی | گرافیست و طراح دیداری وبسایت و اپلیکیشن

گرافیست وبسایت - گرافیست اپلیکیشن

با استفاده از هیرو هدر نهایت نبوغ طراحی خود را به کار بگیرید!

توسط انیس | فروردین ۲۸, ۱۳۹۵ | 0 نظر

هیرو هدر

با استفاده از هیرو هدر نهایت نبوغ طراحی خود را به کار بگیرید!

استفاده از تصاویر بزرگ در صفحه‌ی اول وبسایت‌های اینترنتی به یکی از مسائل روز و داغ طراحی بدل شده است. حتما شما هم تاکنون به نمونه‌های مشابهی مثل تصاویر زیر برخورد کرده‌اید و از تفاوت اینگونه طراحی لذت برده‌اید. به این تصاویر بزرگ Hero Image گفته می‌شود.

نمونه هیرو هدر

 

تصویر هیرو

 

چرا از هیرو هدر استفاده کنیم؟

Hero Header می‌تواند ترکیبی از یک تصویر، مجموعه‌ی اسلایدها، فیلم، انیمیشن و متن باشد که در اولین نمای(screen) وبسایت قرار می‌گیرد. بدین ترتیب هیرو هدر اولین چیزی است که مخاطب با آن روبه‌رو می‌شود و بهترین سلاح طراح برای اسیر نگه داشتن مخاطب است! چرا که اگر هیرو هدر به خوبی طراحی نشده و جذابیت بصری لازم را نداشته باشد، مخاطب رغبت چندانی را بازدید از صفحات دیگر سایت نشان نخواهد داد.

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

از هیرو هدرمیتوان برای هر سبکی از طراحی وبسایت استفاده کرد و درواقع جذابیت بصری یک وبسایت نیازمند یک تصویر جذاب است.

نکاتی برای استفاده از هیرو هدر

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

دراینجا چند نکته برای طراحی هیروهدر هست که باید به ذهن بسپارید:

_ نام تجاری. معمولا در قسمت بالا سمت راست قرار میگیرد. برای این سبک از طراحی رنگ لوگو را سفید یا سیاه انتخاب کنید و لوگوی چند رنگ استفاده نکنید.

_ متن روی تصویر را واضح و بولد کار کنید. تا در کنار یک تصویر بزرگ، کلمات نیز توجه کاربر را به خود جلب کنند.

_ برای تایپوگرافی متن های ثانویه و نویگیشن، از فونتی با اندازه ریزتر استفاده کنید. تصویر بزرگ و یک متن با فونت بزرگ را الویت کار خود قرار دهید و اجازه دهید تا سایر موارد در حس طرح خودشان را نشان دهند.

_ نسبت به انتخاب رنگ آگاه باشید. اگر از یک تصویر رنگی استفاده می‌کنید، برای سایر موارد از رنگ‌های مشکی و سفید استفاده کنید. اگر تصویر سیاه و سفید باشد، از یک پالت رنگی ساده برای متون استفاده کنید.

دقت کنید که متون مورد استفاده در هیرو هدر، نقاط کلیدی تصویر و یا چهره‌ی افراد را نپوشاند.

_ برای متون از سایزهای کوچک و بزرگ استفاده کنید.( این کار برای سهولت در خواندن توصیه می‌شود.)

_ از دکمه های پنهان(سبکی از طراحی دکمه است که کاربر ابتدا فقط عنوان و خط دور دکمه را می‌بیند و با هاور کردن موس دکمه رنگی می‌شود.) برای ظرافت بخشیدن به هیروهدر استفاده کنید.

_ از منوی نویگیشن چسبان استفاده کنید. تا کاربران با اسکرول کردن هم بتوانند به راحتی به صفحه های مختلف سایت بروند.

_ هیرو هدر را طوری طراحی کنید که کاربران بدانند کار بعدی که باید بکنند چیست (کلیک کنند یا اسکرول). می‌توانید از عناصر بصری برای راهنمایی کاربران استفاده کنید.

_ هیرو هدری خلق کنید که با محیط های واکنشگرای وب سازگار باشند. راجع به اینکه در اسکرین های کوچک چه ظاهری خواهد داشت فکر کنید. اینکه چه تصویر و متنی نشان داده خواهد شد؟

 

مثال های الهام بخش

N-1

                                             http://redcollar.digital/

 

N-2

                                               https://discovery.wisc.edu/  

نتیجه گیری

هیروهدر جزو بهترین گرایشات دیداری مطلوب در طراحی وب است. ویژگی مثبت این تکنیک آن است که با هر روشی سازگار است. میخواهید طراحی تخت یا مینیمال یا Retro (سبکی از طراحی است که از تصاویر نقاشی گونه و قدیمی استفاده می‌کنند) داشته باشید؟ از هروهدر استفاده کنید.

0 نظر

پاسخ دهید

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