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!