mirror of https://github.com/01-edu/public.git
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
This commit is contained in:
parent
ec77ef39fe
commit
dcf880758f
|
@ -1,3 +1,43 @@
|
|||
## 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 the following 7 websites and make the color palettes out of them (3 to 4 main colors).
|
||||
|
||||
- [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/)
|
||||
|
||||
**Deliverable:**
|
||||
|
||||
- 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)
|
||||
- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/)
|
||||
- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)
|
||||
|
||||
## Color codes
|
||||
|
||||
### Instructions
|
||||
|
@ -31,6 +71,7 @@ Don't forget to :
|
|||
- [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/)
|
||||
|
||||
## Color combinations
|
||||
|
||||
### Instructions
|
||||
|
@ -109,45 +150,7 @@ Don't forget to:
|
|||
- [https://www.airtable.com/](https://www.airtable.com/)
|
||||
- [https://calendar.google.com/](https://calendar.google.com/)
|
||||
- [https://www.ebay.com/](https://www.ebay.com/)
|
||||
## 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 the following 7 websites and make the color palettes out of them (3 to 4 main colors).
|
||||
|
||||
- [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/)
|
||||
|
||||
**Deliverable:**
|
||||
|
||||
- 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)
|
||||
- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/)
|
||||
- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)
|
||||
## Moodboard
|
||||
|
||||
### Instructions
|
||||
|
@ -181,6 +184,7 @@ Don't forget to:
|
|||
- [Example2](https://caseperlatesta.com/wp-content/uploads/2015/09/Moodboard23_grey_peach-1024x1024.jpg)
|
||||
- [Example3](https://i.pinimg.com/564x/ee/9d/d6/ee9dd6fbb82b0e5b4dd2924580b765dd.jpg)
|
||||
- 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!
|
||||
|
||||
## Typography
|
||||
|
||||
### Instructions
|
||||
|
@ -221,7 +225,8 @@ Don't forget to:
|
|||
- [Beginning graphic design: Typography](https://edu.gcfglobal.org/en/beginning-graphic-design/typography/1/)
|
||||
- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/)
|
||||
- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)
|
||||
## Typography Moodboard
|
||||
|
||||
## Typography moodboard
|
||||
|
||||
### Instructions
|
||||
|
||||
|
@ -262,97 +267,7 @@ Don't forget to:
|
|||
- [Beginning graphic design: Typography](https://edu.gcfglobal.org/en/beginning-graphic-design/typography/1/)
|
||||
- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/)
|
||||
- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)
|
||||
## UI Challenge - Bitcoin Dashboard
|
||||
|
||||
### Instructions
|
||||
|
||||
Create this image on Figma:
|
||||
|
||||
![Dashboard](Dashboard.png)
|
||||
|
||||
- Make sure:
|
||||
- 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 an imported image.
|
||||
- You use linear color function.
|
||||
|
||||
**Deliverable:**
|
||||
|
||||
- A Figma file with a copy of the image with Figma elements.
|
||||
|
||||
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:**
|
||||
|
||||
- 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!
|
||||
## UI Challenge - Flight
|
||||
|
||||
### Instructions
|
||||
|
||||
Create this image on Figma:
|
||||
|
||||
![Flight](Flight.png)
|
||||
|
||||
- Make sure that:
|
||||
- You use symbols and variants (1 page for the Symbols).
|
||||
- All you layers are named and organized.
|
||||
- You use overlays.
|
||||
- You use masks to change the shape of an imported image (Amsterdam, Maldives, New Delhi, Sydney icons).
|
||||
|
||||
**Deliverable:**
|
||||
|
||||
- A Figma file with a copy of the image with Figma elements.
|
||||
|
||||
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:**
|
||||
|
||||
- Font: Roboto Bold, Normal, Black with 0 to 7% space between letters.
|
||||
- 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
|
||||
|
||||
Create this image on Figma:
|
||||
|
||||
![Spotify](Spotify.jpg)
|
||||
|
||||
- Please make sure you use:
|
||||
|
||||
- Linear color background.
|
||||
- Groups.
|
||||
- Named and organized layers.
|
||||
- Apple design system (head bar).
|
||||
- Symbols and variants for the songs (1 page for the Symbols).
|
||||
|
||||
**Deliverable:**
|
||||
|
||||
- A Figma file with a copy of the image with Figma elements.
|
||||
|
||||
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 GOTHAM.
|
||||
- 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
|
||||
|
@ -382,6 +297,7 @@ Don't forget to:
|
|||
- 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
|
||||
|
@ -415,3 +331,97 @@ Don't forget to:
|
|||
- [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
|
||||
|
||||
Create this image on Figma:
|
||||
|
||||
![Flight](Flight.png)
|
||||
|
||||
- Make sure that:
|
||||
- You use symbols and variants (1 page for the Symbols).
|
||||
- All you layers are named and organized.
|
||||
- You use overlays.
|
||||
- You use masks to change the shape of an imported image (Amsterdam, Maldives, New Delhi, Sydney icons).
|
||||
|
||||
**Deliverable:**
|
||||
|
||||
- A Figma file with a copy of the image with Figma elements.
|
||||
|
||||
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:**
|
||||
|
||||
- Font: Roboto Bold, Normal, Black with 0 to 7% space between letters.
|
||||
- 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
|
||||
|
||||
Create this image on Figma:
|
||||
|
||||
![Spotify](Spotify.jpg)
|
||||
|
||||
- Please make sure you use:
|
||||
|
||||
- Linear color background.
|
||||
- Groups.
|
||||
- Named and organized layers.
|
||||
- Apple design system (head bar).
|
||||
- Symbols and variants for the songs (1 page for the Symbols).
|
||||
|
||||
**Deliverable:**
|
||||
|
||||
- A Figma file with a copy of the image with Figma elements.
|
||||
|
||||
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 GOTHAM.
|
||||
- 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 - Bitcoin Dashboard
|
||||
|
||||
### Instructions
|
||||
|
||||
Create this image on Figma:
|
||||
|
||||
![Dashboard](Dashboard.png)
|
||||
|
||||
- Make sure:
|
||||
- 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 an imported image.
|
||||
- You use linear color function.
|
||||
|
||||
**Deliverable:**
|
||||
|
||||
- A Figma file with a copy of the image with Figma elements.
|
||||
|
||||
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:**
|
||||
|
||||
- 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!
|
Loading…
Reference in New Issue