Creating websites is getting more and more complex and is usually not a one person job. It is important to ensure that the design is consistent and optimized to meet business objectives and create enjoyable experiences for users.
One of the ways to ensure that the team is on the same page when designing separate parts of the website or saving designs from developers is to create design documentation or a web design style guide.
It is beneficial to have a style guide in order to create a cohesive experience among different pages. Also, it helps to ensure that future development or third-party production will follow brand guidelines and will be perceived as part of the overall brand.
What is a Style Guide?
A style guide is a collection of pre-designed elements, graphics and rules designers or developers should follow to ensure that separate website pieces will be consistent and will create a cohesive experience at the end.
Why Is It Important?
It is extremely important when multiple designers are working on a big website or web app to ensure that they don’t interpret too much and don’t alter or adjust styles based on personal preference. In development, having defined elements of the website makes it easy for developers to reuse these elements. Moreover, it can make it easier because they will get what elements they have to code and will see exactly how they need to look from the start.
In order to make developers lives easier, it is the designer’s duty to include all possible interactions such as hover, click, visit and other states for buttons, titles, links, etc.
Creating a Web Design Style Guide
1. Study the Brand
First, you need to study the brand so that you understand what it stands for. Get to know the story behind the brand, observe the team and figure out the vision, mission and values of the company. It is important to dig deeper into the brand so the style guide you produce will visually and emotionally represent the organization.
If you’re a designer who can’t code, simply open Photoshop and give your document a title and a short description of what the document is and what it is for.
If you can code, it is better to create an HTML document with pre-coded assets so they can be easily reused.
2. Define Typography
According to Oliver Reichenstein, typography is 95 percent of web design.
You must get typography right because it is one of the most important communication tools between visitors and your website.
Set hierarchy and identify it. There are headline types: h1,h2, h3, h4, h5 and h6. The body copy, bold and italic variations. Think about custom copy that will be used for smaller links, intro text and so on. Provide font family, weight and color.
3. Color Palette
It is incredible how humans perceive color and associate hues with known brands. Think of Coca-Cola, I bet you see that red now.
Begin by setting primary colors for your style guide that will dominate your website, dominant colors should include no more than three shades. In some cases, however, you will need secondary and even tertiary colors to illustrate your user interface, make sure you define them too. Also include neutral colors like white, grey and black for the primary brand colors to stand out.
The voice that I am referring to is an actual copy. You have studied the brand before starting the style guide and found out that brand is youthful and trendy. If there are no directions for the voice of the copy, you have to define it. It can be a simple example given showing that the voice has to be professional yet funny and welcoming. Instead of stating “You’ve got 404 error” you can say “Oh boy, you’ve broken the interwebs. 404 error.” If the voice were more corporate, you wouldn’t do that. Brilliance hides in small things.
Icons have existed for thousands of years and are older than text and words. Take advantage of using icons in your projects because they will give an instant idea to visitors as to what’s going on and what will happen next. Picking the right icons will give more context to content than color palette, copy or graphics. When using icons, make sure to think about the target audience, religion, history, so you avoid misconceptions and misunderstandings. One more thing to mention, think about the brand and its values so you don’t use hand-drawn icons on a large banking website.
Pictures speak thousands of words. Make sure to include imagery that defines the style and direction of pictures the website should use. Once again, think about the values of the brand and its mission. For example, a water charity uses striking imagery that has strong emotion, good cause and calls to human emotion for them to be fortunate to have essential living commodities like water, food, electricity and education.
Forms are what make your website or web app interactive and dynamic so the user can enter the data and you can then manipulate it and do the work.
Make sure to establish a hierarchy and include possible feedback from forms — active, hover, add error, warning and success messages including things such as a password being too weak, email being not valid or simple success messages e.g. “email was sent.”
Buttons are a mixture of color palette, forms and voice. Rely on these previously created assets to create consistent looking and functional buttons with different stated designs.
How can spacing be in style guide? It is extremely important to mention the spacing. It can be in the form of a grid used for a layout; it can be spacing defined between headlines, buttons, images, forms and other elements.
Getting spacing right is important because it gives more breathing room to elements, and consistent use makes your work look structured and professional.
10. Dos and Don’ts
Last but not least: Make the DOs and DON’Ts section much like an FAQ showing the most common pitfalls and give examples of how things should look and work instead.
Here are some of the best style guide examples to use as inspiration when creating your own style guide. Keep in mind that these guides are highly influenced by the organization setup, their vision, mission and values and some decisions might be irrelevant or illogical in relation to what you are doing, so don’t blindly follow the things done there.
In the world of design, web UI, UX and interactive animation, we set the standards of design and quality. Internetout specializes in building highly standardized websites using the latest standard of design with tools and frameworks such as JS, React, etc. while providing an amazing user experience for your website.