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.
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.
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.
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.
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.
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. iLoveIMG – Image Editor 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.
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.
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.
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.
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.
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.
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.
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.
