Autor: leodeus

Um sistema de grade é uma ferramenta para organizar elementos gráficos de texto e imagens que, baseando-se em proporções matemáticas, proporciona estrutura ao design. Ao criar uma grade, é preciso separar forma e função.

Como Construir uma Grade:

1. Compreenda o Meio: Seja para impressos ou web, adapte a grade ao ambiente.
2. Briefing Claro: O tamanho da mídia, seja um livro ou site, define a grade. No web design, atender a uma resolução base, como 1024px, é sensato, alcançando a maioria dos usuários.

Ferramentas Úteis

• CSS Frameworks: Facilitam a construção da grade e garantem a consistência, especialmente em navegadores desafiadores.
• Blueprint: Uma estrutura CSS que fornece reset de comportamento padrão do navegador, estilos tipográficos sensatos e uma grade flexível.

Dica Prática

É importante manter a simplicidade, fazendo com que a grade seja abrangente, mas fácil de usar. Grades bem desenhadas não limitam a criatividade; pelo contrário, fornecem uma base para composições visualmente equilibradas.

Ao criar uma grade, pense em matemática como aliada, guiando seu design para além da estética, rumo à funcionalidade.

Este capítulo explora a conexão entre arte e matemática na busca pela beleza. Aborda a Seção Áurea e a Regra dos Terços, destacando como esses conceitos podem ser aplicados ao design web para criar layouts atraentes.

Seção Áurea

Destaca o desafio da complexidade matemática na aplicação prática da Seção Áurea ao design.

Regra dos Terços

Introduzida como uma alternativa mais acessível à Seção Áurea, essa regra explica como dividir um layout em terços horizontal e verticalmente, usando os pontos de interseção para focos-chave.

Espaço de Observação (Looking Room)

Inspirado pela fotografia, destaca a importância do espaço na direção do olhar do sujeito. Aplica o conceito ao design web para orientar o olhar do usuário.

Direção de Arte

Explora como a direção de arte pode influenciar a apresentação visual do conteúdo na web. Destaca o papel da fotografia e do espaçamento na criação de layouts atraentes.

Triângulo

Examina a aplicação do triângulo como uma ferramenta de composição. Mostra como guiar o olhar do espectador, usando o exemplo de um site teaser.

Estas ferramentas não são soluções universais, mas pontos de partida valiosos para criar designs web eficazes.

O design de sites é uma mistura de muitos elementos, como pesquisa, organização de informações, experiência do usuário, tipografia, cor e sistemas de grade.

Criar um layout envolve escolhas sobre largura fixa, líquida ou elástica, considerando também navegadores, tamanhos de tela e resoluções.

Voltando ao Básico

Usando ferramentas simples, como composição, tipografia e cor, os web designers podem criar layouts eficazes.

Looking Room (Espaço de Observação):

Inspirado na fotografia, o Looking Room destaca o espaço na direção que o sujeito está olhando. Isso se aplica à web, guiando o olhar do usuário para elementos importantes.

Direção da Arte

A Direção da Arte envolve a apresentação visual do conteúdo. Na web, podemos aplicar conceitos fotográficos para integrar imagens ao design e comunicar melhor.

O Triângulo

O triângulo guia o olhar do espectador. Na web, pode orientar o usuário por elementos-chave, sendo uma ferramenta útil na resolução de desafios de layout.

Essas ferramentas não são soluções rápidas, mas pontos de partida que exigem consideração cuidadosa em cada projeto de design de site.

Identificação através da Cor

Marcas famosas são reconhecidas por uma cor específica. Imagine a Coca-Cola em outra cor. A cor é crucial para a escolha do consumidor.

Expressão de Personalidade

A cor no branding evoca reações. A marca Orange se destacou com o uso consistente da cor laranja, atraindo seu público-alvo.

Princípios de Marca e Cor

1. Cor Exclusiva: ter uma cor única é vital para a identidade da marca.
2. Significado com a Cor: alinhe a marca com uma cor que faça sentido, reforçando o significado desejado.
3. Consistência de Cor: siga padrões de reprodução de cor, como RGB e Hex, apesar das diferenças em dispositivos.
4. Consistência em Todas as Mídias: dispositivos e mídias exibem cores de maneira variada; projete para um denominador comum.
5. Cuidado com Codificação de Cores: atribuir cores a seções diferentes de um site pode ser eficaz, mas evite complexidade. Desenvolva uma marca que não dependa apenas de cores para diferenciação.

Escolher cores é uma decisão crucial no design, sendo importante fundamentar essa escolha, especialmente ao trabalhar com clientes ou equipes.

Diminuindo o Tom

No começo do curso de Arte e Design, o autor foi desafiado a pintar apenas com preto e usar gravetos em vez de pincéis, exercitando a habilidade de criar sem depender das ferramentas coloridas.

Removendo a Cor

No design editorial, especialmente em tipografia, há ênfase em preto e branco. Apesar da importância da cor, começar com tons e formas antes de adicionar cores pode resultar em designs únicos e atraentes. O uso de preto e branco cria uma base sólida para elementos coloridos específicos se destacarem.

Comece com Cinza

Ao iniciar um design, sugere-se começar apenas com tons de cinza. Tomar decisões sobre cor fica mais fácil quando o design funciona bem em preto e branco. Destacar elementos com cor pode ser uma escolha estratégica para enfatizar áreas-chave, mantendo a independência em relação à cor. Essa abordagem é útil ao considerar acessibilidade, garantindo que o design seja eficaz.

Escolher cores de diferentes partes do Círculo Cromático resulta em uma variedade de combinações de cores. A seleção de uma combinação dependerá do propósito da tarefa.

Apresentando Combinações e Paletas

Amplas paletas são apresentadas com cores dispostas da esquerda para a direita, indicando a dominância e uso. Combinações menores usam retângulos com linhas, representando cores e proporções.

Exemplos de Combinações de Cores:

1. Ativas / Vibrantes: cores intensas, brilhantes, jovens, ideais para indústrias como viagens.
2. Mudas / Calmas: paletas com muito branco, predominantemente azuis, criando uma sensação equilibrada e tranquila, comumente usadas na indústria cosmética.
3. Pastel: semelhante às mudas, mas incorpora tons quentes e frios, transmitindo juventude e inocência.
4. Naturais: cores retiradas da natureza, como vermelhos enferrujados e azuis celestiais, ideais para evocar charme rústico.
5. Ricas: tons de realeza, tradição, e riqueza. Cores como marrom e verde se misturam com tons mais intensos.

Contando Histórias com Cores

As cores contam histórias e geram reações emocionais, no entanto, significados variam culturalmente. Vermelho pode ser associado à raiva ou riqueza. Azul pode ser percebido como calmo ou reservado.

Designers devem considerar sensibilidades culturais para evitar interpretações equivocadas.

Cores Primárias

• Vermelho: caloroso e vibrante, associado à paixão no Ocidente e riqueza no Oriente.
• Azul: calmo e tradicional, sugerindo confiança quando combinado com cinza.
• Amarelo: alegre e brilhante, associado à natureza, mas pode ter conotações negativas quando combinado com verde.
• Verde: natural e tranquilizador, usado em produtos ecológicos.

Secundárias e Terciárias:

• Laranja: quente e brincalhão, muitas vezes associado à juventude e à mudança de estações.
• Marrom: substituto para o preto em combinações naturais, trazendo calor e vibrância.
• Roxo: cor real, sugerindo riqueza e mistério. Usado em produtos infantis.

Entender o significado e as diferenças culturais das cores é essencial para uma combinação eficaz e sensível ao design.

Descrever uma cor pode ser confuso, portanto o uso de termos padrão para descrever cores é útil. Matiz, saturação e brilho são formas de organizar e descrever cores.

Matiz

Refere-se a um tom específico de cor, não é outro nome para cor, pois a cor pode ter saturação e brilho, além do matiz.

Saturação

Indica a pureza ou intensidade de uma cor, sendo a intensidade de um matiz a partir do cinza. Máxima saturação não teria cinza, mínima saturação teria principalmente cinza.

Brilho

Relaciona-se a quanto branco ou preto está contido em uma cor.

Este capítulo aborda o tópico de Design e Cor, focando principalmente na teoria artística da cor. A teoria da cor é complexa, dividida em três áreas: científica, artística e psicológica.

Roda de Cores:

A teoria da cor trata da criação de combinações de cores por meio de relações, utilizando a roda de cores.

As cores primárias são vermelho, verde e azul (aditivas) e ciano, magenta e amarelo (subtrativas).

Seleções na Roda de Cores:

1. Monocromático: Uma cor da roda de cores.
2. Complementares: Cores contrastantes, situadas opostamente na roda.
3. Tríades: Três cores equidistantes na roda, criando tensão devido ao contraste.
4. Outras Seleções: Analógicas, complementos mútuos, complementos próximos e duplos.

O design com cores é subjetivo, mas compreender essas seleções ajuda a criar paletas eficazes. Conhecimento básico de teoria de cores é crucial para designers, permitindo decisões objetivas.

Às vezes, a tela é só uma forma de mostrar o que criamos. Outra forma importante é a impressão. Vamos ver por que ela importa ao criar sites.

Design Impresso vs. Web

• Foco na Web: designers geralmente pensam mais na aparência online.
• Botão ‘Versão para Impressão’: dites têm isso, mas poucos usam.

Folhas de Estilo para Impressão

• Alternativa Eficiente: use folhas de estilo CSS para impressão, melhor que botões de ‘Versão para Impressão’.
• Design vs. Técnico: designers deveriam cuidar disso, não só os técnicos.

Importância do Design Impresso

• Percepção Errada: às vezes, acham que a impressão não importa, mas muita gente imprime páginas.
• Cuidado com Dinheiro: algumas páginas ganham dinheiro com versões impressas, influenciando escolhas de design.

Conclusão

Design para impressão importa, mas muitos esquecem. Usar folhas de estilo e cuidar dos detalhes garante uma impressão boa, mantendo a identidade visual.

Designers precisam lembrar da importância da impressão para melhorar a experiência dos usuários.

No design, a escolha das letras e como organizá-las são super importantes.

Tamanho e Espaçamento

• Medida Importante: a largura do texto é crucial, cerca de 52-78 letras por linha.
• Web e Layouts Flexíveis: adaptar texto para diferentes tamanhos na web é desafiador, mas a legibilidade é a chave.

Entrelinhas e Espaços

• Boa Distância: deixe um pouco mais de espaço entre as linhas do que entre as palavras.
• Mudanças de Cor: se usar texto branco em fundo preto, ajuste o espaço e o peso da fonte.

Dicas Práticas

• Espaço Entre Palavras: ajuste conforme o comprimento da linha; menos espaço para linhas curtas.
• Responsabilidade do Designer: designers devem seguir regras para texto fácil de ler.

Detalhes Importantes

• Bom Entrelinhamento: ajuste o espaço entre linhas conforme o tamanho do texto.
• Escolha Cuidadosa das Letras: entenda onde usar ponto e vírgula, reticências e aspas.

Pontuação Especial

• Reticências Certas: três pontos indicam pausa ou omissão, seguindo regras específicas.
• Use Aspas Corretamente: as aspas devem ser usadas direitinho quando citar algo.

Toques Finais

• Letras Especiais: ligaduras, letras especiais, são importantes.
• Hífens e Travessões: eles têm usos diferentes, então saiba quando usar cada um.

Organização Simples

• Listas e Tabelas: mantenha tudo organizado para facilitar a leitura.
• Formulários Simples: desenhe tabelas e formulários pensando no espaço e alinhamento.

Conclusão

Mesmo no mundo digital, lembre-se sempre de manter o texto fácil de ler. Seja organizado e use as regras, elas estão aí para ajudar!