paulh
/
recipe-manager
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
recipe-manager/docs/visual-audit
History
Paul Huliganga b5a2588bc4 feat(ui): redesign homepage visuals and hierarchy (T04) 2026-03-26 17:51:52 -04:00
..
after feat(ui): redesign homepage visuals and hierarchy (T04) 2026-03-26 17:51:52 -04:00
before feat(ui): baseline visual audit and checklist (T01) 2026-03-26 17:44:01 -04:00
README.md feat(ui): redesign homepage visuals and hierarchy (T04) 2026-03-26 17:51:52 -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
visual-style-guide.md feat(ui): add design tokens and visual style guide (T02) 2026-03-26 17:49:34 -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.

T04 Homepage Redesign (After)

Date: 2026-03-26
Task: T04 — Homepage Redesign
Owner: agent-core-ui

What changed

  • Introduced a stronger home hero with clear action hierarchy:
    • primary CTA: Start a Recipe
    • secondary CTA: Browse Library
    • responsive image panel with safe fallback chain (hero.png → /images/hero-fallback.svg)
  • Added feature-highlight blocks using T03 asset icons:
    • /assets/category/icon-dinner.svg
    • /assets/category/icon-lunch.svg
    • /assets/category/icon-breakfast.svg
  • Improved visual hierarchy and spacing for the recipe discovery area:
    • renamed section to Recipe Library
    • improved search input and action sizing for touch targets
    • retained filter behavior with clearer card grouping
  • Polished footer structure in app shell:
    • multi-column footer content
    • quick links and stronger brand/utility hierarchy
  • Empty state now uses T03 illustration (/assets/empty-state/no-recipes.svg) for better visual clarity.

Token alignment note (T02 dependency)

  • T02 token outputs are available (frontend/src/theme.ts + CSS custom properties in frontend/src/index.css).
  • T04 consumed existing token-friendly values (radius + CSS vars via global styles) and avoided introducing breaking token assumptions.
  • If T02 token contracts evolve, align CTA/card semantic classes first before changing component behavior.

After screenshots

Saved under docs/visual-audit/after/:

  • home-desktop.png
  • home-mobile.png