0:00:01.583,0:00:04.109
In this video we’re going to talk about designing with grids

0:00:04.109,0:00:09.683
and using grouping and alignment to convey structure.

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

0:00:15.195,0:00:19.086
and it’s annotated by Sun and it’s [a] web resource.

0:00:19.086,0:00:22.404
This is a Find dialog box, and what you can see is that

0:00:22.404,0:00:28.172
all of the elements in the dialog box have been arranged using a grid.

0:00:28.172,0:00:31.388
And what we mean by a grid is that there’s a set of invisible lines

0:00:31.388,0:00:34.212
that all of the elements on the screen snap to.

0:00:34.212,0:00:38.390
So you can that the top of the dialog box is the Find and then the search area,

0:00:38.390,0:00:41.389
and then below that are all of the parameters,

0:00:41.389,0:00:45.971
and below that still are the Find and Close buttons.

0:00:45.971,0:00:49.593
You’ll notice that the left edge of the parameters lines up with the left edge of the search box,

0:00:49.593,0:00:54.105
and the right edge of the buttons lines up with the right edge of the search box.

0:00:54.105,0:00:57.784
You’ll also notice that the Find, which is the title of the dialog box,

0:00:57.784,0:01:03.443
is hanging off to the left, so that it’s easy to identify the title.

0:01:03.443,0:01:06.337
You can see that the most important information is near the top,

0:01:06.337,0:01:08.814
and how things that are conceptually more related —

0:01:08.814,0:01:15.401
like the parameters that parametrizes the search system — are closer to each other than the buttons —

0:01:15.401,0:01:22.567
still part of the same dialog box but a little further apart — and so they get more space.

0:01:22.567,0:01:25.711
It was at the Bauhaus in Germany in the 1920’s

0:01:25.711,0:01:33.566
that the strategies for designing with grids really came into their own.

0:01:33.566,0:01:36.522
The Bauhaus, at the time, was a revolutionary design school,

0:01:36.522,0:01:41.500
and their graphic designer, Jan Tschichold, wrote this book, called « The New Typography »

0:01:41.500,0:01:46.458
to outlay his vision for modern graphic design.

0:01:46.458,0:01:50.580
It espouses asymmetric typography, sans serif typefaces,

0:01:50.580,0:01:54.916
and a lot of other things that we’ve come to think of as Modernism.

0:01:54.916,0:01:57.665
One thing that’s notable about Tschichold’s book on typography

0:01:57.665,0:01:59.740
is that it reads like a political manifesto:

0:01:59.740,0:02:04.669
He really had this belief that he was changing what design meant for the world,

0:02:04.669,0:02:09.681
stripping it of all of its excess and distilling it down to its bare elements.

0:02:09.681,0:02:13.498
You may or may not elect to follow its principles;

0:02:13.498,0:02:19.577
some of these ideas now seem a little bit reductive, or overly didactic, or too moralizing;

0:02:19.577,0:02:22.788
but there’s a lot in here that’s tremendously useful.

0:02:22.788,0:02:29.477
And this picture is me at the Bauhaus a couple of summers ago.

0:02:29.477,0:02:33.983
So there’s a number of parts that compose a grid system. The main one is a set of columns —

0:02:33.983,0:02:37.434
in this case they’re of equal width, but they don’t necessarily need to be.

0:02:37.434,0:02:43.674
And the second piece is a set of gutters, which is the whitespace in between the columns.

0:02:43.674,0:02:50.111
In addition to that, things are generally horizontally aligned using a baseline.

0:02:50.111,0:02:53.832
You can add text hierarchically — So here we see a title, and a subtitle,

0:02:53.832,0:02:59.867
or maybe a byline or something like that.

0:02:59.867,0:03:02.819
And there’s no need for the grids to all be of equal width.

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

0:03:08.603,0:03:19.051
and then a wide central column that may have the body article or main content of a page.

0:03:19.051,0:03:24.644
Grids are used widely in newspapers, in books, and on the web.

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

0:03:30.860,0:03:37.335
and you can see a nice combination of pictures and text on its home page.

0:03:37.335,0:03:42.621
Here you can see the Stanford homepage, and the invisible grid undergirds this whole structure.

0:03:43.452,0:03:47.346
But that doesn’t mean that everything is one-column wide all the way down.

0:03:47.346,0:03:53.132
One thing that I like about this page is that different elements punch across multiple columns.

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

0:03:58.064,0:04:01.345
You can see how the navigation at the top has five columns;

0:04:01.345,0:04:05.168
the Stanford logo is centred on the first two of those columns;

0:04:05.168,0:04:11.744
and those five columns travel down throughout the major whitespace part of the page.

0:04:11.744,0:04:15.857
The grid is broken somewhat at the bottom, with the footer.

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

0:04:23.415,0:04:31.668
with a sixth column for navigation on the left-hand side.

0:04:31.668,0:04:35.431
You can see how those five columns invisibly travel the entire page,

0:04:35.431,0:04:39.006
and that some of the content in the middle, for example, is two columns wide,

0:04:39.006,0:04:42.307
and which parts are two columns wide vary across the page,

0:04:42.307,0:04:52.908
and so that makes it a little bit more dynamic, so it doesn’t feel too rote and too boring.

0:04:52.908,0:04:57.646
Newspapers have benefitted from grid systems and really pushed the envelope on it for a long time

0:04:57.646,0:05:02.811
so [we] saw a couple of the New York Times to give you a sense of the different ways that they use grids.

0:05:02.811,0:05:08.886
Here’s an example that combines both text and pictures.

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

0:05:15.785,0:05:20.789
and the lower articles down are smaller.

0:05:20.789,0:05:25.405
Here’s an example of a grid on the New York Times homepage that’s far below the fold,

0:05:25.405,0:05:28.537
showing sections and then articles within each section,

0:05:28.537,0:05:33.757
with a small thumbnail picture for each of the sections.

0:05:33.757,0:05:36.489
A grid doesn’t have to be non-overlapping:

0:05:36.489,0:05:42.263
You can have different rows of content on a page adhere to different grids —

0:05:42.263,0:05:44.750
often they’ll have some relationship to each other.

0:05:44.750,0:05:48.853
So I made a quick mockup here, where we have six elements in two rows,

0:05:48.853,0:05:54.855
and the grid is staggered.

0:05:54.855,0:05:56.835
When you’ve content that comes in multiple pieces —

0:05:56.835,0:05:59.542
for example titles of classes and course numbers —

0:05:59.542,0:06:04.297
how should you organize them so that they work well together and are easy to read?

0:06:04.297,0:06:08.773
I’m surprised by how frequently books will take some content like this

0:06:08.773,0:06:14.328
and put these dots — or somehow they’ll separate the two pieces.

0:06:14.328,0:06:19.347
It’s obviously not impossible to read, but I think we can do better.

0:06:19.347,0:06:24.190
Here’s an example where we have right-aligned the smaller element —

0:06:24.190,0:06:29.408
which could be page numbers, or course numbers, or date, or something like that —

0:06:29.408,0:06:36.376
and then we’ve left-aligned the larger element — which is the title or some other larger piece of text.

0:06:36.376,0:06:40.130
The other thing that we’ve done here is we’ve changed the weight of the typeface

0:06:40.130,0:06:44.478
so that the number is a different weight from the text.

0:06:44.478,0:06:50.182
Now, which one is heavy and which one is light? It depends on which one you want to emphasize.

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

0:06:54.655,0:06:57.638
and then when you want to sign up, you may need to find the course number,

0:06:57.638,0:07:02.916
and so that’s a lighter weight because that’s what you’ll use second.

0:07:02.916,0:07:06.257
If you have three pieces of text — for example if you add an instructor name —,

0:07:06.257,0:07:08.879
you can offset that typographically.

0:07:08.879,0:07:12.416
Here’s just an example of adding it over to the right.

0:07:12.416,0:07:15.528
Adding a third column can make things a little bit confusing;

0:07:15.528,0:07:20.229
[but] depending on your content, that can work too.

0:07:20.229,0:07:23.395
Another strategy, of course, is you could put that third element on a separate line.

0:07:23.395,0:07:27.507
Here we see the instructors listed below the course number.

0:07:27.507,0:07:31.267
And if you’re going to do this, have the stuff that chunks together be closer together,

0:07:31.267,0:07:33.642
and the separate chunks be further apart.

0:07:33.642,0:07:36.583
So, what we’re looking at right now is that the leading —

0:07:36.583,0:07:39.561
the inter-line spacing between every line — is identical,

0:07:39.561,0:07:46.852
and that’s sub-optimal, because that’s less clear which element the instructor name goes with.

0:07:46.852,0:07:49.378
If we add a little bit of space in between our elements,

0:07:49.378,0:07:53.765
it becomes clear which instructor groups with which course.

0:07:53.765,0:07:59.764
You can also see a tradeoff here, where, by having two lines per course, it reads very clearly,

0:07:59.764,0:08:05.382
but we’re using up more vertical space — maybe less horizontal space.

0:08:05.382,0:08:08.971
Depending on which screen space or print space you’re laying out into,

0:08:08.971,0:08:13.446
that will change your design decisions.

0:08:13.446,0:08:16.591
Another thing that we might do if we really want to de-emphasize course numbers

0:08:16.591,0:08:29.677
is scale back the grey value of that number, to make them recede further.

0:08:29.677,0:08:32.863
One quick tip is: when you’re creating systems like this,

0:08:32.863,0:08:36.421
make sure to work with the longest block of text first.

0:08:36.421,0:08:38.562
It can be easy to design for a short title

0:08:38.562,0:08:43.330
and then have a grid or alignment system that breaks down when you get to something longer.

0:08:43.330,0:08:47.115
This is especially true if you’re designing for multiple different languages.

0:08:47.115,0:08:51.069
For example, German text often consumes a lot more real estate

0:08:51.069,0:09:01.379
than English or Spanish or French text does.

0:09:01.379,0:09:03.748
We’re going to see examples of different alignment styles

0:09:03.748,0:09:07.287
and when they work in different circumstances in this lecture.

0:09:07.287,0:09:12.519
In general, a high-order rule of thumb is that for left-to-right–reading languages,

0:09:12.519,0:09:18.063
left-aligned text is the fastest for skimming.

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

0:09:22.106,0:09:25.397
and I’ve left all the tabs in, so that’s why you get the crazy ragging.

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

0:09:29.832,0:09:32.552
However, if you wanted to be able to quickly scan things,

0:09:32.552,0:09:39.971
this will be a little bit slower than if everything is aligned.

0:09:39.971,0:09:47.986
Here’s an example of one common design strategy, where “everything is centred.”

0:09:47.986,0:09:52.949
And you can, of course, get the information off of this page [when] you need to;

0:09:52.949,0:09:56.673
but the centring makes it hard to scan for the things that you need.

0:09:56.673,0:09:58.951
Also, there’s a lot of chart junk on this page —

0:09:58.951,0:10:04.270
so the boxes around the overview and the publications are pretty unnecessary

0:10:04.270,0:10:08.207
and makes it slower for your eye to get to the things that you need to.

0:10:08.207,0:10:12.150
If this page were designed using a grid, and the chart junk eliminated,

0:10:12.150,0:10:19.531
then the content itself would move to the fore more strongly.

0:10:19.531,0:10:25.423
So, to sum up, using alignment well helps guide your eye and reduce clutter.

0:10:25.423,0:10:31.462
Avoid slight misalignments, because they undermine your ability to beacon the organization.

0:10:31.462,0:10:36.192
We automatically notice patterns and also deviations from them,

0:10:36.192,0:10:40.390
and so use patterns when you want to convey consistency,

0:10:40.390,0:10:46.929
and deviate from them only when you intentionally want to distinguish that content.

0:10:46.929,0:10:50.230
If your deviation from the pattern is accidental or laziness,

0:10:50.230,0:10:57.688
it will leap out to the eye and distract from the message that you’re trying to get across.

0:10:57.688,0:11:02.885
And you use visual proximity — keeping chunks close together and self-contained,

0:11:02.885,0:11:07.814
and separating chunks further apart — to distinguish what the elements are.

0:11:07.814,0:11:11.625
And you can use scale and hierarchy — making the important things bigger

0:11:11.625,0:11:15.936
and the less important things smaller or scaled back in colour —

0:11:15.936,0:11:28.537
as a way of emphasizing what the more and less important parts of the page are.

0:11:28.537,0:11:33.521
So, when are some examples of when you might use different alignments for different purposes?

0:11:33.521,0:11:38.330
We have a nice example on Amazon’s web site.

0:11:38.330,0:11:43.024
Amazon actually has different parts of their site that they use different kinds of alignment for.

0:11:43.024,0:11:47.195
And you can see the first example here, where in the “Add an address” dialog box,

0:11:47.195,0:11:54.208
the form is aligned so that all of the labels are right-aligned and that the entry fields are left-aligned to that,

0:11:54.208,0:12:01.429
so you get this clear gutter, like what we saw in our courses and titles example.

0:12:01.429,0:12:07.375
This makes what you need to fill out extremely clear.

0:12:07.375,0:12:11.253
Here, on the Account page, you can see all of the labels are left-aligned.

0:12:11.253,0:12:14.332
This page also offers a nice exampleof visual hierarcy,

0:12:14.332,0:12:17.708
where the key piece of the label is very large,

0:12:17.708,0:12:22.354
and the sub-header — which explains in a little more detail — is much smaller

0:12:22.354,0:12:26.371
and is also scaled back in grey value.

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

0:12:31.084,0:12:36.599
where the headers for the form are above the form cell.

0:12:41.614,0:12:45.870
And this diversity is not because three different Amazon designers made three different parts

0:12:45.870,0:12:49.207
and they never coordinated — or at least I assumed that’s not the case.

0:12:49.207,0:12:55.534
My hunch is that Amazon decided strategically what the most important part of each element was,

0:12:55.534,0:12:59.844
and how to make clear to the viewer what they should pay attention to:

0:12:59.844,0:13:01.512
For things that we’re familiar with,

0:13:01.512,0:13:05.278
the headers may be less important than for things that we’re unfamiliar with.

0:13:05.278,0:13:11.248
So, for sign-in, the headers need to stick out less, whereas for the aspects for our account,

0:13:11.248,0:13:18.108
which we may go to less frequently as a page element, we need to have that stick out more.

0:13:18.108,0:13:21.692
In this introductory course, we won’t have a chance to talk much about colour,

0:13:21.692,0:13:24.626
but I’d want to say a little bit here.

0:13:24.626,0:13:30.068
The first and most important thing to say about colour is: Pay attention to it!

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

0:13:36.399,0:13:41.513
Often people rely on colour as a crutch for making visual distinctions in designs,

0:13:41.513,0:13:47.956
and, really, you’ll want to use the other tools first:

0:13:47.956,0:13:56.063
Start up by working with scale and layout as ways of distinguishing elements on the page.

0:13:56.063,0:13:59.429
Then, once you’ve used scale and layout as much as you can,

0:13:59.429,0:14:03.864
you can use luminence as a way of indicating what’s more and less imortant —

0:14:03.864,0:14:07.637
luminence is just a fancy word for grey value, so if you’re designing in greyscale,

0:14:07.637,0:14:14.484
that means some stuff is black, some stuff is grey, some stuff is white.

0:14:14.484,0:14:19.094
And once you’ve got the best design that you can in greyscale — in black and white —,

0:14:19.094,0:14:26.615
then add colour as a way of giving it an additional redundant coding for salience.

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

0:14:31.615,0:14:33.757
And you can see that all of the information that you need

0:14:33.757,0:14:36.578
is clearly set up in terms of the visual order of the page —

0:14:36.578,0:14:43.413
what elements are larger, what elements are smaller.

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

0:14:49.813,0:14:53.205
And that, I think, is the most effective way to use colour.

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

0:14:59.902,0:15:07.163
All things equal, fewer colours is generally more powerful and less overwhelming than more.

0:15:07.163,0:15:08.851
This is obviously going to depend on your taste,

0:15:08.851,0:15:13.575
and this is obviously going to depend on what you’re trying to convey.

0:15:13.575,0:15:16.282
Again from the Java Look and Feel Guidelines,

0:15:16.282,0:15:21.766
here’s an example of how this version of Java used six colours —

0:15:21.766,0:15:24.334
three shades of grey, three shades of purple —

0:15:24.334,0:15:31.112
as a way of organizing all of the elements in their widget library.

0:15:31.112,0:15:37.466
One way that they used colour is that anything that you could click on was some shade of purple,

0:15:37.466,0:15:41.510
and anything that you couldn’t click on was some shade of grey.

0:15:41.510,0:15:44.472
And that provides a nice organizing characteristic,

0:15:44.472,0:15:49.060
and gives a sense to the user of what they can do when they see a particular screen.

0:15:49.060,0:15:53.518
And because colour is used so consistently — colour means clickable —

0:15:53.518,0:15:58.963
it’s really easy to learn, even if subconsciously.

0:15:58.963,0:16:04.572
And I’d like to close with this example of a book. Here’s the first page of Umberto Eco’s book,

0:16:04.572,0:16:08.724
« The Island of the Day Before », and it’s a beautifully typeset book.

0:16:08.724,0:16:11.220
I’d like to point out a couple of things about this book.

0:16:11.220,0:16:16.012
For starters, there’s a quotation from a diary that’s at the beginning of the page

0:16:16.012,0:16:20.253
that’s set off in italic to show that it’s different.

0:16:20.253,0:16:25.917
Then, each chapter begins with a couple of words of text in small caps,

0:16:25.917,0:16:30.106
and there’s a good amount of space above that line of text.

0:16:30.106,0:16:34.386
And finally, there’s a lot of whitespace around the text in general,

0:16:34.386,0:16:38.711
and providing whitespace is important.

0:16:38.711,0:16:43.100
Books and texts that have a little bit of room around them are easier to read

0:16:43.100,0:16:46.092
than ones that are jam-packed out to the edges of the margins.

0:16:46.092,0:16:51.738
That’s one reason why you’ll see hard covers have more whitespace than cheaper paperbacks.

0:16:51.738,0:16:55.645
In the paperback case, they’re trying to save pulp to make it a lower price;

0:16:55.645,0:16:59.886
but the hard covers, which they can charge a little more for, offer more room

0:16:59.886,0:17:05.339
and are easier on the eyes to read.

0:17:05.339,0:17:07.667
If you’re interested in learning more about grids and alignment,

0:17:07.667,0:17:11.031
there’s a lot of great books out there; [but] there’s a couple that I recommend:

0:17:11.046,0:17:16.496
One is Jan Tschichold’s classic, « The New Typography ».

0:17:16.496,0:17:21.884
Another is Kevin Mullet and Darrel Sano’s « Designing Visual Interfaces ».

0:17:21.884,0:17:26.245
And a third is Luke Wroblewski’s « Web Form Design »;

0:17:26.245,0:17:34.845
this is one of the Rosenfeld books, and this whole series is excellent in terms of its HCI.