Prototipagem para A Web

PROGRAMAÇÃO VISUAL NO-CODE
10786 - Prototipagem para a web

Prototipagem para a WEB
“A prototipagem acompanha o processo de Design do início ao fim. O

ato de prototipar pode surgir no decorrer que uma pesquisa, durante
um brainstorming, como meio de ilustrar um desenho ou como
elemento desbloqueador durante uma reunião. Ao início os protótipos
são em maior número e são eles que auxiliam a definir as
especificações do produto. Já no final do processo são as
especificações do produto que definem o protótipo.”
https://inngagedesign.wordpress.com/2015/03/31/prototype-to-learn/
Protótipo: o que é?
• Modelo desenvolvido para testar ideias de design

• Examinar conteúdo, estética e técnicas de
interação nas perspetivas dos designers, clientes e
utilizadores
• Produto unitário usado para testes feitos antes da
fabricação em grande escala
Grau de fidelidade dos protótipos
➢ Baixa Fidelidade ➢ Alta Fidelidade

➢ Baixa Fidelidade
Um protótipo de baixa fidelidade é bastante utilizado em fases iniciais e exploratórias de
um projeto para validar um conceito e decidir se uma ideia tem ou não valor funcional.
Devem ser rápidos, rudimentares e baratos.
Características de um protótipo de baixa fidelidade:
Baixo nível de detalhe;

Preferencialmente feito com papel e caneta;
Representa visualmente as funcionalidades;
Baixo custo;
Rapidez na prototipagem;
Descartável.
➢ Alta Fidelidade
Um protótipo de alta fidelidade deve-se aproximar ao máximo dos aspetos visuais e
funcionais do produto final, incluindo o conteúdo, fluxo de navegação e interações. São
muito utilizados para testes e validações, ou para vender uma ideia, pois ver o produto
“funcionando” costuma gerar deslumbramento.
Características de um protótipo de alta fidelidade:
Foco em aspetos visuais e funcionais da interface;

Permite navegação e interação similares à versão final
do produto;
São desenvolvidos com o auxílio de softwares para criação
de interfaces, como o Figma ou Adobe XD.
➢ Técnicas de prototipagem
• Mock-ups em papel
• Cenários
• Mapas de navegação
• Guiões
• Esquemas (Wireframes)
• Protótipos Abstratos Canónicos

➢ Mock-ups em papel
• No início do processo, o designer esboça e cria protótipos de papel,

normalmente compostos por desenhos a lápis, screenshots impressos, ou uma
combinação de ambos;
• Usando materiais low-tech, a equipa pode rapidamente construir um
protótipo de teste;
• O teste de usabilidade é imediato:
- usando as mãos como dispositivo apontador, os utilizadores podem
escolher opções de menus, clicar em botões e interagir com outros
elementos da UI (User Interface);
- como os protótipos de papel são fáceis de modificar, a equipa de teste
pode alterá-los mesmo durante o teste de usabilidade.
• Vantagens:
- excelente método para acabar com guerras filosóficas e outros “project-

killers”:
em vez de gastar tempo em argumentos subjetivos, a equipa pode focar-se em
atingir objetivos de usabilidade concretos e testar várias abordagens até
chegar a um resultado satisfatório
O look inacabado faz com que o cliente perceba que aquilo não é o
produto final!
Um protótipo de alta fidelidade criado, p.e., no Figma, vai dar a impressão
ao cliente que já está tudo pronto
• Desvantagens:
- não temos feedback sobre a aparência final do produto

- é necessário elaborar dados fictícios que estariam guardados
no sistema real
- não obtemos informação sobre tempos de resposta (página
levou muito tempo a carregar?)
➢ Cenários
• Levam a prototipagem ao extremo, reduzindo tanto o nível de

funcionalidades como o número de features;
• Podem ser muito baratos para desenhar e implementar, mas só

podem simular a IU desde que o utilizador siga um caminho
previamente definido.
➢ Cenários
Podem ser implementados como mock-ups em papel ou em

simples ambientes de prototipagem rápida, que podem ser mais
fáceis de aprender do que ambientes de programação avançados
➢ Mapas de Navegação
• Diagrama que especifica como os diferentes espaços de

interação estão interligados e como o utilizador pode fluir através da
UI no decurso das tarefas.
• Normalmente evoluem ao longo do ciclo de vida do projeto;

• São muito usados para definir a estrutura de informação em sítios
Web (área de Information Design);
• No início do processo, a estrutura da aplicação é vaga;
• Á medida que o processo avança, os mapas são revistos e
tornam-se mais detalhados.
➢ Guiões
• Um guião é uma representação de

uma sequência de interação
Particular;
• Refletem detalhe limitado sobre o
conteúdo de cada ecrã
- Apenas os elos de navegação
necessários ao desempenho de uma
tarefa são representados.
➢ Esquemas (Wireframes)
• Representações do conteúdo que deveria aparecer num determinado ecrã:

- Não têm imagens, apesar de poderem indicar com uma etiqueta textual
onde as imagens apareceriam, ou onde deveriam ser colocadas;
- não é suposto utilizarem cor, mas podem fazer uso da cor ou de escalas de
cinzentos para dar significado acerca de elementos na IU.
➢ Esquemas (Wireframes)
- São outro tipo de esquemas, mostram o tamanho e posição relativas dos

elementos visuais da IU;
- podem usar cor para representar importância relativa ou prioridades dos
tipos de elementos representados;
- muito populares entre os designers gráficos de páginas Web.
➢ Protótipos Abstratos Canónicos
• 3 tipos de componentes genéricos, abstratos e

extensíveis:
- Materiais: contentores, conteúdo, informação
• Resultados de procura, notificações ao utilizador
- Ferramentas: ações, mecanismos que operam sobre
os materiais
• Seletor de cor, botão de impressão, botão de ‘submit’
- Híbridos (ou materiais Ativos)
• Caixa de introdução de texto (mostra informação e
manipula-a!)
• Modelam a função interativa + posição, dimensão,
disposição e composição dos elementos da UI.
A prototipagem, na maioria das vezes, é de baixo custo, rápida e fácil.
São inúmeras as vantagens da prototipagem.
Pode-se economizar muito tempo e dinheiro testando protótipos de

produtos que ainda não foi desenvolvidos.
É muito mais fácil e barato criar protótipos, testá-los, corrigir, testá-los

novamente, do que desenvolver um produto durante 6 meses e só
depois testá-lo com os utilizadores reais.
www.balsamiq.com
www.balsamiq.com
https://balsamiq.com/
tutorials/#playlist
www.balsamiq.com
Pretende-se:
➢ Criar página principal, (IKEA

www.Ikea.com/pt):
➢ Criar várias páginas, com interligação,
aplicação à escolha;
➢ Mapa de navegação de um site.
www.balsamiq.com
Pretende-se:
➢ Crie um protótipo (por exemplo):

➢ evento;
➢ produto;
➢ serviço;
➢ …
➢ Crie várias páginas (máx 10), com interligação entre elas;
➢ Crie o respetivo mapa de navegação.

Prototipagem para A Web

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Prototipagem para A Web

Enviado por

Direitos autorais:

Formatos disponíveis

PROGRAMAÇÃO VISUAL NO-CODE

10786 - Prototipagem para a web

“A prototipagem acompanha o processo de Design do início ao fim. O

• Modelo desenvolvido para testar ideias de design

Grau de fidelidade dos protótipos

➢ Baixa Fidelidade ➢ Alta Fidelidade

Características de um protótipo de baixa fidelidade:

Baixo nível de detalhe;

Características de um protótipo de alta fidelidade:

Foco em aspetos visuais e funcionais da interface;

• Protótipos Abstratos Canónicos

• No início do processo, o designer esboça e cria protótipos de papel,

- excelente método para acabar com guerras filosóficas e outros “project-

- não temos feedback sobre a aparência final do produto

• Levam a prototipagem ao extremo, reduzindo tanto o nível de

• Podem ser muito baratos para desenhar e implementar, mas só

Podem ser implementados como mock-ups em papel ou em

• Diagrama que especifica como os diferentes espaços de

• Normalmente evoluem ao longo do ciclo de vida do projeto;

• Um guião é uma representação de

• Representações do conteúdo que deveria aparecer num determinado ecrã:

- São outro tipo de esquemas, mostram o tamanho e posição relativas dos

➢ Protótipos Abstratos Canónicos

• 3 tipos de componentes genéricos, abstratos e

A prototipagem, na maioria das vezes, é de baixo custo, rápida e fácil.

São inúmeras as vantagens da prototipagem.

Pode-se economizar muito tempo e dinheiro testando protótipos de

É muito mais fácil e barato criar protótipos, testá-los, corrigir, testá-los

➢ Criar página principal, (IKEA

➢ Crie um protótipo (por exemplo):

Você também pode gostar