Codex
6.8 KiB
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
- Hero
- Featured Products
- Brand / Technology Statement
- Support Shortcuts
- News / Recognition
- 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
- FAQ
- Warranty
- 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
- Hero
- Featured Products
- Brand / Technology Statement
- Support Shortcuts
- News / Recognition
- 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