WIREFRAMES!?

WIREFRAMES!?

O que é um WIREFRAMES?
Um wireframe é um documento elaborado durante a fase de arquitetura de informação de um projeto web que tem como função estruturar o conteúdo de cada página, indicando o peso e relevância de cada elemento do layout e a sua relação com os demais elementos formadores do todo.

Além desta função estrutural, o wireframe também é utilizado para a marcar etapas de um processo de interação entre o utilizador e o sistema, fornecendo um wireframe por cada ecrã que explique detalhadamente todos os elementos presentes na página e como o utilizador pode interagir com eles.

A origem do nome “wireframe” vem da união de duas palavras em inglês: “wire” (linhas) e “frames” (ecrãs). Ou seja, são ecrãs de baixa resolução e com um aspecto gráfico muito comun que servem apenas para indicar onde devem estar localizados os objetos e menus de interação.mostrando assim os aspetos gráficos de uma aplicação.

Elaborando wireframes, podemos concentrar-nos somente nas questões da interface – como acessibilidade e usabilidade – deixando questões estéticas para uma próxima etapa. Além disso, é possível discutir melhor com o cliente em cima de um wireframe. Se ele decide mudar alguma coisa, é mais fácil mudar um esboço do que um layout pronto. Salvo claro que esta etapa podemos tratar durante a prototipagem em papel (portanto mais rápido e mais barato).

Como desenhar um wireframe?

Existem algumas aplicações com funções específicas para desenhar wireframes, entre elas temos o Microsoft Visio, o OmniGraffle, o Adobe Illustrator ou o Adobe InDesign.

A vantagem de desenhar em XHTML é que os protótipos são funcionais e na fase de concepção poupa-se trabalho porque o esqueleto das páginas já está feito. Mas perde-se muito mais tempo a codificar o XHTML e o CSS correspondente do que se desenharmos os ecrãs através de objetos “drag & drop”.

Fidelidade

A primeira coisa a se fazer quando começamos a projetar wireframes é definir se eles serão construídos em baixa, média ou alta fidelidade. Todos têm suas vantagens e desvantagens e a opção por um deles varia de acordo com as necessidades do projeto.

Os de baixa-fidelidade não possuem elementos gráficos nem conteúdo real.
Os de média-fidelidade possuem um grau de detalhamento maior, indicando aspectos de conteúdo, layout e sistemas de navegação. Já os de alta-fidelidade chegam mais próximo do que será o design gráfico, simulando com exatidão tamanho da página e das fontes e podendo servir como protótipos.

Cor

O uso de cores deve ser evitado eu por exemplo utilio branco e tons de cina. Isto evita confunidr o designer gráfico com as cores que realmente a aplicação deva ter.

Consistência

O ideal também é manter a consistência portanto, manter um mesmo posicionamento e tamanho de elementos que se repetem ao longo das páginas que serão esboçadas nos wireframes.

Anotações

Sempre que algum ponto ficar confuso ou obscuro o ideal seria colocar um comentário para que possamos ter uma real em relação a dúvida que surge.

Também é importante manter nos wireframes uma numeração lógica, o nome do autor, o projeto a que ele se refere, quando foi construído e quando foi modificado pela última vez. Se for necessário, um histórico de modificações também pode ser providenciado.

OPINIÃO DE UM TERCEIRO SITE QUE CONSULTEI A ALGUM TEMPO–

” Programas para construção de wireframes

O melhor programa que conheço para construção de wireframes é o Axure RP Pro11. Como ele foi concebido quase que exclusivamente para esta função, é um software bastante completo e que já vem com todas as tradicionais formas do wireframes embutidas em uma biblioteca própria.

Outra grande vantagem do Axure é que ele gera protótipos navegáveis. Ou seja, você pode fazer com que os links levem a determinado wireframe, permitindo que o protótipo seja testado e validado antes de seguir para o design gráfico. Esses protótipos são exportados em HTML, levando consigo tanto o índice geral no lado esquerdo quanto as anotações no rodapé da página.

VOLTANDO….

O software mais utilizado no mercado é o Microsoft Visio. O Visio é uma ferramenta para construção de gráficos em geral, bastante fácil de usar e com a possibilidade de importar bibliotecas de formas que ajudam na construção dos wireframes.

Mas você pode construir seus wireframes em qualquer aplicação gráfica, até mesmo no velho powerpoint.

Bom espero que tenham gostado voltaremos…

Abraço,
Ederson Melo

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s