20 elementos e princípios de design que todo designer deveria conhecer

Houve um tempo em que o design era muito controlado. Muito modelado. Muito seguro.

Mas a evolução é inevitável e os designers começaram a experimentar um pouco mais.

A partir daí, os designs ficaram mais ousados ​​e melhores. Os designers começaram a se aprofundar na ciência por trás do comportamento de seu público, permitindo que eles se tornassem flexíveis ao que o mercado exigia.

“Hoje, o design se tornou mais do que apenas padrões e tendências. Tornou-se um estilo de vida. ” Algo que é cuidadosamente entrelaçado em cada reação e rotina humana. E sob as complexidades que acompanham esse estilo de vida estão 20 princípios de design diferentes que tornam este mundo um lugar mais criativo e bonito para se viver.

Vamos dar uma olhada nesses princípios e dicas para aproveitá-los em seus projetos.

Linhas

Olhe em qualquer lugar ao seu redor e você verá linhas. As bordas da tela do seu computador. As laterais de cada tecla do teclado. Até as letras dessas teclas são feitas de linhas, algumas retas, outras curvas, outras inclinadas.

É exatamente assim que as linhas são importantes. Sem eles, tudo se misturaria infinitamente, tornando o mundo uma única bolha.

O que torna as linhas ainda mais surpreendentes, além de definirem a forma de tudo, é o fato de também se traduzirem em emoções e ideias que solicitam reações equivalentes. Coloque uma linha ondulada ao lado de uma linha vertical reta, por exemplo, e você começará a pensar em ordem e força de um lado e caos e confusão do outro. Isso pode ser muito útil se você estiver solicitando que seu público responda a determinados apelos à ação. No momento em que seus humores e emoções foram definidos, é mais fácil simplesmente navegar pelo seu apelo à ação.

Outro papel que as linhas desempenham no web design é o fato de direcionarem os olhos do público para os pontos focais de cada página. Por exemplo, linhas principais fortes sob o nome da marca em um mar de outros textos menores ajudarão esse nome a se destacar.

Escala

Escala define como você dimensionará diferentes elementos em um único design. Basicamente, traz a lógica em uma peça, ou a remove. Por exemplo, se você desenhar uma formiga ao lado de um cachorro, só faria sentido que você tornasse o cachorro muito maior que a formiga (a menos que o design determine que você se afaste da realidade).

A escala também é a melhor maneira de criar drama. Como sugerido acima, haverá casos em que você terá que se afastar do realismo e criar efeitos impressionantes dimensionando alguns elementos significativamente menores ou maiores do que outros.

A escala também é uma ótima maneira de enfatizar a hierarquia. Veja pôsteres de filmes, por exemplo. Atores com papéis importantes geralmente têm seus filmes se destacando dos demais, não porque sejam mais altos ou maiores que os atores coadjuvantes, mas porque seus personagens são mais importantes.

Agora, digamos que você esteja trabalhando em algo que apresenta muito texto e não muitas imagens. O dimensionamento ainda se mostra a melhor maneira de você enfatizar alguns detalhes em detrimento de outros. As estatísticas, por exemplo, podem ser ampliadas significativamente para atrair os olhos do público diretamente para esse dado.

Cor

É inacreditável o impacto que a cor tem em tudo. Houve estudo após estudo sobre os efeitos da cor não apenas no humor e nas emoções de uma pessoa, mas também em suas reações e decisões de compra.

Você pode imaginar ver uma empresa ambiental usando nada além de preto e branco para sua marca? Ou uma empresa que deseja exalar uma aura profissional e valores tradicionais usando cores neon brilhantes? Isso, eu acho, é explicação suficiente para mostrar o papel que a cor desempenha no design.

Consistência

Quando você pensa em Coca-Cola, você imagina as cores verde ou azul? Provavelmente não – sua mente salta automaticamente para a cor vermelha.

É disso que se trata a consistência.

Projetar para uma marca tem tudo a ver com consistência. Trata-se de usar exatamente os mesmos tons, tons e matizes da mesma cor, bem como exatamente os mesmos tipos de fonte. Relatórios de escritório, outdoors, banners – tudo associado à marca deve sempre ser consistente. Afinal, se a Coca-Cola mudasse seu esquema de cores a cada ano, você acha que ainda traria o mesmo recall de marca que tem agora? Eu acho que não.

Espaço em branco

Cartões de visita Frame Inc.

Espaço em branco não significa necessariamente que é branco, mas sempre significa a mesma coisa, não importa a cor que seja. É o espaço não utilizado entre seus elementos, aquele espaço negativo que muitos designers enlouquecem.

Para alguns, todo esse espaço não utilizado parece ser um desperdício. Mas espere até usar esse espaço a seu favor, deixando-o estrategicamente em branco. Você pode abrir um nível totalmente novo de criatividade que surpreenderia seu público.

Não acredite em mim? Confira Sky and Water de MC Escher e você entenderá exatamente o que quero dizer.

Simetria

Ares Patch de Garrett Godsey

Você sabia que seus olhos são naturalmente atraídos por qualquer coisa simétrica? Este é o conceito que marcas como Target e Chanel aproveitaram, tornando seus logotipos incrivelmente memoráveis.

A simetria é uma coisa que traz uma sensação de equilíbrio e ordem a qualquer design. Pode não ser tão óbvio às vezes, mas para cada grande obra de arte vem uma maneira única de formar simetria para agradar aos olhos.

Opacidade

A opacidade de um elemento de design mostra como ele é 'ver através'. Ele dita o quão transparente tudo é. Qualquer coisa que tenha menor opacidade é basicamente mais leve, enquanto elementos com maior opacidade são mais sólidos aos olhos.

A opacidade pode ajudá-lo a colocar diferentes elementos uns sobre os outros sem eliminar completamente a presença daqueles que estão embaixo. Também é usado para adicionar uma sensação de movimento a uma imagem.

Textura

Sem textura, qualquer design pode parecer em branco e simples. Adicione um pouco de textura e o design ganha vida, fazendo parecer que está pronto para sair da tela ou da superfície em que está impresso.

Isso não significa que toda peça de design requer textura. Sempre haverá projetos de design que ficariam melhores quando estivessem limpos e nítidos. No entanto, também haverá casos em que um pouco de textura não faria mal.

Você pode incrementar a textura do seu design adicionando um plano de fundo que adiciona profundidade à superfície. Você também pode tentar gravar alguns elementos em relevo.

Equilíbrio

Toque de Eddie Lobanovskiy

Equilíbrio às vezes pode ser confundido com simetria, mas na verdade são duas coisas diferentes. Quando as coisas são simétricas, cada elemento pode terminar na mesma margem ou pode haver o mesmo número de elementos em ambos os lados de uma página. Embora isso geralmente resulte em uma sensação de equilíbrio, você também pode alcançar essa sensação sem usar um design simétrico.

Digamos, por exemplo, que você gostaria de criar uma página sobre com algum texto e uma imagem. Você pode encontrar uma sensação de equilíbrio com um layout de duas colunas, mesmo que o texto não seja um elemento idêntico à imagem.

O equilíbrio é apenas algo que faz uma peça de design parecer completa. Quando uma imagem está desequilibrada, ela pode parecer mal feita, ou pior, sem inspiração.

Hierarquia

Hierarquia por Melanie Taube

A hierarquia mostra quais elementos são mais importantes sobre todo o resto. Isso não significa que os elementos no final da hierarquia (os alimentadores inferiores, por assim dizer) sejam coisas que você pode prescindir. Afinal, sem os elementos do outro lado da hierarquia, você não conseguiria obter a quantidade de impacto que deseja.

A hierarquia pode ser expressa de muitas maneiras diferentes além da escala. Você pode usar cores mais brilhantes para aqueles que estão no topo da cadeia alimentar, com a cor ficando mais clara à medida que você desce.

Contraste

O contraste é a regra dos opostos. Basicamente, distingue a luz da escuridão, grande versus pequeno. Para designers que estão sempre com o objetivo de destacar um ou dois elementos de seu design, o contraste geralmente é uma das abordagens que eles usam.

Mas o contraste vai muito além da estética. O contraste também afeta a legibilidade. Use duas cores que são quase as mesmas para o texto e o fundo e você provavelmente vai coçar os olhos tentando ler o que o texto diz. Ao usar duas cores com alto contraste, seus olhos verão imediatamente o que deveriam ver.

Enquadramento

A melhor câmera é aquela que você tem com você por Sean McCabe

Veja como um quadro coloca um limite em torno das fotos que você coloca nele? É exatamente para isso que serve o enquadramento. Basicamente, mostra o que deve e o que não deve fazer parte da imagem.

Contornos de caixas, margens – tudo isso são formas de enquadramento. Também permite destacar certos elementos sobre os outros, como uma aspa simples no meio de uma página cheia de texto.

Você também pode ser criativo e usar outras coisas para o seu quadro além das linhas e margens usuais. Por exemplo, um pôster com tema de praia pode usar conchas alinhadas ao redor do texto para enquadrá-las efetivamente.

Rede

Tentar alinhar as coisas em um espaço em branco pode ser difícil, e é por isso que as grades são muito importantes no design.

As grades ajudam os designers a alinhar e organizar elementos. Um exemplo perfeito disso seriam as colunas em uma página de revista ou jornal. Já imaginou ter todo esse texto colocado aleatoriamente sem a orientação de uma grade? Seria um desastre tentar entender.

Por outro lado, se você optar por um design um pouco menos rígido, quebrar a grade é uma maneira maravilhosa de criar instantaneamente uma sensação de caos. Nossos olhos tendem a procurar naturalmente o layout e a grade de um design, então sair dessa estrutura ajudará a criar uma sensação de desordem.

Espontaneidade

Claro, claro. Precisamos de equilíbrio. Precisamos de simetria. Siga a grade. Use linhas para enquadrá-lo. Mas tudo isso não significa que tudo deve ser feito de acordo com o manual. Às vezes, um pouco de loucura também é necessário para criar um design incrível.

Só porque você já tem uma divisão clara entre colunas e linhas não significa que você não pode colocar uma citação de repente no meio sem seguir os quadros existentes. Se essa é a melhor maneira para essa linha se destacar, então que assim seja.

Enquanto você está projetando, faça uma pausa em suas “regras” e encontre espaço para um pouco de espontaneidade – algo inesperado. Isso pode ser exatamente o que seu design precisa.

Direção

Design de manivela em espiral por Allan Peters

Isso também pode ser referido como dicas visuais ou gráficas. Coloque uma imagem de alguém apontando para o seu botão de call-to-action e quase todos os olhos dos leitores irão imediatamente direto para esse botão.

É claro que os olhos também seguem certos padrões à medida que examinam uma página. Estudos mostram, por exemplo, que os padrões mais comuns que os olhos seguem seriam uma forma de E, F ou Z. É por isso que é melhor colocar o conteúdo mais importante no canto superior esquerdo da página, pois o instinto natural dos olhos seria mover primeiro do canto superior esquerdo para o canto superior direito.

Regras

Sim, embora a criatividade seja muitas vezes espontânea, ainda existem muitas regras de design que você deve seguir. Mas, novamente, quebrar essas regras de vez em quando também o levaria a criar peças surpreendentemente bonitas.

Então, como você sabe quando seguir as regras e quando quebrá-las?

Primeiro, você precisa ser bem versado no básico para saber exatamente o que está quebrando. Então, certifique-se de que quebrar as regras corresponde ao ponto que você está tentando fazer.

Movimento

Você não precisa de mágica para criar movimento no design impresso. Há tantos efeitos que você pode usar que daria a impressão de que uma imagem está se movendo.

Em uma imagem de uma criança andando de bicicleta, por exemplo, você pode desfocar o resto da imagem ao redor dele para mostrar que ele está apenas zunindo por tudo o que passa. Você também pode usar linhas de movimento, bem como efeitos de onda. Você também pode usar a opacidade para dar a ilusão de ótica de movimento, como neste logotipo desenhado por Vladimir Mirzoyan acima.

Profundidade

Claro, os designs planos estão na moda há alguns anos. Você tem que admitir que adicionar profundidade a alguns de seus designs ainda se encaixa melhor. Afinal, quão incrível é que algo fisicamente bidimensional possa realmente parecer que está saindo de uma página?

Existem várias técnicas que você pode usar para criar profundidade em seus projetos, como:

• Sombras
• Sobreposição
• Brincando com perspectiva (resulta em um efeito 3D)

Se o seu design parece que precisa de um pouco de vida, tente qualquer uma dessas abordagens e veja a imagem antes de sair da superfície.

Tipografia

Você pode ter todas as imagens, texturas, planos de fundo e outros elementos do seu design, mas se sua tipografia precisar de algum trabalho, todo o seu design estará comprometido. A tipografia é mais do que apenas estilos de fonte e tamanhos de fonte. Também tem algo a ver com dimensionamento, espaçamento, cor e muitos outros conceitos básicos de design.

Como a tipografia cobre muito terreno, você provavelmente ficaria mais esclarecido se lesse esses livros sobre como melhorar sua tipografia.

Composição

Ondas por Romain Rdb

Em vez de ser um elemento isolado, a composição é na verdade uma combinação de alguns dos elementos que discutimos anteriormente. Escala, hierarquia, profundidade – tudo isso e muito mais contribuem para a composição geral de um design.

A composição, em seu sentido mais básico, abrange o arranjo geral de cada elemento do seu design. Imagine todos os elementos que discutimos – quando misturados, o resultado final funciona ou não? É assim que você mede a composição.

20 elementos diferentes, 20 maneiras diferentes de fazer ou quebrar um design. Sempre tenha uma lista desses elementos ao seu lado enquanto trabalha e deixe-a ser seu guia enquanto tenta superar os desafios que acompanham a conclusão de seu próximo projeto de design.