interface-design

Interface design

Build a functional interface whose visual system, information architecture, states, and motion follow from the product's job. Preserve an effective existing system; do not replace it with a personal preset.

Establish the design problem

Recover available context before asking questions:

• product, audience, primary task, and success condition;
• route or component scope and implementation stack;
• existing design tokens, components, assets, typography, and brand rules;
• content shape, density, hierarchy, and likely extremes;
• supported viewports, input methods, themes, and accessibility requirements;
• required states, data dependencies, and destructive or irreversible actions.

Ask only for unresolved choices that materially change the result. When the user has not chosen a visual direction, propose one or more reasoned directions from the product evidence and proceed with the most defensible option unless the choice is consequential or costly to reverse.

Choose the working mode

• Extend — reuse and improve an established system.
• Redesign — preserve product semantics while changing structure or visual language.
• Greenfield — create a small system from content and task requirements.
• Explore — present distinct directions or a design specification before implementation when the brief is intentionally open.

Do not erase existing brand decisions merely because common defaults are present. Do not preserve them merely because they exist; evaluate whether they support the task.

Model the interface job

Adapt the composition to the surface:

• Marketing — make proposition, product evidence, proof, and next action easy to evaluate.
• Dashboard — prioritize current state, frequent tasks, comparison, scanning, and useful density.
• Form or workflow — clarify sequence, requirements, validation, recovery, and completion.
• Settings — expose state and consequence; separate routine changes from dangerous actions.
• Data table or analysis — support sorting, filtering, comparison, selection, empty results, and overflow.
• Documentation — support orientation, navigation, readable examples, and long-form rhythm.
• Consumer experience — fit touch, attention, trust, and emotional tone to the actual context.