Glossary

Web design glossary

Plain-English definitions for the terms web designers, developers, SEO consultants, and motion designers actually use. Browse by category or scroll the A–Z list. Each term links so you can share a definition directly: /glossary#hero-section.

Web Design

Above the fold

The portion of a webpage visible without scrolling. The term comes from newspaper layout — the top half of a folded broadsheet. On websites, the above-the-fold area is the most valuable real estate because every visitor sees it. Hero content, primary calls-to-action, and the first proof of value typically belong here.

Call-to-action (CTA)

An explicit instruction to the user — a button, link, or phrase — designed to drive a specific action: 'Start a project', 'Get a quote', 'Sign up'. Effective CTAs are visually distinct, action-oriented, and singular per section. Pages with too many competing CTAs often convert worse than pages with one clear action.

Design system

A documented library of reusable components, styles, and rules — typography, colors, spacing, button states, form inputs — that gives a brand consistent visual treatment across every page and product. Design systems make scale possible: a 50-page site without a design system fragments fast.

Hero section

The large full-width section at the top of a webpage, typically containing a primary headline, supporting copy, and a call-to-action. Hero sections set the tone for the entire page and are often the most-photographed real estate on a site.

Mobile-first design

A responsive design strategy where the smallest screen layout is designed first and progressively enhanced for larger screens. Mobile-first leads to leaner, faster designs because constraints force prioritization.

Mockup

A high-fidelity visual design of a webpage, typically built in Figma, that shows final colors, typography, imagery, and component states. Mockups are static — they don't include interaction or animation, only how the page will look.

Prototype

An interactive simulation of a website or feature. Prototypes can be built in Figma (clickable mockups), in code (functional but unstyled), or in a hybrid environment. Prototypes are used to test interactions before committing to full development.

Responsive design

An approach to web design where layouts adapt fluidly to any screen size — phone, tablet, desktop, large display — rather than being optimized for fixed widths. Responsive design uses CSS media queries, fluid grids, and flexible images to serve a single codebase to every device.

UI (User Interface)

The visual layer a user interacts with — buttons, menus, forms, type, color, layout. UI is the surface of UX. Strong UI work supports the broader user experience without drawing attention to itself.

UX (User Experience)

The complete experience a user has interacting with a product — flow, friction, feedback, emotion, outcome. UX is broader than UI: a site can be visually beautiful (good UI) and frustrating to use (bad UX), or visually plain (modest UI) and a delight to use (excellent UX).

Wireframe

A low-fidelity structural mockup of a webpage showing layout, hierarchy, and content placement without color, typography, or visual style. Wireframes let teams agree on structure before investing in visual design.

Web Development

CMS (Content Management System)

Software that lets non-developers create, edit, and publish content on a website. WordPress, Squarespace, and Wix are CMSes. Headless CMSes (Sanity, Payload) separate the editor experience from the front-end implementation.

CSS

Cascading Style Sheets. The style language that controls how HTML elements look — color, typography, layout, spacing, animation. Modern CSS includes powerful layout systems (Grid, Flexbox), variables, and animations that previously required JavaScript.

See also: HTML, JavaScript, Tailwind CSS

Headless CMS

A content management system that stores content in a database and exposes it via an API, without dictating how the front-end is built. Headless CMSes (Sanity, Payload, Contentful, Strapi) let editors update content while developers build whatever front-end they want. Contrast with traditional CMSes (WordPress) where the front-end and back-end are tightly coupled.

HTML

HyperText Markup Language. The standard markup language for the structure of webpages. HTML defines headings, paragraphs, links, lists, images, and other content elements. Modern web design layers CSS (style) and JavaScript (interaction) on top of an HTML foundation.

JavaScript

The programming language of the web. JavaScript adds interactivity, dynamic content, and complex behavior to webpages. Modern JavaScript ('ECMAScript') is a sophisticated language used not just for web pages but for backend services (Node.js), mobile apps (React Native), and desktop apps (Electron).

Next.js

A React framework developed by Vercel. Next.js adds server-side rendering, static site generation, file-system routing, image optimization, and a deployment platform on top of plain React. Next.js is the default modern choice for production React apps that need SEO and performance.

React

A JavaScript library for building user interfaces, originally developed at Facebook. React introduced the component model — small, reusable pieces of UI — that now dominates modern web development. React powers a large share of the production web, including Netflix, Airbnb, and most modern SaaS products.

See also: Next.js, JavaScript, TypeScript

SPA (Single-Page Application)

A web app that loads a single HTML document and dynamically updates content via JavaScript without full page reloads. SPAs offer app-like fluidity but historically struggle with SEO and initial load performance. Modern SSR/SSG frameworks (Next.js, Astro) blend SPA navigation with server-rendered initial pages to get the best of both.

SSG (Static Site Generation)

Pre-rendering pages at build time and serving them as static HTML files. SSG is the fastest possible delivery method — there's no server work on each request, just a CDN serving a file. Best for content that doesn't change per-user (marketing sites, blogs, documentation).

SSR (Server-Side Rendering)

Rendering a webpage on the server before sending it to the browser. SSR delivers a fully-rendered HTML document on first load, which is critical for SEO (crawlers see the full content) and perceived performance (users see content faster).

Tailwind CSS

A utility-first CSS framework that provides small, single-purpose classes (`p-4`, `text-lg`, `bg-blue-500`) that compose into complete designs without writing custom CSS. Tailwind is dominant in modern web development; alternatives include vanilla CSS, CSS Modules, and CSS-in-JS libraries.

TypeScript

A superset of JavaScript adding static type checking. TypeScript catches a class of bugs at compile time that JavaScript only catches at runtime, making large codebases safer to refactor. All modern professional web development uses TypeScript by default.

WordPress

An open-source CMS originally built for blogs, now powering roughly 40% of the web. WordPress relies on a large plugin ecosystem and pre-built themes, which makes it accessible but also leads to bloat, security vulnerabilities, and ongoing maintenance burden. Modern alternatives (Sanity + Next.js, Payload, Astro) trade WordPress's plugin breadth for performance and code ownership.

SEO

Backlink

A link from another website pointing to yours. Backlinks are one of Google's primary ranking signals — sites with more links from authoritative sources tend to rank higher. Quality matters more than quantity: one link from a respected industry publication outweighs 100 links from low-authority directories.

Canonical URL

The preferred URL for a page when multiple URLs serve the same content. Canonical tags (<link rel='canonical'>) tell search engines which version is authoritative, preventing duplicate-content dilution. Critical for sites with query parameters, pagination, or multiple paths to the same content.

Crawler / Bot

Automated software that traverses the web by following links. Search engines use crawlers (Googlebot, Bingbot) to discover pages for indexing. AI services use crawlers (GPTBot, ClaudeBot, PerplexityBot) to ingest content for model training and retrieval. Each crawler identifies itself by a User-Agent string.

Domain authority

A general measure of a website's overall ranking strength, usually expressed as a score from 0-100. Domain authority is a composite of backlink quantity, backlink quality, content depth, and other signals. Different SEO tools (Moz, Ahrefs, SEMrush) calculate it differently. Google does not publish its own version.

Google Search Console

A free Google service that gives site owners visibility into how Google sees their site — which pages are indexed, what queries drove traffic, what crawl errors exist, and which structured data is being parsed. Submitting a sitemap to Search Console is the standard way to inform Google about new content.

Image SEO

Optimizing images for search engine ranking — descriptive filenames, alt text, captions, structured data (ImageObject), and optimized formats (WebP, AVIF). Google Image Search drives non-trivial traffic for many sites; image SEO is the lever.

Indexing

The process by which a search engine processes a crawled page and stores it in its searchable database. Being crawled doesn't guarantee being indexed — Google indexes only pages it judges valuable. Pages that are too thin, duplicate other content, or lack signals of quality may be crawled but not indexed.

JSON-LD

JavaScript Object Notation for Linked Data. The recommended format for structured data on the web. JSON-LD is delivered as a <script type='application/ld+json'> block in the page HTML, kept separate from the visible content.

LLM SEO

Optimizing a website for citation by language models — ChatGPT, Claude, Perplexity, Gemini, Google AI Overviews. LLM SEO overlaps with traditional SEO (structured data, factual content, technical performance) and adds new surfaces: llms.txt files, FAQ-format content, definitive comparison content, and explicit AI-bot allow lists.

llms.txt

A proposed convention (llmstxt.org) for sites to expose a single curated Markdown document at /llms.txt that summarizes the site's content for LLM ingestion. Well-formed llms.txt files improve the rate at which LLMs cite a site and help the AI understand the site's structure.

Meta description

A short summary (typically 150-160 characters) describing the content of a webpage, declared via <meta name='description'>. The meta description appears under the title in Google search results and influences click-through rate. Google sometimes rewrites the description based on the search query.

robots.txt

A text file at the root of a website (e.g. designer.digital/robots.txt) that tells crawlers which paths they can and cannot access. Used to block private areas (admin, staging, paid funnel destinations) and to point crawlers at the sitemap. Robots.txt is a recommendation, not an enforcement — security matters require server-side controls.

Schema.org

A shared vocabulary for structured data, jointly maintained by Google, Bing, Yahoo, and Yandex. Schema.org defines types (Organization, Person, Article, Product, FAQPage) and properties used in JSON-LD markup. Adding correct Schema.org markup is one of the highest-leverage SEO tactics.

SEO (Search Engine Optimization)

The practice of improving a website's visibility in search engine results. SEO includes technical work (crawlability, structured data, performance), on-page work (content quality, headings, internal links), and off-page work (backlinks, citations). In 2026, SEO also includes optimizing for citation by AI assistants — ChatGPT, Claude, Perplexity, Gemini.

sitemap.xml

An XML file listing all URLs on a site that should be indexed by search engines. Sitemaps tell crawlers what exists and how recently each URL changed. Critical for sites with content not linked from the main navigation — Google still crawls and indexes URLs from a submitted sitemap.

Structured data

Machine-readable metadata embedded in a webpage that describes the page's content using a shared vocabulary (Schema.org). Structured data is most often delivered as JSON-LD inside a <script> tag. It powers rich results in Google (star ratings, FAQ accordions, event cards) and is critical for LLM citation.

Title tag

The HTML <title> element that defines a page's title. The title tag appears as the search result headline in Google, the tab name in browsers, and the default text when shared on social media. Effective title tags are 50-60 characters, include the primary keyword, and are unique per page.

Performance

AVIF

A next-generation image format offering significantly better compression than WebP. Supported in modern browsers (Chrome, Firefox, Safari 16+). AVIF is the optimal format for hero images and photography where every kilobyte matters.

CDN (Content Delivery Network)

A geographically distributed network of servers that caches and serves content from the location physically closest to the user. CDNs reduce latency, absorb traffic spikes, and add a security layer. Major CDNs include Cloudflare, Fastly, Akamai, and Vercel's own edge network.

CLS (Cumulative Layout Shift)

A measure of how much visible content unexpectedly shifts during page load. CLS happens when images load without dimensions reserved, ads inject above existing content, or fonts swap mid-render. Google's threshold for 'good' CLS is under 0.1.

Core Web Vitals

Google's performance metrics for real-world page experience. Three metrics: LCP (Largest Contentful Paint, measuring load speed), INP (Interaction to Next Paint, measuring interactivity), and CLS (Cumulative Layout Shift, measuring visual stability). Core Web Vitals are a confirmed Google ranking signal — sites with green scores rank higher than otherwise-equivalent sites with poor scores.

INP (Interaction to Next Paint)

The time between a user interacting with a page (click, tap, key press) and the page visually responding. Replaced FID (First Input Delay) as a Core Web Vital in March 2024. Google's threshold for 'good' INP is 200 milliseconds.

Lazy loading

A technique where resources (images, videos, iframes) are not loaded until they're needed — typically when they enter the viewport. Lazy loading reduces initial page weight, speeds up first paint, and saves bandwidth on long pages where most content is below the fold.

LCP (Largest Contentful Paint)

The time it takes for the largest above-the-fold element to render — usually a hero image or large block of text. Google's threshold for 'good' LCP is 2.5 seconds on real-world mobile devices. Slow LCP is the single most common Core Web Vitals failure.

Lighthouse

Google's free auditing tool for web page performance, accessibility, SEO, and best practices. Built into Chrome DevTools (Audits tab) and runnable from the command line. Lighthouse scores out of 100 on each category and identifies specific issues with fixes.

WebP

A modern image format developed by Google offering 25-35% smaller file sizes than JPEG/PNG at equivalent visual quality. Supported in all modern browsers. AVIF is a newer competitor with even better compression but slower encoding.

Motion & 3D

GSAP

GreenSock Animation Platform. The industry-standard JavaScript library for timeline-based web animation. GSAP is used on most award-winning agency websites for scroll-triggered animations, complex sequences, and motion that requires fine timing control.

Lenis

A lightweight smooth-scroll library for the web. Lenis intercepts the native scroll behavior and replaces it with eased, GPU-friendly scrolling. Used on most modern agency sites where the default browser scroll feels too abrupt for the visual design.

Motion design

The discipline of designing animation for user interfaces — page transitions, micro-interactions, scroll choreography, animated illustrations. Distinct from broader motion graphics (broadcast, film) in that web motion has performance constraints, must respect accessibility preferences, and must serve usability.

ScrollTrigger

A GSAP plugin for creating scroll-driven animations — animations that progress, trigger, or pin based on the user's scroll position. ScrollTrigger powers most of the scroll-driven storytelling on modern web design portfolios.

Shader

A small program that runs on the GPU to determine pixel colors or vertex positions. Vertex shaders move geometry; fragment shaders color pixels. Custom shaders enable visual effects (distortion, glow, fluid) that pure CSS or DOM-based animation cannot produce.

Smooth scroll

A scrolling style where the page eases to the new position over a short duration instead of jumping. Native browsers offer modest smooth-scroll via CSS scroll-behavior; libraries like Lenis offer more sophisticated smooth-scroll with custom easing.

Three.js

A JavaScript library for 3D graphics in the browser, built on top of WebGL. Three.js powers 3D scenes, custom shader effects, and WebGL-based interactive experiences. Used on most heavily-animated agency sites.

WebGL

A browser API for hardware-accelerated 2D and 3D graphics using the GPU. WebGL underpins Three.js and most heavy visual experiences on the web — gallery shaders, particle systems, fluid simulations.

Brand

Brand identity

The visual and verbal system that defines how a brand looks and sounds — logo, typography, color palette, photography direction, voice, tagline. A coherent brand identity makes every customer touchpoint feel like the same business.

Logo

A graphic mark identifying a brand. Logos take many forms: wordmarks (typography-only), monograms (initials), symbol marks (icons), or combination marks. A good logo works at every size, in every color treatment, and across every medium where the brand appears.

Style guide

A document codifying a brand's visual rules — logo usage, color codes, typography, photography direction, voice and tone. Style guides ensure consistency when multiple designers, vendors, or partners produce work for the brand.

Wordmark

A logo composed entirely of typography — the brand's name set in a distinct typeface, often customized. Wordmarks are common for brands where the name itself is distinctive (Google, FedEx, Coca-Cola). Distinct from monograms (initials only) and symbol marks (icons).

E-Commerce

Checkout

The flow a customer goes through to complete a purchase — entering shipping, billing, and payment details. Checkout optimization (one-page checkout, accelerated payments like Apple Pay/Shop Pay/Google Pay, guest checkout) directly drives revenue. Every additional checkout step reduces conversion.

Conversion rate

The percentage of visitors who complete a defined action — making a purchase, signing up for a trial, submitting a contact form. Conversion rate is the most-watched metric on any commercial website. Industry average for e-commerce is 2-3%; for B2B services, 1-5% on contact forms.

Shopify

A leading e-commerce platform powering over 4 million stores. Shopify handles payment compliance, fulfillment integrations, and tax calculation — the operational complexity that makes building from scratch expensive. Custom Shopify themes (built in Liquid or Hydrogen) outperform off-the-shelf themes on Core Web Vitals and brand differentiation.

Accessibility

Accessibility (a11y)

The practice of building websites usable by people with disabilities — visual, auditory, motor, cognitive. Accessibility includes screen reader support, keyboard navigation, color contrast, prefers-reduced-motion, and many other concerns. Accessibility is often required by law (AODA in Ontario, ADA in the US) and is consistently the right thing to do.

Alt text

Alternative text describing an image, declared via the alt attribute on <img> tags. Alt text serves screen readers (accessibility), describes images to crawlers (SEO), and provides fallback text when images fail to load. Good alt text describes the image's content and purpose, not its appearance.

prefers-reduced-motion

A CSS media query (`@media (prefers-reduced-motion: reduce)`) that detects whether the user has opted out of animation in their OS accessibility settings. Respecting this preference is non-negotiable for accessibility — vestibular sensitivity and motion-induced nausea are real conditions that animation can trigger.

WCAG

Web Content Accessibility Guidelines — the international standard for web accessibility. WCAG 2.1 and 2.2 specify success criteria at three levels (A, AA, AAA). Most regulations require AA conformance. Designer Digital builds to WCAG 2.1 AA by default.

A term we should add?

Tell us — we'll add it. Send a note via the contact form with the term you want defined and we'll write it in.

Suggest a term