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

# UI II - Ex 1 - 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 of 4 pages
- On each page, a screenshot of a template, an organism, a molecule and an atom
- 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.
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration on 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