Subconscious Design

Presented at EECI2010, San Francisco, May 2010

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

1. SUBCONSCIOUS DESIGN Simon Collison EECI2010, San Francisco @simoncollison colly.com
3. This presentation is about starting points... DESIGN SQUARE ONE
4. This presentation is not directly about... HTML & CSS JQUERY PHOTOSHOP EXPRESSION ENGINE these are our enablers
5. 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.
6. 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
7. VISUAL GRAMMAR
17. BALANCE COMPOSITION SYMMETRY MOVEMENT RHYTHM REPETITION PATTERNS
24. MENTAL MODELS
25. The models people have of themselves, others, the environment, and the things with which they interact. MENTAL MODELS
26. Environment Experience Others Me Instruction Interaction
27. MAPPING
28. The relationship between two things. Natural mapping leads to immediate understanding. MAPPING
29. Control Outcome
30. Understanding Control Outcome
31. AFFORDANCE
32. An affordance is a quality of an object, or an environment, that allows an individual to perform an action. AFFORDANCE
33. SYSTEMS
34. We don’t design web pages. We design systems. ANDY CLARKE
36. http://trentwalton.com/ http://gregorywood.co.uk/
37. http://thebolditalic.com/ http://jasonsantamaria.com/
38. MOTIVE
39. What are our motives, and why do we go in one particular direction? MOTIVE
42. NOSTALGIA
43. A longing for the past, or the ephemera of the olden days, and the sense that everything was better than it is today. NOSTALGIA
46. http://design-book.blogspot.com/search/label/posters
48. RHETORIC
49. The art of using language effectively in order to persuade. RHETORIC
50. VERNACULAR
51. The everyday language through which a group, community or regional area communicates. VERNACULAR
55. HUMOUR
56. The opportunity to present and exploit wit in order to communicate meaning. HUMOUR
57. http://www.atmostheory.com/index.php?/projects/commands/ http://www.frankchimero.com/
60. SEMIOTICS
61. The study of signs offering an explanation of how people extract meaning from words, sounds and images. SEMIOTICS
63. Symbol Icon Index
64. TYPOGRAPHY
65. By using typography we give a written idea a visual form. TYPOGRAPHY
68. http://typekit.com/
69. http://secondandpark.com/
70. http://gregorywood.co.uk/
71. http://trentwalton.com/
72. http://seedconference.com/
74. COLOUR
75. Colour can bring designs to life, inform hierarchies, create bonds between elements, add pace or emotion. COLOUR
77. 100% yellow 100% yellow 20% black 100% yellow 50% black 100% yellow 80% black 80% yellow 70% yellow 50% yellow
78. RESTRAINT & REDUCTION
79. Constructing immediate meaning through economy of use. RESTRAINT & REDUCTION
85. PLAY PERSONALITY SELF-EXPRESSION
93. COURAGE & CONVICTION
94. THANKS Simon Collison @simoncollison http://colly.com