Reference no: EM133159508
ITECH2003 Web Design Document - Federation University
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.
Learning Outcome:
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.
Assignments Overview
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.
• 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.
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.
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).
(Lab 2 contains an exercise to get your started with the Highlights)
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.
(Lab 3 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.)
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
from where you obtained this knowledge.
Assignment 2: Website Development
Overview
In this second assignment, you are required to develop your personal website from scratch, based on the design document that you created in Assignment 1. You should avoid the mistakes made by the competition from your competitive analysis.
Learning Outcomes
• 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 the appropriate use of visual and content design tools, and multimedia and web authoring software;
• Develop a sophisticated web site from scratch, using information gathering and design techniques.
Application:
• Select appropriate design principles to design multimedia products and web pages that are align with project expectations;
• Operate appropriate software packages to build 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.
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.
Assignments Overview
Assignment Details
In this second assignment, you are required to develop your personal website from scratch, based on the design document that you created in Assignment 1. You should avoid the mistakes made by the competition from your competitive analysis. The requirements for building the website are listed below.
All of the labs this semester are designed to help you with this assignment; learning HTML, CSS and JavaScript. Do not discount their potential to assist with parts of developing this website. For an overview of what each lab contains, please click on Moodle's "Content" section at the top of this Moodle course.
Attachment:- Web Design Document.rar