Interface Lab
Login
Back to knowledge
Design Systems Page Patterns

Landing Page First-Viewport Signal

A landing first viewport must clearly show what the brand, product, person, or place is and hint at the next section.

landingherofirst-viewport

Design Principle

The first viewport should not only create atmosphere; it should show identity, value, and the next exploration path.

Principle

The first viewport should not only create atmosphere; it should show identity, value, and the next exploration path.

Design action

Landing H1 should be the brand, product, object name, or clear offer; use a real or generated image to carry the subject and keep a hint of the next section visible.

Examples

Positive example: Brand pages, product pages, portfolios, and event pages. Counterexample: The H1 is an abstract slogan rather than the object name.

Apply when

Brand pages, product pages, portfolios, and event pages. Users need to understand the object quickly.

Source notes

Source note: Synthesized from GOV.UK, Carbon, Polaris, Atlassian, Design.Systems, Design Systems Repo, and product-pattern libraries. GOV.UK Design System Patterns: https://design-system.service.gov.uk/patterns/ Carbon Patterns: https://carbondesignsystem.com/patterns/ Shopify Polaris: https://polaris-react.shopify.com/ Atlassian Design System: https://atlassian.design/ Design Systems Repo: https://designsystemsrepo.com/

Agent Directive

Landing H1 should be the brand, product, object name, or clear offer; use a real or generated image to carry the subject and keep a hint of the next section visible.