Вы находитесь на странице: 1из 57


Atiya Yusof (TEAM LEADER) 0308516

Amanda Soh Sha Lyn 0308330
Chelsea Orie William 0304525
Farah Nadhirah Khairun 0307838
Syamsidar Azwa Ilani Nadzeri 0314719
A research on website layout design with a
specification towards successful website production
Who exactly are we?
We are Homies. A group of young researchers testing our
abilities through conducting a study; not just any study, we
are venturing into one that is very new to us and hope to
achieve the best possible results. We are all enrolled in
different majors and with this variety we aim to bring to
the table our individuality/opinions. This in turn will develop
a report able to assist us in designing a website.

Amanda Broadcasting
Atiya PR & Marketing
Chelsea Broadcasting
Farah PR
Azwa PR & Event Management

An introduction
According to Vara (2008), designing and developing a
website may come easily to some; they are able to pick up
a note book, sketch some ideas and produce a full function
website accessible world-wide. However, not all designers
can produce a successful website that caters to the needs
of all users.

These types of designer are rare they pay great attention
on factors that produce a great website as well as those
that causes it to fail (Gehrke & Turban, 1999). Meyrick
(2008) indicated that in order to train and educate oneself
on what it takes to be a successful designer, it is necessary
to conduct a detailed research on the subject matter.
Our research
Based on the topic of website layout design concept,
the research group have conducted an online research.

This research involved qualitative content analysis of four
articles relating to website design. Each article has been
discussed based on different sub-topics; however, the
overall direction of the research is to identify elements
necessary to produce the groups idea of a successful

In addition to being reviewed, each article also highlights
the essential elements of any website. The content
analyses of articles are as follows:
Article 1:
Most of the time, websites come with an ultimatum a hit
or a miss. Creating a website that ensures visitor loyalty of
is not as easy as it seems. The human mind works in ways
that are subjective to individuals. What one might like, the
other might not; what one might find attractive, the other
might not.

According to article 1, humans are always associating the
things they see on a website to something they have
actually seen. In other words, we are always connecting
the things we are seeing to something we have already
seen before. This is called association.
Dont Bore Your Visitors Keep Them Thinking
Research studies claim humans are exposed to so much
stimuli that our perception/minds are ever changing
(Condillac, 1715). Additionally, the consideration of object
placement is necessary to make sense of our surroundings.

The visuals/outlook of the website keeps visitors intrigued;
however, the content is what makes them remain or revisit
it. In support of this, Friedman (2008) states:

Usability and the utility, not the visual design,
determine the success or failure of a website

So, how do designers leave an impression on site visitors?
Through encouragement, maintaining interest and ensuring
theyd like to visit the website again.
Friedman (2008) claims that shop and website visitors have
similar habits or behaviour. They enter the store/site,
walk/browse around scanning through products/posts and
identify pertinent items.

Article 1 argues that web designers should let visitors figure
the rest out; however, it is proven that a websites function is
to provide visitors with basic knowledge in the most convenient
way possible. Visitors dislike playing guessing games and having
to browse through the entire website to find out general
information is most inconvenient (Steiner, 2010). Visitors also
choose to glimpse/scan rather than read to aid their navigation
process and reduce time wastage (Friedman, 2008).

A good/effective website needs to have a clear path and web
designers should keep designs simple and easy to access
taking into consideration that not everyone is tech savvy.
On most websites that we visit, how many times do we
actually find what we are looking for? An easy way out of
this is to create a button on the index.html called Im
looking for with a drop-down menu of what the website

Additionally, a website that is too simplistic and easy to
navigate can be boring for some visitors. Thus it is
imperative to intrigue visitors with a web interface that has
an interesting layout and up-to-date content.

Too much is sometimes just too much hence, a website
that contains flashy and extravagant images is irrelevant
without an educating content (Steiner, 2010).
This website selling mountain climbing equipment shows
how websites can be simple yet smart. The layout is easy
to navigate through, the black background looks put
together/neat and the background picture of skier gives the
website an interesting look while giving users a rough idea
what the website contains.

Picture reference: Arcteryx 2014, Homepage, viewed 07 October 2014, <www.arcteryx.com>.
This online shopping website also reflects upon a good
website interface. The homepage provides the user with a
brief explanation of what the company is about and the
white background gives the design a clean and sleek look.

Picture reference: ASOS 2014, Homepage, viewed 07 October 2014, <www.asos.com>.
The article argues that websites must be functional
because people visit them for a specific purpose.
Regardless of the purpose websites ought to cater to the
visitors needs.

Reasons why people visit websites are to seek for
information, socialize, online surfing etc. In order to cater
to the needs and wants of users, the speed of the website
plays a very important role.

Steiner (2010) says that the longest time users can tolerate
waiting for pages to load is limited to only 6 seconds. Users
are becoming increasingly impatient and web designers
should assume that users experience time poverty;
therefore, it is necessary to develop sites that maintain a
relatively rapid download rate.

A good website also needs to have relevant graphics to
keep humans interested. Shortie Designs (2014) claim that:

A picture can speak a thousand words, and
choosing the right images for your website can help
with brand positioning and connecting with your
target audience

An image appeals more to site visitors as compared to a
chunk of textual elements. Navigation also plays a vital
role; web designers must make life easier by ensuring that
web interface are user friendly. Shortie Designs (2014) says

Navigation is about how easy it is for people to
take action and move around your website
Overall, a good website does NOT need to be fancy with a
complex layout designs or navigation systems.

Instead, it can be one with a simple yet meaningful layout
that can catch the attention of the user. Additionally, the
website can also be one that is easy for users to
understand in all aspects.

A website should be fun and possess an interesting
element to leave a mark on users thus ensuring they would
come back for more.
Article 2:
Every Internet user loves an eye-catching website that sparks
interest, inspiration while maintaining a fast loading speed. A
website that loads faster will definitely be more preferred and
favoured by members of the target market.

In order to know the websites download speed, the article
suggests to be connected to an internet connection that is
relatively fast>type in the URL for your web page>hit enter>and
hold your breath.

If you needed to gasp for air before the page has downloaded
then it is necessary to cut down on the websites overall size.
According to Andrew Meager (2009), the set of directions that
the HTML document gives to every process really determines the
speed of the page.
Dont Make Them Wait
Additionally, a website could definitely load faster when the
file size of the visual elements are kept smaller and
optimized to the most suitable form for web publishing as
Web images take up the majority of the download time in
most web pages (Kyrnin, 2014).

The article also highlighted that a websites size should not
exceed 50K. In fact, for the best and most efficient result,
its size must be less than 30K. There are also some other
rules of thumb for keeping the download time short that
was stated by Jennifer Kyrnin (2014) in the following page.
Picture reference: Kyrnin, J 2014, How to Speed Up Your Web Page, About Technology, viewed 05 October 2014,
A web designer should also be articulate when it comes to
optimising the size of the visual elements to be put on a
web page because Not optimising images properly
results in extremely slow loading time. When you
intend to publish your images online, you have to
compromise the quality. (Dunato, 2005).
These are the examples of file formats and the file size.

Picture reference: Inobscuro 2014, Optimizing Images for Web, viewed 06 October 2014,
There are also a few guidelines that can be followed in sizing
Picture reference: Merrit, S 2014, Optimizing Your Images for the Web, viewed 06 October 2014,
There are several ways you can reduce file size by using
your image editor. All they do is make adjustments to the
pixilation of each image. Pixels are the tiny dots that
together make up the lines, shadows and colors in your
picture. When you optimize your images, you manipulate
the pixels in one or more of the following ways: by
discarding some of the pixel information (compression in
jpeg format), limiting the number of colors of the pixels,
and reducing pixels by resizing or cropping.

For example, it is very hard to believe that the worlds most
visited sites homepage, Yahoo! Is only sized at 20K. With
this small size, the page can load really fast even when
there are so many visual elements that are being shown at
one time. It is also very mind boggling how the number of
size seems very little but a lot of things can be done within
Picture reference: Yahoo! 2014, Homepage, viewed 06 October 2014, <www.yahoo.com.my>.
Article 3:
Colours are essential to websites so as to bring it life, character
and personality. These traits are necessary for websites to
possess as it will attract viewers who takes a liking to the colour
schemes incorporated into the site.

The most crucial point to keep in mind when developing a
seemingly attractive website would be to incorporate
complementary colours to its design. Article 3 reads that
yellow and red should be used sparingly and only when there
is a certain need to grab attention; this can be in the form of
buttons or banners. Together, red and yellow looks very harsh
and even only yellow alone would remind you of a Police
Caution Tape (Perron, 2003).
Find Out What Colors Will Cause Your Visitors to Hate You
Red and yellow used on a website would look like the picture below.
With these colours, visitors will not have a central focus. Colours
selected must depend on site visitors preference and not the designers
Picture reference: UX Stack Exchange 2014, Flat Design + Color schemes: Bold or Subtle?, viewed 06 October 2014,

According to Hunjet, Parac-Osterman, and Beni (2012), yellow as a
dominant colour can disturb the harmony of the colours and
environment. For example, on a darker background like black/blue,
the colour yellow can be used as accents, details or minimally used
against the contrasting background.
The picture on the right shows how
the colour yellow pops more than the
blue background. These are
complementary colours that are
comfortable to look at and are
pleasing to the eyes. The colours are
not too bright nor are they too dull.

This image on the right
shows how complementary
colours can be used to
develop a scenic image.
Picture reference: Mala-Ma 2012, Deposit Photos viewed 06 October 2014.
Picture reference: Design your way 2014, Colours in web
design and why to choose them, viewed 06 October 2014,
Different colours also have different meanings; especially when being
interpreted to an individuals own emotional state. Colours have the
ability to give character and depict emotions to a certain website.

According to Huang (2013), using colours will provide the webpage
[with] emotions more accurately [so] as to provide
consistency [to a] demanders emotional state

Colours representing emotions tend to be similar and can be
generalised to people all around the world. Across two different
studies, the colours that were mentioned by Coursaris, Swierenga and
Watrall (2012) relate to that of Huang (2008).

Both studies established that warm colours such as red, yellow and
orange reflects upon joy, happiness and are generally more positive
notions; whereas, cool colours such as blue and green exudes
peacefulness and serenity.
Secret Key 2014, Onectrapixel DIY, Singapore, viewed 06 October 2014.
Picture reference: Design your way 2014, Colours in web design and why to choose them, viewed 06 October 2014,
Picture reference: Design your way 2014, Colours in web design and why to choose them, viewed 06 October 2014,
Red, yellow and orange exudes vibrancy and is exciting to see.

Picture reference: Design your way 2014, Colours in web design and why to choose them, viewed 06 October 2014,
Picture reference: Design your way 2014, Colours in web design and why to choose them, viewed 06 October 2014,
Blue and green establishes a cool, calm and positive feeling
Picture reference: Design your way 2014, Colours in web design and why to choose them, viewed 06 October 2014,
Adam and Osgoods (Huang, 2013) have explored the relationship between
colour and emotions across cultures. They found that red can reflect both
positivity or negativity, black/grey as purely negative and blue/green
indicates positivity.

To children however, being surveyed on colours and perceptions revealed
that light colours: pink, blue and red reflect on positive emotions.
Conversely, dark colours: brown, black and grey relate to negative

There are also quite a number of people out there who are colour blind. In
an article by Gheest (2005) it is indicated that there is no need to limit the
amount of colours used; instead colours must be used in moderation and

Most of the articles available regarding colours on websites discuss similar
topics of the Dos and Donts. It has also been discussed that different
colours serve different purposes and must be used sparingly. The primary
use of colour is to transfer a particular emotion from the website to the
Article 4:
Humans are curious creatures by nature and so it has
become a habit for them to check out new fads everyday.
They may use Google to obtain information or flick through
Facebook but one thing is for sure they will go to the
internet/websites for additional information.

Another human trait theyre visual creatures. So a nicely
designed logo or banner with the companys name, and
maybe a few pictures of people doing something
interesting would surely make them stay. WRONG.
Humans are also creatures that are fast irritated when
confused and they have nowhere to turn to for help.

This is why it is stated in the article that it is crucial to
always let users know what website they are on, what the
website is all about and what its purpose is to them.

People are just that forgetful to somehow let the reason
why theyre on the website slip their minds, and where
they have been just in case they want to trace back their
steps or know what theyve clicked on so they can continue
their browsing with no question marks hanging above their

Sometimes they dont even know if they are still on the
website, so the companys logo and navigation bar must
always be present on every page of the website.

According to Dr. Mani Sivasubramanian (2000)

To better design your website, put yourself in the
shoes of your users

For an example, if the website being designed is for an
online shop, what would the browsers want? Of course, it
should be in plain sight where they ship to along with the
minimum shipping prices or if they offer free shipping once
browsers reach a certain amount in their carts, the arrays
of products they have to offer or whether they cater to
browsers for one specific brand.
This site would be a good example for an online shop

Picture reference: Pagan Marie 2014, Homepage, viewed 08 October 2014, <http://www.paganmarie.co.nz>.
It is made clear that they are a clothing online shop based
in New Zealand, they ship worldwide and if the orders are
above $200, users are entitled to free shipping.

The navigation bar states that the browser can make their
browsing easier if they are looking for something specific
by clicking on Brands. Their website also allows the
browser to change the currency used to state the prices to
which they are comfortable with for an even better
browsing experience.

Article 4 also stated that it is best to use link titles to give
an idea of what follows when the users choose to click it.
This refers back to what has been mentioned above
regarding the Brands link, which tells the browsers that it
will lead them to all the different brands available on the
online shop. By using link titles, it ensures a good browsing
flow for the user.

As opposed to whats being said in the article, there is no
need to describe where a link leads. Nobody wants a
block of text in every corner of the website. That is why
the title link is there to blatantly state what the link is in a
word. Its wise to make links as concise as possible. To see
a block of text everywhere will turn the users off and drive
them away.
A good example of title links

Picture reference: Sephora 2014, Homepage, viewed 08 October 2014, <http://www.sephora.com>.
The changing of the links color only further improves the
navigation usability by telling the user that the website
understood what they wanted and is currently loading their
desired page.

However, that doesnt mean that links must always be the
standard blue then purple combination after clicked to
avoid confusion as stated in the article.

Dr. Mani Sivasubramanian (2000) also said using the
standard link colours shows a lack of concern for the
websites users and it is arguable that link colours depend
on the websites overall color scheme. Its somewhat
ridiculous and unsightly to put a shade of blue against a
background that is green in color. It is the modern age
now, where variation is welcomed with open arms.

This is a good example of a non blue-purple link
combination. What is there to be confused about?
Picture reference: Sauce Box Cosmetics 2014, Homepage, viewed 08 October 2014, <http://www.sauceboxcosmetics.com>.
Each individual has their own interpretation as to what a
good/successful website consists of. Through conducting
an online research, researchers were able to explore
various elements that need to be taken into consideration
when creating a functional website. Based on the research
analysis and findings; the most important factors that need
to be considered have been narrowed down into the

Purpose (Functionality) Appearance (Design)
User-friendly Navigation Content

1. Purpose (Functionality)
The first factor is that websites must serve its purpose to
the site viewers exceptionally. Failure to do so will mean
that the website has not achieved its goal. Depending on
what the website regards or what the viewers purpose is,
success can only be achieved by fulfilling a said function.

If people visit an online shop, designers must take into
consideration that the most pertinent page would be one
that allows viewers to begin their online shopping. With
reference to online shopping website Amazon (2014), a
shopping page is not explicitly shown however, viewers are
given a search bar where they are able to type in an item
sought for or select a product category via a drop down
Similarly, if people visit a website to simply gain
information, pertinent information should be displayed first
before other factual elements are introduced. Perhaps
having an FAQ page will also benefit the user; Kelli Murray
(2014) has done this well by creating a website that
reflects on herself as an individual, the site is used for her
own benefit as a means to share her daily thoughts,
activities while selling her hand drawn illustrations online.
When users enter the site www.kellimurray.com they
immediately land on a homepage that is both simple and
pleasing to look at If simply looking for general
information on what Kelli does, users are able to navigate
easily through the website as the navigation bar is located
at the top with easy to understand buttons that indicates:
About, Portfolio, FAQ, Contact, Shop and Blog. Users do not
need to waste time figuring out where to click in order to
find out information as everything is explicitly stated.
As for Wikipedia (2014), viewers tend to visit this website
for the sole intention to obtain basic information. Though it
may be difficult to navigate through, Wikipedia indeed
performs its function as an informative website well; so
much so that it has become a household name world-wide.

Additionally, if a viewers purpose in visiting a site is for
socialisation purposes, the website must allow posts, chats,
instant messages, comments or discussion forums to occur.
The most successful social networking site of this era
reflecting all these functions would be Facebook (2014).
2. Appearance (Design)
As for the websites appearance/design, it has been
identified that a website must reflect on a theme that is
simple, professional yet it still embodies the corporate
image or what the website is generally about.

It should not contain elements such as images, graphics,
colours or even text that might be misleading. Also,
content/information should be explicit as viewers will be
put off by trivial components. It is of our opinion that the
idea of Let the viewer figure the rest out is invalid as in
this day and age, people tend to be lazier and prefer to be
fed every single piece of information. Using this concept
may just cause them to not return to your site.
In terms of colour, designers must select colours that
complement each other and are easy to look at on screen
this can be achieved through the use of the colour wheel
which clearly indicates which colours look best together.

Use complementary colours
Standardised font
Quality graphics
Use all colours in existence
Mix and match extravagant fonts

Picture reference: : Pistachios 2014, Homepage, viewed 08 October 2014, <http://getcrackin.com/>. [TOP] Will 2010,
Uncategorised, viewed 08 October 2014, <http://www.webdesignstuff.co.uk/mw005/category/uncategorized/>. [BOTTOM]
3. User-friendly Navigation
Another factor to developing a successful website is
ensuring that the overall site is easy for users to navigate.

Not only must the navigation bar be located somewhere
that is easy to identify, web designers must also ensure
that all the buttons are linked and does in fact perform a
function when clicked. Each page on the website must
download fast as people tend to get bored easily and the
longer they wait, the higher the chance of not returning to
the site.

4. Content
Site content refers to several things; however the general
idea is that the website must contain exactly what it is that
users are searching for. Ensuring that the content matches
user needs is essential to creating a successful site.

Additionally, the content of the site must remain up to date
as users have no use for out dated information unless
simply using them for reference. The information provided
on each site must also reflect on language that is
professional and grammatically correct as it highly reflects
upon the corporation/websites reputation. Therefore,
errors in website content is absolutely unacceptable.

5. Compatibility
The final factor to consider when creating a successful
website is compatibility. All websites must make the site
available for users world-wide. Segregation by race,
religion, education, geographic location or any other
characteristic is not appreciated and neither is segregation
on the internet. Restricting access only creates a negative
reputation causing users to not visit again. A good example
of this would be Pandora Radio (2014) which restricts users
in Asia.
Picture reference: Pandora 2014, Redirect, viewed 08 October 2014, <http://www.pandora.com>.
Amazon.com, Inc. 2014, Amazon. Available from: Amazon.com,
viewed 02 October 2014.
Arcteryx 2014, Homepage, viewed 07 October 2014,
ASOS 2014, Homepage, viewed 07 October 2014,
Condillac, EB 1715, Treatise on Sensations, Clinamen Press Ltd.
Constantinos, K, Coursaris, SJS and EW 2008, An empirical
investigation of colour temperature and gender effects on web
aesthetics. Journal of Usability Studies, 3(3), pp. 103-117.
Design your way 2014, Colours in web design and why to
choose them, viewed 06 October 2014,
Dunato, N 2014, Optimizing images for web: Adobe Photoshop
tutorials, Obscuro Original Design Resources, viewed 06 October
2014, <http://inobscuro.com/tutorials/optimizing-images-for-web-
Facebook, Inc. 2014, Facebook. Available from www.facebook.com,
viewed 02 October 2014.
Friedman, V 2008, 10 Principles of Effective Web Design , viewed 08
October 2014 <http://www.smashingmagazine.com/2008/01/31/10-
Gehrke, D and Turban, E 1999, Determinants of successful website
design: Relative importance and recommendations for effectiveness.
Systems Sciences HICSS-32: Proceedings of the 32nd Annual Hawaii
International Conference [online]. 5 (8), pp. 5-8. Accessed 01 October
Huang, STY and CW 2013. A Colour Based Webpage Image Style
Judgement Model, 4(11), pp. 275-286.
Hunjet, A and Prac-Osterman, D and Bensic, M 2012, Yellow as a
dominant tone, Tehnicki Vjesnik/Technical Gazette, 19(1), pp. 93-98,
Academic Search Complete, EBSCOhost, viewed 06 October 2014.
Inobscuro 2014, Optimizing Images for Web, viewed 06 October 2014,
Kelli Murray 2014, Kelli Murray. Available from www.kellimurray.com,
viewed 02 October 2014.
Kyrnin, J 2014, How to Speed Up Your Web Page, About Technology,
viewed 05 October 2014,
Kyrnin, J 2014, Web Images Should Be Small, About Technology, viewed
05 October 2014,
Mager, A 2009, How to make your website really, really fast: ZDNet, The
Web Life, viewed 06 October 2014,
Mahdavi, I 2009, Comparing mens and womens definition of success.
Journal of Behavioural Studies in Business [online]. 2, pp. 1-8.
Mala-Ma 2012, Deposit Photos viewed 06 October 2014.

Mani, S. 2000, Naviation: Make it Easy to Get Around, viewed 08
October, <http://www.sitepoint.com/navigation-get-around/>.
Merrit, S 2014, Optimizing Your Images for the Web, viewed 06
October 2014,
Meyrick, J 2006, What is good qualitative research? A first step towards
a comprehensive approach to judging rigour/quality. Journal of Health
Psychology [online]. 11 (5), pp. 799-808. Accessed 01 October 2014.
Pagan Marie 2014, Homepage, viewed 08 October 2014,
Pandora Radio 2014, Pandora, Available from
www.pandora.com/restricted, viewed 02 October 2014.
Perron, JH and C 2003, Hooker and Perron [online] viewed 05 October
2014. Available at: <http://writer2001.com/colwebcontrast.html>.
Pistachios 2014, Homepage, viewed 08 October 2014,
Sauce Box Cosmetics 2014, Homepage, viewed 08 October 2014,
Secret Key 2014, Onectrapixel DIY, Singapore, viewed 06 October
Shortie Design 2013, Principles of Effective Web Design, viewed 08
October 2014, <http://shortiedesigns.com/2014/03/10-top-principles-
Sephora 2014, Homepage, viewed 08 October 2014,
Shih Ting, Y and Chia Wei, H 2013, A colour based web page image
style judgement model. International Journal of Electronic Business
Management. 11(4), pp. 275-286.
Steiner, C 2010, Top Tips: 10 Elements of Any Effective Web Site,
viewed 04 October 2014, <http://www.forbes.com/2010/03/24/web-
Vara, V 2008, How to create a successful web site for nothing (or
almost nothing), The Wall Street Journal, 11 August, viewed 01
October 2014,

Van der Geest, TM 2005, Mixing up colours: Colours in the interface,
Information Design Journal and Document Design, 13(1), pp. 74-78,
Communication and Mass Media Complete, EBSCOhost, viewed 06
October 2014.
UX Stack Exchange 2014, Flat Design + Color schemes: Bold or
Subtle?, viewed 06 October 2014,
Wikipedia 2014, Wikipedia. Available from en.wikipedia.org/, viewed 02
October 2014.
Will 2010, Uncategorised, viewed 08 October 2014,
Yahoo! 2014, Homepage, viewed 06 October 2014,