How to Recognize Good and Bad Design

Designing for New Media

New Media Design

VocabularyIn her excerpt, Robin

Williams writes about how to recognize (and avoid)

bad web design.

New Media Design

VocabularyIn her excerpt, Robin

Williams writes about how to recognize (and avoid)

bad web design.

She identifies four principles: Contrast,

Repetition, Alignment, and Proximity.

New Media Design

VocabularyAs a memory aid, a better way to remember these

four principles, might be:

New Media Design

VocabularyAs a memory aid, a better way to remember these

four principles, might be:

CRAP.

New Media Design Vocabulary

New Media Design

VocabularyContrast is, of course, “contrasting elements”

that are designed to help “guide your eyes around

the page, create a hierarchy of information, and enable you to skim

through the vast array of information and pick out

what you need.”

New Media Design

VocabularyRepetition aims to “repeat certain elements that tie all

the disparate parts together.” Each page in a web site should look like it

belongs to the same website, company,

concept.

New Media Design

VocabularyAlignment, simply

enough, means that “items on the page are lined up

with each other.”

New Media Design

VocabularyProximity refers to “the relationships that items develop when they are close together, in close

proximity.”

New Media Design

VocabularyWilliams uses lots of

examples to demonstrate when these principles are

working well and are working not so well.

New Media Design

VocabularyWilliams uses lots of

examples to demonstrate when these principles are

working well and are working not so well.

It’s always a good place to start by observing when

things go horribly, horribly wrong.

New Media Design

VocabularyLet’s start off with this outrageous example.

Check this out.

In terms of the four principles, what isn’t

working here?

New Media Design

VocabularyUnfortunately (or

fortunately) often web design issues are a bit

more subtle.

Let’s look at the Twitter home page today.

New Media Design

VocabularyNow, we’re going to

continue putting these terms and skills into

practice by seeking out other websites that do (or don’t) use these principles

successfully.

New Media Design

VocabularyI would like each group to

seek out a series of different websites—sites

that demonstrate the successful use of a design principle and a less-than-successful use of a design

principle.

New Media Design

VocabularySince Williams identifies four key principles, you’ll

need to find eight examples.

I’d like each group find examples of sites that both

successfully and unsuccessfully employ Williams’ four design

principles: alignment, proximity, repetition,

contrast

New Media Design

VocabularyMore importantly, I’m going

to ask you to articulate WHY these websites are (or

are not) successful.

The better your are able to write about what

constitutes good or bad design, the better you’ll be able to apply that to your own work, especially for

Project Two.

New Media Design

VocabularyI’d like to you then write a

few sentences for each example, explaining why your group thought that

this was successful or not.

New Media Design

VocabularyWhen your group has found, discussed and

written about your websites, I’d like each group to share your

findings with the class.

New Media Design

Vocabulary

Good luck and have fun!

How to Recognize Good and Bad Design

Designing for New Media