16
Planning your Web Site Beginning Web Site Creation: Dreamweaver CS4 Noreen Brown

Planning your Web Site Beginning Web Site Creation: Dreamweaver CS4 Noreen Brown

  • View
    224

  • Download
    2

Embed Size (px)

Citation preview

Planning your Web Site

Beginning Web Site Creation: Dreamweaver CS4

Noreen Brown

NextBestFest Needs a Website

What are the goals for the web site?

Use Active voice

Rank your goals

Can we summarize in a one sentence a purpose statement?

Possible Web Site Goals and Purpose

Goals:

Boost attendance

Enhance brand identity

Increase brand recognition

Promote the bands that will play

Provide information

Link to band sites

Create online playlist

Purpose:

With this web site, we will promote the NextBest Fest, provide information about the festival and the participating bands, promote the sale of passes and increase band recognition as well as attendance.

Who are we talking to? Describe the target

audience — create a user profile Age

Gender

Education

Economic situation

Location

Their skill level

Technology level

Other unifying characteristics

Give your target audience what they are looking for,

in the surroundings where they are the most comfortable.

How will they use the site?

Use Case (aka User Scenario, Task Analysis)

What are they going to do?

How are they going to do it?

Navigation (Usibility)

Be easy to learn.

Be consistent throughout the website.

Provide feedback.

Use the minimum number of clicks to arrive at the next destination.

Use clear and intuitive labels.

Support user tasks.

Have each link be distinct from other links.

Group navigation into logical units.

Avoid making the user scroll to get to important navigation or submit buttons.

Not disable the browser's back button.

http://www.usabilityfirst.com/websites/information.txl#tips

Categories – For NextBest Fest

Provide structure

Market Research

Drive the navigation

So, what do we need?

At least 5 distinct facts about music festival audiences.

www.dogpile.com

www.tribfest.co.uk

www.fakefestivals.co.uk

Web Site Flow Chart

http://stephaniesemidey.com/images/EDTC560-PersonalFlowchart.jpg

http://quarknet.fnal.gov/projects/templates/graphics/flowchart.gif

Accessibility

What challenges might your audience face?

Cognitive Learning

Auditory

Visual (including blind, low vision, and color blind)

Motor/Physical

Speech

How might we adapt?

Organize the page content logically

Consider Accessibility Issues

Color Schemes

Consider the target audience

Keep it simple

3-6 colors per site

Consider how these colors will appear on different monitors

Consider the mood

Clueless?

Try these sites

Color Scheme Designer http://colorschemedesigner.com/

Color Combos http://colorcombos.com/

Web Monkey http://www.webmonkey.com/

Colors

CMY – print

Subtractive color system = subtracts light

RGB – monitors

Additive color system = adds light

Hexadecimal Color Codes

Hexadecimal format -- #rrggbb

Byte 1: red value

Byte 2: green value

Byte 3: blue value

16,777,216 different color combinations

Web Safe Colors?

216 named colors

Very useful when monitors had only 256 colors

Current monitors can display +16 million colors

Fonts

Serif

Times New Roman

San serif

Comic Sans

Monospace

Courier

Proportional

Graphics & Images

Be consistent

Do you have a reason?

Do you really need that huge file?

Think of you target audience

Support your concept and metaphor:

Choose graphics that reinforce the concept and metaphor of the site. Visual symbols are very powerful tools. Consider what each graphic adds to the site, and make sure each graphic reinforces the site metaphor.

Layout

Wireframes

Be consistent

Use “white space”

Minimize scrolling