26 Need-To-Know Design Terms for Everyone in Marketing

“Houston, do you read me?”

The world of design is so big it has its very own language.

From terms used to describe the look of a font and the different steps of a website design process, to what it takes to develop a website, it can be a very scary world for newcomers.

Design and marketing work hand-in-hand. When you are working in the world of marketing everyone should, at least, know the basics of design to easily communicate with their designer and client.

Not being able to communicate effectively with your own designers is highly inefficient and could jeopardize the success of any marketing project.

Below are 26 design terms that will help you be a rockstar in the world of design.

1. Alignment

The lining up of elements (i.e. text, images, etc.) in your design to achieve balance, order, and a more logical layout. There are four types of alignment:

Left - even on the left side

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla arcu velit, vestibulum vel tortor in, maximus molestie ligula. Nam scelerisque augue in ante maximus, fermentum aliquet nulla convallis.

Center - centered in the document, usually adding an inconsistent margin on your text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla arcu velit, vestibulum vel tortor in, maximus molestie ligula. Nam scelerisque augue in ante maximus, fermentum aliquet nulla convallis.

Right - even on the right side

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla arcu velit, vestibulum vel tortor in, maximus molestie ligula. Nam scelerisque augue in ante maximus, fermentum aliquet nulla convallis.

Justified - stretched evenly from end-to-end of the document at hand

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla arcu velit, vestibulum vel tortor in, maximus molestie ligula. Nam scelerisque augue in ante maximus, fermentum aliquet nulla convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla arcu velit, vestibulum.

2. Crop

When you remove the outer parts of an image to improve framing, size, etc.

3. CSS (Cascading Style Sheet)

A piece of code that is used to describe how elements must be rendered on screen, on paper, or on other media. In other words, the code that controls how you want things to look (i.e. color, font, alignment, spacing, etc.)

4. Drop Shadow

This is basically what it sounds like. It’s a shadow on behind your object that gives it dimension. It’s usually used to separate the object from the background.  You commonly see this used to make an image or section stand out.

5. Framework

A framework is defined as “a package made up of a structure of files and folders of standardized code (HTML, CSS, JS documents etc.).” This is a technical way of saying a set of software tools that helps people build websites easier.

(Examples: Bootstrap, Skeleton)

6. Gradient

A gradient is a gradual change in color from one tone to another, one color to another, or one color to transparent. There are two types of gradients, linear and radial.

7. Grid

A framework made up of evenly divided, intersecting columns, and rows (like graph paper in high school.) Grids are designers best friends, they help them to align and arrange elements evenly.

8. HTML

HTML, short for Hypertext Markup Language, is a language used to create documents on the world wide web. HTML defines the structure and layout of a document by using a variety of tags and attributes. Simply put, it’s the code that basically outlines the basic layout of most websites.

9, 10, 11. Kerning, Leading and Tracking

All of these are terms used to describe changes you can make to your typeface.

Kerning refers to the spacing between two specific letters.

Tracking refers to the uniform spacing between all the in letter, in a given selection of text.

Leading is the space between lines of type, also known as line height.

12. Mock Up

A mockup is a realistic representation of what the product will look like. For most web designers, this is the last stage of the design process before going into development and it is used help explore visual design decisions. Unlike a wireframe, it shows you almost exactly what the site will look like when it goes live. It includes branding, photos, content, etc.

13, 14. Orphans and Widows

An orphan is a single word at the bottom of a paragraph, commonly called a “hanger.”

A widow is a word or line of text that is all by itself, either at the beginning of a column or page.

Image Source: Opus Design

15, 16. Padding and Margin

Padding is the space between a border and the objects inside it.

Margin is the space between a border and the objects around it.

17. Resolution

This is the amount of dots or pixels that make up an image. It is traditionally measured in DPI (Dots Per Inch), but now it is mostly referred to as PPI (Pixel Per Inch).

Images that are intended for the web-only need a resolution of 72dpi (dots per inch) and for print image only need to have a solution of 300dpi (dots per inch).

The reason for only 72dpi for web is because that is the maximum resolution of monitors and for print the printing process allows for much greater detail. 

18. Responsive

You’re probably hearing and reading this one a lot. Responsive means the design automatically adjusts its layout for different screen sizes.

19, 20. Typeface and Font

Now, this one usually trips a lot of people up.

Typeface is a design collection of characters including letter, numbers, and punctuations. (What you’d typically call “font”)

(Examples: Times New Roman, Lato, Roboto)

Font is actually a set of text characters in a specific style and size. (This includes the size, font family, etc.)

Examples:

Grumpy wizards make toxic brew for the evil Queen and Jack.

Times New Roman, Font Size 11

Grumpy wizards make toxic brew for the evil Queen and Jack.

Times New Roman, Font Size 14, Bold

21, 22. Serif and Sans-Serif Typeface

Serif Typeface is a typeface with small decorative lines added to the basic form of a character.  This typeface tends to look professional and traditional in appearance.

Sans Serif Typeface is a typeface without the small decorative lines. This typeface tends to look more modern and clean. 

23, 24. UI and UX

User Interface is the actual appearance of the design; what users see on the page.

User Experience is the flow and behavior of the design; how people interact with it.

25. Whitespace

Whitespace, in web design terms, is “the space between graphics, columns, images, text, margins and other elements.” It’s not always actually white; this is simply a way of describing the fact that it is empty. Some may also call it “negative space.”

26. Wireframe

Last, but not least a wireframe is a basic layout, like a schematic or a blueprint. It doesn’t have any design elements to it.  This is the first real concrete visual process for a project.

Know all the ones above and check out this infographic that has a few more to help you break the language barrier between you and your designer.