I recently wrote about transitions and their importance within interface design. The article talked about the ways that transitions are used within many areas of design including product design, automotive and application design.
Good examples of desktop, browser transitions can be still be found and I can see that as our experience of well designed interfaces in mobile apps increases, as will our demand for slicker interfaces inside desktop browsers.
Examples of transitions inside the browser, on the desktop
I’ve no idea how, and on what type of device you are reading this post but it’s my intention that you view the examples below on your desktop PC. The main point I wanted to make in my previous article was:
When designing an application, an interface or any type of structured content, we must ensure that users understand where they have come from as they arrive at the new page or state.
Although the examples below are not perfect in my opinion, they do a good shop of demonstrating the principals mentioned above.
Cultural Solutions UK
Campaign Monitor is Hiring
I would really like to know if you have come across any other good examples of transitions (especially in the browser, on the desktop) so please do let me know by commenting below. In the meantime, here is some further reading:
- jQuery.ScrollTo by Ariel Flesler
- Mission Transition – Smashing Magazine
- Meaningful Transitions – Motion Graphics in the User Interface
- Animations in User Interface Design: Essential Nutrient Instead of Eye Candy
- CSS Easing Animation Tool
- How to Use jQuery to Make Slick Page Transitions