C

o
l
o
r

N
a
v
i
g
a
t
i
o
n
s

L
o
a
d
i
n
g

P
a
g
e

G
r
a
b
s

A
t
t
e
n
t
i
o
n

lnLerneL source:hup://Lopshelfweb.com/wp-conLenL/uploads/
2014/02/web_deslgn.[pg
lL ls lmporLanL Lo grab vlslLors' auenuon ln Lhe rsL
8 seconds, bored vlslLors wlll noL suck Lo your web
page longer and your web page mlghL funcuon [usL
Lo be Lhe Coogle search (norLon, 2012).
lnLerneL source:hup://fc01.devlanLarL.neL/fs42/l/2009/133/f/8/
MAClC_8ALL_by_SL107.[pg
WebslLe deslgn should be funcuonal.
! no broken codes/llnks

WebslLes musL be as creauve as posslble.
! L.g : Lhe verucal SpllL layouL of CreaL 8rand
SpllL layouL of CreaL 8rand (Spooner, 2013)
!"#$ &' $"( )(*+,#- ./-&$ 0#123$4
A comblnauon of Lwo plcLures resulung ln a
creauon of one background.





1hese Lwo spllL layouL are usually conLrasLed
wlLh !"#$ "&! '()*+ ,-'-# .,*/0/..

lnLerneL source :hup://dezayo.us/blog/36-car-webslLe-deslgns-for-your-lnsplrauon
Pow should LexL be presenLed on WebslLes?
! Clear and SLralghL Lo Lhe polnL
! 8reak lnLo shorLer paragraph
! resenLed ln bulleL formaL
56#7/-(8
.#-$(9 :(**&;< !(='&$(
Slmple
Colorful
SLralghL lorward
Show lmporLanL olnLs
1he l Sharp pauern of LexL mlghL auracL and lncrease
Lhe percenLage of vlslLors (Chapman,2010)
1he l sharp pauern (Chapman, 2010)

Accordlng Lo ur. nlelsen, he sLaLes LhaL lnLerneL users
are less Lo read conLenL onllne, users wlll only read
28 of Lhe LexL on a web page (Chapman, 2010).
lnLerneL source: hup://slmpllclLy.laserche.com/slLes/
defaulL/les/sLyles/wldLh-330/publlc/!akob20nlelsen
20phoLo.[pg

>"( ?7/2*$#;,( 2@ A2-2*'
ldea creauon
Convey messages
lnvoke feellngs
AccenLuaLe areas of lnLeresL
!"&," 92
123 /*(@(*4
:2B ,2-2* /-#1
#; &7/2*$#;$
*2-( &; !(=
C('&<;4
56#7/-( 2@ D229 A2-2* !(= C('&<;
Cnly 3 Slmple Colors
are used
Words are easy
Lo read
WebslLe polnLs
ouL sLralghL-Lo-
Lhe-polnL lnfo
CreaLes a slmple
yeL professlonal
feellngs for
vlslLors Lo vlew
lnLerneL source: hup://sprouLnewmedla.com/wp-conLenL/uploads/2013/08/Mlrror.png
56#7/-( 2@ E#9 A2-2* !(= C('&<;
1oo many color used
ln Lhe WebslLe
Words are
dlmculL Lo read
WebslLe do noL
communlcaLe well
wlLh vlslLor
CreaLe a messy
feellngs as
lnformauon are
everywhere
lnLerneL source: hup://www.Lopdeslgnmag.com/wp-conLenL/uploads/2011/02/220.png
Web browsers only share 216 common color.
! rovldes conslsLenL & predlcLable resulLs (Mac
CS, unlx, and Wlndows plauorm)
! LlmlLs Lo 236 colors

** Suggesuon : LlmlL Lhe color paleue Lo 2-3 ma[or
colors wlLh shade varlauon.
lnLerneL source: hup://www.plnLeresL.com/naLyy21/resLauranL-redeslgn/
lnLerneL source: hup://www.plnLeresL.com/naLyy21/resLauranL-redeslgn/
Color of phoLograph or graphlc elemenLs should
noL hues ouLslde Lhe browser-safe paleue
! Web browser wlll auLomaucally dlLher Lhe
dlsplayed lmages or navlgauon buuons
! 8esulLs: Maklng Lhe page hard Lo read

:37#; A2-2*
C($(,$2*
Puman has a color-deLecung
equlpmenL lnslde Lhelr eyes
called a 'cone'.

F >1/(' 2@ A2;('
! 8ed
! Creen
! 8lue

C2 123 $"&;G 123 G;2B # -2$ #=23$ ,2-2*4
Color deLermlnes:
! ulerenL meanlng lnLerpreLauon by dlerenL
culLures
! 1he psychologlcal eecL on vlewers
!('$(*; D*((,(
:2B 9&H(*(;$
,3-$3*( I&(B
J(--2B
4

>1/(' 2@ A2-2*'8
!KLM AN0NL. ANN0 AN0NL.
LxCl1LMLn1
C8LA1lvl1?
C1lMlS1lC
LACLluL
PCnLS1?
8LAu1?
Color comblnauon should be chosen & arranged
wlsely (prlmary key Lo Web ueslgn)
! Color aecLs mood
! CreaLe color harmony

8ackground Colors used on Web ueslgn can be
sub[ecuve accordlng Lo human's:
! ersonal LasLe
! sychologlcal feellng

EKC A2-2* O'1,"2-2<&,#- 5H(,$
E#9 E#,G<*23;9 A2-2*8
8rlghL 8lue

!:J4
! Color ls Loo sLrong
! Aecung Lhe LexL
(Pardly readable)
! 8eaders' eyes
become ured easlly
PP K,,2*9&;< $2 K;; C#I-&;Q =-3( B(='&$(' ,#; =( #''2,&#$(9 B&$" $"( N/(*#+2;
.1'$(7 ,*#'"(' #;9 /(2/-( $(;9 $2 #I2&9 =-3( =#,G<*23;9 B(='&$(R

lnLerneL sourcehup://deslgnwebklL.com/web-and-Lrends/color-comblnauons-hell-deaLh-
senLence-deslgns/:
A#; $"&' <($ #;1 '-2B(*RR4
nowadays, vlslLors are unllkely Lo have Lhe pauence Lo walL.
As a resulL:
! Lhey abandon slow loadlng webslLes
L('(#*," =1 KG#7#& STUUVW
! 73 of 1038 people would noL reLurn Lo webpages LhaL load more Lhan 4
seconds
! 30 of Lhe respondenLs formed negauve lmpresslon on companles wlLh
slow loadlng webslLe
A2;,-3'&2; 92;( =1 KG#7#& STUUXW
! 47 expecL Lhe LoleraLe walung ume ls [usL 2 seconds
! 40 wlll leave Lhe webslLes lf lL Lakes more Lhan 3 seconds Lo load
! 32 onllne shoppers wlll sLay loyal Lo qulck loadlng webpages.
02#9&;< O#<(
A#3'(' 2@ '-2B -2#9&;< B(=/#<(
WebslLes are presenung Lhemselves as 1v
neLwork. 1hey squeeze ln . lnLo 13 & 19 lnch
webslLes:

O&,$3*( K39&2 ?;@2*7#+2;
Web ueslgners Lend Lo squeeze everyLhlng
when webslLes can only holds 216 colors &
download aL 28.8 k8/second.

**Suggesuon: Cpumlze graphlc lmages Lo
decrease Lhe ume of downloadlng Lhe Web
age.
:2B '"23-9 !(= O#<(' =( /*('(;$(94
! Pas Lo be Slmple
! noL more Lhan 30k
! Should be Creauve
.2YB#*( 8 K92=( O"2$2'"2/

1hls ls one of Lhe Lool LhaL can be used Lo deslgn
and reslze Lhe graphlc lmages, enhanclng Lhe
creauvlLy & Lhe shorLen Lhe lengLh for
downloadlng purposes.
lnLerneL source: hup://lmg.wallpapersLock.neL:81/adobe-phoLoshop-logo-
wallpapers_34161_2360x1440.[pg
>"( D27(Z O(#G >&7( ?;$(*;($ ['#<( .$391 STU\UW
! 73 onllne users le slLes raLher Lhan walung for lL Lo load
durlng Lhe peak lnLerneL Lramc umes.
! 88 are less llkely reLurn Lo Lhe slLe aer havlng bad
experlence.
WhaL ls aecung Lhe loadlng?
M2*( $"#; "#-@ 2@ $"&' /#<( '&Z( &' 93( $2 &7#<('R [/ $2 ]U^ _E /(* /#<( &' ,27/*&'(9 2@
&7#<('R S>"*(( 1(#*' #<2Q &7#<(' ,27/*&'(9 `3'$ FVT _E 2@ # /#<(a' $2$#- /#1-2#9RW

bK)?DK>?Nb.
?7/2*$#;,( 2@ <229 ;#I&<#+2;'
! Lasy access of Lhe pages wlLhln Lhe webslLe




b#I&<#+2;' "#' $2 =(8
! user-frlendly
! Lasy Lo access oLher pages
! Pavlng color scheme dlerenuauon
O*2=-(7' 2@ b#I&<#+2;'
noL everyone wlll have dlrecL access Lo Lhe webslLe
homepage as Lhe llnk LhaL Lhey cllck mlghL be llnks Lo
pages wlLhln Lhe webslLe. lf a webslLe provldes
exLenslve lnformauon buL &"1()"2-& (. 3--# or llmlLed,
oLhers could noL be able Lo access and vlew Lhese
lnformauon (klusLcreauve.com, 2013).

lnLerneL source: hup://www.lnc.com/uploaded_les/lmage/
webslLe_navlgauon_pop_6498.[pg
!"#$ &' $"( [;&I(*'#- A2-2* .,"(7(4
1hls unlversal color scheme ls used Lo help
vlewers Lo dlerenuaLe beLween vlslLed or noL
vlslLed page.
vlewers have vlslLed Lhe
page before.
vlewers have noL
vlslLed Lhe page
before.
56#7/-( 2@ E#9 b#I&<#+2;' !(='&$(
!:J4

! 1here ls Loo
many llnks
avallable ln one
page.
! users wlll feel
confused &
dlsLurbed.
! Messy & urlng
for Lhe eyes Lo
vlew for a long
perlod of ume.
56#7/-(' 2@ 5H(,+I(
L('/2;'&I( b#I&<#+2;
M(;3
!"#$ 92
JN[ $"&;G4
8LlL8LnCL LlS1S
8eference
8urzl,l.,2004. 403-#+"&,/ -5 6-'-# (& 7/8 9/.()&: [Cnllne] Avallable aL: < hup://www.deslgngraphlcs.org/arucle22.hLml>
[Accessed 9 CcLober 2014]
!ohansson, u., 2010. ;.(&) 6-'-#. -& +*/ 7/8 < =>?@ ,-'-# ,-!/.: [Cnllne] Avallable aL: < hup://www.colorsonLheweb.com/colorsonLheweb.asp>
[Accessed 9
Lh
CcLober 2014]
Muller, C., 2011. 23 Lxamples of erfecL Color Comblnauons ln Web ueslgn. [ Cnllne] Avallable aL : <
hup://Lympanus.neL/codrops/2011/12/08/23-examples-of-perfecL-color-comblnauons-ln-web-deslgn/> [ Accessed 7
Lh
CcLober 2014]

klusL creauve. (2013). 403-#+"&,/ -5 A"1()"2-& (& 7/8 9/.()&. [Cnllne] Avallable aL: <
hup://klusLcreauve.com/Lheblog/lmporLance-of-navlgauon-ln-web-deslgn/ > [Accessed 9 CcLober 2014]
owazek, u. 2006. 7*/#/ B0 4: [Cnllne]. Avallable aL < hup://allsLaparL.com/arucle/whereaml > [Accessed 9 CcLober 2014]
8leakley, n., 2014. 7*"+ 0"$/. " )--! C/8.(+/. [Cnllne] Avallable aL: hup://sugarrushcreauve.com/blog/whaL-makes-a-good-webslLe [Accessed 6Lh
CcLober 2014]

Chapman, C., 2010.DE ;."8('(+F >(3. G"./! -& H/./"#,* I+J!(/.. [Cnllne] Avallable aL:
hup://slxrevlslons.com/usablllLyaccesslblllLy/10-usablllLy-ups-based-on-research-sLudles/ [Accessed 6
Lh
CcLober 2014]

norLon, C., 2012. 9-&K+ 8-#/ F-J# 1(.(+-#.L =-C +- /1"'J"+/ F-J# C/8.(+/K. *-0/3")/ (& ME ./,-&!. -# '/..: [Cnllne] Avallable aL:
hup://www.webslLeondemand.ca/blog/enLry/converslon-opumlzauon/donL-bore-your-vlslLors-how-Lo-evaluaLe-your-webslLes-homepage-ln-30-
seconds-or-less.hLml [Accessed 6Lh CcLober 2014]

Spooner, C., 2013. 4&+/#/.2&) 7/8 9/.()& >#/&!L N/#2,"' I3'(+ @"F-J+..[Cnllne] Avallable aL:
hup://llne23.com/arucles/lnLeresung-web-deslgn-Lrend-verucal-spllL-layouLs [Accessed 6Lh CcLober 2014]

Shaun Anderson, 2014. O-J# 7/8.(+/ 9/.()& I*-J'! @-"! (& P I/,-&!.Q Pobo lnLerneL Markeung, [blog] 23 lebruary, Avallable aL: <
hup://www.hobo-web.co.uk/your-webslLe-deslgn-should-load-ln-4-seconds/> [Accessed 3 CcLober 2014].

Chrls Munch, 2010. RS/,+ -5 7/8.(+/ I3//! -& ;./#.: Munchweb, [blog] 29 SepLember, Avallable aL: <
hup://munchweb.com/eecL-of-webslLe-speed> [Accessed 3 CcLober 2014].