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/ Axure http://www.axure.com/ IRise http://www.irise.com/ Omnigraffle http://www.omnigroup.com/applications/OmniGraffle/ Balsamic http://www.balsamiq.com/ Justproto http://www.justproto.com/en/ Mockup Screens http://mockupscreens.com/ Denim http://dub.washington.edu:2007/projects/denim/ Fluid IA http://www.fluidia.org/ Oversite http://taubler.com/oversite/ Microsoft Visio http://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 Library http://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ção Jeferson Jess Luis Felipe Fernandes Vinicius Krause