Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 4

SAMPLE

UNIVERSITI KUALA LUMPUR


ASSESSMENT BRIEF

COURSE DETAILS
CAMPUS MIIT
COURSE NAME WEB DESIGN
COURSE CODE IMD21503
COURSE LEADER NUR SYAHELA HUSSIEN
LECTURER NUR SYAHELA HUSSIEN
YEAR/SEMESTER JULY 2021

ASSESSMENT DETAILS
TITLE/NAME PROJECT
WEIGHT 30%
DATE/DEADLINE AS STATED IN EACH PROGRESS.
COURSE 1. CLO 2 - Develop a Website by applying the latest Web Design
OUTCOME(S) concept, tools and techniques. (P4/PLO3)
2. CLO 3 – Practice professionalism and ethical consideration in
planning and solving problem pertaining to Website design and
development. (A2/PLO9)
INSTRUCTIONS SCENARIO:

You and your team must create a complete stand-alone website. Your
team should ideally consist of 4 members. The site must contain between
MINIMUM of 10 to MAXIMUM of 20 web pages, displaying at least TWO
level of information. The site will be evaluated for cohesiveness,
accessibility, compliance with W3C standards, and visual design. Choose
own theme topics. Example, tourisms, Covid19, Charity Program, Virtual
Running etc.

[REPORT]

GUIDES
Collaborate to write a report that contain the following details:
CHAPTER 1-Project Description
1. Site title/Introduction – specify the working title for the site. Write a
brief introduction for the website to be build.
2. Need or Problem Statement – describe the need the web site will
satisfy. What is the purpose of the site? Is there an interest group
whose needs are not satisfied? Is there a target niche you are
trying to fill?
3. Rational or focus – explain the Objectives and goals of the site.
4. Main element outline – describe the main features or scopes of

1|P a g e
the site.
5. Target audience – describe the typical audience for the site.
6. Design considerations – preliminary research on similar websites,
comparison and analysis (minimum THREE (3) comparison
websites)
7. Limiting factors – identify the technical or audience factors that
could limit the design goals of the site.

CHAPTER 2 – Project Information Architecture & Navigation Design

1. Design your website’s Information Architecture Diagram (IA).


Show in your IA the site’s content and hierarchy of the site.
2. Make sure to define and explain each of content stated in the IA
diagram
3. Next, based on the IA diagram, design the final site navigation
diagram for your web site. Use appropriate colors setting to
differentiate level/tiers of your web site.

CHAPTER 3- WIREFRAME & MOCKUP DESIGN

1. Create the Web site wireframe manually or with the help of tools
such as Adobe Illustrator, Fireworks or Microsoft Visio or any
Wireframe tools online. It should be in black and white or with
shades of gray. Use placeholder for images and media.

2. Once the wireframe has been finalized, use any image editor such
as Adobe Photoshop to create the visual elements or mockup of
the site, such as the user interface elements such as button and
navigation bars, typography, layout and imagery like photos and
illustrations.

[PROTOTYPE aka FINAL WEB SITE]

1. Built your website using all the information gathered from progress
1-3. Web site structure and content must be built using
HTML/XHTML and CSS only. You can use Flash for button,
banner or animated pictures/video.
2. Once finish, compile all files in a same folder and submit in
sharepoint given by lecturer class and submit before or on the
mention dateline.
3. YOU ARE NOT REQUIRED TO HAVE A DATABASE FOR THIS
PROJECT. If you are planning to have forms, shopping cart, or
any processing data application, you can simple create dummy

2|P a g e
pages to show how exactly the pages will work.

PRESENTATION DAY – WEEK 15

DELIVERABLES

1. A report which consists of the Project Description, website


navigation & Information Architecture and Wireframe & Mockup
Design of the proposed website must be submitted online thru e-
learning system. The link for the submission will be open
within ONE WEEK before the SUBMISSION DATE

PENALTY:
For every day of late submission, 5 marks will be deducted from the overall
mark given.

Example:
Information Architecture Diagram (IA).

3|P a g e
Wireframe

https://unikl365-my.sharepoint.com/:x:/g/personal/syahela_unikl_edu_my/
EVJ8kCHlE3BEioQjujFjZLkBEOEDYJQSAKIfrQ7Q2VjYew?e=tokaQP

4|P a g e

You might also like