how to implement a style guide for a team of 2-4

Question

I am reading Lean UX right now, and there is an idea inside I have never read before.

It is about style guide.

I would like to implement that but with as small a foot print as possible for the beginning.

I am a software developer. I usually work with a graphic designer who has no experience with HTML/CSS. He usually produces a design either in psd or ai.

How do I create a style guide that is easy for a non-tech graphic designer and myself to use for collaboration?

I want the style guide like a living documentation. Preferably it should also include some HTML/CSS code of the elements that I can easily copy paste.

Do I

• go find a server and install a wiki?
• use Google docs?
• use something else?

I read this UX style guide techniques but I want something for a small team of 2-4.

Answer 1

I have experience of three different tools for creating style guides:

Confluence The first style guide I implemented was built using Confluence. It was more a design pattern library, containing patterns and best practices for the most common UI design problems. Each pattern contained an example image, description how it works and why it should be used, and related design files. It was mostly used by designers, devs didn't find it that useful as there were no code samples on how to implement them.

WordPress blog with Pea.rs theme At some point we evaluated pea.rs, an open source WordPress theme that makes WordPress blog a pattern library tool. Devs somewhat liked it as it uses CSS & HTML for the pattern examples that developers can use in the code. However, it didn't support using Twitter Bootstrap in the examples not jQuery, and designer didn't like it because it lacked some key features that she'd need like file upload for design

Patternry Now we're using Patternry, a hosted style guide tool. What we like in it especially is the ability to use Twitter Bootstrap in the pattern examples, ability to customize the pattern templates, and live editor for markup & styles, making it easy to mockup designs in the browser. What we don't like is that the product is still a bit immature, some of the features don't work as you'd expect, it doesn't have version control and it doesn't integrate to any external version control system.

Answer 2

Based on my experience of producing a few style guides in various formats (html, wiki, pdf, doc), I found simple static HTML pages provided the most flexibility. It's usually developers who are driving creation of web style guides, because they are the primary beneficiary. Consequently, the burden of creating and maintaining one will likely fall on you initially, so you should start with the simplest method, which is static HTML pages.

As you get buy-ins from other stakeholders down the road, it's not difficult to transfer all the content onto Wiki or Confluence for non-developer contributors.

Starbucks' style guide proves that you don't really need a fancy wiki/collaboration software. http://www.starbucks.com/static/reference/styleguide/

Answer 3

I personally like to use wiki (we use Confluence) for this. I prefer using the name "Design Guide" rather than "Style Guide", because it is more broad, and our guide has pretty much everything that you need to use our widget library.

• We have a wiki page with all the UI components listed, each described in detail in their own page that anyone can edit or comment
• In the page we have overview, design comp with measurements, interactions defined, recommendations when to use the component, related components, dev instruction for using the component (the API for the widget library), and the more detailed implementation described for reference.
• In addition to this, since we use JIRA for Dev tickets, we list all the tickets that link to this page. The Dev tickets do not describe the design, they refer to the Design Guide or pages describing individual designs (which are more disposable, where as the Design Guide is always kept up to date)
• We started building the Design Guide gradually, when ever we need new components in the UI

I hope this helps you to get started. We use this in our team where we have one UX desinger/PM (me), two front end devs, and a gfx designer. The design guide helps the branding and other parts of the company also to keep track of what is going in the front-end development and our new UIs

Answer 4

If working with a brand you want will to be and remain strong, which may involve people working with it in remote locations, if there are no editors working on your content to ensure standards are retained to secure a consistent brand experience for all visitors, be sure to also create and always maintain:

• editorial standards, and choose a general commercial style guide for your written content to follow (like Associated Press (AP) or Chicago Manual of Style

• photography standards (what style of photography is your brand going to use? IE reportage, objects / people which are always outlined so the background is white, or...?

• UX design library showing your brand's style of various interactions

• preferred fonts (for page titles and subtitles, for general text, used in photo captions, used in charts and graphs)

  • color palettes: primary colors, secondary and potentially tertiary colors to use in various instances and circumstances (on hover / on click / bar chart color palettes used, title styles and colors)

Be sure to also include non-Web, print, and other standards as well, as in email standards, and Presentation, event decor, paper, packaging, swag styles and execution standards, etc.

Re technical standards you may also want / need to include social media standards, accessibility standards, naming conventions especially if multiple people / teams are using a or several centralized Content Management Systems.

Make sure to update when pieces of your standards are updated!