1

WWW-PAGE PLANNING

2

When starting a web-page project…

Focus on reasons to start it (why a web

site?) what are the needs for the

resources (personnel, money, time, ect.)

how to plan the project how to plan the site how to evaluate the site

3

Why a web site?

Do we really need it and what can we achieve with it?

What is it for and who is the intended audience? sharing an interest? e-commerce? publishing goods and services? public information services?

Can we afford a web site? to hire web space on a server? to design the site? to maintain the web site?

4

Why a web site?

What are our strategic aims? what are you using the web site for?

How will we judge the success of our site? what are the criteria? (number of hits,

number of phone calls from customers, number of orders…)

How will we promote our site? include URL on a business card? take an advertising banner on other site? register your site with search engines? put an add with URL to a newspaper ect.

Internet or Intranet site?

5

Managing the project

If a web site is to be success, resources must be allocated, deadlines observed and tasks established.

First divide the project into tasks that can be assigned deadlines and set in order.

Then allocate workers and time and set the budgetary constraints.

6

The project can be divided into four sections:

Defining the project Creating the project plan

tasks and people and resources to each of them

deadlines Tracking the project Closing the project

the successful delivery of the web site establish a plan for maintaining and

updating the site

7

Some design principles

8

The structure of a site

An important task for a web producer is to outline the site’s structure

A clear structure is useful in navigating through pages

The first page is typically ’the home page’, the starting point for the visitor

There are 2 choices: the first page may be a quick loading and

relatively information-free starting point designed to load as soon as the visitor reaches the page

or the first page may offer as much information as possible about the site

9

The structure of a site

One way is to include important links in a frame, allowing visitors to navigate more quickly to other parts of the site.

A common mistake is to provide a series of pages with minimal information (and loaded with advertisements) before reaching the important components of the site.

An easy way to represent the structure of a site is to create a tree diagram.

10

Exercise 1.

Look for ’home pages’ or first pages of sites from the Internet and try to find: pages that are ’flag’ pages (quick

loading starting pages with not much information)

pages that give you as much information as possible about the site.

11

Navigation

A well-designed web site is easy to navigate

A good home page / starting page / front page should provide some sort of overview of the different sections of a site

Users with slower connections may need text-only alternatives

Sidebars and topbars are useful and give the visitor an easy way to move from one section to another

12

Navigation

Frames can be effective for navigation too, but with older browsers and smaller displays they may be unreadable (not a big problem any more)

It’s common to color used links with a different color than the ones that visitor hasn’t clicked yet.

13

Graphics

Avoid designing pages with too many graphics or images with large sizes.

Downloading times shouldn’t be too long!

Pay attention to the file formats you use; JPG for full-color images like photos GIF for logos, buttons, drawings and other

line arts and limited colors PNG not so well-known and not supported

by older browsers

14

Synopsis

Synopsis is a written plan which is made in the beginning of a web site project.

Usually it should include at least the following:

1. What is the target of the web site and who is the intended audience

2. The outline of the project and its scope3. Plan for maintenance of the site and customer

support4. Responsibilities between the customer and the

web producer5. Supplier of the materials (for example who will

supply the images and texts, the customer or the producer)

6. Rough timetable

15

Manuscript Manuscript for a site can be made

many different ways It should include a description of every

page of the site: A short description of the page Elements of the page (images, logos,

palettes, frames, buttons etc.) Texts in the page A short summary of the page (one or two

sentences) Interactions (like links)

You can form it like a table

16

A manuscript

Page

Decription

Elements Texts Summary

Interactions

Frontpage

A large photo of the hotel and a well-come text

Logo of the hotel on the upper right corner, photo of the hotel on the background, 3 little photos as linking images on the lower right corner

Wellcome to the best hotel in town xxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxx xxx

The starting page

In the end of the page you have 3 image links; Accommodations, Restaurants, Reservations

to be continued it the next page…

17

A manuscript continues…

Page Decription

Elements Texts Summary

Interactions

Accom-modations

Information about the hotel rooms and photos of them

4 photos of the hotel rooms, 3 little photos as linking images on the lower right corner

Here you can see the modern and luxurious rooms of our hotel.….ect

Information about the accommo-dations

In the end of the page you have 3 image links; Front page, Restaurants, Reservationsand 2 text links: fares, family rooms

18

Structure diagram

FRONT PAGE

ACCOMMODATIONS RESTAURANTS RESERVATIONS

FARES FAMILY ROOMS

FOR BABIES

ROOM SERVICE

19

Layout

Design the pages You can either use a computer

program to make it or you can for example draw it you don’t need to do the code

(yet), just a sketch that shows how the pages will look when they are ready

20

Some useful links

Web-page design quides:www.w3.org/Provider/Style/Overview.html

www.webreference.com/authoring/design/tutorials.html

www.how-to-build-websites.com/www.webstyleguide.com/index.html?/

index.htmlYahoo directory for web page design:http://dir.yahoo.com/Arts/Design_Arts/

Graphic_Design/Web_Page_Design_and_Layout/

21

Some useful links

Photoshop tutorials: www.fur.com/~almackey/tutorialwww.good-tutorials.com/