SlideShare a Scribd company logo
ID13
  the 2013 trends
IN INTERACTIVE DESIGN
HI!
2013 design trends



EMERGING
 TRENDS
 IN 2012
Emerging trends in 2012


 NEW DEVICES
KEEP ON COMING
© Remy Sharp




NEW DEVICES KEEP ON POPPING UP
CONTEXT DRIVEN DEVICE CHOICE
”IN 2013, MOBILE PHONE WILL OVERTAKE PC'S
AS THE MOST COMMON WEB ACCESS DEVICE
WORLDWIDE.”
— GARTNER
Emerging trends in 2012


  CODING AND
  BROWSERS
EVOLVE RAPIDLY
CSS3 INSTEAD OF HEAVY SLICING
ICON FONTS (AGAIN, NO SLICING)
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
HTML5 IS THE STANDARD BY END OF 2014
YOU CAN DO PRETTY COOL STUFF WITH IT
STANDARDS AREN’T ADD-ONS
TO THE WEB. THEY ARE THE WEB.
AND YOU CAN START USING THEM
TODAY.
— APPLE
Emerging trends in 2012


      APPS
       ARE
      HOT
SINCE LAUNCH APP STORE IN 2008,
40 BILLION APPS ARE DOWNLOADED,
OF WHICH 20 BILLION IN 2012.

  — apple press center
FIRST APP, THEN WEB
TABLET-INSPIRED WEBSITE LAYOUT
Emerging trends in 2012


  USEFUL,
CUSTOM AND
  PRETTY
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”
QUICK AND DIRTY AWESOME
DESIGN AS USP PAYS OFF
PINTEREST DESIGN SPREADING LIKE A VIRUS
Emerging trends in 2012


  CONTENT
MANAGEMENT
THE EASY WAY
PREFAB SUMMARY OF MY LIFE
PROJECT MANAGEMENT IN BETA HYPE
ADOBE & BEHANCE –CREATIVE MERITOCRACY
Emerging trends in 2012


THE GIANTS
   INVEST
 IN DESIGN
THE BOLDEST REDESIGN IN MICROSOFT’S HISTORY
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
MORE THAN 10 MILLION DOWNLOADS
OF GOOGLE’S REVAMPED MAPS APP
IN THE FIRST TWO DAYS.

  — computerworld
2013 design trends



WAY TO GO
 IN 2013
Way to go in 2013


CURRENT TRENDS
 WILL MATURE.
CONTENT, MOBILE & DESIGN
THE FUTURE OF MOBILE
IS THE END OF THE TERM “MOBILE”.
IT ALREADY SOUNDS ARCHAIC.
— ANDREW KEEN, AUTHOR AND ENTREPRENEUR
Way to go in 2013


 USER-CENTRIC
DESIGN APPROACH
PEOPLE DON’T WANT GADGETS,
THEY WANT SERVICES.
— JEFF BEZOS, AMAZON
MAKE THE USER SMART
AUTO SUGGESTIONS IN HIGHLIGHT BOX
PERSONAL ASSISTANT - GOOGLE NOW
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
Way to go in 2013


HOMEPAGE IS
NOT THE ONLY
 FRONT DOOR
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
CUSTOMERS CHOOSE THEIR OWN ENTRANCE
BUSINESS MODELS ANTICIPATE
HOMEPAGE = CURRENT INTERVIEW
Way to go in 2013


 FOCUS ON
CROSS DEVICE
   SUPPLY
GOOGLE REPORTS THAT
BY NEXT YEAR (2013) MORE THAN
HALF OF WEBSITE VISITS
WILL COME FROM MOBILE DEVICES
RATHER THAN DESKTOPS OR LAPTOPS.
  — webdesigndepot
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
ADAPTED TO THE USER’S NEEDS
MOBILE EMAIL, NOW IN THE LEAD
RESPONSIVE EMAIL DESIGN
CHECKOUT AS QUICKLY AS POSSIBLE
MOBILE KEYBOARD THINKING
MOBILE HOME DELIVERY
Way to go in 2013


RESPONSIVE
   DESIGN
IS NO TREND
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
AND THIS IS JUST THE BEGINNING
PLAYFUL GRIDSYSTEMS
LARGE BRANDS DO IT, TOO.
30% OF MASHABLE'S TRAFFIC IS MOBILE
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
BREAKPOINTS BY LAYOUT, NOT DEVICE
Way to go in 2013


   FOCUS
  ON TOUCH
AND GESTURES
MOUSE VERSUS FINGERS
FIX IPAD’S LOUSY TYPING
FRUSTRATION SHAKE IN GOOGLE MAPS
Way to go in 2013


 PURIFY
YOUR APP
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
CLEAR. NO NAVIGATION NEEDED.
RISE. REFRESHING SIMPLE
"THE CONTENT IS THE INTERFACE"
IS BECOMING A NEW MANTRA
OF MOBILE APP DESIGN.
— FASTCODESIGN
Way to go in 2013


AUTHENTIC
 DIGITAL
 DESIGN
METRO DESIGN PRINCIPLES
WINDOWS 8 = WEB = OS
USAGE OF CSS BUILT GRAPHICS
SIMPLE DESIGN, FOCUS ON CONTENT
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
WIKIPEDIA REDEFINED
Way to go in 2013


 PURITY
   IS
  KING
ANALOG CAN BE WONDERFUL.
WHAT'S NOT WONDERFUL
IS FAKE ANALOG.
— BLAISE AGÜERA Y ARCAS, ARCHITECT OF BING MOBILE
LESS SKEUOMORPHISM
SIMPLICITY IN SHAPE & STRUCTURE
WORDS AND COLORS
Way to go in 2013


  SHOW
YOUR TRUE
 COLORS
LOTS OF WHITE OR LIGHT GREY
PICK ONE STRONG COLOR
BOLD COLOR & SHAPES
SOFT YET BRIGHT COLOR SCHEMES
Way to go in 2013


 FOCUS
   ON
  TYPO
TYPOGRAPHY
IS THE NEW
ICONOGRAPHY.
— ROCHELLE BENAVIDES, EXPERIENCE DEV LEAD ZUNE AND XBOX
ONE CATCHY TYPO DOES THE TRICK
BIG PORTALS USE CUSTOM FONTS
BY THE WAY: GREAT BOLD SEARCH!
MIND THE READABILITY OF WEB FONTS
OPTIMIZE TYPO PER DEVICE
AUTOMATED RESPONSIVE TYPO BEAUTY
Way to go in 2013


  POETRY
IN MOTION
ANIMATION AS THE SOUL OF DESIGN
ALSO THINK OF THE LITTLE DETAILS
TELL A STORY
MAKE TASKS ONLINE FUN
Way to go in 2013


PARALLAX
SCROLLING
GROWS UP
NOT FUNKY BUT WEL CONSIDERED
INFINITIVE SCROLL ON ARTICLES
SCROLL A STORY
SOUND LINKED TO SCROLL BEHAVIOUR
Way to go in 2013


 BIG IMAGES
EVERYWHERE
AN IMAGE SAYS MORE THAN 1000 WORDS
LARGE IMAGES MAKE IMPACT
BIG VIDEOS, TOO
2013 design trends



 FUTURE
THINKING
Future thinking


THE INTERNET
 OF THINGS
SMARTPHONES WILL BECOME
REMOTE CONTROLS
FOR OUR LIVES.
— STEVE MOLLENKOPF, QUALCOMM CHIEF OPERATING OFFICER
PERSONAL ENVIRONMENT MONITOR
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
PROJECTED INTERFACES
DESIGN BEYOND THE SCREEN
Future thinking


FROM GUI
TOWARDS
  NUI
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
AVAILABLE NOW ALREADY
GESTURE BASED DISCOVERY
VOICE BASED SEARCH
TEMPORARY TATTOO SENSORS
2013 design trends



HOW TO
KEEP UP
How to keep up


DESIGN THINKING
  AS PART OF A
BRAND STRATEGY
BOLD STATEMENTS FOR A GOV SITE
How to keep up


MANDATORY
UX THINKING
UX EMPATHY MAP
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
How to keep up


 NEW WAYS
OF WORKING
RESPONSIVE WORKFLOW
STYLE TILES
DESIGN IN THE BROWSER
RESPONSIVE DESIGN IN INDESIGN
How to keep up


FUTURE
PROOF?
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
MAKE YOUR CHOICE
GOOGLE STOPS APP SUPPORT FOR IE8
How to keep up


   LEARN
NEW THINGS!
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
WITH A LITTLE HELP FROM A STRANGER
ETSY’S CONTINUOUS EXPERIMENTS
LIFE IS MESSY.
YOU CAN'T CONTROL IT
BUT YOU CAN CONTROL
HOW YOU FEEL ABOUT IT!
— PING FU, FOUNDER GEOMAGIC
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
CONTACT ME
PSELL@PROPHETS.BE
@VOLPELINO
Thank you for listening!




QUESTIONS?
  ALWAYS
 WELCOME!

More Related Content

PDF
UX Lesson 2: User Research
PDF
Good UX Bad UX
PDF
40 Tools in 20 Minutes: Hacking your Marketing Career
PDF
UX is Not Equal to UI Design
PDF
Finding the one growth metric that matters
PDF
UX design
PDF
Product mentor jobs to be done session 3 amanda ralph 240615
PDF
UI and UX Design for Startups - Matin Maleki
UX Lesson 2: User Research
Good UX Bad UX
40 Tools in 20 Minutes: Hacking your Marketing Career
UX is Not Equal to UI Design
Finding the one growth metric that matters
UX design
Product mentor jobs to be done session 3 amanda ralph 240615
UI and UX Design for Startups - Matin Maleki

What's hot (20)

PDF
Ux is not UI
PPTX
Product Discovery At Google
PDF
UX Experience Design: Processes and Strategy
PDF
UX Lesson 6: Visual Hierarchy
PDF
Insighting introduction
PPTX
UI vs UX workshop
PDF
User Experience Workshop
PDF
14 Tips to Entrepreneurs to start the Right Stuff
PDF
Microinteractions
PDF
Creative Thinking
PDF
UX/UI Design 101
PDF
How To Make A Point
PDF
UX & UI Design - Differentiate through design
 
PDF
Think Like A Growth Hacker
PDF
UX RULES: 10 ESSENTIAL PRINCIPLES
PPT
User Research 101
PDF
5 Tips for Presenting to Executives
PDF
UX & UI Design: Differentiate through design
PDF
Design Thinking: The one thing that will transform the way you think
PDF
DesignThinking 101 - Customer Journey Mapping
Ux is not UI
Product Discovery At Google
UX Experience Design: Processes and Strategy
UX Lesson 6: Visual Hierarchy
Insighting introduction
UI vs UX workshop
User Experience Workshop
14 Tips to Entrepreneurs to start the Right Stuff
Microinteractions
Creative Thinking
UX/UI Design 101
How To Make A Point
UX & UI Design - Differentiate through design
 
Think Like A Growth Hacker
UX RULES: 10 ESSENTIAL PRINCIPLES
User Research 101
5 Tips for Presenting to Executives
UX & UI Design: Differentiate through design
Design Thinking: The one thing that will transform the way you think
DesignThinking 101 - Customer Journey Mapping
Ad

Similar to Trends in interactive design 2013 (20)

PDF
Folketinget
PDF
Web and-mobile-trends-2013
PDF
Web and mobile trends 2013
PDF
Why use responsive web design?
PDF
Mobile User Experience – A key to successful strategies in the mobile market
PDF
Designing for Today's Web
PDF
Daring to be_digital seminar_5th march edinburgh
PDF
Mobile Book of Trends 2014
PDF
Mobile, UX & the Quest for ROI
PDF
The Browser is Dead, Long Live the Web!
PDF
The Browser is Dead, Long Live the Web! (Jonathan Stark)
PDF
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
PDF
The Revolution Will Not Be Televised: Managing Content and Experience in the ...
PPTX
Daring to be_digital seminar_5th march edinburgh
PDF
UX Design in 2030 | CLEVER°FRANKE
PPTX
UX-Project
PPTX
UX-Project
PPT
Extreme makeover Digital Ecosystem Edition
PPT
How to Act Like an Agency within a Company: UX for the Enterprise
PDF
Adapting To Change (Owner Summit 2015)
Folketinget
Web and-mobile-trends-2013
Web and mobile trends 2013
Why use responsive web design?
Mobile User Experience – A key to successful strategies in the mobile market
Designing for Today's Web
Daring to be_digital seminar_5th march edinburgh
Mobile Book of Trends 2014
Mobile, UX & the Quest for ROI
The Browser is Dead, Long Live the Web!
The Browser is Dead, Long Live the Web! (Jonathan Stark)
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
The Revolution Will Not Be Televised: Managing Content and Experience in the ...
Daring to be_digital seminar_5th march edinburgh
UX Design in 2030 | CLEVER°FRANKE
UX-Project
UX-Project
Extreme makeover Digital Ecosystem Edition
How to Act Like an Agency within a Company: UX for the Enterprise
Adapting To Change (Owner Summit 2015)
Ad

More from Prophets Agency (12)

PDF
The use of iBeacons
PDF
The Big Election Ask
PDF
Digital into the Third Dimension
PDF
The Age Of Confusion
PPTX
Prophets presents "Facebook Timeline for brands essential training"
PDF
Prophets trends in Interactive Design 2012
PPTX
MAS campaign
PPTX
Future trends in retail
PPTX
Responsive Webdesign For Non-Geeks
PPTX
Prophets - Mas Live Tour
PPTX
Future Of Interactive TV
PDF
The 2011 trends in interactive design
The use of iBeacons
The Big Election Ask
Digital into the Third Dimension
The Age Of Confusion
Prophets presents "Facebook Timeline for brands essential training"
Prophets trends in Interactive Design 2012
MAS campaign
Future trends in retail
Responsive Webdesign For Non-Geeks
Prophets - Mas Live Tour
Future Of Interactive TV
The 2011 trends in interactive design

Recently uploaded (20)

PPT
Machine printing techniques and plangi dyeing
PPT
unit 1 ppt.ppthhhhhhhhhhhhhhhhhhhhhhhhhh
PPTX
Implications Existing phase plan and its feasibility.pptx
PPT
Package Design Design Kit 20100009 PWM IC by Bee Technologies
PDF
Benefits_of_Cast_Aluminium_Doors_Presentation.pdf
PPTX
An introduction to AI in research and reference management
PPTX
Special finishes, classification and types, explanation
PPTX
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
PDF
ALDO ROSSI AND MICHAEL GRAVES THEORY OF DESIGN-02 , PRESENTATION _TUSHARECHPL...
PDF
URBAN DESIGN DESKTOP CASESTUDY IITG.pdf
PDF
10 Real World Lessons and 4 Practical Tips for Large Group LSP Method
PDF
High-frequency high-voltage transformer outline drawing
PDF
Africa 2025 - Prospects and Challenges first edition.pdf
PPTX
Introduction to Pathology.pptx 112233445566
PPTX
building Planning Overview for step wise design.pptx
PPTX
AD Bungalow Case studies Sem 2.pptxvwewev
PPTX
KOTA LAMA BANYUMAS.pptxxxxxxxxxxxxxxxxxxxx
PPTX
Lecturess 1 & 2_2025_edit.pptxYour score increases as you pick a category, fi...
PPTX
6- Architecture design complete (1).pptx
PDF
Phone away, tabs closed: No multitasking
Machine printing techniques and plangi dyeing
unit 1 ppt.ppthhhhhhhhhhhhhhhhhhhhhhhhhh
Implications Existing phase plan and its feasibility.pptx
Package Design Design Kit 20100009 PWM IC by Bee Technologies
Benefits_of_Cast_Aluminium_Doors_Presentation.pdf
An introduction to AI in research and reference management
Special finishes, classification and types, explanation
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
ALDO ROSSI AND MICHAEL GRAVES THEORY OF DESIGN-02 , PRESENTATION _TUSHARECHPL...
URBAN DESIGN DESKTOP CASESTUDY IITG.pdf
10 Real World Lessons and 4 Practical Tips for Large Group LSP Method
High-frequency high-voltage transformer outline drawing
Africa 2025 - Prospects and Challenges first edition.pdf
Introduction to Pathology.pptx 112233445566
building Planning Overview for step wise design.pptx
AD Bungalow Case studies Sem 2.pptxvwewev
KOTA LAMA BANYUMAS.pptxxxxxxxxxxxxxxxxxxxx
Lecturess 1 & 2_2025_edit.pptxYour score increases as you pick a category, fi...
6- Architecture design complete (1).pptx
Phone away, tabs closed: No multitasking

Trends in interactive design 2013