O que Design Grco? uma forma de se comunicar visualmente um conceito, uma ideia, atravs de tcnicas formais.

Unidade II
Princpios de Design

52

Princpios bsicos
Proximidade Alinhamento Repetio Contraste

Estas so princpios usados para um bom design. Para quebrar estes princpios necessrio antes domin-los.

53

Proximidade

O princpio da proximidade dita que os itens relacionados devem ser colocados juntos e itens no relacionados deve ter espao que os separa. A colocao de itens juntos d pistas visuais para organizao lgica da informao ou funcionalidade. Reveja os exemplos a seguir. Note como a imagem para a esquerda no usa proximidade para fornecer unidade visual enquanto o exemplo a direita unica as formas diferentes usando proximidade.

54

Alinhamento

O princpio do alinhamento diz que o designer deve usar o alinhamento de elementos como uma ferramenta para criar unidade visual ou organizao. Cada elemento colocado num trabalho deve estar alinhado a pelo menos um outro elemento da pgina.

55

Repetio

O princpio da repetio diz que o designer repetir algum elemento atravs da pea que est criando. A repetio d unidade ao trabalho. Por exemplo, as duas imagens ao lado. A imagem da esquerda possui vrias formas que no tm nada em comum, exceto a cor. No h realmente nenhuma caracterstica que as unique. O exemplo direita adiciona um crculo repetido em torno de cada forma. O crculo ajuda a criar um senso de unidade visual atravs da repetio. Qualquer aspecto de um projeto pode ser repetido: cor, forma, textura, estilo e tamanho da fonte, etc.

56

Contraste

O princpio da contraste diz que o designer adicionar contraste para fazer o projeto interessante de forma que prenda a ateno. O projeto de newsletter da esquerda um layout limpo e simples. Mas carece de elementos que tornem o projeto interessante. Observe como o projeto da direita usa contraste.

57

A pea "Lucha Libre", que compe a campanha "Clios", criada pela agncia Y&R para o Caf Bonogro, recebeu bronze no festival de Cannes 2012 nas categorias "Press" e "Outdoor". Analise, na pea, as seguintes caractersticas: - proximidade: - alinhamento: - repetio: - contraste:

A pea "Urso", criada pela Y&R para a Goodyear, recebeu o bronze na categoria "Outdoor" em Cannes 2012. Analise, na pea, as seguintes caractersticas: - proximidade: - alinhamento: - repetio: - contraste:

A campanha "Billionaires" criada pela Ogilvy para a revista "Forbes" recebeu prmio em duas categorias. Faturou o ouro em "Outdoor" e prata em "Press" com peas que mostram como seria o mundo sem os homens mais ricos. Analise, na pea, as seguintes caractersticas: - proximidade: - alinhamento: - repetio: - contraste:

Analise, na pea, as seguintes caractersticas: - proximidade: - alinhamento: - repetio: - contraste:

Analise, na pea, as seguintes caractersticas: - proximidade: - alinhamento: - repetio: - contraste:

Tipograa

"Tipograa transformar um espao vazio, num espao que no seja mais vazio. Isto , se voc tem uma determinada informao ou um texto manuscrito e precisa dar-lhe um formato impresso com uma mensagem clara que possa ser lida sem problema, isso tipograa. Mas essa denio tem o defeito de ser muito curta. Tipograa pode ser tambm algo mais interessante, pode fazer algo ilegvel, para que o leitor descubra a resposta. Isso tambm possvel, e isso tambm tipograa". Wolfgang Weingart

63

Foi por volta de 1439 que Johannes Gutenberg teve a brilhante ideia de separar as letras da tbuas de xilogravura (placas de madeira nas quais se esculpiam letras para posterior impresso em altorelevo) - e usar letras individuais para montar textos. A utilizao dos tipos mveis - como caram conhecidas as peas de chumbo feitas por Gutenberg - tornou-se um sucesso reconhecido e divulgado quando, em 1455, o ferreiro que se tornou tipgrafo imprimiu 180 bblias (COLLARO, 2007).

A Bblia de Gutenberg.

Detalhes (iluminuras).

Tipos mveis

Famlia tipogrca

A ideia de organizar fontes em famlias data do sculo XVI, quando as impressoras comearam a combinar tipos romanos e itlicos. O conceito de famlia tipogrca foi formalizado na virada para o s culo CC. No exemplo, a famlia tipogrca Adobe Garamond. Romano: Tambm chamada de normal, ou regular, a forma padro de uma fonte. tipicamente concebida como me do restante da famlia. Itlico: No apenas a forma mecanicamente inclinada de uma fonte. Note no exemplo como as letras tm formas diferentes nas variaes de Adobe Garamond. Small caps: So maisculas de uma fonte criadas para se encaixar em uma linha de texto, sendo um pouco mais altas que a altura-x das letras minsculas. Bold (negrito): Negrito em verses de fontes tradicionais comearam a aparecer no sculo XX para enfatizar palavras.

68

Note como uma famlia pode ter dezenas de variaes.

Classicao
HUMANISTA OU OLD STYLE As fontes romanas dos sculos XV e XVI emulam a caligraa clssica. A fonte Sabon foi projetada por Jan Tschichold em 1966, com base nas fontes de Claude Garamond do sculo XVI.

HUMANISTA SEM SERIFA A fontes sem serifa tornaram-se comuns no sculo XX. A fonte Gill Sans, criada por Eric Gill, em 1928, tem caractersticas humanistas. Observe as variaes caligrcas em peso da linha.

Um sistema bsico de classicao de fontes foi inventado no sculo XIX, quando os impressores procuraram identicar uma histria do seu prprio ofcio anlogo histria da arte. Fontes Humanistas esto intimamente ligadas caligraa e ao movimento da mo. Fontes Transicionais e Modernas so mais abstratas e menos orgnicas. Esses trs grupos principais correspondem aproximadamente Renascena, Barroco, e os perodos do Iluminismo na arte e na literatura. Designers nos sculos XX e XXI continuam a criar novas fontes baseados em caractersticas histricas.

TRANSICIONAL Essas fontes tm serifas mais ntidas e um eixo mais vertical do que letras humanistas. Quando as fontes de John Baskerville foram introduzidas em meados do sculo XVIII, as suas formas agudas e alto contraste foi considerado chocante.

TRANSICIONAL OU SEM SERIFA ANNIMA A fonte Helvetica, projetada por Max Miedinger em 1957, uma das fontes mais utilizadas do mundo. Seu carter vertical uniforme a torna semelhante s letras transicionais serifadas. Essas fontes tambm so referidas como "anonymous sans serif".

70

Classicao
MODERNA As fontes projetadas por Giambattista Bodoni, nos sculos XIX e incio do XVIII, so radicalmente abstratas. Observe as serifas nas e retas, o eixo vertical e o contraste de espessura dos traos.

GEOMTRICA SEM SERIFA Alguns tipos sem serifa so construdos em torno de formas geomtricas. Na Futura, projetada por Paul Renner em 1927, os Os so so crculos perfeitos, e os picos de A e M so tringulos pontiagudos.

EGPSIA Vrias fontes em negrito e decorativas foram introduzidas no sculo XIX para uso em publicidade. Fontes egpcias tm pesadas serifas.

71

Dezenas de milhares de fontes digitais esto disponveis para uso em computadores de mesa. A maioria deles no presta... Eis aqui uma pequena amostra de fontes bem desenhados de uso corrente. A maioria delas foi inspirada por fontes histricas, interpretadas para uso em meios de comunicao modernos. Todos os tipos de letra, mesmo os mais aparentemente originais, so fundamentadas, em algum grau, em alguma fonte precedente. Verdana e Georgia so exemplos de fontes criadas para leitura em tela.

72

A tela do computador exibe fontes em pixels. Os tipos na Web podem ser especicados em inmeras unidades de medida diferentes, incluindo pontos ou pixels. Enquanto o Mac OS exibe 72 pixels por polegada, o padro para PCs de 96.

Anti-aliasing

ANTI-ALIASING uma tcnica para fazer o contorno das letras parecerem mais suaves na tela ao renderizar alguns pixels em tons de cinza. Ao preparar imagens para a Web no Photoshop, voc pode escolher entre vrias conguraes de anti-aliasing, a partir de "none" (que gera letras bitmap), a "smooth" (que funciona melhor em tamanhos grandes).

COM ANTI-ALIASING SEM ANTI-ALIASING

74

12 pontos = 1 paica 6 paicas = 72 pontos = 1 polegada = 2,54 cm A largura do conjunto o corpo da letra mais o espao ao lado dele.

Uma fonte medida do topo da maiscula at o nal da menor descendente, mais um espao adicional.

As letras na verso Condensed desta fonte tem uma largura mais estreita.

ALTURA O sistema de pontos, usadopara medir a altura de uma letra, assim como o espao entre as linhas (leading), a medida padro para o tipo. Um ponto igual a 1/72 de polegada ou 0,35 milmetros. Doze pontos igual a uma paica, a unidade utilizada para medir a largura das colunas. A tipograa tambm pode ser medida em polegadas, milmetros, ou pixels (um ponto mais ou menos equivalente a um pixel). A maioria dos aplicativos de software deixa o designer escolher uma unidade de medida preferencial: picas e os pontos so a congurao padro.

CRIME TIPOGRFICO Escalonamento vertical e horizontal A proporo das letras foi difgitalmente distorcida para criar letras mais estritas ou mais largas. As fontes nnunca devem ser alteradas desta forma, pois isso altera o peso das linhas e suas propores, detalhadamente medidas por quem a criou.

75

Tracking
TRACKING NORMAL Tracking normal. TRACKING NEGATIVO

Entreletra (tracking) Espao entre as letras (e os demais glifos) de um dado corte de uma fonte, com valor pr-denido. Este valor apropriado para o corte e a largura mdia dos caracteres. Alm deste espaamento, que vlido para a totalidade dos glifos, os pares de kerning servem para ajustar de forma mais satisfactria certos pares de letras.

Tracking solto.

Tracking normal versus Tracking solto.

Tracking normal.

Tracking normal e Tracking solto no itlico. Faa o sapato caber, e no o p. No use Tracking negativo para ganhar espao.

77

Kerning
O espaamento aparenta estar desigual, com lacunas entre o T e o W. A combinao do VE e o TT fazem a palavra parecer embolada.

O termo Kerning se refere ao ajuste de espao entre duas letras. Se as letras de uma fonte tem espaamento muito uniforme, elas formam um padro que no aparenta ser sucientemente uniforme. Lacunas aparecem, por exemplo, ao redor de letras cujos ngulos so formados para fora ou que emolduram um espao aberto (W, Y, V, T, L).

O Kerning foi manualmente ajustado para espaamentos mais balanceados. O espaamento agora est aparentemente mais uniforme.

H uma lacuna entre o L e o Y.

Note a lacuna entre o U e B. Quanto maior o tamanho da fonte, mais as lacunas cam evidentes. A initmidade pretendida com o uso do itlico requer ajuste do Kerning.

78

Tipos empilhados

Tipos empilhados: as letras do alfabeto romano no foram criadas para carem umas por cima das outras.

Por causa de suas ascendentes, descendentes e radicais variaes de larguras, letras em caixa baixa (minsculas) cam extremamente instveis quando empilhadas.

79

Alinhamento justicado
Cada estilo bsicos de alinhamento traz qualidades estticas e riscos potenciais para o design do material em que se est trabalhando. O texto justicado, que tem as bordas retas esquerda e direita, tem sido a norma desde a inveno da impresso com tipos mveis, o que permitiu a criao de pginas aps pginas de colunas de bordas retas. O texto justicado faz uso eciente do espao, e tambm cria uma forma limpa na pgina. Lacunas feias podem ocorrer quando o comprimento do linha muito curto em relao ao tamanho do tipo utilizado. A hifenizao rompe palavras longas e ajuda a manter as linhas de texto bem coesas. O espaamento entre letras tambm pode ser usado para ajustar uma linha.

80

Alinhamento esquerda
No texto alinhado esquerda, a margem esquerda dura e a da direita uida. Os espaos entre as palavras no utuam, ento nunca h grandes buracos dentro das linhas de texto. Neste formato, raramente usado antes do sculo XX, respeita o uxo de linguagem, em vez de submet-la a uma caixa. Apesar das suas vantagens, o alinhamento esquerda possui algumas armadilhas. Acima de tudo, o designer deve trabalhar para controlar a aparncia da variao do rasgo da borda esquerda. Este rasgo deve parecer agradavelmente irregular, sem linhas excessivamente longas ou curtas, e com a hifenizao mantida a um mnimo. A variao direita est ruim quando muito irregular, ou quando as linhas comeam a tomar forma de cunhas, luas ou trampolins.

81

Alinhamento direita
O alinhamento direita, com a esquerda irregular, uma variante do alinhamento esquerda, que mais usado. senso comum entre os tipgrafos que o texto alinhado direita difcil de ler, porque fora os olhos do leitor a encontrar uma nova posio no incio de cada linha. Isto pode ser verdade, ou pode ser uma lenda urbana. De qualquer forma, ao alinhamento do texto direita raramente empregado para longos blocos de texto. usado em blocos menores, muito ecaz para notas marginais, barras laterais, citaes, ou outras passagens que comentem sobre um corpo principal de texto ou imagem. A borda irregular pode sugerir atrao (ou repulso) ente blocos de informao.

82

Alinhamento centralizado

O texto centralizado simtrico como a fachada de um edifcio clssico. muitas vezes empregado em convites, pginas de rosto, certicados e pedras sepulcrais. As extremidades de uma coluna centralizada podem ser dramaticamente desiguais. Linhas centralizadas muitas vezes so quebradas para enfatizar a informao mais importante (como o nome da noiva ou a data de seu casamento) ou para permitir que um novo pensamento comece em sua prpria linha.

83

Grid (ou grade estrutural)

84

Coluna nica

A estrutura mais bsica o grid de coluna nica. Esta uma SPREAD (de pgina dupla). As margens internas so mais largas que as externas, criando espao para a lombada do livro.

85

Mltiplas colunas

H vrias formas de usar um grid com mltiplas colunas. No exemplo, uma coluna foi reservada para imagens e legendas, e as outras para o texto. Na variao direita, imagens e texto dividem o espao das colunas.

86

Mltiplas colunas com ncora horizontal

Uma tira horizontal divide a rea do texto da rea da imagem. Uma rea no topo usada para imagens e legendas. O corpo do texto, na pgina da direita, se apoia a partir de uma linha comum.

87

Grid modular

Pgina esqueda: esse grid modular tem quatro colunas e quatro linhas. Pgina direita: uma imagem ou bloco de texto pode ocupar um ou mais mdulos. Innitas variaes so possveis.

88

O design deste livro de Max Bill, 1940. Die Neue Architektur/The New Architecture, por Max Roth Considerado o primeiro uso de grid modular da histria do design de livros.

Considerado o primeiro uso de grid modular da histria do design de livros.

Resposta:

A Times New Roman uma fonte com ou sem serifa?

90

Resposta:

Qual a fonte mais usada no mundo?

Arial Helvetica Comic Sans Cambria

91