7/27/2019 Unidade II - Computao Grfica

1/14

Unidade II

52

Princpios de Design

Princpios bsicos

Proximidade

Alinhamento

Repetio

Contraste

53

Proximidade

54

O que Design Grfico? uma forma de secomunicar visualmente um conceito, uma ideia,atravs de tcnicas formais.

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

O princpio da proximidade dita que os itensrelacionados devem ser colocados juntos e itens norelacionados deve ter espao que os separa. Acolocao de itens juntos d pistas visuais paraorganizao lgica da informao ou funcionalidade.Reveja os exemplos a seguir. Note como a imagempara a esquerda no usa proximidade para fornecerunidade visual enquanto o exemplo a direita unificaas formas diferentes usando proximidade.

7/27/2019 Unidade II - Computao Grfica

2/14

Alinhamento

55

Repetio

56

Contraste

57

O princpio do alinhamento diz que o designer deveusar o alinhamento de elementos como umaferramenta para criar unidade visual ou organizao.Cada elemento colocado num trabalho deve estaralinhado a pelo menos um outro elemento dapgina.

O princpio da repetio diz que o designer repetiralgum elemento atravs da pea que est criando.A repetio d unidade ao trabalho. Por exemplo, asduas imagens ao lado. A imagem da esquerdapossui vrias formas que no tm nada em comum,exceto a cor. No h realmente nenhumacaracterstica que as unifique. O exemplo direitaadiciona um crculo repetido em torno de cadaforma. O crculo ajuda a criar um senso de unidadevisual atravs da repetio. Qualquer aspecto de umprojeto pode ser repetido: cor, forma, textura, estilo etamanho da fonte, etc.

O princpio da contraste diz que o designer adicionarcontraste para fazer o projeto interessante de formaque prenda a ateno. O projeto de newsletter daesquerda um layout limpo e simples. Mas carecede elementos que tornem o projeto interessante.Observe como o projeto da direita usa contraste.

7/27/2019 Unidade II - Computao Grfica

3/14

A pea "Lucha Libre", que compe a campanha"Clios", criada pela agncia Y&R para o CafBonogro, recebeu bronze no festival de Cannes2012 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" emCannes 2012.Analise, na pea, as seguintes caractersticas:- proximidade:- alinhamento:- repetio:- contraste:

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

7/27/2019 Unidade II - Computao Grfica

4/14

Tipografia

63

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

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

"Tipografia transformar um espao vazio, numespao que no seja mais vazio. Isto , se voc temuma determinada informao ou um textomanuscrito e precisa dar-lhe um formato impressocom uma mensagem clara que possa ser lida semproblema, isso tipografia. Mas essa definio temo defeito de ser muito curta. Tipografia pode sertambm algo mais interessante, pode fazer algoilegvel, para que o leitor descubra a resposta. Issotambm possvel, e isso tambm tipografia".Wolfgang Weingart

7/27/2019 Unidade II - Computao Grfica

5/14

Foi por volta de 1439 que Johannes Gutenberg tevea brilhante ideia de separar as letras da tbuas dexilogravura (placas de madeira nas quais seesculpiam letras para posterior impresso em alto-relevo) - e usar letras individuais para montar textos.A utilizao dos tipos mveis - como ficaramconhecidas as peas de chumbo feitas porGutenberg - tornou-se um sucesso reconhecido edivulgado quando, em 1455, o ferreiro que se tornoutipgrafo imprimiu 180 bblias (COLLARO, 2007).

A Bblia de Gutenberg.

Detalhes (iluminuras).

7/27/2019 Unidade II - Computao Grfica

6/14

Famlia tipogrfica

68

Tipos mveis

A ideia de organizar fontes em famlias data dosculo XVI, quando as impressoras comearam acombinar tipos romanos e itlicos. O conceito defamlia tipogrfica foi formalizado na virada para o sculo CC.

No exemplo, a famlia tipogrfica Adobe Garamond.Romano: Tambm chamada de normal, ou regular, a forma padro de uma fonte. tipicamenteconcebida como me do restante da famlia.Itlico: No apenas a forma mecanicamenteinclinada de uma fonte. Note no exemplo como asletras tm formas diferentes nas variaes de Adobe

Garamond.Small caps: So maisculas de uma fonte criadaspara se encaixar em uma linha de texto, sendo umpouco mais altas que a altura-x das letrasminsculas.Bold (negrito): Negrito em verses de fontestradicionais comearam a aparecer no sculo XXpara enfatizar palavras.

Note como uma famlia pode ter dezenas devariaes.

7/27/2019 Unidade II - Computao Grfica

7/14

Classificao

70

HUMANISTA OU OLD STYLEAs fontes romanas dos sculos XV e XVI emulam a caligrafiaclssica. A fonte Sabon foi projetada por Jan Tschichold em1966, com base nas fontes de Claude Garamond do sculo XVI.

HUMANISTA SEM SERIFAA fontes sem serifa tornaram-se comuns no sculo XX. A fonteGill Sans, criada por Eric Gill, em 1928, tem caractersticashumanistas. Observe as variaes caligrficas em peso dalinha.

TRANSICIONALEssas fontes tm serifas mais ntidas e um eixo mais vertical doque letras humanistas. Quando as fontes de John Baskervilleforam introduzidas em meados do sculo XVIII, as suas formasagudas e alto contraste foi considerado chocante.

TRANSICIONAL OU SEM SERIFA ANNIMAA fonte Helvetica, projetada por Max Miedinger em 1957, umadas fontes mais utilizadas do mundo. Seu carter verticaluniforme a torna semelhante s letras transicionais serifadas.Essas fontes tambm so referidas como "anonymous sansserif".

Classificao

71

MODERNAAs fontes projetadas por Giambattista Bodoni, nos sculos XIXe incio do XVIII, so radicalmente abstratas. Observe as serifasfinas e retas, o eixo vertical e o contraste de espessura dostraos.

GEOMTRICA SEM SERIFAAlguns tipos sem serifa so construdos em torno de formasgeomtricas. Na Futura, projetada por Paul Renner em 1927, osOs so so crculos perfeitos, e os picos de A e M sotringulos pontiagudos.

EGPSIAVrias fontes em negrito e decorativas foram introduzidas nosculo XIX para uso em publicidade. Fontes egpcias tmpesadas serifas.

72

Um sistema bsico de classificao de fontes foiinventado no sculo XIX, quando os impressoresprocuraram identificar uma histria do seu prprioofcio anlogo histria da arte. Fontes Humanistasesto intimamente ligadas caligrafia e aomovimento da mo. Fontes Transicionais eModernas so mais abstratas e menos orgnicas.Esses trs grupos principais correspondemaproximadamente Renascena, Barroco, e osperodos do Iluminismo na arte e na literatura.Designers nos sculos XX e XXI continuam a criarnovas fontes baseados em caractersticas histricas.

Dezenas de milhares de fontes digitais estodisponveis para uso em computadores de mesa. Amaioria deles no presta... Eis aqui uma pequenaamostra de fontes bem desenhados de uso corrente.A maioria delas foi inspirada por fontes histricas,interpretadas para uso em meios de comunicaomodernos. Todos os tipos de letra, mesmo os maisaparentemente originais, so fundamentadas, emalgum grau, em alguma fonte precedente.Verdana e Georgia so exemplos de fontes criadaspara leitura em tela.

7/27/2019 Unidade II - Computao Grfica

8/14

Anti-aliasing

74

COM ANTI-ALIASING SEM ANTI-ALIASING

75

12 pontos = 1 paica6 paicas = 72 pontos

= 1 polegada= 2,54 cm

Uma fonte medidado topo da maisculaat o final da menordescendente, maisum espao adicional.

A largura do conjunto o corpo da letramais o espao ao lado dele.

As letras na verso Condensed destafonte tem uma largura mais estreita.

CRIME TIPOGRFICOEscalonamento vertical e horizontalA proporo das letras foi difgitalmentedistorcida para criar letras mais estritas oumais largas. As fontes nnunca devem seralteradas desta forma, pois isso altera opeso das linhas e suas propores,detalhadamente medidas por quem a criou.

A tela do computador exibe fontes em pixels. Ostipos na Web podem ser especificados em inmerasunidades de medida diferentes, incluindo pontos oupixels. Enquanto o Mac OS exibe 72 pixels porpolegada, o padro para PCs de 96.

ANTI-ALIASING uma tcnica para fazer o contornodas letras parecerem mais suaves na tela aorenderizar alguns pixels em tons de cinza.Ao preparar imagens para a Web no Photoshop,voc pode escolher entre vrias configuraes deanti-aliasing, a partir de "none" (que gera letrasbitmap), a "smooth" (que funciona melhor emtamanhos grandes).

ALTURAO sistema de pontos, usado para medir a altura deuma 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,35milmetros. Doze pontos igual a uma paica, aunidade utilizada para medir a largura das colunas.A tipografia tambm pode ser medida em polegadas,milmetros, ou pixels (um ponto mais ou menosequivalente a um pixel). A maioria dos aplicativos desoftware deixa o designer escolher uma unidade demedida preferencial: picas e os pontos so aconfigurao padro.

7/27/2019 Unidade II - Computao Grfica

9/14

Tracking

77

Tracking normal.

Tracking solto.

Tracking normal versus Tracking solto.

Tracking normal.

Tracking normal e Tracking solto no itlico.

TRACKING NORMAL TRACKING NEGATIVO

Faa o sapato caber, e no o p.No use Tracking negativo paraganhar espao.

Kerning

78

A combinao do VE e o TT fazem a palavra parecer embolada.

O Kerning foi manualmente ajustado para espaamentos mais balanceados.

O espaamento aparenta estar desigual, comlacunas entre o T e o W.

O espaamento agora est aparentementemais uniforme.

H uma lacuna entre o L e o Y.

A initmidade pretendida com o uso do itlicorequer ajuste do Kerning.

Note a lacuna entre o U e B.Quanto maior o tamanho da fonte, mais as lacunas ficamevidentes.

Entreletra (tracking)Espao entre as letras (e os demais glifos) de umdado corte de uma fonte, com valor pr-definido.Este valor apropriado para o corte e a larguramdia dos caracteres. Alm deste espaamento,que vlido para a totalidade dos glifos, os pares dekerning servem para ajustar de forma maissatisfactria certos pares de letras.

O termo Kerning se refere ao ajuste de espao entreduas letras. Se as letras de uma fonte temespaamento muito uniforme, elas formam umpadro que no aparenta ser suficientementeuniforme. Lacunas aparecem, por exemplo, ao redorde letras cujos ngulos so formados para fora ouque emolduram um espao aberto (W, Y, V, T, L).

7/27/2019 Unidade II - Computao Grfica

10/14

Tipos empilhados

79

Por causa de suas ascendentes,descendentes e radicais variaes delarguras, letras em caixa baixa(minsculas) ficam extremamenteinstveis quando empilhadas.

Tipos empilhados

Alinhamento justificado

80

Cada estilo bsicos de alinhamento traz qualidadesestticas e riscos potenciais para o design domaterial em que se est trabalhando. O textojustificado, que tem as bordas retas esquerda e direita, tem sido a norma desde a inveno daimpresso com tipos mveis, o que permitiu acriao de pginas aps pginas de colunas debordas retas. O texto justificado faz uso eficiente doespao, e tambm cria uma forma limpa na pgina.Lacunas feias podem ocorrer quando o comprimentodo linha muito curto em relao ao tamanho do tipoutilizado. A hifenizao rompe palavras longas eajuda a manter as linhas de texto bem coesas. Oespaamento entre letras tambm pode ser usadopara ajustar uma linha.

Alinhamento esquerda

81

No texto alinhado esquerda, a margem esquerda dura e a da direita fluida. Os espaos entre aspalavras no flutuam, ento nunca h grandesburacos dentro das linhas de texto. Neste formato,raramente usado antes do sculo XX, respeita ofluxo de linguagem, em vez de submet-la a umacaixa. Apesar das suas vantagens, o alinhamento esquerda possui algumas armadilhas. Acima de tudo,o designer deve trabalhar para controlar a aparnciada variao do rasgo da borda esquerda. Esterasgo deve parecer agradavelmente irregular, semlinhas excessivamente longas ou curtas, e com ahifenizao mantida a um mnimo. A variao

direita est ruim quando muito irregular, ou quandoas linhas comeam a tomar forma de cunhas, luas outrampolins.

Tipos empilhados: as letras do alfabeto romano noforam criadas para ficarem umas por cima dasoutras.

7/27/2019 Unidade II - Computao Grfica

11/14

Alinhamento direita

82

O alinhamento direita, com a esquerda irregular, uma variante do alinhamento esquerda, que

mais usado. senso comum entre os tipgrafos queo texto alinhado direita difcil de ler, porque foraos olhos do leitor a encontrar uma nova posio noincio de cada linha. Isto pode ser verdade, ou pode

ser uma lenda urbana. De qualquer forma, aoalinhamento do texto direita raramente

empregado para longos blocos de texto. usado emblocos menores, muito eficaz para notasmarginais, barras laterais, citaes, ou outras

passagens que comentem sobre um corpo principalde texto ou imagem. A borda irregular pode sugerir

atrao (ou repulso) ente blocos de informao.

Alinhamento centralizado

83

O texto centralizado simtrico como a fachada deum edifcio clssico. muitas vezes empregado em

convites, pginas de rosto, certificados e pedrassepulcrais. As extremidades de uma coluna

centralizada podem ser dramaticamente desiguais.Linhas centralizadas muitas vezes so quebradas

para enfatizar a informao mais importante (como onome da noiva ou a data de seu casamento) ou para

permitir que um novo pensamento comece em suaprpria linha.

Grid (ou grade estrutural)

84

7/27/2019 Unidade II - Computao Grfica

12/14

Coluna nica

85

Mltiplas colunas

86

Mltiplas colunas com ncorahorizontal

87

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

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

Uma tira horizontal divide a rea do texto da rea daimagem. Uma rea no topo usada para imagens elegendas.O corpo do texto, na pgina da direita, se apoia apartir de uma linha comum.

7/27/2019 Unidade II - Computao Grfica

13/14

Grid modular

88

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

A Times New Roman uma fontecom ou sem serifa?

90

Pgina esqueda: esse grid modular tem quatrocolunas e quatro linhas.Pgina direita: uma imagem ou bloco de textopode ocupar um ou mais mdulos. Infinitasvariaes so possveis.

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

Resposta:

7/27/2019 Unidade II - Computao Grfica

14/14

Qual a fonte mais usada nomundo?

91

Arial

HelveticaComic Sans

Cambria

Resposta: