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

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/

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

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

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

CONTENT STYLE GUIDE

• Tone & Voice • Terminology • Formatting • Limitations

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

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

PATTERN LIBRARY

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

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

COMPONENT LIBRARY

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

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

FRONT-END STYLE GUIDE

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

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

• 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

• 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

• Take Inventory • Always Set Your Styles &

Symbols • Design Out Break Points • Stay Consistent

CREAT PATTERNS & COMPONENTS

• 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

What We Learned

• 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

Questions?Tips?

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

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

Design

leveling up your enterprise with style guides and standards

tetrix getting started guide additional guides nxt brick...

writing style guides and exercises

aw20 trend & inspiration style guides. part two

finders keepers at home trend & inspiration style guides

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

citation style guides€¦ · citation style guides...

style manuals and citation guides

getting started with rails — ruby on rails guides

techrepublic style guides

atomic design, living style guides and the holy grail

studentinformation getting started...

theming practices for drupal. style guides

style guides for architecture materials

code style guides - university of...

coconuts manifesto - style, branding, advertising and...

style guides an overview for modern designers

ux/case study-style copywriting: product buying guides (2)

developing style guides at light speed with fabricator

style guides: fashionable but also practical - tc dojo,...