Robert Mills

Designing the Invisible - a look at how we can use colour, typefaces, icons, symbols and tone of voice to tell better stories on the web.

Transcript

1. Robert Mills
2. WTF!
3. No really, WTF!
4. Seriously, who is this guy?
7. Audience Content Story
9. Invisible Communication •  Offline in non-verbal communication •  Convey messages, moods and values using more than just words and images •  A lot of this information is passed subconsciously •  Colour, tone of voice, typefaces, branding, icons and symbols
11. •  How we communicate influences how people perceive us •  We can engage others, or risk offending them •  Good communication is the foundation of successful relationships The power of invisible communication
12. Craft
13. Communicate
14. Connect
15. Effective & Efficient •  Tell stories quickly •  Icons communicate efficiently •  Pictures paint a thousand words •  Use conventions
16. Invisible communication and storytelling are perfect partners, and their child is a great user experience.
23. A human being, during his or her childhood, acquires the meanings of the signs used for communication in its culture as well as a whole series of conventions. Graphic structures rely upon these conventions for their various meanings. Carl G. Liungman “ “
25. X
31. Wayfinding •  Using signs to create a wayfinding system •  Airports, tube map, road signs •  Colour, symbols, shapes, text, typefaces •  Easy to navigate environment •  Relevant naming •  Legibility •  Three act story
37. 92.6%
38. 92.6% 5.6%
39. 92.6% 5.6% 0.9% 0.9%
40. Uses of colour •  Improve memory •  Influence buying decisions •  Tell stories •  Communicate cultural and political messages •  Evoke emotions & influence moods •  Bring content to life •  Attract attention •  Group content •  Contribute to a wayfinding system
41. Another property of flat colours is their tendency to emphasise the shape of objects, both animate and inanimate. These colours objectify their subjects. We become more aware of the physical form of objects than in black and white. “ “ Scott McCloud Understanding Comics: The Invisible Art
45. Denotation: The literal meaning – the most specific or direct meaning of a word. Connotation: The implied or suggested meaning. “ “
48. Connotes: love, passion, desire, danger, war, blood, strength, power
50. Connotes: sunshine, happiness, energy, cheerfulness, spontaneity
52. Connotes: cool, icy, sea, sky, trust, loyalty, wisdom, intelligence
54. Connotes: nature, relaxation, growth, harmony, freshness, wealth, fertility
56. Connotes: royalty, luxury, wizardry, power, nobility, ambition, mystery, magic
58. Connotes: warmth, sunshine, joy, autumn, enthusiasm, success, stimulation
60. Connotes: death, evil, mystery, power, elegance, space, mourning, sleek
62. Connotes: Peace, elegance, innocence, purity, clinical, sterile, virginity
72. The simpler you keep the colour, the more you can say to everybody. I believe colour has helped me create a site for Carsonified that people will remember in just a few seconds of seeing it. “ “ Mike Kus
75. A company who builds things might say …
76. The diversity in our department enables us to be innovative and creative, resulting in revolutionary, ground breaking and immersive experiences for our target consumers.
77. Or they might say …
78. We build awesome products our customers love.
94. Great storytelling doesn’t come from dialogue alone.
96. Storytelling Process •  Know the conventions •  Plan the story •  Understand your audience •  Design the story •  Evaluate the story
101. Designing the Invisible •  Use content to craft stories for the target audience •  Consider cultural/political/religious/social parameters •  Make informed decisions after research •  Learn from world around us and other media •  Use content within context •  Tap into conventions and knowledge •  Make sure it is authentic and consistent and works together •  Every detail tells a story
102. Thank you for listening @RobertMills robertmills.me fivesimplesteps.com