Embed Size (px)
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.
Citation preview
A DIALECTOF OUR OWN DESIGN
SIMON COLLISONInterlink, June 2011
@colly colly.com
PART ONE
EVERYTHING
AN ESTABLISHED
VISUAL GRAMMAR
MEANING & PERCEPTION
MENTAL MODELS
The models people have of themselves, others, the environment, and the things with which they interact.
MENTAL MODELS
Environment
Experience
Environment
Others
Me
Instruction
Interaction
MAPPING
The relationship between two things.Natural mapping leads to immediate understanding.
MAPPING
Control Outcome
UnderstandingControl Outcome
AFFORDANCE
An affordance is a quality of an object, or an environment, that allows an individual to perform an action.
AFFORDANCE
SEMIOTICS
The study of signsoffering an explanation of how people extract meaning from words, sounds and images.
SEMIOTICS
Symbol Icon Index
TYPOGRAPHY
By using typographywe give a written idea a visual form.
TYPOGRAPHY
COLOUR
Colour can bring designs to life, inform hierarchies, create bonds between elements, add pace or emotion.
COLOUR
THINK SMARTER
PART TWO
AND SO TO WEB
OUR
VISUAL GRAMMAR
OUR
MISTAKES
UNIQUE PATTERNS AND INTERACTIONS
EVOLUTION OF
THE FRAME
http://www.chromeexperiments.com/detail/browser-ball/
DESIGNING
SYSTEMS
We don’t design web pages.We design systems.
SYSTEMS
OUR
VOCABULARY
RESPONSIVE
WEB DESIGN
SO...
WHAT NEXT?
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
