Closing the Gaps with Digital Design Systems

For Glug Berlin, this is a primer on how digital design systems can work to bring designers and developers together towards the same finishing line on digital projects.

Transcript

1. @livmadsen @glugberlin | #glugbln glugevents.com Liv Madsen @livmadsen @edenspiekermann
2. Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ @livmadsen 2 BERLIN LOS ANGELES AMSTERDAM SAN FRANCISCO SINGAPORE We design brands, services & products. Digital by default.
3. coding is designing; design must consider code 3 @livmadsen Content Design Development
4. @livmadsen
5. @livmadsen
6. edenspiekermann_ @livmadsen enter digital design systems https://c1.staticflickr.com/1/21/36398901_9905cf9a09_b.jpg
7. edenspiekermann_ @livmadsen A documented, unified set of design/UX rules and patterns – for scalable design
8. edenspiekermann_ @livmadsen a structured approach toward optimising your digital workflows +
9. Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ 8 @livmadsen
10. Brand Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ 8 @livmadsen Visual Design Language Design Principles Design Assets UI Kit (Living) Style Guide Content Strategy Voice & Tone UI Presentation Layer Documentation Processes Components Dev Standards
11. Design System Brand Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ 8 @livmadsen https://medium.com/@NateBaldwin/anatomy-of-a-design-system-7a6b0677bf5 Anatomy of a Design System, as illustrated by Nate Baldwin Visual Design Language Design Principles Design Assets UI Kit (Living) Style Guide Content Strategy Voice & Tone UI Presentation Layer Documentation Processes Components Dev Standards deliberate & managed
12. Design System Brand Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ 8 @livmadsen https://medium.com/@NateBaldwin/anatomy-of-a-design-system-7a6b0677bf5 Anatomy of a Design System, as illustrated by Nate Baldwin Visual Design Language Design Principles Design Assets UI Kit (Living) Style Guide Content Strategy Voice & Tone UI Presentation Layer Documentation Processes Components Dev Standards deliberate & managed in a digital realm & format
13. edenspiekermann_ @livmadsen https://medium.com/@marcelosomers/a-maturity-model-for-design-systems-93fff522c3ba design system maturity
14. edenspiekermann_ @livmadsen https://medium.com/@marcelosomers/a-maturity-model-for-design-systems-93fff522c3ba design system maturity
15. edenspiekermann_ @livmadsen https://medium.com/@marcelosomers/a-maturity-model-for-design-systems-93fff522c3ba design system maturity
16. edenspiekermann_ @livmadsen design systems are everywhere … and many more at http://styleguides.io/
17. Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ clear design principles, clear goals, shared vocabulary 11 @livmadsen http://yayasan1m alaysia.org/wp-content/uploads/2015/08/bigstock-Key-to-success-24060560.jpg
18. edenspiekermann_ @livmadsen Breaking your UI into reusable parts Patterns:
19. edenspiekermann_ @livmadsen Breaking your UI into reusable parts Patterns:
20. edenspiekermann_ @livmadsen What introducing patterns doesn’t mean…
21. Digital Design Systems June 2017 edenspiekermann_ Day 1: we shall need these 10 things 14 @livmadsen Gallery Fact card Video Branded header Text w/ image Product Header Large image Text w/o image Brief
22. Digital Design Systems June 2017 edenspiekermann_ and never shall we stray… 15 @livmadsen Feature story Series Short formats Quote of the day Current atmosphere Questions on Love My salvation Brief 99 Questions Brief Roger Willemsen Brief Politics and society Top x lists Martenstein Großes Bild Deutschlandk arte Großes Bild Ich habe einen Traum Großes Bild Großes Bild Der Moment Image exploration Großes Bild Großes Bild Großes Bild Großes Bild Mega BU Brief Großes Bild Janosch Text w/ image Text w/ image Text w/ image Text w/ image Text w/ image Branded header Branded header Branded header Branded header Branded header Branded header Branded header Branded header Branded header Branded header Header Header Header Header Header Text w/o image Text w/o image Text w/o image Text w/o image Text w/o image Text w/o image Gallery Text w/ image Product Product Product Product Fact card Video Fact card Fact card Video
23. Digital Design Systems June 2017 edenspiekermann_ and never shall we stray… 15 @livmadsen Feature story Series Short formats Quote of the day Current atmosphere Questions on Love My salvation Brief 99 Questions Brief Roger Willemsen Brief Politics and society Top x lists Martenstein Großes Bild Deutschlandk arte Großes Bild Ich habe einen Traum Großes Bild Großes Bild Der Moment Image exploration Großes Bild Großes Bild Großes Bild Großes Bild Mega BU Brief Großes Bild Janosch Text w/ image Text w/ image Text w/ image Text w/ image Text w/ image Branded header Branded header Branded header Branded header Branded header Branded header Branded header Branded header Branded header Branded header Header Header Header Header Header Text w/o image Text w/o image Text w/o image Text w/o image Text w/o image Text w/o image Gallery Text w/ image Product Product Product Product Fact card Video Fact card Fact card Video
24. edenspiekermann_ @livmadsen Patterns are discovered rather than made
25. edenspiekermann_ @livmadsen “Patterns are not dogma, they can change and adapt” — Claudina Sarahe https://www.clarityconf.com/deconstructing-web-systems-or-a-pattern-language-for-web-development
26. edenspiekermann_ @livmadsen → supplement as needed
27. edenspiekermann_ @livmadsen Patterns make you better at handling purposeful complexity and give you more…
28. edenspiekermann_ @livmadsen Patterns make you better at handling purposeful complexity and give you more…
29. edenspiekermann_ @livmadsen start with a UI inventory gather & describe build vocabulary practice:
30. edenspiekermann_ @livmadsen functional, relatable names – by the team, for the team
31. edenspiekermann_ @livmadsen functional, relatable names – by the team, for the team a design system is not for the product, it’s for the people who build the product
32. edenspiekermann_ @livmadsen
33. edenspiekermann_ @livmadsen
34. edenspiekermann_ @livmadsen beyond simple UI patterns…
35. Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ 24 @livmadsen
36. Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ 24 @livmadsen
37. Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ 25 @livmadsen Make the title massive!
38. edenspiekermann_ @livmadsen → make the right choice the easiest choice
39. edenspiekermann_ @livmadsen Libraries document your reusable UI parts. Good documentation enables timely and correct reuse
40. edenspiekermann_ @livmadsen Libraries document your reusable UI parts. Good documentation enables timely and correct reuse
41. edenspiekermann_ @livmadsen https://medium.com/@marcelosomers/a-maturity-model-for-design-systems-93fff522c3ba
42. edenspiekermann_ @livmadsen https://medium.com/@marcelosomers/a-maturity-model-for-design-systems-93fff522c3ba maintenance overhead selecting good tools
43. edenspiekermann_ @livmadsen http://rizzo.lonelyplanet.com/
44. edenspiekermann_ @livmadsen http://rizzo.lonelyplanet.com/
45. edenspiekermann_ @livmadsen … just use this To get this …
46. Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ 31 @livmadsen http://fractal.build/
47. Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ 32 @livmadsen but wait… there’s more http://styleguides.io/tools
48. 33 @livmadsen The One Source of Truth focus on what hits the user’s screen: the fruit of the whole team’s work, the coded interface
49. …presenting fully baked Photoshop comps “is the most effective way to show your clients what their website will never look like.” – Stephen Hay (who clearly knows what he’s talking about) Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ 34 @livmadsen http://atomicdesign.bradfrost.com/chapter-1/
50. Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ 35 @livmadsen ?
51. Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ 35 @livmadsen take the fastest route to get the idea across ?
52. Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ 35 @livmadsen take the fastest route to get the idea across ?
53. Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ 36 @livmadsen from me to future me with love from me to future me with love
54. edenspiekermann_ @livmadsen https://medium.com/@marcelosomers/a-maturity-model-for-design-systems-93fff522c3ba Not bad… not bad at all
55. edenspiekermann_ @livmadsen
56. edenspiekermann_ @livmadsen SHOW ROOM WORK SPACE(S) TOOLBOX Bits and pieces you’ll need for building. Supplies the team. Present, convince and guide to use system. Guides the team. Setups to facilitate good workflows. Organises the team. loosely based on http://bradfrost.com/blog/post/the-workshop-and-the-storefront/
57. edenspiekermann_ @livmadsen Different teams can leverage different parts of the system to produce websites, apps, prototypes, campaigns, etc. following the guidelines
58. edenspiekermann_ @livmadsen
59. edenspiekermann_ @livmadsen Introduces basics, design principles, best practices
60. edenspiekermann_ @livmadsen Introduces basics, design principles, best practices
61. edenspiekermann_ @livmadsen Design Playbook when and why to use show room:
62. edenspiekermann_ @livmadsen Design Playbook when and why to use Patterns Library how to use workspace: show room:
63. edenspiekermann_ @livmadsen Design Playbook when and why to use Patterns Library how to use workspace: show room:
64. edenspiekermann_ @livmadsen HTTPS://BRADFROST.GITHUB.IO/STYLE-GUIDE-GUIDE/
65. Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ 45 @livmadsen http://designsystems.herokuapp.com https://designsystems.curated.co
66. Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ 46 @livmadsen call to action: give it a go!
67. Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ @livmadsen 47 we love design systems @edenspiekermann
68. Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ @livmadsen 47 also, we’re hiring… jobs.edenspiekermann.com we love design systems @edenspiekermann
69. amsterdam / berlin / los angeles / san francisco / singapore edenspiekermann_ Thank you! @livmadsen