1
00:00:01,087 --> 00:00:05,662
Over the next several lectures, I’d like to introduce you to graphic design

2
00:00:05,662 --> 00:00:10,845
and a set of strategies for helping you communicate more effectively visually.

3
00:00:10,845 --> 00:00:14,348
To start out with, let’s look at this example here:

4
00:00:14,348 --> 00:00:16,779
Some undifferentiated text.

5
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?

6
00:00:24,059 --> 00:00:31,693
One thing that we could is to introduce some white space into a design;

7
00:00:31,693 --> 00:00:34,870
and as Robert Bringhurst writes, with white space,

8
00:00:34,870 --> 00:00:38,363
“Some space must be narrow so that other space must be wide,

9
00:00:38,363 --> 00:00:42,965
and some space must be emptied so that other space may be filled.”

10
00:00:42,965 --> 00:00:46,713
So, let’s empty out some spaces and fill up some others.

11
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

12
00:00:53,608 --> 00:00:59,999
so that the salient bits are grouped together and different bits are further apart.

13
00:00:59,999 --> 00:01:03,368
But I bet we could do more.

14
00:01:03,368 --> 00:01:06,597
So, what else might we’d be able to do here?

15
00:01:06,597 --> 00:01:13,010
Let’s explore using typographic variation and size contrast to give some sense of individual hierarchy

16
00:01:13,010 --> 00:01:19,163
and as Edward Tufte describes it, information consists of differences that make a difference.

17
00:01:19,163 --> 00:01:22,615
So here we’ve done some adding some scale and some weight —

18
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

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

20
00:01:33,689 --> 00:01:38,244
Of course you don’t want to go overboard, but I like this exercise a lot.

21
00:01:38,244 --> 00:01:42,237
I got it from Jenifer Tidwell’s book « Designing Interfaces »

22
00:01:42,237 --> 00:01:45,416
which I highly recommend and I was going to bring it to show in this video.

23
00:01:45,416 --> 00:01:48,281
I have two copies but I recommend it so often

24
00:01:48,281 --> 00:01:51,845
that they’re both lent out right now so you’ll have to look it up.

25
00:01:51,845 --> 00:01:57,227
Often, good visual design — like good acting or good eyeglasses —

26
00:01:57,227 --> 00:02:01,022
goes unnoticed because the content comes through clearly and unobstructed.

27
00:02:01,022 --> 00:02:04,018
Of course, sometimes we do notice good design and good acting

28
00:02:04,018 --> 00:02:09,036
for its flavor or for its ability to communicate a certain idea.

29
00:02:09,036 --> 00:02:12,854
But we notice it in a different way than bad design and bad acting.

30
00:02:12,854 --> 00:02:15,532
Bad design we notice when we trip over it.

31
00:02:15,532 --> 00:02:19,260
Like eyeglasses that are dirty, scratched or have the wrong prescription,

32
00:02:19,260 --> 00:02:22,707
we have to squint to make sense of things; and it’s not always conscious —

33
00:02:22,707 --> 00:02:26,946
sometimes it is just a little bad — it would be subconsciously but we’re still squinting

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

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

36
00:02:38,101 --> 00:02:46,280
The first goal is to guide people to convey the structure, the relative importance and relationships.

37
00:02:46,280 --> 00:02:51,441
The second one is to set up the pase of the interaction to draw people in,

38
00:02:51,441 --> 00:02:55,259
help orient and provide hooks to dive deep.

39
00:02:55,259 --> 00:03:01,539
And the third is to use the visual design to express the message of the information —

40
00:03:01,539 --> 00:03:06,497
to give it some meaning and style and breathe life into the content.

41
00:03:06,497 --> 00:03:12,667
So think about this, I’d like to show four homepages of different sites.

42
00:03:12,667 --> 00:03:14,418
Here’s the New York Times.

43
00:03:15,280 --> 00:03:16,810
Google.

44
00:03:17,348 --> 00:03:18,709
Craigslist.

45
00:03:19,201 --> 00:03:21,959
And the Webby Awards.

46
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,

47
00:03:28,805 --> 00:03:31,470
some more obviously than others.

48
00:03:31,470 --> 00:03:35,537
Let’s go through them again. This time, I’m going to blur each page

49
00:03:35,537 --> 00:03:40,113
to make the hierarchy more salient and by de-emphasizing the actual text.

50
00:03:40,113 --> 00:03:43,540
So, here’s the New York Times blurred out, and you can see

51
00:03:43,540 --> 00:03:47,211
that the overall hierarchy of the page is still pretty clear.

52
00:03:47,211 --> 00:03:49,035
You could see the header,

53
00:03:49,035 --> 00:03:52,882
the exciting image to draw you in, a set of articles,

54
00:03:52,882 --> 00:03:58,071
navigation along the left and another set of navigation along the top.

55
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:

56
00:04:03,633 --> 00:04:07,907
With even just a little blur, the highlighted search and the navigation bar

57
00:04:07,907 --> 00:04:13,495
disappears into the background as the same as the rest of that nav bar.

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

59
00:04:18,720 --> 00:04:21,758
In a sense, the most important part of the top nav highlighting

60
00:04:21,758 --> 00:04:26,298
is to cue the possibility of clicking on other labels to get to other things.

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

62
00:04:32,239 --> 00:04:37,801
This page’s famous minimalism makes the complicated web seem manageable.

63
00:04:37,801 --> 00:04:43,704
And combine with that, the primary colors helped to emphasize the easiness of it all.

64
00:04:43,704 --> 00:04:48,554
As a little bit of trivia, here’s the original Google

65
00:04:48,554 --> 00:04:52,557
from when Larry Page and Sergey Brin were PhD students at Stanford.

66
00:04:52,557 --> 00:04:55,770
They’ve built their first hard drive out of these lego bricks,

67
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

68
00:04:59,645 --> 00:05:04,291
or inspired by these legos.

69
00:05:04,291 --> 00:05:07,217
Here’s the Craigslist homepage.

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

71
00:05:12,033 --> 00:05:15,146
After all, it looks like it was built in about 1996

72
00:05:15,146 --> 00:05:20,345
and in fact it probably was, except for a little bit of updating on the content.

73
00:05:20,345 --> 00:05:23,849
Another reason people often criticize Craigslist is that

74
00:05:23,849 --> 00:05:26,804
there’s a lot of abbreviations and other things on here

75
00:05:26,804 --> 00:05:33,781
which just in general can make it feel inelegant or clunky or designed for experts only.

76
00:05:33,781 --> 00:05:38,521
But a lot of Craigslist users are repeat users, and what you see here is

77
00:05:38,521 --> 00:05:43,706
in the blurred version there is actually a pretty good information hierarchy that’s conveyed.

78
00:05:43,706 --> 00:05:47,000
So again we can see the title up in the top left.

79
00:05:47,000 --> 00:05:50,284
We can see the calendar widget.

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

81
00:05:55,339 --> 00:05:59,069
And then we can see a set of categorized content in the middle

82
00:05:59,069 --> 00:06:02,044
and we can see we have a different kind of navigation on the right —

83
00:06:02,044 --> 00:06:06,996
In the unblurred version we can see that that’s for cities.

84
00:06:06,996 --> 00:06:10,034
And here’s the Webbie Awards.

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

86
00:06:16,480 --> 00:06:18,868
Most of the page is black-and-white.

87
00:06:18,868 --> 00:06:22,254
The main pieces of color we see are in the lower left —

88
00:06:22,254 --> 00:06:27,333
there’s a block of red text, that tells you to watch the latest Webbie Awards.

89
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

90
00:06:31,658 --> 00:06:35,651
and again, we see a strong navigation element along the left hand side,

91
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,

92
00:06:41,516 --> 00:06:46,433
and then we have a major navigation element along the top.

93
00:06:46,433 --> 00:06:49,714
When you think about it, all four of these pages

94
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

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

96
00:07:01,579 --> 00:07:06,037
They’re using typography, they’re using layout, and they’re using color.

97
00:07:06,037 --> 00:07:08,048
And these are in a sense, pretty simple tools.

98
00:07:08,048 --> 00:07:11,866
What continually amazes me is the power that’s available with these tools.

99
00:07:11,866 --> 00:07:17,569
Putting these together provides the guiding, pacing and messaging that we talked about at the beginning.

100
00:07:17,569 --> 00:07:22,440
And that in turn helps people read, navigate and make sense of the world of information.

101
00:07:22,440 --> 00:07:25,417
There’s a board game, a fellow that’s advertised with the tag line,

102
00:07:25,417 --> 00:07:28,002
“A minute to learn, a lifetime to master.”

103
00:07:28,002 --> 00:07:30,747
And that applies beautifully to visual design.

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