Web design assignment due on 30 april,5:00 p.m
ITECH2106-6106 Webpage & Multimedia Design ITECH2003: Web Design Document STUDENT NAME: STUDENT ID: TUTOR NAME: Contents ITECH2003: Web Design Document1 Contents1 1. Overview2 1.1. Description2 1.2. Highlights2 1.3. Target Audience2 2. Site Content & Structure3 2.1. Site Map3 2.2. Content Inventory3 2.3. Navigation Scheme3 3. Content Design4 3.1. Page Layout4 3.2. Wireframes4 4. Visual design5 4.1. Home Page Mock-Up5 4.2. Composition5 4.3. Colour Scheme5 4.4. Typography5 5. References6 ( When your document is complete, make sure all instructions that came with the template are deleted from the document (including this speech box) . The instructions are initially there as a guide to help you write your design document. Then Right-click the Contents above and “Update Field” to update the page numbers . ) 1. Overview (Step 1 of the Design Phase is typically the Needs Analysis from Lecture 2, but this assignment has already identified why your website is needed and who it will benefit. Instead you will outline your personal website in an overview and discuss its Target Audience. The Target Audience Analysis is step 2 of the Design Phase, and is described in Lecture 2.) 1.1. Description Identify the name of your personal website and a “tagline” that sums up your strengths. Your own name should be included within this to identify the individual the website is based on. Discuss your career ambition that your personal website will focus on. Provide a summary of the eight webpages and justify how they relate to yourself and your future career. (Lab 1 contains an exercise to get your started on this assignment and the Description and Highlights sections.) 1.2. Highlights This section should describe content with particularly interesting and/or rich features. For example, you should detail the dynamic features of your required image gallery. 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 responsive design). 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). (Lab 1 contains an exercise to get your started on this assignment and the Description and Highlights sections.) 1.3. Target Audience Think about one core demographic that will want to use your website – this has been summarised for you on page 2 of these specifications. Now use the Lab 2 exercise to fill in the details of the demographics of this user. Demographics to consider: Age, Gender, Education Level, Interests, Background, Culture, Language, Employment Status, and Location. (Lab 2 contains an exercise to get your started with your Target Audience demographics.) 2. Site Content & Structure (Site Content and Site Structure are described in Lecture 2, including the content inventory, site map, and navigational elements.) 2.1. Site Map Digitally create a hierarchical site map of your website using the eight webpages identified in the overview. The home page should be at the top of the hierarchy. All of your web pages should be identified 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.2. 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.) 2.3. Navigation Scheme (Navigation is first described in Lecture 2, and includes many different types of navigation you may consider for your website.) With your site map created, you will be able to design your navigation. Describe how users will navigate the website from each page. Include all details of global primary and secondary, local, utility and in-text types of navigation that you will use. When discussing each navigation type, be sure to describe it visually and how it will function. Also outline any external links on your website. A visual diagram may help outline your navigation scheme. 3. Content Design (Content Design is discussed in Lecture 3. You should also consider the Grids layouts discussed in Lecture 4.) 3.1. Page Layout 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, centered, and flexible. Responsive design (as well as adaptive design) is another consideration that can look great, but more time-consuming) Discuss the minimum screen width you have chosen to focus on (if responsive, the multiple screen width breakpoints), as well as how you will take advantage of the available screen real estate (after you take “browser chrome” into consideration). 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 higher 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(s)/image(s) Colours: all colours in your wireframes must be defined as a hexadecimal value (#999999) Fonts: all fonts in your wireframes must be mentioned by name (Arial, Garamond, etc) and size. 4. Visual design (Visual Design was discussed in Lecture’s 4, 5 and 6) 4.1. Home Page Mock-Up This section should include a mock-up of your home page to give a very good indication of the website’s final appearance. The mock-up should clearly show the header, footer, navigation, composition, colour scheme, typography, and layout of your home page. All placeholders for media shown in your wireframes 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.) 4.2. Composition Provide a detailed description of your composition used to provide visual guidance to important content, and also bring order and hierarchy to your webpages. Composition principles to address may include balance, contrast, focus, harmony, motion, simplicity, and space. Also provide a justification for this visual design. (For more information, Visual Design and Composition was discussed in Lecture 4.) 4.3. 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 proposed target audience. Provide a colour swatch which also identifies each colour’s hexadecimal value. (For more information, Colour in Design was discussed in Lecture 5.) 4.4. 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 samples of each font – take a screenshot to embed each in your document. (For more information, typography was discussed in Lecture 6.) 5. References List any references you have used for this document in APA Style format. References should be used to help justify your target audience demographics and design choices. If you state something as a fact you must provide a citation and reference from where you obtained this knowledge. CRICOS Provider No. 00103D Insert file name here Page 1 of 2 Page 1 | 1 ITECH2003: Web Design CRICOS Provider No. 00103D | RTO Code 4909 Page 1 of 10 Assignment 1: Design Document Overview In this first assignment, you are required to prepare a “Design document” in the format of a report which will cover most of the analysis, planning, content and design considerations of a personal website about yourself that you will develop in Assignment 2. The details of this personal website are within this assignment specification document. Timelines and Expectations Percentage Value of Task: 25% Due: Week 7, Friday 5pm Minimum time expectation: 25 hours Learning Outcomes Assessed The following course learning outcomes are assessed by completing this assessment: Knowledge: • Recognise the importance of user analysis, content organisation, interface design, interface usability and the accessibility issues associated with multimedia and web design; • Identify, explain and apply the design principles that underlie good multimedia and webpage design, from both a visual & content design perspective. Skills: • Demonstrate analytical skills to design quality multimedia and web pages, and efficient human- computer interaction; Application: • Select appropriate design principles to design multimedia products and web pages that are align with project expectations; Values: • Appreciate ethical behaviour in relation to multimedia and web page design, in particular issues related to copyright. ITECH2003: Web Design CRICOS Provider No. 00103D | RTO Code 4909 Page 2 of 10 •Competitive Analysis •Due Fri 5pm Week 4 Early Intervention Task •Design Document •Due Fri 5pm Week 7Assignment 1 •Website Development •Due Fri 5pm Week 11Assignment 2 Assessment Details Semester Overview This semester you are required to design and develop a Personal Website that is: • About yourself and your career ambitions; • Small, unique and professional in appearance; • A portfolio of your achievements; and • A showcase to future potential employers. This task runs the entire semester and is broken down into two assignments and one in-class assessment. Assignment 1 Details In this first assignment, you are required to prepare a “Design document” in the format of a report which will cover most of the analysis, planning, content and design considerations of the personal website about