Em mundo perfeito, talvez 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 conhecidos como mockups) prontinhos para os designers trabalharem.

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

Por isso, pretendo abordar nesse artigo 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 artigo e não vou me aprofundar muito nesta questão. Mas, para efeito comparativo com a segunda parte, é 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

Depois de escolher um software bacana, e tendo em mãos o wireframe, chega o momento de 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 adendo 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.

Wireframes mutantes

Às 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 final para produzir um wireframe que vai ser incrementado gradativamente. Veja um exemplo:

Página principal (home). Repare que este não é um wireframe tão engessado, 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:

• Existem 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 a diagramação são diferentes, se aproximam mais do layout final.

Não levei mais do que duas horas para montar o esquema acima. A vantagem de utilizar wireframes com um nível médio de detalhes é que ele torna-se o norte todo o 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, para ele custa pouco inserir pequenos detalhes (que fazem a diferença) no layout.

Continuando o desenvolvimento em cima do Wireframe mutante

Depois de aprovado junto ao cliente, finalmente é chegada a hora de maquiar o pobre, quadrado e monocromático Wireframe. Cores, fontes, fundos, degradês, ícones, botões, brushes, 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:

Note 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.

Note 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 à 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. =)

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