From a blank canvas to a reviewed screen: find the pattern, compose components, apply the foundations, write, check.
Start from the task
Write down, in one sentence, the job the screen exists for. Everything on it should serve that sentence. Anything that doesn’t moves to a menu, an inspector or another screen.
Steps
- Find the pattern. Most screens are one of a few shapes: a page with a table, master and detail, a form in a sheet, a hub, a settings list or a keyboard-first workspace. Choosing a layout helps you pick.
- Compose it from components. Use the controls in Components before inventing new ones. A new control has to do a job no existing one can.
- Apply the foundations. Colour roles, text styles, spacing, radii, materials and motion come from Foundations and the design values (R16).
- Write the words. Titles, buttons, messages and empty states follow Writing.
- Check access. Keyboard, screen reader, contrast, text size and motion, as in Accessibility.
- Review. Go through the review checklist before the screen ships.
Sketch the anatomy first
Before any detail, place the four parts every working screen has, top to bottom:
- Title row: what the screen is, live context underneath, page actions at the trailing end, exactly one of them prominent (R4).
- Toolbar row: search first, then filters, then actions.
- Content: tables, lists, panels or panes on opaque surfaces.
- States: what the content area shows when it is empty, loading or failed (R17).
Design both appearances from the start
Check light and dark, the largest text size, a touch screen and a narrow window while you design, not at the end. A layout that only works at one size, in one appearance, isn’t finished.