starting-fresh

name	starting-fresh
description	Use when starting a new UI, page, screen, or feature from scratch — design real features before chrome, work in low fidelity, ship the smallest version, pick a deliberate personality, and design from constrained systems instead of an open palette.

Starting Fresh

When to use this skill

• A new product, page, screen, or feature is being designed from a blank canvas.
• The user is stuck on navigation, branding, or layout chrome before any real content exists.
• High-fidelity tweaking has begun before the structure is settled (typeface, color, shadows, icon picks).
• Someone asks "what should this look like?" before any concrete user task has been chosen.

Core stance

A UI is a collection of features. Design the smallest real feature first; the shell, navigation, and overall layout fall out of what those features need.

Principles

1. Feature first, shell last. Don't start with the nav bar, sidebar, or logo placement. Pick one concrete user task ("search for a flight", "add a comment", "view an invoice") and design that. You don't have enough information to decide layout questions until 2–3 features exist.

2. Stay low fidelity. Sharpie sketches, paper, or grayscale wireframes. Real type, real color, real shadows tempt you into detail work before structure is locked. Designing in grayscale forces hierarchy through size, weight, contrast, and spacing — the things that actually do the work.

3. Cycle, don't pre-design. Design the smallest useful slice → build it → return for the next slice. Edge cases ("what if there are 2000 items?", "where does the error go?") surface faster in a live UI than in your imagination.

4. Be a pessimist. Don't put functionality in mockups you're not committed to building. If "attachments" is a nice-to-have, leave it out of the comment box; a simple shipped feature beats an ambitious blocked one.

5. Pick a personality, then commit. Personality is the sum of small consistent choices:

• Typeface: serif → editorial/elegant. Rounded sans → friendly/playful. Neutral sans (Inter, Helvetica, system) → safe/plain.
• Color: blue is universally safe. Gold/dark green reads premium. Pink/coral/teal reads playful. Muted earthy reads handcrafted.
• Border radius: 0px serious, 4–6px neutral, 12px+ friendly. Mixing radii in one UI almost always looks worse than picking one.
• Voice: "Verify your identity" vs "Just need to make sure it's you" — copy is part of the visual personality.

To pick a direction, look at what your audience already uses and lean similar. Don't directly copy a competitor.

6. Design out of a constrained system, not an open palette. When any value is allowed, no value is right. Predefine sets:

• Spacing / sizing scale (e.g. 4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 192, 256, 384, 512)
• Font-size scale (e.g. 12, 14, 16, 18, 20, 24, 30, 36, 48, 60, 72)
• Color shades — 8–10 per color, greys included
• Font weights — 2 (normal + emphasis)
• Shadow elevations — 5
• Border radii — small fixed set

To pick from a system, sample 3 adjacent values; the middle is usually right. If an outer wins, slide one step and repeat.

Quick reference

• Smallest feature in 60 seconds with a marker — if you can't, you don't understand it well enough to design it.
• Nudging by 1px? You don't have a system. Define one.
• Mockup ahead of the engineering plan? Scope-cut the design to match.
• Avoid mixing two visual personalities in one product (e.g. rounded buttons + sharp cards).

Attribution

Heuristics distilled from Refactoring UI by Adam Wathan & Steve Schoger (https://refactoringui.com). Independent skill package; not affiliated with or endorsed by the authors.