7D Engenharia

Engenharia comercial com atuação em todo território nacional.

Esse projeto não teve um oçamento que permitiu fazer um benchmarking mais aprofundado, então a etapa incial envolveu apenas apenas uma breve pesquisa entre os concorrentes diretos indicados pelo cliente junto com uma avaliação do site existente afim de mapear o conteúdo e identificar oportunidades de melhoria.

Algumas das oportunidades identificadas foram as seguintes:

  • a adição de call-to-actions em posições estratégicas dentro do site
  • incluir um mapa navegável com a indicação das obras realizadas pelo Brasil, com isso foi possível trazer de uma forma visual uma validação da competência da empresa
  • destacar a ficha técnica das obras para que informações como metragem e tempo de execução pudessem ser facilmente encontradas, visto que elas são bastante importantes dentro do processo de tomada de decisão dos contratantes
  • melhorias na arquitetura das informações

Exemplo do mapa navegável e do call-to-action

Layout

Com o conteúdo definido e as oportunidades identificadas a etapa de design teve início testanto diferentes formas organização do conteúdo, partindo da situação mais restritiva, ou seja, as telas de celulares e tablets, para a menos restritiva, de notebooks e desktops, essa técnica é conhecida como mobile first, com cada vez mais acessos provenientes de dispositivos móveis é muito importante que todo site promova uma boa experiência quando acessado de celulares.

Para acelerar o processo de criação do layout e posteriormente o processo de desenvolvimento foram criados algum componentes que pudessem ser reutilizados na construção de todas as páginas do site.

Alguns ícones que foram utilizados no site

Alguns ícones que foram utilizados no site

Alguns ícones que foram utilizados no site

Desenvolvimento

O site utiliza no back-end o WordPress, sistema que o cliente já estava acostumado a utilizar, com ele é fácil fazer a alteração dos textos do site e também publicar novos conteúdos de forma fácil. Plugins para otimizar e renomear as imagens foram utilizados para melhorar o desempenho do site em conjunto com o um plugin para fazer o cache de todas as páginas, aliviando a carga no servidor e diminuindo o tempo de carregamento.

O tema personalizado foi criado utilizando algumas ferramentas como: SASS, para facilitar a criação dos estilos dos componentes e a manuntenção, SUSY para a criação do layout responsivo, GULP para fazer o processamento e otimização do CSS e otimização das imagens utilizadas no layout.