root
/
public
mirror of https://github.com/01-edu/public.git
11
7
Fork 0
Code Issues 42 Projects Releases Wiki Activity
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.
5658 Commits
73 Branches
1 Tag
325 MiB
 
 
 
 
 
 
Tree: 4dd63d3c10
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '4dd63d3c10'
${ noResults }
public/subjects/user-experience/piscine-ui/rules/README.md

13 KiB
Raw Blame History

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 the following 5 images on Figma and draw lines and grids every time you find aligned elements.

Images

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 but don’t overload your design with too much details!
  • 1st screen example

Resources:

Multi state

Instructions

Go to 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 but don’t overload your design with too much details!

Resources:

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 but don’t overload your design with too much details!

Resources:

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 (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 but don’t overload your design with too much details!

Resources:

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.

Breadcrumbs

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 but don’t overload your design with too much details!

Resources:

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 but don’t overload your design with too much details!

Resources:

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 but don’t overload your design with too much details!

Resources:

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 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 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 but don’t overload your design with too much details!

Resources:

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 but don’t overload your design with too much details!

Resources: