Criando o meu blog Parte II: Identidade Visual



Continuando a série “Criando o blog”, que inciou com Criando o blog Parte I: Planejamento. Vocês conferem abaixo a segunda parte que irá tratar do visual do blog. Se você não leu o primeiro texto não sei o que está esperando! Let’s Rock!

A logo

Com o nome e conceito pronto a criação do logotipo nada mais é que à materialização gráfica desses elementos. O primeiro passo sempre é buscar conceitos e idéias, para isso o Google é um ótimo aliado. No meu caso não fui atrás de exemplos, já tinha algo na cabeça e me atraquei direto no Corel Draw (para os mais curiosos aconselho este post sobre como criar logos apresentáveis do Design.blog.br).

O conceito é o contraste da programação e do Design. Inicialmente comecei vários testes tipográficos nas palavras import e Zeh.Design. Em import usando uma conhecida fonte de programação courier new, na coloração verde, cor muito utilizada para destacar palavras pertencentes à sintaxe de programação.

sintaxe

Sintaxe destacada na coloração verde e fonte Courier New

Do outro lado(Zeh.Design) procurei fontes que representassem o design, com curvas ou parecendo rabiscos.

Teste tipográfico da logo

Teste tipográfico

Depois de aprovada às duas fontes comecei a tentar enriquecer a logo, desenhei um abstracionismo do WWW, representando a web.

Abstracionismo do WWW - Criando logo

Abstracionismo do WWW

Exportei vários modelos num pdf e chamei a família e alguns amigos para me ajudarem a aprovar. Algo que é importante para um designer é senso critico para avaliar seu próprio trabalho, complicado, ou melhor, bem complicado. Em desenvolvimento, nesse sentido é mais simples, o medidor máximo é “funciona ou não funciona”.
Quando falta um pouco desse senso o jeito é recorrer aos amigos e familiares e extrair a maior quantidade de informações possíveis: perguntando sobre o que eles entenderam da logo? O que eles mais gostaram? Faça escolher uma e pergunte o porque dela? Use tudo que você pensou para criá-la como perguntas.
Não se pode esquecer que design é comunicação também, algo que pareça óbvio para você não é para todos.

Após o interrogatório que realizei, principalmente para minha mãe haha, decidi retornar a versão anterior e deixar a logo simplificada sem o abstracionismo do WWW que no caso poucos o entenderam e ele pareceu pouco prático para o uso. Decidi entre as tipografias e os espaçamento e a aprovada foi a que vocês vem no topo da página.

Logo aprovada

Logo Aprovada

O Design da pagina

Logo e conceito pronto está na hora de trabalhar no layout do blog, abrir o photoshop e pregar o pau certo? Errado! Antes é preciso passar por uma parte que considero fundamental, a construção dos wireframes. Sua função é estruturar o conteúdo de cada página, indicando o peso e relevância de cada elemento do layout.

Para montar os wireframes do blog eu usei o adobe flash. Gosto de trabalhar com a ferramenta por trazer uma interface simples para desenhar, na qual me adapto muito bem e na necessidade de um protótipo do site pode ser feito facilmente.

Estava na hora de decidir quais os elementos que o blog teria, indo atrás de vários outros sites para ter uma idéia do que é possível fazer, percebi que a maioria usa aquele padrão de visualização em vertical dos posts. Como um cara que gosta sempre de fazer diferente, decidi adotar uma disposição horizontal usando um truque de colunas inteligentes.

wireframe home - criando o blog

Wireframe da home do blog

Esse truque não aparece para vocês, mas os posts vão se adequar de acordo com sua resolução de tela, ou seja, se você possui uma largura de tela de 1024px você terá linhas de três colunas já se possuir uma de 1280px você terá quatro, proporcionalmente.

A desvantagem de trabalhar desse modo é um espaço lateral grande que é perdido, neste caso tive que concentrar todas as outras informações no rodapé e no header. Eliminei a página sobre e trouxe um resumo de mim ao lado da logo.
E no rodapé coloquei os outros elementos Blogroll, Post Populares, Categorias e Tags.

wireframe single - criando o blog

Wireframe da leitura do texto blog

A próxima pagina a estruturar era a leitura do post. O site está num formado liquido, adapta os elementos ao tamanho da tela, esta técnica é mortal para textos. Para se ter uma boa legibilidade conta fatores como espaçamento de letra, de linhas, tamanho da fonte, a própria fonte e a largura do texto, é preciso uma média de 12 palavras por linha. A solução para este problema foi deixar o texto em largura fixa e centralizar a coluna no centro.

Observem que todo o blog foi decidido antes de chegar à aplicação do estilo. Esta é a melhor forma de você ter sucesso nas próximas etapas.

Aplicação do Estilo

Está na hora de desenhar o layout. As vantagens que os wireframes me trazem são as mesmas que quando desenhamos, partimos do geral para o especifico. Já possuo todas as medidas, aplico uma melhor usabilidade no site e tenho o total controle dos elementos.

Para definir os detalhes procurei encontrar símbolos que representassem programação e design. As primeiras idéias que surgiram foi ligar design com rascunho e papeis e usar o alguns efeitos para mostrar que abaixo de tudo aquilo havia códigos.

Criação do layout do blog

Design inspirado em rascunhos e códigos

Primeira tentativa falha! Não gostei nada do resultado, comecei a estudar alguns efeitos com papel rasgado, mas nada se mostrava muito eficaz.

Criando papel rasgado

Papel rasgado no header

Perdi alguns dias tentando encontrar uma maneira de usar esses elementos em conjunto, mas não dava certo. Talvez fosse hora de um novo plano, parar de me concentrar apenas em “import” e “design” e usar o “zeh” também, indo atrás do que gosto em design.
Pensando dessa maneira busquei referencias o estilo artístico que mais admiro na história hoje, a Bauhaus, uma das maiores e mais importantes expressões do que é chamado modernismo no design e na arquitetura, sendo uma das primeiras escolas de design do mundo. Seu conceito máximo é “Menos é Mais”.
A partir daqui comecei a trabalhar novamente em cima do estilo da logo. Que resultou nessa pagina e nesses detalhes que chamo a atenção:

Layout final

Versão final do layout

  1. Esse menu com as redes sociais que participo ficou super simpático haha
  2. As bordas arredondadas das figuras fazem muita diferença.
  3. Ao passar o mouse nos botões do site, aparecem alguma escrita e um circulado, simulado alguém que tenha rabiscado
  4. As listas possuem caracteres como //, { } estes são comuns em programação, por exemplo a barra barra representa comentário, as chaves abrir e fechar uma função.
  5. No rodapé sempre terá uma frase que gosto. De vez em quando atualizada

Espero que tenham gostado desta segunda parte, ela possui o mesmo princípio da anterior, mostrar e servir como exemplo. Mas adianto que a próxima será escrita com o intuito de ensinar como aplicar seu tema no WordPress. Aguardem “Criando o meu blog: Parte III – Montando um tema no WordPress”.


Gostou deste post?