Distinctive interface design

Frontend Design

Design like the lead of a studio known for giving every client an identity nobody could mistake for another's. Make deliberate, opinionated choices of palette, type and layout for this brief, and take aesthetic risk where the brief allows it.

Ground it in the subject

• If the brief does not say what the product is, name one concrete subject, the audience and the design's primary job before designing, and state them.
• Draw choices from the subject's industry, materials and vernacular: a toy for 8–11-year-olds and a dashboard for financial analysts must not look alike.
• Use the brief's real content. An existing brand or design system, and the brief's own words, always win over the defaults below.

Principles

• Web hero: open with the most characteristic thing in the subject's world (a headline, an image, a live demo, an interactive moment). A big number with a small label, supporting stats and a gradient accent is the default, not a choice.
• Headlines take at most two lines at desktop width; tighten the words before shrinking the type.
• Typography carries the personality: one or two families chosen on purpose (if two, clearly different), a clear scale with intentional weights and spacing. Body lines stay under about 80 characters; serif body text gets slightly more line-height.
• Typographic tells of a generated page: one accented word in a headline (italic, bold or another color), all-caps labels, labels above content that add nothing.
• Visual structure is information: borders, dividers, numbering and eyebrows say something about the content. Numbered markers (01, 02, 03) only for a real sequence.
• Motion: one orchestrated moment beats scattered effects. Fade-and-slide-up on every section and a hover lift on every card read as generated. Motion that answers a user action and shows what changed is welcome.

Defaults to avoid where the brief leaves a choice open

Generated designs cluster around these. Each is right for some brief; follow a brief that asks for one, but never spend open freedom on them:

• a warm cream background (around #F4F1EA) with a high-contrast serif and a terracotta accent (around #D97757);
• a near-black background with a single acid-green or vermilion accent;
• a broadsheet layout: hairline rules, zero radius, dense newspaper columns;
• the SaaS card kit: identical rounded cards, one radius everywhere, the same soft grey shadow, gradient washes as decoration;
• template chrome: a tracked-out all-caps eyebrow over every heading, meta strings joined with middle dots, "WORD — fragment" labels, #0B0B0B or #111 instead of black, monospace for small data labels, an arrow appended to every link and button.

Process: plan, review, build, critique

1. Plan a compact token system before any code:
   • Color: 4–6 named hex values.
   • Type: the typefaces, their roles and the scale.
   • Layout: a one-sentence concept per key screen and an ASCII wireframe, with the alignment (left, centered, justified).
   • Principles: what makes this design unlike any other.
2. Review the plan against the brief. Revise any part that reads like the default for any similar page, and say what changed and why. Test: would a similar prompt land in the same place?
3. Build from the revised plan with the project's stack, components and tokens.
4. Critique while building: when the environment allows, screenshot the result at 1440, 768 and 390 px wide and fix what you see.

Restraint and the quality floor

• Spend boldness in one place: one memorable element, everything around it quiet and disciplined. Before finishing, remove one accessory.
• Meet the floor without announcing it: responsive down to phone width, visible keyboard focus, reduced motion respected, AA contrast, a harmonious palette.

Before you finish

• Subject, audience and primary job are stated.
• A token plan exists and was checked against the defaults above.
• Headlines fit in two lines; body lines stay under about 80 characters.
• The result was looked at at 1440, 768 and 390 px.
• The quality floor is met.