ARQI Arquitetura de Informação Curso Superior de Tecnologia em Design Gráfico Prototipação, layout e wireframe Conserva o modelo das sãs palavras que de mim tens ouvido, na fé e no amor que há em Cristo Jesus. 2 Timóteo 1:13
Contatos Prototipação, layout e wireframe Carlos José carlosjose.unibratec@gmail.com www.carlosjose.net @carlosjoser2n
Agenda Prototipação Layout/template Wireframe
Prototipação Quando usar? Cliente com objetivos gerais sem detalhes; Interação homem-máquina pode não ser aceita pelo cliente.
Prototipação O que gerar com o protótipo? Navegação de telas; Subconjunto de funcionalidade existente no sistema; Toda a funcionalidade existente que será melhorada em um novo esforço de desenvolvimento. Fonte: http://pt.wikipedia.org/wiki/prototipação
Prototipação Num sentido mais amplo, pode-se considerar a prototipação em papel como um método de brainstorming, projeto, criação, teste e comunicação de interfaces gráficas com usuários. (LEVI, 2005)
Prototipação A prototipagem em papel é uma maneira fácil e rápida de criar esboços de páginas que podem ser usadas para fazer testes. (GOMES, 2005)
Prototipação
Prototipação
Prototipação
Prototipação
Prototipação Snynder (2003) lista os benefícios da prototipação em papel: 1 fornece feedback substancial dos usuários nas primeiras etapas do processo de desenvolvimento, ou seja, antes que esforços de implementação sejam investidos;
Prototipação Snynder (2003) lista os benefícios da prototipação em papel: 2 promove um rápido desenvolvimento iterativo, experimentando-se várias ideias; 3 facilita a comunicação dentro do time de desenvolvimento, bem como entre este e seus clientes;
Prototipação Snynder (2003) lista os benefícios da prototipação em papel: 4 não requer habilidade técnicas, permitindo que mesmo um time multidisciplinar trabalhe juntos; 5 é uma técnica de baixíssimo custo; 6 encoraja criatividade no processo de desenvolvimento do produto.
Layout O layout tem um papel fundamental nessa fase em que o usuário vai reagir ao design aplicado, faz-se necessário poder representar de forma gráfica as páginas e suas variações com o sistema de navegação.
Layout No processo de criar um leiaute, existem três áreas principais: Determinar os caminhos de navegação Projetar uma lógica visual Criar templates de páginas
Layout Balanceamento Fazendo um balanceamento assimétrico, separando uma parte do layout para as informações mais importantes, por exemplo: Layout de navegação focar nas opções de navegação (75% navegação e 25% conteúdo). Layout de conteúdo focar no conteúdo (75% conteúdo e 25% navegação). Layout com funcionalidades focar nas funcionalidades (50% funcionalidade, 30% conteúdo e 20% navegação).
Layout navegação
Layout conteúdo
Prototipação, layout e wireframe Layout funcionalidade
Template É um documento sem conteúdo, apenas com a apresentação visual (somente cabeçalhos, por exemplo) e instruções sobre onde e qual tipo de conteúdo deve entrar a cada parcela da apresentação por exemplo, conteúdos que podem aparecer no início e conteúdos que só podem aparecer no final. Fonte: https://pt.wikipedia.org/wiki/web_template
Template Importante! Criaremos módulos que se encaixem nos templates, ou seja, definimos um template central e para as partes que vão variar criamos módulos que se encaixem perfeitamente nesse template, assim estaremos modularizando o layout.
Template
Template Regras de navegação 1 Mostrar os módulos de navegação definir todas as possíveis variações que podem aparecer em uma página com indicações de quais módulos são de uso obrigatório e quais não são.
Template Regras de navegação 2 Posição dos mecanismos de navegação normalmente estes módulos possuem um posicionamento fixo, caso um determinado módulo que se relaciona com o módulo de navegação não seja utilizado em um determinado momento, faz-se necessário um novo ajuste no módulo de navegação.
Template Regras de navegação 3 Limites levar em conta os limites da parte superior e inferior do template. Por exemplo, limitamos a quantidade de 10 post s em um blog ou o resultado de uma busca por um determinado produto e aplicamos o sistema de navegação paginação.
wireframe É um desenho básico de uma interface. Este desenho, no entanto, deve retratar toda a arquitetura de informação do sistema desejada pelo cliente. No entanto, este desenho deve ser muito simples e resumido, informando apenas o que for estritamente necessário. um esqueleto do site, que deve ser feito antes de iniciar a montagem do layout final com cores e imagens. Fonte: http://pt.wikipedia.org/wiki/website_wireframe
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
Prototipação, layout e wireframe wireframe
Prototipação, layout e wireframe wireframe
Prototipação, layout e wireframe wireframe
wireframe
wireframe
wireframe
Prototipação, layout e wireframe wireframe
wireframe http://webdemo.balsamiq.com/
wireframe http://www.jankoatwarpspeed.com/post/2009/12/24/sketching-wireframingkit.aspx http://keynotekungfu.com/ http://speckyboy.com/2010/07/21/20-free-web-ui-element-kits-and-stencils/ http://www.smashingmagazine.com/2010/0/27/free-wireframing-kits-ui-designkits-pdfs-and-resources/ http://graffletopia.com/stencils/57 http://graffletopia.com/stencils/35 http://www.teehanlax.com/blog/iphone-gui-psd-v4/ http://www.smashingmagazine.com/200/11/26/iphone-psd-vector-kit/ http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-uimockups/ http://www.rawapps.com/49/ipad-gui-kit-in-psd-format-is-here/ http://iconlibrary.iconshock.com/icons/ipad-vector-gui-elements-tabs-buttonsmenus-icons/
Dúvidas?