Need some advice on designing an eCommerce site? These 23 eCommerce website design tutorials, videos, articles, and ebooks can help. We’ve selected the below resources based on both their popularity and the quality of the advice, and collected them into one time-saving list so you don’t have to constantly search around. For your convenience, we’ve organized them into the following categories:
- General eCommerce Design
- eCommerce Home Pages
- Product Pages
- Mobile Design
- eCommerce UX
- Designing eCommerce in Photoshop and Illustrator
General eCommerce Design
Revered UX speaker, author, and advisor Paul Boag, gives his advice on eCommerce design 9-part free video class from Skillshare. If you’re a fan of his work, you’ll enjoy the intimate feel of these single-camera classes, which create a coffee-with-a-friend atmosphere. In a little over an hour, he covers topics ranging from switching design specialization, attracting eCommerce clients, reading analytics, improving your clients’ business, and increasing traffic.
Both new and experienced designers will find a lot of useful advice and suggestions in this article, punctuated by screenshot examples from real eCommerce sites. While some of the advice is basic or common knowledge, it’s author Karol K’s take on these conventions, such as explaining image close-up mechanics or using progress bars at checkout, that make this a worthwhile read.
This DIY instructional PDF from GeoTrust explains point-by-point how to build your own eCommerce site from scratch, with helpful tips and reminders tacked into the sidebars. The great thing about this guide is that it gets into the technical details often overlooked, such as choosing an SSL provider and the different types of SSL certificates.
Accounting for site design and beyond, our free ebook works as an all-encompassing guide for improving the returns on your eCommerce site across the board. We cover the process of building an eCommerce brand from the bottom up, including how to carve a niche in your market, best practices for improving growth and traffic, fail-safe tips for SEO, and how to prioritize the best marketing channels.
This roundabout but nonetheless insightful article collects 10 pieces of design advice from a perspective of “what not to do.” Regardless of the catchy and playfully gimmicky format, the advice here is rock-solid, covering areas like taxes and why your shouldn’t over-emphasize security.
eCommerce Home Pages
For those interested in immediately applicable advice, Mohita Nagpal collects 21 practical tactics for eCommerce home pages and illustrates their use through updated screenshots. This piece is great because Nagpal annotates the screenshots to show exactly what she’s talking about and why it works. This, on top of a list of over twenty best practices and inspiring examples.
Smart Insights analyzes what makes the perfect eCommerce home page, taking an empirical approach to the most effective design patterns and practices. If you’re looking for a paint-by-number template for your homepage, this is it — literally, the sections are numbered.
This title is a bit of a misnomer; more accurately, the article lists 17 elements that high-performing eCommerce sites have on their homepage.
This infographic comes from actual data collected by OptiMonk about which elements the homepages on the most successful eCommerce sites have in common. That makes this one of the more reliable tutorials on this list, rather than theoretical advice.
There’s even a list of links at the end to the sites studied, so you can see these elements in action.
Connie Wong’s thorough, 2-part guide draws on statistical evidence from examining the top eCommerce stores. The first part discusses 8 essential elements each product page should have, while the second part teaches you how to arrange them in an optimized layout.
Our Alicia Doiron explains the anatomy of the perfect product page, but what sets this one apart is that she dives deep into the fine details. For example, you’ll learn in-depth advice on DIY product photography, the sales thinking behind the ending a price with “99,” and how to create a sense of urgency to increase a chance of a sale.
When it comes to design advice, Smashing Magazine is one of the most trusted sources on the web. Writer Sabina Idler represents the site’s characteristic high-quality advice with her piece on product pages. Steering clear of generic advice, this article delves into new territories of tactics, such as individuality, humor, and lesser-known methods of making the product seem more valuable.
This article from conversion expert Peep Laja explains how to optimize your cart and checkout process, based on the Fogg Behavior Model. Persuasive Tech Lab research BJ Fogg calculates that user behavior = motivation + ability + triggers. Based on this science, Laja describes how to increase conversions using these parameters.
The checkout is one of the most sensitive areas in eCommerce design, considering how closely linked it is for abandonment. Our article gives an intensive walkthrough of the most effective techniques for optimizing the UX of the checkout process and safeguarding against losing a sale at the last minute. Zach Rutherford gives applicable tips like showing costs upfront, why log in should be optional, and what defines an “easy” checkout.
Another Smashing Magazine piece, this article delivers observations, analysis, and advice on search functionalities for eCommerce. Christian Holst analyzes “the current state” (in 2014) of search features in eCommerce: what’s the norm, what seems to work best, and tips on implementing the proper techniques.
In this article for Econsultancy, Graham Charlton focuses specifically on the site search function, a vital feature for every eCommerce site. His article is straight-to-the-point, with 24 hard-and-fast rules to follow, with screenshot examples and succinct summaries on putting them into practice.
Anthony Blatner covers the technical concerns of setting up a mobile eCommerce app, speaking frankly about payment gateways, payment processors, their frameworks, payment marketplaces, mobile analytics, and app store optimization. He even talks a little about mobile point of sale tools. The highlight of this article is the long lists of links to further resources and actual mobile eCommerce sites to emulate.
Paul Andrew’s list of 9 eCommerce design best practices specifically hone in on mobile sites and apps, but stick mostly to the basics. While veteran designers can skip this one, for those first breaking into mobile design this sets a good foundation.
This comprehensive list of UX best practices offers advice that applies to almost every area of eCommerce design: home pages, navigation, product images, the checkout process, and many more. All 105 tidbits are a single sentence long and organized by category (“home page,” “navigation,” etc.) as dos or don’ts. With over a hundred, even seasoned designers are bound to learn something new.
Agente’s article brings a helpful mix of overview advice and specific direct tips. The content is geared more towards beginners breaking into eCommerce UX, but as a quick read it can be a nice refresher for experts.
As a starter course on the core UX principles that apply to eCommerce, Sonia Chopra Gregory’s piece targets traditional web designers who want to branch into UX. She covers 5 fundamentals and links out to enough statistical sources and further reading options to make it worth reading.
Designing eCommerce in Photoshop
Jerry Virgo’s piece covers a very specific but useful procedure most eCommerce stores have to deal with: isolating products and placing them on a white background. Virgo brings his expert experience to amateurs, explaining the process in simple, easy-to-understand terms and demonstrating his steps through ample screenshots.
Nano Code gives us a 13-part video series full of Photoshop tips specifically for eCommerce website design.
For designers who love Photoshop, Mahmoud Khaled Deiab gives his advice on how to handle standard eCommerce concerns like typography and layout. It may look simplistic and broad, but it’s actually fairly thorough — he cuts straight to the heart of the matter, so that he can cover all the major concerns in as little space as possible.