Static Wireframes Static Mockups
Plus one round of revisions
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
That’s sixty artifacts for five templates
Slide 14
Slide 14 text
Most orgs have more than five templates
Slide 15
Slide 15 text
Worse, none of these artifacts truly
capture the end web page
Slide 16
Slide 16 text
The artifacts show three breakpoints…
390 810 1920
Slide 17
Slide 17 text
They don’t even account for device rotation…
390 810 1920
Slide 18
Slide 18 text
And forget all of the resolutions in between.
390 810 1920
Slide 19
Slide 19 text
Many design challenges between breakpoints.
390 810 1920
Interesting stu happens here
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
Paul is the exception, not the rule
Slide 24
Slide 24 text
Expand your browser until it looks like then…
BOOM
You need a breakpoint.
Slide 25
Slide 25 text
Old Web Development Process
Planning Static Wireframes Static Mockups HTML, CSS and JS Launch
Design Development
Hando
There are still design decisions in here
Slide 26
Slide 26 text
Old Web Development Process
Planning Static Wireframes Static Mockups HTML, CSS and JS Launch
Design Development
Hando
There are still design decisions in here
There are development decisions in here
Slide 27
Slide 27 text
Design Systems
Amplify the Problems
Slide 28
Slide 28 text
Well-considered design system components
Multiple use cases
Variations
Interaction and behavior
Animation
Responsive
Di erent types of input
Accessibility
Performance
Consistency
Documentation
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Symbols
Libraries
Tokens
Templates
Slide 31
Slide 31 text
Designers o en maintain their own system
Duplicate design system work to support design tool need
Challenging for implementors when designs don’t match DS components
Can’t take full advantage of thought put into design system components
Can create confusion about which is the source of truth
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Hando
Slide 35
Slide 35 text
Hando
Slide 36
Slide 36 text
Hando
Slide 37
Slide 37 text
More evidence the
old process is broken
Slide 38
Slide 38 text
Most design tools
are stuck in past
Slide 39
Slide 39 text
Hando
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
Are these margins fixed?
Do these measurements matter?
Do they change with the viewport?
Slide 42
Slide 42 text
Why isn’t this using a design token?
Slide 43
Slide 43 text
Does the size of the avatar change?
Where are the design tokens?
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
Do we really want our design tools
generating production code?
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
Issues with Code Generated by Design Tools
Fixed width. Isn't responsive.
Fails to use your design system conventions and tooling.
Lacks design tokens or subcomponents.
Specific to one use case.
Is it the best code on which to standardize?
Slide 51
Slide 51 text
Design tools o en treat static mockups
as the source of truth instead of the
web-based design system.
Slide 52
Slide 52 text
Old Web Development Process
Planning Static Wireframes Static Mockups HTML, CSS and JS Launch
Slide 53
Slide 53 text
Our design process
Slide 54
Slide 54 text
Discovery Prototype
Sketching
Extract Components Design System
Slide 55
Slide 55 text
Discovery Prototype
Sketching
Extract Components Design System
Slide 56
Slide 56 text
This process is demonstrably better
Discovery Prototype
Sketching
Extract Components Design System
Slide 57
Slide 57 text
Designs have greater integrity
Slide 58
Slide 58 text
Designs have greater integrity
Slide 59
Slide 59 text
Designs have greater integrity
Slide 60
Slide 60 text
Solve problems you can’t see in static mockups
Slide 61
Slide 61 text
Solve problems you can’t see in static mockups
Slide 62
Slide 62 text
Hando with most responsive problems solved
Slide 63
Slide 63 text
We like to teach
our process…
Slide 64
Slide 64 text
Need help clouding your
fours? Squiddly-doo!
Captured
for youpro
Need help clouding your
fours? Squiddly-doo!
Captured
for youpro
Slide 65
Slide 65 text
Sometimes it isn’t a good fit
Slide 66
Slide 66 text
Discovery Prototype
Sketching
Extract Components Design System
This works for us because…
Slide 67
Slide 67 text
Discovery Prototype
Sketching
Extract Components Design System
This works for us because…
Slide 68
Slide 68 text
Our designers code.
Our developers went to
art school.
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
In an ideal world:
Designers code and developers design
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
Discovery Prototype
Sketching
Extract Components Design System
Looking for design tools to get us closer to this
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
Design tool must haves
Full responsive support
Treats design system as the source of truth
Import design system components and create variants
Design from scratch when existing components won't do
Feel like a true design tool
Slide 76
Slide 76 text
Design tool should likely haves
Built on the web
Easy to update with new versions of design system
Override design system component behavior when necessary
Ability to prototype interactions by linking screens
Accessibility testing and feedback
Slide 77
Slide 77 text
Design tool nice-to haves
Integration with design system documentation
Collaboration features
Tools for developers to inspect designs
Animation support
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
Our experiment requires
Slide 81
Slide 81 text
Web components
Slide 82
Slide 82 text
No content
Slide 83
Slide 83 text
No content
Slide 84
Slide 84 text
Narrow / Small Medium Wide
Basic Layouts Using Storybook’s Design System
Slide 85
Slide 85 text
No content
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
No content
Slide 88
Slide 88 text
No content
Slide 89
Slide 89 text
No content
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
No content
Slide 92
Slide 92 text
Mobile
Narrow / Small
Tablet
Medium
Desktop
Wide
Very Close to the Original Design
Slide 93
Slide 93 text
No content
Slide 94
Slide 94 text
No content
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
No content
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
No content
Slide 103
Slide 103 text
No content
Slide 104
Slide 104 text
No content
Slide 105
Slide 105 text
No content
Slide 106
Slide 106 text
No content
Slide 107
Slide 107 text
No content
Slide 108
Slide 108 text
No content
Slide 109
Slide 109 text
No content
Slide 110
Slide 110 text
No content
Slide 111
Slide 111 text
Design tool must haves
Full responsive support
Treats design system as the source of truth
Import design system components and create variants
Design from scratch when existing components won't do
Feel like a true design tool
Slide 112
Slide 112 text
Design tool should likely haves
Built on the web
Easy to update with new versions of design system
Override design system component behavior
Ability to prototype interactions by linking screens
Accessibility testing and feedback
Slide 113
Slide 113 text
Design tool nice-to haves
Integration with design system documentation
Collaboration features
Tools for developers to inspect designs
Animation support
Slide 114
Slide 114 text
No content
Slide 115
Slide 115 text
Try them for yourself
Slide 116
Slide 116 text
Discovery Prototype
Sketching
Extract Components Design System
So how close are we to something like this?
Slide 117
Slide 117 text
No content
Slide 118
Slide 118 text
No content
Slide 119
Slide 119 text
No content
Slide 120
Slide 120 text
No content
Slide 121
Slide 121 text
No content
Slide 122
Slide 122 text
No content
Slide 123
Slide 123 text
No content
Slide 124
Slide 124 text
Maybe it’s not HTML mockups that make this work…
Discovery Prototype
Sketching
Extract Components Design System
Slide 125
Slide 125 text
Maybe it’s design and development as one…
Discovery Prototype
Sketching
Extract Components Design System
Slide 126
Slide 126 text
Perhaps we can improve this process…
Planning Static Wireframes Static Mockups HTML, CSS and JS Launch
Design Development
Hando
Slide 127
Slide 127 text
Perhaps we can improve this process…
Planning Static Wireframes Static Mockups HTML, CSS and JS Launch
Slide 128
Slide 128 text
No content
Slide 129
Slide 129 text
No content
Slide 130
Slide 130 text
Thank You!
Slide 131
Slide 131 text
Thank You!
Slide 132
Slide 132 text
And most of all, our clients who entrust us to work on their design systems with them. Without
these opportunities, we wouldn’t have anything to share in articles or in presentations like this.
Thank You!