UX-UI/subjects/ui/colors-and-moodboard/find-the-colors/README.md

# UI I - Ex 1 - Find the colors

**Context:** 

This first UI quest is a series of exercises to practice colors, moodboards, typography and replicate screens on Figma!

**Instructions:** 

Go to these 7 websites and make the color palettes out of them (3 to 4 main colors). 

**Deliverable:** 

- A Figma file including screenshots of the main page, URL and extracted colors next to the screenshots.
- 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!

**Tips:** 

- You can use Figma to extract the colors you need and export your file to PDF.
- Use the Color Pipette to extract the colors!
- You can show the main colors with filled squares or circles next to the screenshots. 
- Mind the aesthetics of your delivrable! 1 page per site should be good.

- [https://www.komoot.com/](https://www.komoot.com/) (App)
- [https://www.airtable.com/](https://www.airtable.com/)
- [https://www.decathlon.com/collections/kids-gift-ideas](https://www.decathlon.com/collections/kids-gift-ideas)
- [https://www.jrpass.com/](https://www.jrpass.com/)
- [https://www.thesiff.com/](https://www.thesiff.com/)
- [https://brave.com/es/](https://brave.com/es/)
- [https://www.nhp.gov.in/](https://www.nhp.gov.in/)

**Resources:** 

- [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)