Wireframe

Ae! Com a entrada do novo coordenador de conteúdo, Marcos, estou aprendendo muito a organizar meus projetos, com a implementação de wireframes. Agora eu estou pensando mais na hora de criar um layout, sobre a organização de cada elemento, seguindo um sentido lógico e não jogando tudo que é bunitinho pelos espaços do layout. =D

Mas então, o que é Wireframe mesmo?
De acordo com a Fator W:

Wireframes são documentos elaborados durante a fase de arquitetura de informação de um projeto web com o objetivo de estruturar o conteúdo das principais páginas, organizando os elementos que devem compor a interface, indicando a marcação dos textos e o peso dos itens.

____________________________________________

Wireframe então é um desenho básico de uma interface. Este desenho, no entanto, deve retratar toda a arquitetura de informação do sistema desejada pelo cliente. Deve-se observar também que o wirefame retrata a usabilidade do sistema. No entanto, este desenho deve ser muito simples e resumido, informando ao desenvolvedor apenas o que for estritamente necessário.

Wireframe seria um esqueleto do site, que deve ser feito antes de iniciar a montagem do layout com cores e imagens.

Vale a pena conferir:
Como fazer wireframe no flash
Wireframe – Documento cada vez mais importante
Quanto mais simples o wireframe melhor
Como construir wireframes

Veja também:
Sitegrama

Sitegrama

Estava eu lendo minhas mensagens no twitter quando eu vejo a mahrcinha falar sobre sitegrama. Mas espera um pouco, o que é um sitegrama!?!??!?

Fiquei curioso e fui ao senhor Google, e achei um PPT bem interessante do Guilhermo Reis sobre sitegrama peguei alguns trechos para por aqui no blog.

Mas então, o que é sitegrama?

Um sitegrama é um diagrama que representa a organização hierárquica e o fluxo de navegação de um website.O objetivo do sitegrama é representar a macroestrutura do website com nível de detalhe suficiente para que os membros da equipe possam entender completamente o funcionamento do website.Para representar a organização hierárquica, o sitegrama se utiliza de diagramas em árvore.

Para representar o fluxo de navegação, o sitegrama se utiliza de fluxogramas indicando como ocorrem as transições entre as páginas do site.

O vocabulário visual usado para o sitegrama se baseia no vocabulário visual desenvolvido por J. J. Garrett para descrição de arquitetura de Informação e design de interação.

Vou estudar um pouco mais esse PPT e posto mais informações sobre arquitetura de informação aqui no blog!