Working with UI Style Guides - UserActive

Working with UI Style Guides

When we finish designing an interface we often prepare a style guide for our clients. This helps the development team by providing a reference for all the styling they need during the build process. But it also provides future proofing for any development work on the roadmap. In this video I’m going to talk about UI Style Guides and how they can help you save time and maintain a high standard of quality for your software interface.

What is a UI Style Guide and why would you use one?

A UI Style Guide it’s a design document that contains a reference of all of the styles and many of the interface elements that you would use in your software. It’s the design blueprint for everything from colour schemes and fonts, to buttons, menus and hover states.

Generally, these style guides are used by designers and developers for reference when working on a product. Because everything is consolidated in one reference document they’re also a really powerful tool for briefing new members to a project.

What is a UI Style Guide and why would you use one?

So let’s take a quick look at a style guide. Here’s an example of the style guides we create at UserActive.

Talk through the UI Guide in order:

  • Colour palettes with Hex codes
  • Gradients and the angle and codes used there
  • Recommended usage on where to apply colour styles
  • Typography – We look at the fonts and styling for each text style from H tags to body copy and we specify font size, weight and letter spacing 
  • In some instances we specify spacing between elements or in this case a grid system, if we need to specify certain resolutions or media queries for responsive layouts we can do
  • We look at button styling including different types of buttons, sizes and states. Often this includes secondary buttons which may have been designed with some differentiation, usually relating to their function in the software
  • We then take a look at dropdowns and other interactive elements. 
  • Also Tables, lists and card designs
  • Then we have things like tags, chips, navigation elements
  • Finally input fields

So that’s what a typical UI Style Guide looks like. Sometimes these UI guides are light and simple and other times they can get fairly large and complex depending on the size of the software or design project.

What are the Benefits of using UI Style Guides?

They help keep your interface consistent because each time a designer or developer is working on something, they don’t need to use their own interpretation or reinvent the wheel. This also helps speed up the resolution of design and development problems.

It makes work in the future easier and faster, because we have the groundwork done for any new designs and future design and development work can be inferred.

It makes the development process faster because developers can quickly grab anything they need from hex codes, to spacing to interaction treatments such as buttons, hover states, dropdowns and notifications.

Why you should Use

We recommend using UI style guides because they really help the people working on your software, they speed things up ultimately saving time and cost and they promote consistency. As you can see, UI style guides are another one of those design tools that in their own way, help you to improve your product, get more users and grow!

Peter Loving

Peter helps SaaS companies create meaningful products users love. He regularly speaks at conferences and shares UI/UX related content on the UserActive blog and YouTube channel.

If you’re launching a new product, have some improvements you’d like to make, or simply want to plan for your next phase of gropwth, we’d love to help.

Request a Quote