Functional &
Beutifuly Animated
Product Features
In an attempt to get away from the established layouts, which usually boil down to building a section from a photo and a paragraph of text, I decided to create this type of card. The undoubted advantage of this solution (in addition to a certain originality) is its compactness (visual representation of a product feature) and ease of adaptation to mobile layouts. The cards are animated while scrolling the page, which gives the impression of lightness, which I really cared about while creating this page.
Deep Dive.
Product Features.
Compromises, compromises.... Since I work on projects from start to finish solo, I can't afford to create dozens of separate sub-pages where I could present each product feature, nor lengthy, beautifully animated one-pagers. The solution has to be simple and compact, so I decided to make modals that pop up when you click on a given "feature", which easily allow you to familiarize yourself with all the product details.
I am particularly pleased with how this solution works on any type of device. What's more, it allows you to create variety in the layout by placing the lead photo in different places. For mobile devices, I've edited the CSS in such a way that closing each feature is done via a button directly under the thumb, which makes closing the tabs quite convenient.
Getting out of
the comfort zone
& leraning Blender.
After rendering a few donuts and anvils and mastering the basics with Andrew Price (aka blender guru), I decided I was ready to throw myself into the deep end. For the project, I created a few office models (to build diversity) and populated them with a bunch of different assets I managed to find on the Internet (after all, it's not likely that I'd waste my time modeling monitors, keyboards or chairs, which you can actually find plenty on the Internet). The snag was that, for the most part anyway, the texturing and proper scaling and optimization of the models had to be done by me, which I didn't mind at all, especially since each space was supposed to have a different color scheme and character, matching the aesthetics found on the presented mats and mouse pads. What's more, I created the material for the mats themselves in Substance Materials, which allowed me to reproduce the reality very accurately. The whole thing took about 2-3 weeks, but I'm incredibly proud, as many looking at these renders are convinced that these are professionally taken photos. It was definitely worth it!
It's the little
things...
A simple solution that alows users to search anywhere on the website. Search by product, name, product id, collection or keyword. After inserting a couple of chars, you can take your pick from the dropdown list. If there's only one match you'll be redirected to the product page, otherwise the SRP is displayed and you can sort and filter your results there.
The Boring Stuff.
A simple solution that alows users to search anywhere on the website. Search by product, name, product id, collection or keyword. After inserting a couple of chars, you can take your pick from the dropdown list. If there's only one match you'll be redirected to the product page, otherwise the SRP is displayed and you can sort and filter your results there.
