Quase 100% das vezes que faço um projeto ou o apresento para um cliente, ouço a mesma pergunta:
O que é Wireframe? Bom, continuem lendo o Post e descubram

Na área de web, Wireframe é a disposição organizada dos elementos que compõe um website. O responsável por construir um wireframe (também conhecido como esqueleto) é o Arquiteto de Informação, que tem a missão de listar todo o conteúdo do site, atribuir valor as áreas e entregar através de esqueletos já aprovados pelo cliente para o designer gráfico.

Alguns softwares especializados na criação de Wireframe

Microsoft Visio, OmniGraffle, Adobe Illustrator, Adobe InDesign, Axure RP Pro 4 e Framestatic (via browser indicado pelo Fabio Natan).

Algumas formas de se fazer um Wireframe

Rascunhos em papel, programas de imagens gráficas, programas vetoriais e xhtml.

Rascunhos de papel
POSITIVO - Liberdade de discutir com cliente e profissionais envolvidos de forma rápida e simplificada, mantendo o foco nos elementos aplicados e diminuindo o tempo não só do desenho, quanto da possível alteração do wireframe.
NEGATIVO - Devido a pobreza de acabamento, perde-se um pouco do requinte esperado pelo cliente, o que pode facilmente ser confundido com um trabalho mal feito ou não profissional, outro fator negativo é a dificuldade que muitos clientes tem em entender ou visualizar o seu website através de linhas e rabiscos.

Programas de Imagens gráficas e Programas vetoriais
POSITIVO - Maior profissionalismo esperado pelo cliente, elementos alinhados com recursos tecnológicos, possibilidade de alteração de layouts sem a necessidade de refazê-lo todo como em desenho no papel, maior noção ‘final’ do site tanto para o cliente, quanto para o design gráfico que receber o projeto.
NEGATIVO - Demanda um número maior de horas, Se for muito organizado, pode gerar um desconforto para o design gráfico enquanto criação do layout final do website em cima do wireframe.

xhtml
POSITIVO - Alguns acreditam ser o futuro do desenvolvimento do wireframe, pois ao ser aprovado pelo cliente, já entrega o esqueleto do website com todas as suas classes, estruturas, IDs e outros elementos técnicos prontos tanto para a produção gráfica quanto para a programação.
NEGATIVO - Dificulta ainda mais a criação do layout final, assim como muitas vezes fica no meio do caminho do entendimento de navegação para o cliente, o tempo, a atualização e a simetria do layout é fator de muita importância na consideração de se optar ou não por esta forma de produção de wireframe.

Níveis de qualidade de um wireframe

- Abstract view (bem abstrato e simples, gera mais confusão na apresentação e é um esboço bem pobre apenas para documentar como seria a estrutura de um website)

- Lower fidelity view (Estruturas mais definidas, sem riqueza de detalhes, serve para dar maior liberdade de alteração na reunião com o cliente e possibilitar maior criação e liberdade do desenvolvimento do layout final pelo designer gráfico)

- Higher fidelity view (Estruturas simétricas, com tamanhos reais e definidos, agregando valor à sua apresentação e ao projeto em si, pode gerar um certo limite à criação do designer gráfico e exigir maior tempo na atualização do wireframe)

NOTA: No início do levantamento das informações e das importância das páginas do cliente, identifique as páginas mais importantes, as de importância média, as de importância mínima e por fim as genéricas, assim ao desenvolver wireframes, você poderá intercalar entre os 3 níveis de qualidade para cada importância de página.

POSSO UTILIZAR CORES NO MEU WIREFRAME?

As vezes, um elemento merece mais destaque do que todos os demais, ou o site pode ser separado em seções com níveis de importâncias dentro de um mesmo wireframe, para isso, pode-se sim utilizar de cores ou variar a tonalidade para se mostrar os valores de cada objeto/área/seção.

Observação final

Não jogue simplesmente seu wireframe nos braços do seu cliente, explique antes o que significa o wireframe, se possível arrume exemplos de wireframes de outros sites conhecidos por ele para contextualizá-lo com exemplos.

Ouça seu cliente e suas considerações sobre o site, mesmo que isso faça você refazer todo o trabalho (esta é a etapa pra isso).

Afie seus conceitos, estudos e pesquisas em cima do wireframe do projeto para defendê-lo, caso haja necessidade.

Documente tudo que foi discutido na reunião, desde as alterações até a aprovação final, elas são de suma importância para não tomar um “para tudo!”(piada interna) já na fase de produção, gerando tempo perdido e desperdício de energia, dinheiro e capital humano..

OLHEM O WIREFRAME DO CÓDIGO LARANJA

Assine nosso RSS feed de comentários