Type & Color
Lesson 2: Branding
What’s in this lesson
- Be Obvious
If you have the opportunity, pick a color and type combination that feels obvious or reflects the emotion you want your product to evoke. (We’ll go over emotion in detail in lesson 4.)
- Be Different
If you can’t be obvious, do an analysis of your brand’s competitors and be different. If the competitors have used all the good colors, think outside the box.
- Be Outrageous
Surprise the audience. Sometimes the best color and type choices are the most creative.
- Be Consistent
Above all—once you’ve made your choice. Stick with it.
Case Study: Charlottesville Design Week
Originally published here.
Everyone has little crazy ideas. Sometimes they’re crazy enough to forget, and sometimes they’re crazy enough… they just might work.
I’ve launched a tiny design festival in my town of Charlottesville, Virginia. It took place in mid-November and it was crazy enough to work. It was really small, with a handful of speakers, venues, panelists, open-houses, etc. The week came together late, but worked out pretty well.
At first I started with a simple 2-page summary, which I sent around to designers I know. Building momentum behind the idea was more important than thinking of branding or anything like that. To be honest, developing a brand is hard. It takes a ton of effort, and if the idea isn’t going to work out, it’s a massive waste of time. I.e. knowing when to develop a brand is incredibly important.
Read my post on why you do not need a logo.
At a certain point, people started asking for more legitimacy. They want to see a schedule. They want a registration page. They want a website. But to make a website, you need branding.
All of this brings us to the Charlottesville Design Week branding: it’s in a style called Brutalist. It’s not fancy. It’s not easy to look at. It’s—to some people—ugly. And that’s alright.
Every design starts as a set of practical goals and aesthetic desires. It needs both a function and a form. They have to match, but anyone who thinks there’s one form for each function ignores the entire realm of imagination, desire, and memory. To follow “form ever follows function” to a T means that you miss out on many better forms.
Here were my formal goals for the Design Week branding:
1. It had to be a brand system, not a logo
2. It had to adapt to print and web
3. It had to be different than everything else in Charlottesville
Here were my aesthetic goals for the branding:
1. It had like it
2. It had to explore the Brutalist aesthetic. Which basically means it had to be a little difficult to look at.
3. It had to use colors that were memorable and uncommon
4. Ditto for type choices
I started by looking at all the other brands in the small city of Charlottesville. Because it is so small, this doesn’t take long. The main brands I had to look at are the other festivals and design-related events in town. That list gets fairly short:
1. Tom Tom Founders Festival, where I work full time.
2. The Virginia Film Festival
3. LOOK3 Festival of the Photograph
4. Design Rally (who ended up being a great partner in planning the week)
5. Design Marathon (who ended up being a key event for the week)
These brands are fairly all-over. Part of me wished they all used the same colors and whatnot, but that’s alright. After looking at all these, I made a list of what they have so I can see what’s missing. First thing you’ll notice is all the sans serif faces. And by “all” I mean that literally all of them set their name in a sans serif face.
What does that tell me? Set the Charlottesville Design Week in something other than a sans serif face. That leaves… Serif and script, basically. While I want the brand to be difficult to look at, script pushes the envelope a little too far for me.
Also, I want it to work on the web, so I picked out of common system fonts. This very quickly led down the path to Courier. It’s definitely not a sans serif, but it’s not your typical easy-to-read serif face, either.
Courier’s monospaced, even-stroke-weight design makes it the perfect face for my formal and aesthetic requirements. At least for the headers–it gets a bit tiring to read in body text. In my search for a nice mate, I landed on Verdana, this stable typeface was designed for my favorite company—Microsoft—by one of my favorite contemporary type designers—Matthew Carter.
Next came the colors. The local brands I looked at use almost every available color. Red, purple, teal, green, pink, yellow. Not too much room for me to poke holes.
One thing I noticed, though, is that the only colors used in large amounts of space (outside the logo, for example) were light blue, red, green, and purple.
Combining that knowledge with the fact that I wanted to explore brutalism, I landed on large swaths of yellow, with navy blue and white to complement.
This could have been enough, but it felt… boring. The most common critique I get on my work is that it’s boring–as a result, I’ve been trying new, more artistic approaches lately. Since the entire event is meant to be hyper-local, I thought an illustration of Downtown Charlottesville could add that extra little bit to make the brand more visually appealing.
With that in mind—do I make a skyline? A map? A particular building? About half a year ago, I did some freelance work that required me to illustrate a map—remembering how much fun that was, I made another one.
Now to combine it all—the map works well as an alleviation from the yellow.
The navy blue looks good as type on white.
Which is why I didn’t use that. It looked too good. Too normal. I’m not a fan of setting type in “reverse” (where the background is darker than the type) but since I was going full brutalist, it seemed like the best choice.
Combine these, with a little refinement, and viola:
The poster stands out well on a bulletin board. The bright yellow and empty space creates a tension that deviates from the designs you see in Charlottesville.
The website is responsive and fairly simple. I coded it in html/css rather than using a site-builder like WordPress or Squarespace. There’s nothing wrong with those services, I just needed the site to look precisely how I wanted it. The navigation lives on the left on desktop, then swaps to the bottom on mobile, meaning that people don’t have to reach their thumbs all the way to the top of their phone screens to change pages.
Facebook & email graphics are fairly straightforward. If the venue is on the map, then the map zooms to that place and a small text box labels it.
The popup banner does a good job of place-making. The bright visual is designed to stand out in any room, even going so far as to drown out the environmental graphic design already in-place. Ideally, attendees feel like they’re at the Charlottesville Design Festival, regardless of the event venue.
The program follows the brutalist inclination to be slightly difficult to look at. Rather than a booklet, the program folds like a map, then unfolds to be a poster. The events and information are printed on one side and the design week poster is on the other. This is the only place where I took a break from the yellow background and text set in reverse in favor or more readable experience. I wanted to distinguish clearly the two sides of the sheet.
That’s about it! In case you were wondering, the week went surprisingly well. Here are some cool figures and facts from the week:
• We had close to 200 attendees over the week
• One of the attendees landed an internship as a result of the Portfolio Review event
• Another attendee had driven an hour and a half to come to the event (I’m not sure from where others came)
Let me know if you have any thoughts or questions in the comments section below!
Originally published here.