Website Design and Development: Technologies, Tools, and Analysis

This report provides a comprehensive overview of website design and development, encompassing both front-end and back-end technologies. It delves into the capabilities and relationships between these technologies, explaining their roles in presentation and application layers. The report contrasts online website creation tools with custom-built sites, evaluating them in terms of flexibility, user experience, interface, and performance. Furthermore, it emphasizes the importance of website documentation, including fidelity wireframes and user requirements. The report also covers the use of design documents, principles, standards, and guidelines in producing branded multi-page website pages, along with the design and development of appropriate test plans for determining performance areas, review functionality, and overall website performance. The report includes an introduction, discussion of key concepts, and a conclusion, as well as references.

Website Design & Development
1

Contents
INTRODUCTION...........................................................................................................................3
LO2..................................................................................................................................................3
P3 Discuss about the capabilities and relationship between front-end, back-end website
technologies and explain how these relates to presentation and application layers....................3
P4 Describe the differences between online website creation tool and custom built site in term
of flexibility, user experience or interface, performance.............................................................5
LO4..................................................................................................................................................7
P5 develop the documentation of website which always supports fidelity wireframe, user
requirement..................................................................................................................................7
P6 by using design document, identifying principles, standards, guideline to produce branded
multipage website pages..............................................................................................................9
P7 designing and developing an appropriate test plan determining the performance area, use
of review functionality and performance of website.................................................................11
CONCLUSION..............................................................................................................................17
REREFENCES..............................................................................................................................18
2

INTRODUCTION
With advancement in technology there are many types of websites which is being
developed. They are designed with help of new programming language which allows in better
interface and user experience. The purpose is to maintain website so that it can look great and
function in better way. Also, there are different types of website development method which is
applied in it. Moreover, it is essential to analyze performance of website so that accordingly
changes can be made. Website are designed for a specific purpose and each design vary from one
another on basis of business needs. In addition, there are several platform available where
website is designed.
There is vital role of front and back end developer in it. The website needs to be attractive
and user friendly so that it is easy for user to access its interface. It is a long process as it requires
many things to be done such as writing codes, creating design, testing, etc. There are many
methods available for measuring performance of website such as SEO, functionality etc. through
its website capability is enhanced. However, domain name has to be selected properly so that
website search is easy and simple. At present time, website can be designed online. This allows
in testing and developing of website as per user needs.
This report will describe about purpose and types of DNS and how domain are managed.
Also, it will explain relationship between communication protocols with software, hardware, in
accessing of website. Alongside it will mention about relation of front and back end developer in
presentation and application layer. Besides, difference between website creation and design
performance. The report will lay emphasis on design document and how suitability test is
applied.
LO2
P3 Discuss about the capabilities and relationship between front-end, back-end website
technologies and explain how these relates to presentation and application layers.
Frontend is primary concept of development through user interface. The essential feature of work
on client side during website designing. It is all depend on the user’s ability when they can
operate web pages and accessing website (Suel and Polak, 2017). Front end development is
mainly establishing the collaboration with designer, analyst and programmer to create
convenient, dynamic website.
3

The clearly understand the process of frontend development when open a page of site. It
can find out the interface and clicking open to search page code in the browser (Harris, Riley and
Hand, 2017). For Example- The front end developer can perform the different role to down the
user’s browser and see it design pattern. The page is mainly describing the layout, graphic
element and font.
Front end development used various components
 HTML stands for hypertext Mark-up language which is consider as a documentation for
creating page structure, layout, pattern, design and heading. This language is basically
used for creating entire wireframe of dynamic groceries shop website (Garaus, Wagner
and Manzinger, 2017).
 Cascading style sheet is another language for describing, styling the outer appearance of
document. In order to understand the performance of browser exactly how to display
elements. CSS use set of different colours, appearances, parameter of fonts, identifying
how multiple block of site will be located. It allows for displaying similar document in
various styles.
 JavaScript is another programming language that help for creating a dynamic web pages.
By using language, it can perform the different task to respond user action. In order to
handle the movements of cursor. In this way, it is sending the request to server and
download data with reloading page. It allows to enter messages.
Backend development
It is a set of software and hardware tool that mainly implementing the logic of website. It
simply put something which are hidden from users. In order to perform various in the backend
operation. For Example- when enter the query on the search engine page and also clicking on
enter key to send request for server. Sometimes, it can be used the location by using search
algorithm.
Backend Development Components
The developer is mainly used the tool or platform which are available on server. In this
way, it will require to right way of select any programming language. For Example- Java, PHP.
It is all depends on the website project and performed different task in website data collection.
Moreover, Developer use DBMS for purpose of backend development such as MySQL,
MongoDB.
4

The current responsibilities of backend developer which greatly depending on the quality
item. The developer can create website and integrate with database. It provide the better security
and also configure backup as well as recovery technologies.
Backend Screenshot
5

Interaction between Frontend and backend
Frontend and backend are interacting with each other, HTTP request send directly to the
server. In order to search the information or data which embedded with template, return as
HTML page.
The frontend of website is the part that is mainly represented to user, interact with when browse
web. The front technology behind that presenation layer which makes everything smoothly.
6

Front end deverloper can use presentation layer because it mainly focused on
representing the dyanmic style, pattern of groceries website. In this process, presentation layer
plays important role for providing instruction to sever side, transmitting singals for generating
HTML pages (Harris, Riley and Hand, 2017).
Backend developer can application layers which help for providing the operation to
manage or control large amount of data into database management system. Application layers are
established the relationship with front end in order to interact with database, application as well
as server.
7

P4 Describe the differences between online website creation tool and custom built site in term of
flexibility, user experience or interface, performance
CMS is based on the content management system which mainly used for managing and
controlling the site. It consists of various images, videos, design and pages that all need to be
done by administrative panel. Sometimes, it may turn into CMS which contain two important
blocks. Initially, the page of site provide the facilities for visitor to find out the information. The
user cannot access the administrative panel. It only provide the password to excess information
by using username, password.
Content management system have a multiple purpose which has sharpened for performing
certain task. For Example- Word press is the best example which providing the facility to create
blog engine, it is becoming more suitable for information to create a dynamic website (Harris,
Riley and Hand, 2017). On the other hand, there are another CMS which divided into different
manner. For Example- The most popular platform is consider as wordpress, Joomla, Drupal and
paid ones.
Wordpress
It is based on the system that has established itself as innovative platform with high
quality of services. In order to provide the better system functionality and maintain high
popularity in global marketplace. This is because of design, format of website which always
attracts more and more customers. Nowadays, web design is in high demand for development of
services by using wordpress. Usually, this platform can be used in everywhere from personal
blogs to e-commerce site.
CMS is the best option of developer to create or design the dynamic website. By using system
provides wide but at the same time which simply identifying functionality of website. Wordpress
is innovative platform which always supports in new blogs (Suel and Polak, 2017). Generally, it
will be using the multiple sites.
 High performance: it is important for identifying the current performance of website
which mainly used by wordpress platform (Harris, Riley and Hand, 2017). The online
groceries store will not slow down if they will select the right management system. In
order to maintain and control the performance of dynamic website.
 Security: it is another important aspect of maintain the security because a grocery website
collect large amount of information or data. A dynamic website is online platform so that
8

many authorised person tries to access the details. In this way, developer always testing
the vulnerabilities, threat within system in proper manner.
 The complexity of website design: The developer are generally design an effective design
which always supports of facilitating to reduce complication. It can be used CMS which
become user-friendly of proper to access data or information.
Website creation tool/platform Custom built site
Flexibility It allows to use the design
template that support for
changing the colours, style
and layout in dynamic
manner.
It allows for encouraging to
show the dynamic design
pattern. In order to represent
the design through coding.
Performance The performance of tool is
becoming fastest than other
customer built site.
It is slower than other website
creation tool.
User experience (UX) UX design of website creation
tool to generate dynamic web
pages and give better
experience of users.
Custom built website uses
programming code for
designing front end design
patterns.
User interface (UI) Website tool give template to
add information within user
interface pages.
Custom built is mainly used
scripting language to design
models.
Table: 1
9

Determine technique to support for designing, developing a custom-built website.
In order to create the dynamic website of groceries shop where it can be used the hypertext
document (HTTP). It is based on the standard language for creating hypertext document within
the internet environment. Sometimes, it can be understanding the essence of HTML language
which help for controlling the characteristics such as multiple tags. When it has been created the
document by using HTML (Harris, Riley and Hand, 2017). In some situation, web browser can
easily interpret to highlight the multiple element and further processing. It allows for
documentation to represent fonts, graphics and line elements in the system.
The primary advantage of HTML is that when easily view multiple type of web browser.
It enough to create the full site in order to take feedback from user side. In additional, it also
update the static website by using HTML language which refer to programmable technique
which is known as manual processing.
LO4
P5 develop the documentation of website which always supports fidelity wireframe, user
requirement.
It is describing the groceries website that has developed different web pages. It is mainly consists
of different elements such as login, registration, home page, contact and so on. These are
considered multiple pages which mainly contained a lot of information or data. Furthermore,
several categories of information stored in dynamic website (Mortimer, Fazal and Martin, 2016).
This type of dynamic website will help for attracting a lot of customers where they can easily
access product details. It also identifying available item and services
10

Home page
This is the home page of Grocery shop which providing wide range or product and services to
the customer. it consists of different products such as bread, diary, fruits and vegetables.
Registration page
The web page is mainly representing the registration page and consider as initial step
where user can enter the information within system. in this way, website can easily record the
details of each user who will use access their own account (López and et.al., 2017). Moreover, it
is an important for providing the facility where customer directly interact with service provider.
They can easily resolve issue, query in regarding the product as well as services.
11

Login page
This page can be providing the facility to customer where they can easily enter username,
password. Afterwards, it easily accessing information or data. The online store has given the
many option to user when they can select item as per requirement or need.
User and client requirements
When user can access the website which require to login the account with the help of
username, password. It would be required for accessing sign up page if user has no account. It is
initial step to login page and check the availability of different product as well as service.
In design it was identified that image slider will consist of login, signup and 24*7
support. But in actual design there were only two options first was sign-up and second was 24*7
registration.
12

Login page only consisted on email and passwords no captcha image was includes. In
actual design of the webpage email and passwords, submit requires and forget password options
were included only.
Signup page includes various testboxes and only one submit option was included. As
compared to previous design, this page was modified a bit so that some of the functioanlties can
be inserted in a proer manner such as date of bith option in this date option was included so that
date of bith can be selected in a prtoer manner without any mistakes (Harris, Riley and Hand,
2017). In this only three options were made mandetory that are: anme box, email and password.
Rest of the two options that are: date of bith and address were optional.
13

Cart page
The page is mainly representing the cart details where customer added into wishlist. It
beome easier for completing the existing client where access the details of particular item in
proper manner. Afterwards, it is estimating the overall amount of each products.
14

Product detail page
The page consists of wide range of products related groceries. In this way, customer can
access the website and select the item as per requirement. On the other hand, it also selecting the
quantity of particular item in proper manner.
15

P6 by using design document, identifying principles, standards, guideline to produce branded
multipage website pages.
When identifying the design pattern, layout and structure of dynamic website which require for
consideration of suitable principle, guideline. It always supports for providing the better view of
audience to attract towards designing. Before designing multiple web pages, developer may
consider the principles and standards (Rejab, Baharudin and Karkonasasi, 2016). Most user
search for something interesting as identifying different information or data related particular
item or service through website.
User appreciate quality as well as credibility: if multiple web page providers user with
high quality of content, they are willing to compromise with the content and having an effective
advertisement, design of site (Desai and et.al., 2017). The reason is that when it is focused on the
16

well design website. It must consider high quality of content which automatically gain a lot of
traffic over. The sensitive content is important than other design pattern which always support
them.
Web user are impatient: in this way, it always insist on instant gratification. It is to be
consider as simple principle. If website is not able to meet the expectation of user and then
developer failed to get his own job. In this way, it would require to maintain high quality of
cognitive load and become less intuitive navigation. It is becoming important for user to leave
the website and search alternative option.
User want to control: It is an essential for designer to give better view of customer
because they want to control their browser and rely on the consistent data presentation. For
Example- if in case, it has found that new windows popping up which are unexpectedly, want to
be able to get back with other button to the site (Harris, Riley and Hand, 2017).
Design principles
Communication
The customer on web tend to search a lot of information or data quickly. It is important to
establish communication with clearly so as require to read as well as digest information. The
developer may use an effective tactics that include entire web design (Rejab, Baharudin and
Karkonasasi, 2016). In order to organise the information with the help of headlines, bullet points
instead of long sentence.
Colours
A well thought out of different colour palette that can go long way in order to enhance
the user experience. Sometimes, it will be creating the complementary colours which always
balancing. At that movement, it give better look through contrasting colours for back ground,
text. It will make easier on the navigating the menu (Rejab, Baharudin and Karkonasasi, 2016).
Furthermore, it will create emotion that should be used and negative space is becoming effect at
giving the modern look of website.
Navigation
It is all about the way how people to take action and also move towards dynamic
groceries website. Designer should include some effective tactics for purpose of navigation in
term of logical page hierarchy. In order to design the clickable button which always following
the click rules (Rejab, Baharudin and Karkonasasi, 2016). It means that user will able to search
17

information and looking various groceries products. It is important for maintaining the overall
design pattern of dynamic website in step by step manner.
Load time
Every users hates a website that take a long time. In this way, designer consider this
principle to make easily page load time. It became an effective which include optimising image
sizes, combining with programming code into JavaScript, CSS. It can easily compressed the file
and reduce their load time.
Standards
Quality Assurance
Quality assurance can be defined as maintenance of desired level of quality in a product
or service especially by a means of attention at all the stages of the process of production or
delivery (Takanen and et. al., 2018). Quality assurance helps in avoiding problems in delivering
the project in a timely manner. According to ISO 9000, it is a part of quality management that
majorly focuses upon providing confidence and fulfill quality requirement in a proper manner.
Quality Control
Quality control can be defined as a process with the help of which quality of all the
system or process involved in manufacturing is tested against defined standards or specification.
According to ISO 9000, quality control is a part of quality management that majorly focuses
upon fulfillment of a quality requirement of a project (Schilling and Neubauer, 2017).
Quality assurance while implemented during design and development stages of the
Website was done with the help of testing. Testing helps in testing main processes and
functionality of the project in a proper and effective manner by comparing the results of the
testing with expected results of outcome of the test.
Ways in which it was implemented during design and development stages of the Website
are: first requirements of the system were identified (Rejab, Baharudin and Karkonasasi, 2016).
After identifying the main requirements of the website, strategy was developed in which main
objective of the quality assurance was identified, resources required were identified and testing
tool with the help of which testing will be done were identified.
After developing a testing strategy, tool or technique with the help of which testing was
required to be done was identified so that quality assurance requirement identified can be
fulfilled in a proper and appropriate manner. After this parameter on the bass of which test data
18

will be compared is set (Rejab, Baharudin and Karkonasasi, 2016). After setting of parameters,
lastly Testing of the website data is done in which actual results and expected results are
compared.
P7 designing and developing an appropriate test plan determining the performance area, use of
review functionality and performance of website.
Web testing is based on the process which mainly used as software testing practices to test
website and application for identifying potential bugs, errors (Schilling and Neubauer, 2017).
Afterwards, it allows for designer to application testing the entire activities before making live. A
web based system require to be checked completely from end to end process. If it goes live for
end users. Furthermore, it is performing the website testing which require for designer to make
sure that system functionality properly running. In order to accept the real time users.
Cross Bowser testing
The website designer is basically used cross Browser testing and suitable for using wide
range of devices. It has become life cycle which quickly reach to desirable result or outcome.
When performing Cross browser testing on the groceries website, it will easily display
the result or outcome.
 All necessary configuration done and providing the better idea about the overall
functionality of website (Rejab, Baharudin and Karkonasasi, 2016).
 In order to implement action which display on the screen with existing resolutions.
 In regardless of configuration that are generally used both server as well as machine.
Afterwards it is operating the entire functionality of website in step by step manner.
Usability testing
This testing will help for dynamic website to increase conversion of website and
groceries online store. It provide the facility to find out hidden intention, user wisher. It make
easier for decision making in term of development when applying additional functionality on the
activities (Schilling and Neubauer, 2017). Usability testing is process by which system measure
its strength, weakness. This type of testing is mainly focused on navigation, general appearance,
user satisfaction and other ease of learning. The testing will concern about each process where
handling the overall functionality of dynamic website in step by step manner.
Functionality testing
19

It is based on the software testing whereby entire system is tested against the functional
requirement/ specification. Sometimes, it will be tested by feeding them input and also
examining the output (Schilling and Neubauer, 2017) . Functional testing must ensure that
requirement which are properly satisfied through application. It is directly linked with web
pages, database connection and other forms that mainly used for submitting or getting
information.
 Test the outgoing links from different web pages but uses a specific domain under certain
test.
 In order to check all essential links, jumping into another pages.
 Test to check if any other requirement of pages.
Cookies testing
Multiple cookies are stored on the user machine. It is basically appropriate to maintain
the session and login. Sometimes, it automatically test application by enabling, disabling the
cookies in the web browser options.
Test the cookies if it is encrypted before writing the user machine. Sometimes, testing
session cookies always support for checking login page and maintain update (Harris, Riley and
Hand, 2017). Furthermore, it is also considered the security aspects for maintaining and
controlling in proper manner. Moreover, the developer can be optimised the groceries website
for search engine which mainly used HTML, CSS that easily validate the site errors, bugs.
Goal and objective of testing
The testing approach is generally set up the primary goal which help for identifying the
further direction in term of task method, respondent choice. On the basis of goal which require to
20

formulate the problem and task. In order to the check the availability of product development or
search for defect after redesign. For Example- Online groceries website can design order form in
order to reduce the conversion. By using testing, it can easily find out the interest of particular
customer towards product as well as service.
S.No. Steps Description Time
1. System analysis and selection of
requirements
Reproduce the most objective
pattern according to user
behaviour and after then load
profile (Schilling and
Neubauer, 2017) .
Identifying the suitable and
appropriate amount or data.
Setting the system monitoring
method or technique.
In order to understand criteria
that can easily meet the
technical opinion.
2-day
2. Preparing strategy After analysing, it may
include collection or data
about the overall system,
testing objective, tech bench
configuration, monitoring,
and load model planned test
launch, performance of
testing tool, representing form
results.
Sometimes, load testing is
affected by multiple factor
during configuration of test
bench, network congestion in
their full database (Schilling
3-day
21

and Neubauer, 2017) .
3. Setting the load Generator For purpose of testing, it can
be installed high quality of
load generator. It is known as
virtual and physical machine
which mainly located as close
to application server.
In order to create the large
load of resource, equipment
which always supports for
distributed testing which
carried out (Schilling and
Neubauer, 2017).
3-day
4. Preparing test data It also evaluating the software
performance parameters,
identify the different area of
website that will create
bottlenecks.
In order to obtain from
monitoring all server and
system resource used to
analyse performance testing.
In this process, it is
monitoring which carried out
to utilise or tack consumption
of software, hardware
resources.
2-day
5. Developing load script It can be used the appropriate
method for analysing
different phases in software
features. Using programming
3-day
22

code that will create
username, password. It
emphasis on the uniqueness
of name and password to
maintain reliable criteria
(Harris, Riley and Hand,
2017).
6. Pe rforming Testing It will be creating the
performance testing script
through technique or method.
In order to create the test
cases which will be written in
specific parameters.
Afterwards, it can easily
running the script in step by
step manner.
2-day
Table: 1
23

CONCLUSION
From report it is concluded that website design and development is process of creating a
website. There are many methods through which it is developed. Also, purpose of DNS is to
provide a domain name for website. They are managed and organised with help of testing.
Moreover, communication protocol are decided on basis of hardware and software requirements.
The front and back end developer are related to one another as front end manage front side of
website like design, webpage size but back end manage overall functions of website like
programming, issues etc.
Furthermore, online website certain tools offer developing of website in that errors cannot
be solved as coding done is default. But in custom built site coding can be modified. It allows in
testing and designing of website in effective way. In design document website wireframe,
interface on basis of user requirements is included in it. There are certain principles and
guidelines which is followed in it. The suitability test is used to identify performance of website.
It shows outcomes of functions, user experience, and error within website. Then, accordingly
changes are made in website. It enables in improving website UI and function. There are many
methods available for measuring performance of website such as SEO, functionality through it
website capability is enhanced.
24

REREFENCES
Books and journals
Desai, H. and et.al., 2017, February. IoT based grocery monitoring system. In 2017 Fourteenth
International Conference on Wireless and Optical Communications Networks
(WOCN) (pp. 1-4). IEEE.
Garaus, M., Wagner, U. and Manzinger, S., 2017. Happy grocery shopper: The creation of
positive emotions through affective digital signage content. Technological Forecasting
and Social Change. 124. pp.295-305.
Harris, P., Riley, F.D.O. and Hand, C., 2017. Online and store patronage: a typology of grocery
shoppers. International Journal of Retail & Distribution Management.
López, D. and et.al., 2017. Development and evaluation of a nutritional smartphone application
for making smart and healthy choices in grocery shopping. Healthcare informatics
research, 23(1), pp.16-24.
Mortimer, G., Fazal e Hasan, S., and Martin, J., 2016. Online grocery shopping: the impact of
shopping frequency on perceived risk. The International Review of Retail, Distribution
and Consumer Research. 26(2). pp.202-223.
Rejab, M.F.B.M., Baharudin, A.S. and Karkonasasi, K., 2016. Implementing User Module in the
Development of e-Grocery Portal. International Journal of Applied Engineering
Research. 11(19). pp.9999-10002.
Schilling, E.G. and Neubauer, D.V., 2017. Acceptance sampling in quality control. Crc Press.
Suel, E. and Polak, J.W., 2017. Development of joint models for channel, store, and travel mode
choice: Grocery shopping in London. Transportation Research Part A: Policy and
Practice. 99. pp.147-162.
Suel, E. and Polak, J.W., 2017. Development of joint models for channel, store, and travel mode
choice: Grocery shopping in London. Transportation Research Part A: Policy and
Practice. 99. pp.147-162.
Takanen, A., and et. al., 2018. Fuzzing for software security testing and quality assurance.
Artech House.
25