How to Create Guidelines and Standards for Websites or Applications

While some methods may vary one of the most important starting points for any project is a set of guidelines.

Creating guidelines and standards for every project (even if it isn’t originally in scope) can increase your workflow and will also keep your design consistent and hopefully developed in the right way.

SEE ALSO: 9 Photoshop Alternatives For Big and Small Tasks

This really is a designer’s responsibility. You can’t blame a developer for not being the pixel freak you are. Guide them.

Start by creating three main types of documents.

  1. Style guide
  2. Components document
  3. Specs around pages

This process is not recommended for a designer who is also doing the front-end development. If that’s the case, add another step where you create a separate platform with a coded style guide and coded components. You might even want to start coding at Step 2 and leave out steps.

Are you looking for responsive website templates and online website builder?

Get Startup Design Framework now!

Use coupon code START50 for 50% off!

Two well-known examples of this process are Bootstrap and Purecss. Yes, these are complete front-end frameworks and are probably way bigger than the project you’re working on, but you get the point right?

1. Style Guide

A style guide defines the style of each element within a design project. It’s basically the general style guide for developers. Color, typography, tables, list items, icon use, dividers and more are all defined in detail in this document. Drag and drop elements once you create them and set the rules for each element.

Styleguides

* Tip: Name the elements. Even though developers might use different classes in the end, it can be useful when referring to these elements. Let’s say you have different theme colors for a website with a gradient navigation bar. It way easier to refer to #PrimaryThemeColor – #SecondaryThemeColor instead of naming the different colors.

2. Components Document

In many ways this document is identical to the style guide but on a different level. Components are elements such as login boxes, sliders, carousels, headers, footers, etc.

This is different from general styleguide in that this document helps you maintain consistency throughout the design process. It’s easier for developers to recognize repetitive elements, which will speed up the process.

Components document

As you can see above, when working on responsive projects it is beneficial to include the “behavior” of each component. Again, the average developer will not focus on these types of things (and shouldn’t want to).

If you don’t highlight the fact that CTA text is center-aligned on mobile, they won’t notice. Trust me.

Once you think you’re done, drag and drop your components to make sure to set rules from the start to prevent the endless editing of padding, colors and font sizing for final mock-ups.

* Tip: Export components to separate .psb files. The big advantage is that when your client decides to change things, you only have to update that specific .psb file. It’s a real timesaver.

3. Spec Document

The last step is to specify pages. Since we’ve already set the style of elements and components, the only thing that’s left is to refer to these components and define the margins (naming and spacing).

We used the following method for the adidas webshop and for a platform that big, it’s really helpful to break it up like this:

  1. Export components that are being used on multiple pages, separately.
  2. Export pages.

For both types of exports we use 3 Layer Compositions, which are easy to export:

  • Popup_Normal.jpg
  • Popup_Naming.jpg
  • Popup_Spacing.jpg

Spec documents

I know that all this looks like a pain, but it is crucial as an interaction designer.

Fortunately, there are some great plugins out there that’ll save you some time. One of them is specKing. This tool can specify everything aforementioned but I prefer to use it for spacing and labels.

specKing

Any tips or improvements? We would love to hear some feedback regarding this way of creating specs for a project. Share your ideas in the comments.

Eelco Guntlisbergen

I am a Web & App designer based in the Netherlands. Next to being a freelancer I also work on a full-time basis for Adidas Group. I love clean designs that make sense and are easy to use. More about me can be found on my Website, Twitter, Google+ or Dribbble profile.

Newsletter

10 Comments
  1. Yep May 14, 1:35 pm

    I’m doing frontend development and i love to get guidelines like this. Combination with less or sass with this you can increase the speed a lot.

    Question: At what point should the designer make this guidelines? Is this the starting point for a design or is this more for tranfering the design to the front-end developer?

    Reply
    0
    • Eelco Guntlisbergen
      Eelco Guntlisbergen May 14, 2:53 pm

      I think that’s personal. I usually create these document once I start on a project and add/edit elements throughout the process. Especially if you’re doing a re-design or a first design I think it’s just as important for a designer as well. As mentioned in the article it really helps me to be more consistent.

      The naming & spacing elements is something I save for last simply because this doesn’t optimize my workflow. The goal of these files is to make sure that the developer implements the pages exactly how you want.

      Reply
      +6
  2. Bas May 14, 9:05 pm

    Thanks a lot!

    Can you upload .psd’s for examples? So we can use it as example.

    Reply
    +7
  3. Min May 15, 12:14 am

    Thanks for the great article.
    It will be very helpful if you can attach examples!

    Reply
    0
  4. velte63 May 15, 12:02 pm

    it’s will be great to have more exemple of guideline. Some people have a link about that.

    Reply
    +2
  5. Alecs May 16, 1:13 pm

    Hidden due to low comment rating. Click here to see.

    Reply
    -13
    • Eelco Guntlisbergen
      Eelco Guntlisbergen May 16, 3:22 pm

      Thanks for all the comments guys haha. Unfortunately I don’t feel like there is a generic template for doing this. It really depends on the project and the developers needs.

      The only thing I can do for now is provide you with useful plugins like specKing.

      * For spacing & Naming I recommend to increase your working file with 300px in width & height so you have space for naming & labels.

      It’s just tips guys sorry. It’s impossible to provide you a template for this. Unless you mean a general styleguide document. I’ll think about that.

      Oh btw @Alecs a different tone of voice might help you to get what you want.. just saying..

      Reply
      +4
  6. Alecs May 17, 11:12 am

    Didn’t mean to come off as rude :) The internet can make you seem mean. A general styleguide document would be awesome. It would be awesomer (that’s a great word) if some standards about how to structure a document like this would arise and front end devs would know what to expect and us designers would know what to deliver. Cheers. Best of luck…

    Reply
    +3
  7. Renee May 20, 2:11 pm

    I never thought to do this until a fellow designer showed me his style guide last week – such a good idea, helpful not only for designers but front end devs too! Thanks for the tips.

    p.s. people must be getting lazy these days demanding psd’s – hey, do it yourself! haha.

    Reply
    0
  8. Russel May 26, 8:44 am

    Before starting any website we need to be alert about the users who actually are going to use the website. Most of the webdesign companies giving more priority to user’s point of view before finalize the website design.

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters