ASSIGNMENT: Website Design Document

OBJECTIVES:

This assessment task examines the following Course objectives:

• understand the design rules that underlie good multimedia and webpage design, from both a visual and content design perspective understand what constitutes poor multimedia and webpage design;

• understand the issues associated with interface design;

• understand the importance of user analysis;

• distinguish between good and poor user interfaces;

• demonstrate knowledge regarding the impact of good and bad user interfaces;

• select and apply suitable techniques for collecting users' requirements and analysing tasks;

• expand their analytical skills;

• expand their skills in storyboarding and design prototyping;

• develop skills in designing efficient human-computer interaction; and

• more fully appreciate ethical behaviour in relation to multimedia and web page design, in particular issues related to copyright.

FORMAT OF THE WEBSITE DESIGN DOCUMENT

Each student is required to prepare a design document, in the format of a report. A report generally consists of a number of pages with section headings and sub-headings. Page numbers are required on every page except the cover page. For ease of reading and marking it is suggested you also provide a Table of Contents with working links to the individual sections of the report.

Use the following table as a guide or checklist for the creation of your design document. Your report MUST have the structure as indicated in the first column of the table. Before handing in your assignment, make sure that all sections are present and that they contain the information required.

1. Topic Name & Description Write this as a summary of the entire website, NOT as an essay-type introduction to the assignment!

1.1. Name As it will appear on your website's homepage

1.2. Description Detailed description and purpose of the site.

2. Target Audience The type of people who will want to view your website

2.1. Demographics Discuss targets Age, Gender, Education, and Interests.

And possibly their Background, Race, Disabilities, Employment Status, and Location if needed

2.2. Justification Why the specified target audience and not others?

3. Storyboards (Early sketches)

3.1. Basic sketches Initial sketches of each significantly different page.

Example: Home layout, Gallery layout, and one that shows the general layout of all other pages. If you design other layouts for specific pages include them also.

4. Competitive Analysis Four (4) websites that are similar to the one you will be creating (eg. Personal Websites!) In your analysis you need to identify why you chose the websites you have analysed

4.1. Analysis of good sites (2) Use the evaluation sheet from the lab session

4.2. Analysis of bad sites (2) Use the evaluation sheet from the lab session

4.3. Summary of good and bad points Short summary of elements you are considering using in your website and those to avoid.

5. Content Requirements The Content Requirements section needs to read like an inventory of all items of information required to make the website functional; this is an "unformatted" section in that it requires you to note all elements needed BY NAME ONLY., The way the content is presented is to be detailed in Section 8 of the document

5.1. Content Inventory Simple list of keywords identifying ALL CONTENT for each page. Example of the Education page: Text-University of Ballarat (2013), Image-University of Ballarat, Text-Federation University (2014), Image-Federation University, Image-Myself at University, Text-ITECH2106 Information, etc.

Masters students (ITECH6106) also need to identify the content inventory for the contact page.

5.2. Categories & Labels See the "WEBSITE OVERALL REQUIREMENTS" document and organise the pages into groups. Example the two gallery pages could fall under one ‘category' - affecting the way you would plan your navigation to those pages (they are still 2 pages which you will ‘label' under the one category). For further info on categories and labels, see Lecture 2.

5.3. Functional Requirements

MASTERS STUDENTS (ITECH6106) ONLY You will need to detail where your forms will be located, how they function (such as JavaScript and HTML) and what will happen with the information (such as data validation and user feedback). This includes the required contact page with 4 elements and the password protected page functionality.

6. Information Architecture

6.1. Site map Graphical representation of the pages in the website, such as a hierarchical diagram; must have identifying labels and show relationship between the pages.

Masters students (ITECH6106) should also indicate which page is password protected, and don't forget the contact page in the sitemap!

6.2. Wire frames Digitally-created wire frames for each significantly different page in the website (based on the Storyboard sketches) - lab 4 contains directions for these.

7. Navigation scheme Identify how users will navigate the website, including the navigation from section to section, internal page to internal page, and internal page to external site.

7.1. Global navigation Description of how users will navigate the entire site. Include details of any primary and secondary navigation.

7.2. Local navigation Description of how users will navigate the pages within a category. Items you categorised together under one category (the two galleries for example), may need a drop-down menu or navigation within that category

7.3. Footer Description of the navigation available in the footer. On such a small website, include the sitemap link.

8. Content Design Full marks will only be given for the detailed description of each page within the site;

8.1. Content Layout for each page Detailed, short description of the content for all pages in the website. NOTE: "description" not the actual content.

8.1.1. Name of page

8.1.2. Layout of page

Self-explanatory

Type of media, content and layout, size of display area. Example: "Type: Textbox. Content: this text contains information regarding my passion for my career, located under the navigation, spanning the width of the webpage. Size: 960px width x 200px height."

Do this for each required element on each page in your website. (will continue with 8.1.3, 8.1.4, etc until each page has been discussed)
Masters students (ITECH6106) also need to identify the content layout for the contact page, as well as identify what happens on the selected password protected page.

9. Visual design

9.1. Description & justification of the chosen design Describe the visual design and explain why the chosen design is suitable for the website.

9.2. Description of colour scheme/ fonts chosen Description and justification for the colour scheme chosen. Identification of the main colours used in hexadecimal notation. e.g. Background dark-grey #272727; text heading #6f71fd; body text #ffffff; identify and justify each different font face you will be using.

9.3. Mock-ups of every different page This is a visualisation of the wire-frames with elements in their proper position but without any real content, other than visible navigation elements. Mock-ups should clearly show the navigation, the colour scheme chosen, as well as how content will be treated.

10. Appendix Any other information for which there is no sub-heading

10.1. Raw data collection References to the materials from which you will develop the website must be present, such as any text, images and media you will use on your website. Images can be inserted into this section or provide exact links to its location. Textual content you will use may contain links to related content; for example you may provide a link to your Federation University courses for the education page.

Remember that these will need to be reworked for Assignment 2 according to the rules of "writing for the web". HOWEVER do not rework the information now, keep them in their raw format!

10.2. References URL of webpages and/or references for documents from which you will use any content to be placed on the website you are developing.