Web Design

Assessment Details and Submission Guidelines
Trimester T2 2019
Unit Code HS1021
Unit Title Web Design
Assessment Type Individual Assignment
Assessment Title Web Site Project
Purpose of the
assessment (with
ULO Mapping)
You are a member of a design team at Holmes Media Design, a premier web design and
multimedia design firm in Melbourne area. Recently, several local firms have approached
Holmes Media Design with requests for websites.
Students will be able to:
1. Understand basic concepts and principles underlying the Internet, World Wide Web,
and Web design
2. Define, interpret and evaluate different Internet, web architecture, standards and
applications
3. Apply web-programming skills to develop web systems.
4. Solve business problems related to World Wide Web, and Web design
5. Design a web system by considering business need and context of the systems.
Weight 10% of the total assessments
Total Marks 10
Word limit 1000-1500 words
Due Date Week 07
Submission
Guidelines
• All work must be submitted on Blackboard by the due date along with a completed
Assignment Cover Page.
• The assignment must be in MS Word format, 1.5 spacing, 11-pt Calibri (Body) font
and 2 cm margins on all four sides of your page with appropriate section headings.
• Reference sources must be cited in the text of the report, and listed appropriately
at the end in a reference list using Harvard or IEEE referencing style.

2
Assignment 1 Specification
Purpose: this individual assignment provides students with an opportunity to practice techniques and skills
involved in designing webpages using HTML5 and CSS. To design, develop, and publish a web site using
recommended design practices. Your Project will demonstrate mastery of the web development skills and
concepts learned in this course. You are a member of a design team at Holmes Media Design, a premier web
design and multimedia design firm in Melbourne area. Recently, several local firms have approached Holmes
Media Design with requests for websites development. The new clients are:
 Le Expensziv — a new gourmet French restaurant offering wonderfully delicious food and extravagant
prices
 A Pet’s Life — a company that offers animal grooming, training, daycare, and vacation boarding
services to the greater Melbourne area
 Coffee Cafe — a locally owned coffee bar similar to Hudson located in the Melbourne CBD
neighborhood
 Baby Time — a small, upscale shop in Chadstone shopping center specializing in clothes, toys, and
accessories for infants and toddlers
 CDA — a new accounting firm just formed by three recent accounting major graduates with CPAs,
specializing in small business and tax accounting
PLEASE NOTE:
You are required to publish your web on the Internet. Start looking NOW for your Ad Free host (project must
be hosted on a Ad Free host). There are many sites on the web that offer ad free web site hosting. Try searching
for some on your own or check out Ad Free Web Site Hosting (Resources > Ad Free Web Site Hosting) to get
you started.
The project must be your own design and be completed by you — the use of free or purchased web site
templates are not permitted (for example, those found in Dreamweaver, purchased or free, blog or social
networking templates such as Drupal, WordPress, Blogger, Facebook as well as the textbook’s Case Study Lab).
If it is perceived that a web template has been used, the project grade will be no higher than “below average”
(D).
Students sometimes wonder about what a “page” should contain. The answer is that to count as a “page” in
your web project, a web document must be designed in a manner consistent with your site and contain
content of value that includes text and images. Web page documents that have little or no content of value to
your intended audience or consist only of an image or a PDF will NOT be counted as a “page”.
Assignment Requirements:
The assignment requires that you develop a website for one of the listed clients. The director of the chosen
business is interested in developing a website that effectively communicate to a target audience.
You will build a website with content of your client choosing. You must have the elements listed in the
assignment in order to receive good marks for this project.
Milestones
 Topic Approval (must be approved before moving on to other milestones)
 Planning Analysis Sheet
 Site Map
 Wireframe
 Project Update Meeting (weeks 4 & 6)
 Publish Project
3
Web Site Topic Approval: Your instructor must approve the topic of your web site. Once approved, prepare a
one-word document page discussing the following:
 What is the purpose of the site?
 What do you want the web site to accomplish?
 Who is your intended audience?
 What opportunity, problem, or issue is your site addressing?
 What type of content might be included in your site?
 List at least two related or similar sites found on the Web.
Planning Analysis Sheet: Using a word processor, write a one-page Planning Analysis Sheet that includes the
following:
 Web Site Goal
o Describe the goal of your web site in one or two sentences.
 What results do I want to see?
o List the working title of each page on your web.
 What information do I need?
o List where you will obtain the content (facts, text, graphics, sounds, video) for the web pages
you listed above.
 How will your project use a form?
o Describe how you plan to use a form in your project to collect information — examples of
using a form might be to offer feedback, provide a survey or poll, offer subscriptions to a
newsletter, etc.
Site Map: Using a word processor, PowerPoint, or ruler and pencil, draw a flowchart (storyboard) of your web
site that shows the hierarchy of pages and relationships between the pages.
Project Update Meetings: You should have at least three pages of your site completed by week 4. If you have
not done so already, your instructor will help you to publish your pages to your web site. Unless prior
arrangements to meet are made, the Project Update Meetings will be held during class lab time. Bring the
following items to discuss with and hand in to your instructor:
 The URL of your web site.
 The source files of your web pages and images
 A sketch of your page(s) that will utilize a table.
 Your Site Map (revise as needed).
Publish & Discuss Project: Finish publishing your project to your web site. Be prepared to show your web site
to the class, explaining the purpose behind each page / group of pages.
Required Website Contents
Project MUST contain (at minimum)
 One (1) home page and four (4) content pages
 Each page must contain appropriate text and images that provide information and value to the target
audience
 Each page must contain appropriate page titles
 One (1) video (you are not required to create the video, there are many sharable videos on the Web
– chose one that is relevant to your project
 One (1) e-mail link
 One (1) external link
 Each page must contain appropriate meta tags
 One (1) external style sheet (CSS) which contains a minimum of six (6) styles
4
Home Page: A homepage is the introductory page of a website that usually acts as a table of contents for the
site, its history, menu, location, available types of products, etc. Feel free to refer to real-world stores websites
for example. Information about at least three types of products must be provided; with at least three original
or explicitly referenced images. On this page, you should have access to the basic information that is found on
your site.
Webpage Layout:
You need to design an appropriate webpage layout for your client. Following structural elements
must be used, Include the following elements:
 Header & footer
 Navigation, list (ordered or unordered), links
 Section, headings, paragraphs, DIVs
 Images
FOUR HTML5 pages, include the following elements:
 Header & footer
 Navigation, list (ordered or unordered), links (internal & external including “mailto”)
 Section, headings, paragraphs, DIVs, id, class
 Images, font, colour, background
 Block, inline, sizing, border, padding, margin
 table, form, nested navigation, background image
 CSS 3 syntax and styles
 Position (include absolute), float
 Design the necessary dynamic component on the pages
CSS Files
At least one CSS file is to be created to style all HTML pages. Use any CSS properties you deem necessary and
appropriate for the presentation. The following CSS properties can be used:
 color
 font-family
 background-color
 background-image
 border
 text-shadow
 box-shadow
 margin
 padding
 float
The following types of CSS selectors must be used:
 element e.g., h1 , p
 class, e.g., .image , .highlighted
 id e.g., #tbName
 grouping e.g., h1, h2, h3
 contextual e.g., ul li
 pseudo-classes e.g., :hover
Popular browsers and mobile devices must render each page. Your web site project will be evaluated on the
following criteria:
 Project Milestones,
 Including all required web page elements,
 Following recommended web site design practices,
 Visual appeal of site, and
 Accomplishment of project’s objectives.
5
Submission Requirements:
Please submit the following:
 A topic approval (submitted in week 2 as well as included in the final submission)
 A one-page planning analysis sheet (included in the final submission only)
 Site map (submitted in class in week 4 as well as included in the final submission)
 Please submit a web site that contains a home page and at least four content pages. A URL is preferred.
A zipped folder is also acceptable.
Marking Rubric

Marking
Criteria
Outstanding
2
Average
1
Needs Improvement
0
Score
Publish to the
Web
Required pages are published to the Web and
provide content of value to target audience.
Published but required
pages only partially provide
content of value the target
audience.
Not Published or many
required pages do not provide
content of value to target
audience.
Purpose Clearly stated Unclear Missing
Target
Audience
Demographics clearly described (age, gender,
education, socio-economic)
Generally described
adequately
Missing
Visual Appeal Use of color, contrast, text, graphics is
appealing to target audience
Appealing to target
audience in all but one area.
Not appealing to target
audience in more than one
area
Class
Presentation:
Organization
Presentation is coherent and organized Presentation could be more
organized
Presentation is not well
organized
Class
Presentation:
Purpose &
Design
Clearly and completely described purpose and
design issues (color, layout, etc.) of the pages.
Description of purpose and
design issues could have
been more complete or
more clear..
Description of purpose and
design issues was missing or
the student read pages aloud
word-for-word.
Class
Presentation:
Project
Challenges
Clearly and completely discussed challenges
encountered and overcome
Incompletely or unclearly
described challenges
encountered and overcome
Did not discuss challenges
encountered and overcome
Class
Presentation:
Participation
The student was actively engaged during the
discussion of each project — noted web
design best practices, suggested areas for
improvement, and/or asked pertinent
questions.
The student did not attend
class or was not actively
engaged during the discussion
of each project.
Navigation Easy to use, consistent Inconsistent or difficult to
use
Missing
Accessibility W3C Guidelines followed Two or fewer instances
where W3C guidelines are
not followed
Three or more instances where
W3C guidelines are not
followed
Page Titles/
Logo Area
Descriptive and include the
site/company name
Missing or do not include the
site/company name
Table Correct syntax Missing or incorrect syntax
Graphics Correct syntax Missing or incorrect syntax
Video Correct syntax Missing or incorrect syntax

6

E-mail Link Correct syntax Missing or incorrect syntax
Outside Link Correct syntax Missing or incorrect syntax
Meta tag Correct syntax (description meta tags),
excellent selection of keywords and
meaningful description
Correct syntax (description
meta tags), adequate
selection of keywords and
description
Missing or incorrect syntax
Form Coding Correct syntax, meaningful form element
names
Correct syntax Missing
XHTML
Validation
Required number of pages pass Less than the required
number of pages pass
No pages pass
CSS
Validation
External CSS file is present and passes
validation
External CSS file is present
but does not pass validation
External CSS file is not present
or does not pass validation
TOTAL /40
/10