Design
Emotion
&
Visual experience of
today’s webdesign
With Marie-Cécile Paccard!
Salon du Numérique – www2012!
April 20th 2012!
Slide 2
Slide 2 text
digital design,
web & social media
www.mcpaccard.com
Born in 1981, speaks english,
french and LOLspeak
6 years experienced web and
digital pro designer,
Twitter addict
Slide 3
Slide 3 text
What is
webdesign?
1
Slide 4
Slide 4 text
What is
webdesign?
1
Slide 5
Slide 5 text
Pic by Michael Anthony - SXC!
Slide 6
Slide 6 text
Pic by Michael Anthony - SXC!
Slide 7
Slide 7 text
Design
is about
solving
problems.
Slide 8
Slide 8 text
Design
is about
solving
problems.
(I’ve learnt it the hard way.)
Slide 9
Slide 9 text
Gustav Klimt – Adele Bloch-Bauerʼs portrait!
Leonard de Vinci – La Joconde!
Source: Wikimedia Commons !
!
➼ This is art.
Slide 10
Slide 10 text
➼ This is
design.
Slide 11
Slide 11 text
TROLL!
!
Slide 12
Slide 12 text
➼ Some (web)
designers
are a bit…
Slide 13
Slide 13 text
http://thehelpfulengineer.com/!
➼ Real (web)
designers
are more
like…
Slide 14
Slide 14 text
The Internets are full of constraints!
Screen
resolutions Platforms,
CMS
Client
needs
Business
specific
constraints
Accessibility
and
disabilities
usability
Users
skills Technical
stuff
Flash
(brrr…)
Browsers
(F**K IE!)
Slide 15
Slide 15 text
➼ Real (web)
designers
know them
all…
Pic by Ove Tøpfer - SXC!
Slide 16
Slide 16 text
What about
creativity?
2
Slide 17
Slide 17 text
➼ This is
creativity.
Beautiful ad from Mercedes Benz!
Slide 18
Slide 18 text
➼ This is good
design.
Clean interface from Google Groups!
Slide 19
Slide 19 text
Both can co-exist.
Slide 20
Slide 20 text
http://www.thelounge.fi/!
Slide 21
Slide 21 text
http://www.glitch.com/!
Slide 22
Slide 22 text
http://ndesign-studio.com/!
Slide 23
Slide 23 text
Webdesign should
be the perfect mix
between
engineering and
creativity
!
Slide 24
Slide 24 text
essential
ideas about
design
3
Slide 25
Slide 25 text
Mies Van Der Rohe
Architect, 1886 - 1969
➼ LESS IS MORE.
Photo: Chicago History Museum
HB-8506-K4, Hedrich Blessing (detail)!
!
Slide 26
Slide 26 text
Mies Van Der Rohe
Architect, 1886 - 1969
➼ God is
in the details.
Photo: Chicago History Museum
HB-8506-K4, Hedrich Blessing (detail)!
!
Slide 27
Slide 27 text
Louis Sullivan
Architect, 1856 - 1924
➼ Form
follows
function.
Photos: Chicago History Museum
HB-8506-K4, Hedrich Blessing (detail)!
!
Photo: Wikimedia Commons!
!
Slide 28
Slide 28 text
http://www.deuxhuithuit.com/!
Slide 29
Slide 29 text
http://plus.google.com/!
Slide 30
Slide 30 text
Ideas and
statements from
the past are still
valuable.
!
Slide 31
Slide 31 text
‘’More is more’’
The christmas
tree effect
4
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Click me !
Slide 35
Slide 35 text
Click me !
SPECIAL
DEAL!
Slide 36
Slide 36 text
➼ Rather self explanatory.
Slide 37
Slide 37 text
Users can’t look
at everything at the
same time.
Choose wisely.
!
Slide 38
Slide 38 text
Let’s step 10
years ago.
5
Slide 39
Slide 39 text
Yesterday
Slide 40
Slide 40 text
Yesterday
(All my troubles seemed so far away…)
Slide 41
Slide 41 text
http://www… wait, do you really want to know???!
Slide 42
Slide 42 text
➼ Yesterday was flat.
➼ Yesterday was floating.
➼ Yesterday had no grid.
➼ Yesterday was color-barfing.
➼ Yesterday had no images.
➼ Yesterday. MEH.
Slide 43
Slide 43 text
Today is all
about texture
and volume.
6
Slide 44
Slide 44 text
Real-looking
elements
=
A link to reality
=
emotion
Pic by Mokra - SXC!
Slide 45
Slide 45 text
Emotion
=
ENGAGEMENT
Nothing makes you engage more
than a cute cat. <3
Kitty pic by Sarah Williams - SXC!
Slide 46
Slide 46 text
http://www.mathem.se/!
Slide 47
Slide 47 text
http://www.designsponge.com/!
Slide 48
Slide 48 text
http://bergcloud.com/littleprinter/!
Slide 49
Slide 49 text
Volume and
texture tend to
engage your
audience.
!
Slide 50
Slide 50 text
Today is
retro.
7
Slide 51
Slide 51 text
http://instagr.am!
Slide 52
Slide 52 text
http://www.austineastciders.com/!
Slide 53
Slide 53 text
http://www.pointlesscorp.com/!
Slide 54
Slide 54 text
http://www.artribal.com/!
Slide 55
Slide 55 text
http://fall.tnvacation.com/!
Slide 56
Slide 56 text
Fashion is a
perpetual clock.
!
Slide 57
Slide 57 text
Vertical
rythm is the
new layout.
8
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
There is a full
universe above
the fold. Don’t fear
scrolling down.
!
Slide 62
Slide 62 text
Texture and
volume work
well with
fingers.
9
Slide 63
Slide 63 text
http://www.appdesignvault.com/!
Slide 64
Slide 64 text
http://synth76.com/!
Slide 65
Slide 65 text
People love
electronic devices,
yet they like them
to look like real
things.
!
Slide 66
Slide 66 text
What did
you learn?
10
Slide 67
Slide 67 text
!
➼ Webdesign should be the perfect mix between
engineering and creativity.!
➼ Ideas and statements from the past are still
valuable :!
➼ ! Less is more!
➼ ! God is in the details!
➼ ! Form follows function!
➼ Users canʼt look at everything at the same time.!
➼ Volume and texture tend to engage your audience.!
➼ Fashion is a perpetual clock.!
➼ There is a full universe above the fold.!
➼ People love electronic devices, yet they like them to
look like real things.!