Assignment 1: Design Document | My Assignment Tutor

ITECH2003: Web DesignCRICOS Provider No. 00103D | RTO Code 4909 Page 1 of 10Assignment 1: Design DocumentOverviewIn this first assignment, you are required to prepare a “Design document” in the format of a report which will cover mostof the analysis, planning, content and design considerations of a personal website about yourself that you will developin Assignment 2. The details of this personal website are within this assignment specification document.Timelines and ExpectationsPercentage Value of Task: 25%Due: Week 7, Friday 5pmMinimum time expectation: 25 hoursLearning Outcomes AssessedThe following course learning outcomes are assessed by completing this assessment:Knowledge:• Recognise the importance of user analysis, content organisation, interface design, interfaceusability and the accessibility issues associated with multimedia and web design;• Identify, explain and apply the design principles that underlie good multimedia and webpagedesign, from both a visual & content design perspective.Skills:• Demonstrate analytical skills to design quality multimedia and web pages, and efficient humancomputer interaction;Application:• Select appropriate design principles to design multimedia products and web pages that are alignwith project expectations;Values:• Appreciate ethical behaviour in relation to multimedia and web page design, in particular issuesrelated to copyright.ITECH2003: Web DesignCRICOS Provider No. 00103D | RTO Code 4909 Page 2 of 10•Competitive Analysis•Due Fri 5pm Week 4Early InterventionTask•Design DocumentAssignment 1 •Due Fri 5pm Week 7•Website DevelopmentAssignment 2 •Due Fri 5pm Week 11Assessment DetailsSemester OverviewThis semester you are required to design and develop aPersonal 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 intotwo assignments and one in-class assessment.Assignment 1 DetailsIn this first assignment, you are required to prepare a “Design document” in the format of a report which will cover mostof the analysis, planning, content and design considerations of the personal website about yourself that you will developin Assignment 2. A template has been provided for you on Moodle to create your Design Document. Use this tobegin your assignment.As the website must be about yourself and your career ambitions, choose a career to showcase on the website that youare passionate about. Example: Web Designer, Mainframe Administrator, or Primary School Teacher. If you areuncertain, make one up! Example: Wrestling Champion, Superhero or Award Winning Musician.Below are all the requirements of the actual website you will be building in Assignment 2. Become familiar with these soyou can correctly document the content and designs for your personal website.On page 5 are the instructions on how to structure your Design Document and guides of what each sectionshould include.Website Overall RequirementsThis website has a number of requirements which are detailed in the table below; you should adhere to theserequirements when working on your assignments. General Requirements• You must not use any existing complete templates, or frameworks that assist such as bootstrap.o You will receive a ZERO score for the global website design, HTML and CSS marking criteria if you do so,and may even be considered as plagiarism.• You are expected to create your website by yourself hand-coding HTML, CSS and JavaScript.o (Lab and lecture materials and resources can be used to help you with your website, BUT your designshould be your own, not for example the design/layout of lab exercise.)• 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 aso 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 PlainLanguage 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. Assessments OverviewITECH2003: Web DesignCRICOS Provider No. 00103D | RTO Code 4909 Page 3 of 10 HTML• All html files must begin with the declaration, to indicate HTML5 adherence.• The structure of your website should be built using HTML5 tags styled with CSS where applicable:o , , , , , , , o HTML ’s can be used for other structural elements.o Do not use a where a standard semantic tag would be appropriate, such as for examplethe to tags for headings.o HTML s should be avoided for structure.o Use id and class where necessary.• Any HTML 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 belimited, 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,simple dialog boxes written with JavaScript, and/or built-in HTML5 validation)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. Lower scores awarded if you exceed this.• Must incorporate at least THREE of the CSS3 styles below in a way that improves your web design:o Transitions, Transforms (scale, skew, and/or rotate), Rounded Corners, Multi-Column,Opacity, Shadows, or Gradientso Embedded CSS3 @font-face Fonts (or using Google / Adobe Fonts API is also acceptable)JavaScript /jQuery• JavaScript, jQuery and their libraries are allowed to be used (and some image galleries may requirethese 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 useof this code.ResponsiveDesign(OptionalAdvancedChallenge)• Optional: make your website responsive, responding to different resolutions using @media queries.• Use two to three common breakpoints, each changing the styles to suit the new resolution width.o For example: 600 pixels and lower, 601 pixels to 960 pixels, and 960 pixels and higher.• This is an optional advanced challenge for students seeking higher marks in assignment 2.o Three functional well-styled breakpoints will score higher than two breakpoints.o WARNING: It is highly recommended that beginners and those not confident in their abilitiesdo not take on this optional challenge and instead focus on a fixed centred or flexible design(as outlined in lecture 3), as incorrectly planned and developed responsive websites mayfunction and look worse than a well-designed fixed or flexible website, affecting your marks.Global content requirements for all webpages on your websiteHeader• To identify the website as a website dedicated to you personally, provide:o A relevant heading / title banner and/or image/logoFooter• An appropriate and intuitive footer must be included on your website.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 becategorised together or not. Consider the 5 ± 2 content guideline!• Example: “Education” and “Career” pages may be appropriately categorised together under a mainpage called “About” – with the 2 pages linking from it locally, or within a 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. ITECH2003: Web DesignCRICOS Provider No. 00103D | RTO Code 4909 Page 4 of 10 Home Page Requirements• Filename should be named “index.html”.• Home page should indicate the purpose and identity of your website immediately via:o Short blurb of your name and your career ambition. Example: “Joe Bloggs. Web Designer. I create beautiful websites.”o Short paragraph (15-45 words) providing more detail regarding your career ambition.o No other body text should be present.• It can be more creative than the rest of your web pages, but it should try to professionally represent yourself through:o Image(s) and 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 theexpense of good design. First impressions count!Contact Page Requirements• Give this page an appropriate filename, title, heading (and subheading if required).• You should include relevant text with links to contact you such as email and social media.• This page must have an HTML Contact Form using the element: It must:o Be well-designed and styled with CSS, and its intent must be clear;o Use HTML5 built-in form validation and/or JavaScript to validate the data;o Output error messages/user feedback when there is user input errors or form submission success.Requirements of SIX additional web pages• In addition to the home and contact pages, you are given creative freedom to design and develop the rest of yourpersonal website yourself with only a few specific requirements.• You need to design and develop six more web pages for your personal website for a total of eight thatspecifically reflect the career focused purpose of the website.• Some suggestions (but you may think of your own) are shown below:o About, Achievements, Bio, Blog, Career, 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. Inthese cases (such as a blog), create a prototype of this web page, focusing on design and layout, withsample content in place.Content• Each web page should have:o Appropriate filenames, titles, headings (and subheadings if required) related to their content.o Appropriate text to complement the additional media.o At least one relevant piece of media (image/video/audio).GalleryOne of yoursix additionalweb pagesmust includean imagegallery of atleast siximages• The gallery must be dynamic, meaning it has an interactive visual feature such as:o Lightbox: Thumbnail images that when clicked display a larger version of that image andfades out the rest of the webpage until the image is closed.o Rollover: Thumbnail images that when the mouse hovers over it, displays the larger versionof that image.o Slideshow: The first image displays large 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 One of the lab exercises – the labs have 4 different galleries which you can adapt.o Free image gallery tutorials (make sure to reference code that is not yours).• Galleries that function well and suit the design of your website will be awarded higher marks. ITECH2003: Web DesignCRICOS Provider No. 00103D | RTO Code 4909 Page 5 of 10Design Document StructureThis design document is focused mainly on the final step of the design phase, called “Information Architecture” fromLectures 2 to 6, which handles all of the design considerations for planning a website.Use the following structure for the creation of your Design Document. Before handing in your assignment, make sure thatall sections are present and that they contain the information required.1. Overview(Step 1 of the Design Phase is typically the Needs Analysis from Lecture 2, but this assignment has already identifiedwhy your website is needed and who it will benefit. Instead you will outline your personal website in an overview anddiscuss its Target Audience. The Target Audience Analysis is step 2 of the Design Phase, and is described in Lecture 2.)1.1. DescriptionIdentify the name of your personal website and a short “blurb” that sums up your strengths. Your own name should beincluded within this to identify the individual the website is based on. Discuss your career ambition that your personalwebsite will focus on. Provide a summary of the eight webpages and justify how they relate to yourself and your futurecareer.(Lab 1 contains an exercise to get your started on this assignment with the Description)1.2. HighlightsThis section should describe content with particularly interesting and/or rich features. For example, you should detail thedynamic features of your required image gallery. You should also detail any other content you plan to place on yourpersonal website that you consider to be especially distinctive and with interesting features (such as social mediaintegration, CSS3 animations and transitions, sticky navigation/header/footer, JavaScript and responsive design). Youmay 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, SQLand other server-side functions).1.3. Target AudienceThink about one core demographic that will want to use your website – this has been summarised for you on page 2 ofthese specifications. Now discuss the details of this type of user and their demographics.Age and Gender are very important and should be discussed.Other demographics should be considered in your discussion: Education Level, Interests, Background, Culture,Language, Employment Status, and Location.(Lab 2 contains an exercise to get your started with your Target Audience demographics.)ITECH2003: Web DesignCRICOS Provider No. 00103D | RTO Code 4909 Page 6 of 102. Site Content & Structure(Site Content and Site Structure are described in Lecture 2, including the content inventory, site map, and navigationalelements.)2.1. Site MapDigitally create a hierarchical site map of your website using the eight webpages identified in the overview. The homepage should be at the top of the hierarchy. All of your web pages should be identified by both their page name, and anappropriate html file name, and show the relationship between the pages. (Lecture 2 discussed site maps andcategories)Your site map structure will depend on whether you place similar pages under one category. For example, in Lecture 2, aphotography 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 InventoryA simple list of all the content and their types needed for each web page in your personal website. Each page will containa 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 yourwebsite.)With your site map created, you will be able to design your navigation. Describe how users will navigate the website fromeach page. Include all details of global primary and secondary, local, utility and in-text types of navigation that you willuse. When discussing each navigation type, be sure to describe it visually and how it will function. Also outline anyexternal links on your website.Visual diagrams of your navigation scheme can improve your discussion in this section.3. Content Design(Content Design is discussed in Lecture 3. You should also consider the Grids layouts discussed in Lecture 4.)3.1. Page LayoutThis section requires a detailed description of the general page layout you will use for your website, and why you havechosen this layout. (Options discussed in lecture 4 include fixed, centered, and flexible. Responsive design (as well asadaptive 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), aswell as how you will take advantage of the available screen real estate (after you take “browser chrome” intoconsideration).ITECH2003: Web DesignCRICOS Provider No. 00103D | RTO Code 4909 Page 7 of 103.2. WireframesEvery web page in your website must include a digitally-created wire-frame. (Lecture 3 first describes wireframes, whileLab 6 contains directions on how to create these using the Pencil software and what each wireframe should include forhigher 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-UpThis section should include a mock-up of your home page to give a very good indication of the website’s finalappearance.The mock-up should clearly show the header, footer, navigation, composition, colour scheme, typography, and layout ofyour 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. CompositionProvide a detailed description of your composition used to provide visual guidance to important content, and also bringorder and hierarchy to your webpages.Composition principles to address may include balance, contrast, focus, harmony, motion, simplicity, and space. Alsoprovide a justification for this visual design. (For more information, Visual Design and Composition was discussed inLecture 4.)4.3. Colour SchemeProvide a detailed description of the colour scheme that you will use, and how these colours will express your web site’smood 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 Designwas discussed in Lecture 5.)ITECH2003: Web DesignCRICOS Provider No. 00103D | RTO Code 4909 Page 8 of 104.4. TypographyProvide a detailed description of the typography that you will use. Detail the fonts and the sizes, for each use of text onyour 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, typographywas discussed in Lecture 6.)5. ReferencesList any references you have used for this document in APA Style format. References should be used to help justify yourtarget audience demographics and design choices.If you state something as a fact you must provide an in-text APA citation and an end-of document APA referencefrom where you obtained this knowledge.SubmissionElectronic copies via Moodle. Adobe PDF or Word Doc / Docx accepted.All documents will be processed through the Turnitin plagiarism detection system.Please refer to the “Course Description” for information regarding; late assignments, extensions, specialconsideration, and plagiarism. Students are reminded that all academic regulations can be accessed via theuniversities Website.Guide to writing and referencing: https://federation.edu.au/current-students#Learning_and_studyThe marking guide follows on the next page Plagiarism:Plagiarism is the presentation of the expressed thought or work of another person as though it is one’sown without properly acknowledging that person. You must not allow other students to copy your workand must take care to safeguard against this happening. More information about the plagiarism policyand procedure for the university can be found at http://federation.edu.au/students/learning-andstudy/online-help-with/plagiarism.ITECH2003: Web DesignCRICOS Provider No. 00103D | RTO Code 4909 Page 9 of 10Marking Guide & FeedbackEach Criterion below can be awarded from full marks for excellent, to zero marks for not attempted (partial marksbetween categories can also be awarded). You will receive marks and feedback within two weeks of submission,uploaded to your Moodle submission.This guide can be used as a good checklist before submission.Remember that the best design documents are ones that can be passed to another person and that person is ableto develop the website as envisioned without your assistance. Section MarkedExcellentGoodAcceptablePoorNot Attempted1.1 Description10.750.50.250• Website name must clearly identify and attribute the site to yourself.• Blurb and discussion should clearly identify and detail your career ambition for the personal career website.• All eight pages should be identified and summarised and relate to the personal career focused website.1.2 Highlights10.750.50.250• Detailed discussion of interesting features and content of your website that should be highlighted.• Examples include: Dynamic gallery, social media integration, CSS3 animations and visual effects, sticky navigation/ header/footer,JavaScript and responsive design.1.3 Target Audience10.750.50.250• The core demographic must suit the website purpose. You must discuss at a minimum Age and Gender.• Considers at least 2 more: Education Level, Interests, Background, Culture, Language, Employment Status, and Location.• Back up factual data with references.2.1 Site Map1.20.90.60.30• Site map should have an intuitive hierarchical representation of the site beginning at home page.• Should include webpage names, html file names, and the relationship between webpages.2.2 Content Inventory10.750.50.250• All content requirements must be present, including specific requirements the assignment lists of home and about page.• All eight pages must be be inventorised, with one page requiring a dynamic gallery of images.2.3 Navigation Scheme21.510.50• Description of navigation including its functionality and visual effects is detailed.• Relevant global (primary and secondary), local, footer, utility, in-text, and external links are detailed.3.1 Page Layout10.750.50.250• Page layout description (fixed/centred, flexible, responsive/adaptive) is clear and relevant.• Description of minimum screen width for your chosen layout and how you intend to utilise screen real estate.3.2 Wireframes6.44.83.21.60• All eight pages must each have their own wireframe (max score of 0.8 marks per wireframe).• Design / quality / consistency should show considerations to good design rules and guidelines, and include:o Navigation: look, font type, font size, colouro Content: label, type (video/sound/text/animation), sizeo Text: font type, size, colouro Headings: font type, size, colouro Footer: font type, size, colouro Background: colour(s)/image(s)o Colours: all colours must be defined with a hexadecimal value (EG: #999999)o Fonts: all fonts must be mentioned by name (Arial, Garamond, etc) and size ITECH2003: Web DesignCRICOS Provider No. 00103D | RTO Code 4909 Page 10 of 10 Section MarkedExcellentGoodAcceptablePoorNot Attempted4.1 Home Page Mock-Up3.62.71.80.90• Clearly show good design and visuals that represent website’s final appearance.• Header, footer, navigation, composition, colours, typography, and layout should be present, and any placeholders should be filledto represent their content.4.2 Composition1.61.20.80.40• Details and justification of Composition to create the visual design.• Principles to achieve guidance: Balance, contrast, focus, harmony, motion, simplicity, space.4.3 Colour Scheme1.61.20.80.40• Details and justification of Colour scheme, mood, personality and target audience suitability.• A visual colour swatch with hexadecimal values is required.4.4 Typography1.61.20.80.40• Details of justification of Typography, including fonts and sizes for all text placed on the website.• Visual sample of each font is also required.References and Documentation21.510.50• Design trends and factual data discussed must be backed up by an in-text citation.• Any in-text citations should have a full APA style reference in this section 5.1.• Layout of document should follow the template with adherence to requirements.• Spelling and grammar is an important part of Web Design and the document must be proofread before submitting.% Contribution Towards Course / Maximum Marks25