ITECH2106-6106 Webpage & Multimedia Design CRICOS Provider No. 00103D ITECH2106-6106 Assignment 2-Design Document.docx Page 1 of 5 Assignment 2: Design Document 20 type A marks - Due week 7 – Friday 5pm Objectives This assessment task examines the following Learning Outcomes and Attributes: • Knowledge: o Recognise the importance of user analysis, content organisation, interface design, interface usability and the accessibility issues associated with multimedia and web design; o Identify, explain and apply the design principles that underlie good multimedia and webpage design, from both a visual & content design perspective. • Skills: o Demonstrate analytical skills to design quality multimedia and web pages, and efficient human-computer interaction; • Application: o Select appropriate design principles to design multimedia products and web pages that are align with project expectations; • Values: o Appreciate ethical behaviour in relation to multimedia and web page design, in particular issues related to copyright. Overview This semester you are required to analyse, design and develop a Personal Website that is: • Small, unique and professional in appearance; • About yourself and your career ambitions; • A portfolio of your achievements; and • A showcase to future potential employers. This task runs the entire semester and is broken down into three assignments. ! The requirements of this personal website that you must analyse, design and develop can be found in the document "Major Assignment Overview" on Moodle ! In this second assignment, students are required to prepare a "Design document" which will cover most of the planning, content and design considerations of the personal website that they will develop in Assignment 3. It is important that you follow the structure of the assignment on the next page when preparing the Design Document. Personal Website Assignments:ITECH2106-6106 Webpage & Multimedia Design CRICOS Provider No. 00103D ITECH2106-6106 Assignment 2-Design Document.docx Page 2 of 5 Submission Electronic copies via Moodle. Adobe PDF or Word Doc / Docx accepted. Please refer to the "Course Description" for information regarding; late assignments, extensions, special consideration, and plagiarism. Students are reminded that all academic regulations can be accessed via the universities Website. Handbook Regulations: Publication of the handbook for students Presentation Guidelines: APA Style Presentation and Referencing Guide for Students Plagiarism Students are expected to hand in their own work. Each document will be quite unique in the way that each student goes about their content and visual designs. Any suspicion of plagiarism will be thoroughly investigated and, if proven, dealt with in accordance with the University's policy on Plagiarism. Avoiding Plagiarism: Plagiarism information for students Plagiarism Policy: Federation University Plagiarism Policy Design Document Structure 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 to the individual sections of the report. This design document is focused on steps 4 (Information Gathering) & 5 (Information Architecture) of the design phase, discussed in lectures 2 to 6. Use the following structure for the creation of your Design document. Before handing in your assignment, make sure that all sections are present and that they contain the information required. 1. Site Content (Site Content and Site Structure are described in Lecture 2, including the content inventory, functional requirements, and site maps.) 1.1. Content Inventory A simple list of all the content and their types needed for each web page in your personal website. Each page will contain a number of contents and their labels (based on the assignment specifications). (Lab 5 contains an exercise to get your started with your content inventory.) 1.2. Featured Content This section should describe content with particularly interesting and/or rich features. For example, you should detail the dynamic features of your image gallery required on the Gallery page. You should also detail any other content you plan to place on your personal website that you consider to be especially distinctive and with interesting features (such as social media integration, CSS3 animations and transitions, sticky navigation/header/footer, JavaScript and pagination). You may have come up with some ideas after your competitive analysis of other personal websites. Remember that when discussing features your website is required to be developed fully on the client-side (no PHP, SQL and other server-side functions).ITECH2106-6106 Webpage & Multimedia Design CRICOS Provider No. 00103D ITECH2106-6106 Assignment 2-Design Document.docx Page 3 of 5 1.3. Site Map Digitally create a hierarchical map of your website. Identify all of your web pages in the "site map" by both their page name, and an appropriate html file name, and show the relationship between the pages. (Lecture 2 discussed site maps and categories) Your site map structure will depend on whether you place similar pages under one category. For example, in Lecture 2, a photography website had a category called "Galleries", which had the web pages "Portraits" and "Seasons". "Seasons" was a category as well with its own sub-pages of "Summer", "Autumn", "Winter" and "Spring". You must decide how your web pages relate to each other. 2. Navigation Scheme (Navigation is first described in Lecture 2, and includes many different types of navigation you may consider for your website. When discussing each navigation type, a visual diagram may also help.) 2.1. Global Navigation Describe how users will navigate the website using navigation that is accessible from all pages. Include details of any primary and secondary navigation, as well as how the navigation functions. 2.2. Footer Navigation Identify and describe all of the navigation available in the footer, and how it will function. 2.3. Other Navigation Describe any other types of navigation that you will be using in your website, and their functionality. This includes any Local, Utility and In-text navigation. Also outline any external links on your website. 3. Content & Page Design (Content & Page Design is discussed in Lecture 3. You should also consider the Composition and Grids layouts discussed in Lecture 4.) 3.1. Page Design This section requires a detailed description of the general page layout you will use for your website, and why you have chosen this layout. Options discussed in lecture 4 include fixed, flexible and centred design. Responsive design is another consideration, but more time-consuming. We only discuss responsive design in detail in week 11. Discuss the screen resolution you have chosen to focus on, as well as how you will take advantage of the available screen real estate (after you take "browser chrome" into consideration).ITECH2106-6106 Webpage & Multimedia Design CRICOS Provider No. 00103D ITECH2106-6106 Assignment 2-Design Document.docx Page 4 of 5 3.2. Wireframes Every web page in your website must include a digitally-created wire-frame. (Lecture 3 first describes wireframes, while Lab 6 contains directions on how to create these using the Pencil software and what each wireframe should include for high marks.) Your wire-frames should consist of all of the following: • Navigation: look, font type, font size, colour • Content: label, type (video/sound/text/animation), size • Text: font type, size, colour • Headings: font type, size, colour • Footer: font type, size, colour • Background: colour/image o Colours: all colours above must be defined as a hexadecimal value (#999999) o Fonts: all fonts above must be mentioned by name (Arial, Garamond, etc) and point size. After each wireframe, give a brief description of the content design and layout, especially where the content may require additional explanation that the wireframes does not provide. 4. Visual design (Visual Design was discussed in Lecture's 4, 5 and 6) 4.1. Composition Provide a detailed description of the composition that you will use to create order, harmony, balance and comfort to the website. Compositional components may include light & shadow, focal point, how you will lead the viewer through the page, white space, balance and contrast. Also provide a justification for this visual design. (For more information, Visual Design and Composition was discussed in Lecture 4.) 4.2. Colour Scheme Provide a detailed description of the colour scheme that you will use, and how these colours will express your web site's mood and personality. Provide a justification for this colour scheme and how it suits your target audience proposed in Assignment 1. Provide a colour swatch which also identifies each colour's hexadecimal value. (For more information, Colour in Design was discussed in Lecture 5.) 4.3. Typography Provide a detailed description of the typography that you will use. Detail the fonts and the sizes, for each use of text on your website. Provide a justification for choosing these fonts and sizes. Provide examples of each font in use. (For more information, typography was discussed in Lecture 6.) 4.4. Mock-up of Home Page This section should include a mock-up of your home page. The mock-up should clearly show the header, footer, navigation, composition, colour scheme, typography, and layout of your home page. All placeholders for media should now contain the actual media (image, video/audio controls, etc). This should be as close to the look of your final website home page as possible. (Lecture 4 first describes mock-ups, while Lab 6 contains directions on how to create a web page mock-up using image manipulation software.)ITECH2106-6106 Webpage & Multimedia Design CRICOS Provider No. 00103D ITECH2106-6106 Assignment 2-Design Document.docx Page 5 of 5 5. Appendix 5.1. Raw Data Collection Using the content inventory that you created, raw data should be collected for each piece of content in the table. References to the materials from which you will develop the website must be present, such as the 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 "Experience" page, or you may paste direct raw text in. Remember that the raw data will need to be reworked for Assignment 3 according to the rules of "writing for the web". HOWEVER do not rework the information now, keep them in their raw format! (The raw data collection is done during phase 4 of the Design Phase and is called Information Gathering – this is described in Lecture 2 and 3) 5.2. References List any references you have used for this document in APA Style format. Do not include the raw data here.