Web Design Glossary: Learn Every Web Design Term

Web design, much like many other industries, comes with an array of expert terms. Web design jargon can become quite overwhelming if you’re new to the field. There are terms for just about everything!

Understanding design vocabulary can help you learn how the design process works, how to communicate with web designers, and how you can grow your design skills along the way.

Here’s a web design glossary to help you boost your design knowledge, featuring some of the most common web design terminology with accompanying explanations. Read on to learn more, and then subscribe to our email newsletter for more great web design information!

Start reading this web design glossary

Web design terminology can be tricky to understand if you don’t already know what it means. If you want to obtain a firm grasp on the process, you have to know the terms, which is why we’re here to define some of the most common pieces of web design jargon!

0-9

508 Compliance

A federal law that requires federal agencies to maintain and use information and communications technology that people with disabilities can use.

A

Accessibility

Your website should cater to users with disabilities! If your website is accessible, it means that you have followed proper guidelines to make this happen. Making icons or font sizes larger could help readability. There are many ways to improve accessibility. If you’re thinking of making your website ADA compliant, getting a consultant on board could help!

ADA compliance

ADA compliance refers to the Americans with Disabilities Act Standards for Accessible Design, which states that all electronic and information technology (like websites) must be accessible to people with disabilities.

Alignment

Alignment is how elements are lined up on your page. There are four main kinds of alignment, and they are all used for different applications. Center, left, right, and justified alignments provide endless design opportunities.

Analogous color scheme

An analogous color scheme consists of three colors located next to each other on the color wheel. These color schemes work well together in designs because of their clean appearance. Some examples of this color scheme include yellow, orange, and red, or purple, blue, and aqua.

B

B2B web design

B2B web design is the process of crafting a website for your B2B company. Web design relates to the parts of your site that users will interact with and see. It covers everything from your site’s color scheme to the way pages connect.

B2C web design

B2C web design refers to setting up and formatting your B2C website. This includes elements like what your navigation bar looks like, what graphics you use, and the color scheme.

C

Cascading style sheets (CSS)

CSS is a sheet (style sheet) that helps to describe the layout of your HTML code. While HTML is used to show the ins and outs of your page (lists, text, image links), CSS is all about the layout (color, style, layout, type). Using CSS can save developers a lot of time and effort! If you’re interested in learning about CSS or any web-based languages, Codecademy is a great resource!

Color palette

A color palette is a group of colors that you choose for any given design. These colors work together to evoke your brand image and message.

Complementary colors

When you look at a color wheel, contrasting colors are those that sit directly across from each other. Examples include blue and orange, green and red, and yellow and purple. When used together on a page, they can create interest and variety.

Contrast

Contrast refers to numerous design elements. Contrast typically means the amount of difference between two different things. For example, the contrasting color of black is white. Features like rough and smooth are contrasting elements, as well as light and dark. In the design world, contrast can refer to any of these elements.

Cool colors

When you study a color wheel, half of the colors are cool colors. These colors include blue, green, indigo, and violet (and all shades associated). These colors relate to feelings of calmness and relaxation.

E

Ecommerce web design

Describes the website’s aesthetic appearance that allows users to either buy or sell products and services online. This helps to determine the functionality and appeal of the website.

Enterprise web design

It is a digital marketing strategy that involves the looks and functionality of a website. Enterprise web design focuses on optimizing your site to become more user-friendly and drive traffic.

F

Favicon

The favicon is a small icon for your website that appears next to your website’s page name or title tag. This little icon is an essential component of your website’s interface. It allows you to have a simple, recognizable picture associated with your website, so users get familiar with your brand.

Fitt’s Law

G

Gestalt Principles

Gestalt Principles describe how the mind organizes visual data, meaning the whole is perceived as independent from its component parts. It’s about how humans naturally perceive things and organize visual information into coherent wholes.

Gradient

A gradient refers to design elements that fade from one color to the next. The change is gradual, and you’ll typically notice some other colors in the design as it transforms. Think sunset!

Grid

The grid is something that designers work with in order to keep their designs evenly spaced. It’s just what it sounds like — a grid of intersecting lines that acts as a framework for designs. When designers use a grid, it allows them to create consistent, organized designs.

H

 Hypertext markup language (HTML)

HTML is a coding language that works together with CSS and Javascript to make your website visually appealing. A browser will read your HTML code and translate it into what your code is “telling” it to look like for you.

A basic example of an HTML code can be telling your browser you want an image inserted into a page or a bullet point list.

While there are many elements to HTML coding, starting with the basics can help you understand how Google works! Here are some HTML best practices that could help you get started!

L

Leading

Leading is a term that refers to the amount of space between lines of type. With loose leading, lines will have more space between them, while tight leading squeezes lines closer together.

Lorem ipsum copy

Lorem ipsum is essentially placeholder text that allows designers to get a feel for where text will be, how much space it will take up, and how it’ll work with the rest of the design. Lorem ipsum has been used since the 1960s, and maybe even earlier. It’s also known as “dummy text.”

M

Margins

Margins refer to the amount of space around the edge of a page — whether on paper or in a digital design. Larger margins allow for more white space, which can evoke a calming effect, while small margins can create a sense of panic.

Minimalism in Web Design

Minimalism in web design is about strategically removing excess features and gimmicks to deliver a clear and concise message to the target audience. It emphasizes presenting important content in a new way by stripping down a design to its core function, establishing a clear focus, and practicing reductionism. It doesn’t mean a lack of color, but rather an intelligent use of well-planned color palettes, and places extra emphasis on well-thought-out typography and intelligent layout structures. Negative space is also a powerful tool in minimal design, acting as a visual guide and helping to group information. Ultimately, the goal is to put forward only the most important message and remove unwanted distractions.

Mockups

Mockups generally focus on the visual design elements of the site. These are often very close or identical to the actual final site design and include all the graphics, typography, and other page elements. Mockups are generally just image files.

Monochrome color scheme

Another popular color scheme in design, a monochrome color scheme, consists of different tones of the same color. For example, sites that only use shades of blue have monochrome color schemes.

O

Opacity

Opacity refers to the transparency of design elements. If a design element is opaque, you cannot see other elements through it, and it has low transparency. On the other hand, if an element has low opacity, you can see through it, and it has high transparency.

P

Project manager

A project manager plans, organizes, and executes projects for a team. A person in this role will lead these projects while considering aspects like budget constraints, schedules, and resources. When someone is in a project manager role, they will balance multiple responsibilities through the duration of projects and serve as the go-to person for anyone involved in the project.

Prototypes

Prototypes are examples or mock-ups of your newly designed website, app, or products for users to test before launch! Prototypes are essential to any design process and are a great way to test user experience, discover technical or design problems, and gather valuable feedback from higher management or stakeholders.

Pull quote

Pull quotes help important sentences in your content stand out on a page. Essentially, they are excerpts pulled from the body copy of a page, and it helps add some interest to a design. They are typically larger than the rest of the body text and include some sort of design element to help them stand out on the page.

Q

Quantitative and qualitative research

Quantitative data can help you see what users are and aren’t engaging with on your website. This type of data is helpful for gaining insight into where you can make improvements to your website’s usability.

Qualitative research can help you understand what your audience likes and dislikes. You get this data by observing how users behave or conducting interviews to gauge what users do and don’t like. One form of qualitative research is when you gain insights from usability testing!

R

RGBA

RGBA is a type of CSS color value that allows us to set a color and also its opacity/transparency. Here’s an example of using the CSS rgba() notation to specify white with 50% opacity.

Resolution

Resolution refers to the clarity and crispness of images. Typically, designers use the highest resolution images on websites. These images look far more professional than blurry, low-resolution images or graphics.

Responsive design or layout

Responsive design is a critical element of any website. The word responsive means that content, images, videos, menus, and forms on your website look seamless between multiple devices like mobile, desktop, and tablet. When you’re on your mobile, the website should have a seamless experience! Over 50% of website traffic comes from mobile devices, so having a website that can adapt to any device is crucial!

S

Saturation

Saturation refers to the intensity of a color. When you increase the saturation of a design element, it appears more vivid, but when you lower the saturation, it can appear faded.

Scale

When you change the size of an object while keeping it scaled, that means you can grow or shrink the element without altering its proportions. For example, if you want to shrink this leaf while keeping it scaled, it would look just as it does in the example. If you shrunk the graphic without keeping it to scale, it would look much skinnier and skewed.

Stock photo

Instead of hiring a professional photographer, oftentimes designers will opt for stock photos. Stock photos are professional images that are sold online. Typically, you can purchase a license to download professional stock images, but some websites offer them for free.

 Style guide or brand guide

A style guide is a document that provides a list of guidelines that highlight company standards across multiple online channels. This document highlights your brand identity by listing elements like font types, color codes, layout, and copy tone to help teams ensure your brand stays consistent.

Style guides are helpful when starting a new web design process. They help lay out a clear path for how, when, what, and why web designers choose different elements (like buttons, images, or videos). A tip before starting your style guide is to know your target audience before you start!

Here are a few examples of what style guides could include.

• Guidelines for headers, titles, fonts, numbers, and symbols
• Specific company spelling must-haves like a trademark sign
• Word banks for words your company wants to use in all content media
• Voice and tone guidelines (fun, clever, confident, etc.)
• Color choices for images, backgrounds, fonts, and more

If you’re in the process of creating a new style guide, here are some examples that could come in handy!

T

Texture

Texture on paper refers to the actual look and feel of a design. For example, if a wedding invite is printed on paper with texture, it might have a rippled or crumbled feel. On a digital design, texture simply means that the design evokes a texture that might occur in actual materials.

Tracking

Tracking refers to the space between letters in type. When the tracking is loose, letters are farther apart, while tight tracking makes for more tightly packed letters.

Typography

Typography refers to the use of different typefaces in order to create an aesthetically pleasing design.

U

User experience (UX)

User experience (UX) refers to how users are experiencing and interacting with a website. Some important UX questions are:

• How does a customer feel when they visit your website?
• Is it easy to use?
• Is it easy to navigate?
• Is it convenient?

These questions help determine how well your website is laid out for your customer to get to the end goal.

User habits constantly change, so there are always valuable insights available! Checking user behavior every quarter can give you great optimization ideas! A few other questions and factors that influence user experience are:

• Is it easy to use?
• Is it easy to find?
• Is the website credible?
• Is it accessible?
• Is it valuable?

Make sure your customers and website visitors don’t leave by creating a timeless user experience!

UX design

UX design, or “user experience” design, is the process of creating a meaningful, relevant, and easy-to-use experience for users when they visit your website.

User interface design (UI)

User interface (UI) design refers to the design, look and feel of elements on your website like colors, style, layouts, type, buttons, effects, and more. UI design follows principles that help make websites intuitive, simple, and easy to navigate.

Usability testing

Usability tests look at how users interact with your business, website, services, or products.

You can gain valuable insights when observing how your audience behaves. Learn how certain elements make them feel. You can use this data to optimize how they experience your brand!

Before launching a new product, service, or website, usability testing can help you find what users like and dislike. With these insights, you can make their experience with your brand a 5-star rating!

There are many ways to conduct usability testing! Before launching a new product, a few offline tests can be done, including:

• Guerilla testing: These tests are conducted in public spaces to test user responses for products or services.
• Moderated testing: These tests are done in controlled environments, usually great for getting live feedback on products.
• Live interviews or questionnaires: These tests are great for getting honest feedback from a live audience!

Online usability tests are great for gaining continual insights. Heatmaps and user tests allow you to see how users are engaging with your website, with your products and services so that you can make improvements to capture more leads. Here are some usability testing tools and tips!

W

Warm colors

Warm colors make up the other half of a color wheel. Red, orange, yellow, and all the shades in between are warm colors. They provide a sense of excitement and cheer.

Web development

Web development refers to the process of making the aesthetic design of a website functional. It involves coding elements like calls-to-action buttons, contact forms, navigation bars, and hyperlinks to ensure they respond correctly when users interact with them.

Web design

Web design refers to creating a website or page that is displayed on the Internet. From the HTML structure to text fonts and visual elements, web design encompasses all the processes that make the front-end of your website appealing and functional.

Website hosting

Wireframes

Wireframes are basic illustrations of the structure and components of a web page. This is generally the first step in the design process.

Browse more web design terms

With this website design dictionary, your next conversation about your website and its design won’t remain a mystery.

Here, we’ve compiled a library of resources that cover additional web design terms. Check them out now!

• Graphic Design Terms
• Web Design Terms
• Web-Safe Fonts
• Web Development Glossary

Looking to stay up-to-date on web design? Check out Revenue Weekly — read by more than 200,000 marketers — and learn how to use web design to grow your company’s traffic, leads, and even revenue!