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.
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.
A well-designed, visually prominent, and user-friendly hero section provides you with the following benefits:
A hero section has four primary elements that you should be familiar with:
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.
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.
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.
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.
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
Create effective, high-quality hero sections that welcome users and increase conversion rate with the following best practices:
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:
Before creating an effective hero section for your digital product, review the following most frequently asked questions.
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.
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.
A welcoming, visually prominent, and thought-out design with a confident, friendly language tone makes a hero section effective.
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).
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.
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:
No, but you can expand the hero section to go under the navigation menu region if you use a hero background video or image
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.
LogRocket's Galileo AI watches sessions and understands user feedback for you, automating the most time-intensive parts of your job and giving you more time to focus on great design.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
While Apple’s Liquid Glass can’t yet be perfectly recreated with CSS or Figma, we can still think about how to adopt the effect thoughtfully in our designs.
Figma Make is here to automate your design-to-code workflow. I tested it. Let’s talk about the good, the bad, and the straight-up weird.
After designing AI search systems, I’ve seen what builds trust — and what kills it. Here’s my take on what really works.
I used to think ‘clean’ design meant hiding things. Turns out, less isn’t always better. This blog walks through lessons from my own overdesign moments.