Back

5 good UI style guides for your inspiration

Interface is a way to communicate with users and trick them into performing target actions. Poor UI design affects your revenue — potential customers will stay away from a product if it’s unpleasant to interact with. And “poor” design doesn’t mean it’s horrendous like joke projects for r/badUIbattles. Even small details like a slightly darker shade of green of the main menu can lower your app metrics.

This is why all product companies from corporations to mobile UI design services agencies have UI style guides. In this article we’ll discuss why you need style guides for UI development, what makes them good, and how Purrweb team uses UI kits for your apps.

Reading time: 7 minutes

ui style guides
Table of contents

    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. And with style guides for each app they can just show the documents so the new employee would 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 which 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 guidelineshttps://developer.spotify.com/documentation/general/design-and-branding/ 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 but at the same time you still have more than one option for UI design.

    ui style guides

    Airbnb

    What is it? Airbnb is an old IT corporation that operates a lodging marketplace. In 2018 Airbnb redesignedhttps://airbnb.design/building-a-visual-language/ 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 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.

    ui style guides

    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 it 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.

    ui style guides

    Udacity

    What is it? Udacity is an online institute that offers development, cybersecurity, and other courses related to IT. Their UI kithttps://dribbble.com/shots/2683592-Udacity-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.

    ui style guides

    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 guidehttps://dribbble.com/shots/2439685-Affirm-Android-Guidelines 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 style guides

    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 take a 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 we 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 take a 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:

    ui style guides

    Basic elements. After the client’s approval we add all our previously designed elements, namely:

    • typography,
    • color schemes,
    • buttons,
    • dropdowns,
    • input fields,
    • icons.

    ui style guides

    At this step it’s important to include all the subtypes of interface elements. For example, buttons come in different sizes and 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 design this screen according to the color scheme and typography rules that were already in the style guide. But we also add 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. At 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.

    ui style guides

    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 grey we should use for disabled buttons.

    We’ll be happy to work on your project — tell us about your future app in the contact form below.

    Editor
    • Anton Kiryukhin
    Designer
    • Aygerim Tuyakanova

    How useful was this post?

    Rate this article!

    10 ratings, аverage 5 out of 5.

    No votes so far! Be the first to rate this post.

    As you found this post useful...

    Follow us on social media!

    Share