Design document
ITECH 2003 Assignment 1 Web design
Design document
Assignment 1
COURSE / UNIT CODE: ITECH2003
TUTOR NAME: Sai K Lakkaraju
STUDENT ID: XXXXXXXXXX
STUDENT NAME: Inderjit Singh Braich
DUE DATE: Friday, 3 May 2019
EXTENSION DATE AUTHORISED:
TITLE OF SUBMISSION: Assignment 1 Design Document
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.
Plagiarism is a serious offence. As set out in University Regulation 6.1.1., students who are caught plagiarising:
· A first offence, be given a zero mark for that task.
· A second offence will result in a failing grade for the Course(s) involved and,
· Any subsequent offence will be refe
ed to the Student Discipline Committee.
Please read http:
policy.federation.edu.au/university/student_plagiarism/ch01.php
Declaration
I have read the university’s plagiarism policy and understand the consequences of engaging in plagiarism and collusion.
I have taken proper care to safeguard this work and made all reasonable efforts to ensure it could not be copied.
No part of this assignment has been previously submitted as part of another unit/course.
I acknowledge and agree that the assessor of this assignment may for the purposes of assessment, reproduce the assignment and:
· provide to another member of faculty and any external marker; and/or
· submit it to a text matching software; and/o
I certify that I have not plagiarised the work of others or participated in unauthorised collaboration when preparing this assignment.
Note: As this is an electronic submission, feel free to put your name in the signature box, you don't need to print / sign / scan this document.
Signature: Inderjit Singh Braich _ Date: Thursday 25 April 2019
Privacy Statement
The information on this form is collected for the primary purpose of assessing your assignment and ensuring the academic integrity requirements of the University are met. Other purposes of collection include recording your plagiarism and collusion declaration, attending to course and administrative matters and statistical analyses. If you choose not to complete all the questions on this form it may not be possible for University to assess your assignment. You have a right to access personal information that the University holds about you, subject to any exceptions in relevant legislation.
Contents
1. Overview 3
1.1. Description 3
1.2. Highlights 3
1.2. Target Audience 3
2. Site Content & Structure 4
2.1. Site Map 4
2.2. Content Inventory 5
2.3. Navigation Scheme 6
3. Content Design 7
3.1. Page Layout 7
3.2. Wireframes 7
4. Visual design 14
4.1. Home Page Mock-Up 14
4.2. Composition 14
4.3. Color Scheme 14
4.4. Typography 14
5. References 15
References 15
Table of figures
Figure 1 Homepage 7
Figure 2 Career 8
Figure 3 Achievement 9
Figure 4 Education 10
Figure 5 Experience 11
Figure 6 Gallery 12
Figure 7 Ho
ies 13
1. Overview
This website is designed to identify my personal skills and qualifications. Before this I used to use the paper resume to apply for any job but now I want to make my own website so that I can make it available online through this website. Anyone who want to look, or I can attach the link to my email so that anyone interested can have a look at my website. This will benefit me a lot.
1.1. Description
The name of my website is going to be “Inderjit Sigh Braich”. I want to be a programmer. So, this website will focus on my career plans and demonstrate about future job or wished jobs. The blu
I will use is ‘Inderjit: the programmer’. There will be eight pages in my website and first page will be homepage and will have my image, global navigation with some content with it. The rest of pages will be as follows:
· Achievement
· Caree
· Education
· Experience
· Gallery
· Ho
ies
· Contact
They all will have same colour combinations and with the same global navigation and utilities. There will be lot of in texts in it.
1.2. Highlights
In my website I will also be placing the image gallery in one page and it will express the collection of my images. My travel images will also be included. There will be separate page of my ho
ies as well. My personal website will act as a showcase to the future potential employers. This will create a positive effect on my personality for seeking any job. Moreover, it will help me to widen my social circle. My main aim is to attract the people of my concerned field and I will put my contact details to get in touch with me. My website will be responsive on different screens. Some of the animations will be used in gallery.
1.2. Target Audience
This website will attract the companies and employers who are looking for experienced programmers. If anyone else is interested can have a look and I will attach the link to my email as well so that they can visit my website. The main target audience will be employees and individuals. They can be of any gender and aged between 25-55 who are looking for the employees. Moreover, selectors can be also programmer, web developer who are looking for creative programmer. My website will reflect my creativity and knowledge about programming.
Other audience are excluded because only employers or selectors will have interest in programmers and they are going to visit my website.
2. Site Content & Structure
2.1. Site Map
· Homepage
· Achievement
· Academic achievements
· Skills
· Knowledge
· Caree
· Goals
· Work (1)
· Work (2)
· Education
· Education (1)
· Education (2)
· Education (3) Continuing
· Experience
· First skill
· Second skill
· Third skill
· Gallery
· First image
· Second image
· Third image
· Forth image
· Fifth image
· Ho
ies
· First image
· Second image
· Contact
· In text links
2.2. Content Inventory
Page
Type of content
Label
Home (home.html)
· Jpeg Image
· Text
· Text
· Image of myself
· Content about myself
· Sub-Heading
All eight pages
· Text
· Jpeg Image
· Text
· Icons
· A utility search ta
· Website Title/Banne
· My New Logo
· Copy right and date of built in foote
· Icons of the social apps
· For searching for some content.
Achievement (achievement.html)
· Jpeg Image
· Text
· As a background
· Content About the Achievement
Career (career.html)
· Jpeg Image
· text
· Slideshow of the images.
· Content about career.
Education (education.html)
· Logos
· Text
· Logo of the educational institutes.
· Brief of description about education.
Experience (experience.html)
· Small Images
· Text
· Images of company logos.
· Brief description about experience.
Gallery (gallery.html)
· Images
· Many images in a collection.
Ho
ies (ho
ies.html)
· Images
· Icons
· Text
· Short clip video
· Images of places I visited
· Icons of different ho
ies
· Brief description about the images and ho
ies
· Short video clip about my ho
ies.
Contact (contact.html)
· Icon
· Text
· Icon of the contact
· Contact information
2.3. Navigation Scheme
3. Content Design
3.1. Page Layout
This website is a multipage website which will have
ief introduction of mine with some images and text about the picture. Every other page will have some description about the related topic and image. Achievement page will also have some images related to the knowledge and skills I have. Education page will have the description of my studies. There will a collection of images in the gallery page. This will include the location of pictures as well. Short video clip is included in the ho
ies page and list of places I travelled. Contact page will have a message box with full of text areas and the page will have static global navigation.
3.2. Wireframes
Figure 1 Homepage
Figure 2 Caree
Figure 3 Achievement
Figure 4 Education
Figure 5 Experience
Figure 6 Gallery
Figure 7 Ho
ies
4. Visual design
4.1. Home Page Mock-Up
4.2. Composition
Webpage elements will have equal distribution of visual weight. In my website I will use symmetrical and balanced composition. Webpage elements will be clearly separated by different size, colour and pattern. The important content will be in good contrast and dynamic images. My website is going to be simple, clean and clear which is easy to understand. This will emphasise the focus. If I overuse the visual effects it can detracts the contrast5, order and harmony. Full space will be provided for each element. White space will be over horizontal and vertical lines.
4.3. Color Scheme
In my website I will use desaturated colours because it is generally prefe
ed by mature audience. As my website is going to be a programmer website so it will look like more professional.
4.4. Typography
The font used in this website is from google APIs. Jet black font is used. All fonts are Sans serif in the whole website. Heading fonts will be 18pt and body font will be 16pt.
5. References
References
Federation University. (n.d.). Retrieved from http:
www.federation.edu.au
Gummisig. (n.d.). Icelandic Exfreelance Web Designer gummisig. Retrieved from Gummisig: http:
www.gummisig.com
Lynch, P. & XXXXXXXXXXWeb Style Guide, 3rd Edition. USA: Yale Univeristy Press. Retrieved May 1, 2019
Roberto. (n.d.). Roberto. Retrieved from Roberto Firmino: http:
obertofirmino.com/index.php
pg. 2
ITECH2003
Web Design
CRICOS Provider No. 00103D Page 1 of 7
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. The requirements for building the website are listed further below.
Timelines and Expectations
Percentage Value of Task: 20%
Due: Week 11, Friday 5pm
Minimum time expectation: 20 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 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