Novos Fundamentos do Design aplicados em sites e aplicativos
Casos de aplicação web digital dos fundamentos descritos no livro “Novos Fundamentos do Design” de Ellen Lupton e Jennifer Cole Phillips
ÍNDICE
- Ponto, linha e plano
- Ritmo e equilibrio
- Escala
- Textura
- Cores
- Figura/fundo
- Enquadramento
- Hierarquia
- Camadas
- Transparência
- Modularidade
- Grid
- Padronagem
- Diagramas
- Tempo e movimento
- Regras e acaso
1) Ponto, linha e plano
Uma linha é a trilha deixada pelo ponto em movimento. — Wassily Kandinsky
O ponto, a linha e o plano são os alicerces do design gráfico. Em site ou apps, usamos linhas para separação de conteúdos e aplicamos planos de diferentes cores para delimitar espaços, seções ou blocos de conteúdo.
Um plano é o trajeto de uma linha em movimento.
2) Ritmo e equilíbrio
Buscamos equilíbrio entre as várias facetas de nossa vida pessoal e profissional, e o mundo luta pelo equilíbrio do poder.
O desequilíbrio em um layout ocorre quando a proporção e a localização dos elementos da página estão grandes ou pequenos demais, muito apertados ou desalinhados. Causando um foco de atenção e desconforto ao olhar.
Designers gráficos usam o ritmo na construção de imagens estáticas, bem como em livros, revistas e imagens animadas que possuam uma duração e uma sequência.
Ritmo está relacionado a linearidade, continuidade e sequência. Ex: imagens em um carrossel que se comuniquem umas com as outras, linhas do tempo, transição entre páginas e efeitos de carregamento.
3) Escala
Escala está relacionada à comparação. Só sabemos definir se um elemento é grande ou pequeno caso relacionarmos ele com qualquer outro elemento de tamanho diferente.
Na web, utilizamos escala para exprimir contraste, seja na hierarquia entre os títulos de uma página ou utilizando escala de cores para destacar um elemento em meio a outros similares.
4) Textura
O uso de texturas no web design tem sido adaptado nos últimos anos. Porém, existem maneiras modernas e elegantes de usar texturas em qualquer situação. Podemos usar patterns, imagens de fundo e texturas animadas para dar vida e conceito ao design de uma página.
A textura acrescenta detalhes a uma imagem, proporcionando mais qualidade à superfície como um todo e recompensando o olhar daquele que a observa.
5) Cores
Todas as cores são amigas de suas vizinhas e amantes de suas opostas. — Marc Chagall
Cores criam ideias, passam mensagens, despertam interesse e expressam sentimentos. Já é bem manjado de que utilizamos os sentimentos das cores para passar determinadas mensagens na web, como o verde para mensagens de sucesso e o vermelho para alertas de erro.
Além disso, podemos experimentar as combinações do disco cromático e utilizar, por exemplo, cores complementares¹ quando queremos destacar um elemento de um fundo. Ou ainda cores análogas², se quisermos sutileza na diferença entre as cores.
*1 Cores opostas no disco cromático. Ex: vermelho/verde, azul/laranja, amarelo/violeta. Cores complementares têm diferenças fortes e marcantes.
*2 Cores próximas ou adjacentes no disco cromático. Cores analógicas têm diferenças sutis e suaves.
6) Figura/ Fundo
A forma de um objeto não é mais importante que a forma do espaço em torno dele. Todas as coisas resultam da interação com outras coisas. — Malcolm Grear
Esse fundamento consiste em jogar com a percepção do espaço negativo e positivo modificando o que é percebido como forma e como fundo.
7) Enquadramento
Enfatizados ou apagados, os contornos afetam o modo como percebemos a informação.
Nos ambientes digitais, é comum a necessidade de exibir muitas informações ao mesmo tempo. Por isso, o uso de enquadramento se faz muitas vezes importante como forma de destacar o que é mais relevante ou o foco do conteúdo.
Hierarquia
A hierarquia se expressa por um sistema nominal: general, coronel, cabo e assim por diante. Mas ela também se exprime visualmente, através das variações em escala, tonalidade, cor, espacejamento ou posicionamento, além de outros sinais.
No ambiente digital, a hierarquia é usada de forma bem semelhante ao design impresso. Usamos para determinar a importância e estabelecer conexões entre títulos, subtítulos, parágrafos e outros elementos.
9) Camadas
Tudo na web é feito por camadas, desde a criação de layouts em editores de imagens, até a programação com “divs” e outros elementos. Uma forma de utilizar as camadas para fazer arte digital é com colagens. Segundo o Shutterstock, o uso de artes com colagens cresceu 1376% no último ano. https://shutr.bz/2H0PFkJ
10) Transparência
Transparência significa uma percepção simultânea de diferentes localizações espaciais.
A transparência pode ser usada para disfarçar um elemento com o intuito de dar ênfase a outro. Uma maneira comum de encontrar a transparência aplicada na web é em imagens de fundo transparentes dando destaque para o conteúdo acima.
11) Modularidade
Criamos módulos para facilitar na escalabilidade da criação, principalmente para projetos de grande escala. Um design system¹ documenta os componentes que podem ser utilizados e ajuda o produto a crescer de forma organizada e consistente.
Quando alguns fatores são predeterminados, o designer fica livre para refletir sobre outras partes do problema.
*1 documento vivo com todos os componentes e propriedades de um produto ou serviço para facilitar a comunicação do time.
12) Grid
Um grid é uma rede de linhas que cortam um plano horizontal e verticalmente.
No caso de um design para a web, usamos os grids verticais para facilitar a separação dos conteúdos em colunas. O grid serve para guiar o designer e ajudar no posicionamento dos elementos na tela. Além disso, se usado corretamente, facilita na hora do desenvolvimento do layout.
13) Padronagem
Entendendo como se produzem padrões, os designers aprendem a tecer complexidade a partir de estruturas elementares.
Uma das formas de aplicar padronagem no design web é com “background patterns”. Em sites antigos conseguimos ver com mais frequência esse fundamento sendo aplicado. Em aplicações mais modernas podemos observar o uso de forma mais sutil:
Outros exemplos: https://www.canva.com/learn/website-background-pattern/
14) Diagramas
Um diagrama é a representação gráfica de uma estrutura, situação ou processo.
Observamos o uso de diagramas desde o processo de criação de uma aplicação digital, no momento de estabelecer o fluxo de navegação, por exemplo. Além disso, diagramas são bastante utilizados em dashborads em formato de gráficos, fluxogramas e outras formas visuais de representar informações.
15) Tempo e movimento
O movimento é um tipo de mudança, e toda mudança acontece no tempo.
Percebemos a relação de tempo e movimento no design de animação ou “motion design”. Os elementos da tela aparecem e somem com uma mudança no espaço e no tempo, agregando suavidade e movimento para as transições e apresentações.
16) Regras e acaso
A ideia torna-se uma máquina que faz arte.
O conceito desse fundamento é bem uma “máquina que faz arte”, consiste em criações baseadas em regras, como por exemplo um elemento repetido várias vezes e rotacionado a cada repetição pode formar um padrão agradável.
Recomendo a aquisição e leitura do livro completo. Esse artigo é apenas uma aplicação dos fundamentos explicados com detalhes no livro Novos Fundamentos da Ellen Lupton.
👉 Confira cursos de UI Design e assine a newsletter da UI Lab.
