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:
Highlight - É uma cor utilizada para background e destaque de elementos, diferenciando da cor mais clara (brightness).
Midtone - É a cor intermediária utilizada para o texto de toda a loja, e também para botões secundários.
Shadow - É a cor de destaque do layout, utilizada para botões principais, textos em destaque e ícones.
Darkness - É a cor mais escura do layout, utilizada para títulos em destaque, alguns backgrounds e overlay de janela modal, por exemplo.
CTA - É a cor dos botões "Call to Action", usada principalmente no botão comprar e botões de finalizar compra no checkout.
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.