Animationsdesign für Apps

36
Animations-Design für Apps Andreas Zeitler zCasting 3000 @zcasting3000

Transcript of Animationsdesign für Apps

Page 1: Animationsdesign für Apps

Animations-Design für Apps

Andreas ZeitlerzCasting 3000 @zcasting3000

Page 2: Animationsdesign für Apps

Animation Basics

Page 3: Animationsdesign für Apps

Unterschiede zum “starren” Design

x

y

z

Page 4: Animationsdesign für Apps

x

y

t

Page 5: Animationsdesign für Apps

Die 4 Bausteine jeder Animation

Bewegung Größe bzw. Rotation Transparenz (Farbe) Änderung über Zeit

zCasting 3000

Page 6: Animationsdesign für Apps
Page 7: Animationsdesign für Apps
Page 8: Animationsdesign für Apps
Page 9: Animationsdesign für Apps

Langsam = Eleganz, Ruhe, Fokus Schnell = Unruhe, Hektik, Aufmerksamkeit

Page 10: Animationsdesign für Apps

🤓

Page 11: Animationsdesign für Apps

🤓

🍵

Page 12: Animationsdesign für Apps

🍵

Page 13: Animationsdesign für Apps

🍵

Page 15: Animationsdesign für Apps

iOS Beispiele

Page 16: Animationsdesign für Apps
Page 17: Animationsdesign für Apps
Page 18: Animationsdesign für Apps

https://www.instagram.com/p/xHL207gnmJ/

Page 19: Animationsdesign für Apps

https://www.instagram.com/p/xu1CxXAni2/

Page 20: Animationsdesign für Apps

#uianimation

Page 21: Animationsdesign für Apps

https://www.instagram.com/p/w_sUkEAntM/

Page 22: Animationsdesign für Apps

https://www.instagram.com/p/xX5G8ugnqJ/

Page 23: Animationsdesign für Apps
Page 24: Animationsdesign für Apps
Page 25: Animationsdesign für Apps

https://www.instagram.com/p/-gGR2kgntv/

Page 27: Animationsdesign für Apps

https://www.instagram.com/p/_mZwiQAnhT/

Page 28: Animationsdesign für Apps

Inspiration

Page 29: Animationsdesign für Apps

https://www.instagram.com/p/w55c5_gnnf/

https://www.instagram.com/p/_mZwiQAnhT/

Page 30: Animationsdesign für Apps
Page 31: Animationsdesign für Apps
Page 32: Animationsdesign für Apps

https://www.youtube.com/watch?v=Q8TXgCzxEnw https://www.google.com/design/spec/material-design/introduction.html

Page 34: Animationsdesign für Apps

Lesen

Page 36: Animationsdesign für Apps

Animations-Design für Apps

Andreas ZeitlerzCasting 3000 @zcasting3000