Research on Web Designing 1

Research on Web Designing

Upasana Bhasin

Web Site Design & Technology, 4004.737.71

Professor Mark Reynolds

February 7, 2010
 Research on Web Designing 2
Research on Web Designing

Before the advent of the World Wide Web, companies used to market their

business with the help of newspaper articles, brochures, pamphlets, commercial

advertisements etc. This process of marketing was time-consuming and expensive. Now-

a-days, companies use websites for marketing their business to millions of people all

around the world. “A website is a collection of pages that provide information anywhere

in the world through an interconnected system of computer networks.” (Lawrence &

Tavakol, 2007, p.63). Since software’s are easily available, any person with computer

skills can develop a website for personal interests, business etc. Websites play a

significant role in the development and marketing of the business. They help in the

promotion of the business, provide customer feedback, increase marketing opportunities

by providing information about the customer’s shopping patterns, improve

communication with the customers etc. A website consists of a number of elements such

as images, videos, sound, animation and other digital assets. Each asset has its own

aesthetic property such as color, shape, size etc. To make the website aesthetically strong

it is necessary that each element is properly placed in the website. It is of utmost

importance to have information available in a presentable manner. If the website is

visually appealing the user will stay longer on the website. “It is the user’s satisfaction

resulting from their positive experiences and emotional responses that contributes to the

aesthetic value of a website”. (Lawrence & Tavakol, 2007)

In order to make a good website, a number of parameters must be considered such as:

Contrast: Contrast helps in organizing information. It is necessary to use contrast in the

headings, titles, subheadings, navigation bar etc in order to make the website more eye-
 Research on Web Designing 3
catching. Contrast can be added with colors, shapes, textures, images, font etc. Contrast

with color means adding the right amount of color in order to obtain an effective contrast.

Contrast with font can be added in the website by using different looking font styles and

font sizes. Similar looking fonts make it difficult for the user to reader and create

confusion. Contrast with images can be obtained by placing a large image next to smaller

elements. (Houle, 2010)

Repetition: Repeating some aspects of the design in the website helps in creating a

consistent look. Repetition can be obtained by using the same font, design, format,

shapes, images etc throughout the website. It helps in letting the user know where they

are. It helps in unifying the entire website and making it look more appealing. Repetition

of elements in the header and footer helps in providing a consistent look. (Houle, 2010)

Proximity: This principle states that similar items should be grouped together. Even if

they are not placed in proximity, they should still seem to be close to each other.

Grouping of objects can be obtained with the help of space or another object. (Houle,

2010)

Alignment: All the objects in the website should be placed in visual connection with

other objects. It helps in giving a professional look to the website. It helps in connecting

all the objects on the website. It gives a clean and ordered look to the website. (Houle,

2010)

Target Audience: It is very important to know your target audience and provide them

with what they are looking for. The most important thing is to describe the goal of the

website. When developing a website, it is very important to keep your audience in mind.

The website should inform the user what the website is offering and how they can benefit
 Research on Web Designing 4
from it. Even if the user scans the websites for few seconds, they must know the purpose

of the website and how they can benefit from staying. (Porta, 2009)

Usability: It is one of the main components that must be considered when developing a

website. Usability can be defined with the help of different quality components such as

learn-ability, efficiency, errors, satisfaction, utility etc. Usability plays a key role in the

endurance of a website. If a website of a company does not state the goal of the company

clearly or the user is unable to use the website for some reason, the user will depart from

the site and by no means become a customer of the company. (Nielson, 2003)

Navigation: The navigation bar should be consistent on all pages. It should ideally be on

the top of the webpage. Information should not be more than three clicks away from the

homepage. The navigation bar should be simple so that the user knows where to click to

get particular information. As the attention span of the user is of few seconds, it is very

important that he easily finds what he is looking for in the website. The navigation bar

should be consistent on all the pages of the website and should link to all the important

pages. (“User-Friendly Navigation”, 2007)

Content: It is necessary that the website provides high quality content which satisfies the

requirements of the target audience. The content should be unique, fresh and up to date.

The font-size and font-style of the content should be easy to read. If the page is enlarged

then the text should also get enlarged. The color of the font should not hurt the user’s

eyes. If there is a lot of information on the website, a search box should be present on all

the pages of the website to help users find the required information. The content should

not be outdated. If the users are satisfied with what is written on the website, they will

trust and have confidence in using that website. (“Content Presentation”, 2010)
 Research on Web Designing 5
Browser Compatibility: The website should be cross/browser compatible. Some

websites look different on different browsers. It is necessary to ensure that the website

displays the right information in the same fashion on all the web browsers. (“Cross-

platform/browser compatibility”, 2007)

White space: It is necessary that the user has quick and easy access to information.

White space makes it easy for the users to navigate through the website. Instead of

loading the website with complex designs, it is better to have a simple and attractive

website. (Galliford, 2008)

Speed: There are a number of factors that affect the loading time of a website such as

coding, graphics, bandwidth allotted to the website, server speed etc. All these factors

increase the loading time of the website. A website will lose visitors if it takes time to

upload. (Porta, 2009)

Functionality: It is important that all the links and components such as hyperlinks,

contact forms, site search should work properly. Broken links and components will leave

the user frustrated. The design should not distract the user away from the website.

(“Functionality”, 2007)

Consistency: It is necessary that consistency is maintained throughout the website. The

page design, navigation bar, header, footer must be consistent on all pages of the web. A

slight change in color, font and images is alright but the overall look and feel of the

website should be constant. It helps the user to know where they are. (Galliford, 2008)

Multimedia: There are few websites in which the user has to see a series of animated

videos and images in order to access information. This can leave the user frustrated

especially if there is no option to skip that page. Including sound in the website is not a
 Research on Web Designing 6
good idea. Animated images and sound increase the loading time of the website. If the

website uses videos and sound to convey information then, text equivalent to the content

should also be provided. (Morris, 2010)

Search Engine Optimization: A website is useless if one cannot find it. To obtain

effective search engine optimization, it is very important to find all the important

keywords that the user will search to find a product or service the website offers. The

keywords should be used in headings, titles, header, content, links etc of the website.

Besides this, HTML should be used for coding. For navigational items, JavaScript, Flash

should not be used. (Porta, 2009)

Look and Feel: A website should be simple and attractive. Using animated images and

sound can be distracting. Instead of distracting the visitors from the website, the design of

the website should convey the goal of the website and how it can benefit them. This will

help in attracting users to visit the website. Along with this, the colors, font, images,

graphics of all the web pages should be consistent. (Galliford, 2008)

It is not possible to implement all these components when developing a website. In order

to better understand the use of these components, let’s consider six websites and analyze

them on the basis of these parameters. We will rate each parameter based on the

following grading system.

Points:

1 = Very poorly executed

2 = Below Average

3 = Good/Average

4 = Above Average
 Research on Web Designing 7
5 = Excellent

Website 1: www.emirates.com

Img 1.1

Consider the above website. It is a website of an international airline. Along with travel

tickets, they also make reservations in certain hotels and resorts. Their target audiences

are people above 18 years of age. The goal of this website is to attract visitors to book

airline tickets, hotels and resorts. This website displays information about the airlines and

the owners, features of the aircraft, various services they provide, different destination it

flies to, time tables, flight status, ticket prices, route maps and special offers. Whenever a

user flies with this airline, he will get reward points on his membership card with which

he will be offered discounts, special offers etc. It also allows users to become a member
 Research on Web Designing 8
of this website so that they can constantly be updated about the latest offers, discounts

etc.

Img 1.2

This is an example of a good website. The global navigation is constant. The website has

a search bar for users to get the required information. Similar components are placed in

closed to each other. White space is used to separate components. This makes it easy fr

the user to find information. The website very clearly defines its goals; so that the user

visits this website he exactly knows what this website is all about. The overall look and

feel of the entire website is consistent. The content is well-written and readable. It is a

simple and attractive website. Since the website does not have any flashy images and

graphics, the web pages download fast. All the links work properly and efficiently. It has

a header and footer. The website is user-friendly. Important information is easily

 Research on Web Designing 9
accessible. The website is browser compatible. Consistency is maintained n terms of

colors, font and design. (Refer Img 1.1 and 1.2)

Based on the parameters stated above, we will rate this website.

ATTRBUTES POINTS
Contrast 4
Repetition 3
Proximity 4
Alignment 4
Target Audience 4
Usability 4
Navigation 4
Content 4
Browser Compatible 5
White Space 4
Speed 4
Functionality 4
Consistency 4
Multimedia 4
Search Engine Optimization 4
Look and Feel 5
TOTAL 65/100

Website 2: www.blackberry.com
 Research on Web Designing 1

Img 2.1

Consider the above website. It is an official blackberry website. It deals with phones and

related softwares. This website gives information about the developers of this company,

all the blackberry phones, related softwares, countries in which these phones are

available, company’s blog, sitemap, site index, latest news related to blackberry, their

upcoming events and releases and the awards which the company has won. They provide

solutions to different problems which a user can face when using these phones. They

have an online help and support system which helps them solve any difficulty faced by

the users. They have a feedback form and contact us link which will allow the users to

communicate with the company employee. (Refer Img 2.1 and 2.2)
 Research on Web Designing 1

Img 2.2

This is an example of a good website. The global navigation is constant. The website has

a search bar for users to get the required information. Similar components are placed in

closed to each other. White space is used to separate components. All the components are

aligned properly. This makes it easy for the user to find information. The website very

clearly defines its goals; so that when the user visits this website he exactly knows what

this website is all about. The overall look and feel of the entire website is consistent. The

website has an HTML form so that the users can communicate with the company

employees. The content is well-written and readable. It is a simple and attractive website.

Since the website does not have any flashy images and graphics, the web pages download

fast. All the links work properly and efficiently. The header and footer are consistent on
 Research on Web Designing 1
all web pages. The website is user-friendly. Important information is easily accessible.

The website is browser compatible. Consistency is maintained n terms of colors, font and

design. (Refer Img 2.1 and 2.2)

Based on the parameters stated above, we will rate this website.

ATTRIBUTES POINTS
Contrast 4
Repetition 4
Proximity 5
Alignment 5
Target Audience 5
Usability 5
Navigation 4
Content 4
Browser Compatible 5

White Space 5
Speed 5
Functionality 4
Consistency 4
Multimedia 4
Search Engine Optimization 5
Look and Feel 5
TOTAL 73/80

Website 3:

www.jimcarrey.com
 Research on Web Designing 1

Img3.1

Consider the website above. (Refer Img3.1). It is an official website of Jim Carrey, a

stand-up comedian and a Hollywood Actor. The purpose of this website is to update his

fans about his biography, latest movies, family and friends, latest movies and television

shows. This website is for all age groups who like him and want to keep a track of his

life. This website is made with the help of CSS, JavaScript, SFX and HQ. Most of the

content on this website is in the form of videos.

 Research on Web Designing 1

Img3.2

This is an example of an average website. First of all, the website consists of graphic rich

pages which increase the loading time of the website. Each page takes more than 10

seconds to load which leaves the users frustrated. It is basically a very confusing site as it

has moving images and very little content. It does not contain white space. Most of the

content is in form of videos or pictures. It also consists of links which are in the form of

images. So when the user clicks on these images, he will not sure on which page will he

be directed to? This website also contains sound. So if someone does not have speakers

or headphones, he cannot gain much information from this website. The global

navigation is at the bottom of the homepage. To access the navigation bar, the user has to

scroll down which leaves a bad impact on the user. It does not have a header and footer.

The local navigation links to other websites, moving the audience away from the content.
 Research on Web Designing 1
The local navigation in this site is embedded in images which are difficult to find. The

font-style and color of the local navigation are not good. The website is not user-friendly.

The look and feel of the website is not constant. (Refer Img3.1 and Img3.2)

Based on the parameters stated above, we will rate this website.

ATTRIBUTES POINTS
Contrast 3
Repetition 1
Proximity 2
Alignment 2
Target Audience 4
Usability 2
Navigation 3
Content 3
Browser Compatible 4
White Space 1
Speed 2
Functionality 3
Consistency 3
Multimedia 2
Search Engine Optimization 4
Look and Feel 3
TOTAL 42/80
 Research on Web Designing 1
Website 4: www.manducatis.com

Img 4.1

Consider the website above. (Refer Img 4.1) This is a website of an Italian restaurant in

New York called “Manducatis”. This site is mainly for people of any age-group who like

Italian food. The purpose of this website is to attract people to visit their restaurant after

seeing their website. In the website they have explained the origin of the restaurant and

its owners, the menu and wines offered in the restaurant, the directions to the restaurant,

images and a few articles on it.

This website is an example of a bad website. When the user visits this website, he would

not know where to click because there is no navigation bar, header and footer. There is

only one link to click on the web page which is in the form of an image in the form of a

“door” which when clicked directs the user to the home page of the website. This is a
 Research on Web Designing 1
very confusing website and will surely have a bad impact on the users. The website has

moving images which are not placed properly.

 Research on Web Designing 1
Img 4.2

The images are not resized to fit the frame properly. (Refer Img4.2) Both global and

navigation bar have hyperlinks which do not redirect to other pages. Some of the links are

broken. Most of the links are in the form of images, so the user will not know what link

will give what information about the website. There is no consistency, proximity,

repetition and alignment in the website. There is no HTML form for the user to contact

the restaurant. The website contains very little content. Most of the content provided is

either outdated or of no use. However good the restaurant is, it will lose customers once
ATTRIBUTES POINTS
Contrast 1 they visit this

Repetition 1 website. The look

Proximity 1
Alignment 1 and feel of the
Target Audience 2
Usability 2 website is not
Navigation 2
Content 2 constant. (Refer Img
Browser Compatible 3
White Space 1 4.1 and Img 4.2)
Speed 2
Functionality 2
Consistency 1
Multimedia 2 Based on the
Search Engine Optimization 3
Look and Feel 1 parameters stated
TOTAL 27/80
above, we will rate

this website:
 Research on Web Designing 1

Website 5: www.lingscars.com
 Research on Web Designing 2

Img 5.1

Consider the website above. It is a website of a car renting company in Scotland, UK.

The purpose oft his website is to attract people to rent automobiles. The website gives

details of the owner, each car available for renting along with the prices. Along with

cars, they provide also vans and bikes for renting. People above 18years of age who want

to rent or lease a vehicle will visit this website. The user can rent automobiles online too.

Along with this, the user can see what is currently happening in the office, blogs, news,

fun stuff, can chat with the owner and see the location of the people who have rented cars

from this company. The user can also calculate the average cost of renting a particular

automobile.

This website is an example of a bad website. There are a lot of flashy images ands

graphics in the website which will hurt the user’s eyes. The global navigation bar is very
 Research on Web Designing 2
big. The website contains a lot of unwanted, difficult to read content. It is not a well

planned website. There is no proximity, white space, consistency, alignment in this

website. It is a not a user-friendly website. The side navigation bar is so long that it

continues even after the footer ends. Instead of attracting customers, this website will

leave a bad impact of the users. (Refer Img 5.1)

Based on the parameters stated above, we will rate this website.

ATTRIBUTES POINTS
Contrast 1
Repetition 1
Proximity 1
Alignment 1
Target Audience 2
Usability 1
Navigation 1
Content 2
Browser Compatibility 3
White Space 1
Speed 2
Functionality 1
Consistency 1
Multimedia 1
Search Engine Optimization 3
Look and Feel 2
TOTAL 24/80

Website 6: www.arngren.net
 Research on Web Designing 2

Img 6.1

Consider the above website. (Refer Img 6.1) This is basically a website for online

shopping of automobiles and electronics. It gives details description of all the devices and

automobiles available in detail. The purpose of this website is to attract users to shop

here. People who want to buy electronics or automobiles will visit this website.

This website is basically an example of a bad website. It does have a global and local

navigation bar. There are a lot of images in this website which will hurt the user’s eyes.

All the content is placed in blocks which make it difficult to read. There are grammatical

errors in the content. The website contains a lot of unwanted content. It is not a well

planned website. There is no proximity, white space, consistency, alignment in this

website. It is a not a user-friendly website. Instead of attracting customers, this website

will leave a bad impact of the users.

 Research on Web Designing 2
Based on the parameters stated above, we will rate this website.

ATTRIBUTES POINTS
Contrast 1
Repetition 1
Proximity 1
Alignment 1
Target Audience 2
Usability 1
Navigation 1
Content 2
Browser Compatible 3
White Space 1
Speed 2
Functionality 1
Consistency 1
Multimedia 1
Search Engine Optimization 2
Look and Feel 2
TOTAL 23/80
 Research on Web Designing 2
COMPARATIVE ANALYSIS OF THE ABOVE WEBSITES:

DESCRIPTION WEBSITE: 1 WEBSITE: 2 WEBSITE: 3 WEBSITE: 4 WEBSITE: 5 WEBSITE: 6

Contrast Good contrast Good contrast The contrast There is no There is no There is no
with images. with colors of colors and contrast. contrast. contrast.
and font-style. font is
average.
Repetition Repetition of Repetition of Repetition of There is no There is no There is no
design format, design format header, footer repetition. repetition. repetition.
header, footer and font-style. and font-style.
and font-style.
Proximity Similar objects Similar Similar Similar objects Similar Similar
are placed in objects are objects are are not placed objects are not objects are not
closed placed in placed in in close placed in placed in close
proximity. closed close proximity. close proximity.
proximity. proximity. proximity.
Alignment All the objects All the objects There is no There is no There is no There is no
are well are well alignment alignment. alignment. alignment.
connected. The connected. between
website has a The website objects.
professional has a
look. professional
look.
Target Audience Target Target People of all People of all People above People who
audiences are audiences are age-groups. age groups who 18years of age want to buy
people above 18 people above like Italian who want to electronics or
years of age. 18 years of food. rent or lease a automobiles
age. vehicle will will visit this
visit this website.
website.
Usability The website is The website is The website is The website is The website is The website is
user-friendly. user-friendly not user- not user- not user- not user-
friendly. friendly. friendly. friendly.
Navigation The global The global The global The global The global There is no
navigation is navigation is navigation is navigation bar navigation bar global or local
constant. constant. at the bottom is not constant. is constant but navigation
Important Important of the website Both global and is not user- bar.
information is information is and is navigation bar friendly. The
easily available. easily constant. The have hyperlinks side
available. user has to which do not navigation bar
scroll down to redirect to other is so long that
access the pages. it continues
navigation even after the
bar. The local footer ends.
 Research on Web Designing 2
navigation bar
is not easily
accessible.
Content Content is well- Content is Most of the The website The website All the content
written and well-written content is in contains very contains a lot is placed in
readable. and readable. form of little content. of unwanted, blocks which
videos. Most of the difficult to make it
content read content. difficult to
provided is read. There
either outdated are
or of no use. grammatical
errors in the
content. The
website
contains a lot
of unwanted
content.
Browser The website is The website is The website is The website is The website is The website is
Compatibility browser browser browser browser browser browser
compatible compatible compatible. compatible. compatible. compatible.
White Space White space is White space is There is not There is no There is no There is no
used to separate used to white space. white space. white space. white space.
objects. separate
objects.
Speed Downloading Downloading Downloading Downloading Downloading Downloading
speed is good. speed is good. speed is not speed is good. speed is speed is
good. average. average.
Functionality All the All the All hyperlinks Some of the Few links are Few links are
hyperlinks and hyperlinks function links are broken. There broken. There
search function and search properly. broken. Most of is no search is no search
work properly. function work the links are in function. function.
properly. the form of
images, so the
user will not
know what link
will give what
information
about the
website. There
is no search
function.
Consistency Consistency is Consistency is There is no There is no There is no There is no
maintained in maintained in consistency. consistency. consistency. consistency.
terms of color, terms of
font and design, color, font
 Research on Web Designing 2
header and and design,
footer. header and
footer.
Multimedia No use of flashy No use of Use of videos, Use of images There are a lot There are a lot
images, flashy images, graphics, which are not of flashy of images in
graphics, videos graphics, images and resized to fit the images ands this website
or sound. videos or sound. design format. graphics in which will
sound. the website hurt the user’s
which will eyes.
hurt the user’s
eyes.
Search Engine Search Engine Search Engine Search Engine Search Engine Search Engine Search Engine
Optimization Optimization is Optimization Optimization Optimization is Optimization Optimization
good. is good. is good. good. is average. is average.
Look and Feel The overall The overall The overall The look and The look and The look and
look and feel of look and feel look of the feel of the feel of the feel of the
the website is of the website website is website is not website is not website is not
very good. It is is very good. good. But it is constant. good. good.
a simple and It is a simple a difficult and
attractive and attractive confusing
website. website. website to
use.

Conclusion:

After evaluating the above websites, it is clear how important these parameters are to be

build en effective website. Simple and useful content, easy navigation, consistency,

alignment, repetition, proximity, contrast, functionality are the minimum necessities

required to develop an aesthetically pleasing website. When developing a website, it is

very important to keep the audience in mind. If a website is not appealing, it can leave a

negative impact on the audience. A website is one of the key means of marketing &

communications for any organization, and getting its design right could mean delivering

the competitive advantage required for it to strive in any industry.

 Research on Web Designing 2
REFERENCES

Galliford, Miles. (February, 2008). The Worst Website Design Mistakes of 2008. Retrieved from

http://www.subhub.com/articles/the_worst_website_design_mistakes_of_2008

Houle, Andrew. (2009, March). 4 Principles of Good Design for Websites. Retrieved from

http://www.myinkblog.com/2009/03/21/4-principles-of-good-design-for-websites/

Lawrence Dave, Tavakol Soheyla. (2007). Balanced Website Design. Spring

London. Retrieved February 5, 2010, from RIT Libraries database.

Morris, Terry. (n.d.). Web Design Best Practices Checklist. Retrieved February 5, 2010 from

http://terrymorris.net/bestpractices/

Nielson, Jakob. (August, 2003). Usability 101. Retrieved from

http://www.useit.com/alertbox/20030825.html

Porta, Mandy. (April, 2009). Eight Characteristics of a Good Website. Retrieved from

http://www.successdesigns.net/articles/entry/characteristics-of-a-good-website/

Does Your Website Have What It Takes? (n.d.). Retrieved February 5, 2010, from the SPRITZ

Web Solutions, 2670 W Lake Avenue, Glenview, Illinois. Retrieved February 5, 2010 from

http://www.spritzweb.com/good-website-characteristics.html

Characteristics of a Good Website. (March, 2007). Retrieved February 5,2010 from

http://vandelaydesign.com/blog/design/characteristics-of-a-good-website/