Interactive Design | Project 2 & 3
7.6.2022 (Week 11 ) - 9.7.2022 (Week 15 )
Nur Allyssa Nabilah Binti Mohd Nizam / 0337796 / BDCM
Interactive Design
Project 2 & 3
Project 2 & 3
LECTURE
For all lecture notes, refer to this link
INSTRUCTION
Figure 2.1 HTML/ Bootstrap Landing Page Code
Figure 2.1 CSS Landing Page Code
Before uploading it to netlify I decided to test out website that I have done. Below is a screen recording of me testing out the website.
Figure 2.3 Landing Page Live Testing
Since all the features that I wanted to work were working, my landing page was ready to be submitted. Below is the netlify link.
Landing Page Link: https://project2-interactivedesign.netlify.app/
%20Registration%20Page.jpg)
%20Courses%20Page.jpg)
%20Piano%20Lesson%20Page.jpg)
%20Vocal%20Lesson%20Page.jpg)
Project 3: Working Multipage Website
After completing our working landing page, we are tasked to start on our next and final task for this module. For this task, we are required to code out 4 other webpages that relates and links to our working landing page.
Before I started working on my other website pages on Adobe Dreamweaver, I decided to design the other page layouts in Adobe Illustrator. I decided to use the same colour palette as I have used in my landing page.
Figure 3.1 Colour palette used
With the colour palette already chosen, I started getting to work on my webpage layouts. Below are the final designs that I came up with
%20Registration%20Page.jpg)
Figure 3.2 Registration Page Prototype Layout
%20Courses%20Page.jpg)
Figure 3.3 Other Courses Page Prototype Layout
%20Piano%20Lesson%20Page.jpg)
Figure 3.4 Specific Detail Courses Page (Piano) Prototype Layout
%20Vocal%20Lesson%20Page.jpg)
Figure 3.5 Specific Detail Courses Page (Vocal) Prototype Layout
1. Figure 3.2 | Registration Page:
For this webpage, it can be accessed from the call to action button on the landing page. In this page, users who are interested are welcome to register for any of the music lessons they want.
2. Figure 3.3 | Other Courses Page:
For this webpage, it is linked from the load more link under the courses section of the landing page. In this page, users are able to look at what other courses besides the courses shown on the main landing page incase they are interested in other music classes.
3. Figure 3.4 | Specific Detail Courses Page (Piano):
For this webpage, it can be accessed from the landing page under the "What We Offer" category whereby the user can click on the word "piano" or it can also be accessed from the "Other Courses webpage" (Figure 3.3) whereby the user has to do the same thing on clicking the word "piano". In this page, the user will be able to get a detailed information about what they are able to learn from the piano class. Aside from that, users could also click on the "Interested in other classes" link which will link them back to the "Other Courses webpage" (Figure 3.3) which they can check out other classes they wish to see in detail.
4. Figure 3.5 | Specific Detail Courses Page (Vocal):
For this webpage, it applies the same concept as the other "Specific Detail Courses Page/Piano"(Figure 3.4). It can be accessed from the landing page under the "What We Offer" category whereby the user can click on the word "vocal" or it can also be accessed from the "Other Courses webpage" (Figure 3.3) whereby the user has to do the same thing on clicking the word "vocal". In this page, the user will be able to get a detailed information about what they are able to learn from the vocal class. This page also features the "Interested in other classes" link which will link them back to the "Other Courses webpage" (Figure 3.3) which they can check out other classes they wish to see in detail.
After figuring out what the feature of my 4 other pages and their layouts, I started coding and designing the designs into Adobe Dreamweaver. Below is my netlify link for my final website design.
Final Website Link: https://finalproject-interactivedesign.netlify.app/
FEEDBACK
REFLECTION
I found this project to be both tiring and exciting. The reason why I found it tiring is because if we were to change a code only so slightly something that is not even involved in that part of the code will somehow change to a different look. The part that I found exciting about this is that once you have nailed the right code and the output you get is what you expected. It gives a sense of satisfaction. I really wished I had more time to work on this project as I had not enough time to figure out the output for a windowed tab and how it would look like on the mobile phone. I'm overall happy with the results that I have done besides how it looks when it appears on other devices or windowed.
Comments
Post a Comment