Sketching

Sketching é uma das primeiras etapas do processo de arquitetura de

informação, e pode ser chamada de esboço ou rascunho do projeto em questão, pois
é um processo em que se discute ideias.

As ideias básicas são esboçadas/rascunhadas de maneira geral, dependendo

do contexto do projeto, vai esboçar as diversas telas principais do projeto de maneira
rápida e eficiente. Concluindo esse primeiro processo, os esboços dos conceitos
criados são apresentados para os stakeholders envolvidos no projeto.

O processo de sketching deve ser algo dinâmico e eficiente, que não consuma
mais tempo que o necessário, e que alinhe o grupo todo sobre o que será
desenvolvido.

O Sketching requer um conhecimento básico de desenho, caso seja feito a mão

livre. Existem ferramentas vendidas para auxiliar o processo de sketching UI como as
réguas da UIstencils feitas especialmente para o sketching de interfaces.

Régua para sketching de interfaces UIstencils

O Sketch feito para dispositivos mobile é ainda mais funcional, pois trata-se de
telas mais simples. O sketch ajuda a encontrar falhas, e quanto antes elas forem
percebidas menor o custo para o projeto, menor o custo para o desenvolvimento de
protótipos, layout e do próprio código.
 Exemplo de sketching de interface

Prototyping
Protótipos, em linhas gerais, podem ser entendidos como modelos funcionais
construídos a partir de especificações preliminares para simular a aparência e a
funcionalidade de um software a ser desenvolvido, ainda que de forma incompleta.
Por meio de um protótipo, os futuros usuários, bem como aqueles que irão
desenvolvê-lo, poderão interagir, avaliar, alterar e aprovar as características mais
marcantes da interface e das funcionalidades da aplicação. Um protótipo pode ser
qualquer coisa, desde desenhos em papel (baixa fidelidade) até algo que permita a
interação com algumas funcionalidades do projeto final (alta fidelidade).

Protótipos de baixa fidelidade

Geralmente são baseados em papel e não permitem interações do usuário,

variam de desenhos à mão para impressões. Em teoria, os esboços de baixa
fidelidade são mais rápidos de criar. Os protótipos de baixa fidelidade são úteis para
permitir a visualização antecipada de soluções alternativas de projeto, o que ajuda a
estimular a inovação e a melhoria. Uma vantagem adicional é que, ao usar esboços,
os usuários podem se sentir mais à vontade sugerindo alterações.

 São mais focados nas ideias amplas e fundamentais do design, como: conteúdo,
forma e estrutura, principais requisitos de funcionalidade e estrutura de navegação;
 Capturam facilmente as propostas iniciais do design e devem auxiliar, não
atrapalhando o processo de gerar e avaliar muitas soluções de design possíveis.

Protótipos de alta fidelidade

Os protótipos de alta fidelidade são representações parecidas com a interface

final. Essa semelhança ocorre devido a utilização de ferramentas que oferecem
componentes de interface com aparência e comportamento similar ao projeto
imaginado.

Os protótipos de alta fidelidade são considerados muito mais eficazes na coleta

de dados de desempenho humano real (por exemplo, tempo para concluir uma tarefa)
e na demonstração de produtos reais para clientes, gerenciamento e outros.

 Útil para avaliações detalhadas dos principais elementos do design

(conteúdo, aspectos visuais, interatividade, funcionalidade e mídia). Um exemplo é
quando são utilizados em estudos de usabilidade para estabelecer a curva de
aprendizagem

 Papel importante na aceitação pelo cliente – é uma espécie de documento

final de design com o qual o cliente precisa concordar antes da programação final.

Paper Prototyping

A prototipagem em papel é uma técnica muito utilizada no meio de projetos de

interfaces devido à sua simplicidade, sendo a maneira mais rápida para obter
feedback sobre arquitetura, design e conteúdo do protótipo. Ela consiste em esboçar
telas e objetos de interação (de acordo com o projeto de interação proposto) em
papéis. Por serem desenhos, se tornam fáceis e rápidos de serem feitos, possuindo
um custo baixíssimo. É mais rápido comunicar e validar alterações de projeto no papel
do que em designs de alta fidelidade, é perfeita para a conceituação em estágio inicial.
 Existe dois tipos de protótipos de papel, um de baixa fidelidade, utilizando
simples esboços, e o de alta fidelidade que possui esboços detalhados, forma de
botões, cores, imagens, entre outros, usados para mostrar o projeto para o usuário e
cliente.

protótipo de papel de baixa fidelidade x alta fidelidade

Wireframe

Wireframe é o esqueleto/esquema, uma versão bastante primitiva do visual de

um projeto. Ele consiste na representação da diagramação e das estruturas da
interface, ou seja, por meio de formas geométricas e linhas como imagina-se a divisão
da interface em seções, que deve ser feito antes de iniciar a definição do layout com
cores e imagens.

Modelo de wireframe

MOCKUP

Um mockup é uma representação de média a alta fidelidade de um design, um

rascunho bem próximo do design final do produto, ou até o próprio design visual do
produto final.
 O uso mais comum de mockups no desenvolvimento de software é a criação
de interfaces de usuário que mostram ao usuário final que o software será parecido
com as interfaces criadas, sem ter que construir o software em si ou a funcionalidade
subjacente.

Exemplo de Mockup de site

Benefícios do sketching e prototyping

 Valide as suposições
 Descubra problemas cedo
 Ter ideias
 Projetar mais iterações
 Realize testes iniciais de usabilidade
 Mais barato e mais rápido para implementar
 Encurtar o ciclo de feedback
 Descartável
 Explore alternativas
 Ajuda a comunicação entre a equipe