1.
ID12
the 2012 trends
in interactive design

2.
about me
hi, my name is Petra Sell
german designer living in Belgium
design director @prophetsagency
follow me on twitter or behance
get more details on linkedin

3.
links in this pres:

4.
2012 design trends
emerging trends
in 2011

5.
1 emerging trends in 2011
multiple device
thinking

6.
foodsense.is
1 responsive design

7.
www.flowfestival.com
1 responsive design

8.
2 emerging trends in 2011
flash
steps aside

9.
www.onehourpersecond.com
2 campaign sites fully animated in css

10.
“
we will no longer continue
to develop Flash Player in the browser
to work with new mobile device
configurations (…) for Android and
BlackBerry PlayBook.
ADOBE press release
“

11.
3emerging trends in 2011
this is not
an arial

12.
www.kitchensinkstudios.com
3 mad about webfonts

13.
dentsunetwork.com
3 show off with typo text

14.
4emerging trends in 2011
parallaxed

15.
www.editsquarterly.com
4 parallax goes mainstream

16.
www.janploch.de
4 no words – just scroll

17.
www.soul-reaper.com
4 html5 comic

18.
5 emerging trends in 2011
infographics

19.
www.good.is/100
5 animated infographics are the new infographics

20.
slaveryfootprint.org
5 survey goes visual

21.
6 emerging trends in 2011
onepager deluxe

22.
www.nest.com/living-with-nest
6 scroll and discover

23.
www.neotokio.it
6 expandable content

24.
onepagelove.com
6 one page lover gallery

25.
2012 design trends
way to go
in 2012

26.
1 way to go in 2012
content is king,
users are queens

27.
“ Designers are no longer
designing for the device,
they are designing for
the experience.
“
COURTNEY BOYD MYERS, Features Editor of the next web

28.
1 editorial design experience on ipad

29.
1 instapaper: read later (+ remove the clutter)

30.
vimeo.com/36140636
1 couch mode

31.
livetour.mas.be
1 couch mode 2 (live tour through a museum)

32.
2
way to go in 2012
less
is more

33.
path.com
2 only the essence

34.
www.hanzell.com/winemaking.html
2 hugh emotional headers (and arrow links to content)

35.
3 way to go in 2012
apps redefining
the web

36.
www.icloud.com
3 apps inspire the web

37.
4 way to go in 2012
useful, custom
and pretty

38.
littlebigdetails.com/post/14671757055/path-when-signing-up-as-a-new-member-the-iphone
4 registration as convenient as possible

39.
4 form informs function

40.
www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake
4 make online reading more convenient

41.
contrastrebellion.com
4 not just good-looking

42.
“
With more companies and startups
placing high importance on design and
usability the web will only continue to
get better and more user-friendly.
Ryan Essmaker, design entrepreneur
“

43.
fab.com
4 design sells more than ever

44.
tattly.com
4 upgrade your body as design object

45.
www.thrivesolo.com
3 prettify administration

46.
5 way to go in 2012
even google
realizes that

47.
5 no more function over form (even google got it)

48.
“
you can’t just be geeky
anymore, you have to be
beautiful too.
“
BRAD MCCARTY, Managing Editor the next web

49.
www.googlezeitgeist.com/en/top-searches/adele
5 google zeitgeist

50.
mail.google.com/mail/?shva=1#compose
5 UI experience x 2000

51.
6 way to go in 2012
bookmarking
gets visual

52.
pinterest.com
6 is ‘pin it’ the new ‘like it’?

53.
gimmebar.com
6 inspiration library

54.
2012 design trends
technological
progress

55.
1
technological progress
animate

56.
beta.rallyinteractive.com
1 funky css3 shapes and animations

57.
nizoapp.com
1 css animation

58.
www.360langstrasse.sf.tv/page
1 scroll innovation

59.
lamoulade.com/#!/services
1 parallax pearle

60.
discover.store.sony.com/tablet/
1 no flash - all html

61.
2 technological progress
flash is
the new niche

62.
solutionsthatmatter.van.fedex.com/full.php#/healthcare/
2 and sometimes flash is just right

63.
experience.mtvnhd.com
2 webcam integration & video

64.
3technological progress
challenge
the site flow

65.
www.nikesnowboarding.com/products
3 innovative navigation

66.
www.crateandbarrel.com/dining-and-entertaining/individual-bowls/gemma-wave-bowl/s544135
3 functional navigation

67.
4 technological progress
custom fonts
are mainstream

68.
mahifx.com
4 minimalism: typo meets color meets animation

69.
ie.microsoft.com/testdrive/Graphics/opentype/opentype-fontbureau/index.html#small-caps
4 webfont is approaching the finesse of a printfont

70.
5
technological progress
web GL

71.
www.ro.me/film
5 web GL experiments

72.
www.adidas.com/football/uk/pages/f50
5 web GL commercial use

73.
6technological progress
API
mash ups

74.
ink361.com/#/popular
6 instagram, my favourite app

75.
bergcloud.com/littleprinter/#!prettyPhoto
6 daily dosis best of social goes offline

76.
7 technological progress
responsive
web design 2.0

77.
www.bostonglobe.com
7 mastering responsive design

78.
“
Simply using responsive design to
make full site accessible on mobile
devices results in substandard UX.
JAKOB NIELSEN, UI expert
“

79.
“
associate devices with purpose:
I want to check (mobile),
I want to manage (desktop),
I want to immerse (tablet).
“
Whitney Hess, UX Designer

80.
7 RESS: Responsive Design + Server Side Components

81.
2012 design trends
so what you really
need to do

82.
1 what you really need to do
Acknowledge
and embrace
unpredictability

83.
wave.google.com
1 trial & error

84.
betali.st
2 beta testing (the geeks in us love it)

85.
www.kickstarter.com
1 fund design projects

86.
2
what you really need to do
process
mix

87.
boooring
yessssss!
2 rethink the workflow

88.
“
This past year, I’ve led more working sessions,
had more discussions, simplified more wire-
frames, edited more collaborative Google docs,
responded to more Basecamp posts, written
more stories, and spent less time in Photoshop
and Illustrator than I ever have before. I’m a
better designer for it.
Dan Mall, DD Big Spaceship
“

89.
www.wunderkit.com
2 beta multitask

90.
3 what you really need to do
Use
your instinct

91.
“
Emotion is at the heart of
every decision we make. …
We do what feels right,
we go with our gut.
“
Aaron walter, lead designer Mail Chimp

92.
www.heringberlin.com
3 capture the soul of the product

93.
3 read about it

94.
“ “
users tell us so much about themselves
through their repeated use of our
product and we haven’t done enough
work to create customized content
experiences for them as a result of all
of that intel. Whitney Hess, UX Designer

95.
www.facebook.com/about/timeline
3 customized information

96.
www.fastcodesign.com/1665414/designers-behind-facebook-timeline-5-lessons-for-creating-a-ui-with-soul
3 felton talks about FB timeline

97.
“
This year designers have
a chance to actively nudge
the world in any direction
they like.
Cameron Koczon, gimmebar
“

98.
www.alistapart.com/articles/an-important-time-for-design
3 a must-read

99.
“
keep looking, don’t settle.
STEVE JOBS
“

100.
2012 design trends
the future is
beautiful

101.
designers.mx/#/mixes/listen/enjoy-the-crisis
1 enjoy!

102.
read also
The Future of webdesign
What I learned in 2011 and my predictions for 2012
What I Learned About the Web in 2011
An Important Time for Design
Future friendly

103.
nice to meet you!
Petra Sell
design director at prophets.be
@volpelino