Tipográfico

UNIVERSIDADE FEDERAL DE GOIÁS

TIPOGRÁFICO INFOGRÁFICO INTERATIVO PARA O ENSINO DE TIPOGRAFIA

MÁRIO HENRIQUE MATEUS FEITOSA RAPHAEL SASSE VICTOR MACHADO

GOIÂNIA 2012

MÁRIO HENRIQUE MATEUS FEITOSA RAPHAEL SASSE VICTOR MACHADO

TIPOGRÁFICO INFOGRÁFICO INTERATIVO PARA O ENSINO DE TIPOGRAFIA

Trabalho de conclusão de curso de graduação em Artes Visuais com habilitação Design Gráfico da Universidade Federal de Goiás como requisito parcial à obtenção do título de Bacharel.

Orientador: Professor Ms. Wagner Bandeira.

GOIÂNIA 2012

SUMÁRIO 1. Introdução..............................................................................................................................6 2. Infográficos: histórias e conceitos.........................................................................................7 2.1. Tipos e usos de infográficos....................................................................................10 2.2. Tipos de gráficos.....................................................................................................13 2.2.1. Gráfico de Linhas........................................................................................15 2.2.2. Gráfico de Barra..........................................................................................16 2.2.3. Gráfico de Setores......................................................................................16 2.2.4. Linha do Tempo ou Timeline........................................................................17 2.2.5. Histograma..................................................................................................18 2.2.6. Organograma..............................................................................................19 2.2.7. Fluxograma.................................................................................................19 2.2.8. Gráfico de Área...........................................................................................20 3. O ensino da tipografia..........................................................................................................21 3.1. Elementos de dificuldade específica do ensino da tipografia..................................22 3.2. Infográficos de tipografia.........................................................................................25 3.2.1. So You Need a Typeface.............................................................................25 3.2.2. A Brief Guide to Typography........................................................................26 3.2.3. Finding a Typeface................................................................................... .28 3.2.4. The Evolution of Typography......................................................................29 4. O processo criativo..............................................................................................................30 4.1. A Construção dos Gráficos.......................................................................................32 4.1.1. Inclinação de Eixo.......................................................................................33 4.1.2 Altura de X...................................................................................................35 4.1.3. Serifa...........................................................................................................37 4.1.4 Legibilidade..................................................................................................39 4.1.5 Ascendente e Descendente.........................................................................41 4.1.6 Modulação...................................................................................................44 4.2. O desenvolvimento do infográfico...........................................................................46 5. Conclusão............................................................................................................................49 6. Bibliografia ..........................................................................................................................50 7.Anexos..................................................................................................................................52

LISTA DE FIGURAS E TABELAS Figura 1: Pinturas Rupestres de Chauvet, França....................................................................8 Figura 2: Esboço de Anatomia de Leonardo Da Vinci.............................................................10 Figura 3: Infográfico sobre utilizações do milho da revista Super Interessante......................11 Figura 4: Primeiro tipo infográfico............................................................................................12 Figura 5 Segundo tipo infográfico............................................................................................12 Figura 6: Terceiro tipo infográfico.............................................................................................13 Figura 7: Gráfico de Timeline desenvolvido por Joseph Priestley em 1765...........................14 Figura 8: Primeiro gráfico de barras, criado por William Playfair em 1786.............................14 Figura 9 : Gráfico de Linhas, Número de Pessoas no Sul dos E.U.A.....................................15 Figura 10: Exemplo de um Gráfico de Barras Verticais..........................................................16 Figura 11: Exemplo de um Gráfico de Setores........................................................................17 Figura 12: Timeline sobre a história do Iphone.......................................................................17 Figura 13: Histograma da frequência de chegadas de passageiros por minuto em um aeroporto........................................................................................................................................18 Figura 14: Organograma de Hierarquia de uma Organização................................................19 Figura 15: Exemplo de um Fluxograma...................................................................................20 Figura 16: Exemplo de um Gráfico de Área............................................................................21 Figura 17: Exemplo de espacejamento entreletra com kerning ajustado...............................22 Figura 18: Infográfico “So You Need a Typeface”....................................................................26 Figura 19: Infográfico “A Brief Guide to Typography”..............................................................27 Figura 20: Infográfico “Finding a typeface”..............................................................................29 Figura 21: “ The Evolution of Typography”..............................................................................30 Figura 22: Estudos de produção de Inclinação de Eixo..........................................................34 Figura 23: Página Inicial de Inclinação de eixo.......................................................................34

Figura 24: Exemplo de quando o cursor está sobre uma família............................................35 Figura 25: Rascunho de criação do gráfico de altura de X.....................................................36 Figura 26: Cursor sobre o círculo central, evidenciando famílias e mostrando exemplos......36 Figura 27: Cursor sobre o nome da família, mostrando mancha de texto..............................37 Figura 28: Rascunho de criação do gráfico de serifa..............................................................38 Figura 29: Tela de Serifa com cursor sobre Humanistas.........................................................39 Figura 30: Rascunhos de criação do gráfico de Legibilidade.................................................40 Figura 31: Tela de Legibilidade com cursor sobre o círculo de Geométricas.........................41 Figura 32: Rascunhos de criação do gráfico de Ascendente/Descendente...........................42 Figura 33: Tela inicial do gráfico de Ascendente/Descendente...............................................43 Figura 34: Cursor sobre a família Script, evidenciando sua respectiva linha.........................43 Figura 35: Janela Pop-up que é exibida quando a família é selecionada...............................44 Figura 36: Rascunhos de criação do gráfico de Modulação...................................................45 Figura 37: Tela de Modulação com cursor sobre família Didones..........................................45 Figura 38: Janela pop-up que é apresentada quando usuário seleciona uma família...........46 Figura 39: Título do infográfico demonstrando as cores usadas............................................47

6 1.Introdução Este projeto se propõe a abordar as diversas utilizações da infografia como recurso didático, visando verificar suas adequações, propriedades e possibilidades.

Uma das principais características do infográfico é a capacidade de simplificar a transmissão de informações complexas ao público. A intenção deste estudo é explorar essa característica e analisar os diferentes tipos e aplicações de infográficos a fim de otimizar a utilização do mesmo como um recurso didático no ensino de Tipografia para os cursos de Design Gráfico.

Para melhor compreensão do tema abordado deverão ser verificados apontamentos históricos em relação à origem e definição de infografia, que esbarra em pontos polêmicos que vão desde suas origens datadas nas pinturas rupestres até seu uso como recurso de ilustração científica. Esta breve abordagem pretende menos uma definição final do conceito do que uma determinação dos contornos necessária ao desenvolvimento do projeto que se segue.

Em seguida será realizada uma investigação nos métodos e técnicas de desenvolvimento de gráficos que se constituem como matéria prima do projeto. Verifica-se que uma grande parte da produção infográfica restringe-se ao uso de três tipos específicos de gráficos: o de setores (ou de pizza), de barras e de linhas. Pretende-se avaliar outros modelos de gráficos e como seu uso pode aprimorar a comunicação por meio de aplicações mais específicas.

Tendo em vista a implementação em um material didático para o ensino de tipografia, a pesquisa verificará quais os elementos que apresentam maiores dificuldades entre os estudantes do curso de Design que têm o seu primeiro contato com estes conteúdos, de modo geral considerado amplo, rico em especificidades e com muitos conceitos controversos.

Como produto final, pretende-se desenvolver um infográfico interativo para o ensino dos conceitos básicos da tipografia para alunos de cursos de Design Gráfico, visando a utilização e aprimoramento de gráficos para melhorar a eficácia da comunicação, podendo também alcançar outros interessados no tema.

7 2. Infográficos: histórias e conceitos A definição de infográfico é um assunto polêmico e rico em divergências, dependendo do perfil proposto e da função abordada. Segundo Maria Mercedes Martínez (Dísponivel em: <http://pt.scribd.com/doc/84824086/La-Infografia>, Acesso em: 11 set. 2012), o infográfico está presente na história da humanidade desde sua Pré-história. Para a autora a definição restringe-se à utilização de representações visuais para transmitir uma informação, onde os dados seriam mais assimiláveis se explicados por meio da comunicação visual do que estritamente com a linguagem escrita.

Porém, essa linha de pensamento que interpreta infográfico somente como o recurso facilitador do entendimento de informações apresentadas de forma gráfica traz algumas falhas em sua definição.

A Infografia tem sido considerada por muitos como a raiz das artes, por exemplo, as conhecidas pinturas rupestres de Chauvet (França) são consideradas as primeiras representações infográficas, já que ao invés de ser uma pintura normal de paisagem ou algo, estas eram muito explicativas, dando a conhecer o que aconteceu naquela época. Se diz que Leonardo Da Vinci, um dos grandes pintores do Renascimento, anotava suas ideias sobre estudos realizados em forma de desenhos claramente explicativos. Portanto, esse pintor, que também foi engenheiro e inventor, utilizou a infografia sem perceber. Outro exemplo é de Nicolau Copérnico, que em 1543 usou a infografia quando desenvolveu um gráfico onde mostrava a mudança do conceito tradicional do universo, e a partir dessa infografia se desenvolveu a astronomia moderna.

Inclusive, se acredita que os planos e esquemas de arquitetos e construtores, juntamente com os primeiros mapas, foram também os primeiros infográficos.

Maria Mercedes Martínez. (Dísponivel em: <http://pt.scribd.com/doc/84824086/ La-Infografia>, Acesso em: 11 set. 2012)

Segundo este argumento, não fica claro o que difere um infográfico de um mapa ou de um diagrama, que também são representações gráficas de um conceito ou uma informação. Se pinturas rupestres podem ser consideradas infográficos, então quase toda e qualquer representação gráfica atual que tenha por objetivo repassar uma informação deveriam também ser chamadas de infográfico.

8

Figura 1: Pinturas Rupestres de Chauvet, França.

Há, entretanto, outras linhas de pensamento referentes ao surgimento do infográfico. De acordo com Philip Meggs(2005), a origem do infográfico só seria possível após a invenção do gráfico. A fim de expressar visualmente dados ou valores numéricos, René Descartes criou um sistema chamado de gráfico, onde utilizaria de recursos visuais para representar informações quantitativas apresentadas em dois eixos, facilitando assim a compreensão das mesmas.

Portanto, para Meggs(2005), a definição de infografia seria parecida com a definição de gráfico, já que historicamente um é derivado do outro. O infográfico seria uma eventual evolução do gráfico, onde o design usa uma série de seus fundamentos para tornar as informações mais facilmente compreendidas, não só linhas e barras seriam usadas, mas as mesmas se uniriam à imagens e outros recursos que facilitariam a compreensão da informação.

O gráfico comum poderia ser considerado uma forma de infográfico, entretanto, segundo Paulo Heitlinger (2009), uma das características da infografia é que ela apresenta uma solução comunicacional que é feita para que leigos em relação a determinado assunto sejam capazes de absorver a informação apresentada. O gráfico matemático visa unicamente a informação de dados, e não se preocupa com a facilidade da comunicação e compreensão dos mesmos. Ele se adequa à infografia em relação à forma, mas não em relação à função, e é exatamente isso que o difere do infográfico.

9 A maioria das ilustrações científicas são desenhos de grande complexidade e detalhe, elaborados (ou mandados elaborar) por especialistas (cientistas, muitas vezes) para explicar temas científicos a outros especialistas. A estas ilustrações falta o caráter de divulgação e popularização tão típico das verdadeiras infografias. Com o uso de infografias, um especialista tenta elucidar uma pessoa não-especializada sobre um dado fenômeno ou contexto. Com uma ilustração científica, um cientista (ou especialista, falando de modo geral) está a publicar informações gráficas para elucidar os colegas de sua especialidade.

HEITLINGER (2009, p.23).

O mesmo poderia ser dito das ilustrações anatômicas de Da Vinci, poderiam ser consideradas infografias se levando em consideração sua forma de apresentação, porém não possuem a função comunicacional. Os dados são apenas registrados para preservar a informação, mas uma pessoa que não entende do assunto não é capaz de absorver tal informação. Elas têm caráter informacional, mas não propriamente didático, enquanto a infografia possui uma característica essencialmente didática, priorizando a compreensão da informação a ser comunicada e não a informação propriamente dita.

Deve-se observar também que o estudo de Visualização de Informações difere de uma área similar chamada Visualização Científica. Ambas as áreas têm como objetivo produzir visualizações que ampliem a percepção e o entendimento das informações embutidas nas imagens, levando à aquisição e solidificação do conhecimento. No entanto, na Visualização Científica, os dados a serem apresentados geralmente correspondem a medidas de objetos físicos, fenômenos da natureza ou posições em um domínio espacial, possuindo, assim, uma representação geométrica intrínseca. Como exemplo de visualizações nessa linha, podemos citar a visualização de órgãos do corpo humano, de fluidos em movimento e, até mesmo, de funções matemáticas. Já em uma Visualização de Informações, os dados são abstratos, não havendo necessariamente uma representação geométrica inerente aos mesmos. Neste caso, uma imagem deve ser gerada com base nos relacionamentos ou informações que podem ser inferidos acerca dos dados e na experiência do usuário de apresentar dados desse tipo. NASCIMENTO e FERREIRA (2011, p.17).

A infografia, então, definida através de sua forma e de sua função, seria uma evolução gráfica de diagramas, gráficos matemáticos e pictogramas que visam a adequada absorção e compreensão dos dados apresentado, otimizando assim a capacidade de comunicação entre o infográfico e o público.

10

Figura 2: Esboço de Anatomia de Leonardo Da Vinci.

2.1. Tipos e usos de infográficos Fato é que a infografia se popularizou principalmente a partir dos anos de 1980 junto com o desenvolvimento dos computadores pessoais e surgimento dos programas editores, em meios de comunicação em massa (revistas e jornais), que buscam apresentar seus temas estatísticos/gráficos ou não através da infografia.

Enquanto os jornais tem suas dificuldades para a publicação de um infográfico em seu suporte, o papel de jornal, que tem restrições em cores e tamanho, as revistas ajudaram a desenvolver infográficos cada vez mais complexos e cheios de informações, com ilustrações extremamente elaboradas e coloridas, cada vez mais narrativos, extensos e didáticos, porém nem sempre profundos em suas abordagens.

Alguns desses infográficos se tornaram meramente divertidos, tomam um tempo exagerado do leitor, que fica permeando entre as páginas duplas cheias de cores.

Outros otimizaram o espaço disponível produzindo e apresentando informações de forma concisa e mais objetiva ao ponto de vista informacional. As soluções se apresentam ao mesmo passo da diversidade de temas, com abordagens dos temas de complexidade e profundidade diversas, estes infográficos usam da linguagem diagramática com o objetivo de manter a transmissão da informação em primeiro plano.

11

Figura 3: Infográfico sobre utilizações do milho da revista Super Interessante.

As formas de representações se diversificaram à medida que aumentaram também os suportes para tal. Tendo não somente a mídia impressa como principal suporte, o avanço da internet levou o infográfico a um nível mais alto. No meio digital os infográficos se organizaram em três tipos: estáticos, animados e interativos. George Palilonis (2006) afirma que estes dois últimos mudam a forma como o leitor lê e navega pelo infográfico. Se no infográfico impresso uma ilustração de movimento, ou a intenção do movimento é dada através de recursos visuais como setas, números e organização rítmica, no meio digital permite-se o desenvolvimento concreto da ação.

O primeiro se apresenta como uma imagem única, sua visualização na tela dada em partes, isto permite apresentar informações diversas, com uma ordem definida de leitura. A barra de rolagem permite que os gráficos sejam lidos de forma local e não universal. Para isso sua leitura é extremamente diagramática. O segundo tipo segue a mesma linha do infográfico estático, porém confere ao leitor muito mais dinamicidade e suavidade na leitura, uma vez que as informações são dadas por imagens e som. A animação confere ao infográfico um tom extremamente narrativo. O terceiro tipo são os infográficos interativos, estes apresentam as informações ao controle do leitor, de formatos variados esses infográficos permitem maior aprofundamento e controle da ordem de leitura por parte do leitor.

12

Figura 4: Primeiro tipo infogrรกfico.

Figura 5: Segundo tipo infogrรกfico.

Figura 6: terceiro tipo infogrรกfico.

13 A natureza da internet é tal que a leitura pode e deve ser não linear, enquanto a mídia impressa como revistas e jornais, promove uma leitura linear com uma ordem pré-determinada( começo, meio, fim) o formato online da ao leitor a oportunidade de escolher em qual ordem ele vai seguir a informação...claro que um gráfico que exija uma progressão passo-a-passo demanda uma apresentação linear...entretanto, gráficos interativos em que o leitor pode escolher navegar de uma forma aleatória têm de ser planejados de forma que façam sentindo sozinhos. Ou seja, o infografista tem de assumir que todas as partes sejam lidas independentes umas das outras. PALILONIS (2006, p.31-35).

Os infográficos de uma maneira geral podem ser divididos em algumas classificações. Segundo Leturia (1998) os infográficos podem ser separados em diagramas, mapas, gráficos e tabelas. Destacam-se, na segmentação de Leturia, os diagramas como infográfico mais complexo, também chamados de infografia jornalística, já que agrega recursos variados como também mapas, gráficos e tabelas.

Já Bounford (2000) faz uma classificação dos infográficos em: ilustrativos, estatísticos, relacionais, organizacionais e temporais. Sendo os ilustrativos diagramas que se utilizam de ilustrações para retratar determinado acontecimento; os estatísticos fazem uso de recursos para a representação de valores nominais; diagramas relacionais buscam informar as posições dos dados em comparações de suas localizações; já os organizacionais explanam uma comparação dos dados sem levar em conta sua localização; os temporais organizam as informações no tempo espaço.

2.2. Tipos de gráficos A ideia de representação gráfica de dados matemáticos surgiu inicialmente com René Descartes, quando ele desenvolveu a Geometria Analítica e o Plano Cartesiano.

Sua teoria consistia em representar informação numérica através de linhas em eixos, utilizando de pontos e coordenadas como referência. Entretanto, sua teoria foi utilizada e aprimorada por outros estudiosos posteriormente.

Em 1765, Joseph Priestley criou o primeiro gráfico, conhecido como timeline, no qual barras individuais eram usadas para visualizar a duração de vida de uma pessoa, e o todo poderia ser usado para comparar as durações de várias pessoas.

O gráfico foi um sucesso na época, e foi publicado em diversas edições de distintas revistas.

14

Figura 7: Gráfico de Timeline desenvolvido por Joseph Priestley em 1765.

Diretamente inspirado pelo trabalho de Joseph, Wiliam Playfair criou o primeiro gráfico de barras, em 1786. O gráfico foi publicado em seu Atlas Comercial e Político, onde detalhava informações de importação e exportação de diversos países. Após a ótima aceitação do público em relação ao gráfico de barras, em 1801 Playfair criou o gráfico de setores, mais conhecido como gráfico de pizza (Pie Chart), estreando o mesmo em seu livro Statistical Breviary, onde faz duas aplicações diferentes para o novo estilo de gráfico. Essa nova invenção, porém, não foi muito utilizada até que Florence Nightingale popularizou o uso do gráfico de pizza quase um século depois.

Figura 8: Primeiro gráfico de barras, criado por William Playfair em 1786.

Após a popularização desse novo método de representação, muitas outras formas de transmitir dados através de gráficos foram criadas. Novos estilos de gráficos

15 foram inventados para melhor atender a crescente demanda de informação e a distinção de detalhes das mesmas. Dentre eles, os que se tornaram mais comuns foram o gráfico de barras, o de pizza, o de linhas e o histograma. Entretanto, muitas outras formas menos utilizadas foram desenvolvidas, com funções e aplicações bastante variadas, alguns até com menos restrições de capacidade comunicacional em relação aos quatro mais utilizados. Restringir o uso dos demais gráficos para modelos de publicações científicas talvez seja um desperdício informacional, já que alguns deles poderiam se enquadrar melhor com determinados tipos de dados.

Segue nos sub-tópicos adiante uma breve descrição dos diferentes tipos de gráficos, dos mais simples aos mais detalhados, dos mais conhecidos aos menos utilizados.

2.2.1. Gráfico de Linhas O gráfico de Linhas apresenta informações através de uma série de pontos conectados por segmentos de reta. Os pontos representam medidas individuais, e a união desses pontos por linhas cria a visualidade do gráfico. É um gráfico visualmente simples e pode ser utilizado em diversas áreas distintas, pois é muito eficaz em demonstrar a tendência das oscilações da informação em determinado intervalo de tempo.

Figura 9: Gráfico de Linhas, Número de Pessoas no Sul dos E.U.A.

16 2.2.2. Gráfico de Barra O gráfico de barra consiste em dois eixos com barras retangulares cujos comprimentos são proporcionais aos valores que elas representam. As barras podem ser aplicadas tanto horizontalmente quanto verticalmente, e quando utilizadas na vertical o gráfico pode ser chamado de gráfico de colunas.

Esse estilo oferece uma boa apresentação de dados categóricos, que é o agrupamento de informações em determinados padrões, como meses do ano, faixa etária ou cor de olhos. Em um gráfico de barras verticais, o eixo horizontal suportaria então as categorias, enquanto o comprimento da barra, o seu valor de acordo com o eixo vertical.

Figura 10: Exemplo de um Gráfico de Barras Verticais.

2.2.3. Gráfico de Setores Mais conhecido como gráfico de pizza, devido a sua semelhança com uma pizza cortada em fatias, é um estilo de gráfico circular que é dividido em setores cujos comprimentos (ângulos centrais e área consequentemente) são proporcionais às quantidades que eles representam. Os setores indicam então um determinado percentual do todo, e juntos completam o círculo, que seria o valor total.

O gráfico de setores é muito usado na mídia e nos negócios, por apresentar certa clareza na percepção de dados estatísticos. Entretanto, apresenta certas falhas.

17 É complicado comparar diferentes setores de um mesmo gráfico, ou comprar informações entre gráficos distintos. Pode-se dizer então que o gráfico de setores tem resultado mais eficaz se a intenção for comparar um determinado setor com o seu total, e não os setores entre si.

Figura 11: Exemplo de um gráfico de Setores.

2.2.4. Linha do Tempo ou Timeline Linha do Tempo ou Timeline é o nome dado a um estilo de gráfico que tem por objetivo apresentar uma linha de eventos em ordem cronológica. Graficamente, é geralmente uma barra com indicações de datas e eventos marcados em pontos referentes ao período onde os mesmos aconteceram.

Esse estilo é em sua maioria utilizado no campo da educação, por ser bastante eficaz em demonstrar o curso de acontecimentos de assuntos específicos. É bastante usado nos ramos da História e da Biologia.

Figura 12: Timeline sobre a história do Iphone

18 2.2.5. Histograma O histograma é uma representação gráfica que mostra a impressão visual de distribuição de informações. É uma estimativa da distribuição de uma variável contínua. Consiste basicamente em frequências tabulares, mostradas através de retângulos adjacentes que têm a altura igual à sua frequência de intervalo. A área total do histograma é a quantidade total de informação, e a área de cada retângulo é a frequência observada num determinado intervalo. Os retângulos do histograma são postos encostados um no outro, sem espaçamento, para indicar que a variável original é contínua.

O gráfico é formatado por duas linhas perpendiculares, a vertical apresentando valores e a horizontal características ou grandezas. As barras são colocadas verticalmente sobre a linha horizontal, e suas alturas variam de acordo com o valor de suas grandezas.

Figura 13: Histograma da frequência de chegadas de passageiros por minuto em um aeroporto.

19 2.2.6. Organograma O organograma é um tipo de gráfico que representa a estrutura hierárquica de uma determinada organização. A disposição de informações no gráfico prioriza cargos de maior importância na organização, e ramificações vão mostrando as relações e a comunicação entre o que está no topo até os que estão na base. A representação em níveis enfatizam a ideia de hierarquia, quanto mais alto, mais importante.

O esquema não define a estrutura na qual o gráfico deve ser feito, sua forma pode variar de acordo com a organização, mas consiste basicamente em formas, como quadrados ou círculos que apresentam o nome de uma pessoa ou uma função, e linhas vão criando as ligações entre eles, criando uma espécie de pirâmide hierárquica.

Figura 14: Organograma de Hierarquia de uma Organização.

2.2.7. Fluxograma O fluxograma é um tipo de diagrama que representa um processo, mostrando o passo a passo através de “caixas” de variados estilos, e sua ordem é determinada por setas que as conectam. As operações são representadas dentro das caixas, e as setas indicam o fluxo do processo.

20 São geralmente utilizados para representar sequências de operações, para analisar, documentar ou gerenciar processos em campos variados. Têm uma boa visualização e ajudam o usuário a entender variados processos, que por vezes seriam muito complicados se aplicados de forma descritiva.

Figura 15: Exemplo de um Fluxograma.

2.2.8. Gráfico de Área O gráfico de área apresenta, graficamente, informação quantitativa. É bastante semelhante ao gráfico de linhas. Consiste também em dois eixos, tendo geralmente valores no eixo y e categorias no eixo X. As linhas descrevem as quantidades através de um intervalo de tempo, e a área das mudanças apresenta uma textura ou uma cor

21 diferente das outras no mesmo gráfico, para enfatizar não somente a variação de uma linha específica, mas também a diferença entre todas elas.

Figura 16: Exemplo de um Gráfico de Área.

3. O ensino da tipografia Não há um consenso sobre os assuntos que devam ou não ser abordados quando o assunto é o ensino de tipografia. Devido à abrangência dos conceitos e assuntos relacionados à tipografia, a maioria das academias de ensino não conseguem suprir a demanda do ensino de todos os conceitos e assuntos em tão pouco tempo de curso. Como exemplo, pode ser citado o curso de Artes Visuais com bacharelado em Design Gráfico, da Universidade Federal de Goiás. O curso oferece a matéria ‘Tipografia: Composição e Diagramação’ com carga horária de 64 horas. Todos os conceitos e conteúdos relativos à tipografia não podem ser repassados aos alunos em tão pouco tempo. Por isso, as instituições selecionam quais assuntos serão abordados nos cursos de tipografia.

Os conteúdos que compõem os cursos e livros de tipografia englobam, em geral: história da caligrafia e da escrita ocidental; famílias tipográficas; estudo das serifas; instrumentos, suportes e tintas; terminologias; sistemas de classificação tipográfica; morfologia dos tipos; desenho e vetorização de letras; o grid tipográfico; kerning; espacejamento; entrealinhamento, alinhamento e alinhamento vertical; hierarquia ti-

22 pográfica; diagramação de textos e imagens; técnicas de desenho; mecânica do tipo; variações do alfabeto; cor na tipografia; integração entre tipo e imagem; tipografia enquanto imagem, entre outros.

Figura 17: Exemplo de espacejamento entreletra com kerning ajustado.

3.1. Elementos de dificuldade específica do ensino da tipografia Analisando a entrevista realizada com o professor Márcio Rocha, do curso de Design Gráfico da Faculdade de Artes Visuais da UFG, vemos alguns apontamentos sobre as dificuldades no ensino da tipografia devido a não existência de um tempo maior para tal. Tomando como exemplo o curso da UFG, temos a matéria referente a tipografia com uma duração de 6 meses apenas (64 horas), e nisso já percebemos a total falta de tempo necessário para repassar aos alunos todo o conhecimento necessário, o que colocando em dias levaria mais do que um semestre.

Segundo Marcio Rocha: “Acho que a maior dificuldade é compactar toda a informação necessária para dar uma base concreta para os alunos da importância da tipografia para o design gráfico.” Nota-se no trecho o dilema vivido pelos professores quando estão a cargo dessa disciplina. Compactar toda a informação requer um poder de síntese imenso por parte do professor, o que acarreta em deixar de fora partes, se não de extrema importância, relevantes do conteúdo. Assim, cabe ao aluno, orientado pelo professor, buscar novas fontes fora da sala de aula para complementar seu conhecimento. Isso por um lado é bom porque leva a uma pró-atividade do aluno ao buscar essas referências.

Durante a disciplina o aluno começa a despertar seu senso crítico para situações na qual ele deve escolher a melhor fonte para determinada ocasião. Mas

23 devido à escassez do tempo, algumas situações práticas que poderiam auxiliar o aluno esse processo ficam prejudicadas. Aulas em laboratório com os programas específicos (ex; Adobe Illustrator) seriam bem-vindas, mas demandam um tempo a qual o cronograma não permite.

O conteúdo é tamanho, como foi citado na seção anterior, que temos várias sub-áreas: morfologia; instrumentos, suportes e tintas; terminologias; sistemas de classificação tipográfica; desenho e vetorização de letras; o grid tipográfico; tipometria; espacejamento; composição tipográfica; hierarquia tipográfica; diagramação de textos e imagens; técnicas de desenho; mecânica do tipo; variações do alfabeto; cor na tipografia; integração entre tipo e imagem; tipografia enquanto imagem, entre outros. Assim vemos o quanto um semestre é um tempo irrisório para repassar tal conteúdo.

E outra barreira é que antes de partir para o estudo prático o aluno tem que ser introduzido à história da tipografia, desde o seus primórdios, passando pelas suas transformações e outros conceitos técnicos, nota-se claramente que, isso demandaria uma ou mais disciplinas completas para repassar todo o conteúdo pela pesquisa realizada. Não se percebe uma solução para uma melhora no ensino se não for pelo aumento no tempo disponível, em suma, criar outras disciplinas complementares. Um exemplo: Tipografia: Introdução, História e Terminologias; Tipografia: Aspectos Técnicos e Introdução à Prática; Tipografia: Estudos de Casos e Aplicações. Enumerando, há espaço para a criação de três ou mais disciplinas sobre tipografia.

Limitação de tempo à parte existem outros empecilhos como falta de recurso disponíveis aos professores (estrutura) e, alguns especialistas na área defendem uma mudança na forma de como repassar esse conhecimento aos alunos, como Shelley Gruendler (PhD em História e Teoria da Tipografia e Comunicação Gráfica, pela Universidade de Reading, Inglaterra). Segundo ela “os professores tem que ensinar como aprenderam e não como foi ensinado” (GRUENDLER, Dísponivel em: <http://www.commarts.com/columns/its-how-teach-its-how.html>, Acesso em: 15 ago. 2012). Mas ela também afirma que tipografia é difícil de ensinar porque também é difícil de aprender.

24 Essa dificuldade pode ser atribuída em parte ao advento dos computadores e a digitalização da tipografia. Antes o processo de aplicação de uma tipografia para qualquer fim dependia totalmente do tipógrafo. Todas as etapas eram controladas por ele até a chegada da tipo na prensa, e todas quase que dependiam da perícia do tipógrafo, o que requeria grande conhecimento em todas as áreas. Hoje tem-se todo esse processo quase que automático, o designer vetoriza o traço, desenvolve uma grid, espacejamento, alinhamento, diagramação e etc. quase que automaticamente por meio do programa específico. O aprendizado prático desses processos quase que se limita a aprender o passo-a-passo da ferramenta. É certo que tem-se as terminologias, aspectos técnicos e aplicações na qual o aluno adquire conhecimento, mas a prática ficou meio “robótica”.

Outro exemplo de como as limitações no processo de ensino refletem nos futuros profissionais percebe-se nesse trecho da entrevista do Prof. Marcio Rocha: “Como o tempo é reduzido, talvez não seja ideal tentar ensinar o aluno a criar tipos, tarefa que envolve muito conhecimento técnico, mas saber quais forcas estão envolvidas na tarefa de selecionar a tipografia que melhor comunica e cria a experiência correta para o tipo de projeto que se esta executando.” Nota-se aqui que existe um aprofundamento no conteúdo (como criação de tipos), mas essa possibilidade é anulada em detrimento do cumprimento do cronograma de ensino. Se o aluno quiser se especializar ele deverá procurar cursos fora da faculdade ou correr atrás por si mesmo. E por sua vez o professor fica limitado apenas a repassar o conteúdo de maneira que o aluno obtenha discernimento na hora de trabalhar com uma tipografia, para que não faça escolhas erradas.

Buscar alternativas que possam otimizar o tempo escasso de ensino e vencer essas barreiras é um desafio. Através desse projeto propõe-se novas alternativas para o aluno e o professor poderem buscar ideias utilizando os infográficos como ferramenta. Uma nova fonte de informação que poderá ser utilizada tanto no período de aula quanto fora, complementando o ensino.

Devido à falta de tempo e recursos para uma melhor preparação dos alunos na

25 área da Tipografia, o ideal é que pelo menos eles sejam instruídos em como utilizar-se do conteúdo para identificar qual fonte, quais usos e opções se adequam melhor aos fins propostos durante sua carreira como designer gráfico.

3.2. Infográficos de tipografia A fim de determinar parâmetros para a criação de um novo infográfico de tipografia, um estudo foi feito com outros quatro infográficos do mesmo assunto. Foram analisadas características relevantes ao design, como cor e forma, mas também detalhes referentes à eficácia da comunicação e de clareza na percepção dos dados, como abrangência e profundidade da informação apresentada.

O estudo identifica pontos que obtiveram um resultado adequado, mas também aponta falhas que podem ser interessantes de serem avaliadas, para que erros similares de comunicação e apresentação não aconteçam no projeto do infográfico.

3.2.1. So You Need a Typeface O objetivo desse infográfico é indicar ao leitor qual tipografia é recomendada para determinadas situações. Ele apresenta um fluxograma cheio de perguntas, e as respostas vão levando o usuário por caminhos até chegar à tipografia correta para seu caso.

Por utilizar um esquema de fluxogramas as cores foram deixadas de lado.

A peça é praticamente monocromática, com exceção de alguns detalhes grifados.

Essa escolha pode ser considerada pertinente devido à quantidade de informação que poderia se dispersar caso as cores fossem utilizadas em demasia ou de maneira errônea. Foram utilizadas formas básicas, como quadrados, retângulos e linhas. É apresentado através de um esquema bastante simples, mas devido à quantidade de elementos ficou bastante repetitivo.

A comunicação é confusa inicialmente, pois não é muito claro onde a leitura se inicia exatamente. Outro detalhe que pode gerar desconforto é o fato de que um caminho acaba se encontrando com vários outros depois, o que leva o leitor a não

26 captar toda a informação caso ele não siga todas as rotas disponíveis ou se esqueça por quais já passou. A quantidade de elementos atrapalha a leitura.

Em relação ao assunto, o infográfico aborda de maneira irreverente o uso da tipografia correta em um projeto através de questionamento dentro da área utilizando termos específicos e também fazendo perguntas sobre temas diversos. Adentra na tipografia desde seus termos técnicos até nomenclaturas, citando situações nas quais se deve ou não utilizar a família tipográfica em questão.

Dada à abrangência de situações expostas, esse infográfico acabou sendo exagerado, o espaço limitou muito. Aumentar o tamanho talvez resolvesse o problema, mas trocar o esquema do fluxograma tradicional clássico para outro mais flexível também resolveria.

Figura 18: Infográfico “So You Need a Typeface”.

3.2.2. A Brief Guide to Typography O infográfico apresenta uma introdução geral sobre tipografia, com informações básicas de variadas áreas do tema. As cores utilizadas foram azul e preto, com variações no contraste da primeira. Foi uma boa combinação que ficou realçada pelo fundo branco, que proporcionou uma sensação de clareza e não ficou cansativa aos olhos.

27 Foram utilizados quadrados, balões de comunicação, massas de texto, exemplos com letras garrafais e análises técnicas. O título localizado no canto superior esquerdo orienta a leitura das duas palavras-chave da obra (Typeface e Font), levando o leitor à compreensão das partes restantes, que podem ser lidas de forma independente.

A peça dentra de maneira sutil trazendo exemplos bem interessantes, como uso de serifas, kerning, tracking e exemplos de alinhamento. A proposta do infográfico é introduzir o leitor ao mundo da Tipografia através de exemplos práticos e teóricos além de dados técnicos aliados à imagens. Podemos ver que o mesmo cumpriu essa tarefa de maneira satisfatória. Os módulos contendo os exemplos aliados à breves textos deixou o infográfico bastante interativo, permitindo que esses módulos possam ser utilizados de maneira independente.

Os gráficos foram usados dentro do infográfico como complemento às informações repassadas pelos textos, não sendo necessariamente a única fonte de informação. Foi uma aplicação adequada porque ambos tornaram o infográfico mais flexível.

Figura 19: Infográfico “A Brief Guide to Typography”.

28 3.2.3. Finding a Typeface Através de linhas e formas, o infográfico apresenta a classificação das famílias tipográficas, ligando-as com suas relativas fontes. No lado esquerdo os tipos foram classificados em três grupos maiores e suas subdivisões. Do lado direito encontra-se a definição dos tipos, que estão dispostos em ordem alfabética e cada nome é descrito utilizando da própria tipografia.

Sua forma e diagramação hierarquiza as leituras da esquerda para a direita e em um primeiro momento o leitor tem facilidade em compreender como a classificação é feita. Entretanto, a comunicação geral do infográfico leva um tempo maior e desagradável entre o sair da classificação e o chegar respectivo tipo seguindo as linhas, pois as mesmas se embaralham e causam confusão entre as informações, exigindo maior atenção do usuário. Dessa forma, a solução tomada pela peça se torna muito mais estética que comunicacional, isto porque as fontes se apresentam do lado direito e em ordem alfabética, o que não possui nenhuma justificativa informacional relevante.

Em termos de cor, o infográfico usa o fundo com alta saturação e baixo brilho, para que nas linhas se use cromas com alto brilho e saturação para que a informação se destaque. Entretanto, são usadas cores análogas em linhas próximas umas das outras, que como um todo gera um conflito visual e requer um desgaste maior do leitor.

A abrangência do assunto se limita à proposição da classificação e definição tipográfica, com pouquíssima profundidade.

29

Figura 20: infográfico “Finding a typeface”

3.2.4. The Evolution of Typography O infográfico tem por objetivo classificar os tipos. ele propõe uma divisão em quatro grupos: sem serifas, serifadas, góticas e manuscritas.As descrições, apesar de muito pequenas, fazem um bom resumo das principais características de cada gênero dos quatro grupos.

Há variação de matizes, utilizando cores análogas e complementares. O infográfico é composto apenas pela parte tipográfica, pelas formas circulares e pelos traços. Apesar de conseguir classificar e descrever bem os gêneros, de modo resumido, não há informação alguma explicando a interseção existente entre os grupos tipográficos, e isso deixa o leitor confuso. deveria existir exemplos para cada interseção também, assim como uma breve descrição.

Há um exemplo de tipografia para cara gênero dentro das categorias, porém os nomes das famílias tipográficas não foram incluídos. Essa informação é importante, pois fornece caminhos de pesquisa para o leitor interessado.

30

Figura 21: “ The Evolution of Typography”.

4. O processo criativo Após feitos todos os estudos e definidos os objetivos, a metodologia apresentada por Uriá(2011) foi tida como base e referência para auxiliar no processo criativo e nas fases de desenvolvimento do projeto. Uriá divide a criação de um infográfico em etapas que simplificam a produção do mesmo, etapas estas que vão desde a escolha do tema até fundamentos do design e da comunicação visual, que se dividem em 10 etapas de produção.

São elas: 1º passo: Definição do tema, recorte e foco; onde se analisa os assuntos a serem tratados contando o que pode ou não ser infografado e criando o foco específico a ser tratado na infografia.

2º passo: Definição de público; etapa em que se define o alvo comunicacional assim como a sua abrangência.

3º passo: Coleta de informações; recolhimento de todas as informações necessárias sobre o tema tratado.

31 4º passo: Análise e filtragem da informação; organização de todas as informações recolhidas e filtragem do que tem potencial para ser infografado.

5º passo: Hierarquização da informação; Organização de quais assuntos tem mais relevância e devem ocupar maior destaque, e criar a sequencia infográfica.

6º passo: Tranposição de linguagens; do textual ao imagético: transposição do máximo possível de elementos da linguagem textual para a imagética, potencializando a compreensão sem sobrecarregar a leitura.

7º passo : Fornecer parâmetros; O leitor precisa ter pontos de referência para que se possa situar e comparar elementos para fixar a informação a ser transmitida.

8º passo: Objetivo no estilo e abordagem; Escolher a melhor representação imagética para a transmissão do conteúdo, com representações visuais simples e objetivas, tendo atenção sobre a especificidade do assunto.

9º passo: Princípios fundamentais do design gráfico e da sintaxe visual; composição visual do infográfico, com o uso dos conhecimentos e fundamentos de design gráfico.

10º passo: Check list, Revisão; Análise do produto pronto com reflexões dos pontos analisados.

Tendo isto em vista. primeiro passo foi definir o tema, focando um assunto específico, e em seguida reunir as informações que seriam necessárias para criar uma boa comunicação com o usuário, levando em consideração o repertório do público alvo. Este foi decido como sendo alunos e profissionais com pouca experiência, já que um profissional experiente não tem as dificuldades apresentadas para a escolha tipográfica.

Como já apresentado, o infográfico apresentará certos conteúdos de classificação tipográfica com o intuito de auxiliar alunos de Design Gráfico na diferenciação e escolha tipográfica. O foco do projeto, porém, é otimizar a utilização de diversos gráficos dentro de um infográfico e como eles podem influenciar na otimização e eficácia da comunicação e não somente no assunto apresentado em si. O infográfico de tipografia se dá como produto deste estudo como forma de apresentar soluções de gráficos para assuntos que não sejam estritamente estatísticos, que demandam gráficos diferentes dos populares gráficos de barra e setor.

32 Reunindo todas as informações coerentes com o objetivo do projeto, uma filtragem foi feita para separar os assuntos que poderiam ser aplicados numa peça de comunicação rápida e objetiva dos que requerem uma explicação mais extensa para serem compreendidos adequadamente. O infográfico é característico por facilitar a comunicação de determinado assunto, e essa etapa foi bastante útil para definir quais deles seriam condizentes com o formato de apresentação proposto.

Foi decidido apresentar a classificação das famílias tipográficas através do método da comparação, para que o usuário pudesse analisar com clareza em quais quesitos suas características as diferenciam umas das outras. Após definir vários tópicos de distinção das famílias, optou-se por apresentar no infográfico seis deles, dentre os quais alguns tem função de apenas mostrar os detalhes nas próprias tipografias e outros têm relação direta com o uso de determinadas fontes com seus resultados visuais e semióticos aplicados na mancha gráfica. Os itens escolhidos foram serifa, modulação, inclinação de eixo, altura de X, ascendente e descendente e legibilidade. Alguns outros quesitos foram analisados, como entrelinha e leiturabilidade, porém foram excluídos do processo, pois os mesmos não dependem somente da escolha tipográfica e sim de sua aplicação, tornando a análise extremamente subjetiva. Por exemplo, o tamanho da altura de X ou das ascendentes e descendentes influenciam na espessura da entrelinha, mas cabe ao designer decidir qual entrelinha usar, dependendo da proposta que lhe foi apresentada. Foi resolvido então utilizar apenas itens que são exclusivamente ligados à escolha tipográfica e sua relação na mancha gráfica.

4.1. A Construção dos Gráficos Com a informação toda coletada, iniciou-se então o processo de criação dos gráficos que posteriormente seriam encaixados na narrativa do infográfico. Uma solução visual foi desenvolvida para apresentar cada um dos itens escolhidos dentro da peça gráfica.

33 4.1.1. Inclinação de Eixo O primeiro gráfico a ser desenvolvido foi o de inclinação de eixo. A ideia inicial não foi baseada em nenhum dos gráficos usuais apresentados na fundamentação teórica, e sim projetada especificamente para este assunto, no intuito de repassar a informação de maneira mais eficiente. A forma pensada se assemelha a um marcador de combustível dos painéis de automóveis, onde há um recorte do que seria um círculo, e um ponteiro demarcando uma parte do recorte. No caso da inclinação do eixo, o recorte semicircular representaria uma escala de graus, e o ponteiro demarcaria qual a inclinação exata característica de cada família tipográfica, tendo por referência a numeração dos graus. O ponteiro seria interativo, e um painel mostraria as famílias que se encaixam na inclinação determinada por ele, e de acordo com que o usuário fosse mudando o ponteiro de lugar, as famílias iriam sendo apresentadas em suas respectivas inclinações.

Um estudo mais detalhado sobre as formas desse gráfico foi feito e verificou-se que para um eventual projeto a ser realizado por um designer, a inclinação exata em graus não é de importância extrema, pois algumas famílias se distinguem umas das outras com inclinações bastante aparentes, porém outras têm inclinações bem próximas umas das outras, e a informação de graus exatos não traria uma clareza de compreensão ou auxilio na hora da escolha. Percebeu-se então que, a direção da inclinação das famílias era muito mais relevante para o usuário do que a informação exata, portanto a numeração dos graus foi tirada e o ponteiro indicaria as direções das inclinações.

Entretanto, o problema de inclinações muito próximas ainda persistiu, onde ponteiro apresentaria famílias com inclinações diferentes num espaço muito curto de interação. A solução encontrada então foi de agrupar e uma direção que representaria bem todas as famílias que estavam numa inclinação muito próxima. Após uma análise, notou-se que haviam apenas quatro direções com uma visualidade significante o suficiente para estabelecer uma comunicação adequada. O ponteiro foi retirado, pois se tornou obsoleto devido ao número reduzido de inclinações que seriam apresentadas.

34 A base do recorte semicircular foi reduzida apenas para manter a noção de direção relacionada a graus e foram adicionadas linhas que representariam as inclinações, e ao invés do ponteiro, foram aplicados botões que, ao se passar o cursor, as famílias que se identificam com a determinada inclinação seriam evidenciadas.

Para que a peça pudesse mostrar exemplos de maneira mais detalhada, quando o usuário seleciona uma família tipográfica são apresentadas palavras que destacam a inclinação da fonte.

Figura 22: estudos de produção de Inclinação de Eixo.

O resultado final ficou visualmente bem diferente da ideia inicial, pois a constante filtragem das informações devido a sua relevância e usabilidade demandou tais mudanças na peça gráfica. A apresentação ficou mais direta para otimizar a eficácia da comunicação.

Figura 23: Página Inicial de Inclinação de eixo.

35

Figura 24: Exemplo de quando o cursor está sobre uma família.

4.1.2 Altura de X Este gráfico teve seu formato inspirado em mapas geográficos de altitude topográfica. Mapas deste estilo representam áreas de um determinado terreno, e suas distintas altitudes são demarcadas através de cores diferentes ou variações de contraste.

A altura de X causa resultados visíveis no contraste da mancha gráfica. Em um corpo de texto onde a altura de X é muito grande, se a entrelinha não for ajustada especificamente para o caso, a mancha tem um aspecto visual muito pesado, sem muitos espaços em branco, dando a impressão de uma forma só, contínua e sem quebras. O oposto também acontece, caso a altura de X seja muito pequena a mancha tem uma característica mais leve e apresenta mais espaços brancos.

O mapa topográfico não possui formas definidas, pois elas dependem do relevo do terreno a ser representado. Para adaptá-lo ao tema, foi escolhida uma forma circular que apresenta camadas, e a diferença de altitude que é usada neste estilo de mapa seria a diferença de contraste entre as manchas gráficas, dependendo da altura de X de cada uma das famílias.

A forma final se assemelhou a de um alvo de dardos por causa da diferença de contraste entre os círculos. O círculo menor que fica no centro da peça tem um

36 contraste mais claro, e ao passar do cursor indica as famílias que, devido à sua altura de X, criam uma mancha gráfica mais leve. De acordo com que o usuário se distancia do centro em direção aos círculos externos, as famílias evidenciadas mudam, apresentando, então as famílias que desenvolvem uma mancha gráfica mais pesada e concreta. O contraste dos círculos vai aumentando do centro para a borda.

Figura 25: Rascunho de criação do gráfico de altura de X.

Figura 26: Cursor sobre o círculo central, evidenciando famílias e mostrando exemplos.

37

Figura 27: Cursor sobre o nome da família, mostrando mancha de texto.

Para facilitar a compreensão do usuário em relação à forma da mancha gráfica relacionada à altura de X, foi desenvolvido um esquema que mostra uma mancha de texto real. Quando o usuário seleciona uma das famílias, a mancha de texto é apresentada.

4.1.3. Serifa No caso da utilização do quesito serifa no projeto, poderia ser representada sua relação com a mancha gráfica ou apenas mostrada suas diferentes formas em famílias chaves que possuem características de serifa bem distintas. Como a forma da serifa não têm uma influência objetivamente relevante na mancha e sim subjetiva dependendo de sua aplicabilidade,optou-se por apenas demonstrar suas características e evidenciar suas particularidades.

Foi utilizada uma peça com o formato de um gráfico de timeline para mostrar as famílias e exemplificar com uma fonte de cada família, para que o usuário possa notar a diferença de um tipo de serifa para outro. A timeline também separa as tipografias serifadas das não serifadas para que haja a comparação visual entre elas. Juntamen-

38 te com a timeline, será apresentada na mesma tela um exemplo para os três tipos de serifa classificados, sendo eles regular, slab e filete.

Figura 28: Rascunho de criação do gráfico de serifa.

Por motivo de melhor visualização e diagramação do conjunto, a timeline foi aplicada verticalmente. Os nomes das famílias são apresentados do lado esquerdo da linha e seus respectivos exemplos do lado direito. Para aplicar interatividade à peça e também para facilitar a compreensão do assunto apresentado, quando o usuário passar o cursor sobre o nome da família, um recorte das características da serifa será apresentado do lado direito da timeline.

Para uma melhor percepção de como determinado tipo de serifa se comporta em diferentes letras, se o usuário selecionar o nome de uma família, uma palavra será apresentada em tamanho ampliado como exemplo, contendo detalhes que destacam as serifas.

39

Figura 29: Tela de Serifa com cursor sobre Humanistas.

4.1.4 Legibilidade O gráfico de legibilidade foi inicialmente representado através de barras verticais em um plano cartesiano, onde as famílias estariam aplicadas no eixo X e o seu nível de legibilidade no eixo Y. Após uma análise, verificou-se que este tipo de gráfico é uma solução possível para repassar as informações necessárias, porém há alguns problemas de comunicação visual com o mesmo, pelo menos para a proposta desse projeto, que é comparar uma família com as demais.

Algumas famílias apresentam níveis de legibilidade semelhantes uns aos outros. Se a informação fosse apresentada de forma crescente ou decrescente, ficaria visualmente complicado perceber a diferença entre os níveis que são semelhantes.

Se a informação quantitativa fosse aleatória, a percepção do contraste dos níveis seria mais aparente, porém, a comparação de uma barra que se encontra no centro da peça com uma que se encontra na borda fica se torna difícil.

Já que a altura das barras é equivalente ao nível de legibilidade das famílias, as linhas do plano cartesiano se tornam obsoletas, pois os próprios comprimentos dos retângulos já transmitem a ideia de quantidade ou de valor. Uma solução seria, então,

40 descartar as bases do plano cartesiano e misturar as barras em um espaço de forma que elas fizessem fronteira não apenas com uma ou duas outras barras, e sim com muitas, para facilitar a comparação. Porém, retângulos espalhados aleatoriamente conferem uma impressão de desequilíbrio à peça gráfica. As formas então foram alteradas para círculos, que apresentam menos atrito umas com as outras devido ao fato de não possuírem vértices. O diâmetro dos círculos se altera de acordo com o nível de legibilidade das famílias.

Figura 30: Rascunhos de criação do gráfico de Legibilidade.

A aplicação de interatividade nesse gráfico foi necessária para mostrar exemplos de fontes das famílias apresentadas. Quando o usuário passar o cursor sobre um círculo, o mesmo fica evidenciado, e os exemplos se tornam visíveis em tamanho ampliado, de forma que ele possa visualizar os detalhes de cada fonte.

41

Figura 31: Tela de Legibilidade com cursor sobre o círculo de Geométricas.

4.1.5 Ascendente e Descendente Assim como acontece com a altura de X, a variação das ascendentes e das descendentes, se não houver interferência na entrelinha, têm relação direta com o resultado da mancha de texto. Quanto maiores, a mancha apresenta mais espaços em branco, e quanto menores, menos espaços vazios, tornando a mancha mais visualmente compacta. Mas além desse aspecto, as ascendentes e descendentes também dão uma característica de ritmo à mancha individual da linha, dentro da mancha de texto completa.

Tendo em mente então essa ideia de ritmo, o gráfico deste tema foi inspirado em um monitor cardíaco, onde as batidas do coração produzem um ritmo através de uma representação visual no formato de uma linha.

Uma mesma frase foi escrita com fontes de famílias distintas, e uma linha foi traçada ligando as ascendentes e as descendentes para cada fonte, demarcando então o ritmo de cada uma delas. As linhas foram sobrepostas umas às outras, e o nome das fontes apresentados juntamente com o gráfico.

42 Percebeu-se que algumas famílias têm um ritmo levemente semelhante ao de outras, e que suas diferenças não eram bem visíveis, o que dificultaria a comunicação e a compreensão do usuário em relação a informação a ser passada. Portanto, foram escolhidas apenas algumas fontes para representar o grupo de famílias que se assemelham em comparação com outras que se distinguem bem umas das outras, para que não houvesse um cansaço visual ao se estudar o gráfico. Sendo assim, a primeira linha representa as humanistas, garaldas, transicionais e didones; a segunda linha representa as mecânicas, a terceira representas as lineares humanistas, grotescas, neo-grotescas e geométricas; e a quarta linha representa as scripts.

Figura 32: Rascunhos de criação do gráfico de Ascendente/Descendente.

Em um primeiro momento, todas as linhas são visíveis, cada qual com sua cor distinta. Porém, ao se passar o cursor sobre o nome de uma fonte, sua respectiva linha mantem sua cor enquanto todas as outras adquirem uma tonalidade de cinza bem claro, para que a mesma possa ser evidenciada. Se o cursor é retirado da fonte, o gráfico volta ao seu estado inicial.

43

Figura 33: Tela inicial do gráfico de Ascendente/Descendente.

O usuário tem também a opção de selecionar o nome da fonte, e é então mostrado um exemplo em tamanho ampliado, onde a linha da respectiva fonte que era apresentada no gráfico é sobreposta à frase da qual foi tirada, para que o leitor tenha o conhecimento de como a ideia de ritmo foi formada. Logo abaixo o exemplo da frase, há também uma mancha de texto para auxiliar na visualização dos espaços em branco que as ascendentes e as descentes podem criar na mancha.

Figura 34: Cursor sobre a família Script, evidenciando sua respectiva linha.

44

Figura 35: Janela Pop-up que é exibida quando a família é selecionada.

4.1.6 Modulação A modulação tem uma relação direta com a mancha de texto. Fontes com baixa modulação produzem uma mancha gráfica extremamente homogênea, enquanto as com alta modulação propiciam manchas mais heterogêneas. Em grandes concentrações de texto, ambos os extremos podem ocasionar certo desconforto visual. Porém, para este projeto, optou-se por mostrar detalhadamente as diferenças de modulação das famílias ao invés de mostra-las em uma mancha de texto intensa.

Assim como no gráfico de serifa, verificou-se que para mostrar e ao mesmo tempo diferenciar características de modulação de uma família para a outra, sem remeter a uma ideia quantitativa, uma timeline seria a maneira mais eficaz.

Foi desenvolvido então um gráfico com uma linha horizontal, com segmentos que separam as famílias em relação a baixa, média e alta modulação. Acima da linha serão apresentadas os nomes das famílias. Um esquema com barras retangulares foi criado para representar visualmente a modulação de cada família. Quando o usuário passar o cursor sobre o nome da família, os retângulos serão mostrados abaixo da linha em seu respectivo setor de grau de modulação.

45

Figura 36: Rascunhos de criação do gráfico de Modulação.

Caso o usuário selecione o nome da família, um palavra em tamanho ampliado será mostrada para exemplificar a visualização da modulação, detalhando como foi desenvolvido e também o sistema de retângulos.

Figura 37: Tela de Modulação com cursor sobre família Didones.

46

Figura 38: Janela pop-up que é apresentada quando usuário seleciona uma família.

4.2. O desenvolvimento do infográfico Após a criação de todos os gráficos a serem aplicados no infográfico, a etapa seguinte seria criar a narrativa do próprio infográfico, desenvolvendo sua forma de apresentação e também detalhes de funcionamento e layout.

Inicialmente o infográfico foi pensado como uma narrativa contínua. Ele seria uma peça vertical onde todos os gráficos criados seriam aplicados juntamente com as informações adicionais que facilitariam a comunicação. Através de uma barra de rolagem, o usuário poderia passar de um assunto para o outro sem interrupções. Não haveria, portanto, distinção de cor ou uma margem separando um assunto do outro.

Verificou-se, entretanto, que desta maneira, o infográfico parecia uma massa uniforme e sem identidade. Apenas um conjunto de informações apresentadas de maneira linear, sem algo que influenciasse o leitor a utilizar da interatividade proposta.

Foi desenvolvida então uma paleta cromática que desse certo ritmo e delimitasse assuntos e temas, sem perder a ideia de sequencia da narrativa. O usuário distinguiria uma área da outra pela diferença cromática, e ao mesmo tempo o infográfico adquiriria uma identidade devido ao padrão de cores.

47 As cores escolhidas para a formação de um padrão foram branco, preto e laranja, com o intuito de criar harmonia de contrastes. Essa união mantém as informações sempre com um bom contraste em relação ao fundo, pois o laranja se destaca tanto sobre o preto quanto sobre o branco. Ainda assim o conjunto continua harmônico e sobrepõe as formas. O modelo antigo tinha quatro cores bases, mas estavam apagadas e não criavam uma hierarquia na comunicação.

Figura 39: Título do infográfico demonstrando as cores usadas.

Ainda assim, a visualização da peça de maneira contínua e a utilização da barra de rolagem obstruíam a interatividade do infográfico. Foi criado então um sistema de botões que levariam o usuário ao decorrer de toda a peça, e caso ele quisesse retornar para um item específico, teria apenas de clicar ao invés de arrastar toda a barra e percorrer item por item. A barra foi então descartada. Cada assunto possuía uma área de tamanho diferente, por vezes o usuário estaria visualizando um determinado assunto e ainda assim partes de outro tópico estariam visíveis. Foi decidido então padronizar a área de todos os itens, de forma que os assuntos distintos fossem visualizados separadamente, e o sistema de botões facilitaria a navegação entre eles.

A organização dos itens foi feita de para que o usuário fosse incentivado, já

48 num primeiro contato com o infográfico, a utilizar-se das opções de interatividade das peças, de forma que ele entendesse o padrão e como reagir às funções do restante do projeto.

Cada área do infográfico conteria o título do item, o gráfico desenvolvido para o assunto, as informações adicionais e os exemplos. Cada gráfico tem sua maneira de apresentar exemplos. Uma forma única de layout poderia apresentar os exemplos de todas as áreas, para que houvesse um padrão de visualização. Entretanto, verificou-se que o padrão visual da peça já é criado pela utilização das cores e pelo funcionamento da interatividade. Definiu-se então que cada assunto teria sua forma distinta de apresentar os exemplos, dependendo da quantidade de espaço que cada item demandaria. Enquanto os itens que necessitam de um espaço considerável para estabelecer uma boa comunicação poderiam utilizar de uma nova tela adicional, os itens que não precisam de tanto espaço poderiam utilizar-se de janelas pop-up ou até mesmo do próprio espaço da seção.

49 5. Conclusão Durante a pesquisa e produção deste projeto, constatou-se que a melhor utilização de gráficos e esquemas visuais podem sim aprimorar a comunicação de informações detalhadas que requereriam grandes massas de texto para serem adequadamente absorbidas e compreendidas pelo público. A utilização do próprio infográfico já é um avanço na transmissão de informações, e o uso de gráficos bem resolvidos visualmente na peça podem ampliar a capacidade de comunicação do mesmo.

Verificou-se que vários infográficos atuais pecam na transposição do textual ao imagético e na utilização de gráficos. O designer tem como objetivo solucionar problemas específicos de comunicação, cada infográfico apresenta sua peculiaridade.

Sendo assim, cada tema a ser abordado merece ser estudado individualmente, assim como as soluções propostas a cada assunto representado.

Entretanto o que se verifica na produção atual são infográficos que muitas vezes se portam como desenho de composição apenas, do mesmo modo, alguns criadores aparentam conhecer somente duas formas de representar um conteúdo; através de gráficos de barra e pizza. Na mesma importância, a comunicação deve ser didática, já que não se trata de um artigo matemático ou estatístico, e sim de uma proposta de comunicação simples.

Observou-se com este estudo que a produção infográfica é uma excelente opção para a disseminação de conteúdo de forma simples e direta com fácil absorção, facilitando a compreensão de certos assuntos, mas que não oferece uma profundidade muito grande ao conteúdo. Desta forma, o infográfico tem sua excelência como porta de entrada a determinado tema proposto, e que para isso, cada projeto deve ser encarado com seriedade e individualidade na sua produção.

50 6.Bibliografia LETURIA, Elio. ¿Qué es infografía? In: Revista Latina de Comunicación Social. La Laguna.

Tenerife, N. 4, abril 1998. Disponível em: <http://www.ull.es/publicaciones/latina/z8/ r4el.htm> Acesso em: 23.04.2010.

BOUNFORD, Trevor. Digital Diagrams. New York: Waston-Guptill, 2000.

GEORGE-PALILONIS, Jennifer. A practical guide to graphics reporting. 2006.

HEITLINGER, Paulo. Caderno de Tipografia e Design 15, 2009.

LUPTON, Ellen. Pensar com Tipos. São Paulo: Cosac Naify, 2006.

TIPOCRACIA MAIS. 2009. Disponível em: <http://www.tipocracia.com.br/mais>.

Acesso em 23 set. 2012.

TIPOS E LETRAS. Pistache Design. Rio de Janeiro. 2012. Disponível em: <http:// www.pistachedesign.com.br/tiposeletras/index.htm>. Acesso em 23 set. 2012.

SAMARA, Timothy. Guia de Tipografia: manual prático para o uso de tipos no design gráfico. 1ª edição. Porto Alegre: Bookman Companhia Editora. 2011.

NASCIMENTO, Hugo A. D. do; FERREIRA, Cristiane B. R. Uma Introdução à Visualização de Informações. Goiânia. 2011.

MEGGS, Phillip. History of Graphic Design. 2005.

FASSINA,Uriá. A infografia como recurso comunicacional no processo de aquisição de informação e compreensão de tipografia. Londrina,2011.

MARTÍNEZ, Maria Mercedez. La Infografia. Dísponivel em: <http://pt.scribd.com/ doc/84824086/La-Infografia>, Acesso em: 11 set. 2012.

ROCHA, Cleomar, et al. Processo de seleção tipográfica: os critérios visuais.

Paraná, 2006.

51 LIMA, Ricardo Oliveira da Cunha. Análise da infografia jornalística. Rio de Janeiro,2009.

FONT SHOP. The typographer’s Glossary: Commmon type Terminology. 2010.

FONT SHOP. Meet your type. 2010.

GAULTNEY, Victor. Balancing typeface legibility and economy: Pratical techniques for the type designer. Reading, 2011.

STONE, Brian R. Teaching type in motion to amplify meaning, comunication, and emotion. Columbus, 2010.

MACKIEWICZ, Jo. What technical writing students should know about typeface personality. Duluth, 2004.

BRINGHUST, Robert. Elementos do estilo tipográfico. São Paulo, 2005.

FONT SHOP. The right font for the job.

TYPECULTURE. Form and proportion in a text typeface: A few guideline .

52 7.Anexos Entrevista cedida pelo professor Marcio Rocha do curso de Artes Visuais com Bacharelado em Design Gráfico, da Faculdade de Artes Visuais da Universidade Federal de Goiás.

1 - Quais são as dificuldades de ensinar tipografia num curso de um semestre,

considerando que a área de tipografia é bem ampla e contêm diversas ramificações?

Acho que a maior dificuldade é compactar toda a informação necessária para dar uma base

concreta para os alunos da importância da tipografia para o design gráfico. Quando o professor leciona, ele precisa escolher o que ele considera mais importante para ser compartilhado com os alunos.

Isso inclui não somente os aspectos relacionados à tipografia, como também tentar motivar os alunos a buscar novas informações e fontes de estudos, já que todo bom profissional é aquele que nunca se da por satisfeito e nunca para de estudar, se aperfeiçoar e capacitar.

Dito isso, o professor precisa reconhecer que não será possível abordar o conteúdo em 16 aulas

sobre o que é necessário saber sobre tipografia, então objetivamente falando, ele precisa orientar os alunos minimamente a buscar as fontes corretas e despertar em seus alunos não só a motivação, mas seu senso critico para que ele consiga pensar criticamente sobre tipografia e com isso selecionar as melhores fontes de informação e de literatura da área para prosseguir e caminhar sozinho.

Tentar imputar aos alunos a noção de independência intelectual necessária para prosseguir sem

tutor para continuar sua capacitação de forma autônoma. Tentar dar um panorama geral sobre a tipografia e a base mínima necessária para o aluno é bastante desafiador para o professor, considerando o tempo reduzido para aplicar seu conteúdo programático em um tempo tão restrito como no nosso caso específico.

2 - Você saberia me dizer em quais matérias/assuntos os alunos têm mais

dificuldade?

Acho que não ha uma disciplina especifica que os alunos têm dificuldade porque cada

individuo é diferente em suas motivações, anseios, interesses, objetivos, etc. Portanto, não é

53 exagero dizer que alguns alunos irão se identificam com disciplinas mais técnicas, enquanto outros demonstram interesses por disciplinas históricas, artísticas ou que dão ênfase em tecnologia, entre outras. Isso obviamente para pela identificação que o aluno tem com o professor.

Alguns alunos se sentem mais identificados com determinado professor e como consequência, pas-

sam a se interessar mais pela disciplina e vice-versa. Não é exagero dizer que na FAV essa diversidade tem sido importante, já que isso tem proporcionado à formação dos mais diversos perfis de profissionais com capacitação e interesses diversos e que como consequência atendem diferentes necessidades e anseios do mercado.

3 - Como eu disse na primeira pergunta, um semestre é pouco tempo para lecionar

tipografia.

Quais

assuntos,

dentre

todos

os

importantes,

você

conside-

ra os mais importantes para se discutir nos seis meses de duração da disciplina?

O que particularmente considero mais importante, e isso é somente a minha opinião, já que

nunca lecionei essa disciplina, é fazer com que o profissional tenha o mínimo conhecimento necessário para fazer uso da tipografia em seus projetos. Como o tempo é reduzido, talvez não seja ideal tentar ensinar o aluno a criar tipos, tarefa que envolve muito conhecimento técnico, mas saber quais forcas estão envolvidas na tarefa de selecionar a tipografia que melhor comunica e cria a experiência correta para o tipo de projeto que se esta executando.

É importante saber aspectos da sua anatomia e os elementos que compõem a tipografia, mas

é preciso desenvolver o senso critico do aluno para entender quando um tipo é ruim ou inadequado e porque se esta utilizando aquele tipo em detrimento de algum outro. Em minha opinião e experiência no mercado, esse é o aspecto que tem sido mais importante para o profissional de design gráfico.