The Tail and Its Dog

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

Transcript

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

   View Slide

2. View Slide

3. View Slide

4. Art direction 

   is storytelling.
   Well, that’s part of it, anyway.
   

   View Slide

5. We’re wired for stories.
   

   View Slide

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

   View Slide

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

   View Slide

8. View Slide

9. View Slide

10. Designers often 

    do their own 

    art direction.
    

    View Slide

11. What story 

    are we telling?
    

    View Slide

12. How are we telling it?
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. The history of web design
    

    View Slide

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

    View Slide

18. View Slide

19. View Slide

20. View Slide

21. Why is there so much
    design sameness 

    on the web?
    

    View Slide

22. Lack of design foundation.

    Lack of critical thinking.
    Reliance on tools.
    

    View Slide

23. Taking design apart:
    systems
    

    View Slide

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

    View Slide

25. View Slide

26. Define
    values & goals
    Discover
    moods & metaphors
    Generate
    ideas, define a concept
    Create
    a visual language
    Design
    

    View Slide

27. Components

    in the funnel
    

    View Slide

28. Define
    values & goals
    Discover
    moods & metaphors
    Generate
    ideas, define a concept
    Create
    a visual language
    Design
    

    View Slide

29. Cart before the horse,
    the tail wagging the dog
    

    View Slide

30. https://youtu.be/eN6Z_gZTI2A
    

    View Slide

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

    View Slide

32. Define
    values & goals
    Discover
    moods & metaphors
    Generate
    ideas, define a concept
    Create
    a visual language
    Design
    

    View Slide

33. https://youtu.be/1oPRDIuT-ac
    

    View Slide

34. Start with the story
    

    View Slide

35. How do we do this?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

39. Make your own 

    Oblique Strategies.
    2
    

    View Slide

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

    View Slide

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

    View Slide

42. Ask yourself,
    “What problem 

    does this solve?”
    3
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

46. Sketch.
    7
    On paper.
    

    View Slide

47. Don’t pick the 

    low-hanging fruit.
    Sketch past the first ideas that pop into your head.
    

    View Slide

48. Zoom in, zoom out.
    8
    

    View Slide

49. View Slide

50. Don’t forget the “page”.
    

    View Slide

51. Immerse, then incubate.
    9
    

    View Slide

52. View Slide

53. Focus on the problem.
    Don’t let the tail wag the dog.
    10
    

    View Slide

54. Your work does not
    define you. 

    Make mistakes.
    

    View Slide

55. Recognise your
    uniqueness.
    

    View Slide

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

    View Slide