## 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)