SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Building a Usable Style Guide for New Design Projects

September 22, 2014 by Jake Rocheleau

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.

branding typography project styles guidelines

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.

google logo created with lego blocks

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.

yahoo style guide book print design

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

Filed Under: Design Tagged With: graphic design, tips, web design

Recent Posts

  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022
  • How to Get Your First Web Design Client

Archives

  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022