Buscar

Design para Mídias Digitais II

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes
Você viu 3, do total de 95 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes
Você viu 6, do total de 95 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes
Você viu 9, do total de 95 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Prévia do material em texto

DESIGN PARA
MÍDIAS
DIGITAIS II
06/02/2023 09:11 wlldd_u1_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 1/25
Imprimir
Aula 1
COMUNICAÇÃO VISUAL

MÍDIAS DIGITAIS INTERATIVAS E
SUAS ESPECIFICIDADES:
PRINCÍPIOS DO DESIGN DE
INTERAÇÃO
124 minutos
Aula 1 - Comunicação visual
Aula 2 - Mídias digitais, design e comunicação interativa
Aula 3 - Tendências nas mídias digitais
Aula 4 - Design de interação (IxD)
Referências
06/02/2023 09:11 wlldd_u1_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 2/25
INTRODUÇÃO
Boa parte da comunicação humana acontece de forma visual. Alguns pesquisadores calculam que cerca de 90%
do conteúdo de uma mensagem se dá por meio dos elementos como: postura corporal, aparência,
gestualidade, uso de cores e símbolos. Por esta razão, tão importante quanto saber elaborar bem uma
informação, é saber como apresentá-la visualmente. Nesta aula serão discutidos importantes conceitos da
semiótica, teoria da Gestalt e suas interpretações e a teoria das cores. O uso estratégico destas ferramentas
pode potencializar a recepção e o alcance de uma mensagem. Na atualidade, em cenários de consumo digital
rápido e massivo, é fundamental compreender e dominar a comunicação visual. Se você quer dominar a arte da
criação de conteúdos e�cientes, preste muita atenção aos detalhes desta aula.
CONCEITOS DE SEMIÓTICA
Semiótica – a ciência dos signi�cados 
A semiótica é a ciência que estuda os signos. Mas, calma, não são os signos do horóscopo, signo é tudo o que
lembra alguma coisa. O conceito parece um pouco complicado e �losó�co demais, mas na prática é simples.
Semiótica, que em grego é semeiotiké, signi�ca algo como "a arte dos sinais" e diz respeito ao estudo dos
sistemas de signi�cação e comunicação em uma sociedade.
Os primeiros estudos sobre semiótica surgiram ainda no século XIX, tendo como seus principais representantes
Viesse-Iovski e Iuri Lotman na extinta União Soviética. Em meados do século XX na França, Saussure, Greimas e
Hjelmslev deram grandes contribuições à re�exão associada à linguística, enquanto nos Estados Unidos da
América, Charles Peirce trouxe notáveis contribuições à área. Estas três escolas – soviética, francesa e
americana – são consideradas as principais escolas de origem dos estudos semióticos (BARROS; CAFÉ, 2012, p.
20).
Existem três elementos da semiótica proposta por Charles Peirce – também chamada de semiótica peirceana –
que oferecem muita contribuição aos processos criativos de comunicação visual. São eles: ícone, índice e
símbolo.
Ícone 
Um ícone é um signo que tem semelhança com o objeto ao qual faz referência. Por exemplo: a fotogra�a de um
cachorro que se assemelha ao cachorro fotografado, a ilustração de um pássaro que qualquer pessoa, ao olhar,
consegue compreender que é um pássaro. De acordo com Epstein (1997, p. 49), “os ícones comunicam de forma
imediata porque são imediatamente percebidos: quadros, desenhos, estruturas, modelos, esquemas,
predicados, metáforas, comparações, �guras lógicas e poéticas, etc”.
Índice 
A semiótica é a ciência que estuda os signos. Mas, calma, não são os signos do horóscopo, signo
é tudo o que lembra alguma coisa.
28 minutos
06/02/2023 09:11 wlldd_u1_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 3/25
Um índice indica algo, a relação deste signo com o objeto indica algo que aconteceu ou vai acontecer.
Diferentemente do ícone, ele precisa de algo para existir. São exemplos de ícones: uma nuvem que indica que
vai chover, uma fumaça que indica fogo, pegadas que indicam que alguém passou por aquele lugar. Os índices
são muito utilizados na publicidade para demonstrar uma mensagem de forma não explícita.
Símbolo 
O símbolo, por sua vez, é um signo convencionado. Ele é estabelecido por meio de uma regra, seja ela cultural
ou social. Um exemplo de símbolo é o desenho de um coração que é convencionalmente atribuído ao órgão do
corpo humano – embora não se pareça com ele – e por convenção pode signi�car o amor. Palavras também são
símbolos e só podem ser utilizadas e compreendidas por pessoas que têm conhecimento das regras
linguísticas, por exemplo: uma palavra em português só é um símbolo para quem domina as regras deste
idioma.
Figura 1 | Cão tomando banho
Fonte: Pixabay .
Na �gura anterior é possível reconhecer os três elementos: ícone, índice e símbolo. O ícone é a ilustração de um
cão, que obviamente se parece com um cão. O índice aparece nos elementos que indicam que o animal está
tomando um banho, pois há espuma, bolhas e uma bacia na qual ele está imerso. Por último, o símbolo pode
ser identi�cado nas palavras que identi�cam a �gura, pois a frase “cão tomando banho” só faz sentido porque
simbolicamente cada palavra tem um signi�cado convencionado.
Ao compreender estes elementos fundamentais da semiótica peirciana é possível utilizar os recursos da
comunicação visual de forma mais e�ciente e estratégica. Na atualidade existe uma tendência de busca por
conteúdos mais dinâmicos e sucintos, por isso, quando bem utilizada, a semiótica pode ser uma das maiores
aliadas do design de mídias digitais.
PRINCÍPIOS DA GESTALT
Gestalt – um estudo da forma 
A comunicação visual é composta por elementos culturais e sociais, como bem aponta a semiótica, mas existem
também perspectivas psicológicas que in�uenciam muito na compreensão e resposta dos indivíduos a
determinadas mensagens.

06/02/2023 09:11 wlldd_u1_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 4/25
A teoria da Gestalt busca explicar alguns elementos da compreensão sobre a parte e o todo e surgiu em 1910
quando o psicólogo Max Wertheimer viajava de trem de Viena para Renânia, e impressionou-se ao observar um
efeito de luzes entre duas lâmpadas. A palavra alemã "Gestalt" não tem correspondência na língua portuguesa,
e tem como signi�cado a associação a algo concreto que apresenta entre seus atributos a forma (ENGELMAN,
2002, p. 1). Desde 1912, quando foram publicados os primeiros escritos da teoria da Gestalt, surgiram muitas
correntes e interpretações relacionadas aos estudos iniciais de Wertheimer, tendo em comum entre si o estudo
dos estímulos e percepções sobre as partes e o todo em composições visuais, de certa forma, pode-se dizer que
a teoria da Gestalt estuda a psicologia da boa forma.
Existem diversas leis – ou princípios – na teoria da Gestalt e dentre elas é importante destacar:
Unidade 
A lei da unidade a�rma que um componente pode ser formado por uma ou mais partes do conjunto da obra, ou
seja, uma unidade é vista como um único objeto, ainda que composto por diversos outros.
Figura 2 | Exemplo de unidade: logo da Adidas
Fonte: Pixabay.
Semelhança 
Segundo a lei da semelhança, o cérebro tende a agrupar objetos de aparência parecida e interpretá-los como
uma única unidade. Este recurso é muito utilizado na publicidade para agrupamentos estratégicos e releituras
de imagens ou contextos.
Figura 3 | Exemplo de semelhança: publicidade de Natal da Nespresso
Fonte: Mendes (2020).

06/02/2023 09:11 wlldd_u1_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 5/25
Proximidade 
Segundo a Gestalt, os objetos próximos são assimilados conjuntamente pelo cérebro e este é o princípio da
proximidade, muito utilizado no design de criaçãode logo, dentre outros.
Continuidade 
O princípio da continuidade parte das percepções sobre �uxo, conexão e complementação entre elementos. O
cérebro busca uma sequência visual por meio de linhas, planos e outros elementos da composição. Pode ser
percebida na arquitetura ou em logos famosas como a da marca Coca-Cola.
Fechamento 
A lei do fechamento é bastante curiosa, ela parte da percepção de que o cérebro tende a "completar" as partes
que faltam em um determinado objeto ou composição. O bom uso deste princípio pode resultar em designs
criativos e muito inteligentes.
Figura 4 | Exemplo de fechamento: você consegue ver um cachorro dálmata?
Fonte: Mendes (2020).
Pregnância 
Uma das mais importantes leis da Gestalt, também conhecida como a lei da forma, a pregnância aponta para a
simplicidade como um elemento favorável à construção visual. De certa forma, é o conceito de "menos é mais".
Quanto mais simples a forma ou a composição, mais fácil é a sua compreensão e percepção. A pregnância,
pode-se dizer, é uma medida da facilidade de leitura de uma forma ou composição visual. Maior pregnância
signi�ca mais facilidade e rapidez de compreensão pelo olhar, já uma baixa pregnância indica uma peça poluída
visualmente e de difícil entendimento visual.
Existem diversos outros aspectos da Gestalt que podem e devem ser estudado minuciosamente. É
imprescindível saber que o domínio destes conceitos teóricos é fundamental para o design criativo e
acrescentam muita e�ciência na comunicação visual. 
TEORIA DAS CORES
O poder das cores 

06/02/2023 09:11 wlldd_u1_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 6/25
As cores têm um enorme impacto na comunicação visual. Mais do que um mero elemento de pigmentação ou
luz, o uso das cores tem relações com a cultura, sociedade e com as emoções dos indivíduos, podendo
in�uenciar seriamente as percepções do design em uma mídia digital.
A cor nada mais é do que a percepção visual da luz. Estima-se que existam cerca de 350.000 (trezentas e
cinquenta mil) cores visíveis. Segundo Farina et al. (2006, p. 13), “a cor é vista e impressiona a retina. É sentida:
provoca uma emoção. E é construtiva, pois, tendo um signi�cado próprio, tem valor de símbolo e capacidade,
portanto de construir uma linguagem própria que comunique uma ideia”.
As cores podem ser simbólicas, isso signi�ca que a partir de regras e convenções elas podem ter signi�cados
muito especí�cos. Por exemplo: o vermelho simboliza o amor em diversas culturas; o verde que simboliza
esperança e o preto pode representar o luto. É também sabido que as cores podem in�uenciar o
comportamento e até o desejo de consumo, esta é a razão pela qual grandes redes de fast food costumam
utilizar o amarelo e o vermelho em suas marcas e estabelecimentos, pois são cores que estimulam o apetite.
As cores têm características muito especí�cas que in�uenciam nas percepções de forma, peso e movimento
dentre outros fatores, por esta razão é importante observar a harmonia e o equilíbrio entre elas ao utilizá-las.
Cores primárias são aquelas que não podem ser decompostas (o vermelho, o azul e o amarelo). Todas as
demais cores do espectro são obtidas a partir da combinação destas. As cores secundárias são aquelas que
surgem a partir de duas cores primárias e as terciárias são aquelas que existem mediante a combinação de uma
cor primária e uma cor secundária. São consideradas cores quentes aquelas com predominância de vermelho e
amarelo, ao passo que as cores frias têm predominância do azul e do verde. Estes conceitos são muito
importantes para a comunicação visual. Por exemplo: um bom designer não deve jamais criar um material para
um festival de praia no verão em que predominem cores frias, pois isso afetaria negativamente a mensagem de
tropicalidade, calor e euforia.
Figura 5 | Círculo cromático
Fonte: Cagnin; Rocha (2019).
O uso equilibrado das cores também está ligado ao descanso visual, por isso deve-se evitar a criação de
composições poluídas ou cansativas. Na prática isto pode ser visto em algumas escolhas estratégicas e
cotidianas como o uso do verde nos uniformes dos pro�ssionais que participam de cirurgias em hospitais. O
verde no círculo cromático é a cor oposta ao vermelho do sangue, elemento predominante em uma cirurgia,
então para o alívio do olhar dos pro�ssionais que frequentemente passam horas manuseando a cor vermelha,
utiliza-se o verde nas roupas e nas paredes como recurso de equilíbrio e facilitação da visibilidade.

06/02/2023 09:11 wlldd_u1_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 7/25
As cores podem emocionar, transmitir alegria, paz e até causar irritação, por esta razão é muito importante que
o pro�ssional do design em mídias digitais conheça as potencialidades, os recursos e riscos existentes na
escolha das cores. Mais do que um elemento decorativo, a cor pode ser o diferencial que faz um consumidor
escolher se vai levar ou não aquele produto. 
VIDEOAULA
Nesta aula, por meio de uma exposição dialogada, você vai conhecer mais sobre elementos fundamentais para
uma comunicação visual de sucesso. Você perceberá que recursos conceituais como o domínio de fundamentos
da semiótica e da teoria psicológica da Gestalt podem in�uenciar na criação de um bom design. Também vai
aprender que a aplicação prática e bem orientada de elementos como as cores pode in�uenciar diretamente na
recepção e opinião dos usuários. 
Videoaula
Para visualizar o objeto, acesse seu material digital.
 Saiba mais
Semiótica
Para aprender mais sobre a semiótica e suas fascinantes perspectivas teóricas, leia o livro Semiótica de
Ana Paula Pinheiro da Silveira. São 140 páginas com muitos conceitos interessantes sobre o assunto.
Disponível gratuitamente na biblioteca virtual.
Para estudar semiótica, um bom exercício é identi�car ícones, índices e símbolos em produções
audiovisuais sem textos escritos ou falas. Um bom exemplo disso é o curta-metragem Coin Operated –
Animated Short Filme, uma premiada animação repleta de metáforas
Pareidolia
Pareidolia é um fenômeno psicológico que todas as pessoas vivem e que está ligado à Gestalt, trata-se da
capacidade de reconhecer imagens e feições humanas nos objetos e paisagens. Para saber mais sobre o
assunto você pode ler esta interessante reportagem Pareidolia: por que muitos veem ‘monstro’ em
imagem de furacão feita por satélite, produzida pela BBC News Brasil.
Combinando as cores
Uma ótima ferramenta para a criação de paleta de cores e testes de harmonização digital é o Adobe Color.
Com dez diferentes possibilidades de combinações, a descrição técnica das cores e suas codi�cações, a
plataforma é online, intuitiva e gratuita.
Aula 2
MÍDIAS DIGITAIS, DESIGN E COMUNICAÇÃO INTERATIVA

https://biblioteca-virtual.com/detalhes/ebook/6087050a54aa8872fb666965
https://www.youtube.com/watch?v=5L4DQfVIcdg
https://www.bbc.com/portuguese/brasil-37584260
https://color.adobe.com/pt/create/color-wheel
06/02/2023 09:11 wlldd_u1_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 8/25
INTRODUÇÃO
O fenômeno da comunicação interativa por meio de mídias digitais é recente, mas para compreendê-lo é
necessário ter consciência do contexto do qual ele emerge, suas perspectivas históricas, culturais e sociais. O
design e a estética re�etem diversos aspectos de uma sociedade, por isso é importante também ter atenção às
transformações e tendências que direcionam os consumidores de conteúdo. Existe uma grande distância de
tempo entre as pinturas rupestres nas cavernas pré-históricas e os memes que“viralizam” nas redes sociais na
atualidade, mas estes dois produtos grá�cos estão conectados entre si pelas noções estéticas e perspectivas do
belo. Para o domínio do design e melhoria dos elementos interativos nas mídias digitais é importante
compreender os aspectos subjetivos que regem o apreço e consumo coletivo de materiais visuais.
CONTEXTUALIZAÇÃO HISTÓRICA DO BELO NA ARTE E NO DESIGN
O conceito de beleza na história da humanidade 
A beleza é algo agradável e que chama a atenção. Quanto mais bonito um trabalho, mais atraente ele será. Mas
existe uma grande questão a este respeito: a beleza é uma qualidade absoluta ou um conceito subjetivo? O que
determina se algo é bonito são suas características ou a opinião dos apreciadores?
O princípio da beleza rege a maioria das expressões artísticas e visuais que existem. Nesse sentido observa-se
que “a beleza é, fundamentalmente, um artefato distinto, sedutor e mágico e, portanto, exige um rigor mais
apurado referente aos padrões estéticos” (LABORDE, 2004, p. 9).
Na história da arte é possível perceber as variações do conceito de beleza em cada época, cultura e sociedade.
Enquanto na pré-história a beleza feminina era representada por peças como a Vênus de Willendorf, que
retratam uma mulher baixa com corpo farto, barriga e seios volumosos, os gregos clássicos representavam a
beleza feminina a partir de um corpo magro e de músculos bem de�nidos.
Figura 1 | Comparação entre a beleza de duas Vênus
A beleza é algo agradável e que chama a atenção. Quanto mais bonito um trabalho, mais
atraente ele será. Mas existe uma grande questão a este respeito: a beleza é uma qualidade
absoluta ou um conceito subjetivo?
27 minutos

06/02/2023 09:11 wlldd_u1_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 9/25
Fonte: adaptada de Canva Pro pela autora.
Entre os povos africanos do Egito, a beleza era representada por meio de pinturas com corpos per�lados em
traços delicados e coloridos, na arquitetura era expressa nas pirâmides e estruturas gigantescas. Entre os povos
astecas na América Latina, o belo era representado também em pinturas per�ladas, mas sem muitas cores e
com traços mais pronunciados, ao passo que na arquitetura, a expressão máximas eram os zigurates.
Figura 2 | Representações de beleza na arte egípcia e na arte asteca
Fonte: adaptada de Canva Pro pela autora.

06/02/2023 09:11 wlldd_u1_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 10/25
Ao longo da história, o conceito de beleza foi bastante discutido por pensadores e �lósofos, sendo importante
destacar algumas destas mais conhecidas perspectivas.
Em meados dos anos 400 antes de Cristo, o �lósofo grego Platão de�niu o belo como um conceito associado à
perfeição, algo que só poderia ser contemplado em uma perspectiva de total exclusão de sentidos ou
interpretação. No diálogo "O banquete", ele atribuiu aspectos cientí�cos à beleza em uma ideia pura e universal
de algo divino e não apenas físico.
Já para Immanuel Kant, �lósofo prussiano do século XVIII, e o primeiro a referir-se à estética como a ciência do
belo, a “beleza é a forma da conformidade a �ns de um objeto, na medida em que ela é percebida nele sem
representação de um �m” (KANT, 1995, p. 82). Para este pensador, os critérios de apreciação da beleza estavam
profundamente ligados aos sentimentos de prazer e não a uma dimensão objetiva.
No século XIX o �lósofo alemão George W. Hegel, a beleza não era um conceito absoluto e rígido, mas o
resultado do trabalho em sociedade. Ao contrário de Kant, ele acreditava que o belo ia além do agradável, era
um ideal a ser atingido, fruto da potencialidade e evolução humana. Hegel via o belo como o resultado da
junção harmônica entre forma e conteúdo.
Embora não exista uma de�nição absoluta, consensual e rígida sobre o que é belo, para a criação e�ciente de
designs para mídias digitais, é necessário compreender que estas noções perpassam por diversos valores de
cada sociedade. Em tempos de personalização da informação é fundamental compreender os valores estéticos
que orientam as demandas dos usuários e motivam suas interações.
ESTÉTICA, CULTURA E AS MÍDIAS DIGITAIS
Interestética 
Desde o surgimento da fotogra�a em 1826, iniciou-se uma nova discussão conceitual a respeito da estética e da
arte, isto �ca claramente demarcado na obra de Walter Benjamin (1993) com o tema: “A obra de arte na era da
reprodutibilidade técnica”. Desde então, muitas são as perguntas sobre o tema: com a possibilidade da
reprodução em larga escala de imagens, as obras de arte passariam a ser um mero produto? Existe arte
comercial? O artístico é apenas o raro ou o comum também pode ser considerado arte? Mesmo após muitas
décadas, ainda não existe consenso entre pesquisadores e teóricos a este respeito, mas fato é que as novas
mídias afetaram consideravelmente as percepções, a cultura e as concepções estéticas da sociedade.
Existem diversos conceitos que tentam de�nir o que é estética, mas, para �ns didáticos, pode-se dizer que é o
gênero de conhecimento autônomo e o estudo daquilo que é considerado belo nas manifestações artísticas e
naturais (CAMARGO, 2009). A estética de uma sociedade re�ete os elementos que a compõem como a cultura, a
economia, as tradições e os valores. Por meio de símbolos, normas e referências, os padrões estéticos que
de�nem belo, feio, aceitável, agradável, repugnante ou desprezível são construídos. É importante ter
consciência destas questões porque elas in�uenciam diretamente no que será aceito como um design bonito e,
portanto, bom ou ruim.
Com o advento das mídias digitais, surge uma nova estética, pensada exclusivamente para as plataformas
emergentes dos meios tecnológicos. Sem as preocupações com custos de impressão, diferenças de
pigmentações, grandes volumes de tiragem e distribuição passa a existir mais liberdade para a criatividade no
espaço da comunicação visual digital. Embora surjam novos cursos na formação e quali�cação dos pro�ssionais,
o custo para a criação de distribuição de um grande volume de produtos visuais é severamente reduzido nas
plataformas digitais.

06/02/2023 09:11 wlldd_u1_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 11/25
As mídias digitais trouxeram também novas possibilidades de consumo da arte e da estética. Para Priscila
Arantes (2004, p. 4) “pensar a arte em mídia digital a partir da noção de sistema signi�ca dizer que ela, em
primeiro lugar, não é uma arte fechada, mas processual, desenvolvendo-se a partir dos dispositivos interativos”.
É neste contexto e sentido que Philippe Quéau (1985) cunha o conceito de estética intermediária, para se referir
a uma "arte viva", interativa, desenvolvida a partir das tecnologias digitais. Esta capacidade de reprodução e
organização da arte interativa, que imita um organismo vivo, deve ser compreendida a partir das múltiplas
possibilidades que surgem destes processos e relações. Felix Guattari (1992, p.135) observa que a arte "leva ao
ponto extremo uma capacidade de invenção de coordenadas mutantes, de engendramento de qualidades de
ser inéditas, jamais vistas, jamais pensadas".
O conceito de interestética surge, então, a partir da de�nição de "uma estética híbrida que pretende diluir os
limites, trazendo para seu interior as inter-relações e interconexões com outras áreas do saber. É uma estética
que rompe com qualquer ideia de fronteira rígida entre perto e longe, arti�cial e natural, real e virtual"
(ARANTES, 2004, p. 10).
A estética das mídias digitais não é uma mera adaptação de outros formatos,ao contrário, ela possui
características próprias das plataformas que lhe dão suporte. A interestética requer uma leitura da realidade e
das tendências socioculturais, algo que vai muito além do tecnicismo e que está atrelado à individualidade da
experiência de cada usuário. 
PERSONALIZAÇÃO DA INFORMAÇÃO, FEEDBACK E FIDELIZAÇÃO
Elementos importantes do design interativo 
A comunicação visual por meio do design esteve por muito tempo restrita a uma seleta camada de artistas
como pintores, escultores e ilustradores. Com a chegada das tecnologias digitais, o leque de possibilidades
criativas para o design se ampliou signi�cativamente. No contexto da interestética atual é importante ressaltar
três importantes componentes aliados do design atrativo: a personalização da informação, o feedback e a
�delização.
Personalização da informação 
A personalização no design é a de�nição de algumas diretrizes e parâmetros com o intuito de atender a um
determinado usuário ou grupo de usuários. Nas mídias digitais, a personalização permite a experiência de
consumo centrada no usuário e não no produto ou conteúdo. Para que isso aconteça é necessário planejar e
estudar as demandas. Para Koch (2000, p. 145), “o processo de desenvolvimento demanda um estudo de
viabilidade exaustivo, planejamento adequado e experiência em construção de aplicações hipermídia, técnicas
de modelagem e de adaptação”. Ao proporcionar uma experiência não apenas agradável, mas principalmente
centrada no usuário, as possibilidades de vínculo e �delização entre marca e indivíduo podem ser consolidadas,
tendo como intermediário principal o design. Para Batista e Ulbricht (2007, p. 30), "personalização, também
denominada adaptação, em informática, signi�ca de�nir um conjunto de parâmetros para atender às exigências
de um usuário especí�co; ajustar para o uso pessoal". Um estudo feito pela Forrester (SERIEDESIGN, 2018)
apontou que empresas que trabalham com personalização têm consumo aumentado em 15% nas compras e
20% de aumento de receita por usuário. Quanto mais pessoal é a experiência, mais especial ela pode se tornar
para indivíduo.
Feedback 

06/02/2023 09:11 wlldd_u1_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 12/25
Nem sempre é possível acertar ou prever as demandas do usuário com precisão, por isso é fundamental que
existam canais para feedback, não só no que diz respeito aos conteúdos, mas também em relação ao design e à
interação. Isso pode ser feito por meio de canais de atendimento e chatbots, dentre outros. Além do feedback
para criadores e marcas, no que diz respeito ao design de interação, é importante que o usuário também
receba um feedback de suas ações. Isso signi�ca que para toda ação do usuário existe uma expectativa de
resposta. Na prática, existem duas categorias de feedback: o ativador (activational feedback) e o
comportamental (behavioral feedback). O feedback ativador é aquele em que a resposta se manifesta de forma
sensorial, por meio de um alarme, mudança visual ou vibração. Por exemplo, um botão que muda de cor
quando se clica nele para con�rmar algo. Já o feedback comportamental é uma resposta a um comando ativado
com e�cácia nos sistemas, como uma caixa de mensagem após o envio de um e-mail avisando que a
correspondência eletrônica foi encaminhada com sucesso.
Fidelização 
A comunicação interativa é centrada no usuário, por isso é fundamental que ele seja envolvido e motivado a
interagir com frequência. Designs atraentes, intuitivos, personalizados e acessíveis contribuem com a �delização
dos clientes. Por meio de uma comunicação visual bem executada, o usuário se sente atendido e a marca
recebe como retorno um consumidor frequente.
O design é responsável pela vitrine nas mídias digitais, por isso o bom pro�ssional deve dominar as mais
diversas ferramentas e nuances da comunicação visual. Para consumir, o usuário precisa primeiro se sentir
atraído pelo produto e a atuação de um bom designer faz toda a diferença neste processo. 
VIDEOAULA
O design para mídias digitais e para a comunicação interativa vai muito além de conceitos práticos e
ferramentas técnicas. É importante compreender fundamentos da cultura e estética atual. Nesta aula serão
demonstrados conceitos e exemplos da construção dos padrões de beleza em diferentes épocas e sociedades.
Por meio de temáticas importantes e contemporâneas como: interestética, personalização da informação,
feedback e �delização são abordados também conceitos práticos do design aplicado à comunicação digital
interativa.
Videoaula
Para visualizar o objeto, acesse seu material digital.
 Saiba mais
Arte e ilustração
Na obra Arte e ilustração de Valter do Carmo Moreira (2018) é possível aprender e re�etir sobre a
comunicação visual ao longo da história. O livro também aborda o uso da ilustração na comunicação e a
aplicação de ferramentas de edição e manipulação de imagem. Disponível gratuitamente na biblioteca
digital.
Museu virtual

https://biblioteca-virtual.com/detalhes/ebook/6087055454aa8872fb666b4b
06/02/2023 09:11 wlldd_u1_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 13/25
A Pinacoteca é um belo museu de arte localizado na cidade de São Paulo, no Brasil. Seu acervo de mais de
9.000 obras pode ser acessado de qualquer lugar do mundo. Uma ótima oportunidade para re�etir sobre
estética e transformações na arte e design. Realize um tour virtual para saber mais.
História da arte e do design
Para conhecer melhor a história e os elementos que contribuíram para as atuais concepções do design
interativo, o livro História da arte e do design de Ariadne Catanzaro é um excelente recurso. Disponível
gratuitamente na biblioteca virtual.
INTRODUÇÃO
O mundo da comunicação passou por gigantescas mudanças nas últimas décadas. Com a chegada das mídias
digitais e a democratização do acesso à internet até o relacionamento social foi afetado. Nesta aula serão
discutidos diversos aspectos da criação de conteúdo com ênfase nas relações comerciais. A partir de conceitos
teóricos e cientí�cos, você aprenderá mais sobre o recente fenômeno do marketing de conteúdo, marketing
especí�co para consumo em celulares e a automação da informação. Nas mídias digitais, o design não é um
elemento isolado das outras informações, mas parte do conteúdo, tão importante quanto os textos. Por isso, se
você quer dominar a arte criativa com qualidade nas plataformas digitais, preste muita atenção aos temas
discutidos nesta aula.
MARKETING DE CONTEÚDO
O que o consumidor quer 
Quando você vai adquirir algum produto ou informação, quais são os critérios das suas escolhas? Dentre os
elementos que contribuem para a sua decisão, com certeza, as suas impressões sobre a marca ou empresa são
alguns dos mais importantes e é por isso que o marketing de conteúdo é hoje a mola propulsora do comércio
digital e presencial no mundo. 
Marketing de conteúdo é um conjunto de estratégias focada na criação de conteúdos especí�cos para os
usuários, com o intuito de desenvolver um relacionamento e facilitar o processo de aquisição de produtos ou
informações.
De acordo com Barger (2013), na era digital é importante que as empresas e seus pro�ssionais da criação de
conteúdo compreendam as expectativas dos clientes, muitas vezes externadas por meio das redes sociais.
Ainda a este respeito, Rez (2016, p.135) a�rma que "no caso do marketing de conteúdo, as vendas precisam
Aula 3
TENDÊNCIAS NAS MÍDIAS DIGITAIS
O mundo da comunicação passou por gigantescas mudanças nas últimas décadas. Com a
chegada das mídias digitais e a democratização do acesso à internet até o relacionamento social
foi afetado.
30 minutos

https://pinacoteca.org.br/visite/tour-virtual/https://biblioteca-virtual.com/detalhes/ebook/6087053f54aa8872fb666abd
06/02/2023 09:11 wlldd_u1_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 14/25
'acontecer de forma natural'. Existe um processo, uma sequência, o que chamamos de jornada de compra ou
funil de vendas. É o caminho que seu cliente passa até ter total con�ança em sua marca".
Figura 1 | Funil de vendas
Fonte: WSISTE (2022).
Alguns elementos da estrutura visual interferem signi�cativamente na recepção das informações do marketing
de conteúdo, por isso o design é peça fundamental no engajamento de uma marca, sua comunicação com o
público e produtos.
Identidade visual 
A identidade visual é composta pelos elementos grá�cos que buscam comunicar e divulgar as ideias e os
valores de uma marca. É ela que estabelece os vínculos e referências com o usuário. Uma boa identidade visual
pode ajudar a posicionar a marca e aumentar o seu engajamento. São elementos da identidade visual: nome,
logo, slogan, paleta de cores e tipogra�a, dentre outros. Marcas de sucesso como a Coca-Cola têm uma
identidade visual tão forte e bem de�nida que basta mencionar o nome para que as pessoas pensem em uma
série de qualidades, referências e características visuais como as cores símbolo – vermelho, branco e preto, e a
fonte utilizada nos rótulos de seus produtos principais.
Simplicidade e clareza 
O lema do design para mídias digitais é “menos é mais”. Além da tendência estética do minimalismo na
atualidade, existe o fato de que uma mesma campanha ou peça visual deve ser acessada por meio dos mais
diversos dispositivos e tamanhos de tela. Desta forma, um design com excesso de informações e que talvez
funcione bem em um computador ou televisão di�cilmente poderá ser apreciado em sua totalidade na
dimensão reduzida de um smartphone. A simplicidade no design torna dispensável o óbvio e busca a
signi�catividade de uma mensagem visual por meio de elementos semióticos e psicológicos.
Infogra�a 
A infogra�a nada mais é do que o binômio imagem + texto se complementando e ocupando importantes
espaços no processo de comunicação. Nas mídias digitais, as demandas por interatividade, concisão e
dinamismo fazem do infográ�co um importante recurso para a comunicação rápida e atraente de informações
complexas. A infogra�a é hoje amplamente utilizada no marketing, ensino, jornalismo e comércio.
Não existe marketing de conteúdo sem design. É o designer de conteúdo que apresenta de forma atrativa a
contextualização dos temas, informações e experiências oferecidas por uma marca. Mais do que uma
estratégia, ele é quem ajuda a chamar a atenção dos clientes e persuadi-los a permanecer em um

06/02/2023 09:11 wlldd_u1_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 15/25
relacionamento com aquela marca.
MOBILE MARKETING
Marketing para dispositivos móveis 
O acesso à internet por meio de dispositivos móveis tem crescido todos os anos. Segundo dados divulgados
pelo setor de telecomunicações do governo do Brasil (2020, [s. p.]), “em dezembro de 2020, o Brasil registrou
mais de 234 milhões de acessos móveis à internet. Os números de 2020 representam um aumento de 7,39
milhões em relação a 2019, o equivalente a 3,26%”. Isso representa um número de acessos superior à
população total do país que no ano de 2020 era de 212,6 milhões de habitantes.
Com o crescimento do consumo de informações por meio de celulares, uma das principais expressões do
marketing de conteúdo tem sido o mobile marketing, pensado preferencialmente para dispositivos móveis.
O mobile marketing é uma abordagem estratégica com o propósito de interatividade e relacionamento por
meio das funções de dispositivos mobile, que são celulares, tablets e demais aparelhos móveis com conexão à
internet. Segundo de�nição da Mobile Marketing Association (SOUZA, 2017, p. 6), trata-se do "marketing que
inclui propaganda, aplicativos, mensagens, comércio móvel (m-Commerce) e CRM (Customer Relationship
Management) em todos os tipos de dispositivos móveis, incluindo smartphones e tablets".
São ferramentas do mobile marketing: SMS e MMS - mensagens de texto e de media por meio de linha
telefônica, e-mails, aplicativos, QR Code e mídias sociais, sendo esta última a mais utilizada. À exceção do uso de
SMS e MMS – que apresentam maiores limitações aos recursos grá�cos, toda a comunicação no mobile
marketing tem como alicerce a comunicação visual e suas potencialidades para despertar o interesse do
usuário.
 Saiba mais
Acesse o infográ�co Mobile Marketing: O Futuro do Marketing Através dos Aparelhos Móveis para
conhecer mais detalhes sobe Mobile Marketing.
No contexto do marketing de conteúdo e do mobile marketing é importante destacar também o inbound
marketing, que é "uma estratégia que tem como objetivo atrair voluntariamente os consumidores para o site
da empresa. O Inbound Marketing possui 5 etapas essenciais que devem ser seguidas para se obter uma
estratégia de sucesso. São elas: atrair; converter; relacionar-se; vender; analisar" (COMARU, 2018, p. 3). Dentre
todas estas funções do inbound marketing, uma delas é muito especí�ca do design, trata-se do “atrair”.
Para um design e�ciente, é importante reduzir os excessos, aproveitar as peculiaridades das demandas e
realizar um bom posicionamento dos itens, consciente das particularidades do consumo por meio de
dispositivos de tamanhos reduzidos.
Segundo a designer K. Fonseca, uma estratégia de otimização do mobile marketing por meio do design é a
centralização das ações ou conteúdos mais importantes, da esquerda para a direita, considerando não apenas o
percurso óptico como o fato de que a maior parte da população mundial é destra e utiliza a mão direita para
manusear seus dispositivos móveis.

https://viverdeblog.com/mobile-marketing/
06/02/2023 09:11 wlldd_u1_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 16/25
Figura 2 | Posicionamento de itens de design no mobile
Fonte: Fonseca (2018, [s. p.]).
O baixo custo do mobile marketing, que dentre outras coisas dispensa gastos com impressões e outras
produções grá�cas é um dos fatores de vantagem que esta abordagem oferece. Para os autores Marco Pinto e
Célia Ramos (2014, p. 1380), "é então impossível ignorar as potencialidades do mobile marketing, pois pode
chegar aos consumidores 'a qualquer tempo, qualquer lugar, de qualquer forma', para além disso permite a
criação de mensagens personalizadas”.
Cabe ao design de conteúdo e mobile tornar as informações estruturadas e focadas na experiência do usuário,
tendo em perspectiva a realidade de que boa parte dos acessos e compras realizadas pela internet acontecem a
partir de dispositivos móveis na atualidade. Mais do que um elemento decorativo, o design é hoje parte
importante da informação. No contexto das novas mídias digitais é por meio da comunicação visual que é
arquitetada uma mensagem clara, objetiva e relevante.
AUTOMAÇÃO, BOTS E BIG DATA
Indústria 4.0 
A mais recente revolução tecnológica nos setores da indústria e da prestação de serviços foi o surgimento da
inteligência arti�cial. Por meio de técnicas de lógica, uso de nuvens para armazenamento de dados e operação
de grandes volumes de informação tem-se a Indústria 4.0, um novo degrau na história da evolução tecnológica.
A primeira revolução industrial teve início no século XVIII na Europa e é caracterizada pela inserção das
máquinas no sistema produtivo que até então era de manufatura. A segunda revolução é marcada pelo uso
cientí�co com o intuito de maximização da produção, com o uso da eletricidadee do petróleo, dentre outras
inovações. A terceira fase, também chamada de revolução tecno-cientí�ca é marcada pelos avanços da
eletrônica e informática nos processos industriais. Já a quarta revolução, ou Indústria 4.0 é “um conceito de
indústria proposto recentemente e que engloba as principais inovações tecnológicas dos campos de
automação, controle e tecnologia da informação, aplicadas aos processos de manufatura” (SILVEIRA, 2016 [s.
p.]).
Com a inserção da internet na indústria e nas cotidianidades humanas, tem-se o crescimento do uso da
inteligência arti�cial e da inteligência coletiva a partir do armazenamento e distribuição de grandes volumes de
dados, bem como da automação de diversos processos. Com o uso dos dispositivos móveis para acessar
informações surgiu um novo per�l de consumidor, caracterizado pelo consumo personalizado e in�uência da
experiência do usuário nos processos de decisão. Todos estes processos contribuíram com a aplicação da
inteligência arti�cial também no design, a partir da análise de grandes volumes de dados e automação de
diversos processos.

06/02/2023 09:11 wlldd_u1_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 17/25
 Saiba mais
Acesse o infográ�co A Revolução da Inteligência Arti�cial para conhecer mais como a tecnologia de
Inteligência Arti�cial (IA) está impulsionando a transformação dos negócios.
O design nas novas mídias digitais também se aplica a produtos de inteligência arti�cial que trabalham com big
data (grandes volumes de dados) e processos automatizados. É o design que torna um bot (robô virtual)
responsável pelo atendimento em chats automatizados, uma ferramenta simpática ao público ou não. Outro
exemplo disso é o dispositivo da Amazon, a Alexa. A Alexa utiliza princípios do machine learning e pode
aprender a desenvolver algumas tarefas com o mínimo de interferência possível. Ela também acessa a grandes
volumes de dados e �ltra informações. Atende a comandos de voz e é capaz de automatizar funções domésticas
como ligar lâmpadas e aparelhos eletrodomésticos com IoT (inteligência das coisas). Tudo isso em um design
suave, ergonômico, minimalista e confortável.
O design é uma importante parte da Indústria 4.0, pois integra diferentes tecnologias e conhecimento em
formatos intuitivos que facilitam a experiência.
Figura 3 | O design na Indústria 4.0
Fonte: Bossie; Santos (2021, [s. p.]).
O designer digital pode atuar nas mais diferentes áreas, desde os processos criativos de produtos até o design
de serviços, na interface de grandes bancos de dados ou na elaboração da aparência de chats automatizados.
Em todas estas e diversas outras possibilidades de atuação, é fundamental que o bom pro�ssional desta área
compreenda que tudo aquilo que ele elabora tem grande impacto nas percepções do público e principalmente
na experiência do usuário em relação à marca.

https://stefanini.com/pt-br/trends/artigos/revolucao-da-inteligencia-artificial
06/02/2023 09:11 wlldd_u1_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 18/25
VIDEOAULA
Nesta aula serão discutidos importantes tendências nas mídias digitais. Por meio de uma apresentação
expositiva serão demonstradas novas ferramentas e abordagens do mercado que estão diretamente ligadas
aos processos de design, como o marketing de conteúdo, o mobile marketing e o uso de inteligência arti�cial.
Pela discussão destes temas propõe-se a re�exão sobre as diferentes abordagens do design, que vão muito
além da mera tarefa de desenhar ou criar ou layouts.
Videoaula
Para visualizar o objeto, acesse seu material digital.
 Saiba mais
Marketing digital
Para aprofundar os seus conhecimentos sobre o marketing voltado às mídias digitais, uma ótima opção é a
obra Marketing digital de Renata Storti. Em apenas 208 páginas é possível ver diferentes perspectivas e
usos desta ferramenta que hoje ajuda a movimentar a economia no mundo inteiro. Disponível
gratuitamente na Biblioteca digital.
Histórias e acepções do design
Para compreender melhor a história do design, sua evolução e atual espaço na sociedade, a leitura do livro
de Catanzaro é uma excelente alternativa. Com o título Histórias e acepções do design, o trabalho de 240
páginas aborda diferentes momentos históricos do design, desde a primeira guerra mundial até a pós-
modernidade. Disponível gratuitamente na Biblioteca digital.
Criando chatbots
Em tempos de inteligência arti�cial e automação dos processos, o chatbots são uma tendência na
comunicação empresarial. Se quiser testar as possibilidades e os recursos existentes nesta ferramenta,
existem plataformas online com gratuidade temporária. Uma delas é a Cosmobots. Que tal desa�ar sua
criatividade e bolar um bot para uma empresa �ctícia?
INTRODUÇÃO
As mídias digitais acrescentaram ao design um novo e poderoso recurso: a interatividade. Junto com esta
potencialidade, surgem novas responsabilidades para o pro�ssional designer. Nesta aula, você vai aprender
importantes fundamentos para a criação de um visual atrativo, responsivo e bem executado para mídias
Aula 4
DESIGN DE INTERAÇÃO (IXD)
As mídias digitais acrescentaram ao design um novo e poderoso recurso: a interatividade. Junto
com esta potencialidade, surgem novas responsabilidades para o pro�ssional designer.
32 minutos

https://biblioteca-virtual.com/detalhes/ebook/6087050c54aa8872fb66696e
https://biblioteca-virtual.com/detalhes/ebook/6087054954aa8872fb666b02
https://cosmobots.io/
06/02/2023 09:11 wlldd_u1_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 19/25
digitais. Serão estudados os princípios da legibilidade, da funcionalidade e da aparência no design de interação.
O bom designer compreende a importância de transformar as demandas do usuário em estratégias
simpli�cadas de interação e estes serão alguns dos principais pilares das discussões do conteúdo dessa aula. Se
você quer conhecer os mais importantes recursos do design interativo, então preste atenção aos detalhes desta
exposição de conhecimentos.
LEGIBILIDADE DO DESIGN
Fácil compreensão 
Como você se sentiria se precisasse enviar uma mensagem por meio de um aplicativo, mas não conseguisse
enxergar onde �cam os botões de escrever e enviar as informações? E se tudo estivesse em um idioma que
você não compreende? Certamente, você desistiria após uma experiência tão ruim. Não é possível utilizar um
serviço ou produto cujo design é de difícil compreensão. 
Um dos principais princípios da interface grá�ca digital é a legibilidade e ela está diretamente ligada ao uso
estratégico das cores e da tipogra�a, dentre outros recursos. "O texto presente na interface deve apresentar
alto contraste para ser lido. Utilizar tamanhos de fonte que sejam su�cientemente adequadas e legíveis. Levar
em consideração as necessidades das pessoas mais velhas e os seus problemas de visão" (PREDEVELLO, 2011,
p. 93).
Para uma legibilidade e�ciente é importante ter atenção a diversos detalhes como: a escolha dos ícones, o uso
de imagens, cores e contrates, espaçamentos, uso de fontes e diversas outras nuances grá�cas.
Em relação às cores e contrastes, Kulpa (2009) faz as seguintes recomendações: utilizar no máximo sete cores
simultâneas; utilizar o fundo branco facilita o contraste, mas é preciso tomar cuidado porque em situações de
exposição por muito tempo pode causar cansaço aos olhos do usuário; o vermelho é e�ciente para chamar a
atenção, mas deve ser evitado como cor de fundo; a cor cinza é uma boa indicação para fundo de interfaces; o
amarelo é uma boa alternativa para indicação de ação; o verdeé a cor mais visível entre as primarias do RGB
(sistema de cores eletrônico, pela adição de luzes); é necessário ter cautela com a luminosidade e o brilho das
cores; cores complementares juntas podem ser difíceis de focar.
No que diz respeito à poluição visual, é importante lembrar que a legibilidade é facilitada pelo minimalismo e
alta pregnância. Quanto mais informações visuais em uma imagem, mais difícil é para o usuário encontrar as
informações de maior importância e concentrar-se nelas.
Em relação à tipogra�a, segundo Fontoura (2004), a legibilidade está associada à tipogra�a e alguns fatores são
importantes: desenho da letra, espaçamento entre as letras, tamanho das letras, entrelinhas e quebra de
visualização. Ou seja, para telas recomendam-se textos curtos, o uso de fontes sem serifas, sem grandes
espaços entre as linhas, com tamanho bom para a leitura, tendo em consideração o público-alvo, espaços de
entrelinha harmoniosos e um suporte adequado à visualização. Também deve-se evitar letras com muitos
efeitos artísticos ou caligrá�cos, especialmente quando for utilizar caixa alta (todas em maiúscula) pois isso
di�culta a visualização.
Figura 1 | Contraste, tipogra�a e poluição visual no design

06/02/2023 09:11 wlldd_u1_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 20/25
Fonte: elaborada pela autora.
A legibilidade também deve levar em conta questões de acessibilidade. Para Silva, Ferreira e Sacramento (2018),
a acessibilidade é um direito de todos os indivíduos e no design de produtos e serviços isso se estenda à
capacidade de qualquer pessoa poder aproveitar aquilo que é oferecido sem limitações associadas às
capacidades motoras, físicas, sociais e culturais. Por isso é muito importante que os designers de mídias digitais
considerem a importância e o impacto da acessibilidade nos processos de interação. É uma responsabilidade do
design de interação proporcionar uma experiência confortável e acessível para todos os seus usuários por meio
de uma boa legibilidade da interface.
FUNCIONALIDADE DO DESIGN
Fácil utilização 
É importante que o design interativo seja funcional, ou seja, o usuário deve conseguir fazer o que ele deseja. O
design precisa ter utilidade e resultados compreensíveis para que a experiência seja a melhor possível.
Fundamentado nestes princípios, o funcionalismo foi um importante movimento das escolas artísticas e de
design. O estilo modernista marcou esta in�uência por meio de frases como "a forma segue a função" de Louis
Sullivan e "menos é mais" de Mies van der Rohe. Neste contexto, o design é que se adequa às funcionalidades
de um projeto e não o contrário.
Com o aumento da produção industrial a partir da Segunda Guerra Mundial, surge uma nova perspectiva do
design, ele passa a diferenciar produtos de uma mesma função e natureza. Medeiros (2012, p. 33) observa que
“"defronte as inúmeras transformações a partir da segunda metade do século XX, o estilo funcionalista começou
a sofrer rupturas, contradições e novas formas e contraculturas surgiram". A partir da quarta revolução
industrial, o funcionalismo no design cede espaço para a demanda por projetos segmentados e personalizados,
com foco na experiência do usuário. É importante ressaltar que isso não signi�ca a desvalorização das
funcionalidades pelo design, mas trata-se de um processo de uso estratégico dos recursos, de dar melhor
sentido à função da forma, uma vez que "a produção em série supre o desejo de consumo, desejos de um
grupo e uma necessidade comum, mas o desejo de identidade a inda é latente dentro do consumidor”
(MEDEIROS, 2012, p. 36).

06/02/2023 09:11 wlldd_u1_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 21/25
É importante que o designer de interação domine não apenas os conceitos da comunicação visual, elementos
grá�cos e estética, mas que compreenda os processos de desenvolvimento e os propósitos dos produtos ou
serviços oferecidos. O design de interação é também experiencial. Ele não precisa apresentar todas as
funcionalidades de uma vez, mas deve oferecer possibilidades de uma navegação e exploração intuitiva para o
usuário. Um smartphone, por exemplo, não demonstra em sua tela inicial tudo o que é capaz de fazer, mas até
uma criança pode explorar seus recursos a partir de um bom design interativo.
A usabilidade é uma grande aliada da funcionalidade no design de interação, pois diz respeito à navegabilidade
e facilidade que o usuário tem para encontrar os recursos que necessita em uma mídia digital.
Figura 2 | Metas de usabilidade
Fonte: Preece, Rogers e Sharp (2005, p. 41).
É a usabilidade que se preocupa com os meios de manipulação do sistema pelo usuário, ao passo que a
funcionalidade, de acordo com Rosson e Carroll (2002), determina o que pode ser feito neste sistema, sendo a
essência da interatividade e por isso buscando responder aos objetivos e questões principais do usuário.
O design de interação é capaz de unir com maestria função e forma, atribuindo a cada uma delas usabilidade
estratégica e sentidos especí�cos nos sistemas que integram. Trata-se da delicada arte de integrar propósito,
meio e forma com o intuito de oferecer ao usuário uma experiência singular e agradável.
APARÊNCIA, BELEZA E INTERAÇÃO
Agradável de ver 
Imagine que, depois de um longo dia de trabalho, você esteja voltando para a casa com fome e muito cansado.
No caminho, você se depara com os dois últimos restaurantes abertos, um é bem iluminado, com a fachada
nova, grandes janelas de vidro e um interior arrumado, já o outro tem uma fachada manchada, mesas de
plástico sem forro e sinais de pouco cuidado com a limpeza no interior. Qual deles você escolheria para

06/02/2023 09:11 wlldd_u1_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 22/25
comprar uma refeição? Muito provavelmente, o primeiro. A�nal, a aparência não apenas in�uenciaria na sua
decisão como também traria consigo alguns valores sobre higiene e qualidade do produto a ser adquirido, no
caso, o seu alimento.
Na �loso�a kantiana, a estética é de�nida como uma experiência sensorial e baseada no prazer desinteressado.
Ao contrário do pensamento de Sócrates que via uma �nalidade na beleza dos objetos, a estética kantiana parte
do pressuposto de que "o julgamento de gosto ou estético não é algo que particulariza o indivíduo, ou seja, não
é próprio de cada um, já que depende do jogo de imaginação e entendimento" (SILVA, 2017, p. 35).
As pessoas são atraídas por aquilo que acham belo, por isso é fundamental que o design seja atraente e
agradável ao público. "A aparência visual é literalmente a primeira coisa que o usuário vê quando entra em um
site e visuais atraentes são uma grande oportunidade de estabelecer a credibilidade" (NIELSEN, 2000, p. 92).
Mais do que uma mera preocupação com a beleza, a estética no design de interação busca adequar a aparência
à proposta de um trabalho de forma que ele provoque prazer e boas sensações ao ser visualizada. Segundo
Patrick Jordan, autor do livro Designing Pleasurable Products, existe uma ordem de prioridades nas qualidades
de um produto e elas são: funcionalidade, usabilidade e, por último, prazer ou emoção. Mesmo que a aparência
seja a última prioridade na pirâmide proposta por Jordan, o autor observa que um design bonito ou agradável
pode tornar o usuário mais tolerante a possíveis falhas na funcionalidade ou usabilidade de um projeto.
Existe um estudo na psicologia intitulado halo e�ect que trabalha com o princípio da primeira impressão.
Segundo Edward Thorndike, o primeiro a discutireste fenômeno, as primeiras percepções sobre algo afetam os
demais julgamentos sobre aquela mesma coisa ou pessoa. De acordo com diversas pesquisas sobre o tema
(AELA, 2020, [s. p.]) "leva-se cerca de 0,05 segundos para que o usuário forme uma opinião sobre a sua interface
— se ele gosta ou não, se continua ou não. Em 0,05 segundos não há tempo su�ciente para se fazer uma
avaliação detalhada dos aspectos da interface, como o conteúdo. O único aspecto percebido é o visual e se ele é
atrativo ou não". Isso signi�ca que, embora a aparência de um projeto não seja o objetivo principal, de acordo
com a teoria do halo e�ect, ela é o que determina se o usuário vai permanecer ou não naquela experiência.
Assim como a fachada de uma loja in�uencia nas intenções do consumidor de entrar ou não, a aparência do
design de uma mídia digital tem grande impacto nos processos decisivos e na experiência do usuário. Não se
trata de um detalhe supér�uo, a�nal existe certa verdade cientí�ca no ditado “a primeira impressão é a que
�ca”.
VIDEOAULA
Nesta aula são discutidos importantes fundamentos do design de interação. Por meio de uma perspectiva
expositiva e dialógica, são apresentadas abordagens que podem facilitar a legibilidade, compreensão,
aproveitamento de experiência e apreciação do design de interação. O vídeo demonstra que o design de
interação exige do pro�ssional mais do que o conhecimento de elementos da comunicação visual, é necessário
dominar também princípios técnicos do desenvolvimento de mídias digitais. 
Videoaula
Para visualizar o objeto, acesse seu material digital.
 Saiba mais
Cultura do desing

06/02/2023 09:11 wlldd_u1_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 23/25
Quer saber um pouco mais sobre regras da tipogra�a e suas aplicações? Na página do Design Culture
você pode encontrar bons exemplos do que fazer e o que evitar.
Interação humano-computador (IHC)
Para ampliar as re�exões sobre design de interação, interface e as relações humano-computador, vale a
pena conferir a obra Interação humano-computador de Everson Morais. São 160 páginas de discussão
sobre estes temas e estão disponíveis gratuitamente na Biblioteca digital.
História dos padrões de beleza
Os padrões estéticos mudaram muito ao longo da história. No rápido vídeo Os padrões de beleza pela
história da série “Conexões Históricas” é possível acompanhar re�exões históricas e neurológicas sobre os
padrões de beleza e atração ao longo do tempo. Com uma linguagem dinâmica e simples, o material está
disponível no Youtube.
Aula 1
BARROS, C. M.; CAFÉ, L. Estudos da semiótica na ciência da informação: relatos de interdisciplinaridades.
Perspectivas em Ciência da Informação, n. 3, v. 17, p. 18-33, 2012.
CAGNIN, G.; ROCHA, P. R. O estudo da cor na criação de ambientes. Revista de Iniciação Cientí�ca,
Tecnológica e Artística Edição Temática em Comunicação, Arquitetura e Design, São Paulo, n. 2, v. 7. mar.
de 2019. Disponível em:
http://www1.sp.senac.br/hotsites/blogs/revistainiciacao/wpcontent/uploads/2019/03/231_IC_ArtigoRevisado.pdf
. Acesso em: 2 fev. 2022.
ENGELMANN, A. A psicologia da Gestalt e a ciência empírica contemporânea. Psicologia: Teoria e Pesquisa
[online]. 2002, v. 18, n. 1, pp. 1-16. Disponível em: https://doi.org/10.1590/S0102-37722002000100002. Acesso
em: 5 fev. 2022.
EPSTEIN, I. O signo. São Paulo: Ática, 1997.
FARINA, M.; PEREZ, C.; BASTOS, D. Psicodinâmica das cores em comunicação. 5 ed. rev. e ampl. São Paulo:
Edgard Blücher, 2006.
MENDES, H. 2020. Marketing digital 360. 8 princípios da Gestalt para você criar bons conteúdos visuais.
Disponível em: https://marketingdigital360.com.br/8-principios-da-gestalt/. Acesso em: 7 fev. 2022.
Aula 2
ARANTES, P. Interestética: em busca de um novo paradigma estético na era digital. In: Congresso Brasileiro de
Ciências da Comunicação, 27, 2004, Porto Alegre. Anais... São Paulo: Intercom, 2004.
BATISTA, C.; ULBRICHT, V. Informação Personalizada no Web Site "Diferente todo mundo é". Infodesign (SBDI.
Online), v. 4, p. 29-38, 2007.
REFERÊNCIAS
7 minutos

https://designculture.com.br/obedecer-as-regras-tipograficas
https://biblioteca-virtual.com/detalhes/ebook/6087052f54aa8872fb666a52
https://www.youtube.com/watch?v=rVeXkr1XE9g
http://www1.sp.senac.br/hotsites/blogs/revistainiciacao/wpcontent/uploads/2019/03/231_IC_ArtigoRevisado.pdf
http://www1.sp.senac.br/hotsites/blogs/revistainiciacao/wpcontent/uploads/2019/03/231_IC_ArtigoRevisado.pdf
http://www1.sp.senac.br/hotsites/blogs/revistainiciacao/wpcontent/uploads/2019/03/231_IC_ArtigoRevisado.pdf
06/02/2023 09:11 wlldd_u1_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 24/25
BENJAMIN, W. A obra de arte na era de sua reprodutibilidade técnica. In: Obras escolhidas. Magia e Técnica,
Arte e Política, v. 1, 6 ed. Trad. Sérgio Paulo Rouanet. São Paulo: Brasiliense, 1993.
CAMARGO, M. H. As estéticas e suas de�nições da arte. Revista Cientí�ca/FAP, [S.l.], jun., p.1-15, 2009.
Disponível em: http://periodicos.unespar.edu.br/index.php/ revistacienti�ca/article/view/1593. Acesso em: 10
fev. 2022.
GUATTARI, F. Caosmose. Rio de Janeiro: Ed. 34, 1992.
KANT, I. Crítica da faculdade do juízo. Trad. Valério Rohden e Antônio Marques. 2. ed. Rio de Janeiro: Forense
Universitária, 1995.
KOCH, N. P. Software Engineering for Adaptive Hypermedia Systems: Reference Model, Modeling
Techniques and Development Process. Munich. Thesis (doctor of the Natural Sciences at the Faculty for
Mathematics and Computer Science), Ludwig Maximilians University Munich. 2000. Disponível em:
http//:qqwww.pst.informatik.unimuenchen.de/personen/kochn/thesis.html. Acesso em: 10 fev. 2022.
LABORDE, A. A Mais Bella do Rio Grande: um estudo sobre as relações de gênero no universo dos concursos
de beleza na década de 70. Rio Grande: FURG, 2004. (Monogra�a de Pós-Graduação).
QUÉAU, P. Metaxu: théorie de l’art intermediaire. Paris: Champ Vallon, 1985.
SERIEDESIGN. E-commerce - Personalização, seu cliente jamais te esquecerá. 2018. Disponível em:
https://seriedesign.com.br/personalizacao-fator-decisivo/> Acesso em: 10 fev. 2022.
Aula 3
BARGER, C. O estrategista em mídias sociais. 1 ed. São Paulo: DVS, 2013.
BOSSIE, C.; SANTOS, M. Qual a relação do Design de Serviços, a UX e a Indústria 4.0? 2021. Disponível em:
https://www.aquare.la/qual-a-relacao-do-design-de-servicos-a-ux-e-a-industria-4-0/. Acesso em 13 fev. 2022.
BRASIL. Ministério da Comunicação. Brasil registrou mais de 234 milhões de acessos móveis em 2020.
Disponível em: https://www.gov.br/pt-br/noticias/transito-e-transportes/2021/05/brasil-registrou-mais-de-234-
milhoes-de-acessos-moveis-em-2020. Acesso em: 11 fev. 2022.
CARVALHO, H. Infográ�co Mobile Marketing: O Futuro do Marketing Através dos Aparelhos Móveis. Viver de
Blog. Disponível em: https://viverdeblog.com/mobile-marketing/. Acesso em: 11 fev. 2022.
COMARU, L. F. Uma análise sobre o uso do inbound marketing como estratégia para a prospecção de novos
clientes nas mídias sociais. 2018. Disponível em:
https://semanaacademica.org.br/system/�les/artigos/uma_analise_sobre_o_uso_do_inbound_marketing_como_e
strategia_para_prospeccao_de_novos_clientes_nas_midias_sociais.pdf. Acesso em: 11 fev. 2022.
FONSECA, K. Mobile design: 5 boas práticas para desenhar interfaces. Disponível em:
https://brasil.uxdesign.cc/mobile-design-5-boas-práticas-para-desenhar-interfaces-e0bf40c6d454. Acesso em: 11
fev. 2022.
PINTO, M.; RAMOS, C. Mobile Marketing: A nova abordagem dos marketeers e dos novos turistas. Revista
GEINTEC. 4. 1376 -1387. 10.7198/S2237-0722201400050007. Faro, 2014.
REZ, R. Marketing de conteúdo: a moeda do século XXI. São Paulo: DVS, 2016.

https://conteudo.colaboraread.com.br/202202/EAD/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO_DIGITAL/U1/ARANTES,%20P.%20Interest%C3%A9tica:%20em%20busca%20de%20um%20novo%20paradigma%20est%C3%A9tico%20na%20era%20digital.%20In:%20Congresso%20Brasileiro%20de%20Ci%C3%AAncias%20da%20Comunica%C3%A7%C3%A3o,%2027,%202004,%20Porto%20Alegre.%20Anais...%20S%C3%A3o%20Paulo:%20Intercom,%202004.%20%20BATISTA,%20C.;%20ULBRICHT,%20V.%20Informa%C3%A7%C3%A3o%20Personalizada%20no%20Web%20Site%20%22Diferente%20todo%20mundo%20%C3%A9%22.%20Infodesign%20(SBDI.%20Online),%20v.%204,%20p.%2029-38,%202007.%20%20BENJAMIN,%20W.%20A%20obra%20de%20arte%20na%20era%20de%20sua%20reprodutibilidade%20t%C3%A9cnica.%20In:%20Obras%20escolhidas.%20Magia%20e%20T%C3%A9cnica,%20Arte%20e%20Pol%C3%ADtica,%20v.%201,%206%20ed.%20Trad.%20S%C3%A9rgio%20Paulo%20Rouanet.%20S%C3%A3o%20Paulo:%20Brasiliense,%201993.%20%20CAMARGO,%20M.%20H.%20As%20est%C3%A9ticas%20e%20suas%20defini%C3%A7%C3%B5es%20da%20arte.%20Revista%20Cient%C3%ADfica/FAP,%20[S.l.],%20jun.,%20p.1-15,%202009.%20Dispon%C3%ADvel%20em:%20http://periodicos.unespar.edu.br/index.php/%20revistacientifica/article/view/1593.%20Acesso%20em:%2010%20fev.%202022.%20%20GUATTARI,%20F.%20Caosmose.%20Rio%20de%20Janeiro:%20Ed.%2034,%201992.%20%20KANT,%20I.%20Cr%C3%ADtica%20da%20faculdade%20do%20ju%C3%ADzo.%20Trad.%20Val%C3%A9rio%20Rohden%20e%20Ant%C3%B4nio%20Marques.%202.%20ed.%20Rio%20de%20Janeiro:%20Forense%20Universit%C3%A1ria,%201995.%20%20KOCH,%20N.%20P.%20Software%20Engineering%20for%20Adaptive%20Hypermedia%20Systems:%20Reference%20Model,%20Modeling%20Techniques%20and%20Development%20Process.%20Munich.%20Thesis%20(doctor%20of%20the%20Natural%20Sciences%20at%20the%20Faculty%20for%20Mathematics%20and%20Computer%20Science),%20Ludwig%20Maximilians%20University%20Munich.%202000.%20Dispon%C3%ADvel%20em:%20http:qqwww.pst.informatik.unimuenchen.de/personen/kochn/thesis.html.%20Acesso%20em:%2010%20fev.%202022.%20%20LABORDE,%20A.%20A%20Mais%20Bella%20do%20Rio%20Grande:%20um%20estudo%20sobre%20as%20rela%C3%A7%C3%B5es%20de%20g%C3%AAnero%20no%20universo%20dos%20concursos%20de%20beleza%20na%20d%C3%A9cada%20de%2070.%20Rio%20Grande:%20FURG,%202004.%20(Monografia%20de%20P%C3%B3s-Gradua%C3%A7%C3%A3o).%20%20QU%C3%89AU,%20P.%20Metaxu:%20th%C3%A9orie%20de%20l%E2%80%99art%20intermediaire.%20Paris:%20Champ%20Vallon,%201985.%20%20SERIEDESIGN.%20E-commerce%20-%20Personaliza%C3%A7%C3%A3o,%20seu%20cliente%20jamais%20te%20esquecer%C3%A1.%202018.%20Dispon%C3%ADvel%20em:%20https://seriedesign.com.br/personalizacao-fator-decisivo%3E%3C/a%3E%20Acesso%20em:%2010%20fev.%202022.https://conteudo.colaboraread.com.br/202202/EAD/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO_DIGITAL/U1/ARANTES,%20P.%20Interest%C3%A9tica:%20em%20busca%20de%20um%20novo%20paradigma%20est%C3%A9tico%20na%20era%20digital.%20In:%20Congresso%20Brasileiro%20de%20Ci%C3%AAncias%20da%20Comunica%C3%A7%C3%A3o,%2027,%202004,%20Porto%20Alegre.%20Anais...%20S%C3%A3o%20Paulo:%20Intercom,%202004.%20%20BATISTA,%20C.;%20ULBRICHT,%20V.%20Informa%C3%A7%C3%A3o%20Personalizada%20no%20Web%20Site%20%22Diferente%20todo%20mundo%20%C3%A9%22.%20Infodesign%20(SBDI.%20Online),%20v.%204,%20p.%2029-38,%202007.%20%20BENJAMIN,%20W.%20A%20obra%20de%20arte%20na%20era%20de%20sua%20reprodutibilidade%20t%C3%A9cnica.%20In:%20Obras%20escolhidas.%20Magia%20e%20T%C3%A9cnica,%20Arte%20e%20Pol%C3%ADtica,%20v.%201,%206%20ed.%20Trad.%20S%C3%A9rgio%20Paulo%20Rouanet.%20S%C3%A3o%20Paulo:%20Brasiliense,%201993.%20%20CAMARGO,%20M.%20H.%20As%20est%C3%A9ticas%20e%20suas%20defini%C3%A7%C3%B5es%20da%20arte.%20Revista%20Cient%C3%ADfica/FAP,%20[S.l.],%20jun.,%20p.1-15,%202009.%20Dispon%C3%ADvel%20em:%20http://periodicos.unespar.edu.br/index.php/%20revistacientifica/article/view/1593.%20Acesso%20em:%2010%20fev.%202022.%20%20GUATTARI,%20F.%20Caosmose.%20Rio%20de%20Janeiro:%20Ed.%2034,%201992.%20%20KANT,%20I.%20Cr%C3%ADtica%20da%20faculdade%20do%20ju%C3%ADzo.%20Trad.%20Val%C3%A9rio%20Rohden%20e%20Ant%C3%B4nio%20Marques.%202.%20ed.%20Rio%20de%20Janeiro:%20Forense%20Universit%C3%A1ria,%201995.%20%20KOCH,%20N.%20P.%20Software%20Engineering%20for%20Adaptive%20Hypermedia%20Systems:%20Reference%20Model,%20Modeling%20Techniques%20and%20Development%20Process.%20Munich.%20Thesis%20(doctor%20of%20the%20Natural%20Sciences%20at%20the%20Faculty%20for%20Mathematics%20and%20Computer%20Science),%20Ludwig%20Maximilians%20University%20Munich.%202000.%20Dispon%C3%ADvel%20em:%20http:qqwww.pst.informatik.unimuenchen.de/personen/kochn/thesis.html.%20Acesso%20em:%2010%20fev.%202022.%20%20LABORDE,%20A.%20A%20Mais%20Bella%20do%20Rio%20Grande:%20um%20estudo%20sobre%20as%20rela%C3%A7%C3%B5es%20de%20g%C3%AAnero%20no%20universo%20dos%20concursos%20de%20beleza%20na%20d%C3%A9cada%20de%2070.%20Rio%20Grande:%20FURG,%202004.%20(Monografia%20de%20P%C3%B3s-Gradua%C3%A7%C3%A3o).%20%20QU%C3%89AU,%20P.%20Metaxu:%20th%C3%A9orie%20de%20l%E2%80%99art%20intermediaire.%20Paris:%20Champ%20Vallon,%201985.%20%20SERIEDESIGN.%20E-commerce%20-%20Personaliza%C3%A7%C3%A3o,%20seu%20cliente%20jamais%20te%20esquecer%C3%A1.%202018.%20Dispon%C3%ADvel%20em:%20https://seriedesign.com.br/personalizacao-fator-decisivo%3E%3C/a%3E%20Acesso%20em:%2010%20fev.%202022.
https://seriedesign.com.br/personalizacao-fator-decisivo/
https://www.aquare.la/qual-a-relacao-do-design-de-servicos-a-ux-e-a-industria-4-0/
https://www.gov.br/pt-br/noticias/transito-e-transportes/2021/05/brasil-registrou-mais-de-234-milhoes-de-acessos-moveis-em-2020
https://semanaacademica.org.br/system/files/artigos/uma_analise_sobre_o_uso_do_inbound_marketing_como_estrategia_para_prospeccao_de_novos_clientes_nas_midias_sociais.pdf
https://brasil.uxdesign.cc/mobile-design-5-boas-pr%C3%A1ticas-para-desenhar-interfaces-e0bf40c6d454
06/02/2023 09:11 wlldd_u1_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 25/25
SILVEIRA, C. B. Indústria 4.0. 2016. Disponível em: http://www.citisystems.com.br/indústria-4-0/. Acesso em: 11
fev. 2022.
SOUZA, S. S. C. Mobile marketing e a internet das coisas. 2017. 14 f. Trabalho de Conclusão de Curso
(Especialização em Marketing Digital e Comércio Eletrônico) – Universidade do Sul de Santa Catarina, Tubarão,
2017a. Disponível em: http://www.riuni.unisul.br/handle/12345/4895. Acesso em: 15 fev. 2022
STEFANINI Group. A revolução da inteligência arti�cial - Infográ�co. Disponível em: https://stefanini.com/pt-
br/trends/artigos/revolucao-da-inteligencia-arti�cial. Acesso em: 11 fev. 2022.
WSITE Brasil. O que é funil de vendas. Disponível em:
https://www.wsitebrasil.com.br/blog/post/empreendedorismo/o-que-e-funil-de-vendas/37. Acesso em: 19 fev.
2022.
Aula 4
AELA. Design e cursos. Halo e�ect e o impacto visual em UX Design. 2020. Disponível em:
https://aelaschool.com/designvisual/halo-e�ect-e-ux-design/> Acesso em: 14 fev. 2022
FONTOURA, A. M. Vade-mécum de tipogra�a. Curitiba: Champagnat, 2004. 86p.
KULPA, C. A contribuição de um modelo de cores na usabilidade das interfaces computacionais dos
usuários de baixa visão. Universidade Federal do Rio Grande do Sul, Programa de Pós-Graduação em Design.
Porto Alegre, 2009.
MEDEIROS, D. P. Design de produto e processos de projetos com ênfase na customização pós-produção.
Dissertação de mestrado. PGDESIGN – UFRGS, Porto Alegre, 2012.
NIELSEN, J. Projetando web sites. Rio de Janeiro: Campus, 2000.
PREECE, J.; ROGERS, Y.; SHARP, H. Design de interação: além da interação humano-computador. Bookman: São
Paulo, 2005.
PREVEDELLO, C. F. Design de interação e motivação nos projetos de interface para objetos de
aprendizagem para EaD. 2011. Dissertação (Mestrado em Design) - Universidade Federal do Rio Grande do sul,
Porto Alegre, 2011.
ROSSON, M.; CARROLL, J. Usability engineering: scenario-based development of human-computer
interaction. São Francisco: Morgan Kaufmann, 2002.
SILVA, C.; FERREIRA, S.; SACRAMENTO, C. Mobile Application Accessibility in the Context of Visually
Impaired Users [internet]. Association for Computing Machinery New York NY United States; 2018. Disponível
em: https://dl.acm.org/doi/10.1145/3274192.3274224. Acesso em: 23 jan. 2021.
SILVA, W. P. S. Estética visual e experiência do usuário em interfaces humano-computador: um estudo de
caso de sistemas de gestão de atividades de ensino (SiGAEs). 2017. 175 f. Dissertação (Mestrado em Design).
Universidade Federal do Maranhão, São Luís, 2017.

http://www.citisystems.com.br/ind%C3%BAstria-4-0/
https://stefanini.com/pt-br/trends/artigos/revolucao-da-inteligencia-artificial
https://www.wsitebrasil.com.br/blog/post/empreendedorismo/o-que-e-funil-de-vendas/37
https://aelaschool.com/designvisual/halo-effect-e-ux-design/
https://dl.acm.org/doi/10.1145/3274192.3274224
06/02/2023 09:12 wlldd_u2_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 1/25
Imprimir
Aula 1
PROCESSOS CRIATIVOS

DESIGN PARA MÍDIAS DIGITAIS
INTERATIVAS: O DESIGN DE
INTERFACES (UI)
102 minutos
Aula 1 - Processos criativos
Aula 2 - Princípios e elementos do design
Aula 3 - Design de interface do usuário (UI)
Aula 4 - Ferramentas e plataformas para design de interface do
usuário (UI)
Referências
06/02/2023 09:12 wlldd_u2_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 2/25
INTRODUÇÃO
Para algumas pessoas, a criatividade é um fator ligado unicamente ao talento e à espontaneidade, mas a
verdade é que os processos criativos podem e devem ser desenvolvidos a partir de métodos, estratégias,
conceitos e ferramentas especí�cas. Nesta aula serão discutidas abordagens que podem contribuir com a
criação e�caz de designs de interação. Por meio de um planejamento bem executado, de uma identidade visual
sólida e de técnicas do design thinking serão apresentadas diferentes possibilidades de fomento à criatividade
para melhorar o desenvolvimento de interfaces interativas agradáveis aos usuários das mídias digitais. As
grandes ideias no design não são um golpe de sorte, mas sim a junção técnica e cientí�ca de conhecimentos
aprofundados sobre a área. 
METODOLOGIAS DE PLANEJAMENTO
Planejar para alcançar
Imagine que alguém resolva construir uma casa. No começo, a ideia era fazer apenas dois quartos, depois, no
meio da execução, a pessoa decide acrescentar mais um, passado algum tempoela resolve acrescentar uma
piscina e percebe que já não tem espaço no lote para isso e então resolve derrubar um dos quartos já prontos
para construir a área de lazer. Uma obra sem planejamento é algo que pode resultar em prejuízos �nanceiros e
desperdício de tempo. Isso também se aplica ao design e aos seus processos criativos.
O planejamento de um projeto é parte essencial do processo. Para Heldman (2005), existem diversas vantagens
na elaboração de um bom planejamento, dentre elas destacam-se: melhor desempenho geral; redução dos
prazos; maior qualidade; comunicação mais e�caz; metodologias padronizadas; relatórios coerentes; execução
mais precisa.
Uma importante metodologia de planejamento é o design estratégico que tem ênfase na inovação e
sustentabilidade como parte do processo. Para Meroni (2008, p. 1), o design estratégico é sobre evolução, ele
"confere a entidades sociais e de mercado um sistema de regras, crenças, valores e ferramentas para lidar com
o ambiente externo, podendo assim evoluir (e assim sobreviver com sucesso), bem como manter e desenvolver
sua própria identidade. E, ao fazer isso, in�uenciar e mudar o ambiente também".
Para Meroni (apud TELLUS, 2021) existem oito pilares para o uso do design estratégico. São eles:
1. Sistema produto-serviço: integração de produtos, serviços e comunicação, transformando a identidade
da empresa em um diferencial;
2. Evolução: uma inovação com o propósito de trazer avanços ao sistema;
3. De�nição e solução de problemas: para solucionar problemas é preciso identi�cá-los;
4. Inovação social: mudanças culturais com ênfase na sustentabilidade e avanço tecnológico;
5. Cenários: projeções visuais sobre o futuro;
6. Codesign: inclusão de outros atores nos processos e possibilidade de cocriação;
Nesta aula serão discutidas abordagens que podem contribuir com a criação e�caz de designs de
interação, por meio de um planejamento bem executado, de uma identidade visual sólida e de
técnicas do design thinking.
27 minutos

06/02/2023 09:12 wlldd_u2_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 3/25
7. Diálogo estratégico: discussão coletiva do projeto e visão compartilhada de futuro;
8. Construção de capacidades: preparação para contextos de mudanças e necessidade de adequação.
O design estratégico, além de ser uma excelente ferramenta metodológica para o planejamento e execução,
também oferece a vantagem de uma perspectiva inovadora e sustentável.
Outra importante abordagem é A XDM (eXtensible Design Methods), uma metodologia de design que pode
facilitar na organização e no desenvolvimento de projetos. Criada por discentes e docentes da Universidade
Federal de Pernambuco (UFPE), propõe uma ordem cíclica para os projetos que permite alterações e correções
em diversas etapas.
Figura 1 | Métodos de design extensível
Fonte: Pontes (2013).
A XDM trabalha com 5 abordagens:
1. Exploração do problema: de�nição das motivações, projeção de mercado e comparação com a
concorrência;
2. Geração de alternativas: tempestade de ideias (brainstorm), construção colaborativa, analogias e
metáforas a partir da pesquisa de produtos já desenvolvidos;
3. Avaliação evolutiva: o designer nessa etapa faz experimentações com esboços buscando identi�car
qualidades e possíveis problemas do produto em desenvolvimento;
4. Avaliação de alternativas: por meio de uma busca sistemática por respostas são analisadas soluções para
problemas com propostas de intervenções estratégicas;
5. Descrição da solução: storyboard de uso do produto �nal com diferentes possibilidades de aplicação.

06/02/2023 09:12 wlldd_u2_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 4/25
Existem outras ferramentas metodológicas que podem ser aplicadas ao design, mas estas duas são algumas
das mais modernas e e�cientes. O uso de metodologias de planejamento é importante e pode facilitar os
processos criativos e a execução do design de interação para mídias digitais.
CONCEITOS DE IDENTIDADE VISUAL E MARCA
Marca e identidade visual
Uma característica de um bom design é quando os usuários e até os não usuários conseguem reconhecer
rapidamente um produto ou marca a partir de elementos da identidade visual, como cores, logo, slogan ou
outros. É importante saber que marca e identidade visual são duas coisas diferentes, mas que dependem muito
uma da outra.
Na literatura cientí�ca existem diversas percepções e de�nições do conceito de marca.
Quadro 1 | De�nições do conceito de marca
Contexto Autor(es) De�nição de marca Conceito

06/02/2023 09:12 wlldd_u2_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 5/25
Global
Conejo e
Wooliscrof (2015)
"Marcas são construtos multidimensionais
complexos, com vários graus de signi�cado,
independência, co-criação e escopo. Marcas são
sistemas semióticos de marketing que geram
valor para aqueles em contato direto ou indireto,
para a sociedade e para o ambiente mais amplo,
através do intercâmbio de signi�cado co-criado"
(p. 1)
Sistema semiótico
De Chernatony
(2010)
"... processo contínuo, uma interface dinâmica
entre ações organizacionais e interpretações de
consumidores ao redor de um conjunto de
valores funcionais e emocionais que permitem
uma promessa de experiência única e desejada."
Perspectiva dinâmica
Kapferer (2012)
"... um nome que simboliza um engajamento, uma
cruzada ou um comprometimento de longo prazo
com um conjunto especí�co de valores
incorporados a produtos, serviços e
comportamento, que faz com que a organização,
pessoa ou produto se sobressaia e se destaque"
(p. 12)
Relacionamento
Keller (1998)
"Marca é um conjunto dessas associações na
memória do consumidor que contribui para que
este tenha maior percepção de valor do produto
ou serviço, valor esse incorporado quando tais
associações forem únicas, salientes e positivas"
Associações mentais
Sern (2006)
Natureza da marca (signi�cado literal ou
metafórico). Função linguística (pronome - pessoa,
local, produto - ou verbo - signi�cados). Locus de
representatividade (físico ou mental). Valência da
percepção da marca (positiva ou negativa)
Linguístico

06/02/2023 09:12 wlldd_u2_des_mid_dig_II
https://colaboraread.com.br/integracaoAlgetec/index?usuarioEmail=morettitamy09%40gmail.com&usuarioNome=TAMY+MORETTI+RODRIGUES+E+SILVA&disciplinaDescricao=DESIGN+PARA+MÍDIAS+DIGITAI… 6/25
Khauaja e Prado
(2008)
"A marca assume uma identidade, uma forma de
expressão que faz parte do cotidiano das pessoas,
as quais têm em mente um nome ao lembrar de
um produto ou serviço, e, ao mesmo tempo,
representa o jeito de ser da empresa e os seus
princípios"
Identitário
Nunes e Haigh
(2003)
"As marcas são ativos �nanceiros e, sobretudo,
estratégicos, haja vista seu poder de in�uenciar
consumidores, parceiros, colaboradores, e de
interferir nos canais de vendas e distribuição e até
nas condições e termos de fornecimento. Além
disso, a marca mobiliza interesse dos investidores
e pode transformar a performance da
organização e seu resultado �nanciero"
Financeiro
Perez (2004)
"marca é uma conexão simbólica e efetiva
estabelecida entre uma organização, sua oferta
material, intangível e aspiracional e as pessoas
para as quais se destina" (p. 10)
Recurso simbólico
Ribeiro (2006)
"... a melhor de�nição atribuída a uma marca é
compará-la a uma cebola. Cada parte da cebola é
equivalente a um contato do consumidor com a
marca em questão, ou seja, para Troiano a marca
não possui uma essência, um caroço, mas sim
pontos de contato que, em conjunto, formarão a
percepção do

Outros materiais