Os quatro princípios básicos do design O termo design significa projetar. É necessário que comecemos o texto deixando esse significado bem claro, pois mesmo sendo muito utilizada, a palavra design, ainda causa dúvidas sobre a sua real significância.

Computação Gráfica Computação Gráfica – Professor Vanderlei Frazão

Os quatro princípios básicos do design Projetar é arquitetar uma ideia, ou seja, elaborar algo seguindo uma série de princípios básicos que fundamentam uma ou mais alternativas como resultados. Trazendo para o nosso contexto, projetar é estabelecer significados relevantes, capazes de definir claramente uma ou mais funções para algo que se cria. Logo, tudo o que se projeta, está diretamente ligado a uma função, então, todo design possui uma função.

Computação Gráfica Computação Gráfica – Professor Vanderlei Frazão

Os quatro princípios básicos do design Quem atua nas áreas de comunicação e criação visual, por exemplo, costuma classificar os designs, ou layouts, como “bons ou ruins”, como algo que “funciona ou não funciona”, e por aí vai.

Computação Gráfica Computação Gráfica – Professor Vanderlei Frazão

Os quatro princípios básicos do design O importante é termos em mente que essas afirmações não são ditas aleatoriamente, mas sim, com base nos quatro princípios do design: contraste, repetição, alinhamento e proximidade. Devido ao “olhar de águia” dos profissionais da área, são rapidamente percebidos quando negligenciados pelo criador do layout.

Computação Gráfica Computação Gráfica – Professor Vanderlei Frazão

Os quatro princípios básicos do design A utilização desses quatro princípios básicos do design é capazes de estabelecer a ordem na disposição dos elementos no layout, facilitando a sua interpretação e compreensão da mensagem.

Vamos entender sobre cada um desses princípios?

Computação Gráfica Computação Gráfica – Professor Vanderlei Frazão

Os quatro princípios básicos do design Contraste Esse princípio é direto e claro: acenda os holofotes para as áreas que devem atrair a atenção. O contraste é o responsável por dar relevância visual ao que deve ser atrativo. Ou seja, dar destaque a algumas áreas no layout. Isso além de atribuir um ritmo a arte, define o que possui maior relevância e possibilita o observador a compreender todo o enredo do layout com apenas uma passagem de olhar.

Computação Gráfica Computação Gráfica – Professor Vanderlei Frazão

Contraste: Esse princípio é direto e claro: acenda os holofotes para as áreas que devem atrair a atenção. O contraste é o responsável por dar relevância visual ao que deve ser atrativo. Ou seja, dar destaque a algumas áreas no layout. Isso além de atribuir um ritmo a arte, define o que possui maior relevância e possibilita o observador a compreender todo o enredo do layout com apenas uma passagem de olhar.

Computação Gráfica Computação Gráfica – Professor Vanderlei Frazão

Na figura de cima não existe nenhum elemento contrastante, por esse motivo ela não atrai tanto o olhar quanto a peça de baixo.

Esse princípio pode ser aplicado de diversas formas em um layout como através de textos em negrito, backgrounds coloridos, elementos destacados, imagens, entre outras. O importante é colocar em evidência o que é valioso. Agora, cuidado! Os elementos que criam contraste devem ser destacados de verdade, se não, ao invés de contraste eles causaram conflitos.

Computação Gráfica Computação Gráfica – Professor Vanderlei Frazão

Contraste:

Computação Gráfica Computação Gráfica – Professor Vanderlei Frazão

Contraste:

Esse é o “Make it bigger”, uma monografia dos trabalhos de uma das maiores referências do design gráfico, Paula Scher (Pentagram)

Provavelmente seu olhar correu pela imagem da capa e fixou após encontrar o nome da autora do livro, certo? Nossos olhos sempre buscam um ponto de equilíbrio, porém, no caso dessa imagem, isso aconteceu propositalmente e é fruto da boa utilização do princípio do contraste.

Computação Gráfica Computação Gráfica – Professor Vanderlei Frazão

Contraste:

Analisando novamente a imagem, agora com mais atenção aos detalhes, é possível perceber que existe a prevalência das cores amarelo, preto e laranja, bem como, letras enormes sangrando toda a área útil do material. Aprofundando um pouco mais, conseguimos observar que as letras grande estão ocupando o preenchimento preto da capa.

Computação Gráfica Computação Gráfica – Professor Vanderlei Frazão

Contraste:

Mas, para grifar o que realmente interessa, o designer aplicou o nome da autora, Paula Scher, com a cor preta dentro de um preenchimento laranja. Exatamente o inverso do contraste utilizado na capa e contracapa. Essa alternativa foi suficiente para compreendermos que o nome da autora possui mais peso que o nome do livro.

Computação Gráfica Computação Gráfica – Professor Vanderlei Frazão

Contraste:

Este princípio atribui consistência ao design através da repetição de elementos.

O elemento pode ser uma fonte em negrito, uma linha horizontal, entre outros, qualquer aspecto que o leitor reconheça visualmente (WILLIAMS, 1995).

Computação Gráfica Computação Gráfica – Professor Vanderlei Frazão

Repetição:

O ato de repetir um elemento no layout faz com que o observador siga um fluxo de leitura. E ausentar a repetição de elementos pode deixar a arte sem um conectivo visual, fazendo com que o observador se sinta perdido. É obvio que a repetição em demasia também cria confusão, então para evitar esse ruído visual utilize o princípio da repetição com o intuito de organizar as informações da composição.

Computação Gráfica Computação Gráfica – Professor Vanderlei Frazão

Repetição:

Computação Gráfica Computação Gráfica – Professor Vanderlei Frazão

Repetição:

Nesse exemplo conseguimos perceber facilmente a repetição:

- Link para o site com a cor azul;

- Url do site com a cor verde;

- Descrição do conteúdo do link na cor cinza.

Básico, né? Mas funciona perfeitamente! Esse padrão é replicado ao longo de todas as páginas de pesquisa, o que facilita imediatamente a leitura do observador, guiando-o a realizar apenas uma ação neste momento: acessar o link que apresenta o melhor resposta para a sua busca.

Computação Gráfica Computação Gráfica – Professor Vanderlei Frazão

Repetição:

Computação Gráfica Computação Gráfica – Professor Vanderlei Frazão

Repetição: Esse exemplo serve para perceber que a repetição não precisa ser apenas com elementos distribuídos um embaixo do outro. Perceba a consistência das repetições: - Título em negrito; - Mancha textual sem negrito; - Botão com uma “chamada para ação”.

Ao inserir textos e imagens em um layout precisamos ter em mente que mantê-las organizadas é fundamental para a compreensão do observador, e o alinhamento ajuda muito nisso.

Computação Gráfica Computação Gráfica – Professor Vanderlei Frazão

Alinhamento:

Nós, seres humanos, começamos a alinhar informações desde a nossa alfabetização, onde nossas queridas professoras nos ensinam que devemos escrever de cima para baixo, da esquerda para a direta (escrita e leitura ocidental). Esse ensinamento desenvolve em nós o senso de estética, que nos possibilita alinhar um texto à esquerda, à direta, ao centro ou justificá-lo.

Computação Gráfica Computação Gráfica – Professor Vanderlei Frazão

Alinhamento:

Computação Gráfica Computação Gráfica – Professor Vanderlei Frazão

Alinhamento: O alinhamento desse banner é claro: - Título com texto serifado alinhado à esquerda e com o princípio do contraste; - Subtítulo com texto sem serifa e alinhamento justificado também com o princípio de contraste; - Complemento com texto sem serifa alinhado à esquerda.

Computação Gráfica Computação Gráfica – Professor Vanderlei Frazão

Alinhamento: Nesse exemplo, foram utilizadas três tipos diferentes de fontes, cada uma respeitando o seu espaço sem deixar de transmitir e complementar a mensagem do layout como um todo. E claro, receberam um suculento apelo visual da carne posicionada à direta do banner, em uma área disponível para ela.

Computação Gráfica Computação Gráfica – Professor Vanderlei Frazão

Alinhamento: Esse outro exemplo possui o princípio do alinhamento, com imagens à esquerda do texto, todos os títulos e subtítulos alinhados à esquerda, complementados com o princípio da repetição com títulos em negrito e subtítulos com peso normal.

Aproxime ou forme grupos com elementos que se relacionam. Quando aproximamos os elementos que se relacionam conseguimos dar pistas para o observador de qual a ordem de leitura ele deve seguir. Isso acontece instantaneamente, pois, primeiramente, o nosso cérebro escaneia o layout como um todo e depois inicia o processo de leitura das parte.

Computação Gráfica Computação Gráfica – Professor Vanderlei Frazão

Proximidade:

Não haveria sentido se o nome do produto, estivesse distante de sua descrição e do seu preço.

Computação Gráfica Computação Gráfica – Professor Vanderlei Frazão

Proximidade:

Agrupar informações facilita a leitura, organiza os elementos do design e auxilia o observador na tomada de decisões: “- Irei comprar essa piscina pois ela possui a litragem ideal para a minha casa e está com um ótimo preço. Agora vou aproveitar o solzão!”. Viu? O observador percebeu os produtos, focou na piscina, leu as descrições e comprou.

Computação Gráfica Computação Gráfica – Professor Vanderlei Frazão

Proximidade:

Os princípios do design possuem um objetivo em comum: organizar. A organização do layout é uma das habilidades que distingue o designer.

Resumão dos quatro princípios de design Contraste: dê destaque ao que deve chamar a atenção.

Repetição: crie consistência repetindo alguns elementos.

Alinhamento: defina o processo de leitura do observador.

Proximidade: faça grupos com elementos que se relacionam.

Computação Gráfica Computação Gráfica – Professor Vanderlei Frazão

Os quatro princípios básicos do design

Questões de fixação:

1) O que é projetar?

2) Quais são os 4 princípios do design? Explique o

significado de cada um deles.

Computação Gráfica Computação Gráfica – Professor Vanderlei Frazão