Insights — No. 12Insights — No. 12 · Process

how we drew 36 screens
before day five.

Berkay Erdinc1 min · 1 min read

Every week starts the same way: nothing gets drawn until the system exists.

Colour, type and spacing become tokens on day one, and the app shell is built once.

Day 1

The system first.

Tokens for colour, type and layout, then the shell — set before the first screen.

Plate IIThe system on day one.

Day 2–4

Every screen, both sizes.

Thirty-six screens in three days, none of them rushed.

36

screens

146

states

3

days

“nothing drawn twice” is the whole method.

Day 5–7

States, notes, files.

Day five is states and motion. Day six, your notes and our fixes. Day seven, the files are yours.

Every week starts the same way: nothing gets drawn until the system exists.

Colour, type and spacing become tokens on day one, and the app shell — navigation, tables, charts — is built once. From then on a screen is an arrangement, not an invention.

Day 1

The system first.

Tokens for colour, type and layout, then the shell. A hundred and ninety-three variables in all — set before the first screen.

Plate IIThe system on day one: tokens, type, shell.

Day 2–4

Every screen, both sizes.

When the system is right, thirty-six screens fit in three days without one of them looking rushed.

36

screens

146

states

3

days

“nothing drawn twice” is the whole method.

Day 5–7

States, notes, files.

Day five is for states and motion — every tooltip, empty table, error and confirm. Day six is your notes and our fixes. Day seven, the files are yours.

your week could be next.

Pick your week