APRIL 26, 2021

UNIT #10
WEBSITE DEVELOPMENT

AZLAN KHAN
TMUC BAHRIA
SPRINGS RAWALPINDI
Table of Contents
1 Sitemap......................................................................................................................................................... 1
1.1 Normal XML Sitemap:............................................................................................................................. 1
1.2 Video Sitemap:....................................................................................................................................... 1
1.3 News Sitemap:....................................................................................................................................... 1
I1.4 mage Sitemap:...................................................................................................................................... 1
1 Wireframes................................................................................................................................................ 2
3 What are the different types of wireframes?........................................................................................... 2
3.1 Low-fidelity wireframes.......................................................................................................................... 2
3.2 Mid-fidelity wireframes.......................................................................................................................... 2
3.3 High-fidelity wireframes......................................................................................................................... 3
Impact on Site Features and Functionality......................................................................................................... 3
Impact on Design............................................................................................................................................... 3
Website Accessibility.......................................................................................................................................... 3
Contents:........................................................................................................................................................... 4
Objective:........................................................................................................................................................... 4
Hardware Interfaces:......................................................................................................................................... 4
Wireframe for login page:.................................................................................................................................. 4
Purpose:............................................................................................................................................................. 5
Communication:................................................................................................................................................. 6
Choosing of the image and color:....................................................................................................................... 6
Comparison among the designed and actual website:....................................................................................... 6
Contrast among the designed and the actual website:...................................................................................... 6
Evaluation of the design:.................................................................................................................................... 7
technical challenges on the web development:................................................................................................. 7
Security:......................................................................................................................................................... 7
Correct framework selection:........................................................................................................................ 7
Performance:................................................................................................................................................. 7
Design selection:............................................................................................................................................ 8
1 Sitemap
A sitemap is a blueprint of your website that help search engines find, crawl and index all of
your website’s content. Sitemaps also tell search engines which pages on your site are most
important.

There are four main types of sitemaps:

1.1 Normal XML Sitemap:

This by far the most common type of sitemap. It’s usually in the form of an XML Sitemap that links to
different pages on your website.

1.2 Video Sitemap:

Used specifically to help Google understand video content on your page.

1.3 News Sitemap:

Helps Google find content on sites that are approved for Google News.

I1.4 mage Sitemap:

Helps Google find all of the images hosted on your site.
 2 Wireframes
A wireframe is a two-dimensional skeleton of a web page or application. Wireframes provides a clear
overview of page layout, layout, information structure, user flow, functionality, and targeted behavior. Since
the wireframe represents the original idea of the product, the style, color, and drawings are kept to a minimum.
wireframes can be hand-drawn or created digitally, depending on the specific details.

wire frames are used effectively as communication devices; they simplify feedback from users, encourage
discussions with stakeholders, and generate ideas among developers. Performing user testing during
wireframing initially allows the designer to have a reliable response, and to identify key pain points that help
establish and improve the product concept.[ CITATION BYJ21 \l 1033 ]

3 What are the different types of wireframes?

There are three main types of wireframes: low-fidelity wireframes, mid-fidelity wireframes, and
high-fidelity wireframes. The most significant distinguishing factor between these wireframes is
the amount of detail they contain.
Let’s look at these more closely:

3.1 Low-fidelity wireframes

Low fidelity phone frames are a basic representation of a web page and often serve as the
starting point for design. Therefore, they are often powerful, made without the concept of scale,
grid, or pixel accuracy. Low-fidelity phone frames leave out any details that might be a
distraction and include simple images, blocking features, and funny content - such as text to fill
labels and titles.

3.2 Mid-fidelity wireframes

A widely used wireframe. mid-fidelity wireframes include the most accurate presentation of the
structure. While they avoid distractions such as photographs or typing, many details are given in
certain sections, and the features are clearly separated from each other. Varying text instruments
can be used to separate topics and body content.

3.3 High-fidelity wireframes

Finally, high fidelity wireframes promise pixel-specific structures. Where a low-fidelity
wireframe can include pseudo-Latin text fillings with 'X' boxes filled with 'X' to display the
image, reliable high-fidelity wireframes can include original embedded images and
corresponding text content. This additional information makes advanced wireframes reliable for
testing and documenting complex concepts such as menu programs or interactive maps.[ CITATION
BYJ21 \l 1033 ]
4 Impact on Site Features and Functionality
Knowing your audience will help you identify the key features your site should include. You will need to make
sure you include anything that your target audience will want to do on your website. You may have good
dreams of installing all kinds of tools and whistles on your site. But reducing the scope of those features that
might attract your key audience will help you get into the most important aspects of the bat. You can always
expand it later if necessary.

5 Impact on Design
including the audience, your designing will help the designer find the best way to deal with the look and feel
of your new site. You will certainly take a different approach to appealing to middle school students than to
directing corporate donors. This affects a number of things, including:

 Photos
 Colors
 Font size and style
 Layout

6 Website Accessibility.
The federal law requires that all public accommodations should be accessible to anyone with or without a
disability. With billions of people using the internet to transact with government offices, buying all sorts of
stuff online, booking a hotel, flight or restaurant reservation, searching for local businesses, etc., it is also
important that websites are made accessible and navigable to them.

The main purpose of having this website is to keep the record of the patients that have visited the

hospital and then also provides them their information. In the designed website the patients also can

be able to edit their details that they have uploaded in the database.

The created website will have the following contents that will helps users to use the website easily:

6.1 Contents:
1. Must have the UI to enter the patient details

2. User must be able to edit their own details

3. Every field must have the proper validation and data types

6.2 Objective:
1. After the completion of the design, the user can flexibly add the detail information.

2. This will help to make the promotion of the hospital.

3. User can have the detail information from home also.

4. Make the digital and the computerized system.

6.3 Hardware Interfaces:

Processor: Dual core

RAM: 1 GB or above

Hard Disk: 50GB or above

7 Wireframe for login page:

After the home page, if the customers click on the login page, then they are directed to the login

page that contains this stuff. At the initial phase, there is the login picture. Then comes the text

saying the username and then the box to enter the name of the client who wants to login and then

same for the password section too.

 Client Requirements User Requirements
Those who are supposed to sign up at first are the page must have more functions like signup
allowed to login to the page and many more.

The place to enter the password must be hidden User information must be more secure and only
for the characters. the login person can see/authorization must build.

Make the page looks more attractive and The page must be more attractive and user
Dynamic friendly.

8 Principles of the multiple page website creation.

A good website design requires a variety of professionals with expertise in different areas. Their united efforts
need to be put in place when there is a critical decision to be made. Here in this article, we will outline 3 key
principles of good website design that should be considered during website development. These design
principles will definitely help web designers to create awesome graphics and improve website usability.

Here are some of the principles of the multiple page website creation.

a) Purpose

b) Communication

c) Choosing of the image and color

8.1 Purpose:
Website design must be purposeful. Depending on the type of website created the purpose of the website should also
be defined. For example: if you have an online shopping website then the purpose of making an online purchase will
be to sell and market products from the internet and if your website is a newsletter the purpose of making a website
is to provide the user with information and news.

8.2 Communication:
People tend to get information and want to communicate well. Therefore, intentional communication and
understanding between customers and websites should be well understood. This means that a customized website
should be easy to use, simple, relevant to the needs and needs of the customers etc.

8.3 Choosing of the image and color:

The image selection of the website must be done wisely and must contains the information on the image. The
images must not be use of the high quality because it will affect on the speed of the website. [ CITATION Suj \l
1033 ]

10 Contrast among the designed and the actual website:

Actual website controls every code that makes a website tick. It can be divided into two categories - front and back.
The front-end or client-side of the app is the code responsible for determining how a website will display drawings
mocked by the designer. The back-end or server-side of the application is responsible for managing the data within
the database and processing that data at the end of which will be displayed (Yoshitaka Shiotsu March 16, 2020)

11 Technical challenges on the web development:

There are many challenges in website design. The most common type of challenge is the challenge of
completing a project in a timely manner and managing the website budget. Accordingly, there are other
challenges described below:
 11.1 Security
Maintaining security within the system is a challenging approach to the website and the system.
Security is always a challenge, and that also brings development opportunities to the website. Only
in key areas, security should be used such as data security, online transactions such as payment
details, contact details, confidential data etc.

12.2 Correct framework selection:

There are many frameworks designed for better and easier website development. They help increase performance,
provide a library, expand skills and more. From the beginning, the code must be securely developed. To meet the
needs of a website a website should be developed within the appropriate framework.

12.3 Performance:
The challenge for the developer is to maintain the loading speed of the website. This is very important because no
one wants low download time on their website. There is more loading time when they must not have enough traffic
to the website. The full functionality of the website is set out in the first step.

12.4 Design selection:

After all the requirements have been met, it has taken a long time to choose a design that meets the needs of the
hospital and the users. The design was chosen that addresses the needs and provides a good design and look.

Bibliography
BY JAYE HANNAH. ( APRIL 8TH, 2021). https://careerfoundry.com/en/blog/ux-design/

Yoshitaka Shiotsu, March 16, 2020 https://www.upwork.com/resources/web-design-vs-web-development

Sujay Pawar June 26, https://wpastra.com/good-website-design/