Interactive design - Final Report

Interactive Design - Final Report 

Yong Sun Lu / 0376945

Creative Media/ School of design 

Website Link (Click here)

 At the start of this project i wasn't so sure of how i am going to do this since i was very new to this kind of stuff nervousness got the better of me and i ended up procrastinate this project for 2-3weeks but eventually i started doing it with the help of some friends from how to start and how I was going to make this look pretty.

 

So first of, I searched around YouTube for some references and some more insights on how to do this and it is also because I already have an idea in mind but I don’t know how to execute it due to the lack of experience I had. 

 

After some tutorial videos I started of with a simple header with a sticky nav because it looks nice and clean and people don’t have to continuously scroll up just to get to the navigation bar to get to the other pages, there I put the Home, About, News, Facilities and Contact pages with a dropdown menu from the about button containing School Profile, Vision and Mission, Teachers and Gallery but the only one that works is just Gallery because there is no actual School Profile from google, the Vision and Mission is on the home page and I can’t download pictures from the original site to import it to the Teachers page for my website, I want to remove it but if I do it will look empty so I just keep it as decoration.

 

For the Home page I took some inspiration from google by making it look simple and neat with some redirecting button (Learn more, All Classes, Contact us) and some fast facts I took from the original site as well as the vision and mission which I made them both using carousel and animate them to change to the next information every 4 seconds but of course you can still click on the arrow to go to the next information as well.

 

For the About page I was planning on putting the history of Darma Yudha but when I searched google there is none so I just made stuff up and the way I put it is similar to the website I took inspiration from which is AISM website when you hover on the picture it dims out and reveals a text. With the dropdown menu from the About page navigation bar there is a Gallery option where it contains pictures of Darma Yudha’s past school trips.

Moving on to the News page, since there is a lot of it I just put little focus and effort to this page considering there is no major news other than the school’s achievements.

Next up the Facilities page where it contains all of the classes that the school provides, we got the Grand Hall where it hosts collaboration events, graduation and much more, the Science lab where we do experiments with actual chemicals and actual equipment such as microscope, beaker and others, the Computer lab is the place where maybe most of the students are a big fan of since its connected to the school Wi-fi so they can watch various of stuff, we also got a Basketball court but it is also a Badminton court but it is dominated by Basketball, the clinic is the place to check up and get some medicine if you’re not feeling well, and the last 2 which is Music and Dance room.

Last Page which is the Contact page where you can submit your complaints to the school or contact them via email, phone, or go straight to the school and meet the principal yourself.

Next up the design, since Darma Yudha’s main logo theme is Light navy blue and gold as it represents “Youth and Prosperity” I used it as the main theme for the website. I used it as the header and overall hover effect for the website. As for the background I just use plain white and it is also because the original website is dominated with white as it defines purity. Only the home page looks different than the rest of the pages mainly because it is the first page when you enter the site and I want to make it different and the contact page is also different but for the rest of the site pages I just slap in a background, overlayed it with navy blue and lower the opacity with a big headline in the middle. I also made a custom cursor just to add a little more touch to make it a bit unique than the rest.

 

I must say despite the difficulties I had, like the lecturer respond a bit slow (online), Adobe Dreamweaver keeps crashing on me (i solved it by keep trying to use the code i tried to make), the CSS file got corrupted for some reason (the solution is still unknown) and it also took a lot of time to link each page with each other not to mention the lack of information I had with the original website of this school and I almost forgot that Netlify got some issues with me, because when I tried to deploy my website, the picture is not showing and now I can’t even deploy a site (but i managed to solve this by creating another account and asked a friend how to upload it correctly), I had fun making this and it’s a good start since I picked UI/UX for my specialization.