University Web Design Project: Flying Hobbies Website Development

This project showcases the design and development of the 'Flying Hobbies' website, focusing on usability, learnability, and user-friendliness. The website aims to provide information about a toy store specializing in planes, kites, and quadcopters. The project includes a detailed portfolio with site specifications, a flowchart illustrating the website's navigation, and CSS implementation using inline and linked CSS files. The project also addresses user satisfaction, box model conventions, and incorporates visual diagrams to represent the website's structure and interlinkage between pages. Furthermore, it covers CSS implementation, font usage, and the importance of readability and legibility. The website design considers factors like target audience, limiting factors, and design considerations. The project also includes a bibliography of relevant resources.

Running head: WEBPAGE DESIGN
WEBPAGE DESIGN
Name of the Student
Name of the University
Author Note

1WEBPAGE DESIGN
Table of Contents
Portfolio 1.1.....................................................................................................................................2
Portfolio 1.2.....................................................................................................................................3
Page Design.................................................................................................................................3
Visual Diagrams..........................................................................................................................8
Portfolio 1.3.....................................................................................................................................9
Site Specification.........................................................................................................................9
Flowchart.....................................................................................................................................9
Portfolio 1.4...................................................................................................................................11
CSS............................................................................................................................................11
Portfolio 1.6...................................................................................................................................13
Portfolio 1.7...................................................................................................................................14
Box Model Conventions............................................................................................................14
Bibliography..................................................................................................................................15

2WEBPAGE DESIGN
Portfolio 1.1
Site Title: Flying Hobbies.
Developer: WIMP Engineering R&D Consultants.
Focus: To provide details of Toy Planes, Kites and Quad copters shop, is the main focus of this
website. It provides an overall layout of the shop. It also shares the details of shop opening hours.
The website includes products, floor map, timings and contact details of the shop.
Main Elements: The website has the main elements as the products page and shop floor map.
The products are based on flying objects and floor map helps in understanding the shop layout
and which section have which type of products.
Content: Main contents of the websites are based on web pages where three are product pages,
one is home page, one is shop opening details and one is contact us page.
Target Audience: The target audiences for this website are the children and people who like to
play with flying toys, mostly drones and quad copters. Kites are also liked by adults and teens.
The toy planes are specifically for the children.
Design Consideration: Development of the website is the main aim of this design while
considering the learnability, usability and friendliness of the design. It should be a simple and
easy interaction between the user and website. The contents of the website should be easily
findable.
Limiting Factors: The limiting factors of this project is the styling of the contents. Choosing
colors, shape, views etc. are the main parameters of the website that attracts users and makes the

3WEBPAGE DESIGN
interaction user friendly. All the products image have been shown in a box view. This enables
the viewing of the images as same resolution despite of having different resolutions.
Portfolio 1.2
Page Design
Figure 1: Home page
Source: created by author

4WEBPAGE DESIGN
Figure 2: Quad Copters Page
Source: created by author

5WEBPAGE DESIGN
Figure 3: Kites Page
Source: created by author

6WEBPAGE DESIGN
Figure 4: Toy Planes
Source: created by author

7WEBPAGE DESIGN
Figure 5: Shop opening hours Details
Source: created by author

8WEBPAGE DESIGN
Figure 6: Contact Us Page
Source: created by author
Visual Diagrams
The below diagram represents the linkage between the webpages of the flying hobbies website.
The arrows shows the direction of flow from one page to another page. The structure can be
observed as hierarchical and distributed. The contents of the websites are distributed along these
pages. The navigation pages have better connectivity within the pages.

9WEBPAGE DESIGN
Figure 7: Interlink between the pages
Source: created by author
Portfolio 1.3
Site Specification
The main page of the websites shares the floor map of the shop which provides the products such
as quad copters, kites and toy planes. It is developed to provide main product information along
with their description as main purpose of the website. Any visitor can visit the website first,
observe the floor map and products before visiting to the shop.
Flowchart
The below diagram explains the flowchart of the visiting Flying Hobbies website. The process
and activities involve in visiting required navigation through some web pages. The diagram also

10WEBPAGE DESIGN
represents the start page, directions and end page. This structure has been selected as it has
simplified structure. The main page has the image map redirection for the categories of the
product.
Figure 8: Navigation Flow chart of Flying Hobbies

11WEBPAGE DESIGN
Source: created by author
User satisfaction
The user satisfaction for any kind of interaction is the main factor determining the usability and
learnability of a website. The design and structure of the website has been keep simple for use.
From the initial home page to the product page the website gives a simple experience, less crowd
of contents and direct textual and graphic information on the website. The navigation inside the
website is also simple as home page, contact page and shop hours, page can be visited from
anywhere in the websites. However the products page is mainly accessible from the floor map on
the home page. It can be said that the website is highly usable and easy to learn for usage.
Portfolio 1.4
CSS
The CSS3 (Cascading Style Sheets) are implemented using the inline CSS and linking the main
CSS file to all the webpages. Mostly the main CSS is used as it is reused in all the html files. The
inline CSS has been used only for some particular contest in particular pages. Font-Awesome
CSS is used for the fonts and icons of the social media links. The CSS for the rest of the structure
and styling has been done manually. The basic CSS used are background colour, height, width,
position, margin, padding, box views, wrappers etc. Some part of the CSS is shown below in
figure 9.