Novos Fundamentos do Design (Lupton e Phillips, 2008)

De onde os designers tiram suas idéias? Anuários de Design e monografia, na busca de combinações
inteligentes de formas, tipos e cores. As novas tecnologias trouxeram mudanças cada vez maiores no mundo do
design. Durante a década de 90, os softwares gráficos passaram a fazer parte do ensino de design. Esse livro
dedica-se à defasagem existente entre software e pensamento visual. Revela os elementos de uma nova
linguagem visual, conectada a uma sociedade global.
Designers sempre trabalharam com transparências e camadas, mas suas aplicações sofreram grande
aumento com a facilidade de manipulação que uma ferramenta gráfica oferece.

Ponto, linha, plano

Esses elementos compõem os alicerces do design. A partir deles, são criados imagens, ícones, texturas etc.
Texturas, por exemplo, são construídas a partir de grandes grupos de pontos e linhas que se repetem.
Ponto: Em termos geométricos, um ponto é um par de coordenadas (x, y) que não possui massa.
Graficamente, entretanto, um ponto toma forma como um sinal, uma marca visível.
Na comunicação visual o ponto é o elemento mais simples. Toda forma ou massa com um centro
reconhecível é um ponto, não importa o tamanho que tenha. Mesmo uma imagem fotográfica terá sua identidade
fundamental de ponto quando inserido em um plano se tornando um foco de atenção concentrado.
Qualquer ponto tem grande poder de atração visual. Ele fornece uma referência para o olho em relação às
outras formas que o cercam.
Ao entrar em um espaço, um ponto estabelece dois aspectos de relação entre eles: a proporção e sua
posição em relação ao espaço. O ponto localizado no centro se apresenta estático e confortável, mas se mostra
dominante em relação ao espaço circundante. A medida que ele é deslocado, o fundo passa a se impor, surgindo
tensão.
Linha: Quando os pontos se aproximam de tal forma que se torna impossível distingui-los, temos uma linha.
A função essencial de uma linha é a conexão. Unir áreas de uma composição.
A linha também pode ser definida como um ponto em movimento. Diferentemente do ponto, a linha se
caracteriza pelas idéias de movimento e direção; uma linha é dinâmica, nunca estática.
Plano: É uma superfície contínua, que se estende em altura e largura; é uma linha com amplitude. Pode ser
paralelo a imagem ou inclinar-se e recuar no espaço.
Espaço e volume: Um objeto que comporta espaço tridimensional tem volume. Na tela do computador o
volume é representado através de convenções gráficas.
Curvas Bézier: É uma linha definida pela combinação entre uma âncora e pontos de controle, gerando uma
linha curva.

Ritmo e equilíbrio

O equilíbrio no design ancora e ativa elementos no espaço. O equilíbrio visual acontece quando o peso
de uma ou mais coisas está distribuído igualmente ou proporcionalmente no espaço. O grande como
contraponto ao pequeno; o claro em relação ao escuro. A simetria resulta em algo estável. Pode-se também
obter movimento, alternando-se continuamente o peso. A assimetria produz tensão, são mais ativos.
O ritmo é um padrão forte, constante e repetido. As formas no design gráfico buscam ritmos que são
pontuados por mudanças e variações.
A repetição com variações produz justaposições visuais vitais no design. No design de publicações
(várias páginas) os elementos são colocados cuidadosamente, com a intenção de criar pontos focais que irão
conduzir o olhar do observador. Um elemento de variação sustenta o interesse.

Escala

Relacionar o tamanho com o objetivo e significado que se deseja obter é essencial na estruturação da
mensagem visual. A escala pode ser estabelecida não apenas pelo tamanho relativo, mas também através das
relações entre os elementos.
Pode ser considerada tanto objetivamente como subjetivamente. Em termos objetivos, refere-se às
dimensões do artefato ou a correlação entre uma representação e a coisa real que ela representa (mapas,
mock-ups). Subjetivamente, refere-se à impressão que o receptor tem do tamanho do objeto, podendo
depender do contexto.
Um elemento gráfico pode parecer maior ou menor, dependendo da localização e da cor dos outros
elementos ao seu redor.
Cuidado ao se escalonar um elemento gráfico: alterar a escala pode aumentar o impacto, mas é muito
fácil distorcer um elemento em ferramentas gráficas.

Textura

A textura é o elemento visual que substitui as qualidades de outro sentido, o tato. Podemos
reconhecer a textura tanto através do tato quanto pela visão, ou ainda mediante combinação de ambos.
As texturas dos elementos de design correspondem igualmente a sua função visual.
Ela pode ser concreta ou visual. Inclui tanto a superfície efetivamente empregada na construção de um
artefato impresso ou objeto, como na aparência ótica dessa superfície.
A maior parte da nossa experiência com texturas é ótica. A textura é falseada de modo bastante
convincente nos plásticos, materiais impressos, grande parte das coisas pintadas, que apresentam a aparência
convincente de uma textura que ali não se encontra. Essas texturas não são experimentadas fisicamente pelo
observador, pois são um efeito ótico.
Texturas podem expressar idéias de movimento e mudança. É geralmente utilizado como fundo,
agindo como coadjuvante para a imagem ou forma principal.

Cor

A cor exerce papel fundamental na comunicação visual, podendo exprimir, descrever ou codificar algo.
Também pode ressaltar, conectar ou esconder.
As cores que vemos são produzidas pela luz. Quando a luz ilumina um objeto algumas cores são
absorvidas pelo objeto em questão enquanto outras são refletidas na direção da visão humana. Logo, nossa
percepção de cor depende não apenas da pigmentação das superfícies, mas também da intensidade e do tipo
de luz ambiente.
A cor muda de sentido de uma cultura para outra. O branco, por exemplo, é associado à pureza no
ocidente, mas no Japão ele é associado à morte. O vermelho utilizado pelas noivas no Japão é considerado
extravagante na Europa e nas Américas.
Teoria básica das cores: a partir da descoberta do espectro de cores formado pela luz refletida em um
prisma de Issac Newton (1665), originou-se o disco cromático utilizado pelos designers no trabalho com cores.
As cores dispostas próximas, são chamadas de análogas, são utilizadas quando se busca uma combinação
elegante e uniforme. Combinações de cores próximas suavizam a distinção entre os elementos. As cores
complementares (posicionadas diametralmente no disco) geram resultados contrastantes e fortes. Tendem a
precisar mais as formas.
Modelos cromáticos: O modelo “aditivo” é baseado na resposta fisiológica do olho humano à luz,
temos apenas três tipos de receptores, chamados cones. Tais cones respondem pelas cores vermelha, verde e
azul. Esse modelo é utilizado para desenvolver projetos na tela. Métodos de impressão utilizam pigmentos que
absorvem determinadas cores e refletem outras. Nesse modelo, chamado de sistema subtrativo, as
combinações são feitas com o ciano, o magenta, o amarelo e o preto (CMYK).
Interação cromática: As cores são sobrepostas pelos designers para criar atmosferas e qualidades
específicas, usando uma cor para intensificar ou minimizar outra.

Figura/Fundo

A relação figura/fundo define a percepção visual. Uma figura é sempre vista em relação ao que a
rodeia (fundo). A criação de tensões de figura/fundo adiciona energia visual a uma imagem.
Também conhecido com espaço positivo/negativo, a combinação figura/fundo, em cartazes, layouts e
designs de telas, equilibra o que é colocado dentro contrapondo-se ao que é deixado fora.
A relação figura/fundo pode ser estável quando a figura se destaca claramente de seu fundo. Quando
os elementos positivos e negativos atraem nossa atenção igualmente, ocorre uma relação reversível. Através de
contraste visual (cores, formas, tamanhos) chega-se a uma relação reversível.
Enquadramento

O enquadramento cria as condições para compreender uma imagem ou um objeto. Faz parte da
arquitetura fundamental do design gráfico. Uma interface é um tipo de enquadramento. O retângulo da tela do
computador oferece um quadro constante para o ato de criação em design. Várias janelas chamam nossa
atenção, cada uma delas delimitada por molduras.
Os contornos servem para conter uma imagem, destacando-a do fundo e tornando-a mais visível. Eles
afetam o modo como percebemos a informação.
O enquadramento pode delimitar o campo de visão (olho mecânico da câmera); pode criar um novo
sentido ao mudar a escala de seus elementos em relação à totalidade da imagem, através de um recorte;
podem enfatizar uma imagem ou campo de texto através da utilização de margens; ou tornar uma imagem
parecer maior e mais ativa ao sangrá-la.
Enquadrando texto e imagem: texto e imagem combinam-se de várias maneiras. O texto pode ser
subordinado ou predominar sobre uma imagem. Pode ser grande ou pequeno, interno ou externo, opaco ou
transparente.
Contornos: O contorno pode ajudar a definir uma imagem na qual falta uma separação óbvia, enfatizar
uma fronteira externa ou ainda enquadrar uma área dentro de uma imagem. Ele estabelece uma transição
entre imagem e fundo.

Hierarquia

A hierarquia é a ordem de importância dentre de um grupo. Ela emprega marcas claras de separação
para sinalizar a mudança de um nível para outro.
No design interativo, por exemplo, menus, textos e imagem podem receber uma ordem visual por
meio do seu posicionamento e de uma formatação consistente. O sumário de um livro oferece uma imagem
estrutural do texto que virá adiante.

Camadas

São componentes simultâneos e sobrepostos de uma imagem ou seqüência, criando várias relações de
interação diferentes entre os elementos. Estão presentes em mapas, notações musicais e também vários
softwares, como Illustrator e Photoshop.
A maioria das técnicas de impressão também utiliza o conceito de camadas a partir da necessidade de
se ter uma imagem decomposta em quatro cores (CMYK) antes de sua reprodução.
Antes mesmo dos softwares, os designers já criavam “artes-finais” compostas, utilizando papel e
acetato. A técnica de colagem utilizada pelos cubistas no início do século XX já utilizava o conceito de camadas e
influenciou profundamente o design.
As camadas permitem que o designer crie variações de mesmo projeto, colocando ou retirando
camadas.
Cor, linha, textura, símbolos, ícones e tipografia são vários elementos utilizados pelos designers para
criar diferentes níveis de informação em projetos como mapas, que apresentam inúmeros elementos em
camadas.

Transparência

Qualquer superfície é mais ou menos transparente ou opaca. No design, a transparência se torna ativa
quando seu valor está entre zero e cem por cento.
A transparência é correlata das camadas, permitindo o acesso visual entre elas. É muito utilizada, por
exemplo, em vídeo e animações, nas fusões de uma imagem para outra.
Pode ser utilizada para enfatizar valores e manter a integridade e legibilidade dos elementos; para
conectar diferentes níveis de conteúdo; ou ainda para adicionar complexidade ao misturar as camadas.
Modularidade

O módulo é um elemento fixo utilizado no interior de um sistema ou estrutura maior. No design,

muitas composições são trabalhadas a partir da modularidade. Um pixel, por exemplo, é um módulo que faz
parte da construção de uma imagem. A modularidade implica restrição, que, quando bem definida, pode liberar
o processo criativo, ao descartar outras possibilidades. Uma construção modular é baseada em um grid.

Grid

Um grid é uma rede de linhas, em geral cortando um plano horizontal e verticalmente. Mas também
pode ser anguloso, irregular ou ainda circular. É um meio de dispor e relacionar os elementos de uma página.
Facilita a navegação do leitor pelas informações de um impresso. Pode ser severo, impondo um caráter plano,
ou quebrado, criando um sentido movimento.
Quando bem feito, um grid incentiva o designer a variar a escala e o posicionamento dos elementos,
sem precisar contar apenas com julgamentos arbitrários. O grid converte uma área vazia num campo
estruturado.
O grid auxilia o designer na criação de composições ativas e assimétricas, ao invés de estáticas e
centradas. A partir das suas divisões, estimula o designer a deixar algumas áreas abertas ao invés de preencher
a página completamente.
Podemos construir composições, layouts e padronagens dividindo um espaço em campos e preenchendo-os ou
delineando essas células de maneiras diferentes.
Calendários são construídos a partir de colunas e faixas horizontais. Páginas de publicações como livros
e revistas também utilizam grid de colunas.

Padronagem

Compondo um único elemento em diferentes arranjos, o designer pode criar infinitas variações,
construindo complexidade em torno de uma lógica central, gerando uma padronagem. Ela pode ter uma
estrutura formal ou uma irregularidade orgânica.
O design de padronagens consiste na criação de uma textura maior, baseada em uma estrutura básica,
que pode ser formada por pontos e faixas repetidos em um plano, que interagem formando um grid.
Repetir e girar formas são os princípios universais do design de padronagens.

Diagrama

Um diagrama é a representação gráfica de uma estrutura, situação ou processo. Podem descrever

hierarquia ou um fluxo de idéias. Em contextos editoriais, os diagramas servem para iluminar e explicar idéias
complexas. Podem ser limpos e econômicos ou ricamente expressivos.
Um conjunto de conexões entre nós ou pontos (rede) ou relações sobrepostas, são formas de
representar um conteúdo através de um diagrama.

Tempo e movimento

Tempo e movimento são princípios estreitamente relacionados. O movimento é um tipo de mudança,

e toda mudança acontece no tempo, podendo ser subentendido ou literal. As páginas que se seguem umas as
outras em um livro ou as animações de cinema e televisão possuem uma duração literal. As imagens estáticas,
por sua vez, possuem um movimento implícito, quando, por exemplo, um elemento é colocado na diagonal ou
é parcialmente cortado, posicionando-se em uma extremidade do plano.
Uma seqüência de movimentos é desenvolvida a partir de uma série de storyboards que expressam as
principais fases e movimentos da animação através dos chamados quadros de referência.
Mostrar imagens numa seqüência é uma maneira de representar o tempo ou movimento em um plano
bidimensional.
Fundamentos da animação: as animações utilizam imagens estáticas para criar a ilusão ótica de
movimento. A menor unidade da animação é o quadro, uma única figura estática. Várias imagens em seqüência
geram uma animação quadro-a-quadro.
Ao se produzir uma animação, quadros mais importantes são chamados de quadro-chave (keyframes).
Eles podem ser desenhados à mão ou animados digitalmente, é são em geral os primeiros e os últimos de cada
seqüência de ação. O processo de desenvolvimento dos quadros intermediários é chamado de interpolação
(tweening).
 Storyboard: o storyboard resume o conteúdo ou os momentos-chave dos eventos de uma animação.
Também determina o fluxo do argumento e sugere as principais mudanças na ação. Seu layout, similar aos dos
quadrinhos, comporta esboços ou ilustrações dispostas sequencialmente, possibilitando visualiza-la em
movimento.

Regras e acasos

Regras são criadas pelos designers tanto como artefatos acabados. O design de revistas, por exemplo, é
guiado por um grid e uma hierarquia. Folhas de estilos empregadas em projetos de sites (CSS) são regras para
dispor as diferentes partes dos documentos que irão compor o projeto.
Regras podem ser usadas para gerar formas ou organizar conteúdo. Criar-las é uma parte intrínseca do
trabalho de design.