Services
TAYA

They Ask, You Answer Mastery

A coaching & training program that drives unmatched sales & marketing results.

Sales

Sales Performance Mastery

Improve the competencies and close rates of your sales organization.

Web design

Website Mastery

Web design, development & training for your team.

HubSpot

HubSpot Mastery

Everything you need to get the most from HubSpot.

AI Mastery

AI Enablement Mastery

Unlock the power of AI in all aspects of your revenue operations.

Discover how IMPACT’s services can help take your business to the next level. Book a free 30-minute coaching session Book a free 30-minute coaching session
Learning Center
Learning Center

Learning Center

Free resources to help you improve the way you market, sell and grow your business.

Discover how IMPACT’s services can help take your business to the next level. Book a free 30-minute coaching session Book a free 30-minute coaching session

Free: Assessment Does your website build trust with buyers and bring in revenue?

Score My Website
Close

Free: Assessment

Does your website build trust with buyers and bring in revenue?
Take this free 6 question assessment and learn how your website can start living up to its potential.
Score My Website
Melissa Smith

By Melissa Smith

Mar 18, 2016

Topics:

Web Design
Web Design

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

Melissa Smith

By Melissa Smith

Mar 18, 2016

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

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: Assessment

Does your website build trust with buyers and bring in revenue?
Take this free 6 question assessment and learn how your website can start living up to its potential.

Related Articles

10 Pricing Page Examples for Business Websites (Updated for 2024)

November 30, 2023
Connor DeLaney Connor DeLaney

The Hidden Costs of a Cheap Website

November 29, 2023
Vin Gaeta Vin Gaeta

The Website Experience Your Customers Are Yearning For

November 27, 2023
Mary Brown Mary Brown

10 Examples of Company Profile Pages to Inspire Yours

November 22, 2023
John Becker John Becker

Is It Time for an AI-powered Chatbot on Your Website?

November 21, 2023
Will Smith Will Smith

Think of Your Business as ‘E-Commerce’ — No Matter What You Sell

November 15, 2023
John Becker John Becker

8 of the Best Business Website Designs to Inspire You in 2024

November 1, 2023
John Becker John Becker

Your Website in 2024: The Future of Trends, Tech, and Traffic

November 1, 2023
Vin Gaeta Vin Gaeta

Create Better Website Videos by Avoiding These 3 Mistakes

October 25, 2023
Melissa Smith Melissa Smith

4 Ways To Recession-proof Your Website In 2024

October 22, 2023
Marcus Sheridan Marcus Sheridan

Business Leaders: Do You ‘Own’ Your Own Website?

October 16, 2023
Mary Brown Mary Brown

Can I Use AI Tools To Build My New Website?

September 18, 2023
Vin Gaeta Vin Gaeta

What Is a 'Learning Center' and Why Does My Website Need One?

September 14, 2023
John Becker John Becker

How Much Does a Website Redesign Cost in 2023?

July 20, 2023
Vin Gaeta Vin Gaeta

Do You Need a New Website? Maybe Not

July 19, 2023
Vin Gaeta Vin Gaeta

14 Award-Winning Website Designs (& What They Did Right)

July 17, 2023
Christine Austin Christine Austin

What a New Self-Selection Tool for Your Website Will Cost

July 13, 2023
John Becker John Becker

9 Self-Service Tools to Inspire Your Business Website

July 10, 2023
John Becker John Becker

What Does a Great Inbound Marketing Website Look Like in 2024?

May 16, 2023
Melissa Smith Melissa Smith

Your Website Strategy Must Include These 6 Things

March 20, 2023
Mary Brown Mary Brown

Website Conversions in 2023 — STOP, START, KEEP

January 25, 2023
Vin Gaeta Vin Gaeta

Website Mastery: A better redesign process for your business website

November 1, 2022
John Becker John Becker

8 Best Content Management Systems for Digital Marketing in 2023

October 1, 2022
Melissa Smith Melissa Smith

12 Essential Tips for Improving Your Web Design in 2023

September 13, 2022
Christine Austin Christine Austin

23 of the Best Examples of Business Blog Design

May 30, 2022
Christine Austin Christine Austin