Inspiration

Web design, deconstructed: Etsy’s marketplaces and shops

And how you can make a website with similar designs.

Crafty people of the world, unite! Today, our Sites We Love series takes a bird’s eye (or handmade rustic birdhouse) view of Etsy.

etsy-breakdown-01

Originally launched back in 2005, Etsy has become a dominant worldwide marketplace for those looking to buy and sell handmade, vintage and even some factory-made arts and crafts. Many items are one-of-a-kind.

We’ll take a look at what makes Etsy’s form and function so appealing. Then, we’ll reveal some resources you can use to bring a little bit of Etsy to your own WordPress-powered website. Let’s dig in…

Why we love it

Etsy is a company that really understands their community and the aesthetics of their site reflect that. While the site has an incredible amount of listings, they wisely gave their home page room to breathe. It’s a simple grid layout with colorful product photos. You’ll see your recently viewed products, a gateway to major categories, some curated collections, blog posts and a few promotional pieces. It’s a nice use of space and restraint. A site this large could easily go overboard with home page content.

The white, orange and creamy-beige color scheme is done to near perfection. I’ll admit it now – orange is my favorite color (to the point where my office walls were painted bright orange back in the day). The color can be overwhelming, though (just ask my wife). The design team at Etsy did a fabulous job of sprinkling in the color to bring attention to specific areas, rather than just slapping it all over (like I would have done).

etsy-breakdown-02

Individual category pages are neat and tidy. The category filtering options and product listings feature a white background, while the page itself uses a soft, earthy tone. This makes for a nice contrast that allows important content to stand out. While you may be looking at a page with dozens of product listings, you certainly don’t feel any signs of clutter.

Each individual listing is also a light, airy experience. The product photo is large and pronounced, with buying information neatly boxed off right next door. Beneath are tabs for item details, reviews and policies. There’s also a nice display of thumbnails from the shop’s other listings.

Functionally speaking, Etsy makes great use of an Ajax-powered live search that shows potential searches as you type. But where the site really shines is the ability to filter listings by multiple criteria. Related categories, the shop’s location, item type, price range, item color and ordering options are all available filtering methods. So if you’re looking for orange table linens that cost under $25USD, it’s easy to whittle down your options.

Navigation for a site with so many categories can get tricky. But Etsy features some super user-friendly mega menus to make finding the right category a breeze.

etsy-breakdown-03

In all, Etsy has a lot going for them in terms of creating a beautiful website that is easy to use (not to mention full of unique items, thanks to their community of sellers).

If you’re interested in learning more about Etsy’s design, check out their Medium publication to get an inside peek at their thoughts and methods.

Project Assets

Now that we’ve discovered the home-grown goodness of Etsy, let’s have a look at some WordPress themes and plugins that give out the same good vibes. Plus, we’ll throw in some artwork picks to give your site that crafty feel.

Themes

Makery

etsy-breakdown-04

Makery is billed as a “marketplace” theme for WordPress. It works in conjunction with WooCommerce to allow for an Etsy-style site where users can register and set up their own shop on the front end. The theme as a whole appears to be very-much inspired by Etsy – with similar listing style, product filtering and even the ability to add items to a favorites list. Looks-wise, it provides a similar uncluttered look.

Handmade

etsy-breakdown-05

When used along with WooCommerce, Handmade is a nice choice for bringing some of the Etsy style to your shop. It features that light and minimal feel, along with some advanced product filtering and mega menus that are great for navigating through multiple categories.

Pastel

etsy-breakdown-06

If arts and crafts are your thing, Pastel might just be the theme for you. It features some actual hand-painted design elements in use throughout the theme – giving your site an artsy look. The theme is well-suited for traditional blogs or small business sites. Since Pastel also supports WooCommerce, you’ll be able to sell your works of art in that all-natural, Etsy way.

Plugins

WooBooster

etsy-breakdown-07

WooBooster will give your WooCommerce shop both an Ajax live search and advanced product filtering capabilities. Each is part of what makes Etsy so easy to use. Your customers will also have the power to compare multiple products.

WooCommerce Search Box

etsy-breakdown-08

If you’re just looking to add live search capability, WooCommerce Search Box is a great choice. The plugin will take your site’s existing search form and turn it into a lighting-quick live search.

Muven Multi Vendor

etsy-breakdown-09

The true power of Etsy is quality of its marketplace. Having great products from talented artisans from all over the world certainly is what makes it all work. Muven Multi Vendor is a plugin that will turn your WooCommerce store into a multi-vendor marketplace. Vendors can apply to sell on your site and manage all of their products. You can handle commission payouts automatically through PayPal Adaptive Split Payments.

Design Assets

Beyond the plethora of product listing photos, Etsy is known for its outstanding illustration. They typically use some version of orange/cream color scheme – and very little else. It’s a little bit pop art and a little bit monochromatic in some cases. While it’s a unique style, Envato Elements has a library of vectors that provide a similar feel. With a subscription, Envato Elements will provide you with unlimited downloads and access to thousands of resources for a single monthly fee. Here are a few favorites:

Art Collage Vector Illustration

etsy-breakdown-10

Bicycle Flat Design Vector Isolated

etsy-breakdown-11

Collection of illustration of modern city

etsy-breakdown-12

Make It Your Own

It’s pretty easy to find inspiration in Etsy. Whether it’s their own top-notch design or the incredible array of products for sale, there’s bound to be something to get your creative juices flowing.

While your own website may not encompass the sheer scale of a worldwide marketplace, the more down-to-earth elements like great artwork and design philosophy are well within your reach.

 

More breakdowns of websites we love:


About the Author Eric Karkovack

Eric Karkovack is a web designer with well over a decade of experience. You can visit his business site here. In July 2013, Eric released his first eBook: Your Guide to Becoming a Freelance Web Designer. You can follow his rants on Twitter @karks88.