UX and UI Animations Round up 01

User Experience and User Interface design has come a long way from its humble beginnings in the late 70s and early 80s with the introduction of Graphical User Interfaces (GUI). From the Xerox PARC, the first computer to use the desktop metaphor and mouse-driven graphical user interface, to Apple Lisa and Macintosh operating systems all the way to the current versions of Windows, Mac OS X, iOS and Android, to name a few, there has been a notable shift towards animation especially in mobile and web interaction.

No longer do we think of user interfaces as static design elements but we have come to expect animations, be it transitions from section to section or simply to guide us through a product or service, it is often these factors that help shape our experience and first impressions of a digital product. Subtle animation not only has the power to lead a user through a product but it also has the power to improve the overall user experience be it helping to increase engagement, easing orientation, providing instant feedback to the user and providing a focal point to direct the user’s attention, animation is not only beautiful but it also helps build and sustain meaning and context.

As Steve Jobs said, “It’s not just what it looks like and feels like. Design is how it works.” It is important to always consider how animation can aid a product, not only considering what a product looks like and how it feels but also how the animation will help the user intuitively engage and navigate within the product or app whilst always maintaining a balance, animation should not detracted the user from the task at hand – subtly is the key!

With this all in mind we have put together a round up of some UX and UI Animations from across the web. Enjoy.

Creativedash – www.creativeda.sh

A San Francisco based design studio with a focus on creating emotional connections between users and products.

user-interface-animation-001

An experimental loading screen Creativedash produced for the YachtQuest app, combining function with a little bit of visual fun.

user-interface-animation-002

A fresh approach to the side menu as seen in most apps these days.

user-interface-animation-003

A great little animation used for a notification action.

user-interface-animation-004

A refreshing approach to displaying fitness data in app.

Ramotion – www.ramotion.com

A San Francisco based digital product design agency working closely with a variety of start ups.

user-interface-animation-005

A survey platform Ramotion designed and developed using animation to highlight key points.

user-interface-animation-006

An extremely efficient visual confirmation indicating the states of a toggle switches.

user-interface-animation-006

Unique approach to animation and complex navigation elements.

user-interface-animation-006

Another fitness app animation – states overview and share with an animated difference.

Sergey Valiukh – www.valiukhsergey.com

CEO and Art Director at @Tubik. Designer currently working in Dnipropetrovsk, Ukraine.

user-interface-animation-006

Experimental approach to complex navigation tap bars using animation.

user-interface-animation-006

Adding some visual excitement to the traditional list menu with fun animation.

user-interface-animation-006

A weather app with a lovely animated difference. Great use of animation to define the different weather conditions.

Julien Renvoye – www.dribbble.com/JulienRenvoye

A San Francisco based freelance design and product designer at Mixpanel.

user-interface-animation-006

Using animation to spice up a product page on a website.

user-interface-animation-006

animation is a good way to increase engagement and interest on a website dashboard.

Anton Aheichanka – www.cmdspace.com/madebyanton

A freelance visual designer from Denver, CO working with data to create clean, minimalist, attractive design solutions for web and mobile. Also works closely with InVision – A free and world leading prototyping, collaboration & workflow platform.

user-interface-animation-006

Additional menu options revealed with interactions and animations.

user-interface-animation-006

A unique conceptual approach for a filter menu using smooth animations.

user-interface-animation-006

An animated ‘more options’ approach to a profile screen.

user-interface-animation-006

Additional menu items revealed via a quick and bouncy animation.

That’s it for this round up of UX and UI Animations, stay tuned for our next round up coming soon. Whilst you’re here why not check out some of our animation, user interface & user experience design work over at our digital design portfolio or feel free to get in contact with us.