Interactive Design Project 1: Landing Page Design

29/05/2022 - 11/06/2022 (Week 10- Week 11)
Evaleez Voo Lian Yun / 0350275
Interactive Design / Bachelor of Design (Hons) in Creative Media
Project 1: Landing Page Design

---

Instructions

---

Task

This is the start of the final project. The first thing Mr Shamsul told us to do was to choose a topic to base the website on. My ambition is to work in Hoyoverse (and get my money back). So, I decided to choose a new game launch as my website topic. 

After choosing the topic, we were tasked with creating wirreframes for the website which included the landing page and 4 other pages in total.

Wireframe Design 1

 

Wireframe Design 2

After getting feedback from the lecturer on which parts to improve I finalised the static landing page design in Adobe Illustrator. For the game choice, I decide to go for an open-world action RPG set in a dystopian world in the future. 

Fig x.x Static Landing Page Process (03/06/22)

Websites I used as references:

• https://genshin.hoyoverse.com/en/
• https://hlr.163.com/
• https://hsr.hoyoverse.com/en-us

Fonts Used:

• Heading 1: Kdam Thmor Pro Regular
• Heading 2: ZCOOL QingKe HuangYou Regular
• Body: Overlock SC

Photography Credits:

• Jonathan Formento
• Mikhail Nilov
• cottonbro

Colour Scheme:

Fig 1.0 Colour Scheme 1 (03/06/22)

Fig 1.1 Colour Scheme 2 (03/06/22)

---

Final Output

---

Feedback

• If you're using rounds in your cards, make sure the entire website uses rounded curves.
• If you're using angular shapes, make sure the entire website uses angular shapes.

---

Reflection

This project was so fun. I loved incorparating the futuristic dystopian theme into my work. Besides that the colours are just magnificent. As much as I like this, I did face some hurdles too. For example, I didn't really understand what a wireframe was at first, and ended up doing things wrongly. However, after the feedback session and referencing what my peers had created, I understood it more. 

One thing I'd like to add is a big kudos to Mikhail Nilov, he had a whole collection of cyberpunk themed photoshoots in his Pexel account which made finding photos really easy.