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.
185 lines
6.9 KiB
185 lines
6.9 KiB
2 years ago
|
## Atomic 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:
|
||
|
|
|
||
|
|
- 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!
|
||
|
|
|
||
|
|
**Resources:**
|
||
|
|
|
||
|
|
- [Atomic Design Methodology](https://atomicdesign.bradfrost.com/chapter-2/)
|
||
|
|
## Browsing
|
||
|
|
|
||
|
|
**Context:**
|
||
|
|
|
||
|
|
Welcome to the 2nd quest of UI!
|
||
|
|
|
||
|
|
This series of exercises is a great occasion for you to discover how libraries are made in UI, thanks to Atomic Design.
|
||
|
|
|
||
|
|
### Instructions
|
||
|
|
|
||
|
|
Among these 4 websites, make snapshots of these elements:
|
||
|
|
|
||
|
|
- 1 template.
|
||
|
|
- 1 organism.
|
||
|
|
- 1 molecule.
|
||
|
|
- 1 atom.
|
||
|
|
|
||
|
|
**Websites:**
|
||
|
|
|
||
|
|
- Alibaba.
|
||
|
|
- Booking.com.
|
||
|
|
- Easyjet App.
|
||
|
|
- Interrail.
|
||
|
|
|
||
|
|
### Deliverables
|
||
|
|
|
||
|
|
- A Figma file with 4 pages.
|
||
|
|
- On each page, a screenshot of a template, an organism, a molecule and an atom.
|
||
|
|
|
||
|
|
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:**
|
||
|
|
|
||
|
|
- [Atomic Design Methodology](https://atomicdesign.bradfrost.com/chapter-2/)
|
||
|
|
- [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](https://www.figma.com/file/fzqDkk8Zc8qJCiSMbKV0Ei/UI-II---Ex-1?node-id=0%3A1)
|
||
|
|
|
||
|
|
**Quote:**
|
||
|
|
|
||
|
|
- 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
|
||
|
|
|
||
|
|
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
|
||
|
|
|
||
|
|
- A Figma file with a moodboard for a dating app including:
|
||
|
|
|
||
|
|
- 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:
|
||
|
|
|
||
|
|
- 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 all written documents.
|
||
|
|
|
||
|
|
**Tips:**
|
||
|
|
|
||
|
|
- Let’s be creative! Get inspiration from visuals before diving in.
|
||
|
|
- 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!
|
||
|
|
|
||
|
|
**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
|
||
|
|
|
||
|
|
### Instructions
|
||
|
|
|
||
|
|
You are part of a climbing group and volunteer to rebrand the website of your club.
|
||
|
|
|
||
|
|
Based on a moodboard, create a design system with at least 20 elements, including atoms, molecules and organisms and include multistates.
|
||
|
|
|
||
|
|
### Deliverables
|
||
|
|
|
||
|
|
- A Figma file with a moodboard for a climbing group including:
|
||
|
|
|
||
|
|
- 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:
|
||
|
|
|
||
|
|
- 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 all written documents.
|
||
|
|
|
||
|
|
**Tips:**
|
||
|
|
|
||
|
|
- Let’s be creative! Get inspiration from visuals before diving in.
|
||
|
|
- 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!
|
||
|
|
|
||
|
|
**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/)
|
||
|
|
## Material Design
|
||
|
|
|
||
|
|
### 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.
|
||
|
|
|
||
|
|
### Deliverables
|
||
|
|
|
||
|
|
- 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.
|
||
|
|
|
||
|
|
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:**
|
||
|
|
|
||
|
|
- 2 numbers can be switched as long as the layering of layers is respected.
|
||
|
|
- 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:**
|
||
|
|
|
||
|
|
- [Material Design Awards 2019](https://design.google/library/material-design-awards-2019/)
|
||
|
|
- [What is Material Design - Wikipedia](https://en.wikipedia.org/wiki/Material_Design)
|