DESIGN SYSTEM - GUIA INTERNO
Este documento reúne o Design System do site e serve como referência para criação de telas futuras. Ele define os princípios visuais, regras e componentes que garantem consistência, escalabilidade e eficiência na criação e manutenção das interfaces.
Fonte para títulos H1 e H2: Helvetica Bold
Fonte para títulos H3, parágrafos e legendas: Montserrat
Utilizar apenas estas fontes para produzir as páginas e alterar qualquer fonte encontrada pelo site que seja diferente das acima, realizando a mudança respeitando a hierarquia tipográfica.
-
H1 é utilizado exclusivamente como o título principal da página.
-
H2 é empregado para dividir o conteúdo em seções principais.
-
H3 é utilizado para nomear e introduzir subtópicos ou blocos de conteúdo dentro dessas seções
Há duas medidas de espaçamento para as distâncias verticais do site, ambas baseadas em múltiplos de 8px.
Todas as páginas devem seguir o mesmo padrão de espaçamento, para conferir maior pregnância e uniformidade ao site.
-
A medida de 32px é utilizada para separar elementos dentro de uma mesma seção.
-
A medida de 56px é utilizada para separar seções.
Espaçamentos Horizontais:
Também há duas medidas de espaçamento principais para as distâncias horizontaisdo site.
-
A medida de 800px delimita a área onde pode haver texto, exceto em composições onde seja necessário ultrapasar a marcação, como na página das Zamioculcas. Ela dita o alinhamento geral da página. E está demarcada por duas réguas, visíveis ao clicar em Ferramentas, no canto superior direito.
-
A medida de 980px é o limite do site, e é destinada para elementos que ocupam a tela inteira, como banners, slides e imagens de destaque. Essa medida não deve ser ultrapassada, para garantir que todos os usuários tenham a mesma experiência, independente do tamanho de suas telas.
Todas as páginas de produtos devem seguir a seguinte estrutura:
-
Banner > Título H1 + Introdução > Slides > Cuidados + Carrossel > Variedades > Velling + Vendas > Onde comprar > Rodapé
-
Todos os textos devem ter alinhamento centralizado com a página, menos na seção de Cuidados, onde o texto é justificado e alinhado à esquerda ou direita da página, alinhado com o carrossel de imagens do produto.
A seção de cuidados possui uma hierarquia para os itens que serão utilizados, variando caso o produto seja uma Flor de Corte ou faça parte das demais categorias.
Flor de corte: Cuidados iniciais > Limpeza > Luminosidade > Rega;
Demais produtos: Origem > Disponibilidade > Luminosidade > Rega;
Categorias secundárias (são colocadas após Rega e seu uso varia de acordo com o produto): Poda > Adubação > Substrato > Produto não comestível.
Exemplo de cuidados para Flor de Corte:
Exemplo de cuidados para demais produtos:
Cuidados iniciais: Ao receber seu Buquê, faça um corte de 2cm na diagonal a partir da base de suas hastes e coloque-o em um vaso com água.
Limpeza: Retire as folhas e pétalas que murcharem para evitar a formação de musgos. Mantenha o vaso limpo.
Luminosidade: Mantena seu buquê sempre em local fresco, evitando exposição direta ao Sol, vento, ar-condicionado e aquecedores.
Rega: Substitua a água do vaso a cada dias. Lave o vaso a cada troca de água. Não borrife água sobre as flores.
Produto não comestível.
Origem: Ásia e África.
Disponibilidade: Ano todo.
Luminosidade: Pode ser cultivado em sol pleno, mas aclimatação gradual é necessária para evitar queimaduras. Em ambientes internos, escolha locais bem iluminados, próximo à janelas.
Rega: Regar de duas a três vezes por semana, ou sempre que o substrato estiver parcialmente seco ao toque, prestando atenção para não deixar o substrato com excesso de umidade e água acumulada no vaso.
Poda: A poda estimula brotações laterais e pode moldas a planta conforme desejado. A melhor época para podar é no início da primavera ou verão.
-
Veiling e Venda para Atacadistas:
Venda para ATACADISTAS:
A comercialização dos nossos produtos Terra Viva é realizada pelo Veiling Holambra (SP).
Mais informações: 0300 77 589 55
www.veiling.com.br
No wix, o desenvolvimento de páginas mobile está preso ao design da página versão web. Por conta disso, logo após aplicar alterações ou criar uma nova página, é essencial verificar sua versão mobile. A tendência é que esteja tudo fora de ordem e com espaçamentos bagunçados.
Para adaptar o padrão de tamanhos de espaçamentos no mobile segue-se o seguinte padrão: A distância entre blocos da mesma seção permanece 32px, mas a distância entre seções vai de 56px para 48px.
Este Design System é um documento vivo. Ele deve evoluir junto com o site, sempre priorizando clareza, consistência e facilidade de uso.
