{"id":2315,"date":"2012-09-29T15:17:29","date_gmt":"2012-09-29T15:17:29","guid":{"rendered":"http:\/\/aulas.pro.br\/paulo\/?p=2315"},"modified":"2012-10-15T19:59:09","modified_gmt":"2012-10-15T19:59:09","slug":"principios-basicos-de-layout","status":"publish","type":"post","link":"https:\/\/paulopedott.com\/paulo\/?p=2315","title":{"rendered":"Princ\u00edpios b\u00e1sicos de layout"},"content":{"rendered":"<p><a href=\"http:\/\/www.letterheadfonts.com\/tutorials\/basiclayout\/index.php\">http:\/\/www.letterheadfonts.com\/tutorials\/basiclayout\/index.php<\/a><\/p>\n<p>Princ\u00edpios b\u00e1sicos de layout<\/p>\n<p>O que faz um bom projeto?\u00a0O que faz as pessoas querem ler o seu trabalho?\u00a0<a href=\"http:\/\/letterheadfonts.com\/fonts\/artists\/chuckdavis.php\">Chuck Davis<\/a>\u00a0compara o bom, o mau e o feio.\u00a0planejamento cuidadoso pode significar a diferen\u00e7a entre um projeto ruim e um de sucesso.\u00a0O layout adequado \u00e9 uma habilidade que pode ser aprendida.\u00a0O olho e a mente pode ser treinada para criar um layout &#8220;l\u00f3gico&#8221;. Aqui est\u00e1 um exemplo da import\u00e2ncia de contraste e espa\u00e7o negativo.<br \/>\n1. The Ugly<br \/>\nA falta de \u00e1rea de margem definida em torno do projeto faz com que este layout fique confuso e dif\u00edcil de ler. Ele n\u00e3o \u00e9 muito elaborado e o designer tentou resolver um problema s\u00e9rio de espa\u00e7amento, inserindo algumas x\u00edcaras de caf\u00e9, de ambos os lados. O espa\u00e7o excessivo entre as duas linhas de texto \u00a0separam a mensagem em duas id\u00e9ias individuais quando deveriam realmente serem lidas como uma s\u00f3. Muitas vezes isso acontece quando um designer segue as demandas do cliente para &#8220;fazer tudo o maior poss\u00edvel!&#8221;, sob o equ\u00edvocado conceito de que maior \u00e9 melhor.<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/aulas.pro.br\/paulo\/wp-content\/uploads\/2012\/09\/mamascafe1.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2395\" title=\"mamascafe1\" src=\"http:\/\/aulas.pro.br\/paulo\/wp-content\/uploads\/2012\/09\/mamascafe1.gif\" alt=\"\" width=\"330\" height=\"191\" srcset=\"https:\/\/paulopedott.com\/paulo\/wp-content\/uploads\/2012\/09\/mamascafe1.gif 330w, https:\/\/paulopedott.com\/paulo\/wp-content\/uploads\/2012\/09\/mamascafe1-145x83.gif 145w, https:\/\/paulopedott.com\/paulo\/wp-content\/uploads\/2012\/09\/mamascafe1-300x173.gif 300w\" sizes=\"auto, (max-width: 330px) 100vw, 330px\" \/><\/a><\/p>\n<p>2. The Bad<br \/>\nAqui temos uma melhora a \u00e1rea da margem em torno da mensagem que tornou mais f\u00e1cil para os olhos ler a nossa mensagem. Ao fechar o espa\u00e7o entre o duas linhas de texto, estamos criando um ponto de foco central para o olhar se dirigir. Mas ainda temos alguns\u00a0desajeitados\u00a0espa\u00e7os negativos que cercam nossas letras. Devido \u00e0 um kerning pobre, as \u00e1reas pretas est\u00e3o espalhados tamb\u00e9m uniformemente entre as \u00e1reas brancas. Tente olhar de soslaio para esta mensagem e voc\u00ea ver\u00e1 uma apar\u00eancia geral &#8220;cinza&#8221;.<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/aulas.pro.br\/paulo\/wp-content\/uploads\/2012\/09\/mamascafe2.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2394\" title=\"mamascafe2\" src=\"http:\/\/aulas.pro.br\/paulo\/wp-content\/uploads\/2012\/09\/mamascafe2.gif\" alt=\"\" width=\"330\" height=\"191\" srcset=\"https:\/\/paulopedott.com\/paulo\/wp-content\/uploads\/2012\/09\/mamascafe2.gif 330w, https:\/\/paulopedott.com\/paulo\/wp-content\/uploads\/2012\/09\/mamascafe2-145x83.gif 145w, https:\/\/paulopedott.com\/paulo\/wp-content\/uploads\/2012\/09\/mamascafe2-300x173.gif 300w\" sizes=\"auto, (max-width: 330px) 100vw, 330px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>3. The Good<br \/>\nUm bom contraste adicional \u00e9 conseguido atrav\u00e9s da varia\u00e7\u00e3o das fontes. Devemos prestar aten\u00e7\u00e3o aqui para a import\u00e2ncia da mensagem. Qual \u00e9 a principal mensagem? Neste caso, &#8220;caf\u00e9&#8221;. Logicamente queremos que as pessoas entendem que este \u00e9 primeiramente\u00a0um\u00a0caf\u00e9 e que ser da mam\u00e3e vem em segundo plano. Este projeto tem todos os elementos de um bom design: \u00e9 f\u00e1cil de ler e tem bastante apelo visual para fazer com que algu\u00e9m queira l\u00ea-lo em primeiro lugar. Este projeto tem personalidade e quase se pode ter uma id\u00e9ia da atmosfera dentro do &#8220;Caf\u00e9 da mam\u00e3e&#8221;. Compare suas percep\u00e7\u00f5es desde o primeiro exemplo at\u00e9 este \u00faltimo.<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/aulas.pro.br\/paulo\/wp-content\/uploads\/2012\/09\/mamascafe3.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2396\" title=\"mamascafe3\" src=\"http:\/\/aulas.pro.br\/paulo\/wp-content\/uploads\/2012\/09\/mamascafe3.gif\" alt=\"\" width=\"330\" height=\"191\" srcset=\"https:\/\/paulopedott.com\/paulo\/wp-content\/uploads\/2012\/09\/mamascafe3.gif 330w, https:\/\/paulopedott.com\/paulo\/wp-content\/uploads\/2012\/09\/mamascafe3-145x83.gif 145w, https:\/\/paulopedott.com\/paulo\/wp-content\/uploads\/2012\/09\/mamascafe3-300x173.gif 300w\" sizes=\"auto, (max-width: 330px) 100vw, 330px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>http:\/\/www.letterheadfonts.com\/tutorials\/basiclayout\/index.php Princ\u00edpios b\u00e1sicos de layout O que faz um bom projeto?\u00a0O que faz as pessoas querem ler o seu trabalho?\u00a0Chuck Davis\u00a0compara o bom, o mau e o feio.\u00a0planejamento cuidadoso pode significar a diferen\u00e7a entre um projeto ruim e um de sucesso.\u00a0O layout adequado \u00e9 uma habilidade que pode ser aprendida.\u00a0O olho e a mente pode [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,62],"tags":[],"class_list":["post-2315","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-academica","category-design"],"_links":{"self":[{"href":"https:\/\/paulopedott.com\/paulo\/index.php?rest_route=\/wp\/v2\/posts\/2315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/paulopedott.com\/paulo\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/paulopedott.com\/paulo\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/paulopedott.com\/paulo\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/paulopedott.com\/paulo\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2315"}],"version-history":[{"count":10,"href":"https:\/\/paulopedott.com\/paulo\/index.php?rest_route=\/wp\/v2\/posts\/2315\/revisions"}],"predecessor-version":[{"id":2398,"href":"https:\/\/paulopedott.com\/paulo\/index.php?rest_route=\/wp\/v2\/posts\/2315\/revisions\/2398"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/paulopedott.com\/paulo\/index.php?rest_route=\/wp\/v2\/media\/2395"}],"wp:attachment":[{"href":"https:\/\/paulopedott.com\/paulo\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/paulopedott.com\/paulo\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/paulopedott.com\/paulo\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}