Interactive Design | Project 2 :Website Redesign Prototype

20/11/2024 -   08/12/2024 / Week 9 - Week 11
Rio Sato / 0360530
Lectures and Exercises
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylors University
Instructions

Fig. 1.1 Module Information Booklet - Interactive Design

Create a functional prototype of your website redesign proposal that demonstrates the proposed changes and UX improvements.

Requirements:

Interactive Prototype:

Build a clickable prototype with key pages using tools like Adobe XD, Figma, or Sketch. Include:

  • Homepage with navigation and main content areas
  • One core content page (About Us, Services, or Products)
  • Contact page with interactive forms

UX Requirements:

  • User-friendly design with clear navigation
  • Interactive elements (buttons, hover states, forms)

Submission:

  • Functional prototype (shareable link or downloadable file)
  • E-Portfolio writeup (500-800 words) describing prototype features and design decisions

Research

Fig. 1.2 Research: Climate Change Website

For the UX design of my site, I referenced the Climate Change Website from Dribbble as inspiration. The site's well-organized categories and clear visual hierarchy, achieved through thoughtful font choices and color usage, effectively guide users' attention.

Fig. 1.3 Project 1: Proposal Slides

I believe that I can reconcile the fonts, color scheme, and button placement. Optimizing the size and weight of each element is essential for enhancing the site's usability.


Process Work

Figma

Homepage:
Fig. 1.4 Homepage

The homepage design features a clean, minimalist layout with a prominent hero section. The navigation menu is streamlined with clear categories, while the color scheme of earth tones creates a natural, calming atmosphere. Interactive elements like hover effects on buttons enhance user engagement. I made two hero sections to help customers explore the content pages. This page is inspired by my research.

Core Content Pages:
Fig. 1.5 Contact Pages

The core content pages maintain consistency with the overall design language while focusing on a clear information hierarchy. Each page features carefully structured content blocks with ample white space and readable typography. The use of subtle animations and interactive elements helps engage users while maintaining a professional, environmentally-conscious aesthetic.

Contact Pages: 

Fig. 1.6 Core Content Pages

The contact page design prioritizes user accessibility with a clean, intuitive form layout. I incorporated clear input fields, dropdown menus, and a prominent submit button to streamline the user experience. The page maintains the earth-tone color scheme while using subtle visual cues to guide users through the form completion process.

Final Outcome


In developing the prototype for the library website, I focused on creating an intuitive and engaging user experience that effectively communicates our message while maintaining visual appeal. The following analysis outlines the key features and design decisions implemented in the prototype, demonstrating how they address our original redesign objectives.

User Interface and Navigation

The prototype's interface is built around a clean, minimalist design philosophy that prioritizes my research. The navigation system features a streamlined menu structure with clearly labeled categories, making it easy for users to find relevant information. The sticky navigation bar ensures that users can access different sections of the website from any point, reducing friction in the user journey.

Visual Design Elements

The color palette consists of carefully selected earth tones. I changed the color scheme from the previous assignment to make it fit more. The primary colors include soft yellow and navy, complemented by neutral backgrounds that create a sense of calm and professionalism. Typography choices feature a combination of Poppins headings for authority and Inter text for optimal readability across devices.

Interactive Features

To enhance user engagement, the prototype incorporates several interactive elements. Hover effects on buttons and links provide immediate visual feedback, while smooth scrolling animations create a polished, modern feel. The contact form includes a form of name, phone number, and e-mail making it easier for users to submit inquiries.

Content Organization

Information is structured in a clear hierarchy, with the most important content positioned prominently on each page. The homepage features a bold hero section that shows the contents. Core content pages utilize a consistent layout with ample white space to improve readability and content absorption.

Performance Considerations

To optimize loading times and user experience, the prototype implements lazy loading for images and an efficient code structure. CSS animations are used judiciously to enhance the interface without compromising performance. These optimizations ensure that users can access content quickly and smoothly.

Meeting Redesign Objectives

The prototype successfully addresses the key objectives outlined in our redesign proposal. The improved navigation and content organization make information more accessible, while the refined visual design better reflects information on the website. Interactive elements enhance engagement without sacrificing usability, and the responsive design ensures broad accessibility.

Future Considerations

While the current prototype meets the core objectives, there is room for further enhancement. Future iterations could incorporate more advanced features such as interactive data visualizations, a community forum, and enhanced social media integration. These additions would further strengthen user engagement while maintaining the clean, professional aesthetic established in the current design.

Comments

Post a Comment

Popular posts from this blog

Advanced Typography | Final Compilation & Reflection

Image
18/12/2024 /  Week 13 Rio Sato / 0360530 Final Compilation & Reflection Advanced Typography / Bachelor of Design (Honours) in Creative Media / Taylors University WEBSITE LINKS TO EACH TASK 1.1    Task 1: Exercises 1 & 2 1.2   Task 2: Key Artwork & Collateral 1.3   Task 3: Type Exploration and Application SUBMISSION Exercises 1 & 2 25/09/2024 -   16/10/2024 / Week 1 - Week 4 Task 1: Exercise 1 - Typographic Systems Fig. 1.1 Final  Radial   System - JPEG Fig. 1.2 Final  Bilateral   System - JPEG Fig. 1.3 Final  Axial   System - JPEG Fig. 1.4 Final  Modular   System - JPEG Fig. 1.5 Final  Dilatational   System - JPEG Fig. 1.6 Final  Random   System - JPEG Fig. 1.7 Final  Grid   System - JPEG Fig. 1.8 Final  Transitional   System - JPEG Fig. 1.9 Final Task 1 - Exercise 1: Typographic Systems - PDF Task 1: Exercise 2 - Type and Play Fig. 2.1 Compiled pr...
Read more

Advanced Typography | Task 1: Exercises 1 & 2

Image
25/09/2024 -   16/10/2024 / Week 1 - Week 4 Rio Sato / 0360530 Exercises 1 & 2 Advanced Typography / Bachelor of Design (Honours) in Creative Media / Taylors University Lectures: Week 1 - Lecture 1 Advanced Typography: Typographic Systems Typographic systems provide a sense of purpose that focuses and directs the decision-making. Shape grammar is a set of shape rules that apply in a step-by-step way to generate a set, or language, of designs. Fig. 1.1 Axial system (source: type 365) Axial System: All elements are organised to the left or right of a single axis. Fig. 1.2 Radial system (source: type 365) Radial System: All elements are extended from a point of focus. Fig. 1.3 Dilatational system (source: type 365) Dilatational System: All elements expand from a central point in a circular fashion. Fig. 1.4 Random system Random System: Elements appear to have no specific pattern or relationship. Fig. 1.5 Grid system (source: type 365) Grid System: A system of vertical and hor...
Read more

Advanced Typography | Task 2: Key Artwork & Collateral

Image
23/10/2024 -   20/11/2024 / Week 5 - Week 9 Rio Sato / 0360530 Key Artwork & Collateral Advanced Typography / Bachelor of Design (Honours) in Creative Media / Taylors University LECTURES WEEK 5 - LECTURE 5 Advanced Typography: Perception and Organisation Contrast Fig. 1.1 Size (by Carl Dair) Fig. 1.2 Weight Fig. 1.3 Form Fig. 1.4 Structure Fig. 1.5 Texture Fig. 1.6 Direction (by Carl Dair) Fig. 1.7 Colour Fig. 1.8 Form Form: The overall look and feel of the elements that make up the typographic composition. To represent a concept by doing so in a visual form. The interplay of meaning and form brings a balanced harmony both in terms of function and expression. When a typeface is perceived as a form, it no longer reads as a letter because it has been manipulated by distortion, texture, enlargement, and has been extruded into a space. Fig. 1.9 Gestalt theory for organisation INSTRUCTIONS Fig. 2.1 Module Information Booklet - Advanced Typography 2024 Task 2A: Key Artwork ...
Read more