Role: Web Developer / Designer
Project Type:
Consumer Facing
Product Micro Site
Deliverables:
Fully Responsive Micro Site
Product Story
Image and Video Assets
Project Overview
To commemorate the ground up redesign of the 2015 Norco Aurum I designed and developed a microsite that encapsulated the bike's development story. The final result was a one page scroll layout that was broken up into 4 chapters that described how the bike transformed from concept to completion. Like the bike this micro site was a ground up redesign and allowed me to rethink how the site was structured and try out some new techniques. I create a modular framework that utilizes scrolling Video backgrounds, angled elements and a dynamic menu system.
Clean Commenting
Video Backgrounds
CSS Animations
Process And Apporach
The 2015 Aurum was Norco's largest bike launch to date and provided a new standard for subsequent bike launches. When developing the Aurum Micro Site I wanted to create a modular template that could be reused for future bike launches. I separated the code into well documented sections that used specific classes and Javascript to create a dynamic menu system every time a section was added.
Some of these sections utilized scrolling background video. This was particularly challenging because I needed to swap the video source before and after the user reached different thresholds. Using jQuery .each() and .scroll() functions I was able to achieve this effect as well as make it modular and dynamic.
In order to highlight the key features of the new bike I used CSS 3 to show and hide elements through transition animations. The transitions were created by using two CSS classes that used javascript to toggle between the active and none active classes.
Process And Apporach
The 2015 Aurum was Norco's largest bike launch to date and provided a new standard for subsequent bike launches. When developing the Aurum Micro Site I wanted to create a modular template that could be reused for future bike launches. I separated the code into well documented sections that used specific classes and Javascript to create a dynamic menu system every time a section was added.
Some of these sections utilized scrolling background video. This was particularly challenging because I needed to swap the video source before and after the user reached different thresholds. Using jQuery .each() and .scroll() functions I was able to achieve this effect as well as make it modular and dynamic.
In order to highlight the key features of the new bike I used CSS 3 to show and hide elements through transition animations. The transitions were created by using two CSS classes that used javascript to toggle between the active and none active classes.
Clean Commenting
Video Backgrounds
CSS Animations
Aurum Template
Revolver Template
Tactic Template
Highlights
This project allowed me to explore new techniques for designing and developing websites. I was able to learn new javascript and CSS skills that allowed me to create a stunning website that was well received across the bike industry. The success of the Aurum microsite contributed to new styling changes to Norco's 2016 marketing material and provided a template for subsequent bike launch microsites.
