Professional Documents
Culture Documents
CURITIBA
2014
CAMILA BARBIERI DE ALENCAR
MARIA LUCIANA UTIDA SANTOS
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
por
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 .
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.2 JUSTIFICATIVA
1.3 OBJETIVOS
2 EMBASAMENTO TERICO
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).
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.
_____________
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
_____________
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
3 ASPECTOS METODOLGICOS
Semanal
44% Sim
2% Quinzenal
56% No
Mensal
72%
5% Digital Internet
7%
Impressa Livros
4% 89%
95% Revistas
Grfico 5 - Dispositivo utilizado para acessar a Grfico 6 - Dispositivo utilizado para acessar a
internet em sala de aula internet em casa
Fonte: autoria prpria, 2013 Fonte: autoria prpria, 2013
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
Figura 6 - Exemplo vinheta, box, folio, uso de fotos e colunas da revista Aux
Fonte: Revista Aux, 2014.
37
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).
_____________
11
revistas online perfeitas para todos dispositivos. raduo re das au oras.
42
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
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.
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
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
4.3.1.2 Leite
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.
4.4.1 Tipografia
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
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.
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.
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
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.
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
4.4.5 Navegao
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).
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).
4.4.6 Grids
4.4.7 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
4.4.8 Capa
4.4.9 Sumrio
4.4.10 Acessibilidade
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.
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.
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
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
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).
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).
5.2.2 Sumrio
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).
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
5.2.4 Ar o L n a do e o
5.2.5 Ar o as
Figura 70 - Verses finais de Martin Scorsese, Alfred Hitchcock, Otto Preminger e Stanley
Kubrick e Saul Bass
Fonte: Autoria prpria, 2014.
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).
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
10%
Computadores
Tablets
Smartphones
90%
88%
Nota 4 Sim
Nota 5 No
12% 100%
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.
8%
10%
Nota 4
Nota 4
Nota 5
Nota 5
92% 90%
Atratividade da revista
20%
Nota 3
4%
Nota 4
Nota 5
76%
6 CONSIDERAES FINAIS
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
REFERNCIAS
Alternative Press [iPad]. Edio 300: North Hollywood: Alternative Press Magazine,
Inc, 2003. ISSN 1065-1667.
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
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
NIELSEN, Jakob. 10 usability heuristics for user interface design. Disponvel em:
<http://nngroup.com/articles/ten-usability-heuristics>. Acesso em: 30mar.2014.
VAUGHAN, Tay. Multimedia: making it work. 8. ed. New York: McGraw Hill, 2011.
APNDICES
Pesquisa
1. Nome:
__________________________________________________________________
_____________________________________________________
APNDICE D - I a ens e a a e a do ar o as
116
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.