Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
The tail and its dog Stephen Hay Smashing Conference Barcelona 2016
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Art direction is storytelling. Well, that’s part of it, anyway.
Slide 5
Slide 5 text
We’re wired for stories.
Slide 6
Slide 6 text
https://youtu.be/TTx_fwP1-pw
Slide 7
Slide 7 text
https://filmsketchr.blogspot.com.es/2014/03/towering-batman-1989-gotham-city.html
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
Designers often do their own art direction.
Slide 11
Slide 11 text
What story are we telling?
Slide 12
Slide 12 text
How are we telling it?
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
The history of web design
Slide 17
Slide 17 text
http://www.novolume.co.uk/blog/all-websites-look-the-same/
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
Why is there so much design sameness on the web?
Slide 22
Slide 22 text
Lack of design foundation. Lack of critical thinking. Reliance on tools.
Slide 23
Slide 23 text
Taking design apart: systems
Slide 24
Slide 24 text
We’re not designing pages, we’re designing systems of components.
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
Define values & goals Discover moods & metaphors Generate ideas, define a concept Create a visual language Design
Slide 27
Slide 27 text
Components in the funnel
Slide 28
Slide 28 text
Define values & goals Discover moods & metaphors Generate ideas, define a concept Create a visual language Design
Slide 29
Slide 29 text
Cart before the horse, the tail wagging the dog
Slide 30
Slide 30 text
https://youtu.be/eN6Z_gZTI2A
Slide 31
Slide 31 text
Component-based thinking, backwards: it's easier
Slide 32
Slide 32 text
Define values & goals Discover moods & metaphors Generate ideas, define a concept Create a visual language Design
Slide 33
Slide 33 text
https://youtu.be/1oPRDIuT-ac
Slide 34
Slide 34 text
Start with the story
Slide 35
Slide 35 text
How do we do this?
Slide 36
Slide 36 text
Sounds simple, but the majority don't do it
Slide 37
Slide 37 text
Some easy-to-try “tricks”…
Slide 38
Slide 38 text
Ask yourself, “What if…?” 1
Slide 39
Slide 39 text
Make your own Oblique Strategies. 2
Slide 40
Slide 40 text
https://www.flickr.com/photos/doctorow/9041086636
Slide 41
Slide 41 text
Are there sections? Consider transitions Is it finished? Emphasize the flaws etc.
Slide 42
Slide 42 text
Ask yourself, “What problem does this solve?” 3
Slide 43
Slide 43 text
Ask yourself, “Is this congruent with the story?” 4
Slide 44
Slide 44 text
Ask yourself, “How can we tell this story differently?” 5
Slide 45
Slide 45 text
Ask yourself, “Where does this fail?” 6 —ClearLeft. I think.
Slide 46
Slide 46 text
Sketch. 7 On paper.
Slide 47
Slide 47 text
Don’t pick the low-hanging fruit. Sketch past the first ideas that pop into your head.
Slide 48
Slide 48 text
Zoom in, zoom out. 8
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
Don’t forget the “page”.
Slide 51
Slide 51 text
Immerse, then incubate. 9
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
Focus on the problem. Don’t let the tail wag the dog. 10
Slide 54
Slide 54 text
Your work does not define you. Make mistakes.
Slide 55
Slide 55 text
Recognise your uniqueness.
Slide 56
Slide 56 text
Thank you. @stephenhay We’re hiring in Assen & Amsterdam! catawiki.com/jobs