This repository documents five key projects that illustrate the practical application of UI principles. Each project dives into different facets of design and development, offering insights into creating user-friendly, accessible, and aesthetically pleasing digital experiences. The focus is not only on outcomes but also on the thought process and learning journey, fostering a better understanding of UI design principles.
This project highlights the importance of defining a consistent visual identity for a digital product. The exercise involved creating a moodboard for an e-commerce app for second-hand electronic devices, focusing on:
- Color Theory: Selecting a palette of two to three main colors to reflect the brand's values such as sustainability, trust, and professionalism. Colors like green (#4CAF50) were chosen for eco-friendliness, while shades of gray added a professional touch.
- Typography: Establishing a hierarchy of typefaces, emphasizing readability and aesthetic alignment with brand values.
- Brand Values: Conveying messages of eco-consciousness, simplicity, and trust through design choices.
Key Learning: Visual consistency builds a strong emotional connection with users, reinforcing the brand's identity.
This project explored the Atomic Design methodology by breaking down interface elements into a hierarchy:
- Atoms: The smallest components, like input fields and buttons.
- Molecules: Combinations of atoms, such as search bars or login forms.
- Organisms: More complex UI structures like navigation bars and product listings.
- Templates and Pages: Fully assembled layouts demonstrating how components interact.
Key Learning: Modular design fosters scalability and consistency, making interfaces easier to build and maintain.
Consistency is a cornerstone of user experience, ensuring users can navigate interfaces intuitively. This project involved:
- Typography Rules: Standardizing fonts for headings, subtitles, and paragraphs.
- Button Styles: Uniform design for primary, secondary, and disabled states.
- Spacing and Alignment: Maintaining consistent grid structures across all screens.
Key Learning: Clear design rules create familiarity, reducing the cognitive load on users and improving usability.
Designing interactive screens for an e-commerce app for second-hand devices brought the moodboard and atomic design principles to life. Key elements included:
- Interactive Screens: Five core pages including a homepage, product details, cart, checkout, and user profile.
- Animations: Subtle transitions to enhance interactivity without overwhelming users.
- Responsive Design: Ensuring a seamless experience across devices.
Key Learning: Combining visual design with functional interactivity brings concepts closer to reality and addresses practical user needs.
Adopting a critical approach, this project analyzed the Doctors Without Borders website using Nielsen's 10 usability heuristics. Steps included:
- Defining Scope: Understanding the target audience and key business goals.
- Heuristic Evaluation: Assessing usability against industry standards to identify pain points.
- Recommendations: Proposing actionable solutions to enhance navigation, accessibility, and overall user satisfaction.
Key Learning: A structured evaluation uncovers gaps in user experience, guiding meaningful improvements.
- Consistency in Design: Across all projects, maintaining consistent elements proved critical in improving usability and brand identity.
- Modular Thinking: Applying Atomic Design principles highlighted the value of building interfaces from reusable components.
- Usability Heuristics: Conducting heuristic evaluations strengthened the ability to critically assess and improve digital products.
- Responsive and Inclusive Design: Designing for all devices and accessibility needs ensures inclusivity and broadens reach.
Whether you're a budding designer or a seasoned professional, these projects offer:
- Practical Examples: Real-world application of UX design principles.
- Inspiration: Ideas for creating scalable, consistent, and accessible designs.
- Learning Resources: References to tools like Figma and concepts like Atomic Design and heuristic evaluation.
Feel free to explore, learn, and adapt these principles to your own projects! If you have questions or want to discuss UI/UX design further, feel free to reach out.
Here is the repository link
- Clone the repository:
git clone https://github.com/Wambita/Piscine-UI
- Open
.figmafiles in Figma to view and edit the designs.
Author: Wambita Sheila Fana
GitHub: Wambita