Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Subconscious Design

C9b18d9dff88a9dd2393364c2b3b21bd?s=47 Simon Collison
September 28, 2011

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.

C9b18d9dff88a9dd2393364c2b3b21bd?s=128

Simon Collison

September 28, 2011
Tweet

Transcript

  1. SUBCONSCIOUS DESIGN Simon Collison EECI2010, San Francisco @simoncollison colly.com

  2. None
  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

  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. BALANCE COMPOSITION SYMMETRY MOVEMENT RHYTHM REPETITION PATTERNS

  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  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

  35. None
  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
  40. None
  41. None
  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
  44. None
  45. None
  46. http://design-book.blogspot.com/search/label/posters

  47. None
  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
  52. None
  53. None
  54. None
  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/

  58. None
  59. None
  60. SEMIOTICS

  61. The study of signs offering an explanation of how people

    extract meaning from words, sounds and images. SEMIOTICS
  62. None
  63. Symbol Icon Index

  64. TYPOGRAPHY

  65. By using typography we give a written idea a visual

    form. TYPOGRAPHY
  66. None
  67. None
  68. http://typekit.com/

  69. http://secondandpark.com/

  70. http://gregorywood.co.uk/

  71. http://trentwalton.com/

  72. http://seedconference.com/

  73. None
  74. COLOUR

  75. Colour can bring designs to life, inform hierarchies, create bonds

    between elements, add pace or emotion. COLOUR
  76. None
  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

  80. None
  81. None
  82. None
  83. None
  84. None
  85. PLAY PERSONALITY SELF-EXPRESSION

  86. None
  87. None
  88. None
  89. None
  90. None
  91. None
  92. None
  93. COURAGE & CONVICTION

  94. THANKS Simon Collison @simoncollison http://colly.com