Interactive Design Project 3

Eric Chang (0378298)

Bachelor Of Design in Creative Media

Interactive Design

---

Instruction:

---

Project 3:

For the final project, we are asked to come up with a working website. For the design we need to follow the prototype that we created on the previous project 2, lastly we need to make it responsive.

For this part I started with the contact page first since it is the easiest one compared to the other pages. And also because there's a lot of website that shares on how to create a working form, we just need to copy and paste the code and make some adjustment that we needed.

Fig 1.0 Contact Page Progress

Fig 1.1 Contact Page

After the contact page is done, I moved on to create the homepage of the website, i decided to follow the prototype that i created on figma without creating a major difference. Overall, I tried my best to replicate the prototype that was created on figma.

Fig 1.2 Coding Progress 2

And below are the final design for the homepage, Overall i tried my best to make the website clear and unclustered. Mr.Shamsul said that we should not be worry if our website looks simple because it means that the information can be presented clearly.

Fig 1.3 Homepage

The next page is the "About us" page, which contains the history and awards of this company, For this page i decided to do it differently from my prototype on figma. This is because the prototype that I previously created isn't do-able, and so Mr. Shamsul also agreed that i changed the design for this page.

For this page I was at first confused on how to do it, because the original website itself doesn't contain a lot of information, So i tried my best to fill it up with some information, looking for the highlight and selecting the relevant information for the webpage.

Fig 1.4 Coding Progress for the about page

And Below are my final output for the about page:

Overall, I'm happy with the results of the about us page, although it might be not good enough for some people, but i this as a first timer doing a web design. I am pretty satisfied with the results.

Fig 1.5 About Page Results

I Decided to make it very simple and used a simple black background for all my pages, this is because i wanted the information to be fully visible, and i think by having a background other than solid color would slightly make the information harder to read.

Next is the personal trainer page, I decided to create this page because there's no more page that i can do. In fact this page wasn't even available on the original website.

Fig 1.6 Coding Progress

I decided to make this website similar to the homepage website, to make it more consistent.

Fig 1.7 Personal Trainer page

Lastly is the knowledge page, this is the hardest part of the website, simply because theres too many cards (grids), However i managed to do it after looking up on W3schools on how to make grid, and learn the css on how to arrange it.

1.8 Knowledge Page Coding Progress

Fig 1.9 Knowledge page results

CSS Progress:

After We've done the coding part off-course we need to style it using .CSS. arranging the website layout is not my favorite thing to do, Although it was fun it was also time consuming.

Fig 2.0 CSS Progress

We also need to make the website responsive, and this is the hardest part of this Task, this is because different devices have different resolution, so we cant create a one solution for all of the devices.

For the responsiveness of the website, this is where i think i didn't do a great job, however I am not a fast learner as well. So in the end i have to sacrifice this part because I didn't have a lot of time left on this semester (I need to do the final project on other subject as well). So i tried my best to make it responsive.

And After a lot of trial and error, below are the links for my final website:

Website

During this project, I wasn't sure that i was able to do it in the time that's given, This is because I understand that coding is kinda hard and for some people it would take them more than 5 weeks to learn. However thank to the technological advancement that we have we are able to utilize AI to help us.

Although Sometimes AI produces the results that I didn't like, AI provided a major help during my time doing this final project, Personally I look at AI as my companion rather than a technology that replaces me.

Overall, I enjoyed my time studying this module, although sometimes there are ups and down, especially on the final project i enjoyed doing it. and i can't wait to learn the advanced interactive design (cause im taking UI/UX). Hopefully since its more focused to my specialization. I can produce a better work, since the time management should be better (hopefully).