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
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
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.
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.
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.
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.
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.
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!
No comments:
Post a Comment