Website Design Report: RobotExpo Exhibition Website

Desklib provides past papers and solved assignments. This report details the design of a user-friendly website for a robot exhibition.

Title: RobotExpo Exhibition
Developer: My_name1
Focus:
This website will be an exhibition website which has an exhibition of different Robots and
models will be presented on the website to give an overview of an exhibition. Website will
have a floor plan and different pages for robots like Domestic Robots, Military robots,
Educational Robots and two more. Each page will be separated for each robot exhibition and
in a separate page timings and entrance fees will be shown on the website.
Table of Content

s
Introduction................................................................................................................................3
Planning of the website:.............................................................................................................4
Main elements of Website:.....................................................................................................4
Content...................................................................................................................................4
Target Audience.....................................................................................................................4
Design Considerations...........................................................................................................4
Limiting Factors.....................................................................................................................4
1.2...............................................................................................................................................5
Mockup diagram for the website............................................................................................5
Visualizing the Website.........................................................................................................8
1.3...............................................................................................................................................9
Main elements of Website:.....................................................................................................9
Content...................................................................................................................................9
Target Audience.....................................................................................................................9
Design Considerations...........................................................................................................9
Limiting Factors.....................................................................................................................9
1.4.............................................................................................................................................10
1.5.............................................................................................................................................11
1.6.............................................................................................................................................12
Conclusion................................................................................................................................13
References................................................................................................................................14
List Of Figures
Figure 1 Home Page...................................................................................................................6
Figure 2 Domestic Robot Page..................................................................................................6

Figure 3 Military robots page.....................................................................................................7
Figure 4 Educational Robots Page.............................................................................................7
Figure 5 Industry Robots Page...................................................................................................8
Figure 6 Timings Page...............................................................................................................8
Figure 7 Organisation diagram...................................................................................................9
Figure 8 Text styles used in body and heading........................................................................12
Figure 9 Navigation bar...........................................................................................................12
Figure 10 Text legibility...........................................................................................................13
Figure 11 CSS box model........................................................................................................13
Introduction
In this report website requirements will be discussed according to the client's requirement and
the requirements of the client and to make it more interactive HTML5 and CSS3 is being
used. Design of the website is done accordingly to make it more user-friendly. The floor plan
will have been displayed in home page and next pages will be selected according to various
robots categories.

Planning of the website:
Main elements of Website:
 Attractive
 Easy to use
 Floor plan of the exhibition which will provide a brief overview
 Images for each category of Robot
 A different page for Timings and entrance fees
 Hover image for each image used for displaying robots to make it more attractive.
Content
Robot Expo will display the various robots of various categories on their website. Each page
will be defined for each category for the robot to make it more user-friendly and the user can
understand the various products have been available to make it more effective. The separate
page or home page will have a floor plan of the exhibition which is being used to proceed
further on the website. Another page will be given for timings and the list of information is
being provided with each robot (Di Vita, S., 2017).
Target Audience
This website will have a target audience of students or parents who have small kids. This
would help them to decide to visit the exhibition and eye-catchy and it can be helpful for
people who want to explore new things and will make them happy after visiting the
exhibition.
Design Considerations
Design is being done by taking care of users who are going to visit the website. Most
important target audience is students and this website is being built on their perspective and
their likings. This will be a dark themed website with some cool background and have
various images related to robot and information is being provided on every page (Miranda, R.
and Budiwirman, B., 2019).
Limiting Factors
Target Audience:

If the design is not being liked by the target audience, then this would become a limitation for
the website.
Design:
If the design of the website is not according to the requirement of the student or main
audience then it would be a limitation.

1.2
Mockup diagram for the website
Figure 1 Home Page
This is the home page of the website in which link is being provided in the URL bar of the
browser and title is being provided at the top. In the above image Logo and name of the
exhibition will be available in all the web pages. After that image of the floor plan is being
displayed and the image has some clickable content which can be used for navigation
between the web pages.
Figure 2 Domestic Robot Page

This page will be for domestic robots which have logo and text for the website at the header
of the web page and navigation bar will be included for easy navigation between within the
web pages and images of different robots are being displayed in the main body and some
brief information regarding images will be provided.
Figure 3 Military robots page
This page will be about military robots which have logo and text for the website at the header
of the web page and navigation bar visiting other web pages conveniently and images of
different military robots are being displayed in the main body and some brief information
regarding images will be provided.
Figure 4 Educational Robots Page

This page will be about Educational robots which have logo and text for the website at the
header of the web page and navigation bar and images of different educational robots are
being displayed in the main body and some brief information about images.
Figure 5 Industry Robots Page
This page will be about Educational robots which have logo and text for the website at the
header of the web page and navigation bar and images of different Industry robots is being
displayed in the main body and some brief information about images.
Figure 6 Timings Page
In this page Timings of the exhibition is being listed and the same logo and navigation bar
will be followed in this page as well.

Visualizing the Website
Figure 7 Organisation diagram
In this diagram all the website pages will be shown and their functionalities and data which
should be contained by them. In the above image Home, the page will have connectivity with
each page in floor plan excluding of the timing page. So it will be connected to each page
with a navigation bar on each page. After that, every page will have some images in it which
will be used to demonstrate in the exhibition.

1.3
Main elements of Website:
 Attractive
 Easy to use
 Floor plan of the exhibition which will provide a brief overview
 Images for each category of Robot
 A different page for Timings and entrance fees
 Hover image for each image used for displaying robots to make it more attractive.
Content
Robot Expo will display the various robots of various categories on their website. Each page
will be defined for each category for the robot to make it more user-friendly and the user can
understand the various products have been available to make it more effective. The separate
page or home page will have a floor plan of the exhibition which is being used to proceed
further on the website. Another page will be given for timings and the list of information is
being provided with each robot. Separate pages will be defined for each category of robots
and after that, each image will have its own dummy description according to the box
conventions of the HTML and CSS (Alawar, M.W. and Naser, S.S.A., 2017).
Target Audience
This website will have a target audience of students or parents who have small kids. This
would help them to decide to visit the exhibition and eye-catchy and it can be helpful for
people who want to explore new things and will make them happy after visiting the
exhibition.
Design Considerations
Design is being done by taking care of users who are going to visit the website. Most
important target audience is students and this website is being built on their perspective and
their likings. This will be a dark themed website with some cool background and have
various images related to robot and information is being provided on every page. In every
page, CSS is being used to make it more interactive and attractive in context with the target
audience. Design of the website is done accordingly to make it more user-friendly. The floor

plan will have been displayed in home page and next pages will be selected according to
various robots categories (Pengnate, S.F. and Sarathy, R., 2017).
Limiting Factors
Target Audience:
If the design is not being liked by the target audience, then this would become a limitation for
the website.
Design:
If the design of the website is not according to the requirement of the student or main
audience then it would be a limitation.
1.4
Table 1 CSS Class
# Class Name Description How it is used
1. Body In this CSS is being used in tags of
HTML. This is a body tag in which
CSS is being implied on the whole
body of HTML.
It is being used for
background color and
including images in
the background and
to change the font and
text style of the body
in HTML.
2. H1 This is header 1 tag and it is being
used to describe the title of the
website.
CSS is used to change
the font style and
color of the text
which is under header
1
3. Text This is a user-defined class in CSS
which will be named according to the
user naming convention which should
be convenient and understandable as
well.
This will be used
where text description
is being defined and it
can be used to make
the text more

attractive
4. Img This class is user-defined and used
according to make the website more
attractive.
This class is being
used to make image
resize and according
to the screen of the
web page.
5. Navigation This will be a user-defined class which
will be used to decorate text used as a
navigation bar.
This class will be
used in the navigation
bar and have a more
decorative navigation
bar which will make
the website more
attractive and user-
friendly.
6. Footer This is a predefined tag of HTML
which is being used for decorating
footer of the website.
This tag will be
helpful to make
footer more attractive
to the website.