Mr C Johnston ICT Teacher www.computechedu.co.uk BTEC IT Unit 28 - Lesson 06 Designing Websites
Jan 16, 2016
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.