Creating a style guide that Developers will use

07 Mar 2014

by Reina Santiago (UX Lead)

It doesn’t take Jedi mind tricks to get your devs to follow a style guide. All you need is some resolve and a couple of cool coders. Try these easy to follow steps and take your first step to a more beautiful front end experience.

  • Get your stuff together first - Start creating a doc that assembles all of your commonly used colors, fonts and styles.
  • Be concise – No one wants to read eight paragraphs of why you chose that color of purple. Keep it clean, simple and to the point.
  • Get a taste of your own medicine - Open your eyes to any holes in the doc by using your own style guide for about a week. You’ll quickly notice things that need to be improved.
  • Find out your Dev’s preferred language - They’re the ones using the guide after all, make them feel included in the process and find out which format would work best for your peeps. Ex: Do they prefer their RGB in decimal, hex, or a percentage? Use visual representations of everything for easy scanning, but back it up with the numbers or CSS styles.
  • USE LIVE TEXT – Don’t embed those hexadecimal numbers, make them selectable so that your guys can copy and paste easily. This is the #1 problem in unused style guides.
  • Spend some quality time with your boys (or girls) - Sit down with your developers and walk through the style guide with them. Try emphasizing that this will make the development process faster, easier and more consistent. Answer any questions and listen to feedback.

Try these steps and the force will be strong with you. Need an example? Check out our SteelSeries Software style guide.

Did this work for you? Let us know!