INTERACTIVE DESIGN - FINAL PROJECT
See Zi Yi 0340094
Interactive Design
Final Project
INSTRUCTIONS
Week 10 - 14 (17/06/2020 - 15/07/2020)
For our final project, we were tasked to partner up with one of our classmates. Each person would have to create a portfolio for another which would be a designer-client-liked project. Our client would provide the content for us and we will be designing the layout for them. Hence, I have partnered up with Cerene Ng Mei Ying to a professional website for her. To begin with, we should create a sitemap for the website. This is the Google Slides proposal for our final project:
Below is a sketch for the website layout:
 |
| Fig. 1.0 Sketch of the website layout |
Then, I proceed to create my client's website layout on Adobe Illustrator. It might differ from the sketch a little as I have improvised it over time. Below is my first attempt:
 |
| Fig. 1.1 First Attempt: Home (1/5) |
 |
| Fig. 1.2 First Attempt: About (2/5) |
 |
| Fig. 1.3 First Attempt: Artwork (3/5) |
 |
| Fig. 1.4 First Attempt: Projects (4/5) |
 |
| Fig. 1.5 First Attempt: Shop (5/5) |
However, I figured that the header image in Fig. 1.1 doesn't really express a feeling of an artist/ a designer. Hence, I made some changes to my layout design. Below is the new header image I have found on Unsplash.
 |
| Fig. 1.6 Original Image on Unsplash |
However, I find the fences disturbing, thus I imported the image into Adobe Photoshop to completely remove the fences. Below is the results.
 |
| Fig. 1.7 Photoshopped image |
Then, I reduced the brightness of the image, so the text which overlays on the surface would look more obvious and evident. Below is the final header image.
 |
| Fig. 1.8 Photoshopped image with its brightness reduced |
With the new image, I came out with a new layout. I have decided to combine both of my client's favourite colours, which are blue and beige (pastel colour) and below is my final layout for the Final Project.
 |
| Fig. 1.9 Home page |
 |
| Fig. 1.10 About page |
 |
| Fig. 1.11 Artwork page |
 |
| Fig. 1.12 Projects page |
 | |
|
After finished designing my layout, I proceed to start coding on Adobe Dreamweaver. I began the process by coding the HTML page for the first page, which is the "Home" page, following with its CSS page.
LINK TO ATTEMPT ON THE FIRST PAGE (HOME): https://seeziyi-finalproject-home.netlify.app/
 |
| Fig. 1.14 Changing social media icons from images (top row in white) to proper responsive icons (bottom icon in blue) |
Thus, I revised my work again, and continue working on the codes. After making necessary amendments to the first page, I proceed to learn to create multiple pages for the website. Below is a Youtube tutorial I referred.
Then, I put the theory into practice by coming up with four more pages, namely, "ABOUT", "ARTWORK", "PROJECT", and "SHOP". Below is the working in progress pictures I have taken.
 |
| Fig. 1.15 HTML on Adobe Dreamweaver |
 |
| Fig. 1.16 CSS on Adobe Dreamweaver |
 |
| Fig. 1.17 Javascript on Adobe Dreamweaver |
Upon completion, I created my website with Netlify and below is the final layout for my Final Project when viewed on a laptop screen.
FINAL SUBMISSION
PAGE 1 - HOME
 |
| Fig. 1.18 Home (Navbar and Section 1) |
 |
| Fig. 1.19 Home (Section 2) |
 |
| Fig. 1.17 Home (Section 3) |
 |
| Fig. 1.20 Home (Footer) |
PAGE 2 - ABOUT
 |
| Fig. 1.21 About (Navbar) |
 |
| Fig. 1.22 About (Section 1) |
 |
| Fig. 1.23 About (Section 2) |
 |
| Fig. 1.24 About (Section 3) |
 |
| Fig. 1.25 About (Footer) |
PAGE 3 - ARTWORK
|
| Fig. 1.26 Artwork (Navbar) |
 |
| Fig. 1.27 Artwork (Section 1) |
 |
| Fig. 1.27 Artwork (Section 2) |
 |
| Fig. 1.28 Artwork (Section 3) |
|
| Fig. 1.29 Artwork (Footer) |
PAGE 4 - PROJECTS
|
| Fig. 1.30 Projects (Navbar) |
 |
| Fig. 1.31 Projects (Section 1) |
 |
| Fig. 1.32 Projects (Section 2) |
 |
| Fig. 1.33 Projects (Section 3.1) |
 |
| Fig. 1.34 Projects (Section 3.2) |
 |
| Fig. 1.35 Projects (Section 3.3) |
|
| Fig. 1.36 Projects (Footer) |
PAGE 5 - SHOP
|
| Fig. 1.37 Shop (Navbar) |
 |
| Fig. 1.38 Shop (Section 1) |
 |
| Fig. 1.39 Shop (Section 2.1) |
 |
| Fig. 1.40 Shop (Section 2.2) |
 |
| Fig. 1.41 Shop (Section 3) |
 |
| Fig. 1.42 Shop (Section 4) |
|
| Fig. 1.43 Shop (Footer) |
LINK TO FINAL PROJECT: https://seeziyi-0340094-finalproject.netlify.app/
FEEDBACK
Week 11 (24/06/2020)
Specific feedback:
- Reconsider client's call to action.
- Decide typeface.
- Sketch out the wireframe.
- Proceed with creating a landing page design like Project 1.
- Reconsider client's call to action.
- Decide typeface.
- Sketch out the wireframe.
- Proceed with creating a landing page design like Project 1.
Week 12 (01/07/2020)
Specific feedback:
- The first carousel picture looks nicer.
- The first layout for the landing page looks alright too.
- To create variety, try not doing the hover text effect again. Left-aligned your picture and add text on the right.
Specific feedback from the client:
- The first carousel picture looks nicer.
- Don't crop the "project" images vertically, cause that will discard a lot of useful information for the content. Use horizontal images instead.
- For the background colour during hovering text effect, try a transparent colour instead of light blue. It's not necessary to use a solid colour.
- Overall, the client is satisfied. Only minor changes should be made.
- The first carousel picture looks nicer.
- The first layout for the landing page looks alright too.
- To create variety, try not doing the hover text effect again. Left-aligned your picture and add text on the right.
Specific feedback from the client:
- The first carousel picture looks nicer.
- Don't crop the "project" images vertically, cause that will discard a lot of useful information for the content. Use horizontal images instead.
- For the background colour during hovering text effect, try a transparent colour instead of light blue. It's not necessary to use a solid colour.
- Overall, the client is satisfied. Only minor changes should be made.
Week 13 (08/07/2020)
No class today as we are given time to work on our Final Project.
Week 14 (15/07/2020)
Absent.
Week 15 (22/07/2020)
I showed my first attempt (only the HOME page) to Mr Shamsul and he commented it works fine on both his laptop and phone.
Week 15 (22/07/2020)
I showed my first attempt (only the HOME page) to Mr Shamsul and he commented it works fine on both his laptop and phone.
Week 16 (28/07/2020)
I showed my completed website to Mr Shamsul and he commented it works perfectly on both his laptop and phone. Good work.
I showed my completed website to Mr Shamsul and he commented it works perfectly on both his laptop and phone. Good work.
REFLECTION
Week 11 (24/06/2020)
Experience: Today's class was pretty chill and relax as we just received our final round of feedback from the lecturers on our Project 2, as well as to present our ideas for our client's webpage.
Observation: The lecturers were very patient in explaining about Bootstrap to us and even paused from time to time to ask if we got what they taught in class.
Findings: It was very difficult for me to start off with the Bootstrap exercise as I had to spend time rewinding the recorded Youtube tutorials from time to time. The whole process was very time-consuming.
Week 12 (01/07/2020)
Experience: Today's class went by quite quickly as we can leave once we have shown our layout design on Adobe Illustrator.
Observation: Some of my classmates haven't done their work yet while some have completed their layout design. Some designs are really aesthetically pleasing.
Findings: As the semester is almost coming to an end, I eventually felt the stress overwhelming the class by this week. My progression has been quite slow hence I had to catch up.
Experience: No class as we were given time to continue working on our Project 2.
Observation: No class as we were given time to continue working on our Project 2.
Findings: No class as we were given time to continue working on our Project 2.
Week 14 (15/07/2020)
Experience: Absent.
Observation: Absent.
Findings: Absent.
Comments
Post a Comment