Is this a component?

A frontend developer's thoughts and tips on identifying and abstracting patterns and components in digital design systems

Transcript

1. @livmadsen Is this a … component?
 @livmadsen
 speakerdeck.com/livmadsen Thoughts and tips on component abstractions in digital design systems
2. @livmadsen I’m Liv, a frontend developer Hello, @livmadsen
 speakerdeck.com/livmadsen
3. @livmadsen @livmadsen I like turtles
 digital design
 systems
4. @livmadsen @livmadsen • Patterns/components,
 what and why
 • Some (big) common pitfalls
 • How to deal, some tips
 — and a little example Let’s look at:
5. 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
6. 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
7. @livmadsen avoid reinventing the wheel coherency & consistency faster development & on-boarding robustness & predictability
8. @livmadsen Identify patterns to break your UI into reusable components
9. 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
10. 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
11. 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
12. @livmadsen discover patterns,
 refine in components
13. @livmadsen @livmadsen The system is “just”
 a foundation.
 
 There may be gaps,
 supplement as needed my own photo
14. @livmadsen Components make you better at handling purposeful complexity and give you more… punimage by Tom Green for polish and flavor
15. Digital Design Systems 15 @livmadsen From VODL — Voralberg Online Design Language, for Russmedia Digital https://www.edenspiekermann.com/case-studies/vol-at-design-system/
16. @livmadsen @livmadsen → make the right choice the easiest choice
17. 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 solidified. You get eager and overdo it. TOO LITTLE No clear way to use. Death by a thousand options
18. @livmadsen — how do we find the balance? We want reusability, predictability, flexibility and easy of use

19. WET before DRY @livmadsen Repeat the first two, use to learn — condense on third use
20. Digital Design Systems 20 @livmadsen Check what you have UI inventory
 & audits
21. “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
22. 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/flex/grids/pages Also no own state
23. 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/flex/grids/pages Also no own state
24. @livmadsen @livmadsen “layers” of components + UI presentation layer More concrete,
 UI components More abstract,
 primitive components
25. @livmadsen Close to the UI = concrete
26. @livmadsen Biggest pitfall: no documentation if no-one can find your component
 or it’s not clear when and how to use it,
 it will not be used (correctly)
27. @livmadsen Shout out to component libraries
28. @livmadsen Good documentation enables
 timely & correct reuse + abstraction
29. keep track of maturity 29 @livmadsen
30. @livmadsen – by the team, for the team A design system is not for the product, it’s for the people who build the product
31. @livmadsen a little audit example
 to finish on
32. Digital Design Systems 32 @livmadsen
33. 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
34. Digital Design Systems 34 @livmadsen Key differences in interaction/behavior keyboard navigation hovering semantics dropdown select
35. Digital Design Systems 35 @livmadsen Different presentations Same core behavior
36. 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
37. Digital Design Systems 37 @livmadsen Dropdown Tooltip Option button Menu dropdown Pop-out
38. 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!
39. @livmadsen Want to help people access affordable healthcare? We may be hiring … check sesamecare.com/team
40. Thank you! @livmadsen @livmadsen
 
 speakerdeck.com/livmadsen