Web Design Report: Car Rental System - [Course Name], University

This report details the web design process for a car rental system. It begins with an overview of wireframe models representing the structure and layout of the website's key pages, including the cars, contact, home, login, and registration pages. The report then discusses the color scheme, primarily blue with secondary colors, and the use of the 'San-Serif' font. The chosen layout is an F-layout, considered suitable for business websites. The report highlights the changes made between the initial design and implementation, such as the addition of input fields and secondary color schemes. Website testing was conducted using Chrome and Mozilla Firefox, and the HTML and CSS files were validated using W3 standards. The report includes HTML and CSS code snippets, along with website screenshots. Finally, the report provides a bibliography of relevant resources.

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

1WEBSITE DESIGN
Table of Contents
Wireframe Model ............................................................................................................................ 2
Color scheme and Fonts .................................................................................................................. 6
Choice of Layout............................................................................................................................. 6
Changes between Initial design and Implementation ..................................................................... 6
Testing of Website .......................................................................................................................... 6
HTML ......................................................................................................................................... 7
CSS ........................................................................................................................................... 10
Website screenshots .................................................................................................................. 11
Bibliography ................................................................................................................................. 15

2WEBSITE DESIGN
Wireframe Model
Wireframe models represent the Structure, layout and the content of a web page design. Below
models shows the five pages developed for the Car rental system of BoomCar.
Figure 1: cars page wireframe model
Source: created by author

3WEBSITE DESIGN
Figure 2: Contact page wireframe model
Source: created by author

4WEBSITE DESIGN
Figure 3: Home page wireframe model
Source: created by author

5WEBSITE DESIGN
Figure 4: Login page wireframe model
Source: created by author
Figure 3: Register page wireframe model
Source: created by author

6WEBSITE DESIGN
Color scheme and Fonts
Color scheme for the website design is picked using the color picker feature of HTMLS 5.
Primary color of the website is mainly blue and secondary colors are, purple, black, white, orange
etc. are used when it was required. Fonts used for the text, labels, inputs and heading is ‘San-Serif’.
Choice of Layout
The choice of layout for the website design is F-layout. This layout is known for scanning behavior
in which the eyes scan across the page in an ‘F’ letter pattern. It is said to be suitable for business
websites. It feels natural to the user as the instinctive nature of humans to see top to bottom and
left to right.
Changes between Initial design and Implementation
The changes between the initial design and implementation is not much except some input
fields and labels in sign up page, including secondary color scheme for the website. The repeating
of password in the sign up page adds a reassurance factor for the factor. Also the fields are set to
‘Required’ in each of the forms used in the website. Secondary color schemes have been changed
according to the suitability.
Testing of Website
Testing of the website has been done using Chrome and Mozilla Firefox browser to check the
compatibility of the design. Apart from that, the HTML and CSS files have been tested using W3
standard validators on their website. The links are:

7WEBSITE DESIGN
HTML
https://validator.w3.org/

8WEBSITE DESIGN

9WEBSITE DESIGN

10WEBSITE DESIGN
CSS
https://jigsaw.w3.org/css-validator/

11WEBSITE DESIGN
Website screenshots

12WEBSITE DESIGN

13WEBSITE DESIGN

14WEBSITE DESIGN

15WEBSITE DESIGN
Bibliography
Connolly, R., 2015. Fundamentals of web development. Pearson Education.
Felke-Morris, T., 2014. Web development and design foundations with HTML5. Addison-Wesley
Professional.