Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Tail and Its Dog

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.

Stephen Hay

October 26, 2016
Tweet

More Decks by Stephen Hay

Other Decks in Design

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