# Presentation: 180579

## How to Build a Better Web site:

- The Story of Web Design

## We spin a yarn.

**Notes:**
We spin a yarn.

## We tell a tale.

## We weave a web.

## It’s always a story.

**Notes:**
The first line in a book often determines whether you will continue to read it or not. The first scene in a movie holds the seed of the story that will unravel in the next 2 hours. Books and movies are linear mediums, progressing sequentially in time. 

The  internet is not. 
So you have to tell the story in a different way on the web.
Story-telling is integral to good web design. An entity that has a web site, is nothing more than a projected presence to a virtual audience. The web site is often the audience’s ONLY way to know you. So you are projecting an IMAGE that tells them: 

## Who you areWhat you doWhat you sellWhy it is goodAnd why they should buy it.

**Notes:**
Who you are
What you do
What you sell
Why it is good
And why they should buy it.

## That’s a story!

**Notes:**
Thinking of it as a projected image frees you to see the possibilities in a web presence, rather than the limitations of medium and  people’s impatience. You want to work with the medium and turn it to gold, and you try to turn impatience into enthrallment.
If you were telling the story in a book, you would tell it a certain way, each page giving you something new, one piece of information overlapping another. In a movie, the images overlap, but also move back and forth in time. 
On the web, you can do both. You can think of your computer screen as one of, say, 300 ghost screens containing the virtual pages of your web links, waiting to be summoned by a click.
The thing that relates these 300 screens is the premise that ties the whole story together.
Sea Grant for example. Just from the name you know that it’s about the earth’s water and money.
The beginning of the Sea Grant story would be about WHY it is about the Sea and money. And the plot would outline HOW.

## What should go where?

**Notes:**
When you frame the thinking around your web site with such simple terms, the apparent complexity becomes easier to manage, because you have some guidelines to help you decide what should go where.
There are some design principles that can help you with this:
They are:
HIERARCHY
SCALE
COLOR
LAYOUT
IMAGE
TYPE 
I’m going to show you a site soon, and we can see what these are while looking at the site.

## LAYOUTNAVIGATIONSCALECOLORSIMAGETYPE

**Notes:**
When I was teaching myself web design, I found a website that inspired me. It still inspires me. A week or two after I had found the website, it showed up on CNN as a website to watch. This is STILL one of the best sites I’ve seen on the web, and I’d like to show you why.

It’s called the First Nine Months

The first nine months story is: 
the development of a baby in the womb, month by month. 

The emotional aspect or “heart” of the story comes from 2 things. It is the father telling the story. It is HIS child’s development that he is celebrating. And second, we are all fathers and mothers and children. It is OUR creation story.

## LAYOUTNAVIGATIONSCALECOLORSIMAGETYPE 

- _[http://www.](http://www.parentsplace.com/first9months/main.html)__[parentsplace](http://www.parentsplace.com/first9months/main.html)__[.com/first9months/main.html](http://www.parentsplace.com/first9months/main.html)_

**Notes:**
Now you might say that with such a powerful idea, he could not fail. But how many boring, clinical diagrams have YOU seen of in-utero development? This designer made it come alive, and here’s how he did that.

The STORY is simply told, and engages you.
 The LAYOUT is dramatic and inviting. 
The NAVIGATION is clear. 
The SCALE is readable. 
The COLORS are pleasing. 
The IMAGE is appropriate--- 
and the TYPE communicates.

VIEW SITE

## LAYOUTNAVIGATIONSCALECOLORSIMAGETYPE 

- _[http://www.](http://www.parentsplace.com/first9months/main.html)__[parentsplace](http://www.parentsplace.com/first9months/main.html)__[.com/first9months/main.html](http://www.parentsplace.com/first9months/main.html)_

**Notes:**
.
VIEW SITE

Talk about layout elements: the way numbers come in and are cued. The background pregnant image, the animation happening only to the right. The colors, the elegant use of space, the use of only one typeface.

## In essence, he’s leading the user, while creating the impression that they are making the choices.

**Notes:**
In essence, he’s leading the user, while giving the impression that they are making the choices. 

## Like aPied Piper.

**Notes:**

Like a Pied Piper

Thank you..