Design Editorial Digital Desenvolvimento Da Aplicação

UNIVERSIDADE TECNOLÓGICA FEDERAL DO PARANÁ
CÂMPUS DE CURITIBA
DEPARTAMENTO ACADÊMICO DE DESENHO INDUSTRIAL
CURSO DE TECNOLOGIA EM DESIGN GRÁFICO
MARCOS AELTON DE SOUZA

(923524)
DESIGN EDITORIAL DIGITAL: DESENVOLVIMENTO DA APLICAÇÃO

E DO PROJETO GRÁFICO DA REVISTA DIGITAL UPROCK
CURITIBA
2019
MARCOS AELTON DE SOUZA
DESIGN EDITORIAL DIGITAL: DESENVOLVIMENTO DA APLICAÇÃO

E DO PROJETO GRÁFICO DA REVISTA DIGITAL UPROCK
Proposta de Trabalho de Conclusão de

Curso apresentado como requisito
parcial à disciplina de Trabalho de
Diplomação, do curso superior de
Tecnologia em Design Gráfico do
Departamento Acadêmico de Desenho
Industrial da Universidade Tecnológica
Federal do Paraná.
Orientador: Bolívar Teston de Escobar
CURITIBA
2019
Ministério da Educação
Universidade Tecnológica Federal do Paraná
Câmpus Curitiba
PR
UNIVERSIDADE TECNOLÓGICA FEDERAL DO PARANÁ
Diretoria de Graduação e Educação Profissional
Departamento Acadêmico de Desenho Industrial
TERMO DE APROVAÇÃO
TRABALHO DE DIPLOMAÇÃO NO 701
DESIGN EDITORIAL DIGITAL: PRODUÇÃO DA REVISTA DIGITAL

UPROCK
por
Marcos Aelton de Souza
Trabalho de Diplomação apresentado no dia 3 de dezembro de 2019 como requisito

parcial para a obtenção do título de TECNÓLOGO em Design Gráfico do Curso
Superior de Tecnologia em Design Gráfico do Departamento Acadêmico de
Desenho Industrial, da Universidade Tecnológica Federal do Paraná. O aluno foi
arguido pela Banca Examinadora composta pelos professores abaixo, que após
deliberação, consideraram o trabalho aprovado.
Banca Examinadora:
______________________________________________
Prof. Dr. Alan Ricardo Witikoski
DADIN - UTFPR
_______________________________________________
Prof. Bolivar Teston de Escobar
Orientador DADIN – UTFPR
_______________________________________________
Profª. MSc. Daniela F. F. da Silva
Professora Responsável pela Disciplina TD
DADIN – UTFPR
“A Folha de Aprovação assinada encontra-se na Coordenação do Curso”.

Aos meus pais e aos meus irmãos.
RESUMO
Este trabalho pretende compreender como os dispositivos móveis podem

repensar as revistas com base em uma solução on-line, apoiada no design de
interface, considerando a hipótese de que os modelos adotados pelas revistas ainda
estão presos aos formatos do impresso, desperdiçando o potencial tecnológico quanto
ao uso de elementos interativos e hipertextuais. Fundamentado nos estudos do design
editorial e do design digital, desenvolveu-se um protótipo funcional da aplicação e o
projeto gráfico da Revista UpRock.
Palavras-chave: Dispositivos móveis. Tablets. Revistas. Design editorial.

Revista digital.
ABSTRACT
The purpose of this project is to, based on a mobile solution, understand the
mobile devices role on the future of magazines, based on an on-line solution,
supported on interface design, considering the hypothesis that magazines are currently
still being tied on its printed versions, wasting the technological potential of
interaction and hypertext elements. Supported by studies in editorial a digital design,
a functional prototype of the application has been developed, along with the editorial
graphic design project of UpRock Magazine.
Key words: Mobile devices. Tablets. Magazines. Editorial design. Digital magazine.
LISTA DE FIGURAS
Figura 1: Framework de Jesse James Garrett ............................................... 17
Figura 2: Framework do Projeto E .................................................................. 17
Figura 3: Projeto E. Definindo o posicionamento da linguagem gráfico-visual19
Figura 4: Exemplo de wireframe ..................................................................... 21
Figura 5: Exemplificação das leis da Gestalt .................................................. 34
Figura 6: Revistas Juxtapoz, Vista e Superinteressante ................................ 51
Figura 7: Sumários das revistas Juxtapoz, Vista e Superinteressante........... 52
Figura 8: Grid revista Juxtapoz ....................................................................... 53
Figura 9: Grid revista Vista ............................................................................. 54
Figura 10: Grid revista Superinteressante ...................................................... 55
Figura 11: Páginas internas da Juxtapoz, Superinteressante e Vista ............ 56
Figura 12: Arquitetura do aplicativo da Revista UpRock, versão 2.0 ............. 59
Figura 13: Tela de Home para iPhone e iPad ................................................ 61
Figura 14: Tela Menu geral (iPhone/ iPad) ..................................................... 62
Figura 15: Tela de Capa + Sumário (iPhone/ iPad) ........................................ 63
Figura 16: Tela da Matéria (iPhone/ iPad) ...................................................... 64
Figura 17: Tela Menu Sumário - Card (iPhone/ iPad) .................................... 65
Figura 18: Tela do Menu Sumário - Thumbnails da revista (iPhone/ iPad) .... 66
Figura 19: Tela de Matérias Favoritas (iPhone/ iPad) .................................... 67
Figura 20: Tela de Matérias Favoritas (iPhone/ iPad) .................................... 68

Figura 21: Opções de logotipo........................................................................ 75
Figura 22: Paleta de cores.............................................................................. 76
Figura 23: Fonte Graphik, do seu peso mais leve ao mais pesado................ 77
Figura 24: Fonte Druk, do seu peso mais leve ao mais pesado wide. ........... 78
Figura 25: Esquema sequêncial de construção do formato da capa.............. 79
Figura 26: Grid de construção da capa da revista UpRock ............................ 80
Figura 27: Exemplos de aplicação do grid da capa da Revista UpRock ........ 81
Figura 28: Conjunto de ícones desenvolvidos para o app.............................. 83
Figura 29: Tela de Splash Screen .................................................................. 84
Figura 30: Tela de Onboarding (iPhone) ........................................................ 85
Figura 31: Tela de Onboarding (iPad) ............................................................ 85
Figura 32: Tela de Home (iPhone) ................................................................. 87
Figura 33: Tela de Home (iPad) ..................................................................... 88
Figura 34: Telas de tutorial de navegação entre matérias (iPhone) ............... 89
Figura 35: Telas de tutorial de navegação entre matérias (iPad) ................... 89
Figura 36: Telas de Matérias Favoritas .......................................................... 90
Figura 37: Tela Matérias Favoritas (iPad) ...................................................... 91
Figura 38: Tela de Menu (iPhone/ iPad) ......................................................... 92
Figura 39: Tela Edições Anteriores (iPhone/ iPad)......................................... 93
Figura 40: Tela de Capa + Sumário (iPhone/ iPad) ........................................ 94
Figura 41: Tela das matérias (iPhone) ........................................................... 95
Figura 42: Tela das matérias (iPad) ............................................................... 96
Figura 43: Menu Sumário (iPhone)................................................................. 97
Figura 44: Menu sumário (iPad) ..................................................................... 97

LISTA DE GRÁFICOS
Gráfico 1: ...................................................................... Erro! Indicador não definido.

SUMÁRIO
1. INTRODUÇÃO ...................................................................................................... 12
1.1. DELIMITAÇÃO DO PROBLEMA........................................................................ 13
1.2. OBJETIVO.......................................................................................................... 15
1.2.1. Objetivos Específicos ...................................................................................... 15
1.3. MÉTODOS ......................................................................................................... 16
1.3.1. Estratégia ........................................................................................................ 18
1.3.2. Escopo ............................................................................................................ 19
1.3.3. Estrutura .......................................................................................................... 20
1.3.4. Esqueleto ........................................................................................................ 20
1.3.5. Superfície ........................................................................................................ 21
1.3.6. Execução......................................................................................................... 22
1.4. JUSTIFICATIVA ................................................................................................. 22
2. PRINCIPAIS EIXOS TEÓRICOS .......................................................................... 23
3. PROCEDIMENTOS METODOLÓGICOS ............................................................. 24
3.1. Uma breve história das revistas ......................................................................... 25
3.2. Princípios do design e da comunicação visual................................................... 30
3.2.1. Teoria da Gestalt ............................................................................................. 30
3.2.2. Leis da Gestalt ................................................................................................ 32
3.2.2.1. Lei da Unidade......................................................................................................................... 32
3.2.2.2. Lei da Segregação................................................................................................................... 32
3.2.2.3. Lei da Unificação ..................................................................................................................... 32
3.2.2.4. Lei do Fechamento .................................................................................................................. 33
3.2.2.5. Lei da Continuidade ................................................................................................................. 33
3.2.2.6. Lei da Proximidade .................................................................................................................. 33

3.2.2.7. Lei da Semelhança .................................................................................................................. 33
3.2.2.8. Lei da Pregnância (Lei da Simplicidade) ................................................................................. 33
3.2.3. Conclusão ....................................................................................................... 34
3.3. O Design de revistas .......................................................................................... 34
3.3.1. O que compõe um projeto editorial ................................................................. 35
3.3.1.1. Layout ...................................................................................................................................... 35
3.3.1.2. Grid 35
3.3.1.3. Formato ................................................................................................................................... 37
3.3.1.4. Tipografia ................................................................................................................................. 37
3.3.2. Da litografia ao digital ...................................................................................... 39
3.4. Design Centrado no Usuário .............................................................................. 40
3.5. Usabilidade......................................................................................................... 41
3.5.1. Heurísticas de Nielsen .................................................................................... 41
3.5.2. Regras de ouro................................................................................................ 42
3.5.3. Princípios de Diálogo ...................................................................................... 43
3.5.4. Critérios ergonômicos ..................................................................................... 44
3.6. Interação Homem-Computador (IHC) ................................................................ 45
3.7. Análise mercadológica sobre as publicações digitais ........................................ 47
3.8. Revistas digitais segundo os princípios de design centrado no usuário ............ 48
3.9. Tecnologias disponíveis ..................................................................................... 48
4. DESENVOLVIMENTO .......................................................................................... 50
4.1. Estratégia ........................................................................................................... 50
4.1.1. Análise de similares ........................................................................................ 50
4.1.1.1. Análise de estratégia, escopo e estrutura ............................................................................... 51
4.1.1.2. Análise de esqueleto ............................................................................................................... 52

4.1.1.3. Análise da superfície ............................................................................................................... 56
4.1.1.4. Conclusão ................................................................................................................................ 57
4.2. Escopo ............................................................................................................... 58
4.3. Estrutura ............................................................................................................. 58
4.4. Esqueleto ........................................................................................................... 59
4.4.1. Wireframes ...................................................................................................... 60
4.4.1.1. Home ....................................................................................................................................... 61
4.4.1.2. Menu geral ............................................................................................................................... 62
4.4.1.3. Capa + Sumário ....................................................................................................................... 63
4.4.1.4. Tela matéria ............................................................................................................................. 64
4.4.1.5. Menu Sumário (Cards e Thumbnail)........................................................................................ 65
4.4.1.6. Tela matérias favoritas ............................................................................................................ 66
4.4.1.7. Tela edições anteriores ........................................................................................................... 67
4.4.2. Avaliação do wireframe (esqueleto) ................................................................ 68
4.4.2.1. Cenário e tarefas ..................................................................................................................... 69
4.4.2.2. Perguntas e resultados do formulário ...................................................................................... 69
4.4.2.3. Iterações .................................................................................................................................. 74
4.5. Superfície ........................................................................................................... 74
4.5.1. Identidade da Marca........................................................................................ 74
4.5.1.1. Cores ....................................................................................................................................... 75
4.5.1.2. Tipografia ................................................................................................................................. 76
4.5.1.3. Capa ........................................................................................................................................ 78
4.5.2. Interface do usuário......................................................................................... 81
4.5.2.1. Tipografia ................................................................................................................................. 82
4.5.2.2. Cores ....................................................................................................................................... 82
4.5.2.3. Iconografia ............................................................................................................................... 82

4.5.2.4. Grids ........................................................................................................................................ 83
4.5.3. Interface final ................................................................................................... 83
4.5.3.1. Splash screen .......................................................................................................................... 83
4.5.3.2. Onboarding .............................................................................................................................. 84
4.5.3.3. Home ....................................................................................................................................... 86
4.5.3.4. Tutoriais de uso e navegação dentro da revista ...................................................................... 88
4.5.3.5. Tela matérias favoritas ............................................................................................................ 89
4.5.3.6. Tela de Menu ........................................................................................................................... 91
4.5.3.7. Tela de Edições anteriores ...................................................................................................... 92
4.5.3.8. Tela das Matérias .................................................................................................................... 95
4.5.3.9. Menu sumário .......................................................................................................................... 97
5. Conclusão ............................................................................................................ 98
6. Bibliografia......................................................................................................... 100
12
1. INTRODUÇÃO
Desde o século XVII as revistas têm sido uma fonte dinâmica de distribuição de
informação, o que se pode considerar um dos capítulos da revolução que a imprensa
causou na transmissão do conhecimento humano. Em seus primeiros anos, devido às
limitações tecnológicas, estas publicações reuniam muito mais textos do que imagens,
no entanto, a evolução dos meios de impressão (Cardoso, 2008), o aumento de
publicações e o surgimento de concorrência, fizeram com que as revistas fossem
adicionando mais camadas de complexidade na composição das páginas a fim de se
diferenciarem e conquistarem mais leitores.
Outro capítulo dessa revolução foi liderado pelo surgimento dos computadores
e da internet. As revistas não ficaram de fora. Mesmo com os computadores sendo
largamente utilizados para desenhar as revistas desde os anos 70 e 80, este
dispositivo ainda não era utilizado para sua distribuição. Foi somente com a chegada
do iPad, anunciada em 2010 pela Apple, que as editoras viram a possibilidade de
reviver anos mais promissores para os seus produtos. Houve uma corrida para se
adaptarem e estarem presentes em mais esta mídia, contudo, em sua maioria elas
não eram mais do que pesados arquivos cheios de bugs com réplicas das versões
impressas, o que não ajudou as editoras em seu objetivo.
Da mesma forma que o processo de impressão litográfica trouxe mais liberdade

para a composição dos impressos, também exigiu adaptação por parte dos designers
(Cardoso, 2006). Com mais elementos disponíveis e mais possibilidades, é natural
que outros problemas também surgissem. O meio digital trouxe uma maneira diferente
de nos relacionarmos com as revistas. De fato, essa nova maneira de publicar revistas
trouxe a oportunidade aos designers extrapolarem os limites que o papel impunha. E
com isso, novas técnicas que eles precisariam desenvolver.
Neste cenário é que se mostra a necessidade de que as publicações explorem

ao máximo as possibilidades que o meio digital proporciona. Assim, surge a Revista
UpRock que é uma publicação periódica de cunho informativo, produzida de forma
independente e com a contribuição de diversos colaboradores espalhados por
diferentes regiões do Brasil. A Revista se caracteriza por uma forma colaborativa de
13
gestão de conteúdo e pelo experimentalismo na diagramação e na utilização de

recursos presentes nos dispositivos móveis.
A publicação pretende ser identificada pelo bom uso da tipografia na

composição de suas páginas e títulos, e pela grid elástica que garante uma grande
liberdade criativa na produção das páginas.
Este trabalho tem como proposta o desenvolvimento de uma peça editorial

digital (revista), desenvolvida em formato de aplicativo destinado aos devices móveis
(tablets e celulares) e que sirva como suporte para a discussão teórica dos diversos
elementos de design e projeto gráfico editorial, considerando o meio digital como base
de pesquisa e desenvolvimento.
Por fim, a proposta do trabalho aqui, é compreender os processos de criação e

produção editorial de uma revista digital interativa e produzir uma peça editorial desta
natureza aplicando os conceitos de pesquisa em design editorial, usabilidade e design
centrado no usuário, revelar as decisões estratégicas de design, as dificuldades
enfrentadas no decorrer da elaboração da publicação, assim como definir a linha de
design a ser seguida nas páginas da revista.
DELIMITAÇÃO DO PROBLEMA
A Revista UpRock é produzida de forma independente por um estudante de

design. O projeto nasceu há aproximadamente um ano, mas a ideia surgiu durante
minha adolescência, quando publicações ligadas ao mundo da arte urbana ainda não
eram populares. Entre 1998 e 1999 as únicas publicações de Street Art eram fanzines1
1 Fanzine é uma aglutinação de Fanatic magazine que define as publicações editoriais de baixo
custo amplamente utilizada pela cultura punk para difundir seus ideais. Muitas vezes os fanzines
utilizavam imagens e tipos arrancados de jornais populares, juntamente com textos escritos à
mão e outros escritos à máquina de escrever para formar um original que seria reproduzido por
fotocópia ou litografia (HOLLIS, 2001).
14
de péssima qualidade, com pouquíssimo conteúdo informativo e uma impressão de

baixa qualidade, uma vez que eram fotocopiadas; e uma publicação de São Paulo
idealizada pelos irmãos Gustavo e Otávio Pandolfo, mais conhecidos como
OsGemeos, chamada de Fiz Graffiti Attack, a única do Brasil, que impressa em cores
mantinha uma relativa qualidade. Diante deste cenário, em que se era obrigado a
buscar toda informação em meios não tão dinâmicos, a vontade de se ter algo que
realmente informasse e que trouxesse um pouco mais da cultura de rua2 para o
conhecimento popular, era um assunto que passou a entrar em discussão.
Uma revista se caracteriza por ser um periódico de origem informativa,

jornalística e/ou de entretenimento. Elementos como a malha gráfica, a tipografia, o
formato do caderno (quando em meio impresso) e a marca são essenciais para manter
uma edição ligada a outra de forma que o leitor perceba que se trata de uma
publicação de uma única fonte.
Os inúmeros desafios para a realização da revista vão desde a captação e

geração de conteúdo (matérias, artigos), passando pelo projeto gráfico (grids,
diagramação, marca) e finalmente na demanda de altos recursos financeiros para a
publicação da revista. As escolhas feitas quando do cumprimento destes quesitos
durante o projeto, devem ir de encontro à boa comunicação e ao interesse do público
alvo na revista.
A Revista UpRock é veiculada no meio digital via website próprio da revista e

iTunes Store3. A publicação tem a complicada missão de conciliar uma diagramação
que atenda as necessidades do meio digital: o da legibilidade do texto na tela dos
dispositivos e a economia em número de páginas para que o arquivo final gerado não
seja demasiado pesado para as atuais conexões de banda de internet.
2 O Conceito de Cultura de Rua utilizado neste trabalho envolve especificamente as expressões

artísticas iniciadas com Movimento Hip Hop, como por exemplo, o graffiti e o breakdance que são
os segmentos das artes plásticas e da dança respectivamente. Entretanto as visões e críticas
expressas nestes trabalhos não necessariamente estarão ligadas ao Hip Hop.
3 iTunes Store é um serviço on line de distribuição de livros, revistas, músicas e aplicativos em
formato digital disponibilizado pela Apple Inc.
15
A Revista UpRock pretende se diferenciar pelos seguintes fatores: o plano

editorial que deverá unir moda, design, arte, música e intervenções em torno de um
pilar mestre que é a Street Art. Recebendo matérias e textos de colaboradores
espalhados por diversas regiões do Brasil, a revista tem por princípio difundir e colocar
no centro de discussões a importância da arte cultivada nas ruas que cada vez mais
ganha espaço na mídia e na academia como uma nova faceta da arte contemporânea.
Em parte, os problemas na concepção da revista podem ser solucionados

tomando exemplos discutidos ora em aula, ora por meio de trabalhos realizados no
curso. Uma completa solução, porém, requer uma intensa pesquisa na área de
publicações, digitais e impressas, e um aprofundado estudo da história do design e
mais especificamente nos movimentos artísticos surgidos no século XX, quando a
atividade ganhou mais notoriedade e teve boas doses de experimentalismo e
originalidade.
O trabalho também tem por objetivo discutir a transposição de regras gráficas

editoriais dos meios impressos para o meio digital levando em consideração
metodologias de criação de produtos digitais, assim como princípios de usabilidade e
design centrado no usuário.
OBJETIVO
O objetivo principal é desenvolver o projeto gráfico de uma revista digital,

considerando sua aplicação no desenvolvimento de um modelo funcional navegável
para smartphones e tablets.
1.2.1. Objetivos Específicos
§ Discussão teórica dos diversos elementos de design e projeto gráfico

editorial.
16
§ Compreensão dos processos de criação e produção editorial de uma

revista digital interativa.
§ Revelação das decisões estratégicas de design, as dificuldades
enfrentadas no decorrer da elaboração da publicação.
§ Definição da linha de design a ser seguida na revista.
§ Compreensão dos processos ligados ao Design Centrado no Usuário e
a metodologia de Garrett e, das tomadas de decisão levando em
consideração essas ferramentas.
§ Produzir uma aplicação da revista.
§ Elaborar o Projeto Gráfico da Revista UpRock.
MÉTODOS
Neste trabalho pretende-se elaborar um aplicativo para uma revista digital

tendo como guias metodológicos centrais: os planos ou etapas da experiência do
usuário apresentadas na obra The Elements of User Experience de Jesse James
Garrett (2011), as definições de etapas projetuais definidas no Projeto E (Meurer &
Szabluk, 2010) princípios de design centrado no usuário, assim como fundamentos
de design editorial na construção do grid e na escolha dos elementos que compõem
uma publicação digital. Em segundo plano haverá a criação da marca UpRock
elaborada a partir dos fundamentos apresentados por WHEELER (2008).
17
Figura 1: Framework de Jesse James Garrett
Fonte: The Elements of User Experience: User-centered Design for the Web (2011). 2
Figura 3: Framework do Projeto E
Fonte: Ação Ergonômica, Revista Brasileira de Ergonomia (2010).

18
O framework desenvolvido por Garrett compreende 5 planos desenvolvidos

para resolverem problemas relacionados a experiência do usuário. Os planos seguem
dos mais abstratos para os mais concretos e são dependentes cada um do seu
anterior, ou seja, a decisões definidas do plano de Escopo (scope) são derivadas das
decisões definidas no plano de estratégia (strategy), por exemplo. Isso não significa
necessariamente que a etapa anterior precisa estar definida para que se inicie a
próxima. As atividades são executadas nas duas direções, com as decisões tomadas
nos planos superiores por vezes forçando uma reavaliação (ou uma avaliação feita
pela primeira vez) de problemas nos planos inferiores.
1.3.1. Estratégia
Esse é o plano mais conceitual do framework, no entanto, isso não significa que
ele deve ser vago ou impreciso. Ele deve refletir a intenção geral do produto, ou seja,
o que queremos e o que o usuário quer do produto. Quanto mais claramente
articularmos exatamente a intenção do produto e exatamente o que o usuário quer do
produto, mais precisos seremos em ajustar nossas escolhas para atingir esses
objetivos (Garrett, 2011). A articulação de uma boa estratégia pode definir o sucesso
ou não de um produto, uma vez que esta será base de todas as demais decisões em
nosso processo de projetarmos a experiência do usuário.
Para o Projeto E, a estratégia inicia com a plena identificação do contexto do

projeto (Meurer & Szabluk, 2010). Nesse processo destacamos a identificação: das
questões projetuais (o que, para quem e como projetar), questões de identificação
dos cenários, da situação inicial e final do projeto, de equalização dos fatores
projetuais (antropológicos, ecológicos, ergonômicos, econômicos, mercadológicos,
tecnológicos, filosóficos, geométricos e psicológicos), de taxonomia, que é
desmembrada nas análises linguística, desenhística, heurísticas e na lista de
requisitos e restrições do projeto.
19
1.3.2. Escopo
Tanto para Garrett quanto para os autores do Projeto E, o passo seguinte para
estipular os objetivos do produto e do usuário, consiste em aprofundar a avaliação de
quais recursos e funções constituem o escopo do site. Sob a ótica da funcionalidade,
criaremos as especificações funcionais do projeto, ou seja, uma descrição detalhada
do "conjunto de recursos" do produto. Para o Projeto E, os itens elaborados nesta
etapa devem ser avaliados segundo as heurísticas de Nielsen (Nielsen & Budiu, 2012)
os padrões de web definidos pela W3C4 e uma avaliação segundo o posicionamento
(visual) do produto em relação aos seus concorrentes. Os autores sugerem o uso de
um gráfico cartesiano (eixos X e Y) indicado por Preece (Rogers, et al., 2002) para
situar o projeto na situação desejada.
Figura 4: Projeto E. Definindo o posicionamento da linguagem gráfico-visual
Fonte: Projeto E (2010).
4 O W3C – World Wide Web Consortium – desenvolve padrões para a criação e a interpretação dos
conteúdos para a Web.
20
1.3.3. Estrutura
Segundo Garrett, na etapa da estrutura define-se como serão as interações das

funcionalidades e recursos definidos na etapa do escopo e seus posicionamentos em
relação ao restante do projeto e qual o caminho para o usuário chegar até este
recurso, em resumo esta é a etapa em que se desenvolve o design de interação do
projeto.
Para os autores do Projeto E, esta é a etapa mais complexa do projeto em que

é preciso planificar com precisão o "organograma geral e os fluxogramas de todas as
tarefas previstas para o produto, que serão a base da programação computacional,
do banco de dados e das regras de negócio" (Meurer & Szabluk, 2010).
1.3.4. Esqueleto
O plano do esqueleto é a manifestação física das estruturas abstratas do

projeto, o que significa dizer que o esqueleto organiza e orienta o posicionamento dos
elementos da interface como títulos, navegação, fotos e blocos de texto. Segundo
Garrett esse plano deve abordar a apresentação da informação a fim de facilitar sua
compreensão (arquitetura da informação), o design de interface a fim de definir como
os usuários interagiriam com uma determinada funcionalidade do sistema e, por fim,
a navegação que deve comunicar a relação entre seu conteúdo e a página que o
usuário está visualizando no momento. Esse processo gera os chamados wireframes5
que também ajudam a tangibilizar os fluxos e tarefas, simulando a navegação dentro
5 Wireframe é um esboço estrutural de uma interface, demonstrando os elementos que serão

apresentados visualmente na tela e seu peso relativo. Seu nome vem da metáfora da armação
usada por escultores para dar forma e suporte a uma obra ("wire", de arame, fio; e "frame", de
esqueleto ou estrutura). O wireframe também é conhecido como page schematics (esquema de
página), blueprints ou protótipos.
21
do produto (protótipo), facilitando assim a identificação e correção de problemas de

usabilidade.
Figura 5: Exemplo de wireframe
Fonte: https://www.interaction-design.org
1.3.5. Superfície
O plano da superfície é o último plano do framework proposto por Garrett e é o

plano factualmente de contato com o usuário. Como explica o autor, esta é a etapa
em que nos preocuparemos com aspecto sensorial do produto. Neste plano uniremos
os aspectos funcionais aos fatores estéticos e definiremos como eles serão
visualmente arranjados a fim de formarem o produto final com qual o usuário enfim
entrará em contato.
O Projeto E define esse plano como a etapa estética do projeto. Nessa etapa,
segundo os autores, é definida a identidade gráfico-visual a fim de se obter o resultado
esteticamente bem resolvido, equilibrado e harmonioso, através da observação de
diversos fatores (Meurer & Szabluk, 2010). O estudo ainda define alguns aspectos
22
para serem definidos nesta etapa: o estudo e definição das malhas (grid), que será
abordado com mais profundidade em outro capítulo deste trabalho; a composição e
diagramação, que deve seguir em conformidade com as especificações e restrições
do suporte para o qual o projeto está sendo desenvolvido; e a identidade gráfico-
visual, que são as definições de cores, tipografia, logotipo, iconografia e pictografia;
1.3.6. Execução
Esta etapa aparece somente no modelo metodológico proposto pelo Projeto E

e estabelece a criação de um modelo funcional navegável (MFN), que demonstra a
visão geral do produto a fim de facilitar a idealização do produto final (depois da
programação).
JUSTIFICATIVA
Uma publicação requer, dentre muitos requisitos, um foco editorial muito bem
definido. Geralmente as revistas se destinam a um público específico delimitado por
classe social, faixa de idade, raça, credo, tribo, profissão, etc. Ou seja, são diversos
os fatores que fazem da revista uma publicação característica a uma parcela da
sociedade. Estes fatores influenciam diretamente as tomadas de decisão quanto aos
aspectos de design em uma revista. Juntamente com estes fatores está o design
centrado no usuário (DCU6) em que, além de analisarmos e projetarmos pensando
em como o usuário faz uso da peça de design, são feitos também testes que
6 DCU (design centrado no usuário ou user-centered design) descreve as decisões de design que
estabelecem as necessidades do usuário no centro do projeto, posicionando em segundo plano
os demais quesitos do design, como as questões estéticas, por exemplo (NORMAN, 2006).
23
comprovem e validem as suposições feitas no desenvolvimento do projeto, conferindo

assim uma maior eficiência e assertividade no design.
Um projeto gráfico de uma revista se dá a partir de elementos definidos como

cores, tipografia, malha gráfica, tratamento de imagem, padronização no uso de
imagens (ilustrações, fotografias, colagens), relação entre figura e fundo, relações
espaciais entre os elementos da página, disposição das páginas, papel, formato, etc.
Estes elementos devem ser definidos segundo os fatores citados para a definição do
foco editorial, a fim de assegurar uma identidade reconhecível e condizente a revista.
Um descritivo dos problemas e uma comparação entre as publicações

impressas e digitais, além de por o projeto digital gráfico em pauta e em prática, seria
de grande importância para estudantes de design que procurem saber como se dá a
concepção de uma revista digital e de como os conceitos editoriais concebidos a muito
ainda se aplicam, independente do suporte no qual a publicação ocorre.
2. PRINCIPAIS EIXOS TEÓRICOS
São basicamente dois os segmentos. O primeiro no eixo editorial, definindo os

pormenores da identidade visual, do grid a ser utilizado e do formato de entrega do
conteúdo. No segundo, o design de interação, estabelecendo os meios, suportes e
tecnologias a serem utilizados no projeto.
A importância do projeto gráfico para uma revista é indiscutível entre os

profissionais da área. Além de fazer com que a informação seja mais facilmente
compreendida entre os leitores, o projeto gráfico confere uma identidade a publicação.
Wheeler (2008) afirma que a identidade “... dá apoio, expressão, comunicação,
sintetiza e visualiza a marca. Você pode vê-la, tocá-la, agarrá-la, ouvi-la, observá-la
se mover... são memoráveis, autênticas, significativas, diferenciadas, sustentáveis,
flexíveis e agregam valor.” A identidade está de acordo quando mesmo sem ver a
marca na capa da revista o leitor a identifica somente com os elementos da página.
24
Em segundo, por ser uma publicação digital com uma livre diagramação, com
grande exploração no uso da tipografia como imagem e na livre composição da
página, a exemplo das vanguardas modernistas, diferencia-se dos padrões
contemporâneos de design gráfico editorial digital da composição de revistas.
E por fim, colocando o usuário como foco principal. Todo projeto de design tem
seu alvo, o indivíduo que irá fazer uso desta peça (público-alvo). Identificar quem é
este usuário e quais as suas necessidades em relação ao modo como ele interage
com a revista segundo as limitações do device em que a publicação estará, é parte
dos desafios que este trabalho pretende resolver.
Mesmo tendo como causa primária a originalidade e o experimentalismo, um

manual de diagramação não contrapõe estes fundamentos. Às vezes, o conteúdo tem
uma estrutura interna própria que nem sempre o grid consegue esclarecer (Samara,
2007).
3. PROCEDIMENTOS METODOLÓGICOS
As metodologias de pesquisa devem ser baseadas em basicamente três eixos:

1. No design de interação, apoiando-se em pesquisas de campo e testes com usuários
a partir de contextos definidos anteriormente. 2. Por meio de um levantamento
bibliográfico do estado da arte desde os eixos modernistas até os movimentos mais
contemporâneos. 3. E, por fim, através de estudos de casos de outras revistas digitais
não estando necessariamente no mesmo viés contextual da Revista UpRock.
Na composição da revista serão utilizadas diversas referências do design. O

layout da revista seguirá principalmente os fundamentos artísticos modernistas e pós-
modernistas. Movimentos como o futurismo e o dadaísmo serão o ponto de partida
para entender como a revista será estruturada.
De forma a manter uma coerência entre teoria e prática, cada capítulo referente
a um elemento da estrutura da revista (imagem, grid, caixa de texto, etc) será
precedido por uma nota introdutória abordando os fatos históricos e as soluções
visuais em que o elemento em questão foi baseado.
25
Serão empregados métodos de pesquisa para definição do público-alvo,

avaliação da linguagem visual utilizada e a adequação do projeto às boas práticas de
usabilidade (Rogers, et al., 2002). As ferramentas de pesquisa adotadas poderão ser
quantitativas ou qualitativas, apoiadas em dados levantados nas pesquisas de campo.
Durante o desenvolvimento do trabalho serão analisados e discutidos os

seguintes pontos:
UMA BREVE HISTÓRIA DAS REVISTAS
Coube a Alemanha ter o privilégio de ser o berço de duas invenções que

certamente mudaram o rumo da história. A primeira foi no século XV, mais
especificamente 1455, com Johannes Gutenberg e seus tipos móveis, que fizeram
com que a relação do homem com os livros e a informação fossem radicalmente
modificadas. Os tipos não eram realmente uma novidade, chineses e coreanos já os
utilizavam ao menos desde o século XIII. No próprio Museu Gutenberg, em Manis na
Alemanha, há um acervo de tipos móveis chineses (Haslam, 2007).
Contudo, Gutemberg reunia o conhecimento das tecnologias necessárias para

a criação de sua prensa tipográfica. A popularização dessa invenção possibilitou que,
pouco mais de 200 anos depois (1663), a segunda invenção alemã surgisse em
Hamburgo pelas mãos do teólogo Johann Rist, publicando a primeira revista chamada
Erbauliche Monaths-Unterredungen ou "Edificantes Discussões Mensais". Sua
publicação se estendeu por somente 5 anos, no entanto este curto período foi tempo
suficiente para que o formato monotemático fosse copiado e se espalhasse através
de outros títulos no restante da Europa.
Em 1731, Edward Cave publicou a Gentleman's Magazine na Inglaterra, a

publicação é considerada a primeira revista moderna da história. Com um conteúdo
bastante diverso indo de reflexões políticas até poemas e contos, a revista foi pensada
para agradar o maior número de leitores possível o que fez com que Cave seja
considerado o primeiro editor a criar uma publicação abrangente de sucesso. Cave
26
também foi responsável por cunhar o termo Magazine7 que passou a ser utilizado para
descrever esse tipo de publicação.
No Brasil, devido às políticas impostas pela corte portuguesa que proibiam o

desenvolvimento da indústria em sua colônia no continente americano e que,
consequentemente, também limitavam totalmente qualquer tipo de publicação
impressa, a primeira revista só foi publicada em 1812. Quatro anos após a fuga da
família real de Portugal e sua chegada ao Brasil, a revista As Variedades ou Ensaios
de Literatura foi publicada pelo múltiplo empreendedor português Manuel Antônio da
Silva Serva, também criador de um dos primeiros jornais do país o Idade D’Ouro do
Brazil (1811-1823) e da tipografia (como se chamavam as editoras) que levava o
mesmo nome (Ipanema, 2012).
O aumento do público leitor, o desenvolvimento de novas tecnologias, como a

fabricação do papel a partir da polpa de madeira (1840) e a introdução de máquinas
no processo de fabricação (1830), possibilitou o barateamento da produção e a
expansão das publicações sobre os meios midiáticos. Ao mesmo tempo que esses
avanços diminuíram a importância de tipógrafos, compositores, artesãos e
impressores, eles redobraram o papel do designer, uma vez que a percepção de
qualidade do projeto não mais se dava perante a habilidade de execução gráfica, mas
sim na criatividade e originalidade dos projetos (Cardoso, 2008, pp. 47-49).
A partir do século XIX a difusão dos métodos de litografia e gravura provocou

o aumento no uso de fotografias e ilustrações nos novos impressos. Os processos de
reprodução fotomecânicos possibilitaram a exploração de novas linguagens gráficas,
dentre elas o surgimento das histórias em quadrinhos (EUA, 1890) no formato
conhecemos hoje, além de inserir uma nova cultura da imagética em que a fotografia
ganha um papel crucial imprensa.
7 Magazine é o termo em inglês para revista. Essa palavra tem origem na palavra árabe makhazin
e que em tradução livre significa armazém.
27
Enquanto na Europa as composições já eram bem desenvolvidas e integravam

texto e imagem de uma forma satisfatória, como nos famosos Le Charivari (1832-
1936) e L'Illustration (1843-1957) na França e o no Illustrated London na Inglaterra,
no Brasil, somente em 1900 com a Revista da Semana é que de fato esse formato se
concretizou. Utilizando-se de uma sorte de combinações de tecnologias de impressão
para mesclar texto e imagem, uma grande quantidade de novos periódicos invadiu o
mercado. Dentre elas a Illustração Brasileira de 1901 e impressa em Paris, O Malho
de 1902, sendo a pioneira no uso da tricromia8; Kosmos de 1904, Fon-fon! de 1907,
Careta de 1908 e muitas outras até chegarmos a O Cruzeiro (1928) que consagraria
a fotorreportagem no país e alcançaria a tiragem recorde de 720.000 exemplares
(Cardoso, 2006).
O barateamento e a consequente proliferação de periódicos também fez surgir

a necessidade das publicações diferenciarem-se umas das outras. Procurando suprir
essa necessidade e tentando ainda traduzir o estilo do momento, as publicações
periódicas viriam a ser um grande vetor dos movimentos artísticos. Durante toda a
primeira metade do século XX as revistas absorveram em seus designs elementos de
várias escolas artísticas das quais destacamos os do Art Nouveau, do Art Deco e do
Modernismo. No primeiro, a satírica revista ilustrada A Maçã (1922) foi seu melhor
representante no Brasil, no segundo destacamos a Para Todos (1918) e, no terceiro,
prenunciando este estilo que introduziria conceito do grid, a paulistana Klaxon (1922).
Com a introdução do conceito do pós-modernismo, as publicações ganharam

uma nova gama de possibilidades de composição. Cansado de sempre ter as
respostas corretas para os problemas de design proposto nos manuais de tipografia
(Poynor, 2010) o suíço Wolfgang Weingart defendeu uma maior flexibilidade no uso
da tipografia e da fotocomposição para além das convenções reducionistas da
tipografia modernista suíça. Seu trabalho e suas ideias tiveram enorme influência no
mercado americano e atribuíram um caráter ainda mais pessoal as produções. As
regras tipográficas foram aos poucos sendo todas quebradas e subordinadas ao
8 Tricromia: processo gráfico de impressão que utiliza as três cores primárias para obter as demais.
28
experimentalismo do pós-modernismo. Os designers Neville Brody e Peter Saville,

mesmo que com algumas diferenças de estilo e ainda não identificados assim na
época, foram alguns dos representantes europeus dessa new wave. Nos Estados
Unidos houve uma quantidade maior de profissionais que se aproximaram desse
estilo. Adulterando, quebrando e incorporando regras do design, com o uso de
colagem, distorções de imagens e tipografia e o uso de cores vibrantes, esses
profissionais introduziram uma nova maneira de pensar e produzir peças gráficas.
O designer David Carson, como cita Poynor, foi o mais ativo popularizador
dessas abordagens, a originalidade em suas diagramações a frente da revista RAY
GUN9 e suas avassaladoras palestras ao redor do mundo, se encarregaram de levar
a experiência desse tipo de design para públicos leigos e especializados. Seu estilo,
visto como "descolado" e tradutor de um espírito jovem e desconstruído, foi
rapidamente assimilado pela publicidade e passou a estar presente em anúncios dos
mais variados tipos de produtos.
Mesmo sem um consenso sobre o que efetivamente significa o termo pós-

moderno (Poynor) e justamente por essa sua condição de que tudo é aceitável e
permitido, torna-se quase inevitável a percepção de que sua influência se espalhou
por aproximadamente toda a produção de design subsequente.
Mesmo com algumas limitações de memória e poder de processamento, a

chegada dos computadores ao design gráfico, com o Macintosh da Apple (1984),
trouxe ainda mais flexibilidade a esse estilo e alterou o processo de design forma
fundamental (POYNOR apud GREINER, 2010).
Entendendo suas limitações com o novo mundo em bitmap, os profissionais

converteram os "defeitos" das fontes serrilhadas e imagens pixeladas em mais um
elemento estético a ser explorado, como se pode perceber nas capas da revista
Emigre produzidas na época. Uma de suas colaboradoras, April Greiner, teve bastante
9 Revista Ray Gun (1992-2000): publicação americana de rock alternativo, ícone na introdução do
design experimental, liderado por David Carson que conquistou notoriedade durante o tempo em
que foi seu diretor de arte, criando experimentações com a tipografia e com a diagramação da
revista (Poynor, 2010)
29
destaque utilizando o computador para criar um icônico trabalho o cartaz para a revista
Design Quarterly. Em sua peça de 60x180cm, Greiner utiliza uma imagem sua em
tamanho real rodeada por uma série de elementos espalhados que vão desde um
cérebro até uma lata de spray, elemento este muito presente na cultura punk e que
viria a se tornar o instrumento mais utilizado na arte urbana, principalmente aquela
ligada ao hip hop.
Se a introdução dos computadores transformaria a concepção do design de

revistas, a internet agitaria a maneira de distribuí-la e consumi-la. O mercado digital
transformou todo o processo de criação, produção, publicação, distribuição e consumo
editorial. Pouco a pouco as editoras foram se adaptando a este novo cenário em que
a fisicalidade da revista já passa a ser quase inexistente.
A Apple causaria furor no mercado de revistas mais uma vez em 2010, com o
lançamento do iPad. O presidente da empresa Steve Jobs falaria em sua
apresentação que o iPad criou uma categoria totalmente nova de dispositivos que
conectaria os usuários com seus aplicativos e conteúdo de uma maneira muito mais
íntima e intuitiva do que nunca". A revista WIRED foi a primeira a ter uma versão
exclusiva para iPad. Seu editor chefe Chris Anderson, declarou: “O tablet é a nossa
oportunidade de fazer o WIRED com o qual sempre sonhamos. Tem todo o impacto
visual do papel, aprimorado por elementos interativos, como vídeo e infográficos
animados.” O sucesso da WIRED foi seguido por diversas outras revistas que também
viram no dispositivo mais uma oportunidade de distribuírem seus títulos, no entanto a
maioria não estava preparada para este novo modelo interativo de revistas e apenas
replicavam suas versões impressas.
Entre erros e acertos a Apple propiciou às publicações uma opção para a

entrada no mundo digital. Se por um lado as pesquisas de mercado mostram que a
receita da venda de revistas impressas vem diminuindo, por outro lado vê-se
tendências claras de crescimento quando no uso de tecnologia digital para distribuição
e leitura.
Neste cenário em que a adaptabilidade a esse novo suporte pode avalizar o

sucesso ou fracasso de uma publicação, as editoras são compelidas a juntarem ao
seu know-how também os conceitos de usabilidade, ergonomia e toda gama do
30
conhecimento de IHC. A capacidade de se adaptar, como podemos concluir nesse

breve histórico, é um comportamento comum para este tipo de mídia. Mesmo tendo
que lutar contra o imediatismo dos portais de notícias e a disputar atenção com as
redes sociais, as revistas ainda mantém uma alta capacidade produzir conteúdo
relevante e atingir nichos.
PRINCÍPIOS DO DESIGN E DA COMUNICAÇÃO VISUAL
O design não é uma arte, porém se utiliza de técnicas estéticas e artísticas para
atingir seu objetivo funcional e específico. Portanto, o design aqui será definido como
uma atividade projetual, uma vez que, sua produção obedece a um caráter
comunicacional.
As técnicas comunicativas aplicadas ao projeto são estudadas a fundo na

chamada psicologia da forma, ou Gestalt, dissecada com maestria por Rudolf
Arnheim, teórico da percepção visual que escreveu a obra Arte e Percepção Visual
(Arnheim, 2005). As teses sobre elementos com Equilíbrio, Configuração, Forma,
Espaço, Luz, Cor, Movimento, Dinâmica e Expressão serão estudadas, uma vez que
são imprescindíveis em qualquer expressão do design.
Outra metodologia a ser apresentada é a proposta por Dondis (Dondis, 2008),

ao categorizar dezenas de técnicas visuais em pares opostos como
Regularidade/Irregularidade, Minimização/Exagero, Agudeza/Definição etc.
3.2.1. Teoria da Gestalt
O aparente simples ato de ver é perceber (visualmente) os raios de luz e

consequentemente entender, nos aspectos fisiológicos e psicológicos, os fatores que
estabelecem as impressões que temos, como as cores, as relações de escala, de
tamanho, de forma, etc. Portanto, a visão não se dá somente na ação da luz. O
31
espectador também tem suas experiências subjetivas projetadas no objeto. Ao

observar uma nuvem que por seu aspecto lembra a forma de um coelho, por exemplo,
ele associa algo que não tem uma forma definida (nuvem) a uma experiência passada
(a lembrança de como é um coelho), fazendo assim com que ao se perceber algo
também é acrescentado algo.
A Psicologia da Gestalt ou psicologia da forma ou, ainda, Gestaltismo, é um

segmento da psicologia que se desenvolveu a partir de 1912, pela necessidade da
existência de uma teoria que estudasse a relação de entendimento do todo a partir da
compreensão das partes. Max Wertheimer (1880-1943), Wolfgang Hohler (1887-
1967) e Kurt Koffka (1886-1940) foram os psicólogos que iniciaram estes estudos na
universidade de Frankfurt. Wertheimer entendeu, através de seus estudos, que o
campo visual é apercebido de forma organizada e subjetiva. O conhecimento do
mundo se obtinha através de elementos que por si só constituem formas organizadas.
A Gestalt, termo de origem germânica, com uma tradução aproximada de

“forma” ou “figura”, se baseia no processo de funcionamento do sistema nervoso,
explicando a relação entre o objeto observado e o observador, segundo o campo da
percepção. Essa relação acontece de formas diferentes na visão e no cérebro. Como
explanado por GOMES (2003) “a excitação cerebral não se dá em pontos isolados,
mas por extensão. Não existe, na percepção da forma, um processo exterior de
associação de várias sensações. A primeira sensação já é de forma, já é global e
unificada”, ou seja, não percebemos partes únicas dos objetos, mas sim o todo em
uma relação de interdependência entre as partes. Nesse sentido as partes são
indissociáveis do todo, sendo elas outra coisa que não elas mesmas, fora desse todo.
Segundo Santaella, a teoria gestáltica indicou que é o nosso cérebro que produz essa
síntese, definida como organização sensorial.
Mesmo os psicólogos da Gestalt revelando a espontaneidade da percepção, e

sugerindo uma relação entre o que acontece na retina e na consciência, a isomorfia
então é um dos postulados entre o que existe na mente e na retina e o que acontece
na mente (Santaella, 1992), sendo essa relação ainda um problema da percepção.
32
3.2.2. Leis da Gestalt
O conjunto de estudos da Gestalt incluem 8 leis básicas que compreendem as

formas de organização dos elementos, suas relações e como as percebemos.
3.2.2.1. Lei da Unidade
A unidade pode ser definida quando, ao percebermos um objeto, geramos o

entendimento do todo e não só os dos elementos únicos que o formam. Ao
visualizarmos as unidades percebemos as relações formais, dimensionais ou
cromáticas (Gomes, 2003) que elas produzem entre si e sua correspondência ao todo.
Utilizando a figura de exemplo, podemos reconhecer a palavra GESTALT ao mesmo
tempo que somos capazes de identificar cada um dos itens que a formam.
3.2.2.2. Lei da Segregação
Refere-se a capacidade de separarmos os elementos percebidos em uma

imagem em unidades. De forma geral, pode ser considerada o oposto da Lei de
Unidade tendo ligação com o tempo e complexidade da análise que faz da imagem.
Ao identificarmos a forma que parece representar as letras AL na figura, conseguimos
compreender a separação entre A e L, mesmo ela não existindo de fato.
3.2.2.3. Lei da Unificação
É a capacidade de preenchermos instintivamente os espaços para que uma

imagem seja compreendida como uma unidade. Quando percebemos relações de
peso, proximidade, semelhança, etc entre objetos e os vemos como uma mesma
composição, podemos afirmar que a unificação foi atingida. Assim como a lei da
segregação, podemos inferir julgamentos de valor quanto a qualidade da organização
da forma.
33
3.2.2.4. Lei do Fechamento
Nesta lei, a organização das unidades que formam o objeto tenciona-se no

sentido de forçarem uma ordem espacial lógica, instigando o observador a construir a
forma em sua mente. No exemplo da figura, podemos perceber como preenchemos
os espaços entre os três diferentes elementos para que consigamos perceber a letra
G.
3.2.2.5. Lei da Continuidade
A continuidade se dá ao compreendermos a impressão visual que se dá ao

organizarmos as unidades de forma sequencial, de forma contínua, fluida e sem
interrupções. Esta lei também pode manifestar a tendências de movimento da
composição, como por exemplo em linhas e degrades.
3.2.2.6. Lei da Proximidade
Elementos distintos ou não, ao serem dispostos próximos um ao outro tendem

a serem percebidos como uma unidade. Este princípio fica mais evidente ou é
reforçado quando termos configurações visuais semelhantes ou, ainda, se
combinarmos com outras leis da Gestalt como a de semelhança, por exemplo.
3.2.2.7. Lei da Semelhança
Elementos visualmente semelhantes ou idênticos, seja em cor ou forma,

tendem a se agruparem entre si, formando um único elemento. Como percebemos na
Figura 6, as linhas verticais por terem características análogas podem ser
identificadas como grupo, formando assim o que identificamos como a letra T.
3.2.2.8. Lei da Pregnância (Lei da Simplicidade)
Definida como a lei básica da Gestalt, ela se assenta no grau de facilidade que
temos de perceber um objeto. Nesse sentido Gomes afirma que "um objeto com alta
34
pregnância é um objeto que tende espontaneamente para uma estrutura mais simples,
equilibrada, mais homogênea e regular", sendo o grau pregnância, novamente, a
facilidade na compreensão e rapidez na leitura e interpretação da organização visual.
Figura 6: Exemplificação das leis da Gestalt
3.2.3. Conclusão
Design é uma área interdisciplinar do conhecimento, uma vez que, como visto
até aqui, envolve o domínio de uma série de matérias. A compreensão e o controle da
forma, no entanto, estão um degrau acima, pois, mesmo uma boa linguagem visual
se torna inútil sem a capacidade de empregá-la em um contexto adequado.
O DESIGN DE REVISTAS
As primeiras revistas publicadas se pareciam muito mais com livros em sua

diagramação e formato do que com as revistas que conhecemos hoje. Gradualmente
esses periódicos foram ganhando elementos e organizações próprias, criando uma
identidade visual característica. Não é difícil identicar no avanço tecnológico um papel
35
ativo para a aceleração contínua do aumento na diversidade e quantidade de produtos

editoriais, indo do impresso ao digital e com impacto profundo no design gráfico.
Ao longo da consolidação dos periódicos, o designer tem uma importante

parcela de contribuição nas definições referentes ao formato dos conteúdos e
materialização das publicações. De forma estrutural podemos descrevê-los abaixo:
3.3.1. O que compõe um projeto editorial
3.3.1.1. Layout
De forma generalista, podemos definir layout como sendo a atividade de

organizar os elementos em uma página, a fim de obter um resultado que seja
condizente com boas práticas de design e valorize o suporte e conteúdo da página.
Para Haslam (Haslam, 2007), os principais elementos de um layout são a imagem e
o texto, em que o primeiro segue uma sequência relativa à composição da página, e
segundo uma ordem hierárquica em que prevaleça a sequência de leitura. Seguindo
em sua análise, ele aponta que se o layout for relapso, assim como a impressão e o
acabamento (no caso de layouts impressos), a consequência será sentida na
desvalorização do seu conteúdo (texto), não importando a sua qualidade real. Em
outro sentido se o layout é visto como organizado e bem construído ele tenderá a
semioticamente imputar mais valor ao texto.
Os layouts podem seguir diversas configurações. Podemos ter layouts que

sejam guiados pelo uso da imagem, que sejam baseados no texto, que integrem texto
e imagem ou, ainda, que funda imagem e texto. Entretanto devem ser projetados para
refletir a natureza do conteúdo. De maneira conservadora em relação às práticas mais
ortodoxas de design editorial, em que pese o experimentalismo inerente ao ato de
criar, o design deve refletir o texto e não obstrui-lo (HASLAM apud SPIEKERMANN,
2007).
3.3.1.2. Grid
36
"Para alguns designers gráficos, ele é parte incontestável do processo de

trabalho, oferecendo precisão, ordem e clareza. Para outros, é símbolo da opressão
estética da velha guarda, prisão sufocante que atrapalha a busca de expressão"
(Samara, 2007).
Segundo Samara, o grid é o princípio organizador do design gráfico que

mantém raízes profundas em nosso desejo de impor sentido e criar ordem em nossas
vidas. O pensamento estrutural permeia a produção e a construção do conhecimento
humano. O uso do grid remonta tempos anteriores aos gregos e romanos e se
aprimorou e ganhou maior repercussão nos avanços tecnológicos trazidos pela
revolução industrial.
Para Lupton e Phillips, os grids auxiliam os designers na criação de

composições, trazem um caráter democrático à página e demarcam o espaço com
linhas-guia que tornam o processo de layout mais eficiente, organizando o conteúdo
ativo (texto e imagens) e ditando um ritmo fluído ao conjunto geral da página.
Para Haslam, o grid promove as divisões internas e proporciona consistência e

coerência à página que, por sua vez, fazem com que o leitor se concentre no conteúdo
ao invés da forma. Reforçando Samara, o autor ainda cita que a exploração e a
rejeição do grid criam dois polos em que um segue o racionalismo formal e comedido
e outro segue em direção ao expressivo e provocativo; enquanto alguns seguem
convenções medievais, outros percorrem abordagens derivadas do modernismo da
década de 1920.
A forma mais fácil de iniciar a construção de um grid talvez seja definindo as

margens com espaços iguais em torno de uma página, formando uma moldura em
torno do texto ou da imagem. Existem, entretanto, diversas outras configurações
possíveis. Um livro comum, por exemplo, é projetado em uma coluna única de texto,
outros mais complexos, como os didáticos e dicionários, frequentemente utilizam duas
colunas, enquanto revistas impressas normalmente utilizam 3 colunas. Na web é
comum encontrarmos grids que vão de 4 a 18 colunas, essa flexibilidade está
diretamente ligada a versatilidade que o meio demanda.
Projetar um grid envolve, primeiramente, a análise preliminar do conteúdo e

das características do suporte, em seguida é preciso prever os possíveis problemas
37
que poderão surgir, como títulos muito longos, por exemplo. Antes de tudo, é
importante entender que o grid, mesmo sendo um guia preciso, nunca deve prevalecer
sobre a informação.
"A grade tipográfica é um regulador proporcional da composição, das tabelas,

das figuras etc. (...) O desafio é: encontrar o equilíbrio entre o máximo de
conformidade à regra e o máximo de liberdade. Ou: o máximo de constantes com a
maior variabilidade possível" (LUPTON apud GERSTNER, 1961).
3.3.1.3. Formato
Em geral o formato das revistas impressas é focado mais no conteúdo do que

no formato físico, uma vez que, por sua natureza descartável, via de regra são
escolhidos por razões econômicas ou por comodidade, além de manter um mesmo
projeto gráfico para todas as edições. O formato de uma publicação pode ser
categorizado globalmente de três maneiras: retrato, em que a altura é maior que
largura; paisagem, em que a altura é menor que largura e, quadrado, em que altura e
largura são iguais.
Mesmo a escolha dos formatos não sendo uma escolha livre, principalmente
nos impressos, obedecem a formatos pré-estabelecidos que levam em consideração
o aproveitamento do papel, as proporções, contudo, suportam variações infinitas e,
assim como um edifício ou uma sala, algumas são mais agradáveis que outras.
3.3.1.4. Tipografia
A palavra é originada no desejo de externalizar os gestos do corpo ou no

registro da fala, nos dois casos ela perde uma extensa variedade de expressões e
inflexões. Os designers gráficos tentam romper essa limitação ao escolher as fontes,
aumentar e diminuir ou alterar os pesos e posições das letras. Portanto, a tipografia
deve iluminar o conteúdo, aumentar sua compreensão, sua energia e fazer com que
sua fonte e sua forma se acomodem perfeitamente (Bringhurst, 2005).
Segundo Bringhurst, a tipografia é o ofício que dá forma visível e durável à

linguagem humana, não estando sujeita a modismos. Ela é um ofício por meio do qual
os significados do texto podem ser classificados, honrados ou compartilhados. Sendo
38
a legibilidade um dos objetivos que também podem incluir vitalidade e serenidade. Se

a tipografia faz algum sentido, ele é visual e histórico, com seu lado visível sempre a
mostra. O lado histórico é resultado de um longo caminho do homem pela selva das
letras, tendo seu cerne na caligrafia (Bringhurst, 2005).
A tipografia surgiu com os primeiros profissionais tentando reproduzir o trabalho

que os escribas faziam com as mãos e desde então sua história reflete a tensão
contínua entre a mão e a máquina, o orgânico e o geométrico, o corpo humano e o
sistema (Lupton, 2006), o que resultou em uma infinidade de formas e estilos.
Lupton aponta para uma classificação mais generalista, correlacionando a

produção estilística de tipos com os períodos da história da arte como: o renascentista,
com letras humanistas estreitamente ligadas ao movimento da mão e que tentavam
emular a caligrafia clássica, o barroco, com fontes transicionais, que possuem formas
mais precisas e um alto contraste; e o iluminista, com fontes mais abstratas, modernas
e geométricas. Já Bringhurst propõe uma abordagem mais refinada e histórica,
relacionada com o eixo do traço da pena que desenha a letra. Para o autor podemos
classificar as fontes em: letras renascentistas (séc. 15 e 16), com traços modulados,
eixo humanista e terminais precisos; letras barrocas (séc. 17), com eixo variável,
serifas e terminais modulados e abertura moderada; a letra neoclássica (séc. 18), que
expõe o traço modulado, eixo racionalista (vertical) e serifas refinadas e terminais em
gota; a letra romântica (séc. 18 e 19), que possui um eixo racionalista, traços hiper
modulados e serifas abruptas; a letra realista (séc. 19 e 20), que contém traço não
modulado, eixo vertical presumido e ausência de serifas; a letra modernista
geométrica (séc. 20), que tem traço não modulado ou muito sutil, às vezes não
apresentam eixo e nem serifas; a letra modernista lírica (séc. 20), que representa a
redescoberta da forma renascentista e apresenta traço modulado, eixo humanista e
terminais e serifas com forma oriunda da pena; e por fim, a letra pós-moderna(final
séc. 20 e início 21), que frequentemente revisita outros estilos, podendo ser altamente
geométrica ou terem formas neoclássicas ou românticas.
Desde os tipos de Gutenberg, a produção de tipos está ligada a produção

industrial. Dos tipos compostos em chumbo até a fotocomposição e as fontes digitais,
500 anos se passaram e as fundições tipográficas apareceram no mundo todo. Com
o advento do computador o suporte em que as fontes apareciam também se
39
modificou. As fontes foram adaptadas para serem exibidas nas telas e ganharam
versões exclusivas para o meio digital, levando as empresas que produzem os
sistemas operacionais dos computadores e celulares, como Apple e Google, a
produzirem suas próprias famílias tipográficas, completamente adequadas às
diversas resoluções de telas.
3.3.2. Da litografia ao digital
Da reprodução mecânica promovida pela prensa de Gutenberg, que possibilitou

a criação de uma nova variedade de designs, passando pelos mais recentes avanços
computacionais, podemos perceber o papel importante que a tecnologia tem na
atividade do design e consequentemente na produção do design editorial.
O surgimento da litografia permitiu a reprodução de imagens em larga escala e

a custos mais baixos que outras técnicas de impressão. Podemos facilmente
identificar o impacto desse avanço ao verificar que entre 1830 e 1880, o número de
semanários impressos na França aumentou dezessete vezes (CARDOSO apud
JOBLING & CROWLEY, 2008: 51). No Brasil a litografia, aparentemente, não
encontrou um contexto completamente preparado para os seus avanços. Apesar de
um início promissor e com uma qualidade igualmente admirável, a litografia e toda a
indústria gráfica limitou seu crescimento devido algumas características sociais que
ainda hoje (mais de 160 anos depois!) nos assolam, como um público alfabetizado e
com renda e instrução condizentes com o consumo regular de impressos.
Outro salto tecnológico só teríamos com a introdução dos computadores na

produção, tornando-se talvez, uma segunda revolução industrial. O processo de
desenhar se modificou e foi substituído, da mesma forma que a nova maneira de criar
trouxe também uma visão mais eclética e híbrida, trocando os preceitos funcionalistas
do passado em benefício da desordem e a poluição visual.
Os desafios na transposição do suporte, do impresso para o digital, se

mostraram incapazes de encontrar soluções nas regras e parâmetros definidos ao
longo da história. Novas formas de consumir e experienciar a leitura também exigiram
40
novas formas de desenhar. A introdução de novas formas de editoração eletrônica,

aumentaram as possibilidades de manipulação dos elementos gráficos, sedimentaram
o papel do designer gráfico na produção visual e adicionaram um canal de saída a
mais para a produção de designs.
A internet transformou a produção editorial e atingiu até as mais tradicionais

publicações impressas. O imediatismo da informação consumida pela web
transformou o consumo de periódicos, que segundo algumas previsões deixará de
existir, pelo menos da forma como conhecemos, até o ano de 2027 (Future
Exploration, 2006). Da mesma maneira isso compreende uma série de novas
oportunidades para a expressão da criatividade dos designers. Novas formas de
interagir e consumir o conteúdo, como ferramentas e experiências mais imersivas,
podem transpor os limites que o papel impunha e construir novas narrativas.
DESIGN CENTRADO NO USUÁRIO
Design Centrado no Usuário, ou DCU, é uma metodologia de design que leva

em consideração o usuário em cada etapa no processo de produção de um produto.
De acordo com Garrett (2011), toda a experiência que um usuário tem com um
produto/serviço ou interface, deve ser resultado de um processo consciente que vise
atender as necessidades e desejos deste usuário. Um erro comum é confundir os
conceitos de DCU com experiência do usuário, Interação Homem Computador (IHC)
e usabilidade.
Os demais termos serão mais bem explorados nos próximos tópicos deste
trabalho, no entanto, cabe ressaltar que, mesmo podendo ser utilizado para o
desenvolvimento de qualquer tipo de produto, o DCU deriva dos estudos de IHC que
por sua vez deriva dos conceitos de usabilidade. Fato é que ao localizar o usuário no
centro do processo de design, a usabilidade e a experiência do usuário serão com
certeza satisfatórias (Lawdermilk, 2013).
41
Ao abordar o DCU os designers devem compreender que os usuários têm

modelos mentais diferentes e sua própria maneira de abordar os problemas. Embora
seja difícil trabalhar com usuários, eles são ativos valiosos na criação de um projeto
bem-sucedido. Neste sentido, a interação é o princípio básico dos projetos que levam
consideração o usuário como agente principal do projeto, por isso o designer deve
constantemente rever o objetivo da tarefa, o ambiente em que essa tarefa se realizará
e novamente ouvir os usuários, realizando testes ao longo do desenvolvimento.
USABILIDADE
A usabilidade é o conceito originário dos estudos de ergonomia referente a

qualidade relativa à relação entre o usuário, a tarefa, a interface, o equipamento e os
demais aspectos do ambiente no qual o usuário utiliza o sistema (Cybis, et al., 2015).
De forma geral, o uso adequado dos princípios de usabilidade procura sempre

tornar os produtos mais fáceis de usar. Além da participação ativa do usuário nas
decisões de projeto, como já vimos anteriormente neste trabalho, existem diversas
relações de regras que instruem como um design (interface) estabelece uma boa
usabilidade na relação com usuário. Estas heurísticas de usabilidade propostas por
diversos autores têm o mesmo princípio em sua essência: os usuários precisam de
produtos utilizáveis. É a necessidade mais universal de todos (Garrett, 2011).
3.5.1. Heurísticas de Nielsen
Em seu livro Usability engineering, de 1994, Jacob Nielsen, propõe uma lista
de 10 regras que ajudam a avaliar e projetar interfaces mais usáveis:
Visibilidade do estado do sistema: informar ao usuário onde estava, onde ele

está e para quais outros ambientes ele poderá se dirigir a partir de sua localização.
42
Compatibilidade entre o sistema e o mundo real: o sistema precisa "falar" a

língua do usuário, ou seja, estar relacionado com o seu modelo mental.
Liberdade e controle ao usuário: dar liberdade para que se possa reverter as

ações confere segurança ao usuário ao utilizar o sistema.
Consistência e padrões: a padronização dos elementos, telas e páginas,

facilita a familiarização do usuário com o sistema.
Prevenção de erros: elimine condições que possam levar o usuário a cometer

um erro, como deletar um documento ou excluir algum dado importante.
Reconhecer em vez de relembrar: evite acionar a memória do usuário o

tempo inteiro. Forneça pistas e fluxos de ações de acordo com o contexto que o
usuário se encontra.
Flexibilidade e eficiência de uso: adapte o uso do sistema ao nível de

conhecimento do usuário.
Design estético e minimalista: use somente o necessário, quanto mais

elementos, maior a carga cognitiva sobre o usuário.
Suporte para o usuário reconhecer, diagnosticar e recuperar erros:

mensagens de erros devem ser claras e se relacionarem com o conteúdo ou ação que
o causou.
Ajuda e documentação: o ideal é não precisar dessa regra, entretanto, uma

forma de consulta deve estar facilmente acessível.
3.5.2. Regras de ouro
O cientista da computação e professor do Laboratório de Interação Humano-

Computador na Universidade de Maryland, College Park, Ben Shneiderman,
desenvolveu em seu livro Designing the user interface (2009) uma lista chamada oito
regras essenciais para o Design de Interfaces, sendo as seguintes:
43
Persiga a consistência, mantenha elementos com funções similares com

design similar, isso facilita a familiarização do usuário com o sistema e evita uma carga
cognitiva maior que a necessária;
Forneça atalhos, à medida que o usuário conhece seu sistema ele tenderá a
querer realizar as tarefas com maior rapidez. Forneça maneiras de realizar isso;
Forneça feedback informativo, interfaces são como plataformas de diálogos

com os usuários, quando eles perguntarem responda. Forneça resposta proporcionais
para cada ação que o usuário fizer.
Marcar o final dos diálogos, não deixe o usuário em dúvida, marque a

conclusão de uma ação de maneira entendível e convicta;
Forneça a prevenção e manipulação simples de erros, desenhe seu sistema

de maneira que evite que os usuários possam cometer erros graves, no entanto, se
eles ocorrerem, forneça caminhos simples, constitutivos e específicos para
recuperação;
Permitir o cancelamento das ações, tanto quanto possível, as ações devem

ser reversíveis. Esse recurso alivia a ansiedade, pois o usuário sabe que os erros
podem ser desfeitos, incentivando a exploração de opções desconhecidas;
Fornecer controle e iniciativa ao usuário, faça com que o usuário se sinta no

controle da interface, fazendo com que a interface responda às suas ações;
Reduzir a carga de memória de trabalho, temos uma memória de curto prazo

com uma baixa capacidade (aproximadamente cinco informações diferentes de uma
vez), por isso, crie hierarquias compreensíveis de forma que permita ao usuário
encontrar as informações que procura de forma simples e rápida.
3.5.3. Princípios de Diálogo
A norma ISO 9241:110 (2002) descreve os princípios gerais de ergonomia

considerados importantes para o design e avaliação de Interfaces Humano
Computador. Adaptação à tarefa; Autodescrição (feedback); Controle ao usuário;
44
Conformidade às expectativas do usuário; Tolerância aos erros; Facilidade de

individualização; Facilidade de aprendizagem. Essas concepções são genéricas e
podem ser utilizadas em qualquer divisão do sistema.
A utilização desses princípios deve levar em consideração os modelos mentais

dos usuários, a tarefa ou requisito que será desenvolvido, a técnica de diálogo
empregada, como cada princípio será abordado – segundo os objetivos do negócio e
quais tecnologias e recursos estão disponíveis.
3.5.4. Critérios ergonômicos
Critérios ergonômicos são um conjunto de oito princípios subdivididos em 18

subconjuntos que tem em vista balizar a construção de sistemas de interação
humano-computador. Eles foram desenvolvidos no IRIA (Institut National de
Recherche en Informatique et en Automatique), em 1993, por dois pesquisadores
franceses, Dominique Scapin e Christian Bastien.
Os princípios são os seguintes:
A Condução que é subdivido em quatro critérios: Orientação,

Agrupamento/Distinção de Itens, Feedback imediato e Legibilidade; e se refere às
maneiras de advertir, orientar, informar, instruir e guiar o usuário na interação com o
computador.
A Carga de trabalho que diz respeito a redução da carga cognitiva sobre o

usuário e na melhora do diálogo do sistema com o usuário, é subdivido em dois
critérios: Brevidade (que inclui Concisão e Ações Mínimas) e Densidade
Informacional.
O critério de Controle explícito define que a interface deve reduzir as

ambiguidades a fim de que os usuários tenham controle sobre o diálogo. Esse
princípio se subdivide em dois critérios: Ações explícitas do usuário e Controle do
Usuário.
45
A adaptabilidade de um sistema se relaciona com a habilidade de reagir

conforme o contexto, as necessidades e preferências do usuário. Esse princípio se
subdivide em dois critérios: a Flexibilidade e a consideração da experiência do
usuário.
O princípio de Gestão de erros é a capacidade de o sistema de evitar ou

reduzir a ocorrência de erros, e se eles ocorrem, que se favoreça sua correção. Este
critério é subdividido em três critérios: Proteção contra os erros, Qualidade das
mensagens de erro e a Correção dos erros.
Coerência, ou homogeneidade e consistência, é o princípio relacionado às

escolhas na elaboração da interface, que devem ser iguais quando em circunstâncias
iguais, e diferentes em situações diferentes.
Significado dos códigos e denominações está relacionado à como as

informações são apresentadas e sua relação semântica com seu referente. Um
exemplo desse princípio é utilizar abreviaturas que tenham fácil interpretação pelo
usuário.
O princípio de Compatibilidade se refere ao respeito às características

objetivas e subjetivas do usuário (memória, percepção hábitos, competências, idade
expectativas, etc.), às características das tarefas, e ao fluxo de entradas e saídas do
diálogo em uma aplicação.
INTERAÇÃO HOMEM-COMPUTADOR (IHC)
O IHC (ou HCI, Human-Computer interaction) é a matéria de estudo

interdisciplinar que abrange a interação entre pessoas e computadores. Ela engloba
estudos relacionados à ciência da computação, artes, design, ergonomia, psicologia,
sociologia, semiótica, linguística, e áreas afins. A experiência do usuário e os sistemas
de informação são áreas de pesquisa e desenvolvimento que tem aumentado a sua
demanda rapidamente nas últimas décadas. O caráter interdisciplinar do design
46
combinou os métodos de coleta de dados, a estrutura intelectual da psicologia com as

ferramentas da ciência da computação. Em seguida, contribuições acumuladas de
psicólogos e industriais, designers, especialistas em ergonomia, arquitetos da
informação e antropólogos e sociólogos. E agora, à medida que computadores e
interfaces de usuário estão se tornando a base para sistemas sociotécnicos cada vez
mais poderosos, analistas de políticas, economistas, advogados, defensores da
privacidade e especialistas em ética estão desempenhando um papel crescente
(Shneiderman & Plaisant, 2009). Em um mundo cada dia mais conectado e
dependente de computadores o estudo da interação humano-computador torna-se
fundamental e um grande diferencial para o desenvolvimento de sistemas.
Há várias abordagens para o entendimento da IHC, alguns autores encaram o

tema de maneira objetiva estudando a relação criada ao se interagir com uma interface
de sistemas computadorizados e os principais fenômenos de circundam essa
interação, outros autores, com uma visão mais humanizada, reconhecem a grande
maioria das interações humano-computador como sendo de alguma maneira uma
interação Humano-Humano, ou ainda, uma interação Humano-Computador-Humano.
Como apontam Rocha e Baranauskas (2003) um computador bem projetado

tem muito mais chances de ser aceito e utilizado. A ideia de que softwares bem
desenhados, com melhor aspecto físico da interface, proporciona maiores chances de
sucesso no mercado, estimulou a criação do termo user-friendly, ou interface-
amigável. As autoras demonstram a falha do termo, uma vez que em geral representa
somente o espaço estético das interfaces e, mesmo que represente um avanço em
relação às interfaces mais antigas, as empresas também têm se utilizado do termo
apenas como um atrativo de mercado, não sendo necessariamente um fator que
atenda aos requisitos de IHC e, consequentemente, as necessidades dos usuários.
Dentro das abordagens teóricas do tema podemos encontrar diversos

tratamentos dependendo da área de estudo. Ainda que não nos aprofundemos nos
conceitos, destacamos as abordagens psicológicas da Lei de Hick-Hyman, que
mede o tempo necessário para tomada de decisão segundo uma quantidade de
opções; a lei de Fitts, que relaciona o tempo que um usuário leva para apontar para
algo, o tamanho do objeto-alvo e a distância entre a mão do usuário e esse objeto-
alvo; a psicologia cognitiva aplicada de Card, Moran e Newell, que apontam para
47
caminhos multifacetados analisando os diversos pontos de interação humano-

computador e o modelo de processamento humano de informação (ver ); o princípio
da Gestalt, que aqui analisa nossa característica de identificar padrões visuais e como
relacioná-los ao mapeamento de dados em um sistema; a percepção de cores; a
engenharia cognitiva, defendida por Donald Norman e que relaciona as variáveis
psicológicas e as variáveis físicas no estado de um sistema; as abordagens
Etnometodológicas da análise da conversão que descreve a forma como uma
conversa é organizada e seu o desenvolvimento de cada turno de fala; a comunicação
usuário-sistema, que sugere que, assim como um ser humano, o computador seja
capaz de se expressar, ou expressar a intenção por trás de suas ações, para o
usuário; as abordagens da Teoria da Atividade que tem por consideração os
princípios da mediação (aqui como a atividade computacional na consciência), a
orientação a objetos (o engajamento físico, social, cultural, expectativas, etc.) e
perturbação (referente a flexibilidade das relações que fazem com que os usuários
modifiquem a si ou as suas ações ao visualizarem ou perceberem um evento); as
abordagens da Cognição distribuída que visa entender como um sistema se
configura para coordenar subsistemas, considerando seus membros, suas estruturas
internas e externas e a distribuição das ações na linha do tempo; as abordagens da
Cognição semiótica em que os princípios comunicacionais das interfaces são
decodificados segundo os processos de significação, de comunicação, dos
interlocutores e, por fim, do espaço de design de IHC, explanados na teoria da
semiótica.
Todas as abordagens podem conviver pacificamente e se complementarem,

ampliando a visão do conhecimento sobre esse campo. Uma vez que se é esperado
conhecer e validar como o usuário experiência um certo objeto de estudo, se faz
necessário a compreensão da maior dose possível do conhecimento disponível a fim
de construir um cenário mais completo da situação e, consequentemente, desenvolver
meios mais adequados de interação.
ANÁLISE MERCADOLÓGICA SOBRE AS PUBLICAÇÕES DIGITAIS

48
Antes de qualquer premissa, as publicações atendem a uma demanda

mercadológica adaptada aos meios de distribuição e aos nichos sociais a que se
propõe a atender. Com a popularização dos tablets e smartphones, surgiram novas
maneiras das editoras se relacionarem com os leitores. Junto destes novos
parâmetros também vieram novas ferramentas ditadas por novas tecnologias
utilizadas na construção e exibição dos projetos digitais nos devices. Os formatos de
arquivos e softwares de editoração mais populares, além de lojas virtuais, começam
a ditar a maneira de construção e distribuição das publicações digitais, como por
exemplo as publicações em formato app que se limitam ao dispositivo, as limitações
do dispositivo e a loja virtual para qual foram desenvolvidas. Neste contexto, o
mercado necessita de formatos de arquivos cada vez mais flexíveis e, também, de
designs mais flexíveis e adaptáveis ao maior número de dispositivos.
REVISTAS DIGITAIS SEGUNDO OS PRINCÍPIOS DE DESIGN

CENTRADO NO USUÁRIO
Dezenas de produtos com os quais se interage no dia-a-dia se utilizam de

técnicas e metodologias que facilitam e os tornam mais agradáveis ao uso.
Princípios de Design de Interação são fundamentais para todas as disciplinas,

campos e abordagens que se preocupam em projetar sistemas baseados em
computador para pessoas (Rogers, et al., 2002). Neste contexto estão relacionadas
também, etapas de identificação dos usuários e de suas necessidades em relação ao
projeto, pesquisas de modelos conceituais e tecnologias, protótipos estáticos e
funcionais, assim como testes de usabilidade e implementação do projeto.
TECNOLOGIAS DISPONÍVEIS
49
As inovações das tecnologias digitais transformam o setor editorial. A

publicação de periódicos digitais vai além da compreensão de mídia digital, incluindo
recursos interativos ao conteúdo e dando um caráter novo à leitura.
Do ponto de vista dos formatos, encontramos diversas tecnologias

empregadas, dentre elas aplicações nativas para iOS e Android, formatos de imagem
e gráficos como PDF e JPG e, por fim, linguagens web como HTML e Javascript.
Percebemos, no entanto, que estes formatos estão em permanente renovação para
permitir a entrega de revistas cada vez mais interativas e multimidiáticas e
interessantes para os leitores.
O formato PDF, desenvolvimento do Adobe System em 1992, é um tipo de

arquivo que dominou a distribuição de revistas, uma vez que permite a distribuição do
arquivo em qualquer sistema operacional e em qualquer device, com um mínimo ou
nada de conflito. Um dos fatores de sucesso desse formato também está na facilidade
em que os próprios softwares de editoração exportam neste formato. Quando não
exportam versões otimizadas para distribuição online, pouco ou nenhum trabalho de
conversão é necessário para disponibilizar as revistas. No entanto, esse formato tem
seus problemas quanto a capacidade de interação e na habilidade de se adaptarem
ao formato da tela em que estão sendo mostrados. Uma das únicas habilidades
interativas no PDF é a capacidade de incluir links internos (direcionamentos para
partes do próprio documento) e externos (páginas na internet). Como a grande maioria
são apenas réplicas de suas versões impressas, ao abrir uma revista em um
smartphone, por exemplo, o leitor inevitavelmente precisa aumentar e diminuir (zoom
in, zoom out) a página para conseguir ler o conteúdo. A grande maioria dos
distribuidores (newsstand) utiliza esse formato para a distribuição.
No setor de publicações independentes, a plataforma Issu merece um destaque

por aceitar diversas formas de arquivo como DOC e PDT, bem como o próprio PDF.
Além de disponibilizar a possibilidade de o usuário incorporar o arquivo em websites
e blogs de forma bastante simples e bastante acessível.
Mais recentemente, a introdução dos dispositivos móveis, ajudado pela

tecnologia 3G e agora 4G, trouxe uma nova maneira de consumir esse tipo de
50
conteúdo. Esse tipo de dispositivo permite a instalação de aplicações que, quando

bem aproveitados os recursos, têm a capacidade de entregar publicações mais
interativas, com mais recursos e de forma mais rápida. Pela proximidade no tamanho
e formato das revistas impressas, o tablet é o dispositivo com maior capacidade, do
ponto de vista do design editorial e interativo.
4. DESENVOLVIMENTO
ESTRATÉGIA
4.1.1. Análise de similares
Neste item pretende-se analisar algumas revistas, não necessariamente no

mesmo campo editorial do que se propõe o trabalho, a fim de demonstrar
entendimento do assunto a ser explorado e domínio do ferramental teórico e prático
do qual o projeto da revista UpRock fará uso. Esta análise se dará a partir do prisma
dos planos pensados por Garrett sendo elas: 1. Estratégia: o plano mais abstrato em
que se define os objetivos do produto e as necessidades do usuário que serão
supridas. 2. Escopo: destinado aqui a demonstrar como as necessidades dos usuários
influenciam o conjunto de funcionalidades da ferramenta. 3. Estrutura: neste ponto
saímos dos elementos mais abstratos para definições mais concretas que irão
delimitar a experiência que o usuário terá e o fluxo entre páginas/seções do produto.
Resumindo, neste ponto é que se define o que chamamos de Arquitetura da
Informação. 4. Esqueleto: analisaremos as formas de navegação e posicionamento
dos elementos de interação. 5. Superfície: a última etapa descrita por Garrett se
destina a estabelecer os caminhos estéticos e visuais das revistas.
51
Os exemplos analisados seguem critérios técnicos e estéticos que vão de

encontro ao que se pretende com o projeto da UpRock. Foram selecionadas as
revistas Juxtapoz Art + Culture, Vista Skateboard Art e Superinteressante (Figura 7)
Figura 7: Revistas Juxtapoz, Vista e Superinteressante
Fonte: O autor
4.1.1.1. Análise de estratégia, escopo e estrutura
Tendo em vista que estes itens são os planos mais abstratos na metodologia
de Garrett, pode-se afirmar que também são os aspectos mais difíceis de se analisar
quando o produto já está pronto. No entanto há alguns pontos que podem jogar luz ao
nível de sucesso que as revistas analisadas atingiram nestes planos. Ao ponto inicial
(estratégia) as três revistas demonstram ter objetivos de negócio e os objetivos dos
usuários (ou leitores) satisfatoriamente atingidos, uma vez que são publicações que
já estão há alguns anos no mercado (Juxtapoz 1993, Vista 2004 e Superinteressante
1987) e, por possuírem marcas fortes e reconhecidas em seus segmentos, têm
relativo apelo midiático, veiculando publicidades de diversas marcas importantes
dentro do público alvo.
Quanto ao segundo estágio (o escopo), dentre os materiais disponíveis, não foi

possível levantar informações suficientes para que se realizasse uma análise
adequada.
52
Por serem revistas tradicionais e utilizarem serviços de terceiros para a

distribuição digital de suas publicações, as três revistas apenas transpõem as versões
impressas para as versões digitais, ou seja, não há em nenhuma delas uma versão
adaptada ou própria para as plataformas móveis. Desta maneira, teríamos que de
alguma maneira, corromper a matriz do objetivo do plano de estrutura e, em certo
nível, a própria metodologia de Garrett que se destina à construção de produtos
digitais, para que esta análise fosse possível.
No entanto, muitas das formas de navegação e organização do conteúdo no

mundo digital descendem do mundo físico e em grande parte do meio editorial. Sobre
esse prisma, podemos julgar que estas publicações seguem um padrão de arquitetura
há muito consolidado. Com todas as seções comuns às revistas, como sumário,
expediente, editorial e outras, bem organizadas e bem distribuídas, seguindo uma
arquitetura de conteúdo sequencial e por vezes por princípios (Figura 8). Os
conteúdos seguem ordens lógicas que facilitam a identificação de título, corpo de
texto, assinatura e demais elementos.
Figura 8: Sumários das revistas Juxtapoz, Vista e Superinteressante
Fonte: O autor
4.1.1.2. Análise de esqueleto

53
Ainda sob a ótica da sobreposição entre mundo físico e digital, aqui analisamos
as publicações segundo o grid e sua flexibilidade, posicionamento dos elementos de
navegação e identificação das páginas, seções e matérias (Quadro 1).
Figura 9: Grid revista Juxtapoz
Fonte: O autor.
54
Figura 10: Grid revista Vista
Fonte: O autor
55
Figura 11: Grid revista Superinteressante
Fonte: O autor
Quadro 1: Análise de esqueleto
Juxtapoz Vista Superinteressante
Tipo de grid Modernista colunas Modernista colunas Modular orientado por

imagem
Nº de colunas 1-3 1-3 1-5
Fólio Sim Sim Sim
Título corrente Sim Não Não
Formato 1:1.167 1:25 1:1.307
Sentido leitura Horizontal Horizontal Horizontal
Fonte: O Autor
56
4.1.1.3. Análise da superfície
Todos os itens anteriores se unem aqui pra formar o plano mais concreto e de
percepção mais imediata das estruturas de Garrett. Empregando notas de 1 a 5 para
avaliar a adequação do item, sendo 1 para ruim e 5 para ótimo, consideraremos a
seguinte subdivisão utilizada pelo autor: 1. Caminho do olho (follow the eye). 2.
Contraste e regularidade (contrast and uniformity). 3. Coerência interna e externa
(Internal and external consistency). 4. Paleta de cores e tipografia (color palettes and
typography). 5. Composição e guia de estilo (Design Comps and Style Guides).
Figura 12: Páginas internas da Juxtapoz, Superinteressante e Vista
Fonte: O autor.
57
Quadro 2: Análise de superfície
Juxtapoz Vista Superinteressante
Caminho do olho 5 4 5
Contraste e 5 3 5
regularidade
Coerência interna e 5 5 5
externa
Paleta de cores e 4 5 5
tipografia
Composição e guia de 4 4 5
estilo
Fonte: O autor
4.1.1.4. Conclusão
Dentre as revistas avaliadas, nenhuma demonstra ter uma transposição

adequada aos dispositivos digitais. São, de fato, apenas digitalizações de suas
versões impressas, o que dificulta a avaliação de itens inerentes do meio digital, como
a navegação, por exemplo.
Isto posto, verificamos que as revistas apresentam uma boa pontuação nos
quesitos avaliados. A Superinteressante, porém, tem um pequeno destaque. A
flexibilidade do seu grid proporciona uma gama considerável de composições e
layouts possíveis. Enquanto a Juxtapoz e Vista utilizam os marcadores e títulos
correntes para situar o leitor, a Superinteressante faz uso de vários elementos e pistas
visuais, que favorecem o reconhecimento (Nielsen & Budiu, 2012) da seção da revista.
Outro elemento avaliado que vale destacar é a utilização do grid modular orientado
por imagem (HASLAM, 2007), que faz com que a composição tenha pontos focais que
guiam o leitor pela página e definem de maneira bastante sofisticada a hierarquia das
informações.
58
ESCOPO
Baseando a execução deste plano na análise de similares e cruzando com o

tempo de execução disponível para o projeto, optou-se por adotar o conceito de MVP
(sigla para Minimum Viable Product, ou produto mínimo viável), que consiste em
desenvolver a menor quantidade de features de um produto a fim de avaliar sua
aceitabilidade, usabilidade, entre outros itens. Utilizando as aplicações das revistas
como benchmark, elaborou-se uma relação de especificações das funcionalidades
básicas para o funcionamento da aplicação:
§ A edição atual da revista deve ter destaque na Home do app.

§ O usuário terá acesso às edições anteriores da revista.
§ O usuário poderá salvar as matérias para acessá-las de maneira mais
fácil posteriormente.
§ O usuário terá uma forma de inserir seu login e senha.
§ O usuário deverá ter uma maneira de navegar entre as matérias da
revista.
§ O usuário não-logado poderá acessar parcialmente as edições.
§ Na capa das matérias bloqueadas o usuário não-logado será avisado
que é necessário assinar a revista para acessá-las.
ESTRUTURA
A fim de estruturar e atender aos requisitos identificados nos planos anteriores,

elaborou-se um fluxo contextual, mapeando as navegações transacionais e as tarefas
necessárias para o funcionamento mínimo da aplicação da revista. Esse fluxograma
visa facilitar o entendimento das relações entre as telas e suas funções.
59
Figura 13: Arquitetura do aplicativo da Revista UpRock, versão 2.0
Fonte: O autor.
ESQUELETO
Nesta etapa dos planos de Garrett (2011) definimos como as funções e os

requisitos especificados na etapa de Estrutura serão distribuídos nas telas e como irão
se comportar. Para isso, foram desenvolvidos wireframes representando as telas em
baixo nível de fidelidade, levando em consideração dois aparelhos: um iPhone 8, com
dimensões em pixels de 375x667px e um iPad 9,7" com 768x1024px.
60
Além das telas foi desenvolvido um protótipo navegável, a fim de se avaliar as

decisões tomadas nas etapas anteriores, e um questionário que foi aplicado aos
usuários logo após eles utilizarem o protótipo.
4.4.1. Wireframes
Abaixo serão apresentadas as principais telas da primeira versão dos

wireframes que foi difundida e testada com os usuários:
61
4.4.1.1. Home
Figura 14: Tela de Home para iPhone e iPad
Fonte: O autor
62
A tela de Home (figura) é a principal da aplicação e permite o usuário acessar

todas as demais áreas da aplicação. Nesta tela ele pode identificar e acessar a última
edição disponível, pode acessar as edições anteriores, pode acessar o menu, pode
visualizar e acessar as matérias de destaque da edição atual. No iPad, por haver mais
espaço, foi possível resolver todos requisitos em apenas um dobra, já no iPhone foi
necessário utilizar o recurso de scroll para que o usuário acesse as demais partes da
tela.
4.4.1.2. Menu geral
Figura 15: Tela Menu geral (iPhone/iPad)
Fonte: O autor
63
Na tela de Menu (figura) o usuário pode acessar as configurações da aplicação,

assim como as informações referentes a assinatura e também áreas para enviar
feedbacks aos desenvolvedores do app.
4.4.1.3. Capa + Sumário
Figura 16: Tela de Capa + Sumário (iPhone/iPad)
Fonte: O autor.
64
A figura acima apresenta ao usuário a tela em que ele terá um sumário da

revista de onde ele pode acessar todas as áreas da publicação.
Figura 17: Tela da Matéria (iPhone/iPad)

Fonte: O autor
65
4.4.1.4. Matéria
Nas telas das matérias o usuário pode acessar o menu de navegação entre as
matérias da revista, assim como ajustar o tamanho da fonte, o brilho da tela, adicionar
a matéria à tela de matérias favoritas e, também, acessar o menu da aplicação.
4.4.1.5. Menu Sumário (Cards e Thumbnail)
Figura 18: Tela Menu Sumário - Card (iPhone/iPad)
Fonte: O autor
66
Figura 19: Tela do Menu Sumário - Thumbnails da revista (iPhone/iPad)
Fonte: O autor
Na figura acima é apresentada a tela de menu da revista. Nesta tela o usuário

é capaz de navegar entre as seções da revista e entre as matérias de cada seção. Ele
também pode alternar a forma de visualização desse menu entre o modo em card e o
modo thumbnail. A principal diferença, além do visual, está na maneira de
organização, enquanto o formato em cards agrupa as matérias em seções e as mostra
como um conjunto de cartas de baralho empilhadas, o formato em thumbnails distribui
todas as matérias pela tela, não fazendo o agrupamento em seções.
4.4.1.6. Matérias favoritas

67
Figura 20: Tela de Matérias Favoritas (iPhone/iPad)
Fonte: O autor
Na tela de matérias favoritas usuário acessa as matérias que ele anteriormente

assinalou como favoritas ao navegar pela revista, assim como pode desmarcá-las e
retirá-las dessa tela.
4.4.1.7. Edições anteriores

68
Figura 21: Tela de Matérias Favoritas (iPhone/iPad)
Fonte: O autor
Na figura acima é apresentada a tela em que os usuários podem visualizar e

acessar as edições anteriores da revista.
4.4.2. Avaliação do wireframe (esqueleto)

69
Com o intuito de validar os caminhos adotados no plano do esqueleto da

aplicação, foi desenvolvido um protótipo rápido utilizando as telas dos wireframes e
as relações entre elas definidas no plano da estrutura. Solicitou-se aos participantes
que tentassem realizar algumas tarefas dentro do protótipo e, em seguida, que
respondessem a um formulário com questões que avaliavam o nível de conhecimento
dos participantes em relação a publicações digitais e outras questões relacionadas às
tarefas solicitadas.
4.4.2.1. Cenário e tarefas
O protótipo foi elaborado em uma plataforma especializada para a função

chamada Invision (http://invision.com) e aplicado aos avaliadores de modo remoto.
Solicitou-se que tentassem a) Identificar e avaliar os elementos da Home; b) Encontrar
e navegar entre edições da revista; c) Encontrar e a navegar entre as diferentes
matérias de uma edição e, por fim; d) Acessar as matérias marcadas como favoritas.
4.4.2.2. Perguntas e resultados do formulário
Na impossibilidade de gravar a tela do participante ou ainda observar o uso do

protótipo in loco, solicitou-se que após navegarem pelo protótipo os avaliadores que
respondessem à perguntas abertas e fechadas com o intuito de tentar compreender o
entendimento dos usuário em relação a facilidade de uso e a navegação pela
aplicação. Os resultados das perguntas são expostos abaixo:
Primeira parte relacionada ao perfil do participante.
a. Qual sua Idade?

70
b. Com que frequência você costuma ler revistas digitais?
c. Caso você já tenha lido, que tipo de dispositivo você utilizou?
d. Como você classificaria essa sua última experiência de leitura digital?

71
e. O que você destacaria positivamente na sua última experiência?
Essa questão era aberta e a maioria das respostas avaliou como positivo os
itens relacionados a usabilidade, o conteúdo, a praticidade de se ter acesso a diversas
edições de uma maneira simples.
f. O que você destacaria negativamente na sua última experiência?
Nesta outra questão aberta os participantes avaliaram como negativo pontos

como a dificuldade de navegar em uma grande quantidade de conteúdo, o tamanho
das fontes utilizadas, a interrupção do conteúdo por banners, a dificuldade em marcar
o que já foi lido, o tamanho da tela e a necessidade de ampliar o arquivo para ler o
conteúdo.
Segunda parte relacionada ao uso do protótipo.
a. Como você avaliaria a ambientação e entendimento do HOME

72
b. O que tornaria o home melhor?
A maioria das respostas avaliou bem. As poucas respostas com considerações

mencionaram ajustes em relação organização dos conteúdos e a visualização já na
home das matérias favoritas.
c. Como você avaliaria acesso às edições da revista?
d. Qual ajuste tornaria o acesso às edições da revista mais fácil?
Neste item também foi bem avaliada, havendo somente uma consideração em
referência a navegação entre as edições.
e. Como você classificaria a navegação entre matérias de uma mesma edição?

73
f. Qual ajuste tornaria a navegação mais fácil?
Nesta etapa percebeu-se que os usuários tiveram maior dificuldade para

entender o funcionamento do menu da revista (sumário). Acredita-se que a dificuldade
em prototipar o funcionamento desse componente corroborou com o não
entendimento. Alguns pontos relatados pelos avaliadores foram a dificuldade em
voltar para home e a sugestão de adicionar ao final da matéria um caminho para a
matéria seguinte.
g. Como avaliaria o caminho para encontrar as matérias marcadas como

favoritas?
h. Qual ajuste tornaria o caminho para as matérias favoritas mais fácil?
A maioria dos avaliadores não teve dificuldade em acessar esta tela, um deles
não encontrou essa área e outro sugeriu que ela tivesse um maior destaque.
74
4.4.2.3. Iterações
De modo geral, os testes demonstraram que os wireframes estavam claros, as

funcionalidades foram bem desenvolvidas e a arquitetura e a usabilidade se
mostraram eficientes. No entanto, os testes também serviram para identificar algumas
oportunidades de melhoria e simplificação de algumas ações. Ajustou-se o acesso às
matérias favoritas, trazendo-o para a top bar da home e, assim, tornando-o mais
acessível. Outras modificações foram realizadas na navegação entre as matérias,
tornando mais fácil acessar e retornar ao sumário da revista. Decidiu-se por incluir um
tutorial no primeiro acesso do usuário a edição da revista, com a finalidade de instruir
algumas funcionalidades ativadas com comandos gestuais e, também, familiarizar o
usuário com a iconografia utilizada.
SUPERFÍCIE
Na etapa mais sensorial ou a etapa estética, como define o Projeto E, definimos

a identidade gráfico-visual do projeto, sendo tanto os elementos de interação do app
quanto os elementos gráficos e textuais da revista, além da identidade visual da
Revista UpRock (marca).
Nesta etapa serão aplicadas às telas as iterações realizadas em decorrência

dos resultados dos testes de usabilidade realizados na etapa anterior da metodologia.
4.5.1. Identidade da Marca
Como lembrado por Weeler (2008), o logotipo é o ponto de entrada da marca e

deve ser eficaz em seu intuito de comunicar, exprimir e manter coerência com o que
é a empresa ou o produto. No campo editorial os logotipos servem também para que,
quando na banca, o leitor possa rapidamente diferenciar uma publicação de outra.
75
Tendo o nome já definido, determinamos neste trabalho que seria desenvolvido

somente o logo e o padrão de cores que seriam utilizados. Os princípios que se
buscou atingir com o desenho do logotipo foram: a) uma identidade robusta, simples
e que funcione em diversos meios, como dispositivos com telas pequenas e em baixas
resoluções; b) desenvolver um logotipo que atraia os interessados em arte urbana; c)
a identidade deve expressar o ambiente e os elementos urbanos de forma fluída e
expressiva; d) fazer uma conexão entre atitude, rebeldia e estética, e por fim, e)
articular um pensamento acessível na abordagem da arte. Foram desenvolvidas três
alternativas iniciais para o logo.
Figura 22: Opções de logotipo
Fonte: O autor
Após a realização de testes de aplicação, verificou-se que a opção 02

apresentava uma melhor legibilidade em relação a diminuições e aplicações em
pequenos tamanhos. A marca 02, também, faz uma referência clara às letras do pixo
paulistano, sem perder, no entanto, sua leiturabilidade.
4.5.1.1. Cores
Enquanto os símbolos da cor podem diferir entre as culturas, muitos dos

significados da cor são reconhecidos em todo o mundo (Fraser & Banks, 2007). A
paleta de cores foi escolhida de forma que representasse a marca e o contexto ao
qual ela está inserida. De maneira geral, foram selecionadas cores que mantém
alguma associação ao meio das artes e intervenções urbanas. Os tons de preto, por
76
exemplo, derivam das cores mais utilizadas nas intervenções com spray, assim como
o vermelho está diretamente associado a sentimentos fortes e principalmente a
protestos. O amarelo e "branco" são cores escolhidas para contrastar com as demais,
sendo o amarelo como um contraste imediato ao vermelho e, consequentemente, o
branco ao preto. Na composição das matérias outras cores e poderão ser utilizados
dependendo sempre do conteúdo e do texto.
Figura 23: Paleta de cores
Fonte: O autor
4.5.1.2. Tipografia
Para escolher a tipografia analisamos famílias de tipos que tivessem alguma

ligação histórica com a atmosfera da rua e com o movimento hip hop (do qual o graffiti,
como conhecemos, deriva). Como fonte para texto escolhemos a Graphik, da
Commercial Type. Essa fonte, desenvolvida por Christian Schwartz, é inspirada nos
tipos do modernismo suíço, principalmente as utilizadas em cartazes de meados do
século XX. Além de uma família bastante flexível com versões condensed e compact,
a Graphik tem versões web que adaptam os tipos para os problemas causados pela
renderização da fonte na tela a partir dos pixels que a compõe, como o hint e o kern.
Para os títulos e demais conteúdos que mereçam destaque escolhemos a fonte

Druk, que é uma fonte sem serifas, condensada (em sua maior parte) e bastante
utilizada para títulos por ter uma grande variedade de pesos e facilitar a composição
em espaços pequenos. Esse tipo de fonte foi bastante utilizado em revistas dos anos
60 e largamente empregada em cartazes impressos com tipos feitos de madeira. Esse
77
tipo de tipografia também se faz presente várias capas de discos de jazz e blues dos
anos 60 e 70 e, assim com o jazz e o blues, foram consequentemente absorvidas no
hip hop e empregadas em diversas manifestações comunicacionais dessa cultura,
como por exemplo na marca do grupo RUN DMC e nos flyers de divulgação de festas.
Para as legendas, assinaturas e créditos de fotos foi utilizada a fonte Atlas Typewriter.
mostrar as definições de estilo utilizadas na revista
Figura 24: Verso da música Rapper's Delight composta em Graphik,

do seu peso mais leve ao mais pesado
Fonte: O autor
78
Figura 25: Verso da música Rapper's Delight composta

em Druk, do seu peso mais leve e condensado ao mais pesado wide.
Fonte: O autor
4.5.1.3. Capa
No meio impresso, em geral, as publicações respeitam formatos pré-definidos

pela indústria, de forma que tenham um melhor aproveitamento do papel. No meio
digital não há limitações técnicas quanto ao formato. No entanto, podemos considerar,
com um propósito estético, uma relação com o formato da tela dos dispositivos com
os quais trabalharemos. Sendo assim, definimos que seria mantido o formato
retangular já encontrado nos equivalentes impressos.
Para definirmos a escala e o formato final da capa, utilizamos o grid

desenvolvido por Karl Gerstner em 1962 para Revista Capital que consiste em um
bloco subdividido em 58x58 partes, que podem formar blocos de 1, 4, 9, 12, 25 e 36
unidades, sempre com 2 unidades de espaço entre elas. Dividiu-se um quadrado em
79
9 blocos e aplicou-se uma unidade do bloco acima do quadrado, formando um

retângulo 12 blocos, sendo 3x4 blocos. Em torno dos blocos foi adicionado uma
margem de 2 partes (Figura 26).
Por fim, definiu-se que o logo ocuparia o tamanho de 1 bloco e seria colocado
no primeiro bloco da parte superior. As informações de edição, mês e ano seriam
posicionados no terceiro bloco também da parte superior do layout, sempre alinhado
à direita. Definiu-se que sempre que possível as imagens da capa seriam
posicionadas com seu ponto focal no conjunto inferior de blocos, iniciada na segunda
linha de blocos, logo após o logotipo, de forma a se criar um respiro para a marca e
as informações de edição. Definiu-se também que as chamadas, quando houver,
serão estabelecidas na última linha de blocos, na parte inferior do layout.
Figura 26: Esquema sequencial de construção do formato da capa
Fonte: O autor
80
Figura 27: Grid de construção da capa da Revista UpRock
Fonte: O autor
81
Figura 28: Exemplos de aplicação do grid da capa da Revista UpRock
Fonte: O autor
4.5.2. Interface do usuário
Para a identidade visual da aplicação definiu-se que seria utilizado uma

linguagem mais próxima da aplicada nos aplicativos da Apple. Com exceção das telas
82
de tutoriais, definiu-se que não seriam utilizados elementos que fizessem referência
ao graffiti, a fim de manter os elementos navegacionais e interativos mais claros e sem
ruídos para que fossem mais facilmente identificáveis ao usuário.
4.5.2.1. Tipografia
Por já estarmos utilizando as fontes Graphik e Druk na composição da revista,

definimos que elas também seriam aplicadas na interface da aplicação. A Druk
utilizou-se para os títulos das páginas ou chamadas que se julgou necessário algum
destaque, para todos os demais usos, como para os títulos das matérias, aberturas
de seções, botões, links e etc, foi utilizado a Graphik.
4.5.2.2. Cores
As cores foram as mesmas utilizadas na definição da identidade visual da

revista. Definiu-se que o app seria apresentada com um fundo em preto (#010101)
para gerar um contraste marcante com as imagens e textos da interface e para que
refletissem a aura underground em que se situa a maior parte do conteúdo
apresentado nas edições da revista. Definiu-se que os textos seriam utilizados em
branco puro (#FFFFFF) e "branco" apresentado como flyer white (#F8E5CF), links
seriam apresentados em amarelo (#FFC800) e o vermelho (#FF2444) seria utilizado
em elementos selecionados e/ou marcados.
4.5.2.3. Iconografia
A iconografia utilizada no app foi desenvolvida pelo autor e foram inspirados

em formas e ícones já utilizados em outras aplicações para as mesmas funções. A
decisão de se utilizar apenas do contorno das formas, estilo conhecido como Outline,
também exerce ligação com o traço dos sprays.
83
Figura 29: Conjunto de ícones desenvolvidos para o app
Fonte: O autor
4.5.2.4. Grids
Ao iniciar-se a construção do aplicativo já se havia definido o uso do grid de

Karl Gerstner para a construção das páginas da área da revista propriamente dita. Ao
tentarmos aplicar o mesmo grid as demais páginas, verificou-se que a flexibilidade
demonstrada na construção de projetos editoriais desse grid não se aplicava no
desenvolvimento de interfaces. Decidiu-se, então, que seriam utilizados dois grids, um
para a revista – o de Gerstner – e outro para a interface do aplicativo. Definiu-se que
iriamos utilizar uma área útil de 320px para os smartphones com uma margem de
27px a esquerda e 28px a direita, e 672px para tablets, com margens laterais de 48px.
Ambas as áreas úteis são divididas em 16 colunas de mesma largura e sem
espaçamento entre elas.
4.5.3. Interface final
4.5.3.1. Splash screen

84
A tela de Splash screen é a tela que inicia aplicativo e se destina a demonstrar

ao usuário que a aplicação está iniciando e também para introduzir o usuário a
identidade visual do app.
Figura 30: Tela de Splash Screen
Fonte: O autor
4.5.3.2. Onboarding
Essa sequência de telas serve para introduzir o usuário ao ambiente da

aplicação e informá-lo sobre o que ele irá encontrar dentro do aplicativo, o que o
aplicativo poderá fazer por ele e quais as características mais importantes do
85
aplicativo. No primeiro slide do onboarding damos as boas vindas e explicamos quem

somos, no segundo o que oferecemos ao usuário e no terceiro explicamos como
entregamos nosso conteúdo.
Figura 31: Tela de Onboarding (iPhone)
Fonte: O autor
Figura 32: Tela de Onboarding (iPad)
Fonte: O autor
86
4.5.3.3. Home
A página da home é a principal do aplicativo, através o usuário tem acesso às

demais áreas da aplicação. Destacamos o acesso a última edição da revista,
evidenciado como o elemento de maior proeminência na interface, seguindo pela área
em que mostramos algumas das matérias presentes nesta edição com um botão para
o acesso ao sumário da revista. Logo abaixo o usuário pode encontrar as últimas
edições da publicação seguido de um botão para que ele tenha acesso a todas as
edições já publicadas. Na barra de navegação temos os botões de menu e de matérias
favoritas, à esquerda e à direita da tela, consequentemente.
87
Figura 33: Tela de Home (iPhone)
Fonte: O autor
88
Figura 34: Tela de Home (iPad)
Fonte: O autor
4.5.3.4. Tutoriais de uso e navegação dentro da revista
Os testes realizados com os usuários demonstraram que alguns participantes

não entenderam o funcionamento da navegação entre as matérias ou acharam a
curva de aprendizagem um pouco longa. Para tentar resolver este problema inserimos
estas telas explicando como se dão as interações gestuais e a função de cada ícone
presente na interface. A intenção é de que estas telas apareçam somente no primeiro
acesso do usuário ao aplicativo da revista.
89
Figura 35: Telas de tutorial de navegação entre matérias (iPhone)
Fonte: O autor
Figura 36: Telas de tutorial de navegação entre matérias (iPad)
Fonte: O autor
4.5.3.5. Matérias favoritas
Nesta tela o usuário tem acesso às matérias que ele marcou como favoritas.
90
Figura 37: Telas de Matérias Favoritas
Fonte: O autor
91
Figura 38: Tela Matérias Favoritas (iPad)
Fonte: O autor
4.5.3.6. Menu Geral

92
Esta é a tela em que os usuários têm acesso aos dados de sua assinatura, as
edições anteriores da revista, podem fornecer feedback sobre a aplicação ou solicitar
ajuda, assim como acessar as configurações do app como os modos de visualização
(dark ou light) e acessar maiores informações sobre o publicação.
Figura 39: Tela de Menu (iPhone/iPad)
Fonte: O autor
4.5.3.7. Edições anteriores
Nesta o usuário tem acesso à todas as edições já publicadas e disponíveis da

revista.
93
Figura 40: Tela Edições Anteriores (iPhone/iPad)
Fonte: O autor
94
4.5.3.8. Capa + Sumário
Nesta tela o usuário acessará o sumário da revista.
Figura 41: Tela de Capa + Sumário (iPhone/iPad)
Fonte: O autor
95
4.5.3.9. Matérias
Na tela das matérias o usuário pode ler a matéria e através das interações
gestuais (ao rolar a página para baixo) acessar o menu de navegação entre as
matérias, ou ainda acessar as configurações de ajuste da tela.
Figura 42: Tela das matérias. À esquerda, o elemento de ajustes de configuração da tela. À direita o menu
de navegação. Ao centro um exemplo de matéria com seus elementos e layout finalizados anteriormente.
(iPhone)
Fonte: O autor
96
Figura 43: Tela das matérias. À esquerda, o elemento de ajustes de configuração da tela e o menu de
navegação. À direita um exemplo de matéria com seus elementos e layout finalizados anteriormente.
(iPad)
Fonte: O autor
97
4.5.3.10. Menu sumário
Nesta tela o usuário pode navegar entre as seções da revista e entre as

matérias de cada seção, alternando a forma de visualização desse menu entre o modo
em card e o modo thumbnail.
Figura 44: Menu Sumário (iPhone)
Fonte: O autor
Figura 45: Menu sumário (iPad)
Fonte: O autor
98
5. CONCLUSÃO
Embora desde o anúncio da “morte” das mídias impressas e da sua

consequente substituição por canais digitais, as revistas impressas continuam e
possivelmente continuarão a habitar os meios midiáticos por muito tempo. No entanto
a previsão está em parte correta. Os números de diversas pesquisas mostram que a
quantidade de assinaturas vem caindo ano a ano o que demonstra que os desafios
mercadológicos e editoriais são tão grandes quantos os do ponto de vista do design.
A pergunta que surge ao desenvolver esse trabalho é: o quanto o design pode

contribuir para que o interesse do leitor se volte novamente para as revistas? Dentre
as múltiplas respostas que essa pergunta pode ter, acredita-se que o que o trabalho
demonstra é que, ao menos do ponto de vista teórico, as ferramentas já estão todas
disponíveis. Como se utilizar dessas ferramentas, seja combinando-as, subvertendo-
as ou as transformando, é que é o grande desafio do designer. Isso não significa,
porém, que há um número satisfatório de discussões a respeito dessa adaptação do
design editorial impresso para o design editorial digital, enquanto algumas áreas do
design (como o design de fontes, por exemplo) já ultrapassaram a barreira da
digitalização, o design editorial ainda tem este muro a frente para ser derrubado.
Ao longo do trabalho discutiu-se como as publicações se transformaram

durante o tempo e como as tecnologias influenciaram essas mudanças, assim como
o papel do designer em se adaptar às mutações do meio e prover soluções aos
problemas enfrentados naqueles momentos. Da mesma forma, as teorias
fundamentadas na relação entre o homem e o computador serviram de base para o
desenvolvimento metodológico utilizado no projeto. Os estudos que englobam os
conceitos básicos e fundamentais do design, por sua vez, não se deixam superar pela
simples mudança de suporte do tema, são tão importantes agora quanto já foram
algum dia. Um olhar mais atento percebe suas digitais muito bem marcadas na
concepção de Design Centrado no Usuário e de usabilidade, por exemplo.
Mesmo que não aparecendo explicitamente, todos assuntos apresentados no

trabalho são refletidos em maior ou menor grau no resultado final desse projeto. Por
isso acredita-se que dentre as diversas soluções e resultados possíveis para o tema,
99
este projeto encontrou o seu. Ele não apenas alcançou o objetivo proposto, como
também conseguiu encontrar soluções criativas e simples, apresentando uma
interface que enfatiza não só a usabilidade da aplicação como também torna a leitura
em dispositivos móveis algo mais divertido, atraente e relevante ao usuário de acordo
com o contexto apresentado.
Voltando ao objetivo deste projeto e comparando-o com o resultado produzido

e, ainda, analisando o cenário problemático de uma adaptação de algo profundamente
enraizado no meio do design gráfico impresso, é possível concluir que este projeto
obteve êxito em sua tentativa transpor ou adaptar uma publicação impressa para um
meio digital. As dificuldades, entretanto, não foram poucas. Dadas as limitações de
tempo e de mão de obra para a execução do trabalho, também verificou-se que é
exigido bastante criatividade, paciência e muitos testes para encontrar espaço no
layout ou decidir quais áreas de informação devem ser mantidas, adaptadas ou
retiradas durante o redesign. Encontrar o equilíbrio entre o que é realmente importante
e o que é indispensável ao leitor foi um caminho que se percorreu e que acredita-se
que é o ideal para este tipo de trabalho.
Vale ressaltar o imprescindível apoio sobre as metodologias de Garrett (2011),

das normas da ISO 9241-2011 e, por fim, da visão sobre Garrett do Projeto E. O uso
dessas ferramentas se mostrou simples de se colocar em prática, fornecendo valiosos
insights que puderam guiar as decisões que propiciaram o sucesso da aplicação neste
projeto.
Este trabalho, mais uma vez, demonstrou um dos caminhos possíveis para que,
do ponto de vista do design, se possa solucionar o problema do design editorial digital
e também o contribuir para a discussão acadêmica sobre papel do design como
facilitador em tempos de mudanças cada vez mais dinâmicas e radicais.
100
6. BIBLIOGRAFIA
ABNT, A. B. d. N. T., 2002. ABNT NBR ISO 9241-110 - Ergonomia da interação

humano-sistema. Parte 110: Princípios de diálogo, Rio de Janeiro: s.n.
Apple, 2010. Apple Launches iPad. [Online]

Available at: https://www.apple.com/newsroom/2010/01/27Apple-Launches-iPad/
[Acesso em 25 Setembro 2019].
Barbosa, S. D. J. & Silva, B. S. d., 2010. Interação Humano-Computador. Rio

de Janeiro: Elsevier Editora.
Bringhurst, R., 2005. Elementos do estilo tipográfico. São Paulo: Cosac Naify.
Cardoso, R., 2006. O design brasileiro antes do design: aspectos da história

gráfica, 1870-1960. São Paulo: Cosac Naify.
Cardoso, R., 2008. Uma introdução a história do design. São Paulo: Editora
Blucher.
Chico Homem de Melo, 2006. O design gráfico brasileiro: anos 60. São Paulo:
Cosac naify.
Corais, s.d. Recomendações de Usabilidade. [Online]

Available at: http://www.corais.org/node/489
[Acesso em 15 Outubro 2019].
Cybis, W., Betiol, A. H. & Faust, R., 2015. Ergonomia e Usabilidade - 3ª Edição
- Conhecimentos, Métodos e Aplicações. São Paulo: Novatec.
Dondis, D. A., 2008. Sintaxe da linguagem visual. São Paulo: Editora Blucher.
Droste, M., 2006. Bauhaus. Lisboa: Taschen.
Fetter, L. C., 2011. Revistas, design editorial e retórica tipográfica: a experiência

da revista Trip (1986–2010), Porto Alegre: UFRS.
Fraser, T. & Banks, A., 2007. O guia completo da cor. São Paulo: Senac.
101
Garrett, J. J., 2011. the elements of user experience: user-centered design for
the web and beyond. Berkeley(CA): New Riders.
Gombrich, E. H., s.d. Arte e Ilusão: um estudo da psicologia da representação

pictórica. São Paulo: Martins Fontes.
Gomes, J. F., 2003. Gestalt do objeto: sistema de leitura visual da forma. São
Paulo: Escrituras.
Haslam, A., 2007. O livro e o designer II. São Paulo: Rosari.
Hollis, R., 2005. Design gráfico: uma história concisa. São Paulo: Martins
Fontes.
Hurlburt, A., 2002. Layout: o design da página impressa. São Paulo: Nobel.
Ipanema, C. d., 2012. A primeira revista brasileira faz 200 anos: as variedades
ou ensaios de literatura, da bahia. Revista IHGB, Abril/Junho, Issue 455, pp. 251-266.
Kopp, R., 2004. Design gráfico cambiante. Santa Cruz do Sul: EDUNISC.
Lawdermilk, T., 2013. User centered design: A Developer's Guide to Building

User-Friendly Applications. Sebastopol: O'reilly.
Lupton, E., 2006. Pensar com tipos: guia para designer, escritores, editores e
estudantes. São Paulo: Cosac Naify.
Meggs, P. B., 2009. História do design gráfico. São Paulo: Cosac Naify.
Meurer, H. & Szabluk, D., 2010. Projeto E: aspectos metodológicos para o

desenvolvimento de projetos dígitos-virtuais. Ação ergonômica, Revista brasileira de
ergonomia , I(1).
Natansohn, L. G., Cunha , R., Barros, S. & Silva , T., 2010. Revistas online: do
papel às telinhas. Lumina, Junho, Vol. 4(Nº 1).
Nielsen, J. & Budiu, R., 2012. Mobile usability. San Francisco: New Riders.
Norman, D. A., 2006. O design do dia-a-dia. São Paulo: Rocco.
Rocha, H. V. d. & Calani, M. C., 2003. Design e Avaliação de Interfaces

Humano-Computador. Campinas: Unicamp.
102
Rogers, Y., Preece, J. & Sharp, H., 2002. Design de interação: além da
interação humano-computador. Porto Alegre: Bookman.
Saffer, D., 2006. Designing for interaction: creating smart applications and
clever devices. San Francisco: Peachpit Press.
Samara, T., 2007. Grid: Construção e desconstrução. São Paulo : Cosac Naify.
Santaella, L., 1992. A percepção. São Paulo: Experimento.
Shneiderman, B. & Plaisant, C., 2009. Desiging the user interface: Strategies
for effective human-computer interaction. Boston: Addison Wesley Longman.
Superinteressante, s.d. [Online]

Available at: https://super.abril.com.br/mundo-estranho/como-surgiram-as-revistas/
Wheeler, A., 2008. Design de identidade da marca. São Paulo: Bookman.
Wired, 2010. Wired Magazine’s iPad Edition Goes Live. [Online]

Available at: https://www.wired.com/2010/05/mag_editors_letter/

Design Editorial Digital Desenvolvimento Da Aplicação

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Design Editorial Digital Desenvolvimento Da Aplicação

Enviado por

Direitos autorais:

Formatos disponíveis

UNIVERSIDADE TECNOLÓGICA FEDERAL DO PARANÁ

MARCOS AELTON DE SOUZA

DESIGN EDITORIAL DIGITAL: DESENVOLVIMENTO DA APLICAÇÃO

DESIGN EDITORIAL DIGITAL: DESENVOLVIMENTO DA APLICAÇÃO

Proposta de Trabalho de Conclusão de

Orientador: Bolívar Teston de Escobar

TRABALHO DE DIPLOMAÇÃO NO 701

DESIGN EDITORIAL DIGITAL: PRODUÇÃO DA REVISTA DIGITAL

Marcos Aelton de Souza

Trabalho de Diplomação apresentado no dia 3 de dezembro de 2019 como requisito

“A Folha de Aprovação assinada encontra-se na Coordenação do Curso”.

Este trabalho pretende compreender como os dispositivos móveis podem

Palavras-chave: Dispositivos móveis. Tablets. Revistas. Design editorial.

Figura 1: Framework de Jesse James Garrett ............................................... 17

Figura 2: Framework do Projeto E .................................................................. 17

Figura 3: Projeto E. Definindo o posicionamento da linguagem gráfico-visual19

Figura 4: Exemplo de wireframe ..................................................................... 21

Figura 5: Exemplificação das leis da Gestalt .................................................. 34

Figura 6: Revistas Juxtapoz, Vista e Superinteressante ................................ 51

Figura 7: Sumários das revistas Juxtapoz, Vista e Superinteressante........... 52

Figura 8: Grid revista Juxtapoz ....................................................................... 53

Figura 9: Grid revista Vista ............................................................................. 54

Figura 10: Grid revista Superinteressante ...................................................... 55

Figura 11: Páginas internas da Juxtapoz, Superinteressante e Vista ............ 56

Figura 12: Arquitetura do aplicativo da Revista UpRock, versão 2.0 ............. 59

Figura 13: Tela de Home para iPhone e iPad ................................................ 61

Figura 14: Tela Menu geral (iPhone/ iPad) ..................................................... 62

Figura 15: Tela de Capa + Sumário (iPhone/ iPad) ........................................ 63

Figura 16: Tela da Matéria (iPhone/ iPad) ...................................................... 64

Figura 17: Tela Menu Sumário - Card (iPhone/ iPad) .................................... 65

Figura 19: Tela de Matérias Favoritas (iPhone/ iPad) .................................... 67

Figura 20: Tela de Matérias Favoritas (iPhone/ iPad) .................................... 68

Figura 22: Paleta de cores.............................................................................. 76

Figura 25: Esquema sequêncial de construção do formato da capa.............. 79

Figura 26: Grid de construção da capa da revista UpRock ............................ 80

Figura 27: Exemplos de aplicação do grid da capa da Revista UpRock ........ 81

Figura 28: Conjunto de ícones desenvolvidos para o app.............................. 83

Figura 29: Tela de Splash Screen .................................................................. 84

Figura 30: Tela de Onboarding (iPhone) ........................................................ 85

Figura 31: Tela de Onboarding (iPad) ............................................................ 85

Figura 32: Tela de Home (iPhone) ................................................................. 87

Figura 33: Tela de Home (iPad) ..................................................................... 88

Figura 34: Telas de tutorial de navegação entre matérias (iPhone) ............... 89

Figura 35: Telas de tutorial de navegação entre matérias (iPad) ................... 89

Figura 36: Telas de Matérias Favoritas .......................................................... 90

Figura 37: Tela Matérias Favoritas (iPad) ...................................................... 91

Figura 38: Tela de Menu (iPhone/ iPad) ......................................................... 92

Figura 39: Tela Edições Anteriores (iPhone/ iPad)......................................... 93

Figura 40: Tela de Capa + Sumário (iPhone/ iPad) ........................................ 94

Figura 41: Tela das matérias (iPhone) ........................................................... 95

Figura 42: Tela das matérias (iPad) ............................................................... 96

Figura 43: Menu Sumário (iPhone)................................................................. 97

Figura 44: Menu sumário (iPad) ..................................................................... 97

Gráfico 1: ...................................................................... Erro! Indicador não definido.

Gráfico 2: ...................................................................... Erro! Indicador não definido.

Gráfico 3: ...................................................................... Erro! Indicador não definido.

Gráfico 4: ...................................................................... Erro! Indicador não definido.

Gráfico 5: ...................................................................... Erro! Indicador não definido.

1.1. DELIMITAÇÃO DO PROBLEMA........................................................................ 13

1.2.1. Objetivos Específicos ...................................................................................... 15

1.3. MÉTODOS ......................................................................................................... 16

1.3.1. Estratégia ........................................................................................................ 18

1.3.2. Escopo ............................................................................................................ 19