HIVE80lab — Ops notes

Greyscale Mockup Workflow: Present App Designs Before Color Muddies the Conversation

Show a client a polished, full-color screen and the feedback will be about the blue. Show the same layout in greyscale and the feedback will be about the layout. That single shift is why experienced designers present greyscale mockups early in the process: it moves the conversation to structure, hierarchy, and content — the things that are expensive to change later — before anyone falls in love with a color that may not survive contact with real content.

The workflow, stage by stage

Stage 1 — Content inventory. Before any frames, list what each screen must contain: every text block, image, button, and status state. Greyscale design punishes vague content, which is exactly why it works — you can't fake your way past an empty slot.

Stage 2 — Block layout. Place content into greyscale blocks on real screen dimensions. No styling beyond boxes, lines, and text. The only decisions at this stage are position and grouping.

Stage 3 — Greyscale hierarchy pass. Now use shades, not colors: near-black for primary actions, mid-grey for secondary, light grey for supporting text, whitespace for separation. If a user can't tell what the most important element on the screen is with zero color, color won't fix it.

Stage 4 — Flow check. Link the screens into the actual user path and walk it: entry, decision, action, confirmation. Missing states — empty, error, loading — surface here, when they're cheap to add.

Stage 5 — Review. Present the greyscale flow to stakeholders with one framing sentence: "We're reviewing structure today; visual design comes next." This manages expectations and keeps feedback on target. Ask what to remove before what to add.

Stage 6 — Color and visual pass. Only after sign-off on structure, apply brand color, typography detail, and imagery. Because the layout is settled, this pass is fast — and revision rounds shrink because feedback is no longer re-litigating layout and color simultaneously.

Where a mockup kit fits

Most of the greyscale stages are generic; the frames, device outlines, and screen sizes are not. Building them from scratch each project is wasted hours. A greyscale mockup kit gives you ready-made frames on standard device and screen dimensions so Stage 2 starts from a template instead of a blank artboard, and every project presents consistently.

Two practical rules

Never skip Stage 1. Greyscale mockups with placeholder lorem-ipsum everywhere produce fake progress — real content changes real layouts.

Keep greyscale versions archived. When a client later asks why an element moved or a screen got cut, the greyscale history shows what was approved and when. It's the cheapest project insurance there is.

The kit, and the ops around it