Seis dicas de web design, por um designer do Squarespace

Ao criar um novo site, você talvez saiba o básico do que o compõe — imagens, texto e links para navegar nele. Para muitas pessoas, porém, o difícil como criar. Qual deve ser o tamanho dos textos? Como escolher os recursos visuais de uma página? 

Os templates do Squarespace e o Kit de Design Squarespace com IA são um bom ponto de partida, mas é bom dominar algumas regras de design para criar uma site exclusivo. Pedimos a Jon Wilson, um dos experts em design de produto por trás dos templates do Squarespace, alguns conselhos para lidar com os princípios básicos do design do site.

Os dois principais componentes do design do site

As diferentes partes que compõem o design do site se enquadram em duas categorias principais: design visual e interface funcional do usuário (UI).

1. Design visual: inclui tudo o que você vê, como paletas de cores, fontes e tipografia, layout, tom de voz e recursos visuais (ícones, fotos, ilustrações etc.).

2. IU funcional: é tudo com que os visitantes interagem no site, como botões, navegação, formulários, páginas de produtos e finalização da compra na loja.

Para orientar suas escolhas no design, primeiro você precisa "definir a meta estratégica do site, seja ela a pura expressão da marca, a hospedagem de informações, a conversão, a venda, a captura de leads ou qualquer outra coisa", explica Wilson. 

"A meta do site é dar suporte aos leads que chegam e se comunicar com os clientes? O foco, então, é apresentar o conteúdo de forma acessível, mais acima na página, garantindo que ele descreva as expectativas dos campos de entrada das informações e facilitando o acesso dos clientes a você."

Estabeleça as metas com base nos nossos dez princípios básicos de web design

1. Escolha os recursos visuais com o contexto e a finalidade em mente

Ao escolher os recursos visuais para o site, use imagens ou designs que reflitam a sua marca ou missão nas letas, paletas de cores ou assunto. 

Em seguida, considere a função e o posicionamento dos recursos visuais. Isso lhe dará uma ideia de quantos são necessários e onde colocá-los.O objetivo principal de um recurso visual é:

• Transmitir informações

• Dar contexto ao texto

• Provocar uma emoção

• Decorar

• Uma combinação dos itens acima

Em caso de dúvidas, considere a função das imagens. "As imagens hero, por exemplo, precisam chamar a atenção, abrir espaço para um texto legível e definir efetivamente o tom para o restante do site", descreve Wilson. 

A qualidade das imagens também é importante. "Se você não tiver os melhores recursos visuais para mostrar; ou se estiver ocupado demais para criar algo de qualidade, considere reduzi-los", aconselha Wilson. "Também recomendamos evitar usar ativos de baixa qualidade como tela cheia."

Confira outras dicas para adicionar fotos ao site

2. Use textos claros e breves

"Um antigo estudo do grupo Nielsen Norman sugere que, em média, os usuários leem cerca de 20% das palavras em uma página da web", diz Wilson. "Os textos longos, com exceção das experiências editoriais, são difíceis de criar e absorver. 

Em resumo, no que tange a quantidade de palavras na tela: menos é realmente mais."

Use as seguintes diretrizes como um checklist ao analisar o texto que você escreve.

• Considere o público-alvo

• Evite redundâncias

• Use uma linguagem clara

• Crie textos fáceis de passar o olho

Ao criar as chamadas para ação (CTA), como botões e textos que pedem para alguém entrar em contato, ler ou comprar algo, deixe claro para onde o clique levará as pessoas. A CTA deve ser curta, geralmente com até 20 caracteres, e deve incentivar a ação, como "Compre agora". 

Não existe uma regra geral para os sites. Quantas palavras são necessárias para transmitir seu ponto de vista com o seu tom de voz?

Em caso de dúvida, olhe sites semelhantes ao seu. Veja onde os textos são mais longos e mais curtos. Em algum momento, você se vê só passando o olho ou se distraindo? O texto na página inicial provavelmente tem até 200 palavras, por exemplo. Já a página "Quem somo" pode ter umas 500 palavras. 

Saiba como usar o Squarespace AI para criar seus textos

3. Criar links de navegação orientados para a ação

A navegação é onde você tem o maior controle sobre as partes funcionais do site. Para criar uma navegação fácil de usar, considere dois aspectos principais.

1. A meta fundamental do site

2. Menos é mais, mesmo na navegação

"Seu site é uma ferramenta para facilitar a compra on-line dos seus produtos? Ele precisa de pontos entrada fáceis para que os visitantes agendem um horário com você?" pergunta Wilson. "Essas metas definem como você estruturará a linguagem da navegação e as principais chamadas para ação, como 'Confira os produtos' ou 'Agendar'."

A abordagem "menos é mais" garante que os visitantes do site encontrem, de forma rápida e eficiente, o que procuram. "Ela reduz a quantidade de informações que o visitante precisa ler antes de encontrar os links mais relevantes", conclui Wilson. "É tentador criar uma página para cada aspecto da empresa e, em seguida, criar um link para essa página na navegação principal, mas pode confiar: mantenha a simplicidade."

Leia nosso guia para criar a navegação

4. Crie um painel semântico

Se já começar direto no editor do site parecer demais, crie um painel semântico com recursos visuais e sites inspiradores. Procure padrões no que você salvou, como cores, estilos de texto e layouts.

"Após coletar um repositório de layouts, paletas de cores e outras composições de design, é hora de criar alguns layouts — e é aí que começa a diversão", conta Wilson. "No editor do site do Squarespace, você explora várias possibilidades de design até chegar a uma iteração adequada à sua marca." 

5. Em caso de dúvida, comece com o hero

A seção hero — o espaço imediatamente após o logotipo e a barra da navegação principal — costuma ser uma das seções mais importantes do site. 

"Com essa visão inicial do seu site, os visitantes levam literalmente menos de um segundo para formar uma impressão sobre sua empresa", revela Wilson. "Por isso, o design visual, o layout, o conteúdo, a mensagem e a chamada para ação no hero são extremamente importantes, além de uma oportunidade de definir o tom visual para o restante do site."

No hero, escolha uma imagem e/ou texto que resuma sua marca ou empresa e o que você oferece aos visitantes do site. Um recurso útil para os usuários do Squarespace é o catálogo de seções, com designs selecionados que podem ser aplicados instantaneamente ao site.

"Se sua empresa ou marca não tiver um padrão visual definido nesse estágio, o hero também é uma excelente oportunidade de explorar diferentes combinações de fontes, cores, imagens e layouts", acrescenta Wilson. "Essa tarefa pode parecer complicada, mas vale a pena reiterar que é apenas uma seção do site. Você não precisa ter todas as respostas para cada seção em cada página."

6. Faça algo exclusivo

"Uma personalidade ou 'assinatura de design' exclusiva é essencial para criar uma experiência digital marcante", orienta Wilson. "Chamar a atenção do público-alvo e eliminar o ruído é uma forma de fazer sua marca ou empresa se destacar, atrair ou mesmo converter novos clientes. Após definir o caráter geral da marca, você já pode usar esses atributos na sua criatividade. Especificamente, gostamos de brincar com cores, tipografia, layout, gráficos o e tom do conteúdo."

• Tipografia: entre na biblioteca de fontes exclusivas do Squarespace e encontre uma que combine com a personalidade e o visual da sua marca. Use recursos como o "Escala do texto" para brincar com os contrastes de escala entre o texto do título grande e o texto do corpo.

• Layout: mexa com a assimetria e a inclinação nos espaço em branco. Os blocos de forma e as formas de imagem são ótimos para dar vida e diversão às formas fechadas em ângulos retos, como quadrados e retângulos.

• Tom de voz: o jeito de você falar de você, dos seus produtos ou serviços e do "gancho" da sua empresa varia muito, dependendo da emoção que você quer tirar do público.