User Interface e Design system

Prévia do material em texto

WBA0489_v1.0
Princípios de Design e 
Prototipação
User Interface e Design 
system
Bloco 1
Marcelo Henrique dos Santos
Design system
• Um sistema de design necessita de seleção da equipe principal (ou uma equipe mais distribuída, se esse
for a necessidade da empresa) que terá a responsabilidade de gerenciar o sistema.
Eles serão os profissionais que deverão aplicar a arte para criar os ativos, ferramentas e diretrizes que
trarão o compartilhamento e a “visão do projeto”, para o benefício dos clientes e outros benefícios
comerciais.
Fonte: z_wei/iStock.com.
Figura 1 – A seleção da equipe
Design system
• Essa equipe não conseguirá realizar todo esse processo por conta própria. Para que 
uma empresa e seus clientes desfrutem dos benefícios de um sistema de design 
estabelecido, quaisquer pessoas que influenciam os resultados precisam ser capazes e 
sentirem-se confortáveis no manuseio do sistema, seja por meio de ferramentas e 
recursos, ou por meio do compartilhamento das atividades fornecidas.
Fonte: miakievy/iStock.com.
Figura 2 – A importância do envolvimento 
dos pares
Design system
• Um sistema de design requer uma estrutura que deve envolver outras pessoas em uma 
jornada colaborativa. 
Fonte: sesame/iStock.com.
Figura 3 – A importância do 
engajamento dos clientes
É possível combinar uma forte 
visão criativa e gerenciar a direção 
artística a partir do engajamento 
com a comunidade de usuários do 
sistema de design.
O principal objetivo aqui é 
aprender juntos, para criar o 
interesse e impulsionar o 
envolvimento dos usuários.
Design system
• Garantir e obter consistência na experiência do usuário na criação de projetos é um dos 
motores para a definição de um sistema de design. 
Fonte: luckyvector/iStock.com.
Figura 4 – Aprimorando a 
experiência do usuário
Conforme o sistema de design 
amadurece, a consistência começa 
a cobrir mais do que apenas a 
experiência do usuário. 
Consistência pode ser vista em 
como a marca é entendida dentro 
da organização, quais 
metodologias e quais processos 
são usados ​​no desenvolvimento de 
produtos entre as equipes. 
Design system
• O sistema de design ajuda toda a organização a estar mais alinhada e a ter uma visão 
compartilhada do negócio e necessidades dos usuários (clientes).
Fonte: Natee127/iStock.com.
Figura 5 – O design system e a visão 
compartilhada
Design system
• Maior usabilidade e acessibilidade
Com a construção de componentes reutilizáveis, as equipes não precisam começar um 
novo projeto sem ter nenhum elemento inicial.
Isso significa que é de suma importância o compartilhamento de questões de usabilidade 
e acessibilidade que já foram testadas e validadas previamente (em projetos anteriores).
Fonte: Irina_Strelnikova/iStock.com.
Figura 6 – Usabilidade e 
acessibilidade
Com mais treinamento, a 
equipe ficará ciente das 
escolhas que estão por trás 
dos padrões de UI.
Design system
• O ato de destacar as inconsistências na experiência do usuário é uma maneira eficiente
de mostrar a necessidade da criação de um sistema de design.
• Prepare um bloco com o inventário do projeto.
• Adicione slides para vários tipos de elementos de interface do usuário.
Fonte: Irina_Strelnikova/iStock.com.
Figura 7 – Vantagens da criação do design system
Design system
• Inclua alguns pontos de 
orientação.
• Convide todos os envolvidos 
para contribuir com a 
construção do inventário.
• Armazene uma cópia com as 
alterações realizadas pela 
equipe.
• Execute o exercício 
novamente depois de alguns 
meses e avalie as escolhas 
que foram feitas. 
Fonte: IconicBestiary/iStock.com.
Figura 8 – Representação da 
importância da contribuição da 
equipe na construção do inventário
Design system
Como os sistemas de design ajudam para a obtenção da qualidade dos projetos? 
• Temos a possibilidade de criar produtos e serviços sofisticados. 
• Temos uma maneira sistêmica de iterar os componentes no processo de análise e 
validação constante. 
Fonte: z_wei/iStock.com.
Figura 9 – Os sistemas de design 
e a qualidade dos projetos• Podemos garantir acessibilidade 
e legibilidade em um nível de 
sistema por meio de cores e 
tokens.
• Podemos sistematizar 
microinterações por meio de 
padrões, regras e componentes, 
e temos mais tempo para 
construir e testá-los.
Design system
Construa equipes mais felizes e 
produtivas
Um sistema de design bem 
implementado é fácil para entender e 
usar se e quando: 
• Oferece suporte a indivíduos e 
equipes em seus trabalhos diários.
• Fornece uma referência absoluta 
de qualidade, bem como um 
fundamento lógico claro por trás 
das decisões tomadas. Fonte: Jesussanz/iStock.com.
Figura 10 – Construção da 
equipe
Design system
• Fornece velocidade e estabilidade como resultado, integrando a equipe de forma contínua. 
Designers e desenvolvedores, bem como todos os envolvidos, terão um tempo adequado para 
discutir mudanças potenciais. 
Fonte: Jesussanz/iStock.com.
Figura 11 – O alinhamento da 
equipe 
Um número de questões de 
alinhamento que, anteriormente 
ficaram sem resposta, agora são 
respondidas. 
Além de poder ter um espaço para o 
compartilhamento, as equipes podem 
aumentar seu foco nos objetivos 
centrais. Ver o progresso é não apenas 
gratificante para a equipe; mas 
impulsiona os envolvidos a criar 
soluções mais ousadas e mais 
ambiciosas.
User Interface e Design 
system
Bloco 2
Marcelo Henrique dos Santos
User interface
A experiência do usuário (UX)
É a prática onde colocamos o 
usuário final no centro do universo e 
definimos o sistema dessa 
perspectiva.
A usabilidade significa o ato de 
encontrar a melhor correspondência 
entre as necessidades de um 
usuário e na utilização de um 
produto (site, aplicativo e sistema).
Fonte: z_wei/iStock.com.
Figura 12 – A experiência do 
usuário
User interface
Embora esta seja uma especialidade em si, um cientista/desenvolvedor pode aumentar o
apreço pela UX, o que afeta os seguintes elementos:
1. Funcionalidade.
2. Organização e estrutura do sistema.
3. Interações e aparência.
4. Acesso.
Fonte: z_wei/iStock.com.
Figura 13 – Importância da UX 
no desenvolvimento de projetos
User interface
A interface do usuário (UI)
A pesquisa de Interação 
Humano-Computador (IHC) é 
focada nas interfaces entre as 
pessoas (usuários) e 
computadores.
A UI lida com o ponto de 
interação ou comunicação 
entre um computador e o ser 
humano. 
Fonte: MicrovOne/iStock.com.
Figura 14 – Representação da 
interação humano computador
User interface
A UI lida com o layout dos controles gráficos, falados, de toque ou textuais de um aplicativo 
em conjunto com a forma como o aplicativo responde à atividade do usuário.
A UI atende a duas necessidades principais de UX:
1. Interações e aparência.
2. Acesso.
Fonte: Dmitry Volkov/iStock.com.
Figura 15 – Representação dos layouts dos controles gráficos
User interface
Design centrado no usuário
Coloca o usuário final no centro 
do universo e define o sistema 
a partir de sua perspectiva.
Fonte: OrnRin /iStock.com.
Figura 16 – Representação da 
definição do público alvo
User Interface e Design 
system
Bloco 3
Marcelo Henrique dos Santos
Manipulação da ferramenta 
• O objetivo desse bloco é apresentar para os alunos a utilização de uma 
ferramenta e prototipar uma página mobile. 
>>> Captura de vídeo da ferramenta.
Teoria em Prática
Bloco 4
Marcelo Henrique dos Santos
Reflita sobre a seguinte situação
Uma indústria multinacional contratou uma empresa para criar a identidade visual do 
portal comercial e você deve gerenciar esse processo. A partir disso, será necessário 
convocar a equipe de criação para conseguir compreender uma série de princípios de 
design de interface de usuário para atender a demanda. Uma das principais preocupações 
de sua equipe será aplicar os princípios da consistência da interface do usuário, para que os
comandos do sistema e os menus tenham o mesmo formato. 
Quais premissas devem ser pontuadas para a sua equipe paraque 
as interfaces do projeto sejam consistentes auxiliando na redução 
do tempo de aprendizagem do usuário? O que está envolvido nas 
atividades do usuário nesse processo de criação do design de 
interface? De que maneira será possível compreender os atributos 
de usabilidade e conhecer as diferentes abordagens para 
avaliação de interface?
Norte para a resolução...
• Uma indústria multinacional contratou uma empresa para criar a identidade visual 
do portal comercial e você deve gerenciar esse processo. 
• A partir disso, será necessário convocar a equipe de criação para conseguir 
compreender uma série de princípios de design de interface de usuário para 
atender a demanda. 
Fonte: ONYXprj/iStock.com.
Figura 17 – Representação de uma 
indústria multinacional
Norte para a resolução...
• Uma das principais preocupações de sua equipe será aplicar os princípios da 
consistência da interface do usuário, para que os comandos do sistema e os 
menus tenham o mesmo formato. 
Fonte: VectorHot/iStock.com.
Figura 18 – Representação da definição 
coerente dos comandos do sistema e menus
Norte para a resolução...
• Quais premissas devem ser pontuadas para a sua equipe para que as interfaces 
do projeto sejam consistentes auxiliando na redução do tempo de 
aprendizagem do usuário? 
Fonte: sgursozlu/iStock.com.
Figura 19 – Representação da 
construção do layout do sistema
Norte para a resolução...
• O que está envolvido nas 
atividades do usuário 
nesse processo de 
criação do design de 
interface? 
• De que maneira será 
possível compreender os 
atributos de usabilidade 
e conhecer as diferentes 
abordagens para 
avaliação de interface?
Fonte: sorbettoi/iStock.com.
Figura 20 – Processo de criação 
do design de interface
Dica do Professor
Bloco 5
Marcelo Henrique dos Santos
Dica do Professor
• Filme: Abstract: the art of 
design (2017)
A série possibilita ao 
telespectador realizar um 
olhar além de projetos e 
computadores para a arte 
e ciência do design, 
apresentando grandes 
designers de todas as 
disciplinas cujo trabalho 
molda o nosso mundo (em 
todos os sentidos e 
aspectos).
Fonte: captura de tela do Youtube.
Figura 21 – Print do Trailer do file Abstract
Desenvolvimento de um protótipo
• Framebox
Fonte: captura de tela do Framebox.
Figura 22 – Print do Framebox
Desenvolvimento de um protótipo
Fonte: captura de tela do Framebox.
Figura 23 – Print do Framebox
Referências
LOWDERMILK, T. Design centrado no usuário: um guia para o 
desenvolvimento de aplicativos amigáveis. São Paulo: Novatec, 2013.
ROGERS, Y.; SHARP, H.; PREECE, J. Design de interação: além da interação 
humano-computador. 3. ed. São Paulo: Bookman, 2013. 
HELLER, E. Psicologia das cores: como as cores afetam a emoção e a razão. 
São Paulo: GG, 2012. 
KRUG, S. Não me faça pensar. Rio de Janeiro: Alta Books, 2014.
Referências
FRAMEBOX. Site Oficial da Ferramenta de Prototipação. Disponível em: 
http://framebox.org. Acesso em: 7 out. 2020.
http://framebox.org/
Bons estudos!
	Princípios de Design e Prototipação
	User Interface e Design system
	Design system
	Design system
	Design system
	Design system
	Design system
	Design system
	Design system
	Design system
	Design system
	Design system
	Design system
	User Interface e Design system
	User interface
	User interface
	User interface
	User interface
	User interface
	User Interface e Design system
	Manipulação da ferramenta 
	Teoria em Prática
	Reflita sobre a seguinte situação
	Norte para a resolução...
	Norte para a resolução...
	Norte para a resolução...
	Norte para a resolução...
	Dica do Professor
	Dica do Professor
	Desenvolvimento de um protótipo
	Desenvolvimento de um protótipo
	Referências
	Referências
	Bons estudos!