Interactive Design // Project 1

16.09.22 - 06.10.22 (Week 3- Week 6 ) 

Emelyne How Sok Hing (0352938) 

Bachelor of Design (Hons) Creative Media 

Interactive Design // Project 1

---

LECTURES

Week 3: 

Landing Page Design

A landing page is a distinct page on your website that's built for one single conversion objective. A landing page should be designed, written, and developed with one business goal in mind.

---

INSTRUCTIONS

Project 1 - Landing Page Design 

We are to create a static landing page on a website based on the topic of our choice. 

Topic (Fansite): IU (Singer) 

Target audience: 

People who would like to know more about IU whether it be kids, teenagers or adults. Additionally, it is a page for fanatics of IU. 

Purpose of the website: To promote and encourage people to stream her music. 

Font to use: Playfair Display 

Research

Website that I took as inspiration: 

- https://dyotanya.com/en

- https://huyml.co/about.html

- https://www.tplh.net/who-i-am/

Moodboard (Visual Reference, Colour Palette, Font Choice) :

Sources of images: Pinterest 

Figure 1.0 Moodboard & Colour Palette Reference, 16th September 2022

Figure 1.1 Layout Reference, 16th September 2022

For my visual references, I surfed the web and specifically Pinterest since on this site there is an abundant amount of examples for us to refer too. For my layout design I wanted to go with something minimalistic, clean, sharp and harmonious. As for my colour palette, since I was referring to the K-pop artist IU, I tried to stick with the image that she gives off as an idol. She often uses pastel colours in her videos or even album covers and since I am a big fan of pastel colours, I wanted to incorporate that into my work. 

Sketches

To sketch out wireframes for the landing page design, I used the app 'Figma' so as to create and put the  ideas in my head into practice. After more than 2 hours, this is what I came up with. The images below are a compilation of all the ideas that I had for this exercise concerning the layout part. We were also told that during the process we should focus mostly on the hierarchy, layout and balance and try not to focus too much on what colours we would want to choose for now.

Figure 1.2 Wireframe Sketches, 18th September 2022

Figure 1.3 Wireframe Sketches, 18th September 2022

Figure 1.4 Wireframe Sketches, 18th September 2022

Week 4: 

After receiving Mr. Shamsul's feedbacks, I chose to go with my wireframe sketch number 15 as I believe this was the one that looked most promising. Additionally, I feel like this layout style was pretty close to what I had in mind and wanted to do. 

Figure 1.5 Final Wireframe Sketch, 22nd September 2022

Additionally, I choose my colour palette for the wireframes which consist of soft, muted colours as it matches with the theme that I wanted to go with but also the pictures that I have decided to use for my webpage. 

Figure 1.6 Colour Palette, 22nd September 2022

Below are the pictures that I have chosen from the internet to use for my landing page design. 

Source: Pinterest 

Figure 1.7 Pictures used for the landing page design, 22nd September 2022

Week 5: 
Final Task Submission - Project 1 (Before feedbacks)

Figure 1.8 Final Wireframe 1 'Navigation page', 2nd October 2022

Figure 1.9 Final Wireframe 2 'About me page'. 2nd October 2022

Figure 2.0 Final Wireframe 3 'Discography page', 2nd October 2022

Figure 2.1 Final Wireframe 4 'Footer', 2nd October 2022

Figure 2.2 Final Wireframe, 2nd October 2022

Figure 2.3 PDF of Final Wireframe, 2nd October 2022

Link for Google Slides https://docs.google.com/presentation/d/1KU5IAiibS1UkLSEK6Xb2KvJy0GJzN42EAhqjC2NtEfc/edit?usp=sharing

For my landing page design, I wanted to go with something that could reflect IU's personality and aesthetic but also my style as well. My goal was to create a design that looked refined, simple, clean and soft. I wanted something which would look easy on the eyes and would be facile to use and understand for the users. 

Final Task Submission - Project 1 (After feedbacks)

The feedbacks that were given to me were to replace the home button with the logo that I made. Increase the space between the navigation bar and the top. Make sure the space is consistent. Decrease the size of the carousel. Put a call to action button. Concerning the text, do left alignment and rearrange them since there is an awkward space. 

Figure 2.4 Landing Page (After Feedback), 4th November 2022

Figure 2.5 Landing Page (After Feedbacks) PDF, 4th November 2022

---

FEEDBACKS

Week 5: 

Special feedback: I was told to use my sketch number 15 as my final layout.

Week 9:

Replace the home button with the logo that I made. Increase the space between the navigation bar and the top. Make sure the space is consistent. Decrease the size of the carousel. Put a call to action button. Concerning the text, do left alignment and rearrange them since there is an awkward space. 

---

REFLECTIONS

Honestly when I learned that we would had to do a landing page, I did not really understand what it meant and was a bit confused and obviously since it was not clear in my mind, I felt stressed about it. However, after making some research on the internet and looking at what our lecturer gave to us to refer as examples, I felt a bit more confident. Doing the sketches was really taxing since we were asked to do a lot and sometimes it felt like I was lacking of inspiration since I was trying not to repeat the same layouts for every sketches. Designing the page took quite a while but was quite fun to do as well. However, I cannot deny that my perfectionist side was getting triggered a lot when it came to aligning the text, lines, images and so on. I found out that doing a landing page requires for us to do a lot of research and refer to other designers' layouts; not to copy and do the exact same thing but more like to understand how a good landing page is made.