72 lines
2.0 KiB
Markdown
72 lines
2.0 KiB
Markdown
|
# Design Direction Draft
|
||
|
|
|
||
|
|
## Design Principles
|
||
|
|
1. Simplicity first.
|
||
|
|
2. Premium without excess.
|
||
|
|
3. Product and environment should feel real, not theatrical.
|
||
|
|
4. Information density should stay controlled.
|
||
|
|
5. Navigation should reduce hesitation.
|
||
|
|
6. The site should feel international and editorially composed.
|
||
|
|
|
||
|
|
## Homepage Hierarchy
|
||
|
|
1. Hero banner with lifestyle usage scene, with support for still image and showcase video
|
||
|
|
2. Featured products (4-up layout with horizontal product imagery)
|
||
|
|
3. Brand / technology statement in image + text composition
|
||
|
|
4. Support access
|
||
|
|
5. Secondary proof such as reviews, awards, and press
|
||
|
|
|
||
|
|
## Visual Character
|
||
|
|
- Light theme
|
||
|
|
- Clean composition
|
||
|
|
- Strong whitespace
|
||
|
|
- Large photography
|
||
|
|
- Minimal copy blocks
|
||
|
|
- Controlled typography scale
|
||
|
|
- International layout rhythm
|
||
|
|
- Material richness and cinematic lens quality
|
||
|
|
- No shopping cues
|
||
|
|
- No discount, badge, or pricing treatments
|
||
|
|
|
||
|
|
## Component Priorities
|
||
|
|
### Tier 1
|
||
|
|
- Header / navigation
|
||
|
|
- Hero banner
|
||
|
|
- Product card
|
||
|
|
- CTA button
|
||
|
|
- Footer
|
||
|
|
|
||
|
|
### Tier 2
|
||
|
|
- Section intro
|
||
|
|
- Spec block
|
||
|
|
- Media quote / award block
|
||
|
|
- Support shortcut card
|
||
|
|
- Gallery module
|
||
|
|
|
||
|
|
### Tier 3
|
||
|
|
- Accordions
|
||
|
|
- Tabs
|
||
|
|
- Download list
|
||
|
|
- Breadcrumbs
|
||
|
|
- Pagination
|
||
|
|
|
||
|
|
## Interaction Principles
|
||
|
|
- Motion should be subtle.
|
||
|
|
- Hover states should feel deliberate.
|
||
|
|
- Transitions should support clarity, not spectacle.
|
||
|
|
- Mobile behavior should preserve the same restraint as desktop.
|
||
|
|
|
||
|
|
## Visual Risks To Avoid
|
||
|
|
- Generic luxury gradients
|
||
|
|
- Over-styled glass effects
|
||
|
|
- Too many homepage modules
|
||
|
|
- Dense comparison-table layouts on top-level pages
|
||
|
|
- Product grids that feel like retail catalog pages
|
||
|
|
- Visual treatments that break between Chinese and English content lengths
|
||
|
|
|
||
|
|
## Open Design Questions
|
||
|
|
- Typography personality: neutral modern sans or sharper editorial contrast
|
||
|
|
- Photography direction: interior lifestyle, studio realism, or mixed by page
|
||
|
|
- Awards / reviews treatment: logo wall, quote strip, or mixed module
|
||
|
|
- Whether hero video is a launch-only asset or persistent CMS option
|
||
|
|
- Whether regional versions need different imagery or content emphasis
|