UI Learning Project - Atomic Design and Design Systems

Project Overview

Welcome to the 2nd quest of UI! This project explores the Atomic Design Methodology and the creation of design systems. Through a series of exercises, we will analyze, replicate, and design elements of UI libraries, leveraging tools like Figma to produce deliverables that showcase our understanding of design systems.

Objectives

• Learn the Atomic Design Methodology.
• Analyze and categorize UI elements into templates, organisms, molecules, and atoms.
• Build design systems for real-world applications using Figma.
• Develop a consistent workflow for creating clear, simple, and effective designs.

Project Exercises

1. Snapshots of UI Elements

Websites:

• Alibaba
• Booking.com
• EasyJet App
• Interrail

Deliverable:

• A Figma file with 4 pages:
  • Page 1: Template screenshot.
  • Page 2: Organism screenshot.
  • Page 3: Molecule screenshot.
  • Page 4: Atom screenshot.

Instructions:

1. Capture a template, organism, molecule, and atom from the above websites.
2. Organize the screenshots into clearly titled Figma pages.
3. Upload the Figma file to GitHub with the naming convention: Name_FirstName_DeliverableName_Date_VersionNumber (e.g., Doe_John_UIElements_01202025_V1).

2. Material Design Layers

Deliverable:

• A Figma file containing:
  • Snapshot of 3 screens of Lyft.
  • Layer ordering numbers on each screen.

Instructions:

1. Number the layers in order, with 1 as the background image and subsequent elements labeled sequentially.
2. Ensure clarity and readability.
3. Follow the same naming convention as above.

3. EasyJet Design System

Deliverable:

• A Figma file with 10 elements from the EasyJet design system, categorized as:
  • Atoms
  • Molecules
  • Organisms

Instructions:

1. Use Avenir Book for fonts or alternatives if unavailable.
2. Explore Noun Project for icons.
3. Ensure the file is visually clear and labeled appropriately.

4. Climbing Group Design System

Deliverables:

1. Moodboard:
   • Pictures.
   • Colors (2-3 main).
   • Typography.
2. Library:
   • At least 20 graphic elements.
   • Multistate elements (minimum 5).

Instructions:

• Upload all files to GitHub in a zip folder labeled: ProjectTitle_Name_FirstName (e.g., ClimbingGroupDesign_Kennedy_John).

5. Dating App Design System

Deliverables:

1. Moodboard:
   • Pictures.
   • Colors (2-3 main).
   • Typography.
2. Library:
   • At least 20 graphic elements.
   • Multistate elements (minimum 5).

Instructions:

• Follow a similar workflow as the Climbing Group Design System.

Tips for Success

• Clarity and Simplicity: Ensure all deliverables are easy to understand.
• Consistency: Use uniform naming conventions and design standards.
• Inspiration: Draw ideas from platforms like Dribbble, Noun Project, and the Figma community.
• Creativity: Experiment with innovative designs while adhering to the principles of Atomic Design.

Resources

• Atomic Design Methodology
• Material Design
• Figma Tutorials
• Examples of UI Libraries
• Lyft Design Systems

Contribution

Contributions to this project should follow these guidelines:

1. Fork the repository.
2. Create a new branch for your changes.
3. Commit your changes with clear messages.
4. Submit a pull request for review.

---

Author: Kennedy Ada