Subscribe
Join 40,000+ sales and marketing pros who receive our 4x a week insights, tips, and best practices.
Thank you! You have been subscribed.

Free Course: Elements of a Great They Ask, You Answer Website

Start the Course Subscribe
Join 40,000+ sales and marketing pros who receive our 4x a week insights, tips, and best practices.
Thank you! You have been subscribed.
Learning Center
Learning Center
Close
The IMPACT Learning Center

Free resources to help you master inbound marketing and They Ask, You Answer

Access the Learning Center

Access the Learning Center

Access the Learning Center
learning_center_grey__What is They Ask, You Answer-v2-black

What is They Ask, You Answer?

What is <span>They Ask, You Answer?</span>
Articles, Podcasts, & Updates

Articles, Podcasts, & Updates

Articles, Podcasts, <span>& Updates</span>
learning_center_grey__Free Courses and Certifications.svg

Free Courses & Certifications

Free Courses & <span>Certifications</span>
On-Demand Keynotes & Sessions

On-Demand Keynotes & Sessions

On-Demand <span>Keynotes & Sessions</span>
Events
Events
Close
IMPACT+ Membership
IMPACT+ Membership
Close
Services
Services
Close
Navigation_8_2021_taya

They Ask, You Answer Coaching & Training

They Ask, You Answer Coaching & Training
They Ask, You Answer Workshop

They Ask, You Answer Workshop

They Ask, You Answer Workshop
Navigation_8_2021_workshop

Inbound Marketing Services

Inbound Marketing Services
Navigation_8_2021_website design - monitor

Website Design & Development

Website Design & Development
Navigation_8_2021_hubspot implementation

HubSpot Training & Implementation

HubSpot Training & Implementation
Navigation_8_2021_virtual selling

Virtual Sales
Training

Virtual Sales <br>Training
Navigation_8_2021_swell - paid ads

Paid Search & Social Services

Paid Search & Social Services
Become a Certified Coach
Become a Certified Coach
Close
... Inbound Marketing Web Design
Close
Elements of a Great They Ask, You Answer Website

Free Course:

Elements of a Great They Ask, You Answer Website
Start the Course
Elements of a Great They Ask, You Answer Website
Free Website Course
View Elements of a Great They Ask, You Answer Website
Elements of a Great They Ask, You Answer Website

Free Course:

Transform your website into your best salesperson and get set up for inbound marketing success!

In this course, you’ll learn:

  • What content and features your website needs to succeed with inbound marketing
  • How to design your website to best educate your audience
  • How to gradually make improvements or redesign entire elements of the website

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

By Melissa Smith

Melissa Smith also recommends this free course, Elements of a Great They Ask, You Answer Website.

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

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.

Free Course: Elements of a Great They Ask, You Answer Website

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.

Elements of a Great They Ask, You Answer Website
Elements of a Great They Ask, You Answer Website

Free Course:

Elements of a Great They Ask, You Answer Website

Transform your website into your best salesperson and get set up for inbound marketing success!

In this course, you’ll learn:

  • What content and features your website needs to succeed with inbound marketing
  • How to design your website to best educate your audience
  • How to gradually make improvements or redesign entire elements of the website

Topics:

Web Design
Published on March 18, 2016

Recent Articles

11 Pricing Page Examples for Business Websites (Updated for 2022)
January 18, 2022 • 10 min read
8 Crucial Elements Every Homepage Should Have [+Video]
January 15, 2022 • 6 min read
What Does a Great Inbound Marketing Website Look Like in 2022?
January 10, 2022 • 11 min read
What Makes a Good Website Design? 7 Award-Winning Examples To Be Inspired By
December 18, 2021 • 9 min read
What Is a Learning Center and Why Does My Website Need One?
November 22, 2021 • 6 min read
5 Prep Secrets for a Smoother, More Successful Website Project (+ Infographic)
October 14, 2021 • 7 min read
7 Self-Service Tools on Business Websites to be Inspired By
September 29, 2021 • 7 min read
Google Shares New Tools to Audit Website User Experience
August 12, 2021 • 3 min read
New HubSpot CMS Hub Starter Tier Released for Growing Businesses
August 6, 2021 • 4 min read
ICYMI: Digital Marketing News Update for July 26, 2021
July 26, 2021 • 6 min read
ICYMI: Digital Marketing News Update for July 19, 2021
July 19, 2021 • 6 min read
What the Heck is Going on With All the Google Updates? (Content Lab, Ep. 54)
July 15, 2021 • 1 min read
8 Best Business Website Designs (Updated for 2021)
July 15, 2021 • 5 min read
ICYMI: Digital marketing news update for July 12, 2021
July 12, 2021 • 5 min read
Too many internal links in content can confuse Google about site structure
July 9, 2021 • 5 min read
Google July 2021 core update rolling out over next 2 weeks
July 2, 2021 • 4 min read
6 tips for building a great diversity and inclusion page (+examples)
June 29, 2021 • 7 min read
Google punts third-party cookie ban to 2023 for 'responsible planning'
June 25, 2021 • 6 min read
8 types of website performance metrics you should look at on a monthly basis
June 24, 2021 • 11 min read
Finally, Google page experience core update is rolling out
June 18, 2021 • 3 min read
8 Business Blog Design Examples That Keep Readers Engaged
June 16, 2021 • 6 min read
5 ways you can use the StoryBrand framework to make a better website
June 14, 2021 • 5 min read
What is a Featured Snippet? [Definition + Examples]
June 10, 2021 • 4 min read
Google June 2021 core update live, July core update coming
June 4, 2021 • 3 min read
Google's June page experience core update will be mobile first, then desktop
May 21, 2021 • 3 min read