Depois de ler alguns artigos sobre Wireframe, e ver que realmente isso é importante no processo de criação de sites. Resolvi criar um post sobre isso.
Hoje é muito comum ver sites sendo desenvolvidos sem nenhum planejamento, pois ele precisa ser desenvolvido rapidamente e precisa estar no ar logo(entre outras coisas que os gerentes e clientes falam).
Muitas vezes, isso causa vários retrabalhos de código, seja em client-side(CSS, HTML, Javascript …) ou server-side(PHP, ASP.NET, JSP …), pois não ouve um planejamento de como fazer, ou do que o site realmente deveria ter.
Se pensarmos em um site como um projeto de automóvel, por exemplo, vamos ver que não adianta saber que o todo carro possue motor, rodas, freios, etc. Precisamos saber qual será o tamanho do carro, a disposição do motor, como será a disposição do painel(onde estão o radio, porta luvas, etc).
É nesse ponto que entra os desenhos do projeto para o automóvel. Nada sei da cabeça do projetista e vai direto para a linha de montagem.
Antes mesmo do carro conceito(como é chamado o protótipo), é feito um estudo para verificar a usabilidade dos controles do carro, como será o espaço interno, se a aerodinâmica ir prejudicar a estabilidade, entre outros fatores, que podem influenciar no sucesso ou no fracasso do produto.
A criação de um site, também segue(ou pelo menos deveria seguir) esse conceito, mas infelizmente, muitas empresas ainda não gastam um tempo do projeto para essa tarefa, e muitas vezes, pagam por não ter planejado e projetado uma interface(ou até mesmo os controles do site) mais intuitivos e dinâmica.
Para diminuir esse impacto de projeto, e até mesmo, de tempo e dinheiro gasto no desenvolvimento, o Wireframe é um excelente passo.
Basicamente, o Wireframe consiste em um “esboço” de como será o layout do site, dizendo onde os elementos serão posicionados , e descrevendo quais elementos serão utilizados(isso dependendo é claro, qual o nivel de detalhamento que o seu Wireframe terá), de acordo com o que, muito provavelmente, será o layout final.
Há também a possibilidade de uma pratica e rápida mudança antes do layout definitivo, evitando que muitos imprevistos aconteçam no decorrer do desenvolvimento, e ajudando ainda na analise de usabilidade de interface do site.
Alguns links interessantes sobre Wireframe estão listados abaixo:
http://usabilidoido.com.br/quanto_mais_simples_o_wireframe_melhor.html
http://webinsider.uol.com.br/index.php/2003/12/09/wireframe-documento-cada-vez-mais-importante/
Você deve esta se perguntando agora se há alguma ferramenta para “desenhar” os Wireframes?!?!
Bem, eu procurei várias ferramentas para isso, mas a que mais me agradou, e que mais me deu produtividade, foi o Inkscape.
Além de ser open source e multi-plataforma(Windows, Linux e MacOS), o inkscape tem uma interface muito fácil de usar.
Mas você pode testar outras ferramentas como o GIMP, PhotoShop, Flash(sim, já vi pessoas usando o Flash para desenhar wireframes), ou alguma ferramenta que você tenha mais habilidade para desenhar.
Grande abraço, e comentem 
Technorati Tags: wireframe, usabilidade, acessibilidade, web, desenvolvimento, firefox, open souce, inkscape
