Categoria: m318783

Nesse capítulo final o autor trás um estudo de caso, correlacionando com o que foi estudado nos capítulos anteriores.

Projeto De Standaard

Em 2008, a equipe do jornal belga De Standaard buscou redesenhar seu site, com foco em metas ambiciosas e referências a grandes jornais.

O Briefing

Metas incluíam aprimorar conteúdo, atratividade da marca, inovação e modelo de negócios, enquanto modernizavam a aparência do site.

Desafios Online vs. Offline

Debate sobre a necessidade do design online refletir jornais impressos, destacando ameaças e oportunidades de migrar para a web.

A Estratégia de Design

Ênfase em otimizar a experiência de leitura, promover participação do usuário e considerar o desenvolvimento histórico dos jornais.

Limitações do Projeto

Restrições, como conteúdo existente e integração de marca, influenciaram o escopo, equilibrando diferentes públicos.

Conteúdo Modular, Grade Modular

Auditorias de elementos de conteúdo e tipografia, explorando variações para lidar com histórias em evolução e diferentes seções.

Design da Grade

Uso de anúncios padrão e tamanhos fixos existentes como elementos constantes, adotando uma grade assimétrica de cinco colunas.

Exploração de Design

Iterações na direção de design, incorporando evolução de layouts e cor, abordagem iterativa para desenvolver um sistema flexível.

Sistema de Design e Documentação Visual

Foco em criar um sistema modular e flexível em vez de projetar páginas individuais, documentação visual como guia para implementações futuras.

Conclusão

Fusão de estratégia de design, compreensão do conteúdo e adaptação a restrições resultou em um site flexível e visualmente coeso. Importância contínua da prática de princípios de design gráfico e layout, independentemente do meio digital.

O capítulo inicia abordando um dilema criativo: design baseado em grade pode parecer limitador, mas entender quando e como quebrar as regras é crucial.

Tudo Deve Sempre se Alinhar?

Antes do CSS, tabelas HTML eram usadas para layouts web. Quebrar a rigidez da grade pode ser essencial para ênfase, destaque ou usabilidade.

Quebrando Suas Próprias Regras

A grade é uma ferramenta flexível, não uma restrição. Dessa forma, se não estiver funcionando durante um projeto, é preciso ajustá-la conforme necessário.

Conteúdo em Evidência

Para impressos ou web, compreender tipos de conteúdo é essencial. Ao redesenhar, é importante analisar padrões existentes; ao criar do zero, é preciso discutir com o cliente.

Design para o Pior Cenário

Antecipar problemas, como aumento do tamanho da fonte e uploads incorretos de imagens é uma prática valiosa.

Menos, Não Mais

O design deve começar pequeno, focando em tipos fundamentais de conteúdo. Destacar elementos fora da grade pode criar ênfase visual e interesse.

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.