0% found this document useful (0 votes)

16 views95 pages

Web Design and Development

The document outlines the design specifications for a multipage website for a furniture store named 'SIGMA', detailing its purpose, target audience, and client requirements. It includes user requirements, wireframes, and visual style specifications to ensure a user-friendly experience and effective navigation. The website aims to showcase modern furniture designs and facilitate online purchases while catering to diverse customer demographics.

Uploaded by

Yun Hsu

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

16 views95 pages

Web Design and Development

Uploaded by

Yun Hsu

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 95

HND-41 WDD Yun Hsu Pyae Paing

1
HND-41 WDD Yun Hsu Pyae Paing

P5: A design document for a branded,

multipage website supported with
medium fidelity wireframes and a full set
of client and user requirements
As a full-stack web developer in a renowned web application development
company, this is a design document prior to the actual development of the website,
using the right concepts and standard criteria to generate a branded, multipage
website about furniture store named “SIGMA”.

Purpose Of the Website

The purpose of this “SIGMA” furniture store is to show the customers who
are interest in the furniture designs, who interesting in interior designs and
customers who wants to buy classy and modern furniture for their home and for
customers who wants to change their furniture into completely a new one. All the
designs and furniture support all various kinds of human activities. There are a lot of
reasons to purchase furniture, but the most significant one is that it serves as the
setting for our life. This makes it the most important reason. The great and the little
changes that occur in our lives cause shifts in the requirements that we have for our
furniture. We rely on furniture to make our lives more pleasant and use it for a
variety of purposes, including sitting, sleeping, and storing things. In addition to its
function as a fundamental need, clothing also serves the purpose of articulating our
sense of personal style. And as our requirements and the way we live our lives
evolve, so too must our furnishings. In this “SIGMA” website, you can see many
interior designs which are modern designs, interiors such as: Sofas, Beds, Chairs
and tables and shelves and wardrobes, designers’ products, top sale, featured
products and new products are available and can get all from this website.

2
HND-41 WDD Yun Hsu Pyae Paing

Targeted Audience
The potential customers who frequent furniture shops come from a wide
demographic range and almost all of those who own their own homes. However, the
market may be broken down into subcategories determined by the kinds of
customers that purchase furniture and the factors that influence their purchasing
decisions. People purchase new furniture for their homes for a number of reasons,
including to outfit a newly purchased residence, to upgrade from older pieces, to
alter the overall appearance of their house, to mark an important event, to provide
a location for storing personal items, or to outfit an office.

Buyers with a middle-class income—who are, on average, much younger

—tend to choose more contemporary furniture items from companies positioned in
the middle of the market. They are the customers that choose to purchase
individual parts rather than a whole package (in fact these brands also do not focus
on selling insets). These customers are also the ones who often return to the
showroom as well as the online shop in search of fresh, innovative goods, since they
are the most likely to do so.

Customers with high incomes, who are often of an older age, have a
tendency to choose traditional, high-end items that are produced by the best
manufacturers and designers in the industry. They have a propensity to place a
greater level of reliance on the architects to design and pick the goods for them,
and they have a preference for making purchases of furniture for their homes or
workplaces in complete sets.

A full set of client requirements

Since the furniture are important in our lives, we should pleasantly make a
full set of client requirements in order to build a modern furniture website. The
furniture company named “SIGMA” is a shop of the top-of-the-line, high-end
furniture, and home accessories brands from South Korea. They needed something
sophisticated that could convey the excellent quality of their products and the
reputation of their company website. In order to be able to design a unique landing
page for each brand that the client carries, we visited the company of all of the
brands that the client carries, checked out their shops and the products that they

3
HND-41 WDD Yun Hsu Pyae Paing

have available online in order to gain an understanding of the brand, and searched
for ideas that we could use.

After collecting all the designs and brands, we should meet us with the
supervisor and asked them what kind of color schemes they want to used for the
website. The logo pf the website is also required where is going to be insert on the
top of the website as an icon. The most difficult part of this project was trying to
figure out the browsing and purchasing habits of individuals who shop for furniture
online and then applying that knowledge to the challenge of developing a better
navigation flow for the new website. We got a lot of inspiration by looking out too
many other furniture stores for the research and designs for the “SIGMA” furniture
website. Like it mentioned above, the navigation flow of the website is important for
the buyers and the products are listed in its own categories on the top the website
so that the buyers can find which kind of furniture they want to buy from the
website. Search button and search area make it easy for prospective customers to
locate the specific items they are looking for in the shortest amount of time. After
having more conversations with our client who owns a furniture retailing business,
we learned that the majority of their online customers buy the furniture to complete
the whole room or the entire project, while some buy the furniture on an individual
basis. So that we can add set of furniture along with the piece by piece of furniture
in the website. There will also be top sale page which some of the items are having
discounts so that the buyers would have more interested in the website. Featured
products page where we can see the most famous and most buy items of the store.
There will also be new products page where we can see the updated products based
on the new arrival of the products to the store.

Other additional pages such as contact page where the buyers can contact
through emails and sending feedbacks form or sending workshop forms, Blog page
where the buyers can view the aim of the page, the owners and the co-workers of
the shop and sign-up page where the buyers can sign up to the website and buy the
products even from the international. There is also a register page where the new
buyers can sign-up through the page.

User requirements
4
HND-41 WDD Yun Hsu Pyae Paing

When addressing the use cases for a project, it is common practice to write
down the user requirements. Together with the client or product managers who are
familiar with the ways in which the embedded system will be used by the user, the
requirements are defined. The manner in which a user will engage with a system
and the expectations the user has for that interaction are often addressed in user
requirements. If there is a screen or a human machine interface component to the
system, a user requirement might be predicated on what the user expects to
happen when they take an action from the screen.

Every user can find the website in any types of search engines just by typing
www.sigma.com and our website will be appeared. Visitors who are only now
discovering the site ought should be allowed to sign up on their own. Users will be
distinguished from one another by using one-of-a-kind user IDs. Users can view
various types of brands and furniture though SIGMA website. Due to the divided
pages based on the furniture types, the buyers can view the products easily. It is
expected that site users will be able to make purchases of products and services
through the online shop. Users should have the ability to examine an exhaustive list
of all of the things that may be obtained via the website through voucher page.
After the purchase has been made, the user ought to get all of the things that have
been chosen. Users need to be able to check on the current status of the things
they have ordered. It is expected that the program would support a significant
number of users at the same time. Buyers can contact through contact page to
send emails about their feedbacks or their worships with the designers. The contact
page included the location of the store along with the phone numbers and emails.
Blog page where they can see the purpose of the projects along with the owner of
the shop and co-partners.

The user requirements are often easier to comprehend, more intuitive, and
provide a clearer picture of how the system will function. In spite of the fact that
user requirements may be lacking in details of what truly needs to take place inside
the system, they are nevertheless significant in the sense that they may give the
overall system functionality expectations that are desired. It needs to be possible
for users to search for things based on related qualities through search button.

Sitemap which shows all key pages and their relationship

5
HND-41 WDD Yun Hsu Pyae Paing

Wireframes for the web pages

Sigma Home page , Vintage page , Designer page

6
HND-41 WDD Yun Hsu Pyae Paing

Top Sale page, Sofa page , Bed page , Chairs & Tables

page

Shelves & Wardrobe Page, New products page, featured products

7
HND-41 WDD Yun Hsu Pyae Paing

Blog Page

8
HND-41 WDD Yun Hsu Pyae Paing

Login & Register Page

9
HND-41 WDD Yun Hsu Pyae Paing

Order Form page and voucher page

Visual style specifications

Sigma Main Page

Properties Style
Background color white
Font Family 'Raleway', sans-serif;

10
HND-41 WDD Yun Hsu Pyae Paing

Text decoration none

Margin/padding 0
Scroll behavior smooth

SIGMA main page - Header

Properties Style
Background color #E09789
Font Family 'Raleway', sans-serif;
Text decoration none
Margin/padding 0
Scroll behavior smooth
Images From Google
Images (width, height) 100px, 50px
Images transition All, 2s ease-in-out
Images Hover transform: scale (1.1);

SIGMA main page – Button

11
HND-41 WDD Yun Hsu Pyae Paing

hover #555
Position fixed
Box-sizing Border-box
Font-family Arial, Helvetica, sans-serif
View More Button Background color #E09789
View More Button margin 30px, 30px,20px, 0px

SIGMA Home Page – Heading

Properties Style
Background color #E09789
Font Family 'Raleway', sans-serif;
Text decoration none
Margin/padding 0
color #000000/black
Images (width, height) 100px, 600px
Link color black
Link Text-decoration None
Text aligns center
padding 20px
Font-style italic

SIGMA Home Page – Footer

12
HND-41 WDD Yun Hsu Pyae Paing

SIGMA Home Page – Footer (Copyright)

Properties Style
Background color #E09789
Font Family 'Raleway', sans-serif;
Text decoration none
Margin-bottom 0
Padding-top 24px
opacity 0.3
Font-size 13px
Margin-bottom 0

SIGMA Home Page – Card

Properties Style
Background color #E09789
Card-footer Background color #f09090

13
HND-41 WDD Yun Hsu Pyae Paing

Font Family 'Raleway', sans-serif;

Text decoration none
Margin 15px
color #000000/black
Images (height) 400px
Box shadow 0, 0, 0, 0.2
padding 0,16px
Text aligns Justify

SIGMA Home Page – Back to top button

Properties Style
Background color #E09789
Display none
position fixed
bottom 20px
right 20px
color #000000/black
Images (width, height) 20px
Box shadow 0, 0, 0, 0.2
padding 0,16px
Text aligns Justify

SIGMA Modern Furniture (Vintage, designers, top sale, sofas, beds, chair
& tables, Shelves and wardrobe)

Properties Style
Background color #E09789
Margin, padding 0px
Box-sizing Border-box
scroll Smooth, 2rem
Life-style none
Text-decoration none

14
HND-41 WDD Yun Hsu Pyae Paing

Font-family 'Raleway', sans-serif;

Images (width, height) 100px, 50px
Heading (font-family) cursive
Heading (font-weight) bold
Card (padding) 10px
Card (images-height) 400px
Card – footer: background color #f09090
Card – footer(link): color black
Card – footer(link): text-decoration none

SIGMA Modern Furniture (Vintage, designers, top sale, sofas, beds, chair
& tables, Shelves and wardrobe) – Button

Properties Style
Background color #E09789
Font Family 'Raleway', sans-serif;
Text decoration none
Margin/outline 0
border none
display Inline-block
Padding 8px
color white
Background-color #000
Text-align center
cursor pointer
width 100%
hover #555
Position fixed
Box-sizing Border-box
Font-family Arial, Helvetica, sans-serif
View More Button Background color #E09789
View More Button margin 30px, 30px,20px, 0px

15
HND-41 WDD Yun Hsu Pyae Paing

SIGMA Modern Furniture (Vintage, designers, top sale, sofas, beds, chair
& tables, Shelves and wardrobe) – Footer

Properties Style
Background color #E09789
Font Family 'Raleway', sans-serif;
Text decoration none
Margin-top 0, 20px
Margin-bottom 12px, 0px, 36px
color #000000/black
Images (width, height) 100px, 600px
Link color black
Link Text-decoration None
Text aligns center
padding 50px, 0
Padding bottom 20px
Font-weight bold
Font-size 16px, 14px, 20px
Link Width, height 36px, 36px
Line-height 1.6
display Inline block
Border radius 50%
Link color Inherit/#fff
Link text-decoration none
opacity 0.6, 0.75
Link hover opacity 0.9

SIGMA Modern Furniture (Vintage, designers, top sale, sofas, beds, chair
& tables, Shelves and wardrobe) – Footer (Copyright)

Properties Style
Background color #E09789
Font Family 'Raleway', sans-serif;
Text decoration none

16
HND-41 WDD Yun Hsu Pyae Paing

Margin-bottom 0
Padding-top 24px
opacity 0.3
Font-size 13px
Margin-bottom 0

SIGMA Modern Furniture (Vintage, designers, top sale, sofas, beds, chair
& tables, Shelves and wardrobe) – Back to top button

Properties Style
Background color #E09789
Display none
position fixed
bottom 20px
right 20px
color #000000/black
Images (width, height) 20px

SIGMA Contact Page

17
HND-41 WDD Yun Hsu Pyae Paing

Images (width, height) 100px, 50px

Heading (font-family) cursive
Heading (font-weight) bold
Card (padding) 10px
Card (images-height) 400px
Card – footer: background color #f09090
Card – footer(link): color black
Card – footer(link): text-decoration none

SIGMA Contact Page -container (left)

Properties Style
Background color #E09789
width 85%
Background #fff
Border-radius 6px
padding 20px, 60px, 30px, 40px
Box-shadow 0, 0, 0, 0.2
display flex
Align-items center
Justify-content Space-between
Width, height 25%, 100%
Margin-top 15px
position Relative, absolute
Font-size 30px
Margin-bottom 10px
Font-size 18px
Font-weight 500

SIGMA Contact Page -container (right)

Properties Style
Background color #E09789

18
HND-41 WDD Yun Hsu Pyae Paing

width 75%
Margin-left 75px
Margin-top 12px
Font-size 23px
Margin-bottom 10px
Width, height, margin 100%, 50px, 12px
Font-weight 600
border none
outline none
Border-radius 6px
padding O, 15px
resize none
Display Inline-block
Button background #E09789

SIGMA Contact Page – MAP

Properties Style
Background color white
width 100%
frameborder 0
scrolling no
Width, height 600&amp, 200&amp

SIGMA Contact Page – Button

Properties Style
color #fff
Font-size 18px
outline none
border none
Border-radius 6px
background #E09789

19
HND-41 WDD Yun Hsu Pyae Paing

cursor pointer
transition All 0.3s ease

SIGMA Blog Page- Body

Properties Style
Background color white
Font-family cursive
Font-weight bold
align center
Images (height) 400px

SIGMA blog Page – Button

Properties Style
color #fff
Font-size 18px
outline none
border none
Border-radius 6px
background #E09789
cursor pointer
transition All 0.3s ease

SIGMA blog Page – Back to top button

Properties Style
Background color #E09789
Display none
position fixed
bottom 20px
right 20px
color #000000/black

20
HND-41 WDD Yun Hsu Pyae Paing

Images (width, height) 20px

SIGMA blog Page – Footer

SIGMA blog Page – Footer (Copyright)

Properties Style
Background color #E09789
Font Family 'Raleway', sans-serif;

21
HND-41 WDD Yun Hsu Pyae Paing

Text decoration none

Margin-bottom 0
Padding-top 24px
opacity 0.3
Font-size 13px
Margin-bottom 0

SIGMA Login & register Page

Properties Style
Background color #E09789
Margin, padding 0px
Min-height 100vh
display flex
Align-items center
Justify-content center
Box-sizing Border-box
scroll Smooth, 2rem
Life-style none
Text-decoration none
Font-family 'Raleway', sans-serif;
Images (width, height) 100px, 50px
Heading (font-family) cursive
Heading (font-weight) bold
Card (padding) 10px
Card (images-height) 400px
Card – footer: background color #f09090
Card – footer(link): color black
Card – footer(link): text-decoration none

SIGMA Login & register Page

Properties Style

22
HND-41 WDD Yun Hsu Pyae Paing

Background color #fff

padding 30px
Width 50%
transition Margin left, 0.18s ease
Margin-left -50%
height 600px
position relative
Font-size 27px
Font-weight 600
color #E09789

SIGMA Login & register Page – Button

Properties Style
color #fff
border none
Font-size 17px
Font-weight 500
Letter-spacing 1px
Background-color #E09789
cursor pointer
transition All 0.3s ease

SIGMA Order Form

Properties Style
Background color white
Font Family 'Raleway', sans-serif;
Text decoration none
Margin/padding 0
Scroll behavior smooth

SIGMA order page - Header

23
HND-41 WDD Yun Hsu Pyae Paing

SIGMA order page – Button

24
HND-41 WDD Yun Hsu Pyae Paing

SIGMA order Page – Heading

Properties Style
Background color #E09789
Font Family cursive
Font weight bold
Text decoration color #000
Margin/padding 0
color #000000/black
Images (width, height) 100px, 600px
Link color black
Link Text-decoration None
Text aligns center
padding 20px
Font-style italic

SIGMA order Page – Footer

25
HND-41 WDD Yun Hsu Pyae Paing

Line-height 1.6
display Inline block
Border radius 50%
Link color Inherit/#fff
Link text-decoration none
opacity 0.6, 0.75
Link hover opacity 0.9

SIGMA order Page – Footer (Copyright)

Properties Style
Background color #E09789
Font Family 'Raleway', sans-serif;
Text decoration none
Margin-bottom 0
Padding-top 24px
opacity 0.3
Font-size 13px
Margin-bottom 0

SIGMA Voucher

Properties Style
Background color #E09789
Font Family "Helvetica Neue", "Helvetica",
Helvetica, Arial, sans-serif;
Margin, padding 0
Font-sizing Border-box
Images(max-width) 100%
Body (width, height) 100%, !important
Line-height 1.6
Margin-bottom 20px

26
HND-41 WDD Yun Hsu Pyae Paing

SIGMA Voucher -body

Properties Style
Background color #f6f6f6
display Block !important
Margin, 0
padding 20px

SIGMA Voucher - main

Properties Style
Background #fff
border 1px, solid #e9e9e9
Border-radius 3px
padding 0px, 0px, 20px

SIGMA Voucher - footer

Properties Style
width 100%
Clear both
color #999
padding 20px
Font-size 12px

SIGMA Voucher – Heading

Properties Style
Font-family "Helvetica Neue", Helvetica, Arial,
"Lucida Grande", sans-serif;
color #000
margin 40px, 0px, 0px
Line-height 1.2
Font-weight 400

27
HND-41 WDD Yun Hsu Pyae Paing

Margin-bottom 10px
Margin-left 5px
List-style-position inside

SIGMA voucher Page – Heading

28
HND-41 WDD Yun Hsu Pyae Paing

padding 20px
Font-style italic

SIGMA voucher Page – Footer

SIGMA voucher Page – Footer (Copyright)

Properties Style
Background color #E09789

29
HND-41 WDD Yun Hsu Pyae Paing

Font Family 'Raleway', sans-serif;

Text decoration none
Margin-bottom 0
Padding-top 24px
opacity 0.3
Font-size 13px
Margin-bottom 0

The scheme for implementing the formatting

HTML

HTML is a text format that allows for the embedding of presentation information and
other formatting information into the text itself. Every web page utilizes HTML as its
foundational format. HTML code is used by developers to create the way in which a
browser displays the components of a web page, including text, hyperlinks, and
media files. HTML is widely used to incorporate hyperlinks, which means that users
may simply travel between related pages and websites and add connections to
those pages and websites. Documents may be organized and formatted using HTML
in a manner comparable to that of Microsoft Word. The typical website is comprised
of a number of uniquely formatted HTML pages. For illustration's sake, a home
page, a about page, and a contact page would each have their own individual HTML
file.

Documents written in HTML are denoted by filenames that finish in either.html

or.htm. The HTML file is read by a web browser, which then displays the content of
the file so that users of the internet may access it. Each and every HTML page has a
number of HTML components, which are made up of a collection of tags and
attributes. HTML elements are the fundamental components that make up a web
page. The purpose of a tag is to inform the web browser of the beginning and
ending locations of an element, whereas the purpose of an attribute is to describe
the properties of an element.

Text that is interspersed with "tags," which are denoted and recognized by opening
and closing brackets, is the foundation of an HTML page. Different HTML tags are

30
HND-41 WDD Yun Hsu Pyae Paing

used for various purposes. Content is surrounded by tags, which impose various
functional and aesthetic features on that text. Tags may also be searched for. An
element is the combination of an opening tag, a closing tag, and the contents of the
tag. Additional information may be found inside an object's attributes. The opening
tag is referred to as an attribute, and extra information is stored inside the attribute
itself. Tags may be nested within one another, which means that a whole element
can be enclosed inside of another element. In point of fact, all of the HTML code
need to be included inside a "master tag" of HTML. This tag should start at the
beginning of the text and stop when the material is finished. A document is the
collective name for this full string of content. This is what is loaded into and
interpreted by your browser. The hypertext markup language, or HTML, is the
foundational web technology. It serves as the support system and framework for
any experience that is browser-based.

Cascading Style Sheets (CSS)

Text may get information about formatting via HTML tags. However, it is regarded
to be poor manners to incorporate an excessive amount of style into HTML. This is
due to the fact that it may be difficult to sift through, and a large portion of it ends
up being copied from page to document. You'll have a lot more control over how the
content of your papers appears to the human eye if you keep the style information
separate from the HTML. The cascading style sheets (also known as CSS) were
developed as a result of the separation of styles from HTML. CSS is a language that
detects specific components of HTML and applies a style to those elements. These
styles include things like the color of the font, the weight of the typeface, the space
between words, and the alignment of the words. The fact that CSS is not a
component of HTML makes it much simpler to administer. The tags included inside
the HTML code identify styles that apply to the whole content in CSS. In essence, it's
a kind of color-by-number.

A rule refers to the specification of both an element and the accompanying style
information for that element. We may save the CSS in its own file, which is known
as a stylesheet, and then link that stylesheet to our HTML. In point of fact, a single
stylesheet may provide styling for a number of different HTML files. For example,
100,000 distinct HTML files might all reference a single CSS stylesheet for

31
HND-41 WDD Yun Hsu Pyae Paing

assistance in determining link color or standard image dimensions. This is

significant because it makes it possible to make extensive modifications to the style
and appearance without necessitating a significant amount of additional effort. If we
wanted to make all of the bolded text that was styled in the example that was just
shown blue, for instance, we could update the code in our single stylesheet, and the
change would be reflected in the look of all of the HTML that was linked to it. We
could state that all of the links are blue, but we could also alter this so that all of the
links in a list are black, or so that all of the links in a certain block are oriented to
the left.

The use of cascading style sheets (CSS), which are technically optional due to the
fact that every browser comes with its own set of default styles that are applied to
various components, has nonetheless become the primary way for decorating a web
page. The vast majority of HTML documents will have a link to an accompanying
stylesheet that supplies the visual formatting, and many websites will have a single
stylesheet to which all documents will have a link.

JavaScript

Up until now, HTML and CSS have only provided us with the means to create and
style the presentation of our documents. They are not programming languages
according to the strict definition. However, they do not provide full support for
comprehensive logical programming4, which includes features such as variables,
loops, and conditional statements. They do, however, allow for many notions that
are similar to programming. To solve this problem, you may use JavaScript. Within
the confines of an HTML page, the computer language known as JavaScript is the
one that is used to carry out execution. With the help of JavaScript, we are able to
make changes to our HTML content in real time, while the user is seeing it.

JavaScript is generally used to make modifications to what is known as the

Document Object Model (DOM). The Document Object Model (DOM) is a digital
representation of a web page that contains all of its components, arranged and
nested in the same manner in which they appeared in the HTML from which the
document was loaded. To "manipulate the DOM" is to do actions such as adding to,
removing from, modifying, or generally tinkering with components of the DOM.

32
HND-41 WDD Yun Hsu Pyae Paing

CSS and JavaScript Frameworks

Because CSS and JavaScript have become so crucial to web development, whole
frameworks of pre-written code have been built around them to carry out routine
responsibilities. Some frameworks are straightforward and their only purpose is to
provide assistance, but other frameworks are extensive code libraries that come
with associated philosophies and methods for utilizing them. The most popular
frameworks are so well known that many front-end developers make use of them as
the default option for each new project they work on. In point of fact, some
programmers may have difficulty writing code without them.

Bootstrap

Twitter was the company that first developed the CSS framework known as
Bootstrap. It offers CSS that automatically attaches itself to HTML elements that
have particular properties and performs such tedious duties including displaying
them into columns that adapt to changing screen widths. Bootstrap is a front-end
programming framework that may be used for free and is open source. It can be

33
HND-41 WDD Yun Hsu Pyae Paing

used to create websites and web applications. Bootstrap is a set of syntax that is
used for the creation of templates. Its primary purpose is to facilitate the responsive
building of mobile-first websites.

The responsive web design dream is now a reality thanks to Bootstrap. It enables a
website or app to determine the size and orientation of the viewer's screen and
then automatically adjust the display to fit those parameters. The mobile-first
strategy operates on the premise that smartphones, tablets, and mobile
applications tailored to certain jobs are the main instruments used by workers to do
their jobs. The needs of such technologies in design are met by Bootstrap, which
also contains user interface (UI) components, layouts, JavaScript tools, and the
implementation framework. The program is offered in both a precompiled and a
source code format.

M4: Comparison and contrasting

the multipage website created to
the design document.
In this report there will be a comparison and contrasting between the actual
website and the design documents of the website including where is the differences
between design documents and the website.

First of all, for the SIGMA home page, you can see the design document
below. This is a full SIGMA home page where all the users and buyers will view at
first. In this design document, you can see the navigation bar where all of items is
divided based on their own kinds and a search button where the users can search
about the items or designs, they want to search on. Below the navigation bar is a
large size of photo area where the main event or a discount promotion are written
with the hottest items’ images on the back. You can see two buttons which are
“order now” where the click will bring you straight to the purchasing page and
“view more items” button where the click will bring you to other design brands.
Below that part is where the motto written by the CEO of the SIGMA furniture store.

34
HND-41 WDD Yun Hsu Pyae Paing

After that, you can see new arrival items on the home page to gain interest. You will
see new products, featured products and top sale button where you can view new
arrival products, most sell products and products that sold out frequently. Below
those buttons you will see products which are most famous items of the shops
weekly. You can see “View More” button where it will bring you straight to the shop.
Lastly on the bottom of the page is the footer where the links are going to be added
in actual website. This is just a sketch type of the website which can be see as a
foundation of the actual website.

35
HND-41 WDD Yun Hsu Pyae Paing

36
HND-41 WDD Yun Hsu Pyae Paing

This is an actual website that was created using html, CSS and framework such as
bootstrap. The pictures are described below.

In this picture, unlike the design document, you will see the logo at the left top of
the website. Beside the logo is the shop name which also isn’t in the design
document. Both of these are not included in the design documents but these can
make the website more reliable and turns it into the high-quality website due to the
appearance. The color schemes are pink, white, black and little bit of grey. Pink
makes the websites cuter and it looks so aesthetics that it will attract many young
people. On the navigation bar, you can see modern furniture, interior, blog buttons
just like in the design document. But it is slightly different because the login button
is newly added in the actual website and both modern and interior have slide-down
button where the buyers can view more items, designs and brands respectively.
Search bar and the search button remain the same as the design document.

Below that is a picture of the hottest items which I mentioned in the design
document. But in order to make a high-quality website, I have added a sliding arrow
where you can view top 3 hottest items of all time just by sliding the picture. As for
a reason, which is to attract buys with promotion sales the promotion offers are
written on the slidable pictures. Above that is a welcoming letter to welcome the
buyers. Below the promotion offers, you will see two button which is exactly the
same as in the design document.

37
HND-41 WDD Yun Hsu Pyae Paing

You can see exactly the same as a design document in this area of the website
where the CEO of the SIGMA’s motto and below the motto is the new arrival items
which is to announce the buyers to shop now.

There will be three new items which is the newest in the shop and you will see
“View More Info” button below the items which will take buyers to view the items
and buy or not. This is also drawn in the design document above.

38
HND-41 WDD Yun Hsu Pyae Paing

You can see the three buttons just like in the design documents and below them is
item of most sell of all time of the shop below. There are six kinds of items and
brands which is also sketched in the design document. You will see view more
button where you can go through the shop of various brands and designs of the
shop.

This is a footer which is just a merely sketched in the design documents and you
can see details in the actual websites. You can see about section, find us section
and a shop motto besides the links. In about page you can see contact us page link,
blog page link and login page link which are linked to the other pages of the
website. Under the find us, you can see where to search the page or a company
website on the various social platform. Besides is the company motto. At the
bottom of the page is a copyright logo which all the pictures and data in the
websites are owned by the SIGMA company. As you see on the right bottom of the
page, you can see the arrow shape which is a button and this can be bring you back
to the top of the page when you reach to the bottom. This is also not included in the
design document but this will help the buyers easy to use and gave the high-quality
appearance for the website.

Other pages which are from modern furniture and interior buttons such as vintage,
designers, top sale, beds, sofas, chairs and tables and shelves and wardrobe and

39
HND-41 WDD Yun Hsu Pyae Paing

other buttons which are new products, featured

products and top sale pages are having the same
format in the document designs and one of them will be
displayed as an example.

These are all having the same format in the design

documents. All of the pages have navigation bars,
search bar, search button and footer in each page and
all of those are explained in the main page design
documents and they all perform the same functions as I
mentioned above.

Just like a design document, website pages are also literally having the same
designs as the design document. Both sides have navigation bar with search button
beside and under the navigation bar is the title of the various kinds of furniture
designs. The products were shown in 3 columns with 15 products each page.

40
HND-41 WDD Yun Hsu Pyae Paing

The bottom of the pages also remains the same along with the “view More” button.
But the new button which is “Back” button is not in the design document but exist
in the actual design. This button is added for the buyers to feel convenient when
they want to go back to the previous pages.

Another page which is a blog page where the meaning of the shop and website is
written in. the design document of blog page will be described below. Both
navigation bar and the footer remain the same functions as the other pages. You
can see “About Us” space below the navigation bar and you will see the aim or the
motto of the website in that space. Below the space is the types of advertising
products such as which types of products we can get in the website with the card
type. Below that is the card type which is about the team which included CEO,
designer and the interior designers. There will be a back button which will take you
back to the main home page.

41
HND-41 WDD Yun Hsu Pyae Paing

This is an actual design which is added to the website.

This is where we wrote about the website aim and motto of the web page on the
blog page.

42
HND-41 WDD Yun Hsu Pyae Paing

This is where the types of products that we can get from the shop through online
just like its in the design document. The picture below is the main of the blog page
where the CEO and co-workers of the SIMGMA furniture store are shown below the
blog page. All of the designs that was drawn in the design document is same as a
actual website. The button besides the bottom of the pages is also a newly added
button which is explained above.

The next page which is the contact page where the users can view the contact
details which are included location and map, phone number to contact and email
addresses to send messages. There will be a text area to text the email and the
name and send messages to the designers of the SIGMA website. This figure

43
HND-41 WDD Yun Hsu Pyae Paing

inserted below is a design of an actual website. Unlike the other pages, the
navigation bar and the footer are not inserted. There will be two buttons at the
bottom of the page which is “Send Now” and “Back to homepage” which do their
own functions.

The figure below is the design document of the contact page. All the design
document that are sketched in the figure have the same design as the actual
designs.

44
HND-41 WDD Yun Hsu Pyae Paing

In login page, email and password are shown in the text box to type in with text
boxes and check box is included due to check and ensure the data information from
the buyer. There will be login button below the check box.

Just like a design document of login page, you can see

the similarity between the design document and the
actual design website which is shown below. Only color
schemes and the link color are changed for the
suitable color and these will help the website to the
high-quality website.

For other pages which are sign up and register pages, the design documents are
described below.

45
HND-41 WDD Yun Hsu Pyae Paing

For the registration page, there will be

a text boxes to types some data. There
will also be the check box where we can
accept all the terms and conditions. At
the bottom of the page is Sign up
button to sign up to the page. If you are
willing to go back or you have already
had the account, you can click the login
now link at the bottom of the page.

Order and Voucher pages also have a similar design as the actual website design.

46
HND-41 WDD Yun Hsu Pyae Paing

In the order page you will see navigation bar and footer just like a home page and
the design document is perfectly match with the actual design. There will be a
billing address where the buyers can add their needed information to buy the
furniture from the store. Besides the form there is a cart which has the details of the
items that the buyers want to buy. This cart part is not drawn in the design
documents and only written as the part of the page.

47
HND-41 WDD Yun Hsu Pyae Paing

The optional slides to choose the country and the city is active and the buyers can
choose their respective country. Below them will be a payment method which is
used with the check box and lastly in the billing address is the detail of the card. All
of these are active unlike wireframe from design document.

When the buyers filled the information, “confirm” and “cancel” buttons are used to
confirm or cancel the order. These buttons are also can be seen in the design
document.

Moving to the next page when the buyer click “confirm” button, the voucher will be
appeared just like the picture below.

48
HND-41 WDD Yun Hsu Pyae Paing

Both navigation bar and the footer remain the same as the other pages. And the
voucher page also the same as a sketch in the design document along with the
button of “Back to home page” at the bottom of the page.

To conclude, this is a comparison and contraction between the actual multipage

website which is based on the framework design document.

D2: Evaluating the design and

development process against the design
document and analyses any technical
challenges.
49
HND-41 WDD Yun Hsu Pyae Paing

Task 1 Process

In task 1, I have made a design document which is included the purpose of the
website and who are the targeted audience. After that a client requirement and the
user requirements are described in the design document which is require in the
website, what kinds of functions or buttons are needed to be added to the website
from the client and what functions or navigations are easy and convenient to use by
the users. The sitemap where the map shows the relationships between web pages
and shows how the buttons work when are clicked by the user and where will the
buttons will take you to through sitemap. After all the requirements are written in
the design document, the virtual specifications of the website that is used in the
website is drawn in the table with style details. Last part of the design document is
the wireframe designs which is the sketch version of the actual website.

The structural level of a website service may be designed using a method called
wireframing. Wireframes are often used to organize the information and
functionality of a website in a way that takes into consideration the requirements of
users and the paths taken by users. In the beginning stages of the development
process, wireframes are used to determine the fundamental structure of a page
prior to the addition of visual design and content. Wireframe plays the main role
because it is a foundation of the website where the website designers sketch their
ideas in the wireframe.

So, in wireframe of the SIGMA furniture website, the main

page which is home page is sketched first. This is the first
page where the buyers will view first as soon as they entered
the website. It is important to get attention from the users so
that the home page must be significant as much as have a
higher quality. As you can see in the sketch, the navigation is
included on the top of the page and the search bar and
search button is also together in the navigation bar and this
can make the users more convenient and easier to search
about the designs and products that they want. Search
button will bring the users straight to the products that they
search on and on the left side of the navigation bar is the

50
HND-41 WDD Yun Hsu Pyae Paing

products which are divided by the categories of each different products. Below the
navigation bar is a large picture section, which may be used to write about the
major event or a discount campaign, and it also displays photographs of the most
popular products on the back. You will notice that there are two buttons displayed.
The first one reads "order now," and when you click it, you will be taken directly to
the page where you can make your purchase. The second button reads "view more
items," and when you click it, you will be taken to a page that lists various other
design brands. Just below that section is where the CEO of the SIGMA furniture shop
has inscribed the business's credo. After that, you may look at the newly added
products on the main page to pique your curiosity. You will find new items,
highlighted products, and a top sale button where you can examine recently added
products, products that are selling the best, and products that are selling out
quickly. You will see a selection of products that are currently the most popular
items in the shop below those buttons. You should notice the "View More" button,
which, when clicked, will take you to the storefront directly. The footer, located at
the very bottom of the page, is the last section. This is where the links to the real
website will be inserted. This is only a draft version of the website, which may be
thought of as the basis for the real website. This is all about what is sketched for the
main home page.

For the shop pages where the categories are divided into the modern furniture
which have vintage, designers and top sale under the categories and interiors which
are sofas, beds, chairs and tables and shelves and table under the interior.
Additional pages such as new products and the featured products are also all
together have a same types of sketch design in the
wireframe. One of the example sketch figures is
shown. In this figure, you will see the same navigation
bar and the footer just like a main home page. There
will be a big title in the center of the page where the
various types of categories are written. They will be
at most 15 images of the furniture in each page. On
the bottom of the page is the “view more” button to
go through other types of furniture pages. The footer
will remain the same as the home page.

51
HND-41 WDD Yun Hsu Pyae Paing

Another page, this one a blog page, on which the purpose

of the website and store is explained in writing. The design
document for the blog page will be discussed further down
the page. The navigation bar and the footer continue to
perform the same roles as they do on the other pages.
Below the navigation bar, there is a space labeled "About
Us," and in that area, you will find the mission statement
or the slogan of the website. The many sorts of advertising
items, such as the types of products that we may get in
the online store by selecting the appropriate card type,
are listed just below the area provided for them. Following
that is the sort of card that discusses the team, which in
this case comprised the CEO, the designer, and the interior designers. There will be
a button labeled "back" that, when clicked, will take you to the homepage in its
entirety. Both the navigation bar area and the footer remain the same.

The next page is known as the "contact"

page, and it is here that users may read the
various contact information that are made
available to them. These data include a
location and map, a phone number to call,
and email addresses to which messages
can be sent. There is a place for the map to
add under the address of the shop location.
There will be a text box where users may
type in their names and emails to send messages to the people who designed the
SIGMA website. The image that you see here is a design for a genuine website that
exists. On this page, the navigation bar and the footer have not been included as
they are on the other pages. At the very bottom of the page, you will see two
buttons labeled "Send Now" and "Back to homepage." These buttons each do their
own unique job.

52
HND-41 WDD Yun Hsu Pyae Paing

On the login page, your email

address and password are shown in
separate text fields for you to key
them in. Additionally, a check box is
included on the page so that you
may verify and confirm the data
information that the buyer has
provided. The check box will be
followed by a login button shortly.
Both the navigation bar and the
footer are not sketched in this login
page.

On the page for registering, there will be a few text

areas where users may enter in their information. In
addition to this, there will be a check box that we
may use to indicate that we agree to all of the
terms and conditions. A button labeled "Sign up"
may be found at the website's bottom. Clicking this
button will allow you to join the page. You may
access your account by clicking the "login now" link
at the bottom of the page if you are either prepared
to go back or have already used the account.

This is an order page where the users can make their orders. On the order page,
you will see a navigation bar and a footer, exactly like
on a home page. The purchasers will be able to submit
their necessary information to a space designated as
the "billing address" in order to purchase the furnishings

53
HND-41 WDD Yun Hsu Pyae Paing

from the shop. The consumer is able to choose the nation that they reside in using
the active slides that provide the opportunity to select both the country and the
city. Next to them, you'll see a payment method that corresponds to the check box,
and finally, the card's information will be included in the billing address. The
"confirm" and "cancel" buttons are used to either confirm or cancel the purchase
once the information has been filled out by the customers. The design document
also includes a depiction of these buttons in their layout.

The navigation bar as well as the footer are exactly

the same as they are on the other pages. In this
sketch, there will be an thank you letter for the
consumers and the order details which include the
name, invoice and the order date. The order list will
also be shown under the name of the customer
along with the total bill. There will be a back button
which is connected back to the home page.

This is all about the process what I have done in the task 1.

Task 2 Process

This is a real website that was built using the markup languages HTML and CSS, as
well as a framework such as bootstrap. Following are some descriptions of the
photographs.

In contrast to the design document, the website's logo is shown at this photo in the
upper left-hand corner of the page. The name of the store, which is also not
included in the design document, may be found to the right of the logo. Both of
these are excluded from the design papers; yet, they have the potential to increase
the dependability of the website and transform it into a website of a higher quality
owing to its outside look. Pink, white, black, and a touch of grey make up the color
palettes, respectively. Pink makes websites more adorable, and it has such an

54
HND-41 WDD Yun Hsu Pyae Paing

appealing appearance that it will entice a large number of young people. You will
find the same buttons for contemporary furniture, interior design, and the blog on
the navigation bar as you did in the design document. But it is a little bit different
since the login button was only just included in the real website, and both the
contemporary and the interior design sections feature a slide-down button where
customers may browse additional products, designs, and brands correspondingly.
Both the search bar and the search button have remained unchanged since the
design document was created.

There is a picture of the most popular things that I stated in the design paper just
below that. However, in order to produce a website of a high standard, I have
included a sliding arrow that allows users to examine the top three most popular
products of all time by just dragging the photo. The promotion offers are written on
the slidable photographs for one purpose, and that is to entice customers to make
purchases via the use of sale promotions. On top of it comes a letter of welcome
sent to the new purchasers. You will see two buttons just below the promotion
offers, and these buttons are an identical replica of those in the design document.

You can see the exact same thing as a design document in this section of the
website where the CEO of SIGMA's slogan is shown, and below the motto is a list of
new arrival products that serves to advertise to shoppers that they may purchase
now. There will be three new things that are the most recent additions to the store,
and you will notice a "Inspect More Info" button below the items. Clicking on this

55
HND-41 WDD Yun Hsu Pyae Paing

button will send purchasers to a page where they may view the items and decide
whether or not to buy them.

You can see the three buttons that correspond to new items, highlighted products,
and top selling pages. Below those three buttons is the product that has sold the
most copies in the history of the business. There are six categories of goods and
brands that are considered to be the best-selling things on the internet. You will
notice the see more button, which will take you to a new page where you may
browse the store and see the many brands and styles it carries. One element that is
different from the wireframe that was included in the design paper is that the
photographs of the items may be clicked on, and the popped-up card provides
access to further information about the product.

56
HND-41 WDD Yun Hsu Pyae Paing

The design materials only provide a rough drawing of the footer, but the live
webpages will show all of the finer features. In addition to the links, there is also a
"about" part, a "find us" section, and a store motto. You may find a link to the
contact us page, a connection to the blog page, and a link to the login page on the
about page, all of which are connected to other sites on the website. You may
discover where to search for a page or a corporate website on the major social
platforms by looking under the "find us" heading. Besides is the catchphrase of the
firm. A copyright logo may be seen at the bottom of the page. This mark indicates
that the SIGMA corporation owns all of the material and images included within the
webpages. When you have reached the bottom of the page, you will see that there
is a button in the form of an arrow that may take you back to the top of the page. If
you click on this button, you will be sent back to the top of the page. The design
document does not contain this either, despite the fact that it would make the
website easier for customers to navigate and give it a more professional look
overall.

The designs that are used for the website shop pages are directly taken from the
design document. On each side, there is a navigation bar with a search button
located next to it. Beneath the navigation bar, you will see titles of the many types

57
HND-41 WDD Yun Hsu Pyae Paing

of furniture designs. The goods were organized into three columns, and there were
15 items shown on each page. The "see More" option may still be found at the
bottom of each page, as it has been since before. Yet, the new button, which is
referred to as the "Back" button, is not included in the design document; however, it
is included in the actual design. When the customers wish to return to the previous
pages, they may use this button, which was included so that they would feel as if
they are getting easy service.

One different thing from the design document wireframe is that the images of the
products are clickable and you can even view the product info with the popped-up
card. The example is shown below.

You can view the product info with just single one
clicks and there are two buttons which are “Close”
In order to close the info card of the product and
the “Order Now” button where you can just order if
you want and this button will take you to the order
form page.

Another page which is a blog page also have a

same navigation bar and the footer just like a home page. The aim of this page is to
show what this page is aim for and the motto from the company CEO.

58
HND-41 WDD Yun Hsu Pyae Paing

In this section, you will find a list of the many items that are available to us from the
store or via the website, precisely as they are described in the design document.
The image that can be seen below serves as the primary image for the blog page,
and it depicts the CEO and other employees of the SIMGMA furniture shop working
together below the blog page. Every single one of the designs that were sketched in
the design document is identical to an existing website. At addition to the button
that can be found at the bottom of each page, there is now a newly added button
that can be found in this location. The images in the blog page is not clickable but it
have a effect which can help to get a higher performance.

59
HND-41 WDD Yun Hsu Pyae Paing

The next page is known as the "contact" page, and it is here that users will be able
to read all of the contact information that is available to them. This information
includes a location and map, a phone number to call, and email addresses to use for
communicating with the company. There will be a text space for users to type in
their names and emails in order to convey messages to the people who are
designing the SIGMA website. The image that you see here is a design for a real
website that was added below. On this page, the navigation bar and the footer have
not been put as they have been on the other pages. At the very bottom of the page,
you will see two buttons: one will say "Send Now," and the other will say "Back to
homepage." Both of these buttons will do their respective actions when clicked
where send now button will send a message to the SIGMA furniture and back to
homepage will take you back to the home page. The map can be zoom in and zoom
out which have a active function.

In login page, the Login word is designed attractively

to attract the users. Below the login title is the text are
where the users can enter their respective email and
the password to login in the account. “Remember me”
check box can remember the passwords that the users
put in. Login button will be at the bottom of the page.
If you don’t have an account, you can click the “sign
up now” button.

60
HND-41 WDD Yun Hsu Pyae Paing

When you click the “sign up now”, you will be taken to the register page.

There will be text areas available in which you may enter

some info. There will also be a check box for us to choose so
that we can indicate that we agree to all of the terms and
conditions. You may sign up for the page by clicking the
Sign-up button at the bottom of the page. You may access
your account by clicking the "login now" option at the bottom
of the page if you are either willing to return or have
previously used the account.

When you click the “order now” button under the product info, you will directly
arrive to the order form which is described below.

61
HND-41 WDD Yun Hsu Pyae Paing

You will see that the order page also has a navigation bar and a footer, exactly like
the main page. The purchasers will be able to submit their necessary information to
a space designated as the billing address in order to purchase the furnishings from
the shop. In addition to the form, there is a cart that contains information about the
customers' desired purchases, including the amount of each item. The grand total
will be shown at the very bottom of the shopping cart.

The consumer is able to choose the nation that they reside in using the active slides
that provide the opportunity to select both the country and the city. After that,
there will be a payment method that may be selected using the checkbox, and
finally, the card's information will be included in the billing address. All of them, in
contrast to the wireframe in the design document, are active. The "confirm" and
"cancel" buttons are used to either confirm or cancel the purchase once the
information has been filled out by the customers. The design document also
includes a depiction of these buttons in their layout.

62
HND-41 WDD Yun Hsu Pyae Paing

The voucher page will be displayed when you click “confirm”. This will be appeared
in the website after you have purchased the products.

The navigation bar and the

footer are exactly the same
as they are on all of the other
pages. And the voucher page
is also the same as a drawing
in the design document,
along with a button that says "Back to home page" at the bottom of the page.

To conclude, this is all about the process what I have done in the task 2.

Comparing Task 1 and Task 2

63
HND-41 WDD Yun Hsu Pyae Paing

My design document for assignment 1 is a wireframe foundation design drawing of

the real website. I drew this while working on task 1. The actual design of the
website and the wireframe of the website are not identical in every respect. On the
report that you just looked at, there is a comparison written between tasks 1 and 2.
In this comparative report, I will be comparing the various functionalities that were
introduced on the real website and identifying which of the functions are active in
the actual website but were not included in the wireframe.

In the home page, the first difference between the design document and the actual
website is that in the navigation bar. The navigation bar is inactive in the wireframe
while the navigation bar in the actual website is active with the drop-down slider
where more categories are valid in the drop-
down slide. The example of drop-down slide
is shown. Both the modern furniture and
interior have a same drop-down function
when the both functions are not inactive in the wireframe. Not only those tow
buttons but also other buttons in the page are clickable and linked to the respective
pages. Even the logo and the SIGMA shop name is clickable in every web pages.
The search button besides the navigation bar is also typable and clickable in the
actual website. The slider on the both side of the images are active when you click
the arrow and moved to another image on the other side.

The buttons on the image

which is “order now” and
“view more info” is active and
both will bring you to the
respective pages which are
order pages and shop pages.

The product under the home

page and the shop pages has their own product info where the details of the
product is written in the popped-up card.

64
HND-41 WDD Yun Hsu Pyae Paing

There are two buttons in the product info which is “close” and “order now” which
will bring you to the order form page. The links on the footer are also clickable and
when you click them, it will bring you to the respective pages.

Another web pages are also active and clickable and the check boxes are also
clickable. Another big difference between the design document and the actual
website is that in order form, where the design document don’t have a cart beside
the order form while the cart is display in the actual website. You can also select
your optional countries and cities in the order form since it is actively can be
selected by the users.

You will be able to examine the things that you have bought,
as well as the associated reward, in the cart, and the total
price will be shown just below the cart. Next to the shopping
cart's name is the total number of items within.

Discussion

During the process of creating the wireframe design document for task 1, there are
no challenges encountered when writing the user requirements or designing the
wireframes design documents. But as I was generating a code for the website
design utilizing HTML and CSS, I ran into a few problems and made a few errors.
Watching the samples of code that are provided on websites that focus on coding
might help correct certain problems.

Without CSS, writing simple HTML is a simple task. When coding HTML, however,
you run the risk of making various mistakes, such as writing the code incorrectly.
CSS plays a crucial part in the process, acting more like makeup than HTML does,
which represents the naked face. The look of the website, for the users, would be so
uninteresting, and it would not even be appealing, if CSS were not used. Because
we need to utilize attractive fonts on the website, it is essential that when

65
HND-41 WDD Yun Hsu Pyae Paing

developing CSS, you pick a font family that has a variety of fonts from which to
choose. This is a must. In order for us to apply this style type in CSS, we need to
know the names of the fonts. As a web design developer, writing HTML and CSS is
simple for me to do, but when I tried to use bootstrap in HTML, I ran into some
problems due to the fact that I needed to include links in order to achieve a high-
quality website and to make the website responsive. Because I have never
attempted to make a website responsive before, this was the area in which I had
the most trouble when developing the web design.

The process of creating the card information using Bootstrap is also new to me, but
I've found that learning from Bootstrap makes it much easier for me to write
Bootstrap functions. Only the bootstrap component, the responsive component, and
some of the CSS component that needs to be aligned in order to get the perfect
ratio or a perfect design frame for the website were challenging for me to write. All
of the other components, including linking the web pages, making the clickable
buttons and images, and selecting color schemes, were simple for me to use and to
write in HTML and CSS.

P7: A suitable Test Plan identifying key

performance areas and use it to review

66
HND-41 WDD Yun Hsu Pyae Paing

the functionality and performance of the

website.
Test Number Test Item Actual Result Expected Pass/fail
Result
1. Display SIGMA main SIGMA main Pass
www.sigma.com page is be page will
in search displayed display when
engine when you you click the
click the link. link.
2. Display SIGMA main SIGMA main Fail
www.sigma.com page will not page will
in search be displayed display when
engine when you you click the
click the link link.
because of
the wrong
URL name.
3. Display Drop- Drop-down list Drop-down list Pass
down list of of “Modern of “Modern
“Modern Furniture” is Furniture” will
Furniture” on displayed. displayed.
the screen.
4. Display Drop- Drop-down list Drop-down list Fail
down list of of “Modern of “Modern
“Modern Furniture” is Furniture” will
Furniture” on not displayed displayed.
the screen. due to the
coding errors
and spelling
errors.
5. Display Drop- Drop-down list Drop-down list Pass

67
HND-41 WDD Yun Hsu Pyae Paing

down list of of “Interior” is of “Interior”

“Interior” on the displayed. will display.
screen.
6. Display Drop- Drop-down list Drop-down list Fail
down list of of “Interior” is of “Interior”
“Interior” not displayed will display.
On the screen. due to the
coding errors
and spelling
errors.
7. Display “Blog” Blog page is Blog page is Pass
page on the displayed and displayed and
screen. the screen check
matches whether the
expectations. screen
matches
expectations.
8. Display “Blog” Blog page is Blog page is Fail
page on the not displayed displayed and
screen. and the check
screen didn’t whether the
match screen
expectations matches
due to the expectations.
coding and
spelling errors
and not being
responsive.

9. Display “Login” Login page is Login page is Pass

page on the displayed and displayed and
screen. the screen check
matches whether the

68
HND-41 WDD Yun Hsu Pyae Paing

expectations. screen
matches
expectations.
10. Display “Login” Login page is Blog page is Fail
page on the not displayed displayed and
screen. and the check
screen didn’t whether the
match screen
expectations matches
due to the expectations.
coding and
spelling errors
and not being
responsive.

11. Display Register page Register page Pass

“Register” page is displayed is displayed
on the screen. and the and the
screen screen
matches matches
expectations. expectations.

12. Display Register page Register page Fail

“Register” page is not is displayed
on the screen. displayed and and check
the screen whether the
didn’t match screen
expectations matches
due to the expectations.
coding and
spelling errors
and not being
responsive.

69
HND-41 WDD Yun Hsu Pyae Paing

13. Display SIGMA Home page is Home page is Pass

home page and displayed and displayed and
logo on the the screen the screen
screen. matches matches
expectations. expectations.

14. Display SIGMA Home page is Home page is Fail

home page and not displayed displayed and
logo on the and the the screen
screen. screen didn’t matches
match expectations.
expectations
due to the
coding and
spelling errors
and not being
responsive.

15. Display Vintage page Vintage page Pass

“Vintage” page is displayed is displayed
on the screen. and the and the
screen screen
matches matches
expectations. expectations.

16. Display Vintage page Vintage page Fail

“Vintage” page is not is displayed
on the screen. displayed and and check
the screen whether the
didn’t match screen
expectations matches
due to the expectations.

70
HND-41 WDD Yun Hsu Pyae Paing

coding and
spelling errors
and not being
responsive.

17. Display Designer page Designer page Pass

“Designer” is displayed is displayed
page on the and the and the
screen. screen screen
matches matches
expectations. expectations.

18. Display Designer page Designer page Fail

“Designer” is not is displayed
page on the displayed and and check
screen. the screen whether the
didn’t match screen
expectations matches
due to the expectations.
coding and
spelling errors
and not being
responsive.

19. Display “Top Top sale page Top sale page Pass
Sale” page on is displayed is displayed
the screen. and the and the
screen screen
matches matches
expectations. expectations.

20. Display “Top Top Sale page Top Sale page Fail
Sale” page on is not is displayed

71
HND-41 WDD Yun Hsu Pyae Paing

the screen. displayed and and check

the screen whether the
didn’t match screen
expectations matches
due to the expectations.
coding and
spelling errors
and not being
responsive.

21. Display “Sofas” Sofa page is sofa page is Pass

page on the displayed and displayed and
screen. the screen the screen
matches matches
expectations. expectations.

22. Display “Sofas” Sofa page is Sofa page is Fail

page on the not displayed displayed and
screen. and the check
screen didn’t whether the
match screen
expectations matches
due to the expectations.
coding and
spelling errors
and not being
responsive.

23. Display “Beds” Bed page is Bed page is Pass

page on the displayed and displayed and
screen. the screen the screen
matches matches
expectations. expectations.

72
HND-41 WDD Yun Hsu Pyae Paing

24. Display “Beds” Bed page is Bed page is Fail

25. Display “Chairs Chairs & Chairs & Table Pass

& Tables” page Tables page is page is
on the screen. displayed and displayed and
the screen the screen
matches matches
expectations. expectations.

26. Display “Chairs Chairs & Chairs & Fail

& Tables” page Tables page is Tables page is
on the screen. not displayed displayed and
and the check
screen didn’t whether the
match screen
expectations matches
due to the expectations.
coding and
spelling errors
and not being
responsive.

73
HND-41 WDD Yun Hsu Pyae Paing

27. Display Shelves & Shelves & Pass

“Shelves & Wardrobe Wardrobe
Wardrobe” page page is page is
on the screen. displayed and displayed and
the screen the screen
matches matches
expectations. expectations.

28. Display Shelves & Shelves & Fail

“Shelves & Wardrobe Wardrobe
Wardrobe” page page is not page is
on the screen. displayed and displayed and
the screen check
didn’t match whether the
expectations screen
due to the matches
coding and expectations.
spelling errors
and not being
responsive.

29. Display “New New Products New Products Pass

Products” page page is page is
on the screen. displayed and displayed and
the screen the screen
matches matches
expectations. expectations.

30. Display “New New Products New Products Fail

Products” page page is not page is
on the screen. displayed and displayed and
the screen check
didn’t match whether the

74
HND-41 WDD Yun Hsu Pyae Paing

expectations screen
due to the matches
coding and expectations.
spelling errors
and not being
responsive.

31. Display Featured Featured Pass

“Featured products page products page
Products” page is displayed is displayed
on the screen. and the and the
screen screen
matches matches
expectations. expectations.

32. Display Featured Featured Fail

“Featured products page products page
Products” page is not is displayed
on the screen. displayed and and check
the screen whether the
didn’t match screen
expectations matches
due to the expectations.
coding and
spelling errors
and not being
responsive.

33. Display “Order Order form Order form Pass

form” page on page is page is
the screen. displayed and displayed and
the screen the screen
matches matches

75
HND-41 WDD Yun Hsu Pyae Paing

expectations. expectations.

34. Display “Order Order form Order form Fail

form” page on page is not page is
the screen. displayed and displayed and
the screen check
didn’t match whether the
expectations screen
due to the matches
coding and expectations.
spelling errors
and not being
responsive.

35. Display Voucher page Voucher page Pass

“Voucher” page is displayed is displayed
on the screen. and the and the
screen screen
matches matches
expectations. expectations.

36. Display Voucher page Voucher page Fail

“Voucher” page is not is displayed
on the screen. displayed and and check
the screen whether the
didn’t match screen
expectations matches
due to the expectations.
coding and
spelling errors
and not being
responsive.

76
HND-41 WDD Yun Hsu Pyae Paing

37. Display Contact Us Contact Us Pass

“Contact Us” page is page is
page on the displayed and displayed and
screen. the screen the screen
matches matches
expectations. expectations.

38. Display Contact Us Contact Us Fail

“Contact Us” page is not page is
page on the displayed and displayed and
screen. the screen check
didn’t match whether the
expectations screen
due to the matches
coding and expectations.
spelling errors
and not being
responsive.

39. Display Images on the Images on the Pass

“images” slider home page home page
on the home can be slide can be slide
page. on the screen. on the screen.
40. Display Images on the Images on the Fail
“images” slider home page home page
on the home cannot be can be slide
page. slide on the on the screen.
screen due to
the error
coding,
spelling error
and wrong
image name

77
HND-41 WDD Yun Hsu Pyae Paing

and type.
41. Display popped- Popped-up Popped-up Pass
up cards images card will be card will be
of products info display with display with
the product the product
info. info.
42. Display popped- Popped-up Popped-up Fail
up cards images card will not card will be
of products info be display display with
with the the product
product info info.
due to the
error in the
bootstrap and
wrong image
name and
type.
43. Display Linked Linked Pass
previous web previous web previous web
page which is page will be page will be
linked with back displayed on displayed on
button. the screen. the screen.
44. Display Linked Linked Fail
previous web previous web previous web
page which is page will not page will be
linked with back be displayed displayed on
button. on the screen the screen.
when the
linking code is
wrong or the
html file name
is incorrect.

78
HND-41 WDD Yun Hsu Pyae Paing

M5: The Quality Assurance (QA) process

and review how it was implemented
during the design and development
stages.
The important of having a Quality Assurance (QA) Process

The process of quality assurance is one that should be implemented by all

businesses in order to guarantee that their goods and/or services are up to the
required level of quality. The procedure eliminates the possibility of making errors,
helps deal with any issues that may crop up, and guarantees consistency. Auditors
are essential to quality assurance; these individuals may work for the organization
or be independent. They do an analysis of the different approaches and provide
direction.

1. Quality assurance saves time.

Even if it takes time at the beginning of the process to develop systems that
detect problems, it takes far more time to correct the faults if they are
allowed to occur or if they are allowed to go out of hand. The creation of
software is an excellent illustration. According to the findings of one study,
correcting a mistake in the manufacturing phase took up to 150 times longer
than correcting the same mistake earlier, while it was still in the
requirements design phase.
2. Quality assurance also saves money.
Although the upfront expense of quality assurance could give some
companies pause, the fact that it ultimately results in cost reduction should
be enough to sway their decision. It is more cost effective to pay to prevent
issues from occurring than it is to pay to correct them. The elimination of
material waste is another way that quality assurance systems help
businesses save money. As an instance, if a company manufactures toys but
does not have quality assurance procedures in place, the toys that are
produced will either not sell as well or consumers will complain about them

79
HND-41 WDD Yun Hsu Pyae Paing

and send them back. When this happens, the company has to produce more
toys to replace the ones of poor quality, which results in increased expenses
for the company.
3. Quality assurance boosts customer confidence.
Some businesses that are more renowned for their quality and consistency
tend to have a stronger relationship with their clientele. People are willing to
part with their cash for goods and services, but they will only do so if they
feel as if the value, they are receiving is commensurate with the amount they
are paying. Customers are given the impression that the companies care
about them and the priorities that are important to them when organizations
use quality assurance systems. In a great number of businesses, including
the food industry, quality assurance is also a vital component of food safety.
Customers want to have complete faith that the food they are consuming is
risk-free and won't cause them to get ill in any way.
4. Quality assurance is good for a business’ reputation.
In the world of business, having a good reputation is really necessary. As was
said in the previous paragraph, having a positive reputation inspires trust on
the part of the client. That translates into loyalty, so even if another product
or service comes up, people will prefer to continue with a firm that they
already trust even if there is a choice to go with another provider. Reputation
is crucial for all parties involved, including investors and suppliers, for
example. Stakeholders will only support and collaborate with a company if
that company has a stellar track record. The guarantee of quality is a crucial
component in the process of constructing such a stellar reputation.
5. Quality assurance leads to more long-term profit.
There are a few different methods in which quality assurance may increase
profits. The first way is to cut costs and save more money by being more
efficient with one's use of one's time and one's resources. The second
advantage of quality is that it raises a company's level of competitiveness in
the market. Customers are ready to spend more money on items that are of
higher quality, which allows many companies to increase the price of their
goods without losing sales. An increase in revenue and an increase in long-
term profit may result when a company has loyal stakeholders that promote
its brand.

80
HND-41 WDD Yun Hsu Pyae Paing

6. Quality assurance ensures products/services keep improving.

The practice of quality assurance is focused entirely on ensuring that high
standards are routinely met. A significant number of these criteria are
determined by what the consumers want. Customers will develop ideas about
how a product or service might be improved as they continue to use it and
interact with it. Businesses with a strong commitment to quality would
actively listen to customer feedback and incorporate it into ongoing efforts to
improve their products and services. This ensures that clients continue to be
satisfied and loyal to the company.
7. Quality assurance ensures consistent results.
When it comes to both services and goods, maintaining consistency is of the
utmost importance. Even if a company's products or services are not
considered to be "the greatest" on the market, the fact that it maintains
consistency with the standards it does have may have a significant impact. If
a fine dining establishment only succeeds with three quarters of the foods it
serves, it is unlikely to have as positive of a reputation as a casual eatery that
is as adept at preparing delicious meals one hundred percent of the time. In
quality assurance, we make sure that each and every product and service
that bears our company's name is consistent. No one will get a lower quality
product or a higher quality product than the other customers.
8. Quality assurance creates clear expectations for everyone.
The production of a service or product of superior quality requires the
participation of a large number of individuals. In the beginning of a quality
assurance process, clear expectations and criteria are established. When
individuals are aware of what is expected of them, there is less opportunity
for mistake and fewer opportunities for misunderstanding.
9. Quality assurance has a positive impact on employee morale.
When workers are aware of the requirements placed on them, they
experience less anxiety and are better able to concentrate on living up to the
standards that have been set. The employees' trust in their company is also
bolstered as a result of the good effects of quality assurance. The use of
quality assurance methods demonstrates to workers that "quality" is more
than simply a buzzword without any substance. There are processes in place
to provide support for the claims made by the company.

81
HND-41 WDD Yun Hsu Pyae Paing

10. Quality assurance is the foundation of a business’ work

culture.
When a corporation makes quality control and improvement a top priority, it
establishes a precedent for how the rest of the organization operates. The
pursuit of quality permeates every facet of a business, and each individual
contributes in some way to its success. Anything that seems to be impeding
the company's capacity to deliver great services to its clients is addressed. A
culture at work that is focused on reaching specific standards benefits not
just the stakeholders of the company but also the workers and the company
itself.

produce and distribute goods that are free of flaws and completely satiate the
requirements and requirements of the clients. Customers who are happy with the
things they buy are more likely to remain loyal to the brand, make more purchases,
and recommend it to their friends. Quality assurance helps companies meet
customer demands. High quality promotes client trust, making you more
competitive. It saves money, eliminates problems before they grow, and helps
create and maintain quality standards by avoiding problems. Many businesses now
need quality assurance investments. It works best when implemented early. Quality
assurance offers trust, tests the goods, and helps enterprises advertise their
products without worry.

The purpose why I need to do validation of codes

The fact of the matter is that site visitors won't give a hoot about the validity of the
code powering your website so long as the pages on your site appear as they
should. The majority of erroneous code will often be rendered correctly by browsers,
so users shouldn't expect them to worry much either. Web developers are the only
one who are likely to care or even know how to check, thus they are the only ones
who need be concerned. Even less concern will be shown by the majority of them.
Although it's possible that some may, the vast majority of people probably won't.
Validating your code is still recommended for a number of important reasons.

 Validation can be used as a debugging tool: Validators point up exactly

where in your code mistakes have been made. If the content on your website
is not appearing as it should, running it through a validator will help you

82
HND-41 WDD Yun Hsu Pyae Paing

figure out why. Additionally, erroneous code that displays well in one
document may result in show-stopping problems in another page due to the
code that is around it.
 Validation can help future proof your work: Web browsers are
developed with standards in mind. Pages that are written to conform to web
standards today will operate with browsers that are developed tomorrow. The
"hacks" that were employed to get something to operate properly may not.
 Validation can be a great learning tool: Correcting validation issues is an
excellent way to improve your knowledge on how to write code for web
pages. You will be able to move over the learning curve more quickly as a
result of this. I am speaking from personal experience.
 Validation makes maintenance easier: The development community has
a general consensus that standards should be used. If the code on your
website is correct, it should not be difficult for another web developer to keep
the site updated. On the other hand, untangling hackers is never a pleasant
experience.
 Validation is a sign of professionalism: A hallmark of professionalism is
ensuring that even the smallest of things are attended to, even if no one else
notices or cares about them.
Because it complies with the standards, code that is valid is easier to obtain.
It should function properly across a greater number of browsers and devices,
making it both more useable and more readily available. Sometimes, when
you run a page through a validator, the list of mistakes appears so long it will
take days to resolve them. A few basic blunders lead to many more. For
example, neglecting to close a tag early in your document might cause
dozens or hundreds of errors. When you fix one or two mistakes and
revalidate the page, many more will be gone.
Validation has significant importance due to the fact that it makes quality
assurance possible while also reducing expenses. Validation ensures that a
product will be suitable for its intended usage. During the process of
developing a product, it is reasonable to anticipate that Validation, as well as
Safety and Effectiveness, will be included into the process and given further
attention.
 Validation in HTML

83
HND-41 WDD Yun Hsu Pyae Paing

Markup elements are inspected for syntax mistakes in HTML validators to

ensure that the markup language is error-free and ready for human
consumption. An HTML user may use a validator to determine whether input
sources of data are included in their HTML input. Validators are available for a
variety of programming languages. The dependability of an inline validator is
one of its key advantages, and it is one of the easiest ways to validate the
conformance of a website's content to industry standards. Validation may be
performed on the code, as part of the overall inspection process. The
document types declaration, more often known as DTD, will provide an
explanation of the HTML standard (the document type declaration). If the
websites your visitors visit show validation in their browsers, they will have a
lower risk of encountering problems in comparison to users of websites that
are not verified. Validation is compatible with a broad range of dynamic
formats and scripts, as well as active content, multimedia, and dynamic-
action sites.

 Validation in CSS
Validating CSS is done so that a piece of code may be compared to the
official principles and standards that have been established by the Wide Web
Consortium (W3C). Validators for Cascading Style Sheets (CSS) examine the
style sheets to determine whether or not they meet the criteria established
by the W3 Consortium. Because each browser implements a variety of CSS
features differently, validators may assist you in understanding how to
choose which browsers support your CSS features. There are a lot of
alternatives available for this kind of assistance. An example page that does
not include erroneous CSS is available for viewing. The HTML source code for
the page may be found at this location. It is recommended that you save the
incorrect web page to your local storage. A test will be carried out on this
code in the event that it is discovered by the W3C CSS Validator. After
making any necessary changes to address any issues raised by the Validator,
save the web page, and run the test once again until the web page satisfies
all of the criteria for passing.
 Validation in Coding

84
HND-41 WDD Yun Hsu Pyae Paing

Validation makes it simpler to maintain tools, and developing communities

often embrace standard-setting procedures. Even if the code cannot be used,
it shouldn't make a difference if a developer utilizes it to manage your
website. The development community has verified a large number of
standards, which makes it simpler to keep those standards up to date. In the
case that the code on your website is legitimate, another web developer will
be pleased to maintain it in the same capacity as you. The process of un-
tagging hackers is also not enjoyable. In order to establish whether or not a
piece of code is valid, the World Wide Web Consortium (W3C) has developed
a set of standards and guidelines that must be followed. Code validation is
the process by which websites are checked to ensure that they are operating
in accordance with these guidelines. Validation methods are used in order to
produce clean code.

The result of your review from your peers (at least 3 peers)
From Thiha Htoo Set
To begin, she designed the color scheme of her website to be incredibly
adorable and a fantastic blend of colors. Additionally, there is a lot of content
in the navigation bar, and the logo looks good too. However, in order to
better see the phrase, she ought to choose a different color for the slider. She
also constructed her website to be responsive, which is a fantastic feature to
have. This brings us to our next point. The color scheme of the pictures on
the cards has also been coordinated with that of the website. Additionally,
she created the pop-cards that allow for better visibility of the merchandise.
In addition, each of the pages has excellent communication and an accurate
representation of the world. There is an excessive amount of information
requested from clients on the order form, which is not really acceptable.
When clients go to the website, she should be required to write the copy
correct phrase in a different color for the bottom of the page so that it is
easily seen.
From Min Oak Soe Latt
The color palettes of the websites are cozy and attractive, but the letters on
the images are difficult to read, suggesting that a lighter shade should be
used in place of black. The navigation bar is in working order. He said that he

85
HND-41 WDD Yun Hsu Pyae Paing

likes how the item information display with the popped-up card because it is
handy for the consumers, and he also likes how the customers may click right
away if they want to purchase anything since it is simple and convenient. In
the purchase form, he advised that I use a white backdrop to achieve a high-
quality website, and he praised the manner in which I inquired about an
excessive amount of information about the cash list. Pages on the website
have an inviting while yet having a professional appearance. It is an excellent
idea to include the contact us page in the footer in the manner that I have
done so that people will find it simple to click the button. The font that is used
on the contact page is an excellent choice; nevertheless, it would be
preferable if the main page also utilized same font. The website for logging in
seems to be well organized and tidy, but the page for registering appears to
be quite simple, and it would be helpful to include some buttons that allow
easy access to the homepage.
From
The purpose of having your website peer-reviewed
It is a procedure in which a design project (or component of) is examined and
assessed by a person or team that is not directly engaged in the project but
is properly prepared to offer comments that will either support a design
solution or provide a path to a better alternative. People often say things like
"no man is an island" or "two heads are better than one." These statements
mean roughly the same thing. These are especially applicable in the wide-
ranging and rapidly developing area of electronics. Very few people can make
the claim that they are experts in everything. In our capacity as a design
partner, you are able to depend on the expertise and rigor of our design
process to provide the most effective response to the design brief you have
provided.
Review inherently incorporates the subjectivity of humans, which may add
another layer of complexity to the issue that we are currently attempting to
resolve. In order to get feedback that is relevant, it is essential for the
reviewer and the person requesting the review to have the same level of
knowledge and comprehension.
The main purposes of having a website peer-reviewed is to provide a backup
for the designer's choices and duties by enlisting another expert in the

86
HND-41 WDD Yun Hsu Pyae Paing

process; to have a view that is objective on design decisions and the results
of those decisions. In order to ensure the safety of a centralized,
interconnected Design System that is applicable to a large number of
products and to improve our internal cooperation and knowledge-sharing,
and, therefore, to raise the bar for the quality of the designs we produce as a
whole.

D3: Evaluating the results of the Test

Plan and include a review of the
overall success of the multipage
website
The purpose of why I need implement test plan
The strategy for the testing work that has to be done is referred to as
the "test plan." In reality, the majority of our test plans do not touch that
level of detail at all, thus this is neither a test design specification, a
collection of test cases, or a set of test methods. The term "test plan" is
understood in a variety of ways by several individuals.
The test plan maintains a record of the feasible examinations that will
be carried out on the system when the coding has been completed. The
document known as the test plan is something that grows during the course
of the development of the project. Check for errors in areas of software
development that are prone to them. In contrast to the final test plan, which
is more concrete in nature, the first test plan is more conceptual. Without
delving too deeply into the specifics of test cases, the preliminary test plan
outlines some broad concepts for testing the system. The system's
requirements provide the foundation for the most essential test cases. When
the system is still in the planning phase, the preliminary testing has some
room for improvement. When we get to the phase of thorough design or
coding, we start to see actual test cases take shape. After the development is
complete, the test points are all mapped out, and the program is put through

87
HND-41 WDD Yun Hsu Pyae Paing

its complete set of quality assurance tests. The test plan is responsible for
ensuring that all of the functional and design requirements are carried out in
the manner described in the documentation in order to offer a method for
doing unit and system tests.
A test plan serves as a kind of road map for the testing process,
outlining each step of the testing procedure as well as the information
required to carry out each step. It facilitates communication between the
members of the team and the stakeholders of the project, ensuring that
everyone is on the same page at all times. Because the plan and timeline
have been determined in advance of the testing, the implementation goes off
without a hitch, and the problems and risks are properly handled. It paints a
very clear image of the amount of work that has to be done, the resources
that are required the number of features that need to be tested along with
dates, etc. In addition to this, it is helpful in ranking the characteristics in
order of importance and planning the execution sequence appropriately. It is
helpful in gaining a better understanding of the test coverage, scope of
testing, hazards, and methods to mitigate them and to determine the
procedure for documenting the unit and system testing that is being done
and to determine the testing procedures for the system and the individual
units.

Evaluating the test plan result and description the test which failed and
how you solve the errors

Based on the test plan that have described above, the evaluating of the test plan
result and the description if the test which failed and how I solve the errors is
written in this report. A Test Plan is a comprehensive document that outlines the
testing strategy, goals, timetable, estimate, deliverables, and resources necessary
to test a software product. This document is known as a "Test Plan."

You can see the fundamental stage that involves verifying whether or not the link
works in the search engine and determining whether or not the URL type html link is
valid or wrong in this SIGMA furniture test plan. If the link is active, clicking on it will
take you straight to the homepage of the website, which will then load up on the
screen in front of you. On the other hand, there is always the possibility of a

88
HND-41 WDD Yun Hsu Pyae Paing

mistake taking place, such as the hyperlink leading to the website not working
properly or letters being omitted from the connection. Error code 404 may be
generated as a result of these kind of mistakes. In order to repair these
inaccuracies, we need to make sure that the search engine's link has been updated
to reflect the right information.

Therefore, after the SIGMA link verification has been completed, the following step
is to verify the navigation bars. There are several sections in the navigation bar that
correspond to the different products that the store carries. The categories of
contemporary furniture and interior design both have a slide-down mechanism that
displays further category options. This button, which slides down, makes the
website more user-friendly and useful for the people that visit it. When the users
click the slide-down buttons, the things that have been classified will appear on the
screen. If there is an error in the code for the slide-down feature, the items will not
be shown on the screen, and you will not be able to click on them. In order to avoid
this, the code for the slide-down menu must be created in the appropriate manner,
and the code itself must be checked several times in order to locate and repair any
problems that may have been introduced into the website. The navigation bar has a
number of buttons, each of which may be clicked to be taken to the page it
corresponds to on the website. For instance, if you click the vintage button, the
designer button, the top sale button, the sofas button, the beds button, the chairs &
tables button, and the shelves & wardrobe button, it will bring you to the respective
web pages that are linked to those buttons, and when you click them, each page
will be displayed on the screen. Problems in the code, such as connecting the
incorrect HTML file, might send you to other sites. Additionally, if you do not have
the (.html) file type when creating the coding, it can produce 404 errors when you
click on the links. In order to stop these problems from occurring, we need to verify
our codes several times and make certain that there is a (.html) file type present
when we are creating the codes.

When you click on the photographs, another function that will take place is that the
"Order Now" button will appear beside the card that has been brought up. You will
need to utilize the methods provided by bootstrap in order to get the card to come
up. When you click on the product, the information about it will appear on the
screen. You may place an order for items by clicking the "order now" button, which

89
HND-41 WDD Yun Hsu Pyae Paing

will take you to the order form once the product information has been shown. In the
event that there are issues, you will not be able to click on the photographs, and
neither the product information nor a button to place an order will be shown. In
order to avoid misalignment in the web pages, we have to make certain that the
code for the bootstrap will be placed in the appropriate location. When adding
photos to the website, we need to ensure that we are using the appropriate image
files (either jpg or png). If the linked web page is incorrect or the file types were
entered incorrectly when the codes were being written, you will not be able to click
on the "buy now" button. Due to the fact that it is featured on the homepage of the
website, the picture slider that is located at the top of the page also plays a
significant function. The arrows that move the slider that are located on both sides
of the photographs may be clicked on, and when you do so, the slideshow will go to
the next slide. In the event that the code pertaining to the slider is entered
incorrectly, the slider will not function properly and will be inactive in the given
picture. On each page of the website, you'll find a number of buttons labeled "back"
that, when clicked, will take you to the page before the current one or take you
straight to the homepage. This back button is really necessary in order to make the
user experience more comfortable and straightforward. Users will be unable to
figure out how to return to the homepage of the website if these buttons are not
present on the pages of the website. Therefore, we need to make sure that the
return buttons are there on each and every page, and we need to connect the
pages extremely carefully so that we don't accidentally link them to the wrong sites.

In conclusion, the purpose of this report is to evaluate the results of the test plan.
Also included in this report is a description of any tests that were unsuccessful, as
well as an explanation of how the faults were fixed.

Explanation if I manage to meet the requirements

I have built the coding for the website to ensure that it satisfies all of the criteria
since we have the needs of both the customers and the users on the reports that
were just mentioned. I was successful in monitoring many different furniture
websites in order to increase the number of possibilities available to fulfill the
specifications. It wasn't hard to jump on board with the trend as long as we had a
solid understanding of the people we were trying to reach. Before beginning to write

90
HND-41 WDD Yun Hsu Pyae Paing

the code for the website, I first drew its wireframe so that the process of actually
creating the website would be simpler.

Any areas of success and providing justified recommendations for areas

that require improvement.

To be honest, that depends on your definition of "great." It is difficult to

provide a definitive response to this issue given that each website caters to a
unique demographic, has a unique product or service, and was developed by a
distinct individual. Because of this, developing a fantastic website is just as much an
art as it is a science. Despite this, there are a few fundamental design concepts that
might be of assistance to you as you construct a website from the ground up. These
guiding concepts are applicable recommendations that are seeking to find out how
to develop a website for a personal or professional endeavor.

Some recommendations that are require for the SIGMA furniture website
improvement is described below.

1. Be consistent
Pages that have been online for a long might provide a significant challenge
in maintaining consistency. If some of the pages on your website date back
many years, you should revamp such pages. Every page on your website,
from the product pages to the pages containing your contact information,
should strive to achieve the same appealing look.
When it comes to website layout design, having inconsistencies might cause
two concerns. The first issue is that having pages that are visually distinct
from one another gives the impression that you haven't bothered to update
your older content, which makes your website seem unprofessional and
uncaring. The second problem is that if your pages seem different across the
various sections of your website, your visitors will get confused about where
they are on your website, and if they are confused, they will leave.

2. Make Sure It Has a Call to Action

The majority of individuals are aware of the significance of "Calls to Action,"
often known as CTAs. The issue is that far too many of them just don't

91
HND-41 WDD Yun Hsu Pyae Paing

function for some reason. This is due to the fact that an uninteresting button
that just states "click here!" will not, on its own, induce user activity.

When considering your call to actions (CTAs), you need to keep two important
things in mind. The first thing that has to happen is that they should
emphasize the value of what it is that you are providing. Encourage visitors
to your website to "sign up for the latest news" or "click here to receive 10%
off" rather to just stating "click here," since this will give them more incentive
to do so.
The second piece of advice is to ensure that your calls to action are
appealing. Use buttons instead of inline hyperlinks, and make sure the
buttons have a nice appearance.

3. Add social proof

As a result of reading these evaluations, we have more faith that the product
will do the functions that it advertises it will perform as well as the functions
that we need it to perform, which in turn compels us to buy it. Your website
and the product or service you provide both experience the same effect.
According to statistics, the likelihood of a prospect purchasing your goods
increases by 58% if they are shown compelling testimonials provided by
genuine individuals.

4. Adding Videos
Videos are fantastic. Create a video that explains how to do something,
shows your product in action, or features you greeting customers. Put it up on
YouTube or any other video hosting service. After that, you need to
incorporate the code in order to post it on your website.

5. Improve Page Speed

If the rest of your website takes too long to load, visitors may never go
beyond the front page. Additionally, pages that load very slowly might even
have a detrimental impact on a website's ranking in search engines. Please
put your speed to the test here. The most exciting element is that you will be
provided with recommendations on how to increase the pace.

92
HND-41 WDD Yun Hsu Pyae Paing

6. Check 404s
Verifying that each and every link on your website is operational is an
important step in achieving uniformity across all of your pages. This occurs
for a few different reasons, if you must know. The first issue is that clients get
frustrated when they see a 404 error, and it gives the impression that you do
not place sufficient importance on your website. Your website will run more
slowly and will have a negative impact on its search ranking if it has a large
number of broken links. The finest software for creating websites now does
automated checks for broken links, allowing users to easily locate and repair
any issues that may arise.

7. Include sharing buttons

There is a good chance that you will turn away a significant portion of
potential customers if you do not provide provisions on your website for site
users to provide feedback and discuss their experiences. Because this traffic
is produced from the people who are already visiting your website, sharing
content from it on social media platforms is one of the most efficient methods
to market your website.

8. Improve your SEO

You could have the most amazing website in the history of the internet, but if
no one can discover it, then it is completely useless. If you completely
disregard search engine optimization (SEO), it may have a significant impact
(and one that is unfavorable) on the number of visitors that go to your
website. SEO is a vast and complicated area. There are a few simple pointers
you may follow to improve your SEO. You need to find out what keywords
your clients are typing into search engines, and then you need to create
content that immediately connects with these terms. Don't be afraid to try
out different things and find out what works the best for your website's
ranking. Sometimes, simply altering one word in a headline may have a
major influence on where your page is placed. In addition to this, you need to

93
HND-41 WDD Yun Hsu Pyae Paing

make sure that you are providing a variety of articles and other forms of
content. Generating videos, blog entries, podcasts, and electronic books all
have their own purposes; however, producing all of these things at the same
time allows you to reach the broadest audience possible. After that, there is a
series of "more exotic" tactics that you may use to improve the rating of your
website. Among them include constructing backlinks on significant websites
in your industry and soliciting the services of guest writers to provide content
for your website.

9. Security
When it comes to developing a successful website, ensuring that the site is
protected against intrusion is an aspect that is often neglected. This is of
utmost importance when you are updating your website, since making
significant changes might leave your website vulnerable to huge security
problems. That may be accomplished in a number of important ways. You
need to be aware of the risks associated with leaving unused plugins active
on your website and turn off any plugins that you are not currently using. You
should also make certain that you are using robust passwords throughout the
whole of your website, and you should make use of a password manager
wherever possible to develop and maintain lengthy and complicated
passwords for everything you do online. If your website is used and updated
by a lot of different staff members, you need to take additional precautions to
guarantee that the security of your website is not being compromised by
them. Encrypting your internet connection requires the use of a virtual
private network (VPN) and a firewall protection service. The most reliable
virtual private networks (VPNs) make it very difficult, if not impossible, for
cybercriminals to steal your passwords and any other critical information.
This is of utmost significance if you manage your website from a location
other than where it is hosted, since doing so exposes your process to
potential risks.

10. Be original
When you look at the websites that are doing well in your industry, it might
be tempting to just duplicate the material that they have on their pages. That

94
HND-41 WDD Yun Hsu Pyae Paing

is a terrible suggestion to make. Customers will not only be able to recognize

the plagiarized content, but they will also be less inclined to return to your
website since they can acquire the information they want from someplace
else. Be absolutely certain that each and every piece of content that you
publish is unique, and whenever it's feasible, provide your clients with
something extra that none of your rivals can.

To conclude, this is all about the website design and development reports
about the SIGMA furniture website.

References
https://bizfluent.com/info-7765915-importance-quality-
assurance.html
https://theimportantsite.com/10-reasons-why-quality-assurance-is-
important/#:~:text=Quality%20assurance%20creates%20clear
%20expectations,they're%20expected%20to%20do.
https://vanseodesign.com/web-design/validating-code/#:~:text=Why
%20You%20Should%20Validate%20Your,your%20site%20is
%20100%25%20valid.
https://thesassway.com/what-is-the-purpose-of-validation-in-html-
and-css/
https://www.constantcontact.com/blog/tips-to-improve-your-website/

Report
No ratings yet
Report
90 pages
Home Style
No ratings yet
Home Style
20 pages
Sunglow
No ratings yet
Sunglow
7 pages
Jefry Toy Ux Casestudy
No ratings yet
Jefry Toy Ux Casestudy
24 pages
Designing and Developing of E Commerce W
No ratings yet
Designing and Developing of E Commerce W
11 pages
Assignment 2 Qualification
No ratings yet
Assignment 2 Qualification
30 pages
Website
No ratings yet
Website
41 pages
Report Sem 5
50% (2)
Report Sem 5
28 pages
Service Blueprint
No ratings yet
Service Blueprint
7 pages
Urban Ladder's VR Shopping Innovation
No ratings yet
Urban Ladder's VR Shopping Innovation
9 pages
"Online Shopping Java Project": Visit
No ratings yet
"Online Shopping Java Project": Visit
47 pages
Presidency University: Project Report Paper
No ratings yet
Presidency University: Project Report Paper
14 pages
Body
No ratings yet
Body
6 pages
IM23ICT
No ratings yet
IM23ICT
18 pages
Parthi Doc Final
No ratings yet
Parthi Doc Final
42 pages
E-Commerce Usability Insights
No ratings yet
E-Commerce Usability Insights
7 pages
Pmig Project Report
No ratings yet
Pmig Project Report
5 pages
Implications of Buyer Decision Theory For Design of Ecommerce Websites
No ratings yet
Implications of Buyer Decision Theory For Design of Ecommerce Websites
30 pages
Web Project Worksheet - BrandAce
No ratings yet
Web Project Worksheet - BrandAce
9 pages
DharmendraDiwakar SIP A60205221021
No ratings yet
DharmendraDiwakar SIP A60205221021
18 pages
Online Shopping
100% (1)
Online Shopping
39 pages
Synopsis Ruchi
No ratings yet
Synopsis Ruchi
11 pages
Documentation SEM 5.
No ratings yet
Documentation SEM 5.
25 pages
E-Commerce Website Design Guide
No ratings yet
E-Commerce Website Design Guide
21 pages
Synopsis Laptop World
No ratings yet
Synopsis Laptop World
17 pages
G-12 ICT Assignment: Websites & Image Processing
No ratings yet
G-12 ICT Assignment: Websites & Image Processing
12 pages
Hardik Final
No ratings yet
Hardik Final
62 pages
431-Article Text-2550-2-10-20210115
No ratings yet
431-Article Text-2550-2-10-20210115
6 pages
Assignment E-Commerce
No ratings yet
Assignment E-Commerce
19 pages
HTML Shopping Site Project Report
No ratings yet
HTML Shopping Site Project Report
22 pages
Cosmos College of Management and Technology
No ratings yet
Cosmos College of Management and Technology
14 pages
Sterlings Designs Target Audience
No ratings yet
Sterlings Designs Target Audience
8 pages
The Internet and The Marketing Mix
No ratings yet
The Internet and The Marketing Mix
42 pages
5654-Article Text-17781-1-10-20210922
No ratings yet
5654-Article Text-17781-1-10-20210922
7 pages
Web Development Project Worksheet
No ratings yet
Web Development Project Worksheet
10 pages
Ecommerce Website
No ratings yet
Ecommerce Website
10 pages
Shop Hive
No ratings yet
Shop Hive
20 pages
Usage Centered Design - 408204: Project: AUT DIY Furniture Website
No ratings yet
Usage Centered Design - 408204: Project: AUT DIY Furniture Website
41 pages
IJCRTO020017
No ratings yet
IJCRTO020017
4 pages
Agile Testing for E-commerce Teams
No ratings yet
Agile Testing for E-commerce Teams
138 pages
Lec 18a
No ratings yet
Lec 18a
25 pages
ABA Report of UIUX - FULL - FINAL
No ratings yet
ABA Report of UIUX - FULL - FINAL
9 pages
E-Commerce Website Design Guide
No ratings yet
E-Commerce Website Design Guide
9 pages
Online Shopping
No ratings yet
Online Shopping
67 pages
Online Shopping
60% (5)
Online Shopping
67 pages
MIS405 Project
No ratings yet
MIS405 Project
22 pages
Electronic Shopping: Gerald L. Lohse
No ratings yet
Electronic Shopping: Gerald L. Lohse
8 pages
Presidency University: Project Proposal Paper
No ratings yet
Presidency University: Project Proposal Paper
6 pages
Repeat Vintage - Case Study
No ratings yet
Repeat Vintage - Case Study
20 pages
Workbok 2
No ratings yet
Workbok 2
38 pages
Online Brand Strategies 2014 PDF
No ratings yet
Online Brand Strategies 2014 PDF
41 pages
BOF - Ecomm
No ratings yet
BOF - Ecomm
19 pages
Figma Web Application Design Challenge
No ratings yet
Figma Web Application Design Challenge
6 pages
New Media Software Marketing Plan 2012
No ratings yet
New Media Software Marketing Plan 2012
13 pages
An Overview of Developing A Website
100% (12)
An Overview of Developing A Website
32 pages
E Commerce PDF
No ratings yet
E Commerce PDF
17 pages
Perfume de
No ratings yet
Perfume de
18 pages
Online Shopping
No ratings yet
Online Shopping
18 pages
File Sharing Web App
No ratings yet
File Sharing Web App
40 pages
DHTML Basics for Web Developers
No ratings yet
DHTML Basics for Web Developers
4 pages
Bus Buddy Mini Project Report
No ratings yet
Bus Buddy Mini Project Report
57 pages
Demystifying JavaScript Your Guide To Web Development's Essential Language
No ratings yet
Demystifying JavaScript Your Guide To Web Development's Essential Language
5 pages
Codedamn Com Learning Paths Fullstack
100% (1)
Codedamn Com Learning Paths Fullstack
7 pages
Wt-Unit-3 (Javascript)
No ratings yet
Wt-Unit-3 (Javascript)
28 pages
Distributed Order Management - Retail & Commerce
No ratings yet
Distributed Order Management - Retail & Commerce
12 pages
GTmetrix Report WWW - Girlsaskguys.com 20180514T234603 WVC1wC2M Full
No ratings yet
GTmetrix Report WWW - Girlsaskguys.com 20180514T234603 WVC1wC2M Full
85 pages
JS Documentation
No ratings yet
JS Documentation
5 pages
TCS Interview Preparation
No ratings yet
TCS Interview Preparation
49 pages
DOM Presentation
No ratings yet
DOM Presentation
23 pages
N Web PDF
No ratings yet
N Web PDF
159 pages
Js Cheatsheet PDF
90% (10)
Js Cheatsheet PDF
13 pages
Comparative Analysis of Different Web Development Frameworks (React, Angular, Vue - JS)
No ratings yet
Comparative Analysis of Different Web Development Frameworks (React, Angular, Vue - JS)
65 pages
SFDC Interview Questions - Differences
No ratings yet
SFDC Interview Questions - Differences
13 pages
JavaScript DOM Exercises
No ratings yet
JavaScript DOM Exercises
21 pages
TCS Aspire
No ratings yet
TCS Aspire
8 pages
Yash Chandanshive Resume New Docs
No ratings yet
Yash Chandanshive Resume New Docs
2 pages
HTML DOM Tutorial
100% (1)
HTML DOM Tutorial
11 pages
Broswer - Documents Events and Interfaces
No ratings yet
Broswer - Documents Events and Interfaces
270 pages
Css Kalyani
No ratings yet
Css Kalyani
19 pages
Degree Internship Log Book - Mean Stack - 2025
No ratings yet
Degree Internship Log Book - Mean Stack - 2025
91 pages
30-Days-JavaScript-Challenge-My-Learning-Journey Landscape
No ratings yet
30-Days-JavaScript-Challenge-My-Learning-Journey Landscape
10 pages
IT - B - 54 - Priyanshu - Industry Report - 2
No ratings yet
IT - B - 54 - Priyanshu - Industry Report - 2
54 pages
Technical Report
No ratings yet
Technical Report
32 pages
JavaScript Tips for Web Developers
No ratings yet
JavaScript Tips for Web Developers
142 pages
XML Android Complete Notes
No ratings yet
XML Android Complete Notes
10 pages
Introduction To DHTML
0% (1)
Introduction To DHTML
76 pages
Scripting Language Lab Report
No ratings yet
Scripting Language Lab Report
25 pages
6136
No ratings yet
6136
4 pages

Web Design and Development

Uploaded by

Web Design and Development

Uploaded by

HND-41 WDD Yun Hsu Pyae Paing

P5: A design document for a branded,

Purpose Of the Website

Buyers with a middle-class income—who are, on average, much younger

A full set of client requirements

Sitemap which shows all key pages and their relationship

Wireframes for the web pages

Sigma Home page , Vintage page , Designer page

Shelves & Wardrobe Page, New products page, featured products

Login & Register Page

Order Form page and voucher page

Visual style specifications

Text decoration none

SIGMA main page - Header

SIGMA main page – Button

SIGMA Home Page – Heading

SIGMA Home Page – Footer

Link Text-decoration None

SIGMA Home Page – Footer (Copyright)

SIGMA Home Page – Card

Font Family 'Raleway', sans-serif;

SIGMA Home Page – Back to top button

Font-family 'Raleway', sans-serif;

SIGMA Contact Page

Images (width, height) 100px, 50px

SIGMA Contact Page -container (left)

SIGMA Contact Page -container (right)

SIGMA Contact Page – MAP

SIGMA Contact Page – Button

SIGMA Blog Page- Body

SIGMA blog Page – Button

SIGMA blog Page – Back to top button

Images (width, height) 20px

SIGMA blog Page – Footer

SIGMA blog Page – Footer (Copyright)

Text decoration none

SIGMA Login & register Page

SIGMA Login & register Page

Background color #fff

SIGMA Login & register Page – Button

SIGMA Order Form

SIGMA order page - Header

SIGMA order page – Button

SIGMA order Page – Heading

SIGMA order Page – Footer

SIGMA order Page – Footer (Copyright)

SIGMA Voucher -body

SIGMA Voucher - main

SIGMA Voucher - footer

SIGMA Voucher – Heading

SIGMA Voucher – Links & Button

SIGMA voucher Page – Heading

SIGMA voucher Page – Footer

SIGMA voucher Page – Footer (Copyright)

Font Family 'Raleway', sans-serif;

The scheme for implementing the formatting

Documents written in HTML are denoted by filenames that finish in either.html

Cascading Style Sheets (CSS)

assistance in determining link color or standard image dimensions. This is

JavaScript is generally used to make modifications to what is known as the

CSS and JavaScript Frameworks

M4: Comparison and contrasting

other buttons which are new products, featured

These are all having the same format in the design

This is an actual design which is added to the website.

Just like a design document of login page, you can see

For the registration page, there will be

To conclude, this is a comparison and contraction between the actual multipage

D2: Evaluating the design and

So, in wireframe of the SIGMA furniture website, the main

Another page, this one a blog page, on which the purpose

The next page is known as the "contact"

On the login page, your email

On the page for registering, there will be a few text

The navigation bar as well as the footer are exactly

Another page which is a blog page also have a