[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.58,0:00:04.11,Default,,0000,0000,0000,,In this video we’re going to talk about designing with grids
Dialogue: 0,0:00:04.11,0:00:09.68,Default,,0000,0000,0000,,and using grouping and alignment to convey structure.
Dialogue: 0,0:00:09.68,0:00:15.20,Default,,0000,0000,0000,,Here’s an example of a grid: This comes from Java Look and Feel Design Guidelines,
Dialogue: 0,0:00:15.20,0:00:19.09,Default,,0000,0000,0000,,and it’s annotated by Sun and it’s [a] web resource.
Dialogue: 0,0:00:19.09,0:00:22.40,Default,,0000,0000,0000,,This is a Find dialog box, and what you can see is that
Dialogue: 0,0:00:22.40,0:00:28.17,Default,,0000,0000,0000,,all of the elements in the dialog box have been arranged using a grid.
Dialogue: 0,0:00:28.17,0:00:31.39,Default,,0000,0000,0000,,And what we mean by a grid is that there’s a set of invisible lines
Dialogue: 0,0:00:31.39,0:00:34.21,Default,,0000,0000,0000,,that all of the elements on the screen snap to.
Dialogue: 0,0:00:34.21,0:00:38.39,Default,,0000,0000,0000,,So you can that the top of the dialog box is the Find and then the search area,
Dialogue: 0,0:00:38.39,0:00:41.39,Default,,0000,0000,0000,,and then below that are all of the parameters,
Dialogue: 0,0:00:41.39,0:00:45.97,Default,,0000,0000,0000,,and below that still are the Find and Close buttons.
Dialogue: 0,0:00:45.97,0:00:49.59,Default,,0000,0000,0000,,You’ll notice that the left edge of the parameters lines up with the left edge of the search box,
Dialogue: 0,0:00:49.59,0:00:54.10,Default,,0000,0000,0000,,and the right edge of the buttons lines up with the right edge of the search box.
Dialogue: 0,0:00:54.10,0:00:57.78,Default,,0000,0000,0000,,You’ll also notice that the Find, which is the title of the dialog box,
Dialogue: 0,0:00:57.78,0:01:03.44,Default,,0000,0000,0000,,is hanging off to the left, so that it’s easy to identify the title.
Dialogue: 0,0:01:03.44,0:01:06.34,Default,,0000,0000,0000,,You can see that the most important information is near the top,
Dialogue: 0,0:01:06.34,0:01:08.81,Default,,0000,0000,0000,,and how things that are conceptually more related —
Dialogue: 0,0:01:08.81,0:01:15.40,Default,,0000,0000,0000,,like the parameters that parametrizes the search system — are closer to each other than the buttons —
Dialogue: 0,0:01:15.40,0:01:22.57,Default,,0000,0000,0000,,still part of the same dialog box but a little further apart — and so they get more space.
Dialogue: 0,0:01:22.57,0:01:25.71,Default,,0000,0000,0000,,It was at the Bauhaus in Germany in the 1920’s
Dialogue: 0,0:01:25.71,0:01:33.57,Default,,0000,0000,0000,,that the strategies for designing with grids really came into their own.
Dialogue: 0,0:01:33.57,0:01:36.52,Default,,0000,0000,0000,,The Bauhaus, at the time, was a revolutionary design school,
Dialogue: 0,0:01:36.52,0:01:41.50,Default,,0000,0000,0000,,and their graphic designer, Jan Tschichold, wrote this book, called « The New Typography »
Dialogue: 0,0:01:41.50,0:01:46.46,Default,,0000,0000,0000,,to outlay his vision for modern graphic design.
Dialogue: 0,0:01:46.46,0:01:50.58,Default,,0000,0000,0000,,It espouses asymmetric typography, sans serif typefaces,
Dialogue: 0,0:01:50.58,0:01:54.92,Default,,0000,0000,0000,,and a lot of other things that we’ve come to think of as Modernism.
Dialogue: 0,0:01:54.92,0:01:57.66,Default,,0000,0000,0000,,One thing that’s notable about Tschichold’s book on typography
Dialogue: 0,0:01:57.66,0:01:59.74,Default,,0000,0000,0000,,is that it reads like a political manifesto:
Dialogue: 0,0:01:59.74,0:02:04.67,Default,,0000,0000,0000,,He really had this belief that he was changing what design meant for the world,
Dialogue: 0,0:02:04.67,0:02:09.68,Default,,0000,0000,0000,,stripping it of all of its excess and distilling it down to its bare elements.
Dialogue: 0,0:02:09.68,0:02:13.50,Default,,0000,0000,0000,,You may or may not elect to follow its principles;
Dialogue: 0,0:02:13.50,0:02:19.58,Default,,0000,0000,0000,,some of these ideas now seem a little bit reductive, or overly didactic, or too moralizing;
Dialogue: 0,0:02:19.58,0:02:22.79,Default,,0000,0000,0000,,but there’s a lot in here that’s tremendously useful.
Dialogue: 0,0:02:22.79,0:02:29.48,Default,,0000,0000,0000,,And this picture is me at the Bauhaus a couple of summers ago.
Dialogue: 0,0:02:29.48,0:02:33.98,Default,,0000,0000,0000,,So there’s a number of parts that compose a grid system. The main one is a set of columns —
Dialogue: 0,0:02:33.98,0:02:37.43,Default,,0000,0000,0000,,in this case they’re of equal width, but they don’t necessarily need to be.
Dialogue: 0,0:02:37.43,0:02:43.67,Default,,0000,0000,0000,,And the second piece is a set of gutters, which is the whitespace in between the columns.
Dialogue: 0,0:02:43.67,0:02:50.11,Default,,0000,0000,0000,,In addition to that, things are generally horizontally aligned using a baseline.
Dialogue: 0,0:02:50.11,0:02:53.83,Default,,0000,0000,0000,,You can add text hierarchically — So here we see a title, and a subtitle,
Dialogue: 0,0:02:53.83,0:02:59.87,Default,,0000,0000,0000,,or maybe a byline or something like that.
Dialogue: 0,0:02:59.87,0:03:02.82,Default,,0000,0000,0000,,And there’s no need for the grids to all be of equal width.
Dialogue: 0,0:03:02.82,0:03:08.60,Default,,0000,0000,0000,,So here’s a mockup, for example, of a narrow left-hand column that you might use for navigation,
Dialogue: 0,0:03:08.60,0:03:19.05,Default,,0000,0000,0000,,and then a wide central column that may have the body article or main content of a page.
Dialogue: 0,0:03:19.05,0:03:24.64,Default,,0000,0000,0000,,Grids are used widely in newspapers, in books, and on the web.
Dialogue: 0,0:03:24.64,0:03:30.86,Default,,0000,0000,0000,,Here’s an example of Myspace, which the home page right now is a strongly-gridded design,
Dialogue: 0,0:03:30.86,0:03:37.34,Default,,0000,0000,0000,,and you can see a nice combination of pictures and text on its home page.
Dialogue: 0,0:03:37.34,0:03:42.62,Default,,0000,0000,0000,,Here you can see the Stanford homepage, and the invisible grid undergirds this whole structure.
Dialogue: 0,0:03:43.45,0:03:47.35,Default,,0000,0000,0000,,But that doesn’t mean that everything is one-column wide all the way down.
Dialogue: 0,0:03:47.35,0:03:53.13,Default,,0000,0000,0000,,One thing that I like about this page is that different elements punch across multiple columns.
Dialogue: 0,0:03:53.13,0:03:58.06,Default,,0000,0000,0000,,And you can also see how this five-column grid goes across {\i1}almost{\i0} the entire page:
Dialogue: 0,0:03:58.06,0:04:01.34,Default,,0000,0000,0000,,You can see how the navigation at the top has five columns;
Dialogue: 0,0:04:01.34,0:04:05.17,Default,,0000,0000,0000,,the Stanford logo is centred on the first two of those columns;
Dialogue: 0,0:04:05.17,0:04:11.74,Default,,0000,0000,0000,,and those five columns travel down throughout the major whitespace part of the page.
Dialogue: 0,0:04:11.74,0:04:15.86,Default,,0000,0000,0000,,The grid is broken somewhat at the bottom, with the footer.
Dialogue: 0,0:04:19.01,0:04:23.42,Default,,0000,0000,0000,,Here is the New York Times homepage where, again, you can see a five-column grid for the content,
Dialogue: 0,0:04:23.42,0:04:31.67,Default,,0000,0000,0000,,with a sixth column for navigation on the left-hand side.
Dialogue: 0,0:04:31.67,0:04:35.43,Default,,0000,0000,0000,,You can see how those five columns invisibly travel the entire page,
Dialogue: 0,0:04:35.43,0:04:39.01,Default,,0000,0000,0000,,and that some of the content in the middle, for example, is two columns wide,
Dialogue: 0,0:04:39.01,0:04:42.31,Default,,0000,0000,0000,,and which parts are two columns wide vary across the page,
Dialogue: 0,0:04:42.31,0:04:52.91,Default,,0000,0000,0000,,and so that makes it a little bit more dynamic, so it doesn’t feel too rote and too boring.
Dialogue: 0,0:04:52.91,0:04:57.65,Default,,0000,0000,0000,,Newspapers have benefitted from grid systems and really pushed the envelope on it for a long time
Dialogue: 0,0:04:57.65,0:05:02.81,Default,,0000,0000,0000,,so [we] saw a couple of the New York Times to give you a sense of the different ways that they use grids.
Dialogue: 0,0:05:02.81,0:05:08.89,Default,,0000,0000,0000,,Here’s an example that combines both text and pictures.
Dialogue: 0,0:05:08.90,0:05:15.78,Default,,0000,0000,0000,,Here you can see a “focus plus context” view, where the most recent article at the top is biggest,
Dialogue: 0,0:05:15.78,0:05:20.79,Default,,0000,0000,0000,,and the lower articles down are smaller.
Dialogue: 0,0:05:20.79,0:05:25.40,Default,,0000,0000,0000,,Here’s an example of a grid on the New York Times homepage that’s far below the fold,
Dialogue: 0,0:05:25.40,0:05:28.54,Default,,0000,0000,0000,,showing sections and then articles within each section,
Dialogue: 0,0:05:28.54,0:05:33.76,Default,,0000,0000,0000,,with a small thumbnail picture for each of the sections.
Dialogue: 0,0:05:33.76,0:05:36.49,Default,,0000,0000,0000,,A grid doesn’t have to be non-overlapping:
Dialogue: 0,0:05:36.49,0:05:42.26,Default,,0000,0000,0000,,You can have different rows of content on a page adhere to different grids —
Dialogue: 0,0:05:42.26,0:05:44.75,Default,,0000,0000,0000,,often they’ll have some relationship to each other.
Dialogue: 0,0:05:44.75,0:05:48.85,Default,,0000,0000,0000,,So I made a quick mockup here, where we have six elements in two rows,
Dialogue: 0,0:05:48.85,0:05:54.86,Default,,0000,0000,0000,,and the grid is staggered.
Dialogue: 0,0:05:54.86,0:05:56.84,Default,,0000,0000,0000,,When you’ve content that comes in multiple pieces —
Dialogue: 0,0:05:56.84,0:05:59.54,Default,,0000,0000,0000,,for example titles of classes and course numbers —
Dialogue: 0,0:05:59.54,0:06:04.30,Default,,0000,0000,0000,,how should you organize them so that they work well together and are easy to read?
Dialogue: 0,0:06:04.30,0:06:08.77,Default,,0000,0000,0000,,I’m surprised by how frequently books will take some content like this
Dialogue: 0,0:06:08.77,0:06:14.33,Default,,0000,0000,0000,,and put these dots — or somehow they’ll separate the two pieces.
Dialogue: 0,0:06:14.33,0:06:19.35,Default,,0000,0000,0000,,It’s obviously not impossible to read, but I think we can do better.
Dialogue: 0,0:06:19.35,0:06:24.19,Default,,0000,0000,0000,,Here’s an example where we have right-aligned the smaller element —
Dialogue: 0,0:06:24.19,0:06:29.41,Default,,0000,0000,0000,,which could be page numbers, or course numbers, or date, or something like that —
Dialogue: 0,0:06:29.41,0:06:36.38,Default,,0000,0000,0000,,and then we’ve left-aligned the larger element — which is the title or some other larger piece of text.
Dialogue: 0,0:06:36.38,0:06:40.13,Default,,0000,0000,0000,,The other thing that we’ve done here is we’ve changed the weight of the typeface
Dialogue: 0,0:06:40.13,0:06:44.48,Default,,0000,0000,0000,,so that the number is a different weight from the text.
Dialogue: 0,0:06:44.48,0:06:50.18,Default,,0000,0000,0000,,Now, which one is heavy and which one is light? It depends on which one you want to emphasize.
Dialogue: 0,0:06:50.18,0:06:54.66,Default,,0000,0000,0000,,Here, the course name is probably more important — that’s what you’re going to scan first —
Dialogue: 0,0:06:54.66,0:06:57.64,Default,,0000,0000,0000,,and then when you want to sign up, you may need to find the course number,
Dialogue: 0,0:06:57.64,0:07:02.92,Default,,0000,0000,0000,,and so that’s a lighter weight because that’s what you’ll use second.
Dialogue: 0,0:07:02.92,0:07:06.26,Default,,0000,0000,0000,,If you have three pieces of text — for example if you add an instructor name —,
Dialogue: 0,0:07:06.26,0:07:08.88,Default,,0000,0000,0000,,you can offset that typographically.
Dialogue: 0,0:07:08.88,0:07:12.42,Default,,0000,0000,0000,,Here’s just an example of adding it over to the right.
Dialogue: 0,0:07:12.42,0:07:15.53,Default,,0000,0000,0000,,Adding a third column can make things a little bit confusing;
Dialogue: 0,0:07:15.53,0:07:20.23,Default,,0000,0000,0000,,[but] depending on your content, that can work too.
Dialogue: 0,0:07:20.23,0:07:23.40,Default,,0000,0000,0000,,Another strategy, of course, is you could put that third element on a separate line.
Dialogue: 0,0:07:23.40,0:07:27.51,Default,,0000,0000,0000,,Here we see the instructors listed below the course number.
Dialogue: 0,0:07:27.51,0:07:31.27,Default,,0000,0000,0000,,And if you’re going to do this, have the stuff that chunks together be closer together,
Dialogue: 0,0:07:31.27,0:07:33.64,Default,,0000,0000,0000,,and the separate chunks be further apart.
Dialogue: 0,0:07:33.64,0:07:36.58,Default,,0000,0000,0000,,So, what we’re looking at right now is that the leading —
Dialogue: 0,0:07:36.58,0:07:39.56,Default,,0000,0000,0000,,the inter-line spacing between every line — is identical,
Dialogue: 0,0:07:39.56,0:07:46.85,Default,,0000,0000,0000,,and that’s sub-optimal, because that’s less clear which element the instructor name goes with.
Dialogue: 0,0:07:46.85,0:07:49.38,Default,,0000,0000,0000,,If we add a little bit of space in between our elements,
Dialogue: 0,0:07:49.38,0:07:53.76,Default,,0000,0000,0000,,it becomes clear which instructor groups with which course.
Dialogue: 0,0:07:53.76,0:07:59.76,Default,,0000,0000,0000,,You can also see a tradeoff here, where, by having two lines per course, it reads very clearly,
Dialogue: 0,0:07:59.76,0:08:05.38,Default,,0000,0000,0000,,but we’re using up more vertical space — maybe less horizontal space.
Dialogue: 0,0:08:05.38,0:08:08.97,Default,,0000,0000,0000,,Depending on which screen space or print space you’re laying out into,
Dialogue: 0,0:08:08.97,0:08:13.45,Default,,0000,0000,0000,,that will change your design decisions.
Dialogue: 0,0:08:13.45,0:08:16.59,Default,,0000,0000,0000,,Another thing that we might do if we really want to de-emphasize course numbers
Dialogue: 0,0:08:16.59,0:08:29.68,Default,,0000,0000,0000,,is scale back the grey value of that number, to make them recede further.
Dialogue: 0,0:08:29.68,0:08:32.86,Default,,0000,0000,0000,,One quick tip is: when you’re creating systems like this,
Dialogue: 0,0:08:32.86,0:08:36.42,Default,,0000,0000,0000,,make sure to work with the longest block of text first.
Dialogue: 0,0:08:36.42,0:08:38.56,Default,,0000,0000,0000,,It can be easy to design for a short title
Dialogue: 0,0:08:38.56,0:08:43.33,Default,,0000,0000,0000,,and then have a grid or alignment system that breaks down when you get to something longer.
Dialogue: 0,0:08:43.33,0:08:47.12,Default,,0000,0000,0000,,This is especially true if you’re designing for multiple different languages.
Dialogue: 0,0:08:47.12,0:08:51.07,Default,,0000,0000,0000,,For example, German text often consumes a lot more real estate
Dialogue: 0,0:08:51.07,0:09:01.38,Default,,0000,0000,0000,,than English or Spanish or French text does.
Dialogue: 0,0:09:01.38,0:09:03.75,Default,,0000,0000,0000,,We’re going to see examples of different alignment styles
Dialogue: 0,0:09:03.75,0:09:07.29,Default,,0000,0000,0000,,and when they work in different circumstances in this lecture.
Dialogue: 0,0:09:07.29,0:09:12.52,Default,,0000,0000,0000,,In general, a high-order rule of thumb is that for left-to-right–reading languages,
Dialogue: 0,0:09:12.52,0:09:18.06,Default,,0000,0000,0000,,left-aligned text is the fastest for skimming.
Dialogue: 0,0:09:18.06,0:09:22.11,Default,,0000,0000,0000,,And you can see that here: I’m taken the same content and centred it,
Dialogue: 0,0:09:22.11,0:09:25.40,Default,,0000,0000,0000,,and I’ve left all the tabs in, so that’s why you get the crazy ragging.
Dialogue: 0,0:09:25.40,0:09:29.83,Default,,0000,0000,0000,,It looks kind of cool, actually, and if you’re going for dynamism, this might work pretty well.
Dialogue: 0,0:09:29.83,0:09:32.55,Default,,0000,0000,0000,,However, if you wanted to be able to quickly scan things,
Dialogue: 0,0:09:32.55,0:09:39.97,Default,,0000,0000,0000,,this will be a little bit slower than if everything is aligned.
Dialogue: 0,0:09:39.97,0:09:47.99,Default,,0000,0000,0000,,Here’s an example of one common design strategy, where “everything is centred.”
Dialogue: 0,0:09:47.99,0:09:52.95,Default,,0000,0000,0000,,And you can, of course, get the information off of this page [when] you need to;
Dialogue: 0,0:09:52.95,0:09:56.67,Default,,0000,0000,0000,,but the centring makes it hard to scan for the things that you need.
Dialogue: 0,0:09:56.67,0:09:58.95,Default,,0000,0000,0000,,Also, there’s a lot of chart junk on this page —
Dialogue: 0,0:09:58.95,0:10:04.27,Default,,0000,0000,0000,,so the boxes around the overview and the publications are pretty unnecessary
Dialogue: 0,0:10:04.27,0:10:08.21,Default,,0000,0000,0000,,and makes it slower for your eye to get to the things that you need to.
Dialogue: 0,0:10:08.21,0:10:12.15,Default,,0000,0000,0000,,If this page were designed using a grid, and the chart junk eliminated,
Dialogue: 0,0:10:12.15,0:10:19.53,Default,,0000,0000,0000,,then the content itself would move to the fore more strongly.
Dialogue: 0,0:10:19.53,0:10:25.42,Default,,0000,0000,0000,,So, to sum up, using alignment well helps guide your eye and reduce clutter.
Dialogue: 0,0:10:25.42,0:10:31.46,Default,,0000,0000,0000,,Avoid slight misalignments, because they undermine your ability to beacon the organization.
Dialogue: 0,0:10:31.46,0:10:36.19,Default,,0000,0000,0000,,We automatically notice patterns and also deviations from them,
Dialogue: 0,0:10:36.19,0:10:40.39,Default,,0000,0000,0000,,and so use patterns when you want to convey consistency,
Dialogue: 0,0:10:40.39,0:10:46.93,Default,,0000,0000,0000,,and deviate from them only when you intentionally want to distinguish that content.
Dialogue: 0,0:10:46.93,0:10:50.23,Default,,0000,0000,0000,,If your deviation from the pattern is accidental or laziness,
Dialogue: 0,0:10:50.23,0:10:57.69,Default,,0000,0000,0000,,it will leap out to the eye and distract from the message that you’re trying to get across.
Dialogue: 0,0:10:57.69,0:11:02.88,Default,,0000,0000,0000,,And you use visual proximity — keeping chunks close together and self-contained,
Dialogue: 0,0:11:02.88,0:11:07.81,Default,,0000,0000,0000,,and separating chunks further apart — to distinguish what the elements are.
Dialogue: 0,0:11:07.81,0:11:11.62,Default,,0000,0000,0000,,And you can use scale and hierarchy — making the important things bigger
Dialogue: 0,0:11:11.62,0:11:15.94,Default,,0000,0000,0000,,and the less important things smaller or scaled back in colour —
Dialogue: 0,0:11:15.94,0:11:28.54,Default,,0000,0000,0000,,as a way of emphasizing what the more and less important parts of the page are.
Dialogue: 0,0:11:28.54,0:11:33.52,Default,,0000,0000,0000,,So, when are some examples of when you might use different alignments for different purposes?
Dialogue: 0,0:11:33.52,0:11:38.33,Default,,0000,0000,0000,,We have a nice example on Amazon’s web site.
Dialogue: 0,0:11:38.33,0:11:43.02,Default,,0000,0000,0000,,Amazon actually has different parts of their site that they use different kinds of alignment for.
Dialogue: 0,0:11:43.02,0:11:47.20,Default,,0000,0000,0000,,And you can see the first example here, where in the “Add an address” dialog box,
Dialogue: 0,0:11:47.20,0:11:54.21,Default,,0000,0000,0000,,the form is aligned so that all of the labels are right-aligned and that the entry fields are left-aligned to that,
Dialogue: 0,0:11:54.21,0:12:01.43,Default,,0000,0000,0000,,so you get this clear gutter, like what we saw in our courses and titles example.
Dialogue: 0,0:12:01.43,0:12:07.38,Default,,0000,0000,0000,,This makes what you need to fill out extremely clear.
Dialogue: 0,0:12:07.38,0:12:11.25,Default,,0000,0000,0000,,Here, on the Account page, you can see all of the labels are left-aligned.
Dialogue: 0,0:12:11.25,0:12:14.33,Default,,0000,0000,0000,,This page also offers a nice exampleof visual hierarcy,
Dialogue: 0,0:12:14.33,0:12:17.71,Default,,0000,0000,0000,,where the key piece of the label is very large,
Dialogue: 0,0:12:17.71,0:12:22.35,Default,,0000,0000,0000,,and the sub-header — which explains in a little more detail — is much smaller
Dialogue: 0,0:12:22.35,0:12:26.37,Default,,0000,0000,0000,,and is also scaled back in grey value.
Dialogue: 0,0:12:26.37,0:12:31.08,Default,,0000,0000,0000,,And finally, on the right-hand side of this very same page, we can see an example of top alignment,
Dialogue: 0,0:12:31.08,0:12:36.60,Default,,0000,0000,0000,,where the headers for the form are above the form cell.
Dialogue: 0,0:12:41.61,0:12:45.87,Default,,0000,0000,0000,,And this diversity is not because three different Amazon designers made three different parts
Dialogue: 0,0:12:45.87,0:12:49.21,Default,,0000,0000,0000,,and they never coordinated — or at least I assumed that’s not the case.
Dialogue: 0,0:12:49.21,0:12:55.53,Default,,0000,0000,0000,,My hunch is that Amazon decided strategically what the most important part of each element was,
Dialogue: 0,0:12:55.53,0:12:59.84,Default,,0000,0000,0000,,and how to make clear to the viewer what they should pay attention to:
Dialogue: 0,0:12:59.84,0:13:01.51,Default,,0000,0000,0000,,For things that we’re familiar with,
Dialogue: 0,0:13:01.51,0:13:05.28,Default,,0000,0000,0000,,the headers may be less important than for things that we’re unfamiliar with.
Dialogue: 0,0:13:05.28,0:13:11.25,Default,,0000,0000,0000,,So, for sign-in, the headers need to stick out less, whereas for the aspects for our account,
Dialogue: 0,0:13:11.25,0:13:18.11,Default,,0000,0000,0000,,which we may go to less frequently as a page element, we need to have that stick out more.
Dialogue: 0,0:13:18.11,0:13:21.69,Default,,0000,0000,0000,,In this introductory course, we won’t have a chance to talk much about colour,
Dialogue: 0,0:13:21.69,0:13:24.63,Default,,0000,0000,0000,,but I’d want to say a little bit here.
Dialogue: 0,0:13:24.63,0:13:30.07,Default,,0000,0000,0000,,The first and most important thing to say about colour is: Pay attention to it!
Dialogue: 0,0:13:30.07,0:13:36.40,Default,,0000,0000,0000,,And if I can give you one strategy for using colour effectively, it’s to design in greyscale first.
Dialogue: 0,0:13:36.40,0:13:41.51,Default,,0000,0000,0000,,Often people rely on colour as a crutch for making visual distinctions in designs,
Dialogue: 0,0:13:41.51,0:13:47.96,Default,,0000,0000,0000,,and, really, you’ll want to use the other tools first:
Dialogue: 0,0:13:47.96,0:13:56.06,Default,,0000,0000,0000,,Start up by working with scale and layout as ways of distinguishing elements on the page.
Dialogue: 0,0:13:56.06,0:13:59.43,Default,,0000,0000,0000,,Then, once you’ve used scale and layout as much as you can,
Dialogue: 0,0:13:59.43,0:14:03.86,Default,,0000,0000,0000,,you can use luminence as a way of indicating what’s more and less imortant —
Dialogue: 0,0:14:03.86,0:14:07.64,Default,,0000,0000,0000,,luminence is just a fancy word for grey value, so if you’re designing in greyscale,
Dialogue: 0,0:14:07.64,0:14:14.48,Default,,0000,0000,0000,,that means some stuff is black, some stuff is grey, some stuff is white.
Dialogue: 0,0:14:14.48,0:14:19.09,Default,,0000,0000,0000,,And once you’ve got the best design that you can in greyscale — in black and white —,
Dialogue: 0,0:14:19.09,0:14:26.62,Default,,0000,0000,0000,,then add colour as a way of giving it an additional redundant coding for salience.
Dialogue: 0,0:14:26.62,0:14:31.62,Default,,0000,0000,0000,,To use Amazon as an example again, here’s one of their search results pages in greyscale.
Dialogue: 0,0:14:31.62,0:14:33.76,Default,,0000,0000,0000,,And you can see that all of the information that you need
Dialogue: 0,0:14:33.76,0:14:36.58,Default,,0000,0000,0000,,is clearly set up in terms of the visual order of the page —
Dialogue: 0,0:14:36.58,0:14:43.41,Default,,0000,0000,0000,,what elements are larger, what elements are smaller.
Dialogue: 0,0:14:43.41,0:14:49.81,Default,,0000,0000,0000,,So the whole thing works in greyscale — in black-and-white —, but if you add colour, it gets even better.
Dialogue: 0,0:14:49.81,0:14:53.20,Default,,0000,0000,0000,,And that, I think, is the most effective way to use colour.
Dialogue: 0,0:14:53.20,0:14:59.90,Default,,0000,0000,0000,,The other thing to say about colour that I think is useful is: By and large, don’t overdo it!
Dialogue: 0,0:14:59.90,0:15:07.16,Default,,0000,0000,0000,,All things equal, fewer colours is generally more powerful and less overwhelming than more.
Dialogue: 0,0:15:07.16,0:15:08.85,Default,,0000,0000,0000,,This is obviously going to depend on your taste,
Dialogue: 0,0:15:08.85,0:15:13.58,Default,,0000,0000,0000,,and this is obviously going to depend on what you’re trying to convey.
Dialogue: 0,0:15:13.58,0:15:16.28,Default,,0000,0000,0000,,Again from the Java Look and Feel Guidelines,
Dialogue: 0,0:15:16.28,0:15:21.77,Default,,0000,0000,0000,,here’s an example of how this version of Java used six colours —
Dialogue: 0,0:15:21.77,0:15:24.33,Default,,0000,0000,0000,,three shades of grey, three shades of purple —
Dialogue: 0,0:15:24.33,0:15:31.11,Default,,0000,0000,0000,,as a way of organizing all of the elements in their widget library.
Dialogue: 0,0:15:31.11,0:15:37.47,Default,,0000,0000,0000,,One way that they used colour is that anything that you could click on was some shade of purple,
Dialogue: 0,0:15:37.47,0:15:41.51,Default,,0000,0000,0000,,and anything that you couldn’t click on was some shade of grey.
Dialogue: 0,0:15:41.51,0:15:44.47,Default,,0000,0000,0000,,And that provides a nice organizing characteristic,
Dialogue: 0,0:15:44.47,0:15:49.06,Default,,0000,0000,0000,,and gives a sense to the user of what they can do when they see a particular screen.
Dialogue: 0,0:15:49.06,0:15:53.52,Default,,0000,0000,0000,,And because colour is used so consistently — colour means clickable —
Dialogue: 0,0:15:53.52,0:15:58.96,Default,,0000,0000,0000,,it’s really easy to learn, even if subconsciously.
Dialogue: 0,0:15:58.96,0:16:04.57,Default,,0000,0000,0000,,And I’d like to close with this example of a book. Here’s the first page of Umberto Eco’s book,
Dialogue: 0,0:16:04.57,0:16:08.72,Default,,0000,0000,0000,,« The Island of the Day Before », and it’s a beautifully typeset book.
Dialogue: 0,0:16:08.72,0:16:11.22,Default,,0000,0000,0000,,I’d like to point out a couple of things about this book.
Dialogue: 0,0:16:11.22,0:16:16.01,Default,,0000,0000,0000,,For starters, there’s a quotation from a diary that’s at the beginning of the page
Dialogue: 0,0:16:16.01,0:16:20.25,Default,,0000,0000,0000,,that’s set off in italic to show that it’s different.
Dialogue: 0,0:16:20.25,0:16:25.92,Default,,0000,0000,0000,,Then, each chapter begins with a couple of words of text in small caps,
Dialogue: 0,0:16:25.92,0:16:30.11,Default,,0000,0000,0000,,and there’s a good amount of space above that line of text.
Dialogue: 0,0:16:30.11,0:16:34.39,Default,,0000,0000,0000,,And finally, there’s a lot of whitespace around the text in general,
Dialogue: 0,0:16:34.39,0:16:38.71,Default,,0000,0000,0000,,and providing whitespace is important.
Dialogue: 0,0:16:38.71,0:16:43.10,Default,,0000,0000,0000,,Books and texts that have a little bit of room around them are easier to read
Dialogue: 0,0:16:43.10,0:16:46.09,Default,,0000,0000,0000,,than ones that are jam-packed out to the edges of the margins.
Dialogue: 0,0:16:46.09,0:16:51.74,Default,,0000,0000,0000,,That’s one reason why you’ll see hard covers have more whitespace than cheaper paperbacks.
Dialogue: 0,0:16:51.74,0:16:55.64,Default,,0000,0000,0000,,In the paperback case, they’re trying to save pulp to make it a lower price;
Dialogue: 0,0:16:55.64,0:16:59.89,Default,,0000,0000,0000,,but the hard covers, which they can charge a little more for, offer more room
Dialogue: 0,0:16:59.89,0:17:05.34,Default,,0000,0000,0000,,and are easier on the eyes to read.
Dialogue: 0,0:17:05.34,0:17:07.67,Default,,0000,0000,0000,,If you’re interested in learning more about grids and alignment,
Dialogue: 0,0:17:07.67,0:17:11.03,Default,,0000,0000,0000,,there’s a lot of great books out there; [but] there’s a couple that I recommend:
Dialogue: 0,0:17:11.05,0:17:16.50,Default,,0000,0000,0000,,One is Jan Tschichold’s classic, « The New Typography ».
Dialogue: 0,0:17:16.50,0:17:21.88,Default,,0000,0000,0000,,Another is Kevin Mullet and Darrel Sano’s « Designing Visual Interfaces ».
Dialogue: 0,0:17:21.88,0:17:26.24,Default,,0000,0000,0000,,And a third is Luke Wroblewski’s « Web Form Design »;
Dialogue: 0,0:17:26.24,0:17:34.84,Default,,0000,0000,0000,,this is one of the Rosenfeld books, and this whole series is excellent in terms of its HCI.