30 Days to Your First Website Design

Lesson Notes * Using Whitespace in Your Designs

Transcript Hi guys, welcome back to 30 Days to Your First Website Design, a Tuts+ Premium course. I’m Ian Yates and today we’re going to round off all the theory we’ve covered by talking about whitespace. We’ll begin as always by taking a quick look at what we’re going to cover in this video:

• We’ll start off by discussing Whitespace, what it is, and why it’s your friend
• Then before we jump into the next video, we’re then going to quickly recap the past 10 lessons; the planning and conceptual stage of this series

Whitespace is much misunderstood – and often considered to be the bits that are missing from a layout. Actually though, whitespace can more accurately be considered to be what clearly defines elements which occupy positive space in your designs. By using whitespace properly, you can draw focus to what’s really important. In web design we can use whitespace in the form of margins and padding around objects, lending consistency to a layout, and often aiding to de-clutter a page.

Whitespace doesn’t have to be white either, we’re really talking about negative space. Take Graphic Design on the Radio for example. The whitespace we’re referring to isn’t actually the white bit (although there is strong spacing evident within the white section too) but really we’re looking at the blue background which brings your attention directly to the content. Proper spacing can also improve legibility of text, and we’ll discuss that further down the line.

In short though, the lesson here is to embrace whitespace. Don’t dismiss it as something which isn’t there.

OK, it’s time for some further reading: take a look at this article on Webdesigntuts+. It goes over what we’ve been discussing regarding whitespace, talks about micro and macro level spacing, and using it in your designs.

Review Now, before we jump into the next video, let’s have a look back on the theory which we’ve covered so far:

• We started off by looking at planning, remember that? The importance of planning (or the big bit of the iceberg) dictates that by spending more time planning a web design project, we’ll have to spend exponentially less time actually executing the thing.
• We then looked at examining our users and the usability of the site from their perspective. We talked about empathy, putting yourselves in the shoes of other people in order to understand more effectively their motives and desires.
• Next up was content. We looked at what typically should and shouldn’t be included in your design. We also talked about the negative impact of visual noise (I’m sure you remember mrbottles.com), and including things in your layout which you don’t even need.
• We finished up our planning stage by talking about goals. We looked at defining our primary and secondary goals properly, and then aligning them with the users’ desires.
• Kicking off our design concepts section, we began with a few rules. Not copying the work of others, working backwards from a foregone conclusion, and not using all available bells and whistles for the sake of it.
• We then looked at tackling designer’s block, and gaining inspiration from various places. We even looked at becoming inspired by unlikely sources such as illustrators and architecture.
• The next video examined style and theme, poring several examples, including Grunge, Minimalism and current trends such as vintage modernism. We looked at defining a mood, allowing the user to relate with the site, and ensuring that our design is memorable. Lastly, we looked at longevity and its effect on your work.
• We then looked at conceptual sketching, most specifically wireframing. We tackled the application Balsamiq and mocked up a quick wireframe of our own.
• Grids was next on the menu, so we dived in to what grids are, figured out why we should use them, and looked at some examples of sites whose designs do just that. We took a peek at the 960 grid system, downloaded it, and drafted a design using the 960 12 column photoshop template. We then looked at what the baseline grid can do for our typography
• Lastly, we looked at the anatomy of a web page, before finishing up with a quick glimpse at whitespace and its role in your design.

Throughout these videos on planning and design concepts you’ve gained a good understanding of what’s involved before actually jumping into your design. Planning, as we said, is the big bit of the iceberg, but now that we’ve given consideration to all the preliminary aspects of our design process, we can dive into some more practical work.

Next time on 30 Days to Your First Website Design we’re going to dive into the specifics and get our hands dirty with site elements. I’m Ian Yates and from all of us at Tuts+ thanks for watching!