Webpage & Multimedia Design – Global Homework Experts

Webpage & Multimedia Design
Assignment 1: Design Document
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:
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.
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. 00103D Page 1 of 8
Webpage & Multimedia Design
Assessment Details
Semester 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
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.

order now
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.

Assessments Overview
CRICOS Provider No. 00103D Page 2 of 8
•Competitive Analysis
•Week 4 In Lab Assessment
Early Intervention
•Design Document
Assignment 1 •Due Fri 5pm Week 7
•Website Development
Assignment 2 •Due Fri 5pm Week 11
Webpage & Multimedia Design

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 /
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. 00103D Page 3 of 8
Webpage & Multimedia Design

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).
One of your
web pages
must include
an image
gallery of at
least six
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!):
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 CSS @media query functions

CRICOS Provider No. 00103D Page 4 of 8
Webpage & Multimedia Design
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.
1.2. 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.
2.2. 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. 00103D Page 5 of 8
Webpage & Multimedia Design
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).
3.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.
3.4. Navigation Scheme
(Navigation is first described in Lecture 2, and includes many different types of navigation you may consider for your
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. 00103D Page 6 of 8
Webpage & Multimedia Design
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. 00103D Page 7 of 8
Webpage & Multimedia Design
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.
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: http://federation.edu.au/current-students/learning-and-study/onlineresources/guides-to-your-assessments
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 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.
CRICOS Provider No. 00103D Page 8 of 8

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


Excellent Good Average Poor Not Done 5. Visual Design (48 marks)
6 4.5 3 1.5 0 Visual composition used
4 3 2 1 0 Justification of the composition
6 4.5 3 1.5 0 Colour scheme used
4 3 2 1 0 Justification of the colour scheme
4 3 2 1 0 Colour swatch with hexidecimal values
6 4.5 3 1.5 0 Details of fonts and sizes for each element on website
4 3 2 1 0 Justification of the fonts and sizes
2 1.5 1 0.5 0 Examples of the fonts in use
12 9 6 3 0 Should clearly show good design and visuals of header, footer,
nav, composition, colours, typography, and layout.
Excellent Good Average Poor Not Done 6. Appendix (10 marks)
6.1 Raw Data collection
10 7.5 5 2.5 0 Raw materials (including references) for which to develop the
wesbite. Includes text, images, video, other media
6.2 References
Excellent Good Average Poor Not Done Document Layout and Quality (8 marks)
Layout of document, and adherence to requirements 4 3 2 1 0
Spelling and grammar 4 3 2 1 0
0 Raw Marks Total (Out of 200)
0.0 Total (out of 20% Type A Marks)
Enter: 0 <– Number of Days Late
0.0 Overall Mark
5.3 Typography
insert any comments
insert any comments
insert any comments
5.2 Colour Scheme
5.4 Mock-up of Home Page
5.1 Composition
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
Markers: ITECH6106 should identify differences in this section for their multiple responsive resolutions
insert any comments
Markers: Reduce up to 5 marks for partial or no references. Some choices could be justified with citations