Pular links da navegação e ir direto para o conteúdo

Publicado em 3 de Jun de 2007 às 17:38

Como fazer Wireframe? No Flash!

Fiquei responsável por fazer o wireframe de um trabalho da faculdade e como não estava conseguindo instalar o Microsoft Visio, na sexta-feira pesquisei rapidamente por alternativas de softwares para Windows, mas nada satisfatório. Fui tentando com o que tinha instalado. O Illustrator, Photoshop, Fireworks, até o Impress (PowerPoint do OpenOffice) e nenhum era tão bom no processo quanto o Visio até que num ato desesperado pensei no programa vetorial que sobrara na máquina: Macromedia Flash 8. Surpreendentemente ele se mostrou ainda melhor que o produto da Microsoft e a partir daquela sexta já virou o meu software oficial para produzir wireframes de projetos. Deixe-me explicar melhor antes que me chamem de maluco ou bêbado…

Porque o Flash é ideal para wireframes

Flash Components UI

Components UI: a biblioteca de componentes prontos para User Iterface que já vem com o programa é bem completa, tem até player de vídeo e áudio. Não fica devendo em nada as bibliotecas de componentes do Visio e dá para achar mais no Adobe Exchange.

Ferramentas vetoriais e Alinhamentos: o Flash possui uma flexibilidade de dar inveja a qualquer Illustrator na hora de trabalhar com vetor. Como para um Wireframe só precisamos de formas básicas, o trabalho flui muito bem usando agrupamentos e mesmo se precisar de formas mais específicas ele continua fazendo um belo trabalho. Outra vantagem são as linhas virtuais que ele mostra quando movemos algum elemento pelo Stage que auxiliam muito no alinhamento correto.

Interface: o Flash tem a vantagem da interface familiar. Acho que todos os desenvolvedores de projetos web já usaram ou usam o Flash. Se nunca precisaram pelo menos devem ter utilizado algum outro programa da Macromedia/Adobe e já estão bem acostumados com suas interfaces.

Timeline e layers: o assunto não é animação, mas se o desenvolvedor gostar de wireframes navegáveis trabalhando com a timeline do Flash é possível criá-los com considerável facilidade. Você pode facilmente linkar frames como se fossem as páginas e trabalhando com layers é possível deixar topo e navegação em uma camada isolada e trabalhar normalmente no conteúdo mutável em outras camadas e frames. Navegação do tipo “próxima” e “anterior” são ainda mais simples de fazer no programa.

Multimídia: se o arquiteto da informação tiver boa oratória e escolher por integrar uma pequena narração descritiva a cada página, todos sabemos que o Flash é muito bom para trabalhar tanto com áudio quanto com vídeo.

Limitações

Underline, texto sublinhado: uma das coisas que mais achei estranho no processo foi que queria usar texto sublinhado de cor azul para os links, mas não consegui achar a opção de texto no Flash. A solução seria usar o CSS e/ou Action Script. Eu preferi ficar apenas com o texto azul. :)

Stage: se o Stage é ótimo para alinhamento de elementos ele peca por ter a limitação de precisar de uma altura fixa máxima. Se apenas uma página tem muito conteúdo e é muito alta o SWF final vai ter que ser do tamanho dela gerando rolagem vertical no browser mesmo que nos outros quadros tenhamos uma página com pouco conteúdo. Mas isso não chega a ser um grande problema.

Me surpreendi por não ter pensado em usar o programa para isso antes, porém outros já tinham pensado e eu realmente não sabia que era tão bom.

Links

Você é Desenvolvedor ou Designer?
Leia o blog do VTEX Lab, núcleo de inovação para ecommerce da VTEX. Também escrevo por lá. :)

  • Monik

    Rodrigo muito legal a dica! : )
    Em tempos de padrões web e tudo o mais, a maioria dos designers e programadores tem se distanciado do flash.
    Interessante os prós que vc deu, e confesso que o flash nunca havia passado pela minha mente quando precisei construir wireframes…
    Dica anotada!

    Abraços!

  • Cynara

    Eitah poxa, esse é meu amigo! E eu ia me orgulhar de tu mesmo se tu fosse menos nerd! rsrsrs
    hauhauhau
    cara toda vez que eu procuro o teu nome na net eu descubro uma coisa nova, tipo, “revolucionária”hauhau, e melhor, aprendo também, tua amiga aqui ta se f… na facul p aprender…
    PS. quando eu crescer quero ser igual a tu!

    MORRENDO DE SAUDADESSSSSS!

  • Blergh… só para abrir o Flash já perdeu a graça. Sou mais o Axure, que tem quase tudo isso que você falou aí.

  • Jan Cássio

    Hahaha Olha soh o nosso amigo Rodrigo se entregando ao Flash (agora falta só o blog em swf hein?) >=)

    Pô cara, acho que vc teria menos trabalho se tivesse feito no formato slide presentation porque dispensaria o uso de timeline. Mais ficou bom!

    Interessante seria turbinar o flash com uns jsfl para esse tipo de necessidade. Talvez você encontre algo no excharge ou googlando.

    Desculpa ai pelo sumiço, mais o trabalho ta me sugando!

    []’s Brother

  • @Jan
    Sabia que você ia tirar uma com a minha cara…

    Mas nunca falei mal do Flash em vão, não. Ele é mal aplicado e ponto.

    O Flash é bom em multimedia? É. Para e-learning? Sim. Para Wireframes? Também. Mas nada de turbinar meus wireframes com nada não, assim simples ta bom demais hehehe…
    O Walmar sim está com preconceito com o coitado do Flashinho.
    LOL

  • Morro de inveja da sua sapiência.
    Hj me fudi p fazer um carbonmade. Pode rir.
    Heuheue bj!

  • Opa, então o Axure é um excelente programa, tem agora também o Fireworks CS3 que tem opção de criar símbolos, pages, etc…

    []s

  • Procurando, por acaso, no Google sobre programas para montar wireframe achei essa ótima dica.

    Vou começar agora mesmo meu wire no Flash. :)

    Abraços

  • Pingback: » PI - O Projeto Interdisciplinar de Web » Rodrigo Muniz ()

  • Pingback: Wireframe « ahul beta ()

  • Caramba, olha que engraçado. Fiz esse comentário acima há mais de 1 ano. Hoje voltei aqui através do Google novamente e posso afirmar que você estava certo!

    Fiz um wireframe recentemente, muito bem elaborado visualmente com ajuda do InDesign (para montar o documento) e o Illustrator para desenhar as telas. O resultado e praticidade ficaram foram bons, mas o cliente virou e disse, quero os wireframes navegáveis.

    Até posso fazer um PDF navegável, mas não é o mesmo que fazer com o Flash.

    Mais uma vez obrigado! hehehe

  • Olá, bem o post é meio antigo e talvez você já tenha descoberto como fazer mas para colocar sublinhado é por código e bem fácil:

    var formatSublinhado:TextFormat = new TextFormat();
    formatSublinhado.underline = true;
    CampoAserFormatado.setTextFormat( formatSublinhado );

Sobre

Nascido em 1984 é Desenvolvedor Web autodidata desde 2002. Hoje especialista em Design da Informação pela UFPE é Designer na equipe de UX no VTEX Lab (núcleo de inovação para ecommerce), da VTEX.

Saiba mais