Design a clear interface
Turn a visual reference into a usable, consistent product.
Reviewed 6 October 2026 · 2 min read
Before you start
Start with the audience and main action. A beautiful screen that makes the task harder is not finished.
Provide a reference and explain what to borrow: hierarchy, density, color or interaction. Specify which existing behavior must remain.
Step by step
- List screens and states: empty, loading, normal, error, success and permission denied.
- Choose a small set of type sizes, spacing values, colors and reusable controls.
- Build one representative screen with real content lengths before expanding.
- Test keyboard navigation, visible focus, labels, contrast, large text and narrow layouts.
- Compare screenshots and refine specific differences. Keep useful platform conventions.
Try this
Design a compact notes app with a quiet warm theme, a clear list and one obvious Add note action. Include empty, loading and error states. Support 360px width and keyboard use. Show long titles and at least 20 notes.
Check the result
- No clipped controls or unwanted horizontal scrolling.
- Primary and destructive actions are distinct.
- Inputs have labels; errors explain recovery.
- Repeated panels use consistent spacing and control sizes.
If something goes wrong
If the UI feels oversized, inspect container widths, padding and typography instead of shrinking everything uniformly.
Native menus can differ by OS. A browser preview does not reproduce every system control.