Here’s a toast to the brand new year and excellent sites that know how to showcase their products in their best light. Add these ideas to your wishlist!
Designs of the Week
Search Optimized, Turn-Key Designs, Unlimited Everything. Start building with the Genesis Framework today.
The landing graphic is one of a wallet spinning on a string, using several images to produce the effect. The appearance mimics the logo, which is clever. The shop is located below, and scrolling to it bumps the logo up to a fixed position on a navigation ribbon containing the cart status. Product names and prices are hidden from view until you hover, keeping the page neat and elegant by focusing on the photos.
I like the inline quick view (something usually done in modal dialogs). The toolbar items also look wonderful though the search box could use a touch of contrast.
Like the other site, no labels here until hover either, although the tool tips produce horizontal scrollbars if they’re too near the edges. Also similarly, the light brown background on a tidy grid of images reinforces the vintage era these products hail from.
Love the idea of “hanging” the ties at the top as categories. The menu also has visual fly-out dialogs, from circular color swatches to zoomed-in fabric swatches. On the product page, each nicely-styled tie spec has popup descriptions and helpful tips to figure out which one to choose.
More bento navigation over here, all the way to the product pages. The top area stays fixed as you scroll down and adds to the “hiding” effect of the cut-off images. The dot on the top right of each box shows the color of the product.
I think having a colorful collection really helps with the overall design of a shop site. I like the hover choice here, showing how it fits on a person. Unfortunately there’s no pricing or any other product info here, but even if it this were more of a catalog site, I’d have wanted to know that as a potential customer.
Social Media Weekly
Create unique, extraordinary websites with Squarespace. No experience necessary!
Optimization – Progressive jpegs: a new best practice
“Appearing faster is being faster, and perceived speed is more important that actual speed.”
User Experience, Interaction Design – What Jerry Seinfeld can teach us about interaction design
“Craftsmanship is knowing that the details matter and that getting them just right is the difference between good and great.”
CSS – All you need to know about CSS Transitions
“Letting the browser control animations sequences allows it to optimize performance and efficiency by altering the frame rate, minimizing paints and offloading some of the work to the GPU.”
JavaScript – Visual Event
“I’ve put together a Javascript bookmarklet called Visual Event which visually shows the elements on a page that have events subscribed to them, what those events are and the function that the event would run when triggered.”
CSS – In search of the perfect radius
“Had you ever had to design such a button or in general, a rounded rectangle nested inside another rounded rectangle and wondered what should be the inner radius for a given outer radius or vice versa? That is what we’re going to find out.”
