Interactive Design Project 1 / Prototype Design

27.04.2022 - 04.05.2022 (Week 5 - Week 6)
Chung Jia Xuan / 0346630 / Bachelor of Design in Creative Media
Interactive Design
Project 1 / Prototype Design: Landing Page Design

---

INSTRUCTIONS

For project 1, we are to design a static landing page from topic of our choice. The landing page should be able to communicate to the audience about the sites goal.

Ideation and sketch

Initially, I wanted to create a product website selling car parts. I've done the wireframe but promoting car parts wasn't something I'm interested in doing. So I started to think about what I like and changed my idea to creating a fitness website since I like sports.

Figure 1.1 Initial idea and sketch

Figure 1.2 Final idea and sketch

The wireframes were done in Adobe Illustrator. I was thinking to create a simple and cool design with dark colour background. The call to action is for people to join the fitness centre membership. 

'Facilities' button: To bring the audiences for a tour in the fitness centre

'Classes' button: To search for desired classes

'Pricing' button: To search for prices of gym mmebership and fitness classes

'Contact Us' button: To contact the fitness centre for more information

Prototyping 

Figure 1.3 section 1 - call to action 

Figure 1.4 section 2 - about us

Figure 1.5 section 3 - what we offer

Figure 1.6 section 4 - get in touch

Figure 1.7 section 5 - contact info

I've also added social media icon at the bottom page in the footer to link to the fitness centre social media. 

Final Prototype of Landing Page

Figure 1.8 Final prototype of landing page

Figure 1.9 Final prototype of landing page in PDF

FEEDBACKS

Mr Shamsul said he likes the typefaces of my landing page design. Besides, he reminded me to add the copyrights information at the bottom of the page in the footer.

REFLECTIONS

Throughout this project, I've learned what is a landing page and how to do a prototype of it. The design principles, typography and graphics are equally important to create a good landing page. We have to make good use of margins, layouts composition and colours in orderto design an appropriate and user-friendly landing page.