Ir para o conteúdo
17 / Veja na práticaINSPIRAÇÕES

Veja na prática.

Como o site deve ficar, aplicando o direcionamento.

01 · Inspirações

Como deve ficar.

A direção visual vista de perto, construída só com o sistema de design deste painel.

Paleta aplicada
ERPsó linha, marcador ou tag
DEVsó linha, marcador ou tag
TIsó linha, marcador ou tag
Manrope · escala
Tecnologia para organizar.
Conectamos gestão, sistemas e infraestrutura.
Gestão integrada para mais controle e resultado.

ERP, desenvolvimento de sistemas e infraestrutura de TI para empresas que buscam mais eficiência, controle e segurança.

Grid e espaço em branco

7 + 5 colunas, 1200px, respiro de 120px entre seções.

Radius, bordas e ícones
Primário→

6px em botões, 12px em cards, borda de 1px, ícones lineares de 1,5px.

Fotografia

Ambientes reais: equipes, indústria e infraestrutura.

Hero editorial assimétricoO que a torna SouTech: texto em 7 colunas com peso tipográfico, fotografia real e a faixa navy que apresenta as três especialidades sob uma marca.
As três especialidadesO que a torna SouTech: mesma estrutura para ERP, DEV e TI; a cor da unidade aparece só na linha superior.
Direcionamento por desafioO que a torna SouTech: o visitante escolhe pelo problema, e o site responde com a especialidade certa.
Tecnologia integrada em camadasO que a torna SouTech: as três áreas como camadas de uma só operação, com a SouTech como base.
Diferenciais em tipografia e linhasO que a torna SouTech: frases curtas, numeração e divisores no lugar de ícones.
CTA finalO que a torna SouTech: fundo navy, uma frase, um botão.

Faça e evite

Cor da unidade
Fazer
ERP

Gestão integrada para mais controle e resultado.

Não fazer
ERP

Gestão integrada para mais controle e resultado.

Fundo
Fazer
Conectamos gestão, sistemas e infraestrutura.
Não fazer
Conectamos gestão, sistemas e infraestrutura.
Diferenciais
Fazer
  • Mais controle.
  • Operação integrada.
  • Suporte próximo.
Não fazer
⚙
☁
🔒
📊
⚡
🛠
Imagem
FazerAmbiente industrial
Não fazer
01001 { cadeado + globo + circuito } 10110
02 · Páginas

Páginas simuladas.

Cada página usa os componentes e tokens reais. Troque o viewport e ligue as anotações.

03 · Elementos

Elementos em uso.

Header com menu Soluções aberto, menu mobile, botões, cards, tags, FAQ, filtro, formulário, timeline, cookies, 404 e obrigado.

04 · Fluxos

Fluxos clicáveis.

Clique dentro da simulação ou use os passos para pular etapas.

  2. →
  3. →
  4. →
← Anterior
Assets e requisitos técnicos
Próximo →
Decisões do projeto