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.
|
|
|
|
# UI II - Ex 4 - Library for climbing addicts
|
|
|
|
|
|
|
|
|
|
**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:**
|
|
|
|
|
|
|
|
|
|
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 PDF document extracted from a Figma file with a moodboard for a climbing group. Include:
|
|
|
|
|
- Pictures
|
|
|
|
|
- Colors (2 to 3 main colors)
|
|
|
|
|
- Typography
|
|
|
|
|
- A PDF document extracted from a Figma file with a library including:
|
|
|
|
|
- At least graphic design 20 elements
|
|
|
|
|
- At least one atom
|
|
|
|
|
- At least one molecule
|
|
|
|
|
- At least one organism
|
|
|
|
|
- At least 5 multistate elements
|
|
|
|
|
|
|
|
|
|
**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!
|
|
|
|
|
|
|
|
|
|
**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/)
|
