Glossary
Design & UX: terms A–Z
Every web design and user experience term explained in plain English — wireframe, mockup, responsive, accessibility, and more.
referencebeginnerglossarydesign
Design and UX conversations can get technical quickly. This page explains the vocabulary our design team uses — so you can read a proposal, give feedback, and understand what's being built.
Quick summary
This page covers 60+ design and UX terms from A to Z. For content and accessibility guides, visit the Content & Images section. Use Ctrl+F / Cmd+F to jump to any term.
A–C
| Term | Plain-English definition |
|---|---|
| Accessibility | Designing websites and content so people with disabilities can use them — visual, hearing, motor, or cognitive. Often abbreviated a11y. See Web accessibility basics. |
| Alignment | How design elements line up with each other — left, center, right, or along an invisible grid. Good alignment creates visual order. |
| Alt text | A description of an image for screen readers and search engines. See Alt text explained. |
| Animation | Movement added to page elements — fade-ins, slides, scroll effects. Can enhance engagement but must be used carefully for accessibility. |
| Aspect ratio | The proportional relationship between a design element's width and height — e.g. 16:9 for video, 1:1 for a square image. |
| Brand guidelines | A document defining how your brand should look and sound — logo usage, colors, fonts, tone of voice. |
| Breadcrumbs | Navigation showing where a user is within a site hierarchy: Home > Category > Page. |
| Card | A design pattern — a box containing an image, title, and summary, often linked to a full page. Common in blog listings and product grids. |
| CTA | Call to Action. A button or link prompting a specific action: "Book now," "Contact us," "Get started." |
| Color contrast | The difference in brightness between text and its background. High contrast is easier to read. WCAG requires minimum contrast ratios. See Color contrast & readability. |
| Component | A reusable UI building block — a button, a card, a navigation bar, a form field. Design systems are built from components. |
| Contrast | See Color contrast. Also applies to any visual pairing — large vs. small, bold vs. light. |
D–F
| Term | Plain-English definition |
|---|---|
| Design system | A collection of reusable components, rules, and guidelines that ensure consistent design across a product. |
| Figma | The industry-standard design and prototyping tool. Where we create mockups and designs before building. See Give us access to your Figma files. |
| Flat design | A minimalist design style using clean shapes, typography, and limited shadows — as opposed to skeuomorphic (realistic) design. |
| Flow | The path a user takes through a website or process. Good UX design guides visitors naturally to their goal. |
| Font | The specific style and weight of a typeface — Arial Bold, Georgia Italic. |
| Footer | The bottom section of every page, typically containing contact details, secondary navigation, and legal links. |
| Framing | How a design element is positioned within its space — with appropriate white space around it. |
G–L
| Term | Plain-English definition |
|---|---|
| Grid | The invisible framework of columns and rows used to align elements in a layout. Ensures visual consistency. |
| Header | The top section of a page, typically containing the logo, navigation, and sometimes a hero area. |
| Hero | The large, prominent section at the top of a page — usually the first thing visitors see. Typically contains a headline, subheading, and CTA. |
| Hierarchy | The visual organization of elements to show what's most important. Achieved through size, color, weight, and position. |
| Hover state | How a button or link looks when a cursor is positioned over it. Indicates it's clickable. |
| Interaction design | Designing the behaviors and transitions a user experiences — what happens when they click, hover, scroll, or swipe. |
| Landing page | A page designed for a single purpose — capturing leads, promoting one product, running a campaign. |
| Layout | The arrangement of elements on a page — where things go, how big they are, what goes next to what. |
| Leading | The space between lines of text. Also called line-height. Too tight = hard to read; too loose = disconnected. |
M–P
| Term | Plain-English definition |
|---|---|
| Margin | The space outside an element — between it and other elements. |
| Mockup | A detailed, static visual of how a design will look. More polished than a wireframe — shows colors, fonts, and images as they'll appear. |
| Navigation | The menus, links, and controls that help users move through a website. |
| Padding | The space inside an element — between its content and its border. |
| Prototype | An interactive, clickable version of a design used for testing before development begins. |
R–T
| Term | Plain-English definition |
|---|---|
| Responsive design | A design that adapts fluidly to different screen sizes — phone, tablet, laptop, desktop. Not separate mobile/desktop designs, but one flexible design. |
| Sans-serif | A typeface without small decorative strokes (serifs) at the ends of letters. Common on screens — Arial, Inter, Helvetica. |
| Serif | A typeface with small decorative strokes at the ends of letters. Common in print — Times New Roman, Georgia. |
| Skeleton screen | A loading placeholder showing the shape of content before it loads — looks like a grayed-out version of the layout. Reduces perceived wait time. |
| Style guide | See Brand guidelines. |
| Typography | The art and technique of arranging type — font choices, sizes, weights, spacing. |
U–Z
| Term | Plain-English definition |
|---|---|
| UI | User Interface. The visual elements a user interacts with — buttons, forms, menus, layouts. The "what it looks like." |
| Usability | How easy and intuitive a website is to use. High usability means visitors can complete tasks without frustration. |
| UX | User Experience. The complete experience a person has when interacting with a website — not just looks, but how it flows, responds, and feels. The "what it's like to use." |
| Vector | A graphic format (like SVG) that uses mathematical paths rather than pixels. Scales to any size without losing quality. |
| Visual weight | The perceived heaviness of an element in a design — large, dark, or bold elements carry more weight. |
| WCAG | Web Content Accessibility Guidelines. The international standard for web accessibility. Three levels: A, AA, AAA. Most sites aim for AA. |
| White space | Empty space in a design. Often called negative space. Critical for readability and visual balance — not wasted space. |
| Wireframe | A simple, low-detail sketch of a page layout showing structure and content placement — before any color, fonts, or images. |
Common questions
Related guides
- Content, images & accessibility
- Web accessibility basics
- Alt text explained
- Color contrast & readability
- Image formats explained (JPG, PNG, WebP, SVG)
Need a hand?
If you're stuck, email support@chykalophia.com and we'll help. Include your website address and a screenshot if you can.