How can I write a UI guideline for website? How many things should it include?Have anyone got example?

  • Please be more specific: What sort of guideline do you want to write, for whom? There are a lot of examples on the web - why not use those as a starting point?
    – Peter
    Aug 22, 2013 at 6:57
  • Whilst not for a website, I always found the android design guidelines to be a very easy-to-digest piece of documentation. developer.android.com/design/index.html Might be a good example to get to started.
    – Gusdor
    Aug 22, 2013 at 7:13

1 Answer 1


In my opinion I think the best way would be to 'CODE' up the design guide into real examples of the style.

Essentially, code up the html, css, and related javascript and display example forms, buttons, paragraphs, sections, comments etc.

This has the benefit of being a live example of how it is done, for developers, and gives you the designer a sense of implementation difficulties and feasibility.

You can try wire frames, mockups, or PDF documents with images but they have the downside of NOT being in the medium that the interface will ultimately be in and gives you no real clue about how it will be implemented. Also, developers are left to guess how things will be 'hacked' together instead of having live examples at the ready to base their work on and speed up development.

Brad Frost calls this atomic design and you can see some explanatory material here


Not the answer you're looking for? Browse other questions tagged or ask your own question.