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.
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 softwaredistorções no conteúdo - um ajuste aqui, um adendo ali. para dar continuidade ao projeto (normalmente Photoshop ou Fireworks). É neste momento que acontecem algumas
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.
Visto 833 vezes até agora.
Gostou disto? Insere no seu Twitter!
Últimos 'tweets' de joomlaclube
- K2 versão 2.2 pt-BR: Um dos melhores CCK (Content Construction Kit) para Joomla! Frontend e backend do componente ... http://bit.ly/d7W5FY Link Dom, 21 de Fevereiro de 2010 15:53
- CssJsCompress 3.3 pt-BR: Excelente plugin para comprimir e agregar os arquivos CSS e JavaScript do seu site. Dimin... http://bit.ly/bDWOGz Link Dom, 21 de Fevereiro de 2010 15:53
- Matérias Designers VS arquitetos de informação: Aumentando a produtividade na produção de wireframes: Em mundo per... http://bit.ly/9ANwUG Link Sex, 29 de Janeiro de 2010 16:28
- Matérias Joomla! E-commerce com VirtueMart: É um tipo de transação comercial feita especialmente através de um equ... http://bit.ly/agzLt4 Link Sex, 29 de Janeiro de 2010 16:28
- Matérias A JoomlaClube vai dar ingressos para você ir ao Campus Party 2010!: Olá amigos, membros e Joomleiros! A J... http://bit.ly/bW9qu0 Link Sex, 29 de Janeiro de 2010 16:28
- Tags for Joomla 1.3.0 pt-BR: O verdadeiro e gratuito sistema de tags para Joomla! (Extensões / Componentes) http://bit.ly/7GnFLV Link Seg, 25 de Janeiro de 2010 20:46
- AceSEF Basic 1.3.0 pt-BR: AceSEF é um poderoso e flexível gerador de URLs SEF e Meta Tags com uma interface gráfic... http://bit.ly/5786Gr Link Seg, 25 de Janeiro de 2010 20:46
- Xmap 1.2.6 Estável pt-BR: Xmap é um componente baseado no popular componente Joomap. Xmap permite que você crie um... http://bit.ly/5JwloY Link Seg, 25 de Janeiro de 2010 20:46
- Tags for Joomla 1.3.0 pt-BR: O verdadeiro e gratuito sistema de tags para Joomla! (Extensões / Componentes) http://bit.ly/7GnFLV Link Sáb, 23 de Janeiro de 2010 21:05
- AceSEF Basic 1.3.0 pt-BR: AceSEF é um poderoso e flexível gerador de URLs SEF e Meta Tags com uma interface gráfic... http://bit.ly/5786Gr Link Sáb, 23 de Janeiro de 2010 21:05





