LO3 - Design websites

Assessment CriteriaLearning Outcome

The learner will:

Pass

The assessment criteria are the pass requirements for this unitThe Learner can:

Merit

To achieve a merit the evidence must show that, in addition to the pass criteria, the learner is able to:

Distinction

To achieve a distinction the evidence must show that, in addition to the pass and merit criteria, the learner is able to:

1 Understand web architecture and components

P1 Outline the web architecture and components which enable internet and web functionality

2 Understand the factors that influence website performance

P2 Explain the user side and server side factors that influence the performance of a website

P3 Explain the security risks and protection mechanisms involved in website performance

M1 Compare and contrast current interactive websites for performance and security

D1 Discuss the impact that cases of website security breaches have had on society

3 Be able to design websites

P4 Using appropriate design tools, design an interactive website to meet a client need

M2 Produce annotated design documentation for an interactive website to meet a client need

4 Be able to create websites

P5 Create an interactive website to meet a client need

M3 Implement CSS in an interactive website to improve the site to meet a client’s needs

D2 Carry out acceptance testing with client on an interactive website

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

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

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

LO3 Be able to design websites – Website trendsThey 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.

LO3 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 out

Finding Support

Researching product information and comparison

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

LO3 Be able to design websites – Website production toolsA 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.

LO3 Be able to design websites – Website production toolsStoryboards 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.

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

Focusing 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:1. Purpose, Audience and User Needs2. Action Plan 3. Mood board4. Site Plan for the New Website 5. House Style 6. Inclusion of Multimedia Content7. Page Plans (Storyboards)

Areas to Cover

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.

LO3 Be able to design websites – Website Purpose and Audience

Security Needs and Costs Purpose Audience Multi Media Content and Interactive Features

P4.3 – Task 10 - Create an action plan explaining exactly what you intend to do and when - Use the template below

LO3 Be able to design websites – Action Plan

Task Number Task Prerequisites Start Date Finish Date Resources

Needed Comments Feedback on Task

1

Create 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/2009 12/12/2009

Computer, 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>>

2

This 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 identified List a feature that they will use to help

website met the clients needs A list of tasks to be carried out, mind

maps and simple page plans for the website including possible use of links

Merit – detailed proposal for the website identified Detailed 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 actions Plans will all be accurate

M2.2 – Task 11 - Create an action plan explaining critically comments and feedback on the completed task with suggested improvements.

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.

LO3 Be able to design websites – Mood Boards

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 pages

M2.3 – Task 15 - Describe in detail each page’s purpose and what multimedia content it will contain to meet that purpose and audience.

LO3 Be able to design websites – Site Plan

1 - Home / about

2- Accessibilityoptions 3 - DVD’s 4 - Computer

Games

6 - How to order

5 - CustomerFeedback

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.

LO3 - Be able to design websites – House Style

House Style

Headings = Times new roman size 24

Subheading = Times new roman size 20

Text = Times new roman size 14

All Text colour = black

Page colour = White

M2.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 ?

Links

LOGO

Link to ?

Link to ?

Heading, FSC

Subheading, FSC

Link to ?

Multimedia component

Text,, FSC

Text, FSC

Text, FSC

Email links External link , FSC

Text, FSC

Text, FSC

Text, FSC

Multimedia component

Multimedia component

This example just for illustrative purposes and is not complete

Background Colour will be ?

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 option Interactive or Dynamic Banner AdAlt tags which describe multimedia content that may not

appear on certain devices used to access the Internet

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.

LO3 - Be able to design websites – Multimedia Content

Pass – THREE features identified and described

Merit – At least FOUR features identified and described

P4.3 – Task 19 - Describe a detailed sketch diagram of how each page is going to look like with the House Style identified

You will need to explain how each page will look and what it will contain

It should be detailed enough so that a third party could implement your designs

LO3 - Be able to design websites – Page Plans

All links are flash buttons – blue warper

Page Information

Links internal = Home, CDs, DVDs, Order.

Links External = Metacritic.com, www.google.com

Accessibility features = Alt tags, altered text size / background colour.

Meta tags = computer games Wii Xbox PC

Home

Links

LOGO

Accessibility

DVD’s

The Digital Realm

Computer Games

Order

Image of World of Warcraft box art

Image of Wii Sports Resort box art

Image of Gears of War 2 box art

This example just for

illustrative purposes and

is not complete

Price and availability

Price and availability

Price and availability

Email link to salesEmail link to customer service

External link to GoogleExternal link to metacritic

Description of game

Description of game

Description of game

Pass – Simple page plans identified

Merit – Detailed page plans identified with source references given

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

Assessment Tasks

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

Assessment Tasks