Feature
Post

Category
Design Focus


Design Focus: Excellent E-commerce Photography

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.

Eastworks Leather

Eastworks Leather

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.

Kershaw Knives

Kershaw Knives

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.

More Rare

More Rare

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.

Skinny Ties

Skinny Ties

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.

AIAIAI

AIAIAI

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.

Olasul

Olasul

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 DesignWhat 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.”

CSSAll 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.”

JavaScriptVisual 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.”


Sorry, comments are closed.