Ready
Borders
Borders act as visual boundaries of elements, organize the layout, and guide the user's attention.
Use sparingly
Overusing borders can create visual clutter and detract from the content. Use them sparingly to group related elements, define clear hierarchy, and guide users' attention. ¹
Do
Don't
Thinkness
Thick borders can overwhelm the interface. Subtle lines provide definition without being overbearing. ²
Do
Don't
Purposeful placement
Every border should have a clear purpose. Don't add them simply for decoration.
Border radius
Rounded corners can soften the look of borders and add a touch of personality. Experiment with different levels of curvature to find the right balance for your design. ³
Do
Don't
More
Additional Reading
How to Declutter your Design https://medium.com/wdstack/how-to-declutter-your-design-88cbd9e45015#:~:text=At%20first%2C%20it%20seems%20that,add%20to%20the%20visual%20clutter%E2%80%A6
UI Design in Practice Series: Containers, Boxes and Borders https://designerup.co/blog/ui-design-tips-boxes-and-borders/
All you need to know about UI design Shapes and Objects https://hype4.academy/articles/design/all-you-need-to-know-about-ui-design-shapes-and-objects