115 lines
6.1 KiB
Markdown
115 lines
6.1 KiB
Markdown
# Redesign Audit Checklist
|
|
|
|
Use when upgrading an existing project. Follow Scan → Diagnose → Fix in order.
|
|
|
|
## Workflow
|
|
|
|
1. **Scan** — Read the codebase. Identify framework, styling method (Tailwind, vanilla CSS, styled-components), and current design patterns.
|
|
2. **Diagnose** — Run through each category below. List every generic pattern, weak point, and missing state.
|
|
3. **Fix** — Apply targeted upgrades working with the existing stack. Do not rewrite from scratch.
|
|
|
|
**Rules:**
|
|
- Work with the existing tech stack. Do not migrate frameworks.
|
|
- Do not break existing functionality. Test after every change.
|
|
- Check `package.json` before adding any new dependency.
|
|
- Keep changes focused and reviewable — small targeted improvements over big rewrites.
|
|
|
|
---
|
|
|
|
## Audit Categories
|
|
|
|
### 1. Typography
|
|
- [ ] Browser default fonts or Inter everywhere → replace with `Geist`, `Outfit`, `Cabinet Grotesk`, or `Satoshi`
|
|
- [ ] Headlines lack presence → tighten tracking, reduce line-height, increase display size
|
|
- [ ] Body text too wide → limit to ~65ch, increase line-height
|
|
- [ ] Only 400 + 700 weights → introduce 500/600 for subtler hierarchy
|
|
- [ ] Numbers in proportional font → use monospace or `font-variant-numeric: tabular-nums`
|
|
- [ ] All-caps subheaders everywhere → try lowercase italic or sentence case
|
|
- [ ] Orphaned last words → fix with `text-wrap: balance` or `text-wrap: pretty`
|
|
- [ ] Serif fonts on dashboard UI → use high-end sans-serif pairs only
|
|
|
|
### 2. Color and Surfaces
|
|
- [ ] Pure `#000000` → replace with off-black or tinted dark
|
|
- [ ] Oversaturated accents → desaturate below 80%
|
|
- [ ] More than one accent color → reduce to one
|
|
- [ ] Mixing warm and cool grays → pick one family, stay consistent
|
|
- [ ] Purple/blue AI gradient aesthetic → replace with neutral base + singular accent
|
|
- [ ] Generic `box-shadow` → tint shadows to background hue
|
|
- [ ] Flat surfaces with zero texture → add subtle noise/grain overlay
|
|
- [ ] Perfectly even linear gradients → use radial, mesh, or noise-overlaid gradients
|
|
- [ ] Random dark section in light-mode page (or vice versa) → commit to consistent tone or use slightly darker shade of same palette
|
|
|
|
### 3. Layout
|
|
- [ ] Everything centered and symmetrical → break with offset margins, mixed aspect ratios
|
|
- [ ] Three equal card columns as feature row → use 2-col zig-zag, asymmetric grid, or horizontal scroll
|
|
- [ ] `h-screen` / `height: 100vh` → replace with `min-height: 100dvh`
|
|
- [ ] Complex flexbox `calc()` math → replace with CSS Grid
|
|
- [ ] No max-width container → add 1200-1440px constraint with auto margins
|
|
- [ ] Uniform border-radius everywhere → vary inner/outer elements
|
|
- [ ] No overlap or depth → use negative margins for layering
|
|
- [ ] Dashboard always has left sidebar → consider top nav, command menu, or collapsible panel
|
|
- [ ] Buttons not bottom-aligned in card groups → pin CTAs to card bottom
|
|
- [ ] Missing whitespace on marketing pages → double spacing, let design breathe
|
|
|
|
### 4. Interactivity and States
|
|
- [ ] No hover states on buttons → add background shift, scale, or translate
|
|
- [ ] No active/pressed feedback → add `scale(0.98)` or `translateY(1px)` on press
|
|
- [ ] Instant transitions → add 200-300ms smooth transitions
|
|
- [ ] Missing focus ring → visible focus indicator (accessibility requirement)
|
|
- [ ] Generic circular spinner → replace with skeleton loader matching layout shape
|
|
- [ ] No empty state → design a composed "getting started" view
|
|
- [ ] No error state → inline error messages on forms (no `window.alert()`)
|
|
- [ ] Dead links (`href="#"`) → link real destinations or visually disable
|
|
- [ ] No current-page indicator in nav → style active link distinctly
|
|
- [ ] Scroll jumping on anchor links → add `scroll-behavior: smooth`
|
|
- [ ] Animations using `top`/`left`/`width`/`height` → switch to `transform` + `opacity`
|
|
|
|
### 5. Content
|
|
- [ ] Generic placeholder names → use diverse, realistic names
|
|
- [ ] Round fake numbers → use organic messy data
|
|
- [ ] AI copywriting clichés → plain, specific language
|
|
- [ ] Lorem Ipsum → real draft copy
|
|
- [ ] Exclamation marks in success states → remove
|
|
- [ ] Title Case On Every Header → use sentence case
|
|
- [ ] Same avatar for multiple users → unique assets per person
|
|
- [ ] Blog post dates all identical → randomize
|
|
|
|
### 6. Components and Code
|
|
- [ ] Generic card (border + shadow + white bg) at high density → use spacing/dividers
|
|
- [ ] Always one filled + one ghost button → add text links, reduce visual noise
|
|
- [ ] Lucide/Feather icons only → try Phosphor or Heroicons for differentiation
|
|
- [ ] Cliché icon metaphors (rocketship, shield) → less obvious alternatives
|
|
- [ ] Div soup → use semantic HTML: `nav`, `main`, `article`, `aside`, `section`
|
|
- [ ] Inline styles mixed with CSS classes → move all styling to the project's system
|
|
- [ ] Arbitrary z-index values (`z-[9999]`) → establish a clean z-index scale
|
|
- [ ] Missing alt text on meaningful images → describe content for screen readers
|
|
- [ ] Missing meta tags → add `title`, `description`, `og:image`
|
|
|
|
---
|
|
|
|
## Fix Priority Order
|
|
|
|
Apply in this order for maximum impact with minimum risk:
|
|
|
|
1. **Font swap** — biggest instant improvement, lowest risk
|
|
2. **Color cleanup** — remove clashing or oversaturated colors
|
|
3. **Hover and active states** — makes interface feel alive
|
|
4. **Layout and spacing** — proper grid, max-width, consistent padding
|
|
5. **Replace generic components** — swap cliché patterns for modern alternatives
|
|
6. **Add loading, empty, error states** — makes it feel finished
|
|
7. **Polish typography scale** — the premium final touch
|
|
|
|
---
|
|
|
|
## Strategic Omissions (What AI Typically Forgets)
|
|
|
|
These are rarely in AI-generated output. Check explicitly:
|
|
|
|
- **No legal links** → add privacy policy + terms in footer
|
|
- **No "back" navigation** → every page needs a way back
|
|
- **No custom 404 page** → design a helpful branded "not found" experience
|
|
- **No form validation** → client-side validation for emails, required fields, formats
|
|
- **No "skip to content" link** → essential for keyboard users
|
|
- **No favicon** → always include a branded favicon
|
|
- **No social sharing meta** → `og:image`, `og:title`, `twitter:card`
|