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

image

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:

00

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:

01

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.

02

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.

03

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:

04

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.

05

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.

08

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

proximoPost

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.

10 Comments

  1. Léo Hackin on 

    Show de bola o post fi. ;)

  2. Alex Luna on 

    Muito bom o post, Lucas.

    Acho que muita gente ainda não tem bem clara a diferença entre um wireframe de baixa fidelidade, um mockup e um wireframe funcional. No blog do Justinmind, recebemos milhões de visitas procurando por isso.

  3. dimitri on 

    Otimo assunto, mas tem de tirar este fundo cinza do seu site.Conselho de amigo.

  4. Wagner Rosati on 

    Achei muito bom sim as dicas e tudo mais…mas achei curioso o fato de vc sugerir que os Wireframes sejam produzidos nos próprios softwares finais para produção..tipo photoshop e ou fireworks, mas no final vc joga uma lista de programas especificos para gerar Wireframes…..
    Gostei mais do azul claro para o layout…
    Outra coisa que fiquei meio perdido foi em relação a este BG do site..parece q n esta bem planejado pensando na produção…telas maiores, menores verticalmente..enfim..
    abraços

  5. admin (Author) on 

    Oi Alex, realmente você tem razão. Acho que vale um post só pra esclarecer este ponto.

    Abraços!

  6. admin (Author) on 

    Oi Wagner,

    Obrigado pelo sua opinião quanto a versão do layout.

    Apesar de ter sugerido que os layouts sejam criados no fireworks, este post pode ser lido também para quem pretende se especializar na area de AI. Sendo assim, a lista é válida pra eles, e também para designers curiosos.

    Esses softwares ajudam a entender o processo para quem nunca mexeu com wireframes.

    Quanto ao formato do meu site: Ele é baseado num estudo que fiz que textos mais estreitos são menos cansativos de ser lidos, principalmente textos grandes. Como meus artigos técnicos são relativamente grandes, optei por este formato. Se você reparar, sites consagrados como o http://www.webinsider.com.br utilizam este formato.

    Abraço

  7. Diego Sana on 

    Muito bom post Lucas. Sou desenvolvedor, não tenho talento nenhum pra fazer o design, mas consigo dar os meus pitacos na arquitetura de informação, e os wireframes são sem dúvidas indispensáveis no processo de criação de uma página. Não conhecia essas ferramentas, a dica veio a calhar. Vou testar algumas :)

  8. Jéssica on 

    Apesar de não entender naaaaada do assunto, hehehe, o site está lindo!

    PARABÉNS pelo trabalho, Lucas!

    Beijinhos pra ti :*

  9. Almir Farias Rivas Junior on 

    Cara,

    Achei 10 seu post. Mas só achei que faltou definir claramente a diferença entre wireframe e mock-up.

Trackbacks for this post


    Warning: call_user_func(iii_list_pings) [function.call-user-func]: First argument is expected to be a valid callback in /home/lucascoradini/www/blog/wp-includes/comment-template.php on line 1334

Join the Conversation