apostila-Web-Design.pdf

8/11/2019 apostila-Web-Design.pdf

1/163

Curso prtico

deWeb Design

Um manual que trata o design orientado web, com umainteressante introduo ao design em geral e o desenvolvimento

do design na web em particular.

http://www.criarweb.com/webdesign/
http://www.criarweb.com/webdesign/http://www.criarweb.com/webdesign/


2/163

2 de 163

Captulos do manual.! "ntroduo ao design gr#icoA histria do design grfico, desde as origens da humanidade at o aparecimento da web e da Internet.

$.! Design gr#icoUma aproximao ao design grfico em geral, com uma descrio dos elementos ue comp!em habitualmenteum desenho e as caracter"sticas principais ue podemos encontrar neles.

%.! Design gr#ico na web# design web $ai mais alm do design tradicional, pois existem muitos limitadores relacionados com o meioonde se apresentam as pginas% Internet. &onheceremos as caracter"sticas fundamentais do design na web.

&.! Componentes gr#icos de um computador'escrio dos principais componentes grficos de um computador% # carto grfico e o monitor.

'.! (esoluo de tela

&onsidera!es relati$as aos distintos tipos de tela ue os $isitantes possam ter e o espao dispon"$el para cadacaso.

).! Cores em um computador&omo trabalham os computadores para codificar uma cor. # formato ()*.

*.! Calibragem do monitorUma composio grfica pode ser $ista com diferentes tonalidades dependendo da configurao do monitor.+emos ue calibrar o monitor para ue o aspecto de nossa obra sea o mesmo em todos os computadores.

+.! ormas bsicas em design gr#icoA linguagem $isual atra$s de grafismos pode se descompor em entidades bsicas, onde cada uma delas tempor si mesma um significado prprio, porm unidas de diferentes formas podem constituir elementoscomunicati$os distintos.

-.! ponto# ponto a unidade m"nima de informao $isual, e est caracteri-ado por sua forma, tamanho, cor elocali-ao.

/.!0 lin1aA linha o elemento bsico de todo grafismo e um dos mais usados. (epresenta a forma de expresso maissimples e pura, porm tambm a mais dinmica e $ariada.

.! contorno# contorno o obeto grfico criado uando o trao de uma linha se une em um mesmo ponto.

$.! quadrado/lementos de desenho% o uadrado.

%.!0 circun#er2ncia/lementos de design% a circunfer0ncia.

&.!Contornos mistos/lementos de design% contornos mistos, ue so os ue esto compostos por $rios tipos de contornos.

'.!Contornos org3nicos/lementos de design% contornos orgnicos, ue esto formados por cur$as li$res.

).! design equilibrado. "ntroduo

/studo das regras bsicas do design grfico. 1o existe uma frmula ue d0 um design infal"$el, porm simumas existem umas regras bsicas.

*.! design equilibrado. 0s propor4es
http://www.criarweb.com/artigos/711.phphttp://www.criarweb.com/artigos/712.phphttp://www.criarweb.com/artigos/713.phphttp://www.criarweb.com/artigos/725.phphttp://www.criarweb.com/artigos/739.phphttp://www.criarweb.com/artigos/751.phphttp://www.criarweb.com/artigos/767.phphttp://www.criarweb.com/artigos/783.phphttp://www.criarweb.com/artigos/797.phphttp://www.criarweb.com/artigos/814.phphttp://www.criarweb.com/artigos/814.phphttp://www.criarweb.com/artigos/contorno.htmlhttp://www.criarweb.com/artigos/contorno.htmlhttp://www.criarweb.com/artigos/quadrado.htmlhttp://www.criarweb.com/artigos/quadrado.htmlhttp://www.criarweb.com/artigos/circunferencia.htmlhttp://www.criarweb.com/artigos/circunferencia.htmlhttp://www.criarweb.com/artigos/contornos-mistos.htmlhttp://www.criarweb.com/artigos/contornos-mistos.htmlhttp://www.criarweb.com/artigos/contornos-organicos.htmlhttp://www.criarweb.com/artigos/contornos-organicos.htmlhttp://www.criarweb.com/artigos/design-equilibrado-introducao.htmlhttp://www.criarweb.com/artigos/design-equilibrado-introducao.htmlhttp://www.criarweb.com/artigos/design-equilibrado-proporcoes.htmlhttp://www.criarweb.com/artigos/design-equilibrado-proporcoes.htmlhttp://www.criarweb.com/artigos/711.phphttp://www.criarweb.com/artigos/712.phphttp://www.criarweb.com/artigos/713.phphttp://www.criarweb.com/artigos/725.phphttp://www.criarweb.com/artigos/739.phphttp://www.criarweb.com/artigos/751.phphttp://www.criarweb.com/artigos/767.phphttp://www.criarweb.com/artigos/783.phphttp://www.criarweb.com/artigos/797.phphttp://www.criarweb.com/artigos/814.phphttp://www.criarweb.com/artigos/contorno.htmlhttp://www.criarweb.com/artigos/quadrado.htmlhttp://www.criarweb.com/artigos/circunferencia.htmlhttp://www.criarweb.com/artigos/contornos-mistos.htmlhttp://www.criarweb.com/artigos/contornos-organicos.htmlhttp://www.criarweb.com/artigos/design-equilibrado-introducao.htmlhttp://www.criarweb.com/artigos/design-equilibrado-proporcoes.html


3/163

3 de 163

'e$emos ter em conta a definio a utili-ar, os elementos grficos e as propor!es...

+.! design equilibrado. 0 escala/ntende2se por escala a relao entre as propor!es dos elementos $isuais de uma composio.

-.! design equilibrado. contraste

# contraste permite ressaltar o peso $isual, podemos consegui2lo atra$s de di$ersos meios% tons, cores,contornos e escala.

$/.! design equilibrado. s agrupamentos&omo os elementos web de$em se agrupar para obter um resultado coerente.

$.! design equilibrado. reticulado&omo harmoni-ar os blocos de conte3do ue formaro a composio do desenho.

$$.! design equilibrado. s alin1amentos1ecessrios para conseguir uma composio ordenada e lgica, assim como para relacionar elementos.

$%.! design equilibrado. 0s simetrias#utro condicionante para ue o design da web tenha uma organi-ao natural.

$&.! design equilibrado. equilbrio entre conte5dosA organi-ao espacial, primordial para atrair ao usurio.

$'.! design equilibrado. 0 1ierarquia visualA organi-ao guia ao usurio na contemplao de uma pgina web.

$).!6eoria da cor. "ntroduo4 uma parte fundamental da web, produtor de sensa!es.

$*.!6eoria da cor. 7ature8a da cor'escrio formal da cor como um fen5meno f"sico.

$+.!6eoria da cor. 0 percepo da cor&omo o olho pode detectar e classificar as cores ue chegam.

$-.!6eoria da cor. 9odelos de cor'escrio dos tipos de cor conhecidos, assim como se aborda uma explicao de como os obetos aduirem ascores.

%/.!6eoria da cor. 6ipos de cor1este cap"tulo descre$eremos como a partir das cores primrias se podem conseguir outras, e dependendo dastonalidades fa-er diferentes classifica!es.

%.!6eoria da cor. :ropriedades das coresAs cores t0m umas propriedades inerentes ue lhes permite se distinguir de outras e gra$ar diferentesdefini!es de tipo de cor.

%$.!6eoria da cor. Contrastes de cor# contraste um fen5meno com o ual se podem diferenciar cores atendendo 6 luminosidade, 6 cor de fundosobre a ual se proetam...

%%.!6eoria da cor. ;studo de algumas cores "1este cap"tulo descre$eremos as sensa!es ue produ-em algumas cores como o $ermelho, o $erde e o a-ul,assim como seu poss"$el uso e seu significado em uma web.

%&.!6eoria da cor. ;studo de algumas cores ""Acabamos a sesso da teoria da cor com o estudo de mais cores, as sensa!es ue produ-em e suacon$eni0ncia de uso nos web sites.

%'.!0 cor na web. Cores disponveis para a web'escobriremos o n3mero de cores ue poderemos usar em uma web, e se so estes mesmos se a web seexecuta em um computador ou em outro.
http://www.criarweb.com/artigos/design-equilibrado-a-escala.htmlhttp://www.criarweb.com/artigos/design-equilibrado-a-escala.htmlhttp://www.criarweb.com/artigos/design-equilibrado-contraste.htmlhttp://www.criarweb.com/artigos/design-equilibrado-contraste.htmlhttp://www.criarweb.com/artigos/design-equilibrado-agrupamentos.htmlhttp://www.criarweb.com/artigos/design-equilibrado-agrupamentos.htmlhttp://www.criarweb.com/artigos/design-equilibrado-reticulado.htmlhttp://www.criarweb.com/artigos/design-equilibrado-reticulado.htmlhttp://www.criarweb.com/artigos/design-equilibrado-alinhamentos.htmlhttp://www.criarweb.com/artigos/design-equilibrado-alinhamentos.htmlhttp://www.criarweb.com/artigos/design-equilibrado-simetrias.htmlhttp://www.criarweb.com/artigos/design-equilibrado-simetrias.htmlhttp://www.criarweb.com/artigos/equilibrio-entre-conteudos.htmlhttp://www.criarweb.com/artigos/equilibrio-entre-conteudos.htmlhttp://www.criarweb.com/artigos/design-equilibrado-hierarquia-visual.htmlhttp://www.criarweb.com/artigos/design-equilibrado-hierarquia-visual.htmlhttp://www.criarweb.com/artigos/teoria-da-cor-introducao.htmlhttp://www.criarweb.com/artigos/teoria-da-cor-introducao.htmlhttp://www.criarweb.com/artigos/teoria-da-cor-natureza-da-cor.htmlhttp://www.criarweb.com/artigos/teoria-da-cor-natureza-da-cor.htmlhttp://www.criarweb.com/artigos/teoria-da-cor-percepcao-da-cor.htmlhttp://www.criarweb.com/artigos/teoria-da-cor-percepcao-da-cor.htmlhttp://www.criarweb.com/artigos/teoria-da-cor-modelos-de-cor.htmlhttp://www.criarweb.com/artigos/teoria-da-cor-modelos-de-cor.htmlhttp://www.criarweb.com/artigos/teoria-da-cor-tipos-de-cor.htmlhttp://www.criarweb.com/artigos/teoria-da-cor-tipos-de-cor.htmlhttp://www.criarweb.com/artigos/teoria-da-cor-propriedades-das-cores.htmlhttp://www.criarweb.com/artigos/teoria-da-cor-propriedades-das-cores.htmlhttp://www.criarweb.com/artigos/teoria-da-cor-contrastes-de-cor.htmlhttp://www.criarweb.com/artigos/teoria-da-cor-contrastes-de-cor.htmlhttp://www.criarweb.com/artigos/teoria-da-cor-estudo-algumas-cores.htmlhttp://www.criarweb.com/artigos/teoria-da-cor-estudo-algumas-cores.htmlhttp://www.criarweb.com/artigos/teoria-da-cor-estudo-algumas-cores-ii.htmlhttp://www.criarweb.com/artigos/teoria-da-cor-estudo-algumas-cores-ii.htmlhttp://www.criarweb.com/artigos/cores-disponiveis-para-web.htmlhttp://www.criarweb.com/artigos/cores-disponiveis-para-web.htmlhttp://www.criarweb.com/artigos/design-equilibrado-a-escala.htmlhttp://www.criarweb.com/artigos/design-equilibrado-contraste.htmlhttp://www.criarweb.com/artigos/design-equilibrado-agrupamentos.htmlhttp://www.criarweb.com/artigos/design-equilibrado-reticulado.htmlhttp://www.criarweb.com/artigos/design-equilibrado-alinhamentos.htmlhttp://www.criarweb.com/artigos/design-equilibrado-simetrias.htmlhttp://www.criarweb.com/artigos/equilibrio-entre-conteudos.htmlhttp://www.criarweb.com/artigos/design-equilibrado-hierarquia-visual.htmlhttp://www.criarweb.com/artigos/teoria-da-cor-introducao.htmlhttp://www.criarweb.com/artigos/teoria-da-cor-natureza-da-cor.htmlhttp://www.criarweb.com/artigos/teoria-da-cor-percepcao-da-cor.htmlhttp://www.criarweb.com/artigos/teoria-da-cor-modelos-de-cor.htmlhttp://www.criarweb.com/artigos/teoria-da-cor-tipos-de-cor.htmlhttp://www.criarweb.com/artigos/teoria-da-cor-propriedades-das-cores.htmlhttp://www.criarweb.com/artigos/teoria-da-cor-contrastes-de-cor.htmlhttp://www.criarweb.com/artigos/teoria-da-cor-estudo-algumas-cores.htmlhttp://www.criarweb.com/artigos/teoria-da-cor-estudo-algumas-cores-ii.htmlhttp://www.criarweb.com/artigos/cores-disponiveis-para-web.html


4/163

4 de 163

%).!0 cor na web. :aletas de cor seguras. Websa#e e (ealleri# e #ontes >ans >eri#7emos a classificao de fontes tipogrficas em 8erif e 8ans 8erif.

&*.!6ipogra#ia digital7emos como podemos 9interletrar: e desenhar caracteres de melhor ualidade.

&+.!ontes para impresso e #ontes para tela7emos tcnicas e tipos de fontes tipogrficas para tipos de resolu!es de tela e impresso.

"ntroduo ao design gr#icoA histria dodesigngrfico, desde as origens da humanidade at o aparecimento da web e da Internet.

Por Luciano Moreno
http://www.criarweb.com/artigos/paletas-de-cor-seguras-websafe-reallysafe.htmlhttp://www.criarweb.com/artigos/paletas-de-cor-seguras-websafe-reallysafe.htmlhttp://www.criarweb.com/artigos/cor-na-web-o-problema-das-imagens.htmlhttp://www.criarweb.com/artigos/cor-na-web-o-problema-das-imagens.htmlhttp://www.criarweb.com/artigos/cores-e-partes-de-uma-pagina.htmlhttp://www.criarweb.com/artigos/cores-e-partes-de-uma-pagina.htmlhttp://www.criarweb.com/artigos/escolha-paleta-para-website.htmlhttp://www.criarweb.com/artigos/escolha-paleta-para-website.htmlhttp://www.criarweb.com/artigos/ferramentas-basicas-para-trabalhar-cores.htmlhttp://www.criarweb.com/artigos/ferramentas-basicas-para-trabalhar-cores.htmlhttp://www.criarweb.com/artigos/tipografia-introducao.htmlhttp://www.criarweb.com/artigos/tipografia-introducao.htmlhttp://www.criarweb.com/artigos/tipografia-um-pouco-de-historia.htmlhttp://www.criarweb.com/artigos/tipografia-um-pouco-de-historia.htmlhttp://www.criarweb.com/artigos/medidas-tipograficas.htmlhttp://www.criarweb.com/artigos/medidas-tipograficas.htmlhttp://www.criarweb.com/artigos/partes-de-uma-letra.htmlhttp://www.criarweb.com/artigos/partes-de-uma-letra.htmlhttp://www.criarweb.com/artigos/familias-tipograficas.htmlhttp://www.criarweb.com/artigos/familias-tipograficas.htmlhttp://www.criarweb.com/artigos/fontes-serif-e-fontes-sans-serif.htmlhttp://www.criarweb.com/artigos/fontes-serif-e-fontes-sans-serif.htmlhttp://www.criarweb.com/artigos/tipografia-digital.htmlhttp://www.criarweb.com/artigos/tipografia-digital.htmlhttp://www.criarweb.com/artigos/fontes-para-impressao-e-fontes-para-tela.htmlhttp://www.criarweb.com/artigos/fontes-para-impressao-e-fontes-para-tela.htmlhttp://www.criarweb.com/artigos/711.php#%23http://www.criarweb.com/artigos/711.php#%23http://www.criarweb.com/artigos/711.php#%23http://www.criarweb.com/artigos/paletas-de-cor-seguras-websafe-reallysafe.htmlhttp://www.criarweb.com/artigos/cor-na-web-o-problema-das-imagens.htmlhttp://www.criarweb.com/artigos/cores-e-partes-de-uma-pagina.htmlhttp://www.criarweb.com/artigos/escolha-paleta-para-website.htmlhttp://www.criarweb.com/artigos/ferramentas-basicas-para-trabalhar-cores.htmlhttp://www.criarweb.com/artigos/tipografia-introducao.htmlhttp://www.criarweb.com/artigos/tipografia-um-pouco-de-historia.htmlhttp://www.criarweb.com/artigos/medidas-tipograficas.htmlhttp://www.criarweb.com/artigos/partes-de-uma-letra.htmlhttp://www.criarweb.com/artigos/familias-tipograficas.htmlhttp://www.criarweb.com/artigos/fontes-serif-e-fontes-sans-serif.htmlhttp://www.criarweb.com/artigos/tipografia-digital.htmlhttp://www.criarweb.com/artigos/fontes-para-impressao-e-fontes-para-tela.htmlhttp://www.criarweb.com/artigos/711.php#%23


5/163

5 de 163

;ublicado em% $)??/*

< $otos

# ser humano sempre te$e a necessidade de se comunicar com seus semelhantes, attal ponto ue podemos afirmar ue se o homem o ser mais a$anado da nature-a,

de$ido, em grande parte 6 facilidade ue te$e para fa-er part"cipe aos demais de suasidias de uma forma ou de outra.

As primeiras formas comunicati$as foram mediante elementos $isuais. Antes dedesen$ol$erem capacidades de expresso mediante a linguagem falada, os homensutili-aram seu corpo para comunicaraos demais estados de nimo, deseos e inuietudesatra$s de inten!es, express!es e signos, ue com o tempo aduiriram a condio de=linguagem=, ao con$erter2se em modelos de comunicao.

/mbora posteriormente a linguagem falada passara a ser o meio de intercmbio deinformao mais direto, a linguagem $isual continuou tendo um importante peso nas

rela!es comunicati$as, sobretudo a partir do uso de di$ersos materiais e suportes comomeios de =modelar= mensagens $isuais, como demonstram uma infinidade de desenhosem pedra e pinturas rupestres ue chegaram aos nossos dias, nas uais representamelementos naturais, ati$idades cotidianas e diferentes signos artificiais com significadoprprio.

:intura rupestre @Cova de 0ltamira, ;span1aA

A representao de idias mediante grficos te$e seu maior a$ance com o aparecimentodas linguagens escritas, ue permitiram expressar cadeias estruturadas de pensamentos

mediante um conunto de elementos grficos de significado prprio dispostos segundouma estrutura definida, capa-es de transmitir mensagens entend"$eis pela comunidade.

/stas linguagens escritas esta$am baseadas na representao de elementos tomados danature-a, aos ue se atribu"a uma interpretao particular, e tambm um conuntoartificial de s"mbolos in$entados% os alfabetos. &ada um destes signos isolados tinha 6s$e-es um significado incerto, porm unido a outros, permitiam representar graficamentea linguagem falada por cada po$o ou cultura.
http://www.criarweb.com/artigos/711.php#%23http://www.criarweb.com/artigos/711.php#%23http://www.criarweb.com/artigos/711.php#%23http://www.criarweb.com/artigos/711.php#%23http://www.criarweb.com/artigos/711.php#%23http://www.criarweb.com/artigos/711.php#%23


6/163

6 de 163

Bravura em pedra com 1ierogl#ico @;gitoA

&omo suporte f"sico, foi utili-ada inicialmente a pedra, porm, rapidamente se buscaramoutros tipos de materiais ue permitiram uma maior facilidade de uso e uma maiorportabilidade, como os papiros ou os pergaminhos.

:apiro dos mortos

+ambm se comearam a usar diferentes tipos de pigmentos naturais para dar um maiorcolorido e expresso 6s obras escritas e composi!es art"sticas, e a dispor os diferenteselementos textuais e grficos de forma harmoniosa e euilibrada, ue se apreciou uecom isso se ganha$a poder comunicati$o, clare-a e bele-a. Isto pode ser apreciado naconfeco dos incunbulo reali-ados nos monastrios, nos ue se obser$a de forma clara

a importncia da =>#(?A= @design para transmitir uma mensagem.


7/163

7 de 163

"ncunbulo medieval

;osteriormente, Bohann )utenberg in$entou a imprensa, artefato capa- de reprodu-ir emgrandes uantidades e de forma c5moda um original, o ue tornou poss"$el ue osdocumentos impressos e a mensagem ue continham fossem acess"$eis a um granden3mero de pessoas.

:rimeiro livro impresso

Cogo comearam a aparecer imprensas ue reprodu-iam todo tipo de obras, cada $e-mais elaboradas. &omearam2se a usar no$os materiais como suporte, no$as tintas eno$os tipos de letras, originando o aparecimento de profissionais especiali-ados em seumaneo, os tipgrafos e os impressores, tal$e- os primeiros designers grficos como tal,

se encarrega$am de compor e construir os diferentes elementos ue formariam umaobra de forma ue resultasse lgica, clara, harmoniosa e bela.

#utro grande impulsor do desen$ol$imento do design grfico foi a (e$oluo Industrial.8urgiram as fbricas e a economia de mercado, um grande n3mero de pessoas sedeslocou 6s cidades para trabalhar, aumentaram as loas e os comrcios e comeou aconcorr0ncia entre empresas por se tornarem uma parte do mercado. &om isso,apareceu e se desen$ol$eu uma no$a tcnica comercial, a publicidade, encarregada de


8/163

8 de 163

fa-er chegar aos consumidores mensagens espec"ficas ue lhes con$encessem de ueum produto dado era melhor ue outros anlogos.

Carta8 publicitrio

# desen$ol$imento da publicidade trouxe consigo um desen$ol$imento paralelo do

design grfico e dos suportes de comunicao. Da$ia ue con$encer ao p3blico das$antagens de um produto ou marca, e para isso nada melhor ue mensagens concisas,carregados de componentes psicolgicos, com desenhos cada $e- mais elaborados, uechega$a ao maior n3mero poss"$el de pessoas. # como se transmitia a informaochegou inclusi$e a superar em importncia 6 mesma informao transmitida.

1o se trata$a de apresentar mensagens $isuais belas, e sim, efeti$as, ue $endiam,e para isso, no du$idaram em reali-ar grandes in$estimentos, tornando poss"$el umgrande a$ance nas tcnicas de design e no aparecimento de profissionais dedicadosexclusi$amente a desen$ol$e2las e coloca2las em prtica% os designers grficos.

1o sculo EE, surgiram os computadores, muinas em um princ"pio destinadas a umgrupo redu-ido de tcnicos e especialistas, mas ue pouco a pouco foram ganhandopopularidade e ue com o aparecimento do computador pessoal se estenderam a todosos ambientes e grupos sociais.

# computador 3til porue permite o uso de programas informticos capa-es de reali-aruma infinidade de tarefas. ;orm, estes programas t0m uma estrutura interna muitocomplexa, ue na maioria das $e-es $ai mais pra l dos conhecimentos ue possuem osusurios dos mesmos.

Isto deu lugar 6 introduo de uns elementos intermedirios, denominados =Interfaces deUsurio=, cua misso era isolar o usurio das considera!es tcnicas e processosinternos dos programas, permitindo2lhes reali-ar tarefas com eles por meio de uma=linguagem= intermediria, mais fcil de ser entendida pelo usurio.

"nter#ace de usurio em modo teto


9/163

9 de 163

F princ"pio, estes programas se manea$am de forma textual, mediante comandoscr"pticos, ue somente =experts= na matria podiam entender. ;orm, com o acesso 6informtica de todo tipo de pessoas tornou2se necessrio uma simplificao no maneodas aplica!es, surgindo o conceito de =Interface )rfica de Usurio= em toda suaextenso, como um meio capa- de tornar entend"$eis e us$eis estas aplica!es atra$s

de elementos $isuais comuns, ue apresentados na tela do computador permitiam aousurio mdio reali-ar as tarefas prprias de cada programa concreto.

"nter#ace Br#ica de Usurio

# trabalho de desenhar estas I)U correspondeu inicialmente aos prprios programadoresue desen$ol$eram as aplica!es, porm logo foi $isto ue seu conceito de interface deusurio no correspondia com a ue necessita$am os usurios finais.

>alta$am profissionais de design ue se encarregariam de conceber as interfaces, pormos designers grficos clssicos no esta$am acostumados a construir obras comcapacidades de interao e na$egabilidade, pelo ual ti$eram ue se reciclar,aprendendo conceitos e funcionalidades no$as.

&om a entrada em cena da Internet e as pginas web, tornou2se ainda mais patente adefasagem dos designers grficos com o no$o meio. >alta$a agora desenhar e construirinterfaces de usurio muito especiais, condicionadas a peuenos tamanhos de arui$o ea um meio concreto de apresentao, os na$egadores web, ue impunham sriaslimita!es ao design, ue necessita$am sistemas de na$egao entre pginas simples e

entend"$eis.

"nter#ace web


10/163

10 de 163

8e a isto somamos a necessidade dos criadores de interfaces web de conhecer a fundodiferentes linguagens de marcas e de programao @D+?C, Ba$a8cript, 'D+?C, e$idente ue era necessria o aparecimento de um no$o profissional, o webdesigner,h"brido entre o designer grfico clssico e o programador de aplica!es para Internet.

http://www.criarweb.com/artigos/711.php

Design gr#icoUma aproxima!o aodesigngrfico em gera", com uma descri!o dos e"ementos #ue comp$em habitua"mente um desenho e as

caracter%sticas principais #ue podemos encontrar ne"es.

Por Luciano Moreno


G $otos

;odemos definir o design grfico como o processo de programar, proetar, coordenar,selecionar e organi-ar uma srie de elementos para produ-ir obetos $isuais destinados acomunicarmensagens espec"ficas a determinados grupos.

A funo principal do design grfico ser ento transmitir uma informaodeterminadapor meio de composi!es grficas, ue chegam ao p3blico destinatrio atra$s dediferentes suportes, como folhetos, carta-es, tr"pticos, etc.

# design grfico busca transmitir as idias essenciais da mensagem de forma clara edireta, usando para isso diferentes elementos grficos ue d0em forma 6 mensagem e ofaam facilmente entend"$el pelos destinatrios do mesmo.

# design grfico no significa criar um desenho, uma imagem, uma ilustrao, umafotografia. 4 algo mais ue a soma de todos esses elementos, embora para conseguircomunicar $isualmente uma mensagem de forma efeti$a o designer de$e conhecer afundo os diferentes recursos grficos a sua disposio e ter a imaginao, a experi0ncia,o bom gosto e o sentido comum necessriospara combina2los de forma adeuada.

# resultado final de um design grfico denomina2se grafismo, e uma unidade por simesma, embora estea composto por uma infinidade de elementos diferentes. ;odemosestabelecer uma analogia entre um grafismo e um prato de co-inha. Ambos esto

compostos por diferentes elementos indi$iduais ue, unidos corretamente e comsabedoria, comp!em uma obra final 3nica e definida ue $ai mais alm da soma daspartes ue a formam.
http://www.criarweb.com/artigos/711.phphttp://www.criarweb.com/artigos/712.php#%23http://www.criarweb.com/artigos/712.php#%23http://www.criarweb.com/artigos/712.php#%23http://www.criarweb.com/artigos/712.php#%23http://www.criarweb.com/artigos/712.php#%23http://www.criarweb.com/artigos/712.php#%23http://www.criarweb.com/artigos/711.phphttp://www.criarweb.com/artigos/712.php#%23http://www.criarweb.com/artigos/712.php#%23http://www.criarweb.com/artigos/712.php#%23http://www.criarweb.com/artigos/712.php#%23


11/163

11 de 163

ormas, cores e tetos em um gra#ismo

+oda obra de comunicao $isual nasce da necessidade de transmitir uma mensagemespec"fica. Um designer grfico no um criador de formas, e sim um criador decomunica!es, um profissional ue mediante um mtodo espec"fico @design constri

mensagens @comunicao com meios $isuais @grafismos. 1o o criador damensagem, e sim seu intrprete.

# principal componente de toda composio grfica ento a mensagem a interpretar, ainformao ue se desea fa-er chegar ao destinatrio atra$s do grafismo. /stainformao de$e2se representar por meio de diferentes elementos grficos, ue podemser muitos e $ariados, embora os mais comuns seam%

/lementos grficos simples% pontos e linhas de todo tipo @li$res, retas, uebradascur$as, etc.

/lementos geomtricos, com ou sem contorno% pol"gonos, c"rculos, elipses, o$ais,

etc. +ipos% letras de diferentes formas e estrutura, utili-adas para apresentar

mensagens textuais. )rficos $rios% logotipos, icones, etc. Ilustra!es >otografias Hualuer outro elemento $isual apto para comunicar uma mensagem.


12/163

12 de 163

Um desen1o limpo

/stes elementos bsicos combinam2se uns com outros em um grafismo, e destacombinao surge um resultado final no ual t0m muita importncia uma srie deconceitos prprios do design grfico, entre os uais se destacam%

#s agrupamentos% conuntos de elementos relacionados mediante proximidade,semelhana, continuidade ou simetrias.

A #orma% forma de cada elemento grfico isolado e dos agrupamentos de

elementos. #s contornos% partes lim"trofes dos elementos, ue permitem distingui2los dos

demais e do fundo, podendo estar definidos mediante border, mudanas de cor oumudanas de saturao.

A locali8ao% lugar ue ocupa cada elemento grfico ou agrupamento deles noespao do grafismo.

# taman1o% tamanho relati$o de cada elemento grfico com respeito aos ue lherodeiam. /scalas.

A corcor de cada elemento indi$idual, cores de cada agrupamento de elementos,conunto total de cores usado em um grafismo, disposio relati$a dos elementoscom cor e harmonia entre cores.

# contraste% intensidade de $isuali-ao de cada elemento com relao aos uelhe rodeiam e ao grafismo completo.

# equilbrio% cada grafismo implica um sistema de refer0ncia espacial ueconsegue um n"$el de euil"brio maior ou menor.

A simetria% disposio espacial regular e euilibrada dos elementos ue formama composio grfica.

#s diferentes elementos de um grafismo so percebidos pelo destinatrio de acordo coma influ0ncia ue exercem cada um destes conceitos a n"$el indi$idual, grupal e total.;orm, a unio de todos eles, a obra grfica, uma entidade comunicati$a indi$idual ecompleta, carregada de complexos elementos humanos associados com a linguagem, aexperi0ncia, a idade, a aprendi-agem, a educao e a memria.

http://www.criarweb.com/artigos/712.phphttp://www.criarweb.com/artigos/712.php


13/163

13 de 163

Design gr#ico na web& designweb 'ai mais a"m do design tradiciona", pois existem muitos"imitadores re"acionados com o meio onde se apresentam as pginas(Internet. )onheceremos as caracter%sticas fundamentais do design na web.

Por Luciano Moreno


G $otos

# design grfico de uma pgina web somente uma parte do design da mesma, ue,ademais, h ue considerar um conunto mais ou menos extenso de condicionantes ue$o limitar a li$re criati$idade do designer.

/m primeiro lugar, as pginas web t0m ue ser baixadas de um ser$idor web remotoatra$s da Internet, pelo ual a largura de banda das conex!es dos usurios $em a ser

um fator cha$e na $elocidade de $isuali-ao. A maioria dos usurios se conecta aindana Internet com um modem, com $elocidades tericas de


14/163

14 de 163

Design de um #ormulrio web

/m segundo lugar, os na$egadores existentes no mercado t0m uma forma particular deapresentar o conte3do das pginas. Internet /xplorer interpreta em muitas ocasi!es umapgina web de forma muito diferente a 1etscape 1a$igator Mx, e este por sua $e- o fa-de forma diferente a 1etscape 1a$igator x.

;ara tentar sol$er estas diferenas, o webdesigner de$e trabalhar com $riosna$egadores ao mesmo tempo, desenhando suas pginas de tal forma ue ainterpretao delas sea parecida em todos, o ue imp!e no$as limita!es ao desenho.

;or outro lado, uma pgina web no um design grfico esttico, e sim ue contmdiferentes elementos ue t0m a capacidade de interagir com o usurio, como menus dena$egao, linNs, formulrios, etc. Alm disso, uma pgina isolada no existe, porue fa-parte de um conunto de pginas inter2relacionadas entre s" @o website, ue de$emapresentar2se ao usurio com o mesmo =estilo=, embora sua funcionalidade sea muitodiferente.

A isto h ue somar ue as pginas desenhadas de$em logo ser constru"das em umalinguagem espec"fica, o D+?C, ue por si mesmo muito limitado, o ue fa- com ue owebdesigner tenha ue estar sempre pensando se a interface ue est desenhandograficamente $ai poder ser logo constru"da.

;or 3ltimo, uma pgina web costuma ocultar, na maioria dos casos, uma srie deprocessos complexos ue se executam sem ue o usurio sea consciente deles@execuo de cdigos de linguagens de programao tanto em cliente como em ser$idor,acesso ao banco de dados em ser$idores remotos, etc., processos ue adicionam tempo6 apresentao das pginas e ue muitas $e-es costumam afetar de forma importante odesenho destas, ue designer no sabe de antemo ue conte3dos concretos $o ter.

(esumindo% o webdesign $ai mais alm do design grfico, ao influir nele uma infinidadede fatores ue limitam as possibilidades do desenho, porm tambm outros ue


15/163

15 de 163

acrescentam interati$idade e funcionalidades a uma pgina web ue um carta-, folhetoou re$ista no t0m.


Componentes gr#icos de um computador*escri!o dos principais componentes grficos de um computador( & cart!ogrfico e o monitor.

Por Luciano Moreno

;ublicado em% %?$?/*

G $otos

#s principais componentes de um computador encarregados de interpretar e apresentaras cores so o carto grfico e o monitor.

# carto gr#icoou de $"deo o componente hardware encarregado de processar osdados grficos ue en$ia o processador, interpreta2los e codifica2los em $oltagensadeuadas ue so en$iados logo ao monitor para sua apresentao em tela.

Carto gr#ico

/xistem diferentes modelos de carto grfico, ue $o desde os mais simples, inclu"dosna placa base, at os mais a$anados, $erdadeiros mini2computadores, com seu prprioprocessador, memria, bus, etc.

#s monitores so os dispositi$os encarregados de apresentar ao usurio as interfaces das

aplica!es ue se executam no computador. +odos sabemos como um monitor porfora, ue estamos acostumados aos monitores das tele$is!es, algo to comum emnossas casas. Interiormente, os monitores $ariam uns dos outros em funo de suaualidade, da forma de manear de $oltagens e da tecnologia grfica empregada.

9onitor C(6
http://www.criarweb.com/artigos/713.phphttp://www.criarweb.com/artigos/725.php#%23http://www.criarweb.com/artigos/725.php#%23http://www.criarweb.com/artigos/725.php#%23http://www.criarweb.com/artigos/725.php#%23http://www.criarweb.com/artigos/713.phphttp://www.criarweb.com/artigos/725.php#%23http://www.criarweb.com/artigos/725.php#%23http://www.criarweb.com/artigos/725.php#%23http://www.criarweb.com/artigos/725.php#%23


16/163

16 de 163

#s monitoresmais comuns so os &(+ ou de raios catdicos, formados por um tubocuo interior foi feito $a-io, em um dos extremos se situam tr0s canh!es de eltrons, umpor cada cor primria, e no outro em uma tela de $idro, cua parte externa a ue $0 ousurio.

6ubo de raios cat=dicos de um monitor C(6

#s eltrons gerados nos canh!es por auecimento so impulsionados at a parte internada tela, ue se encontra recoberta por peuenos grupos de fsforo pigmentado em cadauma das tr0s cores primrias @$ermelho, $erde e a-ul. /stes grupos recebem o nome detr"adas, e se correspondem com um ponto da tela, denominado p"xel, ue aparecer deuma cor ou de outra segundo a intensidade dos eltrons ue chegarem em cada canho.

Uma caracter"stica importante o passo de ponto @dot pitch, distncia diagonal entredois pontos $i-inhos da mesmo cor, ue determina o m"nimo tamanho de um detalhe ue capa- de resol$er uma tela. Huanto menor for esta distncia, maior ser a nitide-.?ede2se em pontos por polegada @ppp.

A resoluo mxima distingu"$el em uma tela de OLLxLL de PQ ppp e em uma deKLQMxPO de RG ppp. /stes so $alores tericos e na prtica so algo maiores.

:asso de ponto e pel


17/163

17 de 163

8egundo a resoluo empregada, os p"xels @unidade m"nima de informao sorepresentados em tela por uma ou mais tr"adas, com o ue a adaptao 6s diferentesresolu!es muito boa.

&om obeti$o de ue os eltrons cheguem de forma ordenada e causem impacto

ustamente no ponto adeuado, entre a tela e os canh!es, situa2se uma mscara ou redeue filtra os eltrons e os dirige a seus pontos destino de forma adeuada.

A representao de uma imagem em tela se reali-a mediante $arreduras dos raios deeltrons, ue percorrem toda a tela de esuerda 6 direita e de cima para baixo. A$elocidade com a ue se reali-a esta operao denomina2se freS0ncia de refresh$ertical ou refresh de tela, e mede2se em D- @hert-s e de$e estar por cima de L D-,preferi$elmente PL ou OL. A partir desta cifra, a imagem na tela sumamente est$el,sem piscadas apreci$eis, com o ual a $ista sofre muito menos.

A freS0ncia de refresh $ertical de nosso monitor pode ser a$eriguada acessando 6 telade configurao do monitor, a ual se acessa em sistemas Tindows mediante assele!es%

Iniciar ;ainel de control +ela &onfigurao #p!es a$anadas ?onitor

+ambm podemos mudar nesta tela a freS0ncia de refresh, porm antes de fa-e2lo aconselh$el consultar o manual do monitor, ue uma freS0ncia incorreta pode serbastante preudicial.

9onitor ECD

#utro tipo de monitore o C&' ou de cristal l"uido, ue se diferencia dos anteriores

porue nele as tr"adas esto formadas por cristal l"uido ao in$s de fsforo pigmentado,e os eltrons so guiados por polari-ao magntica. Ademais, os monitores C&'trabalham com uma trama de p"xels concreta, sendo fixo o tamanho de cada um,portanto ao mudar uma resoluo inferior podem ficar franas de p"xels desati$adas.

8ea ual for o tipo de carto grfico e monitor usado, fundamental ter instalados eatuali-ados os dri$ers prprios destes componentes.

Um driver um conunto de bibliotecas de software espec"ficas encarregadas deconfigurar e controlar os dispositi$os de hardware. &ada componente necessita parafuncionar bem os dri$ers adeuados, ue geralmente $0m unto com este em um

disuete ou em um &'.

&om o a$ano das funcionalidades dos sistemas operacionais e dos demais componentesde software e hardware das muinas informticas, torna2se necessrio uma atuali-aoconstante dos dri$ers dos monitores e cart!es de $"deo.


18/163

18 de 163

/stas $ers!es atuali-adas costumam ser oferecidas pelos diferentes fabricantes em seusweb sites, por isso muito importante $isitar estes a cada certo tempo para baixar as$ers!es atuali-adas dos dri$ers e instala2los em nossa muina, com o obeti$o de noperder capacidades e de e$itar incompatibilidades com os no$os sistemas operacionais.

8e ti$ermos instalado um carto grfico em nosso computador, geralmente os dri$ersdesta @controlador so os respons$eis de manear de forma adeuada o monitor. ;araacessar 6s propriedades do controlador, basta seguir a rota%

Iniciar ;ainel de controle +ela &onfigurao #p!es a$anadas ?onitor ;ropriedades &ontrolador

Atra$s desta anela podemos $er o tipo de controlador instalado e se est funcionandobem ou se tem algum problema. +ambm atuali-a2lo, para o ue for necessrio terpre$iamente nos no$os dri$ers, ue teremos ue indicar sua locali-ao em nossosdiscos r"gidos.

Uma considerao importante% h ue estar certo de ue o dri$er ue iremos instalar secorresponde com o de nosso carto grfico ou monitor, ue um dri$er inadeuadopode originar um mal funcionamento dos componentes grficos.


(esoluo de tela

)onsidera$es re"ati'as aos distintos tipos de te"a#ue os 'isitantes possamter e o espao dispon%'e" para cada caso.

Por Luciano Moreno

;ublicado em% /?%?/*

7alori-e este artigo%

M $otos

As aplica!es encarregadas de apresentar as pginas webso os na$egadores@browsers, entre os uais, cabe destacar por sua importncia e difuso, Internet

/xplorer, 1etscape 1a$igator, #pera e ?o-illa >irefox.

A interface de um na$egador, em seu modo padro, apresenta ao usuriouma ou maisbarras superiores @de menus, de endereos, etc., uma barra inferior @a barra de estadoe um espao principal, a anela, na ual so apresentadas as pginas web.

A forma desta anela sempre retangular, porm seu tamanho $aria, dependendo domonitor e do carto grfico. ;odemos falar de dois tamanhos de tela diferentes%

6aman1o absoluto% o tamanho =real= da anela do monitor, medidogeralmente em polegadas. 'epende do monitor.

(esoluo ou taman1o relativo% $em determinado pelo n3mero de pixels uese mostram na anela do monitor, sendo o p"xel a unidade m"nima de informaoue pode se apresentar em tela, de forma geralmente retangular. 'epende docarto grfico.
http://www.criarweb.com/artigos/725.phphttp://www.criarweb.com/artigos/739.php#%23http://www.criarweb.com/artigos/739.php#%23http://www.criarweb.com/artigos/739.php#%23http://www.criarweb.com/artigos/739.php#%23http://www.criarweb.com/artigos/725.phphttp://www.criarweb.com/artigos/739.php#%23http://www.criarweb.com/artigos/739.php#%23http://www.criarweb.com/artigos/739.php#%23http://www.criarweb.com/artigos/739.php#%23


19/163

19 de 163

# tamanho absoluto costuma se expressar em polegadas de diagonal @K polegada V Q


20/163

20 de 163

larguras definidas em X, com o ual se consegue ue ao ser $isuali-adas em monitoresde mais resoluo se =abram=, ocupando todo o espao de tela dispon"$el.

#s problemas ue t0m este sistema so ue no d suporte aos usurios ue utili-amresolu!es menores e ue, no caso de resolu!es maiores, o design da pgina poder ser

$isto seriamente afetado ao modificar seus elementos das dimens!es originais.

#utra possibilidade proetar toda a pgina dentro de um container2pai @uma tabela oucamada e atribuir a este um alinhamento centrali-ado, com o ual a pgina ficaria nocentro da tela se se usa uma resoluo maior ue a do desenho.


Cores em um computador)omo traba"ham os computadorespara codificar uma cor. & formato +-.

Por Luciano Moreno

;ublicado em% $/?%?/*


G $otos

# olho humano pode distinguir aproximadamente entre P e KL milh!es de cores. 'e$idoa isto a $ista para ns o principal sentido ue nos une com o exterior, de tal forma uesobre OLX da informaoue recebemos do mundo exterior $isual.

;intores e designers grficos utili-am esta capacidade humana de apreciar cores paracriar obras ue aprofundem na alma e ue inspirem sentimentos nos seres ue ascontemplam. ;orm, o ue podemos fa-er uando de$emos nos expressar com umn3merolimitado de coresY

#s computadores trabalham com tr0s cores bsicas, a partir das uais constroem todasas demais, mediante um processo de mistura por unidades de ecr, denominadas pixels./stas cores so o $ermelho, o a-ul e o $erde, e o sistema definido conhecido comosistema ()* @(ed, )reen, *lue.

&ada pixel tem reser$ada uma posio na memria do computador para arma-enar ainformao sobre a cor ue de$e apresentar. #s bits de profundidade de cor marcamuantos bits de informao dispomos para arma-enar o n3mero da cor associadasegundo a paleta usada. &om esta informao, o carto grfico do computador gera unssinais de $oltagem adeuados para representar a correspondente cor no monitor.

Huanto mais bits por pixel, maior n3mero de $aria!es de uma cor primria podemoster. ;ara Q


21/163

21 de 163

Huanto maior for o n3mero de cores, maior ser a uantidade de memria necessriapara arma-en2los e maiores os recursos necessrios para processa2los. ;or este moti$o,os computadores antigos disp!em de paletas de poucas cores, normalmente Q


22/163

22 de 163

Cores secundrias

8e usamos uma profundidade de cor de QM bits, correspondente a milh!es de cores,dispomos de uma ampla gama para trabalhar, porm sempre tendo em conta ue s

sero compat"$eis as cores ue ti$erem sua eui$alente no sistema de Q>.

Huando usamos uma profundidade de cor de K bits dispomos de milhares de cores,porm o problema ue de$ido 6 di$iso desta gama de cores, os $alores obtidos no secorrespondem com os eui$alentes em Q


23/163


24/163

24 de 163

Calibrador de monitor

;orm sem d3$ida a melhor forma de calibrar um monitor utili-ar o hardware espec"ficopara isso. # funcionamento $aria segundo o dispositi$o usado. Alguns se conectamdiretamente ao monitor para coleta de dados binrios, permitindo um auste indi$idualdireto de cada um dos canh!es. #utros se baseiam em situar frente 6 tela do monitordiferentes medidores @calor"metros, color"metros, etc. para colher dados, fornecendouma leitura dos $alores atuais e proporcionando os $alores id5neos de configurao.

8ea ual for o mtodo escolhido, para uma correta configurao do monitor de$eremosaustar uma srie de parmetros, entre os uais se incluem os seguintes%

Fril1o

+ambm chamado, luminosidade, define a relao no linear entre a tenso de entrada ea luminancia de sa"da, intr"nseco da f"sica do ambiente dos canh!es de eltrons e nodepende da iluminao ambiente.

'e outra forma, o brilho a intensidade de lu- emitida sobre uma rea espec"fica, pela

ual as mudanas de brilho podem escurecer ou clarear todo o conte3do da tela.

#s monitores tradicionais @&(+ geram aproximadamente de OL a KLL cd\m ] @candelapor metro uadrado. 1o caso de monitores C&', no se admitem $alores inferiores aK


25/163

25 de 163

Contraste

# contraste a relao existente entre a intensidade luminosa do ponto mais claro e omais escuro de uma imagem. Huanto maior for o $alor de contraste, melhor ser alegibilidade.

8e ti$ermos uma fotografia com um ponto branco e outro negro e estes mesmosesti$erem em um monitor, geralmente o contraste no monitor @KPL%K superior ao uese d em uma fotografia @KLL%K, mas se o ambiente esti$er muito iluminado, o pontonegro deixa de ser negro e a relao de contraste pode baixar bastante @hasta


26/163

26 de 163

ormas bsicas em design gr#icoA "inguagem 'isua" atra's de grafismos pode se descompor em entidadesbsicas, onde cada uma de"as tem por si mesma um significado prprio,porm unidas de diferentes formas podem constituir e"ementoscomunicati'os distintos.

Por Luciano Moreno

;ublicado em% /?'?/*


Q $otos

/stamos acostumados a nos comunicarcom nossos semelhantes mediante a linguagemfalada, $erbal, formada por uma srie de elementos bsicos @letras, pala$ras, frases,etc. ue, combinados, formam entidades comunicati$as complexas.

'e igual forma, a linguagem $isual atra$s de grafismos pode se descompor ementidades bsicas, onde cada uma delas tem por si mesma um significado prprio, pormunidas de diferentes formas podem constituir elementos comunicati$os distintos.

/stas entidades grficas constituem a substncia bsica do ue $emos. ;ortanto, somuito importantese todo designer de$e conhece2las e manea2las perfeitamente.

As formas bsicas do designgrfico so poucas% o ponto, a linha e o contorno. ;orm, a matria2prima de toda informao $isual ue contribui para uma composio.

&ada uma delas possui um conunto de caracter"sticas prprias ue as modificam econdicionam, entre as uais destacam2se%

orma% definida por disposio geomtrica. A forma de uma -ona ou contorno $ai nospermitir reconhece2las como representa!es de obetos reais ou imaginrios.

Direo% proeo plana ou espacial de uma forma, continuao imaginria da mesmamesmo depois de sua finali-ao f"sica. ;ode ser hori-ontal, $ertical ou inclinada emdiferentes graus.
http://www.criarweb.com/artigos/783.php#%23http://www.criarweb.com/artigos/783.php#%23http://www.criarweb.com/artigos/783.php#%23http://www.criarweb.com/artigos/783.php#%23http://www.criarweb.com/artigos/783.php#%23http://www.criarweb.com/artigos/783.php#%23


27/163

27 de 163

Cor% tal$e- a mais importantee e$idente, pode imprimir um forte carter e dinamismoaos elementos aos ue se aplica. +oda forma ou -ona ter em geral duas coresdiferentes, o de seu contorno e o de sua parte interna, podendo se aplicar tanto corespuras como degrades de cores.

6etura% modificao ou $ariao da superf"cie dos materiais, ser$e para expressar$isualmente as sensa!es obtidas mediante o sentido do tato ou para representar ummaterial dado. A textura est relacionada com a composio de uma substncia atra$sde $aria!es diminutas na superf"cie do material, e se consegue em uma composiogrfica mediante a repetio de lu-es e sombras ou de moti$os iguais ou similares.

;scala% tamanho relati$o de uma -ona com respeito 6s demais e ao total da obra. #sdiferentes tamanhos das diferentes -onas modificam e definem as propriedades de cadauma delas.
http://www.criarweb.com/artigos/783.php#%23http://www.criarweb.com/artigos/783.php#%23


28/163

28 de 163

Dimenso% capacidade tridimensional de um elemento ou -ona. A dimenso s existe noespao real tridimensional, porm se pode simular em uma composio grfica planamediante tcnicas de perspecti$a, sombreado ou sobreposio. +ambm, mediante o usode fotografias, ue introdu-em espaos tridimensionais na composio.

9ovimento% propriedade muito importante, ue aporta conota!es de dinamismo e

fora. 1as obras grficas puras no existe mo$imento real, porm sim, encontra2seimpl"cito em certos elementos e se pode conseguir com certas tcnicas ue enganam aoolho humano @design cintico, pintura cintica ou representando elementos uerealmente existem no mundo real.

;odemos introdu-ir nas pginas web anima!es grficas ue aportam sensa!es demo$imento muito maiores, como anima!es >lash, gifs animados, camadas dinmicas,elementos de $"deo, etc.


ponto& ponto a unidade m%nima de informa!o'isua", e est caracteri0ado porsua forma, tamanho, cor e "oca"i0a!o.

Por Luciano Moreno

;ublicado em% *?'?/*


Q $otos

# ponto a unidade m"nima de informao $isual, e est caracteri-ado por sua forma

@geralmente circular, porm tambm pode ser retangular, como ocorre nos monitores,triangular ou uma mancha sem forma definida, por seu tamanho, por sua cor e pelalocali-ao ue tenha dentro da composio grfica.
http://www.criarweb.com/artigos/783.phphttp://www.criarweb.com/artigos/797.php#%23http://www.criarweb.com/artigos/797.php#%23http://www.criarweb.com/artigos/783.phphttp://www.criarweb.com/artigos/797.php#%23http://www.criarweb.com/artigos/797.php#%23


29/163

29 de 163

As principais caracter"sticas do ponto so%

+em um grande poder de atrao $isual, criando tenso sem direo. Huando se situam prximos dois pontos podem produ-ir sensa!es de tenso ou

de direo, criando na mente do espectador uma linha reta imaginria ue osune.

8e se situam diferentes pontos em prolongamento sugerem uma direo, umcaminho, mais acentuado uanto mais prximos esteam os pontos entre si.

Huando se agrupam $rios pontos podem definir formas, contornos, tons ou cores@pensemos na pintura impressionista.

#s pontos isolados so pouco usado no webdesign. /ntretanto, as sucess!es de pontosprximos so um bom elemento para dirigir a ateno do $isitante, para guiar sua olhadaa uma -ona concreta, para estabelecer rela!es entre elementos ou para separar -onasda pgina.


0 lin1aA "inha o e"emento bsico de todo grafismo e um dos mais usados.+epresenta a forma de express!o mais simp"es e pura, porm tambm amais din1mica e 'ariada.

Por Luciano Moreno

;ublicado em% $/?)?/*


G $otosA linha o elemento bsico de todo grafismo e um dos mais usados, tendo tantaimportncia em um grafismo como a letra em um texto. (epresenta a forma deexpresso mais simples e pura, porm tambm a mais dinmica e $ariada.
http://www.criarweb.com/artigos/797.php#%23http://www.criarweb.com/artigos/797.phphttp://www.criarweb.com/artigos/797.php#%23http://www.criarweb.com/artigos/797.php


30/163

30 de 163

4 formada pela unio de $rios pontos em sucesso, podendo se parecer 6 traetriaseguida de um ponto em mo$imento, por ter muita energia e dinamismo. 8ua presenacria tenso e afeta ao resto de elementos prximos a ela.

As principais propriedade da linha so%

&ontm grande expressi$idade grfica e muita energia. Huase sempre expressa dinamismo, mo$imento e direo. &ria tenso no espao grfico em ue se encontra. &ria separao de espaos no grafismo. A repetio de linhas prximas gera planos e texturas.

/m uma composio define direcionamento, ue estar mais acentuado uanto maislinhas paralelas hou$er. /sta ualidadepode ser usada para dirigir a ateno em umadireo concreta, fa-endo com ue o espectador obser$e o lugar adeuado.

Uma linha di$ide ou circunda uma rea, encontra2se na borda de uma forma. /xpressa

separao de planos, permitindo ao designerusa2la como elemento delimitador de n"$eise reas na composio.

As propriedades de uma linha $iro definidas pela sua grossura, sua longitude, suaorientao @direo com respeito 6 pgina, sua locali-ao @posio, sua forma @reta oucur$a e sua cor. /stas propriedades se $ero afetadas tambm pelo n3mero de linhasue hou$er na composio, sua proximidade e a orientao relati$a entre elas.

A linha considerada como tal enuanto a relao largura\comprimento no superaruma proporo determinada. Uma linha mais larga ue a metade de seu comprimentoperde a expresso dinmica do trao e aduire a esttica de uma superf"cie uadrada.

A unio sucessi$a de linhas forma um trao. # traos do $olume aos obetos uedesenhamos e permitem representar simbolicamente obetos na composio, eliminandodeles toda informaosuprflua e deixando s o essencial.
http://www.criarweb.com/artigos/814.php#%23http://www.criarweb.com/artigos/814.php#%23http://www.criarweb.com/artigos/814.php#%23http://www.criarweb.com/artigos/814.php#%23http://www.criarweb.com/artigos/814.php#%23http://www.criarweb.com/artigos/814.php#%23http://www.criarweb.com/artigos/814.php#%23http://www.criarweb.com/artigos/814.php#%23


31/163

31 de 163

A linha pode ter as bordas lisas ou denteadas, com extremidades retas, arredondadas ouem ponta. 8eu corpo pode ser slido ou com textura, e sua direo pode ser cur$a oureta. / cada uma destas caracter"sticas di$ersificar a forma em ue interpretada umalinha pelo espectador.

;odemos considerar diferentes tipos de linhas, cada um dos uais tem suas prprias

ualidades%

Ein1a reta

'efine o caminho mais curto entre dois pontos. 4 pouco freSente na nature-a, ondepredominam as linhas cur$as @o uni$erso em sua totalidade cur$o, porm muitoabundante no ambiente humano, ue necessita delas para dar estabilidade a suascria!es.

A linha reta hori-ontal expressa euil"brio, calma, euil"brio est$el. 1o existeestabilidade sem uma reta hori-ontal de refer0ncia, uma linha de hori-onte, ue nosmo$emos em um plano hori-ontal.

As linhas retas hori-ontais so muito usadas nas pginas web, tanto ue a linguagemD+?C proporciona uma etiueta espec"fica para introdu-i2las, D(. Utili-am2seprincipalmente como elemento delimitador de blocos de conte3do em pginas de poucoconte3do grfico, sendo con$eniente no apresenta2las com efeito tridimensional, e simcomo uma simples linha plana @atributo noshade.

A linha reta $ertical sugere ele$ao, mo$imento ascendente, ati$idade. +ambmexpressa euil"brio, porm inst$el, como se esti$esse a ponto de cair. Isto pode secorrigir trabalhando as linhas $erticais com outras hori-ontais de apoio, ue lhes daro aestabilidade de ue carecem.


32/163

32 de 163

/m uma pgina web, as linhas retas $erticais podem ser usadas para separar colunastextuais ou blocos de conte3dos, assim como as linhas frontais, com uma cor uedestaue o suficiente sobre o fundo, ou como linhas de fundo, da mesma cor ue este,separando -onas de uma cor diferente.

A linha reta inclinada, pelo contrrio, expressa tenso, instabilidade, deseuil"brio.;arecem ue esto a ponto de cair. 'entro das linhas inclinadas, a ue forma M


33/163

33 de 163

Uma cur$a *-ier fica totalmente definida por uatro pontos caracter"sticos, os pontosinicial e final da cur$a e dois pontos de controle @maneadores ue definem sua forma.;ara modificar sua forma, basta mudar de posio um de seus pontos de controle.

8o cur$as de maneo pouco complexo e muito elegantes, com um desen$ol$imentomuito sua$e, capa-es de se adaptar a uase ualuer forma imagin$el, portanto somuito usadas para desenhar logotipos e "cones e para copiar ualuer figura.

+ambm so enormemente $ersteis, podendo adotar desde cur$aturas muito sua$es@uase linhas retas a cur$aturas muito fortes @cur$as complexas, passando por todosos $alores intermedirios. ;odem, inclusi$e, mudar de c5nca$as a con$exas ao redor deum ponto.

1o desenho web, o uso de linhas cur$as isoladas est muito limitado. 4 mais comumencontra2las como partes integrantes de formas mais complexas, sendo 3teis, porexemplo, para sua$i-ar a dure-a de uma forma retangular em um ou mais de seus lados@como os bot!es.

Um fator a ter em conta sempre ue se trabalhe com linhas cur$as em uma pgina web o efeito de escalado produ-ido ao no ser capa- o sistema grfico dos computadores derepresentar com exatido formas cur$as por meio de p"xels. 4 o t"pico efeito de =dentesde serra= ue aparece em todos os obetos com partes cur$as, efeito ue aumenta com otamanho do obeto.


34/163

34 de 163

Uma soluo a este problema $isual incluir as linhas cur$as como imagens em formatoweb @)I>, B;), ;1), etc. e aplicar2lhes o processo de rastreado, dispon"$el em uasetodas as aplica!es grficas, por meio do ual se criam um ou mais p"xels entre asbordas da linha e o fundo, de uma cor intermediria entre elas.

6rao

Um trao o elemento linear formado pela unio sucessi$a de diferentes linhas. 4 tal$e-a forma grfica mais humana, a ue melhor representa nossa forma natural de desenhar.

Um trao herdar as propriedades das linhas ue o criam, existindo traos retos, cur$osou mistos.


contorno& contorno o ob/eto grfico criado #uando o trao de uma "inha se une emum mesmo ponto.

Por Luciano Moreno

;ublicado em% %?*?/*


Q $otos

;odemos definir o contorno como o obeto grfico criado uando o trao de uma linha seune em um mesmo ponto. #u sea, uando uma linha continua, comea e acaba em ummesmo ponto.
http://www.criarweb.com/artigos/814.phphttp://www.criarweb.com/artigos/814.php


35/163

35 de 163

+odo contorno delimita duas -onas, uma demarcada @o contorno e seu interior e outrainfinita @o fundo, criando2se um sub2mundo grfico particular em cada forma definidapor cada contorno.

A linha base de um contorno define a complexidade dessa e suas propriedades. Huandouma linha se fecha sobre ela mesma, o contorno criado determina um espao interno,

criando2se uma tenso entre este espao e seus limites, outorgando 6 linha criadora umgrande poder de atrao $isual.

As ualidadesgrficas de um contorno estaro definidas pelas linhas ue o criam e aspropriedades destas.

#s principais contornos so o uadrado, a circunfer0ncia e o tringulo, aos ue podemosacrescentar os contornos mistos e os orgnicos.

http://www.criarweb.com/artigos/contorno.html

quadrado2"ementos de desenho( o #uadrado.

Por Luciano Moreno

;ublicado em% $)?*?/*


Q $otos

# uadrado a figura geomtrica formada por uatro linhas retas de mesma longitude,denominados lados, ue formam ngulos perfeitamente retos nos pontos de unio entreelas @esuinas a RL_.
http://www.criarweb.com/artigos/contorno.html#%23http://www.criarweb.com/artigos/contorno.htmlhttp://www.criarweb.com/artigos/quadrado.html#%23http://www.criarweb.com/artigos/contorno.html#%23http://www.criarweb.com/artigos/contorno.htmlhttp://www.criarweb.com/artigos/quadrado.html#%23


36/163

36 de 163

# uadrado uma figura muito est$el e de carter permanente, associada a conceitoscomo estabilidade, perman0ncia, honestidade, retido, limpe-a, esmero e euil"brio.

A figura deri$ada do uadrado por modificao de seus lados o retngulo, depropriedades anlogas ao uadrado, apesar de sugerir menos perfeio e estabilidade.

# uadrado expressa direcionamento hori-ontal e $ertical, refer0ncia primria comrespeito ao euil"brio e o bem2estar. 4 menos proponente e mais neutro ue osretngulos, porm mais slido. &on$ida a olhar seu centro e passear a olhada em espiralem $olta desse ponto.

#s retngulos hori-ontais aportam solide-, estabilidade, do a sensao de ser dif"ceis dein$erter. Huando so de tamanho grande permitem ue o olhar do espectador passeie deum lado ao outro, em sentido hori-ontal.

#s retngulos $erticais, pelo contrrio, d a sensao de menos solide-, menos est$el,


37/163

37 de 163

parece ue pode se in$erter a ualuer momento. 1eles, o olhar do espectador no podepassear de um lado ao outro, porm, pode mo$er2se $erticalmente, dando sensao deele$ao, e apto para representar aueles obetos ue na $erdade t0m uma formaascendente.

#s uadrados e retngulos tero suas ualidades$isuais modificadas segundo sua forma,

tamanho, cor do contorno e rea interna, locali-ao, escala, etc.A proeo tridimensional do uadrado o hexaedro ou o cubo, corpo geomtrico muitoassociado 6s obras prprias do ser humano, como os edif"cios.#s retngulos so as formas mais naturais para um computador, ue o monitor e as

anelas dos sistemas operacionais grficos so todos retngulos hori-ontais. Uma pginawebpossui uma forma claramente retangular, definida pela anela do na$egador.Ademais, os elementos web @tabelas, camadas, anima!es >lash, applets de Ba$a, etc.so de forma retangular.

Isto fa- com ue os retngulos seam especialmente adeuados para seu uso naspginas web, proporcionando euil"brio e estabilidade 6s mesmas.

/ntretanto, con$eniente seguir uma srie de pautas na hora de usar retngulos, a fimde e$itar a monotonia e o aspecto artificial de uma pgina uadriculada demais%
http://www.criarweb.com/artigos/quadrado.html#%23http://www.criarweb.com/artigos/quadrado.html#%23http://www.criarweb.com/artigos/quadrado.html#%23http://www.criarweb.com/artigos/quadrado.html#%23


38/163

38 de 163

&ada retngulo de$e estar alinhado com os demais obetos da pgina ue lherodeiam.

# tamanho do retngulo de$e ser maior ue o conte3do do mesmo, o suficientecomo para ue este se apresente li$re, com espaamentos con$enientes pelosuatro lados.

1o usar nas tabelas bordas padroni-adas, ou sea, cin-as e com efeitos derele$o. 8e forem usadas para separar logicamente registros, melhorlhes atribuiruma borda fina @sobre K p"xel de uma cor ue contraste suficientemente com aborda, porm ue no sea chamati$a demais. 'e ualuer forma, prefer"$elutili-ar outros mtodos para obter a separao, como filas de duas coresalternati$as @piamas.

8e desear situar na pgina $rios retngulos de funcionalidade anloga @caso deelementos de um menu de na$egao, por exemplo, prefer"$el posiciona2losem sries hori-ontais, ue se percebero mais como uma linha do ue comoum conunto retangular.

A dure-a $isual dos retngulos pode2se sua$i-ar adicionando2lhes outros elementos ueos modifiuem em parte. Um exemplo disso, so as tabelas ou bot!es com esuinasarredondadas, ue rompem a monotonia da forma retangular.

#utra forma de compensar a rigide- das formas retangulares combina2las nacomposio com formas cur$as ue aportem liberdade e dinamismo.

http://www.criarweb.com/artigos/!adrado.html

0 circun#er2ncia

2"ementos de design( a circunfer3ncia.

Por Luciano Moreno

;ublicado em% /-?+?/*


Q $otos

A circunfer0ncia um contorno continuamente cur$ado, cuos pontos esto todos namesma distncia de um ponto central, chamado centro do c"rculo. A distncia constantede ualuer ponto da circunfer0ncia se denomina radio.
http://www.criarweb.com/artigos/quadrado.html#%23http://www.criarweb.com/artigos/quadrado.htmlhttp://www.criarweb.com/artigos/circunferencia.html#%23http://www.criarweb.com/artigos/quadrado.html#%23http://www.criarweb.com/artigos/quadrado.htmlhttp://www.criarweb.com/artigos/circunferencia.html#%23


39/163

39 de 163

A circunfer0ncia representa a rea ue contm e seu interior, denominada c"rculo, aforma mais enigmtica de todas, considerada perfeita por nossos antepassados. 8uadirecionalidade a cur$a, associada ao mo$imento, ao enuadramento, 6 repetio e aocalor.

A forma circular produ- um mo$imento de rotao e$idente, possui um grande $alorsimblico, especialmente seu centro, e tem conota!es psicolgicas como proteo,inestabilidade, totalidade, mo$imento cont"nuo ou infinito. 4 t"pico representar tambmos espaos fechados, hermticos, com circunfer0ncias ou c"rculos.

&ontornos deri$ados da circunfer0ncia so o o$al e o$alado, com ualidadesparecidas,mas ue expressam ainda mais instabilidade e dinamismo, embora o mo$imento perfeitosea uma ualidade prpria da circunfer0ncia.

A proeo tridimensional da circunfer0ncia a esfera, o corpo geomtrico mais perfeito,o ue contm um maior $olume em um menor espao, o ue define a forma tanto dostomos como dos corpos celestes.

A circunfer0ncia e o c"rculo so tal$e- os elementos geomtricos mais perfeitos eest$eis, embora carregados de uma grande carga dinmica.

As formas circulares so muito dif"cies de representar em uma pgina web, ue todosos elementos ue nos facilita a linguagem D+?C so retangulares, embora aparentemno ser. Ademais, as formas cur$as se $isuali-am muito mal nos monitores, de$ido 6interpretao grfica mediante pixels, ue origina efeitos de escalamento indese$eis.

#utro incon$eniente de usar c"rculos no desenho web deri$a precisamente de ser a formaue contm mais rea no menor per"metro, ue a maioria das $e-es interessa aodesignerexatamente o contrrio, redu-ir ao m"nimo a rea e maximi-ar ao mximo o

per"metro.
http://www.criarweb.com/artigos/circunferencia.html#%23http://www.criarweb.com/artigos/circunferencia.html#%23http://www.criarweb.com/artigos/circunferencia.html#%23http://www.criarweb.com/artigos/circunferencia.html#%23http://www.criarweb.com/artigos/circunferencia.html#%23http://www.criarweb.com/artigos/circunferencia.html#%23


40/163


41/163

41 de 163

;ublicado em% $/?+?/*


Q $otos

?ediante combina!es dos elementos bsicos e contornos anteriores, pode2se construir

todas as formas imagin$eis, cada uma das uais ter umas propriedades dependentesdas partes ue a formam, de sua orientao, de seu tamanho, de espessura do traolimite, de sua cor e de sua locali-ao.

D ue ter em conta, em ualuer caso, ue o predom"nio da refer0ncia hori-ontal2$ertical d uma sensao de euil"brio, enuanto ue o dom"nio da direo diagonalaporta instabilidade.

#s contornos mistos so muito usados nas pginas web, as ue aportam $ariedade nodesign e definio de espaos de informao, rompendo a monotonia $isual das formasretangulares puras.

# 3nico incon$eniente ue as linhas cur$as se de$em implementar mediante imagens,geralmente em formato )I>, ue se podem incluir como se!es cur$as nas clulasextremas de uma tabela ou como imagens completas em uma camada, sobre a ue sesitua outra camada com o texto.

+ambm poss"$el inclui2las como arui$os 8T> @?acromedia >lash, ue aportamgrande definio 6s -onas cur$as, sem produ-ir efeitos de escala, al ser tratadas comogrficos $etoriais. # incon$eniente ento a atuali-ao dos conte3dos textuais, uepara isso fa- falta acessar o arui$o >CA fonte do grfico.

http://www.criarweb.com/artigos/contornos#mistos.html

Contornos org3nicos2"ementos de design( contornos org1nicos, #ue est!o formados por cur'as"i'res.
http://www.criarweb.com/artigos/contornos-mistos.html#%23http://www.criarweb.com/artigos/contornos-mistos.html#%23http://www.criarweb.com/artigos/contornos-mistos.html#%23http://www.criarweb.com/artigos/contornos-mistos.htmlhttp://www.criarweb.com/artigos/contornos-organicos.html#%23http://www.criarweb.com/artigos/contornos-mistos.html#%23http://www.criarweb.com/artigos/contornos-mistos.html#%23http://www.criarweb.com/artigos/contornos-mistos.html#%23http://www.criarweb.com/artigos/contornos-mistos.htmlhttp://www.criarweb.com/artigos/contornos-organicos.html#%23


42/163

42 de 163

Por Luciano Moreno

;ublicado em% $-?+?/*


Q $otos#s contornos orgnicos so aueles formados por cur$as li$res.

8o os contornos mais abundantes na nature-a, e sugere fluide-, desen$ol$imento,humanidade, inspirando sensa!es fa$or$eis no espectador.

#s contornos orgnicos so utili-ados abundantemente em pintura e desenhoart"stico, ue so a base para representar figuras humanas, nature-a, paisagens, etc.

/ntretanto, so muito dif"ceis de incluir em uma pgina web, tanto por aspectos tcnicos@de$em se incrustar como imagens como por seu aspecto $isual, ue pode chocar com anature-a prpria de uma pgina, composio ordenada na ue predominam as formasretangulares. 1o obstante, bem usados podem dar um toue natural ou humano 6pgina.

Uma poss"$el soluo, se desearmos introdu-ir em uma pgina contornos orgnicos, adapta2los o mximo poss"$el a um contorno misto, transformando as cur$as li$res em
http://www.criarweb.com/artigos/contornos-organicos.html#%23http://www.criarweb.com/artigos/contornos-organicos.html#%23http://www.criarweb.com/artigos/contornos-organicos.html#%23http://www.criarweb.com/artigos/contornos-organicos.html#%23


43/163

43 de 163

cur$as *-ier, por!es de circunfer0ncias ou linhas retas. #utra soluo introdu-irfotografias ou ilustra!es ue os contenham.

http://www.criarweb.com/artigos/contornos#organicos.html

design equilibrado. "ntroduo2studodas regras bsicas do design grfico. 4!o existe uma frmu"a #ue d3 um design infa"%'e", porm sim umas existem umas

regras bsicas.

Por Luciano Moreno

;ublicado em% /'?-?/*


G $otos

;odemos definir o designde uma composio grfica como a adeuao de diferentes

elementos grficos pre$iamente selecionados dentro de um espao $isual, combinando2os de tal forma ue todos eles possam contribuir um significado 6 mesma, conseguindo oconunto transmitir uma mensagem clara ao espectador.

# design grfico h de ter em contaos aspectos psicolgicos da percepo humana e assignifica!es culturais ue possam ter certos elementos, escolhendo estes de forma uecada um deles tenha um poru0 na composio e buscando um euil"brio lgico entre assensa!es $isuais e a informao oferecida.

# mais importante de toda composio a mensagem ue est nas entrelinhas. 4trabalho do designerbuscar a mxima eficcia comunicati$a, transmitindo essamensagem por meio de uma composio ue cause impacto $isualmente ao espectador elhe torne recepti$o.
http://www.criarweb.com/artigos/contornos-organicos.htmlhttp://www.criarweb.com/artigos/design-equilibrado-introducao.html#%23http://www.criarweb.com/artigos/design-equilibrado-introducao.html#%23http://www.criarweb.com/artigos/design-equilibrado-introducao.html#%23http://www.criarweb.com/artigos/design-equilibrado-introducao.html#%23http://www.criarweb.com/artigos/contornos-organicos.htmlhttp://www.criarweb.com/artigos/design-equilibrado-introducao.html#%23http://www.criarweb.com/artigos/design-equilibrado-introducao.html#%23http://www.criarweb.com/artigos/design-equilibrado-introducao.html#%23http://www.criarweb.com/artigos/design-equilibrado-introducao.html#%23


44/163

44 de 163

Agora tambm, sem uma disposio adeuada das formas, cores e agrupamentos, semum euil"brio global na composio, a mensagem no chegar de forma adeuada aoespectador.

1o existe um mtodo mgico ue consiga uma composio bem2sucedida, mas sim ueexistem umas regras bsicas de design ue facilitam a transmisso de uma mensagempor meio de uma composio grfica de forma efeti$a.

/stas regras so aplic$eis igualmente ao design de pginas web, embora sueitas 6slimita!es ue imp!e este formato e modificadas para adapta2las 6 interati$idade e 6s

possibilidades multim"dia do mesmo.

/ste ser o tema deste cap"tulo de nosso curso, estudar as regras bsicas de designgrfico efeti$o e euilibrado% propor!es, escalas, contrastes, agrupamentos, reticulados,alinhamentos, simetrias, euil"brio entre conte3dos e hieraruia $isual.


45/163

45 de 163

http://www.criarweb.com/artigos/design#e!ilibrado#introd!cao.html

design equilibrado. 0s propor4es*e'emos ter em contaa defini!o a uti"i0ar, os e"ementos grficos e as

propor$es...

Por Luciano Moreno

;ublicado em% $*?-?/*


G $otos

1a hora de comear uma composio, o primeiro ue de$emos saber o tamanho ueesta ter.

8e o suporte final de nosso grafismo $ai ser o papel, poderemos desenhar para umagrande $ariedade de tamanhos, desde os menores @cart!es de $isita, peuenos folhetosat os maiores @posters, carta-es para an3nciospublicitrios, embora uase sempredesenharemos am algum dos formatos 'I1.

9edidas papel #ormato D"7

modelo taman1o relao

'I1 AM QKL`QRP L.LQ< m]@x\[VL.PLP

'I1 AG MQL`QRP L.KQ< m] @x\[VK.MKMQ

'I1 AQ MQL`


46/163

46 de 163

compat"$el com ambas resolu!es, somente em uma delas se $isuali-ar tal como adesenhamos.

# segundo passo ser escolher os elementos grficos e textuais ue usaremos nacomposio. /sta escolha se de$e basear em $ari$eis como a pessoa ou empresauedesea transmitir a mensagem, a prpria mensagem, o tipo de espectadoresdestinatrios da composio e as caracter"sticas funcionais e comunicati$as de cadaelemento.

Agora de$emos definir ue partes da rea do desenho de$em estar ocupadas porelementos e ue partes $o ficar $a-ias, sem nenhum conte3do. 8e deixarmos muitosespaos $a-ios, a composio pode ser descordenada ue ser dif"cil estabelecerrela!es globais entre os elementos ou entre os grupos deles. ;orm, se o n3mero decomponentes for ele$ado, podemos obter uma obra sobrecarregada, dif"cil de entender,na ual no se distingue com clare-a o ue cada coisa e ual a mensagem ue uertransmitir.

&omearemos a situar ento os elementos em cena, como se fossem atores de nossa

particular obra de teatro, combinando2os de diferentes formas at obtermos umresultado satisfatrio. 1este ponto muito importante ter em conta ue cada elemento$isual tem uma funo determinada dentro da composio.

A informao $isual ue tra- um elemento pode mudar segundo o faam as propriedades
http://www.criarweb.com/artigos/design-equilibrado-proporcoes.html#%23http://www.criarweb.com/artigos/design-equilibrado-proporcoes.html#%23


47/163

47 de 163

do mesmo, como seu tamanho, forma ou cor, porm, sobretudo sua proporo, o peso$isual ue ti$er no total da composio.

Indubita$elmente, a forma mais direta de marcar propor!es mediante o tamanhorelati$o dos elementos. #s elementos maiores, altos ou longos t0m uma carga $isual

superior aos menores, curtos ou finos, criando -onas de atrao mais intensas.

+ambm podemos delimitar propor!es em um grafismo mediante a cor, com a ualpodemos definir diferentes reas de tons 3teis para distribuir de forma adeuada toda ainformao grfica. 1este sentido, as cores puras e saturadas t0m um maior peso $isualue as secundrias neutras, e estas, maior ue as tercirias pouco saturadas.

#utra tcnica para definir propor!es o uso de agrupamentos de elementos e a corretadistribuio destas no cenrio, o ue nos $ai permitir estruturar de uma forma ou outra acomposio.

:roporo por agrupamentos

/ste sistema costuma dar bons resultados, sempre ue no abusemos dele criando umexcessi$o n3mero de blocos significati$os, ue ento se diminuiria importncia uns aoutros e se perderia a proporcionalidade buscada.

?ais regras prticas referentes 6 proporo so%

As formas regulares t0m menor peso ue as irregulares.


48/163

48 de 163

As formas alongadas e angulares alongam o campo de $iso, criando -onas dominantes.

8eam uais forem os elementos usados em uma composio de$eremos sempre buscarumas propor!es adeuadas entre eles, com o obeti$o de ue cada um cumpra seupapel comunicati$o de forma adeuada.

http://www.criarweb.com/artigos/design#e!ilibrado#proporcoes.html

design equilibrado. 0 escala2ntende5se por esca"a a re"a!o entre as propor$es dos e"ementos 'isuaisde uma composi!o.

Por Luciano Moreno

;ublicado em% /?/?/*


G $otos/ntende2se por escala a relao entre as propor!es dos elementos $isuais de umacomposio.

+odos os elementos t0m a capacidade de modificar e se definir uns a outros segundo asrela!es ue se definam entre as propriedades anlogas deles. ;ortanto, o conceito deescala no se refere s 6 relao entre tamanhos de dois ou mais elementos, comotambm 6 relao entre cores, formas, etc.

Um elemento grande ou peueno segundo o tamanho dos elementos ue lheacompanham no cenrio. A cor de uma forma brilhanteou apagada segundo a cor de

fundo sobre a ual se encontra.
http://www.criarweb.com/artigos/design-equilibrado-proporcoes.htmlhttp://www.criarweb.com/artigos/design-equilibrado-a-escala.html#%23http://www.criarweb.com/artigos/design-equilibrado-proporcoes.htmlhttp://www.criarweb.com/artigos/design-equilibrado-a-escala.html#%23


49/163

49 de 163

#u sea, as propriedades de um elemento $isual no so absolutas, e sim relati$as, ue dependem das do resto de elementos ue lhe acompanham na composio.

A proporo relati$a entre elementos de$e ser euilibrada, o ue implica o uso de umaescala correta na composio. As escalas so utili-adas desta forma em planos e mapas,

para conseguir representar os obetos reais o mais corretamente poss"$el, com aspropor!es adeuadas entre eles.

/m uma composio grfica a escala usada igualmente importante, tanto paradistribuir o espao de desenho de forma acertada como para dar euil"brio de propor!esaos elementos, usando2se 6s $e-es diferentes mtodos de distribuio de eficciapro$ada, como a regra Aurea ou o mtodo de &orbusier.

A regra Aurea, in$entada por 7itru$io, se utili-a para obter cenrios de trabalhodepropor!es euilibradas, e se baseia em contemplar um espao retangular di$idido emterceiras partes, tanto hori-ontal como $erticalmente, conseguindo com isso secionar osespaos em partes iguais.
http://www.criarweb.com/artigos/design-equilibrado-a-escala.html#%23http://www.criarweb.com/artigos/design-equilibrado-a-escala.html#%23http://www.criarweb.com/artigos/design-equilibrado-a-escala.html#%23http://www.criarweb.com/artigos/design-equilibrado-a-escala.html#%23


50/163

50 de 163

;or sua parte, o mtodo de propor!es criado pelo aruiteto franc0s Ce &orbusier utili-acomo unidade modular de escala o tamanho do homem, estabelecendo com ela asalturas corretas dos obetos ue usamos e dos elementos de uma construo

aruitet5nica.

1o caso do web design, o tamanho da rea de trabalho fixo, porm sim ue de$eremosestabelecer uma escala de trabalho adeuada para dimensionar os elementos de nossapgina.

;scala proporcionada entre logotipo,

op4es de menu e conte5do

Assim, o logotipo de$e ter um tamanho relati$o adeuado 6 pgina, os sistemas dena$egao @menus de$em ser o suficientemente grandes como para ser $istos emaneados com facilidade, mas no entanto, ue restem importncia ao conte3doinformati$o da pgina, etc.
http://www.criarweb.com/artigos/design-equilibrado-a-escala.html#%23http://www.criarweb.com/artigos/design-equilibrado-a-escala.html#%23


51/163

51 de 163

Um erro muito comum neste sentido o dos "cones, ue de$em ser suficientementegrandes como para ue no percam seus traos diferenciadores, nem sua -ona ati$a seatuam como linNs, porm nunca tanto ue destauem em excesso, sobretudo se $oacompanhados de um texto explicati$o.

http://www.criarweb.com/artigos/design#e!ilibrado#a#escala.html

design equilibrado. contraste& contraste permite ressa"tar o peso 'isua", podemos consegui5"o atra's de di'ersos meios( tons, cores, contornos e esca"a.

Por Luciano Moreno

;ublicado em% *?/?/*


G $otos

# contraste o efeito ue permite ressaltar o peso $isual de um ou mais elementos ou

-onas de uma composio mediante a oposio ou diferena apreci$el entre elas,permitindo2nos atrair a atenode espectador para eles.

# contraste pode ser conseguido atra$s de diferentes oposi!es entre elementos%

Contraste de tons

#btemos contraste entre elementos ue possuem tons @claridade2escurido opostos.1este caso, o maior peso ter o elemento mais escuro, destacando o mais claro sobre elecom mais intensidade uanto maior for a diferena tonal.
http://www.criarweb.com/artigos/design-equilibrado-a-escala.htmlhttp://www.criarweb.com/artigos/design-equilibrado-contraste.html#%23http://www.criarweb.com/artigos/design-equilibrado-a-escala.htmlhttp://www.criarweb.com/artigos/design-equilibrado-contraste.html#%23


52/163

52 de 163

&onforme se diminui a tonalidade do elemento mais escuro o contraste $ai perdendointensidade, sendo necessrioredimension2lo se uisermos manter o mesmo contraste.

/ste tipo de contraste tal$e- o mais intenso, e muito usado em composi!es grficas.

Contraste de cores

'ois elementos com cores complementares se reforam entre si, assim como uma coruente e outra fria.

# contraste criado entre duas cores ser maior uanto mais afastadas esti$erem noc"rculo cromtico. As cores opostos contrastam muito, enuanto ue as anlogas apenas

fa-em, perdendo importncia $isual ambas.
http://www.criarweb.com/artigos/design-equilibrado-contraste.html#%23http://www.criarweb.com/artigos/design-equilibrado-contraste.html#%23


53/163

53 de 163

/ste efeito pode ser usado para dar maior dimenso ou sensao de proximidade a umelemento em uma composio, situando2o sobre uma cor ue contraste com ele.

/ste tipo de contraste especialmente indicado para os conte3dos textuais, nos uaisde$e primar pela facilidade de leitura. # idealser o texto negro sobre fundo branco, ue o ue mais contraste cria @contraste de tom. ;orm, em certos elementos, nosuais este ogo de cores no for poss"$el, ha$er ue buscar sempre um texto clidosobre um fundo frio ou $ice2$ersa.

Contraste de contornos

#s contornos irregulares destacam de forma importantesobre os regulares oureconhec"$eis.

/ste tipo de contrastes adeuado para dirigir a ateno do usurio a certos elementosde uma composio ou pgina web, como bot!es importantes, banners publicitrios, etc.1o obstante, h ue ser comedidos em seu uso, sobretudo se se combinam com outrostipos de contraste, ue podem ser um foco de atrao $isual potente demais. Almdisso, criam muita tenso no espao ue lhes rodeia.
http://www.criarweb.com/artigos/design-equilibrado-contraste.html#%23http://www.criarweb.com/artigos/design-equilibrado-contraste.html#%23http://www.criarweb.com/artigos/design-equilibrado-contraste.html#%23http://www.criarweb.com/artigos/design-equilibrado-contraste.html#%23


54/163

54 de 163

Contraste de escala

4 o produ-ido pelo uso de elementos a diferentes escalas das normais ou de propor!esirreais, conseguindo2se o contraste por negao da percepo aprendida.

/ste sistema de contraste no muito usado nas pginas web, onde se busca sempre aescala adeuada, porm sim freSente em fotografia e pintura, conseguindo atrair aateno do espectador de forma muito efeti$a.

http://www.criarweb.com/artigos/design#e!ilibrado#contraste.html

design equilibrado. s agrupamentos)omo os e"ementos webde'em se agrupar para obter um resu"tado coerente.

Por Luciano Moreno

;ublicado em% %/?/?/*


G $otos

# ser humano, tanto por seu carter racional como por herana cultural, tende aorgani-ar os elementos ue percebe ao redor como conuntos significati$os organi-ados./sta inclinao a agrupar elementos relacionados em um fator ue influi de forma notriana percepo ue temos de nosso entorno, do ue $emos ao nosso redor.

As composi!es grficas no escapam a esta tend0ncia, portanto um corretoagrupamento de seus elementos lhes outorga um carter lgico, racional, ue aumentaseu $alor comunicati$o.

# agrupamento de nossos elementos grficos e textuais pode se basear em diferentescritrios%

:roimidade+endemos a agrupar aueles obetos ue esto prximos, maispertos entre si.
http://www.criarweb.com/artigos/design-equilibrado-contraste.htmlhttp://www.criarweb.com/artigos/design-equilibrado-agrupamentos.html#%23http://www.criarweb.com/artigos/design-equilibrado-contraste.htmlhttp://www.criarweb.com/artigos/design-equilibrado-agrupamentos.html#%23


55/163

55 de 163

>emel1ana+endemos a agrupar os elementos iguais ou parecidos. Continuidade1ossa mente tende a agrupar aueles elementos ue t0m uma

continuidade significati$a. >imetria+endemos a agrupar os elementos para ue apaream ordenados

formando figuras conhecidas.

1o caso concreto das pginas web, os agrupamentos so muito 3teis e totalmentenecessrios, sobretudo no ue di- respeito a elementos similares ou de funcionalidade

anloga, como componentes de menus de na$egao, "cones, dados relacionados,bot!es, etc.

#s agrupamentos tambm so muito 3teis em casos de formulrios ou fichas de muitoscampos, sendo muito con$eniente di$idir estes em grupos de informaoanloga,separando logo cada grupo dos demais mediante franas hori-ontais ou $erticais embranco.
http://www.criarweb.com/artigos/design-equilibrado-agrupamentos.html#%23http://www.criarweb.com/artigos/design-equilibrado-agrupamentos.html#%23http://www.criarweb.com/artigos/design-equilibrado-agrupamentos.html#%23http://www.criarweb.com/artigos/design-equilibrado-agrupamentos.html#%23


56/163

56 de 163

&om isso, o formulrio no s ganha em bele-a $isual, como tambm fica mais claro,lgico w fcil de completar pelo usurio.

http://www.criarweb.com/artigos/design#e!ilibrado#agr!pamentos.html

design equilibrado. reticulado)omo harmoni0ar os b"ocos de conte6do #ue formar!o a composi!o dodesenho.

Por Luciano Moreno

;ublicado em% /&??/*


G $otos

Uma composio grfica de$e ser euilibrada no s em conte3dos, como tambm$isualmente, at tal ponto ue podemos di-er ue a ordem na disposio espacial doselementos da mesma um dos fatores mais importantespara seu sucesso.

# espectador ue contempla uma obra grfica @folheto, carta- tr"ptico ou pgina webbusca subconscientemente nela uma ordem e uam estabilidade ue lhe permitam

passear a $ista pela mesma de forma organi-ada e limpa.

# sistema plano de refer0ncia habitual nos seres humanos o formado por um eixohori-ontal e outro $ertical, ou sea, por duas retas ue se cortam em um ngulo de RL_.1este sistema, o eixo hori-ontal sugere euil"brio e estabilidade, enuanto ue o $erticalfacilita a ele$ao da $ista, marcando prioridades ou n"$eis na composio.

7isto ue as composi!es grficas @e dentro delas, as pginas web se representam emsuportes planos, fcil dedu-ir ue este sistema de refer0ncia tambm o maisadeuado para a distribuio de seus elementos. 8e a isto somamos o carter

eminentemente retangular da maioria dos suportes, obtemos por extenso o sistema deorgani-ao idealpara nossas composi!es% o reticulado.

Um reticulado ou rede um sistema de refer0ncia formado por diferentes linhashori-ontais e $erticais ue marcam a locali-ao de elementos e -onas em uma
http://www.criarweb.com/artigos/design-equilibrado-agrupamentos.html#%23http://www.criarweb.com/artigos/design-equilibrado-agrupamentos.htmlhttp://www.criarweb.com/artigos/design-equilibrado-reticulado.html#%23http://www.criarweb.com/artigos/design-equilibrado-reticulado.html#%23http://www.criarweb.com/artigos/design-equilibrado-reticulado.html#%23http://www.criarweb.com/artigos/design-equilibrado-reticulado.html#%23http://www.criarweb.com/artigos/design-equilibrado-agrupamentos.html#%23http://www.criarweb.com/artigos/design-equilibrado-agrupamentos.htmlhttp://www.criarweb.com/artigos/design-equilibrado-reticulado.html#%23http://www.criarweb.com/artigos/design-equilibrado-reticulado.html#%23http://www.criarweb.com/artigos/design-equilibrado-reticulado.html#%23http://www.criarweb.com/artigos/design-equilibrado-reticulado.html#%23


57/163

57 de 163

composio grfica, linhas ue no tem poru0 ter uma representao real @no t0mporu0 fa-er parte do grafismo, mas sim mental. 8o as guias imaginrias sobre as ue$amos ir colocando os elementos, a espinha dorsal de uma composio grfica.

?ediante o reticulado, o designer $ai situando com harmonia os blocos de conte3do ueformaro a composio% -onas principais e secundrias, t"tulos e subt"tulos, blocos detexto, fotografias, ilustra!es, grficos, sistemas de na$egao, bot!es, "cones, etc,

dando com isso um estilo prprio $isualmente lgico 6 mesma.

Uma composio grfica no um sistema padro, 3nico, e sim ue os mesmoselementos se podem organi-ar segundo diferentes esuemas lgicos. ?as semprede$ero estar dispostos segundo

apostila-Web-Design.pdf

Documents

Transcript of apostila-Web-Design.pdf