MICRONET INTERNATIONAL COLLEGE BDTVEC ND in Computing MULTIMEDIA AND WEB DESIGN. Mini Project (40%) Due Date: 21st February 2013

Transcription

1 MICRONET INTERNATIONAL COLLEGE BDTVEC ND in Computing MULTIMEDIA AND WEB DESIGN Mini Project (40%) Due Date: 21st February 2013 Produce documentation for the website Submit the SOFTCOPY and also HARDCOPY of the documentation Multimedia and Web Design (MWD) Page 1 of 12 Micronet International College

2 OVERVIEW This assignment is carried out to apply all knowledge that you have learnt in all Skill Area ( ). You are required to design a website with your own creativeness and prepare a report based on one of the scenario provided in this mini project. This mini project has to be completed by a group of four (4) students. SENARIO: You are the design team at Micronet Media Design, a premier web design and multimedia design firm in Jerudong, Brunei Darussalam. Recently, several local firms have approached Micronet with requests for creating their web sites. The new clients are: 1. Jom Makan - a new Malay gourmet restaurant offering wonderfully delicious food and home delivery. 2. Animal s Life - a company that offers animal grooming, training, daycare, and vacation boarding services to the Jerudong area 3. Baby Belle World - a small shop in the Mall specializing in clothes, toys, and accessories for infants and toddlers. 4. De Royalle Cafe - a locally owned coffee bar similar to Starbuck located in Jerudong 5. Computer Link Tech - an emerging technology company specializing in selling computer and electronic devices. They have several branches in different districts. 6. Little Miss Boutique - a small chain of clothing stores targeting college students. Located five (5) miles away from Micronet International College. It focuses on edgy fashions at moderate prices. Your first step will be to decide on the client you would like to work with. Once the decision has been made, your team s task is to perform research on the similar business field competitors and come up with a good website design appropriate for your client s business and target audience. At the end of this mini project, there will be four (4) deliverables required in this project: Website Planning Document, Presentation, Finish and Upload Your Website and Test Plan and Troubleshooting Solution. All these deliverables should be documented properly in a report. Multimedia and Web Design (MWD) Page 2 of 12 Micronet International College

3 TASK: 1. Website Planning Document a. Background Analysis Your team will need to conduct some investigation and background analysis Identify top three (3) expectations from your chosen client for the website. Identify the target audience. Locate three (3) other websites with similar business nature. Perform the analysis by using web design checklist shown below: o Background Information of competitors: i. The company's URL. ii. Who their target audience? iii. What are their objectives? o Accessibility of website, for example: i. Loading time ii. Navigation iii. Content arrangement o Presentation of website, for example: i. Fonts ii. iii. Colour Theme o At least two (2) strengths from each website o At least two (2) weaknesses from each website Multimedia and Web Design (MWD) Page 3 of 12 Micronet International College

4 b. Project Plan Create a project plan which specifies: WHAT: tasks need to be completed WHO: is responsible for each task WHEN: each task will be completed HOW: each task will be done Create a Gantt Chart which reflects the project plan. c. Website Plan: Produce a site map for the website which shows the main structure of the site and how the pages are linked to each other. Your site map should give an overview of the navigation system and how they are linked to each other d. Layout Design Produce detailed plans for each page in the website to show the layout of different multimedia components. Your layout design should: Show the name of the page Show the components in that page Briefly explain the components in that page e. Webpage Style Plan the style for the website which covers the following components: Colour scheme Fonts Any logos, image maps or rollover images (Provide a brief explanation of how you are going to use those images) Video and Sound (With indication of the location where you are going to use them) Multimedia and Web Design (MWD) Page 4 of 12 Micronet International College

5 2. Presentation a. You are required to create a presentation using Microsoft PowerPoint, which is going to be used to propose the website planning created in Task 1. Make sure to include the following topic in your presentation slides: Background Analysis Project Plan Website Plan Layout Design Webpage Style b. On the day of submission, your team are required to present the proposal using the created presentation slides. Presenters should be aware of the oral presentation guidelines such as:- Proper visual aids o Appealing and able to capture audience attention Teamwork o Group members should work together in the presentation. Question and Answer session o Able to give valid responses to the audience and is not out of scope o Able to deter certain questions. Proper attire and grooming o Neat and presentable. o Wear appropriate clothes and shoes. Multimedia and Web Design (MWD) Page 5 of 12 Micronet International College

6 3. Finish And Upload Your Website The website must be developed in Adobe Dreamweaver CS5 containing, but not limited to, all information specified in the requirement. a. Format and Style Based on your plan in Task 1, produce one (1) web page to be used as template for the other pages. Make sure to include: Page Header containing banner, navigation buttons, title, etc. Page Content. Page Footer containing the copyright statements, link, etc. You may use tables or similar methods to arrange and align your content where necessary. b. Webpage: Produce each of the pages in your website using the template created in part a, based on the layout design created in Task 1. Make sure that you have Index page, About Us page, Customer Feedback page and at least two (2) other pages. Index o This will be the website s home page, which must be saved as index.html o The content of this page will be a brief introduction of the client s company. About Us o This page should contain a summary of the client s company background The Customer Feedback page should have: o At least four (4) different form elements such as text fields, radio buttons, check boxes and drop down menus and lay these elements out neatly with a table. o The form should contain a submit button which should the feedback to your team address. o The Customer Feedback form should ask for the visitors opinions about: - The general user opinions of the site - Their feelings about the look and feel of the site - Ease of navigation around the website Multimedia and Web Design (MWD) Page 6 of 12 Micronet International College

7 c. General Requirement for the whole website include: Every page must have a navigation bar with buttons, which is consistently positioned in the same place in every page. All pages must be reachable from every other page without having to use the Back button. Create alternative navigation bar at the bottom of each page using text hyperlinks to go to other pages within the site. Must have at least one (1) Hyperlink to external pages where visitors can find out more information about related topics. All page footer must include hyperlink to the site webmaster. Use your own team address for this. Must have at least one (1) page containing an image map with hotspots that link to different parts of the site. Make sure to have the following components in any of the pages and use it appropriately: o Images o Animations o Video o At least two (2) other interactive content Use appropriate filenames for your web pages. Proof read and spell-check any text that you use. Consistent website style Overall presentation of the website should be appealing, user-friendly, and appropriate. Multimedia and Web Design (MWD) Page 7 of 12 Micronet International College

8 4. Test Plan and Troubleshooting Solution a. Produce a test table to be use when testing your website and provide some troubleshooting solution for each of the error that might happen. It must contains the following topics with minimum of two (2) errors each: Hyperlinks Image Interactive elements Form Consistency of content b. Use at least two (2) different web browsers and test your website according to the test table that you have designed previously. You are required to record the result of each testing in tables. Multimedia and Web Design (MWD) Page 8 of 12 Micronet International College

9 REPORT FORMAT: The report must contain the following: - 1. Page Cover 2. Table of Content [0.5 mark] 3. Abstract [0.5 mark] 4. Introduction [1 mark] 5. Content Task 1 - Website Plan Document a. Background Analysis b. Project Plan c. Website Plan d. Layout Design e. Webpage Style Task 2 - Presentation [15 marks] [10 marks] Print the handout note of each slides Task 3 - Finish and Upload Your Website [55 marks] Take screenshots of each page. Provide the URL link of your website. Task 4 - Test Plan and Troubleshooting Solution [15 marks] Test table of test plan and troubleshooting solution Test results 6. Conclusion [1 mark] Explain how your website meet the intended purpose and its suitability for the intended audience 7. References/ Bibliography [2 marks] Multimedia and Web Design (MWD) Page 9 of 12 Micronet International College

10 Guideline: Before you can submit your assignment, it is important to ensure that it has followed the assignment presentation requirement listed below: Instructions: A. Font and paragraph design Font type = Arial Font size = 11 Line Spacing = st Heading = Arial, Bold, size 16 2 nd Heading = Arial, Bold, size 14 3 rd Heading = Arial, Bold, size 12 B. Diagram Diagram position = centre Diagram label: - Position below diagram and at the centre - Diagram label must be precise and referenced - Example: Fig 1.Task1c Index Page Layout Design c. Proper Header and Footer Footer : o Page number must be at the centre bottom of the page o Student Name at the left bottom of page. o College Name at right bottom side of page Header: o Subject Name must be at the centre top of the page. Multimedia and Web Design (MWD) Page 10 of 12 Micronet International College

11 D. References/ Bibliography Style Referencing using footnote If you choose to use footnotes, the reference is placed at the bottom of the page with a superscript numeric cross-reference to the point in your text at which you are citing the work, for example: 1 Rogers Brubaker, Ethnicity without Groups, (Cambridge MA and London: Cambridge University Press, 2004), pp Writing References or a Bibliography Make sure to include the references for any information you gathered from other resources. Follow the Harvard Referencing guideline. Quoting in the text: With Author Surname (Year of Publication) Example: Young, J. (1996) No author Name of source (Year of Publication) Example: SmartDraw (2011) In the Bibliography: With Author Surname, First name initial (Year of Publication) Title of webpage/article. Available from: URL, [Date of access]. Example: Young, J. (1996) The coherence theory of truth. [Accessed on 12 Jan 2007] No author Name of source Year of Publication: Title of webpage. Available on: URL, [Date of access]. Example: SmartDraw 2011: Tutorial - What is UML. [Accessed on 12 July 2011] All forms of cheating and plagiarism is prohibited. Multimedia and Web Design (MWD) Page 11 of 12 Micronet International College

12 E. Hardcopy and softcopy submission Submit the hardcopy and softcopy containing all the supporting files and compiled documentation in a CD. Softcopy submission: o Documentation: o o Create a new folder in the root folder for your report documentation and rename it as YOURGROUPNAME_DOCUMENTATION. Example of folder name: - Group1_DOCUMENTATION Place the documentation in this folder and rename it as YOURGROUPNAME _MWD_MiniProject_TitleofWebsite.docx for example: - Group1_MWD_MiniProject_AnimalLife.docx Website: Create a new folder in the root folder for your website and rename it as MWD_MiniProject_TitleofWebsite. Example of the folder name: - MWD_MiniProject_Animal Life Place all files in your website in this folder. Make sure to name your homepage as index.html. Autorun: The homepage should be automatically opened as soon as the CD is inserted into the CD- Drive. Multimedia and Web Design (MWD) Page 12 of 12 Micronet International College