Website Design Terminology Explained: A Plain-English Glossary

Website design terminology is the set of words designers and developers use to describe how a site looks, works and gets built. You don't need to learn all of it. Knowing the common terms below will help you follow a design project, ask better questions and make decisions faster.

Each term gets a one-line definition. If your designer uses a word that isn't here, ask them to explain it. A good designer will be glad to.

Planning and structure

• Sitemap: A list or diagram of every page on a site and how the pages connect.
• Wireframe: A simple black-and-white sketch of a page layout that shows where content goes before any design is added.
• Prototype: A clickable draft of a site used to test how it works before it is built.
• User persona: A short profile of a typical customer that helps the team design for real needs instead of personal taste.
• Content management system (CMS): The software that lets you add and edit pages, posts and images without writing code.
• Template: A pre-built page layout that you fill with your own content.
• Landing page: A page built for one goal, usually the page people reach from an ad, email or social post.

Layout

• Grid: An invisible set of columns and rows that designers use to line up text and images.
• Alignment: How elements line up with each other on the page, such as text aligned to the left edge.
• Above the fold: The part of a page people see before they scroll.
• White space: The empty space around text and images. It is also called negative space, and it makes pages easier to read.
• Visual hierarchy: The use of size, color and position to show people what to look at first, second and third.
• Responsive design: A layout that adjusts itself to fit any screen, from a phone to a large monitor.
• Fluid layout: A layout sized in percentages instead of fixed pixels, so it stretches and shrinks with the screen.
• Media query: A rule in the code that checks the screen size and changes the layout to fit.
• Breakpoint: The screen width where a responsive layout switches, for example from four columns to two.
• Navigation: The menus and links people use to move around a site.
• Breadcrumbs: A trail of links, usually near the top of a page, that shows where you are in the site.

Color

• Hue: The designer's word for a color itself, such as blue, green or yellow.
• Color wheel: A circle of 12 colors that shows how primary, secondary and tertiary colors relate.
• Complementary colors: Colors directly opposite each other on the wheel, like red and green. They create strong contrast.
• Analogous colors: Colors next to each other on the wheel, like blue, blue-purple and purple. They feel calm together.
• Triadic colors: Three colors evenly spaced around the wheel, 120 degrees apart.
• Rectangular colors: Two pairs of complementary colors used together, four colors in all. Also called tetradic.
• Contrast: The difference between elements, such as dark text on a light background, that makes one stand out from another.
• Contrast ratio: A number that measures text contrast. Accessibility guidelines ask for at least 4.5:1 for normal text.
• HEX code: A six-character code, like #1A73E8, that tells a browser exactly which color to show.
• Gradient: A gradual blend from one color into another.

Type and text

• Typeface and font: A typeface is the design, like Arial. A font is one version of it, like Arial Bold. People often use the two words the same way.
• Serif: A typeface with small strokes at the ends of letters, like Times New Roman. It tends to feel classic.
• Sans serif: A typeface without those end strokes, like Arial. It tends to feel modern.
• Stroke: The lines that make up each letter.
• Weight: How thick the strokes are, from light to bold.
• Baseline: The invisible line that letters sit on.
• Cap height: The distance from the baseline to the top of a capital letter.
• Descender: The part of a letter that drops below the baseline, like the tail of a lowercase p.
• Kerning: Adjusting the space between two specific letters so a word looks even. It matters most in large headings.
• Line height: The vertical space between lines of text. Designers also call it leading.
• Web-safe font: A font installed on nearly every device, like Arial, Verdana or Georgia, often used as a backup.
• Widows and orphans: Single words or short lines left stranded at the end of a paragraph or at the top or bottom of a column. Designers adjust the text so lines don't hang alone.

For help choosing and sizing type, see our guide to the best fonts for web design.

Images and files

• Pixel: The smallest dot of color in a digital image or on a screen.
• Resolution: How much detail an image holds, measured by how many pixels it has. Higher resolution usually means a larger file.
• DPI: Dots per inch, the measure of detail in a printed image.
• Compression: Making a file smaller by removing extra data. Lossy compression removes some detail. Lossless compression keeps all of it.
• JPEG: An image format with lossy compression, best for photos.
• PNG: An image format that supports transparent backgrounds and works well for logos and graphics with flat color.
• GIF: An image format for simple graphics with few colors and short animations.
• SVG: A vector image format for the web that stays sharp at any size. Good for logos and icons.
• Vector image: An image built from lines and shapes instead of pixels, so it can be enlarged without losing quality.
• EPS: An older vector file format often used for logos and print work.
• PDF: A file format for documents and presentations that looks the same on any device.
• ZIP: A compressed folder that bundles several files together without losing any data.
• Alt text: A short written description of an image. Screen readers read it aloud, and search engines use it to understand the image.
• Watermark: A visible mark placed over an image to show who owns it.
• Drop shadow: A shadow effect behind an element that makes it look raised off the page.
• Feathering: Softening the edges of an image or shape.
• Lazy loading: Loading images and video only when a visitor scrolls near them, which speeds up the first view of a page.

Code and hosting

• HTML: The code that holds the content of a web page, such as headings, text and images.
• CSS: Cascading Style Sheets, the code that controls how a page looks, including color, fonts and layout.
• JavaScript: Code that adds interactive features, like menus that open or forms that check your input.
• Domain: Your website's address, like skratchcreative.com.
• Hosting: The service that stores your site's files and serves them to visitors.
• SSL and HTTPS: Security that encrypts data between your site and its visitors. Browsers warn people about sites without it.
• CDN: Content delivery network, a group of servers in different places that deliver your files from a location near each visitor.
• Cache: Saved copies of files that let a page load faster on the next visit.

Performance, marketing and results

• Page speed: How quickly a page loads and becomes usable.
• Core Web Vitals: Google's measurements of loading speed, responsiveness and visual stability. Our guide to Core Web Vitals explains each one.
• Accessibility: Designing a site so people with disabilities can use it. The Web Content Accessibility Guidelines (WCAG) set the standard.
• SEO: Search engine optimization, the work of helping a site show up in search results.
• Call to action (CTA): A button or link that asks the visitor to take a step, like "Call now" or "Get a quote."
• Conversion: When a visitor does what you hoped, such as filling out a form, calling or buying.
• Conversion tracking: Setting up analytics to count those actions so you know which pages and buttons work.
• Bounce rate: The share of visitors who leave without doing anything beyond the page they landed on.
• Analytics: Tools like Google Analytics that show how people find and use your site.
• Heatmap: A visual report that shows where people click and how far they scroll on a page.
• A/B test: Showing two versions of a page element to different visitors to see which one performs better.

Putting the terms to use

Before your first meeting with a designer, decide what the site needs to do and who it is for. Those two answers shape the sitemap, the layout and every call to action. Our guide to what to expect from your web designer walks through the process, and how much a website costs explains what drives the price.

Have a question about your website?

If a term still doesn't make sense, just ask. Learn about our website design services. You can also call (281) 400-6893 or send us a message.