Relacionamento entre imagem e texto

O informativo da Ong Change People “How to make information accessible a guide to producing easy read documents” aponta alguns critérios na aplicação de imagens:

• Dimensão: o tamanho (largura x altura) deve ser o maior possível sem que haja sobreposição de outros itens no layout. A proporção da imagem deve ser respeitada, evitando-se distorções e aspecto enevoado (blur).
• Posicionamento: o posicionamento das imagens deve ser coerente, ou seja, a imagem deve estar na mesma página e próxima ao texto ao qual se relaciona. 
• Sentido: As imagens devem estar em sintonia com o texto apresentado, e caso a imagem seja repetida em um outro bloco de texto, seu significado deve permanecer o mesmo.
• Fotos: podem substituir imagens com sucesso, porém, a foto deve conter apenas elementos simples e que se dirijam diretamente ao sentido do texto.
• Outros recursos: Caso a imagem aplicada não contenha o sentido completo a ser passado, pode-se fazer uso de balões de falas (como nos quadrinhos), ou uma sequência de imagens que complementem a primeira, ou ainda, aplicar setas e marcadores coloridos. Outro recurso é o de combinar imagens para criar novos significados.

O manual "How to make information accessible
a guide to producing easy read documents".

2012 com muita cor!

Aplicando cores

A melhor maneira de se planejar e aplicar cores em um layout é criando um esboço a traço ou em tons monocromáticos. Desta forma pode-se garantir que as cores não serão, isoladamente, as responsáveis por comunicar ou dar sentido a mensagem.

Uma composição contrastante é composta com tons de harmonia tríade ou de cores complementares (opostas no espectro), mas não tonalidades adjacentes (cores aproximadas).

No artigo Color a Microsoft aponta que as cores possuem alto contraste quando existe uma grande diferença de valores entre: tom, saturação e/ou brilho.

Hue, saturation e luminosity.

Color Universal Design

O Color Universal Design é um composto de diretrizes que busca garantir às informações gráficas, principalmente as transmitidas em vias públicas, a possibilidade de serem compreendidas por um maior número de pessoas.

Na imagem acima observa-se:

A.     Imagem original;

B.  Imagem original visualizada por portador de daltonismo;

C.  Design otimizado.

Pluggins e Softwares

Existem disponíveis para download o pluggin Vischeck e o software Fujitsu Color Doctor que através de filtros que simulam as cores vistas pelo portador de daltonismo.

A partir da versão CS4, o software Adobe Photoshop disponibiliza um filtro de mesma função.

Espectrode cores segundo os tipos de daltonismo. Adaptado: Sci-fun.

Algumas dicas

Quando há pouca variação das cores nas imagens deve-se alterar o brilho ou a matiz da cor. No tópico Prova de cores em mídia eletrônica a Adobe aconselha:

·        O vermelho puro tende a aparecer escuro e turvo; o vermelho alaranjado é mais fácil de        reconhecer.

·        O verde azulado é menos confundido do que o verde amarelado.

·        O cinza pode ser confundido com magenta, rosa-pálido, verde pálido ou verde 

      esmeralda.

·        Evite as seguintes combinações sempre que possível: vermelho e verde; amarelo e 

      verde brilhante; azul claro e rosa; azul escuro e violeta.

·        Adicione contornos brancos, pretos ou de cores escuras nos limites de cores.

Legibilidade e Leiturabilidade

Materiais como folhetos, páginas de revista e outros em que a prioridade é passar sua informação de forma imediata é necessário assimilar certos preceitos que viabilizam a legibilidade do texto (reconhecimento de seus caracteres) e sua leiturabilidade (aspecto agradável do bloco de texto).

Existem muitos estudos sobre fontes e um dos que julgo mais interessante vem da organização Kidstype que afirma o seguinte: não existe um tipo específico de fonte que garanta a legibilidade do texto.
Segundo seus experimentos, a Kidstype constatou que crianças apontam diversas fontes como sendo legíveis, e estas vão desde a helvetica (sans serif ou bastão) até a times (serif).

A explicação para este fenômeno é mais simples do que se possa imaginar... as pessoas, crianças, adultos ou idosos, tem mais facilidade em ler caracteres aos quais foram expostos e se adaptaram.
Muito do que se cria hoje tem base na estética da internet, ou seja, com o passar do tempo as letras sem serifa tendem a ser adotadas em um maior número de projetos.

E o conforto ao ler? A leiturabilidade de um bloco de texto não depende exclusivamente da fonte utilizada, mas também da quantidade de efeitos (ou defeitos!) que a fonte possui, de seu alinhamento, do suporte em que ele é aplicado e coerência com o conteúdo apresentado.

Estes são alguns exemplos elementares que chamam a atenção para detalhes que em meio a um projeto ou mesmo na correria do dia-a-dia deixamos de observar, mas que podem fazer a diferença no momento em que o público tomar contato com o produto final.

Decisões simples podem tornar seu layout acessível

São diversas as deficiências de visão, desde uma leve alteração provocada por astigmatismo até perdas mais severas.

Karl Borggrafe elaborou uma tabela de cores contrastantes, relacionando texto e fundo, onde o 1 representa maior contraste e 30 o menor.

A combinação amarela e preta pode ser vista com frequência em sinalizações, que com efeito, chama a atenção de imediato. Sem dúvida que em um livro de 500 páginas com fonte 8 pts este contraste iria inviabilizar a leitura ou no mínimo torná-la cansativa para o leitor comum.

Pessoas que portam dislexia tendem a preferir contrastes como o amarelo/preto ou preto/amarelo justamente por seu aspecto de "imediato" ou "atenção".

Então como combinar estes fatores num projeto inclusivo?
Meio termo. Um fundo de cor pastel sob um texto preto já é suficiente para atender uma grande parte de leitores. Este mesmo fundo evita que a superfície do papel (como o alta alvura, por exemplo) ou os de superfície tratada (couché, metallic, ...) comece a refletir a luz do ambiente, provocando brilho do bloco de texto.
Lembrando que o fundo aplicado ao texto deve ser de cor uniforme, para que se evite confusão entre a cor do texto e a cor do fundo.

Dicas
O site Color, contrast & dimension in news design (http://poynterextra.org/cp/colorproject/color.html) explica a aplicação das cores de modo interativo.
A organização inglesa Change People (http://www.changepeople.co.uk/) disponibiliza material de estudo para tornar seus impressos acessíveis.

Inclusão e a Girafa Gigi

Esta é a primeira postagem do blog. A motivação para criá-lo veio do projeto industrial que apresentei na escola SENAI Theobaldo De Nigris "Aplicação dos fundamentos do Design Inclusivo na produção editorial com enfoque nos processos gráficos".
Apesar do nome extenso as aplicações são simples e bem conhecidas de designer e até mesmo de quem esta aprendendo a criar layouts com a ajuda da web.

Para começar a conversa vamos então aos fundamentos do Design Inclusivo, que são:
• Equiparação nas possibilidades de uso;
• Flexibilidade no uso;
• Uso Simples e intuitivo;
• Captação da informação;
• Tolerância ao erro;
• Mínimo esforço físico;
• Dimensão e espaço para uso e interação;

Como se sabe a população mundial está envelhecendo o que força a indústria a pensar seus produtos não mais para o consumidor "médio", o jovem e com plena saúde. Para evitar adaptações ou mesmo descarte de produtos é necessário pensar as necessidades do ser humano na sua infância, fase adulta e velhice.

Em cada uma dessas fases possuimos força e capacidade de entendimento limitadas por inúmeras razões sem contar que vez ou outra podemos perder certas funções de forma temporária ou permanente.

No livro infantil "A Girafa Gigi" foram utilizadas fontes, cores e formato que visam atender não somente a criança (consumidora final), mas também ao adulto que efetua a compra, e, talvez, ao vovô ou vovó que lê o livro para a criança na hora de dormir.

Neste blog irei expor cada um destes itens além de dar dicas de sites e designers que assim como eu tentam aplicar estes conhecimentos.

Até +