در دیزاین رابط کاربری، هیرو (Hero) یک نقطه مهم است. این قسمت اولین تصویر یا ویدیویی است که کاربر در یک صفحه مشاهده می‌کند. هیرو معمولاً شامل تصویر، متن و یک دکمه دعوت به اقدام است. هدف از هیرو نشان دادن هدف سایت و ایجاد اشتیاق در کاربران برای مرور سایت است.
برای دیزاین نسبت ابعاد هیرو، می‌توانید موارد زیر را در نظر بگیرید:
۱. نسبت ابعاد : ابعاد هیرو باید به گونه‌ای تنظیم شود که بخشی از محتوای viewport بعدی قابل مشاهده باشد. این کار باعث جذب کاربران به مرور سایت می‌شود.
۲. تنوع نمایشگرها و واکنش‌گرایی : همه کاربران به یک شیوه صفحات را مرور نمی‌کنند. برخی از آن‌ها ممکن است تا ۱۵۰٪ زوم کنند، در حالی که دیگران ده‌ها زبانه باز با اندازه‌های مختلف داشته باشند. همچنین اطمینان حاصل کنید که هیرو برای نمایشگرهای مختلف مناسب است. دیزاین هیرو باید همزمان با نمای عمودی (برای تلفن‌همراه) و افقی (برای مانیتور) باشد.
۳. واحدهای نسبی : توجه کنید که چگونه مقداردهی ارتفاع با واحدهای نسبی مانند vh و % تضمین می‌کند که تصویر همیشه متناسب با نمای عمودی باشد.
