Galerias – Inspiração para Webdesign »

12jul 2010, às 08:00

Publicado em Inspiração | Deixe o seu comentário (1) »

publicado por: Magno Valdetaro

galerias-webdesign

Html5 Gallery

HTML5 gallery tem por objetivo proncipal promover o uso do HTML 5 por web designers com exemplos de sites reais que já utilizam as novas normas da W3C.

Wireframe Showcase

Em vez de focar só no resultado final a galeria Wireframe Showcase permite visualizar wireframes, protótipos, esboços de um site com opção de discussão. Vale a pena a visita.

koflash

Ótima galeria de sites produzidos totalmente em flash, como opção de compartilhar com twitter, adcionar ao delicious e acrescentar comentários.

A internet móvel está aí e isso não se pode contestar, hoje em dia uma versão móvel do web site é sempre bem vinda. Visite Mobile Awesomeness e conheça pelos exemplos de projetos para dispositivos móveis.

Grid-Based

A quem critique que usar grids limita a criatividade ao criar um layout mas, o uso de grids em um projeto oferece um sentido de ordem sistemática através da colocação e alinnhamento dos elementos de design. Grid Based exibe belos exemplos de sites que empregam este recurso.

CSS Elite

Maravilhosa galerias com dezenas de sites expostos que se utilizam da força do css.

Leia Mais »

Cacoo – Ferramenta online para wireframes »

26mai 2010, às 09:00

Publicado em Ferramentas | Deixe o seu comentário (1) »

publicado por: Magno Valdetaro

Já comente aqui antes sobre o HotGloo uma excelente ferramenta online para criação de wireframes diagramas, organogramas e todos os gramas que possa imaginar. Porém o tempo passou o HotGloo deixou de ser gratuito e assim sendo saiu um pouco da proposta deste blog, que é de divulgar em sua maioria ferramentas e recursos online gratuitos, assim colaborando com o aprendizado e desenvolvimento daqueles que por aqui passam, principalmente os que estão iniciando nesta humilde vida de desenvolvedor e projetista para web.

Seguindo o enterro apresento o Cacoo uma ferramenta online que cumpre o mesmo papel do HotGloo, mas que se mantém ainda gratuita com destaque para trabalho colaborativo em real-time.

Confira alguns recursos da Cacoo:

Drag Drop

drag-drop

Escolha que tipo de objeto pré-definido que quer inserir, clique e arraste para o stage e pronto! Isso acelera muito o processo de criação de grande diagramas se quiser ainda tem a opção de inserir conectores inteligentes que se arranjam junto ao deslocamento dos itens conectados.

Colaboração em tempo real

Cacoo da suporte ao trabalho colaborativo em tempo real. Isto é, vários usuários podem editar um único diagrama ao mesmo tempo, é como se todos estivessem juntos na mesma sala rabiscando a mesma folha de papel.

Compartilhamento

Um documento criado no Cacoo pode ser facilmente compartilhado com sua equipe ou cliente por meio de um link e ainda oferece a opção de receber comentários.

Crie Wireframes facilmente

Este é o ponto mais importante desta ferramenta para mim. Cacco é uma ferramenta eficaz para criação de wireframes para aplicações web, blog, sites, wikis e outros.

Configurações de background e sheets

Cacoo se utiliza de um conceito de planilhas (sheets) como no Excel, um diagrama pode ter diversas planilhas. Você pode criar uma planilha base para se utilizada de background em outras, o que ajuda muito no processo de criação de wireframes ou mockups.

Assista ao vídeo de apresentação da Cacco:

Fora estes destaques devo citar que Cacoo também permite que você salve seus projetos em pastas, exporte seu diagrama para PNG, faz um screenshot da sua tela, permite upload de imagem e por aí vai!

E é isso, visite Cacoo, cadastre-se teste a ferramenta e me diga o que achou, ok?

Leia Mais »

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

Leia Mais »

HotGloo – Crie seu wireframe online »

29nov 2009, às 07:26

Publicado em Ferramentas | Deixe o seu comentário (2) »

publicado por: Magno Valdetaro

HotGloo é uma interessante aplicação online para criação de wireframe. Com ajuda de elementos pré produzidos, você pode um wireframe completo. Para isso basta arrastar e soltar, redimensionar, linkar, nomear os elementos – muito simples, fácil e super intuitivo.

hotgloo-wireframe

HotGloo ainda pode ajudar com o gerenciamento de seus projetos. É possível editar, comentar e compartilhar a qualquer momento do processo de desenvolvimento o que está sendo produzido com seus colegas de trabalho e clientes. Também há a possibilidade de adicionar editores e revisores de seus projetos em poucos passos.