docs(user-experience): add piscine-ui content
|
@ -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)
|