WebDesign Tutorial - Beyond borders

This is part twelve. You can find the part twelve, Lowering the contrast, here

Beyond borders

---

The problem with borders is like the case with labels. They are even more associated with tables so many people consider them important because they bring structure, order and hierarchy to the UI

However, in most cases (even tables!) this is not true. Often borders do not bring order and do not improve the hierarchy.

They tend to disrupt the hierarchy because they make the UI look messy and bulky, which causes cognitive overload for the user.

Have a look at this classic, heavy-bordered table.

What would happen if instead of borders we used alternating grey and white stripes in the rows of the table?

Additionally, to improve table accessibility, we can add simple interactivity and when the user hovers over a row, we can change its colour to a darker grey.

Doesn't the table look lighter and friendlier now?

Don't set boundaries (unless you really need to)

It's not just tables that suffer from borders. Let's look at another example - a card with a list of workouts and a search box.

Uhh, I feel so heavy looking at this 😟

But what would we get if we:

1. remove the outer border from the card and give it a soft shadow instead?

2. remove the border from the search box (along with the icon) and give it a dark gray background instead?

3. remove the lines dividing the individual items in the list and instead increase the space between them so they can "breathe"?

4. remove the upper border in the footer of the card and make it a light gray background instead?

5. add muted icons?

6. change this heavy button to a lighter one?

Ohh, much lighter and nicer 😍

Next part - Let it breathe

Material Minimal, which is basically Material Design on steroids can be found here on Figma.
Material Design for Bootstrap is a UI Kit, that uses Material Minimal, check it out here.
And TW Elements, our newest child is based on Tailwind CSS. Check it out!