How to create a style guide

29 May

How to create a style guide

In this tutorial you we will teach you how to create your own style guide out of your web design file quick and easy. This is a great tutorial and workflow to keep everyone on your team up to speed as well as your developers. This will help you create less confusion and more productivity out of your team.

The best way to create an effortless workflow when desiging a website with a team is for everyone to be on the same page. One of the best ways to do that is with a style guide. When you create a style guide for your design you and your team will be able to see all of the colors, fonts, and headers used. This is a great thing when working in a large team and with developers because once one thing is changed on one page it will also be changed on all of the other pages in your design. 

You will need to have Photoshop, or Sketch, and the Craft Plugin that will be creating your style guide for you. In this tutorial I'll be using Sketch but this will work with Photoshop as well.

In the tutorial you will see how I change the color blue to a red and it changed the colors of everything that was using that color tone. This is a huge time saver when going in there and making changes to design specially if you have more than one page you have to change.

Once you share your stye guide with your team and they decide that changes needs to be made it will change the colors, fonts, and style on every page without you having go to in there and change it one by one. 

 

Web Development Agency | THAT Agency

TAGS: Web Development, Web Design

Share this post!