طراحی بخش هیرو: ۸ الگویی که در ۲۰۲۶ تبدیل می‌کنند

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

بخش هیرو پرطراحی‌ترین بخش صفحه است

اکثر بخش‌های هیرو قبل از اینکه طراح Figma را باز کند شکست می‌خورند. شکست می‌خورند چون هیچ‌کس اول سوال درست نپرسید: وقتی این بازدیدکننده اینجا می‌رسد، از قبل به چه چیزی باور دارد؟

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

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

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

تنها متریکی که هیرو کنترل می‌کند این است: آیا کسی اسکرول می‌کند. این تمام کار است.

هشت الگوی زیر ترندهای طراحی نیستند. ساختارهایی هستند که برندهای عملیاتی در سال ۲۰۲۶ از آنها برای درآمد واقعی استفاده می‌کنند.

هر کدام در شرایط خاصی کار می‌کنند و در شرایط دیگری شکست می‌خورند. کار شما کپی کردن الگویی که در Dribbble خوب به نظر می‌رسد نیست. الگو را با سیگنالی که بازدیدکننده‌تان با خود می‌آورد تطبیق دهید.

هشت الگو در یک نگاه

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

الگو ۱: تصویر محصول مرکزی، قالب Apple

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

چه زمانی مناسب است. صفحه iPhone اپل در ۲۰۲۶ هنوز از هیرو تصویر محصول استفاده می‌کند چون هیچ چیزی مثل خود شیء، به‌خوبی نورپردازی‌شده، در مقیاس viewport، سخت‌افزار را تبدیل نمی‌کند. محصول باید به اندازه کافی زیبا باشد که صفحه را به تنهایی حمل کند. اگر محصول نامرئی است، یعنی SaaS، API، یا زیرساخت، این الگو دروغ است.

چطور کار می‌کند. یک تصویر هیرو مرکزی با تیتر اعلامی کوتاه و یک CTA. سلسله مراتب بصری در سه ضربه اجرا می‌شود:

۱. محصول قاب را حمل می‌کند ۲. ادعا زیر محصول به زبان ساده می‌نشیند ۳. عمل یک CTA واحد است، بدون جایگزین

فضای سفید ساختاری است، نه تزئینی. هیچ چیزی با محصول برای توجه رقابت نمی‌کند. صفحه iPhone فعلی Apple کمتر از ۱۵ کلمه بالای fold دارد، و هر کلمه بار معنایی دارد.

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

الگو ۲: صفحه دوتایی، وقتی محصول اثبات است

محصول شواهد است و تیتر فقط قاب است. این پاکیزه‌ترین الگوی B2B است وقتی UI شما بهتر از متن نشان می‌دهد که محصول چه کاری انجام می‌دهد.

چه زمانی مناسب است. صفحه دوتایی متعلق به محصولات B2B SaaS با UI خودتوضیح است. Hex در ۲۰۲۶ یک هیرو صفحه دوتایی داشت که نوت‌بوک محصول نیمه راست را پر می‌کرد و ادعای ارزش در سمت چپ بود.

چطور کار می‌کند. نیمه چپ روایت را حمل می‌کند. نیمه راست اثبات را حمل می‌کند. طرح‌بندی بار شناختی را به‌خوبی تقسیم می‌کند.

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

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

الگو ۳: دمو تعاملی، وقتی دیدن یعنی فروختن

لمس محصول متقاعدسازی سریع‌تری نسبت به خواندن درباره‌اش است. این را ارسال کنید وقتی اولین اعتراض بازدیدکننده این است: "نمی‌دانم آیا می‌توانم این کار را انجام دهم."

چه زمانی مناسب است. صفحه اصلی Webflow در ۲۰۲۶ به شما اجازه می‌دهد قبل از خواندن یک تیتر، کنواس را بکشید، رها کنید، و با آن تعامل کنید. این حرکت درستی برای محصولی است که ارزش پیشنهادی‌اش لمسی است.

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

CTA زیر منطقه تعامل قرار دارد، نه بالای آن. ساختار Webflow می‌گوید: اول محصول را لمس کنید، سپس درباره ثبت‌نام صحبت می‌کنیم. اقناع قبل از call to action می‌آید.

کجا شکست می‌خورد. عملکرد. یک هیرو تعاملی یک بسته JavaScript است، و بسته‌های JavaScript امتیازات Lighthouse موبایل را از بین می‌برند. اگر اکثریت ترافیک شما از موبایل می‌آید، این الگو نیاز به سرمایه‌گذاری جدی مهندسی دارد.

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

الگو ۴: ویدیو اول، وقتی موشن پیام است

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

چه زمانی مناسب است. Mux زیرساخت ویدیو می‌سازد. هیروی آنها در ۲۰۲۶ از ویدیو استفاده می‌کند چون نشان دادن محصول یعنی نشان دادن خود ویدیو.

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

ویدیو تزئین نیست، دمو محصول است. یک ثانیه تماشا آنچه تیتر در ۴۰ کلمه توضیح می‌دهد را منتقل می‌کند. رسانه و پیام یکی هستند.

کجا شکست می‌خورد. پهنای باند و زمان بارگذاری. یک ویدیو هیرو که در کمتر از دو ثانیه روی اتصال موبایل بارگذاری نمی‌شود بدتر از یک تصویر ثابت با دکمه پخش تبدیل می‌کند.

هیروهای ویدیویی نیاز به بهینه‌سازی تهاجمی دارند:

• WebM فشرده‌شده یا AV1، نه MP4
• فریم پوستر فوری در حالی که ویدیو بارگذاری می‌شود
• بارگذاری تنبل در موبایل برای صرفه‌جویی در هزینه روی صفحه‌های کوچک‌تر

همچنین وقتی ویدیو B-roll عمومی از افراد خوشحال در دفاتر باز است شکست می‌خورند. آن ویدیو هیچ چیزی نمی‌گوید و ثانیه‌هایی از زمان بارگذاری هزینه می‌کند تا هیچ نگوید.

---

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

---

الگو ۵: متن تایپوگرافیک بزرگ، وقتی برند ادعا را حمل می‌کند

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

چه زمانی مناسب است. صفحه اصلی Klim Type Foundry در ۲۰۲۶ از خود تایپ به عنوان هیرو استفاده می‌کند. تیتر در یکی از قلم‌های خودشان، در مقیاس نمایش، با هیچ چیز دیگری که برای توجه رقابت کند، تنظیم شده است.

این الگو به هر برندی با اقتدار فرهنگی کافی توسعه می‌یابد که بیانیه بدون نیاز به پشتیبانی بصری جا می‌افتد.

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

تایپ همه چیز را حمل می‌کند. خط باید هم به یادماندنی و هم خاص باشد. Klim نمی‌گوید "فونت‌های زیبا برای برندهای مدرن." چیزی با وزن می‌گوید.

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

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

الگو ۶: تیتر انیمیشنی، وقتی خویشتنداری متمایزکننده است

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

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

این الگو زمانی کار می‌کند که محصول چندین ارزش پیشنهادی قوی دارد و یک تیتر ثابت نمی‌تواند همه آنها را بدون تبدیل شدن به یک جمله طولانی حمل کند.

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

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

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

• کلمات چرخه مبهم هستند ("transform"، "elevate"، "reimagine") و موشن تبدیل به سروصدا می‌شود
• موشن جایگزین یک ارزش پیشنهادی واقعی می‌شود به جای پشتیبانی از آن
• بیش از یک عنصر شروع به حرکت می‌کند، و صفحه شروع به احساس مثل یک اعلان push می‌کند

هر حالت شکست تضادی را که الگو را کارآمد می‌کند تضعیف می‌کند.

الگو ۷: دمو همکاری زنده، وقتی اثبات اجتماعی محصول است

درک "این الان واقعاً دارد کار می‌کند" یک ارائه قدرتمندتر از هر تیتری است. این را ارسال کنید وقتی ویژگی همکاری قابل مشاهده، بلادرنگ، و ذاتاً جذاب برای تماشا باشد.

چه زمانی مناسب است. Liveblocks زیرساخت همکاری بلادرنگ می‌سازد. هیروی آنها در ۲۰۲۶ نشانگرهای زنده از چندین کاربر را نشان می‌دهد که روی یک کنواس مشترک حرکت می‌کنند، با شاخص‌های حضور که نشان می‌دهد چه کسی در سند است.

محصول حضور همکاری است. هیرو حضور همکاری را نشان می‌دهد. هم‌ترازی دقیق است. این الگو زمانی کار می‌کند که ویژگی اصلی محصول قابل مشاهده، بلادرنگ، و ذاتاً جذاب برای تماشا باشد.

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

بازدیدکنندگان متوجه می‌شوند که یک ویدیو ضبط‌شده تماشا نمی‌کنند. این درک لحظه تبدیل است. "این الان واقعاً دارد کار می‌کند" یک ارائه قدرتمندتر از هر تیتری است که یک کپی‌رایتر می‌تواند بنویسد.

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

الگو ۸: بروتالیست مینیمال، وقتی مخاطب از بازاریابی آلرژی دارد

الگوی ضد است که موضع‌گیری است. بروتالیست مینیمال عمداً بازدیدکننده اشتباه را دور می‌کند و از بازدیدکننده درست از طریق خویشتنداری اعتماد کسب می‌کند.

چه زمانی مناسب است. صفحه اصلی Are.na در ۲۰۲۶ یک بلوک متن است. بدون تصویر هیرو، بدون انیمیشن، بدون دکمه CTA گرادیانت. توضیح می‌دهد پلتفرم چیست به زبان ساده و یک فیلد ورود به سیستم ارائه می‌دهد.

مخاطبی که Are.na خدمت می‌کند (هنرمندان، محققان، طراحانی که به الگوریتم‌های کیوریشن بی‌اعتماد هستند) از یک هیرو بازاریابی پولیش‌شده دور می‌شدند. الگوی ضد است که موضع‌گیری محصول است.

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

هر تعاملی کارکردی است (یک فیلد جستجو، یک فرم ورود)، هرگز تزئینی. هیرو بروتالیست مینیمال نشان می‌دهد: ما اینجا برای فروختن به شما نیستیم. ما اینجا برای کار کردن هستیم.

آن سیگنال دقیقاً مخاطبی را که این محصولات می‌خواهند انتخاب می‌کند، و همه دیگران را دور می‌کند. دور کردن یک ویژگی است.

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

چطور الگوی درست را برای مرحله قیف فروش خود انتخاب کنید

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

ترافیک سرد از تبلیغات پولی، شبکه‌های اجتماعی، یا SEO بالای قیف می‌آید. این بازدیدکنندگان برند شما را نمی‌شناسند و با شک می‌رسند.

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

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

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

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

چک‌لیست چهارسوالی قبل از ارسال

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

۱. آیا این الگو با دمای ترافیک من مطابقت دارد؟ ترافیک سرد به اضافه یک بیانیه تایپوگرافیک بزرگ به اضافه یک خط ضعیف مساوی است با یک هیرو که هیچ اسکرولی کسب نمی‌کند. داده‌های UTM و آنالیتیکس خود را قبل از فرض اینکه ترافیک شما گرم است بررسی کنید. اکثر تیم‌ها درجه گرمی ترافیک خود را بیش از حد تخمین می‌زنند.

۲. آیا اثبات قابل مشاهده بالای fold وجود دارد؟ یک ادعا بدون اسکرین‌شات محصول، نام مشتری واقعی، یا عدد ملموس یک اظهار است. اظهارات نیاز به اعتمادی دارند که هنوز کسب نکرده‌اید. اثبات اعتماد را در یک فریم کسب می‌کند.

۳. آیا دقیقاً یک CTA وجود دارد؟ دو CTA تمرکز را تقسیم می‌کنند. سه CTA فلج تصمیم ایجاد می‌کنند. هیرو جای ارائه گزینه نیست. یک عمل، یک دکمه، یک نتیجه.

۴. آیا این هیرو در کمتر از ۲.۵ ثانیه روی اتصال 4G بارگذاری می‌شود؟ هیروهای ویدیویی و دموهای تعاملی ریسک‌های عملکردی هستند که باید اندازه‌گیری شوند، نه فرض. هیرویی که امتیاز عملکرد Lighthouse شما را زیر ۷۰ می‌اندازد در هر بازدید موبایل، به آرامی، هر روز، برای شما هزینه تبدیل دارد.

اگر همه چهار را پاس کردید، ارسال کنید. اگر یکی را رد کردید، فقط آن یک چیز را قبل از لمس کردن هر چیز دیگری اصلاح کنید. چک‌لیست ترتیبی است: سوال ۱ بنیادی‌تر از سوال ۴ است.

سوالات متداول

چه چیزی بخش هیرو را "تبدیل‌کننده" می‌کند؟

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

کپی هیرو چقدر باید طولانی باشد؟

به اندازه کافی کوتاه که محصول اجازه می‌دهد. هیرو iPhone اپل زیر ۱۵ کلمه بالای fold دارد. یک تیتر، یک ساب اختیاری، یک CTA را هدف بگیرید. هر کلمه بالای آن تعداد باید یک باور خاص را که نسخه کوتاه‌تر نمی‌تواند کسب کند توجیه کند.

آیا CTA هیرو باید بگوید "شروع کنید"؟

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

چطور بفهمم هیرویم کار می‌کند؟

عمق اسکرول، نرخ کلیک CTA، و نرخ bounce از ترافیک پولی. ترافیک ارگانیک سوگیری انتخابی دارد و اعداد شما را باد می‌کند. اگر بیش از ۶۰-۷۰ درصد بازدیدکنندگان پولی بدون اسکرول bounce می‌کنند، هیرو شکست می‌خورد.

سریع‌ترین راه برای بهبود یک هیرو موجود چیست؟

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

بگذارید هیرو شما دیگر یک تصمیم پیش‌فرض نباشد

اکثر هیروها ارسال می‌شوند چون کسی در یک فایل Figma گفت "بیایید با چیزی مثل Linear برویم" و هیچ‌کس به اندازه کافی سخت مقاومت نکرد. آن هیرو طراحی نشده. بدون فهمیدن اینکه چرا برای ترافیک خاص، پیچیدگی محصول، و سطح آگاهی مخاطب Linear کار می‌کند قرض گرفته شده.

هشت الگو وجود دارد. هر کدام یک use case، یک مکانیزم، و یک حالت شکست دارد. برندهای این مقاله (Apple، Hex، Webflow، Mux، Klim، Loops، Liveblocks، Are.na) از این الگوها تصادفی استفاده نمی‌کنند. هر یک از آن هیروها نتیجه یک تصمیم عمدی درباره اینکه چه کسی روی صفحه فرود می‌کند و آن بازدیدکننده قبل از برداشتن گام بعدی باید به چه چیزی باور داشته باشد است.

الگو را با بازدیدکننده تطبیق دهید. با انضباط اجرا کنید. قبل از طراحی مجدد اندازه بگیرید که کار کرده.

برای teardownهای UI بیشتر در این عمق، راهنمای طراحی صفحه فرود را بخوانید و breakdownهای UI بیشتر را مرور کنید. اگر می‌خواهید Brainy آن را بسازد: از Brainy بخواهید صفحه فرود شما را بسازد.