Module 5 · Designing for a real client Lesson 14 of 15

Working with a developer

The concept

Design the empty, loading and error states and the developer will not invent them badly; leaving them out guarantees somebody guesses.

Use the same names for colours and spacing as the code (--brand, --s3). Shared names turn a design change into a small edit instead of a hunt.

CSSCopyTry it

/* Hand off with the same names the code will use */
:root { --brand: #2563eb; --s3: 24px; --radius: 14px; }

.card            { padding: var(--s3); border-radius: var(--radius); }
.card:hover      { border-color: var(--brand); }
.card.is-loading { opacity: .6; }
.card.is-empty   { border: 1px dashed #d1d5db; text-align: center; }

Worked example

Redlines with the spacing scale, the hover and error states, and what happens with no data save three rounds of "what should this do?".

Your practice task

Prepare a hand-off for one screen: states, spacing tokens, and the empty and error cases.

Do this before moving on. Reading a solution teaches the shape of it; typing it teaches you.

Key takeaway

Design the empty, loading and error states and the developer will not invent them badly; leaving them out guarantees somebody guesses.

Almost there

15 lessons left of 15

Finish every lesson to unlock the certificate. Each one ends in a practice task — do them and the final project brief writes itself.