Mr C JohnstonICT Teacher

www.computechedu.co.uk

BTEC IT Unit 28 - Lesson 06

Designing Websites

Session Objectives Be able to design websites

Scenario You have been asked to produce a sample website that

advertises and sells tickets for events at the ICE arena. The website should have a minimum of five pages,

which should include: multimedia advertising feedback forms a facility for customers to buy tickets direct.

The completed website should be suitable for a wide audience.

In groups… Investigate the features of websites

which sell tickets

Present your findings to the rest of the group

Features of Websites Roll over buttons Frames Products page Thumb nails Flash Style Sheets Sound Movies Pop ups Animated GIFs Email link Hotspot Image Map Blog Site Index Adverts

Web Form Forum / Customer Feedback Search Shopping Kart / Checkout

etc Static / Dynamic Date / Time Graphics Language used Marquee Any other whiz bang stuff Hyperlinks Drop Down Menus Registration Pod Cast Web Ring Customise Colours

Different currencies Email product to friend Customise product results Hover Label Book marking Mark site home page Layout / Template Advertising Banner RSS Feeds JAVA Applets Downloads – Mirrors

Technologies Used JPEG, GIF, PNG MP3,WMA, Real PDF, Flash Paper MOV, WMV, FLV, MPEG, AVI, Real Flash, Shockwave CSS, JavaScript, Java, VBScript, ActiveX, Perl, VRML (virtual reality mark-up language), XML

Developing A Website When developing a website we follow the stages in

the system lifecycle in order to complete it......

IdentifyOutline of the

problem

AnalyseThe needs of the

system

EvaluateRefining the

system

DesignPlanning all parts

of the system

ImplementCreating the

system

TestMaking sure the system works

System life cycle

Stages Identification of Problem Analysis Design

Structure Storyboard

Implementation Graphics Contents Coding

Testing Different browsers, platforms and resolutions

Evaluation

Analysis Documentation

The Stages Problem Statement What are the requirements of the new website (which will solve

the problem)? Details of any data inputs, processing and output which will occur.

The Problem Statement

This is a statement which informs you of what the problem is which the website aims to solve,

Should be a short statement – which the rest of the analysis document will explore,

Website Requirements List of requirements for the new website so that it solves the current problem and meets the needs of the

organisation, Can be also described as the “success criteria” of the site which will be looked at again during evaluation, Could be a mix of simple requirements and more complex ones

The website must have the address clearly displayed The website must have a way of displaying products so customers can view them, then purchase them

A note should be added to each requirement explaining how it solves the problems identified.

Input, Processing, Outputs Most websites today have some data processing requirements via a web form, If your website needs a form (based on the user requirements) then you

should make a notes on What data will be typed into the form? What happens to the data once submit is pressed? What is the output (feedback) to the user?

INPUT• Full Name

• Email Address• Query Details

• Date and Time Submitted

PROCESSINGData extracted from the form and placed into the

websites database.

OUTPUT• Thank you screen for

user, • Email sent to company

informing them of a query to check

Design Documentation

Design Stages

1. Initial Ideas

2. Site Proposal

3. Template Design

4. Storyboard Designs

5. Structure Diagram

Design Proposal

Based upon your initial ideas you need to produce a design brief which states exactly which pages you will include:

The pages you intend to make,

Possible content on each page,

The features you intend to have on the website,

Ideas for colour scheme and layout. mind map showing possible pages and other features which you will include within your site,

Comments should be included within your design brief confirming that the requirements have been met.

Topic Task Produce an initial ideas sheet and design proposal for

your website.

What is a template?? Templates are used to ensure all pages on a website are

consistent, They show the layout, colours and the position of graphics and

text which will appear on each page, You only need to make your template once – then its used as a

starting point for all other pages, They save time as you don’t have to start each page from

scratch and if a change to the template is made all pages change,

Before you can design your template you need to decide upon a layout for your pages – what will be fixed and what will change on each page.

Common Webpage Layouts

Navigation BarArea For ContentHeader – Company Name / Logo

Footer – Contact details / terms and conditions

My Template Design Take a piece of A3 paper, hole punch and fold off centre

so it will fit in your folder, Draw around a piece of A4 to create an outline which

you template can be drawn inside.

A3 Paper

Fold paper in half off centre

Draw round a piece of A4 to create an outline for your

template

Fold paper in

half off centre

Draw the Design Ensure your design is detailed enough so somebody

else could make it – remember only items which will appear on every page should be included.

Add Annotation

Main content of each page will go here

Colour scheme used – Green, white and red

because these are the colours of the

Italian flag and pizzas come from

Italy.

Menu bar with hyperlinks –

modern shape for buttons to give a

trendy feel – buttons have roll over effect and

turn black background with

green writing when mouse is over so

know which option is about to be

pressed.

Small pictures of food which look tasty – to tantalise taste buds,

remind customers

what we sell and

encourage them to

purchase

Depth of Annotation Required

Mark Band #1 Limited annotation with little justification for the choice of font

style, graphics, colour and hyperlinks planned. Mark Band #2

Some annotation with justification for the choice of font style, graphics, colour and hyperlinks planned.

Mark Band #3 Full annotation which clearly explains the choice of font style,

graphics, colour and hyperlinks planned.

!You may want to make these notes on a separate sheet so you have enough room for the level of detail required for band 3. Another suggestion could be to type the notes in text boxes, cut them out and glue them onto your designs

Topic Task Create a template design for your website – use colours

and annotate in enough depth to achieve your target grade.

You will need to present your plan to the rest of the group so use your time wisely.

Design a page layout for each of your proposed pages in your site.

!Remember to include ideas from the group work – revisit the websites if you have forgotten.

Final Structure Diagram Shows how all the pages will link together, Most people will have a menu bar so every page will

link to every other page to form a mesh, Needs to also include any links, email, and databases

on your site Diagram is made up of boxes for pages and arrows to

show what links to what – take care with the arrow heads – some will be double as can go

back and forth, other will be one way

Example

HOME PAGE

ORDER PAGE

MENU PAGE

ABOUT PAGE

1. Draw box for each page with the page name in2. Link each page with double arrow – start in top left and work around

clockwise3. Add one way arrows for any external links and email addresses

4. Add any database connectivity

INTERNETINTERNET

www.goats.co.ukEmail

ORDERDB

process.asp

In a mesh structure number of arrows from each page should be:

NUMBER OF PAGES -1

Topic Task Create a final structure diagram for your site. Lay the

diagram out neatly so its clear.