Diferenças entre Sketch, Wireframe, Mockup e Protótipo

A intenção deste artigo é responder as seguintes perguntas:

  • O que é um Sketch?
  • Em que se diferencia de uma estrutura de Wireframe?
  • Qual aplicação permite projetar um Mockup?
  • Até onde vai o desenvolvimento de um protótipo?

Essas perguntas que surgiram no curso de Multimídia - Hipermídia da Universidade da USP.

Somos encorajados a escrever este breve artigo, porque acreditamos que o conhecimento é fortalecido quando aplicado, compartilhado com outras pessoas.

Além disso, a escrita contribui para a gestão do conhecimento em rede, pois acreditamos que a sala de aula estende seus limites além de um campus universitário e precisa se beneficiar de outros cenários para expandir suas estratégias e objetivos de aprendizagem.

Então vamos.
 

O que é um sketch?


Vamos pensar no sketch como o primeiro esboço que é feito sobre o projeto digital que queremos fazer. São aquelas pinceladas (primeiras pinceladas) em uma folha de papel, uma tábua ou – mesmo – em um guardanapo.
 
O sketch reflete as ideias gerais sobre o projeto. Algumas perguntas norteadoras:

  • Que áreas de conteúdo e serviços queremos apresentar no projeto?
  • Onde será a área de navegação?
  • Onde serão carregados os sistemas de ajuda para os usuários?
  • Os serviços de redes sociais serão acrescentados?

O sketch não tem um trabalho conceitual muito extenso. Aqui, a criatividade, a experiência e o desejo do designer têm primazia.

Normalmente começamos os desenhos com um sketch assim: pegamos uma folha de papel, um lápis e um rascunho e desenhamos linhas, números, ideias e expectativas sobre o que queremos desenvolver. Talvez o produto final não pareça o mesmo, mas é um primeiro passo.

Agora, como se deve demostrar o que se escreve, abaixo segue a imagem de um sketch de um funil de e-mail marketing:

Sketch

 

O que é uma estrutura de wireframe?


O próximo passo na concepção de um projeto digital (pelo menos a partir de seu componente gráfico e arquitetura da informação) é a criação da estrutura de wireframe.

Para entender o conceito, vamos pensar em uma representação básica (em escala de cinza) do projeto, onde eles são definidos com mais precisão:

  • Zonas de conteúdo
  • Uso de elementos HTML (marcação semântica)
  • Navegação e serviços de ajuda
  • Fluxos de navegação (como as unidades de informação estão conectadas).

Atenção: Os Wireframes não possuem elementos gráficos, ou seja: não são especificados tipografia, cores ou quaisquer outros elementos que se relacionem com o tema. Em outras palavras, eles não oferecem nenhuma abordagem para uma folha de estilo em cascata ou iconografia.

O wireframe é o "primeiro passo sério" na concepção do projeto digital. Aqui é necessário ter conhecimento sobre os serviços, conteúdo e público-alvo.

estrutura de wireframe

O que é um mockup?


O mockup é uma representação mais avançada do design gráfico e comunicativo (do ponto de vista da navegação e da Inteligência Artificial) do projeto. Aqui os elementos são integrados com mais detalhes, pois visualiza uma aproximação de:

  • Conteúdo (pode ser textos fictícios).
  • Paleta de cores, tomando como referência a instituição, a missão e o público alvo do projeto.
  • Declarações do CSS
  • Dimensões das áreas de conteúdo e serviços
  • Iconografia

Deve-se notar que o mockup inclui os elementos do sketch e da estrutura de wireframe. Cada um deles é uma evolução do anterior.

Um exemplo:

mockup
 

O que é um protótipo?


Finalmente, o protótipo é uma representação de alto detalhe de um projeto digital. Nele você pode identificar e operar:

  • Sistemas de navegação
  • Paleta de cores aplicadas
  • Iconografia
  • Aplicação das declarações do CSS
  • Experiência do usuário
  • Serviços de ajuda, busca, interação, entre outros

Este produto é o passo anterior ao desenvolvimento e apresentação final do projeto. O protótipo é utilizado para identificar, a partir de testes de usuários (beta-tester), as dificuldades do projeto.
 

Revisão de Balsamiq


No vídeo a seguir, apresento a ferramenta Balsamiq, um editor on-line e desktop que permite projetar mockups em pouco tempo, graças a seus múltiplos elementos pré-desenhados.

Balsamiq tem um custo que varia de acordo com o número de projetos e a duração da licença. O custo mais baixo começa em U$$ 9.00 por mês.

Entretanto, há a possibilidade de usar o editor por 30 dias. Você só precisa criar uma conta, seja com uma conta de e-mail ou associando a ferramenta ao seu perfil no Google.
 
 

Conclusão


Fazer um projeto digital de alta qualidade requer dedicação, tempo, planejamento, pesquisa e clareza, conceitos que – para ser honesto – às vezes são escassos nas organizações, porque nossos chefes sempre exigem o trabalho "para ontem".

O ideal é realizar cada etapa do processo de projeto, para que haja maior clareza no que se deseja, os reprocessos serão evitados e a gestão do conhecimento será feita otimizando os tempos de produção de projetos futuros.

Esperamos que este artigo tenha sido de interesse para todos. Lembre-se de compartilhá-lo em suas redes sociais, com seus amigos e familiares.

Obrigado pela leitura. Abaixo você tem a oportunidade de compartilhar seus comentários sobre o post.

Se você tiver alguma dúvida ou sugestão, convidamos a deixá-las na caixa de comentários. Além disso, se houver um tópico de interesse que não esteja escrito neste blog, nos fale abaixo.