105 lines
4.8 KiB
Markdown
105 lines
4.8 KiB
Markdown
# 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`
|