Sinestesia

Dentre as abordagens mais novas e modernas no marketing digital, se fala muito em design, mas não na simples abordagem de desenho do site mas de forma profissional no termo “web designer” que está relacionado ao Design thinking que é  um desenho realmente estudado e pensado para surtir efeito e resultado.

O objetivo de se gerar sentimento e emoção ao se visualizar um produto ou site.

A sinestesia é uma das ferramentas de Design gráfico que pode ser utilizada para estimular emoções no consumidor.

O estudo de melhores cores, posicionamento de itens, fontes, pode gerar um resultado excepcional e surpreendente no sentido de resultados.

Infelizmente qualquer profissional que sabe trabalhar com um programa de imagem e entende de programação html se auto denomina webdesigner. Porém um web designer profissional deve conhecer regras básicas da sinestesia. Quais fontes adequadas, quais cores adequadas para cada situação, a fim de gerar no cliente emoção e sentimentos adequados.

Usabilidade

Uma das principais características apontadas para um site quando se estuda marketing digital é a questão da usabilidade do site.

      Isso nada mais quer dizer se a loja virtual é de fácil uso e tem uma navegação clara e organizada. Na prática isso quer dizer que ao montar o layout de seu site você deve pensar como o seu cliente pensa e deixar as opções que ele mais precisa de forma clara e fácil de serem encontradas e acessadas, tanto no ambiente desktop como no ambiente mobile.

      Por isso é importante ter a possibilidade mudar de layout para fazer ajustes e principalmente concentrar no topo as opções de cadastro, login e contato. Também disponibilizar ao consumidor informações claras sobre suas compras.

      O menu de navegação assim como a ferramenta de pesquisa devem permitir que o cliente encontre de forma fácil o produto que procura.

      Ainda no contexto de usabilidade é preciso ter muito cuidado com cores e fontes utilizadas. Cores e fontes inadequadas além de tornarem a visualização da loja ruim podem dar a impressão de falta de seriedade e competência à loja virtual.

      Usabilidade quer dizer a grosso modo que a loja virtual deve ser de fácil uso. Não inventar demais nem poluir demais a loja. Acesso fácil a itens essenciais a navegação e uso do cliente.

Layout responsivo

Cada vez mais o uso de smartphones está presente no nosso dia a dia. Em 2017 o acesso médio à lojas virtuais de dispositivos móveis era de 40%. Em 2018 isso saltou para 60%, ou seja, 6 em cada 10 acessos a lojas virtuais é feita a partir de smartphones.

Não se preocupar como sua loja virtual é vista em smartphones, ou até mesmo se ela é minimamente navegável em um smartphone é um erro gigante.

Quando falamos em site responsivo é justamente o fato de ele se ajustar e ter características que o tornem agradável e funcional tanto para acesso em desktop e mobile.

Quando for escolher uma plataforma, teste como é funcionamento da loja virtual no ambiente mobile, isso fará muita diferença.

Para demonstrar o crescimento do uso de smartphones, segue prints de tela do Google Analytics que comprovam o crescimento dos acessos via celular nos sites e lojas virtuais.


Tabela de outubro de 2016

Tabela de outubro de 2017

Tabela de outubro de 2018

Tabela de novembro 2018 (com a data importante do black Friday)

Layouts padrões

Basicamente existem duas possibilidades quando se trata de loja virtual no ambiente desktop, loja com 100% de largura (que ocupa toda a largura da tela) e loja com largura fixa. É preciso observar e ter em mente que existem diversos tamanhos de monitores, logo se você optar por lojas com 100% de largura de tela, você pode ter uma experiência diferente em cada resolução de tela.

É muito mais fácil você trabalhar com larguras fixas, particularmente recomendo uma largura de 1.200 pixels. A grande maioria das plataformas tem algum valor próximo a isso como padrão quando setado a largura fixa.  

exemplo de loja com largura fixa e sobra nas laterais

exemplo de loja com largura de 100% de tela

Com uma largura fixa é mais fácil e simples trabalhar com banners, pois você não precisa criar banners muito grandes para ocupar toda a extensão do monitor em grandes resoluções.

As duas plataformas que recomendamos, assim como a grande maioria trabalham com layouts responsivos, que quando acessados em dispositivos com telas menores, elas automaticamente se adaptam se reorganizando dentro dos limites.

Outro aspecto importante é a utilização de menus laterais, sempre ficando a critério do cliente. A tendência é não utilizar o menu lateral, a não ser que a navegação dos produtos seja muito requerida, ou utilizar o menu lateral apenas nas páginas internas. Na página inicial é recomendado que seja dado foco nos produtos, na vitrine.

Normalmente as plataformas de e-commerce já dispõem de alguns modelos de templates e layouts de forma gratuita para o lojista escolher. E também é comum que o lojista possa modificar cores e fontes do layout via CSS.

Algumas plataformas oferecem pacotes de customização de layout como edição de cores e banners. É um caminho mais econômico do que investir na customização completa de um layout que pode chegar facilmente a 3, 4 mil reais. Já vi agências cobrando R$ 7 mil reais para customização de layout.  Pequenas customizações de cores e css saem uma fração desses valores.

Favicon

Favicon é aquela imagem pequena que fica na aba do navegador. Ela é obrigatória no sentido de SEO e ajuda muito na identificação da loja entre as abas. Ela não precisa ser exatamente a suo logotipo, até porque é praticamente impossível.

      Mas é imprescindível que represente as cores e identifique sua loja de alguma forma.

      Existem várias ferramentas na internet que ajudam a gerar o seu favicon. Algumas ferramentas até geram uma ícone a partir de seu logotipo, e outros permitem que você desenhe o ícone.

      O importante é que você gere um arquivo no formato .ico, normalmente o nome é favicon.ico. E este arquivo deve estar em seu e-commerce. 

      O favicon é um requisitado em termos de SEO, portanto é importante que ele exista. Hoje a maioria das plataformas coloca o ícone lá, mesmo que seja um genérico.

      Imagem a seguir demonstra alguns exemplos de favicons nas abas do navegador.

exemplo de favicons na prática

Logotipo

Logotipo é a parte escrita (o nome da marca) de forma estilizada.

O logotipo deve ser fácil de ler e visualmente agradável. O logotipo deve transmitir ao cliente segurança e os preceitos de sua empresa. Poderíamos nos alongar neste assunto por várias páginas, mas isso não é um custo de marketing então não vamos nos alongar.

      Quando for criar seu logotipo tenha em mente que o mesmo deve ter medidas e proporções adequadas para uma loja virtual. Normalmente os logotipos utilizados em lojas virtuais são mais largos do que altos. Algo do tipo 2:1, ou 3:1, (largura:altura), isso facilita muito na adequação de visual do logotipo na loja virtual.

Evite utilizar muitos detalhes pequenos no logotipo, veja como ele fica se for reduzido para 100 pixels de altura. Se pequenos detalhes não ficaram visíveis, repense eles.

As cores do seu logotipo devem ter a ver com a sua identidade visual desejada.  Evite utilizar mais que 3 cores.

Um logotipo deve representar os valores da sua empresa. Transmitir confiança, seriedade, confiabilidade de sua loja virtual. Inclusive o logotipo poderá transmitir o contrário, ou seja, falta de profissionalismo se ele não for algo muito bem trabalhado e pensado. Se você tem condições de investir um pouco no desenvolvimento de seu logotipo, é algo que recomendo e pode lhe trazer bons resultados.

      A imagem a seguir ilustra alguns exemplos de logotipos famosos:

exemplo de logotipos diversos

Alinhamento de vitrine

Você deve conhecer alguém que não gosta de ver as coisas tortas ou desproporcionais. Agora você imagina entrar em uma loja virtual e ver a vitrine desalinhada torta, com produtos cada um com um tamanho. A impressão que fica é que algo não está certo, de imediato você terá impressão que aquele site não é legal.

A maioria das plataformas hoje tenta ajustar as vitrines redimensionando as imagens, contudo por mais que se faça isso as imagens com excesso de desproporção ainda criam um espaçamento em branco que não deixa a aparência do site agradável. Ele fica alinhado, mas com muito espaço em branco no lugar onde deveria haver uma imagem.

Imagem de uma vitrine alinhada.

Isso se resolve com a padronização das imagens que são cadastradas no site e já foi mencionado quando tratamos do cadastro de produtos.

Outro ponto importante é padronização do tamanho do nome do produto, evitar ao máximo os nomes excessivamente longos.

No mais as plataformas sempre poderão lhe ajudar com ajustes nas vitrines, permitindo imagens maiores e talvez até alteração dos produtos por linha, que normalmente é 3 ou 4, se você tiver alguma necessidade especial e desejar ter 2 produtos por linha, converse com o suporte da plataforma, provavelmente é possível.

Nunca exagere na quantidade de produtos na vitrine inicial. Mais de 8 linhas de produtos é pouco recomendado.

Banners

Banners são as imagens grandes de promoções que aparecem nas lojas virtuais, geralmente abaixo do topo e acima das vitrines. Não confundir banners com logotipo da loja, muitos fazem essa confusão. Logotipo ou logotipo é a imagem da sua marca, geralmente posicionada no topo a esquerda.

Imagem de uma loja virtual que exemplifica bem o que é um banner e o que é um logotipo

Banners são utilizados para destacar produtos, categorias, políticas comerciais. Na sua grande maioria as plataformas de e-commerce possuem as seguintes posições de banners:

Topo principal: normalmente possui a possibilidade de se cadastrar vários nesta posição e criar um efeito randômico / aleatório na exibição.

Topo políticas comerciais: normalmente localizado abaixo do banner principal do topo, este, contudo é um faixa menor, com menos altura e é utilizado para destacar parcelamentos, descontos de boleto, promoções de fretes.

Banners laterais: se encontram nas laterais na loja.

Banners entre vitrines: se encontram entre ou abaixo das vitrines iniciais.

Muitas lojas virtuais utilizam muitos banners nas páginas iniciais, até mesmo para fazer vínculo com categorias de produtos principais. Cada banner pode conter um link que aponta para uma determinada página da loja virtual.

O fato interessante é que carregar uma imagem pequena, é mais leve que carregar a um produto de na  vitrine, assim a página inicial é carregada mais rapidamente.

Banners bem feitos e bem trabalhados deixam a loja virtual muito bonita e influenciam diretamente na experiência da “primeira impressão”. Evite ao máximo colocar banners mal feitos no site.

Dica: banners são destinados a dar destaque a loja virtual. Então é comum lojas somente com preto e branco, e banners coloridos que dão vida a loja.

Fontes, tipografia

Tipografia:

Do grego typos = forma  e graphein = escrita.

A tipografia utilizada (fonte) também pode ser uma forma elegante de diferenciar a sua loja sem poluir o visual do site. Sempre que possível utilize um fonte mais clássica e de fácil leitura mesmo em tamanhos menores de letra.  

Uma boa fonte pode dar um toque especial ao site sem um investimento grande. Só faço uma ressalva importante, fontes podem ser pesadas para o carregamento do site, portanto use com cautela. Uma ou até duas fontes são aceitáveis. Três ou mais poderá deixar o site lento, portanto evie.

Dentre as fontes recomendadas sempre utilize fontes do tipo Sans, (sem serifa, que são os prolongamentos), Sans-Serif (com prolongamento pode ser utilizadas em alguns casos). Evite fontes do tipo display, handwrite.

Exemplo de fonte Sans

Exemplo de fonte Sans-Serif

Exemplo de fonte handwrite

Em lojas virtuais optamos muito por fontes do tipo Sans de fácil leitura como OpenSans, Ubuntu, Verdana, Lato, Roboto.

Em alguns casos de lojas segmentadas são utilizadas fontes sans-serif como Droid Serif, Garamond, Gerogia e até mesmo Times New Roman, mas deve-se tomar muito cuidado com o tamanho das fontes, se forem muito miúdas, dificulta muito a leitura.

Cores mais adequadas para loja

Cada loja deve ter a sua identidade visual, normalmente acompanha-se o padrão de cores definido no logotipo da empresa.

Contudo em alguns casos as logotipos possuem cores complicadas de serem utilizadas no layout, nestes casos sempre recomendamos um layout limpo, branco com tons de cinza, ou preto.

Menos é mais, deve-se tentar sempre destacar os produtos. Muito comum é utilizar cores suaves ou até mesmo ausência de cores para fundo da loja, deixando apenas uma cor de fundo  no menu de navegação, para ampliar e destacar banners e produtos.

Para você ter uma boa ideia do que estamos falando analise seus concorrentes e outras lojas líderes de mercado. A maioria utiliza poucas cores na loja fora os banners. Obviamente existem exceções, lojas de brinquedos e roupas infantis são mais coloridas. Porém mesmo as lojas de roupas infantis que utilizam muitas cores, sempre utilizam cores pastéis, evite ao máximo utilizar cores berrantes, são poucos os casos onde elas ficam agradáveis.

A seguir, são listadas as Referências Naturais e os Simbolismos Psicológicos das cores primárias e secundárias do círculo cromático de Johannes Itten, segundo Morton (1997).

·        Vermelho

(Referências Naturais): fogo, sangue, carne crua, carne humana, rosas, cravos, maçãs, bagas, tomates, cardeais (pássaro vermelho), rubi. (Simbolismos Psicológicos): energia, calor, força, impulso, dinamismo, atividade, coragem, excitamento, amor, paixão, dominância, rebelião, agressão, guerra e combate, violência, sexualidade, prostituição.

·        Azul

(Referências Naturais): céu, oceanos e lagos, mirtilos, pássaros, peixes, mofo, lápis (pedra preciosa). (Simbolismos Psicológicos): espiritualidade, confiança, verdade, limpeza, tranquilidade, contentamento, imaterialidade, passividade, compreensão, conservadorismo, segurança, tecnologia, masculinidade, frieza e frio, introversão, melancolia, depressão.

·        Amarelo

(Referências Naturais): luz solar, areia, folhas de outono, milho, limões, banana, girassóis, narcisos, canários, peixes, ouro, topázio, cabelo humano e pelo animal, urina, fleuma, pus, icterícia na pele. (Simbolismos Psicológicos): alegria, esperança, vitalidade, luminosidade, iluminação mental e espiritual, comunicação, expansão, otimismo, filosofia, egoísmo, desonestidade, traição, covardia.

·        Verde

(Referências Naturais): vegetação em geral, lagos, esmeralda, jade, pássaros, peixes. (Simbolismos Psicológicos): natureza, crescimento, fecundidade, renovação, frescor, tranquilidade, esperança, juventude, saúde, paz, boa sorte, calma, inveja, imaturidade.

·        Laranja

(Referências Naturais): fogo, pôr do sol, laranja, manga, damasco, abóbora, inhame, flores e folhas de outono, peixe-dourado, cabelo humano e pelo animal. (Simbolismos Psicológicos): energia, alegria, atividade, excitamento, calor, grosseria.

·        Roxo

(Referências Naturais): orquídea, íris (flor), uva, ameixa, repolho. (Simbolismos Psicológicos): espiritualidade, misticismo, magia, fé, o inconsciente, dignidade, mistério, criatividade, consciência, inspiração, paixão, imaginação, sensibilidade, aristocracia e realeza, presunção, pompa, crueldade, luto, morte.

Círculo cromático de Johannes Itten