2Assessment Criteria Learning Outcome The learner will: Pass The assessment criteria are the pass requirements for this unitThe Learner can:MeritTo achieve a merit the evidence must show that, in addition to the pass criteria, the learner is able to:DistinctionTo achieve a distinctionthe evidence must showthat, in addition to the passand merit criteria, thelearner is able to:1 Understand web architecture and componentsP1 Outline the web architecture and components which enable internet and web functionality2 Understand the factors that influence website performanceP2 Explain the user side and server side factors that influence the performance of a websiteP3 Explain the security risks and protection mechanisms involved in website performanceM1 Compare and contrast current interactive websites for performance and securityD1 Discuss the impact that cases of website security breaches have had on society3 Be able to design websitesP4 Using appropriate design tools, design an interactive website to meet a client needM2 Produce annotated design documentation for an interactive website to meet a client need4 Be able to create websitesP5 Create an interactive website to meet a client needM3 Implement CSS in an interactive website to improve the site to meet a client’s needsD2 Carry out acceptance testing with client on an interactive website
3Assessment Criteria P4 and M2 For assessment criterion P4, learners must work to an identified brief and clearly identify the purpose of the website and who the target audience is. A scenario can be provided but it is important not to make it too restrictive so it hinders creativity.Learners should create a specification document which clearly identifies what will be included, the client needs, security, costs and user needs. The learner should create a time plan with appropriate deadlines to follow the design, creation and testing phases of the project. The learner should plan a website of at least eight pages. Designs should include a mood board, navigation map and storyboards. They should clearly show an appropriate method of navigation, details of styles to be used, and at least three multimedia and interactive elements to be incorporated.Merit criterion M2 is an extension of P4. The learner must produce annotated designs and layouts for a minimum of eight web pages. Navigation maps should be accurate and storyboards should be detailed and annotated with all elements and assets to be used clearly identified with references to sources, appropriate layouts, links, colour schemes and font styles stated. Learners should ensure they have considered the clients needs carefully and can include in their annotation how their designs meet the identified user’s needs.
4LO3 Be able to design websites – Website Specification In order to specify the needs of our website the client would like an analysis of current websites and the similar themes that are present in their production. On e-commerce sites there is usually shopping baskets, pages of sales details, contact details, selective checkouts etc. that are consistent with this type of site.Similarly educational sites have similar themes, age appropriate content, directed guidance, step by step training rather than a single page theme etc.Promotional sites tend to be more specific to the product, product details, release dates, prices, adaptations, charges. For sites such as film reviews the details tend to be about similar themed films, films the stars have been in the past, release dates, plot lines etc. For Game Release sites, the language is the same, “From the makers of…”P4.1 – Task 01 – Analyse three websites that have a similar themes, education, promotional or e-commerce, evidence and list with an explanation the recurring content within these categories.Think about how the structure of the design and the inclusion of content can vary based on the different purposes.
5LO3 Be able to design websites – Website Specification In terms of client demographics, the international versions of your reviewed websites will be different. Coca Cola global will house the same information such as pricing as Coca Cola UK. The language used will be different, the terms, the client. For most international sites the target audience is suppliers, those with industry knowledge, those with a link to the business that needs something from the company that the UK version is unlikely to hold. Loom at the customer information on Topshop and compare it to Arcadia, look at Ben and Jerry’s and compare it to Unilever, Beechams site compared to Glaxo Smith-Kline Wellcome.Similarly poorly designed, less professional versions of your companies rivals will have a lot of similarities and differences to your chosen companies. It might be the colour scheme, the layout, the ease of use, the reduced product range.P4.1 – Task 02 – Using three poor alternatives and three international websites that have a similar theme to your 3 sites, evidence and discuss the similarities and differences in the content and design.Think about how the structure of the design and the inclusion of content can vary based on the different purposes.
6LO3 Be able to design websites – Website trends They say that the internet changes all the time but these trends tend to be subtle. Game sites when they first started were all about hints and tips, compliments of the magazines that were distributed but in recent times game sites have replaced magazines to centre on one form of content for the user. Game trailers for instance corners the market in videos, Gamehub on game support, Joystiq.com on reviews.Similarly technical magazines such as 3DWorld used their site as a compliment to their publishing but now uses their site for content now available in the magazine. Facebook was designed for personal use and is now a focus for business promotion, IMDB was there for information and is now used as movie promotion and industry database access. Some sites are the same as they have ever been, eBay for selling, Amazon and Game for purchasing, Microsoft for user support and content.P4.1 – Task 03 – Research current trends in web design and consider their appropriateness.In this analysis consider for each site what the needs of the client, and the user might be, as well as looking at methods of interactivity used by these sites to gain the customers appeal.
7LO3 Be able to design websites – Website production tools Clients expect results and usually do not consider what it takes to get there. The different methods of designing is there for the website designer to prepare those results. There are design tools that are sued to benefit the designer specifically is the website plan changes or the user requires additional materials or content.Mood boards consider how information flows, how the user gets from the starting page to the conclusion of their search making use of alternative pathways to find that information. They give rise to ideas, allow the designer to add additional content to the design and link it through critical pathing.P4.2 – Task 04 – Describe the purpose and benefits of using mood boards in website production and using an existing e-commerce website, design 3 Moodboards to describe the path to Checking out, Finding Support and Researching product information and comparison.Checking outFinding SupportResearching product information and comparison
8LO3 Be able to design websites – Website production tools Navigation Maps consider how a website is structured, the hierarchy of needs and how each page of a website links to other pages. They also show how the user needs to navigate in order to find information in a logical form rather than leaping straight on the page without history.Too many links on the home page can be confusing to the user and makes the website less professional. Having links to everywhere on a homepage is similar to every book in a library sorted in alphabetical order. The user needs to be guided to a page and maintain a themed search from within a site.P4.2 – Task 05 - Describe the purpose and benefits of using a navigation map in website production and using an existing e-commerce website describe and create a navigation map of its products and services.
9LO3 Be able to design websites – Website production tools A Housestyle page and stylesheet is the main basis of a companies consistent website design. It allows the user to expect where things will be, how to navigate, how to rely on consistency to find things. For a company it is how they add more content with the least amount of work. Why redesign the page, set up the fonts, start from a blank canvas every time a new page is added. If Amazon want to create a site for North Korea, it would use the same design and template it has for America or France, the same colour scheme, the same layout, the same menus, the same logo, fonts, sizes, colours, the same accessibility options and CSS styles. Only the language and product base will need to change. And if they have a new product range, copy and paste, add a link and upload, done.Look at any good website and you will see that they have a consistency in terms of designs right down to the number of columns used and site map links.P4.2 – Task 06 - Describe the purpose and benefits of using a Housestyle Page and Stylesheet in website production and using an existing e-commerce website describe and create a housestyle diagram of its main user pages.In the description you need to mention, font, size, colour, location of elements, logo, inclusion of site map, column layout, accessibility options, navigation buttons and menus.
10LO3 Be able to design websites – Website production tools Storyboards are the main source of prepared materials used by design companies to describe to a client how the finished site will look. These are usually an extension of the house style page but outlines additional elements that are necessary if the planned production is to be given over to another company. This is usually the last stage of prepared materials necessary before starting the website creation and the more accurate they are, the more precise and trouble free the website production should be.Storyboards are used for all kinds of production projects, films, animations, advertisements etc. The are most effective when they are adhered to. They should impress a client, they should state the elements and the source location of those elements.P4.2 – Task 07 - Describe the purpose and benefits of using a Storyboards in website production and using an existing e-commerce website describe and create a storyboard design of its main user pages.In the designs you need to include 8 pages such as the home page, shopping page, information page, checking out page, help page, search results page, site map page and creating an account page.
11LO3 Be able to design websites – Website Specification Client needs (e.g. appropriate image, relevant content for website, admin/customer security and passwords, search engine listing, setup/development/maintenance costs)Security needsCostsUser needs (e.g. user friendly navigation, age appropriate content)• planning (e.g. time plan, deadlines).• purpose• e-commerce• educational• promotional.
12Areas to CoverFocusing on designing and planning a website (at least 8 pages) for your local business, you need to cover the following 8 tasks within this case study:What you need to cover:Purpose, Audience and User NeedsAction PlanMood boardSite Plan for the New WebsiteHouse StyleInclusion of Multimedia ContentPage Plans (Storyboards)
13LO3 Be able to design websites – Website Purpose and Audience Choose a local business that you have an interest in, examples could include:A business with registered customers.A charity with sponsored needs and registered contributors.A physical area – perhaps for bookings, visitors and tourists.Your client needs a website, they will need to have a customer base that registers on this site for future reference and for purchasing needs. Personal details will be stored so protection methods will need to be in place such as SSL. Your client will have a brief and expectations from this site in the hope that it will take care of 40% of their business needs and will compliment their off-line business needs but not replace it. The client needs to have both an online and offline presence where the same quality of support will be given to both customer bases.P4.3 – Task 08 - Describe the purpose, audience and user needs for your website proposal.M2.1 – Task 09 - Describe the Multimedia Content and Interactive Features that will need to be included to meet the audience needs and how their inclusion will meet the identified user’s needs.Security Needs and CostsPurposeAudienceMulti Media Content and Interactive Features
14LO3 Be able to design websites – Action Plan P4.3 – Task 10 - Create an action plan explaining exactly what you intend to do and when - Use the template belowTask NumberTaskPrerequisitesStart DateFinish DateResources NeededCommentsFeedback on Task1Create navigational site map to show all of web pages to be created.None<<is there a task that needs to be completed before this task can be performed – for example before you can produce the pages you must design them>>12/12/2009Computer, Word, Printer.This will be created in Word using auto-shapes or text boxes. It will indicate the navigational directional<<Will contain information about how the task was completed was it done, on time, what lessons were learnt and any other important information>>2This is a live document and as such will need to be completed as and when you complete tasks – explaining your views on the task.Pass – brief plan of the website identifiedList a feature that they will use to help website met the clients needsA list of tasks to be carried out, mind maps and simple page plans for the website including possible use of linksMerit – detailed proposal for the website identifiedDetailed explanation for at least three multimedia features that will help website meet the clients needs.Detailed action plan that identifies all tasks to be completed, dates and actionsPlans will all be accurateM2.2 – Task 11 - Create an action plan explaining critically comments and feedback on the completed task with suggested improvements.
15LO3 Be able to design websites – Mood Boards The client needs proof that the completed webpage will be suitable for purpose. They need to see how the website can be used by the customers to navigate and interact with so they can be sure all the functions can be utilised effectively. For this the client will need to see the active designs for the site. P4.3 – Task 12 - Create 3 mood boards explaining how you intend for your customers to navigate from the home page to checkout or booking, to user support and to search results. For Mood Boards to work well they should allow the user room for mistakes and correct these mistakes without the need to return to the home page to start again. This can be done through the use of a site map or alternative pathing within the web page. M2.2 – Task 13 - Create a critical path and alternative set of connections on the mood boards to allow the user to determine their own solution.
16LO3 Be able to design websites – Site Plan P4.3 – Task 14 - Create a Site Map for your website design. For each page you need to describe its purpose and what it will contain to meet that purpose.REMEMBER: you need at least 8 pagesM2.3 – Task 15 - Describe in detail each page’s purpose and what multimedia content it will contain to meet that purpose and audience.1 - Home /about2- Accessibilityoptions3 - DVD’s4 - ComputerGames6 - How toorder5 - CustomerFeedback
17LO3 - Be able to design websites – House Style P4.3 – Task 16 - Illustrate and explain the house style for your websiteThis should be generic enough so that all of your pages can follow itYou need to detail everything on the page, fonts, sizes, colours, background colours, accessibility options, site map, location of navigation system, logo, additional or external links.A Pass example is given below.Background Colour will be ?House StyleHeadings = Times new roman size 24Subheading = Times new roman size 20Text = Times new roman size 14All Text colour = blackPage colour = WhiteM2.4 – Task 17 - Illustrate and explain the house style for your website in detail outlining all features that are consistent on every page.Link to ?LinksLOGOHeading, FSCSubheading, FSCMultimedia componentText,, FSCText, FSClinksExternal link , FSCThis example just for illustrative purposes and is not complete
18LO3 - Be able to design websites – Multimedia Content You need to plan for the inclusion of at least three forms of Multimedia or Interactive Content on your website to make it more audience friendly.Some examples include:Button to alter font sizeColour changerLanguage selection changerGoogle Location MapMobile Friendly ButtonLogin and User Account optionInteractive or Dynamic Banner AdAlt tags which describe multimedia content that may not appear on certain devices used to access the InternetP4.3 – Task 18 - Describe in detail the Multimedia features you plan to include in your website. Explain how this will benefit the target audience.Pass – THREE features identified and describedMerit – At least FOUR features identified and described
19LO3 - Be able to design websites – Page Plans P4.3 – Task 19 - Describe a detailed sketch diagram of how each page is going to look like with the House Style identifiedYou will need to explain how each page will look and what it will containIt should be detailed enough so that a third party could implement your designsPage InformationLinks internal = Home, CDs, DVDs, Order.Links External = Metacritic.com,Accessibility features = Alt tags, altered text size / background colour.Meta tags = computer games Wii Xbox PCAll links are flash buttons – blue warperLOGOThe Digital RealmComputer GamesLinksThis example just for illustrative purposes and is not completeImage of World of Warcraft box artDescription of gamePrice and availabilityHomeImage of Wii Sports Resort box artDescription of gamePrice and availabilityAccessibilityImage of Gears of War 2 box artDescription of gamePrice and availabilityDVD’slink to saleslink to customer serviceExternal link to GoogleExternal link to metacriticOrderPass – Simple page plans identifiedMerit – Detailed page plans identified with source references given
20Assessment TasksP4.1 – Task 01 – Analyse three websites that have a similar themes, education, promotional or e-commerce, evidence and list with an explanation the recurring content within these categories. P4.1 – Task 02 – Using three poor alternatives and three international websites that have a similar theme to your 3 sites, evidence and discuss the similarities and differences in the content and design. P4.1 – Task 03 – Research current trends in web design and consider their appropriateness. P4.2 – Task 04 – Describe the purpose and benefits of using mood boards in website production and using an existing e-commerce website, design 3 Mood boards to describe the path to Checking out, Finding Support and Researching product information and comparison. P4.2 – Task 05 - Describe the purpose and benefits of using a navigation map in website production and using an existing e-commerce website describe and create a navigation map of its products and services. P4.2 – Task 06 - Describe the purpose and benefits of using a House style Page and Style sheet in website production and using an existing e-commerce website describe and create a house style diagram of its main user pages. P4.2 – Task 07 - Describe the purpose and benefits of using a Storyboards in website production and using an existing e-commerce website describe and create a storyboard design of its main user pages. P4.3 – Task 08 - Describe the purpose, audience and user needs for your website proposal. M2.1 – Task 09 - Describe the Multimedia Content and Interactive Features that will need to be included to meet the audience needs and how their inclusion will meet the identified user’s needs.
21Assessment TasksP4.3 – Task 10 - Create an action plan explaining exactly what you intend to do and when M2.2 – Task 11 - Create an action plan explaining critically comments and feedback on the completed task with suggested improvements. P4.3 – Task 12 - Create 3 mood boards explaining how you intend for your customers to navigate from the home page to checkout or booking, to user support and to search results. M2.2 – Task 13 - Create a critical path and alternative set of connections on the mood boards to allow the user to determine their own solution. P4.3 – Task 14 - Create a Site Map for your website design. For each page you need to describe its purpose and what it will contain to meet that purpose. M2.3 – Task 15 - Describe in detail each page’s purpose and what multimedia content it will contain to meet that purpose and audience. P4.3 – Task 16 - Illustrate and explain the house style for your website M2.4 – Task 17 - Illustrate and explain the house style for your website in detail outlining all features that are consistent on every page. P4.3 – Task 18 - Describe in detail the Multimedia features you plan to include in your website. Explain how this will benefit the target audience. P4.3 – Task 19 - Describe a detailed sketch diagram of how each page is going to look like with the House Style identified.