What is whitespace?

Loading...

From the course by California Institute of the Arts

Web Design: Wireframes to Prototypes

ratings

California Institute of the Arts

Web Design: Wireframes to Prototypes

ratings

Course 4 of 4 in the Specialization UI / UX Design

This course is focused on the application of the early UX research to actual user interfaces: the creation of wireframes, high-fidelity mockups, and clickable prototypes. Along the way we will also discuss: - Responsive web design and mobile web challenges - Mobile-first approach - Web typography - The relationship between design and programming and whether it is important to know how to code - The different web technologies that make the web work, such as HTML, CSS, JavaScript, server-side coding, and databases. This course is the continuation of the course Web Design: Strategy and Information Architecture, in which students completed the first half of a large scale project—developing a comprehensive plan for a complex website. If you are intending to complete the assignments in this course to earn a certificate you must complete the Strategy and Information Architecture course first so you have the materials and data needed to begin creating wireframes and mockups in this course.

From the lesson

Finally, Make it Beautiful: The Mockup Phase

We finally reached the point that many of you—especially if you consider yourself a visual designer—have probably been waiting for. We’ll now talk about designing the look and feel for your website. Meaning, we’re ready to design visual mockups. Finally, you’ll get to decide on colors, typefaces, and images. Maybe you’ll create a few illustrations. And your site will need a logo, too. This week, we’ll focus on designing the visual mockups of just the homepage. To find some inspiration, I’ll also have you create a mood board.

Design Principles7:51

What is whitespace?3:55

Using whitespace to style a form3:30

A visual comparison1:34

Meet the Instructors

Roman Jaster
Visiting Faculty, Program in Graphic Design
School of Art

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.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2018 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play