Interactive Design: Final Project - Website

GCD60904 Interactive Design 29.10.21 - 26.11.21 (Week 10 - Week 14)
Wendy Seto / 0348805
GCD60904 Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Project 3: Website

---

INSTRUCTIONS

---

PRACTICAL

Project 3: Website

We were assigned to develop our Project 1 & 2 into a website using the knowledge we have received from the lectures. I am so stressful of this final project as I procrastinate a lot and literally have no idea on how to get started. I even apologized to my mom in advance if I end up not passing this module but guess what I MADE ITTTTTT! Even though it results in a very simple website design but at least I managed to build it on my own and I am proud of it. I do not have any family or friends that understand coding and HTML so there is no one to be asked besides the lecturer, but again I did not use the consultation hours well so here I am questioning everything to myself. 

I used DreamWeaver to create my site as instructed by the lecturer and started working from the navigation bar.

fig 1.1 navigation bar 1st attempt 24/11/21

Did another try on the navigation bar but this time I was using the table.

fig 1.2 navigation bar 2nd attempt 24/11/21

Finally, I decided to follow Mr. Tarmizi's tutorial instead. Believe it or not, I spent 12 hours to do only the header of this landing page. It is really hard to make it the way I want it to look like but this is the best I can make so far.

fig 1.3 navigation bar 3rd attempt & landing page header 25/11/21

For all the images I will be using, I resized the image size in Photoshop to reduce the quality drop as advised by Mr. Tarmizi. However, I still feel like the pictures resolution are ruined by this method.

fig 1.4 reducing the image size in Adobe Photoshop 25/11/21

After hours of confusion and exhaustment, I find myself to work easier with tables so most of the part were done this way.

fig 1.5 "about" 26/11/21


fig 1.6 "contact" 26/11/21

fig 1.7 "product details" 25/11/21

Originally, I used Avenir in my designs but I have tried multiple times to import the typeface to DreamWeaver and it just won't work so I end up using the built-in typefaces like Helvetica and GillSans. 

Below is my final HTML, CSS and images in zip. I forgot to rename all the files and images beforehand which I regret so much. I tried to rename it just now but it messed with the codes so I am really sorry for my carelessness. I randomly named the folder as bootcamp because when I see the word bootstraps it just reminded me of it, the most popular landing place in one of the PUBG's map, Sanhok.

fig 1.8 project 3 HTML, CSS & images.zip 26/11/21

---

REFLECTION

This is the most challenging task this semester but we have to step out of our comfort zone every once in a while in order to grow right? And it will always seem impossible until it is done! There is still a plenty of things that I actually have in mind that I do not know how to make it happen so I am looking forward to learn more of the advanced interactive design next year! 

Interactive Design: Project 1 & 2: Landing Page & Microsite Designs

GCD60904 Interactive Design 24.9.21 - 22.10.21 (Week 5 - Week 9)

Wendy Seto / 0348805
GCD60904 Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Project 1 & 2: Landing Page & Microsite Designs

---

INSTRUCTIONS

---

PRACTICAL

Project 1: Landing Page Design

We were assigned to design a landing page for a website. 

fig 1.1 my initial landing page sketch 24/9/21

fig 1.2 landing page sketch submission 30/9/21

fig 1.3 Project 1.pdf 7/10/21

Mr. Tarmizi said that my final design is a little too simple so I try to add something to it.

fig 1.4 Project 1 revised.pdf 4/11/21

Project 2: Microsite Designs

For project 2, we have to design 5 more pages that are related to our landing page design.

The pages I created:
1. Categories page
2. Single category page
3. Product page
4. Cart page
5. Receipt page

fig 2.1 Project 2.pdf 21/10/21

Turns out Mr. Tarmizi also assigned us to create a sitemap of our microsite. It was supposed to help us to design the pages easier but nevermind, it is still going to be useful on linking all the pages together in project 3.

fig 2.2 Sitemap 5/12/21

---

FEEDBACK

Week 6:  Your sketch submission is looking good.

Week 9: It is a bit too simple, you can try to add some photos or background to the landing page.

Interactive Design: Exercises

GCD60904 Interactive Design 27.8.21 - 24.9.21 (Week 1 - Week 5)
Wendy Seto / 0348805
GCD60904 Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Exercises

---

INSTRUCTIONS

---

PRACTICAL

Exercise 1

We were given a list of 10 types of websites where we have to choose 5 and give explanation on why do we think they are such websites, along with the features, functions, contents and examples for each.

The 10 types of wesbites:
1. Business website
2. Blog
3. eCommerce website
4. Portofolio
5. Event website
6. Online forum
7. Personal website
8. Membership website
9. Non-profit website
10. Informational website

fig 1.1 Exercise 1.pdf 2/9/21

Exercise 2

Based on the knowledge we have received from week 2 and week 3 lectures, we are assigned to try create a HTML with the content Mr. Mike has prepared for us.

fig 1.2 experimenting with W3Schools' "Try it Yourself" feature 3/9/21

fig 1.3  HTML content prepared by Mr. Mike.pdf

fig 1.4 creating the HTML with TextEdit 16/9/21

fig 1.5 Exercise 2.pdf 16/9/21

---

REFLECTION

This is definitely the most difficult module to cope with but luckily we have been introduced to coding from our day 1 in the program. We have to write a blog post for every single task we received on Blogger since our first semester so the exercises given in this module is not so much a "shock" to me even though it is not my cup of tea. I like how the lecturer tried to make it seem a bit lighter with the Among Us themed content, in agreement it does make me feel so much less overwhelming!