1

I'm developing a sort of a theme with a set of pre build components with is such as, styled data tables, input forms and etc... This is developed for internal usage in my company and I would like to add a style guide document to the theme. I've never written a style guide and would like some guidance on how to write one. I've googled and found out some templates but would like a professional guides as well.

Thank you.

  • 2
    There is no 'perfect'. The best you can do is to make sure it's a living document, as it will need to be updated and maintained over time. – DA01 Nov 17 '15 at 19:15
2

A style guide usually contains a list of design patterns which are used by your brand, product, application.

A Design Pattern:

A design pattern usually accompanied by the following information

  • A problem statement
  • Usage
  • A solution
  • Rationale
  • Examples
    • Screenshots
    • Visual design specs (colors, spacing, typography, etc...)
    • UI specs (if applicable, add supporting HTML, JS, CSS)

Style Guide

A good style guide contains a list design patterns and communicates all necessary information for a creative and/or development team to construct a consistent brand experience across different channels.

  • Logo & Logo Usage
  • Iconography
  • Color Scheme
  • Typography
  • Copy & Tone of Voice
  • Grid
  • Breakpoints
  • Page(or Screen) Layouts & Templates
  • Spacing
  • CTAs
  • and so on and so forth...

You can take a look at Google's Material design and UI Patterns as well as Foundation Framework and Bootstrap Framework (as mentioned on this page)

2

You don't have to build this from scratch. there are many customisable style guide generators. bootstrap and foundation are 2 of them.

here's some examples of styleguides done by various companies http://styleguides.io/examples.html

here's a good starting point as well. You can use this to breakdown what css is already being used and try to remove any redudencies http://stylifyme.com/

Bootstrap http://www.monolinea.com/labs/bootstrap-style-guide-boilerplate/

1

Including UI behavior (in additional to UI presentation) in the Style Guide is good practice. For example, describing authentication UI behavior or drilldown behavior on a device.

If you are working in an Agile environment, Style Guide updates can be included as part of specific user stories that include new/updated UI components.

0

Writing a style guide ist the easy part. Keeping it alive, enhancing and altering it when necessary and having it being respected by developers and designers is the hard part.

I recommend you to have a look at these slides from Wolf Brüning, an Interaction Designer for otto.de

http://de.slideshare.net/WolfBruening/how-to-build-the-perfect-pattern-libraryy

He describes how to build a lean pattern library and get everyone involved from the start.

0

I don't usually use anything from the government as an example of what to do correctly, but their web design standards site is simply a great style guide: https://playbook.cio.gov/designstandards/

As mentioned by some other people, it starts with general(atoms) styles and moves to more and more complex element(molecules, organisms, templates, pages, etc) styles. This is what's known as "atomic design" and is a great way of organizing your reusable styles.

This is also a great site/app I've used to quickly whip together an online style guide: https://frontify.com/ (fyi, I don't work for frontify. It's just a good tool)

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