Dec 05 2012

How to Make the Perfect Web Design Style Guide

featureimage

With the growing size and level of detail in web projects today, style guides are becoming increasingly important to have for both small and large team environments. In many cases, development teams (often remote) rely on style guides to understand structure, hierarchy, and complex interface interactions. In our company, when multiple designers collaborate on a single project, they depend on style guides to keep design elements and interactions consistent throughout the large multi-page website or web app. In either situation, a style guide should act as the trusty anchor that keeps all creative design intentions correctly interpreted and translated. So be aware of the mindset others will have when using your style guide and tailor the experience into an enjoyable one. Oh and by the way, if you like the tips below, be sure to grab the PSD used in this post for your own reference! 

Developers who look at your style guide will often be thinking:

  • How can I take these elements and keep my code as dry as possible?
  • Oh dear, don’t make me play the “What’s different about this visual element?” game…
  • Are there any minor details (such as hover interactions, form inputs, etc…) that need to be included?

Fellow designers opening your style guide will want to know:

  • What are the visual elements that I should be strictly adhering to?
  • Where do I have room to expand on the existing visual style and structure?
  • What design elements and interactions should I pay attention to so that I can continue a cohesive experience?

While I’ll admit there isn’t a catch-all style guide solution for all web projects, there are at least a couple key tips to keep in mind when creating the perfect style guide for your next project.

14 Golden Rules for Creating Style Guides


1. Clear presence of structure.
Is your layout divisible into three columns? Maybe all of the elements are fluid in width but a fixed structure in height? These are structural elements that should be clearly presented when new onlookers see your style guide, so make sure you have the usual suspects (widths, heights, columns, sectioned elements) easy to understand.


2. Can’t-miss irregularities.
While we may all like to believe that we create every pixel in our PSDs perfectly, little irregularities do crop up from time to time. Because of this, it may sometimes be difficult for the casual onlooker to determine what is an intentional irregularity versus an unintentional one. If that awesome hero image is supposed to stick outside of the div, make a point of calling it out through a Photoshop note or text note (see tip #3). Otherwise, prepare to have it dismissed as a mistake and ultimately ignored!


3. Notes & text notes.
There are two great ways of calling attention to important highlights in your PSD: 1) Photoshop notes, and 2) manual text notes grouped into a nicely labeled layer group. Photoshop notes exist purely for the need to add more context to areas in your PSD and are commonly understood by Photoshop veterans as the go-to tool for this purpose. On the other hand, another trick your fellow collaborators will love is manually writing out notes, placing them on top of their related content, and grouping them all into one hidable folder. Why is this so useful and awesome? Because as of CS6, sifting through Photoshop notes one-by-one is still a bit of a chore; therefore, having all of your notes open and skimmable saves tons of time and effort!


4. Fonts, weights, sizes, line height, and color hexes, oh my!
Nothing is more tedious and frustrating than trying to uncover what font/weight/size/line height/color was used for the typographic elements of your PSD… especially if you don’t even have that font installed on your desktop! So here’s a special secret that will make you the prize in any fellow collaborator’s eyes: Denote all of these elements clearly with a Photoshop note or text note (tip#3) like this…

Open Sans Reg 14/24 #444

Which basically means…
Font name (Open Sans)
Font weight (Reg)
Font size / line height (14px/24px)
Color hex (#444)

Note: While you could be extra savvy and actually state the number weight your font should be (i.e., 200, 400, 600, 800), you might not be the right person to determine whether that weight is relevant to how the rest of your project is coded or designed. Therefore, it’s best to just keep the weight as a simple reference of light, regular, bold, extra bold, black, etc…


5. Same styles with a twist.
Sometimes you’ll find yourself needing to break out of the structure you’ve created in your style guide. Perhaps all your subheaders are 24 em, bold, and a hex color of #ff1; in a couple cases though, you might need to emphasize this subheader in a different way such as by using a different hex color of #f00. In this case, it can be difficult for a casual observer to notice that the color is all that you’ve changed. Save them the trouble of playing the “what’s different with this picture” game by clarifying for them what exactly is different, either in a note (tip #3) or within the typography’s placeholder content!


6. Be descriptive, not semantic with header hierarchy and typography pairing.
More often than not, style guides include a suggested header hierarchy (e.g., This is the H1, This is the H2, Here’s an H3, Use this for H5s, etc…). But whether the person creating the style guide understands header semantics or not, they simply have no way of truly knowing if those suggested styles will be appropriate when implemented in development. So instead, consider being descriptive with your headers and typographic pairings. Try using words like Primary header, Secondary header, or Headers used for sidebar widgets. If you have a certain header and body style for block quotes or testimonials, state that it’s only for those cases. Descriptive placeholders can go a long way in helping others understand what kind of context elements in your layout need to be used in.

7. All that text wrap. In a perfect world, headlines are only 4 words long and don’t drag onto a second line. We, however, live in the world of multi-screen devices and long titles. On a typical handheld device, your headers and subheaders will wrap to a second, or even third, line. Even if they don’t, your client may later choose to be a little more verbose with their headlines. In any of these cases, it’s absolutely essential to indicate line heights for any potential typography that will wrap to more than one line.


8. Image treatments and examples.
If you’re giving any sort of general treatment to your images, such as a subtle border or opacity interaction upon hover, be sure to call this out in your design. Note when this treatment occurs and give multiple examples that show the variety and extent of the visual treatment.


9. The absolute-must margins and paddings.
Depending on how fluid or fixed your layout is, margins and padding can often end up being guesstimated, approximated, or on the flip side, immovable and rigid in size. Given the wily nature of web browsers and operating systems, it’s important to do everything in your power to minimize the unruliness of how margins and padding end up with the end user. If you’ve crafted the ideal white space that makes or breaks the breathability of your site, call it out. Use a shape layer that collaborators can instantly select so they can find out exactly how much breathability is needed for the design.


10. Cursors and gesture hints.
Digital representations of cursors and gestures go a long way in conveying exactly what digital elements need to come to life upon certain interaction cues. If you have some complex hover, click or swipe interactions, use a representative icon that mimics what something would look like in that second of interaction.


11. Labeled layer groups.
This one’s an obvious one but absolutely important to mention anyway: label your layers and groups. It’s one of many things that will make your collaborators navigate through your PSD with much ease.


12. Normal, hover, visited links, buttons, and navigations.
Text links, buttons, and navigational states will always be regular faces in style guides. Remember, have instances of every type (normal, hover, visited, active) of state each one of these link elements would be and help out your fellow collaborator by stacking the various states as close to each other as possible. Oh and labeling these states isn’t absolutely necessary, but it doesn’t hurt if you have the time to spare!


13. Have good form with form fields.
If your project involves form fields then be sure to understand all of the complexities that need to be thoroughly mapped out and designed. Any type of form field will typically require you to consider any number of the following:

  • normal input field state
  • focused input field state
  • position of labels
  • alignment of labels
  • placeholder text
  • active text
  • entered text
  • submit button alignments
  • (live) error validation
  • submission load graphics (if applicable)


14. Pagination, unique visual elements, and more.
Does your project contain unique traits to it that require specialized styling for certain elements? Be sure to include answer to these if so. Frequent unique elements you’ll come across include pagination, blog tags and category filters, sidebar elements, search fields, and dropdowns.

Don’t forget to download the PSD used in this post for your own reference when creating future style guides! 

About the Author:

Jessica Moon is both the blog editor and a UX/UI designer at digital-telepathy, a user experience design studio that specializes in creating products like SlideDeck, Impress, and Flare. She has a passion for illustration and design, and enjoys blogging and tweeting about what she’s learned. You can also find her on Google+.

Leave a Response

17 Responses

  1. Dec 06 2012
    laban.jhonatan

    A strong solution for the Designer vs. Developer “legendary love story”.

    Of course, animated CSS3 effects guide will be more challenging & “fun”. It takes a dedicated time allocation just to prepare a decent guide alone (even when followed via skype chat), and tend to be a hidden scoop creep on both parties.

    Thanks for pulling this one up, guys!

  2. Dec 06 2012
    Stacey

    Great Post, very useful information. Especially for designers that don’t do their own coding.

  3. Dec 06 2012
    Mark Pecota

    Really enjoyed this article and how it showed the importance of attention to detail in web design projects.

  4. Dec 11 2012
    web design company beijing

    In this web era web designing industry is at boom and the competition is also at the crux, so it is the practice of everyone to give best out of the best and hope all your guidelines will definitively help the developers to design a good website!!!

  5. Dec 15 2012
    Internet Solutions Colombia

    Beautiful post, this rules, could bring our web design to the next level

  6. Dec 19 2012
    Virginia Web Designer

    I’ve been a professional web designer for over 15 years now and cannot stress the importance of notation in every aspect of a project. As websites become larger (generally), more complex, and with more and more people involved (of all skill levels, talents, and technical ability), keeping records and notes of the design elements and styles used throughout a site is more important than ever. Nice post.

  7. Jan 08 2013
    Chris

    Have designers also noticed the growing trend of minimalist designs coming through? I personally think that`s probably due to responsive designs.

    Great post, I`t will help me in a guide i`m writing.

  8. Jan 18 2013
    Ryan Graham

    Hey there Jessica, I’m a developer, trying to become a decent designer. I enjoyed this article, but have a style related question.
    In your subheaders (the numbered sections), you continue the text for the body of the section on the same line. This felt off with #6. It was only 1 word included at the end of the line, but I missed it, and then when I found it, it felt out of place. Why did you make this design decision?

    • Jan 19 2013
      Ryan Graham

      http://imgur.com/JQyYZXo

      It was coincidence that this lines’ subtitle went on for so long, but this seemed out of place to me.

  9. Feb 09 2013
    Paul D. Mitchell

    Fantastic outline for what goes into great website design. And yes it is great for us designers that a lot of folks out there don’t know how to design great sites. Even when you expose the “mystery” I still don’t think they can do it with out professional help. Hope they can try…