Interactive Design - Project 2
25.11.2024 - 7.12.2024 / Week 6 - Week 11
Lim Pei Jiun (0372548) / Bachelor of Design (Hons) in Creative Media
Interactive Design
Project 2
Introduction
Project 2 : Website Redesign Prototype
The objective of this assignment is to translate your website redesign proposal into a functional prototype. This prototype should visually and interactively represent the proposed changes, demonstrating your ability to apply design principles and UX strategies effectively.
Building upon your previous assignment (Website Redesign Proposal), you are now required to develop a prototype of the redesigned website. This prototype should reflect the proposed visual design and user experience improvements, providing a tangible representation of the final product.
I develop a website using Figma. I changed a lot of my original design when developing the prototype because I found that the original design still had many shortcomings, such as color matching and layout. Originally it was in the same black and white color scheme as the original website, but I thought it looked too monotonous, so I changed the color scheme.
Here are the final color palette.
Fig 1.1 final color palette
I made the top and bottom designs the same to make the whole look unified. I tried using different designs, but they looked a bit cluttered, so I gave up on using different designs.
Below are the screenshot of my prototype layout.
Fig 1.2 overall layout
After designing the overall layout, I added some interactive buttons and pictures to the prototype. I added the effect of zooming in or out when the mouse is hovering on some pictures, which improved the weak interactivity of the original web page. All buttons have also been added with an effect that changes color when the mouse is hovered over.
Fig 1.3 prototype process
Besides, the pictures in "RECIPES" on the Home page can jump to the Recipes page. This design is because I don't want all jumps to be done only through buttons. Making images jump around can be more interesting.
Fig 1.4 Jumpable pictures
Website Redesign Prototype Link:
Key features of the Prototype:
The overall design of the prototype is simple and elegant, and the main color retains the dark tone, but is changed from the original black to dark gray. This is because the only color that can match black is white, but if it were only black and white, the overall color would be relatively monotonous, so I changed the color to dark gray that goes well with it. Secondary colors are off-white, light brown and orange. These three colors are very harmonious and can also make the overall design look warmer, avoiding the overall darkening due to dark gray. My button has two colors, the button is orange on a dark gray background and black on an off-white background. This is to give it a sense of contrast. The fonts I use are Inria Serif and Fira Mono. Inria Serif is very consistent with the feeling of Bartender's Choice, while Fira Mono is clean and elegant, which fits the overall design very well. Some of the photos have rounded corners and some have sharp corners. This is because round pictures look softer when introducing yourself and can increase your goodwill. Pictures with sharp corners are more suitable for important times such as introducing products, and can look more professional.
Design decisions made during development:
I added some interactive buttons and images to the prototype. I added a zoom-in or zoom-out effect when hovering over certain images to add some interactivity. All buttons also have an added effect that changes color when the mouse is hovered over them, which is a great addition to the visual effect. For the navigation bar, I kept it fixed at the top. When sliding, the navigation bar remains at the top. This makes it easier for us to switch pages through the navigation bar at any time when sliding. The navigation bar of each page will display colors on the buttons of the page. This is to facilitate users to identify the current page and improve the user experience. I also added several buttons to the content of the homepage to allow users to jump to the parts of interest without necessarily looking for buttons on the return navigation path.
How the prototype addresses the objectives set in the redesign proposal:
Just like the problem of weak interactivity I mentioned in my proposal, the prototype added many interactive buttons and pictures to increase the user's experience and visual experience. These buttons also allow users to learn more information. Besides, most of the original website only provides pictures, and users cannot understand more comprehensive information, so they will be very confused. The prototype improves this by adding a lot of text descriptions and viewing them with images so that users can better understand the website. The static images of the original website have also been changed into interactive dynamic images, making the website more interesting. In addition, the original website had a very simple navigation bar, with only a contact page. The prototype adds other pages to enrich the navigation bar, making it easier for users to jump to pages they are interested in.
.jpg)
Comments
Post a Comment