diff --git a/subjects/ui-1-1/README.md b/subjects/ui-1-1/README.md new file mode 100644 index 0000000..ad9c509 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/subjects/ui-1-1/audit/README.md b/subjects/ui-1-1/audit/README.md new file mode 100644 index 0000000..2447518 --- /dev/null +++ b/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) + diff --git a/subjects/ui-1-10/README.md b/subjects/ui-1-10/README.md new file mode 100644 index 0000000..94f0dfa --- /dev/null +++ b/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) \ No newline at end of file diff --git a/subjects/ui-1-10/Spotify.jpg b/subjects/ui-1-10/Spotify.jpg new file mode 100644 index 0000000..dc05f3a Binary files /dev/null and b/subjects/ui-1-10/Spotify.jpg differ diff --git a/subjects/ui-1-10/audit/README.md b/subjects/ui-1-10/audit/README.md new file mode 100644 index 0000000..a87493e --- /dev/null +++ b/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) \ No newline at end of file diff --git a/subjects/ui-1-10/audit/SpotifyCK1.png b/subjects/ui-1-10/audit/SpotifyCK1.png new file mode 100644 index 0000000..e81c910 Binary files /dev/null and b/subjects/ui-1-10/audit/SpotifyCK1.png differ diff --git a/subjects/ui-1-10/audit/SpotifyCK2.png b/subjects/ui-1-10/audit/SpotifyCK2.png new file mode 100644 index 0000000..7ae627b Binary files /dev/null and b/subjects/ui-1-10/audit/SpotifyCK2.png differ diff --git a/subjects/ui-1-11/Dashboard.png b/subjects/ui-1-11/Dashboard.png new file mode 100644 index 0000000..d8d4b66 Binary files /dev/null and b/subjects/ui-1-11/Dashboard.png differ diff --git a/subjects/ui-1-11/README.md b/subjects/ui-1-11/README.md new file mode 100644 index 0000000..c5aeeb1 --- /dev/null +++ b/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 diff --git a/subjects/ui-1-11/audit/DashboardCK1.png b/subjects/ui-1-11/audit/DashboardCK1.png new file mode 100644 index 0000000..b93b9e7 Binary files /dev/null and b/subjects/ui-1-11/audit/DashboardCK1.png differ diff --git a/subjects/ui-1-11/audit/README.md b/subjects/ui-1-11/audit/README.md new file mode 100644 index 0000000..b737c7f --- /dev/null +++ b/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 \ No newline at end of file diff --git a/subjects/ui-1-2/README.md b/subjects/ui-1-2/README.md new file mode 100644 index 0000000..bff0725 --- /dev/null +++ b/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/) \ No newline at end of file diff --git a/subjects/ui-1-2/audit/README.md b/subjects/ui-1-2/audit/README.md new file mode 100644 index 0000000..64ac0d8 --- /dev/null +++ b/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) diff --git a/subjects/ui-1-2/package.json b/subjects/ui-1-2/package.json new file mode 100644 index 0000000..e69de29 diff --git a/subjects/ui-1-3/README.md b/subjects/ui-1-3/README.md new file mode 100644 index 0000000..a6ec65e --- /dev/null +++ b/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/) diff --git a/subjects/ui-1-3/Resource.png b/subjects/ui-1-3/Resource.png new file mode 100644 index 0000000..2bf8ebe Binary files /dev/null and b/subjects/ui-1-3/Resource.png differ diff --git a/subjects/ui-1-3/audit/README.md b/subjects/ui-1-3/audit/README.md new file mode 100644 index 0000000..0885e25 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/subjects/ui-1-3/audit/Resource.png b/subjects/ui-1-3/audit/Resource.png new file mode 100644 index 0000000..2bf8ebe Binary files /dev/null and b/subjects/ui-1-3/audit/Resource.png differ diff --git a/subjects/ui-1-4/README.md b/subjects/ui-1-4/README.md new file mode 100644 index 0000000..99d456d --- /dev/null +++ b/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/) diff --git a/subjects/ui-1-4/audit/README.md b/subjects/ui-1-4/audit/README.md new file mode 100644 index 0000000..4718e46 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/subjects/ui-1-5/README.md b/subjects/ui-1-5/README.md new file mode 100644 index 0000000..5590d4d --- /dev/null +++ b/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) \ No newline at end of file diff --git a/subjects/ui-1-5/audit/README.md b/subjects/ui-1-5/audit/README.md new file mode 100644 index 0000000..2e28a4b --- /dev/null +++ b/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 \ No newline at end of file diff --git a/subjects/ui-1-6/README.md b/subjects/ui-1-6/README.md new file mode 100644 index 0000000..65bf0d2 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/subjects/ui-1-6/audit/README.md b/subjects/ui-1-6/audit/README.md new file mode 100644 index 0000000..64a0a8e --- /dev/null +++ b/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 \ No newline at end of file diff --git a/subjects/ui-1-7/README.md b/subjects/ui-1-7/README.md new file mode 100644 index 0000000..91730ac --- /dev/null +++ b/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 diff --git a/subjects/ui-1-7/Timer.png b/subjects/ui-1-7/Timer.png new file mode 100644 index 0000000..226b1bc Binary files /dev/null and b/subjects/ui-1-7/Timer.png differ diff --git a/subjects/ui-1-7/audit/README.md b/subjects/ui-1-7/audit/README.md new file mode 100644 index 0000000..296c741 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/subjects/ui-1-7/audit/Timer1.png b/subjects/ui-1-7/audit/Timer1.png new file mode 100644 index 0000000..e53fada Binary files /dev/null and b/subjects/ui-1-7/audit/Timer1.png differ diff --git a/subjects/ui-1-7/audit/Timer2.png b/subjects/ui-1-7/audit/Timer2.png new file mode 100644 index 0000000..74ccd86 Binary files /dev/null and b/subjects/ui-1-7/audit/Timer2.png differ diff --git a/subjects/ui-1-8/README.md b/subjects/ui-1-8/README.md new file mode 100644 index 0000000..8524dcb --- /dev/null +++ b/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 \ No newline at end of file diff --git a/subjects/ui-1-8/Watch1.png b/subjects/ui-1-8/Watch1.png new file mode 100644 index 0000000..9de5f36 Binary files /dev/null and b/subjects/ui-1-8/Watch1.png differ diff --git a/subjects/ui-1-8/Watch2.png b/subjects/ui-1-8/Watch2.png new file mode 100644 index 0000000..304a79a Binary files /dev/null and b/subjects/ui-1-8/Watch2.png differ diff --git a/subjects/ui-1-8/Watch3.png b/subjects/ui-1-8/Watch3.png new file mode 100644 index 0000000..57512ed Binary files /dev/null and b/subjects/ui-1-8/Watch3.png differ diff --git a/subjects/ui-1-8/Watch4.png b/subjects/ui-1-8/Watch4.png new file mode 100644 index 0000000..dee2acb Binary files /dev/null and b/subjects/ui-1-8/Watch4.png differ diff --git a/subjects/ui-1-8/audit/README.md b/subjects/ui-1-8/audit/README.md new file mode 100644 index 0000000..037932a --- /dev/null +++ b/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 \ No newline at end of file diff --git a/subjects/ui-1-8/audit/WatchCK.png b/subjects/ui-1-8/audit/WatchCK.png new file mode 100644 index 0000000..b93b9e7 Binary files /dev/null and b/subjects/ui-1-8/audit/WatchCK.png differ diff --git a/subjects/ui-1-9/Flight.png b/subjects/ui-1-9/Flight.png new file mode 100644 index 0000000..22ff912 Binary files /dev/null and b/subjects/ui-1-9/Flight.png differ diff --git a/subjects/ui-1-9/README.md b/subjects/ui-1-9/README.md new file mode 100644 index 0000000..76a7758 --- /dev/null +++ b/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) diff --git a/subjects/ui-1-9/audit/FlightCK1.png b/subjects/ui-1-9/audit/FlightCK1.png new file mode 100644 index 0000000..8646b70 Binary files /dev/null and b/subjects/ui-1-9/audit/FlightCK1.png differ diff --git a/subjects/ui-1-9/audit/FlightCK2.png b/subjects/ui-1-9/audit/FlightCK2.png new file mode 100644 index 0000000..d8da5fa Binary files /dev/null and b/subjects/ui-1-9/audit/FlightCK2.png differ diff --git a/subjects/ui-1-9/audit/FlightCK3.png b/subjects/ui-1-9/audit/FlightCK3.png new file mode 100644 index 0000000..11a7e5e Binary files /dev/null and b/subjects/ui-1-9/audit/FlightCK3.png differ diff --git a/subjects/ui-1-9/audit/FlightCK4.png b/subjects/ui-1-9/audit/FlightCK4.png new file mode 100644 index 0000000..7ae627b Binary files /dev/null and b/subjects/ui-1-9/audit/FlightCK4.png differ diff --git a/subjects/ui-1-9/audit/FlightCK5.png b/subjects/ui-1-9/audit/FlightCK5.png new file mode 100644 index 0000000..b93b9e7 Binary files /dev/null and b/subjects/ui-1-9/audit/FlightCK5.png differ diff --git a/subjects/ui-1-9/audit/README.md b/subjects/ui-1-9/audit/README.md new file mode 100644 index 0000000..c11f38a --- /dev/null +++ b/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) \ No newline at end of file diff --git a/subjects/ui-2-1/README.md b/subjects/ui-2-1/README.md new file mode 100644 index 0000000..f33761c --- /dev/null +++ b/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 \ No newline at end of file diff --git a/subjects/ui-2-1/audit/README.md b/subjects/ui-2-1/audit/README.md new file mode 100644 index 0000000..2916d5f --- /dev/null +++ b/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) \ No newline at end of file diff --git a/subjects/ui-2-2/README.md b/subjects/ui-2-2/README.md new file mode 100644 index 0000000..144d9e9 --- /dev/null +++ b/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) diff --git a/subjects/ui-2-2/audit/README.md b/subjects/ui-2-2/audit/README.md new file mode 100644 index 0000000..b094bbc --- /dev/null +++ b/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) \ No newline at end of file diff --git a/subjects/ui-2-3/README.md b/subjects/ui-2-3/README.md new file mode 100644 index 0000000..1754ee1 --- /dev/null +++ b/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 diff --git a/subjects/ui-2-3/audit/README.md b/subjects/ui-2-3/audit/README.md new file mode 100644 index 0000000..1fb701c --- /dev/null +++ b/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) \ No newline at end of file diff --git a/subjects/ui-2-4/README.md b/subjects/ui-2-4/README.md new file mode 100644 index 0000000..2dbf6c0 --- /dev/null +++ b/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/) diff --git a/subjects/ui-2-4/audit/README.md b/subjects/ui-2-4/audit/README.md new file mode 100644 index 0000000..48ee0eb --- /dev/null +++ b/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 \ No newline at end of file diff --git a/subjects/ui-2-5/README.md b/subjects/ui-2-5/README.md new file mode 100644 index 0000000..ac024f2 --- /dev/null +++ b/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/) diff --git a/subjects/ui-2-5/audit/README.md b/subjects/ui-2-5/audit/README.md new file mode 100644 index 0000000..059b09f --- /dev/null +++ b/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 \ No newline at end of file diff --git a/subjects/ui-3-1/README.md b/subjects/ui-3-1/README.md new file mode 100644 index 0000000..8167f4f --- /dev/null +++ b/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) + diff --git a/subjects/ui-3-1/audit/README.md b/subjects/ui-3-1/audit/README.md new file mode 100644 index 0000000..e4106ff --- /dev/null +++ b/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) \ No newline at end of file diff --git a/subjects/ui-3-10/README.md b/subjects/ui-3-10/README.md new file mode 100644 index 0000000..b3c51ab --- /dev/null +++ b/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) \ No newline at end of file diff --git a/subjects/ui-3-10/audit/README.md b/subjects/ui-3-10/audit/README.md new file mode 100644 index 0000000..8ddd816 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/subjects/ui-3-11/README.md b/subjects/ui-3-11/README.md new file mode 100644 index 0000000..4cb2b8e --- /dev/null +++ b/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/) diff --git a/subjects/ui-3-11/audit/README.md b/subjects/ui-3-11/audit/README.md new file mode 100644 index 0000000..6f89af4 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/subjects/ui-3-2/README.md b/subjects/ui-3-2/README.md new file mode 100644 index 0000000..eb64f25 --- /dev/null +++ b/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) diff --git a/subjects/ui-3-2/audit/README.md b/subjects/ui-3-2/audit/README.md new file mode 100644 index 0000000..64c37a5 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/subjects/ui-3-3/README.md b/subjects/ui-3-3/README.md new file mode 100644 index 0000000..1c31667 --- /dev/null +++ b/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) diff --git a/subjects/ui-3-3/audit/README.md b/subjects/ui-3-3/audit/README.md new file mode 100644 index 0000000..ca03429 --- /dev/null +++ b/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/) \ No newline at end of file diff --git a/subjects/ui-3-4/README.md b/subjects/ui-3-4/README.md new file mode 100644 index 0000000..b355938 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/subjects/ui-3-4/audit/README.md b/subjects/ui-3-4/audit/README.md new file mode 100644 index 0000000..ca03429 --- /dev/null +++ b/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/) \ No newline at end of file diff --git a/subjects/ui-3-5/README.md b/subjects/ui-3-5/README.md new file mode 100644 index 0000000..361c33a --- /dev/null +++ b/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/) \ No newline at end of file diff --git a/subjects/ui-3-5/audit/README.md b/subjects/ui-3-5/audit/README.md new file mode 100644 index 0000000..7e3eef0 --- /dev/null +++ b/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/) \ No newline at end of file diff --git a/subjects/ui-3-6/README.md b/subjects/ui-3-6/README.md new file mode 100644 index 0000000..aa9d02e --- /dev/null +++ b/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) \ No newline at end of file diff --git a/subjects/ui-3-6/audit/README.md b/subjects/ui-3-6/audit/README.md new file mode 100644 index 0000000..9a5bcc2 --- /dev/null +++ b/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/) \ No newline at end of file diff --git a/subjects/ui-3-7/README.md b/subjects/ui-3-7/README.md new file mode 100644 index 0000000..d9138e5 --- /dev/null +++ b/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/) \ No newline at end of file diff --git a/subjects/ui-3-7/audit/README.md b/subjects/ui-3-7/audit/README.md new file mode 100644 index 0000000..d262ea5 --- /dev/null +++ b/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/) \ No newline at end of file diff --git a/subjects/ui-3-8/README.md b/subjects/ui-3-8/README.md new file mode 100644 index 0000000..b749e72 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/subjects/ui-3-8/audit/README.md b/subjects/ui-3-8/audit/README.md new file mode 100644 index 0000000..649cabf --- /dev/null +++ b/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/) \ No newline at end of file diff --git a/subjects/ui-3-9/README.md b/subjects/ui-3-9/README.md new file mode 100644 index 0000000..de0e88b --- /dev/null +++ b/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. diff --git a/subjects/ui-3-9/audit/README.md b/subjects/ui-3-9/audit/README.md new file mode 100644 index 0000000..e1d3abe --- /dev/null +++ b/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/) \ No newline at end of file diff --git a/subjects/ui-4-1/README.md b/subjects/ui-4-1/README.md new file mode 100644 index 0000000..9b97d7c --- /dev/null +++ b/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/) diff --git a/subjects/ui-4-1/audit/README.md b/subjects/ui-4-1/audit/README.md new file mode 100644 index 0000000..30cab44 --- /dev/null +++ b/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/) \ No newline at end of file diff --git a/subjects/ui-4-2/README.md b/subjects/ui-4-2/README.md new file mode 100644 index 0000000..98d8bfc --- /dev/null +++ b/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/) diff --git a/subjects/ui-4-2/audit/README.md b/subjects/ui-4-2/audit/README.md new file mode 100644 index 0000000..70e5cb7 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/subjects/ui-4-3/README.md b/subjects/ui-4-3/README.md new file mode 100644 index 0000000..1a26d6b --- /dev/null +++ b/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) \ No newline at end of file diff --git a/subjects/ui-4-3/audit/README.md b/subjects/ui-4-3/audit/README.md new file mode 100644 index 0000000..b20050f --- /dev/null +++ b/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. \ No newline at end of file diff --git a/subjects/ui-4-4/README.md b/subjects/ui-4-4/README.md new file mode 100644 index 0000000..55c7a12 --- /dev/null +++ b/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:** + +‘Speak human: Use the words your users use.’ Dan Saffer | Microinteractions + diff --git a/subjects/ui-4-4/audit/README.md b/subjects/ui-4-4/audit/README.md new file mode 100644 index 0000000..bd86d4b --- /dev/null +++ b/subjects/ui-4-4/audit/README.md @@ -0,0 +1,6 @@ +Make sure: + +- There is a starting screen +- There is an ending screen +- All the connections between screens work +- There are multistate buttons which change every time you click somewhere \ No newline at end of file diff --git a/subjects/ui-4-5/README.md b/subjects/ui-4-5/README.md new file mode 100644 index 0000000..3db9bee --- /dev/null +++ b/subjects/ui-4-5/README.md @@ -0,0 +1,43 @@ +# UI IV - Ex 5 CK - 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! + +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. +- 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:** + +- 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. + +**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. + +**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:** + +- ‘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 \ No newline at end of file diff --git a/subjects/ui-4-5/audit/README.md b/subjects/ui-4-5/audit/README.md new file mode 100644 index 0000000..bda9bea --- /dev/null +++ b/subjects/ui-4-5/audit/README.md @@ -0,0 +1,6 @@ +Make sure there are: + +- 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. \ No newline at end of file diff --git a/subjects/ui-5-1/README.md b/subjects/ui-5-1/README.md new file mode 100644 index 0000000..0aeff3d --- /dev/null +++ b/subjects/ui-5-1/README.md @@ -0,0 +1,40 @@ +# UI V - Ex 1 CK - Audit + +**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:** + +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: + +- A completed chart +- A report including the 5 recommended steps described below + +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, aggregate, and present the results. + +Resources: + +- [Introduction to heuristic evaluation: a beginner’s guide](https://uxdesign.cc/introduction-to-heuristic-evaluation-658705606518) +- [Nielsen's 10 usability heuristics](https://www.nngroup.com/articles/ten-usability-heuristics/) +- [What you really get from a heuristic evaluation](https://uxmag.com/articles/what-you-really-get-from-a-heuristic-evaluation) +- [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) \ No newline at end of file diff --git a/subjects/ui-5-1/audit/README.md b/subjects/ui-5-1/audit/README.md new file mode 100644 index 0000000..079f5f7 --- /dev/null +++ b/subjects/ui-5-1/audit/README.md @@ -0,0 +1,4 @@ +Make sure: + +- The chart is complete +- The 5 steps are included in the report \ No newline at end of file diff --git a/subjects/ui-5-2/README.md b/subjects/ui-5-2/README.md new file mode 100644 index 0000000..ec27dec --- /dev/null +++ b/subjects/ui-5-2/README.md @@ -0,0 +1,27 @@ +# UI V - Ex 2 CK - 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. + +**Websites or Apps:** + +- [https://www.ikea.com/](https://www.ikea.com/) +- [https://www.doctorswithoutborders.org/](https://www.doctorswithoutborders.org/) +- App WikiArt + +**Deliverable:** + +- A PDF document with 3 to 6 recommendations + +**Tips:** + +- Classify your recommendations in heuristic criteria \ No newline at end of file diff --git a/subjects/ui-5-2/audit/README.md b/subjects/ui-5-2/audit/README.md new file mode 100644 index 0000000..c2a29aa --- /dev/null +++ b/subjects/ui-5-2/audit/README.md @@ -0,0 +1,12 @@ +Make sure + +- The recommendations are consistent with the report's conclusions +- The recommendations fit in some of these criteria: + - Visibility of system status + - Matching between the system and the real world + - User Control and Freedom + - Consistency and Standards + - Error prevention + - Recognition rather than Recall + - Flexibility and efficiency of use + - Aesthetics and minimalist design \ No newline at end of file