DESENVOLVIMENTO DE UMA REVISTA

DIGITAL
Jonathan Rafael Bernart ¹
Andressa Dierk ¹
Luan Castilho ¹
Maurcio Souza Rios ¹
Karolina de Oliveira Cubero ¹
Angélica Biagi Bertocco ²

1 INTRODUÇÃO

O avanço do mundo tecnológico trouxe uma infinidade de possibilidades e tendências no

mercado, uma delas é a criação de uma nova necessidade de consumo, um exemplo disso é que, o
que antes precisava ser algo físico e presencial, agora pode ser adquirido em alguma plataforma
online, os famosos produtos digitais. Os produtos digitais, ou infoprodutos, são qualquer ferramenta
ou plataforma que possibilita que seu usuário adquira conhecimento sobre algo de seu interesse,
como E-books, cursos online, revistas digitais, aplicativos, plataformas de streamings, vídeos e
quaisquer outros softwares do gênero. É cada vez mais comum que novos empreendedores busquem
começar seus negócios com vendas de materiais digitais, pois eles não necessitam de uma estrutura
física para armazenamento e nem de um plano logístico. O objetivo deste trabalho é a criação de
uma revista digital, cujo conteúdo informe o consumidor sobre filmes e séries do momento, para
isso foi utilizado a ferramenta Figma em sua estruturação, do qual sequenciou cada etapa do
projeto.
Palavras-chave: Revista digital, produto digital, Figma

2 FUNDAMENTAÇÃO TEÓRICA

Atualmente com a crescente expansão e inovação das tecnologias digitais, o mercado sofre
um impacto para renovar e transformar seus modelos de negócio, esta inovação tecnológica
representa um grande desafio para unir a teoria com a prática e nos últimos anos surgiu uma
infinidade de pesquisas nesta área, mas algumas examinaram fenômenos específicos, como
antecedentes de adoção e métodos de design. (Kohli & Melville, 2017; Wiesböck & Hess, 2019).
Segundo Radfahrer (2003), a regra fundamental é o alinhamento para a elaboração de um
layout onde os elementos alinhados são visualmente mais estáveis e seguros. Desta forma o
wireframe foi escolhido como método de elaboração para o projeto, onde a interface digital é

1 Nome dos acadêmicos

2 Nome do Professor - Tutor Externo
Centro Universitário Leonardo da Vinci – UNIASSELVI - Design de Produto (FLC35307TDP) – Prática
do Módulo IV - 12/06/2024
 2

alinhada em grades ou malhas (grids) tendo por função ordenar as informações em uma interface
indicando o local de conteúdo e suas relações, construída pela divisão da área útil de uma interface
em linhas e colunas, porém pode seguir outras formas de segmentação do espaço.

O wireframe deve ser uma estrutura modular e flexível, podendo ser considerado como o
sistema mais elementar de organização, onde objetos visuais e verbais são agentes de
comunicação que estabelecem padrões complexos de informação. Neste plano organizam-
se os conceitos de linguagem visual, determinando-se pontos focais, margens, espaços,
divisões e os próprios limites da interface, facilitando sua legibilidade, seu reconhecimento
e a compreensão da mensagem (MOURA, 2003).

Em uma época em que o meio de comunicação que reinava era a TV e a internet ainda
estava no seu primórdio as pessoas procuravam nas bancas, revistas que pudessem trazer algumas
informações sobre diferentes tipos de assuntos. Eram os anos 80 e 90 também, no início dos anos
2000, era muito comum ir às bancas e comprar as famosas revistas de entretenimento ou conhecidas
como revistas de cultura pop, revistas essas que traziam informações semanais, quinzenais e
mensais sobre filmes e seriados de TV, porém com o passar dos anos e o “boom” da internet, esses
meios de comunicação se viram obrigados a evoluir para sobreviver. Começou com os jornais que
viram que a alta demanda de sites de notícias e páginas de redes sociais estavam ganhando alcance
e suas vendas estavam caindo. Também agências e estúdios que periodicamente entregavam ao seu
público revistas de entretenimento, viram uma oportunidade de iniciar as revistas em formato
digital.

Uma revista digital é uma publicação periódica formatada para leitura em tablets e outros
dispositivos móveis. Sua principal característica é a junção de elementos gráficos e
editoriais tradicionais da mídia impressa com recursos digitais, que uma revista seja
realmente digital, não basta fazer um PDF estático de uma revista impressa e inserir em um
tablet. É necessário que a revista tenha, efetivamente, uma linguagem digital, e que reaja
aos toques do leitor na tela do dispositivo de leitura (Horie & Pluvinage, 2013, p.9).

Para elaborar uma revista digital é necessário seguir alguns elementos importantes, como
capa, expediente, editoriais, textos, imagens e anúncio. A capa é o elemento principal da revista,
sendo o aspecto visual que irá atrair o público-alvo. No expediente contém a lista dos contribuintes,
indicando nome e função de cada um dos participantes da publicação da revista, os editoriais são
subdivisões de conteúdos associados ao tema principal e tem como função atender diferentes
públicos e guiá-los para o assunto de seu interesse, como por exemplo o leitor que gosta de filmes,
mas prefere o gênero de comédia. O anúncio é uma importante fonte de renda de uma revista,
dependendo da tiragem e posicionamento, por exemplo quanto maior for o tamanho do anúncio,
maior será o valor pago pelo anunciante.

Obviamente um dos elementos mais importantes de uma revista é a capa, ela é a

responsável por chamar a atenção dos leitores e indicar as principais matérias e assuntos
que serão tratados a cada edição. Em geral elas são compostas pelo logotipo da publicação,
uma foto principal (um dos elementos mais importantes, inclusive), uma chamada principal
e outras chamadas ou imagens de capa. (BERNARDI, 2022).
 3

Desenvolveu-se este produto a partir da análise das oportunidades que surgem do interesse
do público-alvo ao qual deseja se alcançar, neste caso o público será o mesmo que assinam
plataformas de streaming, segundo pesquisa de Toledo (2023), 66% dos brasileiros com smartphone
assinam serviços de streaming e este hábito ocorre mais comumente na faixa etária de 16 a 29 anos.
Tornou-se ainda mais atrativa a ideia de divulgar uma revista com conteúdo relevante sobre os
principais streamings do momento, pois de acordo com a pesquisa da Kantar (2021), desde os
períodos de isolamento devido a COVID-19 houve um aumento de 58% de visualizações de TV e
streaming pagos. A pesquisa também revelou que mais 204 milhões de brasileiros assistiram
televisão em 2020 em um tempo 37 minutos maior do que em 2019.
Tendo em vista que é necessário engajar o público para o consumo e divulgação da revista
será utilizada as avaliações online de forma que o consumidor possa interagir com o conteúdo. “As
avaliações online (reviews) possibilitam que todos os consumidores compartilhem suas
experiências, sejam positivas ou negativas. É uma forma de publicidade totalmente grátis, feita
pelos clientes sem cobrar nada por isso.” explica Edo (2017), CEO e Fundador da Reviwer, startup
catarinense especializada em gestão de reviews e reputação online.

3 MATERIAS E MÉTODOS

Após o entendimento de que as revistas digitais são um meio que nos leva ao passado ao
mesmo tempo que nos conecta ao presente com a modernidade e facilidade da era digital. Entende-
se que uma revista é um meio de comunicação que transpassa por décadas e gerações. Portanto, foi
dada a devida importância para impactar o nosso público-alvo com informações relevantes sobres o
mundo cinéfilo. A seguir será explicada cada etapa utilizada na elaboração da revista digital,
incluindo ferramentas e processo criativo. Sendo assim, com base no tema proposto desenvolveu-se
o conceito de um produto digital.

3.1 Software

Diversos softwares estão disponíveis no mercado para a elaboração do design de revista,

mais conhecido como design editorial. Um deles é o Indesign, uma ferramenta da Adobe específica
para design editorial, embora possa se utilizar qualquer ferramenta como dito dado ao conhecimento
nela pelo designer que está trabalhando, assim, então se o conhecimento nela for o suficiente e que
possa se sentir mais seguro em utilizá-la seguindo algumas estruturas.
Pensando nisso e na variedade de plugins que é oferecido além de ser um software grátis, o
designer seguiu com a utilização do Figma (ver imagem 1). O Figma é um concorrente direto da
Adobe. Ele começou sendo uma opção ao Adobe Xd e ao Sketch (este último utilizado apenas em
 4

sistemas da Apple.) Esses são os apps mais utilizados para criação de telas e design de aplicativos e
sites, porém, o Figma foi além, e está em constantes atualizações lançadas em 2016 hoje se tornou
um software editor gráfico de vetor, prototipagem, motion e atualmente está atualizando para
desenvolvedores e programadores, está disponível para Mac, Linux e Windows, rivalizando com
Photoshop, Ilustrator. Dada a liberdade que este software traz e todas as ferramentas disponíveis
nele, além de ser simples, decidi que seria com o Figma que faríamos o design editorial da revista
Pipocando. A imagem abaixo mostra a simplicidade da tela do Figma, um layout bem mais limpo e
encorajador para quem nunca mexeu em um software de edição gráfica.

Figura 1 - Imagem da tela do Figma

Fonte: Autor.

3.2 Referências

A busca por algo inovador pode ser desafiante quando você está na linha de frente na fase de
criação, você já deve ter se perguntado, por exemplo: “de onde essa pessoa tirou isso?” ou “como
criaram isso?” sempre que ficamos maravilhados com qualquer novidade, nos indagamos a tentar
entender como isso é feito. Bem, estamos em 2024 e sempre que me sento para criar algo parece
que me lembra algo já feito. O que um bom artista entende é que nada vem do nada, todo trabalho
criativo é construído sobre o que veio antes. Nada é totalmente original. (Kleon, 2012, p.15).
Seguindo esse contexto, uma etapa que por vezes não é lembrada é a etapa de referências. Onde
busco diversos concorrentes de nicho (nicho é a forma de dizer seguimento do produto, ou seja,
onde está segmentado o nosso produto, que no caso é de revistas sobre cinema) ou não. Ou seja,
podemos buscar referências de revistas sobre filmes ou sobre carros, moda e ficção científica. O que
vale nessa etapa é um pouco mais daquilo que falei em metodologia, entender como se comunicar e
 5

roubar aquilo que eles têm de melhor e tentar criar algo melhor. Por sorte, eu cresci lendo revistas
de animes e filmes então resgatei uma revista que tinha guardado chamada de “Heróis do Futuro”
veja na imagem abaixo, também foi utilizado a melhor ferramenta que temos hoje em dia, o google
foi uma ferramenta indispensável, através dela consegui encontrar diversos sites sobre o tema,
incluindo sites que fazem a venda apenas de revistas como a https://www.europanet.com.br/ e a
mais famosa https://forbes.com.br/revista/ .

Figura 2 - Revista Heróis do Futuro

Fonte: Editora Press, Heróis do Futuro. 1990.

3.3 Wireframe

Independente do produto digital escolhido existe uma etapa importante para a elaboração do
produto. Essa etapa se chama wireframe, e aqui é onde algumas pessoas se confundem, pois
também é conhecido como rabiscoframe, esboço ou escopo. Porém, o mais importante é entender
que existem três tipos de wireframes. Existem wireframes de baixa fidelidade, wireframes de média
e wireframes de alta fidelidade. A figura abaixo nos mostra exatamente como são os wireframes de
Baixa, Média e Alta fidelidade:

Figura 3 - Tipos de Wireframes

 6

Fonte: Gema Guitiérrez Medina, Qué son los wireframes y qué tipos existen. Medium, 2020. Disponível em:
(https://medium.com/pildorasux/tipos-de-wireframes-5705d9a27557). Acesso em 28 de maio de 2024.

Alguns designers podem preferir mesclar entre média e alta fidelidade já deixando o projeto
basicamente estruturado. Seguindo este pensamento, também aplicamos no nosso projeto a mesma
linha de raciocínio, e acredito que isso ajuda a ganhar tempo com o wireframe entre média e alta
fidelidade, onde já posso estar encaixando os textos e área de imagens, assim ter um panorama mais
detalhado de como vai ficar o design editorial final do produto. Vale ressaltar que embora a etapa de
wireframe mostre uma forma estruturada de layout inicial ao final do produto. Não significa que
não possa haver alterações no trabalho, o que várias vezes pode fazer com que o produto final não
se pareça 100% como a montagem inicial do wireframe. Um exemplo disso é a figura 3 que retrata
o wireframe de baixa a média fidelidade (digo baixa a média fidelidade, porque você pode notar
que, as no espaço de imagens está apenas uma figura que representa montanha e um sol, geralmente
utilizado para indicar que ali deverá ser posta uma figura, isso é muito usado em baixa fidelidade e
média fidelidade pois utilizei de textos, mesmo com lorem ipsum que são textos fictícios é possível
entender que ali está os textos da revista. Em baixa fidelidade, normalmente seriam linhas finas e
largas na mesma cor que as caixas cinzas onde ficam as fotos.) para com a imagem da figura 4 que
é a página final.
Figura 4 - Wireframe do projeto,extraído do Figma
 7

Fonte: Autor.

Figura 5 - Página com design finalizado

Fonte: Autor.

3.4 Estrutura

A estrutura deve seguir algumas regras e padrões de revistas, mesmo quando falei para qual
tipo de público, sendo ele de infantil, jovem, adulto, terceira idade e isso tem muito a ver com a
forma comunicativa seja ela formal ou informal, assim como já comentei antes. Pois isso interfere
nas margens e espaçamento entre linhas, espaçamento entre textos, espaçamento entre fotos,
tamanho de fontes e tamanho de ícones, títulos e grids. Em tudo deve se ocorrer uma estrutura que
deve se repetir em todas as páginas o mais igual possível. Lembrando que esta revista toma um tom
 8

informal e busca o público jovem-adulto e que o encaixe de imagens não deve interferir nos itens já
explicados acima. Porém ainda sim cabe-se o perfeito encaixe entre texto e imagens para melhor
compreensão do leitor e melhor layout de páginas, para que tudo possa estar limpo e bem-
organizado. Apenas para salientar a revista foi planejada em medidas de uma folha A5 que no
Figma vem configurada em pixels a 72 DPI sendo 420x595. A escolha para essa configuração é
básica, pois “A menor resolução de captura digital é a 72 DPI, ou seja, ela possui 72 pontos (pixels)
por polegada (DPI). Quando as imagens são para Internet, 72 DPI é o mais indicado" (PORTAL
INSIGHTS, [s.d.])”.

3.4.1 Margens e grids

As margens são muito utilizadas não só em revistas como em artigos, sempre devemos
utilizá-las seja em regras para trabalhos acadêmicos como no nosso caso para a impressão. Sabemos
que estamos realizando uma revista digital, que nada mais é uma revista não física, porém nos
moldes de uma revista impressa, por isso não há como esquecer das margens, pois ela nos lembra
do espaço que podemos utilizar para trazer o conteúdo da revista e, nos ajuda a dar um toque de
estilo e beleza a revista, tornando o texto justificado, agradável e de fácil leitura. Para isso utilizo a
opção de grids que o Figma traz, e acho isso tão excelente que é com as réguas se torna um
conjunto de ferramentas poderosas. Abaixo temos duas combinações de grids que utilizei. Columns
que significa colunas são grids verticais de cima para baixo, nesse caso utilizei duas colunas (Count
de quantidade) de propósito que explicarei no tópico “espaçamento de texto e imagem”. Note ainda
que existe uma margem de 20px (pixels) dado a borda da página, isso ajuda e muito caso nossa
revista fosse impressa. Também há uma opção chamada “Gutter” essa palavra não tem uma
tradução literal, mas podemos entendê-la como um espaço entre uma coluna e outra que nesse caso
ficou com espaço de 12px. A segunda combinação “Rows” que também se trata de colunas, porém
colunas horizontais. Aqui só me interessava saber as margens que eu daria no topo e no inferior da
página que foi de 40px gutter (espaçamento) apenas 1 pois o software não me deu a opção de zero,
porém na Count, ou seja, quantidade de linhas foi de apenas. Isso mostra na figura 5 e 6 a figura 7
mostra como isso aparece no software de trabalho na página da revista em questão.
Figuras 6 e 7 - Painel de comando de grids
 9

Fonte: Autor

Figura 8 - Configuração de grids

Fonte:Autor

3.4.2 Espaçamento de texto e imagem

Como já mencionada algumas vezes, a importância do espaçamento de texto junto com a

forma em que encaixamos as imagens deve ser de extremo cuidado, pois isso pode implicar não só
em uma boa confusão ao leitor por parte da leitura como até um impacto nas vendas do produto
entre nome da marca e futuro dela no mercado. Por isso, devemos ressaltar que foi feito uma norma
para montagem do layout da revista. Como foi feito duas colunas verticais com gutter de 12px e
margem de 20px ficamos com um espaço de 183px para cada uma das colunas verticais. Então é
óbvio que esse espaço das colunas foi planejado para o conteúdo do texto ficar bem encaixado.
 10

Assim pude encaixar perfeitamente dois blocos de texto por página em uma folha A5. Foi colocado
como padrão um espaçamento de 14px da parte inferior da folha até a contagem de páginas. O
avaliador dado com estrelas para indicar a nota dos filmes sempre manteve justificado a uma das
colunas de bloco de texto. O espaçamento entre linhas do texto é automático dado pelo Figma,
poderia ter sido alterado, mas não optamos por alterar já que a configuração automática do Figma
vem por padrão internacional e a alteração poderia causar alguns infortúnios na elaboração do
layout. A fonte utilizada foi a Arial tamanho 12 para as matérias e 10 também Arial para especificar
onde o filme está disponível. Além do tamanho 8 para alguns banners e propagandas de possíveis
patrocinadores da revista, no caso aqui foram fictícios. por último as imagens, elas fogem um pouco
do padrão já que complementam o layout junto com o texto. Elas variam de tamanhos e formatos,
mas sempre foram planejadas de forma que se alinhem ao texto e tragam um bom layout à página.
Figura 9 - Layout de página, espaçamento entre textos e fotos

Fonte: Autor.
3.5 Fliphtml5

Por fim chegamos ao fliphtml5 que basicamente nos dará a magia. Era muito utilizado nos
primórdios da internet a utilização de Javascript ou html5 e alguns códigos onde programadores
conseguiriam fazer o efeito de revista nas telas digitais chamado de Flipbook. Mas com o avanço da
tecnologia e a utilização de IAs tornou-se possível fazer isso com apenas alguns cliques sem
nenhum código. Ou seja, basicamente exportamos cada página do Figma em PDF e fazemos o
Uploud para o site fliphtml5, claro existem muitos outros, mas o mais prático e fácil é este. Após o
carregamento do PDF no site você poderá reajustar as páginas na ordem correta casa alguma tenha
carregado errado e dar um start, então basta aguardar alguns segundos para a mágica acontecer e
hospedar a sua revista em algum endereço na internet para as pessoas baixarem. Veja na imagem
abaixo como é a dashboard do site.
 11

Figura 10 - Dashboard do site

Fonte: Autor

4 RESULTADO E DISCUSSÃO

Iniciou-se a escolha pelo tipo de infoproduto a partir da forma que seria apresentado o
conteúdo ao consumidor. Desta forma, escolheu-se divulgar o conteúdo através de uma revista
digital divulgada em um site sobre filmes e séries em alta em diversas plataformas de streaming
conhecidas no momento. A revista foi elaborada com layout e design voltados ao público jovem-
adulto, dividindo o conteúdo apresentado por gênero e uma sinopse atrativa sobre cada um, escrita
de forma informal. A inspiração utilizada para esboçar a revista veio do site Omelete, que aborda o
mesmo tema, e da revista impressa Heróis do Futuro.
Para escolher o nome da revista, foi realizado um benchmarking (processo de pesquisa entre
empresas do mesmo setor para analisar como seus produtos, processos e serviços estão
desempenhando em relação aos concorrentes) através do site do Google. Nos resultados das
pesquisas, foram encontrados nomes de revistas que remetem ao tema abordado. Alguns nomes
foram escalados ao final: Cine News, Top Cine, Pipoquei, Suco e Cinema, Refri e Cinema, Week
Movies, Geek Movies, Caneca Nerd e Animaniageek. Ao final, foi escolhido o nome “Pipoquei” e
posteriormente alterado para “Pipocando”.
No processo de elaboração do layout da revista, foi planejado a partir de um wireframe de
baixa para média fidelidade criado na ferramenta Figma. O layout consiste em dois blocos de texto
por página em uma folha A5, com espaçamentos de 14 pixels da parte inferior da folha até a
contagem de páginas. A logo de avaliação da revista foi criada para representar o nome escolhido,
sendo um balde de pipoca com óculos e estrelas para que o consumidor compartilhe a experiência.
A revista será publicada através do site https://fliphtml5.com/pt, uma plataforma online para
 12

publicação e criação de revistas, tendo como base de divulgação as revistas Forbes e Europanet que
divulgam suas edições online. O link para acesso a revista na plataforma é:
https://online.fliphtml5.com/qafhq/bkbc/

Figura 11 - Produto final

Fonte: Autor.

5 REFERÊNCIAS

BERNARDI, Davi. Conheça os elementos mais importantes de uma revista. Glifo, 13 abr. 2022.
Disponível em: https://revistaglifo.com.br/design-editorial/conheca-os-elementos-mais-importantes-
de-uma-revista/. Acesso em: 09 jun. 2024.
Consumo de vídeo bate recorde no Brasil. Kantar, 09 mar. 2021. Disponível em:
https://kantaribopemedia.com/conteudo/consumo-de-video-bate-recorde-no-brasil/ . Acesso em 25
maio 2024.
EDO, Santiago. Pesquisa aponta que 97% dos consumidores leem reviews online sobre empresas
antes da compra. ACATE, 14 jun. 2017. Disponível em:
https://www.acate.com.br/noticias/pesquisa-aponta-que-97-dos-consumidores-leem-reviews-online-
sobre-empresas-antes-da-compra/. Acesso em: 25 maio 2024.
HORIE, Ricardo Minoru; PLUVINAGE, Jean. Revistas Digitais para iPad e outros tablets –
Arte-finalização, Geração e Distribuição. São Paulo: Bytes & Types, 2012.
KLEON, Austin. Roube como um artista: 10 dicas sobre criatividade. São Paulo: Rocco, 2012.
KHOLI, Rajiv & MELVILLE, Nigel. Digital innovation: A review and synthesis, 17 abr. 2018.
Disponível em: https://onlinelibrary.wiley.com/doi/10.1111/isj.12193. Acesso em: 09 jun. 2024.
MEDINA, Gema Guitiérrez. Tipos de wireframes - Qué son los wireframes y qué tipos existen.
Medium, 8 nov. 2020. Disponível em: https://medium.com/pildorasux/tipos-de-wireframes-
 13

5705d9a27557. Acesso em: 28 maio 2024

MOURA, Monica Cristina. O Design de Hipermídia. Tese Doutorado não publicada em
Comunicação e Semiótica. Pontifícia Universidade Católica de São Paulo, São Paulo, 2003.
Quando usar 72 ou 300 DPI. PORTAL INSIGHTS. Disponível em:
https://www.portalinsights.com.br/perguntas-frequentes/quando-usar-72-ou-300-dpi#:~:text=Se
%20uma%20imagem%20tem%20poucos,DPI%20%C3%A9%20o%20mais%20indicado. Acesso
em: 05 maio 2024.
RADFAHRER, Luli. Design/Web/Design:2. São Paulo: Market Press, 2003.
Revista Heróis do Futuro. Editora Press, Heróis do Futuro, 1990.
TOLEDO, Mariana. 66% dos brasileiros com smartphone assinam serviços de streaming. Teletime,
22 dez. 2023. Disponível em: https://teletime.com.br/22/12/2023/66-dos-brasileiros-com-
smartphone-assinam-servicos-de-streamings/#:~:text=O%20h%C3%A1bito%20de%20assinar
%20plataformas,ou%20mais%2C%20com%2061%25. Acesso em: 11 jun. 2024
WIESBÖCK, Florian; HESS, Thomas. Digital innovations: Embedding in organizations.
SPRINGER LINK, 25 out. 2019. Disponível em: https://link.springer.com/article/10.1007/s12525-
019-00364-9. Acesso em: 09 jun. 2024