1. 1 WWW-PAGE PLANNING

2. 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. 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. 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. 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. 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. 7 Some design principles

8. 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. 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. 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. 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. 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. 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. 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 scope 3. Plan for maintenance of the site and customer support 4. Responsibilities between the customer and the web producer 5. Supplier of the materials (for example who will supply the images and texts, the customer or the producer) 6. Rough timetable

15. 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. 16 A manuscript PageDecriptionElementsTextsSummaryInteractions Front page 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 xxxxxxxx xxx xxxxxxxx xxxxxxxx xxxxxx xxx The starting page In the end of the page you have 3 image links; Accommodati ons, Restaurants, Reservations to be continued it the next page…

17. 17 A manuscript continues… PageDecriptionElementsTextsSummaryInteractions Accom- modatio ns 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, Reservations and 2 text links: fares, family rooms

18. 18 Structure diagram FRONT PAGE ACCOMMODATIONS FARESFAMILY ROOMS FOR BABIES RESTAURANTS ROOM SERVICE RESERVATIONS

19. 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. 20 Some useful links Web-page design quides: www.w3.org/Provider/Style/Overview.html www.webreference.com/authoring/design/tutorials.h tml www.how-to-build-websites.com/ www.webstyleguide.com/index.html?/index.html Yahoo directory for web page design: http://dir.yahoo.com/Arts/Design_Arts/Graphic_Design/Web_P age_Design_and_Layout/

21. 21 Some useful links Photoshop tutorials: www.fur.com/~almackey/tutorial www.good-tutorials.com/