Shark Drone. Product website

Preview of a few screens of the website.

This project was created for the Figma UI/UX Design Course. The goal was to create an e-commerce purchase flow for a randomly selected product. The flow should include: homepage, product features page, checkout page, and a confirmation page. The confirmation flow should include a simple animation.

Tools: I used Figma and Adobe Illustrator.

I was working on: wireframing, prototyping, mock up creation, high fidelity prototype creation, and illustrations.

Low-fidelity prototype

I started with creating a list of pages I need to design:

I prepared wireframes of those screens and connected them into a low-fidelity prototype.

Preview of wireframes.

I started with wireframing mobile versions of the website. The desktop version will follow.

Colors

Here you will find all the colors that I have used to design this website.

I played with the shades and defined the final colors.

Font

I prepared a few font pairings and chose the one which I like the most: the combination of fonts Oswald and Raleway.

Screenshot of font pairings.

Components

For the first component, I decided to create a navigation. I started with two versions - with an empty basket and a full basket. I also created buttons - CTA button, underlined link, payment button, play button for the video which will be displayed on the homepage.

Here you will find some components that I have used to design this website.

Preview of used components.

High-fidelity prototype

I used selected colors, fonts and components to follow wireframes and create a high-fidelity prototype in Figma.

See the high-fidelity prototype of the mobile version

Screenshot from Figma of the high-fidelity prototype.

Desktop mock up

I adjusted the components a bit and created a desktop version of the homepage.

The project is still in progress. I will continue with preparing the remaining pages for the desktop version and will work on user research.

Mock up of the homepage.