A Field Guide to Motion

Abstract design gradient artwork

A design system is a set of decisions you no longer have to argue about. Consistency is kind, but clarity wins when the two disagree. We removed three options and support tickets dropped by a third.

Details

Motion should explain a change, not decorate it. An error message should blame the system, not the person. Type scale decisions ripple into every component downstream.

Type scale decisions ripple into every component downstream. Users scan, so headings carry more weight than paragraphs.

A small example

Good defaults are the design most users will ever see. The prototype answered in a day what the meeting could not in a month. Contrast is not a style choice; it is whether people can read the page.

  • Start from content, not components
  • Test with real data
  • Prefer one clear action per screen
  • Design the empty and error states

Whitespace is not empty; it is doing the grouping for you. An error message should blame the system, not the person.

What didn’t

Motion should explain a change, not decorate it. We tested with five people and found the same problem four times. An error message should blame the system, not the person. Dark mode is a second palette, not an inverted first one.

Contrast is not a style choice; it is whether people can read the page. Consistency is kind, but clarity wins when the two disagree.

We tested with five people and found the same problem four times. An error message should blame the system, not the person.

Comments

4 responses to “A Field Guide to Motion”

  1. Isabel M. Avatar
    Isabel M.

    Bookmarked. Looking forward to the follow-up post.

  2. Chen W. Avatar
    Chen W.

    The photos and examples make this so much clearer.

  3. Liam O. Avatar
    Liam O.

    Shared this with my team, it sparked a good discussion.

  4. Shared this with my team, it sparked a good discussion.

Leave a Reply

Your email address will not be published. Required fields are marked *