0:00:01.087,0:00:05.662
Over the next several lectures, I’d like to introduce you to graphic design

0:00:05.662,0:00:10.845
and a set of strategies for helping you communicate more effectively visually.

0:00:10.845,0:00:14.348
To start out with, let’s look at this example here:

0:00:14.348,0:00:16.779
Some undifferentiated text.

0:00:16.779,0:00:24.059
What might we be able to do typographically to improve this and how do we decide whether we did well?

0:00:24.059,0:00:31.693
One thing that we could is to introduce some white space into a design;

0:00:31.693,0:00:34.870
and as Robert Bringhurst writes, with white space,

0:00:34.870,0:00:38.363
“Some space must be narrow so that other space must be wide,

0:00:38.363,0:00:42.965
and some space must be emptied so that other space may be filled.”

0:00:42.965,0:00:46.713
So, let’s empty out some spaces and fill up some others.

0:00:46.713,0:00:53.608
And what you can see here is by adding a little white space, we are able to chunk the visual design

0:00:53.608,0:00:59.999
so that the salient bits are grouped together and different bits are further apart.

0:00:59.999,0:01:03.368
But I bet we could do more.

0:01:03.368,0:01:06.597
So, what else might we’d be able to do here?

0:01:06.597,0:01:13.010
Let’s explore using typographic variation and size contrast to give some sense of individual hierarchy

0:01:13.010,0:01:19.163
and as Edward Tufte describes it, information consists of differences that make a difference.

0:01:19.163,0:01:22.615
So here we’ve done some adding some scale and some weight —

0:01:22.615,0:01:27.958
you know, this may or may not be the best-designed invitation in the world, but it gives you a sense

0:01:27.958,0:01:33.689
of the kind of leverage that you can get by adding some typographic variation to your design.

0:01:33.689,0:01:38.244
Of course you don’t want to go overboard, but I like this exercise a lot.

0:01:38.244,0:01:42.237
I got it from Jenifer Tidwell’s book « Designing Interfaces »

0:01:42.237,0:01:45.416
which I highly recommend and I was going to bring it to show in this video.

0:01:45.416,0:01:48.281
I have two copies but I recommend it so often

0:01:48.281,0:01:51.845
that they’re both lent out right now so you’ll have to look it up.

0:01:51.845,0:01:57.227
Often, good visual design — like good acting or good eyeglasses —

0:01:57.227,0:02:01.022
goes unnoticed because the content comes through clearly and unobstructed.

0:02:01.022,0:02:04.018
Of course, sometimes we do notice good design and good acting

0:02:04.018,0:02:09.036
for its flavor or for its ability to communicate a certain idea.

0:02:09.036,0:02:12.854
But we notice it in a different way than bad design and bad acting.

0:02:12.854,0:02:15.532
Bad design we notice when we trip over it.

0:02:15.532,0:02:19.260
Like eyeglasses that are dirty, scratched or have the wrong prescription,

0:02:19.260,0:02:22.707
we have to squint to make sense of things; and it’s not always conscious —

0:02:22.707,0:02:26.946
sometimes it is just a little bad — it would be subconsciously but we’re still squinting

0:02:26.946,0:02:32.846
and so a lot of design is about trying to make the information that matters come through clearly.

0:02:32.846,0:02:38.101
And to do this, I think there are three major goals of a lot of visual design.

0:02:38.101,0:02:46.280
The first goal is to guide people to convey the structure, the relative importance and relationships.

0:02:46.280,0:02:51.441
The second one is to set up the pase of the interaction to draw people in,

0:02:51.441,0:02:55.259
help orient and provide hooks to dive deep.

0:02:55.259,0:03:01.539
And the third is to use the visual design to express the message of the information —

0:03:01.539,0:03:06.497
to give it some meaning and style and breathe life into the content.

0:03:06.497,0:03:12.667
So think about this, I’d like to show four homepages of different sites.

0:03:12.667,0:03:14.418
Here’s the New York Times.

0:03:15.280,0:03:16.810
Google.

0:03:17.348,0:03:18.709
Craigslist.

0:03:19.201,0:03:21.959
And the Webby Awards.

0:03:21.959,0:03:28.805
And I think in all four cases, each of these is really effective at using the tools of visual design,

0:03:28.805,0:03:31.470
some more obviously than others.

0:03:31.470,0:03:35.537
Let’s go through them again. This time, I’m going to blur each page

0:03:35.537,0:03:40.113
to make the hierarchy more salient and by de-emphasizing the actual text.

0:03:40.113,0:03:43.540
So, here’s the New York Times blurred out, and you can see

0:03:43.540,0:03:47.211
that the overall hierarchy of the page is still pretty clear.

0:03:47.211,0:03:49.035
You could see the header,

0:03:49.035,0:03:52.882
the exciting image to draw you in, a set of articles,

0:03:52.882,0:03:58.071
navigation along the left and another set of navigation along the top.

0:03:58.071,0:04:03.633
Here’s the Google homepage blurred and the blur on that tells you something about the saliency:

0:04:03.633,0:04:07.907
With even just a little blur, the highlighted search and the navigation bar

0:04:07.907,0:04:13.495
disappears into the background as the same as the rest of that nav bar.

0:04:13.495,0:04:18.720
But that’s okay because when most people see the screen, it probably have a good idea what to do.

0:04:18.720,0:04:21.758
In a sense, the most important part of the top nav highlighting

0:04:21.758,0:04:26.298
is to cue the possibility of clicking on other labels to get to other things.

0:04:26.298,0:04:32.239
The Google logo, on the other hand, even with the fair amount of blurring, stil l reads loud and clear.

0:04:32.239,0:04:37.801
This page’s famous minimalism makes the complicated web seem manageable.

0:04:37.801,0:04:43.704
And combine with that, the primary colors helped to emphasize the easiness of it all.

0:04:43.704,0:04:48.554
As a little bit of trivia, here’s the original Google

0:04:48.554,0:04:52.557
from when Larry Page and Sergey Brin were PhD students at Stanford.

0:04:52.557,0:04:55.770
They’ve built their first hard drive out of these lego bricks,

0:04:55.770,0:04:59.645
and I’m pretty sure that that’s where the colors in the Google logo come from

0:04:59.645,0:05:04.291
or inspired by these legos.

0:05:04.291,0:05:07.217
Here’s the Craigslist homepage.

0:05:07.217,0:05:12.033
A lot of people might think I’m crazy in believing that it has a pretty good visual design.

0:05:12.033,0:05:15.146
After all, it looks like it was built in about 1996

0:05:15.146,0:05:20.345
and in fact it probably was, except for a little bit of updating on the content.

0:05:20.345,0:05:23.849
Another reason people often criticize Craigslist is that

0:05:23.849,0:05:26.804
there’s a lot of abbreviations and other things on here

0:05:26.804,0:05:33.781
which just in general can make it feel inelegant or clunky or designed for experts only.

0:05:33.781,0:05:38.521
But a lot of Craigslist users are repeat users, and what you see here is

0:05:38.521,0:05:43.706
in the blurred version there is actually a pretty good information hierarchy that’s conveyed.

0:05:43.706,0:05:47.000
So again we can see the title up in the top left.

0:05:47.000,0:05:50.284
We can see the calendar widget.

0:05:50.284,0:05:55.339
We can see how the administration part of things is separated off to the left hand side also.

0:05:55.339,0:05:59.069
And then we can see a set of categorized content in the middle

0:05:59.069,0:06:02.044
and we can see we have a different kind of navigation on the right —

0:06:02.044,0:06:06.996
In the unblurred version we can see that that’s for cities.

0:06:06.996,0:06:10.034
And here’s the Webbie Awards.

0:06:10.034,0:06:16.480
Like with all four of these pages you can see how color is used sparingly and very effectively.

0:06:16.480,0:06:18.868
Most of the page is black-and-white.

0:06:18.868,0:06:22.254
The main pieces of color we see are in the lower left —

0:06:22.254,0:06:27.333
there’s a block of red text, that tells you to watch the latest Webbie Awards.

0:06:27.333,0: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

0:06:31.658,0:06:35.651
and again, we see a strong navigation element along the left hand side,

0:06:35.651,0:06:41.516
the title in the top left, we have the page header in the center here, and the content below it,

0:06:41.516,0:06:46.433
and then we have a major navigation element along the top.

0:06:46.433,0:06:49.714
When you think about it, all four of these pages

0:06:49.714,0:06:55.588
which include some of the most highly-trafficked sites on the web, are using pretty simple visual tools

0:06:55.588,0:07:01.579
to be able to convey organization and hierarchy and where to draw your eye on the page.

0:07:01.579,0:07:06.037
They’re using typography, they’re using layout, and they’re using color.

0:07:06.037,0:07:08.048
And these are in a sense, pretty simple tools.

0:07:08.048,0:07:11.866
What continually amazes me is the power that’s available with these tools.

0:07:11.866,0:07:17.569
Putting these together provides the guiding, pacing and messaging that we talked about at the beginning.

0:07:17.569,0:07:22.440
And that in turn helps people read, navigate and make sense of the world of information.

0:07:22.440,0:07:25.417
There’s a board game, a fellow that’s advertised with the tag line,

0:07:25.417,0:07:28.002
“A minute to learn, a lifetime to master.”

0:07:28.002,0:07:30.747
And that applies beautifully to visual design.

0:07:30.747,0:07:39.688
You can start making use of these principles right away, and hopefully these videos would get you started.