Webdesigntuts+

---

Celebrating Ecommerce Design Posted: 26 Sep 2013 03:29 AM PDT Shopify recently announced the winners of their inaugural Design Awards. With over 150 submissions the judging panel of Jeffrey Zeldman (Founder of A List Apart, and Happy Cog), Tina Roth Eisenberg (Founder of swissmiss, Creative Mornings and Tattly) and Daniel Weinand (Co-founder and Chief Design Officer of Shopify) had their work cut out deciding on a winner. As well as hearing what the judges thought about the top three designs, I thought it would be interesting to examine, both subjectively and objectively, some of the stand out features of each one to see what we can all learn about trends and techniques. Whipping Post Taking the top honours is the Whipping Post designed by Out of the Sandbox. The site, full of guitar accessories and vintage messenger bags from Atlanta-based former musician Ryan Barr, was designed by Brad Miller – an Ottawa-based designer who founded his firm Out of the Sandbox to develop themes for Shopify's ecommerce platform. Hero Image Tina Roth Eisenberg, one of the three judges loved the clean design: Whipping Post is a beauty of an e-commerce store: a clean, well balanced site, beautifully echoing the design of their products. The Whipping + Post site feels thoughtful and intentional: Strong photography, tasteful typography, appropriate white space, as well a beautifully balanced color palette. An e-commerce site should first and foremost celebrate and elevate the products, Whipping + Post does that. Whipping Post does a great job of immersing you into their products from the moment you land on the home page. Big imagery and photography has long been regarded as a vital element of any ecommerce site and the large images utilised on the home page work really well here. The hero image auto transitions, offering the visitor more appealing images of the product range; a simple but highly effective messaging technique. Will this come to replace the overused, at least in my opinion, clickable product carousel? The site is fully responsive and makes use of the popular slide in/off canvas navigation on smaller screen resolutions. This technique is becoming increasingly used and there are a number of plugins that make this easy for front end developers. If you haven’t read it, I also strongly recommend David Bushell’s article on off screen navigation for further inspiration and code examples. Whipping Post off canvas menu Finally, the integration of the cart details sliding in from the right of the viewport is one of the nicest implementations I have seen. For me this is perhaps the nicest feature in the theme, it also works really well on small screens. The Whipping Post cart slides in from the right of the viewport Greats Brand In the runner up spot is Greats Brand designed by Wondersauce. The photography is what set it apart for Daniel Weinand (Co-founder and Chief Design Officer of Shopify): GREATS shows off big images in a catalog grid style fashion. The crisp photography gives me a good sense of the texture and quality. I am immediately drawn in, clicking through handsome footwear, only to see it all beautifully deconstructed on a very focussed product page. GREATS delivers a very well designed and tangible experience (try rotating the shoes). The Greats Brand Home Page This site is really impressive and very well thought out. There’s so much attention to detail and whilst there is a lot of technical expertise on display it doesn’t feel showy. As Daniel mentioned you can rotate the hanging shoes on the product detail page – a nice, if not immediately apparent, feature. Rotate the shoes to see the full view The designers have also made great use of photography for showing the shoes “in action”. The smaller polaroid-esque carousel half way down the product detail page certainly encouraged me to click and see how the shoes look on a real person. Like the Whipping Post site, the layout if fully responsive. For me the showcase page, in terms of how it bends and flexes, is the home page. Well designed overlays which appear on hover also fit in with the overall aesthetic really well. On a side note the Story page is a really nice touch. Not only is the video interview funny but it really makes you appreciate and understand what the two founders are trying to achieve and adds authenticity and a very personal feeling to the brand. I certainly warmed to the founders and left the site wanting to buy their shoes. The Greats Brand Story page adds personality to the brand and site Goodwin and Goodwin Finally, in third position is Goodwin and Goodwin designed by UK agency Goodwin Studio. Goodwin + Goodwin Along with beautiful photography and typography the great product line is well shown in this responsive theme as Jeffrey Zeldman explains: The browsing and shopping experience at Goodwin + Goodwin’s website lives up to the high bar set by the company’s product line. The photography is exquisite; the hierarchy’s clear; the type has been well considered, from the home page, through the category and detail pages, right into the shopping cart. The color palette is neat and warm; and the responsiveness of the layout, if not ground-breaking, is cleanly and elegantly done. Like the other two winning sites, the imagery on the home page really sets the scene and makes you want to find out more about their product range. Letting the products shine is clearly a winner for all three sites and Goodwin and Goodwin is no exception. The Goodwin + Goodwin hero image shows off their products well As with all three sites the theme is fully responsive and the simple, but effective, inner page layouts reduce to a very usable and browsable site. Worthy Mentions Three other notable submissions just missing out on the top three include: Pure Fix Cycles – An online store for fixed gear bike aficionados Sanctuary T Shop – All your tea and brewing needs met Rebel 8 – A brand deeply rooted in skateboard, graffiti, and tattoo culture Conclusions All the winners do one thing really well; showcasing the products they want us to buy. By using big images and showcasing the products in use and in situ it’s easy to see how they might work for us. This is true for shoes, bags and type-related products. The contest has done a lot to highlight the great work being done by freelancers working in the area of ecommerce design, and it’s highly encouraging to see the creativity and innovation taking place in this growing area. You can find out more about the winners of the Shopify Design Awards on the Shopify blog.

You are subscribed to email updates from Webdesigntuts+ To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610