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

Tratamento de áudio digital

Ae! Estou disponibilizando em .doc um trabalho que eu fiz para a facul sobre softwares de tratamento de áudio digital, pra quem gosta do assunto, vai ser uma boa leitura! =D

Faça aqui o download do trabalho sobre áudio digital

Criando um logo

Ae! Mostrando um pouco da criação do logo da Primo’s Eletricidade.
Clique nos logos para ampliar.

Logo Antigo

A Primo’s tinha esse logo, um pouco amador, e ele queria um novo, bem simples. Fui na empresa dele, conversei e montei um briefing sobre o projeto, o maior objetivo é fixar a marca, sendo assim cheguei no seguinte logo.

Significado das Cores

Usei duas cores na composição do logo, vermelho e branco, veja abaixo o por quê:

Vermelho: Persistência, força, prosperidade, aumenta a atenção, puxa muito o olho para o logo, tem uma energia muito grande, é dinâmico.

Branco: Sugere pureza, usei para dar um contraste com o vermelho.

Partículas brilhantes ao redor de uma foto.

Como sempre, achei lá no Tutoriais de Photohop!
Como colocar partículas brilhantes ao redor de uma foto.

Passo 1
Pressione Ctrl+N para criar um novo documento, defina o tamanho de 600×600 pixels, 72 dpi´s de resolução e modo de cor em RGB com fundo branco, pressione Ok, clique duas vezes sobre a layer na paleta de layers para retirar seu cadeado, agora vá em Layer> Layer Style> Gradient Overlay e defina os valores abaixo, o gradiente usado deve ir do vermelho escuro para o preto.

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!

Briefing! Como fazer?

Ae pessoal, andei pesquisando um pouco sobre briefing e fui aprendendo como aplicar, vou repassar aqui algumas coisas importantes para montar um.

O que é briefing?

Briefing é um documento, onde é colocado todas as informações possíveis do cliente. É a partir daí que podemos conhecer melhor o cliente e a necessidade dele, criando um foco para o desenvolvimento do layout.

Pixel Font

Ae pessoal, estou disponibiliazando para download uma pixel font, faz um tempo que eu estava procurando uma fonte assim!

Faça o download aqui!

O que significa ROUGH?

Ae! O professor Carlos Trotta comentou sobre Rough (ou em bom português rafe/rafi) na aula de Composição e Projeto Gráfico, ai eu pesquisei para ver o que significava.

De acordo com a Wikipedia, Rough significa:

Termo usado para designar a técnica de esboços soltos e descompromissados feitos por roteiristas de histórias em quadrinhos. Muito utilizada na produção em série de quadrinhos infanto-juvenis, pois facilita o trabalho do editor e do desenhista, já que a história já é criada visualmente.Infelzmente esse tipo de material dificilmente é visto pelo público.

Traduzindo para web: é o cara que desenha o layout no papel antes de passar para o computador! =D

Antes e depois! >_<

AEe pessoal! To criando uma nova categoria, o antes e depois! >_<

Essa categoria funciona da seguinte maneira, vou postar um layout meu e um layout com as alterações que os clientes pedem para fazer no layout. Começando com MPT Condutores.

Antes

Depois

Efeito de asfalto molhado.

Começando com tutoriais, achei lá no Tutorias de Photoshop!
Como criar um efeito de rua molhada.

01. Pressione Ctrl+O e abra a foto de uma rua qualquer como a da foto abaixo.