@ -1,37 +0,0 @@ |
|||||||
[Exercise example](https://www.figma.com/file/IXsXrJz9FPKPp8PKQxNhxT/UI---Ex-3?node-id=0%3A1) |
|
||||||
|
|
||||||
Here are examples of combinations on websites. Please make sure : |
|
||||||
|
|
||||||
- The websites or apps chosen by the students match with a correct color wheel combinations |
|
||||||
- There are 3 websites or apps per color palette combination |
|
||||||
- Monochromatic examples: |
|
||||||
- [https://www.benefitcosmetics.com/](https://www.benefitcosmetics.com/) |
|
||||||
- [http://www.jwilouvres.com.au/](http://www.jwilouvres.com.au/) |
|
||||||
- [http://blank.com.pt/](http://blank.com.pt/) |
|
||||||
|
|
||||||
- Analogous examples: |
|
||||||
- [https://www.natuurenmilieu.nl/](https://www.natuurenmilieu.nl/) |
|
||||||
- [https://campesinorum.com/](https://campesinorum.com/) |
|
||||||
- [https://www.lobster.es/](https://www.lobster.es/) |
|
||||||
|
|
||||||
- Complementary examples: |
|
||||||
- [https://www.rolandgarros.com/](https://www.rolandgarros.com/fr-fr) |
|
||||||
- [https://squilla.io/](https://squilla.io/) |
|
||||||
- [https://gomim.com/en/](https://gomim.com/en/) |
|
||||||
|
|
||||||
- Split complementary examples: |
|
||||||
- [https://flythenest.io/en/](https://flythenest.io/en/) |
|
||||||
- [https://www.kineuphorics.com/](https://www.kineuphorics.com/) |
|
||||||
- [https://www.ma-tea.de/](https://www.ma-tea.de/) |
|
||||||
|
|
||||||
- Triadic |
|
||||||
- [https://normalnow.com/](https://normalnow.com/) |
|
||||||
- [https://brainbakery.com/en/](https://brainbakery.com/en/) |
|
||||||
- [https://www.barkbox.com/](https://www.barkbox.com/) |
|
||||||
|
|
||||||
- Dual complementary or Tetradic |
|
||||||
- [https://www.airtable.com/](https://www.airtable.com/) |
|
||||||
- [https://calendar.google.com/](https://calendar.google.com/) |
|
||||||
- [https://www.ebay.com/](https://www.ebay.com/) |
|
||||||
|
|
||||||
![Resource](Resource.png) |
|
@ -1,12 +0,0 @@ |
|||||||
To have a good moodboard, you need: |
|
||||||
|
|
||||||
- Several pictures that are graphically consistent |
|
||||||
- 2 to 3 main colors that stand out |
|
||||||
- The colors must have at least one code (RGB, Hex, or HSB) |
|
||||||
- Please check the code to make sure it matches with the designated color [thanks to this tool](http://onlinewebtool.com/colorpicker.php) |
|
||||||
- The document should be a PDF |
|
||||||
|
|
||||||
- Examples of moodboards (in addition, the moodboard should include the color codes): |
|
||||||
- [https://lovestylecomunicacion.com/wp-content/uploads/2017/09/A.png](https://lovestylecomunicacion.com/wp-content/uploads/2017/09/A.png) |
|
||||||
- [https://caseperlatesta.com/wp-content/uploads/2015/09/Moodboard23_grey_peach-1024x1024.jpg](https://caseperlatesta.com/wp-content/uploads/2015/09/Moodboard23_grey_peach-1024x1024.jpg) |
|
||||||
- [https://i.pinimg.com/564x/ee/9d/d6/ee9dd6fbb82b0e5b4dd2924580b765dd.jpg](https://i.pinimg.com/564x/ee/9d/d6/ee9dd6fbb82b0e5b4dd2924580b765dd.jpg) |
|
@ -1,50 +0,0 @@ |
|||||||
|
|
||||||
- [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 |
|
@ -1,10 +0,0 @@ |
|||||||
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,15 +0,0 @@ |
|||||||
Please make sure |
|
||||||
|
|
||||||
- There is a PDF document |
|
||||||
- At least 3 different measures have been shown, like : |
|
||||||
- Color contrast |
|
||||||
- Highlighted or enlarged text when hovering |
|
||||||
- Links color that is different from the body text's |
|
||||||
- Breadcrumbs to indicate where you are in terms of navigation |
|
||||||
- In forms, the title of the case should be above the text zone |
|
||||||
- Error states |
|
||||||
- etc. |
|
||||||
|
|
||||||
Example of presentation and explanation: |
|
||||||
|
|
||||||
- [https://www.convinceandconvert.com/digital-marketing/accessible-website-examples/](https://www.convinceandconvert.com/digital-marketing/accessible-website-examples/) |
|
@ -1,15 +0,0 @@ |
|||||||
Please make sure |
|
||||||
|
|
||||||
- There is a PDF document |
|
||||||
- At least 3 different measures have been shown, like : |
|
||||||
- Color contrast |
|
||||||
- Highlighted or enlarged text when hovering |
|
||||||
- Links color that is different from the body text's |
|
||||||
- Breadcrumbs to indicate where you are in terms of navigation |
|
||||||
- In forms, the title of the case should be above the text zone |
|
||||||
- Error states |
|
||||||
- etc. |
|
||||||
|
|
||||||
Example of presentation and explanation: |
|
||||||
|
|
||||||
- [https://www.convinceandconvert.com/digital-marketing/accessible-website-examples/](https://www.convinceandconvert.com/digital-marketing/accessible-website-examples/) |
|
@ -1,13 +0,0 @@ |
|||||||
Make sure there is: |
|
||||||
|
|
||||||
- A PDF document |
|
||||||
- Inside it, a moodboard that includes |
|
||||||
- Pictures |
|
||||||
- 2 to 3 main colors |
|
||||||
- Examples of typography applied to graphic elements |
|
||||||
- Title |
|
||||||
- Description or subtitle |
|
||||||
- Content |
|
||||||
- Button |
|
||||||
|
|
||||||
- [Example of a Style Guide in UI](https://www.pinterest.pt/pin/454019206175050454/) |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
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: 488 KiB After Width: | Height: | Size: 488 KiB |
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 87 KiB |
@ -0,0 +1,19 @@ |
|||||||
|
[Exercise example](https://www.figma.com/file/IXsXrJz9FPKPp8PKQxNhxT/UI---Ex-3?node-id=0%3A1) |
||||||
|
|
||||||
|
Here are examples of combinations on websites. Please make sure : |
||||||
|
|
||||||
|
- The websites or apps chosen by the students match with a correct color wheel combinations |
||||||
|
- There are 3 websites or apps per color palette combination |
||||||
|
- Monochromatic examples: -[https://www.benefitcosmetics.com/](https://www.benefitcosmetics.com/) -[http://www.jwilouvres.com.au/](http://www.jwilouvres.com.au/) -[http://blank.com.pt/](http://blank.com.pt/) |
||||||
|
|
||||||
|
- Analogous examples: -[https://www.natuurenmilieu.nl/](https://www.natuurenmilieu.nl/) -[https://campesinorum.com/](https://campesinorum.com/) -[https://www.lobster.es/](https://www.lobster.es/) |
||||||
|
|
||||||
|
- Complementary examples: -[https://www.rolandgarros.com/](https://www.rolandgarros.com/fr-fr) -[https://squilla.io/](https://squilla.io/) -[https://gomim.com/en/](https://gomim.com/en/) |
||||||
|
|
||||||
|
- Split complementary examples: -[https://flythenest.io/en/](https://flythenest.io/en/) -[https://www.kineuphorics.com/](https://www.kineuphorics.com/) -[https://www.ma-tea.de/](https://www.ma-tea.de/) |
||||||
|
|
||||||
|
- Triadic -[https://normalnow.com/](https://normalnow.com/) -[https://brainbakery.com/en/](https://brainbakery.com/en/) -[https://www.barkbox.com/](https://www.barkbox.com/) |
||||||
|
|
||||||
|
- Dual complementary or Tetradic -[https://www.airtable.com/](https://www.airtable.com/) -[https://calendar.google.com/](https://calendar.google.com/) -[https://www.ebay.com/](https://www.ebay.com/) |
||||||
|
|
||||||
|
![Resource](Resource.png) |
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 87 KiB |
@ -0,0 +1,9 @@ |
|||||||
|
To have a good moodboard, you need: |
||||||
|
|
||||||
|
- Several pictures that are graphically consistent |
||||||
|
- 2 to 3 main colors that stand out |
||||||
|
- The colors must have at least one code (RGB, Hex, or HSB) |
||||||
|
- Please check the code to make sure it matches with the designated color [thanks to this tool](http://onlinewebtool.com/colorpicker.php) |
||||||
|
- The document should be a PDF |
||||||
|
|
||||||
|
- Examples of moodboards (in addition, the moodboard should include the color codes): -[https://lovestylecomunicacion.com/wp-content/uploads/2017/09/A.png](https://lovestylecomunicacion.com/wp-content/uploads/2017/09/A.png) -[https://caseperlatesta.com/wp-content/uploads/2015/09/Moodboard23_grey_peach-1024x1024.jpg](https://caseperlatesta.com/wp-content/uploads/2015/09/Moodboard23_grey_peach-1024x1024.jpg) -[https://i.pinimg.com/564x/ee/9d/d6/ee9dd6fbb82b0e5b4dd2924580b765dd.jpg](https://i.pinimg.com/564x/ee/9d/d6/ee9dd6fbb82b0e5b4dd2924580b765dd.jpg) |
@ -0,0 +1,19 @@ |
|||||||
|
-[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 |
Before Width: | Height: | Size: 132 KiB After Width: | Height: | Size: 132 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: 9.0 KiB After Width: | Height: | Size: 9.0 KiB |
Before Width: | Height: | Size: 7.8 KiB After Width: | Height: | Size: 7.8 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
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,6 +1,5 @@ |
|||||||
Make sure |
Make sure |
||||||
|
|
||||||
- There is a PDF document |
- There is a PDF document |
||||||
- The layers are indicated with numbers |
- The layers are indicated with numbers |
||||||
- 2 numbers can be switched as long as the layering of layers is respected |
- 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) |
||||||
- [Example here](https://www.figma.com/file/YnrbPhItwgUy56I6Yne14S/UI-II---Ex-2?node-id=2%3A3) |
|
@ -0,0 +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) |
@ -0,0 +1,15 @@ |
|||||||
|
Please make sure |
||||||
|
|
||||||
|
- There is a PDF document |
||||||
|
- At least 3 different measures have been shown, like : |
||||||
|
- Color contrast |
||||||
|
- Highlighted or enlarged text when hovering |
||||||
|
- Links color that is different from the body text's |
||||||
|
- Breadcrumbs to indicate where you are in terms of navigation |
||||||
|
- In forms, the title of the case should be above the text zone |
||||||
|
- Error states |
||||||
|
- etc. |
||||||
|
|
||||||
|
Example of presentation and explanation: |
||||||
|
|
||||||
|
-[https://www.convinceandconvert.com/digital-marketing/accessible-website-examples/](https://www.convinceandconvert.com/digital-marketing/accessible-website-examples/) |
@ -0,0 +1,15 @@ |
|||||||
|
Please make sure |
||||||
|
|
||||||
|
- There is a PDF document |
||||||
|
- At least 3 different measures have been shown, like : |
||||||
|
- Color contrast |
||||||
|
- Highlighted or enlarged text when hovering |
||||||
|
- Links color that is different from the body text's |
||||||
|
- Breadcrumbs to indicate where you are in terms of navigation |
||||||
|
- In forms, the title of the case should be above the text zone |
||||||
|
- Error states |
||||||
|
- etc. |
||||||
|
|
||||||
|
Example of presentation and explanation: |
||||||
|
|
||||||
|
-[https://www.convinceandconvert.com/digital-marketing/accessible-website-examples/](https://www.convinceandconvert.com/digital-marketing/accessible-website-examples/) |
@ -0,0 +1,13 @@ |
|||||||
|
Make sure there is: |
||||||
|
|
||||||
|
- A PDF document |
||||||
|
- Inside it, a moodboard that includes |
||||||
|
- Pictures |
||||||
|
- 2 to 3 main colors |
||||||
|
- Examples of typography applied to graphic elements |
||||||
|
- Title |
||||||
|
- Description or subtitle |
||||||
|
- Content |
||||||
|
- Button |
||||||
|
|
||||||
|
-[Example of a Style Guide in UI](https://www.pinterest.pt/pin/454019206175050454/) |
@ -1,7 +0,0 @@ |
|||||||
Make sure |
|
||||||
|
|
||||||
- There is a timeline |
|
||||||
- The timeline shows the journey of your persona |
|
||||||
- There are emotions |
|
||||||
- The main pain points are highlighted |
|
||||||
- [Example](https://d2slcw3kip6qmk.cloudfront.net/marketing/blog/2017Q3/SEO-initiative-customer-journey-mapping/CustomerJourneyMap1.png) |
|