.png)
.png)
We’ll look at visual ideas for the following:
- Backgrounds
- Borders
- Lines & dividers
- Corners
- Shadows
- Text
- Image treatment
- Color
- Balance
Corner techniques:
The Corner Fold
A corner fold can add depth and make digital content feel more tangible and engaging as it imitates real-life – a concept called Skeuomorphism.
How do I create this? Figma and Webflow tutorial on my website.
Mix Round and Sharp Corners
Mix round and sharp corners to introduce asymmetry and make a design feel more free-flowing and less rigid.
Shadow techniques:
Gradient shadows
Lots of modern layouts use gradients as their motif. A less common way of having that visual idea recur is with a gradient drop shadow.
How do I create this? Figma and Webflow tutorial on my website.
Inner Shadows to Mimic Highlights and thickness
Combine white inner shadows and dark inner shadows to mimic highlights, depth, and thickness.
How do I create this? Figma and Webflow tutorial on my website.
Text techniques:
Interweave text and imagery
How do I create this? Figma and Webflow tutorial on my website.
Change the typeface of one letter
Bonus techniques
Turn rectangles into ovals, on hover
How do I create this? Figma and Webflow tutorial on my website.
Translucent elements with colored shadows
How do I create this? Figma and Webflow tutorial on my website.
