Usabilidoido: Menu Principal

English Website


Como fazer wireframes de interfaces

video_wireframes.jpg

Este screencast captura o momento em que estava fazendo o primeiro wireframe (esboço estrutural de interface) para a versão Seurat deste blog. Enquanto vou construindo o wireframe, vou comentando o que se passa pela minha cabeça, ou seja, o raciocínio das decisões de design. Hoje em dia, já me acostumei com o Visio e só uso o Flash no caso de precisar de protótipos funcionais.

Como fazer wireframes de interfaces [MOV] Quicktime 7 - codec H.264 - 26 minutos - 57mb


Dicas

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

Autor

Frederick van Amstel - Quem? / Contato - 06/03/2007

Palavras-chave

wireframe    estrutura    prototipação    

Opções



Comentários

Discussão
Diego
06/03/07 às 13:06

Não! .MOV não....

WMV ou AVI, please! ;)


Discussão

06/03/07 às 14:51

Ué? Mov não pq?


Discussão
Frederick van Amstel
06/03/07 às 15:01

Em AVI, o vídeo ficou muito mais pesado e com menor qualidade. Mov foi o melhor dos que testei. Se não tem o Quicktime, dê um jeito que pretendo postar outros no mesmo formato nos px dias.


Discussão
Raphael Nikson
06/03/07 às 16:14

Flash video garoto!! Owwwwww!!


Discussão
Frederick van Amstel
06/03/07 às 21:30

Descartei FLV porque ver um vídeo desses no navegador é muito ruim: demoraria demais pra carregar, poderia falhar a conexão e recomeçar. Além disso quem quizesse o download não poderia tocar depois pois não é comum ter players de .FLV instalados na máquina.


Discussão
H*
07/03/07 às 09:25

Não é comum?
Essa matéria á para usuários de que nível?
Quase todo mundo da área que conheço usa o VLC (super player que toca qualquer coisa sem qualquer necessidade de codecs e nem de instalação. copiou rodou. )
Aqui na agência, mais da metade tem uma cópia nas máquina E, no pendrive.


Discussão
Henrique
07/03/07 às 09:44

cara... eu e mais dois amigos tentamos abrir o vídeo e sempre da pau de codec dentro do quicktime...


Discussão
Frederick van Amstel
07/03/07 às 10:05

O codec é H.264, que vem incluso na versão 7 do Quicktime.


Discussão
Eduardo Loureiro
07/03/07 às 11:25

Caraca discusão sobre o tema do post que é bom nada, formato de vídeo é o de menos. Então, lá vai. Gostei da aula cara, mas achei um tanto quanto superficial. Falo isso porque a construção de um wireframe esta diretamente ligada a arquitetura de informação, levando em conta a distribuição de conteúdos e elementos de acordo com a organização da informação, que é um passo anterior ao wireframe. O que senti falta foi dessa metodologia mais focada no trabalho de AI, que por sua vez é focada no usuário. Entendo que vc só quis dar um exemplo mesmo, com um projeto pessoal, então vc podia postar depois um projeto comercial que possa ser divulgado e que tenha todo esse rigor em sua produção?


Discussão
Frederick van Amstel
07/03/07 às 14:36

O problema é que esse vídeo está publicado com quase dois anos de atraso... Se tivesse saído na época em que estava fazendo o redesign, você teria percebido a ligação das decisões com o processo mais abrangente. Na época, escrevi vários posts sobre o processo de redesign do Usabilidoido e os leitores participaram ativamente. Se tiver interesse, sugiro começar pelo link que postei acima:

http://usabilidoido.com.br/redesign_do_usabilidoido_versao_seurat.html

Uma abordagem mais completa sobre wireframes é dada nesse livro:
http://www.usabilidoido.com.br/communicating_design.html


Discussão
Guilherme Rambo
07/03/07 às 16:26

Achei bacana o vídeo, quem usa Linux aí pode ver no mplayer tranquilamente


Discussão
Rogério Pereira
08/03/07 às 11:24

Gosto muito desse tipo de material, mas seria interessante também fazer um que aborde os conceitos de arquitetura e uma metodologia mais focada para que os profissionais que estão entrando no mercado tenha um embasamento por onde começar.


Discussão
Junior
09/03/07 às 20:47

O proprio visio exporta em html e fica funcional...


Discussão
Michael
11/03/07 às 14:44

Qual é o software gerenciador de conteúdos que você usa? Movible type?


Discussão
tigo
13/03/07 às 00:31

Fred,
fique bem mais tranqüilo depois de ver o vídeo... pensei que só eu neste plateninha usasse o flash para montar layout de sites.
Valeu bro =]


Discussão
Jeferson Silveira
18/03/07 às 01:40

Fred, muito bacana. Eu uso o Fireworks pra desenhar os wire's, mas gostei da idéia de utilizar o flash, pois é possível criar a navegação, ou seja, lincar cada menu em um frame por exemplo.

Não sei se sairia do conceito de wireframe, mas...

Bom, vou indo lá. Abraço!


Discussão
camilo
20/03/07 às 14:17

gostei muito, da uma idéia beem legal de como funciona o processo de criação de wireframes... aqui na minha cidade, por ser interior não usamos muito esses métodos com certeza melhores. Muito útil o vídeo

abraço


Discussão
Adriano Melgaço
26/06/07 às 18:38

Boa tarde,
Quais são os programas que posso construir wireframes?

Existem opensource ou freeware?


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

Adriano, recentemente achei uma ferramenta on-line chamada Lovely Charts que serve para criação de wireframes, sitemaps, organogramas, fluxogramas e diagramas de rede. É free e on-line.

Publiquei no meu blog uma matéria a respeito:
http://www.designinabox.nu/ferramentas/lovely-charts-tudo-o-que-voce-precisa-para-criar-organogramas-wireframesetc/


Discussão
Paulo
27/03/09 às 14:12

Ah não... mov nem vou ver.


Discussão
Gabriel Lira
11/07/10 às 21:23

Axure RP wins!
prototipagem navegável rápida, e ainda gera a página
em HTML. Não é gratuito, mas pra WFs é o melhor (minha opniã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