# NN/g — Homepage Design: 5 Fundamental Principles

- Source: https://www.nngroup.com/articles/homepage-design-principles/
- Captured: 2026-07-11
- Publisher: Nielsen Norman Group
- Content archetype: evidence-led professional guidance article
- Responsive class: **recomposed** — the desktop article/sidebar relationship becomes a single reading stream with a compact sticky contents control on mobile.

## Evidence key

- **Observed** records what was visible in the captured page or inspectable DOM/CSS.
- **Inference** is a design interpretation or a transferable lesson, not a claim about the publisher's intent.

## First impression

**Observed.** This is the least theatrical of the three references in this set and the strongest pure reading tool. A large, direct headline, author/date block, one-sentence summary, restrained serif body copy, and an explicit “In This Article” list establish the information contract before the article becomes long. On desktop, the article reads as a stable two-column system: a broad reading column and a narrower related-course rail. On mobile, the rail leaves the reading plane and the contents list becomes a compact blue orientation surface.

**Inference.** The page earns trust through editorial predictability. It lets examples, captions, and argument structure carry the experience instead of treating every section as a visual event. This is an excellent baseline for reference, research, policy, and professional-learning content.

## Content anatomy

1. Global NN/g navigation, search, cart, and login utilities.
2. Headline, author portrait, author link, date, and share action.
3. Bordered summary/deck stating the whole recommendation in one sentence.
4. Short introduction and a five-link “In This Article” contents list.
5. Five numbered principle chapters: access, identity/purpose, examples, actions/navigation, and simplicity.
6. Repeated evidence units: explanatory copy, interface screenshot or GIF, and an evaluative caption marked as a positive or negative example.
7. A durability section that qualifies the principles rather than merely concluding them.
8. Related courses/topics, further learning, related articles, newsletter, and a dense institutional footer.

**Inference.** Numbering the top-level argument does more than make the article scannable: it supplies a durable mental model that can survive a 25,000–31,000 px reading journey.

## Desktop presentation

- **Observed.** At 1440 px, the article begins around a 60 px outer margin. The main reading column is about 868 px wide and the related-course rail about 384 px, with generous separation between them.
- **Observed.** The rail remains visible beside substantial portions of the article. Its bordered course cards are visually quiet enough not to compete with the evidence column.
- **Observed.** Examples generally fill the reading-column width. Captions sit immediately below their evidence and use red crosses or green checks, italic text, and restrained color to make the editorial judgment legible.
- **Observed.** The top navigation is a wide horizontal utility bar. Search receives a full field; category navigation and account/commerce actions remain visible.
- **Inference.** The sidebar is a good example of monetization living inside an editorial grid without masquerading as article evidence. Its consistent boundary and heading keep the two functions distinct.

## Mobile adaptation

- **Observed.** At 390 px, the navigation collapses to menu, NN/g mark, search, and cart. The headline reduces from 40 px to 34 px while retaining its strong two-to-three-line shape.
- **Observed.** The article uses roughly 16 px side gutters and keeps the body at 20 px with a very open 37 px line height. Screenshots scale into the single column without horizontal overflow.
- **Observed.** “In This Article” becomes a pale-blue, sticky/collapsible surface. At the captured body position it preserves the current principle link while leaving most of the viewport to the article.
- **Observed.** Related courses and other rail material move below the article instead of being squeezed beside it.
- **Observed.** H2 size remains prominent, so section boundaries survive the loss of desktop whitespace.
- **Inference.** This is recomposition, not simple shrinkage: orientation stays near the reader, while secondary commercial content is deliberately deferred.

## Typography and reading rhythm

- **Observed.** Headings and interface text use Source Sans Variable; article prose uses Source Serif Pro Variable. The switch creates a clear “tool around text / text itself” distinction.
- **Observed.** The captured desktop H1 is about 40/51 px and body copy about 20/37 px; mobile H1 is about 34/44 px while body sizing remains approximately 20/37 px.
- **Observed.** Body paragraphs are long enough to develop an argument but are frequently interrupted by subheads, lists, links, screenshots, and captions.
- **Inference.** The exceptionally loose line height makes long serif passages approachable, although the desktop measure is broader than a conventional book-like column. Teams borrowing this system should test a slightly narrower measure for uninterrupted prose.

## Color and imagery

- **Observed.** The base is white with black type, electric-blue links, pale-blue navigation/contents surfaces, and small red/green evaluative markers.
- **Observed.** Imagery is almost entirely functional evidence: product screenshots, annotated examples, and animated interface demonstrations rather than atmospheric photography.
- **Observed.** Image captions explain why an example succeeds or fails; the image is rarely asked to stand alone.
- **Inference.** The transferable pattern is “visual plus judgment,” not the specific check/cross styling. Every image should pay rent by moving the argument forward.

## Navigation, progress, sharing, and related material

- **Observed.** A share action appears near the article header on desktop. The five-item table of contents provides local navigation near the top and becomes a compact orientation device on mobile.
- **Observed.** There is no decorative progress bar in the captured page. Orientation is semantic: numbered chapters, meaningful headings, contents links, and the persistent mobile contents surface.
- **Observed.** Related courses occupy the desktop rail; related topics and articles appear later in the journey.
- **Inference.** For long professional content, a visible argument map is more useful than percentage progress alone. A progress indicator could supplement, but should not replace, descriptive section names.

## Accessibility and performance

- **Observed.** Text contrast is strong, link color is consistent, headings expose a clear hierarchy, and most article images inspected had descriptive alternative text. Examples are also explained in adjacent captions, reducing reliance on the image alone.
- **Observed.** One author portrait exposed no useful alternative text in the inspected DOM. A fixed accessibility utility remains visible at the lower-left of the captures.
- **Observed.** Several demonstrations are GIFs. No reduced-motion rule was detectable in the accessible stylesheets inspected during this study; controls for those GIFs were not established.
- **Observed.** Many article images use lazy loading. The document is nevertheless very deep and media-rich, so decoding and layout work accumulate over a long session.
- **Inference.** A production implementation should provide pause/replace behavior for nonessential animated examples, preserve explicit dimensions for media, and ensure the sticky contents control is keyboard- and screen-reader-friendly.

## Transferable patterns

1. **Summary as contract.** State the article's conclusion before asking for a long read.
2. **Argument map before depth.** Put a short, descriptive contents list immediately after the introduction.
3. **Evidence-caption pair.** Keep each screenshot adjacent to a sentence that interprets it.
4. **Editorial/commercial separation.** Place related products in a visibly bounded rail and defer them on narrow screens.
5. **Semantic orientation.** Number chapters and use durable section names instead of relying only on scroll progress.
6. **Mobile-priority reordering.** Keep navigation close; move secondary conversion material after the article.

## What not to copy literally

- Do not reproduce NN/g's brand typography, link blue, course-card styling, or check/cross caption signature.
- Do not assume an 868 px prose measure works for every typeface or content density.
- Do not make a sticky mobile contents surface so tall that it obscures the paragraph being read.
- Do not ship animated examples without testing motion preferences and pause behavior.

## Implementation notes

- Use semantic `article`, `header`, `nav aria-label="On this page"`, ordered section IDs, `aside`, `figure`, and `figcaption` elements.
- Build the desktop grid with a minmax reading column and a bounded aside; below the content breakpoint, remove the aside from the grid and place it after the article.
- Derive the contents list from real headings at build time so labels, anchors, and visible chapter order cannot drift.
- Make the mobile contents control a progressively enhanced disclosure. Without JavaScript, it should remain an ordinary list of anchor links.
- Give screenshots intrinsic dimensions, responsive `srcset` candidates, descriptive alt text, and a caption that carries the evaluation in text.
- If adding active-section state, use `IntersectionObserver`, account for sticky-header offset, and expose state with `aria-current="location"`.

## Evidence limits

- This is a single-session inspection, not analytics evidence; effectiveness and “best performing” status were not measured.
- Full-page captures are browser-generated, height-capped overview strips. They reveal pacing and recurrence, not fine text or the exact playback state of GIFs.

## Visual references

- [Desktop hero](../assets/references/04-nngroup-homepage-principles/desktop-hero.png)
- [Desktop full-page pacing strip](../assets/references/04-nngroup-homepage-principles/desktop-full.png)
- [Desktop body detail](../assets/references/04-nngroup-homepage-principles/desktop-body.png)
- [Mobile hero](../assets/references/04-nngroup-homepage-principles/mobile-hero.png)
- [Mobile full-page pacing strip](../assets/references/04-nngroup-homepage-principles/mobile-full.png)
- [Mobile body detail](../assets/references/04-nngroup-homepage-principles/mobile-body.png)