Web · Reference
Web design vocabulary
Layout, type, motion, components, accessibility, performance, and the seams that hold them. Each term with what it does and how to say it.
The named regions of a web page, top to bottom.
Description
The named regions of a web page, top to bottom.
Terms
The top strip, usually holding the logo and primary navigation. Often sticky.
The navigation bar, links to top-level destinations, plus a key action.
The three-line icon that opens nav on small screens.
The big top section: headline, subtext, and a main call-to-action.
What's visible before scrolling. Prime real estate for your key message.
A full-width horizontal band of related content down the page.
A vertical column beside the main content for nav, filters, or meta.
The bottom region with secondary links, legal, and contact.
The terms that make a page respond, align, and stack correctly. Speaking these gets you robust layouts.
Description
The terms that make a page respond, align, and stack correctly. Speaking these gets you robust layouts.
Terms
The visible area of the browser/screen. Layouts adapt to its width and height.
Layout that adapts fluidly across phone, tablet, and desktop sizes.
1024 · 1280px
A screen width where the layout changes (e.g. 1→2→3 columns).
Two-dimensional layout in rows and columns, best for page-level structure.
One-dimensional layout along a row or column, great for toolbars and alignment.
A centered wrapper that caps content width on large screens.
The space between columns in a grid.
Empty space that gives content room to breathe, a feature, not waste.
Sticky stays as you scroll within its parent; fixed pins to the viewport.
Which overlapping element sits on top. Higher z-index = front.
Type on the web has its own units and rules.
Description
Type on the web has its own units and rules.
Terms
vs built-in stack
A loaded custom font vs the device's default stack (faster, no download).
Sizing units: px is fixed; rem scales to the root; em to the parent. rem is the responsive default.
Characters per line. ~50 to 75 reads best; too wide tires the eye.
aids readability.
Vertical space between lines. ~1.5 for body keeps text legible.
Consistent vertical spacing so text sits on a regular baseline grid.
2vw, 2rem)
Type that scales smoothly with viewport width (often via CSS clamp()).
Images, icons, and the tags that make them fast and crisp.
Description
Images, icons, and the tags that make them fast and crisp.
Terms
The tiny icon in the browser tab and bookmarks.
The image (and meta) shown when a link is shared on social/chat.
Higher-resolution assets so images stay sharp on dense displays.
Serving differently sized images per screen so phones don't load desktop files.
as they scroll in
Deferring off-screen images until needed, speeding up first load.
scalable) vs pixels
SVG scales infinitely (logos, icons); JPG/PNG/WebP are pixel-based (photos).
Width:height proportion locked so media doesn't distort or shift layout.
A full-bleed image behind content, often with a dark overlay for text legibility.
How a web page responds to scroll, hover, and clicks.
Description
How a web page responds to scroll, hover, and clicks.
Terms
The visual change when a cursor is over an element. Desktop only, design taps for mobile.
you scroll down
Elements animate into view as they enter the viewport.
Background scrolls slower than foreground for a depth effect.
Clicking a nav link glides to a section instead of jumping.
reach the bottom ↻
New content loads automatically as you near the page end.
Placeholder shapes shown while content loads.
Clicking an image opens it enlarged over a dimmed backdrop.
A persistent action bar pinned to the bottom/top as you scroll.
The terms for making a page fast and findable, increasingly part of "design."
Description
The terms for making a page fast and findable, increasingly part of "design."
Terms
<main> <footer>
Using meaningful tags (not just divs) so browsers, SEO, and screen readers understand structure.
a sofa"
Text describing an image for screen readers and when images fail to load.
The title/snippet shown in search results and tabs. Key for SEO and click-through.
(speed metrics)
Google's load-speed, layout-stability, and responsiveness metrics that affect ranking.
Designing for the small screen first, then enhancing up. Matches how most people browse.
Making the site usable for everyone, contrast, keyboard nav, focus, ARIA labels.
Whole-page web archetypes and reading patterns. Naming one saves a paragraph.
Description
Whole-page web archetypes and reading patterns. Naming one saves a paragraph.
Terms
A single focused page built to convert one audience toward one action.
A whole site/story on one scrolling page, navigated by anchors.
The classic marketing layout: hero, then a grid of feature cards.
A single readable column with a title, meta, and flowing body text.
How people scan text-heavy pages, across the top, then down the left. Put key info there.
The eye's path on simple pages, top-left → top-right → diagonal → bottom. Place logo, CTA, action along it.