10 best hero section examples and what makes them effective

Nowadays, many UX designers use hero sections to improve their user’s first impression with a product and guide them to accomplish their intentions quickly. It’s become so common that having an effective, user-friendly hero section is now a standard element in any modern digital product.

However, successful designers implement solutions that go beyond basic, traditional hero sections, since a thoughtful design can drastically improve conversion rate and set you apart from your competitors.

To help you get started, this article explains the basics of hero section design and shows you how to create effective, welcoming hero sections by examining strong examples from popular products.

Editor’s note: This blog was rewritten 30 June 2025 to provide examples of the best hero sections, cover steps for creating an effective hero section, and answer the most frequently asked questions about hero sections. Special thanks to the original author, Chinwe Uzegbu, for her contributions to the first version of this post.

What’s a hero section?

A hero section refers to a banner-like, visually prominent UI segment that appears at the top of a specific digital product screen, usually covering the whole or a large portion of the visible area of the initial screen. The key purpose of the hero section is to welcome users by making a better first impression and guide them to desired actions by skipping the primary navigation mode.

Almost all modern websites use a hero section, but designers also often use it to welcome users to any type of digital product screen (e.g., in mobile app screens). Most modern websites display hero sections right after the primary header segment (logo and the menu) or embed the whole header segment within the hero section.

Benefits of adding a hero section

A well-designed, visually prominent, and user-friendly hero section provides you with the following benefits:

• Welcomes users — An effective hero section makes a good first impression by highlighting the overall product’s impact and benefits in a friendly way
• Summarizes the product’s purpose — The hero section is the first element the user sees, so it can effectively describe the product’s purpose and benefits to users
• Provides instant actions for users — A well-designed hero section implements quick actions to guide users to select the most predictable user actions, such as signing up, accessing the product, starting a free trial, comparing available plans, reading documentation, etc.
• Increases conversion rate — A welcoming, effective hero section can advertise your digital product better than a paid advertising banner and invite more people to try your product, reducing the bounce rate

Elements of a hero section

A hero section has four primary elements that you should be familiar with:

 

 

Heading

A headline with a larger font size states the purpose of the product. This is usually a single-sentence that describes the product to users, however, some modern hero sections implement dynamic headline text with animations to get more advertising benefits.

Short description block

A text block, usually displayed in normal paragraph font size, appears after the primary heading as supporting text to give more context, elaborating benefits, and directing users to the given instant actions.

CTAs (call-to-action)

One primary CTA button for the most predictable, important action, and a secondary button for a suitable secondary action (only if needed) lets users choose the desired action instantly without spending time visiting the navigation menu or other pages.

Visual enhancements

You should enhance the visual look and feel with a visual aesthetic like a background color, hero image, illustrations, background video, animation, or interactive elements. The goal of the hero visual enhancements is to set the user’s mood for the product, make the first impression memorable, and represent the product’s brand identity.

Best hero section examples

Here are some hand-picked, well-designed hero section examples that you can use as inspiration to create a great hero section for your digital product:

1. Medium  —  A minimalistic hero section

Medium is a popular publishing platform that connects writers with worldwide readers. It uses a very minimalistic, clean design on every product screen and prioritizes content over visual aesthetics. The site has an ultra-minimalistic hero section, with only one CTA:

 

 

Medium’s hero section succeeds because of the these designs elements:

• Minimalistic — This hero section only uses a three-word heading, a short supporting text, one CTA, and a basic illustration without excessive visuals. Its design proves that simplicity can be a powerful marketing strategy
• Optimized CTA — The CTA button matches the primary purpose of the whole platform, so users can instantly get started without thinking twice about the CTA button
• Well-thought positioning — Minimalism can be boring if you pack elements together or use excessive whitespace. This hero section cleverly balances the spacing between hero section elements for a comfortable visual experience

2. GitHub  —  An inviting hero section with a creative CTA

GitHub is a popular collaborative software development platform. Its landing page has an inviting hero section with a professional design and active color selections.

This hero section extends the primary CTA with a text input element to enter the user’s email and continue with the signup process:

 

 

This hero section includes the following design considerations to make it more effective:

• Confident, friendly, and inviting tone — The hero section advertises the product in a confident tone and invites users to the platform in a friendly way. The hero section even plays a minimal animation when the user hovers over the primary CTA
• Well-thought CTA design — GitHub captures the user’s email just before the CTA to hint that the registration process is so smooth, increasing the overall conversion rate
• Distraction-free, active background — It uses active neon color distribution with some friendly 3D characters as the hero section background for a distraction-free, active theme

3. Sketch  —  Going beyond the traditional hero section layout

Sketch is a popular, fully featured design software for macOS. The landing page of the Sketch app goes beyond the traditional hero section layout and separates the heading and other elements into two columns, as shown in the following preview:

 

 

This hero section succeeds because of the these designs elements:

• Creative layout — Changes the traditional hero section layout to greet users first, and then advertise and display the CTA, implying that the product is well-known to all designers
• One CTA button, two signifiers — Instead of a simple text-only CTA, this hero section uses an icon button. Its label invites the user to get started, and the icon implies that the user needs to download software before getting started
• Effective but neutral CTA hint — The text block after the CTA button states system requirements effectively in a grey color font without affecting the welcoming hero section theme

4. Cursor — Displaying the product preview within the hero section

Cursor is a modern, AI-powered code editor that lets developers boost coding productivity with generative AI. Its landing page uses a colorful hero section with a preview of the actual product:

 

 

This hero section includes the following design considerations to make it more effective:

• Active, energetic background — It uses slightly faded neon colors to highlight confidence and energy without affecting the overall minimalistic appearance of the website
• Dynamic primary CTA button — The primary CTA offers an instant action to download the product with a dynamic label and icon based on the user’s operating system (e.g., shows “Download for Linux” with the Linux’s official mascot icon on GNU/Linux platforms)
• Excellent product preview placement — The code editor preview appears as a real window and indicates the primary features of the product — it doesn’t take up more hero section space or get cropped into a smaller preview

5. Zoom  —  A hero section with product showcase video

Zoom is a popular communication platform that offers video conferencing, live chat, audio communication, and collaborative features. The Zoom platform’s website integrates a product showcase video into its hero section as follows:

 

 

This hero section succeeds because of the these designs elements:

• Effective product showcase — The hero video segment effectively advertises the whole platform in a short video by showing previews of primary features
• Concise text blocks  — The heading and supporting text block draw the big picture of the Zoom platform by stating the purpose and features in just three short sentences
• Better spacing and typography — Each element in the hero section uses enough margins to separate the textual segment and video showcase into two groups, and optimal font sizes to properly fill the hero section, also keeping necessary whitespace

6. Linktree  — An energetic hero section with an interactive animation

Linktree is a popular web-based service that lets users create a single profile by linking all social media profile links. Its landing page uses maximalist design principles and includes an energetic, eye-catching hero section with an interactive animation:

 

 

This hero section includes the following design considerations to make it more effective:

• Useful interactivity — It let users view some sample Linktree profiles by clicking on the interactive animation that slightly follows the user’s mouse movement
• Maximalist principles — Linktree uses bold, energetic typography for the heading and somewhat vibrant color selections for typography and backgrounds
• Clear, simple, connected flow — First, the heading introduces the product, next, the supporting text block elaborates it and invites, then, the CTA lets the visitor become a user instantly

7. Codecademy  —  A dynamic hero heading with typing effects

Codecademy is a popular online learning platform that offers various courses for developers, data scientists, AI engineers, and security engineers. The Codecademy website’s homepage has a unique hero section that attracts visitors with a dynamic heading and a slideshow:

 

 

This hero section succeeds because of the these designs elements:

• Dynamic heading — The heading uses a typing effect and changes the last word to construct different sentences. The typing effect uses a coding font with a blinking cursor element and syncs with the slideshow to make the hero section visually attractive and related to technology and coding
• CTA section group — Codecademy groups two primary CTA elements and one secondary CTA link into a frame and names it as “Get started today” to boost the user’s decision-making speed
• Minimalistic creativity — The heading and slideshow images use layered positioning using maximalist design principles without affecting the overall minimalistic design theme

8. Nissan  — A hero section with a full-size background video

Nissan is a well-known Japanese multinational automotive manufacturer. Nissan’s official global website has a hero section that covers the whole header section and includes a powerful, marketing-friendly background video:

 

 

This hero section includes the following design considerations to make it more effective:

• Excellent background video — The background video advertises its products’ quality, stability, and technology, and has colors that match the hero section’s color scheme
• Video and element positioning — The hero section video goes under the main navigation and video without affecting the overall visibility of those elements. Alongside this, the hero section heading, CTA, and slider navigation controls are positioned in a way that doesn’t obstruct the video
• No supporting text block — The hero section doesn’t include a description block to prioritize the video and hint that no introduction is needed to describe its business, since it was founded almost a century ago

9. Contiant  —  Animated hero section heading with underlined words

Contiant is an innovative open-banking-based payment platform. Its minimal hero section design has an animated heading, a concise description block, and an interactive, descriptive animation:

 

 

This hero section succeeds because of the these designs elements:

• Dynamic heading — The first segment of the heading changes over time with a sliding effect and advertises the product’s benefits effectively
• Creative double underline — The heading sentence highlights the “Open Banking” term with a creative double underline without using the traditional typography underline
• Interactive, animated diagram — The right side of the hero section includes a simple, animated, interactive diagram that depicts the flow of a sample financial transaction. It animates arrows, moves slightly with mouse movements, and faces the CTA side as a UX-friendly visual enhancement

10. Krisp  — Effectively using the space before the hero heading

Krisp is a popular AI-powered note-taking and noise cancellation software that works with all popular online corporate communication apps like Zoom. The Krisp website’s hero section advertises the product well by also cleverly using the space before the headline:

 

 

This hero section includes the following design considerations to make it more effective:

• Effective pre-heading element — Krisp effectively uses the space before the heading to highlight that its software will work on all popular corporate communication platforms, boosting confidence in the advertising purpose of the hero section
• Textual tags on the product preview — It displays notable features within the static product preview image to describe the product without taking the user’s focus away from the CTA and heading section
• Effective, non-distractive highlights — Krisp uses a gradient fill and simple bold text to highlight important text segments rather than using intrusive styles

Best practices for designing better hero sections

Create effective, high-quality hero sections that welcome users and increase conversion rate with the following best practices:

• Use only elements that bring value — Users see the hero section first and tend to judge the whole product from it, so you should prevent user cognitive overload by avoiding visual clutter in hero sections
• Use concise sentences and CTA labels — A well-designed hero section should help any visitor understand the product in a few seconds, and offer instant, self-explanatory CTA buttons to continue with intended actions
• Use a welcoming and confident tone — Speaking confidently about the product, and also being friendly and welcoming, is the secret behind turning a random visitor into a user through the hero section
• Use high-quality but lightweight imagery — Hero sections expand over a large percentage of the screen, so you should use high-resolution imagery or vector graphics. They also should load instantly instead of on demand (lazy-loaded)
• Form a better flow — Connect elements from the headline to the CTA section and form a virtual visual flow from what they describe. A generic hero section introduces the product from the heading, elaborates benefits in the description block, and offers instant actions from CTAs

Steps to create an effective hero section

Anyone can create a hero section by assembling hero section sub-elements or using a pre-designed template, but you should consider going through the following steps if you wish to create an effective, high-quality hero section that brings benefits for both users and business organizations:

1. Always start with a low-fidelity version of the hero section, such as a simple pen-and-paper sketch, to define the content and user interactions first, before thinking about higher-level UI details. You can sketch several hero section versions before deciding on one
2. Brainstorm with headings and choose the most engaging, welcoming, marketing-friendly, and confident one
3. Write a concise supporting text block that connects with the overall idea of the heading and invites the user to see the CTA section
4. Identify the most predictable, crucial action that most users wish to do and that brings benefits to the organization (e.g., signing up, downloading the product, etc.). Choose an effective, concise CTA label for the primary action. After that, choose a secondary CTA if there’s an alternative flow that benefits users and the organization
5. Select the best low-fidelity hero section and start turning it into a high-fidelity hero section design
6. Position hero section sub-elements within the hero section space and decide on the most suitable visual enhancement using your creative design skills. Finalize the base hero section by adding UI signifiers
7. Finalize the hero section by adding extra hero section sub-elements only if they bring value (e.g., pre-heading section, small neutral descriptions after CTAs, etc.)

FAQs about hero section design

Before creating an effective hero section for your digital product, review the following most frequently asked questions.

What should be in a hero section?

A generic hero section consists of a heading, supporting text block, CTA button, and visual enhancement to get the user’s attention, welcome them, and offer instant actions to continue using the product.

How big should a hero section be?

Cover a large portion of the visual screen. Some hero sections cover the whole visible screen, and some cover a part of it. Decide on your approach based on the elements that appear after the hero section and your design preferences.

What makes a hero section effective?

A welcoming, visually prominent, and thought-out design with a confident, friendly language tone makes a hero section effective.

Should hero sections have video backgrounds?

This depends on the designer’s preferences and product domain. If designers can advertise the product without affecting the other parts of the website/app, video backgrounds make the hero section more effective (e.g., the Nissan website).

What are other elements that you can add to the hero section?

You can add a pre-heading element, a description block after the CTA section, and a text input before the primary CTA button. There are other ways to innovate as well but make sure that they bring value to the user.

Can you add a hero section to any digital product and get the same benefits?

No, hero sections aren’t effective for some product types (e.g., displaying popular products in an ecommerce website homepage is better than letting users enter the store through a hero section, and displaying forum posts is better than letting users enter the forum with a hero section).

However, in scenarios where a single hero section doesn’t bring any benefits, you can consider using multiple hero sections with sliders or in a grid if possible:

 

 

Is the primary navigation menu a part of the hero section?

No, but you can expand the hero section to go under the navigation menu region if you use a hero background video or image

Conclusion

In this article, we discussed the basics of hero section design, learned best practices, and evaluated some popular digital products that implement well-designed, effective hero sections. We also created a step-by-step guide to create a better hero section design and answered some FAQs.

A hero section is the element that the user sees first, so you should create it properly with a welcoming, confident, high-quality design to improve the first impression and increase the conversion rate. A well-designed hero section not only boosts organization revenue but also guides every user to accomplish their needs productively.