Web Design Terms Overview

Knowing your stuff as a marketer is important. Adding these web design terms to your business lexicon will not only make you smarter, but it will also be a huge help when you’re discussing the design of your website with your digital agency.

Following is a glossary of 37 specific terms that fall under these terminology topics: design, artwork, color, and typography.

Speaking the language of the web will help guarantee your website’s design is everything you want it to be.


Design

1. Visual weight

Visual weight is the principle that all elements on a page carry weight and the element with the most weight draws the user’s eye first. An element’s weight can be affected by the following things: size, contrast, density, color, and negative space. For example, larger objects attract the eye more than smaller objects, and bolder, brighter colors carry more visual weight than softer and lighter colors. Keep in mind that visual weight can be somewhat subjective and vary case-by-case.

2. Density

Density is the amount of information and visual elements in a given area, page or design.

High-density pages are sometimes visually described as “busy” or “crowded.” Think: the front page of a newspaper or news website.

Low-density pages are considered light with lots of whitespace. 

See the examples below showing the difference between these two web design terms.

Remember, the more elements you have within a design, the more attention you are demanding from a user. Balance is the key.

High density and low density comparison

3. Template

A template is a predesigned and typically unique layout of a page or pages on a website. It is applied to the content of a page for design purposes. For example, a homepage and a contact page have different content, UI elements, and functionality. They require different layouts, and therefore, different page templates.

4. “Above the fold

This refers to the content the user first sees on the page without having to scroll. It’s a bit tricky to pull off in modern web design because people access websites from different kinds of devices with varying screen sizes.

Web design term above the fold diagram

5. Responsive web design

Responsive web design enables your website to automatically adapt to any screen size (desktop, tablet, and mobile), providing a seamless user experience.

Unsure if your site is mobile-friendly, check your site here https://search.google.com/test/mobile-friendly

6. White space (or negative space)

This is the empty space between and around UI elements, columns, margins, images, and text. Keep in mind that white space does not have to be white, it can be any color. White space is often used to improve text readability, create balance, and as a separator between unrelated elements in a design. 

7. Minimalism

Minimalism is a style in which a design is stripped of all unnecessary elements, flourishes, color and content that does not support users’ tasks. When done right, a minimalist design is clean, crisp, and functional.

8. Balance

Balance is the visual weight of all the elements in a composition. We use balance to create structure and create consistency. 

9. Composition

This refers to the arrangement of design elements on a page. A successful composition should captivate and guide the user through the content.

10. Scale

Scale is the size of an element in relation to another element. Scale can be used to create interest and grab a user’s attention. 

Sometimes when you say, “We want the logo to pop”, you might simply be asking for an increase in scale.

11. CTA (or call-to-action)

A CTA is the part of the page that encourages the user to take action. For example, on a product page you might see a big button that says, “Try it Free” – that web design term is named a call-to-action. Good CTAs stand out on the page and use copy that compels the user to engage.

12. Information Architecture

Information architecture is the process of organizing a website’s pages, content, and navigation in the most logical and useful way. The output is usually a site map. The goal is to allow users to find everything they need without extra effort.

13. Wireframes

Wireframes are low-fidelity sketches that outline page structure, navigation, key functionality, and content without incorporating any design elements like fonts, colors, or images. Wireframes are used to brainstorm ideas, map out user journeys, and illustrate interactions in a quick fashion. Wireframes are a great way to kick off the web design process because they save time and make it easy to spot usability issues.

14. Prototype

Often confused with a wireframe, a prototype is a mid-to-high fidelity representation of the final design. Prototypes are interactive and functional and allow stakeholders to effectively use the final design before it goes into development.

Wireframes versus prototypes comparison diagram

15. Style Guide

A style guide is a document that includes all of the brand colors, typography, and other design and UI elements of a site. A style guide is used for consistency of look and feel across all media channels and can guide any future additions.


Artwork

16. CMYK

CMYK stands for cyan, magenta, yellow, and black. These four ink colors are used by printers to print documents, magazines, flyers, etc.

17. RGB

RGB stands for

  • Red
  • Green
  • Blue

These three colors are used to create every other color you see on a device’s screen. Many printers will accept RGB files and convert them to CMYK for printing.

Keep in mind, when you create your artwork you want to make sure you use the right color mode to ensure your artwork displays or prints correctly.

Something to note, monitors emit light and paper absorb light and that is why you may see brighter colors in RGB than CMYK.

web  design terms CMYK and RGB comparison side-by-side

18. Raster images

Also known as bitmaps, raster files use thousands of individual pixels to create an image. Most images (especially photographs) you see on the web are raster; these include JPG, PNG, and GIF.

19. Vector images

Vector images are made up of lines, curves, shapes, and points rather than using pixels. This allows vector images to be scaled to any size without sacrificing the image quality. These are typically used for images that are not photographs, such as logos, icons, diagrams, or other graphics. The most common vector file types include AI, EPS, PDF, and SVG. However, only SVG can be added directly to HTML.

raster vs vector comparison with light bulbs

20. Favicon

A favicon or shortcut URL is a small graphic, often a logo, that displays on the left side of the address bar or tab of the browser. It’s also often referred to as a bookmark icon. Twenty web design terms down, 17 to go!

21. Image compression

Image compression reduces the size of an image file. Ideally, it is done without affecting or degrading the quality of the image to the point of becoming blurry and unusable. Keep in mind, larger file sizes make for long load times which can frustrate users. You want to keep your images around 300kb or lower if possible. https://www.iloveimg.com/ is a great tool for compressing all types of image files without losing quality. Give it a try.


Color

22. Hex code

A hex color code is a six-digit number and letter combination that uses the RGB color model to create a color. Hex codes are mainly used by developers and designers in web design to assign colors to UI elements of a site. For example, the color hex code for our blue header is #1959AA.

Knowing the specific hex codes used for your website can be handy for customizing email templates or other third party marketing tools.

23. Hue

Hue is a color in its purest form. Specifically, a hue is any color on the color wheel. It refers to the origin of the color we see and is either Yellow, Orange, Red, Violet, Blue or Green. You’ll never refer to black or gray as a hue.

24. Tints

Tints are created when white is added to a color to lighten it. Tint and pastel are often used interchangeably.

25. Tones

Tones are created when gray is added to a color to tone it down.


Shade

A simple web design term, shade is created when black is added to a color to darken it. It remains the same hue only a darker version.

web design terms tint, tone, and shade comparison

26. Saturation

Saturation refers to the brightness of a color. For example, colors that are highly-saturated are very bright and vivid. Colors that are less saturated appear washed out or muted.

27. Warm colors

These include red, orange, and yellow. These colors are generally associated with energy, brightness, and action.

28. Cool colors

These include green, blue, and purple. These colors are generally associated with tranquility, harmony, and professionalism.

When you think a color might be “dull” or “flat” you may be referring to the low saturation of the colors.

warm and cool colors  diagram on gray background

Typography

29. Serif

Serif fonts have small decorative lines also referred to as “tails” or “feet” at the top or bottom of the letter. Some examples of serif fonts include Times New Roman, Georgia, Garamond, and Caslon. If you want a traditional look and feel in your designs, use a serif font. Serif fonts convey elegance, prestige, and authority and are a great choice for more traditional businesses like law or financial firms.

30. Sans-Serif

A similar, but different web design term sans-serif (or sans) fonts have clean and precise ends without ornamental “tails” or “feet”. Some examples of sans-serif fonts are Helvetica, Proxima Nova, Avenir, and Futura. If you want your brand to come across as modern, accessible or cutting-edge, you might consider using a sans-serif font.

serif versus sans-serif fonts

31. Font weight

Font or type weight describes the thickness of a font. A very light font might be referred to as light or thin, while a thicker font might be referred to as bold, heavy or black.

32. Leading

Leading (known as line-height in web design) is the amount of space between lines of text in a paragraph.

tight and loose leading for fonts

33. Tracking

Tracking (known as letter spacing in web design) is the amount of space between letters. Tracking is used to change the overall appearance and readability of the text. If the letters are too close or too far apart, they can be harder to read.

Loose and tight tracking diagram on gray background

34. Kerning

Often confused with tracking, kerning works by adding or subtracting space between a pair of letters to avoid any awkward spaces this creates a visually appealing and readable text.

Kerning diagram

35. Orphan

An orphan is a single word or short sentence fragment that sits by itself at the start of a paragraph.

36. Widow

A widow is a lone word or short group of words that appears at the bottom of a paragraph, column or page.

orphans and widows terminology comparison

37. Lorem ipsum

Lorem ipsum is dummy text used as a placeholder for real copy of a website or a mockup during the design process. Lorem ipsum looks like this: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat…

Web Design Terms Conclusion

Well, there you have it. Hopefully this blog post gives you the confidence and knowledge to engage in design conversations, ask the right type of questions, and critique design work with greater ease. Your agency will love you for it.


Written by

Cristian Garcia

I’m a problem solver with a passion for all things related to design, namely UX design and user interface development. Outside of work I enjoy collecting vinyl, attending music festivals and watching all kinds of documentaries.