Learn
Learn
Close

What is 'They Ask, You Answer'?

A revolutionary approach to driving more sales from your inbound marketing.

Learn MoreLearn More

Free Courses in IMPACT+

Dozens of sales, marketing, and content courses inside IMPACT+. Start learning now.

See all coursesSee all courses
Events
Events
Close
IMPACT+ Membership
IMPACT+ Membership
Close
Services
Services
Close

Services Overview

See how you can dramatically increase your inbound leads and sales.

Services Overview

Digital Sales and Marketing Mastery

Fast track your team’s success with IMPACT's most popular service.

Digital Sales and Marketing Mastery

Web Design

Launch a beautiful website that consistently generates leads and revenue.

Web Design

Virtual Sales Training

Equip your sales team with comprehensive training designed to help them close more deals in today's virtual-first world.

Virtual Sales Training

HubSpot Training & Implementation

Train your company to take ownership of HubSpot and get the most out of your investment.

HubSpot Training & Implementation

Case Studies

See dozens of examples of companies succeeding with Digital Sales and Marketing Mastery and They Ask, You Answer.

Case Studies
Become a Certified Coach
Become a Certified Coach
Close

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

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

Melissa Smith

Web Team Manager / Sr. Front-end Developer, 8+ Years of Web Development Expertise, 2x Recipient of IMPACT's Helpfulness Core Value Award

March 18th, 2016 min read

need-to-know-design-terms-for-people-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.

Radial Gradient
 
Linear Gradient

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.

FREE On-Demand: The Website Optimization Summit Opening Keynote

Watch Liz Moorehead’s takeaway-filled opening keynote from the Website Optimization Summit for FREE inside IMPACT+.

Your business website should be your most profitable virtual employee -- closing deals left and right. Yet, business leaders and digital marketers just like you are unwittingly undermining the money-making potential of your website. 

Let Liz Moorehead show you the simple and powerful ways you can immediately increase the revenue potential of your business website, no matter what industry you’re in, in this information packed keynote.

Watch Free On-demand

Keep Scrolling to Continue Reading

Watch Liz Moorehead’s opening keynote from the Website Optimization Summit, FREE on-demand inside IMPACT+. Learn how you may be unwittingly undermining the money-making potential of your website and how to fix it!
Watch Free On-Demand
Here Are Some Related Articles You May Find Interesting

Want to Contribute Content to impactplus.com? Click Here.

IMPACT+ Sign Up
A FREE online learning community with on-demand courses, hundreds of expert-led sessions, thousands of your peers ready to support you, and much more.
Check it out
FREE On-Demand: Watch Liz Moorehead’s Website Optimization Summit opening keynote now!
Watch Free On-demand
FREE On-Demand: Watch Liz Moorehead’s Website Optimization Summit opening keynote now!