Layout Terceirizado - Requisitos e Recomendações

Este documento tem como objetivo orientar não necessariamente sobre boas práticas de design, mas sim do ponto de vista de frontend e desenvolvimento web, a fim de que o resultado final seja o mais fiel possível ao layout criado na etapa de design.

 

Formato do arquivo

Os arquivos devem ser editáveis e feitos preferencialmente utilizando softwares específicos para layout e prototipação para web, como:

  • Sketch
  • Figma
  • Adobe XD 

.Arquivos que não estejam nos formatos citados não serão aceitos.

 

O que precisa de layout

 

Precisamos do design de todas as páginas que serão personalizadas e foram estipuladas em contrato, inclusive a versão mobile (caso esteja inclusa). Nos arquivos, tudo o que não utilizará o visual padrão do tema da Biz também precisa de design, como por exemplo o segundo nível do menu de categorias, hover de produtos, entre outros. Caso não tenha a ilustração desses elementos, eles ficarão com a aparência padrão do tema.

 

Ícones, fonte e cores

Ícones

 

Para otimizar o carregamento da loja, utilizamos todos os ícones no formato SVG, portanto eles devem estar nesse formato no layout. Os ícones devem estar em shape, e não devem apresentar efeitos que não podem ser reproduzidos com fidelidade no CSS (multiply, overlay, etc.)

 

Fontes

 

As fontes utilizadas no layout devem ser preferencialmente do Google Fonts, mas caso seja utilizada uma fonte personalizada adquirida pelo cliente, precisamos dos arquivos da fonte (otf ou ttf). Recomendamos a utilização de no máximo duas fontes diferentes, e também de dois pesos de fontes diferentes, pois cada fonte/peso é uma requisição feita ao servidor e adiciona tempo de carregamento da página.

O tamanho padrão de texto para desktop é 16px, nunca deve ser menor que 12px.

 

Cores

 

Em nosso tema base utilizamos variáveis de cores que podem ser editadas pelo painel, por isso é importante que no design isso seja levado em consideração. Caso um design tenha mais cores, elas serão adicionadas no frontend sem problemas, porém não serão editáveis via painel. Abaixo segue um exemplo do esquema de cores editáveis e como elas são geralmente utilizadas:

 

1.png

 Brightness - É a cor mais clara do tema, utilizada para background e textos de botões com fundo escuro.
 

2.png

Highlight - É uma cor utilizada para background e destaque de elementos, diferenciando da cor mais clara (brightness).

 

3.png

Midtone - É a cor intermediária utilizada para o texto de toda a loja, e também para botões secundários.

 

4.png

Shadow - É a cor de destaque do layout, utilizada para botões principais, textos em destaque e ícones.

 

5.png

Darkness - É a cor mais escura do layout, utilizada para títulos em destaque, alguns backgrounds e overlay de janela modal, por exemplo.

 

6.png

CTA - É a cor dos botões "Call to Action", usada principalmente no botão comprar e botões de finalizar compra no checkout.

 

7.png

Grey - É uma cor neutra utilizada originalmente para bordas de elementos, como por exemplo os inputs, e também como background de alguns elementos do carrinho e checkout.

 

 

Tem mais dúvidas? Envie uma solicitação