Web Comunicao Visual

NDICE Captulo I.........................................................................................................................................03 1. O que cor?............................................................................................................................03 2. A viso humana da cor.............................................................................................................03 3. Teoria das cores.......................................................................................................................04 4. Definio da cor de fundo da p !ina.......................................................................................0" #. $ecomenda%es para o uso de cores na &e'.........................................................................10 Captulo II........................................................................................................................................14 1. Definio e ()ane*amen+o do ,i+e............................................................................................14 2. $ecomenda%es do &3- para nave!ao na &e'..................................................................1. Captulo III.......................................................................................................................................18 1. /screvendo para &e'..............................................................................................................10 2. $edao de +e1+os na &e'......................................................................................................22 3. ,i+e na 2+ica da pu')icidade.....................................................................................................20 4. Dicas para criar uma marca.....................................................................................................31 Captulo IV.......................................................................................................................................36 1. 3ma!ens...................................................................................................................................3. 2. Tipos de arquivos de ima!em..................................................................................................40

Captulo I
Objetivos de aprendizagem
Entender o mecanismo de reconhecimento das cores. Perceber os cuidados necessrios para o uso da cor na Web. Compreender os efeitos e as influncias da cor durante o projeto de interface.

4amos comear es+udando a impor+5ncia do uso da cor no pro*e+o de &e' si+es. 6ui+as ve7es consideramos a cor apenas como um fa+or es++ico8 mas se voc9 o'servar os o'*e+os que voc9 usa no co+idiano8 vai perce'er aspec+os in+eressan+es: o 'o+o de )i!ar e des)i!ar do con+ro)e remo+o de sua T4 verme)ho8 quan+as cores e1is+em no +ec)ado do seu ce)u)ar? O paine) do seu carro fa7 uso de no m;nimo +r9s cores8 por qu9? O uso da cor proporciona uma impor+an+e dimenso na comunicao visua)8 se a u+i)i7amos com sa'edoria me)hora a in+erpre+ao de uma mensa!em8 se ma) u+i)i7ada pode pre*udic <)a. =uando vamos esco)her as cores a serem u+i)i7adas em nossos si+es aca'amos8 >s ve7es8 por perder o sono > noi+e a+ +omarmos a deciso. =ua) cor? =uan+as cores? =uais com'inam? As cores da empresa8 o !os+o do c)ien+e8 nossas decis%es duran+e o pro*e+o nos co)ocam em ci)adas vir+uais. As esco)has re)acionadas ao uso da cor vo a)m dos meros aspec+os pessoais. O uso eficien+e da cor depende de fa+ores que variam de par+icu)aridades como: recursos visuais dispon;veis8 fa+ores humanos e do pr2prio con+e1+o de uso e do am'ien+e onde a mesma ser u+i)i7ada. 4amos e1p)orar es+e mundo co)orido8 a maneira como vemos8 como in+erpre+amos8 +en+ando en+ender me)hor para ap)icao na &e'.

1.

O QUE COR?

/m 1?..8 @eA+on desco'riu que a luz bra !a do so) pode ser decompos+a com o au1;)io de um prisma de cris+a) em radia%es de )ar!uras vari veis Bma!en+a8 a)aran*ado8 amare)o8 verde8 a7u)8 ciano8 ani) e vio)e+aC. ,em )u7 no e1is+e corD A impresso des+as radia%es so're a re+ina do o)ho o que dis+in!uimos como !or. A cor pode ser definida como um comprimen+o de onda. O comprimen+o de onda para o verme)ho de #00 nm BnanEme+rosC8 para o verde #40 nm e para o a7u) 440 nm. =uando voc9 v9 um arco<;ris8 voc9 es+ vendo a )u7 so)ar decompos+a nes+as " cores. 4oc9 sa'e o que funciona como prisma nes+e caso? As !o+;cu)as de !uaD

".

# VI$%O &U'#N# D# COR

O o)ho humano o 2r!o respons ve) pe)a recepo da viso. O o)ho formado pe)o !)o'o ocu)ar que uma esfera com apro1imadamen+e 28# cm de di5me+ro. =uando voc9 fi1a o o)har so're um o'*e+o8 a ima!em des+e o'*e+o a+ravessa a c2rnea8 depois passa pe)a ;ris < que respons ve) por re!u)ar a quan+idade de )u7 rece'ida por meio da pupi)a.

()*ura + ,lobo O!ular Ap2s a+ravessar o cris+a)ino8 a ima!em focada so're a re+ina Binver+ida8 depois o cre'ro acer+a is+oDC. 4oc9 conhece o mecanismo de uma m quina fo+o!r fica? @osso !)o'o ocu)ar pode ser comparado a uma m quina fo+o!r fica8 onde o cris+a)ino seria a o'*e+iva8 a ;ris o diafra!ma e a re+ina seria a p)aca ou pe);cu)a. =uando a ima!em che!a ao cris+a)ino8 e)a a*us+ada8 sendo )evada para +r s ou para fren+e8 permi+indo que e)a se pro*e+e so're a re+ina. Voc sabia que em nosso olho a sensibilidade para o azul muito menor do que para o vermelho. Em outras palavras, voc v um nmero maior de tons de vermelho do que azuis.

3.

-EORI# D#$ CORE$

6ui+as +eorias procuram e1p)icar o fenEmeno da .)/0o !ro12t)!a8 mas +odas e)as se 'aseiam na o'servao de que o o)ho humano pode de+ec+ar quase +odas as !radua%es de cores8 quando as )u7es monocrom +icas verme)ho8 verde e a7u) so mis+uradas apropriadamen+e. As cores se dividem em +r9s !rupos: primrias8 secundrias e tercirias.

Cor3/ pr)12r)a/ + ,o as cores que no podem ser formadas por nenhuma mis+ura. ,o e)as: a7u)8 amare)o e verme)ho. =uando mis+uradas de forma vari ve) produ7em +odas as cores do espec+ro. Cor3/ /3!u 42r)a/ + ,o formadas por duas cores prim rias mis+uradas em par+es i!uais. Cor3/ t3r!)2r)a/ + ,o as in+ermedi rias en+re uma cor secund ria e qua)quer das duas prim rias que )he do ori!em B(/D$O,A8 1?02C.

O'serve a fi!ura 'ai1o8 cons+ru;da por Fa'ris8 em 1?"3. As cores prim rias es+o no cen+ro8 as secund rias Bverde8 )aran*a e vio)e+aC no se!undo +ri5n!u)o. O +erceiro cic)o se comp)emen+a com as cores +erci rias.

Fi!ura < -;rcu)o das cores BFAG$3,8 1?"3C

3.1.

Cor3/ !o1pl313 tar3/

,o as cores opos+as no disco de cores. O verme)ho comp)emen+ar do verde8 o a7u) comp)emen+ar do )aran*a. As cores comp)emen+ares so usadas para dar fora e equi);'rio a um +ra'a)ho8 criando o m 1imo de con+ras+e. As cores comp)emen+ares so as que do mais con+ras+es en+re si8 se queremos des+acar um amare)o8 devemos co)ocar *un+o de)e um vio)e+a.

Figura - Cores complementares (Vera chuhmacher!

3.".

Cor3/ a 2lo*a/

,o as que aparecem )ado a )ado no disco de cores. ,o an )o!as porque h ne)as uma mesma cor ' sica. O amare)o<ouro e o )aran*a<averme)hado +9m em comum a cor )aran*a. /)as so usadas para dar a sensao de uniformidade8 profundidade8 movimen+o8 )u7 e som'ra. (odemos considerar an )o!as +r9s cores que se apresen+am em seqH9ncia8 no c;rcu)o das cores8 como: o )aran*a8 )aran*a<verme)ho e verme)ho.

Figura - C"rculo das cores (W#$C%&E'( )***!

Figura - Cores +nlogas (Vera chuhmacher!

3.3.

O !o tra/t3 4a/ !or3/ A sensao da cor depende de +r9s par5me+ros: o croma8 a in+ensidade e o ma+i7 BIJ36A$K/,8 1??"C. 'at)z

L a carac+er;s+ica que diferencia uma cor de ou+ra8 por e1emp)o8 o amare)o do a7u)8 o verde do vio)e+a. $efere<se a maior ou menor quantidade de luz presen+e na cor. =uando se adiciona pre+o a de+erminado ma+i78 esse se +orna !radua)men+e mais escuro8 e essas !radua%es so chamadas 3/!ala/ to a)/. (ara se o'+er esca)as +onais mais c)aras8 acrescen+a<se 'ranco. O'serve o que ocorre na fi!ura a'ai1o8 quando acrescen+amos 'ranco a cor.

Fi!ura < /sca)as +onais B4era ,chuhmacherC

Cro1a L a qua)idade espec;fica de saturao da cor, que indica o seu !rau de pure7a. 6as o que sa+urao? 3ma!ine um copo de )ei+e puro. A!ora ima!ine voc9 adicionando a es+e )ei+e cinco co)heres de choco)a+e em p2. O )ei+e vai ficar 'as+an+e escuro. A!ora voc9 comea adicionando )ei+e a es+a mis+ura8 a cor vai c)areando8 mas ainda marrom8 quan+o mais )ei+e voc9 adicionar mais c)aro vai ficar o )ei+e. ,e voc9 adicionar 10 )i+ros de )ei+e > mis+ura8 prov ve) que o );quido fique quase 'ranco. (odemos di7er que a sa+urao refere<se > quan+idade de 'ranco em uma cor. =uando diminu;mos a sa+urao a ima!em aca'a por ficar em pre+o e 'ranco8 com o !rau de sa+urao em 0. 6as quando ocorre ao con+r rio e aumen+amos a sa+urao8 a ima!em aca'a por ficar quase com um aspec+o irrea). 5u1) o/)4a43 L a quan+idade re)a+iva de c)aro ou escuro em uma esca)a do pre+o ao 'ranco. L fundamen+a) para a percepo de profundidade.

Co tra/t3 L a 'ase > dis+ino da forma8 +amanho8 posio8 vo)ume e apar9ncia dos o'*e+os. /)e pode ser o'+ido a+ravs de diferenas do ma+i7 e i)uminao. O con+ras+e pode ser usado para a)+erar a sensao de +amanho en+re o'*e+os. Jm e1emp)o quando queremos parecer mais ma!ros e usamos roupa pre+a. As cores con+ras+an+es so dire+amen+e opos+as no disco das coresM como o a7u) e o amare)o.

Figura - Contraste das cores

4.

DE(INI6%O D# COR DE (UNDO D# 78,IN#

,e!undo a t3or)a 43 43t3!90o 43 /) a)/8 o cre'ro humano in+erpre+a e or!ani7a a informao que rece'e em forma 2+ima8 quando no campo visua) h um nNmero m;nimo de cores e formas: quan+o menos Oru;doP8 mais c)aro o Osina)P. =uando voc9 esco)he o padro de cores de um si+e impor+an+e o'servar a)!uns aspec+os re)acionados por ,chneirman B2000C:

#//u to 4a p2*) a: um si+e vo)+ado ao en+re+enimen+o? L um si+e vo)+ado para venda de im2veis? 7:bl)!o al.o: h a)!um fa+or de homo!enei7ao? ,e1o Bmaioria homens ou mu)heresC8 idade B uma p !ina que pre+ende a+in!ir o pN')ico infan+i) ou para *ovens procurando diverso no+urnaC8 e1peri9ncia Bos usu rios so funcion rios de uma empresa com ou sem e1peri9ncia no uso da in+erne+Qin+rane+C? /1is+em ou+ros fa+ores a serem considerados? Ou os usu rios formam uma p)a+ia a)+amen+e he+ero!9nea? Busu rios de um sis+ema de cai1a e)e+rEnico de um 'anco8 por e1emp)oC #1b)3 t3: qua) ou !rau de es+resse ao qua) os usu rios es+o su'me+idos Be)evado8 como em um sis+ema de 'o)sas de va)ores?C? =ua) a )uminosidade do am'ien+e? 4e*a a se!uir a)!uns e1emp)os.

A cor ' sica de fundo Bo 6a+i7C8 da p !ina inicia) do si+e DisneR8 a7u). Jma cor que8 a)m de +ransmi+ir confiana8 ca)ma e es+a'i)idade8 perfei+amen+e vis;ve) para a !rande maioria da popu)ao. @o+e que apesar do impac+o visua) no h mui+as cores: fora o a7u) ' sico8 u+i)i7aram<se o verde8 'ranco e )aran*a B+odas cores posi+ivas8 emocionaisC. O ne!ro foi a'o)ido da p !ina. As reas com menor sa+urao da cor ' sica es+o nas 'ordas.

&e'si+e da 'anda ,epu)+ura

O si+e do !rupo de rocS ,epu)+ura 'asicamen+e ne!ro. -om'ina perfei+amen+e com o !rupo e com a e1pec+a+iva dos usu rios do si+e8 fs da 'anda. @o+e que8 novamen+e8 h poucas cores. O si+e O6ais 4oc9P e o da Tancome so adequados ao consumidor principa): a mu)her. -ores suaves8 femininas8 es+e+icamen+e )impo.

&e'si+e 6ais 4oc9: h++p:QQmaisvoce.!)o'o.comQperfi)Uapresen+adora.*sp

O'serve8 a!ora8 duas vers%es diferen+es de uma mesma p !ina:

Fi!. A

Fi!. G

A verso fi!ura A suave8 de)icada8 de uma femini)idade pouco a!ressiva. V a verso da fi!ura G modificou comp)e+amen+e a mensa!em: a femini)idade a!ressiva8 as cores so for+es8 vi'ran+es8 a+ o verme)ho Bassociado > pai1o8 ao se1o8 ao amorC8 que no es+ava presen+e em nenhum dos seus ma+i7es na verso an+erior. O'serve como a fi!ura A par+e do con*un+o e no cria desvio de a+eno. V a fi!ura G provoca +an+o impac+o que quase imposs;ve) o'servar o +odo sem dei1ar de no+ar a fo+o8 que sur+ir um impac+o mui+o maior no )ei+or. O'serve que a)m das cores e da pos+ura das ima!ens8 +am'm o a)inhamen+o do +e1+o foi modificado. @os # si+es apresen+ados8 o'servamos que a esco)ha das cores considera8 principa)men+e8 o perfi ) do pN')ico a)vo e a economia na quan+idade de cores. 6armion B2004C su!ere ser poss;ve) es+a'e)ecer as se!uin+es orien+a%es:

3mpor+an+eD
Ut)l)z3 a 13 or ;ua t)4a43 po//.3l 43 !or3/ para o <u 4o 43 /3u /)t3= $3 <or ut)l)zar 1a)/ 43 u1a !or> ut)l)z3 !or3/ pr?@)1a/ 4o 3/p3!tro> ;u3 0o !r)31 !o tra/t3 A<ator 43 4)/tra90oB= # p3r!3p90o 4a !or C a<3ta4a p3la lu1) o/)4a43 4o a1b)3 t3. Co /)43r3 a/ <o t3/ 43 )lu1) a90o D atura)/ 3 art)<)!)a)/ D 4o lo!al= $3 o <u 4o C u1a )1a*31> !o /)43r3 ;u3 4ura t3 o t31po 43 !ar*a 3l313 to/ <ro ta)/ A<or3*rou 4B po431 0o /3r .)/.3)/ por <alta 43 !o tra/t3= Ut)l)z3 <u 4o/ /)1pl3/ para 0o !o1pro13t3r a !o1pr33 /0o 4a p2*) a> a l3*)b)l)4a43 4o t3@to 3 o t31po para /3r !arr3*a4a= O <u 4o 0o 43.3 !Ea1ar 1a)/ at3 90o 4o ;u3 a ) <or1a90o.

@a fi !ura acima8 o fundo u+i)i7ado pe)a 'anda chama mais a+eno do que o +e1+o com as informa%es da 'anda. A )e!i'i)idade pre*udicada dificu)+ando a )ei+ura e a a+eno.

F.

RECO'END#6GE$ 7#R# O U$O DE CORE$ N# HEI

-omo voc9 * viu8 as cores e1ercem diferen+es efei+os fisio)2!icos so're o or!anismo humano e +endem a produ7ir v rios *u;7os e sen+imen+os. A cor um elemento fundamental em qualquer processo de comunicao e merece uma ateno especial. 4e*a a se!uir8 a)!umas recomenda%es so're o uso da cor8 co)e+adas em (ari7o++o B1??"C8 &incS)er B2002C8 $o'er+son B1??3C8 @ie)sen B1??.C e ,chneidermann B2000C:

3mpor+an+eD
R3!o13 4a+/3 o u/o 43 u1 *rupo l)1)ta4o 43 !or3/> 4a 4o ao u/u2r)o a op90o 43 1u42+la/> 12@)1o 43 J!) !o 1a)/ ou 13 o/ 4ua/K. U/3 a !or !o1o u1a <or1a 43 ) <or1a90o a4)!)o al ou au13 ta4a. U/3 !or para r3al9ar ao ) .C/ 43 u/ar /ubl) Ea4o A3 u/3 /ubl) Ea4o ao ) .C/ 43 )t3 / p)/!a 4oB. $31pr3 ;u3 po//.3l> 3.)t3 u/ar !or3/ 1u)to ;u3 t3/> ta)/ !o1o o ro/a 3 o 1a*3 ta. $3 <or u/a4o u1 <u 4o !olor)4o> /3l3!)o 3 a/ !or3/ 4o t3@to 43 1o4o a obt3r o !o tra/t3 1a)/ <ort3 3 tr3 o t3@to 3 o <u 4o. Desse modo8 as p !inas de um mesmo si+e es+aro mais propensas a +erem um OpadroP consis+en+e. /vi+e confiar na cor como o Nnico meio de e1pressar um va)or ou uma funo par+icu)ar. $es+rin*a o uso do su')inhado para )inSs8 para no confundir o usu rio. As cores mui+o quen+es parecem pu)sar na +e)a e ficam dif;ceis de foca)i7ar. 3sso aumen+a a visi'i)idade e a )e!i'i)idade do +e1+o. O uso mnemEnico da cor empre!ado respei+ando os es+ere2+ipos para criar for+es associa%es para a*udar no reconhecimen+o8 na )em'rana e no +empo de 'usca. @o si+e ,u'marino8 perce'emos a diviso das se%es fa7endo uso da cor para diferenci <)as8 a seo de 'rinquedos rosa8 a de e)e+rEnicos a7u)8 a seo a'ai1o a de !ames.

R3!o13 4a+/3 o u/o 1 31L )!o 4a !or.

MMM./ub1ar) o.!o1.br

U/3 !or3/ br)lEa t3/ 3 !o tra/ta t3/ !o1 !aut3la. U/3 !or3/ 1o o!ro12t)!a/ para o t3@to> /31pr3 ;u3 <or po//.3l. R3!o13 4a+/3 o u/o 43 u1a !or 3utra para <u 4o/. N0o u/3 /)1ulta 3a13 t3 alto !ro1a 3 !or3/ ;u3 3/t3Na1 1u)to 4)/ta t3/ o 3/p3!tro /olar.

/sses e)emen+os a+raem a a+eno do usu rio e o seu empre!o deve ser reservado para reas impor+an+es8 caso con+r rio o usu rio pode achar mais dif;ci) sa'er para onde o)har e ficar confuso. As cores monocrom +icas so mais n;+idas8 aumen+ando a )e!i'i)idade e visi'i)idade do +e1+o. As cores neu+ras Bpor e1emp)o8 cin7a<c)aroC aumen+am a visi'i)idade das ou+ras cores. (ara re)a%es fi!ura<fi!ura e mui+as fi!ura<fundo8 for+es con+ras+es de verme)hoQverde8 a7u)Qamare)o8 verdeQa7u) e

U/3 u1 !?4)*o 43 !or3/ !o /)/t3 t3 3 <a1)l)ar> !o1 r3<3rO !)a/ apropr)a4a/.

U/3 a !or para au13 tar a ) <or1a90o 1o/tra4a 31 pr3to 3 bra !o. R3!o13 4a+/3 proN3tar pr)13)ra13 t3 31 pr3to 3 bra !o> 3 3 t0o> a4)!)o ar a !or.

E.)t3 o u/o 43 bl) P At3@to p)/!a t3B

verme)hoQa7u) criam vi'ra%es8 i)us%es de som'ras e ima!ens pos+eriores. aC 4erme)ho: pare8 peri!o8 quen+e8 fo!oM 'C Amare)o: cuidado8 deva!ar8 +es+eM cC 4erde: ande8 OW8 )ivre8 ve!e+ao8 se!uranaM dC A7u): frio8 !ua8 ca)mo8 cuM eC -ores quen+es Bamare)o8 )aran*a8 verme)ho8 vio)e+aC: ao8 fC respos+a requerida8 pro1imidadeM !C -ores frias Ba7u)8 +urquesa8 verde<mar8verde< a)faceC: s+a+us8 informao de fundo8 dis+5nciaM hC -in7as8 'ranco e a7u): neu+ra)idade. @o que concerne ao aprendi7ado e compreenso8 a cor superior ao pre+o e ao 'ranco em +ermos do +empo de processamen+o e de rea%es emocionais8 mas no h diferena na ha'i)idade em in+erpre+ar a informao. A cor mais apreci ve) e a mem2ria para informao co)orida +am'm parece ser superior >que)a em pre+o e 'ranco. A cor aumen+a o processamen+o co!ni+ivo e visua) de uma informao que funciona 'em em pre+o e 'ranco8 pois a*uda a )oca)i7ar8 c)assificar e associar ima!ens. O uso in+ensivo de piscar B')inSC um +e1+o ou ima!em causa fadi!a visua)8 dependendo das cores usadas para fundo e +e1+o ou ima!em8 o o)ho precisa reposicionar o corresponden+e sensor da cor a ser usada8 em cada ins+an+e do efei+o de piscar8 ou8 dependendo das cores usadas8 reposicionar o foco a cada ins+an+e. Fundo pre+o no recomendado8 pois h poucas cores que con+ras+am e causa cansao visua). @o caso de impresso em ( X G8 a cor usada para o +e1+o ou ima!em pode ser conver+ida para escuro e se confundir com o fundo Ba)m de !as+ar !rande quan+idade de +onerQ+in+aC. (ode<se acrescen+ar cores para casos a)+erna+ivos como Bman+endo<se os padr%esC:

E.)t3 <u 4o/ 3/!uro/

N0o u/ar !or3/ alt3r at).a/ para l) P/

aC TinS ainda no visi+ado8 que fica na mesma p !ina

B5ncoraC Y verdeM 'C TinS * visi+ado na mesma p !ina Y rosaM cC TinS para o nodo hierarquicamen+e superior < )aran*aQamare)o 5m'ar. Jse as cores 'ri)han+es em reas pequenas e cores suaves em reas maiores. aC 'C cC dC verdeQverme)hoM a7u)Qamare)oM verdeQa7u)M verme)hoQa7u)M o pre+oQ'rancoM o 'rancoQpre+oM o amare)oQpre+oM o verdeQpre+oM o 'rancoQverme)hoM

N0o tor ar a t3la 1u)to br)lEa t3 ou 3/!ura

7ro!ur3 3.)tar !or3/ ;u3 Nu ta/ !au/a1 )lu/Q3/ ?t)!a/> !o1oR

U/3 !o1b) a9Q3/ l3*.3)/ para t3@toS<u 4oR

o o o o o o o o

pre+oQamare)oM pre+oQverdeM cianoQma!en+aM 'rancoQmarromM amare)oQmarromM verdeQmarromM cianoQmarromM ma!en+aQmarrom.

aC use a7u) para reas !randes ou formas pequenas 8 a7u)

U/3 a/ !or3/ 4a <?.3a 3 p3r)<Cr)!a/ apropr)a4a13 t3> a <?.3a <)!a a r3*)0o !3 tral 4a r3t) a> C !o1po/ta 43 !o 3/ /3 /.3)/ ao 43talE3R 'om para fundo de +e)aM

'C use verme)ho e verde no cen+ro do campo visua) e no cC use pre+o8 'ranco8 amare)o e a7u) na periferia do
campo visua). na periferiaM

5E'IR#R QUE COR '#5 U-I5IT#D# 7IOR DO QUE N%O U$#R CORE$U

Captulo II
Objetivos de aprendizagem
Entender a import,ncia da documenta-.o do processo de desen/ol/imento do design e implementa-.o de um site. Esclarecer a import,ncia do le/antamento de informa-0es nas etapas de planejamento e defini-.o. 1. DE(INI6%O E 75#NEV#'EN-O DO $I-E
O uso da 3n+erne+ e de +odos os seus recursos considerado a nova p)a+aforma cr;+ica do comrcio8 da comunicao e da informao. O desenvo)vimen+o de um si+e +ra7 diferen+es conseqH9ncias para a or!ani7ao8 que vo de aspec+os financeiros a re)a%es pN')icas. /s+e esforo de desenvo)vimen+o pode produ7ir so)u%es vencedoras8 como o caso do si+e de e<commerce ZAAA.su'marino.com[8 ou desas+rosas8 pe)a fa)+a de p)ane*amen+o ou mesmo recursos8 que aca'am por ser despre7ados pe)o usu rio. processo de desi!n uma tarefa comple"a e dependente de v#rios fatores. $ma estrat!ia que funciona bem para um site pode estar totalmente errada para outro. =uando voc9 inicia um pro*e+o &e'8 a)!umas per!un+as e respos+as so fundamen+ais. A par+ir des+as defini%es iniciais8 idias sur!em e decis%es so +omadas por +odo o curso do pro*e+o. Jm e1emp)o dis+o a definio c)ara da misso do si+e e seus o'*e+ivos8 a par+ir de)es voc9 es+ 8 au+oma+icamen+e8 direcionando +odo o fu+uro do si+e.

Descrever es+es aspec+os sucin+amen+e em um documen+o que con+enha as idias iniciais do p)ane*amen+o8 evi+a que sua mem2ria pre!ue peas como o esquecimen+o de prioridades ou mesmo aque)a si+uao cons+ran!edora8 em que voc9 no )em'ra o mo+ivo pe)o qua) o formu) rio inicia com um de+erminado campo. O p)ano documen+ado evo)ui por meio de especia)i7a%es para um documen+o de especificao. A especificao permi+e ras+rear decis%es de desi!n permi+indo o con+ro)e do pro*e+o e medio do pro!resso do desenvo)vimen+o.

3mpor+an+eD
7ara .o!O ) )!)ar o /3u trabalEo 43 pla 3Na13 to 3 43<) )9Q3/ C 3!3//2r)o ;u3 pa//31o/ por 3 po to/ <u 4a13 ta)/R I43 t)<)!ar o/ obN3t).o/ 4o /)t3= I43 t)<)!ar o p:bl)!o al.o 4o /)t3= I43 t)<)!a90o 43 3!3//)4a43/ tC! )!a/ r3la!)o a4a/ W pro4u90o 4o /)t3.

# )43 t)<)!a90o 4o/ obN3t).o/ An+es de iniciarmos o pro*e+o de desi!n de um si+e fundamen+a) iden+ificarmos os seus o'*e+ivos Beducao8 en+re+enimen+o8 vendas8 re)i!ioso...C. Ao definirmos c)aramen+e os o'*e+ivos do si+e e sua misso8 es+amos de+erminando for+es indica+ivos do seu pN')ico a)vo8 con+eNdo8 funo e iden+idade do si+e.

A iden+ificao do o'*e+ivo8 que servir como baseline do pro*e+o8 no deve cons+ar apenas na documen+ao inicia) do pro*e+o8 mas +am'm na p !ina de seu c)ien+e. O'serve que8 na p !ina principa) do si+e da J@36/D8 0o <)!a !laro o o'*e+ivo principa) da empresa. ()ano? =ue +ipo de p)ano? De previd9ncia? ,e!uro? ,aNde? -asa pr2pria?

@o si+e da Iuarida8 * na primeira p !ina fica c)aro o o'*e+ivo da empresa8 pois reme+e ao seu pape) como empresa do se!men+o imo'i)i rio. ob%etivo o resultado pretendido. fim pro%etar uma mensa!em para um pblico espec&fico, na esperana de obter dele a resposta dese%ada.

3mpor+an+eD
Co <or13 5X !E 3 &orto A"00"B> po431o/ ) )!)ar a 43<) )90o 43 13ta/ 4o /)t3 !o1 p3r*u ta/ /)1pl3/> !o1oR Qual a 1)//0o 4a or*a )za90o? Co1o a !r)a90o 43 u1 /)t3 po43 apo)ar a 1)//0o 43 /ua or*a )za90o? Qual a at)tu43 ;u3 .o!O 3/p3ra 4o/ ) t3r auta/ ;u3 .)/)tar31 /ua p2*) a? Co1o .o!O pr3t3 43 134)r o /u!3//o 4o /)t3? Qua)/ 3/tratC*)a/ .o!O pr3t3 43 ut)l)zar o /)t3 para at) *)r /ua/ 13ta/? O ;u3 .o!O 3/p3ra ;u3 o/ ) t3r auta/ p3 /31 ap?/ .)/)tar31 /ua p2*) a? Co1o .o!O pr3t3 43 r3al)zar a/ 1a ut3 9Q3/ 3 atual)za9Q3/ 4o /)t3 ap?/ /ua <) al)za90o?

I43 t)<)!a90o 4o/ <uturo/ u/u2r)o/ De acordo com @ie)sen B2000C8 a &e' e1i!e O+empo 7ero de aprendi7a!emP. O mais impor+an+e que cada servio se*a 'aseado na an )ise da +arefa dos usu rios espec;ficos8 assim como em suas necessidades. Os me)hores si+es so aque)es que do supor+e ao modo como os seus usu rios dese*am a'ordar os pro')emas. @o 'as+a +er um visua) a+raen+e8 o con+eNdo pode a+ ser 'om8 mas se o visi+an+e +iver dificu)dades para encon+rar o que procura8 vai a'andon <)o8 com cer+e7a.

3mpor+an+eD
I43 t)<)!ar a popula90o al.o 4o /)t3 C pala.ra 43 or431 para *ara t)r o /u!3//o 4o proN3to. #l*u1a/ p3r*u ta/ ) )!)a)/ po431 /3r.)r 43 rot3)ro para ) )!)ar 3/t3 trabalEoR Qu31 u/a o /)t3? Qu31 <or 3!3 ) <or1a9Q3/ ao /)t3? Qu31 /ol)!)ta ) <or1a9Q3/ 4o /)t3? O ;u3 po43 atra)r o u/u2r)o ao /)t3? O u/u2r)o .a) ap3 a/ l3r a ) <or1a90o ou po43 optar por )1pr)1)+la?

". RECO'END#6GE$ DO H3C 7#R# N#VE,#6%O N# HEI

O &3- um or!anismo reconhecido in+ernaciona)men+e e +em por o'*e+ivo8 es+a'e)ecer requisi+os de qua)idade para pro*e+os &e'. /n+re diversos fa+ores8 so ressa)+adas ques+%es re)acionadas ao mecanismo de navegao do site. Os pon+os descri+os pe)o &3- e +radu7idos por Dias B2002C8 fa7em meno ao uso de mecanismos de nave!ao c)aros para o usu rio. Jm dos pon+os mais impor+an+es8 a ser o'servado no mecanismo de nave!ao a !o3rO !)a e a /)/t31at)za90o 4a a.3*a90o. O uso de informa%es de orien+ao8 'arras de nave!ao8 mapa do si+e8 aumen+am as pro'a'i)idades de encon+rar o que se procura no si+e.

3mpor+an+eD
7ara ;u3 .o!O propo Ea u1 proN3to !o3r3 t3 !o1 3/t3/ obN3t).o/ 3@)/t31 al*u / po to/ ;u3 43.31 /3r ob/3r.a4o/R

I43 t)<)!ar !lara13 t3 o 43/t) o 43 !a4a l) P. Qua 4o .o!O <az o t3@to 4o l) P p3 /3 ;u3 3l3 po43 /3r l)4o <ora 4o !o t3@to> 3 ;u3 3/t3 !a/o> 43.3 /3r !laro 3 )lu/trat).o o /u<)!)3 t3 para /3r 3 t3 4)4o. -a1bC1 C 3@tr31a13 t3 )1porta t3> ;u3 o l) P /3Na !o !)/o> ou /3NaR 0o 3/!r3.a l) P/ lo *o/. Na <)*ura aba)@o t31o/ u1 3@31plo 3*at).o> o 43 !a4a l) P C !o1po/to por prat)!a13 t3 u1a part3 4o t3@to 4a ot!)a> /3 4o ;u3 3/ta C a Eo13 pa*3 4o /)t3.

AAA.ufsc.'r

N0o 3/;u39a 43 ) <or1ar ao ) t3r auta /obr3 !o1o o /)t3 C or*a )za4o. I/to po43 /3r <3)to ut)l)za 4o+/3 u1 mapa do site ou u1 sum#rio. N0o 3/;u39a 43 43)@ar !laro ao u/u2r)o ;ua)/ a/ po//)b)l)4a43/ 4o /)t3 31 t3r1o/ 43 a!3//)b)l)4a43. 531br3+/3 o ;u3 0o /3 /ab3> 0o /3 u/aU No /)t3 4a 7r3<3)tura 43 7orto #l3*r3 o ) t3r auta t31 a po//)b)l)4a43 43 /3 lo!al)zar rap)4a13 t3 !o1 a aNu4a 4o 1apa 4o /)t3 a//)1 !o1o po43 43/!obr)r to4a/ a/ ) <or1a9Q3/ 4)/po .3)/ o 13/1o.

h++p:QQAAA.por+oa)e!re.rs.!ov.'rQ (or 3!3r barra/ 43 a.3*a90o para 43/ta!ar 3 4ar a!3//o ao 13!a )/1o 43 a.3*a90o. 7ro!ur3 a*rupar l) P/ r3la!)o a4o/ 3 tr3 /). #o u/ar <u 9Q3/ 43 p3/;u)/a o<3r39a 4)<3r3 t3/ t)po/ 43 p3/;u)/a. #//)1> .o!O .a) at) *)r 4)<3r3 t3/ .3)/ 43 !o1p3tO !)a 3 pr3<3rO !)a/ 4o/ u/u2r)o/. (a9a !ab39alEo/> par2*ra<o/> l)/ta/ o 43 o u/u2r)o <a!)l13 t3 )43 t)<);u3 a ) <or1a90o. N0o 3/;u39a 43 <or 3!3r ) <or1a9Q3/ /obr3 !ol39Q3/ 43 4o!u13 to/ A)/to C> 4o!u13 to/ !o1po/to/ por .2r)a/ p2*) a/B.

Captulo III
Objetivos de aprendizagem
Estar sensibili1ado para o uso de te2tos bre/es( coerentes e intelig"/eis.

1. E$CREVENDO 7#R# HEI

-o)ocar o ne!2cio do c)ien+e na in+erne+ f ci)8 a par+e dif;ci) acer+ar seu con+eNdo8 de forma que o mesmo a+raia repe+idamen+e c)ien+es e visi+an+es. Os visi+an+es querem sa'er duas coisas de imedia+o: o propsito do site e se ele contm as informaes que busca. (ara desco'rir is+o8 no mais do que meio minu+o ser o +empo dispensado na 'usca. A par+ir des+a cons+a+ao8 voc9 deve es+ar cien+e que so fundamen+ais em seu pro*e+o8 a clareza do texto e a forma como voc9 ir fornecer es+a informao.

4oc9 vai perce'er que a faci)idade da )ei+ura em um si+e passa pe)o aprimoramen+o no es+i)o da redao8 simp)icidade do +e1+o e 'revidade da informao8 o que no si!nifica cor+es em con+eNdo8 mas uma escri+a mais e)a'orada e c)ara. 4 rios es+udos confirmam que o usu rio ao che!ar a uma home page desconhecida8 e)e o)ha para a principa) rea de con+eNdo da p !ina8 'uscando por +;+u)os e ou+ras indica%es do +eor da p !ina. Depois des+a ava)iao inicia) que +oma a deciso de sair em 'usca de ou+ros si+es re)acionados para visi+ar. @ie)sen B2000C nos oferece a)!umas dire+ri7es para escrever para a &e':

3mpor+an+eD
$3r br3.3. N0o 3/!r3.3r 1a)/ 4o ;u3 F0Y 4o t3@to ;u3 3/!r3.3r)a para tratar 4o 13/1o a//u to 31 u1a publ)!a90o )1pr3//a. E/!r3.3r /31pr3 t3 4o !o1o <o!o a <a!)l)4a43 43 l3)tura 4o t3@to. U/ar par2*ra<o/ !urto/> /ubttulo/ 3 l)/ta/ !o1 1ar!a4or3/. (az3r u/o 43 E)p3rt3@to/ para /3*13 tar ) <or1a9Q3/ lo *a/. -3@to/ br3.3/ Ter na +e)a de compu+ador cerca de 2#\ mais )en+o do que )er no pape). O usu rio sen+e<se desconfor+ ve) na )ei+ura de +e1+os )on!os. Ou+ro aspec+o impor+an+e8 o de que devemos evi+ar a ro)a!em da +e)a B'arras de ro)a!emC8 os usu rios no !os+am de ro)ar a +e)a. 4e*a a se!uir8 a)!umas dicas impor+an+es B@3/T,/@8 2000C:

3mpor+an+eD

Ir3.)4a43 0o /)* )<)!a <alta 43 p3r/o al)4a43 o t3@to. O u/u2r)o apr3!)a u1a !3rta 4o/3 43 Eu1or 3 at)tu43. Cu)4a4o !o1 ap3lo/ 43 1arP3t) *> )/to 43/a*ra4a o u/u2r)o. Ut)l)z3+/3 43 l) P/ para !orroborar <ato/ ;u3 3/t0o /3 4o apr3/3 ta4o/ o t3@to> )/to traz !r34)b)l)4a43 ao /)t3. E.)t3 !o139ar u1a p2*) a !o1 13 /a*3 / 43 boa/ .) 4a/> 3la/ or1al13 t3 0o /0o l)4a/. E4)90o 43 t3@to/

A !r34)b)l)4a43 43 u1 /)t3 duramen+e a+in!ida8 quando o in+ernau+a encon+ra erros or+o!r ficos ou mesmo de concord5ncia no si+e. O uso do corre+or or+o!r fico imprescind;ve). O empre!o corre+o da )in!ua!em8 evi+a confus%es de in+erpre+ao. (a!)l)4a43 43 l3)tura O usu rio da 3n+erne+ por na+ure7a8 impacien+e8 norma)men+e no )9 comp)e+amen+e8 +e1+os con+;nuos. A )ei+ura fei+a pe)a esco)ha de pa)avras<chave8 sen+enas e par !rafos de in+eresse8 enquan+o par+es in+eiras de +e1+o so Opu)adasP por no )he in+eressarem. /s+es fa+os so comprovados cien+ificamen+e8 @ie)sen B2000C8 su!ere que se*a faci)i+ada a )ei+ura do usu rio:

3mpor+an+eD

#rt)*o/ 43.31 /3r 3/trutura4o/ !o1 4o)/ ou trO/ .3)/ 43 ttulo/ Attulo *3ral 4a p2*) a 3 ttulo/ 3 /ubttulo/> /3 apropr)a4oB. O/ ttulo/ 43.31 /3r /)* )<)!at).o/ Ao ttulo 43.3 ) 4)!ar 4o ;u3 /3 trata a p2*) a ou 13/1o a /390oB. Ut)l)zar l)/ta/ !o1 1ar!a4or3/ para ;u3brar o <lu@o 43 blo!o/ 43 t3@to u )<or13/. 7ala.ra/ !o /)43ra4a/ )1porta t3/ o t3@to> 43.31 !Ea1ar a at3 90o. 7o431o/ obt3r 3/t3 3<3)to ut)l)za 4o !or. Cu)4a4o para 0o ut)l)zar !o1o 43/ta;u3 a/ !or3/ ut)l)za4a/ 31 l) P/.

D9 uma o)hadinha na p !ina de a'er+ura do si+e da empresa Gi!. /)a )eva o in+ernau+a a pensar que o si+e +ra+a apenas a venda de e)e+rodoms+icos. A pa)avra e)e+rodoms+icos Bpar+e do +;+u)oC8 aparece em des+aque8 sendo inconsis+en+e e pouco si!nifica+iva8 considerando<se as funciona)idades do si+e que se prop%e > venda de +odos os produ+os e1is+en+es no supermercado.

Escre/er te2tos para Web 3 uma arte( ser breve no significa omitir informaes 4 (ara que is+o fique mais c)aro8 vamos dar uma o)hada na +a'e)a a se!uir. O mesmo +e1+o pu')ici+ rio so're o es+ado de @e'rasSa8 foi escri+o de # formas diferen+es. O +e1+o um es+udo compara+ivo re)acionado ao uso de par !rafos de +e1+o8 foi ap)icado para ava)iao a uma amos+ra de )ei+ores: Faci)idade da Tei+ura pe)o aprimoramen+o no es+i)o da redao B@3/T,/@8 2000C @e'rasSa rep)e+o de a+ra%es reconhecidas in+ernaciona)men+e que a+raem !randes mu)+id%es de pessoas +odos os anos. /m 1??. a)!uns dos )ocais mais visi+ados foram o For+ $o'ison ,+ae (arS B3##.000 visi+an+esC8 Ar'or Tod!e ,+ae ]is+orica) (arS X 6useum B100.000C8 -arhen!e B0..#?0C8 ,+hur 6useum of +he (rairie (ioneer B.0.002C. /m 1??.8 uma das a+ra%es mais visi+adas de @e'rasSa foram o For+ $o'ison ,+ae (arS8 Ar'or Tod!e ,+ae ]is+orica) (arS X 6useum8 -arhen!e8 e ,+hur 6useum of +he (rairie (ioneer. @e'rasSa rep)e+o de a+ra%es reconhecidas in+ernaciona)men+e que a+raem !randes mu)+id%es de pessoas +odos os anos. /m 1??.8 a)!uns dos )ocais mais visi+ados foram: For+ $o'ison ,+ae (arS B3##.000 visi+an+esCM Ar'or Tod!e ,+ae ]is+orica) (arS X 6useum B100.000CM

-3@to pro1o!)o al

0\ me)hor

-3@to !o !)/o

#0\ me)hor 4"\ me)hor

5aXout <2!)l 43 l3r

5) *ua*31 obN3t).a

V3r/0o !o1b) a4a Aut)l)za o/ trO/ apr)1ora13 to/ o 3/t)lo 4a r34a90oB

-arhen!e B0..#?0CM ,+hur 6useum of +he (rairie (ioneer B.0.002C. @e'rasSa +em diversas a+ra%es. /m 1??. a)!uns dos )ocais mais visi+ados foram o For+ $o'ison ,+ae (arS B3##.000 visi+an+esC8 Ar'or Tod!e ,+ae ]is+orica) (arS X 6useum B100.000C8 -arhen!e B0..#?0C8 ,+hur 6useum of +he (rairie (ioneerB.0.002C. /m 1??.8 seis dos )ocais mais visi+ados de@e'rasSa foram: For+ $o'ison ,+ae (arSM Ar'or Tod!e ,+ae ]is+orica) (arS X 6useum M -arhen!eM ,+hur 6useum of +he (rairie (ioneer.

2"\ me)hor

5) *ua*31 /)1pl3/ =uando escrevemos para &e' aconse)h ve) apresen+armos inicia)men+e8 o ma+eria) mais impor+an+e8 usando o pr) !p)o 4a p)rZ1)43 ) .3rt)4a. -omo a maioria dos usu rios8 apenas passa os o)hos por um +e1+o8 @ie)sen B2000C8 des+aca que impor+an+e considerar os se!uin+es aspec+os: Pirmide invertida um jargo da rea jornalstica utilizado para identificar um formato de texto onde a parte considerada mais importante da notcia ou da informao deve ser apresentada no primeiro pargrafo.

3mpor+an+eD
Co139ar !a4a p2*) a !o1 a !o !lu/0o= 'a t3r ap3 a/ u1a )4C)a por par2*ra<o= 5)1)tar o u/o 43 13t2<ora/ pr) !)pal13 t3> 31 ttulo/> o u/u2r)o po43 ) t3rpr3tar 43 u1a <or1a total13 t3 4)/tor!)4a Nu/ta13 t3 por /ua br3.)4a43. Jma dica impor+an+e man+er o con+eNdo de mensa!ens de +e1+o simp)es e cons+ru+ivas. A)m de apon+ar a e1is+9ncia do pro')ema8 devem a*udar o usu rio a super <)o. Jma mensa!em de erro apresen+ada no si+e resu)+ado de uma 'usca sem sucesso. 3s+o no fica c)aro ao usu rio8 pois no so apresen+adas su!es+%es8 +ampouco8 uma mensa!em indicando que a 'usca foi ma)<sucedida. D).)/0o 43 p2*) a/ 31 part3/ Ao escrevermos +e1+os 'reves8 no devemos sacrificar a profundidade do assun+o. L poss;ve) man+er a profundidade de um +e1+o re)a+ivamen+e e1+enso8 fa7endo uso de )inSs de hiper+e1+o8 dividindo as informa%es em m2du)os. 3nforma%es secund rias podem ser a)ocadas em p !inas secund rias8 e mesmo informa%es comp)emen+ares Bque no se*am de in+eresse !era)C podem ser disponi'i)i7adas em )inSs comp)emen+ares. Ao usar o hiper+e1+o +enha os se!uin+es cuidados B@3/T,/@8 2000C:

3mpor+an+eD
2

N0o <a9a <lu@o/ !o t uo/ 43 ) <or1a90o ;u3 !o t) ua1 a /3*u 4a p2*) a= D).)4a o !o t3:4o 31 part3/ !o3r3 t3/> !a4a u1a 1o opol)za 4o u1 43t3r1) a4o a//u to= O ) t3r auta 43.3 po43r /3l3!)o ar /o13 t3 o t?p)!o 43 ) t3r3//3 para 4oM loa4= ,ara ta ;u3 o/ l) P/ 1a)/ )1porta t3/ 3/t3Na1 .)/.3)/ /31 3!3//)4a43 43 rola*31. U1 3@31plo 43 probl31a 43 r3ut)l)za90o 4a 14)a )1pr3//a a I t3r 3t= po431o/ .3r a <)*ura a /3*u)r. # r3.)/ta 'cientific American (rasil 3@)*3 4o u/u2r)o a rola*31 43 [ p2*) a/ para a l3)tura !o1pl3ta 4o art)*o. #o o<3r3!3r1o/ o !o t3:4o a H3b=

O 13lEor !o /3lEo para art)*o/ lo *o/ C r33/!r3.O+lo/. $3 <or )1po//.3l /ub4).)4)+lo> pr3<)ra a rola*31 ao o<3r3!)13 to 43 4ua/ p2*) a/> 4o t)po pr?@)1a p2*) aSp2*) a a t3r)or.

RED#6%O DE -E\-O$ N# HEI

D)!a/ 43 !o1o 3/!r3.3r u1 t3@toR

". $I-E N# ]-IC# D# 7UI5ICID#DE

3. DIC#$ 7#R# CRI#R U'# '#RC#

Captulo IV
Objetivos de aprendizagem
'econhecer caracter"sticas dos diferentes padr0es de imagens digitali1adas. +prender a escolher o tipo de ar5ui/o ade5uado ao tipo de imagem.

=ue as ima!ens e !r ficos so e1+remamen+e a+ra+ivos +odos n2s sa'emos. 6as +am'm verdade que +oda a a+ra+ividade do si+e des+ru;da quando a ima!em no parece rea) ou nos parece O'orradaP. (ior ainda se +ivermos que esperar v rios minu+os a+ que o download es+e*a fina)men+e conc)u;do. (or que as ima!ens so !ravadas em I3F8 V(/I e (@I? =ua) a diferena en+re e)es? =ua) a me)hor so)uo para ser usada no meu si+e? @es+a unidade vamos esc)arecer es+as dNvidas fa)ando so're forma+os8 mecanismos de compresso e suas principais carac+er;s+icas. 4oc9 +am'm es+udar uma ferramen+a que permi+e a edi+orao !r fica e poder u+i)i7ar )ivremen+e sem nenhum cus+o. 1. I'#,EN$

2. -I7O$ DE #RQUIVO$ DE I'#,E'