Aula 5
Transformação Digital Prototipação
em Multi-X Conceito e História
Prof. Renato Vertemati
1 2
Onde estamos? Conceito
Hipótese
Conceitos
iniciais
Protótipo é uma versão aproximada da
Novas
Conceito
ideias solução, usada para testar conceitos básicos
Insights relacionados ao seu uso
Pesquisa EXPERIMENTO Desenvolvimento
É particularmente indispensável para o
Direção Identificar
necessidade
Exploração
Feedback desenvolvimento de produtos digitais, que
Revisão de
hipóteses tem por um lado infinitas possibilidades de
funcionalidade, mas por outro a limitação do
Problema Solução
Design thinking Lean UX Agile UX
uso via telas
3 4
Linha do tempo da prototipação
2000-2003 — Lançamentos: Omnigraffle,
1970 — Desenvolvimento de software ainda Axure e iRise
dominado pelo método Cascata 2001 — Manifesto Ágil
1975 — Reconhecimento e desenvolvimento
2005 a 2008 — Lançamentos SaaS:
da Arquitetura de Informação
MockupScreens, Gliffy, Jumpchart, Balsamiq,
1980 — Primeiros protótipos visuais digitais Protoshare e Justinmind
1986 — Lançamento do primeiro software de
2011 - 2013 — Lançamentos Hi-Fi Saas:
design: Adobe Illustrator
UXPin, InVision, Flinto, POP e Marvel
1990 — Lançamento do Adobe Photoshop
5 6
A prototipação evolui com os softwares disponíveis
1983 2022
Tempest – Atari 5200 Marvel App
[Link] Crédito: Renato Vertemati
7 8
Protótipos do futuro
O futuro da prototipação é ÁGIL
Velocidade
Prototipação – presente e futuro
Prototipação
Refinamento
Repetição
Democratização
Zero código
Interação direta no protótipo
9 10
Microinterações
Protótipos desenhados para um único caso
de uso
Microinterações - exemplos
Atenção individual a detalhes de interface
Barra de rolagem
que podem significar o sucesso de uma
Notificação de mensagem
aplicação toda
Sempre é disparada por um gatilho (do Controle de volume em um vídeo player
usuário ou sistema)
Microinteração > microiteração
11 12
Pianodiaphragm/Shutterstock
Prototipação – formatos
[Link]
f317faa316096bef7_06_10_2015/iphone_tap.gif
[Link]
13 14
Wireframe estático
Esqueleto visual da solução
Módulos não refletem o design,
nem a interação
Chaosamran_Studio/ Shutterstock
É uma referência dos componentes
que existem em cada página/porção da
solução a ser desenhada
15 16
Protótipo
É uma entrega exclusiva do designer
Não explora o uso da solução Também chamado de wireframe
Toma um grande tempo para ser construído e interativo ou navegável
depois é descartado Entrega mais próxima do produto
Está distante demais da solução para ser Não precisa ser “pixel perfect”
avaliado como tal e, portanto, não garante a
Evolui conforme os softwares de
qualidade do produto
prototipação evoluem
17 18
Design System
Usman/Adobe Stock
19 20
A continuação do pensamento ágil na fase
seguinte à prototipação
“Se eu tivesse 8 horas para cortar uma “Um produto que serve a outro produto”
árvore, passaria as primeiras 6 afiando É uma forma de documentação, mas com
meu machado” (Abraham Lincoln) vistas à agilidade e não à burocratização
Não ofende os princípios do manifesto ágil,
pelo contrário
21 22
É o conjunto organizado dos assets/módulos Normalmente é dividido nos seguintes
e componentes de um projeto digital módulos
Sua principal vantagem é agilizar o Conceitos/tutoriais
desenvolvimento e a manutenção dos Capítulo que contém os fundamentos
projetos, devido ao uso racional destes mais teóricos do design daquela solução
componentes (reutilização) ou plataforma
23 24
Exemplo do design system do Google,
Estilos intitulado “Material Design”
Regras para o uso de cores, ícones,
tipografia
Componentes
Todos os padrões de elementos
reutilizáveis como botões, barras e
menus de navegação, barras de scroll
etc.
[Link]
25 26
Exemplo do Exemplo
design system do design
do Google, system do
intitulado Shopify,
“Material intitulado
Design” “Polaris”
COLOR LAYOUT TYPOGRAPHY
The color system Responsive Layout Grid The type system
[Link] [Link]
next-76c82f773d6f
27 28
Design system
Design Responsivo
[Link]
29 30
A internet móvel estreou no mundo ainda nos
anos 1990, mas foi com o smartphone que
Redes sociais, conversas de voz, tudo migrou
ela ganhou força e relevância
para o celular, e tudo funciona via internet
No Brasil, o 3G começou a operar em 2007
O design responsivo é uma obrigatoriedade
De lá para cá, a velocidade e a resolução das
para a esmagadora maioria dos projetos
telas aumenta exponencialmente, tornando o
digitais
celular o principal meio de acesso à internet
no Brasil e no mundo*
31 32
Desafios da responsividade
E isso sem Quantidade de telas disponíveis
considerar a IoT Versões de sistema operacional, capacidade
de processamento e memória
Chesky/ Shutterstock
33 34
Testes multibrowser/device
SAMSUNG MOTOROLA XIAOMI OUTROS
MOBILE -
ANDROID
21 2 4 10
MOBILE -
IPHONE IPAD
APPLE
iOS 14
versões 20 29
Renato Vertemati.
Sistema: Lambda Test
LambdaTest
35 36
Benefícios do design responsivo 2015: Mobilegeddon
Base de visitas [Link]
Quanto mais compatível, mais acessível
SEO
Google considera fortemente o item
“mobile-friendly” para ranquear um
site em sua busca
Panuwat phimpha/ Shutterstock
37 38
Evite o scroll longo
Princípios do design responsivo
Comandos
sempre
acessíveis
[Link]
[Link]-j / Adobe Stock
39 40
Mantenha as barras de navegação com
Trabalhe com espaço e clareza
fontes claras,
alto contraste
Dê espaço
para os olhos
... e para os
dedos
Alexdndz /Shutterstock
NOINDEX/ Shutterstock
41 42
Use barras de navegação familiares
Abdul Qaiyoom/Adobe Stock
43