The Invisible Side of Design

Transcript

The Invisible Side of Design
Vitaly Friedman, @smashingmag
Tuesday, October 11, 11

Dear Web designers,
something fishy is going on.

Inspiration.

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.”

View Slide

The inspiration that we seek online
is of a different nature.

View Slide

We spend too much time exploring
what other designers do.

View Slide

We collect reusable design examples.

View Slide

We aspire to design trends.

View Slide

We are drowning in an ocean
of visual inspiration.

View Slide

Our workflow is poisoned with
search for existing solutions.

View Slide

http://www.ruhotenuf.ca/

View Slide

Such “inspired” designs are often
generic or stuck in the ”trends trap”.

View Slide

We should strive for holistic designs.

View Slide

When we look at a design, we don’t
see a design, we are experiencing it.

View Slide

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

View Slide

It doesn’t explain design decisions.
problems.
requirements.
constraints.
testing.
context.

View Slide

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
“

View Slide

What we miss is the
invisible side of those designs.

View Slide

1Good Design
Is Invisible

View Slide

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.

View Slide

Everything was designed
at some point.

View Slide

Some things are so well designed
that we don’t notice them anymore.

View Slide

Our experience of them is invisible;
almost beyond form and function.

View Slide

...unless they break.

View Slide

The same holds true for Web design.

View Slide

Users stop noticing Web design if it works.

View Slide

Users keep noticing design if it’s broken.

View Slide

...or when it gets in the way.

View Slide

...or when it just hurts.

View Slide

Good design strikes a balance
between elegance and invisibility.

View Slide

Invisible design relates to function
and purpose, rather than appearance.

View Slide

Yet compared to visible design,
the invisible layer is barely explored.

View Slide

2 Elements
Of Invisible
Design

View Slide

Invisible design forces us to approach
design problems from a different angle.

View Slide

It makes us think about the
substance of our decisions.

View Slide

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.

View Slide

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

View Slide

Invisible design is driven by a
timeless idea.
The power of Idea
It’s original, tailored to the client’s needs.

View Slide

Invisible design always has a value, a
purpose, a meaning — a character.
The power of Virtue
It has a consistent, authentic voice.

View Slide

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.

View Slide

Invisible design never cries for attention.
It stands to the side and serves its function.
The power of Utility
It’s useful and usable.

View Slide

Invisible design is never guesswork.
It demands informed decisions.
The power of Measurement
It’s always tested, verified, measured.

View Slide

Invisible design is committed
to quality and improvement.
The power of Ambition
It never takes shortcuts.

View Slide

Quality of our design decisions.

View Slide

Quality of our content.

View Slide

Quality of our deliverables.

View Slide

Quality of our code.

View Slide

Invisible design communicates through
the tone, voice and meaning of its copy.
The power of Language
It informs and engages.

View Slide

“[...] 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

View Slide

“Eating well is as important as
living well. So everything we offer
is made from great, fresh-tasting
ingredients.”

View Slide

“Fancy joining our family? Love,
friendship but no pocket money.”

View Slide

“By the way, we will never, ever pass
your details on to anyone else, but you
knew that anyway, didn't you.”

View Slide

With language, we can also
engage users emotionally.

View Slide

And the key to it is storytelling.

View Slide

Stories can inspire and illuminate.
They can help us empathize with users.

View Slide

What if we approach design like
writers approach stories?

View Slide

Mystery
Suspense
Uncertainty
Intrigue
Romance
Cliffhanger
Game mechanics
Flashback
Reversed story
Chekov’s gun

View Slide

On the Web, we can seed powerful
stories in our user interfaces.

View Slide

Web designers are storytellers.

View Slide

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

View Slide

All these attributes form a gateway to
effective and usable interfaces.

View Slide

Adhering to them consistently
makes design invisible over time.

View Slide

3To Conclude

View Slide

Our work would benefit from a
stronger focus on its invisible side.

View Slide

Good designers can see both the
forest and the trees, the visible
and invisible halves of design.
— Francisco Inchauste
“

View Slide

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.

View Slide

Let’s start right now.

View Slide

@smashingmag
Thank you
for your attention!

View Slide

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

View Slide

The Invisible Side of Design

The Invisible Side of Design

Vitaly Friedman

More Decks by Vitaly Friedman

Other Decks in Design

Featured

Transcript