uxui changes names and audits in UX quest 1, UI quest 1 and projects

subjects/create-files.sh

@@ -0,0 +1 @@
+touch $1/README.md && mkdir $1/audit && touch $1/audit/README.md

subjects/program-list.md

@@ -0,0 +1,125 @@
+UX Program
+UX Quest 1 = Athele, keep hydrated!
+Ex 1 = User interview
+Ex 2 = Analytics
+Ex 3 = Personas
+Ex 4 = User Journey
+Ex 5 = Problem Statement
+Ex 6 = Ideation
+Ex 7 = Prototyping
+
+UX Quest 2 = Going on holidays with friends
+Ex 1 = Interview Guide
+Ex 2 = Run Interviews
+Ex 3 = Affinity Diagram
+Ex 4 = Problem Statement
+Ex 5 = Ideation 
+Ex 6 = User Flow
+Ex 7 = Prototyping
+
+UX Quest 3 = Let s fight harassment
+Ex 1 = Competitive Analysis
+Ex 2 = Surveys
+Ex 3 = Broadcast Strategy
+Ex 4 = Interviews
+Ex 5 = Personas
+Ex 6 = User Journey
+Ex 7 = Problem Statement
+
+UX Quest 4 = The Olympics
+Ex 1 = Ideation A
+Ex 2 = Ideation B
+Ex 3 = Ideation C 
+Ex 4 = User Flow
+Ex 5 = Prototyping
+Ex 6 = Animation 
+Ex 7 = Test
+
+UX Quest 5 = Music on 
+Ex 1 = Heuristics
+Ex 2 = Site map
+Ex 3 = JTBD
+Ex 4 = Card Sorting
+Ex 5 = Wireframes
+Ex 6 = Test protocol
+Ex 7 = Run 5 tests
+
+UX Quest 6 = Sunday night movie 
+Ex 1 = User Flow
+Ex 2 = Wireframes
+Ex 3 = WIreframes animation 
+Ex 4 = Test on Feature 1
+Ex 5 = Test on Feature 2
+Ex 6 = Test on Feature 3
+Ex 7 = Iteration
+
+UX Quest 7 = Seamstress
+Ex 1 = UX Strategy
+Ex 2 = Empathy
+Ex 3 = Define
+Ex 4 = Problem Statement
+Ex 5 = Ideation 
+Ex 6 = Prototype
+Ex 7 = Test
+
+UI Program
+UI Quest 1 = Colors and moodboard
+Ex 1 = Find the Colors
+Ex 2 = Color codes
+Ex 3 = Color combinations
+Ex 4 = Moodboard
+Ex 5 = Typography
+Ex 6 = Typography Moodboard
+Ex 7 = UI Challenge Timer
+Ex 8 = UI Challenge Watches
+Ex 9 = UI Challenge Flight
+Ex 10 = UI Challenge Spotify
+Ex 11 = UI Challenge Bitcoin Dashboard
+
+UI Quest 2 = Atomic Design
+Ex 1 = Browsing
+Ex 2 = Material Design 
+Ex 3 = Design System Library
+Ex 4 = Library for climbing addicts
+Ex 5 = Library for a dating app
+
+UI Quest 3 = Rules
+Ex 1 = Grids
+Ex 2 = Multi State
+Ex 3 = Accessibility (website)
+Ex 4 = Accessibility (app)
+Ex 5 = Breadcrumbs
+Ex 6 = Toggle Buttons
+Ex 7 = Radio Buttons
+Ex 8 = Calendars
+Ex 9 = Time Pickers
+Ex 10 = Micro Interactions
+Ex 11 = Consistency 
+
+UI Quest 4 = Building an interface 
+Ex 1 = Styleguide
+Ex 2 = Design System Library
+Ex 3 = Design Screens
+Ex 4 = Animation 
+Ex 5 = Desirability Testing
+
+UI Quest 5 = Heuristics
+Ex 1 = Audit
+Ex 2 = Recommendations
+
+
+Project 1 = Get a room!
+Part 1 = ux
+Part 2 = ui
+
+Project 2 = Let s do some sports
+Part 1 = ux
+Part 2 = ui
+
+Project 3 = Let s fair trade
+Part 1 = ux
+Part 2 = ui
+
+Project 4 = A table ! 
+Part 1 = ux
+Part 2 = ui

subjects/project-a-table/ui/README.md

@@ -1,31 +1,6 @@
 # Project 4: A table !
 
-_Reminder of the general brief - Just focus on Phase 2 ;)_
-
-Design a Food delivery app (interfaces and user journey for (1) the restaurant owners, (2) the clients, (3) the delivery men (4) the delivery men managers, on mobile and desktop.
-
-DeliverNow is a company that helps restaurants deliver take-away food, thanks to a series of runners.
-
-They recently had bad comments from customers:
-
-‘Our customers currently face problems with wrong estimated delivery times, the amount of unnecessary cutlery and condiments. 
-
-Our runners complain about the allocation of routes among them. 
-
-The managers can’t manage their drivers well since they don’t have a clear enough vision of the runners. 
-
-Finally, the restaurants complain because they have a hard time managing the preparation of the food on-site and take-away.’
-
-Thus, they ask your team to redesign the full experience: 
-
-- For customers
-- For restaurants
-- For runners
-- For runners’ managers
-
-You have to meet your client after 3 weeks to give a first presentation of your work, after completing a tested mid-fidelity prototype for each user 4 journeys. 
-
-The final presentation of your work will take place 2 weeks after the mid presentation, where you’ll show a tested high-fidelity prototype of each of the 4 journeys.
+Show a tested high-fidelity prototype of each of the 4 journeys.
 
 **Estimated time:** 5 weeks
 
@@ -33,13 +8,8 @@ The final presentation of your work will take place 2 weeks after the mid presen
 
 **Guidelines:** 
 
-- You may consider building your UX and UI strategy before jumping in. Remember to question the initial brief with user research.
-- Beware all the steps of the design process: Empathy, Define, Problem Statement, Ideation, Prototype, Test.
-- In this context, 4 users = 4 personas = 4 user journeys = 4 prototypes
-- You must interview or ask real people during the Empathy / User Research and Test phases.
-- In your prototypes, if necessary, show your audience the user journey for each persona when there is one order.
-- In both phases, you must test your prototypes with at least 5 people.
-- Make both presentations as if you were showing your work to DeliverNow team. Make sure there are at least 5 people in the audience.
+- Test your prototypes with at least 5 people.
+- Make your presentations as if you were showing your work to DeliverNow team. Make sure there are at least 5 people in the audience.
 - Prepare a feedback form to send the audience. The form must include at least the questions listed below.
 - Timing: 15 minutes for the presentation and 5 minutes for Q&A.
 - You may use the presentation audits to structure your presentations.

subjects/project-get-a-room/ui/README.md

@@ -1,18 +1,6 @@
 # Project 1 - Get a room! Phase 2
 
-_Reminder of the general brief - Just focus on Phase 2 ;)_
-
-Creation of a room booking service on desktop
-
-Barbara works at Coworking Square, which is a coworking place in Amsterdam. 
-She needs help to manage bookings. Among the 50 spots that are in the working space, 35 can be rented by month or by week, and 15 are hot spots that can be booked for one day. 
-
-For now, she manages everything with paper calendars but that’s not really efficient. 
-‘I wish my clients could book spots weekly, monthly or daily online and pay everything upfront so I don’t have to deal with billing above all’
-She calls you to design a website that could solve her problem.
-
-You have to meet her after one week to give a first presentation of your work, after completing a tested mid-fidelity prototype. 
-The final presentation of your work will take place one week after the mid presentation, where you’ll show a tested high-fidelity prototype.
+Show a tested high-fidelity prototype.
 
 **Estimated time:** 2 weeks
 
@@ -20,10 +8,7 @@ The final presentation of your work will take place one week after the mid prese
 
 **Guidelines:**
 
-- You may consider building your UX and UI strategy before jumping in. Remember to question the initial brief with user research.
-- Beware all the steps of the design process: Empathy, Define, Problem Statement, Ideation, Prototype, Test.
-- You must interview or ask real people during the Empathy / User Research and Test phases.
-- In both phases, you must test your prototypes with at least 5 people.
+- Test your prototypes with at least 5 people.
 - Make a presentation as if you were showing your work to your client. Make sure there are at least 5 people in the audience.
 - Prepare a feedback form to send the audience. The form must include at least the questions listed below.
 - In both presentations, you are presenting to Barbara and her team.

subjects/project-lets-do-some-sports/ui/README.md

@@ -1,20 +1,6 @@
 # Project 2: Let’s do some sports!
 
-_Reminder of the general brief - Just focus on Phase 2 ;)_
-
-Creation of a sports app with data tracking on mobile and e-watch (data visualization)
-
-Yara is a runner. She runs 5 times a week and she’s passionate! She’d like to challenge her own performance to make sure she is making progress. 
-
-Yara uses an Apple Watch and her iPhone. 
-
-‘I wish I could have consistent data about my trainings, more than what already exists. I can run with my watch and I’d like to analyse and share my results with my sport coach.”
-
-She asks you to design an app on a watch and on mobile that could solve her problem.
-
-You have to meet her after one week to give a first presentation of your work, after completing a tested mid-fidelity prototype. 
-
-The final presentation of your work will take place one week after the mid presentation, where you’ll show a tested high-fidelity prototype.
+Show a tested high-fidelity prototype.
 
 **Estimated time:** 2 weeks
 
@@ -22,10 +8,7 @@ The final presentation of your work will take place one week after the mid prese
 
 **Guidelines:** 
 
-- You may consider building your UX and UI strategy before jumping in. Remember to question the initial brief with user research.
-- Beware all the steps of the design process: Empathy, Define, Problem Statement, Ideation, Prototype, Test.
-- You must interview or ask real people during the Empathy / User Research and Test phases.
-- In both phases, you must test your prototypes with at least 5 people.
+- Test your prototypes with at least 5 people.
 - Make a presentation as if you were showing your work to Yara. Make sure there are at least 5 people in the audience.
 - Prepare a feedback form to send the audience. The form must include at least the questions listed below.
 - In both presentations, you are presenting to Barbara and her team.

subjects/project-lets-fair-trade/ui/README.md

@@ -1,18 +1,6 @@
 # Project 3: Let’s fair trade
 
-_Reminder of the general brief - Just focus on Phase 2 ;)_
-
-Creation of an ecommerce platform for second-hand clothes on desktop and mobile
-
-Bruno loves fashion. He loves buying clothes! As he is cautious with the environment, he prefers buying second-hand clothing. However, the existing platforms are not very user-friendly.
-
-‘I need to know more about the environmental impact of the pieces I buy. I’d like to know how old they are, where they are coming from, to measure their life and the amount of kilometres they have traveled. When a new pair of jeans arrive at the ready-to-wear store in Europe, they consumed approximately 11,000 litres of water and travelled 65,000 kilometres. I’d like to monitor that kind of data.’
-
-You gather a team of 3 to think and design a website and an app for second-hand products. 
-
-You have to meet Bruno after 2 weeks to give a first presentation of your work, after completing a tested mid-fidelity prototype. 
-
-The final presentation of your work will take place 2 weeks after the mid presentation, where you’ll show a tested high-fidelity prototype.
+Show a tested high-fidelity prototype.
 
 **Estimated time:** 4 weeks
 
@@ -20,10 +8,7 @@ The final presentation of your work will take place 2 weeks after the mid presen
 
 **Guidelines:** 
 
-- You may consider building your UX and UI strategy before jumping in. Remember to question the initial brief with user research.
-- Beware all the steps of the design process: Empathy, Define, Problem Statement, Ideation, Prototype, Test.
-- You must interview or ask real people during the Empathy / User Research and Test phases.
-- In both phases, you must test your prototypes with at least 5 people.
+- Test your prototypes with at least 5 people.
 - Make a presentation as if you were showing your work to Bruno. Make sure there are at least 5 people in the audience.
 - Prepare a feedback form to send the audience. The form must include at least the questions listed below.
 - In both presentations, you are presenting to Barbara and her team.

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

@@ -1,11 +1,5 @@
 # UI II - Ex 3 - Design system library
 
-**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. 
-
 **Instructions:** 
 
 Copy 10 elements from easyJet design system, including

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

@@ -1,11 +1,5 @@
 # UI II - Ex 5 - Library for a dating app
 
-**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. 
-
 **Instructions:** 
 
 You are asked to design a dating app. 

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

@@ -1,11 +1,5 @@
 # UI II - Ex 4 - Library for climbing addicts
 
-**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. 
-
 **Instructions:** 
 
 You are part of a climbing group and volunteer to rebrand the website of your club. 

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

@@ -1,11 +1,5 @@
 # UI II - Ex 2 - Material Design
 
-**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. 
-
 **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. 

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

@@ -0,0 +1,18 @@
+# UI IV - Ex 4 - Animation
+
+**Instructions:**
+
+Animate your 5 screens on Figma. Think about multistate!!
+
+**Deliverable:** 
+
+- An animated high-fidelity prototype
+
+**Resources:** 
+
+- [Efficiently Manage Your Designs - How Mockplus State Page Helps To View & Manage Multiple State](https://help.mockplus.com/p/372)
+
+**Quote:** 
+
+‘Speak human: Use the words your users use.’ Dan Saffer | Microinteractions
+

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

@@ -0,0 +1,24 @@
+# UI IV - Ex 3 - Design screens
+
+**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: 
+
+- 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. 
+
+**Deliverables:** 
+
+- 5 high-fidelity screens
+
+**Resources:**
+
+- [Unsplash](https://unsplash.com/) for visuals
+- [From low-fidelity to high-fidelity](https://mockitt.wondershare.com/prototyping/low-fidelity-vs-high-fidelity.html)

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

@@ -1,15 +1,5 @@
 # UI IV - Ex 2 - Design system library
 
-**Context:** 
-
-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. 
-
-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!
-
 **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.

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

@@ -1,15 +1,5 @@
 # UI IV - Ex 5 - Desirability testing
 
-**Context:** 
-
-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. 
-
-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!
-
 **Instructions:** 
 
 Run a desirability test! 

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

@@ -1,9 +1,5 @@
 # UI I - Ex 2 - Color codes
 
-**Context:** 
-
-This first UI quest is a series of exercises to practice colors, moodboards, typography and replicate screens on Figma!
-
 **Instructions:** 
 
 Go to these 7 websites and make the color palettes out of them (3 to 4 main colors). 
@@ -14,7 +10,7 @@ Go to these 7 websites and make the color palettes out of them (3 to 4 main colo
 
 **Tips:** 
 
-- You can use the document from the previous exercise to add the color codes on Figma
+- 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!
 
 **Resources:** 

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

@@ -0,0 +1,4 @@
+#### Audit 
+
+###### Is there a PDF document?
+###### 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,55 +1,73 @@
-#### Audit instructions
+# UI I - Ex 3 - Color combinations
 
+**Instructions:** 
 
-[Exercise example](https://www.figma.com/file/IXsXrJz9FPKPp8PKQxNhxT/UI---Ex-3?node-id=0%3A1)
+Let's browse! 
 
-Here are examples of combinations on websites. 
+Find 3 digital products (websites or apps) that use each kind of color palette combination: 
 
-Make sure :
+- Monochromatic
+- Analogous
+- Complementary
+- Split complementary
+- Triadic
+- Double complementary
 
-###### The websites or apps chosen by the students match with a correct color wheel combinations
-###### There are 3 websites or apps per color palette combination.
+**Deliverable:** 
 
-##### Monochromatic examples: 
+- A PDF document extracted from a Figma file including for each
+    - screenshots of the main page
+    - the matching URL
+    - the main colors and
+    - the kind of color combination.
+
+**Tips:** 
+
+- You can find HSB (Hue, Saturation, Brightness) as well as HSV (Hue, Saturation, Value) depending of the source.
+
+**Resources:** 
+
+- [https://coloursandmaterials.wordpress.com/2014/09/16/colour-system/](https://coloursandmaterials.wordpress.com/2014/09/16/colour-system/)
+- ![Color wheel combinations](Resource.png)
+
+
+**Monochromatic examples:** 
 
 - [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 examples: 
+**Analogous examples:**
 
 - [https://www.natuurenmilieu.nl/](https://www.natuurenmilieu.nl/) 
 - [https://campesinorum.com/](https://campesinorum.com/) 
 - [https://www.lobster.es/](https://www.lobster.es/)
 
 
-##### Complementary examples: 
+**Complementary examples:**
 
 - [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 examples: 
+**Split complementary examples:**
 
 - [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 examples
+**Triadic examples**
 
 - [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 examples
+**Dual complementary or Tetradic examples**
 
 - [https://www.airtable.com/](https://www.airtable.com/) 
 - [https://calendar.google.com/](https://calendar.google.com/) 
 - [https://www.ebay.com/](https://www.ebay.com/)
-
-
-![Resource](Resource.png)

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

@@ -0,0 +1,9 @@
+#### Audit
+
+
+###### Do the websites or apps chosen by the students 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

@@ -10,12 +10,14 @@ Go to these 7 websites and make the color palettes out of them (3 to 4 main colo
 
 **Deliverable:** 
 
-- A PDF document extracted from a Figma file including screenshots of the main page, URL and extracted colors.
+- A PDF document extracted from a Figma file including screenshots of the main page, URL and extracted colors next to the screenshots.
 
 **Tips:** 
 
 - You can use Figma to extract the colors you need and export your file to PDF.
 - Use the Color Pipette to extract the colors!
+- You can show the main colors with filled squares or circles next to the screenshots. 
+- Mind the aesthetics of your delivrable! 1 page per site should be good.
 
 - [https://www.komoot.com/](https://www.komoot.com/) (App)
 - [https://www.airtable.com/](https://www.airtable.com/)

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

@@ -0,0 +1,6 @@
+#### Audit
+
+###### Is there a PDF document?
+###### 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,9 +1,5 @@
 # UI I - Ex 4 - Moodboard
 
-**Context:** 
-
-This first UI quest is a series of exercises to practice colors, moodboards, typography and replicate screens on Figma!
-
 **Instructions:** 
 
 Create 4 different moodboards based on these 4 briefs and extract a color palette.
@@ -25,3 +21,7 @@ Create 4 different moodboards based on these 4 briefs and extract a color palett
 **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)

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

@@ -0,0 +1,20 @@
+#### Audit
+
+###### Are there 4 PDF extracted moodboards?
+###### 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,9 +1,5 @@
 # UI I - Ex 6 - Typography Moodboard
 
-**Context:** 
-
-This first UI quest is a series of exercises to practice colors, moodboards, typography and replicate screens on Figma!
-
 **Instructions:** 
 
 Find consistent typography for your moodboards from Ex. 4. 
@@ -28,7 +24,9 @@ Find consistent typography for your moodboards from Ex. 4.
 
 **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:** 
 

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

@@ -0,0 +1,23 @@
+#### Audit 
+
+###### Is there a PDF document?
+###### 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,9 +1,5 @@
 # UI I - Ex 5 - Typography
 
-**Context:** 
-
-This first UI quest is a series of exercises to practice colors, moodboards, typography and replicate screens on Figma!
-
 **Instructions:** 
 
 Go to these websites and detect the typographies used. 

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

@@ -0,0 +1,13 @@
+#### Audit
+
+###### Is there a PDF document?
+###### 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,9 +1,5 @@
 # UI I - Ex 11 - UI Challenge - Bitcoin Dashboard
 
-**Context:** 
-
-This first UI quest is a series of exercises to practice colors, moodboards, typography and replicate screens on Figma!
-
 **Instructions:** 
 
 Copy this image on Figma

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

@@ -0,0 +1,13 @@
+#### Audit 
+
+###### Is there a Figma file?
+###### 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?

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

@@ -1,9 +1,5 @@
 # UI I - Ex 9 - UI Challenge - Flight
 
-**Context:** 
-
-This first UI quest is a series of exercises to practice colors, moodboards, typography and replicate screens on Figma!
-
 **Instructions**: 
 
 Copy this image on Figma

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

@@ -0,0 +1,25 @@
+#### Audit
+
+###### Is there a Figma file?
+###### 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,9 +1,5 @@
 # UI I - Ex 10 - UI Challenge - Spotify
 
-**Context:** 
-
-This first UI quest is a series of exercises to practice colors, moodboards, typography and replicate screens on Figma!
-
 **Instructions:** 
 
 Copy this image on Figma

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

@@ -0,0 +1,16 @@
+#### Audit
+
+###### Is there a Figma file ? 
+###### 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,9 +1,5 @@
 # UI I - Ex 7 - UI Challenge - Timer
 
-**Context:** 
-
-This first UI quest is a series of exercises to practice colors, moodboards, typography and replicate screens on Figma!
-
 **Instructions:** 
 
 Copy this image on Figma. 
@@ -15,6 +11,7 @@ Copy this image on Figma.
 - 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
 

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

@@ -0,0 +1,13 @@
+#### Audit
+
+###### Is there a Figma File?
+###### 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,9 +1,5 @@
 # UI I - Ex 8 - UI Challenge - Watches
 
-**Context:** 
-
-This first UI quest is a series of exercises to practice colors, moodboards, typography and replicate screens on Figma!
-
 **Instructions:** 
 
 Copy these images on Figma

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

@@ -0,0 +1,12 @@
+#### Audit 
+
+###### Is there a Figma file?
+###### 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/recommendations/README.md

@@ -1,13 +1,5 @@
 # UI V - Ex 2 - Recommendations
 
-**Context:** 
-
-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. 
-
-Let’s be critical, creative and impactful!
-
 **Instructions:** 
 
 Based on the audit you made in Ex.1, write a set of 3 to 6 recommendations to improve heuristics and usability.

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

@@ -1,14 +1,5 @@
 # UI III - Ex 4 - Accessibility (App)
 
-**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: 
-
-- Enrich your graphic general knowledge
-- Detect consistency, that helps users understand a digital product at the first glance.
-
 **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.

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

@@ -1,14 +1,5 @@
 # UI III - Ex 3 - Accessibility (website)
 
-**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: 
-
-- Enrich your graphic general knowledge
-- Detect consistency, that helps users understand a digital product at the first glance.
-
 **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.

subjects/ui/rules/breadcrumbs/README.md

@@ -0,0 +1,13 @@
+# UI III - Ex 5 - Breadbcrumbs
+
+**Instructions:** 
+
+Browse the internet and find at least 5 different examples of breadcrumbs from websites or apps. 
+
+**Deliverable:**
+
+- A PDF document extracted from a Figma file gathering 5 screenshots of breadcrumbs.
+
+**Resources:**
+
+- [What are breadcrumbs?](https://www.seoptimer.com/blog/breadcrumbs-website/)

subjects/ui/rules/calendars/README.md

@@ -0,0 +1,9 @@
+# UI III - Ex 8 - Calendars
+
+**Instructions:** 
+
+Browse the internet and find at least 5 different examples of calendars from websites or apps. 
+
+**Deliverable:**
+
+- A PDF document extracted from a Figma file gathering 5 screenshots of calendars.

subjects/ui/rules/consistency/README.md

@@ -1,14 +1,5 @@
 # UI III - Ex 11 - Consistency
 
-**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: 
-
-- Enrich your graphic general knowledge
-- Detect consistency, that helps users understand a digital product at the first glance.
-
 **Instructions:** 
 
 Pick a website or an app of your choice*. Highlight 5 signs of consistency across the pages.

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

@@ -1,14 +1,5 @@
 # UI III - Ex 10 - Micro-interactions
 
-**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: 
-
-- Enrich your graphic general knowledge
-- Detect consistency, that helps users understand a digital product at the first glance.
-
 **Instructions:** 
 
 Browse the internet and find at least 5 different examples of feedback micro-interactions or micro-animations on websites or apps. 

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

@@ -1,14 +1,5 @@
 # UI III - Ex 2 - Multi state
 
-**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: 
-
-- Enrich your graphic general knowledge
-- Detect consistency, that helps users understand a digital product at the first glance.
-
 **Instructions**: 
 
 Go to [Nintendo.com](http://Nintendo.com) and observe the buttons and call to actions. When you hover or click on them, they change!