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