UI Design Principles
Definition
Design guidance aimed at developers rather than designers, from Refactoring UI (Wathan & Schoger). Its bias: constrain choices in advance and design in small increments, because unconstrained taste is where non-designers get stuck.
Core Ideas
Start from a feature, not a layout
- Design a feature; the layout emerges from it.
- Details come later.
- You will need more colors than you expect.
Don’t design too much
- Work in a cycle: design ⇄ dev. Not design-then-dev.
- Be a pessimist: don’t imply functionality in a design you aren’t ready to build.
Choose a personality
The vocabulary that carries tone:
- Font
- Color — blue is safe, pink is fun, gold is luxury
- Border radius — small reads sound and solid, larger reads playful, none reads serious
- Language — copy is part of the visual personality
Limit your choices, then systematize everything
Define the system in advance and design by process of elimination rather than by open-ended judgment.
Values to fix as a scale up front: font size, font weight, line height, color, margin, padding, width, height, box shadow, border radius, border width, opacity.
Hierarchy is everything
- Not all elements are equal — the layout must say which ones matter.
- Size is not the only lever. Two font weights are usually enough.
- You may not need labels. Often the label can be folded into the value itself.
Relationships
- Web Rendering and Performance Patterns — perceived quality is design plus load behavior
- Game Design — visual hierarchy is the interface version of level-design Guidance
- Software Engineering Practices
- SaaS — a fixed design system is what lets a small team ship consistent product surface
- Designing to a Latency Budget — Suica’s 13.5-degree reader tilt: affordance succeeding where instruction text failed
References
- Read Refactoring UI