COIT 20268 - Responsive Web Design (RWD) Portfolio 2

This report showcases the complete working and functionality of House of Cards website, covering topics like home page mock-up, navigation, color combination, flowchart, business hours, feedback page, and test cases.

COIT 20268 - Responsive Web Design (RWD)
(Term 1 – 2018)
Portfolio 2
Student Name:
Student ID:
Module Tutor:
Contents
1 | P a g e

Report.............................................................................................................................3
Portfolio 2.1....................................................................................................................3
Portfolio 2.2....................................................................................................................7
Portfolio 2.3....................................................................................................................9
Portfolio 2.4....................................................................................................................9
Portfolio 2.5..................................................................................................................10
Portfolio 2.6..................................................................................................................11
Summary......................................................................................................................12
References....................................................................................................................12
2 | P a g e

Report
Portfolio 2.1
Home Page Mock-up
The Home page mock-up is showing above and the exact Home page is as follows-
3 | P a g e

4 | P a g e

Section Page
The Section page mock-up is showing above and the exact Sections page is showing
below. The section page will contain the information about specific types of cards like
Playing Cards or Greeting Cards etc.
5 | P a g e

Article Page
The Article page mock-up is showing above and the exact Article page is showing below. The
Article page will contain the information about specific cards like Birthday Card etc.
6 | P a g e

Portfolio 2.2
The images that are used in the website are only the images of Resource folder. No
image is used in the website from outside. The navigation is fixed in all the pages
with following menus-
- Home
- Greeting Cards
- Playing Cards
- Postcards
- About
- Contact
- Feedback
The color combination that is used in the website is light green, white and grey like below-
7 | P a g e

The color combination is very nice in the website. All images are having border and there is
same style of headings. All headings are pink in color.
Every image has attributes- src, title etc. that are vry important for the SEO point of view and
very good for the designing and functionality point of view.
8 | P a g e

Portfolio 2.3
Flowchart
The above flow chart is showing the navigation of House of Cards. This navigation link is same
for all the pages. There are some other internal links but that are available only at the Home page
like Business Hours etc.
Portfolio 2.4
Business hours are showing in a separate page in the tabular form. The border of the
table is very thick and black in color.
9 | P a g e
House of Cards|
HOME
Home Greeting
Card
Playing Card Postcard About Contact Feedbac
k

Portfolio 2.5
The feedback page is collecting the user detail and showing below-
The page is asking for the user name, gender, age, country, personnel interest etc.
10 | P a g e

Portfolio 2.6
Test Cases –
Test Cases
1. Menu = Main, Option= Greeting Cards
2. Menu = Main, Option= Playing Cards
3. Menu = Main, Option= Postcards
Users that tested the website has come on the following results-
User Time Easy to access Need changes Good interface
User 1 5 Yes No Yes
User 2 10 m. Yes No Yes
User 3 9 m Yes Yes Yes
User 4 8 m Yes No Yes
(Digital Age Learning 2013)
(TechTerms.com 2013)
Assumptions
Following assumptions are given to the users-
- Use of Google Map
- Use of transitions in images
The users are very happy with these assumptions as both the features are very
interesting and useful.
11 | P a g e

Summary
The report is showing the complete working and functionality of House of Cards
website. The complete website has given lot of experience from designing to
implementing CSS. The CSS is used in designing the website and it is handling the
entire website at one place.
The website is using the Google map, transition in images etc. all things are very
important and may be used at different places at any website.
After completing this project, I am very confident about making any website from
scratch.
References
Digital Age Learning (2013), Overview of User Acceptance Test (UAT) for Business
Analysts (BAs) [online], Available from:
http://www.develop.com/useracceptancetests. [Accessed: 28 May 2018]
TechTerms.com (2013), UAT [online], Available from:
http://www.techterms.com/definition/uat. [Accessed: 28 May 2018]
12 | P a g e