The 2012 trends in interactive design: Quick Guide

we will no longer continue to develop Flash Player in the browser to work with new mobile device configurations (…) for Android and BlackBerry PlayBook. content is king, users are queens Designers are no longer designing for the device, they are designing for the experience. With more companies and startups placing high importance on design and usability the web will only continue to get better and more user-friendly. you can’t just be geeky anymore, you have to be beautiful too. Simply using responsive design to make full site accessible on mobile devices results in substandard UX

the 2012 trends

in interactive design

hi, my name is Petra Sell

german designer living in Belgium design director @prophetsagency follow me on twitter or behance

get 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 design

1

foodsense.is

responsive design

1

www.flowfestival.com

2emerging trends in 2011

flash steps aside

campaign sites fully animated in css

2

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 webfonts

3

www.kitchensinkstudios.com

show off with typo text

3

dentsunetwork.com

4emerging trends in 2011

parallaxed

parallax goes mainstream

4

www.editsquarterly.com

no words – just scroll

4

www.janploch.de

html5 comic

4

www.soul-reaper.com

5emerging trends in 2011

infographics

animated infographics are the new infographics

5

www.good.is/100

survey goes visual

5

slaveryfootprint.org

6emerging trends in 2011

onepager deluxe

scroll and discover

6

www.nest.com/living-with-nest

expandable content

6

www.neotokio.it

one page lover gallery

6

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 mode

1

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 essence

2

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 web

3

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 function

4

make online reading more convenient

4

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

not just good-looking

4

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 ever

4

fab.com

upgrade your body as design object

4

tattly.com

prettify administration

3

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 zeitgeist

5

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

UI experience x 2000

5

6way to go in 2012

bookmarking

gets visual

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

6

pinterest.com

inspiration library

6

gimmebar.com

2012 design trends

technological

progress

1technological progress

animate

funky css3 shapes and animations

1

beta.rallyinteractive.com

css animation

1

nizoapp.com

scroll innovation

1

www.360langstrasse.sf.tv/page

parallax pearle

1

lamoulade.com/#!/services

no flash - all html

1

discover.store.sony.com/tablet/

2technological progress

flash is the new niche

and sometimes flash is just right

2

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

webcam integration & video

2

experience.mtvnhd.com

3technological progress

challenge the site flow

innovative navigation

3

www.nikesnowboarding.com/products

functional navigation

3

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

4technological progress

custom fonts are mainstream

minimalism: typo meets color meets animation

4

mahifx.com

webfont is approaching the finesse of a printfont

4

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

5technological progress

web GL

web GL experiments

5

www.ro.me/film

web GL commercial use

5

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

6technological progress

API mash ups

instagram, my favourite app

6

ink361.com/#/popular

daily dosis best of social goes offline

6

bergcloud.com/littleprinter/#!prettyPhoto

7technological progress

responsive web design 2.0

mastering responsive design

7

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 Components

7

2012 design trends

so what you really

need to do

1what you really need to do

Acknowledge and embrace unpredictability

trial & error

1

wave.google.com

beta testing (the geeks in us love it)

2

betali.st

fund design projects

1

www.kickstarter.com

2what you really need to do

process

mix

yessssss!

rethink the workflow

2

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

2

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 product

3

www.heringberlin.com

read about it

3

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

3

www.facebook.com/about/timeline

felton talks about FB timeline

3

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

3

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

“ keep looking, don’t settle “

STEVE JOBS

2012 design trends

the future is

beautiful

1

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

The Future of webdesign

What I learned in 2011 and my predictions for 2012What I Learned About the Web in 2011

An Important Time for Design

Future friendly

read also

nice to meet you!

Petra Sell design director at prophets.be

@volpelino