Skip to main content

Interface Design Manifesto

An interface is excellent when people can see what matters, understand what it means, and act without fighting the presentation. Great design is not more decoration. It is disciplined attention.

Twelve Commitments​

  1. Start with the job. Design the smallest useful feature or decision before designing the shell around it.
  2. Make hierarchy work without colour. Size, weight, position, and space must establish the reading path before accent colour arrives.
  3. Reduce before amplifying. When the primary object does not stand out, quiet its competitors before making it louder.
  4. Begin with breathing room. Start spacious and compress deliberately. Related things sit closer to each other than to the next idea.
  5. Use a system, not a bag of values. Type, spacing, colour roles, radius, depth, and motion use named scales with explicit exceptions.
  6. Treat type as the interface voice. Keep frequent text comfortably readable, prose measured, alignment intentional, and labels rare.
  7. Let colour explain a role. Colour identifies action, state, evidence, warning, or category. It never carries meaning alone or rescues weak hierarchy.
  8. Use depth to explain affordance. Borders mark boundaries; shadows mark elevation; overlap marks relationship. Decoration has no elevation level.
  9. Use real content early. Real copy, images, data, errors, and long values reveal layout truth that placeholders hide.
  10. Design the in-between states. Loading, empty, error, disabled, focus, active, success, and recovery are part of the product—not cleanup work.
  11. Make mobile a composition. Small screens change order, density, and interaction. They are not scaled desktop canvases.
  12. Prove it where it runs. Review the rendered interface with real viewports, keyboard, zoom, reduced motion, computed styles, full-page captures, and an unfamiliar reader.

The Three Root Questions​

When an interface feels wrong, ask:

  1. Hierarchy: is the wrong thing winning attention?
  2. Rhythm: are unrelated ideas cramped together or related ones drifting apart?
  3. Colour: is colour clarifying a role or compensating for missing structure?

Correct the first failing layer before polishing the next.

Pre-Ship Promise​

Before release, we can show:

  • one obvious page job and primary action;
  • a readable hierarchy that survives grayscale and narrow screens;
  • comfortable type, measured contrast, and deliberate spacing;
  • complete interaction and recovery states;
  • consistent tokens and components with documented exceptions; and
  • rendered evidence at mobile, tablet, and desktop widths.

Use the Great Interface Design Standard for the measurable five-gate checklist and review receipt.

Sources​

This manifesto synthesises Meng To's design workflow, DesignCode typography guidance, Adam Wathan and Steve Schoger's Refactoring UI, and WCAG 2.2. The original private checklist was concentrated rather than published verbatim: duplicated checks were merged, unsupported absolutes were removed, and accessibility floors remain floors rather than aesthetic targets.