ASSlCnMLn1 2

8LSLA8CP uLSlCn 8LC81

lN1kAc1lv MulA

by ARMAGEDDON
Research Topic : Layout Design Concept
Team Leader : Darius Shu Chen Keong (0309847)

MEMBERS

Ow Ji Jing (0310461)
Krishna Kumar a/l Apparao (0309371)
Prakaash a/l Pram Kumar (0302927)
Mithun Edwin (0303690)



-Agree w|th the author that webs|tes shou|d do everyth|ng poss|b|e to
keep the v|ewers |nterested. I|rst |mpress|ons are a|ways the one that
|asts. roper des|gn|ng and creanve output p|ays a essenna| ro|e |n
keep|ng aud|ences enthra||ed before they change the|r focus |nto the
content of the webs|te. A webs|te does portray |tse|f as a sma|| company.



Don't 8ore
?our vlslLors



-Agree|ng w|th the author say|ng that a good webs|te des|gn must have
the ab|||ty to keep the aud|ence enterta|ned
-Consumers want someth|ng that |s p|easant, s|mp|e and conven|ent. 1hus,
current web des|gn trends caters to consumers taste.
-Consumers tend to make |nstant [udgment on whether to connnue us|ng
the serv|ce of a parncu|ar webs|te based on the |mpress|on they get from
|t's des|gn



uLSlCn
Web deslgn has a key role, slmllar Lo Lhe way LhaL posLers are deslgned Lo mouvaLe a
reader, lmprove readablllLy, and Lo draw Lhe reader's eye Lo Lhe key conLenL. Web
deslgn lssues lnvolve lmprovlng Lhe clarlLy and form more Lhan lLs lnLended funcuon.
SLraLegles for web deslgn lnclude guldellnes ln areas such as graphlc deslgn, Lypography,
and layouL.

CranL, S 2002, rlnclples Cf Lecuve Web ueslgn, accessed 8 CcLober 2014 <hup://www.shersonmedla.com/granL/cv/
lLems/presenLauons/Webueslgn1alkfesL.pdf




-Use or|g|na| |nformanon and or|g|na| photos makes w||| make a webs|te |ook |ess
ster||e and g|ves a more persona| approach as a|| webs|tes shou|d be ab|e to
generate a fee||ng about |t (match|ng your persona||ty and bus|ness mode|)

-nave movements and an|manon. Any type of movement |s go|ng to catch the
aud|ence auennon. Stanc |s hne but noth|ng catches auennon ||ke movement
does. 1h|s |s |mportant to keep the aud|ence enterta|ned.

-Must have a cons|stent fee|.. (Cons|stency |s the key |n web des|gn espec|a||y
when you are bu||d|ng a brand or creanng a purpose. More auennon shou|d be
pa|d to deta|| (create subt|e textures and pauerns, use borders to separate
e|ements)

nere are some examp|es,
Don't 8ore
?our vlslLors
cooslsteot feel..
(8eatport.com bomepoqe ooJ oll lts sob poqes
oses slmllot tbemes ooJ ouolos slmllot colot to
qlve o cooslsteot feel)
Mooocbtomouc text webslte wltb mlolmol Jeslqo sbows tbe ptofesslooollsm of o
webslte
cooJy coloteJ webslte bos o Jl[eteot opptoocb ooJ coosutotes o Jl[eteot vlbe.

- 1he author a|so c|a|ms that v|s|tors w||| assume a s|mp|e webs|te des|gn
can be character|zed as a sma|| company.
- It doesn't mauer how a webs|te |ooks or how coo| a certa|n eect of
an|manon |s, none of that rea||y mauers. 1he purpose of the webs|te |s
to be used for whatever |ts |ntended purpose |s.
- Cne shou|d avo|d copy|ng compentors as there w||| be noth|ng e|se to
set you apart from the others, a webs|te needs |ts own |dennty. 1h|s |s
a|so cruc|a| to avo|d consumers from be|ng confused.

ln1L8AC1lvl1?
"user-cenLrlc web deslgn has become a sLandard
approach for successful and web deslgn. Aer all, lf
users can'L use a feaLure, lL mlghL as well noL exlsL." -
vlLaly lrledman, "10 rlnclples of Lecuve Web ueslgn",
"lnLegraung Lhe soclal experlence lnLo your organlzauon's web
slLe wlll help promoLe Lhe channel, engage supporLers, and
provlde a consLanL source of dynamlc conLenL ."- Melanle
MaLhos and Chad norman "101 Soclal Medla 1acucs for
nonproLs: A lleld Culde."

Otlqlool, ooe-of-o-kloJ webslte Jeslqos
teoJ to cteote oo evetlosuoq lmptessloo
!"#$%&'(#)*'+$,- - A petfect exomple
oo bow Jeslqo ooJ lotetocuvlty
mokes oo lmpoct
/&(#(' *0'1'23 *0# *04',3. lts mocb mote tboo sllJloq lmoqes ot cool oolmouoo becoose
vlJeo teoJs to bove o potpose (umelloe ot o plot) (tbe best woy to eoqoqe to yoot
ooJleoce ooJ lts vetsoule)
Co !567, lts to cteote o sttooq lmptessloo osloq lAkC text ot lotqe btlqbt ooJ 8,"4
lmoqes mokes lt exttemely botJ to ovetlook.
9'': 0; 30-:"'. we llve lo oo eto wbete mlolmollsuc lJeos ote vety tesllleot. coosomets
woot to qet sttolqbt to tbe polot wltb eose.
70<'2'&; 1#=3 ,> 0&;'2#$)&(


Cooqle lotetocts wltb lts oset by qlvloq tbem tbe fteeJom
to seotcb fot ooytbloq tbey woot tbetefote tbete ote oo
seotcb opuoos.
oboo lotetocts wltb lts osets by qlvloq tbe cbolces oo
wbot to seotcb totbet to let tbem tblok of wbot to seotcb
llke Cooqle.


Web pages use to have |ots of graph|cs, beaunfu| an|manons and ash |mages. Lven w|th
the s|ow |nternet peop|e sn|| wou|d wa|t.
SIMLL, IAS1, LIILC1IVL AND LIIICILN1. 1hese are the expectanon of today. Gone are
the days where 3D an|manons or huge ash banner bombarded you when you open the
s|te. We are on the age of m|n|ma||sm.
IAS1 w|th GCCD LCCkING DLSIGN webs|te |s what we need.
Don't Make
1hem WalL
AGREE
A webpage ls noL a 1v. WebslLes suppose Lo load
fasL and wlLhouL Lop noLch graphlcs.
!ack in "e past
NOW
SLLD MA11LkS


Agree lmages need Lo be ln very small slzes. 4k Lo 6k ls Lhe besL.
AecL loadlng speed of Lhe webslLe. lL ls a paln lf Lhe webslLe lags. ?ou lose vlslLors.
eople wlll geL bored of walung and leave.
1here are so many slLes ouL Lhere, you need Lo compeLe Lo be Lhe besL, Lhe mosL emclenL
and Lhe fasLesL.

SpeedomeLer, n.d. phoLograph, vlewed 6 CcLober 2014 <hup://
cdn.hlghspeedgeek.com/wp-conLenL/uploads/2012/12/speed-
LesL.[pg>
SLLD MA11LkS


Surveys by Akamal and Comez.com sLaLes LhaL nearly half of
web users expecL a slLe Lo load ln 2 seconds or less.
1hey Lend Lo leave Lhe slLe lf lL does noL load wlLhln 3 seconds.
79 of web shoppers who have Lrouble wlLh web slLe
performance say Lhey won'L reLurn Lo Lhe slLe Lo buy agaln and
around 44 of Lhem would Lell a frlend lf Lhey had a poor
experlence shopplng onllne."

SpeedomeLer, n.d. phoLograph, vlewed 6 CcLober 2014 <hup://
cdn.hlghspeedgeek.com/wp-conLenL/uploads/2012/12/speed-
LesL.[pg>
!acob, S 2011, klssmeLrlcs, accessed 3 CcLober 2014, <hups://blog.klssmeLrlcs.com/
speed-ls-a-klller/>

- Images need to be opnm|zed for the web. hotoshop p|ays a ma[or ro|e |n th|s
s|tuanon. It |s very frustranng when |t takes over a m|nute to |oad a page. ou
need to g|ve customers the best user exper|ence. erformance of a webs|te |s
cruc|a|.


SLLD MA11LkS


Cpumlse erformance, n.d. phoLograph, vlewed 6 CcLober 2014 <hup://
www.opslc.com/lmages/uploaded_lmages/opumlse.[pg>
Cpumlzlng an lmage can help ln reduclng byLe and lncrease
performance for your webslLe:
1he fewer byLes Lhe browser has Lo download, Lhe less
compeuuon Lhere ls for Lhe cllenL's bandwldLh and Lhe
fasLer Lhe browser can download and render useful conLenL
on Lhe screen.
Cpumlzlng ConLenL LmclenLly 2010 , accessed 3 CcLober 2014, <hups://
developers.google.com/web/fundamenLals/performance/opumlzlng-conLenL-emclency/
lmage-opumlzauon>
Coogle.com Lakes less Lhan 1 second Lo open. Cver Lhe years Coogle
keeps maklng Lhe deslgn of Lhelr page more slmpllsuc wlLh slmple
LexL and lmages.
LxAMLLS Cl CCCu lAS1 LCAulnC WL8Sl1LS
Coogle performed an experlmenL on webslLe
load umes.
Many users sald Lhey wanLed 30 resulLs
Lherefore Coogle change Lhelr semngs.
1nLN 1nL SnCCk CAML

1ramc drop an asLoundlng 20.
Coogle LesLed Lhe loadlng dlerence beLween
Lhe 10 and 30 resulLs pages and found LhaL lL
was [usL half of a second.
1herefore half a second Loo make a 8lC
dlerence
DC CU
kNCW?
!acob, S 2011, klssmeLrlcs, accessed 3 CcLober 2014, <hups://
blog.klssmeLrlcs.com/speed-ls-a-klller/>
Amazon.com Lakes less Lhan 3 second Lo open. Lven wlLh lLs many
lmages, Lhose lmages are compressed Lo allow Lhelr webpage Lo
open qulck, Lhus a good user experlence for Lhelr onllne cusLomers.
Apple.com lncludes sllghL ash movemenL lnvolve ln Lhelr webpage
durlng scrolllng of Lhelr producLs buL Lhey manage Lo keep lL smooLh
and fasL. 1helr webslLe opens less Lhan 3 seconds.
SalLedPerrlngs.com lncludes a heavy usage of lmages and anlmauon
whlch Look more Lhan 10 seconds Lo fully open Lhe webpage. 1here
ls also unnecessary graphlcs golng on whlch furLher slows down Lhe
webslLe.
LxAMLLS Cl 8Au SLCW LCAulnC WL8Sl1LS
8lacknegauve.com ls a heavy graphlc webslLe LhaL Look more Lhan
30 seconds Lo load.
LxAMLLS Cl 8Au SLCW LCAulnC WL8Sl1LS
DLSIGN vs GkAnICS



- Another statement that the author sa|d was a webpage shou|d use more
des|gn and |ess graph|cs.
- 1h|s |s a statement to agree for as |n today wor|d we opt for more
s|mp||snc des|gn, and we do not ||ke see|ng a c|uuer mess of graph|cs
everywhere.

- 1oo much graph|c |s no |onger a beauty, but beaunfu| des|gned webs|te |s.
- Gemng r|d of heavy graph|cs a|so a||ow the webpage to |oad faster, and we
sn|| cou|d have a beaunfu| webpage. It |s a w|n-w|n s|tuanon.
- 2014 has been a year of m|n|ma||sm des|gn and th|s trend |s here to stay.
1h|s shou|d be an examp|e set for the future of webs|tes. Lmbrac|ng th|s
br|ngs a good change to how peop|e v|ew webs|tes.

1here are reasons Lo why aL mlnlmal
deslgns are galnlng lmmense popularlLy,
and lL all beglns wlLh Lhe facL LhaL Lhey are
crlsp, and Lhey are chlc.

A mlnlmal deslgn doesn'L pull a vlewer's
auenuon ln all dlrecuons, lL lnsLead draws
focus on Lhe elemenL LhaL's supposed Lo
draw maxlmum auenuon. noL Lo menuon,
lL has lLs own vlsual charm."
uawson, S 2014, Awwwards, accessed 3 CcLober 2014, <hup://
www.awwwards.com/how-Lhe-concepL-of-mlnlmallsm-ln-web-
deslgn-came-abouL-and-why-lL-sLayed.hLml>
DLSIGN vs GkAnICS




LkAMLLS CI GCCD MINIMAL DLSIGN WL8SI1LS
1hese webslLes are deslgned wlLh slmpllclLy ln mlnd. Less graphlcs buL sull pushlng Lhe envelope
of good deslgn. LlghL and mlnlmal ls Lhe way Lo go and Lhese webslLes open fasL. eople would
noL have Lo worry abouL loadlng ume anymore and Lhey can sull en[oy greaL deslgn aL Lhe same
ume.
lconwerk, n.d. phoLograph, vlewed 3 CcLober 2014, <hup://www.lconwerk.de/>.
8ernaLlorLeL, n.d.phoLography, vlewed 3 CcLober 2014, <hup://bernauorLeL.com/?
I|nd out
WhaL colors
Based on the author, it is agreeable that color placement plays an
important role in creating a website.
Before creating a website if the designer does not pay attention to the
colors of the website it may end up plain and boring or it may be an
eyesore.
The color concept of a website should be balance to please the viewers
so it will be easier for them to browse.

I|nd out
WhaL colors
Agree the author's say|ngs that co|or concept because the co|or
comb|nanon g|ves |mag|nanve v|be to the aud|ence and v|ewers to surf
the s|te.
1he ba|ance background of co|ors , g|ves the user to surf webs|te safe|y
and |t doesn't d|stort the|r v|s|on. nowever the author sa|d that co|or
must be ba|anced and you must not over do |t.
Iew years back web pages use to cons|sts bas|c co|or concepts and
des|gn. Lven w|th at co|or concept peop|e have no cho|ce, they have to
go through |t to get |deas. nowever nowadays, peop|es expectanon are
h|gh on pub||shed webs|te. Lverybody needs a s|mp|e co|or webs|te to
p|ease them.
I|nd out
WhaL colors

- When discussing the design of a new site, a question that consistently arises is
- How do I select the most effective color? Choosing the right color palette
for a site is essential to communicate your message, brand your product or
service, and, if you are an online business, sell your products.
- Everyone has their own favorite colors, but how these colors are interpreted
may vary from culture to culture. Color communicates far more than most
people realize. Choosing wrong the wrong color can affect the website views
and reliability.

According to different sources, half of the people visiting a website
dont come back because of the color of the design. The first thing
people need to recognize when they see your site are the brand
colors. If you have multiple colors and they cant see the most
dominant, it means you should consider a redesign.

vaslle ,C, 2014, Colors ln Web ueslgn Make WebslLe Successful ,accessed 8 CcL.2014, <hup://www.
1sLwebdeslgner.com/deslgn/colors-ln-web-deslgn-make-webslLes-successful/> .




The website monsterism.net created by Peter Fowler. His idea
purely based on nature, daily experience, and monster music.
The colour concept solely based on visual adventure which
made his work noticeable around the world.
LxAMLL Cl CCCu WL8Sl1LS




espnfc.com a simple sport website platform which consist of three
main colors light green, white and silver. This allows the viewers to
surf the site without
LxAMLL Cl CCCu WL8Sl1LS




LxAMLL Cl CCCu WL8Sl1LS
Tgv.com.my, movie based platform for online customers to purchase tickets
online. The color combination of red, black, light blue gives and interactive
edge to site. However the main color red is used for promotional where it
stimulate customers to make quick decision.
HunttGraphic.com is a graphic printing design company .The site
consist of variety of color of colors and it is an eyesore, it may lead the
viewer out of focus and cause them to leave the website.
LxAMLL Cl 8Au WL8Sl1LS
This is a website run by Water Equipment technology , the site it self have variety of
pictures and wordings, and the indication buttons are poorly indicated with consistent flat
blue color. Besides it may lead the viewer to drift apart while going through the page and
cause them to leave the website.
LxAMLL Cl 8Au WL8Sl1LS
Nav|ganon
?@A'2' #- BC @A'2' $#& B (, >2,- A'2'C @A'2' 1#3 B #"2'#4=CD
1hese are the common quesnons that a||
v|s|tors w||| want to hnd out w||e brows|ng
the web. 1hus, nav|ganons shou|d be s|mp|e
and user fr|end|y so that web browsers w||| not
get |ost amongst a sea of content.
?@'8 E3'23 #2' 0-:#)'&;F #&4 ;A'=G2' &,;
(,0&( ;, A#&( #2,E&4 # 30;' *'2= ",&( 0> ;A'=
$#&G; H&4 ;A'02 1#= #2,E&4+D

I0*' JE"'3 ;, /<'$)*' @'830;' KLMNF #$$'33'4 O 5$;,8'2
KLMNF P Q#*0(#),&AR:STT(2#:A0$4'30(&+#8,E;+$,-T,4T
'<'$)*'1'830;'3T#T1'8U&#*0(#),&+A;-V

Nav|ganon
WA' $,-:#&=X3 &#-' ,2 ",(, 3A,E"4 8' ,& ;,: ,> '*'2= :#(' 0& =,E2
1'830;'+ B; 3A,E"4 "0&% 8#$% ;, A,-' :#(' #3 1'""+
Y $,-:#&=X3 &#-' ,2 ",(, 3A,E"4 8' ,& ;,: ,>
'#$A :#(' #&4 0; 3A,E"4 "0&% 8#$% ;, A,-'
:#('+
?WA' -#Z,20;= ,> E3'23 '[:'$;'4 ;, H&4 ;A'
!#$% ;, \,-' "0&% 0& ;A' ;,: "'] $,2&'2+D
?Y$$,240&( ;, # 3E2*'= 4,&'F E3'23 #2' *'2=
$,&H4'&; ;A#; ;A'2' 10"" 8' # "0&% ;, ;A' A,-'
:#(' 0& ;A#; :,30),&+D

@A'2'X3 WA' \,-' !ER,& KLMNF #$$'33'4 O 5$;,8'2 KLMNF
PAR:STT111+A-E+$,-T8",(TKT1A'2'3^;A'^A,-'^8ER,&^
E3'23^'[:'$;#),&3^>,2^1'8^:#('^$,&;'&;^",$#),&TV

Nav|ganon
_030;,23 1#&; ;, %&,1 ?1A'2' $#& B (, >2,- A'2'D #&4 1'8 4'30(&'23 3A,E"4
(0*' 0&30(A;3 ,& 1A'2' ;A' "0&% 10"" ;#%' ;A'-+
G|v|ng the v|s|tor an |ns|ght on where the ||nk
w||| take them. Ior examp|e, for resources
page wh|ch has more deta||ed |nformanon, |t
shou|d have br|ef descr|pnons w|th ||nks.
nav|ng these two th|ngs |nc|uded |n the
webs|te w||| dehn|te|y |mprove the web
brows|ng exper|ence.
1h|s |s a good examp|e of a webs|te wh|ch has a great nav|ganon
route p|anned out. 1he home buuon |s |ocated at the top |eh corner
and |t br|ngs to user back to home page.
1h|s |s worth the extra nme for those who can see |t. L|nk nt|es
|mprove the nav|ganon usab|||ty.
Y`J// ;A#; "0&% );"'3 #2' 0-:,2;#&; ;, A'": 1'8 82,13'23 ;,
E&4'23;#&4 -,2' #8,E; ;A' "0&% 8'>,2' &#*0(#)&(F #&4 0; 03
1,2;A ;A' '[;2# )-' 4,1&",#40&( '#$A "0&% );"'+
B; (0*'3 E3'23 # 820'> E&4'23;#&40&( ,& 1A'2' ;A' "0&% 03 (,0&(
;, 820&( ;A'-F #&4 0; 10"" :2'*'&; E3'23 >2,- ('a&( ",3; 0& ;A'
-043; ,> 82,130&( ;A' 1'8+

USA8ILI1
`,,4 '[#-:"'
When the mouse hovers across the |cons on the bouom r|ght, |t shows what
|s the user actua||y c||ck|ng on. In th|s case, |t shows "qua||ty".
b3'23 1#&; ;, %&,1 0> ;A'= #"2'#4= *030;'4 # :#('+
AGkLL that users want to know whether they have a|ready
v|s|ted a page.
"eop|e get |ost and move |n c|rc|es when webs|tes use the
same ||nk co|our for v|s|ted and new desnnanons. 1o reduce
nav|ganona| confus|on, se|ect d|erent co|ours for the two
types of ||nks."

`,,4 '[#-:"'
1h|s |s a creanve and good examp|e of show|ng the users that they have
a|ready c||ck on the ||nk. 1he test tubes turn |nto green aher I have c||cked
on the ||nk.
CCLCk SCnLML
Ior your nav|ganon to work we|| you shou|d use b|ue for
unv|s|ted and purp|e for v|s|ted as a co|or scheme. Us|ng other
co|ors w||| [ust confuse peop|e.

nowever, we d|sagree on the second po|nt wh|ch says "we
shou|d use b|ue for unv|s|ted and purp|e for v|s|ted as a co|or
scheme. Us|ng other co|ors w||| confuse peop|e." As |ong as
there |s obv|ous changes that show users that they have v|s|ted
the ||nks before, users w||| not get confused over v|s|ted and
unv|s|ted ||nks.


`,,4 '[#-:"'
1h|s |s an examp|e that even though the web des|gner d|d not fo||ow the
b|ue and purp|e co|or scheme, as a user, they sn|| ab|e to understand and
they w||| know that those ||nks has a|ready been c||cked.
LlS1 Cl 8LlL8LnCLS
uawson,S 2014, now tbe coocept of mlolmollsm lo web Jeslqo come oboot ooJ
wby lt stoyeJ, accessed 3 CcLober 2014,< hup://www.awwwards.com/how-Lhe-
concepL-of-mlnlmallsm-ln-web-deslgn-came-abouL-and-why-lL-sLayed.hLml>

!acob, S 2011, 5peeJ ls A klllet, accessed 3 CcLober 2014, hups://
blog.klssmeLrlcs.com/speed-ls-a-klller/

Opumlzloq cooteot [cleotly ,2010 , accessed 3 CcLober 2014, hups://
developers.google.com/web/fundamenLals/performance/opumlzlng-conLenL-
emclency/lmage-opumlzauon
wbetes 1be nome 8ouoo usets xpectouoos fot web loqe cooteot ,2010,
accessed 3 CcLober 2014, <bup.//www.bmo.com/bloq/2/wbetes-tbe-bome-
bouoo-osets-expectouoos-fot-web-poqe-cooteot-locouoo/>

n1Ln: 1he nonproL 1echnology neLwork, (2014). 10 5teps to o Mote
[ecuve Nooptoft webslte. lott 2. [onllne] Avallable aL: hup://
www.nLen.org/arucles/2012/10-sLeps-Lo-a-more-eecuve-nonproL-
webslLe-parL-2 [Accessed 8 CcL. 2014].

Sherson, C. (2014). ltloclples of [ecuve web ueslqo. [onllne]
shersonmedla. Avallable aL: hup://www.shersonmedla.com/granL/cv/
lLems/presenLauons/Webueslgn1alkfesL.pdf [Accessed 8 CcL. 2014].

Skdeslgns.com, (2014). now Jo l keep my web slte ftesb, ollve ooJ
lotetesuoq? webslte1lps Newsleuet, by 5kueslqos, web ueslqo
5octomeoto, cotmlcboel, collfotolo. [onllne] Avallable aL: hup://
skdeslgns.com/newsleuer/v1n3.shLml [Accessed 8 CcL. 2014].

1reehouse 8log, (2012). 4 woys to Co ltom o 8otloq to Amozloq
webslte - 1teeboose 8loq. [onllne] Avallable aL: hup://
blog.LeamLreehouse.com/4-ways-Lo-go-from-a-borlng-Lo-amazlng-
webslLe [Accessed 8 CcL. 2014].
LlS1 Cl 8LlL8LnCLS
vaslle ,C, 2014, colots lo web ueslqo Moke webslte 5occessfol ,accessed 8
CcL.2014, <hup://www.1sLwebdeslgner.com/deslgn/colors-ln-web-deslgn-
make-webslLes-successful/> .
llve koles to [ecuve websltes, 2012, accessed 6 CcLober 2014, <bup.//
qtopblcJeslqo.oboot.com/oJ/e[ecuvewebsltes/o/web_oovlqouoo.btm>