fix(ui-piscine): fix the audits and subjects

fix the structure of the piscine

subjects/ui/atomic-design/atomic-design-system-library/README.md

@@ -0,0 +1,28 @@
+## Atomic Design system library
+
+### Instructions
+
+Copy 10 elements from easyJet design system, including:
+
+- atoms.
+- molecules.
+- organisms.
+
+**Deliverable:**
+
+- A Figma file including 10 elements from easyJet design system .
+
+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 Avenir Book instead of easyJet’s font.
+- Explore Noun Project to get icons.
+- 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/)

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

@@ -1,37 +1,42 @@
-# UI II - Ex 1 - Browsing
+## Browsing
 
-**Context:** 
+**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. 
+This series of exercises is a great occasion for you to discover how libraries are made in UI, thanks to Atomic Design.
 
-**Instructions:** 
+### Instructions
 
 Among these 4 websites, make snapshots of these elements:
 
-- 1 template
-- 1 organism
-- 1 molecule
-- 1 atom
+- 1 template.
+- 1 organism.
+- 1 molecule.
+- 1 atom.
 
-**Websites:** 
+**Websites:**
 
-- Alibaba
-- Booking.com
-- Easyjet App
-- Interrail
+- Alibaba.
+- Booking.com.
+- Easyjet App.
+- Interrail.
 
-**Deliverables:** 
+### 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:
 
-- 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!
 
+**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:** 
+**Resources:**
 
 - [Atomic Design Methodology](https://atomicdesign.bradfrost.com/chapter-2/)
 - [Video tutorial on Figma](https://www.youtube.com/watch?v=FTFaQWZBqQ8)
@@ -39,6 +44,6 @@ Among these 4 websites, make snapshots of these elements:
 - [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:** 
+**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
+- User Interface Design is a hybrid role and can bring together concepts from interaction design, visual design, information architecture and even Front End Development.

subjects/ui/atomic-design/browsing/audit/README.md

@@ -1,31 +0,0 @@
-#### Audit 
-
-###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”?
-###### Is the deliverable in the correct format (Figma)?
-###### Is there a title within the document?
-###### Is the document clear, simple and easy to read?
-###### Are there 4 pages?
-
-#### On page 1,
-###### Is there a template?
-###### Is there an organism?
-###### Is there a molecule?
-###### Is there an atom?
-
-#### On page 2,
-###### Is there a template?
-###### Is there an organism?
-###### Is there a molecule?
-###### Is there an atom?
-
-#### On page 3,
-###### Is there a template?
-###### Is there an organism?
-###### Is there a molecule?
-###### Is there an atom?
-
-#### On page 4,
-###### Is there a template?
-###### Is there an organism?
-###### Is there a molecule?
-###### Is there an atom?

subjects/ui/atomic-design/design-system-library/README.md

@@ -1,25 +0,0 @@
-# UI II - Ex 3 - Design system library
-
-**Instructions:** 
-
-Copy 10 elements from easyJet design system, including
-
-- atoms
-- molecules
-- organisms
-
-**Deliverable:**
-
-- A Figma file including 10 elements from easyJet design system
-- 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 Avenir Book instead of easyJet’s font
-- Explore Noun Project to get icons
-
-**Resources:**
-
--  [Atomic Design Methodology](https://atomicdesign.bradfrost.com/chapter-2/) 

subjects/ui/atomic-design/design-system-library/audit/README.md

@@ -1,10 +0,0 @@
-#### Audit
-
-###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”?
-###### Is the deliverable in the correct format (Figma)?
-###### Is there a title within the document?
-###### Is the document clear, simple and easy to read?
-###### Are there at least 10 elements from easyJet?
-###### Is there at least one atom?
-###### Is there at least one molecule?
-###### Is there at least one organism?

subjects/ui/atomic-design/library-for-a-dating-app/README.md

@@ -1,34 +1,39 @@
-# UI II - Ex 5 - Library for a dating app
+## Library for a dating app
 
-**Instructions:** 
+### Instructions
 
-You are asked to design a dating app. 
+You are asked to design a dating app.
 
 Based on a moodboard you have composed, create a design system with at least 20 elements, including atoms, molecules and organisms, and include multistates.
 
-**Deliverables:** 
-
-- A Figma file with a moodboard for a dating app. Include:
-    - Pictures
-    - Colors (2 to 3 main colors)
-    - Typography
-- A Figma file with a library including
-    - At least graphic design 20 elements
-    - At least one atom
-    - At least one molecule
-    - At least one organism
-    - At least 5 multistate elements
-- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”.  For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within all written documents.
-- Pay attention to the global aspect of the deliverables. They 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!
+### Deliverables
+
+- A Figma file with a moodboard for a dating app including:
+
+  - Pictures.
+  - Colors (2 to 3 main colors).
+  - Typography.
+
+- A Figma file with a library including:
 
+  - At least 20 graphic design elements.
+  - At least one atom.
+  - At least one molecule.
+  - At least one organism.
+  - At least 5 multistate elements.
+
+Don't forget to:
+
+- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within all written documents.
 
-**Tips:** 
+**Tips:**
 
 - Let’s be creative! Get inspiration from visuals before diving in.
 - Feel free to get inspiration from existing design systems. Browse Dribble and the Figma community!
+- 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!
 
-**Resources:** 
+**Resources:**
 
 - [Introduction to design systems](https://www.youtube.com/watch?v=xEuBCUngJ_U)
 - [Create a design system - Figma course](https://www.youtube.com/watch?v=RYDiDpW2VkM)

subjects/ui/atomic-design/library-for-a-dating-app/audit/README.md

@@ -1,18 +1,111 @@
-#### Audit
+#### Browsing
+
+###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”?
+
+###### Are the deliverables in the correct format (Figma)?
+
+###### Is there a title within the document?
+
+###### Is the document clear, simple and easy to read?
+
+###### Are there 4 pages?
+
+##### Check the pages 1, 2, 3 and 4.
+
+###### Is there a template in all of them?
+
+###### Is there an organism in all of them?
+
+###### Is there a molecule in all of them?
+
+###### Is there an atom in all of them?
+
+#### Material Design
+
+###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”?
+
+###### Is the deliverable in the correct format (Figma)?
+
+###### Is there a title within the document?
+
+###### Is the document clear, simple and easy to read?
+
+###### Are the layers correctly indicated with numbers?
+
+#### Atomic Design system library
+
+###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”?
+
+###### Is the deliverable in the correct format (Figma)?
+
+###### Is there a title within the document?
+
+###### Is the document clear, simple and easy to read?
+
+###### Are there at least 10 elements from easyJet?
+
+###### Is there at least one atom?
+
+###### Is there at least one molecule?
+
+###### Is there at least one organism?
+
+#### Library for climbing addicts
+
+###### Is there a zip folder labeled as “ProjectTitle_Name_FirstName”?
 
-###### Is there a zip folder?
-###### Is the zip folder labeled as “ProjectTitle_Name_FirstName”?
-###### Are there all the deliverables indicated in the instructions?
 ###### Are the deliverables labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”?
+
 ###### Are the deliverables in the correct format?
+
 ###### Are the documents clear, simple and easy to read?
+
+###### Is there a moodboard for a climbing group?
+
+###### Are there pictures?
+
+###### Are there 2 to 3 main colors?
+
+###### Is there typography?
+
+###### Is there a library?
+
+###### Are there at least 20 graphic design elements (including the one below)?
+
+###### Is there at least one atom?
+
+###### Is there at least one molecule?
+
+###### Is there at least one organism?
+
+###### Is there at least 5 multistate elements?
+
+#### Library for a dating app
+
+###### Is there a zip folder labeled as “ProjectTitle_Name_FirstName”?
+
+###### Are the deliverables labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”?
+
+###### Are the deliverables in the correct format?
+
+###### Are the documents clear, simple and easy to read?
+
 ###### Is there a moodboard for a dating app?
+
 ###### Are there pictures?
+
 ###### Are there 2 to 3 main colors?
+
 ###### Is there typography?
+
 ###### Is there a library?
-###### Are there at least graphic design 20 elements (including the ones below)?
+
+###### Are there at least 20 graphic design elements (including the ones below)?
+
 ###### Is there at least one atom?
+
 ###### Is there at least one molecule?
+
 ###### Is there at least one organism?
-###### Is there at least 5 multistate elements?
+
+###### Is there at least 5 multistate elements?

subjects/ui/atomic-design/library-for-climbing-addicts/README.md

@@ -1,33 +1,39 @@
-# UI II - Ex 4 - Library for climbing addicts
+## Library for climbing addicts
 
-**Instructions:** 
+### Instructions
 
-You are part of a climbing group and volunteer to rebrand the website of your club. 
+You are part of a climbing group and volunteer to rebrand the website of your club.
 
-Based on a moodboard, create a design system with at least 20 elements, including atoms, molecules and organisms, and include multistates.
+Based on a moodboard, create a design system with at least 20 elements, including atoms, molecules and organisms and include multistates.
 
-**Deliverables:** 
+### Deliverables
+
+- A Figma file with a moodboard for a climbing group including:
+
+  - Pictures.
+  - Colors (2 to 3 main colors).
+  - Typography.
 
-- A Figma file with a moodboard for a climbing group. Include:
-    - Pictures
-    - Colors (2 to 3 main colors)
-    - Typography
 - A Figma file with a library including:
-    - At least graphic design 20 elements
-    - At least one atom
-    - At least one molecule
-    - At least one organism
-    - At least 5 multistate elements
-- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”.  For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
+
+  - At least 20 graphic design elements.
+  - At least one atom.
+  - At least one molecule.
+  - At least one organism.
+  - At least 5 multistate elements.
+
+Don't forget to:
+
+- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
 - Add a title within all written documents.
-- Pay attention to the global aspect of the deliverables. They 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:** 
+**Tips:**
 
 - Let’s be creative! Get inspiration from visuals before diving in.
 - Feel free to get inspiration from existing design systems. Browse Dribble and the Figma community!
+- 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!
 
-**Resources:** 
+**Resources:**
 
 - [Introduction to design systems](https://www.youtube.com/watch?v=xEuBCUngJ_U)
 - [Create a design system - Figma course](https://www.youtube.com/watch?v=RYDiDpW2VkM)

subjects/ui/atomic-design/library-for-climbing-addicts/audit/README.md

@@ -1,18 +0,0 @@
-#### Audit
-
-###### Is there a zip folder?
-###### Is the zip folder labeled as “ProjectTitle_Name_FirstName”?
-###### Are there all the deliverables indicated in the instructions?
-###### Are the deliverables labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”?
-###### Are the deliverables in the correct format?
-###### Are the documents clear, simple and easy to read?
-###### Is there a moodboard for a climbing group?
-###### Are there pictures?
-###### Are there 2 to 3 main colors?
-###### Is there typography?
-###### Is there a library?
-###### Are there at least graphic design 20 elements (including the one below)?
-###### Is there at least one atom?
-###### Is there at least one molecule?
-###### Is there at least one organism?
-###### Is there at least 5 multistate elements?

subjects/ui/atomic-design/material-design/README.md

@@ -1,22 +1,25 @@
-# UI II - Ex 2 - Material Design
+## Material Design
 
-**Instructions:** 
+### Instructions
 
-Download [this image](https://storage.googleapis.com/gd-wagtail-prod-assets/original_images/MDA2018_inline_02.jpg) which is a snapshot of 3 screens of Lyft, and detect the order in which the layers were set. 
+Download [this image](https://storage.googleapis.com/gd-wagtail-prod-assets/original_images/MDA2018_inline_02.jpg) which is a snapshot of 3 screens of Lyft, and detect the order in which the layers were set.
 
-**Deliverables:** 
+### Deliverables
 
-- A Figma file with the image
+- A Figma file with the image.
 - On each screen, indicate the layers order with numbers. 1 being the background image, 2 the element right on top, etc.
+
+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.
-- 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:**
 
-- 2 numbers can be switched as long as the layering of layers is respected 
+- 2 numbers can be switched as long as the layering of layers is respected.
+- 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:** 
+**Resources:**
 
 - [Material Design Awards 2019](https://design.google/library/material-design-awards-2019/)
 - [What is Material Design - Wikipedia](https://en.wikipedia.org/wiki/Material_Design)

subjects/ui/atomic-design/material-design/audit/README.md

@@ -1,8 +0,0 @@
-#### Audit
-
-###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”?
-###### Is the deliverable in the correct format (Figma)?
-###### Is there a title within the document?
-###### Is the document clear, simple and easy to read?
-###### Are the layers are indicated with numbers?
-

subjects/ui/building-an-interface/animation/audit/README.md

@@ -1,10 +0,0 @@
-#### Audit
-
-###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”?
-###### Is the deliverable in the correct format (Figma)?
-###### Is there a title within the document?
-###### Is the document clear, simple and easy to read?
-###### Is there a starting screen?
-###### Is there an ending screen?
-###### Do all the connections between screens work?
-###### Are there multistate buttons which change every time you click somewhere?

subjects/ui/building-an-interface/design-screens/README.md

@@ -1,27 +1,33 @@
-# UI IV - Ex 3 - Design screens
+## Design screens
 
-**Instructions:**
+### Instructions
 
 Based on the wireframes and your design system library, take your mid-fidelity prototype to a high-fidelity level!
 
-Select 5 screens that will show the user flow of a customer who: 
+Select 5 screens that will show the user flow of a customer who:
 
-- arrives on the homepage
-- browses the content
-- checks one product page
-- adds the product to the cart
-- checks out
+- Arrives on the homepage.
+- Browses the content.
+- Checks one product page.
+- Adds the product to the cart.
+- Checks out.
 
-Use your components, call to actions and visuals to complete the wireframes. 
+Use your components, call to actions and visuals to complete the wireframes.
 
-**Deliverables:** 
+### Deliverables
+
+- 5 high-fidelity screens from Figma.
+
+Don't forget to:
 
-- 5 high-fidelity screens from Figma
 - 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:**
+
+- 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:**
 
 - [Unsplash](https://unsplash.com/) for visuals
-- [From low-fidelity to high-fidelity](https://mockitt.wondershare.com/prototyping/low-fidelity-vs-high-fidelity.html)
+- [From low-fidelity to high-fidelity](https://mockitt.wondershare.com/prototyping/low-fidelity-vs-high-fidelity.html)

subjects/ui/building-an-interface/design-screens/audit/README.md

@@ -1,8 +0,0 @@
-#### Audit
-
-###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”?
-###### Is the deliverable in the correct format (Figma)?
-###### Is there a title within the document?
-###### Is the document clear, simple and easy to read?
-###### Are there 5 screens? 
-###### Do style, colors, buttons, text match with the initial wireframes?

subjects/ui/building-an-interface/design-system-library/README.md

@@ -1,27 +1,31 @@
-# UI IV - Ex 2 - Design system library
+## Design system library
 
-**Instructions:**
+### Instructions
 
-Based on the moodboard you designed in Ex 1, create a design system with at least 30 elements, including atoms, molecules and organisms, and include multistates.
+Based on the moodboard you designed in the previous exercise "Styleguide", create a design system with at least 30 elements, including atoms, molecules and organisms, and include multistates.
 
-**Deliverables:** 
+### Deliverables
 
 - A Figma file with a library including:
-    - At least graphic design 30 elements
-    - At least 5 atoms
-    - At least 5 molecules
-    - At least 5 organisms
-    - At least 10 multistate variations
+
+  - At least graphic design 30 elements.
+  - At least 5 atoms.
+  - At least 5 molecules.
+  - At least 5 organisms.
+  - At least 10 multistate variations.
+
+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.
-- 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:** 
+**Tips:**
 
 - Start by asking yourself what key elements may appear in an e-commerce app.
 - Feel free to get inspiration from existing design systems. Browse Dribble and the Figma community!
+- 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:** 
+**Resources:**
 
 - [FIGMA FILE (to duplicate)](https://www.figma.com/file/U26mctkrOqxiUeAlNHzSxW/UI-IV---Ex-3---E-COMMERCE%3A-Design-screens!?node-id=0%3A1)
 - [Introduction to design systems](https://www.youtube.com/watch?v=xEuBCUngJ_U)

subjects/ui/building-an-interface/design-system-library/audit/README.md

@@ -1,11 +0,0 @@
-#### Audit
-
-###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”?
-###### Is the deliverable in the correct format (Figma)?
-###### Is there a title within the document?
-###### Is the document clear, simple and easy to read?
-###### Are there at least graphic design 30 elements
-###### Are there at least 5 atoms?
-###### Are there at least 5 molecules?
-###### Are there at least 5 organisms?
-###### Are there at least 10 multistate elements?

subjects/ui/building-an-interface/desirability-testing/README.md

@@ -1,38 +1,39 @@
-# UI IV - Ex 5 - Desirability testing
+## Desirability testing
 
-**Instructions:** 
+### Instructions
 
-Run a desirability test! 
+Run a desirability test!
 
 The point of this phase is to make sure the values and the spirit you chose for your design.
 
-- Get back to the values and spirit you chose in Ex 1. Extract 2 to 5 adjectives.
+- Get back to the values and spirit you chose in the "Styleguide" exercise and extract 2 to 5 adjectives.
 - Prepare a board with 25+ adjectives, randomly distributed.
 - Show your design to 5 different people, and ask them to select the adjectives among the list from the board that they are inspired with.
 - If the selected adjectives chosen by the users are consistent with the ones you had chosen, congratulations!
 - If the selected adjectives chosen by the users are not consistent, that’s fine! Make 3 suggestions about how to make your moodboard and library evolve.
 
-**Deliverables:** 
+### Deliverables
 
-- A desirability testing board with 25+ different adjectives
-- Pictures from the desirability test
-- A PDF document with the outcomes of the desirability test
+- A desirability testing board with 25+ different adjectives.
+- Pictures from the desirability test.
+- A PDF document with the outcomes of the desirability test.
 - If the outcomes are not consistent with the values, 3 suggestions on how to make the moodboard and design library evolve.
-- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”.  For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
-- Add a title within all written documents.
-- Pay attention to the global aspect of the deliverables. They 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!
 
+Don't forget to:
 
+- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
+- Add a title within all written documents.
 
 **Tips:**
 
 - Avoid confirmation biais: don’t tell them the values and ask them to approve them!
 - Good to know: Desirability testing is great to assess the impressions a design gives to the users. Whereas Usability testing is great to understand what users understand your prototype and how they navigate across the product.
+- 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!
 
-**Resources:** 
+**Resources:**
 
 - [Desirability Testing analyzing an emotional response to a design](https://www.slideshare.net/megangrocki/desirability-testing-analyzing-emotional-response-to-a-design-11262575)
 
-**Quote:** 
+**Quote:**
 
-- ‘Interaction design focuses on the design of behavior of a person’s interaction with a digital interface. It is also concerned with satisfying the needs and desires of the people who will interact with a product or service.’ Alan Cooper, About Face: The Essentials of Interaction Design
+- "Interaction design focuses on the design of behavior of a person’s interaction with a digital interface. It is also concerned with satisfying the needs and desires of the people who will interact with a product or service.’ Alan Cooper, About Face: The Essentials of Interaction Design

subjects/ui/building-an-interface/desirability-testing/audit/README.md

@@ -1,12 +1,95 @@
-#### Audit 
+#### Styleguide
+
+###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”?
+
+###### Is the deliverable in the correct format (Figma)?
+
+###### Is there a title within the document?
+
+###### Is the document clear, simple and easy to read?
+
+###### Does the moodboard include pictures?
+
+###### Does the moodboard include 2 to 3 main colors?
+
+###### Is there typography for a title?
+
+###### Is there typography for a description or subtitle?
+
+###### Is there typography for some content?
+
+###### Is there typography for a button?
+
+#### Design system library
+
+###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”?
+
+###### Is the deliverable in the correct format (Figma)?
+
+###### Is there a title within the document?
+
+###### Is the document clear, simple and easy to read?
+
+###### Are there at least 30 graphic design elements?
+
+###### Are there at least 5 atoms?
+
+###### Are there at least 5 molecules?
+
+###### Are there at least 5 organisms?
+
+###### Are there at least 10 multistate elements?
+
+#### Design screens
+
+###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”?
+
+###### Is the deliverable in the correct format (Figma)?
+
+###### Is there a title within the document?
+
+###### Is the document clear, simple and easy to read?
+
+###### Are there 5 screens?
+
+###### Do style, colors, buttons, text match with the initial wireframes?
+
+#### second Animation
+
+###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”?
+
+###### Is the deliverable in the correct format (Figma)?
+
+###### Is there a title within the document?
+
+###### Is the document clear, simple and easy to read?
+
+###### Can you confirm that this is a high-fidelity prototype?
+
+###### Is there a starting screen?
+
+###### Is there an ending screen?
+
+###### Do all the connections between screens work?
+
+###### Are there multistate buttons which change every time you click somewhere?
+
+#### Desirability testing
 
 ###### Is there a zip folder?
-###### Is the zip folder labeled as “ProjectTitle_Name_FirstName”?
-###### Are there all the deliverables indicated in the instructions?
+
+###### Is there a zip folder labeled as “ProjectTitle_Name_FirstName”?
+
 ###### Are the deliverables labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”?
-###### Are the deliverables in the correct format?
+
 ###### Are the documents clear, simple and easy to read?
+
 ###### Is there a desirability testing board with 25+ different adjectives?
+
 ###### Are there pictures from the desirability test?
+
 ###### Is there a PDF document with the outcomes of the desirability test?
-###### If the outcomes are not consistent with the values, are there 3 suggestions on how to make the moodboard and design library evolve?
+
+##### Confirm if the outcome are consistent with the values. If they are just answer "YES" to the next question.
+
+###### If the outcomes are not consistent with the values, are there 3 suggestions on how to make the moodboard and design library evolve?

subjects/ui/building-an-interface/second-animation/README.md

@@ -1,21 +1,26 @@
-# UI IV - Ex 4 - Animation
+## second Animation
 
-**Instructions:**
+### Instructions
 
 Animate your 5 screens on Figma. Think about multistate!!
 
-**Deliverable:** 
+**Deliverable:**
+
+- An animated high-fidelity prototype on Figma.
+
+Don't forget to:
 
-- An animated high-fidelity prototype on Figma
 - 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:** 
+**Tips:**
 
-- [Efficiently Manage Your Designs - How Mockplus State Page Helps To View & Manage Multiple State](https://help.mockplus.com/p/372)
+- 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!
 
-**Quote:** 
+**Resources:**
+
+- [Efficiently Manage Your Designs - How Mockplus State Page Helps To View & Manage Multiple State](https://help.mockplus.com/p/372)
 
-‘Speak human: Use the words your users use.’ Dan Saffer | Microinteractions
+**Quote:**
 
+"Speak human: Use the words your users use.’ Dan Saffer | Microinteractions.

subjects/ui/building-an-interface/styleguide/README.md

@@ -1,40 +1,46 @@
-# UI IV - Ex 1 - Styleguide
+## Styleguide
 
-**Context:** 
+**Context:**
 
-In this quest, you’ll have to build your own interface. 
+In this quest, you’ll have to build your own interface.
 
-After designing your own style guide with a moodboard, colors and typography, you can use the series of consistency principles, atomic design structure, the techniques to build you own library and then a series of screens. Step by step, you’ll have built an animated high-fidelity prototype. 
+After designing your own style guide with a moodboard, colors and typography, you can use the series of consistency principles, atomic design structure, the techniques to build you own library and then a series of screens. Step by step, you’ll have built an animated high-fidelity prototype.
 
-The very last step will be to test it on users to detect the impressions they get when they discover your app. 
+The very last step will be to test it on users to detect the impressions they get when they discover your app.
 
-Once again, feel free to get as much inspiration as you need from existing design systems. Dribbble, consistency and structure are your best friends!
+Once again, feel free to get as much inspiration as you need from existing design systems. Dribble, consistency and structure are your best friends!
 
-**Instructions:** 
+### Instructions
 
-Your agency works on a digital product to create an e-commerce app for second-hand electronic devices. You collaborate with a UX designer from your team. They have deisgned the wireframes and pass it on to you! 
+Your agency works on a digital product to create an e-commerce app for second-hand electronic devices. You collaborate with a UX designer from your team. They have designed the wireframes and pass it on to you!
 
-Design a style guide (= a moodboard with typography + examples of typography with buttons, title, description and content). 
+Design a style guide (= a moodboard with typography + examples of typography with buttons, title, description and content).
 
-Also think about the values and spirit you want to spread through this moodboard, we’ll get back to it in Ex. 5.
+Also think about the values and spirit you want to spread through this moodboard, we’ll get back to it in exercise "Desirability Testing".
 
-**Deliverables:** 
+### Deliverables
 
 - A Figma moodboard that includes:
-    - Pictures
-    - 2 to 3 main colors
-    - Examples of typography applied to graphic elements
-        - Title
-        - Description or subtitle
-        - Content
-        - Button
+
+  - Pictures
+  - 2 to 3 main colors
+  - Examples of typography applied to graphic elements:
+
+    - Title
+    - Description or subtitle
+    - Content
+    - Button
+
+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.
-- 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:**
+
+- 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:** 
+**Resources:**
 
 - [Video tutorial on Figma](https://www.youtube.com/watch?v=FTFaQWZBqQ8)
 - [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/)

subjects/ui/building-an-interface/styleguide/audit/README.md

@@ -1,13 +0,0 @@
-#### Audit
-
-###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”?
-###### Is the deliverable in the correct format (Figma)?
-###### Is there a title within the document?
-###### Is the document clear, simple and easy to read?
-###### Does the moodboard include pictures?
-###### Does the moodboard include 2 to 3 main colors?
-###### Is there typography for a title?
-###### Is there typography for a description or subtitle?
-###### Is there typography for some content?
-###### Is there typography for a button?
-

subjects/ui/colors-and-moodboard/color-codes/README.md

@@ -1,23 +1,25 @@
-# UI I - Ex 2 - Color codes
+## Color codes
 
-**Instructions:** 
+### Instructions
 
-Go to these 7 websites and make the color palettes out of them (3 to 4 main colors). 
+Go to these 7 websites and make the color palettes out of them (3 to 4 main colors).
 
-**Deliverable:** 
+**Deliverable:**
 
 - A Figma file including screenshots of the main page, URL, extracted colors and the matching color codes.
+
+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.
-- 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:** 
+**Tips:**
 
 - You can use the document from the previous exercise to add the color codes on Figma.
 - Use the Color Pipette to detect the color codes!
+- 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:** 
+**Resources:**
 
 - [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/)
 - [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)
@@ -28,4 +30,4 @@ Go to these 7 websites and make the color palettes out of them (3 to 4 main colo
 - [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/)
+- [https://www.nhp.gov.in/](https://www.nhp.gov.in/)

subjects/ui/colors-and-moodboard/color-codes/audit/README.md

@@ -1,7 +0,0 @@
-#### Audit 
-
-###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”?
-###### Is the deliverable in the correct format (Figma)?
-###### Is there a title within the document?
-###### Is the document clear, simple and easy to read?
-###### Do the color codes match with the extracted colors ? You can use [Hex Color Codes](https://hexcolorcodes.org/)

subjects/ui/colors-and-moodboard/color-combinations/README.md

@@ -1,10 +1,10 @@
-# UI I - Ex 3 - Color combinations
+## Color combinations
 
-**Instructions:** 
+### Instructions
 
-Let's browse! 
+Let's browse!
 
-Find 3 digital products (websites or apps) that use each kind of color palette combination: 
+Find 3 digital products (websites or apps) that use each kind of color palette combination:
 
 - Monochromatic
 - Analogous
@@ -13,66 +13,66 @@ Find 3 digital products (websites or apps) that use each kind of color palette c
 - Triadic
 - Double complementary
 
-**Deliverable:** 
+You need 3 websites or apps per color palette combination!
 
-- A Figma file including for each digital product (websites or apps)
-    - screenshots of the main page
-    - the matching URL
-    - the main colors and
-    - the kind of color combination.
-- 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!
+**Deliverable:**
+
+- A Figma file including for each digital product (websites or apps):
 
+  - screenshots of the main page.
+  - the matching URL.
+  - the main colors.
+  - the kind of color combination.
 
+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:** 
+**Tips:**
 
 - You can find HSB (Hue, Saturation, Brightness) as well as HSV (Hue, Saturation, Value) depending of the source.
+- 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:** 
+**Resources:**
 
 - [https://coloursandmaterials.wordpress.com/2014/09/16/colour-system/](https://coloursandmaterials.wordpress.com/2014/09/16/colour-system/)
 - ![Color wheel combinations](Resource.png)
 
+**Example:**
 
-**Monochromatic examples:** 
+**Monochromatic:**
 
-- [https://www.benefitcosmetics.com/](https://www.benefitcosmetics.com/) 
-- [http://www.jwilouvres.com.au/](http://www.jwilouvres.com.au/) 
+- [https://www.benefitcosmetics.com/](https://www.benefitcosmetics.com/)
+- [http://www.jwilouvres.com.au/](http://www.jwilouvres.com.au/)
 - [http://blank.com.pt/](http://blank.com.pt/)
 
+**Analogous:**
 
-**Analogous examples:**
-
-- [https://www.natuurenmilieu.nl/](https://www.natuurenmilieu.nl/) 
-- [https://campesinorum.com/](https://campesinorum.com/) 
+- [https://www.natuurenmilieu.nl/](https://www.natuurenmilieu.nl/)
+- [https://campesinorum.com/](https://campesinorum.com/)
 - [https://www.lobster.es/](https://www.lobster.es/)
 
+**Complementary:**
 
-**Complementary examples:**
-
-- [https://www.rolandgarros.com/](https://www.rolandgarros.com/fr-fr) 
-- [https://squilla.io/](https://squilla.io/) 
+- [https://www.rolandgarros.com/](https://www.rolandgarros.com/fr-fr)
+- [https://squilla.io/](https://squilla.io/)
 - [https://gomim.com/en/](https://gomim.com/en/)
 
+**Split complementary:**
 
-**Split complementary examples:**
-
-- [https://flythenest.io/en/](https://flythenest.io/en/) 
-- [https://www.kineuphorics.com/](https://www.kineuphorics.com/) 
+- [https://flythenest.io/en/](https://flythenest.io/en/)
+- [https://www.kineuphorics.com/](https://www.kineuphorics.com/)
 - [https://www.ma-tea.de/](https://www.ma-tea.de/)
 
+**Triadic**
 
-**Triadic examples**
-
-- [https://normalnow.com/](https://normalnow.com/) 
-- [https://brainbakery.com/en/](https://brainbakery.com/en/) 
+- [https://normalnow.com/](https://normalnow.com/)
+- [https://brainbakery.com/en/](https://brainbakery.com/en/)
 - [https://www.barkbox.com/](https://www.barkbox.com/)
 
+**Dual complementary or Tetradic**
 
-**Dual complementary or Tetradic examples**
-
-- [https://www.airtable.com/](https://www.airtable.com/) 
-- [https://calendar.google.com/](https://calendar.google.com/) 
+- [https://www.airtable.com/](https://www.airtable.com/)
+- [https://calendar.google.com/](https://calendar.google.com/)
 - [https://www.ebay.com/](https://www.ebay.com/)

subjects/ui/colors-and-moodboard/color-combinations/audit/README.md

@@ -1,12 +0,0 @@
-#### Audit
-
-###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”?
-###### Is the deliverable in the correct format (Figma)?
-###### Is there a title within the document?
-###### Is the document clear, simple and easy to read?
-###### Do the websites or apps chosen match with a correct color wheel combinations?
-###### Are there 3 websites or apps per color palette combination?
-###### Are all websites or apps different from the examples in the instructions?
-
-
-

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

@@ -1,26 +1,12 @@
-# UI I - Ex 1 - Find the colors
+## Find the colors
 
-**Context:** 
+**Context:**
 
 This first UI quest is a series of exercises to practice colors, moodboards, typography and replicate screens on Figma!
 
-**Instructions:** 
+### 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.
+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/)
@@ -30,8 +16,24 @@ Go to these 7 websites and make the color palettes out of them (3 to 4 main colo
 - [https://brave.com/es/](https://brave.com/es/)
 - [https://www.nhp.gov.in/](https://www.nhp.gov.in/)
 
-**Resources:** 
+**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)
+- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)

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

@@ -1,9 +0,0 @@
-#### Audit
-
-###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”?
-###### Is the deliverable in the correct format (Figma)?
-###### Is there a title within the document?
-###### Is the document clear, simple and easy to read?
-###### Are there 7 screenshots of the 7 pages or screens?
-###### Does each screenshot have a URL next to it?
-###### Do the main colors match with the ones from the screens?

subjects/ui/colors-and-moodboard/moodboard/README.md

@@ -1,30 +1,34 @@
-# UI I - Ex 4 - Moodboard
+## Moodboard
 
-**Instructions:** 
+### Instructions
 
 Create 4 different moodboards based on these 4 briefs and extract a color palette.
 
-**Briefs:** 
+**Briefs:**
 
 - 1: A physics teacher that wants to make his website catchy for 12 year-olds.
 - 2: A Sri Lankan wedding planner website that wants to breathe sobriety and modernity.
 - 3: An e-commerce platform that sells West African wax and wants to feel more luxurious in its spirit to stand out.
 - 4: An NGO that helps parents of kids with autism, wants to spread joy and hope for a fundraiser.
 
-**Deliverables:** 
+### Deliverables
 
-- A Figma file per moodboard
-- On each moodboard, several pictures (5 to 12) that are graphically consistent in terms of colors
-- The main colors extracted and shown on the side
-- One color code per color (RGB, Hex or HSB)
-- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”.  For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
+- A Figma file per moodboard.
+- On each moodboard, several pictures (5 to 12) that are graphically consistent in terms of colors.
+- The main colors extracted and shown on the side.
+- One color code per color (RGB, Hex or HSB).
+
+Don't forget to:
+
+- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
 - Add a title within all written documents.
-- Pay attention to the global aspect of the deliverables. They 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:** 
+
+**Tips:**
 
 - [Use freely-usable images!](https://buffer.com/library/free-images/)
-- Examples of moodboards (in addition, the moodboard should include the color codes): 
-- [https://lovestylecomunicacion.com/wp-content/uploads/2017/09/A.png](https://lovestylecomunicacion.com/wp-content/uploads/2017/09/A.png) 
-- [https://caseperlatesta.com/wp-content/uploads/2015/09/Moodboard23_grey_peach-1024x1024.jpg](https://caseperlatesta.com/wp-content/uploads/2015/09/Moodboard23_grey_peach-1024x1024.jpg) 
-- [https://i.pinimg.com/564x/ee/9d/d6/ee9dd6fbb82b0e5b4dd2924580b765dd.jpg](https://i.pinimg.com/564x/ee/9d/d6/ee9dd6fbb82b0e5b4dd2924580b765dd.jpg)
+- Examples of moodboards (in addition, the moodboard should include the color codes):
+    - [Example1](https://lovestylecomunicacion.com/wp-content/uploads/2017/09/A.png)
+    - [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!

subjects/ui/colors-and-moodboard/moodboard/audit/README.md

@@ -1,29 +0,0 @@
-#### Audit
-
-###### Is there a zip folder?
-###### Is the zip folder labeled as “ProjectTitle_Name_FirstName”?
-###### Are there all the deliverables indicated in the instructions?
-###### Are the deliverables labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”?
-###### Are the deliverables in the correct format?
-###### Are the documents clear, simple and easy to read?
-
-###### On Moodboard #1, are there several pictures that are graphically consistent?
-###### On Moodboard #1, are there 2 to 3 main colors that stand out
-###### On Moodboard #1, do the colors have at least one code (RGB, Hex, or HSB)
-###### On Moodboard #1, do the color code match with the designated color? [thanks to this tool](http://onlinewebtool.com/colorpicker.php)
-
-###### On Moodboard #2, are there several pictures that are graphically consistent?
-###### On Moodboard #2, are there 2 to 3 main colors that stand out
-###### On Moodboard #2, do the colors have at least one code (RGB, Hex, or HSB)
-###### On Moodboard #2, do the color code match with the designated color? [thanks to this tool](http://onlinewebtool.com/colorpicker.php)
-
-###### On Moodboard #3, are there several pictures that are graphically consistent?
-###### On Moodboard #3, are there 2 to 3 main colors that stand out
-###### On Moodboard #3, do the colors have at least one code (RGB, Hex, or HSB)
-###### On Moodboard #3, do the color code match with the designated color? [thanks to this tool](http://onlinewebtool.com/colorpicker.php)
-
-###### On Moodboard #4, are there several pictures that are graphically consistent?
-###### On Moodboard #4, are there 2 to 3 main colors that stand out
-###### On Moodboard #4, do the colors have at least one code (RGB, Hex, or HSB)
-###### On Moodboard #4, do the color code match with the designated color? [thanks to this tool](http://onlinewebtool.com/colorpicker.php)
-

subjects/ui/colors-and-moodboard/typography-moodboard/README.md

@@ -1,21 +1,31 @@
-# UI I - Ex 6 - Typography Moodboard
+## Typography Moodboard
 
-**Instructions:** 
+### Instructions
 
-Find consistent typography for your moodboards from Ex. 4. 
+Find consistent typography for your moodboards from the "Moodboard" exercise.
 
-**Deliverables:** 
+### Deliverables
+
+- A Figma file with 4 moodboards from the "Moodboard" exercise, and typography:
+
+  - 1 for a title
+  - 1 for a button
+  - 1 for a description
+  - 1 for the text
+
+Don't forget to:
 
-- A Figma file with 4 moodboards from Ex. 4 and typography:
-    - 1 for a title
-    - 1 for a button
-    - 1 for a description
-    - 1 for the text
 - 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:** 
+**Tips:**
+
+- Bold, italic, normal, light, etc. are fonts, not typography.
+- [Google Fonts](https://fonts.google.com/) is another great friend to have by your side
+- [Example of a caption here](https://www.figma.com/file/SbQMPjfLOzg92g8YZFlrRh/UI-I---Ex-5)
+- 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:**
 
 - [Font](https://en.wikipedia.org/wiki/Font)
 - [Glyph](https://en.wikipedia.org/wiki/Glyph)
@@ -24,17 +34,8 @@ Find consistent typography for your moodboards from Ex. 4.
 - Instagram account: [ux_ui.world](https://www.instagram.com/ui_ux.world/)
 - Instagram account: [ui.netwrk](https://www.instagram.com/ui.netwrk/)
 - Instagram account: [uxuidailytips](https://www.instagram.com/uiuxdailytips/)
-
-**Tips:** 
-
-- Bold, italic, normal, light, etc. are fonts, not typography.
-- [Google Fonts](https://fonts.google.com/) is another great friend to have by your side
-- [Example of a caption here](https://www.figma.com/file/SbQMPjfLOzg92g8YZFlrRh/UI-I---Ex-5)
-
-**Resources:** 
-
 - [What is Typography](https://www.renderforest.com/blog/what-is-typography)
 - [Why is Typography important?](https://careerfoundry.com/en/blog/ui-design/beginners-guide-to-typography/)
 - [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)
+- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)

subjects/ui/colors-and-moodboard/typography-moodboard/audit/README.md

@@ -1,27 +0,0 @@
-#### Audit 
-
-###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”?
-###### Is the deliverable in the correct format (Figma)?
-###### Is there a title within the document?
-###### Is the document clear, simple and easy to read?
-
-###### Are there 4 different fonts (one for each moodboard)?
-###### On Moodboard #1, is there a typography for a title? 
-###### On Moodboard #1, is there a typography for a button? 
-###### On Moodboard #1, is there a typography for a description? 
-###### On Moodboard #1, is there a typography for the text? 
-
-###### On Moodboard #2, is there a typography for a title? 
-###### On Moodboard #2, is there a typography for a button? 
-###### On Moodboard #2, is there a typography for a description? 
-###### On Moodboard #2, is there a typography for the text? 
-
-###### On Moodboard #3, is there a typography for a title? 
-###### On Moodboard #3, is there a typography for a button? 
-###### On Moodboard #3, is there a typography for a description? 
-###### On Moodboard #3, is there a typography for the text? 
-
-###### On Moodboard #4, is there a typography for a title? 
-###### On Moodboard #4, is there a typography for a button? 
-###### On Moodboard #4, is there a typography for a description? 
-###### On Moodboard #4, is there a typography for the text? 

subjects/ui/colors-and-moodboard/typography/README.md

@@ -1,8 +1,8 @@
-# UI I - Ex 5 - Typography
+## Typography
 
-**Instructions:** 
+### Instructions
 
-Go to these websites and detect the typographies used. 
+Go to these websites and detect the typographies used.
 
 - [https://unric.org/no](https://unric.org/no)
 - [https://www.strongbowcider.com/bug-exterminator-brisbane](https://www.strongbowcider.com/bug-exterminator-brisbane)
@@ -15,24 +15,26 @@ Go to these websites and detect the typographies used.
 - [https://www.tomorrowland.com/fr/festival/bienvenue](https://www.tomorrowland.com/fr/festival/bienvenue)
 - [https://artisanscanada.com/](https://artisanscanada.com/)
 
-**Deliverables:** 
+### Deliverables
 
 - A Figma file showing all the typographies used in each website or app.
+
+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.
-- 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:** 
+**Tips:**
 
 - Mind the presentation!
 - Feel free to browse Google Chrome options to detect typography ;-)
 - [Google Fonts](https://fonts.google.com/) is another great friend to have by your side
+- 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:** 
+**Resources:**
 
 - [What is Typography](https://www.renderforest.com/blog/what-is-typography)
 - [Why is Typography important?](https://careerfoundry.com/en/blog/ui-design/beginners-guide-to-typography/)
 - [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)
+- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)

subjects/ui/colors-and-moodboard/typography/audit/README.md

@@ -1,16 +0,0 @@
-#### Audit
-
-###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”?
-###### Is the deliverable in the correct format (Figma)?
-###### Is there a title within the document?
-###### Is the document clear, simple and easy to read?
-###### Are there 4 fonts from Unric.org?
-###### Are there 3 fonts from Strongbowcider.org?
-###### Are there 3 fonts from Bbqgrillsandfire.com?
-###### Are there 3 fonts from Wikipedia.org?
-###### Are there 7 fonts from Texasprivateinvestigator.com?
-###### Is there 1 font from Bumble?
-###### Are there 3 fonts from Adopteunepoule.fr?
-###### Are there 3 fonts from Slaveryfootprint.org?
-###### Is there 1 font from Tomorrowland.com?
-###### Is there 1 font from Artisanscanada.com?

subjects/ui/colors-and-moodboard/ui-challenge-bitcoin-dashboard/README.md

@@ -1,26 +1,31 @@
-# UI I - Ex 11 - UI Challenge - Bitcoin Dashboard
+## UI Challenge - Bitcoin Dashboard
 
-**Instructions:** 
+### Instructions
 
-Copy this image on Figma
-![Dashboard](Dashboard.png)
+Create this image on Figma:
 
-**Deliverable:** 
+![Dashboard](Dashboard.png)
 
-- A Figma file with a copy of the image with Figma elements
 - Make sure:
-    - You use symbols and variants
-    - 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 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.
-- 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:** 
+**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
+- 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!

subjects/ui/colors-and-moodboard/ui-challenge-bitcoin-dashboard/audit/README.md

@@ -1,16 +1,247 @@
-#### Audit 
+#### Find the Colors
 
 ###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”?
+
+###### Is the deliverable in the correct format (Figma)?
+
+###### Is there a title within the document?
+
+###### Is the document clear, simple and easy to read?
+
+###### Are there screenshots of the 7 pages or screens?
+
+###### Does each screenshot have a URL next to it?
+
+###### Do the main colors match with the ones from the screens?
+
+#### Color codes
+
+###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”?
+
+###### Is the deliverable in the correct format (Figma)?
+
+###### Is there a title within the document?
+
+###### Is the document clear, simple and easy to read?
+
+###### Does the file include screenshots of the main page, URL, extracted colors and the corresponding color codes?
+
+