By failing to prepare, you are preparing to fail – Benjamin Franklin.
Every project you undertake must start with a solid plan. Without a plan, you’re just setting up yourself for an epic fail and nobody wants that. As a web designer, you must start every design project with a style guide, which acts as a plan for the lifetime of that particular project. But before we go far…
Why Do You Need a Web Design Style Guide?
As you can tell from the title, a web design style guide is simply a blueprint for building and maintaining any particular website or web app. It is a set of guidelines that define the structure, layout and function of your website. In other words, a web design style guide will help you to:
- Create consistency across your website or web app
- Establish design guidelines that will serve future designers, developers and business partners
- Boost the maintainability of your website(s)
- Come across as a professional web designer
- Provide clients and developers with a better understanding of how a website or web application is put together
- Standardize CSS
- Easily A/B split-test your design because you will know exactly what is failing
- Prevent cheapening the design
- Encourage cooperation within and without your team
But even with all these benefits and the fact that web design style guides aren’t new to web designers, they are only gaining in popularity now. Well, this is an encouraging trend and more designers should embrace style guides as they will help you to save time and effort while creating a consistent and professional online presence for days, months and years to come.
At the same time, don’t feel locked in as web design style guides can be edited and updated on per need basis. Looking to change fonts later on? Colors? Put it in your style guide. With these few points out of the way, how about we create a web design style guide for your current or next project?
How to Create a Web Design Style Guide
Depending on your web design project, a style guide can be a one-page affair or stretch across several pages. The overall principle is to ensure that every tiny aspect of your design project is covered. Let us start with identity guideline, and get right into it.
Brand Overview
You will never confuse McDonald’s I’m lovin’ it website with BBC’s site, and that’s not because the latter is a media powerhouse and the former a food and beverage business. You can tell the two apart because each has its own identity. Identity? How do you define brand identity in a web design style guide?
You start with a strategic brand overview. As Kat Neville loves to put it, your strategic brand overview “…should be short and sweet. In as few words as possible, make clear the vision for (your) design any keywords people should keep in mind while designing.” A strategic brand overview is the vision that will guide designers and developers working on your design. It’s the vision you have for the website and the business it represents.
Logo Guidelines
A logo is a crucial part of any business whether online or offline. Your style guide should provide clear logo variations and sizes. On logo variations, specify logo designs and colors that are allowed. On sizes, ensure logos aren’t too small. Additionally, define the things designers can and cannot do with your logo. In this age of responsive design, you can also define which logos to use on various devices.
Choose Your Colors
The colors you use on any given web design project depend on a couple of things such as:
- Personal preferences
- Clients’ preferences
- Existing brand colors
- Type of products/business
- Probable color combinations (There are color combos that will never look)
Pick your colors and all the shades/tones you’d love to use (on your project) and outline them in your style guide. Have a difficult time with the color codes? You can take advantage of the numerous color charts available:
- HTML Color Codes
- HTML Colors – W3Schools
- Color Chart – ColorPicker.com
Define color palettes and what each color should be used for. Specify where and when to use various colors.
Choose Your Typefaces
A custom font speaks to who your brand is or what it stands for and creating custom typography is a skill that can take years for designers to master. – Kyla, Dribbble Inspiration: Typography
To emphasize on Kyla’s words, typography is an integral part of any great web design. The font you choose will affect the performance of your website in a number of ways (i.e. conversions, UX etc), so you need to be careful. Your web design style guide should define the fonts to use. Further, it should get detail-specific and provide guidelines for things such as font size, color, line height, font spacing, font variations (headings, body, links, etc) and more. The style guide should detail which font to use and when and where to use it.
Choose Your Grids and Layouts
Seeing that a web design style guide is what it is, your own personal style guide should endeavor to provide a clear presence of structure. We also know that great web design starts with a grid or a layout.
Make sure columns, heights, widths, sections etc are easy to understand. In this time of responsive design, you should provide all guidelines for a fluid grid. If you don’t know it already, responsive grids are fun. On top of that, they facilitate consistency and promote the application of best practices when working on the design.
Specify details such as margins, padding, border radii, white space and gutter spacing among other things. To help with this, you can build generic layouts to save time and effort you’d otherwise waste creating designs from the ground up. Add these generic templates to your style guide.
Prepare your Navigation Structure
Navigation can mean all the difference between a successful website and a flop. Navigation is a crucial element of your website, and should provide easy access to all the resources on your site. Navigation that doesn’t do this has already failed.
Does your navigation leave room for new pages that might be added in the future? Does your navigation utilize a clear structure that promotes easy retrieval of info? How is the spacing around your navigation items? Outline these and other details in your style guide. This way, designers will know what to do with new menu items.
Imagery Guidelines
What type of images will you use on your design? Are you concerned with image resolution? How about flat graphics and skeuomorphism? How will you use icons on your website? Where from will you (and future designers) source images? All these details should go into your web design style guide.
Illustrations
The above pointers provide the theoretical know-how you need to create a style guide. The following examples will show you what a style guide is supposed to look like:
- BBC Global Experience Language (Download style guide from the sidebar)
- Paul Lloyd Style Guide
- Oli Studholme Style Guide
- Starbucks Style Guide
- Amherst College Style Guide (one-page affair 😉 )
Conclusion
We’ve just pointed you in the right direction as far as creating web design style guides go. Do you feel we left out something important? Please let us know in the comments below!
