paulh
/
recipe-manager
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
recipe-manager/docs/visual-audit
History
Paul Huliganga 3931455e64 feat(ui): add visual asset pack and documentation (T03) 2026-03-26 17:47:12 -04:00
..
before feat(ui): baseline visual audit and checklist (T01) 2026-03-26 17:44:01 -04:00
README.md feat(ui): baseline visual audit and checklist (T01) 2026-03-26 17:44:01 -04:00
assets.md feat(ui): add visual asset pack and documentation (T03) 2026-03-26 17:47:12 -04:00
checklist.md feat(ui): baseline visual audit and checklist (T01) 2026-03-26 17:44:01 -04:00

README.md

T01 Baseline Visual Audit (Before Redesign)

Date: 2026-03-26
Task: T01 — Baseline Visual Audit
Owner: agent-ui-audit

Baseline screenshots (captured)

Saved under docs/visual-audit/before/:

  • home-desktop.png
  • home-mobile.png
  • recipe-new-desktop.png
  • recipe-new-mobile.png
  • import-url-desktop.png
  • import-url-mobile.png
  • recipe-detail-desktop.png
  • recipe-detail-mobile.png

Capture notes / blockers

  • ✅ Frontend runs at http://127.0.0.1:4173 and screenshots were captured.
  • ⚠️ Backend dev server failed to start (ERR_MODULE_NOT_FOUND for src/backend/db/database.js from src/backend/index.ts).
  • Impact: recipe list/detail/import states shown in screenshots are baseline UI without live backend data.

Prioritized visual issues by page

Severity legend: High = materially harms UX/clarity, Medium = noticeable polish debt, Low = minor inconsistency.

Global shell (header/footer)

  1. Medium — Visual language is inconsistent (glassmorphism header + mixed flat cards/buttons across pages).
  2. Medium — Emoji-heavy iconography reduces perceived product quality and visual cohesion.
  3. Low — Footer hierarchy is weak; feels detached from page sections and brand system.

Home / Recipe List (/)

  1. High — Primary CTA competition (Add Recipe appears in hero and again in list section), reducing action clarity.
  2. High — Hero occupies significant vertical space before core content (recipe discovery), especially on mobile.
  3. Medium — Mixed color semantics (orange hero accent, blue actions, slate sections) without a clearly unified token system.
  4. Medium — Search and filters appear visually secondary despite being primary list interactions.
  5. Low — Spacing rhythm varies between hero, filter panel, and card grid (inconsistent section cadence).

Recipe Detail / New (/recipe/new, /recipe/:id)

  1. High — Detail view lacks true hero media treatment; page relies on gradients/emoji rather than appetizing imagery.
  2. High — Action row density is high (edit/cook/delete) and becomes crowded on smaller widths.
  3. Medium — Card styles differ across sections (ingredients/instructions/additional info) creating weak visual hierarchy.
  4. Medium — Typography hierarchy can flatten in long content blocks (meta vs body text contrast not strong enough).
  5. Low — Border/shadow intensity differs subtly between cards and wrappers, creating visual noise.

Import URL (/import/url)

  1. Medium — Progress UI is visually strong but dominates above-the-fold area relative to the core URL action.
  2. Medium — Form field and button styles do not fully match recipe form/list control treatments.
  3. Low — Mixed icon/emoji style in flow states leads to inconsistent product tone.

Recommended redesign focus (P0 → P2)

  • P0: Unify design tokens (color roles, typography scale, spacing/elevation) and normalize interaction hierarchy.
  • P0: Rebalance home above-the-fold layout so search/discovery is surfaced earlier.
  • P1: Introduce consistent, high-quality food imagery strategy (home + detail + cards).
  • P1: Reduce action clutter in detail and establish one primary action per context.
  • P2: Replace ad-hoc emoji iconography with a coherent icon system.