Digital
Responsive Web Design & Development for E-Commerce
Bodyglide® Responsive E-Commerce Website
The Bodyglide® Responsive E-Commerce Website was completed via Portent, Inc. for Bodyglide. Featuring custom animated headers, and saturation-based focus, we delivered a sexy site for a practical product.
Custom Animated Heroes on Home Page
The slanted cut of the hero images on the home page carousel is accomplished purely through code, as are the color-adaptive headers, and the shading which creates the subtle three-dimensional effect.
Custom Animated Heroes on Home Page
The slanted cut of the hero images on the home page carousel is accomplished purely through code, as are the color-adaptive headers, and the shading which creates the subtle three-dimensional effect.
Site-Wide Color-Adaptive Headers
The color-adaptive header adjusts to complement the hero image– a custom feature that gives each page a unique feel, while maintaining a consistent brand identity.
Site-Wide Color-Adaptive Headers
The color-adaptive header adjusts to complement the hero image– a custom feature that gives each page a unique feel, while maintaining a consistent brand identity.
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 & Color-Adaptive Headers
As the home page hero carousel cycles, the slanted cut of the images pivots back and forth, and the color-adaptive header adjusts to complement the hero image.
Custom Animated Heroes & Color-Adaptive Headers
As the home page hero carousel cycles, the slanted cut of the images pivots back and forth, and the color-adaptive header adjusts to complement the hero image.
Custom Animated Heroes & Color-Adaptive Headers
As the home page hero carousel cycles, the slanted cut of the images pivots back and forth, and the color-adaptive header adjusts to complement the hero image.
Custom Animated Heroes & Color-Adaptive Headers
As the home page hero carousel cycles, the slanted cut of the images pivots back and forth, and the color-adaptive header adjusts to complement the hero image.
Custom Animated Heroes & Color-Adaptive Headers
As the home page hero carousel cycles, the slanted cut of the images pivots back and forth, and the color-adaptive header adjusts to complement the hero image.
Custom Animated Heroes & Color-Adaptive Headers
As the home page hero carousel cycles, the slanted cut of the images pivots back and forth, and the color-adaptive header adjusts to complement the hero image.
Custom Animated Heroes & Color-Adaptive Headers
As the home page hero carousel cycles, the slanted cut of the images pivots back and forth, and the color-adaptive header adjusts to complement the hero image.
Custom Animated Heroes & Color-Adaptive Headers
As the home page hero carousel cycles, the slanted cut of the images pivots back and forth, and the color-adaptive header adjusts to complement the hero image.
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.
Top of the Page
When you arrive at the blog listing page, the header, hero image, and top post are in color, but the subsequent post is desaturated down to greyscale.
Scrolling Down
As you scroll down, the the hero image and top post desaturate to greyscale, while the saturation of the next post rises up to full color, directing user focus to it.
Scrolling Down
As you scroll down, the the hero image and top post desaturate to greyscale, while the saturation of the next post rises up to full color, directing user focus to it.
Keep Scrolling...
Scrolling even further, you see that the following post, is still grey, as it is not yet intended to catch your eye.
Keep Scrolling...
Scrolling even further, you see that the following post, is still grey, as it is not yet intended to catch your eye.
Even More..
Then, it saturates up to color to direct your focus to it, instead of the one before, and so on, as scrolling continues.
Even More..
Then, it saturates up to color to direct your focus to it, instead of the one before, and so on, as scrolling continues.
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.