Slide 1
Slide 1 text
The Invisible Side of Design
Vitaly Friedman, @smashingmag
Tuesday, October 11, 11
Slide 2
Slide 2 text
Dear Web designers,
something fishy is going on.
Tuesday, October 11, 11
Slide 3
Slide 3 text
Inspiration.
Tuesday, October 11, 11
Slide 4
Slide 4 text
Tuesday, October 11, 11
Slide 5
Slide 5 text
in-spi-ra-tion
noun, \ˌin(t)-spə-ˈrā-shən\
“A divine influence or action on a
person believed to qualify him or
her to receive and communicate
sacred revelation.”
Tuesday, October 11, 11
Slide 6
Slide 6 text
The inspiration that we seek online
is of a different nature.
Tuesday, October 11, 11
Slide 7
Slide 7 text
We spend too much time exploring
what other designers do.
Tuesday, October 11, 11
Slide 8
Slide 8 text
We collect reusable design examples.
Tuesday, October 11, 11
Slide 9
Slide 9 text
We aspire to design trends.
Tuesday, October 11, 11
Slide 10
Slide 10 text
We are drowning in an ocean
of visual inspiration.
Tuesday, October 11, 11
Slide 11
Slide 11 text
Our workflow is poisoned with
search for existing solutions.
Tuesday, October 11, 11
Slide 12
Slide 12 text
Tuesday, October 11, 11
Slide 13
Slide 13 text
http://www.ruhotenuf.ca/
Tuesday, October 11, 11
Slide 14
Slide 14 text
http://www.ruhotenuf.ca/
Tuesday, October 11, 11
Slide 15
Slide 15 text
http://www.ruhotenuf.ca/
Tuesday, October 11, 11
Slide 16
Slide 16 text
Tuesday, October 11, 11
Slide 17
Slide 17 text
http://www.ruhotenuf.ca/
Tuesday, October 11, 11
Slide 18
Slide 18 text
Such “inspired” designs are often
generic or stuck in the ”trends trap”.
Tuesday, October 11, 11
Slide 19
Slide 19 text
We should strive for holistic designs.
Tuesday, October 11, 11
Slide 20
Slide 20 text
Tuesday, October 11, 11
Slide 21
Slide 21 text
Tuesday, October 11, 11
Slide 22
Slide 22 text
Tuesday, October 11, 11
Slide 23
Slide 23 text
Tuesday, October 11, 11
Slide 24
Slide 24 text
When we look at a design, we don’t
see a design, we are experiencing it.
Tuesday, October 11, 11
Slide 25
Slide 25 text
We can’t see a design, we are experiencing it.
We are just passive observers and there isn’t
much we can do about it because we laack
context.
It’s just solution to someone else’s problem
Tuesday, October 11, 11
Slide 26
Slide 26 text
Tuesday, October 11, 11
Slide 27
Slide 27 text
It doesn’t explain design decisions.
problems.
requirements.
constraints.
testing.
context.
Tuesday, October 11, 11
Slide 28
Slide 28 text
Every time we look at a design, we are
reading the language of design
expressed differently. We might
understand the vocabulary of single
words, but we don't understand the
meaning of sentences.
— an unknown designer
“
Tuesday, October 11, 11
Slide 29
Slide 29 text
What we miss is the
invisible side of those designs.
Tuesday, October 11, 11
Slide 30
Slide 30 text
1Good Design
Is Invisible
Tuesday, October 11, 11
Slide 31
Slide 31 text
As designers, we tend to get distracted by aesthetics of our creations,
and often do not pay enough attention to the other, invisible side of
our work. This talk discusses the significance of purpose, substance as
well as context in our design decisions. It argues about the value of
storytelling, content strategy and thorough editorial work. It also
provides practical examples of and insights into the invisible side of
design. To recognize invisible design and understand how to create it,
we have to look differently at the world around us. We have to open
our mind to the idea that design is not only what we see, but also
(and most importantly) what we don't see. Design is a constant in this
life of ours. It surrounds us and touches us daily. It exists everywhere
and it supports and guides us. The stage you are looking at right now
has been designed based on certain criteria and aesthetics. You might
have looked at colors and placement of things. Things you might not
have considered as closely are the size of this stage, the position of the
microphone, the lighting and the color of my shirt. Both of these are
important parts of your user experience and the design of the stage.
Tuesday, October 11, 11
Slide 32
Slide 32 text
As designers, we tend to get distracted by aesthetics of our creations,
and often do not pay enough attention to the other, invisible side of
our work. This talk discusses the significance of purpose, substance as
well as context in our design decisions. It argues about the value of
storytelling, content strategy and thorough editorial work. It also
provides practical examples of and insights into the invisible side of
design. To recognize invisible design and understand how to create it,
we have to look differently at the world around us. We have to open
our mind to the idea that design is not only what we see, but also
(and most importantly) what we don't see. Design is a constant in this
life of ours. It surrounds us and touches us daily. It exists everywhere
and it supports and guides us. The stage you are looking at right now
has been designed based on certain criteria and aesthetics. You might
have looked at colors and placement of things. Things you might not
have considered as closely are the size of this stage, the position of the
microphone, the lighting and the color of my shirt. Both of these are
important parts of your user experience and the design of the stage.
Tuesday, October 11, 11
Slide 33
Slide 33 text
As designers, we tend to get distracted by aesthetics of our creations,
and often do not pay enough attention to the other, invisible side of
our work. This talk discusses the significance of purpose, substance as
well as context in our design decisions. It argues about the value of
storytelling, content strategy and thorough editorial work. It also
provides practical examples of and insights into the invisible side of
design. To recognize invisible design and understand how to create it,
we have to look differently at the world around us. We have to open
our mind to the idea that design is not only what we see, but also
(and most importantly) what we don't see. Design is a constant in this
life of ours. It surrounds us and touches us daily. It exists everywhere
and it supports and guides us. The stage you are looking at right now
has been designed based on certain criteria and aesthetics. You might
have looked at colors and placement of things. Things you might not
have considered as closely are the size of this stage, the position of the
microphone, the lighting and the color of my shirt. Both of these are
important parts of your user experience and the design of the stage.
Tuesday, October 11, 11
Slide 34
Slide 34 text
As designers, we tend to get distracted by aesthetics of our creations,
and often do not pay enough attention to the other, invisible side of
our work. This talk discusses the significance of purpose, substance as
well as context in our design decisions. It argues about the value of
storytelling, content strategy and thorough editorial work. It also
provides practical examples of and insights into the invisible side of
design. To recognize invisible design and understand how to create it,
we have to look differently at the world around us. We have to open
our mind to the idea that design is not only what we see, but also
(and most importantly) what we don't see. Design is a constant in this
life of ours. It surrounds us and touches us daily. It exists everywhere
and it supports and guides us. The stage you are looking at right now
has been designed based on certain criteria and aesthetics. You might
have looked at colors and placement of things. Things you might not
have considered as closely are the size of this stage, the position of the
microphone, the lighting and the color of my shirt. Both of these are
important parts of your user experience and the design of the stage.
Tuesday, October 11, 11
Slide 35
Slide 35 text
As designers, we tend to get distracted by aesthetics of our creations,
and often do not pay enough attention to the other, invisible side of
our work. This talk discusses the significance of purpose, substance as
well as context in our design decisions. It argues about the value of
storytelling, content strategy and thorough editorial work. It also
provides practical examples of and insights into the invisible side of
design. To recognize invisible design and understand how to create it,
we have to look differently at the world around us. We have to open
our mind to the idea that design is not only what we see, but also
(and most importantly) what we don't see. Design is a constant in this
life of ours. It surrounds us and touches us daily. It exists everywhere
and it supports and guides us. The stage you are looking at right now
has been designed based on certain criteria and aesthetics. You might
have looked at colors and placement of things. Things you might not
have considered as closely are the size of this stage, the position of the
microphone, the lighting and the color of my shirt. Both of these are
important parts of your user experience and the design of the stage.
Tuesday, October 11, 11
Slide 36
Slide 36 text
Everything was designed
at some point.
Tuesday, October 11, 11
Slide 37
Slide 37 text
Some things are so well designed
that we don’t notice them anymore.
Tuesday, October 11, 11
Slide 38
Slide 38 text
Tuesday, October 11, 11
Slide 39
Slide 39 text
Our experience of them is invisible;
almost beyond form and function.
Tuesday, October 11, 11
Slide 40
Slide 40 text
...unless they break.
Tuesday, October 11, 11
Slide 41
Slide 41 text
The same holds true for Web design.
Tuesday, October 11, 11
Slide 42
Slide 42 text
Users stop noticing Web design if it works.
Tuesday, October 11, 11
Slide 43
Slide 43 text
Users keep noticing design if it’s broken.
Tuesday, October 11, 11
Slide 44
Slide 44 text
...or when it gets in the way.
Tuesday, October 11, 11
Slide 45
Slide 45 text
...or when it just hurts.
Tuesday, October 11, 11
Slide 46
Slide 46 text
Good design strikes a balance
between elegance and invisibility.
Tuesday, October 11, 11
Slide 47
Slide 47 text
Invisible design relates to function
and purpose, rather than appearance.
Tuesday, October 11, 11
Slide 48
Slide 48 text
Yet compared to visible design,
the invisible layer is barely explored.
Tuesday, October 11, 11
Slide 49
Slide 49 text
2 Elements
Of Invisible
Design
Tuesday, October 11, 11
Slide 50
Slide 50 text
Invisible design forces us to approach
design problems from a different angle.
Tuesday, October 11, 11
Slide 51
Slide 51 text
It makes us think about the
substance of our decisions.
Tuesday, October 11, 11
Slide 52
Slide 52 text
http://www.ruhotenuf.ca/
Parallax / Nike Better World as the first
example and many copycats. I actually asked
one of the designers why he used it - and he
replied because it’s trendy and cool.
One of the most beautiful examples I’ve seen in
a while, but t doesn’t mean that it performs
better than a classic list of links. In fact, we
know literally nothing about its usability.
We can discuss the atmosphere the design
creates, design of body copy, slider, placement of
the search box, but the truth is that we have no
idea about the core of this design: reasons for
every single design element.
Tuesday, October 11, 11
Slide 53
Slide 53 text
Substance combines six key
qualities of invisible design.
the power of Virtue
the power of Idea
the power of Language
the power of Utility
the power of Measurement
the power of Ambition
Tuesday, October 11, 11
Slide 54
Slide 54 text
Invisible design is driven by a
timeless idea.
The power of Idea
It’s original, tailored to the client’s needs.
Tuesday, October 11, 11
Slide 55
Slide 55 text
Tuesday, October 11, 11
Slide 56
Slide 56 text
Tuesday, October 11, 11
Slide 57
Slide 57 text
Invisible design always has a value, a
purpose, a meaning — a character.
The power of Virtue
It has a consistent, authentic voice.
Tuesday, October 11, 11
Slide 58
Slide 58 text
http://www.ruhotenuf.ca/
Parallax / Nike Better World as the first
example and many copycats. I actually asked
one of the designers why he used it - and he
replied because it’s trendy and cool.
One of the most beautiful examples I’ve seen in
a while, but t doesn’t mean that it performs
better than a classic list of links. In fact, we
know literally nothing about its usability.
We can discuss the atmosphere the design
creates, design of body copy, slider, placement of
the search box, but the truth is that we have no
idea about the core of this design: reasons for
every single design element
If you had “go to the next page” in the slider, it
wouldn’t work.
Tuesday, October 11, 11
Slide 59
Slide 59 text
Invisible design never cries for attention.
It stands to the side and serves its function.
The power of Utility
It’s useful and usable.
Tuesday, October 11, 11
Slide 60
Slide 60 text
Tuesday, October 11, 11
Slide 61
Slide 61 text
Tuesday, October 11, 11
Slide 62
Slide 62 text
Tuesday, October 11, 11
Slide 63
Slide 63 text
Tuesday, October 11, 11
Slide 64
Slide 64 text
Tuesday, October 11, 11
Slide 65
Slide 65 text
Tuesday, October 11, 11
Slide 66
Slide 66 text
Tuesday, October 11, 11
Slide 67
Slide 67 text
Tuesday, October 11, 11
Slide 68
Slide 68 text
Invisible design is never guesswork.
It demands informed decisions.
The power of Measurement
It’s always tested, verified, measured.
Tuesday, October 11, 11
Slide 69
Slide 69 text
Tuesday, October 11, 11
Slide 70
Slide 70 text
Tuesday, October 11, 11
Slide 71
Slide 71 text
Tuesday, October 11, 11
Slide 72
Slide 72 text
Tuesday, October 11, 11
Slide 73
Slide 73 text
Tuesday, October 11, 11
Slide 74
Slide 74 text
Tuesday, October 11, 11
Slide 75
Slide 75 text
Tuesday, October 11, 11
Slide 76
Slide 76 text
Invisible design is committed
to quality and improvement.
The power of Ambition
It never takes shortcuts.
Tuesday, October 11, 11
Slide 77
Slide 77 text
Quality of our design decisions.
Tuesday, October 11, 11
Slide 78
Slide 78 text
Quality of our content.
Tuesday, October 11, 11
Slide 79
Slide 79 text
Quality of our deliverables.
Tuesday, October 11, 11
Slide 80
Slide 80 text
Quality of our code.
Tuesday, October 11, 11
Slide 81
Slide 81 text
Invisible design communicates through
the tone, voice and meaning of its copy.
The power of Language
It informs and engages.
Tuesday, October 11, 11
Slide 82
Slide 82 text
“[...] the empty dog-kennel was
filled up with a great dog—deep
mouthed and black-haired like
Him, and he was very angry at the
sight of me, and sprang out to get
at me. [...]”
— Charles Dickens
Tuesday, October 11, 11
Slide 83
Slide 83 text
“Eating well is as important as
living well. So everything we offer
is made from great, fresh-tasting
ingredients.”
Tuesday, October 11, 11
Slide 84
Slide 84 text
Tuesday, October 11, 11
Slide 85
Slide 85 text
Tuesday, October 11, 11
Slide 86
Slide 86 text
Tuesday, October 11, 11
Slide 87
Slide 87 text
“Fancy joining our family? Love,
friendship but no pocket money.”
Tuesday, October 11, 11
Slide 88
Slide 88 text
“By the way, we will never, ever pass
your details on to anyone else, but you
knew that anyway, didn't you.”
Tuesday, October 11, 11
Slide 89
Slide 89 text
Tuesday, October 11, 11
Slide 90
Slide 90 text
With language, we can also
engage users emotionally.
Tuesday, October 11, 11
Slide 91
Slide 91 text
And the key to it is storytelling.
Tuesday, October 11, 11
Slide 92
Slide 92 text
Tuesday, October 11, 11
Slide 93
Slide 93 text
Stories can inspire and illuminate.
They can help us empathize with users.
Tuesday, October 11, 11
Slide 94
Slide 94 text
Tuesday, October 11, 11
Slide 95
Slide 95 text
What if we approach design like
writers approach stories?
Tuesday, October 11, 11
Slide 96
Slide 96 text
Mystery
Suspense
Uncertainty
Intrigue
Romance
Cliffhanger
Game mechanics
Flashback
Reversed story
Chekov’s gun
Tuesday, October 11, 11
Slide 97
Slide 97 text
On the Web, we can seed powerful
stories in our user interfaces.
Tuesday, October 11, 11
Slide 98
Slide 98 text
Tuesday, October 11, 11
Slide 99
Slide 99 text
Tuesday, October 11, 11
Slide 100
Slide 100 text
Tuesday, October 11, 11
Slide 101
Slide 101 text
Tuesday, October 11, 11
Slide 102
Slide 102 text
Tuesday, October 11, 11
Slide 103
Slide 103 text
Tuesday, October 11, 11
Slide 104
Slide 104 text
Tuesday, October 11, 11
Slide 105
Slide 105 text
Tuesday, October 11, 11
Slide 106
Slide 106 text
Tuesday, October 11, 11
Slide 107
Slide 107 text
Tuesday, October 11, 11
Slide 108
Slide 108 text
Tuesday, October 11, 11
Slide 109
Slide 109 text
Tuesday, October 11, 11
Slide 110
Slide 110 text
Tuesday, October 11, 11
Slide 111
Slide 111 text
Tuesday, October 11, 11
Slide 112
Slide 112 text
Tuesday, October 11, 11
Slide 113
Slide 113 text
Tuesday, October 11, 11
Slide 114
Slide 114 text
Tuesday, October 11, 11
Slide 115
Slide 115 text
Web designers are storytellers.
Tuesday, October 11, 11
Slide 116
Slide 116 text
Substance combines six key
qualities of invisible design.
the power of Virtue
the power of Idea
the power of Language
the power of Utility
the power of Measurement
the power of Ambition
Tuesday, October 11, 11
Slide 117
Slide 117 text
All these attributes form a gateway to
effective and usable interfaces.
Tuesday, October 11, 11
Slide 118
Slide 118 text
Adhering to them consistently
makes design invisible over time.
Tuesday, October 11, 11
Slide 119
Slide 119 text
3To Conclude
Tuesday, October 11, 11
Slide 120
Slide 120 text
Our work would benefit from a
stronger focus on its invisible side.
Tuesday, October 11, 11
Slide 121
Slide 121 text
Good designers can see both the
forest and the trees, the visible
and invisible halves of design.
— Francisco Inchauste
“
Tuesday, October 11, 11
Slide 122
Slide 122 text
Tuesday, October 11, 11
Slide 123
Slide 123 text
We could all benefit from writing
and talking about the ways we
work, the decisions we make and
the solutions we come up with.
That’s the core of invisible design.
Tuesday, October 11, 11
Slide 124
Slide 124 text
Let’s start right now.
Tuesday, October 11, 11
Slide 125
Slide 125 text
@smashingmag
Thank you
for your attention!
Tuesday, October 11, 11
Slide 126
Slide 126 text
Sources
Francisco Inchauste, “The Smashing Book 2”
Robert Mills, “A Practical Guide to Designing the Invisible”
Inspiration: http://www.flickr.com/photos/ashleyrosex/5121483039/sizes/l/in/photostream/
Inspiration 2: http://www.flickr.com/photos/sparth/4030081242/sizes/o/in/photostream/
Mosaic: http://www.flickr.com/photos/slavers/370944125/sizes/z/in/photostream/
Mug: http://www.flickr.com/photos/kelleyleigh/5144104014/
Theatre: http://www.flickr.com/photos/thisisbossi/3017227698/in/photostream/lightbox/
Painting: The Boyhood of Raleigh by Sir John Everett Millais, oil on canvas, 1870.
Comic: http://www.flickr.com/photos/bampop/2690586982/in/photostream/
Tijuana: http://www.flickr.com/photos/terri0325/2432811458/sizes/l/in/photostream/
Black Box: http://bit.ly/nXuCAT
Craft: http://www.flickr.com/photos/s-t-r-a-n-g-e/2239001689/sizes/z/
Ford model: http://www.atomicmall.com/view.php?id=1205765
Front cover image: Craig Henry
Tuesday, October 11, 11