teorico (1)

Prévia do material em texto

Projetos Gráficos 
para Mídias Digitais
Responsável pelo Conteúdo:
Prof. Me. Ivan Ordonha Cechinel 
Revisão Textual:
Prof.ª Dr.ª Selma Aparecida Cesarin
Design Centrado do(a) Usuário(a)
Design Centrado do(a) Usuário(a)
 
 
• Conceituar e discutir a importância de se levantar informações relevantes que contextuali-
zarão o Projeto, fornecendo subsídios para que a busca de soluções seja eficaz, promovendo 
experiências positivas para os(as) usuários(as).
OBJETIVO DE APRENDIZADO 
• O Significado que a Interface Traz para o(a) Usuário(a);
• Princípios do Design Thinking;
• Pesquisa de Campo;
• Pensando nas Formas de Interação com o(a) Usuário(a);
• Mapa de Empatia.
UNIDADE Design Centrado do(a) Usuário(a)
O Significado que a Interface 
Traz para o(a) Usuário(a)
Nesta Unidade, vamos tratar, especialmente, das ferramentas conceituais para desen-
volvimento de produto digital (aplicativo será nosso foco).
Discutiremos a importância de considerar a experiência do usuário e sua relação com 
as interfaces visuais. 
Não trataremos de Linguagens de Programação como HTML, CSS ou Banco de 
Dados, como PHP ou MySQL, por exemplo. Esse conteúdo corresponde à outra área 
do conhecimento (Ciência da Computação).
Nosso foco serão as formas de coleta e análise de dados qualitativos baseadas em 
diretrizes do design e comportamentos do usuário para construção de interfaces em 
forma de protótipos.
Travis Lowdermilk, em seu livro Design Centrado no Usuário, lembra-nos que, a partir de 
2007, com o lançamento do Iphone, pela Apple, surge um novo paradigma e se observou 
uma elevação do gosto dos consumidores em relação aos produtos digitais. 
Segundo o autor, para os desenvolvedores de interfaces digitais poderem lidar com essas 
mudanças, é necessário incluir os usuários no processo de criação desses produtos. 
Ao focar na usabilidade, economizamos tempo e criamos aplicativos que atendem às neces-
sidades de nossos usuários (LOWDERMILK, 2019).
Princípios do Design Thinking
A área do Design fornece inúmeras ferramentas para o desenvolvimento de projetos 
de qualquer natureza e, dentre elas, estão as do Design Thinking.
Mas o que isso significa? 
É o que veremos a seguir.
Design = Projeto/projetar.
Thinking = Pensar/pensando.
Design Thinking representa, acima de tudo, uma busca de soluções por meio da 
criatividade, colocando o ser humano no centro do design, tudo partindo da empatia. 
8
9
Segundo Tim Brown (2018), o Design Thinking potencializa capacidades que as pes-
soas têm, porém não são evidenciadas em práticas comuns de resolução de problemas. 
Design Thinking trata de recursos mais humanos, como a intuição por exemplo, da 
forma como percebemos, como identificamos padrão.
É pensar na criatividade pelo emocional e não apenas funcional. É nos expressarmos 
por múltiplos Canais Midiáticos. 
Ninguém quer gerir uma empresa com base apenas em sentimento, Intuição e inspiração, 
mas se fundamentar demais no racional e no analítico também pode ser perigoso.
A abordagem integrada que reside no centro do processo de Design sugere um “ter-
ceiro caminho” (BROWN, 2018).
Para entendermos o Design Thinking, é importante que fique claro, primeiramente, 
o que é Design.
Muitas vezes, essa área está associada apenas ao aspecto visual dos produtos, seja de 
ordem física, seja digital, porém o Design visa a oferecer bem-estar na vida das pessoas 
e, para isso, identifica possíveis problemas de diferentes ordens para, então, resolvê-los. 
Além disso, a prática do Designer não reside apenas nos produtos ou nos serviços 
acabados, mas também, no ato de fazê-los e nos processos e estratégias adotadas ao 
longo de um Projeto (MOREIRA, 2018). 
De acordo com a autora, podemos dizer que Design Thinking significa “O jeito de 
pensar do Design”, um modelo de pensamento centrado nas pessoas, buscando solu-
ções inovadoras e significativas. 
Ainda segundo Moreira (2018), o Design Thinking tem como base o conceito de 
empatia, colaboração e experimentação, por estar centrado no ser humano e, assim, 
constitui-se um modelo de pensamento que possui várias particularidades e, para de-
senvolvê-lo de forma bem-sucedida, é necessário conhecer todas as suas etapas, assim 
como saber utilizar uma série de ferramentas e técnicas projetuais. 
Moreira (2018) define algumas das vantagens em utilizarmos recursos do 
Design Thinking:
• Inovar e se diferenciar no Mercado;
• Desenvolver produtos e serviços mais relevantes para as pessoas; 
• Criar mais empatia com os usuários e atender suas reais necessidades e desejos; 
• Pensar de forma abdutiva e dedutiva; 
• Questionar o status quo e não apenas tentar achar respostas; 
• Cocriar com equipes multidisciplinares; 
• Prototipar, testar e iterar ideias promissoras. 
9
UNIDADE Design Centrado do(a) Usuário(a)
Importante!
Lembrando-se de que é função do UX Designer gerenciar e analisar a interação entre pes-
soa e produto e de que o UI Designer encarrega-se de construir a interface do aplicativo 
com base no levantamento e em análises do UX Designer. 
Geralmente, o mesmo profissional exerce as duas funções, pois elas estão totalmente 
interligadas. Porém, é importante compreender com clareza os limites entre uma fun-
ção e outra. 
Não confundir UX com Arquitetura de Informação 
A Arquitetura de Informação relaciona-se à experiência do usuário e, muitas vezes, 
acaba virando sinônimo de UX Design, porém, constitui apenas parte da experiência 
do usuário. 
Em um cenário ideal, geralmente, trata-se de 5 aspectos principais, apresentados 
a seguir.
Estratégia – Escopo – Estrutura (Fluxograma) – 
Wireframe – Interface 
Organiza conteúdos definindo hierarquia da informação, nomenclaturas dos botões, 
itens do menu e define de que maneira a distribuição dos elementos que irão compor a 
interface facilitam ou permitem que o usuário consiga chegar a um determinado serviço 
dentro do site, do sistema ou do aplicativo. 
Esse trabalho se concretiza através do wireframe. 
Wireframe: Constitui a base (estrutura) para a interface e, muitas vezes, pode ser interativo. 
Tem por objetivo explicar o contexto de uso e, por isso, não apresenta a arte final. 
Nessa etapa, definem-se posição de imagens e texto, hierarquia de títulos, subtítulos, bo-
tões e itens do menu, entre outros (mostra a forma e não a aparência). 
Wireframe constitui fase de planejamento e investir tempo nessa etapa será melhor, pois 
evitará retrabalho, desperdício de tempo e de dinheiro, além de poder ser usado como “do-
cumentação” do processo criativo. 
Em Síntese
• É necessário projetar para experiência positiva e não somente para experiência qualquer;
• Preparar espaços e meios nos quais a experiência possa acontecer;
• O projeto deve ser centrado no usuário e isso é que vai determinar como fazer, que 
código usar e que ferramentas utilizar.
10
11
Design Thinking na prática
Para aplicar os princípios de Design Thinking na prática, é necessário refletir sobre 
alguns importantes aspectos que irão evitar ou amenizar problemas em etapas mais 
avançadas do projeto.
Existem algumas questões cruciais a serem respondidas que ajudam nessa reflexão 
inicial, como, por exemplo: 
• O que você e a equipe sabem sobre o problema a ser resolvido? 
• Qual a relevância do aplicativo na vida das pessoas? 
Perguntas que parecem óbvias, mas que, em muitos projetos, acabam sendo esque-
cidas ou desconsideradas.
Para organizar e aprimorar o trabalho com base nas ferramentas conceituais forneci-
das pelo Design Thinking, autores da Área falam de etapas projetuais. 
Alguns definem 3, outros 4 ou 5 etapas ligadas a um projeto de qualquer natureza. 
Na verdade, as etapas podem variar de acordo com cada projeto. Porém, indepen-
dente dessas variações, a essência é a mesma. Trabalharemos com as 3 etapas apresen-
tadas a seguir, que são as mais utilizadas.
Quadro 1
1ª etapa – Imersão
Na imersão, a grande palavra é EMPATIA. Verificar na prática que soluções o 
usuário necessita, quais problemas reporta.Levantar perfil do usuário (não só 
dados demográficos, mas sim pesquisa qualitativa – traçar jornada). 
Nessa etapa, podem ser realizadas dinâmicas em grupo (focous group), mas não 
é obrigatório.
2ª etapa – Defi nição
Reunir tudo o que foi levantado durante a 1ª etapa. Liste os problemas e as ca-
rências descobertas. Valide hipóteses (ver se o que você e a equipe “achavam” 
condiz mesmo com a realidade). 
3ª etapa – Ideação
Proposta de solução para o problema. Cocriação (diferentes equipes traba-
lhando juntas). São utilizadas ferramentas de metodologia de Design em prol 
da criação, como, por exemplo: Brainstorm, mapa mental, painel semântico 
e prototipagem. 
O protótipo pode ser desenvolvido de diversas maneiras (apenas gestual ou layout
mais aprimorado com o auxílio de softwares ou ferramentas on-line) – depende também 
de prazos e de investimento do projeto.
Protótipo: Significa tirar as ideias da mente e concretizá-las fisicamente. Diversas técni-
cas e ferramentas podem ser utilizadas. Desde esboços simples feitos a mão até interfaces 
e layouts mais elaborados, confeccionados em softwares ou em ferramentas on-line por 
exemplo. Podem ter baixa, média ou alta fidelidade.
Escopo: Lembrando-se de que é importante definir um escopo para o Projeto, semelhante 
ao briefing, como temos na Comunicação Visual. Funciona como uma espécie de roteiro e 
documentação do projeto para nortear o que será desenvolvido e deixar claro, tanto para 
cliente quanto para a equipe, o que será realizado. 
11
UNIDADE Design Centrado do(a) Usuário(a)
Não há uma forma fixa em relação ao conteúdo do escopo. Ele poderá ter mais ou 
menos itens dependendo do projeto. É importante ter flexibilidade para gerenciar o 
conteúdo necessário. 
Você verá exemplo de um escopo no Estudo de Caso que faremos ao fim desta Unidade.
Pesquisa de Campo
Constitui fator primordial da 1ª etapa do Design Thinking. Ao projetarmos conside-
rando o ser humano como centro do trabalho, necessitamos colher informações a respeito 
do público ao qual nossa criação se destina, para que nosso projeto tenha base sólida e, 
por isso, devemos ir a campo e dedicar tempo para vivenciar a rotina dos usuários. 
As informações espontaneamente fornecidas poderão nos dar o caminho para construir 
uma solução eficaz, que de fato dialogue e resolva os problemas apresentados por esse 
grupo. Se estamos desenvolvendo um aplicativo, por exemplo, ele só terá relevância se 
compreendermos as necessidades dos usuários e isso vai além da estética ou da linguagem 
de programação utilizada para desenvolvimento do aplicativo (LOWDERMILK, 2019).
Focar no usuário é mais do que simplesmente discutir sobre como será a aparência dos 
componentes ou criar animações rápidas e transições suaves. O design centrado no usuário 
permite que possamos examinar o quanto um aplicativo é eficiente para atingir o propósito 
para o qual foi concebido. É possível ter um aplicativo incrivelmente bonito, cuja usabilidade 
seja um pesadelo (LOWDERMILK, 2019).
A chamada fase de imersão traz uma série de informações que necessitam ser ana-
lisadas e interpretar esses dados é tão importante quanto coletá-los, pois essa com-
preensão das informações fornecerá insights significativos para as etapas conseguintes 
(MOREIRA, 2018).
Em suma, é necessário sair de casa, ou do escritório, e ir até o usuário. Observar os 
usuários utilizando o produto ou serviço para descobrir coisas comuns a esses usuários, 
ou seja, usuários que têm o mesmo objetivo não necessariamente apresentam o mesmo 
perfil demográfico.
Trocando Ideiais...
Como recurso, poderá ser utilizada uma entrevista escrita ou gravada (imagem e som). 
Se POSSÍVEL, pesquise pelo menos 8 e compare os 4 resultados mais próximos, mais 
semelhantes. 
Realize perguntas centradas no serviço, como, por exemplo: Como você imagina se 
comunicar? Ou realizar determinado serviço dentro do app, e não apenas perguntar: 
“Achou legal a proposta do aplicativo?”
12
13
Definir Persona
Persona: representa um conjunto de atributos e características, uma espécie de 
 “ficha técnica” do usuário, define um perfil que representará o usuário do aplicativo.
No viés do design, é uma pesquisa qualitativa, ou seja, uma persona de UX não é basea-
da apenas em estatísticas, em dados analíticos ou baseada no que você ou a equipe “acham”. 
É importante levantar qual o objetivo do usuário e não apenas dados demográficos. 
Mapear as necessidades do usuário e, assim, determinar qual será a solução digital mais 
adequada e necessária a ele.
O perfil definido é a justificativa para a tomada de decisão durante o processo de cria-
ção. Levantar hábitos e costumes, entre outros, se tem alguma dificuldade para realizar 
o objetivo e criar uma ficha com detalhes do perfil e dos objetivos. 
A ficha deverá ser consultada e não é estática. Podem ser necessárias mais conversas 
com o usuário e, assim, adquirir feedbacks novos.
Você verá um exemplo de persona no Estudo de Caso que faremos ao fim desta 
Unidade.
Pensando nas Formas de
Interação com o (a) Usuário(a)
Lowdermilk (2019) nos traz a informação de que o design centrado no usuário, se 
desenvolvido de maneira coerente e assertiva, pode ser importante fator de economia de 
tempo, algo muito importante em projetos de qualquer natureza, pois ao compreender 
e considerar as necessidades dos usuários, serão evitados erros que seriam mais difíceis 
de serem corrigidos em etapas posteriores do projeto e que acarretariam prejuízo finan-
ceiro e efetiva perda de tempo.
Um aplicativo, por exemplo, na maioria das vezes, oferece serviços aos usuários e 
eles precisam de uma experiência positiva que será determinada com o grau de sucesso 
em realizar determinada tarefa dentro do aplicativo. 
Para Stickdorn (2014), a entrega de um serviço requer certo grau de participação 
do usuário. 
Os serviços não são bens tangíveis ou padronizados que podem ser armazenados 
em um estoque. Pelo contrário, os serviços são criados por meio da interação entre o 
provedor e o usuário do serviço. A intenção inerente de um serviço é atender às neces-
sidades do usuário.
13
UNIDADE Design Centrado do(a) Usuário(a)
Mapa de Empatia
Ser empático, ou seja, conseguir se colocar no lugar do outro para, então, aprender com 
ele e até mesmo pensar como ele, é uma atividade fundamental para o Design Thinking 
(MOREIRA, 2018). 
Segundo Moreira (2018), colocar-se no lugar de alguém, especialmente, daquelas pessoas que 
estão inseridas em contextos completamente diferentes do nosso, não é uma tarefa simples. 
A autora pontua que a empatia exige habilidade, intuição e, também, um vasto repertório 
de ferramentas de projeto que tem o objetivo de captar as aspirações e as necessidades 
explícitas e implícitas das pessoas. 
O que chamamos de mapa de empatia consiste em um recurso simples, porém essencial, 
que “dá voz” ao usuário, vez que é apresentado em um quadro de falas dos propensos usu-
ários, coletadas nas entrevistas. 
Essas falas são organizadas sendo distribuídas de acordo com seu contexto.
Você verá exemplo de um Mapa de Empatia no Estudo de Caso que faremos ao fim 
desta Unidade.
Existem outros procedimentos metodológicos, muitos deles derivados do Design Thinking 
que também podem ser utilizados no desenvolvimento de projeto. 
A seguir, são apresentados alguns exemplos.
Metodologias de trabalho
A seguir, uma lista com alguns métodos de trabalho que também são utilizados no dia a dia 
de quem lida com UX e UI:
• Design Sprint;
• Scrum; 
• Kanban;
• Lean;
• Método 5W1H;
• Métodos ágeis.
Estudo de Caso
Agora, no exemplo a seguir, veremos como podem ser aplicadas as ferramentas con-
ceituais descritas nesta Unidade.
O projeto aqui utilizado como Estudo de Caso foi desenvolvido pelo prof. Me. Ivan 
Ordonha Cechinel. 
14
15
Case
Aplicativo: Guia Turístico do bairro da Liberdade, em São Paulo1
1ª Etapa – Imersão 
O que será criado?
Veremos, a seguir, como Estudo de Caso, um aplicativo em desenvolvimento, cuja 
função é serum guia comercial e turístico do bairro da Liberdade, em São Paulo. 
É um aplicativo para ser utilizado por visitantes e entusiastas do bairro, assim como 
pelas pessoas que trafegam, moram ou trabalham na região da Liberdade, um produto 
digital que reúna pontos turísticos, templos, lojas e restaurantes e, ao mesmo tempo, 
dialogue com a identidade do bairro, trazendo sua história. 
Público
Voltado especialmente ao público visitante, que vem de diferentes partes do país ou 
do mundo, e também da própria cidade de São Paulo. Público juvenil e adulto, principal-
mente, de todos os sexos e classes sociais.
Hipóteses
O bairro apresenta extensa gama de lojas, bares, restaurantes e pontos turísticos 
espalhados por sua área territorial. Boa parte dele pode ser visitada a pé, porém, é ne-
cessário planejar para priorizar os pontos a serem visitados, de acordo com o objetivo 
da visita (por exemplo, compras, visita cultural e gastronomia, entre outros), pois:
• Perde-se tempo ao não se planejar a visita;
• Longas caminhadas causam cansaço desnecessário;
• A quantidade de locais a serem visitados é grande. Pontos de interesse podem não 
ser visitados;
• O bairro, geralmente, tem grande fluxo de pessoas, o que demanda mais tempo 
durante a visitação.
Entrevista
• Questões :
» Você já se perdeu no bairro da Liberdade?
» Quando vai ao bairro, costuma passar o dia inteiro ou apenas um período?
» Utiliza transporte público para ir ao bairro?
» Já desistiu de encontrar algum lugar ou serviço no bairro da Liberdade?
» Acha que é fácil explorar tudo o que o bairro tem para oferecer?
» Quando você visita o bairro da Liberdade, costuma ter interesses específicos (gas-
tronomia, compras, visita cultural), ou realiza visita geral?
1 Lembrando-se de que parte das informações que complementam este Estudo de Caso é fictícia, com caráter acadêmico.
15
UNIDADE Design Centrado do(a) Usuário(a)
 » Como você imagina um “Guia Turístico” do bairro da Liberdade para ser acessa-
do em seu Smartphone?
Resultado das entrevistas
Foram entrevistadas 12 pessoas e, a seguir, estão algumas das respostas mais relevantes:
• “Costumo visitar de transporte público”;
• “Sim, já me perdi procurando os Templos orientais”;
• “Gostaria que houvesse um aplicativo que centralizasse todos os pontos turísticos, 
restaurantes e lojas”;
• “Poderia ser um aplicativo com um mapa do bairro”;
• “Poderia ser possível encontrar restaurantes e saber informações sobre eles antes 
de ir até o local”.
2ª etapa – Definição
Carências detectadas 
Necessidade de haver uma ferramenta digital que centralize informações sobre os 
pontos de interesse do bairro da Liberdade em São Paulo (que indique e traga informa-
ções sobre restaurantes, lojas, templos e museus) e que possibilite comunicação, como, 
por exemplo, reserva em restaurantes, e que atenda tanto os visitantes do bairro da 
 Liberdade quanto os comerciantes da região, que poderão cadastrar seu estabelecimento 
no aplicativo.
Decidiu-se, nesse caso, que um aplicativo poderá centralizar essas informações de ma-
neira ágil. Poderão ser feitas parcerias com comerciantes, prestadores de serviço e em-
preendedores que atuam no bairro e, assim, fazer com que o produto digital ganhe força. 
Um aplicativo que transmita com clareza e objetividade as informações necessárias, 
de maneira precisa, e que valorize ainda mais a imagem do bairro perante o público.
Haverá um formulário de cadastro para que proprietários de estabelecimentos do bairro 
da Liberdade possam cadastrar seus restaurantes e lojas, a fim de que sejam incluídos nas 
áreas de “gastronomia”, “compras” e “cultura pop” do aplicativo, e tenham visibilidade.
A princípio, de maneira gratuita e, depois, um período de experiência de uso, com 
consolidação maior do aplicativo.
Poderá ser solicitado por parte do anunciante um investimento que manterá o apli-
cativo em funcionamento, assim como outras formas de parceria, com promoções e 
descontos em serviços e produtos para usuários do aplicativo, por exemplo.
Persona 1
Cibele, 19 anos, é estudante de Design Gráfico. Trabalha como ilustradora autônoma 
e é fã de cultura pop, action figures, animes e games. 
Gosta de passear pelo bairro para buscar inspiração tanto para sua arte quanto 
para aproveitar mais aspectos da cultura oriental, como templos e gastronomia, porém, 
16
17
 explora a região e vai descobrindo ao acaso, passando por lugares que não entrou por 
não ter mais informações a respeito. 
Adora a feirinha da Liberdade e as lojas de produtos ligados à cultura pop, que 
acontece aos domingos. Sempre utiliza metrô para ir ao bairro e explora a região sem-
pre caminhando. 
• Metas: desenvolver sua arte e crescer profissionalmente ;
• Necessidades: planejar melhor seus “rolês” para não perder tempo, procurando o 
que precisa quando já está caminhando pelo bairro ;
• Receio: perder tempo.
Persona 2
José, 55 anos, é contador e gosta de passear com a família por São Paulo. Quando 
visita lugares diferentes, pensa sempre onde almoçar, e se preocupa em decidir em que 
 períodos do dia irá realizar determinadas tarefas no local de visitação. Sua prioridade é visi-
tar pontos turísticos culturais e informações sobre horário de funcionamento e localização. 
• Metas: engrandecimento cultural e transmitir isso aos filhos ;
• Necessidades: encontrar informações claras e objetivas sobre os pontos de interes-
se da região que visita com a família ;
• Receio: perder tempo ou deixar de visitar pontos importantes durante o passeio 
pelo bairro.
Escopo do projeto
 Quadro 2 – Escopo 
Projeto Desenvolver aplicativo que funcionará como “Guia Turístico” do bairro da Liberdade, em São Paulo.
Objetivos do Projeto
• Melhorar o aproveitamento do bairro por parte dos visitantes;
• Ser uma fonte abrangente de informações sobre o bairro, para ter visão mais 
global do que a região oferece;
• Trazer informações mais detalhadas sobre pontos turísticos, templos religio-
sos, estabelecimentos comerciais (como lojas, bares e restaurantes);
• Ser um espaço para que os comerciantes e os empreendedores do bairro da 
Liberdade possam cadastrar e divulgar seus estabelecimentos e serviços;
• Guia para os pontos turísticos e religiosos, aumentando a apreciação 
do público.
Conteúdos mínimos (telas) que o aplicativo deve conter
• Mapa da região;
• Descrição dos pontos turísticos, religiosos, estabelecimentos e serviços 
 cadastrados;
• Canal de comunicação entre público e estabelecimentos (por exemplo, a pos-
sibilidade de reservar restaurantes ou comprar ingressos para pontos turísti-
cos dentro do aplicativo);
• Tela de cadastro para comerciantes e empreendedores da região poderem 
cadastrar seus estabelecimentos e serviços.
Público a quem o
app se destina
• Juvenil/adulto.
17
UNIDADE Design Centrado do(a) Usuário(a)
Cronograma
Data de início do projeto
• 1ª semana: pesquisa de campo (levantar hipóteses, realizar entrevistas, pes-
quisar informações sobre o bairro);
• 2ª semana: análise dos dados (definição de persona – realizar Mapa de Empatia);
• 3ª semana: iniciar os primeiros estudos para a construção do aplicativo;
• 4ª semana: wireframes (protótipo de baixa fidelidade);
• 5ª e 6ª semanas: desenvolvimento de protótipo de alta fidelidade;
• 7ª semana: testes de usabilidade com o protótipo.
Ferramentas 
necessárias
Software
• Aplicativos;
• Photoshop (para tratamento de imagens/fotomontagens);
• Illustrator (Ilustrações);
• Figma (interfaces/protótipo navegável do app).
Figura 1 – Mapa de empatia do Projeto
Fonte: Acervo do conteudista
3ª Etapa – Ideação/prototipagem 
Após terem sido apontadas as necessidades e levantadas as soluções para as carên-
cias identificadas na Etapa 1, foi desenvolvido um fluxograma – as setas direcionais mos-
tram a sequência da navegabilidade possível que o usuário pode realizar no aplicativo. 
O Fluxograma a seguir foi desenvolvido com a ferramenta on-line Lucidchart. 
Disponível em: https://bit.ly/2XWB9BA
O fluxograma constituiuma representação simples e objetiva das telas do aplicativo e 
sua sequência, constituído apenas de retângulos contendo o nome previsto para cada tela. 
Essa representação simples é o suficiente nesta etapa, pois o intuito é indicar 
a navegabilidade.
18
19
Figura 2 – Fluxograma
Fonte: Acervo do conteudista
A seguir, temos exemplos de wireframes (armação de arame, na tradução literal) por-
que constituem as “linhas” que representam a estrutura principal da interface. 
Apresentam uma representação mais detalhada, prevendo posições de menus, bo-
tões, imagens, textos, ícones, mapas e formulários, entre outros elementos gráficos. 
Nos wireframes, não há a representação de cores e imagens, apenas linhas estrutu-
rais e alguns detalhes, como ícones, por exemplo. 
Nesse exemplo, temos a tela inicial na qual, quando o usuário toca no botão principal 
do menu de contexto, abre-se a aba do menu com botões, que levará às telas internas 
do aplicativo.
O aplicativo terá uma tela inicial com um mapa com ícones, que direcionará para as 
telas com os principais pontos turísticos do bairro da Liberdade. 
O mapa localizará o usuário, de maneira ilustrativa, nas principais vias da área central do 
bairro da Liberdade, onde se localizam as principais áreas de interesse (pontos turísticos, lo-
calização de lojas de produtos típicos, gastronomia e, também, a feira tradicional do bairro). 
Na parte superior da tela do mapa e demais telas do aplicativo, há a barra de menu, 
na qual, na parte superior esquerda, há ícone para acesso ao menu de contexto, com as 
seguintes opções: Início (volta para tela título), Cadastro (página para inserção de dados 
de cadastro), Social (acesso para Redes Sociais relacionadas ao aplicativo) e História 
(acesso para a tela que traz como conteúdo a história do bairro).
Portanto os wireframes constituem uma espécie de base para o design de interface, para 
o layout final que vai constituir as telas do aplicativo. Porém, o foco aqui é demonstrar a
quantidade de telas e a sequência de navegação. 
A seguir podemos observar também a tela título (tela inicial do aplicativo – imagem ao lado 
esquerdo a seguir).
Essa tela dá acesso ao mapa da região central do Bairro da Liberdade e, acima do mapa, 
estarão distribuídos os ícones que darão acesso às telas de conteúdo do aplicativo. 
19
UNIDADE Design Centrado do(a) Usuário(a)
Figura 3 – A tela inicial do aplicativo (lado esquerdo) e o mapa da região central do bairro da Liberdade
Fonte: Acervo do conteudista
A primeira imagem a seguir (da esquerda para direita) apresenta o wireframe da tela 
do mapa, na sequência (segunda imagem a seguir), podemos observar o wireframe da 
mesma tela, porém, com o menu de contexto acionado com as opções: Início, Cadastre, 
Social e História. 
Na sequência (terceira imagem), o menu de contexto ao lado direito está acionado 
com as opções Sobre (com informações sobre os desenvolvedores do aplicativo) e Editar, 
que dará acesso a opções de ajustes em relação ao tamanho da fonte em todo o aplica-
tivo, além dos demais ícones representados no menu superior (lupa – ícone de pesquisa 
e, ao lado direito, ícone da busca por comando de voz e ícone para compartilhar).
Na tela do mapa há, também, na parte inferior, um botão (“Faça parte é grátis”) em 
destaque, que dá acesso à tela de cadastro, na qual empreendedores da região poderão 
cadastrar seus estabelecimentos.
Esse serviço é oferecido pelo aplicativo.
Figura 4 – Wireframes representando a estrutura das telas do aplicativo 
Fonte: Acervo do conteudista
A seguir, wireframes das telas de conteúdo do aplicativo, com representação de local 
para inserção de imagem (retângulo com linhas cruzadas formando um x), e já disposto 
o conteúdo em texto, além de botões em meio ao texto do conteúdo.
20
21
Figura 5 – Wireframes representando a estrutura das telas do aplicativo
Fonte: Acervo do conteudista
Figura 6
Fonte: Acervo do conteudista
A seguir, três telas: a de Cadastro, prevendo os campos de digitação para informa-
ções do cadastro, com galeria para inserção de imagens. 
Na sequência, a tela de confirmação do cadastro e a tela que trará a história do bairro:
21
UNIDADE Design Centrado do(a) Usuário(a)
Figura 7
Fonte: Acervo do conteudista
Existem diversas ferramentas para realizarmos esse trabalho. Algumas gratuitas, com limi-
tações, e outras pagas:
• Figma: ferramenta on-line que pode ser utilizada para fazer wireframes e interfaces 
de alta fidelidade;
• Sketch app: largamente utilizado por profissionais dessa área;
• Axure: algumas ferramentas dão conta de quase todas as etapas de desenvolvimento, 
outras são específicas para determinada etapa;
• Adobe XD: software da Adobe voltado para produtos digitais;
• Lucidchart: ferramenta on-line gratuita para criação de fluxogramas.
O software Sketch é um dos mais usados pelos profissionais de UX e UI, por ser bastante 
completo. Existem profissionais que utilizam outros softwares gráficos para desenvolver 
tanto wireframes como interfaces, principalmente, Adobe Photoshop e Adobe Illustrator. 
 Porém, o ideal é utilizar ferramentas especificamente voltadas para o desenvolvimento 
de produtos digitais, como o Figma, Sketch, Axure, Adobe XD, Lucidchart e utilizar demais 
softwares gráficos para tratar imagens se necessário, criar ilustrações ou ícones, e demais 
“acessórios” visuais. 
22
23
Para o desenvolvimento de um aplicativo, por exemplo, diferentes profissionais participam 
do projeto. Existem profissionais que trabalham apenas a etapa de UX e outros fazem a 
função de UI e desenvolvem a interface, porém abrirá mais portas no Mercado de Trabalho 
o profissional que dominar essas duas vertentes. Após a etapa de UX e UI, entram em cena 
Linguagens de Programação utilizadas por desenvolvedores que concretizam o que foi pre-
visto pelos designers, tanto para IOS como Android, e os dois Sistemas possuem variantes 
consideradas por esses profissionais. 
Segundo os princípios de Design Thinking é essencial os(as) desenvolvedores participarem 
desde a fase inicial (Discovery) do projeto (princípio de cocriação). 
23
UNIDADE Design Centrado do(a) Usuário(a)
Material Complementar
Indicações para saber mais sobre os assuntos abordados nesta Unidade:
 Sites
UX Design
https://bit.ly/361edph
 Leitura
7 sites e serviços que não mereciam ter sido encerrados
Matéria sobre serviços que eram oferecidos nos primórdios da web.
https://bit.ly/3p17p2m
Don Norman e o termo “UX”
Entrevista com Don Norman, idealizador da área de UX.
https://bit.ly/3638oYp
Estudo de caso: Projeto de Beatriz Desenzi
https://bit.ly/3o4CX68
Estudo de Caso UX/UI: Melhorando a experiência dos usuários na compra de passagens de ônibus através do 
aplicativo Viação Garcia
https://bit.ly/3o4D8OQ
Mapa de Empatia
Matéria sobre mapa de empatia na qual é possível baixar o template modelos 
do mapa.
https://bit.ly/392cmCA
24
25
Referências
BROWN, T. Design Thinking – Uma metodologia poderosa para decretar o fim das 
velhas ideias. Rio de Janeiro: Alta Books, 2018. 
FERREIRA, A. R.. Comunicação e aprendizagem: mecanismos, ferramentas e comu-
nidades digitais. São Paulo: Erica, 2014. (e-book) 
LOWDERMILK, T. Design Centrado no Usuário. Novatec: São Paulo, 2019.
MOREIRA, B. R. Guia Prático do Design Thinking: aprenda 50 ferramentas para 
criar produtos e serviços inovadores. Produção independente 2018. (e-book)
STICKDORN, M. Isto é Design Thinking de Serviços: Fundamentos, Ferramentas, 
Casos. Porto Alegre: Bookman, 2014. 
WHITE, A. Mídias digitais e sociedade. São Paulo: Saraiva, 2017. (e-book)
Site Visitado
 DESIGN Kit – The field guide. E-book gratuito com interessantes estudos de caso a 
respeito de Design Thinking. Disponível em: <http://www.designkit.org//resources/1>.
25