-
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 almost 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.
