Um pouco mais sobre o uso do branco

Adoro dizer que na música se acha referências visuais fantásticas, seja em clips, capas de discos, encartes, tem muita gente boa trabalhando na cena musical. Abaixo podem ver um clipe da banda Florence + The Machine. Reparem em como o branco foi usado para realçar os poucos elementos do vídeo e com isso nos dar uma sensação de que tem muito mais coisa ocorrendo na tela.

Mestre Maurício!

Se existe alguém nesse país que me influenciou por meio de seu trabalho a seguir a carreira de Designer, esse cara foi o Maurício. Não me tornei desenhista como ele, mas dele aprendi a essência do meu trabalho. Temos a obrigação de encantar! E ele me encanta até hoje! Vejam só o Making of das animações feitas para a Petrobrás no ano de 2011.

Dicas de diagramação

Diagramar não é uma arte, é uma técnica. É uma técnica que concede às páginas harmonia entre as informações que devem ser exibidas numa peça, para ajudar quem tá começando juntei aqui algumas dicas que eu mesmo ouvi ao longo do tempo.

1 – Espaçamentos

Divida o job em partes proporcionais, considerando que entre cada parte deve haver um espaçamento que seja longo o bastante pra garantir o respiro de cada informação e próximo o suficiente para manter a dinâmica da mensagem.

Mantenha espaçamentos iguais entre os elementos do job. Se fizer isso com precisão o conteúdo ganhará mais valor, além de facilitar a leitura do usuário. Após definir e seguir de forma rígida as regras de espaçamento que definir em sua arte, pode inclusive quebrar essa regra para dar mais destaque a um elemento específico! Como um splash que por exemplo invada um pouco alguma caixa de texto.

2 – Espaço branco

Muita gente acha que o branco não comunica nada e por isso devemos ocupar toda a área do material, mesmo que para isso devamos “encher linguiça”.

Bobagem!

O branco comunica sim e muita coisa, adiciona leveza ao material e se a primeira dica acima for seguida com cuidado garante a legibilidade do job. Para visualizar o que eu digo, pegue a imagem da bandeira do Japão e perceba que o vermelho só ganha destaque por estar envolto pela cor branca.

Lembre-se, você como Designer não vende área de ocupação na página, vende qualidade de comunicação.

3 – Hierarquia visual

Esse é um conceito que nos ensina a ordenar nossos elementos de acordo com a importância deles na composição da mensagem.

O que for mais importante ganha mais destaque e o que for menos importante menos destaque.

Os meios que dispomos é por diferenças de tamanho (maior o que for mais importante, menor o que for complementar e assim por diante), podemos trabalhar com a paleta de cores do projeto (Um exemplo é quando se atribui uma cor mais chamativa a um título e uma mais discreta ao texto em si) e podemos também criar elementos que sirvam para ancorar as informações (tais como splashs, caixa de texto, bullets, etc.).

Por exemplo, se estiver diagramando um panfleto, os elementos mais importantes são o logo(que define quem é o cliente), a chamada principal (que diz o que ele faz) e o telefone (que dá o caminho para ele ser encontrado). São os mais importantes pois são a síntese da mensagem.

Neste mesmo exemplo uma lista tabulada com os serviços do cliente não possui tanto destaque e por isso deve ser diferenciada dos 3 primeiros elementos.

4 – Diagramar é diferente de criar layout

Criar um layout envolve definir como adaptar de forma inteligente a identidade visual do cliente numa peça de arte. Diagramar é ordernar os elementos da mensagem dentro desse layout. Ou seja é uma segunda e distinta etapa do processo.

Por isso não tente criar enquanto diagrama, ou diagramar enquanto cria, tudo que vai conseguir é um material bagunçado ou travar seu processo criativo. Separe os processos e verá que obterá resultados melhores.

Bom, por enquanto é só, mas para que possam estudar mais sobre o assunto deixo alguns links abaixo.

Diagramação

Diagramação por Grids

Diagramação na Web

Curtas de animação pra relaxar!

Assistam para relaxar, para aguçar a percepção, para afinar a emoção ou apenas para agregar bagagem visual!