An adaptive and responsive product marketing website.
Whether you are an athlete dealing with the side-effects of endurance sports, or a fashion addict that can’t help but power through wearing blister-inducing shoes, it turns out, this is a product you might use to ease that trouble. So, a website marketing it somehow needs to appeal to these disparate audiences (and then some).
How do you do that? With a beautiful, responsive e-commerce website overflowing with targeted content, of course. And, it doesn’t hurt to have some eye-candy features, like the custom animated heroes and saturation-based focus components discussed below.
Custom animated heroes and color-adaptive headers enliven the experience.
One of the unique custom features of the site is that on every page, an algorithm reads the color palette of the hero image, and sets the color of the header to complement it. On the home page, the algorithm reads only the background image; on other pages, if there is a foreground image, it is also incorporated into the metric. This process creates a beautiful custom look that maintains the style of the brand, while best complementing the imagery that targets specific user groups.
Side Note: In the video animation above, we’ve sped up the length of the pause between each animated header, just so you can see the full collection without having to wait around too long.
Saturation-based focus guides the reader.
Taking a cue from architectural rendering, the blog listing page uses color to direct the focus of the user by raising and lowering the saturation of a post from full color to greyscale, though a fade-in/face-out transition governed by scrolling behavior.
Hey, we hope you liked our work!
Would you like to check out the services we offer?
Can we help you with anything?
Or, would you like to join our (rarely used) mailing list?
Feel free to reach out with any questions you may have for us about our services, our work, or anything else that’s got you curious.