Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CON-3194 Fix UI-UX readme files #2760

Merged
merged 2 commits into from
Oct 3, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions subjects/user-experience/piscine-ui/atomic-design/README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
## Browsing
### Browsing

**Context:**

Expand Down Expand Up @@ -48,7 +48,7 @@ Don't forget to:

- User Interface Design is a hybrid role and can bring together concepts from interaction design, visual design, information architecture and even Front End Development.

## Material Design
### Material Design

### Instructions

Expand All @@ -74,7 +74,7 @@ Don't forget to:
- [Material Design Awards 2019](https://design.google/library/material-design-awards-2019/)
- [What is Material Design - Wikipedia](https://en.wikipedia.org/wiki/Material_Design)

## Design system library
### Design system library

### Instructions

Expand Down Expand Up @@ -103,7 +103,7 @@ Don't forget to:

- [Atomic Design Methodology](https://atomicdesign.bradfrost.com/chapter-2/)

## Library for climbing addicts
### Library for climbing addicts

### Instructions

Expand Down Expand Up @@ -145,7 +145,7 @@ Don't forget to:
- [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/)

## Library for a dating app
### Library for a dating app

### Instructions

Expand Down Expand Up @@ -185,4 +185,4 @@ Don't forget to:
- [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/)
- [Examples of UI Buttons library](https://www.pinterest.co.kr/pin/663014376380850291/)
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
## Styleguide
### Styleguide

**Context:**

Expand Down Expand Up @@ -47,7 +47,7 @@ Don't forget to:
- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)
- [Example of a Style Guide in UI](https://www.pinterest.pt/pin/454019206175050454/)

## Design system library
### Design system library

### Instructions

Expand Down Expand Up @@ -82,7 +82,7 @@ Don't forget to:
- [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/)

## Design screens
### Design screens

### Instructions

Expand Down Expand Up @@ -115,7 +115,7 @@ Don't forget to:

- [Unsplash](https://unsplash.com/) for visuals

## Animation
### Animation

### Instructions

Expand All @@ -141,9 +141,10 @@ Don't forget to:
**Quote:**

"Speak human: Use the words your users use.’ Dan Saffer | Microinteractions.

- [From low-fidelity to high-fidelity](https://mockitt.wondershare.com/prototyping/low-fidelity-vs-high-fidelity.html)

## Desirability testing
### Desirability testing

### Instructions

Expand Down Expand Up @@ -181,4 +182,4 @@ Don't forget to:

**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
- "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
22 changes: 11 additions & 11 deletions subjects/user-experience/piscine-ui/colors-and-moodboard/README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
## Find the colors
### Find the colors

**Context:**

Expand Down Expand Up @@ -38,7 +38,7 @@ Don't forget to:
- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/)
- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)

## Color codes
### Color codes

### Instructions

Expand Down Expand Up @@ -72,7 +72,7 @@ Don't forget to :
- [https://brave.com/es/](https://brave.com/es/)
- [https://www.ted.com/](https://www.ted.com/)

## Color combinations
### Color combinations

### Instructions

Expand Down Expand Up @@ -151,7 +151,7 @@ Don't forget to:
- [https://calendar.google.com/](https://calendar.google.com/)
- [https://www.ebay.com/](https://www.ebay.com/)

## Moodboard
### Moodboard

### Instructions

Expand Down Expand Up @@ -185,7 +185,7 @@ Don't forget to:
- [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!

## Typography
### Typography

### Instructions

Expand Down Expand Up @@ -226,7 +226,7 @@ Don't forget to:
- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/)
- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)

## Typography moodboard
### Typography moodboard

### Instructions

Expand Down Expand Up @@ -268,7 +268,7 @@ Don't forget to:
- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/)
- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)

## UI Challenge - Timer
### UI Challenge - Timer

### Instructions

Expand Down Expand Up @@ -298,7 +298,7 @@ Don't forget to:
- 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!

## UI Challenge - Watches
### UI Challenge - Watches

### Instructions

Expand Down Expand Up @@ -332,7 +332,7 @@ Don't forget to:
- 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!

## UI Challenge - Flight
### UI Challenge - Flight

### Instructions

Expand Down Expand Up @@ -362,7 +362,7 @@ Don't forget to:
- [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!

## UI Challenge - Spotify
### UI Challenge - Spotify

### Instructions

Expand Down Expand Up @@ -394,7 +394,7 @@ Don't forget to:
- [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!

## UI Challenge - Bitcoin Dashboard
### UI Challenge - Bitcoin Dashboard

### Instructions

Expand Down
4 changes: 2 additions & 2 deletions subjects/user-experience/piscine-ui/heuristics/README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
## Audit
### Audit

**Context:**

Expand Down Expand Up @@ -49,7 +49,7 @@ Don't forget to:
- [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)

## Recommendations
### Recommendations

### Instructions

Expand Down
22 changes: 11 additions & 11 deletions subjects/user-experience/piscine-ui/rules/README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
## Grids
### Grids

**Context:**

Expand Down Expand Up @@ -37,7 +37,7 @@ Don't forget to:
- [Beginning graphic design](https://edu.gcfglobal.org/en/beginning-graphic-design/)
- [Gareth graphic studio](https://www.youtube.com/c/GarethDavidStudio)

## Multi state
### Multi state

### Instructions

Expand Down Expand Up @@ -67,7 +67,7 @@ Don't forget to:
- [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).

## Accessibility (website)
### Accessibility (website)

### Instructions

Expand Down Expand Up @@ -106,7 +106,7 @@ Don't forget to:
- Error states.
- etc.

## Accessibility (app)
### Accessibility (app)

### Instructions

Expand Down Expand Up @@ -144,7 +144,7 @@ Don't forget to:
- Error states
- etc.

## Breadcrumbs
### Breadcrumbs

### Instructions

Expand All @@ -167,7 +167,7 @@ Don't forget to:

- [What are breadcrumbs?](https://www.seoptimer.com/blog/breadcrumbs-website/)

## Toggle buttons
### Toggle buttons

### Instructions

Expand All @@ -190,7 +190,7 @@ Don't forget to:

- [Toggle Switch - Tips](https://uxplanet.org/toggle-switch-5-simple-design-tips-for-better-design-b4046eff4a2f)

## Radio buttons
### Radio buttons

### Instructions

Expand All @@ -213,7 +213,7 @@ Don't forget to:

- [What is a radio button?](https://www.justinmind.com/blog/radio-button-design-examples/)

## Calendars
### Calendars

### Instructions

Expand All @@ -232,7 +232,7 @@ Don't forget to:

- 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
### Time pickers

### Instructions

Expand All @@ -251,7 +251,7 @@ Don't forget to:

- 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
### Micro-interactions

### Instructions

Expand Down Expand Up @@ -282,7 +282,7 @@ Don't forget to:
- [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
### Consistency

### Instructions

Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
## User Interviews
### User Interviews

**Context:**

Expand Down Expand Up @@ -86,7 +86,7 @@ Thank you so much for your time!

I have a last favor to ask you: is there anyone you know who runs frequently and would be available for a talk?

## Analytics
### Analytics

### Instructions

Expand Down Expand Up @@ -125,7 +125,7 @@ Examples of insights you can extract from the articles:

Always base your decisions on the data, not on your biases.

## Personas
### Personas

### Instructions

Expand Down Expand Up @@ -165,7 +165,7 @@ Use the material you got from the exercise `User interview` to build the pierre

"Focus unswervingly, on the customer’ Jesse Hertzberg | Former COO of Squarespace

## User Journey
### User Journey

### Instructions

Expand Down Expand Up @@ -209,7 +209,7 @@ Most articles you'll find will be about user journeys or customer journeys. Keep

'It’s about catching customers in the act, and providing highly relevant and highly contextual information’ Paul Maritz | CEO Pivotal

## Problem Statement
### Problem Statement

### Instructions

Expand Down Expand Up @@ -257,7 +257,7 @@ Based on the insights from the exercises `analytics` and `user interviews`, comm

“If I had an hour to solve a problem, I’d spend 55 minutes thinking about the problem and 5 minutes thinking about solutions.” Albert Einstein

## Ideation
### Ideation

_You can replace Pierre with your own persona._

Expand Down Expand Up @@ -330,7 +330,7 @@ Don't forget to:

Chances are that... If you have gone through all possible solutions, you’ve found the good one.

## Prototyping
### Prototyping

### Instructions

Expand Down
Loading
Loading