Aliado ao sitemap (veja ao lado), o wireframe é um documento que se torna cada vez mais fundamental para o trabalho do arquiteto de informação, apesar de não ser (e nem pretender ser) uma régua de estilos para o layout e a criação das páginas de um site, como é erroneamente interpretado por muitos webdesigners.
Sua função é estruturar o conteúdo de cada página, indicando o peso e relevância de cada elemento do layout e sua relação com os demais elementos formadores do todo.
Também cabe ao wireframe indicar a correta marcação de textos, breadcrumbs de navegação, guidelines de marca e até dos recursos de programação e tecnologia a serem utilizados pela equipe de produção. Posteriormente também serve como baliza para testes de usabilidade.
Além desta função estrutural, o wireframe também é utilizado para marcação das etapas de um processo de interação entre usuário e sistema. Como as etapas de uma compra online, por exemplo, que vão da busca pelo produto, escolha de um dos resultados, confirmação de intenção, preenchimento do cadastro e opção de pagamento.
Para cada um destes passos de compra deve haver um wireframe que explique detalhamente todas as possibilidades de interação e o caminho percorrido pelo usuário.
Principais elementos de um wireframe
Na construção do wireframe o arquiteto busca representar esquematicamente todos os elementos que compõem a página. Imagens, textos, formulários, flash, mecanismos de busca são representados por variações gráficas de elementos similares – como quadrados e círculos, traços contínuos e pontilhados, palavras em negrito e sublinhadas, largura e altura das páginas – padronizados para todos os wireframes da documentação.
Para evitar descrições alongadas, que geram mais confusão do que entendimento, vamos diretamente analisar dois wireframes da home do Webinsider que foram construídos apenas para ilustrar as diferenças entre um trabalho mais aberto (com baixo detalhamento) e outro com guidelines mais definidas e marcações pré–estabelecidas pelo arquiteto.
Wireframe com baixo detalhamento (abre janela nova do browser).
O primeiro é um documento superficial, de baixo detalhamento e pouca influência no trabalho dos designers e das demais equipes do projeto. Ele traz apenas uma marcação de blocos de conteúdo.
Wireframe com alto detalhamento
Já o segundo modelo apresenta alto grau de detalhamento dos componentes da página e utiliza vários elementos gráficos para representá–la. Este modelo de wireframe é muito útil no desenvolvimento de um site e também em sua documentação posterior, para futuras consultas. Além, é claro, de valorizar o trabalho desenvolvido pelo arquiteto.
É só observar atentamente o segundo wireframe e já nos propomos algumas questões que envolvem as competências de um arquiteto de informação, tais como conhecimentos básicos de design, tecnologia, programação e redação.
É claro que o arquiteto não tem a obrigação de ser um especialista em cada uma destas disciplinas. Entretanto, o conhecimento dos principais conceitos de cada uma delas sem dúvida alguma enriquece o wireframe e apresenta à equipe de produção um projeto bem melhor resolvido e passível de implantação.
Usabilidade
Outro ponto de importância na construção de um wireframe é o que toca na questão da usabilidade. Antes de qualquer coisa, devemos ter a consciência de que a análise da usabilidade não cabe ao arquiteto, até por ser um procedimento adotado numa etapa posterior ao trabalho de arquitetura. Fazemos análise de usabilidade quando o site já está criado e produzido, hospedado em um servidor com endereço específico, apenas para que os envolvidos neste trabalho e os usuários por eles selecionados possam checar a eficiência do site em atender as expectativas do público alvo.
Porém o arquiteto pode contribuir com a usabilidade de um site no momento em que está construindo os wireframes, ao evitar conteúdos redundantes e sobreposição de conteúdo, além de layouts complexos ou links escondidos. O arquiteto deve prever em sua documentação alguns procedimentos de auxílio ao usuário do site, como maior rapidez de obtenção de resultados, supressão de etapas intermediárias, controle sobre o modo de exibição do conteúdo, menus e links sempre visíveis, padronizados e inteligíveis, entre outros detalhes.
Identidade e Marca
Por fim, é na construção do wireframe que o arquiteto vai garantir que todas as páginas mantenham uma unidade gráfica, padronizada e uma presença de marca relevante para o patrocinador do site, o cliente.
Um website raramente é uma ação isolada de uma empresa na tentativa de se comunicar com seu clientes, prestando serviços ou vendendo diretamente seus produtos. É muito importante que o site esteja, graficamente e conceitualmente alinhado com a proposta de comunicação que vem sendo adotada nas demais ações na internet e mesmo nas mídias off–line, como jornais, revistas, TV, outdoors, ponto–de–venda etc. É claro que este envolvimento com a marca deve ater–se também ao respeito pelas características do universo digital e o objetivo individual de cada projeto, conjugando unidade e autonomia de atuação.
Alguns riscos e vantagens do wireframe
Riscos
– Não atender as expectativas dos clientes, empresas ou instituições, que estão longe dos conceitos mais básicos da AI, sentindo–se assim mais confortáveis em aprovar layouts de designers, por serem peças com grande impacto gráfico.
– Acomodar a equipe de criação de modo que os designers, por falta de tempo hábil ou insegurança, não mais inovem em seus projetos e sigam as indicações do wireframe à risca.
– Por não ser desenhado na exata escala em que será construído o site, pode gerar desencontros de entendimento da relevância de cada elemento na composição da página e seu impacto de visualização.
– Necessita de tempo, educação e insistência de uso até tornar–se corretamente entendido pelos profissionais envolvidos nas etapas de cada projeto.
Vantagens
– Facilita a aplicação de conceitos de usabilidade já testados e comprovadamente eficientes.
– Auxilia a equipe de desenvolvimento e programação na tarefa de produzir o site de maneira mais rápida, padronizada e eficiente.
– Após a implantação do site, os wireframes auxiliam nos testes de usabilidade e mostram efetivamente o que deve ser refeito em cada uma das páginas.
– Funciona como uma documentação do site e deve ser consultado antes de cada modificação posterior, para prever impactos na arquitetura e funcionalidade.
Principais softwares para construção de wireframes
Você pode criar seus wireframes em qualquer software que permita o mínimo de organização de elementos geométricos e textos, porém existem alguns que facilitam este trabalho por serem agentes customizados para esta função:
Visio
Freehand
QuarkXPress
InDesign.
[Webinsider]
.
29 respostas
Concordo que a análise de usabilidade deva ser feita depois e com isso ações de melhorias. Na questão do DA mudar as posições porque ele acha que fica melhor, acho que que ele deve ter esta liberdade. Se você tiver um bom diretor de arte, ele dificilmente vai errar. A decisão final quem toma é sempre o gerente do projeto, mas na verdade quem apita mesmo é o cliente. Então cabe ao atendimento fazer este meio de campo. Agora depende muito do projeto. Se for um projeto que não tenha o perfil do seu diretor de arte, não vai ficar 100%.
Cada um puxa para um lado, todo artista bom segue uma linha, um conceito e você tem que saber escolher.
Em resumo, entendi que o arquiteto de informação é um designer com outro nome…
O Wireframe, é uma tecnica fundamental para a formulação de um bom projeto. O planejamento minucioso e findado nos ponto X, do que o cliente espera receber.
Com dominio da ferramenta em mãos, é possivel estabeler um prazo mais apurado e realizar um bom plano de ação em relação as tecnologias que serão usadas para realização do sítio.
Galera estou testando o pencil, ferramenta free e open para wireframe.
Eis o link do site: http://www.evolus.vn/Pencil/
Abraços a todos.
Muito bom o Artigo. Primeiro acesso ao site e até o momento muito bom.
Recentemente publiquei um artigo no meu blog sobre uma ferramenta online chamada Lovely Charts que é free e serve para criar wireframes, sitemaps, organogramas, fluxogramas e também diagramas de rede.
LINK:
http://www.designinabox.nu/ferramentas/lovely-charts-tudo-o-que-voce-precisa-para-criar-organogramas-wireframesetc/
Tambem nao concordo com a frase Fazemos análise de usabilidade quando o site já está criado e produzido, hospedado em um servidor com endereço específico. A análise pode e deve ser feita durante a analise de layout. No maximo durante a homologação. Depois de estar hospedado e ser liberado é estranho, pois acaba gerando re-trabalho para a equipe.
Procurando algumas vagas na minha área de atuação me deparei com este termo wireframe e com certeza tirou qualquer dúvida que eu possuia. Ótimo artigo, direto e descomplicado… já irei utilizar wireframe em meu próximo projeto.
Abraços
Eu, que não sou da área, gostei muito do artigo. É direto, objetivo e descomplicado. Obrigado e um abraço!
Outro software bastante robusto para construção de wireframes é o Axure RP Pro. (http://axure.com/), muito eficiente. Pena que custe tão caro … 🙁
..Fazemos análise de usabilidade quando o site já está criado e produzido..
Que absurdo…
Trabalhamos com wireframe em nossa empresa e seguidamente temos alguns desntendimentos entre a equipe de atendimento e a equipe de produção dos sites, uma vez que nosso projetista desenha o wireframe e mandamos paa o pessoal do aatendimento aprovar a ideia de navegação e relevancias com o cliente.
Após essa etapa, é que colocamos o wire na mão do Diretor de Arte, embora ele ja tenha participado no processo de elaboração do prejeto, para que ele faça a sua parte.
O que tem acontecido é que muitas vezes o DA muda a posição dos elementos alegando que esteticamente isso ficaria melhor assim.
Minha duvida é se isso é correto, ou o DA deveria seguir o projeto como foi aprovado, evidentemente colocando arte nesse projeto, tipo não é porque a area conceitual foi desenhada retangular no wire, que no DA ela deva ser retangular tambem, mas acredito que ela deva manter a posição definida e aprovado junto ao cliente.
Fazemos análise de usabilidade quando o site já está criado e produzido, hospedado em um servidor com endereço específico…
Existem diversas formas de se avaliar a usabilidade, inclusive no desenvolvimento de wireframes, portanto discordo totalmente da frase.
O ideal é um processo de desenvolvimento onde a usabilidade é checada, com a técnica mais adequada a cada etapa.
Edson.
aláaaa, eu vi as imagens!!
ueheuheuehuehueh..
pois eh.. eu to meio doido emsmo… é q tem cerca de 2 meses q TODO DIA DO MUNDO eu estou trabalhando com wireframes para fluxos de tela, formulários e todo o resto do site, hehehe..
wireframes são imensamente úteis.. mas para um portal grande como este que estou trabalhando, é de pirar a cachola!
hehehe..
abraços!
amigos,
as imagens finalmente foram acertadas. Obrigado pela paciência.
[]s do
Vicente Tardin
editor
Caro Vicente:
Já se passaram mais de 60 dias e as imagens ainda não estão disponíveis, ponto negativo para a credibilidade do site.
Os links continuam sem funcionar… =/
O link para as duas imagens de wireframe continuam sem abrir. Elas ainda estão sendo corrigidas?
qdo redirecionados os links, avisem.
obrigado
Amigos,
as imagens serão corrigidas. Elas mudaram de servidor e assim que possível serão acertadas.
[]s do
Vicente Tardin
Quando tento abrir os links dos exemplos
Wireframe com baixo detalhamento
Wireframe com alto detalhamento
Obtenho a seguinte esposta:
Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.
Please contact the server administrator, webmaster@br74.teste.website and inform them of the time the error occurred, and anything you might have done that may have caused the error.
Os dois link´s estão com problemas 🙁
Quando tento abrir os links dos exemplos
Wireframe com baixo detalhamento
Wireframe com alto detalhamento
Obtenho a seguinte esposta:
Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.
Please contact the server administrator, webmaster@br74.teste.website and inform them of the time the error occurred, and anything you might have done that may have caused the error.
More information about this error may be available in the server error log.