aula7_etapa_prototipacao pptx

Prévia do material em texto

arara.school
Design Centrado na Usuária
Aula 7 - Etapa de Prototipação
Yago Henrique
arara.school
Aula 7 - Etapa de Prototipação
01 Descrição da etapa
02 Treinamentos
03 Uso de material instrucional
04 Personalização
05 Recapitulando
arara.school
01 - Descrição da etapa
Prototipagem
arara.school
A prototipação nada mais é do que o 
processo de prototipagem, é a atividade de 
criação de protótipos de produtos e 
serviços, ou seja, versões incompletas de 
um item (no caso dos produtos) ou de uma 
atividade (no caso dos serviços) que estão 
sendo desenvolvidos.
Este quarto passo serve para dar um 
primeiro corpo ao processo de ideação, 
fazendo com que a partir do versionamento 
destes protótipos seja possível chegar a um 
resultado final mais refinado e completo, 
que realmente atende as necessidades, 
anseios e desejos de quem irá usufruir no 
final do processo. 
https://unsplash.com/photos/LyF5jsdcYW0
arara.school
3
Tre
ina
me
nto
s e
 in
clu
sã
o
Pr
oc
es
so
 de
 ap
ree
ns
ão
 da
 
rec
urs
ivi
da
de
 da
 pl
ata
for
ma
, a
lém
 da
 
ex
plo
raç
ão
 do
 qu
e e
ra 
viá
ve
l e
m 
UI 
 
do
 co
nte
úd
o d
ev
eri
a s
er 
ind
ex
ad
o.
1
Wo
rd
Pr
es
s
Pla
taf
orm
a o
nd
e j
á e
sta
va
 
ho
sp
ed
ad
o o
 si
te 
da
 BC
, b
as
e p
ara
 o 
pro
ce
ss
o d
e t
rab
alh
o e
 m
an
ute
nç
ão
 
po
r p
art
e d
as
 se
rvi
do
ras
.
Adaptado do livro Designing Bots por Amir Shevat.
2
Fig
ma
 
As
 et
ap
as
 de
 ex
plo
raç
ão
, d
efi
niç
ão
 e 
ide
aç
ão
 fo
ram
 fe
ita
s n
a p
lat
afo
rm
a, 
faz
en
do
 co
m 
qu
e o
 ve
rsi
on
am
en
to 
da
 ar
qu
ite
tur
a f
os
se
 us
ad
o.
4
Ma
ter
ial
 in
str
uc
ion
al
Te
nd
o e
m 
vis
ta 
o p
lan
o d
e t
rab
alh
o 
um
 do
s p
on
tos
 er
a a
 el
ab
ora
çã
o d
o 
ma
ter
ial
 in
str
uc
ion
al,
 o 
qu
e t
am
bé
m 
en
tra
 no
 pr
otó
tip
o.
Elementos da prototipação do contexto do site da BC
arara.school
02 - Treinamentos
Nem tudo está pronto e a adaptação é necessária.
arara.schoolarara.school
Processo de Aprendizado Iterativo
Links externos:
Primeiro;
Segundo;
Terceiro;
Quarto.
https://codex.wordpress.org/P%C3%A1gina_Inicial
https://blossomthemes.com/wordpress-themes/blossom-spa/
https://docs.blossomthemes.com/blossom-spa/
https://www.youtube.com/watch?v=JPR4OK4c35Q&list=PLHz_AreHm4dmDP_RWdiKekjTEmCuq_MW2&ab_channel=CursoemV%C3%ADdeo
arara.school
Primeiro houve um processo de preparação antes 
de iniciar o trabalho mais técnico. 🔨
Um adendo: Botsociety… ⏳
Conheça as 
alternativas a 
plataforma da 
Botsociety. 🤖
https://www.g2.com/products/botsociety/competitors/alternatives
https://www.g2.com/products/botsociety/competitors/alternatives
https://www.g2.com/products/botsociety/competitors/alternatives
https://www.g2.com/products/botsociety/competitors/alternatives
arara.school
03 - Uso de material 
instrucional
Processo de comparação constante.
Manual de Identidade Visual do SB/UFMG 📗
https://www.bu.ufmg.br/bu_atual/wp-content/uploads/2018/02/manual-de-identidade-visual_para-site-bu.pdf
https://www.ufmg.br/marca/#:~:text=A%20aplica%C3%A7%C3%A3o%20prim%C3%A1ria%20do%20logotipo,as%20cores%20vermelho%20e%20preto.&text=Quando%20a%20aplica%C3%A7%C3%A3o%20prim%C3%A1ria%20n%C3%A3o,aplica%C3%A7%C3%A3o%20principal%2C%20tamb%C3%A9m%20%C3%A9%20poss%C3%ADvel.
arara.school
Nem tudo o que foi mapeado na V1 da AI do site foi 
possível de ser aplicado no template escolhido. 
❌
Limitações técnicas. ❎
arara.school
A título de explicação, vamos falar do Design Atômico ⚛
Fonte: “Atomic Design: redesenhando os 
entregáveis de designers e desenvolvedores”
● Átomos são os elementos mínimos 
presentes em uma página.
● Moléculas são a junção desses elementos 
em um padrão de interação que faça 
sentido para a pessoa que está usando.
● Organismos são os agrupamentos dessas 
moléculas em elementos que norteiam a 
navegação e a leitura do conteúdo nessa 
interface.
https://brasil.uxdesign.cc/atomic-design-redesenhando-os-entreg%C3%A1veis-de-designers-e-desenvolvedores-da8886c7258d
https://brasil.uxdesign.cc/atomic-design-redesenhando-os-entreg%C3%A1veis-de-designers-e-desenvolvedores-da8886c7258d
https://brasil.uxdesign.cc/atomic-design-redesenhando-os-entreg%C3%A1veis-de-designers-e-desenvolvedores-da8886c7258d
Limites de botões 🤳
Limites de estilização 🎨
Limites de padronização iconográfica 📸
Limites do ToolKit da Interface gráfica do utilizador (GUI) e linkagem 🔗
arara.school
Documentação sobre Acessibilidade do WordPress ♿
https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/
arara.schoolarara.school
Customização através de linguagens utilizadas no front-end
HTML 🎯
“HTML é uma linguagem de marcação 
utilizada na construção de páginas na 
Web. Documentos HTML podem ser 
interpretados por navegadores. A 
tecnologia é fruto da junção entre os 
padrões HyTime e SGML. HyTime é um 
padrão para a representação 
estruturada de hipermídia e conteúdo 
baseado em tempo.”
CSS 🎨
“Cascading Style Sheets é um 
mecanismo para adicionar estilo a um 
documento web. O código CSS pode 
ser aplicado diretamente nas tags ou 
ficar contido dentro das tags <style>. 
Também é possível, em vez de colocar 
a formatação dentro do documento, 
criar um link para um arquivo CSS que 
contém os estilos.”
arara.school
04 - Personalização
Texto, conteúdo, forma e Design Conversacional
Processo de personalização 🔂
Mas onde se encaixa o Design Conversacional ❓
Granularidade da Informação, 
rótulos, conteúdo pré 
Call-To-Action e DS:
● “Clique aqui” ou “Saiba mais”;
● “Acessar Catálogo” ou “Efetuar 
compra”;
● “Adquirir meu livro” ou “Vamos 
lá”.
https://brasil.uxdesign.cc/atributos-da-informa%C3%A7%C3%A3o-pontos-de-vista-em-ux-writing-211fd38584a9
arara.school
05 - Recapitulando
O que vimos nesta sétima aula?
arara.school
Recapitulando…
arara.school
Até a próxima aula!
arara.schoolarara.school