<✦>aicodedesign.Start building

LESSON 02 OF 03 · WRITTEN GUIDE

Give your interface a visual direction

A direction is a set of choices, not a collection of adjectives. “Modern and clean” leaves almost everything undecided. Specify hierarchy, type, spacing, color roles, and how the page should respond to a smaller screen. References are useful when you explain the particular quality you want to learn from them.

Make it practical

Choose a single type family, a base body size, one accent color, and a spacing scale. Sketch the order of content on mobile. Annotate one reference with three principles you admire; do not copy its brand, assets, or composition.

TRY THIS PROMPT

Using my brief, propose two distinct visual directions. For each, describe typography, spacing, color roles, and content hierarchy. Explain how the primary action stays clear on mobile. Do not add features.

Check your work

Does the most important action stand out? Are text sizes and contrast readable? Can you explain why each design choice fits the audience?

Keep the human in the loop.

Use the output as a draft. Compare it with the brief, inspect the work, and keep the decisions you can explain.

Next lesson