Well for one it will save you a lot of headaches down the road as far as unanswered questions and assumptions your client will make as far as your work. The truth is that once you hand your work over to someone else, you really have no control over what they will do to it. Imagine how shocked you’ll be when the client takes the cool logo that you designed and places it over a photo so that it no longer reads.

Another reason is that, unless you have some sort of retainer/maintenance agreement, you really don’t want your client coming back to you over and over with questions that you didn’t answer, specially when you’re busy servicing new clients.

Yet another reason is that you want to make life easier for people who will be working with your designs. They’ll love you and remember you for it. Developers in particular have a lot of things to worry about without having to think about how much space they should leave around the logo you created or how much padding you wanted around the navigation elements in your design. They will just make their best guess and move on. Then it will be more work for you during the visual QA phase when you have to communicate to the dev team. “Hey, can you move this 20 pixels this way” or “Hey, that text doesn’t seem to be the right color…”. As much as you, the designer, think that developers will carefully open your PSD file and sample the right data, there are no guarantees. Some might even use that JPG you provided.

In my experience there are two types of style guides that I hand over to clients depending on the deliverables. For logo and identity work I present them with an identity style guide, for web or other UI related work I present them with a web style guide. What are the differences between the two?

Identity Style Guide

An identity styleguide will outline everything that a person needs in order to implement your identity successfully. What are the right proportions for the logo? How much space should I leave around it? Can I place this logo reversed out over a color field? What are the primary and secondary fonts? Colors? Etc. Below you can see a very condensed, one-page style guide I delivered to a client.

Another element of an identity style guide is the dos and donts section which should clearly show (with visual examples) what you should and shouldn’t do with the logo/identity.

As you can see, these can be very simple. The example above was delivered to the Savings.com team in the form of JPGs which they uploaded to an online document with some supporting text. Very minimal formatting but the ideas are communicated clearly.

UI Style Guide

A web or UI style guide usually deals more with the measurements and typography desicions you made on your interface design. Below you can see a style guide I created for SocialStay. In this example I selected the most unique templates from the design an put them side by side. I stretched the space underneath the two page comps and added a grid for text elements and another for the interactive elements (buttons, dropdowns, etc.).

Here’s a closeup of one of the templates. Here you can see that I’ve highlighted the exact pixel measurements so that there’s no question about what the distance is from one element to another. I also like to show the grid I used so that’s it’s clear what the underlying structure of the site is. For more on grids please check out this site.

I like showing the different states of the interactive elements. This means that I’ll set up a table and have each element on one row with 3 columns. The first column is for the inactive state, so basically, what does this element look like before you’ve interacted with it. The second column is for the hover state, or, what does this element look like when the mouse pointer is hovering on top of it. The third column is for the active state, what does this element look like after you’ve clicked on it. Keep in mind that tablets and phones do not have a hover state per se, in this case it’s more of a “depressed” state.

Another useful thing is to break down the text in your site semantically. This means that I’m not only following a logical hierarchy based on actual html elements that will be used to code the page but I’m also using the right HTML elements for the right type of data. So for example, the largest title on the page will be a “Header Type 1″ or H1, the next level down will be a “Header Type2″ or H2 and so on. Body copy is designated as such so the developers will know what CSS properties to assign to the “Paragraphs”, or P tags. I’ve been personally complemented for this by developers because it saves them a lot of time. They can go ahead and start writing the stylesheet without having to figure out what hierarchy you had in mind or what HTML elements correspond to what visual elements on your page comp.

One other thing I highlighted for this particular style guide is the CSS properties for some of the modules. Below you can see an example of this. This was one of the requirements that came from the dev team for this particular project since they didn’t want to use any images to render these elements.

I delivered this style guide as a single JPG, I felt it would be easier that way instead of a document with multiple pages. However, the formatting is flexible and really depends on what you’re most comfortable with. I’ve seen web style guides coded directly in HTML in some cases, or delivered as multi-page PDFs. There is no one way to do this but make sure you take the time. It will make everyone on your team happier and it’ll make you look good.

Last year, I had the opportunity to work on a project called FOCUS (or Families OverComing Under Stress). The client was a department of UCLA here in Los Angeles that helps military families cope with the stress of having loved ones deployed overseas. This department has a series of exercises in the form of workbooks that they use to help these families. Our team was tasked with creating an interactive experience in the form of a game based on the analog experiences in these workbooks. Below is an example of one of these exercises, the “Feeling Thermometer”, used to visualize the families’ mood.

Something that became immediately apparent was the need to approach each of these experiences as a sequence of actions instead of a series of static frames. Back when I was in school, our main emphasis was broadcast design so I learned how to put together simple storyboards. This is something I found really useful for this particular project since the problem we needed to figure out was how to walk users through an experience where they could learn the same lessons they were learning in the exercises that UCLA Focus was facilitating. We were trying to tell a story. Note that the real world experience was also a sequence of events as opposed to individual moments.

As I mentioned before, I’m going to focus on the “Feeling Thermometer” which was one of the exercises that we were asked to work with. As you can see in the diagram below, we grouped the activities in a house inside of which there were different rooms. Inside each room there was an individual exercise, the “Feeling Thermometer” itself we placed in the basement in the form of a boiler that controlled the temperature of the entire house. A convenient metaphor for the families’ overall mood which affects the everyday lives and interactions of the family members.

Creating wireframes is not something I do regularly and I don’t have any specialized software tools at my disposal. As a designer, I found Illustrator to be the best tool to work with since it’s very maleable once you get familiar with it. By this I mean that it is easy to create multiple versions of something by just clicking and dragging. It was perfect for laying out a series of frames, side by side and having the ability to edit them simultaneously.

Here you can see a series of frames for the interactive version of the “Feeling Thermometer”. Each frame highlights the events that are happening within the experience at that point in time, to the right of the frame is a short description about these events.

The goal was to teach kids and their parents to associate colors with feelings so that those around them could clearly understand how they felt. So for example a child might say “I’m in the red” and it would be clear how upset the child was based on the six color levels on the thermometer.

The next step of the process was to teach the kids and their parents methods to cope with these emotional states. This was done by having them perform activities such as taking deep breaths, going for a walk, etc. Our team assigned these activities to pressure valves around the thermometer that the kids could click on, read about and learn how to release the built up “pressure”. Note that the frames above take into account all the wayfinding (popups, overlays) that the users needed to understand what was going on at any given moment during the experience.

Once the flow was defined and approved by the client we had to create a reference for the 3D team to follow. Below you can see a more static frame that we created to give them direction so that they could get a sense of what elements were needed as well as the different states/colors of the thermometer itself.

Here’s what the final artwork looks like, this was created by a team of 3D artists that we collaborated with. My main role in this project was as UX Lead, not something I usually do, however I have to say that I really enjoyed it. I also directed the team that designed the interface elements that overlay on top of the “world”. In the image below you can see some of these elements that make up the “HUD” (heads-up display) – overlays, popups, icons, indicators and buttons that are meant to serve as guides and tools for the users as they navigate the experience.

You can check out the final version at focusproject.org

The website also looks really good, you can check it out here.