[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.09,0:00:05.66,Default,,0000,0000,0000,,Over the next several lectures, I’d like to introduce you to graphic design
Dialogue: 0,0:00:05.66,0:00:10.84,Default,,0000,0000,0000,,and a set of strategies for helping you communicate more effectively visually.
Dialogue: 0,0:00:10.84,0:00:14.35,Default,,0000,0000,0000,,To start out with, let’s look at this example here:
Dialogue: 0,0:00:14.35,0:00:16.78,Default,,0000,0000,0000,,Some undifferentiated text.
Dialogue: 0,0:00:16.78,0:00:24.06,Default,,0000,0000,0000,,What might we be able to do typographically to improve this and how do we decide whether we did well?
Dialogue: 0,0:00:24.06,0:00:31.69,Default,,0000,0000,0000,,One thing that we could is to introduce some white space into a design;
Dialogue: 0,0:00:31.69,0:00:34.87,Default,,0000,0000,0000,,and as Robert Bringhurst writes, with white space,
Dialogue: 0,0:00:34.87,0:00:38.36,Default,,0000,0000,0000,,“Some space must be narrow so that other space must be wide,
Dialogue: 0,0:00:38.36,0:00:42.96,Default,,0000,0000,0000,,and some space must be emptied so that other space may be filled.”
Dialogue: 0,0:00:42.96,0:00:46.71,Default,,0000,0000,0000,,So, let’s empty out some spaces and fill up some others.
Dialogue: 0,0:00:46.71,0:00:53.61,Default,,0000,0000,0000,,And what you can see here is by adding a little white space, we are able to chunk the visual design
Dialogue: 0,0:00:53.61,0:00:59.100,Default,,0000,0000,0000,,so that the salient bits are grouped together and different bits are further apart.
Dialogue: 0,0:00:59.100,0:01:03.37,Default,,0000,0000,0000,,But I bet we could do more.
Dialogue: 0,0:01:03.37,0:01:06.60,Default,,0000,0000,0000,,So, what else might we’d be able to do here?
Dialogue: 0,0:01:06.60,0:01:13.01,Default,,0000,0000,0000,,Let’s explore using typographic variation and size contrast to give some sense of individual hierarchy
Dialogue: 0,0:01:13.01,0:01:19.16,Default,,0000,0000,0000,,and as Edward Tufte describes it, information consists of differences that make a difference.
Dialogue: 0,0:01:19.16,0:01:22.62,Default,,0000,0000,0000,,So here we’ve done some adding some scale and some weight —
Dialogue: 0,0:01:22.62,0:01:27.96,Default,,0000,0000,0000,,you know, this may or may not be the best-designed invitation in the world, but it gives you a sense
Dialogue: 0,0:01:27.96,0:01:33.69,Default,,0000,0000,0000,,of the kind of leverage that you can get by adding some typographic variation to your design.
Dialogue: 0,0:01:33.69,0:01:38.24,Default,,0000,0000,0000,,Of course you don’t want to go overboard, but I like this exercise a lot.
Dialogue: 0,0:01:38.24,0:01:42.24,Default,,0000,0000,0000,,I got it from Jenifer Tidwell’s book « Designing Interfaces »
Dialogue: 0,0:01:42.24,0:01:45.42,Default,,0000,0000,0000,,which I highly recommend and I was going to bring it to show in this video.
Dialogue: 0,0:01:45.42,0:01:48.28,Default,,0000,0000,0000,,I have two copies but I recommend it so often
Dialogue: 0,0:01:48.28,0:01:51.84,Default,,0000,0000,0000,,that they’re both lent out right now so you’ll have to look it up.
Dialogue: 0,0:01:51.84,0:01:57.23,Default,,0000,0000,0000,,Often, good visual design — like good acting or good eyeglasses —
Dialogue: 0,0:01:57.23,0:02:01.02,Default,,0000,0000,0000,,goes unnoticed because the content comes through clearly and unobstructed.
Dialogue: 0,0:02:01.02,0:02:04.02,Default,,0000,0000,0000,,Of course, sometimes we do notice good design and good acting
Dialogue: 0,0:02:04.02,0:02:09.04,Default,,0000,0000,0000,,for its flavor or for its ability to communicate a certain idea.
Dialogue: 0,0:02:09.04,0:02:12.85,Default,,0000,0000,0000,,But we notice it in a different way than bad design and bad acting.
Dialogue: 0,0:02:12.85,0:02:15.53,Default,,0000,0000,0000,,Bad design we notice when we trip over it.
Dialogue: 0,0:02:15.53,0:02:19.26,Default,,0000,0000,0000,,Like eyeglasses that are dirty, scratched or have the wrong prescription,
Dialogue: 0,0:02:19.26,0:02:22.71,Default,,0000,0000,0000,,we have to squint to make sense of things; and it’s not always conscious —
Dialogue: 0,0:02:22.71,0:02:26.95,Default,,0000,0000,0000,,sometimes it is just a little bad — it would be subconsciously but we’re still squinting
Dialogue: 0,0:02:26.95,0:02:32.85,Default,,0000,0000,0000,,and so a lot of design is about trying to make the information that matters come through clearly.
Dialogue: 0,0:02:32.85,0:02:38.10,Default,,0000,0000,0000,,And to do this, I think there are three major goals of a lot of visual design.
Dialogue: 0,0:02:38.10,0:02:46.28,Default,,0000,0000,0000,,The first goal is to guide people to convey the structure, the relative importance and relationships.
Dialogue: 0,0:02:46.28,0:02:51.44,Default,,0000,0000,0000,,The second one is to set up the pase of the interaction to draw people in,
Dialogue: 0,0:02:51.44,0:02:55.26,Default,,0000,0000,0000,,help orient and provide hooks to dive deep.
Dialogue: 0,0:02:55.26,0:03:01.54,Default,,0000,0000,0000,,And the third is to use the visual design to express the message of the information —
Dialogue: 0,0:03:01.54,0:03:06.50,Default,,0000,0000,0000,,to give it some meaning and style and breathe life into the content.
Dialogue: 0,0:03:06.50,0:03:12.67,Default,,0000,0000,0000,,So think about this, I’d like to show four homepages of different sites.
Dialogue: 0,0:03:12.67,0:03:14.42,Default,,0000,0000,0000,,Here’s the New York Times.
Dialogue: 0,0:03:15.28,0:03:16.81,Default,,0000,0000,0000,,Google.
Dialogue: 0,0:03:17.35,0:03:18.71,Default,,0000,0000,0000,,Craigslist.
Dialogue: 0,0:03:19.20,0:03:21.96,Default,,0000,0000,0000,,And the Webby Awards.
Dialogue: 0,0:03:21.96,0:03:28.80,Default,,0000,0000,0000,,And I think in all four cases, each of these is really effective at using the tools of visual design,
Dialogue: 0,0:03:28.80,0:03:31.47,Default,,0000,0000,0000,,some more obviously than others.
Dialogue: 0,0:03:31.47,0:03:35.54,Default,,0000,0000,0000,,Let’s go through them again. This time, I’m going to blur each page
Dialogue: 0,0:03:35.54,0:03:40.11,Default,,0000,0000,0000,,to make the hierarchy more salient and by de-emphasizing the actual text.
Dialogue: 0,0:03:40.11,0:03:43.54,Default,,0000,0000,0000,,So, here’s the New York Times blurred out, and you can see
Dialogue: 0,0:03:43.54,0:03:47.21,Default,,0000,0000,0000,,that the overall hierarchy of the page is still pretty clear.
Dialogue: 0,0:03:47.21,0:03:49.04,Default,,0000,0000,0000,,You could see the header,
Dialogue: 0,0:03:49.04,0:03:52.88,Default,,0000,0000,0000,,the exciting image to draw you in, a set of articles,
Dialogue: 0,0:03:52.88,0:03:58.07,Default,,0000,0000,0000,,navigation along the left and another set of navigation along the top.
Dialogue: 0,0:03:58.07,0:04:03.63,Default,,0000,0000,0000,,Here’s the Google homepage blurred and the blur on that tells you something about the saliency:
Dialogue: 0,0:04:03.63,0:04:07.91,Default,,0000,0000,0000,,With even just a little blur, the highlighted search and the navigation bar
Dialogue: 0,0:04:07.91,0:04:13.50,Default,,0000,0000,0000,,disappears into the background as the same as the rest of that nav bar.
Dialogue: 0,0:04:13.50,0:04:18.72,Default,,0000,0000,0000,,But that’s okay because when most people see the screen, it probably have a good idea what to do.
Dialogue: 0,0:04:18.72,0:04:21.76,Default,,0000,0000,0000,,In a sense, the most important part of the top nav highlighting
Dialogue: 0,0:04:21.76,0:04:26.30,Default,,0000,0000,0000,,is to cue the possibility of clicking on other labels to get to other things.
Dialogue: 0,0:04:26.30,0:04:32.24,Default,,0000,0000,0000,,The Google logo, on the other hand, even with the fair amount of blurring, stil l reads loud and clear.
Dialogue: 0,0:04:32.24,0:04:37.80,Default,,0000,0000,0000,,This page’s famous minimalism makes the complicated web seem manageable.
Dialogue: 0,0:04:37.80,0:04:43.70,Default,,0000,0000,0000,,And combine with that, the primary colors helped to emphasize the easiness of it all.
Dialogue: 0,0:04:43.70,0:04:48.55,Default,,0000,0000,0000,,As a little bit of trivia, here’s the original Google
Dialogue: 0,0:04:48.55,0:04:52.56,Default,,0000,0000,0000,,from when Larry Page and Sergey Brin were PhD students at Stanford.
Dialogue: 0,0:04:52.56,0:04:55.77,Default,,0000,0000,0000,,They’ve built their first hard drive out of these lego bricks,
Dialogue: 0,0:04:55.77,0:04:59.64,Default,,0000,0000,0000,,and I’m pretty sure that that’s where the colors in the Google logo come from
Dialogue: 0,0:04:59.64,0:05:04.29,Default,,0000,0000,0000,,or inspired by these legos.
Dialogue: 0,0:05:04.29,0:05:07.22,Default,,0000,0000,0000,,Here’s the Craigslist homepage.
Dialogue: 0,0:05:07.22,0:05:12.03,Default,,0000,0000,0000,,A lot of people might think I’m crazy in believing that it has a pretty good visual design.
Dialogue: 0,0:05:12.03,0:05:15.15,Default,,0000,0000,0000,,After all, it looks like it was built in about 1996
Dialogue: 0,0:05:15.15,0:05:20.34,Default,,0000,0000,0000,,and in fact it probably was, except for a little bit of updating on the content.
Dialogue: 0,0:05:20.34,0:05:23.85,Default,,0000,0000,0000,,Another reason people often criticize Craigslist is that
Dialogue: 0,0:05:23.85,0:05:26.80,Default,,0000,0000,0000,,there’s a lot of abbreviations and other things on here
Dialogue: 0,0:05:26.80,0:05:33.78,Default,,0000,0000,0000,,which just in general can make it feel inelegant or clunky or designed for experts only.
Dialogue: 0,0:05:33.78,0:05:38.52,Default,,0000,0000,0000,,But a lot of Craigslist users are repeat users, and what you see here is
Dialogue: 0,0:05:38.52,0:05:43.71,Default,,0000,0000,0000,,in the blurred version there is actually a pretty good information hierarchy that’s conveyed.
Dialogue: 0,0:05:43.71,0:05:47.00,Default,,0000,0000,0000,,So again we can see the title up in the top left.
Dialogue: 0,0:05:47.00,0:05:50.28,Default,,0000,0000,0000,,We can see the calendar widget.
Dialogue: 0,0:05:50.28,0:05:55.34,Default,,0000,0000,0000,,We can see how the administration part of things is separated off to the left hand side also.
Dialogue: 0,0:05:55.34,0:05:59.07,Default,,0000,0000,0000,,And then we can see a set of categorized content in the middle
Dialogue: 0,0:05:59.07,0:06:02.04,Default,,0000,0000,0000,,and we can see we have a different kind of navigation on the right —
Dialogue: 0,0:06:02.04,0:06:06.100,Default,,0000,0000,0000,,In the unblurred version we can see that that’s for cities.
Dialogue: 0,0:06:06.100,0:06:10.03,Default,,0000,0000,0000,,And here’s the Webbie Awards.
Dialogue: 0,0:06:10.03,0:06:16.48,Default,,0000,0000,0000,,Like with all four of these pages you can see how color is used sparingly and very effectively.
Dialogue: 0,0:06:16.48,0:06:18.87,Default,,0000,0000,0000,,Most of the page is black-and-white.
Dialogue: 0,0:06:18.87,0:06:22.25,Default,,0000,0000,0000,,The main pieces of color we see are in the lower left —
Dialogue: 0,0:06:22.25,0:06:27.33,Default,,0000,0000,0000,,there’s a block of red text, that tells you to watch the latest Webbie Awards.
Dialogue: 0,0:06:27.33,0:06:31.66,Default,,0000,0000,0000,,And on the top left, we see a little bit of color for the social media that links in with the site
Dialogue: 0,0:06:31.66,0:06:35.65,Default,,0000,0000,0000,,and again, we see a strong navigation element along the left hand side,
Dialogue: 0,0:06:35.65,0:06:41.52,Default,,0000,0000,0000,,the title in the top left, we have the page header in the center here, and the content below it,
Dialogue: 0,0:06:41.52,0:06:46.43,Default,,0000,0000,0000,,and then we have a major navigation element along the top.
Dialogue: 0,0:06:46.43,0:06:49.71,Default,,0000,0000,0000,,When you think about it, all four of these pages
Dialogue: 0,0:06:49.71,0:06:55.59,Default,,0000,0000,0000,,which include some of the most highly-trafficked sites on the web, are using pretty simple visual tools
Dialogue: 0,0:06:55.59,0:07:01.58,Default,,0000,0000,0000,,to be able to convey organization and hierarchy and where to draw your eye on the page.
Dialogue: 0,0:07:01.58,0:07:06.04,Default,,0000,0000,0000,,They’re using typography, they’re using layout, and they’re using color.
Dialogue: 0,0:07:06.04,0:07:08.05,Default,,0000,0000,0000,,And these are in a sense, pretty simple tools.
Dialogue: 0,0:07:08.05,0:07:11.87,Default,,0000,0000,0000,,What continually amazes me is the power that’s available with these tools.
Dialogue: 0,0:07:11.87,0:07:17.57,Default,,0000,0000,0000,,Putting these together provides the guiding, pacing and messaging that we talked about at the beginning.
Dialogue: 0,0:07:17.57,0:07:22.44,Default,,0000,0000,0000,,And that in turn helps people read, navigate and make sense of the world of information.
Dialogue: 0,0:07:22.44,0:07:25.42,Default,,0000,0000,0000,,There’s a board game, a fellow that’s advertised with the tag line,
Dialogue: 0,0:07:25.42,0:07:28.00,Default,,0000,0000,0000,,“A minute to learn, a lifetime to master.”
Dialogue: 0,0:07:28.00,0:07:30.75,Default,,0000,0000,0000,,And that applies beautifully to visual design.
Dialogue: 0,0:07:30.75,0:07:39.69,Default,,0000,0000,0000,,You can start making use of these principles right away, and hopefully these videos would get you started.