6.9 KiB
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 but don’t overload your design with too much details!
Resources:
- Atomic Design Methodology
- Video tutorial on Figma
- Beginning graphic design
- Gareth graphic studio
- Example here
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.
Material Design
Instructions
Download this image 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 but don’t overload your design with too much details!
Resources:
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 but don’t overload your design with too much details!
Resources:
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 but don’t overload your design with too much details!
Resources:
- Introduction to design systems
- Create a design system - Figma course
- Building a design system library - Lyft
- Examples of UI Buttons library
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 but don’t overload your design with too much details!
Resources: