Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/shyke0611/ux-design-high-fidelity-prototype

High-fidelity prototype for the homepage and sign-up form of Freecycling!, featuring improved design and user experience using HTML, CSS, and JavaScript to promote environmentally friendly item exchanges.
https://github.com/shyke0611/ux-design-high-fidelity-prototype

css html javascript ui-design ux-design ux-experience

Last synced: about 1 month ago
JSON representation

High-fidelity prototype for the homepage and sign-up form of Freecycling!, featuring improved design and user experience using HTML, CSS, and JavaScript to promote environmentally friendly item exchanges.

Awesome Lists containing this project

README 

        





[![Email](https://img.shields.io/badge/Email-D14836?style=for-the-badge&logo=gmail&logoColor=white)](mailto:[email protected])

[![LinkedIn][linkedin-shield]][linkedin-url]

[![Website](https://img.shields.io/badge/Website-Visit-blue?style=for-the-badge)](https://andrewshinportfolio.netlify.app)









  
Freecycling! High Fidelity Prototype



  


    Part 3 Software engineering assignment for University of Auckland, handling UX/UI design.

  










## About The Project

[Assignment Overview.pdf](https://github.com/user-attachments/files/16166782/High-Fidelity.Prototype.Assignment.Handout.2024.pdf)



This assignment involves designing a high-fidelity prototype for a freecycling program, including a landing page and a registration form. The main objective is to practice skills in web design using 

HTML, CSS, and JavaScript, while adhering to visual design principles and accessibility guidelines.



[![HomePage][home]](project_images/Homepage.png)






[![LoginForm][login]](project_images/loginform.png)






## Design Principles

[High Fidelity Report.pdf](https://github.com/user-attachments/files/16060515/350.High.Fidelity.Report.-.hshi270.pdf)



### Homepage

- **Visual Hierarchy**: The homepage uses a large background image to draw attention, with central figures scaled down to guide the user's focus.

- **Colour Contrast**: A dark, low-opacity background contrasts with bright white and green elements to highlight key features.

- **Interactive Elements**: Green borders distinguish interactive buttons from regular text, enhancing usability.



### Navigation Bar

- **Consistency**: All navigation options share a uniform font, size, and colour, following the similarity principle.

- **Proximity and Symmetry**: Grouped navigation options and vertical symmetry improve readability and ease of use.

- **Enhanced Accessibility**: Icons and numeric indicators in the wishlist option maintain visibility of system status.



### Main Text

- **Emphasis and Balance**: Larger font sizes for the Freecycling slogan and central text alignment create a balanced, visually appealing layout.

- **Contrast**: White font colour against a low-opacity background ensures text visibility.



### Search and Category Bar

- **Proximity and Common Fate**: Divided search and category sections with shared visual characteristics aid in user navigation.

- **Brand Colours**: Integrated brand colours and gradients maintain a cohesive design.



### Signup Modal

- **Visual Hierarchy**: Asymmetrical division into signup and welcome sections directs user attention efficiently.

- **User Control**: A prominent close button aligns with familiar user interface patterns, enhancing control and freedom.



### User Experience Enhancements

- **Meaningful Green Elements**: Green elements align with environmental values and improve ease of learning and memorability.

- **Quick Recognition**: Consistent visual cues reduce cognitive load and enhance intuitive use.

- **Dropdown Menus**: Dropdowns reduce user errors and increase efficiency by minimising typing.



### Colour Scheme

- **Primary Colour**: The brand's signature colour (#26252D) is used throughout the platform, providing a consistent visual identity.

- **Contrast and Emphasis**: White text on dark backgrounds and highlighted action buttons ensure key elements stand out.



#### Built With



* [HTML](https://www.java.com/)

* [JavaScript](https://openjfx.io/)

* [CSS](https://www.mysql.com/)



## Reflection



#### Context and Motivation

This Freecycling! High Fidelity Prototype was a project aimed at refining design and user experience skills. I undertook this project to deepen my understanding of UX design principles and to create an intuitive, user-friendly platform. It provided an excellent opportunity to expand my knowledge in both technical and design aspects.



#### Project Goals

The goal was to build a visually appealing and user-friendly interface for the Freecycling! platform. The design aimed to ensure a seamless user experience while promoting the exchange of household items in an environmentally friendly manner.



#### Design Cycle

Throughout the design cycle, I followed an iterative process that involved research, prototyping, user testing, and refinement. This approach ensured continuous improvement and alignment with user needs and expectations.



#### Usability, Memorability, and Emotional Impact

- **Usability**: The platform is designed to be intuitive and easy to use, with clear navigation and interactive elements that guide users effectively.

- **Memorability**: Consistent visual cues and the use of green elements help users remember their actions and the overall platform layout.

- **Emotional Impact**: The design aims to evoke a positive emotional response, encouraging users to engage with the platform and participate in the freecycling community.



#### Nielsen's Heuristics

The design incorporates Nielsen's heuristics for user interface design, ensuring principles such as visibility of system status, user control and freedom, consistency and standards, error prevention, and recognition rather than recall are adhered to.



#### Principles of Design

- **Unity**: Consistent use of colours, fonts, and styles throughout the platform creates a unified and cohesive design.

- **Balance**: The layout balances elements to ensure a visually appealing and harmonious appearance.

- **Emphasis**: Key actions and important information are highlighted to draw user attention and guide interactions.



### Challenges and Learning Experience

A major challenge was applying various design principles effectively to create a cohesive and engaging user interface. Addressing these challenges improved my understanding of UX design and enhanced my problem-solving skills.



## Acknowledgments



* [Font Awesome](https://fontawesome.com)

* [Font Awesome Cheatsheet](https://fontawesome.com/v4/cheatsheet/)



[contributors-shield]: https://img.shields.io/github/contributors/github_username/repo_name.svg?style=for-the-badge

[contributors-url]: https://github.com/github_username/repo_name/graphs/contributors

[forks-shield]: https://img.shields.io/github/forks/github_username/repo_name.svg?style=for-the-badge

[forks-url]: https://github.com/github_username/repo_name/network/members

[stars-shield]: https://img.shields.io/github/stars/github_username/repo_name.svg?style=for-the-badge

[stars-url]: https://github.com/github_username/repo_name/stargazers

[issues-shield]: https://img.shields.io/github/issues/github_username/repo_name.svg?style=for-the-badge

[issues-url]: https://github.com/github_username/repo_name/issues

[license-shield]: https://img.shields.io/github/license/github_username/repo_name.svg?style=for-the-badge

[license-url]: https://github.com/github_username/repo_name/blob/master/LICENSE.txt

[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555

[linkedin-url]: https://www.linkedin.com/in/andrew-hk-shin

[login]: project_images/loginform.png

[home]: project_images/Homepage.png