Find the Interface Design trends for 2014 by - now freelance - Petra Sell on: http://www.slideshare.net/volpelino/id14 Prophets Agency presents "ID13": the trends in Interactive Design for 2013. Third year in a row, after the ID11 and ID12 trends. Written and designed by our Design Director Petra Sell. Starting at the emerging trends in 2012 moving to what is happening in interaction design in 2013. the consolidation of ongoing trends up to future thinking and some advice on how to keep up. Take your time to browse through the 147 slides of this impressive deck. Brands who fancy a 'live' presentation in their offices can contact us to make an appointment. Do spread along, cause sharing still is caring.

1. ID13
the 2013 trends
IN INTERACTIVE DESIGN

2. HI!

3. 2013 design trends
EMERGING
TRENDS
IN 2012

4. Emerging trends in 2012
NEW DEVICES
KEEP ON COMING

5. © Remy Sharp
NEW DEVICES KEEP ON POPPING UP

6. CONTEXT DRIVEN DEVICE CHOICE

7. ”IN 2013, MOBILE PHONE WILL OVERTAKE PC'S
AS THE MOST COMMON WEB ACCESS DEVICE
WORLDWIDE.”
— GARTNER

8. Emerging trends in 2012
CODING AND
BROWSERS
EVOLVE RAPIDLY

9. CSS3 INSTEAD OF HEAVY SLICING

10. ICON FONTS (AGAIN, NO SLICING)

11. WHAT ISincludes the fifth revision of the
HTML5
HTML5?
HTML markup language, CSS3, and a series
of JavaScript APIs. Together, these
technologies enable you to create complex
applications that previously could be created
only for desktop platforms.
— html5rocks.com

12. HTML5 IS THE STANDARD BY END OF 2014

13. YOU CAN DO PRETTY COOL STUFF WITH IT

14. STANDARDS AREN’T ADD-ONS
TO THE WEB. THEY ARE THE WEB.
AND YOU CAN START USING THEM
TODAY.
— APPLE

15. Emerging trends in 2012
APPS
ARE
HOT

16. SINCE LAUNCH APP STORE IN 2008,
40 BILLION APPS ARE DOWNLOADED,
OF WHICH 20 BILLION IN 2012.
— apple press center

17. FIRST APP, THEN WEB

18. TABLET-INSPIRED WEBSITE LAYOUT

19. Emerging trends in 2012
USEFUL,
CUSTOM AND
PRETTY

20. I HAVE LEARNED AN IMPORTANT PRINCIPLE:
SIMPLE THINGS WORK, OFTEN TO OUR
DUMBFOUNDED SURPRISE, FOR WE TEND TO
DISTRUST THE SIMPLE AND STRIVE FOR THE
COMPLEX.
— RICHARD CRACROFT, “OUR TREK THROUGH THE WILDERNESS”

21. QUICK AND DIRTY AWESOME

22. DESIGN AS USP PAYS OFF

23. PINTEREST DESIGN SPREADING LIKE A VIRUS

24. Emerging trends in 2012
CONTENT
MANAGEMENT
THE EASY WAY

25. PREFAB SUMMARY OF MY LIFE

26. PROJECT MANAGEMENT IN BETA HYPE

27. ADOBE & BEHANCE –CREATIVE MERITOCRACY

28. Emerging trends in 2012
THE GIANTS
INVEST
IN DESIGN

29. THE BOLDEST REDESIGN IN MICROSOFT’S HISTORY

30. WHEN I THINK OF DESIGN AND CREATING GREAT USER
EXPERIENCES, I GENERALLY TRY TO THINK OF IT IN TERMS OF
THREE THINGS: USABILITY, UTILITY, AND DESIRABILITY.
AND FOR A LONG TIME GOOGLE HAS BEEN VERY GOOD AT THE
UTILITY AND THE USABILITY.
MAYBE WE PAID A LITTLE BIT LESS ATTENTION TO THE
DESIRABILITY SIDE OF THAT.
— JON WILEY, LEAD DESIGNER GOOGLE SEARCH

31. MORE THAN 10 MILLION DOWNLOADS
OF GOOGLE’S REVAMPED MAPS APP
IN THE FIRST TWO DAYS.
— computerworld

32. 2013 design trends
WAY TO GO
IN 2013

33. Way to go in 2013
CURRENT TRENDS
WILL MATURE.

34. CONTENT, MOBILE & DESIGN

35. THE FUTURE OF MOBILE
IS THE END OF THE TERM “MOBILE”.
IT ALREADY SOUNDS ARCHAIC.
— ANDREW KEEN, AUTHOR AND ENTREPRENEUR

36. Way to go in 2013
USER-CENTRIC
DESIGN APPROACH

37. PEOPLE DON’T WANT GADGETS,
THEY WANT SERVICES.
— JEFF BEZOS, AMAZON

38. MAKE THE USER SMART

39. AUTO SUGGESTIONS IN HIGHLIGHT BOX

40. PERSONAL ASSISTANT - GOOGLE NOW

41. EVERY TIME SOMEONE
ASKS A DESIGNER TO
“JUST MAKE IT LOOK PRETTY”,
A BABY KITTEN DIES.
— SAMANTHA TOY, DESIGNER AT TWITTER, MAKER OF STYLETIL.ES

42. Way to go in 2013
HOMEPAGE IS
NOT THE ONLY
FRONT DOOR

43. POSSIBLY IT’S TIME TO PUT
DRAMATICALLY MORE FOCUS
ON THE STORY PAGE
RATHER THAN THE HOMEPAGE.
— RICHARD GINGRAS, GOOGLE’S HEAD OF NEWS PRODUCTS

44. CUSTOMERS CHOOSE THEIR OWN ENTRANCE

45. BUSINESS MODELS ANTICIPATE

46. HOMEPAGE = CURRENT INTERVIEW

47. Way to go in 2013
FOCUS ON
CROSS DEVICE
SUPPLY

48. GOOGLE REPORTS THAT
BY NEXT YEAR (2013) MORE THAN
HALF OF WEBSITE VISITS
WILL COME FROM MOBILE DEVICES
RATHER THAN DESKTOPS OR LAPTOPS.
— webdesigndepot

49. WE’RE GOING TO SEE SOME STRATEGIC
MOBILE WEB EXPERIENCES THAT ARE
TRULY DESIGNED FOR MOBILE-SPECIFIC
INITIATIVES AND USER NEEDS, NOT JUST
SMALLER SCREENS.
— TED NOVAK, FOUNDING PARTNER CLIQUE STUDIOS

50. ADAPTED TO THE USER’S NEEDS

51. MOBILE EMAIL, NOW IN THE LEAD

52. RESPONSIVE EMAIL DESIGN

53. CHECKOUT AS QUICKLY AS POSSIBLE

54. MOBILE KEYBOARD THINKING

55. MOBILE HOME DELIVERY

56. Way to go in 2013
RESPONSIVE
DESIGN
IS NO TREND

57. WHAT IS RESPONSIVE DESIGN
It's a way of designing and coding
websites with a fluid layout, so that
images and other elements of the site
adapt to the screen on which the site's
being viewed.
— Maani Safa, innovation director at Somo

58. AND THIS IS JUST THE BEGINNING

59. PLAYFUL GRIDSYSTEMS

60. LARGE BRANDS DO IT, TOO.

61. 30% OF MASHABLE'S TRAFFIC IS MOBILE

62. YOU GIVE UP A LOT OF THE CONTROL.
THE LUXURY OF OLD TIMES
– ONE USER, ONE TASK, ONE COMPUTER –
THIS IS ALL GONE NOW.
IT IS MUCH MORE LIKE YOU ARE SETTING
A STAGE FOR OTHER PEOPLE TO PERFORM.
— JONAS LÖWGREN, PROF IXD, MALMÖ UNIVERSITY, NN

63. BREAKPOINTS BY LAYOUT, NOT DEVICE

64. Way to go in 2013
FOCUS
ON TOUCH
AND GESTURES

65. MOUSE VERSUS FINGERS

66. FIX IPAD’S LOUSY TYPING

67. FRUSTRATION SHAKE IN GOOGLE MAPS

68. Way to go in 2013
PURIFY
YOUR APP

69. DESIGN ISN’T CRAFTING A BEAUTIFUL,
TEXTURED BUTTON WITH BREATHTAKING
ANIMATION.
IT’S FIGURING OUT IF THERE’S A WAY TO GET
RID OF THE BUTTON ALTOGETHER.
— EDWARD TUFTE, DATA SCIENTIST AT YALE UNIVERSITY

70. CLEAR. NO NAVIGATION NEEDED.

71. RISE. REFRESHING SIMPLE

72. "THE CONTENT IS THE INTERFACE"
IS BECOMING A NEW MANTRA
OF MOBILE APP DESIGN.
— FASTCODESIGN

73. Way to go in 2013
AUTHENTIC
DIGITAL
DESIGN

74. METRO DESIGN PRINCIPLES

75. WINDOWS 8 = WEB = OS

76. USAGE OF CSS BUILT GRAPHICS

77. SIMPLE DESIGN, FOCUS ON CONTENT

78. BRANDING RELIES ON LOGO, COLOR SCHEME:
BUSINESS LOGOS AND COLOR SCHEMES WILL
PLAY A KEY ROLE IN WEB DESIGN TO MAINTAIN
THE VISUAL INTEGRITY OF A BUSINESS AND ITS
TARGET MARKET.
— DANA EDMONDS, CEO OF CREATION HOTCOMB DESIGN

79. WIKIPEDIA REDEFINED

80. Way to go in 2013
PURITY
IS
KING

81. ANALOG CAN BE WONDERFUL.
WHAT'S NOT WONDERFUL
IS FAKE ANALOG.
— BLAISE AGÜERA Y ARCAS, ARCHITECT OF BING MOBILE

82. LESS SKEUOMORPHISM

83. SIMPLICITY IN SHAPE & STRUCTURE

84. WORDS AND COLORS

85. Way to go in 2013
SHOW
YOUR TRUE
COLORS

86. LOTS OF WHITE OR LIGHT GREY

87. PICK ONE STRONG COLOR

88. BOLD COLOR & SHAPES

89. SOFT YET BRIGHT COLOR SCHEMES

90. Way to go in 2013
FOCUS
ON
TYPO

91. TYPOGRAPHY
IS THE NEW
ICONOGRAPHY.
— ROCHELLE BENAVIDES, EXPERIENCE DEV LEAD ZUNE AND XBOX

92. ONE CATCHY TYPO DOES THE TRICK

93. BIG PORTALS USE CUSTOM FONTS

94. BY THE WAY: GREAT BOLD SEARCH!

95. MIND THE READABILITY OF WEB FONTS

96. OPTIMIZE TYPO PER DEVICE

97. AUTOMATED RESPONSIVE TYPO BEAUTY

98. Way to go in 2013
POETRY
IN MOTION

99. ANIMATION AS THE SOUL OF DESIGN

100. ALSO THINK OF THE LITTLE DETAILS

101. TELL A STORY

102. MAKE TASKS ONLINE FUN

103. Way to go in 2013
PARALLAX
SCROLLING
GROWS UP

104. NOT FUNKY BUT WEL CONSIDERED

105. INFINITIVE SCROLL ON ARTICLES

106. SCROLL A STORY

107. SOUND LINKED TO SCROLL BEHAVIOUR

108. Way to go in 2013
BIG IMAGES
EVERYWHERE

109. AN IMAGE SAYS MORE THAN 1000 WORDS

110. LARGE IMAGES MAKE IMPACT

111. BIG VIDEOS, TOO

112. 2013 design trends
FUTURE
THINKING

113. Future thinking
THE INTERNET
OF THINGS

114. SMARTPHONES WILL BECOME
REMOTE CONTROLS
FOR OUR LIVES.
— STEVE MOLLENKOPF, QUALCOMM CHIEF OPERATING OFFICER

115. PERSONAL ENVIRONMENT MONITOR

116. OUR VISION IS THAT THE PHONE WILL REALLY
START TO ANTICIPATE A LOT OF WHAT YOU
NEED, LOOKING AT THE ENVIRONMENT AROUND
YOU AND INTERACTING WITH THE CLOUD TO
PROVIDE DATA TO YOU IN A DIFFERENT WAY.
— STEVE MOLLENKOPF, QUALCOMM CHIEF OPERATING OFFICER

117. PROJECTED INTERFACES

118. DESIGN BEYOND THE SCREEN

119. Future thinking
FROM GUI
TOWARDS
NUI

120. WHAT IS NUI?
A natural user interface (NUI) is an
electronic input system that is either
invisible to the user or quickly
naturalized so that it is perceived as
invisible.
— techtarget.com

121. AVAILABLE NOW ALREADY

122. GESTURE BASED DISCOVERY

123. VOICE BASED SEARCH

124. TEMPORARY TATTOO SENSORS

125. 2013 design trends
HOW TO
KEEP UP

126. How to keep up
DESIGN THINKING
AS PART OF A
BRAND STRATEGY

127. BOLD STATEMENTS FOR A GOV SITE

128. How to keep up
MANDATORY
UX THINKING

129. UX EMPATHY MAP

130. IF YOU DON'T KNOW WHY AND WHO
BEFORE YOU COME UP WITH WHAT,
YOU'LL END UP
CREATING NOTHING FOR NO ONE.
— WHITNEY HESS, UX CONSULTANT

131. How to keep up
NEW WAYS
OF WORKING

132. RESPONSIVE WORKFLOW

133. STYLE TILES

134. DESIGN IN THE BROWSER

135. RESPONSIVE DESIGN IN INDESIGN

136. How to keep up
FUTURE
PROOF?

137. THE ONLY CONSTANT IS CHANGE,
CONTINUING CHANGE, INEVITABLE CHANGE,
THAT IS THE DOMINANT FACTOR IN SOCIETY
TODAY. NO SENSIBLE DECISION CAN BE MADE
ANY LONGER WITHOUT TAKING INTO ACCOUNT
NOT ONLY THE WORLD AS IT IS, BUT THE
WORLD AS IT WILL BE.
— ISAAC ASIMOV, AUTHOR AND BIOCHEMIST

138. MAKE YOUR CHOICE

139. GOOGLE STOPS APP SUPPORT FOR IE8

140. How to keep up
LEARN
NEW THINGS!

141. PROFESSIONAL DEVELOPMENT IS
IMPORTANT. THE WEB IS EVER-
CHANGING, AND IF YOU WANT TO
STAY AT THE TOP OF YOUR GAME,
YOU NEED TO CHANGE WITH IT.
— WEBDESIGNERDEPOT.COM

142. WITH A LITTLE HELP FROM A STRANGER

143. ETSY’S CONTINUOUS EXPERIMENTS

144. LIFE IS MESSY.
YOU CAN'T CONTROL IT
BUT YOU CAN CONTROL
HOW YOU FEEL ABOUT IT!
— PING FU, FOUNDER GEOMAGIC

145. ALSO READ/WATCH THIS.
— Connecting (Full Film) must view!
— google's multiscreenworld report
— The best of 2012 for designers
— 10 Web design trends you can expect in 2013
— 16 Of The Year’s Best Ideas In UI Design
— redesigning google

146. CONTACT ME
PSELL@PROPHETS.BE
@VOLPELINO

147. Thank you for listening!
QUESTIONS?
ALWAYS
WELCOME!