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?
+
+###### Do the color codes match with the extracted colors ? You can use [Hex Color Codes](https://hexcolorcodes.org/) to confirm.
+
+#### Color combinations
+
+###### 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?
+
+#### Moodboard
+
+###### 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?
+
+##### For each Moodboard 1, 2, 3 and 4 check the folowing:
+
+###### Are there several pictures that are graphically consistent?
+
+###### Are there 2 to 3 main colors that stand out?
+
+###### Is there only one color code per color (RGB, Hex, or HSB)?
+
+###### Does the color code match the designated color? [Use this tool](http://onlinewebtool.com/colorpicker.php)
+
+#### Typography
+
+###### 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?
+
+#### Typography Moodboard
+
+###### 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?
+
+##### For each Moodboard 1, 2, 3 and 4 check the folowing:
+
+###### Are there 4 different fonts (one for each moodboard)?
+
+###### Is there a typography for a title?
+
+###### Is there a typography for a button?
+
+###### Is there a typography for a description?
+
+###### Is there a typography for the text?
+
+#### UI Challenge Timer
+
+###### 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 two half circles as this one?
+
+![Example](Timer2.png)
+
+###### Is there a 'PUSH UP' text and back arrow like in the image?
+
+###### Is there a Stop button with the text underneath?
+
+###### Is there a Reset button with the text underneath?
+
+###### Is there a gradient background behind the number 5?
+
+###### Are all the layers labeled and organized in groups?
+
+![Example](Timer1.png)
+
+#### UI Challenge Watches
+
+###### 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 designed screens match the images?
+
+###### Do all layers have a name and belong to a group of graphic elements?
+
+![Example](WatchCK.png)
+
+###### Are there 2 pages: one for the screen and one with the symbols?
+
+###### Is the overlay done with transparency?
+
+###### Was the mask used to change the shape of the imported image?
+
+#### UI Challenge Flight
+
+###### 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 designed screen match the image?
+
 ###### Do all layers have a name and belong to a group of graphic elements?
-    
-    
-    ![Example](DashboardCK1.png)
-    
+
+![Example](FlightCK5.png)
+
 ###### Are there 2 pages: one for the screen and one with the symbols?
+
+![Example](FlightCK2.png)
+
+###### Have masks been used to change the shape of the image?
+
+![Example](FlightCK1.png)
+
 ###### Is the overlay done with transparency?
+
+![Example](FlightCK3.png)
+
+![Example](FlightCK4.png)
+
+#### UI Challenge - Spotify
+
+###### 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 designed screen match the image?
+
+###### Are there 2 pages: one for the screen and one with the symbols?
+
+![Example](SpotifyCK2.png)
+
+###### Are there symbols and variants for the songs in the Symbols page?
+
+###### Is the background made with linear color?
+
+![Example](SpotifyCK1.png)
+
+###### Are all the elements gathered in groups?
+
+###### Are all the layers named and organized?
+
+###### Is there Apple Design System (head bar)?
+
+#### UI Challenge Bitcoin Dashboard
+
+###### 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 designed screen match the image?
+
+###### Do all layers have a name and belong to a group of graphic elements?
+
+![Example](DashboardCK1.png)
+
+###### Are there 2 pages: one for the screen and one with the symbols?
+
+###### Is the overlay done with transparency?
+
 ###### Was the mask function used to change the shape of the image?
-##### Was the linear color function used?
+
+###### Was the linear color function used?

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

@@ -1,25 +1,29 @@
-# UI I - Ex 9 - UI Challenge - Flight
+## UI Challenge - Flight
 
-**Instructions**: 
+### Instructions
 
-Copy this image on Figma
+Create this image on Figma:
 
 ![Flight](Flight.png)
 
-**Deliverable:** 
+- 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:
 
-- A Figma file with a copy of the image with Figma elements
-- Make sure:
-    - You use symbols and variants
-    - All you layers are names and organized
-    - You use overlays
-    - You use masks to change the shape of an imported image (Amsterdam, Maldives, New Delhi, Sydney icons)
 - 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:**
 
-- 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)
+- 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!

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

@@ -1,28 +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 designed screen match the image?
-###### Do all layers have a name and belong to a group of graphic elements?
-    
-    ![Example](FlightCK5.png)
-    
-
-###### Are there 2 pages: one for the screen and one with the symbols?
-    
-    
-    ![Example](FlightCK2.png)
-    
-
-###### Have masks been used to change the shape of the image?
-    
-    ![Example](FlightCK1.png)
-    
-
-###### Is the overlay done with transparency?
-    
-    ![Example](FlightCK3.png)
-    
-    ![Example](FlightCK4.png)

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

@@ -1,25 +1,31 @@
-# UI I - Ex 10 - UI Challenge - Spotify
+## UI Challenge - Spotify
 
-**Instructions:** 
+### Instructions
 
-Copy this image on Figma
-![Spotify](Spotify.jpg)
+Create this image on Figma:
 
-**Deliverable:** 
+![Spotify](Spotify.jpg)
 
-- A Figma file with a copy of the image with Figma elements
 - 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)
-- 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”.
+
+  - 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.
-- 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:**
 
-- 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)
+- 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!

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

@@ -1,19 +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 designed screen match the image
-###### Are there 2 pages: one for the screen and one with the symbols?
-    
-    ![Example](SpotifyCK2.png)
-
-###### Are there symbols and variants for the songs in the Symbols page?
-###### Is the background made with linear color?
-    
-    ![Example](SpotifyCK1.png)
-
-###### Are all the elements gathered in groups?
-###### Are all the layers names and organized?
-###### Is there Apple Design System (head bar)?

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

@@ -1,24 +1,29 @@
-# UI I - Ex 7 - UI Challenge - Timer
+## UI Challenge - Timer
 
-**Instructions:** 
+### Instructions
 
-Copy this image on Figma. 
-![Timer](timer.png)
+Create this image on Figma:
 
+![Timer](Timer.png)
 
-**Deliverable:** 
+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:
 
-- A Figma file
-- Please make sure you use:
-    - 2 half circles to draw the circle around the timer
-    - Gradient to fill the main circle
-    - Groups
-    - Named layers
 - 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:**
 
-- The font is RAJDANHI
-- The frame is Android 360 x 640px
+- 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!

subjects/ui/colors-and-moodboard/ui-challenge-timer/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 two half circles as this one?
-    
-   ![Example](Timer2.png)
-###### Is there a 'PUSH UP' text and back arrow?
-###### Is there a Stop button with the text? 
-###### Is there a Reset button with the text?
-###### Is there a gradient background behind the 5?
-###### Are all the layers labeled and organized in groups?
-    
-    ![Example](Timer1.png)

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

@@ -1,30 +1,33 @@
-# UI I - Ex 8 - UI Challenge - Watches
+## UI Challenge - Watches
 
-**Instructions:** 
+### Instructions
 
-Copy these images on Figma
+Copy these images on Figma:
 
 ![Screen1](Watch1.png)
 ![Screen2](Watch2.png)
 ![Screen3](Watch3.png)
 ![Screen4](Watch4.png)
 
+- Make sure:
+  - 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 the imported image.
 
-**Deliverable:** 
+**Deliverable:**
+
+- A Figma file with a copy of the image with Figma elements.
+
+Don't forget to:
 
-- 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 the imported image
 - 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: 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
+- 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!

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

@@ -1,15 +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 designed screens designed match the images?
-###### Do all layers have a name and belong to a group of graphic elements?
-    
-    
-    ![Example](WatchCK.png)
-    
-###### Are there 2 pages: one for the screen and one with the symbols?
-###### Is the overlay done with transparency?
-###### Was the mask was used to change the shape of the imported image?

subjects/ui/heuristics/audit/audit/README.md

@@ -1,11 +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 chart? 
-###### Is the chart complete?
-###### Are the 5 steps included in the report?

subjects/ui/heuristics/heuristic-audit/README.md

@@ -1,39 +1,43 @@
-# UI V - Ex 1 - Audit
+## Heuristic audit
 
-**Context:** 
+**Context:**
 
-Welcome to this very last quest! 
+Welcome to this very last quest!
 
-The point is to take on the role of a UX auditor. You’ll be asked to make the audit of a website or an app, and then to write a series of recommendations to improve it. 
+The point is to take on the role of a UX auditor. You’ll be asked to make the audit of a website or an app, and then to write a series of recommendations to improve it.
 
 Let’s be critical, creative and impactful!
 
-**Instructions:** 
+### Instructions
 
-Run a heuristic audit on one of these 3 different websites or app: 
+Run a heuristic audit on one of these 3 different websites or app:
 
 - [https://www.ikea.com/](https://www.ikea.com/)
 - [https://www.doctorswithoutborders.org/](https://www.doctorswithoutborders.org/)
 - App WikiArt
 
-**Deliverables:**
+Recommended steps:
 
-- A completed chart
-- A report including the 5 recommended steps described below
-- 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!
+- Define the scope.
+  1. Know the business requirements and demographic of the end-users.
+  2. Decide on which reporting tools and heuristics to use (in this case: this [heuristic evaluation checklist](https://drive.google.com/file/d/10KbfbNZA1oVS1sXbjjXLPPmdZ6nqVkdc/view)).
+  3. Evaluate the experience and identify usability issues.
+  4. Analyze and aggregate the data.
+  5. Present the results.
+
+### Deliverables
+
+- A completed chart.
+- A report including the 5 recommended steps described above.
 
+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:**
 
-- Recommended steps
-    - Define the scope.
-        1. Know the business requirements and demographic of the end-users.
-        2. Decide on which reporting tools and heuristics to use (in this case: this [heuristic evaluation checklist](https://drive.google.com/file/d/10KbfbNZA1oVS1sXbjjXLPPmdZ6nqVkdc/view)).
-        3. Evaluate the experience and identify usability issues.
-        4. Analyze and aggregate the data.
-        5. Present the results.
+- 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:**
 
@@ -43,4 +47,4 @@ Run a heuristic audit on one of these 3 different websites or app:
 - [Heuristic analysis for UX: How to run a usability evaluation](https://uxdesign.cc/heuristic-analysis-for-ux-how-to-run-a-usability-evaluation-12c86d43936f)
 - [Heuristic analysis in the design process](https://uxdesign.cc/heuristic-analysis-in-the-design-process-usability-inspection-methods-d200768eb38d)
 - [A new usability heuristic evaluation checklist](https://uxplanet.org/a-new-usability-heuristic-evaluation-checklist-259f588da308)
-- [Tool : Heuristic evaluation checklist](https://drive.google.com/file/d/10KbfbNZA1oVS1sXbjjXLPPmdZ6nqVkdc/view)
+- [Tool : Heuristic evaluation checklist](https://drive.google.com/file/d/10KbfbNZA1oVS1sXbjjXLPPmdZ6nqVkdc/view)

subjects/ui/heuristics/recommendations/README.md

@@ -1,22 +1,25 @@
-# UI V - Ex 2 - Recommendations
+## Recommendations
 
-**Instructions:** 
+### Instructions
 
-Based on the audit you made in Ex.1, write a set of 3 to 6 recommendations to improve heuristics and usability.
+Based on the audit you made in "Heuristic audit" exercise, write a set of 3 to 6 recommendations to improve heuristics and usability.
 
 **Websites or Apps:**
 
 - [https://www.ikea.com/](https://www.ikea.com/)
 - [https://www.doctorswithoutborders.org/](https://www.doctorswithoutborders.org/)
-- App WikiArt
+- App WikiArt.
 
-**Deliverable:** 
+**Deliverable:**
+
+- A PDF document with 3 to 6 recommendations.
+
+Don't forget to:
 
-- A PDF document with 3 to 6 recommendations
 - Upload the PDF document 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 document.
-- Pay attention to the global aspect of the document. 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:**
 
-- Classify your recommendations in heuristic criteria
+- Classify your recommendations in heuristic criteria.
+- Pay attention to the global aspect of the document. 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/heuristics/recommendations/audit/README.md

@@ -1,11 +1,33 @@
-#### Audit 
+#### Heuristic audit
+
+###### Is there a zip folder labeled as “ProjectTitle_Name_FirstName”?
+
+###### Are the deliverables labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”?
+
+###### Are the documents clear, simple and easy to read?
+
+###### Is there a chart?
+
+###### Is the chart complete?
+
+###### Are the 5 steps included in the report?
+
+#### Recommendations
 
 ###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”?
+
 ###### Is the deliverable in the correct format (PDF)?
+
 ###### Is there a title within the document?
+
 ###### Is the document clear, simple and easy to read?
+
+###### Is there between 3 to 6 recommendations?
+
 ###### Are the recommendations consistent with the report's conclusions?
+
 ###### Do the recommendations fit in some of these criteria:
+
      - Visibility of system status
      - Matching between the system and the real world
      - User Control and Freedom
@@ -13,4 +35,4 @@
      - Error prevention
      - Recognition rather than Recall
      - Flexibility and efficiency of use
-     - Aesthetics and minimalist design
+     - Aesthetics and minimalist design

subjects/ui/rules/accessbility-app/README.md

@@ -1,18 +1,23 @@
-# UI III - Ex 4 - Accessibility (App)
+## Accessibility (App)
 
-**Instructions:** 
+### Instructions
 
 Choose an app you find particularly accessible. Find at least 3 concrete examples of accessible measures and explain how they ease the reading or perception of visual content.
 
-**Deliverables:** 
+### Deliverables
 
 - A 3-page Figma file with 3 different elements from an app (it can be from 3 different apps) that are accessible. The three measures must be different.
+
+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:**
 
 - [What accessibility is and why it’s so important](https://uxdesign.cc/what-accessibility-is-and-why-its-so-important-9c56e033ff26)
 - [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/)
@@ -23,10 +28,10 @@ Choose an app you find particularly accessible. Find at least 3 concrete example
 **Criteria:**
 
 - Examples of measures
-    - Color contrast
-    - Highlighted or enlarged text when hovering
-    - Links color that is different from the body text's
-    - Breadcrumbs to indicate where you are in terms of navigation
-    - In forms, the title of the case should be above the text zone
-    - Error states
-    - etc.
+  - Color contrast
+  - Highlighted or enlarged text when hovering
+  - Links color that is different from the body text's
+  - Breadcrumbs to indicate where you are in terms of navigation
+  - In forms, the title of the case should be above the text zone
+  - Error states
+  - etc.

subjects/ui/rules/accessbility-app/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?
-###### At least 3 different measures have been shown, like in the instructions section?
-
-
-Example of presentation and explanation:
-
-[https://www.convinceandconvert.com/digital-marketing/accessible-website-examples/](https://www.convinceandconvert.com/digital-marketing/accessible-website-examples/)

subjects/ui/rules/accessbility-website/README.md

@@ -1,18 +1,23 @@
-# UI III - Ex 3 - Accessibility (website)
+## Accessibility (website)
 
-**Instructions:** 
+### Instructions
 
 Choose a website you find particularly accessible. Find at least 3 concrete examples of accessible measures and explain how they ease the reading or perception of visual content.
 
-**Deliverables:** 
+### Deliverables
+
+- A 3-page Figma file with 3 different elements from a website (it can be from 3 different websites) that are accessible. The 3 measures must be different.
+
+Don't forget to:
 
-- A 3-page Figma file with 3 different elements from a website (it can be from 3 different websites) that are accessible. The three measures must be different.
 - 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:**
 
 - [What accessibility is and why it’s so important](https://uxdesign.cc/what-accessibility-is-and-why-its-so-important-9c56e033ff26)
 - [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/)
@@ -24,10 +29,10 @@ Choose a website you find particularly accessible. Find at least 3 concrete exam
 **Criteria:**
 
 - Examples of measures
-    - Color contrast
-    - Highlighted or enlarged text when hovering
-    - Links color that is different from the body text's
-    - Breadcrumbs to indicate where you are in terms of navigation
-    - In forms, the title of the case should be above the text zone
-    - Error states
-    - etc.
+  - Color contrast.
+  - Highlighted or enlarged text when hovering.
+  - Links color that is different from the body text's.
+  - Breadcrumbs to indicate where you are in terms of navigation.
+  - In forms, the title of the case should be above the text zone.
+  - Error states.
+  - etc.

subjects/ui/rules/accessbility-website/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?
-###### At least 3 different measures have been shown, like in the instructions section?
-
-
-Example of presentation and explanation:
-
-[https://www.convinceandconvert.com/digital-marketing/accessible-website-examples/](https://www.convinceandconvert.com/digital-marketing/accessible-website-examples/)

subjects/ui/rules/breadcrumbs/README.md

@@ -1,17 +1,22 @@
-# UI III - Ex 5 - Breadbcrumbs
+## Breadbcrumbs
 
-**Instructions:** 
+### Instructions
 
-Browse the internet and find at least 5 different examples of breadcrumbs from websites or apps. 
+Browse the internet and find at least 5 different examples of breadcrumbs from websites or apps.
 
 **Deliverable:**
 
-- A Figma file gathering 5 screenshots of breadcrumbs.
+- A Figma file gathering 5 screenshots of breadcrumbs and the respective name of each app or website.
+
+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:**
 
-- [What are breadcrumbs?](https://www.seoptimer.com/blog/breadcrumbs-website/)
+- [What are breadcrumbs?](https://www.seoptimer.com/blog/breadcrumbs-website/)

subjects/ui/rules/breadcrumbs/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 are at least 5 different examples of breadcrumbs?
-###### Is the name of each app or website written?

subjects/ui/rules/calendars/README.md

@@ -1,13 +1,18 @@
-# UI III - Ex 8 - Calendars
+## Calendars
 
-**Instructions:** 
+### Instructions
 
-Browse the internet and find at least 5 different examples of calendars from websites or apps. 
+Browse the internet and find at least 5 different examples of calendars from websites or apps.
 
 **Deliverable:**
 
-- A Figma file gathering 5 screenshots of calendars.
+- A Figma file gathering 5 screenshots of calendars and the respective name of each app or website.
+
+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!

subjects/ui/rules/calendars/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 at least 5 examples of calendars?
-###### Is the name of each app or website written?

subjects/ui/rules/consistency/README.md

@@ -1,18 +1,23 @@
-# UI III - Ex 11 - Consistency
+## Consistency
 
-**Instructions:** 
+### Instructions
 
-Pick a website or an app of your choice*. Highlight 5 signs of consistency across the pages.
+Pick a website or an app of your choice\*. Highlight 5 signs of consistency across the pages.
 
-*Airbnb, Google, Apple, Amazon, Facebook, Instagram and WhatsApp are not accepted.
+\*Airbnb, Google, Apple, Amazon, Facebook, Instagram and WhatsApp are not accepted.
 
 **Deliverable:**
 
-- A Figma file gathering at least 5 signs of consistency.
+- A Figma file gathering at least 5 signs of consistency and the respective name of each app or website.
+
+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:**
 
@@ -20,10 +25,9 @@ Pick a website or an app of your choice*. Highlight 5 signs of consistency acros
 - [The value of consistent design](https://www.invisionapp.com/inside-design/consistent-design/)
 - [Consistency and Standards - Examples of Nielsens's Design Heuristics](https://medium.com/@gregoralbrecht/consistency-and-standards-nielsens-design-heuristic-explained-ac91f450fd8)
 - [The importance of consistency in design work](https://yesimadesigner.com/the-importance-of-consistancy-in-design-work/)
-- Examples of signs of consistency: 
-    - colors
-    - same shaped buttons
-    - alignment
-    - consistent product pages (with identical frameworks)
-    - etc.
-
+- Examples of signs of consistency:
+  - colors.
+  - same shaped buttons.
+  - alignment.
+  - consistent product pages (with identical frameworks).
+  - etc.

subjects/ui/rules/consistency/audit/README.md

@@ -1,8 +1,165 @@
-#### Audit
+#### Grids
 
 ###### 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 one page per screen or frame?
+
+###### Are there colored lines on top of the images?
+
+###### Do the lines highlight aligned elements?
+
+#### Multi state
+
+###### 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 five combinations of buttons, menus or call to actions?
+
+###### Are the multi state buttons gathered in groups?
+
+###### Is the document clean and the elements aligned?
+
+#### Accessibility (website)
+
+###### 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 document have 3 pages?
+
+###### At least 3 different measures have been shown, like we ask in the instructions section?
+
+###### Did the student explain how the measures ease the reading or perception of visual content?
+
+**Example [here](https://www.convinceandconvert.com/digital-marketing/accessible-website-examples/).**
+
+#### Accessibility (App)
+
+###### 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 document have 3 pages?
+
+###### At least 3 different measures have been shown, like we ask in the instructions section?
+
+###### Did the student explain how the measures ease the reading or perception of visual content?
+
+**Example [here](https://www.convinceandconvert.com/digital-marketing/accessible-website-examples/)**
+
+#### Breadbcrumbs
+
+###### 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 5 signs of consistency?
+
+###### Are there are at least 5 different examples of breadcrumbs from websites or apps?
+
+###### Is the name of each app or website written?
+
+#### Toggle buttons
+
+###### 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 5 examples of toggle buttons from websites or apps?
+
+###### Is the name of each app or website written?
+
+#### Radio Buttons
+
+###### 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 5 examples of radio buttons from websites or apps?
+
+###### Is the name of each app or website written?
+
+#### Calendars
+
+###### 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 5 examples of calendars from websites or apps?
+
+###### Is the name of each app or website written?
+
+#### Time pickers
+
+###### 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 5 examples of time pickers from websites or apps?
+
+###### Is the name of each app or website written?
+
+#### Micro-interactions
+
+###### 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 5 examples of micro-interactions or animations from websites or apps?
+
+###### Is the name of each app or website written?
+
+#### Consistency
+
+###### 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 5 signs of consistency from websites or apps?
+
 ###### Is the name of each app or website written?

subjects/ui/rules/grids/README.md

@@ -1,31 +1,36 @@
-# UI III - Ex 1 - Grids
+## Grids
 
-**Context:** 
+**Context:**
 
 Welcome to the 3rd quest of UI.
 
-In this series of exercises, you’ll be asked to open your eyes and collect graphic elements from various websites. You’ll see grids across screens, multi state buttons, how to make a design accessible for all, breadcrumbs, toggle buttons, radio buttons, calendar, time picker with 2 main goals: 
+In this series of exercises, you’ll be asked to open your eyes and collect graphic elements from various websites. You’ll see grids across screens, multi state buttons, how to make a design accessible for all, breadcrumbs, toggle buttons, radio buttons, calendar, time picker with 2 main goals:
 
 - Enrich your graphic general knowledge
 - Detect consistency, that helps users understand a digital product at the first glance.
 
-**Instructions:** 
+### Instructions
 
-Open these 5 images on Figma and draw lines and grids every time you find aligned elements. 
+Open these 5 images on Figma and draw lines and grids every time you find aligned elements.
 
+### Deliverables
 
-**Deliverables:** 
+- A Figma file including:
+    - The screens with lines on top to show grids.
+    - One page per screen or frame.
+
+Don't forget to:
 
-- A Figma file including the screens with lines on top to show grids. One page per screen or frame.
 - 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/)
 - [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)
-- [1st screen example](https://www.figma.com/file/KOzd8yZuJvGLmZLuXjBgDg/UI-III-Ex-1.1) 
-
+- [1st screen example](https://www.figma.com/file/KOzd8yZuJvGLmZLuXjBgDg/UI-III-Ex-1.1)

subjects/ui/rules/grids/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 colored lines on top of the images?
-###### Do the lines highlight aligned elements?
-
-

subjects/ui/rules/micro-interactions/README.md

@@ -1,28 +1,30 @@
-# UI III - Ex 10 - Micro-interactions
+## Micro-interactions
 
-**Instructions:** 
+### Instructions
 
-Browse the internet and find at least 5 different examples of feedback micro-interactions or micro-animations on websites or apps. 
+Browse the internet and find at least 5 different examples of feedback micro-interactions or micro-animations on websites or apps.
 
-Be careful! Feedback is helpful to provide information to the user, not just showing a catchy design. You need to make the difference. 
+Be careful! Feedback is helpful to provide information to the user, not just showing a catchy design. You need to make the difference.
 
 **Deliverable:**
 
 - A Figma file gathering 5 examples of **feedback** micro-interactions or animations. In each example, show the different versions of the element.
+
+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:**
+
+- Feedback is the situation when the app specifically sends a piece of information to the user, like:
+  - Payment accepted
+  - Refreshed feed
+  - Information saved
+  - etc.
+- 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:**
 
 - [Why use micro-interactions in your design](https://hike.one/update/why-use-micro-animations-in-your-design)
-- [Micro-interactions: why, when,  and how to use them to boost the UX](https://uxdesign.cc/micro-interactions-why-when-and-how-to-use-them-to-boost-the-ux-17094b3baaa0)
-
-**Tips:** 
-
-- Feedback is the situation when the app specifically sends a piece of information to the user, like: 
-- Payment accepted
-- Refreshed feed
-- Information saved
-- etc.
+- [Micro-interactions: why, when, and how to use them to boost the UX](https://uxdesign.cc/micro-interactions-why-when-and-how-to-use-them-to-boost-the-ux-17094b3baaa0)

subjects/ui/rules/micro-interactions/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 at least 5 examples of micro-interactions or animations?
-###### Is the name of each app or website written?

subjects/ui/rules/multi-state/README.md

@@ -1,26 +1,29 @@
-# UI III - Ex 2 - Multi state
+## Multi state
 
-**Instructions**: 
+### Instructions
 
-Go to [Sony.com](http://sony.com) and observe the buttons and call to actions. When you hover or click on them, they change! 
+Go to [Sony.com](http://sony.com) and observe the buttons and call to actions. When you hover or click on them, they change!
 
-Make screenshots of the different states of buttons, menu titles, filters etc. Then, gather and organize them. 
+Make screenshots of the different states of buttons, menu titles, filters etc. Then, gather and organize them.
 
-Find at least five combinations of multi state elements.  
+Find at least five combinations of multi state elements.
 
-**Deliverables:** 
+### Deliverables
 
 - A Figma file with 5 combinations of multi state 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:**
 
-**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!
+
+**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)
-- [Example here with Nintendo.com](https://www.figma.com/file/ahSnWRZeKBO62oJDiXltxY/UI-III---Ex-2)
-
-/!\ The screenshots date back to nov 2021. They may differ from the current version of [Nintendo.com](http://Nintendo.com) but the rules are the same
+- [Example here with Nintendo.com](https://www.figma.com/file/ahSnWRZeKBO62oJDiXltxY/UI-III---Ex-2) (The screenshots date back to nov 2021. They may differ from the current version of [Nintendo.com](http://Nintendo.com) but the rules are the same).

subjects/ui/rules/multi-state/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 five combinations of buttons, menus or call to actions?
-###### Are the multi state buttons gathered in groups?
-###### Is the document clean and the elements aligned?
-
-

subjects/ui/rules/radio-buttons/README.md

@@ -1,17 +1,22 @@
-# UI III - Ex 7 - Radio Buttons
+## Radio Buttons
 
-**Instructions:** 
+### Instructions
 
-Browse the internet and find at least 5 different examples of radio buttons from websites or apps. 
+Browse the internet and find at least 5 different examples of radio buttons from websites or apps.
 
 **Deliverable:**
 
-- A Figma file gathering 5 screenshots of radio buttons.
+- A Figma file gathering 5 screenshots of radio buttons and the respective name of each app or website.
+
+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:**
 
-- [What is a radio button?](https://www.justinmind.com/blog/radio-button-design-examples/)
+- [What is a radio button?](https://www.justinmind.com/blog/radio-button-design-examples/)

subjects/ui/rules/radio-buttons/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 at least 5 examples of radio buttons?
-###### Is the name of each app or website written?

subjects/ui/rules/time-pickers/README.md

@@ -1,13 +1,18 @@
-# UI III - Ex 9 - Time pickers
+## Time pickers
 
-**Instructions:** 
+### Instructions
 
-Browse the internet and find at least 5 different examples of time pickers from websites or apps. 
+Browse the internet and find at least 5 different examples of time pickers from websites or apps.
 
 **Deliverable:**
 
-- A Figma file gathering 5 screenshots of time pickers.
+- A Figma file gathering 5 screenshots of time pickers and the respective name of each app or website.
+
+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!

subjects/ui/rules/time-pickers/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 at least 5 examples of time pickers?
-###### Is the name of each app or website written?

subjects/ui/rules/toggle-buttons/README.md

@@ -1,17 +1,22 @@
-# UI III - Ex 6 - Toggle buttons
+## Toggle buttons
 
-**Instructions:** 
+### Instructions
 
-Browse the internet and find at least 5 different examples of toggle buttons from websites or apps. 
+Browse the internet and find at least 5 different examples of toggle buttons from websites or apps.
 
 **Deliverable:**
 
-- A Figma file gathering 5 screenshots of toggle buttons.
+- A Figma file gathering 5 screenshots of toggle buttons and the respective name of each app or website.
+
+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:**
 
-- [Toggle Switch - Tips](https://uxplanet.org/toggle-switch-5-simple-design-tips-for-better-design-b4046eff4a2f)
+- [Toggle Switch - Tips](https://uxplanet.org/toggle-switch-5-simple-design-tips-for-better-design-b4046eff4a2f)

subjects/ui/rules/toggle-buttons/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 at least 5 examples of toggle buttons?
-###### Is the name of each app or website written?