Web Design: Creating a Web Design Style Guide | Jake Fleming | Skillshare

Web Design: Creating a Web Design Style Guide

Jake Fleming, Designer & illustrator

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
8 Lessons (36m)
    • 1. Introduction

    • 2. Your Assignment: Create a Web Design Style Guide

    • 3. Type and Tone

    • 4. Layout & Space

    • 5. Color

    • 6. Icons and Images

    • 7. Forms and Buttons

    • 8. Sample Page


About This Class

Join me in this essential web design class on creating a style guide. You will learn the building blocks for a beautiful and usable website, and how to develop a style guide for your site that touches all necessary elements: type, space, color, icons, imagery, forms, buttons, and more. This class will equip you with everything you need to succinctly design and build the vision for you or your business on the web, and you'll finish the class with a complete web style guide and a sample page for your website.

Follow my work on:
Instagram | Twitter


1. Introduction: Hey there, I'm Jake Fleming. I'm a designer and front end developer by day on co founder and designer ATP. I saw Games by night in this class is creating a Web design style guide. I'll be talking first about the why and the wind to use a style guide on what exactly should be included. Then we'll dive into the process of actually creating the guide. Let's get started. 2. Your Assignment: Create a Web Design Style Guide: So what's a style guide, anyway? And why in window I need one. A style guide is a collection of pre design elements, graphics and rules to follow to help make sure each page of the website will look and feel consistent to the sites. Users think of a style guide is a toolbox, and yourself is the handyman. When a handyman needs to build something, he's always going to go to the toolbox and choose the right tools for the job. He's not going to buy new tools every time needs to build a chair. And if that handyman has other people helping and build chairs, he'll want them all to look the same. So he will not only have a set of tools for them to use, but a set of rules as well. When you're going to build a Web page, you're going to have this guide. You can reference and choose the right tool for the job, except instead of hammers, nails and measuring tape, you'll have typography, components and spacing. Having a style guide is important, especially when you're on a team with multiple designers and developers, all working on a massive website or an application with many different states. The guide will help to ensure that people aren't just making stuff up as they go. There will be times when the components you have in your style guide won't do the job, and you have to add something else. But don't worry. That's perfectly fine as long as the addition is truly needed. If you're able to write HTML and CSS or even better yet, SAS or have a team member that can, it would be a great idea. Dakota belie version of the Style guide where developers can go on grab actual code while developing your designs. If you're trying to create a guide for components that already exist but aren't organized in any specific way, this course can help you do that. But I think you'll also find this course helpful if you're starting from scratch on a new project. So now that you kind of understand the concept behind why you would actually want to use a style guide, let's talk about the different components of style guide should contain before he gets started. The first thing you'll want to consider is the brand. Chances are if you're taking this course you have a site in mind that you want to create a style guide for what will the site represent? What's the vision, the mission, the values of that site? These things should be kept in mind during the entire process. Next, with the brand in mind will want to define the typography. Typography is one of, if not the most important part of a website and can be tricky to get right. I won't be going into the various theories behind. Typography in this course will just be focusing on defining a base size color and wait for body copy links, buttons, headlines, etcetera. Tone of voice is also important. Instead of using filler text like Laura MIPs, um, it's better to write content with the tone that aligns with your brand error text on an input. For example, instead of using Laure MIPS um or simply typing, this is an error. Try something like Sorry, this field is required. Creating a general rule for spacing is a good idea. This will help you to find your grid space between elements sizes for buttons, etcetera. Color is very important to identifying your style guide. You don't want 50 different shades of blue showing up on your massive website because developers simply didn't have the hex code on hand. By defining primary colors for things like buttons, links and nap bars as well a secondary colors for alerts, errors and labels. You can avoid that headache. Icons can be a great help and communicating information to the users of the website. Some air text in a box might not be clear to the user that something is wrong, but putting alert icon next to it and it might be more clear. It's important that the icons you choose for your site fit the brand. If you're trying to create a relationship of trust and stability with your website, you probably want to use clean and simple icons. If you're trying to create a hip, fun and vibrant atmosphere, maybe you go with something more bold and colorful. Imagery can be used in a variety of ways on a hero image, accompanied by a call to action above a block of text to help further the readers context or simply by itself, the image could be a stock photo, a snapshot of teammates for the about page or illustrations helping to describe product. In any case, imagery should fit the brand and be used as a tool to engage users. It's good to have examples of these situations in your style. Guide forms allow users to interact with your site, whether they're filling out a contact form or entering, and credit card information forms are crucial. You want to make sure all of the different states air clear to the user. What's it look like when the user clicks into an input or enters an invalid email address? What's the tone of voice being used when giving feedback to that user? Buttons can be created by making use of our color, spacing, typography and tone choices. We'll also need to account for different states just like we do for the forms. You can use the same principles used to create forms and buttons to create all your other components, like alerts and nap bars. So now that we know what goes into a style guide, let's get started creating one 3. Type and Tone: in this video will be working on a style guide for a little side project I've been working on called Quote Boy. The idea behind the site was to help freelancers more accurately arrive at an hourly or per project rate to charge clients. Here's the logo for quote boy. You can see that it has a fun vibe to it. The overall brand is cool, charismatic and geared toward freelance designers. I want quote boarded, feel like an old friend that you turn to for really solid advice. In this video, we'll be talking about typography and tone. We start with typography because if you're making a site or a nap, chances are you'll need the users to read some text. Let's start by choosing a fun. I want something that simple, sturdy, readable, has lots of weights and pairs well with the quote boy logo. When choosing a fun, I usually head over to Google's font collection and see what I can find that might fit my needs. Google has a ton of free to use fonts. You can see them in action. Choose the different weights of a particular fund you'd like to use, download them or If you're just looking to use them in a site, get a snippet of code to answer into your HT male's head tag. I have a certain fought in mind Roboto. It's simple, very readable and has a lot of weights. Let's use the live preview to try out different sizes to find a size. We think we'll look good for our body copy. 16. Looks pretty good. That's pretty standard for Web sites, so we'll keep that in mind for later. Let's download her front now and install it. For those of you who don't know how to do that, just go to the folder that you just downloaded. Open it up, select all the font files and then right click and open them with font book. Then you just quick the install button, and if you already have it installed, you'll get this weird air. Um, but I'm just gonna install them again, and there you go. It's installed, and now we can use it inside of illustrator or whichever program that you're using. Okay, I'm just gonna get that out of the way. All right. Now let's foot back to Illustrator and let's create a new document Let's also go ahead and name it, and I'm gonna set my art board up at 10. 24 pixels by 7 68 pixels. Also, I'm gonna go ahead and set up our documents grid, so I'm gonna go up to Illustrator Preferences, Guides and Grid. When we're looking through Google's fonts and trying out different sizes for our font, we landed on the number 16. I'm going to cut that number in half and set our grid up to have a line every eight pixels and we can preview it and there's our grip. Now that we have a great set up, we can start trying to line some body text and headlines. And the reason we set up a grid was because while we're creating our style guide, we want to try and maintain a pleasing vertical rhythm. That means we're gonna aim for every object or piece of text to fall on one of these guidelines or nicely in between. Okay, so let's go ahead and draw a text box. And while we're going through these steps, I'm not really going to be explaining how to use illustrator. I'm assuming that you already know how to use it or you have some other program that you're using. Just going to go and type some text in here. And let's make sure our font is roboto, uh, at size 16 and we'll keep it at the regular rate. It's gonna move this down to our grid. It might be tempting to use a bunch of Lauren Gypsum in your style guide, but it's a better idea to try and write some copy in a tone of voice that fits the brand and actually informs the person viewing the style guide. So let's change this from this is some text to something more meaningful, something that describes the typography for spaces. Between are paragraphs. I'm gonna choose a number that's 1.5 times our body copy size, which will be 24 and that will ensure that our paragraphs have a nice space between them, but also that our lines of text will still be falling on the grid because 24 is a multiple of eight. All right, so let's also add a heading above this just to give it sort of ah article feel from a blogger or something. And I'm gonna choose 32 pixels for our size of our headline kind of. Just line it up to the grid. Let's also make it bold. That's looking pretty good, all right, now that we're at it, let's go ahead and make our headline sizes. So I'm just gonna duplicate this and drag it over to the side of the screen. Shift this over a bit. Call this headline one. Cool. So let's make a second headline. It's going to duplicate this and drag it down. Gonna just subtract eight pixels and get 24 that'll be our second headline text. You can choose to space these things however you want, but just remember, it's a good idea to have them fall on the grid to maintain a nice vertical rhythm. So go ahead and repeat this step up to maybe six headlines if you like. You don't have to have all six, but websites tend tohave H one h two h three h for H five h sick. So I usually like to include all of those in my style guide. Now, not every number that you choose has to be a multiple of eight. Just make sure that the space it's occupying is a multiple of eight. So say, for example, this headline is 20 pixels, but the space it's occupying, it's 16. They might go over that with a letter like a G it's descended. Might fall below the line of your grid. But that's fine. Just a long as the baseline of your type is falling on the line. You're good, or you could choose to move it down in between these three grid cells. It's not an exact science. Just as long as you're trying to stay true to the grid. He'll be OK. Let's create a section heading now to identify. This is the typography section of the style Guide. Since we'll be identifying a bunch of different components on a single page. So I'm gonna make the section heading. I don't know the headline three size. It's kind of put it up here. I'm just gonna move this down of it, all right? And when you're all done with this section, you might have something that looks like this. I want to also mention that when we're creating our style guide, we want to make sure its super organized. If somebody else opens up this document you want them to be able to find what they're looking for quickly. So I'm just going to group some of these layers together and name them accordingly. Okay, in the next video, we'll be talking about layout and spacing. 4. Layout & Space: in this video will quickly be going over how to decide on space between objects as well as general dimension of objects. I'm just gonna go ahead and make our art board a little bit bigger. Let's also duplicate this section heading. It's usually a good idea to include a little description about the section. This helps to inform other viewers of the style guide about what the section is, why you made the decisions that you made and helps them stick to your vision. So say one day you aren't the designer for this app or website, someone else takes over. They will be able to go into your style guide and make use of it. So I'm just gonna duplicate some of this body text we have up here and repurpose it for our description. In this section, we're going to be demonstrating space between objects. You know, when you have columns of a grid, how do they fall next to each other? What does that look like? So I'm just gonna type up a little description about that. So here I've typed when deciding on the amount of space between objects as well as their widths and heights use multiples of eight. So let's go ahead and draw some rectangles on our grid. I'm gonna go ahead and turn on the pixel grid. You'll see me doing this from time to time to really help me get these objects on the grid . You know, exactly, let's make these columns 48 pixels tall. I'm just gonna make a few arrangements of different column choices. I'm choosing to put 16 pixels of space between each column. Now I'm basing this on our body copy size. If you chose a different body copy size, for example, maybe you chose 14. You can use multiples of seven instead of multiples of eight for your grid and everything else. So instead of 16 pixels of space between objects, maybe your choosing 14 pixels of space between objects or maybe even seven pixels, it's all up to you. Like I said before, it's just best that you stick to a grid. This will ensure that everything you're creating has a pleasing vertical rhythm. After you're done, you might have something that looks like this, and you can see I added some text here to describe some of spacing choices we made below This section is more useful in a live style guide that's coded in HTML and CSS because people can see how these with change on different sides screens but for our static style guide will just be keeping it super simple. This method of creating objects based on the body text will come in handy in every element that we had to the style guide. It will help ensure that we have a nice vertical rhythm. Every piece will fit together nicely also something that I like to include. My style guide is a layer called space, and that's where I can put little squares to help me a line things to the grid. As you can see, I've got these little squares of 48 pixels, and I'm using them to determine space between our different sections. Also, be sure that your organizing this section just like he did the typography section a massive file like this can get out of hand really fast. So it's important to keep all of your layers organized. All right, so that's pretty much it for this section. Next, we'll be talking about color 5. Color: Okay. The section we're gonna be going through right now is all about the color. I've opened up a set of swatches for our quote Boy brand. I have them up over here and remember in the logo file that I showed you earlier. We have the screen color and that green is going to be our primary color. And I'm just going to type up a short description about what the goal of this section is. So I've written will use the primary green color for highlighted elements like buttons or links and dark grays for copy. Secondary colors will be for things like airs and alerts. So now that we know the goal of this section to demonstrate the colors, let's go ahead and make some swatches below. I'm going to choose our primary green and make a square. I usually like to display caption below the color swatch that shows the exact hex code of the color. So when people view this style guide and are looking for colors, they will know exactly what color to choose. Now you might notice that I have multiple shades of the primary and secondary colors that I'm not going to add to the style guide, but I will use them for things like accents. For example, I'll make the hex code. Caption. I just made a darker shade of the primary color and let's make a background for the hex code and will make that a light green. You can display these colors, watches any way you'd like. It's not an exact science. And now that we have a green color to find is a swatch, we can go ahead and do the same for the rest of the colors. And like I said before, I'm going to be separating these different colors into a couple categories. So I'm going to go ahead and make a subheading for this section for each of the different categories. All right, once you're done creating those other swatches and making sure the hex codes there correct , you might have something that looks like this. It's looking pretty good. Let's go ahead and add some color to the rest of the style guide. I'm going to start with the text to make our section heading. Stand out more. I'm gonna make those are primary color. Let's use our primary gray for the body text and will make these columns a light gray. Feel free to use your own colors along the way. Next, we're gonna talk about iconography and imagery. 6. Icons and Images: with the brand in mind will think about iconography and imagery. I've created a small set of icons for a quote book brand, and I'm gonna go ahead and open that now. If you have a Nikon set that you've downloaded or created yourself that you want to use, go right ahead. Also noticed that I've given this section a little description to describe what are icon should look like if down the road someone wants to come and extend our icon set, they'll have a better idea of what the icon should look like. So I'm going to go ahead and just open up our I guns that I'm just going to select them all and paste them into our style guide. Now we could simply just align. These two are great now, like this. You know, your icon set might not be already aligned to the grid. You might have to tweak him a little bit. Sometimes I like to make a little backdrop for the icons just to separate them from one another and make them stand out a bit. So I'll go ahead and do that. Now you'll notice that I'm always staying true to our grid. Look, that's pretty much it for that section. Now we can grab icons as we need them when creating our pages. Next, we'll add in examples of what our imagery should look like throughout our site. I've created some simple images based on our brand colors. Let's copy and paste them into the style guide and align them to the grid. I'm also going to resize them to make them a little bigger. All right, that's looking pretty good. Now when we need a new image, weaken, reference the style here, or simply use one of these pretty simple right. 7. Forms and Buttons: using all of the things we created earlier. We can now tackle forms and buttons in this section. We want to show all the form elements will be using for our site and all of their different states. For four moments. We want to show their default state. They're focused state and their air state. Let's start by creating a label. I'm going to repurpose this heading six for our label. Like I mentioned before, we don't want to just use dummy text like text input for our label. Let's make it something like email address. All right, let's create a rectangle for a text input and align it to the grid. I want to be 40 pixels tall. Let's choose a light gray for its background. Let's also show what the placeholder text would look like. I'm gonna make that 16 pixels and also the regular weight. Let's also make it a light gray and just for fun. Let's add Nike onto the right. Let's grab it from our icon section. This label looks a bit small to me, so I'm going to go ahead and bump it up to the next headline size. That looks a bit better cool. So that's a basic text input. Let's do its focus state. Now let's make a green border based on our primary color and change the icon to that color as well. I'm also gonna drop out the great background and just make it white. We also want to show what the text looks like when you're typing into it. So let's change this to match our body text. Let's also added value like somebody type something into it. Cool. Let's repeat the same basic process for the air statement. You can repeat this process for all the other form elements you might need. I've chosen to include text inputs, selects text areas, check boxes and radio buttons. Add whichever form elements you think you might need, but make sure they're aligned to your vertical grid. Let's move on to buttons. This will be the same basic process. We want a primary button that we use for the main actions on the page and, um, or secondary flat button. That sort of looks like a link that we use for less emphasized actions suggests, like the text input will draw a rectangle aligned to the grid. It's usually a good idea to make your buttons as tall as your text inputs, so I'm gonna make my button rectangle 40 pixels tall. This is because buttons and inputs often appear next to each other, and you want them to be aligned. Let's make the buttons background our primary color. We'll also make the button text 16 pixels to match our body text, but let's make it white and gold. I also like to make the button text upper case to make it stand out from the body text, especially in the case that you have a flat button with no background. Next will duplicate the button for its hover state. I'm just going to choose a light green and add a slight drop shadow. I'll make the drop Shadow Light grey for Barce watches. Let's duplicated again and make the active state. I'll choose a darker green for the background and an even darker green for the inset shadow . This kind of makes it look like it's being pressed down. One last state that you'll want to include is the disabled state. If you think you might have disabled states for your inputs above, it would also be a good idea to include those states as well. I'm not really planning on having any disabled states for my inputs, so I'm just going to leave those out for now. If we need to add them later, that's completely fine for the disabled state. I'm going to choose a really light green for the background. I'm going to make the text like green as well, but still darker than the background. Okay, that's looking pretty cool. We can repeat the same basic process to create our flat looking buttons. As you can see, this isn't rocket science. It's actually really, really simple. There isn't any reason to not create a style guide. It helps you think critically about what you're including in your sight and also serves as a library to reference and take from when creating pages. If it's a frequently used element, like alerts or a nap are, it probably belongs in the style guide. You can use these principles to create any element and added to your style guide. Next will be learning how to take all these great elements we've created and put them into a sample page 8. Sample Page: Now that we have all these great elements in our style guide, we can put together a sample page. Let's try creating a simple sign up page for quote boy. Sometimes when creating a page, you might find yourself needing to add things that don't exist in the style guide. You can use your best judgment to decide whether the element you're adding to the page belongs in the style. Get or not, just try and be vigilant about not adding new elements. If there's already a clear to find element for that use case. Okay, so let's get started. Let's create a new document with an art board said at 10 24 by 7 68 I'm just gonna name it mock up. Okay, so the first thing we're gonna need is a nap bar. So let's head over to our style guide and grab that and pasted in. Let's align it to the grid and adjust it to fit our needs. If you wanted to, you could change these links, but I'm just gonna leave them how they are for now, that's looking pretty good. I think I want the background of her side to be a dark green, so I'm just gonna make another rectangle and paste it behind her nap bar. I'm going to lock this layer into place so I don't mess with it by accident. Next, I want to put a form on the page that allows the user to type in their email address and password and hit a button to submit the form. I think I want the form to be in a white box. This is one of those situations where I'm gonna add something that doesn't exist in the style guide. If I think we might need this element in the future, then I could make a new section called Panels or something in define its use cases there. This might also be a situation where I could benefit from those pink spacers we have in our style guide. I'm going to use them to help me position the panel below our nap bar. Looks like I almost guessed right. I think I want this to be a little bigger. Let's go grab an image from the style guide to put inside this panel to make it seem a little more exciting. I'll also tweak the size a little bit and change the colors to match the page. Let's also add a headline to this panel to help indicate that the form below is to help users sign up. Now let's go grab some inputs from our style guide, and let's also add a call to action button at the bottom that's looking pretty good. Let's also add a help link at the bottom, just for fun. Great. So there you have it. We've created a sample page from some of the elements from our style guide, and you can kind of see how having a guide on hand when creating pages is a huge help. Hopefully, with these basic guidelines, you can go on to create your own very unique Web style guide for each of your future projects to help you keep yourself and your team unified When designing new pages for your site, please share your work in the forum. I'd love to see what you come up with. Feel free to add components and your own spin on the style guide. After all, this isn't an exact science. Thank you and see you next time