Livro 2 - Design para mídias digitais II

Prévia do material em texto

Imprimir

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
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 tempo ela 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;
Aula 1
PROCESSOS CRIATIVOS
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

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;
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.
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

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

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 umaorganizaçã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 consumidor" (p. 94)
Metáfora
Fonte: Lourenço; Campos Junuir (2015, p. 13).
Para �ns de discussão, será utilizado aqui o conceito de marca proposto por Keller (1998) que trabalha com o
conjunto de associações mentais e percepções associados aos valores de um produto ou serviço. Sobre a
importância de uma marca, é necessário destacar que "as pessoas se apaixonam pelas marcas, con�am nelas e
acreditam em sua superioridade. O modo como a marca é percebida afeta seu sucesso, não importando se você
é uma startup, uma organização sem �ns lucrativos ou um produto" (WHEELER, 2012, p. 12). Neste sentido
observa-se ainda que o consumo e a experiência do usuário é não apenas afetado, mas também regido, em
grande parte, pelos seus vínculos, relações e percepções sobre a marca.

A marca é visualizada e reconhecida pelo público por meio de sua identidade visual. Para Chevalier e Mazzalovo
(2007, p. 40): “as marcas existem somente porque podemos reconhecê-las. E as reconhecemos porque
percebemos as mensagens que enviam, suas especi�cidades e uma certa constância ao longo do tempo”.
A identidade visual é composta por diferentes elementos e, embora não exista consenso na literatura sobre a
quantidade e especi�cidade destes, cabe destacar aqui os seguintes:
1. Cores.
2. Tipogra�a.
3. Logo;
4. Nome do produto / marca.
5. Slogan.
Um exemplo da aplicação e�ciente e bem-sucedida de uma identidade visual é a do McDonald’s, em qualquer
lugar do mundo, são necessários poucos elementos para que a maior parte das pessoas reconheça a marca e
assimile imediatamente os valores que ela representa.
Figura 2 | Logo McDonald’s
Fonte: divulgação.

No design de interação, a identidade visual é fundamental para a atração e �delização do usuário. Mozata
(2009, p. 19) observa que “como as marcas estão por toda parte, os designers grá�cos têm que ir além da
criação de identidade visual. Eles devem promover uma promessa de valor".
Na era digital, boa parte da comunicação se dá com o suporte grá�co de ícones, elementos que se assemelham
aos objetos que referenciam e por isso são capazes de substituir palavras e mensagens inteiras. A iconogra�a é
um importante recurso da identidade visual no design de interação, isso acontece, segundo Passos (2014), para
que a interação seja efetiva, a informação deve ser disponibilizada com clareza e simplicidade guiada pelo
contexto e o per�l do usuário que busca atender.
Por �m, ao pensar identidade visual e marca é fundamental alcançar o equilíbrio entre inovação e familiaridade.
Propostas muito incomuns, antiquadas ou mesmo inovadoras demais podem despertar a rejeição do público.
Considerando todas as complexidades dos processos de comunicação, cabe ao designer de mídias digitais uma
abordagem criativa e de bom senso para que os valores e sentidos de uma marca encontre uma boa referência
simbólica no imaginário coletivo do público, consumidor ou não. 
DESIGN THINKING
Um jeito diferente de pensar
O pensamento é a primeira etapa de qualquer criação. Por esta razão, o design de interação para mídias digitais
exige uma lógica de pensamento diferente das tradicionais. Design thinking é um conceito associado a novas
formas de perceber e resolver problemas, fugindo das dinâmicas convencionais.
Segundo Vianna et al. (2012, p. 14), o design thinking é pensado a partir da busca por explicações e a partir disso
“o designer constantemente desa�a seus padrões, fazendo e desfazendo conjecturas, e transformando-as em
oportunidades para a inovação”. Nesta abordagem, tem-se um processo interativo e criativo com o objetivo de
compreender o usuário, suas capacidades e necessidades.
O design thinking, assim como outras metodologias, é composto por diversas etapas e procedimentos,
baseados em ações práticas. Essas etapas são: imersão, ideação, prototipação e desenvolvimento. O processo
de imersão pode ser subdividido em empatia e de�nição.
Figura 3 | Processos do Design thinking

Fonte: elaborada pela autora.
A empatia é o ponto de partida para o design thinking. É nesta etapa inicial que o designer busca aprender
sobre o usuário, tentando se colocar no lugar dele. O bom pro�ssional deve observar e se perguntar "quem é
este usuário?", "o que é importante para essa pessoa?".
Na etapa de de�nição são criados pontos de vista a partir de pesquisas e observações sobre as necessidades
do usuário. O designer e/ou os colaboradores devem de�nir quais problemas deverão ser resolvidos e como.
Na ideação são realizadas tempestades de ideias e outros processos criativos para a solução de possíveis
problemas. Nesta fase, o designer e sua equipe devem pensar nos desa�os e criar soluções inovadoras.
A prototipação tem como objetivo reduzir as possibilidades de falhas. É nesta fase que são desenvolvidas as
versões betas, que simulam o produto ou serviço �nal. Uma importante pergunta neste processo é: "como
posso mostrar a ideia?". A partir de então tem-se um rascunho daquilo que se pretende criar.
O desenvolvimento é a etapa �nal, quando o projeto sai do papel e passa a ser testado em todas as suas
funcionalidades. O protótipo toma forma e é apresentado ao usuário para então ser submetido a avaliações e
feedbacks. Esta fase é norteada por perguntas como "o que funciona?", "o que não funciona?".
O design thinking é uma metodologia tão e�caz que tem sido aplicada em outros setores, como o de recursos
humanos. Trata-se de uma proposta que transcende a abordagem grá�ca ou tecnológica. Para Brown (2017, p.
1), “é uma abordagem antropocêntrica para inovação que usa ferramentas dos designers para integrar as
necessidades das pessoas, as possibilidades da tecnologia e os requisitos para o sucesso dos negócios”.
O foco do designer deve ser o desenvolvimento dos processos criativos para proporcionar ao usuário uma
experiência livre de problemas e di�culdades. Por meio de uma abordagem humanizada, a metodologia do
design thinking propõe uma nova forma de trabalhar, observando as tendências de consumo, as possibilidades
tecnológicas e os valores da marca com parâmetros para o pro�ssional designer.

VIDEOAULA
Neste vídeo, você o desa�o é re�etir sobre a importância do planejamento nos processos criativos. Por meio de
exemplos e analogias serão apresentadas ferramentas metodológicas que podem contribuir com a criação ágil
e e�caz de designs de interação para mídias digitais. Para uma melhor percepção sobre a atuação do designer
de mídias digitais, a discussão também aborda importantes aspectos da identidade visual e sua relevância no
posicionamento estratégico de uma marca. 
 Saiba mais
Templates para inspiração
O que fazer quando a inspiração acaba? Copiar ideias não faz jus a um bom pro�ssional, mas é possível ter
um novo olhar a partir da análise de projetos bem-sucedidos. Se você gosta de admirar um bom trabalho,
uma ótima opção é a página da agência de marketing digital BigDrop. Parece uma exposição artística
formada apenas por belos trabalhos de designers e publicitários. Conheça a BigDrop!
Identidade visual – Rio 2016
Criar uma marca e identidade visual não é fácil. Você sabia que a marca e logo das Olimpíadas de 2016 no
Rio de Janeiro foi escolhida por 12 jurados após analisarem as propostas de mais de 138 escritórios
brasileiros de design? O incrível processo da agência Tátil foi registrado em um curto documentário e
registra as nuances e processos criativos que levaram até o produto �nal. Veja o Making of Rio 2016.
Design thinking - animação
O design thinking também pode ajudar no planejamento de umaempresa ou negócio. Por isso o Serviço
Brasileiro de Apoio às Micro e Pequenas Empresas (SEBRAE) fez o vídeo Processo Criativo – Design
Thinking, super didático com o resumo dos conceitos dessa metodologia. Não deixe de ver!
Videoaula
Para visualizar o objeto, acesse seu material digital.
Aula 2
PRINCÍPIOS E ELEMENTOS DO DESIGN
Nesta aula, você conhecerá importantes elementos técnicos do design e aprenderá a aplicá-los
de forma correta, obtendo conhecimentos que o tornará habilitado a fazer novas
experimentações de design, consciente de que um bom projeto vai muito além do bom gosto e
demanda muita técnica. 
23 minutos

https://www.bigdropinc.com/latest-work/
https://vimeo.com/18331485
https://www.youtube.com/watch?v=Bwjwb5aIcZ8
INTRODUÇÃO
O design também é uma ciência. Por ser uma prática muito ligada a habilidades artísticas e talentos naturais, o
design com frequência é visto como algo meramente intuitivo, o que não é verdade. Nesta aula, você conhecerá
importantes elementos técnicos do design e aprenderá a aplicá-los de forma correta. Por meio da análise de
produtos grá�cos e importantes conceitos serão apresentados fundamentos da legibilidade e interação na
tipogra�a, lettering, hierarquia e ritmo de uma composição. Com estes conhecimentos você estará habilitado a
fazer novas experimentações de design, consciente de que um bom projeto vai muito além do bom gosto e
demanda muita técnica. 
TIPOGRAFIA E LETTERING
Texto desenhado
A escrita é, acima de tudo, uma composição grá�ca. A boa compreensão de um texto escrito não depende
apenas da familiaridade com os tipos e caracteres, mas também da forma como eles são apresentados.
Tipogra�a é "o conjunto de práticas e processos envolvidos na criação e utilização de símbolos visíveis
relacionados aos caracteres ortográ�cos (letras) e para-ortográ�cos (números, sinais de pontuação, etc.) para
�ns de reprodução” (FARIAS, 2016, p. 10). Outro conceito importante nesta área do design é o lettering que,
segundo Flor (2017, p. 12) especi�ca "uma expressão tipográ�ca única, customizada para uma aplicação
especí�ca". No design da escrita há ainda a caligra�a, que é a arte da escrita cursiva e manual por meio de
canetas, pincéis, elementos digitais ou outros. Trata-se de um "processo manual para a obtenção de letras
únicas, a partir de traçados contínuos à mão livre" (FARIAS, 2016, p. 11).
Figura 1 | Técnicas das disciplinas das letras
Fonte: Nunes (2020).
Ao escolher o tipo de uma letra é necessário observar importantes elementos de sua representação grá�ca.

Serifa
As serifas são pequenas hastes ou traços que arrematam a haste de algumas letras. As famílias tipográ�cas sem
serifas são chamadas sans-serifs e as que têm serifa são chamadas serifadas. As fontes serifadas são
recomendadas para textos mais longos. A diferença provocada por este recurso no design pode ser observada
na atualização de marca da empresa Google, que trocou seu logo por uma proposta clean e sem serifa.
Figura 2 | Atualização de marca da empresa Google
Fonte: elaborada pela autora.
Peso
O peso é uma qualidade ligada à espessura dos caracteres de um tipo. Ele pode ser normal, negrito (bold), mais
negrito (bolder) e mais �no (lighter). As fontes bold são ótimas para destaques, mas em textos maiores podem
sobrecarregar o visual. O ideal é combinar os pesos de forma complementar.
Entrelinha, espaçamento e entreletra
Entrelinha é o espaço entre duas linhas de texto e pode variar de acordo com as características de cada tipo.
Para uma leitura confortável é importante que o espaçamento entre as linhas não seja muito próximo, para não
afetar a compreensão, ou muito afastado, para não afetar o sentido do texto.
Espaçamento é a distância entre os caracteres em uma palavra. Deve ser orientada pelo equilíbrio, à
semelhança da entrelinha.
Entreletra é um conceito muito parecido com o de espaçamento, mas não deve ser confundido com ele. Trata-
se do espaço entre caracteres especí�cos, variando nas palavras de acordo com o posicionamento de cada
letra. É o posicionamento único que o "r" tem ao lado do "a", e que é totalmente diferente do posicionamento
que este caractere ocupa ao lado de outra letra, como o "b" por exemplo.

Tamanho
O tamanho da fonte afeta signi�cativamente a legibilidade, ele deve ser pensado tendo em consideração
informações sobre o usuário (idade e tempo médio de exposição a telas do público-alvo), bem como
características do dispositivo que será utilizado para acessar o conteúdo (possíveis tamanhos de tela). Uma letra
pequena demais ou grande demais pode fazer com que o usuário se irrite com a interface e desista daquela
experiência.
Um texto bem diagramado e desenhado pode ser o grande diferencial de um projeto de design. No design de
interação, o conforto do texto pode ser o motivo que fará o usuário �car um pouco mais naquela interface, ou
desistir dela.
ELEMENTOS DO DESIGN: LINHA, TEXTURA, FORMATO, ESPAÇO E COR
Elementos do design
Para apreciar um design é preciso saber o que os símbolos nele apresentado signi�cam. É por esta razão que,
quando lemos hieróglifos – a escrita de pictogramas utilizada pelos egípcios antigos – não conseguimos
entender o que os textos dizem porque aqueles símbolos não têm signi�cado para nós.
No design, todos os elementos visuais têm papel importante na comunicação, desde os mais óbvios como as
formas, até os mais sutis como os espaços em branco. Elementos conceituais são aqueles que não vemos, e por
isso existem apenas no conceito. São sensações volume, ângulos, espaços e outras percepções não visuais. Já os
elementos visuais podem ser percebidos pelos olhos. Segundo Flavia Paradella (2014, p. 2) "suas características
(comprimento, largura, textura ou cor) dependem do material utilizado ou da maneira de como o
representamos. Os elementos visuais formam a parte mais proeminente da representação grá�ca, pois são
aquilo que podemos ver de fato".
O design é composto por diversos elementos visuais, e a classi�cação deles pode variar na literatura cientí�ca
sobre o tema. Para �ns didáticos serão estudados apenas cinco nesta discussão.
Linha
O ponto é o elemento básico da comunicação visual, é considerado o ponto de partida para qualquer criação. O
movimento de um ponto ou a ligação entre um ponto e outro forma uma linha. As linhas podem ter variadas
espessuras, tracejados, ângulos retos ou curvilíneos. A linha tem um importante papel na continuidade, ela
ajuda a organizar a composição e direciona o olhar.
Textura
A textura é um elemento sensorial, que pode ser visual ou tátil. Ela é um recurso que pode fortalecer e atribuir
signi�cados à imagem. São exemplos de textura visual as aparências de: vidro, madeira, pedra, água e outros.
Este recurso deve ser usado com moderação para não causar poluição visual.

Forma
Quando um conjunto de linhas forma um objeto, ele é denominado, então, forma. Existem formas geométricas
e formas icônicas. A forma desperta signi�cados e referências na mente, por isso elas geralmente ocupam papel
central na comunicação visual.
Cor
A cor pode ser um dos mais impactantes elementos da comunicação visual. Ela pode despertar emoções e
sensações de forma muito especí�ca. Para utilizar bem este recurso é importante conhecer sobre teoria das
cores e também sobre psicologia das cores.
Espaço
O espaço é um elemento conceitual que tem efeitos visíveis. No design é importante que os elementos visuais
não ocupem todo o espaço disponível. É importante haver espaço negativo, ou seja, espaço livre. Com a
tendência do design minimalista, �ca ainda mais evidente a importância de uma boa distribuição dos espaços
na composição, com um equilíbrio entre negativos e positivos.
O conhecimento sobre os elementos visuais e conceituais do design é fundamental para os processos de
interação. Os usuários de mídias digitais gastam, em média, diversas horas por dia expostos às telas, por isso o
conforto e a boa utilização dos elementos do designsão de grande importância para a interface do usuário e
sua experiência coma uma marca.
EIXO, HIERARQUIA E RITMO NO DESIGN
Organização e estrutura no design
Na matemática é ensinado que “a ordem dos fatores não altera o produto”, mas no design de interação não é
assim que funciona. Existem regras e técnicas de apresentação das informações visuais que determinam a
importância dos elementos em uma composição.
Existem alguns princípios na interface do usuário que podem proporcionar mais conforto e uma experiência
mais agradável. São estes princípios também os responsáveis pelo �uxo e lógica das mensagens visuais.
Segundo Dondis (1997, p. 52), “são muitos os pontos de vista a partir dos quais podemos analisar qualquer obra
visual; um dos mais reveladores é decompô-la em seus elementos constitutivos, para melhor compreendermos
o todo”. Dentre os elementos estruturais de uma composição visual, para �ns didáticos, faz-se necessário
destacar três, são eles: eixo, hierarquia e ritmo.
Eixo
O eixo é um elemento de organização, trata-se de uma linha imaginária que possibilita a percepção do
alinhamento, continuidade e movimento da composição. É o eixo que auxilia na compreensão da ordem das
informações, trazendo conforto visual, coerência e estabilidade ao design. O alinhamento é um atributo do
texto demarcado pelos parágrafos e que pode auxiliar na estética, compreensão e hierarquia das informações
escritas. Este atributo também pode ser aplicado a ilustrações e outros elementos na composição. Os principais

alinhamentos existentes são: à esquerda, ao centro, justi�cado e à direita. No design de interação, o
alinhamento do layout apresenta ao usuário, em um eixo de colunas horizontais ou verticais, informações
visuais sobre os caminhos que devem ser seguidos.
Hierarquia
A hierarquia de�ne a ordem de importância dos elementos grá�cos no layout. Objetos em destaque, quer por
tamanho ou por posição ótica, recebem maior atenção na interface do usuário. O uso de cores, peso tipográ�co
e outros recursos pode estabelecer a hierarquia no design de interação. Tamanho, forma e posição são
importantes elementos na hierarquização das informações no design.
Figura 3 | Hierarquia no design
Fonte: elaborada pela autora.
Ritmo
O ritmo é o movimento, ou sensação de movimento, criado a partir da padronização de certos elementos no
layout. Segundo Rüthschilling (2008, p. 62), "a estrutura formal construída pela repetição dos elementos de
ritmo promove o entrelaçamento grá�co-visual. Metaforicamente, os elementos de ritmo atuam como impulsos
responsáveis pela ação de propagação do tratamento visual que vem cobrindo a superfície". Os padrões
de�nem uma unidade a partir da repetição e semelhança, servindo como referência. A quebra do padrão, que
também colabora com o ritmo, traz um choque visual por meio da interrupção por um elemento diferente.
Para a criação de uma interface do usuário atraente e cativante é necessário o bom uso dos elementos e
princípios do design. O bom pro�ssional deve estudar todas as perspectivas e possíveis aplicações técnicas dos
recursos grá�cos com os quais trabalha para criar um bom design de interação.

VIDEOAULA
Neste vídeo são apresentados importantes elementos técnicos da visualidade no design. Por  meio da
exposição dialógica e de provocações sobre o tema, são demonstrados os diversos recursos estratégicos
existentes as escolhas de tipogra�a, hierarquia, ritmo e eixo na interface do usuário. Para �ns didáticos e
cientí�cos, esta aula discute também a funcionalidade de elementos do design como linha, textura, forma, cor e
espaço. 
 Saiba mais
Composição visual
Os elementos da composição visual são a essência do design. Por isso, para se aprofundar no assunto,
uma ótima opção é o livro Composição Visual de Bruno Garcia. São 224 páginas sobre a codi�cação de
mensagens por meio de elementos visuais. Disponível gratuitamente na biblioteca virtual.
Sintaxe da linguagem visual
A comunicação acontece por meio de processos de signi�cação, por isso é importante dominar os
princípios da sintaxe da linguagem visual no design. Em sua obra Sintaxe da linguagem visual, Silvia
Guadagnini apresenta conceitos e provocações de grande contribuição para o design de mídias digitais.
Disponível gratuitamente na biblioteca virtual.
Modelos de layouts
Para treinar suas percepções sobre a estruturação dos elementos do design, você pode utilizar modelos
pré-prontos de layout. Na plataforma Vennage você pode editar e se inspirar em uma galeria com diversas
opções de composições visuais. Disponível gratuitamente em língua portuguesa.
Videoaula
Para visualizar o objeto, acesse seu material digital.
INTRODUÇÃO
Aula 3
DESIGN DE INTERFACE DO USUÁRIO (UI)
Nesta aula, você aprenderá a diferença entre wireframes, mockups e protótipos de sites. Outra
importante lição a ser observada nesta aula é a necessidade de um design de interação que
atenda de forma satisfatória aos conceitos de e�cácia e e�ciência.
23 minutos

https://biblioteca-virtual.com/detalhes/ebook/608704e954aa8872fc616eb6
https://biblioteca-virtual.com/detalhes/ebook/6087053d54aa8872fb666ab4
https://pt.venngage.com/templates/layouts
Existem diferentes níveis de complexidade no design de mídias digitais. E para ajudar na criação, elaboração dos
materiais, bem como na escolha das plataformas e etapas de testes, existem diferentes abordagens possíveis.
Nesta aula, você aprenderá a diferença entre wireframes, mockups e protótipos de sites. Outra importante lição
a ser observada nesta aula é a necessidade de um design de interação que atenda de forma satisfatória aos
conceitos de e�cácia e e�ciência. Para uma maior percepção dos conceitos práticos discutidos e suas
aplicabilidades, serão observadas também as diferentes dimensões do design de interação para mídias digitais.
Prepare-se para re�etir sobre novos aspectos da interface do usuário e seus impactos na experiência do
usuário. 
WIREFRAMES, MOCKUPS E PROTÓTIPOS DE SITES
Testes de design digital
Existe um ditado popular que diz que “para quem não sabe aonde quer ir, qualquer caminho serve”, mas isto
também signi�ca que sem estabelecer uma meta não se chega a lugar algum. No design de mídias digitais, ao
trabalhar na criação de sites ou aplicativos, é importante traçar os objetivos de uma interface e estabelecer os
meios que serão utilizados para atingi-los. Para desenhar as primeiras etapas de uma interface existem
diferentes recursos e dentre eles cabe destacar três: os wireframes, os mockups e os protótipos. Embora
algumas vezes estes três termos sejam utilizados como sinônimos, eles descrevem propostas bastante
diferentes.
Wireframes
Wireframes são uma versão reduzida da proposta visual de um projeto. Eles funcionam como uma referência e
têm o propósito de reduzir possíveis erros no design. Para Memória (2005, p. 35), “os wireframes são um
rascunho de uma tela especí�ca que posiciona a informação e a navegação, incluindo-se aí agrupamento,
ordem e hierarquia do conteúdo. É um esqueleto que organiza os elementos de interface, sem a interferência
do projeto visual”. No wireframe não é necessário inserir identidade visual, textos ou cores, e eles podem ser
feitos à mão, em softwares ou em plataformas online. Wireframes auxiliam no trabalho do designer, evitam
atrasos, facilitam o diálogo com o cliente e podem também contribuir com a percepção de diferentes arranjos
no layout.
Mockups
O mockup é uma representação grá�ca do produto. Ao contrário do wireframe que apresenta a estrutura da
proposta em baixa �delidade, o mockup se aproxima mais do resultado esperado. Para Pinheiro (2016, p. 56),
"um mockup é uma representação estática de média a alta �delidade de um design. Muitas vezes um mockup é
um rascunho bem próximo do design �nal do produto, ou até o próprio design visual do produto �nal". O
mockup usa elementos um pouco mais elaborados que o wireframe, trazendo a possibilidade de experiência do
visual doproduto e permite a avaliação de aspectos estéticos mais detalhados antes da prototipação ou
publicação do produto �nal.
Protótipo

O protótipo é uma aproximação ou imitação do produto �nal. Um dos seus principais objetivos é testar o �uxo e
a experiência do usuário com a interface. Segundo Sharp, Rogers e Preece (2013, p. 390), "um protótipo é uma
manifestação de um design que permite aos grupos de interesse interagirem com ele e explorarem sua
adequação". Uma das principais vantagens do protótipo é que é mais fácil editá-lo e corrigi-lo do que alterar
uma versão �nal e já publicada de um site, aplicativo ou qualquer outra mídia digital.
Figura 1 | Diferença entre wireframes, mockups e protótipos
Fonte: Webuters (2020).
A �delidade entre o design das projeções e o do produto �nal é diferente em cada uma das três propostas,
sendo o wireframe de baixa �delidade, o mockup de média �delidade e o protótipo de alta �delidade. Isso não
signi�ca que qualquer um deles seja inferior ao outro, existem situações e demandas especí�cas para cada uma
destas abordagens e cabe ao bom designer saber quando e qual delas utilizar.
EFICIÊNCIA E EFICÁCIA NO DESIGN DE INTERFACE DO USUÁRIO (UI)
Fácil de entender e simples de manusear
E�ciência e e�cácia são palavras parecidas, mas não têm o mesmo signi�cado. No design de interface do
usuário (UI), e�cácia e e�ciência são elementos que, juntos à satisfação do usuário, fazem parte das metas de
usabilidade e contribuem para uma experiência agradável.
De acordo com Christianne Falcão e Marcelo Soares (2013, p. 4), "e�cácia: refere-se à dimensão pela qual um
objetivo ou tarefa são atingidos. A e�cácia mede a relação entre os resultados obtidos e os objetivos
pretendidos, ou seja, ser e�caz é conseguir atingir um dado objetivo". Na interface do usuário, um design e�caz
permite que uma tarefa seja executada de forma completa e correta.

https://conteudo.colaboraread.com.br/202202/EAD/DESIGN_PARA_MIDIAS_DIGITAIS_II/LIVRO_DIGITAL/U2/assets/img/fig_a3_01.jpg
Ainda segundo Christianne Falcão e Marcelo Soares (2013, p. 4), "e�ciência: refere-se à quantidade de esforço
requerido para se atingir um objetivo. Quanto menor o esforço, maior a e�ciência". É muito importante atingir
os objetivos por meio no design da interface do usuário, isso denota e�cácia, mas a melhor maneira de alcançar
isso é com processos e�cientes. A e�ciência também diz respeito aos recursos e esforços gastos para chegar à
e�cácia. Para Hashimoto (2006), e�ciência é fazer certo as coisas, e e�cácia é fazer as coisas certas. O ideal é
que o usuário complete a tarefa, no menor tempo possível e com o máximo de facilidade.
Para uma interface do usuário e�caz e e�ciente é importante prestar atenção a alguns aspectos:
Clareza
Para que uma interface seja e�caz e e�ciente é necessário que o usuário compreenda suas funções, utilidades e
consiga interagir com facilidade. A clareza do design permite uma navegação intuitiva e con�ável. Por meio dela
é possível identi�car os comandos interativos e compreender como eles podem ajudar.
Interatividade
A interatividade é um dos principais recursos nas mídias digitais. Ela permite o acesso a serviços e informações.
Uma boa interface do usuário traz a sensação de controle ao navegador. É a interação e�caz e e�ciente por
meio da comunicação (da fácil e rápida) dos usuários com aquilo – ou aqueles – que procuram.
Simplicidade
Uma boa interface do usuário precisa prender a atenção e para isso é importante não sobrecarregar os espaços
com informações. Excesso de anúncios ou elementos visuais sobrecarregados podem fazer com que as pessoas
desistam da experiência. Por isso a simplicidade no design é sempre uma escolha acertada.
Uma ação por tela
A intuitividade é facilitada pela simplicidade, então o ideal é atribuir uma ação por tela. A inclusão de várias
ações em uma mesma tela pode confundir e di�cultar a compreensão. Para Ibañez (2019, [s. p.]), "cada tela
projetada deve prover uma única ação de valor real para a pessoa que a utiliza. Isso facilita o aprendizado, o uso
e o acréscimo ou aprimoramento quando necessário".
Organização e hierarquia
A hierarquia determina o peso e a importância das informações em um design, enquanto a organização traz
conforto visual e estruturação do conteúdo. A designer Márcia Ibañez (2019, [s. p.]) ressalta que "hierarquias
visuais fracas dão pouca pista sobre onde descansar o olhar e acabam ensejando sentimentos/percepções de
desordem e confusão".
A e�cácia está ligada aos resultados esperados e infalibilidade dos processos. Nas mídias digitais, o design e�caz
da interface do usuário deve permitir que os objetivos sejam alcançados, ocorra a aprendizagem dos processos
de forma fácil, as tarefas demandadas sejam realizadas e as informações sejam acessadas de forma satisfatória.

5 DIMENSÕES DO DESIGN PARA MÍDIAS DIGITAIS INTERATIVAS
5 Dimensões do design de interação
Quando você vai a um lugar pela primeira vez, diversos elementos da interação in�uenciam sua opinião sobre
aquela experiência. A aparência estética do local, a higiene do ambiente, as pessoas ao seu redor e até as
conversas podem resultar em uma impressão boa ou péssima sobre aquele estabelecimento.
Toda interação provoca sensações e resulta em uma experiência, seja ela agradável ou não. Existem diversas
dimensões que podem interferir nas percepções e compreensões do design de interação nas mídias digitais.
Para �ns didáticos, cabe destacar cinco delas:
Palavras
Tudo o que envolve a textualidade e em especial as palavras utilizadas para botões, rótulos e outros elementos
de interação fazem parte desta importante dimensão do design. Não podem ser escolhas ao acaso, mas devem
ser signi�cativas e de comunicação e�caz, ou seja, comunicar da melhor forma possível e de forma sucinta. Por
meio das palavras, o usuário deve saber tudo o que precisa sobre o produto e a navegação.
Representações visuais
Os elementos grá�cos são responsáveis pela composição estética da interface do usuário, eles auxiliam todo o
processo de interação e comunicação. As representações visuais atuam como um binômio junto ao texto e
deles resultam diversos aspectos da experiência do usuário.
Objetos e espaços
É importante considerar os meios físicos (objetos) que o usuário utilizara para acessar aquele design. A mídia
pode ser acessada em um laptop com mouse e teclado? Será utilizada em celulares com dedos no visor? Tudo
isso faz parte de uma importante dimensão a ser considerada nos processos criativos do design de interação.
Quanto mais detalhado for esse planejamento, maiores as chances de uma interface do usuário e�caz e
e�ciente.
Tempo
O tempo é um conceito abstrato e uma dimensão muito relevante do design de interação. É importante
observar o tempo gasto pelo usuário com aquele produto, as possibilidades de retomar a interação da parte em
que parou e ainda aspectos relacionados as mudanças das mídias como animação, vídeos, áudios e feedback
visual.
Comportamentos
As quatro primeiras dimensões apresentadas contribuem para a consolidação da quinta dimensão: o
comportamento. Isso diz respeito às ações e reações provocadas pelo produto. O comportamento do usuário
em relação à interface e aquilo que lhe é oferecido é um importante aspecto do design de interação.

Para Ellwanger (2013, p. 800) "usuários vão vivenciar experiências de qualquer forma, sejam elas provocadas ou
não e estes são os motivos pelos quais é necessário que tais experiências sejam planejadas”, ainda segundo a
autora, “devido à sua subjetividade, pode-se certamente ter um melhor direcionamento do que o usuário irá
experimentar, minimizando as experiências negativas". Cabe ao bom designer estar atento a todas as
dimensões do design de interação e saber utilizar da melhor maneira suas potencialidades.
VIDEOAULA
Neste vídeo são apresentadas e discutidas importantes ferramentas do design de interação. Por meio de
exemplos e analogias, serão demonstradasas aplicações de wireframes, mockups e protótipos na criação
designs para mídias digitais. Você será desa�ado a re�etir sobre os conceitos de e�cácia e e�ciência e sua
aplicabilidade na interface do usuário (UI). Por �m, para uma melhor compreensão dos conceitos, são
abordadas cinco importantes dimensões do design de interação. 
 Saiba mais
Wireframes e mockups
Para treinar suas habilidades no design de interação, você pode acessar a Balsamiq, uma plataforma de
criação de wireframes que trabalha com telas iniciais de baixa �delidade.
Protótipos
Uma das melhores plataformas da atualidade para prototipação é o Figma. Por meio desta ferramenta
online é possível criar protótipos navegáveis e interativos. Há ainda a possibilidade de colaboração, ou seja,
um mesmo projeto pode ser desenvolvido por diversas pessoas.
Interação humano-computador (IHC)
No livro de Morais (2014), intitulado Interação humano-computador é possível aprender mais sobre
importantes aspectos da funcionalidade de aplicações e design de interação. Disponível gratuitamente na
biblioteca virtual.
Videoaula
Para visualizar o objeto, acesse seu material digital.
Aula 4
FERRAMENTAS E PLATAFORMAS PARA DESIGN DE
INTERFACE DO USUÁRIO (UI)

http://www.balsamiq.com/products/mockups
https://www.figma.com/
https://biblioteca-virtual.com/detalhes/ebook/6087052f54aa8872fb666a52
INTRODUÇÃO
Na era digital, o acesso à internet se tornou mais fácil, permitindo maior acesso a ferramentas de criação de
designs interativos. Nesta aula você vai conhecer alguns dos principais recursos de desenho e edição de
interfaces disponíveis no mercado. Existem recursos em diferentes plataformas e você conhecerá três das
principais possibilidades: os softwares, as plataformas online e as ferramentas em redes sociais. A partir de uma
detalhada relação das vantagens, desvantagens e custos, você poderá re�etir sobre quais ferramentas mais se
adequam a cada demanda e como se preparar para trabalhar com os recursos mais populares do mercado do
design para mídias digitais.
SOFTWARES PARA DESIGN DE INTERFACES
Antes da popularização da internet e dos avanços da computação, o design era, na maioria das vezes, um
processo próximo ao artesanal. Na era digital e com a ênfase na interatividade, os softwares, plataformas
onlines e até editores das redes sociais tornaram-se grandes aliados do design de interação.
Com a abundância de ofertas de produtos interativos, os usuários também estão se tornando mais seletivos e
exigentes. Nielsen e Loranger (2007, p. 1) observam que "há dez anos, a web era algo diferente para as pessoas.
Hoje ela é uma rotina, é uma ferramenta. Se for de fácil acesso, elas a utilizarão, do contrário, não". Tais
colocações evidenciam o impacto que um bom design de interação pode oferecer na competitividade de um
produto.
Até os anos 1990 era muito difícil o acesso a softwares de design. Além de apresentarem um alto custo, eles
eram de difícil utilização, demandavam uma elevada especialização pro�ssional e máquinas muito especí�cas
para o seu manuseio. Felizmente, hoje existem programas gratuitos e de utilização simples que podem
contribuir muito nos processos criativos do design de interação.
A cientista da informação Noemi Scherer (2018, p. 9) ressalta as grandes contribuições dadas pelos softwares de
design, para a pesquisadora "o seu uso é essencial para o trabalho de um designer, pois o torna mais fácil e
prático, reduz o tempo de criação, revisão e alteração do projeto, garante um trabalho mais econômico, uma
boa precisão e melhora do �uxo das informações". Para �nalidades didáticas, foram selecionados 3 dentre os
mais populares e acessíveis do mercado na atualidade. São eles:
GIMP
Nesta aula você vai conhecer alguns dos principais recursos de desenho e edição de interfaces
disponíveis no mercado e saber que existem recursos em diferentes plataformas: os softwares,
as plataformas online e as ferramentas em redes sociais.
24 minutos

O GIMP é um software com diversos recursos que permite a criação de mockups, composições grá�cas,
banners, cards e diversos outros tipos de design. Com algumas similaridades com o popular programa da
Adobe, o Photoshop, ele permite manipular camadas, trabalhar iluminação, �ltros, pinturas e vetores. Este
software dialoga com formatos nativos de outros programas, é estável, rápido e permite uma interface �exível.
Além destas vantagens, o software é gratuito e pode ser obtido com facilidade em na página gimp.org.
Inkscape
O Inkscape é um avançado software com ênfase na manipulação de vetores. Este aplicativo oferece várias
possibilidades de projetos que incluem composições complexas, grá�cos, diagramas e outros. As desvantagens
deste software são: a ausência de suporte nativo para CMYK, que di�culta layouts para o impresso; interface
limitada; pouco uso no mercado se comparado a outros softwares semelhantes. O Inkscape trabalha com
scalable vector graphics (.svg) como padrão nativo e é gratuito.
Adobe Illustrator
O Illustrator da Adobe é um dos maiores concorrentes do CorelDRAW da Corel Corporation no mercado do
design. Algumas das vantagens do Illustrator é que sua interface é mais intuitiva, facilitando a aprendizagem.
Trabalha com sincronização de cores, ferramenta extratora de CSS, exportação svg, guias inteligentes e opções
de ampliação. Suas desvantagens são: o custo de aquisição; a interface avançada que pode intimidar iniciantes;
a demanda por hardwares avançados, com placas de vídeo, memória e processador de maiores capacidades.
É importante que o designer de mídias digitais esteja familiarizado com diferentes softwares de edição e
domine com excelência ao menos um deles. Em tempos de democratização do conhecimento e inteligência
coletiva, é fundamental que a quali�cação do designer de interação inclua as principais ferramentas de edição
do mercado.
PLATAFORMAS ONLINE PARA DESIGN DE INTERFACES
Design online
O conhecimento teórico é o grande alicerce do design de interação, mas é por meio das ferramentas
tecnológicas que as estruturas de uma boa composição grá�ca são erguidas. Além dos recursos oferecidos
pelos softwares, existem hoje diversas plataformas online que possibilitam o trabalho colaborativo, a
recuperação fácil de arquivos e o menor comprometimento dos espaços nos dispositivos utilizados para a
criação e edição de designs.
Uma forma e�caz e e�ciente de criação de interfaces de usuário é por intermédio de outras interfaces
disponíveis em sistemas de nuvens ou plataformas de mídias digitais especí�cas para a construção de designs
de interação. Yvonne Rogers, Helen Sharp e Jennifer Prrece (2005, p. 28) observam que "o campo interdisciplinar
mais conhecido é a Interação Homem-Computador (IHC), que se preocupa com o design, a avaliação e a
implementação de sistemas computacionais interativos para uso humano e com o estudo de fenômenos
importantes que o rodeiam". No design a IHC pode acontecer como produto �nal e como meio para
desenvolvimento do produto.

https://gimp.org/
Existem diversas plataformas com recursos para a criação de composições do design de interação e, embora
exista sempre a possibilidade do surgimento de outras novas, é importante destacar algumas das mais
populares na atualidade.
Figma
Figma é um editor online com ênfase no trabalho colaborativo. A plataforma possibilita a criação de diversas
interfaces e protótipos para mídias digitais. Algumas de suas principais vantagens são: interface simples, design
intuitivo, variedade de templates, plano gratuito. O Figma também permite trabalhos focados no design vetorial
e pode ser utilizado em dispositivos móveis.
AdobeSpark
Com todas as vantagens e características do famoso Adobe suite, o Adobe Spark é uma plataforma com
milhares de templates, imagens e fontes gratuitas. Permite o trabalho colaborativo, personalização com logo,
templates da marca e acesso a toda a biblioteca de fontes da Adobe. Disponível para web e dispositivos móveis,
temuma versão gratuita com limitações.
Desygner
O Desygner é uma ferramenta online já utilizada por mais de 20 milhões de pessoas em todo o mundo. Tem
diversos templates, uma interface amigável, permite o trabalho colaborativo e o redimensionamento
automático de designs. Apresenta uma versão gratuita e outras pagas, com diferentes valores e opções de
recursos.
Existe uma tendência de plataformização do design para mídias digitais e isso ocorre no contexto da crescente
expansão da importância do design para as rotinas humanas (CARDOSO, 2013). As plataformas e suas
interfaces interligam pessoas no mundo todo, conectando o trabalho coletivo em dimensões continentais e
fazendo surgir novos poderes econômicos e tecnológicos. Segundo Bratton (2016 apud FERREIRA, 2021, p. 104),
"plataformas centralizam e descentralizam ao mesmo tempo, atraindo muitos atores para uma infraestrutura
comum. Elas distribuem algumas formas de autonomia nas margens das suas redes enquanto também
padronizam condições de comunicação entre ela".
O mercado segue a tendência de que um bom trabalho pode e deve ser feito por diversas pessoas em
cooperação por um objetivo comum. Por meio das plataformas online de design é possível que diversos
pro�ssionais trabalhem juntos, de qualquer lugar do mundo, para criar as melhores interfaces possíveis para os
usuários.
DESIGN DE INTERFACES EM REDES SOCIAIS
No design para mídias digitais não existe espaço para o preconceito. É preciso prestar atenção às tendências.
Na era das redes sociais, as conexões digitais, in�uências e comportamentos coletivos tornaram-se importantes
elementos de interferência no design. Abdin (2021, p. 8) observa que com o crescimento do número de usuários

das redes sociais ao redor do mundo, marcas e �guras públicas vêm tentando "aprender, participar e se
envolver ativamente com o que está 'se tornando viral' no momento, a �m de permanecer visível" e isso
certamente afeta o design para mídias digitais.
Para Lapolli (2009, p. 23) "as pessoas costumam acessar essas redes em momentos de descontração, como
forma de entretenimento. As empresas podem aproveitar esses momentos para oferecer seus serviços ou uma
experiência agradável ao público". As mídias sociais e suas interfaces conquistaram o público ao redor do
mundo por meio de designs amigáveis e intuitivos que permitem fácil compreensão dos recursos oferecidos,
experiência imersiva e �delização do usuário. É possível observar importantes lições do design interativo ao
analisar os elementos que contribuíram para o sucesso destas redes e suas interfaces sociais. Segundo Zago e
Polino (2015), uma boa interface social deve conter os seguintes elementos:
Per�l – É nesta parte que o usuário interage com outros por meio de uma interface. A página de per�l
geralmente apresenta dados do usuário fornecidos por ele e pelo sistema.
Conexões – As relações são a essência das interfaces sociais. Por meio das conexões – que podem ser explícitas
ou não – os vínculos que justi�cam a natureza social de uma plataforma ou mídia são demarcados.
Fluxo de conteúdos – As atualizações dos diversos usuários de uma rede social são demonstradas no �uxo de
conteúdos. A rede Twitter utiliza este recurso em sua timeline, assim como Facebook e Instagram nos seus
�uxos de feeds. É possível visualizar o que acontece em toda a rede, conforme níveis de privacidade dos
usuários, a partir deste elemento da interface.
Linguagem próxima – As melhores interfaces sociais são aquelas que apresentam uma linguagem simples e
próxima ao usuário, este recurso incentiva a participação e engajamento.
Incompletude – São necessários espaços abertos para que o usuário seja motivado a agir. As interfaces sociais
geralmente apresentam isso por meio de perguntas como: "no que você está pensando?" ou "o que está
acontecendo?".
Imersão – A interface social deve atrair o usuário, despertar seu interesse e fazer com que ele dedique tempo e
esforços na produção e consumo de conteúdos. Não é por acaso que as redes sociais mais populares do mundo
têm usuários que gastam diversas horas de todos os seus dias com elas.
No design de interação, as interfaces sociais podem desempenhar um importante papel. Identi�car suas
características e principais elementos é parte fundamental do processo de compreensão das demandas e
expectativas do usuário.
VIDEOAULA
Neste vídeo, vamos re�etir sobre a aplicação prática e experimentação de importantes conceitos teóricos do
design. Por meio da apresentação de softwares e plataformas, são demonstrados diversos recursos e
ferramentas úteis à criação do design de interação e interfaces para mídias digitais. Em uma perspectiva
re�exiva, são demonstradas também características e elementos das interfaces sociais que podem contribuir
com a criação de designs mais interativos e atraentes para o usuário. 

 Saiba mais
DaVinci Resolve
A edição de audiovisuais também é importante para o design de interação, e o DaVinci é um software
abundante em recursos para esta �nalidade. Ideal para a edição de vídeos, ele é capaz de criar efeitos
visuais e sonoros de muita variedade. Utilizado até mesmo na indústria cinematográ�ca de Hollywood, o
DaVinci é um dos favoritos no mercado. Apresenta uma versão gratuita, o Resolve, com poucas limitações
e bem próxima às capacidades da versão paga.
Desenho auxiliado por computador
Para aprender um pouco mais sobre o uso de softwares integrados ao UX Design, vale a pena conferir o
livro de Andre Luis Orthey, intitulado Desenho auxiliado por computador. Tem 216 páginas e está
disponível gratuitamente na biblioteca virtual.
A arte do design
O documentário “Abstrato: a arte do design” foi disponibilizado gratuitamente pela Net�ix na plataforma
Youtube e traz importantes re�exões sobre estética, processos criativos e os impactos do design no
mundo.
Videoaula
Para visualizar o objeto, acesse seu material digital.
Aula 1
BROWN, T. Design thinking: entenda o que é e como funciona. 2017 Disponível em: 
https://www.napratica.org.br/design-thinking-o-que-comofunciona/. Acesso em: 25 out. 2018.
CHEVALIER, M.; MAZZALOVO, G. Pró logo. São Paulo: Panda Books, 2007.
HELDMAN, K. Gerência de projetos: fundamentos. Rio de Janeiro: Elsevier, 2005.
KELLER, K. L. Building, measuring, and managing brand equity. New Jersey: Prentice Hall, 1998.
LOURENÇO, C. E.; CAMPOS JUNIOR, H. O que é uma marca? Ampliando o rigor teórico na de�nição do conceito.
2015. Disponível em: https://pesquisa-eaesp.fgv.br/sites/gvpesquisa.fgv.br/�les/arquivos/junior_2.pdf. Acesso
em: 15 fev. 2022.
MERONI, A. Strategic design: where are we now? Re�ection around the foundations of a recent discipline.
Strategic Design Research Journal, 1. January, 2008. pp. 31-38.
REFERÊNCIAS
5 minutos

https://www.blackmagicdesign.com/br/products/davinciresolve/
https://biblioteca-virtual.com/detalhes/ebook/608704f854aa8872fc616f16
https://youtu.be/q_k8fVNzbGU
https://www.napratica.org.br/design-thinking-o-que-comofunciona/
https://pesquisa-eaesp.fgv.br/sites/gvpesquisa.fgv.br/files/arquivos/junior_2.pdf
MOZOTA, B. B. Gestão do design: usando o design para construir valor de marca e inovação. Porto Alegre:
Bookman, 2009.
PASSOS, R. Design da informação: um modelo para con�guração de interface natural. Tese (Doutorado em
Design) - Departamento de Comunicação e Arte, Universidade de Aveiro, Aveiro, Portugal, 2014.
PONTES, I. Metodologias do design - XDM (eXtensible Design Methods). Design Culture, 2013. Disponível em:
https://designculture.com.br/metodologias-do-design-xdm-extensible-design-methods. Acesso em: 15 fev. 2022.
TELLUS. O que é design estratégico e como planejar de forma colaborativa, inovadora e sustentável. 2021.
Disponível em: https://tellus.org.br/conteudos/artigos/design-estrategico-planejamento/. Acesso em: 15 fev.
2022.
VIANNA, M. et al. Design thinking: inovação em negócios. Rio de Janeiro: MJV, 2012.
WHEELER, A. Designer de identidade visual. 2 ed. Porto Alegre: Bookman,2012. 
Aula 2
DONDIS, D. A. Sintaxe da linguagem visual. São Paulo: Martins Fontes, 1997.
FARIAS, P. Estudos sobre tipogra�a: letras, memória grá�ca e paisagens tipográ�cas. Tese (Livre-docência),
2016. Brasil: USP.
FLOR, M. The Golden Secrets of Lettering. New York: Princeton Architectural Press, 2017.
NUNES, P. Conheça as diferenças entre tipogra�a, caligra�a e lettering. Disponível em:
https://www.psndesign.com.br/blog/conheca-as-diferencas-entre-tipogra�a-caligra�a-e-lettering/. Acesso em: 15
fev. 2022.
PARADELLA, F. S. Teoria da forma. In: Criação da forma. Rio de Janeiro: UNESA, 2014, p. 1-9. Apud FISCHER, E.
Necessidade da arte. Trad. Leandro Kondel. 9 ed. Rio de Janeiro: Ed. Guanabara, 1987.
RÜTHSCHILLING, E. A. Design de superfície. Rio Grande do Sul: Editora da Universidade Federal do Rio Grande
do Sul, 2008. 
Aula 3
ELLWANGER, C. Design de interação, design experiencial e design thinking: a tríade que permeia o escopo
de desenvolvimento de sistemas computacionais interativos. 2013.
FALCÃO, C. S.; SOARES, M. M. Usabilidade de produtos de consumo: uma análise dos conceitos, métodos e
aplicações. Revista Estudos em Design. v. 21, n. 2, p. 01-26, Rio de Janeiro, 2013.
HASHIMOTO, M. Espírito empreendedor nas organizações: aumentando a competitividade através do intra-
empreendedorismo. São Paulo: Saraiva, 2006.

https://designculture.com.br/metodologias-do-design-xdm-extensible-design-methods
https://tellus.org.br/conteudos/artigos/design-estrategico-planejamento/
https://www.psndesign.com.br/blog/conheca-as-diferencas-entre-tipografia-caligrafia-e-lettering/
IBAÑEZ, M. 19 princípios de user interface design. Desenvolvimento para Web, 2019. Disponível em:
https://desenvolvimentoparaweb.com/ux/19-principios-user-interface-design/. Acesso em: 17 fev. 2022
MEMÓRIA, F. Design para internet: projetando a experiência perfeita. Rio de Janeiro: Elsevier, 2005.
PINHEIRO, A. P. S. UX design introduzido no desenvolvimento de interfaces grá�cas. TCC – Tecnólogo em
Comunicação Social, Design Grá�co, Brasília – DF, 2016.
SHARP, H.; ROGERS, Y.; PREECE, J. Design de interação [recurso eletrônico]: Além da interação humano-
computador. 3ed. I. Gasparini, Trans. Porto Alegre: Bookman Editora, 2013.
WEBUTERS BLOG. Di�erence between wireframe, mock-up, and prototype? 2020. Disponível em:
https://www.webuters.com/whats-the-di�erence-between-a-wireframe-mock-up-and-prototype. Acesso em: 15
fev. 2022.
Aula 4
ROGERS, Y.; SHARP, H.; PREECE, J. Design de interação: além da interação homem-computador. Porto Alegre:
Bookman, 2005.
SCHERER, N. Avaliação heurística e teste de usabilidade para softwares de design de interiores. 2018. 53. f.
Monogra�a (Curso de Bacharelado em Ciência da Computação), Universidade Tecnológica Federal do Paraná.
Campo Mourão, 2018.
ZAGO, G. S.; POLINO, C. A. Design digital e interfaces sociais: um estudo da interface do Twitter. Mediação (Belo
Horizonte), v. 17, p. 87-102, 2015.

https://desenvolvimentoparaweb.com/ux/19-principios-user-interface-design/
https://www.webuters.com/whats-the-difference-between-a-wireframe-mock-up-and-prototype