Slide 1
Slide 1 text
Designing Systems
Theory, Practice, and the Unfortunate In-between
@paulrobertlloyd
Design Exchange Nottingham / 10 August 2016
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Photograph: © Willy Rizzo
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Photograph: © Marcel Gautherot
Slide 9
Slide 9 text
The Shock of the New: Trouble in Utopia
BBC Television, 1980
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
— Frank Pick, 1926
The future of London cannot
be an accident like the past.
If it is to hold together, to
remain a workable,
manageable unit, it must
now be planned, be
designed, be organised.
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
Photograph: © Alexander Baxevanis
Slide 14
Slide 14 text
Magpie Studio
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
— Frank Pick, 1916
The test of the goodness of a thing is its fitness
for use. If it fails on this first test, no amount of
ornamentation will make it any better; it will only
make it more expensive, more foolish.
Slide 18
Slide 18 text
What is a design system?
Slide 19
Slide 19 text
Products
Tools
Foundations
Principles
Slide 20
Slide 20 text
Principles
• User-centred
• Applicable across organisation
• Developed collaboratively
Products
Tools
Foundations
Principles
Principles
Slide 21
Slide 21 text
Foundations
• Discipline-centred
• Applicable within functional teams
• Developed collaboratively
Products
Tools
Foundations
Principles
Foundations
Slide 22
Slide 22 text
Designers: brand identity guidelines
Slide 23
Slide 23 text
Writers: editorial style guides
Slide 24
Slide 24 text
Developers: Code styles/conventions
editorconfig.org
Slide 25
Slide 25 text
— Phil Karlton
Shared vocabularies
There are only two hard things in computer
science: cache invalidation and naming things.
Slide 26
Slide 26 text
1. Cut up an interface into its component parts
2. Group similar components
3. Everyone comes up with a name for each group
4. Once everyone has thought of a name, reveal them!
5. Discuss
Slide 27
Slide 27 text
Tools
• Implementor-centred
• Applicable to individuals and
smaller teams
• Enable rapid development of
products
Products
Tools
Foundations
Principles
Tools
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
Component libraries
http://fractal.build
Slide 30
Slide 30 text
Products
• User-centred
• Websites, native apps, signage,
marketing, internal comms…
Products
Tools
Foundations
Principles
Products
Slide 31
Slide 31 text
Products
Tools
Foundations
Principles Increasing susceptibility to change
Slide 32
Slide 32 text
Principles Products
Slide 33
Slide 33 text
Modular design
Modularisation Variation Composition
Slide 34
Slide 34 text
Component concerns
Behaviour
Presentation
Structure
Content
Content
Slide 35
Slide 35 text
## Movie rating
The average rating is 4 out of 5 stars, from a total
of [12 reviews](/reviews).
### Add your score
Your name: [ ]
Rating: ( ) 1 ( ) 2 ( ) 3 (•) 4 ( ) 5
[ ] Remember my details
( Submit rating )
Slide 36
Slide 36 text
Component concerns
Behaviour
Presentation
Structure
Content
Structure
Slide 37
Slide 37 text
4 out of 5 stars
Slide 38
Slide 38 text
Slide 39
Slide 39 text
.c-[module-name] {…}
.c-[module-name]__body {…}
.c-[module-name]__header {…}
.c-[module-name]__title {…}
.c-[module-name]__main {…}
.c-[module-name]__items {…}
.c-[module-name]__item {…}
.c-[module-name]__content {…}
.s-prose {…}
.c-[module-name]__footer {…}
Slide 40
Slide 40 text
Component concerns
Behaviour
Presentation
Structure
Content
Presentation
Slide 41
Slide 41 text
// Colour palette
$color-brand--crimson: #c00;
$color-brand--mustard: #fc0;
$color-neutral--darkest: #222;
$color-neutral--darker: #444;
$color-neutral--dark: #666;
$color-neutral--mid: #888;
$color-neutral--light: #bbb;
$color-neutral--lighter: #ddd;
$color-neutral--lightest: #eee;
Slide 42
Slide 42 text
// Colour assignments
$color-text: $color-neutral--darkest;
$color-background--light: $color-neutral--darkest;
$color-background--dark: $color-neutral—darkest;
$color-link: $color-brand--crimson;
$color-link--hover: darken($color-brand--crimson, 10%);
$color-link--active: lighten($color-brand--crimson, 10%);
Slide 43
Slide 43 text
// Colour map
$colors: (
crimson: #c00,
mustard: #fc0,
neutral: (
darkest: #222;
darker: #444;
dark: #666;
base: #888;
light: #bbb;
lighter: #ddd;
lightest: #eee;
)
);
// Helper
@function color($name, $var: null) {
@if ($var != null) {
@return map-get(map-get($colors, $name), $var);
} @else {
@return map-get($colors, $name);
}
}
// Usage example
.c-module__title {
color: color(neutral, darkest);
}
Slide 44
Slide 44 text
.c-module__title {
font: bold 2em/1 Georgia, serif;
margin-bottom: 1.5em;
padding-top: 0.75em;
letter-spacing: 0.0025em;
text-transform: uppercase;
color: #222;
}
.c-module__title {
@include typeset(title, 2);
margin-bottom: ($baseline * 4);
padding-top: ($baseline * 2);
color: $color-text;
}
Slide 45
Slide 45 text
Guardian Style Sheets (GUSS)
github.com/guardian/guss
gs-span(3)
fs-header(2)
fs-headline(1)
fs-data(3)
gs-height(6)
colour($c-feature-main)
Slide 46
Slide 46 text
Component concerns
Behaviour
Presentation
Structure
Content
Behaviour
Slide 47
Slide 47 text
— Ethan Marcotte
I’ve found that thinking
about my design as existing
in broad experience tiers – in
layers – is one of the best
ways of designing for the
modern web.
Slide 48
Slide 48 text
Modular design
Variation Composition
Modularisation
Slide 49
Slide 49 text
Extensibility
2. Modify an existing component
1. Create a new component
Slide 50
Slide 50 text
The container model
next.theguardian.com/blog/container-model-blended-content
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
— Oliver Wendell Holmes Jr.
I would not give a fig for the
simplicity this side of
complexity, but I would give
my life for the simplicity on
the other side of complexity.
Slide 53
Slide 53 text
Modular design
Composition
Variation
Modularisation
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
The wrong analogy?
• Composite
• Static
• Encapsulated
• Clear affordances
• Separate concerns
• Dynamic
• Leaky
• Difficult to reason with
>
Slide 56
Slide 56 text
Bringing encapsulation to the web
React
facebook.github.io/react
Web Components
webcomponents.org
BEM
en.bem.info
Slide 57
Slide 57 text
— Eliel Saarinen
Always design a thing by considering it in its
next larger context – a chair in a room, a room in
a house, a house in an environment, an
environment in a city plan.
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
No system is or should be perfect
Slide 60
Slide 60 text
Photograph: © Kirk Bauer
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
Design System
Lifecycle
Principles
Tools
Foundations
Products
Slide 63
Slide 63 text
Thank-you!
Attribution, Non-Commercial, Share Alike
@paulrobertlloyd / paulrobertlloyd.com