@ -0,0 +1,28 @@ |
|||||||
|
## Atomic Design system library |
||||||
|
|
||||||
|
### Instructions |
||||||
|
|
||||||
|
Copy 10 elements from easyJet design system, including: |
||||||
|
|
||||||
|
- atoms. |
||||||
|
- molecules. |
||||||
|
- organisms. |
||||||
|
|
||||||
|
**Deliverable:** |
||||||
|
|
||||||
|
- A Figma file including 10 elements from easyJet design system . |
||||||
|
|
||||||
|
Don't forget to: |
||||||
|
|
||||||
|
- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”. |
||||||
|
- Add a title within the file. |
||||||
|
|
||||||
|
**Tips:** |
||||||
|
|
||||||
|
- You can use Avenir Book instead of easyJet’s font. |
||||||
|
- Explore Noun Project to get icons. |
||||||
|
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details! |
||||||
|
|
||||||
|
**Resources:** |
||||||
|
|
||||||
|
- [Atomic Design Methodology](https://atomicdesign.bradfrost.com/chapter-2/) |
@ -1,31 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Is the deliverable in the correct format (Figma)? |
|
||||||
###### Is there a title within the document? |
|
||||||
###### Is the document clear, simple and easy to read? |
|
||||||
###### Are there 4 pages? |
|
||||||
|
|
||||||
#### On page 1, |
|
||||||
###### Is there a template? |
|
||||||
###### Is there an organism? |
|
||||||
###### Is there a molecule? |
|
||||||
###### Is there an atom? |
|
||||||
|
|
||||||
#### On page 2, |
|
||||||
###### Is there a template? |
|
||||||
###### Is there an organism? |
|
||||||
###### Is there a molecule? |
|
||||||
###### Is there an atom? |
|
||||||
|
|
||||||
#### On page 3, |
|
||||||
###### Is there a template? |
|
||||||
###### Is there an organism? |
|
||||||
###### Is there a molecule? |
|
||||||
###### Is there an atom? |
|
||||||
|
|
||||||
#### On page 4, |
|
||||||
###### Is there a template? |
|
||||||
###### Is there an organism? |
|
||||||
###### Is there a molecule? |
|
||||||
###### Is there an atom? |
|
@ -1,25 +0,0 @@ |
|||||||
# UI II - Ex 3 - Design system library |
|
||||||
|
|
||||||
**Instructions:** |
|
||||||
|
|
||||||
Copy 10 elements from easyJet design system, including |
|
||||||
|
|
||||||
- atoms |
|
||||||
- molecules |
|
||||||
- organisms |
|
||||||
|
|
||||||
**Deliverable:** |
|
||||||
|
|
||||||
- A Figma file including 10 elements from easyJet design system |
|
||||||
- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”. |
|
||||||
- Add a title within the file. |
|
||||||
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration on canva.com but don’t overload your design with too much details! |
|
||||||
|
|
||||||
**Tips:** |
|
||||||
|
|
||||||
- You can use Avenir Book instead of easyJet’s font |
|
||||||
- Explore Noun Project to get icons |
|
||||||
|
|
||||||
**Resources:** |
|
||||||
|
|
||||||
- [Atomic Design Methodology](https://atomicdesign.bradfrost.com/chapter-2/) |
|
@ -1,10 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Is the deliverable in the correct format (Figma)? |
|
||||||
###### Is there a title within the document? |
|
||||||
###### Is the document clear, simple and easy to read? |
|
||||||
###### Are there at least 10 elements from easyJet? |
|
||||||
###### Is there at least one atom? |
|
||||||
###### Is there at least one molecule? |
|
||||||
###### Is there at least one organism? |
|
@ -1,18 +1,111 @@ |
|||||||
#### Audit |
#### Browsing |
||||||
|
|
||||||
|
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
|
###### Are the deliverables in the correct format (Figma)? |
||||||
|
|
||||||
|
###### Is there a title within the document? |
||||||
|
|
||||||
|
###### Is the document clear, simple and easy to read? |
||||||
|
|
||||||
|
###### Are there 4 pages? |
||||||
|
|
||||||
|
##### Check the pages 1, 2, 3 and 4. |
||||||
|
|
||||||
|
###### Is there a template in all of them? |
||||||
|
|
||||||
|
###### Is there an organism in all of them? |
||||||
|
|
||||||
|
###### Is there a molecule in all of them? |
||||||
|
|
||||||
|
###### Is there an atom in all of them? |
||||||
|
|
||||||
|
#### Material Design |
||||||
|
|
||||||
|
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
|
###### Is the deliverable in the correct format (Figma)? |
||||||
|
|
||||||
|
###### Is there a title within the document? |
||||||
|
|
||||||
|
###### Is the document clear, simple and easy to read? |
||||||
|
|
||||||
|
###### Are the layers correctly indicated with numbers? |
||||||
|
|
||||||
|
#### Atomic Design system library |
||||||
|
|
||||||
|
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
|
###### Is the deliverable in the correct format (Figma)? |
||||||
|
|
||||||
|
###### Is there a title within the document? |
||||||
|
|
||||||
|
###### Is the document clear, simple and easy to read? |
||||||
|
|
||||||
|
###### Are there at least 10 elements from easyJet? |
||||||
|
|
||||||
|
###### Is there at least one atom? |
||||||
|
|
||||||
|
###### Is there at least one molecule? |
||||||
|
|
||||||
|
###### Is there at least one organism? |
||||||
|
|
||||||
|
#### Library for climbing addicts |
||||||
|
|
||||||
|
###### Is there a zip folder labeled as “ProjectTitle_Name_FirstName”? |
||||||
|
|
||||||
|
###### Are the deliverables labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
|
###### Are the deliverables in the correct format? |
||||||
|
|
||||||
|
###### Are the documents clear, simple and easy to read? |
||||||
|
|
||||||
|
###### Is there a moodboard for a climbing group? |
||||||
|
|
||||||
|
###### Are there pictures? |
||||||
|
|
||||||
|
###### Are there 2 to 3 main colors? |
||||||
|
|
||||||
|
###### Is there typography? |
||||||
|
|
||||||
|
###### Is there a library? |
||||||
|
|
||||||
|
###### Are there at least 20 graphic design elements (including the one below)? |
||||||
|
|
||||||
|
###### Is there at least one atom? |
||||||
|
|
||||||
|
###### Is there at least one molecule? |
||||||
|
|
||||||
|
###### Is there at least one organism? |
||||||
|
|
||||||
|
###### Is there at least 5 multistate elements? |
||||||
|
|
||||||
|
#### Library for a dating app |
||||||
|
|
||||||
|
###### Is there a zip folder labeled as “ProjectTitle_Name_FirstName”? |
||||||
|
|
||||||
###### Is there a zip folder? |
|
||||||
###### Is the zip folder labeled as “ProjectTitle_Name_FirstName”? |
|
||||||
###### Are there all the deliverables indicated in the instructions? |
|
||||||
###### Are the deliverables labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
###### Are the deliverables labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
###### Are the deliverables in the correct format? |
###### Are the deliverables in the correct format? |
||||||
|
|
||||||
###### Are the documents clear, simple and easy to read? |
###### Are the documents clear, simple and easy to read? |
||||||
|
|
||||||
###### Is there a moodboard for a dating app? |
###### Is there a moodboard for a dating app? |
||||||
|
|
||||||
###### Are there pictures? |
###### Are there pictures? |
||||||
|
|
||||||
###### Are there 2 to 3 main colors? |
###### Are there 2 to 3 main colors? |
||||||
|
|
||||||
###### Is there typography? |
###### Is there typography? |
||||||
|
|
||||||
###### Is there a library? |
###### Is there a library? |
||||||
###### Are there at least graphic design 20 elements (including the ones below)? |
|
||||||
|
###### Are there at least 20 graphic design elements (including the ones below)? |
||||||
|
|
||||||
###### Is there at least one atom? |
###### Is there at least one atom? |
||||||
|
|
||||||
###### Is there at least one molecule? |
###### Is there at least one molecule? |
||||||
|
|
||||||
###### Is there at least one organism? |
###### Is there at least one organism? |
||||||
|
|
||||||
###### Is there at least 5 multistate elements? |
###### Is there at least 5 multistate elements? |
@ -1,18 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is there a zip folder? |
|
||||||
###### Is the zip folder labeled as “ProjectTitle_Name_FirstName”? |
|
||||||
###### Are there all the deliverables indicated in the instructions? |
|
||||||
###### Are the deliverables labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Are the deliverables in the correct format? |
|
||||||
###### Are the documents clear, simple and easy to read? |
|
||||||
###### Is there a moodboard for a climbing group? |
|
||||||
###### Are there pictures? |
|
||||||
###### Are there 2 to 3 main colors? |
|
||||||
###### Is there typography? |
|
||||||
###### Is there a library? |
|
||||||
###### Are there at least graphic design 20 elements (including the one below)? |
|
||||||
###### Is there at least one atom? |
|
||||||
###### Is there at least one molecule? |
|
||||||
###### Is there at least one organism? |
|
||||||
###### Is there at least 5 multistate elements? |
|
@ -1,8 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Is the deliverable in the correct format (Figma)? |
|
||||||
###### Is there a title within the document? |
|
||||||
###### Is the document clear, simple and easy to read? |
|
||||||
###### Are the layers are indicated with numbers? |
|
||||||
|
|
@ -1,10 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Is the deliverable in the correct format (Figma)? |
|
||||||
###### Is there a title within the document? |
|
||||||
###### Is the document clear, simple and easy to read? |
|
||||||
###### Is there a starting screen? |
|
||||||
###### Is there an ending screen? |
|
||||||
###### Do all the connections between screens work? |
|
||||||
###### Are there multistate buttons which change every time you click somewhere? |
|
@ -1,8 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Is the deliverable in the correct format (Figma)? |
|
||||||
###### Is there a title within the document? |
|
||||||
###### Is the document clear, simple and easy to read? |
|
||||||
###### Are there 5 screens? |
|
||||||
###### Do style, colors, buttons, text match with the initial wireframes? |
|
@ -1,11 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Is the deliverable in the correct format (Figma)? |
|
||||||
###### Is there a title within the document? |
|
||||||
###### Is the document clear, simple and easy to read? |
|
||||||
###### Are there at least graphic design 30 elements |
|
||||||
###### Are there at least 5 atoms? |
|
||||||
###### Are there at least 5 molecules? |
|
||||||
###### Are there at least 5 organisms? |
|
||||||
###### Are there at least 10 multistate elements? |
|
@ -1,12 +1,95 @@ |
|||||||
#### Audit |
#### Styleguide |
||||||
|
|
||||||
|
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
|
###### Is the deliverable in the correct format (Figma)? |
||||||
|
|
||||||
|
###### Is there a title within the document? |
||||||
|
|
||||||
|
###### Is the document clear, simple and easy to read? |
||||||
|
|
||||||
|
###### Does the moodboard include pictures? |
||||||
|
|
||||||
|
###### Does the moodboard include 2 to 3 main colors? |
||||||
|
|
||||||
|
###### Is there typography for a title? |
||||||
|
|
||||||
|
###### Is there typography for a description or subtitle? |
||||||
|
|
||||||
|
###### Is there typography for some content? |
||||||
|
|
||||||
|
###### Is there typography for a button? |
||||||
|
|
||||||
|
#### Design system library |
||||||
|
|
||||||
|
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
|
###### Is the deliverable in the correct format (Figma)? |
||||||
|
|
||||||
|
###### Is there a title within the document? |
||||||
|
|
||||||
|
###### Is the document clear, simple and easy to read? |
||||||
|
|
||||||
|
###### Are there at least 30 graphic design elements? |
||||||
|
|
||||||
|
###### Are there at least 5 atoms? |
||||||
|
|
||||||
|
###### Are there at least 5 molecules? |
||||||
|
|
||||||
|
###### Are there at least 5 organisms? |
||||||
|
|
||||||
|
###### Are there at least 10 multistate elements? |
||||||
|
|
||||||
|
#### Design screens |
||||||
|
|
||||||
|
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
|
###### Is the deliverable in the correct format (Figma)? |
||||||
|
|
||||||
|
###### Is there a title within the document? |
||||||
|
|
||||||
|
###### Is the document clear, simple and easy to read? |
||||||
|
|
||||||
|
###### Are there 5 screens? |
||||||
|
|
||||||
|
###### Do style, colors, buttons, text match with the initial wireframes? |
||||||
|
|
||||||
|
#### second Animation |
||||||
|
|
||||||
|
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
|
###### Is the deliverable in the correct format (Figma)? |
||||||
|
|
||||||
|
###### Is there a title within the document? |
||||||
|
|
||||||
|
###### Is the document clear, simple and easy to read? |
||||||
|
|
||||||
|
###### Can you confirm that this is a high-fidelity prototype? |
||||||
|
|
||||||
|
###### Is there a starting screen? |
||||||
|
|
||||||
|
###### Is there an ending screen? |
||||||
|
|
||||||
|
###### Do all the connections between screens work? |
||||||
|
|
||||||
|
###### Are there multistate buttons which change every time you click somewhere? |
||||||
|
|
||||||
|
#### Desirability testing |
||||||
|
|
||||||
###### Is there a zip folder? |
###### Is there a zip folder? |
||||||
###### Is the zip folder labeled as “ProjectTitle_Name_FirstName”? |
|
||||||
###### Are there all the deliverables indicated in the instructions? |
###### Is there a zip folder labeled as “ProjectTitle_Name_FirstName”? |
||||||
|
|
||||||
###### Are the deliverables labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
###### Are the deliverables labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
###### Are the deliverables in the correct format? |
|
||||||
###### Are the documents clear, simple and easy to read? |
###### Are the documents clear, simple and easy to read? |
||||||
|
|
||||||
###### Is there a desirability testing board with 25+ different adjectives? |
###### Is there a desirability testing board with 25+ different adjectives? |
||||||
|
|
||||||
###### Are there pictures from the desirability test? |
###### Are there pictures from the desirability test? |
||||||
|
|
||||||
###### Is there a PDF document with the outcomes of the desirability test? |
###### Is there a PDF document with the outcomes of the desirability test? |
||||||
|
|
||||||
|
##### Confirm if the outcome are consistent with the values. If they are just answer "YES" to the next question. |
||||||
|
|
||||||
###### If the outcomes are not consistent with the values, are there 3 suggestions on how to make the moodboard and design library evolve? |
###### If the outcomes are not consistent with the values, are there 3 suggestions on how to make the moodboard and design library evolve? |
@ -1,13 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Is the deliverable in the correct format (Figma)? |
|
||||||
###### Is there a title within the document? |
|
||||||
###### Is the document clear, simple and easy to read? |
|
||||||
###### Does the moodboard include pictures? |
|
||||||
###### Does the moodboard include 2 to 3 main colors? |
|
||||||
###### Is there typography for a title? |
|
||||||
###### Is there typography for a description or subtitle? |
|
||||||
###### Is there typography for some content? |
|
||||||
###### Is there typography for a button? |
|
||||||
|
|
@ -1,7 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Is the deliverable in the correct format (Figma)? |
|
||||||
###### Is there a title within the document? |
|
||||||
###### Is the document clear, simple and easy to read? |
|
||||||
###### Do the color codes match with the extracted colors ? You can use [Hex Color Codes](https://hexcolorcodes.org/) |
|
@ -1,12 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Is the deliverable in the correct format (Figma)? |
|
||||||
###### Is there a title within the document? |
|
||||||
###### Is the document clear, simple and easy to read? |
|
||||||
###### Do the websites or apps chosen 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? |
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,9 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Is the deliverable in the correct format (Figma)? |
|
||||||
###### Is there a title within the document? |
|
||||||
###### Is the document clear, simple and easy to read? |
|
||||||
###### 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? |
|
@ -1,29 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is there a zip folder? |
|
||||||
###### Is the zip folder labeled as “ProjectTitle_Name_FirstName”? |
|
||||||
###### Are there all the deliverables indicated in the instructions? |
|
||||||
###### Are the deliverables labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Are the deliverables in the correct format? |
|
||||||
###### Are the documents clear, simple and easy to read? |
|
||||||
|
|
||||||
###### 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) |
|
||||||
|
|
@ -1,27 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Is the deliverable in the correct format (Figma)? |
|
||||||
###### Is there a title within the document? |
|
||||||
###### Is the document clear, simple and easy to read? |
|
||||||
|
|
||||||
###### 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,16 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Is the deliverable in the correct format (Figma)? |
|
||||||
###### Is there a title within the document? |
|
||||||
###### Is the document clear, simple and easy to read? |
|
||||||
###### 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? |
|
@ -1,26 +1,31 @@ |
|||||||
# UI I - Ex 11 - UI Challenge - Bitcoin Dashboard |
## UI Challenge - Bitcoin Dashboard |
||||||
|
|
||||||
**Instructions:** |
### Instructions |
||||||
|
|
||||||
|
Create this image on Figma: |
||||||
|
|
||||||
Copy this image on Figma |
|
||||||
![Dashboard](Dashboard.png) |
![Dashboard](Dashboard.png) |
||||||
|
|
||||||
|
- Make sure: |
||||||
|
- You use symbols and variants (1 page for the Symbols one for the screen). |
||||||
|
- 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. |
||||||
|
|
||||||
**Deliverable:** |
**Deliverable:** |
||||||
|
|
||||||
- A Figma file with a copy of the image with Figma elements |
- A Figma file with a copy of the image with Figma elements. |
||||||
- Make sure: |
|
||||||
- You use symbols and variants |
Don't forget to: |
||||||
- 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 |
|
||||||
- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”. |
- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”. |
||||||
- Add a title within the file. |
- Add a title within the file. |
||||||
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration on canva.com but don’t overload your design with too much details! |
|
||||||
|
|
||||||
**Tips:** |
**Tips:** |
||||||
|
|
||||||
- Fonts: Avenir |
- Fonts: Avenir. |
||||||
- The frame is a desktop 1440 x 1024 |
- 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) |
- [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 |
- You can use existing Libraries by browsing the Figma community resources. |
||||||
|
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details! |
||||||
|
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 |
@ -1,16 +1,247 @@ |
|||||||
#### Audit |
#### Find the Colors |
||||||
|
|
||||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
|
###### Is the deliverable in the correct format (Figma)? |
||||||
|
|
||||||
|
###### Is there a title within the document? |
||||||
|
|
||||||
|
###### Is the document clear, simple and easy to read? |
||||||
|
|
||||||
|
###### Are there 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? |
||||||
|
|
||||||
|
#### Color codes |
||||||
|
|
||||||
|
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
|
###### Is the deliverable in the correct format (Figma)? |
||||||
|
|
||||||
|
###### Is there a title within the document? |
||||||
|
|
||||||
|
###### Is the document clear, simple and easy to read? |
||||||
|
|
||||||
|
###### Does the file include screenshots of the main page, URL, extracted colors and the corresponding color codes? |
||||||
|
|
||||||
|
###### Do the color codes match with the extracted colors ? You can use [Hex Color Codes](https://hexcolorcodes.org/) to confirm. |
||||||
|
|
||||||
|
#### Color combinations |
||||||
|
|
||||||
|
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
|
###### Is the deliverable in the correct format (Figma)? |
||||||
|
|
||||||
|
###### Is there a title within the document? |
||||||
|
|
||||||
|
###### Is the document clear, simple and easy to read? |
||||||
|
|
||||||
|
###### Do the websites or apps chosen 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? |
||||||
|
|
||||||
|
#### Moodboard |
||||||
|
|
||||||
|
###### Is there a zip folder labeled as “ProjectTitle_Name_FirstName”? |
||||||
|
|
||||||
|
###### Are the deliverables labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
|
###### Are the deliverables in the correct format? |
||||||
|
|
||||||
|
###### Are the documents clear, simple and easy to read? |
||||||
|
|
||||||
|
##### For each Moodboard 1, 2, 3 and 4 check the folowing: |
||||||
|
|
||||||
|
###### Are there several pictures that are graphically consistent? |
||||||
|
|
||||||
|
###### Are there 2 to 3 main colors that stand out? |
||||||
|
|
||||||
|
###### Is there only one color code per color (RGB, Hex, or HSB)? |
||||||
|
|
||||||
|
###### Does the color code match the designated color? [Use this tool](http://onlinewebtool.com/colorpicker.php) |
||||||
|
|
||||||
|
#### Typography |
||||||
|
|
||||||
|
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
|
###### Is the deliverable in the correct format (Figma)? |
||||||
|
|
||||||
|
###### Is there a title within the document? |
||||||
|
|
||||||
|
###### Is the document clear, simple and easy to read? |
||||||
|
|
||||||
|
###### 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? |
||||||
|
|
||||||
|
#### Typography Moodboard |
||||||
|
|
||||||
|
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
|
###### Is the deliverable in the correct format (Figma)? |
||||||
|
|
||||||
|
###### Is there a title within the document? |
||||||
|
|
||||||
|
###### Is the document clear, simple and easy to read? |
||||||
|
|
||||||
|
##### For each Moodboard 1, 2, 3 and 4 check the folowing: |
||||||
|
|
||||||
|
###### Are there 4 different fonts (one for each moodboard)? |
||||||
|
|
||||||
|
###### Is there a typography for a title? |
||||||
|
|
||||||
|
###### Is there a typography for a button? |
||||||
|
|
||||||
|
###### Is there a typography for a description? |
||||||
|
|
||||||
|
###### Is there a typography for the text? |
||||||
|
|
||||||
|
#### UI Challenge Timer |
||||||
|
|
||||||
|
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
|
###### Is the deliverable in the correct format (Figma)? |
||||||
|
|
||||||
|
###### Is there a title within the document? |
||||||
|
|
||||||
|
###### Is the document clear, simple and easy to read? |
||||||
|
|
||||||
|
###### Are there two half circles as this one? |
||||||
|
|
||||||
|
![Example](Timer2.png) |
||||||
|
|
||||||
|
###### Is there a 'PUSH UP' text and back arrow like in the image? |
||||||
|
|
||||||
|
###### Is there a Stop button with the text underneath? |
||||||
|
|
||||||
|
###### Is there a Reset button with the text underneath? |
||||||
|
|
||||||
|
###### Is there a gradient background behind the number 5? |
||||||
|
|
||||||
|
###### Are all the layers labeled and organized in groups? |
||||||
|
|
||||||
|
![Example](Timer1.png) |
||||||
|
|
||||||
|
#### UI Challenge Watches |
||||||
|
|
||||||
|
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
###### Is the deliverable in the correct format (Figma)? |
###### Is the deliverable in the correct format (Figma)? |
||||||
|
|
||||||
###### Is there a title within the document? |
###### Is there a title within the document? |
||||||
|
|
||||||
###### Is the document clear, simple and easy to read? |
###### Is the document clear, simple and easy to read? |
||||||
|
|
||||||
|
###### Do the designed screens 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 used to change the shape of the imported image? |
||||||
|
|
||||||
|
#### UI Challenge Flight |
||||||
|
|
||||||
|
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
|
###### Is the deliverable in the correct format (Figma)? |
||||||
|
|
||||||
|
###### Is there a title within the document? |
||||||
|
|
||||||
|
###### Is the document clear, simple and easy to read? |
||||||
|
|
||||||
###### Does the designed screen match the image? |
###### Does the designed screen match the image? |
||||||
|
|
||||||
###### Do all layers have a name and belong to a group of graphic elements? |
###### 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) |
||||||
|
|
||||||
|
#### UI Challenge - Spotify |
||||||
|
|
||||||
|
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
|
###### Is the deliverable in the correct format (Figma)? |
||||||
|
|
||||||
|
###### Is there a title within the document? |
||||||
|
|
||||||
|
###### Is the document clear, simple and easy to read? |
||||||
|
|
||||||
|
###### 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 named and organized? |
||||||
|
|
||||||
|
###### Is there Apple Design System (head bar)? |
||||||
|
|
||||||
|
#### UI Challenge Bitcoin Dashboard |
||||||
|
|
||||||
|
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
|
###### Is the deliverable in the correct format (Figma)? |
||||||
|
|
||||||
|
###### Is there a title within the document? |
||||||
|
|
||||||
|
###### Is the document clear, simple and easy to read? |
||||||
|
|
||||||
|
###### Does the designed screen match the image? |
||||||
|
|
||||||
|
###### Do all layers have a name and belong to a group of graphic elements? |
||||||
|
|
||||||
![Example](DashboardCK1.png) |
![Example](DashboardCK1.png) |
||||||
|
|
||||||
###### Are there 2 pages: one for the screen and one with the symbols? |
###### Are there 2 pages: one for the screen and one with the symbols? |
||||||
|
|
||||||
###### Is the overlay done with transparency? |
###### Is the overlay done with transparency? |
||||||
|
|
||||||
###### Was the mask function used to change the shape of the image? |
###### Was the mask function used to change the shape of the image? |
||||||
##### Was the linear color function used? |
|
||||||
|
###### Was the linear color function used? |
||||||
|
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: 33 KiB After Width: | Height: | Size: 33 KiB |
Before Width: | Height: | Size: 72 KiB After Width: | Height: | Size: 72 KiB |
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
@ -1,25 +1,29 @@ |
|||||||
# UI I - Ex 9 - UI Challenge - Flight |
## UI Challenge - Flight |
||||||
|
|
||||||
**Instructions**: |
### Instructions |
||||||
|
|
||||||
Copy this image on Figma |
Create this image on Figma: |
||||||
|
|
||||||
![Flight](Flight.png) |
![Flight](Flight.png) |
||||||
|
|
||||||
|
- Make sure that: |
||||||
|
- You use symbols and variants (1 page for the Symbols). |
||||||
|
- All you layers are named and organized. |
||||||
|
- You use overlays. |
||||||
|
- You use masks to change the shape of an imported image (Amsterdam, Maldives, New Delhi, Sydney icons). |
||||||
|
|
||||||
**Deliverable:** |
**Deliverable:** |
||||||
|
|
||||||
- A Figma file with a copy of the image with Figma elements |
- A Figma file with a copy of the image with Figma elements. |
||||||
- Make sure: |
|
||||||
- You use symbols and variants |
Don't forget to: |
||||||
- 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) |
|
||||||
- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”. |
- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”. |
||||||
- Add a title within the file. |
- Add a title within the file. |
||||||
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration on canva.com but don’t overload your design with too much details! |
|
||||||
|
|
||||||
**Tips:** |
**Tips:** |
||||||
|
|
||||||
- Font: Roboto Bold, Normal, Black with 0 to 7% space between letters |
- Font: Roboto Bold, Normal, Black with 0 to 7% space between letters. |
||||||
- The frame is desktop 1440 x 1048 px |
- 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) |
- [Figma article about Symbols and Variants](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants). |
||||||
|
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details! |
||||||
|
@ -1,28 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Is the deliverable in the correct format (Figma)? |
|
||||||
###### Is there a title within the document? |
|
||||||
###### Is the document clear, simple and easy to read? |
|
||||||
###### 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,25 +1,31 @@ |
|||||||
# UI I - Ex 10 - UI Challenge - Spotify |
## UI Challenge - Spotify |
||||||
|
|
||||||
**Instructions:** |
### Instructions |
||||||
|
|
||||||
|
Create this image on Figma: |
||||||
|
|
||||||
Copy this image on Figma |
|
||||||
![Spotify](Spotify.jpg) |
![Spotify](Spotify.jpg) |
||||||
|
|
||||||
|
- 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). |
||||||
|
|
||||||
**Deliverable:** |
**Deliverable:** |
||||||
|
|
||||||
- A Figma file with a copy of the image with Figma elements |
- A Figma file with a copy of the image with Figma elements. |
||||||
- Please make sure you use: |
|
||||||
- Linear color background |
Don't forget to: |
||||||
- Groups |
|
||||||
- Named and organized layers |
- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as Doe_John_MidFiPrototype_05242024_V1”. |
||||||
- Apple design system (head bar) |
|
||||||
- Symbols and variants for the songs (1 page for the Symbols) |
|
||||||
- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”. |
|
||||||
- Add a title within the file. |
- Add a title within the file. |
||||||
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration on canva.com but don’t overload your design with too much details! |
|
||||||
|
|
||||||
**Tips:** |
**Tips:** |
||||||
|
|
||||||
- The font is GOTHAM |
- The font is GOTHAM. |
||||||
- The frame is iPhone 13 Pro Max 428 x 926 px |
- 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) |
- [Figma article about Symbols and Variants](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants). |
||||||
|
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details! |
||||||
|
@ -1,19 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Is the deliverable in the correct format (Figma)? |
|
||||||
###### Is there a title within the document? |
|
||||||
###### Is the document clear, simple and easy to read? |
|
||||||
###### 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)? |
|
@ -1,24 +1,29 @@ |
|||||||
# UI I - Ex 7 - UI Challenge - Timer |
## UI Challenge - Timer |
||||||
|
|
||||||
**Instructions:** |
### Instructions |
||||||
|
|
||||||
Copy this image on Figma. |
Create this image on Figma: |
||||||
![Timer](timer.png) |
|
||||||
|
|
||||||
|
![Timer](Timer.png) |
||||||
|
|
||||||
|
Please make sure you use: |
||||||
|
|
||||||
|
- 2 half circles to draw the circle around the timer. |
||||||
|
- Gradient to fill the main circle. |
||||||
|
- Groups. |
||||||
|
- Named layers. |
||||||
|
|
||||||
**Deliverable:** |
**Deliverable:** |
||||||
|
|
||||||
- A Figma file |
- A Figma file. |
||||||
- Please make sure you use: |
|
||||||
- 2 half circles to draw the circle around the timer |
Don't forget to: |
||||||
- Gradient to fill the main circle |
|
||||||
- Groups |
|
||||||
- Named layers |
|
||||||
- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”. |
- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”. |
||||||
- Add a title within the file. |
- Add a title within the file. |
||||||
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration on canva.com but don’t overload your design with too much details! |
|
||||||
|
|
||||||
**Tips:** |
**Tips:** |
||||||
|
|
||||||
- The font is RAJDANHI |
- The font is RAJDANHI. |
||||||
- The frame is Android 360 x 640px |
- The frame is Android 360 x 640px. |
||||||
|
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details! |
||||||
|
@ -1,16 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Is the deliverable in the correct format (Figma)? |
|
||||||
###### Is there a title within the document? |
|
||||||
###### Is the document clear, simple and easy to read? |
|
||||||
###### 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) |
|
@ -1,30 +1,33 @@ |
|||||||
# UI I - Ex 8 - UI Challenge - Watches |
## UI Challenge - Watches |
||||||
|
|
||||||
**Instructions:** |
### Instructions |
||||||
|
|
||||||
Copy these images on Figma |
Copy these images on Figma: |
||||||
|
|
||||||
![Screen1](Watch1.png) |
![Screen1](Watch1.png) |
||||||
![Screen2](Watch2.png) |
![Screen2](Watch2.png) |
||||||
![Screen3](Watch3.png) |
![Screen3](Watch3.png) |
||||||
![Screen4](Watch4.png) |
![Screen4](Watch4.png) |
||||||
|
|
||||||
|
- Make sure: |
||||||
|
- You use symbols and variants (1 page for the Symbols). |
||||||
|
- All your layers are named and organized. |
||||||
|
- You use overlays. |
||||||
|
- You use masks to change the shape of the imported image. |
||||||
|
|
||||||
**Deliverable:** |
**Deliverable:** |
||||||
|
|
||||||
- A Figma file with a copy of the image with Figma elements |
- A Figma file with a copy of the image with Figma elements. |
||||||
- Make sure: |
|
||||||
- You use symbols and variants |
Don't forget to: |
||||||
- All your layers are named and organized |
|
||||||
- You use overlays |
|
||||||
- You use masks to change the shape of the imported image |
|
||||||
- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”. |
- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”. |
||||||
- Add a title within the file. |
- Add a title within the file. |
||||||
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration on canva.com but don’t overload your design with too much details! |
|
||||||
|
|
||||||
**Tips:** |
**Tips:** |
||||||
|
|
||||||
- Fonts: SF Compact for the iOS elements, Futura STD Condensed for the Nike signs |
- 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 |
- 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) |
- [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 |
- You can use existing Libraries by browsing the Figma community resources. |
||||||
|
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details! |
||||||
|
@ -1,15 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Is the deliverable in the correct format (Figma)? |
|
||||||
###### Is there a title within the document? |
|
||||||
###### Is the document clear, simple and easy to read? |
|
||||||
###### 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? |
|
@ -1,11 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is there a zip folder? |
|
||||||
###### Is the zip folder labeled as “ProjectTitle_Name_FirstName”? |
|
||||||
###### Are there all the deliverables indicated in the instructions? |
|
||||||
###### Are the deliverables labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Are the deliverables in the correct format? |
|
||||||
###### Are the documents clear, simple and easy to read? |
|
||||||
###### Is there a chart? |
|
||||||
###### Is the chart complete? |
|
||||||
###### Are the 5 steps included in the report? |
|
@ -1,22 +1,25 @@ |
|||||||
# UI V - Ex 2 - Recommendations |
## Recommendations |
||||||
|
|
||||||
**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 "Heuristic audit" exercise, write a set of 3 to 6 recommendations to improve heuristics and usability. |
||||||
|
|
||||||
**Websites or Apps:** |
**Websites or Apps:** |
||||||
|
|
||||||
- [https://www.ikea.com/](https://www.ikea.com/) |
- [https://www.ikea.com/](https://www.ikea.com/) |
||||||
- [https://www.doctorswithoutborders.org/](https://www.doctorswithoutborders.org/) |
- [https://www.doctorswithoutborders.org/](https://www.doctorswithoutborders.org/) |
||||||
- App WikiArt |
- App WikiArt. |
||||||
|
|
||||||
**Deliverable:** |
**Deliverable:** |
||||||
|
|
||||||
- A PDF document with 3 to 6 recommendations |
- A PDF document with 3 to 6 recommendations. |
||||||
|
|
||||||
|
Don't forget to: |
||||||
|
|
||||||
- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”. |
- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”. |
||||||
- Add a title within the document. |
- Add a title within the document. |
||||||
- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration on canva.com but don’t overload your design with too much details! |
|
||||||
|
|
||||||
**Tips:** |
**Tips:** |
||||||
|
|
||||||
- Classify your recommendations in heuristic criteria |
- Classify your recommendations in heuristic criteria. |
||||||
|
- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details! |
||||||
|
@ -1,12 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Is the deliverable in the correct format (Figma)? |
|
||||||
###### Is there a title within the document? |
|
||||||
###### Is the document clear, simple and easy to read? |
|
||||||
###### At least 3 different measures have been shown, like in the instructions section? |
|
||||||
|
|
||||||
|
|
||||||
Example of presentation and explanation: |
|
||||||
|
|
||||||
[https://www.convinceandconvert.com/digital-marketing/accessible-website-examples/](https://www.convinceandconvert.com/digital-marketing/accessible-website-examples/) |
|
@ -1,12 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Is the deliverable in the correct format (Figma)? |
|
||||||
###### Is there a title within the document? |
|
||||||
###### Is the document clear, simple and easy to read? |
|
||||||
###### At least 3 different measures have been shown, like in the instructions section? |
|
||||||
|
|
||||||
|
|
||||||
Example of presentation and explanation: |
|
||||||
|
|
||||||
[https://www.convinceandconvert.com/digital-marketing/accessible-website-examples/](https://www.convinceandconvert.com/digital-marketing/accessible-website-examples/) |
|
@ -1,8 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Is the deliverable in the correct format (Figma)? |
|
||||||
###### Is there a title within the document? |
|
||||||
###### Is the document clear, simple and easy to read? |
|
||||||
###### Are there are at least 5 different examples of breadcrumbs? |
|
||||||
###### Is the name of each app or website written? |
|
@ -1,13 +1,18 @@ |
|||||||
# UI III - Ex 8 - Calendars |
## Calendars |
||||||
|
|
||||||
**Instructions:** |
### Instructions |
||||||
|
|
||||||
Browse the internet and find at least 5 different examples of calendars from websites or apps. |
Browse the internet and find at least 5 different examples of calendars from websites or apps. |
||||||
|
|
||||||
**Deliverable:** |
**Deliverable:** |
||||||
|
|
||||||
- A Figma file gathering 5 screenshots of calendars. |
- A Figma file gathering 5 screenshots of calendars and the respective name of each app or website. |
||||||
|
|
||||||
|
Don't forget to: |
||||||
|
|
||||||
- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”. |
- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”. |
||||||
- Add a title within the file. |
- Add a title within the file. |
||||||
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration on canva.com but don’t overload your design with too much details! |
|
||||||
|
|
||||||
|
**Tips:** |
||||||
|
|
||||||
|
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details! |
||||||
|
@ -1,8 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Is the deliverable in the correct format (Figma)? |
|
||||||
###### Is there a title within the document? |
|
||||||
###### Is the document clear, simple and easy to read? |
|
||||||
###### Are there at least 5 examples of calendars? |
|
||||||
###### Is the name of each app or website written? |
|
@ -1,8 +1,165 @@ |
|||||||
#### Audit |
#### Grids |
||||||
|
|
||||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
|
###### Is the deliverable in the correct format (Figma)? |
||||||
|
|
||||||
|
###### Is there a title within the document? |
||||||
|
|
||||||
|
###### Is the document clear, simple and easy to read? |
||||||
|
|
||||||
|
###### Is there one page per screen or frame? |
||||||
|
|
||||||
|
###### Are there colored lines on top of the images? |
||||||
|
|
||||||
|
###### Do the lines highlight aligned elements? |
||||||
|
|
||||||
|
#### Multi state |
||||||
|
|
||||||
|
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
|
###### Is the deliverable in the correct format (Figma)? |
||||||
|
|
||||||
|
###### Is there a title within the document? |
||||||
|
|
||||||
|
###### Is the document clear, simple and easy to read? |
||||||
|
|
||||||
|
###### Are there at least five combinations of buttons, menus or call to actions? |
||||||
|
|
||||||
|
###### Are the multi state buttons gathered in groups? |
||||||
|
|
||||||
|
###### Is the document clean and the elements aligned? |
||||||
|
|
||||||
|
#### Accessibility (website) |
||||||
|
|
||||||
|
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
|
###### Is the deliverable in the correct format (Figma)? |
||||||
|
|
||||||
|
###### Is there a title within the document? |
||||||
|
|
||||||
|
###### Is the document clear, simple and easy to read? |
||||||
|
|
||||||
|
###### Does the document have 3 pages? |
||||||
|
|
||||||
|
###### At least 3 different measures have been shown, like we ask in the instructions section? |
||||||
|
|
||||||
|
###### Did the student explain how the measures ease the reading or perception of visual content? |
||||||
|
|
||||||
|
**Example [here](https://www.convinceandconvert.com/digital-marketing/accessible-website-examples/).** |
||||||
|
|
||||||
|
#### Accessibility (App) |
||||||
|
|
||||||
|
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
|
###### Is the deliverable in the correct format (Figma)? |
||||||
|
|
||||||
|
###### Is there a title within the document? |
||||||
|
|
||||||
|
###### Is the document clear, simple and easy to read? |
||||||
|
|
||||||
|
###### Does the document have 3 pages? |
||||||
|
|
||||||
|
###### At least 3 different measures have been shown, like we ask in the instructions section? |
||||||
|
|
||||||
|
###### Did the student explain how the measures ease the reading or perception of visual content? |
||||||
|
|
||||||
|
**Example [here](https://www.convinceandconvert.com/digital-marketing/accessible-website-examples/)** |
||||||
|
|
||||||
|
#### Breadbcrumbs |
||||||
|
|
||||||
|
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
###### Is the deliverable in the correct format (Figma)? |
###### Is the deliverable in the correct format (Figma)? |
||||||
|
|
||||||
###### Is there a title within the document? |
###### Is there a title within the document? |
||||||
|
|
||||||
###### Is the document clear, simple and easy to read? |
###### Is the document clear, simple and easy to read? |
||||||
###### Are there at least 5 signs of consistency? |
|
||||||
|
###### Are there are at least 5 different examples of breadcrumbs from websites or apps? |
||||||
|
|
||||||
|
###### Is the name of each app or website written? |
||||||
|
|
||||||
|
#### Toggle buttons |
||||||
|
|
||||||
|
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
|
###### Is the deliverable in the correct format (Figma)? |
||||||
|
|
||||||
|
###### Is there a title within the document? |
||||||
|
|
||||||
|
###### Is the document clear, simple and easy to read? |
||||||
|
|
||||||
|
###### Are there at least 5 examples of toggle buttons from websites or apps? |
||||||
|
|
||||||
|
###### Is the name of each app or website written? |
||||||
|
|
||||||
|
#### Radio Buttons |
||||||
|
|
||||||
|
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
|
###### Is the deliverable in the correct format (Figma)? |
||||||
|
|
||||||
|
###### Is there a title within the document? |
||||||
|
|
||||||
|
###### Is the document clear, simple and easy to read? |
||||||
|
|
||||||
|
###### Are there at least 5 examples of radio buttons from websites or apps? |
||||||
|
|
||||||
|
###### Is the name of each app or website written? |
||||||
|
|
||||||
|
#### Calendars |
||||||
|
|
||||||
|
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
|
###### Is the deliverable in the correct format (Figma)? |
||||||
|
|
||||||
|
###### Is there a title within the document? |
||||||
|
|
||||||
|
###### Is the document clear, simple and easy to read? |
||||||
|
|
||||||
|
###### Are there at least 5 examples of calendars from websites or apps? |
||||||
|
|
||||||
|
###### Is the name of each app or website written? |
||||||
|
|
||||||
|
#### Time pickers |
||||||
|
|
||||||
|
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
|
###### Is the deliverable in the correct format (Figma)? |
||||||
|
|
||||||
|
###### Is there a title within the document? |
||||||
|
|
||||||
|
###### Is the document clear, simple and easy to read? |
||||||
|
|
||||||
|
###### Are there at least 5 examples of time pickers from websites or apps? |
||||||
|
|
||||||
|
###### Is the name of each app or website written? |
||||||
|
|
||||||
|
#### Micro-interactions |
||||||
|
|
||||||
|
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
|
###### Is the deliverable in the correct format (Figma)? |
||||||
|
|
||||||
|
###### Is there a title within the document? |
||||||
|
|
||||||
|
###### Is the document clear, simple and easy to read? |
||||||
|
|
||||||
|
###### Are there at least 5 examples of micro-interactions or animations from websites or apps? |
||||||
|
|
||||||
|
###### Is the name of each app or website written? |
||||||
|
|
||||||
|
#### Consistency |
||||||
|
|
||||||
|
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||||
|
|
||||||
|
###### Is the deliverable in the correct format (Figma)? |
||||||
|
|
||||||
|
###### Is there a title within the document? |
||||||
|
|
||||||
|
###### Is the document clear, simple and easy to read? |
||||||
|
|
||||||
|
###### Are there at least 5 signs of consistency from websites or apps? |
||||||
|
|
||||||
###### Is the name of each app or website written? |
###### Is the name of each app or website written? |
||||||
|
@ -1,10 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Is the deliverable in the correct format (Figma)? |
|
||||||
###### Is there a title within the document? |
|
||||||
###### Is the document clear, simple and easy to read? |
|
||||||
###### Are there colored lines on top of the images? |
|
||||||
###### Do the lines highlight aligned elements? |
|
||||||
|
|
||||||
|
|
@ -1,8 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Is the deliverable in the correct format (Figma)? |
|
||||||
###### Is there a title within the document? |
|
||||||
###### Is the document clear, simple and easy to read? |
|
||||||
###### Are there at least 5 examples of micro-interactions or animations? |
|
||||||
###### Is the name of each app or website written? |
|
@ -1,11 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Is the deliverable in the correct format (Figma)? |
|
||||||
###### Is there a title within the document? |
|
||||||
###### Is the document clear, simple and easy to read? |
|
||||||
###### Are there at least five combinations of buttons, menus or call to actions? |
|
||||||
###### Are the multi state buttons gathered in groups? |
|
||||||
###### Is the document clean and the elements aligned? |
|
||||||
|
|
||||||
|
|
@ -1,8 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Is the deliverable in the correct format (Figma)? |
|
||||||
###### Is there a title within the document? |
|
||||||
###### Is the document clear, simple and easy to read? |
|
||||||
###### Are there at least 5 examples of radio buttons? |
|
||||||
###### Is the name of each app or website written? |
|
@ -1,13 +1,18 @@ |
|||||||
# UI III - Ex 9 - Time pickers |
## Time pickers |
||||||
|
|
||||||
**Instructions:** |
### Instructions |
||||||
|
|
||||||
Browse the internet and find at least 5 different examples of time pickers from websites or apps. |
Browse the internet and find at least 5 different examples of time pickers from websites or apps. |
||||||
|
|
||||||
**Deliverable:** |
**Deliverable:** |
||||||
|
|
||||||
- A Figma file gathering 5 screenshots of time pickers. |
- A Figma file gathering 5 screenshots of time pickers and the respective name of each app or website. |
||||||
|
|
||||||
|
Don't forget to: |
||||||
|
|
||||||
- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”. |
- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”. |
||||||
- Add a title within the file. |
- Add a title within the file. |
||||||
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration on canva.com but don’t overload your design with too much details! |
|
||||||
|
|
||||||
|
**Tips:** |
||||||
|
|
||||||
|
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details! |
||||||
|
@ -1,8 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Is the deliverable in the correct format (Figma)? |
|
||||||
###### Is there a title within the document? |
|
||||||
###### Is the document clear, simple and easy to read? |
|
||||||
###### Are there at least 5 examples of time pickers? |
|
||||||
###### Is the name of each app or website written? |
|
@ -1,8 +0,0 @@ |
|||||||
#### Audit |
|
||||||
|
|
||||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
|
||||||
###### Is the deliverable in the correct format (Figma)? |
|
||||||
###### Is there a title within the document? |
|
||||||
###### Is the document clear, simple and easy to read? |
|
||||||
###### Are there at least 5 examples of toggle buttons? |
|
||||||
###### Is the name of each app or website written? |
|