ASSIGNMENT 2
Qualification BTEC HND Diploma in Computing and Systems Development
Unit number and title Unit 14: Website design
Assignment due Assignment submitted
Learner’s name Assessor name
Learner declaration:
I certify that the work submitted for this assignment is my own and research sources are fully acknowledged.
Learner signature Date
Grading grid
P2.1 P2.2 M2 M3 D1 D2 D3
Assignment title Assignment2: Design a website
In this assignment, you will have opportunities to provide evidence against the following criteria.
Indicate the page numbers where the evidence can be found.
Assessment criteria Expected evidence Task Assessor’s Feedback
no.
LO2: Be able to design interactive websites
The report should show a good
2.1: Design an interactive
structure of a website: site map, links,
website to meet given
color, wireframes as well as good 1
requirements
explanation purposes of website and
the audience of the website
2.2: Evaluate web site design Prepare a good questionnaire and
2
with other users propose of modification
Assessment criteria Expected Evidence Feedback
(note on Merit/Distinction if applicable)
Merit descriptor No. (M1)
Merit descriptor No. (M2)
Merit descriptor No. (M3)
Distinction descriptor No. (D1)
Distinction descriptor No. (D2)
Distinction descriptor No. (D3)
Summative feedback
Assessor’s Signature Date
<ATTACHED EVIDENCE>
Table of Contents
Task 1. Prepare a design portfolio for the MWS website ............................................................... 6
1.1 The purpose of the project .............................................................................................. 6
1.2 The target audience .............................................................................................................. 6
1.3 The target device types and how they will be accommodated ............................................ 7
1.4 Features of competitive websites that you need to incorporate or improve on ................. 7
1.5 Site-map .............................................................................................................................. 10
1.6 How the overall navigation is structured: tables, links, menus, dropdowns ...................... 10
1.7 Wireframes showing a view of the content on the key pages ........................................... 12
1.8 A specification of the visual style ........................................................................................ 23
Task 2: Evaluate web site design with other users. ...................................................................... 24
2.1 Feedback ........................................................................................................................ 24
2.2 Critically analyses the feedback ..................................................................................... 30
References .................................................................................................................................... 30
Task 1. Prepare a design portfolio for the MWS website
1.1 The purpose of the project
This is online store website designed for the MWS company. This site provides technology
products (smart phone, laptop, gaming,…). Customers can view information about products and
order them.
1.2 The target audience
- Audience buyer:
This site is for tech enthusiasts who like to play video games or want to find a laptop to
work with
- Audience seller:
The managers or the staff who can only online and process the order of customer
anywhere.
1.3 The target device types and how they will be accommodated
Web pages are designed in both horizontal and vertical to compatible with all screen sizes.
On the screen of tablet, desktop and laptop devices, the components will be arranged
horizontally
On the screen of smartphone devices, the components will be arranged vertically
1.4 Features of competitive websites that you need to incorporate or improve on
1.4.1 New Product Review:
Figure 1: Review new product
This feature is located on the homepage. Designed as a slide show. It is used to display the
latest products of the store. Customers will quickly see the information of new products.
1.4.2 Contact Function
Figure 2: Contact funtion
Customers can get contact information in other ways. Phone number, email and store location
All are hotlines and can serve customers at any time.
1.4.3 View Detail Product
Figure 3: View detail product
The website provides information and detailed images of the product, customers can choose on
the photo to see it in large size.
1.5 Site-map
Figure 4: Site-map
1.6 How the overall navigation is structured: tables, links, menus, dropdowns
1.6.1 Tables
Figure 5: Table
The table is designed to contain items in a list. The tables are placed in different pages to
display the same product category, the customer will be very easy to view and select products.
1.6.2 Links
Figure 6: Links
The links are assigned to the Logo so customers can return to the homepage easily. They are
also placed in all positions, image, text… , users can click on the link to go to another page or
the external page.
1.6.3 Menus
Figure 7: Menu head
The menu is set in the header, which contains all links to other pages of the site.
1.6.4 Dropdown
Figure 8: dropdown
The dropdown is designed for screen sizes of smartphones and tablets. The dropdown is set in
the header, which contains links to other pages.
1.7 Wireframes showing a view of the content on the key pages
1.7.1 Home Page
- On Pc
Figure 9: Home-Page on pc
This is the home page of the web site. The place will be located here slideshow to showcase the
latest products of the company
- On Smart Phone
Figure 10: Home-Page smart phone
On smart phone screen, the components will be arranged vertically. The menu bar in head of
page (that contain ‘Home’, ‘Category’, ‘Help’, ‘Contact’) become Navbar when display on smart
phone screen.
1.7.2 Product Page
- On Pc
Figure 11: Product-Page on pc
When user choose one kind of product on category. Product Page will be appear. This page will
show all product of one kind on category.
- On Smart Phone
Figure 12: Product Page on smartphone
1.4.3 Detail Page
- On Pc
Figure 13: Detail Page on pc
When you click on one product of Product Page, you will go to the Detail Page where display all
information and price of this product, and customer can order product on this page.
- On Smart Phone:
Figure 14: Detail Page on smartphone
1.4.4 Login Page
- On Pc
Figure 15: Login Page on pc
This is Login Page, User input ‘username’ and ‘password’ to use add cart function.
- On Smart Phone
Figure 16: Login Page on smartphone
1.4.5 Help Screen Page
- On Pc
Figure 17: Help Screen on pc
This is Help Screen Page where support and give user some help while they use this web.
- On Smart Phone
Figure 18: Help Screen on smartphone
1.8 A specification of the visual style
- 1.5.1 Font:
The main font is used on the website which is Rubik
- 1.5.2 Font size:
In different components I use different font sizes. From 14 to 20.
- 1.5.3 Colors:
I use bright color to make attraction with customers. Primarily is gray and white
- 1.5.4 Background:
All Page on website use the while background
- 1.5.5 Image:
These are the images of the company's product, it is very plentiful, beautiful and sharp.
Task 2: Evaluate web site design with other users.
2.1 Feedback
You evaluate and grade the following criteria. Each criterion will be to a scale of 1 to 5:
2.1.1 Meeting the needs of MWS
Figure 19: Feedback 1
2.1.2 Suitability of the design for the target audience
Figure 20: Feedback 2
2.1.3 Usability and accessibility of the design
Figure 21: Feedback 3
2.1.4 Attractiveness of the design
Figure 22: Feedback 4
2.1.5 Rating the website
Figure 23: Feedback 5
2.2 Critically analyses the feedback
No Feedback detail Scope Solution
1 Does is meet the Meeting the needs This site has
needs of MWS? of MWS basically met the
needs of the
company. But still
many needs are not
met. I will create
more features such
as online payment
2 Is the design Suitability of the The website is quite
appropriate for the design for the target suitable for target
target audience? audience audience
3 The Design is Usability and Some functions are
usability and accessibility of the quite difficult to
accessibility? design use. Will make more
features in the
future as suggestion
system
4 The Design is Attractiveness of the The website has not
Attractive? design really make the
attraction. Need to
edit more color and
layout for easier
look
References
