Um guia de estilo é um documento que descreve tudo o que é necessário para a criação de uma página, elementos ou postagem nas redes sociais.
Esse guia é detalhado e inclui gráficos (botões), logotipos, estilos fontes, tamanhos de fontes, cores de texto, plano de fundo, aplicativo, newsletter e qualquer outra coisa que diga respeito a atualizações da loja virtual e criação de conteúdo.
O guia é fundamental quando existe mais de um designer ou desenvolvedor trabalhando no mesmo projeto. Dessa forma, o projeto seguirá os mesmos padrões de design e desenvolvimento.
Dentro do guia de estilo, determinamos:
Cores
Se a loja virtual já tem uma paleta de cores com a qual trabalham, é perfeito!
Nem sempre isso acontece, nesse caso precisamos escolher as cores primárias e secundárias.
As cores primárias são as cores principais específicas da empresa, enquanto as cores secundárias representam as cores adicionais utilizadas para realces.
Ao decidir sobre a cor dos títulos principais, é recomendável escolher uma cor mais escura e usar um mais claro ou o mesmo matiz para o corpo do texto.
Lembre-se de que o preto não é a melhor escolha para a cor do texto porque não é uma cor quente e é menos legível, então escolha tons mais claros de preto. Quando você tem as cores primárias e secundárias, basicamente tem sua paleta de cores com tonalidades diferentes para exposição dos elementos.
Um fator importante é garantir a legibilidade. Devemos ter isso em mente se quisermos escolher os tons de fundo corretos para o texto.
A psicologia das cores é o estudo que revela como o cérebro humano identifica e entende as cores de diferentes formas, influenciando em suas emoções, sentimentos e desejos.
Veja como aplicar a psicologia das cores no e-commerce.
Se a loja virtual já tem uma paleta de cores com a qual trabalham, é perfeito!
Nem sempre isso acontece, nesse caso precisamos escolher as cores primárias e secundárias.
As cores primárias são as cores principais específicas da empresa, enquanto as cores secundárias representam as cores adicionais utilizadas para realces.
Ao decidir sobre a cor dos títulos principais, é recomendável escolher uma cor mais escura e usar um mais claro ou o mesmo matiz para o corpo do texto.
Lembre-se de que o preto não é a melhor escolha para a cor do texto porque não é uma cor quente e é menos legível, então escolha tons mais claros de preto. Quando você tem as cores primárias e secundárias, basicamente tem sua paleta de cores com tonalidades diferentes para exposição dos elementos.
Um fator importante é garantir a legibilidade. Devemos ter isso em mente se quisermos escolher os tons de fundo corretos para o texto.
A psicologia das cores é o estudo que revela como o cérebro humano identifica e entende as cores de diferentes formas, influenciando em suas emoções, sentimentos e desejos.
Veja como aplicar a psicologia das cores no e-commerce.
Tipografia
Você sabia que a tipografia representa 95% da sua loja virtual? Mais um motivo para ter certeza de usar a tipografia apropriada que melhor descreve sua empresa.
Em seu guia, identifique claramente os nomes das fontes, tamanhos e altura da linha. Isso torna muito fácil para futuros designers recriar a aparência apropriada do seu site.
O tamanho do corpo do texto pode ser determinado usando tamanhos diferentes e comparando-os entre si para ver qual deles tem a melhor legibilidade no notebook e no mobile.
Um ponto importante é a hierarquia dos títulos. A hierarquia é a seguinte: H1, H2, H3 e assim por diante.
Acesse o Google Fonts e descubra qual fonte combina com sua marca.
Você sabia que a tipografia representa 95% da sua loja virtual? Mais um motivo para ter certeza de usar a tipografia apropriada que melhor descreve sua empresa.
Em seu guia, identifique claramente os nomes das fontes, tamanhos e altura da linha. Isso torna muito fácil para futuros designers recriar a aparência apropriada do seu site.
O tamanho do corpo do texto pode ser determinado usando tamanhos diferentes e comparando-os entre si para ver qual deles tem a melhor legibilidade no notebook e no mobile.
Um ponto importante é a hierarquia dos títulos. A hierarquia é a seguinte: H1, H2, H3 e assim por diante.
Acesse o Google Fonts e descubra qual fonte combina com sua marca.
Grade
A grade de conteúdo é a maneira perfeita de identificar como as páginas e as postagens devem ser dispostas.
Ela mostra onde as imagens e gráficos devem ser posicionados entre o texto e seus espaçamentos. Dessa forma, o desenvolvedor tem um trabalho mais fácil e também nos ajuda a manter a consistência da imagem visual.
Gráficos e Ícones
Ao criar os ícones, botões e outros gráficos concentre-se no estilo. Se eles são preenchidos ou ícones de linha, coloridos, preto e branco e assim por diante.
Faça testes de usabilidade. Os ícones são elementos gráficos frequentemente usados em projetos. Eles ajudam a simplificar o design e dar mais clareza nas informações para os clientes.
Veja como criar ícones para telas sensíveis ao toque.
Fotos
É necessário definir as especificações das fotos dos produtos, banners, e-mail marketing, etc.
Ao especificar a largura e a altura das imagens, a loja virtual será equilibrada com todos os outros elementos.
Muitos programas aplicam filtros ou efeitos em imagens que são inseridos em postagens nas redes sociais. Tome cuidado para não ir contra a paleta de cores da loja.
Outros
Não esqueça dos estilos dos formulários, depoimentos, dos botões secundários e primários.
É importante definir os efeitos dos botões e outras animações da página.
Por que você deve usar um guia de estilo?
A grade de conteúdo é a maneira perfeita de identificar como as páginas e as postagens devem ser dispostas.
Ela mostra onde as imagens e gráficos devem ser posicionados entre o texto e seus espaçamentos. Dessa forma, o desenvolvedor tem um trabalho mais fácil e também nos ajuda a manter a consistência da imagem visual.
Gráficos e Ícones
Ao criar os ícones, botões e outros gráficos concentre-se no estilo. Se eles são preenchidos ou ícones de linha, coloridos, preto e branco e assim por diante.
Faça testes de usabilidade. Os ícones são elementos gráficos frequentemente usados em projetos. Eles ajudam a simplificar o design e dar mais clareza nas informações para os clientes.
Veja como criar ícones para telas sensíveis ao toque.
Fotos
É necessário definir as especificações das fotos dos produtos, banners, e-mail marketing, etc.
Ao especificar a largura e a altura das imagens, a loja virtual será equilibrada com todos os outros elementos.
Muitos programas aplicam filtros ou efeitos em imagens que são inseridos em postagens nas redes sociais. Tome cuidado para não ir contra a paleta de cores da loja.
Outros
Não esqueça dos estilos dos formulários, depoimentos, dos botões secundários e primários.
É importante definir os efeitos dos botões e outras animações da página.
Por que você deve usar um guia de estilo?
- Tempo de construção mais rápido para novas seções e páginas
- A consistência do design é mais fácil de manter
- Designers, desenvolvedores e proprietários de conteúdo têm um guia completo para referência
- Os novos colaboradores que ingressam no projeto podem consultar o guia para saber o uso do estilo
- Mantém o código e o design consistentes em toda loja virtual
- O guia permite padronizar o código (CSS, JS, HTML), mantendo-o pequeno e rápido de carregar.
Boas vendas!
Este artigo foi escrito por Adriano Yamuto, da equipe de desenvolvimento do Fastcommerce.
Postar um comentário