Principles of Website Design: A Comprehensive Guide

Desklib provides past papers and solved assignments for students. This report explores website design principles.

Principles of website design
The principles of website design are as follows:
1. Purpose: The needs of the user should comply in the website. All the specifications are
adhered on website. This should be the first goal of the website. The requirements should
be clear to make an effective design.
2. Communication: The information provided is in a clear and precise way. All tactics are
used with different type of heading.
3. Colors: The color palate is decided according to specification and user requirements. The
look of website is maintained up to specification (Shortie Designs, 2014).
4. Images: The images which are specified are used. The images describe the product. To
make website effective images are used.
5. Navigation: The navigation capabilities is given at all pages.
6. Grid-based Layouts: To section different content on web page. Different div tags are used
for that.
7. Pattern design is based on the F design principle: The design is done in F design pattern
to catch the attention of different users. Th computer screen is scanned by humans in F
way.
8. Consistent website: The colors are chosen as per the consistent way to maintain feel and
look of the website.
9. Readability and Typography: The information which is desired is provided to the user.
The readability of content is ensured on the website (Pawar, 2018).
10. Simple: The design is done in a simple way. Over-designing may increase load time and
complexity.
11.

Brief description to different terminologies.
These are as follows:
TERM BRIEF DESCRIPTION APPLICATION TO CSS
Hypertext transfer protocol HTTP is required for
transmission and transmit
information over the web.
There are different rules and
services prescribed in it. This
is one of the methods for
communication over the web
(Pickaweb., 2016).
There is no direct linkage
with that. The website can be
hosted and HTTP is required
for that. The CSS is applied
to different tags, classes, and
Id.
Hypertext markup
language
HTML is required to create
the structure of the webpage.
To organize and format
different pages Hyper text
markup language is used.
Markup lets to know images
and content on a web page
(Allen and Hanlon, 2019).
There are different tags
present in HTML and on to
that CSS is applied. To make
a particular structure beautiful
and appealing CSS is used
with help of different classes
and id.
Extensible Hypertext
Markup Language.
This was developed to cover
the gap between XML and
Hypertext markup language.
This is more specific than
HTTP. Through this structure
can be defined and can be run
through different networks
(Sitechecker, 2017).
Through this CSS can be used
with any XML supported
language. The space to apply
CSS is also extended.

CSS Rules and how CSS affect styling and layout.
There are 3 different rules of CSS which are explained in the table below which is as follows:
RULE
NUMBER
CSS
RULE
EXPLANATION
1. Selector
rule
The CSS is applied to different tags. The selector here is nothing
but selectors. Here different selectors are used as h3, h2, etc. Here
CSS is applied to them.
Figure 1: Selector CSS
2. Classes The class name is given to different tags and then CSS is applied.
In this also, CSS is applied to different classes. This can be seen in
below figure.

Figure 2: CSS applied to classes
3. ID Css is used to ID. This can be seen in the below figure.

Figure 3: CSS applied to ID.
4. Internal
CSS
This can be used inside one document. This CSS will be applied to
that particular page only. This is enclosed in the head section. The
CSS is enclosed in style tag (Rtbwizards.com. ,2019).
<style>
</style>
5. Inline CSS Inline CSS is used when there is a need to apply that particular
style to one line or that section only. The attribute style is used for
that.
Example: <div style=” background-color: grey;”
6. External
CSS
External CSS is used when there is need to apply different types of
styles in all webpages. The linking is specified. The sperate page
for CSS is used. Here, a1site.css is used. The linking can be seen in
the below figure.

Figure 4: Linking is done with a1site.css.

4. Screenshots of website
Home page
Google Chrome
Figure 5: Home page in google chrome
Internet Explorer
Figure 6: Home page in internet explorer

Products Page
Google Chrome
Figure 7: Products page in google chrome
Internet Explorer

Figure 8: Products page in internet explorer 1
Figure 9: Products page in internet explorer 2

Hardware page
Google Chrome
Figure 10: Hardware page in google chrome
Internet Explorer

Figure 11: Hardware page in internet explorer 1
Figure 12: Hardware page in internet explorer 2

Software page
Google Chrome
Figure 13: Software page in google chrome
Internet Explorer