Smart Transitions in User Interface Design
5 likes•5,261 views
The document discusses the importance of smart transitions in UI design, emphasizing user experience through spatial orientation and responsive interactions. It highlights the need for effective animations and state abstraction to communicate UI changes and enhance overall user engagement. Various resources and examples are provided to support the design principles discussed.
Smart Transitions in User Interface Design
- 3. Smart Transitions in UI Design Adrian Zumbrunnen / @azumbrunnen_
- 6. Flow
- 7. – Mihaly Csikszentmihalyi The holistic experience that people feel when they act with total involvement. “
- 12. Aiming for delight is not enough.It’s about creating smart interactions
- 13. Thinking in spatial terms
- 14. our perception of the world
- 15. districts
- 16. layers
- 17. nodes
- 24. Write App
- 25. The Elements of Smart Transitions
- 26. Orientation 1
- 28. Moving from one information space to another takes a certain amount of time.
- 39. seamless top of mind actions
- 40. pull to refresh
- 41. responsive fade / reveal
- 49. – Albert Einstein An hour sitting with a pretty girl on a park bench passes like a minute, but a minute sitting on a hot stove seems like an hour. “
- 50. perception changes our reality.
- 53. linear ease
- 55. Cushioning 4
- 56. – Laurian Gridinoc, Creative Technologist Out of all hand-throwable things, socks have the most unpredictable trajectory. “
- 60. easing makes our user interfaces behave in a more natural way
- 65. state abstraction is about steadily communicating the state of a UI to the user
- 66. Personality 6
- 68. facebook paper
- 69. facebook paper
- 71. nike make app
- 72. nike make app
- 76. personality is key in creating memorable experiences
- 79. 1. Refer to examples - capptivate.com - dribbble - userinterfaces.io - useyourinterface.com - hoverstat.es
- 80. 2. Apple Keynote
- 82. 3. After Effects
- 83. A user interface from hell
- 85. 4. Framer
- 87. 5. Invision
- 89. 6. Use understandable vocabulary Or how to talk about easing
- 92. Thanks! Let’s keep in touch! We can exchange on talk on the following platforms: web: azumbrunnen.me twitter: @azumbrunnen_ mail: [email protected]