The Highlight 2014 — UI Animations
On the third day of The Highlight 2014, we’re bringing you our picks of some of the best UI animations we’ve seen in apps and across the web. Apps have been a UI playground for quite some time now and it’s always great to see delightful animations in apps that make it a joy to use. Designers and developers are always trying to bring you the best experience in their apps. Our post that highlights our picks from 2013 is one of the most visited posts in 2014 on Beautiful Pixels and there’s no better encouragement for app developers. Here’s what we’ve chosen this year.
The App Store has tons of Dribbble apps. We saw the Dribbble app boom a while back and even wrote about them here on Beautiful Pixels, but most of them didn’t see any updates after release. Design Shots impressed us at launch and has been consistently updated with new features. The animations, in particular, are absolutely fantastic. Every animation fits perfectly with the other and at no point does it feel like multiple libraries of animations thrown together. The animation that follows the avatar tap to profile view is stunning. Design Shots’ animations follow your finger as you swipe and the little things like this make all the difference. Design Shots for iPhone is available for Free on the App Store and you owe it to yourself to download the app.
Lush has almost everything going for it. Right from the beautifully minimal app icon to the colourful glyphs used inside, Lush stands apart from every other drink mixing app out there. Lush also has some of the best in app animations we’ve seen. Drinks slide across the screen like they would in a bar in a old western film while browsing. Small things like the tab bars we see in apps have been designed from the ground up to feel right at home with lovely colour changing animations and highlights. The design of each individual cocktail within the app is commendable. Lush absolutely nails animations that make apps memorable. It is a pity the app has still not been optimized for the larger screens on iPhone 6 and 6 Plus. It is still worth owning. Lush is available on the App Store for $1.99.
Clima is one of the best weather apps we have seen for iPhone. It is a simple app that is filled with delightful animations. Transitions between different views are great and accompanied by a playful bounce. Clima shows you detailed weather conditions that are all a few taps away. It even has a lovely ripple animation on the colour bar pattern while it fetches the temperature. Clima manages to be unique in a flood of minimal weather apps on the App Store. Clima is available on the App Store for $0.99. Hopefully it gets updated to support the new iPhone screens soon.
Storehouse has been one of the best apps to hit the App Store in recent times, rightly winning the App Design Award this year. Storehouse is absolutely phenomenal on the iPad and works just as well on the smaller screen of the iPhone. The team has done a stellar job in crafting for both these devices and a few minutes with the app makes it very evident. The app is meticulously crafted with some fantastic animations as you browse through the stories posted by the community or post your own. We especially like the suble pull-to-refresh animation as well as the way the photos fall into place when you scroll. Storehouse is available as a Universal app Free on the App Store.
ReadMe.io’s Owl mascot instantly delights you when you try to Sign Up or Log In on the site. On the Sign Up page, the owl is pointing to the field currently in focus with his right feather. As the focus moves to the next field, so does his pointer. On the Log In page, as your focus moves to the password field, the owl covers his eyes so as to not see your password. Both these animations are perfect examples of little things that delight users.
Unread, the fantastic RSS reader app for iPhone and iPad that we’ve recommended for quite some time now has had some ridiculously good animations and gestures, but we particularly like its pull-to-refresh animation. The whole app, originally crafted by Jared Sinclair but now in development with the folks at Supertop, is filled with some wonderful and subtle little things that make it a joy to use. Unread is available Free on the App Store for iPhone and iPad.
We’ve loved and recommended TodoMovies to anyone and everyone who is into films and the app does a great job of helping you discover and manage your lists of ’To Watch’ and ‘Watched’ films. The app has a wonderful little animation that plays out when you tap the share button in a particular film’s view. The poster for the film compresses into a circle and the four share options fly out at each side. You have to see it in action to appreciate it. TodoMovies is available Free on the App Store.
Special Mention: Google Play Arrow
There’s a lot to like about Google’s new Material Design principles and implementation, but we really like how the hamburger button turns into a back arrow in apps like Google Play on Android devices. The animation that plays is also quite delightful. A similar attempt is seen on starwars.com where the hamburger button turns into two light sabers, but it being a website, the animation stutters a lot and the result just doesn’t feel right.
Special Mention Two
Inbox Zero Animation in the Inbox by Gmail iOS App
John Schlemmer, a Motion Designer at Google, pointed us towards this lovely animation that he worked on in the Inbox by Gmail iOS app when you’re at Inbox Zero. We totally missed this one.
GIF Via Dribbble
One of the most disappointing things about animations in 2014 is Pocket Casts losing its signature radio tuner animation when you pull to refresh. We’re not sure why, but we’re sure as hell sad to see it go.
We’re giving away some Beautiful Pixels Vinyl Stickers (White or Transparent) to 10 (Yes, TEN) lucky winners for this post. All you have to do is share a link to the post on Twitter or Facebook with the hashtag #bpxl. We’ll draw the winners on January 3rd, 2015. Good luck!
We have some exciting new posts lined up this week, so make sure you’re subscribed to our RSS, Twitter or Facebook feeds. The Highlight 2014 is made possible by the love & feedback of the loyal readers of Beautiful Pixels. We thank you for your support.
[Masthead Credit: Sonaal from Effect Works]