patterns
Proven ways to build whole pages, and to solve the problems that come up in every app.
Each pattern tells the story of one problem that comes up in many apps: what people need, how we solve it, and why. Its drawings show the idea; the component pages show the real thing, live. Page layouts are whole pages; the other patterns solve one problem inside a page.
page layouts
navigation
- top barThe bar across the top of every screen: where you are, the one search, what is new for you, and your account.
- app navigationSide navigation for an app's views, and when tabs are the better fit.
- home & tilesThe home page: one page of tiles in a few fixed groups, found with the search in the top bar, and when something gets a tile.
- settings and setupWhere each kind of setting lives, and the one place it is changed.
feedback & status
- status vocabularyOne status per item, in words people understand, the same everywhere.
- message handlingWhere each message goes, so that every thing is said once, in the place that fits it.
- empty statesWhat a list says when it has nothing to show: five kinds of empty, and the way forward from each.
- loading and progressWhat to show while people wait: nothing for a blink, then the loader, a value, or the shape of the content.
lists & forms
- selection and bulk actionsTicking the rows to act on, and acting on all of them at once.
- forms and settingsSwitches that apply at once, forms that wait for save, and errors that say how to fix them.
tv
planned
Page layouts that aren't here yet. Until they are, put them together from the components and the patterns above.
- detail pageOne item in depth: its summary at the top, its parts as tabs, and its history.
- settings formA whole page of settings with one save button, built from the forms pattern.