WECA-Wiki dos alunos do Luli na ECA.

O Bom e o mau design

Utilizando um mesmo conceito, o uso de elementos tipográficos para a elaboração de uma figura simbólica, temos abaixo dois exemplos do que podemos considerar "bom" e "mau" design.

O Bom design

Na imagem acima, elementos tipográficos são organizados intencionalmente de uma maneira apropriada para formarem a figura de uma pistola. Vemos uma vírgula colorida fazendo as vezes de gatilho, o símbolo da arma está claramente identificável contra o fundo. A imagem é coesa quanto ao critério de aparência e, embora não possamos opinar se está adequada quanto à sua relevância, parece-nos impactante e inovadora: simboliza um objeto relativamente comum, composto por figuras comuns, porém fora do contexto de seu lugar-comum.

O Mau design

Na imagem acima, o logo da cidade sede da Copa do Mundo de 2014, São Paulo. O logo já peca quanto à inovação utilizando-se da tipografia da Escuderia Ferrari para parte de seu texto. Ora, como elemento simbólico de um evento tão grandioso, era de se esperar que ao menos este design prezasse pela autenticidade e impacto. A figura logo acima de "São Paulo" também nos oferece certas limitações, pois embora deseje retratar ao mesmo tempo um jogador de futebol e uma referência à cidade, é abstrata o suficiente dar margens a interpretações errôneas. Não à toa, surgem na internet chacotas como o tumblr [1]Copa 2014 Remix.

Analisar segundo os critérios de alfabetização gráfica (Harmonia, Equilíbrio, Figura vs. Fundo, Ênfase, Hierarquia, Formas, Camadas, Contraste, Fluxo / Ritmo, Simplicidade / Síntese) os itens abaixo:

1. Fotografia

Foto de [2]Alan W. George. A fotografia do estacionamento é harmônica quanto às cores: seus tons pastéis, claros, não "brigam" entre si. A hierarquia dos objetos segue a linha do ponto de fuga – vemos primeiro o poste, depois o carrinho ao centro do estacionamento, alguns detalhes do muro ao fundo, e logo nosso olhar é convidado a acompanhar a linha do horizonte. Quase não há contraste entre os itens da fotografia, mas o pouco preto que vemos chama-nos a atenção logo de início, destacando e categorizando os elementos da foto quanto à sua importância na composição. A sombra dos objetos, na direção contrária que estabelecem os nossos olhos o sentido de leitura nesta foto (que, no caso, é da direita para a esquerda), ajuda a equilibrar esta narrativa visual sintética, mas convidativa.

2. Artes Plásticas

Beatriz Milhazes, Figo, 2006/07. Gravura e serigrafia, 178 x 119.5 cm. Neste trabalho da artista plástica Beatriz Milhazes, encontramos um exemplo de harmonia por cor, conteúdo e repetição de formas. A cartela de cores frias, mais abundantes, deve conter dois ou três tons diferentes de azul, e dois tons de verde-água. Intermediando as poucas cores quentes com as frias, estão os tons de vinho/roxo, que fazem a transição para o laranja, cor-de-rosa e o amarelo mostarda do quadro. Ondas, curvas, florais e formas redondas criam um padrão repetitivo que ajuda a concatenar os elementos da composição. Embora o elemento floral central nos chame mais atenção, logo no canto inferior esquerdo temos um espaço mais livre de interferências, equilibrando o quadro. Ao mesmo tempo em que distinguimos claramente os objetos principais do quadro em uma primeira passada de olhos (ou seja, estão devidamente hierarquizados por sua posição), percebemos com um olhar mais cuidadoso como a artista soube compor sua obra em camadas. Quem já viu pessoalmente uma obra de Beatriz Magalhães sabe quão pobre é uma representação por foto de sua criação, já que a artista se vale de camadas e camadas de tinta sobreposta, além de colagens e jogos de luz.

3. Cartaz

Design on the Rocks. É interessante observar, neste cartaz, como a tipografia acompanha o movimento que seria o ressoar das cordas do contrabaixo. O momento de equilíbrio da corda esticada, prestes a ser solta, ajuda a dar ao cartaz um movimento, ainda que equilibrado dentro de seu pouco espaço vertical. O contraste entre a figura e o fundo destaca claramente o contrabaixista, e as informações mais importantes estão claramente destacadas pelo uso de tipografia maior que a do resto. A ideia do cartaz é simples, pois toda a informação importante segue as linhas do instrumento, mas sintetiza visualmente o que o leitor pode esperar deste show: jazz com movimentos concisos e precisos dos músicos.

4. Basmala

Quadro de Moafak Dib Helaihel, artista plástico e calígrafo do idioma árabe. A religião muçulmana impede que se represente a face do seu deus (Alá) seja representadas figurativamente. Ao mesmo tempo, a escrita árabe se desenvolveu de tal maneira a se tornar um elemento estético fechado em si mesmo. Neste exemplo, Moafak utilizou-se das grafias das palavras "paz" e "amor" em árabe para desenhar uma pomba, símbolo quase que universal de tranquilidade e calma. Existe, para o conhecedor de árabe, uma harmonia de conteúdo entre as palavras e as formam. Para nós, ocidentais analfabetos em árabe, fica o encanto trazido pela fluidez da escrita árabe, que dá ao quadro um fluxo leve, simples, sintético.

5. Mosaico

Mosaico na entrada de mesquita no Uzbequistão. Primeiramente, vale destacar a hierarquia presente no mosaico: vê-se primeiro a fênix, e logo em seguida o outro animal junto a ela (cabra? cachorro?) e o sol. A relação entre essas figuras e o fundo não é tempestuosa, de modo que conseguimos distinguir claramente os elementos principais e o fundo decorativo. A sensação de delimitação do campo a ser visualizado, a ênfase na fênix, é acentuada pela moldura em mosaico. As formas (florais, penas, raios do sol) e cores ajudam a harmonizar a composição.

6. Sumi-e

Jan Zaremba. Nesta pintura, vemos como a leveza do pincel oriental ajuda a dar a sensação de movimento ao conjunto. As poucas pinceladas traçam um cavalo em movimento, e no exato momento do equilíbrio. Um centímetro que a sua pata estivesse deslocada a mais do necessário, a leveza e movimento tornar-se-iam um momento de tensão desagradável. As diferentes espessuras utilizadas para compor a figura do animal ajudam a criar um composto de formas por vezes mais fluidas, soltas (como o torso do cavalo, sua crina e rabo), e por vezes mais enfáticas, precisas (como sua cara e seus cascos). A diferença da concentração de tinta no pincel nos dá diferentes tons de preto, relativos à diluição da tinta preta na água.

7. Iluminura

Detalhe:

Nesta página, emoldurada por iluminuras, vemos a clara intenção do artista em acompanhar o ritmo da leitura, tornando-a mais agradável. Vemos a preocupação em alinhar as ilustações às margens da página, de modo a não causar nenhum estranhamento. Apesar do desconhecimento do assunto do livro, podemos supor que as iluminuras estejam em harmonia com o assunto tratado, sendo utilizadas para demarcar e dar ênfase ao início de capítulo e às capitulares dos parágrafos. A iluminura também estabelece para dar um ritmo à leitura: em horas diz "pare", em horas guia o olho do leitor para dentro da página, em horas diz "é aqui que se começa a ler". Embora a tipografia, altamente detalhada, não encontre divergência com a iluminura, as formas e cores desta acabam chamando mais atenção do que o texto em si. A ênfase, no caso, é para o minucioso trabalho manual do escriba e do artista gráfico, evidenciando o quão únicos e raros eram os livros na época: com razão, um material para poucos.

8. Caligrafia asiática

Acervo do Tokio National Museum. Neste exemplo, figura e fundo por vezes se confundem. Os traços leves e soltos da caligrafia japonesa integram uma palavra a outra e, embora ligeiramente prejudicada pelo fundo, a leitura tem seu fluxo definido pelas "ligaturas" criadas entre os símbolos pela continuidade do pincel na folha. A página é escrita de tal maneira que o contraste interno entre os tipos ajuda a sensação de ritmo, de movimento. Os tons utilizados – preto, para o texto; e tons de cinza, para as figuras do fundo – ajudam a estabelecer a hierarquia da leitura da página.

9. Anúncio

Tintas Ypiranga. A cartela de cores utilizadas vibrantes, está em harmonia com o conteúdo do enunciado: variedade de tons. Embora a uma primeira olhada a página pareça estar em desequilíbrio, pelo acúmulo de elementos do lado direito, parece-nos que a veiculação deste anúncio se deu em página dupla de revista. Ou seja: a página direita, responsável por captar a atenção do leitor, é onde se encontra a maior parte das cores mais chamativas do anúncio, e seus elementos (respingos de tinta, degradês, "gotas") acabam por direcionar nosso olhar para a página da esquerda. O que significa, nesse caso, mais uma página lida da direita para a esquerda, com ênfase nos elementos visuais em primeiro lugar e, em segundo, no texto e na correlação que esse tem com o resto da página. As formas em muito lembram pingos e respingos de tinta, o que ajuda a sintetizar a ideia do anúncio – as cores Ypiranga são mais vibrantes porque foram inspiradas no nosso mundo natural, cheio de vida e variedade.

10. Website

Universidade de [3] Hamilton, site selecionado pela Smashing Magazine em artigo de [4]Cameron Chapman. O logotipo, sustentado pela caixa de navegação e imagem horizontais, está bem enfático e a mensagem é clara: a página deve ser lida de cima para baixo, e da esquerda para a direita. Seu peso é sustentado pelos elementos horizontais logo abaixo, e a hierarquia de elementos é título, texto "A national leader" e imagem e, somente a seguir, os outros elementos da página. A navegação é clara e precisa: o menu, em preto, nos dá todas as seções disponíveis e mais importantes. Abaixo, itens de importância secundária: as últimas notícias da universidade, login em "My Hamilton" e tour virtual, além de caixa de busca. Somente depois é que nossos olhos se dirigem para a pequena ilustração no canto superior direito, usada quase como que uma marca d'água. O esquema de cores, basicamente beges e suas variações, enfatizam mais uma vez a importância do título na página: Hamilton escrito em azul-escuro tem um peso de destaque na página.

Proposta: escolher dois dos designers apresentados na aula, e comentar os seus trabalhos.

• Zuzana Licko

>> Matrix (http://www.emigre.com/EFfeature.php?di=105)

• Will H. Bradley

>> XXXXX (http://www.willbradley.com/)

Ao projetar a versão