Interactive Design Project 2: Website Redesign Prototype
20.11.2024 - 04.12.2024 (Week 9 - Week 11)
Kiew Ting Yi (Nicole) / 0361143 / Bachelor of Design (Honours) in Creative MediaInteractive Design
Project 2 : Web Redesign Prototype
INSTRUCTIONS
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.
Prototype Development:
Interactive Prototype:
Develop a clickable prototype that includes key pages and features of the redesigned website. The prototype should allow users to navigate through the site and interact with essential elements.
Tools: Use prototyping tools such as Adobe XD, Figma, Sketch, or any other relevant software to create the prototype.
Key Pages to Include:
Homepage: Present the main design elements, including navigation, hero section, and key content areas.
Core Content Pages: Develop prototypes for at least ONE core page (e.g., About Us, Services, Products) to showcase how the content is organized and presented.
Contact Page: Include a prototype of the contact page, demonstrating how users can interact with forms or other contact methods.
User Experience (UX)
Considerations:
Usability: Ensure the prototype reflects a user-friendly design, with clear navigation, intuitive interfaces, and accessible features.
Interactivity: Implement interactive elements (e.g., buttons, hover states, form fields) to provide a realistic user experience.
Submission:
A fully functional prototype ACCESSIBLE via a SHAREABLE
link or as a DOWNLOADABLE file.
A brief writeup in your E-Portfolio of (500–800 words) outlining the key features of the prototype, any design decisions made during development, and how the prototype addresses the objectives set in the redesign proposal.
PROJECT 2: Web Redesign Prototype
DRAFTS & PROCESS
After completing the slides for Project 1, my next step was to better understand the structure and layout for a forklift sales website. I started by analyzing various websites in the same domain, such as Yale, Hyster, and Crown, to gain inspiration. I took note of key features like their header navigation bars, hero sections, and overall wireframes to inform my design direction.
With a clearer idea in mind, I began building the prototype in Figma. I used plugins so that I could immediately generate the design on to Figma.
# Draft 1
# Draft 2(a) with Plugin
# Draft 2(b) with Plugin
# Draft 2(c) with Plugin
However, as the deadline approached, I realized I might not have enough time to fully code the site from scratch. To streamline the process, I decided to switch to Framer and I still tried to create a prototype all by own by using their built-in presets, but I found it lacking as now I got to focus on the design instead of code.
I decided to look for suitable free templates and found one that fit my needs. From there, I customized the template’s styles, replacing placeholder content with product-specific details. I also rewrote much of the copy to align with the products I was showcasing. I spent a long time fixing and rewriting, until I was proud of the outcome.
WEB REDESIGN PROPOTYPE FINAL OUTCOME
Link HERE
REFLECTIONS
Shifting from Figma to Framer was a tough decision, because I had to learn both softwares/design platform in such a short amount of time, but it allowed me to focus more on design and interactivity without worrying too much about time-consuming manual coding. Although I initially planned for a fully custom build, using a pre-existing template helped me work faster and achieve a clean, professional look for the prototype.
Shifting from Figma to Framer was a tough decision, because I had to learn both softwares/design platform in such a short amount of time, but it allowed me to focus more on design and interactivity without worrying too much about time-consuming manual coding. Although I initially planned for a fully custom build, using a pre-existing template helped me work faster and achieve a clean, professional look for the prototype.
