Visit LEDU token page

How to design User Interface using Sketch for an online responsive car hire website

How to design User Interface using Sketch for an online responsive car hire website

  • English
  • Design
  • UX designUX design
  • (1484)
  • Project length: 6h 26m

In this project we are going to design a responsive car hire website with the Material design principles, using the Sketch Material theme editor. Car rental is usually done on multiple pages but on this project, we will create a One-page accordion experience.


Project Introduction:

This tutorial will go through the process of designing the UI of a car hire website 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 accordion steps starting with first step. We'll finish off with the last step of the accordion.

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 with Material design principles

  • Setting up project defaults with Material design principles
  • Header & footer design
  • Desktop & mobile skeleton
  • Mobile Drop-down navigation

Session 2: Designing the accordion step 1

  • Pick-up location and date desktop

Session 3: Continuing the accordion step 2 and working on closed states

  • Pick-up location and date mobile
  • Accordion closed states
  • Color palette changes with the material theme editor
  • Linking the screens together

Session 4: Drop-off location and date and car selection modules

  • Drop-off location and date on desktop and mobile
  • Car selection on desktop and mobile

Session 5: Enhancing the car selector and the Pick-up location modules

  • Car selection mobile
  • Selected car state design
  • Car details speech bubble design
  • Dropdown location list design

Session 6: Adding a calendar and designing the insurance module

  • Mobile Drop-down location list
  • Calendar UI kit
  • Insurance step design

Session 7: Hero image design

  • Designing the hero image to make the page more inspiring


Average rating

5(1484 Reviews)