Interactive Design: Project 2- Working Landing Page

on

21/10/2022- 28/10/2022 / Week 8- Week 9
Chuah Kwai Pin / 0348376
Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University 
Project 2- Working Landing Page

LECTURES:

Completed in Exercises blog


INSTRUCTIONS:



Project 2: Working Landing Page

Breakdown of landing page

1. Navigation

Consists of search bar, Bento Cake Burglar's logo, login button, cart and also a navigation bar that brings users to view more about custom cakes, gourmet flavours and their special bakes.

Fig. 1.1 Navigation 

Fig. 1.2 Screenshot of HTML and Bootstrap 


Fig. 1.3 Screenshot of CSS stylesheet

2. Custom Cake Carousel

Carousel to show the 3 different types of custom cakes that users can order which are lettering, designer and expression. It also has the call-to-action button which says "Customise your own now!"

Fig. 2.1 Custom Bento Cake 


Fig. 2.2 Screenshot of HTML and Bootstrap 

Fig. 2.3 Screenshot of CSS stylesheet


3. About Our Cakes

Consists of images of cakes inside cards that describe and provide information about the cakes sold. 

Fig. 3.1 About Our Cakes 


Fig. 3.2 Screenshot of HTML and Bootstrap 

Fig. 2.3 Screenshot of CSS stylesheet


4. Gourmet Flavours

Consists of pictures of the gourmet flavour cakes and also a secondary button that leads users to the gourmet flavours page to view more.

Fig. 4.1 Gourmet Flavours

Fig. 4.2 Screenshot of HTML and Bootstrap 

Fig. 4.3 Screenshot of CSS stylesheet

5. Customer Reviews

Consists of cards that show pictures of cakes and also popular comments from customers that have made their purchase from this store. Initially, I wanted to make it into a card carousel, but because I already have a carousel at the top, making the review section in the carousel does not work. Hence, I had to go with the cards option.


Fig. 5.1 Customer Reviews

Fig. 5.2 Screenshot of HTML and Bootstrap 


Fig. 5.3 Screenshot of CSS stylesheet

5. Footer

Consists of a form that users can fill in with their name, email address and any message they would like to leave for the admin. There is also the shop's social media information such as Facebook, Instagram, Whatsapp and also E-mail. By clicking on it, it will link the users to the respective websites. Lastly, there is also a copyright claim at the bottom.

Fig. 6.1 Footer

Fig. 6.2 Screenshot of HTML and Bootstrap 

Fig. 6.3 Screenshot of CSS stylesheet

FINAL OUTCOME


FEEDBACKS

Week 13
- This layout looks a lot better than the first design
- Remove the horizontal scroll bar at the bottom
- Can try to search for modal bootstraps and copy the javascript
- Look for a card carousel as well if it works for the reviews section

REFLECTION

After learning about bootstrap in Week 11, it really made coding slightly easier because we can now just copy and paste the component's code and change it based on what we have to include. It was a little nerve-wrecking while doing this landing page design as well because I did face quite a lot challenges which was trying to get layout the way I wanted it to be. I think I spent most of my time trying to fix errors and figure out what when wrong in my html code and CSS stylesheet. Honestly, that feeling of solving a problem has never felt so good before until I did this assignment.

Comments

Post a Comment