Curso prático de Web Design Um manual que trata o design orientado à web, com uma interessante introdução ao design em geral e o desenvolvimento do design na web em particular.
http://www.criarweb.com/webdesign/
2 de 163
Capítulos do manual .! "ntrodução ao design grá#ico
A história do design gráfico, desde as origens da humanidade até o aparecimento da web e da Internet.
$.! Design grá#ico
Uma aproximação ao design gráfico em geral, com uma descrição dos elementos ue comp!em habitualmente um desenho e as caracter"sticas principais ue podemos encontrar neles.
%.! Design grá#ico na web
# design web $ai mais além do design tradicional, pois existem muitos limitadores relacionados com o meio onde se apresentam as páginas% Internet. &onheceremos as caracter"sticas fundamentais do design na web.
&.! Componentes grá#icos de um computador
'escrição dos principais componentes gráficos de um computador% # cartão gráfico e o monitor.
'.! (esolução de tela
&onsideraç!es relati$as aos distintos tipos de tela ue os $isitantes possam ter e o espaço dispon"$el para cada caso.
).! Cores em um computador
&omo trabalham os computadores para codificar uma cor. # formato ()*.
*.! Calibragem do monitor
Uma composição gráfica pode ser $ista com diferentes tonalidades dependendo da configuração do monitor. +emos ue calibrar o monitor para ue o aspecto de nossa obra sea o mesmo em todos os computadores.
+.! ormas básicas em design grá#ico
A linguagem $isual atra$és de grafismos pode se descompor em entidades básicas, onde cada uma delas tem por si mesma um significado próprio, porém unidas de diferentes formas podem constituir elementos comunicati$os distintos.
-.! ponto
# ponto é a unidade m"nima de informação $isual, e está caracteri-ado por sua forma, tamanho, cor e locali-ação.
/.! 0 lin1a
A linha é o elemento básico de todo grafismo e um dos mais usados. (epresenta a forma de expressão mais simples e pura, porém também a mais dinmica e $ariada.
.! contorno
# contorno é o obeto gráfico criado uando o traço 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 são os ue estão compostos por $ários tipos de contornos.
'.! Contornos org3nicos
/lementos de design% contornos orgnicos, ue estão formados por cur$as li$res.
).! design equilibrado. "ntrodução
/studo das regras básicas do design gráfico. 1ão existe e xiste uma fórmula ue d0 um design infal"$el, porém sim umas existem umas regras básicas.
*.! design equilibrado. 0s proporç4es
2 de 163
Capítulos do manual .! "ntrodução ao design grá#ico
A história do design gráfico, desde as origens da humanidade até o aparecimento da web e da Internet.
$.! Design grá#ico
Uma aproximação ao design gráfico em geral, com uma descrição dos elementos ue comp!em habitualmente um desenho e as caracter"sticas principais ue podemos encontrar neles.
%.! Design grá#ico na web
# design web $ai mais além do design tradicional, pois existem muitos limitadores relacionados com o meio onde se apresentam as páginas% Internet. &onheceremos as caracter"sticas fundamentais do design na web.
&.! Componentes grá#icos de um computador
'escrição dos principais componentes gráficos de um computador% # cartão gráfico e o monitor.
'.! (esolução de tela
&onsideraç!es relati$as aos distintos tipos de tela ue os $isitantes possam ter e o espaço dispon"$el para cada caso.
).! Cores em um computador
&omo trabalham os computadores para codificar uma cor. # formato ()*.
*.! Calibragem do monitor
Uma composição gráfica pode ser $ista com diferentes tonalidades dependendo da configuração do monitor. +emos ue calibrar o monitor para ue o aspecto de nossa obra sea o mesmo em todos os computadores.
+.! ormas básicas em design grá#ico
A linguagem $isual atra$és de grafismos pode se descompor em entidades básicas, onde cada uma delas tem por si mesma um significado próprio, porém unidas de diferentes formas podem constituir elementos comunicati$os distintos.
-.! ponto
# ponto é a unidade m"nima de informação $isual, e está caracteri-ado por sua forma, tamanho, cor e locali-ação.
/.! 0 lin1a
A linha é o elemento básico de todo grafismo e um dos mais usados. (epresenta a forma de expressão mais simples e pura, porém também a mais dinmica e $ariada.
.! contorno
# contorno é o obeto gráfico criado uando o traço 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 são os ue estão compostos por $ários tipos de contornos.
'.! Contornos org3nicos
/lementos de design% contornos orgnicos, ue estão formados por cur$as li$res.
).! design equilibrado. "ntrodução
/studo das regras básicas do design gráfico. 1ão existe e xiste uma fórmula ue d0 um design infal"$el, porém sim umas existem umas regras básicas.
*.! design equilibrado. 0s proporç4es
3 de 163 'e$emos ter em conta a definição a utili-ar, os elementos gráficos e as proporç!es...
+.! design equilibrado. 0 escala
/ntende2se por escala a relação entre as proporç!es dos elementos $isuais de uma composição.
-.! 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 formarão a composição do desenho.
$$.! design equilibrado. s alin1amentos
1ecessários para conseguir uma composição ordenada e lógica, assim como para relacionar elementos.
$%.! design equilibrado. 0s simetrias
#utro condicionante para ue o design da web tenha uma organi-ação natural.
$&.! design equilibrado. equilíbrio entre conte5dos A organi-ação espacial, primordial para atrair ao usuário.
$'.! design equilibrado. 0 1ierarquia visual
A organi-ação guia ao usuário na contemplação de uma página web.
$).! 6eoria da cor. "ntrodução
4 uma parte fundamental da web, produtor de sensaç!es.
$*.! 6eoria da cor. 7ature8a da cor
'escrição formal da cor como um fen5meno f"sico.
$+.! 6eoria da cor. 0 percepção da cor
&omo o olho pode detectar e classificar as cores ue chegam.
$-.! 6eoria da cor. 9odelos de cor
'escrição dos tipos de cor conhecidos, assim como se aborda uma explicação de como os obetos aduirem as cores.
%/.! 6eoria da cor. 6ipos de cor
1este cap"tulo descre$eremos como a partir das cores primárias se podem conseguir outras, e dependendo das tonalidades fa-er diferentes classificaç!es. classificaç!es.
%.! 6eoria da cor. :ropriedades das cores
As cores t0m umas propriedades inerentes ue lhes permite se distinguir de outras e gra$ar diferentes definiç!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 fundo sobre 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 sessão da teoria da cor com o estudo de mais cores, as sensaç!es ue produ-em e sua con$eni0ncia de uso nos web sites.
%'.! 0 cor na web. Cores disponíveis para a web
'escobriremos o n3mero de cores ue poderemos usar em uma web, e se são estes mesmos se a web se executa em um computador ou em outro.
4 de 163 %).! 0 cor na web. :aletas de cor seguras. Websa#e e (eall
As paletas de cores dão limitaç!es na hora de apresentar as cores ue contém a web. 1este cap"tulo $eremos uais são estas limitaç!es.
%*.! 0 cor na web. problema das imagens
As cores das imagens podem sofrer mudanças se ti$erem ue estar encapsuladas em estruturas tais como tabelas, camadas, etc. Isto pode ter uma solução aproximada, porém não ótima. 7eremos os problemas ue se podem apresentar.
%+.! 0 cor na web. Cores e partes de uma página
4 importante saber escolher as cores ue definirão uma parte da página para ue sea fact"$el o cometido desta. 7eremos ue cores são as mais apropriadas para cada seção do site.
%-.! 0 cor na web. ;scol1a da paleta para um web site
4 necessário escolher cores de acordo com o logotipo da página. 1este cap"tulo $eremos relaç!es poss"$eis para conseguir a funcionalidade esperada.
&/.! 0 cor na web. erramentas básicas para trabal1ar com cores
/xiste uma grande $ariedade de ferramentas ue nos permitem manipular as caracter"sticas das cores para conseguir as ue necessitemos. Abordamos uma ampla lista de programas neste cap"tulo.
&.! 6ipogra#ia. "ntrodução
1esta seção $amos falar dos conte3dos textuais das páginas web, e neste primeiro cap"tulo, faremos uma introdução a este estudo.
&$.! 6ipogra#ia. Um pouco de 1ist=ria
7amos $er como e$oluiu a escritura desde os tempos dos babil5nios até nossos dias, passando pelo acontecimento tipográfico mais importante% a in$enção da imprensa.
&%.! 9edidas tipográ#icas
&ontinuamos com um pouco mais de história da tipografia, neste caso com suas medidas e como se foram adaptando 6s necessidades atuais.
&&.! :artes de uma letra
7amos conhecer as partes fundamentais de uma letra e saber distingui2las no caso de ter ue criar fam"lias tipográficas.
&'.! amílias tipográ#icas
7amos conhecer as fam"lias tipográficas e seus grupos e classificaç!es.
&).! ontes >eri# e #ontes >ans >eri#
7emos a classificação de fontes tipográficas em 8erif e 8ans 8erif.
&*.! 6ipogra#ia digital
7emos como podemos 9interletrar: e desenhar caracteres de melhor ualidade.
&+.! ontes para impressão e #ontes para tela
7emos técnicas e tipos de fontes tipográficas para tipos de resoluç!es de tela e impressão.
"ntrodução ao design grá#ico A história do design gráfico, desde as origens da humanidade até o aparecimento da web e da Internet.
Por Luciano Moreno
5 de 163
;ublicado em% $)??/* < $otos
# ser humano sempre te$e a necessidade de se comunicar com seus semelhantes, até tal ponto ue podemos afirmar ue se o homem é o ser mais a$ançado da nature-a, é de$ido, em grande parte 6 facilidade ue te$e para fa-er part"cipe aos demais de suas idéias de uma forma ou de outra. As primeiras formas comunicati$as foram mediante elementos $isuais. Antes de desen$ol$erem capacidades de expressão mediante a linguagem falada, os homens utili-aram seu corpo para comunicar aos demais estados de nimo, deseos e inuietudes atra$és de intenç!es, express!es e signos, ue com o tempo aduiriram a condição de =linguagem=, ao con$erter2se em modelos de comunicação. /mbora posteriormente a linguagem falada passara a ser o meio de intercmbio de informação 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 como meios de =modelar= mensagens $isuais, como demonstram uma infinidade de desenhos em pedra e pinturas rupestres ue chegaram aos nossos dias, nas uais representam elementos naturais, ati$idades cotidianas e diferentes signos artificiais com significado próprio. :intura rupestre @Cova de 0ltamira, ;span1aA
A representação de idéias mediante gráficos te$e seu maior a$ance com o aparecimento das linguagens escritas, ue permitiram expressar cadeias estruturadas de pensamentos mediante um conunto de elementos gráficos de significado próprio dispostos segundo uma estrutura definida, capa-es de transmitir mensagens entend"$eis pela comunidade. /stas linguagens escritas esta$am baseadas na representação de elementos tomados da nature-a, aos ue se atribu"a uma interpretação particular, e também um conunto artificial de s"mbolos in$entados% os alfabetos. &ada um destes signos isolados tinha 6s $e-es um significado incerto, porém unido a outros, permitiam representar graficamente a linguagem falada por cada po$o ou cultura.
6 de 163 Bravura em pedra com 1ieroglí#ico @;gitoA
&omo suporte f"sico, foi utili-ada inicialmente a pedra, porém, rapidamente se buscaram outros tipos de materiais ue permitiram uma maior facilidade de uso e uma maior portabilidade, como os papiros ou os pergaminhos. :apiro dos mortos
+ambém se começaram a usar diferentes tipos de pigmentos naturais para dar um maior colorido e expressão 6s obras escritas e composiç!es art"sticas, e a dispor os diferentes elementos textuais e gráficos de forma harmoniosa e euilibrada, á ue se apreciou ue com isso se ganha$a poder comunicati$o, clare-a e bele-a. Isto pode ser apreciado na confecção dos incunábulo reali-ados nos monastérios, nos ue se obser$a de forma clara a importncia da =>#(?A= @design para transmitir uma mensagem.
7 de 163 "ncunábulo medieval
;osteriormente, Bohann )utenberg in$entou a imprensa, artefato capa- de reprodu-ir em grandes uantidades e de forma c5moda um original, o ue tornou poss"$el ue os documentos impressos e a mensagem ue continham fossem acess"$eis a um grande n3mero de pessoas. :rimeiro livro impresso
Cogo começaram a aparecer imprensas ue reprodu-iam todo tipo de obras, cada $emais elaboradas. &omeçaram2se a usar no$os materiais como suporte, no$as tintas e no$os tipos de letras, originando o aparecimento de profissionais especiali-ados em seu maneo, os tipógrafos e os impressores, tal$e- os primeiros designers gráficos como tal, á se encarrega$am de compor e construir os diferentes elementos ue formariam uma obra de forma ue resultasse lógica, clara, harmoniosa e bela. #utro grande impulsor do desen$ol$imento do design gráfico foi a (e$olução Industrial. 8urgiram as fábricas e a economia de mercado, um grande n3mero de pessoas se deslocou 6s cidades para trabalhar, aumentaram as loas e os comércios e começou a concorr0ncia entre empresas por se tornarem uma parte do mercado. &om isso, apareceu e se desen$ol$eu uma no$a técnica comercial, a publicidade, encarregada de
8 de 163
fa-er chegar aos consumidores mensagens espec"ficas ue lhes con$encessem de ue um produto dado era melhor ue outros análogos. Carta8 publicitário
# desen$ol$imento da publicidade trouxe consigo um desen$ol$imento paralelo do design gráfico e dos suportes de comunicação. 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 psicológicos, com desenhos cada $e- mais elaborados, ue chega$a ao maior n3mero poss"$el de pessoas. # como se transmitia a informação chegou inclusi$e a superar em importncia 6 mesma informação transmitida. 1ão se trata$a á de apresentar mensagens $isuais belas, e sim, efeti$as, ue $endiam, e para isso, não du$idaram em reali-ar grandes in$estimentos, tornando poss"$el um grande a$ance nas técnicas de design e no aparecimento de profissionais dedicados exclusi$amente a desen$ol$e2las e coloca2las em prática% os designers gráficos. 1o século EE, surgiram os computadores, máuinas em um princ"pio destinadas a um grupo redu-ido de técnicos e especialistas, mas ue pouco a pouco foram ganhando popularidade e ue com o aparecimento do computador pessoal se estenderam a todos os ambientes e grupos sociais. # computador é 3til porue permite o uso de programas informáticos capa-es de reali-ar uma infinidade de tarefas. ;orém, estes programas t0m uma estrutura interna muito complexa, ue na maioria das $e-es $ai mais pra lá dos conhecimentos ue possuem os usuários dos mesmos. Isto deu lugar 6 introdução de uns elementos intermediários, denominados =Interfaces de Usuário=, cua missão era isolar o usuário das consideraç!es técnicas e processos internos dos programas, permitindo2lhes reali-ar tarefas com eles por meio de uma =linguagem= intermediária, mais fácil de ser entendida pelo usuário. "nter#ace de usuário em modo teto
9 de 163
F princ"pio, estes programas se manea$am de forma textual, mediante comandos cr"pticos, ue somente =experts= na matéria podiam entender. ;orém, com o acesso 6 informática de todo tipo de pessoas tornou2se necessário uma simplificação no maneo das aplicaç!es, surgindo o conceito de =Interface )ráfica de Usuário= em toda sua extensão, 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 ao usuário médio reali-ar as tarefas próprias de cada programa concreto. "nter#ace Brá#ica de Usuário
# trabalho de desenhar estas I)U correspondeu inicialmente aos próprios programadores ue desen$ol$eram as aplicaç!es, porém logo foi $isto ue seu conceito de interface de usuário não correspondia com a ue necessita$am os usuários finais. >alta$am profissionais de design ue se encarregariam de conceber as interfaces, porém os designers gráficos clássicos não esta$am acostumados a construir obras com capacidades de interação 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 páginas web, tornou2se ainda mais patente a defasagem dos designers gráficos com o no$o meio. >alta$a agora desenhar e construir interfaces de usuário muito especiais, condicionadas a peuenos tamanhos de arui$o e a um meio concreto de apresentação, os na$egadores web, ue impunham sérias limitaç!es ao design, ue necessita$am sistemas de na$egação entre páginas simples e entend"$eis. "nter#ace web
10 de 163
8e a isto somamos a necessidade dos criadores de interfaces web de conhecer a fundo diferentes linguagens de marcas e de programação @D+?C, Ba$a8cript, 'D+?C, é e$idente ue era necessária o aparecimento de um no$o profissional, o webdesigner, h"brido entre o designer gráfico clássico e o programador de aplicaç!es para Internet. http://www.criarweb.com/artigos/711.php
Design grá#ico Uma aproxima!o ao design gráfico 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
;ublicado em% $)??/* G $otos
;odemos definir o design gráfico como o processo de programar, proetar, coordenar, selecionar e organi-ar uma série de elementos para produ-ir obetos $isuais destinados a comunicar mensagens espec"ficas a determinados grupos. A função principal do design gráfico será então transmitir uma informação determinada por meio de composiç!es gráficas, ue chegam ao p3blico destinatário atra$és de diferentes suportes, como folhetos, carta-es, tr"pticos, etc. # design gráfico busca transmitir as idéias essenciais da mensagem de forma clara e direta, usando para isso diferentes elementos gráficos ue d0em forma 6 mensagem e o façam facilmente entend"$el pelos destinatários do mesmo. # design gráfico não significa criar um desenho, uma imagem, uma ilustração, uma fotografia. 4 algo mais ue a soma de todos esses elementos, embora para conseguir comunicar $isualmente uma mensagem de forma efeti$a o designer de$e conhecer a fundo os diferentes recursos gráficos a sua disposição e ter a imaginação, a experi0ncia, o bom gosto e o sentido comum necessários para combina2los de forma adeuada. # resultado final de um design gráfico denomina2se grafismo, e é uma unidade por si mesma, embora estea composto por uma infinidade de elementos diferentes. ;odemos estabelecer uma analogia entre um grafismo e um prato de co-inha. Ambos estão compostos por diferentes elementos indi$iduais ue, unidos corretamente e com sabedoria, comp!em uma obra final 3nica e definida ue $ai mais além da soma das partes ue a formam.
11 de 163 ormas, cores e tetos em um gra#ismo
+oda obra de comunicação $isual nasce da necessidade de transmitir uma mensagem espec"fica. Um designer gráfico não é um criador de formas, e sim um criador de comunicaç!es, um profissional ue mediante um método espec"fico @design constrói mensagens @comunicação com meios $isuais @grafismos. 1ão é o criador da mensagem, e sim seu intérprete. # principal componente de toda composição gráfica é então a mensagem a interpretar, a informação ue se desea fa-er chegar ao destinatário atra$és do grafismo. /sta informação de$e2se representar por meio de diferentes elementos gráficos, ue podem ser muitos e $ariados, embora os mais comuns seam% •
•
•
• • • •
/lementos gráficos simples% pontos e linhas de todo tipo @li$res, retas, uebradas cur$as, etc. /lementos geométricos, 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. )ráficos $ários% logotipos, icones, etc. Ilustraç!es >otografias Hualuer outro elemento $isual apto para comunicar uma mensagem.
12 de 163 Um desen1o limpo
/stes elementos básicos combinam2se uns com outros em um grafismo, e desta combinação surge um resultado final no ual t0m muita importncia uma série de conceitos próprios do design gráfico, entre os uais se destacam% •
•
•
•
•
•
•
•
•
#s agrupamentos% conuntos de elementos relacionados mediante proximidade, semelhança, continuidade ou simetrias. A #orma% forma de cada elemento gráfico 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, mudanças de cor ou mudanças de saturação. A locali8ação% lugar ue ocupa cada elemento gráfico ou agrupamento deles no espaço do grafismo. # taman1o% tamanho relati$o de cada elemento gráfico com respeito aos ue lhe rodeiam. /scalas. A cor cor de cada elemento indi$idual, cores de cada agrupamento de elementos, conunto total de cores usado em um grafismo, disposição relati$a dos elementos com cor e harmonia entre cores. # contraste% intensidade de $isuali-ação de cada elemento com relação aos ue lhe rodeiam e ao grafismo completo. # equilíbrio% cada grafismo implica um sistema de refer0ncia espacial ue consegue um n"$el de euil"brio maior ou menor. A simetria % disposição espacial regular e euilibrada dos elementos ue formam a composição gráfica.
#s diferentes elementos de um grafismo são percebidos pelo destinatário de acordo com a influ0ncia ue exercem cada um destes conceitos a n"$el indi$idual, grupal e total. ;orém, a união de todos eles, a obra gráfica, é uma entidade comunicati$a indi$idual e completa, carregada de complexos elementos humanos associados com a linguagem, a experi0ncia, a idade, a aprendi-agem, a educação e a memória.
http://www.criarweb.com/artigos/712.php
13 de 163
Design grá#ico na web & design web 'ai mais a"ém do design tradiciona", pois existem muitos "imitadores re"acionados com o meio onde se apresentam as páginas( Internet. )onheceremos as caracter%sticas fundamentais do design na web. Por Luciano Moreno
;ublicado em% $)??/* G $otos
# design gráfico de uma página 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 páginas web t0m ue ser baixadas de um ser$idor web remoto atra$és da Internet, pelo ual a largura de banda das conex!es dos usuários $em a ser um fator cha$e na $elocidade de $isuali-ação. A maioria dos usuários se conecta ainda na Internet com um modem, com $elocidades teóricas de < Jbps, embora na prática não supera os KL2K< Jbps no melhor dos casos. #s elementos gráficos, á tendo formato de mapa de bits ou $etorial, costumam ser tradu-idos em arui$os de bastante peso, dependendo do tamanho da imagem e do formato em ue se sal$e. Isto origina ue as páginas ue contém em seu desenho muitas imagens, ou poucas porém de grande tamanho, demorem muito tempo para ser baixadas desde o ser$idor web e apresentadas na anela do computador do usuário, ue não costuma ser muito paciente. /studos reali-ados demonstram ue o tempo máximo de paci0ncia de uma pessoa ue espera o download de uma página costuma ser de uns KL segundos, passados os uais prefere abandonar nosso website e buscar outro mais rápido. ;ortanto, o n3mero de elementos gráficos ue podemos introdu-ir em uma página web fica bastante limitado, tendo ue buscar alternati$as mediante o uso imaginati$o de fontes e cores. #utro aspecto a ter em conta é ue as páginas web são $isuali-adas em umas aplicaç!es espec"ficas, os na$egadores web, ue imp!em grandes limitaç!es ao design das mesmas. A anela de um na$egador é eminentemente retangular, com umas medidas concretas @dadas pela resolução empregada pelo usuário em seu monitor e com umas capacidades de interpretação de cores ue $ariam muito segundo o computador usado, o sistema operacional, o monitor e o cartão gráfico. /stes fatores imp!em fortes limitaç!es ao webdesigner, ue de$e buscar sempre ue suas páginas possam ser $isuali-adas corretamente pelo maior n3mero de usuários.
14 de 163 Design de um #ormulário web
/m segundo lugar, os na$egadores existentes no mercado t0m uma forma particular de apresentar o conte3do das páginas. Internet /xplorer interpreta em muitas ocasi!es uma página web de forma muito diferente a 1etscape 1a$igator Mx, e este por sua $e- o fade forma diferente a 1etscape 1a$igator x. ;ara tentar sol$er estas diferenças, o webdesigner de$e trabalhar com $ários na$egadores ao mesmo tempo, desenhando suas páginas de tal forma ue a interpretação delas sea parecida em todos, o ue imp!e no$as limitaç!es ao desenho. ;or outro lado, uma página web não é um design gráfico estático, e sim ue contém diferentes elementos ue t0m a capacidade de interagir com o usuário, como menus de na$egação, linNs, formulários, etc. Além disso, uma página isolada não existe, porue faparte de um conunto de páginas inter2relacionadas entre s" @o website, ue de$em apresentar2se ao usuário com o mesmo =estilo=, embora sua funcionalidade sea muito diferente. A isto há ue somar ue as páginas desenhadas de$em logo ser constru"das em uma linguagem espec"fica, o D+?C, ue por si mesmo é muito limitado, o ue fa- com ue o webdesigner tenha ue estar sempre pensando se a interface ue está desenhando graficamente $ai poder ser logo constru"da. ;or 3ltimo, uma página web costuma ocultar, na maioria dos casos, uma série de processos complexos ue se executam sem ue o usuário sea consciente deles @execução de códigos de linguagens de programação tanto em cliente como em ser$idor, acesso ao banco de dados em ser$idores remotos, etc., processos ue adicionam tempo 6 apresentação das páginas e ue muitas $e-es costumam afetar de forma importante o desenho destas, á ue designer não sabe de antemão ue conte3dos concretos $ão ter. (esumindo% o webdesign $ai mais além do design gráfico, ao influir nele uma infinidade
de fatores ue limitam as possibilidades do desenho, porém também outros ue
15 de 163
acrescentam interati$idade e funcionalidades a uma página web ue um carta-, folheto ou re$ista não t0m. http://www.criarweb.com/artigos/713.php
Componentes grá#icos de um computador *escri!o dos principais componentes gráficos de um computador ( & cart!o gráfico e o monitor. Por Luciano Moreno
;ublicado em% %?$?/* G $otos
#s principais componentes de um computador encarregados de interpretar e apresentar as cores são o cartão gráfico e o monitor. # cartão grá#ico ou de $"deo é o componente hardware encarregado de processar os dados gráficos ue en$ia o processador, interpreta2los e codifica2los em $oltagens adeuadas ue são en$iados logo ao monitor para sua apresentação em tela. Cartão grá#ico
/xistem diferentes modelos de cartão gráfico, ue $ão desde os mais simples, inclu"dos na placa base, até os mais a$ançados, $erdadeiros mini2computadores, com seu próprio processador, memória, bus, etc. #s monitores são os dispositi$os encarregados de apresentar ao usuário as interfaces das aplicaç!es ue se executam no computador. +odos sabemos como é um monitor por fora, á ue estamos acostumados aos monitores das tele$is!es, algo tão comum em nossas casas. Interiormente, os monitores $ariam uns dos outros em função de sua ualidade, da forma de manear de $oltagens e da tecnologia gráfica empregada. 9onitor C(6
16 de 163
#s monitores mais comuns são os &(+ ou de raios catódicos, formados por um tubo cuo interior foi feito $a-io, em um dos extremos se situam tr0s canh!es de elétrons, um por cada cor primária, e no outro em uma tela de $idro, cua parte externa é a ue $0 o usuário. 6ubo de raios cat=dicos de um monitor C(6
#s elétrons gerados nos canh!es por auecimento são impulsionados até a parte interna da tela, ue se encontra recoberta por peuenos grupos de fósforo pigmentado em cada uma das tr0s cores primárias @$ermelho, $erde e a-ul. /stes grupos recebem o nome de tr"adas, e se correspondem com um ponto da tela, denominado p"xel, ue aparecerá de uma cor ou de outra segundo a intensidade dos elétrons ue chegarem em cada canhão. Uma caracter"stica importante é o passo de ponto @dot pitch, distncia diagonal entre dois 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 resolução máxima distingu"$el em uma tela de OLLxLL é de PQ ppp e em uma de KLQMxPO é de RG ppp. /stes são $alores teóricos e na prática são algo maiores. :asso de ponto e píel
17 de 163
8egundo a resolução empregada, os p"xels @unidade m"nima de informação são representados em tela por uma ou mais tr"adas, com o ue a adaptação 6s diferentes resoluç!es é muito boa. &om obeti$o de ue os elétrons cheguem de forma ordenada e causem impacto ustamente no ponto adeuado, entre a tela e os canh!es, situa2se uma máscara ou rede ue filtra os elétrons e os dirige a seus pontos destino de forma adeuada. A representação de uma imagem em tela se reali-a mediante $arreduras dos raios de elétrons, ue percorrem toda a tela de esuerda 6 direita e de cima para baixo. A $elocidade com a ue se reali-a esta operação 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 tela de configuração do monitor, a ual se acessa em sistemas Tindows mediante as seleç!es% Iniciar ;ainel de control +ela &onfiguração #pç!es a$ançadas ?onitor +ambém podemos mudar nesta tela a freS0ncia de refresh, porém antes de fa-e2lo é aconselhá$el consultar o manual do monitor, á ue uma freS0ncia incorreta pode ser bastante preudicial. 9onitor ECD
#utro tipo de monitore é o C&' ou de cristal l"uido, ue se diferencia dos anteriores porue nele as tr"adas estão formadas por cristal l"uido ao in$és de fósforo pigmentado, e os elétrons são guiados por polari-ação magnética. Ademais, os monitores C&' trabalham com uma trama de p"xels concreta, sendo fixo o tamanho de cada um, portanto ao mudar uma resolução inferior podem ficar franas de p"xels desati$adas. 8ea ual for o tipo de cartão gráfico e monitor usado, é fundamental ter instalados e atuali-ados os dri$ers próprios destes componentes. Um driver é um conunto de bibliotecas de software espec"ficas encarregadas de configurar e controlar os dispositi$os de hardware. &ada componente necessita para funcionar bem os dri$ers adeuados, ue geralmente $0m unto com este em um disuete ou em um &'. &om o a$anço das funcionalidades dos sistemas operacionais e dos demais componentes de software e hardware das máuinas informáticas, torna2se necessário uma atuali-ação constante dos dri$ers dos monitores e cart!es de $"deo.
18 de 163
/stas $ers!es atuali-adas costumam ser oferecidas pelos diferentes fabricantes em seus web 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 máuina, com o obeti$o de não perder capacidades e de e$itar incompatibilidades com os no$os sistemas operacionais. 8e ti$ermos instalado um cartão gráfico em nosso computador, geralmente os dri$ers desta @controlador são os responsá$eis de manear de forma adeuada o monitor. ;ara acessar 6s propriedades do controlador, basta seguir a rota% Iniciar ;ainel de controle +ela &onfiguração #pç!es a$ançadas ?onitor ;ropriedades &ontrolador Atra$és desta anela podemos $er o tipo de controlador instalado e se está funcionando bem ou se tem algum problema. +ambém atuali-a2lo, para o ue for necessário ter pre$iamente nos no$os dri$ers, á ue teremos ue indicar sua locali-ação em nossos discos r"gidos. Uma consideração importante% há ue estar certo de ue o dri$er ue iremos instalar se corresponde com o de nosso cartão gráfico ou monitor, á ue um dri$er inadeuado pode originar um mal funcionamento dos componentes gráficos.
http://www.criarweb.com/artigos/725.php
(esolução de tela )onsidera$es re"ati'as aos distintos tipos de te"a #ue os 'isitantes possam ter 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 páginas web são os na$egadores @browsers, entre os uais, cabe destacar por sua importncia e difusão, Internet /xplorer, 1etscape 1a$igator, #pera e ?o-illa >irefox. A interface de um na$egador, em seu modo padrão, apresenta ao usuário uma ou mais barras superiores @de menus, de endereços, etc., uma barra inferior @a barra de estado e um espaço principal, a anela, na ual são apresentadas as páginas web. A forma desta anela é sempre retangular, porém seu tamanho $aria, dependendo do monitor e do cartão gráfico. ;odemos falar de dois tamanhos de tela diferentes% •
•
6aman1o absoluto% é o tamanho =real= da anela do monitor, medido
geralmente em polegadas. 'epende do monitor. (esolução ou taman1o relativo % $em determinado pelo n3mero de pixels ue se mostram na anela do monitor, sendo o p"xel a unidade m"nima de informação ue pode se apresentar em tela, de forma geralmente retangular. 'epende do cartão gráfico.
19 de 163
# tamanho absoluto costuma se expressar em polegadas de diagonal @K polegada V Q<,M mm. # mais comum atualmente é o de KPWW em computadores de mesa, embora ainda existam bastantes máuinas antigas com monitores de K
KM= 2 K<=% (esolução máxima apreciá$el% OLLxLL KP=% (esolução máxima apreciá$el% OLLxLL ou KLQMxPO KRWW e QK=% A partir de KLQM x PO
As poss"$eis resoluç!es de trabalho de uma máuina dependem, sobretudo da ualidade do monitor e do cartão gráfico do computador, e se configuram, em sistemas operacionais Tindows, clicando com o botão direito do mouse sobre o escritório, selecionando a opção ;ropriedades e acessando 6 aba &onfiguração, ou também atra$és de Iniciar ;ainel de controle 7isuali-ação. A importncia da resolução de tela sobre a forma de ser $isuali-adas as páginas web na anela do na$egador é muito importante. A maior resolução se disp!e de mais pontos de informação para apresentar os elementos na tela, porém estes pontos são menores, com o ual os elementos da interface @textos, imagens, obetos de formulário, etc. se $0em menores. 6aman1o de página e resoluç4es
8e desenhamos uma página para uma resolução dada, ocupando toda a anela do na$egador, aueles usuários ue a $isuali-arem em resoluç!es menores não terão espaço na tela para conter toda a página, por conta disso se $eriam obrigados a usar as barras de deslocamento do na$egador. 8endo ao contrário, aueles usuários ue a $isuali-arem a resoluç!es maiores terão muito espaço na tela para tão pouca página, deixando assim bastante espaço $a-io, sem conte3dos. ;ara solucionar estas diferenças, o normal é ue se desenhem as páginas web para uma resolução base, geralmente a mais usada na atualidade pela maioria @OLLxLL, e se construam internamente mediante tabelas ou camadas de tamanhos relati$os, com
20 de 163
larguras definidas em X, com o ual se consegue ue ao ser $isuali-adas em monitores de mais resolução se =abram=, ocupando todo o espaço de tela dispon"$el. #s problemas ue t0m este sistema são ue não dá suporte aos usuários ue utili-am resoluç!es menores e ue, no caso de resoluç!es maiores, o design da página poderá ser $isto seriamente afetado ao modificar seus elementos das dimens!es originais. #utra possibilidade é proetar toda a página dentro de um container2pai @uma tabela ou camada e atribuir a este um alinhamento centrali-ado, com o ual a página ficaria no centro da tela se se usa uma resolução maior ue a do desenho.
http://www.criarweb.com/artigos/739.php
Cores em um computador )omo traba"ham os computadores para codificar uma cor. & formato +-. Por Luciano Moreno
;ublicado em% $/?%?/* 7alori-e este artigo% G $otos
# olho humano pode distinguir aproximadamente entre P e KL milh!es de cores. 'e$ido a isto a $ista é para nós o principal sentido ue nos une com o exterior, de tal forma ue sobre OLX da informação ue recebemos do mundo exterior é $isual. ;intores e designers gráficos utili-am esta capacidade humana de apreciar cores para criar obras ue aprofundem na alma e ue inspirem sentimentos nos seres ue as contemplam. ;orém, o ue podemos fa-er uando de$emos nos expressar com um n3mero limitado de coresY #s computadores trabalham com tr0s cores básicas, a partir das uais constroem todas as demais, mediante um processo de mistura por unidades de ecrã, denominadas pixels. /stas cores são o $ermelho, o a-ul e o $erde, e o sistema definido é conhecido como sistema ()* @(ed, )reen, *lue. &ada pixel tem reser$ada uma posição na memória do computador para arma-enar a informação sobre a cor ue de$e apresentar. #s bits de profundidade de cor marcam uantos bits de informação dispomos para arma-enar o n3mero da cor associada segundo a paleta usada. &om esta informação, o cartão gráfico do computador gera uns sinais de $oltagem adeuados para representar a correspondente cor no monitor. Huanto mais bits por pixel, maior n3mero de $ariaç!es de uma cor primária podemos ter. ;ara Q< cores precisam2se O bits @sistema básico, para obter milhares de cores necessitamos K bits @cor de alta densidade e para obter milh!es de cores falta QM bits @cor $erdadeira. /xiste também outra profundidade de cor, GQ bits, porém com ela não se conseguem mais cores, e sim ue as ue usarmos se mostrarão mais rápido, á ue para o processador é mais fácil trabalhar com registros ue seam pot0ncia de Q @lembremos ue trabalha com n3meros binários.
21 de 163
Huanto maior for o n3mero de cores, maior será a uantidade de memória necessária para arma-ená2los e maiores os recursos necessários para processa2los. ;or este moti$o, os computadores antigos disp!em de paletas de poucas cores, normalmente Q<, por não ter capacidade para manear mais sem uma perda notá$el de prestaç!es. ;ara representar uma cor no sistema ()* utili-am2se duas formas de codificação diferentes, a decimal e a hexadecimal, correspondendo2se os diferentes $alores com a porcentagem de cada cor básica ue tem uma cor determinada. :orcentagens de cor e c=digos
;or exemplo, um $ermelho puro @KLLX de $ermelho, LX de $erde e LX de a-ul se expressaria como @Q<<,L,L em decimal, e como Z>>LLLL em hexadecimal @antes do código de uma cor em hexadecimal sempre situa2se um s"mbolo almofadinha. 'as Q< cores básicas, o próprio sistema operacional fica com ML para sua gestão interna, com o ual dispomos de QK cores. 'elas, KO correspondem2se com as gamas das cores primárias, correspondentes a tons de $ermelho, de a-ul e de $erde% Bamas de cores primários
/ o resto, as cores secundárias, são combinaç!es destas gamas de cores primárias%
22 de 163 Cores secundárias
8e usamos uma profundidade de cor de QM bits, correspondente a milh!es de cores, dispomos de uma ampla gama para trabalhar, porém sempre tendo em conta ue só serão compat"$eis as cores ue ti$erem sua eui$alente no sistema de Q< cores, ou sea, auelas nas ue cada cor primária $em definida por uma dupla de $alores iguais, de$endo estas ser LL,GG,,RR,&& ou >>. Huando usamos uma profundidade de cor de K bits dispomos de milhares de cores, porém o problema é ue de$ido 6 di$isão desta gama de cores, os $alores obtidos não se correspondem com os eui$alentes em Q< cores nem em milh!es de cores. ;or exemplo, ZGGRR é a mesma cor ue Q< e ue milh!es, mas não é igual ue o obtido com milhares de cores. &omo o código de uma cor dada pode ser dif"cil de lembrar, foi adotada uma lista de cores as uais foi colocado um nome representati$o no idioma ingl0s @red, [ellow, oli$e, etc., de tal forma ue os na$egadores modernos interpretam a mesma e a tradu-em internamente por seu $alor hexadecimal eui$alente. http://www.criarweb.com/artigos/751.php
Calibragem do monitor Uma composi!o gráfica pode ser 'ista com diferentes tona"idades dependendo da configura!o do monitor . emos #ue ca"ibrar o monitor para #ue o aspecto de nossa obra se/a o mesmo em todos os computadores. Por Luciano Moreno
;ublicado em% ?&?/* 7alori-e este artigo% G $otos
As composiç!es gráficas podem aparecer de maneira diferente nos distintos monitores, de$ido principalmente 6 diferença nos parmetros ue definem a ualidade e as caracter"sticas luminosas e cromáticas de cada um deles. Isto pode originar, por exemplo, ue ao reali-ar uma composição seamos nós mesmos os enganados, ao não corresponder 6s cores ue $emos em tela 6s reais ue estamos codificando no grafismo. #u ue o aspecto $isual de uma página web desenhada em um monitor mal configurado não corresponda com o ue logo $erão os usuários, com a conseguinte perda de controle e de ualidade ue isso sup!e. ;ara e$itar estes erros é preciso utili-ar uns $alores padr!es dos parmetros de configuração, ue tornam dispon"$el ue o aspecto de uma obra gráfica sea o mesmo em ualuer computador configurado segundo os mesmos $alores. /stes $alores costumam se com os ue tra-em um monitor ao sair de fábrica, e a recuperação dos mesmos recebe o nome de calibragem. A calibragem é o processo de auste da configuração da con$ersão de cor do monitor a um n"$el padrão, de forma ue a imagem se apresente de maneira igual em diferentes monitores.
23 de 163
# método mais simples de calibragem passa pelo uso de imagens =cartas de auste=, similares 6s ue apareciam no tele$isor antes de começar a emissão. 8ão imagens formadas por diferentes linhas de cores, umas finas e outras mais grossas, ue se podem tomar como refer0ncia para reali-ar um auste totalmente manual, usando para isso os controles ue possui o monitor. 4 um método pouco confiá$el, á ue os austes são totalmente subeti$os.
#utro método de calibragem mais a$ançado são as ferramentas de gestão da cor ue facilitam certos programas de aplicação, como Adobe ;hotoshop, ue inclui uma ferramenta básica, denominada Adobe )amma, ue pode ser utili-ada para eliminar tonalidades de cor e padroni-ar a apresentação das imagens. Acessa2se a esta ferramenta atra$és do menu Auda Administração da cor Abrir Adobe )amma, com o ual acessamos a uma tela ue nos permite austar os $alores diretamente ou por meio de um assistente. Uma $e- calibrado o monitor, os $alores podem ser arma-enados em um arui$o para as sucessi$as re2configuraç!es.
24 de 163 Calibrador de monitor
;orém sem d3$ida a melhor forma de calibrar um monitor é utili-ar o hardware espec"fico para isso. # funcionamento $aria segundo o dispositi$o usado. Alguns se conectam diretamente ao monitor para coleta de dados binários, permitindo um auste indi$idual direto de cada um dos canh!es. #utros se baseiam em situar frente 6 tela do monitor diferentes medidores @calor"metros, color"metros, etc. para colher dados, fornecendo uma leitura dos $alores atuais e proporcionando os $alores id5neos de configuração. 8ea ual for o método escolhido, para uma correta configuração do monitor de$eremos austar uma série de parmetros, entre os uais se incluem os seguintes% Fril1o
+ambém chamado, luminosidade, define a relação não linear entre a tensão de entrada e a luminancia de sa"da, é intr"nseco da f"sica do ambiente dos canh!es de elétrons e não depende da iluminação ambiente. 'e outra forma, o brilho é a intensidade de lu- emitida sobre uma área espec"fica, pela ual as mudanças de brilho podem escurecer ou clarear todo o conte3do da tela. #s monitores tradicionais @&(+ geram aproximadamente de OL a KLL cd\m ] @candela por metro uadrado. 1o caso de monitores C&', não se admitem $alores inferiores a K
8e o $alor do brilho em um monitor é baixo, as colores luminosas se escureceram, parecendo cin-as. Ao contrário, se o brilho for ele$ado, serão as cores escuras as ue perdem profundidade, tornando2se cin-as.
25 de 163 Contraste
# contraste é a relação existente entre a intensidade luminosa do ponto mais claro e o mais escuro de uma imagem. Huanto maior for o $alor de contraste, melhor será a legibilidade. 8e ti$ermos uma fotografia com um ponto branco e outro negro e estes mesmos esti$erem em um monitor, geralmente o contraste no monitor @KPL%K é superior ao ue se dá em uma fotografia @KLL%K, mas se o ambiente esti$er muito iluminado, o ponto negro deixa de ser negro e a relação de contraste pode baixar bastante @hasta
;ara uma correta calibragem de contraste há ue buscar $alores de KLL%K, ou sea, ue o ponto branco tenha KLL $e-es mais luminosidade ue o ponto negro @$alor próximo a Q,Q. Cor
A cor em um monitor é produ-ida pela soma de diferentes intensidades das cores básicas @$ermelho, $erde e a-ul, mediante um processo denominado adição de cores. A calibragem da cor consiste no processo de austar a cor de um dispositi$o a um padrão estabelecido para conseguir ue as cores de uma composição gráfica se apreciem igual em todos os monitores calibrados. 0Gustes da tonalidade
'e$erão se austar os diferentes parmetros ue definem as ualidades das cores, como tom, saturação, gama, euil"brio de cores primárias, etc. (esumindo% 4 muito importante ue na hora de desenhar nossas páginas web e seus
elementos gráficos tenhamos nosso monitor bem configurado, á ue em caso contrário, os resultados ue obtenhamos não serão reais, produ-indo diferenças apreciá$eis entre o ue $0 os usuários em seus computadores e o trabalho ue ti$ermos desen$ol$ido, com a conseguinte perda de controle e de ualidade ue isso implica. http://www.criarweb.com/artigos/767.php
26 de 163
ormas básicas em design grá#ico A "inguagem 'isua" atra'és de grafismos pode se descompor em entidades básicas, onde cada uma de"as tem por si mesma um significado próprio, porém unidas de diferentes formas podem constituir e"ementos comunicati'os distintos. Por Luciano Moreno
;ublicado em% /?'?/* 7alori-e este artigo% Q $otos
/stamos acostumados a nos comunicar com nossos semelhantes mediante a linguagem falada, $erbal, formada por uma série de elementos básicos @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 em entidades básicas, onde cada uma delas tem por si mesma um significado próprio, porém unidas de diferentes formas podem constituir elementos comunicati$os distintos. /stas entidades gráficas constituem a substncia básica do ue $emos. ;ortanto, são muito importantes e todo designer de$e conhece2las e manea2las perfeitamente. As formas básicas do design gráfico são poucas% o ponto, a linha e o contorno. ;orém, é a matéria2prima de toda informação $isual ue contribui para uma composição. &ada uma delas possui um conunto de caracter"sticas próprias ue as modificam e condicionam, entre as uais destacam2se% orma% definida por disposição geométrica. A forma de uma -ona ou contorno $ai nos
permitir reconhece2las como representaç!es de obetos reais ou imaginários.
Direção% proeção plana ou espacial de uma forma, continuação imaginária da mesma
mesmo depois de sua finali-ação f"sica. ;ode ser hori-ontal, $ertical ou inclinada em diferentes graus.
27 de 163
Cor% tal$e- a mais importante e e$idente, pode imprimir um forte caráter e dinamismo
aos elementos aos ue se aplica. +oda forma ou -ona terá em geral duas cores diferentes, o de seu contorno e o de sua parte interna, podendo se aplicar tanto cores puras como degrades de cores.
6etura% modificação ou $ariação da superf"cie dos materiais, ser$e para expressar
$isualmente as sensaç!es obtidas mediante o sentido do tato ou para representar um material dado. A textura está relacionada com a composição de uma substncia atra$és de $ariaç!es diminutas na superf"cie do material, e se consegue em uma composição gráfica mediante a repetição 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. #s
diferentes tamanhos das diferentes -onas modificam e definem as propriedades de cada uma delas.
28 de 163 Dimensão% capacidade tridimensional de um elemento ou -ona. A dimensão só existe no
espaço real tridimensional, porém se pode simular em uma composição gráfica plana mediante técnicas de perspecti$a, sombreado ou sobreposição. +ambém, mediante o uso de fotografias, ue introdu-em espaços tridimensionais na composição.
9ovimento% propriedade muito importante, ue aporta conotaç!es de dinamismo e
força. 1as obras gráficas puras não existe mo$imento real, porém sim, encontra2se impl"cito em certos elementos e se pode conseguir com certas técnicas ue enganam ao olho humano @design cinético, pintura cinética ou representando elementos ue realmente existem no mundo real.
;odemos introdu-ir nas páginas web animaç!es gráficas ue aportam sensaç!es de mo$imento muito maiores, como animaç!es >lash, gifs animados, camadas dinmicas, elementos de $"deo, etc.
http://www.criarweb.com/artigos/783.php
ponto & ponto é a unidade m%nima de informa!o 'isua", e está caracteri0ado por sua forma, tamanho, cor e "oca"i0a!o. Por Luciano Moreno
;ublicado em% *?'?/* 7alori-e este artigo% Q $otos
# ponto é a unidade m"nima de informação $isual, e está caracteri-ado por sua forma @geralmente circular, porém também pode ser retangular, como ocorre nos monitores, triangular ou uma mancha sem forma definida, por seu tamanho, por sua cor e pela locali-ação ue tenha dentro da composição gráfica.
29 de 163
As principais caracter"sticas do ponto são% • •
•
+em um grande poder de atração $isual, criando tensão sem direção. Huando se situam próximos dois pontos podem produ-ir sensaç!es de tensão ou de direção, criando na mente do espectador uma linha reta imaginária ue os une. 8e se situam diferentes pontos em prolongamento sugerem uma direção, um caminho, mais acentuado uanto mais próximos esteam os pontos entre si.
Huando se agrupam $ários pontos podem definir formas, contornos, tons ou cores @pensemos na pintura impressionista.
#s pontos isolados são pouco usado no web design. /ntretanto, as sucess!es de pontos próximos são um bom elemento para dirigir a atenção do $isitante, para guiar sua olhada a uma -ona concreta, para estabelecer relaç!es entre elementos ou para separar -onas da página. http://www.criarweb.com/artigos/797.php
0 lin1a A "inha é o e"emento básico de todo grafismo e um dos mais usados. +epresenta a forma de express!o mais simp"es e pura, porém também a mais din1mica e 'ariada. Por Luciano Moreno
;ublicado em% $/?)?/* 7alori-e este artigo% G $otos
A linha é o elemento básico de todo grafismo e um dos mais usados, tendo tanta importncia em um grafismo como a letra em um texto. (epresenta a forma de expressão mais simples e pura, porém também a mais dinmica e $ariada.
30 de 163
4 formada pela união de $ários pontos em sucessão, podendo se parecer 6 traetória seguida de um ponto em mo$imento, por ter muita energia e dinamismo. 8ua presença cria tensão e afeta ao resto de elementos próximos a ela. As principais propriedade da linha são% • • • • •
&ontém grande expressi$idade gráfica e muita energia. Huase sempre expressa dinamismo, mo$imento e direção. &ria tensão no espaço gráfico em ue se encontra. &ria separação de espaços no grafismo. A repetição de linhas próximas gera planos e texturas.
/m uma composição define direcionamento, ue estará mais acentuado uanto mais linhas paralelas hou$er. /sta ualidade pode ser usada para dirigir a atenção em uma direção 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 separação de planos, permitindo ao designer usa2la como elemento delimitador de n"$eis e áreas na composição.
As propriedades de uma linha $irão definidas pela sua grossura, sua longitude, sua orientação @direção com respeito 6 página, sua locali-ação @posição, sua forma @reta ou cur$a e sua cor. /stas propriedades se $erão afetadas também pelo n3mero de linhas ue hou$er na composição, sua proximidade e a orientação relati$a entre elas. A linha é considerada como tal enuanto a relação largura\comprimento não superar uma proporção determinada. Uma linha mais larga ue a metade de seu comprimento perde a expressão dinmica do traço e aduire a estática de uma superf"cie uadrada. A união sucessi$a de linhas forma um traço. # traços dão $olume aos obetos ue desenhamos e permitem representar simbolicamente obetos na composição, eliminando deles toda informação supérflua e deixando só o essencial.
31 de 163
A linha pode ter as bordas lisas ou denteadas, com extremidades retas, arredondadas ou em ponta. 8eu corpo pode ser sólido ou com textura, e sua direção pode ser cur$a ou reta. / cada uma destas caracter"sticas di$ersificará a forma em ue é interpretada uma linha pelo espectador. ;odemos considerar diferentes tipos de linhas, cada um dos uais tem suas próprias ualidades% Ein1a reta
'efine o caminho mais curto entre dois pontos. 4 pouco freSente na nature-a, onde predominam as linhas cur$as @o uni$erso em sua totalidade é cur$o, porém muito abundante no ambiente humano, ue necessita delas para dar estabilidade a suas criaç!es.
A linha reta hori-ontal expressa euil"brio, calma, euil"brio está$el. 1ão existe estabilidade sem uma reta hori-ontal de refer0ncia, uma linha de hori-onte, á ue nos mo$emos em um plano hori-ontal. As linhas retas hori-ontais são muito usadas nas páginas web, tanto ue a linguagem D+?C proporciona uma etiueta espec"fica para introdu-i2las, D(. Utili-am2se principalmente como elemento delimitador de blocos de conte3do em páginas de pouco conte3do gráfico, sendo con$eniente não apresenta2las com efeito tridimensional, e sim como uma simples linha plana @atributo noshade. A linha reta $ertical sugere ele$ação, mo$imento ascendente, ati$idade. +ambém expressa euil"brio, porém instá$el, como se esti$esse a ponto de cair. Isto pode se corrigir trabalhando as linhas $erticais com outras hori-ontais de apoio, ue lhes darão a estabilidade de ue carecem.
32 de 163
/m uma página web, as linhas retas $erticais podem ser usadas para separar colunas textuais ou blocos de conte3dos, assim como as linhas frontais, com uma cor ue destaue 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 contrário, expressa tensão, instabilidade, deseuil"brio. ;arecem ue estão a ponto de cair. 'entro das linhas inclinadas, a ue forma M<_ com a hori-ontal é a mais está$el e reconhec"$el. Ein1a curva
4 a linha mais li$re e a mais dinmica de todas, podendo sugerir desde um mo$imento perfeitamente definido até um mo$imento caótico, sem regras.
/stá bastante associada ao ser humano, ue escre$e e desenha uase sempre com linhas cur$as. As cur$as mais comumente usadas em design gráfico digital são as cur$as *é-ier. /ste tipo de cur$a foi desen$ol$ido por ;ierre *é-ier por encomenda da empresa (enault, ue busca$a uma fam"lia de cur$as representá$eis matemáticamente @são cur$as de terceiro grau ue permitiram representar as cur$aturas sua$es ue desea$am dar a seus automó$eis.
33 de 163
Uma cur$a *é-ier fica totalmente definida por uatro pontos caracter"sticos, os pontos inicial e final da cur$a e dois pontos de controle @maneadores ue definem sua forma. ;ara modificar sua forma, basta mudar de posição um de seus pontos de controle. 8ão cur$as de maneo pouco complexo e muito elegantes, com um desen$ol$imento muito sua$e, capa-es de se adaptar a uase ualuer forma imaginá$el, portanto são muito usadas para desenhar logotipos e "cones e para copiar ualuer figura. +ambém são enormemente $ersáteis, podendo adotar desde cur$aturas muito sua$es @uase linhas retas a cur$aturas muito fortes @cur$as complexas, passando por todos os $alores intermediários. ;odem, inclusi$e, mudar de c5nca$as a con$exas ao redor de um ponto.
1o desenho web, o uso de linhas cur$as isoladas está muito limitado. 4 mais comum encontra2las como partes integrantes de formas mais complexas, sendo 3teis, por exemplo, 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 página web é o efeito de escalado produ-ido ao não ser capa- o sistema gráfico dos computadores de representar com exatidão formas cur$as por meio de p"xels. 4 o t"pico efeito de =dentes de serra= ue aparece em todos os obetos com partes cur$as, efeito ue aumenta com o tamanho do obeto.
34 de 163
Uma solução a este problema $isual é incluir as linhas cur$as como imagens em formato web @)I>, B;), ;1), etc. e aplicar2lhes o processo de rastreado, dispon"$el em uase todas as aplicaç!es gráficas, por meio do ual se criam um ou mais p"xels entre as bordas da linha e o fundo, de uma cor intermediária entre elas. 6raço
Um traço é o elemento linear formado pela união sucessi$a de diferentes linhas. 4 tal$ea forma gráfica mais humana, a ue melhor representa nossa forma natural de desenhar.
Um traço herdará as propriedades das linhas ue o criam, existindo traços retos, cur$os ou mistos. http://www.criarweb.com/artigos/814.php
contorno & contorno é o ob/eto gráfico criado #uando o trao de uma "inha se une em um mesmo ponto. Por Luciano Moreno
;ublicado em% %?*?/* 7alori-e este artigo% Q $otos
;odemos definir o contorno como o obeto gráfico criado uando o traço de uma linha se une em um mesmo ponto. #u sea, uando uma linha continua, começa e acaba em um mesmo ponto.
35 de 163
+odo contorno delimita duas -onas, uma demarcada @o contorno e seu interior e outra infinita @o fundo, criando2se um sub2mundo gráfico particular em cada forma definida por cada contorno. A linha base de um contorno define a complexidade dessa e suas propriedades. Huando uma linha se fecha sobre ela mesma, o contorno criado determina um espaço interno, criando2se uma tensão entre este espaço e seus limites, outorgando 6 linha criadora um grande poder de atração $isual.
As ualidades gráficas de um contorno estarão definidas pelas linhas ue o criam e as propriedades destas. #s principais contornos são o uadrado, a circunfer0ncia e o tringulo, aos ue podemos acrescentar os contornos mistos e os orgnicos. http://www.criarweb.com/artigos/contorno.html
quadrado 2"ementos de desenho( o #uadrado. Por Luciano Moreno
;ublicado em% $)?*?/* 7alori-e este artigo% Q $otos
# uadrado é a figura geométrica formada por uatro linhas retas de mesma longitude, denominados lados, ue formam ngulos perfeitamente retos nos pontos de união entre elas @esuinas a RL_.
36 de 163
# uadrado é uma figura muito está$el e de caráter permanente, associada a conceitos como estabilidade, perman0ncia, honestidade, retidão, limpe-a, esmero e euil"brio. A figura deri$ada do uadrado por modificação de seus lados é o retngulo, de propriedades análogas ao uadrado, apesar de sugerir menos perfeição e estabilidade.
# uadrado expressa direcionamento hori-ontal e $ertical, refer0ncia primária com respeito ao euil"brio e o bem2estar. 4 menos proponente e mais neutro ue os retngulos, porém mais sólido. &on$ida a olhar seu centro e passear a olhada em espiral em $olta desse ponto.
#s retngulos hori-ontais aportam solide-, estabilidade, dão a sensação de ser dif"ceis de in$erter. Huando são de tamanho grande permitem ue o olhar do espectador passeie de um lado ao outro, em sentido hori-ontal.
#s retngulos $erticais, pelo contrário, dá a sensação de menos solide-, é menos está$el,
37 de 163
parece ue pode se in$erter a ualuer momento. 1eles, o olhar do espectador não pode passear de um lado ao outro, porém, pode mo$er2se $erticalmente, dando sensação de ele$ação, e é apto para representar aueles obetos ue na $erdade t0m uma forma ascendente.
#s uadrados e retngulos terão suas ualidades $isuais modificadas segundo sua forma, tamanho, cor do contorno e área interna, locali-ação, escala, etc. A proeção tridimensional do uadrado é o hexaedro ou o cubo, corpo geométrico muito associado 6s obras próprias do ser humano, como os edif"cios. #s retngulos são as formas mais naturais para um computador, á ue o monitor e as anelas dos sistemas operacionais gráficos são todos retngulos hori-ontais. Uma página web possui uma forma claramente retangular, definida pela anela do na$egador. Ademais, os elementos web @tabelas, camadas, animaç!es >lash, applets de Ba$a, etc. são de forma retangular. Isto fa- com ue os retngulos seam especialmente adeuados para seu uso nas páginas web, proporcionando euil"brio e estabilidade 6s mesmas.
/ntretanto, é con$eniente seguir uma série de pautas na hora de usar retngulos, a fim de e$itar a monotonia e o aspecto artificial de uma página uadriculada demais%
38 de 163
•
•
•
•
&ada retngulo de$e estar alinhado com os demais obetos da página ue lhe rodeiam. # tamanho do retngulo de$e ser maior ue o conte3do do mesmo, o suficiente como para ue este se apresente li$re, com espaçamentos con$enientes pelos uatro lados. 1ão usar nas tabelas bordas padroni-adas, ou sea, cin-as e com efeitos de rele$o. 8e forem usadas para separar logicamente registros, é melhor lhes atribuir uma borda fina @sobre K p"xel de uma cor ue contraste suficientemente com a borda, porém ue não sea chamati$a demais. 'e ualuer forma, é prefer"$el utili-ar outros métodos para obter a separação, como filas de duas cores alternati$as @piamas. 8e desear situar na página $ários retngulos de funcionalidade análoga @caso de elementos de um menu de na$egação, por exemplo, é prefer"$el posiciona2los em séries hori-ontais, á ue se perceberão mais como uma linha do ue como um conunto retangular.
A dure-a $isual dos retngulos pode2se sua$i-ar adicionando2lhes outros elementos ue os modifiuem em parte. Um exemplo disso, são as tabelas ou bot!es com esuinas arredondadas, ue rompem a monotonia da forma retangular.
#utra forma de compensar a rigide- das formas retangulares é combina2las na composição 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% /-?+?/* 7alori-e este artigo% Q $otos
A circunfer0ncia é um contorno continuamente cur$ado, cuos pontos estão todos na mesma distncia de um ponto central, chamado centro do c"rculo. A distncia constante de ualuer ponto da circunfer0ncia se denomina radio.
39 de 163
A circunfer0ncia representa a área ue contém e seu interior, denominada c"rculo, a forma mais enigmática de todas, considerada perfeita por nossos antepassados. 8ua direcionalidade é a cur$a, associada ao mo$imento, ao enuadramento, 6 repetição e ao calor.
A forma circular produ- um mo$imento de rotação e$idente, possui um grande $alor simbólico, especialmente seu centro, e tem conotaç!es psicológicas como proteção, inestabilidade, totalidade, mo$imento cont"nuo ou infinito. 4 t"pico representar também os espaços fechados, herméticos, com circunfer0ncias ou c"rculos. &ontornos deri$ados da circunfer0ncia são o o$al e o$alado, com ualidades parecidas, mas ue expressam ainda mais instabilidade e dinamismo, embora o mo$imento perfeito sea uma ualidade própria da circunfer0ncia. A proeção tridimensional da circunfer0ncia é a esfera, o corpo geométrico mais perfeito, o ue contém um maior $olume em um menor espaço, o ue define a forma tanto dos átomos como dos corpos celestes. A circunfer0ncia e o c"rculo são tal$e- os elementos geométricos mais perfeitos e está$eis, embora carregados de uma grande carga dinmica. As formas circulares são muito dif"cies de representar em uma página web, á ue todos os elementos ue nos facilita a linguagem D+?C são retangulares, embora aparentem não ser. Ademais, as formas cur$as se $isuali-am muito mal nos monitores, de$ido 6 interpretação gráfica 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 forma ue contém mais área no menor per"metro, á ue a maioria das $e-es interessa ao designer exatamente o contrário, redu-ir ao m"nimo a área e maximi-ar ao máximo o per"metro.
40 de 163
+al$e- a 3nica forma de incluir uma forma circular completa em uma página sea incluindo2a em uma imagem. ;orém, ualuer imagem é por si só retangular como obeto D+?C, o ue nos obrigará a desperdiciar todo o espaço compreendido entre o contorno circular e as bordas da imagem, aparecendo espaços sem conte3do não deseá$eis na maioria dos casos. /ste efeito negati$o pode2se atenuar incluindo dentro da imagem a forma circular e os demais obetos ue lhe rodeiam na composição e ue se encontram dentro dos limites do retngulo ue define a imagem, mas então, esses elementos serão estáticos, fixos, sem possibilidade de serem modificados se não for mudado todo o conte3do da imagem. Uma solução melhor é incluir a imagem ue contém o contorno circular @ou cur$o em geral como fundo da página ou de um elemento ue contenha a mesma @tabela, célula de tabela, parágrafo, camada, etc., o ue nos permitirá apresentar outros obetos D+?C ocupando espaços $a-ios ao redor da forma circular.
>ormas mais sutis e efeti$as de incluir cur$as em uma página podem ser recortando imagens em forma o$al ou circular, e inclusi$e simulando caminhos cur$os mediante elementos textuais ou gráficos dispostos sucessi$amente. http://www.criarweb.com/artigos/circ!n"erencia.html
Contornos mistos 2"ementos de design( contornos mistos, #ue s!o os #ue est!o compostos por 'ários tipos de contornos. Por Luciano Moreno
41 de 163
;ublicado em% $/?+?/* 7alori-e este artigo% Q $otos
?ediante combinaç!es dos elementos básicos e contornos anteriores, pode2se construir todas as formas imaginá$eis, cada uma das uais terá umas propriedades dependentes das partes ue a formam, de sua orientação, de seu tamanho, de espessura do traço limite, de sua cor e de sua locali-ação.
Dá ue ter em conta, em ualuer caso, ue o predom"nio da refer0ncia hori-ontal2 $ertical dá uma sensação de euil"brio, enuanto ue o dom"nio da direção diagonal aporta instabilidade.
#s contornos mistos são muito usados nas páginas web, as ue aportam $ariedade no design e definição de espaços de informação, rompendo a monotonia $isual das formas retangulares 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 células extremas de uma tabela ou como imagens completas em uma camada, sobre a ue se situa outra camada com o texto.
+ambém é poss"$el inclui2las como arui$os 8T> @?acromedia >lash, ue aportam grande definição 6s -onas cur$as, sem produ-ir efeitos de escala, al ser tratadas como gráficos $etoriais. # incon$eniente é então a atuali-ação dos conte3dos textuais, á ue para isso fa- falta acessar o arui$o >CA fonte do gráfico. http://www.criarweb.com/artigos/contornos#mistos.html
Contornos org3nicos 2"ementos de design( contornos org1nicos, #ue est!o formados por cur'as "i'res.
42 de 163 Por Luciano Moreno
;ublicado em% $-?+?/* 7alori-e este artigo% Q $otos
#s contornos orgnicos são aueles formados por cur$as li$res.
8ão 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 são utili-ados abundantemente em pintura e desenho art"stico, á ue são a base para representar figuras humanas, nature-a, paisagens, etc. /ntretanto, são muito dif"ceis de incluir em uma página web, tanto por aspectos técnicos @de$em se incrustar como imagens como por seu aspecto $isual, ue pode chocar com a nature-a própria de uma página, composição ordenada na ue predominam as formas retangulares. 1ão obstante, bem usados podem dar um toue natural ou humano 6 página.
Uma poss"$el solução, se desearmos introdu-ir em uma página contornos orgnicos, é adapta2los o máximo poss"$el a um contorno misto, transformando as cur$as li$res em
43 de 163
cur$as *é-ier, porç!es de circunfer0ncias ou linhas retas. #utra solução é introdu-ir fotografias ou ilustraç!es ue os contenham. http://www.criarweb.com/artigos/contornos#organicos.html
design equilibrado. "ntrodução 2studo das regras básicas do design gráfico. 4!o existe uma fórmu"a #ue d3 um design infa"%'e", porém sim umas existem umas regras básicas.
Por Luciano Moreno
;ublicado em% /'?-?/* 7alori-e este artigo% G $otos
;odemos definir o design de uma composição gráfica como a adeuação de diferentes elementos gráficos pre$iamente selecionados dentro de um espaço $isual, combinando2 os de tal forma ue todos eles possam contribuir um significado 6 mesma, conseguindo o conunto transmitir uma mensagem clara ao espectador.
# design gráfico há de ter em conta os aspectos psicológicos da percepção humana e as significaç!es culturais ue possam ter certos elementos, escolhendo estes de forma ue cada um deles tenha um poru0 na composição e buscando um euil"brio lógico entre as sensaç!es $isuais e a informação oferecida. # mais importante de toda composição é a mensagem ue está nas entrelinhas. 4 trabalho do designer buscar a máxima eficácia comunicati$a, transmitindo essa mensagem por meio de uma composição ue cause impacto $isualmente ao espectador e lhe torne recepti$o.
44 de 163
Agora também, sem uma disposição adeuada das formas, cores e agrupamentos, sem um euil"brio global na composição, a mensagem não chegará de forma adeuada ao espectador. 1ão existe um método mágico ue consiga uma composição bem2sucedida, mas sim ue existem umas regras básicas de design ue facilitam a transmissão de uma mensagem por meio de uma composição gráfica de forma efeti$a. /stas regras são aplicá$eis igualmente ao design de páginas web, embora sueitas 6s limitaç!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 básicas de design gráfico efeti$o e euilibrado% proporç!es, escalas, contrastes, agrupamentos, reticulados, alinhamentos, simetrias, euil"brio entre conte3dos e hieraruia $isual.
45 de 163
http://www.criarweb.com/artigos/design#e!ilibrado#introd!cao.html
design equilibrado. 0s proporç4es *e'emos ter em conta a defini!o a uti"i0ar, os e"ementos gráficos e as propor$es... Por Luciano Moreno
;ublicado em% $*?-?/* 7alori-e este artigo% G $otos
1a hora de começar uma composição, o primeiro ue de$emos saber é o tamanho ue esta terá. 8e o suporte final de nosso grafismo $ai ser o papel, poderemos desenhar para uma grande $ariedade de tamanhos, desde os menores @cart!es de $isita, peuenos folhetos até os maiores @posters, carta-es para an3ncios publicitários, embora uase sempre desenharemos am algum dos formatos 'I1. 9edidas papel #ormato D"7
modelo
taman1o
relação
'I1 AM
QKL`QRP
L.LQ< m]@x\[VL.PLP
'I1 AG
MQL`QRP
L.KQ< m] @x\[VK.MKMQ
'I1 AQ
MQL`
L.Q< m] @x\[VL.PLP
'I1 AK
OML`
L.< m] @x\[VK.MKMQ
'I1 AL
OML`KKOO
K.L m] @x\[VL.PLP
A relação $isual entre os diferentes formatos 'I1 é a seguinte%
1o caso de uma página web, os tamanhos poss"$eis são muito poucos, geralmente dois @OLLxLL e KLQMxPO pixels, porém é de suma importncia decidir para ual deles se $ai trabalhar, á ue, embora sea poss"$el desenhar uma página para ue sea
46 de 163
compat"$el com ambas resoluç!es, somente em uma delas se $isuali-ará tal como a desenhamos.
# segundo passo será escolher os elementos gráficos e textuais ue usaremos na composição. /sta escolha se de$e basear em $ariá$eis como a pessoa ou empresa ue desea transmitir a mensagem, a própria mensagem, o tipo de espectadores destinatários da composição e as caracter"sticas funcionais e comunicati$as de cada elemento.
Agora de$emos definir ue partes da área do desenho de$em estar ocupadas por elementos e ue partes $ão ficar $a-ias, sem nenhum conte3do. 8e deixarmos muitos espaços $a-ios, a composição pode ser descordenada á ue será dif"cil estabelecer relaç!es globais entre os elementos ou entre os grupos deles. ;orém, se o n3mero de componentes for ele$ado, podemos obter uma obra sobrecarregada, dif"cil de entender, na ual não se distingue com clare-a o ue é cada coisa e ual é a mensagem ue uer transmitir. &omeçaremos a situar então os elementos em cena, como se fossem atores de nossa particular obra de teatro, combinando2os de diferentes formas até obtermos um resultado satisfatório. 1este ponto é muito importante ter em conta ue cada elemento $isual tem uma função determinada dentro da composição. A informação $isual ue tra- um elemento pode mudar segundo o façam as propriedades
47 de 163
do mesmo, como seu tamanho, forma ou cor, porém, sobretudo sua proporção, o peso $isual ue ti$er no total da composição. Indubita$elmente, a forma mais direta de marcar proporç!es é mediante o tamanho relati$o dos elementos. #s elementos maiores, altos ou longos t0m uma carga $isual superior aos menores, curtos ou finos, criando -onas de atração mais intensas.
+ambém podemos delimitar proporç!es em um grafismo mediante a cor, com a ual podemos definir diferentes áreas de tons 3teis para distribuir de forma adeuada toda a informação gráfica. 1este sentido, as cores puras e saturadas t0m um maior peso $isual ue as secundárias neutras, e estas, maior ue as terciárias pouco saturadas.
#utra técnica para definir proporç!es é o uso de agrupamentos de elementos e a correta distribuição destas no cenário, o ue nos $ai permitir estruturar de uma forma ou outra a composição. :roporção por agrupamentos
/ste sistema costuma dar bons resultados, sempre ue não abusemos dele criando um excessi$o n3mero de blocos significati$os, á ue então se diminuiria importncia uns a outros e se perderia a proporcionalidade buscada. ?ais regras práticas referentes 6 proporção são% As formas regulares t0m menor peso ue as irregulares.
48 de 163
As formas alongadas e angulares alongam o campo de $isão, criando -onas dominantes.
8eam uais forem os elementos usados em uma composição de$eremos sempre buscar umas proporç!es adeuadas entre eles, com o obeti$o de ue cada um cumpra seu papel comunicati$o de forma adeuada. http://www.criarweb.com/artigos/design#e!ilibrado#proporcoes.html
design equilibrado. 0 escala 2ntende5se por esca"a a re"a!o entre as propor$es dos e"ementos 'isuais de uma composi!o. Por Luciano Moreno
;ublicado em% /?/?/* 7alori-e este artigo% G $otos
/ntende2se por escala a relação entre as proporç!es dos elementos $isuais de uma composição. +odos os elementos t0m a capacidade de modificar e se definir uns a outros segundo as relaç!es ue se definam entre as propriedades análogas deles. ;ortanto, o conceito de escala não se refere só 6 relação entre tamanhos de dois ou mais elementos, como também 6 relação entre cores, formas, etc. Um elemento é grande ou peueno segundo o tamanho dos elementos ue lhe acompanham no cenário. A cor de uma forma é brilhante ou apagada segundo a cor de fundo sobre a ual se encontra.
49 de 163
#u sea, as propriedades de um elemento $isual não são absolutas, e sim relati$as, á ue dependem das do resto de elementos ue lhe acompanham na composição. A proporção relati$a entre elementos de$e ser euilibrada, o ue implica o uso de uma escala correta na composição. As escalas são utili-adas desta forma em planos e mapas, para conseguir representar os obetos reais o mais corretamente poss"$el, com as proporç!es adeuadas entre eles.
/m uma composição gráfica a escala usada é igualmente importante, tanto para distribuir o espaço de desenho de forma acertada como para dar euil"brio de proporç!es aos elementos, usando2se 6s $e-es diferentes métodos de distribuição de eficácia pro$ada, como a regra Aurea ou o método de &orbusier. A regra Aurea, in$entada por 7itru$io, se utili-a para obter cenários de trabalho de proporç!es euilibradas, e se baseia em contemplar um espaço retangular di$idido em terceiras partes, tanto hori-ontal como $erticalmente, conseguindo com isso secionar os espaços em partes iguais.
50 de 163
;or sua parte, o método de proporç!es criado pelo aruiteto franc0s Ce &orbusier utili-a como unidade modular de escala o tamanho do homem, estabelecendo com ela as alturas corretas dos obetos ue usamos e dos elementos de uma construção aruitet5nica.
1o caso do web design, o tamanho da área de trabalho é fixo, porém sim ue de$eremos estabelecer uma escala de trabalho adeuada para dimensionar os elementos de nossa página. ;scala proporcionada entre logotipo, opç4es de menu e conte5do
Assim, o logotipo de$e ter um tamanho relati$o adeuado 6 página, os sistemas de na$egação @menus de$em ser o suficientemente grandes como para ser $istos e maneados com facilidade, mas no entanto, ue restem importncia ao conte3do informati$o da página, etc.
51 de 163
Um erro muito comum neste sentido é o dos "cones, ue de$em ser suficientemente grandes como para ue não percam seus traços diferenciadores, nem sua -ona ati$a se atuam como linNs, porém nunca tanto ue destauem em excesso, sobretudo se $ão acompanhados 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% *?/?/* 7alori-e este artigo% G $otos
# contraste é o efeito ue permite ressaltar o peso $isual de um ou mais elementos ou -onas de uma composição mediante a oposição ou diferença apreciá$el entre elas, permitindo2nos atrair a atenção de 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 @claridade2escuridão opostos. 1este caso, o maior peso terá o elemento mais escuro, destacando o mais claro sobre ele com mais intensidade uanto maior for a diferença tonal.
52 de 163
&onforme se diminui a tonalidade do elemento mais escuro o contraste $ai perdendo intensidade, sendo necessário redimensioná2lo se uisermos manter o mesmo contraste.
/ste tipo de contraste é tal$e- o mais intenso, e é muito usado em composiç!es gráficas.
Contraste de cores
'ois elementos com cores complementares se reforçam entre si, assim como uma cor uente e outra fria.
# contraste criado entre duas cores será maior uanto mais afastadas esti$erem no c"rculo cromático. As cores opostos contrastam muito, enuanto ue as análogas apenas fa-em, perdendo importncia $isual ambas.
53 de 163
/ste efeito pode ser usado para dar maior dimensão ou sensação de proximidade a um elemento em uma composição, situando2o sobre uma cor ue contraste com ele.
/ste tipo de contraste é especialmente indicado para os conte3dos textuais, nos uais de$e primar pela facilidade de leitura. # ideal será o texto negro sobre fundo branco, á ue é o ue mais contraste cria @contraste de tom. ;orém, em certos elementos, nos uais este ogo de cores não for poss"$el, ha$erá ue buscar sempre um texto cálido sobre um fundo frio ou $ice2$ersa. Contraste de contornos
#s contornos irregulares destacam de forma importante sobre os regulares ou reconhec"$eis.
/ste tipo de contrastes é adeuado para dirigir a atenção do usuário a certos elementos de uma composição ou página web, como bot!es importantes, banners publicitários, etc. 1ão obstante, há ue ser comedidos em seu uso, sobretudo se se combinam com outros tipos de contraste, á ue podem ser um foco de atração $isual potente demais. Além disso, criam muita tensão no espaço ue lhes rodeia.
54 de 163
Contraste de escala
4 o produ-ido pelo uso de elementos a diferentes escalas das normais ou de proporç!es irreais, conseguindo2se o contraste por negação da percepção aprendida.
/ste sistema de contraste não é muito usado nas páginas web, onde se busca sempre a escala adeuada, porém sim é freSente em fotografia e pintura, conseguindo atrair a atenção 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 web de'em se agrupar para obter um resu"tado coerente.
Por Luciano Moreno
;ublicado em% %/?/?/* 7alori-e este artigo% G $otos
# ser humano, tanto por seu caráter racional como por herança cultural, tende a organi-ar os elementos ue percebe ao redor como conuntos significati$os organi-ados. /sta inclinação a agrupar elementos relacionados em um fator ue influi de forma notória na percepção ue temos de nosso entorno, do ue $emos ao nosso redor. As composiç!es gráficas não escapam a esta tend0ncia, portanto um correto agrupamento de seus elementos lhes outorga um caráter lógico, racional, ue aumenta seu $alor comunicati$o. # agrupamento de nossos elementos gráficos e textuais pode se basear em diferentes critérios% •
:roimidade +endemos a agrupar aueles obetos ue estão próximos, mais
pertos entre si.
55 de 163
• •
•
>emel1ança +endemos a agrupar os elementos iguais ou parecidos. Continuidade 1ossa mente tende a agrupar aueles elementos ue t0m uma
continuidade significati$a. >imetria +endemos a agrupar os elementos para ue apareçam ordenados formando figuras conhecidas.
1o caso concreto das páginas web, os agrupamentos são muito 3teis e totalmente necessários,, sobretudo no ue di- respeito a elementos similares ou de funcionalidade necessários análoga, como componentes de menus de na$egação, "cones, dados relacionados, bot!es, etc.
#s agrupamentos também são muito 3teis em casos de formulários ou fichas de muitos campos, sendo muito con$eniente di$idir estes em grupos de informação informação análoga, análoga, separando logo cada grupo dos do s demais mediante franas hori-ontais ou $erticais em branco.
56 de 163
&om isso, o formulário não só ganha em bele-a $isual, como também fica mais claro, lógico w fácil de completar pelo usuário usuário.. 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 do desenho.. desenho Por Luciano Moreno
;ublicado em% /&??/* 7alori-e este artigo% G $otos
Uma composição gráfica de$e ser euilibrada não só em conte3dos, como também $isualmente, até tal ponto ue podemos di-er ue a ordem na disposição espacial dos elementos da mesma é um dos fatores mais importantes importantes para para seu sucesso. # espectador ue contempla uma obra gráfica @folheto, carta- tr"ptico ou página web web busca 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 eixo hori-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 $ertical facilita a ele$ação da $ista, marcando prioridades ou n"$eis na composição. 7isto ue as composiç!es gráficas @e dentro delas, as páginas web se representam repre sentam em suportes planos, é fácil dedu-ir ue este sistema de refer0ncia é também o mais adeuado para a distribuição de seus elementos. 8e a isto somamos o caráter eminentemente retangular da maioria dos suportes, obtemos por extensão o sistema de organi-ação ideal ideal para para nossas composiç!es% o reticulado. Um reticulado ou rede é um sistema de refer0ncia formado por diferentes linhas hori-ontais e $erticais ue marcam a locali-ação de elementos e -onas em uma
57 de 163
composição gráfica, linhas ue não tem poru0 ter uma representação real @não t0m poru0 fa-er parte do grafismo, mas sim mental. 8ão as guias imaginárias sobre as ue $amos ir colocando os elementos, a espinha dorsal de uma composição gráfica.
?ediante o reticulado, o designer $ai situando com harmonia os blocos de conte3do ue formarão a composição% -onas principais e secundárias, t"tulos e subt"tulos, blocos de texto, fotografias, ilustraç!es, gráficos, sistemas de na$egação, bot!es, "cones, etc, dando com isso um estilo próprio própr io $isualmente lógico 6 mesma. Uma composição gráfica não é um sistema padrão, 3nico, e sim ue os mesmos elementos se podem organi-ar segundo diferentes esuemas lógicos. ?as sempre de$erão estar dispostos segundo uma ret"cula ue lhes traga euil"brio e estabilidade $isual. 4 tarefa do designer buscar o conunto locali-ação2reticulado ue melhor se adapte a sua obra. A locali-ação de elementos em uma composição segundo um reticulado determinado não reuer a introdução dos elementos finais da mesma. #u sea, se pode perfeitamente desenhar a organi-ação de um grafismo simplesmente com retngulos de cores. ?ais ainda, com retngulos de uma só cor. # ue importa não é o aspecto $isual final, e sim a organi-ação lógica e regular dos elementos. 1o caso concreto de uma página web, o designer pode perfeitamente distribuir em tela uma série de retngulos ue representem as -onas ue $ão ter a página. 8e a distribuição segue um reticulado conforme as -onas estão locali-adas com lógica, a página ue resultar disso terá um
58 de 163 (eticulado de 6erra
/sta estrutura lógica criada com o reticulado de$e se manter logo em todas as páginas ue formam website, proporcionando com isso consist0ncia e homogeneidade ao mesmo. 8e definirmos uma separação entre o cabeçalho de uma formulário e o in"cio dos elementos do mesmo de K< pixels, todos os formulários, fichas, textos, etc, ue ti$erem cabeçalho, de$em manter o mesmo espaço separador. 8e definirmos umas margens $a-ias entre a página ue desenharmos e as bordas da anela do na$egador de GL pixels, todas as páginas do site de$em manter constantes essas margens. (eticulado em um #ormulário construído com tabela
Uma $antagem adicional de desenhar um reticulado correto será a comodidade na hora de construir depois a página com tabelas, á ue a estrutura natural destas é reticular. http://www.criarweb.com/artigos/design#e!ilibrado#retic!lado.html
design equilibrado. s alin1amentos 4ecessários para conseguir uma composi!o ordenada e "ógica, assim como para re"acionar e"ementos. Por Luciano Moreno
;ublicado em% '??/* 7alori-e este artigo% G $otos
59 de 163
Uma $e- definido o reticulado ue $amos usar em nossa composição, de$eremos situar na mesma os elementos gráficos e textuais. 1este ponto aparece o conceito de alinhamento, como a colocação de elementos gráficos e textuais segundo uma linha dada, ue geralmente será hori-ontal ou $ertical. )eralmente ha$erá $árias linhas guias de alinhamento em uma composição. Alinhar os elementos é uma operação imprescind"$el para conseguir uma composição ordenada e lógica, pois com isso se criam unidades $isuais definidas e relaç!es entre elementos. 8e o alinhamento é importante na hora de situar elementos gráficos, será ainda mais se se trata de conte3dos textuais. /feti$amente, os textos perfeitamente alinhados são mais fáceis de ler, não cansam a $ista e produ-em um efeito de euil"brio ue con$ida 6 leitura. Ao contrário, um texto sem alinhamento resulta confuso, dif"cil de ler, desmoti$ando ao espectador. +udo o ue está sendo falado se acentua ainda mais se o suporte é uma página web, á ue a forma do monitor e da anela do na$egador impulsiona o uso de contornos retangulares, ue unicamente se conseguem com alinhamentos perfeitos. Ademais, muitas $e-es de$emos desenhar as páginas com um importante n3mero de elementos, por isso se a disposição dos mesmos não for perfeitamente regular será muito dif"cil criar uma composição aceitá$el. #s alinhamentos hori-ontais são imprescind"$eis para conseguir um desenho em n"$eis está$eis, á ue as linhas hori-ontais sugerem euil"brio. &omo podemos ter blocos lógicos de diferente altura, estes alinhamentos se definirão desde as bordas superiores dos blocos. 0lin1amentos 1ori8ontais em ;res9as
Huanto 6s $erticais, o alinhamento mais comum é a esuerda, á ue é a normal nos li$ros e demais suportes textuais, estando nossa $ista educada para tratar com ela.
60 de 163 0lin1amentos de tetos à esquerda
#s alinhamentos centrali-ados são pouco comuns, sal$o no caso de tabelas de dados com colunas ue admitam bem este tipo de alinhamento, sobretudo se todos os $alores da coluna ti$erem a mesma largura. 8e não for assim, é prefer"$el optar pelo alinhamento 6 esuerda. ;lementos centrali8ados em uma tabela
Huanto aos alinhamentos 6 direita, são pouco freSentes, á ue criam tens!es $isuais na maioria dos casos. ;odem2se usar naueles blocos cuo conte3do de$a se adaptar a um reticulado ue defina uma linha $ertical 6 direita do mesmo, como ocorre em muitos menus de na$egação situados 6 esuerda da página. +ambém são 3teis nas colunas das tabelas ue conti$erem dados ue de$am seguir uma ordenação lógica a direitas, como é o caso de dados de moeda. 0dequando o alin1amento ao tipo de dados de cada campo
/xiste outro tipo de alinhamento para textos, o ustificado, no ual todas as linhas de texto t0m a mesma largura, por isso ficam alinhadas tanto a esuerda uanto a direita, o ue se consegue aumentando ou diminuindo o espaçado normal das letras. /ste tipo de alinhamento é muito usado nos li$ros e ornais, porém nas páginas web há ue aplicá2lo com precaução, destinando2o somente a blocos textuais de pouco largura @textos distribu"dos em $árias colunas, por exemplo.
61 de 163
;or 3ltimo, $ale di-er ue se os alinhamentos são imprescind"$eis, podem originar monotonia $isual se forem seguidos ao pé da letra, ao produ-ir páginas uadradas e artificiais demais. ;or isso, é bom introdu-ir alguns elementos ue, sem romper o reticulado e os alinhamentos básicos, introdu-am um pouco de $ariedade $isual, de frescor no desenho. *uscar o euil"brio entre alinhamentos e elementos ue as rompam é uma das tarefas principais do web designer. http://www.criarweb.com/artigos/design#e!ilibrado#alinhamentos.html
design equilibrado. 0s simetrias &utro condicionante para #ue o design da web tenha uma organi0a!o natura".
Por Luciano Moreno
;ublicado em% ?$?/* 7alori-e este artigo% G $otos
8e obser$armos a 1ature-a, grande aruiteta e desenhista onde esti$er, poderemos obser$ar rapidamente ue um dos elementos ue mais utili-a para criar suas organismos é a simetria, manifestando2se em uase todos os seres ue existem ao longo e largo de nosso planeta.
62 de 163
# Domem pretendeu imitar este desenho simétrico natural em todos e cada um de seus aspectos criadores, desde os primeiros obetos de artesanato até os modernos automó$eis.
8e partirmos desta base, de$emos aceitar ue a busca de uma simetria estrutural, gráfica e textual de$e ser uma das primeiras metas de todo web designer, á ue confere 6s composiç!es de uma organi-ação natural a ual o espectador está acostumado. ;or definição, uma forma ou imagem é simétrica uando um eixo central pode di$idi2la em duas partes iguais e opostas entre si. /ste conceito, aplicado a uma composição gráfica pode se aplicar tanto aos próprios elementos indi$iduais da mesma como a sua totalidade. 1este caso, obter uma simetria exata pode resultar dif"cil @inclusi$e incon$eniente, porém sim ue podemos buscar uma simetria de blocos e espaçamentos em nossa rede.
# design simétrico sugere estabilidade, euil"brio, resultando estético, ordenado, atrati$o e agradá$el de contemplar. 'o contrário, o assimétrico mostra irregularidade, desigualdade nas formas e deseuil"brio. Dá ue ter em conta ue a simetria usada não de$e de ser de todo exata, á ue a simetria perfeita não é natural, é =perfeita= demais, $ale a redundncia, fa-endo aparecer as composiç!es artificiais e pré2meditadas. ;euenas $ariaç!es na distribuição simétrica dão esse toue de ruptura ue torna sua contemplação mais amena e natural. 1o caso de uma página web, a concepção simétrica da mesma começa com o reticulado escolhido, á ue será o ue define a distribuição básica de elementos nela. Dá ue tender então a desenhar um reticulado o mais simétrico poss"$el.
63 de 163
Uma forma aceitada de romper o esuema simétrico de uma página é criar blocos entortados $isualmente para um lado, alternando2os na página de forma in$ersa, ou sea, o primeiro mais torto 6 direita, o segundo mais 6 esuerda, etc. #utra técnica é o uso de um 3nico menu lateral de na$egação, ue descompensa o peso $isual para a -ona na ual se encontra. 8e na disposição de blocos no reticulado podemos ser algo permissi$os, nos conte3dos de nossas páginas a simetria de$e ser uma norma uase inflex"$el, sobretudo na construção de certos elementos. 4 missão fundamental de todo designer ser capa- de construir conte3dos simétricos sem ue pareçam r"gidos, artificiais. /xemplos claros desta regra são a criação de formulários e de fichas. &onstroem2se geralmente apoiando2se em uma tabela construtor, pela ual de$eremos buscar a simetria nesta tabela, embora logo, de$ido 6s diferentes longitudes e nature-a dos campos, o resultado final =pareça= não s02lo. Distribuição simHtrica em uma #ic1a
/m relação aos textos, se nossa página é eminentemente textual, e em textos de uma só linha, como esta ue $oc0s t0m adiante, o conte3do será simétrico por própria construção. ;orém, se desearmos distribuir o conte3do em $árias colunas, de$eremos prestar especial atenção a ue estas seam euilibradas, e$itando o remarcado forte de porç!es de texto ou de uma ou mais colunas mediante cores de fundo, textos em negrito, etc.
64 de 163 Colunas tetuais e simetria
A regra geral é buscar sempre a harmonia, mesmo uando introdu-amos peuenos elementos diferenciadores. #utro aspecto fundamental é manter simetrias no tratamento dos ares em nossa página. /ntendemos por =ar= o espaço li$re ue fica entre elementos e entre estes e os limites da página. 4 o ue em ualuer documento chamamos =margens=, porém estendido a todos os elementos e conte3dos. 8e nossa página tem um espaço li$re entre sua margem esuerda e o primeiro conte3do por esse lado, o mesmo ar de$e ficar entre a margem direita e o conte3do por esse lado. Igualmente, os espaços li$res entre os elementos internos da página de$em ser simétricos e iguais, buscando com isso o euil"brio na composição. /ste conceito é aplicá$el a todos e cada um dos elementos de nossas páginas. Assim, se temos uma lista de conte3dos, podemos criar uns espaços entre cada <2P elementos, ue e$itarão a sensação de opressão produ-ida uando as listas t0m muitos elementos. /ntão, de$eremos repetir este espaço separador constantemente ao longo da lista.
'a mesma forma, uando trabalhamos com formulários é muito importante desenhá2los de tal forma ue o ar ue fiue entre os diferentes elementos ue o formem sea simétrico, criando um total claro e harmonioso.
65 de 163
/ o mesmo podemos di-er dos demais elementos de nossa página% ares simétricos, bem repartidos, euilibrados. http://www.criarweb.com/artigos/design#e!ilibrado#simetrias.html
design equilibrado. equilíbrio entre conte5dos A organi0a!o espacia", primordia" para atrair ao usuário. Por Luciano Moreno
;ublicado em% -?$?/* 7alori-e este artigo% < $otos
/m toda composição de$e existir um adeuado euil"brio entre os diferentes elementos ue a formam se uisermos atrair a atenção do espectador e mant02la até ue tenha assimilado a mensagem ue uisermos lhe transmitir. ;ara isso, é imprescind"$el manter em nossa obra gráfica uma correta organi-ação espacial de conte3dos gráficos e textuais, assim como umas uantidades adeuadas de cada um deles. #s componentes gráficos contribuem 6 composição sensaç!es $isuais por meio de formas, cores e contrastes, enuanto ue os textos fornecem informação, mensagens, embora isto não ueira di-er ue estas funcionalidades seam excludentes, á ue os gráficos podem tra-er informação e os textos formas e cores @de fato, a +ipografia é uma ferramenta de desenho excelente. As composiç!es formadas por muitos elementos gráficos e pouco ou nenhum conte3do textual podem criar reeição naueles espectadores ue buscam o conte3do substancial na obra, a informação prática ue oferece. /ste conte3do textual é especialmente importante nas páginas web, á ue os usuários comparecem a um site buscando sempre algum tipo de informação, abandonando2o rapidamente se não encontrar algum est"mulo informati$o ue lhe moti$e.
1o lado ao contrário, as composiç!es nas uais se introdu- um conte3do eminentemente textual, com pouco ou nenhum conte3do gráfico, costumam ser reeitadas pelo espectador, ue encontra tremendamente monótona e entediada uma obra ue aparece 6 $ista como uma mancha de cor indiferenciada, ue exige ademais um ele$ado n"$el de concentração e muito tempo para resultar 3til. 1ecessitamos então introdu-ir sensaç!es $isuais gráficas ue moti$em ao espectador a in$estigar o conte3do textual.
66 de 163
1o caso das páginas web, os tipos de conte3dos a oferecer aumentam considera$elmente com respeito aos de uma composição sobre papel á ue podemos incluir nelas não só gráficos e textos, como também áudios, animaç!es, $"deo, applets de Ba$a, etc. Isto torna necessário um planeamento correto dos elementos a incluir em uma página, com obeti$o de despertar a atenção do usuário, sim, mas oferecendo2lhe sempre informação rele$ante e nunca sobrecarregando de elementos supérfluos. Ademais, de$ido 6s limitaç!es próprias dos sistemas informáticos, da linguagem D+?C, dos na$egadores web e das conex!es 6 Internet, o euil"brio entre conte3dos de$e contemplar também ue o resultado final se possa $isuali-ar corretamente. 'e nada ser$e uma página com gráficos mara$ilhosos e animaç!es espetaculares se o usuário de$e esperar um minuto para poder $02las. 4 mais, ele na $erdade nunca esperará esse minuto. 4 portanto prefer"$el organi-ar as páginas web de forma euilibrada, oferecendo em cada uma delas as doses adeuadas de elementos $isuais e informati$os. &omo norma geral, sempre de$e ha$er mais componentes textuais do ue gráficos em uma página.
4 melhor sempre ter duas páginas le$es e euilibradas a uma recarregada de elementos incapa-es de reter a atenção do usuário no $erdadeiramente importante% a mensagem ue deseamos transmitir.
67 de 163 http://www.criarweb.com/artigos/e!ilibrio#entre#conte!dos.html
design equilibrado. 0 1ierarquia visual A organi0a!o guia ao usuário na contemp"a!o de uma página web. Por Luciano Moreno
;ublicado em% /%??/+ 7alori-e este artigo% < $otos
/m toda composição gráfica de$e2se criar uma hieraruia $isual adeuada, com o obeti$o de ue os elementos mais importantes da mesma se mostrem de$idamente acentuados. ?ediante um design adeuado, pode2se estabelecer um caminho $isual ue condu-a o olho do espectador e ue $á mostrando a informação contida na composição de forma organi-ada, lógica e confiá$el, ue diria sua percepção pela rota mais ideal.
A pessoa ue contempla uma obra gráfica aprecia em primeiro lugar um conunto completo de formas e cores, com os elementos situados em primeiro plano contrastando com o fundo da composição. 8ó depois desta primeira obser$ação global, e se sua curiosidade ti$er sido despertada, o espectador começará a analisar as partes indi$iduais do todo, começando pelos elementos gráficos puros, e continuando logo com os elementos textuais, mais dif"ceis de interpretar, á ue há ue l02los pala$ra por pala$ra.
68 de 163
1os pa"ses ocidentais, lemos os documentos da esuerda 6 direita e desde a parte superior 6 inferior. /sta forma de proceder se estendeu 6 todas auelas ati$idades nas ue necessitamos $isuali-ar algo @uando obser$amos a uma pessoa, geralmente começamos pela parte esuerda de sua cabeça. Isto pode ser apro$eitado para organi-ar o conte3do de uma composição logicamente, situando nela os elementos mais importantes na -ona superior esuerda da mesma, as seguintes em importncia na lateral esuerda, as seguintes no corpo central e as menos rele$antes na parte inferior.
/sta forma de proceder é comum não só em folhetos, documentos ou carta-es publicitários criados com um design clássico, assim como nas páginas web, ue seguem esta estrutura hieráruica em R
69 de 163 Iierarquia visual por posicionamento em página web
#utro sistema de estabelecer uma hieraruia nos conte3dos é o uso de cores. ;odemos enfati-ar certas -onas da composição usando nelas cores primárias muito saturadas, ue atraem de forma irresist"$el a atenção dos espectadores, tendo sempre cuidado de ue os textos nelas contidos contrastem de forma clara com o fundo, para ue possam ser lidos com comodidade. 1este caso, há ue ter cuidado com não abusar destas cores =fortes=, destinando2as somente 6 peuenas -onas especiais, á ue sobrecarregam em excesso a $ista, sobretudo o amarelo. ;ara as -onas de segunda ordem, podemos usar as cores menos saturadas, secundárias ou terciárias, sendo uma boa opção auelas presentes na nature-a, á ue são mais naturais e melhor aceitas pelos espectadores. ;or 3ltimo, as -onas menos importantes podemos não colori2las ou fa-02lo muito sutilmente, para ue não atraia em excesso o olhar.
/sta $ariação cromática não é 3nica, á ue se pode usar ualuer ogo de cores ue consiga estabelecer uma hieraruia $isual adeuada. +ambém podemos percorrer na hora de estabelecer categorias de importncia $isual aos contrastes. 8e situarmos próximas ou sobrepostas duas -onas de cores complementares ou ue contrastem muito, a importncia de ambas na composição se reforça, sobretudo se as -onas de contraste não forem muitas.
70 de 163 Iierarquia visual por contrastes de cores @a8ul, laranGa e brancoA
8endo ao contrário, se as -onas são de cores análogas, pertencentes a uma mesma gama, a importncia de ambas se diminui mesmo sendo cores $i$as, á ue se distinguirá uma -ona de atração, porém seus elementos aparecerão esfumados, pouco rele$antes. Huanto aos elementos textuais, aos ue também são aplicá$eis os métodos de cor e contraste, podemos estabelecer uma hieraruia neles mediante os tamanhos relati$os dos mesmos. #s t"tulos de página, os cabeçalhos ou os titulares de uma not"cia ou seção podem ser destacados aumentando seu tamanho segundo sua importncia na composição ou página web. /ste método é sempre aconselhá$el, á ue organi-a de forma lógica o conte3do textual e rompe a monotonia intr"nseca dos textos. Iierarquia visual em elementos tetuais
Um elemento a e$itar sempre em uma composição, sal$o ue nos con$enha seu uso, são os enfeites gráficos $isualmente impactantes, como -onas de cor intensa sem sentido, "cones ue destauem em excesso, linhas hori-ontais escandalosas, animaç!es ue tragam pouca informação, etc. 8ua presença atrai a $ista do espectador, sem lhe oferecer nada em troca e des$ia seu interesse dos elementos textuais e gráficos ue sim tra-em $erdadeira informação.
Isto não uer di-er ue não possam se empregar. 8ão 6s $e-es muito 3teis para romper
71 de 163
a monotonia de uma composição introdu-indo nela elementos ue proporcionem frescor $isual, porém de$em ser usados sempre com moderação. #s tamanhos excessi$amente grandes nos textos é também um fator a ter em conta. Um cabeçalho de página ou de seção de$e destacar o suficiente sobre o resto do conte3do textual, porém nunca de$em ser desproporcionadas nem atrair em excesso a atenção do usuário. Huanto 6 abundncia deles, há ue ter sempre em conta ue um par de cabeçalhos de maior tamanho estabelece uns n"$eis de importncia con$enientes, porém uma multidão de textos de grande tamanho acrescenta confusão a uma composição, á ue o usuário perde as refer0ncias sobre o ue é importante na mesma. (esumindo 4 muito importante estabelecer uma organi-ação hieráruica dos conte3dos
de nossa composição, podendo2se usar para isso diferentes técnicas de design, porém tendo em conta ue o mal uso ou o abuso delas pode con$erter a composição em algo ue não desperta interesse do usuário ou transforma2se em uma =palhaçada=, onde tudo é escandaloso e nada se destaca de forma clara. http://www.criarweb.com/artigos/design#e!ilibrado#hierar!ia#$is!al.html
6eoria da cor. "ntrodução 7 uma parte fundamenta" da web, produtor de sensa$es. Por Luciano Moreno
;ublicado em% &??/+ 7alori-e este artigo% G $otos
/stamos rodeados de cores. /stas fa-em parte da própria, e o ser humano é um dos seres pri$ilegiados da 1ature-a por poder desfrutar delas. Huando $amos pela rua, uando estamos trabalhando ou desfrutando de nosso tempo li$re ou uando estamos na$egando pela Internet recebemos constantemente impress!es de cor por meio de nossa $ista, e estas impress!es t0m a faculdade de nos excitar, de nos tranSili-ar, de nos deixar de bom humor ou de nos inspirar pena. 4 o mundo de cor.
/ se este aspecto da $ida é importante em todas e cada uma de suas facetas, é ainda mais no mundo do design. 4 tal$e- uma de suas partes fundamentais, e ainda mais no web design, pois dispomos de muito pouco espaço e muito pouco tempo para poder
72 de 163
expressar a alma de nosso site e captar adeuadamente a atenção de nossos $isitantes, e a cor é a primeira forma de comunicação entre uma página web e o usuário.
/stá demonstrado ue os no$e primeiros segundos nos uais uma pessoa contempla nossa página são cruciais, e deles depende ue esta continue com agrado na$egando por nosso site, o faça com indiferença ou nos abandone. / do ue $0 nestes segundos, o ue tal$e- mais chame e capte sua atenção sea a distribuição e a gama de cores de nossa página.
/sta importncia da cor se estende a todas as artes, um pintor, por exemplo, disp!e de muito mais tempo ue nós para se expressar com a cor. /ste também conta com um leue de cores uase infinito, enuanto ue nós, os web designers, dispomos somente de algumas cores para expressar o ue deseamos @e á $eremos mais adiante ue poucas cores temos na $erdade ao nosso alcance.
73 de 163
1este cap"tulo $eremos um pouco o mundo da cor em geral, sua aplicação ao design gráfico e as restriç!es ue $amos ter na hora de trabalhar com cores no design de um web site. http://www.criarweb.com/artigos/teoria#da#cor#introd!cao.html
6eoria da cor. 7ature8a da cor *escri!o forma" da cor como um fen8meno f%sico. Por Luciano Moreno
;ublicado em% $%??/+ 7alori-e este artigo% Q $otos
6eoria da cor. 7ature8a da cor
;odemos $er as cosas ue nos rodeiam porue A +erra recebe a lu- do 8ol. 1ossa estrela mãe nos inunda constantemente com sua lu-, e graças a ela é também poss"$el a $ida em nosso planeta. A lu- do 8ol está formada em realidade por um amplo espectro de radiaç!es eletromagnéticas de diferentes longitudes de onda, formando um espectro cont"nuo de radiaç!es, ue compreende desde longitudes de onda muito peuenas, de menos de K pic5metro @raios cósmicos, até longitudes de onda muito grandes, de mais de K Nil5metro.
74 de 163
# ser humano somente é capa- de $isuali-ar um subconunto delas, as ue $ão desde GOL @$ioleta a POL nan5metros @$ermelho, como podemos apreciar claramente se a fa-emos passar por um prisma, efeito descoberto por 1ewton.
&ada longitude de onda define uma cor diferente @cores de emissão. A soma de todos as cores @longitudes de onda dá como resultado a lu- branca, sendo a cor preta ou a obscuridade, a aus0ncia de cores.
8e uma $e- descomposta a lu- solar em suas longitudes de onda constituintes $oltarmos a untá2las com outro prisma, $oltaremos a obter a lu- branca.
75 de 163
http://www.criarweb.com/artigos/teoria#da#cor#nat!re%a#da#cor.html
6eoria da cor. 0 percepção da cor )omo o o"ho pode detectar e c"assificar as cores #ue chegam. Por Luciano Moreno
;ublicado em% %??/+ 7alori-e este artigo% G $otos
*em, á sabemos de onde $0m as cores, porém como o olho humano pode $er estas ondas e distingui2las umas de outrasY A resposta a esta uestão se encontra no olho humano, basicamente uma esfera de Q cm de dimetro ue percorre a lu- e a enfoca em sua superf"cie posterior.
1o fundo do olho existem milh!es de células especiali-adas em detectar as longitudes de onda procedentes de nosso ambiente. /stas mara$ilhosas células, principalmente os cones e os bastonetes, percorrem as diferentes partes do espectro de lu- solar e as transformam em impulsos elétricos, ue são en$iados logo ao cérebro atra$és dos ner$os ópticos, sendo este o encarregado de criar a sensação da cor.
#s cones se concentram em uma região próxima do centro da retina chamada fó$ea. 8ua distribuição segue um ngulo ao redor de Q contados desde a fó$ea. A uantidade de cones é de milh!es e alguns deles t0m uma terminação ner$osa ue $ai ao cérebro. #s cones são os responsá$eis da $isão da cor e acredita2se ue há tr0s tipos de cones, sens"$eis as cores $ermelho, $erde e a-ul, respecti$amente. 'ada sua forma de conexão
76 de 163
6s terminaç!es ner$osas ue se dirigem ao cérebro, são os responsá$eis da definição espacial. +ambém são pouco sens"$eis 6 intensidade da lu- e proporcionam $isão fotópica @$isão a altos n"$eis. #s bastonetes se concentram em -onas afastadas da fó$ea e são os responsá$eis da $isão escotópica @$isão a baixos n"$eis. #s bastonetes compartilham as terminaç!es ner$osas ue se dirigem ao cérebro, sendo portanto, sua colaboração 6 definição espacial pouco importante. A uantidade de bastonetes se situa ao redor de KLL milh!es e não são sens"$eis 6 cor. #s bastonetes são muito mais sens"$eis ue os cones 6 intensidade luminosa, por isso contribuem 6 $isão da cor aspectos como o brilho e o tom, e são os responsá$eis da $isão noturna.
/xistem grupos de cones especiali-ados em detectar e processar uma cor determinada, sendo diferente o total deles dedicados a uma cor e a outra. ;or exemplo, existem mais células especiali-adas em trabalhar com as longitudes de onda correspondentes ao $ermelho ue a nenhuma outra cor, por isso ue uando o ambiente em ue nos encontramos nos en$ia bastante $ermelho se produ- uma saturação de informação no cérebro desta cor, originando uma sensação de irritação nas pessoas. Huando o sistema de cones e bastonetes de uma pessoa não é o correto se podem produ-ir uma série de irregularidades na apreciação da cor, assim como as partes do cérebro encarregadas de processar estes dados estão preudicadas. /sta é a explicação de fen5menos como o 'altonismo. Uma pessoa dalt5nica não aprecia as gamas de cores em sua usta medida, confundindo os $ermelhos com os $erdes.
77 de 163
'e$ido a ue o processo de identificação de cores depende do cérebro e do sistema ocular de cada pessoa em concreto, podemos medir com toda exatidão a longitude de onda de uma cor determinada, porém o conceito da cor produ-ida por ela é totalmente subeti$o, dependendo da pessoa em si. 'uas pessoas diferentes podem interpretar uma cor dada de forma diferente, e pode ha$er tantas interpretaç!es de uma cor cmo uantas pessoas há. 1a $erdade, o mecanismo de mescla e produção de cores produ-ido pela reflexão da lusobre um corpo é diferente ao da obtenção de cores por mescla direta de raios de lu-, como ocorre com o do monitor de um computador, porém a grandes traços e a n"$el prático são suficientes os conceitos estudados até agora. http://www.criarweb.com/artigos/teoria#da#cor#percepcao#da#cor.html
6eoria da cor. 9odelos de cor *escri!o dos tipos de cor conhecidos, assim como se aborda uma exp"ica!o de como os ob/etos ad#uirem as cores. Por Luciano Moreno
;ublicado em% $?$?/+ 7alori-e este artigo% G $otos
As cores obtidas diretamente naturalmente por decomposição da lu- solar ou artificialmente mediante focos emissores de lu- de uma longitude de onda determinada se denominam cores aditi$as. 1ão é necessária a união de todas as longitudes do espectro $is"$el para obter o branco, á ue se misturarmos só o $ermelho, $erde e a-ul obteremos o mesmo resultado. 4 por isso ue estas cores são denominadas cores primárias, porue a soma das tr0s produ- o branco. Ademais, todas as cores do espectro podem ser obtidas a partir delas.
As cores aditi$as são as usadas em trabalho gráfico com monitores de computador, á ue, segundo $imos uando falamos dos componentes gráficos de um computador, o monitor produ- os pontos de lu- partindo de tr0s tubos de raios catódicos, um $ermelho, outro $erde e outro a-ul. ;or este moti$o, o modelo de definição de cores usado em trabalhos digitais é o modelo ()* @(ed, )reen, *lue.
78 de 163
+odas as cores ue se $isuali-am no monitor estão em função das uantidades de $ermelho, $erde e a-ul utili-adas. ;or isso, para representar uma cor no sistema ()* se atribui um $alor entre L e Q<< @notação decimal ou entre LL e >> @notação hexadecimal para cada um dos componentes $ermelho, $erde e a-ul ue o formam. #s $alores mais altos de ()* correspondem a uma uantidade maior de lu- branca. ;or conseguinte, uanto mais altos são os $alores ()*, mais claros são as cores.
'esta forma, uma cor ualuer $irá representada no sistema ()* mediante a sintaxe decimal @(,),* ou mediante a sintaxe hexadecimal Z(())**. A cor $ermelha pura, por exemplo, se especificará como @Q<<,L,L em notação ()* decimal e Z>>LLLL em notação ()* hexadecimal, enuanto ue a cor rosa claro dada em notação decimal por @Q
&A<>'. /sta forma aditi$a de perceber a cor não é 3nica. Huando a lu- solar choca contra a superf"cie de um obeto, este absor$e diferentes longitudes de onda de seu espectro total, enuanto ue refletem outras. /stas longitudes de onda refletidas são precisamente as causadoras das cores dos obetos, cores ue por ser produ-idas por filtragem de longitudes de onda se denominam cores subtrati$as. /ste fen5meno é o ue se produ- em pintura, onde a cor final de uma -ona $ai depender das longitudes de onda da lu- incidente refletidas pelos pigmentos de cor da mesma. Um carro é de cor a-ul porue absor$e todas as longitudes de onda ue formam a lusolar, exceto a correspondente 6 cor a-ul, ue reflete, enuanto ue um obeto é branco porue reflete todo o espectro de ondas ue formam a lu-, ou sea, reflete todas as cores, e o resultado da mistura de todas elas dá como produto o branco. ;or sua $e-, um obeto é negro porue absor$e todas as longitudes de onda do espectro% o negro é a aus0ncia de lu- e de cor. 1esta concepção subtrati$a, as cores primárias são outras, concretamente o cian, o magenta e o amarelo. A partir destas tr0s cores podemos obter uase todas as demais, sal$o o branco e o negro.
79 de 163
/feti$amente, a mescla de pigmentos cian, magenta e amarelo não produ- a cor branca, e sim uma cor cin-a suo, neutro. Huanto ao negro, tampouco é poss"$el obt02lo a partir dos primários, sendo necessário inclu"2lo no conunto de cores básicas subtrati$os, obtendo2se o modelo &?J @&[an, ?agenta, ellow, *lacN. # sistema &?J, define as cores de forma similar a como funciona uma impressora de ineção de tinta ou uma imprensa comercial de uadricomia. A cor é da superposição ou de colocar untas gotas de tinta semi2transparentes, das cores cian @um a-ul brilhante, magenta @uma cor rosa intenso, amarelo e negro, e sua notação se corresponde com o $alor em tanto por cento de cada uma destas cores. 'esta forma, uma cor ualuer $irá expressa no sistema &?J mediante a expressão @&,?,,J, na ue figuram os tantos por cento ue a cor possui dos componentes básicos do sistema. ;or exemplo, @L,L,L,L é branco puro @o branco do papel, enuanto ue @KLL,L,KLL,L corresponde 6 cor $erde.
As cores subtrati$as são usadas em pintura, imprensa e, em geral, em todas auelas composiç!es nas ue as cores se obtém mediante a reflexão da lu- solar em mesclas de pigmentos @tintas, óleos, auarelas, etc.. 1estas composiç!es se obtém a cor branca mediante o uso de pigmentos dessa cor @pintura ou usando um suporte de cor branca e deixando sem pintar as -onas da composição ue de$am ser brancas @imprensa.
80 de 163
#s sistemas ()*, &?J se encontram relacionados, á ue as cores primárias de um são os secundários do outro @as cores secundárias são as obtidas por mescla direta das primárias. #utros modelos de definição da cor é o modelo D87, ue define as cores em função dos $alores de tr0s importantes atributos destes, mati-, saturação e brilho.
# mati- @Due fa- refer0ncia 6 cor como tal, por exemplo, o mati- do sangue é $ermelho. A saturação ou intensidade indica a concentração de cor no obeto. A saturação de $ermelho de um morango é maior ue a do $ermelho de uns lábios. ;or sua parte, o brilho @7alue denota a uantidade de claridade ue tem a cor @tonalidade mais ou menos escura. Huando falamos de brilho fa-emos refer0ncia ao processo mediante o ual se acrescenta ou se tira o branco a uma cor. ?ais adiante estudaremos detalhadamente estes conceitos. ;or 3ltimo, existem diferentes sistemas comerciais de definição de cores, sendo o mais conhecido deles o sistema ;antone.
81 de 163
&riado em KRG e buscando um padrão para a comunicação e reprodução de cores nas artes gráficas, seu nome completo é ;antone ?atching 8[stem, e se baseia na edição de uma série de catálogos sobre di$ersos substratos @superf"cies a imprimir, ue subministram uma codificação padroni-ada mediante um n3mero de refer0ncia e uma cor espec"fica. http://www.criarweb.com/artigos/teoria#da#cor#modelos#de#cor.html
6eoria da cor. 6ipos de cor 4este cap%tu"o descre'eremos como a partir das cores primárias se podem conseguir outras, e dependendo das tona"idades fa0er diferentes c"assifica$es. Por Luciano Moreno
;ublicado em% $?$?/+ 7alori-e este artigo% G $otos
# sistema de definição de cores aditi$as ()*, usado em design gráfico digital e em web design, parte de tr0s cores primárias, $ermelho, $erde e a-ul, a partir das uais é poss"$el obter todas as demais de espectro.
82 de 163
Assim, por mescla direta das cores primárias obtemos as cores secundárias, cian, magenta e amarelo, e por mescla direta destas as cores terciárias. 8e continuarmos misturando cores $i-inhas iremos obtendo no$as cores, conseguindo uma representação destas muito importante no design, denominada c"rculo cromático, representati$a da decomposição em cores da lu- solar, ue nos audará a classificar estas e a obter suas combinaç!es ideais.
;artindo do c"rculo cromático podemos estabelecer diferentes classificaç!es das cores, entre as ue destacam% Cores em cálidos e #rios
83 de 163
As cores cálidas dão sensação de ati$idade, de alegria, de dinamismo, de confiança e ami-ade. /stas cores são o amarelo, o $ermelho, o larana e a p3rpura em menor medida. As cores frias dão sensação de tranSilidade, de seriedade, de distanciamento. &ores deste tipo são o a-ul, o $erde, o a-ul es$erdeado, o $ioleta, cian, aua, e 6s $e-es o celeste. Uma cor a-ul auoso é perfeita para representar superf"cies metálicas. 7erdes escuros saturados expressam profundidade. Cores claras ou luminosas e escuras
As cores claras inspiram limpe-a, u$entude, o$ialidade, como ocorre com amarelos, $erdes e laranas, enuanto ue as escuras inspiram seriedade, madure-a, calma, como é o caso dos tons $ermelhos, a-uis e negros. Cores apagadas ou suGas e as cores pastel
84 de 163
#btidos uando se aumenta ou diminui a luminosidade de todo o c"rculo cromático. As cores apagadas expressam obscuridade, morte, seriedade, enuanto ue as cores pastel sugerem lu-, frescor e naturalidade. Bama de cin8as
8ão cores neutras, formadas por igual uantidade de $ermelho, $erde e a-ul. As cores cin-a t0m toda uma expressão ()* hexadecimal do tipo ZHHHHHH, ou sea, os seis caracteres iguais. # cin-a são cores ideais para expressar seriedade, ambigSidade, elegncia, embora sea por nature-a cores um pouco tristes. /m geral, as tonalidades da parte alta do espectro @$ermelhos, alaranados, amarelos costumam ser percebidas como mais enérgicas e extro$ertidas, enuanto ue as das partes baixas @$erdes, a-uis, p3rpuras costumam parecer mais tranSilas e intro$ertidas. #s $erdes e os a-uis se percebem acalmados, relaxados e tranSili-antes. ;or sua $e-, os $ermelhos, laranas, e amarelos são percebidos como cores cálidas, enuanto ue os a-uis, $erdes e $ioletas são considerados cores frias. As diferentes tonalidades também produ-em diferentes impress!es de distncia% um obeto a-ul ou $erde parece mais distante ue um $ermelho, larana ou marrom.
85 de 163
1#+A% Dá ue ter em conta sempre ue a percepção de uma cor depende em grande medida da área ocupada pela mesma, sendo muito dif"cil apreciar o efeito de uma cor determinada se esta se locali-a em uma -ona peuena, sobretudo se esti$er rodeada de outras cores. http://www.criarweb.com/artigos/teoria#da#cor#tipos#de#cor.html
6eoria da cor. :ropriedades das cores As cores t3m umas propriedades inerentes #ue "hes permite se distinguir de outras e gra'ar diferentes defini$es de tipo de cor. Por Luciano Moreno
;ublicado em% $+?$?/+ 7alori-e este artigo% G $otos
+oda cor possui uma série de propriedades ue lhe fa-em $ariar de aspecto e ue definem sua apar0ncia final. /ntre estas propriedades cabe distinguir% 9ati8 @IueA
4 o estado puro da cor, sem o branco ou o preto agregado, e é um atributo associado com a longitude de onda dominante na mistura das ondas luminosas. # ?ati- se define como um atributo de cor ue nos permite distinguir o $ermelho do a-ul, e se refere ao percorrido ue fa- um tom para um ou outro lado do c"rculo cromático, pelo ual o $erde amarelado e o $erde a-ulado serão mati-es diferentes do $erde.
As G cores primárias representam as G mati-es primárias, e mesclando estes podemos obter as demais mati-es ou cores. 'uas cores são complementares uando estão uma frente 6 outra no c"rculo de mati-es @c"rculo cromático. >aturação ou "ntensidade
+ambém chamada &roma, este conceito representa a pure-a ou intensidade de uma cor particular, a $i$acidade ou palide- da mesma, e pode se relacionar com a largura de banda da lu- ue estamos $isuali-ando. As cores puras do espectro estão completamente
86 de 163
saturadas. Uma cor intensa é muito $i$a. Huanto mais se satura uma cor, maior é a impressão de ue o obeto está se mo$endo.
+ambém pode ser definida pela uantidade de cin-a ue contém uma cor% uanto mais cin-a ou mais neutra for, menos brilhante ou menos =saturada= é. Igualmente, ualuer mudança feita a uma cor pura automaticamente baixa sua saturação. ;or exemplo, di-emos =um $ermelho muito saturado= uando nos referimos a um $ermelho puro e rico. ;orém, uando nos referimos aos tons de uma cor ue tem algum $alor de cin-a, as chamamos de menos saturadas. A saturação da cor se di- ue é mais baixa uando se adiciona seu oposto @chamado complemento no c"rculo cromático. ;ara não saturar uma cor sem ue $arie seu $alor, há ue mesclá2la com um cin-a de branco e preto de seu mesmo $alor. Uma cor intensa como o a-ul perderá sua saturação 6 medida ue se adiciona branco e se con$erta em celeste.
#utra forma de não saturar uma cor, é misturá2la com seu complemento, á ue produsua neutrali-ação. *aseando2se nestes conceitos podemos definir uma cor neutra como auela na ual não se percebe com clare-a sua saturação. A intensidade de uma cor está determinada por seu caráter de claro ou apagado.
87 de 163
/sta propriedade é sempre comparati$a, á ue relacionamos a intensidade em comparação com outras coisas. # importante é aprender a distinguir as relaç!es de intensidade, á ue esta muitas $e-es muda uando uma cor está rodeada por outra. Jalor ou Fril1o @JalueA
4 um termo ue se usa para descre$er ue tão claro ou escuro parece uma cor, e se refere 6 uantidade de lu- percebida. # brilho se pode definir como a uantidade de =obscuridade= ue tem uma cor, ou sea, representa o claro ou escuro ue é uma cor com respeito a sua cor padrão. 4 uma propriedade importante, á ue $ai criar sensaç!es espaciais por meio da cor. Assim, porç!es de uma mesma cor com fortes diferenças de $alor @contraste de $alor definem porç!es diferentes no espaço, enuanto ue uma mudança gradual no $alor de uma cor @gradação dará a sensação de contorno, de continuidade de um obeto no espaço. # $alor é o maior grau de claridade ou obscuridade de uma cor. Um a-ul, por exemplo, mesclado com branco, dá como resultado um a-ul mais claro, ou sea, de um $alor mais alto. +ambém denominado tom, é diferente 6 cor, á ue se obtém do agregado de branco ou negro a uma cor base.
F medida ue se agrega mais preto a uma cor, se intensifica tal obscuridade e se obtém um $alor mais baixo. F medida ue se agrega mais branco a uma cor se intensifica a claridade da mesma, obtendo2se com isso $alores mais altos. 'uas cores diferentes @como o $ermelho e o a-ul podem chegar a ter o mesmo tom, se consideramos o conceito como o mesmo grau de claridade ou obscuridade com relação 6 mesma uantidade de branco ou preto ue contenha segundo cada caso. A descrição clássica dos $alores corresponde a claro @uando contém uantidades de branco, médio @uando contém uantidades de cin-a e escuro @uando contém uantidades de preto. Huanto mais brilhante for a cor, maior será a impressão de ue o obeto está mais perto do ue em realidade está. /stas propriedades da cor deram lugar a um sistema especial de representação destes, tal como $imos na seção anterior, sistema D87. ;ara expressar uma cor neste sistema se parte das cores puras, e se expressam suas $ariaç!es nestas tr0s propriedades mediante um tanto por cento.
88 de 163
;odemos usar estas propriedades na busca das gamas e contrastes de cores adeuadas para nossas páginas, sendo poss"$el criar contrastes no mati-, na saturação e no brilho, e é tal$e- este 3ltimo o mais efeti$o. Brupos de cores
&om estes conceitos em mente e tomando como base a roda de cores podemos definir os seguintes grupos de cores, ue nos criarão boas combinaç!es em uma página web% &ores acromáticas% auelas situadas na -ona central do c"rculo cromático, próximos ao centro deste, ue perderam tanta saturação ue não se aprecia nelas o mati- original.
&olores cromáticas cin-as% situadas perto do centro do c"rculo cromático, porém fora da -ona de cores acromáticas, nelas se distingue o mati- original, embora muito pouco saturado.
89 de 163
&olores monocromáticas% $ariaç!es de saturação de uma mesma cor @mati-, obtidas por deslocamento desde uma cor pura até o centro do c"rculo cromático.
&ores complementares% cores ue se encontram simétricas com respeito ao centro da roda. # ?ati- $aria em KOL _ entre um e outro.
90 de 163
&ores complementares próximas% tomando como base uma cor na roda e depois outras dois ue eSidistem do complementar do primeiro.
'uplos complementares% dois pares de cores complementares entre si.
+r"ades complementares% tr0s cores eSidistantes tanto do centro da roda, como entre si, ou sea, formando KQL_ uma da outra.
)amas m3ltiplas% escala de cores entre duas seguindo uma graduação uniforme. Huando as cores extremas estão muito próximas no c"rculo cromático, a gama originada é conhecida também com o nome de cores análogas.
91 de 163
?escla brilhante2t0nue% escolhe2se uma cor brilhante pura e uma $ariação t0nue de seu complementar.
+odos estes grupos de cores formam paletas harm5nicas, aptas para ser usadas em composiç!es gráficas. http://www.criarweb.com/artigos/teoria#da#cor#propriedades#das#cores.html
6eoria da cor. Contrastes de cor & contraste é um fen8meno com o #ua" se podem diferenciar cores atendendo 9 "uminosidade, 9 cor de fundo sobre a #ua" se pro/etam... Por Luciano Moreno
;ublicado em% /?%?/+ 7alori-e este artigo% G $otos
92 de 163
7imos no tema sobre o design euilibrado ue o contrate entre elementos era um aspecto importante na hora de criar uma composição gráfica, e ue uma das formas mais efeti$a de consegui2lo era mediante a cor.
Huando duas cores diferentes entram em contraste direto, o contraste intensifica as diferenças entre ambas. # contraste aumenta uanto maior for o grau de diferença e maior for o grau de contacto, chegando a seu máximo contraste uando uma cor está rodeada por outra. # efeito de contraste é rec"proco, á ue afeta 6s duas cores ue inter$0m. +odas as cores de uma composição sofrem a influ0ncia das cores com as ue entram em contato. /xistem diferentes tipos de contrastes% Contraste de luminosidade
+ambém denominado contraste claro2escuro, se produ- ao confrontar uma cor clara ou saturada com branco e uma cor escura ou saturada de preto.
4 um dos mais efeti$os, sendo muito recomendá$el para conte3dos textuais, ue de$em destacar com clare-a sobre o fundo. Contraste de valor
Huando se apresentam dois $alores diferentes em contraste simultneo, o mais claro parecerá mais alto e o mais escuro, mais baixo.
93 de 163
;or exemplo, ao colocar dois retngulos grenás, um sobre fundos es$erdeados e o outro sobre fundo larana, $eremos mais claro o situado sobre fundo es$erdeado.
A ustaposição de cores primárias exalta o $alor de cada um. Contraste de saturação
#rigina2se da modulação de um tom puro, saturando2o com branco, negro ou cin-a. # contraste pode se dar entre cores puras ou então pela confrontação destes com outros não puros. As cores puras perdem luminosidade uando se adiciona preto, e $ariam sua saturação mediante a adição do branco, modificando os atributos de calor e frie-a. # $erde é a cor ue menos muda misturada tanto com o branco como com o preto.
&omo exemplo, se situarmos sobre o mesmo fundo tr0s retngulos com diferentes saturaç!es de amarelo, contrastará sempre o mais puro. Contraste de temperatura
4 o contraste produ-ido ao confrontar uma cor cálida com outra fria.
94 de 163
A calide- ou a frie-a de Uma cor é relati$a, á ue a cor é modificada pelas cores ue a rodeiam. 8endo assim, um amarelo pode ser cálido com respeito a um a-ul e frio com respeito a um $ermelho. / também um mesmo amarelo pode ser mais cálido se esti$er rodeado de cores frias, e menos cálidas se o rodeiam com $ermelho, larana, etc. Contraste de complementares
'uas cores complementares são as ue oferecem untas melhores possibilidades de contraste, embora resultem muito $iolentas $isualmente combinar duas cores complementares intensas.
;ara conseguir uma harmonia con$ém ue um deles sea a sua cor pura, e a outra estea modulado com branco ou preto. Contraste simult3neo
4 o fen5meno segundo o ual nosso olho, para uma cor dada, exige simultaneamente a cor complementar, e senão der, ele mesmo a produ-.
A cor complementar engendrada no olho do espectador é poss"$el $02la, porém não existe na realidade. 4 de$ido a um processo fisiológico de correção no órgão da $ista.
95 de 163 utros contrastes
Uma cor pura e brilhante aplicado em uma grande extensão da página costuma ser irritante e cansati$o @especialmente, o amarelo, enuanto ue essa mesma cor, usada em peuenas proporç!es e sobre um fundo apagado pode cria a sensação de dinamismo.
'uas cores claras brilhantes colocadas uma ao lado de outra impactam nossa $ista, produ-indo um efeito de reeição, enuanto ue se situamos essas mesmas duas cores uma dentro da outra o efeito muda completamente, resultando agradá$el.
Uma mesma cor pode mudar muito seu aspecto $isual dependendo da cor na ual se encontrar embutida. /ste efeito dá mudança de apar0ncia de uma cor dependendo da incidente sobre ela, do material de ue está formado ou da diferente cor ue lhe sir$a de fundo recebe o nome de 9etamerismo.
1este exemplo $emos dois uadrados, um de cor de fundo a-ul, e outro preto, ambos com um uadrado amarelo dentro. # dois uadrados interiores são do mesmo amarelo,
96 de 163
porém parecem diferentes% no fundo a-ul se mascara a pure-a do amarelo, enuanto ue no fundo preto o amarelo mostra toda sua pure-a e frescor. http://www.criarweb.com/artigos/teoria#da#cor#contrastes#de#cor.html
6eoria da cor. ;studo de algumas cores " 4este cap%tu"o descre'eremos as sensa$es #ue produ0em a"gumas cores como o 'erme"ho, o 'erde e o a0u", assim como seu poss%'e" uso e seu significado em uma web. Por Luciano Moreno
;ublicado em% $/?%?/+ 7alori-e este artigo% G $otos
8abe2se bem pelos psicólogos a influ0ncia emocional ue desencadeiam as cores no esp"rito humano. As respostas emocionais $ariam enormemente dependendo da cor e da intensidade desta, assim como das diferentes combinaç!es de cores ue se podem dar. 1ormalmente cada cor indi$idual le$a associado um conunto de emoç!es e associaç!es de idéias ue lhes são =próprias=. Dá ue destacar ue estas emoç!es associadas correspondem 6 cultura ocidental, á ue em outras culturas as cores podem expressar sentimentos totalmente opostos aos acima indicados @por exemplo, no Bapão a cor branca simboli-a a morte. As sensaç!es ue produ-em as cores dependem de fatores culturais e ambientais, e muitas $e-es dos próprios preu"-os do usuário. Ademais há ue somar a isto ue nem todas as pessoas $0em as cores da mesma forma, á ue há pessoas ue só podem $er bem a gama a-ul \ larana, outros o $ermelho \ $erde e outras degeneram o branco \ preto. Inclusi$e se percebem as cores de forma diferente com o olho direito ue com esuerdo. 7amos estudar a seguir as propriedades psicológicas das principais cores e suas combinaç!es mais acertadas. Jermel1o
# $ermelho é a 3nica cor brilhante de $erdade e pura em sua composição. 4 exultante e agressi$a. 4 o s"mbolo da paixão ardente e desenfreada, da sexualidade e do erotismo. 4 uma cor cálida associada com o sol e o calor, de tal maneira ue é poss"$el se sentir mais auecido em um ambiente pintado de $ermelho, embora obeti$amente a temperatura não tenha $ariado. 8eu nome procede do latim =russus=.
97 de 163
# $ermelho é a cor do sangue, da paixão, da força bruta e do fogo. Utili-a2se nas festas do /sp"rito 8anto, iluminando a chama do amor di$ino, e nas festas de 8emana 8anta e ;entecostes. &or fundamental, ligada ao princ"pio da $ida, sugere $italidade, entusiasmo, paixão, agitação, força, sexo, calor, fogo, sangue, amor, audácia, $alor, coragem, cólera, crueldade, intensidade e $irilidade, estando associado com sentimentos enérgicos, com a excitação apaixonada ou erótica. 4 a cor mais sensual de todo o c"rculo cromático.
+ambém sugere alarme, perigo, $iol0ncia, ira e aborrecimento. ?uitos animais e plantas usam o $ermelho para indicar sua periculosidade, e o homem o utili-a em todo tipo de indicaç!es de proibição e perigo.
98 de 163
# $ermelho é uma cor contro$ertida, podendo ser atrati$a e sedutora como uns lábios de mulher pintados lábios de mulher pintados ou desencadear noo ou en5o, como uando se contempla uma poça de sangue. /m uma composição pode ser usado para chamar a atenção, para incitar uma ação ou para marcar os elementos mais importantes de uma composição ou página web, porém uando é usado em grande uantidade cansa a $ista em excesso.
Um problema associado ao uso da cor $ermelha é a má gradação ue oferece, á ue ao modificar suas propriedades $amos obtendo cores rosadas, pouco aptas para seu uso na web.
Uma poss"$el solução a este problema é deslocarmos no c"rculo cromático para os $ioletas ou para os laranas, ou sea, usar o $ermelho como centro da gama e completar esta com suas cores análogas.
99 de 163
#utra boa forma é combinar o $ermelho cin-a e com as cores de sua tr"ade. Huanto ao seu complementar, o $erde, embora contraste muito bem com ele, untos não criam um efeito $isual adeuado. Jerde
# $erde é a cor mais tranSila e sedati$a de todas. 4 a cor da calma indiferente% não transmite alegria, triste-a ou paixão. 8eu nome deri$a do latim =$iridis= @ue tem sei$a. /stá associado a conceitos como 1ature-a, sa3de, dinheiro, frescor, crescimento, abundancia, fertilidade, plantas, bosues, $egetação, prima$era, frescor, esmeralda, honra, cortesia, ci$ismo e $igor. # $erde ue tende ao amarelo cobra força ati$a e soleada se nele predominar o a-ul será mais sombrio e sofisticado.
8ignifica a esperança, os bens ue hão de $ir, o deseo de $ida eterna. 4 a cor própria do ano eclesiástico e de grande n3mero de festas, assim como de certos domingos antes de ;entecostes. 8ua paleta de $ariaç!es é rica em cores apro$eitá$eis para o design gráfico e a web.
100 de 163
'i-em ue é a cor mais descansada para o olho humano e ue tem poder de cura @ será por isso ue o uniforme dos cirurgi!es são $erdesY.
4 uma cor contraditória, pois a muitas pessoas lhes influi um caráter desagradá$el, enuanto u a outras lhes sugere mais paixão ue o $ermelho.
101 de 163
1as composiç!es gráficas e páginas web dá um bom ogo. 8eus degrades são bons e suas $ariaç!es de tons também, formando gamas apropriadas apropr iadas para desenho.
8eu complementar é o $ermelho e, embora contrastem muito bem, não costumam fa-er boa combinação. &om seus análogos e sua tr"ade tr "ade é poss"$el obter paletas aceitá$eis para uma página web.
08ul
A cor a-ul é o s"mbolo da profundidade. Imaterial e fria, suscita uma predisposição fa$orá$el. A sensação de placide- ue pro$oca o a-ul é distinta da calma ou repouso terrestres, próprios do $erde. 4 uma cor reser$ada e entra dentro das cores frias. /xpressa harmonia, ami-ade, fidelidade, serenidade, sossego, $erdade, dignidade, confiança, masculinidade, sensualidade e comodidade. 8eu nome é de origem incerta, porém parece ue procede pr ocede do snscrito =raa$arta= @cacheado do rei. /sta cor se associa com o céu, o mar e o ar. # a-ul claro pode sugerir otimismo. Huanto mais se clarifica mais perde atração e se torna indiferente e $a-io. Huanto mais se
102 de 163
escurece mais atrai para o infinito. ;ossui também a $irtude de criar a ilusão óptica de retroceder.
4 a cor do céu sem nu$ens, sem ameaças, onde $oam as a$es com liberdade, da água cristalina, fonte de $ida para animais e plantas, da +erra, nosso belo planeta a-ul.
/stá associado a conceitos como seriedade, compromisso, lealdade, ustiça e fidelidade, porém também pode expressar melancolia, triste-a, passi$idade e depressão. 8e for muito pálido pode inspirar frescor e incluso frio. 8e for intermediário, dá a sensação de elegncia, de frescor. 8e for escuro dá a sensação de espiritualidade, de seriedade, de responsabilidade.
103 de 163
# a-ul é uma cor ue oferece muitas possibilidades nas composiç!es gráficas em geral ger al e nas páginas web em concreto. 4 utili-ado amplamente como cor corporati$a, pela seriedade e confiança ue inspira, e admite bons degrades, podendo ser a cor dominante em uma página.
&ombina muito bem com seu complementar, o larana, e com as $ariaç!es deste, sendo t"picos os fundos a-uis com textos laranas, sobretudo em dintéis com logotipo.
+ambém oferece uma boa gama de análogos e fa- bons ogos com as cores de sua tr"ade.
104 de 163
4 uma cor ue influencia sobre o apetite, diminuindo este, certamente porue não há nenhum alimento a-ul na nature-a, por isso não é aconselhá$el seu uso para uma página sobre receitas de co-inha ou produtos aliment"cios. http://www.criarweb.com/artigos/teoria#da#cor#est!do#alg!mas#cores.html
6eoria da cor. ;studo de algumas cores "" Acabamos a sess!o da teoria da cor com o estudo de mais cores, as sensa$es #ue produ0em e sua con'eni3ncia de uso nos web sites.
Por Luciano Moreno
;ublicado em% /$?&?/+ 7alori-e este artigo% Q $otos
&ontinuamos com o estudo de diferentes cores. 0marelo
A cor amarela é o s"mbolo da deidade em muitas culturas, e é a cor mais luminosa, mais cálida, ardente e expansi$a. 4 uma cor otimista, moderna, e denota alegria, entusiasmo, paixão, força, sexo, calor, prima$era, inoc0ncia, infncia, u$entude. +ambém se usa para expressar perigo e precaução. 8eu nome procede do latim =am6rus= @amargo. 4 a cor do sol, da lu- e do ouro, e como tal é $iolento, intenso e agudo.
8e for muito brilhante pode indicar perigo, e se for muito sua$e pode sugerir delicade-a. Um ambiente amarelo médio ou pálido fa- as pessoas se sentirem c5moda, uente.
105 de 163
Associa2se sempre o amarelo 6 intelectualidade e ao pensamento claro e há psicólogos ue di-em ue esta cor auda as pessoas a memori-arem dados.
# amarelo chama muito a atenção em um ambiente ou composição, utili-ando2se muitas $e-es em elementos ue con$ém tornar in$is"$eis. ;orém, há ue ter em conta ue é a cor ue mais cansa 6 $ista humana, podendo chegar a ser esmagadora, porue causa uma estimulação $isual excessi$a, podendo originar sensação de irritabilidade nas pessoas.
106 de 163
&om o amarelo se obtém melhores degrades do ue com o $ermelho, porém conforme $ai se tirando saturação $ai se tornando pouco percept"$el sobre fundos claros.
/ntretanto, é uma cor ue combina bem com suas similares @$erdes e alaranados, podendo se obter com elas boas paletas para uma composição.
&om suas cores análogas combina muito bem, assim como com seu complementar, o roxo, porém com as de sua tr"ade cria 6s $e-es um efeito $isual pesado demais, de$endo ser estudado com cuidado seu uso conunto.
&omo regra geral, seu uso em uma página web de$e ficar limitado a elementos pontuais @fa-endo parte de um logotipo ou "cone, em textos curtos sobre fundo escuro, etc, procurando sempre ue ocupe uma -ona limitada. EaranGa
107 de 163
A cor larana tem um caráter acolhedor, cálido, estimulante e uma ualidade dinmica muito positi$a e energética. ;ossui uma força ati$a, radiante e expansi$a. 8eu nome deri$a do árabe =narand=. (epresenta a alegria, a u$entude, o calor, o $erão. 4 a cor da carne e a cor amistosa do fogo do lar. 4 $ibrante como a lu- do sol, exótica como as frutas tropicais, suculenta como a larana, sugere informalidade no trato e ami-ade. ;orém, também pode expressar instabilidade, dissimulação e hipocrisia.
A paleta de $ariaç!es do larana é a mesma ue a da cor marrom, á ue ambas cores são de nature-a similares.
108 de 163
4 uma cor ue destaca muito sobre o ambiente ue lhe rodeia, por isso se pode usar para dar um maior peso $isual a certos elementos de uma composição, embora há ue ser comedido em seu uso, á ue se for brilhante enche muito a $ista do espectador.
Admite bons degrades e combina muito bem com sua cor complementar, dando bons contrastes, sobretudo uando um é claro e o outro escuro.
;elo contrário, com as cores de sua tr"ade cria combinaç!es ue podem resultar coloridas demais, por isso, ao usá2las se de$erão utili-ar com sumo cuidado, deixando2as para elementos de peuenas dimens!es.
(osa
A cor rosa, uma espécie de p3rpura pálida, sugere calma e tranSilidade. Associado ao sexo feminino em nossa cultura, pode chegar a ser interpretado como debilidade em certos ambientes. 8eu nome $em do latim =rosa=, e sua paleta de $ariaç!es ue a mesma do p3rpura, ao ser ambos cores similares em sua nature-a.
109 de 163
4 uma cor de uso complicado. +0m maus degrades e capta muito a atenção do espectador, sobretudo se for brilhante ou muito saturada, por isso fica indicado na web para -onas de peuena superf"cie ou elementos pontuais. 8e for apagado ou pouco saturado, pode2se usar como fundo de página, sobretudo em páginas destinadas ao p3blico feminino.
:5rpura
A p3rpura se define cor como um $ermelho ue puxa a um $ioleta. 4 de nature-a similar ao rosa, e ambas cores t0m associada a mesma paleta de $ariaç!es.
110 de 163
8eu nome $em de um molusco marinho ue segrega uma tinta ue ao contato com ar aduire uma cor $ermelha mais ou menos escura, $ermelho $ioleta, com a ual se prepara$a uma tinta custosa, com a ual se da$a cor 6s próprias $estimentas de sumos sacerdotes, c5nsules, reis, imperadores, etc. ;or este moti$o, na antiguidade era considerado o mais belo, o mais está$el e a mais preciosa das cores.
4 uma cor bastante contraditória. 8ugere abundncia, sofisticação, intelig0ncia, espiritualidade, religiosidade, dignidade, tranSilidade, mistério, aristocracia e paixão. ;orém, também pode e$ocar fri$olidade, artificialidade, luto, morte, náusea, orgulho e ostentação.
111 de 163
4 uma cor ue combina bem, permitindo gamas $ariadas, e contrasta fortemente com seu complementar, o amarelo.
Jioleta
# $ioleta é um roxo claro, parecido ao da flor de mesmo nome, obtido misturando o $ermelho e a-ul. 8eu nome deri$a do latim =$iola=. 4 a cor da calmaria, da lucide- e da reflexão. 4 m"stico, melancólico e pode representar também a intro$ersão. 4 a cor da penit0ncia, e se emprega pelo Ad$ento, em Huaresma, nas 7ig"lias, etc. Huando o $ioleta deri$a o lilás ou roxo, se simplifica e perde seu potencial de concentração positi$a. Huando tende 6 p3rpura proeta uma sensação de maestade.
112 de 163
Apresenta uma paleta de $ariaç!es completa, porém não muito 3til no webdesign, sobretudo em caso de -onas de tamanho médio e grande, á ue é uma cor estranha.
(epresenta a fantasia, o ogo, a impulsi$idade e os estados de sonho, embora também pode sugerir pesadelos ou loucura. 9arrom
A cor marrom como tal é uma mescla na ue predominam o $ermelho e o $erde, podendo se obter por desaturação do larana ou por mescla dessa cor com o preto, ue em diferentes tratados sobre a cor aparecem associadas ambas cores, sendo sua paleta de $ariaç!es a mesma.
113 de 163
4 uma cor masculina, se$era, confortá$el, ue e$oca o ambiente outonal e dá a impressão de gra$idade e euil"brio. 4 a cor realista, tal$e- porue sea a cor da terra ue pisamos. 8eu nome procede do franc0s =marrón= @castanha comest"$el dessa cor, e sugere idade, coisas $elhas, madeira, tiolo, pele, couro, lar.
1as páginas web dá bons resultados, á ue é uma cor sua$e, agradá$el 6 $ista, c5moda, ue gera uma gama extensa de cores apro$eitá$eis.
:reto, cin8a e branco
A cor preta $em definida pela aus0ncia de lu- e cor, sendo seu código hexadecimal representati$o ZLLLLLL, embora uase todas as cores ao tirar brilho, tom ou saturação $ão se aproximando ao preto. As superf"cies de cor preta são auelas ue absor$em todas as longitudes de onda da lu- solar, pelo ual não refletem nenhuma radiação $is"$el. 8eu nome procede do latim =n"ger=. # preto confere nobre-a e elegncia, sobretudo uando é brilhante, e é a cor da
114 de 163
elegncia, da sedução, do mistério, do sil0ncio, da noite, do cor$o, do mal, do clandestino ou ilegal e, da triste-a e da melancolia, da infelicidade e des$entura, do aborrecimento e da irritabilidade. /m nossa cultura é também a cor da morte e do luto, e se reser$a para as missas de defuntos e a 8exta2>eira 8anta. 4 uma cor uase imprescind"$el em toda composição, podendo ser usada como cor do ambiente de certos elementos, em elementos separadores de espaços ou como cor de fundos, em cuo caso nos conte3dos da página de$erão predominar as cores claras para ue se possam $isuali-ar corretamente.
4 também a cor mais usada para os textos, de$ido ao alto contraste ue oferece sobre fundos brancos ou claros.
# preto não possui degrades, ao ser uma cor pura @ou uma não2cor, e enuanto modificamos sua saturação obtemos cin-as, cores neutras, formadas por uantidades iguais de $ermelho, $erde e a-ul. 1a pintura se obtém normalmente misturando o branco e o preto. # cin-a é uma cor neutra e passi$a, ue tra- pouca ou nenhuma informação $isual. 4 a cor do céu coberto, do ferro e do merc3rio, e sugere seriedade, maturidade, neutralidade, euil"brio, indecisão, aus0ncia de energia, d3$ida e melancolia, e se usa
115 de 163
para expressar as coisas ou pessoas carentes de atrati$o ou singularidade. 8eu nome parece deri$ar do pro$ençal =gris=. 4 uma cor ue pode resultar monótona se se usa em demasia em uma composição, e está muito associada 6s aplicaç!es informáticas, tal$e- porue a maioria das interfaces gráficas é de cor cin-a ou o contém.
#s cin-as meio2claros @ao redor do Z&&&&&& t0m pouca atração $isual, sendo ideais para fundos ou elementos de preenchimento ue não tra-em informação ao espectador.
8e $amos aumentando progressi$amente a luminosidade do cin-a chega um momento em ue obtemos a cor branca, de código Z>>>>>>, a lu- pura, a união de KLLX das tr0s cores primários aditi$as, $ermelho, $erde e a-ul. # branco representa a pure-a, a inoc0ncia, a limpe-a, a le$e-a, a u$entude, a sua$idade, a pa-, a felicidade, o triunfo, a glória e a imortalidade.. 4 a cor da ne$e, das nu$ens limpas, do leite fresco. /mprega2se nas festas do 8enhor, da 7irgem, dos 8antos e nas cerim5nias nupciais. 4 uma cor latente, capa- de potenciar as outras cores $i-inhas, criando uma impressão luminosa de $a-io positi$o e de infinito. # branco é o fundo uni$ersal da comunicação gráfica. 1a imprensa não se costuma manear cor, e sim ue se apro$eita para representá2lo a cor branca do suporte sobre o ual se imprime. 1a web, a cor branca se produ- no monitor enfocando nos pontos de tela os tr0s canh!es de cor 6 máxima intensidade. 4 uma cor fundamental no design, á ue, além de se usar como cor para os elementos gráficos e textuais, também define normalmente os espaços $a-ios da composição ou página web.
116 de 163
/stes espaços em branco são elementos de design tão importantes como os de cor, e se podem obser$ar com facilidade afastando2se da tela do computador e entornando os olhos, com o ue distinguiremos melhor as diferentes -onas $isuais da página.
1ão costuma ser con$eniente para os textos, sal$o ue esteam situados sobre um fundo muito escuro sobre o ue contrastem bem. 1ão esuecemos ue os conte3dos textuais de$em aparecer sempre perfeitamente leg"$eis em uma página. 760% # significado da cor pode mudar nos diferentes pa"ses, culturas e religi!es.
;or exemplo, na &hina o $ermelho se associa com os casamentos e representa boa sorte e na ndia esta cor está unida ao ca$alheirismo. +radicionalmente se relaciona com os ci3mes, a in$ea, a adolesc0ncia, o riso e o pra-er, e inclusi$e em alguns casos se denomina como a cor da má sorte. ;or este moti$o, na hora de usar as cores como fonte de impulsos psicológicos de$eremos estudar detalhadamente o p3blico obeti$o ao ue irá destinada a composição gráfica ou página web. http://www.criarweb.com/artigos/teoria#da#cor#est!do#alg!mas#cores#ii.html
0 cor na web. Cores disponíveis para a web *escobriremos o n6mero de cores #ue poderemos usar em uma web, e se s!o estes mesmos se a web se executa em um computador ou em outro. Por Luciano Moreno
;ublicado em% *?&?/+ 7alori-e este artigo% Q $otos
117 de 163
# olho humano pode distinguir aproximadamente entre P e KL milh!es de cores, o ue fa- com ue a $ista sea para nós o principal sentido ue nos une com o exterior, podendo2se afirmar ue ao redor de OLX da informação ue recebemos do mundo exterior sea $isual.
;intores e designers gráficos utili-am esta capacidade humana de apreciar cores para criar obras ue aprofundem na alma e ue inspirem sentimentos nos seres ue as contemplam. ;orém, o ue podemos fa-er uando de$emos nos expressar com um n3mero limitado de coresY Dá poucos anos, a maioria dos computadores dos ue dispunha o p3blico em geral eram, com a $isão ue temos hoe em dia, umas máuinas grandes, lentas e com poucos ser$iços, não só ao n"$el de memórias e processadores, como também ao n"$el de ser$iços gráficos. / os periféricos eram ainda assim muito limitados. +udo isso origina$a ue a n"$el gráfico estas máuinas trabalha$am somente com Q< cores. Atualmente, as máuinas informáticas aumentam dia a dia seus ser$iços, e o normal agora é trabalhar com milh!es de cores e com monitores de altas precis!es. A maioria das pessoas á disp!e de a$ançados cart!es gráficos, com memórias de até M megas, ue desen$ol$em um trabalho de milh!es de texels @ elemento de textura, é aos gráficos G' o ue o pixel é aos gráficos bidimensionais. ;orém, na hora da $erdade, de uantas cores dispomos para trabalhar os web designersY A resposta a esta pergunta é um pouco deprimente, á ue nós dependemos na hora de mostrar nossas páginas de uns programas espec"ficos, os na$egadores ou browsers, ue são os encarregados de apresentar em tela o conte3do das páginas ue lhe chegam desde o ser$idor mediante o protocolo D++;. /stes programas, além da grande diferença na hora de trabalhar ue há entre eles, interagem com o sistema operacional no ue correm, o ue origina al final um galimatias ue fa- com ue as cores de nossas páginas $ariem segundo o computador usado, segundo o na$egador e segundo o sistema operacional no ual este está montado. ;or tudo isto, os milh!es de cores das ue se disp!e para trabalhar ficam redu-idas a somente umas poucas @e muito poucas na hora de criar páginas web.
118 de 163
# sistema operacional identifica tr0s cores básicas, a partir das uais constrói todas as demais mediante um processo de mescla por unidades de tela @pixels. /stas cores, como $imos, são o $ermelho, o a-ul e o $erde, e o sistema por elas definido se conhece como ()*. #s bits de profundidade de cor marcam uantos bits de informação dispomos para definir as cores deri$adas destas cores primárias. Huanto mais bits, maior o n3mero de $ariaç!es de uma cor primária podemos ter. ;ara Q< cores precisa2se O bits, para obter milhares de cores necessitamos K bits @cor de alta densidade e para obter milh!es de cores são necessários QM bits @cor $erdadeira. /xiste também outra profundidade de cor, GQ bits, porém com ela não se conseguem mais cores, e sim ue as ue usemos se mostrem mais rapidamente. F princ"pio, a maioria dos usuários dispunha de monitores capa-es de interpretar somente Q< cores @O bits. 8e le$armos em conta ue o próprio sistema operacional fica com ML para seu gerenciamento interno, o resultado é ue restam QK cores para apresentar gráficos em tela, cores ue por outro lado não esta$am definidas de forma padrão. /m KRRM a empresa 1etscape estabeleceu uma subdi$isão do c"rculo cromático em QK cores eSidistantes entre si, obtendo um conunto de cores ue denominaram 1etscape &olor &ube.
/sta di$isão do c"rculo se corresponde com tons de $ermelho, de a-ul e de $erde, a partir dos uais se obtém, por mescla entre eles, as QK cores poss"$eis, pelas uais todas elas terão um código hexadecimal na ual cada cor primária $em definida por uma dupla de $alores iguais, de$endo estes ser LL,GG,,RR,&& ou >>.
&om o passar do tempo os computadores foram aumentando seus ser$iços gráficos, sendo comum, na atualidade, profundidades de cor de K, QM e GQ bits. 8e usarmos uma profundidade de QM bits, correspondente a milh!es de cores, disporemos de uma ampla gama para trabalhar. Huando usamos uma profundidade de cor de K bits dispomos de milhares de cores, porém surge então o problema adicional de ue a di$isão desta gama de cores não se corresponde com a de Q< cores nem com
119 de 163
a de milh!es de cores, dando o mesmo código cores le$emente diferentes. ;or exemplo, ZGGRR é a mesma cor a Q< e a milh!es, porém não é igual ueo obtido com milhares de cores.
&om o tempo, adotou2se uma lista de cores 6s ue se colocou um nome representati$o em ingl0s, de tal forma ue os modernos na$egadores interpretam o mesmo e o tradu-em internamente por seu $alor hexadecimal eui$alente. http://www.criarweb.com/artigos/cores#disponi$eis#para#web.html
0 cor na web. :aletas de cor seguras. Websa#e e (eall
;ublicado em% $+?&?/+ 7alori-e este artigo% Q $otos
A maioria das cores obtidas com K bits de profundidade são diferentes 6s obtidas com O e QM bits. Ademais, se se usam O bits @Q< cores, o monitor será incapa- de apresentar muitas das cores obtidas se a página ti$er sido desenhada com milhares de cores. >ica patente então, a necessidade de trabalhar com uma gama de cores compat"$eis com todas as profundidades. ;orém, uantas são estas coresY Aui $em a decepção do webdesigner, á ue este n3mero é na $erdade muito baixo. +radicionalmente se considerou como paleta de cores segura a ue mencionamos antes, formada pelas QK cores do tipo Zaabbcc, onde a, b e c de$em ser L,G,,R,& ou >, ue recebe o nome de Teb8afe. 1a $erdade, esta paleta não é segura, de$ido ao problema com a profundidade de milhares de cores. 8e acrescentarmos a isto a $ariá$el adicional de ue cada sistema operacional e cada na$egador interpretam as cores a sua $ontade, o resultado final é ue
120 de 163
só dispomos de uma peuena paleta, formada por QQ cores. /sta paleta se conhece com o nome de (eall[8afe. 1a seguinte imagem, $oc0s t0m a paleta Teb8afe. 'entro dela, destacados em cor $ermelha, se encontram as cores da paleta (eall[8afe.
&omo compreenderão, trabalhar com somente as QQ cores da paleta (eall[8afe não nos permite construir um web site muito atrati$o, á ue a limitação imposta resulta excessi$a. &omo alternati$a podemos trabalhar dirigindo2nos ao maior n3mero de usuários poss"$eis, e para isso podemos desenhar nossas páginas usando bem a paleta de QK cores, com o ual teremos coberto a categoria de usuários com sistemas de cor de O bits e de QM bits. /sta paleta Teb8afe segundo o sistema operacional usado.
121 de 163
/ também segundo o na$egador web.
122 de 163
/stas limitaç!es de cores podem parecer uma tra$a ao design de páginas web, porém não de$emos dar mais importncia ue a de$ida. /m primeiro lugar, QK cores bem utili-adas dão muito ue fa-er. / em segundo lugar, podemos desenhar nossas páginas com toda a gama de QM bits @milh!es de cores á ue atualmente a maioria de usuários manea computadores de altos ser$iços. 1este ponto, o sentido comum, a experi0ncia e a testa da página em diferentes sistemas e na$egadores são as melhores armas para conseguir o design buscado. http://www.criarweb.com/artigos/paletas#de#cor#seg!ras#websa"e#reall&sa"e.html
0 cor na web. problema das imagens As cores das imagens podem sofrer mudanas se ti'erem #ue estar encapsu"adas em estruturas tais como tabe"as, camadas, etc. Isto pode ter uma so"u!o aproximada, porém n!o ótima. :eremos os prob"emas #ue se podem apresentar. Por Luciano Moreno
;ublicado em% /*?'?/+ 7alori-e este artigo% Q $otos
Um problema adicional relacionado com as cores se produ- uando deseamos inserir em nossa página uma imagem dentro da célula de uma tabela, de uma camada, etc., especialmente se se trata de uma imagem em formato )I>, á ue estes tipos de gráfico t0m limitados sua gama de cores a Q<. # fato é ue freuentemente nos deparamos com ue a cor de fundo da imagem não nos coincidirá com a cor de fundo da célula ou camada, embora o código hexadecimal empregado em ambos sea o mesmo.
Isto é de$ido a ue 6s $e-es o formato )I> não é capa- de interpretar de$idamente cores ue estão fora da paleta segura, em cuo caso pode optar por aproximá2lo 6 cor mais parecida de sua paleta ou tentar simular a cor pedida misturando duas cores das ue disp!e, procedimento ue se conhece pelo nome de dithering.
123 de 163
# problema se acentuará mais ainda se o usuário disp!e de um sistema de Q< cores, á ue então o sistema não será capa- de interpretar corretamente nem a cor do fundo do )I> nem a cor de fundo da tabela ou container, com o ual o contraste entre imagem e célula ou camadas se acentua. ;ara solucionar este problema podemos fa-er tr0s coisas% • • •
Usar cores e fundo pertencentes 6 paleta Teb8afe. Usar imagens )I> de fundo transparente. 8ituar as imagens fora de células de tabela ou camadas ue de$am ter cor de fundo.
1enhuma destas soluç!es é excelente, mas são as 3nicas ue dispomos. 8e optarmos por usar uma imagem de fundo transparente, de$eremos pensar ue se esta $ai funcionar como um linN e configurarmos um estilo para o estado ho$er destes elementos, a cor de fundo da imagem mudará uando o ponteiro do mouse se situar sobre ela. 8e esti$ermos desenhando para milhares de cores podemos sal$ar a imagem em formato ;1), ue teoricamente suporta milhares de cores e transpar0ncias, embora haa ocasi!es em ue a interpretação da cor de fundo da imagem não é correta neste formato. ;ortanto, a melhor solução ao problema das imagens é utili-ar sempre para os fundos cores da paleta Teb8afe, á ue desta forma teremos garantida a compatibilidade entre fundos a Q< cores e a milhares de cores. http://www.criarweb.com/artigos/cor#na#web#o#problema#das#imagens.html
0 cor na web. Cores e partes de uma página 7 importante saber esco"her as cores #ue definir!o uma parte da página para #ue se/a fact%'e" o cometido desta. :eremos #ue cores s!o as mais apropriadas para cada se!o do site. Por Luciano Moreno
;ublicado em% )?'?/+ 7alori-e este artigo% Q $otos
124 de 163
&ada elemento de uma página web e cada agrupamento deles, de$e desempenhar na mesma um papel perfeitamente definido, ue ademais de$e se corresponder com seu peso $isual dentro do total da página. Uma das ferramentas mais potentes com as uais o web designer conta para cumprir este obeti$o é o uso adeuado das cores. 1os casos de páginas mais complexas, e desde o ponto de $ista do ue o usuário obser$a, podemos di$idir estas em corpo ou seção principal, dintel, menu e rodapé da página. 8em d3$ida alguma a parte mais importante das mencionadas é o corpo da página, á ue ele $ai figurar a informação ue ueremos transmitir ao $isitante. ;or isto, as cores dominantes nela de$em permitir uma leitura de conte3dos clara e amena, assim como uma perfeita $isuali-ação de seus elementos gráficos. ;ara isso, de$eremos usar uma cor para o texto ue contraste adeuadamente sobre o do fundo da página. *ons contrastes se obt0m% 2 &om fundos claros e textos escuros, ou ao contrário.
2 &om fundos frios e textos cálidos, ou ao contrário, sempre ue não seam análogos.
# tema do contraste entre fundo e texto é dif"cil de manear nas páginas web, de$ido fundamentalmente 6 pouca resolução ue temos na tela do monitor, ue costuma ser de uns <.QLL pontos por polegada uadrada, uase GLL $e-es menos ue a resolução ue tem uma página de re$ista tradicional. ;or isso, o t"pico conunto fundo branco2texto preto continua sendo nas páginas web o mais ideal para conseguir um ótimo contraste. #s fundos pretos ou muito escuros podem dar um bom contraste com uase ualuer cor de texto ue sea luminoso, enuanto os fundos coloridos podem chegar a trabalhar bem se são apagados e de baixa saturação, como é o caso de tons pastéis, cin-as ou terra. ;or outro lado, não é recomendá$el usar imagens de fundo nas páginas web, sal$o se esta for de uma cor e tom muito apagados e com pouco conte3do gráfico por unidade de tela, á ue distraem muito o usuário e mascaram excessi$amente o texto e os demais elementos da página. 8ó se de$em usar uando se reali-a um bom estudo do mesmo por um profissional do web designer, á ue além do exposto antes desacelera muito o carregamento da página. #s linNs representados nesta seção de$em ser claramente diferenciados pelo usuário, sobretudo se a página for dirigida a um p3blico muito geral. 8e não usamos as cores de linN padrão @a-uis $i$os com texto sublinhado, sim ue de$eremos usar uma cor ue destaue claramente do texto informati$o e do fundo.
125 de 163
# dintel se locali-a por costume na parte superior da página, e nele costuma2se @na $erdade de$e2se exibir o logotipo de nossa página, associação ou empresa. 4 importante a presença de um logotipo, á ue cria um signo de continuidade e de identidade em nossas páginas, mostrando aos $isitantes rapidamente onde se encontram. A cor deste de$e ser tal ue destaue claramente sobre o fundo.
1os idiomas ocidentais se l0em as páginas de cima para baixo e da esuerda para direita, moti$o pelo ual o logotipo se situa uase sempre na esuina superior esuerda. 8e a cor de nosso logo for parecida ao ue $amos dar ao fundo da página podemos criar um ambiente ao redor do mesmo ue permita sua correta $isão, o ue se costuma conseguir situando uma banda na -ona superior da página, com uma cor de fundo diferente ao do corpo da mesma e tal ue o logo destaue adeuadamente sobre ele. +ambém é normal situar nesta -ona, 6 direita do logo, uma mensagem clara e direta sobre a identidade e o conte3do da página. # menu de na$egação é tal$e- o elemento mais interati$o de uma página, facilitando ao $isitante uma rápida na$egação por todo o conte3do do web site. 8eus linNs de$em
126 de 163
reunir o ser facilmente $is"$eis com o não ser impactantes demais, á ue não de$em tirar importncia nem ao cabeçalho nem ao texto do corpo.
;odemos criar para esta -ona uma banda $ertical de uma cor diferente ao do corpo, ue pode ser igual ao do cabeçalho ou não. 8eus linNs podem se fundir um pouco com o fundo, dando assim uma sensação de continuidade. ?uitos designers se baseiam nos menus de imagens para conseguir isto, pois lhes permitem ter um maior controle sobre o resultado final. /m contrapartida, demorarão mais em carregar. Uma boa solução é o uso de textos ou imagens ue inicialmente não destacam demais sobre o fundo, mas ue ao situar o cursor sobre elas se iluminam ou mudam a cor, produ-indo2se um efeito positi$o com isso.
+ambém é corrente usar a parte baixa do dintel para inserir nela o menu de na$egação. 1este caso, sua cor não de$e destacar em excesso sobre o do dintel, de$endo buscar sempre a plena integração $isual entre ambos.
127 de 163
;or 3ltimo, o rodapé de página é o elemento menos importante da página, de tal forma ue muitos autores nem seuer o consideram. &aso de se use, não con$ém ue sua cor mude com respeito ao fundo do corpo, e se o fa- de$e ser muito ligeiramente, á ue senão podemos distrair a atenção do usuário e criar um corpo de página estreito.
1o rodapé da página costuma2se colocar linNs de tipo terciário, linNs de correio ou acessos a ser$iços secundários ue proporcione nosso web site. http://www.criarweb.com/artigos/cores#e#partes#de#!ma#pagina.html
0 cor na web. ;scol1a da paleta para um web site 7 necessário esco"her cores de acordo com o "ogotipo da página. 4este cap%tu"o 'eremos re"a$es poss%'eis para conseguir a funciona"idade esperada. Por Luciano Moreno
;ublicado em% $-?'?/+ 7alori-e este artigo% Q $otos
1a hora construir uma página o primeiro ue temos ue ter claro é a gama de cores ue $amos empregar em suas diferentes partes, e para isso de$emos começar sempre com selecionar uma cor ou cores base, ue será o ue dará um esp"rito próprio ao nosso site. 4 importante a escolha desta gama, ue, por regra geral, será con$eniente manter em todas as páginas do site, conseguindo com isso estabelecer uma identidade própria e uma continuidade entre todas as páginas ue a formam. 8e ti$ermos escolhido ou imposto um logotipo, suas cores serão as ue maruem como guia o resto da página, trabalhando nas diferentes partes da página com os degrades claros e escuros destas cores base. ;or ser necessária a introdução de outras cores @uma ou duas, teremos ue escolher estas de forma ue seam euilibradas com as do logotipo e trabalhem untas em boa harmonia. 4 con$eniente ue nos baseemos em uma das gamas de cores estudadas no cap"tulo anterior @monocromáticas, análogos, tr"ades, etc., sobretudo se não ti$ermos grande experi0ncia no desenho com cores, e ue apliuemos os conceitos á estudados @hieraruia $isual, escala, contrastes, etc.. &omo exemplos, podemos considerar as seguintes paletas genéricas%
128 de 163
129 de 163
130 de 163
Ademais, podemos seguir uma série de regras generais ue nos orientarão% 2 As cores primárias, puras, brilhantes, são comuns demais, dando assim pouca informação ao olho. ;or isto, não con$ém se basear nunca nelas para construir nossas páginas. 2 A cor dos linNs con$ém ue sea o a-ul padrão do na$egador ou pelo menos
131 de 163
permanecer sublinhados e com uma cor bem diferenciada das do resto de elementos textuais da página.
2 ;áginas destinadas a um p3blico geral de$em estar baseadas em combinaç!es branco2 preto2 cor logotipo, em cores mais neutras, ue a maioria possa gostar, como cores secundárias ou terciárias em tons pastel, ou em uma bem estudada gama de cin-as. 4 fundamental nestas páginas dar 6s páginas a identidade corporati$a da empresa ou organi-ação ue representam.
2 ;áginas orientadas a um p3blico o$em podem adotar cores $i$as, primários, com altos contrastes entre fundo e conte3do, ou então com fundos escuros e textos claros, com a inclusão de peuenas animaç!es em >lash de tons $istosos.
132 de 163
2 ;áginas destinadas a um p3blico adulto de$em estar desenhadas com cores sérios, elegantes, frios, sem altos contrastes de tom, em cores neutras, inclusi$e puxando a cin-a. 8empre podemos recorrer neste caso ao t"pico padrão de fundo branco e letras pretas ou cin-a escuro.
2 ;áginas de empresa ou de instituiç!es de$em estar desenhadas de acordo com as cores corporati$as da mesma, incluindo sempre o logotipo.
133 de 163
2 ;áginas de di$ulgação, como manuais e artigos, de$em apresentar o texto de forma ue destaue adeuadamente sobre o fundo, sem usar cores escandalosas ue cansem a $ista, á ue o obeti$o fundamental destas páginas é ser lida. &onselho% fundo claro e letras escuras, ue destauem muito bem.
2 ;áginas exóticas e ao mesmo tempo elegantes podem ser obtidas com fundo preto ou cor muito escura e letras e\ou moti$os dourados, brancos ou p3rpura e $ermelho.
134 de 163
2 ;áginas destinadas a ser impressas pelo usuário final não de$em empregar core escuras como fundo, á ue obrigaria a dar cores claras aos textos para ue se pudesse $isuali-ar. 8e se fa- assim e o usuário não ti$er ati$ada a opção de imprimir as cores de fundo, não $erá nada na página impressa, e se a ti$er ati$ada, gastará muita tinta, obtendo de ualuer forma um mal resultado. &onselho% fundos brancos ou muito claros, com textos escuros, ou $ersão especial para impressão com estas cores.
/stas consideraç!es gerais podem nos audar a manear corretamente as cores em nossas páginas web. ;orém, como sempre, a prática é o ue manda, e afortunadamente podemos na$egar pela Internet, $isuali-ando páginas do tipo concreto ue ueremos desenhar para aprender e $er como di$ersos autores resol$eram o desenho. http://www.criarweb.com/artigos/escolha#paleta#para#website.html
0 cor na web. erramentas básicas para trabal1ar com cores
135 de 163
2xiste uma grande 'ariedade de ferramentas #ue nos permitem manipu"ar as caracter%sticas das cores para conseguir conseguir as #ue necessitemos. Abordamos uma amp"a "ista de programas programas neste cap%tu"o. cap%tu"o. Por Luciano Moreno
;ublicado em% /-?)?/+ 7alori-e este artigo% Q $otos
/xiste no mercado uma infinidade de aplicaç!es gráficas, tanto para trabalhar com gráficos $etoriais e animaç!es como para retoue de imagens imagens,, algumas das uais estudaremos de forma geral ao final deste curso de 'esenho )ráfico para a Teb. ;orém, há também outras ue, apesar de seu pouco preço e tamanho @algumas são gratuitas e ocupam muito poucos Jb, são muito 3teis para o trabalho trabalho diário diário com cores em um computador, e imprescind"$eis para um web designer. /ntre elas destacam por suas funcionalidades /[e'ropper e K st HuicN(es, das uais $amos falar um pouco. ;
/[e'ropper é basicamente um capturador de cores tela, capa- de obter o código código de de um ponto dado em diferentes modelos de cor. Ademais, permite também capturar uma -ona de tela, copiando2a na área de transfer0ncia, com o ual fica dispon"$el para seu uso em outras aplicaç!es gráficas. 4 propriedade da empresa empresa Inetia, Inetia, e pode2se fa-er o download em http%\\e[edropper.inetia.com\ 4 de fácil download e instalação, e atrás a mesma aparecerá um peueno "cone do programa na barra de tarefas, unto ao relógio do sistema.
;ara lançar a aplicação basta dar dois cliues sobre este "cone, com o ual aparecerá uma anela própria unto ao ponteiro do mouse, ue acompanha a este em seu mo$imento pela tela. /sta anela se fecha dando no$amente dois cliues sobre o "cone.
136 de 163
/m tal anela aparecerá aumentada a -ona situada ao redor do ponteiro, assim como uma cru- ue indica o ponto exato sobre o ue se encontra, mostrando a cor do mesmo. 1a parte direita aparecem os códigos da cor, tanto em formato ()* hexadecimal e decimal como em formato &?J, e as coordenadas do ponto com respeito 6 esuina superior esuerda da tela ati$a do monitor. 8e clicarmos com o botão direito do mouse sobre o "cone de /[e'ropper aparecerá um menu emergente com a opção =;roperties=, ue nos le$ará a uma anela de configuração com uma série de pestanas, pe stanas, entre as uais destacam as seguintes% 2 ;references% 'efine as propriedades gerais da aplicação.
1esta anela, podemos obser$ar em ue modelo de cor deseamos ue apareçam os códigos, se de$em aparecer as coordenadas do ponto e se a aplicação de$e se iniciar uando arrancarmos o sistema operacional @aconselhá$el. 2 &lipboard% &onfigura o método de captura do código da cor na área de transfer0ncia.
137 de 163
A opção mais aconselhá$el para o web designer é definir a captura no modelo ()* hexadecimal, usando para isso as combinaç!es padrão do sistema, ue no caso do Tindows são as teclas &+(C^& para copiar o código na área de transfer0ncia e &+(C^7 para colá2lo em outras aplicaç!es. 2 8creen &apture% /stabelece a tecla ue ati$a a captura de uma -ona da tela como uma imagem, assim como o método de finali-ação da mesma.
&omo tecla de ati$ação é con$eniente escolher alguma ue não se use normalmente, como uma das teclas superiores >. Huanto ao método de finali-ação, o normal é estabelecer o e$ento up do botão esuerdo do mouse, habitual nos programas de captura. 8e definirmos como tecla de captura >Q, por exemplo, para iniciar a capturar clicaremos tal tecla, logo, o botão esuerdo do mouse e, sem soltá2lo, definimos um retngulo em tela, ue será a -ona capturada. ;ara finali-ar, soltamos o botão do mouse, ficando a
138 de 163
imagem capturada na área de transfer0ncia, pronta para ser colada em ualuer outra aplicação, gráfica ou não @podemos colá2la em ualuer aplicação de #ffice, como Tord ou ;ower ;oint. 2 &on$ert &olors% 'efine o tipo de paleta em ue ueremos capturar a cor.
8eus poss"$eis $alores são 1ormal @aconselhado, ue utili-a a profundidade de cor ati$a em nosso computador, )ra[scale, ue captura a cor em paleta de cin-as, e Teb8afe, ue o aproxima 6 cor mais próxima na paleta web segura de Q< cores. &omo se pode $er, /[e'ropper é um programa muito 3til, imprescind"$el para o designer, ue com um pouco de prática facilita espetacularmente o trabalho com cores. st KuicL(es
/m seu trabalho diário, o web designer de$e $erificar como se $isuali-am as páginas ue está criando as diferentes resoluç!es e profundidades de cor. #s sistemas operacionais oferecem um painel de configuração próprio para estas tarefas, porém acessar constantemente ao mesmo nos fa- perder muito tempo. ;ropriedade da empresa )reen;arrots, K st HuicN(es é uma peuena aplicação ue nos auda a manear as propriedade de nosso monitor de forma rápida e c5moda. ;ode2se fa-er o download atra$és do endereço% http%\\www.greenparrots.com Uma $e- instalada, a aplicação se lança desde um "cone situado na barra de tarefas, unto ao relógio do sistema, clicando sobre o mesmo com o botão direito do mouse.
Ao fa-02lo, aparece a anela da aplicação mostrando diferentes combinaç!es resolução2 profundidade de cor. *asta então clicar sobre uma delas para ue a configuração de nosso monitor mude.
139 de 163
' aplica()o tamb*m permite m!dar o "!ndo de tela+ o protetor de tela+ a apar,ncia $is!al do sistema operacional e a ta-a de at!ali%a()o re"resh do monitor. !tra das op(es presentes na anela da aplica()o * ptions+ !e $ai nos permitir de"inir atalhos de teclado para lan(ar a anela o! para m!dar rapidamente a resol!()o de tela. on$*m !e escolhamos para isto alg!mas das teclas !e n)o se !tili%am normalmente+ como as do gr!po presentes na parte s!perior do teclado. Um presentinho em Flash
ara "inali%ar+ a empresa !ndidesign nos o"erece !ma pe!ena anima()o lash !e nos "acilita a composi()o com cores+ ao nos permitir $is!ali%ar o e"eito de di"erentes combina(es de cor.
140 de 163
1a esuina inferior direita $oc0 t0m tr0s opç!es de trabalho% combinação de tr0s cores em $ertical, combinação de tr0s cores ustapostas e combinação de cores em uma interfase web. ;ara definir as cores das diferentes partes, basta arrastá2las desde a paleta esuerda até a -ona escolhida. A $ersão on2line desta animação está dispon"$el no endereço% http%\\www.mundidesign.com\webct\webct.html #nde se encontra também outras animaç!es sobre o tema, incluindo uma muito boa sobre os princ"pios gerais do desenho gráfico. ?uito recomendá$el. http://www.criarweb.com/artigos/"erramentas#basicas#para#trabalhar#cores.html
6ipogra#ia. "ntrodução 4esta se!o 'amos fa"ar dos conte6dos textuais das páginas web , e neste primeiro cap%tu"o, faremos uma introdu!o a este estudo. Por Luciano Moreno
;ublicado em% $&?)?/+ 7alori-e este artigo% Q $otos
A missão de uma composição gráfica é transmitir uma mensagem determinada aos espectadores ue a $isuali-am. ;ara isso, o designer disp!e de duas ferramentas principais% as imagens e os conte3dos textuais. As imagens ou conte3dos gráficos tra-em sem d3$ida um aspecto $isual muito
141 de 163
importante a toda composição, sendo capa-es de transmitir por si só uma mensagem de forma adeuada. Agora também, o melhor meio de transmissão de idéias a um grande n3mero de pessoas é por excel0ncia a pala$ra escrita, o ue fa- com ue os conte3dos textuais em uma composição seam tão mais importantes uanto mais informação se desea transmitir.
A ess0ncia do bom design gráfico consiste em comunicar idéias por meio da pala$ra escrita, combinada muitas $e-es com desenhos ou com fotografias. As representaç!es $isuais dos conte3dos textuais são basicamente as letras, elementos formadores dos abecedários dos diferentes idiomas. &om as letras se formam pala$ras, com as pala$ras frases, e com as frases se representam idéias e conceitos. Além de seu componente significati$o, cada letra de uma pala$ra é por si mesma um elemento gráfico, ue tra- riue-a 6 composição final. ;or este moti$o, o aspecto $isual de cada uma das letras ue formam os textos de uma composição gráfica ou uma página web é muito importante, inter$indo nos mesmos conceitos similares aos ue caracteri-am ualuer outro componente gráfico% forma, tamanho, cor, escala, etc.
'este planeamento se deri$a ue o designer gráfico de$e empregar as letras em uma composição tanto para comunicar idéias uanto para configurar o aspecto $isual da mesma, sendo necessário para isso conhecer a fundo os diferentes tipos existentes e suas propriedades, conhecimentos ue se agrupam na ci0ncia ou arte da +ipografia. 'enomina2se +ipografia ao estudo, desenho e classificação dos tipos @letras e as fontes
142 de 163
@fam"lias de letras com caracter"sticas comuns, assim como ao desenho de caracteres unificados por propriedades $isuais uniformes, enuanto ue as técnicas destinadas ao tratamento tipográfico e a medir os diferentes textos são conhecidas com o nome de +ipometria. +radicionalmente o estudo das letras, suas fam"lias e seus tipos foram desen$ol$idos pelas impressoras e, mais modernamente, por designers gráficos ue reali-am trabalhos para ser logo impressos. ;orém, com o aparecimento dos computadores e da Internet foi necessário um replaneamento da +ipografia clássica, $isto ue as fontes ue trabalham em imprensa não se adaptam corretamente ao trabalho em um monitor de computador. http://www.criarweb.com/artigos/tipogra"ia#introd!cao.html
6ipogra#ia. Um pouco de 1ist=ria :amos 'er como e'o"uiu a escritura desde os tempos dos babi"8nios até nossos dias, passando pe"o acontecimento tipográfico mais importante( a in'en!o da imprensa. Por Luciano Moreno
;ublicado em% $+?)?/+ 7alori-e este artigo% Q $otos
A origem de nossos atuais alfabetos @sistemas de signos abstratos ue representam áudios articulados há ue buscá2los na remota antiguidade, no primog0nito uso de signos e s"mbolos para representar elementos naturais e ati$idades cotidianas. # primeiro pictograma @desenho representando um obeto ou uma idéia sem ue a pronunciação de tal obeto ou idéia sea tida em conta do ual temos constncia se remonta ao ano G.
?ais tarde, os sumérios desen$ol$eram ideogramas @s"mbolos ue representam idéias associadas menos concretas, sistema ue foi se desen$ol$endo até dar lugar ao sistema cuneiforme sumério de escritura, baseado em s"labas ue imita$am a linguagem falada. Um exemplo de escritura deste tipo é a ripa encontrada em Ur, datada entorno de QRLL2 QLL a. &., ue descre$e uma entrega de ce$ada e comida a um templo.
143 de 163
A e$olução posterior deste sistema silábico deu lugar 6 escritura cuneiforme @Q.OLL a.&., ue utili-a o ue podemos considerar como o primeiro alfabeto, cuas letras se imprimiam sobre argila usando uma ala$anca.
'esta época datam uma infinidade de ripas ue contém textos econ5micos, religiosos, poéticos, e legais, como o famoso código de Dammurabi, um dos documentos ur"dicos mais antigos ue existem.
8obre o ano K.
144 de 163
#s fen"cios adotaram este alfabeto eg"pcio K.LLL anos antes de &risto, usando para escre$er peles e ripas enceradas, e também o transmitiram pelo mundo ci$ili-ado, de tal forma ue pouco depois foi adotado também pelos hebreus e os arameos, sofrendo com o tempo uma e$olução própria em cada uma destas culturas.
# alfabeto fen"cio foi também adotado por etruscos e gregos, e deles também foi pelos romanos, ue no século I á manea$am um alfabeto id0ntico ao atual, 6 falta da B, a T e a 7. # Império (omano foi decisi$o no desen$ol$imento do alfabeto ocidental, por criar um alfabeto formal realmente a$ançado, e por dar a adeuada difusão a este alfabeto por toda /uropa conuistada, á ue muitas l"nguas ue não tinham sistema próprio de escritura adotaram o alfabeto romano ou latino.
A escritura romana adotou tr0s estilos fundamentais% Huadrata @mai3sculas uadradas romanas, originalmente cin-eladas em pedra, (3stica @$ers!es menos formais e mais rápidas em sua execução e &ursi$a @modalidades de inclinação das mai3sculas. ;artindo do modelo fen"cio se desen$ol$eu também, ao redor do século I7 d. &, o alfabeto árabe, formado por QO consoantes e no ual, assim como o resto de alfabetos sem"ticos, se escre$e sem $ogais, da direita 6 esuerda.
145 de 163
1o ocidente, o alfabeto romano foi e$oluindo e, no século E, no monastério de 8t. )all, em 8u"ça, se desen$ol$eu um no$o tipo de letra comprimida e angulosa, a letra gótica, mais rápida de escre$er e ue apro$eita$a melhor o papel, fatores importantes em um momento ue a demanda de escritos tinha se incrementado nota$elmente, escritos ue se reali-a$am a mão, primeiramente em pergaminhos e logo, a partir do ano K.KLL, em papel. A letra gótica se difundiu por toda /uropa, surgindo diferentes $ariantes @+extura, Cittera ?oderna, Cittera Antiua, ?in3scula de 1iccoli,, etc.. /m K.M
# trabalho de impressão possibilitou o uso de no$os tipos de letra. /m KMPL 1icolas Benson gra$a o primeiro tipo em estilo romano inspirando2se nas Huadratas romanas, em K.MR< >rancesco )riffo desenha o tipo conhecido como *embo, em K.rancesco de *olonia desenha para o $eneciano Aldo ?anucio o primeiro tipo mecnico cursi$o e em K.
146 de 163
'esde então, uma infinidade de tipógrafos colaboram com seu grão-inho de areia 6 criação de no$as fontes, entre os ue destacam Alberto 'urero, )iambattista *odoni, >ournier, 'idot, &aslon, *asNer$ille, *odoni e, á noséculo EE, ?ax ?eidinger @criador da fonte Del$etica em K.R
9edidas tipográ#icas )ontinuamos com um pouco mais de história da tipografia, neste caso com suas medidas e como como se foram adaptando adaptando 9s necessidades necessidades atuais. atuais. Por Luciano Moreno
;ublicado em% '?*?/+ 7alori-e este artigo% Q $otos
A partir da in$enção da imprensa por )utenberg, se começaram a desenhar e fundir diferentes tipos de letra segundo as necessidades técnicas de cada desenhista, sem nenhum tipo de norma comum ue marcasse as caracter"sticas das letras. &ada tipo era conhecido pelo nome ue seu próprio criador lhe da$a @geralmente seu próprio nome, sendo seu tamanho total @denominado corpo e o de suas partes totalmente arbitrários. &onseS0ncia direta desta liberdade de criação foi ue as imprensas não podiam intercambiar material tipográfico entre elas.
Uma das primeiras unidades tipográficas foi a pica, nome dado na Inglaterra do século E7 a uns li$ros destinados a regular o ritual das festas eclesiásticas. Aparentemente se compuseram em um corpo de letra ue acabou se chamando como eles. /ui$ale a K\ de polegada ou KQ pontos @MWQGG mm.. ?art"n 'omingo >ertel e &laude )aramond buscaram á estabelecer pautas na fundição de tipos, porém foi ;ierre 8imon >ournier, uem publicou em KPGP seu ?anuel
147 de 163
+[pographiue, no ual definiu um sistema de proporç!es para a fundação sistemática dos caracteres, ue chamou duodecimal. ;ara isso, tornou o tipo de letra menor do ue comumente se usa$a, chamado nomparela, e o di$idiu em seis partes, a cada uma das uais deu o nome de ponto e a base deste começou a fabricar, desde KPMQ, todo o material tipográfico ue fundia. F medida KQ pontos @o dobro da nomparela, eui$alente a M,
/m KPL >rancois Ambroise 'idot prop!e melhoras ao sistema de >ournier, adotando como base o pé de rei, medida de longitude usada nauela época, ue di$idiu em KQ partes, obtendo uma no$a definição de c"cero, composto agora por KQ pontos @aproximadamente L,GPP mm. A partir desse de sse momento se começaram a utili-ar tipos em tamanhos constantes, chamados pelo n3mero n3mero de de pontos ue media o corpo dos mesmos. &onsiderando 'idot ue um ponto de pé de rei era excessi$amente fino para formar uma apreciá$el graduação graduação de de caracteres, adotou como unidade básica a )rossura de dois pontos. Assim, dois pontos de pé de rei eui$alem a um ponto tipográfico, uatro pontos de pé de rei eui$alem a dois pontos tipográficos, etc. A altura do tipo foi fixada em G pontos fortes @chamados assim porue a altura exata oscila entre G pontos e G e meio, eui$alentes a QG,OO mm.
148 de 163
# sistema 'idot foi adotado em todas as fundiç!es do mundo, exceto na Inglaterra e nos /stados Unidos, onde o ponto tipográfico está baseado sobre a polegada inglesa, cua eui$al0ncia com o sistema métrico é de L,GounderWs Association estabeleceu a medida da pica em K\PQ,QP de uma polegada @aproximadamente L,G
/ntre os sistemas surgidos destaca um da companhia Adobe, chamado :ostscript, ue permite aos ordenadores se comunicarem com os periféricos de impressão. /ste sistema foi lançado inicialmente em KRO< dentro do programa de edição ;age ?aNer, opera arma-enando os n3meros em forma pilar e está baseado no formato de texto A8&II, o normal para caracteres. &omo unidade básica de medida utili-a o ponto de polegada @uma polegada tem PQ pontos, eui$alente a Q,
149 de 163
# tamanho de um pixel não é absoluto, á ue depende da resolução usada @um pixel 6 resolução OLLxLL é maior ue um 6 resolução KLQMxPO.
(esumindo, atualmente se usam dois sistemas de medidas tipográficas para trabalho em imprensa clássica% •
•
# europeu, baseado no ponto de 'idot @L,GP mm e o c"cero, formado por KQ pontos de 'idot @M,
A con$ersão de umas unidades a outras é inc5moda, e o normal é ue ninguém as reali-e. 1ormalmente, os c"ceros e as picas $0em em umas regretas, chamadas tipMmetros, ue em ocasi!es podem compatibili-ar ambos sistemas, o anglo2saxão e o europeu. ;or outra parte, em trabalhos digitais se utili-am outros dois sistemas% •
•
Adobe ;ostscript, cua unidade é o ponto de polegada @uns L,G
/xistem muitas propostas para conseguir unificar as medidas tipográficas a escala mundial, entre as ue destacam as baseadas no sistema métrico decimal, como a proposta pela I8# @International #rgani-ation for 8tandari-ation, porém, até hoe nenhuma delas triunfou. ;or outro lado, o próprio a$anço dos meios digitais está estabelecendo por si só uma padroni-ação baseada no sistema ;ostcript de Adobe, altamente difundido e aceitado na atualidade, assim como a utili-ação dos pixels como unidade de medida, não só no design gráfico digital e no web design, como também em sistemas fotográficos digitais e em tele$is!es de alta gama. http://www.criarweb.com/artigos/medidas#tipogra"icas.html
:artes de uma letra :amos conhecer as partes fundamentais de uma "etra e saber distingui5"as no caso de ter #ue criar fam%"ias tipográficas. Por Luciano Moreno
;ublicado em% $$?*?/+ 7alori-e este artigo%
150 de 163 Q $otos
'á2se o nome de letras @do latim littera ao conunto dos gráficos usados para representar uma linguagem. 8eus eui$alentes em tipografia e imprensa são tipo @do latim t[pus, do grego t[pos, modelo ou caractere gra$ado, ue define aos signos ue se empregam para a execução dos moldes tipográficos, e caractere @do grego charaNter, resultado da impressão dos tipos.
;ara poder definir com clare-a e precisão uma letra se distinguem nela diferentes partes, cuos nomes são 6s $e-es similares aos da anatomia humana, entre as ue podemos destacar as seguintes%
•
•
•
•
•
•
•
• • • • •
•
•
0ltura das mai5sculas % altura das letras de caixa alta de uma fonte, tomada
desde a linha de base até a parte superior do caractere. 0ltura da ou altura N % altura das letras de caixa baixa excluindo os ascendentes e os descendentes. 0nel ou ombro% haste cur$a fechada ue encerra o branco interno em letras tais como na b, a p ou a o. Iaste% traço principal da letra ue define sua forma essencial. 8em ela, a letra não existiria. Iaste ascendente% haste da letra ue sobressai por cima da altura x, como na b, a d ou a N. Iaste descendente% haste da letra ue fica por baixo da linha de base, como na p ou na g. Iaste montantes% hastes principais $erticais ou obl"uas de uma letra, como a C, *, 7 ou A. Iaste ondulada ou espin1a% traço principal da 8 ou da s. Iaste transversal ou barra % traço hori-ontal em letras como a A, a D, f ou a t. Fase% proeção ue 6s $e-es se $0 na parte inferior da b ou na ). Franco interno% espaço em branco contido dentro de um anel ou olhal. Fraço% parte terminal ue se proeta hori-ontalmente ou para cima e ue não está inclu"da dentro do caractere, como ocorre na /, a J, a + ou a C. Caracol ou ol1al% porção fechada da letra g ue fica por baixo da linha de base. 8e esse traço for aberto se chama simplesmente calda. Eetreiro% traço cur$o ou poligonal de conunção entre o haste e o remate.
151 de 163
• •
•
•
• •
•
•
Calda% haste obl"ua pingente de algumas letras, como na ( ou a J. Calda curva% haste cur$a ue se apóia sobre a linha de base na ( e a J, ou
debaixo dela, na H. 1a ( e na J se pode chamar simplesmente calda. Corpo% altura da letra, correspondente em imprensa ao paralelep"pedo metálico em ue está montado o caractere. "nclinação% ngulo do eixo imaginário sugerido pela modulação da espessura dos traço de uma letra. # eixo pode ser $ertical ou com di$ersos graus de inclinação. +em uma grande importncia na determinação do estilo dos caracteres. Ein1a de base% linha sobre a ue se apóia a altura da x. rel1a% peueno traço terminal ue 6s $e-es se adiciona ao anel de algumas letras, como a g ou a o, ou ao haste de outras como a r. >eri# ou remate% traço terminal de um haste, braço ou cauda. 4 um ressalte ornamental ue não é indispensá$el para a definição do caractere, ha$endo alfabetos ue carecem deles @sans serif. JHrtice% ponto exterior de encontro entre dois traços, como na parte superior de uma A, ou ? ou ao pé de uma ?.
/stas são as partes fundamentais de uma letra. 8eu conhecimento não é imprescind"$el para o uso comum de letras e fontes em desenho gráfico e web, porém sim ue é importante distingui2las no caso de ter ue criar umas fam"lias tipográficas especiais para um trabalho determinado, á ue $ão definir as caracter"sticas comuns ue de$em reunir as letras da mesma para manter um estilo próprio.
http://www.criarweb.com/artigos/partes#de#!ma#letra.html
amílias tipográ#icas :amos conhecer as fam%"ias tipográficas e seus grupos e c"assifica$es. Por Luciano Moreno
;ublicado em% /?+?/+ 7alori-e este artigo% Q $otos
Uma fam"lia tipográfica é um grupo de signos escriturais ue compartilham traços de desenho comuns, conformando todas elas uma unidade tipográfica. #s membros de uma fam"lia @os tipos se parecem entre si, pero também t0m traços próprios. As fam"lias tipográficas também são conhecidas com o nome de fam"lias de fontes @do franc0s antigo fondre, correspondente em portugu0s a derreter ou fundir, referindo2se ao tipo feito de metal fundido. Uma fonte pode ser metal, pel"cula fotográfica, ou meio eletr5nico. /xiste uma infinidade de fam"lias tipográficas. Algumas delas t0m mais de uinhentos
152 de 163
anos, outras surgiram na grande explosão criati$a dos séculos EIE e EE, outras são o resultado da aplicação dos computadores 6 imprensa e ao desenho gráfico digital e outras foram criadas explicitamente para sua apresentação na tela dos monitores, impulsionadas em grande parte pela web. Umas e outras con$i$em e são usadas sem estabelecer diferenças de tempo, por isso é necessário estabelecer uma classificação ue nos permita agrupar auelas fontes ue t0m caracter"sticas similares. 8ão muitas as tentati$as por conseguir agrupar as formas tipográficas em conuntos ue re3nam certas condiç!es de igualdade. )eralmente estão baseados na data de criação, em suas origens dentro das $ertentes art"sticas pelas ue foram criadas ou em critérios morfológicos. #s sistemas de classificação de fontes mais aceitados são% Classi#icação de 9aimilien Jo @-'&A
'i$ide as fam"lias em% • • • • • • • • •
Dumanistas )eraldos (eais 'idones ?ecnicas Cineares Incisos 8cripts ?anuais
Classi#icação de (obert Fring1urst
'i$ide as fontes em% • • • • • • • •
(enascentistas *arrocas 1eoclássicas (omnticas (ealistas ?odernistas geométricas ?odernistas l"ricas ;ós2modernistas
Classi#icaç4es 06
A A+;I @Associação +ipográfica Internacional, http%\\www.at[pi.org\, com obeto de estabelecer uma classificação geral das fam"lias tipográficas, reali-ou em KRM uma adaptação da classificação de ?aximilien 7ox, conhecida como7#E2A+[pI.
153 de 163
/sta classificação está relacionada também com a e$olução das fam"lias tipográficas ao longo da história, embora modifiue certos elementos da classificação de 7#E..
#utra classificação de fontes da A+[pI, e$olução da anterior, é a baseada no agrupamento de fontes por caracter"sticas comuns, normali-ada com o nome 'I1 K
(omanas
>ormado por fontes ue mostram influ0ncias da escritura manual, em concreto da caligrafia humanista do séc. E7, e também da tradição lapidaria romana, onde os pés das letras se talha$am para e$itar ue a pedra saltasse nos ngulos. As fontes (omanas são regulares, t0m uma grande harmonia de proporç!es, apresentam um forte contraste entre elementos retos e cur$os e seus remates lhes proporcionam um alto grau de legibilidade.
154 de 163
As (omanas se di$idem em cinco grupos fundamentais% •
•
•
•
•
Antigas% também chamadas )aralde em franc0s @por )aramond, aparecem a finais do século E7I na >rança, a partir das gra$uras de )rifo para Aldo ?anu-io. &aracteri-am2se pela desigualdade de espessura na haste dentro de uma mesma letra, pela modulação da mesma e pela forma triangular e c5nca$a do remate, com discretas pontas uadradas. 8eu contraste é sutil, sua modulação pronunciada, próxima 6 caligrafia, e seu traço apresenta um mediano contraste entre finos e grossos. /ntre elas destacam as fontes )aramond, &aslon, &entur[ #ldst[le, )oud[, +imes 1ew (oman e ;alatino. 'e +ransição% manifestam2se no século E7III e mostram a transição entre os tipos romanos antigos e os modernos, com marcada tend0ncia a modular mais as hastes e a contrastá2las com os remates, ue deixam a forma triangular para adotar a c5nca$a ou a hori-ontal, apresentando uma grande $ariação entre traços. /sta e$olução se $erificou, principalmente, em finais do século E7II e até meados do E7III, por obra de )randean, >ournier e *asNer$ille. /xemplos deste grupo são as fontes *asNer$ille e &aledonia. ?odernas% aparecem a meados do século E7III, criadas por 'idot, refletindo as melhoras da imprensa. 8ua caracter"stica principal é o acentuado e abrupto contraste de traços e remates retos, o ue origina fontes elegantes e ao mesmo tempo frias. 8eus caracteres são r"gidos e harmoniosos, com remates finos e retos, sempre da mesma grossura, com a haste muito contrastada e com uma marcada e r"gida modulação $ertical. 8ão imponentes a corpos grandes, porém acusam certa falta de legibilidade ao romper um pouco o caractere, ao se compor a corpos peuenos e em blocos peuenos de texto corrido. /xemplos destacá$eis poderiam ser >irmin 'idot, *odoni, >enice e ?odern 1_ QL. ?ecnicas% são um grupo isolado ue não guarda nenhuma semelhança construti$a com o resto dos tipos romanos com remate, somente o fato de possuir assentamento em seus caracteres. 1ão t0m muita modulação nem contraste. /ntre suas fontes podemos destacar Cubalin e 8t[mie. Incisos% outro grupo isolado dentro das romanas, assim como as mecnicas, são letras na tradição romana mais antiga, ligeiramente contrastada e de traço afinado pontiagudo. 1ão se pode falar de remates, porém seus pés afunilados sugerem, tal como ocorre com as serif, uma linha imaginária de leitura. 8eu olho grande e seus ascendentes e descendentes finos, fa-em dele um tipo ue, embora sea extremadamente dif"cil de digitali-ar, é muito leg"$el a ualuer corpo. F
155 de 163
peuena escala, pode confundir e parecer de sans2serif ao perder a graça de seu traço. &omo exemplos podemos citar as fontes Alinea e *altra. >ans!>eri#
As fontes 8ans28erif se caracteri-am por redu-ir os caracteres ao seu esuema essencial. As mai3sculas se $oltam 6s formas fen"cias e gregas e as min3sculas estão conformadas 6 base de linhas retas e c"rculos unidos, refletindo a época na ue nascem, a industriali-ação e o funcionalismo.
+ambém denominadas )óticas, /g"pcias, ;alo 8eco ou /truscas, se di$idem em dois grupos principais% •
•
Cineares sem modulação% formadas por tipos de grossura de traço uniforme, sem contraste nem modulação, sendo sua ess0ncia geométrica. Admitem fam"lias longu"ssimas, com numerosas $ariantes, embora sua legibilidade costuma ser má em texto corrido. /xemplos deste tipo seriam% >utura, A$ant )arde, /ras, Del$ética, Jabel e Uni$ers. /truscas% caracteri-adas porue a grossura do traço e o contraste são pouco percept"$eis e por ser muito leg"$eis em texto corrido. A principal fonte deste tipo é )ill 8ans.
Displa<
As fontes displa[ ad$ertem mais ou menos claramente o instrumento e a mão ue as criou, e a tradição caligráfica ou cursi$a na ue se inspirou o criador.
/xistem tr0s grupos principais de fontes displa[% •
&aligráficas% aglutina fam"lias geradas com as influ0ncias mais di$ersas @r3stica romana, min3scula carol"ngio, letra inglesa..., baseadas todas elas na mão ue as criou. &om o tempo a escritura caligráfica se tornou cada $e- mais decorati$a. Atualmente se utili-a em con$ites a cerim5nias ou determinados acontecimentos. &omo exemplos deste tipo podemos citar as fontes American Uncial, &ommercial
156 de 163
•
•
8cript, &ancelleresca 8eript, *ible 8eript >lourishes, apf &hancer[, oung *aroue. )óticas% de estrutura densa, composição apertada e $erticalidade acentuada, mancham extraordinariamente a página. Ademais, não existe conexão entre letras, o ue acentua mais sua ilegibilidade. /xemplos deste tipo são >raNtur, #ld /nglish, Joch >raNtur, Tedding +ext, >orte )rotisch. &ursi$as% costumam reprodu-ir escrituras de mão informais, mais ou menos li$res. /sti$eram muito na moda nos anos reest[le 8cript.
Decorativas
/stas fontes não foram concebidas como tipos de texto, e sim para um uso esporádico e isolado.
/xistem numerosas $ariaç!es, porém podemos distinguir dois grupos principais% •
•
>antasia% similares em certo modo 6s letras capitulares iluminadas medie$ais, são em geral pouco leg"$eis, portanto não são adeuadas na composição de texto e sua utili-ação se circunscre$e a t"tulos curtos. /xemplos deste tipo são as fontes *ombere, *locN2Up, *uster, &roissant, 1eon e 8hatter. 4poca% pretendem sugerir uma época, uma moda ou uma cultura, procedendo de mo$imentos como a *auhaus ou a Art 'ecó. Antep!e 6 função ou ao formal, com traços simples e euilibrados, uase sempre uniformes. ?uito utili-ados na reali-ação de rótulos de sinali-ação de edif"cios e an3ncios exteriores de loas. /xemplos deste grupo são >utura, Jabel, &aslon Antiue, *roadwa[, ;eignot, &abarga &ursi$a, 'ata PL, C&', )allia.
Jariantes de uma #amília
'entro de cada fam"lia, as $ariá$eis tipográficas permitem obter diferentes soluç!es de cor e ritmo. As $ariá$eis constituem alfabetos alternati$os dentro da mesma fam"lia, mantendo um critério de desenho ue as =aparentam= entre si.
As $ariaç!es de uma fonte são obtidas modificando propriedades como% • •
# corpo ou tamanho% mai3sculas, min3sculas e capitais. A grossura do traço% ultrafina, fina, booN, redonda, media, semi2negro, negro e ultra2negro.
157 de 163
• •
• •
A inclinação dos eixos% redonda, cursi$a e inclinada. A proporção dos eixos% condensada, comprimida, estreita, redonda, larga, alargada e expandida. A forma do traçado% perfilada, sombreada, etc. #utras $ariantes de uma fonte incluem $ersaletes, n3meros, n3meros antigos, s"mbolos de pontuação, monetários, matemáticos e misturados, etc.
Algumas fam"lias possuem muitas $ariaç!es, outras somente poucas ou nenhuma, e cada $ariação tem um uso e uma tradição, ue de$emos reconhecer e respeitar. http://www.criarweb.com/artigos/"amilias#tipogra"icas.html
ontes >eri# e #ontes >ans >eri# :emos a c"assifica!o de fontes tipográficas em ;erif e ;ans ;erif. Por Luciano Moreno
;ublicado em% %?+?/+ 7alori-e este artigo% Q $otos
Uma classificação das fam"lias de fontes muitos mais geral ue a 'I1 K
#utra particularidade comum das fontes serif, deri$ada do fato de ue as tipografias romanas se basea$am em c"rculos perfeitos e formas lineares euilibradas, é ue as letras redondas como a o, c, p, b, etc, t0m ue ser um pouco maiores porue opticamente parecem menores uando se agrupam em uma pala$ra unto a ouras formas de letras. A grossura das linhas das fontes serif modernas também tem sua origem na história. As primeiras se reali-aram 6 mão implementando um cálamo ou uma ponta da haste, permitindo 6 ponta plana da pluma distintas grossuras de traçado. /sta caracter"stica se conser$ou pela bele-a e estilo natural ue tra- 6s letras.
158 de 163
As fontes serif incluem todas as romanas. 8ão muito apropriadas para a leitura seguida de longos textos, á ue os traços finos e os remates audam ao olho a fixar e seguir uma linha em um conunto de texto, facilitando a leitura rápida e e$itando a monotonia. &omo exemplos de fontes serif podemos citar *ooN Antiua, *ooNman #ld 8t[le, &ourier, &ourier 1ew, &entur[ 8choolbooN, )aramond, )eorgia, ?8 8erif, 1ew orN, +imes, +imes 1ew (oman e ;alatino. As #ontes sans seri# ou etruscas fa-em seu aparecimento na Inglaterra durante os anos KOQL a KOGL. 1ão t0m remates em suas extremidades @sem serif, entre seus traços grossos e finos não existe apenas contraste, seus $értices são retos e seus traços uniformes, opticamente austados em suas conex!es. (epresentam a forma natural de uma letra ue foi reali-ada por alguém ue escre$e com outra ferramenta ue não sea um lápis ou um pincel.
Associados desde seu in"cio 6 tipografia comercial, sua legibilidade e durabilidade os fa-iam perfeitos para impress!es de etiuetas, embalagens, e demais propósitos comerciais. /ntretanto este uso moti$ou ue fossem desapreciados por aueles ue se preocupa$am pelos tipos belos e a impressão de ualidade. As poucos, as fontes sans serif foram ganhando terreno 6s serif. Uma das ra-!es de seu triunfo foi ue os modernos métodos mecnicos de fabricação dos tipos esta$am especialmente bem adaptados para este particular estilo de letra. #utra ra-ão era ue a aus0ncia de remates e seus traços finos as torna$am muito apropriadas para letras grandes usadas em poucas pala$ras para ser $istas a uma certa distncia, como é o caso de rótulos, carta-es, etc., elementos de comunicação cada $e- mais em auge. As fontes sans serif incluem todas as 8erif, resultando especialmente indicadas para sua $isuali-ação na tela de um computador, sendo muito leg"$eis a peuenos tamanhos e belas e limpas a tamanhos grandes. /ntretanto, não estão aconselhadas para textos longos, á ue são monótonas e dif"ceis de seguir. /ntre as fontes sans serif encontram2se% Arial, Arial 1arrow, Arial (ounded ?+ *old, &entur[ )othic, &hicago, Del$etica, )ene$a, Impact, ?onaco, ?8 8ans 8erif, +ahoma, +rebuchet ?8 e 7erdana. http://www.criarweb.com/artigos/"ontes#seri"#e#"ontes#sans#seri".html
6ipogra#ia digital :emos como podemos
159 de 163 Por Luciano Moreno
;ublicado em% $$?+?/+ 7alori-e este artigo% Q $otos
A aplicação da informática 6 impressão, ao design gráfico e, posteriormente, ao webdesign, re$olucionou o mundo da tipografia. ;or um lado, a infinidade de aplicaç!es informáticas relacionadas com o design gráfico e editorial tornou poss"$el a criação de no$as fontes de forma c5moda e fácil. ;or outro lado, foi necessário redesenhar muitas das fontes á existentes para sua correta $isuali-ação e leitura na tela, fa-endo ue se austem a rede de pixels da tela do monitor.
# tipo digital permite =interletrar= e desenhar caracteres melhor e com maior fidelidade ue o tipo metálico, existindo atualmente no mercado a maioria das fam"lias tipográficas adaptadas ao trabalho em computador, e as modernas aplicaç!es de auto2edição e desenho permitem manear facilmente as diferentes fontes e suas poss"$eis $ariantes em tamanho, grossura e inclinação. +ambém se superaram os problemas de falta de ualidade de periféricos de sa"da mediante a tecnologia laser e a programação :ost>cript. /sta 3ltima, especialmente, sup5s um grande impulso para o campo tipográfico, ao permitir contornos de letras perfeitamente definidos, baseados em funç!es matemáticas. #utro importante a$ance na tipografia digital $eio da mão da companhia Apple, ue lançou o sistema de #ontes 6rue6
160 de 163
&om respeito 6s fontes dispon"$eis em um computador, os sistemas operacionais instalam por padrão um n3mero $ariá$el delas. ;osteriores instalaç!es de aplicaç!es de auto2edição, desenho, entre outras fontes no$as, de tal forma ue é dif"cil saber em um momento dado ue fontes estão dispon"$eis em um certo computador. As principais fam"lias tipográficas inclu"das nos sistemas operacionais Tindows são Abadi ?+ &ondensed Cight, Arial, Arial *lacN, *ooN Antiua, &alisto ?+, &entur[ )othic, &omic 8ans ?8, &opperplate )othic *old, &ourier 1ew, Impact, Cucida &onsole, Cucida Dandwriting Italic, Cucida 8ans, ?arlett, 1ews )othic ?+. #&( A /xtended, 8[mbol, +ahoma, +imes 1ew (oman, 7erdana, Tebdings, Testminster e Tingdings. A estas há ue adicionar as instaladas por outras aplicaç!es de ?icrosoft, como Andale ?ono, )eorgia e +rebuchet ?8. ;or su parte, entre las tipograf"as incluidas en el sistema operati$o ?ac#8 se encontram &harcoal, &hicago, &ourier, )ene$a, Del$etica, ?onaco, 1ew orN, ;alatino, 8[mbol e +imes. Ademais, existem infinidade de fontes dispon"$eis em todo tipo de suportes @disuete, &', '7', páginas web, etc., assim como auelas não padroni-adas criadas por autores pontuais, todas elas facilmente instalá$eis em ualuer máuina.
# principal incon$eniente deste desconhecimento é ue não podemos saber a ci0ncia certa se as fontes ue estamos usando em tela estarão logo dispon"$eis na imprensa, na impressora ou no computador do leitor, por isso ue é con$eniente usar fontes padrão ou compro$ar a compatibilidade das fontes usadas com os meios de impressão necessários. Uma exceção a esta regra é o caso de ue os textos seam sal$os como arui$o gráfico @formatos +I>>, )I>, B;), ;1), 87), 8T>, etc., á ue neste caso a impressora ou monitor interpretarão o texto de forma adeuada, embora geralmente com pior ualidade. http://www.criarweb.com/artigos/tipogra"ia#digital.html
ontes para impressão e #ontes para tela :emos técnicas e tipos de fontes tipográficas para tipos de reso"u$es de te"a e impress!o. Por Luciano Moreno
161 de 163
;ublicado em% /?-?/+ 7alori-e este artigo% Q $otos
As fontes tipográficas desenhadas para sistemas de impressão tradicionais estão pensadas para ser reprodu-idas em altas resoluç!es e geralmente se $isuali-am mal nas telas dos computadores, sobretudo em peuenos tamanhos, á ue as formas dos caracteres não foram concebidas para ser reprodu-idas em uma tela de baixa resolução.
/ste fator fe- necessária a criação de fontes espec"ficas para ser $isuali-adas no monitor de um computador, desenhadas para ser facilmente leg"$eis em condiç!es de baixa resolução. +rata2se de fontes como 7erdana, +ahoma @sans serif e )eorgia @serif.
/nuanto ue as fontes de impressão se tornam indefinidas e ileg"$eis ao ser submetidas a =antialiasing= para sua$i-ar a gradação dos traços, nas tipografias concebidas para sua $isuali-ação em tela cada traço e cada ponto se encaixam exatamente na trama de pixels ue comp!e a mesma.
8eu desenho e$ita, no poss"$el, as cur$as, tendendo 6s linhas $erticais ou hori-ontais, o ue fa- com ue apareçam n"tidas e definidas em corpos peuenos. :ieli8ação e antialiasing
As fontes desenhadas para tela apresentam a des$antagem de ue, ao estar desenhadas para um tamanho determinado, não é poss"$el redimensioná2las de forma correta, aparecendo os traços $erticais e hori-ontais ue as comp!em distorcidos. Uma solução poss"$el seria redimensioná2las exatamente com um m3ltiplo de seu tamanho natural, á ue coincidiria no$amente com a rede de pixels da tela, porém então se $0em pixeladas, com efeitos de dentes de serra.
162 de 163
/ste efeito indeseado se pode e$itar mediante a técnica do antialiasing, consistente em um esfumaçado das bordas dos caracteres, criando uns pixels intermediários entre a cor do caractere e a do fundo, para ue a mudança entre ambos não sea tão brusca, com o ual se consegue ue as margens se $eam sua$es e não em forma de dentes de serra.
# antialiasing é um mecanismo muito utili-ado no tratamento de imagens de mapas de bits, dispondo uase todos os programas gráficos de filtros espec"ficos para sua aplicação.
1o ue se refere aos textos, os sistemas operacionais costumam oferecer opç!es de configuração do antialiasing para e$itar sua gradação em tela. 1os sistemas Tindows, por exemplo, se acessa a esta funcionalidade desde Iniciar ;ainel de controle 7"deo Apar0ncia, onde costuma ter um checNbox para habilitar o antialiasing. &omo a aplicação deste método de $isuali-ação de textos é configurá$el pelo usuário, nunca poderemos estar certos de sua ati$ação, por isso não sabemos de antemão como se $erão as fontes no monitor de cada usuário. &omo alternati$a, podemos con$erter os textos em imagens, sempre ue seam de curta extensão @t"tulos curtos, cabeçalhos, etc., á ue então sim ue poderemos aplicar2lhes o antialiasing e estar certos de sua
