Learning how to Style Guide

Embracing the magic of the style guide is not only a necessity in the world of responsive product design, but creates a starting point for all future tasks. It’s like having a list of the top 20 phrases when traveling to a foreign country.

I recently started working at a startup called FitStar. When I first began adapting the style guide for our newest product, I thought I was creating something for other members of the team to reference. After taking the time to create a flexible system, the style guide is the first document I open before starting anything new, and my main reference point in design discussions.

Style guide tools: Sketch, Mirror (a Sketch tool for viewing on device), device for testing (phone, tablet).

Before creating a style guide, decide who the main users of the guide will be. In my case it is the app developers and designers of the product. Using the guide as a designer, I need something that includes all colors, font faces, sizes, and buttons. The developers need values to plug into the code that would translate to every module previously set up in the app.

Text styles were the hardest part of the guide to nail down. For a mobile and tablet app, we broke our text up into H1-H5, navigation, body, caption, and footnote. For mobile, many of the styles overlapped to be the same size. Each of those font styles has a size, and weight assigned to it. The sketch file with the visual design has a text style attached to every text block so anyone can easily see the text style and color in reference to the style guide (more on this later).

We broke the color palette up into Accent, Light, and Dark. Within each of these categories is a primary, secondary, and tertiary. These 9 defining colors cover everything seen in the app. For example, the main color used for text is white. So the primary light color is #ffffff with 100% opacity, the secondary light color is #ffffff with 75% opacity, and the terciary light color is #ffffff with 30% opacity.

Buttons are a third category in the guide. For this, we defined 4 button types; confirm, subtle confirm, destroy, and inactive. There are 2 button sizes within each of these styles.

Icons that run throughout the entire app are included as well, like loading icons, arrows, and any other icons prevalent in the design. There are measurements that go along with everything, such as icon height, list style height, etc.

It took a while to create the initial design to match the style guide, without breaking the system. I found it easier to take the design and translate it to the style guide, but it could also be done the other way around. Now I can go in to any sketch file, select a piece of text, and assign it a text style (such as Body primary light). This makes the design process faster for me, but also creates consistency for the development team.

So the summary of my style guide learnings:

  1. Design the basics of the design in Sketch.
  2. Make sure the styling is legible on your device using Sketch Mirror.
  3. Find patterns in your design, and assign color, opacity, weight, and size to each component. Find naming conventions that work with the development team. Use standard UI patterns from design leaders when possible: https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/.
  4. Create your style guide in Sketch, something that everyone on the team can access, and understands its purpose.
  5. Make sure the final designs and custom text styles match with one another so there is no confusion on what a button looks like, or what size an H1 should be.
  6. Consistently update the guide as the design evolves over time.