# Web design vocabulary

> How the web actually fits together. Names for the moves.

Layout, type, motion, components, accessibility, performance, and the seams that hold them. Each term with what it does and how to say it.

Source: https://www.juanmnl.com/notes/web-vocabulary.html

## Page Anatomy

The named regions of a web page, top to bottom.

### Header

The top strip, usually holding the logo and primary navigation. Often sticky.

Say: "Put the logo and nav in a sticky header."

### Navbar

The navigation bar, links to top-level destinations, plus a key action.

Say: "Navbar: logo left, links center, CTA right."

### Hamburger menu

The three-line icon that opens nav on small screens.

Say: "Collapse the nav into a hamburger on mobile."

### Hero

The big top section: headline, subtext, and a main call-to-action.

Say: "Add a hero with one headline and one CTA."

### Above the fold

What's visible before scrolling. Prime real estate for your key message.

Say: "Keep the signup form above the fold."

### Section / content block

A full-width horizontal band of related content down the page.

Say: "Break the landing page into alternating sections."

### Sidebar

A vertical column beside the main content for nav, filters, or meta.

Say: "Add a left sidebar for docs navigation."

### Footer

The bottom region with secondary links, legal, and contact.

Say: "Add a footer with link columns and a newsletter field."


## Layout & CSS Concepts

The terms that make a page respond, align, and stack correctly. Speaking these gets you robust layouts.

### Viewport

The visible area of the browser/screen. Layouts adapt to its width and height.

Say: "Make it full-viewport height (100vh) hero."

### Responsive

Layout that adapts fluidly across phone, tablet, and desktop sizes.

Say: "Make the whole page responsive, mobile-first."

### Breakpoint

A screen width where the layout changes (e.g. 1→2→3 columns).

Say: "Switch to 3 columns at the 1024px breakpoint."

### CSS Grid

Two-dimensional layout in rows and columns, best for page-level structure.

Say: "Use CSS grid, 3 columns with 24px gaps."

### Flexbox

One-dimensional layout along a row or column, great for toolbars and alignment.

Say: "Lay the nav out with flexbox, space-between."

### Container & max-width

A centered wrapper that caps content width on large screens.

Say: "Constrain content to a 1200px centered container."

### Gutter

The space between columns in a grid.

Say: "Increase the gutter between cards."

### Whitespace / negative space

Empty space that gives content room to breathe, a feature, not waste.

Say: "Add generous whitespace around sections."

### Sticky / fixed

Sticky stays as you scroll within its parent; fixed pins to the viewport.

Say: "Make the nav sticky to the top on scroll."

### z-index / stacking

Which overlapping element sits on top. Higher z-index = front.

Say: "Put the modal above everything with a high z-index."


## Web Typography

Type on the web has its own units and rules.

### Web font vs system font

A loaded custom font vs the device's default stack (faster, no download).

Say: "Use a web font with a system-font fallback."

### rem / em / px

Sizing units: px is fixed; rem scales to the root; em to the parent. rem is the responsive default.

Say: "Size type in rem so it scales with user settings."

### Line length / measure

Characters per line. ~50,75 reads best; too wide tires the eye.

Say: "Cap body text at ~65 characters per line."

### Line height / leading

Vertical space between lines. ~1.5 for body keeps text legible.

Say: "Set body line-height to 1.6."

### Vertical rhythm

Consistent vertical spacing so text sits on a regular baseline grid.

Say: "Keep a consistent vertical rhythm down the page."

### Fluid / responsive type

Type that scales smoothly with viewport width (often via CSS clamp()).

Say: "Make the headline fluid with clamp()."


## Media & Assets

Images, icons, and the tags that make them fast and crisp.

### Favicon

The tiny icon in the browser tab and bookmarks.

Say: "Add a favicon and apple-touch-icon."

### OG image / social preview

The image (and meta) shown when a link is shared on social/chat.

Say: "Set an Open Graph image for link previews."

### Retina / 2x

Higher-resolution assets so images stay sharp on dense displays.

Say: "Export assets at 2x for retina screens."

### Responsive images / srcset

Serving differently sized images per screen so phones don't load desktop files.

Say: "Use srcset to serve right-sized images."

### Lazy loading

Deferring off-screen images until needed, speeding up first load.

Say: "Lazy-load images below the fold."

### SVG vs raster

SVG scales infinitely (logos, icons); JPG/PNG/WebP are pixel-based (photos).

Say: "Use SVG for icons, WebP for photos."

### Aspect ratio

Width:height proportion locked so media doesn't distort or shift layout.

Say: "Lock thumbnails to a 16:9 aspect ratio."

### Background image / overlay

A full-bleed image behind content, often with a dark overlay for text legibility.

Say: "Hero with a background image and a 40% dark overlay."


## Interaction & Motion

How a web page responds to scroll, hover, and clicks.

### Hover state

The visual change when a cursor is over an element. Desktop only, design taps for mobile.

Say: "On hover, lift the card with a shadow."

### Scroll animation / reveal

Elements animate into view as they enter the viewport.

Say: "Fade sections in as they scroll into view."

### Parallax

Background scrolls slower than foreground for a depth effect.

Say: "Add a subtle parallax to the hero."

### Smooth scroll / anchor

Clicking a nav link glides to a section instead of jumping.

Say: "Make nav links smooth-scroll to anchors."

### Infinite scroll

New content loads automatically as you near the page end.

Say: "Use infinite scroll for the feed."

### Skeleton / loading

Placeholder shapes shown while content loads.

Say: "Show skeletons while data loads."

### Lightbox / modal

Clicking an image opens it enlarged over a dimmed backdrop.

Say: "Open gallery images in a lightbox."

### Sticky CTA bar

A persistent action bar pinned to the bottom/top as you scroll.

Say: "Add a sticky bottom CTA bar on mobile."


## Performance & SEO

The terms for making a page fast and findable, increasingly part of "design."

### Semantic HTML

Using meaningful tags (not just divs) so browsers, SEO, and screen readers understand structure.

Say: "Use semantic HTML5 elements."

### Alt text

Text describing an image for screen readers and when images fail to load.

Say: "Add descriptive alt text to every image."

### Meta title & description

The title/snippet shown in search results and tabs. Key for SEO and click-through.

Say: "Write meta title and description for SEO."

### Core Web Vitals / LCP, CLS

Google's load-speed, layout-stability, and responsiveness metrics that affect ranking.

Say: "Optimize for Core Web Vitals (LCP under 2.5s)."

### Mobile-first

Designing for the small screen first, then enhancing up. Matches how most people browse.

Say: "Design mobile-first, then scale up."

### Accessibility / a11y

Making the site usable for everyone, contrast, keyboard nav, focus, ARIA labels.

Say: "Make it accessible: contrast, focus states, ARIA."


## Page Patterns

Whole-page web archetypes and reading patterns. Naming one saves a paragraph.

### Landing page

A single focused page built to convert one audience toward one action.

Say: "Build a landing page with one clear CTA."

### One-pager

A whole site/story on one scrolling page, navigated by anchors.

Say: "Make it a one-pager with anchor nav."

### Hero + feature grid

The classic marketing layout: hero, then a grid of feature cards.

Say: "Hero, then a 3-up feature grid, then pricing."

### Article / blog layout

A single readable column with a title, meta, and flowing body text.

Say: "Use a centered single-column article layout."

### F-pattern

How people scan text-heavy pages, across the top, then down the left. Put key info there.

Say: "Lay out content for the F-pattern scan."

### Z-pattern

The eye's path on simple pages, top-left → top-right → diagonal → bottom. Place logo, CTA, action along it.

Say: "Arrange the hero on a Z-pattern."