Um guia para principiantes sobre os princípios da conceção de sítios Web
A conceção de um sítio Web é um processo empolgante que abre definitivamente muitas possibilidades criativas. Quando começa a desenhar o seu sítio Web, é provável que comece a fazer perguntas como "Que cor devo utilizar?", "Que tipo de menu é melhor?" ou até mesmo uma pergunta mais geral "Como posso garantir que os visitantes têm uma experiência de navegação agradável?"
Os designers sabem que é melhor responder a estas perguntas com um conjunto de princípios que definem quais os elementos que funcionam melhor em relação uns aos outros e quais as formas e padrões que funcionam da forma pretendida. Estes princípios simplificam bastante o processo de criação e orientam-no na direção do resultado pretendido.
Estes princípios aplicados à conceção de sítios Web são designados por princípios de composição de sítios Web, e é sobre eles que este artigo se debruça.
5 princípios de criação de sítios Web que deve conhecer
Os princípios de conceção podem ser definidos como um conjunto de princípios e orientações adoptados pelos designers, desde designers de movimento a web designers e arquitectos. O objetivo destes princípios é Processo de conceção de forma a que o resultado seja simultaneamente estético e prático.
Embora não exista um número exato de princípios de design, uma vez que estes variam consoante a área, este artigo abordará 5 princípios que são mais relevantes para o web design.
O balanço
O equilíbrio do seu sítio Web é o "peso" de cada elemento que utiliza, desde o texto aos botões e às imagens. Para conseguir um sítio Web equilibrado, é importante garantir que os elementos do seu sítio Web não se sobrepõem uns aos outros.
Ao conceber o seu sítio Web, pode procurar um equilíbrio simétrico e assimétrico.
Equilíbrio simétrico
Um equilíbrio simétrico proporciona uma experiência visual consistente, embora previsível. O peso visual é o mesmo em todos os lados do design e corre em linhas rectas nos lados esquerdo e direito do seu sítio Web.
Um equilíbrio simétrico tem várias vantagens, a principal das quais é simplificar o processo de "digestão" da informação. Opte por um equilíbrio simétrico se quiser oferecer aos seus visitantes um processo de navegação simples e cómodo.

O equilíbrio assimétrico
A principal diferença entre o equilíbrio simétrico e o assimétrico é a disposição: na construção assimétrica, o peso dos elementos é o mesmo em ambos os lados, mas a disposição é diferente.
Um equilíbrio assimétrico contribui muitas vezes para um sítio Web mais envolvente e interativo, uma vez que os utilizadores reparam mais no design e estão mais empenhados.

O contraste
O contraste na conceção de sítios Web significa colocar elementos lado a lado para que um deles se destaque. Isto é útil quando se pretende dar ênfase a algo. O contraste cria uma área na sua página que se destaca e exige a atenção do utilizador, resultando numa experiência mais intensa.
Uma das formas mais óbvias de utilizar o contraste é escolher o esquema de cores correto para o sítio Web e utilizar tons que se complementem sem se ofuscarem mutuamente. Os tipos de letra, tamanhos de letra e imagens do sítio Web também podem ser utilizados para expressar o contraste no seu sítio Web e realçar o conteúdo mais importante. No exemplo abaixo, a combinação de fundo cor-de-rosa pálido e texto cor-de-rosa escuro, bem como elementos e fotografias em tons de cor semelhantes, cria um design excitante e dinâmico que não é demasiado pesado para a vista.

A hierarquia
A hierarquia é um dos princípios de design mais importantes e conhecidos. Tal como o termo sugere, significa realçar os elementos visuais mais importantes no design de um sítio Web. Sem hierarquia, os visitantes não sabem qual é o elemento mais importante e consideram todas as linhas de texto, imagens ou botões igualmente importantes.
Para criar uma hierarquia de sítios Web, é necessário começar por pensar nos elementos do sítio Web que são importantes e que devem destacar-se. Pode então obter uma hierarquia manipulando estes três factores:
- Tamanho - Quanto maior for o elemento, mais atenção atrai. As pessoas prestam mais atenção aos elementos maiores, por isso, quanto mais importante for o texto, maior pode ser o seu tamanho.
- Cor - Se quiser destacar algo, as cores também são úteis. Por exemplo, as cores que têm um elevado contraste com o fundo são mais bem percepcionadas.
- Posição - A posição de um elemento diz muito sobre a sua importância: Quanto mais alto o elemento, mais importante ele é. Coloque os elementos que pretende realçar o mais alto possível.
Conceção do sítio Web: White room
O espaço em branco refere-se às áreas do seu sítio Web que não contêm elementos. O espaço em branco é constituído pelas margens da sua página, o espaço entre blocos de texto, texto e botões, gráficos, etc. O espaço em branco é crucial na conceção de sítios Web e tem muitas vantagens: Torna o seu sítio Web mais legível, a informação menos confusa e melhora a experiência geral do utilizador. O espaço em branco é a base de um sítio Web equilibrado, em que os elementos trabalham em conjunto para que todos tenham espaço para respirar.
É importante notar que, embora o espaço em branco seja rotulado como "branco", não tem de o ser obrigatoriamente. Pode incluir fotografias de fundo, cores sólidas ou mesmo padrões. Eis um exemplo de utilização inteligente do espaço em branco no web design.

Design do sítio Web: Consistência
Pense na consistência como o ponto alto do seu sítio Web. É a combinação de todos os elementos que incluiu no seu sítio Web e a forma como funcionam em conjunto. Para conseguir uniformidade, cada elemento do seu sítio Web, desde a cor do texto à forma e posição dos botões, tem de ter uma função e um lugar específicos no seu design global. Independentemente do número de elementos que tiver, o seu sítio Web não deve ser demasiado sobrecarregado: Todos os componentes devem funcionar em conjunto de uma forma limpa e visualmente apelativa para criar um design harmonioso.
Layouts comuns utilizados na criação de sítios Web
Agora que já se familiarizou com os princípios básicos da criação de sítios Web, vamos dar uma vista de olhos a alguns layouts comuns utilizados por web designers de todo o mundo na criação de sítios Web. Criação de sítios Web pode ser utilizado para garantir um melhor desempenho.
Conceção do sítio Web: Imagem única
O primeiro da nossa lista de composições e esquemas comuns é o esquema visual único. Esta apresentação é muito simples: trata-se de um design em que uma única imagem ocupa o lugar central. Pode ser uma fotografia ou um fundo de uma só cor com muito espaço em branco e navegação de texto adicionada à página, como mostra o maravilhoso exemplo do estúdio criativo "This Is Paper".

Conceção do sítio Web: F-pattern
O padrão F faz parte da conhecida investigação do Grupo Nielsen-Norman que procura compreender os padrões de leitura em linha das pessoas através do rastreio ocular. O padrão F é o principal padrão entre as descobertas, seguido pelos padrões Z (discutidos abaixo). O padrão indica o seguinte:
As pessoas lêem primeiro a parte superior da página, em movimento horizontal. Isto constitui a parte superior de F.
Em seguida, deslocam-se ligeiramente para baixo e, num outro movimento horizontal, cobrem a parte central da página, que é mais curta do que no primeiro caso. Este é o segundo traço de F.
Depois, voltam a descer e lêem a parte esquerda da parte inferior da página, desta vez num movimento vertical, formando a haste do F.
Aqui estão os mapas de calor baseados no rastreio ocular que demonstram os movimentos.

O padrão F mostra como os olhos do leitor se movem no caso de um texto denso, quando não há outro objeto visual para distrair a sua atenção. Mostra que as pessoas lêem completamente a parte superior da página e começam a folhear mais à medida que descem. Por isso, se tem algo importante a dizer no seu texto, certifique-se de que está incluído na parte superior.
Conceção do sítio Web: Z-pattern
O padrão Z é outro padrão descoberto durante a mesma investigação e baseia-se nos movimentos oculares dos leitores. O padrão Z é normalmente o padrão de leitura que as pessoas têm para páginas menos densas em informação.
O padrão Z tem certas caraterísticas do padrão F (por exemplo, a barra superior que indica que as pessoas leram a abertura na íntegra), mas é mais minimalista. O objetivo do padrão Z é incentivar os visitantes a agir em vez de lerem o texto. Isto torna-o um layout perfeito para páginas de destino que exigem que os utilizadores descarreguem e-books, preencham formulários ou partilhem as suas informações. Aqui está um ótimo exemplo de um layout de padrão Z utilizado pela CallFire.

Design de sítios Web: regra dos terços
A regra dos terços é mais conhecida como um princípio comum utilizado na Realização de filmes e fotografia é utilizado, mas é também um método comum e eficaz Apresentação na conceção de sítios Web. O objetivo é criar uma estética agradável e um equilíbrio nas imagens para tornar o design mais agradável à vista.
De acordo com a regra dos terços, cada imagem ou espaço de trabalho deve ser dividido em nove partes iguais com duas linhas horizontais e duas verticais, da seguinte forma:

Cada linha acompanha o "terço" da imagem. Se tiver selecionado as linhas mais importantes Elementos do seu desenho ou modelo Neste sentido, especialmente na sua intersecção, a experiência de visualização e leitura torna-se muito mais agradável, uma vez que todas as partes importantes são realçadas.

Conclusão
Agora que está equipado com estas regras e princípios, o Processo de criação do sítio Web ser ainda mais simples e divertido. Embora possam parecer restritivas no início, irá aperceber-se lentamente de que estas diretrizes lhe dão muita flexibilidade com o seu design sem comprometer a experiência visual dos seus clientes. Também facilitam o início de todo o processo, uma vez que terá mais ou menos uma ideia do aspeto que pretende para o seu sítio Web, em vez de uma tela em branco. Quer esteja a utilizar um construtor de sítios Web com modelos personalizáveis ou a criar um sítio Web completamente de raiz, esperamos que os princípios acima referidos sejam de alguma ajuda.