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 full-size slide

  2. Art direction 

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

    View full-size slide

  3. We’re wired for stories.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. Designers often 

    do their own 

    art direction.

    View full-size slide

  7. What story 

    are we telling?

    View full-size slide

  8. How are we telling it?

    View full-size slide

  9. The history of web design

    View full-size slide

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

    View full-size slide

  11. Why is there so much
    design sameness 

    on the web?

    View full-size slide

  12. Lack of design foundation.

    Lack of critical thinking.
    Reliance on tools.

    View full-size slide

  13. Taking design apart:
    systems

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Components

    in the funnel

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. https://youtu.be/eN6Z_gZTI2A

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. Start with the story

    View full-size slide

  24. How do we do this?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. Make your own 

    Oblique Strategies.
    2

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. Ask yourself,
    “What problem 

    does this solve?”
    3

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. Sketch.
    7
    On paper.

    View full-size slide

  36. Don’t pick the 

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

    View full-size slide

  37. Zoom in, zoom out.
    8

    View full-size slide

  38. Don’t forget the “page”.

    View full-size slide

  39. Immerse, then incubate.
    9

    View full-size slide

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

    View full-size slide

  41. Your work does not
    define you. 

    Make mistakes.

    View full-size slide

  42. Recognise your
    uniqueness.

    View full-size slide

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

    View full-size slide