Prophets trends in Interactive Design 2012

the 2012 trends

in interactive design

ID12

hi, my name is Petra Sell

german designer living in Belgiumdesign director @prophetsagencyfollow me on twitter or behanceget more details on linkedin

about me

links in this pres:

2012 design trends

emerging trends in 2011

1emerging trends in 2011

multiple device thinking

responsive design1

foodsense.is

responsive design1

www.flowfestival.com

2emerging trends in 2011

flash steps aside

campaign sites fully animated in css2

www.onehourpersecond.com

“ “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

3emerging trends in 2011

this is not an arial

mad about webfonts3

www.kitchensinkstudios.com

show off with typo text3

dentsunetwork.com

4emerging trends in 2011

parallaxed

parallax goes mainstream4

www.editsquarterly.com

no words – just scroll4

www.janploch.de

html5 comic4

www.soul-reaper.com

5emerging trends in 2011

infographics

animated infographics are the new infographics5

www.good.is/100

survey goes visual5

slaveryfootprint.org

6emerging trends in 2011

onepager deluxe

scroll and discover6

www.nest.com/living-with-nest

expandable content6

www.neotokio.it

one page lover gallery6

onepagelove.com

2012 design trends

way to go in 2012

1 way to go in 2012

content is king, users are queens

“ “Designers are no longer designing for the device, they are designing for the experience.

COURTNEY BOYD MYERS, Features Editor of the next web

editorial design experience on ipad 1

instapaper: read later (+ remove the clutter) 1

couch mode1

vimeo.com/36140636

couch mode 2 (live tour through a museum)1

livetour.mas.be

2way to go in 2012

less is more

only the essence2

path.com

hugh emotional headers (and arrow links to content)2

www.hanzell.com/winemaking.html

3way to go in 2012

apps redefining the web

apps inspire the web3

www.icloud.com

4way to go in 2012

useful, custom and pretty

registration as convenient as possible 4

littlebigdetails.com/post/14671757055/path-when-signing-up-as-a-new-member-the-iphone

form informs function4

make online reading more convenient4

www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake

not just good-looking4

contrastrebellion.com

“ “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

design sells more than ever4

fab.com

upgrade your body as design object4

tattly.com

prettify administration3

www.thrivesolo.com

5way to go in 2012

even google realizes that

no more function over form (even google got it)5

“ “you can’t just be geeky anymore, you have to be beautiful too.

BRAD MCCARTY, Managing Editor the next web

google zeitgeist5

www.googlezeitgeist.com/en/top-searches/adele

mail.google.com/mail/?shva=1#compose

UI experience x 20005

6way to go in 2012

bookmarkinggets visual

is ‘pin it’ the new ‘like it’?6

pinterest.com

inspiration library6

gimmebar.com

2012 design trends

technologicalprogress

1technological progress

animate

funky css3 shapes and animations1

beta.rallyinteractive.com

css animation1

nizoapp.com

scroll innovation1

www.360langstrasse.sf.tv/page

parallax pearle1

lamoulade.com/#!/services

no flash - all html1

discover.store.sony.com/tablet/

2technological progress

flash is the new niche

and sometimes flash is just right2

solutionsthatmatter.van.fedex.com/full.php#/healthcare/

webcam integration & video 2

experience.mtvnhd.com

3technological progress

challenge the site flow

innovative navigation3

www.nikesnowboarding.com/products

functional navigation3

www.crateandbarrel.com/dining-and-entertaining/individual-bowls/gemma-wave-bowl/s544135

4technological progress

custom fonts are mainstream

minimalism: typo meets color meets animation4

mahifx.com

webfont is approaching the finesse of a printfont4

ie.microsoft.com/testdrive/Graphics/opentype/opentype-fontbureau/index.html#small-caps

5technological progress

web GL

web GL experiments5

www.ro.me/film

web GL commercial use5

www.adidas.com/football/uk/pages/f50

6technological progress

APImash ups

instagram, my favourite app6

ink361.com/#/popular

daily dosis best of social goes offline6

bergcloud.com/littleprinter/#!prettyPhoto

7technological progress

responsive web design 2.0

mastering responsive design7

www.bostonglobe.com

“ “Simply using responsive design to make full site accessible on mobile devices results in substandard UX.

JAkOB NIELSEN, UI expert

“ “associate devices with purpose: I want to check (mobile), I want to manage (desktop), I want to immerse (tablet).

WhITNEY hESS, UX Designer

RESS: Responsive Design + Server Side Components7

2012 design trends

so what you reallyneed to do

1what you really need to do

Acknowledge and embrace

unpredictability

trial & error1

wave.google.com

beta testing (the geeks in us love it)2

betali.st

fund design projects1

www.kickstarter.com

2what you really need to do

processmix

boooring

yessssss!

rethink the workflow2

“ “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

beta multitask2

www.wunderkit.com

3what you really need to do

Use your instinct

“ “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

capture the soul of the product3

www.heringberlin.com

read about it3

“ “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

customized information3

www.facebook.com/about/timeline

felton talks about FB timeline3

www.fastcodesign.com/1665414/designers-behind-facebook-timeline-5-lessons-for-creating-a-ui-with-soul

“ “This year designers have a chance to actively nudge the world in any direction they like.

CAMERON kOCzON, gimmebar

a must-read3

www.alistapart.com/articles/an-important-time-for-design

“ “keep looking, don’t settle.STEVE JOBS

2012 design trends

the future is beautiful

enjoy!1

designers.mx/#/mixes/listen/enjoy-the-crisis

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

read also

nice to meet you!

Petra Selldesign director at prophets.be

@volpelino