Visit LEDU token page

How to design the UI of an E-commerce furniture website with Sketch

How to design the UI of an E-commerce furniture website with Sketch

  • English
  • Design
  • UX designUX design
  • (1497)
  • Project length: 6h 23m

In this project, we are going to design a responsive E-commerce furniture store with the Material design principles. We will focus on designing a clean and modern interface that even your grandma could use!

Overview

Project Introduction:

This tutorial will go through the process of designing the UI of an E-commerce furniture store using Sketch. The tutorial will focus on creating a clean, modern UI design. First, we’ll look at how to set up the project, and then how to design the individual pages starting with the home page. We'll finish off with the cart widget.

What are the requirements?

To get the most out of the tutorial, viewers should have some basic knowledge or understanding of:

  • Sketch
  • UX/UI design principles
  • Website design
  • Mac computer

What is the target audience? Anyone who wishes to learn more about:

  • Sketch
  • UI design
  • UX design principles

Project Outline

Session 1: Project setup

  • Setting up a color theme with a material color tool
  • Setting up material design grid
  • Header and footer design
  • Dropdown navigation for mobile

Session 2: Mobile & Desktop home page design

  • Choosing the right hero image
  • Image masking to fit the brand
  • Adding email capture
  • Linking screens to create the dropdown effect

Session 3: Mobile category landing page design

  • Creating rough wireframes
  • Creating a template product
  • Adding filter and sorting
  • Trying 2 column vs 1 column layout
  • Adding price and discount tags
  • Adding pagination

Session 4: Desktop category landing page design

  • Creating rough wireframes
  • Creating a template product
  • Adding filter and sorting
  • Linking screens together to create a prototype

Session 5: Mobile filters and detail page

  • Mobile filters open state
  • Mobile sorting open state

Session 6: Details page

  • Fitting the category listing page item to the details page
  • Adding a swatch selector
  • Linking screens together to create a prototype

Session 7: Store locator

  • Adding a map
  • Adding store locator filters
  • Linking the screens together

Session 8: Search & Cart

  • Adding an open state for search
  • Adding an open cart state

Reviews

Average rating

4(1497 Reviews)