Year 8 WEBSITE PROJECT

You local club (sports club, choir, band, adventure club, pony club ) have heard about you talent for web design. After lengthy discussion you have agreed to produce a website for your club.

Complete the following: Club name Type of club Club colours Club logo Club details .

Name .... Form.

Project Tips obtaining full marks

In order to give yourself a chance of obtaining the optimum number of marks all aspects of this project must be completed. All specifications must be adhered to. The principles of good design must be evident.

In very simplistic terms your site must enable your target audience to:

1. 2. 3. 4. 5.

Obtain information about your club Interact with the site Member satisfaction statements, interviews Complete online ordering/membership Contact you.

Work through the following sheets answering the questions which also serve as the foundation for planning and designing your site.

Step 1: Planning Your Site

First consider the focus of your site. The main purpose of this site is to inform your audience of your company, its function, your products and or services.

Explain the purpose of your website.

Naming your website Your website name is very important as it helps to define your site. Some visitors may also use it to search for your site. Naming conventions: The name of each page should be kept short, meaningful and in lower case. Avoid punctuation and unconventional spelling. The first page is saved as index.html the title of this page is called Home

Name the pages of your website and the title of each page.

Page name index.html html html html html html Home

Title

Mapping your website It is important to have an overview of the content of your home page and how other pages will link to it and how the home page will link to them. Three clicks is generally the most number of clicks anyone wants to make to find the information they want.

Draw a box on the left hand side of your page. This represents your home page. Write in general terms what will be on this page. Work towards your right, connect other pages with lines. This will slowly develop into an overview of your navigation structure. Sample:

2. Site Navigation
Navigation is crucial for your site. The components of a website that make up its navigation structure are known as navigational elements. These elements should be consistent and easy to understand and follow internet conventions. e.g Clicking on hyperlinks(links) takes you to a new page. Navigation bars are common on websites and run horizontally across the top of every page, text based and usually narrow so no room for images. Sample site http://www.flowershop.com.au/

http://www.mountjuliet.ie/equestrian/index.html

List the consistent elements in the above screen shots. Consider content and position of content. ....................................................................................... ....................................................................................... ....................................................................................... .......................................................................................

3. Content
Focus on what you know. Keep your pages short and avoid any irrelevant tangents. Keep vertical scrolling to a minimum. Avoid horizontal scrolling. Pages should load quickly. If your pages consist of too many words and your reader is constantly scrolling it might be best to go to a new page. If your new page only results in a few paragraphs you might consider splitting the page into sections and combine a number of smaller pages.

View the sample pages below. How do they indicate there is more to read? List the various symbols, text that is used.

http://www.msn.com/

Writing Style
People will come to your site to look for information, they want to be able to find the information quickly. It is important to stick to the point and avoid waffle. Know your target audience, the style should reflect the target audience. Regardless of the audience grammar and spelling is important.

The two pages below are from the ABC site. Briefly explain the different styles used for adults and kids. ....................................................................................................................

http://www.abc.net.au/

Creating a Unified Look

Consistent page design and a familiar look will help your visitors navigate your site. Choosing your colour scheme is important. Using a few colours on your website may emphasise certain parts of your site and draw attention to different elements. Look for colours that provide harmonious contrast. e.g. blue and orange, colours on either side of the colour wheel. Shades of colour can also prove to be very effective.

Use Adobes Kuler (http://kuler.adobe.com) to select your colours for your site. What colours are you going to select for the various aspect of your site? Record the hexadecimal values for each colour you select. .

Font type is also a very important element. Limit your choice to two fonts. Serif fonts are easier to read than sans serif fonts and are generally used for the body of the text. Well known serif fonts are Times New Roman and Georgia. San serif fonts when used are generally used for headings. Arial and Tohoma are two common san serif fonts.

Make the decision about the types of font used, the size and style. Remember consistency is important. . . .

There are various ways of styling a link, such as underlined, underlined only when you move the mouse over it and so on. However the web standard is to underline the link and colour it in a standard blue. What ever you choose to do avoid making your links blend into the page

Detail the style of links you are going to use in your site. .. .. .

10

To maintain a unified look try to make sure that any images that appear on your pages appear in approximately the same places on each page. Image must be resized before placing them on your site. Text should flow around you images in the same manner throughout your site. If images have captions the same font style and and size should be used. In general what size will your images be? How will text flow around your images? What font style and size will you use for captions? .. .. ..

Different browsers view pages slightly differently. It is best to select 1,024 pixels width so your site is compatible with most monitors.

Storyboards
Storyboarding provides an overall rough outline of what the presentation will look like, including which topics go where, the links, and a conceptual idea of where your images go, what the layout will look like and so on. With that representation in hand, you can develop each page in turn without trying to remember exactly where that page fits into the overall scheme and it's often complex relationships. You don't have to be able to draw to produce a storyboard. You need only sketch in the outlines. 'This image goes in the top right hand corner, this heading is level 2 and centred, this paragraph goes here' etc. You can draw all this in simple shapes with a few notes. 'This page is a white background, the navigation links go here and point to' and so on. You may even want to name the files you need for each page so you know which image or piece of text goes where. You may need to provide examples of things like house style for copy and image style and size for of text goes where. Ideally, someone should be able to look at your storyboard, no matter how crude, and using the right material, put together the same site you would have done.

11