This presentation discusses principles of visual design for websites and interactive media. It begins by stating that the presentation will start from the beginning of the design process. It then covers several topics relating to design including visual grammar, mental models, mapping, affordance, systems, motives, nostalgia, rhetoric, vernacular, humor, semiotics, typography, color, restraint and reduction, play, personality, self-expression, and courage and conviction. Examples of innovative website designs are provided for several principles. The presentation concludes by thanking the audience.

1. SUBCONSCIOUS
DESIGN
Simon Collison
EECI2010, San Francisco
@simoncollison colly.com

3. This presentation is about starting points...
DESIGN
SQUARE
ONE

4. This presentation is not directly about...
HTML & CSS
JQUERY
PHOTOSHOP
EXPRESSION
ENGINE
these are our enablers

5. I could list projects in every category from logos, to
annual reports, to magazine covers, to packaging, to
typefaces, to opening titles that could be considered
landmark projects… But when it comes to web sites, I
can’t think of a single www that could be comparable.
ARMIN VIT
Landmark websites, where art thou? Speak Up, April 2009.

6. The screen brings with it different kinds of challenges
for visual design, some of which occur exclusively in
interactive media.
It’s unrealistic to think our old methods can fill in all
the gaps, but new interaction patterns and visual
languages emerge everyday.
These are the building blocks for our new design
principles.
JASON SANTA MARIA

7. VISUAL
GRAMMAR

17. BALANCE
COMPOSITION
SYMMETRY
MOVEMENT
RHYTHM
REPETITION
PATTERNS

24. MENTAL
MODELS

25. The models people have of
themselves, others, the
environment, and the things
with which they interact.
MENTAL MODELS

26. Me
Experience
Interaction
Others
Environment Instruction

27. MAPPING

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

29. Control Outcome

30. Control Understanding Outcome

31. AFFORDANCE

32. An affordance is a quality of
an object, or an environment,
that allows an individual to
perform an action.
AFFORDANCE

33. SYSTEMS

34. We don’t design web pages.
We design systems.
ANDY CLARKE

36. http://gregorywood.co.uk/ http://trentwalton.com/

37. http://thebolditalic.com/ http://jasonsantamaria.com/

38. MOTIVE

39. What are our motives,
and why do we go in one
particular direction?
MOTIVE

42. NOSTALGIA

43. A longing for the past, or
the ephemera of the olden
days, and the sense that
everything was better than
it is today.
NOSTALGIA

46. http://design-book.blogspot.com/search/label/posters

48. RHETORIC

49. The art of using language
effectively in order to persuade.
RHETORIC

50. VERNACULAR

51. The everyday language
through which a group,
community or regional
area communicates.
VERNACULAR

55. HUMOUR

56. The opportunity to present
and exploit wit in order to
communicate meaning.
HUMOUR

57. http://www.frankchimero.com/ http://www.atmostheory.com/index.php?/projects/commands/

60. SEMIOTICS

61. The study of signs offering
an explanation of how people
extract meaning from words,
sounds and images.
SEMIOTICS

63. Symbol Icon Index

64. TYPOGRAPHY

65. By using typography
we give a written idea
a visual form.
TYPOGRAPHY

68. http://typekit.com/

69. http://secondandpark.com/

70. http://gregorywood.co.uk/

71. http://trentwalton.com/

72. http://seedconference.com/

74. COLOUR

75. Colour can bring designs to
life, inform hierarchies, create
bonds between elements, add
pace or emotion.
COLOUR

77. 100% yellow
100% yellow 100% yellow 100% yellow
20% black 50% black 80% black
80% yellow 70% yellow 50% yellow

78. RESTRAINT &
REDUCTION

79. Constructing immediate meaning
through economy of use.
RESTRAINT & REDUCTION

85. PLAY
PERSONALITY
SELF-EXPRESSION

93. COURAGE &
CONVICTION

94. THANKS
Simon Collison
@simoncollison http://colly.com