Interactive Design Project 2: Website Redesign Prototype
27 April 2024- 3 July 2024
NABIL JULIUS DORN (037978)
(INTERACTIVE DESIGN) | Bachelor of Design in Creative Media | Taylor's
University
Project 1: Website Redesign Prototype
Week 6 - 8
List
LECTURES
INSTRUCTIONS
This is the Module Information Booklet for this module:
PROJECT
Objective:
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.
The website I have chosen to be the subject of my redesign, is a
corporate signage making company called
TAG TEAM SIGNS
Visual reference:
|
| Visual reference |
Redesign prototype summary:
Current issues with the TTS layout:
- Lack of hierarchy
- Lack of clear call to action
- Non-memorable design
Key features from references:
- Large, captivating pictures in the hero section
- Prominent call-to-action button paired with the hero image
Category Section Design:
- Bold, eye-catching headers resembling folders
- Helps users easily identify content
Cohesive Color Scheme:
- Bright and contrasting colors to emphasize key sections
Breakdown of redesign:
Color palette chosen for the redesign
 |
| Color palette |
Components
 |
| Components of website |
Summary of redesign:
For the prototype, I decided to only create 3 pages as following the references and proposal, the rest of the content of the website will be in a folder like drop down (accordion). The reason for this is that there isnt a lot of information needed on the website itself.
That being said, the three pages are the Landing page, Contact Us page, and a dedicated design page.
Landing page:
This is where the viewer will arrive at when they connect to the website.
 |
| Landing page |
The landing page will consist of a hero image along with a call-to-action button. Below that is the accordion folders that reveal more information when clicked. There is also a floating Customer support chat button on the bottom right of the website. This is consistent in the other two pages. Lastly, there is the footer of the page which consists of shortcuts to the folders, other pages as well as other ways of following the company.
Contact Us page:
When clicking the Contact us button on the navigation bar this is the page
 |
| Contact us page |
In the contact us page, the viewer can fill in the required fields and submit a message to the company. They can also opt to subscribe to the newsletter of the company for more information. There is also more contact information shown about the company which provides the viewer with more methods of getting in contact with the company.
Design page
 |
| Design page |
In this page, the viewer is given the freedom to submit their own custom design or use a template provided as a base to create their design. They can then submit it and get get a quotation from the company. This allows viewers and potential customers to gauge their interest.
Final Redesigned Prototype:
 |
| Redesigned prototype |
Redesign in Figma:
Comments
Post a Comment