|
Share this
Twitter
Mister Wong
Digg
Yahoo
Technorati
Newsvine
Googlize this
Blinklist
Facebook
Hear this text
Export PDF
Print
E-mail
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çãoJá 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.