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.

49 lines
2.1 KiB

## Styleguide
2 years ago
**Context:**
2 years ago
In this quest, you’ll have to build your own interface.
2 years ago
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.
2 years ago
The very last step will be to test it on users to detect the impressions they get when they discover your app.
2 years ago
Once again, feel free to get as much inspiration as you need from existing design systems. Dribble, consistency and structure are your best friends!
2 years ago
### Instructions
2 years ago
Your agency works on a digital product to create an e-commerce app for second-hand electronic devices. You collaborate with a UX designer from your team. They have designed the wireframes and pass it on to you!
2 years ago
Design a style guide (= a moodboard with typography + examples of typography with buttons, title, description and content).
2 years ago
Also think about the values and spirit you want to spread through this moodboard, we’ll get back to it in exercise "Desirability Testing".
2 years ago
### Deliverables
2 years ago
- A Figma moodboard that includes:
- Pictures
- 2 to 3 main colors
- Examples of typography applied to graphic elements:
- Title
- Description or subtitle
- Content
- Button
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!
2 years ago
**Resources:**
2 years ago
- [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 of a Style Guide in UI](https://www.pinterest.pt/pin/454019206175050454/)