novembro 30, 2009 from abduzeedo's blog
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
