Download - Subconscious Design

Transcript
Page 1: Subconscious Design

SUBCONSCIOUS DESIGN

Simon CollisonEECI2010, San Francisco

@simoncollison colly.com

Page 2: Subconscious Design
Page 3: Subconscious Design

This presentation is about starting points...

DESIGNSQUARE ONE

Page 4: Subconscious Design

This presentation is not directly about...

HTML & CSSJQUERYPHOTOSHOPEXPRESSIONENGINE these are our enablers

Page 5: Subconscious Design

I could list projects in every category from logos, to annual reports, to magazine covers, to packaging, to typefaces, to opening titles that could be considered landmark projects… But when it comes to web sites, I can’t think of a single www that could be comparable.

ARMIN VIT

Landmark websites, where art thou? Speak Up, April 2009.

Page 6: Subconscious Design

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 7: Subconscious Design

VISUALGRAMMAR

Page 8: Subconscious Design
Page 9: Subconscious Design
Page 10: Subconscious Design
Page 11: Subconscious Design
Page 12: Subconscious Design
Page 13: Subconscious Design
Page 14: Subconscious Design
Page 15: Subconscious Design
Page 16: Subconscious Design
Page 17: Subconscious Design

BALANCECOMPOSITIONSYMMETRYMOVEMENTRHYTHMREPETITIONPATTERNS

Page 18: Subconscious Design
Page 19: Subconscious Design
Page 20: Subconscious Design
Page 21: Subconscious Design
Page 22: Subconscious Design
Page 23: Subconscious Design
Page 24: Subconscious Design

MENTAL MODELS

Page 25: Subconscious Design

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

MENTAL MODELS

Page 26: Subconscious Design

Environment

Experience

Environment

Others

Me

Instruction

Interaction

Page 27: Subconscious Design

MAPPING

Page 28: Subconscious Design

The relationship between two things.

Natural mapping leads to immediate understanding.

MAPPING

Page 29: Subconscious Design

Control Outcome

Page 30: Subconscious Design

UnderstandingControl Outcome

Page 31: Subconscious Design

AFFORDANCE

Page 32: Subconscious Design

An affordance is a quality of an object, or an environment, that allows an individual to perform an action.

AFFORDANCE

Page 33: Subconscious Design

SYSTEMS

Page 34: Subconscious Design

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

ANDY CLARKE

Page 35: Subconscious Design
Page 36: Subconscious Design

http://trentwalton.com/http://gregorywood.co.uk/

Page 37: Subconscious Design

http://thebolditalic.com/ http://jasonsantamaria.com/

Page 38: Subconscious Design

MOTIVE

Page 39: Subconscious Design

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

MOTIVE

Page 40: Subconscious Design
Page 41: Subconscious Design
Page 42: Subconscious Design

NOSTALGIA

Page 43: Subconscious Design

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 44: Subconscious Design
Page 45: Subconscious Design
Page 47: Subconscious Design
Page 48: Subconscious Design

RHETORIC

Page 49: Subconscious Design

The art of using language effectively in order to persuade.

RHETORIC

Page 50: Subconscious Design

VERNACULAR

Page 51: Subconscious Design

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

VERNACULAR

Page 52: Subconscious Design
Page 53: Subconscious Design
Page 54: Subconscious Design
Page 55: Subconscious Design

HUMOUR

Page 56: Subconscious Design

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

HUMOUR

Page 58: Subconscious Design
Page 59: Subconscious Design
Page 60: Subconscious Design

SEMIOTICS

Page 61: Subconscious Design

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

SEMIOTICS

Page 62: Subconscious Design
Page 63: Subconscious Design

Symbol Icon Index

Page 64: Subconscious Design

TYPOGRAPHY

Page 65: Subconscious Design

By using typographywe give a written idea a visual form.

TYPOGRAPHY

Page 66: Subconscious Design
Page 67: Subconscious Design
Page 69: Subconscious Design

http://secondandpark.com/

Page 70: Subconscious Design

http://gregorywood.co.uk/

Page 71: Subconscious Design

http://trentwalton.com/

Page 72: Subconscious Design

http://seedconference.com/

Page 73: Subconscious Design
Page 74: Subconscious Design

COLOUR

Page 75: Subconscious Design

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

COLOUR

Page 76: Subconscious Design
Page 77: Subconscious Design

100% yellow

100% yellow20% black

100% yellow50% black

100% yellow80% black

80% yellow 70% yellow 50% yellow

Page 78: Subconscious Design

RESTRAINT &REDUCTION

Page 79: Subconscious Design

Constructing immediate meaning through economy of use.

RESTRAINT & REDUCTION

Page 80: Subconscious Design
Page 81: Subconscious Design
Page 82: Subconscious Design
Page 83: Subconscious Design
Page 84: Subconscious Design
Page 85: Subconscious Design

PLAYPERSONALITYSELF-EXPRESSION

Page 86: Subconscious Design
Page 87: Subconscious Design
Page 88: Subconscious Design
Page 89: Subconscious Design
Page 90: Subconscious Design
Page 91: Subconscious Design
Page 92: Subconscious Design
Page 93: Subconscious Design

COURAGE &CONVICTION

Page 94: Subconscious Design

THANKS

Simon Collison

@simoncollison http://colly.com


Top Related