Quem trabalha na área de TI e não conhece a figura acima? Figurinha carimbada de cursos, palestras e qualquer coisa que envolva projetos e desenvolvimento, pois ela cai muito bem.
Mas o que eu quero comentar aqui é prototipagem e wireframes, uma técnica que ameniza muitos problemas ao longo do desenvolvimento, perde-se um tempo no início, mas evita retrabalho e dores de cabeça no futuro.
Quando você está trabalhando em um software para o usuário final, não importa se você está trabalhando em uma aplicação web, adicionando um recurso para um aplicativo existente, ou um plugin para algum outro aplicativo, você precisa fazer o design da interface do usuário em primeiro lugar.
A maioria dos programadores foram treinados por meio de cursos universitários a programar o código em primeiro lugar. Como consequência, aprendemos como implementar algoritmos eficientes para problemas comuns da ciência da computação, mas nunca aprendemos a desenhar uma boa interface.
Desenhar a interface é muito mais difícil que a codificação para os desenvolvedores, é tentador pular esta fase e ir direto ao código sem o real pensamento da forma como o usuário irá interagir com as características que você está construindo.
Lembre-se, para o usuário final, a interface é a aplicação. Não faz sentido pensar sobre isso antes de disparar o compilador?
Use os padrões de design visual. Se você está construindo uma aplicação gráfica, use uma paleta de elementos comuns a sua GUI. Se você está construindo uma aplicação web, use uma paleta de HTML, CSS, DOM e elementos de toda a web. Não deixe a paleta impor restrições a sua tecnologia.
É comum fazer prototipagem em papel, muito comum na verdade, mas ai caímos num problema...
Nem sempre conseguimos ter a verdadeira noção de como ficara a interface, e se precisarmos mudar um campo de local, riscamos ele?, apagamos com borracha? Além da documentação ser deixada para trás.
Utilize uma ferramenta visual, contanto que não seja uma ferramenta de desenvolvimento. Você não quer algo muito poderoso. O que você quer é a interatividade leve permanecendo simples e direto para rápidas mudanças. Esse é o próximo passo lógico a partir de protótipos de papel.
Existem diversas ferramentas disponíveis no mercado, deixarei alguns links no fim do post. A que estou utilizando e recomendo é o mockingbird, além de ser muito simples, ter bastantes opções ele ainda é free e web.
Algumas coisas que você deve levar em consideração ao escolher a ferramenta a ser utilizada no projeto.
- Tipo de software: Download / ferramenta baseada na web (se baixado é aceito por todo o sistema operacional da equipe).
- Biblioteca de símbolos: Gratuita, botões prontamente disponíveis, barras de rolagem, menus e outros objetos para desenhar.
- Wireframes interativas: Maquetes clicáveis que simulam a navegação entre páginas web.
- Colaboração em tempo real: Interação com os clientes e colaboradores para receber feedback ao vivo.
- Formatos de exportação: Os formatos suportados para exportar projetos.
- Limitações de contas: Restrições dentro de conta gratuita (se houver), como tempo de uso, número de protótipos, telas, que você pode criar, etc.
Abaixo então algumas ferramentas para wireframes e prototipagem.
- Gliffy
- Jumpchart
- Mockflow
- iPlotz
- Mocklinkr
- Pencil Project
- Lumzy
- Mockingbird
- FluidIA
- Balsamiq Mockups
