Establishing a cohesive look and feel for the site you're working on with your client is the most important part of the design process. Mood boards and style guides are fantastic tools to help you communicate design concepts with your client. There could be more than one step in your mood board and style guide journey. If this is a new client, or a client who doesn't really know what they want, a simple mood board could be the first step to help to find the right direction to go. You'll definitely improve your success rate when you share your first design comp if you've used a mood board and or style guide first.

Mood Boards

You may be a web designer, but at the start of the design process you should think of yourself like an interior designer. If you were redesigning a bedroom you wouldn't bring to your client complete ideas, like 10 different upholstered chairs, you'd show them options with color swatches, fabric samples, and drawings. The mood board is a way for you to organize all your creative ideas for your client to review. Mood Boards establish the aesthetic and visual feel of a site that will give you inspiration going forward. It'll save you time by addressing what could be huge issues early in the design process since you'll be able to establish the theme of the site early. You could create a mood board a number of different ways, and they don't necessarily need to have structure. They're often a collection of photographs and colors put together in a collage. You could use established sites like Pinterest or Evernote to convey your style ideas. Mood boards aren't always digital. Sometimes a physical mood board can work better for a client. After a mood board is created, a next step is usually some form of style guide. However, sometimes a mood board isn't a necessary step. You could start the design process with a style guide instead.

Style Guides

A style guide is just as important to your website design as the wireframes. They're a simple way for you to express more specific ideas that you have to your client. A huge benefit is that you'll be able to see clearly if your ideas are meshing together in the way that you intended. Separating your design elements like color and textures from the structure of your site will help your client focus on the questions you're asking them to understand, like font styles. It's much easier to tweak a color or font on a style guide before you implement a design. If you can get your client to approve a style, you can translate it the best way for the different devices, since it's also a waste of your time to make a mockup for all different screen sizes. Samantha Toy created a free style guide tool for web designers called Style Tiles. Style Tiles is a free download of a Photoshop style-guide-like template, with specific instructions in the layers to help you make your own. "Style tiles are the cornerstone of a solid design system that sets client expectations and communicates the visual theme to all the project team members," Toy said in a 2012 article she wrote for A List Apart. "Designing a system rather than site pages give your team the tools to create a living, breathing website." There's no "right" way to create a style guide. Different things are important to different projects. However, they should all include specific design details such as colors and typefaces used. You can add shots from other sites and explain why that look will be great for the site you're working on. Add a couple textures. Even though the direction of design is apparently now flat, textures can help break up the look of a site, especially if it's relevant to the theme you're trying to establish. Photography can be used to portray the theme of the site. You can use stock photos, photos the client's provided you with already or some that you've taken. More than one guide or tile could be necessary, so that you can portray a slightly different look for each design. Maybe you can make one version with bold colors, and another with more muted colors.

Brand Guidelines

The website you've created is not an island. It's not the only aspect of the brand. The designs that you've made have been created for a particular reason, so after you've presented your designs and they've been approved, it's a good idea to formalize everything in to a final style guide that can be referenced later. After the site creation, using the final approved style guide from the client, create an identity for the brand filled with rules and guidelines. This document is sometimes referred to as a "Graphics Standards Manual," "Brand Guidelines" or simply "Style Guide." For the purposes of avoiding confusion with the previously mentioned style guide, we'll refer to this document as the brand guide. The brand guide is important because it creates consistency throughout the organization you're working for, especially since there could be several offices, or several places your design could show up, like business cards, t-shirts, or letterheads. Brand guidelines are important to make sure the brand is carried through wherever the company is represented. The brand guide is intended to be a library of approved patterns that can be used to make new pages and features much more easily. Think of it as a checklist for future designers that will help them streamline their process. The brand guide will evolve as the company grows. In the brand guide, make sure to include rules for the logo usage, the colors and typefaces used as well as spacing guidelines. Something as simple as creating a horizontal version of a vertical logo just in case it's needed should be included too. The brand guide should also include different kinds of the colors used, like RGB, CMYK, the Pantone (if possible) and the hex. If you've established those colors for your client there won't be any guesswork by them later. Unacceptable usage of logos and colors should be addressed as well. You probably won't be able to address every incorrect situation, but as those come up, a decision can be made and then added to the official guide.