WEBVTT 00:00:01.087 --> 00:00:05.662 Over the next several lectures, I’d like to introduce you to graphic design 00:00:05.662 --> 00:00:10.845 and a set of strategies for helping you communicate more effectively visually. 00:00:10.845 --> 00:00:14.348 To start out with, let’s look at this example here: 00:00:14.348 --> 00:00:16.779 Some undifferentiated text. 00:00:16.779 --> 00:00:24.059 What might we be able to do typographically to improve this and how do we decide whether we did well? 00:00:24.059 --> 00:00:31.693 One thing that we could is to introduce some white space into a design; 00:00:31.693 --> 00:00:34.870 and as Robert Bringhurst writes, with white space, 00:00:34.870 --> 00:00:38.363 “Some space must be narrow so that other space must be wide, 00:00:38.363 --> 00:00:42.965 and some space must be emptied so that other space may be filled.” 00:00:42.965 --> 00:00:46.713 So, let’s empty out some spaces and fill up some others. 00:00:46.713 --> 00:00:53.608 And what you can see here is by adding a little white space, we are able to chunk the visual design 00:00:53.608 --> 00:00:59.999 so that the salient bits are grouped together and different bits are further apart. 00:00:59.999 --> 00:01:03.368 But I bet we could do more. 00:01:03.368 --> 00:01:06.597 So, what else might we’d be able to do here? 00:01:06.597 --> 00:01:13.010 Let’s explore using typographic variation and size contrast to give some sense of individual hierarchy 00:01:13.010 --> 00:01:19.163 and as Edward Tufte describes it, information consists of differences that make a difference. 00:01:19.163 --> 00:01:22.615 So here we’ve done some adding some scale and some weight — 00:01:22.615 --> 00:01:27.958 you know, this may or may not be the best-designed invitation in the world, but it gives you a sense 00:01:27.958 --> 00:01:33.689 of the kind of leverage that you can get by adding some typographic variation to your design. 00:01:33.689 --> 00:01:38.244 Of course you don’t want to go overboard, but I like this exercise a lot. 00:01:38.244 --> 00:01:42.237 I got it from Jenifer Tidwell’s book « Designing Interfaces » 00:01:42.237 --> 00:01:45.416 which I highly recommend and I was going to bring it to show in this video. 00:01:45.416 --> 00:01:48.281 I have two copies but I recommend it so often 00:01:48.281 --> 00:01:51.845 that they’re both lent out right now so you’ll have to look it up. 00:01:51.845 --> 00:01:57.227 Often, good visual design — like good acting or good eyeglasses — 00:01:57.227 --> 00:02:01.022 goes unnoticed because the content comes through clearly and unobstructed. 00:02:01.022 --> 00:02:04.018 Of course, sometimes we do notice good design and good acting 00:02:04.018 --> 00:02:09.036 for its flavor or for its ability to communicate a certain idea. 00:02:09.036 --> 00:02:12.854 But we notice it in a different way than bad design and bad acting. 00:02:12.854 --> 00:02:15.532 Bad design we notice when we trip over it. 00:02:15.532 --> 00:02:19.260 Like eyeglasses that are dirty, scratched or have the wrong prescription, 00:02:19.260 --> 00:02:22.707 we have to squint to make sense of things; and it’s not always conscious — 00:02:22.707 --> 00:02:26.946 sometimes it is just a little bad — it would be subconsciously but we’re still squinting 00:02:26.946 --> 00:02:32.846 and so a lot of design is about trying to make the information that matters come through clearly. 00:02:32.846 --> 00:02:38.101 And to do this, I think there are three major goals of a lot of visual design. 00:02:38.101 --> 00:02:46.280 The first goal is to guide people to convey the structure, the relative importance and relationships. 00:02:46.280 --> 00:02:51.441 The second one is to set up the pase of the interaction to draw people in, 00:02:51.441 --> 00:02:55.259 help orient and provide hooks to dive deep. 00:02:55.259 --> 00:03:01.539 And the third is to use the visual design to express the message of the information — 00:03:01.539 --> 00:03:06.497 to give it some meaning and style and breathe life into the content. 00:03:06.497 --> 00:03:12.667 So think about this, I’d like to show four homepages of different sites. 00:03:12.667 --> 00:03:14.418 Here’s the New York Times. 00:03:15.280 --> 00:03:16.810 Google. 00:03:17.348 --> 00:03:18.709 Craigslist. 00:03:19.201 --> 00:03:21.959 And the Webby Awards. 00:03:21.959 --> 00:03:28.805 And I think in all four cases, each of these is really effective at using the tools of visual design, 00:03:28.805 --> 00:03:31.470 some more obviously than others. 00:03:31.470 --> 00:03:35.537 Let’s go through them again. This time, I’m going to blur each page 00:03:35.537 --> 00:03:40.113 to make the hierarchy more salient and by de-emphasizing the actual text. 00:03:40.113 --> 00:03:43.540 So, here’s the New York Times blurred out, and you can see 00:03:43.540 --> 00:03:47.211 that the overall hierarchy of the page is still pretty clear. 00:03:47.211 --> 00:03:49.035 You could see the header, 00:03:49.035 --> 00:03:52.882 the exciting image to draw you in, a set of articles, 00:03:52.882 --> 00:03:58.071 navigation along the left and another set of navigation along the top. 00:03:58.071 --> 00:04:03.633 Here’s the Google homepage blurred and the blur on that tells you something about the saliency: 00:04:03.633 --> 00:04:07.907 With even just a little blur, the highlighted search and the navigation bar 00:04:07.907 --> 00:04:13.495 disappears into the background as the same as the rest of that nav bar. 00:04:13.495 --> 00:04:18.720 But that’s okay because when most people see the screen, it probably have a good idea what to do. 00:04:18.720 --> 00:04:21.758 In a sense, the most important part of the top nav highlighting 00:04:21.758 --> 00:04:26.298 is to cue the possibility of clicking on other labels to get to other things. 00:04:26.298 --> 00:04:32.239 The Google logo, on the other hand, even with the fair amount of blurring, stil l reads loud and clear. 00:04:32.239 --> 00:04:37.801 This page’s famous minimalism makes the complicated web seem manageable. 00:04:37.801 --> 00:04:43.704 And combine with that, the primary colors helped to emphasize the easiness of it all. 00:04:43.704 --> 00:04:48.554 As a little bit of trivia, here’s the original Google 00:04:48.554 --> 00:04:52.557 from when Larry Page and Sergey Brin were PhD students at Stanford. 00:04:52.557 --> 00:04:55.770 They’ve built their first hard drive out of these lego bricks, 00:04:55.770 --> 00:04:59.645 and I’m pretty sure that that’s where the colors in the Google logo come from 00:04:59.645 --> 00:05:04.291 or inspired by these legos. 00:05:04.291 --> 00:05:07.217 Here’s the Craigslist homepage. 00:05:07.217 --> 00:05:12.033 A lot of people might think I’m crazy in believing that it has a pretty good visual design. 00:05:12.033 --> 00:05:15.146 After all, it looks like it was built in about 1996 00:05:15.146 --> 00:05:20.345 and in fact it probably was, except for a little bit of updating on the content. 00:05:20.345 --> 00:05:23.849 Another reason people often criticize Craigslist is that 00:05:23.849 --> 00:05:26.804 there’s a lot of abbreviations and other things on here 00:05:26.804 --> 00:05:33.781 which just in general can make it feel inelegant or clunky or designed for experts only. 00:05:33.781 --> 00:05:38.521 But a lot of Craigslist users are repeat users, and what you see here is 00:05:38.521 --> 00:05:43.706 in the blurred version there is actually a pretty good information hierarchy that’s conveyed. 00:05:43.706 --> 00:05:47.000 So again we can see the title up in the top left. 00:05:47.000 --> 00:05:50.284 We can see the calendar widget. 00:05:50.284 --> 00:05:55.339 We can see how the administration part of things is separated off to the left hand side also. 00:05:55.339 --> 00:05:59.069 And then we can see a set of categorized content in the middle 00:05:59.069 --> 00:06:02.044 and we can see we have a different kind of navigation on the right — 00:06:02.044 --> 00:06:06.996 In the unblurred version we can see that that’s for cities. 00:06:06.996 --> 00:06:10.034 And here’s the Webbie Awards. 00:06:10.034 --> 00:06:16.480 Like with all four of these pages you can see how color is used sparingly and very effectively. 00:06:16.480 --> 00:06:18.868 Most of the page is black-and-white. 00:06:18.868 --> 00:06:22.254 The main pieces of color we see are in the lower left — 00:06:22.254 --> 00:06:27.333 there’s a block of red text, that tells you to watch the latest Webbie Awards. 00:06:27.333 --> 00:06:31.658 And on the top left, we see a little bit of color for the social media that links in with the site 00:06:31.658 --> 00:06:35.651 and again, we see a strong navigation element along the left hand side, 00:06:35.651 --> 00:06:41.516 the title in the top left, we have the page header in the center here, and the content below it, 00:06:41.516 --> 00:06:46.433 and then we have a major navigation element along the top. 00:06:46.433 --> 00:06:49.714 When you think about it, all four of these pages 00:06:49.714 --> 00:06:55.588 which include some of the most highly-trafficked sites on the web, are using pretty simple visual tools 00:06:55.588 --> 00:07:01.579 to be able to convey organization and hierarchy and where to draw your eye on the page. 00:07:01.579 --> 00:07:06.037 They’re using typography, they’re using layout, and they’re using color. 00:07:06.037 --> 00:07:08.048 And these are in a sense, pretty simple tools. 00:07:08.048 --> 00:07:11.866 What continually amazes me is the power that’s available with these tools. 00:07:11.866 --> 00:07:17.569 Putting these together provides the guiding, pacing and messaging that we talked about at the beginning. 00:07:17.569 --> 00:07:22.440 And that in turn helps people read, navigate and make sense of the world of information. 00:07:22.440 --> 00:07:25.417 There’s a board game, a fellow that’s advertised with the tag line, 00:07:25.417 --> 00:07:28.002 “A minute to learn, a lifetime to master.” 00:07:28.002 --> 00:07:30.747 And that applies beautifully to visual design. 00:07:30.747 --> 00:07:39.688 You can start making use of these principles right away, and hopefully these videos would get you started.