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