In the world of ever-changing design deliverables, a browser-based style guide serves as an anchor to the design system, and bridges the gap between design and front-end development. While a style guide is always a good idea, many factors determine what it should define and how it should be used in the lifecycle of the project. In her talk, Sophie will cover what a style guide should contain and how it should be used — and how these things differ for client work, internal products, and open source products.

1. Style Guides
For Clients, For Products, and For Yourself
@sophshepherd
Sophie
Shepherd
Wednesday, June 3, 15

2. Quick Survey!
Wednesday, June 3, 15

3. Hi.
Wednesday, June 3, 15

4. What Is A Style Guide?
A supplemental document to
describe how things should look
and/or work on a website.
Wednesday, June 3, 15

5. http://www.hbs.edu/marketing/
hbs_style_ja_141027.pdf
Wednesday, June 3, 15

6. https://www.dropbox.com/branding/
Wednesday, June 3, 15

7. https://design.atlassian.com/2.1/product/
Wednesday, June 3, 15

8. http://rizzo.lonelyplanet.com/styleguide
Wednesday, June 3, 15

9. http://voiceandtone.com/success-message/
Wednesday, June 3, 15

10. http://cssguidelin.es/
Wednesday, June 3, 15

11. Style Guide
The brand on the web
Directions for use
Has examples
Entirety of UI
Production Code
All Of This
Pattern Library
Wednesday, June 3, 15

12. My Agency Experience
Front end started after design sign-off
Mockups Templates Guide
Style guide = client’s needs
Wednesday, June 3, 15

13. My Product Experience
More iteration, it’s okay if things are
messy
Audience = Our Team
Mockups Patterns Templates
Wednesday, June 3, 15

14. Where Style Guides Fit Into Process
STOLEN CONTENT
Property of BRAD FROST
css-tricks.com
Property of CHRIS COYIER
Wednesday, June 3, 15

15. My Process
1
(lately)
Wednesday, June 3, 15

16. My Process (lately)
2
Wednesday, June 3, 15

17. My Process (lately)
2
“Just Enough Design”
Wednesday, June 3, 15

18. My Process
3
(lately)
Wednesday, June 3, 15

19. My Process aside
I’ve found that it’s difficult to keep all my
styles properly aligned when they are isolated
in individual pages. A remedy to this problem
is to create a “Working Styles” document.
—Yesenia Perez-Cruz,“Sweet Systems”
“
(lately)
Wednesday, June 3, 15

20. My Process
4
(lately)
Wednesday, June 3, 15

21. My Process
5
Back to Sketch
Assess & code some patterns
Literal Sketch
Design In Browser
Photoshop
Revise Patterns
(lately)
Wednesday, June 3, 15

22. My Process
6
ATOMS
MOLECULES
ORGANISMS
TEMPLATES
(lately)
Wednesday, June 3, 15

23. My Process
7
(lately)
Wednesday, June 3, 15

24. ~750 Recorded Benefits*
*Shepherd Dept. of Design Research
Wednesday, June 3, 15

25. Gateway to Code
Wednesday, June 3, 15

26. Modular Design
Wednesday, June 3, 15

27. Modular CSS
Wednesday, June 3, 15

28. Modular QA
Browser/Device Testing
Global Changes
Performance Testing
Wednesday, June 3, 15

29. Clean Code
Wednesday, June 3, 15

30. Clean Code
Wednesday, June 3, 15

31. Speed
Make things once
Revise in one place
“Can you just change this color?”
Wednesday, June 3, 15

32. Communication
Accurate Representation of Design
Wednesday, June 3, 15

33. Communication
Single point of reference
Wednesday, June 3, 15

34. More Than Just Patterns
Wednesday, June 3, 15

35. More Than Just Patterns
Wednesday, June 3, 15

36. More Than Just Patterns
Wednesday, June 3, 15

37. More Than Just Patterns
Wednesday, June 3, 15

38. The Pattern Library is the Process
Design/
Front-end Dev/
Documentation
PATTERN LIBRARY
Production Site/
Application/
Back-end Dev/
Database
APP
Wednesday, June 3, 15

39. github.com/ushahidi/platform-pattern-library
@sophshepherdQuestions?
Our Pattern Library:
Wednesday, June 3, 15