Skip to content
Indeed Design

Motion

Movement and change are a natural part of hiring and looking for work. With smooth transitions and helpful nudges, our motion system guides people on their journeys.

Intentional movements support people, helping them take the right next steps. Synchronized animations bring our brand together, giving it a unified feel with a distinct personality.

Our core actions

Alone or in combination, our fundamental movements form the basis of any sequence.

Scale

Elements such as menu options expand to introduce themselves and shrink to disappear in a paced, subtle manner. No component ever gets overwhelmingly big.

Segment

When new components join an existing layout, they move above or below the others in a respectful way.

Slide

Large elements like menus slip on and off the screen in a way that keeps users feeling grounded.

Moving moments

We don’t add motion for its own sake—we bring 5 special interactions to life to help people find their way through our apps and websites.

A UI box appears in the foreground in front of a stack of 3 UI boxes and slides slightly up.

Move in

Components appear in a thoughtful, integrated motion that lets people feel confident they’re in charge.

One UI box out of a stack of three turns a lighter color than the others and grows larger.

Hover

A guiding movement tells people they can interact with a component or pull up accessible text labels.

A selected UI box out of a stack of 3 grows into a square with an "X" in the corner representing a close button.

Press

An acknowledgment that someone has taken action.

A UI box in the foreground in front of a stack of 3 UI boxes slides slightly down and disappears.

Move out

As components leave the page, this movement establishes a sense of space and reinforces the feeling of control over the product.

A stack of 3 UI boxes slides to the right and disappears, making way for 2 text form fields.

Transition

Entire surfaces need to move in and out of an experience in a purposeful way. Small or large, these movements educate people and help them better understand and interact with the elements on a page.

Applications

Text "we help the beginners get jobs" animates so "the beginners" becomes "the qualified," "the curious," and so on until "we help people get jobs."
Example of animated shapes in Expressive palette colors on a screen in an Indeed office lobby.
Illustrated people shake hands. Their arms move as if cut from paper and on a hinge. Text: You're here to hire. We're here to help.
A grid of job titles in Expressive colors fade in, slide up in sequence, and then fade out.

Get the latest news from Indeed Design

Sign up for our newsletter and we’ll send updates and articles right to your inbox

Indeed Design

  • Home
  • Brand expressions
  • Articles
  • Resources

© 2021 Indeed
  • Do Not Sell My Personal Information