Reference no: EM133140407

ITECH2003 Web Design Document

Assignment: 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.

Knowledge:
• Recognise the importance of user analysis, content organisation, interface design, interface usability and the accessibility issues associated with multimedia and web design;
• Identify, explain and apply the design principles that underlie good multimedia and webpage design, from both a visual & content design perspective.
Skills:
• Demonstrate analytical skills to design quality multimedia and web pages, and efficient human- computer interaction;
Application:
• Select appropriate design principles to design multimedia products and web pages that are align with project expectations;
Values:
• Appreciate ethical behaviour in relation to multimedia and web page design, in particular issues related to copyright.

Assignment Details
This semester you are required to design and develop a Personal Website about yourself and your future career ambitions. It should be:
• 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.

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 template and then follow Lab 1, Exercise 4 to begin your assignment. Additional Lab exercises assist with other parts of the assignment, check the template for details.
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 (eg: bootstrap, wordpress, etc.)
o You will receive a ZERO score for the layout, 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 content and 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.

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.)

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)

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).

Target Audience
Think about one core demographic that will want to use your website - this has been summarised for you on page 2 of these specifications. Now use the Lab 2 exercise to fill in the details of the demographics of this user.
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.

2. Site Content & Structure
(Site Content and Site Structure are described in Lecture 2, including the content inventory, site map, and navigational elements.)

Content Inventory
A simple list of all the content and their types needed for each web page in your personal website. Each webpage on your website will contain a number of contents, their types and their labels to identify what they are (based on the assignment specifications).
(Lab 4 contains an exercise to get your started with your content inventory.)

Navigation Scheme
Describe how users will navigate the eight webpages in your personal website. (Navigation is first described in Lecture 2
and includes many different types of navigation you may consider for your website.)
Include the functionality and visual details of each of your website's different types of navigation (if applicable):
• global primary and secondary,
• local,
• utility,
• in-text and
• external links.
With eight webpages total required, you need to decide how to categorise your webpages in order to meet the 5±2 guideline (Lecture 3). For example, which webpages belong together under a single category to reduce cognitive load for the user? You can support navigation discussion with images.
Additionally, create a diagram of your website's structural site map that identified the relationship between all eight webpages. The home page should be at the top of the hierarchy, as most users start at, or return to this page. All of your web pages should be identified by both their page name, and an appropriate html file name. (Lecture 2 discussed site maps and categories)
(Lab 5 contains an exercise to get your started with your navigation scheme.)

3. Content Design
(Content Design is discussed in Lecture 3. You should also consider the Grids layouts discussed in Lecture 4.)

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).

Wireframes
Every web page in your website must include a digitally-created wire-frame for desktop screen layout. (Lecture 3 first describes wireframes, while Lab 6 contains directions on how to create these using appropriate software and what each wireframe should include for higher marks.) If pursuing a responsive/adaptive design, see the rubric for creating additional wireframe(s) for mobile devices and how they are marked.
Use the composition principles of balance, contrast, focus, harmony, motion, simplicity, and space to provide order to your web pages (For more information, Visual Design and Composition was discussed in Lecture 4.)
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)

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 with good composition. 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 and composition, while Lab 6 contains directions on how to create a web page mock-up using appropriate software.)

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 of your colour scheme which also identifies the hexadecimal value of each colour in your scheme. For example, if you have 5 colours for your website interface and typography, your colour swatch will show those 5 colours and their hexadecimal value. (See Lecture 5 for how to pick good colour schemes and create swatches.)

Typography
Provide a detailed description of the typography that you will use. Detail the fonts used and their sizes for every different use of text on your website (eg: headings, navigation, content, footer, rollover effects, etc.). Provide a justification for choosing these fonts and sizes. Provide samples of each font - take a screenshot to embed each in your document. (See Lecture 6 for how to pick good font combinations and create good hierarchy.)

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

 

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.

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.

1.3. Target Audience
Think about one core demographic that will want to use your website - this has been summarised for you on page 2 of these specifications. Now use the Lab 2 exercise to fill in the details of the demographics of this user.
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.

Site Content & Structure
(Site Content and Site Structure are described in Lecture 2, including the content inventory, structural site map, and navigational elements.)
2.1. Content Inventory
A simple list of all the content and their types needed for each web page in your personal website. Each webpage on your website will contain a number of contents, their types and their labels to identify what they are (based on the assignment specifications).
(Lab 4 contains an exercise to get your started with your content inventory.)
2.2. Navigation Scheme
Describe how users will navigate the eight webpages in your personal website. (Navigation is first described in Lecture 2 and includes many different types of navigation you may consider for your website.)
Include the functionality and visual details of each of your website's different types of navigation (if applicable):
• global primary and secondary,
• local,
• utility,
• in-text and
• external links.
With eight webpages total required, you need to decide how to categorise your webpages in order to meet the 5±2 guideline (Lecture 3). For example, which webpages belong together under a single category to reduce cognitive load for the user? You can support navigation discussion with images.
Additionally, create a diagram of your website's structural site map that identified the relationship between all eight webpages. The home page should be at the top of the hierarchy, as most users start at, or return to this page. All of your web pages should be identified by both their page name, and an appropriate html file name. (Lecture 2 discussed site maps and categories)

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 for desktop screen layout. (Lecture 3 first describes wireframes, while Lab 6 contains directions on how to create these using appropriate software and what each wireframe should include for higher marks.) If pursuing a responsive/adaptive design, see the rubric for creating additional wireframe(s) for mobile devices and how they are marked.
Use the composition principles of balance, contrast, focus, harmony, motion, simplicity, and spaceto provide order to your web pages(For more information, Visual Design and Composition was discussed inLecture 4.)
Yourwire-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 inLecture'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 with good composition. 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 and composition, while Lab 6 contains directions on how to create a web page mock-up using appropriate software.)
4.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 proposed target audience.
Provide a colour swatch of your colour scheme which also identifies the hexadecimal value of each colour in your scheme. For example, if you have 5 colours for your website interface and typography, your colour swatch will show those 5 colours and their hexadecimal value.
(SeeLecture 5 for how to pick good colour schemes and create swatches.)
4.3. Typography
Provide a detailed description of the typography that you will use. Detail the fonts used and their sizes for every different use of text on your website (eg: headings, navigation, content, footer, rollover effects, etc.). Provide a justification for choosing these fonts and sizes.

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.

Attachment:- Web Design Document.rar