O que e como criar Wireframe de forma fcil Antes de comear a falar de aplicativos online ou instalveis para criao de Wireframes,

, deixeme explicar do que estou falando. Um Wireframe, explicando-se de forma simplificada, um diagrama de como ser um site ou pgina de Internet, podendo ser feito at mesmo fora do computador, em papel, pois a funo do do mesmo passar as informaes do briefing para uma estrutura de como ser o site a ser produzido.

Normalmente se tem como base alguns requisitos como a navegao, usabilidade e interao que sero adicionadas e, ao construir o Wireframe, evita-se o uso de cores e imagens reais, utilizando-se somente textos e blocos para representar os espaos de imagens e tipos de contedo. Quanto mais detalhada a informao do Wireframe, melhor ele ser interpretado pelo designer que ir criar e tambm servir de guia para os programadores saberem o posicionamento correto dos objetos. Se voc nunca fez um Wireframe na hora de desenvolver um site, ento muito provavelmente voc criou um layout sem saber o que fazer ou comprou um layout pronto, mas quando falamos de sites profissionais, falamos tambm da arquitetura do site. No basta saber usar o Photoshop ou Illustrator se voc um Web Designer dever saber planejar o que ser feito e como ser feito, desde um simples wireframe (esboo) em papel at os formatos digitais e mais apresentveis. Abaixo segue uma lista de sites que oferecem servios para criar os Wireframes ou mesmo comprar os aplicativos para fazer esta parte to importante no desenvolvimento de sites, o planejamento da navegao e criao: The Pensil Project ele um sistema OpenSource para criar as telas e prototipagem de forma fcil, permite documentos com mltiplas pginas e com fundos de pgina, permite estilos de textos ricos em estilos, suporta PNG, permite que voc defina pr-estilos, padronizao na hora de desenhar com alinhamentos, z-ordering, escala e rotao funciona no Linux, Windows XP e Windows Vista, o que facilita bastante pois mesmo que voc tenha Mac poder instalar com base no unix do sistema. Com foco maior em fazer Flowcharts, o Gliffy roda pela Internet e permite uma integrao com o sistema chamado JIRA, mas a sada dos wireframes dele feito em JPG, GIF, PNG ou SVG, parece ser bem simples este sistema, pelas telas que so exibidas nos exemplos de desenvolvimento. Para usar o Gliffy pela Internet ele grtis, agora se voc desejar usar os plugins para alguns sistemas ele tem um custo por licenas. claro que tudo ir depender de sua necessidade, o Gliffy tem maiores detalhes para quem quer fazer uma planta de casa ou apartamento, desenhos para redes de computadores ou fluxogramas. Agora se voc achou o Gliffy muito ruim de usar e no quer ter que instalar nada, a outra opo o iPlotz que na verso gratuita permite a criao somente de 1 projeto e de no mximo 5 pginas, para saber o que ele faz s assistindo a o vdeo criado para mostrar toda a capacidade que ele tem, mas a vantagem de rodar pelo navegador que funciona em qualquer sistema operacional, permite criar wireframes completos com mltiplas pginas, background diferentes

por pginas e permite exportar para JPG, PNG e PDF (prtico para o cliente ver impresso), permite a colaborao ou seja, vrias pessoas podem trabalhar no mesmo projeto, alm de organizar ao os trabalhos e tarefas de cada Arquiteto da Informao. Axure o programa mais completo que permite a criao de wireframes completos, prototipagens e especificaes completas com todos os dados que Designers, Programadores e clientes tero como guia do que ser o site, como uma ferramenta instalvel ela no gratuita, sendo vendida a licena do programa. Sendo somente em ingls como todas as outras ferramentas aqui apresentadas.

O que Wireframe?
De forma geral wireframe um documento/esboo que ajuda a arquitetar a distribuio e organizao das informaes e visualizar sua relao a outros elementos de um ambiente a ser projetado. Cabe ao wireframe indicar de forma estrutural a disposio de todos os elementos que compe, neste caso, um site como: Marcao de texto, lista de links, breadcrumbs, tamanho das imagens, orientao de navegao, etapas de interao do usurio e ambiente. O uso de wireframe ainda te ajuda numa reunio com um cliente, possibilitando dar uma viso de como se comportar o que voc est projetando e propondo. Caso queira se aprofundar mais sobre wireframes viste este artigo do Webinsider: Wireframe, documento cada vez mais importante

Ok, mas e o que Mockups?

Mockups so modelos em escala 1:1, ou seja, em tamanho real do que ser projetado. Sempre muito utilizado para demonstraes, avaliaes de um design, promoes e outras finalidades. Costuma ser mais usado para modelos fsicos, mas pelo que me parece h empresas adotando o conceito para projetos web e sistemas. Para fins deste post considero isto o suficiente sobre Mockups, caso queira se aprofunda mais indico o artigo em .pdf: A importncia do modelo fsico para o desenvolvimento de um produto Sendo assim vamos as referncias, todas elas retiradas do blog WDL.

NationWide / NASCAR

5 Anos de Firefox

Links

GEOINT2009 (Microsite)

Coastal Capital Partners

New Local

Vimeo Pgina de Profile

BPgraphics

Vimeo Topo da pgina de Vdeo

Cartoonity.com

CommLogix Wireframe

Early Ember Sketches

Wirethumbs

Mais alguns

iPad App Sketch

Web Layout Sketches

Librespeak interface sketch

Concepo Original do Twitter