Especificação - Wireframes

Wireframe:“Estrutura de Arame”

É o documento de representação da organização, diagramação e funcionamento dos elementos de uma página.

Arquitetos de Informação; que mostram e validam uns com os outros o futuro site, além de usarem na forma de protótipo em testes de usabilidade.

Diretores de Criação; que usam como base gráfica para o desenvolvimento do Layout.

Redatores; que preenchem a estrutura com o conteúdo.

Desenvolvedores; que irão fazer tudo funcionar.

Clientes; que validam tudo de acordo com os requisitos do projeto.

Usuários; que irão usá-lo como protótipo nos testes de usabilidade.

Quem é que usa?

Estamos chegando na ponta do Iceberg

Sketch (Rabiscoframe) Identificação (Mockup) Representação

Desenvolvimento Layout

Projetando uma Vaca: As etapas do Wireframe

Protótipo

Sketch (low fidelity)

Etapas do Wireframe:

Identificação (Mockup )

Etapas do Wireframe:

Representação (High Fidelity)

Etapas do Wireframe:

Protótipo Navegável

Etapas do Wireframe:

Fore UI http://www.foreui.com/

Axurehttp://www.axure.com/

IRisehttp://www.irise.com/

Omnigrafflehttp://www.omnigroup.com/applications/OmniGraffle/

Balsamichttp://www.balsamiq.com/

Justprotohttp://www.justproto.com/en/

Mockup Screenshttp://mockupscreens.com/

Denimhttp://dub.washington.edu:2007/projects/denim/

Fluid IAhttp://www.fluidia.org/

Oversitehttp://taubler.com/oversite/

Microsoft Visiohttp://office.microsoft.com/pt-br/visio/FX100487861046.aspx

Adobe InDesign

Power Point (Nããããããããããão!!!!)

Ferramentas - Prototipação e Wireframe

Vantagens- Validação consistente e persuasiva com o cliente.- Facilita a compreensão de montagem do layout e da programação dos aplicativos.- Possibilita o teste com usuários antes da definição do layout.

Desvantagens- Requer esforço e tempo, o que pode atrasar o processo e aumentar custos- O foco pode se desviar prematuramente da arquitetura de informação para a interface e design visual.- Pode amarrar o trabalho do designer

Vantagens- Rapidez

- Custo- Liberdade para o designer

- Facilita a refação

Desvantagens- Pouca credibilidade (principalmente com

clientes)- Maior margem de erros

- Difícil de ser testado- Exige mais de programadores e designers

- Requer desenvolvimento em conjunto.- Menos intuitivo.

Baixa fidelidade X Alta fidelidade

- Coloque nomes claros nas páginas do Wireframe e nos arquivos de protótipos, incluindo a data da última revisão.

- Enumere as páginas do Wireframe/Protótipo.

Dicas:

Faça comentários, descreva textualmente as interações. Pode usar as laterais do protótipo para isso.

Avalie se é mais produtivo simular as interações ou explicá-las.

Dicas:

- Consulte Bibliotecas de padrões de navegação (Pattern Libraries). Comece a fazer a sua própria.- Estabeleça padrões para o desenvolvimento de Wireframes em grupo.

Dicas:

Martijn van Welie http://www.welie.com/patterns/

Yahoo Pattern Libraryhttp://developer.yahoo.com/ypatterns/

E muitas outras:http://delicious.com/viniciuskrause/biblioteca-de-padroes

Algumas bibliotecas de padrões:

Distribua o conteúdo em ordem de importância decrescente, de cima para baixo, da esquerda para direita.

Mais importante

Menos importante

Dicas:

Lembre-se das convenções. Se não lembrar, dê uma olhada no que já existe.

Dicas:

Faça testes informais com você mesmo e com outras pessoas enquanto desenha.

Dicas:

WIREFRAME NÃO É LAYOUT !!!

Dica final:

Arquitetos de InformaçãoJeferson JessLuis Felipe FernandesVinicius Krause