CAPÍTULO 2 ELEMENTOS DO PROJETO GRÁFICO
O centro visual de todo impresso ou de uma tela é o layout, onde e como os recursos, controles e conteúdo estão dispostos. O layout fornece a estrutura para esses elementos. Também fornece a hierarquia, salientando para os usuários o que é importante ou não. Para entender melhor o layout, é preciso entender os elementos que o compõem (SAFFER, 2007, p.120). 2.1 Sistema de Grid Um sistema de grid é uma ferramenta que ajuda designers a padronizar a informação de maneira coerente. Começa-se dividindo a tela ou o papel em algumas partes básicas. O grid é a sugestão de uma linha guia do projeto. Eles não formam áreas rígidas, pois, se necessário, elementos são sobrepostos - como imagens - ou blocos maiores de informação são criados. O grid ajuda a visualização da hierarquia das informações dispostas, além de manter o ritmo e fluxo dos elementos - na tela e no papel 52. Timothy Samara, autor do livro Grid: Construção e Desconstrução define: Um grid consiste num conjunto específico de relações de alinhamento que funcionam como guias para a distribuição dos elementos num formato. Todo grid possui as mesmas partes básicas, por mais complexo que seja. Cada parte desempenha uma função específica; as partes podem ser combinadas segundo a necessidade, ou omitidas da estrutura geral a critério do designer, conforme elas atendam o não às exigências informativas do conteúdo (SAMARA, 2007, p.24). As partes básicas são margens, guias horizontais, zonas espaciais, marcadores, módulos, colunas e calhas (figura 35). Margens são os espaços negativos entre o limite do formato e o conteúdo que cercam e definem a área viva onde ficarão os tipos e as imagens. As proporções da margem ajudam a estabelecer a dinâmica entre os elementos da composição, além de serem usadas para orientar o foco visual, repousar os olhos ou ser usada como uma área para inserção de informações secundárias. Guias horizontais ou flowlines são os alinhamentos que quebram o espaço em faixas horizontais, ajudam a orientar os olhos e são usadas para criar diferentes inícios ou pausas para textos e imagens. Zonas espaciais são grupos de módulos que, juntos, formam campos distintos cada campo pode receber uma função específica ao apresentar a informação; por exemplo, pode-se reservar um campo para imagens e outro para textos, cada um pode ter diferentes formatos dentro do grid. Marcadores são indicadores de localização para textos secundários ou constantes, como cabeçalhos, nome de seções, fólios, ou qualquer outro elemento que ocupe sempre a mesma posição em qualquer página. Módulos são unidades individuais de espaços separadas por intervalos regulares que, repetidas no formato da página, criam colunas e faixas horizontais. Colunas são alinhamentos verticais que criam divisões horizontais entre as margens. A quantidade de colunas é indeterminada; às vezes têm a mesma largura, às vezes têm larguras diferentes, correspondendo a informações específicas 53. Calhas ou gutters são os espaços em branco que separam as linhas e colunas (SAFFER, 2007, p.123, tradução nossa). 52 Ibid, p.123 53 Ibid, p.25 51
Margens Guias Horizontais (flowlines) Calhas (gutters) Zonas Espaciais Marcadores Colunas Módulos Figura 35 - partes básicas do grid Existem diferentes tipos de grids (figura 36), como o grid retangular que possui uma estrutura mais simples é geralmente usado para acomodar textos longos e corridos, o grid de colunas que costuma beneficiar a informação descontínua, pois as colunas podem ser dependentes umas das outras no texto corrido, independentes para pequenos blocos de texto ou somadas para formar colunas mais largas, o grid modular é geralmente utilizado em projetos muito complexos, como o de um jornal, os módulos proporcionam maior controle da informação e o grid hierárquico que se adapta às exigências do projeto, esse tipo de grid, seja em livros, cartazes ou páginas de internet, é uma abordagem quase orgânica dos elementos e da informação que ainda unifica arquitetonicamente todas as partes do espaço tipográfico (SAMARA, 2007, p.26 a 29). 52
Grid Modular Grid Hierárquico Grid Retangular Grid de Colunas Figura 36 grids: retangular, modular, hierárquico e de colunas Saffer demonstra que vários grids se tornaram padrão no design de interfaces, como os vistos em layouts de diferentes aplicativos, como o Microsoft PowerPoint e o itunes da Apple (figura 37), o painel da esquerda é fino e há uma grande janela central, junto com linhas e botões acima e abaixo dessa janela. Existe também exemplo usado pelos usuários de e-mails e leitores de RSS. Outro exemplo é o comum grid de três colunas para web sites. Saffer mostra que alguns aplicativos que parecem ter a disposição livre, como o Internet Explorer e as telas simples de telefones celulares, costumam possuir grids simples (figura 37) (SAFFER, 2007, p.124 a 126). Microsoft Power Point/ itunes E-mail/ RSS 53
E-mail/ RSS Web sites comuns Internet Explorer Figura 37 - exemplos de grids Revista Super A revista Superinteressante possui um grid fluido, baseado em quatro colunas, que podem ser agrupadas ou dissociadas em várias outras. Como a revista possui muitas ilustrações e quadros, além das seções de infográficos, esses possuem um grid independente, assim o texto é diagramado de acordo com a ilustração. Serão analisados infográficos da revista, e como esses não possuem grid fixo, a ênfase estará nos elementos de navegação da página. A figura 54
38 foi retirada da edição 248 da revista Superinteressante em janeiro de 2008, página 36 e 37, acompanhado de um possível diagrama da página. A figura 39 foi retirada da edição 278 da revista Superinteressante em maio de 2010, página 44 e 45. Figura 38 - exemplos de grid da revista Superinteressante 55
Figura 39- exemplos de grid da revista Superinteressante Site Super O site da revista Superinteressante possui diversas seções, a que será usada para a escolha dos infográficos será a Multimídia. Ele está hospedado no site da Editora Abril, logo a página da revista possui um menu da Editora Abril. Existe também um banner publicitário e a seguir o menu principal do site da Superinteressante, com as seções do site, busca e um botão para a página principal. Logo abaixo aparece o nome da seção em que o usuário se encontra e o 56
infográfico da página inicial da seção. A seguir, nessa janela existem links para as matérias relacionadas ao infográfico. Abaixo existe um banner publicitário e ao lado o menu secundário que mostra as seções para os infográficos digitais ao lado existe outro banner publicitário e um navegador de páginas logo abaixo. No final da página existem dois menus terciários, o primeiro da Editora Abril e o segundo da revista Superinteressante. 57
Barra de navegação do Mozilla Menu da Editora Abril Banner publicitário Nome da seção Menu primário da revista Chamada Barra de rolagem da página Janela do infográfico digital Links relacionados Banner publicitário Menu secundário da seção Multimídia Banner publicitário Navegador de páginas Menu terciário da Editora Abril Menu terciário da Revista Superinteressante Barra de navegação do Windows Figura 40 e 41 - exemplos de grid da revista Superinteressante A figura 40 foi retirada do site da revista Superinteressante e então foi elaborado um possível grid para a página mostrada (figura 41). Pode-se concluir que identificar os grids utilizados é importante para compreender a maneira que a informação é organizada, facilitando assim a comparação entre mídia digital e impressa pretendida por este trabalho. 58
2.2 Tipografia Robert Bringhurst autor de Elementos do Estilo Tipográfico, define tipografia como o ofício que dá forma visível e durável e, portanto existência independente a linguagem humana. Um dos princípios da tipografia é a legibilidade (BRINGHURST, 2005, p.17 e 23). O fato é que existem muito a se discutir sobre a tipografia, desde a estrutura do tipo até a discussão da escolha de uma fonte de acordo com gosto pessoal. Para analisar infográficos impressos e digitais é necessário discutir os seguintes elementos: usabilidade, categorias, alinhamento de texto e hierarquia tipográfica. Lucy Niemeyer mostra que a usabilidade é um elemento importante para o uso da tipografia em projetos. Os requisitos de usabilidade podem ser determinados por três critérios ergonômicos, são eles: legibilidade, leiturabilidade e pregnância. A legibilidade é o atributo de caracteres alfa-numéricos que possibilita que cada um deles seja indentificável dos outros. Isto depende de algumas características como espessura da haste e forma do caractere (SANDERS & MCCORMICK, 1993, in Niemeyer, 2003, p. 68), ou seja, quando as formas de diferentes letras podem ser diferenciadas com facilidade, pode-se dizer que o tipo é altamente legível. A alta legibilidade é importante em livros e impressos com leitura intensa. Se um texto não é muito legível, esta característica vai afetar de modo determinante a velocidade com que o texto é lido e aumentará o esforço mental necessário para indentificar corretamente as letras e a consequente compreensão do texto. Lucy Niemeyer ressalta que a legibilidade também é afetada por fatores ambientais, como a iluminação, grau de contraste letra e fundo e fadiga visual do leitor (NIEMEYER, 2003, p. 70 e 71). A leiturabilidade é a qualidade que torna possível o reconhecimento do conteúdo da informação em um suporte quando ela está representada por caracteres alfanuméricos em grupamentos com significação, como palavras, frases ou texto corrido (SANDERS & MCCORMICK, 1993, in Niemeyer, 2003, p. 73). Ela depende do espaço entre os caracteres, de sua combinação, dos espaços entre as linhas e das margens, mais do que da configuração do caractere. Ou seja, para um alto nível de leiturabilidade a composição do texto deve possibilitar o fácil acesso à informação contida nas palavras (...) e depende também da dificuldade do vocabulário, da estrutura frasal e do grau de abstração presentes nas relações expressas pelas palavras (Niemeyer, 2003, p. 72). A pregnância é a qualidade de um caractere ou símbolo que faz com que ele seja visível separadamente do seu entorno (SANDERS & MCCORMICK, 1993, in Niemeyer, 2003, p. 74). A variação do corpo, peso, entrelinha, inclinação são importantes para tornar partes do texto pregnantes (Niemeyer, 2003, p. 73). Dan Saffer categoriza as fontes em serifadas e não serifadas. As serifadas, como Garamond e Times, são mais fáceis de ler em longos textos. Para James Craig serifas não somente facilitam o fluxo horizontal como também quando reduzidas, ajudam a identificar as letras individualmente (CRAIG, 1992, p.123,), isto pode ser comprovado comparando a parte superior das fontes Arial e Times (figura 43). 59
Figura 43 - exemplos das fontes Arial e Times, respectivamente As sem serifa, como Helvetica e Arial, são tradicionalmente usadas em curtas passagens de texto, porque suas características facilitam a leitura vertical. Além disso, as fontes sem serifa se tornaram a escolha padrão para projetos que serão mostrados em telas, algumas fontes, como Verdana e Georgia, foram especificamente desenhadas para a tela, suas características estruturais as permitem se adaptar às mudanças de resolução da tela e são confortáveis para leitura (SAFFER, 2007, p. 128). Ellen Lupton ainda ressalta quatro formas de alinhamento do texto. O justificado, quando as margens esquerda e direita do bloco de texto são regulares, esse tipo de alinhamento produz uma forma limpa na página, no entanto, podem aparecer alguns vazios no texto, que é forçado a caber em uma coluna com o mesmo cumprimento. O alinhamento à esquerda, quando a margem esquerda é dura e a direita é suave, esse tipo de alinhamento respeita o fluxo do texto e não produz o espacejamento irregular, é preciso ter cuidado para que não apareça uma linha diagonal do texto, pois o efeito visual é desconfortável. Dan Saffer comenta que o alinhamento à esquerda é o mais legível comparado aos outros 54. O alinhamento à direita, quando a margem direita é dura, a esquerda é suave, força o leitor a achar uma nova posição no início de cada linha, geralmente é usado para legendas, notas marginais, barras laterais, citações, olhos de texto e outras passagens que comentam o texto ou a imagem. O centralizado, quando linhas irregulares são centralizadas entre as margens esquerda e direita, é usado para textos clássicos e formais, no entanto é estático e convencional (LUPTON, 2006, p. 84 e 85). A hierarquia tipográfica indica um sistema que organiza o conteúdo, enfatizando alguns dados e preterindo outros. Ajuda o leitor a se localizar no texto. Cada nível da hierarquia deve ser indicado por um ou mais elementos, que podem ser: espaciais - como o recuo, entrelinha ou posição na página - ou gráficos - como tamanho, estilo, cor ou fonte 55. Ellen Lupton acrescenta em relação à hierarquia na internet: A maioria dos sites são controlados por hierarquias de um modo ainda mais sistemático que nos documentos impressos. A estrutura de arquivos de um site vai de uma raiz de diretórios que possuem vários níveis de conteúdo. [...] A organização do site reflete-se na interface da navegação à forma do conteúdo. A tipografia ajuda a elucidar a hierarquia que governa todas essas características. [...] Folhas de estilo tipográfico ajudam a pesar o conteúdo recolhido, ajudando o usuário a encontrar o que quer 56. Revista Super Segundo Gabriel Gianordoli, existem três famílias tipográficas utilizadas pela revista Superinteressante. A Leitura News, fonte serifada utilizada em blocos de textos maiores, como 54 Ibid, p.131 55 Ibid, p.94 56 Ibid, p.99 60
matérias ou textos descritivos das seções da revista (figura 44). A Gloriola, fonte sem serifa (figura 45). É a fonte padrão para as legendas, títulos de seção e também para os títulos de matérias, mas pode ser substituída de acordo com a proposta visual da matéria. E a Omnes, uma fonte rounded, que é usada em títulos de legenda e números (figura 46). Figura 44 - Leitura News Figura 45 - Gloriola Figura 46 - Omnes Site Super Os elementos do site, como o nome das seções e chamadas, possuem uma fonte padrão de internet, que se aproxima Gill Sans (figura 47). 61
Figura 47 - Gill sans 2.3 Material e Formato 2.3.1 Papel Existem características comuns a todos os papéis e elas são importantes para determinar a escolha do insumo para o projeto gráfico. São as seguintes: sentido da fibra que é a direção na qual as linhas se alinham quando o papel é feito, é importante porque afeta a capacidade de dobra e impressão. O sentido da página ideal para uma revista é o paralelo à lombada, pois facilita as páginas de serem viradas facilmente; o peso é o referente em quilogramas a uma resma; o corpo é o termo usado para descrever o volume, a espessura do papel, é o corpo do papel que determina a espessura de uma revista; opacidade é a capacidade de um papel receber tinta sem que essa seja vista do outro lado, quando se vira a folha, a opacidade é afetada pelo peso e o corpo do papel, quanto mais pesado e volumoso, maior é o número de fibras a retardar a passagem da luz, portanto maior é sua opacidade ; a cor existe uma ampla variedade de cores e também uma gama de brancos, a brancura do papel é controlada pela adição de alvejantes, tinturas fluorescentes, pigmentos e outros aditivos. Ela vai de um branco cremoso a um branco azulado e inclui qualquer branco imaginável entre eles. A cor do papel afeta tudo o que é impresso sobre ele; o acabamento é o termo que designa o modo pelo qual a superfície do papel foi tratada [...] quanto mais calandrado 57 e prensado for o papel, mais fino ele será e, portanto, terá menor corpo e menor opacidade (CRAIG, 1980, p.130 a 132). Segundo Gabriel Gianordoli a revista Superinteressante utiliza na capa o papel couché 115g/m 2 no formato fechado 26,5cm x 20,2cm, 4/4. Para James Craig, autor do livro Produção Gráfica o papel couché geralmente é brilhante e revestida com uma camada de cola e pigmento. Muito indicada para impressão em cores. No miolo é usado o papel SC, Super Calandrado, com 52g/m 2, 4/4 que possui uma opacidade entre 10 e 15%, dependendo da imagem impressa no verso, o que não atrapalha a leitura, mas interfere na página anterior 58. 57 A função da calandra é aumentar a lisura e o brilho da superfície do papel, operação que não difere muito da passagem a ferro de uma camisa recentemente lavada (CRAIG, 1980, p.129). 58 Ibid, p.133 62
2.3.2 Tela O monitor ou ecrã, segundo o Dicionário Aurélio é o aparelho eletrônico, ou parte dele, que comanda o funcionamento de outros aparelhos ou partes de aparelhos. São dois tipos: os catódicos e os planos. Os catódicos são maioria em escritórios e são monitores volumosos e pesados que possuem um consumo elétrico elevado. Os planos equipam os computadores portáteis, os assistentes pessoais (PDA) e os aparelhos foto numérico, bem como um número cada vez maior de computadores de escritório. Ocupam pouco espaço, são leves e consumem pouca energia. Nos monitores coloridos, as cores provêm de três feixes distintos de luz, referentes às cores: vermelha, verde e azul, que formam a escala RGB. Existem algumas características técnicas importantes para a tela são elas: a dimensão é medida em polegadas 59 da diagonal da tela; a definição é o número de pontos (pixel) que o monitor possui, este número de pontos está geralmente entre 640x480 60 e 2048x1536, mas resoluções superiores são tecnicamente possíveis. Existem definições de tela recomendadas para a dimensão de cada monitor (figura 48); a resolução é o número de pixels por unidade de superfície, chamado de DPI dots per inch 61 uma resolução de 300 dpi significa que uma polegada quadrada possui 300 colunas horizontais por 300 colunas verticais de pixels. A resolução ótima para apresentar imagens na tela é a 72 dpi porque a imagem possui tamanho menor e é mais fácil de ser carregada pelo computador e não demonstra problemas de leitura em tela. Dimensão (em polegadas) Dimensão (em centímetros) Definição (em pixels) 15 38 800x600 17 43 1024x768 19 48 1280x1024 21 53 1600x1200 Figura 48- tabela com a relação entre as dimensões das telas de computador O site da revista Superinteressante foi desenvolvido para ser utilizado na resolução de tela 1024x800 pixels e funciona também na resolução 800x600 pixels. Em relação à internet, o carregamento da templates do site da revista são rápidos. O site depende da conexão do usuário para carregar a página, tanto em javascript e html. Portanto, funciona bem mesmo em uma conexão discada. Material e formato são importantes para a análise comparativa entre o digital e o impresso, já que se trata do papel da tela. Eles, digital e impresso, têm diferenças cruciais para a interação do usuário ou leitor. Um exemplo é a possibilidade de manusear a revista, já o para o site é 59 Uma polegada equivale a 2,54cm. 60 Ou seja 640 pontos de comprimento e 480 pontos de altura. 61 Pontos por polegada. 63
preciso utilizar intermediários, como mouse, tela, sistema, internet, para que o usuário possa usufruir plenamente do sistema. Ainda sim no site fica mais interessante, porque é possível utilizar de recursos multimídia vídeos, animações, zoom - impossíveis no impresso. Entendendo o universo que separa os infográficos digitais e impressos, é possível fazer uma crítica e análise condizente com as duas plataformas. 2.4 Leis da Gestalt As leis da Gestalt serão utilizadas para embasar e dar sustentação as leituras visuais que serão importantes para o trabalho. Para isso é preciso elucidar as seguintes leis: unidade, segregação, unificação, fechamento, boa continuação, proximidade, semelhança e pregnância da forma. As unidades (figura 49) são os elementos que configuram a forma (GOMES FILHO, 2008, p.103). João Gomes Filho, no livro Gestalt do Objeto, ainda complementa o conceito de unidades: Um elemento que se encerra em si mesmo ou que faz parte de um todo [...] pode ser compreendido como o conjunto de mais de um elemento, que configura o todo propriamente dito, ou seja, o próprio objeto [...] Uma ou mais unidades formais são percebidas dentro de um todo por meio de pontos, linhas, planos, volumes, cores, sombras, brilhos, texturas e outros atributos isolados ou combinados entre si. No caso de um obejto ser constituído por um conjunto de numerosas unidades [...] pode-se adotar o critério de eleger unidades principais 62. O sumário da edição 288 da Super (figura 49) forma uma unidade como um todo, no entanto cada círculo é uma unidade que pode ser considerado dentro do todo. Figura 49 sumário da edição 288, representando as unidades 62 Ibid, p.29 64
Segregação é o ato de separar, perceber ou identificar as unidades 63. Pode-se segregar uma ou mais unidades, dependendo da desigualdade dos estímulos produzidos pelo campo visual em função das forças de um ou mais tipos de contrastes 64. Podem ser utilizados diversos meios como: pontos, linhas, planos, volumes, cores, sombras, brilhos, texturas, relevos e outros. A figura 50, retirada da edição 274 da Super, mostra diversas unidades segregadas de diferentes formas tamanho e cores dos círculos. Figura 50 exemplo de segregação, os círculos coloridos mostram as diferentes informações e também a congruência entre elas A unificação da forma consiste na igualdade ou semelhança dos estímulos produzidos pelo campo visual. Ocorre quando os príncipios de harmonia, equilíbrio visual e coerência do estilo formal, das partes ou do todo, estão presentes num objeto ou numa composição. As leis da proximidade e semelhança auxiliam para evidenciar a unificação. A unificação se manifesta em graus de qualidade, ou seja, varia em razão de uma melhor ou pior composição, como o exemplo da figura 51, no primeiro quadro, há uma unificação perfeita, pois possui equilíbrio e harmonia segundo as leis da Gestalt; no segundo quadro a unificação é prejudicada por uma unidade vazada e outra amarela, ruídos visuais; no terceiro quadro é ainda mais prejudicada pelo vazio de duas unidades e pelo ruído causado pelo círculo verde e; no quarto quadro a unificação desapareceu, pois está desordenado e irregular 65. A figura 52 mostra algumas imagens análogas ao exemplo anterior retiradas da revista Super, edições 284, 288, 282 e 292 respectivamente. Figura 51 exemplo retirado do livro de GOMES FILHO (2008, p.31) que demosntra os graus de qualidade da unificação 63 Ibid, p.103 64 Ibid, p.30 65 Ibid, p.31 65
Figura 52 exemplos de graus de unificação retirados das edições da Superinteressante. Para o contexto da revista, pode-se afirmar que a primeira imagem possui unificação perfeita, a segunda possui a unificação prejudicada, a terceira é mais prejudicada e a quarta não possui unificação O fechamento apresenta características espaciais que dão a sensação de fechamento visual dos elementos constituintes da forma 66. Essa sensação provém da continuidade de uma ordem estrutural definida, por meio de agrupamento os elementos constituem uma figura total que dá a impressão de ser fechada e completa. Um exemplo é a figura 53, retirada da edição 280 da Super, em que pode-se ver uma banana formada por várias partes. 66 Ibid, p.103 66
Figura 53 exemplo de fechamento A boa continuação é o padrão visual originado por configurações que apresentam sequências ou fluidez de formas 67, ou seja, é a organização das formas de maneira coerente, sem quebras ou interrupções que gera a fluidez visual. É também a tendência dos elementos acompanharem uns aos outros, de maneira a permitir a continuidade de um movimento para uma direção já estabelecida e para isso, utiliza-se de elementos como pontos, linhas, planos, volumes, cores, texturas, brilhos, degradês e outros. Busca-se inclusive, a forma mais estável estruturalmente em termos perceptivos. A figura 54, retirada da edição 282 da Super, é um exemplo de boa continuação. Figura 54 exemplo de boa continuação A lei da proximidade demonstra que elementos ópticos próximos uns dos outros tendem a ser vistos juntos e, por conseguinte, a constituírem um todo ou unidades dentro do todo 68. Elementos próximos, com as mesmas características de forma, cor, tamanho, entre outros, terão maior tendência a ser agrupados e a constituir unidades. A semelhança de forma e cor desperta também a tendência de se construir unidades, isto é, de estabelecer agrupamentos de partes 67 Ibid, p.33 68 Ibid, p.34 67
semelhantes, o infográfico na página a seguir, retirado da edição 280 da Super, ilustra bem ambas as leis (figura 55) 69. A pregnância pode ser definida da seguinte maneira: Um objeto com alta pregnância é um objeto que tende espontaneamente para uma estrutura mais simples, mais equilibrada, mais homogênea e mais regular. Apresenta um máximo de harmonia, unificação, clareza formal e um mínimo de complicação visual na organização de suas partes ou unidades compositivas (figura 56) 70. Figura 55 infográfico que representa bem as leis de proximidade e semelhança Figura 56 exemplo de pregnância 2.5 Controles Atualmente grande parte de aplicativos e dispositivos projetados por designers de interação possuem algum tipo de controles visíveis para o usuário usar para manipular recursos do produto, por exemplo o mostrador e o controle do volume de um som stereo. Os controles fornecem os affordances necessários para entender o que o produto é capaz de realizar e também fornecem o poder para perceber a capacidade do produto (SAFFER, 2007, p.136). 69 Ibid, p.35 70 Ibid, p.36 68