Tweet
Tweet

Slide 1

Slide 1 text

@livmadsen @glugberlin | #glugbln glugevents.com Liv Madsen @livmadsen @edenspiekermann

Slide 2

Slide 2 text

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.

Slide 3

Slide 3 text

coding is designing; design must consider code 3 @livmadsen Content Design Development

Slide 4

Slide 4 text

@livmadsen

Slide 5

Slide 5 text

@livmadsen

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ 8 @livmadsen

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

edenspiekermann_ @livmadsen Breaking your UI into reusable parts Patterns:

Slide 19

Slide 19 text

edenspiekermann_ @livmadsen Breaking your UI into reusable parts Patterns:

Slide 20

Slide 20 text

edenspiekermann_ @livmadsen What introducing patterns doesn’t mean…

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

edenspiekermann_ @livmadsen Patterns are discovered rather than made

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

edenspiekermann_ @livmadsen → supplement as needed

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

edenspiekermann_ @livmadsen functional, relatable names – by the team, for the team

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

edenspiekermann_ @livmadsen

Slide 33

Slide 33 text

edenspiekermann_ @livmadsen

Slide 34

Slide 34 text

edenspiekermann_ @livmadsen beyond simple UI patterns…

Slide 35

Slide 35 text

Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ 24 @livmadsen

Slide 36

Slide 36 text

Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ 24 @livmadsen

Slide 37

Slide 37 text

Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ 25 @livmadsen Make the title massive!

Slide 38

Slide 38 text

edenspiekermann_ @livmadsen → make the right choice the easiest choice

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

edenspiekermann_ @livmadsen … just use this To get this …

Slide 46

Slide 46 text

Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ 31 @livmadsen http://fractal.build/

Slide 47

Slide 47 text

Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ 32 @livmadsen but wait… there’s more http://styleguides.io/tools

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ 35 @livmadsen ?

Slide 51

Slide 51 text

Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ 35 @livmadsen take the fastest route to get the idea across ?

Slide 52

Slide 52 text

Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ 35 @livmadsen take the fastest route to get the idea across ?

Slide 53

Slide 53 text

Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ 36 @livmadsen from me to future me with love from me to future me with love

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

edenspiekermann_ @livmadsen

Slide 56

Slide 56 text

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/

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

edenspiekermann_ @livmadsen

Slide 59

Slide 59 text

edenspiekermann_ @livmadsen Introduces basics, design principles, best practices

Slide 60

Slide 60 text

edenspiekermann_ @livmadsen Introduces basics, design principles, best practices

Slide 61

Slide 61 text

edenspiekermann_ @livmadsen Design Playbook when and why to use show room:

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ 45 @livmadsen http://designsystems.herokuapp.com https://designsystems.curated.co

Slide 66

Slide 66 text

Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ 46 @livmadsen call to action: give it a go!

Slide 67

Slide 67 text

Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ @livmadsen 47 we love design systems @edenspiekermann

Slide 68

Slide 68 text

Digital Design Systems Glug Berlin, July 2017 edenspiekermann_ @livmadsen 47 also, we’re hiring… jobs.edenspiekermann.com we love design systems @edenspiekermann

Slide 69

Slide 69 text

amsterdam / berlin / los angeles / san francisco / singapore edenspiekermann_ Thank you! @livmadsen