mirror of https://github.com/01-edu/UX-UI.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.
38 lines
1.8 KiB
38 lines
1.8 KiB
2 years ago
|
# UI IV - Ex 2 CK - Design system library
|
||
|
|
||
|
**Context:**
|
||
|
|
||
|
In this quest, you’ll have to build your own interface.
|
||
|
|
||
|
After designing your own style guide with a moodboard, colors and typography, you can use the series of consistency principles, atomic design structure, the techniques to build you own library and then a series of screens. Step by step, you’ll have built an animated high-fidelity prototype.
|
||
|
|
||
|
The very last step will be to test it on users to detect the impressions they get when they discover your app.
|
||
|
|
||
|
Once again, feel free to get as much inspiration as you need from existing design systems. Dribbble, consistency and structure are your best friends!
|
||
|
|
||
|
**Instructions:**
|
||
|
|
||
|
Based on the moodboard you designed in Ex 1, create a design system with at least 30 elements, including atoms, molecules and organisms, and include multistates.
|
||
|
|
||
|
**Deliverables:**
|
||
|
|
||
|
- A PDF document extracted from a Figma file with a library including
|
||
|
- At least graphic design 30 elements
|
||
|
- At least 5 atoms
|
||
|
- At least 5 molecules
|
||
|
- At least 5 organisms
|
||
|
- At least 10 multistate variations
|
||
|
|
||
|
**Tips:**
|
||
|
|
||
|
- Start by asking yourself what key elements may appear in an e-commerce app.
|
||
|
- Feel free to get inspiration from existing design systems. Browse Dribble and the Figma community!
|
||
|
|
||
|
**Resources:**
|
||
|
|
||
|
- [FIGMA FILE (to duplicate)](https://www.figma.com/file/U26mctkrOqxiUeAlNHzSxW/UI-IV---Ex-3---E-COMMERCE%3A-Design-screens!?node-id=0%3A1)
|
||
|
- [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/)
|