Mídias Digitais

Mariama Aquino

Curso Técnico em
Design Gráfico
 Mídias Digitais
Mariama Aquino

Curso Técnico em
Design Gráfico

Escola Técnica Estadual Professor Antônio Carlos Gomes da Costa

Educação a Distância

Recife

1.ed. | outubro 2022

 Professor Autor
Mariama Aquino
Revisão
Mariama Aquino
Coordenação de Curso
Lia Madureira Ferreira
Coordenação Design Educacional
Deisiane Gomes Bazante
Design Educacional
Ana Cristina do Amaral e Silva Jaeger
Helisangela Maria Andrade Ferreira
Izabela Pereira Cavalcanti
Jailson Miranda
Roberto de Freitas Morais Sobrinho
Revisão descrição de imagens Professor Antônio Carlos Gomes da Costa
Sunnye Rose Carlos Gomes
Catalogação e Normalização
Hugo Cavalcanti (Crb-4 2129)
Diagramação
Jailson Miranda
Coordenação Executiva
George Bento Catunda
Renata Marques de Otero
Kátia Karina Paulo dos Santos
Coordenação Geral
Maria de Araújo Medeiros Souza
Maria de Lourdes Cordeiro Marques
Secretaria Executiva de
Educação Integral e Profissional
Escola Técnica Estadual
Gerência de Educação a distância
Sumário
Introdução ................................................................................................................................... 5

1.Competência 01 | Conhecer as origens e evolução da Internet e o surgimento do ecossistema

digital, refletindo sobre o impacto das redes sociais para a comunicação e o design...................... 6

1.1 Breve história do surgimento da Internet...................................................................................................6

1.1.1 Estrutura da Internet ...............................................................................................................................9
1.2 O que é o ecossistema digital?................................................................................................................. 11
1.2.1 Ecossistemas Digitais na prática ........................................................................................................... 12
1.3 Contemporaneidade: redes sociais e design. .......................................................................................... 14
1.3.1 O design na comunicação visual das redes sociais ............................................................................... 17
2.Competência 02 | Entender a internet como ferramenta para o marketing, comunicação e
publicidade e a estratégia de comunicação nas redes sociais ...................................................... 23

2.1 Marketing e Internet. ............................................................................................................................... 23

2.2 Marketing e contemporaneidade ............................................................................................................ 25
2.3 Marketing Digital e profissionais envolvidos ........................................................................................... 29
3.Competência 03 | Conhecer os fundamentos do design de interface – UI, percebendo como o
designer gráfico pode atuar nesse universo ................................................................................ 33

3.1 O que é UI?............................................................................................................................................... 33

3.2 Elementos visuais do UI ........................................................................................................................... 38
3.3 Mãos na massa: quem está por trás do design de interface? ................................................................. 41
3.3.1 Wireframes e Protótipos ....................................................................................................................... 42
4.Competência 04 | Conhecer os fundamentos que norteiam a experiência do usuário – UX, a partir
das necessidades dos usuários e das empresas ........................................................................... 46

4.1 O que é UX design? .................................................................................................................................. 47

4.2 Etapas do processo de UX Design ............................................................................................................ 52
4.3 Qual a importância do UX design? ........................................................................................................... 54
Conclusão................................................................................................................................... 58

Referências ................................................................................................................................ 59

Minicurrículo do Professor ......................................................................................................... 60

Introdução
Olá, meu querido, minha querida! É massa ter você aqui comigo novamente, IHUU!
Seja muito bem-vindo, muito bem vida à disciplina de Mídias Digitais, do curso técnico
em Design Gráfico.
Essa disciplina é bem legal e trago muitas coisas atuais para que juntos, possamos
compreender melhor sobre como o design gráfico e Internet são quase irmãos de tão unidos e
inseparáveis que são. Iniciaremos nossos estudos fazendo uma viagem no tempo. Quem já parou
para pensar sobre o surgimento da Internet? Eita, essa garota está com a gente o tempo todo e vamos
conhecer a origem dela.
Ei, vem cá! Nessa disciplina também estudaremos o marketing. Você já sabe que o
designer tem o papel de criar soluções de maneira criativa e assertiva, isso inclui sua participação no
marketing. Então, é isso. Conheceremos essas três coisinhas que, juntas, são um super combo: design,
Internet e marketing.
O marketing identifica as necessidades do mercado e, quando falamos em mercado, é
quase impossível não pensar no cliente ou usuário. Eu disse que estudaremos coisas atuais. Não
disse? Sim, sim! Desse modo, conheceremos e desbravaremos novas maneiras e possibilidades de
fazer design pensando na interface e na experiência das pessoas. Eu estou falando do design de
interface - UI e design de usuário - UX.
Pega logo seu lanche e vem comigo ler e aproveitar esse e-book que está recheado de
informações!
Estaremos sempre juntinhos e juntinhas. Vem comigo!
Bons estudos!

5
1.Competência 01 | Conhecer as origens e evolução da Internet e o
surgimento do ecossistema digital, refletindo sobre o impacto das redes
sociais para a comunicação e o design
Olá, querido(a) estudante!
Nessa competência estudaremos um pouco de história. Eita, professora, lá vem!! Mas,
calma que é a história da Internet, e da Internet eu sei que você gosta. Se você já tem lá seus vinte e
poucos anos, assim como a professora que vos fala, você deve ter vivenciado um pouco das mudanças
que a Internet passou.
Lá no início dos anos 2000 a Internet precisava de sinal telefônico para estabelecer
conexão, era a chamada Internet discada então, já sabe, era bem lenta e se teu tio fizesse uma ligação
no telefone: já era a Internet, orkut, msn e tudo. Alguns anos passaram e chegou a Internet banda
larga no Brasil e amenizou esse “aperreio” todo.
Então, nessa competência conheceremos um pouco do trajeto da Internet desde sua
criação até os dias atuais e como tudo isso impactou na comunicação, inclusive, nas redes sociais.

Antes de iniciar a leitura, dê uma pausa para ouvir o podcast da primeira

competência. Trago um resumo do que estudaremos e te conto o que vai
acontecer ao longo da nossa disciplina!

1.1 Breve história do surgimento da Internet.

Já parou pra pensar como surgiu a Internet? E se eu te disser que tem tudo a ver com a
Guerra Fria?
Pois é! Tudo isso e mais um pouco. Ficou curioso(a)? Vamos conhecer um pouco dessa
história?
A década de 1940 foi um período de muitos acontecimentos históricos. Nessa época
acontecia a Guerra Fria. E se você não tá lembrado das aulas de história, eu vou dar uma lembrada
pra tirar essa poeira aí rsrsrs.

6
 A União Soviética era líder do bloco socialista, enquanto do outro lado tinha os Estados
Unidos da América, líder do bloco capitalista. Sentiu o peso, né? Ambos os lados tinham muito poder
e possuíam armas atômicas. Os dois lados tinham receio que começassem ataques e uma possível
guerra nuclear.
Na mesma época, a Rússia criou o programa Sputnik. O programa construiu uma série de
satélites artificiais para estudar questões espaciais, entre outras possibilidades. O lançamento do
Sputnik 1 há quase 65 anos pode ser considerado um dos principais “starts” para a criação da internet
nos laboratórios dos Estados Unidos da América. Confere o Sputnik na imagem a seguir:

Figura 1 - Sputnik 1.
Fonte: https://brasil.elpais.com/brasil/2017/09/29/album/1506688581_284829.html
Audiodescrição da figura: É possível observar na imagem o Sputnik. Satélite artificial feito em material metálico. Uma
bola com quatro artes semelhantes a patas na cor prata. Fim da audiodescrição

Aqui nesse link você pode conferir informações sobre o programa espacial
Sputnik, dá uma olhada
https://canaltech.com.br/espaco/saiba-mais-sobre-o-programa-espacial-
sputnik-que-virou-nome-de-vacina-na-russia-169769/

7
 Parece coisa de filme, não é? Mas tudo isso realmente existiu. Com o Sputnik lançado, a
União Soviética tinha domínio até do espaço! O território norte americano temia um ataque, visto
que, a URSS podia vigiar tudo.
Um ano após o lançamento do primeiro satélite, os EUA fundaram a ARPA. Que danado
é isso, professora? A Agência de Projetos de Pesquisa Avançados tinha o objetivo de desenvolver
novas tecnologias militares para retomar a liderança de tudo.
A ARPA desenvolveu a primeira Internet que, lógico que nem chega perto da que
conhecemos hoje. A chamada Arpanet foi o bebêzinho dessa grande rede de conexão. O objetivo da
Arpanet era construir uma rede de computadores que fosse independente de comandos
centralizados para conectar as bases militares e os departamentos de pesquisa do governo americano
e que pudesse resistir a tudo, inclusive, aos possíveis ataques nucleares.

Opa! Dê uma paradinha aqui na leitura e dê uma olhada na videoaula. Foi feita com
muito carinho pensando em você. Está bem interessante com vários
conteúdos que irão te auxiliar nos estudos.

Eu sei que você quer saber como era o funcionamento dessa tecnologia e já vou te contar
logo em seguida.
A rede de internet funcionava com troca de pacotes, em inglês “packet-switching”, na
troca as mensagens eram fragmentadas em pedaços e, ao chegar no destino final, os fragmentos se
reagrupavam para formar a mensagem completa. Em 1969 a Arpanet era apenas para uso militar,
mais tarde, entre as décadas de 70 e 80 seu alcance se expandiu para universidades, com a
capacidade de transmissão ainda que, com a capacidade de transmissão limitada e com uso de
telefones analógicos.
Olha só, até aí a transmissão era apenas de textos fragmentados, em 1989 um engenheiro
do Centro Europeu de Pesquisa Nuclear, Tim Berners-Lee, desenvolveu uma outra maneira de
organizar informações que iam além de textos, agora, também poderia ser em formato de imagem.
Era o formato hipertexto, que são os textos conectados através de links.
Com esse novo formato foi uma grande inovação e tornou possível a consulta de outros
dados em outros documentos que fossem sobre o mesmo assunto.

8
 Esse tipo de transferência de hipertexto, é o famoso HTTP (protocolo de transferência de
hipertexto) que eu tenho certeza que você conhece! Ainda nos anos 90, Berners-Lee lançou a world
wide web, traduzindo: rede mundial de computadores, que traduzindo mais ainda, é o WWW que é
o sistema de circulação de informações organizadas em hipertexto usado e conhecido mundialmente.
O cara é fera, não é?
A Internet é uma grande ferramenta de sistema de comunicação entre computadores
que conecta todo o planeta. Hoje temos computadores em casa, e os smartphones que podem nos
acompanhar em qualquer lugar.
É muito legal revisitar como as tecnologias foram desenvolvidas. Se hoje temos Internet
móvel, rede wi-fi e muitas outras possibilidades de conexão é porque muitos avanços aconteceram
ao longo da história.
Você e eu utilizamos a Internet praticamente todo dia e, agora, sabemos como ela se
originou. O próximo passo é entender melhor como ela funciona. Vamos lá?

1.1.1 Estrutura da Internet

Entender a estrutura da Internet é conhecer como ela funciona. E aí, bora nessa?
Confesso que acho muito curioso quando digitamos um endereço de algum site e, em
seguida, a página é encontrada. Como uma sequência de letras e/ou números nos direciona para um
site? Nós estenderemos como tudo isso acontece.
A estrutura da Internet tem uma classificação, e é classificada em cliente e servidor. Eita,
explica melhor, professora!
Vou te explicar, é simples: na computação, esse é o modelo de estrutura que distribui as
tarefas de trabalho entre os fornecedores de um serviço, esses fornecedores são os servidores, os
que solicitam/requerem os serviços, são os clientes. As funcionalidades como a troca de e-mail,
acesso à internet ou acesso a um banco de dados, são construídos com base no modelo cliente-
servidor. Na ilustração a seguir, você pode conferir como esse esquema funciona.

9
 Figura 2 - Modelo cliente-servidor
Fonte: https://es.wikipedia.org/wiki/Archivo:Cliente-Servidor.png
Audiodescrição da figura: A figura apresenta uma ilustração que representa o modelo cliente-servidor. O lado esquerdo
da figura é composto pela ilustração de dois computadores e um celular na cor cinza e azul claro classificados com a
palavra “cliente”. No centro da imagem uma nuvem com a palavra “Internet”. No canto esquerdo da imagem, a
ilustração de uma figura semelhante a uma CPU na cor cinza. Fim da audiodescrição.

Professora, já entendi como funciona essa comunicação cliente-servidor. Me explica

como esse acesso à Internet acontece.
Bora lá! Nós conectamos nossos aparelhos a uma Internet bem rapidinho, apenas ligando
o wi-fi ou alguma Internet móvel. Não é? Esse acesso acontece através de um ISP que é nada mais,
nada menos que um Provedor de Serviço de Internet. Esse provedor utiliza alguns componentes e
vou te apresentar os três principais, são eles:
1. CPE: que é o equipamento que vai conectar o dispositivo com a rede de acesso, tem
um exemplo que utilizamos muito que é o modem.
2. Rede de acesso: é toda a infraestrutura que vai ligar o seu dispositivo ao provedor da
Internet. Geralmente são as fibras óticas ou redes wi-fi.
3. POP: é o local onde ficam todos os equipamentos de um provedor.

Entendendo um pouco da história e todas essas definições que fazem parte do

funcionamento da Internet, fica mais fácil de entender como é todo esse universo, não é?
Estamos imersos nesse meio o tempo todo. Castells (2003) diz que a Internet é o tecido
de nossas vidas. Estamos na Era da informação.

10
 Já parou pra pensar na quantidade (em números) de acessos a sites, redes
sociais e pesquisas na Internet por segundo? Dá uma olhada nesse vídeo:
https://www.youtube.com/watch?v=5weA48t85-A

Nos próximos tópicos você conhecerá o ecossistema digital e como a Internet se relaciona
com o design. Vamos lá?

1.2 O que é o ecossistema digital?

Qual é a primeira coisa que vem em mente quando você pensa em ecossistema? Confesso
que eu lembro de natureza, animais e tudo que tenha alguma relação com meio ambiente. De fato,
o termo ecossistema é da área da biologia, e ecossistemas são grupos de organismos e comunidades
interconectados e que interagem de alguma maneira. É meio curioso ver esse termo sendo utilizado
no universo da tecnologia, não é? Afinal, o que é ecossistema digital? Continua a leitura que vou te
contar.
Olha só, para facilitar nossa leitura, sempre que você ler ECODigs, estarei falando de
ecossistemas digitais. Entendido?
Então, vamos lá!
De uma maneira mais geral, ECODigs tem tudo a ver com esse tipo de integração que
comentei anteriormente, porém, nas plataformas digitais. Ecossistemas digitais compreendem os
avanços das plataformas e marketplaces.

O marketplace é um modelo de negócio que revolucionou o comércio

eletrônico, por meio de plataformas que conectam diferentes lojistas e
clientes.

11
 Nas plataformas e marketplaces existem diversas ofertas de serviços que funcionam de
maneira integrada e, permitem que as lojas possam avançar com seus serviços e, também, oferecer
aos clientes uma melhor experiência e praticidade no momento de aquisição de algum produto ou
serviço. E aí, deu para entender?
Nesse período pandêmico, passamos a utilizar muito mais as plataformas digitais para ver
aulas, cursos, pesquisas e, principalmente, realizar compras on-line, não foi? Desde 2020 ficou cada
vez mais necessária a interação online entre as lojas e clientes e, é aqui que os ECODigs se fazem
super importantes na construção dessa relação.

1.2.1 Ecossistemas Digitais na prática

Agora que já conhecemos melhor o ecossistema digital, veremos como funciona na

prática através de um exemplo. Conheceremos como o ecossistema digital está presente em uma das
plataformas de compras mais conhecidas no mundo, a Amazon.
A Amazon é uma das plataformas que tem construído seus caminhos sobre o ecossistema
digital desde os anos 2000. O site possui uma infraestrutura enorme ao redor do mundo todo para
poder dar conta da quantidade imensa de clientes na plataforma eletrônica, mesmo assim, a Amazon
precisou alugar outros servidores a outras empresas para atender toda demanda, isso tudo levou à
criação da Amazon Web Services.
Com a criação da própria infraestrutura (Amazon Web Services), a empresa passou a
fornecer alguns serviços para outras empresas e aproveitou tudo isso para lançar um cardápio de
serviços da Amazon como o Prime vídeos, Prime Music, os estúdios Amazon, entre vários outros. Na
figura a seguir, é possível observar a imensidão do ecossistema da Amazon, observe:

12
 Figura 3 - Ecossistema digital Amazon.
Fonte: Benjamin Talin, MoreThan Digital
Audiodescrição da figura: A figura é composta por um círculo semelhante a um relógio de ponteiro, onde é rodeado
pelos ícones dos diversos serviços da plataforma Amazon. Fim da audiodescrição.

Atualmente, diversas empresas participam desse ecossistema da Amazon, oferecendo

centenas de serviços e exclusividades para os usuários da plataforma.
A Amazon é um mega exemplo de ecossistema digital, mas, outra milhares de empresas
também utilizam os ECODigs de alguma maneira, existem alguns tipos e vou te apresentar os três
principais, são eles:
1. Ecossistema digital funcional: é um tipo de ecossistema menor e mais simples.
Geralmente é composto por um número limitado de empresas parceiras. Apesar
de ser mais simples, é o ecossistema mais utilizado e mais fácil de ser encontrado
mundialmente. Empresas de automóveis, por exemplo, buscam esse tipo de
ecossistema onde as plataformas de serviços digitais das empresas parceiras com
a finalidade de construir um ecossistema focado em produtos limitados para um
automóvel inteligente.
2. Ecossistema de plataformas: esse tipo de ecossistema é um dos mais avançados,
pois utilizam plataformas digitais. Diferente do exemplo anterior, esse tipo pode
envolver milhares de parceiros, mas todos os parceiros utilizam uma plataforma
comum, e todas as partes trabalham em conjunto. Vamos de exemplo? O Google
Home é um exemplo bem massa! O Google (aquele que a gente conhece) é uma
plataforma comum onde produtores, engenheiros e desenvolvedores trabalham

13
 em conjunto criando ferramentas que utilizam o Google Home e, também,
oferecem produtos e serviços.
3. Super ecossistema de plataforma: esse último tipo é o mais complexo de todos,
pois necessita da integração de diversas plataformas. Geralmente, envolvem
muitas empresas e serviços diferentes e buscam ligar o utilizador ao ecossistema
da melhor maneira possível. Os maiores exemplos desse tipo de ecossistema, são
as empresas gigantes da tecnologia, como a Amazon e a Apple.

Em geral, podemos observar que os ecossistemas digitais tem muitos aspectos positivos
e vem crescendo cada vez mais. São diversos tipos e cada empresa vai se adaptando de acordo com
suas necessidades.
Além dos serviços que os sites podem oferecer, os ECODigs também fazem parte de
marcas que oferecem diversos tipos de produtos que se conectam de alguma maneira. Ficou
confuso? É muito mais fácil do que parece e, tenho certeza que você já está ligado. Um grande
exemplo disso é a marca Samsung que oferece diversos tipos de equipamentos com um sistema
próprio onde os aparelhos podem se conectar entre si: telefone com TV, relógio com máquina de
lavar, dentre outras diversas possibilidades.

Saiba mais clicando no link do vídeo que apresenta algumas marcas que usam
os ECODigs: https://www.youtube.com/watch?v=_n5ltswGaBw

1.3 Contemporaneidade: redes sociais e design.

Logo no início dessa competência vimos como aconteceu o processo de surgimento e

aperfeiçoamento da Internet. Atualmente, tudo ou quase tudo que fazemos depende dela e com a
pandemia vimos como a Internet e os dispositivos foram s-u-p-e-r importantes nos processos de
comunicação, estudos e profissionais.

14
 Recuero (2009) diz que o surgimento da Internet trouxe diversas mudanças para a
sociedade, entre as quais “a possibilidade de expressão e sociabilização através das ferramentas de
comunicação mediada pelo computador”.
Antes a comunicação de massa partia de um único emissor para todos, era assim: a
comunicação da televisão para o telespectador, a mensagem de um jornal impresso para um leitor…
Hoje é bem diferente, não é? A comunicação das mídias ou redes sociais são muito mais amplas,
alcançam muito mais gente (muito mesmo) e acontece de todos para todos.

Vamos lembrar o que é comunicação de massa?

A comunicação de massa tem a característica de chegar a uma grande
quantidade de receptores ao mesmo tempo, partindo de um único emissor.

Para continuarmos nossa conversa, vamos conhecer um pouco de como esse universo de
tantas redes sociais surgiu? Na figura a seguir, podemos observar algumas das redes mais populares
no mundo, observe:

Figura 4 - Redes sociais.

Fonte: https://neilpatel.com/br/blog/tudo-sobre-redes-sociais/
Audiodescrição da figura: A figura é a imagem de uma tela do menu de um aparelho de celular focando apenas em
alguns ícones de aplicativos. Os ícones são em formato quadrado com as bordas arredondadas. Os ícones são de
diversos aplicativos, são eles: Vimeo, Google +, Reddit, Twitter, Facebook, Instagram, LinkedIn, Youtube, Pinterest e
Skype. Todos são coloridos nas cores azul, branco, vermelho e tons de rosa.

Na figura anterior você observou alguns ícones dos aplicativos das redes sociais mais
populares. A Internet foi se popularizando e, a partir dos anos 2000 surgem outros tipos de serviços
e meios de comunicação que, também, são entretenimento, são as redes sociais.

15
 As mídias sociais e outros diversos tipos de serviços nesse mundo da Internet você já
conhece que eu “tô ligada!” Mas você sabe que nada surge do dia para a noite. Não é? Se hoje
estamos imersos nesse universo é porque muito já foi aprimorado. Antes dessa grande explosão que
é essa rede mundial, outros serviços de comunicação já existiam, por exemplo a tecnologia dial-up
nos EUA que era nada mais, nada menos que a internet discada (tempos difíceis haha).
Seguindo a história, um pouco mais a frente, em meados de 1980 é criado um sistema
que servia para convidar amigos para eventos e divulgar anúncios, os dados eram transmitidos por
linha telefônica e esse sistema foi conhecido como Bulletin Board System, ou apenas BBS.
Quando chegamos nos anos 90, começa um “boom”, com diversos avanços e melhorias
na infraestrutura dos serviços de comunicação e um grande marco é em 1985 quando a America
Online (AOL), oferecendo ferramentas onde as pessoas podiam criar perfis virtuais e construir
comunidades para utilizar como um meio para discussões, conversas, trocas de informações de
qualquer assunto que seja.
A AOL é considerada uma das pioneiras entre os chats, a antecessora do Orkut e MSN (os
20+ tão ligadinhos hahaha).

Para saber mais sobre as primeiras redes sociais, confira esse vídeo que é
muito legal e o Yan conta um pouco dessa trajetória das redes sociais,
sobretudo, no Brasil: https://www.youtube.com/watch?v=5MHbLHWVJSk

Demos essa viajada bem breve para nos situarmos e ajudar na compreensão da história
das redes sociais, mas eu sei que você é muito ligeiro e quer saber das coisas mais atuais. Então, bora
nessa!
A partir dos anos 2000, a Internet passou a ser muito utilizada tanto no trabalho, quanto
na casa das pessoas. Foi um aumento bem significativo, com isso, uma infinidade de serviços foram
surgindo nas redes.
Uma rede social muito utilizada e que tenho certeza que você já usou ou ouviu falar, é o
Fotolog. A rede consistia em uma plataforma de fotografias onde, junto com as fotos, a pessoa
poderia compartilhar alguma mensagem. Podemos achar a rede bem cafona mas, imagina o sucesso
que foi lá no início dos anos 2000 (risos). Confere a interface do Fotolog na figura a seguir:

16
 Figura 5 - Fotolog.
Fonte: https://medium.com/tend%C3%AAncias-digitais/novas-possibilidades-929e861fad5e
Audiodescrição da figura: A imagem é um print de tela da página Fotolog. Fundo preto e logo do site nas cores roxo e
branco localizado no canto superior esquerdo. No centro da imagem, na parte superior, janela de busca na cor branca
com uma lupa. O centro da imagem contém uma fotografia de um grupo de jovens entre 14 e 17 anos deitados de
maneira amontoada. Os jovens são de pele branca, cabelos castanhos e loiros. Vestem calça jeans em tons de azul claro
e escuro. Nas laterais direita e esquerda, miniaturas de fotos de carros e desenhos. Fim da audiodescrição.

Eita! Você observou que na figura anterior falamos de interface? Interface me lembra de
coisas relacionadas a layout que me lembra design gráfico? Faz sentido para você também? Acredito
que sim, então, pegamos esse “gancho” para começar nosso papo sobre o papel do design nas redes
sociais. Bora nessa!?

1.3.1 O design na comunicação visual das redes sociais

Vimos um exemplo de rede social do início dos anos 2000 que foi o Fotolog e, sabemos
que muita coisa mudou nesse mundo das mídias sociais. Certo? Agora, veremos como o design faz
parte da comunicação e está muito presente nas redes sociais.
Allen Hurlburt é um grande nome dentro desse mundo do design. Foi um diretor de arte
e realizou muitos trabalhos voltados para marketing para materiais impressos e design editorial. Allen
fala sobre sobre os padrões de comunicação que, antes, eram muito lentos e, agora, esses padrões
tem se tornado super acelerados, dessa maneira “ o público é praticamente bombardeado por uma

17
infinidade de imagens impressas ou projetadas, a tal ponto que muitas delas se tornam confusas e
sem significado” (1986, p. 91). Passou a ser necessário conhecimentos mais profundos dos designers
gráficos para organizar as informações e transformá-las em conteúdos visuais.

Saiba mais sobre Allen Hurlburt e alguns dos seus projetos acessando o link a
seguir: https://www-commarts-com.translate.goog/features/pioneer-allen-
hurlburt?_x_tr_sl=en&_x_tr_tl=pt&_x_tr_hl=es&_x_tr_pto=sc

As redes sociais vão além desse espaço de relacionamento e tem se tornado um grande
ambiente de publicidades, vendas e propagandas dos mais diversos tipos e, o design é fundamental
nisso tudo para os conteúdos e esse bombardeio de informações fazerem sentido, como Allen fala.
As marcas têm cada vez mais se direcionado para os meios digitais, sobretudo, as redes sociais, visto
que as redes têm um acesso muito vasto do público-alvo. Uma das redes sociais mais utilizadas pelas
marcas é o Instagram.
A plataforma tem como finalidade principal a criação de um feed composto por imagens
e, nele podem ser criados perfis comerciais com links, sites, telefones para contato, tudo para facilitar
a venda e comunicação. Observe na figura a seguir os feeds das marcas FARM e Perrier:

18
 Figura 6 - Feed FARM.
Fonte: https://casadeimagem.com/feed-harmonico-instagram/
Audiodescrição da figura: A figura é o print de tela do Instagram da marca de vestuário FARM. Em formato
retrato, fundo branco o logo e nome instagram no canto superior esquerdo da imagem, abaixo em formato
circular a logo da marca FARM, contorno de uma flor na cor verde. Ao lado direito do logo da marca,
informações da loja e site. O feed é composto por um quadrante de nove fotos dos produtos, roupas e tênis
nas cores verde, azul, amarelo e laranja. Fim da audiodescrição.

19
 Figura 7- Feed Água Perrier.
Fonte: https://casadeimagem.com/feed-harmonico-instagram/
Audiodescrição da figura: A figura é o print de tela do Instagram da marca de água Perrier. Em formato
retrato e fundo branco, no canto superior esquerdo em formato circular a logo da marca nas cores verde
escuro e o nome Perrier em tipografia de pontas quadradas na cor branca. O feed é composto por seis
imagens, sendo divididas em 2 linhas de 3 fotos cada. As fotos possuem os mesmos tons de verde, laranja,
coral e azul e mostram a embalagem da água na cor verde escuro. Fim da audiodescrição.

Como você já sabe, um designer deve ter aptidões e muita criatividade para solucionar
problemas e deixar as coisas mais interessantes organizando informações e imagens, segundo a
autora Gabriela da Silva, podemos afirmar que o “design é um elemento fundamental para agregar
valor e criar identidades visuais para produtos, serviços e empresas, constituindo em última análise,
a imagem das empresas no mercado” (2005, p. 5).
Atualmente tem sido fundamental para as marcas, empresas e até mesmo profissionais
independentes marcar aquela presença nas redes sociais. Quem nunca abriu o Instagram para dar
uma conferida em um restaurante que você viu em um panfleto? Ou viu o anúncio de um novo
produto e abriu o site ou Instagram da loja? Garanto que todo mundo já fez isso em algum momento.
Percebe como o perfil em uma rede social pode dar uma certa credibilidade e, consequentemente,
conquistar um possível cliente ou ao menos mais um seguidor que pode tornar-se cliente.
São novas formas de relacionamento e comunicação. As pessoas têm percebido isso e
cada dia mais conscientes dessa importância, têm buscado investir nesses meios e novas ferramentas
de comunicação que são bem mais interativas e obtém resultados mais assertivos.

20
 Já que nossa conversa sempre passeia pela história, vamos refletir um pouco sobre todas
essas mudanças. Hoje em dia os smartphones ganharam um espaço na casa de todo mundo, ou
melhor, nas mãos do povo! Esses aparelhos possuem telas interativas, as chamadas touch screen (um
aperreio quando quebra rsrsrs) que possibilitam interfaces muito mais legais e criativas.
Percebeu como o design nas mídias digitais tem crescido cada dia mais, não é? O design
para redes sociais também é chamado de social media design que utiliza as técnicas e estratégias do
design gráfico para serem aplicadas na criação de peças e conteúdos para serem utilizadas em redes
sociais.
O design para redes sociais também aplica os mesmos elementos e princípios que são
utilizados para outras aplicações. O branding (esse está em tudo) é o começo de qualquer projeto e
é fundamental para entender os objetivos da empresa, de uma campanha ou de uma marca. Observe
na imagem a seguir, a representação da elaboração de um protótipo de interface:

Figura 8 - Protótipo de uma interface.

Fonte: https://www.agenciaimma.com.br/design-grafico-para-redes-sociais/
Audiodescrição da figura: A figura é composta por duas mãos de pele cor branca. A mão esquerda segura um
celular na cor preta e este mostra a tela do aparelho com a imagem de ícones de um menu nas cores laranja,
azul e amarelo. A mão direita segura uma caneta na cor vermelha. A mão está posicionada como se estivesse
desenhando um celular em um papel branco. O fundo da imagem é branco com post its coloridos com
anotações. Fim da audiodescrição.

Você viu que o trabalho de um designer vai muito além de fazer uma arte gráfica. Um
designer gráfico deve compreender bem as necessidades do público e a concorrência, compreender
como funciona a navegação das pessoas e construir conteúdos que sejam relevantes de acordo com
a marca que está sendo trabalhada.

21
 A próxima competência dará continuidade ao que começamos a conversar por aqui.
Conheceremos como o marketing se faz presente nas redes sociais e eu ficarei muito feliz em trocar
figurinhas com você.
Vamos nessa?

22
2.Competência 02 | Entender a internet como ferramenta para o
marketing, comunicação e publicidade e a estratégia de comunicação nas
redes sociais
Olá meu querido, minha querida! Essa é a nossa segunda competência da disciplina de
Mídias Digitais. Após essa introdução sobre a história da Internet, que tal conhecermos um pouco
mais das diversas possibilidades e locais que ela está presente? Nessa competência você vai estudar
sobre o marketing e entender como a Internet faz parte disso.

Opa! Você pode fazer uma pausa rápida aqui na leitura e ir ouvir o podcast da
competência. Dá uma conferida! Lá eu te conto um pouco sobre o que
estudaremos ao longo da semana.

2.1 Marketing e Internet.

Ao longo dessa competência sempre estaremos fazendo ligações com a Internet, pois tem
total relação com mídias digitais. Agora, vamos entender um pouco mais sobre essa grande rede
mundial e como o marketing está inserido nisso. Bora lá?
O conceito de marketing que conhecemos tem evoluído e se transformado bastante
desde o seu surgimento. Tudo ou quase tudo que tem alguma relação com mercado já existe há m-
u-i-t-o tempo mas, teve um grande crescimento a partir da Revolução Industrial. Esse período é
caracterizado por trazer diversas inovações nas produções das indústrias e, a partir disso, o
surgimento de outras demandas de venda. É aí que surge o marketing e a necessidade de estratégias
de publicidade e design para viabilizar o contato entre cliente e vendedor de maneira assertiva.
O marketing envolve basicamente produto (marca, empresa) e cliente. Esse processo
estabelece um tipo de relação mais direta com o cliente e busca definir melhor o segmento de
estratégia de produto e preço, mercado, também segmenta a estratégia de distribuição e, diferente
do que parece, vai muito além do que apenas o momento de venda de um produto. Como Peter
Drucker apud Kotler (2000) afirma que “o objetivo do marketing é tornar a venda supérflua. A meta

23
do marketing é conhecer e compreender tão bem o cliente que o produto ou serviço se adapta a ele
e se venda por si só.”
Mas pensa comigo, a quantidade de marcas não é a mesma de vinte, trinta, quarenta anos
atrás. Não é mesmo?
Com essa crescente na variedade de marcas e fragmentação do mercado, a concorrência
cresceu de uma maneira gigantesca! Então, empresários junto com administradores de marketing
tem pensado e repensado em outras maneiras de conquistar esses clientes. É “babado” ou não é? E
se você está pensando que a Internet faz parte desse processo, você está mais do que certo(a).
Você já sabe que a Internet é um meio onde informações podem ser transmitidas e
compartilhadas para qualquer pessoa no mundo que esteja conectada nessa rede. Certo? Se lá no
início de tudo a Internet se limitava a uma rede de computadores, com o passar do tempo isso
modificou-se e passou a ser construída uma rede gigantesca de pessoas e, mais tarde, um ambiente
perfeito para os negócios.

Esse Balão é para te lembrar de assistir a videoaula. Preparei uma aula muito legal
que vai te auxiliar nos estudos dessa competência. Confere lá no nosso AVA.

Nesse novo modo de venda e consumo que se desenvolveu com a era digital, surgem
novas demandas também. As empresas têm recorrido a novas estratégias nesse meio tecnológico
observando que as tecnologias possibilitam novas maneiras de consumo e comunicação entre os
clientes e as empresas.
Essas novas necessidades são a base do marketing digital e como tudo, ou quase tudo que
estudamos passou por diversas mudanças, o marketing não estaria de fora dessa rsrsrs. No próximo
tópico estudaremos como o marketing tem acontecido no universo digital e como acontece esse
relacionamento entre empresa e cliente na contemporaneidade.

24
2.2 Marketing e contemporaneidade

Esse tópico é bem legal! Conheceremos melhor o marketing contemporâneo, mas, para
chegar no modelo de hoje muitas águas já rolaram. Pensei em contar para você um pouco da
trajetória do marketing narrando uma espécie de linha do tempo em ordem cronológica dividida por
décadas. Vem comigo!
Nossa linha do tempo tem início lá pela década de 50, mas, vale lembrar que esses
processos e técnicas que envolvem mercado já existem há muito mais tempo! O marketing em si com
esse nome, conceito e estratégias começam a aparecer a partir da Revolução Industrial. Você já sabe
que essa revolução é um marco para muitas coisas na história. Certo? Continuando…

O que é a idade contemporânea?

A Idade Contemporânea, também chamada de Contemporaneidade, é o
período atual da história ocidental e cujo início remonta à Revolução Francesa
(1789).
Fonte: https://pt.wikipedia.org/wiki/Idade_Contempor%C3%A2nea

A década de 50 marca o início da história do marketing no Brasil. Acredito que você

lembra de ouvir falar no governo de Juscelino Kubistchek lá nas aulas de história do Brasil da escola.
Ei, psiu, diga para mim que você lembra rsrsr! Esse período foi de muitas novidades e
desenvolvimentos tecnológicos no país.
Com essa crescente nas indústrias, marcas e a aparição da publicidade na televisão, rádios
e jornais, o marketing passou a ser bem necessário. A partir daí também surgem os primeiros estudos
relacionados ao marketing. O nome é bem chique, mas essa área nem é tão nova assim. Já pensou?
Chegamos na década de 60…
Por volta dos anos 60, as empresas começaram a construir departamentos mais
especializados em marketing. A necessidade de fazer anúncios de qualidade para promover a venda
deixou de ser opcional e tornou-se quase que uma necessidade de sobrevivência. Observe nas fotos
a seguir uma das primeiras publicidades da marca Nestlé no ano de 1969:

25
 Figura 9 - Publicidade Nestlé, 1969.
Fonte: https://br.pinterest.com/pin/308778118186037161/
Audiodescrição da figura: A figura é composta por duas imagens da vertical, sendo a do lado esquerdo a imagem de
uma menina em tons de rosa e do lado direito um menino em tons de azul, ambos de aproximadamente 7 anos de
idade, pele de cor branca, olhos escuros e cabelos castanhos claros. As crianças seguram um chocolate branco mordido.
A parte superior do anúncio tem a frase “É gostoso gostar de Nestlé” na cor branca e contorno em tons de rosa e
vermelho. Fim da audiodescrição.

No caso desse anúncio, é fácil de notar que é direcionado para crianças que, geralmente,
gostam muito de doces. É na década de 60 que, também, surgem as segmentações de mercado e a
definição de público alvo.
Nessa linha do tempo vou pontuando apenas os períodos e fatos mais importantes. Ok?
Então, sigamos para a década de 80. Para tudo e presta atenção aqui! Na história do marketing no
Brasil os anos 80 foram um grande “boom”. As marcas passaram a ter muitas concorrências, com isso,
passou a existir uma verdadeira “guerra de marketing” (imagina aquele barulhão de feira livre…). A
clientela passou a ser muito mais exigente que antes e as empresas buscavam cativar e atrair novos
consumidores.
A Era da informação veio com tudo, com tudo mesmo, pois no Brasil essa também foi a
época das altas inflações. E como fica o poder de compra com preços tão altos? Dessa maneira, com

26
a inflação alta e os salários congelados, o poder de compra dos consumidores teve uma queda
considerável.
Vamos dar mais um passo e chegamos na década de 90. Anos 90 a gente começa com
aquela palavrinha que tenho certeza que você já ouviu m-u-i-t-o: globalização. Pois é! As mudanças
que compreendem a globalização mudaram totalmente o jeito de fazer marketing que, na verdade,
continuará modificando-se.
É nos anos 90 que surge algo muito inovador que, para nós, já é muito comum, mas na
época foi um marco, é o marketing digital com os blogs, conteúdos para sites da web, aqueles links
patrocinados e, sobretudo, as redes sociais.
A partir da década de 90 surge um tipo de marketing que se preocupa com os valores
sociais e ambientais. E como é isso, professora? Nesse caso, as mídias sociais são mais interativas e
nesse meio é possível difundir mensagens que permitem um feedback constante entre a marca e a
sociedade.
Separa aquele seu look branco e o espumante, vamos de réveillon, a virada de século da
história do marketing. A virada para os anos 2000 tem características bem legais. Se nos anos 90 a
tecnologia já estava bombando, imagine agora, nos anos 2000?
Daí em diante as empresas passaram a utilizar cada vez mais os espaços das plataformas
digitais para divulgarem seus produtos. Pesquisar uma marca ou produto e comparar os preços
tornou-se muito fácil. Basta acessar um site, ou melhor, acessar as redes sociais e consultar os preços
para fazer aquela pesquisa, desse modo, a maneira de fazer marketing precisou fazer algumas
adaptações.
A trajetória do consumidor tem sido o foco das empresas, por isso, as redes sociais e sites
da web tem sido um ótimo suporte para estabelecer algum tipo de aproximação com o cliente. A
comunicação é mais rápida e direta, é tudo mais horizontal.
Humm… não sei se você percebeu, mas, a cada mudança no marketing, os objetivos
também deram uma repaginada. Antes o foco era no produto, agora, no cliente. Você sabia que existe
uma classificação para cada tipo de marketing?
Aponta a câmera para o QR Code a seguir e saiba mais sobre isso:

27
 Você também pode acessar através do link: https://itelligent.es/es/marketing-1-02-0y3-
0/
Agora você já conhece a história do marketing e como aconteceram as mudanças. No
próximo tópico estudaremos quem está por trás do marketing.
A virada do século marcou muitas mudanças nesse grande universo do marketing, como
vimos anteriormente, os objetivos do marketing passaram por algumas mudanças e foram se
adaptando às transformações das épocas. O crescimento dos e-commerces e o fortalecimento da
World Wide Web estão muito presentes nesse momento.
Até um tempo atrás os materiais de marketing eram feitos de modo manual e,
geralmente, aconteciam através de materiais impressos. Na Internet, os anúncios também surgiam
de forma muito invasiva. Quem nunca foi “atacado” por um Spam enquanto navegava em algum site?
Hoje, com o grande crescimento das redes sociais, isso ficou um pouco mais organizado. Os
algoritmos passaram a analisar melhor o que o usuário gostaria de ver.
O Facebook foi uma das primeiras e maiores plataformas para divulgação de marketing.
Os usuários do site também podem anunciar na plataforma que ainda é uma das redes mais usadas
no mundo.
Esse tipo de marketing que é bem comum na nossa rotina e acontece através das redes
sociais e sites e tem alcançado muitos espaços, é o chamado Marketing digital, então, é ele que
conheceremos agora.

28
2.3 Marketing Digital e profissionais envolvidos

O marketing digital surge a partir das novas demandas de mercado. Passou a ser uma
necessidade das empresas se fazer presente no ambiente digital e construir um ambiente atrativo e
agradável para os clientes também na Internet. Essa adaptação foi acontecendo aos poucos até
chegar no que conhecemos nos dias de hoje.
Lá no início da utilização da Internet, as páginas eram muito mais simples. Não existia essa
grande rede de comunicação. Os métodos e estratégias de marketing ainda tinham muito o que
desenvolver.
Se nos dias atuais o acesso à Internet ainda tem algumas limitações, imagine como era
anos atrás? É isso mesmo, era muito mais limitado por questões sociais e tecnológicas, tanto para
acessar em casa, quanto nas ruas, pois ainda não existia rede móvel. Desse modo, lá atrás, o
marketing acontecia de maneira off-line. Professora, não entendi nada! Calma que te explico.
Como tudo que conhecemos passa por transformações (inclusive nós), com o marketing
não seria diferente. Não é? E quando falo em marketing off line, é sobre a maneira que ele acontecia
antes do surgimento da Internet. O marketing acontecia através das mídias tradicionais das seguintes
maneiras, são elas:
Marketing impresso: São os cartazes, folhetos, jornais, revistas, cartões, inclusive,
correspondências.
Marketing no rádio: Antes da televisão, o rádio era um dos meios de comunicação mais
utilizados. Os anúncios aconteciam através de músicas e jingles que todo mundo já sabia decorado.
Os anúncios em rádio ainda são muito utilizados e atingem uma boa quantidade de ouvintes na região
onde a rádio toca.
Marketing na televisão: Esse meio é muito utilizado e todo mundo já deve ter visto algum
anúncio através da tv. Alguns têm uma música tão marcante que são inesquecíveis. Confere essa
campanha do Guaraná Antártica de 1991, ficou tão conhecida que em 2020 a marca fez uma
regravação, saca só os dois vídeos: https://www.youtube.com/watch?v=iDocol3-GaM e
https://www.youtube.com/watch?v=i2G-s_mQZvU
Marketing no telefone: Esse tipo de marketing muitas vezes acaba sendo um pouco
inconveniente. Quem nunca recebeu uma ligação de alguma marca oferecendo algum produto. É
muito utilizada até hoje principalmente por operadoras de cartões de crédito e telefonia.

29
Esses são os primeiros meios de marketing e alguns ainda são muito utilizados, mas foi no período
conhecido como Web 1.0 que o marketing digital cresceu junto com a popularização da Internet.

O primeiro Banner clicável é um grande marco do marketing digital. Em 1994 foi sua
primeira aparição na HotWired, que era uma versão digital da revista norte americana Wired. A
revista fez uma parceria com a empresa AT&T e criaram juntas uma campanha de maneira on-line
que se chamou “You Will”. Na imagem a seguir você pode conferir o banner:

Figura 10 - Banner campanha You Will.

Fonte: https://euquerosaber5.com/o-primeiro-banner-web/
Audiodescrição da figura: A figura é uma tira horizontal na cor preta. No canto esquerdo da tira tem a frase em inglês
“Have you ever clicked your mouse right HERE?” em tons coloridos e uma seta apontando para o canto direito também
nas mesmas cores. No canto direito da figura tem a frase “YOU WILL” na cor branca. Fim da audiodescrição.

Esse banner, apesar de não aparentar nada demais ou talvez nem chamar tanto sua
atenção, na época que foi feito alcançou um número considerável de clicks. 44% das pessoas que
visualizaram o banner, clicaram! Em português a frase do banner quer dizer “Você já clicou o seu
mouse aqui? Você vai!”. Quase uma obrigação rsrsrs.
Pois bem, o marketing digital é nada mais, nada menos do que o marketing que é feito
através das plataformas digitais, seja em sites ou redes sociais. O marketing reúne estratégias e
técnicas que auxiliam no alcance dos objetivos de uma marca, seja uma campanha específica ou não.
São muitas vantagens, pois o marketing digital é capaz de criar, filtrar e fazer a manutenção muito
melhor dos objetivos. É um meio mais barato e realiza análises mais assertivas.
Existem diversos tipos de marketing digital, os principais são: de conteúdo, redes sociais,
SEO, mídia paga e consultoria. E então, meu querido, minha querida do meu coração, depois de todas
essas leituras você parou para pensar em que momento entra o designer no meio disso tudo?
Seguinte…
Você já entendeu que o marketing utiliza algumas estratégias para alcançar o público de
maneira mais efetiva. Certo? Sim, sim! Tudo isso envolve anúncios e a imagem da marca. É aí que
você, futuro designer, vai entrar com tudo, pela porta da frente no tapete vermelho HAHAHA. Falando
sério, o designer é uma figura s-u-p-e-r importante dentro disso tudo.

30
 O marketing geralmente é desenvolvido por um publicitário ou analista de comunicação,
são eles que vão estudar o mercado que a marca está inserida e bolar melhor a estratégia para
alcançar os objetivos desejados pelo cliente que, neste caso, o cliente é a marca!
Isso não significa que um designer não saiba fazer essa análise ou até mesmo desenvolvê-
la, mas, geralmente, é no momento da análise e gestão da marca, que o designer entra com todo
pensamento sistêmico para potencializar os resultados.
Os projetos de comunicação são muito legais, pois na maioria das vezes podem ser
construídos em conjunto. O marketing e design é um grande exemplo disso.
Existem diversos tipos de agências e a equipe varia de acordo com a empresa ou projeto
que será realizado, mas geralmente envolve um gerente de marketing, um designer, um analista, um
programador, coordenador, redator e um assistente de marketing. Confere a figura a seguir:

Figura 11 - Ilustração de uma equipe de marketing.

Fonte: https://www.ekyte.com/guide/pt-br/como-fazer/quais-sao-os-profissionais-e-cargos-de-equipes-de-marketing-
digital/
Audiodescrição da figura: A figura é um organograma de uma equipe de agência de marketing. O organograma é
representado através de círculos azuis, são sete círculos com ilustrações de pessoas. Cada círculo tem a legenda com o
título de cada profissional, na ordem superior do canto esquerdo para a direita, são eles: Gerente de marketing,
designer, analista de marketing digital, programador, coordenador de marketing digital, redator e assistente de
marketing digital.

Vou te apresentar melhor o ofício de cada um integrante da equipe. Vamos lá!

31
 Gerente de marketing: é responsável pela elaboração e distribuição de um orçamento,
alcance de metas e dar aquela acompanhada no trabalho do restante da equipe.
Designer: Esse aqui você conhece! O designer elabora imagens, cria layouts de sites, cria
email-marketing, elabora anúncios específicos para mídias digitais, como o Google Ads ou Facebook.
Analista de marketing: Geralmente é quem faz a captação de estratégia junto com o
cliente, planeja a temática das campanhas, analisa o portfólio, etc.
Programador: É responsável pela construção das camadas de sites e aplicativos.
Coordenador de marketing digital: Como o próprio nome já sugere, esse é responsável
por coordenar a distribuição de tarefas da equipe, também avalia o atendimento, produtividade, etc.
Redator: É quem elabora roteiros de vídeos, textos para os anúncios e para produção de
conteúdo no geral.
Assistente de marketing digital: Envia e recebe demandas, faz relatórios, atualiza sites e
pages, faz o atendimento em mídias sociais. Geralmente tem algum conhecimento em edição de
imagem, pois pode ajudar na criação de conceito das campanhas.
Esse é um dos exemplos de equipe, mas como disse no início, pode diminuir ou aumentar
a quantidade de profissionais a depender do porte da empresa e projeto. Um profissional sempre
dialoga com o outro para executar a construção de um projeto.
Nesse link você pode conhecer outros profissionais que também trabalham com
marketing, vale a pena dar uma conferida: https://www.ekyte.com/guide/pt-br/como-fazer/quais-
sao-os-profissionais-e-cargos-de-equipes-de-marketing-digital/
Nessa competência conhecemos a história do marketing, sua importância para a
comunicação e quem são os profissionais envolvidos. Se liga! Na próxima competência estudaremos
sobre design de interface - UI, esse tipo de design busca soluções que facilitem a experiência do
usuário com objetos físicos e digitais. Ficou curioso? Continue a leitura.
Vem comigo!

32
3.Competência 03 | Conhecer os fundamentos do design de interface – UI,
percebendo como o designer gráfico pode atuar nesse universo
Olá meu querido, minha querida. Se você chegou aqui é porque ficou curioso pra saber
sobre design de interface. Acertei?
Chegamos na terceira competência da nossa disciplina de Mídias Digitais e aposto que
você já está bem sabido sobre muitas coisas. Nas competências anteriores conhecemos a respeito da
origem da Internet, redes sociais e, sabemos que vivemos na Era da informação. Tudo acontece muito
rápido, são muitas mudanças e o acesso às informações tem se tornado um pouco mais fácil do que
anos atrás.
Apesar das novas tecnologias, não é de hoje que vivemos cercados por ela. Você viu como
os avanços tecnológicos já tem bastante tempo que dá até para a gente comemorar aniversário dela
rsrsrs.
Atualmente vivemos grudados em telas, seja no celular, no computador, televisão ou
outros dispositivos. Essa interação “pessoa-máquina” faz parte do nosso dia a dia. E é sobre telas e
essas interações que estudaremos, ou melhor, sobre interfaces!

Eu sei que você está com saudade da minha voz rsrs. Dá um pulinho no nosso
AVA e escuta o podcast da nossa terceira competência. Te apresento o que
você vai estudar e, garanto que só tem coisa boa!

3.1 O que é UI?

Então vamos lá! Para começo de conversa, o que é design de interface? Design de
interface ou UI (lê-se “uái”) são ações de planejamento e desenvolvimento de soluções que
proporcionam a melhor experiência possível para o usuário e sua interação com um programa, jogo,
tela de celular, televisão, dentre outros.

33
 Que tal dar uma visitada no AVA e conferir a videoaula? Está bem
interessante e com muitas informações que podem te ajudar nos estudos.
Vai assistir!

De modo geral, a interface é a parte visual, arquitetura da informação, a maneira de

navegação, usabilidade e transição entre telas. São ferramentas e recursos que podem melhorar a
maneira como o usuário vai se relacionar com o produto/serviço. Por exemplo, quando você abre um
arquivo tipo documento Word em um computador, a interface de usuário vai permitir que você veja
todas as informações da tela e, também, opções de botões e comandos de interações com
ferramentas para editar o documento.
Existem alguns tipos de interfaces, vejamos as três principais:
1. Interface gráfica: São os aspectos visuais e geralmente acontecem a partir de uma
tela de um celular tipo smartphone.
2. Interface de voz: Esse tipo de interface já podemos deduzir pelo nome. Interface
de voz são programas com capacidade de identificar e interpretar o que está sendo
falado. Exemplos muito conhecidos são a Siri no IPhone e o comando de voz do
Google.
3. Interface por gestos: Esse tipo de interface permite interação através de gestos, o
famoso “arrasta para cima” do Instagram e as ações de rolar abas, subir uma página
da web no celular, fazer um formato de pinça com os dedos para ampliar ou diminuir
uma foto no telefone são grandes exemplos desse tipo de interface.

Além dos tipos de interfaces, existem os elementos. Vamos conhecê-los?

Os elementos são divididos por categorias, começaremos pelos elementos interativos.
Esses elementos são utilizados na comunicação entre sites e aplicativos, onde o usuário utiliza
elementos de controle de entrada. São eles:
Botões - Os botões são as ferramentas para realizar ações em menus, formulários, sites,
etc. Muitas vezes são acompanhados por ícones e textos.

34
 Figura 12 - Botões
Fonte: https://br.freepik.com/vetores-premium/elementos-da-interface-do-usuario-para-botoes-de-controle-do-music-
player_10080388.htm
Descrição da figura: Print de botões de play, pause, adiantar e voltar música nas cores azul, roxo e branco. Fim da
descrição.

Checkboxes - É um tipo de elemento que permite que o usuário selecione mais de uma
opção. Um grande exemplo são os formulários online.

Figura 13 - Checkboxes em um formulário.

Fonte: https://material.io/develop/web/components/input-controls/checkboxes
Descrição da figura: Print de formulário com opções de marcação nas cores roxo e branco. Pequenos quadrados na cor
branca com as palavras Additions, Pickles, Tomato, Lettuce e Cheese. Fim da descrição.

Radio Buttons ou botões de rádio - Esse elemento é o oposto dos elementos que você
viu anteriormente. Permite a seleção de apenas uma opção por vez. Também é muito utilizado em
formulários em perguntas de sim e não.

35
 Figura 14 - Botões de rádio
Fonte: https://chiamakaikeanyi.medium.com/using-radio-buttons-in-android-b2fbccdbf2f3
Descrição da figura: Print de tela de formulário com três opções em bolinhas na cor branca com um contorno fino na
cor azul. De cima para baixo as opções “one, two e three” na cor preta. Apenas a opção “one” está marcada com a
bolinha completamente pintada na cor azul. Fim da descrição.

Toggles - Esse elemento compreende os botões de ativar ou desativar, ou, liga e desliga.
Geralmente tem nos despertadores do celular.

Figura 15 - Botões de toggles

Fonte: https://medium.com/@tanmaysongade/toggles-yes-no-or-may-be-1c6df0706c17
Descrição da figura: Ilustração representando botões de ativação. Fundo da imagem na cor verde claro. No centro, na
parte superior da imagem há um botão de forma semelhante a uma elipse na cor verde escura, com uma letra V na
esquerda e uma bola no lado direito na cor branca indicando alguma função ativada. Logo abaixo, há um botão de
forma semelhante a uma elipse na cor cinza, uma bola no lado esquerdo na cor branca indicando que a função está
desativada.

Campo de texto ou inputs: Inputs são os campos para inserção de texto. Pegando gancho
nos exemplos dos formulários, o campo de texto em um formulário é onde inserimos nosso nome,
email, endereço, etc.

36
 Figura 16 - Campo de texto
Fonte: https://dribbble.com/shots/4908813-Invalid-Email-Error
Descrição da figura: Print de tela do campo de texto para inserção de email. Campo de texto na cor branca no centro da
imagem com a palavra email. Fundo da imagem na cor verde claro. Fim da descrição.

O segundo grupo que iremos conhecer é o de elementos de navegação. A navegação

serve para o usuário passear por um aplicativo ou site e os elementos de navegação permitem que
busquem informações ou funcionalidades. Auxilia o usuário na busca de conteúdos.
Assim como os elementos interativos que vimos anteriormente, os elementos de
navegação também são divididos em alguns tipos. Conheceremos alguns:
Iniciando pela navegação estrutural. A navegação estrutural diz respeito à hierarquia dos
conteúdos. É a organização de um site ou aplicativo em seções e subseções. Essa organização facilita
um “bocado”. Não é?
O segundo tipo é a navegação associativa. Como é isso, professora? Vem comigo!
Esse tipo de navegação conecta conteúdos que sejam similares ou que, de alguma
maneira, sejam relacionados. Os links relacionados são um exemplo.
A navegação utilitária é o outro tipo que conheceremos. Assim como os outros tipos, ela
também serve para ajudar o usuário. Não segue princípios de hierarquia e funcionalidade. Os campos
de pesquisa dentro de um site, é um exemplo bem legal. Aqueles campos onde digitamos algo
específico para realizar uma busca.
Interfaces possuem diversos elementos para fazer funcionar a interação, movimentação,
navegação e informação nos sistemas. Agora, focaremos nos elementos visuais. O design visual,
como o nome já sugere, determinará como será a apresentação visual disso tudo. É bem legal!

37
3.2 Elementos visuais do UI

Ao contrário do que muitos pensam, essa parte visual não está ligada apenas à estética.
Lógico que é interessante que seja bonito, harmonioso e tenha uma aparência criativa, mas,
sobretudo, precisa ser útil e atender os objetivos do aplicativo/site e, principalmente do usuário.
A seguir, os principais elementos visuais que tenho certeza que você já conhece.

1. Cor:
O uso da cor é algo muito forte. A construção de uma paleta de cores deve ser pensada
dialogando com a estética, objetivo e acessibilidade, sempre. Ao escolher as cores da interface de um
site, por exemplo, não se esqueça de considerar o objetivo principal que se deseja. A cor é um dos
elementos mais eficazes na comunicação e, também, na identidade de uma marca.
A marca de vestuário FARM tem uma proposta que transmite leveza, cores suaves que
remetem à natureza. Observa na imagem a seguir a paleta de cores de uma aba de um menu do site:

Figura 17: Site FARM

Fonte: https://nanuvem.farmrio.com.br/
Descrição da figura: Print do site da loja FARM. Fundo da imagem na cor azul claro com textura representando nuvens.
No centro da imagem, ilustração da fachada da casa Farm na cor amarelo e rosa claro. A casa é rodeada de flores nas
cores verde, rosa e amarelo. Atrás da casa, ilustrações de coqueiros na cor verde. “Farm na nuvem pode entrar” escrito
na parte superior central da imagem. Fim da descrição.

38
 2. Tipografia:
A tipografia é um elemento que sempre vai nos perseguir rsrsrs. Todo ou quase todo
conteúdo em sites, aplicativos, games, entre outros, contém pelo menos uma parte de conteúdo
textual. Logo, devemos dar uma atenção especial a esse elemento. O design de qualquer fonte deve
ser legível. É interessante que seja criativa, mas, também, fácil de ser lida.
A tipografia é tão importante que alguns logos de empresas utilizam apenas dela para
criar a identidade da marca, um exemplo disso é a empresa Uber que criou uma fonte própria para a
marca. Observe a figura a seguir:

Figura 18 - Logo Uber.

Fonte: https://logodownload.org/uber-logo/
Descrição da figura: A imagem apresenta o logo do aplicativo Uber. Quadrado preto com o nome Uber em branco. Fim
da descrição.

Outro exemplo interessante de logo é a fonte utilizada pela marca FARM. Observe na
imagem a seguir o print do site da loja FARM, a tipografia bem minimalista e simples dialogando com
o propósito da marca e paleta de cores:

39
 Figura 19 - Site FARM
Fonte:
https://www.farmrio.com.br/novidades?gclid=Cj0KCQjwxveXBhDDARIsAI0Q0x21PfSabkxXVuUaKJdXIvOg13E9VSuEg45o
QY3SuvYLWzj7YhpwnxEaAotVEALw_wcB
Descrição da figura: Print da página inicial do site da FARM. Ilustração digital em orientação horizontal representando
uma praia com coqueiros, guarda sol e os morros de vegetação do Rio de Janeiro no fundo da imagem na cor verde. No
canto direito, a representação de um casal de roupas estampadas segurando balões de aniversário. No centro da
imagem, anúncio de promoção comemorativa de aniversário da marca na cor branca. Fim da descrição.

3. Ícones e imagens:
Os ícones são muito úteis por representarem graficamente a ideia e funcionalidade de
algo. Imagens tipo ilustração ou fotografia são suportes poderosos! Expressam a personalidade de
uma marca, podem provocar emoções, dentre outras coisas. Auxilia também na navegação do
visitante no site. São ferramentas muito potentes, mas não podem ser utilizadas de qualquer
maneira.
Observe na imagem a seguir alguns ícones presentes no site da FARM apontando algumas
das propostas da marca que é a sustentabilidade e responsabilidade na matéria prima:

Figura 19 - Anúncio site FARM.

Fonte: https://www.farmrio.com.br/
Descrição da figura: Print do site da FARM. Imagem em forma de quadrado contendo no centro a fotografia de um
vestido longo de mangas longas nas cores amarelo e rosa. Na parte superior da imagem a frase “Original Farm”. Nas
laterais do vestido, ícones nas cores azul e verde com informes sobre produto sustentável e matéria prima responsável.
Fim da descrição.

Para os três exemplos utilizei a mesma marca para facilitar a compreensão, mas você
pode analisar outros sites ou aplicativos. Que tal?
Em todas as composições gráficas, a organização é fundamental. Nas interfaces não seria
diferente. A hierarquia visual é super importante nos cuidados com a ordem e tamanho de todos

40
elementos que fazem parte de uma tela. É i-m-p-o-r-t-a-n-t-í-s-s-i-m-o que os elementos estejam
posicionados de uma maneira que o usuário possa entender (até de maneira inconsciente) o que é
mais importante ali naquela página, desse modo, devemos saber organizar muito bem um layout.
Depois de toda essa leitura, aposto que você quer saber como um designer pode atuar
nesse meio. Acertei? Diga que sim haha! Conheceremos sobre essa atuação, agora.

3.3 Mãos na massa: quem está por trás do design de interface?

Após conhecer os principais elementos do design de interface ou UI, vamos entender

quem é o profissional que está por trás de uma bela interface e como são as etapas desse processo.

Você, estudante de design gráfico, já deve estar cansado de saber sobre as principais
habilidades de um designer. Certo?
Um designer tem o poder nas mãos de traduzir uma mensagem de um cliente (produto,
marca, empresa) utilizando textos e imagens. Quase uma alquimia rsrs. No caso de um designer
gráfico, em geral os trabalhos têm um foco maior na comunicação e convencimento, o que diferencia
um pouco do UI, esse segundo tem o foco na usabilidade!
Mas, como já falei lá no início dessa competência, a questão visual é muito importante
aqui, e é aí que entra o papel grandioso de um designer gráfico. Essa união entre texto, imagem e
usabilidade é o combo perfeito. Um designer gráfico é o profissional perfeito, pois tem um
background para desempenhar muito bem esse ofício.
Designer de interface é o profissional que será responsável por toda a aparência, ou
melhor, toda interface de um site, aplicativos, programas, produtos digitais em geral. São realizadas
tarefas iguais ou quase iguais às tarefas de construção de peças gráficas. Como assim? Seleção de
cores, tipografia, organização do layout, todos os conhecimentos de sintaxe e linguagem visual para
tornar uma página bonita, harmoniosa, prática e útil. Todos esses conhecimentos servem para criar
um ambiente esteticamente agradável e de fácil navegação para o usuário. Não podemos esquecer,
nunca, da acessibilidade.
O público visitante de um site na web pode ser muito diverso, desse modo, é interessante
que uma interface seja acessível.

41
 O designer de interface de usuário executa projetos exclusivamente digitais, sendo assim,
é fundamental o conhecimento mínimo do uso de plataformas digitais como Photoshop, Illustrator,
InDesign e proficiência em HTML e CSS.
Existem diversas especializações e formações complementares em UI. Vale dar uma
pesquisada e investir caso tenha interesse nessa área de atuação.
A maioria dos projetos de design seja um projeto físico ou digital, passam por uma etapa
de testes e prototipação, no UI também acontece essa fase de teste. Vamos entender melhor essa
etapa no próximo subtópico.

3.3.1 Wireframes e Protótipos

Em design nos deparamos com muitas palavras, termos, conceitos e programas em inglês,
até aqui você já conheceu vários. Achou pouco? Então, tome mais um rsrsr. Vamos conhecer o
Wireframe. Que danado é isso? O nome parece algo estranho, mas, é nada mais, nada menos que
uma espécie de rascunho, neste caso, é o rascunho de uma interface. É a representação de uma
maneira mais simplificada de uma tela e todos os elementos que estarão nela.
Por que Wireframes são legais, professora?
• Auxilia na pré-visualização do produto final;
• Permite a co-criação entre integrantes de uma equipe;
• Permite a realização de modificações rápidas;
• Poupa tempo e dinheiro.
Bem, e como fazer isso? É o tipo de protótipo que pode ser feito manualmente com papel
e caneta, programas de desenho, aplicativos ou softwares. O importante é testar! Observe na imagem
a seguir um exemplo de Wireframe feito em papel:

42
 Figura 20 - Wireframe em papel
Fonte: https://desenvolvimentoparaweb.com/ux/wireframe-web-guia-completo/
Descrição da figura: Desenho manual feito em caneta preta digitalizado. A imagem apresenta um rascunho
representando telefones celulares. O desenho possui setas apontando e destacando ícones de interface de celular. Fim
da descrição.

Agora, vamos conhecer sobre os protótipos. Diferente de Wireframe, os protótipos têm

o objetivo de, além de pré-visualizar, testar o processo e funcionamento do produto final. Protótipos
de produtos digitais geralmente já são feitos com muito acabamento. São importantes por permitir
a experimentação, testagem do funcionamento e refinamento dos detalhes finais.
Existem alguns tipos de protótipos e eles variam de acordo com a finalidade. Podem ser
de alta, média ou baixa fidelidade. Os de média e alta fidelidade, geralmente são testados junto com
o cliente já para validar a versão final do produto. Os de baixa fidelidade são utilizados para dar uma
refinada mais profunda nas ideias.
O designer de interface que, muitas vezes, também é um designer gráfico é quem
geralmente constrói os protótipos. Existem programas próprios para construção desses protótipos,
neles é possível projetar wireframes, protótipos de média e alta fidelidade e até renderizar os
projetos. Vejamos alguns programas a seguir:

43
 1. Sketch

Figura 21 - Tela do Sketch

Fonte: https://webflow.com/blog/ui-ux-design-tools
Descrição da figura: Print de tela do programa Stetch. Tela em orientação horizontal nas cores branco e cinza. Laterais
direita e esquerda e parte superior da tela na cor cinza apresentam ícones de ferramentas de edição do programa. No
centro da imagem, a imagem de uma embalagem de papel na cor marrom com detalhes verde e preto. Fim da
descrição.

O Sketch é uma ferramenta muito conhecida dentro dos profissionais de design. É um

programa de interface simples e intuitiva e permite a elaboração de protótipos de forma colaborativa,
é um dos mais utilizados por quem está iniciando na área de UI.

2. Adobe XD

44
 Figura 22 - Tela do programa Adobe XD
Fonte: https://maze.co/collections/ux-ui-design/tools/#sketch
Descrição da figura: Print de tela do programa Adobe XD. Tela em orientação horizontal nas cores branco, azul e cinza.
Laterais direita e esquerda e parte superior da tela na cor cinza apresentam ícones de ferramentas de edição do
programa. No centro da imagem, a imagem de duas interfaces de um aplicativo de banco para celular na cor azul. Fim
da descrição.

Esse programa é de nível um pouco mais complexo. Permite organizar o fluxo de trabalho
para a criação de projetos móveis e desktop. Também permite realizar a construção de protótipos e
compartilhamento.
Além de testar através de protótipos, é importante uma testagem de usabilidade. É um
método que permite observar diretamente a experimentação do usuário com o produto. Os testes
podem ser de observação e testes mais diretos com ferramentas que captam as ações dos usuários,
os toques na tela, o movimento dentro de um site, os acessos às tarefas, dentre outras ações. O teste
de usabilidade é para ter uma análise qualitativa.
Por que é importante?
• Permite identificar problemas no design do produto;
• Tem como observar exatamente o que pode ser melhorado;
• Entender como funciona as preferências dos usuários.

De modo geral, testes de protótipos e de usabilidade são de extrema importância para a

elaboração de projetos. Pode garantir um melhor funcionamento.
Para ficar mais por dentro da área, dá uma conferida nesse vídeo para entender como
funciona na prática o dia a dia de um UI design: https://www.youtube.com/watch?v=InGacP20a14
Na próxima competência estudaremos sobre a experiência do usuário e mais um novo
campo do design, o UX design. UI e UX são quase irmãos!
Continue a leitura para conhecer mais.

Vem comigo!

45
4.Competência 04 | Conhecer os fundamentos que norteiam a experiência
do usuário – UX, a partir das necessidades dos usuários e das empresas
E aí, queridinho(a) do meu coração. Finalmente chegamos na nossa 4° competência,
também conhecida como a última dessa disciplina. Mas não pode relaxar porque vem muita coisa
por aí. Estás pronto(a)?
Vou te contar uma coisa. Desde as máquinas de lanches (tipo essa da imagem a seguir),
cafeteiras que têm em empresas, aplicativos e sites envolvem interações que geram algum tipo de
sentimento ou impressão nos usuários. Esse tipo de interação e experiência faz parte do UX, que é
nada mais, nada menos do que a experiência do usuário.

Figura 23 - Máquina de lanches

Fonte: https://www.toktake.com.br/maquina-lanches-empresas
Descrição da figura: Fotografia de uma máquina de lanches. Máquina na cor preta de estrutura semelhante a um
armário com prateleiras. Prateleiras com lanches tipo salgadinhos e biscoitos de diversas cores (laranja, azul, rosa,
branco e amarelo). A lateral direita da máquina contém botões de seleção de lanche e máquina de cartão. Fim da
descrição.

46
 Dá uma parada rápida aqui e vai ouvir o podcast antes de seguir a leitura!

O UX design é quase que uma arquitetura que tem o poder de melhorar a experiência do
usuário com produtos e tecnologia. Mais do que isso, UX compreende toda a experiência do usuário
com o mundo, com serviços, até mesmo com uma embalagem. Essa área tem crescido bastante
devido às novas necessidades do mercado. E como é que funciona isso? Para que serve? Como faz UX
design? Perguntas como essas e muitas outras que vão aparecer no meio do caminho, vou te
respondendo ao longo da competência. Vamos nessa?

4.1 O que é UX design?

Apesar do termo parecer algo bem moderninho, UX design é quase um coroa de trinta
anos rsrs. Bem no começo dos anos 90, um rapaz chamado Don Norman popularizou o termo no
mundo. Quando trabalhava na Advanced Technology Group da Apple, Don repensou muito sobre a
experiência do usuário e usabilidade de produtos e plataformas.

Figura 24 - Don Norman

Fonte: https://gabrielsilvestri.com.br/o-que-e-ux-design/4-don-norman/
Descrição da figura: Fotografia de Don Norman em preto e branco. Homem de meia idade, pele branca, rosto
arredondado, com barba e cabelos lisos em tons grisalhos. O homem usa óculos e veste terno de cor escura. Fim da
descrição.

47
 Já pensou nas experiências que você já teve com um celular, por exemplo? Aquele
aparelho que você adquiriu e gostou do botão de volume, mas não gostou do desempenho do
aparelho, ou que gostou de tudo que o aparelho te oferece desde um botão macio de liga e desliga
até o processador rápido? Independente de ter sido uma experiência boa ou ruim, tudo isso foi
pensado na criação do produto e da interface do mesmo.
Foi pensando nessas experiências como a do tamanho da caixa de um produto à
montagem de um computador que Don Norman criou o conceito UX. Assiste esse vídeo e confere o
que Don fala, de maneira bem breve sobre o que é o UX:
https://www.youtube.com/watch?v=9BdtGjoIN4E&t=103s
Você pode saber mais sobre Don Norman acessando esse link a seguir:
https://online.pucrs.br/blog/public/quem-e-don-norman-biografia

Êpa! Vim te interromper para te lembrar de ir assistir a videoaula!

Professora, me conta mais sobre o que é UX design. Explico tudo agora!

UX é uma abreviação para User Experience Design. Eita! Em português, significa Design
de Experiência do Usuário. Agora, já deu para ter uma ideia. Não é?
É um campo dentro do design que busca garantir a melhor experiência do usuário diante
de um serviço ou produto, mas, tudo isso através de um bom design bem estruturado, organizado e
intuitivo.
O foco do UX é o humano em primeiro lugar, e isso quer dizer que a interação do usuário
com determinado produto é importante do início ao fim. Essa interação pode ser desde o uso de um
aplicativo do dia a dia, a compra feita em um site ou até mesmo a seleção de um cafezinho em uma
máquina de recepção.
A área da UX constrói o caminho da experiência (como já falei anteriormente). É quase
um desenho dessa interação do usuário com o produto e não se restringe apenas a produtos digitais.
São considerados a tecnologia, os negócios e, sobretudo, as pessoas. É uma tríade. Observe na
imagem a seguir a representação gráfica disso:

48
 Figura 25 - Representação da tríade da UX
Fonte: https://blog.somostera.com/ux-design/o-que-e-ux-design-guia-completo
Descrição da figura: Representação gráfica com interseções de 3 arcos na cor preta sobre um fundo branco com linhas
pretas pontilhadas. Arcos no centro da imagem sendo o da direita com a palavra “negócios”, o da esquerda com a
palavra “tecnologia”, e o da parte inferior com a palavra "usuários ``. Os três arcos têm um ponto de encontro comum
com a palavra “ponto certo”. Fim da descrição.

É necessário um equilíbrio entre essas três partes (tecnologia, negócios e pessoas) para
que o produto possa oferecer uma experiência viável. Muitas empresas têm pensado muito mais na
experiência e tem crescido m-u-i-t-o no mercado. Dá uma visitada nesse site e confere os nomes de
algumas empresas que atualmente tem focado na experiência do usuário em suas respectivas
plataformas: https://brintell.com/blog/pt/categories/tecnologia-da-informacao/ux-design-5-
empresas
Esse campo de pensar em que vai utilizar um produto é muito legal. É bem interessante
pensar na construção desse percurso desde o início até chegar lá na ponta com o usuário interagindo
com um game, por exemplo.
Professora, explica melhor a diferença de UI e UX? Explico logo em seguida!
Geralmente acontece uma confusão entre UI e UX. São realmente muito semelhantes,
mas têm várias diferenças. Fiz esse tópico para que a gente finalize a disciplina bem feras conhecendo
e compreendendo bem cada área. Continua aqui comigo.

49
 Apesar das áreas serem muito parecidas, uma não substitui a outra, ao contrário, se
complementam. UI e UX compreendem tudo que envolve a experiência do usuário com determinado
produto.
UX design devem realizar todas as etapas que englobam as necessidades da marca,
empresa e usuário. O trabalho é bem minucioso e vai desde a pesquisa, prototipagem e até mesmo
o lançamento de um produto, a etapa de marketing. É um processo completo que envolve o design
de um produto.
UX designers elaboram e constroem todo caminho da experiência completa do usuário
de forma estratégica a fim de aprimorar a experiência e interação do usuário com o serviço que está
sendo oferecido. O UX pode aprimorar um produto analisando as interações. As interações podem
ser muito boas ou microinterações e, neste segundo caso, o UX do produto ou serviço pode passar
por modificações para que seja cada vez melhor para o usuário. De maneira resumida: UX é muito
mais relacionado ao uso de um serviço em si.

Para saber mais sobre microinterações você pode acessar o link a seguir:
https://www.alura.com.br/artigos/o-que-sao-
microinteracoes?gclid=CjwKCAjwu5yYBhAjEiwAKXk_eHY5vdkv6kQAb1c0dRvH
HsITebEaL3Impw4M9g5yXaC01HWJwCX2gxoCH3gQAvD_BwE

UI design ou design de interface tem o foco voltado para a parte visual propriamente dita.
Pensa nos moldes que compreendam os elementos visuais e que sejam tangíveis com o que o usuário
irá interagir. Desse modo, você consegue perceber como UX e UI se completam? Trabalham juntos
para o bom desenvolvimento de um produto/serviço. É quase uma dupla sertaneja rsrsr.
Observe na figura a seguir um comparativo entre os dois:

50
 Figura 26 - Tabela de comparação entre UX e UI.
Fonte: https://pt.wix.com/blog/amp/2021/09/guia-ux-design-o-que-
e?utm_source=google&utm_medium=cpc&utm_campaign=12444131516^11626903…
Descrição da figura: Quadro de comparativo entre UX e UI. Fundo do quadro na cor cinza. Blocos do quadro em tons de
azul em degradê. Fim da descrição.

E como funciona essa dupla? Em um projeto de um site de uma loja, por exemplo, o UX
designer é responsável por toda elaboração da funcionalidade e fluxo da plataforma. Um UX também
trabalha em conjunto com designers gráficos, designers de produto e marketing. É um combo de
atividades para fazer a experiência ser boa, a navegação com bom funcionamento.
Essas ações citadas anteriormente fazem parte das primeiras etapas para elaboração
deste site. Após isso vem a etapa da interface. Um UI designer irá construir a parte estética para dar
“cara” a todas essas soluções feitas na primeira etapa. Composição, distribuição de textos e imagens,
cores, tudo isso é feito por um UI. Ah, deixa eu te contar uma coisa bem importante! Existe essa
diferença nas tarefas, mas, muitas vezes um designer é UI e UX ao mesmo tempo. É uma área muito
dinâmica.
Eu já sei que você compreendeu as diferenças, mas, vale deixo aqui a sugestão de um
vídeo onde o professor de UI/UX, Rafael Vieira aponta de forma simples e prática essas diferenças,
semelhanças e como as áreas de design trabalham juntas. Clica aqui:
https://www.youtube.com/watch?v=UbD4ZxFpdn0

51
4.2 Etapas do processo de UX Design

Os projetos de UX nunca são iguais, pois cada produto é único, desse modo, as soluções
também são diferentes para cada especificidade. Os métodos e ferramentas utilizadas são
personalizadas para poder projetar o produto da melhor maneira.
É um processo muito dinâmico e pode ser interativo entre UX, cliente e usuário. Construir
o caminho do usuário dentro de um produto ou serviço requer bastante estudo e um fluxo de
organização que pode ser fluido e muitas vezes não segue uma sequência exata, pode ser alterada
de acordo com as necessidades do projeto.
Independente da ordem da organização das etapas, esse processo de UX geralmente
acontece com as seguintes etapas baseadas principalmente no design thinking, são elas: ideação;
pesquisa; análise; projeto; teste e finalização. Vou explicar melhor como funciona cada etapa logo em
seguida.
1. Ideação: Essa etapa é uma das mais importantes no processo de UX, é onde acontece
uma compreensão mais profunda na marca, produto e usuário. As estratégias de UX
vão além do marketing, desse modo, o foco também é no suporte ao usuário sem
deixar o negócio de lado. Na fase de ideação é importante estudar bem e
compreender as individualidades do produto/marca e nesse momento toda a equipe
de UX, designers e marketing podem participar para construírem boas ideias. É o
famoso brainstorm! Essa etapa é massa para pontuar os objetivos, obstáculos e as
soluções que podem ser úteis.
Para saber mais sobre brainstorm, acesse esse link:
https://fia.com.br/blog/brainstorm/
2. Pesquisa: A etapa de pesquisa é o estágio de coleta de dados quantitativos e
qualitativos para compreender o público-alvo e a indústria de maneira mais imersiva.
Alguns métodos são utilizados nessa etapa para analisar a experiência do usuário e
do mercado.
Como o usuário é a peça mais importante no meio disso tudo, alguns métodos de
pesquisa para conhecer melhor o usuário final pode acontecer através de entrevistas
para entender melhor sobre a experiência do usuário. Grupos focais é um outro
método onde são obtidos feedbacks de um grupo. Outra opção são as pesquisas com

52
 usuários. É diferente da entrevista, pois acontece através de questionários com
questões estratégicas relacionadas ao produto.
Diferente da pesquisa de usuário, a pesquisa de mercado tem o objetivo de entender
melhor sobre demandas, tendências do setor e concorrentes. Junto com a pesquisa
de usuário e as estratégias de marketing, fica mais fácil tomar decisões para o
processo de UX do produto.
3. Análise: A análise é a etapa que reúne todos os dados desde o brainstorm até os
dados obtidos nas pesquisas de mercado e usuário. Todas essas informações serão
úteis para moldar um bom caminho para o usuário de maneira mais assertiva.
4. Projeto: Essa etapa também pode ser chamada de design, pois é aqui que pode se
iniciar a construção visual do produto que está sendo trabalhado. Assim como tudo
ou quase tudo que faz parte do processo de UX, é feito de maneira interativa e as
etapas não precisam seguir uma linearidade, ou seja, o brainstorm e pesquisas
podem ser refeitas a qualquer momento. A etapa de projeto envolve a equipe de UX
e UI, designers e equipe de marketing.
5. Teste: Já que estamos falando sobre experiência do usuário, é essencial testá-lo antes
de lançá-lo oficialmente. O teste é a validação do produto. É importante que o teste
seja feito com a versão mais avançada do produto que está sendo trabalhado para
que a avaliação seja feita com mais precisão.
Os testes podem ser feitos através de protótipos de alta qualidade, ou seja, bem
semelhantes tanto na estética quanto no funcionamento do produto final. Teste de
usuário onde pessoas representando o público alvo são observadas interagindo com
o produto, a fim de observar a experiência e comentários a respeito. Outro tipo de
teste que também pode ser feito é o interno, nesse caso, a própria equipe de
designers experimentam o produto projetado.
6. Finalização: Como o próprio nome já sugere, essa é a etapa final de todo processo. A
etapa de finalização compreende o lançamento do produto. É o resultado de todas
as etapas anteriores. Ei, mas estás achando que acaba aqui? Apesar do produto
finalizado e lançado, nem sempre fica 100% perfeito, isso significa que as marcas

53
 devem sempre ouvir os feedbacks de usuários para sempre buscar melhorias e até
mesmo revisitar o design para aprimorar algo.
Queridinho, queridinha do meu coração! Agora que já conhecemos as etapas de
desenvolvimento de um projeto de UX, vamos entender de verdade sobre a importância do UX design
e como pensar no usuário tem sido um grande destaque para muitas empresas.
Continua a leitura!

4.3 Qual a importância do UX design?

Nos tópicos anteriores você pode conhecer conceitos e algumas etapas do UX. O processo
de UX utiliza métodos não lineares e isso torna o trabalho muito mais dinâmico e possibilita a
interação de diversos profissionais. É muito legal quando um projeto pode ser construído com muitas
mãos. Várias cabeças pensando é no mínimo mais interessante.
Atualmente muitas empresas têm como missão principal proporcionar mais do que uma
boa experiência ao cliente, mas, sim, experiências incríveis. Lógico que nem todas atingem esse
objetivo de forma imediata e um bom UX com certeza é um bom caminho para aprimorar os serviços
de uma empresa.
Agora que você já conhece as etapas de construção de um projeto, vou te apresentar
alguns pontos que fazem do UX uma ótima opção para as empresas.

● Satisfação dos usuários

Esse ponto é o mais importante e você já sabe o motivo. Sempre que falamos de UX a
experiência e satisfação do usuário sempre será o aspecto mais importante de todo o processo.
Empresas que colocam o cliente/usuário em primeiro lugar já tem um ponto positivo (dos próprios
usuários).
No UX a experiência do usuário não é pensada “do nada”. Uma das etapas do caminho do
UX é empatizar e pesquisar sobre as necessidades dos clientes, desse modo, todas as soluções
pensadas para o produto/serviço, foram desenvolvidas levando em consideração os feedbacks dos
usuários.

54
 • Redução de gastos

O segundo ponto que faz do UX uma boa opção é a redução de gastos. E quem não gosta
de reduzir gastos, não é?
Como reduzir gastos na elaboração de um projeto de UX? Você viu anteriormente que
uma das etapas do desenvolvimento de um projeto é a testagem e prototipação. O protótipo é uma
das maneiras que mais impacta na redução de gastos! E como é isso?
Digamos que você tem a ideia de lançar um aplicativo de fotografias, contrata uma
equipe, constrói o aplicativo e já lança para o mundo, mas, o aplicativo não atingiu o público-alvo,
não funciona bem e não agradou os usuários, pois tem uma navegação complicada, etc.
Para lançar um aplicativo você precisou investir bastante dinheiro e foi tudo por água
abaixo.
É nesse sentido que a prototipação é superimportante. Protótipos de média e alta
fidelidade servem para testar e analisar os resultados de maneira ágil e, fica muito mais fácil ajustar
algum problema sem gastar rios de dinheiro. Percebeu?

• Aderência de usuários
Esse é o terceiro e último ponto que venho apontar como importante. A aderência de
clientes é resultado de todo processo de UX. Uma plataforma, produto ou serviço que tenha
acessibilidade, seja de fácil manuseio e agradável de permanecer tem grandes chances de ganhar
aderência e permanência de usuários.
Um bom exemplo disso é o banco digital NuBank, provavelmente você já ouviu falar no
roxinho rsrsrs. O NuBank é uma plataforma muito inovadora do setor financeiro que, com sua
linguagem divertida e oferecer boas condições, tem alcançado o público jovem.
A plataforma é muito fácil de ser utilizada e proporciona uma experiência muito agradável
para os usuários.
Pegando o gancho do exemplo do NuBank, que tal conhecer outras empresas que têm o
UX como protagonista do negócio? Vamos lá?
Começando pela plataforma Canva. Observe a figura a seguir:

55
 Figura 27- Logo Canva
Fonte: http://noemimorencia.com/producto/curso-diseno-en-canva/
Descrição da figura: Logo da plataforma Canva. Círculo em cor azul claro com o nome Canva no centro na cor branca em
tipografia semelhante a uma escrita cursiva. Fim da descrição.

A plataforma Canva é muito conhecida mundialmente e muito querida para criação de

projetos de design. A principal proposta do Canva é oferecer ferramentas de design de maneira
simples, rápida e intuitiva.
A criadora da plataforma, Melanie Perkins durante seu curso na graduação observou que
alguns colegas tinham dificuldade de manusear plataformas de edição tipo o Photoshop, então, ela
quis reunir diversas ferramentas em uma única plataforma que funcionasse de maneira online, pois
além de ser útil para designers, também seria útil para pessoas leigas no assunto.
A interface do Canva é s-u-p-e-r simples e você encontra tudo com muita facilidade, por
exemplo, se você precisa de templates para fazer convites de aniversário, você pode digitar na lupa
do site “aniversário” e vai aparecer uma infinidade de opções gratuitas e pagas.
Esse caminho que guia o usuário dentro da plataforma é um trabalho de UX design.
O outro exemplo que trago é bastante conhecido por todo mundo, observa a imagem a
seguir:

56
 Figura 28 - Logo Netflix
Fonte: https://www.b9.com.br/65595/netflix-apresenta-novo-logo/
Descrição da figura: Logo da plataforma Netflix. Quadrado na cor preta com letra N no centro da imagem na cor
vermelha. Fim da descrição.

A Netflix tornou-se tão conhecida mundialmente que criou um ícone com o N que só de
olhar todo mundo já reconhece. Netflix é um case perfeito para compreender o UX na prática. A
empresa aprimorou o serviço utilizando os dados do usuário. Como assim? Um algoritmo aprende o
que o usuário gosta de assistir e, a partir dessa sondagem, a plataforma passa a mostrar os gostos do
usuário como prioridade. É muito bom, pois a pessoa passa menos tempo escolhendo um filme.

Para saber mais sobre cases de UX, dá uma olhada nesse estudo de caso:
https://medium.com/@tiagogaspar/um-estudo-de-caso-ux-design-
8b704f8850d4

Encerramos nossa disciplina com chave de ouro. Não deixe de assistir as vídeo aulas que
fiz com todo carinho do mundo pensando em você, querido(a) do meu coração e tenha sempre esse
e-book como material de apoio para revisitar e tirar dúvidas sempre que quiser.

Até breve!

57
Conclusão
Uffa! É sempre muito bom finalizar uma disciplina. Não é? Isso significa que a cada
competência que se passa eu conheço um pouco mais de você e fico muito feliz em fazer parte do
seu processo de aprendizado.
A disciplina de Mídias Digitais é muito massa, pois é muito atual e está atualizado é
fundamental para quem deseja trabalhar nas áreas que exigem criatividade.
Conhecer a Internet desde a origem foi o primeiro passo para iniciarmos nossos estudos
sobre tudo o que compreende o universo das mídias digitais. Que o digital faz parte das nossas vidas
é impossível negar, imagine para nós designers que vivemos imersos o tempo todo?
Lá no início o design gráfico pensava apenas na imagem e no momento específico da
venda. Hoje, com tantas mudanças o design junto com o marketing “trocam” de lado e pensam
primeiramente no usuário e todas as possibilidades de interação dele com o produto, marca ou
serviço.
É aí que observamos a importância do UI e UX design! Acredito que você achou muito
legal e vai querer se aprofundar mais e mais no assunto. Certo?
Esse e-book sempre estará disponível para você ler e reler sempre que precisar. Perceba
que uma disciplina complementa a outra e, além das leituras é importantíssimo que você pratique, e
pratique muito que é desse modo que você será um designer fera!
Espero que tenha gostado da disciplina e dos materiais.

Nos vemos em breve.

Tchau! Bye bye! Hasta luego!

58
Referências

CASTELLS, M. A galáxia da internet. Rio de Janeiro: Zahar, 2003.

DUARTE, J., & BARROS, A. Métodos e técnicas de pesquisa em comunicação. São Paulo: Editora Atlas
S.A, 2005.

HURLBURT, A. Layout: o design da página impressa. NBL Editora. Jokinen, T. (2016).

MEMÓRIA, F. Design para internet: projetando a experiência perfeita. Rio de Janeiro: Elsevier
Editora, 2005.

MORVILLE, P. User Experience Design. (21 de Junho de 2004). Disponível em:

<http://semanticstudios.com/user_experience_design/>. Acesso em 25 de Ago de 2022.

RECUERO, R. Redes sociais na internet. Belém: Editora Meridional, 2009.

TEIXEIRA, F. Introdução e boas práticas em UX Design. Vila Mariana, São Paulo: Casa do Código, 2014.

59
Minicurrículo do Professor

Mariama Aquino
Mariama Aquino é licenciada e técnica em Artes Visuais pela UFRPE e IFPE. É professora
de Artes e Design gráfico, pesquisa práticas educacionais decoloniais. Também desenvolve outras
atividades em arte/educação em museus e espaços culturais e curadoria de exposições. Gosta muito
de manter-se atualizada e atualmente estuda UI/UX design.

60