Interactive Design: Project 1- Landing Page Design

on

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

LECTURES:

Completed in Exercises blog


INSTRUCTIONS:



Project 1: Landing Page Design

1. Research

While I was looking for websites to redesign, I thought about doing a baking or pastry website. Since bento cakes are quite popular nowadays, I was wondering if there are any existing websites for it. I came across this website called "Bento Cake Burglar" (https://www.bentocakeburglar.com/) and thought that the colours and cakes look really good. 

Fig. 1.1 Bento Cake Burglar's Website

2. Moodboard

After finalising on the website I want to redesign, I then studied the contents and components used in their design and listed them out. I also have an inspoboard where I put all the interesting web designs that I found that is suitable for a bakery website. 

Fig. 2.1 Moodboard

Fig. 2.2 Inspoboard

3. Wireframes

We also had to come up with a minimum of 20 wireframe sketches for the layout of our landing page. I initially thought it was challenging to come up with 20 wireframes, but quite a lot of them are just different ways of placing the components and items.

Fig. 3.1 20 Wireframes

4. Landing Page Design

For my first attempt in redesigning the website, I mainly kept the colours almost similar and included more images of the cakes as well as a clear navigation bar on top. I also included some waves to give a more fun and friendly vibe as well.

Fig. 4.1 First Attempt at Landing Page Design

After some reconsideration, I realised that some parts of the design will be very difficult to code. Hence, I revised my design and removed the waves and also kept the design a lot more simpler.

Fig. 4.2 Revised Version of Landing Page Design


FINAL OUTCOME

Fig. 5.1 Final Landing Page Design


FEEDBACKS

Week 4
- Try to choose the layout wireframe that is more unique

Week 5
- Pay more attention to alignment because it is really important in a web design
- Try to improve on the "About our cakes" section and also the "Review" section
REFLECTION

While designing for a webpage, I realised that we need to do a lot of research and study on existing websites. Because I am so used to designing for social media posts and infographic posters, I tend to overload my web design the same way like I would want to make my posters interesting. However, I realised that for a web design to work effectively, the simpler the better. Everything looks so much neater in my final revised version and the information is really straightforward and easy to navigate. I guess it really takes time and practice to know what is good and what is bad for a web design. Nevertheless, I would say that it was a good learning experience for me and I am sure it will only get easier and more bearable in the latest projects to come.

Comments

Post a Comment