# Frontend Design Philosophy

Good interface work begins with a defensible point of view. A screen should
feel specific to its audience, task, brand, and constraints—not like a neutral
assembly of familiar components.

## Establish the direction

Before choosing visual treatments, write down four things:

1. **Job:** the decision or action the interface helps someone complete.
2. **Audience:** their context, expectations, vocabulary, and access needs.
3. **Character:** three concrete adjectives that can be tested in the output.
4. **Signature:** one memorable compositional, typographic, or interaction idea.

The signature is not decoration. It should reinforce the job or character. A
publishing tool might use an editorial rhythm; an operations console might use
compact, exceptionally legible information density. If the idea competes with
the primary task, remove it.

## Build a coherent visual system

- Choose type for voice and reading conditions, then define a small hierarchy.
- Give color explicit roles: background, surface, text, border, action, status.
- Use spacing and alignment to expose relationships before adding containers.
- Select one icon grammar and one approach to radius, border, and shadow.
- Treat imagery, texture, and illustration as part of the same art direction.
- Make responsive behavior preserve hierarchy rather than merely shrink it.

Distinctiveness comes from the relationships between these choices. Novelty in
every element produces noise; a clear system with one strong departure is more
recognizable and easier to maintain.

## Make interaction support meaning

Motion should explain causality, continuity, or state change. Concentrate it at
moments where orientation matters: entry, expansion, reordering, confirmation,
and recovery. Define reduced-motion behavior alongside the default behavior.

Every interactive surface needs complete states: default, hover where relevant,
focus, pressed, disabled, loading, empty, success, and error. Keyboard and touch
paths must receive the same information and outcomes as pointer input.

## Match craft to the concept

Expression and implementation effort should rise together. Dense or expressive
directions need disciplined layering, performance budgets, and fallbacks.
Restrained directions depend on exact typography, rhythm, alignment, and state
feedback; minimal styling is not permission for unfinished details.

## Review questions

- Can a reviewer explain why this direction fits the product and audience?
- Is the primary action obvious without relying on decoration or motion?
- Do type, color, spacing, imagery, and interaction tell the same story?
- Is there one identifiable signature rather than many unrelated effects?
- Does the interface remain usable with keyboard, zoom, reduced motion, slow
  networks, long translations, and narrow viewports?
- Are implementation complexity and performance proportional to user value?

If the answers depend on taste alone, return to the job, audience, and evidence.