Volume 03 de 06
VIVΛMKT
Branding Autêntico
03
UX, UI
e Wireframe
Como o ecossistema se parece e como ele se comporta. Direção visual, sistema de componentes e a estrutura de cada tela.
VIVΛMKT
Volume 03Experiência
Capítulo 01
O que a tela
precisa fazer sentir
Design não é enfeite: é argumento. Se o site da Viva não parecer uma marca bem posicionada, o serviço perde credibilidade antes da primeira palavra.
Objetivos da experiência
- Transmitir posicionamento premium
- Reduzir carga cognitiva
- Aumentar permanência
- Facilitar a navegação
- Gerar confiança
- Conduzir naturalmente à conversão
Conceito criativo
Movimento.
Sensações: estratégia, inteligência, organização, sofisticação, proximidade e confiança.
Evitar: excesso de animação, poluição visual e aparência de agência comum.
Moodboard conceitual
Referências: Apple · Stripe · Notion · Linear · Webflow · Framer · FutureBrand · Interbrand.
Conceitos: glassmorphism · dark premium · espaço negativo · tipografia forte · fotografia editorial.
O que essas referências têm em comum: nenhuma delas tenta impressionar. Todas usam espaço, contraste e hierarquia — e deixam o conteúdo carregar o peso. Um site que grita comunica insegurança. Sofisticação é o que sobra quando se tira o exagero.
Volume 03 · UX, UI e Wireframe02
VIVΛMKT
Volume 03Direção visual
Capítulo 02
Direção visual
A marca já existe. O site apenas a aplica — com disciplina.
Paleta
Regra crítica do verde-limão: em fundo escuro ele brilha; em fundo claro é ilegível como texto. Nesse caso, usar como fundo de selo com texto escuro, como barra/detalhe, ou a versão escurecida #6f7d12. Verde-limão sobre branco é o erro que destrói a marca na prática.
Tipografia
| Uso | Fonte | Tratamento |
|---|
| Títulos | Montserrat Black (900) | CAIXA ALTA, tracking generoso. Peso é a assinatura. |
| Subtítulos | Montserrat Bold (700) | Caixa alta em labels; caixa normal em subtítulos longos. |
| Corpo | Montserrat Regular (400) | Caixa normal, entrelinha 1.6. Nunca menor que 16px. |
Elementos gráficos
- Chevrons (∨∨∨) e diagonais — o movimento da marca, usado com parcimônia.
- Cards em vidro fosco sobre a base escura.
- Fotografia editorial real: equipe, reuniões, treinamentos. Zero banco de imagem genérico — é o que separa marca de folheto.
- Ícones minimalistas, traço fino, sem preenchimento.
Volume 03 · UX, UI e Wireframe03
VIVΛMKT
Volume 03Wireframe
Capítulo 03
Wireframe da home
A ordem das dobras não é estética — é argumentativa. Cada uma prepara a seguinte.
01 · HERO
Promessa + Diagnóstico VIVA 5D como CTA principal. WhatsApp como secundário.
02 · "A GENTE NÃO COMEÇA PELO POST"
A tese. Filtra o cliente errado e vende o carro-chefe. ← dobra mais importante do site
03 · MÉTODO VIVA
As 6 etapas + o ritmo quinzenal/mensal/trimestral. Neutraliza o medo do sumiço.
04 · PILARES / DIFERENCIAIS
Branding primeiro · ecossistema completo · diagnóstico antes da proposta
05 · SOLUÇÕES
As 9 frentes — HIERARQUIZADAS. Branding em destaque, não em grade igual.
06 · DIAGNÓSTICO VIVA 5D
Bloco dedicado. A conversão principal do site.
07 · RESULTADOS / PROVA
Números, cases, selos. Sem prova, a tese vira opinião.
08 · DEPOIMENTOS
Com nome, foto e empresa. Depoimento anônimo não prova nada.
09 · FAQ
Objeções respondidas antes de ditas. Também alimenta o GEO.
10 · CTA FINAL
Diagnóstico VIVA 5D. Sempre o mesmo destino.
11 · RODAPÉ
Institucional, redes, contato, políticas.
Por que a tese vem antes das soluções: quem vê o cardápio primeiro lê a Viva como mais uma agência e compara por preço. Quem entende a tese primeiro lê as 9 frentes como consequência de um método — e compara por valor.
Volume 03 · UX, UI e Wireframe04
VIVΛMKT
Volume 03Componentes
Capítulo 04
Sistema de componentes
Construir uma vez, usar em todo lugar. Componente reutilizável é o que permite escalar sem redesenhar.
| Componente | Regra de uso |
|---|
| Botão primário | Verde-limão, texto escuro. Um por dobra. Dois botões primários = nenhum. |
| Botão secundário | Contorno verde-limão sobre escuro. Para ações de apoio. |
| Card em vidro | Serviços, pilares, diferenciais. Sempre com título + 1 frase. Nunca vazio. |
| Badge / selo | Fundo limão com texto escuro. Para status e destaques ("carro-chefe"). |
| Bloco de estatística | Número grande + rótulo pequeno. Só com dado real. |
| Accordion (FAQ) | Primeira pergunta aberta. As demais fechadas. |
| Timeline | Para o método de 6 etapas e a jornada. |
| Depoimento | Foto + nome + empresa. Sem os três, não publica. |
| Banner de CTA | Sempre o Diagnóstico 5D. Repetido, idêntico, previsível. |
Regra anti-card-vazio: nenhum componente vai ao ar sem conteúdo real. Card com "Lorem ipsum", estatística inventada ou depoimento anônimo destrói mais confiança do que a ausência do bloco. Se não tem, não publica.
Volume 03 · UX, UI e Wireframe05
VIVΛMKT
Volume 03Comportamento
Capítulo 05
Movimento e mobile
O conceito criativo é "movimento" — mas movimento é ritmo, não agitação.
Motion design
- Fade e scroll reveal suaves — o conteúdo aparece conforme se lê.
- Hover discreto em cards e botões (elevação leve).
- Contadores animados nos números — só se os números forem reais.
- Parallax leve, se houver. Parallax pesado enjoa e prejudica a performance.
- Duração: 200–400ms. Acima disso, o site parece lento.
Teste de animação: se o visitante percebe a animação, ela está exagerada. Boa animação não é notada — apenas faz a navegação parecer natural. Animação que chama atenção para si é ego do designer, não serviço ao usuário.
UX mobile — onde a maioria chega
- Menu simplificado, com o Diagnóstico visível mesmo fechado.
- WhatsApp fixo no canto — o CTA secundário sempre à mão.
- Cards empilhados; nada de grade apertada.
- CTAs maiores — dedo não é cursor. Alvo mínimo de 44px.
- Foco absoluto em velocidade. Imagem pesada é lead perdido.
Volume 03 · UX, UI e Wireframe06
VIVΛMKT
Volume 03Qualidade
Capítulo 06
Acessibilidade
e checklist
Acessibilidade não é caridade — é alcance. E o que a ajuda também ajuda o Google e as IAs a lerem o site.
Acessibilidade
- Contraste adequado — atenção redobrada com o verde-limão (ver regra do Cap. 02).
- Hierarquia semântica real — um H1, H2/H3 encadeados. Não usar tag por aparência.
- ALT descritivo em toda imagem. Serve ao leitor de tela e ao SEO.
- Navegação por teclado funcional, com foco visível.
- ARIA onde for necessário — não onde for decorativo.
Checklist de aprovação
| Item | Critério |
|---|
| ☐ | Proposta de valor | Clara nos 5 primeiros segundos, sem rolar a página. |
| ☐ | Performance | Core Web Vitals no verde. Testar no PageSpeed oficial. |
| ☐ | Responsividade | Testado em celular real, não só no simulador. |
| ☐ | CTAs | Diagnóstico 5D no topo, meio e fim. WhatsApp sempre visível. |
| ☐ | Acessibilidade | Contraste, ALT, teclado, hierarquia. |
| ☐ | SEO técnico | Title, meta, canonical, schema, sitemap. (Volume 4) |
| ☐ | Conteúdo real | Zero placeholder, zero número inventado. |
Volume 03 · UX, UI e Wireframe07
∨∨∨
A forma
serve à tese.
Este volume define como o ecossistema se parece e se comporta — mas nenhuma decisão de design aqui é gosto: cada uma serve a um argumento do Volume 1.
A tese vem antes das soluções porque a ordem convence. O verde-limão brilha no escuro porque é onde a marca vive. O card não vai vazio porque confiança não se finge.
Próximo volume
Volume 5 — Sistema Estratégico de Copywriting.
O que o ecossistema diz: tom de voz, arquitetura persuasiva, CTAs, objeções e microcopy.