Do modelo ao design personalizado de comércio eletrônico

Você já usou um terno ou vestido feito sob medida? A maioria das pessoas não, exceto por alguns momentos especiais em suas vidas. Na maioria das ocasiões, eles escolhem uma seleção do rack, e essa escolha será adaptada em alguns lugares. Uma bainha aqui, uma dobra ali, e você terá uma peça de roupa maravilhosa e funcional. Mas algumas vezes em sua vida, você pode ter a sorte de ter um alfaiate talentoso começando do pedaço de tecido. Eles vão tirar suas medidas, falar com você sobre a peça que você quer, e cada ponto que eles fizerem terá um propósito, um objetivo em mente. Esta é, essencialmente, a diferença entre um modelo de site e um site personalizado. Um gabarito pode ser retirado do rack, alguns ajustes feitos, e ser um site perfeitamente funcional. Mas um design personalizado de comércio eletrônico exige mais reflexão, mais tempo e pode ser perfeitamente adaptado para a marca que você deseja mostrar ao mundo.

Vou explicar o que quero dizer usando 1Digital Agência como exemplo. Afinal, não somos perfeitos. Nós também podemos ser sugados pela solução rápida de um modelo pronto para uso. Temos um site irmão chamado Genius eCommerce . Já era um blog da indústria no WordPress há algum tempo, mas há alguns meses mudamos para um site de agência falando especificamente sobre nossos serviços de marketing digital de comércio eletrônico. Quando fizemos esse pivô, queríamos fazer algo o mais rápido possível, e por isso usamos um modelo do WordPress. À medida que trabalhamos com o site, descobrimos que todas as coisas sobre as quais alertamos nossos clientes ao considerar um site modelo, como otimização para conversão, velocidade e branding coeso, estavam se tornando problemas para o Genius eCommerce também. Então decidimos tomar uma dose do nosso próprio remédio e dar Genius eCommerce um design personalizado de comércio eletrônico de baixo para cima. A diferença é incrível.

O modelo

O modelo é um design WordPress/Woo-commerce. Como você pode ver, parece bom. Usamos algumas das fontes e cores da nossa marca para torná-la visualmente coesa com o 1Digital local.

Também usamos os mesmos pacotes de ícones para conectá-lo ainda mais ao 1Digital marca.

Desenvolvemos o modelo com algumas seções de desenvolvimento personalizadas para destacar alguns de nossos clientes e estudos de caso.

E aí está! Um site de modelo perfeitamente funcional, instalado e funcionando muito rapidamente.

Nosso gerente de contas de SEO, Colin, foi o primeiro a perceber alguns dos problemas com ele. “A velocidade do site foi o primeiro problema que notei”, Colin me disse ao descrever sua auditoria de SEO do site. “As imagens não foram otimizadas adequadamente e os scripts de terceiros não estavam sendo carregados no site da maneira mais eficiente.” Além disso, o site estava começando a ver alguns rankings do Google. Queríamos ter certeza de que as páginas para as quais trabalhávamos tanto para levar os visitantes de volta fossem atraentes. “O site não tinha personalidade, não tinha dentes”, Colin me disse.

Roteiro para um novo design

O primeiro passo em qualquer design personalizado de comércio eletrônico que fazemos com nossos clientes é traçar um roteiro. Analisamos os sites que o cliente gosta e tentamos descobrir por que eles trabalham para esse setor e qual é a mensagem essencial que o site precisa transmitir. Para 1Digital Agência temos a maior parte de todo o nosso negócio para falar, mas o Genius eCommerce estava focado apenas no braço de marketing do que fazemos. “A ideia era focar em uma coisa realmente específica e, portanto, o design deve ser muito simples”, Art, 1Digital 's designer-chefe, me disse. Para inspiração, analisamos a interface do usuário plana usada pelo Google.

Art também queria jogar fora da identidade da marca utilizando o termo 'gênio'. “Eu queria dar um sentimento acadêmico e cerebral. Para se conectar com a ideia genial”, Art me disse. “Como se você estivesse lendo um trabalho acadêmico.”

Criando um novo logotipo

“Um novo site deve ter seu próprio logotipo”, disse Art. Os logotipos são uma base incrivelmente importante no mundo do design. Ao iniciar um novo design personalizado para um cliente, tomamos dicas de seu logotipo sobre sua paleta de cores, seu estilo gráfico e o tom de sua marca em geral. “A ideia do logotipo foi o que solidificou para mim como eu queria interagir com o resto do design”, Art me disse.

Um bom logotipo deve ter um elemento visual interessante, algo que chame a atenção. Um bom logotipo também será capaz de expressar visualmente algo sobre a mensagem da marca. Você pode ver abaixo um pouco da evolução que ocorreu na criação do novo logotipo que decidimos para o Genius eCommerce .

Você pode ver como alguns dos gráficos que a Art estava considerando se juntaram na versão final. O diagrama de átomos, representando o gênio, e o carrinho, representando o comércio eletrônico, foram combinados para o elemento gráfico do logotipo. Esta é a parte do design que comunica visualmente a mensagem da marca. Seu cérebro já entende esses dois símbolos bem reconhecidos em um nível inconsciente. Ele lê o logotipo como uma combinação dos dois conceitos principais. Além disso, observe o fato de que o elétron giratório no átomo dobra como o 'i' pontilhado na palavra gênio. Este é aquele elemento visual interessante que captura seu olho, mesmo que você não o reconheça no início.

Paleta de cores

As cores usadas no logotipo definem a paleta de cores usadas em todo o site. Eles são empregados em diferentes áreas para diferentes efeitos.

Você pode ver acima como o verde-azulado e o vermelho do logotipo são usados ​​para destacar os diferentes itens de ação na página. As duas cores são empregadas para criar uma hierarquia de informações. O vermelho/laranja é mais brilhante e agressivo, por isso é usado com mais moderação em todo o site. Quando é usado, é para chamar a atenção para as ações de maior prioridade como 'começar' e 'solicitar um orçamento'. A cerceta é um pouco mais suave e, portanto, é usada para elementos que ainda queremos chamar a atenção, mas não tanto quanto a chamada direta para ações. Itens como 'nossa empresa' e 'nossa reputação'.

A cerceta também é empregada nos cabeçalhos das páginas. Observe como, usando cores, os títulos das páginas são divididos em um título principal e um subtítulo enquanto ainda conseguem ficar todos em uma linha.

O novo site tem mais do que apenas duas cores, é claro. Para outros lugares que precisávamos de um pouco de tinta, nos referimos ao 1Digital paleta da marca. Isso é algo que toda marca deveria ter. Uma paleta de marca é um conjunto de diretrizes sobre como a cor e outros elementos de design gráfico devem ser usados. Dessa forma, eles são fáceis de manter consistentes em todas as suas diferentes mídias, da web, à impressão e às camisetas da empresa.

Essas cores adicionais na paleta da marca foram usadas no site para diferenciar as seções. “Uso cores para indicar ao usuário que ele está em uma seção diferente do site”, disse Art. Como você pode ver nas páginas abaixo, o roxo no cabeçalho corresponde às páginas da plataforma, enquanto o laranja corresponde aos canais de marketing digital.

Você verá que o 1Digital principal A cor da marca da agência, o azul claro do nosso logotipo, é salva apenas para um ponto. É usado em seções que levam de volta ao nosso site principal.

A razão para o design personalizado de comércio eletrônico

Muitos clientes em potencial me perguntam 'por que esperar por um design personalizado quando um modelo pode ser implantado de forma muito mais rápida e barata?' Na minha opinião, o motivo nunca foi mais claro do que o que experimentamos com o Genius eCommerce . Um modelo pode ser estilizado. Você pode adicionar fontes e cores, fazer algumas alterações aqui e ali, mas no final, você está fazendo pequenas personalizações em um site que foi criado para outra pessoa. Quando você passa por um processo de design personalizado de comércio eletrônico, cada decisão ao longo do caminho, não importa quão pequena, tem alguém pensando em sua marca e sua mensagem por trás dela. De algo tão grande quanto um logotipo, até tão pequeno quanto a cor a ser usada nos botões do rodapé. A soma total de cada uma dessas pequenas decisões tomadas ao longo do caminho é inquantificável. Eu falo o tempo todo sobre como sites personalizados podem ser melhor otimizados ou converter mais facilmente, mas no final, esse é o principal benefício que é difícil de explicar até que você tenha passado pelo processo pelo menos uma vez. Com um projeto de design personalizado, você não está vestindo um terno mal ajustado. Você está vestindo uma peça de roupa formal que foi adaptada com sua forma em mente em cada etapa do processo. Essa aparência personalizada é como você causará sua primeira impressão em todas as pessoas que encontrarem seu site.

Se você está definhando em um modelo por muito tempo, talvez seja hora de considerar a atualização para algo personalizado. Nossos designers especialistas em comércio eletrônico ouvem sua história e ajudam você a contá-la com um site. Entre em contato conosco em 1Digital Agência e veja como um processo de design personalizado de comércio eletrônico pode desbloquear um novo potencial para o seu site.

baixar PDF