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

A Dialect of Our Own Design

C9b18d9dff88a9dd2393364c2b3b21bd?s=47 Simon Collison
September 28, 2011

A Dialect of Our Own Design

Presented at Interlink, Vancouver, June 2011

A visual language informs all design, from architecture to print. Fluency in the same language drawn on by Bauhaus, mid-century Swiss, or postmodern design is essential for brilliant web design. In this practical talk, ground uniquely web-based interactions—from complex CSS3 animations and rotations to JavaScript behaviors—using that time-tested visual primer. Take a more considered approach to choices, evoke the desired emotive responses, learn how to better articulate your design decisions. Extend graphic design’s grammar into a visual dialect of web design that guides us to smarter, beautifully balanced juxtapositions of elements in our new, multidimensional web experiences.

C9b18d9dff88a9dd2393364c2b3b21bd?s=128

Simon Collison

September 28, 2011
Tweet

Transcript

  1. A DIALECT OF OUR OWN DESIGN SIMON COLLISON Interlink, June

    2011 @colly colly.com
  2. PART ONE EVERYTHING

  3. AN ESTABLISHED VISUAL GRAMMAR

  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. MEANING & PERCEPTION

  27. MENTAL MODELS

  28. The models people have of themselves, others, the environment, and

    the things with which they interact. MENTAL MODELS
  29. Environment Experience Others Me Instruction Interaction

  30. MAPPING

  31. The relationship between two things. Natural mapping leads to immediate

    understanding. MAPPING
  32. Control Outcome

  33. Understanding Control Outcome

  34. AFFORDANCE

  35. An affordance is a quality of an object, or an

    environment, that allows an individual to perform an action. AFFORDANCE
  36. SEMIOTICS

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

    extract meaning from words, sounds and images. SEMIOTICS
  38. Symbol Icon Index

  39. TYPOGRAPHY

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

    form. TYPOGRAPHY
  41. COLOUR

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

    between elements, add pace or emotion. COLOUR
  43. THINK SMARTER

  44. PART TWO AND SO TO WEB

  45. OUR VISUAL GRAMMAR

  46. OUR MISTAKES

  47. UNIQUE PATTERNS AND INTERACTIONS

  48. EVOLUTION OF THE FRAME

  49. None
  50. None
  51. None
  52. http://wallswaps.com/

  53. http://wallswaps.com/

  54. http://www.chromeexperiments.com/detail/browser-ball/

  55. None
  56. None
  57. None
  58. None
  59. DESIGNING SYSTEMS

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

  61. None
  62. OUR VOCABULARY

  63. RESPONSIVE WEB DESIGN

  64. None
  65. None
  66. None
  67. None
  68. SO... WHAT NEXT?

  69. THANK YOU SIMON COLLISON @colly http://colly.com

  70. FURTHER READING Visual Grammar by Christian Leborg The Design of

    Everyday Things by Don Norman Understanding Comics by Scott McCloud Principles of Form and Design by Wucius Wong Designing for the Web by Mark Boulton Mental Models by Indi Young Communicating Design by Dan Brown