Uma forma fácil de criar Wireframes

Modelo do blog Isso Mesmo

Todo mundo que trabalha com desenvolvimento conhece a importância do uso de wireframes, seja para aprovação do cliente ou para testes de usabilidade. Ele é literalmente um esqueleto do seu projeto e a idéia é que criar um destes dá menos trabalho do que criar uma “versão final” para cada um dos protótipos.

Quem desenha bem ou tem agilidade no mouse, não vê problemas em criá-los diretamente no Photoshop ou outro programa gráfico qualquer, o problema começa se você não tem tais habilidades. Um tempo atrás o Rodrigo Bressane citou no twitter um programa para facilitar a vida de quem precisa criar muitos destes: Balsamiq Mockups. Sendo membro da categoria de pessoas que não tem a menor destreza com o mouse, resolvi testá-lo.

O Balsamiq Mockups utiliza a plataforma Adobe Air, ou seja, roda em qualquer plataforma (Windows, Linux, Mac), porém não é um programa gratuito (apesar de ser possível conseguir uma licensa grátis em alguns casos), custa US$79 e vale cada centavo.

Um bom exemplo do uso que fiz dele é o blog “Doutor, me Explica?”, onde à partir do wireframe a Priscila (que trabalha comigo na Blue Box) conseguiu criar o layout final muito rapidamente.

Mas melhor que falar o que ele pode fazer, decidi mostrar um pouquinho. Este vídeo foi feito no dia que instalei o programa, em menos de 10 minutos criei uma réplica bem simples do Isso Mesmo sem nunca ter aberto o Balsamiq antes:

Além das funções básicas mostradas no vídeo, você ainda tem a disposição algumas bibliotecas de modelos como o Mockups To Go, ideais para trabalhar em cima de um formato pré-definido, como o twitter, YouTube, Google Maps, entre muitos outros.

Baseado na idéia do Balsamiq Mockups, em agosto deste ano um desenvolvedor chamado Enrico criou o Napkee. Este programa, que também usa a plataforma Adobe Air, permite exportar seu modelo do Balsamiq para páginas completas em HTML/CSS/JS e Adobe Flex 3. Muito útil para que desenvolve para web e quer algo rápido e simples publicado o quanto antes. Ele também não é gratuito, mas pode ser comprado à partir de US$49 (ou novamente você pode conseguir uma licensa grátis caso se enquadre) ou testado de forma completa por 15 dias. Ainda não testei, mas pretendo fazer o quanto antes.

Esboçar coisas no papel realmente não é minha praia. E você, como desenvolve wireframes?



Pedro Villalobos - 05/10/09


3 Comentários

  1. Dri Viaro disse:

    Oi, passei pra conhecer seu blog, e desejar boa semana.

    bjss

    aguardo sua visita :)

  2. gustavo disse:

    pow vem zp gratis !!!

  3. Baltazar disse:

    Boa noite , gostaria de saber pq vcs não istalaram a net, vcs me ligaram diversas vezes, quando resolvi que queria o seu serviço
    Vieram 3 tecnicos e dizeram que nao poderia cruzar fios , onde a 2 postes em frente a casa , onde gastariam no maximo 10 metros de fios , na istalação . Gostaria de uma resposta concreta se vcs vão istala ou não, pois tenho dificuldade em cancelar os meus compromissos , para aguardar os tecnico, que chegam e dizem que nao da para fazer a instalação,
    Aguardo contatos

    Obrigado

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *