Aula4

Prévia do material em texto

WBA1423_v1.0
Princípios de design e 
prototipação em 
sistemas digitais
Prototipação Web e Mobile
Prototipação
Bloco 1 
Cleber Correia
Vamos refletir?
Você já se questionou sobre como um 
projeto web ou mobile toma forma, e qual 
é uma etapa essencial para isso?
Prototipação
O que é Prototipação?
Para a área do design a prototipação é uma etapa de 
criação e desenvolvimento de projeto, sendo uma 
ferramenta de avaliação de produto ou serviço em 
construção e uma etapa que é usada pelo designer para 
verificar o andamento do projeto de produto. Nesta 
disciplina são envolvidos produtos ou serviços web ou 
mobile, tendo o entendimento de como está o andamento 
do projeto, como base a evolução deste e seu andamento 
para testes e verificação de etapas para o projeto de 
design. 
Tipos de Protótipos
• PROTÓTIPO BAIXA FIDELIDADE - é um protótipo 
intermediário com uma estrutura do esqueleto ou 
grade do projeto navegável para ser testado e 
entendido pelo cliente e o designer. 
 
 
 
Tipos de Protótipos
• PROTÓTIPO MÉDIA FIDELIDADE - é um protótipo 
intermediário com uma estrutura do esqueleto 
ou grade do projeto navegável para ser testado e 
entendido pelo cliente e o designer. 
 
Tipos de Protótipos
• PROTÓTIPO ALTA FIDELIDADE - é o protótipo mais
próximo da versão final do produto, sendo já possível
testar o projeto em um nível de fidelidade próximo ao
seu uso de interface e sistema final já para ser usado
pelo usuário final. 
Prototipação Web e Mobile
Projetos Web e Mobile
Bloco 2
Cleber Correia
O que é projeto Web?
O que é projeto Web?
Projeto web são produtos ou serviços digitais que 
podem ser usados na internet (web).
Fonte: https://bit.ly/3WZLJYr.
Responsividade de Sites
O que é projeto Mobile?
O que é projeto Mobile?
Projeto mobile é um tipo de projeto voltado para 
ser como aplicativos
Fonte: https://bit.ly/451yJ6m.
Interface de aplicativos
Etapas de Projeto Web
Etapas de projetos 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 AI (Arquitetura da Informação).
• Criação e desenvolvimento dos 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. 
Etapas de Projeto Web
Etapas de projetos 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.
Diferença entre Projeto Web e Mobile
Diferença entre Projeto Web e Mobile
A grande diferença entre esses dois tipos de projetos está 
focado no uso de banco de dados por sites, e nos 
projetos mobile é a padronização nos sistemas 
operacionais dos smartphones (Android e IOS).
• Banco de Dados.
• SO.
Prototipação Web e Mobile
Arquitetura da Informação
Bloco 3 
Cleber Correia
Arquitetura da Informação
O que é Arquitetura da Informação?
A arquitetura da informação é a primeira etapa de 
avaliação para os projetos web e mobile, que se descreve
como um diagrama de navegação e conteúdo do projeto, 
voltado para análise criativa do projeto passando por um 
pensamento abstrato para um pensamento concreto, 
quando definidas as ideias de formas de funcionamento e 
uso do produto ou serviço digital. 
Arquitetura da Informação
Etapas de Projetos de Arquitetura da Informação:
• Organização das ideias.
• Organizar os termos.
• Definir os termos.
• Montar a ligação entre os termos.
• Criar o organograma.
Arquitetura da Informação
Modelos de Diagrama de Arquitetura da Informação:
Diagrama Vertical Diagrama Horizontal
Fonte: Elaborado pela autor.
Arquitetura da Informação
O que é Jornada do Usuário?
A jornada do usuário é uma segunda avaliação das etapas
e formas de como o usuário pode cumprir tarefas ou
rotinas dentro de sites, apps e sistemas. A forma de 
construção dessas atividades é criada e estudada pela 
equipe de designers do projeto, que tem como foco a 
construção, porém nessa etapa é a evolução do usuário
pela atividade indicada pelo programa. 
Arquitetura da Informação
Etapas de Jornada do Usuário:
Primeiro definir a persona do usuário.
Definir a atividade a ser estudada.
Atribuir as demandas e necessidades.
Verificar as formas de como vai ocorrer a atividade.
Formas de pesquisa, análise e controle da atividade.
Estudo e validação de resultado. 
Prototipação Web e Mobile
Teoria em prática
Bloco 4
Cleber Correia
Bons estudos!
Agora vamos pensar como um designer para 
projetar um site portfólio, sendo o cliente o 
próprio aluno. A situação-problema é pensar em 
como criar um site.
Reflita sobre a seguinte situação
Bons estudos!
Criar um projeto de site portfólio focado na 
metodologia web, integrando arquitetura da 
informação, wireframe, layout etc. Assim o aluno 
será capaz de criar e desenvolver o projeto do 
design de um site com ferramentas de design front-
end (Muse e Photoshop).
Norte para a resolução
Bons estudos!
Itens para pensar:
• Domínio.
• Hospedagem
• Tema.
• Arquitetura da Informação.
• Wireframe.
• Layout.
Norte para a resolução
Bons estudos!
Norte para a resolução
Etapas de Projeto:
• Pesquisa e escolha do servidor de hospedagem – é 
estudado os benefícios do fornecedor de hospedagem. 
• Compra do plano de hospedagem integrado com contas 
de e-mails – pagamento e verificação do pacote adquirido.
• Pesquisa e construção do diagrama de AI (Arquitetura da 
Informação) – essa etapa é o desenvolvimento do 
diagrama.
• Criação e desenvolvimento dos wireframe do site – nessa 
etapa é focada na diagramação de conteúdo do projeto.
• Criação e adaptação do wireframe e layout do site – 
integração entre conteúdo e interface.
Bons estudos!
Norte para a resolução
Etapas de Projeto:
Verificação de tecnologia ou banco de dados – essa 
etapa é descrita como um perfil do projeto do site 
que descreve como uma especificação.
Teste de Usabilidade e Navegabilidade do Site – 
essa etapa é testagem do projeto e análise de 
funcionamento do projeto.
Publicação do Site – é a última etapa de produção 
de site para poder ser publicado na internet, sendo 
colocado para funcionamento. 
Prototipação Web e Mobile
Consolidando o aprendizado
Bloco 5
Cleber Correia
Consolidando o aprendizado
• Prototipação.
• Arquitetura da Informação.
• Jornada do Usuário.
• Projeto Web.
• Projeto Mobile.
Quiz
A B
C D
Quais são os tipos de protótipos possíveis para serem usados 
em projetos web e mobile?
Baixa, média e alta fidelidade. Pré-protótipo, protótipo e pós-
protótipo. 
Pequeno, médio e grande 
fidelidade.
Encurtado, mediano e ampla 
fidelidade.
Quiz
A B
C D
Quais são os tipos de protótipos possíveis para serem usados 
em projetos web e mobile?
Baixa, média e alta fidelidade. Pré-protótipo, protótipo e pós-
protótipo. 
Pequeno, médio e grande 
fidelidade.
Encurtado, mediano e ampla 
fidelidade.
Quiz – Resolução
A) Baixa, média e alta fidelidade.
Os tipos de protótipos são baixa, média e alta 
fidelidade que compreendem os modelos de 
evolução para um projeto de design.
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 
autodesenvolvimentodeva 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 ter mais conhecimento sobre o design de 
aplicativos leia o capítulo 2 - Princípios do design e suas 
aplicações no design de aplicativo.
Referência:
CARDOSO, Leandro da Conceição. Design de Aplicativos. Curitiba: 
Intersaberes, 2022.
Indicação de leitura 2
Este livro oferece uma abordagem interdisciplinar, 
prática e orientada a processo, não apenas mostrando 
os princípios, mas principalmente como eles podem 
ser aplicados ao design de interação. As autoras, 
reconhecidas líderes e educadoras em suas áreas, 
ampliam o escopo nesta nova edição, incluindo as 
mais recentes tecnologias e dispositivos, como redes 
sociais, Web 2.0 e dispositivos móveis.
Referência:
ROGERS, Yvonne; SHARP, Helen; PREECE, Jennifer. Design de 
Interação: Além da Interação Humano-Computador. 3. ed. São 
Paulo-SP: Bookman, 2013.
Referências
GRANT, Will. UX Design: Guia Definitivo com as Melhores Práticas
de UX. Editora NOVATEC, 2019.
KRUG, Steve. Não me faça pensar. 1. ed. Rio de Janeiro-RJ: Alta 
Books, 2014.
NORMAN, Donald A. Design emocional: Por que adoramos (ou
detestamos) os objetos do dia a dia. Rio de Janeiro-RJ: Rocco, 2008.
REIS, Guilherme; Fundamentos de UX - Volume 1: Conceitos e boas 
práticas. 2021.
ROGERS, Yvonne; SHARP, Helen; PREECE, Jennifer. Design de 
Interação: Além da Interação Humano-Computador. 3. ed. São 
Paulo-SP: Bookman, 2013.
TEXEIRA, Fabricio. Introdução e boas práticas em ux design. Editora
Casa do Código: 2014.
Bons estudos!
	Princípios de design e prototipação em sistemas digitais
	Prototipação Web e Mobile
	Número do slide 3
	Prototipação
	Tipos de Protótipos 
	Tipos de Protótipos 
	Tipos de Protótipos 
	Prototipação Web e Mobile
	O que é projeto Web?
	O que é projeto Mobile?
	Etapas de Projeto Web
	Etapas de Projeto Web
	Diferença entre Projeto Web e Mobile
	Prototipação Web e Mobile 
	Arquitetura da Informação
	Arquitetura da Informação
	Arquitetura da Informação
	Arquitetura da Informação
	Arquitetura da Informação
	Prototipação Web e Mobile
	�
	�
	�
	Norte para a resolução�
	Norte para a resolução�
	Prototipação Web e Mobile
	Número do slide 27
	Número do slide 28
	Número do slide 29
	Número do slide 30
	Número do slide 31
	Indicação de leitura 1
	Indicação de leitura 2
	Número do slide 34
	Bons estudos!