Rovaris Iluminação

Criação de novo site institucional para empresa de desenvolve projetos de iluminação e vende produtos de alto padrão.

Um dos conceitos explorados foi o das variações na temperatura de cor, um recurso muito utilizado em projetos de iluminação para deixar ambientes “quentes” ou “frios” de acordo com o objetivo.

Esse conceito foi utilizado para criar a paleta de cores da identidade visual e foi explorada no layout e em interações criadas para ao site.

escala de cor em kelvin

A estrutura do site foi baseada no conteúdo já existente do site com a adição de algumas páginas estratégicas, uma para falar das parcerias que a Rovaris desenvolve com arquitetos e outra para destacar os designers que tem peças comercializadas no showroom.

Layout

O layout do site é minimalista, explora o espaço negativo e o uso da tipografia para conversar com o cliente de uma forma leve reforçando os valores da marca e valorizando as fotografias dos projetos que ganham destaque junto à paleta de cor mais neutra.

Por seguir com uma estrutura de organização simples, as etapas de criação dos layouts, suas versões responsivas e a implementação foram acelaradas, permitindo que o site fosse lançado em um curto período de tempo.

mockup do site usando um iphone mostrando a página inicial do site dentro de um ipad mostrando a página inicial do site dentro de um ipad mostrando a página de projetos do site dentro de um ipad mostrando a página de parceiros do site dentro de um ipad

O layout das telas foi feito usando o Figma, que facilita no processo de criação de compontentes que podem ser facilmente reutilizados na composição das páginas e garante a consistência da paleta de cores, estilos tipográficos e espaçamentos.

Com a primeira versão do layout pronta, foi criado um protótipo navegável para que o cliente pudesse testar o site em ambas as versões: mobile e desktop. Após alguns dias tivemos uma sessão de feedback para refinar alguns detalhes da navegação e incluir algumas informações, antes de começar a implementação.

telas do site em sua versão para desktop e mobile lado a lado
Versão para deskop e mobile lado a lado das telas criadas para o site
Na parte da implementação do site foi possível explorar alguns elementos da identidade visual de uma forma dinâmica, trazendo uma experiência diferente para o usuário reforçando ainda mais a marca.

Interações

Logo na página inicial o usuário é recebido com uma frase de impacto e com uma interação que o permite experimentar o efeito que mudança da temperatura de cor afeta a percepção.

Essa interação foi feita utilizado p5.js, o movimento do mouse no eixo Y foi mapeada utilizada para fazer a interpolação entre a cor mais fria e a mais quente da paleta de cores, ao mesmo tempo também faz mover um um barra que indica a “temperatura de cor” equivalente.

Em outras partes do site existem outros elementos que fazem referência à diferença de cor e aos comprimentos de onda.

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.