# Skeleton Screen (スケルトン・スクリーン)

> A loading treatment that drops the spinner and shows a blank version of the page instead, then fills information into it as the data arrives. Luke Wroblewski named the technique in 2013, writing about his own app Polar, where a spinner had made testers report that the app felt slower than the previous version. The aim is to show advance toward the goal rather than the act of waiting.

- IndexStyle No.539 — https://indexstyle.org/styles/skeleton-screen
- Kind: Technique · Family: UI Expression · Era: 2013–
- Mood: Technique, Trust, Calm
- What this family collects: Every entry answers one question, namely how physical a button or a surface on a screen ought to look, and the answers keep swinging between adding material and stripping it off.

## Defining characteristics

- No spinner and no progress bar while the screen loads
- Blank fields already standing where text and images will land, at the size they will occupy
- A layout committed before the data arrives, so nothing shifts when it does
- Regions filling in one after another instead of the whole screen appearing at once

## Best used for

- Replacing the spinner on the first load of a list or timeline to raise perceived speed
- Fixing a screen where elements jump as data lands, by committing position and size in advance

## Composition recipe

- Typography & lettering: Set no type at all. Where headings and body will go, lay blank fields matched to the real line height and measure.
- Layout & structure: Reuse the finished screen's skeleton. Commit every position and dimension first so nothing moves once the content lands.
- Material & texture: Use neutral fields one step away from the background. Match corner radius and size to the real elements and add no further colour.

## Colour

Read off the reference works below, so a direction rather than a fixed palette.

- Ground: #FFFFFF
- The colour it is remembered by: #F2F4F6
- Text and outlines: #E4E6EA

## What to avoid

If the blank fields do not match the real content's dimensions, everything shifts the moment data lands, which reads worse than the spinner it replaced.

## Application checklist

Work through this before calling a piece an application of this style.

- [ ] Visible in the piece: No spinner and no progress bar while the screen loads
- [ ] Visible in the piece: Blank fields already standing where text and images will land, at the size they will occupy
- [ ] Visible in the piece: A layout committed before the data arrives, so nothing shifts when it does
- [ ] Visible in the piece: Regions filling in one after another instead of the whole screen appearing at once
- [ ] The layout follows: Reuse the finished screen's skeleton. Commit every position and dimension first so nothing moves once the content lands.
- [ ] The lettering follows: Set no type at all. Where headings and body will go, lay blank fields matched to the real line height and measure.
- [ ] The material and surface follow: Use neutral fields one step away from the background. Match corner radius and size to the real elements and add no further colour.
- [ ] The colour relation holds: #FFFFFF as ground, #F2F4F6 carrying the style, #E4E6EA for text and outlines
- [ ] At least one reference work below has been studied directly
- [ ] The caution above ("What to avoid") has been addressed

## Related styles

- **Material Design (マテリアルデザイン)** — A design system that reduces the physical metaphor of paper and ink to rules of shadow and overlap. Elements are given elevation, shadow states the hierarchy, and motion carries physical cause and effect. It became the model for UI design being distributed as a system. The 2021 revision added colour derived from the device wallpaper, so the palette differs from one user to the next. → https://indexstyle.org/styles/material-design
- **Flat Design / Vector Minimalism (フラットデザイン / ベクターミニマリズム)** — Reduces information to plain planes and color, portable across screens and media. → https://indexstyle.org/styles/flat-design

## Compose it with something else

The dictionary can put this entry in a structural role and another in an accent role, and report where the two fight: https://indexstyle.org/compose?ids=skeleton-screen+material-design

## Further study

- why the 2013 article attacked the spinner, and how it defines progress
- what change in user reaction it reports for Polar
- cases where the dimensions of the blank blocks do not match the actual content

## Reference works

- LukeW (Luke Wroblewski) — Mobile Design Details: Avoid The Spinner — https://www.lukew.com/ff/entry.asp?1797

## Source of record

- LukeW (Luke Wroblewski) — Mobile Design Details: Avoid The Spinner — https://www.lukew.com/ff/entry.asp?1797

## Machine surfaces

- JSON: https://indexstyle.org/api/styles/skeleton-screen
- Image-generation prompt (legally clean): https://indexstyle.org/styles/skeleton-screen/prompt.txt
- MCP: https://indexstyle.org/mcp (tools: search_styles, get_style, compare_styles, compose_styles, find_related_styles; prompts: image-prompt, apply-style)