Resumo Projetos Gráficos para Mídias Digitais | Design Gráfico Cruzeiro do Sul Virtual

Prévia do material em texto

Projetos Gráficos para Mídias Digitais 
 
Unidade 1 – Planejamento 
de Interface 
 
UX: Experiência do usuário 
● User Experience Design 
● Busca a relação de um determinado produto (app, 
site, painel de operação de uma máquina, 
eletrodoméstico, etc) com o usuário. 
● Relação intuitiva e mais objetiva e simples possível 
● Área antes conhecida como Arquitetura de 
Informação 
Definição de Interface 
A interface é o meio por meio do qual o usuário 
percebe o produto ou o serviço interagindo de 
diversas formas. 
A experiência positiva com o produto/serviço, 
aumenta a percepção do valor da marca tendo mais 
chance do consumidor/cliente se tornar fiel a esse 
produto/serviço. 
Através do UX Design, a empresa promove produtos 
e serviços de maneira mais eficaz. 
Quando o produto é pesado apenas para ter 
inúmeras funcionalidades, esquece-se que o usuário 
acaba rejeitando muitos desses recursos por não 
perceber utilidade ou por estar preso a uma “zona de 
conforto”. 
Interface Intuitiva 
Somos bombardeados por informação a todo 
momento, por isso é necessária a interface não ser 
complicada e possibilitar o menor caminho possível. 
Ferramentas utilizadas pelo UX 
Designer 
Os estudos podem ser apresentados por meio de 
diferentes recursos: 
● Wireframe estática: guia visual que representa a 
estrutura da página e a hierarquia dos principais 
componentes. 
https://www.productplan.com/glossary/wireframe/ 
● Prototipação interativa: simulação da navegação e 
das funcionalidades, por meio de um layout acionável 
(Sketch, Adobe XD, Proto.io e Marvelapp.com) 
 
https://dad.puc-rio.br/2017/07/12/prototipagem-de-web-sites-e-
aplicativos-dsg1720/ 
● Gráficos: podem representar visualmente dados 
numéricos levantados através de testes em 
produtos/serviços 
Fonte: acervo do professor 
● Mapa de site: diagrama das páginas de um site 
organizadas por hierarquia 
https://dad.puc-rio.br/2017/07/12/prototipagem-de-web-sites-e-aplicativos-dsg1720/
https://dad.puc-rio.br/2017/07/12/prototipagem-de-web-sites-e-aplicativos-dsg1720/
https://www.idealmarketing.com.br/blog/o-que-e-sitemap/ 
● Relatório de usabilidade/analytics: com a análise de 
métricas do Analytics é possível identificar o que pode 
ser melhorado na navegação 
● Mapa da jornada do usuário ou storyboard: 
diagrama que mostra os passos que o consumidor dá 
na interação com o produto/serviço 
 
https://blog.opinionbox.com/jornada-do-usuario/ 
 
https://careerfoundry.com/en/blog/ui-design/best-storyboard-examples/ 
● Relatório de análise competitiva: Benchmark – 
análise dos produtos concorrentes 
● Mockup visual de alta fidelidade: representação 
detalhada do produto final 
 
https://www.freepik.com/free-photos-vectors/ux-mockup 
● Sistemas de resultado de rastreamento: análise do 
movimento dos olhos do usuário ou mouse durante a 
interação com o produto. Mostra as partes da 
interface que mais interessam ao usuário 
 
https://vwo.com/blog/heatmap-and-ux/ 
● Moodboard ou mapa mental: conjunto de imagens 
como referência para o estilo visual do produto. 
 
https://discoverbigfish.com/mood-boards-in-ui-and-ux-design.html 
 
https://blog.opinionbox.com/jornada-do-usuario/
https://careerfoundry.com/en/blog/ui-design/best-storyboard-examples/
https://vwo.com/blog/heatmap-and-ux/
https://discoverbigfish.com/mood-boards-in-ui-and-ux-design.html
Exemplo Prático 
Esboço das telas de um livro de 3 capítulos em 
formato de aplicativo. Há um fluxograma feito em 2 
etapas 
 
Fonte: acervo do conteudista 
 
Fonte: acerto do conteudista 
 
 
 
 
Unidade 2 – Desenvolver 
aplicativo a partir do 
fluxograma 
Quem desenvolve trabalho na área criativa, realiza 
projetos para as pessoas. Para alcançar uma boa 
experiência do usuário, podemos traçar métricas – a 
forma de medir se o projeto está cumprindo seus 
objetivos e se realmente terá condições de auxiliar as 
pessoas, solucionando problemas reais. 
As métricas (KPIs, Key Performance Indicators) 
medem como e em que tempo o usuário consegue 
executar determinada tarefa dentro do aplicativo. 
Exemplo: o preenchimento de um cadastro ou a 
busca de determinado conteúdo. 
↳ O cadastro foi concluído com sucesso? 
↳ A busca realmente retornou o que o usuário 
procurou? 
Podemos fazer analises quantitativas através do 
Google Analytics ou qualitativas através de Testes de 
Usabilidade (o usuário usa o protótipo do aplicativo que 
está em desenvolvimento com a ajuda de um 
profissional da equipe) com uma quantidade menor de 
pessoas. 
● As métricas em UX existem para mensurar as taxas 
de sucesso que o usuário alcança ao tentar realizar 
determinada tarefa 
Planejamento Base para o 
Aplicativo 
Nos wireframes não há representação de cores e 
imagens, apenas linhas estruturais e alguns detalhes 
como ícones. 
Aplicativo desenvolvido no AppInventor: 
 
Fonte: acervo do conteudista 
Modelo de Tela Interna 
Para o desenvolvimento de um aplicativo, diferentes 
profissionais participam do projeto, aqueles que atuam 
apenas na área de UX e aqueles que fazem a função 
de UI e desenvolvem a interface. Um profissional que 
dominar as duas vertentes terá mais oportunidades 
no mercado de trabalho. 
Ferramentas: Figma, Mockflow, 
Sketch, Lucidchart, Axure 
 
 
Unidade 3 – Design Centrado 
no Usuário 
Formas de coleta e análise dos dados qualitativos 
baseados em diretrizes do design e comportamentos 
do usuário para construção de interfaces em forma 
de protótipos. 
Princípios do Design Thinking 
Busca de soluções por meio da criatividade, colocando 
o ser humano no centro do design, tudo partindo da 
empatia. 
● Trata de recursos mais humanos, como a intuição, 
forma como percebemos e identificamos padrão. 
● É pensar na criatividade pelo emocional e não 
apenas funcional. 
● Modelo de pensamento centrado nas pessoas, 
buscando soluções inovadoras e significativas. 
Design Thinking na prática 
Questões cruciais a serem respondidas: 
● O que você e a equipe sabem sobre o problema a 
ser resolvido? 
● Qual a relevância do aplicativo na vida das pessoas? 
Etapas do Design Thinking: 
1ª Etapa – 
Imersão 
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). 
Podem ser realizadas dinâmicas em grupo 
(focous group). 
2ª Etapa – 
Definição 
Reunir tudo que foi levantado durante a 1ª 
etapa. Liste os problemas e as carê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 trabalhando 
juntas). Utiliza-se ferramentas de 
metodologia de Design em prol da criação, 
Ex: Brainstorm, mapa mental, painel 
semântico e prototipagem. 
 
● Protótipo: tirar as ideias da mente e concretizá-las 
fisicamente. Varia de esboços simples feitos a mão 
até interfaces e layouts mais elaborados. Baixa, média 
ou alta fidelidade. 
● Escopo: é importante definir um escopo para o 
projeto. Semelhante ao briefing. Funciona como uma 
espécie de roteiro e documentação do projeto para 
nortear o que será desenvolvido. 
Pesquisa de Campo 
→ Fator primordial da 1ª etapa do Design Thinking 
Na fase de imersão é necessário ir até o usuário e 
fazer perguntar específicas. 
Definir Persona 
● Persona: Representa um conjunto de atributos e 
características, uma espécie de “ficha técnica” do 
usuário. 
Não é baseada apenas em estatísticas, em dados 
analíticos ou no que você e a equipe “acham”. 
É importante levantar qual o objetivo do usuário. 
A ficha deverá ser consultada e não é estática. 
Mapa de Empatia 
 
Referências: 
Este resumo foi produzido com base nas apostilas 
da disciplina Projetos Gráficos para Mídias Digitais da 
Cruzeiro do Sul Virtual.