Wireframes são um dos elementos mais importantes em um projeto web e que muitas vezes é dispensado, mas não deveria.
Desenvolver wireframes é, com certeza, um processo necessário por ser simples, fácil e barato, além de serem revistos, adaptados ou simplesmente refeitos com muita rapidez.
Entenda que o foco será, primeiramente, na distribuição dos elementos gerais mais comuns nas páginas web: cabeçalhos, rodapé, barras laterais, área reservada para conteúdo, busca, vídeo, etc. É isso mesmo, esqueça todo o seu talento como web designer neste momento.
Outro benefício é quando você está se comunicando com o cliente, pois a apresentação de suas ideias pode se tornar muito mais fácil de ser compreendida.
Como criar um wireframe
Cada um tem a sua preferência. Muitos gostam do velho lápis e papel pela facilidade e liberdade na hora de se expressar.
Se o projeto envolver outros designers, programadores e sua intenção é mostrar ao cliente, é importante trabalhá-lo para que fique bem apresentável. Imagina você chegando com seu sketchbook todo rabiscado e dizendo que pensou “naquilo” como proposta para o site da empresa…rs 😛
Atualmente existem inúmeros templates para programas, como o Illustrator e Photoshop, que podem acelerar o processo de desenvolvimento:
-
- Free Web UI Wireframe Kit: aqui você encontrará uma variedade de elementos como botões, caixas de diálogos, campos de busca, etc.
- Sqetch: kit para o Illustrator que inclui modelos e elementos como iPad, elementos GUI e de formulário.
Se você conhece outras formas ou aplicativos que facilitem a construção de wireframes, compartilhe conosco. Deixe seu comentário logo abaixo.
Um abraço! 😀
Agata Yamashiro
Danyllo Franco
Nicolas Yamashiro
Bruna Dener
9 comments
Opa! Ótimas dicas. Só fiquei sentindo falta de um aprofundamento maior no assunto!
Mas valeu!
Ps.: Comecei a companhar o blog recentemente e estou curtindo bastante! Parabéns!
Olá Kallew!
Legal! Podemos pensar em uma continuação para o post.
Nesse resolvi ser mais objetivo abordando os conceitos principais.
Que bom que curtiu! 😀
Continue acompanhando e participando do Des1gn’On.
Um abraço!
Oi Danyllo! Post muito bacana!
Duas dicas: o POP – Prototyping on Paper, app disponível somente para Iphone, que permite que você faça o seu protótipo/wire no papel, fotografe e simule as interações. Já o tumblr I <3 wireframes é uma ótima pedida para referências!
Oi Roberta,
Super dica!
Obrigado pela sugestão! 😀
Boa tarde pessoal, primeiramente parabéns pelo conteúdo ! Pois bem, acho essencial a criação do wireframe, toda vez que fecho com um cliente, fica indispensável a elaboração dele, em função de me ajudar a esclarecer a idéia e o conceito de cada site. Pessoal que ainda não usa essa procedimento, teste uma vez quando elaborar um site, todo o processo restante ficará mais rápido e esclarecido.
Obrigado !
Olá Guilherme,
Exatamente. Essa organização das ideias é importantíssima e evita retrabalhos.
Obrigado pela participação.
Um abraço! 😀
Tem uma ferramenta muito funcional também que transforma sites em wireframe:
http://www.wirify.com
Boa Caixeta!
Valeu pela participação.
UM abraço! 😀
Good day! I just want to give a huge thumbs up for the good information you have got right here on this post.
I will probably be coming back to your weblog for extra soon.