ASSIGNMENT 2 FRONT SHEET

Qualification BTEC Level 5 HND Diploma in Computing

Unit number and title 10: Website Design & Development

Date Received 1st

Submission date
submission

Date Received 2nd

Re-submission Date
submission

Student Name Nguyen Tan Anh Student ID BHAF190112

Class BH-AF-1911-2.1 Assessor name Ngo Thi Mai Loan

Student declaration
I certify that the assignment submission is entirely my own work and I fully understand the consequences of
plagiarism. I understand that making a false declaration is a form of malpractice.

Student’s signature

Grading grid
P5 P6 P7 M4 M5 D2 D3
 Summative Feedback:  Resubmission Feedback:

Grade: Assessor Signature: Date:

Signature & Date:
Table of contents.
A. INTRODUCTION. ........................................................................................................................ 4
B. CONTENT. .................................................................................................................................... 4
I. A review of appreciate web design principles, standards and guidelines. .......................................... 5
1. Design document for online shopping website. ......................................................................... 5
2. Implementation of website design. ......................................................................................... 15
II. Create and use a Test Plan to review the performance and design of a multipage website(P7). ...... 24
1. Test (UX, UI). ........................................................................................................................ 24
2. Test log. ................................................................................................................................. 25
III. User manual and Solution. ........................................................................................................... 28
1. User manual. .......................................................................................................................... 28
2. Solution. ................................................................................................................................ 34
IV. Compare and contrast the multipage website created to the design document (M4). ..................... 35
1. Compare and contrast. ............................................................................................................ 35
V. Evaluate the Quality Assurance (QA) process and review how it was implemented during your
design and development stages (M5). ................................................................................................. 38
1. Evaluate Web Testing. ........................................................................................................... 38
2. Valuate steps to QA E-Commerce Website. ............................................................................ 41
3. Apply QA Process to Our Website. ........................................................................................ 41
C. CONCLUSION. ........................................................................................................................... 46
D. REFERENCES. ........................................................................................................................... 46

List of figures.
Figure 1: Overview of tonywatch_db in MySQL. ........................................................................5
Figure 2: ER diagram of tonywactch database. ............................................................................7
Figure 3 : Homepage wireframe. .................................................................................................9
Figure 4:Product page wireframe.................................................................................................9
Figure 5: Introduction page wireframe....................................................................................... 10
Figure 6:Contact page wireframe............................................................................................... 11
Figure 7: Detail page wireframe. ............................................................................................... 12
Figure 8: Login page wireframe. ............................................................................................... 13
Figure 9: Register page wireframe. ............................................................................................ 14
Figure 10: Cart page wireframe. ................................................................................................ 15
Figure 11: The hardware. .......................................................................................................... 16
Figure 12: Development software. ............................................................................................. 16
Figure 13 Environment.............................................................................................................. 17
Figure 14: Home page. .............................................................................................................. 19
Figure 15: About us page. ......................................................................................................... 20
Figure 16: Contact page. ........................................................................................................... 20
Figure 17: Product page ............................................................................................................ 21
Figure 18:User login. ............................................................................................................... 22
Figure 19: User register. ............................................................................................................ 23
Figure 20: Home page ............................................................................................................... 29
Figure 21: Database testing. ...................................................................................................... 44
Figure 22: Examples of what happens if we enter the username already exist . .......................... 45
Figure 23: Examples of what happens if we enter the wrong information. ................................. 46

List of tables.
Table 1: Category table. ..............................................................................................................5
Table 2: Brand table. ...................................................................................................................5
Table 3: Origin table. ..................................................................................................................6
Table 4: Admin table. ..................................................................................................................6
Table 5: Account table. ...............................................................................................................6
Table 6: Product table. ................................................................................................................6
Table 7: Test case. ..................................................................................................................... 28
Table 8: Test link. ..................................................................................................................... 41
Table 9: Test form. .................................................................................................................... 44
Table 10: Test navigation. ......................................................................................................... 45

A. INTRODUCTION.
I specified the function and form of DNS in Assignment 1 providing a description of how to
coordinate and handle the domain. Explain the purpose and connection between the
communication protocols, the server hardware, the operating system, and the webserver
applications involved in developing, publishing, and viewing the website. Discuss the
possibilities and interactions between front-end and back-end network technology and explain
how they apply to levels of presentation and implementation, and explore the discrepancies
between resources for page creation. The flexibility of architecture, performance, accessibility,
user experience (UX), and user interface (UI) includes online web sites and custom-built sites.
I will design a sales website in this assignment which consists of two sections of the
administrator and the client. Administrators have the purpose of inserting upgrade uninstall
goods, allowing consumers to search, display items, order products, and purchase products.

B. CONTENT.
I. A review of appreciate web design principles, standards and guidelines.
1. Design document for online shopping website.
I have documented the website design for Online Shopping, supported with a medium-fidelity
framework, and a full set of customer and user requirements. Below is a schematic diagram of
the database and wireframe that I have designed.
1.1. Database Design.

a. Overview of tonywatch_db in MySQL.

Figure 1: Overview of tonywatch_db in MySQL.

b. Category table.

Table 1: Category table.

c. Brand table.

Table 2: Brand table.

Foreign key origin_id.

d. Origin table.
 Table 3: Origin table.

e. Admin table.

Table 4: Admin table.

f. Account table.

Table 5: Account table.

g. Product table.

Table 6: Product table.

Foreign key category_id.

 Foreign key brand_id.

h. ER Diagram.

Figure 2: ER diagram of tonywactch database.

1.2. Illustrate the structure and components of website.

Subsequent to meeting every one of the prerequisites among customer and client I have begun
to deal with the undertaking which help me to comprehend what ought to be included just as
where the substance and administrations ought to be place.
a. Homepage wireframe.
 Figure 3 : Homepage wireframe.

- This is the home page interface when customers visit the online shopping website and
will show the interface for customers to select functions.
b. Product page wireframe.

Figure 4:Product page wireframe.

 - This is the product page, which will display the product to the user, and can also sort
the product according to the customer's choice.
c. Introduction page wireframe.

Figure 5: Introduction page wireframe.

- This is an introductory page about the store and website, which will display the
content to introduce to the user, this page will help users understand more about the
store and website.
d. Contact page wireframe.
 Figure 6:Contact page wireframe.

- This page is the contact page, which displays the ways users can contact the store for
assistance.
e. Detail page wireframe.
 Figure 7: Detail page wireframe.

- This page is a product detail page, it will display about a product that the user has
selected, it will have detailed information about that product.
f. Login page wireframe.
 Figure 8: Login page wireframe.

- The login page is the place to display the information that needs to be entered to log in
with the customer's account, only when logging in, the user can order.
g. Register page wireframe.
 Figure 9: Register page wireframe.

- This page allows users to register their own account.

h. Cart page wireframe.
 Figure 10: Cart page wireframe.

- This page displays the products that the user has added to the shopping cart, this page
shows information about the added product and has features available to the user.
2. Implementation of website design.
2.1. How to create a website.
a. Configuration.
This is the hardware i use for the whole process developing my web application.

Figure 11: The hardware.

b. Development software.
Sublime Text 3 (ST3) is the latest version of the text editor most used by web developers,
coders, and programmers. It's available for Mac, Windows, and Linux and is free to
download and use. I found sublime text 3 to suit my taste so I chose it to code and edit
code.

Figure 12: Development software.

c. Environment.
I choose XAMPP as my tool to work with the server, XAMPP software package includes
Apache distributions for Apache Server, PHP. And basically, it's localhost or a local
 server. My own laptop computer works on this local server. XAMPP is used to test clients
or your website before it is uploaded to the remote web server. This XAMPP server
software gives me a suitable environment on the local computer for testing MYSQL, PHP,
Apache projects.

Figure 13 Environment.
d. Techniques using for Website Implement.
For the Front-End part:
• HTML5: The markup language I use to develop the structure of the webpage is HTML
5.
• CSS3: the lasted version of CSS with various improved features and layout.
• Java Script: add dynamic and interactive elements to the website as well as react
events, display special effects, accept variable text,…
• To create pretty icon I use Font Awesome 6.x.x.
Back-End Techniques:
• The server-side programming language I use is PHP.
• And the most suitable with PHP is MySQL database.
• Some Algorithm to handle the logical problems.
2.2. How the website works.

The way the website works is as follows: Users access the website through the website's
domain name, on the home page users can see the website's products, users can also search for
products, Sort products by category and can add products to cart. Features are written in PHP
for server-side processing to return results corresponding to each feature. To be able to place
orders, users must log in through their own username and password and if the user does not
have an account, they can register for a new account. Next is the admin page of the admin, in
order to login to this page, the admin needs a separate account, in the admin page, the admin
can perform tasks such as adding, modifying, deleting product categories or trading brand.
Above is how the basic website works.
User Interface:
Figure 14: Home page.
Figure 15: About us page.

Figure 16: Contact page.

Figure 17: Product page
On this page users can view products on the website.

Figure 18: Login Form.

 Figure 19: User register.
Administrators can:
• Add a product: The add-on function allows administrators to add new products to the site
• Product update: The product update function allows the administrator to edit the product
as desired
• Product Deletion: The product delete function helps the administrator to delete
unnecessary products
 Figure 20: Picture interface added new product.

II. Create and use a Test Plan to review the performance and design of a multipage
website(P7).
In this section, I will make a test plan.
1. Test (UX, UI).

Expected Actual
Title Steps Status Notes
Result Result
1 Checking all Display the Display the
Open the
links home page home page Passed
website
properly properly
Click on all Redirect each Redirect each
clickable link to its link to its
Passed
links on the specified specified
website destination destination
Checking all
Display the Display the
button Open the
home page home page Passed
website
properly properly
Because
Display an
Click on all the query
interactive Some button
button in the Fail has not yet
message or cannot click
website been
response
executed.
 3 Layout
Flexible layout,
suitable for each
device with
Test layout
different sizes, Flexible layout
flexibility Passed
content displayed change to suit
across devices
well without
breaking content
when on devices.

Check icon
Click on Navigated to
link
4 Icon linked facebook/ Passed
(facebook,
icon twitter link
twitter, logo)

The website Has its own As expected Passed

must provide product field for
Products
good quality discounted
display and modern products,
5 services to bestsellers,
customers. outstanding
product
suggestions.
Images In the website In the website As expected Passed
form must has form must has
6 display
high quality high quality
images images

User User can fill Website has As expected Passed

information. enough text field
registration
7 for user to fill all
successful their required
information
Table 7: Test UI, UX.
2. Test log.
Test Expected Actual
Test Title Test Steps Test Data Status Notes
Summary Result Result
Test INSERT INTO Register Register Passed
function `account`(`accountid`, username= Successful Successful
Register `username`, “admin”
account `password`) VALUES
(TRUE) ([value-1],[value- password=
2],[value-3]) “123456”
 Test username = Login Fail Login Fail username
function “$admin” is varchar
Register so can not
account use “$”
password=
(FALSE)
“123456”

Test SELECT * username=

function FROM account ‘’admin”
Login WHERE Login Login
Passed
account username=? password= Successful Successful
(TRUE) AND ’123456’
password=?
Test Test
username
account function
Login =‘’admin” Login Login Passwords
account Fail Fail Wrong
password=
(FALSE)
’1234’
Table 8: Test table account.

Test Test Expected Actual

Test Steps Test Data Status Notes
Title Summary Result Result
Test Test Id= 1 Added data Informati Passed
product Function category_id= 1 product on of
Add name= 'rolex' into table product
New price_old= added to
Product '2000' list
(TRUE) INSERT INTO price_current=
`product`(`id`, '1000'
`category_id`, description=
`name`, 'Nice'
`price_old`, discount= '20'
`price_current`, image=
`description`, 'product-1.jpg'
`discount`, brand_id= '20'
`image`, keyword
`brand_id`, ='watch classic
`keyword`) rolex')
Test VALUES Id= 1 Don’t Not Passed ID of
Function ([value- category_id= 1 added data added product
Add 1],[value- name= 'rolex' into table data into already
New 2],[value- price_old= table exist
Product 3],[value- '2000'
(FALSE) 4],[value- price_current=
5],[value- '1000'
6],[value- description=
7],[value- 'Nice'
8],[value- discount= '20'
9],[value-10]) image=
'product-1.jpg'
brand_id= '20'
keyword
='watch classic
rolex')
Test id = 1
Function Delete
Delete
Delete Successf Passed
Successful
(TRUE) DELETE FROM ul
`product`
WHERE id = ‘1’ id = 100
Test Cannot
Function Delete
Delete
Delete Delete Fail Passed because
Fail
(FALSE) id is
wrong
Test Update product name=‘omega’
Update
Function SET id = 1 Update
Successf Passed
Update name= ? Successful
ul
(TRUE) WHERE id=?
 Test name=‘omega’ Do not
Function id = 100 update data
Not
Update because do Passed
update
(FALSE) not
allow _id
Table 9: Test table product.

3. Test case.
Test What being test Test data used How Expected result
Home, About Us,
Check navigation of Blog, Click on the Navigated to
1
the web. Booking, Contact navigation list destination
us
Show mobile class
Resize view of and
2 Check mobile view Resize website
the website hide desktop and
tablet class
Check icon link Navigated to
Click on linked
3 (facebook, Icon facebook/
icon
twitter, logo) twitter link
Navigated to
4 Check figure link Figure class Click on figure
destination
Navigated to
Check link in blog
5 Click on link granted
page
info
Table 7: Test case.

III. User manual and Solution.

1. User manual.
This is the interface to the home page when the user visits the website.
On this page, the user can see the entire main content of the website, first is the header section
containing search engine, navigation bar, message, shopping cart. This is followed by slides and
products arranged in order. Finally, is the footer of the website, where the user can see the summary
of the website.
Figure 20: Home page
On the top right corner of the website are the login and registration buttons, Click and this button
will display the corresponding function for each button.

The image above is the web navigation bar, clicking on each button will redirect to the
corresponding web page for each button.

To search for information on the website, you need to enter keywords in the search bar on the
illustration and click on the button with the search icon next to it.
 This is a product category, if you want to display products in different categories, then click on
the content there to display the respective categories.

This is the area to display all products on the website, each product will display all the basic
information such as: name, old price, new price, discount, rating, brand and origin. If you want to
see details of each product, please click on the product you want to view.
 This is a toolbar that helps search and display products by each criteria, including: newest,
popular, bestsellers and on the right hand side is to sort products by price.

This is the footer of the website, here includes summary information of the website, each line of
content will correspond to each different function.

This is the login form when you click on the login button as stated above. This form will include
2 input fields to fill in information, the first box to fill in your username, and the second field to
 be your password. Then click on the login button at the bottom to login. Or if you want to exit
the form, just click the exit button or the opaque area outside the form.

If you do not have an account, when you click on the registration button the registration form will display.
This form includes 3 fields to enter information, the first box you need to enter the username you want to
register, the second field is to enter the password, and the third box is the box to confirm the password
entered in the second field. To complete the registration, please click the register button below.
When you click on a product, information of that product will appear and 2 function buttons, the
lower left button is the add to cart button, the next button has the function of ordering now.
2. Solution.
Recommended solutions to improve the website are as follows: - Product detail page
improvements
- Further improvement in functionality not available
- Improved website UI and UX to make a website most convenient for users.
In addition, through the website inspection process, we realize that it is necessary to
complete the responsive layout of the page to best suit smaller sized devices for convenient
use. Next is the improvement of the website's performance, optimize the page load speed.
IV. Compare and contrast the multipage website created to the design document
(M4).
1. Compare and contrast.
1.1. Homepage.

Evaluate:
The layout is mostly similar, not too different, except that the search bar is slightly
different from the blueprint to match.
Reason:
After review, the sizes have changed to increase the user experience better as well as
beautify the user interface.

1.2. About us page.

 Evaluate:
The layout is mostly similar, not too different, but the way the part like the font, the
layout of the page is still unreasonable.
Reason:
The design is currently in development and it takes time to improve the interface.

1.3. Product page.

Evaluate:
The layout is mostly similar, not too different, but the way the part like the font, the
layout of the page is still unreasonable.
Reason:
 The design is currently in development and it takes time to improve the interface.

1.4. Contact page.

Evaluation:
The actual layout is designed to have the form of a letter, the others are similar, not so
much different
Reason:
We aware that when the user tries to contact us, there are issues on their website
experiment, so we try to design this page clean, fresh, to reduce their worries and pressure
of them.

1.5. User Login page.

Evaluate:
The layout is mostly similar, not too misleading, the actual website is getting cleaner
Reason:
We know that the sign-up, sign-in and sign-up process is like the face of a website and
customers don't want to spend
 take a long time in the process. So we tried to make it as user-friendly as possible. The
added improvement is that instead of a different login page, the page will be displayed
in modal format when the user clicks on the login button, the display page will run
immediately on the page that the current user is accessing.

1.6. Detail page.

Evaluate:
The layout has a change in the main content
Reason:
The development has the influence of time, in the future we will try to develop according
to the designed layout, but the current layout also satisfies the necessary functions of the
detail section.

V. Evaluate the Quality Assurance (QA) process and review how it was
implemented during your design and development stages (M5).
It really isn't enough to get a website. It requires a company to create a comprehensive, functional,
and user-friendly website. The website should be well checked to preserve all of these attributes
and this website review phase is known as web testing.
1. Evaluate Web Testing.
Definition:
Web testing is a software testing practice to test websites or web applications for potential bugs.
It's a complete testing of web-based applications before making live.
A web-based system needs to be checked completely from end-to-end before it goes live for end
users. By performing website testing, an organization can make sure that the web-based system
is functioning properly and can be accepted by real-time users.
The UI design and functionality are the captains of website testing.
Web Testing Checklists:
 Functionality Testing.
 Usability testing.
 Interface testing.
 Performance.
1.1. Functionality Testing.
Checking all connections in web pages, linking to directories, ways used to send or retrieve
user information in web pages, checking cookies, etc.
Check all the links:
• Monitor outgoing connections to the same domain being checked from all pages;
• Check all ties inside.
• Jumping search links to the same pages. Page 80
• Test connections used to send emails from the web sites to admin or other users.
• Check to verify if orphaned pages are eligible.
• Lastly, checking links involves fixing broken ties in all ties listed above.

Test types available on all pages:

Forms are part and parcel of every web site. Forms are used to collect user information, and
for
They communicate with each other. But what do those forms check?
• Check all of the in-sector validations first.
• Search fields for default values.
• Misleading types references to fields in the types.
• Options to build, delete, display or change types if any.
Let's take an example of the search engine project that I am actually working on, we have
advertiser and distributor sign-up phases in this project. Per step of sign-up is different but
depends on the other steps. But the register flow should be properly performed. In manual
or automatic site checking all these validations should be reviewed.

Database testing:
In a software application, the accuracy of data is therefore very critical. Check for data
integrity and errors when reading, removing, changing the forms, or doing some operation
relevant to DB. Check for the proper execution of all database operations, the data is
collected and then correctly modified. More about the checking of databases can be a
burden on DB.
1.2. Usability Testing.
 Usability checking is the mechanism by which the features of a device are human-computer
interacting
Measurement and flaws found for repair.
• Getting quick to read
• Leadership guide
• Panorama
Navigation Check:
Navigation refers to the way a user moves through web pages, multiple functions such as
keys, boxes, or how the user uses connections on websites to access websites.
The following Usability Checks include:
• The position should be easy to find.
• Directions must be very simple.
• Check that the instructions given are correct to serve its function.
• Each page should display the main menu.
• It should be reasonably reliable.
Check your content:
Information needs to be rational, and clear. Check for spelling mistakes. The use of dark
colors is disrespectful to the customer and cannot be included within the style of the
website. You should adopt any of the typical colors used for the creation of web pages and
posts. There are commonly agreed norms that are irritating in terms of colors, fonts,
pictures, etc. as what I described above. There needs to be substantive information. All the
connections to anchor text should work properly. The picture should be positioned correctly
with the right height.
Additional account information to support customer:
A sitemap like a search tool also supports files, and so on. For all links on web pages, the
sitemap should be available with the required tree navigation mode. Find all of the ties here.
The "Check inside the Website" option would help users quickly and conveniently locate
the content pages they are searching for. These are all optional objects, which must be
checked if present.

1.3. Interface Testing.

In web testing, the server-side interface should be tested. This is done by verifying that
communication is done properly. Compatibility of the server with software, hardware,
network, and the database should be tested.
The principal interfaces are:
Online service interface and web server
Application manager and interface with Web system.
Check that all transactions are executed within these systems, and that mistakes are treated
properly. If the database or web server returns an error message per application request on
some query then the application server can record and show these error messages to the
users accordingly. Check what happens if the user interrupts every in-between transaction?
Check what happens if the Webserver link is reset in between?
2. Valuate steps to QA E-Commerce Website.
Checking an e-commerce platform has to be very vigilant with the tester. There are big items
to try out of e-commerce websites out of which I cover only some of my professional e-
commerce website research problems.
Functionality-wise you need to scan all sites, such as the main page (including items displayed,
special deals view, login information, search functionality), product details page, category
page, put an order, payment portal, all you need to try.

3. Apply QA Process to Our Website.

3.1 Function testing.
a) Check all the links.
• Test the outgoing links from all the pages to the specific domain under test.
• Test all internal links.
• Test links jumping on the same pages.
• Test links used to send email to admin or other users from web pages.
• Test to check if there are any orphan pages.
• Finally, link checking includes, check for broken links in all the above-mentioned
links.

Links need to be checked Evaluate

http://localhost/Shop/index.php Working well

http://localhost/Shop/introduction.php Working well

http://localhost/Shop/product.php Working well

http://localhost/Shop/admin/login.php Working well

http://localhost/Shop/contact.php Working well

http://localhost/Shop/detail.php Working well

http://localhost/Shop/login.php Working well

http://localhost/Shop/register.php Working well

Table 8: Test link.

On the form test, we test:
• Check all the validation on each field
• Default values on fields
• Valid and invalid inputted data
• Check the max length of fields on UI and corresponding fields in DB
• Try resizing the browser's window to see if strange wrapping occurs around the forms/pages.

Form Evaluate after testing

All Criteria Passed

All Criteria Passed
 All Criteria Passed

Table 9: Test form.

Database testing:
To search for data integrity and errors when reading, removing, changing the forms, or executing
some operation associated with DB. Check for the proper execution of all database operations,
the data is collected and then correctly modified. This feature I use is:

Figure 21: Database testing.

3.2 Usability testing.
a) Test for Navigation
Navigating pages from public homepage (public/index.php)

Accessible pages from the homepage Status

introduction.php Accessible

product.php Accessible

admin/login.php Accessible

contact.php Accessible

detail.php Accessible

Table 10: Test navigation.

b) Content Checking
• Content should be logical and easy to understand.
• Check for spelling errors.
• Content should be meaningful.
• All the anchor text links should be working properly.
• Images should be placed properly with proper sizes.
3.3 Interface testing.
Check that all transactions are executed within these systems and that mistakes are treated
properly. If the database or web server returns an error message per application request on
some query then the application server can record and show these error messages to the
users accordingly.

Figure 22: Examples of what happens if we enter the username already exist .
 Figure 23: Examples of what happens if we enter the wrong information.
3.4 Performance.
The developer's demanding sector is to control the Website's loading pace. This is really
important because no one wants their website to have loading time short. There's more
loading time so they shouldn't have enough page traffic. In the initial phase the average
success of the website is also anticipated. The website's weekly performance is not going to
function well and the website's performance could be slow due to badly written code,
unoptimized database, unmanaged data development, bad load distribution, default setup, etc.

C. CONCLUSION.
To summarize, in this exercise, I created a design document for a branded website specifically
a website that sells watches, multi-pages supported with medium fidelity wireframe, and set
full range of customer and user requirements. In addition, I also use design documentation with
appropriate guidelines, standards, and guidelines for creating web pages, provided by many
pages with actual content. I have also compared and contrasted a made multi-page website
with a design document. From there, create a proper test plan that identifies key performance
areas and uses it to review website functionality and performance, user experience (UX), and
user interface (UI). Finally, I reviewed the Quality Assurance (QA) process and looked at how
it was done during my design and development stages throughout the process.
D. REFERENCES.
https://www.wikipedia.org/
https://stackoverflow.com/questions/63741678/if-with-false-and-1-value-in-php
https://stackoverflow.com/questions/7957793/db-connecting-in-php
https://stackoverflow.com/questions/20654848/html-php-display-username-
after-success-login
https://www.usability.gov/what-and-why/user-interface-design.html
https://www.w3schools.com/html/html_xhtml.asp
https://www.w3schools.com/sql/sql_create_db.asp
https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp
https://www.w3schools.com/bootstrap4/bootstrap_flex.asp
https://www.w3schools.com/bootstrap4/bootstrap_modal.asp
https://www.userlytics.com/?gclid=EAIaIQobChMI9fOS6sfP6wIVYtVMAh0B
mA9SEAAYASAAEgKcb_D_BwE
https://www.pinterest.com/pin/41306521553564780/
http://webdesignzo.com/how-to-create-wireframe-of-website/
https://moqups.com/
https://chrome.google.com/webstore/detail/viewport-resizer-%E2%80%93-
respon/kapnjjcfcncngkadhpmijlkblpibdcgm