3.3 White Space Xm...

To get access to the full course and resource links mentioned in the video, sign up at https://courses.xmpro.com.

Need help with creating your XMPRO apps? Send an email to support@xmpro.com...

Transcript

To get access to the full course and resource links mentioned in the video, sign up at https://courses.xmpro.com.

Need help with creating your XMPRO apps? Send an email to support@xmpro.com... you might not think that white space is

a big enough topic to warrant its own

video but i

beg to differ white space in a design is

not wasted space

white space or negative space typically

refers to the space

around elements in your design the main

purpose of negative space

is to give your elements room to breathe

and also to help create

groups of elements you can use white

space to show users which elements

are related a great example of how to

use white space in your ui

is this footer from segment.com on the

right

they have their footer divided into four

columns and there's quite a lot of space

between each column there's also white

space between each of the links

between the top and the bottom of the

footer and also on the sides

this clever use of white space makes it

easy to consume the information

and the design looks clean and modern

now as i mentioned in the previous video

on grids

it's important to create a system for

spacing just like you would with a

typographic scale

it's common practice to use eight pixel

increments for padding and margin to

help create consistency

and you can set up a spacing system or a

spacing scale

that looks something like 8 16 24 32

in the example you'll see that the card

on the left

has eight pixels padding between all of

the elements

now this doesn't look bad at least

there's some padding

but if you look at the version on the

right with 16 pixels padding between

elements you'll see that it's much

easier to read

and it looks less cluttered when you add

eight of these on a screen

the effect will be magnified even more

this example shows you how white space

can have a big impact

even if it's just an 8 pixel difference

now let's get into how to style

different ui

elements

Last updated