How layout, navigation, and hierarchy guide what users notice and do.

five-planes-of-ux-skeleton.png

<aside> <img src="/icons/book_yellow.svg" alt="/icons/book_yellow.svg" width="40px" />

Read The Five Planes of UX Series

Introduction to the five planes of UX — How to align your team from strategy to interface without the chaos.

  1. The strategy plane: start with the right problem — What good UX starts with and what teams skip when they’re in a rush.
  2. The scope plane: define what you’re building — How clear boundaries turn strategy into a plan your team can actually deliver
  3. The structure plane: organize the experience — How structure helps users move through your product without getting lost.
  4. The skeleton plane: shape the experience — How layout, navigation, and hierarchy guide what users notice and do.
  5. The surface plane: make it clear and trustworthy — How visual design earns trust and supports usability. </aside>

You’ve mapped the structure. You know how users move through the product. Now it’s time to make that movement visible.

The skeleton plane focuses on three things:

  1. Layout
  2. Navigation
  3. Information hierarchy

This is where product designers spend a lot of time sketching low-fidelity ideas, building prototypes, and testing layout ideas. But without the layers below it, the work often misses the mark.

The skeleton plane is where structure becomes concrete. — Jesse James Garrett

I’ve seen teams jump straight into low-fidelity sketches without a clear strategy, scope, or structure. The result? Beautiful mockups that solve the wrong problem. The skeleton plane doesn’t work in isolation. It brings the lower planes to life and prepares the upper one for visual design.

When you get this layer right, users don’t think about it. They just move through the experience. When you get it wrong, they get lost, distracted, or stuck.

In this article, we’ll walk through what the skeleton plane is, how to work in it, and how it helps teams create more usable, focused experiences.

What the skeleton plane is

The skeleton plane takes the structure you’ve already mapped — and gives it form on the screen.

This is where interaction starts to feel real. Users can now see where to click, how to move, and what to focus on. But you’re still not designing the final visuals. That comes later. Right now, your job is to create a blueprint that supports clarity, flow, and usability.

Jesse James Garrett breaks this plane into three components: