Assignment 2

Group Leader Satyaganesh A/L Sukumaran 0314328

Group Member Wong Liian 0314200
Group Member Wong Shau!in 031443"
Group Member Mar#us $uen %ee Wern 0301&00
Group Member 'heah Li($ing 031&2&8
The
Fivesome
A)esome Website *nterphase
Site Loading +ime
'o,ours
Great -a.igation Links
*ntrodu#tion

Taking a website from zero to a few hundred or even a few

thousand visitors a month is not easy. The online world in
an attention economy.
/Attention is 0inite1 and there0ore s#ar#e2 So i0 you )ant
peop,e to pay attention to you1 you need to earn it. (
M#Guinness
3ut )hat makes your )ebsite stand
out4

CREATIVITY is the key to market your website

and make it outstanding. But at the same time it must
be effective.

Everyone value creativity differently as different people

has different interests.

An ecellent website must be effective! innovative!

creative and attractive.
Article 1 :
Awesome
Website
Interphase

Based on the Article "! it can be said that humans

tend to perceive their liking. #n addition! humans
are able to recognize an ob$ect based on
eperiences and observations in life.

According to %&ooper! 2'"()! it is said that no one

can predict or make any assumptions in life. This is
because there are many evidence that shows
things and events changes according to different
situations.

The more we have actually seen and used these

ob$ects! the more deeply we understand what they
are and how they can be used.

Based on personal eperience and third party

endorsement* helps in generalization for the
population.
We in#orre#t,y predi#t odds
-
5o) )ou,d the
person kno) the
#ustomer )ou,d
)in a0ter 6 rounds4
-
This is against all
probabilities as no
one can predict the
future assumptions
cannot predict
continuous and
permanent result.
We be,ie.e our memories more
than 0a#ts

+ur memories are highly fallible and plastic. And

yet! we tend to subconsciously favour them over
ob$ective facts.

,acts provides solid and concrete evidence as

compared to which are baseless.

-henever possible! look at the facts. Eamine the

data. Because facts are proven through epriments
Eamples of
Awesome .
Creative -eb
/esigns
This website is simple and user0friendly. The reason is
you can have an overview of a homepage rather than
scrolling up and down! the selection buttons are visible!
and the fonts can be easily read.
5omepage
#n0tet citation * bluezoom.bz
7eop,e
7ages
This site did
something
interesting! 1uirky
and fun way in the
2eople 2ages by
using a rollover
image with cartoon
overlays.
#n0tet citation * 3ilchrist &! 2'"(.
About
8s
7ages
This site has put a
visual timeline
rather than an
essay about their
company history!
their
achievements and
milestones.
#n0tet citation * 3ilchrist &! 2'"(.
8se0u, Gami0i#ation
4.5 site allows users to mi . match and 6try on with their products by
gamifying the process. They created a visual dressing room and also a
character to dress up them. 7o that users have an idea of how they look
like when they try on the products.
#n0tet citation * 3ilchrist &! 2'"(.
Article 2:
Site Loain!
Time

These days #nternet is part of most peoples8 life. -ithout

the internet! people would feel as if they are losing an
essential ingredient in their life.

According to %Temmel.5!nd)! internet has changed

peoples lifestyle drastically whereby internet is involved
in almost everything in a human life.

4owever! there several issues that can be related to the flaws of

using internet. The biggest flaw yet is to ensure viewers do not
wait long to view the website.

-ho doesn8t like webpages that downloads fast9 This would

definitely increase the satisfaction of the customers when they
feel and are comfortable with the efficiency of the webpage.

,or eample! let8s say a webpage takes almost several minutes to

download and be loaded! people will be fed up and eventually
create a bad impression which may decrease the chances of a
webpage to serve its purpose.

Thus! the webpage creators and designers must come with an

appropriate! creative and innovative way to decrease the overall
size of the webpage in order to speed up the loading time.

5oreover! this problem of slow loading can become a ma$or

concern through (
rd
party endorsement whereby people starts
to talk bad about the slow service a webpage offers. This will
eventually delete all possible viewers to the webpage

According to the article itself! there is a way for viewers to

know if a particular webpage is slow or fast. This can be done
by a simple eperiment.

,or eample! to test the speed of the webpage! $ust key in

any webpage you would like to visit and press the enter key.
#mmediately hold your breath. &ontinue to hold your breath
until the webpage downloads. #f by any circumstances you
need to inhale and the webpage has not loaded yet! this
evidence proves that the webpage is slow.
Eample of how image and download
speed related to one another
-ebhosting Talk!2'":

Besides that! the article also suggested that a webpage should not be
larger than ;'<. ,urthermore! it is also suggested that ('< to be used.
('< is considered to be the best size for a webpage %4all.=.4! nd).

There are several ways that can decrease a file size. These includes
augmenting graphics! using least possible 1uality %.$pg)! balancing smallest
amount of colour%.gif) and ensuing web0coding principles %4all.=.4! nd).

According to the article! below are the recommendations to decrease a

webpage size to be at ('<*

>se graphic images from the range of :0?<

2"? is the ultimate web safe colour pallet as more colours used increases
image size

>sage of solid colours when designing images

The more colour! the higher the <. The higher the < value! the slower the
webpage speed.
5o) di00erent image 0ormats a00e#ts the )ebpage ,oading
time
There should be 2
column to
distinguish both
images clearly
The image is
pielated
7torm.@!2'":
3ad Webpage*
Augop.com *
Background colour
white
-ords too small
,ont used is not
appropriate
-eird interphase
=elative slow
loading time
Black and red
colour not effective
to gain viewers8
interest
/ifferences between good and bad webpages
Bakamura.A! 2''C
Good Webpage* D,rost &ollective.comE *
&lear and visible heading
Effective tabs
Appropriate font used
-ebpage looks fun and eiting
Foading time was fast
7timulates reader8s and viewer8s mind
,orest &ollective! 2'":
Arti#,e 39
C"L"#RS
About &olors

&hoosing the optimum colors when creating a website is

crucial as a perfect color palette is able to*
i. &ommunicate the message
ii. 7trengthen the uni1ueness of the idea
iii. &reate brand awareness
>nderstanding &olors

There are few basic fundamentals of the color wheel to

select an effective color scheme in creating a website.
i. 2rimary colors G basis of the color spectrum
ii. 7econdary colors G miing of two primary colors
together
iii. Tertiary colors G mi of primary and secondary colors
together
iv. &omplementary color scheme G color opposite each
other on the color wheel
>nderstanding &olors cont.
v. 7plit0 complementary color
scheme G variation of
complementary color scheme
vi. Analogous color scheme G colors
net to each other
vii.Triadic color scheme G colors
evenly spaced around the color
wheel
&olor -heel
Tools for color scheme

Fist of online tools to make life easier in color scheme

selection*
i. <uler 0 https*HHcolor.adobe.comHcreateHcolor0wheelH
ii. &olorEplorer 0 http*HHwww.coloreplorer.comH
iii. &heck my &olors 0
http*HHwww.creativeblo1.comHcolourHtools0colour0sc
hemes0"2"2":('
Browser0safe &olor 2alette

According to an article by 3ary -. 2riester! bro)ser

sa0e pa,ettes consist of 21: #o,ors that display solid!
non0dithered and consistent color on any screen that
able to display at least I0bit color %2;? colors). This is
because only 2"? out of the 2;? colors can be display
eactly on all computers.
Eample of -ebsite with great color
schemes
#n0tet citation* ,rancis.&! 2'"(
&ontrast

#mportant element to make attractive website

A good contrast depends on the choice of color selection

Jalue difference between the colors on the design 0 #52+=TABT

Jalue is how bright or dark the color is

-hite on white is no contrast G can8t see difference

To direct the audience8s attention on something specific on the

design
&omparison +f &ontrast
3ood &ontrast Bad &ontrast
INTERACTIVE
MEDIA
8se o0 #o,or di00eren#e )ith .a,ue
di00eren#e

&olor used above*

High value blue font with low value
red background
INTERACTIVE
MEDIA
8se o0 #o,or di00eren#e )ithout
#onsidering the .a,ue di00eren#e
&olor used above*
Medium value blue font with
medium value red background
&ontrast cont.

Based on the comparison! two colors of the same value

will produce an effect known as 6vibrating. Jiewers may
eperience a pulsing effect that is very hard on the eye.
This scenario will affect the overall impression on the
website negatively.

>se of colors with value difference in producing contrast

is very important
&ontrast Evaluation

Kuick way to evaluate whether is it a good contrast is

to convert the entire thing into grey scale.

3ood contrast is when the design still looks clear and

easy to read
Eamples To Evaluate &ontrast
3ood &ontrast Bad &ontrast

&lear and easy to read

Fittle color difference between

tet and background. 4ard to
read
-ebsite with 3ood &ontrast
#n0tet citation* ,rost collection 2'":
-ebsite with Bad &ontrast
#n0tet citation* /avlin A. 2'"(
Article $:
%reat &avi!ation
Lin's(
;ey 7oints9
Ensure that all visitors have to enter your site from your home
page and move on to click on hyperlinks in an orderly fashion.
The name or logo of your company followed with a page name
should always be on top of every page in your web site that
would also be your link back to your home page. 4ence! there
will be no guessing of what your web site does. According to
%Aragon. <! 2'"() she said that visitors who visit your website
should be able to find what they are looking for in a few clicks.
#n addition! people shouldn8t have to think when looking at your
website. They must be able to $ust glance through and
understand what is going on.
Aou must always put links in contet to provide visitors an
insight on where the link will lead them.
>sage of link titles is highly recommended where it improves the
navigation usability.
#t is advisable to use blue for unvisited and purple for visited as
a color scheme in your web site in order for your navigation to
work well. This is becauseL people usually get confused with
other colors if it is too colorful.
At least two forms of navigational schemes should be provided to
your visitors as a form of alternatives to make sure they
understand your primary navigation. According to %Aragon. <!
2'"() she also mentioned that! the web designer should give
people more than one way to get where they are heading. This
could be done by providing people various ways of finding the
information on your website and by making it easier for people
to search for information.
#n0tet citation* 5cFaughlin. / %2'":).
A Website shou,d pro.ide na.igations as su#h9
<i00eren#es bet)een Good and 3ad Websites -a.igations
Bad -ebsite Bavigation
#n0tet citation* Findstrom. = %2'"().
Bo company8s logo.
Bavigation buttons
should be seen
horizontally on the
top.
The company8s
header is too small
and should be
placed in the
middle.
Another Bad -ebsite Bavigation
#n0tet citation* Findstrom. = %2'"().
The font size is too
small.
There are too many
links of items in the
website.
3ood -ebsite Bavigation
#n0tet citation* 7arah! <ahn. A %2'"').
4eadings are large and
very clear.
The color palette is soft
and clean which matches
the atmosphere of the
website.
&ontact form is nicely
laid out.
The call0to0actions
buttons are large and
easy to find! read and
click.
Another 3ood -ebsite Bavigation
#n0tet citation* /igitasFBi Betherlands %2'":).
3ood arrangement of
navigation buttons.
There are categories
used to differentiate
products.
7uitable and clear font
size is used.
=eference Fist

Allan! /. %2'":). Theory of the Color Wheel. DonlineE About.com.

Available at* http*HHwebclipart.about.comHodH&ategoriesHssHTheory0
+f0The0&olor0-heelM(.htm

Aragon. <! 2'"(! 6 Brain-dead Simple Ways to Improve our

Website!s "sability# D+nlineE. Available at*
http*HHwww.kathrynaragon.comHimprove0website0usabilityH

Avangate.com! %2'":). Choosing the $ight Colors for our Web

Site. DonlineE Available at* http*HH
www.avangate.comHavangate0resourcesHarticleHcolor0web0site.htm

Beachy! -. %2''C). Become a %aster &esigner' $ule Three'

Contrast# Contrast# Contrast ( )o %edia* + Creativity at Work.
DonlineE 3omedia.us. Available at*
http*HHgomedia.usHzineHtutorialsHrule0three0contrast0contrast0
contrastH

Bluezoom.bz! %2'":). Blue,oom. DonlineE DAvailable at*

http*HHbluezoom.bzE

&ooper! B. B. % 2'"(). I &ommon Thinking 5istake +ur Brains

5ake Everyday and 4ow to 2revent Them. Available from
*http*HHblog.bufferapp.comHthinking0mistakes0I0common0
mistakes0in0how0we0think0and0how0to0avoid0them
=eference Fist &ont.

&reativeblo1.com! %2'":). The -. best tools for choosing

a colour scheme ( )raphic design ( Creative Blo/.
DonlineE Available at* http*HH
www.creativeblo1.comHcolourHtools0colour0schemes0"2"
2":('

/avlin! A. %2'"(). Color Combinations from 0ell - &eath

Sentence for our &esigns. DonlineE /esign -eb <it.
Available at* http*HHdesignwebkit.comHweb0and0
trendsHcolor0combinations0hell0death0sentence0designsH

/igitasFBi Betherlands! 2'":! 1!neill# D+nlineE Awwards.

Available at*
http*HHwww.awwwards.comHbest0websitesHo0neill

,rost &ollective!2'":! ,rost DAvailable at*

http*HHwww.frostcollective.com.auH E

,rancis! &. %2'"(). 23 Stunning Website &esigns with

)reat Color Schemes. DonlineE +netrapiel. Available
at* http*HHwww.onetrapiel.comH2'"(H"'H2;H:'0
stunning0website0designs0with0great0color0schemesH
=eference Fist &ont.

3ilchrist! &. %2'"(). 0ow to %ake our Website %ore Interesting

and 4inkworthy. DonlineE 4itreach.co.uk. DAvailable at* http*HH
www.hitreach.co.ukHwpcontentHuploadsH2'"(H'"H3amification.$
pg
E

3ilchrist! &. %2'"(). 0ow to %ake our Website %ore Interesting

and 4inkworthy. DonlineE 4itreach.co.uk. DAvailable at* http*HH
www.hitreach.co.ukHwp0contentHuploadsH2'"(H'"H,un0people0pag
e0@ellyfish.$pg
E

3ilchrist! &. %2'"(). 0ow to %ake our Website %ore Interesting

and 4ink worthy. DonlineE 4itreach.co.uk. DAvailable at* http*HH
www.hitreach.co.ukHwp0contentHuploadsH2'"(H'"H(C07ignals0Ab
out0>s02age.$pg
E

4all.=.4!nd! 5ile Si,e and &ownload Time DAvailable at*

http*HHweb.mst.eduHNrhallHwebMdesignHsize.html E

Findstrom. =! 2'"(! &esignchapel# D+nlineE. Available at*

http*HHwww.designchapel.comH DAccessed on Oth +ctober 2'":E

Findstrom. =! 2'"2! Showcase 6 The &esign Chapel7 D+nlineE.

Available at* http*HHcargocollective.comHdesignchapel DAccessed
on Oth +ctober 2'":E

=eference Fist &ont.

5c3uiness! 5. %n.d.) 2 Creative Ways to 8ttract %ore 9isitors to

our Website. DAvailable at* http*HH
OOu.comHarticlesHC'C'H:0creative0ways0to0attract0more0visitors0to0
your0website
E

5cFaughlin. /! 2'":! $elevant $enegade Strategies to :roduce $eal

$esults7 D+nlineE The =enegade Feader. Available at*
http*HHtherenegadeleader.comHassessmentsH DAccessed on Oth
+ctober 2'":E

Bakamura.A!2''C! Eye0 2ro$ect DAvailable at* http*HHyugop.netHfeed

2riester! 3. %2'":). Consistent Colors 5or our Site - 8ll ou ;eed

To <now 8bout Web Safe Colors. DonlineE 4tmlgoodies.com.
Available at* http*HH
www.htmlgoodies.comHtutorialsHwebMgraphicsHconsistent0colors0for0
your0site0all0you0need0to0know0about0web0safe0colors.html

7arah! <ahn. A! 2'"'! Showcase of Interesting ;avigation &esigns#

D+nlineE 7mashing 5agazine. Available at*
http*HHwww.smashingmagazine.comH2'"'H'OH'CHshowcase0of0interes
ting0navigation0designs
H

7torm.@!2'":! 0T%4 for 8bsolute Beginners DAvailable at*

http*HHwww.$onstorm.comHhtmlHimages.htm E
=eference Fist &ont.

Temmel.5!Theuermann.5!>kowitz.E!Jogrin.T!nd! The Impact of

internet on our daily life DAvailable at*
https*HHwww.tru.caHcp$Hessay.html E

-ebhosting Talk!2'":! Improve web page download speed

DAvailable at*
http*HHwww.webhostingtalk.comHwikiH#mproveMwebMpageMdown
loadMspeed
E