Web Design & UX

Hero Section

Quick Definition

The hero section is the large above-the-fold introduction at the top of a page, typically containing the main headline, subheading, primary CTA, and key visual.

In context

Hero sections set the page's tone and answer 'why should I keep reading?'. Strong heroes communicate value clearly within 3 seconds. Hero LCP optimization is one of the biggest Core Web Vitals levers.

Have a question this didn't answer?

Book a free 60-minute strategy call. We'll explain how this concept applies to your specific situation.

Book a Free Call Browse 50+ Detailed Answers

Related terms

Mobile-First Design

Mobile-first design starts with the mobile layout and progressively enhances for larger screens, rather than designing desktop and shrinking down.

PWA (Progressive Web App)

A PWA is a web application that uses modern web capabilities to deliver an app-like experience — installable, offline-capable, push notifications.

Page Builder

A page builder is a visual editor that lets non-developers build web pages by dragging and configuring pre-built components.

UI (User Interface)

UI is the visual layer of a product — buttons, layouts, typography, colour, and interactive elements that users see and interact with.

Web Accessibility (a11y)

Accessibility is designing and building websites that work for all users, including those with visual, auditory, motor, or cognitive impairments.

UX (User Experience)

UX covers everything that affects how a user feels when interacting with a product — usability, clarity, performance, accessibility, and overall satisfaction.

Back to all terms