Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
193 lines (91 sloc) 7.14 KB

Chapter 7: Animating Interfaces

This chapter isn’t worth reading just now (unless you want to get a feel for how I research and write). I hope to have it finished in August.

As I’ve noted in the overview, this is a work in progress and I’m sharing it here in draft form. The book isn’t finished, but I hope the draft content I’m providing has some value as I finalise the chapters.

/*

There is a tonne of content for this chapter in my Simplenote scratch file. Port it all over and organise it.

I've used the words 'element-level' and 'component-level' here and I'll need to change them give XD's May release.

The following should be in the overview.

Animation – especially when applied to interfaces – has rapidly become a core skill that designers need to develop. Why animation now?

Because the tools we use shape what we can build. Just a few years ago computers lacked the processing power to handle complex animations. Now computers are so powerful, animation has become expected.

Similarly, as connection speeds have improved, so too has the ability to deliver rich, animated experiences.

*/

Table of Contents

Summary

In this chapter I'll introduce principles of animation and how they apply to the design of user interfaces. I’ll show lots of examples and provide you with everything you need to know to create delightful interactions, which are increasingly expected in a digital context.

In short: I'll explain the benefits of learning about animation and building it in as a core part of your user interface skillset.

Overview

Stress the important role that animation plays in delight. Also stress that we – as UI designers – aren't creating static pages, we're creating rich, interactive pages and animation helps with this.

Section 1: Animation Communicates Intent

Placeholder Image

CAPTION: Caption here.

Part 1 goes here…

UI Animation and Microinteractions

The above feels like it needs to be in the first section, contextualising everything. Think of a better part five, because this doesn't feel right as is.

Section 2: Analysis of an Interaction (Trigger, etc.)

Placeholder Image

CAPTION: Caption here.

Part 2 goes here…

Section 3: Lessons From Disney

Placeholder Image

CAPTION: Caption here.

This is about learning from Disney, etc.. Mapping over lessons.

Easing in and out, squash and stretch, etc..

Section 4: Macro-Interactions (Page-Level)

Placeholder Image

CAPTION: Caption here.

I have lots of examples of this.

When talking about the page-level, talk about page-to-page and states within pages. Both offer an opportunity to use well-considered animation to enhance the user's experience.

There are numerous animations we can use…

Transitions, page-to-page…

We might also scroll between parts of a page, for example, on a long page with content that's organised into sections. Without getting lost in detail, talk about smoothscroll.

IMG: Different interactions between pages (page-to-page) and within pages (section-to-section).

Section 5: Micro-Interactions (Element– and Component-Level)

Placeholder Image

CAPTION: Caption here.

In addition to page-level interactions, we can also design interactions at the element-level. For example, when a user interacts with a button on a web page, we might use animations for the button's different states:

  • Inactive
  • On Hover
  • On Click…

All of this communicates to the user, providing valuable feedback.

Build this out…

Micro-Interactions: Why, When and How to Use Them to Improve the User Experience

The above is useful…

Further Reading

There are many great publications, offline and online, that will help further underpin your understanding of designing user interfaces for a desktop context. I’ve included a few below to start you on your journey.

  • Val Head's book and her web-based resources should be included here. Also point people towards her newsletter.

  • I'd strongly recommend setting aside an hour and watching Designing Fluid Interfaces. It's an absolutely fantastic video that explores the challenge of designing fluid gestural interfaces. from WWDC, 2018 by Chan Karunamuni, Nathan de Vries and Marcos Alonso from Apple's Human Interface Design Team. /* A little more on this here. */

  • Donovan's CSS Animation? It doesn't feel right to me as it's very CSS-focused and I think this chapter needs to deal with principles, first and foremost.

About the Author

Christopher Murphy

Christopher Murphy

@fehler

A designer, writer and speaker based in Belfast, Christopher mentors purpose-driven businesses, helping them to launch and thrive. He encourages small businesses to think big and he enables big businesses to think small.

As a design strategist he has worked with companies, large and small, to help drive innovation, drawing on his 25+ years of experience working with clients including: Adobe, EA and the BBC.

The author of numerous books, he is currently hard at work on his eighth, ‘Designing Delightful Experiences’, for Smashing Magazine and ninth, ‘Building Beautiful UIs’, for Adobe. Both are accompanied by a wealth of digital resources, and are drawn from Christopher’s 15+ years of experience as a design educator.


I hope you find this resource useful. I’m also currently working on a book for the fine folks at Smashing Magazine – ‘Designing Delightful Experiences’ – which focuses on the user experience design process from start to finish. It will be published in late 2019.

You might like to follow me on Twitter for updates on this book and other projects I’m working on.

Copyright · Mr Murphy + Adobe
Design and Build · Dan Gold + Little Thunder

You can’t perform that action at this time.