Exercise 1 - 11

Exercise 1 - 11 - student project

 

Exercise 1 

Based on the specifications of the provided brief, I designed a wire-frame for Maynooth Furniture.

Exercise 1 - 11 - image 1 - student project

I also designed a wire-frame for the form of the "Contact Us" page.

Exercise 1 - 11 - image 2 - student project

 

Exercise 2

I added interactivity to the wire-frame, and connected the "Contact Us" button of the Homepage with the form. 

Exercise 1 - 11 - image 3 - student project

The latter lays over the Homepage, and returns to the Homepage once the user clicks anywhere.

Exercise 1 - 11 - image 4 - student project

Exercise 3

In the next steps, as instructed, I designed a page for "Living Room" ideas. 

Exercise 1 - 11 - image 5 - student project

I also designed a page to list product details.

Exercise 1 - 11 - image 6 - student project

In order not to over-comber the user, the "See dimensions" button overlays a new screen over the the product details. 

Exercise 1 - 11 - image 7 - student project

After I designed those pages, I connected them together to create a prototype.

Exercise 1 - 11 - image 8 - student project

Exercise 5

Before starting to design the high fidelity mock-up, I created a mood-board for inspiration.

Exercise 1 - 11 - image 9 - student project

Exercise 6

The colour-pallet for the mock-up was inspired by the Maynooth logo.

Exercise 1 - 11 - image 10 - student project

Exercise 7

I created a character style for the mock-up.

Exercise 1 - 11 - image 11 - student project

Then I started working on the hero-image text, as well, as the nav-bar.

Exercise 1 - 11 - image 12 - student project

 Exercise 8

I designed 3 custom icons (Store Locator, Check-out, My Account) for the navigation bar.

Exercise 1 - 11 - image 13 - student project

 

Exercise 9

I designed a 3-paged mock-up for the Homepage, Living-room, Product-page, sections.

Exercise 1 - 11 - image 14 - student project

Exercise 1 - 11 - image 15 - student project

Exercise 1 - 11 - image 16 - student project

 

Exercise 10

Based on the website mock-up, I designed the 3 pages for mobile.

Exercise 1 - 11 - image 17 - student project

Exercise 1 - 11 - image 18 - student project

Exercise 1 - 11 - image 19 - student project

Exercise 1 - 11 - image 20 - student project

Exercise 1 - 11 - image 21 - student project

 

Exercise 11

I added 3 micro-interactions to the mobile mock-up.

Exercise 1 - 11 - image 22 - student project