docs(atomic-design): change order of exercises in quest to correct order
UI Quest 2 = Atomic Design
Ex 1 = Browsing
Ex 2 = Material Design
Ex 3 = Design System Library
Ex 4 = Library for climbing addicts
Ex 5 = Library for a dating app
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!
- User Interface Design is a hybrid role and can bring together concepts from interaction design, visual design, information architecture and even Front End Development.
- User Interface Design is a hybrid role and can bring together concepts from interaction design, visual design, information architecture and even Front End Development.
## Library for a dating app
### Instructions
## Material Design
You are asked to design a dating app.
### Instructions
Based on a moodboard you have composed, create a design system with at least 20 elements, including atoms, molecules and organisms, and include multistates.
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
### Deliverables
- A Figma file with a moodboard for a dating app including:
- 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.
- Pictures.
Don't forget to:
- Colors (2 to 3 main colors).
- Typography.
- A Figma file with a library including:
- 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.
- At least 20 graphic design elements.
**Tips:**
- At least one atom.
- At least one molecule.
- 2 numbers can be switched as long as the layering of layers is respected.
- At least one organism.
- 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!
- [What is Material Design - Wikipedia](https://en.wikipedia.org/wiki/Material_Design)
## 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:
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”.
- 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 all written documents.
- Add a title within the file.
**Tips:**
**Tips:**
- Let’s be creative! Get inspiration from visuals before diving in.
- You can use Avenir Book instead of easyJet’s font.
- Feel free to get inspiration from existing design systems. Browse Dribble and the Figma community!
- Explore Noun Project to get icons.
- 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!
- 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:**
**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/)
## Library for climbing addicts
## Library for climbing addicts
### Instructions
### Instructions
@ -157,28 +144,45 @@ Don't forget to:
- [Create a design system - Figma course](https://www.youtube.com/watch?v=RYDiDpW2VkM)
- [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)
- [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/)
## Material Design
## Library for a dating app
### Instructions
### 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.
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
### Deliverables
- A Figma file with the image.
- A Figma file with a moodboard for a dating app including:
- On each screen, indicate the layers order with numbers. 1 being the background image, 2 the element right on top, etc.
- 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:
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”.
- 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 the file.
- Add a title within all written documents.
**Tips:**
**Tips:**
- 2 numbers can be switched as long as the layering of layers is respected.
- Let’s be creative! Get inspiration from visuals before diving in.
- 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!
- 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!
davhojt
1 year ago
committed by