@ -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/) |
@ -0,0 +1,49 @@
|
||||
## Browsing |
||||
|
||||
**Context:** |
||||
|
||||
Welcome to the 2nd quest of UI! |
||||
|
||||
This series of exercises is a great occasion for you to discover how libraries are made in UI, thanks to Atomic Design. |
||||
|
||||
### Instructions |
||||
|
||||
Among these 4 websites, make snapshots of these elements: |
||||
|
||||
- 1 template. |
||||
- 1 organism. |
||||
- 1 molecule. |
||||
- 1 atom. |
||||
|
||||
**Websites:** |
||||
|
||||
- Alibaba. |
||||
- Booking.com. |
||||
- Easyjet App. |
||||
- Interrail. |
||||
|
||||
### Deliverables |
||||
|
||||
- A Figma file with 4 pages. |
||||
- On each page, a screenshot of a template, an organism, a molecule and an atom. |
||||
|
||||
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:** |
||||
|
||||
- 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/) |
||||
- [Video tutorial on Figma](https://www.youtube.com/watch?v=FTFaQWZBqQ8) |
||||
- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/) |
||||
- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio) |
||||
- [Example here](https://www.figma.com/file/fzqDkk8Zc8qJCiSMbKV0Ei/UI-II---Ex-1?node-id=0%3A1) |
||||
|
||||
**Quote:** |
||||
|
||||
- User Interface Design is a hybrid role and can bring together concepts from interaction design, visual design, information architecture and even Front End Development. |
@ -0,0 +1,41 @@
|
||||
## Library for a dating app |
||||
|
||||
### Instructions |
||||
|
||||
You are asked to design a dating app. |
||||
|
||||
Based on a moodboard you have composed, create a design system with at least 20 elements, including atoms, molecules and organisms, and include multistates. |
||||
|
||||
### Deliverables |
||||
|
||||
- A Figma file with a moodboard for a dating app including: |
||||
|
||||
- Pictures. |
||||
- Colors (2 to 3 main colors). |
||||
- Typography. |
||||
|
||||
- A Figma file with a library including: |
||||
|
||||
- At least 20 graphic design elements. |
||||
- At least one atom. |
||||
- At least one molecule. |
||||
- At least one organism. |
||||
- At least 5 multistate elements. |
||||
|
||||
Don't forget to: |
||||
|
||||
- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”. |
||||
- Add a title within all written documents. |
||||
|
||||
**Tips:** |
||||
|
||||
- Let’s be creative! Get inspiration from visuals before diving in. |
||||
- Feel free to get inspiration from existing design systems. Browse Dribble and the Figma community! |
||||
- Pay attention to the global aspect of the deliverables. They 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:** |
||||
|
||||
- [Introduction to design systems](https://www.youtube.com/watch?v=xEuBCUngJ_U) |
||||
- [Create a design system - Figma course](https://www.youtube.com/watch?v=RYDiDpW2VkM) |
||||
- [Building a design system library - Lyft](https://medium.com/tap-to-dismiss/building-a-design-system-library-532ef2492811) |
||||
- [Examples of UI Buttons library](https://www.pinterest.co.kr/pin/663014376380850291/) |
@ -0,0 +1,111 @@
|
||||
#### 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”? |
||||
|
||||
###### 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 dating app? |
||||
|
||||
###### 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 ones 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? |
@ -0,0 +1,41 @@
|
||||
## Library for climbing addicts |
||||
|
||||
### Instructions |
||||
|
||||
You are part of a climbing group and volunteer to rebrand the website of your club. |
||||
|
||||
Based on a moodboard, create a design system with at least 20 elements, including atoms, molecules and organisms and include multistates. |
||||
|
||||
### Deliverables |
||||
|
||||
- A Figma file with a moodboard for a climbing group including: |
||||
|
||||
- Pictures. |
||||
- Colors (2 to 3 main colors). |
||||
- Typography. |
||||
|
||||
- A Figma file with a library including: |
||||
|
||||
- At least 20 graphic design elements. |
||||
- At least one atom. |
||||
- At least one molecule. |
||||
- At least one organism. |
||||
- At least 5 multistate elements. |
||||
|
||||
Don't forget to: |
||||
|
||||
- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”. |
||||
- Add a title within all written documents. |
||||
|
||||
**Tips:** |
||||
|
||||
- Let’s be creative! Get inspiration from visuals before diving in. |
||||
- Feel free to get inspiration from existing design systems. Browse Dribble and the Figma community! |
||||
- Pay attention to the global aspect of the deliverables. They 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:** |
||||
|
||||
- [Introduction to design systems](https://www.youtube.com/watch?v=xEuBCUngJ_U) |
||||
- [Create a design system - Figma course](https://www.youtube.com/watch?v=RYDiDpW2VkM) |
||||
- [Building a design system library - Lyft](https://medium.com/tap-to-dismiss/building-a-design-system-library-532ef2492811) |
||||
- [Examples of UI Buttons library](https://www.pinterest.co.kr/pin/663014376380850291/) |
@ -0,0 +1,25 @@
|
||||
## Material Design |
||||
|
||||
### Instructions |
||||
|
||||
Download [this image](https://storage.googleapis.com/gd-wagtail-prod-assets/original_images/MDA2018_inline_02.jpg) which is a snapshot of 3 screens of Lyft, and detect the order in which the layers were set. |
||||
|
||||
### Deliverables |
||||
|
||||
- A Figma file with the image. |
||||
- On each screen, indicate the layers order with numbers. 1 being the background image, 2 the element right on top, etc. |
||||
|
||||
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:** |
||||
|
||||
- 2 numbers can be switched as long as the layering of layers is respected. |
||||
- 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:** |
||||
|
||||
- [Material Design Awards 2019](https://design.google/library/material-design-awards-2019/) |
||||
- [What is Material Design - Wikipedia](https://en.wikipedia.org/wiki/Material_Design) |
@ -0,0 +1,33 @@
|
||||
## Design screens |
||||
|
||||
### Instructions |
||||
|
||||
Based on the wireframes and your design system library, take your mid-fidelity prototype to a high-fidelity level! |
||||
|
||||
Select 5 screens that will show the user flow of a customer who: |
||||
|
||||
- Arrives on the homepage. |
||||
- Browses the content. |
||||
- Checks one product page. |
||||
- Adds the product to the cart. |
||||
- Checks out. |
||||
|
||||
Use your components, call to actions and visuals to complete the wireframes. |
||||
|
||||
### Deliverables |
||||
|
||||
- 5 high-fidelity screens from Figma. |
||||
|
||||
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:** |
||||
|
||||
- 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:** |
||||
|
||||
- [Unsplash](https://unsplash.com/) for visuals |
||||
- [From low-fidelity to high-fidelity](https://mockitt.wondershare.com/prototyping/low-fidelity-vs-high-fidelity.html) |
@ -0,0 +1,34 @@
|
||||
## Design system library |
||||
|
||||
### Instructions |
||||
|
||||
Based on the moodboard you designed in the previous exercise "Styleguide", create a design system with at least 30 elements, including atoms, molecules and organisms, and include multistates. |
||||
|
||||
### Deliverables |
||||
|
||||
- A Figma file with a library including: |
||||
|
||||
- At least graphic design 30 elements. |
||||
- At least 5 atoms. |
||||
- At least 5 molecules. |
||||
- At least 5 organisms. |
||||
- At least 10 multistate variations. |
||||
|
||||
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:** |
||||
|
||||
- Start by asking yourself what key elements may appear in an e-commerce app. |
||||
- Feel free to get inspiration from existing design systems. Browse Dribble and the Figma community! |
||||
- 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:** |
||||
|
||||
- [FIGMA FILE (to duplicate)](https://www.figma.com/file/U26mctkrOqxiUeAlNHzSxW/UI-IV---Ex-3---E-COMMERCE%3A-Design-screens!?node-id=0%3A1) |
||||
- [Introduction to design systems](https://www.youtube.com/watch?v=xEuBCUngJ_U) |
||||
- [Create a design system - Figma course](https://www.youtube.com/watch?v=RYDiDpW2VkM) |
||||
- [Building a design system library - Lyft](https://medium.com/tap-to-dismiss/building-a-design-system-library-532ef2492811) |
||||
- [Examples of UI Buttons library](https://www.pinterest.co.kr/pin/663014376380850291/) |
@ -0,0 +1,39 @@
|
||||
## Desirability testing |
||||
|
||||
### Instructions |
||||
|
||||
Run a desirability test! |
||||
|
||||
The point of this phase is to make sure the values and the spirit you chose for your design. |
||||
|
||||
- Get back to the values and spirit you chose in the "Styleguide" exercise and extract 2 to 5 adjectives. |
||||
- Prepare a board with 25+ adjectives, randomly distributed. |
||||
- Show your design to 5 different people, and ask them to select the adjectives among the list from the board that they are inspired with. |
||||
- If the selected adjectives chosen by the users are consistent with the ones you had chosen, congratulations! |
||||
- If the selected adjectives chosen by the users are not consistent, that’s fine! Make 3 suggestions about how to make your moodboard and library evolve. |
||||
|
||||
### Deliverables |
||||
|
||||
- A desirability testing board with 25+ different adjectives. |
||||
- Pictures from the desirability test. |
||||
- A PDF document with the outcomes of the desirability test. |
||||
- If the outcomes are not consistent with the values, 3 suggestions on how to make the moodboard and design library evolve. |
||||
|
||||
Don't forget to: |
||||
|
||||
- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”. |
||||
- Add a title within all written documents. |
||||
|
||||
**Tips:** |
||||
|
||||
- Avoid confirmation biais: don’t tell them the values and ask them to approve them! |
||||
- Good to know: Desirability testing is great to assess the impressions a design gives to the users. Whereas Usability testing is great to understand what users understand your prototype and how they navigate across the product. |
||||
- Pay attention to the global aspect of the deliverables. They 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:** |
||||
|
||||
- [Desirability Testing analyzing an emotional response to a design](https://www.slideshare.net/megangrocki/desirability-testing-analyzing-emotional-response-to-a-design-11262575) |
||||
|
||||
**Quote:** |
||||
|
||||
- "Interaction design focuses on the design of behavior of a person’s interaction with a digital interface. It is also concerned with satisfying the needs and desires of the people who will interact with a product or service.’ Alan Cooper, About Face: The Essentials of Interaction Design |
@ -0,0 +1,95 @@
|
||||
#### 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 labeled as “ProjectTitle_Name_FirstName”? |
||||
|
||||
###### Are the deliverables labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||
|
||||
###### Are the documents clear, simple and easy to read? |
||||
|
||||
###### Is there a desirability testing board with 25+ different adjectives? |
||||
|
||||
###### Are there pictures from 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? |
@ -0,0 +1,26 @@
|
||||
## second Animation |
||||
|
||||
### Instructions |
||||
|
||||
Animate your 5 screens on Figma. Think about multistate!! |
||||
|
||||
**Deliverable:** |
||||
|
||||
- An animated high-fidelity prototype on Figma. |
||||
|
||||
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:** |
||||
|
||||
- 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:** |
||||
|
||||
- [Efficiently Manage Your Designs - How Mockplus State Page Helps To View & Manage Multiple State](https://help.mockplus.com/p/372) |
||||
|
||||
**Quote:** |
||||
|
||||
"Speak human: Use the words your users use.’ Dan Saffer | Microinteractions. |
@ -0,0 +1,48 @@
|
||||
## Styleguide |
||||
|
||||
**Context:** |
||||
|
||||
In this quest, you’ll have to build your own interface. |
||||
|
||||
After designing your own style guide with a moodboard, colors and typography, you can use the series of consistency principles, atomic design structure, the techniques to build you own library and then a series of screens. Step by step, you’ll have built an animated high-fidelity prototype. |
||||
|
||||
The very last step will be to test it on users to detect the impressions they get when they discover your app. |
||||
|
||||
Once again, feel free to get as much inspiration as you need from existing design systems. Dribble, consistency and structure are your best friends! |
||||
|
||||
### Instructions |
||||
|
||||
Your agency works on a digital product to create an e-commerce app for second-hand electronic devices. You collaborate with a UX designer from your team. They have designed the wireframes and pass it on to you! |
||||
|
||||
Design a style guide (= a moodboard with typography + examples of typography with buttons, title, description and content). |
||||
|
||||
Also think about the values and spirit you want to spread through this moodboard, we’ll get back to it in exercise "Desirability Testing". |
||||
|
||||
### Deliverables |
||||
|
||||
- A Figma moodboard that includes: |
||||
|
||||
- Pictures |
||||
- 2 to 3 main colors |
||||
- Examples of typography applied to graphic elements: |
||||
|
||||
- Title |
||||
- Description or subtitle |
||||
- Content |
||||
- Button |
||||
|
||||
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:** |
||||
|
||||
- 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:** |
||||
|
||||
- [Video tutorial on Figma](https://www.youtube.com/watch?v=FTFaQWZBqQ8) |
||||
- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/) |
||||
- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio) |
||||
- [Example of a Style Guide in UI](https://www.pinterest.pt/pin/454019206175050454/) |
@ -0,0 +1,33 @@
|
||||
## Color codes |
||||
|
||||
### Instructions |
||||
|
||||
Go to these 7 websites and make the color palettes out of them (3 to 4 main colors). |
||||
|
||||
**Deliverable:** |
||||
|
||||
- A Figma file including screenshots of the main page, URL, extracted colors and the matching color codes. |
||||
|
||||
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 the document from the previous exercise to add the color codes on Figma. |
||||
- Use the Color Pipette to detect the color codes! |
||||
- 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:** |
||||
|
||||
- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/) |
||||
- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio) |
||||
|
||||
- [https://www.komoot.com/](https://www.komoot.com/) (App) |
||||
- [https://www.airtable.com/](https://www.airtable.com/) |
||||
- [https://www.decathlon.com/collections/kids-gift-ideas](https://www.decathlon.com/collections/kids-gift-ideas) |
||||
- [https://www.jrpass.com/](https://www.jrpass.com/) |
||||
- [https://www.thesiff.com/](https://www.thesiff.com/) |
||||
- [https://brave.com/es/](https://brave.com/es/) |
||||
- [https://www.nhp.gov.in/](https://www.nhp.gov.in/) |
@ -0,0 +1,78 @@
|
||||
## Color combinations |
||||
|
||||
### Instructions |
||||
|
||||
Let's browse! |
||||
|
||||
Find 3 digital products (websites or apps) that use each kind of color palette combination: |
||||
|
||||
- Monochromatic |
||||
- Analogous |
||||
- Complementary |
||||
- Split complementary |
||||
- Triadic |
||||
- Double complementary |
||||
|
||||
You need 3 websites or apps per color palette combination! |
||||
|
||||
**Deliverable:** |
||||
|
||||
- A Figma file including for each digital product (websites or apps): |
||||
|
||||
- screenshots of the main page. |
||||
- the matching URL. |
||||
- the main colors. |
||||
- the kind of color combination. |
||||
|
||||
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 find HSB (Hue, Saturation, Brightness) as well as HSV (Hue, Saturation, Value) depending of the source. |
||||
- 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:** |
||||
|
||||
- [https://coloursandmaterials.wordpress.com/2014/09/16/colour-system/](https://coloursandmaterials.wordpress.com/2014/09/16/colour-system/) |
||||
- ![Color wheel combinations](Resource.png) |
||||
|
||||
**Example:** |
||||
|
||||
**Monochromatic:** |
||||
|
||||
- [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:** |
||||
|
||||
- [https://www.natuurenmilieu.nl/](https://www.natuurenmilieu.nl/) |
||||
- [https://campesinorum.com/](https://campesinorum.com/) |
||||
- [https://www.lobster.es/](https://www.lobster.es/) |
||||
|
||||
**Complementary:** |
||||
|
||||
- [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:** |
||||
|
||||
- [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/) |
After Width: | Height: | Size: 87 KiB |
@ -0,0 +1,39 @@
|
||||
## Find the colors |
||||
|
||||
**Context:** |
||||
|
||||
This first UI quest is a series of exercises to practice colors, moodboards, typography and replicate screens on Figma! |
||||
|
||||
### Instructions |
||||
|
||||
Go to the following 7 websites and make the color palettes out of them (3 to 4 main colors). |
||||
|
||||
- [https://www.komoot.com/](https://www.komoot.com/) (App) |
||||
- [https://www.airtable.com/](https://www.airtable.com/) |
||||
- [https://www.decathlon.com/collections/kids-gift-ideas](https://www.decathlon.com/collections/kids-gift-ideas) |
||||
- [https://www.jrpass.com/](https://www.jrpass.com/) |
||||
- [https://www.thesiff.com/](https://www.thesiff.com/) |
||||
- [https://brave.com/es/](https://brave.com/es/) |
||||
- [https://www.nhp.gov.in/](https://www.nhp.gov.in/) |
||||
|
||||
**Deliverable:** |
||||
|
||||
- A Figma file including screenshots of the main page for all the 7 websites, URL and extracted colors next to the screenshots. |
||||
|
||||
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 Figma to extract the colors you need and export your file to PDF. |
||||
- Use the Color Pipette to extract the colors! |
||||
- You can show the main colors with filled squares or circles next to the screenshots. |
||||
- Mind the aesthetics of your deliverable! 1 page per site should be good. |
||||
|
||||
**Resources:** |
||||
|
||||
- [Video tutorial on Figma](https://www.youtube.com/watch?v=FTFaQWZBqQ8) |
||||
- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/) |
||||
- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio) |
@ -0,0 +1,34 @@
|
||||
## Moodboard |
||||
|
||||
### Instructions |
||||
|
||||
Create 4 different moodboards based on these 4 briefs and extract a color palette. |
||||
|
||||
**Briefs:** |
||||
|
||||
- 1: A physics teacher that wants to make his website catchy for 12 year-olds. |
||||
- 2: A Sri Lankan wedding planner website that wants to breathe sobriety and modernity. |
||||
- 3: An e-commerce platform that sells West African wax and wants to feel more luxurious in its spirit to stand out. |
||||
- 4: An NGO that helps parents of kids with autism, wants to spread joy and hope for a fundraiser. |
||||
|
||||
### Deliverables |
||||
|
||||
- A Figma file per moodboard. |
||||
- On each moodboard, several pictures (5 to 12) that are graphically consistent in terms of colors. |
||||
- The main colors extracted and shown on the side. |
||||
- One color code per color (RGB, Hex or HSB). |
||||
|
||||
Don't forget to: |
||||
|
||||
- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”. |
||||
- Add a title within all written documents. |
||||
|
||||
|
||||
**Tips:** |
||||
|
||||
- [Use freely-usable images!](https://buffer.com/library/free-images/) |
||||
- Examples of moodboards (in addition, the moodboard should include the color codes): |
||||
- [Example1](https://lovestylecomunicacion.com/wp-content/uploads/2017/09/A.png) |
||||
- [Example2](https://caseperlatesta.com/wp-content/uploads/2015/09/Moodboard23_grey_peach-1024x1024.jpg) |
||||
- [Example3](https://i.pinimg.com/564x/ee/9d/d6/ee9dd6fbb82b0e5b4dd2924580b765dd.jpg) |
||||
- Pay attention to the global aspect of the deliverables. They 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! |
@ -0,0 +1,41 @@
|
||||
## Typography Moodboard |
||||
|
||||
### Instructions |
||||
|
||||
Find consistent typography for your moodboards from the "Moodboard" exercise. |
||||
|
||||
### Deliverables |
||||
|
||||
- A Figma file with 4 moodboards from the "Moodboard" exercise, and typography: |
||||
|
||||
- 1 for a title |
||||
- 1 for a button |
||||
- 1 for a description |
||||
- 1 for the text |
||||
|
||||
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:** |
||||
|
||||
- Bold, italic, normal, light, etc. are fonts, not typography. |
||||
- [Google Fonts](https://fonts.google.com/) is another great friend to have by your side |
||||
- [Example of a caption here](https://www.figma.com/file/SbQMPjfLOzg92g8YZFlrRh/UI-I---Ex-5) |
||||
- 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:** |
||||
|
||||
- [Font](https://en.wikipedia.org/wiki/Font) |
||||
- [Glyph](https://en.wikipedia.org/wiki/Glyph) |
||||
- Instagram account: [You are typography](https://www.instagram.com/youaretypography/) |
||||
- Instagram account: [Typespire](https://www.instagram.com/typespire/) |
||||
- Instagram account: [ux_ui.world](https://www.instagram.com/ui_ux.world/) |
||||
- Instagram account: [ui.netwrk](https://www.instagram.com/ui.netwrk/) |
||||
- Instagram account: [uxuidailytips](https://www.instagram.com/uiuxdailytips/) |
||||
- [What is Typography](https://www.renderforest.com/blog/what-is-typography) |
||||
- [Why is Typography important?](https://careerfoundry.com/en/blog/ui-design/beginners-guide-to-typography/) |
||||
- [Beginning graphic design: Typography](https://edu.gcfglobal.org/en/beginning-graphic-design/typography/1/) |
||||
- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/) |
||||
- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio) |
@ -0,0 +1,40 @@
|
||||
## Typography |
||||
|
||||
### Instructions |
||||
|
||||
Go to these websites and detect the typographies used. |
||||
|
||||
- [https://unric.org/no](https://unric.org/no) |
||||
- [https://www.strongbowcider.com/bug-exterminator-brisbane](https://www.strongbowcider.com/bug-exterminator-brisbane) |
||||
- [http://www.bbqgrillsandfire.com/](http://www.bbqgrillsandfire.com/) |
||||
- [https://pt.wikipedia.org/wiki/Mario_Botta](https://pt.wikipedia.org/wiki/Mario_Botta) |
||||
- [https://texas-private-investigator.com/](https://texas-private-investigator.com/) |
||||
- [https://bumble.com/](https://bumble.com/) |
||||
- [https://adopte1poule.fr/](https://adopte1poule.fr/) |
||||
- [http://slaveryfootprint.org/](http://slaveryfootprint.org/) |
||||
- [https://www.tomorrowland.com/fr/festival/bienvenue](https://www.tomorrowland.com/fr/festival/bienvenue) |
||||
- [https://artisanscanada.com/](https://artisanscanada.com/) |
||||
|
||||
### Deliverables |
||||
|
||||
- A Figma file showing all the typographies used in each website or app. |
||||
|
||||
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:** |
||||
|
||||
- Mind the presentation! |
||||
- Feel free to browse Google Chrome options to detect typography ;-) |
||||
- [Google Fonts](https://fonts.google.com/) is another great friend to have by your side |
||||
- 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:** |
||||
|
||||
- [What is Typography](https://www.renderforest.com/blog/what-is-typography) |
||||
- [Why is Typography important?](https://careerfoundry.com/en/blog/ui-design/beginners-guide-to-typography/) |
||||
- [Beginning graphic design: Typography](https://edu.gcfglobal.org/en/beginning-graphic-design/typography/1/) |
||||
- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/) |
||||
- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio) |
After Width: | Height: | Size: 488 KiB |
@ -0,0 +1,31 @@
|
||||
## UI Challenge - Bitcoin Dashboard |
||||
|
||||
### Instructions |
||||
|
||||
Create this image on Figma: |
||||
|
||||
![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:** |
||||
|
||||
- A Figma file with a copy of the image with Figma elements. |
||||
|
||||
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:** |
||||
|
||||
- Fonts: Avenir. |
||||
- The frame is a desktop 1440 x 1024. |
||||
- [Figma article about Symbols and Variants](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants). |
||||
- You can use existing Libraries by browsing the Figma community resources. |
||||
- 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! |
After Width: | Height: | Size: 54 KiB |
After Width: | Height: | Size: 43 KiB |
After Width: | Height: | Size: 35 KiB |
After Width: | Height: | Size: 429 KiB |
After Width: | Height: | Size: 75 KiB |
After Width: | Height: | Size: 54 KiB |
@ -0,0 +1,247 @@
|
||||
#### Find the Colors |
||||
|
||||
###### 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 there a title within the document? |
||||
|
||||
###### 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? |
||||
|
||||
###### 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) |
||||
|
||||
###### Are there 2 pages: one for the screen and one with the symbols? |
||||
|
||||
###### Is the overlay done with transparency? |
||||
|
||||
###### Was the mask function used to change the shape of the image? |
||||
|
||||
###### Was the linear color function used? |
After Width: | Height: | Size: 273 KiB |
After Width: | Height: | Size: 75 KiB |
After Width: | Height: | Size: 33 KiB |
After Width: | Height: | Size: 72 KiB |
After Width: | Height: | Size: 54 KiB |
After Width: | Height: | Size: 1.1 MiB |
@ -0,0 +1,29 @@
|
||||
## UI Challenge - Flight |
||||
|
||||
### Instructions |
||||
|
||||
Create this image on Figma: |
||||
|
||||
![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:** |
||||
|
||||
- A Figma file with a copy of the image with Figma elements. |
||||
|
||||
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:** |
||||
|
||||
- Font: Roboto Bold, Normal, Black with 0 to 7% space between letters. |
||||
- The frame is desktop 1440 x 1048 px. |
||||
- [Figma article about Symbols and Variants](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants). |
||||
- 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! |
@ -0,0 +1,31 @@
|
||||
## UI Challenge - Spotify |
||||
|
||||
### Instructions |
||||
|
||||
Create this image on Figma: |
||||
|
||||
![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:** |
||||
|
||||
- A Figma file with a copy of the image with Figma elements. |
||||
|
||||
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:** |
||||
|
||||
- The font is GOTHAM. |
||||
- The frame is iPhone 13 Pro Max 428 x 926 px. |
||||
- [Figma article about Symbols and Variants](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants). |
||||
- 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! |
After Width: | Height: | Size: 50 KiB |
@ -0,0 +1,29 @@
|
||||
## UI Challenge - Timer |
||||
|
||||
### Instructions |
||||
|
||||
Create this image on Figma: |
||||
|
||||
![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:** |
||||
|
||||
- A Figma file. |
||||
|
||||
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:** |
||||
|
||||
- The font is RAJDANHI. |
||||
- 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! |
After Width: | Height: | Size: 132 KiB |
@ -0,0 +1,33 @@
|
||||
## UI Challenge - Watches |
||||
|
||||
### Instructions |
||||
|
||||
Copy these images on Figma: |
||||
|
||||
![Screen1](Watch1.png) |
||||
![Screen2](Watch2.png) |
||||
![Screen3](Watch3.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:** |
||||
|
||||
- A Figma file with a copy of the image with Figma elements. |
||||
|
||||
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:** |
||||
|
||||
- Fonts: SF Compact for the iOS elements, Futura STD Condensed for the Nike signs. |
||||
- The frame for each iWatch screen is watch 44 mm 184 x 224. |
||||
- [Figma article about Symbols and Variants](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants). |
||||
- You can use existing Libraries by browsing the Figma community resources. |
||||
- 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! |
After Width: | Height: | Size: 9.0 KiB |
After Width: | Height: | Size: 7.8 KiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 15 KiB |
@ -0,0 +1,50 @@
|
||||
## Heuristic audit |
||||
|
||||
**Context:** |
||||
|
||||
Welcome to this very last quest! |
||||
|
||||
The point is to take on the role of a UX auditor. You’ll be asked to make the audit of a website or an app, and then to write a series of recommendations to improve it. |
||||
|
||||
Let’s be critical, creative and impactful! |
||||
|
||||
### Instructions |
||||
|
||||
Run a heuristic audit on one of these 3 different websites or app: |
||||
|
||||
- [https://www.ikea.com/](https://www.ikea.com/) |
||||
- [https://www.doctorswithoutborders.org/](https://www.doctorswithoutborders.org/) |
||||
- App WikiArt |
||||
|
||||
Recommended steps: |
||||
|
||||
- Define the scope. |
||||
1. Know the business requirements and demographic of the end-users. |
||||
2. Decide on which reporting tools and heuristics to use (in this case: this [heuristic evaluation checklist](https://drive.google.com/file/d/10KbfbNZA1oVS1sXbjjXLPPmdZ6nqVkdc/view)). |
||||
3. Evaluate the experience and identify usability issues. |
||||
4. Analyze and aggregate the data. |
||||
5. Present the results. |
||||
|
||||
### Deliverables |
||||
|
||||
- A completed chart. |
||||
- A report including the 5 recommended steps described above. |
||||
|
||||
Don't forget to: |
||||
|
||||
- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”. |
||||
- Add a title within all written documents. |
||||
|
||||
**Tips:** |
||||
|
||||
- Pay attention to the global aspect of the deliverables. They 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:** |
||||
|
||||
- [Introduction to heuristic evaluation: a beginner’s guide](https://uxdesign.cc/introduction-to-heuristic-evaluation-658705606518) |
||||
- [Nielsen's 10 usability heuristics](https://www.nngroup.com/articles/ten-usability-heuristics/) |
||||
- [What you really get from a heuristic evaluation](https://uxmag.com/articles/what-you-really-get-from-a-heuristic-evaluation) |
||||
- [Heuristic analysis for UX: How to run a usability evaluation](https://uxdesign.cc/heuristic-analysis-for-ux-how-to-run-a-usability-evaluation-12c86d43936f) |
||||
- [Heuristic analysis in the design process](https://uxdesign.cc/heuristic-analysis-in-the-design-process-usability-inspection-methods-d200768eb38d) |
||||
- [A new usability heuristic evaluation checklist](https://uxplanet.org/a-new-usability-heuristic-evaluation-checklist-259f588da308) |
||||
- [Tool : Heuristic evaluation checklist](https://drive.google.com/file/d/10KbfbNZA1oVS1sXbjjXLPPmdZ6nqVkdc/view) |
@ -0,0 +1,25 @@
|
||||
## Recommendations |
||||
|
||||
### Instructions |
||||
|
||||
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:** |
||||
|
||||
- [https://www.ikea.com/](https://www.ikea.com/) |
||||
- [https://www.doctorswithoutborders.org/](https://www.doctorswithoutborders.org/) |
||||
- App WikiArt. |
||||
|
||||
**Deliverable:** |
||||
|
||||
- A PDF document with 3 to 6 recommendations. |
||||
|
||||
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”. |
||||
- Add a title within the document. |
||||
|
||||
**Tips:** |
||||
|
||||
- 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! |
@ -0,0 +1,38 @@
|
||||
#### Heuristic audit |
||||
|
||||
###### Is there a zip folder labeled as “ProjectTitle_Name_FirstName”? |
||||
|
||||
###### Are the deliverables labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||
|
||||
###### 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? |
||||
|
||||
#### Recommendations |
||||
|
||||
###### Is the deliverable labeled as “Name_FirstName_DeliverableName_Date_VersionNumber”? |
||||
|
||||
###### Is the deliverable in the correct format (PDF)? |
||||
|
||||
###### Is there a title within the document? |
||||
|
||||
###### Is the document clear, simple and easy to read? |
||||
|
||||
###### Is there between 3 to 6 recommendations? |
||||
|
||||
###### Are the recommendations consistent with the report's conclusions? |
||||
|
||||
###### Do the recommendations fit in some of these criteria: |
||||
|
||||
- Visibility of system status |
||||
- Matching between the system and the real world |
||||
- User Control and Freedom |
||||
- Consistency and Standards |
||||
- Error prevention |
||||
- Recognition rather than Recall |
||||
- Flexibility and efficiency of use |
||||
- Aesthetics and minimalist design |
@ -0,0 +1,37 @@
|
||||
## Accessibility (App) |
||||
|
||||
### Instructions |
||||
|
||||
Choose an app you find particularly accessible. Find at least 3 concrete examples of accessible measures and explain how they ease the reading or perception of visual content. |
||||
|
||||
### Deliverables |
||||
|
||||
- A 3-page Figma file with 3 different elements from an app (it can be from 3 different apps) that are accessible. The three measures must be different. |
||||
|
||||
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:** |
||||
|
||||
- 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:** |
||||
|
||||
- [What accessibility is and why it’s so important](https://uxdesign.cc/what-accessibility-is-and-why-its-so-important-9c56e033ff26) |
||||
- [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/) |
||||
- [Accessibility testing — W3C Wik](https://www.w3.org/wiki/Accessibility_testing)i |
||||
- [UX Myth: Accessibility is expensive and difficult](https://uxmyths.com/post/654091803/myth-5-accessibility-is-expensive-and-difficult) |
||||
- [Salesforce UX - 7 tips every designer needs to know about accessibility](https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b) |
||||
|
||||
**Criteria:** |
||||
|
||||
- Examples of measures |
||||
- 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. |
@ -0,0 +1,38 @@
|
||||
## Accessibility (website) |
||||
|
||||
### Instructions |
||||
|
||||
Choose a website you find particularly accessible. Find at least 3 concrete examples of accessible measures and explain how they ease the reading or perception of visual content. |
||||
|
||||
### Deliverables |
||||
|
||||
- A 3-page Figma file with 3 different elements from a website (it can be from 3 different websites) that are accessible. The 3 measures must be different. |
||||
|
||||
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:** |
||||
|
||||
- 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:** |
||||
|
||||
- [What accessibility is and why it’s so important](https://uxdesign.cc/what-accessibility-is-and-why-its-so-important-9c56e033ff26) |
||||
- [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/) |
||||
- [Accessibility testing — W3C Wik](https://www.w3.org/wiki/Accessibility_testing)i |
||||
- [UX Myth: Accessibility is expensive and difficult](https://uxmyths.com/post/654091803/myth-5-accessibility-is-expensive-and-difficult) |
||||
- [Salesforce UX - 7 tips every designer needs to know about accessibility](https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b) |
||||
- [Why prioritze web accessibility](https://blog.hubspot.com/service/why-prioritize-web-accessibility) |
||||
|
||||
**Criteria:** |
||||
|
||||
- Examples of measures |
||||
- 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. |
@ -0,0 +1,22 @@
|
||||
## Breadbcrumbs |
||||
|
||||
### Instructions |
||||
|
||||
Browse the internet and find at least 5 different examples of breadcrumbs from websites or apps. |
||||
|
||||
**Deliverable:** |
||||
|
||||
- A Figma file gathering 5 screenshots of breadcrumbs 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”. |
||||
- Add a title within the file. |
||||
|
||||
**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! |
||||
|
||||
**Resources:** |
||||
|
||||
- [What are breadcrumbs?](https://www.seoptimer.com/blog/breadcrumbs-website/) |
@ -0,0 +1,18 @@
|
||||
## Calendars |
||||
|
||||
### Instructions |
||||
|
||||
Browse the internet and find at least 5 different examples of calendars from websites or apps. |
||||
|
||||
**Deliverable:** |
||||
|
||||
- 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”. |
||||
- Add a title within the file. |
||||
|
||||
**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! |
@ -0,0 +1,33 @@
|
||||
## Consistency |
||||
|
||||
### Instructions |
||||
|
||||
Pick a website or an app of your choice\*. Highlight 5 signs of consistency across the pages. |
||||
|
||||
\*Airbnb, Google, Apple, Amazon, Facebook, Instagram and WhatsApp are not accepted. |
||||
|
||||
**Deliverable:** |
||||
|
||||
- A Figma file gathering at least 5 signs of consistency 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”. |
||||
- Add a title within the file. |
||||
|
||||
**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! |
||||
|
||||
**Resources:** |
||||
|
||||
- [7 tips for designing consistency](https://designshack.net/articles/graphics/7-tips-for-designing-consistency/) |
||||
- [The value of consistent design](https://www.invisionapp.com/inside-design/consistent-design/) |
||||
- [Consistency and Standards - Examples of Nielsens's Design Heuristics](https://medium.com/@gregoralbrecht/consistency-and-standards-nielsens-design-heuristic-explained-ac91f450fd8) |
||||
- [The importance of consistency in design work](https://yesimadesigner.com/the-importance-of-consistancy-in-design-work/) |
||||
- Examples of signs of consistency: |
||||
- colors. |
||||
- same shaped buttons. |
||||
- alignment. |
||||
- consistent product pages (with identical frameworks). |
||||
- etc. |
@ -0,0 +1,165 @@
|
||||
#### Grids |
||||
|
||||
###### 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 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 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? |
@ -0,0 +1,36 @@
|
||||
## Grids |
||||
|
||||
**Context:** |
||||
|
||||
Welcome to the 3rd quest of UI. |
||||
|
||||
In this series of exercises, you’ll be asked to open your eyes and collect graphic elements from various websites. You’ll see grids across screens, multi state buttons, how to make a design accessible for all, breadcrumbs, toggle buttons, radio buttons, calendar, time picker with 2 main goals: |
||||
|
||||
- Enrich your graphic general knowledge |
||||
- Detect consistency, that helps users understand a digital product at the first glance. |
||||
|
||||
### Instructions |
||||
|
||||
Open these 5 images on Figma and draw lines and grids every time you find aligned elements. |
||||
|
||||
### Deliverables |
||||
|
||||
- A Figma file including: |
||||
- The screens with lines on top to show grids. |
||||
- One page per screen or frame. |
||||
|
||||
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:** |
||||
|
||||
- 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:** |
||||
|
||||
- [Video tutorial on Figma](https://www.youtube.com/watch?v=FTFaQWZBqQ8) |
||||
- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/) |
||||
- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio) |
||||
- [1st screen example](https://www.figma.com/file/KOzd8yZuJvGLmZLuXjBgDg/UI-III-Ex-1.1) |
@ -0,0 +1,30 @@
|
||||
## Micro-interactions |
||||
|
||||
### Instructions |
||||
|
||||
Browse the internet and find at least 5 different examples of feedback micro-interactions or micro-animations on websites or apps. |
||||
|
||||
Be careful! Feedback is helpful to provide information to the user, not just showing a catchy design. You need to make the difference. |
||||
|
||||
**Deliverable:** |
||||
|
||||
- A Figma file gathering 5 examples of **feedback** micro-interactions or animations. In each example, show the different versions of the element. |
||||
|
||||
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:** |
||||
|
||||
- Feedback is the situation when the app specifically sends a piece of information to the user, like: |
||||
- Payment accepted |
||||
- Refreshed feed |
||||
- Information saved |
||||
- etc. |
||||
- 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:** |
||||
|
||||
- [Why use micro-interactions in your design](https://hike.one/update/why-use-micro-animations-in-your-design) |
||||
- [Micro-interactions: why, when, and how to use them to boost the UX](https://uxdesign.cc/micro-interactions-why-when-and-how-to-use-them-to-boost-the-ux-17094b3baaa0) |
@ -0,0 +1,29 @@
|
||||
## Multi state |
||||
|
||||
### Instructions |
||||
|
||||
Go to [Sony.com](http://sony.com) and observe the buttons and call to actions. When you hover or click on them, they change! |
||||
|
||||
Make screenshots of the different states of buttons, menu titles, filters etc. Then, gather and organize them. |
||||
|
||||
Find at least five combinations of multi state elements. |
||||
|
||||
### Deliverables |
||||
|
||||
- A Figma file with 5 combinations of multi state elements. |
||||
|
||||
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:** |
||||
|
||||
- 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:** |
||||
|
||||
- [Video tutorial on Figma](https://www.youtube.com/watch?v=FTFaQWZBqQ8) |
||||
- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/) |
||||
- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio) |
||||
- [Example here with Nintendo.com](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). |
@ -0,0 +1,22 @@
|
||||
## Radio Buttons |
||||
|
||||
### Instructions |
||||
|
||||
Browse the internet and find at least 5 different examples of radio buttons from websites or apps. |
||||
|
||||
**Deliverable:** |
||||
|
||||
- A Figma file gathering 5 screenshots of radio buttons 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”. |
||||
- Add a title within the file. |
||||
|
||||
**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! |
||||
|
||||
**Resources:** |
||||
|
||||
- [What is a radio button?](https://www.justinmind.com/blog/radio-button-design-examples/) |
@ -0,0 +1,18 @@
|
||||
## Time pickers |
||||
|
||||
### Instructions |
||||
|
||||
Browse the internet and find at least 5 different examples of time pickers from websites or apps. |
||||
|
||||
**Deliverable:** |
||||
|
||||
- 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”. |
||||
- Add a title within the file. |
||||
|
||||
**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! |
@ -0,0 +1,22 @@
|
||||
## Toggle buttons |
||||
|
||||
### Instructions |
||||
|
||||
Browse the internet and find at least 5 different examples of toggle buttons from websites or apps. |
||||
|
||||
**Deliverable:** |
||||
|
||||
- A Figma file gathering 5 screenshots of toggle buttons 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”. |
||||
- Add a title within the file. |
||||
|
||||
**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! |
||||
|
||||
**Resources:** |
||||
|
||||
- [Toggle Switch - Tips](https://uxplanet.org/toggle-switch-5-simple-design-tips-for-better-design-b4046eff4a2f) |