docs(colors-and-moodboard): change order of exercises in quest to correct order
UI Program UI Quest 1 = Colors and moodboard
Ex 1 = Find the Colors
Ex 2 = Color codes
Ex 3 = Color combinations
Ex 4 = Moodboard
Ex 5 = Typography
Ex 6 = Typography Moodboard
Ex 7 = UI Challenge Timer
Ex 8 = UI Challenge Watches
Ex 9 = UI Challenge Flight
Ex 10 = UI Challenge Spotify
Ex 11 = UI Challenge Bitcoin Dashboard
- A Figma file including screenshots of the main page for all the 7 websites, URL and extracted colors next to the screenshots.
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:**
- 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 deliverable! 1 page per site should be good.
**Resources:**
- [Video tutorial on Figma](https://www.youtube.com/watch?v=FTFaQWZBqQ8)
- A Figma file including screenshots of the main page for all the 7 websites, URL and extracted colors next to the screenshots.
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:**
- 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 deliverable! 1 page per site should be good.
**Resources:**
- [Video tutorial on Figma](https://www.youtube.com/watch?v=FTFaQWZBqQ8)
- Pay attention to the global aspect of the deliverables. They 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!
- 2 half circles to draw the circle around the timer.
- Gradient to fill the main circle.
- Groups.
- Named layers.
**Deliverable:**
- A Figma file.
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:**
- The font is RAJDANHI.
- The frame is Android 360 x 640px.
- 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!
## UI Challenge - Watches
### Instructions
Copy these images on Figma:
- Make sure:
- You use symbols and variants (1 page for the Symbols one for the screen).
- You use symbols and variants (1 page for the Symbols).
- All your layers are named and organized.
- You use overlays.
- You use masks to change the shape of an imported image.
- You use linear color function.
- You use masks to change the shape of the imported image.
**Deliverable:**
@ -288,11 +326,12 @@ Don't forget to:
**Tips:**
- Fonts: Avenir.
- The frame is a desktop 1440 x 1024.
- Fonts: SF Compact for the iOS elements, Futura STD Condensed for the Nike signs.
- The frame for each iWatch screen is watch 44 mm 184 x 224.
- [Figma article about Symbols and Variants](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants).
- You can use existing Libraries by browsing the Figma community resources.
- 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!
## UI Challenge - Flight
### Instructions
@ -322,6 +361,7 @@ Don't forget to:
- The frame is desktop 1440 x 1048 px.
- [Figma article about Symbols and Variants](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants).
- 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!
## UI Challenge - Spotify
### Instructions
@ -353,51 +393,21 @@ Don't forget to:
- The frame is iPhone 13 Pro Max 428 x 926 px.
- [Figma article about Symbols and Variants](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants).
- 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!
## UI Challenge - Timer
### Instructions
Create this image on Figma:
Please make sure you use:
- 2 half circles to draw the circle around the timer.
- Gradient to fill the main circle.
- Groups.
- Named layers.
**Deliverable:**
- A Figma file.
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:**
- The font is RAJDANHI.
- The frame is Android 360 x 640px.
- 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!
## UI Challenge - Watches
## UI Challenge - Bitcoin Dashboard
### Instructions
Copy these images on Figma:
Create this image on Figma:
- Make sure:
- You use symbols and variants (1 page for the Symbols).
- You use symbols and variants (1 page for the Symbols one for the screen).
- All your layers are named and organized.
- You use overlays.
- You use masks to change the shape of the imported image.
- You use masks to change the shape of an imported image.
- You use linear color function.
**Deliverable:**
@ -410,8 +420,8 @@ Don't forget to:
**Tips:**
- Fonts: SF Compact for the iOS elements, Futura STD Condensed for the Nike signs.
- The frame for each iWatch screen is watch 44 mm 184 x 224.
- Fonts: Avenir.
- The frame is a desktop 1440 x 1024.
- [Figma article about Symbols and Variants](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants).
- You can use existing Libraries by browsing the Figma community resources.
- 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!
- 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!
davhojt
1 year ago
committed by