mirror of https://github.com/01-edu/public.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
306 lines
13 KiB
306 lines
13 KiB
2 years ago
|
## 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.
|
||
|
|
## 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.
|
||
|
|
## 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/)
|
||
|
|
## 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!
|
||
|
|
## 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.
|
||
|
|
## 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)
|