In this video we’re going to talk about designing with grids

and using grouping and alignment to convey structure.

Here’s an example of a grid: This comes from Java Look and Feel Design Guidelines,

and it’s annotated by Sun and it’s [a] web resource.

This is a Find dialog box, and what you can see is that

all of the elements in the dialog box have been arranged using a grid.

And what we mean by a grid is that there’s a set of invisible lines

that all of the elements on the screen snap to.

So you can that the top of the dialog box is the Find and then the search area,

and then below that are all of the parameters,

and below that still are the Find and Close buttons.

You’ll notice that the left edge of the parameters lines up with the left edge of the search box,

and the right edge of the buttons lines up with the right edge of the search box.

You’ll also notice that the Find, which is the title of the dialog box,

is hanging off to the left, so that it’s easy to identify the title.

You can see that the most important information is near the top,

and how things that are conceptually more related —

like the parameters that parametrizes the search system — are closer to each other than the buttons —

still part of the same dialog box but a little further apart — and so they get more space.

It was at the Bauhaus in Germany in the 1920’s

that the strategies for designing with grids really came into their own.

The Bauhaus, at the time, was a revolutionary design school,

and their graphic designer, Jan Tschichold, wrote this book, called « The New Typography »

to outlay his vision for modern graphic design.

It espouses asymmetric typography, sans serif typefaces,

and a lot of other things that we’ve come to think of as Modernism.

One thing that’s notable about Tschichold’s book on typography

is that it reads like a political manifesto:

He really had this belief that he was changing what design meant for the world,

stripping it of all of its excess and distilling it down to its bare elements.

You may or may not elect to follow its principles;

some of these ideas now seem a little bit reductive, or overly didactic, or too moralizing;

but there’s a lot in here that’s tremendously useful.

And this picture is me at the Bauhaus a couple of summers ago.

So there’s a number of parts that compose a grid system. The main one is a set of columns —

in this case they’re of equal width, but they don’t necessarily need to be.

And the second piece is a set of gutters, which is the whitespace in between the columns.

In addition to that, things are generally horizontally aligned using a baseline.

You can add text hierarchically — So here we see a title, and a subtitle,

or maybe a byline or something like that.

And there’s no need for the grids to all be of equal width.

So here’s a mockup, for example, of a narrow left-hand column that you might use for navigation,

and then a wide central column that may have the body article or main content of a page.

Grids are used widely in newspapers, in books, and on the web.

Here’s an example of Myspace, which the home page right now is a strongly-gridded design,

and you can see a nice combination of pictures and text on its home page.

Here you can see the Stanford homepage, and the invisible grid undergirds this whole structure.

But that doesn’t mean that everything is one-column wide all the way down.

One thing that I like about this page is that different elements punch across multiple columns.

And you can also see how this five-column grid goes across <i>almost</i> the entire page:

You can see how the navigation at the top has five columns;

the Stanford logo is centred on the first two of those columns;

and those five columns travel down throughout the major whitespace part of the page.

The grid is broken somewhat at the bottom, with the footer.

Here is the New York Times homepage where, again, you can see a five-column grid for the content,

with a sixth column for navigation on the left-hand side.

You can see how those five columns invisibly travel the entire page,

and that some of the content in the middle, for example, is two columns wide,

and which parts are two columns wide vary across the page,

and so that makes it a little bit more dynamic, so it doesn’t feel too rote and too boring.

Newspapers have benefitted from grid systems and really pushed the envelope on it for a long time

so [we] saw a couple of the New York Times to give you a sense of the different ways that they use grids.

Here’s an example that combines both text and pictures.

Here you can see a “focus plus context” view, where the most recent article at the top is biggest,

and the lower articles down are smaller.

Here’s an example of a grid on the New York Times homepage that’s far below the fold,

showing sections and then articles within each section,

with a small thumbnail picture for each of the sections.

A grid doesn’t have to be non-overlapping:

You can have different rows of content on a page adhere to different grids —

often they’ll have some relationship to each other.

So I made a quick mockup here, where we have six elements in two rows,

and the grid is staggered.

When you’ve content that comes in multiple pieces —

for example titles of classes and course numbers —

how should you organize them so that they work well together and are easy to read?

I’m surprised by how frequently books will take some content like this

and put these dots — or somehow they’ll separate the two pieces.

It’s obviously not impossible to read, but I think we can do better.

Here’s an example where we have right-aligned the smaller element —

which could be page numbers, or course numbers, or date, or something like that —

and then we’ve left-aligned the larger element — which is the title or some other larger piece of text.

The other thing that we’ve done here is we’ve changed the weight of the typeface

so that the number is a different weight from the text.

Now, which one is heavy and which one is light? It depends on which one you want to emphasize.

Here, the course name is probably more important — that’s what you’re going to scan first —

and then when you want to sign up, you may need to find the course number,

and so that’s a lighter weight because that’s what you’ll use second.

If you have three pieces of text — for example if you add an instructor name —,

you can offset that typographically.

Here’s just an example of adding it over to the right.

Adding a third column can make things a little bit confusing;

[but] depending on your content, that can work too.

Another strategy, of course, is you could put that third element on a separate line.

Here we see the instructors listed below the course number.

And if you’re going to do this, have the stuff that chunks together be closer together,

and the separate chunks be further apart.

So, what we’re looking at right now is that the leading —

the inter-line spacing between every line — is identical,

and that’s sub-optimal, because that’s less clear which element the instructor name goes with.

If we add a little bit of space in between our elements,

it becomes clear which instructor groups with which course.

You can also see a tradeoff here, where, by having two lines per course, it reads very clearly,

but we’re using up more vertical space — maybe less horizontal space.

Depending on which screen space or print space you’re laying out into,

that will change your design decisions.

Another thing that we might do if we really want to de-emphasize course numbers

is scale back the grey value of that number, to make them recede further.

One quick tip is: when you’re creating systems like this,

make sure to work with the longest block of text first.

It can be easy to design for a short title

and then have a grid or alignment system that breaks down when you get to something longer.

This is especially true if you’re designing for multiple different languages.

For example, German text often consumes a lot more real estate

than English or Spanish or French text does.

We’re going to see examples of different alignment styles

and when they work in different circumstances in this lecture.

In general, a high-order rule of thumb is that for left-to-right–reading languages,

left-aligned text is the fastest for skimming.

And you can see that here: I’m taken the same content and centred it,

and I’ve left all the tabs in, so that’s why you get the crazy ragging.

It looks kind of cool, actually, and if you’re going for dynamism, this might work pretty well.

However, if you wanted to be able to quickly scan things,

this will be a little bit slower than if everything is aligned.

Here’s an example of one common design strategy, where “everything is centred.”

And you can, of course, get the information off of this page [when] you need to;

but the centring makes it hard to scan for the things that you need.

Also, there’s a lot of chart junk on this page —

so the boxes around the overview and the publications are pretty unnecessary

and makes it slower for your eye to get to the things that you need to.

If this page were designed using a grid, and the chart junk eliminated,

then the content itself would move to the fore more strongly.

So, to sum up, using alignment well helps guide your eye and reduce clutter.

Avoid slight misalignments, because they undermine your ability to beacon the organization.

We automatically notice patterns and also deviations from them,

and so use patterns when you want to convey consistency,

and deviate from them only when you intentionally want to distinguish that content.

If your deviation from the pattern is accidental or laziness,

it will leap out to the eye and distract from the message that you’re trying to get across.

And you use visual proximity — keeping chunks close together and self-contained,

and separating chunks further apart — to distinguish what the elements are.

And you can use scale and hierarchy — making the important things bigger

and the less important things smaller or scaled back in colour —

as a way of emphasizing what the more and less important parts of the page are.

So, when are some examples of when you might use different alignments for different purposes?

We have a nice example on Amazon’s web site.

Amazon actually has different parts of their site that they use different kinds of alignment for.

And you can see the first example here, where in the “Add an address” dialog box,

the form is aligned so that all of the labels are right-aligned and that the entry fields are left-aligned to that,

so you get this clear gutter, like what we saw in our courses and titles example.

This makes what you need to fill out extremely clear.

Here, on the Account page, you can see all of the labels are left-aligned.

This page also offers a nice exampleof visual hierarcy,

where the key piece of the label is very large,

and the sub-header — which explains in a little more detail — is much smaller

and is also scaled back in grey value.

And finally, on the right-hand side of this very same page, we can see an example of top alignment,

where the headers for the form are above the form cell.

And this diversity is not because three different Amazon designers made three different parts

and they never coordinated — or at least I assumed that’s not the case.

My hunch is that Amazon decided strategically what the most important part of each element was,

and how to make clear to the viewer what they should pay attention to:

For things that we’re familiar with,

the headers may be less important than for things that we’re unfamiliar with.

So, for sign-in, the headers need to stick out less, whereas for the aspects for our account,

which we may go to less frequently as a page element, we need to have that stick out more.

In this introductory course, we won’t have a chance to talk much about colour,

but I’d want to say a little bit here.

The first and most important thing to say about colour is: Pay attention to it!

And if I can give you one strategy for using colour effectively, it’s to design in greyscale first.

Often people rely on colour as a crutch for making visual distinctions in designs,

and, really, you’ll want to use the other tools first:

Start up by working with scale and layout as ways of distinguishing elements on the page.

Then, once you’ve used scale and layout as much as you can,

you can use luminence as a way of indicating what’s more and less imortant —

luminence is just a fancy word for grey value, so if you’re designing in greyscale,

that means some stuff is black, some stuff is grey, some stuff is white.

And once you’ve got the best design that you can in greyscale — in black and white —,

then add colour as a way of giving it an additional redundant coding for salience.

To use Amazon as an example again, here’s one of their search results pages in greyscale.

And you can see that all of the information that you need

is clearly set up in terms of the visual order of the page —

what elements are larger, what elements are smaller.

So the whole thing works in greyscale — in black-and-white —, but if you add colour, it gets even better.

And that, I think, is the most effective way to use colour.

The other thing to say about colour that I think is useful is: By and large, don’t overdo it!

All things equal, fewer colours is generally more powerful and less overwhelming than more.

This is obviously going to depend on your taste,

and this is obviously going to depend on what you’re trying to convey.

Again from the Java Look and Feel Guidelines,

here’s an example of how this version of Java used six colours —

three shades of grey, three shades of purple —

as a way of organizing all of the elements in their widget library.

One way that they used colour is that anything that you could click on was some shade of purple,

and anything that you couldn’t click on was some shade of grey.

And that provides a nice organizing characteristic,

and gives a sense to the user of what they can do when they see a particular screen.

And because colour is used so consistently — colour means clickable —

it’s really easy to learn, even if subconsciously.

And I’d like to close with this example of a book. Here’s the first page of Umberto Eco’s book,

« The Island of the Day Before », and it’s a beautifully typeset book.

I’d like to point out a couple of things about this book.

For starters, there’s a quotation from a diary that’s at the beginning of the page

that’s set off in italic to show that it’s different.

Then, each chapter begins with a couple of words of text in small caps,

and there’s a good amount of space above that line of text.

And finally, there’s a lot of whitespace around the text in general,

and providing whitespace is important.

Books and texts that have a little bit of room around them are easier to read

than ones that are jam-packed out to the edges of the margins.

That’s one reason why you’ll see hard covers have more whitespace than cheaper paperbacks.

In the paperback case, they’re trying to save pulp to make it a lower price;

but the hard covers, which they can charge a little more for, offer more room

and are easier on the eyes to read.

If you’re interested in learning more about grids and alignment,

there’s a lot of great books out there; [but] there’s a couple that I recommend:

One is Jan Tschichold’s classic, « The New Typography ».

Another is Kevin Mullet and Darrel Sano’s « Designing Visual Interfaces ».

And a third is Luke Wroblewski’s « Web Form Design »;

this is one of the Rosenfeld books, and this whole series is excellent in terms of its HCI.