Closing the Gaps w/ Digital Design Systems @livmadsen
 speakerdeck.com/livmadsen

@livmadsen I’m Liv.
 Nice to meet you. Hello,

@livmadsen Life was simpler in the olden days, amirite? (not really better, tho)

coding is designing; design must consider code 4 @livmadsen Conten Desig Development

@livmadsen

edenspiekermann_ @livmadsen enter digital design systems https://c1.staticflickr.com/1/21/36398901_9905cf9a09_b.jpg

edenspiekermann_ @livmadsen A documented, unified set of design/UX rules and patterns – for scalable design

edenspiekermann_ @livmadsen a structured approach to optimising your digital workflows +

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

edenspiekermann_ @livmadsen https://medium.com/@marcelosomers/a-maturity-model-for-design-systems-93fff522c3ba design system maturity

edenspiekermann_ @livmadsen design systems are everywhere … and many more at http://styleguides.io/

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

edenspiekermann_ @livmadsen Patterns Breaking your UI into reusable components

edenspiekermann_ @livmadsen avoid reinventing the wheel consistency faster development

edenspiekermann_ @livmadsen What introducing patterns doesn’t mean…

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

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

edenspiekermann_ @livmadsen Patterns are discovered rather than made

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

edenspiekermann_ @livmadsen → supplement as needed

edenspiekermann_ @livmadsen Patterns make you better at handling purposeful complexity and give you more…

edenspiekermann_ @livmadsen start with a UI inventory gather & describe build vocabulary practice:

@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

@livmadsen

@livmadsen beyond simple UI patterns…

Digital Design Systems 26 @livmadsen

Digital Design Systems 27 @livmadsen Make the title massive!

edenspiekermann_ @livmadsen → make the right choice the easiest choice

edenspiekermann_ @livmadsen Libraries document your reusable UI parts. Good documentation enables timely and correct reuse

edenspiekermann_ @livmadsen https://medium.com/@marcelosomers/a-maturity-model-for-design-systems-93fff522c3ba maintenance overhead selecting good tools

edenspiekermann_ @livmadsen http://rizzo.lonelyplanet.com/

edenspiekermann_ @livmadsen … add gem & use this To get this …

Digital Design Systems 33 @livmadsen http://fractal.build/

Digital Design Systems 34 @livmadsen

Digital Design Systems 35 @livmadsen but wait… there’s more http://styleguides.io/tools

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

…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/

Digital Design Systems 38 @livmadsen take the fastest route to get the idea across ?

Digital Design Systems 39 @livmadsen from me to future me with love from: me to: future me with love

edenspiekermann_ @livmadsen https://medium.com/@marcelosomers/a-maturity-model-for-design-systems-93fff522c3ba Not bad… not bad at all

edenspiekermann_ @livmadsen

@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/

@livmadsen Different teams can leverage different parts of the system to produce websites, apps, prototypes, campaigns, etc. all following the guidelines

@livmadsen

@livmadsen Introduces basics, design principles, best practices

@livmadsen Design Playbook when and why to use Patterns Library how to use workspace: show room:

@livmadsen HTTPS://BRADFROST.GITHUB.IO/STYLE-GUIDE-GUIDE/

Digital Design Systems 48 @livmadsen https://adele.uxpin.com/

Digital Design Systems 49 @livmadsen designsystems.herokuapp.com news.design.systems

Thank you! @livmadsen @livmadsen
 
 speakerdeck.com/livmadsen