{"id":204,"date":"2016-07-20T17:05:35","date_gmt":"2016-07-20T20:05:35","guid":{"rendered":"https:\/\/www.origamid.com\/codex\/?p=204"},"modified":"2016-07-20T17:12:59","modified_gmt":"2016-07-20T20:12:59","slug":"padding-e-a-revolucao-do-layout-na-web","status":"publish","type":"post","link":"https:\/\/www.origamid.com\/codex\/padding-e-a-revolucao-do-layout-na-web\/","title":{"rendered":"Padding \u00e9 a Revolu\u00e7\u00e3o do Layout na Web"},"content":{"rendered":"\"Padding\n

As vezes eu acredito que no inicio da Web, os Designers n\u00e3o estavam t\u00e3o interessados nessa nova m\u00eddia.<\/p>\n

Principalmente devido as limita\u00e7\u00f5es da tecnologia na \u00e9poca (CSS) e a dificuldade de aprendizado, j\u00e1 que n\u00e3o existiam tanto conte\u00fado como hoje.<\/p>\n

E por isso, pessoas sem os conhecimentos dos fundamentos do design ficavam respons\u00e1veis pela cria\u00e7\u00e3o dos layouts das p\u00e1ginas na web.<\/p>\n

Bom, isso \u00e9 apenas algo que eu acho. Por\u00e9m o fato \u00e9 que no in\u00edcio da web, o espa\u00e7o negativo foi muitas vezes ignorado pelos respons\u00e1veis pela interface.<\/p>\n

Pegue um layout de 2006 e ver\u00e1 que n\u00e3o s\u00f3 as cores mudaram (flat \/ material design), mas principalmente a quantidade de padding que cada elemento de uma p\u00e1gina possui hoje em dia.<\/p>\n

O padding \u00e9 simplesmente uma margem interna que separa o conte\u00fado da borda de sua caixa (j\u00e1 que a Web \u00e9 um emaranhado de caixas). Essa margem deixa o conte\u00fado respirar, dando mais destaque e import\u00e2ncia ao mesmo.<\/p>\n

Conte\u00fado pode ser o texto de um bot\u00e3o, um \u00edcone de um produto, a descri\u00e7\u00e3o de um site e por ai vai.<\/p>\n

Esse \u00e9 um erro presente no layout de quase 95% dos iniciantes que eu vejo criando um site. A falta de espa\u00e7o negativo, principalmente o padding.<\/p>\n

Ent\u00e3o na pr\u00f3xima vez lembre-se, desgrude qualquer conte\u00fado de sua borda e ter\u00e1 um layout milh\u00f5es de vezes melhor.<\/p>\n

Mantenha tamb\u00e9m padronizado o espa\u00e7o negativo, ou seja, se um bot\u00e3o tem 20px de padding-left e padding-right, mantenha isso para todo o site (a n\u00e3o ser que queira comunicar algo diferente).<\/p>\n","protected":false},"excerpt":{"rendered":"

As vezes eu acredito que no inicio da Web, os Designers n\u00e3o estavam t\u00e3o interessados nessa nova m\u00eddia. Principalmente devido as limita\u00e7\u00f5es da tecnologia na \u00e9poca (CSS) e a dificuldade de aprendizado, j\u00e1 que n\u00e3o existiam tanto conte\u00fado como hoje. E por isso, pessoas sem os conhecimentos dos fundamentos do design ficavam respons\u00e1veis pela cria\u00e7\u00e3o […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/204"}],"collection":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/comments?post=204"}],"version-history":[{"count":2,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/204\/revisions"}],"predecessor-version":[{"id":207,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/204\/revisions\/207"}],"wp:attachment":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/media?parent=204"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/categories?post=204"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/tags?post=204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}