mirror of https://github.com/01-edu/UX-UI.git
Agathe Pommery
2 years ago
34 changed files with 338 additions and 194 deletions
@ -1,12 +1,14 @@
|
||||
[Example here](https://www.figma.com/file/kzc8YNUZsPrcTNrdMt6aLX/UI-Challenge-I---UI-I-Ex-8) |
||||
#### Audit instructions |
||||
|
||||
Make sure |
||||
##### Make sure |
||||
|
||||
- The screen designed matches the image |
||||
- There are 2 pages: one for the screen and one with the symbols |
||||
###### The screen designed matches the image |
||||
###### There are 2 pages: one for the screen and one with the symbols |
||||
|
||||
 |
||||
|
||||
- The background is made with linear color function |
||||
###### The background is made with linear color function |
||||
|
||||
 |
||||
 |
||||
|
||||
[Example here](https://www.figma.com/file/kzc8YNUZsPrcTNrdMt6aLX/UI-Challenge-I---UI-I-Ex-8) |
||||
|
||||
@ -1,13 +1,16 @@
|
||||
[Example here](https://www.figma.com/file/7hv3wv2rUPRY0Sc3Dd7lZh/UI-I-Challenge---UI-Ex-11) |
||||
#### Audit instructions |
||||
|
||||
Make sure: |
||||
##### Make sure: |
||||
|
||||
- The screen designed matches the image |
||||
- All layers have a name and belong to a group of graphic elements |
||||
###### The screen designed matches the image |
||||
###### All layers have a name and belong to a group of graphic elements |
||||
|
||||
|
||||
 |
||||
|
||||
- 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 |
||||
###### 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 |
||||
|
||||
|
||||
[Example here](https://www.figma.com/file/7hv3wv2rUPRY0Sc3Dd7lZh/UI-I-Challenge---UI-Ex-11) |
||||
|
||||
@ -1,7 +1,9 @@
|
||||
Make sure |
||||
#### Audit instructions |
||||
|
||||
- There are screenshots of the 7 pages or screens |
||||
- The colors match with the ones from the screens |
||||
- There are color codes |
||||
##### Make sure |
||||
|
||||
[Exercise completed](https://www.figma.com/file/9YVlgVGYdg4fTyWUsDLi7c/UI-I---Ex-2?node-id=3%3A8) |
||||
###### 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) |
||||
|
||||
@ -1,19 +1,48 @@
|
||||
#### Audit instructions |
||||
|
||||
|
||||
[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 : |
||||
Here are examples of combinations on websites. |
||||
|
||||
##### 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/) |
||||
|
||||
- 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/) |
||||
##### Split complementary examples: |
||||
|
||||
- Analogous examples: -[https://www.natuurenmilieu.nl/](https://www.natuurenmilieu.nl/) -[https://campesinorum.com/](https://campesinorum.com/) -[https://www.lobster.es/](https://www.lobster.es/) |
||||
-[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/) |
||||
|
||||
- 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/) |
||||
##### Triadic examples |
||||
|
||||
- Split complementary examples: -[https://flythenest.io/en/](https://flythenest.io/en/) -[https://www.kineuphorics.com/](https://www.kineuphorics.com/) -[https://www.ma-tea.de/](https://www.ma-tea.de/) |
||||
-[https://normalnow.com/](https://normalnow.com/) |
||||
-[https://brainbakery.com/en/](https://brainbakery.com/en/) |
||||
-[https://www.barkbox.com/](https://www.barkbox.com/) |
||||
|
||||
- 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 examples |
||||
|
||||
- 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/) |
||||
-[https://www.airtable.com/](https://www.airtable.com/) |
||||
-[https://calendar.google.com/](https://calendar.google.com/) |
||||
-[https://www.ebay.com/](https://www.ebay.com/) |
||||
|
||||
 |
||||
|
||||
@ -1,9 +1,14 @@
|
||||
To have a good moodboard, you need: |
||||
#### Audit instructions |
||||
|
||||
- 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 |
||||
##### To have a good moodboard, make sure there are: |
||||
|
||||
- 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) |
||||
###### 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) |
||||
|
||||
@ -1,19 +1,53 @@
|
||||
-[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 |
||||
#### Audit instructions |
||||
|
||||
##### Make sure the following typographies are found: |
||||
|
||||
|
||||
-[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 |
||||
###### 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 |
||||
|
||||
@ -1,13 +1,16 @@
|
||||
[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 |
||||
#### Audit instructions |
||||
|
||||
##### 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 |
||||
|
||||
|
||||
[Example here](https://www.figma.com/file/SbQMPjfLOzg92g8YZFlrRh/UI-I---Ex-5) |
||||
@ -1,11 +1,15 @@
|
||||
[Example here](https://www.figma.com/file/LRgyZDBVgIq3PzjewTKI2c/UI-Challenge-I---UI-I-Ex-7) |
||||
#### Audit instructions |
||||
|
||||
Open the Figma file and inspect it. Make sure: |
||||
##### Open the Figma file and inspect it. |
||||
|
||||
- There are two half circles as this one. |
||||
##### Make sure: |
||||
|
||||
###### There are two half circles as this one. |
||||
|
||||
 |
||||
|
||||
- All the layers are labeled and organized in groups |
||||
###### All the layers are labeled and organized in groups |
||||
|
||||
 |
||||
 |
||||
|
||||
[Example here](https://www.figma.com/file/LRgyZDBVgIq3PzjewTKI2c/UI-Challenge-I---UI-I-Ex-7) |
||||
@ -1,13 +1,15 @@
|
||||
[Example here](https://www.figma.com/file/qBYmuatLnhRrWMGlf5vMau/UI-I-Challenge---UI-Ex-10) |
||||
#### Audit instructions |
||||
|
||||
Make sure: |
||||
##### Make sure: |
||||
|
||||
- The screen designed matches the image |
||||
- All layers have a name and belong to a group of graphic elements |
||||
###### The screen designed matches the image |
||||
###### All layers have a name and belong to a group of graphic elements |
||||
|
||||
|
||||
 |
||||
|
||||
- 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 |
||||
###### 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 |
||||
|
||||
[Example here](https://www.figma.com/file/qBYmuatLnhRrWMGlf5vMau/UI-I-Challenge---UI-Ex-10) |
||||
@ -1,26 +1,28 @@
|
||||
[Example here](https://www.figma.com/file/D6HC3Su97UQPfGIOmG0Yll/UI-Challenge-I---UI-Ex-9) |
||||
#### Audit instructions |
||||
|
||||
Make sure: |
||||
##### Make sure: |
||||
|
||||
- The screen designed matches the image |
||||
- All layers have a name and belong to a group of graphic elements |
||||
###### The screen designed matches the image |
||||
###### All layers have a name and belong to a group of graphic elements |
||||
|
||||
 |
||||
|
||||
|
||||
- There are 2 pages: one for the screen and one with the symbols |
||||
###### There are 2 pages: one for the screen and one with the symbols |
||||
|
||||
|
||||
 |
||||
|
||||
|
||||
- Masks were used to change the shape of the image |
||||
###### Masks were used to change the shape of the image |
||||
|
||||
 |
||||
|
||||
|
||||
- The overlay is done with transparency |
||||
###### The overlay is done with transparency |
||||
|
||||
 |
||||
|
||||
 |
||||
 |
||||
|
||||
[Example here](https://www.figma.com/file/D6HC3Su97UQPfGIOmG0Yll/UI-Challenge-I---UI-Ex-9) |
||||
|
||||
@ -1,5 +1,9 @@
|
||||
Make sure |
||||
#### Audit instructions |
||||
|
||||
- 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) |
||||
##### 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) |
||||
|
||||
@ -1,5 +1,9 @@
|
||||
Make sure |
||||
#### Audit instructions |
||||
|
||||
- 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) |
||||
##### 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) |
||||
|
||||
@ -1,5 +1,9 @@
|
||||
Make sure |
||||
#### Audit instructions |
||||
|
||||
- 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) |
||||
##### 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) |
||||
|
||||
@ -1,12 +1,14 @@
|
||||
Make sure there is: |
||||
#### Audit instructions |
||||
|
||||
- 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 |
||||
##### 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 |
||||
@ -1,12 +1,14 @@
|
||||
Make sure there is: |
||||
#### Audit instructions |
||||
|
||||
- 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 |
||||
##### 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 |
||||
@ -1,5 +1,13 @@
|
||||
Make sure: |
||||
#### Audit instructions |
||||
|
||||
- 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) |
||||
##### 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) |
||||
|
||||
@ -1,7 +1,7 @@
|
||||
Make sure: |
||||
##### 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) |
||||
###### 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 |
||||
|
||||
@ -1,7 +1,9 @@
|
||||
Make sure: |
||||
#### Audit instructions |
||||
|
||||
- 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 |
||||
##### 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/) |
||||
@ -1,7 +1,9 @@
|
||||
Make sure: |
||||
#### Audit instructions |
||||
|
||||
- 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 |
||||
##### 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/) |
||||
@ -1,7 +1,9 @@
|
||||
Make sure: |
||||
#### Audit instructions |
||||
|
||||
- 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 |
||||
##### 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/) |
||||
@ -1,7 +1,9 @@
|
||||
Make sure: |
||||
#### Audit instructions |
||||
|
||||
- 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 |
||||
##### 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/) |
||||
@ -1,7 +1,9 @@
|
||||
Make sure: |
||||
#### Audit instructions |
||||
|
||||
- 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 |
||||
##### 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/) |
||||
@ -1,8 +1,10 @@
|
||||
Make sure there is: |
||||
#### Audit instructions |
||||
|
||||
- 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 |
||||
##### 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 |
||||
@ -1 +1,3 @@
|
||||
Make sure there are 5 screens with style, colors, buttons, text that match with the initial wireframes. |
||||
#### Audit instructions |
||||
|
||||
##### Make sure there are 5 screens with style, colors, buttons, text that match with the initial wireframes. |
||||
@ -1,6 +1,8 @@
|
||||
Make sure: |
||||
#### Audit instructions |
||||
|
||||
- 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 |
||||
##### 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 |
||||
@ -1,6 +1,8 @@
|
||||
Make sure there are: |
||||
#### Audit instructions |
||||
|
||||
- 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. |
||||
##### 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. |
||||
@ -1,4 +1,6 @@
|
||||
Make sure: |
||||
#### Audit instructions |
||||
|
||||
- The chart is complete |
||||
- The 5 steps are included in the report |
||||
##### Make sure: |
||||
|
||||
###### The chart is complete |
||||
###### The 5 steps are included in the report |
||||
Loading…
Reference in new issue