unit 21 web design and prototyping northbound events ... · web design and prototyping northbound...
TRANSCRIPT
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