🎁 presente grátis

Mini-dicionário do Site Premium

Os 12 nomes que todo site premium usa.

Você já viu todos eles em algum site. Agora vai saber como se chamam, como se fala e o que cada um faz.

!Como usar: quando for pedir um site para a IA, use o nome certo em vez de "deixa bonito". Ela entende muito melhor.

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

Esses são os básicos. Os que impressionam estão trancados.

O dicionário completo tem mais 39 efeitos, incluindo aqueles que fazem a pessoa parar e pensar "como fizeram isso?".

11vídeo e 3D• • • • • •
6rolagem• • • • • •
7visual• • • • • •
5mouse• • • • • •
5imagens• • • • • •
5estrutura e técnico• • • • • •
Ver o kit completo