Interactive Design Project 2: Website Redesign Prototype
Ameera Rihana binti Remy Ansara
Bachelor of (hons) in creative media
Project 2
Lecture
Project 2: Website Redesign Prototype
Recap
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.
__
Organizing content & main pages
In this project, we were given a choice to use Figma or Adobe XD to create our own prototype. We began using our own proposal as the guideline to plan out the website's layout (Project 1). Based on project 1, my website theme will be based on a local diner that makes delicious burgers to promote their food. Before I start working on the prototype, I listed down the content that is required and suitable.
a) Home page: It contains a carousel as the main attraction of the page that slides over that showcases interesting events. The below section provides a brief introduction to the restaurant's offering.
b) About Us page: It contains a brief story describing the brand's values and origins. The three feature boxes highlight the restaurant's strengths.
c) Menu page: It displays a filter on the left, allowing users to browse items based on different categories. In the main section, food items are shown in a grid layout with images and names for easy viewing.
d) Contact page: It contains the address, phone number and email. It also contains the location of the restaurant including their opening hours.
e) FAQs page: It contains a feedback form, where users are able to ask questions or give opinions about their services. In addition, a list of common asked questions are provided that use dropdown interaction for users to refer.
f) Footer page: The footer is set at the bottom of the page that provides jump link or excess information to their social medias when users reach to the bottom of the page.
Color Palette
According to the proposal, I decided to choose this color scheme as it further resonates with the style of the restaurant. To make it simple and consistent, I narrowed it down to five colors instead.
Fig 1.2 Chosen color palettes
Grid Layout
I started with simple grids to help me design the layout of the pages to ensure it is neat and organized.
Fig 1.1 Grids
Final Redesign Prototype, Figma
Comments
Post a Comment