Propriedades do design editorial digital

Prévia do material em texto

WBA1283_v1.0
Design editorial
Propriedades do design editorial 
digital
Planejamento de livros digitais
Bloco 1
Felipe Orsini Martinelli
Vamos refletir?
O meio digital trouxe várias 
possibilidades para o design editorial. 
A partir disso, como podemos planejar 
um livro digital?
Planejamento de livros digitais
• Conversão do livro impresso para o digital: cria uma 
sobrevida de um livro sem a necessidade de ser reimpresso 
(FLATSCHART, 2014); não basta apenas converter um 
arquivo, é necessário passar por ajustes e uma nova revisão 
do material.
• Criação do produto digital do zero: o livro é planejado para 
o meio digital desde o início, sendo fácil sua transição para 
diversos formatos de arquivo (FLATSCHART, 2014). Apesar 
disso, devem ser pensadas as especificações de cada 
plataforma digital (iBook, Kindle etc.).
Planejamento de livros digitais
• Fluxo híbrido ou sistêmico: o foco do projeto é no conteúdo, e 
não na plataforma, o que permite facilmente a adaptação a 
qualquer meio; trata-se de uma mudança mais cultural do que 
no âmbito tecnológico (FLATSCHART, 2014). 
Projeto
Digital 
(HTML/XML)
Impresso
(PDF)
Material 
impresso
eBook Web Aplicativo
Fonte: adaptado de Flatschart (2014).
Exemplo prático
Veremos a seguir alguns pontos para levarmos em 
consideração quando vamos exportar um arquivo para ePUB 
usando o InDesign.
Propriedades do design editorial 
digital
Uso de CMS para a criação de sites
Bloco 2
Felipe Orsini Martinelli
CMS
• Content Management System, ou Sistema de 
Gerenciamento de Conteúdo.
• São sistemas que servem para a criação e gerenciamento 
de sites de maneira fácil e rápida, sem a necessidade de 
criar páginas e atualizá-las na hospedagem.
• A maioria delas não exige conhecimento em HTML e CSS, 
mas é útil ter uma base.
• Muitos desses sistemas trabalham com uma interface 
WYSIWYG, isto é, What You See Is What You Get, ou “O que 
você vê é o que você obtém”. Assim, possuem interfaces 
extremamente intuitivas que funcionam com opções de 
“clicar e arrastar”.
WordPress
• CMS usado em 43,1% do sites na web (W3TECH, 2023).
• A maioria dos serviços de hospedagem possui um 
instalador automático do WP.
• Nasceu como um CMS para blogs, mas se estendeu 
abrangendo todo tipo de site, de portais até lojas on-line.
• wordpress.org: é o site que oferece o sistema para 
download, não possui hospedagem.
• wordpress.com: site de hospedagens que permite o uso do 
sistema, com planos gratuitos e pagos.
WordPress
Veremos como ajustar algumas configurações em um site feito 
em WordPress no wordpress.com.
Propriedades do design editorial 
digital
Acessibilidade em projetos digitais
Bloco 3
Felipe Orsini Martinelli
Acessibilidade
• Projetos de design como um todo devem estar preparados 
para trazer uma boa experiência a qualquer usuário, 
inclusive aqueles com deficiência visual, auditiva, motora 
ou cognitiva (PAZ, 2021).
• Em projetos que usam HTML (sites e ePUBs), é importante 
trabalhar com tags conforme o seu propósito específico e 
não tags genéricas. Isso facilita o uso de softwares leitores 
de tela. Por exemplo (Mozilla, 2023):
• <button>tocar vídeo</button>
• <article> <!-- Conteúdo do artigo aqui --> </article>
• <aside> <!-- Conteúdo secundário aqui --> </aside>
Acessibilidade
Recursos como a audiodescrição auxiliam nesse processo, 
permitindo que softwares leitores de tela “leiam” uma 
imagem para pessoas cegas ou com baixa visão.
Temos também o texto alternativo em HTML5, com o uso do 
alt=“text”.
Figura 1 - Foto de um cachorro com uma audiodescrição ao lado
Fonte: Pixabay (https://pixabay.com/photos/puppy-dog-pet-cute-brown-dog-1047521/)
Acessibilidade
Temos outras possibilidades também, como:
• Aumento do contraste entre texto e fundo.
• Ajuste de fontes tipográficas para melhorar a leitura.
• Inserção de legendas em vídeos e animações.
• Uso de sistemas de libras em conteúdo para web ou 
aplicativos.
• Transcrição em texto de conteúdos em áudio.
• Entre outras.
Exemplo de site para testar contraste
Veremos no site WebAIM uma ferramenta de verificar 
contraste entre cores, algo muito útil para criar produtos no 
meio digital, a Contrast Checker.
A
B
C
D
Quiz
Qual das opções a seguir traz uma implementação 
importante de acessibilidade para se criar um livro digital 
em ePUB?
Remover todas as imagens do livro e substituí-las por texto.
Inserir texto alternativo em todas as ilustrações e fotos.
Salvar os textos em layout fixo com cores imutáveis.
Utilizar tags genéricas para organizar o conteúdo do livro.
A
B
C
D
Quiz
Qual das opções a seguir traz uma implementação 
importante de acessibilidade para se criar um livro digital 
em ePUB?
Remover todas as imagens do livro e substituí-las por texto.
Inserir texto alternativo em todas as ilustrações e fotos.
Salvar os textos em layout fixo com cores imutáveis.
Utilizar tags genéricas para organizar o conteúdo do livro.
Quiz - Resolução
B. Inserir texto alternativo em todas as ilustrações e fotos.
O texto alternativo permite que os softwares de leitura de 
texto interpretem o que há na imagem, trazendo uma boa 
experiência a usuários cegos ou com baixa visão. Além 
disso, caso uma imagem não carregue no arquivo, o texto 
alternativo irá indicar o seu conteúdo.
Propriedades do design editorial 
digital
Teoria em Prática
Bloco 4
Felipe Orsini Martinelli
Reflita sobre a seguinte situação
• Estamos trabalhando em um estúdio de design digital, e 
recebemos uma proposta de criar a versão digital de um 
livro já existente no mercado. No entanto, tal versão será 
construída como um livro-aplicativo. A editora pediu para 
que criássemos interações dentro do produto, além de lidar 
com um layout responsivo para várias telas disponíveis no 
mercado.
• Liste pontos que você considera importantes que sejam 
feitos durante o processo de produção.
Norte para a resolução
É importante que levemos alguns pontos em consideração:
• Como o projeto não é apenas converter o arquivo do livro, 
devemos fazer uma revisão e verificar quais pontos podem 
ser trabalhados com as interações pedidas.
• É importante também pensarmos no layout de maneira 
responsiva. Ou seja, todo elemento terá pelo menos uma 
distribuição para celular, para tablet e para computador.
• Devemos verificar o uso de cores e fontes tipográficas para 
o meio digital.
• Precisamos testar várias vezes o produto, em diferentes 
telas e aparelhos, principalmente para verificarmos se as 
configurações de responsividade estão adequadas.
Norte para a resolução
Por se tratar de um livro-aplicativo, podemos adicionar 
elementos próprios para esse meio, como:
• Elementos gráficos com possibilidades de interação que 
resultem em animações e sons.
• Atividades gamificadas e mini jogos no decorrer da leitura.
• Audiodescrição, como um audiolivro.
• Inserção de elementos menos tradicionais, como mapas 
interativos.
• Entre outras opções.
Norte para a resolução
Por fim, é importante verificarmos todos os quesitos para sua 
implementação, como:
• Hardware para funcionamento.
• Softwares para seu desenvolvimento.
• Formatos para exportação.
• Entre outros.
Propriedades do design editorial 
digital
Dicas do(a) Professor(a)
Bloco 5
Felipe Orsini Martinelli
Prezado aluno, as indicações a seguir podem estar disponíveis 
em algum dos parceiros da nossa Biblioteca Virtual (faça o login 
por meio do seu AVA), e outras podem estar disponíveis em sites 
acadêmicos (como o SciELO), repositórios de instituições 
públicas, órgãos públicos, anais de eventos científicos ou 
periódicos científicos, todos acessíveis pela internet.
Isso não significa que o protagonismo da sua jornada de 
autodesenvolvimento deva mudar de foco. Reconhecemos que 
você é a autoridade máxima da sua própria vida e deve, 
portanto, assumir uma postura autônoma nos estudos e na 
construção da sua carreira profissional.
Por isso, nós o convidamos a explorar todas aspossibilidades da 
nossa Biblioteca Virtual e além! Sucesso!
Leitura Fundamental
Indicação de leitura 1
Este artigo discute uma metodologia para se criar livros 
digitais voltados ao público infantil, trazendo métodos da área 
de design de jogos e integrando-os ao processo de criação.
Referência:
TEIXEIRA, D. J.; MARITAN, B. B.; GONÇALVES, B. S. Um modelo de fluxo para design 
de livro digital infantil. In: Congreso de la Sociedad Iberoamericana de Gráfica 
Digital, 20., Blucher Design Proceedings, v. 3 n. 1. São Paulo: Blucher, 2016. 
Indicação de leitura 2
O artigo discute o uso de recursos multimídia em um projeto 
voltado a acessibilidade, assunto de grande importância ao 
campo do design editorial.
Referência:
CRENZEL, Silvina Ruth; ZANDOMENEGHICO, Ana Lucia Alexandre. Me anima um 
conto? Design, libras e o ensino de línguas orais a crianças surdas. In: ULBRICHT, V. 
R.; FADEL, L. M.; BATISTA, C. R. Design para acessibilidade e inclusão. São Paulo: 
Blucher, 2018.
Dica do(a) Professor(a)
Vídeo “Mike Matas: A próxima geração dos livros digitais”, do 
canal TED Talks.
Embora seja um vídeo antigo, é interessante vermos as 
possibilidades de interação que foram pensadas já para os 
primeiros projetos de livros digitais, como o que é mostrado 
no vídeo.
Referência:
TED. Mike Matas: A next-generation digital book. YouTube, 28 abr. 2011. 
CRENZEL, Silvina Ruth; ZANDOMENEGHICO, Ana Lucia Alexandre. Me anima um conto? Design, 
libras e o ensino de línguas orais a crianças surdas. In: ULBRICHT, V. R.; FADEL, L. M.; BATISTA, C. R. 
Design para acessibilidade e inclusão. São Paulo: Blucher, 2018.
FLATSCHART, Fábio. Livro Digital Etc. São Paulo: Brasport, 2014. Disponível em: 
https://plataforma.bvirtual.com.br/Acervo/Publicacao/160674 Acesso em: 30 maio 2023.
MOZILLA. HTML: Boas práticas em acessibilidade, 2023. Disponível em: 
https://developer.mozilla.org/pt-BR/docs/Learn/Accessibility/HTML Acesso em: 4 jun. 2023.
PAZ, Mônica. Webdesign. Curitiba: Intersaberes, 2021. Disponível em: 
https://plataforma.bvirtual.com.br/Acervo/Publicacao/187453 Acesso em: 3 jun. 2023.
TEIXEIRA, D. J.; MARITAN, B. B.; GONÇALVES, B. S. Um modelo de fluxo para design de livro digital 
infantil. In: Congreso de la Sociedad Iberoamericana de Gráfica Digital, 20., Blucher Design 
Proceedings, v. 3 n. 1. São Paulo: Blucher, 2016. Disponível em: 
https://www.proceedings.blucher.com.br/article-details/um-modelo-de-fluxo-para-design-de-livro-
digital-infantil-24775 Acesso em: 3 jun. 2023.
W3TECH. Usage statistics of content management systems, 2023. Disponível em:
https://w3techs.com/technologies/overview/content_management Acesso em: 3 jun. 2023.
TED. Mike Matas: A next-generation digital book. YouTube, 28 abr. 2011. Disponível em: 
https://www.youtube.com/watch?v=LV-RvzXGH2Y. Acesso em: 29 jun. 2023.
Referências
https://www.youtube.com/watch?v=LV-RvzXGH2Y
Bons estudos!
	Slide 1: Design editorial
	Slide 2: Propriedades do design editorial digital
	Slide 3: Vamos refletir?
	Slide 4: Planejamento de livros digitais
	Slide 5: Planejamento de livros digitais
	Slide 6: Exemplo prático
	Slide 7: Propriedades do design editorial digital
	Slide 8: CMS
	Slide 9: WordPress
	Slide 10: WordPress
	Slide 11: Propriedades do design editorial digital
	Slide 12: Acessibilidade
	Slide 13: Acessibilidade
	Slide 14: Acessibilidade
	Slide 15: Exemplo de site para testar contraste
	Slide 16: Quiz
	Slide 17: Quiz
	Slide 18: Quiz - Resolução
	Slide 19: Propriedades do design editorial digital
	Slide 20: Reflita sobre a seguinte situação
	Slide 21: Norte para a resolução
	Slide 22: Norte para a resolução
	Slide 23: Norte para a resolução
	Slide 24: Propriedades do design editorial digital
	Slide 25
	Slide 26: Indicação de leitura 1
	Slide 27: Indicação de leitura 2
	Slide 28: Dica do(a) Professor(a)
	Slide 29: Referências
	Slide 30: Bons estudos!