INTERACTIVE DESIGN - PROJECT 2: WEBSITE REDESIGN PROTOTYPE
NAME: Miao Xinjun
I.D: 0379525
SECTION: 02
Interactive Design | Bachelor of Design in Creative Media | Taylor's University
Weekly Lectures Note
TABLE OF CONTENT
1. INSTRUCTION
2. TASK
3.FEEDBACK (marking)
INSTRUCTION
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.
TASK
- My Prototype Link Here:
- Overview of the prototype design concept
This prototype redesigns The Egg Shed website, still adhering to the goal of introducing and promoting the farm's food and party customization services to users.
Prototype Features: This prototype consists of four pages: Home Page, Food Ordering, Venue Rental, and Our Story. These four pages contain the essential functions of the original website and fulfill its purpose of introducing and selling food and services to users.
Related Design Decisions:
1. Color Scheme: Unlike the original website, which used warm green as its main color, this prototype uses warm orange, yellowish-black, and off-white as its color scheme. During repeated browsing of the original website, I found that the sale of farm produce was more prominent than the party customization services. Therefore, when considering the prototype's color scheme, I tried replacing the warm green with warm orange, which better suits a website primarily focused on food sales. To make the website appear more professional to users, I used darker tones in the color scheme design, resulting in a prototype with a predominantly dark color palette.
2. Typography: In this prototype, I used a total of three fonts. These are Kalam-Bold for the main headings, Family Serif-Bold for other secondary headings or special information that needs to be distinguished from the main text, and Inter-Regular/Bold for the text itself. During the prototyping process, I also paid attention to the font sizes to maintain consistency within the same font type: the main headings are 96pt, subheadings are 36pt, the main text is 20pt, and some text uses a larger 24pt for layout purposes.
I also modified some main and subheading content to ensure the headings matched the text content, helping users quickly locate key information and facilitating website navigation.
3. Page Layout: In the prototype's Home Page, I added purchase links for food ordering and party planning services to the website's introduction. These links lead to the 'Food Ordering' and 'Venue Rental' pages respectively, helping users quickly understand the website's functions and usage, enhancing the user experience.
Comments
Post a Comment