# Wireframes para web: guia completo de desenvolvimento

> Wireframe web: guia completo para prototipação profissional. Ferramentas, técnicas e boas práticas para esboçar interfaces antes do design. Prototipe!

URL: https://dpw.dev/ui-ux/wireframe-web-guia-completo/  
Publicado em: 2011-11-22  
Categoria: ui-ux  
Tags: layout, usabilidade  
Autor: Tárcio Zemel

**Wireframes** são uma das partes mais importantes de um projeto web, portanto, **desenvolver wireframes para web sites** é uma etapa que, mesmo frequentemente negligenciada, abandonada, mesmo, não o deveria ser.

Neste artigo, veja mais sobre a importância desta etapa do projeto web e conheça algumas diretrizes importantíssimas para se preparar _wireframes_ de qualidade, que realmente façam a diferença na qualidade final e nível de profissionalismo e produtividade de seus _web projects_.

> Artigo baseado em [Ultimate Guide to Website Wireframing](http://sixrevisions.com/user-interface/website-wireframing/).

A maioria dos designers desenvolve wireframes para seus projetos, de uma forma ou de outra, mesmo que sejam apenas esboços rápidos na parte de trás de alguns papéis de rascunho. Wireframe é uma parte importante do processo de [desenvolvimento web](/), especialmente para projetos mais complexos.

## Por que fazer wireframes

**Wireframes realmente são úteis** quando você está se comunicando com clientes, pois lhes permite visualizar suas ideias mais facilmente do que quando você apenas as descreve verbalmente. Para casos em que o "cliente" é a próprio empresa em que se trabalha ou para quando se tratam de projetos pessoais, a afirmativa também é verdadeira.

Então, que esteja claro: desenvolver wireframes é realmente um passo **necessário** no processo de design! Mesmo se o site que se está projetando seja incrivelmente minimalista e simples, fazer o wireframe ajuda a esclarecer exatamente o que precisa ser feito nos diferentes tipos de página do projeto.

![Exemplo de um wireframe para uma página web](/images/blog/wireframe-web-guia-completo/wireframe-web-guia-completo-exemplo-wireframe.webp)

Ao dedicar tempo para criar, pelo menos, um wireframe simples, tenha certeza de que seu web design levará em conta todos os elementos das diferentes páginas que compõem o projeto e precisam ir para o design. Além disso, eles estarão posicionados na melhor localização a que o estudo destes elementos chegou.

Além disso, o processo de **produção de wire frames** é muito mais **simples**, **fácil** e **barato** de ser feito do que quando se "pula" essa etapa e se parte direto para o HTML/CSS: wireframes podem ser facilmente revistos, adaptados ou descartados.

## Wireframes x Modelos x Protótipos

Wireframe, modelo (_mockup_) e protótipo são frequentemente usados

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml