DESIGN ee. QUEM NAG E DESIGNEREste livro serve para vocé? Este livro se destina a todos aqueles que precisam criar paginas mas que ndo sm qualquer tipo de treino formal em design. Nao me refiro apenas aqueles que esto criando embalagens incriveis ou folhetos extensos: falo das secretarias, coos chefes, hoje em dia, solicitam que elas riem os jornaisinformativos (newsletters) dos voluntarios religinsos que esto montando materiais com informacées sobre suas congregagbes; des pequenos empresirios que estao criando seus préprios antincios, dos estudantes que compreendem que um trabalho com uma boa aparéncia pode significar uma nota melhor; dos profissionais que tém consciéncia de que uma apresentagdo interessante conquista mais respeito; dos professores |queaprenderam que os alunos reagem de maneira muito mais posiiva as informagoes dispostas de maneira mais estética; aos profissionais da area de estatistica que esto notando que os niimeros e as porcentagens podem ser organizados de ‘maneira a convidar a leitura € nao a dormir. Aqui parto do pressuposto de que os leitores nao tém tempo ou vontade de estudar design e tipografia, mas gostariam de saber como criar suas paginas com luma estética melhor. A maioria das pessoas tem capacidade de olhar para uma pagina com um design pobre e concluir que nao gostam dela, mas ndo sabeiam 0 Este exernplo epresenta Toad Hall ‘a mesme organizagso Reilly Pekett sual, mas o8t6 alnhado & direita, Agora 0 canto berm delimitado 4 direita ficou vishal A linha irviivel 6 0c eto que conecte es omasied cextrormicaces dos dois conjuntos de texto € meis forte se comparada o a ‘a opgao com o alinhamento centralizado. A linha invisivel passa por aqui, conectande o texto.BDESIGN PARA QUEM NAO £ DESIGNER ‘Voce costuma centralizar tudo automaticamente? O alinhamento centralizado € 0 mais usado pelos iniciantes: € muito seguro e a sensacdo de usé-lo é de conforto. O alinhamento centralizado cria uma aparéncia mais for- mal, mais comum e sem brilho. Dé uma olhada nas diagramagdes de que voce mais gosta. Aposto que a maioria dos materiais com uma estética sofisticada nao esta centralizada. Sei que ¢ dificil para um iniciante libertar~ se do alinhamento pelo centro; vocé precisard forcar-se a fazé-lo uma primeira vez. Mas experimente combinar 0 alinhamento a esquerda ou & direita com 0 bom uso da proximidade ¢ ficaré surpreso com as mudangas que ocorrerdo em seu trabalho, Plangjamento Cia. Red Hen por Shannon Williams ‘20 de margo de 1999 por Shannon Williams 20 de mango de 1989 A Esta é ume tipica capa de AMA forge do alinhamento & relatério, certo? ‘eaquerie confere & capa do Este formato padre relat6rio uma aparéncia tem uma aparéncia sern mais sofisticada, Mesrno britho, quase amadora, que 0 nome da autora capac. de influenciar a esteja cfstente do titulo, 2 reago inicial de urna peesoe linha invisivel criada peto em relagio 20 reletério. alinharnento conecta os dois blocos de texto.3 DESIGN ALINHAMENTO Nao estou sugerindo que vocé nunca centralize nada! Basta estar consciente do efeito do alinhamento pelo centro. Seré que é realmente esta a aparéncia que voce dleseja criar? As vezes & Por exemplo: as casamentos costumam ser eventos formais, portanto, se voce quiser centralizar 0 texto do seu convite de casamento, poders fazé-l As vezi € possivel dar uma pitada de graca 8 opeao centralizada, como, por exemplo, centralizar 0 texto colocar © préprio bloco de texto fora centro, Outra opeao € colocar as letras mais acima na pagina, para criar mais “ten: voeé também pode usar uma fonte muito casual e engracada, com um alinhamento muito formal, centralizado. Vocé esta Vocé esta : carinhosamente carinhosamente convidadoa assistir! convidado a assistir! } A Centralizado. Realmente A Se vooé quiser centralizar 0 comum texto, pelo mens faga com que ele fique centralizado de maneira Sbivia. a errd Pee est Ard ete LE ry Cece A Experimente descentralizar © Se vooé centralizar 0 loco com 0 texto texto, tente fazé-lo ficar centralizado. mais expressivo de algura maneira,DESIGN PARA QUEM NAO £ DESIGN ‘Voce esté habituado a trabalhar com alinhamentos de texto, Até adquitir lembre-se de uma regra: utilize apenas um alinhamento de texto por pagina, ou seja, 0 texto deve ser todo alinhado a esquerda, alinhado a direita ou centralizado. 5 Este texto esta Este texto esta alinhado & alinhado & esquerda. direita. Algumas Algumas pessoas 0 pessoas o classificam classificam como como irregular & irregular a direita esquerda. Este texto esta centralizado. Se voce preferir o texto centralizado, faga com que a centralizacao seja Sbvia. Por exemplo, neste pardgrafo € dificil dizer se o texto foi centralizado propositalmente ou, talvez, involuntariamente. As larguras das linhas no sdo as mesmas, mas nao sao completamente diferentes Se vocé nao souber visualizar imediatamente a centralizacao, por que fazé-lo? Este texto estd juustifieado. Algumas pessoas 0 classificam como alinhado a direita ¢ a esquerda © algumas como blocado. As linhas de texto ficam alinhadas dos dois lados. $6 utilize este alinhamento se as suas linhas puderem ter uma largura tal que evite a formacao de “vazios" horriveis entre as palavras, ER3 DESIGN ALINHAMENTO SS As vezes & possivel utilizar os alinhamentos a direita € & esquerda na ifique de alinhar os mesma pagina, mas ¢ importante que vocé se ce elementos de alguma maneira Pct Neste exernglo, © titulo @ 0 anno cs crass | RObert Burns esquerda, mes @ descrig&o | fama nul: esta centralized; ndo existe um alinhamento em comum entre 08 dois elementos le texto. Eles n8o esto conectados entre si | Amais completa edigdo ddo maior poeta Iiricoda Escécia > Apesar de esses dois elernentos peroweemeovae | RObert Burns alnharnentos diferentes | MN, (© texto de cirma esta alinhado & esquerda © 0 de beixo, & direital, a lateral do texto descritivo de baixo esté alinhada com a lateral dirsita do titulo de cima, conectando os elementos Amais através de ume linhe invisivel. completa edigao sto ndo foi feito por acaso! aeHI DESIGN PARA QUEM NAO £ DESIGNER Quando colocar outros itens na pagina, é importante que cada um deles tenha um alinhamento visual com outro item da pagina, Se as linhas de texto estiverem horizontais, alinhe suas linhas de base. Se houver vérios blocos de texto separados, alinhe suas laterais direitas ou esquerdas. Se houver figuras, alinhe suas laterais com outras laterais existertes na pagina Nada deve ser posicionado arbitrariamente na pagina! ‘er oi om 1720 Ge sominde apie omeeruptar se" saigaass tte 3 A Meso que esta seja ume planitha bastante comum e sem etrativos, néo hé motivos para néo fazer com que a pagine fique com uma aparéncia melhor ¢ apresentar as informagdes com 0 maximo de clareza possivel, Neste caso hé dois problemas, certo? Falta de proximicade e felta de ainhamento.3 DESIGN ALINHAMENTO & ————— Provavelmente a falta de alinhamento seja a maior causa de materiais com uma aparéncia antiestética, Seus olhos gostam de ver tudo em ordem, pois isso cria uma sensagio de calma e seguranca. Em qualquer material com um bom design € possivel desenhar linhas sobre os objetos alinhados, mesmo que a apresentagao do material seja composta por itens muito diferentes Sertalin TsO amen ct eee eee i I featera fapactortch—tneutor) rain ‘A Neste caso, 0 simples alinharnento dos itens muda tudo, Observe que nenhurn item esté colocado arbitrariamente na pagina; todo iter tern alguma conexdo visual com outro. ‘Se eu soubesse do que trata esse planiha, talvez optasse por passer 0 item quadrado da cireita para @ esquerda, aproximando-o da pianitha maior mantendo sues partes superiores alinhadas, ¢ nao ‘me preocuparia em alinhar @ tabole quadrada @ lateral dircita. Se eu fizesse tudo assim, ajustaria o espagarnento entre as tras planilhes, segundo suas interligagdes lSgicas.1 HP DESIGN PARA QUEM NAO £ DESIGNER Um inconveniente com os materiais criados por pessoas que nao conhecem design é a sui falta de alinhamento, como titulos centralizados e subtitulos com pardgrafos de endentacao. A primeira vista, qual dos exemplos destas duas paginas tém um visual mais limpo e preciso? Honor Form ign aqua ct va eon fo a ‘Esta é ure diegramagao muito comum: os titulos esto centralizedos, 0 texto esté alinnado & eequerda, a8 endentagdes de pardgrafos tém e lergura des da maquina de escrever (ou seja, cinco espagos ou meia polegada, como se sprende nos cursos de datiloarafia) @ a foto esté centralizada em ume das colunes. D Nunca centralize os titulos se © texto for alinhado & esquerdla ou se ele tiver endentagdes. Se o texto n&o tiver laterais @ esquerde e & direita tbemn-delimitadas, nao € possivel observar se 0 tulo est realmente centralizado. A sensacso € de que ele esté sotto. “Todos estes pontos desalinhados criam uma pégine desorgenizada: endentagdes muito grandes, leterais irreguleres de texto, titulos centralizados com espagos em franco dos dois lados, foto contraiizada,3 DESIGN ALINHAMENTO Estes pequenos desalinhamentos contribuem para que a pagina fique visualmente desorganizada, Encontre uma linha € guie-se através dela ‘Mesmo que a diferenca seja sutil e seu chefe nao consiga dizer qual é a Giferenga entre 0 exemplo a seguir € o anterior, a estética mais sofisticada € obviamente a melhor Honor Form ‘Watcher tarred fu?™ aster ‘ensue els dt hush symphony Tate "catia!" Reeder ness fete indie ‘4 Encontre um alinharnento @ use-0 come guia, Se © texto for alinhado & esquerda, deixe 08 titulos € subtitulos alinhados @ esquerca. © primeiros paragrafos costumam ser deixacios ser endentago. © objetivo de endentar um pardgrafo é 0 de indicar © inicio de um nove parégrefo, mas sempre se sabe que © primeiro tambern ¢ um parégrafo. Em uma maquina de escrever, a endentagéo ‘comum & de cinco esgaqos. No caso das letras proporcionals utilzadas no computador, & endentagéo tipogréfica pedro é @ de um eme lum ete é téo largo quanto o tamanho de sua letra), que meis se ascernetha @ dois eepagos. reste atengo a0 contorno irregular de sus letra, Aluste as linhas de mancire que a lateral Gireita fique 0 meis suave possivel Se hower fotos ou ilustragoes, alithe-as com uma des laterais e/ou com a linha de bese.ELDESIGN PARA QUEM NAO £ DESIGNER Mesmo em um material que tenha uma abertura bem-diagramada ¢ um bom design, uma sutil inexisténcia de alinhamento costuma ser 0 problema- chave para a falta de estética mais profissional. 1A. \oc8 consegue vieualzar todos 06 lugares nos auais of itene poderiarn estar alinhados mas ndo estado? Se este livro for: seu, marque todas es incidéncias de falta de airnharento desta pagina. Ha pelo menos nove!3 DESIGN : ALINHAMENTO El Preste atencio no caso de ilustragées que ficam um pouco desalinhadas para fora da margem, de legendas que estiverem centralizadas sob as fotos, de titulos que ndo estiverem alinhados com o texto, ou de uma combinacao de texto centralizado com texto alinhado a esquerda Kerns ‘A. Vooé consegue ver © que mucdou, comparando este exernplo & (© da pégina anterior? Se este livro for seu, desene linhes paraleles ao alirhamento.DESIGN PARA QUEM NAO E£ DESIGNER Repito: encontre uma linha-guia ¢ utilize-a, Se vocé tiver uma foto ou uma imagem com uma lateral mais marcante, alinhe esta lateral do texto com a margem reta da foto, como mostra o exemplo abaixo. Lorem Ipsum Lorem Ipsum dolor sit amet, consectetuer adipiscing e . sed diam nonummy nibh eulsmod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat, ‘4 Existe urna linha-guia muito 0a abeixo do texto. Exiete uma linha-guia muito boa na mergem da fotogrefia. Porém, entre o texto € a foto, existe um espago em franco distribuido, 36 que com ume forma estranha. Quando © espago em franco esté com essa forma, ele separa 08 dois elerentos. Lorem Ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elt, sed diam nonummy nibh, ‘euismod tincidunt ut laoreet dolore magna ali ‘minim veniam, quis nostrud exerci tation am erat volutpat. Ut wisi enim ad ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat, ‘4 “Encontre ume linhe-guie ¢ utiize-a” Agora a linha-guia do texto @ @ da foto estéo proximes entre si, fortalecendo-se. © espago etn brenco flutua livrernente pela margem esquerda. A legenda também foi colocada contra a mesma linha-quia da margem da foto.3 DESIGN ALINHAMENTO a Se os seus alinhamentos estiverem bem-delimitados, voce poderd interromper conscientemente 0 alinhamentos € esta interrupgdo teré uma aparéncia intencional. Que conceito! Lorem Ipsum Amet Dolor Guil Bone ng ae gel AA Berm.. eu tentel néo alinhé-lo, mas sou ‘extremamente “programada". Meso com 0 texto de interrupedo invadindo © bloco de texto, voc conseque ver 0 alinnarnento & esquerda? As vezes é posetvel fazer uma quebra completamente livre de alinhamento, se vooé a fizer de maneira consciente. PEstou transmnitindo véries regras, ras es rogras foram feitas para sere descumnprices. Porém hé uma regra sobre © descurnprimento de regras: lentes de desoumprir uma regra, & preciso conhecé-Ia.GDESIGN PARA QUEM NAO £ DESIGN Nada deveria ser colocado arbitrariamente em uma pagina. Cada clemento deveria ter alguma conexdo visual com outro elemento da pagina ‘A unidace é um conceito muito importante no design. Para que todos os elementos da pagina tenham uma estética unificada, relacionada, ¢ preciso que haja “amarras’ visuais entre os elementos separados, Mesmo que eles nao estejam préximos fisicamente na pagina, podem parecer conectados, relacionados, unificados a outras informacées simplesmente devido ao seu posicionamento, Dé uma olhada nas diagramacSes que agradam. Nao importa se a aparéncia inicial da pagina seja castica € selvagem: vocé sempre encontrard os alinhamentos correspondentes. conectada ¢ inter- O proposito basico 0 propésito basico do alinhamento € 0 de unificar e organizar a pagina O resultado € um pouco similar ao que acontece quando pegamos todas 05 brinquedos cle um bebé que estavam espalhados pelo chao da sala e 0s colocamos em’uma caixa de brinquedos. Normalmente é um alinhamento marcante (combinado, é claro, com a fonte apropriada) que cria uma aparéncia sofisticada, formal, engracada ou séria Como atingir este objetivo Esteja consciente do posicionamento dos elementos na pégina. Encontre sempre algo a mais na pagina para fazer 0 alinhamento, mesmo que os dois objetos estejam fisicamente distantes 0 que evitar Evite usar mais de um alinhamento de texto por pagina (ou seja, no centralize um texto ¢ alinhe outro & direita). Por favor, evite, com todas as suas forcas, 0 alinhamento centralizado, a nao ser que vocé tenha o objetivo consciente de criar uma apresentagao formal, pacata (que costuma ser comum demais). Escolha o alinhamento centralizado conscientemente ¢ nao por automacao. E RRepeticao O principio da repeticao afirma que algum aspeeto do design deve repetir- seno material inteiro. () clemento repetitive pode ser uma fonte em bold {negrito), um fio (linha) grosso, algum sinal de tépico, um elemento do design, algum formato especifico, relacdes espaciais ete. Pode ser qualquer item que 0 leitor reconheca visualmente. Voce jé utiliza a repeticao no seu trabalho: quando ctia titulos com mesmo tamanho € mesmo peso, quando coloca um fio a meia polegada do final de cada pagina, quando usa 0 mesmo sinal de tépico em cada listagem referente ao mesmo trabalho, Estes so todos exemplos de repeticio. O que 08 iniciantes precisam fazer € ir mais além, seguindo esta mesma idéia, ou seja, precisam transformar a repeticao imperceptivel em um clemento-chave visual que unifica 0 material. A cepeticao pode ser considerada como “consisténcia’. Ao olhar para um newsletter (jornal) de oito paginas, justamente a repetigio de alguns elementos — sua consisténcia — que faz com que cada uma dessas vito paginas pareca pertencer ao mesmo newsletter. Se a pgina 7 ndo contiver clementos repetitivos trazidos da pagina 6, 0 newsletter inteiro perder sua aparéncia coesa Porém, a repeticao vai além da simples consisténcia: é um esforgo consciente para unificar todos os elementos do designDESIGN PARA QUEM NAO £& DESIGNER es Aqui esté o mesmo cartéo de visitas com o qual trabalhamos anteriormente No segundo exemplo acrescentei um elemento repetitivo: a fonte forte em bold (negrito). Dé uma olhada nele e observe para onde seus olhos se mover. Depois de ler 0 niimero telefénico, 0 que voce lé? Voce volta ao outro tipo em bold do inicio do texto? Este € um truque visual que os designers sempre utilizam para controlar 0 fluxo do olho dos leitores, para manter sua atencdo sobre a pagina 0 maximo de tempo possivel eee 4 Ao atingir 0 final das informagoes, seu oho fica vagando pelo certo? Rely Pickett ‘96 ola Wer Road ed ier, WM | wan sss-i21 oe 4 Agora, 60 atingir 0 Toad Hall final das inforrnagdes, Rely Pickett pore onde seu oho 6 direcionado? Ele fica oscilando entre os elernentos ern bold? 1216 Old River Roas ad River, NM (77 555-12124 DESIGN RereTicAo @ —— Aproveite os elementos que voce jé estiver utilizando para fazer com que ‘um projeto fique consistente transformando esses elementos em simbolos gréficos repetitivos. Todos os titulos do seu newsletter esto na fonte Times, com 14 pontos? O que vocé acha de arriscar, usando uma fonte em bold, sem serifa, como, por exemplo, a Antique Olive Black, com 16 pontos? Além de sua pagina ficar mais interessante visualmente, vocé ampliard a organizacao visual a consisténcia, deixando-a mais sbvia Vocé estaré reaplicando a repeticao que j4 foi montada no projeto & ampliando-a, de maneira que este projeto ficaré mais forte ¢ dindmico. Lorem ipsu Lorem Ipsum Senetinnage ie wey 405 tituios e subtitulos sd0 um a Escolha um elemento Stimo lugar para se comegar consistente ¢ reforce-o. @ criar elementos repetitivos, J8 que, provavelmente, voc’ tem de menter 8 consisténcia com ees.GDESIGN PARA QUEM NAO £ DESIGNER Vocé costuma criar publicacées com muitas péginas? A repeticio é um fator de grande importancia na unidade dessas paginas. Quando os leitores abrirem © material, deverd ser imediatamente dbvio que as paginas 7 12 fazem parte da mesma publicagdo. As duas paginas apresentadas a seguir sao parte de uma publicacdo. Vocé seria capaz de apontar todos 05 elementos de.repeticao? > Fio cuplo consistent | Honorde Forma eae | ese mena paginas. “Gricmeinavaan | tec pipe > Neonates Vane Fonte | Mor oe, wl corstterte | foams ROS tfulos @ | Dem um ede aired nos subtitulos: in tendrert n vulpuie veliese — Vestibule guardings: e espagos | Sirsa TE ay consistentos | sinanta rare ore facia aaa | torte Siar aan ker chchnge tn dah tng da ing O fio rico se | amissntr mtr Teese tlds tn wate mead regete na "We aed et parte inferior | Sretyiieraal"aniaiy ravines tet de cada | dnaxmanwie damn merrapuret i Hn pagina fessor Gareppnsn ‘Dawu narra > | tener wren Os nimeros | ‘das pgines esto no meamno lugar «xO texto term um ponto de “alinharnento ena mesma final’, mas nem todos o8 textos deve, fonte en necessariamente, alinhar-se neste pont todes as se houver um ponto inicial consistente e paginas. repetitive na parte superior da pagina. Em algunas publcagses, pode-se optar pela repeticéo na parte inferior das paginas, @ no pelo alinharnento @ partir da parte superior da pagina. Mes qualquer urna dessas técnicas deve orier 4 consisténcia.4 DESIGN Repeticao @ Se vocé estiver trabalhando com um material forte, consistente, poder utilizar alguns clementos-surpresa. Sugestao: guarde essas surpresas para 0 uso em itens sobre os quais vocé queira atrair muito a atenci Co leitor. Voce copseguiria apontar os elementos consistentes, repetitivos deste livro? Todos os textos, ~< zs fotos ou iistragdes < comegarn ne i mesma linhe-guis e ca parte superior de todas as piginas (veja tarnbérn a ae aieenatpe sean renee observagéo abai, “er tre ade praetieea aca i r 4A coluna sss Keo gay even liven aed Elite dolor spun oe Sang peoetheenea ee (lee ce mesmo retro ei de Tagat oo cael {Oirtmerpaarades | das cotinas, noes os mantendo a a ‘consisténcia “Yarn seve Duls autem? ea externas. xine ling? bok pach oem put oe more lng he cone pun A Observe © uso repetitive da forma triangular ne lista e na legenda da pagina anterior, aprasontada como exemple. E provével que este triangulo tarnoém seja utilizado em outros pontos da publicagéo.BEDESIGN PARA QUEM NAO E DESIGNER ———— Para ctiar uma boa papelaria (conjunto impresso de materiais de uma empresa ott pessoa, com logotipo ¢ endereco) comercial, contendo cartao de visitas, papel de carta e envelope, utilize um elemento de repeticao forte no somente em cada pega, mas entre todas elas. Voc’ deseja que o destinatario de sua carta saiba que vocé & a mesma pessoa que apresentou a ele, na semana anterior, um carido de visitas. Crie um layout que permita alinhar a carta impressa com algum elemento de design da papelaria impressa. s20.a50.7800 endear4 DESIGN REPETICAO Sea EnRIEnnREnemmemmmentneeememeemmeememmened A repeticdo ajuda a organizar as informages. Ela ajuda a guiar o leitor pelas paginas e a unificar partes distintas do design (da diagramacao) do material. Mesmo que o documento tenha apenas uma pagina, a repeticio dos elementos estabelece uma continuidade sofisticada, Se voce estiver criando varios documentos de uma tinica pégina que fagam parte de um pacote unificado, é extremamente importante usar a repeticao, eee — Repeticoes: | Mickey Mouse Fonte bold | a Estiidios Walt Disney Fonte light Anaheim, Califérnia ‘Sinais de tépico | 58 anos, sem filhos: quacrados, Endentagoes EMpregas: Espagamento | . ® Esttidios Walt Disney Alnramontos | ® DWers0s estldios de velededo Educagao = Estidios Walt Disney Atividades Preferidas "= Dirigir barcos a vapor = Montar cavalos Frase Preferida 1 Nem todos podem ser-um pato, A Aen dos elementos repetitivos bem-delimitados, que deixarn lem claro exatamente 0 que esté acontecendo neste caso, 0 Mickey também pode querer incorporar um ou meie desses elementos no design da sua carta de epresentagao.ESIGN PARA QUEM NAO £ DESIGNER Se houver um elemento que o agrade, trabalhe com ele! Talvez seja um clip art ou uma fonte mais desenhada. Sinta-se livre para acrescentar urn item completamente novo apenas para criar a repeti¢ao ou, ainda, escolha tum simples ¢ cores ou éngulos -mento ¢ utilize-o de varias maneiras: em diferentes tamanhos, As vezes os elementos repetidos nao s2o exatamente os mesmos objetos, mas s80 tao inter dos € relacionados que sua conexdo se torna dbvia Na ror Junte-se a Ide maio, As Shs da tarde Use seu chapéu AA escolha @ a repetiglio de um elemento de uma imagem 880 técricas engragadas ¢ eficazes. Este pequeno simbolo triangular poderia ser aplicado em outros materials pertencentes a0 rmesrno Conjunto, como envelopes, cartdes-resposta, oaldes etc., ¢ todas 2s pegas formariarn urna unidade coesa, mesrno que no repetissernos @ xicara intoira.4 pesiGN RepETIGAO Em geral podemos usar elementos repetitivos que nada tém a ver com o objetivo da pagina criada. Por exemplo, coloque alguns petréglifos ou alguns ‘passaros estranhos em um relatério, Escolha caracteres particularmente boni- tos da fonte que estiver utilizando e coloque-os em tamanhos maiores, em cinza ou em uma segunda cor mais luminosa. Apliquesgs em vérios angulos no seu material. £ dtimo divertir-se, Grande venda de inauguragado na PickWick Papers! papéis envelopes carimbos de borracha plirpurina adesivos diferentes ‘A Retirar um doa elementos de design doa limites de pagine unifica duas ou mais pocee, 0 primero e 0 segundo plano, ou freterile eoperadcs com urn tama ern Commu, Observe comme 0 “pbster” © esta gel pégina parecem ester conectados devido @ repetigéo dos caracteres primitivos. ws,DESIGN PARA QUEM NAO £& DESIGNER A repetigio de elementos visuais no design unifica e fortalece 0 material, agrupando partes que seriam separadas. O recurso da repeti¢ao € muito Litem pegs de uma s6 pagina e € essencial em documentos de muitas paginas (neste caso, a repeticao considerada como consistncia), 0 proposito basico 0 propésito basico da repeticao € unificar ¢ acrescentar interesse visual Nao subestime o interesse visual de uma pagina: se cla for interessante, sua leitura seré mais agradavel e provavelmente mais lida, Como atingir este objetivo Considere a repeticdo como consisténcia; tenho certeza de que vocé j tem essa qualidade. Entao, va mais além utilizando a consisténcia existente: vocé poderia transformar alguns desses elementos consistentes em parte integrante do design grafico consciente, como no exemplo do titulo? Vocé costuma usar um fio de I ponto na parte inferior das paginas ou sublinhar 0s titulos? O que vocé acha da idéia de utilizar um fio de 4 pontos no lugar do de 1 ponto, para que o elemento repetitivo fique mais marcante? Pense sobre a possibilidade de acrescentar elementos apenas para criar uma repetigéo. Vocé tem uma lista numerada de t6picos em seu mate- rial? O que voce acha de usar uma fonte diferente, ou um miimero invertido, © depois, repetir esse modelo em cada lista numerada que aparecer na mesma publicagao? Em primeiro lugar, vocé deve encontrar as repeticoes que jd existem € reforgé-las. Quando vocé se acostumar com essa idéia e com a estética, comece a criar repeticbes para aperfeicoar o design € a clareza das informacoes. Repetir & como dar énfase as suas roupas, Sc uma mulher usar‘ um maravilhoso vestido preto de noite com um chapéu preto chique, ea enfatizard sua roupa usando sapatos vermelhos, batom vermelho ¢ um buqué vermelho no vestido, O que evitar Evite repetir 0 elemento em demasia, para que cle no se torne enfadonho ou excessivo, Esteja consciente do valor do contraste (leia 0 préximo capitulo e a segdo referente ao contraste dos tipos) Por exemplo, se uma mulher usasse um vestido de noite preto com um chapéu vermelho, brincos vermelhos, batom vermelho, sapatos vermelhos eum casaco vermelho, a repetigo ndo criaria um contraste unificante € inceivel: seria espalhafatoso € 0 foco ficaria confuso.Contraste O-contraste é uma das maneiras mais eficazes de acrescentar algum atrativo visual a uma pégina (algo que realmente faca com que uma pessoa queira olhar para ela), criando uma hicrarquia organizacional entre diferentes clementos, A “regra’ importante que deve ser lembrada € a de que para o contraste ser realmente eficaz, ele deve ser forte. Nao seja timido. Cria-se 0 contraste quando dois elementos sio diferentes, Se eles diferirem lum pouco mas no muito, ndo aconteceré 0 contraste e sim um conflito. Este € o segredo: segundo © principio do contraste, se dois itens nao forem exatamente os mesmos, diferencie-os completamente. Podemos alcangar 0 contraste de varias maneiras. Uma letra grande pode ser contrastada com uma pequena; uma fonte em estilo antigo com uma fonte em bold sem serifa; um fio fino com um grosso: uma cor fria com uma mais quente; uma textura dspera com uma lisa; um elemento hori- zontal (por exemplo, uma longa linha de texto) com um elemento verti- cal (por exemplo, uma coluna estreita de texto; linhas muito espacacas com linhas bem préximas; uma figura pequena com uma figura grande. Basta ndo ser timido ¢ ousar. Nao se pode contrastar um fio de meio Ponto com um de 1 ponto. Nao se pode contrastar 0 marrom escuro com 0 preto, Faca direito.BL DESIGN PARA QUEM NAO £ DESIGNER See aaUUIIIInrnennrreneeereeeeEeEeReEennnmeee eee Se os dois “newsletters” apresentados a seguir aparecessem sobre sua ‘mesa, qual deles vocé leria primeiro? Ambos tém o mesmo layout bisico. Ambos sao estéticos e simpaticos. Ambos contém as mesmas informacées. Na verdade, existe apenas uma diferenga: 0 segundo tem mais contraste. OUTRO NEWSLETTER! Titulo Excitante resin Guy oe dapat eed ne Subtitule Arreplante soars. rom tes sen ger ao et Sey copes revere Um Subtftule Comum Taunedalaiganaiies ter chargers ea Outro Titulo ny trap in mae sth Excitante Depew tng er Na pnpecretnmdrdecune lent ete nae ‘A Esta opgéo esté boa, mas nada atrai seus clos para o material5 DESIGN CONSTRASTE — ‘A causa do contraste é bvia. Utilizei uma fonte mais pesada € com mais negrito nos titulos e subtitulos. Repeti essa fonte (seguindo o principio da repeticao; lembra-se dele?) no titulo do newsletter. Quando mudei o titulo de caixa-alta para alta e baixa, pude utilizar um tamanho maior € aumentar 0 negrito, o que também ajuda a reforgar o contraste. E como agora os titulos tém tanto peso, foi possivel acrescentar uma caixa preta na parte superior, atrés do titulo, repetindo novamer reforcando contraste a cor escura ¢ Outro Newsletter! Titulo Excitamte oo... ce. nyse is pom eerste ant a yore ‘Subtitulo Arrepiante Dhatgn wing tts Saoeeness Um Subtitle comum Outro Titulo Ue tte tae | Bxeitante momen A \oc8 concorda que seus olhos ee fixaram mais nesta pagina do que na anterior?DESIGN PARA QUEM NAO £ DESIGN O contraste 6 10 das informacbes; 0 leitor sempre deveria ser capaz de, & primeira passada de olhos sobre um ma~ um ponto critico na organiza terial, compreender imediatamente 0 que ele representa, Laura Mathews Habitidades| cern scraps pats ao nga es Formagao académica oe RB deere Experiéncia profissional TS0E Ener cfd na eh Home Ps, de Vas 1970 Enema do Hospel Memon ude de nla, ms Ros Coons Repancie pou ot de gumtespa cited hte do cin Cnt Di Apresentacio pessoal om en pol open ae = A Este 6 um curicul tipico. Todas as infor magées esto ali, ¢ se alquérn quiser realmente lé-las, poderd fazé-lo. Forém, na verdade, este material do se destaca ner chamna atengao. Ooserve os sequintes problema H6 dois alinhementos na pgine: o centralized € 0 a eaquerde, Os espagos entre os segmentos separados S80 parecictos demais. Os nome dos cursos cornplementares se fundern £20 da instituigo em que forem feitos. E R5 DESIGN coNsTRASTE Veja: além de a pagina ficar mais interessante com 0 uso do contraste, 0 propésito c a organizacdo do trabalho estio mais claros. 44.05 problemas foram facilmente corrigidos. Um elinhamento & esquerda (ne verdade, esté justificado}; dentro dele, mais um alinharnento 8 esquerda. Amibos 380 ‘muito marcantes ¢ reforgam um 60 outro (alinhamento e repeti¢ao). Os titulos esto fortes. Sabernos de imediato 0 que este ‘material contém e quais s30 seus pontos-chave (contraste). Os segmentos estdo separados com mais espago do que €s informag&es dentro de cada segmento (contraste de relagdes espaciais; proximidade), Os tittlos de graduacéo ¢ de tralbalhos esto em bold (uma repetigso de fonte do titulo); 0 forte contraste faz com que eles sejam notaclos.DESIGN PARA QUEM NAO £ DESIGN ‘A maneira mais fil de acrescentar contraste a um material para torné- Jo interessante é trabalhar com as fontes (este € 0 tema principal abordado na segunda metade deste livro). Mas nao se esqueca dos fos, do espagamento entre os elementos, das texturas etc Se vocé utilizar: um fio fino (chamado de hairline) entre as colunas, uti- lize um fio mais forte de 2 ou 4 pontos quando precisar usar outro fio; no coloque um fio de meio ponto ¢ um de 1 ponto na mesma pagina. Se vocé aplicar uma segunda cor para acentuar o trabalho, assegure-se de que as cores se contrastam: 0 marrom-escuro eo azul-escuro nao contrastam, eficientemente com o texto em preto. As Regras da Vida 4Neste caso, hd um ae timo contraste entre as fontes, mas 0 contraste entre os fios (linhas) esté confuso. 0 demais. Seré que 08 fios deveriam tor duas ierentes? Sua atitude € sua vida Maximize suas opcoes Nunea leve nada a Nao deixe que as sementes 0 impecam de apreciar a melancia Seja legal As Regras da Vida Agora que foi estabelecida ura Sua atitude € sua vida aiferenga maior entre 8 espessuras dos fics, ‘Maximize suas opcodes. Se Nunea leve nada a sério demais. alguém achar que hd eee ee um erro. O falco Nao deixe que as sementes © inteiro ficou mais impesam de apreciar a melancia, marcante e sofisticado; salbernos onde comega See ep = @ onde termina.5 DESIGN CONSTRASTE —$—$—_—_—_————————————_ Se voce utilizar colunas altas ¢ estreitas em seu newsletter, faga alguns titulos mais fortes para criar um direcionamento horizontal contrastante na pagina, Combine o contraste cam a repeticao, como na numeracao das paginas, nos titulos, nos sinais de tépico ou na distribuicao espacial, para criar uma identidade visual forte ¢ unificada na publicagao inteira, Usudrios Mac Santa ‘4.Além do contraste existente entre as fontes deste cartao postal, também ha um contraste entre © titulo horizontal (longo) @ as colunes vertices (estreitas). As colunas estreitas so um elemento repetitive @ um contreste.DESIGN PARA QUEM NAO £ DESIGN exemplo apresentado a seguir & um tipico antincio de lista telef@nica Um dos problemas é que basicamente tudo esté do mesmo tamanho, com (© mesmo peso ¢ com a mesma atribuigdo de importincia, Visualmente, © item *Membro da Associagdo de Intercdmbio de Construtores’ est com 0 mesmo peso de-“Especialistas em Reformas ¢ Consertos’. Esta correto? Estabeleca qual deve ser item principal. Use contraste para criar este enfoque. Destaque-o com alinhamentos marcantes e aplique a proximidade Sa CONSTRUGOES EFICIENTES REFORMAS E CONSERTOS RESIDENCIAL E COMERCIAL % ANLIAGDES # REFORMAS “+ BANIIEIROS # COZINHAS & COBERTURAS # ‘+ FEQUENOS SERVICOS * -* SOLUCAODERROBLENAS + 4 ROIETOSPERSONALIZADOS + + CONSTRUCODECONSLLTHRIOS MEDICS + ‘SERVIGO COMPLETO PARA CONSTRUGOES MEMBRO DA ASSOCIAGAO DE INTERCAMBIO DE CONSTRUGAO 717-567-8910 ORGAMENTO SEM ‘COMPROMISSO For onde voce comegaria @ melhorar este andncio? Coloque as letras em caiva-alta ¢ balxa (meidscuias @ mindscudas) & no todas em caixa-elta Estabslega conjuntes de informagdes egrupe os itens (proxirnidadte), leixando espagos entre os grupos pare indicar suas relagoes. Organize todos esses elementos, dispondo-os em um alinharnento mmarcante. Elimine elermentos confiitantes: © contorne do antncio néo um ponto de foco principal; entdo, por que deixé-lo tao forte? As eatreles chamam muita atengSo: cirija a atengao para © real objetive do anancio. Nao ha nada errado com cantos vazios; uma Gnica aguia ja 6 suficiente! ER5 DESIGN CONSTRASTE Nao tenha medo de diminuir alguns itens para criar um contraste com o elementos maiores e deixar espacos em branco, Quando vocé atrair a atengio do leitor para o ponto principal, se ele estiver realmente interessado ler o texto em letras menores. Mas se ele nao estiver interessado, nao importa 0 tamanho que vocé colocar; ele nao lera. Observe que todos 0s outros principios sao aplicados: proximidade, alinhamento e repetigao.Elestrabalham juntos para criar o efeito total. E raro ajustar apenas um dos principios no design (na diagramagio) de um material. Construcoes Eficientes a Reformas e Consertos Residencial e Comercial Servico completo para Construgdes Projetos personalizados Reformas Coberturas Ampliagées Banheiros Pesquenos servos Cozinhas Solugio de problemas CConstrugo de consulteios médicos ‘orcamento sem compromisso 717-567-8910 Uma pessoe pode achar que este andncio néo reflete @ personalidad do dono do negécio, como acontece no eniincio anterior Mas se este andncio tem come finelidade atrair as pessoas que deselan gostar dinheiro, qual deles transite a0 interessado uma sensagéo mais profissional e segura? Observe também como e onde a repeticéo 6 apliceda. J6 que este é um ancncio de liste talefénica, existe logica na repeticao da fonte em bold e corpo grande no nimero de telefone.DESIGN PARA QUEM NAO £ DESIGNER © contraste de uma pagina faz com que seus olhos se virem para ela. Se voce colacar dois elementos diferentes em uma pagina (como duas fontes ou duas espessuras de fio), eles nao devem ser similares. Para que © contraste cumpra totalmente suas funcdes, os dois elementos devem ser muito diferentes. Utilizar 0 principio do contraste é como fazer o retoque em uma parede: do se pode combinar mais ou menos a cor; ou vocé encontra a cor exata ou precisara pintar a parece inteira O proposito basico 0 propésito basico do contraste & duplo, ¢ seus dois objetivos sio unificados. Um deles é criar interesse sobre uma pagina; se ela tiver uma aparéncia interessante, atrairé mais a leitura. O outro é auxiliar na organizacdo das informagdes. 0 leitor deveria ser capaz de compreender instantaneamente @ maneira através da qual as informagdes sdo estruturadas, 0 fluxo ldgico de um item para outro. Os elementos contrastantes nunca deveriam confundir © leitor ou criar um foco que nao seja 0 correto, Como atingir este objetivo s de tipologia (leia a préxima secao), nas Aplique contraste em suas opgd espessuras das linhas, nas cores, nas formas, nos tamanhos, os espacos etc. E facil descobrir maneiras de contrastar os itens ¢, provavelmente, esta é a maneira mais divertida € satisfatéria de criar interesse visual. O importante ¢ criar elementos marcantes. O que evitar Nao seja timido. Se vocé criar contrastes, faga~os de maneira forte. Evite contrastar uma linha um pouco espessa com uma linha um pouco mais espessa. Evite contrastar um texto em marrom com titulos em preto. Evite usar duas ou mais fontes similares. Se os itens no forem cxatamente iguais, diferencie-os!Revisao Existe mais um principio geral de Design (e da Vida também) Nao seja timido. Nao tenha medo de criar seu proprio Design (ou sua prépria Vida) com "muitos espagos em branco: é um descanso para os olhos e para a alma Nao tenha medo de ser assimétrico, de descentralizar seu formato — as vezes isso faz. com que o efeito seja mais marcante. E muito bom criar 0 inesperado, Nao tenha medo de fazer com que as palawras fiquem muito grandes ‘ou muito pequenas; nao tenha medo de falat mais alto ou de sussurrar. ‘Ambos podem ser eficazes, se utilizados no lugar certo, Nao tenha medo de fazer suas imagens bem fortes ou minimas, se 0 resultado complementar ou reforcar seu design ou sua atitude As proximas paginas resumem os quatro principios abordados na primeira metade deste livro. Vamos dar uma olhada nesta capa de relat6rio téo comum ¢ aplicar cada um dos principios. Tudo 0 Que Vai Volta Ligdes para viajar de carona pelo pais Robin Williams 1" de Janeiro de 2001 4.Ume capa de relatério comum (@ som criatividedte): centralizada, com espagos iguais pare preencher a pégina. Se voce néo soubesse ler em portugués, pensaria que 880 seis tépicos, separados na péigine. Cada linha parece ser um elemento individualEI DESIGN PARA QUEM NAO £ DESIGNER Se os itens estiverem relacionados entre si, agrupe-os em proximidade Separe-os, se eles ndo estiverem diretamente ligados. Varie o espaco entre os itens para indicar a proximidade ou a importncia desta ligacdo. < Tudo 0 due oneal Vai Volta criarnes ume unicode fbemn-definida, Licdes para viajar de no lugar de carona pelo pai sels unidades segmentades. Ficou nitido que 08 dois topioos esto ligados entre si Dietanciando © nome do autor @ data, fica claro que apesar de estas informacdes seram relacionadas 6 possivoimente Robin Williams spe epee nao fazem parte do titulo. 1° de Janeiro de 20016 DESIGN : REVISAO Alinhamento Fique atento quanto a cada elemento que vocé colocar na pagina, Para que a pagina inteira fique unificada, alinhe cada objeto com uma parte lateral de outro. Se os alinhamentos forem “fortes” (bem-delimitados), voce poderé optar por quebrar ocasionalmente um alinhamento, ¢ esta modificacdo nao parecer um erro. > Meso que © nome do autor esteia cistante do titulo, existe uma conexdo visual entre os dois, elementos, criada através do aiinharnento. © exerplo anterior tamioéen esté elinhado: 0 alinhamento 6 @ contralizagéo. Mas como yoo’ pode ver, um alinhemento & esquerda ou 8 direite (como mostra este exernplo) ceria urna lateral mais marcente, mais fécil de seguir com os olhos. © alinhamento & esquerda ou @ direita taro tende @ criar uma estética mais sofisticada do que @ centralizagso. Tudo o Que Vai Volta Liges para viajar de carona pelo pais Robin Williams 1" de Janeirode 20011 MP DESIGN PARA QUEM NAO £ DESIGNER Repeticao A repetigio € uma forma mais marcante de criar consisténcia em um material. Observe os elementos que voce jd repete (sinais de tépico, fontes, linhas, cores etc); avalie se ¢ apropriado fazer com que um desses elementos fique mais marcante e utilize-o como o elemento repetitivo, < A fonte diferenciada do Tudo o Que . tule se repeta ne rome do iV ‘autor, fortalecendo Nai Volta , coe ae Ligdes para viajar de mesmo que estejam carona pelo pais fisicarnente distantes na diagramagéio da pagina. Os pequenes tridngulos foram especialmente ecrescentades para criar uma repeticao. Apesar de cada um deles ‘epontar para uma diregao aiferente, a forma trianguier é suficienternente especifice para ser reconhecida ern todas 68 suas incidlencias ne pégina. A *cor* dos triéngulos também 6 um elemento que se repete. A repetigto aude @ unificar elementos separados do design (ala aiagramagao). ‘Robin Williams6 DESIGN Revisao Contraste Voce concorda com 0 fato de que o exemplo desta pdgina atrai seus olhos muito mais do que o da pagina anterior? Neste caso, o responsével 0 contraste do preto contra 0 branco. Ha varias maneiras de criar contrastes: fios (linhas), fontes, cores, relagdes espaciais, direcies etc. A segunda metade deste livra aborda especificamente o tépico do contraste através do trabalho com fontes. > trabalho com o contraste neste material foi apenas 0 de ‘acrescentar a caixa preta. Ralcei um pouco: @ letra colocando © subbtitulo em italico, contrastando-o com « letra normal (sern italizago, chamada de roman) do titulo e do nore do autor: (0 titulo esté na forte Bodoni Poster Compressed 0 substitulo. | ‘esté na Bodoni Italic.) Vecé conseguiria doserever onde esto ‘sendo utifzados, neste exernplo, 08 principios de proximidade, alinhamento e repetigao? ere na viajar er Poe nos Robin WiliamsDESIGN PARA QueM NAO £ DESIGNER Desafio n° 1: principios de design Descubra pelo menos sete diferencas entre os dois modelos de curriculos apresenta- dos a seguir, Circule cada uma das diferencas e determine o principio de de- sign que essasdiferengas contrariam. Expresse em palavras quais So as mudancas. ‘Curriculum: Dorothy. Fazenda Rural n? The Plains, Kansas Bducacio ~ Escola de Gramatica = Escola Secundétia formada com hhonza a0 mérito ~ Escola Hard Knacks Experiéncia Profssional 1956 Na Fazenda 1954 Pea Fazenda 1955 Ao redor da Fazenda Referencias = Glinda, a Boa Bruxa = 0 Grande e Paderaso Mégico de Oz Curricula * Dorothy Fazenda Rural n° 73 ‘The Plains, Kansas Educagao ‘Escola de Gramaitca «Escola Secundira, formada com hhonra ao mérito + Escola Hard Knocks Experiéncia Profissionat 21956 Na Fazenda * 1954 Pela Fazenda #1955 Ao redor da Fazenda Referéncias * Glinda, a Boa Bruxa + O Grande e Poderoso Magico de Oz6 DESIGN EVISAO Desafio n° 2: rediagrame este antincio Quais sio 0s problemas deste ancincio de uma lista telef6nica? Faca uma lista dos problemas e das solucdes. Dicas: Quantas fontes diferentes foram usadas no antincio? Quantos alinhamentos diferentes foram utilizados? O que poderia ser utilizado como uma linha marcante para fazer alinhamento do bloco inteito? POR QUE QUASE TODO O TEXTO ESTA EM CAIXA-ALTA (LETRAS MAIUSCULAS)? Os elementos logicamente_prdximos esto em proximidade? Existe um ponto central de foco? Por que ele nao existe ¢ como poderiamos criar um? O que poderia ser nto repetitive? Ha realmente a necessidade de colocar um usado como elem contomo tio pesado eo titulo em um box? Pegue um pedaco de papel vegetal para cdpia e trace 0 contorno do antincio. Depois, trace os elementos separadamente dentro deste contorno, reorganizando- 0s de maneira a criar uma pagina mais profissional, limpa ¢ direta, Trabalhe & sua maneira, usando cada um dos prinefpios abordados: proximidade, alinhamento, repeticio ¢ contraste Ancient City Cerdmicas e Interiores PRECOS DE ATACADO PARA O PUBLICO CERAMICA ¢ LINOLEO *TALAVERA + GRANDE OPGAO *SALTLLO DE CERAMICAS + MONTERREY NO SHOW-ROOM, + CERAMICA DALLAS sf + ASIECA assume 66 ea o MIDSTATE ‘atom an, ow abo + MARMORE DE QUALIDADE 1776 CUPERTINO ROAD. (PROMO A ESCOLA EA EASY PRINT 982-7219 PROXIMO A SANT'ANA, STACIONAMENTONO LOCALHDESIGN PARA QUEM NAO £ DESIGNER Este resumo conclui nossa abordagem sobre design (diagramagao).£ provavel que voce ainda queira ver mais exemplos, Eles se encontram espalhados por ai, ao seu redor. Espero ter transmitido a voce, sem grandes sofrimentos, ‘uma consciéncia visual aperfeicoada, Pensei em fornecer opgdes de gabaritos de design, mas como ja se diz por af, € melhor ensinar a pescar do que oferecer 0 peixe Lembre-se de que os designers profissionais esto sempre “roubando” outras idéias; eles esto em constante busca de inspiracdo. Se voce estiver fazendo um folheto, encontre um de que realmente goste utilize o layout. Utilizando apenas seu préprio texto e suas figuras, 0 folheto que o inspirou fica completamente diferente do que vocé criar. Descubra um cartao de visitas que o agrade e adapte-o ao seu. Neste proceso de adaptacao, ele ficard diferente e seré completamente seu. Todos agimos assim, Se vocé ainda nao fez isso, aconselho-o enfaticamente a ler The Mac is nota typewriter € The PC is not a typewriter. Se vocé ainda estiver naquela fase de datilografar (ou digitar) dois espagos apés os pontos finais; se vocé tiver 0 hébito de sublinhar os textos; se néo utilizar as verdadeiras apdstrofes ¢ aspas (*” € ndo "), entdo € sério: vocé realmente precisa ler tum desses livros. Entretanto, vd devagar. Nao leve tao a sério essa coisa de design. Garanto que se voce simplesmente seguir esses quatro principios, criaré materiais dinamicos, interessantes ¢ organizados. Vocé se orgulhard deles, ¢ se divertirs também!6 DESIGN REVISAO Coisas que vocé pode fazer para aumentar sua sensibilidade visual Em uma de minhas primeiras aulas de design criamos a defini Pessoa visualmente analfabeta, Fsse rétulo costumava ser atribuido a0 cliente. Se hd pouco tempo vocé era um PVA, agora que voce jé leu este livro até aqui, nunca mais sera um deles, Seguer algumas dicas para vocé aumentar ainda mais sua sensibilidade visual. Vela. Crie um arquivo de idéias. Uma pasta ou até mesmo uma caixa onde voc’ possa guardar designs que o impressionaram: aniincios, folhetos, imagens, letras, diagramagoes interessantes de fontes, embalagens, propagandas cm geral, ou seja, qualquer coisa que mexa com algo dentro de vocé. Os designers costumam ter um arquivo como este ¢ o utilizam como fonte de dias e inspiracdo. Antes de comecar outro projeto, dé uma olhada no seu arquivo de idéias Diga. Ao observar um design do qual vocé goste, passe alguns minutos descrevendo os motives de sua aprovacao, Conscientemente, indique os pontos nos quais foram aplicados os principios de proximidade, alinhamento, repeticdo e contraste. Anote em um papel ou grave mentalmente a técnica mais interessante ¢ ousada que tenha sido aplicada, como algum tipo muito grande ou pequeno, um tratamento especial sobre uma imagem, espacamento ete Faca um esbogo. Quando voce se deparar com um material diagramado de maneira pobre, faga um esboco com algum aperfeigoamento, ou recorte os elementos © reorganize-os. Quando vocé realmente coloca o lépis sobre o papel, mais idéias surgem, 0 que ndo acontece com tanta énfase se vocé simplesmente pensa a respeito. Nunca consegui imaginar como meus livros ficariam, até comegar a produzi-los e ver tudo cres papel (ou no monitor). ndo no1 BP DESIGN PARA QUEM NAO £ DESIGNER BA tipologia é um dos meios ais elogiientes de expressdo do estilo de cada época. Como na arquitetura, cle oferece o perfil mais caracterfstico de um periodo ‘uma nagto. Peter BebrensParte Dois : CRIaAcAo aATRAVES DA Tiro.oGia El esha A segunda metade deste livro aborda especificamente uso da tipologia (os tipos, as letras), j que cla éa esséneia do design, certo? sta segdo trata particularmente do problema de se combinar mais de uma fonte em ‘um material. Apesar de eu focalizar principalmente a fungi est da tipologia, nnunea se esquega de que seu objetive é a comunieagao.0 tipo utilizado em um trabalho nao deveBI DESIGN PARA QUEM NAO E DESIGNER Os Deuses se recusam a responder. Eles se recusam porque no sber. HE DigginTipo ©@ Vida) O tipo € 0 material basico de qualquer pagina impressa Ele costuma ser inresistivelmente apelativo e, as vezes, absolutamente imperativo para a diagramacao de uma pagina que contenha mais de uma fonte, Mas como saber quais fontes combinam entre si? Na Vida, quando ha mais de um em qualquer coisa, estabelece-se uma relagao dindmica. No Tipo, costuma haver mais de um elemento por pagina. Mesmo um documento com um simples texto corrido tem titulos, subtitulos ou, no minimo, suas pginas numeradas, Nesta situago dindmica dda pdgina (ou da vidal, é estabelecida uma relagdo que pode ser concordante, conflitante ou contrastante. Uma relagio coneordante ocorre quando usamos somente ‘uma familia de fontes, sem muitas variagoes de estilo, tamanho, peso etc, E facil manter a harmonia da pagina e esta disposicao tende a conferir ao material uma estética calma ou formal (e, as vezes, chata) Uma relacdo eonfiitante ocorre quando combinamos fontes similares em estilo, tamanho, peso etc. As similaridades so incémodas porque as atragées visuais no sao as mesmas (concordantes), mas também nao sao diferentes (contrastantes), portanto, criam um conflito, Uma relacdo contrastante ocorre quando combinamos fontes separadas ¢ elementos nitidamente diferentes entre si Os de signs visualmente interessantes que costuram atrair sua atengao ‘ém, em geral, bastante contraste ¢ os contrastes so enfatizados, ‘A maioria das pessoas tende a se perder quando o assunto ¢ combinar mais de uma fonte em ura tinica pagina. E preciso sentir se uma fonte deve ficar maior ou se um elemento deve ficar mais evidenciado, Mas, quando vocé consegue reconhecer € dar nome aos contrastes, tem controle sobre eles. Assim, poderé chegar a base do problema e descobrir solugoes mais interessantes. Este € 0 principal tema desta secio.DESIGN PARA QUEM NAO £ DESIGN ‘Um design estaré em concordancia quando vocé optar pela utilizacio de apenas uma fonte € 0s outros elementos que compéem a pagina possuirem as mesmas qualidades daquela fonte. Talvez voce utilize a versdo em. itélico da mesma fonte; talvez voce coloque um tamanho maior nos titulos; talvez vocé use uma imagem ou vérios ornamentos, mas a impressdo basica ainda seré concordante A maioria dos designs concordantes tende a ser mais calma ¢ formal. Isso nao significa que a concordancia seja indesejével. Basta estar consciente plicando elementos que estejam todos em da impressdo que vocé criaré concordancia entre si a A vida nada mais é do que uma sombra em movimento, um pobre ator que caminha empertigado e se queixa sobre o palco, e que, depois, néo se ouve mais; é uma lenda narrada por um idiota, cheia de sons ¢ de firias, mas sem significado. a Este exernplo concordante foi ciagramado na fonte Nofret. A primeira letra é maior e algumas das palavras estdo ern italico (@ Nofret Italic), rmes a pega inteira ‘tem ume eparéncia suave. R7 T1P0 cOoNcORDANCIA | Minha musica preferida 6 1 I Quando eu crescer, quero se: A fonte pesada combina com 0 contorno mais forte. Mesrno a linha para preencher esté um pouce forte. > A fonte, @ borda fina e os ‘ornamentos delicacos Cferecern a mesm@ 1). 2 até cardialmente limpress8o quanto 60 estilo. Doct. ent candintiment convidado w participar de Ppoye & Miria Palite 1 de absil 15:00 Reras Berkeley SquareBDESIGN PARA QUEM NAO £ DESIGNE Conflito Um design tem conflito quando se adotam duas ou mais fontes similares nna mesma pagina, mas que nao sdo efetivamente diferentes ou iguais. Vi varios estudantes tentando achar uma fonte igual & outra na pagina, procurando por uma fonte com ‘aparéncia similar’. Esté errado. Quando se colocam duas fontes parecidas (mas no iguais) juntas, a maior parte das pessoas que olha para o material acha que foi um erro. A concordaneia é um conceito sélido e til; 0 ¢onflito deve ser evitado. A. vida nada mais € do que uma sombra em movimento, um pobre ator que caminha empertigado € se queixa sobre 0 palco, € que, depois, nao se ouve mais; é uma lenda narrada por um idiota, cheia de sons e de fiirias, mas sem significado. a © que acontece neste exernplo quando voo8 Ié @ frase “cheia de sons e de farias"? \oeé salze por que ela est em outra fonte? Voo8 fica ern divide se & ow néo um erro? sso faz com que voce pisque? A letra inicil, ern tamanho meior, aparenta ‘estar exatamente ern seu lugar? R7 TIPO conrrito Sabia? Meu nome é Minha misica preferida 6 _ ‘Quando eu erescer, quero ser. ‘AObserve especiticamente e letra “a” no titulo @ nas outras linhas. Ela 6 similar, mas néo 6 igual. © contorno no tern 0 mesmo peso visual que 0 tipo € 28 linhas, @ eles ndo esto contrastando muito. Ha muito conflto neste pequeno material. >» © pequeno conte | tem duas fontes ome manuscrites Voct est cordialmente diferentes, mas corn varias simleridedes | convidada w participar de entre si porém, no so iguais ¢ | nossa cerimania de casamento- também néo 880 diferentes. Os een cxnementos tam o | mesmo tipo de | Kepeye 5 Ciuia Sulito conflito. © material parece umn pouco conc desorganizado. 1 de abril 15:00 Raras- Berkeley Square &DESIGN PARA QUEM NAO £ DESIGNER we no exista devida a um simples contraste. Nada Nato hai qualidade neste ruundo cxiste por si mesmo, —Hlerman Melville Agora vem a parte divertida, Criar concordancia é algo muito fécil criar conflito € fécil, porém indesejavel.Criar contrastes € muito divertido O contraste marcante atrai os olhos, como vocé péde aprender na seco anterior sobre design. Uma das manciras mais ficazes, simples ¢ satisfatdrias de se conferir contraste a um desenho é através da tipologia A vida nada mais € do que uma sombra em movimento, um pobre ator que caminha empertigado @ se queixa sobre 0 palco, e que, depois, nao se ouve mais; é uma lenda narrada por um idiota, cheia de sons e de fivias, significando nada a Neste exemplo 6 dtavio que a frase “chela de sons e de fries” deveria ester ern cutra fonte. © material ficou visualmente meis interessante ¢ com mais forga, devide ao contraste dos tipos.7 TIPO CONTRASTE Meu nome Minha musica favorita é (Quando eu crescer, quero ser A Agora 0 contraste entre es fontes esté nitido (elas 880 realmente da mesma farnila de fontes}: @ fonte em negrito contrasta com @ fonte muito leve light). As espessuras das linhas do contorno e de preenchimento também esto ritidarmente iferenciedes. > Este comite fol 2. feito com dues Used eoté coulialmente fontes corngletamente cenvidado « participar de diferentes; aloe ciferern do varia | nessa ceximénia de easamento emaneiras, Ate ores Popeye & Olivia Palito peed ir extro porto de Poneto renuscrita € criando um | 1° de abaill toque repetitive. ; 15:00 Roxas Berkeley SquareHODESIGN PARA QUEM NAO £ DESIGNER © contraste nao funciona apenas na estética do material. Ele esté intrinsecamente relacionado & organizacdo ¢ clareza das informagdes colocadas na pagina. Nunca se esqueca de que seu objetivo & comunicar. ‘A combinagao-de fontes diferentes deveria aperfeigoar a comunicacdo ¢ nao confundi-la Ha seis maneiras claras e diferentes de contrastar a tipologia: tamanho, peso, estrutura, forma, diregio ¢ cor. As péiginas a seguir contém informagoes sobre cada um desses contrastes, respectivamente. Apesar de eu ter feito os contrastes um a um, € dificil que apenas um contraste seja eficaz. Em geral, 0 efeito costuma ser reforgado combinando- se ¢ enfatizando-se as diferengas. Se vocé tiver dificuldades para visualizar o que esté errado com uma combinacio de fontes, ndo procure pelas dlfrengas entre clas: procure pelas suas similaridades; serdo elas as responsaveis pelo problema. A principal regra a ser seguida no contraste de tipos é a seguinte: ndo soja timido! Mas. Antes de aprender as varias maneiras de contraste, voce precisa estar familiarizado com as categorias de tipos. Passe alguns minutos em cada pégina do préximo capitulo observando as similaridades que unificam uuma categoria de tipos. Depois, tente encontrar dois exemplos daquele estilo de tipologia antes de passar para a préxima categoria. Olhe nas revistas, nos livros, em embalagens, enfim, em qualquer material impresso. Acredite:gastar alguns minutos com esta tarefafaré com que vocé compreenda tudo de maneira mais répida e profunda!Categorias de tipos Hoje em dia, ha milhares de tipos disponiveis, e varias pessoas criam Estilo Antigo Moderno Serifa Grossa Sem Serifa 98, Vnuserite DECGRATIVGDESIGN PARA QUEM NAO £ DESIGNER Estilo Antigo Os tipos criados no estilo antigo baseiam-se na escrita & mao dos escribas, que trabalhavam com uma pena na mao. Os estilos antigos sempre tém serifas (leia a definigéo abaixo) e as serifas das letras em caixa-baixa (mimisculas) sempre tém um éngulo (0 da caneta). Por isso, todos os tragos curvos das letras passam de grossos para fins, o que chamamos tecnicamente de ‘transicao grasso-fino". Esse contraste no trago moderado, 0 que significa que ele passa de fino a mais grosso. Se voce dativamente desenhar uma linha nas partes mais finas dos tragos curvos, essa linha sera diagonal. Isso se chama énfase. Um tipo em estilo antigo tem uma énfase diagonal, | Serifa As sorifas de letras em caixa-baiva Enfase 380 inclinadias liagonal Estilo Antigo = Trensigéo grosso- fino moderada nos tragos Goudy Palatino Times Baskerville Garamond Na sua opinido, esse tipos parecem iguais? Nao se preocupe: eles parecem iguais para qualquer pessoa que nao tenha estudado tipografia. Sua “invisibilidade” ¢ exatamente o que faz com que os tipos em estilo antigo formem o methor grupo de tipos para grandes extensdes de texto corrido E raro haver caracteristicas diferenciadas que aparecam na leitura; essas caracteristicas nao chamam atengao. ‘Se vocé estiver trabalhando com tum texto muito longo ¢ deseja realmente que as pessoas o leiam, coloque- © no estilo antigo.8 TIPO CATEGORIAS DE TIPOS Com o progresso da historia, a estrutura do tipo mudou. O tipo tem suas proprias tendéncias e também sucumbe ao estilo de vida ¢ as mudancas culturais, assim como os penteadas, a moda, a arquitetuta ou a linguagem, Em 1700, 0 aperfeicoamento do papel, as técnicas mais sofisticadas de impressio © um aumento genérico dos dispositivos mecanicos foram fatores que fizeram com que o tipo também se tornasse mais mi Novos tipos jé ndo seguiam mais o estilo da escrita com a pena. Os tipos modernos tém serifas, mas agora elas s30 horizontais ¢ nao inclinadas, ¢ so muito finas. Como uma ponte de aco, a estrutura é forte, com uma transi¢do grosso-fino radical ~ ou contraste — nos tracos. Nao hd evidencias da inclinagdo da pena; a énfase € perleitamente vertical. Os tipos modernos F P if tém uma estética fria e elegante Enfase ‘As serifas de letras em caixa- vertical baixa S80 horizontals ¢ fines Moderno..... “Trensigéio grosso-fino radical nos tragos Bodoni Times Bold Fenice Ultra) Walbaum Os tipos modernos tém uma aparéncia forte, principalmente quando sio muito grandes, Por suas fortes transicGes gross0-fino, a maioria dos tipos modernos ndo sio uma boa op¢do no caso de grandes extensdes de texto corrido. As linhas finas quase desaparecem, as grossas sao salientes demais ¢ 0 efeito sobre a pagina ¢ classficado como “ofuscanteDESIGN PARA QUEM NAO DESIGNER Um novo conceito surgiu junto com a revolugdo industrial: 0 da propa~ ganda, Primeiramente, os profissionais selecionavam os tipos modernos € faziam com que 0s pontos grossos ficassem ainda mais espessos. Vocé jd deve ter visto pésteres com tipos assim: & distancia, tudo © que se pode ver Zo linhas verticais. A solugdo Sbvia para este problema foi fazer com que a letra inteira ficasse mais grossa.|As letras com serifa grossa tém pouca ou nenhuma transigao As vezes, essa categoria de tipos ¢ chamada de Clarendon, porque a fonte Clarendon (mostrada a guir) éa sintese desse estilo. Esses tipos também sdo chamados de Egipcios, porque tornaram-se conhecidos durante a egiptomaniaca da civilizacdo ocidental dos Estados Unidos; muitos pos pertencentes a essa categoria foram classificados com nomes egipcios para que pudessem ser facilmente vendidos (Memphis, Cairo, Scarab). Serifado Clarendon Pouce ou nenhuma trensigao grosso-fino (ou contraste) nos tragos Clarendon Memphis Memphis Extra Bold New Century Schoolbook »ssa, com contraste grosso-fino suave (como a Clarendon ou a New Century Schoolbook), tém um grau muito elevado de legibilidade, o que significa que podem ser facilmente utilizados em textos extensos; Entretanto, esses tipos criam uma pagina mais escura do que aqueles em estilo antigo, pois seus tragos sao mais grossos € 0 peso de cada letra € relativamente igual, Tipos com serifa costumam ser utilizados em livros infantis, por sua estética clara e direta,8 TIPO CATEGORIAS DE TIPOS Em francés (¢ em inglés também), este estilo de tipo ¢ chamado sans s. > que significa sem serifa. Portanto, as fontes sem serifa ndio possuem setifas nos finais de seus tracos. A idéia de remover as scrifas foi um progresso mais tardio na evolugao da tipologia € nao obteve muito sucesso Os tipos sem serifa sdio quase sempre de peso igual, o que significa virtualmente — ndo ha uma transicio grosso-fino visivel nos tracos Veja também a proxima pagina para conhecer informagoes importantes sobre 0s tipos sem se Nao hé serifa Nao hé énfase, por no em parte haver diferenciagdes alguna gFOSSO-fino my em serifa Nao ha nenhurna Franklin Gothic transig&o grosso-tino nos tragos Antique Olive Formata Gill Sans Franklin Gothic Folio Syntax Se as tinicas fontes sem serifa que voce possui em sua biblioteca d fontes forem a Helvética e a Avant Garde, a melhor coisa a fazer para aperfeicoar a diagramagao de suas paginas seria investir em uma familia ante de tipos ma fonte forte, pesada, bem ma Cada uma das familias acima tem uma am riedade de pesos, que 0 do light (bem suave) ao extra black (negrito bem forte). Depois desse investimento vocé ficard surpreso com 0 aumento das opgdes para a ctiagdo de paginas interessantes, que irdo atrair a atencdo dos leiDESIG PARA M NAO E DESIGNE A maioria das ontes sem serifa tem peso igual, como mostramos anteriormente Entretanto, algumas poucas (apenas duas ou trés na grande colegio de fontes sem serifa) tem ma transigdo grosso-fino suave, A seguir, um exemplo de uma-fonte sem serifa com énfase; seu nome ¢ Optima, Fontes como esta sto muito dificeis de se combinar com outros estilos na diagramagao de uma pagina. Elas sdo similares as fontes serifadas em seus tragos grossos- fa justamente na inexistencia de serifas. E preciso ser muito cuidadoso ao trabalhar com uma fonte sem serifa como esta, A Optima € uma fonte excepcionalmente bonita, mas 6 preciso ser muito cuidadoso a combinagao desta com outras fontes. Observe os tragos grossos-finos. Ela tem @ elegancia cléssica de ura fonte em estilo antigo, mas setn as seritas. Sem serifa...8 TIPO CATEGORIAS DE TIPOS Manuscrito A categoria de tipos manuscritos inclui todos os tipos que parecem ter sido escritos @ mao, com uma caneta tinteiro, com um pincel ou, as vvezes, com um lipis ou caneta profissional. Esta categoria poderia facilmente ser segmentada, formando manuscritos que se conectam, manuscritos que nao se conectam, manuscritos que paracem impressos por processo manual, manuscritos que imitam estilos caligraficos tradicionais etc. Mas m um tinico pote para atingirmos nossos propésitos, colocaremos todos, Reporter Two Shelley, Nelante Linoseript Caseade Zapf Chancery 3 tipos manuscritos so como uma torta de queijo: deveriam ser “comidos (utilizados) pouco a pouco. £ claro: os mais elaborados nunca deveriam ser colocados na forma de longos blocos de texto © nunca com todas as letras em caixa-alta(maitisculas). Mas esses tipos podem assumir caractersticas particularmente surpreendentes quando utilizados em tamanhos muito grandes, Nao tenha medo!DESIGN PARA QUEM NAO £ DESIGNE Decorativo Os tipos decorativos sa Sceis de identificar: se a simples idéia de ler um liveo inteiro em um detrminado tipo o fizer enlouquecer, € provavel que voce possa inclui-lo no nosso “pote’ de tipos decorativos. Eles so étimos, engracados, diferentes, faceis de usar, costumam ser baratos e sempre existe uma fonte para cada capricho que vocé queira expressar. £ légico: por serem to diferenciados, seu uso deve ser limitado, Addled = EXTRAVAGANZA F4ugit4s Improv, Inline JUNIPER SCARLEEL Quando vocé utilizar uma fonte decorative, vé além da impressao inicial para voce, tente utilizé-la em uma situacdo mais formal e observe o que acontece. Se voce achar que a Por exemplo, se a Improv parece in Juniper lembra filmes dle bang-bang, experimente usé-la em um projeto cde empresa ou em uma floricultura e veja 0 que acontece. Dependendo de como voce utilizé-las, as fontes decorativas podem trazer de maneira manipula es sejam muito diferentes da primeira impres espal emogoes dbvias ou voce p um assunto para outro livro,8 TIPO CATEGORIAS DE TIPOS Seja consciente Para fazer uso dos tipos de maneira eficiente, voce estar consciente Com isso quero dizer que vocé deve manter seus alos abertos, deve observar os detalhes, deve tentar transformar o problema em palavras. Quando voeé vir algo que chame muito sua atencao, verbalize 0 motivo deste interesse Passe alguns minutos olh, ido uma revista, Tente categorizar as fontes que aparecerem, Muitas delas ndo se encaixardo completamente em nenhuma das alternativas, mas ndo faz mal: escolha a categoria que parecer ser a mais aproximada, O que interessa € vocé observar atentamente a forma das letras, 0 que ¢ imprescindivel para que vocé seja capaz. de combiné- las de maneira eficaz Desafio n° 3: categorias de tipos Trace linhas que liguem a categoria ao tipo: Estilo antigo NO ROpEIO Moderns Alta Sociedade om Eulavvas Serifa grossa sem seria Como posso me lembrar, Adam! Manuscrito O enigma continua Decorativo E sua atitudeDesafio n° 4: transi¢oes grosso-fino Higgle Piggle Wiggle Jiggle Diggle GigglegoTt Desafio n° 5: serifas Higgle Piggle Jiggle Wiggle Diggle GiggleDESIGN PARA QUEM NAO E£ DES Eu ndo conseguiria enfatizar suficientemente como ¢ importante conscientizar- se sobre essas amplas categorias de tipos. No decorrer do préximo capitulo ficard claro o motivo dessa importancia Existe um exercicio muito simples para reinar suas habilidades visuas:colecionar modelos das categorias. Recorte-os de qualquer material impresso que puder encontrar. Voce consegue identificar padres pertencentes a uma grande categoria? Va em frente erie subgrupos, como fontes em estilo antigo com alturas do x iguais ¢ descendentes verticais (veja 0 exemplo a seguir), ou manuscritos que se parece mais com impressos & mao do que com escrita cursiva & mao, 6u fontes espandidas e condensadas (veja abaixo). Essa a vocé o poder de criar combinasdes de tipos interessantes, provocativas ¢ eficazes, conscientizagio visual sobre os formatos das letras dar Ascendentes so as partes das letras que ‘880 mais altas do que a altura do x. B aah. d A altura do x 6 attra da parte principal er. ar xq des letras em caixa-baixa (mindscules). 30 point Descendentes s8o as partes das letras que ficarn absaivo da inha de base (a linhe invisivel, sobre @ qual o tipo fica). A Observe @ altura do x da palavra Bernhard comparada & Eurostile. Y Observe a altura do x em relagao aos ascendentes. A palavra Bernhard tern ura altura do x pequena e ascendentes altos. A maioria das fontes sem serifa tern altura do x grande. Comece @ bservar esses detahes. Eurostile Bold 12 pon Eurostile Bold Extended Eurostile Bold Condensed As fontes expandides parecer esticadas em suas laterals; jé as condensacies parece prensadas. Amioas so apropriadas para determinadas circunstancies.Contrastes de tipos cee Peso Estrutura RMA Direcao CORDESIGN PARA QUEM NAO DESIGNER 4A qual amanho==:: esta fonte? Um contraste de tamanhos torna-se dbvio: tipo grande versus tipo pequeno. Mas pa um contraste de tamanhos funcione de maneira eficaz, nao s se pode contrastar um tipo de 12 pontos com um de 14 pontos; na maioria das vezes cles simplesmente ficario em conflito. Nao se pode contrastar um tipo de 62 pontos com um de 72 pontos. Se vocé quiser contrastar dois elementos tipograficos através de 0.0 contraste deve ser bvio: ni Jeixe que as pessoas acreditem que a diferenca € apenas um erro A Escolha 0 iter tipogratico que voce deseja destacar: Enfatize-o através de contrastes. ‘on au, wsletter ‘Se vocé precisar inserir outros elementos tipogréficos eles néo foremn realmente téo importantes para o pilbico leitor em geral, deixe-os om tarnanhos pequenos. Quem se importa com o niimero do volume? Se alguém quiser saber; este namero ainda poderé ser lide. NBO & preciso colocer essas infor magdes em 12 pontos!9 TIPO CONSTRASTE DE TAMANHO Um contraste de tamanho nem sempre significa que voce deva fazer com que o tipo fique grande; significa apenas que deve haver um contrast. Por exemplo, quando vocé vé uma pe grande de convida a fazé-lo € 0 contraste do tipo muito pequeno colocado em uma juena linha isolada em uma pagina onal. fica com vontade de lé- certo? Grande parte do que o pagina grande Se vocé visse une pagina assim erm um Jornal, leria © que est escrito em letras pequenas? © que o faria ler? © contraste. Rainfish 4 As vezes © contraste do grande com 0 pequeno pode ‘ser opressivo, abbalando © tipo pequeno. Utilize este recurso como vantage. Quern realmente quer ler palavra “incorporated”? Apesar do pequena, com Certeza ela no ¢ invisivel, portanto, se alguérn quiser le-la, ela estard atDESIGN PARA QUEM NAO £ DESIGNER Recomendo fepetitivamente que no se utilizem letras em caixa-alta (maitisculas). Provavelmente, as letras em caixa-alta s6 devem ser utilizadas para que 0 tipo fique maior, certo? Ironicamente, quando 0 tipo € colocado ‘em caixa-alta, ele fica duas vezes maior do que em ca ta. ge as, Se 0 texto for colocado em caixa-bi baixa (mintisculas), mente diminui-se o tamanho entdo, quando se usa o tipo em caixa das letr: ealmente a vocé pode estabelecer tamanhos maiores, além de ser um estilo mais I Este titulo esté em 18 TOAD HALL PUBLISHING | foes torent au posto To and Rat tier oapago arn cobarata Editores West Bank + Londres 4Colocando Toad Hall Publishing | 2.0227 teeiva pude aumenté-lo para 24 pontos, ¢ Toad and Rat finda hé Editores espago pare West Bank + Londres deixar @ letra erm bool (negrto).9 TIPO CONSTRASTE DE TAMANHO & rr Utilize o contraste de tamanhos de maneiras inesperadas e provocativas. Muitos de nossos simbolos tipograficos, como ntimeros, o ‘e’ comercial 0 as aspas s80 muito bonitos quando colocados em tamanhos muito grandes, Utilize-os como elementos decorativos em um titulo ou mengao, ou como elementos repetitivos na publicacao inteira 4. Um contraste diferente de O wom tamanho pode eo tartar 7 lernanio ratios arn al, 0 que a la ser muito dtil se ae lnnitagbes quanto 68 figuras disponiveis pera Ineeroo ern um projeto. 480 voee usar um item com Dicas de Viagem um tarnanho ro usual, avalie I Leve duas vezes mais dinheiro do se poder que vocé acha que vai precisar. reaproveitar esta esteética 2 Leve a metade da roupa que voc? em outros acha que vai precisar. pontos do. mesmo 3 Nem se preocupe em levar todos os material para enderegos das pessoas para quem ceriar uma vooé pensou em eserever. repetigio interessante e atiDESIGN PARA QUEM NAO £ DESIGNE 4A qual categoria de tipos pertence esta fonte? © peso de uma fonte refere-se a espessura dos tragos. A maioria das familias de tipos € desenhada com varios pesos: regular, bold (negrito), 4s vezes semibold, extra bold ou light, Na combinagao de pesos, lembre- se daquela regra: nao tenha melo, Nao contraste 0 peso regular com o semibold: coloque o bold mais forte. Se vocé combinar tipos de familias diferentes, uma fonte sera sempre mais bold do que a outra, portanto, enfatize-a Nenhuma das fontes padrao que vicram em seu computador tem um estilo muito bold em sua familia, Eu o aconselharia a investir em pelo menos uma fonte mais forte, Dé uma olhada nos catélogos de tipos para encontrar uma que 0 agrade. O coniraste de pesos é uma das melhores maneiras de aumentar a estética visual de uma pagina sem redesenhar algo, mas vocé nunca poders alcancar 0 contraste belo ¢ forte se nao tiver uma fonte com tragos grandes ¢ fortes. Formata Light Estes so exernplos dos Formata Regular —_vérios posos que costumam Formata Medium 2st erm urna ferniia Formata Bold Ob5e"ve que no ha rmuito contraste de peso entre o peso light e © préximo (que costurma ser classificado ce Memphis Medium "ger, medium ou book! Memphis Bold “Também néo hé um 4 contraste marcante entre Memphis Extra Bold 65 pesos semioold bold. Se voc’ quiser criar Se contrastes através do peso Seen iar den fortes, no tenho ee medo. Se © contraste Garamond Bold So for marcante, pareceré Garamond Ultra um erro. Memphis Light R9 TIPO CONSTRASTE DE PESO ‘OUTRO NEWSLETTER ‘& Voce se lermbra desses exernplos na primeira parte do lvro? A esquerda utzei as fontes que vierarm no computador: 08 ttulos esto om Helvetica Bold 2 0 texto corrido esté em Times Reguar: A dieita, o texto corrido ainda esté erm Times Regular, mas use! ume fonte mais forte (com peso maior) nos titulos (Aachen Bold). Com esta simples mudanga — um peso mais marcante para obter contraste — @ pagina se tornou muito mais convidetiva & lettre, (O titulo também esté mals pesado e 236 invertido, dentro de uma caixa preta, 0 que dé ainda mais contraste.) Toad Hall Publishing Toad and Rat Editores West Bank * Londres ‘A\oc8 se lernisra desse exernplo na pagina anterior? Colocando o nome da empresa em caixa alta € bbaixa no luger de caixa-elta, pude aumentar o tamanho do tipo e ampliar 0 peso, acrescentando mais contraste @ interesse visual a0 carta. © peso mais marcante também faz com que © cartao tenhe um foco mais forteDESIGN PARA QUEM NAO £ DESIGNER ‘Alem de fazer. com que a pagina fique mais interessante aos olhos, 0 contraste de peso é uma das melhores maneiras de organizar as informa¢oes. Vocé ja faz isso automaticamente quando coloca os titulos ¢ subtitulos de seu newsletter em bold, Entao, continue assim e va mais adiante. Dé uma olhada no sumério a seguir: observe como vocé compreende instantaneamente a hierarquia de informagBes quando os titulos-chave owas frases sao colocadas em bold bem forte. Esta técnica também € titil no indice remissivo, pois possibilita que o leitor diferencie em um piscar de olhos se uma entrada de indice € de primeiro (item) ou de segundo nivel (sub-item), eliminando assim a duivida que costuma surgir quando procuramos alfabeticamente por um item. Observe o indice remissivo deste livro (ou de qualquer um dos meus) Sumario | Sumario rao et ’ yt . nore 2 Cane Aly cow Ay z Merrie ss || Mle acs Sinker Sucker Socks Pants... 37 | ‘Sinker Sucker Socks Pants .... 37 Ore ti Scheu mnnte |. egies ta a || : Vue Hains a | | sooth ° tat Tig Tone 7 ye = ag ing nae z Bmene Dewy. > | | mekte S ‘A Colocendo os titulos dos captidos em fontes mais bold (negritol, as informagdes importantes fica disponivels em um piscar de olhos, além de haver uma forte atragso que move mous olhos. Outra vantagem 6 que este recurso cria ume repetigao (um dos quatro principios de design, lernbora?). Tambérn inseri um espago aaima de cada titulo em bold, de maneira que os titulos poderiarn ser agrupados com sous respectivos subtitulos com maior nitidez (este é 0 principio de proximidede, lernbora??)9 TIPO CONSTRASTE DE PESO Se vo iver uma pégina muito cinza (s6 de texto corrido), sem espago para a insercdo de figuras ou para criar destaques com aspas, experimente colocar as frases mais importantes em um bold (negrito) forte, Elas atrairao o leitor para a leitura da pagina, (Se voce utilizar um bold sem serifa com o texto corrido serifado, provavelmente precisaré deixar a fonte em bold sem serifa em um ponto menor, para que ela pareca estar do mesmo tamanho da do texto corrido) A. Uma pigina 36 com texto corrido desencoraja um leitor 4 prossequir na leitura. Com © contraste criado pelo tipo ‘em bold (negritol, 0 leitor pode localizar os pontos-chave @ estaré mais interessado erm buscar as informagdes.D GN PARA QUEM NAO DESIGNE Estrutura Acestrutura de una fonte refere-se a maneira através da qual ela €construtd Suponha que vocé precisasse montar uma fonte com o material de sua garagem, Algumas fontes so criadas com pesos iguais, com praticamente nenhuma mudanga de peso nos tragos, como se fossem tubulares (como a maioria das fontes sem serifa). Outras sao feitas com grande énfase nas transigoes grosso-fino, como as modernas. Ainda hé as intermediérias Se vocé combinar tipos de duas familias diferentes, utilize duas familias com struturas diferentes Lembra-se de tudo 0 que falamos antes, nesta mesma segao, sobre as diferentes categorias de tipos? Bem, agora estes conceitos sao titeis, Cada ‘uma das categorias baseia-se em estruturas similares, Portanto, a solugao ideal ser escolher duas ou mais fontes de duas ou mais categorias. Ode Ode Ode = «eet aa Ode (ie Ode 22°: pecigets aan Ode Ode Ode aan Ode Ode Ode “=~ a categoria por inna? Se nao oC ee a qual uma letra 6 construida e, come podermos: fazé-lo, releia ver através deste exernplo, a estrutura de cada a segdo categoria ¢ bastenta cctiva rderente 60 > Regra importante: nunca coloque duas Sane fontes da mesma categoria na mesma este conceito pigha. No ha come deerger suse mit similaridades. Além disso, existe tantas importante. opgdes! For que dificultar as coisas? R A qual categoria de tipos pertence esta fonte?9 TIPO CONSTRASTE DE ESTRUTURA (a ee Vocé leu The Macis not a typewriter (O Mac nao é uma maquina de escrever) ‘ou The PCis nota typensiter (O PC ndo é uma maquina de escrever)? Se néo Jeu, deveria fazé-lo. Nesses livros, digo que voce jamais deveria colocar duas fontes sem serifa na mesma pagina, nem fazé-lo com duas fontes serifadas.,. até adquirir prética na drea tipogréfica. Depois de adquirir alguma pratica voce estaré qualificado e autorizado a colocar duas fontes com ou sem serifa juntas na mesma pagina Entretanto, a lei prega que voce deve utilizar duas fontes de duas categorias diferentes de tipos, ou seja, poderd usar duas fontes serifadas se uma delas for de estilo antigo © a outra uma serifada ou moderna. Mesmo pos E ‘muitas similaridades ¢ criardo um conflto. Evite colocar duas fontes modernas ou duas serifadas, pelo mesmo motivo. Evite utilizar duas fontes manuscritas a mesma pagina, reciso ser cuidadoso ¢ enfatizar os contrastes, sendo perfeitamente cl proceder assim dle maneira eficaz colocar duas fontes em estilo antigo na mesma pagina; clas tém > a Neste frase na cngs N&O deixe fontes aiferentes. hot we que as sementes boa estética quendo epicacce AER REPO GEARED em conjunto, por de comer a melancia um motivo: cada ume dees tem — com frrayer. ume estrutura ¢ diferente; cada uma delas pertence a urna categoria diferente de tipos.DESIGN PARA QUEM NAO £ DESIGNER ee Em primeiro lugar, fontes diferentes sao tao indistinguiiveis quanto tigres no zooldgico. Portanto, se vocé ainda nao consegue diferenciar uma fonte de outra, um jeito facil de escolher estruturas contrastantes é optar por uma fonte serifada e por uma sem serifa. Em geral, as fontes sem serifa tém um contraste grosso-fino em suas estruturas; as sem serifa costumam ter o peso totalmente igual. A combinagdo da fonte serifada com a sem serifa pode gerar uma infinita variedade de possibilidades, mas como voce veré no exemplo a seguir, 0 simples contraste da estrutura nao é€ bastante marcante: é preciso enfatizara diferenca combinando este contraste com outros, como o de tamanho ou o de peso. Gesoigun SEM SErifa — opsse Sc Dedique alguns minutos pera MELHOR. wninnom colocar em palavras por que wma estas trés fontes combiner seen quando colocedas juntas. no Se vocé escolher uma fonte moderna em caixa-alta (maideculas) no titulo, qual seria @ opedo mais logic para © texto corrido? ‘Se voo® tivesse optaco por ume fonte moderna no subtitulo, quel seria @ opcéo Kigica para 0 titulo?DESIGN PARA QUEM NAO DESIGNER 4A qual or ee = agoes Obvias. A A cor € mais um termo — como direcdo — com interpre nica coisa que eu gostaria de mencionar sobre 0 uso das verdadeira: cores € que vocé deve se lembrar de que as cores quentes (vermelhos, laranjas) vem na frente ¢ comandam nossa atencao. Nossos olhos si muito atraicos pelas cores quentes, de mancira que o vermelho cria facilmente um contraste, Por outro lado, as cores frias (azuis, verdes) desaparecem gradualmente diante dos nossos olhos. Grandes éreas de cores suaves 80 6timas; na verdade, elas sdo neessdrias para criarmos um contraste eficaz Est liv & prea e branco ~, assim, tremos de simular as cores na pigina. Mas a “verdaeira cor no é0 assinto desta sto) 4Pinte “Scarlett” de vermelho FLORENCE = Srcniti store” “Scarlett” soja consideravelmente menor, ele 6 dominante devido & aplicagdo da cor quente. ge. Cearleld 4Pinte “Florence” de vermetho. Agora 0 nome maior na cor quente se sobrepde ao nome menor Em goral, este 6 um efsito que deve ser evitado. Pinte “Scarlett” de azul FLORENCE Sr raucanees cesaparece. ge Cearlett 4Pinte "Florence" de azul claro. Geralmente, para que © contraste com ima cor fria ralmento crie 0 oeito desejado, 6 preciso usé-la erm maior quertidace. Seer Florence 6.0 nome de mith fePo CONSTRASTE DE COR em preto e branco Je uma pagina como um tipo ‘colorido’. £ facil criar um contraste com Curiosamente os tip afos sempre se referiram ao varias cores; apenas os olhos mais sofisticados veém ¢ aproveitam os contrastes de cor em preto ¢ branco. Assim como a vor enfatiza palavras 4 Nesta citagao, podemos visualizer facilmente as “cores* aiferentes no texto em mportantes, 0 tipo também pode fazé-to: ele grita ou sussurra através da variagéo de tamanho. rat trance: Assim como 0 tom da voz confere interesse “age @ griade através palavras, o tipo também pode fazé-lo de variagdes como o ele se modula através de 22:0 des letras, 2 estrutura, a forma, © tons mais luminoses ou mais espago existente no eens interior das letras, 0 Assim como a voz colore as palavras ‘espace entre as linhas, através da inflexdo, 0 tipo também pade © tarnanho do tipo ou © tamanho da altura do fe 7 x. Mesmo utilizando um ele define a elegancia, a nico estilo para 0 diginidade e a obstinagéo mesmo tipo 6 possivel pela escolha do estilo. ‘orler “cores” diferentesMDEsiGN PARA QUEM NAO £ DESIGNER eS Uma fonte suave, arejada, com bastante espaco entre as letras (conhecido como entreletra) ¢ entre as linhas (conhecido como entrelinha) cria uma “cor ¢ uma textura bastante suaves. Uma fonte em bold (negrito) e sem serifa, pouco arejada, cria uma cor escura, com uma textura diferente Este é um contraste particularmente titil na montagem de paginas com muita massa de texto e sem figuras Uma pagina cinza, formada apenas por texto, pode ter uma aparéncia desinteressante que, além de nao incentivar a leitura, ctia confusdo| No exemplo a seguir as duas histérias esto ou ndo relacionadas? Lorem Ipsum Dolor a Esta 6 ume pagina comum de um newsletter ou de outro tipo de material. A monotonia do cinza néo atrai os ohos.9 TIPO CONSTRASTE DE COR ns Se voce acrescentar “cor* aos titulos e subtitulos, com um peso mais marcante, ou se colocar uma citagdo, uma passagem ou uma pequena historia utilizando uma “cor” nitidamente diferente, 0s leitores ficarao mais predispostos a olhar para a pagina € lé-la efetivamente, E este & exatamente 0 n0ss0 objetivo, certo? ‘Além de fazer com que a pagina fique mais interessante para a leitura, esta mudanga de cor também ajuda a organizar as informagdes! No exemplo a seguir fica claro que existem duas historias independentes na mesma pagina. Lorem Ipsum Dolor ‘A Este & 0 mesmo layout, mas com insergéio de “cores’. Olhe novarnente os exernplos a pagina 103: 0 contraste de peso na pégine cria uma variagdo de cores.BH DESIGN PARA QUEM NAO E DESIGNER A seguir, note como podemos mudar a cor através da fonte ou do tamanho fazendo ajustes minimos Center Alley wore jester pore ade 4Nofret Light, 8 pontos, Ie it wetter stop-rhardr an toc i Fetters: Daze worming war furry eee wicket an shells porsons spatially dole stop-murder, oe dint lack Genter Aley an infec, word orphan trator pore gull mae lichen amon dinner hormone bang Center Alley worse jester pore ladle 4Nofret Light, 8 pontos, gull hoe lift wetter stop-murder an ‘entrelinha 12, entroletra toe heft-cisterns. Daze worming adicional. Observe que 0 texto war furry wicket an shellfish tem uma cor mais suave do parsons, spatially dole stop-murder, que @ do exernplo anterior hhoe dint lack Center Alley an Cover Alley worse ester por ladle gull we Noret Light Italic, 8 pontos, Lt water stop-marde ano hfs entrelinha 12, entreletra adicional Daze worming war furry wick an Esto exernplo 6 exatamente igual shal parsons, spatial dls 20 anterior exceto palo uso do murder, hoe dnt ack Cente Alea itdlico. Jé se vé una cor @ uma nf, word orphan mato por gl textura diferentes. Center Alley worse ester pore ladle Nofret Regular, 8 pontos, gull oe i weer stop murder an entrelinha 26. Este exernplo 6 war furry wicket an shellfish exatamente igual 20 primeira, parsons, spatially dole stop-murder exceto por sua verséo regular € hoe dint lack Cente Alley an, no een light. infect, word orphan traitor pore Center Alley worse jester Nofret Bold, 8 pontos, entrelinhe eee een beenae 26. Este exernplo 6 exatamnente ee iqual a0 primero, exceto por sua war furry wicket an shel versio em bold e no em light. fish parsons, spatially dole stop-murder, hoe dint lack.9 TIPO CONSTRASTE DE COR Estes so apenas alguns exemplos basicos da diferenciagio de cores, sem as manipulagdes adicionais que podem ser feitas para mudar a cor natu- ral de um tipo. A maioria dos bons catalogos de tipos apresenta uma ampla variedade de fontes em blocos de texto, para que voce possa visualizar a cor ea textura na pagina. O catdlogo ideal de um representante deve apresentar cada fonte (bold, its texto, para que voce possa fazer comparacdes de cores. o, regular, light etc) em um bloco de Center Alley worse Jester pore Cente Alley wore jester pore ale gall ladle gull hoe lift wetter stop- hoe lift weiter topmuner an oe bel ‘murder an too heft cisterns. interna Daze worming we furry wicket Daze worming war furry wicket an shelich parsons, spatially dole top ot lack Center Ally a orphan teitor pore gull mar ‘an shellfish parsons, spatially dole stop-murder, hoe dint lack Center Alley an, infect, word lichen smmonal dinner hormone bang. A American Typewriter, 8/10 ‘Bernhard, 8/10 Center Alley worse jester pore Conter Alley worse jester pore ladle gull hoe lit wetter stop- Tadle gull hoe lift wetter stop- ‘murder an toe heft-cisterns. ‘murder an tos hett-cisterns. Daze Daze worming war fury wicket worming war furry wicket an an shellfish parsons, spatially shellfish parsons, spatially dole dole stop-murder, hoe dint lack stop-murder, hoe dint lack Center Center Alley an, infect, word Alley on, infect, word orphan ‘orphan traitor pore gull mar traitor pore gull mar lichen lichen ammonol dinner hormone ‘ammonol dinner hormone bang, Almago, 8/10 A Memphis Medium, 8/10 Center Aley worse jester pre ladle gull, Center Alley worse jester oe lit wetter stop-marder an oe het ore ladle guil hoe lift cistens, Daze worming wa Farry wetter stop-murder an toe ‘wicket an shellfish parsons spatially hefe-cistemns. Daze worm- dole stop-murder hoe dint lack Center ing war furry wicket an Alley an, fet. word orphan trator shelifish parsons, spatially pore gull mar chen ammonol dinner dole stop- murder, hee dint A Photina, 8/10 A Evrostile Extended, 6/10DESIGN PARA QUEM NAO E DESIGNER Combine os contrastes Nao enka med. Os bons layouts fazem uso de mais de uma das ferramentas de contraste, Por exemplo, se vocé estiver combinando duas fontes serifadas, cada uma delas com uma estrutura diferente, enfatize suas difer contrastando também sua forma. Se um elemento estiver em letras do tipo roman, caixa-alta {maitisculas), coloque 0 outro em italico, caixa~ baixa (mintisculas), Contraste os tamanhos ¢ o peso também; contraste, talvez, até a direcdo, Dé uma olhada novamente nos exemplos desta seco. Cada um deles contém mais de um principio de contraste. Para conhecer uma ampla varie ade de exemplos e idéias, procure em qualquer revista de boa qualidade. Observe que cada um dos layouts interessantes depende dos contrastes aplicados aos tipos. Os subtitulos ou capitulares iniciais enfatizam o contraste de tamanho e o de peso; em geral, costuma haver um contraste de estrututa (serifa versus sem serifa) € também de forma (caixa-alta versus caixa-baixa) Tente verbalizar 0 que voce visualiza. Se vo? pudertransmitir em palavras dindmica da relagdo, ja dominardé. Quando voce olha para uma combinacao de tipos que o faz piscar, porque voce possui uma nogio instintiva de que as fontes ¢ 0s estilos nao combinam, ponha sua conclusdo em palavras. Antes de tentar encontrar uma solugdo melhor, é preciso descobrir o problema, Qual é a eficacia do contraste de peso, de tamanho, de estrutura? P © problema, tente classificar as similaridades ¢ nao as diferencas., 0. que existe entre as duas fontes que faz com que elas criem uma estética de ara descobrir ‘disputa” na pagina? Ambas esto em caixa-alta? Ambas possuem um forte contraste grosso-fino em seus tracos? Serd que os conilitos de foco (por exemplo, 0 tipo maior esté com um peso mais suave © 0 menor esté com um peso mais bold) estdo fazendo com que 0s tipos “briguem’ entre si, por que cada um deles quer ser mais importante do que 0 outro? Dé nome ao problema para depois criar a solucao.9 TIPO CONSTRASTE RESU REsuMo A seguir apresento uma lista dos contrastes que expliquei. £ aconsclhavel ter esta lista & mao para quando vocé precisar fazer uma pesquisa répida Jamanho <4 Néo seja timid. Pp eet reece @ nBo com os medianos. Estrutur. A. + Ot # const es licen: 5 pes # luamente clstricutdo ou ela paeca de (roee0 @ tio. 4 Caixa-alta X caixa-baixa é um contraste de forma. Tarbém RMA @ fonte em roman X itélico ou manuscrito. Estilos manuscritos 4 itélicos tém formas similares: ndo os combine, ‘A Fense mais em termos do tipo horizontal X colunes de texto altas e estreitas e ndo em terrnos de inclinagéo dos tipos. a @.Cores quentes vém em primeira. COR ‘comUEM NAO £ DESIGNER DESIGN PARA Desafio n° 6: contraste ou conflito Observe com atencio cada um dos exemplos a seguir. Responda se as combinag6es entre os tipos sc eontrastam cfetivamente ou se hé um conflito. Explique por que a combinacao das fontes funcionow (procure pelas diferencas) ou por que nae funcionou (procure pielas similaridades) Desconsidere as palavras propriamente ditas; no € preciso avaliar se a fonte é apropriada para o produto que ela representa jé que este € outro assunto, Basta observar as fontes. Se este livro for seu, faga um circulo ac redor das respostas corretas contrastes. = PERFUME contutes CHETROSO contrastes worl le saabnc conflitos Gos rosA. MINHA MAE contrastes ste 6 um texto sobre as razées pelas quais ‘onan minha mae sempre seré a melhor mae do mund. adolescente. é que eu me torne um contrastes FAZENDA ENGRAGADA contitos §=Seguro-Sautde contrastes INCAResta noite conflitosTIPO CONSTRASTE DESAFIO Desafio n° 7: certo ou errado ee Em vez de trabalharmos apenas com eerto ou errado, deixarei que voce decida 0 que deveria ¢ 0 que ndo deveria ser feito. Circule as respostas corretas 41 Certo Errado: Utilize duas fontes manuscritas na mesma pagina. 2 Certo Errado- Utilize duas fontes modernas, sem serifa, em estilo antigo ou serifadas na mesma pagina 3 Certo Errado- Enfatize de dois elementos tipogrdficos de uma mesma pagina colocando um em negrito ¢ outro em corpo maior. 4 Certo Errado. Utilize uma fonte manuscrita ¢ uma em itélico nna mesma pégina. 5 Certo Erracio Se uma fonte for alta ¢ fina, escolha outra menor € mais espessa 6 ‘Certo Erracio Se uma fonte tiver fortes transigdes grosso- fino, escolha uma sem serifa ou serifada 7 Certo Errado: Se voce utilizar uma fonte bastante diferente ¢ decorativa, encontre outra que chame atencao para complementé-la 8 Certo, Errado. Use os tipos para criar uma diagramacao extremamente interessante, mas ilegivel 9 -Certo Errado Lembre-se dos quatro principios basicos de design quando trabalhar com os tipos em qualquer material 10 «Certo Errado Quebre as regras, wma vez que voe? for capaz de dlassifia-tas.DESIGN PARA QUEM NAO £ DESIGNER Um exercicio sobre a combinacao de contrastes Aqui vai um exercicio divertido e faci de fazer que o ajudara a aperfeigoar suas habilidades tipograficas. Vocé s6 vai precisar de papel vegetal, uma caneta ou um lipis (os pequenos marcadores coloridos so étimos para esta atividade) ¢ uma ou duas revistas Copie da revista (utilizando © papel vegetal) qualquer palavra que voce tenha achado interessante. Agora encontre outra que crie um contraste efetivo com a que vocé copiou primeiro, Neste exercicio, as palavras sio completamente irrelevantes; vocé s6 estaré trabalhando com a forma das letras. A seguir, um exemplo da combinacdo de trés fontes que copiei de uma revista 4A primeira palevra que eu copie fol “hawk”. Depois, nem precisel procurar elas fontes sem serife. A palavra “Rebete” tern ume forme completamente diferente de “hawk” € eu precisava de algo menor e mais lave, com uma estrutura aiferente, para compor a terceira forte markt Comer, Copie a primeira palavra e, depois, decida de mancira consciente ¢ verbal sobre o que vocé necessitard para combinar com esta palavra, Por exemplo, se a primeira palavra ou frase for escrita em alguma fonte sem serifa, voce jé sabe que qualquer escolha a seguir nao poders ser sem serifa, certo? Do que voce precisa? Organize suas opgdes de maneira consciente Faca testes com algumas combinagées de palavras; depois, tente outros projetos, como a capa de um relatério, um conto em uma pagina com um titulo interessante, o titulo principal de um newsletter, a capa de uma revista, um anincio ou qualquer coisa que vocé queira, Utilize algumas canetas coloridas. Lembre-se de que as palavras nao precisam ter sentido, A vantagem de fazer esse exercicios com revistas € que nelas ha inimeras fontes que voce nao deve ter em seu computador, Seré que isso faré com que voce corra para comprar mais fontes? Sim,Entao, vocé entendeu?HpESIGN PARA QUEM NAO E DESIGNER Por onde comecar para criar ou recriar 0 design de algum material? Comece pelo ponto principal. Decida o que voce deseja que 0s leitores visualizem primeito. Crie seu ponto focal (0 principal através de contrastes fortes, a nao ser que voce tenha optaco por um design muito concordant Agrupe suas informagdes em conjuntos logicos ¢ estabeleca as relagdes entre esses conjuntos. Apresente essas relagdes através da aproximagao ou do distanciamento (proximIdade) entre os conjuntos. Quando voce diagramar o texto e as figuras na pagina, erle e mantenha alinhamentos fortes. Se vocé visualizar uma lateral marcante, como uma foto ou uma linha vertical, reforce-a com alinhamentos de outros textos ou objetos. Crie uma repeti¢ao ou enconire itens que possam ter uma conexio repetitiva. Utilize uma fonte em bold (negrito), um fio (uma linha), um dingbat ou uma disposicao espacial. Observe o que jd se repete naturalmente © decida se seria apropriado reforgar esse elemento, e de criar €ontrastes marcantes, que atrairao o interesse do o se voce optar pela criagao de um design concordante. Lembre- se: contraste € contraste Se tudo em uma pagina for grande, bold e chamativo, Certifique leitor, excet ndo haveré contraste! Qualquer que seja 0 contraste (maior e em negrito, (ou menor € mais leve), o importante €. diferenca existente entre os elementos da pagina, para que seus olhos sejam atraidos para a leitura.10 UM EXERCICIO Bl? Abra um jornal ou as Péginas Amarelas, Encontre um antincio que voce sabe que esta mal-diagramado (principalmente agora, que voce ja € uma pessoa visualmente consciente!). Tenho certeza de que nio seré dificil ‘encontrar um antincio assim Pegue um pedaco de papel vegetal e copie 0 contorno do antincio (nao vale aumenté-lo). Depois, desloque papel e copie as outras partes do aniincio, mas colocando-as onde vocé achar realmente adequado e certi- ficando-se de que 0 ponto focal scja realmente o de interesse principal Passe 0 que estiver em letras maitisculas (caixa-alta) para miniisculas (aixa-baixa), coloque alguns itens em bold (negrito), diminua alguns, aumente outros, livre-se de todas as tranqueiras que possam poluir a estética do material Dica: quanto mais caprichado for 0 seu trabalho, melhor seré o resultado. Se voce fizer apenas rabiscos, seu material alterado nao ficaré melhor do que o anterior. (Vou revelar ur truque que sempre usei em minkas aulas de design grafico: sempre que voc® tiver um cliente que insista em trabalhar com seu préprio estilo poluido de diagramacao € que nao queira pensar com seriedade a respeito de um trabalho ais sofisticado, finalize o design deste cliente piorando e bagungando um pouco mais 0 que ele jf fez. Jogue café sobre o material, amasse as pontas do papel, deixe a caneta borrar, nfo alinhe os elementos etc. No caso das ops mais interessantes, execute-as de maneiralimpa, sobre um étimo pape rmonte-as em um papel como o color-plus,cubra~ as com papel vegetal ete. Na maior parte das vezes 6 cliente refletiré ¢ conlcuiré que seu trabalho realmente esté melhor do que o conecito original criado por ele, ejé que ele é um PVA" — que voce no é mais! ~, ndo poderd dizer por que o trabalho dele ja nao parace tao bor. Sua impressdo sera a de que seu esté melhor. Endo conte para ninguém que eu estou Ihe dando este conselho! “PVA: pessoa visualmente analfabetaBest N PARA QUEM NAO E DESIGNER Voce se lembra deste pequeno pOster no antincio da pagina 25? Ele nao esta to ruim assim, mas é preciso fazer algumas modificacoes. Poucas ¢ simples mudangas fardo toda a diferenga. O maior problema é a falta de um alinhamento marcante, além de haver muitos elementos diferentes competindo pelo ponto focal. Utilize um papel vegetal para reorganizar os elementos ou faga um esbogo de algumas verses nesta pagina mesmo. Duro na Queda Le Voce quer participar de um verdadeiro desafio? Em ver de somente pensar a respeito, tente efetivamente redesenhar o aniincio do desafio da pagina 69. Nao olhe ainda, mas existe uma boa solugao na pagina 155. teSolucées dos desafios Como professora universitatia, todos os desafios, testes ¢ projetos que cu faco so abertos para discussdo ou consulta. Os estudantes sempre pod utilizar suas anotagdes ¢ livros, podem conversar entre si comigo. Minha experiéncia como aluna de centenas de cursos universitérios na faculdade de ciéncias e depois na de design mostrou que eu estaria mais predisposta a absorver as informagdes corretas se eu as anotasse. No lugar de tentar adivinhar e escrever uma resposta errada, 0 proceso de descoberta da resposta correta em um teste era muito mais produtivo. Portanto, aconselho vocé a rever quantas vezes for necessario os desafios e as respostas, a discuti-los com os amigos ¢, principalmente, a fazer as mesmas questdes a outras paginas que voce encontrar pelo caminho, A chave para tornar- se visualmente mais instruido € ficar de “olhos abertos"”TD DESIGN PARA QUEM NAO £ DESIGNER Solucées: Desafio n° 1 jpigina os) Remova o contorno para deixar mais spago, Os iniciantes tendem a colocar bordas 0 redor de qualquer coisa, Pare! Deixe 0 material mais arejado; nao coloque amarras tio fortes! Proximidade: Os titulos estdo muito distantes de seus itens correspondentes: aproxime-os H retornos de carro duplos acima ¢ abaixo dos ttulos: elimine tds as rdornos de carro duplos, mas acescente alum espagoadicional aedanse dos titulo para que eles fiquem mais coneciados ao elemento a ser, com o qual se relaionam. ‘Separe as ingormagies pessoas dos iens do Curiuloutiizand um pequeno espaso adiconal, ‘Alinnamento: texto esta centralizado e alinhado & esquerda, ¢ as segundas linhas do texto ppassam completamente para a lateral esquerda: erie um alinhamento forte @ esquerda; odds 0 titulo odos os sinais de tépico, todo o texto, enfim, tudo se alinha; as segundas linkas do texto so alinhadas com as primeitas. Repeticao: Jd existe a repetigao do hifer; rorce essa repetigio criando um sinal de tpico mais inkeessant lilizando-o antes de cada item apropriado. J6 existe a repetigao nos titulos: refrce essa reptgdo deaando os ttlos mas fortes ¢ecuros. A impresso forte do pret existent nos sinus de kpico se repateereforca 0 preo forte dos titulo: contraste: Nao ha contrast: aflze a on for, ol, ana contstar ot, inuindo ‘pico marcantes A propésito: todos os niimeros da nova versio estdo com um ponto a mens Solucdées: Desafio n° 2 (ricina «») Fontes diferentes: hi quatro fontes sem serifa (Helvética, Avant Garde, Optima e Formata Bold), Ha duas fontes serifadas (Aachen Bold e New Century Schoolbook). Escolha duas delas: uma com um bold forte ¢ bonito (como a Aachen Bold) € uma sem serifa, Alinhamentos diferentes: mew Deus! Alguns elementos esto alinhados & esquerda, alguns estéo centralizados, alguns esto centralizados no meio de usm espaco vazio, alguns nao esto conectados e nao estao alinhados com nada neste mundo, Linha marcante: as figuras clas cerdmicas poderiam criar uma linha sélida de alinhamento para os outros elementos, Falta de proximidade: agrupc as informacdes. Vocé sabe o que deve ser agrupado. Falta de ponto focal: vrios itens estdo competindo pela atengdo. Escolha um. Falta de elementos repetitivos: que tal relorgar os sinais de t6pico, incluindo o que estd entre as palavras ceramica e linéleo? Talvez voce possa utilizar um sinal de tépico quadrado para repetir a figura quadrada da cerdmica, Repita a fonte em bold no grande niimero de telefone, jé que este € um antincio que se encontra em uma lista telefdnica Remova 0 contomo que esté dentro do contorno, Utilize contornos quadrados no contorno remanescente, para reforcar os cantos quadrados da ceramica ¢ para que esses cantos nio fiquem poluidos demais, SOLTE A TECLA CAPS LOCK!I! (© exemplo a seguir é apenas uma dente intimeras possibilidades!11 SOLUGCOES DOS DESAFIOS Ancient City Cerdmicas e Interiores Préximo a Sant’Ana Pregos de atacado para o publico Ceramica e Lindleo: Talavera Saltillo Monterrey Ceramica Dallas Asteca Midstate Mérmore de qualidade Grande opcao de cerémicas no show-room 982-7219 1776 Cupertino Road Solugées: Desafio n° 3 jpigina 91) Como posso me lembrar, Adam! Alta Sociedade Serifa grossa ma contin atid Manuscrite Decorative: No Rodeio Soluces: Desafio Solugées: Desafio n° 5 nea c Pigale c A Wiggle: A B Jigg A D Dig c D Giggle BWDESIGN PARA QUEM NAO £ DESIGNER Solucées: Desafio n° 6 (pivina 124) Perfume cheiroso: Comflito. Fa muitas similaridades; ambas estdo em caixavalta (maiisculas); ambas tém o mesmo tamanho; ambas sio fontes, ‘muito detalhadas, enfetadas demais; tem pesos similares, Comida para ces: Contraste. 14 um forte contrasted tamanho, cor, forma (caixa-alta vsus caixa-baixa: roman versus itlico), de peso e de estrutura. (Apesar de nenhuma das fontes ter um contraste ‘grosso-fino definido em seus tracos, as duas so definitivamente Construidas a partir de bases completamente diferentes) Minha mae: Conflito. Apesar de haver um contraste de forma na utilzacio de texto em caixanalta ¢ em caixa-baixa, exstem varias, similaridades contfitantes. As duas fontes so do mesmo tamanho, com pesos parecidos, com a mesma estrutura ¢ & ‘mesma forma (roman). Fica muito confuso. Fazenda engracada: Conflita, Esse exemplo tem potencial, mas as diferencas deve ser mais enfatizadas. Hé um contrasted forma no uso das letras em caixa-alta e em caixa-baixa, assim como na fonte expandida versus a fonte regular. Existe um pequeno contraste de estrutura na fonte que contém uma suave transi¢do grosso~ fino e a outra que tem letras expandidas com peso igual. Voce conseguiria apontar 0 maior problema? (Pense por alguns instantes) Qual é o principal ponto neste caso? “Seguro Sali” std tentando atrair a atengéo, por ter um tamanho maior, mas estd em uma fonte leve. “Fazenda Engracada’ também estd colocada como o foco principal, mesmo que seu tamanho seja menor, através do uso das letras em caixa-alta e em bold. Voce deve decidir qual deles € o “manda-chuva" e enfatizar um dos, conceitos: “Fazenda Engracada’ ou “Seguro Saude’ Vamos dangar: Contraste. Mesmo que as fontes estejam do mesmo tamaniho epertengam & mesma familia (a familia Formata), os outros contrastes s30 marcantes: peso, forma (roman versus italico € caixa-alta versus caixa-baixa),estrutura (contrastes de peso), cor (apesar de ambas estarem em preto, o peso de “dancar” faz com que a palavra adquira uma cor mais escura) Solugées: Desafio n° 7 (pigina 125) 1. EFrado. Duas fontes manuscritas entrardo em conflito entre si porque, em geral, im a mesma forma, 2. Errado. Fontes da mesma categoria tém a mesma estrutura 3. Errado. Eles “brigardo” entre si, Decida qual & 0 mais importante enfatize-o. trade. A maioria das fontes manuscrita eitslicas tem a mesma forma inclinada e flutuante. Certo. 0 forte contraste de estrutura ¢ cor é instantanco. Certo. 0 contrasted estrutura ¢ cor é instantineo lrrado, Duas fontes detalhadas entrario em conflito, pois suas caracteristicas marcantes competirio para atrairem as atenges. Errado. Ao colocar uma fonte em uma pig, seu objetivo costuma ser 0 de comunicar. Nunca se esqueca disso. ©. certo. 10. arte. A lei bisica de se quebrar as regras é saber, em primeiro lugar. quais sio as regras. Se voc® tiver justficativas para quebrar regras — e se 0 resultado for bom ~, va em frente!Fontes usadas neste livro Foram usadas 105 fontes neste livro. Quando alguém (principalmente um representante/vendedor de fontes) disser que existe 105 fontes, ele jd estard incluindo todas as variagdes de uma fonte: a versio regular € uma fonte, a italica ¢ outra, a bold é outra etc. J que voce é (ou era) um “ndio-designer’, achei que poderia se interessar em saber exatamente quais fontes foram utilizadas neste livro, Também achei interessante mencionar os ntimeros das paginas em que vocé encontraria cada fonte, mas creio que o processo de identificagao das fontes é valido, pois forcaria vocé a prestar muita atengdo a tipologia. Portanto, aqui vai uma lista, com cada fonte em 14 pontos. Dividi as fontes em categorias para vocé, 0 que jf ajuda bastante. Divirta-se! Fontes basicas Texto corrido: Nofet Light, 10/14 (o que significa tipo em 10 pontos com entrelinha de 14 pontos),espago adicional entreletras de 8%. da Adobe. Titulos dos capitulos: Nofret Medium, 60/60 Titulos principais: Antique Olive Black, da Lintotype-Hell Naimeros de capitulos: Antique Olive Nord, 200/160, 15% de preto Gitagoes: Langer, criada por Paul Lang da Monotype Capa Glasgow, da Epiphany Design Studio Estilo antigo Bookman Apple Bernhard Linotype-Hell Cochin, Italic, Bold, Bold Italic Linotype-Hell Garamond Light, Book, Bold, Ultra Linotype-Hiell Goudy, Italic Linotype[MP DESIGN PARA QUEM NAO £ DESIGNER Minion Display Adobe New Baskerville (7c) Linotype-Hell Palatino Apple Photina Regular, Italic Monotype Times Apple Moderno Bodoni, Italic, Poster, Poster Compressed Linotype-tiel Fenice (inc) Light, Regular, Bold, Ultra tinorype-tel Madrone Linotype-Hell Nofret Light, Light Italic, Regular, Medium, Medium Italic, Bold, Bold Italic ‘Adobe Walbaum Roman Adobe Serifa grossa Aachen Bold Linotype-Hel American Typewriter, Bold Adobe BWlachkoak Linotype-Hell Clarendon Light, Plain, Bold Linotype-Hell Memphis Light, Medium, Bold, Extra Bold Linotype-Hell New Century Schoolbook Apple Sem serifa Antique Olive Light, Roman, Compact, Black, Nord Linotype-Hall Eurostile Extended Two, Bold Extended Two Linotype-HellFONTES UTILIZADAS NESTE LIVRO Folio Light, Medium, Bold Condensed Formata Light, Regular, Medium, Medium Italic, Bold, Bold Italic Franklin Gothic Book, Heavy, Condensed, No. 2 Gill Sans Plain, Bold Helvetica, Bold Imago Extra Bold Optima Plain, Oblique, Bold Syntax Black Avant Garde Manuscrita Banco P. Ler (0 ponies Cascade Seript Charme Langer Alt. Roman, Italic, Bold, Bold italic Linoseript Post Antiqua Roman Reporter Two Shelley Volante Tekton Zapf Chancery Linotype-Hiel Linotype-Hell Linotype-Hel Linotype-Hell Apple Adobe Linotype-Hal Linotype-Hel Apple Linotype-Hell Fonttiaus Linotype-Hell Linotype-Hell ‘Monotype Linotype-Hell Linotype-Hell Linotype-Hell Linotype-Hel Adobe Apple[MB DESIGN PARA QUEM Decorativa Addled EXTRAVAGANZA Fats Mico, PISANTE Improv Regular, Inline LITHOS LIGHT, BOLD SCARLETT JUNIPER Ornamentais \ ab V8 8H NAO E DESIGNER FontBank Olduvai Image Cub Image Club Adobe Scarlet minha filha Linotype-Hel Birds, FontHaus Primitives, FontFiaus Woodtype Omaments, Linotype-Hell Zapf Dingbats, Apple