The 25 Minute Style Guide

Are you building a “lean” startup on the quick and cheap or just generally not feeling like you have time to spend on branding and look-and-feel?

Making your product or venture look good may be a lot easier than you think. And doing a little work now will avoid wasted time later.

As a high-functioning non-designer, the top four things I’ve learned from my collaborators about design are:

1. Consistency
2. Consistency
3. Consistency
4. Anchoring the design in what’s substantial (aka begin with the end in mind)

Consistency sends a mostly subconscious message to your audience that you know what you’re doing. Fortunately it’s easy to achieve.

A ‘style guide’ defines the visual standards you’ll use with your company and/or product, getting you that all-important consistency.

Every brand should have one, but many don’t. In the same way that a software developer might agree it’s a good idea to put plenty of comments in their code but in practice don’t feel like doing it, many designers won’t get around to putting together a style guide.

We’ll start with a 5 minute exercise in brand strategy, which will give you a meaningful but quick take on how to anchor your style guide in a set of relevant brand attributes.

Example Company

I wanted a real subject so I built a “fan brand” for a product called the Grovert. The company, BrightGreen, makes vertical planters for the kind of thing you see to the right.

Brand Strategy in 5 Minutes

The example company, Bright Green, has a program, but to make the exercise and this post a little more interesting I decided to reinterpret it from scratch. Even if you’re thinking ‘I don’t need fancy branding right now’ or ‘Just show me how to make the style guide, San Francisco man!’, I highly recommend spending 5 minutes on this step.

It will save you loads of time and problems down the road when you’re learning how to describe yourself to customers and explaining that to collaborators and vendors. Among other things, this will save you from overwrought discussions about ‘why this color?’, etc.

If you go to a high dollar ad agency to ‘find yourself’, brand-wise, one of the things you’ll do is create a brand ‘mood board’, something like what you see below:

(LINK TO FULL MOOD BOARD ONLINE)

The good news is that board was produced in 5 minutes using this tool: BrandLattice.com. The (free) Brand Lattice tool will take you through the brand/mood board process in around 5 minutes. If it takes more than 10 minutes, you’ve definitely spending too much time- just punch through it. You can always revise it later.

OUTPUT

1. Brand mood board (save the URL on Brand Lattice for later use)

Using the Style Guide Template (2 min.)

A stitch here in time will save nine: Just defining your colors and typefaces in advance will save you time tinkering with choices and fixing stuff that doesn’t look right later. Second, with the tools below you don’t need to be Don Draper to come up with something that looks reasonably good (or better).

For your style-guiding convenience, I’ve created a template on Google Doc’s where you can fill in the blanks. Just link to it and make a copy for your project:

LINK TO STYLE GUIDE TEMPLATE

Here’s another example for this site and the program I use for COWAN+:

If you don’t want to use the Google Doc, you can create something similar in just about any visual editing tool (MS PowerPoint, Word, Keynote…whatever). Don’t worry about making it pretty. Just make it functional.

Positioning & Brand Descriptions (2 min.)

Go ahead and change the intro slides (or delete them) if you like, and we’ll start on what’s page 3 in the template:

This step’s pretty easy: just copy the positioning statement and Brand Descriptors you created on step 1 in your brand/mood board!

Output

1. Positioning and brand descriptors recorded in style guide (save to your version of the style guide template on Google Doc’s, or whatever you’re using, for later use)

Brand Colors (6 min.)

Next we’ll define colors for the brand. You can spend a lot of time on this, working through colors’ associations to your brand values and how they’ll work in your different executions.

We’re not going to do that here.

We’re going to use a simple tool that lets you derive secondary colors from a primary color. It’s called Paletton and it looks like this:

Select a primary color on the wheel. Just look at your mood/brand board (step 1), take a deep breath, and pick a color. It’ll be fine. The color won’t matter as much as your consistent use of a coherent color scheme.

If you already have a primary color, you can input that in the bottom left, where it says ‘RGB’. You’ll need to know the hex value for your color, or you can approximate it yourself on the wheel.

To derive the secondary colors, I picked the third option directly above the color wheel- triad with complimentary colors (they’re the compass-looking things above the wheel). If you click on the ‘Color tables…’ option on the bottom right you’ll see this screen:

Grab the primary dispositions of the colors (the large swathes in the center) and put them in your style guide on page 4:

Done.

Output

1. Color scheme for style guide (save to your version of the style guide template on Google Doc’s, or whatever you’re using, for later use)

Brand Typefaces (6 min.)

To an even greater extent than color, typeface is something where professional designers bring a lot of perspective (whether it’s actually more rarefied than color is debatable, like everything else in design).

There’s also a joke among designers: ‘The process differs but the answer is always Helvetica.’ (Helvetica is a typeface.)

The site Typography.com has an interesting short piece on combining typefaces:

Unfortunately, most of the online resources are selling proprietary typefaces (directly or via referral) so there aren’t a lot of good resources that show you how to use the standard, license-free (or pre-licensed) typefaces you’ll find on a service like Shopify.

For Bright Green, I think the ‘wit’ theme fits best. I’m interested in a quick but reliable result, so I’m going to go with the tried-and-true Helvetica and what I take away from the notes above is ‘Try pairing Helvetica with a serifed font for ancillary page elements if it’s easy and it looks reasonable.’

Serifed fonts have little projections at the end of the letters’ lines (like you flicked your pen while you were writing them) and sans-serifed fonts do not. Skipping ahead, you can see one of the Shopify typeface menus organized along those lines:

I’m going to go with Garamond as a secondary serifed typeface because Shopify offers it and really no other reason (vs. the other options). I may or may not actually use it on the site- depends if my quick initial reaction is positive or negative. And I’ll definitely err on the side of just staying with Helvetica.

I’ve played golf twice and what I learned was that if I don’t try to hit the ball too hard, it won’t go that far astray (inconveniencing my friends). Here’s another good guideline for the designer: don’t try anything too radical and you’ll probably be OK.

Along those lines, we’re going with Helvetica and Garamond as a secondary typeface which I’ll record on the corresponding page of the Bright Green style guide:

Output

1. Typeface selection for style guide (save to your version of the style guide template on Google Doc’s, or whatever you’re using, for later use)

Logo/Mark (6 min.)

Bright Green already has a logo, but it wouldn’t be consistent with the rest of this program, so I found a royalty-free image on the Wikimedia Commons and paired it with the company name in the Helvetica typeface in call caps:

The reason for the use of all cap’s is that by doing that (or the reverse- all lower), you’re distinguishing it as part of a brand mark vs. just regular text. I don’t think I’ll win any awards (but totally call me if you have one). An outstanding execution isn’t our goal here- we want to get online and once we see what’s working we can revise to our heart’s delight.

In this section we defined how we want the brand to look. Now we’ll move on to its primary application- a working commerce site on Shopify. In the next step, we’ll sketch a quick narrative about our user and what we’re trying to do for them on the site to guide our implementation and later validation.

Section Output

1. Positioning and brand descriptors recorded in style guide (save to your version of the style guide template on Google Doc’s, or whatever you’re using, for later use)
2. Color scheme
3. Typeface selection
4. Logotype creation

Applications

That’s the meat of this and hopefully it took you around 25 minutes.

As a next step, the idea is you use your new style guide to direct your executions, or ‘applications’ of the style guide. For example, I created a prototype commerce site for Bright Green using the style guide:

Examples

Below are a few examples I thought were notable.

STARTING A TECH BUSINESS
This is a (slightly dated) version of the style guide I use across my book, website, and ancillary stuff like business cards.

[slideshare id=13581255&doc=stbstyleguidesample-120709023647-phpapp02]

LEONID SYSTEMS
Leonid (where I work) creates enterprise software for communications providers (phone companies, cable companies, SaaS providers). You’ll notice it has extensions for our various products, each of which have their own sub-persona under the Leonid umbrella.

[slideshare id=22559017&doc=leonidguidelines052112-130606130531-phpapp02]

WEBEX
WebEx is a multimedia conferencing/screen sharing service now owned by Cisco. This is a good example of a thorough, robust, established style guide. You’ll notice all the elements from the section above as well as brand extensions for their various sub-products.

[scribd id=202003 key=ezy1m81qzbqy mode=slideshow]

VIRGINIA TECH
Though not in exactly the same order, you’ll find all the elements above in Virginia Tech’s guide. The guide is highly developed around print production and prescriptive in that area. You can link to the guide here.

If you’d like more examples, maybe one in your space, for example, try Google’ing around some. Many institutions and large companies now publish their guides publicly online.