Motion & Web Design for
HP Guidelines
design note
The web prototype was built to showcase HP's design & motion guidelines for their brand refresh, emphasizing scalability & accessibility across regions. The layout & interactions were made to embody the brand's new identity, with universally responsive design & real-time motion guidance.
Layout
Transitions
Motion
The Challenge
The reliance on static PDFs caused inconsistencies, version control issues, and production delays. Designers worldwide struggled with brand motion interpretation, leading to internal friction and brand drift.
Our objective was clear: Shift from interpretation to implementation.
Responsiveness
Scope & Exploration
The scope was to create a responsive, public URL as the definitive source for HP Brand Guidelines. Though not launched, it informed the final brand design. Check out the live site below-
Top Nav Layout
Top Nav Layout
Side Nav Layout
