Interactive Design - EXERCISES

03/04/2023 - Ending date / Week 1 - Ending week

Glen Owen / 0354952

Interactive Design / Bachelor of Design (Hons) in Creative Media

Taylor's University

---

INSTRUCTION

Fig 1.1 Interactive Design MIB 

EXERCISES

Exercise 1 : Web Analysis Report

    In our first week of the class, we had a simple briefing on how our module will look like for the semester. After Mr. Samsul's done with the briefing, he gave us a group task to analyze 3 good and bad websites. In this case, my group chooses this websites to be analyze in class.

Fig 2.1 https://mmglass.net

Fig 2.2 https://aetherapparel.com

Fig 2.3 https://juo.webflow.io

Fig 2.4 https://www.zarzoubeauty.com

Fig 2.5 https://projectfearless.world

Fig 2.6 https://tuneboss.com/features

Fig 2.7 Website analysis survey sheet (Week 1, 03/04/2023)

    After we are done with our class in the first week, Mr. Shamsul gave us a homework to do which is analyzing websites (again) but this time only 2 websites. He gave us a link for us to find a website to analyze. In my case, I choose https://www.spinxdigital.com and criticaldanger.com for my assignment.

Fig 2.8 SPINX Digital web

Fig 2.9 Critical Danger web

Fig 2.10 Exercise 1 Submission (Week 1, 09/04/2023)

Exercise 2: Website Prototyping

    We were assigned to a group and in 1 hour we have to make a website prototype using papers that has been given by Mr. Shamsul. In this case, my group were tasked to make a website for a local restaurant.

Fig 3.1 - 3.6 Group 4's Website Prototyping (Week 2, 10/04/2023)

    After our in-class exercise is done, we were tasked individually to replicate an existing website landing page using either Photoshop or Illustrator. We were to choose 2 of 5 available website that Mr. Shamsul has give to replicate. In this case, I choose https://kinhr.com and https://www.oceanhealthindex.org

Fig 3.7 - 3.9 Dividing web no.1 (Week 3, 17/04/2023)

Fig 3.10 Replicating process web no.1 (Week 3, 17/04/2023)

    Some of the picture I took for this website are from the website itself by screenshot some of the picture. The process of replicating my first website is too raw, so I tried to improve my replication process in my second website.

 

 
Fig 3.11-3.14 Dividing web no.2 (Week 3, 21/04/2023)

 

Fig 3.15 - 3.16 Replicating web no.2 (Week 3, 21/04/2023)

Fig 3.17 Final Layout for https://www.oceanhealthindex.org (Week 3, 17/04/2023)

Fig 3.18 Final Layout for https://kinhr.com (Week 3, 21/04/2023)

Exercise 3: HTML

    In this exercise, we were tasked to make a personal profile page using a HTML language. In this personal profile page, we gave to add headings, paragraphs, lists(can be ol or ul), links, and image. The goal of this exercise is to help us practice on our HTML skill and create a webpage that showcases our personal interests. After we're done with our exercise, we had to upload and publish it in an online free hosting service like Github and Netlify.

Fig 4.1 Process of writing the codes in Visual Studio Code (Week 6, 12/05/2023)

    I followed all the codes that is showed in the pre-recorded lecture video so I could understand on how to use it correctly and at my first attempt, I see no errors going on. Until I published it in Github, an error has occured to me where the image didn't loaded in the page. I tried to figure out what's the problem and it turns out I need to upload both the HTML file and the images file in the Github itself. 

Fig 4.2 Uploading and publishing in Github (Week 6, 13/05/2023)

Fig 4.3 Final Personal Profile Webpage (Week 6, 13/05/2023)

    Just in case if y'all wanted to see it in a web, here's the link to my personal profile page using HTML language.

Fig 4.4 Some errors found in my personal webpage (Week 7, 15/05/2023)

Exercise 4

    In this exercise, we are tasked to design a layout based on this information that Mr. Shamsul gave. The layout must be visually pleasing to the viewer and make it interactive.

Fig 5.1 Information that Mr. Shamsul gave

    So anyway I start coding with the help of ChatGPT. I made a working navigation bar and make the layout as visually pleasing.

Fig 5.2 Coding process (Week 8, 25/05/2023)

Fig 5.3 Final layout (Week 8, 25/05/2023)

    Mr. Shamsul told me that the container is too narrow and the main information at the top doesn't need to be bold. Well you know me, if I see it visually pleasing then I consider it done. He tried to convince me to change it by showing some of our classmate's work, but that didn't work as I found some of their design not within my taste. In case you wanted to see this website, here's the link. I recommend y'all to view it in desktop browser as in mobile for no reason the layout is ruined.