Return to Video

Lecture 8.1: Grids and Alignment (17:33)

  • 0:02 - 0:04
    In this video we’re going to talk about designing with grids
  • 0:04 - 0:10
    and using grouping and alignment to convey structure.
  • 0:10 - 0:15
    Here’s an example of a grid: This comes from Java Look and Feel Design Guidelines,
  • 0:15 - 0:19
    and it’s annotated by Sun and it’s [a] web resource.
  • 0:19 - 0:22
    This is a Find dialog box, and what you can see is that
  • 0:22 - 0:28
    all of the elements in the dialog box have been arranged using a grid.
  • 0:28 - 0:31
    And what we mean by a grid is that there’s a set of invisible lines
  • 0:31 - 0:34
    that all of the elements on the screen snap to.
  • 0:34 - 0:38
    So you can that the top of the dialog box is the Find and then the search area,
  • 0:38 - 0:41
    and then below that are all of the parameters,
  • 0:41 - 0:46
    and below that still are the Find and Close buttons.
  • 0:46 - 0:50
    You’ll notice that the left edge of the parameters lines up with the left edge of the search box,
  • 0:50 - 0:54
    and the right edge of the buttons lines up with the right edge of the search box.
  • 0:54 - 0:58
    You’ll also notice that the Find, which is the title of the dialog box,
  • 0:58 - 1:03
    is hanging off to the left, so that it’s easy to identify the title.
  • 1:03 - 1:06
    You can see that the most important information is near the top,
  • 1:06 - 1:09
    and how things that are conceptually more related —
  • 1:09 - 1:15
    like the parameters that parametrizes the search system — are closer to each other than the buttons —
  • 1:15 - 1:23
    still part of the same dialog box but a little further apart — and so they get more space.
  • 1:23 - 1:26
    It was at the Bauhaus in Germany in the 1920’s
  • 1:26 - 1:34
    that the strategies for designing with grids really came into their own.
  • 1:34 - 1:37
    The Bauhaus, at the time, was a revolutionary design school,
  • 1:37 - 1:42
    and their graphic designer, Jan Tschichold, wrote this book, called « The New Typography »
  • 1:42 - 1:46
    to outlay his vision for modern graphic design.
  • 1:46 - 1:51
    It espouses asymmetric typography, sans serif typefaces,
  • 1:51 - 1:55
    and a lot of other things that we’ve come to think of as Modernism.
  • 1:55 - 1:58
    One thing that’s notable about Tschichold’s book on typography
  • 1:58 - 2:00
    is that it reads like a political manifesto:
  • 2:00 - 2:05
    He really had this belief that he was changing what design meant for the world,
  • 2:05 - 2:10
    stripping it of all of its excess and distilling it down to its bare elements.
  • 2:10 - 2:13
    You may or may not elect to follow its principles;
  • 2:13 - 2:20
    some of these ideas now seem a little bit reductive, or overly didactic, or too moralizing;
  • 2:20 - 2:23
    but there’s a lot in here that’s tremendously useful.
  • 2:23 - 2:29
    And this picture is me at the Bauhaus a couple of summers ago.
  • 2:29 - 2:34
    So there’s a number of parts that compose a grid system. The main one is a set of columns —
  • 2:34 - 2:37
    in this case they’re of equal width, but they don’t necessarily need to be.
  • 2:37 - 2:44
    And the second piece is a set of gutters, which is the whitespace in between the columns.
  • 2:44 - 2:50
    In addition to that, things are generally horizontally aligned using a baseline.
  • 2:50 - 2:54
    You can add text hierarchically — So here we see a title, and a subtitle,
  • 2:54 - 3:00
    or maybe a byline or something like that.
  • 3:00 - 3:03
    And there’s no need for the grids to all be of equal width.
  • 3:03 - 3:09
    So here’s a mockup, for example, of a narrow left-hand column that you might use for navigation,
  • 3:09 - 3:19
    and then a wide central column that may have the body article or main content of a page.
  • 3:19 - 3:25
    Grids are used widely in newspapers, in books, and on the web.
  • 3:25 - 3:31
    Here’s an example of Myspace, which the home page right now is a strongly-gridded design,
  • 3:31 - 3:37
    and you can see a nice combination of pictures and text on its home page.
  • 3:37 - 3:43
    Here you can see the Stanford homepage, and the invisible grid undergirds this whole structure.
  • 3:43 - 3:47
    But that doesn’t mean that everything is one-column wide all the way down.
  • 3:47 - 3:53
    One thing that I like about this page is that different elements punch across multiple columns.
  • 3:53 - 3:58
    And you can also see how this five-column grid goes across almost the entire page:
  • 3:58 - 4:01
    You can see how the navigation at the top has five columns;
  • 4:01 - 4:05
    the Stanford logo is centred on the first two of those columns;
  • 4:05 - 4:12
    and those five columns travel down throughout the major whitespace part of the page.
  • 4:12 - 4:16
    The grid is broken somewhat at the bottom, with the footer.
  • 4:19 - 4:23
    Here is the New York Times homepage where, again, you can see a five-column grid for the content,
  • 4:23 - 4:32
    with a sixth column for navigation on the left-hand side.
  • 4:32 - 4:35
    You can see how those five columns invisibly travel the entire page,
  • 4:35 - 4:39
    and that some of the content in the middle, for example, is two columns wide,
  • 4:39 - 4:42
    and which parts are two columns wide vary across the page,
  • 4:42 - 4:53
    and so that makes it a little bit more dynamic, so it doesn’t feel too rote and too boring.
  • 4:53 - 4:58
    Newspapers have benefitted from grid systems and really pushed the envelope on it for a long time
  • 4:58 - 5:03
    so [we] saw a couple of the New York Times to give you a sense of the different ways that they use grids.
  • 5:03 - 5:09
    Here’s an example that combines both text and pictures.
  • 5:09 - 5:16
    Here you can see a “focus plus context” view, where the most recent article at the top is biggest,
  • 5:16 - 5:21
    and the lower articles down are smaller.
  • 5:21 - 5:25
    Here’s an example of a grid on the New York Times homepage that’s far below the fold,
  • 5:25 - 5:29
    showing sections and then articles within each section,
  • 5:29 - 5:34
    with a small thumbnail picture for each of the sections.
  • 5:34 - 5:36
    A grid doesn’t have to be non-overlapping:
  • 5:36 - 5:42
    You can have different rows of content on a page adhere to different grids —
  • 5:42 - 5:45
    often they’ll have some relationship to each other.
  • 5:45 - 5:49
    So I made a quick mockup here, where we have six elements in two rows,
  • 5:49 - 5:55
    and the grid is staggered.
  • 5:55 - 5:57
    When you’ve content that comes in multiple pieces —
  • 5:57 - 6:00
    for example titles of classes and course numbers —
  • 6:00 - 6:04
    how should you organize them so that they work well together and are easy to read?
  • 6:04 - 6:09
    I’m surprised by how frequently books will take some content like this
  • 6:09 - 6:14
    and put these dots — or somehow they’ll separate the two pieces.
  • 6:14 - 6:19
    It’s obviously not impossible to read, but I think we can do better.
  • 6:19 - 6:24
    Here’s an example where we have right-aligned the smaller element —
  • 6:24 - 6:29
    which could be page numbers, or course numbers, or date, or something like that —
  • 6:29 - 6:36
    and then we’ve left-aligned the larger element — which is the title or some other larger piece of text.
  • 6:36 - 6:40
    The other thing that we’ve done here is we’ve changed the weight of the typeface
  • 6:40 - 6:44
    so that the number is a different weight from the text.
  • 6:44 - 6:50
    Now, which one is heavy and which one is light? It depends on which one you want to emphasize.
  • 6:50 - 6:55
    Here, the course name is probably more important — that’s what you’re going to scan first —
  • 6:55 - 6:58
    and then when you want to sign up, you may need to find the course number,
  • 6:58 - 7:03
    and so that’s a lighter weight because that’s what you’ll use second.
  • 7:03 - 7:06
    If you have three pieces of text — for example if you add an instructor name —,
  • 7:06 - 7:09
    you can offset that typographically.
  • 7:09 - 7:12
    Here’s just an example of adding it over to the right.
  • 7:12 - 7:16
    Adding a third column can make things a little bit confusing;
  • 7:16 - 7:20
    [but] depending on your content, that can work too.
  • 7:20 - 7:23
    Another strategy, of course, is you could put that third element on a separate line.
  • 7:23 - 7:28
    Here we see the instructors listed below the course number.
  • 7:28 - 7:31
    And if you’re going to do this, have the stuff that chunks together be closer together,
  • 7:31 - 7:34
    and the separate chunks be further apart.
  • 7:34 - 7:37
    So, what we’re looking at right now is that the leading —
  • 7:37 - 7:40
    the inter-line spacing between every line — is identical,
  • 7:40 - 7:47
    and that’s sub-optimal, because that’s less clear which element the instructor name goes with.
  • 7:47 - 7:49
    If we add a little bit of space in between our elements,
  • 7:49 - 7:54
    it becomes clear which instructor groups with which course.
  • 7:54 - 8:00
    You can also see a tradeoff here, where, by having two lines per course, it reads very clearly,
  • 8:00 - 8:05
    but we’re using up more vertical space — maybe less horizontal space.
  • 8:05 - 8:09
    Depending on which screen space or print space you’re laying out into,
  • 8:09 - 8:13
    that will change your design decisions.
  • 8:13 - 8:17
    Another thing that we might do if we really want to de-emphasize course numbers
  • 8:17 - 8:30
    is scale back the grey value of that number, to make them recede further.
  • 8:30 - 8:33
    One quick tip is: when you’re creating systems like this,
  • 8:33 - 8:36
    make sure to work with the longest block of text first.
  • 8:36 - 8:39
    It can be easy to design for a short title
  • 8:39 - 8:43
    and then have a grid or alignment system that breaks down when you get to something longer.
  • 8:43 - 8:47
    This is especially true if you’re designing for multiple different languages.
  • 8:47 - 8:51
    For example, German text often consumes a lot more real estate
  • 8:51 - 9:01
    than English or Spanish or French text does.
  • 9:01 - 9:04
    We’re going to see examples of different alignment styles
  • 9:04 - 9:07
    and when they work in different circumstances in this lecture.
  • 9:07 - 9:13
    In general, a high-order rule of thumb is that for left-to-right–reading languages,
  • 9:13 - 9:18
    left-aligned text is the fastest for skimming.
  • 9:18 - 9:22
    And you can see that here: I’m taken the same content and centred it,
  • 9:22 - 9:25
    and I’ve left all the tabs in, so that’s why you get the crazy ragging.
  • 9:25 - 9:30
    It looks kind of cool, actually, and if you’re going for dynamism, this might work pretty well.
  • 9:30 - 9:33
    However, if you wanted to be able to quickly scan things,
  • 9:33 - 9:40
    this will be a little bit slower than if everything is aligned.
  • 9:40 - 9:48
    Here’s an example of one common design strategy, where “everything is centred.”
  • 9:48 - 9:53
    And you can, of course, get the information off of this page [when] you need to;
  • 9:53 - 9:57
    but the centring makes it hard to scan for the things that you need.
  • 9:57 - 9:59
    Also, there’s a lot of chart junk on this page —
  • 9:59 - 10:04
    so the boxes around the overview and the publications are pretty unnecessary
  • 10:04 - 10:08
    and makes it slower for your eye to get to the things that you need to.
  • 10:08 - 10:12
    If this page were designed using a grid, and the chart junk eliminated,
  • 10:12 - 10:20
    then the content itself would move to the fore more strongly.
  • 10:20 - 10:25
    So, to sum up, using alignment well helps guide your eye and reduce clutter.
  • 10:25 - 10:31
    Avoid slight misalignments, because they undermine your ability to beacon the organization.
  • 10:31 - 10:36
    We automatically notice patterns and also deviations from them,
  • 10:36 - 10:40
    and so use patterns when you want to convey consistency,
  • 10:40 - 10:47
    and deviate from them only when you intentionally want to distinguish that content.
  • 10:47 - 10:50
    If your deviation from the pattern is accidental or laziness,
  • 10:50 - 10:58
    it will leap out to the eye and distract from the message that you’re trying to get across.
  • 10:58 - 11:03
    And you use visual proximity — keeping chunks close together and self-contained,
  • 11:03 - 11:08
    and separating chunks further apart — to distinguish what the elements are.
  • 11:08 - 11:12
    And you can use scale and hierarchy — making the important things bigger
  • 11:12 - 11:16
    and the less important things smaller or scaled back in colour —
  • 11:16 - 11:29
    as a way of emphasizing what the more and less important parts of the page are.
  • 11:29 - 11:34
    So, when are some examples of when you might use different alignments for different purposes?
  • 11:34 - 11:38
    We have a nice example on Amazon’s web site.
  • 11:38 - 11:43
    Amazon actually has different parts of their site that they use different kinds of alignment for.
  • 11:43 - 11:47
    And you can see the first example here, where in the “Add an address” dialog box,
  • 11:47 - 11:54
    the form is aligned so that all of the labels are right-aligned and that the entry fields are left-aligned to that,
  • 11:54 - 12:01
    so you get this clear gutter, like what we saw in our courses and titles example.
  • 12:01 - 12:07
    This makes what you need to fill out extremely clear.
  • 12:07 - 12:11
    Here, on the Account page, you can see all of the labels are left-aligned.
  • 12:11 - 12:14
    This page also offers a nice exampleof visual hierarcy,
  • 12:14 - 12:18
    where the key piece of the label is very large,
  • 12:18 - 12:22
    and the sub-header — which explains in a little more detail — is much smaller
  • 12:22 - 12:26
    and is also scaled back in grey value.
  • 12:26 - 12:31
    And finally, on the right-hand side of this very same page, we can see an example of top alignment,
  • 12:31 - 12:37
    where the headers for the form are above the form cell.
  • 12:42 - 12:46
    And this diversity is not because three different Amazon designers made three different parts
  • 12:46 - 12:49
    and they never coordinated — or at least I assumed that’s not the case.
  • 12:49 - 12:56
    My hunch is that Amazon decided strategically what the most important part of each element was,
  • 12:56 - 13:00
    and how to make clear to the viewer what they should pay attention to:
  • 13:00 - 13:02
    For things that we’re familiar with,
  • 13:02 - 13:05
    the headers may be less important than for things that we’re unfamiliar with.
  • 13:05 - 13:11
    So, for sign-in, the headers need to stick out less, whereas for the aspects for our account,
  • 13:11 - 13:18
    which we may go to less frequently as a page element, we need to have that stick out more.
  • 13:18 - 13:22
    In this introductory course, we won’t have a chance to talk much about colour,
  • 13:22 - 13:25
    but I’d want to say a little bit here.
  • 13:25 - 13:30
    The first and most important thing to say about colour is: Pay attention to it!
  • 13:30 - 13:36
    And if I can give you one strategy for using colour effectively, it’s to design in greyscale first.
  • 13:36 - 13:42
    Often people rely on colour as a crutch for making visual distinctions in designs,
  • 13:42 - 13:48
    and, really, you’ll want to use the other tools first:
  • 13:48 - 13:56
    Start up by working with scale and layout as ways of distinguishing elements on the page.
  • 13:56 - 13:59
    Then, once you’ve used scale and layout as much as you can,
  • 13:59 - 14:04
    you can use luminence as a way of indicating what’s more and less imortant —
  • 14:04 - 14:08
    luminence is just a fancy word for grey value, so if you’re designing in greyscale,
  • 14:08 - 14:14
    that means some stuff is black, some stuff is grey, some stuff is white.
  • 14:14 - 14:19
    And once you’ve got the best design that you can in greyscale — in black and white —,
  • 14:19 - 14:27
    then add colour as a way of giving it an additional redundant coding for salience.
  • 14:27 - 14:32
    To use Amazon as an example again, here’s one of their search results pages in greyscale.
  • 14:32 - 14:34
    And you can see that all of the information that you need
  • 14:34 - 14:37
    is clearly set up in terms of the visual order of the page —
  • 14:37 - 14:43
    what elements are larger, what elements are smaller.
  • 14:43 - 14:50
    So the whole thing works in greyscale — in black-and-white —, but if you add colour, it gets even better.
  • 14:50 - 14:53
    And that, I think, is the most effective way to use colour.
  • 14:53 - 15:00
    The other thing to say about colour that I think is useful is: By and large, don’t overdo it!
  • 15:00 - 15:07
    All things equal, fewer colours is generally more powerful and less overwhelming than more.
  • 15:07 - 15:09
    This is obviously going to depend on your taste,
  • 15:09 - 15:14
    and this is obviously going to depend on what you’re trying to convey.
  • 15:14 - 15:16
    Again from the Java Look and Feel Guidelines,
  • 15:16 - 15:22
    here’s an example of how this version of Java used six colours —
  • 15:22 - 15:24
    three shades of grey, three shades of purple —
  • 15:24 - 15:31
    as a way of organizing all of the elements in their widget library.
  • 15:31 - 15:37
    One way that they used colour is that anything that you could click on was some shade of purple,
  • 15:37 - 15:42
    and anything that you couldn’t click on was some shade of grey.
  • 15:42 - 15:44
    And that provides a nice organizing characteristic,
  • 15:44 - 15:49
    and gives a sense to the user of what they can do when they see a particular screen.
  • 15:49 - 15:54
    And because colour is used so consistently — colour means clickable —
  • 15:54 - 15:59
    it’s really easy to learn, even if subconsciously.
  • 15:59 - 16:05
    And I’d like to close with this example of a book. Here’s the first page of Umberto Eco’s book,
  • 16:05 - 16:09
    « The Island of the Day Before », and it’s a beautifully typeset book.
  • 16:09 - 16:11
    I’d like to point out a couple of things about this book.
  • 16:11 - 16:16
    For starters, there’s a quotation from a diary that’s at the beginning of the page
  • 16:16 - 16:20
    that’s set off in italic to show that it’s different.
  • 16:20 - 16:26
    Then, each chapter begins with a couple of words of text in small caps,
  • 16:26 - 16:30
    and there’s a good amount of space above that line of text.
  • 16:30 - 16:34
    And finally, there’s a lot of whitespace around the text in general,
  • 16:34 - 16:39
    and providing whitespace is important.
  • 16:39 - 16:43
    Books and texts that have a little bit of room around them are easier to read
  • 16:43 - 16:46
    than ones that are jam-packed out to the edges of the margins.
  • 16:46 - 16:52
    That’s one reason why you’ll see hard covers have more whitespace than cheaper paperbacks.
  • 16:52 - 16:56
    In the paperback case, they’re trying to save pulp to make it a lower price;
  • 16:56 - 17:00
    but the hard covers, which they can charge a little more for, offer more room
  • 17:00 - 17:05
    and are easier on the eyes to read.
  • 17:05 - 17:08
    If you’re interested in learning more about grids and alignment,
  • 17:08 - 17:11
    there’s a lot of great books out there; [but] there’s a couple that I recommend:
  • 17:11 - 17:16
    One is Jan Tschichold’s classic, « The New Typography ».
  • 17:16 - 17:22
    Another is Kevin Mullet and Darrel Sano’s « Designing Visual Interfaces ».
  • 17:22 - 17:26
    And a third is Luke Wroblewski’s « Web Form Design »;
  • 17:26 - 17:35
    this is one of the Rosenfeld books, and this whole series is excellent in terms of its HCI.
Title:
Lecture 8.1: Grids and Alignment (17:33)
Video Language:
English

English subtitles

Revisions Compare revisions