Animation for interfaces

While digital screens reduce our senses to only visual and listening, we can improve users’ experience and understanding through animations. I thought about how the whole team can develop animations without the knowledge of motion design. Create design and branding patterns for mobile and web with basic knowledge and tools.

Transcript

1. Animation for interfaces Best practices by Marie Schweiz senior designer at diversity
2. Table of contents • Why animating interfaces? • The power of storytelling? • Who is doing animations? • When and how to plan animations • Developing branding patterns • Tools and Tricks you can use Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit
3. Why? Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit
4. Feedback for interaction animation replaces our senses. Usually we have to understand interactions within our environment Pro Tip: When animation is provided as a response it is unlikely a user experience it as annoying. If there is no initial interaction it might stress users depending on how aggressive the animation is. Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit
5. Storytelling Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit
6. Storytelling What happens in movies when the good guy's is running after the bad guy's draw a storyboard: drawing storyboards isn't that much different from scribbling wireframes. Difference is drawing the transition scenes between them. Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit
7. Who? Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit
8. Who is doing animations, ux designers, Developers or interaction designers? I say, all together Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit
9. Planning Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit
10. 2 colors of sticky notes + 1 Pen Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit
11. 1 Stickynote = 1 Event just like a storyboard: draw transitions you can imagine or like to have to support a users understanding on your wireframes. Describe events just like a storyboard Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit http://marvl.in/8jceje
12. Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit http://marvl.in/8jceje
13. Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit
14. Branding Patterns Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit
15. Apps / Products brand differently Websites have to win the competition and the moment of choice every moment of usage. Apps are taken / bought products which are owned by a user. the user the understands by principle what product / app it is. Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit
16. ii Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit
17. ii Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit
18. ii Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit
19. Tools & tricks Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit
20. Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit Stopmotion app's a great way to learn how animation is working is stop motion design. • understanding the concept of frames • learn using the basic principles of curves
21. Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit Stopmotion with iPads
22. Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit
23. Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit NFB for iOS
24. Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit
25. Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit Apple Keynote a very simple tool, powerful for prototyping and basic animations.
26. Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit
27. Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit
28. Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit Adobe After Effects or Photoshop The most powerful animation tool i know.
29. Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit Adobe After Effects or Photoshop
30. Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit
31. Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit
32. Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit working with the adobe creative cloud
33. Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit Keep in mind
34. Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit Keep in mind • Structure your animation with "events" • Which way or technique you use doesn't matter • Everyone can do it. Involve your development team • animated interface is way better than crappy branding
35. i Marie Schweiz for diversity. Creative studio - Berlin - New York - Detroit Thank you! Best practice by Marie Schweiz lead designer at dvsty.com Berlin, New York, Detroit mail: marie@dvsty.com https://twitter.com/ma_rylou https://dribbble.com/ma_rylou