1.3 KiB
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 for visuals
- From low-fidelity to high-fidelity