kapy
/
public
mirror of https://github.com/01-edu/public.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

docs(rules): change order of exercises in quest to correct order 

UI Quest 3 = Rules
Ex 1 = Grids
Ex 2 = Multi State
Ex 3 = Accessibility (website)
Ex 4 = Accessibility (app)
Ex 5 = Breadcrumbs
Ex 6 = Toggle Buttons
Ex 7 = Radio Buttons
Ex 8 = Calendars
Ex 9 = Time Pickers
Ex 10 = Micro Interactions
Ex 11 = Consistency
This commit is contained in:
davhojt 2023-06-25 11:38:36 +03:00 committed by Dav Hojt
parent 51f2ae4b2a
commit da0ee7c044
1 changed files with 185 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

360
subjects/user-experience/piscine-ui/rules/README.md
View File

@ -1,12 +1,23 @@
## Accessibility (App)
## 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
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.
Open these 5 images on Figma and draw lines and grids every time you find aligned elements.
### 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.
- A Figma file including:
- The screens with lines on top to show grids.
- One page per screen or frame.
Don't forget to:
@ -19,22 +30,41 @@ Don't forget to:
**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)
- [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)
**Criteria:**
## 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).
- 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.
## Accessibility (website)
### Instructions
@ -73,6 +103,45 @@ Don't forget to:
- In forms, the title of the case should be above the text zone.
- Error states.
- etc.
## 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.
## Breadbcrumbs
### Instructions
@ -95,6 +164,53 @@ Don't forget to:
**Resources:**
- [What are breadcrumbs?](https://www.seoptimer.com/blog/breadcrumbs-website/)
## 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)
## 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/)
## Calendars
### Instructions
@ -113,6 +229,57 @@ Don't forget to:
**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!
## 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!
## 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)
## Consistency
### Instructions
@ -145,161 +312,4 @@ Don't forget to:
- same shaped buttons.
- alignment.
- consistent product pages (with identical frameworks).
- etc.
## 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)
## 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)
## 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).
## 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/)
## 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!
## 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)
- etc.