Let's look at another example of how White Space enables us to create better design.
Consider the simple form that includes two form fields and a button.
Now, is this a visual pleasing and inviting form?
I'd argue that it isn't.
Everything is too tight and the feeling I get from it is one of slight anxiety,
and most of the time,
this is not a feeling that we want our users to have, right?
But we can fix a lot of problems here by just
giving the box around the form more padding.
Meaning, more white space. What a relief.
It's almost like being able to breath again after unbuttoning a too tight shirt.
What else? The Sign Up button could also use more white space.
There, much better now.
And the form fields too,
typing something into them right now would again feel
really claustrophobic because the fields are too small.
Making them taller solves the problem and now let's implement
a few quick changes that aren't related to
white space but will make our form look even better.
We can lose the colons after the labels.
Since, they are unnecessary and just add visual noise.
Also, let's change the button typography from all caps into title case.
That looks much friendlier.
Then let's remove all the outlines around the box and the form fields.
Much cleaner and less oppressive now.
But let's add one heavy ruler back to just the top of the box,
to create some visual weights balancing the button below and lastly,
let's lighten the background just a little bit to make
everything feel even lighter and friendlier.
So, now we have a pretty nice form and
it's quite a bit different from what we started with.
But let's take it one step further which gives me
the opportunity to talk about making more rational design decisions.
So far, I simply eyeball the spacing between the elements,
like the space between the top of the box and the first form fields
or the space between the two fields or the height of the fields themselves.
There's a way we can be more systematic about those dimensions.
Let's create a small grid with the smallest grid unit
based on the height of the dark rule on the top of the box.
There, and now we have a sort of ruler on the left to help us with our sizing.
You can see that currently,
the elements aren't quite lining up.
Let's change that.
Now, they do.
Let me add a quick color overlay so we can see the size relationships now.
The spaces on the top and bottom are six squared units tall.
The form fields and the button of five units,
the space between the fields is two units,
and between the last field and the button are four units.
You'll notice that now there's an underlying reason for the height of
all elements and there is a variety of sizes,
some are the same and some are different,
and that tension of sameness and difference creates
an interesting and pleasing rhythm between the design elements.
Now, in this case,
I use the idea of a grid to allocate vertical space.
But grids come into play even more
importantly when we're dividing up horizontal space in a layout.
You'll learn more about that in a later lesson.
So, here's our finished form and here it is next to where we started from.
Quite a difference, right?
We haven't even done all that much with color and we
haven't tried different typefaces or used any icons.
We mostly edit white space to design a form that a user will find pleasing and inviting,
a form that is therefore much more usable.