PROJECT HERO MEDIA — 16:916:9
Hardware with a public face.
01 — Landing hero
The first impression.
The first screen states what is built before it tries to impress.
LANDING HERO — DESKTOP16:9
02 — Brand introduction
Setting the visual direction.
A dark technical grid, exact type, imagery close to the machine.
BRAND LANDSCAPE — DESKTOP16:10
BRAND DETAIL — PORTRAIT3:4
03 — Product discovery
Designed to invite exploration.
Capabilities unfold without burying the product in metaphor.
SUPPORTING PAGE4:5
PRIMARY PAGE — DESKTOP16:10
MOBILE DETAIL9:16
04 — Interaction system
Movement with purpose.
Motion is measured: enough to prove control, never to distract.
INTERACTION VIDEO — 16:916:9
INTERACTION DETAIL 014:3
INTERACTION DETAIL 024:3
05 — Conversion journey
From interest to action.
Proof, application, and enquiry stay on one continuous path.
Discovery
DISCOVERY16:10
Selection
SELECTION16:10
Enquiry or checkout
ENQUIRY OR CHECKOUT16:10
06 — Responsive experience
Designed for every screen.
Diagrams and joints stay readable when the viewport shrinks.
DESKTOP FRAME16:10
TABLET FRAME3:4
MOBILE FRAME 019:16
MOBILE FRAME 029:16
07 — Details that matter
The moments that complete the experience.
Small interface moments carry the same engineered finish.
NAVIGATION DETAIL16:9
TYPOGRAPHY DETAIL4:5
BUTTON / HOVER DETAIL1:1
MICRO-INTERACTION16:10
08 — Final experience
Built to be remembered.
Leave with the product still in frame.
FINAL EXPERIENCE — FULL WIDTH16:9