What is a style guide in UI?
Every corporate blog — including this one — has a style guide. This document describes the blog’s tone of voice and target audience, stylistic dos and don’ts for articles, typography rules like the usage of non-breaking spaces and quotation marks, and other characteristics that are mandatory for every article. Style guides for texts make it easier to control the quality of each post and specify the task for authors.
A UI style guide is a similar document — but instead of writing rules, it describes the visuals of your app. UI style guides include color palettes, fonts, icons, buttons, and other UI elements to ensure consistent design patterns within the project.
Why do I need a UI style guide for my startup?
Let’s get back to the slightly darker shade of green case. It shows the main purpose of UI style guides which is consistency. You need a reference so you don’t end up with a messy interface and annoyed users. UI style guides make sure that if this button is purple, it’s the same shade of purple everywhere. And if you use Roboto for titles, this font will be used in every title.
Another reason why your projects need style guides is to simplify and speed up the decision-making process. For example, your app has a lot of long texts and you want to highlight important points. If you have a style guide, you will choose the highlight color faster because you have a limited number of options instead of all the colors in the world.
Finally, style guides help with onboarding new designers. For example, a UI/UX design company that works on several projects hired a new Junior UI/UX designer. They know nothing about these projects’ design patterns. Without guidelines, other employees would spend a lot of time explaining every nook and cranny of every mobile app project. With style guides for each app, they can just show the documents so the new employee can start working right away.
Great! Now show me some examples
Even if you don’t work at a UI/UX design company, you still should care about user experience, regardless of the app you want to build. For your inspiration, we picked 5 interesting examples of UI style guides that you can use as a reference.
Spotify
What is it? Spotify is a popular music and podcast streaming service. They developed guidelines for partners who want to integrate user data from Spotify into their products. In this case the style guide’s objective is not only consistent design patterns but also building strong visual associations with the brand.
Why is it good? Spotify used an interesting approach to the verbal part of their design guidelines. It’s not common for style guides to have a lot of written instructions — such documents are usually as visual as possible. Spotify, however, made a collection of good and bad examples that are both shown and described. This approach ensures brand image consistency. At the same time, it allows more flexibility for third-party developers. The rules in these guidelines are clear and relatively strict, however, you still have more than one option for UI design.
Airbnb
What is it? Airbnb is an old IT corporation that operates a lodging marketplace. In 2018, Airbnb redesigned the interface of their app and their website. To ensure consistency on all platforms during the redesign process, this lodging marketplace built a new design system, including UI guidelines. The objective of Airbnb’s style guide was to create a bold and unified look on all platforms and simplify the team’s work.
Why is it good? Airbnb’s case is a good example of how you can get to work on your style guide. Their guidelines started with a basic color scheme and fonts, later Airbnb moved to basic elements — and now this guide is a huge library of web pages, iOS and Android screens.
Scratch Track
What is it? Scratch Track is a small recording app for musicians designed to organize song ideas and share them with your bandmates. This minimalistic UI style guide for the iOS app was developed by Justin Renninger. It’s surprisingly small but still contains important information about typography and color. It also has several screens, including a chat window, lists, and an authorization form.
Why is it good? Justin Renninger’s modest one-page guide is an example of how style guides can be both informative and laconic. Sometimes, your projects don’t need a huge library with 50 screens for web, iOS, and Android. If your app is as simple as a recorder with a group chat and sound editing options, one page of visual guidelines fulfills all the requirements. The guidelines should be clear and informative but their content and size depend on the product’s complexity.
Udacity
What is it? Udacity is an online institute that offers development, cybersecurity, and other IT-related courses. Their UI kit was made by Brad Wrage from the UI/UX design company Focus Lab. These guidelines are applicable both for web and mobile apps.
Why is it good? We found this guide interesting for two reasons. Firstly, it’s the color scheme. You might look at the page with color palettes and think: “There are too many colors.” But this bold palette is used everywhere including futuristic 3D illustrations on the website, which creates a unified look.
Even better, you can look at the guidelines and understand that Udacity is an online school. It’s not common but sometimes, it’s reasonable to include project-specific elements in your guide instead of using the same “Lorem ipsum…” sample text.
Affirm for Android
What is it? Affirm is a fintech company that allows people to shop at any retailer using the “buy now, pay later” scheme. Their style guide developed specifically for the Android version of the app was created by John Francis. This document contains color schemes, typography rules, a fair amount of screens, and a brief description of key design principles.
Why is it good? These guidelines for Android are another example of how you can use verbal instructions in your design guidelines. In their document, Affirm described the purpose of different UI elements and the role of color palette in the interface. Some points from the guide like “buttons are used to clearly communicate the suggested action per view” seem a little excessive. But other descriptions are pretty decent — for example, it says that colors are meant to show hierarchy within UI elements and actions.
UI at Purrweb: how we work with style guides
Our team knows the importance of a sleek and consistent user interface in any mobile app, may it be an IoT app for smart fridges or a produce delivery app for restaurant owners. Let’s look at how we at Purrweb build UI style guides and which role they play in the development process.
But why do we care?
Apart from what we’ve mentioned earlier, good style guides increase the development speed. We make mobile app MVPs and understand how important it is to reduce time to market. Developing a style guide that speeds up design decisions and allows developers to build each screen out of pre-made elements is one of the solutions to this issue.
How we develop UI style guides
Developing a style guide is a routine procedure for all the projects we work with. All our style guides are standardized because it’s easier to introduce new team members during UI development. Let’s look at how we developed design guidelines for Grecha.pro — the B2B food delivery app for restaurant owners.
Design concept. We start by making 2-3 sample screens of our future app. At this stage, we edit our initial design to meet the client’s needs. For example, this is what our concept screens for Grecha.pro looked like:
Basic elements. After the client’s approval, we add all our previously designed elements, namely:
-
- typography,
- color schemes,
- buttons,
- dropdowns,
- input fields,
- icons.
At this step, it’s important to include all the subtypes of interface elements. For example, buttons come in different sizes with or without an outline, and input fields can have icons or titles. This is how we created the guidelines for buttons, bars, and inputs for Grecha.pro. You can see that we included 4 subtypes of input fields and 12 subtypes of buttons.
Additional elements. At this stage, we clarify our style guides with new elements designed during the UI development process. For example, our team decided to add a calendar screen to the app. We produced this screen according to the color scheme and typography rules already in the style guide. But, we also added the calendar screen to the guide to simplify future decisions and standardize this particular UI element.
One of those elements that appeared in Grecha.pro UI kit later was final order screens. In the early stages of development, we didn’t have a complete user flow, so we didn’t work on order states. We added these screens to the guide later.
Purrweb cares about user experience — just because we make MVPs, doesn’t mean we put little thought into their design. We develop style guides for better UI development and faster app building. We take care of every project from idea to app store. And yes, you still can decide which shade of gray we should use for disabled buttons.
