60 Design Terms You Should Know

Web design tips.

This next offering was supplied by Envato Tuts+ Tutorials . Normally I look ahead to viewing one of their blog posts because they are genuinely beneficial. I’m guessing you’ll enjoy.

As a designer, explaining and putting visual work into words can be tricky as not everybody is a designer. As a freelancer, it is up to you to get the idea across and describe (a.k.a. sell) your design to potential clients. Not only that, but getting feedback and knowing what you are talking about is important in order to be a credible designer. 

In this article, we put together a list of 60 design terms that can help you translate visual ideas into a verbal conversation. The design language is vast and can get complicated to explain, especially to other non-designers. So we hope this list helps you understand and provides an easy way to describe the terms.

10 Essential Design Principle Terms

Design composition terms

What Is Composition?

Composition, also called layout, is the visual arrangement of design elements that create a complete image. Within a composition, you may use different principles of design to create visually pleasing work to deliver a functional layout.

What Is Balance in Design?

Any element placed on a page has visual weight that can be affected by form, size, color, and texture. In order to make a layout balance, some elements might need to have a certain scale. 

What Are the Type of Alignments?

Alignment refers to the position of the elements on a layout—the way the visual elements are arranged so that they line up. The alignment can be left, right, justified, or centered. 

What Is Repetition in Design?

Repetition creates consistency by repeating the same element within a layout multiple times. 

What Are Some Types of Contrast?

Contrast is the level of differentiation between different design elements to create visual hierarchies. The variation may be in form, color, texture, and size. 

What Is Negative Space?

Negative space is the blank area around a design element. It is used to emphasize certain parts of a layout and to zone into a specific element. 

What Is Hierarchy in Graphic Design?

In graphic design, you’ll quickly learn to arrange elements by the level of importance. Hierarchy is exactly that. In order to create hierarchy, you need to have contrast in your design. If one image is larger than the other, this will place the emphasis on the larger image, and the reader will look at it first. 

What Is the Difference Between Symmetry and Asymmetry?

Symmetry refers to the equal amount of elements reflected on a page. If you were to draw a vertical line through its center, the elements can sometimes be mirrored or the visual weight can be the same from one half to the other.

The opposite of symmetry is asymmetry. The elements on both sides of the centerline aren’t equal and can create an unbalanced design. 

What Is a Grid?

Grids are a group of intersecting vertical and horizontal lines that can help you structure content on a page. There are many types of grids for different uses, but the common denominator is that they help keep the content organized and clean. 

If you are interested in diving into more composition and design terms, be sure to check out: 

10 Important Color Definitions You Should Know

Color related terms

What Is the Difference Between CMYK and RGB?

CMYK stands for cyan, magenta, yellow, and key (black). These are the four most basic colors you can use for print. You’ll notice CMYK colors aren’t as vibrant as RGB. This is because CMYK is subtractive—this means that the colors work with the reflected light.

RGB colors are used on-screen only. RGB stands for red, green, and blue, and this color mode is additive, meaning that by mixing these primary colors in different combinations, we can simulate a bigger range of colors. 

What Is Grayscale?

Grayscale is a monochromatic palette using different shades of gray in an image. A single image is composed of up to 256 combinations of shades of gray. 

What Is the Definition of Opacity?

This refers to the level of transparency on an element. The lower the opacity, the more transparent the element is. If the opacity is set to 100%, it means the object is solid. 

What Is Saturation?

Saturation refers to the intensity of a color. You’ll notice saturated images appear brighter and punchier. Desaturated images are dull and almost colorless. 

What Is the Difference Between Hue, Tone, Tint, and Shade?

Hue is a way to describe a pure color without tint or shade (added white or black). For instance, any color on the color wheel is a hue (blue, yellow). 

Tone refers to a hue with gray added. The tone will lower the intensity of color, and it can become dull. 

Tint refers to a hue with added white to lighten it and make it paler. The tint can range anywhere from a slightly lighter color all the way to completely white, with barely any color. 

Shade refers to black added to a color. This is the opposite of Tint—instead of making the color lighter, shade will darken it. 

What Is a Color Palette?

A color palette is a group of colors that can be used for a specific design project. This color palette usually represents a brand and should be chosen to work in harmony with each other. 

What Is the Pantone System?

PMS or Pantone Matching System is the most widely used system for blending colors that aren’t CMYK. Every hue is identified by a number that is easy for designers to reference and reproduce when printing. 

If you want to check out more about color, we have a section on it in this article:


What Is Resolution in Graphic Design?

The resolution of an image determines the file quality. A high-resolution image will be crisp, and wherever the focus is, it will have defined edges. The higher the resolution, the higher the quality. A low-resolution image will be pixelated and blurry.

What Are Pixels?

A pixel is the smallest basic unit of color on a computer that makes up images. Depending on the amount of these tiny squares, you can have a high- or low-resolution image. 

What Is the Difference Between PPI and DPI?

PPI stands for pixels per inch. It is a measurement used to define the resolution of a screen, most commonly monitors, cameras, and scanners. 

DPI is similar to PPI but is used for printing, and it stands for dots per inch. Printers produce images composed of small dots that affect the printing quality of an image. 

Image related terms crop close-crop trim and rule of thirds

What Is the Difference Between Crop and Close-Crop?

Cropping refers to eliminating unnecessary parts of an image. By doing this, you’ll change entirely the direction, emphasis, and even composition of an image. Cropping improves the framing of an image to fit your project.

Similar to cropping, close-cropping refers to cutting out a specific element from an image. This is mainly done for headshots if you wish to use a different color background. 

What Is Trim Size?

Trim size is the final size of a printed project after it’s been trimmed. The trim size is guided by the crop marks that are on a printed sheet. 

What Is the Rule of Thirds?

This technique is used to determine the focal points of an image or design. Imagine a 3×3 grid on top of an image or a design. The four spots where the lines intersect indicate the focal points, and these areas are where the most important elements should be placed. 

Learn more about grids in this article:

16 Typography Terms You Should Know

What Is the Difference Between Serif and Sans Serif?

A serif is a small extra stroke at the end of each character. A font family using serifs is called a serif typeface. These typefaces are usually easier to read because the extra stroke allows our eyes to follow the characters more easily. Serif typefaces are widely used for body copy as they are deemed elegant and highly legible, depending on the size. 

A sans serif is a character that doesn’t have the small strokes at the end of each character. Sans serifs are also used as body copy but most predominantly on screen as they don’t have small details that can be difficult to render. 

What Is a Script Font?

Script typefaces are based on handwriting, and they can be either historical or modern. They possess a fluidity compared to other traditional typefaces.

What Is a Slab Serif Font?

Slab serifs are characterized by thicker and heavier serifs compared to regular serif fonts. Slab serifs can be square, angular or rounded depending on the typeface. 

What Is Monospace in Typeface Design?

Monospace fonts have a fixed width, meaning each character occupies the same amount of horizontal space. You tend to see this in typewriters or when setting computer codes. 

Typography related terms serif sans serif script slab serif and monospace

What Is the Difference Between Kerning and Tracking?

Kerning is the space between two specific characters. Certain pairs of letters can create awkward spaces, and by kerning them you can adjust the space between them. By adjusting the space, you can improve the legibility. 

Similar to kerning, tracking refers to the spacing between characters. While kerning refers to a pair of characters, tracking applies to a group of letters. 

What Is Leading in Graphic Design?

Leading determines the distance between multiple lines of text. This ensures that the lines aren’t touching and that there’s enough space to read the lines comfortably. 

Typography related terms kerning leading tracking

What Is Weight in Font Design?

Weight refers to the thickness of a character relative to its height. A typeface may come in many different weights, and most usually come with a normal and bold weight. It isn’t unusual to see fonts with anywhere from four to a dozen weights. 

What Is Point Size?

A font is measured in point size, and it dictates the height of the character. There are 72 points in 1 inch or 2.54 cm. 

What Is the Difference Between Uppercase and Lowercase?

Uppercase characters are used at the beginning of sentences or the first letter of proper names. They are also called capitals or caps. The name uppercase comes from the old-school typesetting printing presses. Printers kept capitals in the upper drawer of a desk.

Lowercase glyphs are the non-capital letters that make up the rest of a text block. The name lowercase comes from the old way of setting type with printing presses. Printers kept the lowercase letters in the lower drawer of a desk.

What Are Small Caps in Design?

Small caps are uppercase characters that are shorter than regular uppercase given in a font. Some typefaces come with small caps, while others don’t, and the software you are using will generate them. When small caps are designed as part of a typeface, they will usually be the same height as lowercase characters or just slightly taller.

typography related terms

What Is Lorem Ipsum?

Lorem ipsum is placeholder text that can help you show your design without meaningful content. It is mostly used at the beginning of a design project to mock up the design until the final copy is available. 

What Is Readability vs. Legibility?

Readability refers to the way blocks of text are arranged on a page. Legibility refers to how well one character can be distinguished from another.

What Are Widows and Orphans?

Widows and orphans are seen when typesetting text. A widow is a short line or a word at the end of a paragraph or a column causing too much white space between paragraphs at the bottom of a page. An orphan is a short line or a single word at the beginning of a column or page. 

Widows in Typesetting

Orphans in Typesetting

If you are just as interested in typography as we are, be sure to check out:

The 5 Logo Design Styles You Need to Know

Logo related terms lettermark wordmark pictorial mark abstract mark and emblem

What Is a Lettermark or Monogram?

A lettermark is a type-based logo made of a few letters. It’s often used if a company’s name is made of two or more words. A lettermark will shorten the company name by using only its initials, resulting in simplicity. For instance, NASA is easy to say and remember compared to National Aeronautics and Space Administration. 

What Is a Wordmark?

A wordmark focuses on the business name alone rather than reducing it to a single lettermark. For instance, Google is already a memorable name, but if it’s combined with a strong typeface and colors, it results in a powerful wordmark.

What Is a Pictorial Mark?

Also known as a brand mark, a pictorial mark refers to a graphic-based logo. It’s usually an icon that has been simplified and stylized to represent a brand. For instance, Twitter’s icon is a bird, and it’s recognized around the world as Twitter. 

What Is an Abstract Mark in Logo Design?

The opposite of a pictorial mark, an abstract mark is not based on a real object. Instead, it’s an abstract geometric representation that represents a business. Adidas’s logo doesn’t represent anything from the real world. Instead, the brand distilled their ideas into a geometric shape that best represents them. 

What Is an Emblem?

An emblem logo is a mark in which the name of a business is contained within a single shape. An emblem is not necessarily just for the corporate world—you’ll see emblems representing schools or sports teams. 

10 Must-Know Image File Formats 

What Is a Raster Image?

Raster images are made up of a set of grid pixels that together make an entire image. If you want to stretch a raster image, it’ll get pixelated and blurry.

Different types of raster files GIF JPEG PNG TIFF PSD

What Is GIF?

GIF stands for Graphics Interchange Format. This file format supports animation and transparency. It can only display up to 256 colors, which allows you to have small files. Perfect for the web. 

What Is a JPEG Image?

JPEG is the most widely known raster file. Anywhere from images on an email to photos and anything you find online. JPEG stands for Joint Photographic Experts Group. Unlike PNG, JPEG doesn’t have the ability to be transparent. It’s suitable for web and print.

What Is a PNG?

If you are looking to maintain some quality when an image is compressed, PNG is for you. PNG stands for Portable Network Graphics, and it was created to improve the quality of GIF.

What Is a TIFF Image?

TIFF images are mostly used in layout design and InDesign. It stands for Tagged Image File Format, and the format produces a higher quality image compared to the formats above. 

What Is a PSD File?

Adobe Photoshop’s document format is PSD or Photoshop Document. This version is an uncompressed raster image file.

What Is a Vector?

Vector graphics are made out of small graphics like points, lines, and curves. The shapes within a vector use a mathematical equation that allows the vector to be resized without compromising the quality. Vectors won’t get blurry, unlike the raster image format.

Vector file formats

What Is an AI File?

AI stands for Adobe Illustrator. This format was developed by Adobe to represent single-page vector drawings in EPS and PDF. 

What Is an EPS File?

EPS stands for Encapsulated PostScript, and it’s a resizable format that contains vectors. Mostly used for logos so they can be scaled as needed in any type of project. 

What Is a PDF?

PDF stands for Portable Document Format and was developed by Adobe. This format is the most used format to be downloaded and viewed on any computer. From the vector standpoint, Adobe Illustrator can embed PGF data (Illustrator’s native format) onto a PDF so it can be used as a vector format.

That’s It! 

In this article, we rounded up 60 design terms that you should know. These terms can help you explain your designs to clients and talk about your work like an expert. Many of these terms we learn during our design studies, and it’s easy to forget them if you don’t use them often. Explaining these terms to your clients can also help them to be on the same page as you when it comes to feedback. 

If you liked this article, be sure to check out: 

First posted here: Envato Tuts+ Tutorials

Trust you found that useful info that they provided. You’ll find similar blog posts on our main website: https://www.designmysite1st.com

Let me have your feedback below, share a short comment and let me know what things you want us to write about in up coming blog posts.