Image for post
Image for post

Creating Styleguides — the what, how and why behind it.

Faizur Rehman
Jun 19, 2018 · 8 min read

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

Examples:

- Red | error, wrong
- Yellow | alert, warning, caution
- Green | success, right, safe
- Blue | information

Image for post
Image for post

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:

Image for post
Image for post
Image | Symbols

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

Image for post
Image for post

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.

Image for post
Image for post
Example Create Layer Style
Image for post
Image for post
Using style layer
Image for post
Image for post
Update layer changing colors

Note: If you create style layer then create symbols so, you have powerful workflow and beside changing UI one by one. Use this…

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

Sources ⬇:

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post
Sketch Icon Plugin

Sketch Icons Plugin

Sources ⬇:


Download Style Guidelines


Wanna free this StyleGuide v1
- Help other people by using this article
- Follow me Instagram | Dribbble
- Message me on Instagram for free download link


Need Help?


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.

Faizur

beyond the limit, and expectation

Faizur Rehman

Written by

Creative Director & Consultant— Let's work together me@faizur.com

Faizur

Faizur

FAIZUR is an independent digital consultancy company helping with brand strategy and business decisions. FAIZUR was founded in 2019 as a company and since then collaborates with many clients worldwide.

Faizur Rehman

Written by

Creative Director & Consultant— Let's work together me@faizur.com

Faizur

Faizur

FAIZUR is an independent digital consultancy company helping with brand strategy and business decisions. FAIZUR was founded in 2019 as a company and since then collaborates with many clients worldwide.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store