I TOOK THE REINS on this project after the homepage had been already been designed and approved, so my role was to work closely with the client and developers to create the remaining 46 pages to match the look and feel of the existing homepage. The client provided some branding assets. including the logo and color scheme, although there were no guidelines on how to apply the brand, so all components and compositions were created from scratch.
AS WITH ALL CODED products, sometimes certain elements don't translate perfectly from design to code, and clients may change components after launch according to the evolving needs of the project, which makes it interesting to compare the original design prototype with the current live website, both of which are linked below.
Desktop component scroll effect
THE DISRUPTIVE RED HUE was provided by the client, and they preferred to maintain a really bold, limited color palette, so all additional colors used are neutrals with red as the only brand color.
Case study hover effect
THE HOMEPAGE DESIGNER ESTABLISHED Soleil as the typeface to be used site-wide, both for headings and body copy. I did add the semibold caps H4 styling out of necessity to create additional hierarchy in text-heavy use cases. Soleil worked well across the board as both a heading and body font because the geometric forms lent themselves well to large headings without interfering with readability at small sizes for body text.
Tabbed chart interaction
THE GREATEST CHALLENGE FOR this project was organizing the vast amount of content that the client desired to have included on the site for SEO purposes. I accomplished this by using a tabs, accordions, and other nested solutions that suited the information being handled.
DUO-TONE ICONS SOURCED FROM online source with customized colors to match the Disruptive palette. These soft, playful icons worked well as a complement to the harsh angles and striking contrast utilized throughout the site.
Horizontal typography scrolling reveal effect