Originally published at: https://community.envato.com/the-importance-of-web-design-style-guides/
As you can glean from the title, web design style guides are simply a plan for building and retaining a particular website or web app.
They’re usually made up of a group of guidelines that establish the structure, layout and function of your site. In other words, a web design style and information pack will help you to:
- Generate consistency across your web site or perhaps web app
- Establish style guidelines that will help future designers, developers and business associates
- Boost the maintainability of your website(s)
- Come across as a professional web designer
- Give clients and developers an improved understanding of just how a site or web app is put together
- Standardize CSS
- Easily A/B split-test your design because you will then find out what, specifically, is working and failing
- Help you to avoid cheapening the style
- Encourage cooperation within and outside your team
More web designers should embrace style manuals as they will help to save time and effort while creating a steady and professional online appearance intended for the months and years to come.
Although some people may feel locked in by web design style guides, it’s important to remember that they can be edited and updated on an as per required basis. Looking to modify fonts or colors down the line? Set it in your web design guide.
So, how should you create and implement a web design style guide for your current or next project?
Well, depending on your web design project, a style guide can be a one-page affair or stretch across several pages. Let’s get into it by starting with your brand’s identity guidelines.
Brand identity
Systems will never confuse McDonalds’ website with, say, the BBC's. Obviously one’s a fast food company and the other is a multimedia goliath. But, aside from the differences between what these two companies do, they’re completely different in the way they present themselves. These are two companies with completely different identities.So, how do you define a brand identity in a web design style guide?
You start with a strategic brand review.
As Kat Neville likes to put it, the strategic brand overview inch… should be short and sweet. In as few words as possible, communicate any key themes people should bear in mind when designing. “A prepared brand overview is the vision that will direct designers and developers operating on your design. It can be the vision you have for the website and the business it represents.
Colors
Choose Your ColorsThe 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 good together)
Pick your colors and all the shades/tones you intend to use in your project and outline them in your style guide.
Having 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
Typefaces
When anyone visits a website you’ve designed, the odds are that they don’t care much about the color combination, images or sounds but instead immediately look at the text, or font.No matter how many elements you’ve included in your website, everyone relies on text to accomplish whatever they’ve come to the site to do. Therefore it’s important to carefully consider a font that is both easily readable and that represents your brand and the site’s broader design well.
Grids and Layouts
Since this is your web design style guide, you should be aiming to create a clear structure, which usually means designing to a grid.Make sure columns, heights, widths, sections etc are easy to understand. In this era 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.
Designate details such as margins, padding, border radii, white colored space and gutter space and a lot more. To help with this, you may build universal layouts just to save time and effort you’d otherwise waste creating designs from the ground up. Add these types of generic templates to the style guide.
Learn more about Grid Systems with Tuts+
Navigation Structure
Navigation can mean all the difference between a successful website and a flop.Navigation is a crucial element of your website, and really should provide easy access to all the content on your site. Navigation that doesn’t do this has already failed.
Does your navigation menu:
- Leave room for new web-pages that might be added down the road?
- Utilize a clear framework that promotes easy access to info?
- Leave enough space around other navigation items so that they're easily readable?
Images and visual language
Which kind of images will work with your design? Are you concerned with image quality? How about flat design and skeuomorphism? Are you going to incorporate icons into your website? Where will you (and future contributors to this website) source images? These details should go in your web design style guide.
Illustrations
Illustrations are an effective way of enhancing your site design to command the attention of visitors. illustrations have the power to add a theme to the website if you know how to use them properly. Illustrative websites have a promising future as the SVG (Scalable Vector Graphics) is getting popular.The following examples will show you what a style guide should look like:
- BBC Global Experience Language (Download style guide from the sidebar)
- Paul Lloyd Style Guide
- Starbucks Style Guide
Summary
And there you have it. The most significant things to consider when putting together a web design style guide.Don’t agree or think we’ve left something out? Let us know in the comments below!
