Em Branco - Projeto Editorial para Revista Digital Com A Temática de Design Gráfico

UNIVERSIDADE TECNOLGICA FEDERAL DO PARAN
DEPARTAMENTO ACADMICO DE DESENHO INDUSTRIAL

CURSO DE TECNOLOGIA EM DESIGN GRFICO
CAMILA BARBIERI DE ALENCAR

MARIA LUCIANA UTIDA SANTOS
EM BRANCO: PROJETO EDITORIAL PARA REVISTA DIGITAL COM

A TEMTICA DE DESIGN GRFICO
TRABALHO DE CONCLUSO DE CURSO
CURITIBA
2014
CAMILA BARBIERI DE ALENCAR
MARIA LUCIANA UTIDA SANTOS
EM BRANCO: PROJETO EDITORIAL PARA REVISTA DIGITAL COM

A TEMTICA DE DESIGN GRFICO
Trabalho de Concluso de Curso de

graduao, apresentado disciplina de
Trabalho de Diplomao, do Curso Superior de
Tecnologia em Design Grfico do
Departamento Acadmico de Desenho
Industrial DADIN da Universidade
Tecnolgica Federal do Paran UTFPR,
como requisito parcial para obteno do ttulo
de Tecnlogo.
Orientadora: Prof Dr Las Cristina Licheski
CURITIBA
2014
Ministrio da Educao
Universidade Tecnolgica Federal do Paran
PR
UNIVERSIDADE TECNOLGICA FEDERAL DO PARAN
Cmpus Curitiba
Diretoria de Graduao e Educao Profissional
Departamento Acadmico de Desenho Industrial
TERMO DE APROVAO
TRABALHO DE DIPLOMAO N0 615
EM BRANCO: PROJETO EDITORIAL PARA REVISTA DIGITAL COM A

TEMTICA DE DESIGN GRFICO
por
Camila B. de Alencar cd: 01165267

Maria Luciana Utida Santos cd: 01191993
Trabalho de Diplomao apresentado no dia 25 de novembro de 2014 como

requisito parcial para a obteno do ttulo de TECNLOGO EM Design Grfico, do
Curso Superior de TECNOLOGIA em Design Grfico, do Departamento Acadmico
de Desenho Industrial, da Universidade Tecnolgica Federal do Paran. O(s)
aluno(s) foi (foram) arguido(s) pela Banca Examinadora composta pelos professores
abaixo, que aps deliberao, consideraram o trabalho aprovado.
Banca Examinadora: Prof. Dr. Jos Marconi Bezerra de Souza

DADIN - UTFPR
Prof. Msc. Cludia Bordin R. da Silva

DADIN - UTFPR
Prof. Dr. Las Cristina Licheski

Orientadora DADIN UTFPR
Prof(a). Msc. Josiane Lazaroto Riva

Professora Responsvel pela Disciplina de TD
DADIN UTFPR
A Folha de Aprovao assinada encontra-se na Coordenao do Curso.

AGRADECIMENTOS
Agradecemos a todos que de alguma maneira contriburam para a realizao do

presente trabalho de diplomao, em especial nossas famlias e Professora Dr
Las Cristina Licheski pelo apoio e orientao.
RESUMO
ALENCAR, Camila Barbieri de; SANTOS, Maria Luciana Utida. Em Branco: Projeto
editorial ara re s a d a o a e a de des n r o. . ra a o de
Con uso de Curso. raduao e e no o a e es n r o. n ers dade
e no a edera do aran . Cur a .
Este trabalho apresenta o processo de desenvolvimento de uma revista digital

interativa que se foca em contedos relacionados a design grfico. Discorreu-se
sobre design editorial e de revistas, fazendo um levantamento de suas principais
diretrizes, juntamente a um relato sucinto do processo de evoluo das revistas no
meio digital a fim de entender os requisitos para o desenvolvimento deste tipo de
publicao. Foram analisadas diferentes plataformas de publicao de revistas, com
o objetivo de mapeamento dos recursos oferecidos no meio digital,
comparativamente, influenciando as decises posteriores. Fez-se uma pesquisa
quantitiva para provar a validade do projeto e a fim de mapear as necessidades do
pblico alvo quanto a contedo e distribuio. Estudou-se e aplicou-se os conceitos
de design editorial, webdesign e design res ons o a de desen o er u a re s a
un ona e er os de usa dade e na e a dade a endo-se uso de re ursos
de n era dade e er e ua dade sendo es es ues os unda en a s na de so
do subsequente desenvolvimento. Apresentou-se, por fim, o desenvolvimento do
projeto editorial, da criao grfica,e da implementao do modelo. Posteriormente
fez-se uma pesquisa qualitativa por meio de questionrio para obter resposta
questes ligadas a navegabilidade e formato da revista, sendo os resultados levados
em considerao para o aprimoramento do modelo da revista.
Palavras-chave: Design Editorial. Revista Digital. WebDesign. Design Responsivo.

Interatividade.
ABSTRACT
ALENCAR, Camila Barbieri de; SANTOS, Maria Luciana Utida. ran o d or a

ro e or a ra des n e ed d a a a ne. . Course Con us on
ro e . radua on n ra es n e no o . edera e no o a n ers
o aran .Cur ba, 2014.
This paper presents the development process of an interactive digital magazine

focused on graphic design's related content. It descant about editorial and
magazine's design, making a survey of its main guidelines along with a succinct
report about the evolution of these magazines in the digital environment in order to
understand the development's requirements of this kind of publication. Different
magazines' publishing platforms were analyzed, aiming to map the offered features in
the digital environment, in terms of comparison, influencing subsequent decisions.
There was a quantitative research to prove the project's validity, and to map the
target audience's needs, regarding content and distribution. It was studied and
applied the concepts of editorial design, webdesign and responsive design in order to
develop a functional magazine in terms of usability and navigability, making use of
interactive resources and hypertextuality, which were fundamental requirements in
the subsequent development's decisions. Lastly it was expatiate the editorial design's
development, the graphic production and concisely the necessary to understand the
encoding development. Thereafter a qualitative research through a questionnaire
was taken, in order to get responses about issues related to the magazine's format
and navigability, and the results taken into account for the possible production of
subsequent numbers.
Key-words: Editorial Design. Digital magazine. Web Design. Responsive Design.

Interactivity.
LISTA DE FIGURAS
Figura 1 - e o de a a e su r o da re s a A erna e ress ....................... 32

Figura 2 - e o de uso de u os e n e a na re s a A erna e ress .......... 33
Figura 3 - Exemplo de uso de fotos e templates da re s a A erna e ress ........ 34
Figura 4 - e o de a a ns rues de uso e su r o da re s a Au .............. 35
Figura 5 - e o de u os e uso de o o e ar os da re s a Au .................. 36
Figura 6 - Exemplo vinheta, box o o uso de o os e o unas da re s a Au ........ 36
Figura 7 - Exemplo de capa, ttulo e o orren e da re s a Zu ......................... 38
Figura 8 - e o de rd os e uso de a ens na re s a Zu . ......................... 39
Figura 9 - e o de a a e su r o da re s a IK OK ................................... 40
Figura 10 - e os de o ra a u ada e u os na re s a IK OK ........... 40
Figura 11 - e os de d a ra ao das nas da re s a IK OK. .............. 41
Figura 12 - e os de sua ao da re s a IK OK e smartphones ......... 41
Figura 13 - Exemplo de pgina de estudos preliminares da marca........................... 49
Figura 14 - Rascunho sobre as transies possveis dentro do conceito .................. 49
Figura 15 - Alternativa com letras em recorte e dobradura numa folha de papel ...... 50
Figura 16 - Extratos de estudos envolvendo o trocadilho com o leite ....................... 50
Figura 17 - Estudos de alternativas com a caixa e o leite derramado ....................... 51
Figura 18 - s udos do on e o a o e ran o ................................................ 51
Figura 19 - A erna as do on e o es ao e ran o ......................................... 52
Figura 20 - Alternativas utilizando-se balo quadrado modular................................. 52
Figura 21 - Alternativas unindo as iniciais da marca forma do balo ..................... 53
Figura 22 - Alternativas utilizando-se balo estilizado ............................................... 53
Figura 23 - Alternativa selecionada para refinamento ............................................... 53
Figura 24 - Esquema de sintetizao do smbolo a partir da tipografia ..................... 54
Figura 25 - Alternativas criadas a partir do smbolo baseado na tipografia ............... 54
Figura 26 - Verso final da marca oficial ................................................................... 54
Figura 27 - Verso final da marca horizontalizada .................................................... 55
Figura 28 - Exemplo de comparao de diversos tamanhos da fonte Open Sans .... 58
Figura 29 - Exemplo de comparao de diversos tamanhos da fonte Droid Sans .... 58
Figura 30 - Exemplo de comparao de diversos tamanhos pt. da fonte Cabin ....... 59
Figura 31 - Exemplo ilustrativo de estudo da fonte Tungsten ................................... 60
Figura 32 - Exemplos da famlia Tungsten ................................................................ 60
Figura 33 - Fontes League Gothic, Tungsten, Ostrich e Antonio............................... 61
Figura 34 - League Gothic, Tungsten, Ostrich e Antonio junto ao smbolo da marca 61
Figura 35 - Verso horizontalizada da marca, em Tungsten Medium ....................... 62
Figura 36 - Exemplo das fontes Open Sans e Playfair Display Italic ......................... 62
Figura 37 - Legenda utilizando a fonte Roboto Condensed ...................................... 62
Figura 38 - Estudo preliminar de cores para cada edio e complementares ........... 64
Figura 39 - Paleta de cores identitrias de cada edio da revista ........................... 64
Figura 40 - Cor utilizada para a identidade da revista ............................................... 64
Figura 41 - Elementos de repetio criados a partir da marca .................................. 66
Figura 42 - Gerao de alternativas para a vinheta .................................................. 66
Figura 43 - Verso final da vinheta do modelo da revista ......................................... 66
Figura 44 - Wireframe dos sistemas de navegao do site ....................................... 67
Figura 45 - Navegao da revista ............................................................................. 68
Figura 46 - Menu do modelo da revista ..................................................................... 68
Figura 47 - cones para a navegao primria e secundria da revista ................... 70
Figura 48 - cones para os elementos interativos da revista ..................................... 70
Figura 49 - cones para as instrues de uso da revista ........................................... 70
Figura 50 - cones desenvolvidos utilizao no site da revista .................................. 71
Figura 51 - Visualizao do grid nos dispositivos: notebook, tablet e smartphone.... 73
Figura 52 - Visualizao do grid em um artigo nos dispositivos: notebook, tablet e
smartphone ............................................................................................................... 73
Figura 53 - Exemplos de wireframes ......................................................................... 74
Figura 54 - Paleta de cores original e otimizada para daltonicos .............................. 77
Figura 55 - Cores da revista mostrando sua variao de acordo com os tipos de
daltonismo ................................................................................................................. 78
Figura 56 - Exemplo de pgina que com opes de acessibilidade .......................... 78
Figura 57 - In o da an ao da a a os rando a a resen ao da ar a...... 85
Figura 58 - na da an ao os rando o e a a ordado ar a o a e
chamadas .................................................................................................................. 86
Figura 59 - Verso final do sumrio para desktop e tablet ........................................ 87
Figura 60 - Alternativas geradas para o ar o Ana o a o r a ..................... 88
Figura 61 - Verso na do ar o Ana o a o r a ......................................... 89
Figura 62 - Ar o Ana o a o r a sua ado e diversos dispositvos ........ 89
Figura 63 - A erna as eradas ara o ar o L n a do e o ............................. 90
Figura 64 - Verso na do ar o L n a do e o ................................................. 91
Figura 65 - Ar o L n a do e o isualizado em diversos dispositvos ................ 91
Figura 66 - A erna as eradas ara o ar o as .............................................. 92
Figura 67 - Verso na do ar o as .................................................................. 93
Figura 68 - Ar o Dicas sua ado e d ersos d s os os ................................. 93
Figura 69 - Exemplo do processo de gerao de alternativas com base em Alfred
Hitchcock ................................................................................................................... 94
Figura 70 - Verses finais de Martin Scorsese, Alfred Hitchcock, Otto Preminger e
Stanley Kubrick e Saul Bass ..................................................................................... 95
Figura 71 - Exemplo de painel e fontes ..................................................................... 95
Figura 72 - Painel de Otto Preminger ........................................................................ 96
Figura 73 - Painis de abertura e finalizao ............................................................ 96
Figura 74 - Artigo sobre Bass visualizado em diversos dispositvos .......................... 96
Figura 75 - A erna as eradas ara a seo re o endaes ............................. 97
Figura 76 - Verso na da seo re o endaes ................................................. 97
Figura 77 - Ar o re o endaes sua ado e diversos dispositvos ................ 98
Figura 78 - Alternativas geradas ara o ar o ra a os dos e ores ..................... 99
Figura 79 - Verso na da seo ra a os dos e ores ........................................ 99
Figura 80 - Ar o ra a o dos e ores sua ado em diversos dispositvos ....... 100
LISTA DE GRFICOS
Grfico 1 - Realizao de leitura de revista sobre design ......................................... 27

Grfico 2 - Frequncia da leitura de revista sobre design ......................................... 27
Grfico 3 - Preferncia pelo tipo de revista ............................................................... 27
Grfico 4 - Preferncia sobre as fontes de informao sobre design ........................ 27
Grfico 5 - Dispositivo utilizado para acessar a internet em sala de aula ................. 28
Grfico 6 - Dispositivo utilizado para acessar a internet em casa ............................. 28
Grfico 7 - Necessidade de material de apoio especfico para o curso ..................... 28
Grfico 8 - Assuntos mais procurados ...................................................................... 28
Grfico 9 - Dispositivo utilizado para avaliar a revista ............................................. 101
Grfico 10 - Eficincia de uso do sistema navegacional da revista ......................... 102
Grfico 11 - Necessidade de voltar s instrues de uso ....................................... 102
Grfico 12 - Facilidade de uso dos elementos interativos. ...................................... 102
Grfico 13 - Legibilidade da revista ......................................................................... 102
Grfico 14 - Atratividade da revista ......................................................................... 103
SUMRIO
1 INTRODUO ....................................................................................................... 11
1.1 CONSIDERAES INICIAIS .............................................................................. 11
1.2 JUSTIFICATIVA .................................................................................................. 12
1.3 OBJETIVOS ........................................................................................................ 13
1.3.1 OBJETIVO GERAL........................................................................................... 13
1.3.2 OBJETIVOS ESPECFICOS ............................................................................ 13
1.4 PROCEDIMENTOS METODOLOGICOS ............................................................ 14
1.5 ESTRUTURA DO TRABALHO ............................................................................ 14
2 EMBASAMENTO TERICO .................................................................................. 16
2.1 DESIGN EDITORIAL ........................................................................................... 16
2.2 DESIGN DE REVISTAS ...................................................................................... 18
2.3 DA PUBLICAO IMPRESSA A DIGITAL.......................................................... 22
3. ASPECTOS METODOLGICOS .......................................................................... 26
3.1 PESQUISA COM PBLICO-ALVO ..................................................................... 26
3.1.1 Coleta e anlise de dados ................................................................................ 26
3.2. ANLISE DE REVISTAS DIGITAIS ................................................................... 29
3.2.1 An se da re s a A erna e ress ............................................................... 32
3.2.2 An se da re s a Au .................................................................................... 34
3.2.3 An se da re s a Zu ................................................................................... 37
3.2.4 An se da re s a IK OK ........................................................................... 39
3.2.5 Resultado da anlise ........................................................................................ 42
4 PROJETO GRFICO DA REVISTA EM BRANCO ................................................ 44
4.1 REQUISITOS DO PROJETO .............................................................................. 44
4.2 PLANO EDITORIAL ............................................................................................ 45
4.3 A MARCA ............................................................................................................ 48
4.3.1 or ue ran o? ....................................................................................... 48
4.3.1.1 Origami/dobradura em papel ......................................................................... 49
4.3.1.2 Leite............................................................................................................... 50
4.3.1.3 Espao / campo em branco ........................................................................... 51
4.3.1.4 Balo de dilogos .......................................................................................... 52
4.4 ELEMENTOS DE DIAGRAMAO .................................................................... 55
4.4.1 Tipografia ......................................................................................................... 55
4.4.2 Cores ................................................................................................................ 63
4.4.3 Elementos de repetio .................................................................................... 65
4.4.4 Vinheta ............................................................................................................. 65
4.4.5 Navegao ....................................................................................................... 67
4.4.6 Grids ................................................................................................................. 71
4.4.7 Wireframes ....................................................................................................... 73
4.4.8 Capa ................................................................................................................. 75
4.4.9 Sumrio ............................................................................................................ 75
4.4.10 Acessibilidade ................................................................................................ 76
4.5 IMPLEMENTAO DA REVISTA ....................................................................... 79
5 DESENVOLVIMENTO DO MODELO DA REVISTA .............................................. 82
5.1 GERAO DE ALTERNATIVAS ......................................................................... 84
5.1.1 Capa ................................................................................................................. 84
5.2.2 Sumrio ............................................................................................................ 86
5. .3 Ar o Ana o a o r a ............................................................................ 87
5. . Ar o L n a do e o ................................................................................... 90
5. .5 Ar o as .................................................................................................... 92
5. .6 Ar o A o ra a e a ar e de Sau ass ....................................................... 93
5. .7 Seo Re o endaes ................................................................................. 97
5. .8 Seo ra a o dos Le ores ......................................................................... 98
5.3 PESQUISA DE USABILIDADE ......................................................................... 100
5.3.1 Coleta e anlise de dados .............................................................................. 100
6 CONSIDERAES FINAIS ................................................................................. 104
6.1 CONTINUIDADE DO PROJETO ....................................................................... 106
REFERNCIAS ....................................................................................................... 108
APNDICES............................................................................................................ 112
APNDICE A - Pesquisa apresentada aos estudantes de design para levantamento
de dados iniciais necessrios realizao do projeto ............................................. 112
APNDICE B - Imagens e a a e a do ar o Ana o a o r a ..................... 113
APNDICE C - I a ens e a a e a do ar o L n a do e o ............................. 114
APNDICE D - I a ens e a a e a do ar o as .............................................. 115
APNDICE E - I a ens e a a e a do ar o A o ra a e a ar e de Sau ass .. 116
APNDICE F - I a ens e a a e a do ar o Re o endaes ............................ 117
APNDICE G - Imagens tela a tela do ar o ra a o dos e ores ..................... 118
APNDICE H - Pesquisa apresentada para verificar o funcionamento do modelo da
revista ...................................................................................................................... 119
11
1 INTRODUO
1.1 CONSIDERAES INICIAIS
Em plena Era da Informao, comum o aparecimento de novas tecnologias

e consequentemente a ideia nem sempre correta de que essas substituiro as
demais. Nos meios de comunicao no diferente, e a internet veio para
transformar de vez a disseminao de informao.
Uma das grandes vantagens do acesso estendido internet seria a
capacidade de todos poderem produzir e veicular informao, no ficando apenas
restrito a escritores e seus livros, jornalistas e seus jornais e revistas. Em teoria um
avano maravilhoso em termos de comunicao; mas na prtica, no bem assim:
a cada dia surgem mais blogs e sites com o intuito de disseminar informaes a
respeito de um tema qualquer. Com o tema design no diferente, mas nem sempre
existe um mediador competente analisando e avaliando as informaes e
consequentemente esses (sites e blogs) acabam no oferecendo confiana e
credibilidade para o pblico.
Existe certo a arro a en o de n or aes so re ur os dades d ersas e,
neste caso, a falta de mediao no to prejudicial ao leitor. Mas levando em
considerao as necessidades acadmicas, informaes confiveis so publicadas
em nmero bastante reduzido se comparado ao contedo meramente inspiracional e
voltado a curiosidades. comum utilizar a internet como forma inicial de pesquisa
pela facilidade e rapidez de localizao de contedos, porm importante que se
tenha a capacidade de filtr-los e nem sempre o pesquisador est apto para tal
ao.
Por nem tudo poder ser abordado em sala de aula de maneira abrangente
ou condizente com as necessidades dos alunos e as instituies de ensino no
terem condies de manter atualizados os acervos das bibliotecas, principalmente
nas reas relacionadas tecnologia digital, a internet naturalmente se torna uma
extenso da sala de aula na busca de informaes. Afinal, inegvel que o meio
digital muito mais rpido que qualquer outro meio para veiculao de contedos e
novidades, sem mencionar a relao custo-benefcio que oferece.
12
O acesso informao pode estar ao alcance de qualquer aluno de design,

e o aprendizado contnuo se torna imprescindvel para um bom desempenho
acadmico e profissional, mas com os constantes avanos e novidades voltados
rea de design e uma exigncia cada vez mais abrangente do mercado de trabalho,
nota-se a falta de um meio que faa um direcionamento mais seleto a informaes
relevantes.
nisso que se foca este projeto, o desenvolvimento de um meio adaptvel a
leitura digital no caso, um modelo revista responsiva com artigos educacionais
(instrutivos), dicas e curiosidades com temtica voltada ao design grfico.
1.2 JUSTIFICATIVA
O projeto foi pensado devido s necessidades sentidas pelas autoras

durante os semestres iniciais do curso, e se mostrou relevante aps realizao de
uma pesquisa inicial cujo resultado apontou que outros alunos, alm de se
identificarem com as necessidades, demonstraram interesse e julgaram necessrio o
desenvolvimento de material de cunho educativo que faa uma segmentao e
direcionamento a contedos tratados ao longo do curso de Design Grfico.
Prope-se ento o desenvolvimento de uma revista digital, que funcionaria
em conjunto a um site voltado temtica de design grfico, contendo principalmente
contedos voltados s necessidades acadmicas de forma mais tcnica, sem no
entanto, deixar de oferecer artigos com atualidades e curiosidades, entre outros.
Embora este projeto considere o funcionamento do site e revista em conjunto, aqui
ser desenvolvida apenas a revista e a parte do site que servir como suporte para
que a revista possa ser acessada em diversos dispositivos.
13
1.3 OBJETIVOS
1.3.1 Objetivo geral
Este trabalho de concluso de curso tem como objetivo criar um modelo de

revista digital responsiva que apresente elementos multimdia e interativos,seu
contedo voltado estudantes de design grfico,e tem por objetivo oferecer, de
forma sintetizada, artigos que abordem temas apresentados no decorrer do curso de
Design Grfico.
1.3.2 Objetivos especficos
Para o cumprimento do objetivo geral ser necessrio:

Revisar literatura para conceituar e aprofundar os conhecimentos acerca
dos itens necessrios para a execuo da revista;
Levantar dados sobre o pblico-alvo para: verificar a real necessidade da
criao da revista; delimitar os dispositivos digitais mais utilizados; e
definir os temas a serem abordados na revista;
Analisar revistas digitais para coleta de informaes sobre os recursos
mais comumente oferecidos nos suportes existentes;
Executar o modelo da revista digital, considerando as diferentes
dimenses dos dispositivos utilizados pelo pblico-alvo;
Realizar segunda pesquisa com pblico-alvo para verificar a eficincia de
uso do modelo da revista e sanar possveis problemas.
14
1.4 PROCEDIMENTOS METODOLGICOS
A execuo deste Trabalho de Concluso de Curso deu-se em duas etapas:

terica e prtica.
Na etapa terica fez-se pesquisa bibliogrfica para reviso de literatura,
promovendo ou aprimorando o embasamento terico necessrio para o
desenvolvimento do projeto. Analisou-se dados quantitativos obtidos previamente
relacionados necessidade de realizao do projeto, delimitao dos dispositivos
utilizados e definio dos temas a serem abordados na revista. Realizou-se tambm
anlise de revistas digitais que teve como objetivo verificar os recursos multimdia
mais utilizados bem como os mtodos utilizados na navegao das mesmas.
Durante a etapa prtica, foram geradas alternativas para a marca, tipografia,
interatividade e os possveis layouts a serem utilizados nos artigos da revista. Nesta
etapa tambm foi realizada pesquisa com pblico-alvo para verificar a aceitao das
escolhas realizadas e ento concluir o modelo da revista.
1.5 ESTRUTURA DO TRABALHO
O presente trabalho de concluso de curso composto por seis captulos,

considerando-se como primeiro captulo essa introduo. O segundo captulo aborda
embasamento terico sobre design editorial, destacando seu papel dentro do
mercado de publicaes, dando nfase ao design de revistas. Contm tambm
breve relato sobre a transio das revistas impressas para o meio digital.
As e os Me odo os apresenta os resultados da pesquisa quantitativa
realizada com o pblico-alvo, anlise realizada com revistas digitais para verificar as
formas como os elementos mais usuais presentes no design de revistas e elementos
multimdia so utilizados nas mesmas e, por fim, foram definidos os requisitos para a
criao do modelo da revista.
ro e o r o da Re s a ran o so apresentados os requisitos
necessrios para a criao do modelo bem como o desenvolvimento da marca
15
grfica, os testes tipogrficos e as decises acerca dos demais elementos

necessrios para o desenvolvimento de uma revista digital responsiva.
O esen o en o do ode o da re s a mostra a gerao de alternativas
para os layouts dos artigos presentes na revista, bem como suas verses finais, e
apresenta os resultados de pesquisa qualitativa realizada com pblico-alvo a
respeito da usabilidade da revista.
O sexto e ltimo captulo apresenta as consideraes finais acerca do
projeto, cujo modelo est disponibilizado online em www.embranco.org.
16
2 EMBASAMENTO TERICO
Neste capitulo so abordadas informaes consideradas importantes para a

produo de uma publicao como esta, abordando as diretrizes do design editorial
e de revistas, e tambm uma descrio da transposio de revistas para o meio
digital. Apresenta-se um levantamento de dados utilizados como base para
compreender as necessidades e exigncias grficas e tambm jornalsticas para
a criao de uma revista digital, priorizando sempre o leitor.
2.1 DESIGN EDITORIAL
Entre as especialidades que dividem o design grfico, a que diz respeito ao

projeto de publicaes denominada design editorial, tendo como reas de
destaque o design de livros, revistas e jornais, entrando em contato direto com o
trabalho escrito.
Uma publicao nada mais do que a aplicao combinada de textos e
imagens, de forma a divulgar determinada ideia, e torn-la pblica. De acordo com
Samara (2007), toda forma de publicao comea como uma ideia, um assunto e/ou
mensagem com uma funo prevista, mas nem sempre com forma definida.
Assuntos e atividades populares como cozinha, esportes, automobilismo,
moda, dentre outras mais independentemente da maneira que so divulgados,
seja por uma revista, jornal, catlogo tm sempre a mesma funo: envolver uma
audincia naquele assunto ou mensagem durante certo perodo de tempo. O que
muda o formato, que vai diferenciar cada ideia, distinguindo o contedo em partes
reconhecveis, engajando o pblico alvo a partir de cores, imagens e tipografia
especficas.
O veculo no qual essas ideias sero publicadas est relacionado a funes
secundrias: o tipo de pblico a quem se enderea; a necessidade para informaes
peridicas ou agrupadas, e se a natureza da mensagem esttica ou evolucionria.
No importa qual o veculo, toda ideia pode tomar uma forma grfica.
(SAMARA, 2007). A tarefa do designer, junto ao editor, determinar qual ser a
17
melhor forma. Para que isso acontea, toda e qualquer publicao depende de um
projeto grfico, no qual o designer faz inmeras consideraes para que se chegue
ao formato adequado.
O projetista precisa atingir o pblico/leitor atravs do seu design, que deve
buscar a harmonia entre layout, cor, hierarquia de informao, entre outras regras
bsicas de projeto. A funo primordial do projeto grfico a de conferir unidade e
refletir a personalidade da publicao, e acima de tudo, disseminar a mensagem,
informao e ou assunto. Samara (2009) determina como regra bsica que se a
mensagem, histria, narrativa, ou alguma experincia til no for transmitida ao
usurio/leitor, no importa quo bonita uma pea grfica seja, no havendo a
comunicao esta perde completamente o sentido e no pode ser considerado
design grfico.
Ary Moraes fala sobre o papel que o projeto editorial desempenha em
jornais, mas suas concluses podem ser consideradas para o design editorial como
um todo:
projeto editorial o modo pelo qual a empresa ou grupo que mantm o
jornal busca atingir seus objetivos atravs da sua publicao [...]. O projeto
editorial de um veculo pode ser percebido na orientao que d s matrias
na apurao, na redao e na sua apresentao na pgina (MORAES,
1998, p.37).
Sendo assim, o projeto editorial tem necessariamente, quando bem

executado, a capacidade de transmitir ao leitor uma mensagem, ideia que a
publicao aborda ou tema que trata, podendo tambm explicitar parte de sua linha
editorial e at mesmo a ideologia da empresa/instituio atravs da linguagem
visual.
O papel do designer, acima de tudo, examinar o contedo e pensar como
ser o aspecto objetivo e subjetivo relacionado sua mensagem. Um projeto
editorial construdo atravs de um conjunto de regras bsicas, utilizando um
diagrama (grid) um grupo de tipos de caracteres (letras, nmeros e sinais) para
apoio do processo de produo (LESLIE, 2003).
determinante em sua composio que se leve em considerao a leitura
estendida, maior que oito ou doze pginas focando a reduo de problemas por
esta causados, a partir de ajustes de tipografia, e escolha de estilos ou padres
especficos para cada entrada textual, reforando a diferenciao entre textos pelo
leitor, buscando facilitar a leitura, de forma que esta seja legvel e confortvel. Esta
18
ainda deve ser vvida o suficiente para manter o interesse de leitura, ao longo de
muitas pginas, de forma que as pginas e sees sejam estruturadas para
acomodar uma variedade de contedos, integrando imagens com a tipografia a fim
de atingir um formato que construa a comunicao da publicao como um todo.
Aqui foram considerados aspectos bsicos para o entendimento dos
requisitos para um projeto editorial, evidenciando a importncia de um projeto grfico
que leve em considerao as especificidades de cada tipo de publicao, mas que
sobretudo transmita as informaes contidas no texto; e esse o trabalho do
designer. Para maior aprofundamento dos princpios relacionados a essa rea
recomenda-se a leitura de u a on es n Work ook A real world design
guide, de Timothy Samara, e Edio e Design de Jan V. White, que serviram de
base para este projeto.
Ao que se segue, ser considerado principalmente o design de revistas, no
qual existe uma maior variao de elementos dentro de um conjunto de publicaes.
Uma revista costuma seguir uma hierarquia de importncia de matrias,
diferentemente dos jornais seu nmero de pginas e estrutura/grid so flexveis,
porm os princpios continuam os mesmos.
2.2 DESIGN DE REVISTAS
O projeto grfico de revistas um dos de maior destaque dentro do campo

de publicaes, e possivelmente o de maior versatilidade. Revistas so publicaes
peridicas, apresentadas com um mesmo ttulo, porm com diferentes contedos a
cada edio, normalmente disponibilizadas em intervalos regulares de tempo
(Oxford Dictionary, 2014). Uma revista um veculo de comunicao, mas no se
limita a isso, tambm uma marca, uma empresa, uma prestadora de servios,
podendo ser definida como uma mistura entre jornalismo e entretenimento
(SCALZO, 2004, p.11 e WHITE, 1982).
e a ordo o ar osa ( 996 . 9) re s a u e u o de assa ue
se situa entre o livro e o jornal; menos efmera que o jornal e menos permanente
ue o ro. A re s a des na-se a pblicos especficos, podendo assim buscar o
19
aprofundamento de assuntos de interesse deste mesmo pblico novamente, mais

que os jornais, e menos que os livros.
O projeto grfico de uma revista assemelha-se ao jornal ao trazer contedos
estruturados em formas de matrias, mas com maior planejamento, e dependendo
do contedo abordado, de modo a trazer uma mensagem direcionada que busca
criar um vnculo com o leitor, no informando apenas acontecimentos, mas sim,
trazendo uma vasta gama de contedos. No tratam mais simplesmente de
reportagens ou entretenimento, mas sim englobam aspectos culturais, ao que
Scalzo, diz:
(...) cobrem funes culturais mais complexas que a simples transmisso de

notcias. Entretm, trazem anlise, reflexo, concentrao e experincia de
leitura [...]. Revista une e funde entretenimento, educao, servio e
interpretao dos acontecimentos. Possui menos informao no sentido
ss o (as no as uen es) e a s n or ao essoa (a ue a ue a
ajudar o leitor em seu cotidiano, em sua vida prtica) (SCALZO, 2004, p.
13).
Scalzo ainda descreve as funes estticas e culturais que determinam o

projeto e identidade de uma revista, tendo em vista principalmente a ligao com o
pblico alvo, sendo este o fator determinante deste tipo de publicao:
revista tambm um encontro entre um editor e um leitor, um contato que
se estabelece, um fio invisvel que une um grupo de pessoas e, nesse
sentido, ajuda a construir identidade, ou seja, cria identificaes, d
sensao de pertencer a um determinado grupo. (...) No toa que
leitores gostam de andar abraados s suas revistas ou de andar com
elas mostra para que todos vejam que eles pertencem a este ou quele
grupo. Por isso, no se pode nunca esquecer: quem define o que uma
revista, antes de tudo, o seu leitor (SCALZO, 2004, p. 12).
Revistas, como j mencionado, so um dos dois principais grupos de

peridicos, seu formato se diferencia das demais publicaes deste segmento
(jornais e catlogos), e isto influencia na maneira que o contedo apresentado:
estes necessitam de um projeto que possibilite a leitura sistemtica, e que ao
mesmo tempo seja acrescentado dinamismo a esta experincia. Um bom projeto
grfico faz toda a diferena para o sucesso de uma revista, ao que o leitor costuma
o e onar u u o ue e agrade; ou seja, para se garantir no mercado como j
citado anteriormente por Scalzo a publicao deve buscar uma identificao com o
pblico alvo.
A linha editorial das revistas permite maior tempo para o planejamento de
textos e matrias, e como suas informaes no tendem a ser inditas, no exato
20
momento em que esto acontecendo so mais explicativas, permitindo um layout

melhor trabalhado.
Algumas revistas se atm a uma editorao diferenciada na qual cada
matria normalmente possui um layout temtico, relacionando ornamentos,
ilustraes, caixas de diagramao, etc., ao referido tema; com o intuito de criar a
melhor imerso/conexo possvel com o leitor pode-se utilizar como exemplo
nomes como Super Interessante, Mundo Estranho, Revista Recreio, dentre outras
linhas temticas.
Gabriel Garcia Mrquez (1996) o autor de uma frase que se encaixa
perfeitamente no contedo de re s as (...) a e or no a ne se re a ue se
d r e ro as u as e es a ue se d e or. eren e dos ornais, que
possuem uma linguagem factual e noticiria, as revistas buscam o aprofundamento
de contedo, tomando para si um papel na complementao da educao.
Os leitores desse meio se mostram interessados mais na informao correta
do que no ineditismo, a segmentao facilita a identificao com o pblico, que tira
maior proveito do servio prestado. Revista une e funde entretenimento, educao,
servio e interpretao de acontecimentos (SCALZO, 2004).
Sendo assim, seu contedo acaba por distanciar-se do noticirio, buscando
caminhos alternativos, nos quais desenvolvem sua prpria funo e linguagem,
sempre mantendo a relao direta com o leitor que comea seu acesso a
informao de uma revista atravs do manuseio, folheando antes de ler: atravs
deste contato hbil e visual que so desencadeados diferentes nveis de leitura
(BARBOSA, 1996). O apelo grfico essencial para o surgimento dessa conexo/
seleo.
A disseminao de informaes por parte de uma revista no se limita ao
elemento textual, so os demais elementos presentes no projeto editorial que trazem
mais peso na transmisso da mensagem. O texto em si no prenderia a ateno do
e or se a s ar os osse des ons derados. O as e o r o que
despertar, ou no, o interesse do leitor.
White (2005) define que o design de uma revista no se trata de arte,
puramente comunicao, informao, dispostas de maneira atrativa e tornando-se
de mais fcil leitura. Tanto designers quanto jornalistas devem estar preocupados
com a melhor maneira de contar a histria, de forma a torn-la mais legvel e
atrativa, mas sem perder a comunicao da mensagem e contedo.
21
A linguagem grfica, formada pelos diversos elementos presentes no

projeto, como tipografia, cores, diagramao entre outros, determinante na
definio da identidade visual a ser seguida, que tambm se relaciona diretamente
ao leitor, afinal,
como tudo numa revista, o leitor, tambm, quem vai determinar o tipo de
linguagem grfica a ser utilizada pela publicao. No d para imaginar uma
revista de surf diagramada como uma semanal de informao, ou vice-
versa. o universo dos valores e de interesses dos leitores que vai definir a
tipologia, o corpo do texto, a entrelinha, a largura das colunas, as cores, o
tipo de imagem e a forma como tudo isto ser disposto na pgina. Por isso
o projeto grfico tem que estar inserido num editorial mais amplo (SCALZO
2004, p. 67).
Dentro dos elementos do projeto grfico, a capa acaba sendo um dos

principais se no o determinante de uma publicao deste gnero. Ela tem a
funo de atrair o leitor, destacando-se do concorrente, e ao mesmo tempo
transmitir o contedo editorial, sem grandes revelaes. O posicionamento da
revista e sua identidade se tornam marcantes com uma capa bem executada.
O sumrio deve servir como base de explorao do contedo, auxiliando o
leitor, trazendo destaques para os principais focos do contedo; deve acima de tudo
apresentar-se de forma clara a fim de ser uma ferramenta de navegao.
O design da pgina fundamental para a qualidade da recepo da
informao. Projetos editoriais so um sistema de informaes que deve manter
uma unidade. Contam com famlias de vrias fontes que tm a funo de determinar
nveis hierrquicos de informaes, e estas tambm tm a funo de passar uma
mensagem atravs de seu estilo, mais que a linguagem verbal em si, sendo a
escolha do tipo um passo importante no projeto. A tipografia sustenta o design de
uma publicao editorial.
Mesmo o texto sendo de extrema importncia na sustentao do peridico,
uma pesquisa do Poynter Institute citada por Moraes (1998), ao investigar o fluxo de
processamento dos elementos da pgina qual a ordem dos elementos vistos pelos
leitores indicou que o trabalho de arte ilustraes e infogrficos era percebido
pela maioria dos leitores (80%), seguidos pelas fotografias (75%) e os ttulos (56%).
O texto aparece com apenas 25%, em stimo lugar.
Sendo assim, pode-se concluir que, apesar do pensamento de que uma
revista transmite o contedo a partir de um texto, os demais elementos presentes no
22
projeto grfico so os que transmitem a mensagem de maneira mais rpida e

prendem a ateno do leitor, desencadeando o interesse pelo texto.
2.3 DA PUBLICAO IMPRESSA DIGITAL
O contnuo aumento de publicaes no meio digital cresce junto a novas

interpretaes da apresentao das mesmas e, consecutivamente, problemas
surgem ao longo desta evoluo, principalmente considerando-se o design da
su er e e de n er a e (K RR 986) ao ue d res e o a resen ao des es
ao pblico considerando-se as possibilidades das novas mdias.
As mudanas criam problemas tanto para desenvolvedores quanto para
usurios das novas mdias. Os problemas desencadeiam-se principalmente devido
forma fsica dos materiais eletrnicos, que exige uma interao diferente da proposta
ttil do material impresso (KERR, 1986).
A partir do momento em que computadores pessoais, programas de
editorao eletrnica e impressoras comearam a surgir e se popularizar em
meados de 1980, ficou claro para profissionais da rea que o design editorial
passaria por uma revoluo (DUARTE, 2010). Isso acarretou um novo perfil de
profissional na rea, passando do modo artesanal ao digital com uma velocidade
espantosa.
Anteriormente disponibilizao online, nos anos 90 muitas revistas
comeam a ser baseadas em CD-Roms e cover mounts (suporte de armazenamento
que contm software dia audiovisual e outros produtos) que faziam parte de um
jornal ou revista.
Inicialmente, quando as revistas passaram a ter seus contedos
disponibilizados online, havia grandes limitaes relacionadas velocidade de
conexo dos usurios. Na poca, ainda era incomum formas mais rpidas de acesso
do que os modens dial-up1que chegavam a 56kbps2, portanto as matrias presentes
e re s as o o a Ve a era a enas os ada e seus sites em pginas
_____________
1
Dispositivo eletrnico que utiliza a linha telefnica para se conectar a internet.
2
Quilobit por segundo, unidade utilizada para medir o volume de dados em transmisses, seja entre
computadores ou outros dispositivos.
23
normais, que no contavam com nenhuma diagramao especial ou fotos maiores

do que a largura do espao destinado a textos no site. Tais matrias podiam ser
acessadas apenas por assinantes da revista que se cadastrassem no site.
Quando o acesso internet passou a ser mais comum, via banda larga,
comearam a surgir mais opes para a visualizao de revistas no formato digital,
uma delas sendo o download3 de PDF's (Portable Document Format) de revistas que
eram oferecidas gratuitamente.
Alguns desses pdf's eram diagramados como revistas impressas e outros
tinham sua aparncia bastante prxima a documentos criados em editores de texto.
Nessa fase tambm apareceram os primeiros flipbooks digitais, formato de revista ou
livro eletrnico que exibe sequncias de imagens simulando o folheio de
revistas/livros aproximando o leitor da e er n a rea . Neles as revistas eram
apresentadas com diagramao igual a seus exemplares impressos em uma
interface na qual o usurio poderia mudar de pgina utilizando setas navegacionais
posicionadas em uma barra na parte inferior da tela.
Os primeiros flipbooks digitais no ofereciam a funcionalidade zoom
(aumento do tamanho da pgina), o que tornava difcil a leitura das edies que
eram exibidas em pginas duplas. Com a evoluo deste modelo, o zoom foi
implementado e ento o usurio poderia ampliar a pgina facilitando assim a leitura.
Novamente, as revistas neste formato eram disponibilizadas de forma gratuita ou
mediante comprovao de assinatura.
A princpio os flipbooks eram desenvolvidos utilizando tecnologia Java script,
linguagem baseada em scripts que combinada ao HTML 4 permite conferir mais
dinamismo e interatividade s pginas de um site (PELEGRINA, 2010), e passaram
a ser criados utilizando Flash, software utilizado para a criao de componentes
animados (grficos interativos, botes, animaes, udio e vdeo), que oferecia mais
funcionalidades e dificultava o download de contedo quando inseridos em pginas
da web. Por muito tempo foi a forma mais utilizada para se disponibilizar contedo
digital mantendo sua diagramao prxima ou idntica a das revistas impressas.
Com o passar do tempo e o surgimento de novas tecnologias que permitiam
maior flexibilidade de acesso a revistas digitais, os flipbooks (principalmente os que
_____________
3
Ato de transferir cpias de um arquivo ou programa de um site ou de uma pgina da web do servidor
para o computador do usurio. O mesmo que baixar. (PELEGRINA, 2010)
4
[Ing. Sigla para Hypertext Markup Language] Linguagem padro para criao de pginas em um site.
24
utilizavam tecnologia Flash que no suportada por dispositivos mveis da

Apple5) haviam perdido espao no mercado.
Nos ltimos anos, com uma demanda maior por contedo digital que possa
ser acessado em diversos dispositivos diferentes, os flipbooks tradicionais foram
recodificados utilizando tecnologias mais modernas e flexveis, e so novamente
utilizados por algumas empresas para desenvolver e disponibilizar contedos
digitais, como revistas e livros que possam ser acessados a partir de qualquer tipo
de dispositivo. Atualmente, algumas empresas oferecem a possibilidade de
utilizao de multimdia dentro destes.
Infelizmente, mesmo com todo o avano no desenvolvimento dessa forma
de publicao, os flipbooks digitais ainda deixam a desejar se comparados com
outras tecnologias existentes no momento, sendo considerada a melhor opo
apenas financeiramente, pelo fato de existirem scripts6 gratuitos para a criao de
revistas digitais.
Em 2001 foi lanada a plataforma ZINIO, atualmente um dos maiores
distribuidores de revistas digitais no mundo, que oferecia seu prprio e-reader (leitor
de livros e revistas digitais) que permitia a seus usurios a leituradas revistas
diretamente de seus sites, ou fizessem o download das mesmas para leitura offline.
Ainda hoje o formato Zinio no oferece qualquer tipo de interao em suas
publicaes, sendo meras transposies das verses impressas das revistas
ofertadas.
Mesmo no oferecendo interatividade, o formato bastante flexvel e
oferecido para todos os sistemas operacionais tanto em computadores quanto em
dispositivos mveis (tablets e smartphones). O formato oferece a possibilidade de
exibir apenas o texto, removendo a formatao de revista para facilitar a leitura em
telas pequenas. Mesmo com o crescimento das revistas oferecidas para tablets, com
diversos tipos de interatividade, a plataforma ainda muito utilizada e possibilita o
rpido acesso a inmeras publicaes internacionais a preo bastante acessvel.
Com o lanamento do primeiro iPad em 2010 e sua rpida popularidade,
surge um novo formato de revistas digitais desenvolvidas para funcionarem como
apps(aplicativos) nativos do sistema operacional iOS. Esse formato oferece a
_____________
5
Empresa desenvolvedora dos desktops e laptops Mac, o sistema operacional OS X, iPod,iPhone e
iPad.
6
Conjunto de comandos e parmetros escritos numa determinada linguagem de programao para a
execuo automtica de tarefas(PELEGRINA, 2010).
25
possibilidade de insero de udios, vdeos, imagens ampliveis, entre outros em

suas revistas, o que as tornam muito mais interativas e atrativas ao pblico. Embora
exista grande possibilidade de insero de contedos interativos, muitas revistas
lanadas especialmente para iPad so apenas verses nativas com contedo
idntico ao da revista impressa, sem qualquer tipo de elemento multimdia.
Novas mdias geram novas formas de leitura, e aparelhos como os tablets,
esto mudando no s a forma de consumir o contedo, mas tambm a forma de
produz-lo (DUARTE, 2010). A popularizao da internet e destes novos dispositivos,
junto ao amadurecimento das tecnologias web, levaram a alteraes na forma do
contedo, que se apresenta cada vez mais interativo, fragmentado, e acima de tudo,
acessvel - e cada vez se distanciando mais do formato impresso. Mesmo que
algumas publicaes insistam em formatos prximos mdia impressa, estas no se
mostram to eficientes quanto as pensadas desde o inicio para o formato digital.
A definio de Horie e Pluvinage (2013) sobre revistas digitais foi utilizada
como base para o desenvolvimento deste projeto, considerando a produo da
revista justamente pensada desde seu inicio para o meio digital.
Uma revista digital uma publicao peridica formatada para leitura em

tablets e outros dispositivos mveis.
Sua principal caracterstica a juno de elementos grficos e editoriais
tradicionais da mdia impressa com recursos digitais, que so os recursos
interativos, hipertextuais e multimdia. Ou seja, para que uma revista seja
realmente digital, no basta fazer um PDF esttico de uma revista impressa
e inserir em um tablet. necessrio que a revista tenha, efetivamente, uma
linguagem digital, e que reaja e responda aos toques do leitor na tela do
dispositivo de leitura (HORIE, PLUVINAGE, 2013, p.15).
Muito ainda se discute sobre conquista das mdias digitais, e se estas

levariam ao fim das publicaes impressas, tornando-as obsoletas. As publicaes
digitais, devido ao seu carter dinmico, baixo custo e simplicidade no que diz
respeito atualizao e veiculao de informaes, vem crescendo tanto em
quantidade de publicaes quanto em tecnologias para seu desenvolvimento.
26
3 ASPECTOS METODOLGICOS
Neste captulo sero apresentadas as concluses a respeito de pesquisa

realizada com pblico-alvo, que teve como objetivo determinar os dispositivos mais
utilizados pelos alunos ao realizar pesquisas a respeito de contedos voltados s
reas do curso. Sero apresentadas tambm as anlises de revistas digitais
realizadas com o intuito de gerar os requisitos necessrios realizao do projeto.
3.1 PESQUISA COM PBLICO-ALVO
A pesquisa com pblico-alvo foi realizada para obteno de dados

quantitativos e teve como objetivo principal determinar os dispositivos mais utilizados
pelos estudantes do curso de Design Grfico da Universidade Tecnolgica Federal
do Paran, na busca por informaes necessrias para realizao de atividades
acadmicas. A pesquisa tambm tinha como objetivo descobrir se os estudantes
consideravam necessrio o desenvolvimento do material de apoio proposto neste
trabalho de concluso de curso.
3.1.1 Coleta e anlise de dados
O levantamento de dados foi realizado entre 2 e 5 de outubro de 2013, por

meio de questionrio (APENDICE A) com questes fechadas apresentado a 70
alunos de diversos perodos do curso de Design Grfico da Universidade
Tecnolgica Federal do Paran. Os questionrios foram apresentados aos alunos
com ajuda de professores que os distriburam durante suas aulas. Com ele buscou-
se quantificar de forma simples os hbitos de leitura de revistas sobre design, os
meios mais utilizados para buscar por informaes relacionadas s diversas
disciplinas do curso, e por fim, os dispositivos mais utilizados para acessar esses
contedos tanto na universidade quanto em casa. Inicialmente cogitou-se a
27
realizao de nova coleta de dados para determinar os sistemas operacionais,

navegadores, resolues de tela e marcas de dispositivos mais utilizados pelos
estudantes, porm testes preliminares realizados pelas autoras levando em
considerao a codificao que seria utilizada no desenvolvimento da revista
provaram no ser necessria a realizao de nova coleta de dados, uma vez que o
funcionamento do modelo testado foi favorvel independente do dispositivo, marca
ou sistema operacional utilizado.
A pesquisa apontou que 56% dos estudantes que responderam ao
questionrio lem revistas sobre design regularmente (GRFICO 1), destes, a
maioria (72%) afirmou ler revistas com frequncia mensal, 26% l revistas
semanalmente e 2% quinzenalmente (GRFICO 2).
Realizao de leitura de revista sobre Frequncia da leitura de revista

design sobre design
26%
Semanal
44% Sim
2% Quinzenal
56% No
Mensal
72%
Grfico 1 - Realizao de leitura de revista Grfico 2 - Frequncia da leitura de revista

sobre design sobre design
Fonte: autoria prpria, 2013 Fonte: autoria prpria, 2013
Dentre os participantes da pesquisa, apenas 5% lem revistas impressas,

confirmando a grande preferncia por contedo disponibilizado de forma digital
(GRFICO 3). O formato digital disponibilizado online tambm foi apontado como o
preferido (89%) na hora de buscar por informaes voltadas a assuntos relacionados
temtica das disciplinas (GRFICO 4).
Preferncia pelo tipo de revista Preferncia sobre as fontes de

informao sobre design
5% Digital Internet
7%
Impressa Livros
4% 89%
95% Revistas
Grfico 3 - Preferncia pelo tipo de revista Grfico 4 - Preferncia sobre as fontes de

Fonte: autoria prpria, 2013 informao sobre design
Fonte: autoria prpria, 2013
28
Em relao aos dispositivos utilizados para acessar contedos digitais, a

pesquisa apontou a preferncia pelo uso de computadores (desktops, notebooks e
netbooks) tanto na universidade (46% - GRFICO 5) quanto em casa (96% -
GRFICO 6); tablets (11%) e smartphones (43%) tambm so utilizados com
frequncia ao acessar a internet em sala de aula.
Dispositivo utilizado para acessar a Dispositivo utilizado para acessar a

internet em sala de aula internet em casa
11%
43% 96%
Computador Computador
Tablet Tablet
Smartphone Smartphone
4%
46%
Grfico 5 - Dispositivo utilizado para acessar a Grfico 6 - Dispositivo utilizado para acessar a
internet em sala de aula internet em casa
Um dos objetivos do questionrio foi identificar se os alunos consideravam

necessria a existncia de material de apoio referente aos assuntos abordados em
sa a de au a ara en o de n r so re a e a orao ou no des e ro e o de revista.
Os resultados (GRFICO 7) mostram que 96% dos participantes vem a
necessidade de existncia de material de fcil acesso que possa ser utilizado como
complementao das matrias abordadas em sala. A primeira revista teria a
temtica apontada como sendo a mais pesquisada pelos alunos: com base nos
dados recolhidos (GRFICO 8), tipografia o assunto mais pesquisado (17%),
seguido de diagramao e design digital (15%).
Necessidade de material de apoio Assuntos mais procurados

especfico para o curso
17%
Tipografia
Diagramao
96% 43%
Sim
15% Design Digital
4% No
Web Design
10% Ilustrao
7% 8%
Grfico 7 - Necessidade de material de apoio Grfico 8 - Assuntos mais procurados
especfico para o curso Fonte: autoria prpria, 2013
29
O resultado da pesquisa comprovou o interesse dos alunos por material de

apoio que seja de fcil acesso e que condense informaes necessrias
realizao das atividades requisitadas para as disciplinas do curso, diante disso
decidiu-se dar incio ao desenvolvimento da revista. A pesquisa apontou, como
previsto, a preferncia pelo uso da internet e contedos digitais na busca por
informaes relacionadas s diversas reas do design, seja para a realizao de
projetos acadmicos ou no.
A partir dos dados coletados, foi possvel determinar a prefernciado uso de
cada tipo de dispositivo, como computadores so os mais utilizados, estes foram o
foco para o desenvolvimento da revista. Com base nos assuntos mais buscados
pelos estudantes, optou-se por abordar tipografia como tema da primeira revista.
3.2 ANLISE DE REVISTAS DIGITAIS
Durante o perodo de duas semanas foram analisadas cerca de 20 revistas

digitas sobre assuntos variados e publicadas em diferentes formatos, para verificar a
forma como contedos interativos eram utilizados e os pontos positivos e negativos
relacionados a facilidade de uso das revistas. A partir da anlise seriam definidas as
melhores prticas a serem utilizadas durante o desenvolvimento do projeto.
Como no foram encontradas muitas revistas digitais sobre design e a
anlise tinha como objetivo explorar diferentes plataformas de publicao, alm da
forma com que elementos grficos e textuais so diagramados, optou-se por
analisar revistas com temticas diferentes, mas que pudessem ser de interesse de
pessoas com a mesma faixa etria que o pblico-alvo da revista a ser desenvolvida,
priorizando revistas gratuitas. Foram registradas as anlises de quatro publicaes
diferentes: uma distribuda pela plataforma Zinio; duas revistas nativas para iPad e
uma desenvolvida em HTML utilizando a plataforma H5Mag.
Em relao usabilidade - atributo que avalia a facilidade de uso de
interfaces - das revistas, a anlise foi feita tendo como base os seguintes itens
presentes nas heursticas de usabilidade de Nielsen (1995, traduo livre das
autoras):
30
Relacionamento entre a interface do sistema e o mundo real: o

sistema deve falar a linguagem do usurio, com palavras, frases e
conceitos familiares ao usurio, ao invs de termos orientados ao
sistema. Segue convenes do mundo real, fazendo com que a
informao aparea em uma ordem natural e lgica.
Consistncia e padronizao: os usurios no devem ter que imaginar
se palavras, situaes ou aes diferentes significam a mesma coisa.
Siga as convenes da plataforma.
Reconhecimento ao invs de lembrana: minimize o uso da memria
do usurio tornando objetos, aes e opes visveis. O usurio no deve
ter que lembrar da informao de uma parte para a outra. Informaes
sobre o uso do sistema deve ser visvel ou fcil de acessar quando
necessrias.
Flexibilidade e eficincia de uso: no vistos por usurios novos - podem
tornar a interao mais rpida para o usurio avanado, mas a interface
deve atender a usurios com e sem experincia.
Esttica e design minimalista: as caixas de dilogo no devem conter
informaes que so irrelevantes ou raramente necessrias. Cada
informao extra em uma caixa de dilogo compete com a informao
relevante e diminiu sua visibilidade.
Ajuda e documentao: mesmo sendo melhor poder utilizar um sistema
sem documentao, pode ser necessrio disponibilizar ajuda e
documentao. Essas informaes devem ser fceis de localizar, focadas
na tarefa do usurio, listar passos a serem realizados e no ser muito
extensas.
Os elementos grficos e textuais usam a nomenclatura de acordo com as
definies presentes no trabalho de Harrower e Elman (2013, p.19):
Assinatura: apresenta o nome do escritor da matria.
Ttulo: ttulo em fonte grande o suficiente para ter contraste com o texto
corrente.
Chamada: texto que ajuda a acrescentar informao ao ttulo.
Entrettulo ou subttulo: texto utilizado para separar partes do texto
corrente.
Olho: utilizado para destacar partes do texto, geralmente citaes.
31
Legenda: informaes associadas a uma foto ou ilustrao.

Texto corrente: texto utilizado no artigo que utiliza uma tipografia padro.
Fio: linha utilizada para separar elementos em uma pgina.
Fundo ou box: caixa de cor destacada que contm imagens e textos.
Vinheta: smbolo ou rtulo utilizado para agrupar artigos em uma seo.
Rodap ou flio: bloco de informao que apresenta o nmero da
pgina, data, nome do jornal, etc.
Em relao diagramao da revista foi levado em considerao os grids
utilizados e como esses se comportam em diferentes tamanhos de tela em revistas
que oferecem suporte para mais de um dispositivo, assim como a presena ou no
de recursos de acessibilidade e como esses so utilizados. Em relao ao uso de
cores procurou-se descobrir as melhores opes para uso em revistas digitais
verificando-se a existncia de uma paleta de cores comumente utilizada por
publicaes de diversas temticas por conferir melhores resultados durante a leitura.
Para a presente anlise foram utilizados como base os seguintes
marcadores: apresentao, diagramao, tipografia, uso de imagens, grid, cores,
legibilidade e navegabilidade.
A apresentao diz respeito ao efeito esttico obtido com a combinao dos
demais itens de anlise, a primeira impresso; diagramao diz respeito
disposio dos elementos grficos dentro da pgina; tipografia diz respeito
quantidade e variedade de fontes utilizadas e como foram utilizadas no projeto; uso
de imagens diz respeito a como fotos e ilustraes so disponibilizadas ao longo dos
artigos; grid diz respeito ao formato do diagrama bsico utilizado na diagramao da
pgina, e se este se mantm fixo durante toda a publicao; e sobre a cor, foi
observado se essa utilizada como um sistema ou elemento esttico.
Legibilidade diz respeito aqui aos dois termos vindos do ingls legibility e
readability (legibilidade junto leiturabilidade), o primeiro referindo-se s qualidades
que tornam os tipos claros e reconhecveis para serem lidos, enquanto readability
diz respeito qualidade do conforto visual, facilidade de ler e compreender o texto.
(PEREIRA, 2007).
Navegabilidade, de uma forma geral
d res e o or a o o se ode e orar a o dade na rede e nos
s s e as er d os de ane ra ue o n era or ou usu r o ossa
es a e e er seus r r os a n os de us a de e ura e de n erao.
a a oss dade de rans ar e r os e os n s e links onde
n eros ra e os d eren ados e re aes de n or ao e de o un ao
32
conseguem se complementar e se ampliar o tempo todo (MOURA et

BENDITO, PADOVANI e SPINILLO, 2009, p. 182).
3.2.1 An se da re s a A erna e ress
A Alternative Press uma revista mensal sobre msica alternativa, voltada

ao pblico jovem, que contm entrevistas, artigos e recomendaes de lbuns. Para
anlise foi utilizada a revista de nmero 300 distribuda pela plataforma Zinio.
A revista apresenta sua marca na parte superior com alinhamento
centralizado. A chamada principal est no lado inferior esquerdo em letras
maisculas no serifadas sobrepondo a imagem da capa. As chamadas secundrias
so posicionadas acima da marca.
O sumrio utiliza diagramao diferente em cada edio para realar as
principais matrias. Abaixo dessas matrias principais, os itens so agrupados em
sees, onde so mostrados seus destaques. O editorial geralmente divide espao
com propagandas, que so bastante comuns na revistas e so compostas por
marcas de roupas, tnis, instrumentos musicais e shows, geralmente apresentadas
em pginas inteiras (figura 1).
Figura 1- Exemplo de capa e sumrio da revista Alternative Press

Fonte: Revista Alternative Press, 2014.
A tipografia utilizada nos ttulos, subttulos e chamadas dos artigos principais

bastante variada, utilizando fontes e cores presentes nos CDs e websites das
33
bandas. As sees, cores, tipografia e o uso boxes nos artigos so padronizados de

acordo com a seo, havendo variao apenas no tamanho do texto corrente, que
utiliza tipografia no serifada na cor preta, e os subttulos so apresentados em
negrito. Apenas os artigos principais apresentam olho, posicionados dentro de boxes
coloridos ou entre dois fios e utilizam tipografia variada. As assinaturas so
apresentadas alinhadas direita com tipografia no serifada e localizao variada.
Quando so utilizadas imagens encomendadas pela prpria revista, os crditos
aparecem abaixo da assinatura (figura 2).
Boxes vermelhos so utilizados nas vinhetas (com texto em tipografia slab
serif7na cor branca) e para destacar informaes antes do texto corrente. As letras
a a are e e o ra a slab serif vermelha ao final dos artigos principais.
Figura 2 - Exemplo de uso de ttulos e vinheta da revista Alternative Press

A revista apresenta fotos em tamanhos e alinhamentos variados. Artigos

principais e especiais fotogrficos comumente utilizam a pgina inteira para exibir
uma s imagem. Nas sees h variao no tamanho vertical das imagens, sendo
reduzido de acordo com a quantidade de texto corrente.
A revista apresenta grid vertical, porm os artigos principais no seguem
templates 8 padronizados e os artigos comumente utilizam texto em duas colunas
para facilitar a leitura. H um grande nmero de variaes nos templates utilizados
nas sees fixas, utilizados para adaptar-se ao contedo como pode ser visto na
_____________
7
Tipo de fonte serifada que evoluiu do estilo moderno que possui serifas quadradas e maiores que as
presentes em estilos anteriores.
8
Documento que contm apenas a configurao visual e instrues de uso que serve como modelo
para facilitar a criao de pginas de revistas ou para a web.
34
figura 3. A tipografia mantida, sendo alterado apenas o nmero de colunas nos

templates. A enas a seo a essential albuns no a resen a ua uer o de
variao em seu template (duas colunas verticais e seis divises horizontais).
As cores predominantes nas edies so o vermelho, preto, cinza e branco.
As cores tendem a sofrer alteraes somente nos artigos principais.
Figura 3 - Exemplo de uso de fotos e templates da revista Alternative Press

As revistas digitais disponibilizadas pela plataforma Zinio so transposies

de suas verses impressas e apresentam boa legibilidade quando visualizada em
desktops e notebooks. Em tablets e smartphones, o texto corrente torna-se pequeno
sendo necessrio optar por utilizar a ferramenta zoom ou exibir apenas o texto em
tamanho apropriado para a leitura em telas menores.
A navegabilidade bastante simples, adaptando-se s necessidades
especficas do dispositivo escolhido para leitura. Por no conter interatividade alm
de hiperlinks 9 no sumrio e artigos, seu download bastante rpido em uma
conexo banda larga.
3.2.2 Anlise da revista Aux
Revista mensal sobre msica com pblico-alvo bastante variado, uma vez
que conta com artigos, entrevistas e contedos voltados a vrios estilos musicais,
_____________
9
Palavra, frase ou imagem que ao ser clicada permite acesso a outra pgina ou local na pgina atual.
35
no limitando-se a estilos e faixas etrias especficas. Para a anlise foi utilizada a

edio nmero 17 para iPad (download para iPad: http://bit.ly/1fPOv6y ou Android:
http://bit.ly/1lJJjXU).
A capa apresenta uma animao onde os elementos aparecem de forma
consecutiva. O nome da revista est centralizado horizontalmente no topo, em letras
brancas e utilizando tipografia prpria. A chamada principal utiliza tipografia sem
serifa e sobrepe imagem da capa, chamadas secundrias utilizam tipografia no
serifada em caixa alta (figura 4).
O contedo do sumrio dividido em cinco colunas contendo miniatura, tipo
e assunto do artigo em tipografia no serifada em caixa alta e cor preta, as
miniaturas contm links para o artigo desejado. Embora existam sees, os artigos
no so agrupados de forma sequencial dentro das mesmas. A revista apresenta
anncios publicitrios em pgina cheia.
Figura 4 - Exemplo de capa, instrues de uso e sumrio da revista Aux

Fonte: Revista Aux, 2014.
Os artigos apresentam ttulos de forma variada, estando relacionada ao

tema dos mesmos. O texto corrente em tipografia serifada na cor preta com
alinhamento justificado na grande maioria dos artigos, os tamanhos utilizados
promovem boa legibilidade.
As assinaturas aparecem abaixo dos ttulos em tipografia no serifada em
itlico, no existem legendas ou crditos associados s imagens. O uso de olho s
ocorre no artigo principal, utiliza a mesma tipografia do ttulo e est localizado em
uma coluna no lado esquerdo da tela, neste caso, o texto corrente aparece
deslocado para a direita (figura 5).
36
Figura 5 - Exemplo de ttulos e uso de olho em artigos da revista Aux

A revista utiliza um fio vertical a partir do 3 painel de artigos (apresentado

na figura 6), com o nome da seo e banda em tipografia no serifada preta em
caixa alta. H a presena de boxes coloridos para destacar o nome da banda e para
dar des a ue a u os e ar es de ar os. Ao na dos ar os u a e ra a na
mesma tipografia utilizada na marca da revista em cor preta.
As vinhetas esto em uma barra horizontal cinza contendo a marca da
revista, o nome da seo e o nome da banda mencionada no artigo em tipografia
no serifada em caixa alta. O flio utilizado apenas em artigos que contm mais de
um painel, para indicar a existncia de mais contedo.
As fotos ocupam a largura da coluna ou combinao de colunas de texto
onde esto localizadas, em alguns casos ocupam a tela inteira.
A revista apresenta grid vertical. O grid bsico apresenta duas colunas, uma
servindo como margem na maioria dos artigos e uma coluna mais larga para o texto
corrente, que por sua vez apresentado em uma ou duas colunas. Algumas sees
possuem layouts padronizados utilizados em todas as edies.
Figura 6 - Exemplo vinheta, box, folio, uso de fotos e colunas da revista Aux
37
Em relao interatividade, a revista apresenta slider de fotos 10 (sem a

possibilidade de visualizao em tela cheia), udios e vdeos, para que os dois
ltimos funcionem necessrio estar conectado internet, o que faz com que o
tempo de download da revista seja rpido para uma revista nativa. No so
oferecidas opes de acessibilidade e a visualizao da revista s oferecida na
posio retrato.
A interface da revista bastante semelhante s demais revistas publicadas
para iPad no que diz respeito navegao, tornando sua utilizao bastante intuitiva
para os leitores. No incio h uma pgina de instrues sobre sua utilizao.
3.2.3. Anlise da revistaZupi
A revista Zupi uma publicao bimensal sobre design disponibilizada em

verso impressa e formato nativo para iPad cujo pblico-alvo so jovens que se
interessam por design, sendo eles estudantes da rea ou no. Para a anlise foi
utilizada a edio nmero 37 (download para iPad: http://bit.ly/1BdAhG6).
A capa apresenta, juntamente com uma ilustrao, o nome da revista que
aparece de forma e posicionamento diferente em cada edio. No canto inferior da
tela h uma indicao para mudar a orientao do tablet e visualizar uma verso
alternativa da capa. Essa edio no apresenta chamadas.
A revista no apresenta sumrio ou marcao e indicao da pgina do
editorial, h apenas um background com um cone indicando que o tablet deve ser
girado, e ento a indicao do editorial. No existem vinhetas ou qualquer tipo de
indicao de sees. No h publicidade.
O texto corrente apresentado em uma coluna com tipografia no serifada
na cor cinza e com alinhamento justificado. O texto est sobre um box branco. A
fonte escolhida no apresenta boa definio em tela, causando aspecto borrado em
algumas palavras.
Com exceo de artigos que apresentam tipografia diferenciada em seus
ttulos, eles so apresentados em box branco e tipografia no serifada em caixa alta.
_____________
10
Coleo de imagens que pode ser visualizada de forma sequencial automtica ou manipulada pelo
leitor para exibir apenas as imagens desejadas.
38
No h chamadas ou subttulos. Em entrevistas as perguntas esto em negrito.

Quando h olho, colocado do lado esquerdo da tela e mistura letras maisculas e
minsculas (figura 7).
Figura 7 - Exemplo de capa, ttulo, texto corrente da revista Zupi

Fonte: Revista Zupi, 2014.
Crditos referentes a ilustraes e fotos, quando em pginas com trabalhos

de mais de um autor, aparecem em painel preto com transparncia que sobrepe o
trabalho e utiliza letras brancas em estilo caligrfico. Um balo preto utilizado
como item de finalizao de matria (figura 8).
A revista apresenta grande nmero de ilustraes e fotos, que na maioria
das vezes ocupam a totalidade do painel, tambm so utilizadas miniaturas que ao
serem clicadas, mostram a foto em tamanho maior.
A revista apresenta grid vertical e geralmente utiliza duas colunas para
estruturar a pgina. Alm dos artigos especialmente diagramados, so utilizados trs
templates: para artigos que consistem em imagens utilizando a totalidade do painel;
para artigos que alm de imagens possuem box para o texto corrido; e os que
utilizam cone para indicar que o tablet deve ser girado para mostrar a ilustrao
completa. A paleta de cores utilizada consiste em preto, branco, cinza e verde.
39
Figura 8 - Exemplo de crditos e uso de imagens na revista Zupi

Fonte: Revista Zupi, 2014.
A revista apresenta udio e vdeo alm de imagens que podem ser

ampliadas. Os udios e vdeos so baixados juntamente com a revista fazendo com
que seu tamanho varie entre 320-600mb. No so oferecidas opes de
acessibilidade ou a possibilidade de ampliao do texto utilizando zoom.
Existem pginas exibidas na posio retrato e paisagem, porm essa
posio imposta pela revista. A navegao bastante intuitiva e simples,
assemelhando-se a outras revistas nativas. Embora a revista oferea instrues de
uso, no h indicao de que se trate de uma pgina de instrues, sendo
necessrio puxar um painel e girar o tablet para descobrir o contedo da pgina.
3.2.4 Anlise da revistaBIKBOK
A revista sobre moda, criada pela marca BIK BOK, no possuem uma
periodicidade evidente: so divididas em temas voltados aos destaques das
colees lanadas. Foi desenvolvida em HTML5 para permitir seu funcionamento
em desktop, tablets e smartphones. A re s a ana sada o a The party issue(revista
online: http://bit.ly/1bMmE7b).
A capa apresenta em destaque o tema, data e chamadas da edio. O
nome da revista aparece no canto superior esquerdo em grandes letras brancas em
tipografia no serifada e em caixa alta. A chamada principal, em tipografia serifada
sobrepe a foto de capa e as chamadas secundrias utilizam tipografia variada.
40
O sumrio ocupa a rea superior direita e apresenta apena uma lista, com
links para direcionar o leitor ao contedo desejado. Juntamente com o sumrio est
o editorial que tambm apresenta fotos e links para o site de vendas dos produtos.
A revista apresenta apenas uma pgina de publicidade (figura 9).
Figura 9 - Exemplo de capa e sumrio da revista BIK BOK

Fonte: Revista BikBok, 2014.
H bastante variao no tamanho, alinhamento e tipografia utilizada nos

ttulos e chamadas das matrias e em alguns casos eles aparecem dentro de boxes.
A maioria dos artigos apresenta pouco texto, em tipografia serifada ou no. Em
artigos mais longos, o olho (em tipografia caligrfica), apresentado entre dois fios.
Em entrevistas a assinatura do autor est presente abaixo do ttulo da matria em
fonte no serifada. Nos demais artigos os crditos so apresentados em uma lista
prxima s margens externas da pgina e em tipografia no serifada (figura 10).
H um grande nmero de fotos, apresentadas em tamanhos diversos, so
diagramadas de forma a ocupar a pgina inteira ou apenas uma parte, com bastante
uso de sobreposio de imagens.
Figura 10 - Exemplos de tipografia utilizada em ttulos na revista BIK BOK

41
A diversidade da diagramao sugere que no houve a utilizao de grid ou

templates, e que seu contedo foi aplicado de forma a se ajustar ao tamanho da
pgina (figura 11). Apenas em entrevistas possvel perceber com maior definio o
uso de grid com a utilizao de colunas e fotos de forma mais organizada.
Figura 11 - Exemplos de diagramao das pginas da revista BIK BOK

A revista funciona bem no desktop, contanto que o leitor possua um monitor

com resoluo mnima necessria para visualiz-la, caso contrrio a barra de
navegao (que de fcil uso e possui cones para mostrar o sumrio e demais
edies da revista) passa a sobrepor suas pginas.
A leitura e uso nos demais dispositivos bastante falha, principalmente ao
considerar o slogan (perfect online magazines for all devices11) utilizado pelo site
que a desenvolve. Em tablets a visualizao s permitida na posio paisagem e
a barra de navegao fica parcialmente escondida, a imagem perde definio por
ser apenas redimensionada de seu tamanho original, tornando o texto no ntido.
Em smartphones impossvel ler o texto presente nas imagens. Os links dos
produtos presentes nas pginas aparecem abaixo da imagem sem um tipo de
diagramao definida (figura 12).
Figura 12 - Exemplos devisualizao da revsita BIK BOK emsmartphones

Fonte: Revista BikBok.
_____________
11
revistas online perfeitas para todos dispositivos. raduo re das au oras.
42
A revista no apresenta qualquer tipo de ferramenta de acessibilidade e com

exceo de links que direcionam para o site de venda do produto, no h qualquer
tipo de interatividade.
3.2.5 Resultado da anlise
A partir da anlise das revistas foi possvel verificar a grande variedade de

formas com que os elementos grficos e textuais so apresentados em diferentes
publicaes, delimitando-se assim o que funcionaria melhor no desenvolvimento do
modelo da revista e o que no poderia ser utilizado. A anlise tambm teve como
objetivo verificar como diferentes formatos de publicao utilizam elementos
interativos em seus artigos, mas infelizmente revistas no nativas para iPad
oferecem pouqussimos recursos interativos, sendo resumidos a hiperlinks e
popups 12 (tambm conhecidos como lightboxes e overlays) para compra de
produtos.
De modo geral as revistas funcionam bem no que se refere usabilidade,
utilizam recursos e cones semelhantes fazendo com que a navegabilidade seja
bastante simples, sem haver a necessidade de se reaprender a utilizar cada revista
publicada em formatos e dispositivos diferentes, salvo pequenas modificaes
relacionadas a dispositivos especficos, como a substituio das setas utilizadas
para navegar entre os artigos por eventos touch (swipe13).
A adaptabilidade funciona bem nas revistas publicadas utilizando a
plataforma Zinio, uma vez que alm de ter publicaes disponveis para leitura em
computadores, tablets, e smartphones, seus componentes so adaptados para
funcionar de acordo com as necessidades do dispositivo, contando com ferramentas
de acessibilidade para leitura em telas menores. J a revista publicada pela
plataforma H5Mag (BIK BOK), que diz desenvolver revistas para qualquer tipo de
dispositivo, deixam bastante a desejar quando considera-se sua adaptabilidade uma
vez que a revista s funciona corretamente quando visualizada em computadores
_____________
12
Janelas que contm elementos extra que abre sobre o contedo da pgina web atual ao clicar em
um hiperlink.
13
Ato de mover o dedo de um lado para o outro de uma tela de dispositivo sensvel ao toque para
navegar entre artigos de uma revista digital.
43
que atendam a resoluo de tela mnima necessria para a visualizao de todo o

contedo vertical da revista, caso contrrio, parte dele fica escondido sob a barra
que contm os cones de navegao e como mencionado anteriormente, sua
visualizao em tablets e smartphones bastante problemtica.
Com exceo novamente da revista BIK BOK, todas as publicaes
oferecem documentao com instrues de uso e seus elementos interativos.
Comumente nas revistas para iPad as instrues aparecem logo aps a capa e
contam com cones explicativos e algumas oferecem vdeos mostrando o
funcionamento da revista. Na revista Zupi essas informaes so confusas para
localizar, uma vez que no h indicao de onde esto as instrues e necessrio
deslizar uma aba e girar o tablet pra chegar at elas. A plataforma Znio oferece
ajuda diretamente em seu software de leitura, no sendo necessrio que cada
revista informe sobre sua utilizao.
A partir da anlise fica claro que para o desenvolvimento de uma revista
digital necessrio que vrios fatores tcnicos sejam levados em considerao
antes do incio do desenvolvimento da parte grfica da revista, uma vez que
preciso delimitar as funcionalidades necessrias ao bom funcionamento da mesma,
principalmente em projetos multiplataforma, para ento poder definir-se quais as
melhores prticas e as possibilidades oferecidas pela plataforma a ser utilizada,
antes de poder se pensar em como o contedo ser apresentado graficamente.
44
4 PROJETO GRFICO DA REVISTA EM BRANCO
A partir das anlises apresentadas no captulo anterior, foram definidas as

d re r es ara o ro e o r o da re s a ran o, cujo significado do nome e
marca grfica so apresentados no decorrer do captulo. Primeiramente, foram
estabelecidos os requisitos do projeto para uma viso mais completa das
necessidades da publicao, elaborou-se um plano editorial visando definir o
posicionamento da revista em relao ao mercado e ao leitor, por fim foram
referenciado os aspectos grficos a serem seguidos para o desenvolvimento do
modelo da revista.
4.1 REQUISITOS DO PROJETO
Em relao interface de navegao, a revista procurou atender s

heursticas de usabilidade de Nielsen citadas na pgina 31 para que a interface
criada seja de fcil compreenso e uso, tanto para usurios novos quanto para os
que j esto familiarizados com a mesma, afinal no adianta desenvolver uma
interface atrativa se esta no for intuitiva, simples e fcil de usar. Alm de ser
desenvolvida tendo isso em mente, necessrio possibilitar ao leitor navegar pela
revista de forma no linear e sem a imposio de regras de leitura ou posio
especfica do dispositivo para visualizao do contedo.
Considerando a adaptabilidade, o projeto visou desenvolver uma revista que
possa ser acessada de forma otimizada no navegador do dispositivo escolhido pelo
usurio. O uso de design responsivo - abordagem em que o layout da pgina deve
reagir ao ambiente no qual acessado, levando em considerao o tamanho de
tela, plataforma e orientao do dispositivo - permitir que a revista se adapte ao
tamanho da tela utilizada, sendo considerada sua visualizao em desktops,
notebooks, tablets e smartphones. Para permitir uma boa visualizao e
leiturabilidade em telas menores, o contedo dos artigos poder ser reposicionado
ou alterado quando necessrio. Considerando o tempo de download dos elementos
45
grficos de cada artigo, sero carregadas imagens adaptadas ao tamanho de tela do

dispositivo.
Os artigos presentes na publicao tero seus layouts e templates
desenvolvidos partindo das necessidades especficas dos contedos abordados,
no sendo adaptados a um template padronizado criado para ser utilizado em toda a
revista. Partindo das necessidades de cada artigo, sero utilizados os elementos
interativos que melhor se adaptarem ao contedo. Prev-se o uso de galerias de
fotos, animaes e vdeo como os principais elementos interativos presentes na
publicao.
O carregamento de artigos e o uso de elementos interativos foram feitos na
forma on-demand14. Uma vez que a leitura da revista pode ser feita de forma no
linear, considera-se importante que no seja necessrio fazer o download de todos
os artigos e interatividades presentes em cada edio para que o usurio possa ler
o(s) artigo(s) de seu interesse. Os elementos interativos presentes nos artigos
tambm sero carregados apenas quando e se o usurio desejar. De acordo com
Nielsen (2000, p. 42), para que o usurio no se desinteresse por um site, neste
caso uma revista, o tempo de download de uma pgina no deve ultrapassar 10
segundos. Seguir o modelo on-demand possibilitou o carregamento dentro ou o mais
prximo possvel deste intervalo. Ao posicionar elementos interativos, reas muito
prximas aos elementos de navegao foram evitadas para que no houvesse o
acionamento acidental de qualquer tipo de interatividade no desejada ou a
mudana para outros artigos.
4.2 PLANO EDITORIAL
Scalzo (2004 p.61) defende que "uma boa revista comea com um bom
plano editorial e uma misso bem definida - um guia que vai ajud-lo a posicionar-se
objetivamente em relao ao leitor e ao mercado." Em um trabalho como este, no
qual o foco o projeto grfico, o plano editorial serve de referncia para o
desenvolvimento da forma grfica da publicao.
_____________
14
Modelo de distribuio de contedo no qual os recursos so apresentados apenas quando so
solicitados, no caso da revista, quanto o usurio deseja visualizar determinados recursos.
46
A funo do plano editorial alimentar o plano de negcios e

consequentemente representar a viso da redao sobre a publicao e sua relao
com o leitor, estabelecendo os objetivos e a frmula editorial; e ao mesmo tempo
ajuda, tambm, a manter o foco no leitor (SCALZO, 2004) evitando que as
necessidades destes no sejam supridas. Aqui ser definido um breve plano
editorial, definindo algumas decises julgadas como parte determinante para o
desenvolvimento do projeto grfico.
Portanto como j citado anteriormente, o foco deste projeto so os
estudantes de design, e a segmentao se d aos assuntos tratados em matrias
bsicas do curso; a revista deve ser voltada a estes de uma forma clara, trazendo
contedo educativo sobre o tema abordado - aqui no caso tipografia - mas de forma
a trazer tambm entretenimento; uma vez que por mais que revistas tenham
recebido uma vocao noticiria, a educao e entretenimento so os dois caminhos
primordiais deste tipo de publicao. (SCALZO, 2004).
O objetivo do projeto permitir um aprofundamento terico, porm, os
contedos apresentados em relao ao tema abordado em cada edio no
substituem a leitura de um livro especfico sobre o assunto, eles tem o objetivo de
situar o aluno sobre conhecimentos bsicos e imprescindveis s reas do curso.
Dentro da publicao tambm sero feitos direcionamentos para referncias
bibliogrficas que tratam com maior abrangncia cada assunto. De maneira geral, a
sso da re s a ser ser r de a o o ao es udan e de design.
Cada edio da revista, que abordar um tema diferente, ser dividida em
sees que apresentam diferentes tipos de contedo. A seo principal est voltada
aos artigos com teor educativo, esses no sero apresentados como fazendo parte
de uma seo delimitada, apresentando apenas o ttulo dos artigos. As demais
sees da revista so: dicas, curiosidades, tutoriais, entrevistas, recomendaes (de
sites e livros), inspiracional e mostra de trabalhos dos leitores. Com excesso da
seo principal e a de recomedaes, a presena das demais nas edies das
revistas opcional, uma vez que dependendo da temtica abordada pela edio no
ser possvel desenvolver artigos para determinadas sees. Considerando um
projeto real, prev-se que cada edio conter ente 15 e 20 artigos, sendo
distribuidos entre as sees da forma que melhor se adaptarem.
Sero apresentados contedos "formais", com um carter enciclopdico de
informaes inerentes ao tema, aquilo que de alguma forma deve ser absorvido,
47
aprendido pelo aluno para um bom desempenho acadmico; mas tambm matrias
e contedos ligados a curiosidades do tema tratado, gerando um equilbrio que
desperte o interesse do leitor.
(...) preciso ficar claro que h funes que as revistas desempenharam

que no tm nada a ver - nunca tiveram - com o jornalismo propriamente
dito. (...) No h nenhum problema em revistas reservarem espaos
generosos para o entretenimento (...) assim como logicamente no h
qualquer problema em revistas dedicarem-se exclusivamente educao
ou informao, muito pelo contrrio (SCALZO, 2004, p.52).
As matrias sero sempre acompanhadas de imagens que exemplifiquem o

contedo do texto (aqui muitas das imagens tambm so textos em forma ilustrativa
devido ao tema tratado, porm no se desqualificam desta categoria) levando-se em
considerao que um texto ser melhor compreendido quando acompanhado de
uma boa fotografia ou algum recurso grfico que transmita a mensagem presente no
texto; ou seja, a linguagem visual um ponto fundamental, "em qualquer situao,
uma boa imagem ser sempre importante - e ela o primeiro elemento que
prender a ateno do leitor" (SCALZO, 2004, pp. 58; 63).
Scalzo (2004) tambm deixa claro que revistas no precisam
necessariamente de publicidade para sobreviver; no entanto, quando estas forem
necessrias, devem ser apresentadas num formato em que haja clara distino
entre o que editorial e o que publicidade, at mesmo na forma de diagramao.
A revista "Em Branco" foi planejada para ser distribuda atravs de um site
de apoio, no estando disponvel a partir de um aplicativo, sendo assim, no ser
apresentada ao pblico por si s, dispensando publicidade no corpo do projeto, uma
vez que a insero destas no projeto das pginas descaracterizaria o modelo, e a
criao de uma pgina exclusiva de publicidade demandaria certo tempo de
carregamento que poderia frustrar o leitor por no apresentar mais nenhum
contedo alm da mesma.
Patrocinadores e publicidade ficariam disponveis apenas no site, por onde o
leitor passaria para ter acesso revista, e consequentemente teria contato com os
anunciantes, poupando-o do tempo de carregamento de pginas de propaganda,
que poderiam gerar certa averso a leitura da revista, uma vez que "nem sempre os
interesses dos leitores e os dos anunciantes so coincidentes" e os interesses do
leitor devem estar acima de tudo (SCALZO, 2004, p.83). Deste modo se estabelece
48
uma relao mais vantajosa para o leitor, mas sem prejudicar a sobrevivncia da
revista ao no dispensar os anunciantes e patrocinadores.
Vale ressaltar a acessibilidade, que se dar por meio de opao ofertada, no
site que consequentemente abranger a revista, possibilitando a mudana de
contrastes e variao de tamanho da fonte no corpo de texto.
4.3 A MARCA
De acordo com Rezende (2010, p.6), uma marca eficaz abrange um

conjunto de signos e representaes, organizadas em rede significante, que
identifica um produto/servio/empresa ou entidade, diferenciando-o de seus
concorrentes ou similares. E esta eficaz quando consegue estabelecer uma
relao positiva com o pblico.
4.3.1 or ue ran o?
oda s ra e u o eo e a ran o e de u ro e o an er or
e sua frustrante busca por um nome adequado aos ideais propostos. Vale lembrar
que o atual projeto possui um foco educacional, sendo de suma importncia um
nome e consequente marca que transparea esse princpio bsico. Rezende (2010,
. ) a on a ue o no e da Mar a seu s no r ord a a or e da den dade;
e ue a e a do no e o re u s o essen a da e a da Mar a.
O no e ran o nada a s do ue rea en e a aren a ser, afinal
depois de muitas tentativas frustradas para a escolha de um nome que transmitisse
a o a do r r o no e o n e en e ou no ons a ado ue a a dado
ran o nas de as; sendo ass ser a e or de ar o a o re a onado ao no e
or en uan o e ran o.
Eis que ento percebeu-se que - dada a situao - o nome estava ali, e se
en a a a er e a en e ran o. Ve de a o enden e a o a ser
49
reen do de er nado. Afinal de contas, todas as ideias e o processo de

conhecimento necessitam de um preenchimento at se tornar algo concreto.
ran o u no e ue ao es o e o udo o ue arecer ser, e
tambm leva a algo mais, diversas interpretaes podem ser tomadase algumas
destas levaram aos partidos de criao citados a seguir(figura 13), e a outros que
no sero citados:
Figura 13 - Exemplo de pgina de estudos preliminares da marca

Fonte: autoria prpria, 2014.
4.3.1.1 Origami/dobradura em papel
s ando de n do o no e da u ao ran o ar u-se da ideia de

uma folha de papel em branco, que pode acabar tendo vrios usos e se transformar
nas mais diversas coisas. Tendo isto em mente, o caminho que essa opo tomou a
transformao de uma pgina em branco por meio das dobraduras, transitando entre
elementos que so construdos a partir da mesma forma bsica (figura 14).
Figura 14 - Rascunho sobre as transies possveis dentro do conceito

50
O aprendizado acontece da mesma forma: a partir de uma pgina em

branco, o conhecimento construdo atravs de um conjunto de aes que tomam
forma, e podem seguir as mais diversas direes, dependendo do indivduo e do
meio em que est inserido.
Dentro da mesma proposta, tambm se estudou a possibilidade de utilizao
de uma folha em branco ao ser amassada ou riscada (figura 15); que da mesma
forma, a partir de algo vazio cria-se algo totalmente novo, dependendo do que ali for
colocado.
Figura 15 - Alternativa com letras em recorte e dobradura numa folha de papel

4.3.1.2 Leite
Essa alternativa partiu de um ro ad o o a a a ra ran o. ando-

se da or ran a do e e os d eres e ran o so os onados so re u a
embalagem do lquido. Explorando-se o on e o do ad o no se ora so re o
e e derra ado es o e s uaes ndese e s reciso tornar a experincia
de alguma forma positiva, como uma forma de aprendizado (figuras 16 e 17).
Figura 16 - Extratos de estudos envolvendo o trocadilho com o leite

51
Figura 17 - Estudos de alternativas com a caixa e o leite derramado

Porm, o conceito poderia ser considerado como partindo de experincias

negativas, e devido falta de maior profundidade neste quesito e dificuldade nas
opes de reduo e elementos de repetio desta marca, a ideia foi descartada.
4.3.1.3 Espao / campo em branco
Um dos conceitos mais complexos cogitados ao longo do projeto, a definio

de e ran o o o a o. er ando da de a de u es ao/ a o a ser
preenchido, ao que este mesmo espao, dependendo do que ali for colocado, tem a
capacidade de mudar tudo, gerando infinitas possibilidades. Algumas apresentadas
a seguir nas figuras 18 e 19.
Figura 18 - Estudos do conceito campo em branco

52
Figura 19 - Alternativas do conceito espao em branco

Alm de difcil interpretao figurativa, re e e ao on e o de void o que

acaba podendo, novamente, conter uma interpretao negativa, ao ser relacionado a
algo que no contm matria, incompleto, invlido, um vcuo.
4.3.1.4 Balo de dilogos
O balo de fala ou dilogo uma das mais comuns convenes grficas

para a representao de palavras como fala; consequentemente uma
representao clara de comunicao, ou seja, a funo primordial de uma revista.
Estaria ligado passagem de conhecimento atravs da revista.
Por possuir um aspecto mais limpo e de fcil identificao quando
relacionado s propostas anteriores, alm de adequar-se como elemento de
diagramao/repetio, foi a que gerou maior nmero de estudos (figuras 20 a 22),
nos mais variados formatos e linguagens.
Figura 20 - Alternativas utilizando-se balo quadrado modular

53
Figura 21- Alternativas unindo as iniciais da marca forma do balo

Figura 22 - Alternativas utilizando-se balo estilizado

Dentro deste conceito, foi cogitada mais uma forma de representao,

levando-se em conta uma extenso do projeto ao relacionar-se com um site. Neste
caso considera-se que o projeto teria dois tipos de publicaes distintas, uma
publicao mensal que reuniria vrios ou todos os temas abordados no site, e uma
publicao trimestral que teria apenas um tema e o abordaria de forma mais didtica
que a publicao mensal, que teria como foco artigos menos aprofundados e
relacionados s novidades de cada rea. Em relao marca, cada tema, associado
a uma cor teria seu prprio balo, que seria levemente diferente dos demais. Na
publicao mensal, a identidade visual da marca seria formada por uma
sobreposio dos bales referentes s temticas abordadas na edio; na
publicao trimestral, a identidade da marca seria apresentada utilizando apenas o
balo e cor referente temtica especfica abordada na edio.
A partir dos conceitos preliminares, foi feita a primeira seleo, na qual as
propostas com o balo se mostraram mais funcionais, e a partir destas chegou-se ao
modelo selecionado para refinamento (figura 23), passando ento por uma seleo
final, onde ajustes foram feitos para se obter o melhor resultado, tendo em vista o
funcionamento geral nos tamanhos necessrios.
Figura 23 - Alternativa selecionada para refinamento

54
Um dos grandes desafios foi sintetizar uma representao grfica, ainda que
to comum, de maneira que continuasse reconhecvel, mas que se diferenciasse
das semelhantes.
A partir de testes, optou-se pela utilizao da fonte Tungsten Medium,
tambm utilizada nos ttulos e vinhetas, como a tipografia utilizada na marca final.
Suas caractersticas sero abordadas no tpico sobre tipografia.
A verso que gerou a alternativa final, utilizando-se da ideia do balo, foi
composta a partir de elementos da famlia tipogrfica escolhida, mais precisamente
parnteses, chaves e pontos, que foram unidos de forma a imitar a curva
apresentada pelas letras, e assim criar certa unidade, como mostra a figura 24.
Figura 24 - Esquema de sintetizao do smbolo a partir da tipografia

Essa passou por mais um processo de refinamento, apresentado nas figuras

25 a 27, at se chegar verso final.
Figura 25 - Alternativas criadas a partir do smbolo baseado na tipografia

Figura 26 - Verso final da marca oficial

55
Figura 27 - Verso final da marca horizontalizada

Foram adicionadas reticncias no interior do balo para se relacionar ao

conceito anteriormente re s o de a o a ser reen do. Fazendo ento uma
ligao entre a comunicao, o compartilhamento de uma ideia simbolizada pelo
balo , novamente o conceito de campo em branco simbolizado pelas reticncias
ue re resen a es e arre a en o algo ainda incompleto, temos um molde
dos princpios da revista: o conhecimento precisa ser preenchido, compartilhado, e
assim por diante.
4.4 ELEMENTOS DE DIAGRAMAO
A partir dos testes realizados com os diversos de elementos de diagramao

necessrios para o desenvolvimento de uma revista, chegou-se s consideraes
apresentadas a seguir, que foram utilizadas como parmetros para o
desenvolvimento do projeto final.
4.4.1 Tipografia
Num projeto editorial, a escolha da tipografia umas das decises mais

importantes a ser tomada. A funo da tipografia mais que transmitir mensagem
em linguagem verbal escrita (NIEMEYER, 2010 p. 14). De maneira funcional, devem
ser consideradas questes como legibilidade, hierarquia e clareza na transmisso
verbal; e ao mesmo tempo questes subjetivas, tendo em vista que a tipografia
tambm transmite informaes no verbais e simblicas.
A es o a do o de ne a o o r o e s ono a do on e do, e como
esse ser interpretado pelo pblico. Niemeyer (2010, p.14) ainda afirma que a
56
o ra a e o o uno ondu r o e or e ura es u ar sua er e o da

estrutura subjacente ao texto, facilitar a compreenso da informao e aprofundar
seu en end en o.
Em revistas o uso da tipografia como imagem, relacionando-a com fotos e
ilustraes, acaba sendo de grande importncia. A manchete ou ttulo da capa se
transforma numa imagem de grande significncia: claramente verbal, relaciona-se
com a marca e traz um resumo simblico do contedo (SAMARA, 2007).
O contexto em que o tipo ser utilizado faz toda a diferena na hora de sua
escolha, j que as associaes feitas por certo pblico sero diferentes das de outro
em relao a um dado estilo tipogrfico. importante estar atento ao feedback do
pblico alvo em questo, tendo em mente quesitos gerais de usabilidade da
tipografia no projeto como propostos por Lucy Niemeyer. Os requisitos de
usabilidade podem ser determinados por trs critrios ergonmicos: legibilidade,
leiturabilidade e pregnncia.
Le dade ode ser de n da o o o a r u o de ara eres a anu r os
que possibilita que cada um deles seja inidentificvel dos outros. Isto depende de
algumas caractersticas como espessura da has e e or a do ara ere
(SANDERS& MCCORMICK, 1993, apud NIEMEYER, 2010, p. 82), ou seja, um tipo
possui alta legibilidade quando cada caractere possui formas que podem ser
identificadas e diferenciadas com facilidade.
A legibilidade de extrema importncia em textos longos; caso este no seja
muito legvel, afetar na velocidade da leitura do texto e aumentar o esforo mental
necessrio para identificar corretamente as letras e a consequente compreenso do
texto (NIEMEYER, 2010). A Le dade a afetada por fatores ambientais,
o o a u nao rau de on ras e e ra e undo e ad a sua do e or
(NIEMEYER, 2010, p.83).
A e ura dade a ua dade ue orna oss e o re on e en o do
contedo da informao em um suporte quando ela est representada por
caracteres alfanumricos em grupamentos com significao, como palavras, frases
ou e o orr do (SAN RS & MCCORMICK 993 a ud NIEMEYER, 2010, p. 84).
Uma boa leiturabilidade depende do espao entre caracteres e entrelinhas, e como
es es so on urados; a o os o do e o de e oss ar o a esso
informao contida nas palavras (...) depende da dificuldade do vocabulrio, da
estrutura frasal e do grau de abstrao presentes nas relaes expressas pelas
57
a a ras (NI MEYER, 2010, p. 84). De forma resumida, a caracterstica que

algumas famlias tipogrficas tm, de serem lidas com maior facilidade que outras
(COLLARO, 2000)
Os dois termos legibilidade e leiturabilidade costumam ser confundidos,
pois anteriormente legibilidade englobava as duas definies, e como j mencionado
no captulo 3, legibilidade so qualidades que tornam os tipos claros e reconhecveis
para serem lidos, enquanto leiturabilidade diz respeito qualidade do conforto
visual, facilidade com que o texto lido e compreendido. (PEREIRA, 2007).
re nn a d res e o ua dade de u ara ere ou s o o ue a
o ue e e se a s e se arada en e do seu en orno (SAN RS &
MCCORMICK, 1993, in Niemeyer, 2010, p. 85). Quanto mais uma linha se destaca
no projeto grfico, mais pregnante ela ser, fazendo com que seja chamada ateno
para a informao. A gerao de contrastes a partir da variao do corpo, peso,
entrelinha, inclinao so importantes para que partes do texto sejam pregnantes
(NIEMEYER, 2010).
Os critrios ergonmicos de usabilidade da tipografia so fundamentais,
porm no so os nicos que devem ser levados em considerao, tudo depende da
mensagem que a pea grfica deseja passar: esttica, significao e adequao ao
processo produtivo. Alm da sempre requisitada intuio do designer, que
imprescindvel (NIEMEYER, 2010 e WHITE, 2005).
A combinao de famlias tipogrficas necessria para criar a hierarquia do
texto dentro de uma publicao, mas a mistura demasiada de vrios tipos diferentes
pode se tornar visualmente confuso e desagradvel. Samara (2009) afirma que a
regra geral para se evitar o excesso a utilizao de duas famlias tipogrficas, o
que gera variao visual suficiente dentro de um projeto, mas quando houver real
necessidade, a regra pode ser quebrada.
Para o projeto aqui descrito, o uso de apenas duas fontes seria ineficiente,
pois no definiria o contraste necessrio entre as formas de texto que foram
utilizadas ttulos, corpo de texto, citaes/destaques e legendas/crditos. White
(2005) afirma que quando h necessidade de uma maior variedade de fontes, estas
devem ser contrastantes para maximizar o resultado, sendo preciso evitar as que
possuem desenho similar. Deve existir um contraste evidente entre as famlias
selecionadas, de modo que as qualidades individuais de cada uma fiquem evidentes
58
e mesmo sendo escolhidas por suas diferenas, devem partilhar algumas

caractersticas.
Va e ressa ar ue a e ura de u e o d eren e uando e a no a e
ou na tela, por isso que as especificaes da fonte em ambos os casos tambm
de e ser d eren ada ( NK e SAN OS 3 .6). A e ura e ea ode ser
mais cansativa que no convencional, sendo 25% mais lenta segundo (Mormorkes e
Nielsen 1997 apud BARBOSA 2004) de modo que os textos devem ser claros e com
a forma mais simplificada possvel.
Tendo isso em vista, para o corpo de texto foi definida a utilizao de fontes
sans-serif devido o seu melhor comportamento quanto resoluo e fluidez de
leitura em plataformas digitais, j que os detalhes das fontes serifadas so difceis
de perceber em tamanho pequenos e dificultam a leitura (NASCIMENTO, 2005).
Depois de pesquisa inicial foram selecionadas fontes humanistas sans-serif,
que mesmo perdendo as serifas se baseiam na caligrafia clssica, possuindo formas
arredondadas e justamente por sua esttica orgnica acabam tendo bom
desempenho quanto legibilidade no meio digital, possibilitando uma leitura fluida.
Realizaram-se testes mais elaborados com a Open Sans, Droid Sans e
Cabin (figuras 28 a 30), por atenderem aos requisitos e estarem disponveis
gratuitamente via Google Fonts.
Figura 28 - Exemplo de comparao de diversos tamanhos da fonte Open Sans

Figura 29 - Exemplo de comparao de diversos tamanhos da fonte Droid Sans

59
Figura 30 - Exemplo de comparao de diversos tamanhos pt. da fonte Cabin

Vale lembrar que por muito tempo a utilizao de fontes para web era um
tanto quanto limitada, afinal o visitante s veria as fontes utilizadas no site de forma
correta se ele a(s) tivesse instalada(s) em seu computador, caso contrrio a fonte
padro do navegador seria utilizada em seu lugar. Isso limitava a escolha do
desenvolvedor a poucas opes consideradas seguras (Times New Roman, Arial,
Verdana e Georgia). Atualmente existem diversos servios e scripts que permitem a
visualizao de fontes que no esto instaladas no computador do leitor, e o Google
Fonts um desses servios. De forma resumida, o Google Fonts fornece um cdigo
que, ao ser inserido na folha de estilos utilizada, possibilita que qualquer leitor possa
visualizar, em seus dispositivos, a fonte escolhida pelos desenvolvedores de
pginas, mesmo que ele no a tenha instalada.
Foi selecionada, enfim, para uso como corpo de texto a fonte Open Sans,
que possui 897 caracteres, contando com cinco pesos distintos e suas variantes
itlicas, permitindo maior flexibilidade na utilizao da fonte ao longo do projeto. A
Open Sans foi projetada com stress (ngulo) vertical, formas abertas, e uma
aparncia ainda que neutra, amigvel. Seu formato foi otimizado tanto quanto para
impresso, web e interfaces de dispositivos mveis, tendo uma excelente
legibilidade em todos estes.
A tipografia, ainda, deve ser utilizada para situar o leitor, mostrar como os
itens se encaixam entre si, quais so dominantes e quais so menos importantes no
fluxo de leitura. Em outras palavras, preciso ajudar o leitor a poupar tempo,
diferenciando os elementos que devem ser lidos primeiramente e quais podem ser
saltados, se utilizando de dicas visuais sutis (WHITE, 2005).
60
Sendo assim, os demais elementos textuais foram pensados de modo a

trazer destaque a cada um, com fontes que se adaptam melhor a cada funo, mas
que ao mesmo tempo trazem uma hierarquia.
Para ttulos e vinhetas (figura 31) foram utilizadas fontes da famlia
Tungsten, uma sans serif compacta e modular, que por ser Flat-sided lateral lisa
e por seu aspecto alongado/verticalizado tem grande impacto e apelo visual,
chamando a ateno no papel de manchete, se sobressaindo sobre os demais
elementos textuais e suas famlias tipogrficas.
Figura 31 - Exemplo ilustrativo de estudo da fonte Tungsten

A Tungsten uma fonte paga, que pode ser adquirida no site Typography,
ainda possui quatro pesos e 32 estilos (figura 32), permitindo grande variedade para
a criao de peas que chamem a ateno sem se perder a mesma identidade. Para
este trabalho foi obtida gratuitamente atravs de site de download de fontes, porm
para sua utilizao em um projeto real, seria adquirida a devida licena para uso,
que custa US$ 99 dlares e inclui 8 variaes da fonte.
Figura 32 - Exemplos da famlia Tungsten

Fonte: Typography.com, 2014.
Inicialmente, foi cogitado apenas o uso de fontes gratuitas para todos os

elementos tipogrficos da revista e, portanto, antes de optar pela utilizao de uma
fonte paga para ser utilizada na marca grfica, ttulos e vinhetas, testaram-se as
fontes gratuitas League Gothic, Antonio e Ostrich que apresentam caracteristicas
61
semelhantes Tungsten (figuras 33 e 34). O uso das mesmas foi descartado uma
vez que a famlia Ostrich apresenta apenas letras maisculas e no possui
caracteres com acentuao, e as familias League Gothic e Antonio no apresentam
as variaes em sua espessura que possibilitem utiliz-las de forma distinta nos
textos, porm mantendo uma mesma unidade visual quando se faz necessria a
utilizao de hierarquia nos ttulos, chamadas e subttulos do texto.
Figura 33 - Fontes League Gothic, Tungsten, Ostrich e Antonio

Figura 34 - League Gothic, Tungsten, Ostrich e Antonio junto ao smbolo da marca

A Tugsten Medium, ainda, foi utilizada como a o ra a o a da ar a

estando presente na parte textual da mesma, o que permitiu manter a unidade da
identidade visual (figura 35). Para White (2005) manter uma padronizao e
repetio no entediante, mas sim, cria fora e identidade.
62
Figura 35 - Verso horizontalizada da marca, em Tungsten Medium

Para destaques extratos do texto principal e citaes a fonte utilizada foi

a Playfair Display, uma fonte transicional e serifada, selecionada para este fim por
trazer a sensao de linguagem falada junto, claro, ao uso de aspas e por
obter um contraste agradvel junto fonte de corpo de texto Open Sans (figura 36).
Figura 36 - Exemplo das fontes Open Sans e Playfair Display Italic

Para crditos e legendas a fonte selecionada foi a Roboto Condensed (figura
37) por se diferenciar das demais fontes e, devido a sua natureza esguia, no tirar a
ateno do leitor do bloco de texto principal, sendo lida apenas posteriormente.
Figura 37- Legenda utilizando a fonte Roboto Condensed

Essas foram as tipografias definidas como padro, mas seguindo o

pensamento de Jury (2004 apud SAMARA, 2009, p.8) Rules can be broken but
63
never ignored15. Sendo assim, no decorrer do projeto outras fontes foram utilizadas
principalmente na funo de imagem quando um artigo permitia e ou necessitava
deste artifcio.
4.4.2 Cores
As cores so um dos principais e mais poderosos estmulos dentro do

projeto grfico, sendo uma ferramenta incrivelmente til na comunicao visual. Uma
harmonia constante tem mais chances de sucesso do que uma variedade chocante.
Na o un ao funcional, a inteno com que se usa uma cor muito
as a ue a sua a arn a (WHITE, 2005, p. 212). As cores tambm exercem a
funo de trazer hierarquia e legibilidade de informaes texto, ou no tendo
extrema importncia na maneira como as pessoas conectam os elementos de uma
pgina (SAMARA, 2009).
Neste projeto, as cores foram utilizadas como um sistema e so o marcador
identitrio mais forte dentro da revista; cada tema/volume seria relacionado a uma
cor, e essa mesma cor seria aplicada na parte do site referente a este mesmo tema.
Em relao escolha das cores, partiu-se inicialmenente da vontade de
haver um distanciamento das cores amarelo, magenta e ciano, comumente
utilizadas em projetos voltados ao tema design grfico. Apesar de cada edio da
revista ser identificada por uma cor especfica, optou-se por utilizar cores que
funcionassem de forma harmnica quando apresentadas em conjunto, quando nos
ttulos de artigos do site e na pgina que listaria todas as edies da revista. Neste
ponto, o gosto pessoal das autoras tambm foi decisivo, uma vez que a significao
cultural e psicolgica das cores no foi levada em considerao durante o processo
de escolha das cores principais, mas sim as opes que proporcionariam boa
visualizao em tela, tanto quando utilizada como cor de destaque para a capa e
ttulos, quanto ao ser utilizada como cor de plano de fundo, nesse ltimo caso sendo
necessrio que ela no se tornasse visualmente cansativa no decorrer da leitura.
Portanto, foram geradas as opes apresentadas na figura 38 para cores principais
e complementares a serem utilizadas:
_____________
15
regras podem ser quebradas as nun a noradas. Traduo livre das autoras.
64
Figura 38 - Estudo preliminar de cores para cada edio e complementares

A paleta final de cores principais para cada edio, apresentada na figura 39,
foi criada a partir das variantes obtidas nos testes iniciais, e suas complementares
podem ser as mesmas apresentadas anteriormente na figura 38.
Figura 39 - Paleta de cores identitrias de cada edio da revista

Para construir a identidade do modelo a ser apresentado, a cor escolhida foi

o vermelho, exemplificado na figura 40, pois por ser "uma cor quente e bastante
excitante para o olhar, impulsionando a ateno e a adeso aos elementos em
destaque" (FARINA; PEREZ; BASTOS, 2006) pareceu ser a mais favorvel para ser
utilizada na primeira edio da revista. A cor vermelha foi utilizada ao longo de todas
as pginas com a possibilidade de ser acompanhada por uma paleta complementar
de apoio, quando necessrio. A funo da mesma, alm da parte identitria,
desenvolver hierarquia das informaes, distinguindo elementos especficos do texto,
e tambm como auxlio na navegao ao longo de cada pgina.
Figura 40 - Cor utilizada para a identidade da revista

65
4.4.3 Elementos de repetio
Para manter a unidade entre as pginas, necessrio criar uma associao

com uma marca visual forte (WHITE, 2005). White (2005) coloca que o desenho da
marca pode ser qualquer coisa - em termos de tamanho, cor, forma, cones,
tipografia, direo, ngulo, sendo importante apenas a repetio e posicionamento.
O smbolo da marca grfica, no caso o balo de fala, foi utilizado como
elemento de repetio ao longo das pginas, em sua forma normal na vinheta, e
apenas seu interior ao final de matrias e como elemento de ornamentao.
Figura 41- Elementos de repetio criados a partir da marca

4.4.4 Vinheta
A utilizao de vinheta teve sua origem durante a Idade Mdia quando tinha
a funo de ornamentar manuscritos, na Idade Moderna passou a ter funo
decorativa, sendo utilizada como elemento editorial. Atualmete o conceito de vinheta
foi adaptado para diversos meios de comunicao em massa, sendo amplamente
empregados no cinema, tv, rdio, revistas, entre outros.
A vinheta, tem vrias funes e portanto recebe denominao prpria
dependendo de como ou por qual meio utilizada, porm independente da forma
como a resen ada unda en a ressa ar ue u dos r n os r r os das
vinhetas a possibilidade de poder ser retirada da ilustrao ou forma da qual faz
ar e se re u o do en end en o do e o ou da ura ua o n or orada
FREITAS (2007, p.52).
Na d a e e rn a a n e a assou a er u a a r u o ue no ossua
nas ar es r as a de on uar e de ar ar es FREITAS (2007, p.55). As
n e as a de e e en os de ora os a ossue ou ros s n ados
66
inclusive de conso dar a a e [da e ssora] es a e s o a en e PETRINI

(2004, p. 124). dessa forma que a vinheta apresentada no modelo da revista a
ser desenvolvido, como elemento grfico organizacional utilizado para situar o leitor
sobre a seo na qual o presente artigo est inserido, e tambm com o intuito de
reforar a marca por conter elementos presentes na marca grfica da revista.
Uma vez que para fins do projeto a principal funo da vinheta seria
organizacional, optou-se ento gerar alternativas que alm de no ocupar muito
espao, no chamasse demasiada ateno para si mesma (figura 42), afinal, como o
projeto prev a utilizao de diferentes tipografias e elementos decorativos nos
ttulos de artigos, o foco do leitor deveria ser direcionado para o ttulo. A vinheta
deveria funcionar de forma secundria, apenas para informar o leitor sobre sua
localizao dentro da publicao. Portanto optou-se por utilizar o balo da marca
seguido do nome da seo em Tungsten Medium, e abaixo dos mesmos apresentar
um fio, como demonstrado na figura 43.
Figura 42 - Gerao de alternativas para a vinheta

Figura 43 - Verso final da vinheta do modelo da revista

67
4.4.5 Navegao
A navegao de n da o o odos os links, rtulos e outros elementos que

permitam o acesso a pginas e ajudem pessoas a se orientarem enquanto
interagem com um website (KAL ACH 7, p. 5, traduo livre das autoras),
neste caso uma revista, foi um dos aspectos mais importantes durante o
desenvolvimento do projeto. Foi necessrio pensar em dois tipos de sistemas
navegacionais: o que seria utilizado para que o leitor navegasse entre os artigos e
um sistema secundrio utilizado para ir de uma parte a outra do mesmo artigo.
Foram criados templates para os sistemas navegacionais, pois alm de ser
or an e ara a ons s n a no design, e tambm pela eficincia na
e en ao (KAL ACH 7 . 35, traduo livre das autoras), facilitaria o
desenvolvimento de templates flexveis que pudessem se adaptar ao tipo de
dispositivo utilizado pelo leitor da revista: a verso para desktops e notebooks
deveria utilizar setas para o usurio navegar entre os artigos de forma sequencial e
a verso para tablets e smartphones substitui as setas por eventos touch. O sistema
de navegao secundria utiliza marcador colorido na lateral esquerda da tela para
indicar a quantidade de painis presentes no artigo e destacar a posio atual do
leitor (figura 44).
Figura 44 - Wireframe dos sistemas de navegao da revista

De forma resumida, a navegao entre artigos feita de forma horizontal,

enquanto a navegao entre diferentes pontos de um mesmo artigo feito de forma
vertical, assemelhando-se ao modelo comumente apresentado em revistas digitais
para tablets (figura 45), uma vez que revistas para desktops geralmente apresentam
contedo apenas de forma horizontal.
68
Figura 45 Navegao da revista

Optou-se por utilizar painis como forma principal para a diagramao dos
artigos, pois alm de ter um efeito esttico mais agradvel,o ro a en o de e a de e
ser evitado, pois ele causa distrao nos usurios e tornam o material mais difcil de
ser ass ado (NASCIM N O 5 . ). Apesar dessa recomendao, o
rolamento de tela um recurso bastante utilizado para apresentar o contedo em
revistas digitais, porm para evitar seu uso demasiado no modelo desenvolvido,
optou-se por utiliz-lo apenas dentro dos lightboxes de informaes adicionais, j
que o contedo principal a ser absorvido, teria sua sntese apresentada diretamente
nos painis, sendo necessrio acessar as informaes adicionais apenas caso o
leitor realmente necessite ou deseje aprofundamento do assunto.
Para garantir que o leitor possa optar pela leitura no linear da revista, ela
apresenta um menu que pode ser acessado atravs de um cone, alinhado ao lado
direito da tela. O menu que ao ser acionado, sobrepe todos os elementos da revista
proporcionando rpido acesso s opes de navegao (figura 46), apresenta uma
lista com todos os artigos presentes na edio (alm de, na verso real apresentar a
possibilidade de que o leitor opte pela verso de acessibilidade da revista).
Figura 46 - Menu do modelo da revista

69
Foi desenvolvida uma srie de cones, para fins do projeto definidos como
uma imagem utilizada para: representar funo ou atividade a ser realizada uma vez
que o leitor interage com ele (abrir/fechar o menu, aumentar o tamanho de uma foto,
etc.); para serem utilizados na revista como auxiliar nos sistemas de navegao;
indicar a presena de informaes adicionais em um artigo; apontar o tipo de
contedo disponibilizado e para oferecer informaes a respeito do uso da revista. O
uso de cones
pode reforar os vestgios de informao. Isso particularmente verdade
quanto os usurios esto rapidamente escaneando muitas informaes. Se
tiver um significado e propsito claros, cones so mais do que decorao.
Eles trabalham em conjunto com o texto para proporcionar melhor senso de
orientao (KALBACH, 2007, p.280, traduo livre das autoras).
Foram desenvolvidos trinta e trs cones para serem utilizados na revista, e

seis cones adicionais para o site. Para o desenvolvimento dos cones optou-se por
utilizar formas simples e no muito estilizadas, sendo bastante semelhantes aos
apresentados com frequncia em revistas digitais e sites, seguindo assim as
heuristicas de usabilidade de Nielsen, nas quais recomenda-se que o leitor
reconhea os elementos presentes na interface ao invs de ter que se lembrar para
qual funo o mesmo est sendo utilizado no presente contexto. Os cones
apresentam formas arredondadas, tornando-os mais suaves, estabelecendo assim
uma conexo com a marca grfica da revista, que apresenta um balo criado a partir
das formas curvas presentes nos parnteses e colchetes da tipografia utilizada na
marca e ttulos da revista, as propores das curvas apresentadas nos cones so
as mesmas utilizadas na marca grfica da revista.
Para a navegao foram desenvolvidos dois conjuntos de setas para que se
pudesse optar pela que melhor atendesse a necessidade da revisa levando em
considerao a diversidade de dispositivos nos quais ela pode ser acessada. Pelo
mesmo motivo foram criadas tambm opes para cones utilizados para acessar e
fechar o menu e lightboxes. Para o leitor localizar-se com maior facilidade dentro de
um artigo, foi utilizado um cone para a navegao secundria, que consiste em um
crculo. Numa sequncia, geralmente posicionados verticalmente do lado esquerdo
da tela, cada um desses crculos representam um painel presente no artigo, o painel
de leitura atual destacado utilizando cor diferente dos demais. Esse mesmo cone,
pode ser utilizado horizontalmente em sliders de fotos e contedo (figura 47).
70
Figura 47 - cones para a navegao primria e secundria da revista

Fonte: autoria prpria, adaptado de cones comumente utilizados, 2014.
Considerando os diversos tipos de interatividade possveis em uma revista

digital, faz-se necessrio que o leitor possa identificar facilmente os tipos de
recursos multimdia disponveis nos artigos, para tanto os cones so utilizados para
indicar a existncia de contedos adicionais em determinadas reas dos artigos e
indicar o tipo de recurso a ser acessado (figura 48).
Figura 48 - cones para os elementos interativos da revista

Visando instruir os leitores a respeito do funcionamento da revista, para a

pgina de informaes sobre sua utilizao, alm de serem apresentados os cones
relacionados aos tipos de recurso multimdia (figura 48), foram desenvolvidos cones
para demonstrar como navegar pela revista quando utilizando dispositivos sensveis
ao toque e computadores, mostrados na figura 49.
Figura 49 - cones para as instrues de uso da revista

71
Considerando a utilizao de um site como plataforma para a publicao da

revista, e havendo a possibilidade de que o site seja utilizado como mais que apenas
suporte para a revista, sero utilizados cones em artigos publicados diretamente no
site: referentes aos marcadores associados ao artigo; possibilidade de
gostar/favoritar; compartilhar o artigo em redes sociais e cone associado aos
comentrios postados no artigo (figura 50).
Figura 50 - cones desenvolvidos utilizao no site da revista

Caso seja necessrio prev-se a criao de novos cones para representar

novas funcionalidades implementadas na revista ou no site.
4.4.6 Grids
Para o projeto da revista Em Branco, optou-se pelo uso de grid vertical

multicolunas por permitir grande flexibilidade na diagramao dos artigos atravs da
combinao de colunas, conseguindo assim grande variedade de templates, mas
mantendo a unidade do projeto. No design de livros, revistas, jornais e sites o uso de
grid bastante comum, pois
proporciona consistncia ao livro, tornando coerente toda sua forma. Os
designers que usam grades partem da premissa que tal coerncia visual
permite que o leitor concentre-se no contedo, em detrimento da forma.
Cada um dos elementos da pgina - texto ou imagem - tem uma relao
visual com todos os outros elementos: a grade fornece um mecanismo pelo
qual estas relaes podem ser formalizadas (HASLAM, 2006, p.42).
As verses para computador e tablet utilizam grid vertical de 12 colunas por

permitir a combinao das colunas de quatro formas diferentes e ainda assim obter
falsas colunas com larguras iguais, alm da variedade possibilitada quando so
utilizadas colunas com larguras variadas. A grande flexibilidade oferecida por este
grid permitiu que a diagramao dos artigos fosse feita pensando nas necessidades
especficas do contedo abordado, afinal, segundo Haslam
72
Os aspectos funcionais do design da pgina so aqueles que possibilitam

que o leitor se relacione diretamente com a mensagem do autor. Desse
modo o layout da pgina determinado pela natureza do contedo. [...] O
designer deve fazer um layout que se harmonize com o contedo de modo
que o leitor possa ser guiado atravs das informaes (HASLAM, 2006
p.143).
Devido ao tamanho das telas de smartphones, foi utilizada apenas uma

coluna, com margem nas laterais, para que a visualizao do contedo no fosse
prejudicada. Embora algumas marcas j desenvolvam aparelhos com telas de
tamanhos que possibilitem a utilizao de mais de uma coluna, foram considerados
os tamanhos de tela mais comuns.
Considerando o carter responsivo da revista, foi necessrio que o tamanho
das colunas e gutters16 fossem adaptados aos diferentes tamanhos em que a revista
seria apresentada em computadores e tablets. Inicialmente pensou-se em utilizar
layout elstico, que define os tamanhos de todos os elementos utilizando
porcentagens e ems - medida que corresponde a altura da fonte utilizada nas
configuraes de leitura do navegador. Esse mtodo permitiria que a revista fosse
redimensionada de acordo com o tamanho da janela de navegador utilizada pelo
leitor sem a necessidade de criar regras de estilos baseados no tamanho de tela,
diminuindo ento o tempo de desenvolvimento do projeto. Embora esse mtodo
funcione de forma favorvel quanto utilizado em sites, para o projeto ele se mostrou
falho, uma vez que a revista apresenta uma diagramao mais complexa do que um
site (onde grandes blocos de texto corrido so apresentados). Os elementos
resen es na re s a o ea a a ue rar o layout original, criando longas
colunas de texto e perdendo o alinhamento desejado, fazendo com que a revista
parecesse mal diagramada.
Aps novos testes, optou-se ento pelo uso de layout fixo, onde os
elementos so medidos utilizando pixels e a adaptabilidade a diferentes tamanhos
de tela seriam feitos utilizando media queries 17 que possibilitam aplicar regras de
estilos baseados no tamanho de tela utilizado pelo leitor. Para a criao do grid
inicial, foi considerada a resoluo de tela mais utilizada em notebooks, 1366x768px,
e, portanto definiu-se o que o grid teria largura de 1200px, tamanho comumente
utilizado por designers e desenvolvedores de sites e temas. Para tablets, nas
_____________
16
Espao em branco entre duas colunas de um layout.
17
Expresses que checam condies de um recurso de mdia permitindo que a apresentao do
contedo possa ser feita sob medida para uma srie de dispositivos (RIVOAL, 2012, traduo livre
das autoras).
73
posies retrato e paisagem, o grid foi redimensionado proporcionalmente para

adaptar-se a telas menores (figuras 51 e 52). Optou-se por utilizar gutters nas
extremidades do grid para criar uma margem nas laterais do layout para que os
elementos no ficassem muito prximos s bordas do navegador quando visualizado
em tablets. O uso de gutter nas extremidades tambm permitiu que os marcadores
navegacionais (entre os painis de um mesmo artigo) fossem posicionados no gutter
do lado esquerdo da tela, no sendo necessrio criar uma coluna mais estreita
alinhada esquerda apenas para seu posicionamento.
Figura 51 - Visualizao do grid nos dispositivos: notebook, tablet e smartphone

Figura 52 - Visualizao do grid em um artigo nos dispositivos: notebook, tablet e smartphone

4.4.7 Wireframes
Segundo Kalbach (2007, p.258, traduo livre das autoras) wireframes so

ferramentas comunicacionais utilizadas para facilitar o entendimento, entre clientes e
designers, dos elementos grficos requeridos em um projeto. So utilizados para
mostrar o posicionamento de elementos presentes em um layout de pgina e sua
importncia, na forma de desenhos simplificados, sendo possvel analisar
rapidamente os prs e contras do uso de cada modelo de wireframe apresentado. o
nvel de detalhamento utilizado fica a critrio das necessidades de cada projeto.
74
No desenvolvimento do projeto, wireframes foram utilizados durante a fase

de gerao de alternativas dos layouts de cada um dos artigos presentes (ou que
foram descartados) na primeira edio da revista. Aps a escolha que melhor
atenderia s necessidades do artigo, os layouts foram desenvolvidos em programa
de edio grfica e ento codificados, fazendo os ajustes necessrios adaptao
aos tamanhos de telas suportados pelo projeto.
Embora os artigos fossem planejados levando em considerao as
necessidades especficas de cada contedo, sees fixas da revista que devem
utilizar sempre a mesma diagramao (apenas com alterao das cores entre as
edies) utilizam wireframes j codificados, nos quais apenas o contedo seria
alterado. Considerando a facilidade de uso oferecida pelos wireframes assim como
a reduo de tempo de criao de uma revista quando estes so utilizados, para
artigos onde no exista a necessidade de desenvolver um layout especfico para seu
contedo, em um projeto real seriam desenvolvidos uma srie de wireframes com
diferentes diagramaes de blocos de contedo para facilitar a publicao da revista
(figura 53). Esses seriam desenvolvidos considerando um painel da revista, podendo
ser combinados de acordo com a necessidade do artigo, e gerando uma grande
variedade na diagramao. Tais wireframes contariam com variedade no
posicionamento dos blocos de contedo, e cada um dos blocos poderiam ser
preenchidos com o tipo de contedo (texto, fotos, videos, etc) que o diagramador
julgasse mais apropriado.
Figura 53 - Exemplos de wireframes

Uma vez que a revista foi codificada por uma das autoras, os wireframes
foram codificados de acordo com sua necessidade de uso dentro do projeto, e foram
armazenados apenas na forma de cdigos fonte18. Havendo necessidade de mais
_____________
18
Conjunto de instrues em HTML responsveis pelo funcionamento correto das pginas web
quando interpretadas pelo navegador.
75
pessoas se envolverem na criao e publicao do contedo da revista, existe a

possibilidade de automatizao de uso dos wireframes, sendo possvel escolher o
modelo desejado e editar seu contedo diretamente da rea administrativa do site
da revista, atravs da utilizao de plugins gratuitos e pagos, que possibilitam o
desenvolvimento de uma plataforma de publicao online, tornando a publicao de
contedos bastante simples para um grupo de pessoas sem conhecimentos prvios
em codificao de sites.
4.4.8 Capa
O design da capa uma das prioridades em qualquer publicao, esta deve

ser atrativa ao pblico, contendo ao menos alguma informao sobre o tema que
ser tratado, mas tambm deve ser levado em considerao que o padro e a
linha editorial da revista que vai definir o que ser privilegiado numa capa, e quais
informaes sero ali contidas (SCALZO, 2004).
Para o formato em que a revista ran o o ensada u a u ao
digital gratuita, que no precisar se destacar em meio a outras revistas seja numa
banca, navegador ou lista de aplicativos com as edies apresentadas em um site
cujo contedo j direcionado ao pblico-alvo e com a temtica abordada por cada
uma das edies da revista j presente no site. Neste caso, a capa ter uma funo
identitria e organizacional, para diferenciar uma edio da outra, sem a
necessidade de apelos para ender seu on e do u a e ue an es de a essar
uma das revistas, este j seria listado no site. Com isso em vista, optou-se por evitar
um destaque demasiado nas chamadas presentes na capa, j que todo o contedo
se relaciona a um mesmo tema.
4.4.9 Sumrio
Segundo White (2005) a criao do sumrio considerado um problema

especial, pois ele um recipiente multitarefa ao qual muitas expectativas esto
76
associadas, porm no consegue se sustentar por s s, ele deve estar associado

capa, comumente considerado como sendo a segunda e ltima oportunidade de se
"vender" a revista ao leitor, uma vez que ali estaro presentes as informaes
relacionadas ao contedo presente na revista que no foram apresentados na capa.
Todas essas informaes precisam estar organizadas de forma clara para que o
leitor possa encontrar de forma rpida o contedo que est procurando.
No existe uma frmula padronizada para o desenvolvimento de um
sumrio, algo que possa ser aplicado e funcionar de forma favorvel em qualquer
tipo de u ao a na ada su r o de u ao de e re e r suas
ara ers as e ne ess dades ar u ares (WHI 5 p.190) e para tanto
necessrio que se pense no pblico-alvo e qual a melhor forma para alcanar o
objetivo desejado para o sumrio da publicao. Ainda segundo White (2005), o
design deve ser pensado a partir das necessidades particulares de cada revista, e
elementos meramente estticos devem estar subordinados lista de contedos, que
deve ser apresentada da forma mais clara e til possvel, facilitando assim a
visualizao da totalidade dos contedos da edio por parte do leitor.
No aso da re s a ran o ne ess r o ue a de s ar os artigos
presentes na edio, estes possam ser facilmente acessados atravs da utilizao
de hiperlinks. Por ser uma revista digital, faz-se necessrio tambm que sejam
apresentadas as intrues para o uso da revista, que neste caso contar com uma
parte voltada navegao entre artigos, e outra que apresentar os cones
associados aos tipos de contedo multimdia presentes na publicao. As instrues
de uso sero apresentados da mesma forma em todas as edies da revistas e,
portanto, um ou mais tipos de contedo multimdia podem no estar presentes na
edio escolhida pelo leitor, o modelo de sumrio utilizado na publicao
demonstrado na figura 59.
4.4.10 Acessibilidade
De acordo com a Web Accessibility Initiative, iniciativa da W3C que rene

pessoas e organizaes para desenvolver diretrizes e recursos para ajudar a tornar
a web acessvel a pessoas com deficincia, acessibilidade na web significa
77
possibilitar que pessoas com algum tipo de deficincia (visual, auditiva, fsica, vocal,
cognitiva ou neurolgica) possam utilizar, entender, navegar e interagir com a web
(HENRY, 2005, traduo livre das autoras).
Devido temtica da revista supe-se que apenas uma pequena
porcentagem dos possveis visitantes necessite utilizar tais ferramentas de
acessibilidade, uma vez que durante o processo de desenvolvimento da revista, no
tivemos contato com nenhum estudante de design que necessitasse utilizar tais
ferramentas, portanto no modelo desenvolvido foi criado somente um artigo com
opes de acessibilidade a fim de exemplificar como tais ferramentas funcionariam
em um projeto real. Para o presente modelo foram considerados apenas os casos
relacionados deficincia visual como o daltonismo, a necessidade de ampliao do
tamanho do texto e a necessidade de leitura em pginas com alto contraste.
Em relao ao daltonismo, inicialmente considerou-se a possibilidade de
utilizar uma paleta cujas cores pudessem ser diferenciadas por pessoas que
apresentam qualquer um dos tipos de daltonismo, porm o contraste necessrio
entre os matizes para diferenciar os temas tornariam as cores no atrativas ao
pblico geral, uma vez que teriam que ser muito saturadas ou a paleta original teria
que sofrer grandes alteraes, o que novamente poderia torn-la no atrativa (figura
54). Optou-se, ento, por manter as cores originais e, no site que daria suporte a
revista, utilizar cones juntamente s cores para que os assuntos possam ser mais
facilmente diferenciados. Vale ressaltar que existem softwares gratuitos, como o
Visolve (http://bit.ly/1Ieu2Gs), que permite que pessoas com daltonismo possam
perceber as variaes de cores de forma semelhante pessoas com viso normal, o
que ajudou a optar pelo uso da paleta original.
Figura 54 - Paleta de cores original e otimizada para daltonicos

No modelo da revista, na qual cada edio utilizar uma cor diferente de

destaque, tomou-se o cuidado para que essas cores no pudessem ser confundidas
com as demais cores utilizadas na edio (cor de plano de fundo e textos). Havendo
a necessidade de que seja utilizada mais de uma cor para destacar partes de um
78
artigo, optou-se por utilizar diferentes tonalidades da cor de destaque, uma vez que
a utilizao de paletas monocromticas permitirem que usurios com diferentes tipos
de daltonismo possam diferenciar essas variaes e portanto perceber a hierarquia
apresentada no artigo. Com o auxlio da ferramenta online Coblis, que permite fazer
o upload de imagens e simular como pessoas com diferentes tipos de daltonismo
vem as mesmas, foi possvel criar um exemplo (figura 55), que demonstra como a
paleta de cores utilizada no modelo da revista seria visualizada por leitores que
apresentam cada um dos diferentes tipos de daltonismo.
Figura 55 - Cores da revista mostrando sua variao de acordo com os tipos de daltonismo
Fonte:autoria prpria, 2014.
Em relao necessidade de aumento do tamanho de texto e visualizao

de pginas em alto contraste, em um projeto real seria utilizado um tema especial
desenvolvido para que o usurio possa fazer as alteraes da forma que facilite sua
leitura. O tema utilizaria cookies para armazenar as opes escolhidas pelo leitor
fazendo com que em visitas futuras essas opes sejam visualizadas
automaticamente. No modelo da revista foi desenvolvido apenas um artigo para
exemplicar o funcionamento de tais opes, e portanto, o armazenamento das
informaes em cookies no foi implementada. Para evitar que os layouts sejam
desconfigurados ao atingir determinado tamanho de fonte, o artigos que apresentam
opes de acessibilidade so diagramados utilizando apenas uma coluna (figura 56).
Para melhor exemplificar as diferenas em relao ao layout dos artigo com tais
opes, foi utilizado o contedo de artigo previamente apresentado na revista.
Figura 56 - Exemplo de pgina que com opes de acessibilidade

79
4.5 IMPLEMENTAO DA REVISTA
Desde o desenvolvimento da proposta do Trabalho de Diplomao, o projeto

foi planejado tendo em mente sua implementao. Para tanto, diversas formas de
publicao de revistas digitais foram analisadas com a inteno de definir suas
vantagens e desvantagens, e ento definir qual se adaptaria melhor proposta da
revista a ser desenvolvida. Para o projeto foi considerado o uso de d s n era os;
flipbooks utilizando scripts ou Flash; revistas nativas para tablets e revistas em
HTML por oferecerem a possibilidade de uso de interatividade e elementos
multimdia. Aps a avaliao das alternativas, a u ao de d s n era os flash
ou revistas nativas limitaria bastante o acesso ao contedo, afinal essas opes no
so totalmente compatveis com os dispositivos que a revista ofereceria suporte. Os
flipbooks, mesmo sendo mais flexveis do que as alternativas acima, no ofereciam
suporte a todas as funcionalidades desejadas.
Optou-se ento pela utilizao de HTML e CSS para a implementao da
revista, j que permite maior acessibilidade no que diz respeito aos dispositivos
utilizados, possibilita o uso de diversos recursos multimdia e interativos e a
codificao do modelo final da revista seria realizada por uma das autoras, gerando
assim uma alternativa de baixo custo.
Segundo Chapman (2009), HTML a linguagem primria utilizada para
desenvolver pginas da web, planejada como uma forma de fornecer e determinar
como o contedo apresentado; CSS ou folhas de estilo em cascata so utilizadas
para formatar o layout de websites, cujo maior beneficio a possibilidade de mudar
completamente o estilo de um site editando apenas um arquivo sem ter que fazer
modificaes no contedo. No projeto sero utilizadas as verses mais recentes de
HTML e CSS, pois oferecem mais funcionalidades nativas, entre elas o suporte a
udio e vdeo, e mais opes na formatao dos elementos via folha de estilo em
CSS.
O uso de multimdia, aqui definido como ua uer o nao de e o ar e
grfica, som, animao e vdeo apresentada a voc por computador ou por outro
e o e e rn o ou an u ado d a en e (VAUGHAN, 2010, p.1, traduo livre
das autoras), faz-se necessrio no projeto, afinal
80
um modelo digital no lido ou interpretado como um texto clssico, ele

geralmente explorado de forma interativa. Contrariamente maioria das
descries funcionais sobre papel ou aos modelos reduzidos analgicos, o
modelo informtico essencialmente plstico, dinmico, dotado de uma
certa autonomia de ao e reao (LVI, 1993, p. 121).
A utilizao de elementos multimdia, alm de ser mais atrativo para o leitor,

permite que sejam feitas demonstraes de contedos mais complexos atravs do
uso de vdeos e animaes, facilitando seu entendimento. Em conjunto com HTML e
CSS sero utilizados scripts, quando necessrios, para a implementao dos
elementos interativos necessrios ao artigo, tais como: slideshows ou sliders de
fotos, galeria de fotos, overlays 19 , lightboxes 20 , vdeo e udio (que pode ser
carregado de forma nativa utilizando HTML5 ou a partir de sites como YouTube e
SoundCloud).
De acordo com Vaughan (2010, p. 422) do ponto de vista interativo, muitos
projetos multimdia so muito passivos (o leitor clica e assiste a uma ao), o desafio
deve ser ir alm do que visualmente atrativo e desenvolver produtos que so
realmente baseados na interatividade. Nesta mesma linha, Primo divide as duas
formas principais de interatividade: interao mtua, na qual as relaes
interdependentes e processos de negociao, em que cada interagente participa da
construo inventiva e cooperada do relacionamento, afetando-se mutuamente"; e
n erao rea a ue limitada por relaes determinsticas de estmulo e
resposta (PRIMO, 2007, p.57). Compreende-se ento que no primeiro tipo de
interatividade (mtua) o leitor participa efetivamente do processo, e no segundo tipo
(reativa) o leitor apenas escolhe entre as alternativas apresentadas.
Considerando as revistas analisadas, os exemplos de interao so
meramente reativos, uma vez que no h a possibilidade de interao com os
leitores ou editores diretamente atravs da revista. Para o projeto decidiu-se ento
verificar as possibilidades de interatividade mtua, obtendo-se bons resultados na
fase de explorao dos recursos que visava definir quais elementos interativos
funcionariam no ambiente escolhido para a publicao da revista. Nessa fase os
cdigos necessrios para a implementao desse tipo de interatividade foram
desenvolvidos e testados (apenas pelas autoras), sendo considerado ento possvel
a utilizao dos seguintes itens na revista: comunicao com os editores atravs de
formulrio de contato; insero de comentrios nos artigos; mencionar artigos em
_____________
19
Pequenos blocos que ao serem ativados mostram contedo complementar ou adicional.
20
Caixas de contedo que quando ativadas sobrepe total ou parcialmente o painel de leitura atual
81
diversas redes sociais; realizar o cadastro para receber noticias por email; realizar
cadastro para ter um perfil de usurio no site e publicar contedos, tudo isso sendo
feito diretamente da revista.
Aps verificar a possibilidade de implementao desses itens, foi criada uma
seo onde os leitores pudessem enviar imagens de seus trabalhos relativos ao
tema abordado na edio, e as mesmas serem publicadas diretamente na revista ou
mediante aprovao de moderadores. Optou-se entopor utilizar apenas esse tem,
pois julgou-se que a utilizao de comentrios e as demais possibilidades de
interatividade mtua tornariam a publicao muito semelhante a um site.
82
5 DESENVOLVIMENTO DO MODELO DA REVISTA
Uma vez que os requisitos para o desenvolvimento da revista bem como o

uso de tipografia, grids e demais elementos de diagramao que seriam aplicados
na mesma foram definidos, passou-se ento a planejar como esses elementos iriam
se comportar associados ao uso de interatividade. Como o projeto sempre previa a
real implementao da revista, foi necessrio que uma srie de testes fossem
realizados, visando aprimorar a forma com que elementos interativos fossem
codificados para garantir seu bom funcionamento. Tais testes iniciaram-se pelos
elementos que teriam maior impacto no decorrer do projeto caso houvesse a
necessidade de fazer alteraes devido a mudanas de layout ou conflitos entre
d eren es ar es de d os.
As reas principais dos artigos seriam apresentadas utilizando painis
verticais, portanto essa foi a base para os testes, uma vez que a codificao
utilizada para a criao dos painis deveria funcionar tanto com a utilizao de um
mouse (ou setas navegacionais do teclado) quanto com eventos touch, e ser flexvel
o bastante para que diversos tipos de contedo pudessem ser inseridos em cada um
dos painis sem que houvessem problemas em seu funcionamento, para tanto
foram testados diversos scripts para a criao de painis at encontradar um que
atendesse s expectativas do projeto.
Uma vez definida a codificao a ser utilizada para os painis, realizou-se o
mesmo processo para a definio da codificao do menu que contm a lista de
artigos presentes na revista, permitindo a leitura no linear da mesma, podendo ser
acessada a partir de qua uer na da re s a e ara a na e ao en re ar os.
A navegao entre artigos precisava apresentar setas navegacionais para os
usurios que acessassem a revista via computador e responder a eventos touch em
tablets e smartphones. Devido s diferenas entre os sistemas operacionais
utilizados por dispositivos mveis e a variao de funcionamento do sistema Android
entre dispositivos de diferentes marcas, levou-se um tempo superior ao previsto at
que a navegao funcionasse de forma favorvel em diferentes sistemas
operacionais.
Aps definir o funcionamento dos principais elementos necessrios ao
funcionamento da revista, passou-se a avaliar as especificidades a serem utilizadas
83
em cada um dos artigos que fariam parte do modelo da mesma. Nesta fase foram
listados os tipos de interatividade que estariam presentes em cada artigo e que
fossem precisar de codificao mais elaborada (do tipo que pudesse ter conflito com
partes j existentes no projeto). Passou-se a testar ento os elementos necessrios
para a revista (overlays e ampliao de imagens, lightboxes), e tambm os que no
haviam sido previamente listados, mas que pudessem ser utilizados em artigos
futuros para ter-se grande opo de recursos caso fossem necessrios.
Nesta fase inicial, levou-se mais em considerao o que poderia ser
implementado de forma real no projeto do que o layout de cada artigo, para que
quando as alternativas de diagramao dos mesmos fossem geradas, j seria
possvel saber o que poderia ou no ser utilizado, uma vez que a revista prev a
gerao de layouts que favoream a compreenso de temas relacionados grade
curricular do curso. Foram descartados ento, scripts que no oferecessem
compatibilidade com o cdigo bsico de todos os artigos ou que no funcionassem
corretamente em todos os dispositivos para os quais a revista pretendia ser
oferecida. Esse tipo de teste fez-se necessrio uma vez h bastante diferena entre
uma srie de imagens altamente idealizadas do layout e de como a revista deve
funcionar sem considerar a real possibilidade de implementao de tais elementos
da forma que se foi planejada.
O maior desafio desta parte do projeto foi fazer com que os scripts que
seriam utilizados funcionassem da forma esperada tanto em dispositivos que
utilizam iOS quanto Android, sendo um desafio maior obter resultados iguais em
dispositivos Android, uma vez que a variao na verso instalada e at mesmo na
marca do dispositivo testado resultavam em mal ou no funcionamento da
codificao utilizada. Portanto optou-se por criar um modelo otimizado para iOS,
mas que tambm funcione em dispositivos que utilizam Android, mesmo que
apresente pequenas diferenas no desempenho.
Concludos os testes desta fase, passou-se ento a pensar nas alternativas
para os layouts a serem utilizados nos artigos j considerando as possibilidades de
interao aqui testadas. O modelo da revista contendo os artigos finalizados,
incluindo as verses responsivas, encontram-se disponveis online no site
www.embranco.org.
84
5.1 GERAO DE ALTERNATIVAS
Para es a e e er o n u o o a aud n a re so a e ar ue o u
precisa ser dito est diretamente ligado ao o o ser d o; a or a sua e o
contedo verbal so inseparveis (WHITE, 1982).
Designers precisam pensar como editores, e vice versa, o design grfico no
algo que se adiciona de modo a fazer a pgina parecer mais vvida (WHITE,
1982). Tendo isso em mente, as pginas apresentadas a seguir, foram pensadas de
forma a tirar-se o melhor proveito do contedo, facilitando o fluxo de leitura.
Foi levado em considerao, para o desenvolvimento dos layouts a
utilizao de no mais que metade da tela para textos mais extensos, concordando-
se o Nas en o ( 5 . 3) ue a u ao de os ormatos de
informao (simulaes, imagens estticas, textos, som, animaes, vdeos)
desempenham um papel importante na aquisio do conhecimento quando bem
u ados junto a que
o esforo de movimentar os olhos atravs de longas linhas de texto na tela
do computador cansa rapidamente o usurio. Dessa forma, h uma queda
na compreenso com longas linhas de texto. Uma sugesto seguir a
orientao adotada pelos jornais online, que utilizam uma nica coluna de
texto que no toma mais que 50% da tela (40 a 60 caracteres por linha)
(NASCIMENTO, 2005, p.4).
Sendo assim, buscou-se utilizar a menor quantidade possvel de matrias

com textos longos e ininterruptos, sendo privilegiado o uso dos blocos de texto,
lightboxes e sliders. Vale tambm citar que a gerao de alternativas foi embasada
em estudos anteriores sobre o que seria realmente possvel de ser desenvolvido. A
seguir apresentam-se algumas das alternativas geradas para o modelo da revista.
5.1.1 Capa
Com base nas diretrizes apontadas no captulo anterior, optou-se por criar
uma capa que tivesse como objetivo principal a funo identitria que permita a sua
diferenciao entre as demais edies. Uma vez que a revista no seria
85
apresentada em lojas de aplicativos online, e sim acessada apenas via seu site, no
se faz necessrio que sua capa precise se destacar de outras publicaes.
A u as d re r es de ed orao ora se u das a na a a e da a a
um elemento majoritrio na imagem da publicao como um todo, e deve buscar
uma reao do leitor (WHITE, 1982), portanto para o desenvolvimento da capa da
revista, optou-se por primeiramente apresentar a marca ao leitor e ento a temtica
abordada pela edio escolhida pelo mesmo.
Como a revista segue o sistema on-demand e portanto no seria baixada
integralmente para o dispositivo escolhido pelo leitor antes que este iniciasse a
leitura, foi necessrio que o tempo de carregamento da capa fosse inferior ao de
qualquer um dos demais artigos presentes na revista, o que fez com que qualquer
tipo de contedo que pudesse tornar seu carregamento mais lento fosse descartado.
Optou-se ento por utilizar animaes criadas inteiramente utilizando CSS
para que a pgina pudesse ser carregada rapidamente mas no utilizasse apenas
uma imagem esttica, tentando assim, torn-la mais atrativa. No sendo possvel
exemplificar as demais animaes testadas neste documento, aqui apresenta-se
somente a verso final utilizada no modelo da revista.
A capa apresenta um plano de fundo vermelho, cor associada temtica
abordada no modelo da revista, sobre ele h diversos retgulos animados
(associados aos retgulos presentes no balo da marca) em diferentes tonalidades
de vermelho. Sobre os retngulos, a marca da revista apresentada (a princpio
somente o balo e em seguida a verso horizontal da marca), seguido pelo assunto
abordado pela mesma (figura 57). Ao final da animao, aps aparecer o tema da
revista, na parte superior direita aparece a verso oficial da marca junto ao nmero
da edio, abaixo do tema aparecem chamadas para quatro artigos presentes na
edio (figura 58).
Figura 57 - Incio da animao da capa, mostrando a apresentao da marca

86
Figura 58 - Finalda animao, mostrando o tema abordado, marca oficial e chamadas

Esse formato de capa ser utilizado para as demais edies da revista,

sendo alterada a cor de fundo e havendo a opo de substituir os retngulos por
algo mais significativo para a temtica abordada, como por exemplo a utilizao de
ilustrao na revista voltada este tema.
5.2.2 Sumrio
Os aspectos mais importantes no desenvolvimento do sumrio so a clareza

e praticidade de visualizao do contedo presentes na revista, para tanto optou-se
por utilizar uma diagramao simples cujo foco seria a temtica e os artigos
presentes na publicao, deixando de lado a utilizao de elementos que teriam
funo apenas esttica, algo que se faz necessrio principalmente ao considerar o
carter responsivo da revista, uma vez que tais elementos estticos poderiam
ocupar muito espao em telas menores.
Considerando as particularidades de publicaes digitais, o sumrio deve
conter as intrues de uso da revista, bem como identificar os cones utilizados para
contedos multimdia, alm de conter cones que ao serem clicados direcionam o
leitor s contas da revista em diversas redes sociais. Ainda no menu so
apresentadas as informaes relacionadas ao editorial da revista. Como o projeto
prev uma verso de acessibilidade, tambm faz-se necessrio que esta indicao
esteja presente no sumrio para facilitar o acesso essa verso quando houver
necessidade por parte do leitor.
Inicialmente cogitou-se utilizar a maior parte do espao da pgina para
apresentar os artigos presentes na edio e em uma coluna direta da tela seriam
utilizados hiperlinks para que o leitor pudesse acessar tanto as intrues de uso
87
quanto o editorial (que seriam abertos em lightbox), assim como hiperlinks para as
contas em redes socias, e para acessar a verso de acessibilidade da revista.
Embora esta diagramao permitisse o uso de grandes chamadas para os
artigos, o que inicialmente parecia ser a melhor opo, ela pareceu no atender s
necessidades da revista, uma vez que se assemelhava bastante ao visual de um site
que utiliza grid para listar seus artigos.
Optou-se ento por diminuir o espao utilizado pela lista de artigos e
adicionar um pequeno texto introdutrio a respeito da temtica abordada em cada
uma das edies. As intrues de uso tambm so integradas diretamente na
pgina que funciona como sumrio, no sendo necessrio que o leitor clique em um
hiperlink para acessar tais informaes em um lightbox tornando sua visualizao
mais rpida. O sumrio continua apresentando hiperlinks para a verso de
acessibilidade assim com para as contas em redes sociais, tambem atravs de
hiperlink o leitor pode acessar o editorial, que exibido em lightbox (figura 59).
Figura 59 - Verso final do sumrio para desktop e tablet

5.2.3 Artigo Ana o a o r a
ara a d a ra ao do ar o Ana o a o r a o ou-se inicialmente

utilizar um ttulo simples utilizando a fonte Tungsten, e apresentar o contedo em
trs colunas, cada coluna conteria um box que teria em seu lado esquerdo uma
representao da letra destacando-se o elemento cuja descrio estaria em um
curto texto do lado direito do box (figura 60 a).
88
Outra opo seria apresentar o contedo utilizando duas colunas o que

permitiria que a imagem da letra tivesse um tamanho maior e a descrio do
elemento destacado na imagem estaria abaixo da mesma. As informaes poderiam
tambm ser apresentadas utilizando trs colunas que conteriam apenas as imagens
das letras, e ao clicar sobre elas, um lightbox seria aberto e nele estaria a descrio
do elemento destacado na imagem (figura 60 b).
Figura 60 - Alternativas geradas para o artigo Anatomia Tipogrfica

Por fim optou-se por utilizar o prprio ttulo do artigo para j exemplificar e
definir os elementos presentes e destacados nas letras presentes na palavra
o r a. ara de ons rar os de a s e e en os as a ens so d s os as e
boxes que apresentam o cone de contedo adicional que ao ser clicado ou tocado
substitui a imagem pela descrio do elemento nela destacado.
A erso na do ar o Anatomia tipogrfica (figura 61), foi elaborado com
a inteno de exemplificar e dividir o contedo de uma maneira a permitir uma
rpida assimilao dos termos fazendo relao com a imagem.
O primeiro painel composto pelo ttulo do artigo - ana o a o r a
utilizando a fonte Adobe Caslon Pro, a imagem apresenta um grid que delimita o
a an o de dos ascendentes e descendentes. No prprio ttulo, partes das
letras so destacadas em vermelho, e prximo a elas h o cone para informaes
adicionais a respeito do que foi destacado na imagem. uma forma introdutria,
resumida, contendo apenas os termos que esto presentes nas letras do ttulo, de
modo a chamar a ateno do leitor para as demais informaes.
89
Figura 61 - Verso final do artigo Anatomia Tipogrfica

Os demais painis apresentam pequenos boxes com imagens dos

caracteres com linhas e ou partes destacadas que dizem respeito ao termo que est
escrito logo abaixo dos mesmos, e novamente apresenta o cone para mais
contedo, que ao ser clicado ou tocado um pequeno overlay substituir apenas o
box selecionado, apresentando uma pequena descrio do termo. Este modelo
ajuda a delimitar a informao, fazendo com que o leitor leia apenas aquilo que lhe
interessar.
Tendo em vista que textos muito longos desmotivam a leitura no
computador, os blocos de texto so o recomendado para manter o interesse, mesmo
que o contedo seja extenso, esse artigo se assemelha muito a obras de referncia,
quase como um dicionrio ilustrado, o que lhe proporciona vantagens ao que Dias
(2002, p.24) afirma que as menores quantidades de informaes textuais contidas
em dicionrios e enciclopdias eletrnicas a serem lidas na tela, facilitam o
trabalho do leitor, alm de possuir grande hipertextualidade, permitindo uma leitura
que no seja necessariamente linear.
Na figura 62, exemplificado como o artigo visualizados em diversos
dispositivos, apresentando um dos painis do artigo tambm em verso responsiva.
No APNDICE B so mostradas todos os painis presentes no artigo.
Figura 62 Artigo Anatomia Tipogrfica visualizado em diversos dispositvos

90
5.2.4 Ar o L n a do e o
Para criar o artigo para apresentar uma linha do tempo demonstrando os

diversos estilos tipogrficos, inicialmente pensou em criar uma linha no rodap da
pgina onde apareceriam as datas e um exemplo de letras daquele estilo abaixo da
data, acima da data a pgina apresentaria separaes verticais que iriam conter
textos a respeito de cada um dos estilos mencionados no artigo, para que essas
separaes verticais pudessem conter todo o texto necessrio, a pgina
apresentaria rolagem horizontal para que o leitor acessasse as informaes em sua
totalidade (figura 63 a).
Bastante semelhante ao exemplo mencionado no pargrafo acima, esta
verso no apresentaria as separaes horizontais contendo texto, esse seria
mostrado apenas ao colocar o mouse (ou o ar) so re o s na de + rximo ao
estilo, abrindo um balo de informaes contendo o texto relativo ao assunto.
Cogitou-se tambm o uso de grandes letras para exemplificar o estilo
tipogrfico junto ao ano de seu surgimento e ao lado de cada estilo haveria um sinal
de + ue ao ser cado abriria um lightbox sobre a pgina com informaes sobre
o estilo (figura 63 b). Mais uma opo seria uma linha do tempo vertical que ao lado
do ano de surgimento dos estilos haveria um balo que conteria informaes
resumidas sobre o estilo e ao clicar ou o ar no s na de + u lightbox seria aberto
sobre a pgina contendo mais informaes (figura 63 c).
Por fim optou-se por utilizar um painel para cada estilo tipogrfico, por
permitir demonstrar com maior facilidade o formato das letras deste estilo, junto a
informaes resumidas a respeito do estilo presente no painel e novamente ao clicar
no s na de + u lightbox aberto sobre a pgina contendo mais informaes, bem
como um exemplo de alfabeto completo utilizando tal estilo tipogrfico(figura 63 d).
Figura 63 - Alternativas geradas para o artigo Linha do Tempo

91
A verso finalizada do artigo (figura 64) apresenta em seu primeiro painel o

ttulo do artigo ocupando a totalidade do painel. Os demais painis apresentam o
nome do estilo do perodo composto por uma fonte representante deste mesmo
estilo. Ao lado da imagem est contido texto resumido que descreve as
caractersticas desse perodo, ao clicar no cone de contedo adicional, o texto
completo aberto em um lightbox. Esse lightbox utiliza rolagem de tela para
apresentar as informaes adicionais, uma vez que ao procurar por algo na internet,
os leitores esto em busca de informaes de forma mais sintetizada do que em um
livro, e a utilizao desse recurso, permite que os painis sejam utilizados para
conter apenas a informao de forma sintetizada, tornando a leitura mais dinmica e
evitando que o leitor necessite passar por vrios painis com contedos que possam
ser considerados extensos demais, e talvez at desnecessrios para o que o leitor
est buscando.
Figura 64 - Verso final do artigo Linha do Tempo

Para o modelo da revista, foi desenvolvido apenas um painel que contm

informaes adicionais em lightbox para exemplificar seu funcionamento, os demais
painis apresentam apenas as informaes de forma resumida a respeito do tema.
Abaixo (figura 65) demonstra-se como o artigo visualizados em diversos
dispositivos e no APNDICE C so mostradas todos os painis presentes no artigo.
Figura 65 Artigo Linha do Tempo visualizado em diversos dispositvos

92
5.2.5 Ar o as
Para artigo contendo dicas pensou-se inicialmente em listar todas as dicas

dentro de boxes dispostos em duas colunas, cada box conteria o nmero seguido da
dica, ao lado de cada painel estaria o cone de contedo adicional, que ento abriria
um overlay sobre a pgina apresentando exemplos relacionados ao contedo da
dica selecionada (figura 66 a).
Opcionalmente cada painel mostraria uma dica, o nmero e texto
correspondente a dica estaria localizada no lado esquerdo da tela, e do lado direito
estariam os exemplos em um slider de imagens que atravs do mouse ou eventos
touch poderia exibir mais imagens (figura 66 b).
Seguindo o modelo anterior, porm com poucas modificaes surgiram duas
outras possibilidades: na primeira ao clicar nas miniaturas de imagens, abriria um
overlay contento todos os exemplos desta dica (figura 66 c); na segunda ao clicar
nas miniaturas, apenas a imagem clicada seria aberta em tamanho maior em
lightbox e nela haveria uma legenda informando as fontes utilizadas nos exemplos
(figura 66 d).
Considerando que as dicas no possuem um texto longo, optou-se ento por
apresentar duas dicas em cada painel, e manter a opo de clicar em cada miniatura
e mostrar sua verso ampliada em um lightbox seguido de legenda (figura 66 e).
Figura 66 - Alternativas geradas para o artigo Dicas

O primeiro painel da verso final do artigo (figura 67) apresenta o ttulo do

mesmo no lado superior esquerdo do painel e a primeira dica no lado inferior
esquerdo, cada um dos demais painis apresenta duas dicas. As dicas so
apresentadas utilizando o nmero de cada dica em destaque tendo ao lado o nome
93
da mesma alinhado verticalmente ao centro da altura do nmero, os nmeros e

ttulos utilizam a fonte Tungsten Medium na cor vermelha.
Abaixo do nmero e ttulo aparece a dica em si, utilizando a fonte Open
Sans em cor cinza. Abaixo do texto de cada dica, aparecem miniaturas de exemplos
demonstrando a informao apresentada na dica, tais exemplos utilizam diversas
fontes para melhor exemplificar a dica. Ao clicar sobre uma das miniaturas, ela
aberta em tamanho maior em lightbox, contendo uma legenda com o nome da fonte
utilizada no exemplo.
Figura 67 -Verso final do artigo Dicas

Na figura 68, exemplificado como o artigo visualizados em diferentes

dispositivos. Todos os painis do artigo podem ser vistos no APNDICE D.
Figura 68 - Artigo Dicas visualizado em diversos dispositvos

5.2.6 Ar o A o ra a e a ar e de Sau ass
Esse artigo a ar e da seo ur os dades pois no algo fundamental

no ensino da tipografia, fazendo parte da proposta de entretenimento da revista ao
estabelecer-se uma relao com o cinema. oferecido um apanhado geral sobre a
obra de Saul Bass na arte sequencial de crditos e abertura de fi es a o ra a
94
e o en o. or ser u assun o u o sua us ou-se um modo de

rans are er ra a en e a essn a de ass a de rodu r a o o o u a
re or a e sua on ando u a s r a or e o de a ens.
Foram selecionados quatro diretores com quem Saul Bass trabalhou durante
sua carreira (executando crditos de filmes e psters) com o objetivo de descrever o
trabalho realizado. Isso permitiria o uso de fotos do prprio Bass e dos diretores;
mas na busca da linguagem visual que transparecesse algo mais, foram
desenvolvidas ilustraes que remetessem a alguns dos trabalhos mais icnicos de
Bass.
Uma de suas caractersticas mais marcantes a utilizao de cores
chapadas junto a formas que lembram recortes de papel (muitas vezes realmente
sendo recortes), tudo muito simples, mas que de alguma forma traz uma ligao
direta com o filme representado. Foram observadas as caractersticas mais
marcantes do seu tipo de trabalho.
Notou-se como era recorrente o uso do vermelho e outras cores quentes
junto ao preto e branco o que foi uma grande vantagem devido cor utilizada na
revista e que a grande maioria das formas possuem contornos irregulares,
transmitindo a ideia de algo recortado, sendo normalmente utilizadas silhuetas.
Foram esses os parmetros utilizados para o desenvolvimento das
ilustraes, que retrataram o prprio Bass, Alfred Hitchcock, Otto Preminger, Martin
Scorsese e Stanley Kubrick. Nas fotos para referncia todos esto olhando
diretamente para a cmera, com o proposito de manter uma unidade ao conjunto.
Foi descartado o uso de silhuetas a produo de algo semelhante
dificultaria o reconhecimento dos diretores e como o objetivo foi a inspirao na
obra, e no uma cpia fidedigna, as ilustraes desenvolvidas tiveram um maior
nvel de detalhamento (figura 69).
Figura 69 - Exemplo do processo de gerao de alternativas com base em Alfred Hitchcock

Fonte: Autoria prpria, 2014.
95
Foram vrios os estudos at se chegar s verses finais de cada ilustrao.

Todas foram desenvolvidas digitalmente por meio do Software de vetorizao
Illustrator , buscando um aspecto que mistura stencil e recortes de papel a partir da
sobreposio de formas irregulares, fazendo uso da cor vermelha a fim de manter
a unidade presente nos demais artigos preto e cinza sobre o fundo branco.
Figura 70 - Verses finais de Martin Scorsese, Alfred Hitchcock, Otto Preminger e Stanley
Kubrick e Saul Bass
Para o desenvolvimento dos layouts, usou-se como inspirao o design dos

psteres criados por Bass para o filmeThe Man with the Golden Arm (O
Homem do Brao de Ouro) de 1955 dirigido por Preminger, e North by Northwest.
Foram utilizadas formas relacionadas a este dois projetos para a
composio de todos os painis, e optou-se por utilizar fontes que remetessem ao
trabalho de Bass para a composio dos ttulos ao invs da Tungsten, por
permitirem uma conexo e associao com a obra do designer. So essas a
Hitchcock, desenvolvida por Matt Terich e inspirada nos letreiros de Bass, e tambm
a Paper Johnny Einhaib que simula recortes de papel, ambas disponveis
gratuitamente (figura 71).
Figura 71 - Exemplo de painel e fontes

96
Um modelo bsico de painel foi desenvolvido ese repete ao longo da matria

apresentando uma ilustrao e espao para o contedo sobre o diretor em questo.
O subttulo apresentado neles composto por uma reproduo do brao do pster
de The Man with the Golden Arm o nome de Saul Bass sobre uma tarja vermelha
seguido pelo nome do diretor tratado no painel (figura 72).
Figura 72 - Painel de Otto Preminger

Outros modelos foram desenvolvidos de forma mais livre para abertura e

finalizao do artigo (figura 73), mas se utilizando dos mesmos elementos e
tipografia, todos ajustados ao grid es o ue se u ndo u a us e de o os o
a es on nea o o osicionamento mais intuitivo do que os demais.
Figura 73 - Painis de abertura e finalizao

Abaixo mostrado como o artigo visualizado em diversos dispositivos

(figura 74). O APNDICE E apresenta todos os painis presentes no artigo.
Figura 74 - Artigo sobre Bass visualizado em diversos dispositvos

97
5.2.7 Seo Re o endaes
A seo re o endaes e o o o e o s ar rn a en e links e

livros que contm informaes relevantes ao contedo apresentado pela revista.
Inicialmente cogitou-se list-los de forma bastante simples separando a pgina em
duas colunas e colocando as informaes em uma lista (figura 75 a). Novamente
utilizando duas colunas desta vez seria utilizada uma miniatura da capa ou imagem
do site com uma descrio de seu contedo ao lado da imagem (figura 75 b).
Ou ra o o ser a er a enas as a a ras links e ros se u das de
cones para ilustr-los: ao clicar em uma das opes a pgina deslizaria para um
dos lados (figura 75 c) ou em uma outra opo abriria um overlay (figura 75 d),
mostrando ento as recomendaes do assunto selecionado. Estes so
apresentados utilizando uma miniatura da capa do livro ou imagem do site ilustrando
seu contedo: ao clicar ou tocar na imagem, mostrada uma descrio do livro ou
link apresentado.
Figura 75 - Alternativas geradas para a seo Recomendaes

A verso final do artigo apresentada em um nico painel, contendo cones

seguidos do nome das divises de recomendaes apresentadas na edio. Os
cones foram desenvolvidos exclusivamente para este tipo de pgina, que traz
recomendaes de livros e links relacionados ao contedo da revista (figura 76).
Figura 76 - Verso final da seo recomendaes

98
Ao clicar em um dos cones, abre-se um overlay ue on er o e u o da

seo selecionada, este overlay contm pequenos boxes com os livros ou links,
mostrando miniaturas das capas ou pginas, contendo o cone de informao
adicional: ao clicar ou tocar em um dos boxes, so apresentadas no mesmo local
informaes resumidas sobre a obra ou pgina. Ao clicar no cone que representa
acesso a links externos, o leitor direcionado para o link em questo, ou para uma
pgina onde possa adquirir o livro ali representado.
Na figura 77, mostrada a visualizao do artigo em diversos dispositivos, e
todos os seus painis so apresentados no APNDICE F.
Figura 77 - Artigo recomendaes visualizado em dispositvos mveis

5.2.8 Seo ra a o dos Le ores
Para a pgina onde os leitores da revista podem enviar seus trabalhos,

pensou-se em trs opes diferentes. A primeira apresentaria os trabalhos em um
slider de fotos horizontal e teria informaes sobre o autor abaixo da imagem que
ocuparia a totalidade do painel (figura 78 a). Outra opo seria mostrar miniaturas
dos trabalhos seguidos das informaes a respeito do autor em boxes que teriam
tamanhos exatos (figura 78 b). Uma variao desta opo apresenta miniaturas em
tamanhos proporcionais do trabalho enviado, e as demais informaes fornecidas
so apresentadas em lightbox (figura 78 c). Nestas duas ltimas opes as imagens
podem ser abertas em tamanho maior ao clicar nas miniaturas.
99
Figura 78 - Alternativas geradas para o artigo trabalhos dos leitores

Para a vero final da pgina optou-se pela utilizao da ltima opo. Essa
pgina contm o que pode ser chamado de real interatividade, ou seja, a
interatividade mtua, em que o leitor poderia interagir diretamente com a revista,
enviando diretamente da revista material que ali seria exibido, mediante aprovao
da equipe.
O layout composto por um conjunto de imagens, posicionadas na pgina
utilizando o script chamado masonry. Clicando sobre uma imagem, esta aberta
em lightbox, no qual ela apresentada em tamalho ampliado alm de fornecer
informaes sobre a imagem, como ttulo, nome do autor e uma descrio sobre a
mesma (figura 79).
Figura 79 - Verso final da seo trabalhos dos leitores

Junto ao ttulo da pgina apresentado um link para que os leitores possam

enviar seus trabalhos e ao clicar em tal link apresentado, na mesma pgina, um
formulrio para envio do trabalho. Essa seo da revista no apresenta painis e
sim rolagem de tela pois o contedo ser publicado de forma automatizada assim
que a imagem enviada pelo leitor seja aprovada por um moderador e a utilizao de
painis no permitiria a publicao de tal contedo de forma simplificada.
A figura 80 exemplifica como o artigo visualizado em diversos dispositivos,
e no APNDICE G, so mostradas mais telas do artigo, incluindo o formulrio que
permite que os leitores enviem seus projetos referentes ao tema a partir da revista.
100
Figura 80 - Artigo trabalho dos leitores visualizado em dispositvos mveis

5.3 PESQUISA DE USABILIDADE
A pesquisa de usabilidade do modelo da revista (APNDICE H) foi realizada

para obteno de dados quali-quantitativos a respeito do modelo de revista
desenvolvido, nesta pesquisa foram avaliados apenas os aspectos relacionados
facilidade de uso da revista, e no ao seu contedo, uma vez que nem todos os
participantes eram estudantes de design e os sistemas navegacionais utilizados
podem ser implantados em revistas de temticas variadas.
5.3.1 Coleta e anlise de dados
A coleta de dados foi realizada por meio de questionrio online criado via
GoogleDocs cujo link foi enviando via email. A pesquisa foi composta por perguntas
de mltipla escolha, dicotmica e que utilizam a escala Likert (na qual os
entrevistados demonstram seu nvel de satisfao sobre determinada questo, neste
caso utilizando notas que variam de 1 a 5, sendo 5 a melhor nota) para avaliar o uso
da revista no dispositivo escolhido pelo usurio. Na pesquisa h tambm uma
questo aberta para que os participantes possam criticar ou dar sugestes a
respeito da revista.
O levantamento de dados foi realizado entre os dias 15 e 17 de setembro de
2014, os participantes eram jovens de idade entre 16 e 23 anos e em funo desta
data ter coincidido com as frias da UTFPR optou-se por no realizar a pesquisa
101
exclusivamente com estudantes de design. Ao final do segundo dia com o

questionrio disponvel online, aps conseguir que 50 participantes respondessem
pesquisa e ter observado no haver grande alterao entre as respostas obtidas,
optou-se por encerrar a coleta de dados, uma vez que no se acreditava que mais
tempo com esse questionrio disponvel faria com que se obtivesse uma alterao
significativa dos resultados.
A pesquisa apontou a preferncia pelo uso de desktops e notebooks, uma
vez que 90% dos participantes os utilizaram para avaliar a revista, tablets foram
utilizados por 10% e nenhum participante utilizou smartphone. Isso refora os dados
obtidos na pesquisa anterior, quando os desktops e notebooks tambm foram os
dispositivos preferidos para acessar a internet justificando assim a prioridade dada
ao desenvolvimento da diagramao para estes dispositivos (GRFICO 9).
Dispositivo utilizado para avaliar a revista
10%
Computadores
Tablets
Smartphones
90%
Grfico 9 Dispositivo utilizado para avaliar a revista

Em relao facilidade de uso do sistema de navegabilidade da revista, o

resultado da pesquisa apontou que modelo desenvolvido foi considerado favorvel
ao uso, sendo que 88% dos participantes avaliaram o sistema de navegabilidade
com nota 5 e 12% com nota 4 (GRFICO 10), no houve ocorrncia de nota abaixo
de 4. Nenhum dos participantes da pesquisa sentiu a necessidade de voltar s
instrues de uso para relembrar como utilizar algum dos elementos presentes na
revista (GRFICO 11).
102
Eficincia de uso do sistema Necessidade de voltar s instrues de

navegacional da revista uso
88%
Nota 4 Sim
Nota 5 No
12% 100%
Grfico 10 Eficincia de uso do sistema Grfico 11 Necessidade de voltar s instrues

navegacional da revista de uso
Este resultado no foi surpreendente, uma vez que usurios desta faixa
etria possuem uma facilidade maior em utilizar este tipo de publicao de maneira
mais intuitiva, j que ela se assemelha a diversas outras publicaes digitais e
aplicativos aos quais j esto familiarizados: isso vai de encontro com as heursticas
de usabilidade de Nielsen consideradas para a criao da revista.
Os elementos interativos presentes na revista (lightboxes, sliders e
ampliao de imagens, vdeos, etc.) tambm foram considerados fceis de utilizar,
92% dos participantes conferiram nota mxima ao mesmo e 8% nota 4 (GRFICO
12).
No que diz respeito legibilidade da revista, novamente os resultados foram
favorveis, 90% dos participantes avaliaram o uso de tipografia na revista com nota
5 e 10% com nota 4 (GRFICO 13). Comprovando assim que os estudos iniciais
feitos acerca da tipografia a ser utilizada na revista estavam corretos, e que
felizmente existem boas opes de fontes gratuitas para serem aplicadas ao texto
corrente em projetos digitais.
Facilidade de uso dos elementos Legibilidade da revista

interativos.
8%
10%
Nota 4
Nota 4
Nota 5
Nota 5
92% 90%
Grfico 12 Facilidade de uso dos elementos Grfico 13 Legibilidade da revista

interativos. Fonte: autoria prpria, 2014
103
Em relao diagramao da revista, 4% dos participantes avaliaram a

revista com nota 3; 20% com nota 4 e 76% com nota 5 (GRFICO 14). Em relao a
questo em aberto, a revista no recebeu nenhuma crtica direta em relao sua
apresentao e funcionamento, porm, foi mencionado mais de uma vez que a
temtica abordada no era necessariamente interessante ao participante, e que a
utilizao de mais fotos poderia tornar a revista mais atrativa.
Atratividade da revista
20%
Nota 3
4%
Nota 4
Nota 5
76%
Grfico14 Atratividade da revista

Durante a pesquisa online nenhum dos participantes avaliou a revista

utilizando smartphone, portanto para testar sua viabilidade neste meio foi pedido
para que trs pessoas realizassem o teste utilizando este dispositivo. Essa avaliao
apontou que embora a revista visualizada em um smartphone mantenha a facilidade
de uso dos outros dispositivos, as alteraes feitas na diagramao para permitir
uma boa visualizao e legibilidade do contedo em telas pequenas torna a revista
menos atrativa visualmente. Porm quando se considera a necessidade de acessar
informaes atravs de um smartphone, o visual da revista (ou site) acaba tendo
importncia secundria ao contedo acessado, uma vez que os entrevistados
afirmaram que s utilizam tais dispositivos para consultas de contedo acadmico
quando no possvel utilizar um computador.
Como os resultados obtidos em relao ao modelo de revista desenvolvido
neste trabalho de diplomao foram bastante favorveis em todos os pontos
avaliados pelos participantes da pesquisa, as autoras no julgaram necessrio que
fossem efetuadas alteraes significativas no modelo.
104
6 CONSIDERAES FINAIS
A pauta do projeto partiu da criao de um material de apoio, no formato

digital, para estudantes de design grfico, composto por um conjunto de revistas que
seriam disponibilizadas em um site especfico para tal ao. Cada edio da revista
trataria de um assunto especfico, utilizando interatividade para tornar a leitura mais
dinmica. A partir dos resultados da pesquisa inicial realizada com alunos de
diversos perodos do curso, notou-se que as necessidades sentidas pelas autoras
eram comuns entre os demais alunos, portanto optou-se por verificar a viabilidade
de projeto desenvolvendo um modelo da revista, cujo tema abordado (tipografia) foi
definido tambm com os resultados obtidos com a pesquisa inicial.
Optou-se pela utilizao de revista e site como meio de divulgao de
informaes relevantes ao meio acadmico, apresentadas de forma mais sintetizada
do que em um livro, devido praticidade e rapidez para a divulgao do produto
final, alm deste ter custo de produo bastante inferior ao de publicaes impressa.
A partir do levantamento de dados e estudos sobre design editorial, revistas
impressas e principalmente digitais, foi possvel estabelecer parmetros das
necessidades impostas para esse tipo de publicao. Por ter seu contedo voltado
para temas acadmicos, foram consideradas as temticas abordadas nos artigos e
procurou-se desenvolver layouts que apresentassem o assunto de forma dinmica
na tentativa de criar um modelo que pudesse auxiliar no apenas no entendimento
do assunto abordado em sala de aula, mas tambm que pudesse indicar
direcionamentos mais eficientes na busca de informao de qualidade atravs da
seo re o endaes.
Desde o incio dos estudos teve-se em mente o desenvolvimento de uma
revista que pudesse vir a se tornar um projeto real. Por este motivo, propor um
modelo que de fato pudesse ser acessado por outras pessoas era essencial, uma
vez que somente assim se poderia prever com segurana a viabilidade ou no de
real implantao da revista. A viabilidade financeira para a realizao do modelo foi
possvel apenas pelo fato de uma das autoras ter conhecimentos prvios que
possibilitaram o desenvolvimento da codificao necessria para o projeto.
O fato do projeto da revista digital no ter ficado apenas na elaborao de
possveis layouts apresentado apenas com recursos de elaborao semelhantes ou
105
iguais aos exigidos pelo suporte impresso como mera imagem, garante uma
experincia gratificante, pois com isso possvel perceber as implicaes reais que
o desenvolvimento desse tipo de publicao exige. Embora mudanas nos layouts
idealizados nos softwares de edio de imagens j fossem previstas, somente com a
real implantao para o meio digital possvel mensurar as influncias mtuas que
ocorrem no processo: o meio digital exerce influncia, e, portanto alterao no
projeto inicialmente idealizado e o mesmo exige novas pesquisas e testes de
compatibilidade de scripts para que as mudanas no tornem os layouts
demasiadamente minimalistas. Esse projeto acrescentou ainda mais um desafio que
foi o desenvolvimento da parte responsiva da revista, afinal atualmente no se pode
descartar as possibilidades e praticidade advindas com o uso dos tablets e
smartphones, principalmente no meio acadmico.
Ao se fazer uma retrospectiva nos objetivos propostos vale pontuar que: os
conhecimentos necessrios para a execuo do projeto do modelo de revista digital
foram conceituados adequadamente e aprofundados principalmente devido a
deciso de digitalizao de fato do modelo, atravs da codificao; com a pesquisa
inicial se comprovou a necessidade de material de apoio para garantir capacitao
adequada para rea de atuao do curso de Design Grfico, alm dos dispositivos
mais utilizados terem sido confirmados conseguiu-se verificar qual tema recebeu
mais sugesto para elaborao desse tipo material; a anlise das revistas digitais
apontou quais os recursos so mais comumente ofertados nos suportes existentes e
a experincia em adequar a codificao ao projeto e vice-versa permitiu a melhor
compreenso de como funciona a transposio entre o suporte impresso e digital; o
modelo da revista digital foi executado considerando as diferentes dimenses dos
dispositivos disponveis no meio acadmico, apesar do primeiro tema no oferecer
muitas oportunidades para a construo de layouts mais criativos e visualmente
mais atrativos vlido lembrar que a funo principal do projeto priorizar o
aprofundamento tcnico; e finalmente, com a segunda pesquisa foi possvel verificar
a eficincia do uso da revista no quesito navegabilidade dado que o modelo da
revista recebeu em sua maioria avaliaes bastante positivas em relao a seu
funcionamento, e embora nem todos os participantes fizessem parte do pblico-alvo
de leitores a qual a revista se destina, ela foi considerada atrativa pela grande
maioria dos participantes.
106
6.1 CONTINUIDADE DO PROJETO
Levanto em considerao os resultados obtidos com o desenvolvimento do

modelo da revista, possvel visualizar duas possibilidades em relao
continuidade do projeto.
A primeira considera a real implantao da revista e site e para isso seria necessrio
que houvesse o envolvimento de professores e autores para contribuir com a
validao dos contedos a serem publicados, realizar maiores estudos na rea
pedaggica a fim de determinar se a metodologia abordada na construo dos
layouts e uso de elementos interativos realmente facilita e estimula o aprendizado.
Haveria tambm a necessidade de considerar se a utilizao de publicidade
no site compensaria financeiramente as autoras, uma vez que seria necessrio
dedicao quase exclusiva para que o projeto fosse implantado da forma desejada.
Deve-se ter em mente que para um projeto online tornar-se lucrativo a partir do uso
de publicidade ou conseguindo patrocnio preciso que o mesmo tenha grande
visitao diria, sendo ento necessrio que as autoras desenvolvessem grande
parte do projeto sem qualquer tipo de remunerao at que a visitao atingisse
nmeros suficientes para que se pudesse ento procurar por anunciantes ou
patrocinadores; e, obviamente, para conseguir essa visitao seria necessrio um
investimento inicial, alm dos relativos hospedagem do prprio site e revista.
Considerando o tempo necessrio para continuar o desenvolvimento do
projeto, e por no gerar qualquer tipo de lucro inicial, tornaria a criao de uma
equipe, que ajudaria a produzir material de forma mais rpida, complexa, uma vez
que todos os envolvidos no teriam qualquer tipo de retorno financeiro a princpio.
Outra possibilidade aprimorar a codificao j utilizada no modelo da
revista, visando o desenvolvimento de uma plataforma de publicao que permita a
criao de revistas similares ao modelo apresentado, sem que os envolvidos na
produo destas precisem ter conhecimentos prvios sobre codificao.
Considerando a utilizao da plataforma de publicao de contedo WordPress
como base a mesma utilizada no modelo apresentado a codificao a ser
desenvolvida funcionaria como um plugin, que ao ser instalado ofereceria novas
funcionalidades, voltadas criao de layouts de revistas, que seriam utilizadas em
conjunto com o que j oferecido pelo prprio WordPress, extendendo assim seu
107
funcionamento. Essa possibilidade acaba sendo mais atrativa, do ponto de vista

financeiro, uma vez que no seria necessrio dedicar tanto tempo ou fazer qualquer
tipo de investimento at que o produto estivesse finalizado e pronto para venda.
108
REFERNCIAS
Alternative Press [iPad]. Edio 300: North Hollywood: Alternative Press Magazine,
Inc, 2003. ISSN 1065-1667.
AUX [iPad]. Toronto: Blue Ant Media Productions Inc, 2003.
BARBOSA, Maria Cristina B. Os primrdios do design grfico moderno

emeditorao no Brasil. Klaxon & Base: duas revistas, dois exemplos no
modernismo. 1996. Dissertao (Mestrado) UFRJ, Escola de Comunicao, Rio de
Janeiro, 1996.
BARBOSA, A. C. L. S. Leitura e escrita na web. Tubaro, Revista Linguagem em

(Dis)curso v.5, n.1, 2005. Disponvel
em:<http://portaldeperiodicos.unisul.br/index.php/Linguagem_Discurso/article/view/3
06/322>. Acesso em:24 de abr. 2014.
BIK BOK MAGAZINE [on-line]. Oslo: Varner Group, 2013
COLLARO, Antonio Celso. Projeto grfico - Teoria e Prtica da Diagramao. So

Paulo: Summus Editorial Ltda., 2000.
CHAPMAN, Cameron. Web design industry jargon: glossary and resources.

Disponvel em:<http://smashingmagazine.com/web-design-industry-jargon-glossary-
and-resources>. Acesso em: 14 jul. 2014.
DIAS, Guilherme Atade. Peridicos eletrnicos: consideraes relativas

aceitao deste recurso pelos usurios. Ci. Inf., Braslia, v.31, n.3, Set. 2002.
Disponvel em:<http://www.scielo.br/scielo.php?script=sci_arttext&pid=S0100-
19652002000300002&lng=en&nrm=iso>. Accesso em: 21 abr. 2014.
DONDIS, Donis A. A sintaxe da linguagem visual. So Paulo: Martins Fontes,

1997.
DUARTE, Mrcio. e-Book: desvendando os livros feitos de pixels. Braslia, DF: M10
Design, 2010. Disponvel em:<http://www.slideshare.net/marciom10/ebook-
desvendando-os-livros-feitos-de-pixels>. Acesso em: 23 de abr. 2014.
109
FARINA, Modesto; PEREZ, Clotilde; BASTOS, DORINHO.Psicodinmica das

cores em comunicao. 5. ed So Paulo: Edgard Blcher, 2006.
FREITAS, Leonardo Fialho. Vinheta e sua evoluo atravs da historia: da origem

do termo at a adaptao para os meios de comunicao. 2005. Dissertao (Ps
Graduao em Comunicao Social) - Programa de Ps-Graduao em
Comunicao Social, Pontifcia Universidade Catlica do Rio Grande do Sul, 2005.
Disponvel em:<http://meriva.pucrs.br/dspace/bitstream/10923/2233/1/000388581-
Texto%2bCompleto-0.pdf>. Accesso em:5 mai. 2014.
HARROWER, Tim; ELMAN, Julie M.The Newspaper Designer's Handbook:

Seventh Edition. New York: McGraw Hill, 2013.
HASLAM, Andrew. O livro e o designer II: como criar e produzir livros. 2. ed So

Paulo: Edies Rosari, 2006.
HENRY, Shawn Lawton. Introduction to web accessibility.Disponvel em:

<http://www.w3.org/WAI/intro/accessibility.php>. Acesso em: 13jul. 2014.
HOEFLER,Jonathan. Tungsten font features: four widths. Disponvel

em:<http://www.typography.com/fonts/tungsten/features>. Acesso em: 20 abr. 2014.
HORIE, Ricardo Minoru; e PLUVINAGE, Jean. Revistas Digitais para iPad e

outros tablets - arte-finalizao, gerao e distribuio. So Paulo, SP: Bytes &
Types (eBook), 2012.
KERR, Stephen T. Instructional text: the transition from page to screen, 1986.
EXTRATO disponvel em: http://visiblelanguagejournal.com/articles/article/184/
Acesso em: 20 mar. 2014
KALBACH, James. Designing web navigation. Sebastopol ORe Med a 7.
LESLIE, Jeremy. Novo design de revistas. Barcelona: Gustavo Gili, 2003.
LVY, Pierre. As tecnologias da inteligncia. So Paulo: editora 34, 1993.

110
MRQUEZ, Gabriel Garcia. A melhor profisso do mundo. 20/10/1996 na edio 8

em discurso proferido na 52 Assemblia da Sociedad Interamericana de Prensa
(SIP), em Los Angeles (EUA), em 7 de outubro de 1996. Disponvel
em:<http://observatoriodaimprensa.com.br/news/view/_ed8_a_melhor_profissao_do_
mundo>. Acesso em: 10 abr. 2014.
MORAES, Ary. Ler jornais: reflexes sobre a significao da pgina. Estudos em

Design Design Articles. Rio de Janeiro: Associao Estudos em Design do Brasil, v.
V e VI, n. 2, 1998.
NASCIMENTO, Anna Christina de Azevedo. Princpios de design na elaborao

de material multimdia para a web. Braslia, DF: Ministrio da Educao, 2005.
Disponvel em: <http://rived.mec.gov.br/artigos/multimidia.pdf>. Acesso em: 12 jul.
2014.
NIELSEN, Jakob. Projetando websites. Rio de Janeiro: Campus, 2000.
NIELSEN, Jakob. 10 usability heuristics for user interface design. Disponvel em:
<http://nngroup.com/articles/ten-usability-heuristics>. Acesso em: 30mar.2014.
NIEMEYER, Lucy. Tipografia: Uma apresentao. Rio de Janeiro: 2AB, 2010.
Oxford Dictionary.Magazine: definition of magazine in Oxford dictionary. Disponvel

em:<http://www.oxforddictionaries.com/us/definition/american_english/magazine>.
Acesso em: 5 mar. 2014.
PELEGRINA, J. A.. DicWeb dicionrio de informtica online- glossrio e termos de

informtica. 2010. Disponvel em: <http://dicweb.com/index.htm>. Acesso em: 23
ago. 2014.
PEREIRA, Pereira, Aldemar d'Abreu. Tipos:desenho e utilizao de letras no projeto

grfico. 2. ed. Rio de Janeiro: Quartet, 2007.
PETRINI, Paulo. Um estudo crtico sobre o significado das vinhetas da rede

globo. Ci.Inf., Maring, v26, no.1, p.123-133, 2004. Disponvel em:
<http://periodicos.uem.br/ojs/index.php/ActaSciHumanSocSci/article/view/1568/921>.
Accesso em: 5 mai. 2014.
111
REZENDE, Marco Antonio Amaral. Guia de identidade visual e naming. 2010.

Disponvel em: <http://www.aba.com.br/guiasdemelhorespraticas/pdf/Identidade.pdf>.
Acesso em: 25 jul. 2014.
RIVOAL, Florian. Media queries. Disponvel em: <http://www.w3.org/TR/css3-

mediaqueries>.Acesso em: 21 mai. 2014.
SAMARA, Timothy. Design elements, a graphic style manual. Gloucester,
Massachusetts: Rockport Publishers, 2009.
SAMARA, Timothy. Publication design workbook: a real-world design

guide.Gloucester, Massachusetts: Rockport Publishers, 2007.
SCALZO, Marlia. Jornalismo de revistas. 2. Ed. So Paulo: Contexto, 2004.
VAUGHAN, Tay. Multimedia: making it work. 8. ed. New York: McGraw Hill, 2011.
WHITE, Jan V. Designing for magazines common problems, realistic solutions.R.

R. Bowker Company New York and London, 1982.
WHITE, Jan V. Edio edesign.So Paulo: JSN Editora Ltda. 2005.
Zupi [iPad] So Paulo: Zupi Design, 2014. ISSN 1809-5534.

112
APNDICES
APNDICE A - Pesquisa apresentada aos estudantes de design para levantamento

de dados iniciais necessrios realizao do projeto
Pesquisa
Somos estudantes do 6 perodo de Design Grfico, e esta pesquisa necessria

para levantar dados para a realizao de nosso TD. Com este questionrio
prentendemos verificar qual a preferncia para obteno de informaes sobre a
rea do curso.
Desde j agradecemos a colaborao!
1. Nome:
__________________________________________________________________
2. Qual perodo est cursando?

( ) 1 ( ) 2 ( ) 3 ( ) 4 ( ) 5 ( ) 6
3. Voc l revistas sobre design?

( ) Sim ( ) No
4. Com qual frequncia?

( ) Semanalmente ( ) Quinzenalmente ( ) Mensalmente
5. A revista digital ou impressa?

( ) Digital ( ) Impressa
6. Ao procurar informaes relacionadas a design a preferncia por:

( ) Sites ( ) Livros ( ) Revista
7. Acha necessrio a existncia de material que reuna contedo sobre as diversas

reas do curso?
( ) Sim ( ) No
8. Esse contedo deveria ser voltado para um tema especfico? Qual?
_____________________________________________________
9. Quando necessrio utilizar a internet em sala de aula, qual o dispositivo

utilizado?
( ) PC ( ) Tablet ( ) Smartphone
10. E fora da universidade? Qual o dispositivo preferido?

( ) PC ( ) Tablet ( ) Smartphone
113
APNDICE B - I a ens e a a e a do ar o Ana o a o r a

114
APNDICE C - I a ens e a a e a do ar o Linha do Tempo

115
APNDICE D - I a ens e a a e a do ar o as
116
APNDICE E - I a ens e a a e a do ar o A o ra a e a ar e de Sau ass

117
APNDICE F - I a ens e a a e a do ar o Re o endaes

118
APNDICE G - I a ens e a a e a do ar o ra a o dos e ores

119
APNDICE H - Pesquisa apresentada para verificar o funcionamento do modelo da

revista
Revista Em Branco
A revista que voc ir analisar um modelo apresentado como parte de trabalho de
diplomao para o curso de Design Grfico da Universidade Tecnolgica Federal do
Paran. O objetivo da revista oferecer artigos relativos temtica de tipografia
para complementao de contedos vistos em sala de aula. A partir das respostas
sero consideradas possveis modificaes para a melhoria do projeto.
Obrigada pela participao.
1. Qual O dispositivo utilizado para testar a revista ?

( ) computador / notebook ( ) tablet ( ) smartphone
2. O sistema utilizado para a navegao da revista (elementos e funcionalidades

utilizadas para que o leitor possa se deslocar entre um ponto e outro da mesma,
bem como o rpido acesso lista de artigos presentes na edio) foi eficiente para a
explorao da mesma? Escala de 1 a 5, sendo 5 a melhor nota.
()1 ()2 ()3 ()4 ()5
3. Durante a explorao da revista, houve a necessidade de voltar s instrues de

uso?
( ) no ( ) sim
4. Os elementos interativos (contedo adicional, sliders e ampliao de imagem,

vdeo, etc.) utilizados nos artigos da revista so fceis de usar? Escala de 1 a 5,
sendo 5 a melhor nota.
()1 ()2 ()3 ()4 ()5
5. A tipografia utilizada (tamanho de ttulos, textos, e legendas assim como as fontes

utilizadas nos mesmos) permitem uma boa legibilidade do texto? Escala de 1 a 5,
sendo 5 a melhor nota.
()1 ()2 ()3 ()4 ()5
6. A diagramao (disposio escolhida para a apresentao de textos, imagens e

elementos interativos) fazem com que a revista seja atrativa? Escala de 1 a 5, sendo
5 a melhor nota.
()1 ()2 ()3 ()4 ()5
7. Gostaria de fazer alguma crtica ou sugesto a respeito da revista?

___________________________________________________________________
___________________________________________________________________

Em Branco - Projeto Editorial para Revista Digital Com A Temática de Design Gráfico

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Em Branco - Projeto Editorial para Revista Digital Com A Temática de Design Gráfico

Diunggah oleh

Hak Cipta:

Format Tersedia

UNIVERSIDADE TECNOLGICA FEDERAL DO PARAN

DEPARTAMENTO ACADMICO DE DESENHO INDUSTRIAL

CAMILA BARBIERI DE ALENCAR

EM BRANCO: PROJETO EDITORIAL PARA REVISTA DIGITAL COM

TRABALHO DE CONCLUSO DE CURSO

EM BRANCO: PROJETO EDITORIAL PARA REVISTA DIGITAL COM

Trabalho de Concluso de Curso de

Orientadora: Prof Dr Las Cristina Licheski

TRABALHO DE DIPLOMAO N0 615

EM BRANCO: PROJETO EDITORIAL PARA REVISTA DIGITAL COM A

Camila B. de Alencar cd: 01165267

Trabalho de Diplomao apresentado no dia 25 de novembro de 2014 como

Banca Examinadora: Prof. Dr. Jos Marconi Bezerra de Souza

Prof. Msc. Cludia Bordin R. da Silva

Prof. Dr. Las Cristina Licheski

Prof(a). Msc. Josiane Lazaroto Riva

A Folha de Aprovao assinada encontra-se na Coordenao do Curso.

Agradecemos a todos que de alguma maneira contriburam para a realizao do

Este trabalho apresenta o processo de desenvolvimento de uma revista digital

Palavras-chave: Design Editorial. Revista Digital. WebDesign. Design Responsivo.

ALENCAR, Camila Barbieri de; SANTOS, Maria Luciana Utida. ran o d or a

This paper presents the development process of an interactive digital magazine

Key-words: Editorial Design. Digital magazine. Web Design. Responsive Design.

Figura 1 - e o de a a e su r o da re s a A erna e ress ....................... 32

Grfico 1 - Realizao de leitura de revista sobre design ......................................... 27

1.1 CONSIDERAES INICIAIS

Em plena Era da Informao, comum o aparecimento de novas tecnologias

O acesso informao pode estar ao alcance de qualquer aluno de design,

O projeto foi pensado devido s necessidades sentidas pelas autoras

1.3.1 Objetivo geral

Este trabalho de concluso de curso tem como objetivo criar um modelo de

1.3.2 Objetivos especficos

Para o cumprimento do objetivo geral ser necessrio:

1.4 PROCEDIMENTOS METODOLGICOS

A execuo deste Trabalho de Concluso de Curso deu-se em duas etapas:

1.5 ESTRUTURA DO TRABALHO

O presente trabalho de concluso de curso composto por seis captulos,

grfica, os testes tipogrficos e as decises acerca dos demais elementos

Neste capitulo so abordadas informaes consideradas importantes para a

2.1 DESIGN EDITORIAL

Entre as especialidades que dividem o design grfico, a que diz respeito ao

Sendo assim, o projeto editorial tem necessariamente, quando bem

2.2 DESIGN DE REVISTAS

O projeto grfico de revistas um dos de maior destaque dentro do campo

aprofundamento de assuntos de interesse deste mesmo pblico novamente, mais

(...) cobrem funes culturais mais complexas que a simples transmisso de

Scalzo ainda descreve as funes estticas e culturais que determinam o

Revistas, como j mencionado, so um dos dois principais grupos de

momento em que esto acontecendo so mais explicativas, permitindo um layout

A linguagem grfica, formada pelos diversos elementos presentes no

Dentro dos elementos do projeto grfico, a capa acaba sendo um dos

projeto grfico so os que transmitem a mensagem de maneira mais rpida e

2.3 DA PUBLICAO IMPRESSA DIGITAL

O contnuo aumento de publicaes no meio digital cresce junto a novas

normais, que no contavam com nenhuma diagramao especial ou fotos maiores

utilizavam tecnologia Flash que no suportada por dispositivos mveis da

possibilidade de insero de udios, vdeos, imagens ampliveis, entre outros em

Uma revista digital uma publicao peridica formatada para leitura em

Muito ainda se discute sobre conquista das mdias digitais, e se estas

Neste captulo sero apresentadas as concluses a respeito de pesquisa

3.1 PESQUISA COM PBLICO-ALVO

A pesquisa com pblico-alvo foi realizada para obteno de dados

3.1.1 Coleta e anlise de dados