Downloaded 733 times
Uploaded bySimon Collison
Subconscious Design
This presentation discusses principles of visual design for websites and interactive media. It begins by stating that the presentation will start from the beginning of the design process. It then covers several topics relating to design including visual grammar, mental models, mapping, affordance, systems, motives, nostalgia, rhetoric, vernacular, humor, semiotics, typography, color, restraint and reduction, play, personality, self-expression, and courage and conviction. Examples of innovative website designs are provided for several principles. The presentation concludes by thanking the audience.
More Related Content
Subconscious Design
- 1. SUBCONSCIOUS DESIGN Simon Collison EECI2010, SanFrancisco @simoncollison colly.com
- 3. This presentation isabout starting points... DESIGN SQUARE ONE
- 4. This presentation isnot directly about... HTML & CSS JQUERY PHOTOSHOP EXPRESSION ENGINE these are our enablers
- 5. I could listprojects 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 bringswith 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.
- 17.
- 24.
- 25. The models peoplehave of themselves, others, the environment, and the things with which they interact. MENTAL MODELS
- 26. Me Experience Interaction Others Environment Instruction
- 27.
- 28. The relationship between twothings. Natural mapping leads to immediate understanding. MAPPING
- 29. Control Outcome
- 30. Control Understanding Outcome
- 31.
- 32. An affordance isa quality of an object, or an environment, that allows an individual to perform an action. AFFORDANCE
- 33.
- 34. We don’t designweb pages. We design systems. ANDY CLARKE
- 36. http://gregorywood.co.uk/ http://trentwalton.com/
- 37. http://thebolditalic.com/ http://jasonsantamaria.com/
- 38.
- 39. What are ourmotives, and why do we go in one particular direction? MOTIVE
- 42.
- 43. A longing forthe past, or the ephemera of the olden days, and the sense that everything was better than it is today. NOSTALGIA
- 46.
- 48.
- 49. The art ofusing language effectively in order to persuade. RHETORIC
- 50.
- 51. The everyday language throughwhich a group, community or regional area communicates. VERNACULAR
- 55.
- 56. The opportunity topresent and exploit wit in order to communicate meaning. HUMOUR
- 57. http://www.frankchimero.com/ http://www.atmostheory.com/index.php?/projects/commands/
- 60.
- 61. The study ofsigns offering an explanation of how people extract meaning from words, sounds and images. SEMIOTICS
- 63. Symbol Icon Index
- 64.
- 65. By using typography wegive a written idea a visual form. TYPOGRAPHY
- 68.
- 69.
- 70.
- 71.
- 72.
- 74.
- 75. Colour can bringdesigns to life, inform hierarchies, create bonds between elements, add pace or emotion. COLOUR
- 77. 100% yellow 100% yellow 100% yellow 100% yellow 20% black 50% black 80% black 80% yellow 70% yellow 50% yellow
- 78.
- 79. Constructing immediate meaning througheconomy of use. RESTRAINT & REDUCTION
- 85.
- 93.
- 94.