Start from what the screen is about; each kind of screen has one layout that fits it best.
| The screen is about… | Use |
|---|---|
| A list of records people search, filter and act on | Page anatomy with a table |
| Reviewing records one after another | Master and detail |
| An area of a product with several screens | Hub |
| Fast, repeated entry | Keyboard-first work |
| Preferences | Settings |
| A hierarchy of nested records | Hierarchies |
| Adding or editing one record | Editing records |
Best practices
- Pick the layout before designing any detail. Mixing two layouts on one screen usually means it should be two screens.
- Reuse a layout people already know from elsewhere in the product, even when a custom one looks slightly better on its own.