Web design vocabulary
Vocabulary
Layout, type, motion, components, accessibility, performance, and the seams that hold them.
Juan M. Cornejo
Notes, no. 04
Layout, type, motion, components, accessibility, performance, and the seams that hold them. Each term with what it does and how to say it.
1Web design vocabulary
Part 01
The named regions of a web page, top to bottom.
The first screen of a product site, top to bottom: the bar, the art, one headline and its filled button.
The named regions of a web page, top to bottom.
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.
Part 02
The terms that make a page respond, align, and stack correctly. Speaking these gets you robust layouts.
The terms that make a page respond, align, and stack correctly. Speaking these gets you robust layouts.
The visible area of the browser/screen. Layouts adapt to its width and height.
Layout that adapts fluidly across phone, tablet, and desktop sizes.
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.
Part 03
Type on the web has its own units and rules.
Type on the web has its own units and rules.
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.
Vertical space between lines. ~1.5 for body keeps text legible.
Consistent vertical spacing so text sits on a regular baseline grid.
Type that scales smoothly with viewport width (often via CSS clamp()).
Part 04
Images, icons, and the tags that make them fast and crisp.
A landing page on a phone. The photograph carries the page, and two buttons carry its actions.
Images, icons, and the tags that make them fast and crisp.
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.
Deferring off-screen images until needed, speeding up first load.
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.
Part 05
How a web page responds to scroll, hover, and clicks.
How a web page responds to scroll, hover, and clicks.
The visual change when a cursor is over an element. Desktop only, design taps for mobile.
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.
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.
Part 06
The terms for making a page fast and findable, increasingly part of "design."
The terms for making a page fast and findable, increasingly part of "design."
Using meaningful tags (not just divs) so browsers, SEO, and screen readers understand structure.
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.
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.
Part 07
Whole-page web archetypes and reading patterns. Naming one saves a paragraph.
Whole-page web archetypes and reading patterns. Naming one saves a paragraph.
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.
Elsewhere
another notebook UI Design vocabulary
Brand vocabulary
UI Design vocabulary