Lecture 7.1: Visual Design (7:37)

Over the next several lectures, I’d like to introduce you to graphic design

and a set of strategies for helping you communicate more effectively visually.

To start out with, let’s look at this example here:

Some undifferentiated text.

What might we be able to do typographically to improve this and how do we decide whether we did well?

One thing that we could is to introduce some white space into a design;

and as Robert Bringhurst writes, with white space,

“Some space must be narrow so that other space must be wide,

and some space must be emptied so that other space may be filled.”

So, let’s empty out some spaces and fill up some others.

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

so that the salient bits are grouped together and different bits are further apart.

But I bet we could do more.

So, what else might we’d be able to do here?

Let’s explore using typographic variation and size contrast to give some sense of individual hierarchy

and as Edward Tufte describes it, information consists of differences that make a difference.

So here we’ve done some adding some scale and some weight —

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

of the kind of leverage that you can get by adding some typographic variation to your design.

Of course you don’t want to go overboard, but I like this exercise a lot.

I got it from Jenifer Tidwell’s book « Designing Interfaces »

which I highly recommend and I was going to bring it to show in this video.

I have two copies but I recommend it so often

that they’re both lent out right now so you’ll have to look it up.

Often, good visual design — like good acting or good eyeglasses —

goes unnoticed because the content comes through clearly and unobstructed.

Of course, sometimes we do notice good design and good acting

for its flavor or for its ability to communicate a certain idea.

But we notice it in a different way than bad design and bad acting.

Bad design we notice when we trip over it.

Like eyeglasses that are dirty, scratched or have the wrong prescription,

we have to squint to make sense of things; and it’s not always conscious —

sometimes it is just a little bad — it would be subconsciously but we’re still squinting

and so a lot of design is about trying to make the information that matters come through clearly.

And to do this, I think there are three major goals of a lot of visual design.

The first goal is to guide people to convey the structure, the relative importance and relationships.

The second one is to set up the pase of the interaction to draw people in,

help orient and provide hooks to dive deep.

And the third is to use the visual design to express the message of the information —

to give it some meaning and style and breathe life into the content.

So think about this, I’d like to show four homepages of different sites.

Here’s the New York Times.

Google.

Craigslist.

And the Webby Awards.

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

some more obviously than others.

Let’s go through them again. This time, I’m going to blur each page

to make the hierarchy more salient and by de-emphasizing the actual text.

So, here’s the New York Times blurred out, and you can see

that the overall hierarchy of the page is still pretty clear.

You could see the header,

the exciting image to draw you in, a set of articles,

navigation along the left and another set of navigation along the top.

Here’s the Google homepage blurred and the blur on that tells you something about the saliency:

With even just a little blur, the highlighted search and the navigation bar

disappears into the background as the same as the rest of that nav bar.

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

In a sense, the most important part of the top nav highlighting

is to cue the possibility of clicking on other labels to get to other things.

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

This page’s famous minimalism makes the complicated web seem manageable.

And combine with that, the primary colors helped to emphasize the easiness of it all.

As a little bit of trivia, here’s the original Google

from when Larry Page and Sergey Brin were PhD students at Stanford.

They’ve built their first hard drive out of these lego bricks,

and I’m pretty sure that that’s where the colors in the Google logo come from

or inspired by these legos.

Here’s the Craigslist homepage.

A lot of people might think I’m crazy in believing that it has a pretty good visual design.

After all, it looks like it was built in about 1996

and in fact it probably was, except for a little bit of updating on the content.

Another reason people often criticize Craigslist is that

there’s a lot of abbreviations and other things on here

which just in general can make it feel inelegant or clunky or designed for experts only.

But a lot of Craigslist users are repeat users, and what you see here is

in the blurred version there is actually a pretty good information hierarchy that’s conveyed.

So again we can see the title up in the top left.

We can see the calendar widget.

We can see how the administration part of things is separated off to the left hand side also.

And then we can see a set of categorized content in the middle

and we can see we have a different kind of navigation on the right —

In the unblurred version we can see that that’s for cities.

And here’s the Webbie Awards.

Like with all four of these pages you can see how color is used sparingly and very effectively.

Most of the page is black-and-white.

The main pieces of color we see are in the lower left —

there’s a block of red text, that tells you to watch the latest Webbie Awards.

And on the top left, we see a little bit of color for the social media that links in with the site

and again, we see a strong navigation element along the left hand side,

the title in the top left, we have the page header in the center here, and the content below it,

and then we have a major navigation element along the top.

When you think about it, all four of these pages

which include some of the most highly-trafficked sites on the web, are using pretty simple visual tools

to be able to convey organization and hierarchy and where to draw your eye on the page.

They’re using typography, they’re using layout, and they’re using color.

And these are in a sense, pretty simple tools.

What continually amazes me is the power that’s available with these tools.

Putting these together provides the guiding, pacing and messaging that we talked about at the beginning.

And that in turn helps people read, navigate and make sense of the world of information.

There’s a board game, a fellow that’s advertised with the tag line,

“A minute to learn, a lifetime to master.”

And that applies beautifully to visual design.

You can start making use of these principles right away, and hopefully these videos would get you started.