Usabilidoido: Menu Principal

English Website


Wireframes e rabiscos

Wireframes são os esqueletos dos websites, feitos pelos Arquitetos da Informação. Hoje, um artigo no Webinsider ativou minha rede hipertextual mental sobre o assunto.

Primeiro, vale à pena fazer. Na agência onde trabalho, estávamos com dificuldade de planejar a disposição do conteúdo num website 100% Flash. Resolvi fazer um esboço visual, bem tosco, mas indicando a forma grosseira da interface e onde cada conteúdo estaria. Não me custou mais que 1 hora. Na próxima reunião, os publicitários se sentiram muito mais à vontade para discutir o planejamento. Vale notar que eles não tinham grande experiência com Web, então não conseguiam imaginar as minhas propostas antes.

Segundo, me lembrei que o Sergio Carvalho da Sirius me disse uma vez que os wireframes que eles fazem não tem indicação de posicionamento dos elementos ao contrário do proposto pelo artigo no Webinsider. Tem apenas o peso relativo. Ele prefere assim, porque dá maior liberdade para o designer gráfico trabalhar.

Terceiro, me lembrei que quase todo designer gráfico que se preze faz um esboço no papel quando está discutindo com outras pessoas como vai ficar o projeto. É um wireframe informal. Não dá pra fazer testes com usuários com eles, muito menos mostrar para os clientes.

Quarto, Luli Radfarher mostrou um protótipo do novo portal da AOL que foi apresentado ao cliente para aprovação antes do design gráfico. Ele disse que isso ajuda muito para o cliente não ficar voltando atrás e mudar tudo no final do projeto. Concordo com ele, mas sonho com o dia em que vou poder apresentar algo tão abstrato para um cliente sem ele olhar torto.


Dicas

Siga-me no Twitter, Facebook, LinkedIn ou iTunes.

Autor

Frederick van Amstel - Quem? / Contato - 10/12/2003

Palavras-chave

wireframes    storyboard    esboço    arquitetura    planejamento    projeto    

Opções



Comentários

Discussão
Frederick van Amstel
11/12/03 às 02:05

Mas Cezinha, e quando isso frustra as espectativas do cliente, que espera um layout já bem adiantado? Afinal, a maioria deles acham que nosso trabalho é só desenhar, mesmo! Aqui na agência, meu patrão decidiu não mostrar isso para o cliente. É como chegar com um arquiteto chegar com a planta baixa do prédio. Quem não é da área não entende, é preciso fazer aquelas apresentações multimídias em 3D ou maquetes. Maquetes???... seriam os análogos aos protótipos funcionais?.. adoro analogias!


Discussão
cezinha
11/12/03 às 12:05

Legal. Faltava um artigo sobre isto.. Apesar de já usar no meu dia-a-dia. Eu usava outro nome ao invés de wireframe, storyboard (apesar de concordar que o termo tenha outro significado dentro de outros contextos).

Faço de forma simples, mais para ter uma visão dos elementos que irão compor a tela, nem sempre coloco a ordem de prioridade de visualização (hierarquia). De qquer forma, é legal poder ver o ponto de vista dos outros.

Depois de feito o wireframe é importante ter isso aprovado com o cliente, pois assim ele já tem uma idéia do processo de montagem do site e como vai ficar, ficando transparente para ele :)


Discussão
cezinha
13/12/03 às 06:04

Eu acho que é adequado apresentar. Claro que precisa deixar bem claro para o cliente que isto é como se fosse a planta baixa do prédio.

Quanto esperar um layout adiantado, já é problema de fechamento de contrato e apresentação de cronograma. Quando fecho um projeto (como freelancer), geralmente apresento na proposta o cronograma. Neste cronograma, já coloco o tempo para arquitetura de informação, incluindo a estruturação do site (quando já não vai com a proposta) e mais o wireframe.

Logo, quando o cliente fecha o contrato pra fazer o projeto já visualiza quando vai ver o layout e quanto tempo terá pra aprovar (se demorar, aumenta-se proporcionalmente o prazo para entrega..).

Senão o que pode acontecer é comprometer todo o processo (já que o cliente não sabe o que vai ter no fim) e aparecer coisas no meio / fim do caminho para ser inseridas por que o cliente não achou e/ou não sabia que dava pra por.

Coisas como uma área de notícias não prevista, uma animação, etc.. Pra isto que serve um planejamento. De que adianta chegar já com um layout pronto se ficou faltando tantas coisas no meio do caminho?

Acaba atrasando ainda mais a produção.. Pra não deixar de dizer que isso compromete todo o cronograma, junto com as horas extras e stress que poderia ser evitado devido a um melhor planejamento.

Na empresa onde trabalho, estamos começando a desenvolver sites (o foco até então era desenvolvimento de aplicações RIA), e como estou lá a pouco tempo, estou passando a metodologia que costumo usar nos meus freelances.

Claro que não dá pra aplicar a tudo, principalmente quando aparece aqueles projetos de um dia pra outro. Mas aí são excessões.. afinal se isso virar cotidiano, tá na hora de contratar mais gente, né.. (ou mudar de emprego pra fazer a coisa melhor..).

Precisamos educar os clientes para que eles aprendam a comprar do melhor e a ver que a profissão de designer não é apenas fazer "algo bonitinho".


Discussão
Fred
13/12/03 às 11:39

Puxa cezinha, você falando com todo esse profissionalismo cartesiano me deixa sem graça e com vontade de que as coisas funcionassem assim por aqui... Em mercados marginais como em que trabalho (Curitiba), não tem dessas coisas. Cronograma para cliente é sempre pra ontem, falar demais pode ser entendido como enrolação e planejar é coisa pra boiola.

Vai melhorar um dia, está melhorando. Mas não dá pra generalizar a realidade de Sampa pra todo o Brasil. Acredito que muitos dos meus leitores também enfrentam problemas parecidos.

PS: Muito, muito obrigado pelos preciosos comentários (tem mais conteúdo até que o próprio post - por isso gosto de blogs)!


Discussão
cezinha
16/12/03 às 11:17

Fred,

Eu sei que tudo isso que eu falei não é realidade para todos, por isso tenho tentado passar um pouco do que sei pra poder melhorar.

É um trabalho de "formiguinha" um pouco aqui, um pouco ali, quem sabe um dia a gente chega lá :)


Discussão
Robson
09/07/04 às 22:56

Concordo com o Fred sobre a realidade do mercado, mas acho fundamental, mesmo que o cliente não exija, ir moldando uma forma de trabalho - proposta bem alaborada, wireframe e outras ações que torne seu trabalho mais consistente e não fique dependendo somente do resultado que vc vai apresentar no final, mesmo que este seja o mais importante.


Discussão
raimundo
10/07/04 às 14:07

estou aqui só captando a sabedoria de vocês.Sou iniciante, começando do zero mesmo, e é bom ficar lendo o que vocês têm para dizer.
Raimundo.


Discussão
Leidi
31/12/05 às 00:31

Dúvida: aplicam-se os conceitos de Arquitetura de Informação e wireframe para o desenvolvimento de aplicações desktop?


Discussão
Fred
31/12/05 às 11:00

Com certeza, Leidi! Porém, no desenvolvimento de softwares, o equivalente do arquiteto da informação é o designer de interação. A diferença é pequena, mas é relevante. Enquanto o primeiro lida principalmente com a estrutura de acesso à informação, o outro lida com a estrutura de modificação de informações.

Os designers de interação também constróem wireframes, mas eles preferem chamar de storyboard, protótipo, etc.


Discussão
Julio Siqueira
07/02/06 às 11:21

Então, por um acaso também estou fazendo uma experiência com esse método aqui em Goiânia. Criei wireframes p/ home e internas. Agora vamos esperar até o fim de semana para conferir o resultado e discutir o que rolou.


Discussão
andre
07/02/06 às 15:43

e legal isso!!! + ainda tem muita gente que n entendii! aih jah viu neh.

:]


Discussão
Silvo A.Fragoso
19/03/06 às 19:00

Estou iniciando no desenho com cad, preciso fazer objetos em 3D, mas antes eu tenho que utilizar recursos de WireFrama, como funciona.


Discussão
Silvo A.Fragoso
19/03/06 às 19:03

foi mal "WereFrame". desculpe-me


Discussão
Vilhena
29/04/06 às 19:29

Seria muito interessante e de crescimento pra todos se pudessem disponibilizar modelos de wireframe e comentários sobre a forma de apresentação.

Eu por exemplo costumo montar em power point uma apresentação do site totalmente em wireframe com navegação mostrando o posicionamento dos elementos em cada seção do site.


Discussão
Tiago Pimentel
18/02/09 às 10:02

Na agência costumamos montar um power point mostrando primeiramente o wireframe e as vezes antes disso um diagrama com os casos de uso, mostrando a navegação do usuário pelo site. Isso serve para exemplificar casos em que um determinado tipo de usuário segue para uma área que precisa de login e senha e outro usuário segue para um outro tipo de experiência. Por último incluímos algumas imagens do que deve ser a home e uma interna. Não costumamos investir mais do que 2, 3 dias neste processo. Como comentou Frederick van Amstel, percebemos que apenas o wireframe pode frustrar um pouco clientes com menos vivência em internet. (leia pequenos clientes)


Discussão
Reinaldo Deprera
26/08/10 às 01:52

Isso que da designer fazer site. Wireframes vira Power Point ou rabisco no Flash ou Photoshop.

UML, Tableless, Normalização da Formatação HTML e CSS, Design Paterns e entre outras coisas simplesmente não existem.

Dou meu parabens para vocês designers que não sabem de nada disso e ainda assim entregam um site para empresas. Vocês contribuem bastante para a péssima qualidade dos sites feitas no pais.


Discussão
Reler
29/04/15 às 15:52

Interessante. Porém fazer websites 100% em flash não é mais recomendado devido aos problemas de indexação.




Comente.






(aguarde que é demorado mesmo...)


Você merece.

Assine nosso conteúdo e receba novidades sem sair de casa!

Atualizado com o Movable Type.

Alguns direitos reservados por Frederick van Amstel.

Apresentação do autor | Consultoria | Portifólio | Política de Privacidade | Contato