style guides: what is it. the benefits. how to get started
TRANSCRIPT
![Page 1: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/1.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES PRESENTED BY MOBOMO 1 / 37
UnderstandingStyle Guides
What is it. The Benefits. How to get started.
![Page 2: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/2.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES PRESENTED BY MOBOMO 2 / 37
I’m Scott ThomasUI Designer at Mobomo.
![Page 3: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/3.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES PRESENTED BY MOBOMO 3 / 37
One of The Fastest Growing Digital Agencies in DC.
Webby Award Small Business Subcontractor of
the Year
Inc. 5000 4 years in a row
![Page 4: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/4.jpg)
WE W OUR CLIENTS From government to finance to health care to non-profit.
![Page 5: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/5.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES PRESENTED BY MOBOMO 5 / 37
What’s a Style Guide?
![Page 6: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/6.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES PRESENTED BY MOBOMO 6 / 37
BIN OF POSSIBILITIES REFINED SET OF IDEAS RESULT
Image Source: http://atomicdesign.bradfrost.com/chapter-4/
SIMPLIFIES THE CHAOS OF CREATIVITY
![Page 7: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/7.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES PRESENTED BY MOBOMO 7 / 37
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/
![Page 8: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/8.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES PRESENTED BY MOBOMO 8 / 37
1. Less JIRA Tickets
2. Reduced Revisions
3. Better Performance
4. Fast Iterations
5. Documentation
6. Less Stress
THIS TRANSLATE TO
![Page 9: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/9.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES PRESENTED BY MOBOMO 9 / 37
Not All Style Guides Are The Same.
However,
![Page 10: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/10.jpg)
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
![Page 11: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/11.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES 11 / 3711
Image Source: http://styleguide.mailchimp.com/
CONTENT STYLE GUIDE
• Tone & Voice • Terminology • Formatting • Limitations
![Page 12: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/12.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES 12/ 3712
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
![Page 13: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/13.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES 13/ 3713
Image Source: https://design.google.com/
PATTERN LIBRARY
• Header & Footer • Navigation • Cards • Tables • Filers • Icons • Ect
![Page 14: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/14.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES 14/ 3714
Image Source: https://dribbble.com/Zendesk
COMPONENT LIBRARY
• Navigation • Forms • Feeds • Content Areas • Content Galleries • Data Tables
![Page 15: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/15.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES 15/ 3715
Image Source:https://playbook.cio.gov/
FRONT-END STYLE GUIDE
• Living Style Guide • Documentation • Code Samples • Functional Examples • Grids • Elements • Components
![Page 16: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/16.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES PRESENTED BY MOBOMO 16 / 37
How To Get Started
![Page 17: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/17.jpg)
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
![Page 18: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/18.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES 18/ 3718
• 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
![Page 19: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/19.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES PRESENTED BY MOBOMO 19 / 37
INVISION APP
![Page 20: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/20.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES 20/ 3720
INVISION APP
![Page 21: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/21.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES 21/ 3721
• Communicates the essence of a brand for the web.
• Describes Your Concepts • Sets the Imagery/Style,
Typography, and UI style
BUILD A STYLE TILE3
![Page 22: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/22.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES 22/ 3722
• Define your font sizes • Body Copy • Quotes, Alerts, Forms • Buttons • Figure Out a Naming Scheme
CREATE YOUR BASE3
![Page 23: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/23.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES PRESENTED BY MOBOMO 23 / 37
SKETCH
![Page 24: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/24.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES 24/ 3724
Image Source:https://playbook.cio.gov/
USED EXISTING CSS FRAMEWORKS / UI LIBARIES
• US Web Standards Guide • Code For America By Clear Left • Bootstrap
4
![Page 25: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/25.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES 25/ 3725
• 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
![Page 26: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/26.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES 26/ 3726
• Take Inventory • Always Set Your Styles &
Symbols • Design Out Break Points • Stay Consistent
CREAT PATTERNS & COMPONENTS
6
![Page 27: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/27.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES PRESENTED BY MOBOMO 27 / 37
![Page 28: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/28.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES 28/ 3728
• Valuate Inconsistencies • Remove Unneeded Styles • Showcase all your hover states/
animations • Format Your Document
REFINE & SIMPLIFY7
![Page 29: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/29.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES 29/ 3729
• Static Vs Living • CSS Documentation (KSS) • Use a Boilerplate • Start Small
BRING IT TO LIFE8
![Page 30: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/30.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES PRESENTED BY MOBOMO 30 / 37
KSS KNYLE STYLE SHEETS
CSS components are described right in the source code as comments.
![Page 31: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/31.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES PRESENTED BY MOBOMO 31 / 37
PatternLab.io
![Page 32: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/32.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES 32/ 3732
• Keep it public & Accessible • Always reference it • Make it apart of your workflow • Lastly, updated it.
MAINTAIN9
Source: http://goo.gl/esHJsD
![Page 33: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/33.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES PRESENTED BY MOBOMO 33 / 37
What We Learned
![Page 34: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/34.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES PRESENTED BY MOBOMO 34 / 37
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
![Page 35: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/35.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES PRESENTED BY MOBOMO 35 / 37
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
![Page 36: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/36.jpg)
DRUPAL4GOV PERFORMANCE AND DESIGN/UX | STYLE GUIDES PRESENTED BY MOBOMO 36 / 37
Questions?Tips?
![Page 37: Style Guides: What is it. The Benefits. How to Get Started](https://reader031.vdocument.in/reader031/viewer/2022030310/58f9aa0a760da3da068b74e0/html5/thumbnails/37.jpg)
37
Thank You Gracias Merci Danke 谢谢 ありがとう