@ -0,0 +1 @@ |
|||||||
|
touch $1/README.md && mkdir $1/audit && touch $1/audit/README.md |
@ -0,0 +1,125 @@ |
|||||||
|
UX Program |
||||||
|
UX Quest 1 = Athele, keep hydrated! |
||||||
|
Ex 1 = User interview |
||||||
|
Ex 2 = Analytics |
||||||
|
Ex 3 = Personas |
||||||
|
Ex 4 = User Journey |
||||||
|
Ex 5 = Problem Statement |
||||||
|
Ex 6 = Ideation |
||||||
|
Ex 7 = Prototyping |
||||||
|
|
||||||
|
UX Quest 2 = Going on holidays with friends |
||||||
|
Ex 1 = Interview Guide |
||||||
|
Ex 2 = Run Interviews |
||||||
|
Ex 3 = Affinity Diagram |
||||||
|
Ex 4 = Problem Statement |
||||||
|
Ex 5 = Ideation |
||||||
|
Ex 6 = User Flow |
||||||
|
Ex 7 = Prototyping |
||||||
|
|
||||||
|
UX Quest 3 = Let s fight harassment |
||||||
|
Ex 1 = Competitive Analysis |
||||||
|
Ex 2 = Surveys |
||||||
|
Ex 3 = Broadcast Strategy |
||||||
|
Ex 4 = Interviews |
||||||
|
Ex 5 = Personas |
||||||
|
Ex 6 = User Journey |
||||||
|
Ex 7 = Problem Statement |
||||||
|
|
||||||
|
UX Quest 4 = The Olympics |
||||||
|
Ex 1 = Ideation A |
||||||
|
Ex 2 = Ideation B |
||||||
|
Ex 3 = Ideation C |
||||||
|
Ex 4 = User Flow |
||||||
|
Ex 5 = Prototyping |
||||||
|
Ex 6 = Animation |
||||||
|
Ex 7 = Test |
||||||
|
|
||||||
|
UX Quest 5 = Music on |
||||||
|
Ex 1 = Heuristics |
||||||
|
Ex 2 = Site map |
||||||
|
Ex 3 = JTBD |
||||||
|
Ex 4 = Card Sorting |
||||||
|
Ex 5 = Wireframes |
||||||
|
Ex 6 = Test protocol |
||||||
|
Ex 7 = Run 5 tests |
||||||
|
|
||||||
|
UX Quest 6 = Sunday night movie |
||||||
|
Ex 1 = User Flow |
||||||
|
Ex 2 = Wireframes |
||||||
|
Ex 3 = WIreframes animation |
||||||
|
Ex 4 = Test on Feature 1 |
||||||
|
Ex 5 = Test on Feature 2 |
||||||
|
Ex 6 = Test on Feature 3 |
||||||
|
Ex 7 = Iteration |
||||||
|
|
||||||
|
UX Quest 7 = Seamstress |
||||||
|
Ex 1 = UX Strategy |
||||||
|
Ex 2 = Empathy |
||||||
|
Ex 3 = Define |
||||||
|
Ex 4 = Problem Statement |
||||||
|
Ex 5 = Ideation |
||||||
|
Ex 6 = Prototype |
||||||
|
Ex 7 = Test |
||||||
|
|
||||||
|
UI Program |
||||||
|
UI Quest 1 = Colors and moodboard |
||||||
|
Ex 1 = Find the Colors |
||||||
|
Ex 2 = Color codes |
||||||
|
Ex 3 = Color combinations |
||||||
|
Ex 4 = Moodboard |
||||||
|
Ex 5 = Typography |
||||||
|
Ex 6 = Typography Moodboard |
||||||
|
Ex 7 = UI Challenge Timer |
||||||
|
Ex 8 = UI Challenge Watches |
||||||
|
Ex 9 = UI Challenge Flight |
||||||
|
Ex 10 = UI Challenge Spotify |
||||||
|
Ex 11 = UI Challenge Bitcoin Dashboard |
||||||
|
|
||||||
|
UI Quest 2 = Atomic Design |
||||||
|
Ex 1 = Browsing |
||||||
|
Ex 2 = Material Design |
||||||
|
Ex 3 = Design System Library |
||||||
|
Ex 4 = Library for climbing addicts |
||||||
|
Ex 5 = Library for a dating app |
||||||
|
|
||||||
|
UI Quest 3 = Rules |
||||||
|
Ex 1 = Grids |
||||||
|
Ex 2 = Multi State |
||||||
|
Ex 3 = Accessibility (website) |
||||||
|
Ex 4 = Accessibility (app) |
||||||
|
Ex 5 = Breadcrumbs |
||||||
|
Ex 6 = Toggle Buttons |
||||||
|
Ex 7 = Radio Buttons |
||||||
|
Ex 8 = Calendars |
||||||
|
Ex 9 = Time Pickers |
||||||
|
Ex 10 = Micro Interactions |
||||||
|
Ex 11 = Consistency |
||||||
|
|
||||||
|
UI Quest 4 = Building an interface |
||||||
|
Ex 1 = Styleguide |
||||||
|
Ex 2 = Design System Library |
||||||
|
Ex 3 = Design Screens |
||||||
|
Ex 4 = Animation |
||||||
|
Ex 5 = Desirability Testing |
||||||
|
|
||||||
|
UI Quest 5 = Heuristics |
||||||
|
Ex 1 = Audit |
||||||
|
Ex 2 = Recommendations |
||||||
|
|
||||||
|
|
||||||
|
Project 1 = Get a room! |
||||||
|
Part 1 = ux |
||||||
|
Part 2 = ui |
||||||
|
|
||||||
|
Project 2 = Let s do some sports |
||||||
|
Part 1 = ux |
||||||
|
Part 2 = ui |
||||||
|
|
||||||
|
Project 3 = Let s fair trade |
||||||
|
Part 1 = ux |
||||||
|
Part 2 = ui |
||||||
|
|
||||||
|
Project 4 = A table ! |
||||||
|
Part 1 = ux |
||||||
|
Part 2 = ui |
@ -1,11 +1,5 @@ |
|||||||
# UI II - Ex 3 - Design system library |
# UI II - Ex 3 - Design system library |
||||||
|
|
||||||
**Context:** |
|
||||||
|
|
||||||
Welcome to the 2nd quest of UI! |
|
||||||
|
|
||||||
This series of exercises is a great occasion for you to discover how libraries are made in UI, thanks to Atomic Design. |
|
||||||
|
|
||||||
**Instructions:** |
**Instructions:** |
||||||
|
|
||||||
Copy 10 elements from easyJet design system, including |
Copy 10 elements from easyJet design system, including |
@ -1,11 +1,5 @@ |
|||||||
# UI II - Ex 5 - Library for a dating app |
# UI II - Ex 5 - Library for a dating app |
||||||
|
|
||||||
**Context:** |
|
||||||
|
|
||||||
Welcome to the 2nd quest of UI! |
|
||||||
|
|
||||||
This series of exercises is a great occasion for you to discover how libraries are made in UI, thanks to Atomic Design. |
|
||||||
|
|
||||||
**Instructions:** |
**Instructions:** |
||||||
|
|
||||||
You are asked to design a dating app. |
You are asked to design a dating app. |
@ -1,11 +1,5 @@ |
|||||||
# UI II - Ex 4 - Library for climbing addicts |
# UI II - Ex 4 - Library for climbing addicts |
||||||
|
|
||||||
**Context:** |
|
||||||
|
|
||||||
Welcome to the 2nd quest of UI! |
|
||||||
|
|
||||||
This series of exercises is a great occasion for you to discover how libraries are made in UI, thanks to Atomic Design. |
|
||||||
|
|
||||||
**Instructions:** |
**Instructions:** |
||||||
|
|
||||||
You are part of a climbing group and volunteer to rebrand the website of your club. |
You are part of a climbing group and volunteer to rebrand the website of your club. |
@ -1,11 +1,5 @@ |
|||||||
# UI II - Ex 2 - Material Design |
# UI II - Ex 2 - Material Design |
||||||
|
|
||||||
**Context:** |
|
||||||
|
|
||||||
Welcome to the 2nd quest of UI! |
|
||||||
|
|
||||||
This series of exercises is a great occasion for you to discover how libraries are made in UI, thanks to Atomic Design. |
|
||||||
|
|
||||||
**Instructions:** |
**Instructions:** |
||||||
|
|
||||||
Download [this image](https://storage.googleapis.com/gd-wagtail-prod-assets/original_images/MDA2018_inline_02.jpg) which is a snapshot of 3 screens of Lyft, and detect the order in which the layers were set. |
Download [this image](https://storage.googleapis.com/gd-wagtail-prod-assets/original_images/MDA2018_inline_02.jpg) which is a snapshot of 3 screens of Lyft, and detect the order in which the layers were set. |
@ -0,0 +1,18 @@ |
|||||||
|
# UI IV - Ex 4 - Animation |
||||||
|
|
||||||
|
**Instructions:** |
||||||
|
|
||||||
|
Animate your 5 screens on Figma. Think about multistate!! |
||||||
|
|
||||||
|
**Deliverable:** |
||||||
|
|
||||||
|
- An animated high-fidelity prototype |
||||||
|
|
||||||
|
**Resources:** |
||||||
|
|
||||||
|
- [Efficiently Manage Your Designs - How Mockplus State Page Helps To View & Manage Multiple State](https://help.mockplus.com/p/372) |
||||||
|
|
||||||
|
**Quote:** |
||||||
|
|
||||||
|
‘Speak human: Use the words your users use.’ Dan Saffer | Microinteractions |
||||||
|
|
@ -0,0 +1,24 @@ |
|||||||
|
# UI IV - Ex 3 - Design screens |
||||||
|
|
||||||
|
**Instructions:** |
||||||
|
|
||||||
|
Based on the wireframes and your design system library, take your mid-fidelity prototype to a high-fidelity level! |
||||||
|
|
||||||
|
Select 5 screens that will show the user flow of a customer who: |
||||||
|
|
||||||
|
- arrives on the homepage |
||||||
|
- browses the content |
||||||
|
- checks one product page |
||||||
|
- adds the product to the cart |
||||||
|
- checks out |
||||||
|
|
||||||
|
Use your components, call to actions and visuals to complete the wireframes. |
||||||
|
|
||||||
|
**Deliverables:** |
||||||
|
|
||||||
|
- 5 high-fidelity screens |
||||||
|
|
||||||
|
**Resources:** |
||||||
|
|
||||||
|
- [Unsplash](https://unsplash.com/) for visuals |
||||||
|
- [From low-fidelity to high-fidelity](https://mockitt.wondershare.com/prototyping/low-fidelity-vs-high-fidelity.html) |
@ -1,15 +1,5 @@ |
|||||||
# UI IV - Ex 2 - Design system library |
# UI IV - Ex 2 - Design system library |
||||||
|
|
||||||
**Context:** |
|
||||||
|
|
||||||
In this quest, you’ll have to build your own interface. |
|
||||||
|
|
||||||
After designing your own style guide with a moodboard, colors and typography, you can use the series of consistency principles, atomic design structure, the techniques to build you own library and then a series of screens. Step by step, you’ll have built an animated high-fidelity prototype. |
|
||||||
|
|
||||||
The very last step will be to test it on users to detect the impressions they get when they discover your app. |
|
||||||
|
|
||||||
Once again, feel free to get as much inspiration as you need from existing design systems. Dribbble, consistency and structure are your best friends! |
|
||||||
|
|
||||||
**Instructions:** |
**Instructions:** |
||||||
|
|
||||||
Based on the moodboard you designed in Ex 1, create a design system with at least 30 elements, including atoms, molecules and organisms, and include multistates. |
Based on the moodboard you designed in Ex 1, create a design system with at least 30 elements, including atoms, molecules and organisms, and include multistates. |
@ -1,15 +1,5 @@ |
|||||||
# UI IV - Ex 5 - Desirability testing |
# UI IV - Ex 5 - Desirability testing |
||||||
|
|
||||||
**Context:** |
|
||||||
|
|
||||||
In this quest, you’ll have to build your own interface. |
|
||||||
|
|
||||||
After designing your own style guide with a moodboard, colors and typography, you can use the series of consistency principles, atomic design structure, the techniques to build you own library and then a series of screens. Step by step, you’ll have built an animated high-fidelity prototype. |
|
||||||
|
|
||||||
The very last step will be to test it on users to detect the impressions they get when they discover your app. |
|
||||||
|
|
||||||
Once again, feel free to get as much inspiration as you need from existing design systems. Dribbble, consistency and structure are your best friends! |
|
||||||
|
|
||||||
**Instructions:** |
**Instructions:** |
||||||
|
|
||||||
Run a desirability test! |
Run a desirability test! |
@ -0,0 +1,4 @@ |
|||||||
|
#### Audit |
||||||
|
|
||||||
|
###### Is there a PDF document? |
||||||
|
###### Do the color codes match with the extracted colors ? You can use [Hex Color Codes](https://hexcolorcodes.org/) |
@ -1,55 +1,73 @@ |
|||||||
#### Audit instructions |
# UI I - Ex 3 - Color combinations |
||||||
|
|
||||||
|
**Instructions:** |
||||||
|
|
||||||
[Exercise example](https://www.figma.com/file/IXsXrJz9FPKPp8PKQxNhxT/UI---Ex-3?node-id=0%3A1) |
Let's browse! |
||||||
|
|
||||||
Here are examples of combinations on websites. |
Find 3 digital products (websites or apps) that use each kind of color palette combination: |
||||||
|
|
||||||
Make sure : |
- Monochromatic |
||||||
|
- Analogous |
||||||
|
- Complementary |
||||||
|
- Split complementary |
||||||
|
- Triadic |
||||||
|
- Double complementary |
||||||
|
|
||||||
###### The websites or apps chosen by the students match with a correct color wheel combinations |
**Deliverable:** |
||||||
###### There are 3 websites or apps per color palette combination. |
|
||||||
|
|
||||||
##### Monochromatic examples: |
- A PDF document extracted from a Figma file including for each |
||||||
|
- screenshots of the main page |
||||||
|
- the matching URL |
||||||
|
- the main colors and |
||||||
|
- the kind of color combination. |
||||||
|
|
||||||
|
**Tips:** |
||||||
|
|
||||||
|
- You can find HSB (Hue, Saturation, Brightness) as well as HSV (Hue, Saturation, Value) depending of the source. |
||||||
|
|
||||||
|
**Resources:** |
||||||
|
|
||||||
|
- [https://coloursandmaterials.wordpress.com/2014/09/16/colour-system/](https://coloursandmaterials.wordpress.com/2014/09/16/colour-system/) |
||||||
|
- ![Color wheel combinations](Resource.png) |
||||||
|
|
||||||
|
|
||||||
|
**Monochromatic examples:** |
||||||
|
|
||||||
- [https://www.benefitcosmetics.com/](https://www.benefitcosmetics.com/) |
- [https://www.benefitcosmetics.com/](https://www.benefitcosmetics.com/) |
||||||
- [http://www.jwilouvres.com.au/](http://www.jwilouvres.com.au/) |
- [http://www.jwilouvres.com.au/](http://www.jwilouvres.com.au/) |
||||||
- [http://blank.com.pt/](http://blank.com.pt/) |
- [http://blank.com.pt/](http://blank.com.pt/) |
||||||
|
|
||||||
|
|
||||||
##### Analogous examples: |
**Analogous examples:** |
||||||
|
|
||||||
- [https://www.natuurenmilieu.nl/](https://www.natuurenmilieu.nl/) |
- [https://www.natuurenmilieu.nl/](https://www.natuurenmilieu.nl/) |
||||||
- [https://campesinorum.com/](https://campesinorum.com/) |
- [https://campesinorum.com/](https://campesinorum.com/) |
||||||
- [https://www.lobster.es/](https://www.lobster.es/) |
- [https://www.lobster.es/](https://www.lobster.es/) |
||||||
|
|
||||||
|
|
||||||
##### Complementary examples: |
**Complementary examples:** |
||||||
|
|
||||||
- [https://www.rolandgarros.com/](https://www.rolandgarros.com/fr-fr) |
- [https://www.rolandgarros.com/](https://www.rolandgarros.com/fr-fr) |
||||||
- [https://squilla.io/](https://squilla.io/) |
- [https://squilla.io/](https://squilla.io/) |
||||||
- [https://gomim.com/en/](https://gomim.com/en/) |
- [https://gomim.com/en/](https://gomim.com/en/) |
||||||
|
|
||||||
|
|
||||||
##### Split complementary examples: |
**Split complementary examples:** |
||||||
|
|
||||||
- [https://flythenest.io/en/](https://flythenest.io/en/) |
- [https://flythenest.io/en/](https://flythenest.io/en/) |
||||||
- [https://www.kineuphorics.com/](https://www.kineuphorics.com/) |
- [https://www.kineuphorics.com/](https://www.kineuphorics.com/) |
||||||
- [https://www.ma-tea.de/](https://www.ma-tea.de/) |
- [https://www.ma-tea.de/](https://www.ma-tea.de/) |
||||||
|
|
||||||
|
|
||||||
##### Triadic examples |
**Triadic examples** |
||||||
|
|
||||||
- [https://normalnow.com/](https://normalnow.com/) |
- [https://normalnow.com/](https://normalnow.com/) |
||||||
- [https://brainbakery.com/en/](https://brainbakery.com/en/) |
- [https://brainbakery.com/en/](https://brainbakery.com/en/) |
||||||
- [https://www.barkbox.com/](https://www.barkbox.com/) |
- [https://www.barkbox.com/](https://www.barkbox.com/) |
||||||
|
|
||||||
|
|
||||||
##### Dual complementary or Tetradic examples |
**Dual complementary or Tetradic examples** |
||||||
|
|
||||||
- [https://www.airtable.com/](https://www.airtable.com/) |
- [https://www.airtable.com/](https://www.airtable.com/) |
||||||
- [https://calendar.google.com/](https://calendar.google.com/) |
- [https://calendar.google.com/](https://calendar.google.com/) |
||||||
- [https://www.ebay.com/](https://www.ebay.com/) |
- [https://www.ebay.com/](https://www.ebay.com/) |
||||||
|
|
||||||
|
|
||||||
![Resource](Resource.png) |
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 87 KiB |
@ -0,0 +1,9 @@ |
|||||||
|
#### Audit |
||||||
|
|
||||||
|
|
||||||
|
###### Do the websites or apps chosen by the students match with a correct color wheel combinations? |
||||||
|
###### Are there 3 websites or apps per color palette combination? |
||||||
|
###### Are all websites or apps different from the examples in the instructions? |
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,6 @@ |
|||||||
|
#### Audit |
||||||
|
|
||||||
|
###### Is there a PDF document? |
||||||
|
###### Are there 7 screenshots of the 7 pages or screens? |
||||||
|
###### Does each screenshot have a URL next to it? |
||||||
|
###### Do the main colors match with the ones from the screens? |
@ -0,0 +1,20 @@ |
|||||||
|
#### Audit |
||||||
|
|
||||||
|
###### Are there 4 PDF extracted moodboards? |
||||||
|
###### On Moodboard #1, are there several pictures that are graphically consistent? |
||||||
|
###### On Moodboard #1, are there 2 to 3 main colors that stand out |
||||||
|
###### On Moodboard #1, do the colors have at least one code (RGB, Hex, or HSB) |
||||||
|
###### On Moodboard #1, do the color code match with the designated color? [thanks to this tool](http://onlinewebtool.com/colorpicker.php) |
||||||
|
###### On Moodboard #2, are there several pictures that are graphically consistent? |
||||||
|
###### On Moodboard #2, are there 2 to 3 main colors that stand out |
||||||
|
###### On Moodboard #2, do the colors have at least one code (RGB, Hex, or HSB) |
||||||
|
###### On Moodboard #2, do the color code match with the designated color? [thanks to this tool](http://onlinewebtool.com/colorpicker.php) |
||||||
|
###### On Moodboard #3, are there several pictures that are graphically consistent? |
||||||
|
###### On Moodboard #3, are there 2 to 3 main colors that stand out |
||||||
|
###### On Moodboard #3, do the colors have at least one code (RGB, Hex, or HSB) |
||||||
|
###### On Moodboard #3, do the color code match with the designated color? [thanks to this tool](http://onlinewebtool.com/colorpicker.php) |
||||||
|
###### On Moodboard #4, are there several pictures that are graphically consistent? |
||||||
|
###### On Moodboard #4, are there 2 to 3 main colors that stand out |
||||||
|
###### On Moodboard #4, do the colors have at least one code (RGB, Hex, or HSB) |
||||||
|
###### On Moodboard #4, do the color code match with the designated color? [thanks to this tool](http://onlinewebtool.com/colorpicker.php) |
||||||
|
|
@ -0,0 +1,23 @@ |
|||||||
|
#### Audit |
||||||
|
|
||||||
|
###### Is there a PDF document? |
||||||
|
###### Are there 4 different fonts (one for each moodboard)? |
||||||
|
###### On Moodboard #1, is there a typography for a title? |
||||||
|
###### On Moodboard #1, is there a typography for a button? |
||||||
|
###### On Moodboard #1, is there a typography for a description? |
||||||
|
###### On Moodboard #1, is there a typography for the text? |
||||||
|
|
||||||
|
###### On Moodboard #2, is there a typography for a title? |
||||||
|
###### On Moodboard #2, is there a typography for a button? |
||||||
|
###### On Moodboard #2, is there a typography for a description? |
||||||
|
###### On Moodboard #2, is there a typography for the text? |
||||||
|
|
||||||
|
###### On Moodboard #3, is there a typography for a title? |
||||||
|
###### On Moodboard #3, is there a typography for a button? |
||||||
|
###### On Moodboard #3, is there a typography for a description? |
||||||
|
###### On Moodboard #3, is there a typography for the text? |
||||||
|
|
||||||
|
###### On Moodboard #4, is there a typography for a title? |
||||||
|
###### On Moodboard #4, is there a typography for a button? |
||||||
|
###### On Moodboard #4, is there a typography for a description? |
||||||
|
###### On Moodboard #4, is there a typography for the text? |
@ -1,9 +1,5 @@ |
|||||||
# UI I - Ex 5 - Typography |
# UI I - Ex 5 - Typography |
||||||
|
|
||||||
**Context:** |
|
||||||
|
|
||||||
This first UI quest is a series of exercises to practice colors, moodboards, typography and replicate screens on Figma! |
|
||||||
|
|
||||||
**Instructions:** |
**Instructions:** |
||||||
|
|
||||||
Go to these websites and detect the typographies used. |
Go to these websites and detect the typographies used. |
@ -0,0 +1,13 @@ |
|||||||
|
#### Audit |
||||||
|
|
||||||
|
###### Is there a PDF document? |
||||||
|
###### Are there 4 fonts from Unric.org? |
||||||
|
###### Are there 3 fonts from Strongbowcider.org? |
||||||
|
###### Are there 3 fonts from Bbqgrillsandfire.com? |
||||||
|
###### Are there 3 fonts from Wikipedia.org? |
||||||
|
###### Are there 7 fonts from Texasprivateinvestigator.com? |
||||||
|
###### Is there 1 font from Bumble? |
||||||
|
###### Are there 3 fonts from Adopteunepoule.fr? |
||||||
|
###### Are there 3 fonts from Slaveryfootprint.org? |
||||||
|
###### Is there 1 font from Tomorrowland.com? |
||||||
|
###### Is there 1 font from Artisanscanada.com? |
Before Width: | Height: | Size: 488 KiB After Width: | Height: | Size: 488 KiB |
@ -1,9 +1,5 @@ |
|||||||
# UI I - Ex 11 - UI Challenge - Bitcoin Dashboard |
# UI I - Ex 11 - UI Challenge - Bitcoin Dashboard |
||||||
|
|
||||||
**Context:** |
|
||||||
|
|
||||||
This first UI quest is a series of exercises to practice colors, moodboards, typography and replicate screens on Figma! |
|
||||||
|
|
||||||
**Instructions:** |
**Instructions:** |
||||||
|
|
||||||
Copy this image on Figma |
Copy this image on Figma |
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
@ -0,0 +1,13 @@ |
|||||||
|
#### Audit |
||||||
|
|
||||||
|
###### Is there a Figma file? |
||||||
|
###### Does the designed screen match the image? |
||||||
|
###### Do all layers have a name and belong to a group of graphic elements? |
||||||
|
|
||||||
|
|
||||||
|
![Example](DashboardCK1.png) |
||||||
|
|
||||||
|
###### Are there 2 pages: one for the screen and one with the symbols? |
||||||
|
###### Is the overlay done with transparency? |
||||||
|
###### Was the mask function used to change the shape of the image? |
||||||
|
##### Was the linear color function used? |
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
@ -1,9 +1,5 @@ |
|||||||
# UI I - Ex 9 - UI Challenge - Flight |
# UI I - Ex 9 - UI Challenge - Flight |
||||||
|
|
||||||
**Context:** |
|
||||||
|
|
||||||
This first UI quest is a series of exercises to practice colors, moodboards, typography and replicate screens on Figma! |
|
||||||
|
|
||||||
**Instructions**: |
**Instructions**: |
||||||
|
|
||||||
Copy this image on Figma |
Copy this image on Figma |
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
Before Width: | Height: | Size: 429 KiB After Width: | Height: | Size: 429 KiB |
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 75 KiB |
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
@ -0,0 +1,25 @@ |
|||||||
|
#### Audit |
||||||
|
|
||||||
|
###### Is there a Figma file? |
||||||
|
###### Does the designed screen match the image? |
||||||
|
###### Do all layers have a name and belong to a group of graphic elements? |
||||||
|
|
||||||
|
![Example](FlightCK5.png) |
||||||
|
|
||||||
|
|
||||||
|
###### Are there 2 pages: one for the screen and one with the symbols? |
||||||
|
|
||||||
|
|
||||||
|
![Example](FlightCK2.png) |
||||||
|
|
||||||
|
|
||||||
|
###### Have masks been used to change the shape of the image? |
||||||
|
|
||||||
|
![Example](FlightCK1.png) |
||||||
|
|
||||||
|
|
||||||
|
###### Is the overlay done with transparency? |
||||||
|
|
||||||
|
![Example](FlightCK3.png) |
||||||
|
|
||||||
|
![Example](FlightCK4.png) |
@ -1,9 +1,5 @@ |
|||||||
# UI I - Ex 10 - UI Challenge - Spotify |
# UI I - Ex 10 - UI Challenge - Spotify |
||||||
|
|
||||||
**Context:** |
|
||||||
|
|
||||||
This first UI quest is a series of exercises to practice colors, moodboards, typography and replicate screens on Figma! |
|
||||||
|
|
||||||
**Instructions:** |
**Instructions:** |
||||||
|
|
||||||
Copy this image on Figma |
Copy this image on Figma |
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
@ -0,0 +1,16 @@ |
|||||||
|
#### Audit |
||||||
|
|
||||||
|
###### Is there a Figma file ? |
||||||
|
###### Does the designed screen match the image |
||||||
|
###### Are there 2 pages: one for the screen and one with the symbols? |
||||||
|
|
||||||
|
![Example](SpotifyCK2.png) |
||||||
|
|
||||||
|
###### Are there symbols and variants for the songs in the Symbols page? |
||||||
|
###### Is the background made with linear color? |
||||||
|
|
||||||
|
![Example](SpotifyCK1.png) |
||||||
|
|
||||||
|
###### Are all the elements gathered in groups? |
||||||
|
###### Are all the layers names and organized? |
||||||
|
###### Is there Apple Design System (head bar)? |
Before Width: | Height: | Size: 273 KiB After Width: | Height: | Size: 273 KiB |
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 75 KiB |
Before Width: | Height: | Size: 132 KiB After Width: | Height: | Size: 132 KiB |
@ -0,0 +1,13 @@ |
|||||||
|
#### Audit |
||||||
|
|
||||||
|
###### Is there a Figma File? |
||||||
|
###### Are there two half circles as this one? |
||||||
|
|
||||||
|
![Example](Timer2.png) |
||||||
|
###### Is there a 'PUSH UP' text and back arrow? |
||||||
|
###### Is there a Stop button with the text? |
||||||
|
###### Is there a Reset button with the text? |
||||||
|
###### Is there a gradient background behind the 5? |
||||||
|
###### Are all the layers labeled and organized in groups? |
||||||
|
|
||||||
|
![Example](Timer1.png) |
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
Before Width: | Height: | Size: 72 KiB After Width: | Height: | Size: 72 KiB |
@ -1,9 +1,5 @@ |
|||||||
# UI I - Ex 8 - UI Challenge - Watches |
# UI I - Ex 8 - UI Challenge - Watches |
||||||
|
|
||||||
**Context:** |
|
||||||
|
|
||||||
This first UI quest is a series of exercises to practice colors, moodboards, typography and replicate screens on Figma! |
|
||||||
|
|
||||||
**Instructions:** |
**Instructions:** |
||||||
|
|
||||||
Copy these images on Figma |
Copy these images on Figma |
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 9.0 KiB |
Before Width: | Height: | Size: 7.8 KiB After Width: | Height: | Size: 7.8 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
@ -0,0 +1,12 @@ |
|||||||
|
#### Audit |
||||||
|
|
||||||
|
###### Is there a Figma file? |
||||||
|
###### Do the designed screens designed match the images? |
||||||
|
###### Do all layers have a name and belong to a group of graphic elements? |
||||||
|
|
||||||
|
|
||||||
|
![Example](WatchCK.png) |
||||||
|
|
||||||
|
###### Are there 2 pages: one for the screen and one with the symbols? |
||||||
|
###### Is the overlay done with transparency? |
||||||
|
###### Was the mask was used to change the shape of the imported image? |
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
@ -1,13 +1,5 @@ |
|||||||
# UI V - Ex 2 - Recommendations |
# UI V - Ex 2 - Recommendations |
||||||
|
|
||||||
**Context:** |
|
||||||
|
|
||||||
Welcome to this very last quest! |
|
||||||
|
|
||||||
The point is to take on the role of a UX auditor. You’ll be asked to make the audit of a website or an app, and then to write a series of recommendations to improve it. |
|
||||||
|
|
||||||
Let’s be critical, creative and impactful! |
|
||||||
|
|
||||||
**Instructions:** |
**Instructions:** |
||||||
|
|
||||||
Based on the audit you made in Ex.1, write a set of 3 to 6 recommendations to improve heuristics and usability. |
Based on the audit you made in Ex.1, write a set of 3 to 6 recommendations to improve heuristics and usability. |
@ -1,14 +1,5 @@ |
|||||||
# UI III - Ex 4 - Accessibility (App) |
# UI III - Ex 4 - Accessibility (App) |
||||||
|
|
||||||
**Context:** |
|
||||||
|
|
||||||
Welcome to the 3rd quest of UI. |
|
||||||
|
|
||||||
In this series of exercises, you’ll be asked to open your eyes and collect graphic elements from various websites. You’ll see grids across screens, multi state buttons, how to make a design accessible for all, breadcrumbs, toggle buttons, radio buttons, calendar, time picker with 2 main goals: |
|
||||||
|
|
||||||
- Enrich your graphic general knowledge |
|
||||||
- Detect consistency, that helps users understand a digital product at the first glance. |
|
||||||
|
|
||||||
**Instructions:** |
**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. |
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. |
@ -1,14 +1,5 @@ |
|||||||
# UI III - Ex 3 - Accessibility (website) |
# UI III - Ex 3 - Accessibility (website) |
||||||
|
|
||||||
**Context:** |
|
||||||
|
|
||||||
Welcome to the 3rd quest of UI. |
|
||||||
|
|
||||||
In this series of exercises, you’ll be asked to open your eyes and collect graphic elements from various websites. You’ll see grids across screens, multi state buttons, how to make a design accessible for all, breadcrumbs, toggle buttons, radio buttons, calendar, time picker with 2 main goals: |
|
||||||
|
|
||||||
- Enrich your graphic general knowledge |
|
||||||
- Detect consistency, that helps users understand a digital product at the first glance. |
|
||||||
|
|
||||||
**Instructions:** |
**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. |
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. |
@ -0,0 +1,13 @@ |
|||||||
|
# UI III - Ex 5 - Breadbcrumbs |
||||||
|
|
||||||
|
**Instructions:** |
||||||
|
|
||||||
|
Browse the internet and find at least 5 different examples of breadcrumbs from websites or apps. |
||||||
|
|
||||||
|
**Deliverable:** |
||||||
|
|
||||||
|
- A PDF document extracted from a Figma file gathering 5 screenshots of breadcrumbs. |
||||||
|
|
||||||
|
**Resources:** |
||||||
|
|
||||||
|
- [What are breadcrumbs?](https://www.seoptimer.com/blog/breadcrumbs-website/) |
@ -0,0 +1,9 @@ |
|||||||
|
# UI III - Ex 8 - Calendars |
||||||
|
|
||||||
|
**Instructions:** |
||||||
|
|
||||||
|
Browse the internet and find at least 5 different examples of calendars from websites or apps. |
||||||
|
|
||||||
|
**Deliverable:** |
||||||
|
|
||||||
|
- A PDF document extracted from a Figma file gathering 5 screenshots of calendars. |
@ -1,14 +1,5 @@ |
|||||||
# UI III - Ex 11 - Consistency |
# UI III - Ex 11 - Consistency |
||||||
|
|
||||||
**Context:** |
|
||||||
|
|
||||||
Welcome to the 3rd quest of UI. |
|
||||||
|
|
||||||
In this series of exercises, you’ll be asked to open your eyes and collect graphic elements from various websites. You’ll see grids across screens, multi state buttons, how to make a design accessible for all, breadcrumbs, toggle buttons, radio buttons, calendar, time picker with 2 main goals: |
|
||||||
|
|
||||||
- Enrich your graphic general knowledge |
|
||||||
- Detect consistency, that helps users understand a digital product at the first glance. |
|
||||||
|
|
||||||
**Instructions:** |
**Instructions:** |
||||||
|
|
||||||
Pick a website or an app of your choice*. Highlight 5 signs of consistency across the pages. |
Pick a website or an app of your choice*. Highlight 5 signs of consistency across the pages. |
@ -1,14 +1,5 @@ |
|||||||
# UI III - Ex 10 - Micro-interactions |
# UI III - Ex 10 - Micro-interactions |
||||||
|
|
||||||
**Context:** |
|
||||||
|
|
||||||
Welcome to the 3rd quest of UI. |
|
||||||
|
|
||||||
In this series of exercises, you’ll be asked to open your eyes and collect graphic elements from various websites. You’ll see grids across screens, multi state buttons, how to make a design accessible for all, breadcrumbs, toggle buttons, radio buttons, calendar, time picker with 2 main goals: |
|
||||||
|
|
||||||
- Enrich your graphic general knowledge |
|
||||||
- Detect consistency, that helps users understand a digital product at the first glance. |
|
||||||
|
|
||||||
**Instructions:** |
**Instructions:** |
||||||
|
|
||||||
Browse the internet and find at least 5 different examples of feedback micro-interactions or micro-animations on websites or apps. |
Browse the internet and find at least 5 different examples of feedback micro-interactions or micro-animations on websites or apps. |
@ -1,14 +1,5 @@ |
|||||||
# UI III - Ex 2 - Multi state |
# UI III - Ex 2 - Multi state |
||||||
|
|
||||||
**Context:** |
|
||||||
|
|
||||||
Welcome to the 3rd quest of UI. |
|
||||||
|
|
||||||
In this series of exercises, you’ll be asked to open your eyes and collect graphic elements from various websites. You’ll see grids across screens, multi state buttons, how to make a design accessible for all, breadcrumbs, toggle buttons, radio buttons, calendar, time picker with 2 main goals: |
|
||||||
|
|
||||||
- Enrich your graphic general knowledge |
|
||||||
- Detect consistency, that helps users understand a digital product at the first glance. |
|
||||||
|
|
||||||
**Instructions**: |
**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! |
Go to [Nintendo.com](http://Nintendo.com) and observe the buttons and call to actions. When you hover or click on them, they change! |