Call Today

Mon – Fri, 8am to 5pm

Free Style Guide Psd

by | Sep 17, 2013 | Articles, Design, Photoshop | 0 comments

Free Style Guide

We all seem to have our own workflows when it comes to design. Some of of use wireframes. Others use prototyping and mockup apps to help us to make good design decisions. I have seen everything from sketch books to cutting and pasting onto paste boards. It really doesn’t matter how you create, as long as it works for you and helps you to create the best design solution possible for your client. That is where this week’s free Psd file comes from. I came across a great free style guide by Medialoot. You can see screenshots of the free style guide below.

style guide 1

With a style guide, you can make all of your basic style decisions ahead of time. With a proper style guide you can plan out different color swtches that will be used throughout the site and accompanying tints and guide 2

As you can see in the shot shown above, you can choose the right header fonts, the paragraph text and button colors. You can even choose and preview different colors for different button states. This is great, because it gets you to think about different parts of your website, so you don’t simply design as you go. This makes for a much better, more cohesive user guide 3

You can even plan out alert boxes, lightboxes, and form field colors and states. This is extremely important for creating a seamless user experience on your client’s website. As you can see below, thinking about things such as pagination, tables and other elements will allow you to have a game plan instead of shooting from the hip. This lets you preview your design ideas, instead of doing things from a trial and error guide 4

Download Medialoot’s Free Style Guide Psd

Medialoot’s style guide Psd is a great file for planning your sites. If you need a workflow that is based on forethought(which everyone’s should be), then this style guide will work well for you. The Psd is free to download for personal or commercial purposes, but if you use it commercially, please show credit to Medialoot. Click the button below to be taken to their download page. They’ll ask you to sign up, but it isn’t required in order to receive the file.


Divi WordPress Theme