This document discusses the importance of style guides in web design, describing them as crucial supplementary documents that dictate visual and functional standards for websites. It outlines processes for creating and maintaining style guides, emphasizing the need for modular design and effective communication within teams. Additionally, the author shares personal experiences and examples of style guides to illustrate their benefits in design consistency and development efficiency.

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