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 frst 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 atention 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 afect the look and feel of the
web site.

The importance of colour when designing a website

Colour deeply infuences the overall look and feel of a website and can
form the frst 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 afect 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
fnd the web safe palete in
many graphics programs.

!"#$%&'# )* +,-#./01234

5&67%,819!:#%.;*<%&,=>,%/012?4
!"#$% ' ()* +',) -./.012 "3.0/4 51.40-) ' -/)'$)1 #6'%) /#7) 83) .$)
"3.9$ .$ 83) 1#%38:

! 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 fll art with fat or solid
colour. Logos, cartoons, and drawings can be susceptible to ugly dithering when
the browser-safe palete is not used (Abigail Rudner, 2003).
How colour affect a website?

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

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

;3) )<'65/) .$ 8.5 9#83 $. 4#83)1#$% "3.9" *'$4#$%: ;3) =/) "#>) #" ?:?@:
A44#$% 4#83)1#$% '" "))$ .$ 83) *.B.6 #6'%)2 "6..83" 83) 81'$"#C.$:

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 atention but they will either
consciously or subconsciously notice their eyes geting 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
refected 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: htp://danjoedesign.com/
(Nyaggah, J. 2014)
Comparison
(Nag, 2002)
Bad website: htp://www.colourpixel.com/
Comparison
( Pep Zuijderwijk 2003)

Bad website: htp://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 flls 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 frst 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.
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 atraction from visitor to a website. And
group objects together. For example, Johnny Depp and Brad
Pit 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
oferings 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: htp://frostcollective.com.au/
Comparison
This website very confusing and no clear direction for user where
to proceed to fnd 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: htp://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, fash 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: htp://theclocksmiths.it/
Comparison
A complicated website with lots of graphics and sound. This
website has more prominent in the visual efect by providing
graphics, sounds and fash. Viewers without patient and lack of
high speed connection may be dissatisfed with the website.


Bad website: htp://home.disney.com.my/
Comparison
! Website load times have been
identifed as a crucial factor in
m e a s u r i n g w e b s i t e
performance.

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

! More than a quarter of
dissatisfed viewers are likely
t o d e v e l o p a n e g a t i v e
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 fles are often needlessly large. This is due to extra data
inside the PNG fle such as comments or unused palete entries as well
as the use of an inefcient DEFLATE compressor. PNG images can be
optimized using free tools like pngcrush that reduce the size of the fle
without changing or reducing the image quality.

! JPEG image fles 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 fles to reduce the size of the fle 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 wi th the arti cl es 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 Lonof Schif,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: htp://www.yeos.com.my/
Comparison
! This website did not fulfll 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: htp://www.hybridworks.jp/
Comparison
2. Linking Navigation
! Users want to know if they already visited a page
! Color diferentiation 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 diferent
colors everyday. People rely on colors to convey meanings for many
things (HyeYeonLim, 2013 ).

! The research stated that Experimental support for the diferentiation
of visited link colors is presented, along with analyses of the
advantages provided by diferentiating 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
fnd the posts and articles you want them to fnd. (wordpress, 2013)
! the Starbucks Company website also show the good linking
navigation, you can click on any buton 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, twiter.
" Good website: htp://www.starbucks.com.my/
Example
! Starbuckss facebook account after clicking the starbucks icon
in their website.
" Good website: htp://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, <
htp://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,< htp://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, < htp://
www.designandpromote.com/color-theory-the-importance-of- color-in-web-
design/ >

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

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


GaryW.Priester,2013, Figure_07, photograph, viewed 10 October
2014,<htp://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,<htp://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,<htp://todaysetiquete.blogspot.com/2011/06/agree-to-
disagree.html>.

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

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

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

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

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

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

Yugop.com. 2007, Motion Logic With Rigid Dynamic. Drag Each Cell To Interact, viewed 9
th
Oct
2014, htp://www.yugop.com/

Kakade, S 2013, 8 Reasons Your Website Is Slow, viewed on 9th October 2014 <
htp://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
< htp://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< htp://zoompf.com/blog/2013/04/top-5-causes>


Tips For Addressing Page Loading Speed, viewed on 9th October 2014
< htp://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
< htp://onlinemediamasters.com/why-is-wordpress-so-slow/>

Tips to Speed Up your Website / Blog Loading Time, viewed on 9th October 2014
< htp://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
< htp://www.digital6technologies.com/speed-website-tips-tricks/4063>

Why is my Internet Connection so slow?, viewed on 9th October 2014
< htp://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
< htp://www.minimalwall.com/2011/10/13/breathe-2/>

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

Jennifer Lonof Schif, 2013, 13 simple tips for improving your web design, viewed on
8 October 2014,

htp://www.cio.com/article/2385250/online-marketing/13-simple-tips-for-
improving-your-web-design.html

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

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

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

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