Labels

INTERACTIVE DESIGN | PROJECT 2: WEBSITE REDESIGN PROTOTYPE

 

31.10.2025 - 29.11.2025 /Week 7 - Week 10

Project 2: Website Redesign Proposal

Loh Kai Xuan (0365780)

TABLE OF CONTENTS



LECTURE


Week 8

Lecture Slides:

Fig. 1.1. Week 8 Lecture Slides


Class was canceled but we were given lecture slides and recorded videos.
Project 1: Website Redesign Proposal

Introduction

My selected topic was the Victorian Web. An online encyclopedia about the Victorian Era.

Fig. 1.1. The Victorian Web Homepage


Below attached my proposal slides.

Fig. 1.2. Project 1 proposal slides


Protoype Brief:

The Victorian Web is an academic and scholarly website that presents its images and documents, including entire books, as nodes in a network of complex connections.

In other words, it emphasizes the link rather than the search tool (though it has one) and presents information which is linked to other information, rather than atomized and isolated

For the prototype, 5 pages were developed:

1. Home Page
  • Logo Header
  • Dropdown Menu
  • Category Browsing

2. About Page
  • Brief introduction
  • Mission
  • Purpose
  • How we do it
  • Impact
  • Story

3. Contact Page
  • Email and social media contact
  • reasons for email
  • email guidelines
  • Frequently asked questions

4. Authors (Content Page)
  • Author Browsing
  • Author Photographs

5. How to cite?
  • Citing instructions

*added footer to the website
  • logo + website name
  • Social Media
  • Charity Organisation indication

The logo was redesigned to be more simple and recognizable by using the silhouette of a penny and neater arrangement of the website name. Moreover, The font family Georgia was used to standardized the fonts instead of the original website which did not have a font set. Colours were also reselected to fit the aesthetics of a "Victorian" website. Warm White and Green were chosen to allow long reading without eye strain due to this being an informational website.

Since the original about page was just a wall of text, it is redesigned to be more spaced out. It was further categorized. The text was also summarized and shortened for easier understanding. 

To enhance visuals and interactive elements, the category selector was rearrange from a diamond to a grid of rounded squares, paired with images and subtitles below for easier browsing. A dropdown menu was also added to ease the searching process. Hover is added to any interactable elements. For the square elements in category, it will slightly jump up on hover, and lighten the text to imply interaction.

For better visuals, images were added on each page after the header. the hero image helps with catching the attention of users as well as an introduction to the page. 

The language toggle and other buttons were redesigned to give the impression that it is clickable instead of just text. Other than that, a back to top button was added in case of user scrolling too far down in their search. 

The purpose of the Victorian Web was to encourage users to search for information like they are in the library, learning different things on the way to searching for an answer. So a decision was made to remove the search tool as it was already really obscure in the original website. 

Lastly, the readability issue. The original website only has a one column arrangement with all text being there and unclear hierarchy. To fix that, the information is sectioned into several parts, including the selectors that were categorized by type in the dropdown menu. A footer was introduced to provide consistent information across all pages along with copyright label. 


Final Result:


Feedback

Week 10

Add more whitespace and make the call to action button more obvious.

Week 11

Add a hero section, change the ovals to larger images covering the page. Contact button should be below the home page title text. Make the contact button more important. Add a form in the contact section. 

RREFLECTION

Week 7-11

This project was challenging as it is my first time designing a website. But the fact that it was a theme i like made it easier. It was definitely fustrating because I have never used figma or Adobe XD before. However, I'm happy with the final product.


Labels:

Comments

Post a Comment

Popular Posts