The Tail and Its Dog

36857c1095dccf2f2c5ea470dc791530?s=47 Stephen Hay
October 26, 2016

The Tail and Its Dog

My talk on art direction for SmashingConf Barcelona, 2016. One slide has been purposely removed for privacy reasons.

36857c1095dccf2f2c5ea470dc791530?s=128

Stephen Hay

October 26, 2016
Tweet

Transcript

  1. The tail and its dog Stephen Hay Smashing Conference Barcelona

    2016
  2. None
  3. None
  4. Art direction 
 is storytelling. Well, that’s part of it,

    anyway.
  5. We’re wired for stories.

  6. https://youtu.be/TTx_fwP1-pw

  7. https://filmsketchr.blogspot.com.es/2014/03/towering-batman-1989-gotham-city.html

  8. None
  9. None
  10. Designers often 
 do their own 
 art direction.

  11. What story 
 are we telling?

  12. How are we telling it?

  13. None
  14. None
  15. None
  16. The history of web design

  17. http://www.novolume.co.uk/blog/all-websites-look-the-same/

  18. None
  19. None
  20. None
  21. Why is there so much design sameness 
 on the

    web?
  22. Lack of design foundation.
 Lack of critical thinking. Reliance on

    tools.
  23. Taking design apart: systems

  24. We’re not designing pages, we’re designing systems of components.

  25. None
  26. Define values & goals Discover moods & metaphors Generate ideas,

    define a concept Create a visual language Design
  27. Components
 in the funnel

  28. Define values & goals Discover moods & metaphors Generate ideas,

    define a concept Create a visual language Design
  29. Cart before the horse, the tail wagging the dog

  30. https://youtu.be/eN6Z_gZTI2A

  31. Component-based thinking, backwards: it's easier

  32. Define values & goals Discover moods & metaphors Generate ideas,

    define a concept Create a visual language Design
  33. https://youtu.be/1oPRDIuT-ac

  34. Start with the story

  35. How do we do this?

  36. Sounds simple, but the majority don't do it

  37. Some easy-to-try “tricks”…

  38. Ask yourself, “What if…?” 1

  39. Make your own 
 Oblique Strategies. 2

  40. https://www.flickr.com/photos/doctorow/9041086636

  41. Are there sections? Consider transitions Is it finished? Emphasize the

    flaws etc.
  42. Ask yourself, “What problem 
 does this solve?” 3

  43. Ask yourself, “Is this congruent with the story?” 4

  44. Ask yourself, “How can we tell this story differently?” 5

  45. Ask yourself, “Where does this fail?” 6 —ClearLeft. I think.

  46. Sketch. 7 On paper.

  47. Don’t pick the 
 low-hanging fruit. Sketch past the first

    ideas that pop into your head.
  48. Zoom in, zoom out. 8

  49. None
  50. Don’t forget the “page”.

  51. Immerse, then incubate. 9

  52. None
  53. Focus on the problem. Don’t let the tail wag the

    dog. 10
  54. Your work does not define you. 
 Make mistakes.

  55. Recognise your uniqueness.

  56. Thank you. @stephenhay We’re hiring in Assen & Amsterdam! catawiki.com/jobs