Processo Criativo: Site Zee

Eu comecei a Zee em 2004 em parceria com um amigo, Fabiano Meneghetti. Durante esses anos nós aprendemos muito com nossos sucessos e também com as falhas. Tudo isso faz parte do jogo, embora a gente sempre tenha tentado fazer mais acertos que erros. Mas erros sempre são cometidos, e um dos nossos erros foi a parceria com pessoas que nãocompartilhavam das nossas idéias, que tinham diferente perspectivas e modo de pensar.

Por essa razão a Zee estava 'no limbo' por 6 meses. Mas depois desse período nós decidimos que a nossa maneira de pensar e que tudo que já havíamos passado valia a pena e não poderia ser esquecido. OAbduzeedo por exemplo, nasceu depois de um assalto a Zee.

Agora estamos de volta com a Zee e queremos mostrar para vocês como criamos nosso novo website.

Objetivos e Inspiração

Nosso objetivo com o novo site era deixar tudo muito simples. Nós também queríamos mostrar que ainda estamos no jogo, que estamos 'always in the loop'. Essa foi a tagline que usamos para a 'teaser page' e resolvemos manter para o site.

• Simplicidade
• Uma Única Página
• Slogan
• Textos Curtos
• Estilo de Revista

The simplest way to achieve simplicity is through thoughtful reduction. - The Laws of Simplicity

Nós tínhamos outras idéias em mente contudo nossa inspiração veio de revistas e livros, queríamos também um texto grande para o slogan e textos curtos para a descrever o que fazemos e quem somos.

Portfolio

Para o portfolio a idéia era mostrar alguns trabalhos sem fazer o usuário trocar de página. Com nossas estatísticas sabíamos que visitantes não passam muito tempo no site e com isso não veriam todas as informações que gostaríamos.

Time

Como o site teria apenas uma página nós decidimos usar apenas thumbnails na seção sobre o time. Nós escondemos as descrições e as mostramos via Javascript quando o visitante passa o mouse sobre as imagens.

As fotos foram feitas por John Arlington, um ótimo fotógrafo amigo nosso. Nós acreditamos que uma foto profissional dá mais valor ao design, e por isso entramos em contato com ele.

Layouts

Primeira idéia depois de adicionar todos os elementos no documento. Mas nós não gostamos das fontes.

Segunda idéia com background diferente e um tipo de folha de papel.

Basicamente a segunda idéia sem o background diferente. Ainda não era exatamente o que estávamos buscando.

Criando o Site no Photoshop

Passo 1

A primeira coisa que fizemos foi pegar um template model, estamos usando bastante o 960 Grid System (http://960.gs/). Então abra o Photoshop Template para ter as guias como referência.

Passo 2

Nós começamos brincando com o logo e o slogan. Quebramos o slogan em 2 linhas para que pudéssemos usar um dos blocos como referência para a largura dos outros textos, nesse caso o bloco "the loop". Nós não prestamos atenção no tamanho do texto pois estávamos apenas montando os elementos.

Passo 3

Usando a Rectangle Tool (U) nós adicionamos um placeholder para o portfolio, nesse caso com o logo do Abduzeedo. Está alinhado no centro da palavra "Always". Com a Ellipse Tool (U) nós criamos um sistema de navegação básico inspirado na iTunes Store da Apple.

Passo 4

Adicionamos então um texto com a descrição do que fazemos logo ao lado do nosso logo. Para o tamanho da fonte usamos 17. Ao lado das palavras "always in" adicionamos outro bloco de textos para colocar as citações dos clientes.

Passo 5

Nós tentamos criar um fluxo bacana para que o visitante visse o logo e lesse o texto que descreve nossa empresa, e depois seguisse para nosso slogan, nossos serviços eexpertise com nosso portfolio para referência. Depois disso visse quem somos e finalmente nossos projetos pessoais.

 

Passo 6

Alguns ajustes, especialmente os alinhamentos dos textos.

Passo 7 - Adicionando Cores

Nós adicionamos um azul claro como background e azul escuro para os textos.

Passo 8

Para criar um efeito legal no slogan nós começamos adicionando Drop Shadow via layer style, usamos branco para cor, 90º para Angle, 1 pixel para Distance e 0 para Spread and Size. Para a opacity usamos 100%. Depois disso adicionamos Inner Shadow. Dessa vez usamos preto para cor, 50% para Opacity, 90º para Angle, 2px para Distance, 0 para Choke e 1 px para Size.

Passo 9

Para todos os textos adicionamos uma sombra branca como fizemos no passo anterior. Isso será feito com CSS depois, quando fizermos a parte do HTML.

Passo 10

Nós queríamos usar texturas, por isso adicionamos noise (Filter>Noise>Add Noise) no background. Nós usamos 2% para Amount and Gaussian. Depois disso adicionamos o mesmo efeito noise no slogan.

Passo 11

Com Layer Styles adicionamos um stroke branco e sombra nos thumbnails. Use a imagem abaixo como referência.

Final

Nós adicionamos alguns elementos como a conexão entre o "in" e o "the". Também as opções de navegação do topo. Esse foi basicamente o layout usado como referência para a nossa versão HTML/CSS. Nós fizemos essa versão rapidamente usando Skype e compartilhando telas, mas sabíamos que algumas coisas mudariam com os textos e as versões, como o português, que pedia um novo slogan.

Conclusão

Com o layout feito no Photoshop nós criamos o HTML e o CSS do site. A maioria dos efeitos de sombra foram feitos usando CSS3. Também usamos o Javascript para as fotos e efeitos do portfolio. Nós vamos publicar um tutorial sobre como fizemos essa parte em breve.

Sites HTML

Versão em Português com o novo slogan

Inglês

Detalhes

Portfolio

Time

Para mais detalhes visite a página da Zee em http://zee.com.br