Whitespace is another important tool for a designer,
which might seem a little strange at first since we are
basically talking about space that is empty,
space that is not filled with anything,
space one could naively argue that is wasted.
But the consideration of whitespace reminds me of a quote by the composer,
Claude Debussy, who said that "Music is the space between the notes."
So, one could argue that design really
emerges from the space between the design elements.
Here are three posters by the pioneering modern typographer, Jan Tschicholds,
whose work is a great example of how whitespace creates
drama in a composition and leads a viewer's eye around.
Just to clarify, whitespace doesn't have to actually be white.
It could be of any color of course,
but it is space that is not used for an image or text or any other design elements.
It's space that lets your design breathe.
This is something that beginners often get wrong,
especially in web design and one can go even further and say
that early web design had a problem acknowledging the importance of whitespace too.
Here's the site from the very early days of the web.
Aliweb is said to be the first search engine.
It launched in 1994 and it doesn't seem to have changed all that much since,
and everything about it just screams 90s web design.
A big reason for that dated aesthetic is
that everything looks cramped and claustrophobic.
Sure, there's a lot of useful information here mainly,
text links and headlines and a search box and search controls,
but visually, it's really overwhelming and not very pleasant to look at.
It looks old and a lot of that has to do with missing whitespace.
Check out how with just a few moves,
we can make this design look and function a lot better.
I'm going to use the Web Inspector of my browser to
hack the CSS code to improve the page.
I'll give you a more thorough introduction to CSS next week, by the way.
Right now, I'll simply add more padding to all table cells in this design.
See how much better everything looks right away,
that's the magic of using whitespace.
But we also make the search box bigger and give it some more space on the bottom there,
just a handful of changes and a lot of improvements to the design.
Now to be fair, a part of the reason why websites from the 90s looked the way they do,
is that early web design didn't use
CSS for the simple reason that it wasn't available yet.
It was only created in '96 and wasn't implemented fully into browsers until
a few years later and it is quite difficult to get
spacing right with just using HTML alone.
But there is another reason why designers that are new to
the web often have whitespace problems, even today.
It's because they are still afraid of or unaccustomed to designing layouts that scroll.
But remember, space is cheap on websites it's not like print design where you
might not fit all of your content in the allocated space if you use too much white space.
So, you might run out of pages in the book you are designing.
On the web though, we can scroll indefinitely so
our pages can be as long as they need to be and we
already determined in a previous lesson that
scrolling is not something that users are afraid of,
scrolling is a natural act on the web.
Let's take a look at an example that uses whitespace beautifully.
The homepage of the paymo website feels light and
inviting because of a generous amount of whitespace.
The designers didn't cram all the information into the top,
we have to scroll down to see more information.
But that information is presented in a very considered manner.
It's like we get one digestible piece of information at a time.
Here it's one headline that almost takes up the entire space of the screen,
the designers guide our attention quite cunningly and besides
shifts in scale and the use of illustrations for contrast,
it's the use of generous whitespace that makes this design work.