Assignment 2

Research Design Report

Group Name: GEN-Y
Team Leader: Law Cheng Jing (Eileen) 0309527

Members:
Tan Yong Loke (Grace) 0310472
Angelina Lee Tze Theng 0310346
Foong Kah Mei (Clara) 0310003
Siti Amellia bt Mohamed Feroz 0310239

Research Topic: Layout Design Concept
Review and Critique on the article

Dont Make Them Wait
From the article on dont bore your visitor, I will have to say that I do agree that the
websites that are being designed will have to be rather catchy and interesting in
order to keep the visitors attention on the product that is being advertised.
After all, you would want your visitors to have a clear idea of what your website is
conveying.

The information that is being shown in the websites has to be simplified.
The visitors would want straight to the point information rather than a lengthy or
information that are complicated and mind twisting unless your target groups are
people who enjoys complicated and mind twisting information.

I also do agree with the fact the website cant be too simple too. That would also make
your visitors bored.

In an article by Pamela Vaughan (2012), she has listed guidelines into making an
effective website.

He stated one of the guidelines is to
make a good first impression.
It has been stated that the average humans attention span can only go up to 40
min.
All the more reason that the first impression of a website has to be eye catching
and has to keep the attention of the visitor fixed on the product.
People that visits your website would want to see the things they need to see.

Questions such as:
Is your website trustworthy?
Does it look professional?
Am I in the correct website?
Those are the questions that the visitors are going to be asking when they see a website.

In order to avoid the visitors to get bored, it could be helped from:
The use of fonts
Color and size of fonts

The words in a websites are important, as that is how you are going to convey your
messages or information to the visitors.
It has to be comfortable for the eyes and mind.

The use of images has to appropriate.
The images that are used
Has to convey meaningful messages about the website.
It has to be relevant.

The uses of animation are encouraged especially at this time of era
Animation can sometimes be more attractive than real life people.

These are ways to keep your visitors attracted to your website.

However the quality of the animation has to be good.
If there are any background make sure they are appropriate and suitable to what the
website has to offer.


Example 1
This website
showcases the
happenings in
the
entertainment
world.

It has the
information as
you can see on
the left they have
all tabs.
(Source: Flavorwire, 2014)
It has a very simple layout and it is straight to the point.
Its headline is bold
Their use of words are interesting.
On the left bottom corner its says sweeten your inbox, its another way of saying
subscribe to us for more updates.

Example 2
(Source: Trendland | design and culture online
magazine,2014)
This website has a switching
animated banner where it
showcases the variations of
photography they do.
It showcases their works
that could get the
visitors attention.
Gives the visitors ideas
of what the product has
to offer.

The buttons is colorful and it
has given the idea of an
artistic approach for this
website as it is advertising or
selling the artistic
photography.

Colors plays a huge role in
keeping peoples attention
therefore the play of colors
can determine what kind of
approach would you want for
your website.

Example 3
This website is about a water
service named Arvanitakis.

In this website it shows all the
flaws of a good website.

The images that are uploaded
arent clear and pixelated.

As you open this website
there will be a rather knight
like background music that is
really inappropriate.

The idea of displaying images
of bright colors overlapping
each other gives visitors a
painful sight.

(Source: Arvanitakis)
The font that was used was fine however the use of color were wrong and it has made it hard for
people to read.

The whole design of the website is too simple and due to the loud and inappropriate song it has, it
makes this website annoying.

This website also did not use the cutting edge technology in their website.

In conclusion
A website should clear and straight to point.
The visuals that are being shown should be in
good quality.
People are more prone and interested in visuals.
However the visuals has to be placed in a proper
manner where it wouldnt be too much for the
viewers to take in or too distracting that make the
visitors loose track on what is the main information
in the website.
It is mentioned by Charles Kelly from Aichi Institute
of Technology (Toyota, Japan) (2000), from a
visitors point of view, a good website is when they
are usable, has fulfilled the visitors needs, didnt
waste the visitors time and is not irritating.

Review and Critique on the article

Dont Make Them Wait
According to the article Dont Make Them Wait, I agree that successful
websites are websites that download quickly and look good at the same
time.

Websites with slow loading speed can have significant effects on the viewing
of your website.

An attractive site is more likely to generate a positive impression and keep
visitors once they arrive.

Graphics are important to attract visitors attention as they provide a variety
of visual appeal and brighten an otherwise boring page of text.

However, web designers should bear in mind to not over-use them.
Graphics should be inserted only if it adds meaning or context to your
written content.
Its advisable to remove them as they take up a lot of space thus
increasing the time for it to load.
Each web page should not be overloaded with images of more than 3
or 4.
Instead of loading heavy elements like animated graphics, Flash
content, large videos and images into your website, opt for simple
designs that can still offer the best of your creativity to your visitors.

Dont overload your website with effects and designs that are overly
complex just to impress visitors
Because most visitors can only download at 28.8 kb per second and
Visitors are bound to get frustrated if too much time is taken to load the
page.
Always make sure that your website only takes a few seconds to load
Prospective visitors may not have the patience to wait too long.

Linden (2006) stated that
Traffic and ad revenues decreased by 20% when Google moved from a
10-result page loading in 0.4 seconds to a 30-result page loading in 0.9
seconds.

Farber (2006) also stated that
When the home page of Google Maps was reduced from 100KB to 70-
80KB, traffic went up 10% in the first week, and an additional 25% in
the following three weeks.
It shows that speed is a huge component in web surfing and a big
market driver of Web 2.0.
It doesnt matter if there are more choices of websites for viewers to
choose from, all that really matters to viewers are the speed in which
the results are presented to viewers.


Lets have a look at this example.
(Source: Chicago Tribune)
We can see how packed the images are placed against one another in the page.
There are too many images to load at the same time and this in turn slows down
the loading page time.
We can always improve this by making sure that the images uploaded are
optimized and are as small as possible.
Smith (2013) found
that the loading
page of Chicago
Tribune is 19.315s,
making it one of the
slowest sites on the
internet.
The Chicago tribune
may be one of the
most trafficked US
news sites but
according to Alex
Krohn, speed is still
a critical factor and
is getting more
important as time
goes on.
There is a lot of data and analytics on how
speed impact sites; the faster the page
loads, the more likely the users are to
continue along in the process and
eventually make purchases or seek
services.
Delays risk losing that visitor,

- Alex Krohn
Here is another example to look at.
(Source: Cult of Mac)
For a first time view, the average load time of a website on the Techmeme Leaderboard
was 11.42 seconds.
Common issues like improperly sized and uncompressed images, social media widgets
as well as advertisements added extra load time to the site.

Krohn also said that, Five or six years ago, people would happily wait five or more
seconds for something to load. Nowadays, if it doesnt come up within a couple of
seconds especially if the person is arriving from search results people will hit the
back button and try the next result.
The Cult of
Mac is one of
the slowest
loading sites
among most
influential tech
news blogs
according to
Aptimize with
its loading
page time of
27.67seconds
.
Based on the article Dont make them wait, I do agree that a better website should not
have to keep their audiences wait for a page to be loaded.
In fact, the more fancy design of a website, the more time taken for the page to
be fully loaded.

Website is designed for people to search for information in a convenient and faster way
whereas they are able to go through everything within a minute by just typing URL
address.
The essential element in a better website is based on their usability that people
may pay another visit on a certain website.

Therefore, a better website has to be clarified with every information, an interesting
appearance which based on how well the designer managed the page, and also fully
loaded page within 20 seconds.
In fact, to load website in a short time, the designer should keep a more design,
less graphic concept.

Based on the article by Morgan Davis (2014), the Product Marketing Manager who listed
a few tips on how to save time when loading website.
The tips were previously conducted by Aberdeen Group Study (2008) on the online
shoppers who are impatient.

A website for online shopping contains a lot of pictures,
Therefore designers have to keep the format of the picture in a smaller file size.

To be able to load an image faster,
Save the file under JPEG format that help to reduce the resolution of the image
but remain the good quality.


Besides the sizes of image, there is also another tip from Morgan Davis (2014) article
which is to load a website in a faster speed which the management on html page.
If a website contains too many pictures, it should combine images into CSS
sprite in advance.
A CSS sprite is able to customise numerous of images and icons into a larger
image and to improve the performance of a website.

On the other hands, we have to clear all the cache history before starting to load a
new website.
Cache is a component system that can be used to store up memory of previous
data
Therefore the system can serve a faster result on the browser.
But if the size of cache memory become larger, it will slow down the speed when
loading a website.

There is an article by Blaise Lucey (2010) in MadeMan.com, stated that
Processor does affect the performance of a website.
A processor speed is essentially the speed at which the users computer
processes information,
However, there are few ways that the speed of a processer can affect the
performance on a website.
One of the most common actions is user who like to open multiple tabs.
Several sites contain different memory, therefore open multiple tabs will
have a higher risk in making slow loading speed on each websites.

Example 1
(Source: Google.com)
The example
is a
homepage of
Google
browser.
It takes not
more than 5
seconds to
load the page
because of
the layout,
design are
simple and
the only
google logo is
in PNG
format.
Example 2
(Source: Facebook.com)
The appearance
of Facebook
homepage is
simple and it
uses solid
colour scheme
which consider
the more
design, less
graphic
concept,
therefore it can
be load faster.
Example 3
(Source: Youtube.com)
Although Youtube
is a website for
multimedia that
users are able to
search for their
videos, but when
started launching
the page, it may
takes about 10
seconds to load
because the page
shows several
videos in
thumbnail size.

The thumbnail
size enable it to
fasten the loading
performance on a
website.
Example 4
Tumblr.com does take
more than 10 second
to load the dashboard
page after signing in.

The design layout is
simple but website
does support mostly
GIF format of
animation images and
they are all in a higher
quality,
therefore it takes
time when
loading Tumblr
page.
(Source: Tumblr.com)
Review and Critique on the article

Navigation
From the article on Navigation, I agree that navigation should answer the three main
questions, which are
Where am I?
Where can I go from here?
Where was I already?

In the article, it is clearly stated that visitors will not enter your site from the home page
and continue to click on hyperlinks in an orderly way.

Therefore, web designers should take the question of
Where am I into considerations when designing their
web pages.

Jakob Nielsen (2001) stated:
Homepage is often the first or possibly the last chance to get the attraction or
attention from the customers or visitors, just like the front page of newspaper
where top news items are given on the front page of every newspaper.

Homepage would have a drastic effect even if there are only small changes occur on
the homepage.

We do not want our visitors or customers to stare at our homepage, wondering what is
the purpose of this site.

Therefore, to avoid this situation to happen, Nielsen (2001) said:
We must communicate well with the visitors or customers where they can
recognize or identify what is the site all about just by one short glance.



From the article, I agree to the point that the name or the logo of your company should be
placed on the top of every page in your web site and it should be able to link back to your
home page if you click on the logo or the name.

However, in the article, it did not clarify on how the name or logo should be designed or
displayed on the web page.

Joe Brennan (2011), the Vise President of Strategic Communication in The University of Iowa,
stated that:
The logo or the name of the company should be displayed clearly and it has to be
legible.
The logo should be displayed on the homepage but need not to be displayed on other
pages on the site.

The name of the company must be displayed on the top 133 pixels of each page of the site.
Joe Brennan (2011), the Vise President of Strategic Communication in The University of Iowa,
stated that (cont):
The minimum size for the logo is 31 pixels in height while the minimum size for the name
of the company should be not smaller than 11 pixels in height.
He also said that it is not advisable to have animated logo or wordmark.

From the website dom4j (n.d.), the author of the website identified that:
Big graphics will make the loading process of web pages become slower and as a
result, visitors or customers leave your web pages.

According to Ilya Pozin (2012), flashy websites may not look good on mobile phones or
tablets as some mobile phones do not have Flash, and thus visitors may not be able to see
them.

(Source: Allkpop)
Example
Nielsen (2001) clarified that the name of the company or the logo of the company
should be shown at a noticeable location and in a reasonable size.
The area for the logo or company name need not to be huge but it should be bigger
and more prominent that those items around the logo or name so that it will grab the
visitors attention.
The upper-left corner of a web site will always be the best location to display a
company name or logo.
Above is
an
example
from the
website
Allkpop, on
how a logo
or name of
a website
should
displayed.
From the article, it is stated that the home page should always
answer the question of Where am I and should not let the visitors
or customers guess on what your web site is all about.

However, according to Roni Jacobson (2010),
it is not advisable to include all information about your company
or business on the home page,
Instead, it is better to keep it simple and easy to read.

Nielsen (2001) specified that:
Include a tag line that briefly summarizes the purpose of the
site.
Tag line should be simple, brief, and straight to the point.


Lets take a look at this example below.

(Source: Smashing Magazine, Image by Vitaly Friedman, 2008)
Although visitors or customers tend to visitor explore a website based on the F-pattern
and what the visitors or customers would see will be the three statements when the page
is loaded.

However, not all visitors or customers are able to understand the main purpose of the web
site by the three statement, and this is what we called the unnecessary question
mark.
From the image
above, it is
clearly shown
that
Beyondis.co.uk
used the tag
lines of Beyond
channels,
beyond
products,
beyond
distribution.

What is the
meaning of
these tag lines?
Lets look at another example below.
(Source: Smashing Magazine, Image by Vitaly Friedman, 2008)
However, the difference between them is that Expression Engine avoids the unnecessary
questions mark.

Other than that, Friedman (2008) also stated that the slogan or tag line used by
Expression Engine is very functional as it provides visitors or customers with choices to
try their services or to download their free version.
From the
image
screenshot by
Friedman, it is
shown very
clearly that the
web design
structure of
Expression
Engine is
similar to what
we see from
Beyondis.co.uk
.
[Cont]

In short According to Friedman (2008), to make it
easier for visitors or customers to grasp the idea or
purpose of a web site, we need to reduce the cognitive
load.

Once a web designer did this step or achieved it, the
communication between the visitors and the web site
owner will be successful and the visitors can be
benefited from it.

People would not use your web if they could not find what
they want from the web site.
From the article on Navigation, it is stated that visitor will
always want to know Where can I go from here.
It means that visitor can click links that bring them to
pages within the site or to pages outside of the web
page.

Besides, it also says that context must be included in the
links so that it provides the visitors with insight on where
the links will bring them to.

I agree to the point that it is a must to put a small
description to the link on the web page.

According to Pamela Vaughan (2012), one of the main
factors of keeping your visitors coming back to your web
site often is by having a good and solid navigation
system that supports all search preferences.
There was a
recent study by
HubSpot and it
was found out
that almost three
quarters of the
respondents of
the survey say
that the most
important
element in a web
site design is
that one can
find the
information
they want
easily. If one
could not find
what they want,
they will just give
up on searching
and leave the
web site.
(Source: HubSpot, Image by Pamela Vaughan,
2012)
Jacobson (2010) stated that navigation tells the visitors where
to find the information they need on the web site.

A good navigation system is navigation that is easy to find,
very clear and easy to understand by the visitors.
Lets look at an example below.
(Source: Global Web Fx, Image by Matthew Shuey, 2013)
As shown in the screenshot, the web page is very complicated and visitors will be
confused when the page is loaded.
There are too much information displayed on the page
this web design used up a lot of bright colors that make the visitors eyes fatigued.
The navigation of this web page is hard to locate. Visitor could not be able to find the
navigation bar easily.
The image is a
screenshot of a
website,
Arngren.net.

This is website
has been voted
one of the worst
website that have
ever seen in this
world.
According to Lisa Irby (n.d.), a simple navigation in a
web site is an important factor.
Do not overwhelm visitors with over 20 options or
choices on your homepage
Only highlight the most important pages on your
homepage
Use subpages in order to keep your navigation
clean.

However, Arngren.net did not follow these simple rules
of designing a web site.
Lets take a look at another example below.
(Source: Zolas Vintage)
This web site is one of the best web site that has ever seen in the world.
It has a simple design and the navigation is clear and easy to find.
The tag line on the homepage provides the visitors on what this web site is all about.
The image
shown is a
screenshot of
the website
Zolas
Vintage
Clothing and
Accessories.
In conclusion


According to Eric Miller (n.d.), there are five (5) rules of
effective website navigation.

1. Navigation should be very easy to find
2. Keep it consistent
3. Use obvious section names
4. Less is more
5. Remind the user where they are

1. Navigation should be very easy to find
Web users are not going to hang around and scroll along the web site to find
the navigation for a very long time. They are impatient.
Since it will take less space than other elements on the page, it should be
stand out enough to grab the attention of the web users.
The most common location to display your navigation bar is at the top of the
page so that web users do not need to scroll down to the page to find the
navigation bar.
The
screenshot
of the web
site at the
right is a
very good
example of
a simple yet
clear
navigation
bar.
(Source: Bright Bull, Image by Ricardo Molina, 2013)
2. Keep it consistent
Navigation bar should appear at the same location on
every page of the web site.

It also should appear in the same style, colors and
type even in different pages within the site.

The reason = users will be able to get used to the site
and will feel more comfortable when looking through
the site.

It will lead the visitors frustrated if the navigation is to
jump everywhere, change colors from pages to pages.
2. Keep it consistent [Cont]
The screenshots of
the webpages are
good examples of
keeping the
navigation bar
consistent even in
different pages within
the site.

(Source: Zolas Vintage. - About page.)
(Source: Zolas Vintage. Press page.)
3. Use obvious section names
The section names of a site in the navigation bar should be obvious and what will
bring the web users to if they click on them.

It is advisable to use obvious button names such as Press and Gallery to avoid
the web users to get confuse.

The
screenshot of
the web site
page below is
a good
example of
navigation bar
labeled with
obvious
section names.
(Source: Yola, Image by Yola, 2013)
4. Less is more
It is not advisable to include too many navigation buttons on the same page
as it will just leave the web users too many choices.

Instead, you can use drop-down menus that break down the top-level buttons
into few sub-sections.

(Source: Graphique, Image by Curtiss Prickett, 2010)
The
screenshot
of the web
page below
is an
example of
a web site
that has
drop-down
menus.
5. Remind the user where they are
It is a good idea to remind the web users where they are
when they click into a site section.
Web designers can use a consistent method where
section will be highlighted if the visitor is in the section,
such as changing the color or appearance of the
button.
This agree to the point in the article where it says that
web users want to know if they have already visited a
page within the web site and it will be very frustrating to
have users click on a link that bring you back to a page
that they have visited.
Therefore, for your navigation to work well, web designer
should use blue color for unvisited link while purple
for visited link as a color scheme.
These are the standard color, using other colors will
just confuse people.
The screenshot below is an example from Google search engine site where it uses
blue color for unvisited link while purple for visited link.
5. Remind the user where they are [Cont]
(Source: Google)
Review and Critique on the article

Find Out What Colors Will Cause
Your Visitors To Hate You
From the article, I agree on the fact that not many web
designers look upon the importance of color when
designing the website
Colors give out an first impression for viewers when
they see the website.
If not looked upon, it will have the end result of
having either plain, boring or a chaotic website.

The article also stated that websites only shares 216
common colors in the color palette as the other 40
colors in the total of 256 colors are not advised to be
used.
If they are used, it will cause dithering ---- an
attempt of the program to approximate a color by
mixing other colors together when a required color is
not detected.
To prevent dithering, web designers could use the chart below to determine which colors could be
used.
(Source: Tech Target;
Image by Margaret Rouse)
(Source: Egencia)
Mark Hoben also said that
a mostly neutral color palette can help your site project an elegant, clean
and modern appearance,
Employing small dashes of color--for headlines or key graphics--helps
guide visitors to your most important content

From the
example at the
left, which the
website for
Egencia, it
shows how
wisely Mark
Hoben, the
head of web
design at
Egencia picks
and uses the
colors for the
website,
making the site
simple and
easy for
browsers to
look at the
website.
Color Psychology
The psychology behind every color chosen is also an issue
that needs to be looked upon as each color triggers a certain
behavior or feelings within the viewers.

In the article, I agree to the point that color should be one of the
concerns when you are designing a website.

There are different colors and they have their own color
psychology too.
Red
Pink
Orange
Yellow
Green
Blue
Purple
Brown

From the image example, the web designer uses red is trying to convey power
and energy towards the viewers, as if its all about you, you have the power; you
got what it takes, and many more.
(Source: bcom; Image by vandelaydesign, 2013)
Red Example 1
(Source: Zoossa)
Another example above, uses red to signify danger instead. As many animals
are about to go extinct, the website reminds us humans that the animals are in
danger and are in need of our help, hence using the red is a good tip to warn
the viewers of the situation.
Red Example 2
(Source: hyundai-veloster; Image by onextrapixel, Carol Francis, 2013)
Above is another example of red used in websites. The website is trying to
promote a brand new product, in this case, a car, to its viewers, what better
way to do that then to let viewers eyes focus on the promotional banner by
using the color red.
Red Example 3
Red - Example 4
(Source: shihabs; Image by onextrapixel, Carol Francis, 2013)
The above example is for a freelancer web designer. The designer is trying to
indicate with the color red that he is strong, he has boldness and power, which
resulting in looking masculine and admirable to viewers who visits his web sites.
Pink Example 1
Pink is known to be a really feminine color, it also signifies youth, nurture,
playfulness and love.
(Source: We are cup cup; Image by vandelay design, 2013)
Pink Example 2
(Source: Creative Nuts; Image by tripwire magazine, Sonny M. Day, 2011)
From the examples 1 and 2, it is shown that pink is usually associate with
cooking and baking as it is a feminine type of work. Not only that, it also
displays a nurture and love type of feeling towards the viewers.
Pink Example 3
(Source: Ayrshoes; Image by tripwire magazine, Sonny M. Day, 2011)
Pink Example 4
(Source: Pink Turtle Trading; Image by tripwire magazine, Sonny M. Day, 2011)
Websites images from example 3 and 4 are with the color of pink that signifies
feminism, as females tend to love shopping for shoes, accessories, clothes and
much more, hence most online shops uses the color pink to attract females into
going to their websites and buying their products.
Pink Example 5
(Source: Motherhood India; Image by tripwire magazine, Sonny M. Day, 2011)
This image above is another example of pink that associates itself with
feminism, towards the viewers as it is a website about motherhood. Using
the color pink will attract mothers into the website as they will also have a
nurture and loving feeling when they see the color pink.
Orange Example 1
The color orange is usually depicted as more calm, sensuality, friendly, comforting
and inviting. Not only that, orange could also associate itself with food as a result of
comforting.
(Source: These are Things; Image by onextrapixel, Carol Francis, 2013)
Orange Example 2
(Source: These are Things)
Example 1 and 2 are a same website of two designers. Despite its creative
design, by using the color orange itself, it gives viewers a warm and
welcoming feeling towards the website, resulting in making viewers feel
comfortable being on the website.
Orange Example 3
(Source: Story Cubes)
A website promoting a fun playing game for kids, uses orange to seem more
family friendly, calm and inviting towards families, hence making them
interested in the product and eventually purchasing it.
Yellow Example 1
Yellow is a really energetic color. Itis often associated with the sun, it resulted in
yellow being associated with happiness, fun and warmth as well.
(Source: Chunk; Image by web design ledger, Gisele Muller, 2010)
From this example above, this website is for an interactive entertainment
company which target audiences are children, hence having yellow on the website
shows that it is friendly, fun and exciting for kids of all ages.
Yellow Example 2
(Source: Creative Spark; Image by web design ledger, Gisele Muller, 2010)
Yellow Example 3
(Source: Roome London)
From these examples 2 and 3, it is shown that most designers used the color
yellow on the website to appear more fun, upbeat, with a creative type to
vibe to the viewers, hence might be attractive to certain clients.
Green Example 1
As green is the color of nature, green is normally associated with harmony, peace,
relaxation, balance, calm, rejuvenation and many more soothing feelings.
(Source: A Modern Eden; Image by web design ledger, Gisele Muller, 2010)
The image above is an example of a design website that mostly produces animal
designs. Using the green color, it gives the website a more eco, nature feeling,
making the website seem so calm and peaceful.
Green Example 2
(Source: Green Infrastructure Inc.; Image by web design ledger, Gisele Muller,
2010)
Green Example 3
(Source: Mint; Image by web design ledger, Gisele Muller, 2010)
As green could also be associated with money, the examples 2 and 3 above
showed that not only the website gives a calm and balance feeling, but it is a
website about saving money too, hence it might give the viewers the feeling of
reassurance and confidence on the website and its company.
Blue Example 1
The color blue is usually associated with trustworthiness and security, but it also
could be seen as calm and cool and friendly.
(Source: Facebook; Image by Tech Crunch, Michael Arrington, 2008)
Blue Example 2
(Source: Tumblr; Image by Poynter, Taylor Miller Thomas, 2013)
Blue Example 3
(Source: MySpace; Image by Walsh Magic)
Blue Example 4
(Source: Twitter)
As shown at the image examples 1 to 4 above, most social websites uses
blue on its website, the reason behind it is that blue not only gives viewers a
more trustworthy feeling, but also a calming feeling towards the viewers,
making them want to stay on the site longer than usual.
Purple Example 1
Purple gives out more of a nobility type of feel, but with different kinds of shades,
purple can be defined as wealth, luxury, elegance, mysterious when it has a
darker shade, while with a lighter shade, it has more of a spring and romance
type of feel.
(Source: Knight Creative; Image by spyrestudios, Jake Rocheleau)
Purple Example 2
(Source: GoneFreelancing; Image by spyrestudios, Jake Rocheleau)
Purple Example 3
(Source: Luis Chiappe; Image by spyrestudios, Jake Rocheleau)
As darker shade of purple gives out a mysterious yet elegance type of
feel, numerous designers uses purple on their website to make viewers
curious about the designers and their work.
Brown Example 1
The color brown gives out a cozy, comfy feel towards people. Not only that,
brown could also be associated with earthiness, support, and nature.
(Source: Mayflower Brewing; Image by web design ledger, Gisele Muller,
2010)
Brown Example 2
(Source: Wawa; Image by vandelaydesign, 2013)
Brown Example 3
(Source: Giannis; Image by web design ledger, Gisele Muller, 2010)
As brown gives out a cozy and comforting feeling, numerous websites that are
food or drinks related used brown in order to let viewers feel welcomed to
their website as shown on the image examples 1 to 3 above.
Helpful websites
There are several websites on the Internet that are dedicated to help designers in
choosing suitable color palettes for their website to not only look nice, but also
unique and attractive towards browsers.
(Source: Color Scheme Designer)
(Source: Adobe Color CC)
(Source: Paletton)
References:
Adobe Color CC, n.d., Adobe Color CC. [online] Available at:
<https://color.adobe.com/create/color-wheel/> [Accessed 8 October]

Allkpop, 2014. [online] 6Thoery Media, LLC. Available at: <http://www.allkpop.com/>
[Accessed 5 October 2014]

Arrington, M., 2008. New Facebook Home Page, New Facebook Tagline Means Too Many
Marketing Meetings At Facebook. [online] Tech Crunch. Available at:
<http://techcrunch.com/2008/09/30/new-facebook-home-page-new-facebook-tagline-means-
too-many-marketing-meetings-at-facebook/> [Accessed 8 October]

Arvanitakis, n.d.. [online] Available at: <http://www.arvanitakis.com/> [Accessed 8 October
2014]

Blaise, L., 2014. How Does Processor Speed Affect Surfing The Internet? [online] Available at:
<http://www.mademan.com/mm/how-does-processor-speed-affect-surfing-internet.html >
[Accessed 9 October 2014]

Brennan, J., 2011. Guidelines for Websites. [online] The University of Iowa 2011. Available at:
<http://www.uiowa.edu/brand/guidelines-web/> [Accessed 5 October 2014]

Colour Affects, n.d.. Psychological Properties Of Colours. [online] Available at:
<http://www.colour-affects.co.uk/psychological-properties-of-colours> [Accessed 8 October]

Color Scheme Designer, n.d.. Color Scheme Designer. [online] Available at:
<http://colorschemedesigner.com/csd-3.5/> [Accessed 8 October]

Dailytekk, 2014. 100 best most interesting blogs and websites. [online] Available at:
<http://dailytekk.com/2013/11/18/the-100-best-most-interesting-blogs-and-websites-of-2014-
2/> [Accessed 8 October 2014]

Day, S. M., 2011. 45 Gorgeous Pink Website Design Showcase. [online] Trip Wire Magazine.
Available at: <http://www.tripwiremagazine.com/2011/09/pink-website.html> [Accessed 8
October]

Design Psychology, 2013. The Psychology of Color in Web Design. [online] Vandelay
Design. Available at: <http://vandelaydesign.com/the-psychology-of-color-in-web-design/>
[Accessed 8 October]

Dom4j, n.d.. The Importance of keeping file sizes of your images small. [online] Available at:
<http://www.dom4j.org/webdevtips/keeping-image-file-sizes-small.php> [Accessed 5 October
2014]

Egencia, n.d.. Egencia Home Page. [online] Available at:
<http://egencia.com/daily/home/en/> [Accessed 8 October]


Facebook, 2014. Facebook. [online] Available at: <https://www.facebook.com/> [Accessed 9
October 2014]

Farber, D., 2006. Google's Marissa Mayer: Speed Wins. [online] Available at:
<http://blogs.zdnet.com/BTL/?p=3925> [Accessed on 7 October 2014]

Flavorwire, 2014. [online] Flavorpill Media. Available at: <http://flavorwire.com/> [Accessed 8
October 2014]

Francis, C., 2013. 40 Stunning Website Designs with Great Color Schemes. [online]
Onextrapixel. Available at: <http://www.onextrapixel.com/2013/10/25/40-stunning-website-
designs-with-great-color-schemes/> [Accessed 8 October]

Friedman, V., 2008. 10 Principles of Effective Web Design. [online] Smashing Magazine.
Available at <http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-
design/> [Accessed 5 October 2014]

Google, n.d.. Google. [online] Available at:
<https://www.google.com.my/?gws_rd=cr&ei=CmI2VMLlMs6LuATnzoKYBQ> [Accessed 9
October 2014]

Irby, n.d.. How to Design a Website Easily No Experience Required. [online] 2 Create a
Website. Available at: <http://www.2createawebsite.com/design/> [Accessed 5 October 2014]

Jacobson, R., 2010. The 5 Must Haves of a Great Website. [online] Register.com. Available
at: <http://www.register.com/learningcenter/web-101/the-5-must-haves-of-a-great-website/>
[Accessed 5 October 2014]

Kelly, C., 2000. Guidelines for Designing a Good Web Site for ESL Students. [online] Aichi
Institute of Technology. Available at: <http://iteslj.org/Articles/Kelly-Guidelines.html> [Accessed
8 October 2014]

Liam Walsh, n.d.. Articles-MySpace Front Page [online] Walsh Magic. Available at:
<http://www.walshmagic.com/articles> [Accessed 8 October]

Linden, G., 2006. Marissa Mayer at Web 2.0. [online] Available at:
<http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html> [Accessed on 7
October 2014]

Miller, E., n.d.. Five Rules of Effective Website Navigation. [online] About.com. Available at:
<http://graphicdesign.about.com/od/effectivewebsites/a/web_navigation.htm> [Accessed 6
October 2014]

Molina, R., 2013. The Non-Definitive List of Good Event Website Designs. [online] BrightBull.
Available at: <http://www.brightbull.co.uk/blog/bid/298965/The-NON-Definitive-List-of-Good-
Event-Website-Designs> [Accessed 6 October 2014]

Morgan, D., 2014. 10 Ways to Make Your Website Load Faster. [online] Available at:
<http://www.hostway.com/blog/10-ways-to-make-your-website-load-faster/> [Accessed 9
October 2014]

Muller, G., 2010. 50 Beautifully Brown Web Designs. [online] Web Designer Ledger. Available
at: <http://webdesignledger.com/inspiration/50-beautifully-brown-web-designs> [Accessed 9
October 2014]
Muller, G., 2010. 50 Yellow Web Designs to Inspire You. [online] Web Designer Ledger.
Available at: <http://webdesignledger.com/inspiration/50-yellow-web-designs-to-inspire-you>
[Accessed 8 October]

Nielsen, J., 2001. 113 Design Guidelines for Homepage Usability. [online] Nielsen Norman
Group. Available at: <http://www.nngroup.com/articles/113-design-guidelines-homepage-
usability/> [Accessed 5 October 2014]

Paletton, n.d.. Paletton.com. [online] Available at:
<http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF> [Accessed 8 October]

Pozin, I., 2012. Top 7 Web Design Mistakes Small Business Make. [online] Forbes. Available at:
<http://www.forbes.com/sites/ilyapozin/2012/03/27/top-7-web-design-mistakes-small-
businesses-make/> [Accessed 6 October 2014]

Prickett, C., 2010. Drop-Down Menus in Modern Website Design. [online] Graphique. Available
at: <http://graphique-us.com/_blog/designIQ/post/Drop-
Down_Menus_in_Modern_Website_Design/> [Accessed 6 October 2014]

Rocheleau, J., n.d.. 31 Exciting New Purple Website Layouts for Design Inspiration. [online]
spyrestudios. Available at: <http://spyrestudios.com/31-exciting-new-purple-website-layouts-for-
design-inspiration/> [Accessed 8 October]

Roome, n.d.. Roome Home Page. [online] Available at: <http://www.roome.co.uk/> [Accessed 8
October]
Rouse, M., n.d.. 216-Color Browser-Safe Palette. [online] Tech Target. Available at:
<http://searchsoa.techtarget.com/definition/216-color-browser-safe-palette/> [Accessed 8
October]

Schiff, J. F., 2013. 13 Simple Tips for Improving Your Web Design. [online] CIO. Available at:
<http://www.cio.com/article/2385250/online-marketing/13-simple-tips-for-improving-your-web-
design.html> [Accessed 8 October]

Shuey, M., 2013. Worst Websites For 2013 The Ugliest Websites Youll Ever See. [online]
Global Web FX Inc. Available at: <http://www.globalwebfx.com/10-worst-websites-for-2013/>
[Accessed 6 October 2014]

Silicon Filter, 2011. The Slowest Loading Sites on the Techmeme Leaderboard: Scobleizer,
PreCentral, Cult of Mac [online] Available at: <http://siliconfilter.com/the-slowest-tech-news-
sites-scobleizer-pre-central-cult-of-mac-moconews-gizmodo-infographic/> [Accessed on 7
October 2014]

Smith, P., 2014. 20 Hilarious Terrible Corporate websites. [online] BuzzFeed, Inc. Available at:
http://www.buzzfeed.com/patricksmith/official-websites-that-need-to-be-stopped#2251kck
[Accessed 8 October 2014]

Smith, P., 2013. Ranking the Slowest-Loading News Sites and How They Can Speed Up
[online] Available at: < http://www.pbs.org/idealab/2013/03/ranking-the-slowest-loading-news-
sites-and-how-they-can-speed-up074/> [Accessed on 7 October 2014]

StoryCubes, n.d.. Rorys Story Cube Home Page. [online] Available at:
<http://www.storycubes.com> [Accessed 8 October]
There Are Things, n.d.. There are Things Home Page. [online] Available at:
<http://thesearethings.com/> [Accessed 8 October]

Thomas, T. M., 2013. A journalists guide to using Tumblr. [online] Poynter. Available at:
<http://www.poynter.org/how-tos/214081/a-journalists-guide-to-using-tumblr/> [Accessed 8
October]

Trendland, 2014. [online] Trendland, LLC. Available at: <http://trendland.com/> [Accessed 8
October 2014]

Tumblr, n.d.. Tumblr. [online] Available at: <https://www.tumblr.com/dashboard> [Accessed 9
October 2014]

Twitter, n.d.. Twitter logged out Page. [online] Available at:
<https://about.twitter.com/download?logged_out=1&lang=en> [Accessed 8 October]

Vaughan, P., 2012. 6 Guidelines for Exceptional Website Design and Usability. [online]
HubSpot, Inc. Available at: <http://blog.hubspot.com/blog/tabid/6307/bid/30557/6-Guidelines-
for-Exceptional-Website-Design-and-Usability.aspx> [Accessed 5 October 2014]

Yola, n.d.. What Makes a Good Website. [online] Yola. Inc. Available at:
<http://www.yola.com/blog/what-makes-a-good-website/> [Accessed 6 October 2014]

Youtube, n.d.. Youtube. [online] Available at: <http://www.youtube.com/> [Accessed 9
October 2014]

Zolas Vintage, 2012. [online] Zolas Everyday Vintage. Available at:
<http://libweb.anglia.ac.uk/referencing/harvard.htm> [Accessed 6 October 2014]

Zoossa, n.d.. Zoossa-conversation ark. [online] Available at:
<http://www.zoossa.com.au/conservation-ark> [Accessed 8 October 2014]
THE END