Talvez, em mundo perfeito, uma equipe de agência web seja formada por gerentes de projetos,  redatores, revisores de conteúdo, testadores, programadores, atendimento perfeito, e arquitetos de informação que fornecem wireframes (também conhecido como mockup’s)  prontinhos para os designers trabalharem.

Quem dera, hein?  Como sabemos, no mundo real não funciona assim tudo tão bem dividido. É comum um bom Designer (leia-se Bombril) também ficar responsável pela arquitetura de informação do site, ou qualquer que seja a interface.

Por isso, pretendo abordar nesse post diferentes abordagens no momento da produção dos wireframes.

Wireframes na visão dos arquitetos de informação

Já adianto que este não é o foco do meu post e não vou me aprofundar muito nesta questão. Mas, para efeito comparativo (com a segunda parte do post), é importante que você entenda que normalmente Arquitetos de informação utilizam sofwares específicos para a criação de wireframes, e que o resultado final é algo parecido com isso:

Wireframe com baixo nível de detalhamento

OBS: No final do post disponibilizo uma lista completíssima de softwares específicos para a produção de wireframes.

Depois de escolher um software bacana e tendo em mãos o wireframe, chega o momentode utilizar outro software para dar continuidade ao projeto (Normalmente Photoshop ou Fireworks). É neste momento que acontecem algumas distorções no conteúdo – um ajuste aqui, um adeno ali.

Olhando pelo lado bom, pode-se gerar novas idéias neste “retrabalho” de transformar o wireframe (pobre visualmente, como deve ser) em um layout elaborado. Mas também pode-se distorcer o que já havia sido definido, perdendo-se tempo e o prazo.

Um freelancer ou um Designer que trabalha em uma pequena, média, ou até em uma grande empresa que não dispõe de uma pessoa que fica responsável somente com a arquitetura de informação, pode agilizar este processo.

Como? Através dos

Wireframes mutantes

As vezes tentamos organizar e documentar demais as etapas de um trabalho, e deixamos em segundo plano a produtividade. Veja bem, eu não estou defendendo o trabalho nas coxas ou sem planejamento. Penso que cada projeto tem sua complexidade, e às vezes não é necessário matar uma mosca com uma bazuca.

O Designer pode, perfeitamente, fazer uso da ferramenta que vai gerar o layout finalpara produzir um wireframe que vai ser incrementado gradativamente. Veja um exemplo:

Página principal (home) – Repare que este não é um wireframe tão engessadom, mas  não deixa de ser simples e extremamente rápido de ser produzido

É importante que, até que seja finalizado o wireframe, os afobados se contenham em não trocar fontes e testarem cores. Agora não é a hora de perder tempo com isso.

Exemplo de página interna (busca) – No Firework (Software de minha preferência), basta salvar o arquivo como e aproveitar os elementos já criados na estrutura anterior

Observe bem que as estruturas mostradas:

• Tem Caixas (boxes) extremamente simples e secas
• Tem o cinza mais escuro para indicar maior relevância do conteúdo
• Fontes sem formatação, porém os tamanhos diferenciados indicam hierarquia
• O espaçamento e diagramação é diferente, se aproxima mais do layout final.

Não levei mais do que 2hs para montar o esquema acima. A vantagem de utilizar wireframes com um nivél médio de detalhes, é que ele torna-se o norte todo processo de criação

Outra vantagem é poder apresentar a idéia da estrutura da interface ao cliente sem que haja um grande esforço de abstração – exigido quando o wireframe é extremamente pobre e gerado por ferramentas destinadas aos Arquitetos de informação.

Resumindo: O designer tem a facilidade e o conhecimento da ferramenta gráfica, pra ele custa pouco inserir pequenos detalhes (que fazem a diferença) no layout.

Continuando o desenvolvimento em cima do Wireframe mutante

Depois de aprovado (ou não) junto ao cliente, finalmente é chegada a hora de maquear o pobre, quadrado e monocromático Wireframe. Cores, fontes, fundos, degradês, ícones, botões, bruches, e chega. Vamos ver no que deu.

Que bonito! Olhando assim nem parece que deu trabalho..

Agooooora é a hora onde vou conseguir concluir meu ponto de vista e minha teoria: Note que, comparando com o wireframe inicial, não fugi do escopo e tudo está em seu devido lugar, sem grandes modificações. 

E ainda ainda não acabou. Neste modelo de desenvolvimento gradativo, podemos aproveitar pedaços dos wireframes para compor as páginas internas:

Notem que os elementos são basicamente os que estavam na home, aproveito vários deles para compor layout das páginas internas.

Pode parecer que não, mas esta prática ajuda e agiliza MUITO o processo de criação. Com um pouco mais de trabalho, lapidei esta tela até chegar em sua versão final.

Notem que mudei apenas a disposição das imagens para o lado direito, mas isso é só um detalhe.

Concluindo..

Penso que a arquitetura de informação é parte integrande do processo do design, e que não é necessário torná-la um passo a parte. A não ser que você viva no mundo perfeito e seja (remunerado extremamente bem) para trabalhar somente com a arquitetura de informação. =)

Obs: Já que você leu até aqui, pode deixar registrado sua opinião? Dê uma olhadinha nesse versão mais escura do layout em questão.

Só mais uma coisa: Pra você que não está acostumado a fazer wireframes, esta lista de softwares é uma dica muito preciosa

Conforme prometido, segue abaixo uma lista MUITO bacana (que achei neste site, não é pesquisa minha) de softwares que ajudam na confecção de wireframes.

► Axure RP (aplicativo para a produção de protótipos funcionais e wireframes, especificações de programas, acesso em 9.8.2008)
► Balsamiq mockups (modelos para esboços, acesso em 20.2.2009)
► Hot Gloo (ferramenta online que tem dois modos de trabalho, edição e revisão. Este último permite a inserção de notas e comentários, acesso em 18.8.2009)
► iPlotz (gratuito para até 5 páginas, mensalidade ou anuidade para número ilimitado de projetos, tem recursos de colaboração e recursos de gestão de projetos – com a verificação das tarefas já completas, por exemplo, acesso em 20.2.2009)
► Justinmind (além de wireframes, permite a instalação de ferramentas participativas, pelas quais os clientes podem inserir notas e comentários, acesso em 6.8.2009)
► JustProto (online, diagramas de processo, elementos padronizados, bom controle de texto, poucos eventos interativos, acesso em 28.5.2009)
► Lovely Charts (gratuito, aplicativo online para a criação de diagramas de fluxo, mapas de sites, organogramas, wireframes, de maneira intuitiva, acesso em 13.9.2009)
► MockFlow (ferramenta online com elementos arrastáveis e que permite que qualquer página seja transformada em master, acesso em 18.8.2009)
► Omnigraffle (diagramas, diagramas de processo, layouts simplificados, protótipos funcionais, acesso em 20.2.2009)
► Pencil Project (funciona com o Firefox para a produção de protótipos funcionais e wireframes, acesso em 9.8.2008)
► Serena Composer (disponível para compra, acesso em 15.9.2009)

Próximo Post

Do wireframe a arte final - Um passo-a-passo com dicas

Pra ficar ligado quando este post sair, basta assinar o RSS.

Abraços, e não deixe de comentar.