Octane Biotech
WEBSITE Redesign and REDEVLOPMENT
Supporting a Brand relaunch, this project included a complete website redesign and redeployment, migrating from an older solution with dependencies that had completely locked in the theme, content and features.
This project was produced for Distility, in Toronto, Canada, their team developed brand positioning, editorial and copywriting.
I built this design system and UI elements to allow each key landing page to feature a range of custom treatments, filters, gradients and image effects designed to allow content editors to employ them ad hoc to highlight and focus their messaging while maintaining a solid and persistent brand statement.
ComprehensivE design system At Work
The design system allows content to be built in a narrative style, per page. Where the client or content editors can choose any effect for video or images (shift focal regions, adjust gradients) employ dark or light typography and a dozen customized block and page layouts to accommodate marketing, communications, science, products, initiatives and sub-brands naturally without requiring additional front-end developer support.
Animating with LOTTIE & BODYMOVIN
Headers, (logo and content hero headers) are all built to employ, video, and SVG animation. The Home Page includes, both HTML5 Video and SVG animations built as vector animations in After Effects, output as JSON, and then run using minified Lottie.js within WordPress. This approach, allows for complex and lightweight SVG animations added to pages as desired.