Curso prático de Web Design

[helldanger1]

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.



Capítulos do manual



1.- Introdução ao design gráfico
A história do design gráfico, desde as origens da humanidade até o aparecimento da web e da Internet.


2.- Design gráfico
Uma aproximação ao design gráfico em geral, com uma descrição dos elementos que compõem habitualmente um desenho e as características principais que podemos encontrar neles.


3.- Design gráfico na web
O design web vai mais além do design tradicional, pois existem muitos limitadores relacionados com o meio onde se apresentam as páginas: Internet. Conheceremos as características fundamentais do design na web.


4.- Componentes gráficos de um computador
Descrição dos principais componentes gráficos de um computador: O cartão gráfico e o monitor.


5.- Resolução de tela
Considerações relativas aos distintos tipos de tela que os visitantes possam ter e o espaço disponí­vel para cada caso.


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


7.- Calibragem do monitor
Uma composição gráfica pode ser vista com diferentes tonalidades dependendo da configuração do monitor. Temos que calibrar o monitor para que o aspecto de nossa obra seja o mesmo em todos os computadores.


8.- Formas básicas em design gráfico
A linguagem visual atravé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 comunicativos distintos.


9.- O ponto
O ponto é a unidade mínima de informação visual, e está caracterizado por sua forma, tamanho, cor e localização.


10.- A linha
A linha é o elemento básico de todo grafismo e um dos mais usados. Representa a forma de expressão mais simples e pura, porém também a mais dinâmica e variada.


11.- O contorno
O contorno é o objeto gráfico criado quando o traço de uma linha se une em um mesmo ponto.


12.- O quadrado
Elementos de desenho: o quadrado.


13.- A circunferência
Elementos de design: a circunferência.


14.- Contornos mistos
Elementos de design: contornos mistos, que são os que estão compostos por vários tipos de contornos.


15.- Contornos orgânicos
Elementos de design: contornos orgânicos, que estão formados por curvas livres.


16.- O design equilibrado. Introdução
Estudo das regras básicas do design gráfico. Não existe uma fórmula que dê um design infalível, porém sim umas existem umas regras básicas.


17.- O design equilibrado. As proporções
Devemos ter em conta a definição a utilizar, os elementos gráficos e as proporções...


18.- O design equilibrado. A escala
Entende-se por escala a relação entre as proporções dos elementos visuais de uma composição.


19.- O design equilibrado. O contraste
O contraste permite ressaltar o peso visual, podemos consegui-lo através de diversos meios: tons, cores, contornos e escala.


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


21.- O design equilibrado. O reticulado
Como harmonizar os blocos de conteúdo que formarão a composição do desenho.


22.- O design equilibrado. Os alinhamentos
Necessários para conseguir uma composição ordenada e lógica, assim como para relacionar elementos.


23.- O design equilibrado. As simetrias
Outro condicionante para que o design da web tenha uma organização natural.


24.- O design equilibrado. O equilíbrio entre conteúdos
A organização espacial, primordial para atrair ao usuário.


25.- O design equilibrado. A hierarquia visual
A organização guia ao usuário na contemplação de uma página web.


26.- Teoria da cor. Introdução
É uma parte fundamental da web, produtor de sensações.


27.- Teoria da cor. Natureza da cor
Descrição formal da cor como um fenômeno físico.


28.- Teoria da cor. A percepção da cor
Como o olho pode detectar e classificar as cores que chegam.


29.- Teoria da cor. Modelos de cor
Descrição dos tipos de cor conhecidos, assim como se aborda uma explicação de como os objetos adquirem as cores.


30.- Teoria da cor. Tipos de cor
Neste capítulo descreveremos como a partir das cores primárias se podem conseguir outras, e dependendo das tonalidades fazer diferentes classificações.


31.- Teoria da cor. Propriedades das cores
As cores têm umas propriedades inerentes que lhes permite se distinguir de outras e gravar diferentes definições de tipo de cor.


32.- Teoria da cor. Contrastes de cor
O contraste é um fenômeno com o qual se podem diferenciar cores atendendo à luminosidade, à cor de fundo sobre a qual se projetam...


33.- Teoria da cor. Estudo de algumas cores I
Neste capítulo descreveremos as sensações que produzem algumas cores como o vermelho, o verde e o azul, assim como seu possível uso e seu significado em uma web.


34.- Teoria da cor. Estudo de algumas cores II
Acabamos a sessão da teoria da cor com o estudo de mais cores, as sensações que produzem e sua conveniência de uso nos web sites.


35.- A cor na web. Cores disponíveis para a web
Descobriremos o número de cores que poderemos usar em uma web, e se são estes mesmos se a web se executa em um computador ou em outro.


36.- A cor na web. Paletas de cor seguras. Websafe e Reallysafe
As paletas de cores dão limitações na hora de apresentar as cores que contém a web. Neste capítulo veremos quais são estas limitações.


37.- A cor na web. O problema das imagens
As cores das imagens podem sofrer mudanças se tiverem que estar encapsuladas em estruturas tais como tabelas, camadas, etc. Isto pode ter uma solução aproximada, porém não ótima. Veremos os problemas que se podem apresentar.


38.- A cor na web. Cores e partes de uma página
É importante saber escolher as cores que definirão uma parte da página para que seja factível o cometido desta. Veremos que cores são as mais apropriadas para cada seção do site.


39.- A cor na web. Escolha da paleta para um web site
É necessário escolher cores de acordo com o logotipo da página. Neste capítulo veremos relações possíveis para conseguir a funcionalidade esperada.


40.- A cor na web. Ferramentas básicas para trabalhar com cores
Existe uma grande variedade de ferramentas que nos permitem manipular as características das cores para conseguir as que necessitemos. Abordamos uma ampla lista de programas neste capítulo.


41.- Tipografia. Introdução
Nesta seção vamos falar dos conteúdos textuais das páginas web, e neste primeiro capítulo, faremos uma introdução a este estudo.


42.- Tipografia. Um pouco de história
Vamos ver como evoluiu a escritura desde os tempos dos babilônios até nossos dias, passando pelo acontecimento tipográfico mais importante: a invenção da imprensa.


43.- Medidas tipográficas
Continuamos com um pouco mais de história da tipografia, neste caso com suas medidas e como se foram adaptando às necessidades atuais.


44.- Partes de uma letra
Vamos conhecer as partes fundamentais de uma letra e saber distingui-las no caso de ter que criar famílias tipográficas.


45.- Famílias tipográficas
Vamos conhecer as famílias tipográficas e seus grupos e classificações.


46.- Fontes Serif e fontes Sans Serif
Vemos a classificação de fontes tipográficas em Serif e Sans Serif.


47.- Tipografia digital
Vemos como podemos “interletrar” e desenhar caracteres de melhor qualidade.


48.- Fontes para impressão e fontes para tela
Vemos técnicas e tipos de fontes tipográficas para tipos de resoluções de tela e impressão.

 

[helldanger1]

Introdução ao design gráfico



A história do design gráfico, desde as origens da humanidade até o aparecimento da web e da Internet.
Por Luciano Moreno





O ser humano sempre teve a necessidade de se comunicar com seus semelhantes, até tal ponto que podemos afirmar que se o homem é o ser mais avançado da natureza, é devido, em grande parte à facilidade que teve para fazer partícipe aos demais de suas idéias de uma forma ou de outra.

As primeiras formas comunicativas foram mediante elementos visuais. Antes de desenvolverem capacidades de expressão mediante a linguagem falada, os homens utilizaram seu corpo para comunicar aos demais estados de ânimo, desejos e inquietudes através de intenções, expressões e signos, que com o tempo adquiriram a condição de "linguagem", ao converter-se em modelos de comunicação.

Embora posteriormente a linguagem falada passara a ser o meio de intercâmbio de informação mais direto, a linguagem visual continuou tendo um importante peso nas relações comunicativas, sobretudo a partir do uso de diversos materiais e suportes como meios de "modelar" mensagens visuais, como demonstram uma infinidade de desenhos em pedra e pinturas rupestres que chegaram aos nossos dias, nas quais representam elementos naturais, atividades cotidianas e diferentes signos artificiais com significado próprio.

Pintura rupestre (Cova de Altamira, Espanha)


A representação de idéias mediante gráficos teve seu maior avance com o aparecimento das linguagens escritas, que permitiram expressar cadeias estruturadas de pensamentos mediante um conjunto de elementos gráficos de significado próprio dispostos segundo uma estrutura definida, capazes de transmitir mensagens entendíveis pela comunidade.

Estas linguagens escritas estavam baseadas na representação de elementos tomados da natureza, aos que se atribuía uma interpretação particular, e também um conjunto artificial de símbolos inventados: os alfabetos. Cada um destes signos isolados tinha às vezes um significado incerto, porém unido a outros, permitiam representar graficamente a linguagem falada por cada povo ou cultura.

Gravura em pedra com hieroglífico (Egito)


Como suporte físico, foi utilizada inicialmente a pedra, porém, rapidamente se buscaram outros tipos de materiais que permitiram uma maior facilidade de uso e uma maior portabilidade, como os papiros ou os pergaminhos.

Papiro dos mortos


Também se começaram a usar diferentes tipos de pigmentos naturais para dar um maior colorido e expressão às obras escritas e composições artísticas, e a dispor os diferentes elementos textuais e gráficos de forma harmoniosa e equilibrada, já que se apreciou que com isso se ganhava poder comunicativo, clareza e beleza. Isto pode ser apreciado na confecção dos incunábulo realizados nos monastérios, nos que se observa de forma clara a importância da "FORMA" (design) para transmitir uma mensagem.

Incunábulo medieval


Posteriormente, Johann Gutenberg inventou a imprensa, artefato capaz de reproduzir em grandes quantidades e de forma cômoda um original, o que tornou possível que os documentos impressos e a mensagem que continham fossem acessíveis a um grande número de pessoas.

Primeiro livro impresso


Logo começaram a aparecer imprensas que reproduziam todo tipo de obras, cada vez mais elaboradas. Começaram-se a usar novos materiais como suporte, novas tintas e novos tipos de letras, originando o aparecimento de profissionais especializados em seu manejo, os tipógrafos e os impressores, talvez os primeiros designers gráficos como tal, já se encarregavam de compor e construir os diferentes elementos que formariam uma obra de forma que resultasse lógica, clara, harmoniosa e bela.

Outro grande impulsor do desenvolvimento do design gráfico foi a Revolução Industrial. Surgiram as fábricas e a economia de mercado, um grande número de pessoas se deslocou às cidades para trabalhar, aumentaram as lojas e os comércios e começou a concorrência entre empresas por se tornarem uma parte do mercado. Com isso, apareceu e se desenvolveu uma nova técnica comercial, a publicidade, encarregada de fazer chegar aos consumidores mensagens específicas que lhes convencessem de que um produto dado era melhor que outros análogos.

Cartaz publicitário


O desenvolvimento da publicidade trouxe consigo um desenvolvimento paralelo do design gráfico e dos suportes de comunicação. Havia que convencer ao público das vantagens de um produto ou marca, e para isso nada melhor que mensagens concisas, carregados de componentes psicológicos, com desenhos cada vez mais elaborados, que chegava ao maior número possível de pessoas. O como se transmitia a informação chegou inclusive a superar em importância à mesma informação transmitida.

Não se tratava já de apresentar mensagens visuais belas, e sim, efetivas, que vendiam, e para isso, não duvidaram em realizar grandes investimentos, tornando possível um grande avance nas técnicas de design e no aparecimento de profissionais dedicados exclusivamente a desenvolve-las e coloca-las em prática: os designers gráficos.

No século XX, surgiram os computadores, máquinas em um princípio destinadas a um grupo reduzido de técnicos e especialistas, mas que pouco a pouco foram ganhando popularidade e que com o aparecimento do computador pessoal se estenderam a todos os ambientes e grupos sociais.

O computador é útil porque permite o uso de programas informáticos capazes de realizar uma infinidade de tarefas. Porém, estes programas têm uma estrutura interna muito complexa, que na maioria das vezes vai mais pra lá dos conhecimentos que possuem os usuários dos mesmos.

Isto deu lugar à introdução de uns elementos intermediários, denominados "Interfaces de Usuário", cuja missão era isolar o usuário das considerações técnicas e processos internos dos programas, permitindo-lhes realizar tarefas com eles por meio de uma "linguagem" intermediária, mais fácil de ser entendida pelo usuário.

Interface de usuário em modo texto


À princípio, estes programas se manejavam de forma textual, mediante comandos crípticos, que somente "experts" na matéria podiam entender. Porém, com o acesso à informática de todo tipo de pessoas tornou-se necessário uma simplificação no manejo das aplicações, surgindo o conceito de "Interface Gráfica de Usuário" em toda sua extensão, como um meio capaz de tornar entendíveis e usáveis estas aplicações através de elementos visuais comuns, que apresentados na tela do computador permitiam ao usuário médio realizar as tarefas próprias de cada programa concreto.

Interface Gráfica de Usuário


O trabalho de desenhar estas IGU correspondeu inicialmente aos próprios programadores que desenvolveram as aplicações, porém logo foi visto que seu conceito de interface de usuário não correspondia com a que necessitavam os usuários finais.

Faltavam profissionais de design que se encarregariam de conceber as interfaces, porém os designers gráficos clássicos não estavam acostumados a construir obras com capacidades de interação e navegabilidade, pelo qual tiveram que se reciclar, aprendendo conceitos e funcionalidades novas.

Com a entrada em cena da Internet e as páginas web, tornou-se ainda mais patente a defasagem dos designers gráficos com o novo meio. Faltava agora desenhar e construir interfaces de usuário muito especiais, condicionadas a pequenos tamanhos de arquivo e a um meio concreto de apresentação, os navegadores web, que impunham sérias limitações ao design, que necessitavam sistemas de navegação entre páginas simples e entendíveis.

Interface web


Se a isto somamos a necessidade dos criadores de interfaces web de conhecer a fundo diferentes linguagens de marcas e de programação (HTML, JavaScript, DHTML), é evidente que era necessária o aparecimento de um novo profissional, o webdesigner, híbrido entre o designer gráfico clássico e o programador de aplicações para Internet.

 

[helldanger1]

Design gráfico


Uma aproximação ao design gráfico em geral, com uma descrição dos elementos que compõem habitualmente um desenho e as características principais que podemos encontrar neles.
Por Luciano Moreno




Podemos definir o design gráfico como o processo de programar, projetar, coordenar, selecionar e organizar uma série de elementos para produzir objetos visuais 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, que chegam ao público destinatário através de diferentes suportes, como folhetos, cartazes, trípticos, etc.

O design gráfico busca transmitir as idéias essenciais da mensagem de forma clara e direta, usando para isso diferentes elementos gráficos que dêem forma à mensagem e o façam facilmente entendível pelos destinatários do mesmo.

O design gráfico não significa criar um desenho, uma imagem, uma ilustração, uma fotografia. É algo mais que a soma de todos esses elementos, embora para conseguir comunicar visualmente uma mensagem de forma efetiva o designer deve conhecer a fundo os diferentes recursos gráficos a sua disposição e ter a imaginação, a experiência, o bom gosto e o sentido comum necessários para combina-los de forma adequada.

O resultado final de um design gráfico denomina-se grafismo, e é uma unidade por si mesma, embora esteja composto por uma infinidade de elementos diferentes. Podemos estabelecer uma analogia entre um grafismo e um prato de cozinha. Ambos estão compostos por diferentes elementos individuais que, unidos corretamente e com sabedoria, compõem uma obra final única e definida que vai mais além da soma das partes que a formam.

Formas, cores e textos em um grafismo

Toda obra de comunicação visual 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 que mediante um método específico (design) constrói mensagens (comunicação) com meios visuais (grafismos). Não é o criador da mensagem, e sim seu intérprete.

O principal componente de toda composição gráfica é então a mensagem a interpretar, a informação que se deseja fazer chegar ao destinatário através do grafismo. Esta informação deve-se representar por meio de diferentes elementos gráficos, que podem ser muitos e variados, embora os mais comuns sejam:

•Elementos gráficos simples: pontos e linhas de todo tipo (livres, retas, quebradas curvas, etc.)
•Elementos geométricos, com ou sem contorno: polígonos, círculos, elipses, ovais, etc.
•Tipos: letras de diferentes formas e estrutura, utilizadas para apresentar mensagens textuais.
•Gráficos vários: logotipos, icones, etc.
•Ilustrações
•Fotografias
•Qualquer outro elemento visual apto para comunicar uma mensagem.


Um desenho limpo

Estes elementos básicos combinam-se uns com outros em um grafismo, e desta combinação surge um resultado final no qual têm muita importância uma série de conceitos próprios do design gráfico, entre os quais se destacam:

•Os agrupamentos: conjuntos de elementos relacionados mediante proximidade, semelhança, continuidade ou simetrias.
•A forma: forma de cada elemento gráfico isolado e dos agrupamentos de elementos.
•Os contornos: partes limítrofes dos elementos, que permitem distingui-los dos demais e do fundo, podendo estar definidos mediante border, mudanças de cor ou mudanças de saturação.
•A localização: lugar que ocupa cada elemento gráfico ou agrupamento deles no espaço do grafismo.
•O tamanho: tamanho relativo de cada elemento gráfico com respeito aos que lhe rodeiam. Escalas.
•A cor: cor de cada elemento individual, cores de cada agrupamento de elementos, conjunto total de cores usado em um grafismo, disposição relativa dos elementos com cor e harmonia entre cores.
•O contraste: intensidade de visualização de cada elemento com relação aos que lhe rodeiam e ao grafismo completo.
•O equilíbrio: cada grafismo implica um sistema de referência espacial que consegue um nível de equilíbrio maior ou menor.
•A simetria : disposição espacial regular e equilibrada dos elementos que formam a composição gráfica.
Os diferentes elementos de um grafismo são percebidos pelo destinatário de acordo com a influência que exercem cada um destes conceitos a nível individual, grupal e total. Porém, a união de todos eles, a obra gráfica, é uma entidade comunicativa individual e completa, carregada de complexos elementos humanos associados com a linguagem, a experiência, a idade, a aprendizagem, a educação e a memória.

 

[helldanger1]

Design gráfico na web
O design web vai mais além do design tradicional, pois existem muitos limitadores relacionados com o meio onde se apresentam as páginas: Internet. Conheceremos as características fundamentais do design na web.





O design gráfico de uma página web é somente uma parte do design da mesma, já que, ademais, há que considerar um conjunto mais ou menos extenso de condicionantes que vão limitar a livre criatividade do designer.


Em primeiro lugar, as páginas web têm que ser baixadas de um servidor web remoto através da Internet, pelo qual a largura de banda das conexões dos usuários vem a ser um fator chave na velocidade de visualização. A maioria dos usuários se conecta ainda na Internet com um modem, com velocidades teóricas de 56 Kbps, embora na prática não supera os 10-15 Kbps no melhor dos casos.

Os elementos gráficos, já tendo formato de mapa de bits ou vetorial, costumam ser traduzidos em arquivos de bastante peso, dependendo do tamanho da imagem e do formato em que se salve. Isto origina que as páginas que contém em seu desenho muitas imagens, ou poucas porém de grande tamanho, demorem muito tempo para ser baixadas desde o servidor web e apresentadas na janela do computador do usuário, que não costuma ser muito paciente.

Estudos realizados demonstram que o tempo máximo de paciência de uma pessoa que espera o download de uma página costuma ser de uns 10 segundos, passados os quais prefere abandonar nosso website e buscar outro mais rápido. Portanto, o número de elementos gráficos que podemos introduzir em uma página web fica bastante limitado, tendo que buscar alternativas mediante o uso imaginativo de fontes e cores.

Outro aspecto a ter em conta é que as páginas web são visualizadas em umas aplicações específicas, os navegadores web, que impõem grandes limitações ao design das mesmas. A janela de um navegador é 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 que variam muito segundo o computador usado, o sistema operacional, o monitor e o cartão gráfico.

Estes fatores impõem fortes limitações ao webdesigner, que deve buscar sempre que suas páginas possam ser visualizadas corretamente pelo maior número de usuários.

Design de um formulário web

Em segundo lugar, os navegadores existentes no mercado têm uma forma particular de apresentar o conteúdo das páginas. Internet Explorer interpreta em muitas ocasiões uma página web de forma muito diferente a Netscape Navigator 4x, e este por sua vez o faz de forma diferente a Netscape Navigator 6x.

Para tentar solver estas diferenças, o webdesigner deve trabalhar com vários navegadores ao mesmo tempo, desenhando suas páginas de tal forma que a interpretação delas seja parecida em todos, o que impõe novas limitações ao desenho.

Por outro lado, uma página web não é um design gráfico estático, e sim que contém diferentes elementos que têm a capacidade de interagir com o usuário, como menus de navegação, links, formulários, etc. Além disso, uma página isolada não existe, porque faz parte de um conjunto de páginas inter-relacionadas entre sí (o website), que devem apresentar-se ao usuário com o mesmo "estilo", embora sua funcionalidade seja muito diferente.

A isto há que somar que as páginas desenhadas devem logo ser construídas em uma linguagem específica, o HTML, que por si mesmo é muito limitado, o que faz com que o webdesigner tenha que estar sempre pensando se a interface que está desenhando graficamente vai poder ser logo construída.

Por último, uma página web costuma ocultar, na maioria dos casos, uma série de processos complexos que se executam sem que o usuário seja consciente deles (execução de códigos de linguagens de programação tanto em cliente como em servidor, acesso ao banco de dados em servidores remotos, etc.), processos que adicionam tempo à apresentação das páginas e que muitas vezes costumam afetar de forma importante o desenho destas, já que designer não sabe de antemão que conteúdos concretos vão ter.

Resumindo: o webdesign vai mais além do design gráfico, ao influir nele uma infinidade de fatores que limitam as possibilidades do desenho, porém também outros que acrescentam interatividade e funcionalidades a uma página web que um cartaz, folheto ou revista não têm.

 

[helldanger1]

Componentes gráficos de um computador



Descrição dos principais componentes gráficos de um computador: O cartão gráfico e o monitor.

Por Luciano Moreno




Os principais componentes de um computador encarregados de interpretar e apresentar as cores são o cartão gráfico e o monitor.


O cartão gráfico ou de vídeo é o componente hardware encarregado de processar os dados gráficos que envia o processador, interpreta-los e codifica-los em voltagens adequadas que são enviados logo ao monitor para sua apresentação em tela.

Cartão gráfico

Existem diferentes modelos de cartão gráfico, que vão desde os mais simples, incluídos na placa base, até os mais avançados, verdadeiros mini-computadores, com seu próprio processador, memória, bus, etc.

Os monitores são os dispositivos encarregados de apresentar ao usuário as interfaces das aplicações que se executam no computador. Todos sabemos como é um monitor por fora, já que estamos acostumados aos monitores das televisões, algo tão comum em nossas casas. Interiormente, os monitores variam uns dos outros em função de sua qualidade, da forma de manejar de voltagens e da tecnologia gráfica empregada.

Monitor CRT

Os monitores mais comuns são os CRT ou de raios catódicos, formados por um tubo cujo interior foi feito vazio, em um dos extremos se situam três canhões de elétrons, um por cada cor primária, e no outro em uma tela de vidro, cuja parte externa é a que vê o usuário.

Tubo de raios catódicos de um monitor CRT

Os elétrons gerados nos canhões por aquecimento são impulsionados até a parte interna da tela, que se encontra recoberta por pequenos grupos de fósforo pigmentado em cada uma das três cores primárias (vermelho, verde e azul). Estes grupos recebem o nome de tríadas, e se correspondem com um ponto da tela, denominado píxel, que aparecerá de uma cor ou de outra segundo a intensidade dos elétrons que chegarem em cada canhão.

Uma característica importante é o passo de ponto (dot pitch), distância diagonal entre dois pontos vizinhos da mesmo cor, que determina o mínimo tamanho de um detalhe que é capaz de resolver uma tela. Quanto menor for esta distância, maior será a nitidez. Mede-se em pontos por polegada (ppp).

A resolução máxima distinguível em uma tela de 800x600 é de 72 ppp e em uma de 1024x768 é de 93 ppp. Estes são valores teóricos e na prática são algo maiores.

Passo de ponto e píxel

Segundo 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 que a adaptação às diferentes resoluções é muito boa.

Com objetivo de que os elétrons cheguem de forma ordenada e causem impacto justamente no ponto adequado, entre a tela e os canhões, situa-se uma máscara ou rede que filtra os elétrons e os dirige a seus pontos destino de forma adequada.

A representação de uma imagem em tela se realiza mediante varreduras dos raios de elétrons, que percorrem toda a tela de esquerda à direita e de cima para baixo. A velocidade com a que se realiza esta operação denomina-se freqüência de refresh vertical ou refresh de tela, e mede-se em Hz (hertzs) e deve estar por cima de 60 Hz, preferivelmente 70 ou 80. A partir desta cifra, a imagem na tela é sumamente estável, sem piscadas apreciáveis, com o qual a vista sofre muito menos.

A freqüência de refresh vertical de nosso monitor pode ser averiguada acessando à tela de configuração do monitor, a qual se acessa em sistemas Windows mediante as seleções:

Iniciar > Painel de control > Tela > Configuração > Opções avançadas > Monitor

Também podemos mudar nesta tela a freqüência de refresh, porém antes de faze-lo é aconselhável consultar o manual do monitor, já que uma freqüência incorreta pode ser bastante prejudicial.


Outro tipo de monitore é o LCD ou de cristal líquido, que se diferencia dos anteriores porque nele as tríadas estão formadas por cristal líquido ao invés de fósforo pigmentado, e os elétrons são guiados por polarização magnética. Ademais, os monitores LCD trabalham com uma trama de píxels concreta, sendo fixo o tamanho de cada um, portanto ao mudar uma resolução inferior podem ficar franjas de píxels desativadas.

Seja qual for o tipo de cartão gráfico e monitor usado, é fundamental ter instalados e atualizados os drivers próprios destes componentes.

Um driver é um conjunto de bibliotecas de software específicas encarregadas de configurar e controlar os dispositivos de hardware. Cada componente necessita para funcionar bem os drivers adequados, que geralmente vêm junto com este em um disquete ou em um CD.

Com o avanço das funcionalidades dos sistemas operacionais e dos demais componentes de software e hardware das máquinas informáticas, torna-se necessário uma atualização constante dos drivers dos monitores e cartões de vídeo.

Estas versões atualizadas costumam ser oferecidas pelos diferentes fabricantes em seus web sites, por isso é muito importante visitar estes a cada certo tempo para baixar as versões atualizadas dos drivers e instala-los em nossa máquina, com o objetivo de não perder capacidades e de evitar incompatibilidades com os novos sistemas operacionais.

Se tivermos instalado um cartão gráfico em nosso computador, geralmente os drivers desta (controlador) são os responsáveis de manejar de forma adequada o monitor. Para acessar às propriedades do controlador, basta seguir a rota:

Iniciar> Painel de controle > Tela > Configuração > Opções avançadas > Monitor > Propriedades > Controlador

Através desta janela podemos ver o tipo de controlador instalado e se está funcionando bem ou se tem algum problema. Também atualiza-lo, para o que for necessário ter previamente nos novos drivers, já que teremos que indicar sua localização em nossos discos rígidos.

Uma consideração importante: há que estar certo de que o driver que iremos instalar se corresponde com o de nosso cartão gráfico ou monitor, já que um driver inadequado pode originar um mal funcionamento dos componentes gráficos.

 

[helldanger1]

Resolução de tela



Considerações relativas aos distintos tipos de tela que os visitantes possam ter e o espaço disponível para cada caso.

Por Luciano Moreno


As aplicações encarregadas de apresentar as páginas web são os navegadores (browsers), entre os quais, cabe destacar por sua importância e difusão, Internet Explorer, Netscape Navigator, Opera e Mozilla Firefox.


A interface de um navegador, 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 janela, na qual são apresentadas as páginas web.

A forma desta janela é sempre retangular, porém seu tamanho varia, dependendo do monitor e do cartão gráfico. Podemos falar de dois tamanhos de tela diferentes:
Tamanho absoluto: é o tamanho "real" da janela do monitor, medido geralmente em polegadas. Depende do monitor.
Resolução ou tamanho relativo : vem determinado pelo número de pixels que se mostram na janela do monitor, sendo o píxel a unidade mínima de informação que pode se apresentar em tela, de forma geralmente retangular. Depende do cartão gráfico.

O tamanho absoluto costuma se expressar em polegadas de diagonal (1 polegada = 25,4 mm). O mais comum atualmente é o de 17'' em computadores de mesa, embora ainda existam bastantes máquinas antigas com monitores de 15'' e existem no mercado bastantes de 19'' e de 21''. O tamanho absoluto dos monitores dos laptops costuma ser de 14-15''.

Quanto à resolução, os valores mais comuns são de 800x600 e de 1024 x768 pixels, embora existam ainda usuários que trabalhem por baixo da média a 640x480, e por cima, a resoluções de 1152x864 e 1280x960 pixels.

O tamanho absoluto e a resolução devem estar em concordância para uma visualização correta, sendo valores aceitáveis os seguintes:
14" - 15": Resolução máxima apreciável: 800x600
17": Resolução máxima apreciável: 800x600 ou 1024x768
19'' e 21": A partir de 1024 x 768

As possíveis resoluções de trabalho de uma máquina dependem, sobretudo da qualidade do monitor e do cartão gráfico do computador, e se configuram, em sistemas operacionais Windows, clicando com o botão direito do mouse sobre o escritório, selecionando a opção Propriedades e acessando à aba Configuração, ou também através de Iniciar > Painel de controle > Visualização.

A importância da resolução de tela sobre a forma de ser visualizadas as páginas web na janela do navegador é 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 qual os elementos da interface (textos, imagens, objetos de formulário, etc.) se vêem menores.

Tamanho de página e resoluções

Se desenhamos uma página para uma resolução dada, ocupando toda a janela do navegador, aqueles usuários que a visualizarem em resoluções menores não terão espaço na tela para conter toda a página, por conta disso se veriam obrigados a usar as barras de deslocamento do navegador. Sendo ao contrário, aqueles usuários que a visualizarem a resoluções maiores terão muito espaço na tela para tão pouca página, deixando assim bastante espaço vazio, sem conteúdos.

Para solucionar estas diferenças, o normal é que se desenhem as páginas web para uma resolução base, geralmente a mais usada na atualidade pela maioria (800x600), e se construam internamente mediante tabelas ou camadas de tamanhos relativos, com larguras definidas em %, com o qual se consegue que ao ser visualizadas em monitores de mais resolução se "abram", ocupando todo o espaço de tela disponível.

Os problemas que têm este sistema são que não dá suporte aos usuários que utilizam resoluções menores e que, no caso de resoluções maiores, o design da página poderá ser visto seriamente afetado ao modificar seus elementos das dimensões originais.

Outra possibilidade é projetar toda a página dentro de um container-pai (uma tabela ou camada) e atribuir a este um alinhamento centralizado, com o qual a página ficaria no centro da tela se se usa uma resolução maior que a do desenho.

 

[helldanger1]

Cores em um computador



Como trabalham os computadores para codificar uma cor. O formato RGB.

Por Luciano Moreno

P
O olho humano pode distinguir aproximadamente entre 7 e 10 milhões de cores. Devido a isto a vista é para nós o principal sentido que nos une com o exterior, de tal forma que sobre 80% da informação que recebemos do mundo exterior é visual.


Pintores e designers gráficos utilizam esta capacidade humana de apreciar cores para criar obras que aprofundem na alma e que inspirem sentimentos nos seres que as contemplam. Porém, o que podemos fazer quando devemos nos expressar com um número limitado de cores?

Os computadores trabalham com três cores básicas, a partir das quais constroem todas as demais, mediante um processo de mistura por unidades de ecrã, denominadas pixels. Estas cores são o vermelho, o azul e o verde, e o sistema definido é conhecido como sistema RGB (Red, Green, Blue).

Cada pixel tem reservada uma posição na memória do computador para armazenar a informação sobre a cor que deve apresentar. Os bits de profundidade de cor marcam quantos bits de informação dispomos para armazenar o número da cor associada segundo a paleta usada. Com esta informação, o cartão gráfico do computador gera uns sinais de voltagem adequados para representar a correspondente cor no monitor.

Quanto mais bits por pixel, maior número de variações de uma cor primária podemos ter. Para 256 cores precisam-se 8 bits (sistema básico), para obter milhares de cores necessitamos 16 bits (cor de alta densidade) e para obter milhões de cores falta 24 bits (cor verdadeira). Existe também outra profundidade de cor, 32 bits, porém com ela não se conseguem mais cores, e sim que as que usarmos se mostrarão mais rápido, já que para o processador é mais fácil trabalhar com registros que sejam potência de 2 (lembremos que trabalha com números binários).

Quanto maior for o número de cores, maior será a quantidade de memória necessária para armazená-los e maiores os recursos necessários para processa-los. Por este motivo, os computadores antigos dispõem de paletas de poucas cores, normalmente 256, por não ter capacidade para manejar mais sem uma perda notável de prestações.

Para representar uma cor no sistema RGB utilizam-se duas formas de codificação diferentes, a decimal e a hexadecimal, correspondendo-se os diferentes valores com a porcentagem de cada cor básica que tem uma cor determinada.

Por exemplo, um vermelho puro (100% de vermelho, 0% de verde e 0% de azul) se expressaria como (255,0,0) em decimal, e como #FF0000 em hexadecimal (antes do código de uma cor em hexadecimal sempre situa-se um símbolo almofadinha).

Das 256 cores básicas, o próprio sistema operacional fica com 40 para sua gestão interna, com o qual dispomos de 216 cores. Delas, 18 correspondem-se com as gamas das cores primárias, correspondentes a 6 tons de vermelho, 6 de azul e 6 de verde:

Gamas de cores primários

E o resto, as cores secundárias, são combinações destas gamas de cores primárias:

Cores secundárias

Se usamos uma profundidade de cor de 24 bits, correspondente a milhões de cores, dispomos de uma ampla gama para trabalhar, porém sempre tendo em conta que só serão compatíveis as cores que tiverem sua equivalente no sistema de 256 cores, ou seja, aquelas nas que cada cor primária vem definida por uma dupla de valores iguais, devendo estas ser 00,33,66,99,CC ou FF.

Quando usamos uma profundidade de cor de 16 bits dispomos de milhares de cores, porém o problema é que devido à divisão desta gama de cores, os valores obtidos não se correspondem com os equivalentes em 256 cores nem em milhões de cores. Por exemplo, #663399 é a mesma cor que 256 e que milhões, mas não é igual que o obtido com milhares de cores.

Como o código de uma cor dada pode ser difícil de lembrar, foi adotada uma lista de cores as quais foi colocado um nome representativo no idioma inglês (red, yellow, olive, etc.), de tal forma que os navegadores modernos interpretam a mesma e a traduzem internamente por seu valor hexadecimal equivalente.

 

[helldanger1]

Calibragem do monitor


Uma composição gráfica pode ser vista com diferentes tonalidades dependendo da configuração do monitor. Temos que calibrar o monitor para que o aspecto de nossa obra seja o mesmo em todos os computadores.

Por Luciano Moreno


As composições gráficas podem aparecer de maneira diferente nos distintos monitores, devido principalmente à diferença nos parâmetros que definem a qualidade e as características luminosas e cromáticas de cada um deles.


Isto pode originar, por exemplo, que ao realizar uma composição sejamos nós mesmos os enganados, ao não corresponder às cores que vemos em tela às reais que estamos codificando no grafismo. Ou que o aspecto visual de uma página web desenhada em um monitor mal configurado não corresponda com o que logo verão os usuários, com a conseguinte perda de controle e de qualidade que isso supõe.

Para evitar estes erros é preciso utilizar uns valores padrões dos parâmetros de configuração, que tornam disponível que o aspecto de uma obra gráfica seja o mesmo em qualquer computador configurado segundo os mesmos valores. Estes valores costumam se com os que trazem um monitor ao sair de fábrica, e a recuperação dos mesmos recebe o nome de calibragem.

A calibragem é o processo de ajuste da configuração da conversão de cor do monitor a um nível padrão, de forma que a imagem se apresente de maneira igual em diferentes monitores.

O método mais simples de calibragem passa pelo uso de imagens "cartas de ajuste", similares às que apareciam no televisor antes de começar a emissão. São imagens formadas por diferentes linhas de cores, umas finas e outras mais grossas, que se podem tomar como referência para realizar um ajuste totalmente manual, usando para isso os controles que possui o monitor. É um método pouco confiável, já que os ajustes são totalmente subjetivos

Outro método de calibragem mais avançado são as ferramentas de gestão da cor que facilitam certos programas de aplicação, como Adobe Photoshop, que inclui uma ferramenta básica, denominada Adobe Gamma, que pode ser utilizada para eliminar tonalidades de cor e padronizar a apresentação das imagens. Acessa-se a esta ferramenta através do menu Ajuda > Administração da cor > Abrir Adobe Gamma, com o qual acessamos a uma tela que nos permite ajustar os valores diretamente ou por meio de um assistente. Uma vez calibrado o monitor, os valores podem ser armazenados em um arquivo para as sucessivas re-configurações.

Calibrador de monitor


Porém sem dúvida a melhor forma de calibrar um monitor é utilizar o hardware específico para isso. O funcionamento varia segundo o dispositivo usado. Alguns se conectam diretamente ao monitor para coleta de dados binários, permitindo um ajuste individual direto de cada um dos canhões. Outros se baseiam em situar frente à tela do monitor diferentes medidores (calorímetros, colorímetros, etc.) para colher dados, fornecendo uma leitura dos valores atuais e proporcionando os valores idôneos de configuração.

Seja qual for o método escolhido, para uma correta configuração do monitor deveremos ajustar uma série de parâmetros, entre os quais se incluem os seguintes:

Brilho

També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.

De outra forma, o brilho é a intensidade de luz emitida sobre uma área específica, pela qual as mudanças de brilho podem escurecer ou clarear todo o conteúdo da tela.

Os monitores tradicionais (CRT) geram aproximadamente de 80 a 100 cd/m ² (candela por metro quadrado). No caso de monitores LCD, não se admitem valores inferiores a 150 cd/m ².

Quanto ao tipo de computador, em um PC o brilho não se corrige internamente, por isso se uma imagem se vê bem no PC onde se cria, se verá igualmente bem em todos. Nos Mac, é ao contrário, existe uma correção adaptada ao das primeiras impressoras laser para Mac, por isso uma imagem criada em um Mac se vê algo mais escuro em um PC.

O brilho típico de um monitor de PC é de 2,35 (+/- 0,1). O de um sistema Mac é de 1,8. Para Internet pode-se criar as imagens ajustando a gama a um valor intermediário ponderado entre PC e Mac.

Ajustes do brilho

Se o valor do brilho em um monitor é baixo, as colores luminosas se escureceram, parecendo cinzas. Ao contrário, se o brilho for elevado, serão as cores escuras as que perdem profundidade, tornando-se cinzas.

Contraste

O contraste é a relação existente entre a intensidade luminosa do ponto mais claro e o mais escuro de uma imagem. Quanto maior for o valor de contraste, melhor será a legibilidade.

Se tivermos uma fotografia com um ponto branco e outro negro e estes mesmos estiverem em um monitor, geralmente o contraste no monitor (170:1) é superior ao que se dá em uma fotografia (100:1), mas se o ambiente estiver muito iluminado, o ponto negro deixa de ser negro e a relação de contraste pode baixar bastante (hasta 50:1). Esta situação se agrava quando há reflexos na tela que, ademais, produzem cansaço ao usuário.

Ajustes do contraste

Para uma correta calibragem de contraste há que buscar valores de 100:1, ou seja, que o ponto branco tenha 100 vezes mais luminosidade que o ponto negro (valor próximo a 2,2).

Cor

A cor em um monitor é produzida pela soma de diferentes intensidades das cores básicas (vermelho, verde e azul), mediante um processo denominado adição de cores.

A calibragem da cor consiste no processo de ajustar a cor de um dispositivo a um padrão estabelecido para conseguir que as cores de uma composição gráfica se apreciem igual em todos os monitores calibrados.

Ajustes da tonalidade

Deverão se ajustar os diferentes parâmetros que definem as qualidades das cores, como tom, saturação, gama, equilíbrio de cores primárias, etc.

Resumindo: É muito importante que na hora de desenhar nossas páginas web e seus elementos gráficos tenhamos nosso monitor bem configurado, já que em caso contrário, os resultados que obtenhamos não serão reais, produzindo diferenças apreciáveis entre o que vê os usuários em seus computadores e o trabalho que tivermos desenvolvido, com a conseguinte perda de controle e de qualidade que isso implica.

 

[helldanger1]

Formas básicas em design gráfico



A linguagem visual atravé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 comunicativos distintos.

Por Luciano Moreno


Estamos acostumados a nos comunicar com nossos semelhantes mediante a linguagem falada, verbal, formada por uma série de elementos básicos (letras, palavras, frases, etc.) que, combinados, formam entidades comunicativas complexas.


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

Estas entidades gráficas constituem a substância básica do que vemos. Portanto, são muito importantes e todo designer deve conhece-las e maneja-las perfeitamente.

As formas básicas do design gráfico são poucas: o ponto, a linha e o contorno. Porém, é a matéria-prima de toda informação visual que contribui para uma composição.

Cada uma delas possui um conjunto de características próprias que as modificam e condicionam, entre as quais destacam-se:

Forma: definida por disposição geométrica. A forma de uma zona ou contorno vai nos permitir reconhece-las como representações de objetos reais ou imaginários.

Direção: projeção plana ou espacial de uma forma, continuação imaginária da mesma mesmo depois de sua finalização física. Pode ser horizontal, vertical ou inclinada em diferentes graus.

Cor: talvez a mais importante e evidente, pode imprimir um forte caráter e dinamismo aos elementos aos que se aplica. Toda forma ou zona 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.

Textura: modificação ou variação da superfície dos materiais, serve para expressar visualmente 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 substância através de variações diminutas na superfície do material, e se consegue em uma composição gráfica mediante a repetição de luzes e sombras ou de motivos iguais ou similares.

Escala: tamanho relativo de uma zona com respeito às demais e ao total da obra. Os diferentes tamanhos das diferentes zonas modificam e definem as propriedades de cada uma delas.

Dimensão: capacidade tridimensional de um elemento ou zona. 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 perspectiva, sombreado ou sobreposição. Também, mediante o uso de fotografias, que introduzem espaços tridimensionais na composição.

Movimento: propriedade muito importante, que aporta conotações de dinamismo e força. Nas obras gráficas puras não existe movimento real, porém sim, encontra-se implícito em certos elementos e se pode conseguir com certas técnicas que enganam ao olho humano (design cinético, pintura cinética) ou representando elementos que realmente existem no mundo real.

Podemos introduzir nas páginas web animações gráficas que aportam sensações de movimento muito maiores, como animações Flash, gifs animados, camadas dinâmicas, elementos de vídeo, etc.

 

[helldanger1]

O ponto
O ponto é a unidade mínima de informação visual, e está caracterizado por sua forma, tamanho, cor e localização.

Por Luciano Moreno


O ponto é a unidade mínima de informação visual, e está caracterizado 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 localização que tenha dentro da composição gráfica.

As principais características do ponto são:
Tem um grande poder de atração visual, criando tensão sem direção.
Quando se situam próximos dois pontos podem produzir sensações de tensão ou de direção, criando na mente do espectador uma linha reta imaginária que os une.
Se se situam diferentes pontos em prolongamento sugerem uma direção, um caminho, mais acentuado quanto mais próximos estejam os pontos entre si.

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

Os pontos isolados são pouco usado no web design. Entretanto, as sucessões de pontos próximos são um bom elemento para dirigir a atenção do visitante, para guiar sua olhada a uma zona concreta, para estabelecer relações entre elementos ou para separar zonas da página.

 

[helldanger1]

A linha



A linha é o elemento básico de todo grafismo e um dos mais usados. Representa a forma de expressão mais simples e pura, porém também a mais dinâmica e variada.

Por Luciano Moreno


A linha é o elemento básico de todo grafismo e um dos mais usados, tendo tanta importância em um grafismo como a letra em um texto. Representa a forma de expressão mais simples e pura, porém também a mais dinâmica e variada.


É formada pela união de vários pontos em sucessão, podendo se parecer à trajetória seguida de um ponto em movimento, por ter muita energia e dinamismo. Sua presença cria tensão e afeta ao resto de elementos próximos a ela.

As principais propriedade da linha são:
Contém grande expressividade gráfica e muita energia.
Quase sempre expressa dinamismo, movimento e direção.
Cria tensão no espaço gráfico em que se encontra.
Cria separação de espaços no grafismo.
A repetição de linhas próximas gera planos e texturas.

Em uma composição define direcionamento, que estará mais acentuado quanto mais linhas paralelas houver. Esta qualidade pode ser usada para dirigir a atenção em uma direção concreta, fazendo com que o espectador observe o lugar adequado.

Uma linha divide ou circunda uma área, encontra-se na borda de uma forma. Expressa separação de planos, permitindo ao designer usa-la como elemento delimitador de níveis e áreas na composição.

As propriedades de uma linha virão definidas pela sua grossura, sua longitude, sua orientação (direção) com respeito à página, sua localização (posição), sua forma (reta ou curva) e sua cor. Estas propriedades se verão afetadas também pelo número de linhas que houver na composição, sua proximidade e a orientação relativa entre elas.

A linha é considerada como tal enquanto a relação largura/comprimento não superar uma proporção determinada. Uma linha mais larga que a metade de seu comprimento perde a expressão dinâmica do traço e adquire a estática de uma superfície quadrada.

A união sucessiva de linhas forma um traço. O traços dão volume aos objetos que desenhamos e permitem representar simbolicamente objetos na composição, eliminando deles toda informação supérflua e deixando só o essencial.

A linha pode ter as bordas lisas ou denteadas, com extremidades retas, arredondadas ou em ponta. Seu corpo pode ser sólido ou com textura, e sua direção pode ser curva ou reta. E cada uma destas características diversificará a forma em que é interpretada uma linha pelo espectador.

Podemos considerar diferentes tipos de linhas, cada um dos quais tem suas próprias qualidades:

Linha reta

Define o caminho mais curto entre dois pontos. É pouco freqüente na natureza, onde predominam as linhas curvas (o universo em sua totalidade é curvo), porém muito abundante no ambiente humano, que necessita delas para dar estabilidade a suas criações.

A linha reta horizontal expressa equilíbrio, calma, equilíbrio estável. Não existe estabilidade sem uma reta horizontal de referência, uma linha de horizonte, já que nos movemos em um plano horizontal.

As linhas retas horizontais são muito usadas nas páginas web, tanto que a linguagem HTML proporciona uma etiqueta específica para introduzi-las, HR. Utilizam-se principalmente como elemento delimitador de blocos de conteúdo em páginas de pouco conteúdo gráfico, sendo conveniente não apresenta-las com efeito tridimensional, e sim como uma simples linha plana (atributo noshade).

A linha reta vertical sugere elevação, movimento ascendente, atividade. Também expressa equilíbrio, porém instável, como se estivesse a ponto de cair. Isto pode se corrigir trabalhando as linhas verticais com outras horizontais de apoio, que lhes darão a estabilidade de que carecem.

Em uma página web, as linhas retas verticais podem ser usadas para separar colunas textuais ou blocos de conteúdos, assim como as linhas frontais, com uma cor que destaque o suficiente sobre o fundo, ou como linhas de fundo, da mesma cor que este, separando zonas de uma cor diferente.

A linha reta inclinada, pelo contrário, expressa tensão, instabilidade, desequilíbrio. Parecem que estão a ponto de cair. Dentro das linhas inclinadas, a que forma 45º com a horizontal é a mais estável e reconhecível.

Linha curva

É a linha mais livre e a mais dinâmica de todas, podendo sugerir desde um movimento perfeitamente definido até um movimento caótico, sem regras.

Está bastante associada ao ser humano, que escreve e desenha quase sempre com linhas curvas.

As curvas mais comumente usadas em design gráfico digital são as curvas Bézier. Este tipo de curva foi desenvolvido por Pierre Bézier por encomenda da empresa Renault, que buscava uma família de curvas representáveis matemáticamente (são curvas de terceiro grau) que permitiram representar as curvaturas suaves que desejavam dar a seus automóveis.

Uma curva Bézier fica totalmente definida por quatro pontos característicos, os pontos inicial e final da curva e dois pontos de controle (manejadores) que definem sua forma. Para modificar sua forma, basta mudar de posição um de seus pontos de controle.

São curvas de manejo pouco complexo e muito elegantes, com um desenvolvimento muito suave, capazes de se adaptar a quase qualquer forma imaginável, portanto são muito usadas para desenhar logotipos e ícones e para copiar qualquer figura.

Também são enormemente versáteis, podendo adotar desde curvaturas muito suaves (quase linhas retas) a curvaturas muito fortes (curvas complexas), passando por todos os valores intermediários. Podem, inclusive, mudar de côncavas a convexas ao redor de um ponto.



No desenho web, o uso de linhas curvas isoladas está muito limitado. É mais comum encontra-las como partes integrantes de formas mais complexas, sendo úteis, por exemplo, para suavizar a dureza de uma forma retangular em um ou mais de seus lados (como os botões).

Um fator a ter em conta sempre que se trabalhe com linhas curvas em uma página web é o efeito de escalado produzido ao não ser capaz o sistema gráfico dos computadores de representar com exatidão formas curvas por meio de píxels. É o típico efeito de "dentes de serra" que aparece em todos os objetos com partes curvas, efeito que aumenta com o tamanho do objeto.



Uma solução a este problema visual é incluir as linhas curvas como imagens em formato web (GIF, JPG, PNG, etc.) e aplicar-lhes o processo de rastreado, disponível em quase todas as aplicações gráficas, por meio do qual se criam um ou mais píxels entre as bordas da linha e o fundo, de uma cor intermediária entre elas.

Traço

Um traço é o elemento linear formado pela união sucessiva de diferentes linhas. É talvez a forma gráfica mais humana, a que melhor representa nossa forma natural de desenhar.

Um traço herdará as propriedades das linhas que o criam, existindo traços retos, curvos ou mistos.

 

[helldanger1]

O contorno



O contorno é o objeto gráfico criado quando o traço de uma linha se une em um mesmo ponto.

Por Luciano Moreno


Podemos definir o contorno como o objeto gráfico criado quando o traço de uma linha se une em um mesmo ponto. Ou seja, quando uma linha continua, começa e acaba em um mesmo ponto.

Todo contorno delimita duas zonas, uma demarcada (o contorno e seu interior) e outra infinita (o fundo), criando-se um sub-mundo gráfico particular em cada forma definida por cada contorno.

A linha base de um contorno define a complexidade dessa e suas propriedades. Quando uma linha se fecha sobre ela mesma, o contorno criado determina um espaço interno, criando-se uma tensão entre este espaço e seus limites, outorgando à linha criadora um grande poder de atração visual.

As qualidades gráficas de um contorno estarão definidas pelas linhas que o criam e as propriedades destas.

Os principais contornos são o quadrado, a circunferência e o triângulo, aos que podemos acrescentar os contornos mistos e os orgânicos.

 

[helldanger1]

O quadrado



Elementos de desenho: o quadrado.

Por Luciano Moreno


O quadrado é a figura geométrica formada por quatro linhas retas de mesma longitude, denominados lados, que formam ângulos perfeitamente retos nos pontos de união entre elas (esquinas a 90º).

O quadrado é uma figura muito estável e de caráter permanente, associada a conceitos como estabilidade, permanência, honestidade, retidão, limpeza, esmero e equilíbrio.

A figura derivada do quadrado por modificação de seus lados é o retângulo, de propriedades análogas ao quadrado, apesar de sugerir menos perfeição e estabilidade.

O quadrado expressa direcionamento horizontal e vertical, referência primária com respeito ao equilíbrio e o bem-estar. É menos proponente e mais neutro que os retângulos, porém mais sólido. Convida a olhar seu centro e passear a olhada em espiral em volta desse ponto.

Os retângulos horizontais aportam solidez, estabilidade, dão a sensação de ser difíceis de inverter. Quando são de tamanho grande permitem que o olhar do espectador passeie de um lado ao outro, em sentido horizontal.

Os retângulos verticais, pelo contrário, dá a sensação de menos solidez, é menos estável, parece que pode se inverter a qualquer momento. Neles, o olhar do espectador não pode passear de um lado ao outro, porém, pode mover-se verticalmente, dando sensação de elevação, e é apto para representar aqueles objetos que na verdade têm uma forma ascendente.

Os quadrados e retângulos terão suas qualidades visuais modificadas segundo sua forma, tamanho, cor do contorno e área interna, localização, escala, etc.
A projeção tridimensional do quadrado é o hexaedro ou o cubo, corpo geométrico muito associado às obras próprias do ser humano, como os edifícios.
Os retângulos são as formas mais naturais para um computador, já que o monitor e as janelas dos sistemas operacionais gráficos são todos retângulos horizontais. Uma página web possui uma forma claramente retangular, definida pela janela do navegador. Ademais, os elementos web (tabelas, camadas, animações Flash, applets de Java, etc.) são de forma retangular.

Isto faz com que os retângulos sejam especialmente adequados para seu uso nas páginas web, proporcionando equilíbrio e estabilidade às mesmas.

Entretanto, é conveniente seguir uma série de pautas na hora de usar retângulos, a fim de evitar a monotonia e o aspecto artificial de uma página quadriculada demais:

Cada retângulo deve estar alinhado com os demais objetos da página que lhe rodeiam.
O tamanho do retângulo deve ser maior que o conteúdo do mesmo, o suficiente como para que este se apresente livre, com espaçamentos convenientes pelos quatro lados.
Não usar nas tabelas bordas padronizadas, ou seja, cinzas e com efeitos de relevo. Se forem usadas para separar logicamente registros, é melhor lhes atribuir uma borda fina (sobre 1 píxel) de uma cor que contraste suficientemente com a borda, porém que não seja chamativa demais. De qualquer forma, é preferível utilizar outros métodos para obter a separação, como filas de duas cores alternativas (pijamas).
Se desejar situar na página vários retângulos de funcionalidade análoga (caso de elementos de um menu de navegação, por exemplo), é preferível posiciona-los em séries horizontais, já que se perceberão mais como uma linha do que como um conjunto retangular.

A dureza visual dos retângulos pode-se suavizar adicionando-lhes outros elementos que os modifiquem em parte. Um exemplo disso, são as tabelas ou botões com esquinas arredondadas, que rompem a monotonia da forma retangular.

Outra forma de compensar a rigidez das formas retangulares é combina-las na composição com formas curvas que aportem liberdade e dinamismo.

 

[helldanger1]

A circunferência



Elementos de design: a circunferência.

Por Luciano Moreno


A circunferência é um contorno continuamente curvado, cujos pontos estão todos na mesma distância de um ponto central, chamado centro do círculo. A distância constante de qualquer ponto da circunferência se denomina radio.

A circunferência representa a área que contém e seu interior, denominada círculo, a forma mais enigmática de todas, considerada perfeita por nossos antepassados. Sua direcionalidade é a curva, associada ao movimento, ao enquadramento, à repetição e ao calor.

A forma circular produz um movimento de rotação evidente, possui um grande valor simbólico, especialmente seu centro, e tem conotações psicológicas como proteção, inestabilidade, totalidade, movimento contínuo ou infinito. É típico representar também os espaços fechados, herméticos, com circunferências ou círculos.

Contornos derivados da circunferência são o oval e ovalado, com qualidades parecidas, mas que expressam ainda mais instabilidade e dinamismo, embora o movimento perfeito seja uma qualidade própria da circunferência.

A projeção tridimensional da circunferência é a esfera, o corpo geométrico mais perfeito, o que contém um maior volume em um menor espaço, o que define a forma tanto dos átomos como dos corpos celestes.

A circunferência e o círculo são talvez os elementos geométricos mais perfeitos e estáveis, embora carregados de uma grande carga dinâmica.

As formas circulares são muito difícies de representar em uma página web, já que todos os elementos que nos facilita a linguagem HTML são retangulares, embora aparentem não ser. Ademais, as formas curvas se visualizam muito mal nos monitores, devido à interpretação gráfica mediante pixels, que origina efeitos de escalamento indesejáveis.

Outro inconveniente de usar círculos no desenho web deriva precisamente de ser a forma que contém mais área no menor perímetro, já que a maioria das vezes interessa ao designer exatamente o contrário, reduzir ao mínimo a área e maximizar ao máximo o perímetro.

Talvez a única forma de incluir uma forma circular completa em uma página seja incluindo-a em uma imagem. Porém, qualquer imagem é por si só retangular como objeto HTML, o que nos obrigará a desperdiciar todo o espaço compreendido entre o contorno circular e as bordas da imagem, aparecendo espaços sem conteúdo não desejáveis na maioria dos casos.

Este efeito negativo pode-se atenuar incluindo dentro da imagem a forma circular e os demais objetos que lhe rodeiam na composição e que se encontram dentro dos limites do retângulo que 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 conteúdo da imagem.

Uma solução melhor é incluir a imagem que contém o contorno circular (ou curvo em geral) como fundo da página ou de um elemento que contenha a mesma (tabela, célula de tabela, parágrafo, camada, etc.), o que nos permitirá apresentar outros objetos HTML ocupando espaços vazios ao redor da forma circular.

Formas mais sutis e efetivas de incluir curvas em uma página podem ser recortando imagens em forma oval ou circular, e inclusive simulando caminhos curvos mediante elementos textuais ou gráficos dispostos sucessivamente.

 

[helldanger1]

Contornos mistos



Elementos de design: contornos mistos, que são os que estão compostos por vários tipos de contornos.

Por Luciano Moreno


Mediante combinações dos elementos básicos e contornos anteriores, pode-se construir todas as formas imagináveis, cada uma das quais terá umas propriedades dependentes das partes que a formam, de sua orientação, de seu tamanho, de espessura do traço limite, de sua cor e de sua localização.

Há que ter em conta, em qualquer caso, que o predomínio da referência horizontal-vertical dá uma sensação de equilíbrio, enquanto que o domínio da direção diagonal aporta instabilidade.

Os contornos mistos são muito usados nas páginas web, as que aportam variedade no design e definição de espaços de informação, rompendo a monotonia visual das formas retangulares puras.

O único inconveniente é que as linhas curvas se devem implementar mediante imagens, geralmente em formato GIF, que se podem incluir como seções curvas nas células extremas de uma tabela ou como imagens completas em uma camada, sobre a que se situa outra camada com o texto.



Também é possível inclui-las como arquivos SWF (Macromedia Flash), que aportam grande definição às zonas curvas, sem produzir efeitos de escala, al ser tratadas como gráficos vetoriais. O inconveniente é então a atualização dos conteúdos textuais, já que para isso faz falta acessar o arquivo FLA fonte do gráfico.

 

[helldanger1]

Contornos orgânicos




Elementos de design: contornos orgânicos, que estão formados por curvas livres.

Por Luciano Moreno


Os contornos orgânicos são aqueles formados por curvas livres.

São os contornos mais abundantes na natureza, e sugere fluidez, desenvolvimento, humanidade, inspirando sensações favoráveis no espectador.

Os contornos orgânicos são utilizados abundantemente em pintura e desenho artístico, já que são a base para representar figuras humanas, natureza, paisagens, etc.

Entretanto, são muito difíceis de incluir em uma página web, tanto por aspectos técnicos (devem se incrustar como imagens) como por seu aspecto visual, que pode chocar com a natureza própria de uma página, composição ordenada na que predominam as formas retangulares. Não obstante, bem usados podem dar um toque natural ou humano à página.



Uma possível solução, se desejarmos introduzir em uma página contornos orgânicos, é adapta-los o máximo possível a um contorno misto, transformando as curvas livres em curvas Bézier, porções de circunferências ou linhas retas. Outra solução é introduzir fotografias ou ilustrações que os contenham.

 

[helldanger1]

O design equilibrado.


Introdução
Estudo das regras básicas do design gráfico. Não existe uma fórmula que dê um design infalível, porém sim umas existem umas regras básicas.

Por Luciano Moreno


Podemos definir o design de uma composição gráfica como a adequação de diferentes elementos gráficos previamente selecionados dentro de um espaço visual, combinando-os de tal forma que todos eles possam contribuir um significado à mesma, conseguindo o conjunto transmitir uma mensagem clara ao espectador.

O design gráfico há de ter em conta os aspectos psicológicos da percepção humana e as significações culturais que possam ter certos elementos, escolhendo estes de forma que cada um deles tenha um porquê na composição e buscando um equilíbrio lógico entre as sensações visuais e a informação oferecida.

O mais importante de toda composição é a mensagem que está nas entrelinhas. É trabalho do designer buscar a máxima eficácia comunicativa, transmitindo essa mensagem por meio de uma composição que cause impacto visualmente ao espectador e lhe torne receptivo.

Agora também, sem uma disposição adequada das formas, cores e agrupamentos, sem um equilíbrio global na composição, a mensagem não chegará de forma adequada ao espectador.

Não existe um método mágico que consiga uma composição bem-sucedida, mas sim que existem umas regras básicas de design que facilitam a transmissão de uma mensagem por meio de uma composição gráfica de forma efetiva.

Estas regras são aplicáveis igualmente ao design de páginas web, embora sujeitas às limitações que impõe este formato e modificadas para adapta-las à interatividade e às possibilidades multimídia do mesmo.

Este será o tema deste capítulo de nosso curso, estudar as regras básicas de design gráfico efetivo e equilibrado: proporções, escalas, contrastes, agrupamentos, reticulados, alinhamentos, simetrias, equilíbrio entre conteúdos e hierarquia visual.

 

[helldanger1]

O design equilibrado. As proporções
Devemos ter em conta a definição a utilizar, os elementos gráficos e as proporções...

Por Luciano Moreno


Na hora de começar uma composição, o primeiro que devemos saber é o tamanho que esta terá.

Se o suporte final de nosso grafismo vai ser o papel, poderemos desenhar para uma grande variedade de tamanhos, desde os menores (cartões de visita, pequenos folhetos) até os maiores (posters, cartazes para anúncios publicitários), embora quase sempre desenharemos am algum dos formatos DIN.

Medidas---- papel------- formato ---DIN
modelo -----tamanho------------ relação
DIN -----A4----- 210*297------- 0.0625 m²(x/y=0.707)
DIN ------A3---- 420*297------- 0.125 m² (x/y=1.4142)
DIN ------A2---- 420*594-------- 0.25 m² (x/y=0.707)
DIN------ A1--- 840*594--------- 0.5 m² (x/y=1.4142)
DIN -----A0----- 840*1188------- 1.0 m² (x/y=0.707)



A relação visual entre os diferentes formatos DIN é a seguinte:

No caso de uma página web, os tamanhos possíveis são muito poucos, geralmente dois (800x600 e 1024x768 pixels), porém é de suma importância decidir para qual deles se vai trabalhar, já que, embora seja possível desenhar uma página para que seja compatível com ambas resoluções, somente em uma delas se visualizará tal como a desenhamos.

O segundo passo será escolher os elementos gráficos e textuais que usaremos na composição. Esta escolha se deve basear em variáveis como a pessoa ou empresa que deseja transmitir a mensagem, a própria mensagem, o tipo de espectadores destinatários da composição e as características funcionais e comunicativas de cada elemento.




Agora devemos definir que partes da área do desenho devem estar ocupadas por elementos e que partes vão ficar vazias, sem nenhum conteúdo. Se deixarmos muitos espaços vazios, a composição pode ser descordenada já que será difícil estabelecer relações globais entre os elementos ou entre os grupos deles. Porém, se o número de componentes for elevado, podemos obter uma obra sobrecarregada, difícil de entender, na qual não se distingue com clareza o que é cada coisa e qual é a mensagem que quer transmitir.

Começaremos a situar então os elementos em cena, como se fossem atores de nossa particular obra de teatro, combinando-os de diferentes formas até obtermos um resultado satisfatório. Neste ponto é muito importante ter em conta que cada elemento visual tem uma função determinada dentro da composição.

A informação visual que traz um elemento pode mudar segundo o façam as propriedades do mesmo, como seu tamanho, forma ou cor, porém, sobretudo sua proporção, o peso visual que tiver no total da composição.

Indubitavelmente, a forma mais direta de marcar proporções é mediante o tamanho relativo dos elementos. Os elementos maiores, altos ou longos têm uma carga visual superior aos menores, curtos ou finos, criando zonas de atração mais intensas.

Também podemos delimitar proporções em um grafismo mediante a cor, com a qual podemos definir diferentes áreas de tons úteis para distribuir de forma adequada toda a informação gráfica. Neste sentido, as cores puras e saturadas têm um maior peso visual que as secundárias neutras, e estas, maior que as terciárias pouco saturadas.

Outra técnica para definir proporções é o uso de agrupamentos de elementos e a correta distribuição destas no cenário, o que nos vai permitir estruturar de uma forma ou outra a composição.

Este sistema costuma dar bons resultados, sempre que não abusemos dele criando um excessivo número de blocos significativos, já que então se diminuiria importância uns a outros e se perderia a proporcionalidade buscada.

Mais regras práticas referentes à proporção são:

As formas regulares têm menor peso que as irregulares.

As formas alongadas e angulares alongam o campo de visão, criando zonas dominantes.

Sejam quais forem os elementos usados em uma composição deveremos sempre buscar umas proporções adequadas entre eles, com o objetivo de que cada um cumpra seu papel comunicativo de forma adequada.

 

[helldanger1]

O design equilibrado. A escala




Entende-se por escala a relação entre as proporções dos elementos visuais de uma composição.

Por Luciano Moreno


Entende-se por escala a relação entre as proporções dos elementos visuais de uma composição.

Todos os elementos têm a capacidade de modificar e se definir uns a outros segundo as relações que se definam entre as propriedades análogas deles. Portanto, o conceito de escala não se refere só à relação entre tamanhos de dois ou mais elementos, como também à relação entre cores, formas, etc.

Um elemento é grande ou pequeno segundo o tamanho dos elementos que lhe acompanham no cenário. A cor de uma forma é brilhante ou apagada segundo a cor de fundo sobre a qual se encontra.

Ou seja, as propriedades de um elemento visual não são absolutas, e sim relativas, já que dependem das do resto de elementos que lhe acompanham na composição.

A proporção relativa entre elementos deve ser equilibrada, o que implica o uso de uma escala correta na composição. As escalas são utilizadas desta forma em planos e mapas, para conseguir representar os objetos reais o mais corretamente possível, com as proporções adequadas entre eles.

Em uma composição gráfica a escala usada é igualmente importante, tanto para distribuir o espaço de desenho de forma acertada como para dar equilíbrio de proporções aos elementos, usando-se às vezes diferentes métodos de distribuição de eficácia provada, como a regra Aurea ou o método de Corbusier.

A regra Aurea, inventada por Vitruvio, se utiliza para obter cenários de trabalho de proporções equilibradas, e se baseia em contemplar um espaço retangular dividido em terceiras partes, tanto horizontal como verticalmente, conseguindo com isso secionar os espaços em partes iguais.

Por sua parte, o método de proporções criado pelo arquiteto francês Le Corbusier utiliza como unidade modular de escala o tamanho do homem, estabelecendo com ela as alturas corretas dos objetos que usamos e dos elementos de uma construção arquitetônica.

No caso do web design, o tamanho da área de trabalho é fixo, porém sim que deveremos estabelecer uma escala de trabalho adequada para dimensionar os elementos de nossa página.

Escala proporcionada entre logotipo,
opções de menu e conteúdo



Assim, o logotipo deve ter um tamanho relativo adequado à página, os sistemas de navegação (menus) devem ser o suficientemente grandes como para ser vistos e manejados com facilidade, mas no entanto, que restem importância ao conteúdo informativo da página, etc.




Um erro muito comum neste sentido é o dos ícones, que devem ser suficientemente grandes como para que não percam seus traços diferenciadores, nem sua zona ativa se atuam como links, porém nunca tanto que destaquem em excesso, sobretudo se vão acompanhados de um texto explicativo.

 

[helldanger1]

O design equilibrado. O contraste



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

Por Luciano Moreno

O contraste é o efeito que permite ressaltar o peso visual de um ou mais elementos ou zonas de uma composição mediante a oposição ou diferença apreciável entre elas, permitindo-nos atrair a atenção de espectador para eles.

O contraste pode ser conseguido através de diferentes oposições entre elementos:

Contraste de tons

Obtemos contraste entre elementos que possuem tons (claridade-escuridão) opostos. Neste caso, o maior peso terá o elemento mais escuro, destacando o mais claro sobre ele com mais intensidade quanto maior for a diferença tonal.




Conforme se diminui a tonalidade do elemento mais escuro o contraste vai perdendo intensidade, sendo necessário redimensioná-lo se quisermos manter o mesmo contraste.




Este tipo de contraste é talvez o mais intenso, e é muito usado em composições gráficas.

Contraste de cores

Dois elementos com cores complementares se reforçam entre si, assim como uma cor quente e outra fria.




O contraste criado entre duas cores será maior quanto mais afastadas estiverem no círculo cromático. As cores opostos contrastam muito, enquanto que as análogas apenas fazem, perdendo importância visual ambas.

Este efeito pode ser usado para dar maior dimensão ou sensação de proximidade a um elemento em uma composição, situando-o sobre uma cor que contraste com ele.




Este tipo de contraste é especialmente indicado para os conteúdos textuais, nos quais deve primar pela facilidade de leitura. O ideal será o texto negro sobre fundo branco, já que é o que mais contraste cria (contraste de tom). Porém, em certos elementos, nos quais este jogo de cores não for possível, haverá que buscar sempre um texto cálido sobre um fundo frio ou vice-versa.

Contraste de contornos

Os contornos irregulares destacam de forma importante sobre os regulares ou reconhecíveis.

Este tipo de contrastes é adequado 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. Não obstante, há que ser comedidos em seu uso, sobretudo se se combinam com outros tipos de contraste, já que podem ser um foco de atração visual potente demais. Além disso, criam muita tensão no espaço que lhes rodeia.

Contraste de escala

É o produzido pelo uso de elementos a diferentes escalas das normais ou de proporções irreais, conseguindo-se o contraste por negação da percepção aprendida.




Este sistema de contraste não é muito usado nas páginas web, onde se busca sempre a escala adequada, porém sim é freqüente em fotografia e pintura, conseguindo atrair a atenção do espectador de forma muito efetiva.