18 exemplos de wireframes e mockups »
20mai 2010, às 09:10
Publicado em Design | Seja o primeiro a comentar (0) »
publicado por: Magno Valdetaro
Em primeiro lugar:
O que é Wireframe?
De forma geral wireframe é um documento/esboço que ajuda a arquitetar a distribuição e organização das informações e visualizar sua relação a outros elementos de um ambiente a ser projetado. Cabe ao wireframe indicar de forma estrutural a disposição de todos os elementos que compõe, neste caso, um site como: Marcação de texto, lista de links, breadcrumbs, tamanho das imagens, orientação de navegação, etapas de interação do usuário e ambiente.
O uso de wireframe ainda te ajuda numa reunião com um cliente, possibilitando dar uma visão 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 são modelos em escala 1:1, ou seja, em tamanho real do que será projetado. Sempre muito utilizado para demonstrações, avaliações de um design, promoções e outras finalidades. Costuma ser mais usado para modelos físicos, 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 importância do modelo físico para o desenvolvimento de um produto”
Sendo assim vamos as referências, todas elas retiradas do blog WDL.
NationWide / NASCAR
5 Anos de Firefox
Links
GEOINT2009 (Microsite)
Coastal Capital Partners
New Local
Vimeo Página de Profile
BPgraphics
Vimeo Topo da página de Vídeo
Cartoonity.com
CommLogix Wireframe
Early Ember Sketches
Wirethumbs
Mais alguns
iPad App Sketch
Web Layout Sketches
Librespeak interface sketch
Concepção Original do Twitter
