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
