How to make a Web Design Style Guide.

01/20/2020

Creating websites is becoming increasingly 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 way to make sure the team is on the same page when designing individual parts of the website or saving developers' designs is to create design documentation or a web design style guide.

It is useful to have a style guide to create a coherent experience between different pages. It also helps to ensure that future development or production by third parties follow brand guidelines and are seen as part of the overall brand.

Luke Clum has touched the surface of using style guides as your first step in web designs last year and I would like to elaborate on creating a usable style guide for web projects for your projects.

What is a style guide?

A style guide is an accumulation of pre-designed elements, graphics, and rules that developers or designers must follow to ensure that the individual website parts are consistent and ultimately create a consistent experience at the end.

Why is it important?

It is extremely important when multiple designers work on a large website or web app to ensure that they do not interpret too much and do not adjust or alter styles based on personal preference. In development, defining elements of the website makes it easy for developers to reuse these elements. Moreover, it can make it easier because they get which elements to code and will see exactly what they should look like from the start.

To make life easier for developers, it is the duty of the designer to record all possible interactions such as float, click, visit and other buttons, title, link, etc.

Create a style guide for web design

Study the brand.

First, you have to study the brand so that you understand what it stands for. Get to know the story behind the brand, observe the team and discover the vision, mission, and values ​​of the company. It is important to dig deeper into the brand so that the style guide that you produce will represent the organization visually and emotionally.

If you are a designer who cannot code, simply open Photoshop and give your document a title and a brief description of what the document is and what it is intended for.

If you can code, it is better to create an HTML document with pre-coded resources so that they can be easily reused.

Define typography.

According to Oliver Reichenstein, typography is 95 percent of the web design. You must have typography correct because this is one of the most important communication tools between visitors and your website.

Set up and identify hierarchy. There are headlines types: h1, h2, h3, h4, h5, and h6. Then main text, bold and italic variations. Consider a custom copy that will be used for smaller links, introduction text and so on. Specify font, weight, and color.

Color palette.

It's incredible how people perceive color and associate shades with well-known brands. Think of Coca-Cola, I bet you can see that red now.

Start by setting primary colors for your style guide that will dominate your website, dominant colors should not contain more than three shades. In some cases, however, you need secondary and even tertiary colors to illustrate your user interface, make sure you define it too. Also include neutral colors such as white, gray and black so that the primary brand colors stand out.

Voice

The voice I am talking about is a copy. You studied the brand before you started the style guide and discovered that the brand is youthful and trendy. If there are no instructions for the voice of the copy, you must define it.

Iconography

Icons have been around for thousands of years and are older than text and words. Take advantage of the use of pictographs in your projects because they immediately give visitors an idea of ​​what is going on and what will happen next. Choosing the right icons gives more context to content than the color palette, copy or images. When using pictographs, consider the target group, religion, history, so that you avoid misconceptions and misunderstandings. One more thing to mention, think of the brand and its values so that you do not use hand-drawn icons on a large bank website.

Imagery

Photos say thousands of words. Be sure to add images that determine the style and direction of images that the website should use. Think again about the values ​​of the brand and its mission. For example, a water charity uses striking images with strong emotion, a good cause and evokes human emotion to be lucky with essential living products such as water, food, electricity, and education.

Forms

Forms make your website or web app interactive and dynamic so that the user can enter the data and you can then manipulate it and do the work.

Be sure to set up a hierarchy and include possible feedback from forms - active, hovering, adding error messages, warning and success messages, including things like a password that is too weak, email not valid or simple success messages, eg "Email has been sent. "

Buttons

Buttons are a combination of color palette, forms, and voice. Rely on these previously created assets to create consistent-looking and functional buttons with different indicated designs.

Spacing

How can spacing be used in a style guide? It is extremely important to state the spacing. It can take the form of a grid that is used for a layout; it can be a gap defined between headings, buttons, images, forms, and other elements.

Getting the right spacing is important because it gives elements more breathing room and consistent use makes your work look structured and professional.

Dos and Don'ts

Last but not least: create the DOs and DON'Ts section just like an FAQ with the most common pitfalls and give examples of how things should look and work instead.

Conclusion:

You need to study the brand for which you create a style guide, make sure that different parts of the design are correct and ensure that a style guide is consistent and contains all possible scenarios to turn designs into working products.

This article has been shared by web designing training in Chandigarh on how to create a web design style guide. I hope you liked this article.

CBitss Technologies, sector 34A, sco 23-24-25, Chandigarh, 160022.
Powered by Webnode
Create your website for free! This website was made with Webnode. Create your own for free today! Get started