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
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/
Top Related