Loading...

Follow Lightboard: Always Awesome on Feedspot

Continue with Google
Continue with Facebook
or

Valid

Marketers and designers work together all the time. There’s a lot of lingo in both of those fields and sometimes, things just don’t translate. 😥

If you’ve ever heard the term hamburger menu and started to think about Burger King, then this one’s for you. 🍔  (This is me, I’ve done this.)

If you’re anything like me, you may have found yourself sitting in a design meeting, wondering what the heck is going on. I know I’m not the only one. So I created this guide to the ABCs of “marketing design.” It’s got all the terms you need to know to bridge that gap between creative and marketing—making you look like the smartest person in the room.

If you want to walk the walk, you’ve got to talk the talk.

A

Above the Fold: The top portion of a web page that is visible without scrolling.

This term has roots in the newspaper biz, where “above the fold” referred to the content that was, literally, above the fold of the paper. This content could be seen while the newspaper was folded up and lying on the stand. Today, it more commonly refers to the top part of a website that you can see before having to scroll down.

B

Bleed: Printing that goes beyond the edge of where the sheet will be trimmed.

There are a bunch of terms to talk about the print area of a document. Gutter, slug, bleed, crops, trims, margins… it’s enough to make anyone’s brain hurt. Here’s a handy dandy guide to what it all looks like:

Image from Adobe Help CenterC

Color  Systems: A system for creating a full range of colors from a small set of primary colors. These commonly include RGB, CMYK, HEX, PMS (Pantone), among many others.

Okay okay, but what does this actually mean? Here’s a crash course:

PMS = printing with a few spot colors

CMYK = printing with full color

RGB = general onscreen

HEX = onscreen for websites.

D

Dummy text: Dummy text is copy that shares some characteristics of the real, final copy, but is random or otherwise generated. The industry standard is lorem ipsum, a piece of latin literature dating back from the 1500s. Also called Greeking.

You can generate lorem ipsum here. Or, you can spice things up a bit and go with some hipster ipsum. Or pirate. Or, my personal favorite, cupcake ipsum. 🧁

E

Editorial Illustrations: Images in online and print publications that accompany articles, grabbing attention, bringing stories to life and expressing complex ideas. These can be hero images, spot illustrations, infographics or any art needed to help the reader engage with the content.

F

Flat design: A minimalistic design that features clean, open space, crisp edges, bright colors and two-dimensional illustrations. It helps with usability and is considered a very user-friendly design style.

A popular variation on flat design is material design, developed by Google. The idea behind material design is that users get lost when everything is flat, so this new style adds shadows and accents to some of the more subtle features of the design. Every day you’re using a Google product you’re using material design. Here’s a handy reference guide:

Image from codeITG

Grid: A system for organizing layouts that is made up of horizontal and vertical lines to help align and structure content.

If you chat with a graphic designer for longer than five minutes, you’re going to hear about grids. They’re the basis text and web layout, and designers can’t live without them. They can get obsessed.

Everything has a grid. Your word doc, your powerpoint, your business card, your infographic, everything! One of the easiest ways to level-up any design is to turn on your grid and make sure everything is aligned with a line. Seriously. Grids are important.

H

Hamburger Menu: The icon in web design that signifies a collapsed menu, named for its unintentional resemblance to a hamburger.

You know what I’m talking about, I promise:

Image from UX PlanetI

Iconography: A simplified image meant to represent an object or action to be taken.

Icons are an important form of visual communication. Visuals are far more impactful for your audience than reading or listening, so leaning on visuals like icons are a great way to get your message to be heard. 📣

J

JPEG: A commonly used method of lossy compression for digital images.

JPEGs, PNGs, GIFs, oh my! I could write books about the different types of image formats. But instead, let’s check out this cheat sheet:

Infographic by June Mango Design

Want to dive a little deeper? This infographic tells you everything you need to know (and more) about image file formats!

K

Kerning - The process of adjusting the spacing between characters in a font make the lettering more visually pleasing.

Also important definitions to know:

Leading: Determines how text is spaced vertically in lines.

Tracking: Adjusting spacing throughout the entire word.

Want to test your skills? Try this game. Need a visual? Here ya go:

Image by the Annenberg Digital LoungeL

Logo: A graphic mark, emblem, or symbol to identify and recognize a brand.

But there’s more to it than that. Here are some other terms to know:

Logomark or Brandmark: The symbol or icon within a logo

Wordmark: The text/typographic treatment of the name within a logo

Logo lockup: The full logo that contains both the brandmark and wordmark

M

Mockup: A visual way of presenting a rough concept for your product or design.

When designing a landing page, the process is typically sketch (rough concept, on paper) -> wireframe (refining the concept, move to digital) -> mockup (add visual and design elements).

N

Negative Space: The space around/between the subject of an image, also commonly referred to as white space. If you’ve ever been frustrated watching a presentation where the speaker crammed as much text as possible onto every slide, you’ve wanted to see more negative space.

Think: The Google homepage.  ⚪◽❕

O

Orphans: A word or two on a line by itself at the bottom of a page or column. Orphans appear separated from the rest of the text and make the layout look less clean and crisp.

Similar to orphans, a widow is a single line from a previous paragraph that carries over onto the next page.

P

Pull Quote: A phrase or quotation pulled out from an article and used as a visual element.

Pull quotes are a great way to break up  dense text or to call attention to a specific line in an article. I mean look... 😍

Q

Quick Mask: A Photoshop mode that lets you (quickly) select objects for editing.

Quick masks can shave hours off of your Photoshopping project. Check out some super easy tips and tricks here.

R

Rule of Thirds: A photo composition technique where you divide the image frame into thirds and position your shot accordingly. When you place the focus of the image along one of these third lines, your photo will become more balanced.

Like so:

The same applies for almost all layout—from a text-based case study to display ads. And you’ll find that most Grids (remember way back when you are “G”?) are based on multiples of 3.

S

Stock: Graphics or images that have already been created.

Stock is more than cheesy stock photography that you pull from the internet. Stock just means any assets that have already been created (are “in stock”) that you don’t have to make new to fulfill a specific need. This can be anything from icons you download from a stock site, to an archive of product shots your company has stored on an internal server.

T

Typography: The art of making printed characters legible and visually appealing.

Typography is truly an art form in and of itself, but here’s a little crash course so you can know the difference between serifs and sans serifs next time they’re debated in a meeting:

Image by material.ioU

Universal Design: The art of making design accessible to any viewer or user.

Great design caters to all needs. That’s no small task. For example, is your website perfectly accessible for someone who is colorblind? How about someone with arthritis in their hands or fingers?  Someone who is visually impared, hard of hearing, or speaks another language? The answer is probably not.

Fortunately, there are resources out there to audit your website and create designs that make strides towards being universal design. 🌎

V

Vector: Graphics based on points, lines, and shapes based on mathematical formulas. Conversely, a raster (or bitmap) graphic is based on filling in colored blocks called pixels.

Vectors can be filled with different colors, blends, or gradients but ultimately display a single color each. Rasters can be blend since information is stored in the pixel rather than independent shapes. You’ll probably recall a designer asking you for a “vector” version of your logo–and the reason she’s asking for a vector is that they can be printed at extremely high resolution. A raster image is limited in size, and will start to look blurry when scaled up or printed.

Here’s what the same image may look like in raster and vector:

Image by vector conversionsW

Web safe fonts: Fonts that are pre-installed on most operating systems.

Wait, aren’t all fonts web safe? No! There are a ton of fonts out there, and more are created every day. When you use a font in a  design, you need to install it on your machine. Then, the viewer of the design will likely also need the font installed on their machine. If you’re using something like PowerPoint, which does not manage fonts, it can become a huge mess, fast.

A web safe font is basically just a “safe bet” that it will be compatible with wherever you send it. How do you know what those fonts are, you ask? Check this list.

In the last five years, Web Fonts have become commonplace. Google Fonts are free and widely available. They’re not quite as available as system fonts, but close–and let you be much more expressive with your typography.

X

Xd, Ps, Ai, Lr, etc. The Adobe Creative Cloud: A suite of applications and services from Adobe Systems for graphic design, video editing, web development and photography.

The Adobe Suite is pretty much the gold standard when it comes to design. Learning how to use  these tools is a powerful way to bridge the gap between marketing and creative. 🏅

Y

Yellow, Red, and Blue: The three primary colors. These colors make up all other colors and are the core of color theory.

Color is a powerful part of design with subtle effects. Studies have shown that different colors can make people feel differently about a brand. Here’s a little guide to jump start some of your thinking:

Z

CMD/CTRL + Z: The keyboard shortcut for undo.

Ahh command Z. The reason I still have my sanity. This is just a little tribute to the shortcut that has always had my back. You da bomb 💣

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

At Lightboard, we often talk about lean ways to build your brand. Your company might not be a mega-billion dollar unicorn, but there’s no reason you can’t look like one.

Sure, big brands have big budgets to make every asset perfect, but the building blocks of a core brand identity are within everyone’s reach. So you, too, can shine just like the big guys. ✨

Here’s our checklist of the core pieces you need to build (and protect) your brand–saving you time, money, and stress.

THE CHECKLIST[ ] A Strong Logo

Well, duh… but hear me out. Do you really have a well-defined logo, or are there a bunch of old variations that people still grab from their downloads folder? We’ve seen it all– different capitalizations of your company name, a dozen different shades of the “true company color,” and confusion about whether the horizontal or vertical lockup is the “right” one? Here’s a test: if 9 out of 10 people in your company can pick the “right” logo out of a lineup you’re in good shape.

[ ] Fonts

You have fonts in every nook and cranny of your brand. Just like copy sets tone, the font it gets written in sets your visual identity. Keep that identity consistent by locking down branded fonts. You don’t need to invest big bucks into a custom brand font, but you do need to narrow in on a key font that represents your brand. Google fonts are a great place to start since they’re free and easy to access. Once you decide on a font, add it to your brand book and implement it everywhere.

[ ] Master templates

As the guardian of your brand, there’s nothing more frustrating than seeing something shipped out to a customer that’s so far off brand another company could have made it. 😤 You can fix this problem with master templates. PowerPoint and Keynote have great templating tools. We all know that you can make a beautiful slide deck for your team, but there’s no guarantee it won’t go completely off brand after changing hands five+ times. That’s frustrating, so lock it down with templates. And don’t just stop at presentations, templates for emails, case studies, social media, and display ads will keep your assets looking sharp and your brand sparkling. ✨

[ ] Library of Graphic Elements

When you’re crunched for time and DIY is your only option, you’ll be grateful to have a folder of assets you can pull into your design. Not only do you avoid starting from scratch, but they make it easy peasy to stay on brand. Your library will grow over time, but there are also some pieces you can invest in right now: illustrations, textures, icons, and pre-selected stock photos are all things you can have a designer create for your use later on. Future you will be grateful. 🙌

[ ] Consistent Image Style

Stock photography is the most used visual element in marketing design. It’s cost effective and, as a little saying I coined goes, a picture is worth a thousand words. 🤫 Stock images are a great way to tell your brand’s story, but they need to be on brand just like any other asset. If you haven’t already, add a section to your brand book that touches on image style. For example, should images feature people or environments? Should images contain a certain subtle color palette? Is there a standard overlay you want to have on photos, and if so, when should it be used? Defining these terms can level up your images from generic stock to branded photography. 📸

[ ] Standardized Social Media

It’s hard enough to stand out on social media, and an inconsistent visual identity doesn’t help. When your followers are mindlessly scrolling through their feeds, they need a visual queue to know what they’re seeing belongs to your brand. Set up some social media guidelines that teach your team to create posts that are perfectly on brand, every time. You can do this by creating templates for content campaigns, using a defined color palette, staying consistent with copy styles, or setting up a filter you can use on every photo.

[ ] Cohesive Email + PDF

If you’re like a lot of our customers, you’re reaching out to leads with emails and PDFs. These early impressions are the most important, so your messaging needs to be crystal clear. Do your materials look like they came from the same company? Your audience has the memory of a goldfish, so you need to hold their hand every step of the way. Even if they’re excited when they drop their email, by the time your drip hits, they’ve likely forgotten all about you. I know, harsh… but true. A cohesive look and feel between your emails and your PDFs will give a (not so) subtle queue to your audience that this all came from the same place. Remember, cohesiveness = conversions, my friend.

[ ] Brand Book

A solid brand book is the north star of your visual identity. Having a place where you can go to check color codes, font options, and logo spacing is a magical, magical thing. 🤩Even if you aren’t a total brand nerd like we are, there’s no denying the utility of keeping all that info in one place. Once you have a brand book, make sure it’s easy to access. Guidelines are worthless if no one can see them, so ensure they’re easy to understand and just a click away from your team. Oh, and if you don’t have a brand book, sheesh–let’s take care of that, pronto.

-

Building Blocks Scorecard __ / 8

Well friend, how’d ya do?

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Separate tags by commas
To access this feature, please upgrade your account.
Start your free month
Free Preview