Interactive Design - Final Project
07/07/2025 - 23/07/2025 (Week 12 - Week 14)
Interactive Design - Final Project
Cindy Noverin / 0376409
Interactive Design/ Bachelor of Design in Creative Media / Taylors University
Final Project
TABLE OF CONTENTS
INSTRUCTIONS
|
|
fig.1.1. landing page |
I started my website by managing the files, where I have the landing page (index.html), about us page, Achievement pages, News page, Contact page, the teacher's page, and an error page because theres a lot of section but I'm not able to finish it all so I create the error page to guide users back to the homepage and other page thats available to view.
for the navigation bar, I decided to use the school logo as the home button and put two drop downs of Discover that shows the school information like about the school, the teachers, the facilities & extracurricular, and Updates that shows the Announcement, News and Agenda for the school. I highlighted the contact us button so it stands out the most compared to the other navigation link.
for the landing page, I used the same pictures as the Figma prototype but changed the layout for a little bit.
I put the main pictured first, followed by a short description of the school, then the headmaster's greeting.
then I put some content like a small preview of the news, extracurricular and achievement on section, then another section of main youtube videos embed into the website, Galleries and Facilites.
I ended it with the footer, with some upcoming agenda, the school info, jumplinks and socials, then ended it with a copyright text
|
| fig.1.2. About Page |
after finishing the main landing page, I Started with the "About Us" Page where it shows information of the school like it's history, the headmaster's full greeting and Vision&Mission on the same page as it sums up a lot about the school in one page. I Copy paste the code the navigation bar and footer so it looks the same for each page and added the socials float on the top right so users have better access to it. since there's a lot of page, I also added breadcrumbs so the users will have better experience navigating it
 |
| fig1.3. Error page |
since there's quite a lot of page that's missing because I wouldn't make all of them and the requirements only need 5 page, I decided to fill the page that I did not make with an error page, where I shows that the page is unavailable and it helps the user navigate back to the page that can be viewed and an option to go back to the landing page. I also copied a different SVG because I feel like the missing files symbol is better than the android one that I used on my figma.
|
| fig.1.4. Achievement page 2020-Present |
Achievement page has 2 types where it will separate for each 10 years of the school , for the year 2020-Present, I created a dropdown for the years option and used javascript to transition between 2 pages so I don't have to create another html file for the other year. I chose to make the view with media(pictures) and more context of the competition name because the school have provided pictures for it.
.png)
|
| fig.1.5. Achievement Page 2010-2019 |
however, since the school haven't provide much information about the past achievement, and since they also didn't fix the option to view the other 6 pages they have for the achievement list, so I just copy paste the current information I have of the current year and make it scrollable horizontally so the page wouldn't look too long. the main school also didn't provide any media for the gallery or like the past competition on the list so I just go with what I could do for now.
|
|
fig.1.6. Contact Page
|
|
| fig.1.7. Teacher's page |
Lastly the most complicated and painful part of making the website is the teacher's page because theres a total of 28 staff in the school and I have to input their information one by one, since its just a school website, I decided to just provide necessary information and respect their privacy (I said this because the original school page actually gave out the teacher's address). So I only put their position and the subject that they teach, one by one using java script, so when it is clicked, users could see the information about the teacher and it works for every teacher. when making the pop up, I thought the label is the same in css but I still can't adjust to make the "x" button appear so went back and forth in chat gpt to help me solve it and turns out the class name is different. I also added a small note to give viewers notice that the picture of each teacher could be clicked.
 |
| fig.1.8. burger menu dropdown for phone view |
THEN, I just realize that I also needed to make it more responsive like making the mobile layout, so I continued again with fixing the layout its pretty much all making the navigation bar more accessible and adjusting the flex-direction into column, BUT IT WAS HELL BECAUSE ITS ONE PROBLEM AFTER ANOTHER. like when I tried to make the navigation bar, sometimes the picture would overlap one after another and I have to go back and forth between pages to fix them, '
 |
| fig.1.9. Teacher's page phone view |
for the teacher's page, I change the grid to three rows and overall pages for the floating socials icon I put it a little bit to the right because its almost disrupting the content, I also make the teacher's information narrower because for the web view look too big for the phone view
 |
| fig.1.10. achievement and News phone view |
for the achievement page I put the content flex direction into column and make the frame smaller. I also did the same with the news and turn it to column for phone view only.
 |
| fig.1.11. contact page phone view |
for the contact page, I send one of my attempt to my friend and they said the email is out of frame so I just hide the overflow,
 |
| fig.1.12. main landing page phone view. |
for the landing page, I adjusted the container width because earlier it was too narrowed and it affects the readability. the videos also went out of bound so I resized it and added finishing touches like adding links from the landing page small sections of the content to the related page.
FINAL LINKS AND RESULT
Gdrive of the codings
Final Result Link
Website Walkthrough
FEEDBACK
Week 14 :
Overall Very good and better than the original site, what could be
good is if I add the active link state
REFLECTION
doing this project feels like solving a math problem, I don't like
the sound of it but when I started working on it, I feel the thrill
of being able to create the ui and ux, solving some errors and
finishing it feels so satisfying. I learned a lot from this module
especially about html and css coding. although I haven't explore
more than what I made.
the most tiring part of making this is adjusting them into a mobile phone view because a lot of things can go wrong, where sometimes I would overwrite some code or even forgot to change certain things. like when I literally not close the redline view for every elements that I have and just uploading it to netlify. PAIN. but then because of that I notice that I forgot to paste my updated version of navigation bar to the about us page. because for the phone view when I go to the about us page it didn't open.
Comments
Post a Comment