Style Guides in Web DesignBest Practices

Neha Goyal, Web Developer, AEIMay 1, 2017

AGENDA

1. What is a Style Guide2.Case for Style Guides3.How to create Style Guides

WHAT IS A STYLE GUIDE

1. Defines design standards for an organization2. Containers for institutional knowledge3. Components are not limited to Typography, Color, Code• Other examples: Editorial, Accessibility

4. Consists “Legos” that fit together to form templates

WHAT IS A STYLE GUIDE

1. Consistent visual language to facilitate collaboration2. Shared Vocabulary for an organization• What is an Isotope?• What do you mean by sentence-style capitalization?• How do I create a sidebar widget?• What is a call to action button?

3. Describes How To’s, Do’s and Don’ts

Examples

CASE FOR STYLE GUIDES

1. Provide a memorable user experience2. Savings of time and resources• Instead of designing a widget for the 15th time, it’s

already done.3. Tested and proven solutions to design problems

Questions

HOW TO CREATE STYLE GUIDES

1.Involving various teams in the organization

2.Name the project3.War rooms and Design Week

Questions

Questions

Questions

MOVING FORWARD

1. How do we document our institutional knowledge and design language?

2. How do we provide a delightful UX?3. How can a shared vocabulary help us?4. Desired by our stakeholders?

AEI INTERFACE INVENTORY

THANK YOU!

Questions