Assignment 1: Design Document

Size: px

Start display at page:

Download "Assignment 1: Design Document"

Jeremy Atkins
5 years ago
Views:

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

1 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: 20% Type A Due: Week 7, Friday 5pm Minimum time expectation: 20 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; Skills: Application: Values: Identify, explain and apply the design principles that underlie good multimedia and webpage design, from both a visual & content design perspective. Demonstrate analytical skills to design quality multimedia and web pages, and efficient humancomputer interaction; Select appropriate design principles to design multimedia products and web pages that are align with project expectations; Appreciate ethical behaviour in relation to multimedia and web page design, in particular issues related to copyright. CRICOS Provider No D Page 1 of 8

2 Assessment Details Semester Overview Assessments Overview This semester you are required to 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 two assignments and one in-class assessment. Assignment 1 Details Early Intervention Task Assignment 1 Assignment 2 Competitive Analysis Week 4 In Lab Assessment Design Document Due Fri 5pm Week 7 Website Development Due Fri 5pm Week 11 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 that you will develop in Assignment 2. 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. It is important that you follow the structure of the Website Design Document located on page 5, keeping in mind the requirements of the actual website that are presented in following table of this assignment specification. Website Overall Requirements This website has a number of requirements which are detailed in the table below; you should adhere to these requirements when working on your assignments. General Requirements You must not use any existing templates, or frameworks that assist such as bootstrap. You are expected to create your website by yourself. (Lab and lecture materials can be used to help you with your website, BUT your design should be your own, not the lab exercise design.) You may not develop the website using server-side scripting languages, such as PHP, ASP, etc. Your design should focus on design rules learned during this course such as o Rules of good visual design; o Usability guidelines related to Colour, Typography, Placement of objects, Readability and Balance. o A solid understanding of the use of other elements such as; contrast, white space, layout, focal point, alignment, proximity, etc. All text should follow the rules of writing for the web, including appropriately chunked content, use of Plain Language and the Inverted Pyramid style of writing. Images, sound, and other media file sizes optimised for download and display. Well-designed unique and creative websites will be awarded appropriately. CRICOS Provider No D Page 2 of 8

3 HTML All html files must begin with the <!DOCTYPE html> declaration, to indicate HTML5 documents. The structure of your website should be built using HTML5 tags styled with CSS where applicable: o <header>, <nav>, <section>, <article>, <aside>, <footer>, <figure>, <figcaption> o HTML <div> s can be used for other structural elements. o Do not use a <div> where a standard semantic tag would be appropriate, such as for example the <h1> to <h6> tags for headings. o HTML <table>s should be avoided for structure. o Use id and class where necessary. Any HTML <form> used on the site should: o Be well-designed and styled with CSS, and their intent must be clear; o NOT use PHP or other server side technologies. Functionality of such forms may therefore be limited, and only have partial functionality (prototype stage), but should be fully designed, and; o Contain data validation, error messages, user feedback etc. (either in a pop-up window, or simple dialog boxes written with JavaScript) CSS All content should be formatted and styled using an external cascading stylesheet (CSS). o This is to keep content and style strictly separated. o A max of 2 external stylesheets are allowed. ITECH2106 students need to incorporate at least TWO of the CSS3 styles below: ITECH6106 students need to incorporate any SIX of the CSS3 styles below: o CSS3 transitions o CSS3 transforms (scale, skew, and/or rotate) o CSS3 rounded corners o CSS3 embedded fonts - or use Google / Adobe Fonts API o CSS3 multi-column o CSS3 shadows o CSS3 gradients JavaScript / jquery JavaScript, jquery and their libraries are allowed to be used (and some image galleries may require these languages) as long as it is all functional on the client side. No server-side scripting languages. You can use external sources of code/tutorials to help you with this, but you must reference the use of this code. Global content requirements for all webpages on your website Header To identify the website as a website dedicated to you personally, provide: o A relevant heading / title banner and/or image/logo Navigation There should be a clear, intuitive and consistent navigation structure on the website. You need to think about how you will provide navigation to the user, and whether some pages may be categorised together or not. o Example: A personal image gallery and a portfolio gallery may be categorised together under a main page called Gallery with the 2 pages linking from it locally, or within a main menu drop-down function. Types you can include (if applicable for your design and requirements): o Global (Primary and maybe Secondary), Local, Footer, In-text, Utility. Footer An appropriate and intuitive footer should be included on your website CRICOS Provider No D Page 3 of 8

4 Home Page Requirements Filename should be named index.html. Home page should indicate the purpose and identity of your website immediately via: Short blurb of your name and your career ambition. o Example: Joe Bloggs. Web Designer. I create beautiful websites. Short paragraph (15-45 words) providing more detail regarding your career ambition. No other body text should be present. It can be more flamboyant or flashy than the rest of your web pages. It should try to professionally represent yourself through: o Image(s) o Visual design (Composition, Colour and Typography) Remember this design is to reflect your style and personality (with the focus on your career ambitions), but not at the expense of good design. First impressions count! Requirements of SEVEN additional web pages In addition to the home page, you are given creative freedom to design and develop the rest of your personal website yourself with only a few specific requirements. You need to design and develop seven more web pages for a total of eight. Some suggestions (but you may think of your own) are shown below: o Achievements, Blog, Career, Contact, Design, Education, Experience, Gallery, Hobbies, Journal, Ideas, Photography, Portfolio, Testimonials, Travel. o Note that some of these suggestions above would technically require server-side scripting to fully function. In these cases (such as a blog), create a working prototype of this web page, focusing on design and layout, with sample content in place. Content Each web page should have: o Appropriate filenames, titles, headings (and subheadings) related to their content. o Appropriate text to complement the additional media. o At least one relevant piece of media (image/video/audio). Gallery One of your web pages must include an image gallery of at least six images The gallery must be dynamic, meaning it has an interactive visual feature such as: o Lightbox: Thumbnail images that link to a large sized version of that image. o Rollover: Thumbnail images that when the mouse hovers over it, displays the larger version of that image. o Slideshow: The first image displays large on the webpage and the user can cycle through the images. o Any other Dynamic Gallery that is designed and presented well. You may need to incorporate code (using CSS, JavaScript and/or jquery) from: o Free web design tutorials to get your galleries working, or Be sure to reference code that is not yours. o One of the lab exercises the labs have 4 different galleries which you can adapt. Galleries that function well and suit the design of your website will be awarded higher marks. ITECH6106 Students (and ITECH2106 Students that want a challenge!): Responsive Design Your website needs to be responsive. Create different styles for screen widths of: o 600 pixels and lower o 601 pixels to 960 pixels o 960 pixels and higher Use the query functions CRICOS Provider No D Page 4 of 8

5 Design Document Structure This design document is focused on all steps of the design phase discussed in lectures 2 to 6 (except step 3: Competitive Analysis, which is conducted in the Early Intervention Task.) 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. Needs Analysis (The Needs Analysis is step 1 of the Design Phase, and is described in Lecture 2. An exercise in Lab 1 instructs how to perform a needs analysis.) 1.1. Description Detailed Description of the website you will be designing and building, including a title/name for the website Purpose Describe in detail the purpose of the website. Why is it needed? Who will benefit from the website? The purpose should relate to the target audience. Think of this website as a real-world scenario with a real purpose (the purpose should not be that you are required to design and build a website for this course). 2. Target Audience Analysis (The Target Audience Analysis is step 2 of the Design Phase, and is described in Lecture 2. An exercise in Lab 2 instructs how to perform a target audience analysis.) 2.1. Demographics Think about two of the main potential users you will be targeting for your website. Describe in detail the demographics of these users. Discuss their Age, Gender, Education Level, and Interests. Additional demographics may be Background, Race, Disabilities, Employment Status, and Location if needed Justification Justify why you are targeting these specific users and their demographics, and excluding other types. 3. Site Content & Structure (Site Content and Site Structure are described in Lecture 2, including the content inventory, functional requirements, and site maps.) CRICOS Provider No D Page 5 of 8

6 3.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.) 3.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) 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 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 any 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 how it will function. Also outline any external links on your website. A visual diagram may help outline your navigation scheme. 4. Content & Page Design (Content & Page Design is discussed in Lecture 3. You should also consider the Grids layouts discussed in Lecture 4.) 4.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, however ITECH6106 students MUST have a responsive website, for ITECH2106 it is optional) 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). CRICOS Provider No D Page 6 of 8

7 4.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 Colours: all colours above must be defined as a hexadecimal value (#999999) 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. 5. Visual design (Visual Design was discussed in Lecture s 4, 5 and 6) 5.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.) 5.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.) 5.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.) 5.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.) CRICOS Provider No D Page 7 of 8

8 6. Appendix 6.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) 6.2. References List any references you have used for this document in APA Style format. References should be used to help justify your design choices, especially where you state a fact you obtained from another source. Do not include the raw data here. 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. Guide to writing and referencing: Marking Rubric & Feedback A detailed marking rubric is appended to the end of this document. The marking scale for each item represents a scale of excellent (High Distinction level work), good (Competent to Distinction level work), average (Pass level work), poor (below Pass level) and not completed, and partial marks between may be awarded. You will receive marks and feedback within two weeks of submission, uploaded to your Moodle submission. Plagiarism: Plagiarism is the presentation of the expressed thought or work of another person as though it is one's own without properly acknowledging that person. You must not allow other students to copy your work and must take care to safeguard against this happening. More information about the plagiarism policy and procedure for the university can be found at CRICOS Provider No D Page 8 of 8

Assignment 1: Design Document Marking and Feedback Student Name: ID: Section Marking Options 1. Needs Analysis (16 marks) 1.1 Description Detailed Description & Website Name 1.

9 Assignment 1: Design Document Marking and Feedback Student Name: ID: Section Marking Options 1. Needs Analysis (16 marks) 1.1 Description Detailed Description & Website Name 1.2 Purpose Detailed Purpose. Needs & Benefits? 2 Target Audience Analysis (16 marks) 2.1 Demographics Age, gender, edu level, interests, etc 2.2 Justification Clear justification of chosen audience 3. Site Content & Structure (42 marks) 3.1 Content Inventory ALL content requirements are present, including documented requirements and own content in a list for all eight pages Marks Markers: Names of pages should have been decided and have relevant names for the entire document 3.2 Featured Content Description of featured content. Markers: Min req. is the gallery functionality and CSS3 features for all students ITECH6106 students should also describe the feature of their responsive website 3.3 Site Map Detailed heirarchical representation of site map Page names, html file names, & relationship between pages 3.4 Navigation Scheme Description of navigation, including any global primary and secondary, local, utility, in-text, and external links Functionality of Navigation, including visual effects 4. Content & Page Design (60 marks) 4.1 Page Design Page layout description (fixed, flexible, centred, responsive) Description of resolution and utilising screen real estate 4.2 Wireframes Markers: Colours need hexidecimal values & fonts need names & sizes. If missed, then the student cannot receive the higher marks for the categories below that require them. Wireframes should consist of the following (score should also reflect the design and quality of wireframe): Navigation: look, font type, size, colours Content: label, type (video/sound/text/etc), size Text: font type, size, colours Headings: font type, size, colours Footer: font type, size, colours Background: colour(s), image(s) - file type Markers: -4 marks per wireframe not done (out of eight wireframes required) (penalty should not exceed the total score given for 3.2 wireframes above) Small description content, that also clarifies unclear wireframe

10 Markers: For responsive websites, additional wireframes for their different resolutions would be ideal, but is not required. ITECH6106 students should at least clarify in this section the responsive feature 5. Visual Design (48 marks) Markers: ITECH6106 should identify differences in this section for their multiple responsive resolutions 5.1 Composition Visual composition used Justification of the composition 5.2 Colour Scheme Colour scheme used Justification of the colour scheme Colour swatch with hexidecimal values 5.3 Typography Details of fonts and sizes for each element on website Justification of the fonts and sizes Examples of the fonts in use 5.4 Mock-up of Home Page Should clearly show good design and visuals of header, footer, nav, composition, colours, typography, and layout. 6. Appendix (10 marks) 6.1 Raw Data collection Raw materials (including references) for which to develop the wesbite. Includes text, images, video, other media 6.2 References Markers: Reduce up to 5 marks for partial or no references. Some choices could be justified with citations Document Layout and Quality (8 marks) Layout of document, and adherence to requirements Spelling and grammar Raw Marks Total (Out of 200) 0 Total (out of 20% Type A Marks) 0.0 Enter: <-- Number of Days Late 0 Overall Mark 0.0

Assignment 2: Website Development

Assignment 2: Website Development Overview In this second assignment, you are required to develop your personal website from scratch, based on the design document that you created in Assignment 1. You