curso prático de web design

8/3/2019 Curso prtico de Web Design

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 manual1.- Introduo ao design grficoA histria do design grfico, desde as origens da humanidade at o aparecimento da web e da Internet.

2.- Design grficoUma aproximao ao design grfico em geral, com uma descrio dos elementos que compem habitualmenteum desenho e as caractersticas principais que podemos encontrar neles.

3.- Design grfico na webO design web vai mais alm do design tradicional, pois existem muitos limitadores relacionados com o meioonde se apresentam as pginas: Internet. Conheceremos as caractersticas fundamentais do design na web.

4.- Componentes grficos de um computadorDescrio dos principais componentes grficos de um computador: O carto grfico e o monitor.

5.- Resoluo de tela

Consideraes relativas aos distintos tipos de tela que os visitantes possam ter e o espao disponvel para cadacaso.

6.- Cores em um computadorComo trabalham os computadores para codificar uma cor. O formato RGB.

7.- Calibragem do monitorUma composio grfica pode ser vista com diferentes tonalidades dependendo da configurao do monitor.Temos que calibrar o monitor para que o aspecto de nossa obra seja o mesmo em todos os computadores.

8.- Formas bsicas em design grficoA linguagem visual atravs 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 elementoscomunicativos distintos.

9.- O pontoO ponto a unidade mnima de informao visual, e est caracterizado por sua forma, tamanho, cor elocalizao.

10.-A linhaA linha o elemento bsico de todo grafismo e um dos mais usados. Representa a forma de expresso maissimples e pura, porm tambm a mais dinmica e variada.

11.-O contornoO contorno o objeto grfico criado quando o trao de uma linha se une em um mesmo ponto.

12.-O quadradoElementos de desenho: o quadrado.

13.-A circunfernciaElementos de design: a circunferncia.

14.-Contornos mistosElementos de design: contornos mistos, que so os que esto compostos por vrios tipos de contornos.

15.-Contornos orgnicosElementos de design: contornos orgnicos, que esto formados por curvas livres.

16.-O design equilibrado. Introduo

Estudo das regras bsicas do design grfico. No existe uma frmula que d um design infalvel, porm simumas existem umas regras bsicas.

17.-O design equilibrado. As propores
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

Devemos ter em conta a definio a utilizar, os elementos grficos e as propores...

18.-O design equilibrado. A escalaEntende-se por escala a relao entre as propores dos elementos visuais de uma composio.

19.-O design equilibrado. O contraste

O contraste permite ressaltar o peso visual, podemos consegui-lo atravs de diversos meios: tons, cores,contornos e escala.

20.-O design equilibrado. Os agrupamentosComo os elementos web devem se agrupar para obter um resultado coerente.

21.-O design equilibrado. O reticuladoComo harmonizar os blocos de contedo que formaro a composio do desenho.

22.-O design equilibrado. Os alinhamentosNecessrios para conseguir uma composio ordenada e lgica, assim como para relacionar elementos.

23.-O design equilibrado. As simetriasOutro condicionante para que o design da web tenha uma organizao natural.

24.-O design equilibrado. O equilbrio entre contedosA organizao espacial, primordial para atrair ao usurio.

25.-O design equilibrado. A hierarquia visualA organizao guia ao usurio na contemplao de uma pgina web.

26.-Teoria da cor. Introduo uma parte fundamental da web, produtor de sensaes.

27.-Teoria da cor. Natureza da corDescrio formal da cor como um fenmeno fsico.

28.-Teoria da cor. A percepo da corComo o olho pode detectar e classificar as cores que chegam.

29.-Teoria da cor. Modelos de corDescrio dos tipos de cor conhecidos, assim como se aborda uma explicao de como os objetos adquirem ascores.

30.-Teoria da cor. Tipos de corNeste captulo descreveremos como a partir das cores primrias se podem conseguir outras, e dependendo dastonalidades fazer diferentes classificaes.

31.-Teoria da cor. Propriedades das coresAs cores tm umas propriedades inerentes que lhes permite se distinguir de outras e gravar diferentesdefinies de tipo de cor.

32.-Teoria da cor. Contrastes de corO contraste um fenmeno com o qual se podem diferenciar cores atendendo luminosidade, cor de fundosobre a qual se projetam...

33.-Teoria da cor. Estudo de algumas cores INeste captulo descreveremos as sensaes que produzem algumas cores como o vermelho, o verde e o azul,assim como seu possvel uso e seu significado em uma web.

34.-Teoria da cor. Estudo de algumas cores IIAcabamos a sesso da teoria da cor com o estudo de mais cores, as sensaes que produzem e suaconvenincia de uso nos web sites.

35.-A cor na web. Cores disponveis para a webDescobriremos o nmero de cores que 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

36.-A cor na web. Paletas de cor seguras. Websafe e ReallysafeAs paletas de cores do limitaes na hora de apresentar as cores que contm a web. Neste captulo veremosquais so estas limitaes.

37.-A cor na web. O problema das imagensAs cores das imagens podem sofrer mudanas se tiverem que estar encapsuladas em estruturas tais comotabelas, camadas, etc. Isto pode ter uma soluo aproximada, porm no tima. Veremos os problemas que sepodem apresentar.

38.-A cor na web. Cores e partes de uma pgina importante saber escolher as cores que definiro uma parte da pgina para que seja factvel o cometido desta.Veremos que cores so as mais apropriadas para cada seo do site.

39.-A cor na web. Escolha da paleta para um web site necessrio escolher cores de acordo com o logotipo da pgina. Neste captulo veremos relaes possveis paraconseguir a funcionalidade esperada.

40.-A cor na web. Ferramentas bsicas para trabalhar com coresExiste uma grande variedade de ferramentas que nos permitem manipular as caractersticas das cores paraconseguir as que necessitemos. Abordamos uma ampla lista de programas neste captulo.

41.-Tipografia. IntroduoNesta seo vamos falar dos contedos textuais das pginas web, e neste primeiro captulo, faremos umaintroduo a este estudo.

42.-Tipografia. Um pouco de histriaVamos ver como evoluiu a escritura desde os tempos dos babilnios at nossos dias, passando peloacontecimento tipogrfico mais importante: a inveno da imprensa.

43.-Medidas tipogrficasContinuamos com um pouco mais de histria da tipografia, neste caso com suas medidas e como se foramadaptando s necessidades atuais.

44.-Partes de uma letraVamos conhecer as partes fundamentais de uma letra e saber distingui-las no caso de ter que criar famliastipogrficas.

45.-Famlias tipogrficasVamos conhecer as famlias tipogrficas e seus grupos e classificaes.

46.-Fontes Serif e fontes Sans SerifVemos a classificao de fontes tipogrficas em Serif e Sans Serif.

47.-Tipografia digitalVemos como podemos interletrar e desenhar caracteres de melhor qualidade.

48.-Fontes para impresso e fontes para telaVemos tcnicas e tipos de fontes tipogrficas para tipos de resolues de tela e impresso.

Introduo ao design grficoA 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

Publicado em: 26/1/07

5 votos

O ser humano sempre teve a necessidade de se comunicar com seus semelhantes, attal ponto que podemos afirmar que se o homem o ser mais avanado da natureza,

devido, em grande parte facilidade que teve para fazer partcipe aos demais de suasidias de uma forma ou de outra.

As primeiras formas comunicativas foram mediante elementos visuais. Antes dedesenvolverem capacidades de expresso mediante a linguagem falada, os homensutilizaram seu corpo para comunicar aos demais estados de nimo, desejos e inquietudesatravs de intenes, expresses e signos, que com o tempo adquiriram a condio de"linguagem", ao converter-se em modelos de comunicao.

Embora posteriormente a linguagem falada passara a ser o meio de intercmbio deinformao mais direto, a linguagem visual continuou tendo um importante peso nas

relaes comunicativas, sobretudo a partir do uso de diversos materiais e suportes comomeios de "modelar" mensagens visuais, como demonstram uma infinidade de desenhosem pedra e pinturas rupestres que chegaram aos nossos dias, nas quais representamelementos naturais, atividades cotidianas e diferentes signos artificiais com significadoprprio.

Pintura rupestre (Cova de Altamira, Espanha)

A representao de idias mediante grficos teve seu maior avance com o aparecimentodas linguagens escritas, que permitiram expressar cadeias estruturadas de pensamentos

mediante um conjunto de elementos grficos de significado prprio dispostos segundouma estrutura definida, capazes de transmitir mensagens entendveis pela comunidade.

Estas linguagens escritas estavam baseadas na representao de elementos tomados danatureza, aos que se atribua uma interpretao particular, e tambm um conjuntoartificial de smbolos inventados: os alfabetos. Cada um destes signos isolados tinha svezes um significado incerto, porm unido a outros, permitiam representar graficamentea linguagem falada por cada povo 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

Gravura em pedra com hieroglfico (Egito)

Como suporte fsico, foi utilizada inicialmente a pedra, porm, rapidamente se buscaramoutros tipos de materiais que permitiram uma maior facilidade de uso e uma maiorportabilidade, como os papiros ou os pergaminhos.

Papiro dos mortos

Tambm se comearam a usar diferentes tipos de pigmentos naturais para dar um maiorcolorido e expresso s obras escritas e composies artsticas, e a dispor os diferenteselementos textuais e grficos de forma harmoniosa e equilibrada, j que se apreciou quecom isso se ganhava poder comunicativo, clareza e beleza. Isto pode ser apreciado naconfeco dos incunbulo realizados nos monastrios, nos que se observa de forma clara

a importncia da "FORMA" (design) para transmitir uma mensagem.


7/163

7 de 163

Incunbulo medieval

Posteriormente, Johann Gutenberg inventou a imprensa, artefato capaz de reproduzir emgrandes quantidades e de forma cmoda um original, o que tornou possvel que osdocumentos impressos e a mensagem que continham fossem acessveis a um grandenmero de pessoas.

Primeiro livro impresso

Logo comearam a aparecer imprensas que reproduziam todo tipo de obras, cada vezmais elaboradas. Comearam-se a usar novos materiais como suporte, novas tintas enovos tipos de letras, originando o aparecimento de profissionais especializados em seumanejo, os tipgrafos e os impressores, talvez os primeiros designers grficos como tal,

j se encarregavam de compor e construir os diferentes elementos que formariam umaobra de forma que resultasse lgica, clara, harmoniosa e bela.

Outro grande impulsor do desenvolvimento do design grfico foi a Revoluo Industrial.Surgiram as fbricas e a economia de mercado, um grande nmero de pessoas sedeslocou s cidades para trabalhar, aumentaram as lojas e os comrcios e comeou aconcorrncia entre empresas por se tornarem uma parte do mercado. Com isso,apareceu e se desenvolveu uma nova tcnica comercial, a publicidade, encarregada de


8/163

8 de 163

fazer chegar aos consumidores mensagens especficas que lhes convencessem de queum produto dado era melhor que outros anlogos.

Cartaz publicitrio

O desenvolvimento da publicidade trouxe consigo um desenvolvimento paralelo do

design grfico e dos suportes de comunicao. Havia que convencer ao pblico dasvantagens de um produto ou marca, e para isso nada melhor que mensagens concisas,carregados de componentes psicolgicos, com desenhos cada vez mais elaborados, quechegava ao maior nmero possvel de pessoas. O como se transmitia a informaochegou inclusive a superar em importncia mesma informao transmitida.

No se tratava j de apresentar mensagens visuais belas, e sim, efetivas, que vendiam,e para isso, no duvidaram em realizar grandes investimentos, tornando possvel umgrande avance nas tcnicas de design e no aparecimento de profissionais dedicadosexclusivamente a desenvolve-las e coloca-las em prtica: os designers grficos.

No sculo XX, surgiram os computadores, mquinas em um princpio destinadas a umgrupo reduzido de tcnicos e especialistas, mas que pouco a pouco foram ganhandopopularidade e que com o aparecimento do computador pessoal se estenderam a todosos ambientes e grupos sociais.

O computador til porque permite o uso de programas informticos capazes de realizaruma infinidade de tarefas. Porm, estes programas tm uma estrutura interna muitocomplexa, que na maioria das vezes vai mais pra l dos conhecimentos que possuem osusurios dos mesmos.

Isto deu lugar introduo de uns elementos intermedirios, denominados "Interfaces deUsurio", cuja misso era isolar o usurio das consideraes tcnicas e processosinternos dos programas, permitindo-lhes realizar tarefas com eles por meio de uma"linguagem" intermediria, mais fcil de ser entendida pelo usurio.

Interface de usurio em modo texto


9/163

9 de 163

princpio, estes programas se manejavam de forma textual, mediante comandoscrpticos, que somente "experts" na matria podiam entender. Porm, com o acesso informtica de todo tipo de pessoas tornou-se necessrio uma simplificao no manejodas aplicaes, surgindo o conceito de "Interface Grfica de Usurio" em toda suaextenso, como um meio capaz de tornar entendveis e usveis estas aplicaes atravs

de elementos visuais comuns, que apresentados na tela do computador permitiam aousurio mdio realizar as tarefas prprias de cada programa concreto.

Interface Grfica de Usurio

O trabalho de desenhar estas IGU correspondeu inicialmente aos prprios programadoresque desenvolveram as aplicaes, porm logo foi visto que seu conceito de interface deusurio no correspondia com a que necessitavam os usurios finais.

Faltavam profissionais de design que se encarregariam de conceber as interfaces, pormos designers grficos clssicos no estavam acostumados a construir obras comcapacidades de interao e navegabilidade, pelo qual tiveram que se reciclar,aprendendo conceitos e funcionalidades novas.

Com a entrada em cena da Internet e as pginas web, tornou-se ainda mais patente adefasagem dos designers grficos com o novo meio. Faltava agora desenhar e construirinterfaces de usurio muito especiais, condicionadas a pequenos tamanhos de arquivo ea um meio concreto de apresentao, os navegadores web, que impunham sriaslimitaes ao design, que necessitavam sistemas de navegao entre pginas simples e

entendveis.

Interface web


10/163

10 de 163

Se a isto somamos a necessidade dos criadores de interfaces web de conhecer a fundodiferentes linguagens de marcas e de programao (HTML, JavaScript, DHTML), evidente que era necessria o aparecimento de um novo profissional, o webdesigner,hbrido entre o designer grfico clssico e o programador de aplicaes para Internet.

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

Design grficoUma aproximao aodesigngrfico em geral, com uma descrio dos elementos que compem habitualmente um desenho e as

caractersticas principais que podemos encontrar neles.

Por Luciano Moreno


3 votos

Podemos definir o design grfico como o processo de programar, projetar, coordenar,selecionar e organizar uma srie de elementos para produzir objetos visuais destinados acomunicar mensagens especficas a determinados grupos.

A funo principal do design grfico ser ento transmitir uma informao determinadapor meio de composies grficas, que chegam ao pblico destinatrio atravs dediferentes suportes, como folhetos, cartazes, trpticos, etc.

O design grfico busca transmitir as idias essenciais da mensagem de forma clara edireta, usando para isso diferentes elementos grficos que dem forma mensagem e ofaam facilmente entendvel pelos destinatrios do mesmo.

O design grfico no significa criar um desenho, uma imagem, uma ilustrao, umafotografia. algo mais que a soma de todos esses elementos, embora para conseguircomunicar visualmente uma mensagem de forma efetiva o designer deve conhecer afundo os diferentes recursos grficos a sua disposio e ter a imaginao, a experincia,o bom gosto e o sentido comum necessrios para combina-los de forma adequada.

O resultado final de um design grfico denomina-se grafismo, e uma unidade por simesma, embora esteja composto por uma infinidade de elementos diferentes. Podemosestabelecer uma analogia entre um grafismo e um prato de cozinha. Ambos esto

compostos por diferentes elementos individuais que, unidos corretamente e comsabedoria, compem uma obra final nica e definida que vai mais alm da soma daspartes que 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

Formas, cores e textos em um grafismo

Toda obra de comunicao visual nasce da necessidade de transmitir uma mensagemespecfica. Um designer grfico no um criador de formas, e sim um criador decomunicaes, um profissional que mediante um mtodo especfico (design) constri

mensagens (comunicao) com meios visuais (grafismos). No o criador damensagem, e sim seu intrprete.

O principal componente de toda composio grfica ento a mensagem a interpretar, ainformao que se deseja fazer chegar ao destinatrio atravs do grafismo. Estainformao deve-se representar por meio de diferentes elementos grficos, que podemser muitos e variados, embora os mais comuns sejam:

Elementos grficos simples: pontos e linhas de todo tipo (livres, retas, quebradascurvas, etc.)

Elementos geomtricos, com ou sem contorno: polgonos, crculos, elipses, ovais,

etc. Tipos: letras de diferentes formas e estrutura, utilizadas para apresentar

mensagens textuais. Grficos vrios: logotipos, icones, etc. Ilustraes Fotografias Qualquer outro elemento visual apto para comunicar uma mensagem.


12/163

12 de 163

Um desenho limpo

Estes elementos bsicos combinam-se uns com outros em um grafismo, e destacombinao surge um resultado final no qual tm muita importncia uma srie deconceitos prprios do design grfico, entre os quais se destacam:

Os agrupamentos: conjuntos de elementos relacionados mediante proximidade,semelhana, continuidade ou simetrias.

A forma: forma de cada elemento grfico isolado e dos agrupamentos de

elementos. Os contornos: partes limtrofes dos elementos, que permitem distingui-los dos

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

A localizao: lugar que ocupa cada elemento grfico ou agrupamento deles noespao do grafismo.

O tamanho: tamanho relativo de cada elemento grfico com respeito aos que lherodeiam. Escalas.

A cor: cor de cada elemento individual, cores de cada agrupamento de elementos,conjunto total de cores usado em um grafismo, disposio relativa dos elementoscom cor e harmonia entre cores.

O contraste: intensidade de visualizao de cada elemento com relao aos quelhe rodeiam e ao grafismo completo.

O equilbrio: cada grafismo implica um sistema de referncia espacial queconsegue um nvel de equilbrio maior ou menor.

A simetria : disposio espacial regular e equilibrada dos elementos que formama composio grfica.

Os diferentes elementos de um grafismo so percebidos pelo destinatrio de acordo coma influncia que exercem cada um destes conceitos a nvel individual, grupal e total.Porm, a unio de todos eles, a obra grfica, uma entidade comunicativa individual ecompleta, carregada de complexos elementos humanos associados com a linguagem, aexperincia, a idade, a aprendizagem, a educao e a memria.

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


13/163

13 de 163

Design grfico na webO design web vai mais alm do design tradicional, pois existem muitoslimitadores relacionados com o meio onde se apresentam as pginas:Internet. Conheceremos as caractersticas fundamentais do design na web.

Por Luciano Moreno


3 votos

O design grfico de uma pgina web somente uma parte do design da mesma, j que,ademais, h que considerar um conjunto mais ou menos extenso de condicionantes quevo limitar a livre criatividade do designer.

Em primeiro lugar, as pginas web tm que ser baixadas de um servidor web remotoatravs da Internet, pelo qual a largura de banda das conexes dos usurios vem a ser

um fator chave na velocidade de visualizao. A maioria dos usurios se conecta aindana Internet com um modem, com velocidades tericas de 56 Kbps, embora na prticano supera os 10-15 Kbps no melhor dos casos.

Os elementos grficos, j tendo formato de mapa de bits ou vetorial, costumam sertraduzidos em arquivos de bastante peso, dependendo do tamanho da imagem e doformato em que se salve. Isto origina que as pginas que contm em seu desenhomuitas imagens, ou poucas porm de grande tamanho, demorem muito tempo para serbaixadas desde o servidor web e apresentadas na janela do computador do usurio, queno costuma ser muito paciente.

Estudos realizados demonstram que o tempo mximo de pacincia de uma pessoa queespera o download de uma pgina costuma ser de uns 10 segundos, passados os quaisprefere abandonar nosso website e buscar outro mais rpido. Portanto, o nmero deelementos grficos que podemos introduzir em uma pgina web fica bastante limitado,tendo que buscar alternativas mediante o uso imaginativo de fontes e cores.

Outro aspecto a ter em conta que as pginas web so visualizadas em umas aplicaesespecficas, os navegadores web, que impem grandes limitaes ao design das mesmas.A janela de um navegador eminentemente retangular, com umas medidas concretas(dadas pela resoluo empregada pelo usurio em seu monitor) e com umas capacidades

de interpretao de cores que variam muito segundo o computador usado, o sistemaoperacional, o monitor e o carto grfico.

Estes fatores impem fortes limitaes ao webdesigner, que deve buscar sempre quesuas pginas possam ser visualizadas corretamente pelo maior nmero de usurios.
http://www.criarweb.com/artigos/713.php#%23http://www.criarweb.com/artigos/713.php#%23http://www.criarweb.com/artigos/713.php#%23http://www.criarweb.com/artigos/713.php#%23http://www.criarweb.com/artigos/713.php#%23http://www.criarweb.com/artigos/713.php#%23http://www.criarweb.com/artigos/713.php#%23http://www.criarweb.com/artigos/713.php#%23


14/163

14 de 163

Design de um formulrio web

Em segundo lugar, os navegadores existentes no mercado tm uma forma particular deapresentar o contedo das pginas. Internet Explorer interpreta em muitas ocasies umapgina web de forma muito diferente a Netscape Navigator 4x, e este por sua vez o fazde forma diferente a Netscape Navigator 6x.

Para tentar solver estas diferenas, o webdesigner deve trabalhar com vriosnavegadores ao mesmo tempo, desenhando suas pginas de tal forma que ainterpretao delas seja parecida em todos, o que impe novas limitaes ao desenho.

Por outro lado, uma pgina web no um design grfico esttico, e sim que contmdiferentes elementos que tm a capacidade de interagir com o usurio, como menus denavegao, links, formulrios, etc. Alm disso, uma pgina isolada no existe, porque fazparte de um conjunto de pginas inter-relacionadas entre s (o website), que devemapresentar-se ao usurio com o mesmo "estilo", embora sua funcionalidade seja muitodiferente.

A isto h que somar que as pginas desenhadas devem logo ser construdas em umalinguagem especfica, o HTML, que por si mesmo muito limitado, o que faz com que owebdesigner tenha que estar sempre pensando se a interface que est desenhandograficamente vai poder ser logo construda.

Por ltimo, uma pgina web costuma ocultar, na maioria dos casos, uma srie deprocessos complexos que se executam sem que o usurio seja consciente deles(execuo de cdigos de linguagens de programao tanto em cliente como em servidor,acesso ao banco de dados em servidores remotos, etc.), processos que adicionam tempo apresentao das pginas e que muitas vezes costumam afetar de forma importante odesenho destas, j que designer no sabe de antemo que contedos concretos vo ter.

Resumindo: o webdesign vai mais alm do design grfico, ao influir nele uma infinidadede fatores que limitam as possibilidades do desenho, porm tambm outros que


15/163

15 de 163

acrescentam interatividade e funcionalidades a uma pgina web que um cartaz, folhetoou revista no tm.


Componentes grficos de um computadorDescrio dos principais componentes grficos de um computador: O cartogrfico e o monitor.

Por Luciano Moreno


3 votos

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

O carto grfico ou de vdeo o componente hardware encarregado de processar osdados grficos que envia o processador, interpreta-los e codifica-los em voltagensadequadas que so enviados logo ao monitor para sua apresentao em tela.

Carto grfico

Existem diferentes modelos de carto grfico, que vo desde os mais simples, includosna placa base, at os mais avanados, verdadeiros mini-computadores, com seu prprioprocessador, memria, bus, etc.

Os monitores so os dispositivos encarregados de apresentar ao usurio as interfaces das

aplicaes que se executam no computador. Todos sabemos como um monitor porfora, j que estamos acostumados aos monitores das televises, algo to comum emnossas casas. Interiormente, os monitores variam uns dos outros em funo de suaqualidade, da forma de manejar de voltagens e da tecnologia grfica empregada.

Monitor CRT
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

Os monitores mais comuns so os CRT ou de raios catdicos, formados por um tubocujo interior foi feito vazio, em um dos extremos se situam trs canhes de eltrons, umpor cada cor primria, e no outro em uma tela de vidro, cuja parte externa a que v ousurio.

Tubo de raios catdicos de um monitor CRT

Os eltrons gerados nos canhes por aquecimento so impulsionados at a parte internada tela, que se encontra recoberta por pequenos grupos de fsforo pigmentado em cadauma das trs cores primrias (vermelho, verde e azul). Estes grupos recebem o nome detradas, e se correspondem com um ponto da tela, denominado pxel, que aparecer deuma cor ou de outra segundo a intensidade dos eltrons que chegarem em cada canho.

Uma caracterstica importante o passo de ponto (dot pitch), distncia diagonal entredois pontos vizinhos da mesmo cor, que determina o mnimo tamanho de um detalhe que capaz de resolver uma tela. Quanto menor for esta distncia, maior ser a nitidez.Mede-se em pontos por polegada (ppp).

A resoluo mxima distinguvel em uma tela de 800x600 de 72 ppp e em uma de1024x768 de 93 ppp. Estes so valores tericos e na prtica so algo maiores.

Passo de ponto e pxel


17/163

17 de 163

Segundo a resoluo empregada, os pxels (unidade mnima de informao) sorepresentados em tela por uma ou mais tradas, com o que a adaptao s diferentesresolues muito boa.

Com objetivo de que os eltrons cheguem de forma ordenada e causem impacto

justamente no ponto adequado, entre a tela e os canhes, situa-se uma mscara ou redeque filtra os eltrons e os dirige a seus pontos destino de forma adequada.

A representao de uma imagem em tela se realiza mediante varreduras dos raios deeltrons, que percorrem toda a tela de esquerda direita e de cima para baixo. Avelocidade com a que se realiza esta operao denomina-se freqncia de refreshvertical ou refresh de tela, e mede-se em Hz (hertzs) e deve estar por cima de 60 Hz,preferivelmente 70 ou 80. A partir desta cifra, a imagem na tela sumamente estvel,sem piscadas apreciveis, com o qual a vista sofre muito menos.

A freqncia de refresh vertical de nosso monitor pode ser averiguada acessando telade configurao do monitor, a qual se acessa em sistemas Windows mediante asselees:

Iniciar > Painel de control > Tela > Configurao > Opes avanadas > Monitor

Tambm podemos mudar nesta tela a freqncia de refresh, porm antes de faze-lo aconselhvel consultar o manual do monitor, j que uma freqncia incorreta pode serbastante prejudicial.

Monitor LCD

Outro tipo de monitore o LCD ou de cristal lquido, que se diferencia dos anteriores

porque nele as tradas esto formadas por cristal lquido ao invs de fsforo pigmentado,e os eltrons so guiados por polarizao magntica. Ademais, os monitores LCDtrabalham com uma trama de pxels concreta, sendo fixo o tamanho de cada um,portanto ao mudar uma resoluo inferior podem ficar franjas de pxels desativadas.

Seja qual for o tipo de carto grfico e monitor usado, fundamental ter instalados eatualizados os drivers prprios destes componentes.

Um driver um conjunto de bibliotecas de software especficas encarregadas deconfigurar e controlar os dispositivos de hardware. Cada componente necessita parafuncionar bem os drivers adequados, que geralmente vm junto com este em um

disquete ou em um CD.

Com o avano das funcionalidades dos sistemas operacionais e dos demais componentesde software e hardware das mquinas informticas, torna-se necessrio uma atualizaoconstante dos drivers dos monitores e cartes de vdeo.


18/163

18 de 163

Estas verses atualizadas costumam ser oferecidas pelos diferentes fabricantes em seusweb sites, por isso muito importante visitar estes a cada certo tempo para baixar asverses atualizadas dos drivers e instala-los em nossa mquina, com o objetivo de noperder capacidades e de evitar incompatibilidades com os novos sistemas operacionais.

Se tivermos instalado um carto grfico em nosso computador, geralmente os driversdesta (controlador) so os responsveis de manejar de forma adequada o monitor. Paraacessar s propriedades do controlador, basta seguir a rota:

Iniciar> Painel de controle > Tela > Configurao > Opes avanadas > Monitor> Propriedades > Controlador

Atravs desta janela podemos ver o tipo de controlador instalado e se est funcionandobem ou se tem algum problema. Tambm atualiza-lo, para o que for necessrio terpreviamente nos novos drivers, j que teremos que indicar sua localizao em nossosdiscos rgidos.

Uma considerao importante: h que estar certo de que o driver que iremos instalar secorresponde com o de nosso carto grfico ou monitor, j que um driver inadequadopode originar um mal funcionamento dos componentes grficos.


Resoluo de tela

Consideraes relativas aos distintos tipos de tela que os visitantes possamter e o espao disponvel para cada caso.

Por Luciano Moreno


Valorize este artigo:

4 votos

As aplicaes encarregadas de apresentar as pginas web so os navegadores(browsers), entre os quais, cabe destacar por sua importncia e difuso, Internet

Explorer, Netscape Navigator, Opera e Mozilla Firefox.

A interface de um navegador, em seu modo padro, apresenta ao usurio uma ou maisbarras superiores (de menus, de endereos, etc.), uma barra inferior (a barra de estado)e um espao principal, a janela, na qual so apresentadas as pginas web.

A forma desta janela sempre retangular, porm seu tamanho varia, dependendo domonitor e do carto grfico. Podemos falar de dois tamanhos de tela diferentes:

Tamanho absoluto: o tamanho "real" da janela do monitor, medidogeralmente em polegadas. Depende do monitor.

Resoluo ou tamanho relativo : vem determinado pelo nmero de pixels quese mostram na janela do monitor, sendo o pxel a unidade mnima de informaoque pode se apresentar em tela, de forma geralmente retangular. Depende docarto grfico.


19/163

19 de 163

O tamanho absoluto costuma se expressar em polegadas de diagonal (1 polegada = 25,4mm). O mais comum atualmente o de 17'' em computadores de mesa, embora aindaexistam bastantes mquinas antigas com monitores de 15'' e existem no mercadobastantes de 19'' e de 21''. O tamanho absoluto dos monitores dos laptops costuma serde 14-15''.

Quanto resoluo, os valores mais comuns so de 800x600 e de 1024 x768 pixels,embora existam ainda usurios que trabalhem por baixo da mdia a 640x480, e porcima, a resolues de 1152x864 e 1280x960 pixels.

O tamanho absoluto e a resoluo devem estar em concordncia para uma visualizaocorreta, sendo valores aceitveis os seguintes:

14" - 15": Resoluo mxima aprecivel: 800x600 17": Resoluo mxima aprecivel: 800x600 ou 1024x768 19'' e 21": A partir de 1024 x 768

As possveis resolues de trabalho de uma mquina dependem, sobretudo da qualidadedo monitor e do carto grfico do computador, e se configuram, em sistemasoperacionais Windows, clicando com o boto direito do mouse sobre o escritrio,selecionando a opo Propriedades e acessando aba Configurao, ou tambm atravsde Iniciar > Painel de controle > Visualizao.

A importncia da resoluo de tela sobre a forma de ser visualizadas as pginas web najanela do navegador muito importante. A maior resoluo se dispe de mais pontos deinformao para apresentar os elementos na tela, porm estes pontos so menores, com

o qual os elementos da interface (textos, imagens, objetos de formulrio, etc.) se vemmenores.

Tamanho de pgina e resolues

Se desenhamos uma pgina para uma resoluo dada, ocupando toda a janela donavegador, aqueles usurios que a visualizarem em resolues menores no teroespao na tela para conter toda a pgina, por conta disso se veriam obrigados a usar asbarras de deslocamento do navegador. Sendo ao contrrio, aqueles usurios que avisualizarem a resolues maiores tero muito espao na tela para to pouca pgina,

deixando assim bastante espao vazio, sem contedos.

Para solucionar estas diferenas, o normal que se desenhem as pginas web para umaresoluo base, geralmente a mais usada na atualidade pela maioria (800x600), e seconstruam internamente mediante tabelas ou camadas de tamanhos relativos, com


20/163

20 de 163

larguras definidas em %, com o qual se consegue que ao ser visualizadas em monitoresde mais resoluo se "abram", ocupando todo o espao de tela disponvel.

Os problemas que tm este sistema so que no d suporte aos usurios que utilizamresolues menores e que, no caso de resolues maiores, o design da pgina poder ser

visto seriamente afetado ao modificar seus elementos das dimenses originais.

Outra possibilidade projetar toda a pgina dentro de um container-pai (uma tabela oucamada) e atribuir a este um alinhamento centralizado, com o qual a pgina ficaria nocentro da tela se se usa uma resoluo maior que a do desenho.


Cores em um computadorComo trabalham os computadores para codificar uma cor. O formato RGB.

Por Luciano Moreno



3 votos

O olho humano pode distinguir aproximadamente entre 7 e 10 milhes de cores. Devidoa isto a vista para ns o principal sentido que nos une com o exterior, de tal forma quesobre 80% da informao que recebemos do mundo exterior visual.

Pintores e designers grficos utilizam esta capacidade humana de apreciar cores paracriar obras que aprofundem na alma e que inspirem sentimentos nos seres que ascontemplam. Porm, o que podemos fazer quando devemos nos expressar com umnmero limitado de cores?

Os computadores trabalham com trs cores bsicas, a partir das quais constroem todasas demais, mediante um processo de mistura por unidades de ecr, denominadas pixels.Estas cores so o vermelho, o azul e o verde, e o sistema definido conhecido comosistema RGB (Red, Green, Blue).

Cada pixel tem reservada uma posio na memria do computador para armazenar ainformao sobre a cor que deve apresentar. Os bits de profundidade de cor marcamquantos bits de informao dispomos para armazenar o nmero da cor associadasegundo a paleta usada. Com esta informao, o carto grfico do computador gera unssinais de voltagem adequados para representar a correspondente cor no monitor.

Quanto mais bits por pixel, maior nmero de variaes de uma cor primria podemoster. Para 256 cores precisam-se 8 bits (sistema bsico), para obter milhares de coresnecessitamos 16 bits (cor de alta densidade) e para obter milhes de cores falta 24 bits(cor verdadeira). Existe tambm outra profundidade de cor, 32 bits, porm com ela nose conseguem mais cores, e sim que as que usarmos se mostraro mais rpido, j que

para o processador mais fcil trabalhar com registros que sejam potncia de 2(lembremos que trabalha com nmeros binrios).


21/163

21 de 163

Quanto maior for o nmero de cores, maior ser a quantidade de memria necessriapara armazen-los e maiores os recursos necessrios para processa-los. Por este motivo,os computadores antigos dispem de paletas de poucas cores, normalmente 256, por

no ter capacidade para manejar mais sem uma perda notvel de prestaes.

Para representar uma cor no sistema RGB utilizam-se duas formas de codificaodiferentes, a decimal e a hexadecimal, correspondendo-se os diferentes valores com aporcentagem de cada cor bsica que tem uma cor determinada.

Porcentagens de cor e cdigos

Por exemplo, um vermelho puro (100% de vermelho, 0% de verde e 0% de azul) seexpressaria como (255,0,0) em decimal, e como #FF0000 em hexadecimal (antes docdigo de uma cor em hexadecimal sempre situa-se um smbolo almofadinha).

Das 256 cores bsicas, o prprio sistema operacional fica com 40 para sua gestointerna, com o qual dispomos de 216 cores. Delas, 18 correspondem-se com as gamas

das cores primrias, correspondentes a 6 tons de vermelho, 6 de azul e 6 de verde:

Gamas de cores primrios

E o resto, as cores secundrias, so combinaes destas gamas de cores primrias:


22/163

22 de 163

Cores secundrias

Se usamos uma profundidade de cor de 24 bits, correspondente a milhes de cores,dispomos de uma ampla gama para trabalhar, porm sempre tendo em conta que s

sero compatveis as cores que tiverem sua equivalente no sistema de 256 cores, ouseja, aquelas nas que cada cor primria vem definida por uma dupla de valores iguais,devendo estas ser 00,33,66,99,CC ou FF.

Quando usamos uma profundidade de cor de 16 bits dispomos de milhares de cores,porm o problema que devido diviso desta gama de cores, os valores obtidos no secorrespondem com os equivalentes em 256 cores nem em milhes de cores. Porexemplo, #663399 a mesma cor que 256 e que milhes, mas no igual que o obtidocom milhares de cores.

Como o cdigo de uma cor dada pode ser difcil de lembrar, foi adotada uma lista decores as quais foi colocado um nome representativo no idioma ingls (red, yellow, olive,etc.), de tal forma que os navegadores modernos interpretam a mesma e a traduzeminternamente por seu valor hexadecimal equivalente.


Calibragem do monitorUma composio grfica pode ser vista com diferentes tonalidadesdependendo da configurao do monitor. Temos que calibrar o monitor paraque o aspecto de nossa obra seja o mesmo em todos os computadores.

Por Luciano Moreno



3 votos

As composies grficas podem aparecer de maneira diferente nos distintos monitores,devido principalmente diferena nos parmetros que definem a qualidade e ascaractersticas luminosas e cromticas de cada um deles.

Isto pode originar, por exemplo, que ao realizar uma composio sejamos ns mesmosos enganados, ao no corresponder s cores que vemos em tela s reais que estamoscodificando no grafismo. Ou que o aspecto visual de uma pgina web desenhada em ummonitor mal configurado no corresponda com o que logo vero os usurios, com aconseguinte perda de controle e de qualidade que isso supe.

Para evitar estes erros preciso utilizar uns valores padres dos parmetros deconfigurao, que tornam disponvel que o aspecto de uma obra grfica seja o mesmoem qualquer computador configurado segundo os mesmos valores. Estes valorescostumam se com os que trazem um monitor ao sair de fbrica, e a recuperao dosmesmos recebe o nome de calibragem.

A calibragem o processo de ajuste da configurao da converso de cor do monitor aum nvel padro, de forma que a imagem se apresente de maneira igual em diferentesmonitores.
http://www.criarweb.com/artigos/751.phphttp://www.criarweb.com/artigos/767.php#%23http://www.criarweb.com/artigos/767.php#%23http://www.criarweb.com/artigos/767.php#%23http://www.criarweb.com/artigos/751.phphttp://www.criarweb.com/artigos/767.php#%23http://www.criarweb.com/artigos/767.php#%23http://www.criarweb.com/artigos/767.php#%23


23/163

23 de 163

O mtodo mais simples de calibragem passa pelo uso de imagens "cartas de ajuste",similares s que apareciam no televisor antes de comear a emisso. So imagensformadas por diferentes linhas de cores, umas finas e outras mais grossas, que se podemtomar como referncia para realizar um ajuste totalmente manual, usando para isso oscontroles que possui o monitor. um mtodo pouco confivel, j que os ajustes sototalmente subjetivos.

Outro mtodo de calibragem mais avanado so as ferramentas de gesto da cor quefacilitam certos programas de aplicao, como Adobe Photoshop, que inclui umaferramenta bsica, denominada Adobe Gamma, que pode ser utilizada para eliminartonalidades de cor e padronizar a apresentao das imagens. Acessa-se a esta

ferramenta atravs do menu Ajuda > Administrao da cor > Abrir Adobe Gamma, com oqual acessamos a uma tela que nos permite ajustar os valores diretamente ou por meiode um assistente. Uma vez calibrado o monitor, os valores podem ser armazenados emum arquivo para as sucessivas re-configuraes.
http://www.criarweb.com/artigos/767.php#%23http://www.criarweb.com/artigos/767.php#%23


24/163

24 de 163

Calibrador de monitor

Porm sem dvida a melhor forma de calibrar um monitor utilizar o hardware especficopara isso. O funcionamento varia segundo o dispositivo usado. Alguns se conectamdiretamente ao monitor para coleta de dados binrios, permitindo um ajuste individualdireto de cada um dos canhes. Outros se baseiam em situar frente tela do monitordiferentes medidores (calormetros, colormetros, etc.) para colher dados, fornecendouma leitura dos valores atuais e proporcionando os valores idneos de configurao.

Seja qual for o mtodo escolhido, para uma correta configurao do monitor deveremosajustar uma srie de parmetros, entre os quais se incluem os seguintes:

Brilho

Tambm chamado, luminosidade, define a relao no linear entre a tenso de entrada ea luminancia de sada, intrnseco da fsica do ambiente dos canhes de eltrons e nodepende da iluminao ambiente.

De outra forma, o brilho a intensidade de luz emitida sobre uma rea especfica, pela

qual as mudanas de brilho podem escurecer ou clarear todo o contedo da tela.

Os monitores tradicionais (CRT) geram aproximadamente de 80 a 100 cd/m (candelapor metro quadrado). No caso de monitores LCD, no se admitem valores inferiores a150 cd/m .

Quanto ao tipo de computador, em um PC o brilho no se corrige internamente, por issose uma imagem se v bem no PC onde se cria, se ver igualmente bem em todos. NosMac, ao contrrio, existe uma correo adaptada ao das primeiras impressoras laserpara Mac, por isso uma imagem criada em um Mac se v algo mais escuro em um PC.

O brilho tpico de um monitor de PC de 2,35 (+/- 0,1). O de um sistema Mac de 1,8.Para Internet pode-se criar as imagens ajustando a gama a um valor intermedirioponderado entre PC e Mac.

Ajustes do brilho

Se o valor do brilho em um monitor baixo, as colores luminosas se escureceram,parecendo cinzas. Ao contrrio, se o brilho for elevado, sero as cores escuras as queperdem profundidade, tornando-se cinzas.


25/163

25 de 163

Contraste

O contraste a relao existente entre a intensidade luminosa do ponto mais claro e omais escuro de uma imagem. Quanto maior for o valor de contraste, melhor ser alegibilidade.

Se tivermos uma fotografia com um ponto branco e outro negro e estes mesmosestiverem em um monitor, geralmente o contraste no monitor (170:1) superior ao quese d em uma fotografia (100:1), mas se o ambiente estiver muito iluminado, o pontonegro deixa de ser negro e a relao de contraste pode baixar bastante (hasta 50:1).Esta situao se agrava quando h reflexos na tela que, ademais, produzem cansao aousurio.

Ajustes do contraste

Para uma correta calibragem de contraste h que buscar valores de 100:1, ou seja, queo ponto branco tenha 100 vezes mais luminosidade que o ponto negro (valor prximo a2,2).

Cor

A cor em um monitor produzida pela soma de diferentes intensidades das cores bsicas(vermelho, verde e azul), mediante um processo denominado adio de cores.

A calibragem da cor consiste no processo de ajustar a cor de um dispositivo a um padroestabelecido para conseguir que as cores de uma composio grfica se apreciem igualem todos os monitores calibrados.

Ajustes da tonalidade

Devero se ajustar os diferentes parmetros que definem as qualidades das cores, comotom, saturao, gama, equilbrio de cores primrias, etc.

Resumindo: muito importante que na hora de desenhar nossas pginas web e seuselementos grficos tenhamos nosso monitor bem configurado, j que em caso contrrio,os resultados que obtenhamos no sero reais, produzindo diferenas apreciveis entre o

que v os usurios em seus computadores e o trabalho que tivermos desenvolvido, coma conseguinte perda de controle e de qualidade que isso implica.



26/163

26 de 163

Formas bsicas em design grficoA linguagem visual atravs de grafismos pode se descompor em entidadesbsicas, onde cada uma delas tem por si mesma um significado prprio,porm unidas de diferentes formas podem constituir elementoscomunicativos distintos.

Por Luciano Moreno



2 votos

Estamos acostumados a nos comunicar com nossos semelhantes mediante a linguagemfalada, verbal, formada por uma srie de elementos bsicos (letras, palavras, frases,etc.) que, combinados, formam entidades comunicativas complexas.

De igual forma, a linguagem visual atravs 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 comunicativos distintos.

Estas entidades grficas constituem a substncia bsica do que vemos. Portanto, somuito importantes e todo designer deve conhece-las e maneja-las perfeitamente.

As formas bsicas do design grfico so poucas: o ponto, a linha e o contorno. Porm, a matria-prima de toda informao visual que contribui para uma composio.

Cada uma delas possui um conjunto de caractersticas prprias que as modificam econdicionam, entre as quais destacam-se:

Forma: definida por disposio geomtrica. A forma de uma zona ou contorno vai nospermitir reconhece-las como representaes de objetos reais ou imaginrios.

Direo: projeo plana ou espacial de uma forma, continuao imaginria da mesmamesmo depois de sua finalizao fsica. Pode ser horizontal, vertical 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: talvez a mais importante e evidente, pode imprimir um forte carter e dinamismoaos elementos aos que se aplica. Toda forma ou zona ter em geral duas coresdiferentes, o de seu contorno e o de sua parte interna, podendo se aplicar tanto corespuras como degrades de cores.

Textura: modificao ou variao da superfcie dos materiais, serve para expressarvisualmente as sensaes obtidas mediante o sentido do tato ou para representar ummaterial dado. A textura est relacionada com a composio de uma substncia atravsde variaes diminutas na superfcie do material, e se consegue em uma composiogrfica mediante a repetio de luzes e sombras ou de motivos iguais ou similares.

Escala: tamanho relativo de uma zona com respeito s demais e ao total da obra. Osdiferentes tamanhos das diferentes zonas 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 zona. A dimenso s existe noespao real tridimensional, porm se pode simular em uma composio grfica planamediante tcnicas de perspectiva, sombreado ou sobreposio. Tambm, mediante o usode fotografias, que introduzem espaos tridimensionais na composio.

Movimento: propriedade muito importante, que aporta conotaes de dinamismo e

fora. Nas obras grficas puras no existe movimento real, porm sim, encontra-seimplcito em certos elementos e se pode conseguir com certas tcnicas que enganam aoolho humano (design cintico, pintura cintica) ou representando elementos querealmente existem no mundo real.

Podemos introduzir nas pginas web animaes grficas que aportam sensaes demovimento muito maiores, como animaes Flash, gifs animados, camadas dinmicas,elementos de vdeo, etc.


O pontoO ponto a unidade mnima de informao visual, e est caracterizado porsua forma, tamanho, cor e localizao.

Por Luciano Moreno



2 votos

O ponto a unidade mnima de informao visual, e est caracterizado 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 pelalocalizao que 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 caractersticas do ponto so:

Tem um grande poder de atrao visual, criando tenso sem direo. Quando se situam prximos dois pontos podem produzir sensaes de tenso ou

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

Se se situam diferentes pontos em prolongamento sugerem uma direo, umcaminho, mais acentuado quanto mais prximos estejam os pontos entre si.

Quando se agrupam vrios pontos podem definir formas, contornos, tons ou cores(pensemos na pintura impressionista).

Os pontos isolados so pouco usado no web design. Entretanto, as sucesses de pontosprximos so um bom elemento para dirigir a ateno do visitante, para guiar sua olhadaa uma zona concreta, para estabelecer relaes entre elementos ou para separar zonasda pgina.


A linhaA linha o elemento bsico de todo grafismo e um dos mais usados.Representa a forma de expresso mais simples e pura, porm tambm amais dinmica e variada.

Por Luciano Moreno



3 votosA linha o elemento bsico de todo grafismo e um dos mais usados, tendo tantaimportncia em um grafismo como a letra em um texto. Representa a forma deexpresso mais simples e pura, porm tambm a mais dinmica e variada.
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

formada pela unio de vrios pontos em sucesso, podendo se parecer trajetriaseguida de um ponto em movimento, por ter muita energia e dinamismo. Sua presenacria tenso e afeta ao resto de elementos prximos a ela.

As principais propriedade da linha so:

Contm grande expressividade grfica e muita energia. Quase sempre expressa dinamismo, movimento e direo. Cria tenso no espao grfico em que se encontra. Cria separao de espaos no grafismo. A repetio de linhas prximas gera planos e texturas.

Em uma composio define direcionamento, que estar mais acentuado quanto maislinhas paralelas houver. Esta qualidade pode ser usada para dirigir a ateno em umadireo concreta, fazendo com que o espectador observe o lugar adequado.

Uma linha divide ou circunda uma rea, encontra-se na borda de uma forma. Expressa

separao de planos, permitindo ao designer usa-la como elemento delimitador de nveise reas na composio.

As propriedades de uma linha viro definidas pela sua grossura, sua longitude, suaorientao (direo) com respeito pgina, sua localizao (posio), sua forma (reta oucurva) e sua cor. Estas propriedades se vero afetadas tambm pelo nmero de linhasque houver na composio, sua proximidade e a orientao relativa entre elas.

A linha considerada como tal enquanto a relao largura/comprimento no superaruma proporo determinada. Uma linha mais larga que a metade de seu comprimentoperde a expresso dinmica do trao e adquire a esttica de uma superfcie quadrada.

A unio sucessiva de linhas forma um trao. O traos do volume aos objetos quedesenhamos e permitem representar simbolicamente objetos na composio, eliminandodeles toda informao suprflua 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. Seu corpo pode ser slido ou com textura, e sua direo pode ser curva oureta. E cada uma destas caractersticas diversificar a forma em que interpretada umalinha pelo espectador.

Podemos considerar diferentes tipos de linhas, cada um dos quais tem suas prprias

qualidades:

Linha reta

Define o caminho mais curto entre dois pontos. pouco freqente na natureza, ondepredominam as linhas curvas (o universo em sua totalidade curvo), porm muitoabundante no ambiente humano, que necessita delas para dar estabilidade a suascriaes.

A linha reta horizontal expressa equilbrio, calma, equilbrio estvel. No existeestabilidade sem uma reta horizontal de referncia, uma linha de horizonte, j que nosmovemos em um plano horizontal.

As linhas retas horizontais so muito usadas nas pginas web, tanto que a linguagemHTML proporciona uma etiqueta especfica para introduzi-las, HR. Utilizam-seprincipalmente como elemento delimitador de blocos de contedo em pginas de poucocontedo grfico, sendo conveniente no apresenta-las com efeito tridimensional, e simcomo uma simples linha plana (atributo noshade).

A linha reta vertical sugere elevao, movimento ascendente, atividade. Tambmexpressa equilbrio, porm instvel, como se estivesse a ponto de cair. Isto pode secorrigir trabalhando as linhas verticais com outras horizontais de apoio, que lhes daro aestabilidade de que carecem.


32/163

32 de 163

Em uma pgina web, as linhas retas verticais podem ser usadas para separar colunastextuais ou blocos de contedos, assim como as linhas frontais, com uma cor quedestaque o suficiente sobre o fundo, ou como linhas de fundo, da mesma cor que este,separando zonas de uma cor diferente.

A linha reta inclinada, pelo contrrio, expressa tenso, instabilidade, desequilbrio.Parecem que esto a ponto de cair. Dentro das linhas inclinadas, a que forma 45 com ahorizontal a mais estvel e reconhecvel.

Linha curva

a linha mais livre e a mais dinmica de todas, podendo sugerir desde um movimentoperfeitamente definido at um movimento catico, sem regras.

Est bastante associada ao ser humano, que escreve e desenha quase sempre comlinhas curvas.

As curvas mais comumente usadas em design grfico digital so as curvas Bzier. Estetipo de curva foi desenvolvido por Pierre Bzier por encomenda da empresa Renault, que

buscava uma famlia de curvas representveis matemticamente (so curvas de terceirograu) que permitiram representar as curvaturas suaves que desejavam dar a seusautomveis.


33/163

33 de 163

Uma curva Bzier fica totalmente definida por quatro pontos caractersticos, os pontosinicial e final da curva e dois pontos de controle (manejadores) que definem sua forma.Para modificar sua forma, basta mudar de posio um de seus pontos de controle.

So curvas de manejo pouco complexo e muito elegantes, com um desenvolvimentomuito suave, capazes de se adaptar a quase qualquer forma imaginvel, portanto somuito usadas para desenhar logotipos e cones e para copiar qualquer figura.

Tambm so enormemente versteis, podendo adotar desde curvaturas muito suaves(quase linhas retas) a curvaturas muito fortes (curvas complexas), passando por todosos valores intermedirios. Podem, inclusive, mudar de cncavas a convexas ao redor deum ponto.

No desenho web, o uso de linhas curvas isoladas est muito limitado. mais comumencontra-las como partes integrantes de formas mais complexas, sendo teis, porexemplo, para suavizar a dureza de uma forma retangular em um ou mais de seus lados(como os botes).

Um fator a ter em conta sempre que se trabalhe com linhas curvas em uma pgina web o efeito de escalado produzido ao no ser capaz o sistema grfico dos computadores derepresentar com exatido formas curvas por meio de pxels. o tpico efeito de "dentesde serra" que aparece em todos os objetos com partes curvas, efeito que aumenta com otamanho do objeto.


34/163

34 de 163

Uma soluo a este problema visual incluir as linhas curvas como imagens em formatoweb (GIF, JPG, PNG, etc.) e aplicar-lhes o processo de rastreado, disponvel em quasetodas as aplicaes grficas, por meio do qual se criam um ou mais pxels entre asbordas da linha e o fundo, de uma cor intermediria entre elas.

Trao

Um trao o elemento linear formado pela unio sucessiva de diferentes linhas. talveza forma grfica mais humana, a que melhor representa nossa forma natural de desenhar.

Um trao herdar as propriedades das linhas que o criam, existindo traos retos, curvosou mistos.


O contornoO contorno o objeto grfico criado quando o trao de uma linha se une emum mesmo ponto.

Por Luciano Moreno



2 votos

Podemos definir o contorno como o objeto grfico criado quando o trao de uma linha seune em um mesmo ponto. Ou seja, quando uma linha continua, comea e acaba em ummesmo ponto.


35/163

35 de 163

Todo contorno delimita duas zonas, uma demarcada (o contorno e seu interior) e outrainfinita (o fundo), criando-se um sub-mundo grfico particular em cada forma definidapor cada contorno.

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

criando-se uma tenso entre este espao e seus limites, outorgando linha criadora umgrande poder de atrao visual.

As qualidades grficas de um contorno estaro definidas pelas linhas que o criam e aspropriedades destas.

Os principais contornos so o quadrado, a circunferncia e o tringulo, aos que podemosacrescentar os contornos mistos e os orgnicos.

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

O quadradoElementos de desenho: o quadrado.

Por Luciano Moreno



2 votos

O quadrado a figura geomtrica formada por quatro linhas retas de mesma longitude,denominados lados, que formam ngulos perfeitamente retos nos pontos de unio entreelas (esquinas a 90).
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

O quadrado uma figura muito estvel e de carter permanente, associada a conceitoscomo estabilidade, permanncia, honestidade, retido, limpeza, esmero e equilbrio.

A figura derivada do quadrado por modificao de seus lados o retngulo, depropriedades anlogas ao quadrado, apesar de sugerir menos perfeio e estabilidade.

O quadrado expressa direcionamento horizontal e vertical, referncia primria comrespeito ao equilbrio e o bem-estar. menos proponente e mais neutro que osretngulos, porm mais slido. Convida a olhar seu centro e passear a olhada em espiralem volta desse ponto.

Os retngulos horizontais aportam solidez, estabilidade, do a sensao de ser difceis deinverter. Quando so de tamanho grande permitem que o olhar do espectador passeie deum lado ao outro, em sentido horizontal.

Os retngulos verticais, pelo contrrio, d a sensao de menos solidez, menos estvel,


37/163

37 de 163

parece que pode se inverter a qualquer momento. Neles, o olhar do espectador no podepassear de um lado ao outro, porm, pode mover-se verticalmente, dando sensao deelevao, e apto para representar aqueles objetos que na verdade tm uma formaascendente.

Os quadrados e retngulos tero suas qualidades visuais modificadas segundo sua forma,

tamanho, cor do contorno e rea interna, localizao, escala, etc.A projeo tridimensional do quadrado o hexaedro ou o cubo, corpo geomtrico muitoassociado s obras prprias do ser humano, como os edifcios.Os retngulos so as formas mais naturais para um computador, j que o monitor e as

janelas dos sistemas operacionais grficos so todos retngulos horizontais. Uma pginaweb possui uma forma claramente retangular, definida pela janela do navegador.Ademais, os elementos web (tabelas, camadas, animaes Flash, applets de Java, etc.)so de forma retangular.

Isto faz com que os retngulos sejam especialmente adequados para seu uso naspginas web, proporcionando equilbrio e estabilidade s mesmas.

Entretanto, conveniente seguir uma srie de pautas na hora de usar retngulos, a fimde evitar a monotonia e o aspecto artificial de uma pgina quadriculada 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

Cada retngulo deve estar alinhado com os demais objetos da pgina que lherodeiam.

O tamanho do retngulo deve ser maior que o contedo do mesmo, o suficientecomo para que este se apresente livre, com espaamentos convenientes pelosquatro lados.

No usar nas tabelas bordas padronizadas, ou seja, cinzas e com efeitos derelevo. Se forem usadas para separar logicamente registros, melhor lhes atribuiruma borda fina (sobre 1 pxel) de uma cor que contraste suficientemente com aborda, porm que no seja chamativa demais. De qualquer forma, prefervelutilizar outros mtodos para obter a separao, como filas de duas coresalternativas (pijamas).

Se desejar situar na pgina vrios retngulos de funcionalidade anloga (caso deelementos de um menu de navegao, por exemplo), prefervel posiciona-losem sries horizontais, j que se percebero mais como uma linha do que comoum conjunto retangular.

A dureza visual dos retngulos pode-se suavizar adicionando-lhes outros elementos queos modifiquem em parte. Um exemplo disso, so as tabelas ou botes com esquinasarredondadas, que rompem a monotonia da forma retangular.

Outra forma de compensar a rigidez das formas retangulares combina-las nacomposio com formas curvas que aportem liberdade e dinamismo.

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

A circunferncia

Elementos de design: a circunferncia.

Por Luciano Moreno



2 votos

A circunferncia um contorno continuamente curvado, cujos pontos esto todos namesma distncia de um ponto central, chamado centro do crculo. A distncia constantede qualquer ponto da circunferncia 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 circunferncia representa a rea que contm e seu interior, denominada crculo, aforma mais enigmtica de todas, considerada perfeita por nossos antepassados. Suadirecionalidade a curva, associada ao movimento, ao enquadramento, repetio e aocalor.

A forma circular produz um movimento de rotao evidente, possui um grande valorsimblico, especialmente seu centro, e tem conotaes psicolgicas como proteo,inestabilidade, totalidade, movimento contnuo ou infinito. tpico representar tambmos espaos fechados, hermticos, com circunferncias ou crculos.

Contornos derivados da circunferncia so o oval e ovalado, com qualidades parecidas,mas que expressam ainda mais instabilidade e dinamismo, embora o movimento perfeitoseja uma qualidade prpria da circunferncia.

A projeo tridimensional da circunferncia a esfera, o corpo geomtrico mais perfeito,o que contm um maior volume em um menor espao, o que define a forma tanto dostomos como dos corpos celestes.

A circunferncia e o crculo so talvez os elementos geomtricos mais perfeitos eestveis, embora carregados de uma grande carga dinmica.

As formas circulares so muito difcies de representar em uma pgina web, j que todosos elementos que nos facilita a linguagem HTML so retangulares, embora aparentemno ser. Ademais, as formas curvas se visualizam muito mal nos monitores, devido interpretao grfica mediante pixels, que origina efeitos de escalamento indesejveis.

Outro inconveniente de usar crculos no desenho web deriva precisamente de ser a formaque contm mais rea no menor permetro, j que a maioria das vezes interessa aodesigner exatamente o contrrio, reduzir ao mnimo a rea e maximizar ao mximo o

permetro.
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

40 de 163

Talvez a nica forma de incluir uma forma circular completa em uma pgina sejaincluindo-a em uma imagem. Porm, qualquer imagem por si s retangular comoobjeto HTML, o que nos obrigar a desperdiciar todo o espao compreendido entre ocontorno circular e as bordas da imagem, aparecendo espaos sem contedo nodesejveis na maioria dos casos.

Este efeito negativo pode-se atenuar incluindo dentro da imagem a forma circular e osdemais objetos que lhe rodeiam na composio e que se encontram dentro dos limites doretngulo que define a imagem, mas ento, esses elementos sero estticos, fixos, sempossibilidade de serem modificados se no for mudado todo o contedo da imagem.

Uma soluo melhor incluir a imagem que contm o contorno circular (ou curvo emgeral) como fundo da pgina ou de um elemento que contenha a mesma (tabela, clulade tabela, pargrafo, camada, etc.), o que nos permitir apresentar outros objetos HTMLocupando espaos vazios ao redor da forma circular.

Formas mais sutis e efetivas de incluir curvas em uma pgina podem ser recortandoimagens em forma oval ou circular, e inclusive simulando caminhos curvos medianteelementos textuais ou grficos dispostos sucessivamente.

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

Contornos mistos

Elementos de design: contornos mistos, que so os que esto compostospor vrios tipos de contornos.

Por Luciano Moreno
http://www.criarweb.com/artigos/circunferencia.htmlhttp://www.criarweb.com/artigos/contornos-mistos.html#%23http://www.criarweb.com/artigos/circunferencia.htmlhttp://www.criarweb.com/artigos/contornos-mistos.html#%23


41/163

41 de 163



2 votos

Mediante combinaes dos elementos bsicos e contornos anteriores, pode-se construir

todas as formas imaginveis, cada uma das quais ter umas propriedades dependentesdas partes que a formam, de sua orientao, de seu tamanho, de espessura do traolimite, de sua cor e de sua localizao.

H que ter em conta, em qualquer caso, que o predomnio da referncia horizontal-vertical d uma sensao de equilbrio, enquanto que o domnio da direo diagonalaporta instabilidade.

Os contornos mistos so muito usados nas pginas web, as que aportam variedade nodesign e definio de espaos de informao, rompendo a monotonia visual das formasretangulares puras.

O nico inconveniente que as linhas curvas se devem implementar mediante imagens,geralmente em formato GIF, que se podem incluir como sees curvas nas clulasextremas de uma tabela ou como imagens completas em uma camada, sobre a que sesitua outra camada com o texto.

Tambm possvel inclui-las como arquivos SWF (Macromedia Flash), que aportamgrande definio s zonas curvas, sem produzir efeitos de escala, al ser tratadas comogrficos vetoriais. O inconveniente ento a atualizao dos contedos textuais, j quepara isso faz falta acessar o arquivo FLA fonte do grfico.

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

Contornos orgnicosElementos de design: contornos orgnicos, que esto formados por curvaslivres.
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



2 votosOs contornos orgnicos so aqueles formados por curvas livres.

So os contornos mais abundantes na natureza, e sugere fluidez, desenvolvimento,humanidade, inspirando sensaes favorveis no espectador.

Os contornos orgnicos so utilizados abundantemente em pintura e desenho artstico, jque so a base para representar figuras humanas, natureza, paisagens, etc.

Entretanto, so muito difceis de incluir em uma pgina web, tanto por aspectos tcnicos(devem se incrustar como imagens) como por seu aspecto visual, que pode chocar com anatureza prpria de uma pgina, composio ordenada na que predominam as formasretangulares. No obstante, bem usados podem dar um toque natural ou humano pgina.

Uma possvel soluo, se desejarmos introduzir em uma pgina contornos orgnicos, adapta-los o mximo possvel a um contorno misto, transformando as curvas livres 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

curvas Bzier, pores de circunferncias ou linhas retas. Outra soluo introduzirfotografias ou ilustraes que os contenham.

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

O design equilibrado. IntroduoEstudo das regras bsicas do design grfico. No existe uma frmula que d um design infalvel, porm sim umas existem umas

regras bsicas.

Por Luciano Moreno



3 votos

Podemos definir o design de uma composio grfica como a adequao de diferentes

elementos grficos previamente selecionados dentro de um espao visual, combinando-os de tal forma que todos eles possam contribuir um significado mesma, conseguindo oconjunto transmitir uma mensagem clara ao espectador.

O design grfico h de ter em conta os aspectos psicolgicos da percepo humana e assignificaes culturais que possam ter certos elementos, escolhendo estes de forma quecada um deles tenha um porqu na composio e buscando um equilbrio lgico entre assensaes visuais e a informao oferecida.

O mais importante de toda composio a mensagem que est nas entrelinhas. trabalho do designer buscar a mxima eficcia comunicativa, transmitindo essamensagem por meio de uma composio que cause impacto visualmente ao espectador elhe torne receptivo.
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 adequada das formas, cores e agrupamentos, semum equilbrio global na composio, a mensagem no chegar de forma adequada aoespectador.

No existe um mtodo mgico que consiga uma composio bem-sucedida, mas sim queexistem umas regras bsicas de design que facilitam a transmisso de uma mensagempor meio de uma composio grfica de forma efetiva.

Estas regras so aplicveis igualmente ao design de pginas web, embora sujeitas slimitaes que impe este formato e modificadas para adapta-las interatividade e s

possibilidades multimdia do mesmo.

Este ser o tema deste captulo de nosso curso, estudar as regras bsicas de designgrfico efetivo e equilibrado: propores, escalas, contrastes, agrupamentos, reticulados,alinhamentos, simetrias, equilbrio entre contedos e hierarquia visual.


45/163

45 de 163

http://www.criarweb.com/artigos/design-equilibrado-introducao.html

O design equilibrado. As proporesDevemos ter em conta a definio a utilizar, os elementos grficos e as

propores...

Por Luciano Moreno



3 votos

Na hora de comear uma composio, o primeiro que devemos saber o tamanho queesta ter.

Se o suporte final de nosso grafismo vai ser o papel, poderemos desenhar para umagrande variedade de tamanhos, desde os menores (cartes de visita, pequenos folhetos)at os maiores (posters, cartazes para anncios publicitrios), embora quase sempredesenharemos am algum dos formatos DIN.

Medidas papel formato DIN

modelo tamanho relao

DIN A4 210*297 0.0625 m(x/y=0.707)

DIN A3 420*297 0.125 m (x/y=1.4142)

DIN A2 420*594 0.25 m (x/y=0.707)

DIN A1 840*594 0.5 m (x/y=1.4142)

DIN A0 840*1188 1.0 m (x/y=0.707)

A relao visual entre os diferentes formatos DIN a seguinte:

No caso de uma pgina web, os tamanhos possveis so muito poucos, geralmente dois(800x600 e 1024x768 pixels), porm de suma importncia decidir para qual deles sevai trabalhar, j que, embora seja possvel desenhar uma pgina para que seja
http://www.criarweb.com/artigos/design-equilibrado-introducao.htmlhttp://www.criarweb.com/artigos/design-equilibrado-proporcoes.html#%23http://www.criarweb.com/arti

curso prático de web design

Documents