Wireframe workshop externo_001_b

WIREFRAME "Estrutura de Arame" (Fio) Metodologia de Desenvolvimento Equipe Webdesign CCE - 2010 UFPR

Wireframe Documento cada vez mais importante Conhecer / Trabalhar ferramentas aplicativos softwares p/ desenvolvimento de sites torna-se "fácil" e até mesmo "trivial"

Wireframe Contudo o " Diferencial dos bons desenvolvedores é: " associar tal conhecimento técnico a diversos conceitos design cores tipologia iconografia gerenciamento publicidade, etc...

Wireframe “ O primo pobre do layout é fundamental para o trabalho do arquiteto de informação, porque auxilia a equipe de desenvolvimento na tarefa de produzir o site de maneira mais rápida, padronizada e eficiente.” Leonardo Oliveira (leonardo.oliveira@ogilvy.com) gerente de operações OgilvyOne Brasil mestre em Jornalismo Digital pela ECA/USP

Wireframe 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

Wireframe Função de estruturar o conteúdo de cada página Indica o peso e relevância de cada elemento do layout Importância da relação com os demais elementos formadores do todo

Wireframe - Funções Indicar a correta marcação de textos, de navegação, guidelines de marca e até dos recursos de programação e tecnologia a serem utilizados pela equipe de produção Posteriormente serve como baliza para testes de usabilidade

Wireframe - Funções Além da função estrutural, o wireframe também é utilizado para marcação das etapas de um processo de interação entre usuário e sistema

Wireframe Como as etapas de uma compra online 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

Wireframe Documento superficial baixo detalhamento pouca influência no trabalho dos designers das demais equipes do projeto Traz apenas uma marcação de blocos de conteúdo

Wireframe - alto detalhamento Este modelo apresenta alto grau de detalhamento dos componentes da página e utiliza vários elementos gráficos para representá–la.

Wireframe - alto detalhamento 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.

Wireframe - alto detalhamento É 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.

Wireframe - Baixo Detalhamento

Wireframe - Alto Detalhamento

Wireframe - usabilidade Antes de qualquer coisa, devemos ter a consciência de que a análise da usabilidade não cabe ao arquiteto Por ser um procedimento adotado numa etapa posterior ao trabalho de arquitetura

Wireframe - usabilidade Faz-se 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

Wireframe - 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

Wireframe - identidade e marca É 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

Wireframe - riscos Não atender as expectativas dos clientes, empresas ou instituições, que estão longe dos conceitos mais básicos da Arquitetura da Informação, 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

Wireframe - riscos 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

Wireframe - 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.

Wireframe - vantagens 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.

Wireframe - Principais Softwares Pode-se 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: Mock Flow Pencil Project Gliffy iPlotz Axure

Wireframe - Principais Softwares Pencil Project

Wireframe - Principais Softwares iPlotz

Wireframe - Principais Softwares Gliffy

Wireframe - Principais Softwares Axure

Wireframe Com base na validação dos protótipos em papel pelos próprios usuários, foi feita a digitalização dos mesmos em formato wireframe

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

Wireframe O nome “wireframe” vem da junção de duas palavras em inglês: “wire” (linhas) e “frames” (telas) São telas de baixa resolução e com um aspecto gráfico muito pobre que servem apenas para indicar onde devem estar localizados os objetos e menus de interação Wireframe serve para mostrar a funcionalidade e não o aspecto gráfico de uma aplicação

Como desenhar um Wireframe no Pencil

Wireframe Em baixo temos o exemplo de uma tela em formato wireframe preto e branco

Wireframe Este projeto usa cores pois existem algumas mensagens de alerta importantes para os utilizadores. Eis 2 exemplos de telas: O tamanho das imagens foi diminuido de propósito pois trata-se de uma aplicação de um cliente e não convém mostrar muito… As imagens foram colocadas por motivos meramente demonstrativos de como pode ser desenvolvido um wireframe

Wireframe Como podem reparar, do lado direito existe uma coluna com informações sobre cada elemento do tela. Podem ver ainda as cores usadas para as mensagens de aviso e de alerta.

Wireframe - próximos passos Os próximos passos consistem numa validação das telas feita pelos usuários e pelo cliente Avançar para a fase de concepção e programação da aplicação

Wireframe - Estrutura Analítica do Conteúdo

Wireframe - Problematização

Wireframe - Exemplos (pelo mundo)

Referências Bibliográficas Microsoft Visio http://office.microsoft.com/en-us/FX010857981033.aspx OmniGraffle http://www.omnigroup.com/applications/omnigraffle/ Adobe Illustrator http://www.adobe.com/products/illustrator/main.html Adobe InDesign http://www.adobe.com/products/indesign/main.html Prototipagem em Papel: http://www.ivogomes.com/blog/prototipagem-em-papel/ Artigos sobre Wireframes: http://deyalexander.com/resources/wireframes.html Wireframes em XHTML: http://www.zeroseis.com.br/2005/11/wireframes-em-xhtml.html Diego Aguilera: Curso de Gestão da Informação / UFPR Wireframe: http://webinsider.uol.com.br/vernoticia.php?id=1995 Using Wireframes: http://www.strangesystems.com/archives/000005.php http://www.ivogomes.com/blog/prototipagem-em-papel/ http://office.microsoft.com/en-us/FX010857981033.aspx http://www.omnigroup.com/applications/omnigraffle/ http://www.adobe.com/products/illustrator/main.html http://www.adobe.com/products/indesign/main.html

Referências Bibliográficas http://www.zeroseis.com.br/2005/11/wireframes-em-XHTML.html http://www.ivogomes.com/blog/taxonomia-usar-os-termos-correctos/ http://deyalexander.com/resources/wireframes.html http://www.zeroseis.com.br/2005/11/wireframes-em-xhtml.html http://webinsider.uol.com.br/vernoticia.php?id=1995 http://www.strangesystems.com/archives/000005.php

Referências Bibliográficas Links: (Designers Premiados) http://www.time4ever.com/ http://www.derbauer.de/index2.html http://www.plat4m.com/experimental/images/atr02-lucidity-vitakit/ http://www.2advancedstudios.com/#portfolio/bydate/2003&id=31 SimpleFolio: http://www.smashingmagazine.com/2010/02/07/simplefolio-a-free-clean-portfolio-wordpress-theme/ http://mudanca.org.br/ http://www.ujs.org.br/portal/

Dúvidas ... Por hoje é só Pessoal...

Obrigado... Mauro H. Suzuki [email_address] Analista de TI CCE/Equipe Webdesign

Wireframe workshop externo_001_b

Mais conteúdo relacionado

Mais procurados (8)

Semelhante a Wireframe workshop externo_001_b (20)

Wireframe workshop externo_001_b