Your SlideShare is downloading. ×
Trends in interactive design 2013
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Trends in interactive design 2013

357,757
views

Published on

Find the Interface Design trends for 2014 by - now freelance - Petra Sell on: …

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.

Published in: Design

78 Comments
2.4k Likes
Statistics
Notes
No Downloads
Views
Total Views
357,757
On Slideshare
0
From Embeds
0
Number of Embeds
303
Actions
Shares
0
Downloads
0
Comments
78
Likes
2,418
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. ID13 the 2013 trendsIN INTERACTIVE DESIGN
  • 2. HI!
  • 3. 2013 design trendsEMERGING TRENDS IN 2012
  • 4. Emerging trends in 2012 NEW DEVICESKEEP ON COMING
  • 5. © Remy SharpNEW DEVICES KEEP ON POPPING UP
  • 6. CONTEXT DRIVEN DEVICE CHOICE
  • 7. ”IN 2013, MOBILE PHONE WILL OVERTAKE PCSAS THE MOST COMMON WEB ACCESS DEVICEWORLDWIDE.”— GARTNER
  • 8. Emerging trends in 2012 CODING AND BROWSERSEVOLVE 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-ONSTO THE WEB. THEY ARE THE WEB.AND YOU CAN START USING THEMTODAY.— 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 OURDUMBFOUNDED SURPRISE, FOR WE TEND TODISTRUST THE SIMPLE AND STRIVE FOR THECOMPLEX.— 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 CONTENTMANAGEMENTTHE EASY WAY
  • 25. PREFAB SUMMARY OF MY LIFE
  • 26. PROJECT MANAGEMENT IN BETA HYPE
  • 27. ADOBE & BEHANCE –CREATIVE MERITOCRACY
  • 28. Emerging trends in 2012THE GIANTS INVEST IN DESIGN
  • 29. THE BOLDEST REDESIGN IN MICROSOFT’S HISTORY
  • 30. WHEN I THINK OF DESIGN AND CREATING GREAT USEREXPERIENCES, I GENERALLY TRY TO THINK OF IT IN TERMS OFTHREE THINGS: USABILITY, UTILITY, AND DESIRABILITY.AND FOR A LONG TIME GOOGLE HAS BEEN VERY GOOD AT THEUTILITY AND THE USABILITY.MAYBE WE PAID A LITTLE BIT LESS ATTENTION TO THEDESIRABILITY SIDE OF THAT.— JON WILEY, LEAD DESIGNER GOOGLE SEARCH
  • 31. MORE THAN 10 MILLION DOWNLOADSOF GOOGLE’S REVAMPED MAPS APPIN THE FIRST TWO DAYS. — computerworld
  • 32. 2013 design trendsWAY TO GO IN 2013
  • 33. Way to go in 2013CURRENT TRENDS WILL MATURE.
  • 34. CONTENT, MOBILE & DESIGN
  • 35. THE FUTURE OF MOBILEIS THE END OF THE TERM “MOBILE”.IT ALREADY SOUNDS ARCHAIC.— ANDREW KEEN, AUTHOR AND ENTREPRENEUR
  • 36. Way to go in 2013 USER-CENTRICDESIGN 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 SOMEONEASKS 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 2013HOMEPAGE ISNOT THE ONLY FRONT DOOR
  • 43. POSSIBLY IT’S TIME TO PUTDRAMATICALLY MORE FOCUSON THE STORY PAGERATHER 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 ONCROSS DEVICE SUPPLY
  • 48. GOOGLE REPORTS THATBY NEXT YEAR (2013) MORE THANHALF OF WEBSITE VISITSWILL COME FROM MOBILE DEVICESRATHER THAN DESKTOPS OR LAPTOPS. — webdesigndepot
  • 49. WE’RE GOING TO SEE SOME STRATEGICMOBILE WEB EXPERIENCES THAT ARETRULY DESIGNED FOR MOBILE-SPECIFICINITIATIVES AND USER NEEDS, NOT JUSTSMALLER 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 2013RESPONSIVE DESIGNIS NO TREND
  • 57. WHAT IS RESPONSIVE DESIGN Its 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 sites 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 MASHABLES 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 SETTINGA 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 TOUCHAND GESTURES
  • 65. MOUSE VERSUS FINGERS
  • 66. FIX IPAD’S LOUSY TYPING
  • 67. FRUSTRATION SHAKE IN GOOGLE MAPS
  • 68. Way to go in 2013 PURIFYYOUR APP
  • 69. DESIGN ISN’T CRAFTING A BEAUTIFUL,TEXTURED BUTTON WITH BREATHTAKINGANIMATION.IT’S FIGURING OUT IF THERE’S A WAY TO GETRID 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 MANTRAOF MOBILE APP DESIGN.— FASTCODESIGN
  • 73. Way to go in 2013AUTHENTIC 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 WILLPLAY A KEY ROLE IN WEB DESIGN TO MAINTAINTHE VISUAL INTEGRITY OF A BUSINESS AND ITSTARGET 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.WHATS NOT WONDERFULIS 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 SHOWYOUR 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. TYPOGRAPHYIS THE NEWICONOGRAPHY.— 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 POETRYIN 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 2013PARALLAXSCROLLINGGROWS 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 IMAGESEVERYWHERE
  • 109. AN IMAGE SAYS MORE THAN 1000 WORDS
  • 110. LARGE IMAGES MAKE IMPACT
  • 111. BIG VIDEOS, TOO
  • 112. 2013 design trends FUTURETHINKING
  • 113. Future thinkingTHE INTERNET OF THINGS
  • 114. SMARTPHONES WILL BECOMEREMOTE CONTROLSFOR OUR LIVES.— STEVE MOLLENKOPF, QUALCOMM CHIEF OPERATING OFFICER
  • 115. PERSONAL ENVIRONMENT MONITOR
  • 116. OUR VISION IS THAT THE PHONE WILL REALLYSTART TO ANTICIPATE A LOT OF WHAT YOUNEED, LOOKING AT THE ENVIRONMENT AROUNDYOU AND INTERACTING WITH THE CLOUD TOPROVIDE DATA TO YOU IN A DIFFERENT WAY.— STEVE MOLLENKOPF, QUALCOMM CHIEF OPERATING OFFICER
  • 117. PROJECTED INTERFACES
  • 118. DESIGN BEYOND THE SCREEN
  • 119. Future thinkingFROM GUITOWARDS 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 trendsHOW TOKEEP UP
  • 126. How to keep upDESIGN THINKING AS PART OF ABRAND STRATEGY
  • 127. BOLD STATEMENTS FOR A GOV SITE
  • 128. How to keep upMANDATORYUX THINKING
  • 129. UX EMPATHY MAP
  • 130. IF YOU DONT KNOW WHY AND WHOBEFORE YOU COME UP WITH WHAT,YOULL END UPCREATING NOTHING FOR NO ONE.— WHITNEY HESS, UX CONSULTANT
  • 131. How to keep up NEW WAYSOF WORKING
  • 132. RESPONSIVE WORKFLOW
  • 133. STYLE TILES
  • 134. DESIGN IN THE BROWSER
  • 135. RESPONSIVE DESIGN IN INDESIGN
  • 136. How to keep upFUTUREPROOF?
  • 137. THE ONLY CONSTANT IS CHANGE,CONTINUING CHANGE, INEVITABLE CHANGE,THAT IS THE DOMINANT FACTOR IN SOCIETYTODAY. NO SENSIBLE DECISION CAN BE MADEANY LONGER WITHOUT TAKING INTO ACCOUNTNOT ONLY THE WORLD AS IT IS, BUT THEWORLD 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 LEARNNEW THINGS!
  • 141. PROFESSIONAL DEVELOPMENT ISIMPORTANT. THE WEB IS EVER-CHANGING, AND IF YOU WANT TOSTAY 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 CANT CONTROL ITBUT YOU CAN CONTROLHOW YOU FEEL ABOUT IT!— PING FU, FOUNDER GEOMAGIC
  • 145. ALSO READ/WATCH THIS. — Connecting (Full Film) must view! — googles 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 MEPSELL@PROPHETS.BE@VOLPELINO
  • 147. Thank you for listening!QUESTIONS? ALWAYS WELCOME!

×