29 Oct 2019 - 26 Nov 2019 (week 10-week14)
Soo Wen Yi (0334653)
Interactive Design _ Final Project
LECTURES_
No Lecture
28 Oct 2019 (week 10)
No Lecture
4 Nov 2019 (week 11)
No Lecture
11 Nov 2019 (week 12)
INSTRUCTIONS_
FINAL PROJECT_
Week 10
Final Project
For the final project, we are to partner up with a classmate and each of us will act like a designer and client to each other. There must be 5 pages in this website, the partner must provide the content and only proceed if partner accepts the layout. My partner/client is my friend Daryl, after discussing her content and what she wanted, I sketched wireframes before class so I can finalise the layout in class. Daryl's blogspot click here! She gave some examples of the type of website that she would like.
 |
| Fig. 1.1: example that Daryl gave |
 |
| Fig. 1.2: example that Daryl gave |
 |
| Fig. 1.3: more examples that I found on Pinterest |
 |
| Fig. 1.4: sketches of possible wireframes |
After showing Daryl my sketches in class and some discussion, these are the finalised wireframes.
 |
| Fig. 1.5: finalised wireframes |
This website will showcase her traditional and digital artworks (portfolio) and serves as a place for customers to ask for commissions. After finalising the wireframes I asked her for the required photos and content for this website.
 |
| Fig. 1.6: screenshot of the traditional artworks that Daryl shared |
 |
| Fig. 1.7: screenshot of the digital artworks that Daryl shared |
 |
| Fig. 1.8: additional photos to use in the website |
Here's the context that she wants to include.
As for her website logo, since she did foundation (FID) I asked if she also did monogram and turns out she did. I asked for a picture of the monogram so I could digitalise it and make it for logo.
 |
| Fig. 1.9: Daryl's monogram from FID |
 |
| Fig. 1.10: my digitalised logo |
At first I thought about just using a template, but after checking some template's codes I realised it was way more confusing because the codes are everywhere. So I just stick to what I know that works, by using Bootstrap grid system and searching the internet for specific tutorials on how to do certain things. Here are some screenshots of the process of choosing the colours.
 |
| Fig. 1.11: 1st colour as bg, it was too saturated |
 |
| Fig. 1.12: 2nd colour is better as its more muted |
 |
| Fig. 1.13: footer without a colour, it looks like there is not enough contrast in the whole page |
 |
| Fig. 1.14: footer with colour looks better because of the constrast |
 |
| Fig. 1.15: title and picture before added spacing |
 |
| Fig. 1.16: title and picture after added spacing |
 |
| Fig. 1.17: changed the title colour to better match the overall colour scheme |
 |
| Fig. 1.18: changed the text colour to better match the overall colour scheme |
These are the colours I used along with black and white.
 |
| Fig. 1.19: colours used |
After completing the pages, not including the view image pop up as I coulndn't figure it out yet, I looked at possible fonts to use for this website.
 |
| Fig. 1.20: possible fonts from Google fonts |
 |
| Fig. 1.21: possible fonts and how they would look like |
 |
| Fig. 1.22: changed font with text shadow for more contrast |
As seen on the landing page right bottom corner, the "SCROLL DOWN" button was retrieved from a template at HERE ,called Infinity.
 |
| Fig. 1.23: template website that I retrieved the scroll down button |
Also as seen in some screenshots before this, I have a hover effect on the images. This was retrieved from HERE, I used "Effect 13".
 |
| Fig. 1.24: screenshot of website |
 |
| Fig. 1.25: screenshot of website |
 |
| Fig. 1.26: screenshot of codes for the hover effect on images |
The hamburger menu was retrieved from HERE, as Daryl preferred the hamburger menu over a normal horizontal navigation bar, I wanted to search for a more interesting hamburger menu compared to what is shown on W3schools.
 |
| Fig. 1.27: screenshot of website where I retrieved the hamburger menu |
 |
| Fig. 1.28: screenshot of part of the code for the hamburger menu |
 |
| Fig. 1.19: demo of hamburger menu, collapsed |
 |
| Fig. 1.20: demo of hamburger menu, opened |
Along with the hover effect on the images, since there was a button "view", I wanted a pop up image to show the full artwork. So I looked at W3schools and found a code called "Modal Images", I used a modal for my microsite so this is something similar.
 |
| Fig. 1.22: demo and code |
Then I tested to change the image into a text and after a bit of figuring out I made it work.
 |
| Fig. 1.23: changed the image into text |
 |
| Fig. 1.24: opened modal |
After putting into Dreamweaver I could get the first modal to work but when I put in the second modal and after duplicating the Javascript the images do pop up in the modal, but the close button won't work. I asked Mr Lun on this problem, he mentioned that I should've used JQuery instead of Javascript. And that my way that I'm using is not very effective. He tried to make a generic script but it'll complicated so I was informed to just use what I have and keep duplicating the Javascript line by line.That worked but I ran into a problem with the close (x) button not clickable after I duplicated the Javascript. So I went online to search for a solution, and after many tries I found this forum that solved my problem, click HERE to go to the forum.
 |
| Fig. 1.25: screenshot of the code that I used |
Here are some screenshots of the final site.
 |
| Fig. 1.26: screenshot, home page for Daryl's portfolio |
 |
| Fig. 1.27: screenshot, Traditional art page for Daryl's portfolio |
 |
| Fig. 1.28: screenshot, Digital art page for Daryl's portfolio |
 |
| Fig. 1.29: screenshot, About page for Daryl's portfolio |
 |
| Fig. 1.30: screenshot, Contact page for Daryl's portfolio |
 |
| Fig. 1.31: screenshot, opened hamburger menu for Daryl's portfolio |
Here are some screenshots of the site with a smaller viewport.
 |
| Fig. 1.32: screenshot of home page, smaller viewport |
 |
| Fig. 1.33: screenshot of traditional art page, smaller viewport |
 |
| Fig. 1.34: screenshot of digital art page, smaller viewport |
 |
| Fig. 1.35: screenshot of about page, smaller viewport |
 |
| Fig. 1.36: screenshot of contact page, smaller viewport |
 |
| Fig. 1.37: screenshot of opened hamburger menu, smaller viewport |
Here is the link to the website - Daryl Pung's portfolio
https://id-htmlwenyi.000webhostapp.com/Interactive%20Design%20Final%20Project/index.html
FEEDBACK_
Week 10
no feedback given
Week 11
no feedback given
Week 12
no feedback given
Week 13
When I asked Mr Lun about the problem, he
mentioned that I should've used JQuery instead of Javascript. And that
my way that I'm using is not very effective. He tried to make a generic
script but it'll complicated so I was informed to just use what I have
and keep duplicating the Javascript line by line.
Comments
Post a Comment