Voce esta aqui: Home Matérias Clube Webdesigners Designers VS arquitetos de informação: Aumentando a produtividade na produção de wireframes

..:: Joomla Clube ::..

Designers VS arquitetos de informação: Aumentando a produtividade na produção de wireframes

E-mail Imprimir PDF
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:

1

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:

234

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.

3

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.

4

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:

5

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.

6

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.

Fonte:


Andre
Escrito em Qua, 30 de Dezembro de 2009 14:30 por Andre

Visto 833 vezes até agora.
Gostou disto? Insere no seu Twitter!

Avalie este artigo

(9 votes)

Ú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

Exibidos: 834
Comentarios (0)Add Comment

Escreva seu Comentario
Voce precisa estar logado para postar um comentario. Por favor registre-se se caso nao tenha uma conta

busy
Última atualização ( Sáb, 02 de Janeiro de 2010 06:12 )