Web Design Style Guide Creative Process

Using Design Tools To Create A Style Guide

With websites becoming more and more complex, and multiple people working on a single site, it is more crucial than ever to have a way to stay organized and consistent with content. A creative style guide is one such way. 

“It is beneficial to have a style guide in order to create a cohesive experience among different pages.”

(Laurinavicius, 2017)

Using the Adult Literacy League website, I was able to create a mock web design style guide. For the style guide I generated a color palette, mood board, and explored new fonts using several creative design tools. I also researched several great resources to use for future projects.

12 WEB DESIGN STYLE GUIDE TOOLS 

• Stylify Me

• Frontify

•Fabricator

• Canva

• Adobe Color CC

• Unsplash

• Freephotos.cc

• Pixabay

• Pexels

• Pikwizard

•Google Fonts

• Keynote

Creative Process: Tools for Style Guide Explained

Stylify Me

Just paste the link of the website you would like to analyze, and watch as its style guide is generated in one click of a mouse. This tool allows you to quickly analyze the website style elements including colors, fonts, sizing and spacing. Once the process is complete, you can download the style guide in PDF.

Frontify

Frontify includes everything from digital mockups to wireframing. Their style guide tool offers a clean simple design process with no hassle. You can sign up for a free trial or choose between one of their plans. Color palette, font choices, icons, logos, and more are all included in this platform.

Fabricator

Fabricator allows you to create your own UI toolkit, and generate a style guide.

How To Create Professional-Looking Logos

CANVA

Canva is a great site to check out for many of your design needs. Here are a few examples of Logos created using Canva, created for my Style Guide.

• 

This platform is convenient and easy to use for making professional- looking logos. The process is really fun to get creative with and this platform easily downloads your creations and gives you the option to create a free account and save your work!

HOW TO CREATE A COLOR PALETTE

I found Adobe Color CC and Canva to be very beneficial tools in my style guide process. Experimenting with both to create a custom palette I felt would best align with the client’s brand based off of the distinct elements I saw. I used both for this situation to generate two similar versions of my color palette.

The first row color palette was created with Canva and the second row was created with Adobe Color CC.

CLICK ON THE LINKS BELOW TO TRY THESE GREAT TOOLS FOR GENERATING A COLOR PALETTE.

Adobe Color CC

Canva

Now lets move on to fonts. To develop the style guide I explored fonts from Keynote, Canva, and Google Fonts.  When making my selections I decided I wanted fonts that were professional, warm, and align with the Adult Literacy league brand.

Fonts

Here are a few examples of fonts I chose for the The Adult Literacy League style guide.

After completing fonts, I moved on to developing a mood board to reflect the new website I envision for the Adult Literacy League non profit organization.

Mood Board & Images

I found most of the images I used for my mood board from Canva, having particular images in mind that I associated with the Adult Literacy League and the energy and mood I wanted their updated website to reflect.

Here are some great resources for FREE Images.

• Unsplash

• Pixabay

• Pexels

• Pikwizard

• Stockvault

• Freephotos.cc

• Gratisography

• Reshot

• MMT Stock

• Canva

For my end product, I created two very similar mood boards using Canva. These images were originally from sources such as Pixabay, Pexels, and Unsplash which Canva automatically generates.

Below is one of the images featured in the mood board I created. The hearts reflect the Adult Literacy League being warm, welcoming, empathetic, compassionate, and loving.

Also Check Out This Article From Canva For More Helpful Pointers

What design platforms do you find helpful for creating web design style guides? Please share your thoughts in the comment section below.

References:

Brown Heart Shaped Hanging Decor [Digital image]. (n.d.). Retrieved December 9, 2018, from https://www.canva.com/design/DADLSayoHak/kOEo6fhYCSn1RhdZ_IY4xg/edit?category=tACFain9R6w

Filidis, S. (2018). 10 Sites for Free Stock Photos (Updated for 2018). Retrieved December 9, 2018, from https://www.instantmagazine.com/blog/5-sites-for-free-stock-photos  

Laurinavicius, T. (2018, April 25). How To Create a Web Design Style Guide. Retrieved December 9, 2018, from https://designmodo.com/create-style-guides/

Written by: Jess Gold

Please Share Friends