Leader: Teh Hooi Lene 0314220

Chan Sin Yee 0314135

Ho Jing Shing 0314357
Hau Siew Ting 0314909
Lim Le Xuan 0314540
Group name:

Summary of the Article

Colour should be one of your first concerns when it comes time to start
your web site design

Currently web browsers only share 216 common colours. When designing
key elements in your web site you should stay within the 216-color pallet.

Should always use a browser safe colour when using solid colour as a
design element.

Red will makes people become tired and fatigued ; Using yellow colours
for banners and advertisements will receive more attention from the
viewer's eye.

Do not make large parts of your web site with bright colour.

We agree with the articles content.
Colour can control

or affect the look and feel of the
web site.

The importance of colour when designing a website

Colour deeply influences the overall look and feel of a website and
can form the first impression about a company for visitors.( Daniela
Baker, 2011)

Colours can be investigated further and help web designers to
process their designs in more depth to achieve the desired results.

The right colours will help web designers provide users with
certain emotional impacts.

Colours not only have an impact on or vies, they also provide
other stronger stimulations.

Colours can affect the readers moods and provide sensations.

Colour is used to get your business noticed and positively connect
potential clients. (Amber Tripp, 2014)

How colour affect a website?

1. Web-safe colour

Web Safe colours, also
known as browser safe
colours, were introduced
many years ago, when the
web was in its infancy. And
despite the advances in
graphics cards, monitors and
browsers, you can still find
the web safe palette in many
graphics programs.

(Sabrina H. DeLay,2014)

Figure_07(GaryW.Priester,2013)
Using a Web Safe colour, should produce a cleaner image like the one
shown on the right.

If your web site has a solid colored background, make it a Web Safe colour.
That's your guarantee the colour will not embarrass you when it displays on
the other computer platforms.(Gary W. Priester, 2013) .

Web safe colour is especially helpful when we want to fill art with flat or solid
colour. Logos, cartoons, and drawings can be susceptible to ugly dithering
when the browser-safe palette is not used (Abigail Rudner, 2003).

How colour affect a website?

2. Dithering
creates lots of new transitional pixels, creates a larger file size.

We should use dithering if the image contains a transition between colours as
shown here.

The example on top with no dithering shows banding. The file size is 2.2K.
Adding dithering as seen on the bottom image, smooths the transition.

Figure_08(GaryW.Priester,2013)

3. Bright Colour
Do not make large parts of your web site with bright colour. Only
use them in areas where you want the visitor to focus on.

It might get your visitors attention but they will either
consciously or subconsciously notice their eyes getting fatigued.

This will make them not want to look at your web site for long
periods of time.


Yellow, pure bright lemon yellow is the most fatiguing colour. The
answer comes from the physics of light and optics. More light is
reflected by bright colours, resulting in excessive stimulation of the
eyes. Therefore, yellow is an eye irritant. For best results, use
softer tints of the hue or small quantities.

4. Bright Colour - Yellow
Good website: http://danjoedesign.com/
(Nyaggah, J. 2014)
Comparison
(Nag, 2002)
Bad website: http://www.colourpixel.com/
Comparison
( Pep Zuijderwijk 2003)

Bad website: http://www.saltedherring.com/
Comparison
Red has been shown to increase blood pressure and heart
rate. It increases appetite, restlessness and nervous
tension. Creating a site with bright red is a very poor idea!

Bright red has the longest wavelength. When viewing
these colours the human lens has to adjust to focus, and it
tries to focus on both. This tires the eyes very quickly and
will give the viewer a headache.

5. Bright colour - Red
Instructions:
1. Make sure the image below fills your computer screen.
2. Look at the image at a distance of 12 inches or 30 centimetres from the screen.
3. Stare at the black dot in the middle of the red rectangle for 30 seconds. Keep your
focus on the black dot or the test will not work.
4. After 30 seconds, shift your focus to the black dot in the middle of the white
rectangle. Once again, you must focus on the black dot in the middle of the white
square or this will not work.

Did you see red? Probably not. What did you
see?


A web site design should not be too confusing nor should it be too simple.

When looking at A and B, you see two objects that look like a circle and a square.

We see these object because humans like to relate.

We have the ability to create what is not there in order for us to recognize an
object.

We like to use the ability too - use our mind to make connections.

When looking at C you should see two things. The first thing you see are four
groups of two vertical lines because humans like to group objects together. The
second thing you should see is a circle because humans like to relate.

Two ideas to keep in mind when designing a web site are humans like to relate
and humans like to group objects together.
A B C
Summary of the Article
We agree with the article. It mentioned that humans like to
relate. Its like the websites pictures is related with the topic
which will earn more attraction from visitor to a website. And
group objects together. For example, Johnny Depp and Brad
Pitt are under actor category while Justin Bieber and Nicki
Minaj are under singer category. Its mean that same things
put to inside a same category. So that visitor will have the
clear direction.

(Jenny, 2011)

(FeaturePics, 2014)
Visitors need very clear and reinforcing guidance to get them to do what
you want.

You need to guide them in the same way through your page to complete
the desired action. Just like an author who tells his story in a sequence of
ordered chapters, you want to tell the story of your product or service
offerings in a pre-determined order of web page elements.

High converting landing pages use a variety of visual cues and an
understanding of typical web page viewing habits to immediately put that
leash on visitors and guide them through to conversion.

Usability studies have shown that viewers tend to relate to and be drawn
to images of people that either resemble or appeal to them. Try to stay
clear, though of images of people who are obviously professional models
(Engine Ready, Inc. 2014).

How to create an interesting website?
The website have clear direction and the index page is categorized
with few topics which is very tidiness. Visitor can easily proceed to
the landing page which they preferred. The pictures they used is
relatable with the topic.

(Frost*collective, 2014)
Good website: http://frostcollective.com.au/
Comparison
This website very confusing and no clear direction for user where
to proceed to find out more. No clear and reinforcing guidance
for visitor, visitor couldnt identify what is this website about.
Nothing is relatable and the whole vision is bad.

(Yugop.com, 2007)

Bad website: http://yugop.com
Comparison

There are many companies website put top-notch graphics and sound
into their web-page.

Most of the viewing in our web site on a screen that is between 15 and 19
inches wide, can only see 216 colors, and can only download at 28.8 kb
per second.

If viewer need to fully downloaded faster, they really need to cut down on
the size of the page.

For a web page to be successful it needs to download quickly and look
good. Use design more, graphics less.
(shawn hessinger,2013)

Summary of the Article
(Mustafa Ziraba, 2013)

We agree that graphics and sound will slow down the
speed of the loading website. Viewer with slow speed
connection will be impatient for the loading pages.

Which kind of website will viewer
prefer as long as they do not have a
high speed connection?
Which will loads faster?

The text of the page, any graphics it contains, video and sounds, will
be one of the element to cause a slow loading web pages.
(rob.schifreen, 2012)

The most common reason for slow websites; there are lots of
images, all of which are full-size and uncropped.

Flash and sounds are great tool for adding interactivity or animation
to a website. However, flash and sounds are also very bulky and
causes websites to load slowly. (Sachin Kakade,2013)

A simple designed website without fancy graphics.
This site will be loading faster than the bad website (on next
slide) because of its simple design without adding many graphics
in their webpage.

Good website: http://theclocksmiths.it/
Comparison
A complicated website with lots of graphics and sound. This
website has more prominent in the visual effect by providing
graphics, sounds and flash. Viewers without patient and lack of
high speed connection may be dissatisfied with the website.


Bad website: http://home.disney.com.my/
Comparison
Website load times have been
identified as a crucial factor in
measuring website
performance.

In 2006, Akamai established
that 40% of online viewer feel
that the most influential factor
for them to revisit a site is
whether the website will load
quickly.

More than a quarter of
dissatisfied viewers are likely to
develop a negative perception
of the company.
How a Slow Website Impacts Your Visitors

(techidea.co.nz, 2012)

1. Optimized Images

Unoptimized images as any image that can be reduced in size without
visual impact to your user, also known as lossless optimization. Images
that are optimized using lossless methods are visually identical to their
original images, just stripped of extraneous metadata that helps describe
the image .( Mark Isham, 2013)

PNG image files are often needlessly large. This is due to extra data
inside the PNG file such as comments or unused palette entries as well
as the use of an inefficient DEFLATE compressor. PNG images can be
optimized using free tools like pngcrush that reduce the size of the file
without changing or reducing the image quality.

JPEG image files can also be needlessly large for similar reasons to PNG.
By using free tools such as jpegtran you can convert JPEGs into
progressively rendered JPEG files to reduce the size of the file without
losing image quality.

2. Stop kowtowing to Flash.
Flash can be problematic. Sure, Flash can be impressive.
But more often than not, its more of a show-stopper
than a showstopper. If you need to use it at all, use Flash
in moderation, as a component within the page.
(minimalwal, 2011)

3. Design more, graphic less.
Graphic images should be as small as possible to avoid longer loading time.

Keep in mind the colour being use as we know the more colour we have in
a image the bigger it's going to be.

For Example:


There are many companies website put top-notch graphics and sound
into their web-page.

Most of the viewing in our web site on a screen that is between 15 and 19
inches wide, can only see 216 colors, and can only download at 28.8 kb
per second.

If viewer need to fully downloaded faster, they really need to cut down on
the size of the page.

For a web page to be successful it needs to download quickly and look
good. Use design more, graphics less.
(shawn hessinger,2013)

Summary of the Article
Navigation should answer questions such as where am I? Where can I go
from here? And where was I already.

Name or logo of your company along with a page name should be on the
top of every page in your website.

There should be no guessing of what your website does for your visitor.

The links to pages within your website or links to an outside webpage.

Either way of put links in context or in words.

Links title improve the navigation usability.
Summary of the Article
Using color navigation to work well

Use blue for unvisited and purple for visited as a color scheme

Prevent using blue, red or black color

Easy to understand the Primary navigation if the website have at least
two forms of navigational schemes
Summary of the Article
We agree with the articles content.
Navigation is the way to guide readers through a
website.

1. Company logo & name on top of the
website

Company logo & name must be on the top of every page in your
website.

Company logo & name should be your link back to your home page.

Do not let your visitor guessing of your website.

"Your logo is an important part of your brand, so make sure it's located
prominently on your site, "Also, it's a good rule of thumb to link your
logo back to your home page so that visitors can easily navigate to It."
(Jennifer Lonoff Schiff,2013)
Their website has very clear navigation and when you want to go
back to the home page, you can just go back by clicking the
company logo on the top of the website.
Visitors can clearly see the company name and logo when visit to
Yeos company website.
Good website: http://www.yeos.com.my/
Comparison
This website did not fulfill the condition. the company logo only
appear on the middle left in the website
There is no any clearer information that tell visitors that this is our
home page.
When you clicking their company logo, you cannot go back to the
homepage of the website.
Bad website: http://www.hybridworks.jp/
Comparison
2. Linking Navigation
Users want to know if they already visited a page

Color differentiation as blue for unvisited and purple for visited as color
scheme

Using other colors will just confuse people

color is a central part of our lives. People look at and react to
different colors everyday. People rely on colors to convey meanings
for many things (HyeYeonLim, 2013 ).

The research stated that Experimental support for the differentiation
of visited link colors is presented, along with analyses of the
advantages provided by differentiating link colors (Tim Halverson and
Anthony J. Hornof, 2004).
3. Links to pages to an outside
website
Visitors will always want to know Where can I go from here

There must a link to pages within your website

The linking navigation helps people move around your site when you
have a clean navigation menu in the sidebar and/or the footer. It
helps people find the posts and articles you want them to find.
(wordpress, 2013)
the Starbucks Company website also show the good linking
navigation, you can click on any button on their website, the
website will automatically brings you to the page you want to
view and also the outside website linking as well, such as
facebook, twitter.
Good website: http://www.starbucks.com.my/
Example
Starbuckss facebook account after clicking the starbucks icon in
their website.
Good website: http://www.starbucks.com.my/
Example
Gary W. Priester, 2013, Consistent Colors For Your Site - All You Need To Know
About Web Safe Colors, HTML goodies, viewed on 8th October 2014, <
http://www.htmlgoodies.com/tutorials/web_graphics/consistent-colors-for-
your-site-all-you-need- to-know-about-web-safe-colors.html>

Abigail Rudner, 2014, Fireworks MX Fundamentals, Peachpit, viewed on 8th
October 2014,< http://www.peachpit.com/articles/article.aspx?p=31078>

Amber Tripp, 2014, Color Theory: The Importance of color in web design,
Design and promote, viewed on 8th October 2014, <
http://www.designandpromote.com/color-theory-the-importance-of- color-in-
web-design/ >

Daniela Baker,2011, The Importance of Color in Website Design, Designrfix,
viewed on 8th October 2014, < http://designrfix.com/web-design/importance-
color-web-design>

Sabrina H. DeLay,2014,how, photograph, viewed 10 October 2014,
<http://www.govloop.com/community/blog/letting-go-of-the-how/>


GaryW.Priester,2013, Figure_07, photograph, viewed 10 October
2014,<http://www.htmlgoodies.co m/tutorials/web_graphics/consistent-
colors-for-your-site-all-you-need-to-know-about-web-safe- colors.html>.

GaryW.Priester,2013, Figure_08, photograph, viewed 10 October
2014,<http://www.htmlgoodies.co m/tutorials/web_graphics/consistent-
colors-for-your-site-all-you-need-to-know-about-web-safe- colors.html>.

Jay Remer, 2011, Agree to disagree, photograph, viewed 10 October
2014,<http://todaysetiquette.blogspot.com/2011/06/agree-to-disagree.html>.

Elliott Brown ,2014, Birmingham & Fazeley Canal - Fleet Street - new decking -
sign - Caution Slippery floor surface, photograph, viewed 10 October 2014,
<https://www.flickr.com/photos/ell-r- brown/15183964278/in/pool-
yellowwarning >.

Nyaggah, J. (2014). Owlses. [online] Available at: http://danjoedesign.com/
[Accessed 10 Oct. 2014].

Pep Zuijderwijk , (2003). Saltedherring. [online] Available at:
http://www.saltedherring.com/ [Accessed 10 Oct. 2014].
Engine Ready, Inc. 2014, Treating Your Visitors Like Untrained Dogs, viewed 9
th
Oct 2014,
http://www.engineready.com/sem-resources/sem-newsletter/treating-your-visitors-like-
untrained-dogs.php

Feature Pics. 2009, [image] viewed 9
th
Oct 2014,
http://www.featurepics.com/online/Construction-Group-548668.aspx

Frost Collective. 2014, viewed 9
th
Oct 2014, http://www.frostcollective.com.au/

Walsh, J. 2011, [image] viewed 9
th
Oct 2014, http://www.asdeducation.com/relate

Yugop.com. 2007, Motion Logic With Rigid Dynamic. Drag Each Cell To Interact, viewed 9
th

Oct 2014, http://www.yugop.com/

Kakade, S 2013, 8 Reasons Your Website Is Slow, viewed on 9th October 2014 <
http://social.msdn.microsoft.com/forums/ie/en-US/c7133cd3-1a9c-49c5-
a267ba556d619366/8-reasons-your-website-is-slow>

Schifree, R 2012, How To Diagnose Slow-Loading Web Pages, viewed on 9th October 2014 <
http://www.techsupportalert.com/content/how-diagnose-slow-loading-web-pages.htm>

Isham, M 2013, 5 Common Causes of Slow Website Performance, viewed on 9th October
2014< http://zoompf.com/blog/2013/04/top-5-causes>


Tips For Addressing Page Loading Speed, viewed on 9th October 2014
< http://smallbiztrends.com/2013/10/website-page-load-speed.html>

Why is WordPress So Slow And 5 Ways to Fix it, viewed on 9th October 2014
< http://onlinemediamasters.com/why-is-wordpress-so-slow/>

Tips to Speed Up your Website / Blog Loading Time, viewed on 9th October 2014
< http://pcsplace.com/blog-tips/tips-to-speed-up-your-website-blog-loading-time/>

How to Speed up Your Website Tips and Tricks, viewed on 9th October 2014
< http://www.digital6technologies.com/speed-website-tips-tricks/4063>

Why is my Internet Connection so slow?, viewed on 9th October 2014
< http://www.monitor.co.ug/artsculture/Reviews/Why-is-my-Internet Connection-so-slow-/-
/691232/2032104/-/cd8yx3z/-/index.html>

Posts Tagged Just say no, viewed on 9th October 2014
< http://www.minimalwall.com/2011/10/13/breathe-2/>

Hye-YeonLim,2013,The Effect of color in Web Page Design, viewed on 8 October
2014,
http://www.edb.utexas.edu/minliu/multimedia/The%20Effect%20of%20Color.pdf

Jennifer Lonoff Schiff, 2013, 13 simple tips for improving your web design, viewed on
8 October 2014,
http://www.cio.com/article/2385250/online-marketing/13-simple-tips-for-improving-
your-web-design.html

Hybrid work, 2014, viewed on 8 October 2014, http://www.hybridworks.jp/
Starbucks Corporation, 2014, viewed on 8 October
2014,http://www.starbucks.com.my/

Tim Halverson and Anthony J. Hornof, 2004, Link color guide a search, viewed on 8
October 2014
http://pdf.aminer.org/000/088/545/link_colors_guide_a_search.pdf

Wordpress, 2013, Good navigation link, viewed on 8 October 2014,
http://codex.wordpress.org/Good_Navigation_Links

Yeo Hiap Sheng Malaysia Berhad, 2014, Yeos The Natural Choice, viewed on 8
October 2014,http://www.yeos.com.my/