Stackling

Design

See what makes a screen work and feel designed: hierarchy, type, colour, states, motion and the art behind them.

5 tracks · 162 lessons

Start this pathSee all paths

What you'll be able to do

  • See where the eye goes, and fix hierarchy, grouping and spacing.
  • Choose type and colour that read well and hold together.
  • Design every state, tappable thing and motion so a screen feels finished.

  1. Seeing

    Where the eye goes: hierarchy, grouping, spacing, alignment and depth.

    33 lessons

    1. Where the eye goes5 lessons
    2. Quieter, not louder5 lessons
    3. What belongs together5 lessons
    4. Spacing that adds up5 lessons
    5. Lines you don't draw5 lessons
    6. Depth without clutter4 lessons
    7. Breakdown: a crowded screen4 lessons

  2. Type and Colour

    Readable type, a scale that holds together, and colour that works in context.

    34 lessons

    1. Type you can read4 lessons
    2. Choosing and pairing4 lessons
    3. A type scale4 lessons
    4. Lines and letters4 lessons
    5. Colour is relative4 lessons
    6. Building a palette4 lessons
    7. Contrast and meaning4 lessons
    8. Icons and images3 lessons
    9. Breakdown: hard to read3 lessons

  3. States and Content

    Empty, loading and error states, forms, and words that hold up with real content.

    32 lessons

    1. Every screen has states4 lessons
    2. Empty is a chance3 lessons
    3. Waiting well4 lessons
    4. When it breaks4 lessons
    5. Forms4 lessons
    6. Words are interface4 lessons
    7. Real content4 lessons
    8. Undo over "are you sure"2 lessons
    9. Breakdown: every state3 lessons

  4. Interaction and Motion

    What looks tappable, what responds, and motion that explains instead of decorates.

    29 lessons

    1. What looks tappable4 lessons
    2. Rules of thumb that hold5 lessons
    3. Fingers, keys and focus4 lessons
    4. Why things move3 lessons
    5. Easing and springs4 lessons
    6. Moving gently2 lessons
    7. Delight with restraint4 lessons
    8. Breakdown: a checkout3 lessons

  5. Systems and Product

    Make a whole product hang together: tokens, platforms, navigation, honesty and AI features.

    34 lessons

    1. Consistency3 lessons
    2. Tokens and components4 lessons
    3. Platforms4 lessons
    4. Finding your way4 lessons
    5. First minutes3 lessons
    6. Accessible by default4 lessons
    7. Honest design3 lessons
    8. Designing AI features4 lessons
    9. Personality and research2 lessons
    10. Breakdown: a small app3 lessons

Five minutes today is a first step.

Start this path