Creating Styleguides — the what, how and why behind it.
In this article, I am gonna give a basic understanding and examples creating style guideline on Sketch App.
If you already know about creating style guidelines that’s really good but if you don’t know then after reading this article you will be properly able to create your first style guidelines for your project. 😊
What is Style Guidelines?
Style guides are most important and relevant part for UI designing that give the better experience and save lots of time while you are designing UI and also help to keep consistency in the whole project like UI elements, colors, typography, icons and etc…
So now, you will be thinking that It’s hard? or How I can make this? then believe me It is very easy and huge time saver. Let’s start 🏄
____
Define Colors
I always define the colors first, because it gives me the right direction to create the branding and I define colors in 3 parts like Primary, Secondary and Accent colors.
Primary Color:
A primary color is a color that displayed most frequently across all app screens and elements.
Secondary Color:
A secondary color is used for micro-actions like slider, arrow, progress bar, links and maybe you can use this color for headings.
I also define primary and secondary color variants like light and lighter which helps me to give more attention on branding and more exploring with my selected colors.
I use colors shades than opacity because sometime I face some issue while I am doing opacity because of random opacity that’s I used colors shades, example Primary Color: 400, 300, 200, 100 and so on.
I also figured out a source for generating colors shades and It is great and fast and you can try it link below.
Color Shade Generator:
Accent Colors:
Personally, most of the time I use accent colors as an error, success, warning, information as like give some type of messages on the screens.
Note: If you don’t have the secondary color you can use an accent in the different direction like button, link, text color and Also the accent color is based on very firm research about the psychology of signal and also this accent colors called semantic Colors.
Examples:
- Red | error, wrong
- Yellow | alert, warning, caution
- Green | success, right, safe
- Blue | information
Define Gradients
As I told you I believe in exploring more and more. So I use Gradients because it’s give new direction to your design and As we know today gradients become a part of design family. Almost everyone using gradient because most of the gradients tell the story about making a connection, emotions and more.
Start with primary + secondary colors and also try to give some direction in gradient like diagonal and you also make more variants of your gradients by using defined colors shades.
___
Sources ⬇:
Create Colors Symbols
Symbols are really powerful as we already know! how to use it, but If you already created the whole branding then try to convert into symbols that give will you more control on your style guides. also every single changes you make, this will be effected globally on your project.
Example:
Step 1: Define color
After having your colors just simply make some square shapes and fill your color into square shapes.
After adding colors rename your colors layer name, this will help you to make beautiful structure, as you can see in above image [Image | Symbols].
Example:
* / Colors / Primary / Main
* / Colors / Primary / 100
Also, you can use this sketch rename plugin for changing layer names in the single click, and It’s a helpful plugin which saved so much clicked and time.
Rename Sketch Plugin in:
Rename Sketch Plugin in:
Step 2: Create layer style
This come second after symbols or but you create layer style without symbols and I think creating layer style is great why? Because layer style globally it doesnt if it is symbol, or text, ot anything if you change some properly of element like color then the property changed across your all artboards.
Note: If you create style layer then create symbols so, you have powerful workflow and beside changing UI one by one. Use this…
Define Typography
Typography is very extremely important part of UI design and typography elements included fonts, sizes, and colors and it is also called font family, A collection of font and font weight.
Now let’s define the typography by using simple steps.
Step 1: Select Font Family
you can use google font or if you are working on Android or iOS-based project then you can go with default fonts like Roboto and SF Display pro or you can use any other fonts.
Android:
IOS:
Note: Well I always try to use default fonts as mentioned above and Mostly Used one font family. But you can also use maximum 2 families with very limited font weight.
Example two font family: Montserrat + Merriweather
Montserrat | Extra-Bold 900 For heading
Merriweather | Regular 400 & Light 300 for body text, caption and more…
Step 2: Select Font Weight
Font weight is set of weights like thickness, bold and super bold and it speaks visually and creates the difference between font style.
There is two way to define font weight for the designing and Coding.
In Design: font weight used as Thin, Regular, Medium, bold, Black.
In Coding: font weight used as numerical like 300, 400, 700, 900
Step 3: Create Style Layer
After choosing fonts and font weight, Now start creating style layer and If you sketch app and you properly know how to create style layer and this is so much useful and it is like defining master template of your text or anything and re-use again and again. and you can group your text like heading, captions and more as I told you above in define colors section ↑.
I have found an amazing plugin for generating style and it’s generate based on your layer name and remember layer name is really important for nesting, and styling.
Sources ⬇:
Define Icons
This is my personal thing that I really focused on small details on every single design so that’s why I added icons into style guidelines because of this small thing really put lots of impact on my design like input field, cards, list view.
Icons type
Flat, OutLine, Filled and more…
Try to use one type of icons like Outline icons but If you wanna add micro interaction like filling icon on click then you can transform your outline icon into filled icon.
Icon Grouping
Grouping is best way to find similar things very fast and I believe that everything should be in group, Most of the time I created icon groups according to icons, example: arrow icons group, menu icon group.
I am not saying that you should create group of every single icons but try to create group of unique icons which are using in particular or specific place.
Icon symbols generator
This is one of my best plugin that saved so much time and This plugin help me to generate all icons into symbols and also I easily add color on icons as mask.
Sketch Icons Plugin
Sources ⬇:
Download Style Guidelines
More where this came from
This story is published in Noteworthy, where thousands come every day to learn about the people & ideas shaping the products we love.
Follow our publication to see more stories featured by the Journal team.
