The document discusses emerging interactive design trends in 2012. It identifies content as increasingly important, with users prioritized over devices. Responsive design and custom fonts are becoming mainstream, while Flash declines. CSS animation is replacing Flash, and parallax, scrolling effects are common. Apps are inspiring web design, focusing on useful and attractive experiences. Bookmarking is getting more visual through sites like Pinterest. Technological progress includes HTML5 video, WebGL experiments, and responsive design adapted for different devices. The future involves embracing unpredictability, rethinking workflows, following intuition, and focusing on the user experience.

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