Cover image for Designing Interface Animation

Designing Interface Animation

Author Val Head
Release Date: 2016/07/01
ISBN: 9781457190889
Topic:
0%
29
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Effective interface animation deftly combines form and function to improve feedback, aid in orientation, direct attention, show causality, and express your brand’s personality. Designing Interface Animation shows you how to create web animation that balances purpose and style while blending seamlessly into the user’s experience. This book is a crash course in motion design theory and practice for web designers, UX professionals, and front-end developers alike.

Table of Contents

  1. Cover Page
  2. Title Page
  3. Copyright Page
  4. Contents
  5. How to Use This Book
  6. Frequently Asked Questions
  7. Foreword
  8. Introduction
  9. Part I: The Case for Animation
    1. Chapter 1: Why You Can’t Ignore Animation
      1. Animation Has Brain Benefits
      2. Animation Communicates
      3. Animation Connects Contexts
      4. UI Choreography
      5. Animation Grabs Attention
      6. Staying on Point
    2. Chapter 2: You Already Know More About Animation Than You Think
      1. Not Just for Cartoons
      2. Timing (and Spacing) Really Are Everything
      3. Follow-Through and Overlapping Action
      4. Anticipation
      5. Secondary Action
      6. Arcs
      7. Squash and Stretch
      8. Slow In and Slow Out
      9. Exaggeration
      10. Solid Drawing
      11. Straight Ahead and Pose to Pose
      12. Appeal
      13. Staging
      14. Developing an Eye for Animation
      15. Staying on Point
    3. Chapter 3: Modern Principles of Interactive Animation
      1. Have a Known Purpose
      2. Don’t Create Obstacles
      3. Avoid Animation That Becomes an Obstacle
      4. Keep Animations Flexible
      5. Be Quick, Be Readable: Timing
      6. Performance Matters
      7. Staying on Point
  10. Part II: Using Animation to Solve Design Problems
    1. Chapter 4: Using Animation to Orient and Give Context
      1. Create a Mental Model of What’s Out of View
      2. Orient Interface Layers with Animation
      3. Orient the User to Off-Screen Objects with Animation
      4. Guide Tasks
      5. Inform Context Changes
      6. Animate Context Changes in Content
      7. Animate Context Changes in Interactions
      8. Staying on Point
    2. Chapter 5: Using Animation to Direct Focus and Attention
      1. Direct Attention to the Most Important Content
      2. Direct the Eye with Motion
      3. Think Eye Flow
      4. Hold Attention with Visual Continuity
      5. Attract Attention with Contrast in Animation
      6. Staying on Point
    3. Chapter 6: Using Animation to Show Cause and Effect
      1. Guide Tasks by Hinting at Affordances
      2. Cue by Exposing Additional Actions
      3. Cue the Onboarding Process with Animation
      4. Preview the Effect of an Action
      5. Handle Errors with Cause-and-Effect Animations
      6. Confirm an Action’s Effect
      7. Staying on Point
    4. Chapter 7: Using Animation for Feedback
      1. Animate Effective Error Messages
      2. Visually Confirm Tasks Without Losing Your Place
      3. Loader Animations That Convey Progress
      4. Contextually Fit Loader Animations, Not Generic Spinners
      5. Make Waiting Go by Faster
      6. Staying on Point
    5. Chapter 8: Using Animation to Demonstrate
      1. Demonstrate Functionality
      2. Demonstrate with Animations in the Onboarding Process
      3. Show Personality and Purpose
      4. Animate Conceptual Illustrations
      5. Staying on Point
    6. Chapter 9: Using Animation to Express Your Brand
      1. How Your Brand Moves Tells Its Story
      2. Defining Your Brand in Motion from the Bottom Up
      3. The Motion Audit
      4. Evaluate Your Existing Animation’s Design
      5. Evaluate Your Existing Animation’s Purpose
      6. Define Your Brand in Motion from the Top Down
      7. The Words You Use to Describe Your Brand
      8. Referencing Motion from Real Life
      9. Staying on Point
  11. Part III: ANIMATION IN YOUR WORK AND PROCESS
    1. Chapter 10: Where Animation Fits in Your Design Process
      1. Starting the Animation Discussion Early in Your Process
      2. Identifying Where Animation Could Be Most Helpful
      3. Sketching and Storyboarding Animation Ideas
      4. The Purpose of Storyboards
      5. When to Use Storyboards
      6. Do You Have to Use Storyboards for Interface Animation?
      7. Create Animation Prototypes
      8. When to Use Animation Prototypes
      9. Animation in Your Style Guide
      10. Why Document Animation?
      11. Always Communicate
      12. Staying on Point
    2. Chapter 11: Prototyping Your Animation Ideas
      1. Low Fidelity: Sketches and Storyboards
      2. Medium to High Fidelity: Motion Comps
      3. High Fidelity: Interactive Prototypes
      4. Prototyping Web Animation in RWD
      5. How Many Prototypes Should You Make?
      6. Staying on Point
    3. Chapter 12: Animating Responsibly
      1. Your Brain on Animation
      2. Animation and Vestibular Disorders
      3. Animation, Epilepsy, and Migraines
      4. Animation and Motor Control
      5. Animation and Screen Readers
      6. The WCAG on Animation
      7. Progressive Enhancement and Animation
      8. Staying on Point
    4. Conclusion
    5. Index
    6. Acknowledgments
    7. About the Author
    8. Footnote
18.117.217.186