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.
34 lines
1.3 KiB
34 lines
1.3 KiB
2 years ago
|
# UI IV - Ex 3 CK - Design screens
|
||
|
|
||
|
**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 wireframes and your design system library, take your mid-fidelity prototype to a high-fidelity level!
|
||
|
|
||
|
Select 5 screens that will show the user flow of a customer who:
|
||
|
|
||
|
- arrives on the homepage
|
||
|
- browses the content
|
||
|
- checks one product page
|
||
|
- adds the product to the cart
|
||
|
- checks out
|
||
|
|
||
|
Use your components, call to actions and visuals to complete the wireframes.
|
||
|
|
||
|
**Deliverables:**
|
||
|
|
||
|
- 5 high-fidelity screens
|
||
|
|
||
|
**Resources:**
|
||
|
|
||
|
- [Unsplash](https://unsplash.com/) for visuals
|
||
|
- [From low-fidelity to high-fidelity](https://mockitt.wondershare.com/prototyping/low-fidelity-vs-high-fidelity.html)
|