01Estrutura
Hero
fala-se: rírou
A primeira tela do site
É o que aparece assim que o site abre: o título principal, a imagem ou o vídeo de impacto e o botão mais importante. Se ela não prender em 3 segundos, a pessoa vai embora.
exemplo + frase pronta no completo
02Estrutura
Above the fold
fala-se: abâv dê fôld
O que aparece sem rolar
Tudo o que a pessoa enxerga antes de rolar a página. É ali que precisa ficar o que mais importa, principalmente no celular.
exemplo + frase pronta no completo
03Estrutura
CTA
fala-se: cí-tí-ei · call to action
O botão de ação
O botão que faz a pessoa agir: pedir, agendar, chamar no WhatsApp. Todo site precisa deixar claro qual é o CTA principal.
exemplo + frase pronta no completo
04Estrutura
Navbar
fala-se: név-bar · também chamado de header
O menu do topo
A barra lá em cima com o logo e os links das seções. Em site premium ela costuma ser discreta e às vezes some enquanto você lê.
exemplo + frase pronta no completo
05Estrutura
Footer
fala-se: fúter
O rodapé
O fim da página, com endereço, horários e redes sociais. É a última impressão do site, então também merece capricho.
exemplo + frase pronta no completo
06Estrutura
One-page
fala-se: uan peidj · ou landing page
Site de uma página só
Todo o conteúdo numa única página longa, que a pessoa vai descendo. Para a maioria dos pequenos negócios, é o formato ideal.
exemplo + frase pronta no completo
07Rolagem
Smooth scroll
fala-se: smúth iscról
Rolagem suave
A página desliza macia, com um pouco de peso, em vez de pular aos trancos. Sozinho, já dá sensação de site caro.
exemplo + frase pronta no completo
08Rolagem
Reveal on scroll
fala-se: rivíl on iscról
Aparecer ao rolar
Textos e imagens surgem com suavidade quando chegam na tela, em vez de já estarem todos parados ali.
exemplo + frase pronta no completo
09Mouse
Hover
fala-se: rôver
Efeito ao passar o mouse
Qualquer mudança quando o mouse passa por cima de algo: a foto aproxima, a cor muda, aparece uma informação. Mostra que o site "responde".
exemplo + frase pronta no completo
10Visual
Typography
fala-se: taipógrafi
A escolha das fontes
Qual fonte usar, o tamanho, o peso e o espaço entre as letras. É o detalhe que mais separa site amador de site profissional.
exemplo + frase pronta no completo
11Visual
Whitespace
fala-se: uáit-ispeis
Espaço vazio de propósito
O espaço livre entre as coisas. Site premium "respira"; site amador tenta encher cada canto da tela.
exemplo + frase pronta no completo
12Celular
Mobile-first
fala-se: môbail fârst · ou responsivo
Pensado primeiro para o celular
O site é planejado começando pela tela do celular, onde está a maioria das pessoas, e depois ampliado para o computador.
exemplo + frase pronta no completo