Novo site Haste: WordPress, responsividade e foco no conteúdo

O ano é novo, e o nosso site também! Colocamos o novo site no ar, e agora vamos contar um pouco sobre a reformulação e mudanças.

O site anterior

Nosso site anterior foi criado em 2013. Foi a primeira experiência que tivemos liberdade para realmente desenvolver um site WordPress completo, do começo ao fim. Escrevemos cada linha do código, descobrimos novas ferramentes e aprendemos muito no processo. Foi aí que começamos a interagir com a comunidade WordPress, a qual hoje nos dedicamos como voluntários e organizadores.

Se você visitou o site anterior, deve ter brincado alguma vez com o efeito parallax da ilustração da home page. Agradecemos ao site anterior pelos serviços prestados, mas já estava na hora de fazer uma reformulação total.

Os requisitos para o novo site

De 2013 para cá, muita coisa mudou. A internet se transformou totalmente. Tecnologias foram criadas e outras desapareceram. Até o comportamento das pessoas é outro. Smartphones são ferramentas básicas, tanto que se tornaram a principal forma de acessar a internet. No nosso site, a visitação mobile saltou de 3,95% em 2013, para 17,49% em 2017.

O WordPress evoluiu da versão 3.5 para a 4.9 e ganhou muitos recursos e melhorias. Nossa identidade visual foi modernizada, com adaptações no logo, nova paleta de cores e reformulação de todo o material gráfico (nossas propostas comerciais ficaram lindas, peça um orçamento para ver como ele é bonito). E nós também mudamos: aprendemos muito, passamos a usar novas técnicas e ferramentas e desenvolvemos melhor a nossa metodologia.

Portanto, estabelecemos que o nosso novo site deveria:

• Ser feito com WordPress. O CMS que já era bom, melhorou ainda mais e se manteve como nossa ferramenta preferida para criação e gerenciamento de sites;
• Ser responsivo, se adaptar a telas e dispositivos diversos;
• Ter um design mais atual, de acordo com a evolução na nossa identidade visual;
• Ser versátil, suportar os diversos tipos de conteúdos que queremos expor e compartilhar;

Porém, até chegar nesses requisitos simples foi um processo que começou um bom tempo antes…

O processo de desenvolvimento

O processo de desenvolvimento começou em meados de 2016. Sim, levou mais de 1 ano e meio para ser terminado. Mas não gastamos este tempo todo com a parte prática do desenvolvimento. Como a prioridade são sempre os clientes, em vários momentos não havia tempo para dedicar ao nosso site.

Quando surgia um tempinho livre, ou até mesmo nas folgas, fazíamos alguns estudos de layout e da estrutura de conteúdo do site. Nesta fase, fomos com calma, criando material e deixando as ideias amadurecerem. Porém, em alguns momentos admito que a demora também foi causada por um pouco de indecisão. Aconteceu de criarmos um layout em um dia e amá-lo, e na semana seguinte considerar aquele design lixo. É mais difícil fazer o próprio site, já que é um projeto próprio e temos liberdade de criação. 

No meio de 2017, decidimos que era a hora de mudar a abordagem. Fizemos uma síntese do que queríamos no novo site (a lista de requisitos acima), e botamos a mão na massa de verdade.

Foi aí que percebi que até então estávamos tratando esse projeto como se fosse a criação de algo permanente, como se a gente fizesse algo errado não pudesse alterar. E na verdade, podemos fazer o oposto: desenvolver produto mínimo viável, ou seja o mínimo necessário para o site funcionar. Depois vamos aperfeiçoando.

E isto pode ser feito inclusive com o site no ar, já que usamos versionamento GIT e um sistema de controle de deploy. Por isso, se você for desenvolver um site com WordPress ou outra plataforma, e começar a ter muitas dúvidas a ponto de empacar o desenvolvimento, foque no essencial. No nosso caso, o essencial era:

• Transmitir a nossa nova identidade;
• Mostrar nosso portfólio e serviços;
• Ter uma boa página de contato;
• E ter um blog legal onde pudéssemos compartilhar nossas ideias.

Inicialmente tentamos utilizar um tema WordPress pronto que compramos, para ser mais rápido. Porém, o tema possuía problemas e o desenvolvedor não se propôs a corrigir. Partimos então novamente para o desenvolvimento do nosso próprio tema, tentando manter simples porém com os recursos que precisávamos.

Utilizamos o WP Odin framework como base, em uma versão que alteramos para criar o nosso próprio tema base, o Haste Starter. Veja a lista de recursos que utilizamos:

• Bootstrap 4 como framework de front-end;
• SASS como pré-processador de CSS;
• SVG, para ícones personalizados;
• NPM scripts como task runner;
• Composer para gerenciar dependências PHP;

E além do tema, para complementar as funcionalidades utilizamos os seguintes plugins:

• Kirki Toolkit, para criar opções do Customizer no WordPress;
• CMB2 para auxiliar na criação de metaboxes;
• Fizemos um plugin personalizado que cria nossos custom post types (serviços e portfólio, por enquanto), e custom taxonomies, e cria as metaboxes com o CMB2;
• Elementor Page Builder, para criar a home page e landing pages.
• Contact Form 7
• Yoast SEO
• Really Simple SSL
• E outros.

O resultado

O novo site Haste é este que vos fala. Ficou bem mais clean, com mais espaço para o conteúdo, e imagens maiores. Agora o site é totalmente responsivo. Teste ler no celular (se já não estiver lendo), ou diminuir a janela do navegador. A tipografia, com as fontes Alegreya e Rubik, foi melhor trabalhada. Convido você a navegar pelo site (assim que terminar de ler o post, é claro!).

Veja o nosso portfólio, onde destacamos alguns projetos recentes dos quais nos orgulhamos. Também reformulamos os serviços, destacando a nossa expertise em desenvolvimento WordPress, na criação de lojas virtuais com WooCommerce e criação de apps, games e design de interatividade. O site está 100% funcional, mas vamos continuar trabalhando nele. Os próximos passos são:

• Melhorar a performance;
• Criar a seção Haste Lab, onde colocaremos nossos projetos, como o plugin Registrations for WooCommerce;
• Fazer a versão em inglês;

É isso! E aí, o que você achou? Feedback é bem vindo, deixe o seu comentário.

Compartilhe