Design & UX: terms A to Z
Every web design and user experience term explained in plain English: wireframe, mockup, responsive, accessibility, and more.
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.
A to 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 to F
| Term | Plain-English definition |
|---|---|
| Design system | A collection of reusable components, rules, and guidelines that ensure consistent design across a product. |
| Figma | A widely used 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 to 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 to 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 to 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 to 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
Was this page helpful?
Go deeper on chykalophia.com
Done for you
Rather not do this yourself?
This is everyday work for our team. Book a free discovery call and we'll tell you honestly whether it's worth paying someone for.
Already a client? Email support@chykalophia.com.
Last updated