Designing a Smart-meter installation booking microsite with Sketch
Intro: Designing a Smartmeter installation booking microsite with Sketch
with barnabasnagy|12 years experience
12926views
Intro: Designing a Smartmeter installation booking microsite with Sketch
Oct 15, 2018 | 12:00 AM4:53
Session 1: Project setup and desktop home page
Oct 15, 2018 | 1:00 AM51:55
Session 2: Mobile home page
Oct 15, 2018 | 2:00 AM27:41
Session 3: Smartmeter selector
Oct 15, 2018 | 3:00 AM57:17
Session 4: Booking page desktop design
Oct 15, 2018 | 4:00 AM56:50
Session 5: Booking page mobile design
Oct 15, 2018 | 5:00 AM54:41
Session 6 Registration module
Oct 15, 2018 | 6:00 AM55:14
Session 7: Dashboard design
Oct 15, 2018 | 7:00 AM51:44
Session 8: Alert bell dropdown design
Oct 15, 2018 | 8:03 AM11:51
Designing a Smart-meter installation booking microsite with Sketch
- English
- Design
UX design- Project length: 6h 12m
In this project, we are going to design a responsive smart-meter booking journey with the Material design principles using Sketch. 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 a smart-meter booking web app 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 landing page. We'll finish off with the notification area.
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 and desktop home page
- Setting up material design grid
- Designing the header and the footer
- Picking the right hero image
- Adding text and CTA to the hero
Session 2: Mobile home page
- Adding header and footer as symbols
- Creating a drop-down navigation
- Designing the hero promotion
Session 3: Smartmeter selector
- Designing an interstitial login page
- Wireframing the smart-meter selector module
- Designing the smart-meter selector module
- Choosing the right images to fit the offer
- Transposing the desktop design to mobile
Session 4: Booking page desktop design
- Simplifying the booking design
- Designing a simple weekly booking module
- Redesigning the module for a more aesthetically pleasing look and feel
Session 5: Booking page mobile design
- Redoing the smart-meter selector on desktop
- Transposing the booking module to the mobile
- Adding instructions to the booking module
Session 6 Registration module
- Designing the registration module for desktop and mobile
- Adding an instructional video to the booking module
- Creating a logged in mobile dropdown
- Adding a customized notification icon
Session 7: Dashboard design
- Designing the dashboard
- Creating a logged in mobile header
- Designing the alert for resuming the booking
- Finding a chart UI kit and customizing it
Session 8: Alert bell dropdown design
- Designing the dropdown for the notification icon for both mobile and desktop
- Linking the screens and testing the prototype