299 lines
6.8 KiB
Markdown
299 lines
6.8 KiB
Markdown
|
# Home Wireframe
|
||
|
|
|
||
|
|
## Page Goal
|
||
|
|
The homepage should establish brand perception first, then guide users into product discovery or support. It should feel calm, premium, and easy to scan on mobile.
|
||
|
|
|
||
|
|
Brand line:
|
||
|
|
**A refined way to experience music.**
|
||
|
|
|
||
|
|
## Structure Overview
|
||
|
|
1. Hero
|
||
|
|
2. Featured Products
|
||
|
|
3. Brand / Technology Statement
|
||
|
|
4. Support Shortcuts
|
||
|
|
5. News / Recognition
|
||
|
|
6. Footer
|
||
|
|
|
||
|
|
The homepage should avoid stacking too many sections. Every module must earn its place.
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 1. Hero
|
||
|
|
|
||
|
|
### Purpose
|
||
|
|
Set the emotional tone of the brand and communicate the core positioning immediately.
|
||
|
|
|
||
|
|
### Content
|
||
|
|
- Full-width lifestyle still image for the default presentation
|
||
|
|
- Optional showcase video variant for selected campaigns or launch moments
|
||
|
|
- Headline
|
||
|
|
- One-line supporting copy
|
||
|
|
- Primary CTA
|
||
|
|
- Secondary CTA
|
||
|
|
|
||
|
|
### Draft Copy
|
||
|
|
Headline:
|
||
|
|
**A refined way to experience music.**
|
||
|
|
|
||
|
|
Supporting line:
|
||
|
|
Precision audio, shaped for modern listening and made to live beautifully in real spaces.
|
||
|
|
|
||
|
|
Primary CTA:
|
||
|
|
**Explore Products**
|
||
|
|
|
||
|
|
Secondary CTA:
|
||
|
|
**Support**
|
||
|
|
|
||
|
|
### Layout Notes
|
||
|
|
- Keep text block left-aligned or centered only if the image composition supports it.
|
||
|
|
- Copy width should stay narrow.
|
||
|
|
- Avoid layered badges, floating cards, or promotional overlays.
|
||
|
|
- Default launch treatment should prioritize still photography.
|
||
|
|
- Video can be used as a showcase asset, but it must be silent, slow, and secondary to the copy.
|
||
|
|
|
||
|
|
### Mobile Notes
|
||
|
|
- Crop image for subject clarity, not just center crop.
|
||
|
|
- Keep headline within 2 lines.
|
||
|
|
- CTAs stack vertically if space is tight.
|
||
|
|
|
||
|
|
### Payload Source
|
||
|
|
`Homepage.heroScene`
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 2. Featured Products
|
||
|
|
|
||
|
|
### Purpose
|
||
|
|
Show the current product focus in a curated way. This section should feel editorial, not catalog-like.
|
||
|
|
|
||
|
|
### Content
|
||
|
|
- Exactly 4 featured products
|
||
|
|
- Product image
|
||
|
|
- Model name
|
||
|
|
- One-line descriptor
|
||
|
|
- Details CTA
|
||
|
|
|
||
|
|
### Section Intro
|
||
|
|
Eyebrow:
|
||
|
|
**Featured**
|
||
|
|
|
||
|
|
Title:
|
||
|
|
**Selected products**
|
||
|
|
|
||
|
|
Optional supporting line:
|
||
|
|
A focused range of products designed around clarity, control, and musical presence.
|
||
|
|
|
||
|
|
### Product Card Rules
|
||
|
|
- No prices
|
||
|
|
- No sales language
|
||
|
|
- No rating stars, stock labels, or commerce badges
|
||
|
|
- Use horizontal image composition to reinforce a more editorial and cinematic layout
|
||
|
|
- Card height should remain visually consistent even when copy length differs by language
|
||
|
|
|
||
|
|
### Desktop Layout
|
||
|
|
- 4-column grid
|
||
|
|
- Balanced spacing, generous margins
|
||
|
|
|
||
|
|
### Mobile Layout
|
||
|
|
- 1-column stacked cards or 2-column compact grid depending on image ratio and readability
|
||
|
|
- Prioritize image legibility and tap comfort over density
|
||
|
|
|
||
|
|
### Payload Source
|
||
|
|
`Homepage.featuredProducts` → `Product`
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 3. Brand / Technology Statement
|
||
|
|
|
||
|
|
### Purpose
|
||
|
|
Bridge the emotional tone of the hero with the technical credibility of the products.
|
||
|
|
|
||
|
|
### Content Direction
|
||
|
|
This is one restrained section only. It should not become a full spec dump.
|
||
|
|
|
||
|
|
### Draft Copy Option
|
||
|
|
Title:
|
||
|
|
**Designed with intention. Engineered for clarity.**
|
||
|
|
|
||
|
|
Body:
|
||
|
|
From interface to internal architecture, every detail is shaped to make listening feel more direct, more focused, and more rewarding.
|
||
|
|
|
||
|
|
### Layout Options
|
||
|
|
Selected direction:
|
||
|
|
- Supporting image on one side
|
||
|
|
- Statement text on the other
|
||
|
|
- Horizontal composition with generous whitespace
|
||
|
|
|
||
|
|
Alternative reference:
|
||
|
|
- Full-width text block with minimal background image
|
||
|
|
|
||
|
|
### Notes
|
||
|
|
- Use this section to establish product philosophy, not feature count.
|
||
|
|
- Keep to one visual idea.
|
||
|
|
|
||
|
|
### Payload Source
|
||
|
|
`Homepage.statement`
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 4. Support Shortcuts
|
||
|
|
|
||
|
|
### Purpose
|
||
|
|
Make service resources visible without shifting the homepage into a utility portal.
|
||
|
|
|
||
|
|
### Priority
|
||
|
|
1. FAQ
|
||
|
|
2. Warranty
|
||
|
|
3. Contact
|
||
|
|
|
||
|
|
### Section Intro
|
||
|
|
Title:
|
||
|
|
**Support, made straightforward.**
|
||
|
|
|
||
|
|
Supporting line:
|
||
|
|
Find answers, service information, and contact details without friction.
|
||
|
|
|
||
|
|
### Card Structure
|
||
|
|
Each shortcut card includes:
|
||
|
|
- Label
|
||
|
|
- One-line description
|
||
|
|
- CTA
|
||
|
|
|
||
|
|
### Draft Entries
|
||
|
|
FAQ:
|
||
|
|
Common answers for setup, playback, connectivity, and product use.
|
||
|
|
CTA: **View FAQ**
|
||
|
|
|
||
|
|
Warranty:
|
||
|
|
Warranty coverage, regional notes, and service information.
|
||
|
|
CTA: **Warranty Info**
|
||
|
|
|
||
|
|
Contact:
|
||
|
|
Reach the right team for product, service, or dealer-related questions.
|
||
|
|
CTA: **Contact Us**
|
||
|
|
|
||
|
|
Optional fourth item:
|
||
|
|
Downloads
|
||
|
|
CTA: **Downloads**
|
||
|
|
|
||
|
|
### Layout Notes
|
||
|
|
- Use clean cards or simple list rows.
|
||
|
|
- Avoid making this section visually heavier than Featured Products.
|
||
|
|
- On mobile, cards should stack with strong spacing.
|
||
|
|
|
||
|
|
### Payload Source
|
||
|
|
`Homepage.supportShortcuts`
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 5. News / Recognition
|
||
|
|
|
||
|
|
### Purpose
|
||
|
|
Add proof and recency without making the homepage feel busy.
|
||
|
|
|
||
|
|
### Launch Direction
|
||
|
|
This section should combine light editorial freshness with brand proof.
|
||
|
|
Include:
|
||
|
|
- Up to 3 recent news items
|
||
|
|
- Awards
|
||
|
|
- Review quotes or media logos
|
||
|
|
|
||
|
|
### Recommended Direction
|
||
|
|
For launch, keep this section light and editorial.
|
||
|
|
A simple 3-item news row can sit alongside or above a restrained awards / review treatment.
|
||
|
|
Recognition content should support credibility, not overpower the page.
|
||
|
|
|
||
|
|
### Section Intro
|
||
|
|
Title:
|
||
|
|
**Latest**
|
||
|
|
|
||
|
|
### Layout Notes
|
||
|
|
- Small footprint
|
||
|
|
- Low visual contrast compared with Hero and Featured Products
|
||
|
|
- This section can be removed temporarily if content quality is not ready
|
||
|
|
|
||
|
|
### Payload Source
|
||
|
|
`Homepage.newsHighlights` or curated references from `News Article`
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 6. Footer
|
||
|
|
|
||
|
|
### Purpose
|
||
|
|
Close the homepage with clear access to navigation, support, and regional information.
|
||
|
|
|
||
|
|
### Structure
|
||
|
|
Column 1:
|
||
|
|
Products
|
||
|
|
|
||
|
|
Column 2:
|
||
|
|
Support
|
||
|
|
- FAQ
|
||
|
|
- Warranty
|
||
|
|
- Contact
|
||
|
|
- Downloads
|
||
|
|
|
||
|
|
Column 3:
|
||
|
|
Company
|
||
|
|
- About
|
||
|
|
- News
|
||
|
|
- Dealers
|
||
|
|
|
||
|
|
Column 4:
|
||
|
|
Language / Legal / Social
|
||
|
|
|
||
|
|
### Notes
|
||
|
|
- Language switch should be visible both in header and footer.
|
||
|
|
- Footer should feel quiet and highly usable.
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Desktop Order
|
||
|
|
1. Hero
|
||
|
|
2. Featured Products
|
||
|
|
3. Brand / Technology Statement
|
||
|
|
4. Support Shortcuts
|
||
|
|
5. News / Recognition
|
||
|
|
6. Footer
|
||
|
|
|
||
|
|
## Mobile Order
|
||
|
|
Keep the same order.
|
||
|
|
Do not move support above products unless analytics later proves it is necessary.
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Section Density Rules
|
||
|
|
- Maximum 5 homepage content sections before footer.
|
||
|
|
- No carousel except hero, and hero should not exceed 3 slides.
|
||
|
|
- One dominant visual idea per section.
|
||
|
|
- One primary CTA per section.
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## AI-Slop Avoidance Rules
|
||
|
|
- No generic gradient backgrounds.
|
||
|
|
- No glassmorphism overlays.
|
||
|
|
- No floating fake dashboards.
|
||
|
|
- No exaggerated animation.
|
||
|
|
- No over-written marketing copy.
|
||
|
|
- No generic luxury cliches.
|
||
|
|
|
||
|
|
The page should feel intentional, editorial, and brand-specific.
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Build Mapping
|
||
|
|
- Hero → Payload global: Homepage
|
||
|
|
- Featured Products → referenced Product entries
|
||
|
|
- Statement → Homepage global rich text field
|
||
|
|
- Support Shortcuts → Homepage global structured list
|
||
|
|
- News Highlights → News Article references
|
||
|
|
- Footer → Global Settings
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Open Design Decisions
|
||
|
|
- Typography personality: neutral modern sans or sharper editorial contrast
|
||
|
|
- Whether awards appear as logo wall, quote strip, or mixed recognition module
|
||
|
|
- Whether hero video is launch-day only or a reusable CMS option
|