CURSO DESIGN GRFICOResumindo: o webdesign vai mais alm do design grfico, ao influir nele uma infinidade de fatores que limitam as possibilidades do desenho, porm tambm outros que acrescentam interatividade e funcionalidades a uma pgina web que um cartaz, folheto ou revista no tm.

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

Resoluo de telaConsideraes relativas aos distintos tipos de tela que os visitantes possam ter e o espao disponvel para cada caso.

Cores em um computadorComo trabalham os computadores para codificar uma cor. O formato RGB. O olho humano pode distinguir aproximadamente entre 7 e 10 milhes de cores. Devido a isto a vista para ns o principal sentido que nos une com o exterior, de tal forma que sobre 80% da informao que recebemos do mundo exterior visual. Pintores e designers grficos utilizam esta capacidade humana de apreciar cores para criar obras que aprofundem na alma e que inspirem sentimentos nos seres que as contemplam. Porm, o que podemos fazer quando devemos nos expressar com um nmero limitado de cores? Os computadores trabalham com trs cores bsicas, a partir das quais constroem todas as demais, mediante um processo de mistura por unidades de ecr, denominadas pixels. Estas cores so o vermelho, o azul e o verde, e o sistema definido conhecido como sistema RGB (Red, Green, Blue).

Cada pixel tem reservada uma posio na memria do computador para armazenar a informao sobre a cor que deve apresentar. Os bits de profundidade de cor marcam quantos bits de informao dispomos para armazenar o nmero da cor associada segundo a paleta usada. Com esta informao, o carto grfico do computador gera uns sinais de voltagem adequados para representar a correspondente cor no monitor. Quanto mais bits por pixel, maior nmero de variaes de uma cor primria podemos ter. Para 256 cores precisam-se 8 bits (sistema bsico), para obter milhares de cores necessitamos 16 bits (cor de alta densidade) e para obter milhes de cores falta 24 bits (cor verdadeira). Existe tambm outra profundidade de cor, 32 bits, porm com ela no se conseguem mais cores, e sim que as que usarmos se mostraro mais rpido, j que para o processador mais fcil trabalhar com registros que sejam potncia de 2 (lembremos que trabalha com nmeros binrios).

Quanto maior for o nmero de cores, maior ser a quantidade de memria necessria para armazen-los e maiores os recursos necessrios para processa-los. Por este motivo, os computadores antigos dispem de paletas de poucas cores, normalmente 256, por no ter capacidade para manejar mais sem uma perda notvel de prestaes. Para representar uma cor no sistema RGB utilizam-se duas formas de codificao diferentes, a decimal e a hexadecimal, correspondendo-se os diferentes valores com a porcentagem de cada cor bsica que tem uma cor determinada. Porcentagens de cor e cdigos

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

Das 256 cores bsicas, o prprio sistema operacional fica com 40 para sua gesto interna, com o qual dispomos de 216 cores. Delas, 18 correspondem-se com as gamas das cores primrias, correspondentes a 6 tons de vermelho, 6 de azul e 6 de verde: Gamas de cores primrios

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

Se usamos uma profundidade de cor de 24 bits, correspondente a milhes de cores, dispomos de uma ampla gama para trabalhar, porm sempre tendo em conta que s sero compatveis as cores que tiverem sua equivalente no sistema de 256 cores, ou seja, aquelas nas que cada cor primria vem definida por uma dupla de valores iguais, devendo estas ser 00,33,66,99,CC ou FF. Quando usamos uma profundidade de cor de 16 bits dispomos de milhares de cores, porm o problema que devido diviso desta gama de cores, os valores obtidos no se correspondem com os equivalentes em 256 cores nem em milhes de cores. Por exemplo, #663399 a mesma cor que 256 e que milhes, mas no igual que o obtido com milhares de cores. Como o cdigo de uma cor dada pode ser difcil de lembrar, foi adotada uma lista de cores as quais foi colocado um nome representativo no idioma ingls (red, yellow, olive, etc.), de tal forma que os navegadores modernos interpretam a mesma e a traduzem internamente por seu valor hexadecimal equivalente.

Calibragem do monitorUma composio grfica pode ser vista com diferentes tonalidades dependendo da configurao do monitor. Temos que calibrar o monitor para que o aspecto de nossa obra seja o mesmo em todos os computadores. As composies grficas podem aparecer de maneira diferente nos distintos monitores, devido principalmente diferena nos parmetros que definem a qualidade e as caractersticas luminosas e cromticas de cada um deles.

Isto pode originar, por exemplo, que ao realizar uma composio sejamos ns mesmos os enganados, ao no corresponder s cores que vemos em tela s reais que estamos codificando no grafismo. Ou que o aspecto visual de uma pgina web desenhada em um monitor mal configurado no corresponda com o que logo vero os usurios, com a conseguinte perda de controle e de qualidade que isso supe. Para evitar estes erros preciso utilizar uns valores padres dos parmetros de configurao, que tornam disponvel que o aspecto de uma obra grfica seja o mesmo em qualquer computador configurado segundo os mesmos valores. Estes valores costumam se com os que trazem um monitor ao sair de fbrica, e a recuperao dos mesmos recebe o nome de calibragem. A calibragem o processo de ajuste da configurao da converso de cor do monitor a um nvel padro, de forma que a imagem se apresente de maneira igual em diferentes monitores.

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

Outro mtodo de calibragem mais avanado so as ferramentas de gesto da cor que facilitam certos programas de aplicao, como Adobe Photoshop, que inclui uma ferramenta bsica, denominada Adobe Gamma, que pode ser utilizada para eliminar tonalidades de cor e padronizar a apresentao das imagens. Acessa-se a esta ferramenta atravs do menu Ajuda > Administrao 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-configuraes. Calibrador de monitor

Porm sem dvida a melhor forma de calibrar um monitor utilizar o hardware especfico para isso. O funcionamento varia segundo o dispositivo usado. Alguns se conectam diretamente ao monitor para coleta de dados binrios, permitindo um ajuste individual direto de cada um dos canhes. Outros se baseiam em situar frente tela do monitor diferentes medidores (calormetros, colormetros, etc.) para colher dados, fornecendo uma leitura dos valores atuais e proporcionando os valores idneos de configurao. Seja qual for o mtodo escolhido, para uma correta configurao do monitor deveremos ajustar uma srie de parmetros, entre os quais se incluem os seguintes: Brilho

Tambm chamado, luminosidade, define a relao no linear entre a tenso de entrada e a luminancia de sada, intrnseco da fsica do ambiente dos canhes de eltrons e no depende da iluminao ambiente. De outra forma, o brilho a intensidade de luz emitida sobre uma rea especfica, pela qual as mudanas de brilho podem escurecer ou clarear todo o contedo da tela. Os monitores tradicionais (CRT) geram aproximadamente de 80 a 100 cd/m (candela por metro quadrado). No caso de monitores LCD, no se admitem valores inferiores a 150 cd/m . Quanto ao tipo de computador, em um PC o brilho no 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 contrrio, existe uma correo 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 tpico de um monitor de PC de 2,35 (+/- 0,1). O de um sistema Mac de 1,8. Para Internet pode-se criar as imagens ajustando a gama a um valor intermedirio 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 contrrio, se o brilho for elevado, sero as cores escuras as que perdem profundidade, tornando-se cinzas. Contraste O contraste a relao 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 relao de contraste pode baixar bastante (hasta 50:1). Esta situao se agrava quando h reflexos na tela que, ademais, produzem cansao ao usurio.

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 prximo a 2,2). Cor A cor em um monitor produzida pela soma de diferentes intensidades das cores bsicas (vermelho, verde e azul), mediante um processo denominado adio de cores. A calibragem da cor consiste no processo de ajustar a cor de um dispositivo a um padro estabelecido para conseguir que as cores de uma composio grfica se apreciem igual em todos os monitores calibrados. Ajustes da tonalidade

Devero se ajustar os diferentes parmetros que definem as qualidades das cores, como tom, saturao, gama, equilbrio de cores primrias, etc. Resumindo: muito importante que na hora de desenhar nossas pginas web e seus elementos grficos tenhamos nosso monitor bem configurado, j que em caso contrrio, os resultados que obtenhamos no sero reais, produzindo diferenas apreciveis entre o que v os usurios em seus computadores e o trabalho que tivermos desenvolvido, com a conseguinte perda de controle e de qualidade que isso implica.

Formas bsicas em design grficoA linguagem visual atravs de grafismos pode se descompor em entidades bsicas, onde cada uma delas tem por si mesma um significado prprio, porm unidas de diferentes formas podem constituir elementos comunicativos distintos. Estamos acostumados a nos comunicar com nossos semelhantes mediante a linguagem falada, verbal, formada por uma srie de elementos bsicos (letras, palavras, frases, etc.) que, combinados, formam entidades comunicativas complexas.

De igual forma, a linguagem visual atravs de grafismos pode se descompor em entidades bsicas, onde cada uma delas tem por si mesma um significado prprio, porm unidas de diferentes formas podem constituir elementos comunicativos distintos. Estas entidades grficas constituem a substncia bsica do que vemos. Portanto, so muito importantes e todo designer deve conhece-las e maneja-las perfeitamente. As formas bsicas do design grfico so poucas: o ponto, a linha e o contorno. Porm, a matria-prima de toda informao visual que contribui para uma composio. Cada uma delas possui um conjunto de caractersticas prprias que as modificam e condicionam, entre as quais destacam-se: Forma: definida por disposio geomtrica. A forma de uma zona ou contorno vai nos permitir reconhece-las como representaes de objetos reais ou imaginrios.

Direo: projeo plana ou espacial de uma forma, continuao imaginria da mesma mesmo depois de sua finalizao fsica. Pode ser horizontal, vertical ou inclinada em diferentes graus.

Cor: talvez a mais importante e evidente, pode imprimir um forte carter 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: modificao ou variao da superfcie dos materiais, serve para expressar visualmente as sensaes obtidas mediante o sentido do tato ou para representar um material dado. A textura est relacionada com a composio de uma substncia atravs de variaes diminutas na superfcie do material, e se consegue em uma composio grfica mediante a repetio de luzes e sombras ou de motivos iguais ou similares.

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

Dimenso: capacidade tridimensional de um elemento ou zona. A dimenso s existe no espao real tridimensional, porm se pode simular em uma composio grfica plana mediante tcnicas de perspectiva, sombreado ou sobreposio. Tambm, mediante o uso de fotografias, que introduzem espaos tridimensionais na composio.

Movimento: propriedade muito importante, que aporta conotaes de dinamismo e fora. Nas obras grficas puras no existe movimento real, porm sim, encontra-se implcito em certos elementos e se pode conseguir com certas tcnicas que enganam ao olho humano (design cintico, pintura cintica) ou representando elementos que realmente existem no mundo real.

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

O pontoO ponto a unidade mnima de informao visual, e est caracterizado por sua forma, tamanho, cor e localizao. O ponto a unidade mnima de informao visual, e est caracterizado por sua forma (geralmente circular, porm tambm pode ser retangular, como ocorre nos monitores, triangular ou uma mancha sem forma definida), por seu tamanho, por sua cor e pela localizao que tenha dentro da composio grfica.

As principais caractersticas do ponto so:

Tem um grande poder de atrao visual, criando tenso sem direo. Quando se situam prximos dois pontos podem produzir sensaes de tenso ou de direo, criando na mente do espectador uma linha reta imaginria que os une. Se se situam diferentes pontos em prolongamento sugerem uma direo, um caminho, mais acentuado quanto mais prximos estejam os pontos entre si.

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

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

A linhaA linha o elemento bsico de todo grafismo e um dos mais usados. Representa a forma de expresso mais simples e pura, porm tambm a mais dinmica e variada. A linha o elemento bsico de todo grafismo e um dos mais usados, tendo tanta importncia em um grafismo como a letra em um texto. Representa a forma de expresso mais simples e pura, porm tambm a mais dinmica e variada. formada pela unio de vrios pontos em sucesso, podendo se parecer trajetria seguida de um ponto em movimento, por ter muita energia e dinamismo. Sua presena cria tenso e afeta ao resto de elementos prximos a ela. As principais propriedade da linha so:

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

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

Uma linha divide ou circunda uma rea, encontra-se na borda de uma forma. Expressa separao de planos, permitindo ao designer usa-la como elemento delimitador de nveis e reas na composio.

As propriedades de uma linha viro definidas pela sua grossura, sua longitude, sua orientao (direo) com respeito pgina, sua localizao (posio), sua forma (reta ou curva) e sua cor. Estas propriedades se vero afetadas tambm pelo nmero de linhas que houver na composio, sua proximidade e a orientao relativa entre elas. A linha considerada como tal enquanto a relao largura/comprimento no superar uma proporo determinada. Uma linha mais larga que a metade de seu comprimento perde a expresso dinmica do trao e adquire a esttica de uma superfcie quadrada. A unio sucessiva de linhas forma um trao. O traos do volume aos objetos que desenhamos e permitem representar simbolicamente objetos na composio, eliminando deles toda informao suprflua 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 slido ou com textura, e sua direo pode ser curva ou reta. E cada uma destas caractersticas diversificar a forma em que interpretada uma linha pelo espectador.

Podemos considerar diferentes tipos de linhas, cada um dos quais tem suas prprias qualidades: Linha reta Define o caminho mais curto entre dois pontos. pouco freqente na natureza, onde predominam as linhas curvas (o universo em sua totalidade curvo), porm muito abundante no ambiente humano, que necessita delas para dar estabilidade a suas criaes.

A linha reta horizontal expressa equilbrio, calma, equilbrio estvel. No existe estabilidade sem uma reta horizontal de referncia, uma linha de horizonte, j que nos movemos em um plano horizontal. As linhas retas horizontais so muito usadas nas pginas web, tanto que a linguagem HTML proporciona uma etiqueta especfica para introduzi-las, HR. Utilizam-se principalmente como elemento delimitador de blocos de contedo em pginas de pouco contedo grfico, sendo conveniente no apresenta-las com efeito tridimensional, e sim como uma simples linha plana (atributo noshade). A linha reta vertical sugere elevao, movimento ascendente, atividade. Tambm expressa equilbrio, porm instvel, como se estivesse a ponto de cair. Isto pode se corrigir trabalhando as linhas verticais com outras horizontais de apoio, que lhes daro a estabilidade de que carecem.

Em uma pgina web, as linhas retas verticais podem ser usadas para separar colunas textuais ou blocos de contedos, 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 contrrio, expressa tenso, instabilidade, desequilbrio. Parecem que esto a ponto de cair. Dentro das linhas inclinadas, a que forma 45 com a horizontal a mais estvel e reconhecvel. Linha curva a linha mais livre e a mais dinmica de todas, podendo sugerir desde um movimento perfeitamente definido at um movimento catico, sem regras.

Est bastante associada ao ser humano, que escreve e desenha quase sempre com linhas curvas. As curvas mais comumente usadas em design grfico digital so as curvas Bzier. Este tipo de curva foi desenvolvido por Pierre Bzier por encomenda da empresa Renault, que buscava uma famlia de curvas representveis matemticamente (so curvas de terceiro grau) que permitiram representar as curvaturas suaves que desejavam dar a seus automveis.

Uma curva Bzier fica totalmente definida por quatro pontos caractersticos, os pontos inicial e final da curva e dois pontos de controle (manejadores) que definem sua forma. Para modificar sua forma, basta mudar de posio um de seus pontos de controle. So curvas de manejo pouco complexo e muito elegantes, com um desenvolvimento muito suave, capazes de se adaptar a quase qualquer forma imaginvel, portanto so muito usadas para desenhar logotipos e cones e para copiar qualquer figura. Tambm so enormemente versteis, podendo adotar desde curvaturas muito suaves (quase linhas retas) a curvaturas muito fortes (curvas complexas), passando por todos os valores intermedirios. Podem, inclusive, mudar de cncavas 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 botes).

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

Uma soluo a este problema visual incluir as linhas curvas como imagens em formato web (GIF, JPG, PNG, etc.) e aplicar-lhes o processo de rastreado, disponvel

em quase todas as aplicaes grficas, por meio do qual se criam um ou mais pxels entre as bordas da linha e o fundo, de uma cor intermediria entre elas. Trao Um trao o elemento linear formado pela unio sucessiva de diferentes linhas. talvez a forma grfica mais humana, a que melhor representa nossa forma natural de desenhar.

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

O contornoO contorno o objeto grfico criado quando o trao de uma linha se une em um mesmo ponto. Podemos definir o contorno como o objeto grfico criado quando o trao de uma linha se une em um mesmo ponto. Ou seja, quando uma linha continua, comea 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 grfico 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 espao interno, criando-se uma tenso entre este espao e seus limites, outorgando linha criadora um grande poder de atrao visual.

As qualidades grficas de um contorno estaro definidas pelas linhas que o criam e as propriedades destas. Os principais contornos so o quadrado, a circunferncia e o tringulo, aos que podemos acrescentar os contornos mistos e os orgnicos.

O quadradoElementos de desenho: o quadrado. O quadrado a figura geomtrica formada por quatro linhas retas de mesma longitude, denominados lados, que formam ngulos perfeitamente retos nos pontos de unio entre elas (esquinas a 90).

O quadrado uma figura muito estvel e de carter permanente, associada a conceitos como estabilidade, permanncia, honestidade, retido, limpeza, esmero e equilbrio. A figura derivada do quadrado por modificao de seus lados o retngulo, de propriedades anlogas ao quadrado, apesar de sugerir menos perfeio e estabilidade.

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

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

Os retngulos verticais, pelo contrrio, d a sensao de menos solidez, menos estvel, parece que pode se inverter a qualquer momento. Neles, o olhar do espectador no pode passear de um lado ao outro, porm, pode mover-se verticalmente, dando sensao de elevao, e apto para representar aqueles objetos que na verdade tm uma forma ascendente.

Os quadrados e retngulos tero suas qualidades visuais modificadas segundo sua forma, tamanho, cor do contorno e rea interna, localizao, escala, etc. A projeo tridimensional do quadrado o hexaedro ou o cubo, corpo geomtrico muito associado s obras prprias do ser humano, como os edifcios. Os retngulos so as formas mais naturais para um computador, j que o monitor e as janelas dos sistemas operacionais grficos so todos retngulos horizontais. Uma pgina

web possui uma forma claramente retangular, definida pela janela do navegador. Ademais, os elementos web (tabelas, camadas, animaes Flash, applets de Java, etc.) so de forma retangular. Isto faz com que os retngulos sejam especialmente adequados para seu uso nas pginas web, proporcionando equilbrio e estabilidade s mesmas.

Entretanto, conveniente seguir uma srie de pautas na hora de usar retngulos, a fim de evitar a monotonia e o aspecto artificial de uma pgina quadriculada demais:

Cada retngulo deve estar alinhado com os demais objetos da pgina que lhe rodeiam. O tamanho do retngulo deve ser maior que o contedo do mesmo, o suficiente como para que este se apresente livre, com espaamentos convenientes pelos quatro lados. No 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 pxel) de uma cor que contraste suficientemente com a borda, porm que no seja chamativa demais. De qualquer forma, prefervel utilizar outros mtodos para obter a separao, como filas de duas cores alternativas (pijamas). Se desejar situar na pgina vrios retngulos de funcionalidade anloga (caso de elementos de um menu de navegao, por exemplo), prefervel posiciona-los em sries horizontais, j que se percebero mais como uma linha do que como um conjunto retangular.

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

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

A circunfernciaElementos de design: a circunferncia. A circunferncia um contorno continuamente curvado, cujos pontos esto todos na mesma distncia de um ponto central, chamado centro do crculo. A distncia constante de qualquer ponto da circunferncia se denomina radio.

A circunferncia representa a rea que contm e seu interior, denominada crculo, a forma mais enigmtica de todas, considerada perfeita por nossos antepassados. Sua direcionalidade a curva, associada ao movimento, ao enquadramento, repetio e ao calor.

A forma circular produz um movimento de rotao evidente, possui um grande valor simblico, especialmente seu centro, e tem conotaes psicolgicas como proteo, inestabilidade, totalidade, movimento contnuo ou infinito. tpico representar tambm os espaos fechados, hermticos, com circunferncias ou crculos. Contornos derivados da circunferncia so o oval e ovalado, com qualidades parecidas, mas que expressam ainda mais instabilidade e dinamismo, embora o movimento perfeito seja uma qualidade prpria da circunferncia. A projeo tridimensional da circunferncia a esfera, o corpo geomtrico mais perfeito, o que contm um maior volume em um menor espao, o que define a forma tanto dos tomos como dos corpos celestes. A circunferncia e o crculo so talvez os elementos geomtricos mais perfeitos e estveis, embora carregados de uma grande carga dinmica. As formas circulares so muito difcies de representar em uma pgina web, j que todos os elementos que nos facilita a linguagem HTML so retangulares, embora aparentem no ser. Ademais, as formas curvas se visualizam muito mal nos monitores, devido interpretao grfica mediante pixels, que origina efeitos de escalamento indesejveis. Outro inconveniente de usar crculos no desenho web deriva precisamente de ser a forma que contm mais rea no menor permetro, j que a maioria das vezes interessa ao designer exatamente o contrrio, reduzir ao mnimo a rea e maximizar ao mximo o permetro.

Talvez a nica forma de incluir uma forma circular completa em uma pgina seja incluindo-a em uma imagem. Porm, qualquer imagem por si s retangular como objeto HTML, o que nos obrigar a desperdiciar todo o espao compreendido entre o contorno circular e as bordas da imagem, aparecendo espaos sem contedo no desejveis 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 composio e que se encontram dentro dos limites do retngulo que define a imagem, mas ento, esses elementos sero estticos, fixos, sem possibilidade de serem modificados se no for mudado todo o contedo da imagem. Uma soluo melhor incluir a imagem que contm o contorno circular (ou curvo em geral) como fundo da pgina ou de um elemento que contenha a mesma (tabela, clula de tabela, pargrafo, camada, etc.), o que nos permitir apresentar outros objetos HTML ocupando espaos vazios ao redor da forma circular.

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

Contornos mistosElementos de design: contornos mistos, que so os que esto compostos por vrios tipos de contornos. Mediante combinaes dos elementos bsicos e contornos anteriores, pode-se construir todas as formas imaginveis, cada uma das quais ter umas propriedades dependentes das partes que a formam, de sua orientao, de seu tamanho, de espessura do trao limite, de sua cor e de sua localizao.

H que ter em conta, em qualquer caso, que o predomnio da referncia horizontalvertical d uma sensao de equilbrio, enquanto que o domnio da direo diagonal aporta instabilidade.

Os contornos mistos so muito usados nas pginas web, as que aportam variedade no design e definio de espaos de informao, 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 sees curvas nas clulas extremas de uma tabela ou como imagens completas em uma camada, sobre a que se situa outra camada com o texto.

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

Contornos orgnicosElementos de design: contornos orgnicos, que esto formados por curvas livres. Os contornos orgnicos so aqueles formados por curvas livres.

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

Os contornos orgnicos so utilizados abundantemente em pintura e desenho artstico, j que so a base para representar figuras humanas, natureza, paisagens, etc. Entretanto, so muito difceis de incluir em uma pgina web, tanto por aspectos tcnicos (devem se incrustar como imagens) como por seu aspecto visual, que pode chocar com a natureza prpria de uma pgina, composio ordenada na que predominam as formas retangulares. No obstante, bem usados podem dar um toque natural ou humano pgina.

Uma possvel soluo, se desejarmos introduzir em uma pgina contornos orgnicos, adapta-los o mximo possvel a um contorno misto, transformando as curvas livres em curvas Bzier, pores de circunferncias ou linhas retas. Outra soluo introduzir fotografias ou ilustraes que os contenham.

O design equilibrado. IntroduoEstudo das regras bsicas do design grfico. No existe uma frmula que d um design infalvel, porm sim umas existem umas regras bsicas. Podemos definir o design de uma composio grfica como a adequao de diferentes elementos grficos previamente selecionados dentro de um espao visual, combinandoos de tal forma que todos eles possam contribuir um significado mesma, conseguindo o conjunto transmitir uma mensagem clara ao espectador.

O design grfico h de ter em conta os aspectos psicolgicos da percepo humana e as significaes culturais que possam ter certos elementos, escolhendo estes de forma que cada um deles tenha um porqu na composio e buscando um equilbrio lgico entre as sensaes visuais e a informao oferecida. O mais importante de toda composio a mensagem que est nas entrelinhas. trabalho do designer buscar a mxima eficcia comunicativa, transmitindo essa mensagem por meio de uma composio que cause impacto visualmente ao espectador e lhe torne receptivo.

Agora tambm, sem uma disposio adequada das formas, cores e agrupamentos, sem

um equilbrio global na composio, a mensagem no chegar de forma adequada ao espectador. No existe um mtodo mgico que consiga uma composio bem-sucedida, mas sim que existem umas regras bsicas de design que facilitam a transmisso de uma mensagem por meio de uma composio grfica de forma efetiva. Estas regras so aplicveis igualmente ao design de pginas web, embora sujeitas s limitaes que impe este formato e modificadas para adapta-las interatividade e s possibilidades multimdia do mesmo.

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

O design equilibrado. As proporesDevemos ter em conta a definio a utilizar, os elementos grficos e as propores... Na hora de comear uma composio, 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 (cartes de visita, pequenos folhetos)

at os maiores (posters, cartazes para anncios publicitrios), embora quase sempre desenharemos am algum dos formatos DIN. Medidas papel formato DIN

modelo DIN A4 DIN A3 DIN A2 DIN A1 DIN A0

tamanho 210*297 420*297 420*594 840*594

relao 0.0625 m(x/y=0.707) 0.125 m (x/y=1.4142) 0.25 m (x/y=0.707) 0.5 m (x/y=1.4142)

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

A relao visual entre os diferentes formatos DIN a seguinte:

No caso de uma pgina web, os tamanhos possveis so muito poucos, geralmente dois (800x600 e 1024x768 pixels), porm de suma importncia decidir para qual deles se vai trabalhar, j que, embora seja possvel desenhar uma pgina para que seja compatvel com ambas resolues, somente em uma delas se visualizar tal como a desenhamos.

O segundo passo ser escolher os elementos grficos e textuais que usaremos na composio. Esta escolha se deve basear em variveis como a pessoa ou empresa que deseja transmitir a mensagem, a prpria mensagem, o tipo de espectadores destinatrios da composio e as caractersticas funcionais e comunicativas de cada elemento.

Agora devemos definir que partes da rea do desenho devem estar ocupadas por elementos e que partes vo ficar vazias, sem nenhum contedo. Se deixarmos muitos espaos vazios, a composio pode ser descordenada j que ser difcil estabelecer relaes globais entre os elementos ou entre os grupos deles. Porm, se o nmero de componentes for elevado, podemos obter uma obra sobrecarregada, difcil de entender, na qual no se distingue com clareza o que cada coisa e qual a mensagem que quer transmitir. Comearemos a situar ento os elementos em cena, como se fossem atores de nossa particular obra de teatro, combinando-os de diferentes formas at obtermos um resultado satisfatrio. Neste ponto muito importante ter em conta que cada elemento visual tem uma funo determinada dentro da composio. A informao visual que traz um elemento pode mudar segundo o faam as propriedades do mesmo, como seu tamanho, forma ou cor, porm, sobretudo sua

proporo, o peso visual que tiver no total da composio. Indubitavelmente, a forma mais direta de marcar propores mediante o tamanho relativo dos elementos. Os elementos maiores, altos ou longos tm uma carga visual superior aos menores, curtos ou finos, criando zonas de atrao mais intensas.

Tambm podemos delimitar propores em um grafismo mediante a cor, com a qual podemos definir diferentes reas de tons teis para distribuir de forma adequada toda a informao grfica. Neste sentido, as cores puras e saturadas tm um maior peso visual que as secundrias neutras, e estas, maior que as tercirias pouco saturadas.

Outra tcnica para definir propores o uso de agrupamentos de elementos e a correta distribuio destas no cenrio, o que nos vai permitir estruturar de uma forma ou outra a composio. Proporo por agrupamentos

Este sistema costuma dar bons resultados, sempre que no abusemos dele criando um excessivo nmero de blocos significativos, j que ento se diminuiria importncia uns a outros e se perderia a proporcionalidade buscada. Mais regras prticas referentes proporo so: As formas regulares tm menor peso que as irregulares.

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

Sejam quais forem os elementos usados em uma composio deveremos sempre buscar umas propores adequadas entre eles, com o objetivo de que cada um cumpra seu papel comunicativo de forma adequada.

O design equilibrado. A escalaEntende-se por escala a relao entre as propores dos elementos visuais de uma composio. Entende-se por escala a relao entre as propores dos elementos visuais de uma composio. Todos os elementos tm a capacidade de modificar e se definir uns a outros segundo as relaes que se definam entre as propriedades anlogas deles. Portanto, o conceito de escala no se refere s relao entre tamanhos de dois ou mais elementos, como tambm relao entre cores, formas, etc. Um elemento grande ou pequeno segundo o tamanho dos elementos que lhe acompanham no cenrio. 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 no so absolutas, e sim relativas, j que dependem das do resto de elementos que lhe acompanham na composio. A proporo relativa entre elementos deve ser equilibrada, o que implica o uso de uma escala correta na composio. As escalas so utilizadas desta forma em planos e mapas, para conseguir representar os objetos reais o mais corretamente possvel, com as propores adequadas entre eles.

Em uma composio grfica a escala usada igualmente importante, tanto para distribuir o espao de desenho de forma acertada como para dar equilbrio de propores aos elementos, usando-se s vezes diferentes mtodos de distribuio de eficcia provada, como a regra Aurea ou o mtodo de Corbusier. A regra Aurea, inventada por Vitruvio, se utiliza para obter cenrios de trabalho de propores equilibradas, e se baseia em contemplar um espao retangular dividido em terceiras partes, tanto horizontal como verticalmente, conseguindo com isso secionar os espaos em partes iguais.

Por sua parte, o mtodo de propores criado pelo arquiteto francs 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 construo arquitetnica.

No caso do web design, o tamanho da rea de trabalho fixo, porm sim que deveremos estabelecer uma escala de trabalho adequada para dimensionar os elementos de nossa pgina. Escala proporcionada entre logotipo, opes de menu e contedo

Assim, o logotipo deve ter um tamanho relativo adequado pgina, os sistemas de navegao (menus) devem ser o suficientemente grandes como para ser vistos e manejados com facilidade, mas no entanto, que restem importncia ao contedo informativo da pgina, etc.

Um erro muito comum neste sentido o dos cones, que devem ser suficientemente grandes como para que no percam seus traos diferenciadores, nem sua zona ativa se atuam como links, porm nunca tanto que destaquem em excesso, sobretudo se vo acompanhados de um texto explicativo.

O design equilibrado. O contrasteO contraste permite ressaltar o peso visual, podemos consegui-lo atravs de diversos meios: tons, cores, contornos e escala. O contraste o efeito que permite ressaltar o peso visual de um ou mais elementos ou zonas de uma composio mediante a oposio ou diferena aprecivel entre elas, permitindo-nos atrair a ateno de espectador para eles.

O contraste pode ser conseguido atravs de diferentes oposies entre elementos: Contraste de tons Obtemos contraste entre elementos que possuem tons (claridade-escurido) opostos.

Neste caso, o maior peso ter o elemento mais escuro, destacando o mais claro sobre ele com mais intensidade quanto maior for a diferena tonal.

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

Este tipo de contraste talvez o mais intenso, e muito usado em composies grficas. Contraste de cores Dois elementos com cores complementares se reforam entre si, assim como uma cor quente e outra fria.

O contraste criado entre duas cores ser maior quanto mais afastadas estiverem no

crculo cromtico. As cores opostos contrastam muito, enquanto que as anlogas apenas fazem, perdendo importncia visual ambas.

Este efeito pode ser usado para dar maior dimenso ou sensao de proximidade a um elemento em uma composio, situando-o sobre uma cor que contraste com ele.

Este tipo de contraste especialmente indicado para os contedos 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). Porm, em certos elementos, nos quais este jogo de cores no for possvel, haver que buscar sempre um texto clido sobre um fundo frio ou vice-versa. Contraste de contornos Os contornos irregulares destacam de forma importante sobre os regulares ou reconhecveis.

Este tipo de contrastes adequado para dirigir a ateno do usurio a certos elementos de uma composio ou pgina web, como botes importantes, banners publicitrios, etc. No obstante, h que ser comedidos em seu uso, sobretudo se se combinam com outros tipos de contraste, j que podem ser um foco de atrao visual potente demais. Alm disso, criam muita tenso no espao que lhes rodeia. Contraste de escala o produzido pelo uso de elementos a diferentes escalas das normais ou de propores irreais, conseguindo-se o contraste por negao da percepo aprendida.

Este sistema de contraste no muito usado nas pginas web, onde se busca sempre a escala adequada, porm sim freqente em fotografia e pintura, conseguindo atrair a ateno do espectador de forma muito efetiva.

O design equilibrado. Os agrupamentosComo os elementos web devem se agrupar para obter um resultado coerente. O ser humano, tanto por seu carter racional como por herana cultural, tende a organizar os elementos que percebe ao redor como conjuntos significativos organizados. Esta inclinao a agrupar elementos relacionados em um fator que influi de forma notria na percepo que temos de nosso entorno, do que vemos ao nosso redor. As composies grficas no escapam a esta tendncia, portanto um correto agrupamento de seus elementos lhes outorga um carter lgico, racional, que aumenta seu valor comunicativo.

O agrupamento de nossos elementos grficos e textuais pode se basear em diferentes critrios:

Proximidade: Tendemos a agrupar aqueles objetos que esto prximos, mais pertos entre si. Semelhana: Tendemos a agrupar os elementos iguais ou parecidos. Continuidade: Nossa mente tende a agrupar aqueles elementos que tm uma continuidade significativa. Simetria: Tendemos a agrupar os elementos para que apaream ordenados formando figuras conhecidas.

No caso concreto das pginas web, os agrupamentos so muito teis e totalmente necessrios, sobretudo no que diz respeito a elementos similares ou de funcionalidade anloga, como componentes de menus de navegao, cones, dados relacionados, botes, etc.

Os agrupamentos tambm so muito teis em casos de formulrios ou fichas de muitos campos, sendo muito conveniente dividir estes em grupos de informao anloga, separando logo cada grupo dos demais mediante franjas horizontais ou verticais em branco.

Com isso, o formulrio no s ganha em beleza visual, como tambm fica mais claro, lgico w fcil de completar pelo usurio.

O design equilibrado. O reticuladoComo harmonizar os blocos de contedo que formaro a composio do desenho. Uma composio grfica deve ser equilibrada no s em contedos, como tambm visualmente, at tal ponto que podemos dizer que a ordem na disposio espacial dos elementos da mesma um dos fatores mais importantes para seu sucesso. O espectador que contempla uma obra grfica (folheto, cartaz trptico ou pgina web) busca subconscientemente nela uma ordem e uam estabilidade que lhe permitam passear a vista pela mesma de forma organizada e limpa. O sistema plano de referncia habitual nos seres humanos o formado por um eixo horizontal e outro vertical, ou seja, por duas retas que se cortam em um ngulo de 90. Neste sistema, o eixo horizontal sugere equilbrio e estabilidade, enquanto que o vertical facilita a elevao da vista, marcando prioridades ou nveis na composio. Visto que as composies grficas (e dentro delas, as pginas web) se representam em suportes planos, fcil deduzir que este sistema de referncia tambm o mais adequado para a distribuio de seus elementos. Se a isto somamos o carter eminentemente retangular da maioria dos suportes, obtemos por extenso o sistema de organizao ideal para nossas composies: o reticulado. Um reticulado ou rede um sistema de referncia formado por diferentes linhas horizontais e verticais que marcam a localizao de elementos e zonas em uma composio grfica, linhas que no tem porqu ter uma representao real (no tm

porqu fazer parte do grafismo), mas sim mental. So as guias imaginrias sobre as que vamos ir colocando os elementos, a espinha dorsal de uma composio grfica.

Mediante o reticulado, o designer vai situando com harmonia os blocos de contedo que formaro a composio: zonas principais e secundrias, ttulos e subttulos, blocos de texto, fotografias, ilustraes, grficos, sistemas de navegao, botes, cones, etc, dando com isso um estilo prprio visualmente lgico mesma. Uma composio grfica no um sistema padro, nico, e sim que os mesmos elementos se podem organizar segundo diferentes esquemas lgicos. Mas sempre devero estar dispostos segundo uma retcula que lhes traga equilbrio e estabilidade visual. tarefa do designer buscar o conjunto localizao-reticulado que melhor se adapte a sua obra. A localizao de elementos em uma composio segundo um reticulado determinado no requer a introduo dos elementos finais da mesma. Ou seja, se pode perfeitamente desenhar a organizao de um grafismo simplesmente com retngulos de cores. Mais ainda, com retngulos de uma s cor. O que importa no o aspecto visual final, e sim a organizao lgica e regular dos elementos. No caso concreto de uma pgina web, o designer pode perfeitamente distribuir em tela uma srie de retngulos que representem as zonas que vo ter a pgina. Se a distribuio segue um reticulado conforme as zonas esto localizadas com lgica, a pgina que resultar disso ter um 50% de possibilidades de ser correta.

Reticulado de Terra

Esta estrutura lgica criada com o reticulado deve se manter logo em todas as pginas que formam website, proporcionando com isso consistncia e homogeneidade ao mesmo. Se definirmos uma separao entre o cabealho de uma formulrio e o incio dos elementos do mesmo de 15 pixels, todos os formulrios, fichas, textos, etc, que tiverem cabealho, devem manter o mesmo espao separador. Se definirmos umas margens vazias entre a pgina que desenharmos e as bordas da janela do navegador de 30 pixels, todas as pginas do site devem manter constantes essas margens. Reticulado em um formulrio construdo com tabela

Uma vantagem adicional de desenhar um reticulado correto ser a comodidade na hora de construir depois a pgina com tabelas, j que a estrutura natural destas reticular.

O design equilibrado. Os alinhamentosNecessrios para conseguir uma composio ordenada e lgica, assim como para relacionar elementos. Uma vez definido o reticulado que vamos usar em nossa composio, deveremos situar na mesma os elementos grficos e textuais.

Neste ponto aparece o conceito de alinhamento, como a colocao de elementos grficos e textuais segundo uma linha dada, que geralmente ser horizontal ou vertical. Geralmente haver vrias linhas guias de alinhamento em uma composio. Alinhar os elementos uma operao imprescindvel para conseguir uma composio ordenada e lgica, pois com isso se criam unidades visuais definidas e relaes entre elementos. Se o alinhamento importante na hora de situar elementos grficos, ser ainda mais se se trata de contedos textuais. Efetivamente, os textos perfeitamente alinhados so mais fceis de ler, no cansam a vista e produzem um efeito de equilbrio que convida leitura. Ao contrrio, um texto sem alinhamento resulta confuso, difcil de ler, desmotivando ao espectador. Tudo o que est sendo falado se acentua ainda mais se o suporte uma pgina web, j que a forma do monitor e da janela do navegador impulsiona o uso de contornos retangulares, que unicamente se conseguem com alinhamentos perfeitos. Ademais, muitas vezes devemos desenhar as pginas com um importante nmero de elementos, por isso se a disposio dos mesmos no for perfeitamente regular ser muito difcil criar uma composio aceitvel. Os alinhamentos horizontais so imprescindveis para conseguir um desenho em nveis estveis, j que as linhas horizontais sugerem equilbrio. Como podemos ter blocos lgicos de diferente altura, estes alinhamentos se definiro desde as bordas superiores dos blocos. Alinhamentos horizontais em EresMas

Quanto s verticais, o alinhamento mais comum a esquerda, j que a normal nos livros e demais suportes textuais, estando nossa vista educada para tratar com ela.

Alinhamentos de textos esquerda

Os alinhamentos centralizados so pouco comuns, salvo no caso de tabelas de dados com colunas que admitam bem este tipo de alinhamento, sobretudo se todos os valores da coluna tiverem a mesma largura. Se no for assim, prefervel optar pelo alinhamento esquerda. Elementos centralizados em uma tabela

Quanto aos alinhamentos direita, so pouco freqentes, j que criam tenses visuais na maioria dos casos. Podem-se usar naqueles blocos cujo contedo deva se adaptar a um reticulado que defina uma linha vertical direita do mesmo, como ocorre em muitos menus de navegao situados esquerda da pgina. Tambm so teis nas colunas das tabelas que contiverem dados que devam seguir uma ordenao lgica a direitas, como o caso de dados de moeda. Adequando o alinhamento ao tipo de dados de cada campo

Existe outro tipo de alinhamento para textos, o justificado, no qual todas as linhas de texto tm a mesma largura, por isso ficam alinhadas tanto a esquerda quanto a direita, o que se consegue aumentando ou diminuindo o espaado normal das letras. Este tipo de

alinhamento muito usado nos livros e jornais, porm nas pginas web h que aplic-lo com precauo, destinando-o somente a blocos textuais de pouco largura (textos distribudos em vrias colunas, por exemplo).

Por ltimo, vale dizer que se os alinhamentos so imprescindveis, podem originar monotonia visual se forem seguidos ao p da letra, ao produzir pginas quadradas e artificiais demais. Por isso, bom introduzir alguns elementos que, sem romper o reticulado e os alinhamentos bsicos, introduzam um pouco de variedade visual, de frescor no desenho. Buscar o equilbrio entre alinhamentos e elementos que as rompam uma das tarefas principais do web designer.

O design equilibrado. As simetriasOutro condicionante para que o design da web tenha uma organizao natural. Se observarmos a Natureza, grande arquiteta e desenhista onde estiver, poderemos observar rapidamente que um dos elementos que mais utiliza para criar suas organismos a simetria, manifestando-se em quase todos os seres que existem ao longo e largo de nosso planeta.

O Homem pretendeu imitar este desenho simtrico natural em todos e cada um de seus aspectos criadores, desde os primeiros objetos de artesanato at os modernos automveis.

Se partirmos desta base, devemos aceitar que a busca de uma simetria estrutural, grfica e textual deve ser uma das primeiras metas de todo web designer, j que confere s composies de uma organizao natural a qual o espectador est acostumado. Por definio, uma forma ou imagem simtrica quando um eixo central pode dividi-la em duas partes iguais e opostas entre si. Este conceito, aplicado a uma composio grfica pode se aplicar tanto aos prprios elementos individuais da mesma como a sua totalidade. Neste caso, obter uma simetria exata pode resultar difcil (inclusive inconveniente), porm sim que podemos buscar uma simetria de blocos e espaamentos em nossa rede.

O design simtrico sugere estabilidade, equilbrio, resultando esttico, ordenado, atrativo e agradvel de contemplar. Do contrrio, o assimtrico mostra irregularidade,

desigualdade nas formas e desequilbrio. H que ter em conta que a simetria usada no deve de ser de todo exata, j que a simetria perfeita no natural, "perfeita" demais, vale a redundncia, fazendo aparecer as composies artificiais e pr-meditadas. Pequenas variaes na distribuio simtrica do esse toque de ruptura que torna sua contemplao mais amena e natural. No caso de uma pgina web, a concepo simtrica da mesma comea com o reticulado escolhido, j que ser o que define a distribuio bsica de elementos nela. H que tender ento a desenhar um reticulado o mais simtrico possvel.

Uma forma aceitada de romper o esquema simtrico de uma pgina criar blocos entortados visualmente para um lado, alternando-os na pgina de forma inversa, ou seja, o primeiro mais torto direita, o segundo mais esquerda, etc. Outra tcnica o uso de um nico menu lateral de navegao, que descompensa o peso visual para a zona na qual se encontra. Se na disposio de blocos no reticulado podemos ser algo permissivos, nos contedos de nossas pginas a simetria deve ser uma norma quase inflexvel, sobretudo na construo de certos elementos. misso fundamental de todo designer ser capaz de construir contedos simtricos sem que paream rgidos, artificiais. Exemplos claros desta regra so a criao de formulrios e de fichas. Constroem-se geralmente apoiando-se em uma tabela construtor, pela qual deveremos buscar a simetria nesta tabela, embora logo, devido s diferentes longitudes e natureza dos campos, o resultado final "parea" no s-lo. Distribuio simtrica em uma ficha

Em relao aos textos, se nossa pgina eminentemente textual, e em textos de uma s linha, como esta que vocs tm adiante, o contedo ser simtrico por prpria construo. Porm, se desejarmos distribuir o contedo em vrias colunas, deveremos prestar especial ateno a que estas sejam equilibradas, evitando o remarcado forte de pores de texto ou de uma ou mais colunas mediante cores de fundo, textos em negrito, etc. Colunas textuais e simetria

A regra geral buscar sempre a harmonia, mesmo quando introduzamos pequenos elementos diferenciadores. Outro aspecto fundamental manter simetrias no tratamento dos ares em nossa pgina. Entendemos por "ar" o espao livre que fica entre elementos e entre estes e os limites da pgina. o que em qualquer documento chamamos "margens", porm estendido a todos os elementos e contedos. Se nossa pgina tem um espao livre entre sua margem esquerda e o primeiro contedo por esse lado, o mesmo ar deve ficar entre a margem direita e o contedo por esse lado. Igualmente, os espaos livres entre os elementos internos da pgina devem ser simtricos e iguais, buscando com isso o equilbrio na composio. Este conceito aplicvel a todos e cada um dos elementos de nossas pginas. Assim, se temos uma lista de contedos, podemos criar uns espaos entre cada 5-7 elementos, que evitaro a sensao de opresso produzida quando as listas tm muitos elementos. Ento, deveremos repetir este espao separador constantemente ao longo da lista.

Da mesma forma, quando trabalhamos com formulrios muito importante desenh-los

de tal forma que o ar que fique entre os diferentes elementos que o formem seja simtrico, criando um total claro e harmonioso.

E o mesmo podemos dizer dos demais elementos de nossa pgina: ares simtricos, bem repartidos, equilibrados.

O design equilibrado. O equilbrio entre contedosA organizao espacial, primordial para atrair ao usurio. Em toda composio deve existir um adequado equilbrio entre os diferentes elementos que a formam se quisermos atrair a ateno do espectador e mant-la at que tenha assimilado a mensagem que quisermos lhe transmitir. Para isso, imprescindvel manter em nossa obra grfica uma correta organizao espacial de contedos grficos e textuais, assim como umas quantidades adequadas de cada um deles. Os componentes grficos contribuem composio sensaes visuais por meio de formas, cores e contrastes, enquanto que os textos fornecem informao, mensagens, embora isto no queira dizer que estas funcionalidades sejam excludentes, j que os grficos podem trazer informao e os textos formas e cores (de fato, a Tipografia uma ferramenta de desenho excelente). As composies formadas por muitos elementos grficos e pouco ou nenhum contedo textual podem criar rejeio naqueles espectadores que buscam o contedo substancial na obra, a informao prtica que oferece. Este contedo textual especialmente importante nas pginas web, j que os usurios comparecem a um site buscando sempre algum tipo de informao, abandonando-o rapidamente se no encontrar algum estmulo informativo que lhe motive.

No lado ao contrrio, as composies nas quais se introduz um contedo eminentemente textual, com pouco ou nenhum contedo grfico, costumam ser rejeitadas pelo espectador, que encontra tremendamente montona e entediada uma obra que aparece vista como uma mancha de cor indiferenciada, que exige ademais um elevado nvel de concentrao e muito tempo para resultar til. Necessitamos ento introduzir sensaes visuais grficas que motivem ao espectador a investigar o contedo textual.

No caso das pginas web, os tipos de contedos a oferecer aumentam consideravelmente com respeito aos de uma composio sobre papel j que podemos incluir nelas no s grficos e textos, como tambm udios, animaes, vdeo, applets de Java, etc. Isto torna necessrio um planejamento correto dos elementos a incluir em uma pgina, com objetivo de despertar a ateno do usurio, sim, mas oferecendo-lhe sempre informao relevante e nunca sobrecarregando de elementos suprfluos. Ademais, devido s limitaes prprias dos sistemas informticos, da linguagem HTML, dos navegadores web e das conexes Internet, o equilbrio entre contedos deve contemplar tambm que o resultado final se possa visualizar corretamente. De nada serve uma pgina com grficos maravilhosos e animaes espetaculares se o usurio deve esperar um minuto para poder v-las. mais, ele na verdade nunca esperar esse minuto. portanto prefervel organizar as pginas web de forma equilibrada, oferecendo em cada uma delas as doses adequadas de elementos visuais e informativos. Como norma geral, sempre deve haver mais componentes textuais do que grficos em uma pgina.

melhor sempre ter duas pginas leves e equilibradas a uma recarregada de elementos incapazes de reter a ateno do usurio no verdadeiramente importante: a mensagem que desejamos transmitir.

O design equilibrado. A hierarquia visualA organizao guia ao usurio na contemplao de uma pgina web. Em toda composio grfica deve-se criar uma hierarquia visual adequada, com o objetivo de que os elementos mais importantes da mesma se mostrem devidamente acentuados. Mediante um design adequado, pode-se estabelecer um caminho visual que conduza o olho do espectador e que v mostrando a informao contida na composio de forma organizada, lgica e confivel, que dirija sua percepo pela rota mais ideal.

A pessoa que contempla uma obra grfica aprecia em primeiro lugar um conjunto completo de formas e cores, com os elementos situados em primeiro plano contrastando com o fundo da composio. S depois desta primeira observao global, e se sua curiosidade tiver sido despertada, o espectador comear a analisar as partes individuais do todo, comeando pelos elementos grficos puros, e continuando logo com os elementos textuais, mais difceis de interpretar, j que h que l-los palavra por palavra.

Nos pases ocidentais, lemos os documentos da esquerda direita e desde a parte superior inferior. Esta forma de proceder se estendeu todas aquelas atividades nas que necessitamos visualizar algo (quando observamos a uma pessoa, geralmente comeamos pela parte esquerda de sua cabea). Isto pode ser aproveitado para organizar o contedo de uma composio logicamente, situando nela os elementos mais importantes na zona superior esquerda da mesma, as seguintes em importncia na lateral esquerda, as seguintes no corpo central e as menos relevantes na parte inferior.

Esta forma de proceder comum no s em folhetos, documentos ou cartazes publicitrios criados com um design clssico, assim como nas pginas web, que seguem esta estrutura hierrquica em 95% dos sites, que, ademais, so os que melhor aceitao tem pelo pblico. Hierarquia visual por posicionamento em pgina web

Outro sistema de estabelecer uma hierarquia nos contedos o uso de cores. Podemos enfatizar certas zonas da composio usando nelas cores primrias muito saturadas, que atraem de forma irresistvel a ateno dos espectadores, tendo sempre cuidado de que os textos nelas contidos contrastem de forma clara com o fundo, para que possam ser lidos com comodidade. Neste caso, h que ter cuidado com no abusar destas cores "fortes", destinando-as somente pequenas zonas especiais, j que sobrecarregam em excesso a vista, sobretudo o amarelo. Para as zonas de segunda ordem, podemos usar as cores menos saturadas, secundrias ou tercirias, sendo uma boa opo aquelas presentes na natureza, j que so mais naturais e melhor aceitas pelos espectadores. Por ltimo, as zonas menos importantes podemos no colori-las ou faz-lo muito sutilmente, para que no atraia em excesso o olhar.

Esta variao cromtica no nica, j que se pode usar qualquer jogo de cores que

consiga estabelecer uma hierarquia visual adequada. Tambm podemos percorrer na hora de estabelecer categorias de importncia visual aos contrastes. Se situarmos prximas ou sobrepostas duas zonas de cores complementares ou que contrastem muito, a importncia de ambas na composio se refora, sobretudo se as zonas de contraste no forem muitas. Hierarquia visual por contrastes de cores (azul, laranja e branco)

Sendo ao contrrio, se as zonas so de cores anlogas, pertencentes a uma mesma gama, a importncia de ambas se diminui mesmo sendo cores vivas, j que se distinguir uma zona de atrao, porm seus elementos aparecero esfumados, pouco relevantes. Quanto aos elementos textuais, aos que tambm so aplicveis os mtodos de cor e contraste, podemos estabelecer uma hierarquia neles mediante os tamanhos relativos dos mesmos. Os ttulos de pgina, os cabealhos ou os titulares de uma notcia ou seo podem ser destacados aumentando seu tamanho segundo sua importncia na composio ou pgina web. Este mtodo sempre aconselhvel, j que organiza de forma lgica o contedo textual e rompe a monotonia intrnseca dos textos. Hierarquia visual em elementos textuais

Um elemento a evitar sempre em uma composio, salvo que nos convenha seu uso, so os enfeites grficos visualmente impactantes, como zonas de cor intensa sem sentido, cones que destaquem em excesso, linhas horizontais escandalosas, animaes que tragam pouca informao, etc. Sua presena atrai a vista do espectador, sem lhe oferecer nada em troca e desvia seu interesse dos elementos textuais e grficos que sim trazem verdadeira informao.

Isto no quer dizer que no possam se empregar. So s vezes muito teis para romper a monotonia de uma composio introduzindo nela elementos que proporcionem frescor visual, porm devem ser usados sempre com moderao. Os tamanhos excessivamente grandes nos textos tambm um fator a ter em conta. Um cabealho de pgina ou de seo deve destacar o suficiente sobre o resto do contedo textual, porm nunca devem ser desproporcionadas nem atrair em excesso a ateno do usurio. Quanto abundncia deles, h que ter sempre em conta que um par de cabealhos de maior tamanho estabelece uns nveis de importncia convenientes, porm uma multido de textos de grande tamanho acrescenta confuso a uma composio, j que o usurio perde as referncias sobre o que importante na mesma. Resumindo: muito importante estabelecer uma organizao hierrquica dos contedos de nossa composio, podendo-se usar para isso diferentes tcnicas de design, porm tendo em conta que o mal uso ou o abuso delas pode converter a composio em algo que no desperta interesse do usurio ou transforma-se em uma "palhaada", onde tudo escandaloso e nada se destaca de forma clara.

Teoria da cor. Introduo uma parte fundamental da web, produtor de sensaes. Estamos rodeados de cores. Estas fazem parte da prpria, e o ser humano um dos seres privilegiados da Natureza por poder desfrutar delas. Quando vamos pela rua, quando estamos trabalhando ou desfrutando de nosso tempo livre ou quando estamos navegando pela Internet recebemos constantemente impresses de cor por meio de nossa vista, e estas impresses tm a faculdade de nos excitar, de nos tranqilizar, de nos deixar de bom humor ou de nos inspirar pena. o mundo de cor.

E se este aspecto da vida importante em todas e cada uma de suas facetas, ainda mais no mundo do design. talvez uma de suas partes fundamentais, e ainda mais no web design, pois dispomos de muito pouco espao e muito pouco tempo para poder expressar a alma de nosso site e captar adequadamente a ateno de nossos visitantes, e a cor a primeira forma de comunicao entre uma pgina web e o usurio.

Est demonstrado que os nove primeiros segundos nos quais uma pessoa contempla nossa pgina so cruciais, e deles depende que esta continue com agrado navegando por nosso site, o faa com indiferena ou nos abandone. E do que v nestes segundos, o que talvez mais chame e capte sua ateno seja a distribuio e a gama de cores de nossa pgina.

Esta importncia da cor se estende a todas as artes, um pintor, por exemplo, dispe de muito mais tempo que ns para se expressar com a cor. Este tambm conta com um leque de cores quase infinito, enquanto que ns, os web designers, dispomos somente de algumas cores para expressar o que desejamos (e j veremos mais adiante que poucas cores temos na verdade ao nosso alcance).

Neste captulo veremos um pouco o mundo da cor em geral, sua aplicao ao design grfico e as restries que vamos ter na hora de trabalhar com cores no design de um web site.

Teoria da cor. Natureza da corDescrio formal da cor como um fenmeno fsico. Teoria da cor. Natureza da cor Podemos ver as cosas que nos rodeiam porque A Terra recebe a luz do Sol. Nossa estrela me nos inunda constantemente com sua luz, e graas a ela tambm possvel a vida em nosso planeta.

A luz do Sol est formada em realidade por um amplo espectro de radiaes eletromagnticas de diferentes longitudes de onda, formando um espectro contnuo de radiaes, que compreende desde longitudes de onda muito pequenas, de menos de 1 picmetro (raios csmicos), at longitudes de onda muito grandes, de mais de 1 kilmetro.

O ser humano somente capaz de visualizar um subconjunto delas, as que vo desde 380 (violeta) a 780 nanmetros (vermelho), como podemos apreciar claramente se a fazemos passar por um prisma, efeito descoberto por Newton.

Cada longitude de onda define uma cor diferente (cores de emisso). A soma de todos as cores (longitudes de onda) d como resultado a luz branca, sendo a cor preta ou a obscuridade, a ausncia de cores.

Se uma vez descomposta a luz solar em suas longitudes de onda constituintes voltarmos a junt-las com outro prisma, voltaremos a obter a luz branca.

Teoria da cor. A percepo da corComo o olho pode detectar e classificar as cores que chegam. Bem, j sabemos de onde vm as cores, porm como o olho humano pode ver estas ondas e distingui-las umas de outras? A resposta a esta questo se encontra no olho humano, basicamente uma esfera de 2 cm de dimetro que percorre a luz e a enfoca em sua superfcie posterior.

No fundo do olho existem milhes de clulas especializadas em detectar as longitudes de onda procedentes de nosso ambiente. Estas maravilhosas clulas, principalmente os cones e os bastonetes, percorrem as diferentes partes do espectro de luz solar e as transformam em impulsos eltricos, que so enviados logo ao crebro atravs dos nervos pticos, sendo este o encarregado de criar a sensao da cor.

Os cones se concentram em uma regio prxima do centro da retina chamada fvea. Sua distribuio segue um ngulo ao redor de 2 contados desde a fvea. A quantidade de cones de 6 milhes e alguns deles tm uma terminao nervosa que vai ao crebro. Os cones so os responsveis da viso da cor e acredita-se que h trs tipos de cones, sensveis as cores vermelho, verde e azul, respectivamente. Dada sua forma de conexo s terminaes nervosas que se dirigem ao crebro, so os responsveis da definio espacial. Tambm so pouco sensveis intensidade da luz e proporcionam viso fotpica (viso a altos nveis). Os bastonetes se concentram em zonas afastadas da fvea e so os responsveis da viso escotpica (viso a baixos nveis). Os bastonetes compartilham as terminaes nervosas que se dirigem ao crebro, sendo portanto, sua colaborao definio espacial pouco importante. A quantidade de bastonetes se situa ao redor de 100 milhes e no so sensveis cor. Os bastonetes so muito mais sensveis que os cones intensidade luminosa, por isso contribuem viso da cor aspectos como o brilho e o tom, e so os responsveis da viso noturna.

Existem grupos de cones especializados em detectar e processar uma cor determinada, sendo diferente o total deles dedicados a uma cor e a outra. Por exemplo, existem mais clulas especializadas em trabalhar com as longitudes de onda correspondentes ao

vermelho que a nenhuma outra cor, por isso que quando o ambiente em que nos encontramos nos envia bastante vermelho se produz uma saturao de informao no crebro desta cor, originando uma sensao de irritao nas pessoas. Quando o sistema de cones e bastonetes de uma pessoa no o correto se podem produzir uma srie de irregularidades na apreciao da cor, assim como as partes do crebro encarregadas de processar estes dados esto prejudicadas. Esta a explicao de fenmenos como o Daltonismo. Uma pessoa daltnica no aprecia as gamas de cores em sua justa medida, confundindo os vermelhos com os verdes.

Devido a que o processo de identificao de cores depende do crebro e do sistema ocular de cada pessoa em concreto, podemos medir com toda exatido a longitude de onda de uma cor determinada, porm o conceito da cor produzida por ela totalmente subjetivo, dependendo da pessoa em si. Duas pessoas diferentes podem interpretar uma cor dada de forma diferente, e pode haver tantas interpretaes de uma cor cmo quantas pessoas h. Na verdade, o mecanismo de mescla e produo de cores produzido pela reflexo da luz sobre um corpo diferente ao da obteno de cores por mescla direta de raios de luz, como ocorre com o do monitor de um computador, porm a grandes traos e a nvel prtico so suficientes os conceitos estudados at agora.

Teoria da cor. Modelos de corDescrio dos tipos de cor conhecidos, assim como se aborda uma explicao de como os objetos adquirem as cores. As cores obtidas diretamente naturalmente por decomposio da luz solar ou artificialmente mediante focos emissores de luz de uma longitude de onda determinada se denominam cores aditivas. No necessria a unio de todas as longitudes do espectro visvel para obter o branco, j que se misturarmos s o vermelho, verde e azul obteremos o mesmo resultado. por

isso que estas cores so denominadas cores primrias, porque a soma das trs produz o branco. Ademais, todas as cores do espectro podem ser obtidas a partir delas.

As cores aditivas so as usadas em trabalho grfico com monitores de computador, j que, segundo vimos quando falamos dos componentes grficos de um computador, o monitor produz os pontos de luz partindo de trs tubos de raios catdicos, um vermelho, outro verde e outro azul. Por este motivo, o modelo de definio de cores usado em trabalhos digitais o modelo RGB (Red, Green, Blue). Todas as cores que se visualizam no monitor esto em funo das quantidades de vermelho, verde e azul utilizadas. Por isso, para representar uma cor no sistema RGB se atribui um valor entre 0 e 255 (notao decimal) ou entre 00 e FF (notao hexadecimal) para cada um dos componentes vermelho, verde e azul que o formam. Os valores mais altos de RGB correspondem a uma quantidade maior de luz branca. Por conseguinte, quanto mais altos so os valores RGB, mais claros so as cores.

Desta forma, uma cor qualquer vir representada no sistema RGB mediante a sintaxe decimal (R,G,B) ou mediante a sintaxe hexadecimal #RRGGBB. A cor vermelha pura, por exemplo, se especificar como (255,0,0) em notao RGB decimal e #FF0000 em

notao RGB hexadecimal, enquanto que a cor rosa claro dada em notao decimal por (252,165,253) se corresponde com a cor hexadecimal #FCA5FD. Esta forma aditiva de perceber a cor no nica. Quando a luz solar choca contra a superfcie de um objeto, este absorve diferentes longitudes de onda de seu espectro total, enquanto que refletem outras. Estas longitudes de onda refletidas so precisamente as causadoras das cores dos objetos, cores que por ser produzidas por filtragem de longitudes de onda se denominam cores subtrativas. Este fenmeno o que se produz em pintura, onde a cor final de uma zona vai depender das longitudes de onda da luz incidente refletidas pelos pigmentos de cor da mesma. Um carro de cor azul porque absorve todas as longitudes de onda que formam a luz solar, exceto a correspondente cor azul, que reflete, enquanto que um objeto branco porque reflete todo o espectro de ondas que formam a luz, ou seja, reflete todas as cores, e o resultado da mistura de todas elas d como produto o branco. Por sua vez, um objeto negro porque absorve todas as longitudes de onda do espectro: o negro a ausncia de luz e de cor. Nesta concepo subtrativa, as cores primrias so outras, concretamente o cian, o magenta e o amarelo. A partir destas trs cores podemos obter quase todas as demais, salvo o branco e o negro.

Efetivamente, a mescla de pigmentos cian, magenta e amarelo no produz a cor branca, e sim uma cor cinza sujo, neutro. Quanto ao negro, tampouco possvel obt-lo a partir dos primrios, sendo necessrio inclu-lo no conjunto de cores bsicas subtrativos, obtendo-se o modelo CMYK (Cyan, Magenta, Yellow, Black). O sistema CMYK, define as cores de forma similar a como funciona uma impressora de injeo de tinta ou uma imprensa comercial de quadricomia. A cor da superposio ou de colocar juntas gotas de tinta semi-transparentes, das cores cian (um azul brilhante), magenta (uma cor rosa intenso), amarelo e negro, e sua notao se corresponde com o valor em tanto por cento de cada uma destas cores.

Desta forma, uma cor qualquer vir expressa no sistema CMYK mediante a expresso (C,M,Y,K), na que figuram os tantos por cento que a cor possui dos componentes bsicos do sistema. Por exemplo, (0,0,0,0) branco puro (o branco do papel), enquanto que (100,0,100,0) corresponde cor verde.

As cores subtrativas so usadas em pintura, imprensa e, em geral, em todas aquelas composies nas que as cores se obtm mediante a reflexo da luz solar em mesclas de pigmentos (tintas, leos, aquarelas, etc.). Nestas composies se obtm a cor branca mediante o uso de pigmentos dessa cor (pintura) ou usando um suporte de cor branca e deixando sem pintar as zonas da composio que devam ser brancas (imprensa).

Os sistemas RGB, CMYK se encontram relacionados, j que as cores primrias de um so os secundrios do outro (as cores secundrias so as obtidas por mescla direta das primrias). Outros modelos de definio da cor o modelo HSV, que define as cores em funo dos valores de trs importantes atributos destes, matiz, saturao e brilho.

O matiz (Hue) faz referncia cor como tal, por exemplo, o matiz do sangue vermelho. A saturao ou intensidade indica a concentrao de cor no objeto. A saturao de vermelho de um morango maior que a do vermelho de uns lbios. Por sua parte, o brilho (Value) denota a quantidade de claridade que tem a cor (tonalidade mais ou menos escura). Quando falamos de brilho fazemos referncia ao processo mediante o qual se acrescenta ou se tira o branco a uma cor. Mais adiante estudaremos detalhadamente estes conceitos. Por ltimo, existem diferentes sistemas comerciais de definio de cores, sendo o mais conhecido deles o sistema Pantone.

Criado em 1963 e buscando um padro para a comunicao e reproduo de cores nas artes grficas, seu nome completo Pantone Matching System, e se baseia na edio de uma srie de catlogos sobre diversos substratos (superfcies a imprimir), que

subministram uma codificao padronizada mediante um nmero de referncia e uma cor especfica.

Teoria da cor. Tipos de corNeste captulo descreveremos como a partir das cores primrias se podem conseguir outras, e dependendo das tonalidades fazer diferentes classificaes. O sistema de definio de cores aditivas RGB, usado em design grfico digital e em web design, parte de trs cores primrias, vermelho, verde e azul, a partir das quais possvel obter todas as demais de espectro.

Assim, por mescla direta das cores primrias obtemos as cores secundrias, cian, magenta e amarelo, e por mescla direta destas as cores tercirias. Se continuarmos misturando cores vizinhas iremos obtendo novas cores, conseguindo uma representao destas muito importante no design, denominada crculo cromtico, representativa da decomposio em cores da luz solar, que nos ajudar a classificar estas e a obter suas combinaes ideais.

Partindo do crculo cromtico podemos estabelecer diferentes classificaes das cores, entre as que destacam: Cores em clidos e frios

As cores clidas do sensao de atividade, de alegria, de dinamismo, de confiana e amizade. Estas cores so o amarelo, o vermelho, o laranja e a prpura em menor medida. As cores frias do sensao de tranqilidade, de seriedade, de distanciamento. Cores deste tipo so o azul, o verde, o azul esverdeado, o violeta, cian, aqua, e s vezes o celeste. Uma cor azul aquoso perfeita para representar superfcies metlicas. Verdes escuros saturados expressam profundidade. Cores claras ou luminosas e escuras

As cores claras inspiram limpeza, juventude, jovialidade, como ocorre com amarelos, verdes e laranjas, enquanto que as escuras inspiram seriedade, madureza, calma, como o caso dos tons vermelhos, azuis e negros. Cores apagadas ou sujas e as cores pastel

Obtidos quando se aumenta ou diminui a luminosidade de todo o crculo cromtico. As cores apagadas expressam obscuridade, morte, seriedade, enquanto que as cores pastel sugerem luz, frescor e naturalidade. Gama de cinzas

So cores neutras, formadas por igual quantidade de vermelho, verde e azul. As cores cinza tm toda uma expresso RGB hexadecimal do tipo #QQQQQQ, ou seja, os seis caracteres iguais. O cinza so cores ideais para expressar seriedade, ambigidade, elegncia, embora seja por natureza cores um pouco tristes. Em geral, as tonalidades da parte alta do espectro (vermelhos, alaranjados, amarelos) costumam ser percebidas como mais enrgicas e extrovertidas, enquanto que as das partes baixas (verdes, azuis, prpuras) costumam parecer mais tranqilas e introvertidas. Os verdes e os azuis se percebem acalmados, relaxados e tranqilizantes. Por sua vez, os vermelhos, laranjas, e amarelos so percebidos como cores clidas, enquanto que os azuis, verdes e violetas so considerados cores frias. As diferentes tonalidades tambm produzem diferentes impresses de distncia: um objeto azul ou verde parece mais distante que um vermelho, laranja ou marrom. NOTA: H que ter em conta sempre que a percepo de uma cor depende em grande medida da rea ocupada pela mesma, sendo muito difcil apreciar o efeito de uma cor determinada se esta se localiza em uma zona pequena, sobretudo se estiver rodeada de outras cores.

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

Toda cor possui uma srie de propriedades que lhe fazem variar de aspecto e que definem sua aparncia final. Entre estas propriedades cabe distinguir: Matiz (Hue) 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. O Matiz se define como um atributo de cor que nos permite distinguir o vermelho do azul, e se refere ao percorrido que faz um tom para um ou outro lado do crculo cromtico, pelo qual o verde amarelado e o verde azulado sero matizes diferentes do verde.

As 3 cores primrias representam as 3 matizes primrias, e mesclando estes podemos obter as demais matizes ou cores. Duas cores so complementares quando esto uma frente outra no crculo de matizes (crculo cromtico). Saturao ou Intensidade Tambm chamada Croma, este conceito representa a pureza ou intensidade de uma cor particular, a vivacidade ou palidez da mesma, e pode se relacionar com a largura de banda da luz que estamos visualizando. As cores puras do espectro esto completamente saturadas. Uma cor intensa muito viva. Quanto mais se satura uma cor, maior a impresso de que o objeto est se movendo.

Tambm pode ser definida pela quantidade de cinza que contm uma cor: quanto mais cinza ou mais neutra for, menos brilhante ou menos "saturada" . Igualmente, qualquer mudana feita a uma cor pura automaticamente baixa sua saturao. Por exemplo, dizemos "um vermelho muito saturado" quando nos referimos a um vermelho puro e rico. Porm, quando nos referimos aos tons de uma cor que tem algum valor de cinza, as chamamos de menos saturadas. A saturao da cor se diz que mais baixa quando se adiciona seu oposto (chamado complemento) no crculo cromtico. Para no saturar uma cor sem que varie seu valor, h que mescl-la com um cinza de branco e preto de seu mesmo valor. Uma cor intensa como o azul perder sua saturao medida que se adiciona branco e se converta em celeste.

Outra forma de no saturar uma cor, mistur-la com seu complemento, j que produz sua neutralizao. Baseando-se nestes conceitos podemos definir uma cor neutra como aquela na qual no se percebe com clareza sua saturao. A intensidade de uma cor est determinada por seu carter de claro ou apagado.

Esta propriedade sempre comparativa, j que relacionamos a intensidade em comparao com outras coisas. O importante aprender a distinguir as relaes de intensidade, j que esta muitas vezes muda quando uma cor est rodeada por outra. Valor ou Brilho (Value) um termo que se usa para descrever que to claro ou escuro parece uma cor, e se refere quantidade de luz percebida. O brilho se pode definir como a quantidade de "obscuridade" que tem uma cor, ou seja, representa o claro ou escuro que uma cor com respeito a sua cor padro. uma propriedade importante, j que vai criar sensaes espaciais por meio da cor. Assim, pores de uma mesma cor com fortes diferenas de valor (contraste de valor) definem pores diferentes no espao, enquanto que uma mudana gradual no valor de uma cor (gradao) dar a sensao de contorno, de continuidade de um objeto no espao. O valor o maior grau de claridade ou obscuridade de uma cor. Um azul, por exemplo, mesclado com branco, d como resultado um azul mais claro, ou seja, de um valor mais alto. Tambm denominado tom, diferente cor, j que se obtm do agregado de branco ou negro a uma cor base.

medida que se agrega mais preto a uma cor, se intensifica tal obscuridade e se obtm um valor mais baixo. medida que se agrega mais branco a uma cor se intensifica a claridade da mesma, obtendo-se com isso valores mais altos. Duas cores diferentes (como o vermelho e o azul) podem chegar a ter o mesmo tom, se consideramos o conceito como o mesmo grau de claridade ou obscuridade com relao mesma quantidade de branco ou preto que contenha segundo cada caso. A descrio clssica dos valores corresponde a claro (quando contm quantidades de branco), mdio (quando contm quantidades de cinza) e escuro (quando contm quantidades de preto). Quanto mais brilhante for a cor, maior ser a impresso de que o objeto est mais perto do que em realidade est. Estas propriedades da cor deram lugar a um sistema especial de representao destes, tal como vimos na seo anterior, sistema HSV. Para expressar uma cor neste sistema se parte das cores puras, e se expressam suas variaes nestas trs propriedades mediante um tanto por cento.

Podemos usar estas propriedades na busca das gamas e contrastes de cores adequadas para nossas pginas, sendo possvel criar contrastes no matiz, na saturao e no brilho, e talvez este ltimo o mais efetivo. Grupos de cores Com estes conceitos em mente e tomando como base a roda de cores podemos definir os seguintes grupos de cores, que nos criaro boas combinaes em uma pgina web: Cores acromticas: aquelas situadas na zona central do crculo cromtico, prximos ao centro deste, que perderam tanta saturao que no se aprecia nelas o matiz original.

Colores cromticas cinzas: situadas perto do centro do crculo cromtico, porm fora da zona de cores acromticas, nelas se distingue o matiz original, embora muito pouco saturado.

Colores monocromticas: variaes de saturao de uma mesma cor (matiz), obtidas por deslocamento desde uma cor pura at o centro do crculo cromtico.

Cores complementares: cores que se encontram simtricas com respeito ao centro da roda. O Matiz varia em 180 entre um e outro.

Cores complementares prximas: tomando como base uma cor na roda e depois outras dois que eqidistem do complementar do primeiro.

Duplos complementares: dois pares de cores complementares entre si.

Trades complementares: trs cores eqidistantes tanto do centro da roda, como entre si, ou seja, formando 120 uma da outra.

Gamas mltiplas: escala de cores entre duas seguindo uma graduao uniforme. Quando as cores extremas esto muito prximas no crculo cromtico, a gama originada conhecida tambm com o nome de cores anlogas.

Mescla brilhante-tnue: escolhe-se uma cor brilhante pura e uma variao tnue de seu complementar.

Todos estes grupos de cores formam paletas harmnicas, aptas para ser usadas em composies grficas.

Teoria da cor. Contrastes de corO contraste um fenmeno com o qual se podem diferenciar cores atendendo luminosidade, cor de fundo sobre a qual se projetam... este artigo: 3 votos Vimos no tema sobre o design equilibrado que o contrate entre elementos era um aspecto importante na hora de criar uma composio grfica, e que uma das formas mais efetiva de consegui-lo era mediante a cor.

Quando duas cores diferentes entram em contraste direto, o contraste intensifica as diferenas entre ambas. O contraste aumenta quanto maior for o grau de diferena e maior for o grau de contacto, chegando a seu mximo contraste quando uma cor est rodeada por outra. O efeito de contraste recproco, j que afeta s duas cores que intervm. Todas as cores de uma composio sofrem a influncia das cores com as que entram em contato. Existem diferentes tipos de contrastes: Contraste de luminosidade Tambm denominado contraste claro-escuro, se produz ao confrontar uma cor clara ou saturada com branco e uma cor escura ou saturada de preto.

um dos mais efetivos, sendo muito recomendvel para contedos textuais, que devem destacar com clareza sobre o fundo. Contraste de valor Quando se apresentam dois valores diferentes em contraste simultneo, o mais claro parecer mais alto e o mais escuro, mais baixo. Por exemplo, ao colocar dois retngulos grens, um sobre fundos esverdeados e o outro sobre fundo laranja, veremos mais claro o situado sobre fundo esverdeado.

A justaposio de cores primrias exalta o valor de cada um. Contraste de saturao Origina-se da modulao de um tom puro, saturando-o com branco, negro ou cinza. O contraste pode se dar entre cores puras ou ento pela confrontao destes com outros no puros. As cores puras perdem luminosidade quando se adiciona preto, e variam sua saturao mediante a adio do branco, modificando os atributos de calor e frieza. O verde a cor que menos muda misturada tanto com o branco como com o preto.

Como exemplo, se situarmos sobre o mesmo fundo trs retngulos com diferentes saturaes de amarelo, contrastar sempre o mais puro. Contraste de temperatura o contraste produzido ao confrontar uma cor clida com outra fria.

A calidez ou a frieza de Uma cor relativa, j que a cor modificada pelas cores que a rodeiam. Sendo assim, um amarelo pode ser clido com respeito a um azul e frio com respeito a um vermelho. E tambm um mesmo amarelo pode ser mais clido se estiver rodeado de cores frias, e menos clidas se o rodeiam com vermelho, laranja, etc. Contraste de complementares Duas cores complementares so as que oferecem juntas melhores possibilidades de contraste, embora resultem muito violentas visualmente combinar duas cores complementares intensas.

Para conseguir uma harmonia convm que