Im beginning this segment of the project by doing some low-fi mockups on figma. This basically consists of just a layout with no colour or text at the minute. It is good to work with the screens in this way because you can crackdown fully on the actual layout.

I started off with some designs for the home screen, i instantly got drawn to the second design. As i thought that it was laid out far better and it just looks overall neater and more suitable.

Screenshot 2024-10-21 at 17.29.21.png

I then designed some screens for the media section of the project, here is what i came up with for them. Again i thought that the second layout was far better. With it being more presentable and also in the same style as the home screen which is good if i want to keep all of the screens looking consistent.

Screenshot 2024-10-22 at 14.33.57.png

And then here are the screens for the vehicle settings screen, i quite liked the design of the two of the screens but i think that i would rather go for the second one a it gives more space to work with some of the settings and features on the screen.

Screenshot 2024-10-22 at 14.52.43.png

Full Development

After i had done all of these wireframes and also found the correct colours i began to pull it all together and create the final designs for this project. Here are all of the screens.

Home Screen

This is the main home screen for the project, which gives you an overview of your schedule, calendar, weather and also shows you the map and the journey of which you are taking.

Screenshot 2024-11-07 at 11.17.42.png

When clicked on the big map it will bring you to this screen,

Screenshot 2024-11-07 at 11.21.21.png

Here it shows you the journey that you are on and also an overview of the drive aswell as the speed and battery power of the vehicle at the time.

Media Screen