Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Introduction to Design Systems

Well done!

You have completed Introduction to Design Systems!

Sign up for Treehouse Back to Library

Motion

3:05 with Anwar Montasir

Motion isn’t just something UX designers include superficially to add delight to a product. Applied thoughtfully, motion enhances usability.

Further reading

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Motion isn't just something UX designers include superficially 0:00
    to add delight to a product. 0:05
    Applied thoughtfully, motion enhances usability. 0:07
    Audi's design system includes a section called Functional Animation. 0:12
    And that's a useful way to describe the role of motion 0:17
    in guiding users through an application. 0:20
    Audi suggests using motion to provide feedback. 0:24
    Users receive confirmation. 0:29
    Yes, that tap or click really happened. 0:31
    Yes, something's loading. 0:34
    Highlight. This is an important feature. 0:38
    Pay attention. 0:41
    Meaning. How is this interface used? 0:43
    What interactions are possible here? 0:47
    Position. Where did this content come from? 0:52
    Will a vertical swipe reveal more? 0:56
    In addition to determining the role of motion in an application's storytelling 1:00
    process. 1:04
    A design system provides guidance on how animation should behave 1:06
    to suit brand personality. 1:11
    Does your app speak with a loud, colorful voice, 1:13
    with animations slapping you in the face, demanding your attention? 1:17
    Or does it speak modestly, 1:21
    with animations providing gentle usability cues and nothing more? 1:23
    Adobe Spectrum begins with three motion principles, 1:29
    purposeful, intuitive, seamless. 1:33
    If the animation calls attention to itself, it's too much. 1:37
    By intuitive, Adobe means the animation should behave like 1:41
    a real-world object subject to forces like gravity. 1:45
    As falling objects near the Earth, they accelerate. 1:50
    Animators call this effect Easing In. 1:54
    A ball bouncing up from a surface will decelerate 1:58
    until it eventually starts falling again. 2:02
    Animators term this a deceleration Easing Out. 2:04
    Adobe demonstrates these effects and provides code for implementation. 2:08
    Here's a list of suggested motion durations which depend on the distance and 2:16
    complexity of each animation. 2:21
    Finally, here are samples of different types of animation I can choose from. 2:24
    As new content enters the page, I could fade it in, or 2:29
    slide the content into place, or combine both into a slide fade. 2:34
    So those are the rules governing the basic elements of style 2:42
    you'll likely find in the design system. 2:46
    Together, these rules form of visual design language. 2:49
    In our next stage, we'll take a look at how these elements combine together, 2:54
    piece by piece, like Legos, to form a library of user interface elements. 2:59

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up