Component: Hero

Summary

The hero section is the most prominent part of a webpage, often the first thing users see. It sets the tone, communicates the primary message, and drives user engagement.

A well-designed hero section ensures clarity, visual appeal, and ease of interaction, helping users understand the website’s purpose at a glance.

What’s a Hero?

A hero component is a large, visually prominent section at the top of a webpage. It typically includes key elements such as a headline, supporting text, a visual (image or video), and a call-to-action (CTA) button. Its purpose is to quickly communicate the website's value proposition and guide users toward a desired action.

Common Elements of a Hero Section

  • Headline: A strong, clear message that summarizes what the page or product offers.

  • Subheading: Additional supporting information that provides context.

  • Visuals: High-quality images, illustrations, or videos that reinforce the message.

  • Call to Action (CTA): A button or link prompting users to take the next step (e.g., “Learn More,” “Sign Up,” or “Get Started”).

  • Background Design: Can be solid colors, gradients, subtle patterns, or full-width images to enhance aesthetics.

UX Best Practices for Hero

Expand all Close all
Clear Value Proposition

The hero section should immediately communicate what the website or product is about and how it benefits the user.

Best Practices:

  • Use simple, direct language that highlights the key benefit.

  • Avoid jargon or vague messaging.

  • Example: Instead of "Innovative Solutions for Every Business," use "Streamline Your Operations with AI-Powered Tools."

Visual Hierarchy

Organize elements so users' eyes naturally flow from the headline to the CTA.

Best Practices:

  • Make the headline the most prominent element, followed by supporting text and the CTA.

  • Use contrasting font sizes and colors to establish hierarchy.

  • Ensure a natural reading flow that guides users toward the CTA.

High-Quality, Relevant Imagery

Images or videos should support the message without distracting users.

Best Practices:

  • Use high-resolution visuals that align with the website’s purpose.

  • Avoid generic stock images; custom photography or illustrations create a stronger connection.

  • Optimize media to prevent slow page loading times.

Compelling Call to Action (CTA)

The CTA should be clear, visible, and actionable.

Best Practices:

  • Use action-oriented labels like "Get Started" or "Download Now."

  • Ensure the button is prominent and easy to click.

  • Place the CTA above the fold so users can engage without scrolling.

Simplicity and Focus

Keep the hero section clean and free of distractions.

Best Practices:

  • Limit elements to essential information: headline, subheading, visual, and CTA.

  • Utilize white space to avoid clutter and improve readability.

  • Avoid excessive links or pop-ups that detract from the main action.

Responsive and Accessible Design

The hero section must function well across devices and be accessible to all users.

Best Practices:

  • Ensure text is legible on all screen sizes.

  • Use alt text for images and proper contrast ratios for readability.

  • Make buttons large enough to tap on mobile devices.

Use Subtle Animations or Interactivity

Small animations can enhance engagement without being distracting.

Best Practices:

  • Use hover effects or smooth transitions to create a dynamic experience.

  • Avoid auto-playing videos or excessive motion effects that may overwhelm users.

  • Ensure animations enhance usability rather than slow down the experience

When to Use & When to Avoid

When to Use

  • On homepage and key landing pages to introduce the site’s purpose. Our design system offers multiple "hero component" options.  "Mega-heroes" are reserved for the homepage or highlighting very specific, high-profile pages.  Please contact the web team if you would like to use this option. 

  • When there is a clear action users should take (e.g., sign up, explore features).

  • For storytelling or visual engagement, particularly in marketing campaigns.

When to Avoid

  • If there’s no clear message or call to action.

  • On content-heavy pages where an introduction section may not be necessary.

  • If the page is purely informational and a hero would take up too much space.

Things to Consider

  • A/B Testing: Test different hero variations to see what resonates best with users.

  • Loading Speed: Optimize images and videos to ensure fast load times.

  • Mobile Optimization: Ensure content remains effective and engaging on smaller screens.

  • Alignment with Brand Identity: Keep the hero section consistent with overall branding and design.

Resources

Learn More

To learn more in depth about best practices for headings, visit the UX Planet for UX guidelines.

For Developers

You can visit Storybook for Inherited CSS Variables and Twig Variables for the hero component.