Closing the Gaps with Digital Design Systems, Ruhr Edition

Even though most of us understand that web visuals and code are often two sides of one coin, getting a bunch of designers and developers to work in unison on digital products can be surprisingly tricky. Especially on long running products.
Isn’t there something we can lean on for help? Enter: design systems!
This talk will provide a basic introduction to design systems and pattern libraries, focusing on how they can help us to bridge the gaps and optimise workflows within digital teams.

Transcript

1. Closing the Gaps w/ Digital Design Systems @livmadsen
 speakerdeck.com/livmadsen
2. @livmadsen I’m Liv.
 Nice to meet you. Hello,
3. @livmadsen Life was simpler in the olden days, amirite? (not really better, tho)
4. coding is designing; design must consider code 4 @livmadsen Conten Desig Development
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 to optimising your digital workflows +
9. Design System Brand Digital Design Systems 9 @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
10. edenspiekermann_ @livmadsen https://medium.com/@marcelosomers/a-maturity-model-for-design-systems-93fff522c3ba design system maturity
11. edenspiekermann_ @livmadsen design systems are everywhere … and many more at http://styleguides.io/
12. Digital Design Systems clear design principles, clear goals, shared vocabulary 12 @livmadsen http://yayasan1m alaysia.org/wp-content/uploads/2015/08/bigstock-Key-to-success-24060560.jpg
13. edenspiekermann_ @livmadsen Patterns Breaking your UI into reusable components
14. edenspiekermann_ @livmadsen avoid reinventing the wheel consistency faster development
15. edenspiekermann_ @livmadsen What introducing patterns doesn’t mean…
16. Digital Design Systems June 2017 Day 1: we shall need these 10 things 16 @livmadsen Gallery Fact card Video Branded header Text w/ image Product Header Large image Text w/o image Brief
17. Digital Design Systems June 2017 and never shall we stray… 17 @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 Deutschland karte 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
18. edenspiekermann_ @livmadsen Patterns are discovered rather than made
19. 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
20. edenspiekermann_ @livmadsen → supplement as needed
21. edenspiekermann_ @livmadsen Patterns make you better at handling purposeful complexity and give you more…
22. edenspiekermann_ @livmadsen start with a UI inventory gather & describe build vocabulary practice:
23. @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
24. @livmadsen
25. @livmadsen beyond simple UI patterns…
26. Digital Design Systems 26 @livmadsen
27. Digital Design Systems 27 @livmadsen Make the title massive!
28. edenspiekermann_ @livmadsen → make the right choice the easiest choice
29. edenspiekermann_ @livmadsen Libraries document your reusable UI parts. Good documentation enables timely and correct reuse
30. edenspiekermann_ @livmadsen https://medium.com/@marcelosomers/a-maturity-model-for-design-systems-93fff522c3ba maintenance overhead selecting good tools
31. edenspiekermann_ @livmadsen http://rizzo.lonelyplanet.com/
32. edenspiekermann_ @livmadsen … add gem & use this To get this …
33. Digital Design Systems 33 @livmadsen http://fractal.build/
34. Digital Design Systems 34 @livmadsen
35. Digital Design Systems 35 @livmadsen but wait… there’s more http://styleguides.io/tools
36. 36 @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
37. …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 37 @livmadsen http://atomicdesign.bradfrost.com/chapter-1/
38. Digital Design Systems 38 @livmadsen take the fastest route to get the idea across ?
39. Digital Design Systems 39 @livmadsen from me to future me with love from: me to: future me with love
40. edenspiekermann_ @livmadsen https://medium.com/@marcelosomers/a-maturity-model-for-design-systems-93fff522c3ba Not bad… not bad at all
41. edenspiekermann_ @livmadsen
42. @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/
43. @livmadsen Different teams can leverage different parts of the system to produce websites, apps, prototypes, campaigns, etc. all following the guidelines
44. @livmadsen
45. @livmadsen Introduces basics, design principles, best practices
46. @livmadsen Design Playbook when and why to use Patterns Library how to use workspace: show room:
47. @livmadsen HTTPS://BRADFROST.GITHUB.IO/STYLE-GUIDE-GUIDE/
48. Digital Design Systems 48 @livmadsen https://adele.uxpin.com/
49. Digital Design Systems 49 @livmadsen designsystems.herokuapp.com news.design.systems
50. Thank you! @livmadsen @livmadsen
 
 speakerdeck.com/livmadsen