visual communication: alain p @ colombo ux con

41

Upload: colombocampscommunity

Post on 17-Jul-2015

376 views

Category:

Design


0 download

TRANSCRIPT

Page 1: Visual Communication: Alain P @ Colombo UX Con
Page 2: Visual Communication: Alain P @ Colombo UX Con

4 steps to GOODVisual Communication

Page 3: Visual Communication: Alain P @ Colombo UX Con

1 - Insight collectionWays of helping someone

(Solve a problem, Provide a Basic Need, Make them Happy)

Page 4: Visual Communication: Alain P @ Colombo UX Con

1955: Designing for People

Make people feel safer, comfortable, eager to purchase, efficient or/and happier

Page 5: Visual Communication: Alain P @ Colombo UX Con
Page 6: Visual Communication: Alain P @ Colombo UX Con
Page 7: Visual Communication: Alain P @ Colombo UX Con

1988 - Samptha Bank brought consumer oriented banking to Colombo

Page 8: Visual Communication: Alain P @ Colombo UX Con

Select your images wisely

Is it familiar, friendly, safe, fun or serious?

Page 9: Visual Communication: Alain P @ Colombo UX Con
Page 10: Visual Communication: Alain P @ Colombo UX Con
Page 11: Visual Communication: Alain P @ Colombo UX Con

Take the time to understand your audience

Page 12: Visual Communication: Alain P @ Colombo UX Con
Page 13: Visual Communication: Alain P @ Colombo UX Con

2 - TestingRapid Prototyping

Page 14: Visual Communication: Alain P @ Colombo UX Con
Page 15: Visual Communication: Alain P @ Colombo UX Con

These dark grey can be easier on the eyes than 100% black.

Page 16: Visual Communication: Alain P @ Colombo UX Con

reflectingvancouver.wordpress.com

Page 17: Visual Communication: Alain P @ Colombo UX Con
Page 18: Visual Communication: Alain P @ Colombo UX Con
Page 19: Visual Communication: Alain P @ Colombo UX Con

“Start a conversation”

Page 20: Visual Communication: Alain P @ Colombo UX Con
Page 21: Visual Communication: Alain P @ Colombo UX Con
Page 22: Visual Communication: Alain P @ Colombo UX Con

3 - Craftingcomposition and layout

Page 23: Visual Communication: Alain P @ Colombo UX Con

photo: Dihan de Silva

Page 24: Visual Communication: Alain P @ Colombo UX Con

photo: Dihan de Silva

Page 25: Visual Communication: Alain P @ Colombo UX Con

photo: Dihan de Silva

Page 26: Visual Communication: Alain P @ Colombo UX Con

Telling a story (focal point), Non-verbal ways of communicating; colour, shape, form, texture

Page 27: Visual Communication: Alain P @ Colombo UX Con
Page 28: Visual Communication: Alain P @ Colombo UX Con

Who is the hero on the page; eliminate anything that does not support your hero.

Page 29: Visual Communication: Alain P @ Colombo UX Con
Page 30: Visual Communication: Alain P @ Colombo UX Con
Page 31: Visual Communication: Alain P @ Colombo UX Con
Page 32: Visual Communication: Alain P @ Colombo UX Con

Balraj ChanaInterface Designer

Page 33: Visual Communication: Alain P @ Colombo UX Con

Balraj ChanaInterface Designer

Page 34: Visual Communication: Alain P @ Colombo UX Con

Fred NerbyInterface Designer

Page 35: Visual Communication: Alain P @ Colombo UX Con

SaraivaRafael

Page 36: Visual Communication: Alain P @ Colombo UX Con

National Book+Kaputa

Page 37: Visual Communication: Alain P @ Colombo UX Con

4 - Design Assesment LoopMessage > Platform > Execution >

Page 38: Visual Communication: Alain P @ Colombo UX Con

MessageConcept or Story

ExecutionCrafting and Composition

PlatformDistribution or Vehicle

Page 39: Visual Communication: Alain P @ Colombo UX Con
Page 40: Visual Communication: Alain P @ Colombo UX Con
Page 41: Visual Communication: Alain P @ Colombo UX Con

Direct your visuals around the user and the message

you wish to communicate...