Is this a component? - Speaker Deck

Slide 1

Slide 1 text

@livmadsen Is this a … component?  @livmadsen  speakerdeck.com/livmadsen Thoughts and tips on component abstractions in digital design systems

Slide 2

Slide 2 text

@livmadsen I’m Liv, a frontend developer Hello, @livmadsen  speakerdeck.com/livmadsen

Slide 3

Slide 3 text

@livmadsen @livmadsen I like turtles  digital design  systems

Slide 4

Slide 4 text

@livmadsen @livmadsen • Patterns/components,  what and why  • Some (big) common pitfalls  • How to deal, some tips  — and a little example Let’s look at:

Slide 5

Slide 5 text

Design System Brand Digital Design Systems 5 @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 6

Slide 6 text

Visual Design Language Design Principles Design Assets UI Kit (Living) Style Guide Design System Digital Design Systems 6 @livmadsen https://medium.com/@NateBaldwin/anatomy-of-a-design-system-7a6b0677bf5 Anatomy of a Design System, as illustrated by Nate Baldwin Content Strategy Voice & Tone UI Presentation Layer Documentation Processes Dev Standards Components Brand deliberate managed

Slide 7

Slide 7 text

@livmadsen avoid reinventing the wheel coherency & consistency faster development & on-boarding robustness & predictability

Slide 8

Slide 8 text

@livmadsen Identify patterns to break your UI into reusable components

Slide 9

Slide 9 text

Digital Design Systems June 2017 Up front: we are gonna need these 10 9 @livmadsen Gallery Fact card Video Branded header Text w/ image Product Header Large image Text w/o image Brief

Slide 10

Slide 10 text

Digital Design Systems June 2017 to solve all of our UI needs 10 @livmadsen Brief Brief Brief Großes Bild Großes Bild Großes Bild Großes Bild Großes Bild Großes Bild Großes Bild Großes Bild Mega BU Brief Großes Bild 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 11

Slide 11 text

Digital Design Systems June 2017 to solve all of our UI needs 11 @livmadsen Brief Brief Brief Großes Bild Großes Bild Großes Bild Großes Bild Großes Bild Großes Bild Großes Bild Großes Bild Mega BU Brief Großes Bild 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 12

Slide 12 text

@livmadsen discover patterns,  reﬁne in components

Slide 13

Slide 13 text

@livmadsen @livmadsen The system is “just”  a foundation.    There may be gaps,  supplement as needed my own photo

Slide 14

Slide 14 text

@livmadsen Components make you better at handling purposeful complexity and give you more… punimage by Tom Green for polish and ﬂavor

Slide 15

Slide 15 text

Digital Design Systems 15 @livmadsen From VODL — Voralberg Online Design Language, for Russmedia Digital https://www.edenspiekermann.com/case-studies/vol-at-design-system/

Slide 16

Slide 16 text

@livmadsen @livmadsen → make the right choice the easiest choice

Slide 17

Slide 17 text

Pitfalls in component abstractions 17 TOO SOON TOO MUCH TOO LATE Patterns are not extracted for easy re-use Things grow out of control, it gets hard to consolidate Use cases have not solidiﬁed. You get eager and overdo it. TOO LITTLE No clear way to use. Death by a thousand options

Slide 18

Slide 18 text

@livmadsen — how do we ﬁnd the balance? We want reusability, predictability, ﬂexibility and easy of use 

Slide 19

Slide 19 text

WET before DRY @livmadsen Repeat the ﬁrst two, use to learn — condense on third use

Slide 20

Slide 20 text

Digital Design Systems 20 @livmadsen Check what you have UI inventory  & audits

Slide 21

Slide 21 text

“An interface inventory is a comprehensive collection of the bits and pieces that make up your interface.” @livmadsen — Brad Frost https://bradfrost.com/blog/post/interface-inventory/ Example of an interface inventory, ca. 2013

Slide 22

Slide 22 text

Digital Design Systems Some things to look for … Behavior   Apply variations and transitions to presentation and layout Respond to interactions Have state & logic 22 @livmadsen Presentation   Present content in the interface Logicless No own state (often called “dumb”) Themeable Simple variations Re-usable in many contexts, agnostic of placement (no outside spacing)    Layout   Place other components relative to each other Flows/ﬂex/grids/pages Also no own state

Slide 23

Slide 23 text

Digital Design Systems Some things to look for … Behavior   Apply variations and transitions to presentation and layout Respond to interactions Have state & logic also consider: utils/helpers Help w. common logic,  complex condition checks,  transformation tasks 23 @livmadsen Presentation   Present content in the interface Logicless No own state (often called “dumb”) Themeable Simple variations Re-usable in many contexts, agnostic of placement (no outside spacing)    Layout   Place other components relative to each other Flows/ﬂex/grids/pages Also no own state

Slide 24

Slide 24 text

@livmadsen @livmadsen “layers” of components + UI presentation layer More concrete,  UI components More abstract,  primitive components

Slide 25

Slide 25 text

@livmadsen Close to the UI = concrete

Slide 26

Slide 26 text

@livmadsen Biggest pitfall: no documentation if no-one can ﬁnd your component  or it’s not clear when and how to use it,  it will not be used (correctly)

Slide 27

Slide 27 text

@livmadsen Shout out to component libraries

Slide 28

Slide 28 text

@livmadsen Good documentation enables  timely & correct reuse + abstraction

Slide 29

Slide 29 text

keep track of maturity 29 @livmadsen

Slide 30

Slide 30 text

@livmadsen – by the team, for the team A design system is not for the product, it’s for the people who build the product

Slide 31

Slide 31 text

@livmadsen a little audit example  to ﬁnish on

Slide 32

Slide 32 text

Digital Design Systems 32 @livmadsen

Slide 33

Slide 33 text

Digital Design Systems 33 @livmadsen Presentation patterns • Toggle chevron (isOpen) • Trigger button (isOpen) • Content box wrappers • List of buttons/links inside content box • Bullet (icon/image and text) • Avatar

Slide 34

Slide 34 text

Digital Design Systems 34 @livmadsen Key differences in interaction/behavior keyboard navigation hovering semantics dropdown select

Slide 35

Slide 35 text

Digital Design Systems 35 @livmadsen Different presentations Same core behavior

Slide 36

Slide 36 text

Digital Design Systems pop-over primitive Handles: ‣ toggle/open/close methods ‣ close on click outside ‣ transition animation ‣ placing content relative to trigger   Accepts a trigger renderer,  children as content  36 @livmadsen

Slide 37

Slide 37 text

Digital Design Systems 37 @livmadsen Dropdown Tooltip Option button Menu dropdown Pop-out

Slide 38

Slide 38 text

38 @livmadsen Components:  - keep each as simple as you can - only cover known, relevant use cases - distinguish between shared and one-offs - remember to document!

Slide 39

Slide 39 text

@livmadsen Want to help people access affordable healthcare? We may be hiring … check sesamecare.com/team

Slide 40

Slide 40 text

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