UX-UI/subjects/ui/atomic-design/browsing/README.md

## Browsing

**Context:**

Welcome to the 2nd quest of UI!

This series of exercises is a great occasion for you to discover how libraries are made in UI, thanks to Atomic Design.

### Instructions

Among these 4 websites, make snapshots of these elements:

- 1 template.
- 1 organism.
- 1 molecule.
- 1 atom.

**Websites:**

- Alibaba.
- Booking.com.
- Easyjet App.
- Interrail.

### Deliverables

- A Figma file with 4 pages.
- On each page, a screenshot of a template, an organism, a molecule and an atom.

Don't forget to:

- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
- Add a title within the file.

**Tips:**

- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!

**Resources:**

- [Atomic Design Methodology](https://atomicdesign.bradfrost.com/chapter-2/)
- [Video tutorial on Figma](https://www.youtube.com/watch?v=FTFaQWZBqQ8)
- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/)
- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)
- [Example here](https://www.figma.com/file/fzqDkk8Zc8qJCiSMbKV0Ei/UI-II---Ex-1?node-id=0%3A1)

**Quote:**

- User Interface Design is a hybrid role and can bring together concepts from interaction design, visual design, information architecture and even Front End Development.