Building a Usable Style Guide for New Design Projects

When you think of creativity it can be expressed in many ways. Ideally a creative idea should exist in some capacity before the creator visits reality town and starts break dancing into his concept in the middle of Main Street. Ideas seem to come sporadically and while they are often created out of nothing, you don’t always have an infinite palette of nothingness to work from.

I’d like to cover the idea of using a style guide to help direct the current of your workflow. Each new idea on each project deserves some immediate recognition. But good ideas should chain off each other to create a semblance of connectivity. This is where a solid design guide, when used properly, can help you direct new ideas toward one overarching idea.

Why Use a Guide?

Writing is one of the more rigorous creative mediums and this provides a great analogy for designing a style guide. When writing an article or a story you want to place some limitations on the content, characters, or the imaginary world. In any great piece of writing there is a recognizable theme, motif, structure, or general energy which is constant throughout the work.

Now consider other pieces of art like a painting or sculpture. Each work is generally focused on not just a theme or idea, but a style of expressing that idea. Form matches function and they follow each other to a crescendo until the artwork is completed. This same idea can be applied to websites, mobile apps, computer programs, really any type of UI design.

The purpose of a style guide is to lay down your limitations & principal concepts for the project. This may include visual ideas like colors, shapes, patterns, or inspiration drawn from real-life examples. But the guide could also include more abstract concepts like expressions or emotions you wish to elicit in the user. If it’s your project then you can organize notes however you like. If the project is for a client or studio then you should cater to their vision.

Business Relationships for Freelance Designers

A style guide is helpful to everyone involved with a project. It doesn’t provide a roadmap from start to finish, but it sets up the conditions to help you get there. The guide is more like your safety rules or driving laws to ensure the journey is smooth with very few issues along the way.

Branding with a Purpose

A company’s brand is not always the same on all areas of the website. A logo might be fitted to an exact size in the header but squeezed down smaller in the footer. Additionally some logos include icons or mascots related to the branding. These graphics should be used sparingly but according to general guidelines.

For larger companies this guide isn’t just for in-house designers. People in the media such as journalists or bloggers might want to download a press kit with your company’s logos and other resources. It would help to include some branding rules related to sizing and color choice.

Also try to give examples or reasons for why things are the way they are. People like order but it should be logical and have a purpose. For example, can the logo appear on any background color? Or are there certain colors which tend to clash and should be avoided? Don’t go so far into detail where it reads like an IKEA manual – but offer some good examples and reasoning for each guideline.

Structuring a Website

It usually helps to understand the primary concept for a website before creating the style guide. This way you can flesh out which type of pages need to be designed, how content fits into these pages and what elements are still missing from the overall design.

A very detailed style guide should offer the most “common” items to be reused in a design. For example list a few different buttons and when they should be used. What are the common gradients or textures? What color is the button text? What dimensions should be used for width/height?

Initial brainstorming: Sketching And Wireframing Ideas

If you start with a wireframe it’ll help you conceptualize more specific ideas. Remember that in a team setting the style guide is useful to anyone who eventually needs to edit the website or design a new page in the future. It gives creative limitations for how the layout should work and what type of elements should be used.

Also don’t forget that branding and icons play a big role, too. Organize the guide into sections if there’s a lot of content. The design process should be guided but not too restrictive.

Answer the Tough Questions

Think of this design guide as a template for all of your essential defaults. Too often do I find myself asking similar questions over and over. Questions related to the paragraph size, heading font, sidebar width, footer link colors… all of these items should remain mostly consistent throughout a website.

An organized set of defaults will save time and stress during a project. The hardest part is often just getting something down to start with. As you test ideas take note of what seems to work best. A balanced page uses a lot of similar spacing between graphics and fonts. Keep this in mind as you create a style guide.

Of course I should mention that style guides can be used for any type of project. I’m primarily focusing on websites in this post, but any creative project would most likely benefit from a few guided limitations.

Dip your mind into the pool of infinite creativity and pull out your idea; you’ll soon realize that limitations will help you stay the course without straying too far into a separate idea. Granted sometimes it is worth testing a new idea to see if it better suits the project. But once you’re focused on a terrific concept make sure you retain that focus until the project’s completion.

Depending on the size of a project you may not even bother creating a style guide. For small personal projects you might prefer to just create-as-you-go and make the creative process an exploration. Other times you’ll have a solid vision for the project and it’s helpful to nail down that vision into concrete terms. A style guide can be formatted any way you choose – as long as the information is straightforward and helps you stay on track to efficiently complete the project.

If you liked this post you may also like:

Simple Ways To Make More Creative Designs