style guides: what is it. the benefits. how to get started

DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES PRESENTED BY MOBOMO 1 / 37

UnderstandingStyle Guides

What is it. The Benefits. How to get started.


I’m Scott ThomasUI Designer at Mobomo.


One of The Fastest Growing Digital Agencies in DC.

Webby Award Small Business Subcontractor of

the Year

Inc. 5000 4 years in a row

WE W OUR CLIENTS From government to finance to health care to non-profit.


What’s a Style Guide?


BIN OF POSSIBILITIES REFINED SET OF IDEAS RESULT

Image Source: http://atomicdesign.bradfrost.com/chapter-4/

SIMPLIFIES THE CHAOS OF CREATIVITY

http://atomicdesign.bradfrost.com/chapter-4/


1. Creates Consistency

2. Reduces Code

3. Decreases Updates/Production

4. Scalable

5. Establishes a Common Language

SAVING TIME & WORKLOAD

Image Source: http://atomicdesign.bradfrost.com/chapter-4/

http://atomicdesign.bradfrost.com/chapter-4/


1. Less JIRA Tickets

2. Reduced Revisions

3. Better Performance

4. Fast Iterations

5. Documentation

6. Less Stress

THIS TRANSLATE TO


Not All Style Guides Are The Same.

However,

DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES 10/ 3710

BRAND STYLE GUIDE

• Logo Usage • Colors • Fonts • Application

Image Source:http://www.fastcodesign.com/3039854/how-nasa-stays-beautiful

http://www.fastcodesign.com/3039854/how-nasa-stays-beautiful

DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES 11 / 3711

Image Source: http://styleguide.mailchimp.com/

CONTENT STYLE GUIDE

• Tone & Voice • Terminology • Formatting • Limitations

http://styleguide.mailchimp.com/


Material is the metaphor

Bold, graphic, intentional

Motion provides meaning

Image Source: https://design.google.com/

DESIGN PRINCIPLES

• Layout • Style (Material, Flat,

skeuomorphism, Metro) • Formate

https://design.google.com/


Image Source: https://design.google.com/

PATTERN LIBRARY

• Header & Footer • Navigation • Cards • Tables • Filers • Icons • Ect

https://design.google.com/


Image Source: https://dribbble.com/Zendesk

COMPONENT LIBRARY

• Navigation • Forms • Feeds • Content Areas • Content Galleries • Data Tables

https://dribbble.com/Zendesk


Image Source:https://playbook.cio.gov/

FRONT-END STYLE GUIDE

• Living Style Guide • Documentation • Code Samples • Functional Examples • Grids • Elements • Components

http://playbook.cio.gov/


How To Get Started

DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES 17 / 37

• PM’s, Devs, Designers, & Stakeholders Input

• Define Your Goals

• Start Small

• Take the Jump

GET EVERYONE INVOLVED1

Image Source: http://goo.gl/CaE0qJ

http://goo.gl/CaE0qJ


• Collect images, ideas, pieces of text, etc that evoke or project a particular style or concept.

• Find Patterns, Inspiration, Functionality

• Steal & Improve

CREATE A BOARD2


INVISION APP


• Communicates the essence of a brand for the web.

• Describes Your Concepts • Sets the Imagery/Style,

Typography, and UI style

BUILD A STYLE TILE3


• Define your font sizes • Body Copy • Quotes, Alerts, Forms • Buttons • Figure Out a Naming Scheme

CREATE YOUR BASE3


SKETCH


Image Source:https://playbook.cio.gov/

USED EXISTING CSS FRAMEWORKS / UI LIBARIES

• US Web Standards Guide • Code For America By Clear Left • Bootstrap

4

http://playbook.cio.gov/


• Focus on global elements • See if you base style works • Don’t get caught up in imagery • Focus on the bigger picture

START WITH SIMPLE TEMPLATE

5


• Take Inventory • Always Set Your Styles &

Symbols • Design Out Break Points • Stay Consistent

CREAT PATTERNS & COMPONENTS

6


• Valuate Inconsistencies • Remove Unneeded Styles • Showcase all your hover states/

animations • Format Your Document

REFINE & SIMPLIFY7


• Static Vs Living • CSS Documentation (KSS) • Use a Boilerplate • Start Small

BRING IT TO LIFE8


KSS KNYLE STYLE SHEETS

CSS components are described right in the source code as comments.


PatternLab.io


• Keep it public & Accessible • Always reference it • Make it apart of your workflow • Lastly, updated it.

MAINTAIN9

Source: http://goo.gl/esHJsD

http://goo.gl/esHJsD


What We Learned


RECAP

• A style guide is anything that brings structure to a brand • Don’t let yourself dig in the bin of endless possibilities • Start Small • Build Your Base • Create Patterns & Components • Refine & Always Sync


1. http://codeforamerica.clearleft.com/

2. https://playbook.cio.gov/

CSS FRAMEWORKS1. http://styleguides.io/

2. http://bradfrost.com/blog/post/atomic-web-design/

INFORMATION

1. http://patternlab.io/

2. https://github.com/livingstyleguide/examples

3. http://fbrctr.github.io/

4. https://sourcejs.com/

5. http://styleguide.sc5.io/

SG BOILERPLATES

1. http://bootflat.github.io/free-psd.html

2. http://www.sketchappsources.com/free-source/349-bootstrap-3-vector-ui-kit.html

3. http://www.sketchappsources.com/free-source/597-google-material-design-ui-sketch-app.html

UI LIBRARIES

http://codeforamerica.clearleft.com/

https://playbook.cio.gov/

http://styleguides.io/

http://bradfrost.com/blog/post/atomic-web-design/

http://patternlab.io/

https://github.com/livingstyleguide/examples

http://fbrctr.github.io/

https://sourcejs.com/

http://styleguide.sc5.io/

http://bootflat.github.io/free-psd.html

http://www.sketchappsources.com/free-source/349-bootstrap-3-vector-ui-kit.html

http://www.sketchappsources.com/free-source/597-google-material-design-ui-sketch-app.html


Questions?Tips?

37

Thank You Gracias Merci Danke 谢谢ありがとう