Guest blog post from Johnny Westlake, an Animation Designer at UI Centric
Animation can play a crucial part in turning a good application into a great application. Used properly they can make your application stick out in the users mind, and give them an extra added reason to come back. And without them applications can often incomplete and unfinished, which your users will pick up on. The Windows 8 OS is peppered with big and little animations, and if you’re making a Windows 8 application without paying attention to them, it’s not going to feel right.
This is especially important in a touch-first capable environment like Windows 8, where natural and smooth behaviour is expected - and more so in the case of media applications. Users will already be expecting to be pulled into a highly visual environment, and strong effective animation can really reinforce that experience. Though media experience or not, natural, performant animation plays an important part of the Windows 8 design philosophy in general, and something that’s often unfortunately overlooked during the design and development phases of applications.
1: Make it pretty. 2: Make it feel alive.
Take a look at a couple of the design principles for modern Windows 8 applications:
- Delight your users with motion
- Smoothly connect to what comes before and after.
Animation should always be a key part of Windows 8 design. And if you’re investing in the platform, it comes as no small basic necessity to make sure that your application is at fully at home on it.
Even simple animation, applied consistently throughout an application, can make it more visually appealing. You should always try to aim for objects on your UI never just “appearing” on screen – they should always arrive from somewhere. [beware, the video takes a moment to steady]
Fortunately, Microsoft has made it very easy to get started by adding some simple but effective animations to any modern style Windows 8 application to give them that extra kick of life. And that’s thanks to the animation library (for HTML applications) or transition animations (for XAML applications), pre-set animations that match up to Windows 8’s own OS animations. It’s helpful to read through the list of default animations and try to visualise where you might use these animation whilst designing your applications (and of course, coding them!). It’s far easier than you might expect to implement them well, and end result can make an application look and feel like it belongs on the users machine.
You can also take it a step further and create custom animations using the easy-to-use Blend for Visual Studio (here’s a good guide for getting started animating in XAML), or coding them by hand. Just remember, they are there to complement your design, not to overpower it.