How to design the UI of an ecommerce fashion store using Sketch

How to design the UI of an ecommerce fashion store using Sketch

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

In this project we are going to design a responsive e-commerce fashion store with the Material design principles, using the Sketch Material theme editor. Our focus will be to design a modern and feminine clean UI.

Overview

Project Introduction:

This tutorial will go through the process of designing the UI of an e-commerce fashion clothing 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 page.

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 the color theme with the material theme editor
  • Header and footer design
  • Dropdown navigation

Session 2: Homepage content

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

Session 3: Category listing page setup

  • Using wireframes to find the right grid
  • Adding star rating
  • Adding price tag
  • Adding discount tag

Session 4: Category listing page design

  • Filter and sorting desktop
  • Adding new icon to the theme editor
  • Chips: filters and choice fields
  • Price and size slider

Session 5: Filtration and details page

  • Filter and sorting on mobile
  • Linking screen for Drop-down effect
  • Using product listing card for details page
  • Adding thumbnails

Session 6: Finishing the details page

  • Size and color selector
  • Mobile design
  • Lightbox on desktop
  • Creating a lightbox and thumbnails prototype

Session 7: Cart page design

  • Adjusting pieces in the cart
  • Creating a summary box
  • Linking the screens and finalizing the prototype

Reviews

Average rating

4(546 Reviews)