Princípios de Design e UX/UI

Prévia do material em texto

WBA1423_v1.0
Princípios de design e prototipação 
em sistemas digitais 
Conceitos gerais sobre UX e UI
Princípios e fundamentos de UX e UI
Bloco 1
Cleber Correia
Vamos refletir?
Você já pensou que a experiência do 
usuário não ocorre só no ambiente digital?
Fundamentos sobre UX e UI
O que é UX?
Podemos entender a experiência do usuário como a 
forma do usuário interagir com produtos, serviços, 
sistemas e ambientes.
Esse processo de interação é entendido como seu 
uso e entendimento de percepção de como precisa 
ser utilizado, empregado e até testado pelo usuário. 
Fundamentos sobre UX e UI
Perfil do usuário:
Fonte: https://br.freepik.com/vetores-
gratis/colecao-de-icones-de-
pessoas_1157380.htm#fromView=search&
page=1&position=0&uuid=4234f31c-fbae-
45bd-9ba3-ed91a5452610.
Fundamentos sobre UX e UI
O que é UI?
Podemos entender user interface, ou uso de 
interface, como o design de interface que 
destaca a capacidade de construir interfaces!
Fundamentos sobre UX e UI
Qual a diferença entre UX e UI?
A experiência do usuário estuda o 
comportamento do usuário em relação ao 
uso do produto digital ou analógico, e o 
design de interface avalia a construção da 
interface de sistemas, sites e aplicativos.
Fundamentos sobre UX e UI
O que é web design ou design web?
Fonte: https://br.freepik.com/fotos-gratis/conceito-de-
programacao-de-navegacao-de-tecnologia-de-design-
web_25312343.htm#fromView=search&page=1&position=
2&uuid=747d2111-305f-4f9d-8067-2d141c86018a.
Conceitos gerais sobre UX e UI
Áreas integradas
Bloco 2 
Cleber Correia
Áreas integradas
As áreas que compõem UX:
• Arquitetura da Informação.
• Design de Interação. 
• Design de Interface. 
• Usabilidade. 
• Acessibilidade. 
• Prototipação. 
Áreas integradas
As áreas que compõem UX:
• Arquitetura da Informação: é um mapa 
de projeto, voltado para gestão de 
conteúdo e navegação do usuário. 
Áreas integradas
• Design de Interação: é o design voltado 
para o uso ou criação de ferramentas de 
comunicação dentro de sites, apps e 
sistemas. 
Áreas integradas
• Design de Interface: é o design voltado 
para a construção e desenvolvimento de 
telas de interação, funcionamento e 
navegação do usuário. 
Áreas integradas
• Usabilidade: é a área de avaliação 
e testagem de uso de produtos 
reais e digitais. 
Áreas integradas
• Acessibilidade: é a área de avaliação e criação 
de ferramentas para facilitar a vida do usuário, 
dentro do uso de produtos reais e digitais.
• Prototipação: é o design de um produto real 
ou digital, que pode ser testado para avaliar 
ideias e soluções durante o processo de 
construção e implementação do projeto de 
sites, apps e sistemas.
Bloco 3 
Cleber Correia
Conceitos gerais sobre UX e UI
História sobre Web e UX
História sobre web e UX
História da Web:
• Surgimento da tecnologia da Internet: 1969.
• Surgimento do computador pessoal: IBM 5150,em 
1981 – Apple II, em 1984.
• Surgimento do sistema operacional Windows pela 
empresa Microsoft: 1981.
História sobre web e UX
História da web:
• Criação World Wide Web: 1993.
Fonte: https://br.freepik.com/vetores-gratis/www-internet-globe-
grid_43855963.htm#fromView=search&page=1&position=0&uuid=1cb
20bfc-4d84-49c1-933f-569147aa2b80.
História da web
História sobre web e UX
História da web:
• Diminuição de preços de produtos de informática no Brasil: 1994.
• Chegada da Internet comercial ao Brasil: 1995.
• Lançamento do Windows 95.
História sobre UX:
Surgimento do conceito de UX: década de 1990.
História sobre web e UX
Fonte: https://www.ux-republic.com/pt/atores-
de-lux-donald-a-norman/.
História sobre UX
História sobre UX:
• Lançamento do Iphone: 2007.
• Lançamento do HTML 4 para projetos 
mobile, transformando os projetos de sites 
em modelos responsivos.
História sobre web e UX
Bons estudos!
Perfil profissional
Perfil web:
Webdesigner: designer que pensa no design estático 
de projetos para Internet, que basicamente tinha 
uma visão de funcionamento e navegação, sem focar 
muito em formas de interação.
Front-end: é o design voltado a focar na interface do 
site.
Back-end: é o programador que coloca interface dos 
sites para funcionar.
Bons estudos!
Perfil profissional
Perfil UX:
Designer UX (experiência do usuário): é o profissional de design 
responsável em investigar o comportamento do usuário em uso 
de produtos digitais, analisando sua performance durante o 
comprimento de atividade do produto.
Design UI (designer de interface): é o profissional de design 
responsável em criar e desenvolver a interface de produtos 
digitais, que elaboram a construção das telas de sistemas, sites e 
aplicativos.
Designer writing (designer de conteúdo): é o profissional de 
design responsável pela elaboração e escolha de conteúdo para 
os produtos digitais.
Bons estudos!
Perfil profissional
Diferença entre perfil web e UX:
Fonte: https://medium.com/mega-senior/como-fiz-a-
transi%C3%A7%C3%A3o-de-web-designer-para-ux-designer-
435c30846b5c. 
Diferença
Bons estudos!
Perfil profissional
Projeto web:
• Escolha do nome.
• Pesquisa para domínio.
• Compra do domínio e adaptação de pagamento.
• Pesquisa e escolha do servidor de hospedagem.
• Compra do plano de hospedagem integrado com contas de e-mails.
• Pesquisa e construção do organograma de Arquitetura da Informação (AI).
• Criação e desenvolvimento do wireframe do site.
• Criação e adaptação do wireframe e layout do site.
• Teste de usabilidade e navegabilidade do site.
• Publicação do site.
Bons estudos!
Perfil profissional
Projeto mobile:
• Conhecer o aparelho.
• Conhecer o sistema operacional.
• Como é navegável o projeto.
• Estilo do app.
• Arquitetura da Informação: mapa de conteúdo.
• Wireframe: diagramação do conteúdo.
• Fluxo de navegação: formas de navegação.
• Wireframe, Layout e Mocap: modelo do projeto.
• Prototipação e adaptação do protótipo a etapa de desenvolvimento.
• Aprovação, homologação das lojas digitais e publicação para download. 
Bloco 4 
Cleber Correia
Conceitos gerais sobre UX e UI
Teoria em prática
Reflita sobre a seguinte situação
Pense em como um designer faz para entender a mente 
do usuário, como estabelecer seu entendimento de 
como reagir, pensar e tomar decisões quando acontece 
navegação por um site e aplicativo. Nesse ponto, 
é preciso entender a performance de como acessar site 
por um site e também por um mesmo aplicativo do site.
Norte para a resolução
Descrição: faremos uma atividade prática para você identificar as 
principais caraterísticas de acessar um site pelo computador 
desktop e um aparelho de celular mobile. O critério é que o site que 
você escolhe precisa ter aplicativo e ser da mesma empresa, 
produto ou serviço, assim, a navegação e o acesso ao conteúdo 
serão o mesmo. Dessa forma, você fará o papel de usuário, 
navegando no site e no aplicativo.
Objetivo: passar pela experiência de ser um usuário de site app de 
uma mesma empresa e verificar as similares e diferenças entre 
o acesso ao site e ao aplicativo, que, muitas vezes, parecem iguais, 
porém, possuem diferenças no seu acesso a cada produto.
Tema: navegação web e mobile.
(Franco et al., 2015)
Norte para a resolução
Fonte: adaptado de Franco et al. (2015).
Avaliação do usuário no 
computador
Avaliação do usuário 
no celular
Mobilidade.
Navegação.
Usabilidade.
Acessibilidade.
Conteúdo.
Mobilidade.
Navegação.
Usabilidade.
Acessibilidade.
Conteúdo.
Etapas de projeto: processo de avaliação e dar seu ponto de vista 
como usuário. Dessa forma, poderemos aprender como os 
usuários reagem ao navegar pelo computador e pelo celular. 
Vamos aos pontos de avaliação de performance do usuário, no 
computador e no celular:
Norte para resolução
Bons estudos!
Norte para a resolução
Mobilidade: verificar como é usar um site no computador e no 
celular, um só pode usar parado (computador) e outro, em 
qualquer lugar(celular).
Navegação: analisar como é acessar o site pela web e mobile. 
Web livre e acessível, já no mobile, é adaptativo e menor a 
visualização do conteúdo.
Usabilidade: usar um computador é mais fácil porque já 
acostumamos e com o celular, precisamos sempre nos adaptar a 
novas tendências de ferramentas de aplicativos.
Acessibilidade: os dois possuem ferramentas de acessibilidade. 
Conteúdo: nos dois aparelhos é possível acessar conteúdo.
Bloco 5 
Cleber Correia
Conceitos gerais sobre UX e UI
Consolidando o aprendizado
Consolidando o aprendizado
• Tópicos estudados:
• Projeto web e mobile.
• Conceituação sobre web e UX.
• Áreas de UX.
• Linha do tempo de web e UX.
• Perfil profissional.
• Projetos web e mobile.
Quiz
A B
C D
Qual função do profissional de projeto de web foca na interface 
do site ou app?
Front-end. Webdesigner.
Back-end. Programador. 
Quiz
A B
C D
Qual função do profissional de projeto de web foca na interface 
do site ou app?
Front-end. Webdesigner.
Back-end. Programador. 
Quiz – Resolução
Resposta correta: a) Front-end.
O profissional de webdesign front-end é o 
responsável pela construção da interface do 
projeto digital, que podem ser sites, apps ou 
sistemas.
Leitura Fundamental
Prezado estudante, as indicações a seguir podem estar disponíveis 
em algum dos parceiros da nossa Biblioteca Virtual (faça o login por 
meio do seu AVA), e outras podem estar disponíveis em sites 
acadêmicos (como o SciELO), repositórios de instituições públicas, 
órgãos públicos, anais de eventos científicos ou periódicos 
científicos, todos acessíveis pela internet.
Isso não significa que o protagonismo da sua jornada de 
autodesenvolvimento deva mudar de foco. Reconhecemos que 
você é a autoridade máxima da sua própria vida e deve, portanto, 
assumir uma postura autônoma nos estudos e na construção da sua 
carreira profissional.
Por isso, nós o convidamos a explorar todas as possibilidades da 
nossa Biblioteca Virtual e além! Sucesso!
Indicação de leitura 1
Para expandir o conhecimento sobre a área de 
webdesign, podemos explorar a leitura do livro 
indicado. No capítulo 1, temos histórico e conceitos 
importantes.
Referência:
PAZ, M. Webdesign. Curitiba: Intersaberes,2021.
Indicação de leitura 2
Para expandir o conhecimento sobre o design 
de aplicativos, leia o capítulo 2 do livro indicado.
Referência:
CARDOSO, L. da C. Design de aplicativos. Curitiba: 
Intersaberes, 2022.
Referências
CARDOSO, L. da C. Design de aplicativos. Curitiba: Intersaberes, 
2022.
GRANT, W. UX Design: guia definitivo com as melhores práticas de 
UX. São Paulo: Novatec, 2019.
KRUG, S. Não me faça pensar. 1. ed. Rio de Janeiro: Alta Books, 
2014.
LOWDERMILK, T. Design centrado no usuário: um guia para o 
desenvolvimento de aplicativos amigáveis. 1. ed. São Paulo: 
Novatec, 2013.
NORMAN, D. A. Design emocional: porque adoramos (ou
detestamos) os objetos do dia a dia. 1. ed. Rio de Janeiro: Rocco, 
2008.
PAZ, M. Webdesign. Curitiba: Intersaberes,2021.
REIS, G. Fundamentos de UX - Volume 1: conceitos e boas práticas. 
[s. l.], edição do autor, 2021.
TEXEIRA, F. Introdução e boas práticas em Ux Design. São Paulo: 
Casa do Código: 2014.
Bons estudos!
	Slide 1: Princípios de design e prototipação em sistemas digitais 
	Slide 2: Conceitos gerais sobre UX e UI
	Slide 3
	Slide 4: Fundamentos sobre UX e UI 
	Slide 5: Fundamentos sobre UX e UI 
	Slide 6: Fundamentos sobre UX e UI 
	Slide 7: Fundamentos sobre UX e UI 
	Slide 8: Fundamentos sobre UX e UI
	Slide 9: Conceitos gerais sobre UX e UI 
	Slide 10: Áreas integradas
	Slide 11: Áreas integradas
	Slide 12: Áreas integradas
	Slide 13: Áreas integradas
	Slide 14: Áreas integradas
	Slide 15: Áreas integradas
	Slide 16: Conceitos gerais sobre UX e UI 
	Slide 17: História sobre web e UX 
	Slide 18: História sobre web e UX 
	Slide 19: História sobre web e UX
	Slide 20: História sobre web e UX 
	Slide 21: História sobre web e UX 
	Slide 22: Perfil profissional 
	Slide 23: Perfil profissional 
	Slide 24: Perfil profissional 
	Slide 25: Perfil profissional 
	Slide 26: Perfil profissional 
	Slide 27: Conceitos gerais sobre UX e UI
	Slide 28
	Slide 29
	Slide 30
	Slide 31: Norte para a resolução 
	Slide 32: Conceitos gerais sobre UX e UI 
	Slide 33
	Slide 34
	Slide 35
	Slide 36
	Slide 37
	Slide 38: Indicação de leitura 1
	Slide 39: Indicação de leitura 2
	Slide 40
	Slide 41: Bons estudos!