# data[].attributes.body
Study the Brand

Define Typography

Color Palette

Voice

Iconography

Imagery

Forms

Buttons

Spacing

Logos

Fonts

Layouts & Grids

# data[].attributes.body
Ensure that designers don’t interpret too much and don’t alter or adjust styles based on personal preference

Provides an easy guide to refer to when handing over the project

Makes websites look professional and everything is done for a reason

Helps maintain control of the design

Makes it easy for designers to reuse elements and codes

Includes all possible interactions on a webpage

Avoids cheapening the design

# data[].attributes.body
A Style Guide is a collection of pre-designed elements, graphics, and rules that designers should follow to make sure that the website pieces will be consistent and with create a solid experience.

# data[].attributes.body
Designers need to study the brand to understand what it stands for and to understand the story behind it. It is important to observe the team and figure out the vision, mission, and values of the company. The style guide produced must visually and emotionally represent the organization. Designers that can’t code should open Photoshop and give the document a title and a short description of what the document is for. Designers that can code should create a html document with pre-coded assets that can be reused.

# data[].attributes.body
Typography is 95% of web design. Designers must have an accurate typography because it is one of the most important communication tools between visitors and the website. The hierarchy needs to be set and identified.

# data[].attributes.body
Designers should begin by setting primary colors from the style guide that will dominate the website. Dominant colors should have a max of three shades. Sometimes, there needs to be secondary and tertiary colors to illustrate the user interfaced. It is important to include neutral colors like white, grey, and black for the primary brand colors to stand out.

# data[].attributes.body
Voice is referred to an actual copy. If there are no directions for the voice of the copy, it needs to be defined. Defining the tone is a great way to keep a brand consistent.

# data[].attributes.body
It is important to take advantage of using icons in projects because they will give an instant idea to visitors as to what is going on and what will happen. The right icons with give more context to content than color palettes. Designers should make sure to think about their target audience, religion, and history to avoid misconceptions and misunderstandings.

# data[].attributes.body
The imagery should define the style and direction of pictures the website should use. Designers should establish a tone in their photographs and images. The values of the brand and mission should match of with the imagery.

# data[].attributes.body
Forms make the website interactive and dynamic so the user can enter the data and the designer can manipulate it and do the work. It is important to establish a hierarchy and include possible feedback forms.

# data[].attributes.body
Buttons are a mixture of color palette, forms and voice. Designers can rely on previously created assets to create consistent buttons with different stated designs.

# data[].attributes.body
Spacing can be in the form of a grid used for layouts, defined between headlines, buttons, images, forms, and other elements. Spacing is important because it gives more room to elements, and it makes the page look structured and professional. Designers can include a spacing reference, especially for the logo. This way, the space will be around the logo if it is big or small.

# data[].attributes.body
Design  •, T. L. (2017, March 09). How To Create a Web Design Style Guide. Retrieved October 10, 2017, from https://designmodo.com/create-style-guides/

Neville, K. (2010, July 21). How To Design Style Guides For Brands And Websites. Retrieved October 10, 2017, from https://www.smashingmagazine.com/2010/07/designing-style-guidelines-for-brands-and-websites/