Visit LEDU token page

Designing the future: Electric car dashboard UX design with Axure

Designing the future: Electric car dashboard UX design with Axure

  • English
  • Design
  • UX designUX design
  • (1436)
  • Project length: 6h 18m

In this project, we are going to design an electric car dashboard using Sketch. We will focus on designing a clean and modern interface that could be implemented in a real electric car.

Overview

Project Introduction:

This tutorial will go through the process of designing the UX Wireframes of an electric car dashboard using Axure. The tutorial will focus on creating a great user experience keeping safety in mind as number one priority. First, we’ll look at how to set up the project, and then how to design the individual screens starting with the home screen. We'll finish off with call screen.

What are the requirements?

To get the most out of the tutorial, viewers should have some basic knowledge or understanding of:

  • Axure
  • UX design principles
  • Website design

What is the target audience? Anyone who wishes to learn more about:

  • Axure
  • Wireframes
  • Clickable prototypes
  • UX design principles

Project Outline

Session 1: Project setup

  • Walking through the resource links
  • Explaining the idea behind the redesign
  • Creating a template dashboard item
  • Spacing out the grid
  • Adding more items to the dashboard

Session 2: Home screen design

  • Resizing and rearranging the home screen items
  • Adding a safety belt notification
  • Further iterating the home items

Session 3: Navigation screen design

  • Using the home screen summary for navigation
  • Adding a map image
  • Making the items pop with shadows
  • Creating a dynamic panel to change the destination
  • Adding an image background to the home screen
  • Designing the temperature screen

Session 4: Temperature, Safety belt, Rear cam, Calling screen designs

  • Redesigning the temperature screen
  • Creating the safety belt screen
  • Designing the rear camera view
  • Adding a calling screen for paired phones
  • Adding a dial button and rearranging other buttons

Session 5: Dialpad

  • Finishing the dial pad design
  • Adding a calling now screen
  • Finding avatars for contacts
  • Adding a dialled number above the dial pad
  • Designing the calling now screen for dialled numbers

Session 6: Music screen design

  • Creating a list view
  • Designing a current song view
  • Iterating the design
  • Finding the right album covers
  • Adding previous, pause and next buttons

Session 7: Header design

  • Designing a better header
  • Redesigning the home page
  • Adding header master to all screens

Reviews

Average rating

5(1436 Reviews)