Subconscious Design

Post on 17-Aug-2014

13.848 views 82 download

Tags:

description

Quite rightly, the EECI events place great emphasis on the community's approach to responsible and scalable development. However, along with fellow speakers Lea and Greg, Simon believes we must also think carefully about our visual design decisions.Simon will look at visual language and inspirational starting points, with clear relevance to our EE sites and "systems". He'll introduce design principles that help us communicate ideas, relay information, elicit emotion and encourage actions; useful theory for all attendees, whatever their primary focus.

Transcript of Subconscious Design

SUBCONSCIOUS DESIGN

Simon CollisonEECI2010, San Francisco

@simoncollison colly.com

This presentation is about starting points...

DESIGNSQUARE ONE

This presentation is not directly about...

HTML & CSSJQUERYPHOTOSHOPEXPRESSIONENGINE these are our enablers

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.

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

VISUALGRAMMAR

BALANCECOMPOSITIONSYMMETRYMOVEMENTRHYTHMREPETITIONPATTERNS

MENTAL MODELS

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

MENTAL MODELS

Environment

Experience

Environment

Others

Me

Instruction

Interaction

MAPPING

The relationship between two things.

Natural mapping leads to immediate understanding.

MAPPING

Control Outcome

UnderstandingControl Outcome

AFFORDANCE

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

AFFORDANCE

SYSTEMS

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

ANDY CLARKE

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

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

MOTIVE

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

MOTIVE

NOSTALGIA

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

NOSTALGIA

RHETORIC

The art of using language effectively in order to persuade.

RHETORIC

VERNACULAR

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

VERNACULAR

HUMOUR

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

HUMOUR

SEMIOTICS

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

SEMIOTICS

Symbol Icon Index

TYPOGRAPHY

By using typographywe give a written idea a visual form.

TYPOGRAPHY

http://secondandpark.com/

http://gregorywood.co.uk/

http://trentwalton.com/

http://seedconference.com/

COLOUR

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

COLOUR

100% yellow

100% yellow20% black

100% yellow50% black

100% yellow80% black

80% yellow 70% yellow 50% yellow

RESTRAINT &REDUCTION

Constructing immediate meaning through economy of use.

RESTRAINT & REDUCTION

PLAYPERSONALITYSELF-EXPRESSION

COURAGE &CONVICTION

THANKS

Simon Collison

@simoncollison http://colly.com