Interactive Design - Final Project

17/06/2020 - 15/07/2020 (Week 10 - Week 14)
Yeo Hui Qi (0334134)
Interactive Design
Final Project

---

LECTURES

Week 10

In week 10, nothing new was taught. Mr Shamsul went through our progress for Project 2 and later briefed us about our Final Project for Interactive Design.

Week 11

We had final feeback for Project 2 and then Mr Shamsul checked on the progress of our final project.

Week 12

Feedback for final project was given based on our current progress which was making the prototype.

Week 13

There was no lecture that day and Mr Shamsul said we could still approach them on Facebook messenger or Discord to ask about any problem that we might be facing.

Week 14

The feedback session this week was short and feedback was given for final project website. Submission link was uploaded in Google Classroom

---

INSTRUCTION
Final Project 
We are required to create a website for a simulated "client" which will be one of our classmates.We are free to choose our partners and decide on what type of website we want from the designer / partner. 

Requirements:

• minimum 5 pages (navigation links to each page)
• no broken links
• must have a call-to-action button (e.g. inquiry contact, subscribe)  

Week 10

We are first required to pair up, discuss and determine a site map for each website. Then, make a wireframe to reflect the site map and show it to Mr Shamsul the following week. My partner for this project is Wong Kai Yi (0340236), she will be acting as my client and in turn, I will be her client. We have both chosen to do personal portfolio websites.

Figure 1.1 Client's Wireframe

Wireframe Skectches (finalised):

For the wireframes, all pages were designed as per the client's requirements.

Figure 1.2 Home Page Wireframe

Figure 1.3 About Page Wireframe

Figure 1.4 Portfolio Page Wireframe

Figure 1.5 Shop Page Wireframe

Figure 1.6 Blog Page Wireframe

Prototype (Final version): Week 12

This final version of the prototype was after many iterations and experimentation with colour and font. The client was very clear on what she wanted and helped me a lot with visualizing the idea by showing me examples and asking me to make specific changes.

Figure 1.7 Home Page Prototype

Figure 1.8 About Page Prototype

Figure 1.9 Portfolio Page Prototype

Figure 1.10 Shop Page Prototype

Figure 1.11 Blog Page Prototype

Final Coded Website: Week 14

My final work looks very much like the illustrated prototypes that I've made in the previous week except for the shop page where I moved the "order now" button to the bottom because it wasn't possible to put it beside the price and arrange it so that it's aligned. 

The website was uploaded to netlify through this link: https://kaiyi-personalwebsite.netlify.app/

---

FEEDBACK

Week 11

• Wireframe looks okay. Please make a moodboard for the theme and colours and then move on to Illustrator to make the designs

Week 12

• Title must be standardized like the title box made for prototype in home page
• Make all the text align left and button on the right
• Make the buttons contrast more and standardized

Week 13

• I asked about the shop page boxes that did not align when the page was minimized and there wasn't much I could do and Mr Shamsul said it was okay.
• Test out the website on different screen resolutions.

Week 14

• Maintain consistency of the titles. Match blog title to the title in the portfolio page.
• Font in the shop make consistent with the rest of the website.
• Client feedback:
• make the font size of footer smaller

---

REFLECTIONS

Week 11

1. Experience
• It was a tough week because I had many final assignments being assigned all at once and I was under a lot of stress because I'm not known to work fast with assignments.
2. Observations
• There was a lot of changes to be made regarding the aesthetics, fonts and arrangement after my first prototype draft.
3. Findings
• For this project, I think it's very important for the client to know exactly what they're looking for in order for the designers to do a good job in visualizing the idea.

Week 12

1. Experience
• My experience with the final project was okay because I got used to working with HTML and CSS through previous assignments and it only took me 2 days to code this website.
2. Observations
• I only had difficulty with the shop page and tried my best to make the boxes align to each other. 
3. Findings
• I found that changing the divs and how information was grouped together really affects the placements and how bootstrap alignments will affect them.

Week 13

1. Experience
• There were no changes to be made to my website after showing it to Mr Shamsul.
• The client asked me change the social media icons in the footer and reduce the font size of item title in shop page.
2. Observations
• Through this module, I've learnt to handle coding websites. I used to be very intimidated by the sheer amount of text and trial and error that went into coding and designing a website.
3. Findings
• I found my own way of categorizing information in a web page using classes and IDs and comments in order to make it easier for me to navigate my code and understand what I'm doing.

Week 14

1. Experience
• I made the changes according to what was advised by my client and Mr Shamsul.
2. Observations
• A lot of the comments given by Mr Shamsul was regarding the consistency of the elements in the page and across the website.
3. Findings
• Consistency is very important in a website to show coherence and unity among all pages.