INTERACTIVE DESIGN - FINAL PROJECT
20.06.19 - 04.07.19 (Week 12 - Week 14)
Helen Angelia (0336203)
Interactive Design
Final Project
LECTURES
Lecture 1: -
20.06.19 (Week 11)
No lecture this week as we were working on our final project.
Lecture 2: -
27.06.19 (Week 12)
No lecture this week as we continued working on our final project.
Lecture 3: -
04.07.19 (Week 13)
No lecture this week as we continued working on our final project.
INSTRUCTIONS
Module Information Booklet (MIB)
FINAL PROJECT
20.06.19 (Week 12)
As a start for our final project, we need to choose a partner and make a website for each other. I paired up with Andrea and we discussed the design and the content of the website first using google docs.
Here is the link for our discussion:
https://docs.google.com/document/d/1YPXhnk-HxojJs-Hh-2CsBQ60FyonBrUiRRdgXPnrTHY/edit
After Andrea explained to me in details, I started to make a design for the home page.
Andrea told me I can use any of her photographs from her account in Pexels to put in the website, so I didn't use any other pictures besides Andrea's original works.
Fig 1.1
Andrea's Pexels
Fig 1.2
Ai Template
Home Page
As Andrea mentioned she wanted a dark coloured them at the Google Docs, I tried making a few home design to see which one she most fond of. After I showed it to her, she chose the last one. Then she guided me to make it in her likings for the rest of the design.
Andrea also told me that she wants me to use 'Roboto' Fonts.
Fig 1.3
'Roboto' Typeface from Google Fonts
Fig 1.4
2nd Attempt of Ai Template
Home Page
After deciding the heading for the home page, Andrea wants me to put some of her photography works below.
Fig 1.5
3rd Attempt Ai Template
Fig 1.6
'About' Ai Template
Fig 1.7
Final Attempt Ai Template
Home Page
27.06.19 (Week 13)
In this week, I was actually having quite some troubles in coding the website in Dreamwaver. When I I asked Mr. Lun about the problems I'm facing, he told me that I have done it wrongly from the first step. He suggested me to remake it again from the start with his directions.
What Mr. Lun had taught me had been very useful because I could work on the coding without having to ask him too much. I was afraid I would bother him and I needed to learn to figure it out on my own. Of course, I also had the help from Andrea while we worked on our website together.
I had finally done my website "home" page on the weekend, but there was quite many changes for the mock-up template. Instead of using slider for the home page, I chose to have only one big image and an arrow-button for people to scroll down to see the rest of the website.
Fig 1.8
Process in Dreamwaver
Home Page
As for the rest of the website, I didn't make Ai mockup template and only shows how the result going to be for the website to Andrea.
Fig 1.9
Reference for About Page
Fig 2.0
Reference for Gallery Page
Fig 2.1
Reference for Contact Page
Since I was also using free template from tooplate and Andrea agrees for most of the design of each pages, I only needed to change images, logos, words, etc. After that, I quickly move on to coding since if I needed to design a mockup again, it would take some time. I was fortunate that I could find design references that were close to what I pictured.
04.07.19 (Week 14)
For this week, I have already done most of the website pages and only need to do some revisions. Mr. Shamsul said that I still lack of consistency on my website design and he wants me to fix it again. Luckily, the layout was already fine and I'm just a little bit away from finished.
08.07.19 (Week 15)
Here are my final outcomes of my final project:
Menu Icon - Safari Browser
Fig 2.2
Final Outcome of Hamburger Menu
Exists in Every Page
Home Page - Safari Browser
Fig 2.3
Final Outcome of Home Page
About Page - Safari Browser
Fig 2.4
Final Outcome of About Page
Portfolio Page - Safari Browser
Fig 2.5
Final Outcome of Portfolio Page
Thumbnails (First Page)
Fig 2.6
Final Outcome of Portfolio Page
Architecture Page (Second Page)
Fig 2.7
Final Outcome of Portfolio Page
Food Page (Second Page)
Fig 2.8
Final Outcome of Portfolio Page
Murals Page (Third Page)
Fig 2.9
Final Outcome of Portfolio Page
Nature Page (Fourth Page)
Gallery Page - Safari Browser
Fig 3.0
Final Outcome of Gallery Page
Contact Page - Safari Browser
Fig 3.1
Final Outcome of Contact Page
Contact Icon - Safari Browser
Fig 3.2
Final Outcome of Contact Icon
Exists in Every Page of the Website
After finish coding, I uploaded the website using 000webhost. The result in 000webhost and safari were really different so I was quite surprised, but it was already close to deadline, I didn't have enough time to fix it again.
Here is the website link to Andrea's Photography Portfolio:
FFEDBACKS
20.06.19 (Week 12)
Online Feedback: Okay.
27.06.19 (Week 13)
General Feedback: Need to at least finish the home page by thursday (this week) and proceed to other pages.
Specific Feedback: Mr. Lun said If I'm coding from an existing template, I should just change images and the contents of the website, and not trying to duplicate them. Also, I shouldn't depends too much on adjusting using CSS since it would be troublesome later on.
04.07.19 (Week 14)
General Feedback: Mr. Shamsul said we're not allowed to use any other images beside photos from ourselves, but it's still fine if using background photo from free stock photos.
Specific Feedback: Mr. Shamsul said that I still lack of consistency in all pages, especially for the heading page, so I should make all of them consistent with the arrow-button. I also need to make the fonts bigger and perhaps make a thumbnail for the portfolio page, so people can just choose what they wanted to see without having to scroll and look for everything. Other than that, the layout is already fine.
REFLECTIONS
EXPERIENCES
20.06.19 (Week 12)
"Making website is easy?" Bah... Nonsense! Sure, making the mockup template in Adobe Illustrator is still okay, even though I also need to think thoroughly of how people will use it. Will they like it? Is it too confusing? Will they understand every parts of the website design? I kept thinking all of those since I started this module. Everything that I have learned from week 1 is really useful when I worked on my final project. I could design a website template straight away and knows which is allowed to put and which are not.
27.06.19 (Week 13)
Moving on to the coding part, I made a big mistake that requires me to start all over again. While my friends were already working on the second page already, I was still in the first page. Fortunately, Mr. Lun was always there teaching me so patiently until I can understand how to code by myself, and with Andrea's help.
04.07.19 (Week 14)
I have already done most of the pages and only need to fix some parts. Since I also asked for feedbacks from Mr. Shamsul, he gave me guidance how to make the website better, and that really helps me a lot.
OBSERVATIONS
20.06.19 (Week 12)
I was too focused on discussing the website design with Andrea that I didn't have a chance to see the works my friends' were doing. However, I observed so many good and bad website designs and how I could make a website template that Andrea will like.
27.06.19 (Week 13)
Since now everyone has done their home page, I could take a peek of their works and observed it. What is it that makes it easy to understand? Did they use a lot of whitespace while making their websites? How about their colour picks? Call to actions, etc. Overall, their works were really nice and I could learn from them.
04.07.19 (Week 14)
Everyone in the class have mostly done their websites and might only need to do some revisions, but overall their designs were each unique and made aesthetically.
FINDINGS
20.06.19 (Week 12)
I found out how to make a website design in Adobe Illustrator and I could get a pass from Mr. Shamsul pretty quickly.
27.06.19 (Week 13)
I learned that when using an existing template, I should just made a little bit of changes and not depending too much on CSS since it will be a big problem when I have made all of website pages.
04.07.19 (Week 14)
I found out a lot than before in coding after receiving feedbacks and helps from both lecturers and from Andrea as well. If before I couldn't understand and do anything in making the website and could only depends by asking the lecturers, now I could solve the problem by myself bit by bit and very slow progress. Nevertheless, I was happy that I could at least understand how to make website and how to design a good one.
FURTHER READINGS
20.06.19 (Week 12) - 04.07.19 (Week 14)
Since I did my final project by downloading a template from a website, I could just change the design of the template according to my final project Ai mock up.
Fig 3.3
Further Reading #1
Just by downloading a few templates and learned how the creators code the HTML and CSS, I have learned so much from it. Also, the extra lessons I learned from Mr. Lun is really helpful because I can understand the codings in the downloaded template easily.
Comments
Post a Comment