Gosto de compartilhar o processo criativo de alguns projetos aqui no blog. Neste estudo de caso vou mostrar os principais detalhes na criação do site para uma empresa de Forlateza, chamada Candela. Um projeto de aproximadamente 7 meses de implementação, 100% em Drupal.
Inicialmente o projeto foi concebido para ser um e-commerce, mas durante o desenvolvimento ocorreram algumas decisões por parte da empresa e então do site passou a ser focado para a demonstração dos produtos sem a efetivação final da compra, e isso é notado claramente na estrutura de conteúdo que foi adotada.
Não irão encontrar aqui detalhes técnicos, formas de implementação, truques de CSS ou coisas do tipo, neste post procurei focar nos principais detalhes visuais e de usabilidade do projeto.
Antes de tudo: Wireframes
Procuro utilizar lápis e papel para início de qualquer projeto, diagramar os conteúdos desta forma chegamos a wireframes rápidos e ao mesmo tempo é muito fácil de riscar, apagar e elaborar propostas diferentes. Somente depois de ter um esboço bem apurado partimos para a criação dos layouts.
Utilizo este método tanto para a estrutura geral como para algumas funcionalidades e áreas específicas.
Detalhes
Mas como procurei direcionar este artigo em detalhes, vamos a eles...
Grid de produtos
Temos um grid de produtos onde o usuário pode escolher a visualização em 3 ou 5 colunas. Elas possuem diferente quantidade de produtos, tamanho de imagens e informações apresentadas.
No grid também temos claramente identificada a tag "Lançamento", assim como os filtros ativos identificando quais tipos de luminárias estão sendo visualizadas.
Designers
Outra seção importante do site é a lista de designers, ela segue o mesmo objetivo da lista de luminárias, ser uma visualização limpa, com foco na imagem e no título (designer ou luminária). Os hovers são sutís, trabalhando com menos transparência e cor de fonte diferennciada para identificar a ação.
Página do produto
A tela do produto é onde temos a maior quantidade de informação. Procuramos esconder alguns elementos para deixar a tela mais limpa, mas mostrando eles em ações de mouse. Aqui notamos os thumbs aparecendo ao passar o mouse nos "bullets" da imagem principal, uma ideia simples mas que facilita a identificação da imagem que será vista.
O formulário de orçamento é apresentado na própria tela do produto, não sendo necessário um novo carregamento de página somente para este formulário, aumentando assim a possilidade de conversão.
As informações principais do produto são apresentadas de forma que tenha uma linha de leitura clara: Título, marca e designer. Abaixo disso temos então mais detalhes como tipos de aplicação e descrição da luminária. A descrição tem uma limitação de caracteres visíveis - podendo ser expandido - assim o botão de "Solicite orçamento" se mantém aos olhos do usuário sem necessidade de rolagem da página.
Nesta imagem mostramos a diferença do layout original, inicialmente previsto para ser um modelo e-commerce.
Criando conta
Voltado para designers e arquitetos, a área restrita possui "Wishlist" como funcionalidade principal, onde o usuário pode criar uma lista e compartilhar com clientes. Na área de login e cadastro procuramos então deixar claro este principal motivo para fazer uma conta no site e ainda de forma ilustrativa.
Resultado final
O resultado final se manteve muito próxmo do original, um projeto de design simples e objetivo. Mais detalhes pode ser visto direto em candelaluz.com.br.
