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

Designing Animation Awesomeness - Artifact Austin

Val Head
May 06, 2014
Design
4
460

Designing Animation Awesomeness - Artifact Austin

Designing UI animations for the web and how to fit animation into our design process. Plus silly jokes.

Val Head

May 06, 2014
Tweet

More Decks by Val Head

See All by Val Head
Getting Animation Done
valhead
0
120
Designing Animation Awesomeness - FOWD 2014
valhead
2
520
Putting Your UIs in Motion (AEA Orlando)
valhead
0
650
Designing Animation Awesomeness - Artifact East
valhead
1
890
Web Designer/ Motion Designer - Blend Conf 2014
valhead
1
200
Web Design / Motion Design
valhead
1
140
Creative CSS: Thinking in the 3rd dimension FOWD NY
valhead
2
410
CSS Animations Are The Awesomest!
valhead
2
180
Responsive Typography Techniques
valhead
11
690

Other Decks in Design

See All in Design
toB SaaS開発におけるUXライティング｜あつまるデザナレ2022
aguringo
4
980
4つの事例から分かる ビジネスを成功させたUXデザイン
fixel_admin
0
470
後悔しないデザインシステムの始め方
takanorip
4
2.3k
Odyssey Design
rkendrick25
0
130
モデルとダイアグラムの活用の本質
akiramotomura
0
390
Reunion
solmetts
0
290
リサーチの前に詩を描く
hiranotomoki
0
560
DMMオンラインサロン UI･UXデザイナー採用資料/ for-UI･UX-designers
onlinesalon
0
120
複業でデザインするライフスタイル
norinity1103
0
110
[UX/UI design] Target users and developmental psychology
shira0000000
1
240
なぜロゴを変えるのか / for-designer
minma
0
100
サービスピボット時におけるデザイナーの役割
vivion
0
760

Featured

See All Featured
Debugging Ruby Performance
tmm1
67
11k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
318
19k
5 minutes of I Can Smell Your CMS
philhawksworth
198
18k
Navigating Team Friction
lara
176
12k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
The Illustrated Children's Guide to Kubernetes
chrisshort
22
42k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
7
560
Why Our Code Smells
bkeepers
PRO
326
55k
Designing the Hi-DPI Web
ddemaree
273
32k
How to Ace a Technical Interview
jacobian
270
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
130k
GitHub's CSS Performance
jonrohan
1020
430k

Transcript

  1. Val Head • @vlh Designing Animation Awesomeness! ANIMATION AS DESIGN

    & IN OUR DESIGN PROCESS

  2. Val Head • @vlh Designing Animation Awesomeness! ANIMATION AS DESIGN

    & IN OUR DESIGN PROCESS

  3. RWD + Animation?

  4. None

  5. Animation = Communication

  6. None
  7. None

  8. Animation must match your message.

  9. None

  10. cubic-bezier(0.47, 0, 0.745, 0.715)

  11. vimeo.com/93206523

  12. More than fluff

  13. None
  14. None

  15. Animation + UX FTW

  16. ANIMATION CAN: Establish location

  17. None
  18. None

  19. ANIMATION CAN: Guides tasks

  20. None
  21. None
  22. None

  23. ANIMATION CAN: Demonstrate

  24. None
  25. None
  26. None

  27. ANIMATION CAN: Turn your hierarchy up to 11

  28. None
  29. None

  30. UI animation principles

  31. 1 Always be flexible

  32. None
  33. None

  34. 2 Avoid creating obstacles

  35. None
  36. None

  37. 3 Speed is an art

  38. UI animations should be as fast as they can still

    be readable. readable.

  39. Context matters more than magic numbers for animation speed.

  40. Getting out of your head

  41. None
  42. None

  43. Get your idea moving on screen as early as possible.

  44. None
  45. None
  46. None

  47. framerjs.com/

  48. goo.gl/RXImkC

  49. None

  50. Look beyond the web

  51. artofthetitle.com

  52. capptivate.co

  53. None

  54. Make the awesomest of things!

  55. alltherightmoves.valhead.com

  56. valhead.com/book

  57. codepen.io/valhead alltherightmoves.valhead.com valhead.com @vlh [email protected] Thanks!