A Dialect of Our Own Design
Upcoming SlideShare
Loading in...5
×
 

A Dialect of Our Own Design

on

  • 18,147 views

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

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.

Statistics

Views

Total Views
18,147
Views on SlideShare
16,374
Embed Views
1,773

Actions

Likes
22
Downloads
214
Comments
2

17 Embeds 1,773

http://folksonomy.co 1067
http://madebymany.com 404
http://onstuimig.nl 175
http://lanyrd.com 96
http://makingnewmaps.com 10
http://orchidrdtwc301.wordpress.com 3
http://m.onstuimig.nl 3
http://drizzlin.com 3
http://translate.googleusercontent.com 2
http://twitter.com 2
http://awesomepitch.co 2
http://ayudamutuapadresenprocesodeduelo.blogspot.com 1
http://sameissue.appspot.com 1
http://localhost 1
http://www.slideshare.net 1
http://sandbox.folksonomy.co 1
http://www.folksonomy.co 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Share a website with you ,

    (======= http://www.slimmingg.com =======)

    Believe you will love it.
    Are you sure you want to
    Your message goes here
    Processing…
  • It really a good article.oakleysunglassesprescription sunglasses cyclingcycling sun glassesReplica Oakley Oil Rig Sunglassespolarized prescription sunglassesReplica Oakley Minute SunglassesReplica Oakley Monster Dog SunglassesFake Oakley Radar Sunglassescheap Oakley Fives Sunglassesoakley flak jacket sunglassescheap Oakley Holbrook Sunglassesoakley jawbone sunglassesoakley juliet sunglassesoakley radar sunglassescheap Oakley Restless Sunglassesoakley scalpel sunglassesray-ban cockpit sunglasseswomen's christian audigier swimwearwomen's ed hardy love kills slowly with tattoo bikinischristian audigier bikiniswomen's ed hardy rose and skull bikiniswomen's ed hardy rose and skull swimsuitswomen's ed hardy skull swords & roses swimsuitswomen's ed hardy skull swords & roses swimwearwomen's ed hardy skull swords bathing suitsMonster beats by dr. dre Powerbeats Headphonesdr. dre Pro High Performance HeadphonesMonster beats by dr. dre Artist Series Headphonesdr. dre Diddy High Performance HeadphonesIbeats by dr. dre HeadphonesMonster Tour by dr. dre HeadphonesMonster Butterfly Headphonesdr. dre Heartbeats In-Ear Headphones
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

A Dialect of Our Own Design A Dialect of Our Own Design Presentation Transcript

  • A DIALECTOF OUR OWN DESIGNSIMON COLLISONInterlink, June 2011@colly colly.com
  • PART ONEEVERYTHING
  • AN ESTABLISHEDVISUAL GRAMMAR
  • MEANING &PERCEPTION
  • MENTALMODELS
  • The models people have ofthemselves, others, theenvironment, and the things withwhich they interact.MENTAL MODELS
  • Me ExperienceInteraction Others Environment Instruction
  • MAPPING
  • The relationship between two things.Natural mapping leads to immediateunderstanding.MAPPING
  • Control Outcome
  • Control Understanding Outcome
  • AFFORDANCE
  • An affordance is a quality of anobject, or an environment, thatallows an individual to performan action.AFFORDANCE
  • SEMIOTICS
  • The study of signsoffering an explanation of howpeople extract meaning fromwords, sounds and images.SEMIOTICS
  • Symbol Icon Index
  • TYPOGRAPHY
  • By using typographywe give a written idea avisual form.TYPOGRAPHY
  • COLOUR
  • Colour can bring designs to life,inform hierarchies, create bondsbetween elements, add pace oremotion.COLOUR
  • THINK SMARTER
  • PART TWOAND SO TO WEB
  • OURVISUAL GRAMMAR
  • OURMISTAKES
  • UNIQUE PATTERNSAND INTERACTIONS
  • EVOLUTION OFTHE FRAME
  • http://wallswaps.com/
  • http://wallswaps.com/
  • http://www.chromeexperiments.com/detail/browser-ball/
  • DESIGNINGSYSTEMS
  • We don’t design web pages.We design systems.SYSTEMS
  • OURVOCABULARY
  • RESPONSIVEWEB DESIGN
  • SO...WHAT NEXT?
  • THANK YOU SIMON COLLISON @colly http://colly.com
  • 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