This document discusses the fundamentals of visual design and communication. It covers concepts like mental models, mapping, affordances, semiotics, typography, and color which are used to effectively convey meaning and ideas visually. The document advocates designing systems rather than individual pages, and highlights responsive web design as an important approach. It concludes by recommending further reading on visual grammar, design principles, and communicating design concepts.

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. Me
Experience
Interaction
Others
Environment Instruction

30. MAPPING

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

32. Control Outcome

33. Control Understanding 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