Skip to content
Szukaj

MINI-BLOG

How to create a UI style guide

  • 28 sierpnia, 2022

Join Our

Newsletter

Subscribe to receive quick tips in your inbox!

A style guide not only helps keep things consistent but also allows updates to elements like colors and icons across multiple documents with a lot less hassle. Having a guide style or a design system in place is pretty much a must when you want to have consistency in your website or app design projects. Here are a few helpful things you should include in your next style guide.

uiadrian

We’ll cover:

  1. Typography
  2. Type scale
  3. Colors
  4. System colors
  5. Shadows & blurs
  6. Layout grid
  7. Icons & other assets

Typography

To create a clean-looking design you’ll need typography. I tend to use fonts from a site called Fontshare. All the fonts are free for personal and commercial use, and they are amazing!

Type scale

Having a solid type scale is one of the most important elements to help you establish your content hierarchy. As usual, I reference HIG for iOS, MD for Android on mobile, and Tailwind CSS on desktop.

Main colors

To create your main color palette you’ll need at least one primary color, grays, and two shades, black and white. To create your tints and shades for the primary colors try a Color Designer plugin on Figma.

System colors

Your system colors will mainly be influenced by the system you’re designing for, or the library you’re using to define your colors. I tend to reference colors from HIG/MD for iOS and Android respectively.

Shadows & Blurs

With these you have a bit more freedom as they are not clearly defined. I tend to choose at least 4 different shadow and blur values to give myself more options when designing.

Layout grid

I use standard 4-column, 8px grid with 16px+ side margins, and 8px gutters, designing on a 375×812 frame when designing for iOS. For mobile websites, I usually leave between 16-20px margins.

Icons & other assets

If you’re using a specific icon set, an illustration set, or a very specific style of imagery I would also include all of that in the style guide. It’s especially important to know what not to use to help your brand remain consistent and have a clear visual language.

Wyświetl ten post na Instagramie

Post udostępniony przez UI/UX Designer (@uiadrian)

PrevPrevious
NextNastępny
Share the Post:

Related Posts

CREATE UNIQUE Animated gradients

The tutorial on creating and animating gradients is here 👻 I also have a Figma file for you with these

Essential elements of Design System Part2

A design system is a set of guidelines, rules, and components that we use to design and develop a digital

Join Our

Newsletter

Subscribe to receive quick tips in your inbox!

Facebook-f Linkedin

© All Rights Reserved.

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.
Cookie SettingsAccept All
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT