Slide da prirmeira aula interativa - UX Designer

Prévia do material em texto

A aula interativa do Módulo1 - Bootcamp UX Designer 
começará em breve!
A t e n ç ã o :
1 ) Vo c ê e n t r a r á n a a u l a c o m o m i c r o f o n e e o v í d e o D E S A B I LI TA D O S .
2 ) A p e n a s a n o s s a e q u i p e p o d e r á h a b i l i t a r s e u m i c r o f o n e e s e u v í d e o e m m o m e n t o s d e 
i n t e r a t i v i d a d e , i n d i c a d o s p e l o p r o f e s s o r.
3 ) U t i l i z e o r e c u r s o Q & A p a r a d ú v i d a s t é c n i ca s . N o s s o s t u t o r e s e m o n i t o r e s e s t a r ã o 
p r o n t o s p a r a t e r e s p o n d e r e a s p e r g u n t a s n ã o s e p e r d e r ã o n o c h a t .
4 ) P a r a g a r a n t i r a p o n t u a çã o d a a u l a , n o m o m e n t o e m q u e o p r o f e s s o r s i n a l i z a r, v o c ê 
d e v e r á i r a t é o a m b i e n t e d e a p r e n d i z a g e m e r e s p o n d e r a e n q u e t e d e p r e s e n ç a . N ã o é 
n e c e s s á r i o e n c e r r a r a r e u n i ã o d o Z o o m , a p e n a s m i n i m i z e a j a n e l a .
Mobile Design
Primeira aula interativa
Prof: Alan Vasconcelos
Mobile Design
Prototipagem Funcional
Prof. Alan Vasconcelos
Nesta aula
 Protótipos funcionais ou wireframes.
 Design de interface.
 Desafio.
Nos episódios anteriores...
Como chegamos até aqui
Dados de pesquisas
Persona
USM
Protótipo rápido
Definição do problema
E não é que já temos um 
“quase” portfólio?
Onde está a “beleza” do 
protótipo rápido?
No desapego
Nós temos uma certa 
dificuldade em descartar 
ou até mesmo “mexer” em 
algo que deu muito trabalho 
para ser feito... Ou que nos 
consumiu muito tempo.
E o protótipo funcional?
É uma evolução do anterior
Muitos chamam apenas de “Wireframe”. 
Nele, devemos considerar:
 Textos
Sempre que possível, evite o xxx e o lorem ipsum. Use textos mais reais.
 Iconografia
Isso pode ser a diferença entre um bom affordance/visibilidade.
 Tamanhos dos elementos
São, botões, menus, campos de texto... Dessa vez, tamanho importa. 
 Navegação
É importante simular como a persona navegaria de uma tela para outra.
É uma evolução do anterior
Não se preocupe com:
✗ Cores
A escolha das cores deve ser mais criteriosa, podendo até 
ser influenciada pelo manual de marca do seu cliente.
✗ Estilo visual
Bordas, sombras, imagens de fundo, etc.
✗ Fotos realistas
A menos que seja muito fácil aplicá-las.
Não deixe a reunião com 
o cliente sair do foco
Wireframe ao vivo...
Design de Interface
Linguagens de Design
Material Design
UI Kit
Densidade de pixels
É a quantidade de pixels que cabem em uma polegada de tela.
 iPhone 11 Pro Max (2019) - 458 PPI
 Samsung Galaxy S10 - 551 PPI
Densidade de pixels
Alta densidade Baixa densidade
Densidade de pixels
Um botão de 100px x 20px terá tamanhos diferentes em 
telas com diferentes densidades
Independência da Densidade
Usando uma unidade independente da densidade, podemos 
ter certeza que suas dimensões serão as mesmas em telas 
com densidades diferentes.
Independência da Densidade
dp
(pronuncia-se "dip")
Equivale a 1 pixel em uma 
dela de densidade igual a 
160 PPI.
points
Equivale a 1 pixel 
multiplicado pelo fator de 
cada modelo.
(ex.: iPhone 11 Pro é 3x)
https://apple.co/3jVez6b
Independência da Densidade
A maioria dos softwares de design de interface possui a opção de 
exportar ícones/imagens em diferentes fatores.
A galera do front-end agradece. 😇
Layout / Visual Design
Uma boa experiência começa com uma 
interface harmoniosa.
Respeite os limites
A Apple recomenda uma área mínima de 44 points para 
qualquer região clicável.
Respeite os limites
Já o Google recomenda uma área mínima de 48 dp para o 
eles chamam de "Touch Target".
Respeite os limites
O Google Material Design oferece um sistema de 
grid responsivo que se adapta aos tamanhos e 
orientação da tela, garantindo consistência.
Respeite os limites
A Apple oferece um recurso 
chamado auto-layout
Respeite os limites
Não saia da área de segurança 👮
Tipografia
Uma tipografia bem trabalhada 
melhora a experiência como um 
todo. E não estamos falando apenas 
em "escolher fontes".
Hierarquia
Diferentes tamanhos e espaçamentos torna 
mais fácil "escanear" a informação.
Comprimento
Blocos de texto
Prefira manter o comprimento entre 
40 e 60 caracteres. 
Em áreas maiores, como no desktop, 
as linhas mais longas com até 120 
caracteres precisarão de uma altura 
de linha (line-height) aumentada.
Comprimento
Textos curtos
Prefira manter o comprimento entre 20 e 40 caracteres. 
Fontes de sistema
Paleta de cores
A paleta de cores é a "alma" de 
qualquer interface. Mas tome 
cuidado para que a cor não seja a 
única forma de exibir uma 
informação.
Paleta iOS
Paleta Material Design
Paleta Material Design
Recursos
Apple e Google oferecem recursos 
gratuitos para nós usarmos em 
nossos projetos.
Recursos Apple
https://developer.apple.com/design/resources/
https://developer.apple.com/design/resources/
Recursos Material Design
https://material.io/resources
https://material.io/resources
Desafio para a 
próxima aula
Um protótipo de alta fidelidade
1. Inspire-se (Dribble, Behance)
(Sugestão) Crie painéis de inspiração no Miro
2. Crie um novo arquivo ou duplique seu wireframe
3. Instale um pacote de ícones
4. Escolha uma paleta de cores
5. Escolha uma família tipográfica
6. Faça pequenos testes com componentes
Será que eu sirvo pra isso?
Será que eu sirvo pra isso?
Experience Design Interface Design (UI)UX Research
Mercado
Entrevistas
USM *
Requisitos de usuário
Comportamento
Testes de usabilidade
Coleta de dados
Cardsorting *
Pesquisa de campo
(...)
Personas
Jornadas
USM *
Fluxos
Usabilidade
Protótipos rápidos
Arquitetura de informação *
Cardsorting *
(...)
Design visual
Estética
Design System
Tipografia
Ícones
Tendências visuais
Animações / Transições
Cores
(...)
UX Writing
Marketing
Tom de voz
Mensagens / alertas
Nomenclaturas
Chat Bots
(...)
DesignOps
Ilustrador(a)
Audio Designer
(...)
Muito obrigado!
Nos vemos nos fóruns e na próxima aula interativa =)
Prof. Alan Vasconcelos