58 lines
4.3 KiB
Markdown
58 lines
4.3 KiB
Markdown
# Homepage Three-Screen Prototype — Design QA
|
||
|
||
- Source visual truth: `docs/homepage-prototype-qa/source-direction.jpg` plus the two supplied Douyin design references (bold business matrix and three-screen narrative funnel).
|
||
- Implementation: `http://127.0.0.1:5173/`
|
||
- Browser-rendered evidence:
|
||
- `docs/homepage-prototype-qa/implementation-hero.png`
|
||
- `docs/homepage-prototype-qa/implementation-themes.png`
|
||
- `docs/homepage-prototype-qa/implementation-story.png`
|
||
- `docs/homepage-prototype-qa/implementation-mobile.png`
|
||
- Desktop viewport: 1440 × 1000 CSS px; screenshot 1440 × 872 px after app browser chrome, density 1×.
|
||
- Mobile viewport: 390 × 844 CSS px; screenshot 390 × 838 px after app browser chrome, density 1×.
|
||
- Source pixels: 2358 × 891. The source is directional rather than a 1:1 frame; comparison normalized by composition, hierarchy, density, palette, imagery, and narrative rhythm rather than pixel position.
|
||
- State: default English homepage; hero slide 1; desktop and mobile initial view; second and third screens after scroll.
|
||
|
||
## Full-view comparison evidence
|
||
|
||
- Hero now uses a full-bleed, low-saturation travel image, oversized sans-serif statement, acid-green accent, concise explanation, and an explicit planning action. It is structurally distinct from the former split image/copy travel template.
|
||
- The second screen uses an eight-item edge-to-edge business/experience matrix with consistent numbered cells and responsive 4/2/1-column behavior.
|
||
- The third screen creates a clear narrative funnel: point of view → method → three-step explanation → trust statement.
|
||
|
||
## Focused-region comparison evidence
|
||
|
||
- Hero typography/crop checked independently at desktop and mobile widths.
|
||
- Theme-card image crop, label contrast, and 2-row alignment checked at 1440 px.
|
||
- Third-screen portrait crop, headline wrapping, supporting copy, and step borders checked at 1440 px.
|
||
|
||
## Required fidelity surfaces
|
||
|
||
- Fonts and typography: bold sans-serif display type deliberately replaces the previous classic serif-first homepage hierarchy; line breaks, weight, and mobile wrapping remain readable. Card and step headings use the same sans family to preserve the new direction.
|
||
- Spacing and layout rhythm: three distinct near-viewport chapters; desktop margins align to a 1500 px max canvas; responsive layouts collapse cleanly without horizontal overflow.
|
||
- Colors and tokens: deep forest, warm paper, off-white and acid green form a controlled four-color palette with adequate foreground contrast on the checked states.
|
||
- Image quality: all visible assets are supplied high-resolution client imagery; crops are intentional, no placeholders, broken images, fake illustration, or stretched assets were observed.
|
||
- Copy and content: English is the default. New headline and explanatory copy are specific to WanderQ, while the existing customer-approved content and downstream routes remain in place.
|
||
|
||
## Primary interactions tested
|
||
|
||
- Hero slideshow controls render and remain operable.
|
||
- Primary “Design your journey” CTA resolves to `/contact/`.
|
||
- Eight theme cards resolve to existing experience/contact routes.
|
||
- Scroll-triggered entrances and hero parallax run without console warnings or errors.
|
||
- Broken-image check returned zero failures.
|
||
|
||
## Comparison history
|
||
|
||
1. P1: global heading CSS overrode the intended bold display face, leaving hero and matrix headings in serif. Fixed with scoped, higher-specificity homepage type rules. Post-fix evidence: all four implementation screenshots.
|
||
2. P2: theme-card and story-step headings still inherited the classic serif family. Fixed by explicitly applying the homepage sans family. Post-fix evidence: `implementation-themes.png` and `implementation-story.png`.
|
||
3. P2: mobile hero needed separate type and spacing constraints. Added 820 px and 540 px responsive rules; verified at 390 × 844 with no clipping of the main statement or CTA.
|
||
|
||
## Findings
|
||
|
||
No actionable P0/P1/P2 issues remain in the three-screen prototype. The existing full-site header is intentionally retained so the concept can be judged inside the real product rather than as an isolated mock.
|
||
|
||
## Follow-up polish
|
||
|
||
- P3: if this direction is approved, tune the remaining homepage sections to continue the same display typography, dark/light cadence, and tighter content density.
|
||
|
||
final result: passed
|