Sisson Studio

Estávamos ansiosos para ajustar o layout deste website. Em março do ano passado nós celebramos a saída do tema Hemingway e a chegada do Futurosity Aperio Prototype. Fizemos uns poucos ajustes e já estávamos satisfeitos.

No decorrer do ano, nos enchemos de idéias para um novo website. Criamos então um layout do zero e com todo o conteúdo que queríamos. Com a ajuda local do MAMP, chegamos bem longe no layout. Ficamos a desejar nas funcionalidades, devido ao nosso nulo conhecimento de PHP.

Neste meio-tempo em que tínhamos colocado o site no ar com o tema Futurosity modificado, aconteceu do Chris Spooner escrever um artigo onde ele juntava 50 exemplos inspiradores de minimalismo em webdesign. E lá estava nosso website.

Com todas as visitas que esse artigo gerou e com projetos de clientes chegando, a última coisa que fizemos foi olharmos por nós mesmos e pensamos que o design não precisava ter uma mudança tão radical.

Chegado 2010 nos demos conta que nosso website ainda atendia ao que queríamos, em termos gerais. Quebramos a pedra em dois: ao invés de mudarmos tudo de uma vez, façamos em duas etapas.

Na primeira etapa ajustaríamos apenas o layout para que ele ficasse mais próximo da paleta de cores que desenvolvemos para nossa identidade visual. Queríamos também algumas funcionalidades simples e uma cara mais limpa.

Na segunda etapa adicionaremos as páginas: studio, portfolio, blog e contato, um menu de navegação e todas as funcionalidades que queremos. Estamos chegando num momento em que estamos precisando mostrar quem somos e nossos trabalhos com mais detalhes. Se esse pedaço da pedra precisar ser quebrado, será.

Então chegamos ao final da primeira etapa. Segue um resumo do que foi ajustado:

Cores

Mudamos sutilmente as cores do website para refletir nossa paleta.

Foco no conteúdo

A barras laterais viraram barras de fundo de página, deixando os artigos sem distração de leitura.

Informações auxiliares

Vimos que muitos artigos continham informações necessárias, porém, complementares e que se repetiam a cada novo artigo. Categorizamos e listamos essas informações, resultando em:

• Inspiração
• Créditos
• Agradecimento
• Mais
• Faixa

Todas elas deveriam agora estar numa barra auxiliar no início do post. Mas como fazer isso? Optamos por usar os campos personalizados do WordPress. Chamar meu irmão para nos ajudar com o PHP foi uma consequência natural.

Redesenho dos filtros

Redesenhamos as páginas que resultavam de filtros de categoria, autor, assunto e busca para que tivessem uma unidade visual com o restante do website.

Reformulação das páginas não encontradas

Agora, sempre que alguém não encontrar algo que estiver buscando, damos algumas opções de direção a partir deste ponto.

Links internos

Links que apontavam para nossas próprias páginas poderiam ser quebrados caso mudássemos o website de diretório ou mudássemos a URL do post. Corremos para o Digging Into WordPress para uma ajuda valiosa.

Tradução de verdade

Dessa vez resolvemos traduzir cada canto escondido do tema usando o Poedit. Chega de meias traduções.

Performance do website

Essa foi a pior parte. Ao instalar as extensões Page Speed do Google Code e YSlow do Yahoo! Developer no Firefox e disparar o teste, descobrimos que a performance do nosso site era paupérrima: cache de browser e proxy, compressão, cookies, DNS lookups, CSS ineficiente, otimização e escalonamento de imagens, ordenação de CSS e JavaScript… enfim, um desastre.

Pegando um item por vez juntamente com os guias do Page Speed e do YSlow e contando com uma pequena ajuda da nossa hospedagem, conseguimos melhorar substancialmente a performance, chegando, em algumas páginas, a um resultado de 98 itens OK de 100 total.

Conclusão

No momento, a única coisa restante é o ajuste do CSS para navegadores mais velhos para que os usuários tenham uma experiência consistente ao visitar este website.

Daí as pessoas perguntariam: “Quando isso tudo termina?”

Nunca. Website e portfolio de designers nunca ficam prontos.