ui first version

subjects/ui-1-1/README.md

@@ -0,0 +1,32 @@
+# UI I - Ex 1 CK - Find the colors
+
+**Context:** 
+
+This first UI quest is a series of exercises to practice colors, moodboards, typography and replicate screens on Figma!
+
+**Instructions:** 
+
+Go to these 7 websites and make the color palettes out of them (3 to 4 main colors). 
+
+**Deliverable:** 
+
+- A PDF document extracted from a Figma file including screenshots of the main page, URL and extracted colors.
+
+**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!
+
+- [https://www.komoot.com/](https://www.komoot.com/) (App)
+- [https://www.airtable.com/](https://www.airtable.com/)
+- [https://www.decathlon.com/collections/kids-gift-ideas](https://www.decathlon.com/collections/kids-gift-ideas)
+- [https://www.jrpass.com/](https://www.jrpass.com/)
+- [https://www.thesiff.com/](https://www.thesiff.com/)
+- [https://brave.com/es/](https://brave.com/es/)
+- [https://www.nhp.gov.in/](https://www.nhp.gov.in/)
+
+**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)

subjects/ui-1-1/audit/README.md

@@ -0,0 +1,7 @@
+Make sure:
+
+- There are screenshots of the 7 pages or screens
+- The colors match with the ones from the screens
+
+[Exercise completed](https://www.figma.com/file/bQsRIJoJYK5b8WAxXFeOfv/UI-I---Ex-1?node-id=0%3A1)
+

subjects/ui-1-10/README.md

@@ -0,0 +1,26 @@
+# UI I - Ex 10 CK - 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
+![Spotify](Spotify.jpg)
+
+**Deliverable:** 
+
+- 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)
+
+**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)

subjects/ui-1-10/audit/README.md

@@ -0,0 +1,12 @@
+[Example here](https://www.figma.com/file/kzc8YNUZsPrcTNrdMt6aLX/UI-Challenge-I---UI-I-Ex-8)
+
+Make sure
+
+- The screen designed matches the image
+- There are 2 pages: one for the screen and one with the symbols
+    
+    ![Example](SpotifyCK2.png)
+    
+- The background is made with linear color function
+    
+    ![Example](SpotifyCK1.png)

subjects/ui-1-11/README.md

@@ -0,0 +1,27 @@
+# UI I - Ex 11 CK - 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
+![Dashboard](Dashboard.png)
+
+**Deliverable:** 
+
+- 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
+
+**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

subjects/ui-1-11/audit/README.md

@@ -0,0 +1,13 @@
+[Example here](https://www.figma.com/file/7hv3wv2rUPRY0Sc3Dd7lZh/UI-I-Challenge---UI-Ex-11)
+
+Make sure: 
+
+- The screen designed matches the image
+- All layers have a name and belong to a group of graphic elements
+    
+    
+    ![Example](DashboardCK1.png)
+    
+- There are 2 pages: one for the screen and one with the symbol
+- The overlay is done with transparency
+- The mask was used to change the shape of the image

subjects/ui-1-2/README.md

@@ -0,0 +1,31 @@
+# UI I - Ex 2 CK - 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). 
+
+**Deliverable:** 
+
+- A PDF documents extracted from a Figma file including screenshots of the main page, URL, extracted colors and the matching color codes.
+
+**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!
+
+**Resources:** 
+
+- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/)
+- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)
+
+- [https://www.komoot.com/](https://www.komoot.com/) (App)
+- [https://www.airtable.com/](https://www.airtable.com/)
+- [https://www.decathlon.com/collections/kids-gift-ideas](https://www.decathlon.com/collections/kids-gift-ideas)
+- [https://www.jrpass.com/](https://www.jrpass.com/)
+- [https://www.thesiff.com/](https://www.thesiff.com/)
+- [https://brave.com/es/](https://brave.com/es/)
+- [https://www.nhp.gov.in/](https://www.nhp.gov.in/)

subjects/ui-1-2/audit/README.md

@@ -0,0 +1,7 @@
+Make sure
+
+- There are screenshots of the 7 pages or screens
+- The colors match with the ones from the screens
+- There are color codes
+
+[Exercise completed](https://www.figma.com/file/9YVlgVGYdg4fTyWUsDLi7c/UI-I---Ex-2?node-id=3%3A8)

subjects/ui-1-3/README.md

@@ -0,0 +1,34 @@
+# UI I - Ex 3 CK - Color combinations
+
+**Context:** 
+
+This first UI quest is a series of exercises to practice colors, moodboards, typography and replicate screens on Figma!
+
+**Instructions:** 
+
+Let's browse! 
+
+Find 3 digital products (websites or apps) that use each kind of color palette combination: 
+
+- Monochromatic
+- Analogous
+- Complementary
+- Split complementary
+- Triadic
+- Double complementary
+
+**Deliverable:** 
+
+- 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 combinaison.
+
+**Tips:** 
+
+- You can find HSB (Hue, Saturation, Brightness) as well as HSV (Hue, Saturation, Value) depending of the source.
+
+**Resource:** 
+
+- [https://coloursandmaterials.wordpress.com/2014/09/16/colour-system/](https://coloursandmaterials.wordpress.com/2014/09/16/colour-system/)

subjects/ui-1-3/audit/README.md

@@ -0,0 +1,37 @@
+[Exercise example](https://www.figma.com/file/IXsXrJz9FPKPp8PKQxNhxT/UI---Ex-3?node-id=0%3A1)
+
+Here are examples of combinations on websites. Please make sure :
+
+- 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
+- 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:
+    - [https://www.natuurenmilieu.nl/](https://www.natuurenmilieu.nl/)
+    - [https://campesinorum.com/](https://campesinorum.com/)
+    - [https://www.lobster.es/](https://www.lobster.es/)
+    
+- 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:
+    - [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
+    - [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
+    - [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-1-4/README.md

@@ -0,0 +1,27 @@
+# UI I - Ex 4 CK - 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.
+
+**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:** 
+
+- 1 PDF document extracted from 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)
+
+**Tips:** 
+
+- [Use freely-usable images!](https://buffer.com/library/free-images/)

subjects/ui-1-4/audit/README.md

@@ -0,0 +1,12 @@
+To have a good moodboard, you need: 
+
+- Several pictures that are graphically consistent
+- 2 to 3 main colors that stand out
+- The colors must have at least one code (RGB, Hex, or HSB)
+- Please check the code to make sure it matches with the designated color [thanks to this tool](http://onlinewebtool.com/colorpicker.php)
+- The document should be a PDF
+
+- 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-1-5/README.md

@@ -0,0 +1,38 @@
+# UI I - Ex 5 CK - 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. 
+
+- [https://unric.org/no](https://unric.org/no)
+- [https://www.strongbowcider.com/bug-exterminator-brisbane](https://www.strongbowcider.com/bug-exterminator-brisbane)
+- [http://www.bbqgrillsandfire.com/](http://www.bbqgrillsandfire.com/)
+- [https://pt.wikipedia.org/wiki/Mario_Botta](https://pt.wikipedia.org/wiki/Mario_Botta)
+- [https://texas-private-investigator.com/](https://texas-private-investigator.com/)
+- [https://bumble.com/](https://bumble.com/)
+- [https://adopte1poule.fr/](https://adopte1poule.fr/)
+- [http://slaveryfootprint.org/](http://slaveryfootprint.org/)
+- [https://www.tomorrowland.com/fr/festival/bienvenue](https://www.tomorrowland.com/fr/festival/bienvenue)
+- [https://artisanscanada.com/](https://artisanscanada.com/)
+
+**Deliverables:** 
+
+- A PDF document extracted from a Figma file showing all the typographies used in each website or app.
+
+**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
+
+**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)

subjects/ui-1-5/audit/README.md

@@ -0,0 +1,50 @@
+
+- [https://unric.org/no](https://unric.org/no)
+    - Roboto Condensed
+    - Roboto
+    - Verdana
+    - Open Sans
+    
+- [https://www.strongbowcider.com/bug-exterminator-brisbane](https://www.strongbowcider.com/bug-exterminator-brisbane)
+    - Helvetica Neue
+    - Helvetica Neue - Condensed Bold
+    
+- [http://www.bbqgrillsandfire.com/](http://www.bbqgrillsandfire.com/)
+    - Francois One
+    - Special Elite
+    - Lucida Grande
+    
+- [https://pt.wikipedia.org/wiki/Mario_Botta](https://pt.wikipedia.org/wiki/Mario_Botta)
+    - Arial
+    - Georgia
+    - Monospace
+        
+        
+- [https://texas-private-investigator.com/](https://texas-private-investigator.com/)
+    - Open Sans
+    - Poppins
+    - Lora
+    - sans-serif
+    - Cinzel
+    - Roboto
+    - Playfair Display
+    - Lucida Grande
+
+- [https://bumble.com/](https://bumble.com/)
+    - Circular 20
+    
+- [https://adopte1poule.fr/](https://adopte1poule.fr/)
+    - Open Sans
+    - Roboto
+    - Font Awesome 5 Free
+    
+- [http://slaveryfootprint.org/](http://slaveryfootprint.org/)
+    - Arial
+    - Georgia
+    - Helvetica
+    
+- [https://www.tomorrowland.com/fr/festival/bienvenue](https://www.tomorrowland.com/fr/festival/bienvenue)
+    - Europa
+    
+- [https://artisanscanada.com/](https://artisanscanada.com/)
+    - Avenir Next

subjects/ui-1-6/README.md

@@ -0,0 +1,39 @@
+# UI I - Ex 6 CK - 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. 
+
+**Deliverables:** 
+
+- A PDF document extracted from 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
+
+**Resources:** 
+
+- [Font](https://en.wikipedia.org/wiki/Font)
+- [Glyph](https://en.wikipedia.org/wiki/Glyph)
+- Instagram account: [You are typography](https://www.instagram.com/youaretypography/)
+- Instagram account: [Typespire](https://www.instagram.com/typespire/)
+- 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:** 
+
+- [Google Fonts](https://fonts.google.com/) is another great friend to have by your side
+
+**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)

subjects/ui-1-6/audit/README.md

@@ -0,0 +1,13 @@
+[Example here](https://www.figma.com/file/SbQMPjfLOzg92g8YZFlrRh/UI-I---Ex-5)
+
+Make sure: 
+
+- There are 4 different fonts
+- There is a caption next to the font to describe what is it
+- Max 2 different colors have been used
+- There are max 2 different typographies (Bold, italic, normal, light, etc. are fonts, not typography)
+- Each moodboard should have typography:
+    - 1 for a title
+    - 1 for a button
+    - 1 for a description
+    - 1 for the text

subjects/ui-1-7/README.md

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

subjects/ui-1-7/audit/README.md

@@ -0,0 +1,11 @@
+[Example here](https://www.figma.com/file/LRgyZDBVgIq3PzjewTKI2c/UI-Challenge-I---UI-I-Ex-7)
+
+Open the Figma file and inspect it. Make sure: 
+
+- There are two half circles as this one.
+    
+    ![Example](Timer2.png)
+    
+- All the layers are labeled and organized in groups
+    
+    ![Example](Timer1.png)

subjects/ui-1-8/README.md

@@ -0,0 +1,31 @@
+# UI I - Ex 8 CK - 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
+
+![Screen1](Watch1.png)
+![Screen2](Watch2.png)
+![Screen3](Watch3.png)
+![Screen4](Watch4.png)
+
+
+**Deliverable:** 
+
+- 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
+
+**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

subjects/ui-1-8/audit/README.md

@@ -0,0 +1,13 @@
+ [Example here](https://www.figma.com/file/qBYmuatLnhRrWMGlf5vMau/UI-I-Challenge---UI-Ex-10)
+
+Make sure: 
+
+- The screen designed matches the image
+- All layers have a name and belong to a group of graphic elements
+    
+    
+    ![Example](WatchCK.png)
+    
+- There are 2 pages: one for the screen and one with the symbol
+- The overlay is done with transparency
+- The mask was used to change the shape of the image

subjects/ui-1-9/README.md

@@ -0,0 +1,26 @@
+# UI I - Ex 9 CK - 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
+
+![Flight](Flight.png)
+
+**Deliverable:** 
+
+- 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)
+
+**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)

subjects/ui-1-9/audit/README.md

@@ -0,0 +1,26 @@
+[Example here](https://www.figma.com/file/D6HC3Su97UQPfGIOmG0Yll/UI-Challenge-I---UI-Ex-9)
+
+Make sure: 
+
+- The screen designed matches the image
+- All layers have a name and belong to a group of graphic elements
+    
+    ![Example](FlightCK5.png)
+    
+
+- There are 2 pages: one for the screen and one with the symbols
+    
+    
+    ![Example](FlightCK2.png)
+    
+
+- Masks were used to change the shape of the image
+    
+    ![Example](FlightCK1.png)
+    
+
+- The overlay is done with transparency
+    
+    ![Example](FlightCK3.png)
+    
+    ![Example](FlightCK4.png)

subjects/ui-2-1/README.md

@@ -0,0 +1,39 @@
+# UI II - Ex 1 CK - Browsing
+
+**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:** 
+
+Among these 4 websites, make snapshots of these elements:
+
+- 1 template
+- 1 organism
+- 1 molecule
+- 1 atom
+
+**Websites:** 
+
+- Alibaba
+- Booking.com
+- Easyjet App
+- Interrail
+
+**Deliverables:** 
+
+- A PDF document extracted from a Figma file of 4 pages
+- On each page, a screenshot of a template, an organism, a molecule and an atom
+
+**Resources:** 
+
+- [Atomic Design Methodology](https://atomicdesign.bradfrost.com/chapter-2/)
+- [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)
+
+**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

subjects/ui-2-1/audit/README.md

@@ -0,0 +1,6 @@
+Make sure
+
+- The document is a PDF
+- There are 4 pages
+- On each page, there is a template, an organism, a molecule and an atom
+- [Example here](https://www.figma.com/file/fzqDkk8Zc8qJCiSMbKV0Ei/UI-II---Ex-1?node-id=0%3A1)

subjects/ui-2-2/README.md

@@ -0,0 +1,21 @@
+# UI II - Ex 2 CK - 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. 
+
+**Deliverables:** 
+
+- A PDF document extracted from 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.
+
+**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-2-2/audit/README.md

@@ -0,0 +1,6 @@
+Make sure 
+
+- There is a PDF document
+- The layers are indicated with numbers
+- 2 numbers can be switched as long as the layering of layers is respected
+- [Example here](https://www.figma.com/file/YnrbPhItwgUy56I6Yne14S/UI-II---Ex-2?node-id=2%3A3)

subjects/ui-2-3/README.md

@@ -0,0 +1,24 @@
+# UI II - Ex 3 CK - 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
+
+- atoms
+- molecules
+- organisms
+
+**Deliverable:**
+
+- A PDF document extracted from a Figma file including 10 elements from easyJet design system
+
+**Tips:** 
+
+- You can use Avenir Book instead of easyJet’s font
+- Explore Noun Project to get icons

subjects/ui-2-3/audit/README.md

@@ -0,0 +1,6 @@
+Make sure
+
+- There is a PDF document
+- There are at least 10 elements from easyJet
+- There is at least one atom, one molecule, one organism : [Atomic Design Methodology](https://atomicdesign.bradfrost.com/chapter-2/)
+- [Example here](https://www.figma.com/file/37jw27RusbejfJwlhC8OYK/UI-II---Ex-4?node-id=0%3A1)

subjects/ui-2-4/README.md

@@ -0,0 +1,38 @@
+# UI II - Ex 4 CK - 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. 
+
+Based on a moodboard, create a design system with at least 20 elements, including atoms, molecules and organisms, and include multistates.
+
+**Deliverables:** 
+
+- A PDF document extracted from a Figma file with a moodboard for a climbing group. Include:
+    - Pictures
+    - Colors (2 to 3 main colors)
+    - Typography
+- A PDF document extracted from 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
+
+**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!
+
+**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)
+- [Building a design system library - Lyft](https://medium.com/tap-to-dismiss/building-a-design-system-library-532ef2492811)
+- [Examples of UI Buttons library](https://www.pinterest.co.kr/pin/663014376380850291/)

subjects/ui-2-4/audit/README.md

@@ -0,0 +1,12 @@
+Make sure there is: 
+
+- A moodboard for a climbing group with:
+    - Pictures
+    - Colors (2 to 3 main colors)
+    - Typography
+- 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

subjects/ui-2-5/README.md

@@ -0,0 +1,38 @@
+# UI II - Ex 5 CK - 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. 
+
+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 PDF document extracted from a Figma file with a moodboard for a dating app. Include:
+    - Pictures
+    - Colors (2 to 3 main colors)
+    - Typography
+- A PDF document extracted from 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
+
+**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!
+
+**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)
+- [Building a design system library - Lyft](https://medium.com/tap-to-dismiss/building-a-design-system-library-532ef2492811)
+- [Examples of UI Buttons library](https://www.pinterest.co.kr/pin/663014376380850291/)

subjects/ui-2-5/audit/README.md

@@ -0,0 +1,12 @@
+Make sure there is: 
+
+- A moodboard for a dating app with:
+    - Pictures
+    - Colors (2 to 3 main colors)
+    - Typography
+- 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

subjects/ui-3-1/README.md

@@ -0,0 +1,28 @@
+# UI III - Ex 1 CK - Grids
+
+**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:** 
+
+Open these 5 images on Figma and draw lines and grids every time you find aligned elements. 
+
+—> File on computer
+
+**Deliverables:** 
+
+- A PDF document extracted from a Figma file
+- The file should include the screens with lines on top to show grids. One PDF page per screen or frame.
+
+**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)
+

subjects/ui-3-1/audit/README.md

@@ -0,0 +1,10 @@
+Make sure: 
+
+- There is one PDF or one page per image
+- There are colored lines on top of the images
+- The lines highlight aligned elements.
+- [1st screen example](https://www.figma.com/file/KOzd8yZuJvGLmZLuXjBgDg/UI-III-Ex-1.1)
+- [2nd screen example](https://www.figma.com/file/QXzdFwwUa8EoQgD3k8CqUC/UI-III-EX-1.2)
+- [3rd screen example](https://www.figma.com/file/9KNmLun5iZ2lbTOaX91fr2/UI-III-Ex-1.3)
+- [4th screen example](https://www.figma.com/file/EqGJPRCBtS0yJBUwHJdmwU/UI-III-Ex-1.4)
+- [5th screen example](https://www.figma.com/file/X5lYr8zLmMAazTHeYtfWMm/UI-III-Ex-1.5)

subjects/ui-3-10/README.md

@@ -0,0 +1,25 @@
+# UI III - Ex 10 CK - 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. 
+
+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 PDF document extracted from a Figma file gathering 5 examples of **feedback** micro-interactions or animations. In each example, show the different versions of the element.
+
+**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)

subjects/ui-3-10/audit/README.md

@@ -0,0 +1,14 @@
+Make sure: 
+
+- There is a PDF document with a proper title
+- There are at least 5 examples of micro-interactions or animations
+- The name of each app or website is written
+
+Micro-interactions/micro-animations examples: [https://blog.geekyants.com/micro-interactions-and-micro-animations-4eb2ed5cc7f3](https://blog.geekyants.com/micro-interactions-and-micro-animations-4eb2ed5cc7f3)
+
+Tip: Feedback is the situation when the app specifically sends a piece of information to the user, like: 
+
+- Payment accepted
+- Refreshed feed
+- Information saved
+- etc.

subjects/ui-3-11/README.md

@@ -0,0 +1,27 @@
+# UI III - Ex 11 CK - 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.
+
+*Airbnb, Google, Apple, Amazon, Facebook, Instagram and WhatsApp are not accepted.
+
+**Deliverable:**
+
+- A PDF document extracted from a Figma file gathering at least 5 signs of consistency.
+
+**Resources:**
+
+- [7 tips for designing consistency](https://designshack.net/articles/graphics/7-tips-for-designing-consistency/)
+- [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/)

subjects/ui-3-11/audit/README.md

@@ -0,0 +1,15 @@
+Make sure: 
+
+- There is a PDF document with a proper title
+- There are at least 5 signs of consistency
+- The name of each app or website is written
+
+Examples of signs of consistency: 
+
+- colors
+- same shaped buttons
+- alignment
+- consistent product pages (with identical frameworks)
+- etc.
+
+[Consistency and Standards - Examples of Nielsens's Design Heuristics](https://medium.com/@gregoralbrecht/consistency-and-standards-nielsens-design-heuristic-explained-ac91f450fd8)

subjects/ui-3-2/README.md

@@ -0,0 +1,28 @@
+# UI III - Ex 2 CK - 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! 
+
+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.  
+
+**Deliverables:** 
+
+- A PDF document extracted from a Figma file with 5 combinations of multi state elements
+
+**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)

subjects/ui-3-2/audit/README.md

@@ -0,0 +1,8 @@
+Make sure:
+
+- There are at least five combinations of buttons, menus or call to actions.
+- The multi state buttons are gathered in groups
+- The document is clean and the elements are aligned
+- [Example here](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-3-3/README.md

@@ -0,0 +1,27 @@
+# UI III - Ex 3 CK - 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.
+
+**Deliverables:** 
+
+- A 3-page PDF document extracted from a 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.
+
+**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/)
+- [Accessibility testing — W3C Wik](https://www.w3.org/wiki/Accessibility_testing)i
+- [UX Myth: Accessibility is expensive and difficult](https://uxmyths.com/post/654091803/myth-5-accessibility-is-expensive-and-difficult)
+- [Salesforce UX - 7 tips every designer needs to know about accessibility](https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b)
+- [Why prioritze web accessibility](https://blog.hubspot.com/service/why-prioritize-web-accessibility)

subjects/ui-3-3/audit/README.md

@@ -0,0 +1,15 @@
+Please make sure
+
+- There is a PDF document
+- At least 3 different measures have been shown, like :
+    - 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.
+
+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-3-4/README.md

@@ -0,0 +1,26 @@
+# UI III - Ex 4 CK - 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.
+
+**Deliverables:** 
+
+- A 3-page PDF document extracted from a 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.
+
+**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/)
+- [Accessibility testing — W3C Wik](https://www.w3.org/wiki/Accessibility_testing)i
+- [UX Myth: Accessibility is expensive and difficult](https://uxmyths.com/post/654091803/myth-5-accessibility-is-expensive-and-difficult)
+- [Salesforce UX - 7 tips every designer needs to know about accessibility](https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b)

subjects/ui-3-4/audit/README.md

@@ -0,0 +1,15 @@
+Please make sure
+
+- There is a PDF document
+- At least 3 different measures have been shown, like :
+    - 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.
+
+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-3-5/README.md

@@ -0,0 +1,22 @@
+# UI III - Ex 5 CK - Breadbcrumbs
+
+**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 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-3-5/audit/README.md

@@ -0,0 +1,7 @@
+Make sure: 
+
+- There is a PDF document with a proper title
+- There are at least 5 different examples of breadcrumbs
+- The name of each app or website is written
+
+Breadcrumb examples: [https://www.justinmind.com/blog/breadcrumb-examples/](https://www.justinmind.com/blog/breadcrumb-examples/)

subjects/ui-3-6/README.md

@@ -0,0 +1,22 @@
+# UI III - Ex 6 CK - Toggle buttons
+
+**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 toggle buttons from websites or apps. 
+
+**Deliverable:**
+
+- A PDF document extracted from a Figma file gathering 5 screenshots of toggle buttons.
+
+**Resources:**
+
+- [Toggle Switch - Tips](https://uxplanet.org/toggle-switch-5-simple-design-tips-for-better-design-b4046eff4a2f)

subjects/ui-3-6/audit/README.md

@@ -0,0 +1,7 @@
+Make sure: 
+
+- There is a PDF document with a proper title
+- There are at least 5 examples of toggle buttons
+- The name of each app or website is written
+
+Toggle switch buttons examples: [https://bashooka.com/coding/creative-fun-toggle-switch-button-examples/](https://bashooka.com/coding/creative-fun-toggle-switch-button-examples/)

subjects/ui-3-7/README.md

@@ -0,0 +1,22 @@
+# UI III - Ex 7 CK - Radio Buttons
+
+**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 radio buttons from websites or apps. 
+
+**Deliverable:**
+
+- A PDF document extracted from a Figma file gathering 5 screenshots of radio buttons.
+
+**Resources:**
+
+- [What is a radio button?](https://www.justinmind.com/blog/radio-button-design-examples/)

subjects/ui-3-7/audit/README.md

@@ -0,0 +1,7 @@
+Make sure: 
+
+- There is a PDF document with a proper title
+- There are at least 5 examples of radio buttons
+- The name of each app or website is written
+
+Radio buttons examples: [https://gscode.in/radio-button-css/](https://gscode.in/radio-button-css/)

subjects/ui-3-8/README.md

@@ -0,0 +1,18 @@
+# UI III - Ex 8 CK - Calendars
+
+**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 calendars from websites or apps. 
+
+**Deliverable:**
+
+- A PDF document extracted from a Figma file gathering 5 screenshots of calendars.

subjects/ui-3-8/audit/README.md

@@ -0,0 +1,7 @@
+Make sure: 
+
+- There is a PDF document with a proper title
+- There are at least 5 examples of calendars
+- The name of each app or website is written
+
+Calendar examples: [https://uicookies.com/html-calendar/](https://uicookies.com/html-calendar/)

subjects/ui-3-9/README.md

@@ -0,0 +1,18 @@
+# UI III - Ex 9 CK - Time pickers
+
+**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 time pickers from websites or apps. 
+
+**Deliverable:**
+
+- A PDF document extracted from a Figma file gathering 5 screenshots of time pickers.

subjects/ui-3-9/audit/README.md

@@ -0,0 +1,7 @@
+Make sure: 
+
+- There is a PDF document with a proper title
+- There are at least 5 examples of time pickers
+- The name of each app or website is written
+
+Time picker examples: [https://uigarage.net/category/time-picker/](https://uigarage.net/category/time-picker/)

subjects/ui-4-1/README.md

@@ -0,0 +1,38 @@
+# UI IV - Ex 1 CK - Styleguide
+
+**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:** 
+
+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! 
+
+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.
+
+**Deliverables:** 
+
+- A PDF moodboard that includes:
+    - Pictures
+    - 2 to 3 main colors
+    - Examples of typography applied to graphic elements
+        - Title
+        - Description or subtitle
+        - Content
+        - Button
+        
+
+**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 of a Style Guide in UI](https://www.pinterest.pt/pin/454019206175050454/)

subjects/ui-4-1/audit/README.md

@@ -0,0 +1,13 @@
+Make sure there is: 
+
+- A PDF document
+- Inside it, a moodboard that includes
+    - Pictures
+    - 2 to 3 main colors
+    - Examples of typography applied to graphic elements
+        - Title
+        - Description or subtitle
+        - Content
+        - Button
+    
+- [Example of a Style Guide in UI](https://www.pinterest.pt/pin/454019206175050454/)

subjects/ui-4-2/README.md

@@ -0,0 +1,37 @@
+# UI IV - Ex 2 CK - 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.
+
+**Deliverables:** 
+
+- A PDF document extracted from 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
+
+**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!
+
+**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)
+- [Create a design system - Figma course](https://www.youtube.com/watch?v=RYDiDpW2VkM)
+- [Building a design system library - Lyft](https://medium.com/tap-to-dismiss/building-a-design-system-library-532ef2492811)
+- [Examples of UI Buttons library](https://www.pinterest.co.kr/pin/663014376380850291/)

subjects/ui-4-2/audit/README.md

@@ -0,0 +1,8 @@
+Make sure there is: 
+
+- 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 elements

subjects/ui-4-3/README.md

@@ -0,0 +1,34 @@
+# UI IV - Ex 3 CK - Design screens
+
+**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 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-4-3/audit/README.md

@@ -0,0 +1 @@
+Make sure there are 5 screens with style, colors, buttons, text that match with the initial wireframes.

subjects/ui-4-4/README.md

@@ -0,0 +1,28 @@
+# UI IV - Ex 4 CK - Animation
+
+**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:**
+
+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:**