Designing Visual Persuasion

59
DESIGNING VISUAL PERSUASION - Wouter Middendorf & Martijn van der Heijden - The Web And Beyond

description

This presentation was given during the workshop Designing Visual Persuasion at The Web And Beyond conference in Amsterdam. The videos can be found here: inSights: http://vimeo.com/35127122 Awareness: http://www.youtube.com/watch?v=oSQJP40PcGI More on inSights: http://www.fabrique.nl/insights

Transcript of Designing Visual Persuasion

Page 1: Designing Visual Persuasion

DESIGNING VISUAL PERSUASION- Wouter Middendorf & Martijn van der Heijden -

The Web And Beyond

Page 2: Designing Visual Persuasion

WIE ZIJN WIJ?Even voorstellen

Page 3: Designing Visual Persuasion

• Interactie ontwerper

WOUTER

Page 4: Designing Visual Persuasion
Page 5: Designing Visual Persuasion

• Strateeg

MARTIJN

Page 6: Designing Visual Persuasion
Page 7: Designing Visual Persuasion
Page 8: Designing Visual Persuasion

FABRIQUE

Page 9: Designing Visual Persuasion

FABRIQUE

Visie & Strategie Merk & Identiteit Online & Apps

Ruimtelijk Campagnes Grafisch & DTP

Page 10: Designing Visual Persuasion

WIE ZIJN JULLIE?Dan kennen we elkaar

Page 11: Designing Visual Persuasion

WIE ZIJN JULLIE?Dan kennen we elkaar

Hou het kort!

:-)

Page 12: Designing Visual Persuasion

WIE ZIJN JULLIE

Wat staat er op je visitekaartje?

Wat was je laatste project?

Wat verwacht je van vandaag?

Page 13: Designing Visual Persuasion

WAT WE VANDAAG GAAN DOENWat jullie dus echt kunnen verwachten

Page 14: Designing Visual Persuasion

SCRUMMEN!

Page 15: Designing Visual Persuasion

OVER INSIGHTSWaar komt ie vandaan?!

Page 16: Designing Visual Persuasion
Page 17: Designing Visual Persuasion
Page 18: Designing Visual Persuasion
Page 19: Designing Visual Persuasion
Page 20: Designing Visual Persuasion
Page 21: Designing Visual Persuasion

PSYCHOLOGISCHE PRINCIPESDie emoties beïnvloeden om uiteindelijk te motiveren

Page 22: Designing Visual Persuasion
Page 23: Designing Visual Persuasion
Page 24: Designing Visual Persuasion
Page 25: Designing Visual Persuasion
Page 26: Designing Visual Persuasion

VISUELE PRINCIPESDie beïnvloeden op een visueel niveau

Page 27: Designing Visual Persuasion

NAUWELIJKS & INTUITIEF

Page 28: Designing Visual Persuasion
Page 29: Designing Visual Persuasion
Page 30: Designing Visual Persuasion
Page 31: Designing Visual Persuasion

ALL OVER THE WORLD

Page 32: Designing Visual Persuasion

WAT WE ZIEN (EN WAT NIET)Een klein stukje theorie over perceptie

Page 33: Designing Visual Persuasion
Page 34: Designing Visual Persuasion

AWARENESS TEST

Page 35: Designing Visual Persuasion

AWARENESS ATTENTION TEST

Page 36: Designing Visual Persuasion

• Gaat over attention en perception

“Het proces van het verwerven, interpreteren, selecteren en organiseren van zintuiglijke informatie.”

AWARENESS ATTENTION TEST

Bron: Wikipedia

Page 37: Designing Visual Persuasion
Page 38: Designing Visual Persuasion

PERCEPTION• 2 basis processen

Top-down attentie proces versterkt relevante informatie

Page 39: Designing Visual Persuasion

PERCEPTION

Zelfs zo erg dat andere dingen niet meer ziet!

• 2 basis processen

Top-down attentie proces versterkt relevante informatie

Page 40: Designing Visual Persuasion

Bottom-up informatie zorgt voor herkenbare objecten

PERCEPTION• 2 basis processen

Top-down attentie proces versterkt relevante informatie

Page 41: Designing Visual Persuasion

PERCEPTION• 2 basis processen

Visuele eigenschappen - Patronen - Herkenbare objecten

Top-down attentie proces versterkt relevante informatie

Page 42: Designing Visual Persuasion

WAT WE ZIENHangt af van welk proces de overhand heeft

Page 43: Designing Visual Persuasion

WAT WE ZIENHangt af van welk proces de overhand heeft

Page 44: Designing Visual Persuasion
Page 45: Designing Visual Persuasion

PRE-PROCESSING

Page 46: Designing Visual Persuasion

PRE-ATTENTIVE

Page 47: Designing Visual Persuasion

• Vorm• Grootte• Orientatie• Kleur• Beweging• Layout

PRE-ATTENTIVE

Page 48: Designing Visual Persuasion

• Vorm• Grootte• Orientatie• Kleur• Beweging• Layout

PRE-ATTENTIVE

CONTRAST!

Page 49: Designing Visual Persuasion

CONTRAST

Bron: Visual Thinking for Design - Colin Ware

Page 50: Designing Visual Persuasion

WAT WE (MAKKELIJK) ZIENHangt af van het proces in combinatie met de (ontworpen) omgeving

Page 51: Designing Visual Persuasion

OPDRACHT 1Kijken met een andere bril

Page 52: Designing Visual Persuasion

OPDRACHT 2Inside inSights

Page 53: Designing Visual Persuasion
Page 54: Designing Visual Persuasion

OPDRACHT 3Eigen ontwerp!

Page 55: Designing Visual Persuasion

VANDAAG...Hebben we iets nieuws geleerd?

Page 56: Designing Visual Persuasion

VISUAL PERSUASIONAlles in de waaier moet bekend voorkomen...

Page 57: Designing Visual Persuasion
Page 58: Designing Visual Persuasion

BEDANKT!

Page 59: Designing Visual Persuasion

brands, design & interaction