Supermechanical
Designing and building a responsive showcase for Range, the smart thermometer.
Supermechanical are, in their own words, designer-engineers who make everyday objects that connect us. They’re responsible for Twine, the super-cool, 2.7” wifi-enabled home monitoring system. They’re also responsible for the Kickstarter-phenomenon Range, an iOS App-connected smart cooking thermometer.
Leading up to the post-preorder launch of Range, Supermechanical asked me to help them design and build out their product page for Range both to communicate what Range does and also to illustrate just how beautifully simple and well-designed the product is. Leaning heavily on Supermechanical’s striking product photography, I chose to prominently call-out the primary features of the product in a mixture of highly graphical and clear, simple textual full-width sections. By scrolling through these sections, the user is walked through Range‘s unique attributes, varied uses and finally introduced to pricing and the opportunity to purchase.
The page is responsive up from small, portrait oriented smartphone-sized viewports to large desktop-sized browser widths and includes not just layout rearrangements to accomodate differing screensizes, but also changes in photography to reflect the changes in art direction that differing orientations sometimes demand.
To minimize the impact of such a photographically heavy site, the imagery is lazy-loaded in as the user scrolls (with crisp, high-resolution imagery—sized at 1.5x to be both considerate of bandwidth and mindful of hi-DPI Retina-type displays), loaded asynchronously and replacing small file-size, lower-resolution blurred images. Acting as placeholder graphics, the blurred images also provide a small touch of delight as they fade-out, creating a “focusing lens” effect.
Having the opportunity to be involved in content-strategy, messaging, design and front-end build was incredibly rewarding, as was having the opportunity to work with such an awesome team of makers and thinkers as the guys at Supermechanical.
Credits
Art Direction: Joel Parr & John Kestner (Supermechanical)
Writing: John Kestner (Supermechanical)
Photography: David Clift-Reaves (Supermechanical)
Design: Joel Parr
Development: Joel Parr