Slide 1
Slide 1 text
From purpose
to patterns
Alla Kholmatova
@craftui
Slide 2
Slide 2 text
Teams with effective design
systems are first teams with
effective design principles.
Slide 3
Slide 3 text
genuine
#1 Good principles are
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
Visual and tactile.
— Trello
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Design for humans.
— Citymapper
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Can you point to examples that
demonstrate this principle?
Test
Slide 12
Slide 12 text
have a point
of view
#2 Good principles
Slide 13
Slide 13 text
Simple.
Useful.
Enjoyable.
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Direction over
choice.
— Medium
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
Be timeless, not
cutting edge.
— TED
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
Could an opposite principle
work for another company?
Test it
Slide 22
Slide 22 text
Relevant Irrelevant?
Usable Unusable?
Slide 23
Slide 23 text
Timeless Cutting edge
Direction Choice
Bold Understated
Slide 24
Slide 24 text
1 2
3 4
Slide 25
Slide 25 text
Souce: Tips from Lyft: Let Your Brand Drive Your UX Decisions
Slide 26
Slide 26 text
Actionable
#3 Good principles are
Slide 27
Slide 27 text
Generic Specific
Aspirations Rules
“Universal” “One column layouts only”
Slide 28
Slide 28 text
Source: Experience Principles at Deliveroo by Jonny Burch
Slide 29
Slide 29 text
Source: Experience Principles at Deliveroo by Jonny Burch
Slide 30
Slide 30 text
Reduce concepts to
increase confidence.
— Windows UX
Slide 31
Slide 31 text
•
Have you introduced a new concept?
•
Why? Is it necessary?
•
Can you get rid of unneeded concepts?
•
Does the UX continue the same concept?
— Windows UX
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
Bold Optimistic
Practical,
with a wink
Slide 34
Slide 34 text
memorable
#4 Good principles are
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
Grandma first
— Wonderbly
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
This is for everyone
— Government Digital Service
Slide 39
Slide 39 text
Ideal number
Slide 40
Slide 40 text
Will your team be able to
remember these principles?
Test it
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
Is it in TUNE?
— Spotify
Slide 43
Slide 43 text
Source: How our new design principles have shaped the way we work at Domain by Jon Hollamby
Slide 44
Slide 44 text
•
genuine
•
opinionated
•
actionable
•
memorable
Good principles are
Slide 45
Slide 45 text
Defining your
principles
Slide 46
Slide 46 text
Purpose informs
principles
Slide 47
Slide 47 text
Purpose and values
Principles
Design patterns
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
Spread the ideas as far and as
wide as possible
Timeless, not cutting edge
Conventional familiar patterns
Slide 50
Slide 50 text
Know who the
principles are for
Slide 51
Slide 51 text
Source: Creating Etsy’s Design Principles by Magera Moon
Slide 52
Slide 52 text
Souce: Creating Etsy’s Design Principles by Magera Moon
Slide 53
Slide 53 text
Source: Creating Etsy’s Design Principles by Magera Moon
Slide 54
Slide 54 text
Principles kick off
workshop
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
•
not more than 3-5
•
work together as a set
•
opposite mustn’t be negative
•
practical examples
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
Simple over
flexible
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
Robust over
subtle
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
Fun, not
formal
Slide 64
Slide 64 text
Everything’s going
swimmingly
You're about halfway through your switch to Bulb. We thought
we'd pop by to keep you in the loop. We'll take your first
monthly payment of £71 on the 11th of May.
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
Test and
evolve
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
When we design a new
component, we want to make
sure it addresses all four of those.
Each piece should live up to it.
Roy Stanfield, Principal Interaction Designer, Airbnb
“
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
•
purpose informs principles
•
know who they are for
•
workshop to find shared themes
•
test and evolve
Tips for defining your principles:
Slide 75
Slide 75 text
Redesigning Pinterest, Block By Block
Andreas Pihlström
A Matter Of Principle
Julie Zhuo
Design Doesn’t Scale
Stanley Wood
7 Steps to Creating
Differentiated User Experiences
Jonathan Lovatt-Young
An open source collection of
Design Principles
Ben Brignell
Creating Great Design Principles
Jared M. Spool
Principles To Build By
Stephen Anderson
Exclusive Design
Vasilis van Gemert