INTERACTIVE DESIGN-PROJECT 2 : WEBSITE REDESIGN PROTOTYPE
03.06.2025-17.06.2025/ Week 7 - Week 9
Christopher Jayson Tan/ 0378500
Interactive Design / Bachelors of Design (Hons) in Creative Media /
Taylor's University
Project 2 : Website Redesign Prototype
TABLE OF CONTENTS
1. INSTRUCTIONS
2. PROJECT 2 : WEBSITE REDESIGN PROTOTYPE
3. REFLECTION
INSTRUCTIONS
PROJECT 2 : WEBSITE REDESIGN PROTOTYPE
Navigation Bar & Footer
I only made some slight changes to the navigation bar and footer because the original one is already fine, the only major thing that I change is the placement of the contact us from the footer to the navigation bar because placing it on the footer is just bad design regarding the visibility and accessibility, especially for a website where interactions are key (Because this is a website to pull in more investors and so the company need feedback). I also made the navigation bar not too cluttered by placing an arrow going to the right, give off the impression that they are "scrollable", but i didn't know how to animate it so i just let it be.
Home Page
I wanted to redesign the website so that it looks tidy and feels tidy. The Dharma website is very chaotic in my opinion because everything is just cluttered and so that is my purpose, to change the whole layout while maintaining a tidy look. Comparing the default homepage with my homepage prototype, I have significantly change the layout of how the website presents the information. I utilized the big image as a background as well rather then just using it as a standalone image, because it is very useless in my opinion and makes the website more tedious for the people who visited. I made segments to the information as well so that visitors can identify them more clearly and not get overwhelm.
Figure 2.2 Homepage comparison
About Us Page
Keeping the simple look going, i utilize the large image as well by placing several different information. I also made the text part look clearer by placing a written text "Our History" above the paragraph. This is because users can get easily confused on what information are being presented if the website only shows a paragraph of text with a vague image.
Contact Us Page
I didn't change the contact us page that much because it already looks acceptable from my perspective and so i only decided to change the positioning from right to left because right positioning is pointless, removed the address as it is already present in the footer, and added a "Contact Us" to encourage visitors to get in touch.
Components
I only made 4 main components for the feedback animation. I made a green rectangle shape component for the footer because there is a button that is green in color, a blue rectangle shape component for the blue buttons that are present all over the website, and some word components for the words that are meant to be interactable. For the shape components I only made a variant where they change the color when I hover over them and for the word components I made one where they move to the side and change color, as well as a component where they only change color. I applied smart animate for all of the components so that they look clean. I also made an image component where they change slightly darker when I hover over it but its only for aesthetic reasons so I didn't include the image.
Figure 2.5 Components
Revisions
I made some revisions regarding the design. Mr. Shamsul gave me some feedback on how I can improve the website design and from those feedbacks, it help me see the design flaws.
I started by changing the alignment on some of the objects as well as improving some tiny details such as adding more things to the footer to make it less empty and improving the image quality in the news section.
Figure 2.6 Slight changes
The footer and navigation bar also got some changes but it is very minor. I placed in more things inside the footer so that it is less empty, the navigation bar on the other hand got more revisions. I erased the arrow scrolling button because it is a bad design, I also reduce the contents on the navigation bar because some of them are quite irrelevant. I also added the word Dharma Polimetal to the logo to add more context and clarity.
Figure 2.7 Navigation bar and footer
The biggest change has to be the about us page because I completely overhauled them. I divided them into 3 separate pages, because the current design will have problems when i turn it into an actual website because of the big imagery that will keep on changing. I combined some of the categories so that it is not crowded such as the company structure and organization structure as structure, journey and history as legacy, removed awards (because it is already available in the homepage), and made missions as well. For the structure page, i had to use the image from the original website because i didn't have enough time to make it from scratch but it will be changed in the actual website.
Figure 2.8 Revised about us page
Figma Prototype :
https://www.figma.com/proto/YDo4G0f77wBJEfuRkQWSEf/Untitled?node-id=1-703&t=HBBODvKCqfaNEjHU-1
REFLECTION
This assignment is interesting in some ways but its really not that enjoyable. It's really cool to see a side of website making that I've never seen before and i get to have a glimpse on what I'm capable of but the software itself is quite janky at times. It's probably my lack of experience on using this software but it still doesn't change the fact on how confusing it is. The component variants sometimes doesn't show the changes when you do a specific actions (when you hover, click, etc) which is very mindboggling because when I checked the status of it in the prototype it's actually correct. Another thing, this software has quite different layering system than the others that I've used where it's somewhat more restricted and sometimes when i move the layer, it doesn't actually move and this happens quite a lot. The prototyping section is also frustrating because if you accidently drag an object, it immediately gets an assigned action that it will do. Overall, this project is intriguing but overshadowed by complications present in the software.
Comments
Post a Comment