Por Design in a Box
Wireframes, no caso de web design, são desenhos simplificados que representam elementos de uma página web, interface, etc.
Você pode poupar um monte de tempo e trabalho criando wireframes bem simples antes de designs mais complexos. Outro fator importante é que você mantém seu cliente focado no que interessa, o layout, e não em detalhes como cores, tipos e outros elementos de design. Ou seja, é a maneira mais fácil e rápida de identificar as necessidades do seu cliente, poupando retrabalho.
Acima temos dois exemplos de wireframe. Se me perguntarem qual o melhor deles? Responderia: “O que explica mais com menos esforço”. Não importa se feito no computador ou num pedaço de guardanapo (por favor, não apresente guardanapos para seu cliente e fale que O Design in a Box que aconselhou), ele precisa dar o recado e NÃO dar trabalho para ser feito. O trabalho deve ser pensando como o usuário pode se beneficiar com isso, não criando wires bonitinhos.
Dois cenários. Qual o seu caso?
O primeiro cenário é o de grandes agências, onde temos a figura importantíssima do Arquiteto de Informação [Recomendo ler este artigo sobre Arquitetura de Informação no Wikipedia], que tem a missão de preparar de pensar na navegabilidade e experiência do usuário, e gerar um wireframe para que Diretores de Arte e designers possam ter um rumo na hora da criação.
Nesse caso, tenha em mente que você tem um parceiro valioso para fazer melhor seu trabalho e dai sim você poderá gastar um dia inteiro enfeitando aquele botãozinho lá no final do layout que ninguém vai dar importância, enquanto seu parceiro pensa na usabilidade toda da coisa.
O segundo caso é o de agências pequenas e de freelas que tem orçamentos mais modestos e que normalmente correm desesperadamente para finalizar o primeiro layout para mostrar serviço para o cliente. Este é o cara que vai depois reclamar que todo cliente não vale nada, que sempre muda tudo e que fez você varar a noite em claro a toa já que vai ter que refazer tudo.
Não se iluda, faça um wireframe antes. Veja referências, pesquise os concorrentes, veja o que eles tem de bom e de ruim. Informe-se sobre usabilidade e navegabilidade. Temos o Google ai para isso. Gaste um período criando seu wireframe e tenha menos dor de cabeça depois.
Wireframe maldito! wireframe maldito!
Para muitos designers, basta ouvir a palavra wireframe para torcer o nariz.
Muitos acham que o wire “amarra” o layout e que tira toda sua liberdade criativa.
Há caso em que de fato o layout precisa ser do jeito que deve ser.
Mas há vezes em que ele é um guia, mas temos uma certa liberdade de alterá-lo na hora de criar uma interface.
Converse com sua equipe e veja em qual caso você está trabalhando.
O pena vence a espada. As ferramentas mais poderosas.
Vou falar de novo uma palavra importante: rapidez. Para mim, não há ferramenta melhor do que um bom papel A4 e um lápis. É lápis, prefiro lápis que caneta.
No caso do seu cliente ser interno, por exemplo, um Diretor de Criação, ou até mesmo um atendimento, você pode e deve conversar sobre a possibilidade de apresentar as idéias no bom e velho papel e caneta. Isso pode sanar um monte de dúvidas. Uma frase importante, que ouvi do meu mestre de artes, Zibgniew Campioni foi:
“Você prefere que te apresente um layout pronto, ou que te apresente uma dúzia de idéias?”
O que vale no primeiro momento, acredite, são as grandes idéias.
Ferramentas digitais que vão te auxiliar.
OK. Não teve jeito e você precisa fazer um wire mais “bonitinho” para já, agora.
Quando isso acontece, recorro as ferramentas que conheço. Não há tempo para aquela famosa curva de aprendizado.
Nesses momentos difíceis, recorro ao Illustrator. Você poderia utilizar o Photoshop, Fireworks, ou qualquer outro software que seja familiarizado. Minha opção pelo Illustrator é pela facilidade de edição, e de troca de símbolos no stage, além de haver uma série de bibliotecas para criação de wireframes que são vetoriais e feitas sobre medida para este software.
Bibliotecário Virtual 