Interactive Design: Project 2 - Website Redesign Prototype

Interactive Design: Project 2 - Website Redesign Prototype
-

5.11.2025 - 26.11.2025 / Week 7 -Week 10

Dave Christian Moniaga / 0385630

Interactive Design / Bachelor of Design (Hons) in Creative Media

Project 2 - Website Redesign Prototype

---

Table of Contents

1. Lecture
2. Instructions
3. Project 2
4. Feedback
5. Reflection

---

Lecture

Week 7: Box Model

Every element has a default display value, usually block or inline. 

Block level element starts on a new line and stretches to the left and right as far as it can. layers on top of one another; top to bottom. For example: <div>

Fig 1.1 Block-level element visualization

Inline element stays on the same line and can wrap some text inside a paragraph. For example: <span> 

Fig 1.2 Inline element visualization

You can override these display elements to customize and create display that have particular semantics (inline <li> for horizontal menu).

Most HTML elements (body, p, h1, h2, div, ul, ol, li) are considered container/box. Each box has three layers that surrounds it:

• padding
• border
• margin

Each size of the layer can be changed in CSS (em, %, and px).

Fig 1.3 Box model layering

Here is an example, a <p> element wrapped inside a <div class="col"> in addition to CSS can create a box model in your website:

Fig 1.4  CSS style for box model

Fig 1.4  Box model example using CSS

box-sizing: 

border-box can retain the size of the container without adding padding

Fig 1.5 value specifies for viewing on that particular device

Week 8: Position

Position property in CSS controls the position of elements and determines how it is displayed. The position property has 5 values: 

1. Static (default)
• Positioned in normal flow of document, they are not affected by top, right, etc properties 
  
  

  

  Fig 2.1 Static position in CSS

  
  
  
2. Relative
• Relative can use top, right, bottom, and left properties to move it around. Other elements will still stay in their original place.
  
  

  

  Fig 2.2 Relative position in CSS

  
  
3. Absolute
• They are positioned to the nearest ancestor with a value other than static (relative, absolte, fixed), if not then to the initial containing block (viewport)
  
  

  

  Fig 2.3 Absolute position in CSS

  
  
4. Fixed
• Positioned relative to the viewport, and doesn't move when page is scrolled.
  
  

  

  Fig 2.4 Fixed position in CSS

  
  
5. Sticky
• Positioned to the normal flow of document but once it reach a specified position (top, right, bottom, left) it will stick and be fixed at that position.
  
  

  

  Fig 2.5 Sticky position in CSS

---

Back to top

Instructions

Back to top

Project 2: Website Redesign Prototype

To recap my proposal, I am redesigning a website called Screenmusings, a website that features a collection of movie screencaps and a color database.

Following my construction of the new redesigned wireframe, I developed a working prototype in Figma which should show a list of examples on how the website would look and operate like.

My prototype for this website includes 5 pages:

1. Homepage 
• Includes a hero section
• Featured screencaps based on newly added and genres
• Each featured screencap can be hovered to see more details
   
2. Index page
• List of all movies 
• Search bar with filter system
• Movie listed are presented with their poster
  
  
3. Special page (Color Lab)
• List of colors that can be chosen to show screencaps with corresponding color
• Main colors are listed with their mood and meaning
• A button that leads to the movie's color
  
  
4. Content page
• The main movie screencap that was chosen
• Details about the movie's director, cinematographer, and actors.
• Buttons to like, share, and download the screencap
• Displays the color palette of the movie screencap
• Features other screencaps of that movie as well as tags
  
  
5. Contact page
• A form list for name, email, phone, and message.
• Button function to send message & details.

From my redesign goals in my proposal, I focused on improving the overall look and user experience of the website itself.

One of the objectives mentioned in my proposal was the layout and navigation, which has been improved by creating a more clean arrangement of information and visuals. Navigation is also improved as it is now a fixed navigation bar and I reduced the amount of unnecessary clickable links and buttons, transforming them into part of a dropdown filter system in the index page.

Fig 3.1 Navigation bar: original (top); redesign (bottom)

Fig 3.2 Original links converted into dropdown filter menu in Index page

As part of my objectives, the logo redesign was also done. A more sleek, clean and high resolution logo that still mimics the old one will not only replace the website's icon, but also replace the website title presented in the navigation bar. In addition to that, having two very contrasting typefaces also helps at separating visual information of a page, such as between heading and body text.

Fig 3.3 Logo design: original (right); redesign (middle & left)

I also implemented interactive visuals as it was lacking in the original website. The homepage now presents screencaps that are arranged based on the newest addition and their genres. The screencaps enlarged when hovered and can be dragged to the right  to reveal more. In my redesign users can now create accounts and like/favorite a screencap into their collection. Buttons for sharing and downloading are also featured in the content page. 

Fig 3.4 Newly added screencap listed in the homepage

Fig 3.5 Icons for accounts, like, share, and download

Accessibility and usability was also an important aspect. By choosing a more harmonious and contrasting color choice, I can use colors to indicate when a color is being hovered, clicked, and chosen. The implementation of buttons also comes with consistency of colors, corner radius, and text style. Aside from that, textual information that are presented in the website have been spaced evenly and presented throughout the pages instead of having it all crammed together.

Fig 3.6 Buttons and links that turn orange when hovered

Fig 3.7 Text information: original (right); redesign (left)

My recent feedback was that the current page looked outdated in regards to its style and layout of information. With that, I refined the website again, rearranging the elements making it more streamlined as well as removing some visual elements that make the overall website look messy.

Here is a side by side comparison of the original page and my prototype redesign: 

Fig 3.8 Landing homepage: original (left); redesign (right)

Fig 3.9 Content page: original (right); redesign (left)

Fig 3.10 Index page: original (right); redesign (left)

Fig 3.11 Color lab page: original (right); redesign (left)

Fig 3.12 Contact page: original (right); redesign (left)

A few things to note about the prototype, 

• Currently the prototype does not smoothly display the hover effect that will reflect in the final design. Alternatively, the effect should look more like this as shown in the GIF.

Fig 3.13 Desired hover effect on screencaps in homepage

• The prototype is unable to implement the typing effect into the search bar as this is only available for Figma Premium.
• The about page currently redirects users to the contact page.
• The color choices does not link the user to a collection of screencaps with its corresponding color.

Prototype Final Submission

Fig 4.1 Prototype spread in Figma

 

Fig 4.2 Project 2: Website Redesign Prototype - PDF

Fig 4.3 Project 2: Website Redesign Prototype - Figma

---

Back to top

Reflection

In my process on doing this project, I realize how I have so much more to learn in my design language and ideation. Whether it is because of my taste or not having seen enough good examples, it seems that it has limited my ability in able to create something that doesn't look generic or overall too outdated. Looking back at the outcome again, I do believe I can do better and that the wireframe that I have made certainly shouldn't be something that I have to fully rely on. That being said, I learned a lot during this project and I have made plans to improve myself and continue to develop my sense of good design.