RGB: On-Screen Color
Screens (televisions, computers, and phones) create images from millions of little dots of red, green, and blue light. That’s the R, G, and B. Varying combinations of these R, G, and B dots can create almost any color and combine to create the colors and shapes in an image. Full strength of all three colors makes white (it is essentially all the colors in the spectrum at once or “white light”) and having none of the 3 colors present makes black (ie: no light=darkness).

RGB colors are specified with 3 numbers that indicate how much R, G, and B are present. Each number can be anywhere from 0 to 255 which represents the range each “dot” on the screen (which are each one “byte”) can display. Since black is none of the RGB colors, its value is 0, 0, 0. Conversely, white is all of them, so its value is 255, 255, 255. Pure red would be 255, 0, 0, etc. But making other colors doesn’t work quite like you’d imagine—for instance, adding a little blue to that red mix (255, 0, 100) does not create purple. That is what we expect because we think in terms of “Subtractive Color,” which is how physical colors (like the ink in CMYK printing) work—the physical surface is absorbing (subtracting) all of the wavelengths of light except the ones reflected back to our eyes. But light is “Additive,” meaning when different colors of light are added together, all those wavelengths reach our eyes, and what is registered is very different. The upshot is: on-screen colors can always be represented by some combo from 0 to 255 of each of the 3 RGB colors.

On-Screen Color Wild Card
There is one other way to describe on-screen colors, made prevalent thanks to HTML and web design. “Hex colors” are single 6 character (hence “hex”) alphanumeric identifiers for specific colors. The anatomy of these is not worth getting into, but a hex color code like #FFFF00 is just another name for RGB 255, 255, 0, or yellow.

CMYK: Printed Color

CMYK also uses the combination of its component colors to create a full range of perceived colors. Although CMYK is the printed equivalent. C=cyan (bright blue), M=magenta (deep pink), Y=yellow (appropriately), and K=black (inexplicably.) The varying sizes of dots in these colors are arranged in a careful “rosette” pattern when printed (rather than simply overlapping) which is imperceptible to the naked eye.

Below, you can see the “color separations”—each of the individual 4 colors that go into making up the image.

Like RGB, specific colors can also be described by a series of numbers/values for the amount of the C, M, Y, and K being put onto the paper. They’re indicated as a percentage—a light color uses a low percentage, where the dots have more of space between them. A darker color uses a high percentage, which is bigger dots or even a solid block of the color (for 100%). There are millions of combinations in between—a medium green might be 100% (solid) yellow combined with 50% cyan (medium-sized dots). It would be written as 100, 0, 50, 0.

Printed Color Wild Card
CMYK is the dominant form of printing these days, and is now much cheaper than it used to be. Fifteen years ago, it was still more common (and cost-effective) to print things as “1 color” or “2 color” when possible. That meant using “spot colors,” which are inks mixed to be the specific color you’re after—more like paints. If your logo used bright green, you might use the spot color Pantone 375. Certain industries still prefer spot colors—for example, if you’re putting your logo on a pen or a mug or a T-shirt. But it’s much less common these days, though we usually still specify a spot color on our logo guidelines because someone will probably ask for it at some point.

Thoughts on Brand Guidelines

The Guidelines Book

We often do full-blown brand guidelines “books” for our clients. Generally they’re for extensive branding programs with secondary visual graphics beyond the logo or for larger clients with a lot to cover. That might include numerous subbrands or extensive information beyond the visual brand—things like mission statements or requirements for writing in the “brand voice”. An example with all those things is shown above, which we did with IfNotNow for Fielday.

Sometimes when building a new brand, the guidelines document becomes an important (or the first) opportunity to establish the look and feel. A marketing manager might use this as a chance to lay out a new manifesto, while the designer may use it as a chance to work out the design ideas for the brand. But this isn’t the guidelines’ strong suit, since any attempt to give the designer or writer enough to sink their teeth into runs the risk of making the piece bloated or distracting.

Back in the day, there was a reason brand standards manuals were so fat. It was often necessary for vendors outside the organization to recreate the logo from scratch, or work with scant resources (hardcopy sheets of the logo were provided within the guidelines binder to literally be cut out and pasted into layouts, as seen to the left, via The Standards Manual). And those vendors had to implement the brand on their own with little information beyond what was detailed in the book. Those days are long gone. Not only do infinitely scalable digital files eliminate the need for elaborate diagrams showing the construction of the logo, they contain all necessary elements (like color and type) and are in universal formats suitable for everything from illuminated signs, to CMYK printing, to embroidery. And in the current connected world, there’s no reason to guess or interpret: someone with the answer or an example is only an email or a text away.

Of course, guidelines documents can still become lengthy—if a brand’s visuals include a lot of tricky graphic treatments or special customized text that require some “How To”-like sections, for example. Even a document covering just the core identity can get long, but we believe in keeping guidelines documents as succinct as possible. That said, below is evidence that we’re still suckers for a cool—if not strictly necessary—logo construction diagram, as long as it doesn’t make things tough for a vendor simply looking to find a CMYK value or an example of the logo in use.



The One-Pager

With this newfound ease of use, there are now more ways than ever for someone to implement a logo incorrectly—and more people capable of doing it. So there is definitely a need for some guidance. Luckily, in most cases, all the critical information can be conveyed in a pretty compact document. In fact, a one-pager should suffice for most brands just getting started. Not only does that make it easier to find important info, it means a guidelines document isn’t out of reach for a smaller client or a smaller budget.

We’ve become fans of the “cheat sheet” style illustrated here by the recent Girl Scouts redesign by OCD. It’s also become popular to imagine the one-sheet approach as a poster, like the two examples below. But expecting someone to hang this up anywhere in the office is unrealistic, so as long as it functions as an emailable PDF, it’s still effective. But the idea is sound: illustrate the core rules for correctly using the logo to maintain a strong brand. Introduce the logo and show its variations, the brand’s color breakdowns, and accompanying typography. These larger examples manage to squeeze in secondary graphics and some examples, too.

We recently established a very basic guidelines document that can be included with any logo we do. An example is below. It covers the essentials for using the logo without complicating the matter. We may find that it is too basic—perhaps merely saying what the “don’ts” are isn’t enough, and we actually need to show a stretched logo and a chrome-ified logo with slashes through them. But it feels like a useful document and can at least form the “v. 1” that a client can have fleshed out further down the road.

To see a random assortment of brand guideline examples we’ve gathered, visit our Pinterest page.

The Logo Design Process



We like to bring our clients into the logo design process earlier than most studios. After a good long talk about the client’s goals, we brainstorm a ton of possibilities and share them. When we’ve established several to explore, we’ll go off and sketch (literally, like with pencil and paper) and then share those sketches. Sometimes these first two steps are combined—the broad brainstorming is accompanied by sketches—but the outcome is the same: the client gets to be a part of the ideation before a single pixel has been pushed.

Once the sketches are turned into a bunch of actual designs on the computer, we present them, and the client can take a couple of them into the refinement stage. We know sometimes it’s hard to choose just one! So we like to help them make a strong decision by offering to button up a couple options to consider.

Depending on the amount of back and forth, the complexity of the client’s needs, and whether other elements (secondary graphics, etc.) are involved, the process can take a couple of weeks or a month. But this basic approach remains the same.

Starting by Sketching

This is one of the most important tools in the studio: my trusty red Sterling wirebound sketchbook. And it’s just the current one—there are dozens of spent ones filling a shelf at the back of the office.

Now, I love my computer. Love it. But my sketchbook is where all my projects begin.

Computers can do a lot, but they can’t come up with ideas. Working things out on paper allows me to explore what the design should be, not what the computer can generate to fit the bill. Starting on the computer also plunges me right into refinement and details, before the big picture is established—I can burn a lot of time tightening up an idea that doesn’t deserve it. And having a few options that look polished tends to cut off the exploration and experimentation before everything has actually been tried.

The first step in any design project is, of course, thinking: pondering what visual metaphors could represent a company for its logo. Simply recording these ideas—good or bad—is one great way to use a sketchbook. For me, sketching is part of this brainstorming process. Then sketching takes over and I’ll blaze through page after page exploring ways an idea could work formally. Above are my sketches for the first round of concepts for the logo for DC restaurant Halfsmoke. None of these drawings is “suitable for framing” by any stretch. Some are truly awful scrawls just to capture an idea. Sometimes I’ll actually just write the company name down several times, approximating a typeface, to see how the letters work together or play off each other. That lead to the idea above where the lowercase L became the 1 in a “1/2” built into the logotype. Truly “messing around” with the words, letters, or symbols I’m considering always reveals something I wouldn’t have thought of unless I was working through it on paper.

The inherent looseness of a quick thumbnail sketch can also immediately validate an idea worth keeping or exploring further. You can see this happening with a few of the ideas above (the script, the flame) which ended up resolved enough that it was just a matter of scanning them in and tracing them on the computer to get the final version.

Below are some early sketches for Elevele, many of which show it was very much about playing with expressive opportunities found among the letters. Sure, I would have seen some of these opportunities by typing out the name in Helvetica onscreen, but pencil and paper made me think through the ideas more critically. And after working out a bunch of sketched ideas, I could immediately see which ones were worth bringing into the computer and which weren’t. Had some of these ideas been conceived on the computer, they might have looked more successful than they really are, due to the level of polish.

Beyond greatly aiding the ideation process, sketching has another huge benefit: focus. Simply being away from my phone and computer (or better yet, in a different room) eliminates the distraction of email (and Facebook, Slack, etc.) to allow for some good quality time concepting.

And I don’t just do this for logos. I sketch everything from magazine covers, to web sites, to things like the infographic below, which was done for Hyde Park Angels. (For the life of me, I can’t interpret exactly what’s going on in these sloppy sketches now, but it meant something at the time.) I could have taken to the computer right away—quickly drawing some icons and typing in the stats. But sketching in a case like this is almost like “rapid prototyping,” allowing me to quickly try things out to see where things need to go for them to make sense. And the broader perspective afforded by quick sketches lead to some interesting relationships among the elements.

As I pointed out in the post about our logo design process, sketches can also offer the client a snapshot of numerous directions before a huge investment of design time has been made. But for me, the best reason is simply that the conscious, deliberate act of scratching lines into paper brings a different perspective to shapes and formal relationships and always leads to unexpected discoveries.

hazen-instagram   hazen-twitter  hazen-facebook
Sign Up for Emails