COIT 20268 - Responsive Web Design (RWD) Portfolio 1

This assignment is part of the COIT 20268 - Responsive Web Design (RWD) course, where students are required to create a portfolio that showcases their understanding of responsive web design principles. The task involves designing and developing a website for House of Cards, a sole-proprietor with a physical shop, to provide information to customers who want to visit the shop in person. The website should have a clear navigation system, color schema, and be easy to use. The assignment also includes creating wireframes, flow charts, and testing the website on different screen resolutions.

COIT 20268 - Responsive Web Design (RWD)
(Term 1 – 2018)
Portfolio 1
Practical Assessment 1
(Student Name)
(University Name)

Table of Contents
Portfolio 1.1 – Chapter 1.................................................................................................................3
Site title........................................................................................................................................3
Developer.....................................................................................................................................3
Rational of the site.......................................................................................................................3
Main Features of the site..............................................................................................................3
Content of the site........................................................................................................................3
Target audience for the site..........................................................................................................3
Design consideration...................................................................................................................4
Portfolio 1.2 - Chapter 2..................................................................................................................4
Page design for the site................................................................................................................4
Links between the pages..............................................................................................................5
Portfolio 1.3 - Chapter 3..................................................................................................................5
Mission Statement.......................................................................................................................5
Flow Chart...................................................................................................................................6
Wireframes of the website...........................................................................................................6
Portfolio 1.4 - Chapter 4..................................................................................................................8
Portfolio 1.5 - Chapter 5..................................................................................................................8
Portfolio 1.6 - Chapter 6................................................................................................................11

Portfolio 1.1 – Chapter 1
Site title
Developer
Rational of the site
House of Cards, is a sole-proprietor with a proper shop front. They want a website for
their shop. The goal is to allow customers to obtain an overview of the shop layout and to find
details of items available from the shop. The website is not an online shopping site. The
website’s main goal is to provide information to customers who want to visit the shop in person.
Planning of the site
Main Features of the site
This website provides all type of cards details those are sell in the physical shop. In the
home page of the website has a floor design with a navigation feature. Mainly three type of cards
are sell in the shop. Therefore, all three type of cards with their types and details is given in this
website. The business hours of the shop are also included in this website.
Content of the site
This site is composed as a multi-page website in which the home page provides a floor
plane of the physical shop. This website mainly provides different type of information about the
shop products.
Target audience for the site
This website provides all details about their shop products. They mainly sale different
type of cards in their shop. Therefore, the main target audience will be the cards lovers or cards
collectors.

Logo
Navigation Bar
Welcome
Floor plan
Post Card Playing
Card
Greeting
Card
Design consideration
 The first thing that need to consider for design that is clear navigation system for
users.
 Color schema of the website should be clear for all users.
 Easy to use websites are more likely to garner users. Therefore, the usability of
the website should be good.
Portfolio 1.2 - Chapter 2
Page design for the site
Figure 1: design of the home page

(Source: Created by author)
Links between the pages
Figure 2: links between the pages
(Source: Created by author)
Portfolio 1.3 - Chapter 3
Mission Statement
The main aim is to allow customers to obtain an overview of the shop layout and to find
details of items available from the shop. The website is not an online shopping site. The
website’s main goal is to provide information to customers who want to visit the shop in person.
House of
Card
Home
Card
Category
Shop
Opening
Hours
Copyright

Flow Chart
Figure 3: Flow chart of the website
(Source: Created by author)
Wireframes of the website
Home page
House of Card
Home Post Card Playing Card Greeting Card Shop Opening
Hours

Figure 4: Wireframe design of the home page
(Source: Created b author)
Cards Page
Figure 5: Wireframe design of the card pages
(Source: Created by author)
Shop Opening Hours

Figure 6: Wireframe design of the shop opening time
(Source: Created by author)
Portfolio 1.4 - Chapter 4
List of the class name that are used in development of the website:
 Diagram
 Items
 Desc
 Footer
 Img
 Navigation
 Content
Portfolio 1.5 - Chapter 5
The typeface and style that are used in the body type in the website:
html,body{

width:100%;
height:100%;
margin:0;
padding:0;
background-color: #699;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New
Roman", serif;
font-size: 18px;
}
header{
width:100%;
height:160px;
margin:0;
padding:0;
text-align: center;
overflow:hidden;
}
nav{
width:100%;
height:50px;
}
nav ul{
width:100%;

height:50px;
text-align:center;
padding:0;
list-style-type:none;
}
nav li{
background-color: #09F;
padding:10px 30px;
display:inline-block;
}
nav li a{
text-decoration:none;
color:#fff;
}
nav li:hover{
background-color: #39F;
}
#content{
width:80%;

margin:auto;
background-color: #FFF;
}
#content h2{
text-align: center;
}
#content h2,p{
margin: 0;
padding: 20px 30px;
}
.diagram{
text-align: center;
background-color:#CCC;
}
Portfolio 1.6 - Chapter 6
Box model

Figure 7: Box convention model
(Source: Created by author)
Display of the website in different screen resolution