103
the 2012 trends in interactive design ID12

Prophets trends in Interactive Design 2012

Embed Size (px)

DESCRIPTION

Prophets presents the 2012 trends in interactive design on http://www.prophets.be/DesignTrends Our vision of where interactive design is going in the near future and how to respond to it. An inspiring presentation filled with real life examples of top-advertisers with a vision. More info on www.prophets.be/DesignTrends

Citation preview

Page 1: Prophets trends in Interactive Design 2012

the 2012 trends

in interactive design

ID12

Page 2: Prophets trends in Interactive Design 2012

hi, my name is Petra Sell

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

about me

Page 4: Prophets trends in Interactive Design 2012

2012 design trends

emerging trends in 2011

Page 5: Prophets trends in Interactive Design 2012

1emerging trends in 2011

multiple device thinking

Page 6: Prophets trends in Interactive Design 2012

responsive design1

foodsense.is

Page 7: Prophets trends in Interactive Design 2012

responsive design1

www.flowfestival.com

Page 8: Prophets trends in Interactive Design 2012

2emerging trends in 2011

flash steps aside

Page 9: Prophets trends in Interactive Design 2012

campaign sites fully animated in css2

www.onehourpersecond.com

Page 10: Prophets trends in Interactive Design 2012

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

Page 11: Prophets trends in Interactive Design 2012

3emerging trends in 2011

this is not an arial

Page 12: Prophets trends in Interactive Design 2012

mad about webfonts3

www.kitchensinkstudios.com

Page 13: Prophets trends in Interactive Design 2012

show off with typo text3

dentsunetwork.com

Page 14: Prophets trends in Interactive Design 2012

4emerging trends in 2011

parallaxed

Page 15: Prophets trends in Interactive Design 2012

parallax goes mainstream4

www.editsquarterly.com

Page 16: Prophets trends in Interactive Design 2012

no words – just scroll4

www.janploch.de

Page 17: Prophets trends in Interactive Design 2012

html5 comic4

www.soul-reaper.com

Page 18: Prophets trends in Interactive Design 2012

5emerging trends in 2011

infographics

Page 19: Prophets trends in Interactive Design 2012

animated infographics are the new infographics5

www.good.is/100

Page 20: Prophets trends in Interactive Design 2012

survey goes visual5

slaveryfootprint.org

Page 21: Prophets trends in Interactive Design 2012

6emerging trends in 2011

onepager deluxe

Page 22: Prophets trends in Interactive Design 2012

scroll and discover6

www.nest.com/living-with-nest

Page 23: Prophets trends in Interactive Design 2012

expandable content6

www.neotokio.it

Page 24: Prophets trends in Interactive Design 2012

one page lover gallery6

onepagelove.com

Page 25: Prophets trends in Interactive Design 2012

2012 design trends

way to go in 2012

Page 26: Prophets trends in Interactive Design 2012

1 way to go in 2012

content is king, users are queens

Page 27: Prophets trends in Interactive Design 2012

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

COURTNEY BOYD MYERS, Features Editor of the next web

Page 29: Prophets trends in Interactive Design 2012

instapaper: read later (+ remove the clutter) 1

Page 30: Prophets trends in Interactive Design 2012

couch mode1

vimeo.com/36140636

Page 31: Prophets trends in Interactive Design 2012

couch mode 2 (live tour through a museum)1

livetour.mas.be

Page 32: Prophets trends in Interactive Design 2012

2way to go in 2012

less is more

Page 33: Prophets trends in Interactive Design 2012

only the essence2

path.com

Page 34: Prophets trends in Interactive Design 2012

hugh emotional headers (and arrow links to content)2

www.hanzell.com/winemaking.html

Page 35: Prophets trends in Interactive Design 2012

3way to go in 2012

apps redefining the web

Page 36: Prophets trends in Interactive Design 2012

apps inspire the web3

www.icloud.com

Page 37: Prophets trends in Interactive Design 2012

4way to go in 2012

useful, custom and pretty

Page 38: Prophets trends in Interactive Design 2012

registration as convenient as possible 4

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

Page 39: Prophets trends in Interactive Design 2012

form informs function4

Page 40: Prophets trends in Interactive Design 2012

make online reading more convenient4

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

Page 41: Prophets trends in Interactive Design 2012

not just good-looking4

contrastrebellion.com

Page 42: Prophets trends in Interactive Design 2012

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

Page 43: Prophets trends in Interactive Design 2012

design sells more than ever4

fab.com

Page 44: Prophets trends in Interactive Design 2012

upgrade your body as design object4

tattly.com

Page 45: Prophets trends in Interactive Design 2012

prettify administration3

www.thrivesolo.com

Page 46: Prophets trends in Interactive Design 2012

5way to go in 2012

even google realizes that

Page 48: Prophets trends in Interactive Design 2012

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

BRAD MCCARTY, Managing Editor the next web

Page 49: Prophets trends in Interactive Design 2012

google zeitgeist5

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

Page 50: Prophets trends in Interactive Design 2012

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

UI experience x 20005

Page 51: Prophets trends in Interactive Design 2012

6way to go in 2012

bookmarkinggets visual

Page 52: Prophets trends in Interactive Design 2012

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

pinterest.com

Page 53: Prophets trends in Interactive Design 2012

inspiration library6

gimmebar.com

Page 54: Prophets trends in Interactive Design 2012

2012 design trends

technologicalprogress

Page 55: Prophets trends in Interactive Design 2012

1technological progress

animate

Page 56: Prophets trends in Interactive Design 2012

funky css3 shapes and animations1

beta.rallyinteractive.com

Page 57: Prophets trends in Interactive Design 2012

css animation1

nizoapp.com

Page 58: Prophets trends in Interactive Design 2012

scroll innovation1

www.360langstrasse.sf.tv/page

Page 59: Prophets trends in Interactive Design 2012

parallax pearle1

lamoulade.com/#!/services

Page 60: Prophets trends in Interactive Design 2012

no flash - all html1

discover.store.sony.com/tablet/

Page 61: Prophets trends in Interactive Design 2012

2technological progress

flash is the new niche

Page 62: Prophets trends in Interactive Design 2012

and sometimes flash is just right2

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

Page 63: Prophets trends in Interactive Design 2012

webcam integration & video 2

experience.mtvnhd.com

Page 64: Prophets trends in Interactive Design 2012

3technological progress

challenge the site flow

Page 65: Prophets trends in Interactive Design 2012

innovative navigation3

www.nikesnowboarding.com/products

Page 66: Prophets trends in Interactive Design 2012

functional navigation3

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

Page 67: Prophets trends in Interactive Design 2012

4technological progress

custom fonts are mainstream

Page 68: Prophets trends in Interactive Design 2012

minimalism: typo meets color meets animation4

mahifx.com

Page 69: Prophets trends in Interactive Design 2012

webfont is approaching the finesse of a printfont4

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

Page 70: Prophets trends in Interactive Design 2012

5technological progress

web GL

Page 71: Prophets trends in Interactive Design 2012

web GL experiments5

www.ro.me/film

Page 72: Prophets trends in Interactive Design 2012

web GL commercial use5

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

Page 73: Prophets trends in Interactive Design 2012

6technological progress

APImash ups

Page 74: Prophets trends in Interactive Design 2012

instagram, my favourite app6

ink361.com/#/popular

Page 75: Prophets trends in Interactive Design 2012

daily dosis best of social goes offline6

bergcloud.com/littleprinter/#!prettyPhoto

Page 76: Prophets trends in Interactive Design 2012

7technological progress

responsive web design 2.0

Page 77: Prophets trends in Interactive Design 2012

mastering responsive design7

www.bostonglobe.com

Page 78: Prophets trends in Interactive Design 2012

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

JAkOB NIELSEN, UI expert

Page 79: Prophets trends in Interactive Design 2012

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

WhITNEY hESS, UX Designer

Page 80: Prophets trends in Interactive Design 2012

RESS: Responsive Design + Server Side Components7

Page 81: Prophets trends in Interactive Design 2012

2012 design trends

so what you reallyneed to do

Page 82: Prophets trends in Interactive Design 2012

1what you really need to do

Acknowledge and embrace

unpredictability

Page 83: Prophets trends in Interactive Design 2012

trial & error1

wave.google.com

Page 84: Prophets trends in Interactive Design 2012

beta testing (the geeks in us love it)2

betali.st

Page 85: Prophets trends in Interactive Design 2012

fund design projects1

www.kickstarter.com

Page 86: Prophets trends in Interactive Design 2012

2what you really need to do

processmix

Page 87: Prophets trends in Interactive Design 2012

boooring

yessssss!

rethink the workflow2

Page 88: Prophets trends in Interactive Design 2012

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

Page 89: Prophets trends in Interactive Design 2012

beta multitask2

www.wunderkit.com

Page 90: Prophets trends in Interactive Design 2012

3what you really need to do

Use your instinct

Page 91: Prophets trends in Interactive Design 2012

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

Page 92: Prophets trends in Interactive Design 2012

capture the soul of the product3

www.heringberlin.com

Page 94: Prophets trends in Interactive Design 2012

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

Page 95: Prophets trends in Interactive Design 2012

customized information3

www.facebook.com/about/timeline

Page 96: Prophets trends in Interactive Design 2012

felton talks about FB timeline3

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

Page 97: Prophets trends in Interactive Design 2012

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

CAMERON kOCzON, gimmebar

Page 98: Prophets trends in Interactive Design 2012

a must-read3

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

Page 99: Prophets trends in Interactive Design 2012

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

Page 100: Prophets trends in Interactive Design 2012

2012 design trends

the future is beautiful

Page 101: Prophets trends in Interactive Design 2012

enjoy!1

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

Page 103: Prophets trends in Interactive Design 2012

nice to meet you!

Petra Selldesign director at prophets.be

@volpelino