As designers, we manipulate all that is available to us, aiming to present ideas in a visually engaging form. But what are our motives, and why do we go in a particular direction? Why do great designers have the courage to do things a certain way, and succeed? Simon will explore how web designers can improve their thought processes by stepping away from the browser, and in turn bring clearer, well-reasoned thinking back into their work. He’ll introduce established and new ways of thinking, and key points of influence that can assist with any web design process.

1. DESIGN TO
COMMUNICATE
Simon Collison
DIBI, Gateshead, April 2010
@simoncollison colly.com

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

3. This presentation is not about...
HTML & CSS
JQUERY
PHOTOSHOPbecause these are just enablers

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

5. VISUAL
GRAMMAR

15. BALANCE
COMPOSITION
SYMMETRY
MOVEMENT
RHYTHM
REPETITION
PATTERNS

22. MENTAL
MODELS

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

24. Environment
Experience
Others
Me
Instruction
Interaction

25. MAPPING

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

27. Control Outcome

28. UnderstandingControl Outcome

29. SYSTEMS

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

32. MOTIVE

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

34. NOSTALGIA

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

36. RHETORIC

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

38. VERNACULAR

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

40. HUMOUR

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

42. SEMIOTICS

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

44. Symbol Icon Index

45. TYPOGRAPHY

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

47. COLOUR

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

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

50. RESTRAINT &
REDUCTION

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

52. PLAY
PERSONALITY
SELF-EXPRESSION

53. COURAGE &
CONVICTION

54. THANKS
Simon Collison
@simoncollison colly.com