Início » O que é Wireframe?
Você sabe o que é um wireframe? Nesta imagem, um homem desenha o esqueleto de um site.

O que é Wireframe?

Você já ouviu falar que “planejamento é tudo”? Pois é, antes de começar um projeto, é essencial investir tempo em planejar e é por isso que você precisa saber o que é wireframe de um site, aplicativo, fluxo de e-mails etc.

O wireframe é uma forma visual de planejar a diagramação de uma página, a fim de antever possíveis dificuldades e garantir a perfeita experiência para o usuário. De posse do wireframe, é possível visualizar mais facilmente a jornada do consumidor em sua página.

O que é wireframe de um site ou aplicativo?

A definição que mais gosto é a de “esqueleto do site”. De forma simples, o wireframe pode ser desenhando para auxiliar a entender como será o posicionamento de cada elemento e visualizar o fluxo de leitura de uma página. O mesmo funciona para um aplicativo ao desenhar cada tela,

Com formas básicas, é possível definir como o site será diagramado. Antes de propriamente um designer começar a trabalhar no visual do site, o wireframe é uma ferramenta que vai ajudar a entender o produto final antes mesmo da sua finalização sendo um rascunho visual do projeto.

Diversas telas de celulares com wireframes desenhados, mostrando etapas da criação de um aplicativo.

Entregando a melhor experiência aos usuários (UX)

Na fase de planejamento, podemos fazer e desfazer até chegarmos no que consideramos a melhor opção. Neste momento, devemos ter em mente que, uma página não deve ser apenas visualmente agradável mas também deve ser funcional.

O conceito de UX (Experiência do Usuário – User Experience em inglês) deve estar no centro das decisões quando se está planejando: lembre-se que o seu site/aplicativo está sendo desenvolvido para solucionar um problema para os usuários e durante a concepção, montar o wireframe de cada etapa vai ajudar a entregar a experiência perfeita.

Ferramentas para criar wireframes

Tempo é dinheiro e cada vez mais temos ferramentas desenvolvidas para nos poupar tempo. Foi pensando nisso que algumas ferramentas foram desenvolvidas para ajudar na criação de wireframes.

Se você é “old school”, provavelmente vai preferir montar seu rascunho da forma tradicional, usando papel e caneta. Um designer talvez vá preferir montar tudo no Illustrator… Agora se prefere um software específico, aqui vão algumas opções:

  • Adobe XD: da gigante Adobe, é provavelmente a ferramenta mais complexa e cheia de opções. Você pode utilizar a versão grátis para 1 projeto.
  • Wireframe.cc: uma ferramenta simples, gratuita e fácil de usar.
  • Miro.com: uma espécie de quadro branco colaborativo, onde diversos usuários podem acessar o mesmo conteúdo – pode ser usada para muito mais do que wireframes.

Por Lucas Riccieri

Trabalho com marketing há mais de 10 anos focado no desenvolvimento de marcas. Instagram|LinkedIn