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