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.
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/65348f49751925fe912b9c33_Stunning%20visual%20ideas%20-%201.png)
Mix Round and Sharp Corners
Mix round and sharp corners to introduce asymmetry and make a design feel more free-flowing and less rigid.
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/65348f57252ab1e191d4435b_Stunning%20visual%20ideas%20-%202.png)
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.
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/65348f66751925fe912bafdc_Stunning%20visual%20ideas%20-%203.png)
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.
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/65348f7972c487144f9a3fa0_Stunning%20visual%20ideas%20-%204.png)
Text techniques:
Interweave text and imagery
How do I create this? Figma and Webflow tutorial on my website.
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/65348f83751c8520ecb9884a_Stunning%20visual%20ideas%20-%205.png)
Change the typeface of one letter
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/65348f9465baf3b7388c5d9c_Stunning%20visual%20ideas%20-%206.png)
Bonus techniques
Turn rectangles into ovals, on hover
How do I create this? Figma and Webflow tutorial on my website.
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/65348fa172c487144f9a6645_Stunning%20visual%20ideas%20-%207.png)
Translucent elements with colored shadows
How do I create this? Figma and Webflow tutorial on my website.
![](https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/65348fae65baf3b7388c77be_Stunning%20visual%20ideas%20-%208.png)