1. Mr C Johnston ICT Teacher www.computechedu.co.uk BTEC IT Unit 28 - Lesson 06 Designing Websites

2. Session Objectives Be able to design websites

3. 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.

4. In groups… Investigate the features of websites which sell tickets Present your findings to the rest of the group

5. 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

6. 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

7. Developing A Website When developing a website we follow the stages in the system lifecycle in order to complete it...... Identify Outline of the problem Analyse The needs of the system Evaluate Refining the system Design Planning all parts of the system Implement Creating the system Test Making sure the system works System life cycle

8. Stages Identification of Problem Analysis Design Structure Storyboard Implementation Graphics Contents Coding Testing Different browsers, platforms and resolutions Evaluation

9. Analysis Documentation

10. 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.

11. 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,

12. 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.

13. 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 PROCESSING Data 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

14. Topic Exercise Produce an analysis document / problem statement / statement of purpose for the website you intend to create,

15. Design Documentation

16. Design Stages 1.Initial Ideas 2.Site Proposal 3.Template Design 4.Storyboard Designs 5.Structure Diagram

17. Initial Ideas… Write down some initial ideas for pages and contents on a piece of paper Remember you need at least a homepage and feedback form, Minimum of 5 pages, Need to use some multimedia features and have links to other websites.

18. 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.

19. Topic Task Produce an initial ideas sheet and design proposal for your website.

20. 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.

21. Common Webpage Layouts Navigation Bar Area For Content Header – Company Name / Logo Footer – Contact details / terms and conditions

22. 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

23. 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.

24. 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

25. 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

26. 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.

27. 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

28. Example HOME PAGE ORDER PAGE MENU PAGE ABOUT PAGE 1.Draw box for each page with the page name in 2.Link each page with double arrow – start in top left and work around clockwise 3.Add one way arrows for any external links and email addresses 4.Add any database connectivity INTERNET www.goats.co.uk Email ORDER DB process.asp In a mesh structure number of arrows from each page should be: NUMBER OF PAGES -1

29. Topic Task Create a final structure diagram for your site. Lay the diagram out neatly so its clear.