design to communicate

54
DESIGN TO COMMUNICATE Simon Collison DIBI, Gateshead, April 2010 @simoncollison colly.com

Upload: simon-collison

Post on 28-Jan-2015

105 views

Category:

Design


0 download

DESCRIPTION

As designers, we manipulate all that is available to us, aiming to present ideas in a visually engaging form. But what are our motives, and why do we go in a particular direction? Why do great designers have the courage to do things a certain way, and succeed? Simon will explore how web designers can improve their thought processes by stepping away from the browser, and in turn bring clearer, well-reasoned thinking back into their work. He’ll introduce established and new ways of thinking, and key points of influence that can assist with any web design process.

TRANSCRIPT

Page 1: Design To Communicate

DESIGN TO COMMUNICATE

Simon CollisonDIBI, Gateshead, April 2010

@simoncollison colly.com

Page 2: Design To Communicate

This presentation is about starting points...

DESIGNSQUARE ONE

Page 3: Design To Communicate

This presentation is not about...

HTML & CSSJQUERYPHOTOSHOP because these are just enablers

Page 4: Design To Communicate

The screen brings with it different kinds of challenges for visual design, some of which occur exclusively in interactive media.

It’s unrealistic to think our old methods can fill in all the gaps, but new interaction patterns and visual languages emerge everyday.

These are the building blocks for our new design principles.

JASON SANTA MARIA

Page 5: Design To Communicate

VISUALGRAMMAR

Page 6: Design To Communicate
Page 7: Design To Communicate
Page 8: Design To Communicate
Page 9: Design To Communicate
Page 10: Design To Communicate
Page 11: Design To Communicate
Page 12: Design To Communicate
Page 13: Design To Communicate
Page 14: Design To Communicate
Page 15: Design To Communicate

BALANCECOMPOSITIONSYMMETRYMOVEMENTRHYTHMREPETITIONPATTERNS

Page 16: Design To Communicate
Page 17: Design To Communicate
Page 18: Design To Communicate
Page 19: Design To Communicate
Page 20: Design To Communicate
Page 21: Design To Communicate
Page 22: Design To Communicate

MENTAL MODELS

Page 23: Design To Communicate

The models people have of themselves, others, the environment, and the things with which they interact.

MENTAL MODELS

Page 24: Design To Communicate

Environment

Experience

Environment

Others

Me

Instruction

Interaction

Page 25: Design To Communicate

MAPPING

Page 26: Design To Communicate

The relationship between two things.

Natural mapping leads to immediate understanding.

MAPPING

Page 27: Design To Communicate

Control Outcome

Page 28: Design To Communicate

UnderstandingControl Outcome

Page 29: Design To Communicate

SYSTEMS

Page 30: Design To Communicate

We don’t design web pages. We design systems.

ANDY CLARKE

Page 31: Design To Communicate
Page 32: Design To Communicate

MOTIVE

Page 33: Design To Communicate

What are our motives, and why do we go in one particular direction?

MOTIVE

Page 34: Design To Communicate

NOSTALGIA

Page 35: Design To Communicate

A longing for the past, or the ephemera of the olden days, and the sense that everything was better than it is today.

NOSTALGIA

Page 36: Design To Communicate

RHETORIC

Page 37: Design To Communicate

The art of using language effectively in order to persuade.

RHETORIC

Page 38: Design To Communicate

VERNACULAR

Page 39: Design To Communicate

The everyday language through which a group, community or regional area communicates.

VERNACULAR

Page 40: Design To Communicate

HUMOUR

Page 41: Design To Communicate

The opportunity to present and exploit wit in order to communicate meaning.

HUMOUR

Page 42: Design To Communicate

SEMIOTICS

Page 43: Design To Communicate

The study of signs offering an explanation of how people extract meaning from words, sounds and images.

SEMIOTICS

Page 44: Design To Communicate

Symbol Icon Index

Page 45: Design To Communicate

TYPOGRAPHY

Page 46: Design To Communicate

By using typographywe give a written idea a visual form.

TYPOGRAPHY

Page 47: Design To Communicate

COLOUR

Page 48: Design To Communicate

Colour can bring designs to life, inform hierarchies, create bonds between elements, add pace or emotion.

COLOUR

Page 49: Design To Communicate

100% yellow

100% yellow20% black

100% yellow50% black

100% yellow80% black

80% yellow 70% yellow 50% yellow

Page 50: Design To Communicate

RESTRAINT &REDUCTION

Page 51: Design To Communicate

Constructing immediate meaning through economy of use.

RESTRAINT & REDUCTION

Page 52: Design To Communicate

PLAYPERSONALITYSELF-EXPRESSION

Page 53: Design To Communicate

COURAGE &CONVICTION

Page 54: Design To Communicate

THANKS

Simon Collison

@simoncollison colly.com