-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.
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."
- 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 _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/
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>