Graphic Design Terms for Beginners

So you have this brilliant idea for your brand that you’d like to convey to your graphic designer … but you’re not sure how to put it into technical terms that will be most effective! We’ve got you covered! Here are some basic graphic design terms that will help you be able to give your designer exactly what they need to bring your vision to life and to help you understand communication from your graphic designer.

Discussing Layout for Your Graphic Design:

Header: A banner typically found toward the top of the page. On a website, this may be where the logo is typically placed. On social media, a header is usually the personalized image accompanying a user’s profile photo. A header is often among the first element a user will see when visiting a page, so make sure it represents your brand well.

Navigation: Typically found below the header, navigation links help you find important pages on a website easily. It usually stays on top no matter where you are, and is designed to be easily accessible for visitors to use.

Body: This can include any articles, images, services…pretty much everything you have to say is found in the body. Think of this as the real meat of your page. These elements within your body are also known as content.

Reading Gravity: This refers to the natural flow a viewer’s eyes will follow when examining your content. If a graphic or web page layout lacks reading gravity, your viewer may be confused where to look next and get frustrated. In everything they do, your designer makes sure that the content they create contains reading gravity; the goal is for your potential customers to enjoy looking at your content.

Footer: The opposite of a header; a footer is always found at the bottom of a webpage. Typically consistent across your site, this is where a designer will put your contact info, business hours, convenient links to social media, or even your sitemap.

Sitemap: These can come in different forms, depending on the needs of your business; a sitemap is essentially a summary of your navigation where all site pages are visible in one place.

Padding: The amount of space that separates elements. Padding is often used to support reading gravity by separating text and images and creating open space.

Margin: The amount of space between your page’s body and its border. To supplement reading gravity, it’s important to have proper margins in your body text. Your designer wants to make sure there is a proper balance of margin space so that your content stands out and has enough space on the page.

Discussing Color for Your Graphic Design:

What’s the difference? (Tint, Shade, Hue, Value)

graphic design display ads color terms

  • Hue: The perceived dominant color family. For example, turquoise, navy, and cyan all have a blue hue.
  • Saturation: The intensity of a color. If you are looking at a color with high saturation, it will appear intensely vibrant. In contrast, an object with no saturation will appear grayscale.
  • Tint: The amount of white that is included in a color. Pastels are an example of color tints.
  • Shade: The amount of black that is included in a color. Shadows are an example of shade.

Other terms relating to color:

Opacity: How transparent a given element is. Something with low opacity is more see-through, whereas something with high opacity is non-transparent.

Gradient: A blended, gradual transition between one color to another.

Complementary: Colors that are on the opposite ends of the standard color wheel. A graphic designer typically uses complementary colors in a design so that each element stands out and is pleasing to the eye.

Discussing Images for Your Graphic Design:

Raster: Refers to images composed of pixels; Your camera takes raster images. These image types normally take up a modest amount of space, but if they are resized to be larger or smaller, the image quality may suffer.

Vector: These images are composed of mathematical equations that are designed to produce crisp, consistent, high-quality images. The text you type on a computer is often sourced from a vector image. Vector images can be resized to any height and will still maintain the original quality. However, they take up a lot of space and are more practical for illustrations (such as company logos or web icons).

Pixels / DPI: Pixels are the small colored dots that compose larger digital images. DPI, or Dots Per Inch, refers to how many pixels per square inch are being employed to construct a given image. The more DPI, the bigger the file will be.

Compression: When you save a photo into a useable format, it is compressed, or packaged, into a given file type. The more compressed an image is, the smaller the file size will be. Alternatively, the less compressed an image is, the higher the image quality.

questions about digital marketing

Discussing File Types for Your Graphic Design:

PNG: If you don’t know which image type to use, opt for PNG. The compression quality is arguably the highest for a standard web-friendly image. It will typically take more space than a JPEG, but this is not much to be concerned about. As a graphic designer, this is my image file-type of choice.

JPEG: If you own an iPhone, your images are stored by default as this file type. JPEG is a good option if you’d like your images to load quickly and maintain a healthy amount of storage space. However, the compression on this image type is not the greatest quality.

GIF: You’ll recognize this file type as the one that infinitely loops an animation. GIFs can create an eye-catching design – but should be used sparingly. These file types have limitations – image quality is usually low, color selection is limited, and overusing GIFs may also look tacky.

PSD: Also known as a Photoshop Document, this is the standard file type used to edit and open uncompressed images in Photoshop. They typically will not render at all on most web platforms. Your graphic designer may use them for trading feedback and making edits before converting them into something more web-friendly. Their files sizes are normally very large and difficult for older computers to process.

PDF: A Portable Document Format is a multi-versatile file type used to house all standard elements of a printed document (like images, text, and multiple pages) in a format that is easy to transmit. These files can be used for many types of documents, including menus, brochures, or forms.

AI: The default file-saving format for Adobe Illustrator, a design industry standard for creating vector images. If you are commissioning a logo or other vector image from a designer, always ask for the original AI file to be included with the files they send. Although it’s not a typical web-friendly format, it’s always a good practice to have a backup of your original AI file just in case something happens to the other copies.

Discussing Text for Your Graphic Design:

What Are Font Family Classifications? 

graphic design display ads terms font

  • Serif: A serif is the little embellishing lines at the end of letterforms. The serif assists the human eye in making letter distinctions. A serif font is a term for a font that makes use of these.
  • Sans: Short for sans serif, this classification refers to fonts without serif embellishments at the ends of letters. Most modern fonts used today are sans.
  • Script: A classification of fonts meant to appear handwritten or similar to handwriting.
  • Decorative: Fonts initially designed for use in eye-catching advertisements, or for headlines. These types of fonts may sacrifice legibility for style.

Other terms relating to text:

Justification: A term that refers to how text is aligned on the page. Text can be right, left, center, or full-justified. Justification can simply be a choice that suits the designer’s style, or it can make the text easier to read for the viewer. For example, books printed in the U.S. are almost always justified to the left, because English readers view the written word from left to right.

Letterspace: The amount of space between individual letters.

Line height: The amount of space in between individual paragraphs.

Weight: How thick or thin a font is.

Graphic Design for Business Advertising

And there you have it – your own personal cheat-sheet for basic graphic design terms! We hope that you find this dictionary of terms useful in communicating with your graphic designer, so you can get exactly what you envision for your printed ads, Google display ads, or whatever your needs are.

Are you looking for help with designing and executing a successful online ad campaign? We can help with that – from professional graphic design and carefully crafted ad copy to targeted audiences and analytics, Seapoint Digital can help you carry out a campaign that gets great results for your business.

Reach out to us for more information about an online advertising campaign!

Adia Montagna

Adia Montagna is a native of southern Maine with a degree in Digital Media. She is a skilled Graphic Designer, Web Developer and Animator. Outside the workplace, Adia is an accomplished Cartoonist, Composer, and is bilingual in Japanese.