Interactive Design: Final Project Website Redesign Development
Interactive Design: Final Project - Website Redesign Development
-
1.12.2025 - 11.1.2026 / Week 11 -Week 16
Dave Christian Moniaga / 0385630
Interactive Design / Bachelor of Design (Hons) in Creative Media
Final Project - Website Redesign Development
Table of Contents
- Instructions
- Final Project
- Reflection
Instructions
Back to top
Final Project - Website Redesign Development
Continuing from Project 2, the website I am redesigning is called Screenmusings. In this final project, I made 5 html pages; the homepage, the movie
list, the content page, a special color page, and the contact page. The
pages will include a separate CSS and JavaScript file attached to style them.
The website also relies help from Bootstrap's utilities and components to help simplify the development process and reduce clutter. Bootstrap examples are also taken from online sources before edited and tweaked personally. Throughout this process the JavaScript codes were written with the help of online articles and guidance from ChatGPT.
1. Navigation & Footer
Starting with the essential piece of the website, the navigation bar. I
chose a design from bootstrap's navbar examples, removing unnecessary
elements and replacing them.
I reused the logo redesign created during the prototyping stage. This
logo is used at the start of the navigation bar and as the website's
favicon that appears in the browser tab.
|
| Fig 1.1 Screenmusings logo designed in Illustrator |
Based on my earliest feedback by Mr. Shamsul, I also removed unnecessary
links such as "home" and "about" at the start of the navbar links to
reduce any redundancy. Using
bootstrap's icon
collection, I also placed the search and profile icon on the top
right.
|
| Fig 1.2 Final navigation bar layout |
Clicking the profile icon on the top right creates a pop up window to
create an account. This was done using bootstrap's modal that mimics a
sign up page. The button uses bootstrap's basic btn-warning for
convenience.
 
|
| Fig 1.3 Sign up account pop up |
For further styling, I attached a JavaScript file before the </head>. The defer attribute in this script should reduce load times as it will load both the html and javascript at the same time.
|
| Fig JavaScript line placed before </head> |
With the introduction of JavaScript, I was able to implement various interactivity for users to the website. One of its first uses was in the search bar which expands when clicked.
|
| Fig 1.4 Search button expands when clicked. |
|
| Fig 1.5 Javascript code to toggle search bar |
As I had limited knowledge about how to write it, ChatGPT was used to help create this script. Multiple behaviors also needed to be expressed to improve usability.
I also used JavaScript to create a smooth transition from a
transparent navbar to a dark background after scrolling more than
80px. This will keep the hero image in the homepage clean and prevent
overlapping texts as users scroll.
 
|
||
|
Fig 1.6 Navbar scroll transition from transparent to dark
background
For the footer, I first tried to recreate it based on the
prototype. Using the font Paulistana Deco, I exported this
SVG file to be used as the heading in my footer.
|
Though, with the lack of hyperlinks present in my content, I ended up
choosing a more centered design on my second attempt. This way all of the
links can be spread more evenly and and help with visual hierarchy.
The footer buttons also include aria-label as part of my improvement for
accessibility, in this case for those who use screen readers or those with
disabilities.
Fig 1.8 Footer first attempt
Fig 1.9 Footer second attempt
To note, I have tried to implement the footer and navigation as <iframes> into each page, though with much failure and tries I was not able to do it. Finalizing the the navigation bar and footer, I then place the codes at the start and end of each pages.
2. Homepage
As I was planning to make a somewhat database website, I knew that I will
have to sort out a lot of the movie screencaps. Before I started making
the website, I first listed various movies that I wanted to put in. A
folder for posters and another for screencaps of each movie.
 
|
| Fig 2.1 Images folder structure for JavaScript |
Unfortunately this method wouldn't be used as the process was too
complicated and with not enough time, I chose to do an html structure
instead.
Using bootstrap's carousel base I attached three screencaps and added
a few buttons as shown in my prototype for viewing, liking, and
sharing. Each buttons taken from bootstrap were edited to have hover
styles that feature the secondary color.
|
| Fig 2.2 Homepage hero carousel |
 
|
| Fig 2.3 Carousel buttons and the CSS used |
For the screencap columns. I decided to remove the film roll border
from my prototype to reduce visual clutter. At the same time, I still
retained the gradient line that was present in my design. Instead of
creating them in Illustrator, I made them in CSS instead.
|
| Fig 2.4 Gradient line properties in CSS |
The screencap columns are actually held by a horizontal scroll instead
of a multicolumn carousel. This way the presentation of the screencaps
can have less constraints and can show more visible items per slide.
This will also be important for for mobile optimization.
|
| Fig 2.5 Screencap column using scroll-row styling in CSS |
|
| Fig 2.6 scroll-row properties in CSS |
Each screencap were also given an overlay that would appear on hover, revealing the screencap's movie title, year, including buttons for like and viewing.
 
|
| Fig 2.7 Screencaps show the title alongside interactive buttons on hover |
The like and heart buttons were made interactive using JavaScript which allows them to be toggled on and off. The script detects when the button class is clicked to toggle its active states.
|
| Fig 2.8 Javascript behaviour for like buttons |
Movie List
Moving on to the list page, I used bootstrap's <dropdown> menu for
the title which features a movie filtering and also used it in the search
sorting as well.
|
| Fig 3.1 Title and search filter with selectable labels |
For it to be able to change its label's into the selected choice, I used Javascript behaviors that update the label based on the option. The ternary conditional allows users to go back to its original state when clicking the same label again.
|
| Fig 3.2 Dropdown label Javascript behaviour |
For the movie posters themselves, the container is a row that uses bootstrap's g-4 spacing. Several bootstrap column classes are placed for different screen size optimization. The hover feature highlights the title and shift the image down by 5px.
|
| Fig 3.3 The movie poster list spread |
Currently each poster only leads to the Skyfall (2012) content page when selected by users.
|
| Fig 3.4 Each movie poster column |
The list page also includes <pagination> from bootstrap to view
more movie posters. I have changed the style so that the selected page is
highlighted with the secondary color (#FF3D00) and hover features the
primary color (#FEFEC8). Currently, the pagination only works as a stand
in.
 
|
| Fig 3.5 Pagination of the movie list page and CSS style |
Content Page
For the content page, I am using screencaps from Skyfall (2012).
Although the original website contains hundreds of screencaps per movie, I
only used 6 for now to demonstrate this page.
|
| Fig 4.1 Skyfall (2012) selected screencaps for the content page |
I noticed that the image had black borders which I thought was caused by
the image not fitting my container. Some of the images then needed to be
cropped properly in Photoshop.
 
|
| Fig 4.2 Screencaps black borders need to be resized in Photoshop |
Fig 4.3 Final content page view
At first I wanted to have a static one picture screen which displays the screencap that was viewed. Though, for interactivity I turned the image into a carousel that allowed it to shift between the rest of the images.
I also used Javascript that creates a screencap counter based on the
carousel that is made. The script also automatically calculates how many
elements exist inside the carousel to determine the total item count.
 
|
| Fig 4.4 Carousel page counter in Javascript and how it looks |
Aside from the description section of the content page, the bottom section includes several interactive visuals. Each of them have hover properties as part of my redesign on improving responsiveness.
|
| Fig 4.5 Bottom section of the content page; colors, other screencaps, tags. |
|
| Fig 4.6 Example of hover effects on the content page |
As all of the other hover effects, they have transition property that ease in the changes that is happening under :hover.
Color Page
For this special page, I first tried to organize all of the colors
that are available in the original website. I organized them from
highest saturation and brightness to lowest.
|
| Fig 5.1 Colors from the original page organized in Photoshop based on HSB |
I also intentionally did not include the rest of the colors such pink, white, and grey as what was shown in the original website to make it more simplistic and make it easier to navigate.
Placing the title of the page, I added a gradient line effect that was
used similarly next to the categories title at the homepage. I tried
to reuse the CSS, but the settings had to be different for each of
their uses.
 
|
| Fig 5.2 Color page title including gradient line effect in CSS |
As part of my redesign, the colors are now laid out in bootstrap's 10 grid column system alongside their respective hex codes that are placed inside the boxes. The boxes themselves are styled with 120px sizing.
|
| Fig 5.2 Color boxes spread with hex codes |
|
| Fig 5.3 Color box CSS styling |
Contact Page
The contact page was straightforward enough to make. It uses bootstrap's
form components which helps at creating consistent spacing and focus
states aside from the styling.
|
| Fig 6.1 Contact page form |
|
| Fig 6.2 Contact page html code |
I also removed the social media icons compared to the prototype as I thought it would be redundant to put it on this page as the footer already includes all of the icons.
Mobile & 4K Optimization
Initially I did not intend to design this app with a mobile version, as
seen with the lack of it during my prototype stage. I also thought that by
using bootstrap, moving things to mobile would be much easier. Though,
there were a lot of challenges that came with it.
I set my @media (max-width: 768px) as this is the width where the layout will still be used for tablet devices.
I set my @media (max-width: 768px) as this is the width where the layout will still be used for tablet devices.
For my homepage, my links in the hamburger menu were all appearing on the left and without any background. This was a
tricky fix as not only did it break the most basic setting, but I also
needed to change the profile icon to match the rest.
|
| Fig 7.1 Navigation bar dropdown in mobile before fix |
I created a mobile version of the navbar that would hide during desktop
view and appear during mobile. This allowed the search bar to be pushed to
the top and replace the profile icon into the word "Profile" to match the
rest. Although it doesn't look organized enough, this is as much as I am
able to change it
|
| Fig 7.2 Extra hidden mobile navigation for hamburger navbar |
 
|
| Fig 7.3 New optimized dropdown navigation bar using CSS |
 
|
|
Fig 7.4 before and after carousel resizing |
In the list page, the issue came about when one poster spans the whole
page. The fix was easy enough to change the poster height and setting the
poster images as "object-fit: contain;".
 
|
| Fig 7.5 Before and after size changes |
The content page's issue comes at the mini screencaps with the images
leaking out to the side. This was fixed using "flex-wrap: wrap;", which
wraps the images and pushes them down instead of to the side.
As soon as I set a smaller height for the mini screencaps then the issue was resolved.
 
|
| Fig 7.6 Images need to be resized for mobile optimization |
To optimize in 4k, I set the @media (min-width: 1920px). Which
means anything above that width will be changed. Here are some of the
notable changes.
The screencaps n the homepage are not only bigger, but they span the
whole page. the same goes with the carousel covers the whole screen. the
height is set at 70vh, which means 70% of the browser's height.
|
| Fig 7.7 Homepage 4K optimization |
In the list section, the list of posters are now able to span 6 posters from side to side. I used "flex: 0 0 auto; width: 15%;" overriding the Bootstrap rules and letting more images to take more space per row.
|
| Fig 7.8 4K optimization for movie list page |
Demo / Testing
Fig 8.1 Desktop view demo video test
Fig 8.2 Mobile view demo video test
Final Submission
Fig 9.1 Screenmusings website screen grab at 1440px
Back to top
Reflection
The final project was very tough for me and I had spent a lot of
nights just trying to make codes work so that everything works
correctly to my prototype design. When I do one thing to to fix a code, something else ends up breaking. Even with that, I learnt a lot
just from the process of doing this project. I know that there is still a lot of room for improvement in my website, from optimization and even to experimentation. I wish I had more time to implement the searching and filtering mechanic for each screencap using JavaScript as I promised on trying to achieve in my prototype.
I had underestimated this project, but I'm glad I pulled through. Throughout my process, I also have developed a better sense of design skill, noticing what looks pleasing and aesthetically interesting. I do hope to implement this skill further in my studies and work life. All in all, I hope my hard work not only can be seen in my website but also future projects made by me.
I had underestimated this project, but I'm glad I pulled through. Throughout my process, I also have developed a better sense of design skill, noticing what looks pleasing and aesthetically interesting. I do hope to implement this skill further in my studies and work life. All in all, I hope my hard work not only can be seen in my website but also future projects made by me.
Comments
Post a Comment