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 humancomputer 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.
Assessment Details
Semester Overview Assessments 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 yourself that you will develop in Assignment 2. A template has been provided for you on Moodle to create your Design Document. Use this to begin your assignment.
As the website must be about yourself and your career ambitions, choose a career to showcase on the website that you are passionate about. Example: Web Designer, Mainframe Administrator, or Primary School Teacher. If you are uncertain, 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 so you 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 section should include.
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 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 design should 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 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.
HTML • All html files must begin with the !DOCTYPE html declaration, to indicate HTML5 adherence.
• 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, 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 Gradients o 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 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.
Responsive
Design
(Optional
Advanced
Challenge) • 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 abilities do 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 may function and look worse than a well-designed fixed or flexible website, affecting your marks.
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
Footer • 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 be categorised together or not. Consider the 5 ± 2 content guideline!
• Example: “Education” and “Career” pages may be appropriately categorised together under a main page 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.
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 the expense 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 form 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 your personal 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 that specifically 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. In these cases (such as a blog), create a 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 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).
Gallery
One of your six additional 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 when clicked display a larger version of that image and fades 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 version of 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.
Design Document Structure
This design document is focused mainly on the final step of the design phase, called “Information Architecture” from Lectures 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 that all 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 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 short “blurb” 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 with the Description)
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).
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 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.)
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.
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 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 an in-text APA citation and an end-of document APA reference from where you obtained this knowledge.
Submission
Electronic 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, special consideration, and plagiarism. Students are reminded that all academic regulations can be accessed via the universities Website.
Guide to writing and referencing: https://federation.edu.au/current-students#Learning_and_study The 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'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 http://federation.edu.au/students/learning-andstudy/online-help-with/plagiarism.
Marking Guide & Feedback
Each Criterion below can be awarded from full marks for excellent, to zero marks for not attempted (partial marks between 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 able to develop the website as envisioned without your assistance.
Section Marked Excellent Good Acceptable Poor Not Attempted
1.1 Description 1 0.75 0.5 0.25 0
• 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 Highlights 1 0.75 0.5 0.25 0
• 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 Audience 1 0.75 0.5 0.25 0
• 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 Map 1.2 0.9 0.6 0.3 0
• 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 Inventory 1 0.75 0.5 0.25 0
• 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 Scheme 2 1.5 1 0.5 0
• 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 Layout 1 0.75 0.5 0.25 0
• 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 Wireframes 6.4 4.8 3.2 1.6 0
• 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, colour o Content: label, type (video/sound/text/animation), size o Text: font type, size, colour o Headings: font type, size, colour o Footer: font type, size, colour o 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
Section Marked Excellent Good Acceptable Poor Not Attempted
4.1 Home Page Mock-Up 3.6 2.7 1.8 0.9 0
• 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 filled to represent their content.
4.2 Composition 1.6 1.2 0.8 0.4 0
• Details and justification of Composition to create the visual design.
• Principles to achieve guidance: Balance, contrast, focus, harmony, motion, simplicity, space.
4.3 Colour Scheme 1.6 1.2 0.8 0.4 0
• Details and justification of Colour scheme, mood, personality and target audience suitability.
• A visual colour swatch with hexadecimal values is required.
4.4 Typography 1.6 1.2 0.8 0.4 0
• 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 Documentation 2 1.5 1 0.5 0
• 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 Marks 25