Wireframes, rabiscando

Bom dia,

Ontem falamos sobre os wireframes, os mesmos foram explicados, mostrado as suas importancias de uso de cores ou não. Apresentação ao cliente, e outras coisas mais, ;).

Agora que ja sabemos o uso, seu uso e teoria, hora de realmente faze-los. Vamos as ferramentas?

Temos Opções de softwares especificos para criar, porem pode ser feito em qualquer software grafico como o Adobe Fireworks (meu caso). Pois vamos desenhar quadrados, bolinhas, e setinhas. O que ele ja possui nativamente, veja:

rabisco wireframes

Isso pode ser encontrado em:

Assets.

Existem outros Softwares para fazer o mesmo trabalho, até on-lines.

Existe um site chamado Gliffy, onde é feito online, necessita de um cadastro e outras coisas, confira: http://www.gliffy.com/gliffy/.

Eu pessoalmente nunca o utilizei, considero que até mesmo o papel seja melhor antes de ir para a frente do computador.

A microsoft possui um software chamado Visio, o mesmo se destina a diagramas, wireframes e outras coisas relacionadas a projetos, mapas, etc, confira: http://office.microsoft.com/en-us/FX010857981033.aspx

Também nunca o utilizei, mas quem usa, geralmente recomenda e não quer trocar. O unico empecilho de usa-lo é comprar a licensa, caso ja tenha tudo original é mais uma coisa a ser comprada.

Outro interresante é o OmniGraffle ( http://www.omnigroup.com/applications/omnigraffle/ ), no qual possui alem do software para criar os wireframes, outras soluções.

Já temos as ferramentas, e agora, como começar um wireframe? Quais o passos e processos?

Ja discutimos o assunto introdutóriamente, como cores, força de atenção etc.

Como começar realmente depende de cada um, mas eu uso um conceito próprio, mais lógico, porém não sei se ele ja foi pensado e escrito por outras pessoas, ai vai o conceito:

Onde tudo começa:

home

Para onde vai:

para onde vai

Porque vai:

porque.jpg

Quando termina:

final.

Seguindo esses conceitos de interação básicos, você estipula um wireframe por exemplo de uma loja, pedidos de orçamentos, compra ou reserva de algum produto ou serviço. Ou Até mesmo detalhamentos sobre o produto, etc.

As formas de tirar dúvidas e entrar em contato é importante para manter a segurança durante os processos, e realmente ajudar e manter sempre um contato / suporte / pós venda com seu cliente ou visitante.

Esses conceitos podem ser vistos e conhecidos como Submarino, Mercado Livre, entre outros. Até mesmo onde é apenas mostrado algum produto.

Para portais etc, esse conceito mudaria, é preciso ter a ideia do material a ser apresentado.

É isso, qualquer dúvida só comentar.

O próximo post é apresentar os wireframes com e sem cores para distinguir as atenções em todos os processos dos conceitos já apresentados acima.

Postado em: Pesquisas, Desenvolvimento web, Computadores e internet

1 Response

  1. Filipe Says:

    Bom artigo João,

    projetar antes de colocar a mão na massa não é algo que todos os profissionais da área fazem. Mas isso é muito importante, posso até dizer que é a parte mais importante e difícil.
    Depois de tudo projetado tornar REAL é muito simples.

    Abraços,

    Posted on Fevereiro 9th, 2008 at 8:21 pm

Leave a Reply