Desenvolvimento com Wireframe
Um wireframe poderia ser nada mais do que um esboço numa folha de papel. Outros “wireframes” são criados digitalmente e são realmente mais como protótipos, com objetos clicáveis e toda a interatividade prevista. O tipo de wireframe que será criado vai depender do que o projeto demanda. Projetos mais complicados provavelmente requerem wireframes mais elaborados, enquanto sites simples pode ter wireframes simples.
Uma vez que um wireframe básico é criado, você pode enviá-lo para outros membros da equipe para análise ou colocá-lo um pouco de lado por 1 ou 2 dias para analisar novamente. Quando estiver satisfeito, é hora de mostrá-lo ao cliente ou, caso não seja o caso de haver um cliente, começar a trabalhar em modelos baseados no wireframe.
Disposição dos Elementos> Desenvolver Wireframe> Feedback> Revisão
Ferramentas para criar wireframes
As ferramentas que você vai usar vão depender de preferência pessoal e dos requisitos do projeto. Não há “melhor” ferramenta para fazer wireframes, mas sim aquela na qual você se sente melhor usando e que funciona melhor para você.
Papel e caneta
Você pode querer usar um lápis para o seu esboço inicial, para que você possa apagar as coisas sem ter que começar de novo. Então, a medida que for finalizando os elementos, pode passar caneta por cima para evitar apagar o que não precisa mais ser apagado.
Programas para Criação de Wireframes
Existem diversos programas para criar wireframes disponíveis no mercado. Alguns são pagos, outros de graça, outros mais completos e alguns nem tanto; mas todos com o objetivo de ajudar na criação de wireframes para facilitar e agilizar o processo de desenvolvimento web.
1. WireFrame
Esse wireframe é simples e você pode esboçar na primeira tela sem necessidade de login 😉
2. Mockflow
Você pode esboçar 1 projeto por vez, mas pode compartilhar com outros usuários ao mesmo tempo.
3. HotGloo
Outra ferramenta para criação de wireframes que com suporte a colaboração em tempo real.
Foco na prototipagem e colaboração, os membros da equipe podem rever o trabalho e fornecer feedback em tempo útil, ideias e sugestões em wireframes clicáveis ou conteúdo criativo.
Modelos para Wireframes
Usar modelos (templates) para criar seus wireframes pode acelerar bastante o processo, especialmente se você optar por usar caneta e papel ou programas que são capazer de cumprir este propósito (como o Adobe Illustrator). Veja alguns bons modelos, kits e elementos de interface gratuitos para serem usados na elaboração de wireframes:
- Free Web UI Wireframe Kit. Fuel You Interface oferece, neste kit, diversos elementos para wireframes, tais como botões, breadcrumbs, caixas de diálogo, campos de busca e mais.
- Yahoo! Developer Network Design Stencils. Conhecidíssimo set de UI da Yahoo! para o desenvolvimento de wireframes. Eles disponibilizam os modelos para vários programas como OmniGraffle, Visio, Illustrator e Photoshop.
- Free Sketching & Wireframing Kit. Conjunto de elementos para wireframe disponível em vários formatos de arquivo: Adobe Illustrator, SVG, PDF e EPS.
- Sqetch. Kit para Illustrator que inclui modelos e elementos, incluindo para iPad, elementos GUI e elementos de formulário.
- Dragnet Kit for Fireworks. Kit para Adobe Fireworks que inclui uma variedade de elementos da interface como botões, menus, combobox e abas.
Insipire-se
- I ♥ Wireframes Flickr Group. Milhares de wireframes para se ver e milhares de membros cadastrados colocando novos conteúdos com frequência.
- I ♥ Wireframes Tumblr. Excelente lugar para se ver muitos wireframes e se inspirar (é associado ao grupo do Flickr acima).
- Wireframe Showcase. Site que apresenta um “antes e depois”, mostrando wireframes com seus respectivos projetos finais. Excelente!
- Wireframes Magazine. Cobre todas as coisas relacionadas a wireframe, incluindo toneladas de stencils e modelos, bem como exemplos para inspiração.
No comment yet, add your voice below!