UNIDADE 4

Prévia do material em texto

INTRODUÇÃO
Diagramar é distribuir os diversos elementos que irão compor uma arte visual de maneira a facilitar a
compreensão das informações. Para diagramarmos um layout para mídia impressa, é importante compreender
como as características de cada mídia determinam a maneira com que as informações a serem veiculadas serão
organizadas, um dos objetivos dessa aula. Por isso, conheceremos as diferentes estruturas e peculiaridades dos
principais tipos de publicações.
Veremos que livros, apesar de sua grande tiragem, possuem uma estrutura mais “engessada”, com pouca
mudança ao longo do tempo, ao contrário dos cartazes, peças de enorme �exibilidade em seu
desenvolvimento.
Veremos também duas publicações, em que o volume e a periodicidade são aspectos determinantes, possuindo
estrutura um pouco mais �exíveis que a dos livros: revistas e jornais. Por último, compreenderemos o
desenvolvimento de publicações muito direcionadas a um determinado objetivo, como folders e cartões.
BLOCO 1
Para entendermos como é formado um livro, é fundamental compreender o que é a “lâmina” da publicação:
lâmina é uma forma de especi�cação de composição em um produto grá�co, geralmente baseado na
especi�cação de 1 folha com 4 layouts. Para você entender isso melhor, antes da etapa de encadernação de um
livro, sua lâmina impressa possuirá 4 das suas páginas, duas em sua frente e outras duas em seu verso, como
pode ser visto na Figura 1 a seguir.
Figura 1 | Lâmina de um livro.
Uma vez que a lâmina de um livro sempre possuirá 4 páginas, concluímos que todo livro será composto de um
número de páginas múltiplo de 4. Notamos também na imagem anterior que isso ocorre com livretos, mesmo
que haja apenas uma única lâmina. Nesse caso, a capa e a 4ª capa serão formadas pela primeira e pela última
página do livreto.
Composição de um livro
A Figura 2 demonstra a estrutura e as diferentes partes formadoras de um livro. Entenda também suas funções,
descritas a seguir.
Figura 2 | Partes de um livro.
Aula 1
DIAGRAMAÇÃO PARA MÍDIAS IMPRESSAS
Diagramar é distribuir os diversos elementos que irão compor uma arte visual de maneira a
facilitar a compreensão das informações. Para diagramarmos um layout para mídia impressa, é
importante compreender como as características de cada mídia determinam a maneira com que
as informações a serem veiculadas serão organizadas, um dos objetivos dessa aula. Por isso,
conheceremos as diferentes estruturas e peculiaridades dos principais tipos de publicações.
20 minutos
Lâmina da capa
Essas partes são formadas por uma única lâmina, de material mais resistente que o miolo, que têm a função de
proteger a obra, assim como são a principal área de publicidade da publicação. Nessa região temos
necessariamente o nome do autor e o título da obra.
Para Rubens Lima, designer especializado nesse tipo de publicação, a hierarquia entre o nome do autor e o
título é determinada pela importância do autor. Quanto maior sua relevância, maior destaque terá seu nome
(LIMA, [s. d]).
Rubens Lima ainda sugere que o título seja curto e provocativo, para que seja memorável, porém com
característica editorial, explicativa e informativa.
Figura 3 | Lâmina da capa de um livro.
O subtítulo dá subsídio para uma melhor compreensão do título, permitindo o título ser menor e mais
misterioso. Já a chamada é opcional, mas ao contrário do subtítulo, pode ser apenas comercial.
As orelhas, tanto a da capa quanto da 4ª capa são opcionais, mas a designer Priscylla Nunes, do portal
PSNDesign, salienta que essa seção permite um resumo da obra ou comentários de pessoas ou instituições
sobre ela. Muitas pessoas antes de comprar um livro leem a orelha (NUNES, 2020).
A altura da lombada é de�nida pelo volume do miolo e deve conter o título, o autor e a indicação da editora que
o publicou.
Já a 4ª capa, erroneamente conhecida como “contracapa”, é um espaço que pode ser usado para uma descrição
comercial do livro. Nessa região também deve �car o número do ISBN (padrão utilizado para catalogar
publicações) e o código de barras.
A página de rosto, a página de frontispício, a �cha técnica e o sumário compõem o início do livro, sendo que o
miolo é o conteúdo da obra. O �nal é composto pelo apêndice e cólofon, que contém as informações técnicas
de produção.
Concluindo, é importante para você, futuro designer, ter em mente que antes de iniciar a elaboração de um
projeto de um livro, o contato com a editora é fundamental, pois além de saber com ela sobre os detalhes
técnicos da capa, há outras informações a conhecer, como o formato (dimensões) e o tipo de papel e
impressão, que são fundamentais para o sucesso do trabalho.
VIDEOAULA: BLOCO 1
Neste vídeo, vamos utilizar três livros distintos para ver na prática como o designer trabalhou as questões de:
Capa e 4ª capa.
E dos demais elementos das obras como:
• Lombada do livro.
• Orelha do livro.
• Página de rosto.
• Página de frontispício e �cha técnica.
• Sumário.
• Prólogo ou Prefácio.
• Fólio.
• Apêndice.
• Cólofon.
Fecharemos com um resumo das possibilidades.
BLOCO 2
Acta Diurna é o nome dado ao primeiro “jornal” da história, composto por placas com comunicados do
imperador Júlio César a�xadas em locais públicos, que informavam sobre os acontecimentos sociais, políticos e
eventos na Roma antiga (69 a.C.), sendo a “essência” do jornal atual. Somente após a invenção da imprensa em
1440, por Johannes Gutemberg, o jornal adquire a forma que conhecemos atualmente.
As grandes tiragens dos jornais e revistas atuais demandam a gestão do �uxo de informações, como pode ser
observado na imagem a seguir (Figura 4).
Figura 4 | Fluxo de trabalho em jornais e revistas.
De maneira resumida, o brie�ng é a coleta de informações fornecidas pelo cliente. No projeto grá�co é
realizado o ajuste entre o editorial e a identidade visual do cliente. Nessa etapa, é de�nida a comunicação visual
da publicação, estabelecendo layout, cabeçalho, rodapé, elementos visuais, palheta de cores, tipologia, formato,
espaço publicitário, etc.
Template
Template é um modelo criado após a aprovação do projeto grá�co, que servirá de base para a confecção das
publicações. O template da imagem a seguir (Figura 5) é feito no programa de editoração eletrônica Adobe
InDesign®. Podemos notar os elementos que servem de base para as futuras diagramações.
Figura 5 | Exemplo de template no InDesign®
Vídeoaula: Diagramação de livros
Para visualizar o objeto, acesse seu material digital.
Cronograma
O cronograma de cada edição é de�nido de acordo com a periodicidade da publicação e da necessidade de sua
distribuição. A parte propriamente dita da diagramação começa na recepção do espelho, que de�ne a ordem
das seções e matérias e a especi�cação de quais serão as páginas destinadas para o editorial e a publicidade,
como é demonstrado na Figura 6.
Todo o recebimento dos arquivos, como textos, imagens e publicidades, é fundamental para que o diagramador
comece a trabalhar. Cabe um destaque: deve-se sempre avaliar os arquivos a serem trabalhados, em especial
com relação à qualidade e compatibilidade dos arquivos. O padrão de cores das imagens recebidas deve ser
CMYK, já que a conversão de RGB para o formato de impressão gera alterações cromáticas.
Figura 6 | Espelho de uma publicação com 16 páginas.
Esse processo é muito similar tanto em revistas como em jornais, sendo que as principais diferenças entre eles
estão no formato, na periodicidade e no tipo de suporte (papel). Esse último em especial determina a resolução
das imagens que poderão ser utilizadas. Entender esses processos é importante para uma grande área do
design grá�co, que oferece muitas possibilidades.
VIDEOAULA: BLOCO 2
Neste vídeo, vamos conversar um pouco sobre o processo de impressão. Entenderemos inicialmente as
diferenças entre os processos de impressão a jato de tinta e a laser. Conversaremos sobre as características de
plotters e impressoras. Passaremos para a compreensão do PostScript e qualé sua �nalidade e �nalizaremos
com a impressão de fotolitos.
BLOCO 3
Cartazes, pan�etos, �yers ou folders são peças de design grá�co fundamentais para a divulgação de
informações. Uma característica marcante desses meios de comunicação é o espaço limitado, já que são
compostos em geral de uma única página. Assim, as informações a serem transmitidas devem ser sintetizadas e
Vídeoaula: Jornais e revistas
Para visualizar o objeto, acesse seu material digital.
atrair atenção de maneira muito rápida. Para isso, algumas estratégias devem ser utilizadas, como:
Ser interessante e bem construído para chamar a atenção.
Ser simples, com mensagem clara, breve e precisa para ser entendido rapidamente.
Ser ilustrativo e autoexplicativo, dando preferência a símbolos que sejam facilmente identi�cados.
Utilizar poucas palavras, signi�cativas e adequadas ao público-alvo.
A tipogra�a deve ser legível, devendo evitar mais do que três tipos de fontes.
As cores devem dar suporte à ideia a ser transmitida e não concorrer visualmente com a mensagem.
No site História do Cartaz, encontramos algumas sugestões interessantes para a construção dessa peça,
listadas a seguir:
O tema, único por peça.
O slogan, devendo ser curto e sugestivo.
A imagem, elemento fundamental da mensagem, com cores sugestivas e bem conjugadas.
Ainda segundo a publicação, na confecção do cartaz recomenda-se prestar atenção:
Na divisão do espaço, o ideal é separar três regiões destinadas aos elementos essenciais (slogan, imagem e
texto).
Cabe destacar que o objetivo é o equilíbrio com o dinâmico ou estático, conforme o objetivo da peça.
No caso do cartaz, a hierarquia da mensagem deve seguir a ordem slogan, título, texto ou legenda.
Os espaços vazios são fundamentais, uma vez que vão fazer sobressair a ilustração e a mensagem.
O espaço ocupado pelo texto deve ser menor do que o espaço ocupado pela imagem.
Essas sugestões podem ser observadas neste cartaz de uma série feita em 1890 por Jules Chéret (1936-1932),
um dos grandes pioneiros das artes grá�cas francesas.
Figura 7 | Cartaz de 1980 produzido por Jules Chéret
Fonte: Heitlinger (2007).
Para os pan�etos, muitas das estratégias descritas anteriormente são válidas. Mas há sempre uma confusão
entre planfetos, �yers e folders. Julia Viana, jornalista do Blog da Print, explica a diferença entre eles. Segundo a
autora, ainda hoje os planfetos (Figura 8) são peças simples, impressas em grandes quantidades. Sua grande
vantagem é o custo baixo, rapidez de produção e divulgação em massa com pouca personalização.
Figura 8 | Exemplo de pan�eto.
https://historiadocartaz.weebly.com/index.html
Fonte: Freepik.
O �yer (Figura 9) é uma evolução dos pan�etos, porém mais re�nado. Apesar de impressos em grandes
quantidades, possuem uma preocupação estética maior e são impressos em papeis mais re�nados. Destinam-
se a públicos mais pontuais, como inaugurações de empreendimentos, ações de marcas de bebidas, entre
outros.
Figura 9 | Exemplo de pan�eto.
Fonte: Freepik.
O folder, do inglês fold (que signi�ca dobrar), é basicamente um pan�eto com dobras. Evidentemente é uma
peça mais re�nada que os anteriores, com maior investimento em design (VIANA, 2020).
Figura 10 | Exemplo de pan�eto.
Fonte: Freepik.
Esses conhecimentos de tipos e formatos grá�cos certamente farão a diferença para a sua produção futura, por
isso é tão importante conhecê-los.
VIDEOAULA: BLOCO 3
Neste vídeo, o assunto abordado será a confecção de um cartão de visitas. Conversaremos sobre os objetivos
desse elemento, sobre a tiragem, os materiais e os formatos. Finalizaremos abordando a nova tendência que
são as versões digitais dessas mídias e quais são suas características.
ESTUDO DE CASO
Você recebeu de um cliente a demanda de criação de elementos para a divulgação de uma cafeteria a ser
inaugurada, chamada “Bossa Nova Café”.
O público-alvo é formado por pessoas de idade em torno de 60 a 80 anos, moradores do bairro onde o
estabelecimento será implantado. Assim, a principal demanda para as peças de comunicação é buscar uma
grande identi�cação com esse público.
O ambiente em si tem estilo “retrô”, remetendo a elementos visuais dos anos 1960. Na �gura a seguir temos um
quadro com referências estilísticas para inspirar a criação do projeto.
Figura 11 | O estilo do Bossa Nova Café.
A partir desse contexto, elabore um texto com tamanho entre 10 e 20 linhas respondendo:
Qual o formato mais adequado do material de propaganda entre pan�eto, �yer e folder? Justi�que a sua
escolha.
1. O cliente sugeriu que os cardápios sejam em formato revista. Essa escolha seria adequada para a proposta do
Café? Justi�que sua resposta.
2. O cliente gostaria de incluir um cartão, que teria dupla função: cartão de visitas e cartão de �delidade. Esse
cartão poderia ser desenvolvido em formato digital ou formato tradicional, impresso. Na sua opinião, pensando
no público-alvo, qual seria o formato mais adequado? Justi�que a sua resposta.
RESOLUÇÃO DO ESTUDO DE CASO
Resolução:
1. O formato mais adequado ao material de propaganda é o �yer, por ser uma publicação mais so�sticada, de
impressão em papel e elaboração superiores. O pan�eto seria inadequado por sua qualidade inferior e o folder
seria muito complexo e mais caro.
2. O cardápio em formato de revista é adequado à proposta, já que pode ter seu tamanho adequado à consulta
pelo usuário em uma mesa, sem ocupar muito espaço.
3. O formato ideal para o cartão de visitas e �delidade nesse caso é o impresso. Pelo brie�ng do cliente, o
público-alvo é constituído por pessoas de uma faixa etária que pode apresentar alguma di�culdade nos meios
digitais e que normalmente está habituado com o formato de cartão de visitas tradicional, impresso em papel.
Videoaula: Cartazes e pan�etos
Para visualizar o objeto, acesse seu material digital.
Resolução do Estudo de Caso
Para visualizar o objeto, acesse seu material digital.
 Saiba mais
O vídeo: Os segredos da harmonia no design de páginas é uma compilação muito interessante sobre
design de páginas. Feito pelo designer grá�co carioca Walter Mattos com linguagem acessível e slides,
exempli�cando a explicação.
Aproveitem!
https://www.youtube.com/watch?v=eVf3BAnneJQ&t=13s
Figura 12 | Comunicação multiplataforma e inclusiva.
INTRODUÇÃO
As mídias digitais têm se tornado cada vez mais presentes na sociedade e a criação de conteú-do para esse
ambiente possui características próprias, seguindo orientações especí�cas que devem ser conhecidas e
consideradas – esse é o assunto principal que abordaremos nesta aula.
Você verá que algumas das soluções dadas aos meios impressos muitas vezes são replicadas, mas sempre
considerando as peculiaridades das diferentes mídias, como a possibilidade de usar elementos dinâmicos
(botões e links, por exemplo) e as variações das proporções dos suportes.
Veremos o que diferencia a diagramação de sites e portais, quais as melhores práticas para o desenvolvimento
de e-books e como deve ser a gestão da informação em dispositivos mó-veis, como o celular.
Dessa maneira, conheceremos as ferramentas necessárias para o desenvolvimento de mídias digitais de boa
qualidade, diferencial necessário para a atuação no mercado do Design Grá�co.
BLOCO 1
Devemos lembrar que independentemente do suporte, a diagramação tem como prin-cipal objetivo facilitar a
compreensão da mensagem. Portanto, há alguns elementos a serem observados na elaboração de um
conteúdo digital. 
Uma das maiores dúvidas é sobre a escolha da fonte. No caso de conteúdo digital, há uma recomendação para
o uso de fontes sem serifas (Figura 1). A agência Blueberry, especia-lista em conteúdos digitais, recomenda o
uso desse tipo de fonte, já que são perfeitas para exibi-ção e textos no monitor, pois transmitem sensação de
clareza e organização (AGÊNCIA BLUE-BERRY, [s. d.]). O autor ainda cita alguns exemplos, como as fontes
Helvética, Futura, Univers e Verdana.
Figura 1 | exemplo de página digital com uso de tipogra�asem serifa.
Fonte: Unsplash.
A agência especializada Link Design chama atenção para o uso de elementos que aju-dam o leitor a identi�car o
texto, como dar destaque a títulos, subtítulos e palavras importantes (Figura 2). Também deve haver uma
preocupação com o tamanho da fonte, uma vez que não conhecemos a acuidade visual de quem está lendo.
Aula 2
DIAGRAMAÇÃO PARA MÍDIAS DIGITAIS
As mídias digitais têm se tornado cada vez mais presentes na sociedade e a criação de conteúdo
para esse ambiente possui características próprias, seguindo orientações especí�cas que devem
ser conhecidas e consideradas – esse é o assunto principal que abordaremos nesta aula.
25 minutos
Portanto, recomenda-se o uso de fontes acima de 14pts (LINK DESIGN, [s. d.]).
Figura 2 | Observe as diferenças entre títulos e corpo do texto, uso de cores e tamanho da fonte.
Fonte: Pixabay.
Outro fator que sempre devemos considerar é o uso de no máximo três tipos distintos de fontes, já que um uso
superior a isso irá di�cultar na hierarquia visual.
A organização do texto é sempre importante, sendo assim, deve-se evitar longos blocos de texto, que fazem a
leitura �car cansativa, como sugere a empresa de design Conceito Ideal. Ainda no mesmo artigo, recomenda-se
evitar o uso de textos justi�cados, pois podem ser cansa-tivos ao leitor.
O uso do negrito, itálico e sublinhado são formas de dar destaque em um termo, po-rém há de se lembrar que
o itálico é usado para evidenciar uma expressão ou uma palavra em outra língua, enquanto no meio digital o
sublinhado está associado ao um link. Sendo assim, o negrito é o mais recomendado quando se quer chamar a
atenção sobre algum elemento textual (Figura 3). Mas em hipótese alguma deve-se aplicar o uso concomitante
desses recursos, como destacam os designers da Conceito Ideal (CONCEITO IDEAL, 2013).
Figura 3 | Observe como a diagramação do buscador Google 
Fonte: Captura de tela de busca do Google, 2021.
A emprega esses princípios já estabelecidos pelo design para mídias digitais: uso de negrito, itáli-co e
sublinhado. Outro ponto que diferencia as mídias impressas das digitais é a maneira como as cores são
compostas. O designer Sérgio Estrella explica a diferença principal, no portal Ca-naltech: na web utilizamos o
RGB (vermelho, verde e azul), disponíveis no monitor, enquanto na impressão utilizamos o CMYK (Ciano,
Magenta, Amarelo e Preto), cores de tintas (ESTRELLA, [s. d.]).
Sendo assim, algumas recomendações são fundamentais para que o uso de imagens não comprometa a
legibilidade do layout. A primeira delas é o cuidado na manutenção da pro-porção. Ou seja, em hipótese alguma
as �guras podem ser distorcidas. A manutenção da mar-gem entre os elementos é essencial para não
comprometer o conforto visual.
Ainda sobre o uso de imagens, a qualidade delas é algo fundamental: usar uma de bai-xa qualidade vai
prejudicar a compreensão da informação (Figura 4), em especial em telas mai-ores como a de computadores.
Figura 4 | Exemplo de imagem com baixa resolução, o que atrapalha seu entendimento completo.
Fonte: Unsplash.
Devemos, no entanto, ter um cuidado especial com o tamanho �nal do arquivo, tanto nas dimensões quanto no
volume de dados do arquivo �nal, não devendo utilizar imagens de altíssima resolução pesando 1G, por
exemplo (ESTRELLA, [s. d.]).
Brian Jackson, da Kinsta, uma empresa de hospedagem do grupo de tecnologia ameri-cano WordPress, destaca
que há sempre de se considerar que as imagens grandes reduzem a velocidade das páginas web, portanto é
importante encontrar o equilíbrio entre o menor tamanho de arquivo e uma qualidade aceitável (JACKSON,
2021), sendo que softwares dedicados à ma-nipulação de imagem possuem recursos para esse tipo de
otimização.
A de�nição de uma imagem é mediada em PPI, (Pixels Per Inch ou Pixel por Polega-da, em português), que é a
quantidade de pixels existente em um quadrado com aresta de 1” (uma polegada), como pode ser visto na
Figura 5. 
Figura 5 | Exemplo de como é calculada a de�nição de uma imagem.
Fonte: Plustek Connect Bloggers (2020).
Uma boa referência para a sua prática pro�ssional é usar 72 PPI para aplicações na web, que em geral é uma
de�nição de imagem su�ciente. Mas considere que, com o tamanho e resolução de telas aumentando, é
provável que em breve haja a necessidade de de�nições mai-ores, ainda que estejam longe dos 300 PPI
necessários para uma impressão razoável.
VIDEOAULA: BLOCO 1
Neste vídeo, vamos nos aprofundar no design de websites, conversando sobre:
•  Ilustrações tridimensionais.
•  Interatividade.
•  Realidade Aumentada.
Vamos mostrar as características sobre cada tópico e apresentar exemplos de sites que conte-nham essas
funções.
BLOCO 2
Os e-books têm se tornado uma das grandes ferramentas do marketing digital e a demanda por eles está
aumentando, incentivada pelo baixo custo de produção e facilidade de distribuição. Outra vantagem do suporte
é a versatilidade para mesclar de forma criativa imagem e texto e a facilidade de leitura que esse formato
possibilita.
Figura 6 | Exemplo ilustrativo com uma metáfora, do livro físico para o e-book.
Fonte: Pixabay.
Videoaula: Diagramação de sites e portais
Para visualizar o objeto, acesse seu material digital.
Uma das grandes vantagens do ebook é a possibilidade da leitura em inúmeros dispositivos, como
smartphones, tablets
e computadores. Mas ao mesmo tempo que essa característica é vantajosa ao leitor, é um desa�o que demanda
atenção do diagramador.
A designer Larissa Lima frisa que a missão do diagramador é transformar o conteúdo, seja ele qual for, em uma
experiência agradável e relevante para o público (Figura 7). A autora ainda a�rma que é importante de�nir um
padrão de trabalho para agilizar o processo (LIMA, 2018).
Figura 7 | As possibilidades de interação são muitas nesse tipo de suporte.
Fonte: CAU/RJ (2016).
Antes de iniciar o projeto, deve-se considerar alguns aspectos como:
•  Projeto grá�co.
•  Escolha do programa.
•  Orientação da página.
•  Prazo máximo de diagramação.
•  Volume de texto a ser diagramado.
•  Total de grá�cos e ilustrações a criar.
•  Tempo necessário para seleção de fotos.
•  Complexidade do tema.
•  Tempo necessário na fase de aprovação.
O projeto grá�co pode ser totalmente personalizado ou, então, partir de um modelo (template) preestabelecido
(Figura 8). Um projeto personalizado sempre demandará mais tempo, resultando em um impacto maior no
custo total do projeto.
Figura 8 | Exemplo de template para usar em publicações em redes sociais.
Fonte: Freepik.
A escolha da ferramenta de editoração (InDesign, PowerPoint, Canva, etc.) depende não só das possibilidades
que ela oferece, mas também da intimidade do pro�ssional com o programa.
Figura 9 | Exemplos de softwares para edição.
Ao trabalharmos com publicações de baixo custo, deve-se avaliar se os custos de licença de softwares não vão
inviabilizar o trabalho. Há um aumento na disponibilidade e na qualidade das ferramentas gratuitas ou de baixo
custo para esse tipo de aplicação.
Considerar os recursos necessários para a execução de um projeto é um excelente parâmetro de seleção de
aplicativos. A a�nidade com o programa e os custos podem ser usados para a eleição de quais são mais
adequados. Devemos destacar que é comum o uso de diferentes fer-ramentas (editores de texto e imagem,
desenho vetorial, etc.) na execução de um trabalho.
A orientação (retrato ou paisagem) também é uma informação relevante na de�nição do grid do projeto. Para
evitar a deformação dos elementos grá�cos, o uso de layouts �exíveis é recomen-dado, como observado na
�gura a seguir:
Figura 10 | Layout �exível colabora na manutenção de proporção e legibilidade dos elementos.
Fonte: Developers. 
A agência de marketing paulista Integração Digital (2018) sugere atenção especial em alguns tópicos. O grid
deve ser leve e mesclar imagens e textos para gerar descontração e relaxamento ao conteúdo, deve ainda
priorizar a manutenção do padrãovisual em todo material (Figura 11).
Figura 11 | Uso de grid mesclando imagens e textos e manutenção do padrão visual em todo o material.
Fonte: Freepik.
A estrutura dos e-books guarda muitas semelhanças à versão física, a seguir vemos uma lista dos elementos
que comumente compõem do material.
•  Capa.
•  Sumário.
•  Divisão de capítulo.
•  Página de conteúdo.
•  Encerramento.
Podemos ver alguns desses elementos na imagem seguinte (Figura 12).
Figura 12 | Exemplo de elementos que compõem o e-book.
Fonte: Crello.
O sumário costuma ser uma seção pouco atrativa, porém é uma parte fundamental, que pode se tornar mais
agradável e interativa nesses materiais. Sumários podem ser descontraídos, mas devem ser funcionais.
Uma característica desse tipo de publicação é a possibilidade do uso de hyperlinks podendo conduzir para
conteúdos externos, seja uma explicação mais aprofundada sobre algum ponto especí�co ou as redes sociais
de uma empresa.
Figura 13 | Exemplo de sumário interativo.
Fonte: Flickr.
As aberturas de seção devem ser destacadas, no índice e no corpo da publicação. O objetivo é que a abertura
cause impacto visual despertando interesse sobre o conteúdo que virá a seguir (Figura 14).
Figura 14 | Modelos de abertura de seção.
Fonte: Amaral ([s. d.]).
Como nas publicações físicas, a capa é sempre um elemento importante. Sempre deve instigar o leitor a
conhecer o conteúdo da obra. É necessário que esta seja coerente com a obra, respei-tando os atributos e o
tema escolhido para a confecção do e-book. Um bom exemplo vemos na Figura 15.
Figura 15 | Exemplo de capa de e-book.
Fonte: Saita Books.
A prévia dos elementos textuais torna a diagramação mais rápida e e�ciente. Portanto, antes de começar a
diagramar, sugere-se que sejam determinados elementos como:
• Hierarquia de conteúdo
• Título 1 a 3.
• Fonte de parágrafo.
• Tamanho e peso de fontes.
• Espaçamento.
Na imagem a seguir (Figura 16) podemos ver algumas proporções usadas para a hierarquização dos elementos
descritos anteriormente.
Figura 16 | Proporções usadas para a hierarquização textual.
Fonte: Conta Azul. 
Contudo, não devemos nos esquecer de que cada trabalho é único, portanto, não há uma regra rígida a ser
seguida. A busca por referências é sempre uma atitude saudável para nos inspirar.
VIDEOAULA: BLOCO 2
O vídeo a seguir apresentará os diferentes formatos de arquivo para e-books. Veremos as ca-racterísticas das
extensões e faremos um resumo comparativos desses formatos:
•  EPUB
•  MOBI
•  AZW e AZW3
•  IBA
•  PDF
BLOCO 3
A popularização de dispositivos móveis, como smartphones e tablets, tem mudado a maneira com que as
pessoas interagem com conteúdo na web. Se anteriormente a interface era majoritariamente por meio dos
teclados, hoje a tela sensível é a preferida pelos internautas. Essa mudança in�uencia na concepção de
conteúdo on-line, sendo que siglas como UI e UX têm se tornado mais comuns.
UI, ou User Interface (Interface do Usuário), é a maneira pela qual o usuário interage com um determinado
dispositivo. Essa interação pode ser feita por teclado, telas sensíveis, sons, etc. Devemos ressaltar que a
interface se refere tanto à inserção de dados (teclado, por exemplo) como ao retorno dessas informações (som
de alerta de mensagem).
Willian Matiola, designer colaborador do portal Design Culture, ressalta que um bom projeto de UI antecipa as
necessidades do usuário, garantindo que a interface propicie fácil acesso e utili-zação, possibilitando uma
experiência amigável e que não cause frustrações ao utilizador (DE-SIGN CULTURE, 2015).
UX, ou User Experience (Experiência do Usuário), é muito mais abrangente, englobando todos os aspectos da
interação do consumidor com um bem ou serviço. Nesse caso, o objetivo é satisfazer o usuário atendendo suas
necessidades e compreendendo suas expectativas.
Videoaula: Desenvolvimento de e-books
Para visualizar o objeto, acesse seu material digital.
Quando pensamos em um conteúdo digital, temos que nos atentar à usabilidade, acessibilidade, utilidade e
funcionalidade. Esses conceitos estão intimamente ligados, sendo que a ine�ciência de um provavelmente trará
prejuízo aos demais.
Sendo assim, o site deverá possibilitar uma navegação simples e intuitiva (usabilidade), com material facilmente
acessível, mesmo para pessoas com algum tipo de limitação (acessibilidade). Também é importante que o
conteúdo seja útil e mais direto possível (utilidade) e a página cumpra o objetivo a que se propõe
(funcionalidade).
Segundo o designer britânico Neil Patel, referência em marketing digital, estima-se que 53% dos usuários de
dispositivos móveis abandonam um site se ele demora até 3 segundos para carregar. Para isso, a otimização de
elementos grá�cos, como fotos e iconogra�a, é fundamental para facilitar o carregamento do site. A experiência
do usuário também está intimamente relacionada à facilidade e usabilidade que ele encontra em acessar o
mesmo conteúdo em diferentes dispositivos. Deve ser considerada a harmonia entre os diversos elementos,
como o tamanho de textos e imagens, a psicologia das cores, entre outros (PATEL, [s. d.]).
Aplicando UX e UI
Uma boa estratégia para a aplicação desses conceitos é pensar na responsividade mobile, considerando a
velocidade de carregamento e demais características que interferem na forma como o usuário navega pelo
conteúdo personalizado.
A interface que o usuário vê e com a qual interage deve ser simples de navegar, mesmo que por detrás dela
exista uma in�nidade de códigos e programações complexas.
Há diversas ferramentas no mercado, tanto pagas quanto gratuitas, que facilitam na pesquisa de dados,
diagramação e prototipação, cabendo ao designer compreender as necessidades especí�cas do projeto antes
de efetuar uma escolha.
Testes de usabilidade e lançamentos beta podem ser alguns dos dias mais perturbadores da vida pro�ssional
de um designer, mas a criação de protótipos, mesmo que com funcionalidades reduzidas, é uma ótima dica
para avaliar a e�ciência da implementação.
VIDEOAULA: BLOCO 3
Neste vídeo, vamos conversar um pouco sobre a concepção de um site. Vamos passar pelas etapas de:
•  Imersão.
•  Pesquisa.
•  Criação.
•  Prototipação.
•  Documentação.
Discutiremos os principais aspectos de cada etapa, entendendo os objetivos e a importância para o projeto.
ESTUDO DE CASO
Uma renomada universidade, com o objetivo de divulgar os clássicos da literatura mundial, deci-diu criar
versões digitais desses livros. A primeira obra escolhida foi Dom Quixote de la Mancha (Madrid, 1605), do
espanhol Miguel de Cervantes (1547-1616).
Entre os requisitos do projeto, destacam-se:
•  Propiciar leitura em smartphones.
•  Ter conforto visual na leitura.
•  Remeter às obras originais.
Você é revisor de layout da agência contratada para a elaboração desses livros e o diagramador encaminha para
você o seguinte escopo para o projeto.
•  Formato - A4 retrato 
•  Fonte Título 1 – Brush Script MT 16pt
•  Fonte Título 2 – Times New Roman 14pt
•  Fonte Texto – Times New Roman 12 pt
Videoaula: Gestão da informação em dispositivos móveis
Para visualizar o objeto, acesse seu material digital.
•  Entrelinhas 1,5
Usando um editor de texto (Word, por exemplo), você deverá:
•  Criar uma página seguindo as proposições do diagramador.
•  Avaliar o resultado considerando o brie�ng e seus conhecimentos sobre editoração para mídias digitais.
•  Comentar os itens sugeridos pelo diagramador.
•  Propor as alterações que achar ideais.
RESOLUÇÃO DO ESTUDO DE CASO
Você deverá identi�car:
• O formato A4 em retrato é uma boa orientação, em especial para smartphones.
• Já a escolha das fontes não é adequada, pois:
• A Brush Script MT (do título) é uma fonte muito rebuscada, que di�culta a leitura em especial nos formatos
digitais.
• A Times New Roman é uma fonte serifada, não recomendada para textos em lei-tura em tela.
• Uma letra sem serifa é mais adequada, como Arial ou Century Gothic.•  Com relação ao tamanho das fontes:
• Para o corpo do texto a sugestão seria usar 14.
• No título e subtítulo, poderia usar 16 e 18 ou usar negrito.
• A distância entre linhas está adequada.
Resolução do Estudo de Caso
Para visualizar o objeto, acesse seu material digital.
 Saiba mais
Esta é uma playlist bem interessante sobre UI design com vídeos criados pelo canal brasileiro Chief of
Design, que pode ser assistida aos poucos.
Aproveite! 
Figura 17 | Síntese visual do conteúdo.
https://www.youtube.com/playlist?list=PLwgL9IEA0PxWjVuQrP_E760f6JpJssTXD
INTRODUÇÃO
Desde a massi�cação da internet no início dos anos 2000, os meios de comunicação estão em constante
evolução. Diagramar elementos comunicativos em múltiplas mídias e em uma in�nidade de suportes digitais,
tem demandado uma constante revisão na abordagem sobre esses projetos por parte dos designers.
Aula 3
HIBRIDAÇÃO - PUBLICAÇÕES QUE ATENDEM MULTIPLAS
MÍDIAS
Desde a massi�cação da internet no início dos anos 2000, os meios de comunicação estão em
constante evolução. Diagramar elementos comunicativos em múltiplas mídias e em uma
in�nidade de suportes digitais, tem demandado uma constante revisão na abordagem sobre
esses projetos por parte dos designers.
22 minutos
O maior desa�o é ser compreendido tanto nas enormes e ultrade�nidas telas dos desktops como nas reduzidas
áreas dos smartphones e smartwatches, que requerem a utilização cada vez maior de diagramações
inteligentes e �exíveis. Mas a evolução não se restringe às plataformas, cada vez mais informações estão sendo
veiculadas em diversas mídias. E apesar do uso de elementos multimídia (imagem, áudios e vídeos,
principalmente) não ser algo tão recente, a assimilação dessas também passa por um processo de adequação
às novas realidades e tecnologias.
Somado a essas transformações, temos a nova maneira de contar uma história, antes presa a um único
suporte, agora parte de um universo transmidiático, cabendo ao designer compreender a manutenção da
continuidade da comunicação.
Vamos conhecer um pouco sobre esses desa�os que se apresentam para nós, designers.
BLOCO 1
A evolução das soluções digitais para se comunicar é constante, sempre aumentando a variedade de
dispositivos capazes de acessar conteúdos diversos. Hoje temos que pensar em um design em que o layout
atenda aos diversos tipos de interface, para múltiplas telas.
Há duas maneiras distintas de atendermos a essa demanda: o design adaptativo ou responsivo. O design
adaptativo consiste em desenvolver uma série de versões de interfaces para um produto digital, como um site
de uma rede social, por exemplo, onde cada uma é adaptada para uma de�nição de tela diferente (Figura 1).
Caso a tela não comporte uma versão com de�nição mais alta, ele carrega a próxima da �la.
Figura 1 | Exemplo ilustrativo de dispositivos e telas com de�nições diferentes.
Fonte: Neves (2018).
Um site mais responsivo é uma versão �exível o su�ciente para se encaixar na maioria dos dispositivos
atualmente em uso (ECHOSIS, 2019), como podemos ver na ilustração da Figura 2
A vantagem do uso do design responsivo em relação ao adaptativo é o menor custo, uma vez que a demanda
de desenvolvimento é signi�cativamente menor.
Figura 2 | Exemplo de design responsivo.
Fonte Echosis (2019).
A Agência Digital Design Portugal nos explica que as técnicas mais comuns usadas são criar uma mistura de
imagens e grids �uídas, criando código adaptado (ALEXANDRE, 2015).
Isso é possível a partir do código CSS - Cascating Style Sheet (Folha de Estilo em Cascata), que é responsável por
determinar tamanho, posição, cor para imagens e para o próprio grid, entre outras con�gurações. Assim, se
mudarmos os tamanhos de uma área do grid, teremos que, a partir de um determinado ponto, mudarmos o
layout, como apresentado na Figura 3.
Figura 3 | Layouts especí�cos para cada tipo de visualização.
Fonte: Alexandre (2015).
Apesar de o design responsivo ser mais complexo ao se comparar com uma única página, o trabalho é menor
quando comparado às páginas adaptativas. Outras vantagens desse tipo de abordagem é a velocidade de
carregamento e a facilidade de compartilhamento do conteúdo em redes sociais.
Mobile First
Começar o desenvolvimento de um site pela versão desktop é comum, conforme aponta o blog especializado
em design de interfaces UX Collective (2021). Para eles, há uma tradição na maneira como os designers
costumam trabalhar: uma vez que a web surge no computador e depois migra para outros dispositivos, a
cabeça do designer geralmente funciona da mesma maneira.
Ainda para os autores, o problema é que os usuários não pensam assim. Eles querem acessar o conteúdo, não
importando se é a versão “desktop” ou a versão “mobile”.
Mobile First, como a tradução literal sugere, trata-se de iniciar o processo de design de sites primeiramente para
dispositivos móveis e só depois ir para a experiência no desktop. Essa abordagem propicia pensar em páginas já
otimizadas para telas menores desde o início do projeto.
O mesmo site se adapta para diferentes dispositivos
Ao usarmos essa abordagem, faremos com que o site se adapte ao dispositivo, sem a necessidade de selecionar
um site versão mobile, por exemplo. A transição entre dispositivos acaba sendo mais suave, já que a URL das
páginas é exatamente a mesma (seu endereço eletrônico).
É importante sempre considerar que quem acessa o site de um celular tem uma abordagem diferente daquele
que está à frente do computador, portanto a hierarquia das informações é fundamental (Figura 4).
Figura 4 | Hierarquia de conteúdo em acordo com o dispositivo.
Fonte: Teixeira (2012).
Concluindo, para saber quais os elementos que balizarão essa criação, é interessante determinar alguns
breakpoints (pontos de transição) para o projeto, como o roteiro de desenvolvimento de layouts a seguir:
Começar desenvolvendo o layout Mobile Retrato > depois Mobile Paisagem > em seguida Tablet Retrato > na
sequência, Tablet Paisagem > �nalizando com Desktop.
VIDEOAULA: BLOCO 1
Neste vídeo, vamos falar um pouco sobre a organização de informações em diferentes plataformas.
• Conversaremos sobre a transição do desenvolvimento para mídias estáticas para as dinâmicas.
• Avaliaremos a comparação entre as diagramações. Para tal, analisaremos uma peça publicitária:
• Impressa em uma revista.
• Disponibilizada em um banner digital, vinculado na web.
• Uma inserção em dispositivo moblile.
Vamos abordar os elementos comuns das abordagens, assim como as características especí�cas de cada
elemento.
BLOCO 2
Conteúdo multimídia é todo aquele que é composto pela combinação de mídias estáticas (textos, fotogra�as,
grá�cos) e dinâmicas (vídeos, áudios, animações) de maneira integrada.
A popularização da internet possibilitou uma nova integração na comunicação, que passou a ser bidirecional. O
consumo passivo da informação passa a ter possibilidades dinâmicas que em pouco tempo se tornam
necessidades, obrigando empresas estabelecidas a se reinventarem.
Em 2010, os jornais norte-americanos The New York Times e The Guardian começaram a explorar esses novos
recursos de diferentes mídias em conjunto com textos mais aprofundados para compor uma narrativa. Isso
passou a cativar os leitores que migravam do jornal tradicional para a web, introduzindo um novo formato de
reportagens, criando um maior engajamento dos usuários (DIALETTO, 2018).
Mas como criar esse engajamento? Uma resposta está no uso de conteúdos interativos, ou seja, aqueles que
permitem uma interferência do leitor. Esses conteúdos capturam a atenção, a�nal, quem nunca foi atraído a
fazer testes de personalidade na web?
Infográ�cos interativos
São uma versão da infogra�a tradicional estática, mas com a opção de interação do usuário. Dessa forma, o
resultado apresentado sempre irá variar em consonância com a interação do internauta.
Naturalmente, a complexidade do desenvolvimento pode variar desde a utilização de hyperlinks até uso de
linguagemde programação com complexidade mais elevada.
As calculadoras
Com o incremento do comércio via web, o uso de sistemas possíveis de realizar cálculos é algo cada vez mais
utilizado. Segundo a Rockt Content, site especializado em marketing digital, esses elementos transformam
dados em uma resposta útil ao usuário. As calculadoras são as responsáveis por auxiliar na escolha do tamanho
ideal de um vestuário, ou saber quanto custará a estadia em um determinado local (Figura 5).
Figura 5 | Exemplos de calculadora: acima calculando o tamanho ideal do calçado, abaixo o valor de uma estadia especí�ca.
Videoaula: Design responsivo e mobile �rst
Para visualizar o objeto, acesse seu material digital.
A aplicação desses elementos pode demandar programação especí�ca, mas para aplicações mais simples há
plugins ou criadores de site em que esses recursos são inclusos. Nessas ocasiões (uso de plugins e templates),
as interfaces costumam ser grá�cas (Figura 6) e de fácil con�guração.
Figura 6 | Con�guração de uma calculadora de custo de frete em função do peso em um modelo (template).
Nestes casos, o elemento con�gurado pode ser posicionado e editado para que o estilo esteja em consonância
com o restante do site, como na Figura 7.
Figura 7 | Exemplo de calculadora já aplicada ao site.
Fonte: Calculoide.
• Landing pages
Em uma tradução literal são páginas de aterrisagem que têm dois objetivos principais, os quais seriam a
captação de leads ou vendas.
As voltadas para geração de leads (cadastro de informações dos usuários para contato futuro) têm como foco
convencer os visitantes a se cadastrarem, deixando seus dados de contato.
Aquelas cujo objetivo é a venda (páginas de produtos) apresentam fotos, vídeos, descrição de funcionalidades
dos produtos, um CTA ou Call to Action (“chamada para realizar uma ação”) e um botão para ação, que
impulsiona o cliente para realizar a compra, como na imagem seguinte, onde vemos a landing page da Fiverr,
plataforma on-line de serviços onde freelancers se oferecem para quem quiser contratar seus préstimos.
Figura 8 | Exemplo de landing page.
Fonte: Fiverr.
• Mapas interativos
Um excelente exemplo desse recurso vemos no IBGE (Instituto Brasileiro de Geogra�a e Estatística), que tem um
canal com mapas interativos (https://mapasinterativos-geoportal-ibge.hub.arcgis.com/).
Seja um mapa, uma imagem ou um diagrama dinâmico incorporado a uma webpage, esse tipo de layout
retorna uma informação ao usuário, dependendo do tipo de entrada.
Na Figura 9 vemos que na situação A os dados referentes a um tipo de ambiente especí�co (pantanal) e ao
alterar para outro ambiente (cerrado, na situação B), o mapa é reposicionado e os dados exibidos são alterados.
Figura 9 | Mapa interativo do IBGE.
Fonte: elaborada pelo autor com base em IBGE.
• Quizzes
Muito populares, em especial em redes sociais, esses elementos têm como objetivo gerar leads em troca de
uma informação descontraída.
A aplicação dessas e outras soluções não deve ser feita de maneira indiscriminada, devendo ser orientada pelas
demandas do público. Como dito anteriormente, conhecer as expectativas e necessidades do usuário é o ponto
de partida para a escolha dos recursos a serem inseridos.
VIDEOAULA: BLOCO 2
Neste vídeo vamos abordar o uso da multimídia na geração de um quiz, conversando sobre:
• Quando vale a pena fazer.
• Como escolher a melhor ferramenta.
https://mapasinterativos-geoportal-ibge.hub.arcgis.com/
• A importância de um título “sedutor”.
• Perguntas e resultados.
• CTAs para os resultados (call to action).
• Como distribuir para o público de interesse.
BLOCO 3
A comunicação por diversas mídias tem se tornado um fenômeno cada vez mais comum. Uma narrativa
transmidiática não deve possuir uma única história, mas um conjunto de histórias que se complementam e
criam o que é conhecido como “universo”, como os universos Star Wars, original dos cinemas, ou os universos
DC e Marvel, com suas origens nos quadrinhos.
O MCU Marvel Comics Universe (Universo Marvel) é reconhecido pelo uso de transmídia não só na distribuição
dos seus produtos, como nas campanhas de marketing, com especial atenção às plataformas digitais.
Um dos exemplos mais emblemáticos foi na ação pré-lançamento do �lme Capitão América: Guerra Civil (EUA,
2016). Meses antes do lançamento do �lme as páginas nas redes sociais dos protagonistas (Capitão América e
Homem de Ferro) postavam cartazes das produções, porém cada um com apenas os membros de sua própria
equipe, em conjunto com indexadores exclusivos para cada time (#TeamCap e #TeamIronMan).
Apesar de não ser novidade, a luta entre os personagens para os fãs, em especial aos que consomem o material
em quadrinhos, a publicidade em torno do �lme atraiu os fãs ocasionais (que acompanharam a história apenas
pelo cinema) para a disputa entre os heróis. A publicidade gratuita dada pelas publicações nas redes sociais
daqueles que se identi�cavam com cada time foi fundamental para o sucesso do lançamento.
Mesmo para quem acompanhou em apenas uma das mídias (cinema, por exemplo) houve diversas outra
formas de distribuição das partes da história por outros �lmes, séries, HQs e videogames, permitindo o
entendimento por quem acompanhou em uma ou por várias mídias diferentes, ainda que em cada uma dessas
plataformas tenha existido uma nova história que está relacionada com todas as outras. Ou seja, para que o “fã
de carteirinha” entenda o todo é preciso navegar por todos os meios, como observado na Figura 10.
Figura 10 | Narrativa transmídia do �lme Capitão América: Guerra Civil (2016). 
Fonte: Convergence Fall 2016: Transmedia.
Nesse processo construtivo da narrativa, é essencial usar as diferentes mídias como vias complementares para
alcançar um objetivo comum, fazendo com que o interlocutor vá compreendendo a história aos poucos.
Para o desenvolvimento desse tipo de comunicação, há uma necessidade da presença em diversos canais
midiáticos e que uma coerência entre elas. Cabe destacar que a coerência não signi�ca que a mesma
informação será transmitida em diferentes meios.
Para que o material �que coerente, independente da mídia, o designer deve ter conhecimento dos objetivos, do
público que pretende atender e das mídias com as quais a história interage.
Ter um conhecimento abrangente de todo o universo, dos objetivos de cada canal e dos envolvidos é
fundamental. Sem essas informações, di�cilmente o produtor irá conseguir desenvolver um produto com
coerência com os demais.
Videoaula: Conteúdo multimídia
Para visualizar o objeto, acesse seu material digital.
Não com menor importância é a compreensão da linguagem da mídia pela qual a respectiva mensagem será
vinculada. Não adianta tentar encaixar o conteúdo desenvolvido em uma publicação impressa, como qualidade
de imagem altíssima, em uma mídia .
Esse tipo de conteúdo, por usar complexidade, tende a ser desenvolvido em equipe, porém a compreensão da
obra como um todo é essencial para a coerência entres as histórias.
VIDEOAULA: BLOCO 3
Iniciaremos conversando sobre a importância da prototipação em implementações digitais.
Passaremos para entender como validar o layout. Entenderemos as seguintes etapas:
• Role prototypes (função).
• Look & Feel (olhar e sentir).
• Implementation (implementação).
• Integration (integração).
Encerraremos discutindo sobre a �delidade do protótipo.
ESTUDO DE CASO
A agência de marketing que você trabalha �cou encarregada de refazer toda a identidade visual de uma
empresa do setor de eventos. São requisitos do projeto.
• Possuir uma landing page.
• O site ser responsivo.
• Acesso fácil via dispositivos móveis (smartfones em especial).
Uma vez que a sua responsabilidade é coordenar a reestruturação do website, você recebeu as propostas a
seguir (Figura 11 e 12):
Figura 11 | Proposta A.
Figura 12 | Proposta B.
Videoaula: Conteúdo transmídia
Para visualizar o objeto, acesse seu material digital.
Como a parte de de�nição de estilo (fontese cores) ainda não está fechada, avalie as opções:
a) Se o elemento inicial favorece o desenvolvimento de um site responsivo.
b) Com relação à landind page, se está em consonância com o solicitado.
c) Se há facilidade de uso em dispositivos mobile.
Feita a análise, indique qual das opções atende melhor o projeto. Justi�que sua resposta.
RESOLUÇÃO DO ESTUDO DE CASO
Neste vídeo, vamos mostrar que é preciso avaliar ambas as propostas:
a) Se o elemento inicial favorece o desenvolvimento de um site responsivo.
b) Com relação à landind page, se está em consonância com o solicitado.
c) Se há facilidade de uso em dispositivos mobile.
Sendo assim, vamos às alternativas:
Opção A
a) Se o elemento inicial favorece o desenvolvimento de um site responsivo.
Não há como saber a partir das páginas mostradas, já que é esperado que haja primeiro uma avaliação de
como se comporta no dispositivo mobile.
b) Com relação à landind page, se está em consonância com o solicitado.
Esta opção entra diretamente na aba home, portanto não há a landing page.
c) Se há facilidade de uso em dispositivos mobile.
A página não priorizou o que preconiza o mobile �rst, portanto não há como prever seu funcionamento no
ambiente dos smartphones.
Opção B
a) Se o elemento inicial favorece o desenvolvimento de um site responsivo.
Apesar de ter partido do smartphone, não há como avaliar quão responsivo é o site, podendo ser apenas um
site para mobile.
b) Com relação à landind page, se está em consonância com o solicitado.
Há nitidamente de�nida uma landind page, portanto atende este requisito.
c) Se há facilidade de uso em dispositivos mobile.
A página priorizou o que preconiza o mobile �rst, portanto seu funcionamento está otimizado para os
smartphones.
Concluindo:
A proposta B está mais adequada ao solicitado, apesar da impossibilidade de se avaliar a questão do elemento
ser ou não responsivo em ambas as propostas. A opção B apresentou uma landing page e está otimizada ao uso
em smartphones, portanto está mais adequada à solicitação
Resolução do Estudo de Caso
Para visualizar o objeto, acesse seu material digital.
 Saiba mais
A plataforma Kinsta é, segundo eles próprios se apresentam na webpage deles, um provedor de
hospedagem gerenciada, que faz parte da empresa de tecnologia e comunicação WordPress (EUA),
plataforma que “ajuda a cuidar de todas as necessidades do seu site”.
No Kinsta Blog você pode encontrar muita informação em artigos e tutoriais, como informações mais
aprofundadas sobre o design de sites responsivos.
Figura 13 | Layout em múltiplas mídias.
INTRODUÇÃO
Enquanto designers, somos responsáveis pela produção de peças que incluam todas as pessoas,
indiscriminadamente. Os últimos anos marcaram um crescimento no conceito que todas as pessoas devem ser
incluídas e ter os mesmos direitos de frequentar lugares, utilizar produtos e interagir com outros.
Organizações sem �ns lucrativos e órgãos governamentais lançam diariamente manuais de boas práticas e, em
alguns países, repartições públicas, empresas privadas e até estabelecimentos comerciais podem ser multados
pela não inclusão de pessoas com características especiais em suas comunicações.
Nesta aula, conheceremos algumas estratégias para uma melhor interação com pessoas com de�ciência,
design acessível a daltônicos e neurodiversidade, autismo e dislexia.
Esperamos que em seus projetos pro�ssionais todos os grupos possam ser respeitados e incluídos.
Bons estudos!
BLOCO 1
Ao desenvolver uma peça grá�ca o designer pensa, invariavelmente, no público “médio”, ou seja, o público
formado pela maioria dos usuários para os quais é destinado o produto. Entretanto, apesar de ser adequada ao
atendimento da maioria, essa postura deixa desassistida uma parcela da população que possui de�ciência,
formada por pessoas que já enfrentam inúmeras di�culdades no desenvolvimento de suas atividades
cotidianas.
Se observarmos a imagem seguinte (Figura 1), teremos uma noção de como uma simples escolha de fonte pode
comprometer a legibilidade para alguém que tenha uma disfunção visual.
Figura 1 | Exemplo de como uma pessoa com de�ciencia visual enxerga algumas fontes. 
Aula 4
ACESSIBILIDADE
Enquanto designers, somos responsáveis pela produção de peças que incluam todas as pessoas,
indiscriminadamente. Os últimos anos marcaram um crescimento no conceito que todas as
pessoas devem ser incluídas e ter os mesmos direitos de frequentar lugares, utilizar produtos e
interagir com outros.
23 minutos
https://kinsta.com/pt/blog/design-responsivo-web/
Fonte: composição do autor a partir de imagens de Inclusive Design Toolkit.
Nos últimos anos, a preocupação da produção do design ser inclusiva a todas as pessoas tem sido alvo de
discussões constantes. As iniciativas de inclusão desses usuários vão desde os ambientes da cidade até as
interfaces de dispositivos móveis, como celulares e computadores.
Devemos pensar não somente em pessoas com de�ciência, como de�ciência visual, de�ciência auditiva,
perturbações na aprendizagem, de�ciências físicas e transtornos mentais e comportamentais, mas também na
acessibilidade do público em geral.
De acordo com o site designinclusivo.com, “os princípios do design inclusivo tratam basicamente de colocar as
pessoas em primeiro lugar.” Para isso, algumas estratégias devem ser observadas. Como princípios básicos,
temos:
1. GRIDS
Divisões e distribuições descomplicadas são essenciais para leitores com di�culdades visuais, que necessitam
de indicações para a identi�cação e o processamento rápido do conteúdo.
O alinhamento dos blocos de texto também é fundamental. Uma borda irregular faz com que a sequência da
leitura entrelinhas seja di�cultada. Já o texto justi�cado cria espaços às vezes grandes demais entre palavras,
tornando difícil sua conexão com o resto da frase. O texto alinhado à esquerda é mais facilmente lido, criando
um ponto de partida e direcionando o olhar na sequência das frases.
Podemos ver, na Figura 2, duas propostas que apresentam essas diferenças de regularidade na composição do
layout. A da esquerda (destacada em vermelho) apresenta uma irregularidade na distribuição dos elementos, já
o grid do modelo à direita (destaque em verde) apresenta uma distribuição mais ordenada, que facilita a
compreensão.
Figura 2 | Exemplo de site que di�culta a visualização (esquerda) e com uma melhor disposição (direita). 
Fonte: Composição do autor a partir de imagens de anDyrv e masiko.
2. HIERARQUIA
A utilização de uma ordem lógica facilita o entendimento e o destaque de informações mais relevantes (Figura
3).
3. SUPERFÍCIE DE IMPRESSÃO
O uso de elementos foscos é o mais apropriado. Deve-se evitar papéis brilhantes e alto contraste (Figura 3).
Figura 3 | Exemplo de utilização de hierarquia bem de�nida e acabamento fosco. 
Fonte: Poliarte. 
4. COR
Deve-se preferencialmente garantir pelo menos 70% de diferença nos tons das fontes tipográ�cas e o plano de
fundo. Combinações de cores seguindo o esquema complementar (Figura 4) causam fadiga visual, portanto
deve-se buscar o contraste evitando que ele seja muito marcante.
Figura 4 | Para uma melhor legibilidade, evite usar as cores complementares, dê preferencias para outras harmonias. Fonte: Bastos (2017). 
Fonte: Bastos (2017).
5. LEGIBILIDADE TIPOGRÁFICA
A composição da tipogra�a in�uencia diretamente a legibilidade do texto, mas antes vamos lembrar da
anatomia de uma fonte (Figura 5).
Figura 5 | Elementos que compõem a anatomia de uma fonte.
 Fonte: Ho�mann (2020).
A relação entre o traço e o contador (áreas vazias dentro das letras) é o que determina uma fonte de boa
legibilidade. Fontes com contadores maiores são mais facilmente lidas em tamanhos menores.
A taxa de altura (diferença) entre as letras maiúsculas e minúsculas também in�uencia a legibilidade, assim
como a relação entre a largura e a altura das fontes tipográ�cas. Fontes estreitas são de difícil leitura, assim
como as manuscritas.
O espaçamento entrecaracteres (kerning) também pode ser um elemento problemático. Se é pequeno, pode
fazer com que as letras pareçam embaralhadas, e se muito grande, pode di�cultar sua conexão a �m de formar
as palavras.
Letras maiúsculas não devem ser utilizadas de�nindo frases inteiras, já que dessa maneira �cam mais difíceis de
ler pela falta de contraste de altura. O sublinhado e o itálico também devem ser usados com moderação, já que
podem causar distração visual.
Na imagem seguinte, vemos alguns exemplos do que deve ser evitado nos textos (Figura 6).
Figura 6 | Exemplos de textos com baixa legibilidade. 
Fonte: IFRG (2019).
Concluindo, para orientações direcionadas à acessibilidade na internet de maneira mais minuciosa, deve-se
consultar as diretrizes formuladas pela Web Content Accessibility Guidelines (WCAG), que lista as boas práticas
para essas mídias.
VIDEOAULA: BLOCO 1
Neste vídeo, vamos ver algumas dicas importantes para que possamos tornar um site mais acessível,
mostrando exemplos para:
• A importância da janela para Libras.
• Como posicionar essa janela no seu layout.
• Descrição de ilustrações.
• Cuidados com o uso de adjetivos.
BLOCO 2
Daltonismo é uma condição genética presente na maioria dos casos em homens (8% da população mundial
masculina possui essa condição, contra 0,5% de mulheres). Essa condição faz com que a percepção de algumas
cores seja di�cultada.
Existem três tipos de daltonismo que resultam em diferentes di�culdades de reconhecimento das cores. Eles
são a Deuteranopia, a Tritanopia e a Protanopia. Quando o indivíduo possui as três di�culdades, é considerado
um daltônico total.
Figura 7 | Como os daltônicos enxergam.
Videoaula: Interação com pessoas com de�ciência
Para visualizar o objeto, acesse seu material digital.
Fonte: Medically Reviewed.
Considerando essa di�culdade, algumas combinações de cores devem ser evitadas, já que podem di�cultar a
usabilidade para essa parcela da população. As principais sobreposições de cores a serem evitadas são o
marrom com o verde, o verde com o vermelho, o azul com o verde, o azul com o roxo, o verde com o amarelo e
todas as variações tonais destas cores.
Figura 8 | Combinações de cores indiscrimináveis para daltônicos.
Ainda sobre o uso de combinações cromáticas, deve-se evitar usar esquemas análogos com pouco contraste,
mas ao mesmo tempo, altos contrastes não são desejáveis. O uso das cores como sinalização também deve ser
evitado. As cores podem ser utilizadas, mas devem contar com símbolos, a �m de reforçar seu signi�cado. Nas
imagens a seguir, perceba como o uso de símbolos conjuntamente com as cores poderia ser muito mais
acessível aos daltônicos se utilizados nos semáforos.
Figura 9 | Semáforo atual, confuso para daltônicos.
Fonte: Mega curioso.
Figura 10 | Modelo de semáforo proposto pelo Projeto de Lei nº 4.937/2009, acessível a daltônicos. 
Fonte: Paulo Miranda/EM/D.A PRESS.
Para outros tipos de de�ciência visual
Sabemos que aproximadamente 4% da população mundial possui baixa visão, sendo que 0,6% é cega. As
iniciativas atuais de inclusão dessas pessoas passam, necessariamente, pelo design especí�co para a internet.
Com a crescente preocupação com a acessibilidade, foram criados programas que leem em voz alta o conteúdo
das páginas da web. As imagens presentes e os arquivos são descritos. Cabe ao designer desenvolvedor
descrever minunciosamente as imagens e nomear os arquivos de maneira fácil e descritiva, a �m de facilitar o
processo realizado pelo programa.
Os vídeos devem ter legendas, o que os torna mais acessíveis inclusive para os usuários que não possuem
de�ciência.
Algumas observações de usuários sobre problemas encontrados nos sites, mesmo acessíveis:
• O programa de leitura rastreia a tela da esquerda para a direita, de cima para baixo, colocando em primeiro
lugar os links. A leitura de todos os links pode ser um processo muito monótono, procure, nos seus designs,
colocar apenas um link direcionando para o conteúdo principal.
• Lembre-se que o de�ciente visual não utiliza o mouse. Artifícios como teclados, que só podem ser acessados
com o mouse, não devem ser utilizados.
• Programas que usam muitas animações não possuem boa navegação, porque o programa leitor não consegue
detectar sua descrição. Além disso, as animações em �ash invariavelmente são acionadas pelo mouse.
Acessibilidade é uma realidade da sociedade no século XXI e deve estar presente em seus trabalhos como
Designer Grá�co. Para saber mais, visite o site https://www.gov.br/pt-br/acessibilidade, do Governo Federal do
Brasil. Lá é possível encontrar diretrizes para acessibilidade para a web, bem como uma listagem de leis e
decretos regulamentadores.
 Saiba mais
Acessibilidade é uma realidade da sociedade no século XXI e deve estar presente em seus trabalhos como
Designer Grá�co. No site do Governo Federal do Brasil é possível encontrar diretrizes para acessibilidade
para a web, bem como uma listagem de leis e decretos regulamentadores.
VIDEOAULA: BLOCO 2
Neste vídeo, vamos conversar sobre como podemos melhorar a acessibilidade de um material. Veremos itens
como:
• Uso de indexadores.
• Cálculo de contraste.
• Uso do teclado na navegação.
• Cuidados com a tipogra�a.
• Cuidados na redação.
Videoaula: Design acessível a daltônicos e de�cientes visuais
Para visualizar o objeto, acesse seu material digital.
https://www.gov.br/pt-br/acessibilidade
https://www.gov.br/pt-br/acessibilidade
BLOCO 3
Neurodiversidade se refere às variações naturais no cérebro humano de cada indivíduo em relação à
sociabilidade, aprendizagem, atenção, humor e outras funções cognitivas. Cerca de 15% da população mundial
é considerada neurodiversa. Entre os grupos neurodiversos, dois grupos merecem especial atenção, pois são
mais numerosos: os indivíduos no espectro autista e os disléxicos.
Segundo a International Dyslexia Association (IDA), dislexia é um transtorno especí�co de aprendizagem
caracterizado pela di�culdade no reconhecimento das palavras, na habilidade de decodi�cação e na soletração.
Cerca de 16% da população mundial sofre de alguma forma de dislexia.
O Transtorno do Espectro Autista (TEA) engloba uma série de condições que têm em comum o
comprometimento no comportamento social, comunicação e linguagem. O número de pessoas diagnosticadas
com esse transtorno vem crescendo mundialmente ano a ano e novas práticas de inclusão e tratamento vêm
sendo desenvolvidas.
Vamos abordar diversos elementos que contribuem para que uma interface seja mais amigável à
neurodiversidade. Mas antes de detalharmos, observe a Figura 11, onde alguns desses elementos estão
aplicados.
Figura 11 | Aplicação dos conceitos que contribuem para a acessibilidade para populações neurodiversas.
Alguns dos elementos da imagem anterior estão listados a seguir, em uma série de estratégias úteis para a
composição de peças que sejam acessíveis para essas populações:
• Permita a customização de preferências visuais: cores, fontes e tamanho do texto.
• Use fontes grandes e sem serifa. O tamanho da fonte tipográ�ca recomendado é entre 12 e 14 pontos.
• Distancie uma linha da outra verticalmente.
• Não centralize o texto. Use sempre orientação justi�cada à esquerda.
• Use negrito ao invés de itálico ou sublinhado para adicionar ênfase.
• Utilize escrita clara, concisa e bem organizada.
• Use voz ativa. Sentenças em voz passiva não são facilmente compreendidas por todos, especialmente os
disléxicos e os que possuem dé�cit de atenção.
Exemplo:
Voz ativa: “O menino come bolo.”
Voz passiva: “O bolo é comido pelo menino.”
• Evite metáforas. As pessoas no espectro autista podem ter problemas para entendê-las.
Exemplo: “A sua voz é música para meus ouvidos.”
• Use formatação em pequenos parágrafos. Evite parágrafos grandes, pre�ra listas numeradas ou com
marcadores. O comprimento preferencial para uma linha é 45 caracteres. O comprimento máximo nunca deve
ultrapassar 100 caracteres.
• Uso botões que descrevama ação realizada ao clicá-los.
• Use cores menos saturadas. Autistas são muito suscetíveis a estímulos sensoriais e podem �car incomodados
com cores muito brilhantes e contrastes intensos.
• Componha os textos em cinza escuro, já que letras pretas em fundo branco podem parecer borradas,
atrapalhando pessoas disléxicas.
• Cuidado com as animações. Muito estímulo produz ansiedade em pessoas no espectro autista.
• Evite reproduções automáticas. Movimentos e sons inesperados podem ser assustadores. São muito
estimulantes e podem ser também altamente distratores para portadores de dé�cit de atenção.
• Adicione legendas em vídeos, o que facilita inclusive aos usuários que não são neurodiversos.
• Use alertas auditivos e visuais.
• O uso de hierarquia e organização trazem a sensação de segurança, não somente para os neurodiversos, mas
para o público em geral. Para os disléxicos e as pessoas que têm problemas de concentração, títulos, cores e
estilos consistentes ajudam o entendimento do conteúdo sem esforço.
• Indicadores visuais: reforce textos com ícones e utilize marcadores e títulos, para maior facilidade de
localização de trechos no texto e facilitar a memorização.
• Consistência: a utilização dos mesmos símbolos para as diversas indicações presentes em um site é desejada
não somente para os neurodiversos e faz muita diferença, por exemplo, quando o usuário está no espectro
autista.
Para conhecer um site totalmente acessível, visite: https://www.nsw.gov.au/ (Figura 12).
Figura 12 | Site NSW.au, exemplo de site acessível. 
Fonte: NSH Government.
A principal premissa do design é a compreensão da necessidade do usuário, portanto a prática da empatia é
sempre uma boa maneira de entendermos o mundo da perspectiva daqueles para quem estamos projetando.
VIDEOAULA: BLOCO 3
Agora, vamos falar um pouco sobre a produção de vídeos. Vamos abordar:
• Cuidados com a legenda.
• Cuidados com efeitos especiais.
• Descrição de imagens e ilustrações.
Finalizaremos mostrando um exemplo de um vídeo aplicando essas estratégias.
ESTUDO DE CASO
Você foi contratado por uma confeitaria para reformular sua página da web tornando-a acessível. Observe a
página atual, na Figura 13 a seguir. Observe atentamente a imagem a partir dos pontos de atenção que um
projeto acessível deveria atender e assinale o que você mudaria na página atual.
Figura 13 | Website atual do cliente.
Videoaula: Neurodiversidade, autismo e dislexia
Para visualizar o objeto, acesse seu material digital.
https://www.nsw.gov.au/
Uma vez identi�cados pontos de melhoria a �m de fazer o redesign do website da Confeitaria Naná, escreva um
texto explicando as estratégias que você usaria para cumprir a demanda de atender às questões de
acessibilidade (com tamanho entre 10 e 20 linhas).
RESOLUÇÃO DO ESTUDO DE CASO
É esperado que se faça uma análise da imagem do website da Confeitaria Naná (de referência no exercício -
Figura 13). Não tem certo ou errado para a redação ou o estilo textual adotado. O importante é destacar ao
menos um dos pontos a seguir, presentes na imagem original, apontando sugestões de melhoria para tornar a
página web acessível:
1. O site original apresenta fundo de cor única, com pouco contraste em relação às imagens dos doces coloridos
em primeiro plano, o que certamente não permitirá ser vista com perfeição por todos os grupos daltônicos,
apesar de ser uma imagem facilmente reconhecível como um doce. Na �gura 14, a seguir, o fundo com pouca
saturação e com pouco contraste é agradável aos grupos do espectro autista.
2. Uso de quadros transparentes para ressaltar os títulos principais. Estratégia para auxiliar os portadores de
TDHA a se concentrar nos elementos importantes.
3. Alinhamento à esquerda e baseado no sentido de leitura da esquerda superior à direita inferior. Estratégia
que traz sensação de organização e calma a todos os grupos, inclusive neurotípicos.
4. Marcação de elementos do texto com símbolos das palavras ao lado, ajudando na leitura para os grupos
disléxicos.
5. Fontes tipográ�cas: Open Sans, adequada a disléxicos e pessoas com baixa visão.
7. Textos em cinza escuro ou azul. Existe contraste, mas ele não é brusco, auxiliando os disléxicos e as pessoas
com espectro autista.
Hierarquia: títulos em fonte maior, textos em fonte menor, alinhamento à esquerda. Orientando à leitura,
ajudando a identi�car as informações principais. Essa estratégia auxilia a todos os grupos neurodiversos.
8. Demarcação do endereço com um símbolo representando a confeitaria. Estratégia que auxilia todos os
grupos neurodiversos.
Figura 14 | Exemplo de redesign do website, tornando-o mais acessível.
Resolução do Estudo de Caso
Para visualizar o objeto, acesse seu material digital.
 Saiba mais
No vídeo How to Make Your Website Accessible to Everyone with accessiBe, realizado pelo canal no
Youtube Simpletivity, focado em design e tecnologia, você conhecerá uma ferramenta que ajuda a tornar
websites acessíveis.  O vídeo e a ferramenta são em inglês, entretanto são muito intuitivos, será fácil de
entender – mas você também pode assisti-lo com legenda em português! Na tela do vídeo do Youtube,
clique no ícone de “con�gurações”, uma pequena engrenagem que �ca no canto inferior à direita. Escolha a
opção “legendas/cc”, clique em “Traduzir automaticamente” e escolha o nosso idioma (ou o idioma que
você desejar!). Pronto: imediatamente a Inteligência Arti�cial do Youtube vai traduzir o que está sendo
falado no vídeo em tempo real! A tradução simultânea ainda não é perfeita, mas tem uma taxa de acerto
acima de 90%, o que permite a compreensão do que está sendo apresentado.
Figura 15 | Acessibilidade.
Aula 1
ACARÁ. Processo de diagramação de revistas, jornais e informativos. 2015. Disponível em:
https://acara.com.br/revistas-informativos#recebimentotextos. Acesso em: 16 ago. 2021.
CARDOSO, R. Uma introdução à história do design. São Paulo: Blücher, 2008.
CATANZARO, A. C. História da arte e do design. Londrina: Editora e Distribuidora Educacional S.A., 2017.
CONVERGENCE FALL 2016. Transmedia: Marvel Cinematic Universe. 2016. Disponível em:
http://convergencefa2016.blogspot.com/2016/11/transmedia-marvel-cinematic-universe.html. Acesso em: 14
ago. 2021.
HEITLINGER, P. Tipogra�a. Jules Chéret (1836-1932). Tipografos.net. 2007. Disponível em:
http://tipografos.net/tecnologias/cheret.html. Acesso em: 4 out. 2021.
HISTÓRIA DO CARTAZ. Criar um Cartaz: Dicas para um bom trabalho.... Disponível em:
https://historiadocartaz.weebly.com/index.html. Acesso em: 18 ago. 2021.
LIMA, R. O que escrever na capa de um livro?. O Capista. [s. d.] Disponível em: https://capista.com.br/o-que-
escrever-em-uma-capa-de-livro/. Acesso em: 16 ago. 2021.
MAYA, T. de B.; DE FRANCESCHI, R.; NEROSKY, M. R. Design editorial e de Informação. Londrina: Editora e
Distribuidora Educacional S.A., 2016.
NUNES, P. A diagramação de um livro – Um pequeno guia para designers. PSNDesign. 2020. Disponível em:
https://www.psndesign.com.br/blog/a-diagramacao-de-um-livro/. Acesso em: 15 ago. 2021.
STEINACKER, U. Layoutgestaltung: Mit dem Gestaltungsraster den typogra�schen Spannungsbogen �nden.
TypeSCHOOL. 2019. Disponível em: https://typeschool.de/layoutgestaltung-mit-dem-gestaltungsraster-den-
typogra�schen-spannungsbogen-�nden/. Acesso em: 4 out 2021.
REFERÊNCIAS
12 minutos
https://www.youtube.com/watch?v=Ny2NhgtXf84
https://acara.com.br/revistas-informativos#recebimentotextos
http://convergencefa2016.blogspot.com/2016/11/transmedia-marvel-cinematic-universe.html
http://tipografos.net/tecnologias/cheret.html
https://historiadocartaz.weebly.com/index.html
https://capista.com.br/o-que-escrever-em-uma-capa-de-livro/
https://www.psndesign.com.br/blog/a-diagramacao-de-um-livro/
https://typeschool.de/layoutgestaltung-mit-dem-gestaltungsraster-den-typografischen-spannungsbogen-finden/
VIANA, J. Flyer, pan�eto ou folder? Saiba a diferença!. Blog da Printi. 2020. Disponível em:
https://www.printi.com.br/blog/�yer-pan�eto-ou-folder-saiba-a-diferenca?mkwid=s-dc_pcrid_452568209699_pkw__pmt_b_slid__product__&pgrid=106353233180&ptaid=aud-764775068121%3Adsa-
511676553037&gclid=CjwKCAjwgviIBhBkEiwA10D2jxkuScS6rKpKLXQ3U33o6qnKXZCI67Uhr7kZ101Ke38teo0M45
Xn8hoCmCYQAvD_BwE. Acesso em: 18 ago. 2021.
Aula 2
AGÊNCIA BLUEBERRY. 7 dicas essenciais para uma melhor diagramação. [s. d.]. Disponível em:
https://bbmarketing.com.br/7-dicas-diagramacao/. Acesso em: 1 set. 2021.
AMARAL, M. eBook gratuito e interativo: Na trilha da Carreira, de Alexandre Bobeda. [s. d.]. Disponível em:
https://carreirasolo.org/livros/ebook-gratuito-e-interativo-na-trilha-da-carreira-de-alexandre-
bobeda#.YUIQybhKiMo. Acesso em: 4 out. 2021.
CAU/RJ. ebook-tablet. Disponível em: https://www.caurj.gov.br/seaerj-busca-apoio-para-formar-sua-biblioteca-
digital/ebook-tablet/. Acesso em: 4 out. 2021.
CARDOSO, R. Uma introdução à história do design. São Paulo: Blücher, 2008.
CATANZARO, A. C. História da arte e do design. Londrina: Editora e Distribuidora Educacional S.A., 2017.
CONTA AZUL. Tipogra�a. Disponível em: https://www.contaazul.design/brandbook/tipogra�a/hierarquia.
Acesso em: 4 out. 2021.
CONCEITO IDEAL. Dicas de diagramação para não designers. 2013. Disponível em:
https://conceitoideal.com.br/blog/identidade-visual/dicas-de-diagramacao-para-nao-designers.html. Acesso em:
31 ago. 2021.
DESIGN CULTURE. O que é UI Design e UX Design? 2015. Disponível em: https://designculture.com.br/o-que-e-
ui-design-e-ux-design. Acesso em: 2 set. 2021.
DEVELOPERS. Compatibilidade com tamanhos de tela diferentes. [s. d.]. Disponível em:
https://developer.android.com/training/multiscreen/screensizes?hl=pt-br. Acesso em: 4 out. 2021.
ESTRELLA, S. Como salvar imagens mais leves e compactas para Web no Photoshop. Canaltech. [s. d.].
Disponível em: https://canaltech.com.br/software/Como-salvar-imagens-mais-leves-no-Photoshop/. Acesso em:
2 set. 2021.
GUSMÃO, A. O que é User Experience? Entenda tudo sobre UX, suas diretrizes e como aplicá-lo no seu site.
Rockcontent. 2020. Disponível em: https://rockcontent.com/br/blog/user-experience/. Acesso em: 3 set. 2021.
JACKSON, B. Como Otimizar Imagens para Web e para Melhorar o Desempenho. Kinsta. 2021. Disponível em:
https://kinsta.com/pt/blog/otimizar-imagens-para-web/. Acesso em: 1 set. 2021.
LIMA, L. Como ganhar tempo na diagramação de ebooks?. Integração Digital. 2018. Disponível em:
https://www.gestaodeprojetosdigitais.com.br/2018/08/como-ganhar-tempo-na-diagramacao-de-ebooks/. Acesso
em: 3 set. 2021.
LINK DESIGN. Dicas para diagramação web. Disponível em: https://www.linkdesignbrasil.com/dicas-para-
diagramacao-web/. Acesso em: 1 set. 2021.
MAYA, T. de B.; DE FRANCESCHI, R.; NEROSKY, M. R. Design editorial e de Informação. Londrina: Editora e
Distribuidora Educacional S.A., 2016.
NEIL, P. UX: O Que É, Como Funciona e Como Aplicar (+ 5 Exemplos). [s. d.]. Disponível em:
https://neilpatel.com/br/blog/ux-o-que-e/. Acesso em: 2 set. 2021.
NEIL, P.  Como Melhorar a Velocidade do Site no Mobile. [s. d.]. Disponível em:
https://neilpatel.com/br/blog/melhorar-velocidade-do-site-no-mobile/. Acesso em: 4 out. 2021.
PLUSTEK CONNECT BLOGGERS. What exactly is DPI? 2020. Disponível em:
https://blog.plustek.com/2020/07/01/what-exactly-is-dpi/. Acesso em: 4 out. 2021.
SAITA PUBLICATIONS | Free ebooks. The Theory of the Person. Disponível em:
http://www.saitabooks.eu/2016/08/ebook.206.html. Acesso em: 4 out. 2021.
Aula 3
ADD. Web design – 23 passos para o layout de site perfeito. Disponível em: https://add.digital/web-design-
perfeito/. Acesso em: 8 set. 2021.
ALEXANDRE, J. O que é o web design responsivo. Designpt. 2015. Disponível em:
https://designportugal.net/web-design-responsivo-o-que-e-e-como-fazer/. Acesso em: 9 set. 2021.
CALCULOIDE. Crie uma calculadora interativa para o seu site. Disponível em: 
https://pt.calculoid.com/functions/create-an-interactive-calculator-for-your-website. Acesso em: 4 out. 2021.
https://www.printi.com.br/blog/flyer-panfleto-ou-folder-saiba-a-diferenca?mkwid=s-dc_pcrid_452568209699_pkw__pmt_b_slid__product__&pgrid=106353233180&ptaid=aud-764775068121%3Adsa-511676553037&gclid=CjwKCAjwgviIBhBkEiwA10D2jxkuScS6rKpKLXQ3U33o6qnKXZCI67Uhr7kZ101Ke38teo0M45Xn8hoCmCYQAvD_BwE
https://carreirasolo.org/livros/ebook-gratuito-e-interativo-na-trilha-da-carreira-de-alexandre-bobeda#.YUIQybhKiMo
https://www.caurj.gov.br/seaerj-busca-apoio-para-formar-sua-biblioteca-digital/ebook-tablet/
https://www.contaazul.design/brandbook/tipografia/hierarquia
https://neilpatel.com/br/blog/melhorar-velocidade-do-site-no-mobile/
https://blog.plustek.com/2020/07/01/what-exactly-is-dpi/
http://www.saitabooks.eu/2016/08/ebook.206.html
https://add.digital/web-design-perfeito/
https://designportugal.net/web-design-responsivo-o-que-e-e-como-fazer/
https://pt.calculoid.com/functions/create-an-interactive-calculator-for-your-website
CARDOSO, R. Uma introdução à história do design. São Paulo: Blücher, 2008.
CATANZARO, A. C. História da arte e do design. Londrina: Editora e Distribuidora Educacional S.A., 2017.
CASAROTTO, C. Guia do Conteúdo Interativo: como trazer vida para sua estratégia de Marketing de Conteúdo.
Rock Content. 2020. Disponível em: https://rockcontent.com/br/blog/conteudo-interativo/. Acesso em: 6 set.
2021.
CONVERGENCE Fall 2016: Transmedia. Disponível em: convergencefa2016.blogspot.com. Acesso em: 4 out.
2021.
DIALETTO. Conteúdos multimídia e interativos no Inbound Marketing. 2018. Disponível em:
https://www.dialetto.com.br/blog/conteudos-multimidia-no-inbound-marketing/. Acesso em: 4 set. 2021.
DIGILANDIA. Landing page: o que é, para que serve, como montar e exemplos. 2021. Disponível em:
https://digilandia.io/transformacao-digital/landing-page/#O_que_e_landing_page. Acesso em: 7 set. 2021.
ECHOSIS. Você sabe o que é design responsivo e a importância dele?. 2019. Disponível em:
https://www.echosis.com.br/voce-sabe-o-que-e-design-responsivo-e-a-importancia-dele/. Acesso em: 9 set.
2021.
HOSTGATOR. Tipogra�a digital: escolha as melhores fontes web para o seu site. 2018. Disponível em:
https://www.hostgator.com.br/blog/fontes-web-como-escolher/. Acesso em: 8 set. 2021.
MAYA, T. de B.; DE FRANCESCHI, R.; NEROSKY, M. R. Design editorial e de Informação. Londrina: Editora e
Distribuidora Educacional S.A., 2016.
NEVES, A. Interfaces adaptativas. Tendências Digitais, 2018. Disponível em:
https://medium.com/tend%C3%AAncias-digitais/interfaces-adaptativas-13bbe1de7c10. Acesso em: 4 out. 2021.
ROCK CONTENT. Entenda como usar a narrativa transmídia para promover sua empresa. 2019. Disponível
em: https://rockcontent.com/br/blog/transmidia/. Acesso em: 3 set. 2021.
TEIXEIRA, F. 5 coisas que aprendi em um projeto Mobile-First Responsive Design para o Google. UX
Collective. 2012. Disponível em: https://brasil.uxdesign.cc/5-coisas-que-aprendi-em-um-projeto-mobile-�rst-
responsive-design-para-o-google-cb9c3223c51e. Acesso em: 9 set. 2021.
Aula 4
BASTOS, T. R. Círculo cromático: aprenda a combinar cores na decoração. Casa e Jardim, 2017. Disponível em:
https://revistacasaejardim.globo.com/Casa-e-Jardim/Dicas/noticia/2017/03/circulo-cromatico-aprenda-
combinar-cores-na-decoracao.html acessado em 12 set. 2021.
BEVEREN, T. Designing with the colorblind in mind will improve your design for everyone. Invision, 2018.
Disponível em: https://www.invisionapp.com/inside-design/designing-for-colorblind-improves-design. Acesso
em: 1 set. 2021.
CARDOSO, R. Uma introdução à história do design. São Paulo: Blücher, 2008.
CATANZARO, A. C. História da arte e do design. Londrina: Editora e Distribuidora Educacional S.A., 2017.
CERQUEIRA, P. Sinal para daltônicos - Trem sem cores. 2011. Disponível em:
https://estadodeminas.vrum.com.br/app/noticia/noticias/2011/11/16/interna_noticias,44850/sinal-para-
daltonicos-trem-sem-cores.shtml. Acesso em: 4 out. 2021.
HOFFMANN, S. Tipogra�a da web: Como encontrar a fonte perfeita para o teu site. Wp Unboxed, 2020.
Disponível em: https://raidboxes.io/pt/blog/webdesign-development/web-fonts/.