Designing a Smart-meter installation booking microsite with Sketch

Designing a Smart-meter installation booking microsite with Sketch

  • English
  • Design
  • UX designUX design
  • (1044)
  • 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

Reviews

Average rating

5(1044 Reviews)