Understand space when designing your UI

Understand space when designing your UI

Space is the gap in between elements.This defines the relationships between them.

Space can separate or connect elements

These icons are grouped together to communicate their similar actions.

The bookmark icon is moved away from the rest of the icons to communicate it's importance and action.

Space can make things more legible

This is an overwhelming amount of text.

This is easier to scan and read.

Space can create hierarchy of information

Everything seems like one big block of information.

We're able to tell the different types of information.

Space can help people understand whole elements

Where does each element belong to?

Now we can see the groups of elements together.

Summary

• Space can separate or connect elements
• Space can make things more legible
• Space can create hierarchy of information
• Space can help people understand whole elements

By understanding the space around elements, you’ll be more intentional with your designs.

FOLLOW OUR INSTAGRAM @hackuniversity

youtube.com/HackUniversity

tiktok.eom/@HackUniversity

facebook.com/TheHackUniversity