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

Designing Visual Persuasion

Embed Size (px)

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

Citation preview

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