How to design User Interface using Sketch for an online responsive car hire website
Intro: How to design User Interface using Sketch for an online responsive car hire website
with barnabasnagy|12 years experience
14959views
Intro: How to design User Interface using Sketch for an online responsive car hire website
Sep 27, 2018 | 12:00 AM4:2
Session 1: Project setup with Material design principles
Sep 27, 2018 | 1:00 AM52:44
Session 2: Designing the accordion step 1
Sep 27, 2018 | 2:00 AM58:44
Session 3: Continuing on accordion step 2 and working on closed states
Sep 27, 2018 | 3:00 AM59:34
Session 4: Dropoff location and date and car selection modules
Sep 27, 2018 | 4:00 AM59:47
Session 5: Enhancing the car selector and the Pick-up location modules
Sep 27, 2018 | 5:00 AM59:36
Session 6: Adding a calendar and designing the insurance module
Sep 27, 2018 | 6:00 AM56:42
Session 7: Hero image design
Sep 27, 2018 | 7:00 AM35:20
How to design User Interface using Sketch for an online responsive car hire website
- English
- Design
UX design- 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.
Overview
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