Website Design and Development: A Comprehensive Guide to Creating a Multipage Website

This report explores the fundamental concepts and practical applications of website design and development. It delves into server technologies, DNS management, communication protocols, and the interplay between front-end and back-end technologies. The report also examines the differences between online website creation tools and custom-built sites, emphasizing design flexibility, performance, functionality, user experience (UX), and user interface (UI). Furthermore, it outlines the principles, standards, and guidelines for creating a branded, multipage website, supported by medium-fidelity wireframes and a comprehensive set of client and user requirements. The report concludes with a detailed test plan to review the performance and design of the multipage website, ensuring its functionality and user-friendliness.

Website Design and Development
0

Table of Contents
Introduction......................................................................................................................................3
LO1 Explain server technologies and management services associated with hosting and
managing websites...........................................................................................................................4
P1 Identify the purpose and types of DNS, including explanations on how domain names are
organized and managed...............................................................................................................4
P2 Explain the purpose and relationships between communication protocols, server hardware,
operating systems and web server software with regards to designing, publishing and
accessing a website......................................................................................................................6
M1................................................................................................................................................7
M2................................................................................................................................................7
LO2 Categorise website technologies, tools, and software used to develop websites....................8
P3 discuss the capabilities and relationships between front-end and back-end website
technologies and explain how these relate to presentation and application layers......................8
P4 Discuss the differences between online website creation tools and custom built sites with
regards to design flexibility, performance, functionality, User Experience (UX) and User
Interface (UI).............................................................................................................................10
M3..............................................................................................................................................12
LO3 Utilise website technologies, tools and techniques with good design principles to create a
multipage website..........................................................................................................................13
P5 Create a design document for a branded, multipage website supported with medium-fidelity
wireframes and a full set of client and user requirements.........................................................13
P6 Use your design document with appropriate principles, standards, and guidelines to
produce a branded, multipage website supported with real content..........................................18
M4..............................................................................................................................................22
LO4 Create and use a Test Plan to review the performance and design of a multipage website. .23
1

P7 Create a suitable Test Plan identifying key performance areas and use it to review the
functionality and performance of your website.........................................................................23
M5..............................................................................................................................................26
Conclusion.....................................................................................................................................27
References......................................................................................................................................28
List of Figure:
Figure 1: Domain names organization and maintains......................................................................5
Figure 2: Purpose of website..........................................................................................................13
Figure 3: Communication form.....................................................................................................14
Figure 4: Image of website............................................................................................................15
Figure 5: Navigation of website.....................................................................................................15
Figure 6: Grid-based layouts..........................................................................................................16
Figure 7: Mobile friendly website..................................................................................................17
Figure 8: Home Page.....................................................................................................................18
Figure 9: contact us form...............................................................................................................18
Figure 10: Course details page.......................................................................................................19
Figure 11: Professor details page...................................................................................................20
Figure 12: Quiz Page.....................................................................................................................21
Figure 13: Email Validation...........................................................................................................24
Figure 14: Form Validation...........................................................................................................24
Figure 15: Link of website page....................................................................................................24
Figure 16: Responsive Website.....................................................................................................25
Figure 17: W3 Validation..............................................................................................................25
2

Introduction
The website is a collection of multiple web pages which includes multimedia content with the
common domain name. It publishes on the web server. The website contains back-end site and
front-end side for the user communication. It designs with the manual and online tool. HTML,
CSS, javascript, and PHP etc are webs designing language. Here, Website Design and
Development report are designed in the four parts.
In the first part, DNS server will be defined and also explained the DNS server organized and
managed properly. There will be also discussed the web server hardware, software, and operating
system. In the second part, front end and back end techniques will be explained. There will be
also compared to online website creation tools and custom. In the third part, I will be explained
website designing principle and design the website according to website designing principle. In
the four parts, website performance will be tested.
3

LO1 Explain server technologies and management services associated with
hosting and managing websites
P1 Identify the purpose and types of DNS, including explanations on how domain
names are organized and managed
DNS referees as Domain Name System that is a web server. It designs for a massive database
connection which stored domain name related information with their DNS records. DNS record
involves web host, the registrant of the domain, active name servers and so-on information. It is
also known as a name server. Overall world 13 Root DNS server which holds the whole database
of each server. DNS server are two types such as a primary server (work in one zone) and a
secondary server (work in another zone)
Type of DNS Server:
Primary or Master DNS Servers: It reads an information from web server file which located
on the hosting account for the domain zone. It also gives information to the secondary server.
Server administrators have specified the information as zone data. During zone transfer, the
primary server communicates with the secondary server and sent the data one zone to another
zone. Each Zone contains Two DNS server which offers easy communication and more secure.
After creating the zone data, primary server does not need the secondary sever copied
Secondary DNS Servers: It is also known as slave or simple server which received data from
the primary server. DNS Manager referred secondary DNS servers as a secondary’s software.
The secondary server needs permission for each function performance. It takes permission from
the master server. It can also use another secondary server as a master server. It gives security for
primary servers in the redundancy form. It also balances the load (Pcnames, 2013).
Domain names are organized and managed
Domain names contain three parts which are defined below:
 Root Name Server: All worlds have 13 root servers for the internet world. It is a cluster
of duplicated servers that is created for reliability and security purposes.
4

 Top-Level Domain (TLD) servers: It contains top-level domains such as gov, edu, net,
com, org, and country domains such jp, ca, UK, and fr etc. Company network use com
TLD server and education network use edu TLD sever in the top-level domain
 Authoritative name servers: it uses for access the organization website or application in
the publicly through the internet. The organization uses authoritative DNS server for their
DNS Records. It uses as a backup server. The organization contains own primary and
secondary (backup) authoritative name server (Userpages, n.d.).
Figure 1: Domain names organization and maintains
Source: (Userpages, n.d.)
5

P2 Explain the purpose and relationships between communication protocols, server
hardware, operating systems and web server software with regards to designing,
publishing and accessing a website
Here, I have explained the Web server Hardware, Software operating system, and
communication protocols that are used for website design, publish, and access.
The web server can mention as software (application of computer) or hardware (computer
system) that supports to the delivery of web content which is accessed through the internet
connection. The website used database server, file server, and print server. It contains IP address
and domain name
Web server Hardware:
The web server needs the hardware for the web traffic management (manage the HTTP request
on the website), General Sense and Customers View for the website.
 The website needs Professional server computers that have fast and large disk storage
space and also contain permanent IP address that helps to recognize the computer in the
network.
 There need a database server, file server, and print server for the website design and
storage their data on the server.
 Webhost needs for the Web sites that are monitoring and maintaining the website works
(Yourbusiness, 2013)
Web server Software:
The software is a collection of machine-readable instructions that perform a specific task through
computers processor. It contains both source code and machine instructions. Web server software
is used for creating and edit the HTTP files on the web server pages.
 Apache is web server software. It is public- domain open source which developed on the
Linux operating system. It gives website security and offers the source code for the
website. It has a large-scale library which completed the specific needs.
6

 Microsoft-IIS work as Internet Information Server which executed on the Windows NT
platform. It is integrated with operating systems that are easy comparing than administer.
 Nginx is high-performance HTTP server that offers a reverse proxy for the website. It
also gives rich feature set, stability, high performance, short resource consumption, and
simple configuration for the website design. It also searches threads on the website (Nani,
2013).
Web server operating system:
The operating system of the web server is run a number of the program on the server and also
kept the monitoring the user log in on the system and make ensured user does not interfere with
another user. Microsoft.NET, Windows NT Server, Advanced Server, and Windows 2000 are the
window based operating system. FreeBSD, Solaris, and Linus are the Unix-based Operating
system for the web server (Slideshare, 2010).
M1
I have used HTML, CSS, Javascript, and Jquery frameworks are suggested for the website design
which gives a user-friendly and responsive layout of the website. It gives the navigation, block,
section, animations, back end and front end connection. It also gives the communication for web
server and browser. These languages managed and controlled website functions.
M2
Website performance is dependent on the SEO (engine optimization). The website should search
engine optimization which enhanced the rank and index value of the website which increased the
organization brand value. I have used APACHE web server for the website design which gives
the SEO friendly website.
7

LO2 Categorise website technologies, tools, and software used to develop
websites
P3 discuss the capabilities and relationships between front-end and back-end
website technologies and explain how these relate to presentation and application
layers.
Back-end technologies: It developed as the server-side programming and an application layer
that can be utilized to empower convey dynamic substance and personalization on the site. Back-
end site contained three sections, for example, serve, API, and database. All backend
programming keeps running on disjoining that is a capable PC framework. The programming
interface is medium of the correspondence amongst client and web server. The database is a
gathering of the site information which separated through the client inquiry. Backend webpage of
the site is outlined with the assistance of disjoining content dialect. Usefulness and convenience
are giving the Back-end advancements. Rubby, PHP,.NET, Python, Java, and C# are the server
side content that procedure on the client question and communicate with the database and give
the valuable data. It gives dynamic web applications that have propelled highlights such sparing,
recovering information, exploring amongst pages and client approval. There is some structure
that utilized by the server side, for example, Koa, Ruby on Rails, Express.js ASP.NET, and
Django that give dynamic substance on the site. Back-end Site webpage additionally assumes a
noteworthy part of the site creation and support (Walker, 2017).
Front-end technologies: It used to design the UI (user interface) of the website that attracts the
people and improved their user experience on the website.
.
 Debugging and Testing are a noteworthy procedure of the front end advancement process
that finds the blunder and bugs amid the site execution and checked site are working
legitimate way or not. It additionally checks the usefulness of the site that pulls in the
web client
8

 Rendition Control/Git is an open source programming that controlling and following the
adjustments in the site code. The site ought to be planned most recent form that gives
propelled highlights for the web architecture.
 The site should program perfectly that enhanced the client encounter so a JavaScript
comfort (discover the mistake amid site execute on the web program) and an assessor
(permitted to alter CSS and HTML code) is utilized as a part of the front-end code.
 The site should program perfectly that enhanced the client encounter so a JavaScript
comfort (discover the mistake amid site execute on the web program) and an assessor
(permitted to alter CSS and HTML code) is utilized as a part of the front-end code.
 Jquery and JavaScript are front-end engineer tool stash that gives intuitive highlights on
the site, for example, amusements, sound and video, page movements, and looking over-
capacities. jQuery is a library that holds modules and augmentations that makes simpler
and quicker utilization of the site. It lessened the code that spared engineer time.
 CSS and HTML dialect that is utilized for making the pages. It gives the front – end of
the site that plans an easy to understand and responsive site which enhanced the User
Experience. These dialects utilized textual styles, shading, format and so on to outline
compelling GUI of the website page (Wales, 2014).

9

P4 Discuss the differences between online website creation tools and custom built
sites with regards to design flexibility, performance, functionality, User Experience
(UX) and User Interface (UI).
Here, I have explained the custom built sites and online website with their User Interface, User
Experience, performance, flexibility, and functionality.
RIA (Rich Internet Application) can be used by the web developer for the website design.
Javascript and CSS packages and frameworks are used as RIA. It makes a user-friendly and
responsive application that gives better user experience on the website. During the website
design, JavaScript has interactive functionality element that manages the event that creates by
HTML code of the website. Structured folders, file and files code of the website are designed
with the help of CSS packages and frameworks. It makes a user-friendly website with the
website Animation, layout, form, and Navigation that maintained the design flow on the
network.
Online content management systems:
CMS is a tool for the website created and maintained. It manages the users, online content, and
servers’ side application and software. Internet connection requires for the CMS which gives
Administration feature. Drupal, Joomla, and Word press are the major online content
management systems.
The advantage of CMS:
 It offers fast development for the website design with the static website approach.
 CMS offers good SEO for the website marketing.
 It designs an effective website for the organization.
 It handles a number of tasks at the time so there are implemented the third party plugins
and also improved and upgrade these plugins that give an effective website.
Disadvantages of CMS:
 It occurred the extra load on the server due to extra security patches, upgrades, backups,
and Maintained.
10

 It breaks the website if the developer does not proper configuration the CMS on the
website pages.
 It increased the project price during the training session.
 It gives the worst design for the website text (HARRISON, 2009).
Website Design:
Proposed website designs with JavaScript, CSS, and HTML code. It is a custom website which is
secure, responsive, flexibility, attractive User Interface and user-friendly website.
Differences between online website creation tools and custom built sites
Here, I have explained the Differences between online website creation tools and custom built
sites which are shown in below:
S.No. Online website creation tools Custom built sites
1. It is less expensive with the significantly
designs
It is costly compare than the Online
website
2. It is fast implemented and designs the
website.
It takes time to design and developed the
website.
3. It is well-designed, robust, and allows
customization.
It is less robust and does not allow the
customization
4. It gives the limited navigation capability
and graphics design for the website.
The developer can design graphics and
navigation according to their needs during
the website design
5. There is a security issue on the online
website.
There is less security issue.
6. The online website is less flexible and SEO
friendly.
It gives a flexible and Search engine
optimization website (Prime Design
Solutions, 2014).
11

M3
Proposed website is a custom built website which is designed with the help of CSS, HTML,
Javascript, and Jquery. Proposed website designed on the Dream viewer software. It used front-
end and back-end technologies for the website designed.
12

LO3 Utilise website technologies, tools and techniques with good design
principles to create a multipage website
P5 Create a design document for a branded, multipage website supported with
medium-fidelity wireframes and a full set of client and user requirements.
Here, I have explained website design principle which used in proposed website
 Purpose: Proposed website each page has a clear purpose and offers entertainment,
information, and type of implement or interaction for the user. It gives most effective
web pages.
Figure 2: Purpose of website
 Communication: web offers important information which makes communication between
users and organization. The website uses effective tactics in the website design such as
headlines, sub-headlines, bullet points, and cut the waffle.
13

Figure 3: Communication form
 Typefaces: Website contains is read in Arial and Verdana with 3 point sizes, 16px and 3
typefaces for easy reading.
 Colors: for the website, contrasting colors are used for the background and text. Vibrant
colors generate emotion so it used for the sparingly. Negative space and white space
gives a modern and uncluttered look on the website.
 Images: for the website, I have selected image which is related to website and defined
website purpose. It is good quality and graphics that give effective communicating.
14

Figure 4: Image of website
 Navigation: website navigation involves logical page hierarchy; manipulative clickable
buttons, using bread fragments and ensuring the ‘three click rule’ (give information on
the three clicks).
Figure 5: Navigation of website
 Grid-based layouts: the website contains should be written in boxes, columns, and
sections that gives good looks and balanced the contents which give effective looks of the
website.
15

Figure 6: Grid-based layouts
 Load time: the website should be more effective during the load time so there are
involves CSS or JavaScript code (reduce the HTTP requests), image size optimized,
HTML, CSS, JavaScript code compressed to website speed up during the load time.
 Mobile friendly: Website should be compatible with multiple devices. It access number
of the different device. The website should be mobile friendly that gives a responsive
layout for the website (Woods, 2014).
16

Figure 7: Mobile friendly website
17

P6 Use your design document with appropriate principles, standards, and guidelines
to produce a branded, multipage website supported with real content.
Here, I have designed the website according to website design with principles, standards, and
guidelines. The proposed website contained a number of website pages such as which are shown
in the below:
Website page:
Figure 8: Home Page
Figure 9: contact us form
18

Figure 10: Course details page
19

Figure 11: Professor details page
20

Figure 12: Quiz Page
The reason of quality of content used in the website:
 User satisfaction: Good content give effective information their customer which
enhanced the website speed and gives the user satisfaction that is five website bounce
rate. An e-commerce organization has the first priority to satisfied their customer with the
useful information.
 Consumer Loyalty: High-quality content makes easy access to the website which makes
user again and again visits. Quality content makes Interactions (between user and
organization), Returning Customers due to a better experience, and Conversions (design
the good website).
 Improved search rankings: High-quality content makes website search engine
optimization which improved their performance. It reduces the load time that makes more
visitors to the website. The website is search on the Google through the website content.
 Mobile users: A relevant website content help during the website load. Website load
time is dependent on mobile data speeds, bounce rate, and site traffic. The website should
be accessible to the wireless and wired network (Robinson, 2017).
21

M4
Proposed website is designed according to web designing principle. I have created the
number of pages in the page in the website such as home page, course page, contact page,
profess details page, and quiz page. M4 is successfully achieved in the P6 parts
22

LO4 Create and use a Test Plan to review the performance and design of a
multipage website
P7 Create a suitable Test Plan identifying key performance areas and use it to
review the functionality and performance of your website.
Here, I have explained the Test plan for the proposed website which tests the website UX and UI,
the layout of the website, W3C Validation, Research and conducts Quality Assurance and
searches engine optimization that affects the website performance.
S.no. Test Plan Expected Result Outcome result: Remark
1 Email contains @ There should create
an error message to
enter @in email
An error message invalid
email address.
Successfully
2 All filed does not
fill in the form
There should create
an error message
for form Validation
An error message
occurred because all field
is not filled in the form
Successfully
3 Navigation
between home
and course page
There should be a
proper link between
home and course
page.
The user can go home to
course page and course
page to home page.
Successfully
4 Responsive
website
The website should
be open on the
mobile phone
platform
Website open on the
mobile phone platform
Successfully
5 W3 Validation The website should
be designed
according to w3
The website is
successfully performing
Successfully
23

validation w3 validation.
Figure 13: Email Validation
Figure 14: Form Validation
24

Figure 15: Link to the website page
Figure 16: Responsive Website
25

Figure 17: W3 Validation
M5
Proposed website is a good quality because it gives proper graphics, navigation, and quality
content with the user-friendly website. It implemented through SEO indexing process, W3C
Validation and proper navigation on the multiple website pages. During the web site Quality
Assurance, I have checked workflow and layout of the website. For the proposed website, I have
performed Quality Assurance in the P7 parts.
26

Conclusion
Here, I have designed a website for the ICON College which gives all information about the
college. The website is the custom built website which designed according to user and system
requirements.it gave communication between staff and students. It designed on the HTML, CSS,
PHP, JavaScript, and Jquery web language. In the report, I have explained the DNS server and
their type with domain name creation. Web designs have used web server hardware, software,
and operating system. I have also explained the back end and front end techniques and also gave
comparable between online website creation tools and custom built website. Further, I have
designed the website according to website designing principle. In the end, I have performed the
testing on the website to check performance.
27

References
 HARRISON, D. (2009). The advantages and disadvantages of Content Management
Systems. [online] Professional Web Designer. Available at:
http://daveharrison.net/articles/the-advantages-and-disadvantages-of-content-
management-systems [Accessed 16 Apr. 2018].
 Nani, V. (2013). Web server hardware and software. [online] Slideshare. Available at:
https://www.slideshare.net/VikramNani/web-server-hardware-and-software-18966627
[Accessed 16 Apr. 2018].
 Pcnames. (2013). [online] Available at: http://www.pcnames.com/Articles/Types-of-
DNS-Servers [Accessed 16 Apr. 2018].
 Prime Design Solutions. (2014). The difference between template and custom-built
websites. [online] Available at:
https://www.primedesignsolutions.com/learning-center/difference-template-custom-built-
websites/ [Accessed 16 Apr. 2018].
 Robinson, H. (2017). 4 Reasons Why Monitoring Web Performance Matters. [online]
3ManFactory. Available at: https://3manfactory.co.uk/2017/09/12/4-reasons-why-
monitoring-web-performance-matters/ [Accessed 16 Apr. 2018].
 Slideshare. (2010). Web Server Hardware and Software. [online] Available at:
https://www.slideshare.net/webhostingguy/web-server-hardware-and-software [Accessed
16 Apr. 2018].
 Userpages. (n.d.). 2. [online] Available at:
https://userpages.umbc.edu/~dgorin1/451/OSI7/dcomm/dns.htm [Accessed 16 Apr.
2018].
 Wales, M. (2014). Front-End vs Back-End vs Full Stack Web Developers. [online]
Udacity. Available at: https://blog.udacity.com/2014/12/front-end-vs-back-end-vs-full-
stack-web-developers.html [Accessed 16 Apr. 2018].
 Walker, J. (2017). Complete Megalist: 25 Helpful Tools For Back-End Developers -
Monitis Blog. [online] Monitis Blog. Available at:
http://www.monitis.com/blog/complete-megalist-25-helpful-tools-for-back-end-
developers/ [Accessed 16 Apr. 2018].
28

 Woods, S. (2014). 10 Top Principles of Effective Web Design. [online] Shortie Designs.
Available at: https://shortiedesigns.com/2014/03/10-top-principles-effective-web-design/
[Accessed 16 Apr. 2018].
 Yourbusiness. (2013). List of Different Web Servers. [online] Available at:
https://yourbusiness.azcentral.com/list-different-servers-3142.html [Accessed 16 Apr.
2018].
29