Looking to create a website for an online shop? The sales success and usability of an e-commerce website hinges on an effective design.
But where to begin? Here, discover a quick and simple six-step blueprint for designing an e-commerce site that leads your visitors efficiently and elegantly from homepage to basket to sale.
Pick up tips for designing a homepage that gives your visitors a great first impression, optimizing your product catalogs to make them easy to navigate, and creating product pages that guarantee an “Add to Basket” click.
Consider this your ultimate guide for creating any product-focused ecommerce site, whether it’s for fashion, furniture, food, or beauty.
Photos used in the site designs throughout this article are by contributor Ekateryna Zubal.
How to Create Your Ecommerce Site Map
Your first task when designing a site for ecommerce is to create a site map. This can be as simple as a hand-drawn sequence of wireframe sketches, or mocked-up visuals of the pages using a program like Adobe Photoshop. Whether you’re working with a developer to realize the site, or are intending to code the site yourself, a simple site map is a good foundation for any web design project.
The UX pathway of ecommerce sites tends to be very simple. After all, your intention should be to move users as quickly as possible towards a sale.
Having analyzed a wide range of e-commerce websites, I have found that most abide to this simple six-step sequence of pages. My site map for the fictional site Linen Co. reflects this sequence, beginning at the homepage and moving on to featured products (which sits below the fold on the homepage), category catalog (e.g. Women’s Dresses), product page, basket (or cart) page, and thank you page.
How to Design Templates for Each Page of Your Ecommerce Site
Once you have your site map sketched out, you can use it as a blueprint for fleshing out the design of the templates for each of the six page types.
Keep in mind that many users will access your site using a mobile device, so it’s important to design a layout for both mobile and desktop screens.
- For tablets, you could design with the iPad “break width” in mind. This is the point at which a scrollable layout pushes content below the page break. This is 768 px for iPads.
- For iPhones, and as a general rule of thumb for other mobile devices, this is 375 px.
- The example layouts below are designed with a desktop or laptop screen in mind, with the designs drafted in Photoshop and set to a width of 1400 px. Paired with a 900 px page height, this will provide you with a layout and resolution that fits the ratio of most desktop and laptop screens.
For a 1400 px width screen, web designers advise sticking to a maximum width of 1280 px for the main content container. This ensures that content doesn’t become too stretched, even on larger screen widths.
It’s also a good idea to split your page designs into columns, which is how a web developer would structure a page layout.
With that in mind, you can section out a 1280 px central container on a 1440 px wide page, before splitting the 1280 px section into 12 columns, with a 30 px gutter, as I’ve done here to create the templates for this website.
Once you have your page layout sectioned into columns, you can start to draft the designs for each page. Read on to discover tips for making the most of each type of page in your ecommerce site, from landing page to basket.
While some users may arrive directly onto a product page from sites like Google Shopping, Lyst, or Pinterest, others are likely to land on the homepage as their first entry point.
The homepage of your e-commerce site should introduce customers to the shop brand, as well as entice them into exploring the site further. Full-width, dramatic photography is an effective way of making the homepage feel more immersive, and the business’ logo should be a prominent element of the design. Place it in the header or on the main body of the page.
The homepage should also be the starting point of an effective user journey, directing the user quickly to key menu items, featured products, and search.
Create a layer that shows how a drop-down or pop-out menu will appear in your layout. This will help you assess how many columns you will need in your menu. It will also show you how large the text should appear on menu categories and sub-categories, helping you to create the basis of H1 and H2 formatting.
The Featured Products Page
Most ecommerce sites need to appear fresh and up-to-date for their customers. Giving prominence to featured or seasonal products can help the shop feel relevant and exciting, especially for returning customers.
You might choose to highlight a featured product or collection on the homepage, encouraging customers to click to access a page devoted to that particular product range. Alternatively, you can encourage users to scroll down past the “fold” of the homepage to view a scrolling catalog of featured products.
Using arrows or hover-over effects helps to encourage scrolling, while buttons or underlined text (e.g. “Shop Now,” or “View the New Collection“) entice users to click.
The Category and Sub-Category Page
A category represents a group of related products, e.g. “Menswear.” Within this, there are subcategories, such as “Trousers,” “Accessories,” etc.
The templates for both category and subcategory pages can be based around the same layout design, which will be a variation on a checkerboard design. You might want to make some image previews larger, allowing them to span two columns, while others occupy one column only. For a Pinterest-inspired style, vary the heights of images to create a jaunty baseline and “broken” rows.
In this case, I’ve opted for a very simple uniform layout, with portrait-oriented images to allow for tall shots of the items of clothing.
In a new layer, I create a visual of the hover effect by placing a partially-opaque block of color, a product name, and price over the top of one of the images.
The Product Page
The product page is arguably the most important page design on your e-commerce site. This is because the page is the equivalent of a sales pitch, with the goal to persuade the customer to click Add to Cart.
Large-scale, beautifully photographed product images that show a range of angles and closeups of materials and colors will go a long way to help you clinch a sale. Clear product descriptions, color options, and stock or size availability also help to make for a smoother shopping experience.
The “Add to Cart” button should be prominent and compelling. You don’t need to use aggressively bright colors, but a border and slightly larger text will subtly nudge users in the right direction.
The Basket Page
Once users have added an item to their basket (also called the “cart”), you can encourage them to “Keep Shopping” or “Go to Cart.”
E-commerce sites that are focused on low-value products might make the “Keep Shopping” pathway a more prominent part of the UX experience. Use buttons, “Free delivery over $x,” and coupon code banners to encourage users to add more items to their basket.
Alternatively, for a higher-value product such as a luxury or large item, you might feel it’s more important to encourage the user to buy the product right away, not allowing them time to change their mind.
Transform the “Add to Cart” button on the product page to a “Go to Cart/Basket” instruction and use a contrasting color or a larger font size to draw attention to it.
This will lead the user to the Basket page, which summarizes the order, lists delivery costs, and gives the user an opportunity to use a coupon code.
The checkout button is all-important. Use a prominent button in a contrasting color to draw the eye away from the cost of the product to actually completing the sale.
The Thank You Page
The final page in the UX pathway for most e-commerce sites is a simple “Thank You” page.
This is a functional page that reassures the customer their purchase has been successful. This is a good place to remind users that an order confirmation will be sent to the email address they provided, as well as prompt users to view the order in their online account.
To complete the UX loop, add a call-to-action that directs users to continue browsing. Leading them back to the homepage or featured products is a good way to keep customers on your site for a little longer.
Conclusion: 6 Steps for Creating an Effective E-commerce Site Design
In this article we’ve looked at how you can map out a simple and effective e-commerce website by focusing on designing six page templates, leading your visitors from homepage to a completed sale.
Now you have your template designs in place, you can use these as a foundation for developing your website. You can either hand these designs over to a web developer or use the templates as a basis for coding your own site design.
Once the six page templates are ready, you can use the same design elements in other touch points used in your user’s journey on the site. Follow the same path for creating email templates, from one-off promotional emails to invoice emails sent upon purchasing on the site.
For e-commerce websites, the initial goal is always to lead a user quickly and easily towards a sale. But, that doesn’t mean that style should be sacrificed for functionality. Immersive photography, beautiful typography, and on-trend color schemes all help to make your site more aspirational and memorable, prompting more users to make a return visit.
Looking for more website design tips? Don’t miss these articles and tutorials that cover everything from creating wireframes to choosing web-friendly color schemes:
- How to Design a Website: 10 Golden Rules for Beginners
- 8 Email Newsletter Design Mistakes Small Business Owners Should Avoid
- A Practical Guide for Visual Website Design
- Simple Website Layout Design Tips Anyone Can Follow
- Black Backgrounds on Websites: How to Do It Right
Cover image adapted from image by contributor Mallmo.