Designing an eCommerce Portfolio

In this tutorial series follow Adi Purdila as he explains how to design a minimal eCommerce theme in Sketch. You’ll not only learn the proper structure of an eCommerce website, but you’ll also get some cool Sketch tips and tricks to improve your workflow.

In the end, you’ll have put together an “eCommerce Portfolio” theme design that you can use in your own projects.

Posts in this series

Designing an eCommerce Portfolio: Introduction
In this tutorial series you’ll learn how to design a minimal eCommerce theme in Sketch. You’ll not only learn the proper structure of an eCommerce website,...
Adi Purdila
11 Nov 2015
Web Design
Designing an eCommerce Portfolio: Project Overview
When designing our eCommerce Portfolio, the first step we have to take is to plan the website. What will it do? What’s its purpose? We’ll cover the initial...
Adi Purdila
11 Nov 2015
Web Design
Designing an eCommerce Portfolio: Header and Hero
Our site header should provide the navigation, that’s pretty much its main purpose. Of course, we do have the logo in there as well, and since we’re...
Adi Purdila
16 Nov 2015
Web Design
Designing an eCommerce Portfolio: Store Front and Testimonials
Our theme preview section will give visitors a glimpse of some of the other themes available for purchase. The testimonials will show quotes from people who...
Adi Purdila
19 Nov 2015
Web Design
Designing an eCommerce Portfolio: Support Section and Footer
Support is an important aspect of our selling themes. The people who buy your products will expect you to provide assistance if something goes wrong. That’s...
Adi Purdila
24 Nov 2015
Web Design
Designing an eCommerce Portfolio: the Index Page
The shop index page we’re designing is pretty straightforward. It will show all our products along with filtering, viewing and pagination options. Let’s begin.
Adi Purdila
3 Dec 2015
Web Design
Designing an eCommerce Portfolio: Single Page Description
The content of our product or theme single page will be divided in three tabs: description, reviews and changelog. In this tutorial we’ll design the...
Adi Purdila
10 Dec 2015
Web Design
Designing an eCommerce Portfolio: Reviews and Changelog
The last two tabs in our product single page are “reviews” and “changelog”. They speak for themselves, so let’s jump right into designing them.
Adi Purdila
15 Dec 2015
Web Design
Designing an eCommerce Portfolio: Shopping Cart
Just like in any other eCommerce website, the cart will show a list of the products you wish to buy. Let’s build ours using a simple table layout.
Adi Purdila
18 Dec 2015
Web Design
Designing an eCommerce Portfolio: Begin Checkout
Let’s start designing the checkout pages–and I say “pages” because we have a few different scenarios to deal with. We’ll begin with the case where the user...
Adi Purdila
23 Dec 2015
Web Design
Designing an eCommerce Portfolio: My Account Page
The last page which is related to the shop component of our design is the account page. Here, you’ll be able to see your purchases and also edit the account...
Adi Purdila
29 Dec 2015
Web Design
Designing an eCommerce Portfolio: Timelapse
This has been a pretty epic series! Here’s the whole design process in Sketch, condensed into 30 minutes of timelapsed footage.
Adi Purdila
5 Jan 2016
Web Design