a dialect of our own design
DESCRIPTION
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
![Page 1: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/1.jpg)
A DIALECTOF OUR OWN DESIGN
SIMON COLLISONInterlink, June 2011
@colly colly.com
![Page 2: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/2.jpg)
PART ONE
EVERYTHING
![Page 3: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/3.jpg)
AN ESTABLISHED
VISUAL GRAMMAR
![Page 4: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/4.jpg)
![Page 5: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/5.jpg)
![Page 6: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/6.jpg)
![Page 7: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/7.jpg)
![Page 8: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/8.jpg)
![Page 9: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/9.jpg)
![Page 10: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/10.jpg)
![Page 11: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/11.jpg)
![Page 12: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/12.jpg)
![Page 13: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/13.jpg)
![Page 14: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/14.jpg)
![Page 15: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/15.jpg)
![Page 16: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/16.jpg)
![Page 17: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/17.jpg)
![Page 18: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/18.jpg)
![Page 19: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/19.jpg)
![Page 20: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/20.jpg)
![Page 21: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/21.jpg)
![Page 22: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/22.jpg)
![Page 23: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/23.jpg)
![Page 24: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/24.jpg)
![Page 25: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/25.jpg)
![Page 26: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/26.jpg)
MEANING & PERCEPTION
![Page 27: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/27.jpg)
MENTAL MODELS
![Page 28: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/28.jpg)
The models people have of themselves, others, the environment, and the things with which they interact.
MENTAL MODELS
![Page 29: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/29.jpg)
Environment
Experience
Environment
Others
Me
Instruction
Interaction
![Page 30: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/30.jpg)
MAPPING
![Page 31: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/31.jpg)
The relationship between two things.Natural mapping leads to immediate understanding.
MAPPING
![Page 32: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/32.jpg)
Control Outcome
![Page 33: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/33.jpg)
UnderstandingControl Outcome
![Page 34: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/34.jpg)
AFFORDANCE
![Page 35: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/35.jpg)
An affordance is a quality of an object, or an environment, that allows an individual to perform an action.
AFFORDANCE
![Page 36: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/36.jpg)
SEMIOTICS
![Page 37: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/37.jpg)
The study of signsoffering an explanation of how people extract meaning from words, sounds and images.
SEMIOTICS
![Page 38: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/38.jpg)
Symbol Icon Index
![Page 39: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/39.jpg)
TYPOGRAPHY
![Page 40: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/40.jpg)
By using typographywe give a written idea a visual form.
TYPOGRAPHY
![Page 41: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/41.jpg)
COLOUR
![Page 42: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/42.jpg)
Colour can bring designs to life, inform hierarchies, create bonds between elements, add pace or emotion.
COLOUR
![Page 43: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/43.jpg)
THINK SMARTER
![Page 44: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/44.jpg)
PART TWO
AND SO TO WEB
![Page 45: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/45.jpg)
OUR
VISUAL GRAMMAR
![Page 46: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/46.jpg)
OUR
MISTAKES
![Page 47: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/47.jpg)
UNIQUE PATTERNS AND INTERACTIONS
![Page 48: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/48.jpg)
EVOLUTION OF
THE FRAME
![Page 49: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/49.jpg)
![Page 50: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/50.jpg)
![Page 51: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/51.jpg)
![Page 54: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/54.jpg)
http://www.chromeexperiments.com/detail/browser-ball/
![Page 55: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/55.jpg)
![Page 56: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/56.jpg)
![Page 57: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/57.jpg)
![Page 58: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/58.jpg)
![Page 59: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/59.jpg)
DESIGNING
SYSTEMS
![Page 60: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/60.jpg)
We don’t design web pages.We design systems.
SYSTEMS
![Page 61: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/61.jpg)
![Page 62: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/62.jpg)
OUR
VOCABULARY
![Page 63: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/63.jpg)
RESPONSIVE
WEB DESIGN
![Page 64: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/64.jpg)
![Page 65: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/65.jpg)
![Page 66: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/66.jpg)
![Page 67: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/67.jpg)
![Page 68: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/68.jpg)
SO...
WHAT NEXT?
![Page 70: A Dialect of Our Own Design](https://reader034.vdocuments.net/reader034/viewer/2022052504/54c7ff744a7959335d8b45ae/html5/thumbnails/70.jpg)
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