1

2016 Suite

Cambridge TECHNICALS LEVEL 3

IT

Unit 21

Web design and prototyping

Northbound Events assignment

M/507/5024 Version 1 September 2017

2

Contents Scenario ...................................................................................................................................................................................... 3

Part A – Training ............................................................................................................................................................... 3

Part B – Designing the application ................................................................................................................................ 3

Part C – Client brief ......................................................................................................................................................... 3

The tasks .................................................................................................................................................................................... 5

Task 1: Research fundamentals of web design ........................................................................................................... 5

Task 2: Requirements analysis and plan of an interactive website ........................................................................ 6

Task 3: Produce an interactive and responsive website .......................................................................................... 7

Task 4: Presenting solution and future considerations ............................................................................................. 8

Evidence Checklist ................................................................................................................................................................... 9

Notes ....................................................................................................................................................................................... 11

3

Assignment

Unit 21: Web design and prototyping

Scenario

Part A – Training

You are an application designer for Creative Computing Solutions and are required to take part in all the stages of designing a website and building a prototype. Part of your role is to train new website designers in the company to help them understand the processes and the way Creative Computing Solutions develops websites for clients.

Part B – Designing the application

Northbound Events (NBE) wants you to develop a dynamic website using PHP and MySQL to enable customers to view events at different venues what they promote and has approached Creative Computing Solutions to research, design and produce and interactive, responsive website for them. The client knows very little about how websites are designed, their technical capabilities, the security risks or how to minimise threats. They have ideas for their website regarding the content and what they want it to be able to do but they are relying on the web designer to provide them with guidance. You will be required to:

describe the key components of website construction; explain the security risks that must be considered when creating a website; identify the user requirements based on client brief and interview

prepare their designs and present them to the client; justification of design components based on the client requirements develop a prototype; develop interactive components test the prototype; present prototype to client; discuss future considerations regarding security and maintenance.

Throughout the process of designing the website you will describe the various stages that they work

through and include relevant documentation at each stage of the process.

Part C – Client brief

Background Northbound Events (NBE) is a recently established events company that organises and sells tickets for a range of arts events across the North of England. The company requires a website and eventually like to sell tickets online. While online sales don’t form part of this brief, NBE wants this stage of development to structure their events in such a way that online sales could be added at a later point in time. In the meantime, NBE wants people to be able to book by telephone until they can decide on the best approach for online sales. The overriding goal for the site is to be able to show a list of events and allow people to learn more about each event they might be interested in attending. You might consider including a ‘featured’ event, or perhaps the most recently added event to the site home page to help ‘grab’ visitors attention as they arrive on the site.

4

Typical Audience NBE’s audience is generally people under 35 years old, so this group are active on social media and will often browse and buy things online, and increasingly from their mobile phones. Events To enable online sales in the future, the NBE website would need to allow visitors to browse events, and view detailed information about a specific event. Events will typically fall into the following 3 categories:

Live bands Comedy Art displays and exhibitions

Visitors browsing the website to find information about the event should be able to see:

The date and time of the event The event venue Ticket prices Etc.

Venues NBE don’t have their own venues, so they use a number of different locations to suit the type of event and likely audience size. There are currently 5 different venues that NBE have commercial agreements with, with each venue being selected depending on the type of event taking place and the number of people that can be accommodated. Some venues are large enough to cater for all types of events that NBE offer. Each venue has the following information:

A description of the venue A photo of the venue The venue’s physical location

Deliverables NBE would like to see the proposed structure of the site prior to development work starting. This should be a structural overview of how the pages will link together and show how visitors will typically access the event details to be able to buy tickets.

Suggested Functionality With most visitors to the NBE website being very familiar with websites and social media, the developers should consider the following.

Social media integration such as share links to help promote events Embedded videos that are hosted on YouTube Online mapping to show venue locations

Technical Specification The site should be built using the PHP language with a MySQL database. One of the main success factors for the site will be the dynamic way in which events and venues are linked together, and visitors will be able to filter by event types so they only see the events they’re interested in.

The website should be:

Cross-browser compatible on all major desktop browsers (Chrome, Firefox, Safari, Edge) Built using responsive techniques so it can be used on mobile devices and tablets Be easy to use and follow a logical navigation structure Secure and prevent any unauthorised access, or malicious updates to database entries

5

The tasks

Task 1: Research fundamentals of web design

Learning Outcome 1: Understand the fundamentals of web design, is assessed in this task.

Pass Merit Distinction

P1: Describe the key components of website construction

M1: Explain the security risks that must be considered when creating a website

Evidence

Research report – P1

The report should describe the key components of website construction. Here is a list of what components to consider:

domain name the purpose or a site map the use of hyperlinks to join webpages the position, structure and purpose of a navigation bar page design (e.g. navigation bar, title, page content, a plan for content management) designing for different browsers and devices

o responsive design for mobile/tablet technology o how browser rendering can affect the layout of a webpage o an understanding of browser rendering engines as a key to performance o importance of design that takes this into account, what can happen when it is

not considered World Wide Web Consortium

o open and closed standards in web development storage of data (e.g. linking to a database) methods of user interaction

o different methods of interactivity o use of existing tools o use of languages to add interactivity (e.g. JavaScript, jQuery)

The handout must be in your own words and provide a comprehensive summary of your findings. It is important that you correctly reference all sources used, following appropriate conventions.

Research report – M1

The report should explain the security risks that must be considered when creating a website. Here is a list of what security risks to consider:

the need for security threats (e.g. SQL injection, interception of data, un-validated input) prevention (e.g. validation, appropriate passwords, encryption)

The handout must be in your own words and provide a comprehensive summary of your findings. It is important that you correctly reference all sources used, following appropriate conventions.

6

Task 2: Requirements analysis and plan of an interactive website

Learning Outcome 2: Be able to plan the development of an interactive website for an identified client, is assessed in this task. Pass Merit Distinction

P2: Determine a client’s requirements for a website

P3: Produce a plan for the website that meets the client’s requirements

D1: Justify the use of components in the website design that meets the client’s requirements

Evidence Requirements document – P2

Review the client brief and meet with the client to establish their requirements for the website.

The requirements document must include:

list of specific requirements;

purpose of site;

content;

user interactivity required (e.g. submission of data, maps); responsive design requirements.

Diagrams and plans for the website – P3

This must provide a series of annotated diagrams that describe the proposed website. These

should include diagrams to show the scenarios in which the website will be used including:

site map

navigation bar

page structure

interactive elements to meet the client’s needs using suitable diagrams (e.g. flowcharts,

data flow diagrams, entity relationship diagrams)

design (e.g. font, colour)

user interface design using wireframes and graphical mock-ups

responsive design

• for different devices, e.g. tablet, phone, PC • for different browsers, e.g. IE, Chrome, Safari

Extension to diagrams and plan – D1

This should justify the use of components in the website design clearly explaining how they meet the client’s requirements.

7

Task 3: Produce an interactive and responsive website

Learning Outcome 3: Be able to create prototype websites for an identified client, is assessed in this task. Pass Merit Distinction

P4: Create a prototype of the

website for the client M2: Add interactive components

to the prototype based

P5: Conduct testing of the

prototype

D2: Evaluate the prototype

against the client’s requirements

Evidence Prototype – P4

Create a prototype of the website design solution. Interactive components – M2

Create and add the interactive components to the website prototype. Testing summary report – P5

This should include a test plan whether the content of the website is appropriate, correct and complete. The functionality of all embedded components, JavaScript/jQuery and database storage is tested. The responsive design must be tested as well as ensuring that the website meets the original requirements. All planned tests must be completed and any failed tests needs to be fixed and re-tested.

Critical analysis of website – D2

You must evaluate your website solution against the client’s needs where you compare against the original requirements. You also need to consider:

how the prototype meets the site purpose;

comparison of prototype against content required;

comparison of interactivity built in, against the user’s interactive requirements;

comparison of responsive design to user’s responsive design requirements;

justify choices made in the development of the prototype against the original needs;

improvements - suggest improvements to the design, structure or function of the

prototype.

8

Task 4: Presenting solution and future considerations

Learning Outcome 4: Be able to present the interactive website concept to an identified client, is assessed in this task. Pass Merit Distinction

P6: Create a presentation to

demonstrate the prototype

website to the client

M3: Communicate future

website security and

maintenance considerations to

client

Evidence Presentation – P6

You must present the solution to the client where you choose a suitable method of presentation (e.g. live demonstration, use of presentation software). Your presentation must incorporate:

comparison of website against requirements

demonstration of functionality

demonstration of interactivity

demonstration of responsive design

justification of design choices

Future considerations report – M3

You must consider future security and maintenance considerations. This includes: updating of content training of staff threats to information security protection methods for securing personal data/information

9

Evidence Checklist

OCR Level 3 Cambridge Technicals in IT Unit 21: Web design and prototyping For PASS have you: (as a minimum you have to show you can meet every pass criterion to complete the unit)

Where can your tutor find the evidence? Give page no(s)/digital timings, etc.

Describe the key components of website construction (P1) e.g. A research report

Determine a client’s requirements for a website (P2) e.g. A requirements document following discussion with the client

Produce a plan for the website that meets the client’s requirements (P3) e.g. Diagrams and plans for the website

Create a prototype of the website for the client (P4) e.g. A prototype

Conduct testing of the prototype (P5) e.g. A testing summary report

Create a presentation to demonstrate the prototype website to the client (P6) e.g. A presentation

10

For Merit have you:

Where can your tutor find

the evidence? Give page

no(s)/digital timings, etc.

Explain the security risks that must be considered when creating a website (M1) e.g. A research report

Add interactive components to the prototype based upon the client’s requirements (M2) e.g. Interactive components

Communicate future website security and maintenance considerations to client (M3) e.g. Future considerations report

For Distinction have you: Where can your tutor find

the evidence? Give page

no(s)/digital timings, etc.

Justify the use of components in the website design that meets the client’s requirements (D1) e.g. Extended to diagram and plans (P2 & P3) with supporting justification

Evaluate the prototype against the client’s requirements (D2)

e.g. Critical analysis of website

11

Notes

12

Unit 21 Web design and prototyping