×
Copy
Open
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
NDC Oslo 2020 Living Style Guides Bringing Designers and Developers Together
Slide 2
Slide 2 text
Hi! @timgthomas timgthomas.com
Slide 3
Slide 3 text
Style Guides Documentation Guidelines Constraints Focus
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
Living Style Guides Change
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Living Style Guides in Software Change Formalized visual styles Code examples User interactions
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Choosing a Living Style Guide Every team is different Look at other documentation Decide between existing and new patterns Not all-or-nothing
Slide 16
Slide 16 text
Pros Documentation UX consistency Bootstrapping
Slide 17
Slide 17 text
Cons Curated Brittle Limits creativity
Slide 18
Slide 18 text
Ingredients Team buy-in Sources of truth Hosting Change process Core concepts
Slide 19
Slide 19 text
Core Concepts Colors Branding Typography Icons Layouts + units of measure
Slide 20
Slide 20 text
Demo
Slide 21
Slide 21 text
Responding to Change Accidental Purposeful Ongoing
Slide 22
Slide 22 text
Visual Testing
Slide 23
Slide 23 text
Responding to Change Accidental Purposeful Ongoing
Slide 24
Slide 24 text
Best Practices Include accessibility Start small Keep style guide components separate Adapt current practices, tools Make decisions as a team
Slide 25
Slide 25 text
Further Reading github.com/timgthomas/sketch-processor developer.sketch.com/reference/api yui.github.io/yuidoc primer.style
Slide 26
Slide 26 text
Thanks! #conference-room-2 @timgthomas