Label

Interactive Design : PROJECT 2 - Website Redesign Prototype

Week 6- Week 9 (21/05/2025 - 18/06/2025)

Katherine Alexandra Sutanto / 0373585
Interactive Design / Creative Media / School of Design
Project 1 / Website Redesign Proposal

TABLE OF CONTENTS

1. Lectures

2. Instructions

3. Task

4. Reflection


LECTURES

Week 9 – The Box Model & Display Property

The display property in CSS plays a fundamental role in layout control. Every HTML element has a default display value, typically either block or inline.

Block Elements

The <div> tag is a standard block-level element. Block elements begin on a new line and expand horizontally to occupy the full width available.

Inline Elements

The <span> tag represents a typical inline element. Unlike block elements, inline elements do not start on a new line and can be inserted seamlessly within a paragraph —
for example: <span>like this</span>.


Other display values include:

  • inline-block

  • flex

  • grid

These values offer more flexibility and control when creating complex layouts.

The Box Model

In HTML, most elements act as containers — for example, <body>, <p>, <h1>, <div>, <ul>, <li>, etc. Each of these elements can be visualized as a box made up of several layers surrounding the content:

  • Padding

  • Border

  • Margin

Fig. 1.3 – Box Element

The size of each layer in the box model can be controlled using standard CSS units like:

  • px (pixels)

  • % (percent)

  • em (relative to font size)


Flexbox

CSS Flexbox is a modern layout model ideal for building responsive designs. It provides powerful alignment, spacing, and distribution tools — all while leveraging the principles of the Box Model.

INSTRUCTIONS




TASK

RECAP:
The goal of this assignment is to transform our website redesign proposal into a working prototype. This prototype should visually and interactively showcase the proposed changes, demonstrating your understanding of design principles and user experience (UX) strategies.

Building on our previous assignment (the Website Redesign Proposal), we are expected to create a prototype of the redesigned website. This prototype should accurately reflect the suggested visual enhancements and UX improvements, offering a clear representation of the intended final product.

To start with, I'd use the wireframe as my main reference to start the layout of the design.

Fig 3.1 Wireframe




Typefaces & Color Palette:
Before going any further, I'd have the typeface prepared which is Champion Gothic-Featherweight. As for the rest of the supprting contents, I'd use Josefin Sans-Light, Kodchasan-Regular and finally, Jersey 25-Regular.


Fig 3.2 Champion Gothic Typeface


Fig 3.3 Josefin Sans, Kodchasan, Jersey 25


As for the colour palette itself, I took the primary colours based on the original page and enhance it with an extra gradient. Color palette is as follows:

Fig 3.4 Color Palette



KEY FEATURES:
- Menu bar
- Hovering effects on buttons
- Navigations

Implying the components: 

To start, I'd select the desired elements and turned them into elements, thus making a variant in order to make a hovering effect for each buttons.


Fig 3.5 Turning into components & Variants


Fig 3.6  Created Components & Variants


To develop more of graphic use within the website design, I'd pick images from direct sources which are as follows:

Fig 3.7 Images


This is the first attempt of the website design within the prototype. These are the results that I submit to Mr. Shamsul for a consultation material.

Fig 3.8 First attempt

After the feedback I received, I made some changes in order to improve. The feedbacks that I received are:
- The title 'The Room' should be in the original logo
- No need fading effect on the second slide of first page
- Add more buttons
- Change the word 'Blu-Ray' into the logo itself
- Change 'Click to watch' into the Youtube icon/logo
- Contacts should be in a separate page instead of a scroll effect
- Contacts should have more information
- Menu bar too big, should be smaller
- Paragraphs too long, should be shorter 

Fig 3.9 Before & After, First Page


Fig 3.9 Before & After, Icons


Fig 3.9 Before & After, Contact Slide


One of the feedbacks regarding adding one page for the contact is as following:


Fig 3.10 Contact Page



DEVELOPMENT DECISIONS
To conclude the development process, decisions are made where I'd change the look of some graphics and even make a brand new page to fit more into the standard. At first, I made 3 pages as the original website are lacking of clear navigation so I'd over simplified it. After, consulting with Mr. Shamsul, I realized that I was trying to fill up the pages without actually putting enough information, which that is the first mistake I'd come to fix. The most crucial part I fixed was the contact slide where you can access it by scrolling down to the lowest part of each pages and clicking the menu bar to release an animation/automatic scroll to the slide. However, Mr. Shamsul disagrees and strongly implies that contacts should be put in a new page, in which I made a brand new page for the category.

I'd still try my best to stay put the the aesthetic I intended to imply with the changes of graphics and slide transition choices such as changing or removing graphics. Such as the title changed into the actual logo of the movie, changing the word 'Blu-Ray' to the logo of the Blu-Ray itself, re-made the menu bar, etc.

KEY FEATURES:
- Menu bar
- Hovering effects on buttons
- Navigations

OBJECTIVES/GOALS WITHIN THE PROTOTPYE

Goals:

  • Ensuring users can move through the site effortlessly.

  • The layout adapts seamlessly across screen sizes.

  • Use of prominent titles and well sized text for readability.

  • Icons, buttons, and styling follow a consistent visual language.

  • Short, focused paragraphs with clear headings to aid scanning.

  • Visual Consistency, balanced color palette, uncluttered design, and clean typography enhance user experience.

Rationale:

  • A modern minimalist aesthetic.

  • Clean layout, arrangement and straightforward use of colors.

  • Neat arrangement of main contents and informations.

How the prototype aligns with the objectives:

While creating the prototype, I remained focused on the objectives outlined in the redesign strategy. Here's how the design meets those goals:

Starting from Navigation Accessibility, a navigation menu is placed consistently at the top-center of every page, allowing users to move easily between sections. Content Hierarchy, headlines are bold and clearly separated from the body text, which is kept at a comfortable reading size for clarity. Structure, text content is broken into short, digestible paragraphs with appropriate headings to guide the reader. Color and Theme, A complementary color scheme was chosen primarily red and black balanced with white to support a sleek, professional appearance. This fits well within the modern minimalist style. Clean Aesthetic, the design leverages negative space, maintains alignment, and uses a single sans serif font in various weights and sizes to maintain visual interest without clutter. Visual Consistency, repeated use of consistent buttons, icons, and logo placement ensures a coherent visual experience throughout.


FINAL OUTCOME


Figma Link: The Room



REFLECTION

Experience

Redesigning The Room website was an enriching and hands-on experience. It gave me the opportunity to apply user-centered design principles in a real-world context. This process challenged me to think critically about how design choices affect usability and visual impact. Working through the redesign allowed me to develop a more practical understanding of how to align design aesthetics with functional user needs.

Observation

Through a detailed review of the existing site, I noticed several key areas that needed improvement particularly in navigation, consistency, and overall structure. The layout lacked clarity and cohesiveness, which made the user journey confusing. By comparing it to professional websites with stronger UX design, I gained insight into how layout, spacing, and design hierarchy can significantly influence user interaction and perception.

Findings

This project highlighted how effective UX and visual design choices can elevate a brand's digital presence. Strategic use of layout, consistent elements, and simplified navigation not only improved the user experience but also made the site more visually appealing and engaging especially for younger audiences. Overall, I found that thoughtful design decisions have the power to make a website feel more modern, trustworthy, and memorable.

Label:

Komentar

Posting Komentar

Postingan Populer