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.

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
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
52. http://wallswaps.com/
53. http://wallswaps.com/
54. http://www.chromeexperiments.com/detail/browser-ball/
59. DESIGNING SYSTEMS
60. We don’t design web pages. We design systems. SYSTEMS
62. OUR VOCABULARY
63. RESPONSIVE WEB DESIGN
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