Pawa Fitness Website Design Report: WPDD202 - Project Details

This report details the design and development of the Pawa Fitness website, a project aimed at providing information and online services for a fitness gym. The report outlines the project's objectives, which include promoting the business, allowing online registration and payments, and providing health-related information to users. It covers the design process, including sitemap creation, wireframing, sketching, content creation, and visual element selection (colors, typography, images). The implementation phase, involving HTML and CSS coding, is also discussed, along with testing and validation to ensure functionality. The report concludes by emphasizing the understanding gained in web development processes and the use of web languages to create an interactive website.

PAWA FITNESS WEBSITE DESIGN
REPORT
Submitted By

Executive summary
Website have become one of the most powerful marketing tools in the market, and operating
your business without a website may drag your business behind. Having website is of
importance as it can help people find you without necessary visiting your premises. With the
high growth of internet and increase in number of users it is essential to make your business go
live in the online world. For these reasons, we develop a website for the Pawa fitness gym that
will allow our client and potential client access information about our business. The client will
be able to register online at the comfort of their home and even make payment online using
their credit or PayPal account. Usually, the client uses MS Excel or paper and maintains their
records. However it is not possible them to share the data from multiple systems in multi-user
environment, there is lot of duplicate work, and the chance of mistake. When the records are
changed they need to update each and every excel file.

Table of Contents
1. Introduction..............................................................................................................................3
1. Scope........................................................................................................................................3
2. Background and Objectives......................................................................................................3
3. Target user................................................................................................................................3
4. Goals of the website.................................................................................................................3
4.1 To promote a service........................................................................................................3
4.2 Promote a brand...............................................................................................................4
5. Design process..........................................................................................................................4
5.1 Sitemap, Wireframing, and sketching...............................................................................4
6. References................................................................................................................................5

1. Introduction
My website is called Pawa Fitness. The specific purpose of Pawa Fitness website is to provide to
its customer the information about the business. In addition, the use of the website is to be
eye-catching, colorful, recognizable, and simple. It will show the customers the new exclusive
products. The website should also advertise the gym clubs and their occasional special offers.
The development process followed four stages, which include conceptualizing, prove,
implement, and maintain. To conceptualize is to examine the problem at an initial stage (Nason,
2014). At this stage, we examined the purpose, objectives, and the goal of building the website.
After conceptualize, we tried to prove the viability of the proposed site by conducting a website
analysis by use of the SWOT technique. At the implementation stage, the website was designed
and developed (Nason, 2014).
1. Scope
The project is aimed at providing a central place where customers can interact with the pawa
fitness and gather the information they need about the business. It is a website that is
compatible with different browsers that can provide a user-friendly interface that can be
compatible with all mode of screens.
2. Background and Objectives
The Internet has become a modern way of gaining and gathering information, The pawa fitness
website will assist the business to reduce the manual work by digitizing the activities. The main
objective of developing the site is to increase the number of customers who visit the gym.
Another aim was to create awareness to the people the importance of exercising to human
health. Other objectives include;
User will be able to register to the gym without visiting our clubs.
The website will allow the user to make payment of their chosen plan by use of online payment
method.
The website will provide additional information to the users on how to keep a healthy body.
3. Target user
Before designing the site is essential to understand the target audience. The target audience is
people who will use the website (essay, 2017). First, we need to gather information on how the
target audience visits the site and what they look for when visiting the site. Another critical
factor of consideration is the medium they use in accessing the website (Nason, 2014).
The pawa Fitness is aiming both gender ranging from the age of 13 years and above. At this age
it will be advisable in attending the fitness class. The website will seem to attract the audience
ranging from 16 years and above. 99% of attendance at this stage has to access to the internet,
and they have the mobile device they can use.

4. Goals of the website
4.1 To promote a service
One of the primary purposes of developing the site is to improve and enhance the Pawa fitness
services. The website will incorporate the services offered by the business and display them in a
well-laid manner that will make it easy for users to understand.
4.2 Promote a brand
The website will integrate their social media profile to the site. This will create awareness for
users, and it will help the business gain more customers online. According to Kristina Cisnero
(2015), social media icons works well when placed on a footer and at the top of the page where
user can find the first time they visit the site. For this site, the social icons have been placed at
the top of the footer and on the right top side of the pages.
5. Design process
5.1 Sitemap, Wireframing, and sketching
According to (MATT, 2019), the first step in designing is to come up with a sitemap. Sitemaps
give a clear relationship between web pages (MATT, 2019). The sitemap builds the foundation
of a website.
After clearly, defining the sitemap, the next step was to come up with design inspiration. The
inspiration will help in building the wireframes of the site. Sketching the ideas from a different
inspiration was done in creating the wireframes.
Content creation
Content is the key in each and every website. Identifying the critical content that will convey
the message to the target audience is vital in website design. For the purpose of this site,
information was gathered from different sources that offer the same services.
Visual elements
The final step in designing is coming up with a high fidelity design. This includes choosing the
right colors, typography, and images to use on a website.
Colors: The primary colors used in the design and developing of a website.
E64D24 707070

The logo is the brand of a company or an organization. The logo contains the primary colors of
the website. The logo is made up of text and a graphical representation. The text depict the
actual name of the site while the graphics portray the facilities found in the gym.
Typography
Typography is the selection and use of text fonts in writing (Warren & PreeceJames, 2017). In
this site we limited the use of different font in order to create a consistent in the website. We
used 3 different google fonts to represent heading and paragraph texts. The used fonts was;
 Roboto
 Allerta
Images
Images play an essential part in web designing. The use of high-quality images gives a website a
professional look and feel as well they convey a message and help build the trust of the users
(MATT, 2019).
On this site we have used images to create a visual look of the website and to pass information
to the users. All images used were obtained from the google image, and they are of good
quality.
Implementation
One of the final steps in website design is the actual coding. The coding was done on a sublime
text editor. Html and CSS were used to accomplish the coding part.
The development started with a home page then followed by other linked page. Navigation was
used to connect the pages together. The navigation was placed at the top of each page to allow
smooth navigation of web pages.
Each page on the site contained four-section, Header, banner, main body and the footer. The
site used the same structure to maintain a consistent through the pages.
Finally the website was tested and validated to ensure there were no broken links and each
page was working as intended. The code was validated to make sure tags were well written and
the code meet the w3c standards.
Conclusion
The primary purpose of this project is to create an understanding of the web development
process and to the use of web language to create an iteractive website. The project has helped
me to created firm understanding of web technologies.
6. References

essay, u., 2017. website design report. [Online]
Available at: https://www.ukessays.com/essays/information-technology/website-design-
report-9971.php
[Accessed 23 September 2019].
MATT, M., 2019. The web design process in 7 simple steps. [Online]
Available at: https://webflow.com/blog/the-web-design-process-in-7-simple-steps
[Accessed 23 Septemner 2019].
Nason, B., 2014. Website Analysis, Brighton: Institute of Development Studies.
Warren, E. & PreeceJames, M. W., 2017. Typography. [Online]
Available at: https://www.britannica.com/technology/typography
[Accessed 23 September 2019].