A importância dos Wireframes

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.

  • Free Sketching & Wireframing Kit: pacote de elementos em vários formatos (AI, SVG, PDF e EPS)

  • 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! 😀

Share

A importância dos Wireframes

Discussion

9 Responses

  1. Kallew says

    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!

    1. Danyllo Franco says

      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!

  2. Roberta says

    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!

  3. 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 !

    1. Danyllo Franco says

      Olá Guilherme,

      Exatamente. Essa organização das ideias é importantíssima e evita retrabalhos.
      Obrigado pela participação.

      Um abraço! 😀

  4. best 2011 motherboard says

    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.

Leave A Reply

Your email address will not be published. Required fields are marked *