Style guide driven development offers a hugely flexible approach to modern web design. In this tutorial I'll walk you through designing a UI (user interface) kit, whilst also explaining the decision-making that will keep our UI kit consistent and reusable.
Tutorial Assets
In order to follow along you will need the following (freely available) assets:
- Open Sans font from Font Squirrel or Google Fonts
- Stock photo from Unsplash
- Faces from UI Faces
- Arrow icon from Iconfinder
Prepare the Photoshop Document
Step 1
Open up Photoshop and begin by creating a new document (File > New…) using the settings shown below. You're free to use a canvas of whatever dimensions you prefer - the web is not fixed width, after all.
Step 2
Let’s set some guides so our UI kit is organized and aligned. I don't always use a grid, but setting some constraints will ensure neatness and consistency. Go to View > New Guide… and set some guidelines. I usually choose 1000px as a website starting width so let's keep our UI kit within these dimensions.
Note: Guidelines used for this tutorial: vertical at 100px, 600px and 1100px.
Tip: You could also use the GuideGuide Photoshop plugin to make this process even quicker.
Step 3
Sticking to Photoshop etiquette we'll keep things organized and easy to navigate and edit. In a working environment we'll need this UI kit to be used many times as a reference point and development asset, so you need to keep it organised (developers will thank you). Let’s create six layer groups named Typography, Buttons, Forms, Avatars, Images and Colors.
To create groups go to Layer > New > Group… and give each one a title as mentioned. For quick creation of a group just click the icon.
Defining Typography
As Oliver Reichenstein famously stated "Web Design is 95% Typography", so you need to get it right. First of all we need to set up the perfect environment for our type; a background that is neutral and easy on the eye. Background and typography need to maintain reasonable contrast levels to be readable. For this tutorial let's use subtle light grey - a neutral color but strong enough to give your app a personality. I've set the foreground color to
#e9eeef and hit Alt+Backspace for the background.Step 1
Open up the
Typography group, pick the Horizontal Type Tool (T) and select the Open Sans font. Open Sans is a modern typeface which comes in many different weights and has a professional, yet welcoming look. It's stylish enough for headings, but also practical enough for body copy on the web.
Open Sans has plenty of variants, so for this UI kit I will be using just the one font. Bear in mind that you should be careful if using more than two different fonts for your projects as things can get messy quickly.
I've set the foreground color to black
#000000 then using the Horizontal Type Tool (T) and the previously mentioned Open Sans font with Light option and 55px size entered the title of the section. We'll use same size and style titles for future titles to keep consistency.
Step 2
Now we need to establish a hierarchy for our typography. Please check this article How to Establish a Modular Typographic Scale by Ian Yates to better understand the science and importance of web typography.
HTML (HyperText Markup Language) has many different tags which help browsers interpret the content of a page. Many of these tags are specifically used for web typography such as
<h1>, <h2>, <h3> and so on. These describe headlines, <h1>being the most important one. After that there is a <p> tag used for paragraphs. Without going into more detail where HTML is concerned we'll define the look for these elements.
Using the Horizontal Type Tool (T) enter three headlines. I've used Open Sans (Light) 55px for h1, 44px for h2 and 32px for h3 leaving 30px gap between them. Spacing is another important thing to keep in mind. Leave enough space so your type is easily readable and looks balanced.
Note: I've used Regular weight for the h3. As type gets smaller the Light variant may become less legible.
Step 3
As we have our headlines set let's jump to the actual content copy. Consider all possible variations of copy and display it in your UI kit so developers can implement what you have planned. Think of a headline style inside the paragraph, bold, italic styles and also links.
For the main copy color I've picked grey
#838383, for the headline black #000000 and blue #006ee3 for the link color.
The headline will be noticeably darker than the main copy, giving it greater impact. The main content color should be relaxing and easy to read. Finally, make sure you pick a different color for your links so that users understand that they're clickable.
Note: Set headline and link font to Semibold weight to make them look bigger and more important.
Creating Buttons
Buttons are very important for web projects. They are simple links or submit forms most of the time, but they can also serve a call to action (CTA) function by leading people through the page, making decisions quicker. It is vital to define a consistent look to buttons so the user is familiar with them throughout the app.
Step 1
Minimize the
Typography group by clicking on the little arrow next to the group name and open up the Buttons group. After that create some new vertical guidelines to divide our content area into three equal areas with 35px gaps between. Go to View > New Guide… and set following vertical guidelines: 410px, 445px, 755px and 790px. This is where we'll place our buttons so all of them are equal and consistent.
Step 2
Navigate back to the
Typography group, find the section title layer and duplicate it by clicking CMD+J, then move it to Buttons group and change it to "Buttons".
After that enter three titles of button states: Normal, Hover and Active. Place these to the left of our three equal sections, keeping in mind the 35px gap between first, second and third areas.
Step 3
Now set the foreground color to the previously used blue
#006ee3 and create a new group called Primary Normal. Then pick up a Rounded Rectangle Tool (U), setRadius to 3px and draw a 310x44px size rounded rectangle shape. Place it between the first two guidelines under the "Normal" headline. To finalize the button write down some text on it using white color #ffffff so it is clearly readable.
Step 4
Now duplicate the
Primary Button group by clicking CMD+J on the group and rename these groups to Primary Hover and Primary Active. After that place these new groups under the two sections we have created headlines before.
What do hover and active mean, you may ask? Hover describes the state of a button once you move your mouse cursor over it, so we need to illustrate some feedback from the button. A link becomes active when you click on it.
For styling hover and active states of buttons we'll simply darken them. Create a new layer above the button shape and fill it with black
#000000. After that hold down Alt and mouse over the layer until you see a little arrow-down icon - release it to create aClipping Mask. Finally reduce the layer's Opacity to 10%.
Note: for the active state of the button increase black layer's Opacity to 20%.
Step 5
Now duplicate all the previous button groups and change their titles and color to secondary. We'll be defining UI kit colors later in this tutorial, for now simply pick one color and replace the previous blue. I've used green
#36c265.
Designing Forms
Forms are a very important web app element as they allows users to input information and interact with the app. We'll be designing some basic forms so developers can stick to the same style and keep design consistent.
Step 1
Minimize the
Buttons group and open up the Forms group. Once again duplicate the section title from the previous group and rename it to "Forms". We'll create some basic form input types including text input, password field, dropdown or select field and submit field (a simple button).
When designing forms clarity and familiarity are the key factors. Don't try to reinvent the wheel. Create a new group and call it
Name. Then pick a Horizontal Type Tool (T) and enter an input field label, in my case it is "First Name" using the same 18px size black#000000 Open Sans (Regular) font.
Now duplicate one of the button shape layers and move it into the
Name group. After that change its background color to white #ffffff and add a 1px grey #d5d5d5 inside stroke. Finally, place an example of the input text inside the white rounded rectangle. For my example I've used 16px Open Sans (Regular) and the color grey #838383 as used previously for the body text.
Step 2
Create some more input fields with titles by simply duplicating the first input field. Traditionally, for password field use dots • or asterisks *. An example of more fields is shown below.
Duplicate CMD+J one of the button groups, move it within the
Forms group and place it below the recently created input fields. Once again it is important to stay consistent and reuse previously created elements.
Step 3
In this tutorial we are sticking to a very basic user interface which could serve a very simple web app. Let's now create another type of input field; the
<select>.
Duplicate one of the input field groups and place it between the third and fourth vertical guidelines, make sure to align everything. Change the value to whatever you want and add a simple arrow icon to indicate that it is a dropdown field. You can find arrow icons on Iconfinder.
Step 4
To make developer work easier, again make sure you include an active state. Think of how the dropdown will look like when user clicks on it? It is a designer's job to guide the developer to create a consistent and unified experience.
Duplicate the recently created dropdown group. Using the Direct Selection Tool (A)click on a shape corner to see the edge points then, holding down Shift, select the four bottom points and hit down a couple of times to extend the shape. This technique keeps your shape vector and keep corners untouched.
After that simply duplicate possible selections and place some below the first one. Use aLine Tool (U) 1px in Weight to make simple separators and finally change the arrow color to the one used for buttons. This will help to indicate that the field is active.
Step 5
We'll now create a simple error message scenario, such as if someone has entered a password which is too weak.
Duplicate CMD+J the previously created password field and place it below the dropdown fields. After that, change the field's border to a subtle red (I used
#eb8686) and the background to a greyish red #e9dde3. Finally, pick a stronger red #b63131 and enter a simple error message.
That's it with forms! I've covered the basics but that's enough to get started designing more complex forms.
Avatars
Avatars are almost standard in any web app these days, so it is handy to have some visuals for easier communication and identification of users.
Step 1
Minimize unnecessary groups and open up the Avatars group. Pick the Ellipse Tool (U)and, holding down Shift, draw an 80x80px circle. Head over to uifaces.com and pick an image. Copy it and paste above the recently created circle. Hold down Alt and mouse over the thumbnail of the image until you see a little arrow, then release the mouse to create a Clipping Mask.
Step 2
It is important to think about how avatars will be used and include some different sizes for developers to use. For example, bigger avatar images could be used on the profile page and smaller ones in the comments section.
Simply duplicate the avatar and scale it down CMD+T, holding down Shift key in order to keep the proportions.
Images
We should really include a sample of how images will be displayed within our app. I'll put just one picture inside the rounded rectangle to show that images should have rounded corners.
Step 1
Pick the Rounded Rectangle Tool (U) and draw a rectangle shape between the vertical guidelines below the
Avatars group. After that pick an image, I used one fromunsplash.com, resize if needed with CMD+T and create a Clipping Mask.
Defining Colors
Finally we'll cover colors. A solid color palette is crucial and you should check color theory in order to better understand the meaning and importance of colors you use. We're opting to choose colors right at the end of the process because we now have a good idea of the element we need to style.
Step 1
Open up the
Colors group and choose one of the colors you have used for the buttons as a foreground color. After that, using a Rounded Rectangle Tool (U) draw a rectangle. Then pick a Horizontal Type Tool (T) and write down the title of the color, or what it will be used for e.g. "Primary Color" and provide the color codes in HEX, RGB or any other format needed. Create a new group, give it a name of the color and put all layers into it.
Step 2
Now simply duplicate CMD+J the color group and make as many color swatches as you need. Usually it is best to stick to four or five colors as more colors can make things look messy. Check out Kuler and COLOURlovers for amazing color palettes an inspiration.
For this tutorial as you see I've used "Primary" and "Secondary" colors, one color for body text and one for headlines, also white for input backgrounds. These are all shown below.
Congratulations You’re Done!
So there you have it. A simple web app user interface style guide. I hope you learned and understood the basics of creating a style guide, why some decisions were made and how they benefit the project.
If you have any questions, or have difficulties please don’t hesitate to ping me in the comments section!
