Website Style Guide Creation

I’m working for a client that requires me to create website style guides from detailed photoshop mockups of the already designed website. These style guides are then passed on to the actual developers so that they can code and create the CSS based on the provided style guides.

Previously I’ve done all of this myself, so I never really bothered creating style guides. I was wondering if anyone has a software of preference that they use when creating style guides. I currently have been using Photoshop and just overlaying lines on top of the website layout to detail dimensions and so forth. Really I wanted to know if there’s an ‘industry standard’ for how these should be created.


I’m going to answer this a little backwards, because the content of a style guide is more important than the program you create it in.

In my opinion, from both creating and working with style guides, a style guide should allow you to start with a completely blank document and end up with something which looks exactly like it came out of the client’s in-house art department.

To accomplish that, you need to spec everything. Fonts, colors, style of photography, spacing, code style, the works.

By way of example, I answered this question on Writers, but my answer was mostly design: What needs to be included in a Corporate Style Guide?

So once you’ve determined what you need to put in your guide, the program you create it in is “whatever it’s easiest for you to work in.” For your example, I’d create images in Photoshop and the guide itself in InDesign.

Source : Link , Question Author : J_Tremain , Answer Author : Community

Leave a Comment