Criação de layout para loja virtual: Case Disconnect Home

15/06/2020
3 min de leitura
5
Amou?
Layout para loja virtual

A criação de um layout para loja virtual é um processo bem complexo e que exige do designer muita atenção e criatividade para transmitir todo o conceito e personalidade da marca para o e-commerce.

Assim como a vitrine de uma loja física, a loja virtual precisa ser atrativa e personalizada para encantar os visitantes e fazer com que eles sintam interesse pelo produto ali exposto.

Embora muitos não enxerguem isso de cara, o layout pode influenciar nas vendas do seu e-commerce e fazer toda a diferença.

Nesse conteúdo iremos explorar o layout da Disconnect Home, uma marca de decoração que acredita que a casa tem que ser, sobretudo, um lar que tenha um astral leve, seja aconchegante e transpareça a personalidade do dono.

Como se inspirar para criar um layout para loja virtual?

1 – Coloque sua playlist de músicas favoritas para tocar;

2 – Procure entender o problema que vai enfrentar (exigências e necessidades);

3 – Busque na internet o que já se tem relacionado ao problema (referências e concorrentes);

4 – Faça esboços das ideias que vão surgindo, juntando algumas soluções já sólidas de lojas online com algumas novas idéias pra buscar resolver o problema.

5 – Sintetize as ideias dos esboços e elaboro a primeira fase do design da interface, com paleta de cores e elementos da marca.

Briefing – Case Disconnect Home 

A Equipe Disconnect Home solicitou um layout para a sua loja online de decoração e algumas das exigências do cliente eram: trabalhar com imagens grandes (imersivas), principalmente no banner principal; trabalhar um espaço com ambientes de decorações prontos.

A loja tem uma manual de marca sólido, com elementos gráficos estabelecidos que ajudam a compor o layout com mais facilidade e objetividade.

“O maior desafio é trazer toda imagem da marca, suas singularidades e padrões para o layout final da loja online. Além de todos os aspectos de design, a loja precisa ter uma navegação fluida, com um processo de compra rápido e prático.”

– Jhonny Sousa, designer do projeto

Processo criativo

1- Referência Visual

Inicialmente foi feito uma pesquisa por referências visuais que atendessem as exigências coletadas no briefing de Design.

2 – Wireframe

A partir da etapa de coleta de referências, foi possível elaborar um sketch/wireframe da loja que seguissem as necessidades do cliente.

Foi organizado de tal forma que o banner principal trouxesse a imersão necessária, seguido por uma vitrine de produtos, banners com as principais categorias e pelos ambientes em mosaico.

wireframe para loja virtual

3 – Design

A etapa de Design consista aplicar as cores, tipografia e imagens na estrutura definida na etapa de Wireframe. Além disso, é aqui que aplicamos os elementos da marca em toda parte da loja.

layout para loja virtual

layout para loja virtual

Um detalhe importante é a questão do design responsivo aplicado na loja, que se ajusta a qualquer dispositivo que usuário esteja usando para navegar na loja.

4 – Prototipação

Como a loja desenhada tinha algumas interações específicas, fez-se necessário elaborar um protótipo para mostrar essas interações para o cliente, mostrando como funciona o fluxo completo do usuário na loja online.

Clique aqui para ver o layout completo.