1. Goals 2. Identify Target Audience 3. Define the Look & Feel 4. Developing Specifications

1. Goals

2. Identify Target

Audience

3. Define the Look &

Feel

4. Developing

Specifications

1. Goals:

What do we want to

accomplish?

•

informational

only

•

interactive such

as gaming or

multimedia

•

e-commerce

PLANNING A WEBSITE

2. Identify Target

Audience

Understand the

potential viewers:

Example: children respond

to exploration and

surprise

Have a dog wag its

tail when the

mouse rolls over it

PLANNING A WEBSITE

3. Define the Look

& Feel

Howhost.com

How will the Web

site be presented

to the user:

•

tone

•

approach

•

emphasis

PLANNING A WEBSITE

Tone,

will the Web

site be:

•

Humorous

•

Serious

•

Light

•

Heavy

•

Formal

•

Informal

The tone can be used

to make a

statement-Example:

PLANNING A WEBSITE

EXAMPLEs OF TWO DIFFERENT TONEs: British number one Andy Murray admits he will have to improve if he is to beat Rafael Nadal in Friday’s

Wimbledon semi-final.

The Scot believes his growing maturity and experience can help him overcome the number one seed.

- BBC News 2011

Andy Murray has a massive challenge on his hands. He’s taking on the best player in the world, Rafael Nadal, in the Wimbledon semi-finals on Friday, but Andy says he’s ready!

Andy says: “I just have to go out there and play well, serve well, and believe I’ll have a chance.” - CBBC Newsround

Approach:

how much direction will be provided to the user

Puregrips.com

Interactive game:

might focus on exploration as when a user points to an object it changes or becomes animated

Informational:

might provide lots of direction and include lists of options in drop-down menus

4. Developing

Specifications

Wire Chart

Specifications:

•

Navigation –

connections using a Wire Chart

•

Layout –

•

CSS formatting

PLANNING A WEBSITE (WEB DESIGN)

Home

Gallery

Animation Graphic _Design

About Me

Contact Me

Workflow Process

•

Create/Acquire

Layout Elements

•

Arrange according

to layout

•

Add interactivity –

nav btns, video,

etc.

•

Format

•

Test, Publish

PLANNING WEBSITE

DEFINING GOOD DESIGN -

NAVIGATION

Navigation is Intuitive

• The main navigation block should be clearly visible on the page • Each link should have a descriptive title

• The navigation structure is consistant across the Web site

• The navigation itself changes appearance when a mouse hovers • The navigation structure indicates the active page or section

DEFINING GOOD DESIGN -

CONSISTENCY

Storyboard:

•

Balance

•

Consistency

•

Theme

•

Simple, Easy

•

Provide Feedback

PLANNING A WEBSITE

 _{Use other designs, templates as} guidelines

 _{Provide more than one layout,} usually 3 samples (build 3 templates for Home page)

DEFINING GOOD DESIGN –

LAYOUT OF PAGE

1. Container

2. Logo, banner

3. Navigation

4. Content

5. Footer

6. Whitespace

PLANNING A WEBSITE -

LAYOUT -

WIRE FRAME EACH PAGE

Company Logo

Image – different on each page

General info about event Event Branding Navigation Register Background Image

Columned paragraphs using

table, background color is solidDivision Block -solid color_{Text for each page} Division Block -_{solid color} News items

Footer

Copyright, Webmaster, Contact Newsletter Sign-up

DEFINING GOOD DESIGN –

GRID THEORY

• Making things square and line up

• Proportion helps divide the elements across the page

• Compositions divided by lines that are proportionate are

aesthetically pleasing • Rule of Thirds

• Golden ratio – line bisected by the golden ratio is divided into two

sections

DEFINING GOOD DESIGN –

WEB PAGE CREATED WITH A

GRID

DEFINING GOOD DESIGN –

BALANCE

Symmetrical Balance :

DEFINING GOOD DESIGN –

UNITY

UNITY - a unified layout is one that works as a whole rather than being identified as separate pieces.

The monkey image above demonstrates similarity in shape and color enables them to be recognized as a group rather than 4 separate elements.

a page design element: • similarity in shapes • similarity in colors • grouping of items

DEFINING GOOD DESIGN –

PROXIMITY

Proximity- a way to make a group of objects feel like a single unit. Placing objects close together within a layout creates

DEFINING GOOD DESIGN –

REPETITION

Anytime you bring a set of like items together they form a GROUP.

Repetition - repeating colors, shapes, textures, and similar objects to help Tie a Web page design together to form a cohesive unit.

DEFINING GOOD DESIGN –

EMPHASIS

Other items to consider when designing:

• Emphasis -making a particular feature draw the viewer’s attention

• Focal point

• Placement - the top-left corner of the Web page draws a users eye initially

• Continuance – the item that makes our eyes start in one place and moves in one direction along a path until a more dominant feature comes along.

DEFINING GOOD DESIGN –

ISOLATION

• Isolation – promotes emphasis!

• Contrast - is defined as the juxtaposition of dissimilar graphic elements and the most common method used to create emphasis in a layout.

• Concept: the greater the difference between a graphic element and its

DEFINING GOOD DESIGN –

MOST COMMON LAYOUTS

DEFINING GOOD DESIGN –

MOST COMMON LAYOUTS

DEFINING GOOD DESIGN –

MOST COMMON LAYOUTS

PLANNING A WEBSITE -

FORMAT

www.vollawn.com Peter Fiorella

Alexis Ogg

Aleia Coster