Interactive Design / Project 2

on

17/10/2024--31/10/2024 (W4-W6)

LIU YITONG (0370907)

Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University

Project 2


INSTRUCTURE



PROJECT 2

Assignment Description
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.

Prototyping process
I decided to use Figma for this task, referring to the mood board I completed in my proposal.
Fig.2.0 Mood Board

Since I had no clue about web design before this, I started looking for some examples of web design to help me better accomplish this task.Then I started prototyping my website.
Fig.2.1 Reference


The main features of the prototype
When I redesigned the Marine Conservation Institute website, I prioritized functionality, usability, and visual appeal. This can better engage target audiences such as: environmentalists, donors, researchers, and educators.

Key features include:
Layout: The structure of the home page focuses on basic areas such as "what we do," donation opportunities and key conservation initiatives. At the same time, the blank area which is not reasonable before the redesign is optimized. This design eliminates unnecessary clutter and ensures that visitors can quickly find the information they want to read.
Fig.2.2 Home page

Navigation menu: The navigation menu is reorganized to reduce clutter. Related categories are grouped under broader headings, such as "Support Us" and the Donate button essentially explain the same content, so I combined them to make the menu more concise.
Fig.2.3 Navigation menu

Improved typography: I chose a clean sans-serif font (" Outfit ") to improve readability. The title was created using different font sizes, and the slogan that had previously occupied a separate part was integrated into the body. Creates a clear hierarchy that makes it easier to distinguish between headings, subheadings, and body text.

Interactive elements: I added more dynamic, visually prominent call to action buttons like "Donate" and "Join us," designed with a hover effect to increase user interaction.
Fig.2.4 Interactive elements

Enhanced visual appeal: High quality images related to Marine conservation are strategically placed to complement the content. Color scheme - Dominated by blue and orange tones, ensures visual consistency on the web page. At the same time, more orange is used than before to emphasize the key content and enhance the readability and user attention.

Design decisions during development
Typography: I chose "Outfit," a clean and modern sans-serif font, because I felt that a neat font better reflected the professional and protection-oriented tone of the website. I also used different font thicknesses and sizes to create visual layers, and added titles for each section, which made the content categorised more clearly and improved the readability of the text. When planning the layout, I rearranged a lot of white space in the site before the redesign and added more content, which made the page look less empty.

Color scheme: The primary color palette of blue and white was retained for thematic consistency, and darker blue tones were added to enhance contrast in more areas of the text. There was also orange in the site before the redesign, but the presence was not high, so I used orange in more parts of the redesign. Orange is an accent color that highlights donation buttons and important content, directing users to the important parts.
Fig.2.5 Example color scheme

Image placement: Images are found on the Internet, and are planned to be consistent with the content of the website to avoid confusion. At the same time, it avoids a lot of meaningless pictures and makes the content of the website more fulfilling.

Add a form field: The "Contact Us" section was enhanced with a functional form to collect user inquiries. The form includes fields for name, email, and a message, along with an interactive "Submit" button. This functionality was added to improve user interaction and provide a direct communication channel, making it easier for visitors to reach out to the organization.
Fig.2.6 Contact Us page

Navigation bar: Simplified menus by grouping related categories under fewer headings. For example, the "support us" button and the donate button are essentially the same thing, so I merged them and separated the "contact us" button to make the menu clearer.


The prototype effectively addresses the goals set out in the redesign proposal
Improved usability:
The redesigned navigation bar and intuitive layout allow users to find the information they want more quickly and avoid duplication of content in the navigation bar. Make navigation more intuitive and clear.

Enhanced aesthetics:
I rearranged the blank parts of the page before the redesign, and I placed more content to ensure the balance of the layout of the entire website.
I noticed that before the redesign, the theme color of the site was blue, and only a small amount of orange was used, which made the appearance of orange look jarring. Therefore, I used more orange in the redesign to highlight the key content while maintaining visual consistency.
In the application of pictures, I chose more pictures of Marine creatures with unified colors. It reduces clutter and makes people look more comfortable.

UX Enhancements:
More interactive buttons, such as "Donate" and "Join us," have been added, and hover effects have been added to these buttons to encourage users to take action.




FEEDBACK

WEEK 11
TUES.
You need to create at least 3 pages.Meaning 3 complete pages, Is like the normal website page. The design looks okay.

THUR.
The design looks good, and the pages are clear and intuitive.

REFLECTION
This project enhanced my skills in turning design proposals into functional prototypes using Figma. I focused on creating a user-friendly, visually appealing website by optimizing navigation, improving typography, and balancing the color scheme.

Key lessons include maintaining design consistency, prioritizing user experience, and solving practical design issues like reducing blank spaces and enhancing interactive elements.

Feedback helped me refine the project by completing three full pages, ensuring clarity and functionality. This experience strengthened my understanding of web design and UX principles for future projects.


Comments

Post a Comment