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
inbound-marketing-strategy-playbook-cover

Free: Assessment

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

By Melissa Smith

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.

Topics:

Web Design
Published on March 18, 2016

Recent Articles

Website Conversions in 2023 — STOP, START, KEEP
January 25, 2023 • 5 min read
How Much Does a Website Design or Redesign Cost in 2023?
November 21, 2022 • 9 min read
8 of the Best Business Website Designs to Inspire You in 2023
November 17, 2022 • 7 min read
Take It From an Expert: You Probably Don’t Need a New Website
November 16, 2022 • 4 min read
What Does a Great Inbound Marketing Website Look Like in 2023?
November 14, 2022 • 12 min read
Your 2023 Website Strategy Must Include These 6 Things
November 4, 2022 • 9 min read
4 Ways To Recession-proof Your Website In 2023
November 1, 2022 • 5 min read
8 Best Content Management Systems for Digital Marketing in 2023
October 1, 2022 • 9 min read
12 Essential Tips for Improving Your Web Design in 2023
September 13, 2022 • 16 min read
What Is a Learning Center and Why Does My Website Need One?
July 28, 2022 • 6 min read
23 of the Best Examples of Business Blog Design
May 30, 2022 • 13 min read
5 Prep Secrets for a Smoother, More Successful Website Project Plan (+ Infographic)
May 16, 2022 • 8 min read
Website Redesign Checklist: The 12 Crucial Steps You Need To Be Successful
February 22, 2022 • 17 min read
11 Pricing Page Examples for Business Websites (Updated for 2023)
January 18, 2022 • 10 min read
8 Crucial Elements Every Homepage Design Should Have [+Video]
January 15, 2022 • 6 min read
What Makes a Good Website Design? 7 Award-Winning Examples To Be Inspired By
December 18, 2021 • 9 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
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