Your website or app is changing all the time. Technology is advancing at an increasingly rapid rate, so in order to stay current, you’ll often have multiple teams of developers working constantly to update features and optimize how things work.
But no matter how much you change and update, it’s important that you remain “on brand”: that the basic user experience and user interface stay familiar to your users no matter how many updates you go through. How do you maintain that overall continuity with multiple developers? You need an UX/UI style guide. Here are some tips for creating an effective one.
Areas to include in your UX/UI style guide
- Layout: Different people will be accessing your site from different devices, from computers to smartphones to tablets, all with very different size screens. What will the site look like on each of those devices? Will the basic layout be maintained no matter what size the screen is? Is the spacing similar? Are objects and text in the same place? A good style guide should outline the format to use to preserve your layout across devices.
- Color: Your color scheme is a big part of users’ first impression of you. Complementary colors are appealing, but if they’re slightly off, it can create a look that turns people away. Once you’ve defined your chosen colors, list their HEX and UIColor values in your style guide, along with examples of how they can be used for maximum effectiveness.
- Text: Fonts may seem like a minor thing, but even subtle changes to them can be very jarring. Write out exactly what fonts and sizes you use, along with instructions for titles, headings, subheadings, photo captions, etc.
- Buttons: What do your buttons look like? What size, shape, and color are they? Is there text on them? What font and size? Make sure all the buttons look approximately the same.
- Menus, toolbars and other things: What color is your site menu? Where is it placed? Will there be a toolbar constantly across the top of every page? What does it look like? Do you have dropdown boxes? How do they function? What size and color are your dialogue boxes? Carefully examine every element of your site and include sections in the style guide for how they should look, feel, and operate.
Organizing your UX/UI style guide
We’ve covered what should go into your UX/UI style guide, but how should you organize it for the ease of use of your designers and developers? Here are a few tips…
- Table of contents: Have a clear listing of all the different sections of the guide and where to find them, so that designers/developers can easily skip to the area that they’re currently working on. You can even use hyperlinks to take them directly to the section in question. Or, for printed style guides, use color-coded tabs.
- Dos and don’ts: Include examples of style usage for your various sections, with clear visual representations of what you are and aren’t looking for.
- Code Examples. For many design aspects, including pieces of code with correct specifications in it will be very helpful. Developers can then simply copy and paste when they need to, saving time and ensuring that it’s correct.
- Rules of thumb: It’s difficult for any style guide to cover every single thing. Sometimes, something will come up that you hadn’t anticipated, and developers will have to make value judgments. Include some basic rules of thumb that they can go by to help them make those decisions. Then, see about editing the style guide to include those decisions for next time.
- Context: Simply laying out color values and font sizes isn’t enough. It’s important to explain why you use these particular style choices and how they fit in with your overall brand. This will make it easier for everyone to remain true to your underlying theme, particularly when those value judgments arise that aren’t covered by the style guide.
These are just a few ways you can create a dynamic and effective style guide that will help maintain your overall brand, no matter how many different developers and design teams work on your website or app.
