Erros comuns de web design

É mais fácil para os usuários digerirem as informações se elas estiverem agrupadas em blocos lógicos. Defina o preenchimento para 120-80 pixels e separe os blocos de texto usando fundos coloridos.

Espaços do mesmo tamanho devem ser colocados ao redor dos blocos lógicos. Caso contrário, sua página parecerá confusa e os usuários poderão não dar a mesma atenção a cada seção.

Para evitar que as partes lógicas se misturem, mantenha-as separadas e insira um espaço grande (pelo menos 120 pixels) entre elas.

Deve haver contraste suficiente entre o texto e o plano de fundo. Para dar destaque à cópia, coloque um filtro contrastante sobre a imagem. O preto é uma cor popular, mas você também pode usar cores brilhantes e misturá-las e combiná-las.

Outra opção é usar uma imagem contrastante desde o início e colocar o texto em cima de uma seção escura de uma fotografia.

O excesso de estilos tipográficos e de design em uma página faz com que ela pareça pouco profissional e difícil de ler. Para evitar isso, limite-se a uma única fonte e a duas opções de peso. Por exemplo, normal e negrito.

Evite enfatizar elementos estreitos da página com cores. Isso simplesmente não fica bom. Por exemplo, os títulos já estão bem marcados, graças ao tamanho, à espessura da fonte e aos espaçamentos. Gostaria de destacar um ponto específico em uma página? Use um fundo colorido para todo o bloco, incluindo um título relacionado e a cópia do texto.

É difícil ler quando há muita cópia de texto em colunas estreitas, pois os visitantes do site precisam pular de uma linha para outra. Além disso, a aparência não é boa! É melhor reduzir o número de colunas e encurtar o texto. Caso contrário, ninguém o lerá.

Centralizar o texto na página funciona bem quando há pouco texto, caso contrário, será difícil para os usuários navegarem com eficiência. Ao mesmo tempo, aumente o tamanho da fonte a partir de 24 pixels.

Se você precisar incluir muito texto, use os blocos com cópia de texto dobrável (no Tilda, use os blocos TX12, TX16N ou o botão BF703).

Evite cobrir partes significativas ou pequenos detalhes de uma imagem com texto. Dessa forma, você obscurecerá a imagem e tornará o texto ilegível. Experimente posições diferentes para as linhas de texto, como centralizado, alinhado à esquerda ou até mesmo vertical.

Para que a hierarquia de informações seja claramente visível em uma página, o título na capa deve ser maior do que o restante dos cabeçalhos ou, pelo menos, do mesmo tamanho. Isso é especialmente verdadeiro se o título for longo, por exemplo.

O mesmo princípio se aplica à hierarquia visual em um bloco lógico. O título deve ser o maior elemento de design da página, seguido de um subtítulo menor e menos proeminente. Em seguida, os títulos dos recursos que se seguem devem ser visivelmente menores do que o título e ter o mesmo peso. As menores fontes devem ser usadas nas descrições dos recursos.

Isso ajudará os visitantes do site a distinguir entre as informações mais e menos importantes.

Uma imagem ou galeria em tela cheia que segue um trecho de texto se assemelha a um bloco separado e independente. Se você adicionar preenchimento ao redor da galeria, tanto a cópia do texto quanto as imagens parecerão um todo lógico, graças a um plano de fundo compartilhado.

Uma fonte muito grande é perfeita para uma frase curta. Se o título for longo, use uma fonte de tamanho menor. Isso facilitará a leitura e deixará bastante espaço para todos os outros elementos de design da página.

As bordas são necessárias quando um botão é transparente. Adicionar uma borda a um botão colorido não faz sentido. É apenas mais um recurso de design sem sentido que sobrecarrega uma página e dificulta a leitura.

Usar muitas cores em uma página é confuso. Além disso, não fica claro quais partes são mais importantes. Uma ou duas cores são suficientes para dar peso visual ao que é realmente importante.

As pessoas visitam sites para encontrar soluções para seus problemas, ajude-as! Use o menu para ajudar as pessoas a navegar pelo site e encontrar o que precisam de forma rápida e fácil. Não as sobrecarregue com informações excessivas. É suficiente ter de 5 a 7 itens de menu.

Uma parede de texto dificulta a compreensão da leitura. Para facilitar a navegação, divida o texto em parágrafos ou introduza intervalos, como frases de impacto, citações ou imagens.

Um título não deve ficar "pendurado" entre capítulos a uma distância semelhante porque pertence ao parágrafo seguinte. O espaçamento acima de um título deve ser de 2 a 3 vezes maior do que o espaço abaixo dele. Ao mesmo tempo, a distância abaixo de um título deve ser aproximadamente igual ao espaço entre os parágrafos ou um pouco maior. Dessa forma, o título se referirá visualmente ao texto subsequente.

Na tipografia, o contraste é usado para dividir visualmente diferentes níveis de texto e estabelecer uma hierarquia rígida. Os títulos principais devem ser os mais proeminentes na página; os subtítulos devem ser consideravelmente menores, mas ainda assim claramente visíveis.

Se os blocos tiverem o mesmo peso, eles devem ter a mesma aparência e estar posicionados a uma distância igual uns dos outros.

Por um lado, a ilustração e sua legenda formam um único conjunto, mas são dois elementos separados, e as legendas não devem interferir na imagem.

O subtítulo e o texto que o segue devem estar juntos, mas se o espaço entre os parágrafos de um artigo for maior do que o espaço entre o subtítulo e o próximo parágrafo, o artigo parecerá desarticulado.

Os elementos usados como expressões de ênfase, como frases-chave ou citações, são objetos independentes. Para que eles realmente se destaquem, coloque-os a 75-120 pixels da cópia principal.

Se quiser enfatizar uma determinada frase, seja ousado, faça uma frase-chave maior do que o texto principal em 10 a 15 pixels. Deixe que a frase-chave realmente se destaque do restante do texto.

Se quiser destacar uma pequena seção da página, como informações sobre o autor, basta definir um preenchimento suficiente ao redor dela para criar a impressão de espaço. Não coloque essa seção em um plano de fundo colorido; ela parecerá fora do lugar.

Quando estiver usando várias imagens em tela cheia em uma sequência, evite deixar um espaço entre elas. A borda ainda estará visível, e não há necessidade de adicionar um elemento adicional. Ele simplesmente não acrescenta nada, não tem sentido.

Os acentos de design (como o negrito aqui) funcionam bem quando são poucos. Se houver muitos, isso atrapalhará a leitura da página.

O design não deve interferir na legibilidade. Quanto menos estilos de tipografia houver, melhor será a visibilidade dos elementos importantes. É suficiente enfatizar os títulos e subtítulos e usar o contraste para as frases-chave.

A centralização geralmente é aplicada a títulos e citações para distingui-los do restante do texto. Um texto longo e centralizado é difícil de ler.

Um título é um elemento de design individual. Ele não deve ser colocado muito próximo de uma imagem que o segue. Para obter uma combinação vencedora, defina o preenchimento como não inferior a 60 pixels e adicione um subtítulo: ele desdobrará o conteúdo da página e colocará a ênfase correta onde ela precisa estar.

O itálico é usado para enfatizar uma palavra ou frase curta no texto. Não é tão imediatamente perceptível quanto o negrito, mas permite ênfase quando necessário.

Não use itálico no corpo do texto e nos títulos. E se forem usadas fontes sem serifa no texto, evite o itálico por completo.

Você mesmo pode identificar esse erro irritante se fizer uma pequena pausa depois de editar a página (alterando o tamanho da fonte, o alinhamento ou o espaçamento) e observar o resultado novamente.