Reference no: EM132225074

Assessment - Web site project

Overview

In this project, you will work in team of 3 to create a website -­ doing the planning, design, production, usability testing and publishing, using HTML, CSS and JavaScript. The project will require research, self-­directed learning, and consultation with your tutor and lecturer.

The project is to (re)develop a site for the Townsville Community Music Centre (TCMC).

You will be provided with some content and a reasonable idea of the goals and target audience.

You have two separate milestones. These are summarised here with further details below:

Milestone 1 -­ Project Plan & Design Comps
Create a project plan, design comps and two developed pages.

Milestone 2 -­ Finished Product
Use the project plan and comps to develop a functional website. Your site should be "completed" by week 10, so that it is ready for usability testing.

Finished site components at a minimum are:

Important: These requirements are not specified as pages, but as features or functionality.

The information architecture is up to you, and the page titles are able to be changed.

The details and content should be based on what you have access to and what the client wants.

Home Page:
• with a clear purpose (goal-­driven) and relevant content

General Information:
• news, about, history, contact, sponsorship details, etc.

People:
• Feature the special guests and life members as well as the management committee.

Events/Concerts:
• Display any upcoming concerts or events and link to ticket sales.

Photo Gallery:
• Use a JavaScript photo gallery library to display photos attractively and interactively -­the style of the gallery should match your site

Forms:
• Create an online form based on the old site's PDF file for becoming a benefactor.
• Create contact/enquiry/join the orchestra form or forms -­ you decide how best to handle this.
o You will be shown how to make your forms save results to a Google spreadsheet.
o You need to use JavaScript to validate your form data (e.g. users can't submit the
form if their name is blank).

Responsive Design:

Use CSS media queries to ensure your site is responsive and displays well on mobile phones, tablets, and desktop browsers in large and small windows.

Please note that it is acceptable to find and use code for parts of your site, but the work you submit must be substantially your own. You cannot use any content management systems or existing site templates/examples. Using existing JavaScript libraries and code samples to complete the JavaScript requirements is good practice and is encouraged. Note that marking for code includes identifier naming, formatting and commenting - whether this is your own code or something you have copied. If you use existing code that needs improving, then improve it.

You are allowed to use the Bootstrap framework, but you may not use an existing template/example that you fill in. You can learn from them and build a new site using parts of them, but the design work must be substantially your own.

Note: if you do use Bootstrap, you should not edit the Bootstrap files, but should customise your site by using your own stylesheet files with new and overridden style definitions. This way you could upgrade the Bootstrap version and you would not have to change anything else.

Milestone

Details

Milestone 1 - Project Plan & Design Comps

This milestone is the initial planning (similar to assignment 1) and early stages of the design and development of the site.

Plan:
Complete the plan.html file with clear details, as follows:

Goals
Concisely state what the goals (purposes) of the website are. Note that the goals must be to improvesomething in a measurable way. Why is the site needed? How does it benefit the client? Be clear andspecific. Good goal statements are only a few sentences and contain no unnecessary information.

Success Evaluation
Describe how the success of the site will be evaluated. How do you know that the site does what theclient wanted? Measure the goals you stated above.

Target Audience
Describe two things clearly and specifically:
1. the target audience that your site is intended for (be specific; you can't aim for everyone)
2. how you will intentionally design the site to cater to this group (as distinct from any other,different target audience).

Content
This section should contain a dot-­point list or table of the pages you intend to make and the contentto go on each of those pages. Create the flowchart based on this.

Site Flowchart
Create a site flowchart to show the hierarchy of pages in the site and their relationships.
Each page should be represented by one box. Each line/arrow represents a link. The order of boxesis the order these links should appear on the site.
If you don't have a preferred drawing program for flowcharts, use www.draw.io.
Save your flowchart as a PNG and insert the image in your plan file under this heading.

Project Links
Include links to your Trello board, GitHub repository and Slack group.

Design Comps & Developed Pages:
Create design comps (comp = comprehensive dummy, a good mock-­up of a page that clearly shows the intended design) for two "levels" or styles of pages. You may create your comps either as images (using a drawing program like Photoshop) or as Web pages.

Comps required:
Home page
Text-­based page designed for reading, not scanning (like About Us or something - this
depends on your plan and what pages you decide on)

Develop any two pages you choose using HTML and CSS. (It is acceptable for your comps and developed pages to be the same.)

Important: The goal of your comps and pages at this stage is to show a complete, representative sample of all of the design elements your site will have. Your pages and designs should be completed as much as possible (with real text/images, not place-­holders). This should answer all of the future questions about things like what headings and body text will look like, how images will be treated, what navigation will look like, etc. Think of it as a form of "pattern library". An important goal of this milestone is to give your group and the project stakeholders something to discuss and evaluate. You may modify your design as much as you want for the final submission.

Milestone 2 - Finished Site

This is the finished website, the result of you going through the complete design and development process. Assessment of this milestone is for completeness and quality.

Attachment:- Assessment.rar