Quantcast
Channel: Abduzeedo - Design Inspiration and Tutorials
People Here Also Viewed:
Viewing all articles
Browse latest Browse all 5330

Estudo de caso: Web design site Candela

0
0
Estudo de caso: Web design site Candela

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.

Candela


Detalhes

Mas como procurei direcionar este artigo em detalhes, vamos a eles...

Candela


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.

Candela


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.

Candela

Candela


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.

Candela


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.

Candela


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.

Candela


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.

Candela


Nesta imagem mostramos a diferença do layout original, inicialmente previsto para ser um modelo e-commerce.

Candela


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.

Candela


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.

Candela



Viewing all articles
Browse latest Browse all 5330

Latest Images

Trending Articles



click here for Latest and Popular articles on Mesothelioma and Asbestos


Latest Images