GUIA TIPOGRÁFICO: Modelagem de ferramenta web para projetação em tipografia

Transcrição

1 UNIVERSIDADE FEDERAL DA BAHIA ESCOLA DE BELAS ARTES CURSO DESIGN VITOR MARTINS GONÇALVES MENEZES GUIA TIPOGRÁFICO: Modelagem de ferramenta web para projetação em tipografia Salvador 2010

2 VITOR MARTINS GONÇALVES MENEZES GUIA TIPOGRÁFICO: Modelagem de ferramenta web para projetação em tipografia Memorial Descritivo do Projeto Experimental de Design apresentado ao curso de Design da Escola de Belas Artes da UFBA, por Vitor Martins Gonçalves Menezes, como requisito parcial da obtenção do título de Bacharel em Design. Orientadores: Profº Eudaldo Franscisco Santos Filho e Profº Paulo Fernando de Almeida Souza. Salvador

3 Agradecimentos Agradeço ao apoio e incentivo de meus pais, irmãos, tios e minhas queridas avós, a quem acreditou no meu potencial e abriu-me as portas, aos conselhos e experiência dos amigos, professores e colegas, e especialmente a minha namorada que tanto me ajudou e sempre esteve ao meu lado. 2

4 RESUMO O projeto experimental em questão consiste em desenvolver um objeto interativo para o estudo tipográfico por parte de designers e diretores de arte baseado não só na necessidade profissional como também em uma lacuna acadêmica. O guia tipográfico visa ser uma alternativa para quem os profissionais que desejarem buscar uma metodologia mais consistente para escolha de seus tipos, referências históricas, relembrar ou aprender conceitos básicos e principalmente embasar a retórica sobre a sua peça gráfica. Baseado em requisitos definidos pelos próprios usuários o Guia Tipográfico conduzirá a uma lista de sugestão de tipos, esclarecendo cada característica inerente a fonte. Palavras-chave: Tipografia, Metodologia de projeto, Internet, Design. 3

5 SUMÁRIO 1 INTRODUÇÃO APRESENTAÇÃO JUSTIFICATIVA OBJETIVOS Geral Específico MÉTODOS Fase Analítica Fase Criativa Fase Executiva PROBLEMATIZAÇÃO BRIEFING OBJETO PÚBLICO-ALVO PLATAFORMA MODO DE UTILIZAÇÃO Teórico Prático METAS A LONGO PRAZO ANÁLISE DO PRODUTO EM RELAÇÃO AO MERCADO Força Oportunidades Fraquezas Ameaças ANÁLISE DE CONCORRENTES E SIMILARES Myfonts Dafont

6 3.7.3 Adobe Fonts/ Store COLETA DE DADOS E PESQUISA IMAGÉTICA EXECUÇÃO DE CONTEÚDO TEXTUAL Tipos Renascentistas Tipos Barrocos Tipos Neoclássicos Tipos Românticos Tipo Realista Tipo Modernista Tipo Pós-Modernista CONCEPÇÃO DO PROJETO ERGONOMIA O usuário USABILIDADE Textos escaneáveis e leves Uso de modismos vazios Uso do Flash Respeito às convenções Consistência Formato do site e resolução ESCOLHA DA TIPOGRAFIA COLETA DE DADOS APLICAÇÃO DE PESQUISA ORGANOGRAMA DE CONTEÚDO EXECUÇÃO DO LAYOUT CRONOGRAMA CONSIDERAÇÕES FINAIS REFERÊNCIAS

7 1. INTRODUÇÃO 1.1 APRESENTAÇÃO Durante a minha passagem pelo ambiente acadêmico e pelos poucos anos que tenho no ambiente profissional vim percebendo a importância do embasamento de cada escolha. A intuição, as referências e a sensibilidade sempre vão ser muito relevantes dentro do trabalho, mas design sem uma metodologia projetual é arte, o que nem sempre é o objetivo. No universo da tipografia a dificuldade era ainda maior, por não compreender como aquelas fontes funcionavam, e de que forma elas podiam se ajustar à peça gráfica. A necessidade de compreender os tipos, de usálos de forma a respeitar seu projeto, seu objetivo, foi o que me fez escolher este tema. De acordo com Robert Bringhurst (2005, p. 10), a tipografia existe para honrar o seu conteúdo, para mim, nada mais justo e verdadeiro. A metáfora do autor sobre tipografia e música não poderia ser mais feliz, ambas seguem uma regra sutil de proporções, harmonia e ritmo com as quais compomos com tipos ao invés de notas, para trazer a mensagem mais próxima do leitor. A tipografia está para a leitura assim como a performance musical está para a composição: é um ato essencial de interpretação, cheio de infinitas oportunidades para a iluminação ou para a estupidez(...)a tipografia, quando dá o melhor de si, é uma arte de lenta execução, merecedora da mesma apreciação informada que às vezes dispensamos às interpretações musicais e é capaz de nos dar em troca prazer e alimento similares. (BRINGHURST, 2005, p. 26) Desde a sua invenção, seja em 1040 na China para os orientais, ou em 1450 por Gutemberg, para os ocidentais, a tipografia vêm cumprindo o seu papel como interlocutora entre autor e leitor, dialogando de forma subjetiva com o próprio conteúdo que emite. Tipógrafos como Jenson, Garamond, Didot, Baskerville, Frutiger e Miedinger serviram ao seu tempo, contemplando a história com seus tipos memoráveis. Para um designer ou diretor de arte, o estudo em tipografia é certamente uma das disciplinas fundamentais para a criação de projetos gráficos consistentes e de qualidade. Para isso se faz necessário um estudo contínuo em uma disciplina secular. O Guia tipográfico tem como finalidade o auxílio a uma escolha tipográfica dentro de uma orientação projetual relevante. Esclarecer os métodos de escolha, torná-los mais objetivos a ponto do estudante ou profissional poder apreender a metodologia e unir à sua referência imagética anterior, tomando uma decisão mais embasada e não restrita apenas à aspectos técnicos ou estéticos. O Guia tipográfico não tem a pretensão de substituir livros específicos sobre o tema, e sim facilitar a consulta a temas anteriormente contemplados em sala. O Guia tipográfico pode ser utilizado para introduzir o interesse sobre conhecimento de tipografia, mas compreende-se como material auxiliar em um primeiro momento. O Guia Tipográfico se propõe a sugerir tipos com base em requisitos tais como legibilidade, leiturabilidade, tipo de aplicação, estilo, estrutura e bases históricas. A preocupação com uma linha cronológica parte da importância e ligação da história da humanidade, da arte e da tipografia, levando o usuário a compreender, de forma didática, como as características estruturais do tipo estão 6

8 conectados ao seu momento histórico. O meio didático inicialmente escolhido foi o website, devido a sua facilidade de consulta e a possibilidade diferenciada de interação com o conteúdo. 1.2 JUSTIFICATIVA A tipografia é sem dúvida uma das disciplinas mais importantes que um bom designer gráfico ou diretor de arte precisa dominar. No entanto o que vemos dentro das academias muitas vezes é um ensino superficial sobre o assunto, onde não se trata com a importância devida uma parte tão relevante do design. Outro problema encontrado não só nesta disciplina, é que dificilmente aborda-se a interação da história do design com a do próprio homem, e consequentemente a evolução da tipografia como uma parte da evolução do próprio design. No campo profissional a escolha tipográfica pode ficar ainda mais comprometida, já que muita das vezes só se leva em consideração requisitos subjetivos e visuais. A delimitação de necessidades tipográficas além do legível e belo se faz necessária, dentre outras coisas, para se validar uma escolha de forma coerente. Buscando reforçar as bases sobre o assunto, tentando entender a semântica e a aplicação das famílias tipográficas, respeitando a sua história e sua função dentro do projeto, o Guia Tipográfico seria além de uma ferramenta de consulta e sugestão, um auxiliar no processo de argumentação dentro da escolha da tipografia, discutindo uma linha cronológica e relacionando os fatos históricos aos fatos estéticos dentro do tema. 1.3 OBJETIVOS Geral Gerar dispositivo que auxilie na escolha metodológica da tipografia Específico a. Gerar dispositivo online com função de estudo, consulta e sugestão sobre tipografia para estudantes e profissionais de design e publicidade. b. Gerar interesse, facilitar e dinamizar a didática sobre tipografia, principalmente dentro das universidades. c. Traçar linha cronológica contextualizando fatos históricos, história da arte e história do design à evolução da tipografia. d. Gerar reflexão sobre escolhas tipográficas baseadas meramente em requisitos estéticos ou limitações técnicas. e. Servir como apoio a pesquisas e embasamentos teóricos sobre tipografia dentro do contexto profissional. f. Desenvolver a ferramenta online na forma de protótipo de website. 1.4 MÉTODOS Fase Analítica a. Definição do objeto; 7

9 b. Busca, estudo e fichamento de referências em tipografia para embasamento teórico. (Robert Brighurst Elementos do estilo tipográfico); c. Busca, estudo e fichamento de referências em História do Design (Richard Hollis Design Gráfico: Uma história concisa; Philip B. Meggs: História do Design gráfico); d. Busca e estudo sobre História Geral e História da Arte (Carol Strickland Arte comentada); e. Estudo sobre percepção visual (Rudolf Arrheim Arte e percepção visual) f. Estudo sobre metodologia do projeto (Baxter e Rodolfo Fuentes Fundamentos do design) g. Estudo sobre referencias de metodologia de ensino em tipografia. (Flávio Cauduro; Elias Bittencourt Guia tipo assim); h. Busca e estudo sobre usabilidade na web (Jakob Nielsen Usabilidade na Web); i. Busca de referências visuais para em galerias web (CSSMania.com, bestwebgallery.com, dribbble.com); j. Análise de sites de tipografia (Myfonts.com, dafont.com, linotype.com, fontstruct.com, myfonts.com); k. Ajuste e análise de conteúdo teórico junto ao professor orientador; l. Estudo sobre forma de apresentação e didática do conteúdo em meio digital Fase Criativa a. Geração de conceito do site; b. Criação de rafes e croquis; c. Identificação e desenvolvimento de partido gráfico; d. Geração de alternativas para as diagramações referentes a cada estilo Fase Executiva a. Coleta das fontes; b. Contato com a Linotype; c. Pesquisa de preços para desenvolvedores web, planos de hospedagem e registro de domínio; d. Desenvolvimento dos textos; e. Formatação das características dos tipos; f. Análise de tecnologia utilizada: HTML, CSS, Javascript e Flash; g. Análise de ergonomia e usabilidade; h. Testes e ajustes 2 PROBLEMATIZAÇÃO 8

10 A tipografia é, sem dúvidas, uma das mais importantes disciplinas dentro de uma formação em design gráfico, seja ela técnica ou acadêmica. O ensino de tipografia no entanto, por muitas vezes tem uma abordagem superficial, principalmente em requisitos teóricos, gerando uma fragilidade grave em uma das bases de conhecimento do design. Outro problema da didática atual é que muitas vezes não é traçada uma lógica evolutiva entre a tipografia e os demais acontecimentos históricos. A deficiência exposta gera uma escolha tipográfica rasa por parte do designer, pautada em requisitos estéticos, referências imagéticas, ou puramente no gosto pessoal. Sem esse estudo de aplicação mais apurado o projeto pode apresentar inadequações tipográficas em diversos parâmetros como: a. Legibilidade; b. Leiturabilidade; c. Conceito; d. Contexto histórico da fonte; e. Objetivo do projeto tipográfico original; f. Estrutura da fonte; g. Classificação taxionômica h. Contraste da fonte em relação à peça; i. Relação com o suporte; j. Pregnância; k. Tipo de licença; l. Forma estrutural da fonte 3 BRIEFING 3.1 OBJETO 9

11 O objeto constitui-se em uma ferramenta web para estudo e referência em tipografia, traçando um panorama histórico, embasando tecnicamente e sugerindo opções de fontes de acordo com os requisitos estabelecidos pelo usuário. 3.2 PÚBLICO-ALVO Estudantes de graduação e profissionais de design gráfico e publicidade. Estima-se que o público de 19 a 26 anos, seja o usuário médio do site, tanto pela sua experiência e conhecimento ainda não tão fundamentados, tanto pela relação com o suporte, que é mais recorrente. O público-alvo ainda abrange pessoas de ambos os sexos, com interesses em tipografia, produção gráfica, história do design ou arte. 3.3 PLATAFORMA A plataforma digital foi escolhida para o objeto em questão pelas seguintes motivações: a. Baixo custo de manutenção e implantação; b. Facilidade de acesso ao conteúdo por parte do usuário; c. Facilidade de manutenção e atualização de conteúdo; d. Por se tratar de um meio digital não ocasiona nenhum dano ambiental significativo; e. Fácil disseminação do conteúdo; f. Maior possibilidade de interação entre os usuários e o conteúdo. 3.4 MODO DE UTILIZAÇÃO Histórico O embasamento teórico buscado pelos usuários terá como linha de raciocínio a ligação da história da humanidade à evolução do design e da tipografia. As características da produção gráfica e da tipografia do momento histórico em questão estarão presentes nas páginas referentes à linha cronológica Prático O Guia tipográfico auxiliará na escolha da tipografia partindo de necessidades indicadas pelo usuário e elucidando cada uma das alternativas propostas, promovendo o embasamento na escolha tipográfica. A sugestão de tipos levará em consideração os seguintes requisitos: a. Legibilidade; Alta Ex: Helvética Média Ex: Adobe Caslon Pro Italic Baixa Ex: Hand of Sean b. Leiturabilidade; Alta: Ex: Minion Pro Media Ex: Impact Baixa Ex: Zapfino 10

12 c. Conceito; Por se tratar de um parâmetro basicamente subjetivo, os conceitos serão atribuídos aos tipos por meio das Tags, incluídas pelos próprios usuários anteriores ou uma equipe de designers denominada para tal tarefa. d. Contexto histórico da fonte; Renascimento Barroco Neoclassicismo Romantismo Realismo Modernismo Pós-Modernismo e. Distância do observador em relação à peça; Grande (Mais de 3 metros) Média (De 1 a 3 metros) Pequena (Menor que 1 metro) f. Tipo de suporte; Impressão Offset Impressão Jato de tinta Impressão Laser Suporte Digital g. Classificação; Humanista Old Style Garalde Mecânicas Grotescas Neo-grotescas Transicionais Geométricas Didones Humanista Incisas Manuscritas Cursivas 11

13 h. Tipo de licença Comercial Grátis i. Tipo de projeto Identidade Visual Anúncio publicitário Material gráfico diverso (panfleto, folder) Projetos editoriais Projetos web Sinalização Produtos / Embalagem Modelagem 3d Áudio Visual j. Estrutura Sem serifa Serifa filete Serifa regular Serifa slab Light Rounded Black / Bold Black Sem eixo Eixo humanista Eixo racionalista k. Volume de texto; Grande Ex: Livros e revistas Média Ex: Livretos e folders Pequena Ex: Cartões Apesar de alguns desses parâmetros serem formalmente necessários, há níveis de necessidade a serem considerados. No caso da legibilidade por exemplo, se o objetivo da comunicação for desconstruir o tipo, e até dificultar a leitura em prol de um conceito ou público-alvo específico (como acontece com David Carson, Neville Brody e a estética pós-moderna), seria possível reduzir o nível desse parâmetro, ou mesmo contemplar mais de um nível. Cada necessidade selecionada pelo usuário teria uma breve explanação teórica para uma melhor compreensão e serviria como ferramenta no discurso de defesa do uso da fonte. Vamos considerar o seguinte caso como exemplo: 12

14 O usuário está necessitando de uma fonte para compor a sinalização interna de um supermercado de médio porte. Para isto o designer resolve escolher os seguintes requisitos para direcionar o seu projeto: a)legibilidade: Alta; b)leiturabilidade: Média, Alta; c)estilo ou Conceito: Limpeza visual; d)contexto histórico: Realista, Modernista geométrico, Contemporâneo e)distância do observador: Media, Grande; f)relação com o suporte: Indiferente; g)pregnância: Alta; h)volume de texto: Pequeno; Com base nas escolhas do usuário, seriam listadas tipografias que atendessem aos requisitos, dentre essa lista poderíamos citar: Helvética, Helvética Neue, Futura, Optima, Gill Sans, Frutiger, Lucida Sans, Flora e Scala Sans. Como na busca alguns parâmetros foram escolhidos em multiplicidade para aumentar o espectro de opções, ao selecionar a fonte seriam dadas as informações referentes aos seus requisitos de uma forma ampla. Como exemplo, vamos ilustrar o usuário selecionando a fonte Rockwell: Legibilidade Alta - O critério de seleção de legibilidade neste guia está atrelado a compreensão individual da forma de suas letras. A proximidade do desenho da fonte estudada com a referência do leitor sobre signos tipográficos familiaridade e simplicidade da forma são atributos desejáveis a uma boa legibilidade nesse sentido. Por outro lado a boa legibilidade pode ser entendida como a forma tipográfica reconhecida com o menor esforço possível. Levando em consideração que a leitura se dá em blocos de letras e não individualmente, muitos outros fatores podem influenciar a legibilidade como um todo. O espaçamento entre letra, contraste cromático, tamanho do corpo de texto e alinhamento são essenciais para uma compreensão não só individual da letra, mas das palavras como um todo. Em certo aspecto a legibilidade está atrelada a pregnância e a leiturabilidade da tipografia. Esta fonte possui um alto nível de compreensão da sua forma individual por parte do leitor, se mostrando clara e funcional quando respeitados os demais requisitos citados acima. Leiturabilidade Média - A leiturabilidade pode ser definida como o grau de fluidez com que um conteúdo textual pode ser consumido. A sua necessidade se faz mais presente quanto maior for o volume de texto. Uma tipografia de boa leiturabilidade tem que possuir necessariamente uma boa legibilidade, isso significa que também está sujeita a fatores externos ao desenho tipográfico em si, como o espaçamento entre letra, contraste cromático, tamanho do corpo de texto e alinhamento. O contrário, no entanto, nem sempre é verdadeiro; tipografias de alta legibilidade podem possuir uma leitura pouco confortável para textos longos. Dentre os motivos podemos citar uma mancha desequilibrada em relação aos espaços em branco, falta de contraste ou fluxibilidade da fonte como exemplo. Esta fonte possui um nível de leiturabilidade média, portanto não é aconselhada para grandes volumes de texto por causar fadiga visual. 13

15 Conceito Geométrico - Tipos de formas grostescas, isto é, sem serifas, se tornaram comuns no decorrer do século XX. Movimentos como o De Stijl, Construtivismo, Modernismo e a escola Bauhaus foram grandes modificadores no mundo tipográfico. Uma das mais conhecidas fontes geométricas até hoje é a Futura, de Paul Renner, exemplo desse essencialismo tipográfico. Contexto Histórico Modernista Geométrico - Durante a primeira metade do século XX, o mundo passava por um período de intensas alterações políticas e sociais. Duas guerras mundiais, nazismo, fascismo, comunismo foram extremamente significativos na alteração do panorama militar e econômico, o que por conseqüência altera toda a visão, objetivos e expressividade do design e da arte. As tipografias modernistas, assim como sua arquitetura e sua arte, pregava a alteração dos parâmetros de forma abrupta. A recusa ao ornamento, o radicalismo geométrico, a busca da função foram conceitos que pautaram de forma significativa este momento. O construtivismo russo, o De Stijl, a Bauhaus criaram uma tendência da racionalização matemática em todas as expressões, levando-as a uma pureza geométrica e formal. Os tipos modernistas geométricos são por natureza funcionais e limpos e geralmente não possuem serifas (como exemplo a Futura), quando existem, elas apresentam-se com o mesmo peso do traço principal (como é o caso da Rockwell e da Memphis). A falta de eixo, modulação e as formas matematicamente concebidas são suas principais características. 3.5 METAS A LONGO PRAZO Auxiliar no desenvolvimento do conhecimento tipografia por parte dos designers e diretores de arte em formação ou recém-formados, gerando um retorno à cultura clássica do Design ANÁLISE DO PRODUTO EM RELAÇÃO AO MERCADO Força O objeto em questão trata de um tema relevante para o público-alvo dentro de uma esfera nova, a didática. Além de contemplar temas teóricos úteis para embasamentos também sugere e reforça uma metodologia coerente para escolhas de tipografia Oportunidades Há uma lacuna dentro da educação formal em design, e apesar de vastas bibliografias sobre o tema, a plataforma digital ainda é pouco explorada. Uma oportunidade econômica relevante a ser citada é a possibilidade da ferramenta de sugestão ser patrocinada por uma type foundry, já redirecionando para a sua página de comércio eletrônico. Isso geraria um acesso orgânico ao site da empresa por um público altamente capacitado e direcionado Fraquezas A falta de incentivos, recursos e autorizações de uso das tipografias podem ser empecilhos, principalmente sem o apoio de uma type foundry. 14

16 3.6.4 Ameaças Por se tratar de uma idéia trabalhosa, porém de simples execução, as empresas poderiam desenvolver suas próprias ferramentas. 3.7 ANÁLISE DE CONCORRENTES E SIMILARES Com base nas diretrizes de Jakob Nielsen, os sites concorrentes foram submetidos a uma análise onde foram questionados temas como usabilidade, ergonomia e relevância dentro do público-alvo. A análise e testes dos sites visam não só apontar possíveis equívocos cometidos para que não sejam repetidos, como também demonstrar experiências de navegação bem resolvidas Myfonts < O Myfonts é um dos mais conceituados sites de comércio eletrônico de fontes. Além de uma fantástica ferramenta para identificação de tipografia, o site apresenta um sistema próprio de loja virtual, um vasto repertório de fontes e imagens demonstrativas com aplicações das mesmas. a) Método de sugestão de fontes: O grande diferencial do site trata-se de um sistema de identificação de fontes a partir de imagens enviadas chamado WhatTheFont. O sistema identifica com precisão qual a possível tipografia através do rastreamento da imagem, e sugere ao usuário uma lista de fontes organizadas por proximidade que poderiam substituí-la. 15

17 b) Mecanismo de compra: O site apresenta-se de forma clara, objetiva e discreta, incitando ao usuário imediatamente um bom nível de confiabilidade, característica muito importante em qualquer comércio eletrônico. O respeito às convenções de percurso (check-in, identificação e check-out) além de reduzir a taxa de erros aumenta o conforto e segurança do usuário. c) Análise Ergonômica: c.1) Hierarquia de informação: Existe uma unidade no site como um todo e uma hierarquia informacional bem definida através da utilização cromática e do tratamento tipográfico em relação ao tamanho e peso da fonte. c.2) Estrutura de navegação: Além de deixar sempre a mostra e de forma clara o recurso mais básico para a navegação, o menu, existe também uma condução cuidadosa dentro do percurso de compra, deixando a etapa em execução sempre clara para o usuário. c.3) Estrutura de busca: A busca por fontes se baseia em critérios pouco objetivos (como design owner, typefoundry, webfont support ) que são relevantes mais que 16

18 carecem de um maior direcionamento. Talvez a etapa mais eficiente seja a associação de palavras-chave às fontes, também conhecida como Tags. A busca por Tags pode atender a demanda geral de forma satisfatória, porém a falta de critérios. c.4) Estrutura do endereço URL: Um URL compreensível como o presente no Myfonts contribui para a sensação de segurança do usuário em termos de localização dentro do site, além de aumentar a relevância do site dentro de mecanismos de busca Dafont < Com um catálogo de fontes gratuitas bastante extenso, o Dafont é uma ferramenta de pesquisa e download bastante relevante dentro de sua área. Sua catalogação de fontes parte geralmente de características de conceito e forma estética da fonte, chegando a algumas categorias um tanto quanto peculiares como Fire, Ice e Western. a) Catalogação das fontes: Apesar do vasto repertório para download, a organização e busca dos arquivos se baseia em critérios rasos e pouco objetivos, sem levar em conta bases morfológicas ou históricas. O método de busca se torna muito empírico principalmente nas categorias mais abrangentes como Serif, não existe uma filtragem mais didática e intuitiva. b) Foco em fontes grátis: Um dos pontos positivos para os designers que visitam esse site é a possibilidade de usufruir de várias fontes absolutamente de graça. Ao invés de cobrar pelas fontes, o site deve manter-se financeiramente através de anúncios estrategicamente inseridos certamente devem ser a maior fonte de renda do site. c) Análise Ergonômica: c.1) Feedback imediato: O site precisa dar a orientação correta ao usuário durante todo o tempo, informando inclusive quais caminhos ele já percorreu. Não há nenhuma indicação de links visitados, o que pode tornar a navegação mais confusa caso o usuário comece a repetir as páginas visitadas. c.2) Estrutura do endereço URL: A falta de um URL compreensível reduz a eficiência da página em motores de busca e reduz a sensação de localização por 17

19 parte do usuário, que dificilmente poderá voltar a alguma página interna de forma direta. Para ele é muito mais fácil recordar-se de site.com/apresentacao do que site.com/resource/view.php?id=58242 c.3) Tangibilidade da informação: Todas as tipografias disponíveis apresentam o contato direto para os seus desenvolvedores, contribuindo para a credibilidade e transparência do site. c.4) Adaptabilidade: Durante a busca é possível alterar as dimensões, e o conteúdo de texto para melhor visualização das fontes. Além de um recurso gráfico muito útil ao designer também torna a página mais confortável em termos de acessibilidade Adobe Fonts/ Store < A Adobe é sem dúvidas uma das marcas mais poderosas dentro do universo criativo como um todo, logicamente seu site demanda reforçar essa forte imagem institucional. Cumprindo essa função, o site é extremamente objetivo e limpo, deixando claro a preocupação com a usabilidade. a) Ferramenta de busca: O Fontfinder é uma ferramenta de busca para as fontes produzidas pela própria Adobe. Levando em consideração diversos aspectos como estilo, classificação, referências históricas, uso e tema, a ferramenta abrange diferentes níveis de seleção e talvez seja uma das referências mais próximas ao Guia Tipográfico em termos de funcionalidade. b) Mecanismo de compra: O respeito às convenções de percurso (check-in, identificação e check-out) além de reduzir a taxa de erros aumenta o conforto e segurança do usuário. c) Análise Ergonômica: c.1) Sobriedade: O site é extremamente simples e objetivo, o que direciona o usuário à função prática e reforça uma credibilidade institucional. c.2) Ligações hipertextuais: As ligações hipertextuais apresentam-se de forma menos consistente do que o recomendado pela W3C. Dentro da etapa de seleção da fonte para a possível compra, é aberta uma outra janela que pode gerar além da desorientação por parte de um usuário menos experiente, a inutilização do botão voltar. O fato dos URL não serem indentificáveis de forma lógica também conta negativamente para o site. 18

20 c.3) Acessibilidade: A tecnologia Flash foi utilizada para o principal sistema do site, o que pode provocar problemas como acesso a deficientes visuais (levandose em consideração o público alvo, é de certa forma pouco relevante), leitura por motores de busca, e inoperabilidade em alguns dispositivos móveis como smartphones e tablets. Atualmente existem alternativas através da tecnologia Javascript que solucionariam este tipo de demanda. Um dos fatores que pode diferenciar o Guia Tipográfico de concorrentes e similares é a sua abordagem prática e teórica de maneira conjunta. A sugestão tipográfica segmentada com requisitos de relevância acadêmica também é um fator pouco explorado nos demais sites pesquisados. No entanto pela popularidade e presença na pesquisa de algum dos sites, eles certamente servirão como referencias e benchmarks dentro do tema. 3.8 COLETA DE DADOS E PESQUISA IMAGÉTICA A coleta de referências pode ser entendida como um passeio geral na história da produção de livros, dos desenhos tipográficos e de seus elementos. As páginas ornamentadas de Erhard Ratdolt, os estudos de mancha gráfica áurea de Jan Tschichold, o símbolo de impressão de Jenson, os grids modernistas de Brockmann e demais referências contemporâneas no que tange design web fizeram parte da coleta de dados. O painel semântico para elaboração conceitual do projeto do site passou pela representação gráfica das da fala (balão de dialogo), cores variações tonais do Cyan e Magenta e referência estéticas ligadas a marcas admiradas pelo público-alvo como a Apple. Além disso há uma pesquisa muito importante com base no design funcionalista suíço do século XX, referência esta que direciona o partido gráfico do site. Jan Tschichold não poderia deixar de ser citado como referência, não só por seus estudos em design de livros clássicos, manchas gráficas e tipografia, mas também pela conjuntura em que viveu. Outros nomes importantes do design modernista também podem ser citados para a criação de um quadro amplo de referências como Karl Gerstner, Paul Rand e Wolfgang Weingart. A concepção do site e seu direcionamento para o minimalismo e funcionalidade foi entendida como adequada quando se leva em consideração a grande variação de imagens, conceitos, tipografias e momentos históricos que ele se propõe a tratar. Estabelecer uma identidade reconhecível mas não invasiva aos demais assuntos abordados foi o principal cuidado dentro da criação estética do site. 19

21 Da esquerda para a direita: Marca de impressão de Jenson, utilizada como referencia para a identidade visual; cartaz de Muller Brockmann e anuncio de Paul Rand como referencias do modernismo funcionalista, presente dos grids geométricos que determinam a constituição do site; ilustração de balão, utilizado para simbolizar a fala e a comunicação advinda do texto tipográfico, representada nos balões azuis utilizados dentro do partido gráfico; cartaz de estética suíça modulado por grids; referência cromática baseada nas cores primárias de impressão. 20

22 Da esquerda para a direita: Diagrama de construção de mancha gráfica de Jan Tschichold, designer que resgatou muito das tradições clássicas durante o século XX e influenciou na criação de requisitos e paradigmas do que seria um bom design; Museo: Tipografia utilizada no site, livro de construção de diagramas modernista, página renascentista de Erhard Ratdolt, uma das muitas referencias de projeto gráfico através dos variados momentos históricos. 21

23 3.9 EXECUÇÃO DE CONTEÚDO TEXTUAL O conteúdo textual foi concebido após a leitura e interpretação dos conceitos apresentados fundamentalmente nas obras: Elementos do estilo tipográfico, de Robert BRINGHURST; História do Design Gráfico, de Philipp MEGGS; Design gráfico, uma história concisa, de Richard HOLLIS; Pensar com Tipos, de Ellen LUPTON, no guia Tipo assim, de Elias BITTENCOURT, e no livro Arte Comentada: da pré-história ao pós-moderno, de Carol STRICKLAND Tipos Renascentistas A partir do século XIV, o capitalismo comercial fortaleceu-se na Europa juntamente com a burguesia. Os valores da igreja começaram a ser minados, tanto pelos ideiais burgueses, tanto pela reforma protestante. O Renascimento, tido como a transição do mundo medieval para o mundo moderno, foi um movimento cultural, racional, laico e científico, que resgatava características da antiguidade clássica em detrimento aos valores feudais. O estudo da perspectiva e da anatomia humana revelavam não só uma preocupação técnica como também uma visão antropocêntrica da arte. Obras como Pietá, Monalisa e os afrescos do teto da Capela Sistina demonstram essa nova estética. Nesta mesma época a expansão das navegações favoreceu o crescimento de cidades como Veneza, um dos centros comerciais da Europa, e passagem obrigatória para as rotas do oriente. Ao contrário de Florença, centro do Renascimento, que ainda estava atrelada à cultura dos livros manuscritos, Veneza tornou-se o celeiro da criação de livros tipográficos na itália. Nicolas Jenson baseou-se nas escritas carolíngias do séc VIII e na inscrições clássicas romanas para produzir a primeira letra romana renascentista. Os tipos de Jenson possuiam grande legibilidade e mancha gráfica homogênea e confortável. Esse estilo ficou conhecido como Old Style e foi largamente utilizado a partir século XVI, sendo o desenho tipográfico de Jenson ainda uma referência de tipos romanos até os dias de hoje. Também influenciado por formas da antiguidade ocidental, Erhard Ratdolt inovou com uma composição mais decorativa da página. Incluiu formas naturalistas e orgânicas nos desenhos de capitulares e molduras através de xilogravura, dando força aos adorno dentro do projeto gráfico. Seguindo esta tendência, em 1478 os primeiros florões tipográficos fundidos foram utilizados por Giovanni e Alberto Alvise. Essa nova produção de livros tipográficos, muito mais baratos do que a antiga cultura ainda vigente em Florença dos mestres calígrafos, fez com que a igreja perdesse progressivamente o monopólio sobre o conhecimento escrito. A Imprensa Aldina (fundada por Aldus Manuzio) foi muito importante para a popularização dos livros, seja por seus formatos econômicos (livros de bolso), seja por valorizar o conhecimento científico, a razão e a erudição, sendo um humanista muito importante. Francesco Griffo, tipógrafo da Aldina, tinha como objetivo criar um tipo que se assemelhasse mais com a escrita cursiva italiana, possuindo assim mais autenticidade. Dessa motivação nasceram assim os tipos itálicos, também enquadrados no Old Style. O saque de Roma pela França em 1527 fez com que o renascimento italiano começasse a declinar, exportando o espírito renascentista ao seu invasor. Um exemplo disso foram os tipos de Garamond e as brilhantes ornamentações em capitulares venezianas e bordas feitas por Tory, muito importantes na alteração da identidade tipográfica francesa, que era essencialmente gótica. Em relação ao estilo 22

24 Veneziano, o Pariesiense possuia um desenho mais contido e sutil, mas com uma raiz estilistica muito próxima Tipos Barrocos Reforma protestante havia minado uma parcela importante do prestígio da Igreja. Os valores burgueses que haviam sido considerados como pecado pelos católicos se tornaram virtudes na religião de Calvino e Lutero. A Contra-reforma católica visou a retomada do poder eclesiástico, alterando algumas práticas como vendas de indulgências e formação clerical. Esse novo movimento da igreja buscava a grandiosidade e ostentação em seus templos, e o barroco foi a expressão desse momento histórico. A arte mostrava uma sede de abdicar de parâmetros alinhados, harmônicos e representações realistas da natureza. Emoção, ornamentação, dramaticidade, suntuosidade, certamente são características inerentes a esse momento artístico e histórico que contemplou nomes como Miguel de Cervantes, Shakespeare e Gregório de Matos na literatura, Velásquez e Rembrandt e Caravaggio na arte tradicional. A passagem do Renascimento para o Barroco se deu com Maneirismo, que nas artes gráficas também se mostrou como o culto ao exagero e ao ornamento. Letras com longas caudais, detalhes naturalistas em capitulares e molduras de páginas além da inserção dos florões tipográficos. Diferentemente dos seus anteriores, o século XVII não contemplou tantas inovações nas artes gráficas. Dentre os motivos para uma certa estagnação na área podemos citar grande estoque de ornamentações tipográficas criadas durante o Renascimento e Maneirismo, aliada a algumas das fontes mais influentes da história, como a Garamond, que possuiram uma hegemonia por muitos anos. Muitos dos tipógrafos desta época se continham a modificar sutilmente os tipos de Garamond. Outro brilhante tipógrafo nascido em 1720 e que simboliza o Barroco inglês é Willian Caslon. O contexto histórico de guerras, censura e controle estatal inglês tinha feito o pais ficar atrasado em relação a inovações gráficas, sendo Caslon o primeiro grande abridor de tipos da Inglaterra. Apesar de basear seu trabalho na tradição de tipos antigos Venezianos, seus tipos mostram algumas das características do barroco, principalmente na versão itálica. Seus foram responsáveis pela hegemonia tipográfica inglesa, sendo uma dos símbolos do colonialismo inglês. Apesar disso, é importante salientar alterações significativas na composição tipográfica. Durante o barroco, as nuâncias de angulação se tornaram muito mais acentuadas, assim como variações de eixo em um mesmo alfabeto, tipos itálicos e romanos já povoam a mesma linha, e as letras se mostram mais modeladas e menos manuscritas em comparação às renascentistas Tipos Neoclássicos Em meio ao iluminismo francês e a um momento histórico repleto de acontecimentos importantes, o neoclassicismo nasce com um interesse de resgatar os valores da grandiosidade grega e romana. Negando a escola barroca e rococó juntamente com seus ornamentos, exageros, movimento e dramaticidade, o neoclassicismo traz à tona o racionalismo, a mitologia e os valores da antiguidade em todos os campos. O preceito do racionalismo tipográfico provavelmente tenha se iniciado com a criação da gráfica real, a Imprimerie Royale. O rei Luís XVII reuniu estudiosos com o 23

25 fim de criar uma tipografia legitimada cientificamente. A Romain Du Roi, como foi chamado o tipo criado, foi construído a partir de um grid matemático, estudando as formas clássicas romanas e itálicas, sutis e precisos ajustes de contraste. Suas diretrizes estava de acordo não só com os requisitos de uma boa tipografia, mas também com o momento histórico como um todo. Apesar de baseado na tradição tipográfica, as letras de Baskerville incorporaram um espírito limpo, racional e brilhante diferencial de seus antecessores. Aliando um projeto de legibilidade e contraste impecáveis a inovação na produção de papéis, Baskerville foi um dos grandes responsáveis pelo salto de qualidade durante o século XVIII. Alguns de seus críticos alegavam o absurdo de que o brilho afiado de seus tipos chegavam a prejudicar a visão por ter um contraste muito apurado Tipos Românticos A estética do ornamento intimamente ligada ao estilo real havia entrado em declínio de forma vigorosa principalmente após as mudanças de paradigmas políticos provenientes da revolução francesa. Em paralelo ao movimento neoclássico que buscava inspiração nas formas clássicas gregas e romanas, o romantismo aflora na Europa também durante o século XVIII até meados do século XIX. Absorvendo os idéias da revolução francesa, ruptura do antigo sistema monárquico e ganho de força da burguesia, esse movimento busca uma idealização subjetiva e dramática do mundo. A letra romântica apresenta um eixo racionalista, dialogando com o movimento crescente do racionalismo científico, e ao mesmo tempo apresenta um tipo mais desenhado e menos manuscrito, uma versão idealizada esteticamente da escrita humana. O tipo romântico, ou estilo moderno, mostra uma racionalização precisa em torno de sua estrutura A eliminação da modulação gradual, que forma ligações entre as serifas e os traços verticais a partir de ângulos retos, geometrização de elementos como a terminal, que passa de gota a círculo e o alto contraste são exemplo da estética desse momento histórico. Bodoni, um dos símbolos da tipografia durante o romantismo e influenciado pelo movimento de industrialização européia, iniciou um processo de padronização durante a concepção dos tipos. Se antes o processo criativo partia da escrita caligráfica, agora partia da combinação de um numero reduzido de unidades modulares. As formas precisas mensuráveis e repetíveis de Bodoni expressavam a visão e a era da máquina (MEGGS). Na França, uma família de tipógrafos, impressores e fabricantes de papel criavam tipos com características muito similares aos de Bodoni. Os Didot, e em especial Fraçois-Ambroise Didot, se basearam na produção de Baskerville para criarem seus elegantes tipos românticos Tipo Realista A revolução industrial e as inúmeras correntes de pensamento provenientes da revolução francesa fizeram com que os anos subseqüentes fossem repletos de mudanças dentro da relação humana com a ciência, suas crenças e a sociedade. O positivismo de Auguste Comte opunha-se ao idealismo, defendendo a experiência e o pensamento científico. A verdade para Comte exclui qualquer atributo teológico ou metafísico, o que por si só já cria uma grande ruptura dos idéias da época. Questões que sempre foram explicadas com bases teológicas agora 24

26 tentam um caminho científico, como é o caso do darwinismo sobre a evolução das espécies e a criação do homem. Negando a visão idealizada do romantismo, o realismo se propõe a contemplar e estudar a realidade, provar através da ciência. Nas artes visuais o realismo foca em pessoas comuns, trabalhadores e o cotidiano, renegando representações fantasiosas, místicas, religiosas ou dramatizadas. O processo de industrialização foi alterando de forma significativa o trabalho dos tipógrafos. A divisão do trabalho entre criação e produção, novas tecnologias e a ascensão da publicidade moldaram este novo panorama gráfico. Os tipos realistas não buscam o rebuscamento o refinamento dos românticos e clássicos, baseavam-se na escrita das pessoas simples e em sua forma mais básica de representação. O resultado do estilo foi a criação de letras com as pesadas serifas Slab, ou sem serifa alguma. Adereços tipográficos que retratam um tratamento mais sofisticado, como algarismos de texto, ligaturas ou versaletes não se manifestam nessas fontes Tipo Modernista Durante a primeira metade do século XX, o mundo passava por um período de intensas alterações políticas e sociais. Duas guerras mundiais, nazismo, fascismo, comunismo foram extremamente significativos na alteração do panorama militar e econômico, o que por conseqüência altera toda a visão, objetivos e expressividade do design e da arte. O repertório tecnológico aflorava, carros, aviões, rádio e cinema alteraram a percepção de tempo, espaço e comunicação entre as pessoas. O modernismo demonstrou inúmeras facetas artísticas durante o século XX, cubismo, expressionismo, futurismo, surrealismo e expressionismo, revelando ao mundo grandes gênios como Picasso e Salvador Dalí. A ressonância dessas alterações no design modernista também foi muito grande, muito dos dogmas levados desde o renascimento foram questionados, a dinâmica das composições, a introdução da fotografia, os novos tipos grotescos e egípcios, tudo isso alterou de forma significativa a produção de design da época. As tipografias modernistas, assim como sua arquitetura e sua arte, pregava a alteração dos parâmetros de forma abrupta. A recusa ao ornamento, o radicalismo geométrico, a busca da função foram conceitos que se tornaram diretrizes do movimento. O construtivismo russo, o De Stijl, a Bauhaus criaram uma tendência da racionalização matemática em todas as expressões, levando-as a uma pureza geométrica e formal. Apesar de ter apresentado várias formas distintas de tipografia, a mais conhecida, relevante e que será usada para designar tal categoria dentro do Guia Tipográfico está na forma geométrica. Tipos modernistas geométricos são por natureza funcionais e limpos e geralmente não possuem serifas (como exemplo a Futura), quando existem, elas apresentam-se com o mesmo peso do traço principal (como é o caso da Rockwell e da Memphis). A falta de eixo, modulação e as formas matematicamente concebidas são suas principais características Tipo Pós-modernista Até o fim da década de 60 a cultura suíça em design detinha uma hegemonia absoluta como estilo gráfico dentre os designers. O estilo internacional tinha sido enraizado como uma referência visual generalizada, onde o meio era meramente um 25

27 organizador da mensagem, construindo a comunicação de forma hermética. O modernismo dentro do design, explícito no estilo internacional, teve como princípio o funcionalismo e a limpeza visual, apropriando-se do controle criativo por grids e de referencias construtivistas, da Bauhaus e do De Stijl. Essa construção racional da imagem, o puritanismo visual e o culto do minimalismo foi de grande interesse para as grandes corporações, que se utilizavam dessa estética como estratégia de construção de marca, agregando valores de organização e transparência à empresa. A hegemonia do estilo internacional, devida à sua divulgação programada em todas e quaisquer peças de comunicação das grandes corporações, propagada incessantemente e em escala global desestimulava a emergência de estilos alternativos. Era muito fácil, cômoda e rentável a adoção desse estilo suíço, e os clientes sentiam-se muito seguros em segui-lo. (CAUDURO, 2000) No entanto, em dado momento da década de 60 o estilo suíço começou a encontrar resistência por parte dos jovens designers da época como Wolfgang Weingart, Tissi e Odermatt, que dentre outros, viam o estilo internacional como algo monótono e sem representatividade. Essa sensação de homogeneidade de design fez com que alguns desses novos designers tentassem se dissociar inserindo novamente a subjetividade e criatividade no contexto comunicativo suíço, caracterizando o New Wave Typography. O movimento teve uma ampla divulgação durante a década de 1970, inclusive nos EUA. Tinha como base a própria tipografia suíça, no entanto buscava uma organização gráfica não dogmática, inserindo novamente a ornamentação e o simbolismo em detrimento do conceito exclusivamente funcionalista. A idéia de Wolfgang Weingart, apontado como o expoente do movimento, era a quebra da função tipográfica suíça como exclusivamente sintática, trabalhando com uma forma de melhorar a compreensão semântica de seu conteúdo. Essa nova forma de projetar discutindo velhas regras vinha também de contestações e reflexões sobre o panorama histórico da época. A ditadura do estilo internacional estava atrelada a uma produção capitalista e ligada às guerras. Na Califórnia em meados dos anos 60, surgiam algumas vertentes de design que transgrediam a forma de comunicação vigente. Buscando referências na psicodelia e na música underground, designers apontavam suas paletas de cores para experiências sensoriais obtidas pela música e pelo LSD, droga legalizada na época. Um importante designer do grupo psicodélico foi Victor Moscoso, que combinando uma estética confusa e distorcida a cores vibrantes e efeitos de compensação óptica criava pôsteres para concertos da época. Durante os anos 80 e 90 surgiram grandes lendas do design pós-moderno como David Carson e Neville Brody. Em um momento em que o design busca uma inspiração subjetiva e sensorial, além de ter uma relação de expressão pessoal do autor, a música passa a ter uma relação muito harmônica com a criação gráfica. O movimento grunge, encabeçado por bandas como Pearl Jam e Nirvana e o movimento punk, de bandas como Sex Pistols, demonstram sonoramente a sujeira tipográfica do design em seus muros pixados, colagens e recortes. A anarquia, a imperfeição, o overdrive, a distorção, são características que competem a ambas formas de expressão. 26

28 4 CONCEPÇÃO DO PROJETO 4.1 ERGONOMIA A ergonomia aplicada às interações entre o ser humano e o computador pode ser entendida como uma análise perceptiva e cognitiva do usuário com o sistema. Utiliza-se de conhecimentos de psicologia, antropologia e fisiologia visando o aumento de desempenho do sistema e satisfação do usuário O usuário A aplicação da ergonomia a um site tem precisa levar em consideração os seus diferentes usuários. Com base na metodologia aplicada por (NORMAN, 1986), podemos citas como relevantes requisitos como: a) Expectativa: Usuários diferentes nem sempre buscam a mesma informação ou esperam encontrar o mesmo partido gráfico, e todos devem ser levados em consideração para essa concepção. No universo do Guia Tipográfico existirão usuários a busca de uma sugestão de tipografia, os que querem embasar sua escolha partindo para requisitos objetivos ou os que querem ampliar seu repertório imagético. b) Hábitos do utilizador: Comportamentos individuais de cada indivíduo podem influenciar em sua relação com o sistema. c) Idade: Em um público-alvo mais abrangente a idade seria definidora para aspectos que tangem a velocidade de compreensão e a relação com a tecnologia. No Guia Tipográfico no entanto, a idade deve definir as expectativas de conteúdo, que deverá ser mais aprofundado conforme o aumento da idade e experiência profissional do usuário. d) Equipamentos: Tipo de navegador, tipo de dispositivo (Smartphone, notebook, desktop ou tablet), resolução e configuração de hardware influenciam diretamente a relação com a interface. e) Nível de conhecimento: A qualidade da interação depende também de um conhecimento prévio e referências por parte do usuário. 4.2 USABILIDADE A usabilidade é um termo utilizado para descrever a qualidade da interação do usuário com um sistema por meio de determinada interface. A IHC (Interação homem-computador), disciplina que abrange diversos conhecimentos de áreas como ciência da computação, engenharia, antropologia, design, psicologia, semiótica e lingüística é um dos pilares da usabilidade, pois estuda justamente essa interface. A eficácia da usabilidade dentro do sistema é obtida quando o usuário consegue concluir seu objetivo. A métrica de sua eficiência pode ser obtida em relação à quantidade de tempo e de erros que interface conduziu o usuário até ele concluir tais objetivos. De acordo com (Nielsen, 1993) a qualidade da usabilidade em determinado website pode ser analisada pelo nível de aprendizado da interface; grau de dificuldade, lembrança e rapidez sobre a realização de determinada tarefa dentro do sistema; taxa de erro e pela satisfação do usuário em relação aos resultados obtidos. 27

29 A usabilidade pode ser considerada uma qualidade de uso, isto é, qualidade de interação entre usuário e sistema, que depende das características tanto do sistema quanto do usuário. Tarefas específicas realizadas pelo usuário também determinam uma boa usabilidade. A usabilidade é certamente um dos atributos mais desejáveis a qualquer site que visa ter uma função prática. Descrita por (DIAS, 2003) como a medida da qualidade da experiência do usuário ao interagir com alguma coisa, a usabilidade aplicada ao guia tipográfico torna-se vital para a compreensão do usuário do percurso cognitivo e metodológico. Tido como principal produto do site, a sugestão de tipos precisa apresentar uma interface extremamente clara e objetiva para a seleção dos requisitos. Da mesma forma, a qualidade da experiência do usuário visa ser incrementada com aplicações visuais e descrição clara da trajetória, pontuando algumas das diretrizes e equívocos estabelecidas por NIELSEN para uma projetação de sites com boa usabilidade: Textos escaneáveis e leves O fato da tipografia no site se apresentar em forma de texto selecionável e escaneável ao invés de imagem por exemplo, pode ser defendida por inúmeras razões como: Acessibilidade a usuários com dificuldades de visão, seja por redimensionamento do conteúdo, seja por leitura em softwares para deficientes visuais; Incorporação e escaneamento do conteúdo por motores de busca como Google, incrementando o ranking do site e sua relevância; Conteúdo selecionável, permitindo uma disseminação da informação de maneira mais fácil. A redação de textos voltados para web também tem que passar por um tratamento especial. O conteúdo para web deve ser muito menos burocráticos do que os de mídias impressas. A criação de uma hierarquia da informação consistente, utilizando tags HTML como <H1>, <H2>, <P> - Header 1, 2 e Paragraph - ajudará não só para uma experiência de leitura mais confortável como também será um aliado na otimização para sistemas de buscas (SEO) Uso de modismos vazios Modismos sempre são recursos a serem evitados, ainda mais quando a vida útil do material gráfico é relativamente longa. No guia tipográfico proposto, há um outro motivo muito relevante para que o partido gráfico se mostre bastante limpo e por muitas vezes até neutro. O fato de contemplar diversos projetos tipográficos, manchas gráficas de diferentes momentos históricos, e referenciais imagéticos diversos, é natural que o site se comporte de forma a não interferir no conteúdo, que é bastante tem uma personalidade bastante diversificada entre si Uso do Flash Nos últimos anos o uso da ferramenta Flash se tornou muito popular, principalmente por sua disseminação em praticamente todos os computadores do mundo, atingindo taxas de até 97% de presença. No entanto esta tecnologia possui ainda muitas desvantagens de usabilidade em relação à tecnologia escolhida (HTML + CSS + Javascript). 28

30 Os textos em flash não são escaneáveis por motores de busca, reduzindo drasticamente a quantidade de visualizações por busca orgânica e consequentemente o ranking e a relevância do site. Sites em flash desafiam uma das mais importantes diretrizes da Interação Homem-Computador, a ação de desfazer, ou dentro de um navegador web, o Botão Voltar. O usuário espera ter o controle sobre a navegação e seu conteúdo, e clicar no botão voltar para retornar à pagina anterior. Os sites em flash frustram o usuário nesse sentido, impossibilitando uma regressão natural via navegador. De acordo com Nielsen, Voltar é o segundo recurso mais utilizado na navegação Web. Naturalmente, supondo que funcione como previsto Respeito às convenções Nielsen aponta o risco de frustrar o usuário em relação ao percurso comum ao qual ele tem como referência. As convenções de design predominantes irão pautar o entendimento do usuário em cada componente do site, quanto maior a distância cognitiva, maior será o tempo gasto e menor será a eficiência do sistema Consistência A consistência dos elementos de design estabelece não só um padrão visual do site, como um trajeto seguro para o usuário. Padrões cromáticos, hierárquicos ou simbólicos adotados em estruturas como link, menu, texto e titulo, estabelecem unidade dentre as páginas internas e o significado do seu conteúdo Formato do site e resolução Hoje em dia existem inúmeros dispositivos com acesso a internet, desde desktops, netbooks e notebooks a smartphones e tablets, cada um com um tipo de interação com a interface e resolução. Baseando-se nos dados da W3Counter em relação aos usuários brasileiros podemos constatar que 1024x768 ainda é a resolução mais popular e também a menor a ser considerada, uma vez que a 800x600 apresenta uma parcela muito pequena e inseri-la na projetação seria trazer danos às demais. Tabela retirada do site Tobeguarany Estatísticas sobre a internet no Brasil. Disponível em < Acesso em 16/10/

31 Baseado nas estruturas modernistas dos meados do século XX, produzidos por Muller-Brockmann, o site utiliza o sistema de grids para constituir o seu layout de página. Utilizando-se 16 módulos de 60px, obtém-se 960px, uma medida segura para a resolução de 1024x768, a mais recorrente dentro da mostragem estatística. 4.3 ESCOLHA DA TIPOGRAFIA Um dos parâmetros que talvez fuja um pouco do funcionalismo estético empregado no site é a escolha da sua própria fonte. A Museo é um tipo desenvolvido pelo holandês Jos Buivenga através da sua typefoundry chamada exljbris. Com um visual contemporâneo como o próprio autor sustenta a Museo apresenta-se como uma semi-slab de boa leiturabilidade e ótima legibilidade. Com relação aos requisitos técnicos da fonte ela se apresenta como uma OpenType completa, contemplando capitulares, romanas, ligaturas, uma excelente variedade de idiomas e 5 pesos distintos. Além disso a família Museo conta ainda com versões Sans e Slab, todas com o mesmo gabarito da original. Desenhadas de forma híbrida, entre o orgânico e o geométrico a Museo é uma fonte que possui uma personalidade perceptível, mas que mesmo tempo cumpre seu papel técnico. Imagem retirada do site MyFonts Estatísticas sobre a internet no Brasil. Disponível em < Acesso em 16/10/

32 4.4 COLETA DE DADOS APLICAÇÃO DE PESQUISA Foi aplicada uma pesquisa com o intuito de conhecer mais dos hábitos dos potenciais usuários do Guia em relação à tipografia. O método de abordagem utilizado foi o digital, contando com ferramentas como Twitter e grupo de s, 81 entrevistados de todo o Brasil responderam ao questionário utilizando-se da ferramenta Google Forms. 31

33 32

34 33

35 A pesquisa evidenciou alguns dos argumentos utilizados para a produção do Guia Tipográfico, principalmente no que se refere à insatisfação do profissional com o seu conhecimento acerca da disciplina, e elucidou informações importantes como o tipo de projeto que deve ser mais requisitado durante a busca de fontes. A faixa etária demonstrada nas pesquisas está também como o maior público em potencial. Os jovens designer e diretores de arte, recém-formados e com maiores necessidades em aprendizado fundamentam a prática metodológica, que muitas vezes se mostra insuficiente ou demasiadamente intuitiva durante o o exercício profissional. Esse direcionamento de público é especialmente importante para traçar o nível de detalhamento do conteúdo. 34

36 4.5 ORGANOGRAMA DE CONTEÚDO 35

37 4.6 EXECUÇÃO DO LAYOUT Home: Desenvolvida com o propósito de incitar e gerar expectativa no usuário, para que o mesmo venha a consumir conteúdo que lhe possa ser relevante. A hierarquização dos conteúdos foca na ferramenta principal, o guia, o que fica claro tanto pela localização privilegiada, contemplando a primeira rolagem de tela do usuário, tanto pela distinção cromática no balão em relação aos demais conteúdos. 36

38 Página de sugestão tipográfica: Após a seleção dos requisitos dentro da função Guia, uma lista de fontes que atendem as suas necessidades seria sugerida para o usuário, ilustrando com um breve texto a aplicação da mesma e a porcentagem de aproximação dos requisitos. 37

39 Tipografia selecionada: Ao clicar na tipografia escolhida o usuário terá disponível informações sobre o tipo e sobre os requisitos aos quais ele atendeu. Além de dizer que o tipo é legível, por exemplo, diria também o que faz uma fonte ser legível, e o que naquela fonte a deixa legível. Além do conteúdo teórico, informações técnicas, aplicações em diversos tamanhos e exemplos de uso seriam disponibilizados nestas páginas internas. 38

40 Linha do tempo: Para uma compreensão geral e consulta rápida foi traçada uma linha cronológica listando os principais acontecimentos que tiveram repercussão na história da humanidade, arte e design. As fontes que carregam as características do momento histórico ilustram essa cronologia tipográfica. 39

41 Linha do tempo: Ao clicar em alguma categoria histórica o usuário é levado para uma nova página que descreverá com maior profundidade os acontecimentos ocorridos no período. Além do conteúdo textual simulando um projeto gráfico característico e galeria com referencial imagético, serão disponibilizadas notas de referência bibliográfica, exemplos de fontes criadas pelos tipógrados de referência no período, e as características tipográficas do Periodo 40