Product Display with Card-Layout

Design Process:

1. color coherence and card layout
2. using color palette create page improves coherence and consistency
3. using “Beautiful Shadows” highlight the product and card section, guiding user to more focus on what we are going to say
4. applying “Gradient” feature to the card background, maintaining color consistency while emphasising points (also distinguish from different contents)
5. using “Auto Layout” while prototyping

• Plugins: Coolors, Beautiful Shadows

Demo – Figma

Reference

A practice project inspired by “100 Ways to Design with Figma” (UI/UX course by Riven).