ژورنال طراحیطراحی Hero Section حرفه‌ای

ژورنال طراحی

طراحی هیرو سکشن؛ نخستین قاب سایت باید چه چیزی را حل کند؟

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

H1 را به یک مسئولیت روشن محدود کنید

در این بخش، پیام اصلی را نه به‌عنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی می‌کنیم.

طراحی وب در تصویر ثابت بسیار بخشنده است. همه منابع حاضرند، متن‌ها کامل‌اند و هیچ‌کس با انگشت خیس، اینترنت کند یا نور شدید صفحه را نمی‌بیند. محصول واقعی این‌طور رفتار نمی‌کند. برای همین هر تصمیم بصری باید یک بار در زمان، یک بار در عرض و یک بار در زمینه استفاده واقعی بازبینی شود. در موضوع «H1 را به یک مسئولیت روشن محدود کنید»، بهتر است از خود پیام اصلی شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا می‌کند و به نقشی که باید در تجربه صفحه داشته باشد برمی‌گرداند؛ جایی که می‌توان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.

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

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

ترکیب سه‌بعدی اختصاصی برای توضیح طراحی هیرو سکشن نخستین قاب سایت باید چه چیزی را حل کند در میانه مقاله
01

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

زیرتیتر باید ابهام را کم کند، نه تکرار

در این بخش، متن پشتیبان را نه به‌عنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی می‌کنیم.

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

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

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

  • نقش متن پشتیبان را پیش از شکل آن تعریف کنید
  • نمونه را با محتوای واقعی فارسی بسنجید
  • رفتار موبایل و حالت‌های غیرایده‌آل را جدا ببینید

CTA را بر اساس آمادگی کاربر انتخاب کنید

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

بیایید این بخش را با یک صحنه آشنا شروع کنیم. صفحه روی مانیتور کامل به نظر می‌رسد، اما وقتی نگاه از بالا تا پایین حرکت می‌کند، معلوم نیست کدام تصمیم واقعاً مهم‌تر است. در چنین لحظه‌ای مشکل کمبود زیبایی نیست؛ مشکل این است که طراحی هنوز ترتیب دیدن و فهمیدن را مشخص نکرده. راه‌حل از افزودن یک افکت تازه نمی‌آید، از روشن‌کردن مسئولیت هر لایه می‌آید. در موضوع «CTA را بر اساس آمادگی کاربر انتخاب کنید»، بهتر است از خود اقدام بعدی شروع کنیم. این زاویه تصمیم را از پسند شخصی جدا می‌کند و به نقشی که باید در تجربه صفحه داشته باشد برمی‌گرداند؛ جایی که می‌توان درباره نتیجه حرف زد، نه فقط درباره زیبا یا نازیبا بودن.

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

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

نمای سه‌بعدی دوم از جزئیات اجرایی طراحی هیرو سکشن نخستین قاب سایت باید چه چیزی را حل کند
02

نمای دوم از فرم کلی فاصله می‌گیرد و روی اتصال تصمیم‌های ریز به تجربه نهایی تمرکز می‌کند.

تصویر هیرو باید نقش داشته باشد

در این بخش، رسانه و معنا را نه به‌عنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی می‌کنیم.

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

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

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

  • نقش رسانه و معنا را پیش از شکل آن تعریف کنید
  • نمونه را با محتوای واقعی فارسی بسنجید
  • رفتار موبایل و حالت‌های غیرایده‌آل را جدا ببینید

ارتفاع هیرو را با محتوا تنظیم کنید

در این بخش، قاب و fold را نه به‌عنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی می‌کنیم.

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

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

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

شواهد را زود اما سبک وارد کنید

در این بخش، اعتماد اولیه را نه به‌عنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی می‌کنیم.

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

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

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

  • نقش اعتماد اولیه را پیش از شکل آن تعریف کنید
  • نمونه را با محتوای واقعی فارسی بسنجید
  • رفتار موبایل و حالت‌های غیرایده‌آل را جدا ببینید

هیروهای صفحات داخلی یک خانواده‌اند، نه کپی

در این بخش، سیستم صفحات را نه به‌عنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی می‌کنیم.

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

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

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

نسخه موبایل را از نو قاب‌بندی کنید

در این بخش، هیرو موبایل را نه به‌عنوان یک تکنیک جدا، بلکه در نسبت با کل تجربه صفحه بررسی می‌کنیم.

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

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

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

  • نقش هیرو موبایل را پیش از شکل آن تعریف کنید
  • نمونه را با محتوای واقعی فارسی بسنجید
  • رفتار موبایل و حالت‌های غیرایده‌آل را جدا ببینید

قدم بعدی

برای پروژه شما، از پرسش‌های درست شروع کنیم.

شرح کوتاهی از وضعیت، هدف و محدودیت‌ها بفرستید تا مسیر مناسب را روشن کنیم.