Glossary

This glossary outlines terms I sometimes use to explain design concepts. Many are widely used, while others are my own shorthand for ideas I find helpful.

1. Accessibility

Making sure everyone can use a website, including people with vision, hearing, motor, or cognitive challenges. It ensures all users can access and interact with content.

2. Alignment

Alignment gives your design structure. When elements line up—either along the left edge or down the center—it creates visual order. Use left alignment for clarity and readability, and center alignment for bold headlines or smaller modules.

3. Art Direction

Art Direction brings meaning to visual design. On the web, that can mean using interactive elements, animation, or storytelling to make a site feel more alive and aligned with the brand's personality.

4. Audience

The group of people you're designing for. Knowing who they are helps you make better choices about what to say and how to say it.

5. Baseline

The invisible line that text sits on.

6. Body copy

The main blocks of text on a page, like paragraphs. Body copy is most readable when kept to 10–15 words per line.

7. Brand

The overall look, feel, and personality of a company. It includes colors, fonts, logos, and tone of voice.

8. Call to Action (CTA)

A button or message that tells users what to do next—like "Sign Up" or "Buy Now."

9. Concept

Concept is the core idea behind a design—the thing that ties everything together. It acts like a magnet, guiding choices around typography, color, layout, and tone so they all work in harmony. A strong concept brings clarity and cohesion to the page.

10. Contrast

Contrast is the difference between elements that makes a design more interesting and easier to understand. It can show up in size, color, layout, or even concept. Strong contrast helps guide the viewer's attention and creates visual balance.

11. Crystal Ball Thinking

This is a way to show clients a bold, high-fidelity mockup of what their site could be—without worrying about budget or constraints. It's used early to spark excitement, gather clear feedback, and align on direction before building anything real.

The bottom section of a webpage. It usually has links, contact info, or legal notes.

13. Grade-A Web Design

Work done by a team, whose members are specialists in their role.

14. Grade-B Web Design

A simple-looking website that follows basic design principles. Can be done by an individual.

15. Grids

Grid refers to an underlying structure of columns and rows used to organize content on a page. Many designers use systems like a 12-column grid to create consistency, but others prefer a looser, modular approach—using spacing and alignment principles to guide layout instead of strict columns. Grids can help with order, but they shouldn't limit creativity.

The top section of a webpage. It often has the logo and navigation links.

17. Headline

The biggest, boldest text on the page. It tells people what the page is about right away.

18. Hero Image

A large image at the top of a page. It grabs attention and often shows what the site or product is about.

19. Illustration

Drawings that go on the page. Usually done in the same style.

20. Kick the Can

Making a small first move just to get started, without worrying if it's good. It helps break the pressure of a blank screen and gives you something to react to and build on.

21. Micro/Macro

Refers to two ways of thinking in design. Micro is about the details—like spacing, colors, and typography. Macro is about the big picture—like layout, imagery, and overall cohesion. Great design requires switching between both modes and making sure the small decisions support the larger vision.

22. Landing Page

The starting page when you come from another site.

23. Line-Height

The space between lines of text. Good line-height makes text easier to read. In traditional graphic design, it's better known as leading (pronounced ledding).

24. Mockup

A picture of what a website or app will look like before it's built. It shows the layout, colors, and style.

25. Modal/Popup

A small window that appears over a page. It usually asks you to do something, like sign up or read a message.

A menu that helps users move around a website. It's usually at the top or side of the page.

27. One Big Thing

One Big Thing is the dominant visual idea that drives a design. It could be animation, color, video, 3D, or something else—but the key is to choose one and let everything else support it. Picking a single focus helps reduce cognitive load and creates clarity. The best One Big Thing aligns with the site's purpose—whether that's selling, converting, or delighting users.

28. Proximity

Keeping related items close together. It helps users understand what goes with what.

29. Refinement Spiral

The Refinement Spiral is the process of circling through core design principles—like color, typography, and layout—over and over. Each pass makes the design tighter and more polished. Instead of getting everything perfect at once, you improve things in layers.

30. Responsive Design

A way of building websites so they look good on all screen sizes—from phones to desktops.

31. Research

Learning about your users and their needs before you start designing. It helps you make better decisions.

32. Social Proof

Showing that other people like or trust something—like reviews or logos of companies that use your product.

33. Spacing

The empty areas between elements on a page. Good spacing makes everything easier to read and understand.

34. Style

Style is the overall visual feel of a design. It's how all the elements—fonts, colors, imagery, and copy—work together to create a consistent mood or personality. A strong style helps the design feel unified and intentional.

35. Subheadline

A smaller line of text under the main headline. It gives a little more detail or context.

36. Typography

The fonts on the page. Typography should match the concept of a site.

37. User Experience (UX)

How someone feels when using a website or app. Good UX makes things easy, smooth, and enjoyable.

38. User Interface (UI)

The buttons, menus, and layout that people use to interact with a product. It's what you see and click.

39. Visual Design

Visual design refers to any page that makes a first impression, explains something, or guides a decision—like homepages, landing pages, or sales pages. These are sometimes called marketing pages.

40. White Space

Empty space in a design. It gives the eyes a break and helps important stuff stand out.

41. Widow

A short word or line left alone at the top or bottom of a paragraph or page. It can look awkward, so designers try to prevent them.

42. Wireframe

The outline of a webpage or app. It shows where things go, and how they'll work.