{"id":1924,"date":"2014-07-25T10:58:53","date_gmt":"2014-07-25T13:58:53","guid":{"rendered":"https:\/\/waltermattos.com\/?p=1924"},"modified":"2017-01-10T15:42:49","modified_gmt":"2017-01-10T18:42:49","slug":"tutorial-os-segredos-da-harmonia-design-de-paginas","status":"publish","type":"post","link":"https:\/\/waltermattos.com\/site\/tutoriais\/tutorial-os-segredos-da-harmonia-design-de-paginas\/","title":{"rendered":"Tutorial: Os segredos da harmonia no design de p\u00e1ginas"},"content":{"rendered":"<p><iframe loading=\"lazy\" src=\"\/\/www.youtube.com\/embed\/eVf3BAnneJQ\" width=\"640\" height=\"360\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>Neste tutorial, que est\u00e1 mais para um artigo em v\u00eddeo, apresento a voc\u00ea algumas t\u00e9cnicas para criar p\u00e1ginas utilizando os grids de grandes nomes da nossa hist\u00f3ria, como Jan Tschichold\u00a0e\u00a0Van de Graaf.<\/p>\n<p>Voc\u00ea ver\u00e1 tr\u00eas maneiras diferentes de se alcan\u00e7ar o mesmo resultado de distribui\u00e7\u00e3o de p\u00e1ginas, que\u00a0por muitos, e h\u00e1 muito tempo &#8211; me refiro a s\u00e9culos, \u00e9 considerado o m\u00e9todo mais elegante poss\u00edvel. Eu acho que \u00e9 no m\u00ednimo muito inteligente.<\/p>\n<p>Abaixo, seguem algumas refer\u00eancias que utilizei para fazer este v\u00eddeo:<\/p>\n<h4>Artigo<\/h4>\n<p><a title=\"The Secret Law of Page Harmony\" href=\"http:\/\/retinart.net\/graphic-design\/secret-law-of-page-harmony\/\" target=\"_blank\">The Secret Law of Page Harmony<\/a><\/p>\n<h4>Livros<\/h4>\n<p><a title=\"Geometria do Design - Kimberly Elam\" href=\"http:\/\/www.livrariacultura.com.br\/scripts\/cultura\/externo\/index.asp?id_link=13379&amp;destino=\/scripts\/resenha\/resenha.asp?nitem=3249420&amp;\" target=\"_blank\">Geometria do Design \u2013 Kimberly Elam<\/a><br \/>\n<a title=\"A forma do livro - Jan Tschichold\" href=\"http:\/\/www.livrariacultura.com.br\/scripts\/cultura\/externo\/index.asp?id_link=13379&amp;destino=\/scripts\/resenha\/resenha.asp?nitem=3219128&amp;termo=a%20forma%20do%20livro&amp;\" target=\"_blank\">A forma do livro \u2013 Jan Tschichold<\/a><br \/>\n<a title=\"Grid - Constru\u00e7\u00e3o e Desconstru\u00e7\u00e3o - Timothy Samara\" href=\"https:\/\/waltermattos.com\/go\/grid-construcao-e-desconstrucao\/\" target=\"_blank\">Grid: Constru\u00e7\u00e3o e Desconstru\u00e7\u00e3o \u2013 Timothy Samara<\/a><br \/>\n<a href=\"https:\/\/waltermattos.com\/go\/grids-gavin-ambrose\/\" target=\"_blank\">Grids \u2013 Gavin Ambrose e Paul Harris<\/a><br \/>\n<a title=\"O livro e o designer 2 - Andrew Haslam\" href=\"https:\/\/waltermattos.com\/go\/o-livro-e-o-designer-2\/\" target=\"_blank\">O livro e o designer 2 \u2013 Andrew Haslam<\/a><br \/>\n<a title=\"Grid Systems - Joseph Muller-Brockmann\" href=\"https:\/\/waltermattos.com\/go\/sistema-de-grelhas\/\" target=\"_blank\">Sistema de Grelhas \u2013 Joseph Muller-Brockmann<\/a><\/p>\n<p>Espero que voc\u00ea goste.<\/p>\n<p>Um abra\u00e7o e bom v\u00eddeo &#8211; ou boa leitura.<\/p>\n<h1>Abaixo segue a transcri\u00e7\u00e3o do v\u00eddeo.<\/h1>\n<h2>01 \u2013 Introdu\u00e7\u00e3o<\/h2>\n<p>E a\u00ed galera, beleza? Meu nome \u00e9 Walter Mattos, e se voc\u00ea j\u00e1 acompanha meu canal deve ter notado pelo t\u00edtulo que hoje n\u00e3o vou falar sobre um programa espec\u00edfico, mas sim sobre \u201c<strong>Os segredos da harmonia no design de p\u00e1ginas<\/strong>\u201d.<\/p>\n<p>E para fazer este v\u00eddeo eu tive que ler um pouco para relembrar algumas coisas, e aproveitei para deixar os nomes desses livros a\u00ed na descri\u00e7\u00e3o. E tamb\u00e9m na descri\u00e7\u00e3o voc\u00ea vai encontrar um link para um artigo em ingl\u00eas chamado \u201cThe Secret Law of Page Harmony\u201d, que tamb\u00e9m ajudou muito, e eu aconselho para quem quiser se aprofundar um pouco mais sobre o que eu vou falar aqui.<\/p>\n<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"360\" class=\"alignnone size-full wp-image-1934\" src=\"https:\/\/waltermattos.com\/site\/wp-content\/uploads\/2014\/07\/tut_Grids_Intro_03_Ler_Secret_640.jpg\" alt=\"tut_Grids_Intro_03_Ler_Secret_640\" srcset=\"https:\/\/waltermattos.com\/site\/wp-content\/uploads\/2014\/07\/tut_Grids_Intro_03_Ler_Secret_640.jpg 640w, https:\/\/waltermattos.com\/site\/wp-content\/uploads\/2014\/07\/tut_Grids_Intro_03_Ler_Secret_640-310x174.jpg 310w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/>\n<p>E eu vou falar sobre design de p\u00e1gina.<\/p>\n<p>E para entender sobre design de p\u00e1gina \u00e9 preciso entender sobre grids. Ent\u00e3o, antes de pensar em montar um dos tutoriais mais pedidos, que \u00e9 \u201ccomo criar algo utilizando grids\u201d, achei melhor mostrar o caminho de estudo que eu segui, que me despertou essa paix\u00e3o.<\/p>\n<p>E se tem um tipo de pergunta que eu recebo com frequ\u00eancia \u00e9 sobre grids.<\/p>\n<ul>\n<li>Por onde come\u00e7ar um grid?<\/li>\n<li>O que eu tenho que estudar?<\/li>\n<li>Como voc\u00ea aplicar seus grids nas suas marcas?<\/li>\n<\/ul>\n<p>Bom, essas s\u00e3o perguntas s\u00e3o um pouco dif\u00edceis de responder, e justamente por isso eu decidi fazer essa introdu\u00e7\u00e3o.<strong>\u00a0<\/strong><\/p>\n<p><strong>Ent\u00e3o, eu acho que a pergunta fundamental na verdade \u00e9 \u201cQual a fun\u00e7\u00e3o do grid?<\/strong><strong>\u00a0<\/strong><\/p>\n<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"360\" class=\"alignnone size-full wp-image-1935\" src=\"https:\/\/waltermattos.com\/site\/wp-content\/uploads\/2014\/07\/tut_Grids_Intro_Qual_Funcao_640.jpg\" alt=\"tut_Grids_Intro_Qual_Funcao_640\" srcset=\"https:\/\/waltermattos.com\/site\/wp-content\/uploads\/2014\/07\/tut_Grids_Intro_Qual_Funcao_640.jpg 640w, https:\/\/waltermattos.com\/site\/wp-content\/uploads\/2014\/07\/tut_Grids_Intro_Qual_Funcao_640-310x174.jpg 310w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/>\n<p>Bom, a fun\u00e7\u00e3o b\u00e1sica do grid \u00e9 organizar informa\u00e7\u00f5es dentro de uma p\u00e1gina, seja ela impressa ou n\u00e3o.<\/p>\n<p>O que importa \u00e9 voc\u00ea criar uma estrutura que te permita organizar esse conte\u00fado de forma coerente, ou pelo menos fundamentada.<\/p>\n<p>E ao contr\u00e1rio do que muitos pensam, o grid n\u00e3o \u00e9 um limitador. Ele te permite enxergar possibilidades onde voc\u00ea n\u00e3o enxergava antes.<\/p>\n<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"360\" class=\"alignnone size-full wp-image-1936\" src=\"https:\/\/waltermattos.com\/site\/wp-content\/uploads\/2014\/07\/tut_Grids_Intro_Possibilidades_640.jpg\" alt=\"tut_Grids_Intro_Possibilidades_640\" srcset=\"https:\/\/waltermattos.com\/site\/wp-content\/uploads\/2014\/07\/tut_Grids_Intro_Possibilidades_640.jpg 640w, https:\/\/waltermattos.com\/site\/wp-content\/uploads\/2014\/07\/tut_Grids_Intro_Possibilidades_640-310x174.jpg 310w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/>\n<h2>02 \u2013 A p\u00e1gina<strong>\u00a0<\/strong><\/h2>\n<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"360\" class=\"alignnone size-full wp-image-1937\" src=\"https:\/\/waltermattos.com\/site\/wp-content\/uploads\/2014\/07\/tut_Grids_Intro_Pagina_Harmonica_640.jpg\" alt=\"tut_Grids_Intro_Pagina_Harmonica_640\" srcset=\"https:\/\/waltermattos.com\/site\/wp-content\/uploads\/2014\/07\/tut_Grids_Intro_Pagina_Harmonica_640.jpg 640w, https:\/\/waltermattos.com\/site\/wp-content\/uploads\/2014\/07\/tut_Grids_Intro_Pagina_Harmonica_640-310x174.jpg 310w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/>\n<p>Ent\u00e3o vamos l\u00e1, se voc\u00ea estuda design provavelmente j\u00e1 viu em algum momento essa distribui\u00e7\u00e3o de grid. E esse grid nada mais \u00e9 do que o espa\u00e7o onde voc\u00ea pretende distribuir seu texto ou imagem.<\/p>\n<p>Esse m\u00e9todo \u00e9 muito mais antigo que a primeira m\u00e1quina de impress\u00e3o, e at\u00e9 hoje \u00e9 reconhecido como um dos m\u00e9todos mais elegantes de distribui\u00e7\u00e3o de p\u00e1gina.<\/p>\n<p>Existem v\u00e1rias curiosidades sobre distribui\u00e7\u00e3o espec\u00edfica, como por exemplo o fato de que essas margens seguem uma escala de crescimento. Ent\u00e3o se eu definir a margem interna como uma unidade, eu percebo que a margem superior tem uma unidade e meia, a margem externa tem duas unidades e a margem inferior tem tr\u00eas unidades.<\/p>\n<p>Outra coisa interessante a se notar \u00e9 que as margens externas possuem exatamente a mesma largura que as duas internas somadas.<\/p>\n<p>E uma das coisas mais intrigantes \u00e9 que se eu girar esse grid voc\u00ea nota que a altura dele tem exatamente a mesma largura da p\u00e1gina.<\/p>\n<p>E para comprovar isso, se eu inserir um c\u00edrculo em uma p\u00e1gina com essas mesmas propor\u00e7\u00f5es, 2 para 3, voc\u00ea nota que o c\u00edrculo se alinha perfeitamente na altura e largura da p\u00e1gina.<\/p>\n<p>E quem disseminou isso foi tip\u00f3grafo e designer chamado \u201cJan Tschichold\u201d, ent\u00e3o eu aconselho muito que voc\u00ea pesquise sobre ele.<\/p>\n<p>E esse m\u00e9todo pode ser alcan\u00e7ado de diversas maneiras diferentes, ent\u00e3o eu vou apresentar os tr\u00eas mais conhecidos.<\/p>\n<p>E o primeiro deles \u00e9 conhecido como \u201c<strong>The Van De Graaf Canon<\/strong>\u201d, ou um c\u00e2none Van de Graaf.<\/p>\n<h2>03 \u2013 The Van De Graaf Canon<\/h2>\n<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"360\" class=\"alignnone size-full wp-image-1939\" src=\"https:\/\/waltermattos.com\/site\/wp-content\/uploads\/2014\/07\/tut_Grids_Intro_VDG0_640.gif\" alt=\"tut_Grids_Intro_VDG0_640\" \/>\n<p>O m\u00e9todo do Van de Graaf \u00e9 provavelmente a forma mais f\u00e1cil de se encontrar esse grid, e n\u00e3o \u00e9 necess\u00e1rio fazer nenhum tipo de conta para isso.<\/p>\n<p>Primeiro a gente encontra os centros tra\u00e7ando essas duas linhas. Em seguida a gente tra\u00e7a mais duas linhas das extremidades inferiores at\u00e9 o centro da parte superior.<\/p>\n<p>Com isso a gente vai encontrar essa interse\u00e7\u00e3o aqui. E daqui a gente vai puxar uma linha at\u00e9 o topo da p\u00e1gina, e do topo at\u00e9 o espelho da interse\u00e7\u00e3o que a gente acabou de encontrar. T\u00e1 pronto.<\/p>\n<p>Depois disso eu pego essa primeira interse\u00e7\u00e3o aqui e puxo uma linha at\u00e9 ela encostar nessa diagonal.<\/p>\n<p>Daqui eu puxo uma nova linha para baixo at\u00e9 encostar na outra diagonal, e por \u00faltimo fecho o ret\u00e2ngulo unindo essas duas linhas. Mole, n\u00e9?<\/p>\n<p>E para fazer o outro lado \u00e9 s\u00f3 espelhar as guias que faltaram.<\/p>\n<h2>04 \u2013 Diagrama de Villard<\/h2>\n<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"360\" class=\"alignnone size-full wp-image-1953\" src=\"https:\/\/waltermattos.com\/site\/wp-content\/uploads\/2014\/07\/tut_Grids_Intro_DV3_Animado2.gif\" alt=\"tut_Grids_Intro_DV3_Animado\" \/>\n<p>E sem perder muito tempo vamos para o segundo m\u00e9todo, conhecido como \u201cDiagrama de Villard\u201d.<\/p>\n<p>Esse \u00e9 bem parecido com o m\u00e9todo Van de Graaf, ent\u00e3o a gente j\u00e1 come\u00e7a com essas cinco linhas aqui. S\u00f3 que agora a gente n\u00e3o puxa uma linha para o outro lado, e sim dessa interse\u00e7\u00e3o aqui at\u00e9 o centro do livro.<\/p>\n<p>E com isso a gente acabou de encontrar um ter\u00e7o da altura, olha s\u00f3.<\/p>\n<p>Ent\u00e3o agora eu vou juntar estes dois pontos aqui com uma nova diagonal, e a gente acabou de encontrar esse centro, que corresponde a um sexto da p\u00e1gina.<\/p>\n<p>Continuando, se eu tra\u00e7ar uma nova diagonal nestes dois pontos a gente vai encontrar esse centro, que corresponde a um nono da p\u00e1gina. Vai falar que isso n\u00e3o \u00e9 muito maneiro?<\/p>\n<p>E essa progress\u00e3o \u00e9 infinita. Esse ponto aqui corresponde a um doze avos, por exemplo.<\/p>\n<p>E onde nosso grid se encaixa aqui? Aqui, \u00f3. No ponto que corresponde a um novo.<\/p>\n<h2>05 \u2013 Ra\u00fal Rosaviro<\/h2>\n<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"360\" class=\"alignnone size-full wp-image-1947\" src=\"https:\/\/waltermattos.com\/site\/wp-content\/uploads\/2014\/07\/tut_Grids_Intro_RR1_Animado1.gif\" alt=\"tut_Grids_Intro_RR1_Animado\" \/>\n<p>Ent\u00e3o aproveitando que a gente falou dos nonos, vamos ao \u00faltimo m\u00e9todo, do Ra\u00fal \u201cRos\u00e1rivo\u201d, ou \u201cRosarivo\u201d, n\u00e3o sei qual \u00e9 a pron\u00fancia.<\/p>\n<p>Esse m\u00e9todo para quem usa computador chega a ser covardia, pois \u00e9 s\u00f3 pegar a p\u00e1gina e dividir tanto a altura quanto a largura por 9.<\/p>\n<p>Lembra que a gente acabou de descobrir no Diagrama de Villard que com um nono a gente encontra o grid? Ent\u00e3o, olha ele a\u00ed.<\/p>\n<h2>06 \u2013 Na pr\u00e1tica<\/h2>\n<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"360\" class=\"alignnone size-full wp-image-1951\" src=\"https:\/\/waltermattos.com\/site\/wp-content\/uploads\/2014\/07\/tut_Grids_Intro_Prefeitura_Animacao2.gif\" alt=\"tut_Grids_Intro_Prefeitura_Animacao\" \/>\n<p>E antes de finalizar esse v\u00eddeo vou mostrar pra voc\u00eas que \u00e9 poss\u00edvel aplicar esses conhecimentos na pr\u00e1tica, por mais simples que seja seu layout.<\/p>\n<p>Esse projeto aqui \u00e9 de 2012 e como voc\u00ea pode ver ele \u00e9 bem simples.<\/p>\n<p>Enfim, a ideia \u00e9 que voc\u00ea n\u00e3o utilize o grid apenas como \u201cr\u00e9gua\u201d, mas quando puder, aplique ele como parte do conceito tamb\u00e9m.<\/p>\n<p>Nesse projeto aqui, por exemplo, o cliente final era a Prefeitura de Catanduva, e eu vou ampliar o s\u00edmbolo da prefeitura pra voc\u00ea dar uma olhada.<\/p>\n<p>Repara como esse bras\u00e3o \u00e9 dividido em 3 partes iguais. Assim que eu observei isso eu pensei \u201chmm, j\u00e1 posso usar isso no layout da capa\u201d.<\/p>\n<p>E como complemento eu tamb\u00e9m usei dois elementos do bras\u00e3o, que foram essa ondinha e a engrenagem para fazer o sol.<\/p>\n<p>Ent\u00e3o voltando para o layout, olha como est\u00e1 meu grid. Eu praticamente usei apenas Diagrama de Villard para dividir essa p\u00e1gina em tr\u00eas, e posicionar os objetos como o sol e o personagem.<\/p>\n<h2>07\u00a0\u2013 Encerramento<\/h2>\n<p>Ent\u00e3o \u00e9 isso, pessoal. Esses s\u00e3o os t\u00e3o famosos segredos de harmonia das p\u00e1ginas dos grandes tip\u00f3grafos, designers e arquitetos da nossa hist\u00f3ria.<\/p>\n<p>Espero que voc\u00ea tenha entendido e gostado desse tutorial. E caso voc\u00ea n\u00e3o seja um estudante de design e esteja esperando por novos tutoriais, fica tranquilo pois os tutoriais continuar\u00e3o. E caso voc\u00ea considere esse v\u00eddeo interessante para algu\u00e9m, compartilha com essa pessoa.<\/p>\n<p>N\u00e3o esquece de se inscrever no meu canal para acompanhar novos v\u00eddeos, e se poss\u00edvel visite o meu site <a href=\"http:\/\/www.waltermattos.com\/\">www.waltermattos.com<\/a>, e se inscreve tamb\u00e9m na minha newsletter, pois \u00e9 uma forma de garantir que voc\u00ea ficar\u00e1 atualizado. Al\u00e9m disso voc\u00ea vai receber dicas e novidades do meu Blog a cada 15 dias.<\/p>\n<p>Obrigado a\u00ed, pessoal, um abra\u00e7o e at\u00e9 o pr\u00f3ximo v\u00eddeo.<\/p>\n<p>&#8212;<\/p>\n<h5>Cr\u00e9ditos:<\/h5>\n<p>Ilustra\u00e7\u00e3o projeto Catanduva &#8211; Miripol<br \/>\nDiagrama\u00e7\u00e3o projeto Catanduva &#8211; Andr\u00e9s Sanchez<\/p>\n<p>&#8212;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Neste tutorial, que est\u00e1 mais para um artigo em v\u00eddeo, apresento a voc\u00ea algumas t\u00e9cnicas para criar p\u00e1ginas utilizando os grids de grandes nomes da nossa hist\u00f3ria, como Jan Tschichold\u00a0e\u00a0Van de Graaf. Voc\u00ea ver\u00e1 tr\u00eas maneiras diferentes de se alcan\u00e7ar o mesmo resultado de distribui\u00e7\u00e3o de p\u00e1ginas, que\u00a0por muitos, e h\u00e1 muito tempo &#8211; me&#8230;  <a class=\"excerpt-read-more\" href=\"https:\/\/waltermattos.com\/site\/tutoriais\/tutorial-os-segredos-da-harmonia-design-de-paginas\/\">Ler artigo<\/a><\/p>\n","protected":false},"author":2,"featured_media":1945,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[25,7],"tags":[113,111,112,62],"class_list":["post-1924","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-artigos","category-tutoriais","tag-grid","tag-harmonia","tag-paginas","tag-tutorial"],"jetpack_publicize_connections":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Os segredos da harmonia no design de p\u00e1ginas<\/title>\n<meta name=\"description\" content=\"Conhe\u00e7a os segredos de Tshichold e Villard para criar a harmonia &quot;perfeita&quot; no seu design.\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Os segredos da harmonia no design de p\u00e1ginas\" \/>\n<meta property=\"og:description\" content=\"Conhe\u00e7a os segredos de Tshichold e Villard para criar a harmonia &quot;perfeita&quot; no seu design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/waltermattos.com\/site\/tutoriais\/tutorial-os-segredos-da-harmonia-design-de-paginas\/\" \/>\n<meta property=\"og:site_name\" content=\"Walter Mattos\" \/>\n<meta property=\"article:published_time\" content=\"2014-07-25T13:58:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-01-10T18:42:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/waltermattos.com\/site\/wp-content\/uploads\/2014\/07\/tut_Segredos_Pagina_Harmonica_Cover_Blog.png\" \/>\n\t<meta property=\"og:image:width\" content=\"420\" \/>\n\t<meta property=\"og:image:height\" content=\"420\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Walter Mattos\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Walter Mattos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/waltermattos.com\/site\/tutoriais\/tutorial-os-segredos-da-harmonia-design-de-paginas\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/waltermattos.com\/site\/tutoriais\/tutorial-os-segredos-da-harmonia-design-de-paginas\/\"},\"author\":{\"name\":\"Walter Mattos\",\"@id\":\"https:\/\/waltermattos.com\/site\/#\/schema\/person\/d237be35b3af8e99d73dba176ae68175\"},\"headline\":\"Tutorial: Os segredos da harmonia no design de p\u00e1ginas\",\"datePublished\":\"2014-07-25T13:58:53+00:00\",\"dateModified\":\"2017-01-10T18:42:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/waltermattos.com\/site\/tutoriais\/tutorial-os-segredos-da-harmonia-design-de-paginas\/\"},\"wordCount\":1528,\"commentCount\":8,\"image\":{\"@id\":\"https:\/\/waltermattos.com\/site\/tutoriais\/tutorial-os-segredos-da-harmonia-design-de-paginas\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/waltermattos.com\/site\/wp-content\/uploads\/2014\/07\/tut_Segredos_Pagina_Harmonica_Cover_Blog.png\",\"keywords\":[\"Grid\",\"Harmonia\",\"P\u00e1ginas\",\"Tutorial\"],\"articleSection\":[\"Artigos\",\"Tutoriais\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/waltermattos.com\/site\/tutoriais\/tutorial-os-segredos-da-harmonia-design-de-paginas\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/waltermattos.com\/site\/tutoriais\/tutorial-os-segredos-da-harmonia-design-de-paginas\/\",\"url\":\"https:\/\/waltermattos.com\/site\/tutoriais\/tutorial-os-segredos-da-harmonia-design-de-paginas\/\",\"name\":\"Os segredos da harmonia no design de p\u00e1ginas\",\"isPartOf\":{\"@id\":\"https:\/\/waltermattos.com\/site\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/waltermattos.com\/site\/tutoriais\/tutorial-os-segredos-da-harmonia-design-de-paginas\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/waltermattos.com\/site\/tutoriais\/tutorial-os-segredos-da-harmonia-design-de-paginas\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/waltermattos.com\/site\/wp-content\/uploads\/2014\/07\/tut_Segredos_Pagina_Harmonica_Cover_Blog.png\",\"datePublished\":\"2014-07-25T13:58:53+00:00\",\"dateModified\":\"2017-01-10T18:42:49+00:00\",\"author\":{\"@id\":\"https:\/\/waltermattos.com\/site\/#\/schema\/person\/d237be35b3af8e99d73dba176ae68175\"},\"description\":\"Conhe\u00e7a os segredos de Tshichold e Villard para criar a harmonia \\\"perfeita\\\" no seu design.\",\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/waltermattos.com\/site\/tutoriais\/tutorial-os-segredos-da-harmonia-design-de-paginas\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/waltermattos.com\/site\/tutoriais\/tutorial-os-segredos-da-harmonia-design-de-paginas\/#primaryimage\",\"url\":\"https:\/\/waltermattos.com\/site\/wp-content\/uploads\/2014\/07\/tut_Segredos_Pagina_Harmonica_Cover_Blog.png\",\"contentUrl\":\"https:\/\/waltermattos.com\/site\/wp-content\/uploads\/2014\/07\/tut_Segredos_Pagina_Harmonica_Cover_Blog.png\",\"width\":420,\"height\":420},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/waltermattos.com\/site\/#website\",\"url\":\"https:\/\/waltermattos.com\/site\/\",\"name\":\"Walter Mattos\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/waltermattos.com\/site\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/waltermattos.com\/site\/#\/schema\/person\/d237be35b3af8e99d73dba176ae68175\",\"name\":\"Walter Mattos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/5dc7ec4d23186e07e90ded5d0d17b7b54a9fddb7722b5e0b8fff5bb931511f70?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5dc7ec4d23186e07e90ded5d0d17b7b54a9fddb7722b5e0b8fff5bb931511f70?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5dc7ec4d23186e07e90ded5d0d17b7b54a9fddb7722b5e0b8fff5bb931511f70?s=96&d=mm&r=g\",\"caption\":\"Walter Mattos\"},\"description\":\"Walter Mattos \u00e9 um designer brasileiro apaixonado por cria\u00e7\u00e3o de marcas e identidades visuais. Em seu blog e canal no Youtube compartilha suas experi\u00eancias atrav\u00e9s de dicas, reflex\u00f5es e tutoriais relacionados a design.\",\"sameAs\":[\"https:\/\/waltermattos.com\"],\"url\":\"https:\/\/waltermattos.com\/site\/author\/walter\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Os segredos da harmonia no design de p\u00e1ginas","description":"Conhe\u00e7a os segredos de Tshichold e Villard para criar a harmonia \"perfeita\" no seu design.","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"pt_BR","og_type":"article","og_title":"Os segredos da harmonia no design de p\u00e1ginas","og_description":"Conhe\u00e7a os segredos de Tshichold e Villard para criar a harmonia \"perfeita\" no seu design.","og_url":"https:\/\/waltermattos.com\/site\/tutoriais\/tutorial-os-segredos-da-harmonia-design-de-paginas\/","og_site_name":"Walter Mattos","article_published_time":"2014-07-25T13:58:53+00:00","article_modified_time":"2017-01-10T18:42:49+00:00","og_image":[{"width":420,"height":420,"url":"https:\/\/waltermattos.com\/site\/wp-content\/uploads\/2014\/07\/tut_Segredos_Pagina_Harmonica_Cover_Blog.png","type":"image\/png"}],"author":"Walter Mattos","twitter_misc":{"Escrito por":"Walter Mattos","Est. tempo de leitura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/waltermattos.com\/site\/tutoriais\/tutorial-os-segredos-da-harmonia-design-de-paginas\/#article","isPartOf":{"@id":"https:\/\/waltermattos.com\/site\/tutoriais\/tutorial-os-segredos-da-harmonia-design-de-paginas\/"},"author":{"name":"Walter Mattos","@id":"https:\/\/waltermattos.com\/site\/#\/schema\/person\/d237be35b3af8e99d73dba176ae68175"},"headline":"Tutorial: Os segredos da harmonia no design de p\u00e1ginas","datePublished":"2014-07-25T13:58:53+00:00","dateModified":"2017-01-10T18:42:49+00:00","mainEntityOfPage":{"@id":"https:\/\/waltermattos.com\/site\/tutoriais\/tutorial-os-segredos-da-harmonia-design-de-paginas\/"},"wordCount":1528,"commentCount":8,"image":{"@id":"https:\/\/waltermattos.com\/site\/tutoriais\/tutorial-os-segredos-da-harmonia-design-de-paginas\/#primaryimage"},"thumbnailUrl":"https:\/\/waltermattos.com\/site\/wp-content\/uploads\/2014\/07\/tut_Segredos_Pagina_Harmonica_Cover_Blog.png","keywords":["Grid","Harmonia","P\u00e1ginas","Tutorial"],"articleSection":["Artigos","Tutoriais"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/waltermattos.com\/site\/tutoriais\/tutorial-os-segredos-da-harmonia-design-de-paginas\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/waltermattos.com\/site\/tutoriais\/tutorial-os-segredos-da-harmonia-design-de-paginas\/","url":"https:\/\/waltermattos.com\/site\/tutoriais\/tutorial-os-segredos-da-harmonia-design-de-paginas\/","name":"Os segredos da harmonia no design de p\u00e1ginas","isPartOf":{"@id":"https:\/\/waltermattos.com\/site\/#website"},"primaryImageOfPage":{"@id":"https:\/\/waltermattos.com\/site\/tutoriais\/tutorial-os-segredos-da-harmonia-design-de-paginas\/#primaryimage"},"image":{"@id":"https:\/\/waltermattos.com\/site\/tutoriais\/tutorial-os-segredos-da-harmonia-design-de-paginas\/#primaryimage"},"thumbnailUrl":"https:\/\/waltermattos.com\/site\/wp-content\/uploads\/2014\/07\/tut_Segredos_Pagina_Harmonica_Cover_Blog.png","datePublished":"2014-07-25T13:58:53+00:00","dateModified":"2017-01-10T18:42:49+00:00","author":{"@id":"https:\/\/waltermattos.com\/site\/#\/schema\/person\/d237be35b3af8e99d73dba176ae68175"},"description":"Conhe\u00e7a os segredos de Tshichold e Villard para criar a harmonia \"perfeita\" no seu design.","inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/waltermattos.com\/site\/tutoriais\/tutorial-os-segredos-da-harmonia-design-de-paginas\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/waltermattos.com\/site\/tutoriais\/tutorial-os-segredos-da-harmonia-design-de-paginas\/#primaryimage","url":"https:\/\/waltermattos.com\/site\/wp-content\/uploads\/2014\/07\/tut_Segredos_Pagina_Harmonica_Cover_Blog.png","contentUrl":"https:\/\/waltermattos.com\/site\/wp-content\/uploads\/2014\/07\/tut_Segredos_Pagina_Harmonica_Cover_Blog.png","width":420,"height":420},{"@type":"WebSite","@id":"https:\/\/waltermattos.com\/site\/#website","url":"https:\/\/waltermattos.com\/site\/","name":"Walter Mattos","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/waltermattos.com\/site\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/waltermattos.com\/site\/#\/schema\/person\/d237be35b3af8e99d73dba176ae68175","name":"Walter Mattos","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/5dc7ec4d23186e07e90ded5d0d17b7b54a9fddb7722b5e0b8fff5bb931511f70?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5dc7ec4d23186e07e90ded5d0d17b7b54a9fddb7722b5e0b8fff5bb931511f70?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5dc7ec4d23186e07e90ded5d0d17b7b54a9fddb7722b5e0b8fff5bb931511f70?s=96&d=mm&r=g","caption":"Walter Mattos"},"description":"Walter Mattos \u00e9 um designer brasileiro apaixonado por cria\u00e7\u00e3o de marcas e identidades visuais. Em seu blog e canal no Youtube compartilha suas experi\u00eancias atrav\u00e9s de dicas, reflex\u00f5es e tutoriais relacionados a design.","sameAs":["https:\/\/waltermattos.com"],"url":"https:\/\/waltermattos.com\/site\/author\/walter\/"}]}},"jetpack_featured_media_url":"https:\/\/waltermattos.com\/site\/wp-content\/uploads\/2014\/07\/tut_Segredos_Pagina_Harmonica_Cover_Blog.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p53J0J-v2","_links":{"self":[{"href":"https:\/\/waltermattos.com\/site\/wp-json\/wp\/v2\/posts\/1924","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/waltermattos.com\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/waltermattos.com\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/waltermattos.com\/site\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/waltermattos.com\/site\/wp-json\/wp\/v2\/comments?post=1924"}],"version-history":[{"count":18,"href":"https:\/\/waltermattos.com\/site\/wp-json\/wp\/v2\/posts\/1924\/revisions"}],"predecessor-version":[{"id":1948,"href":"https:\/\/waltermattos.com\/site\/wp-json\/wp\/v2\/posts\/1924\/revisions\/1948"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/waltermattos.com\/site\/wp-json\/wp\/v2\/media\/1945"}],"wp:attachment":[{"href":"https:\/\/waltermattos.com\/site\/wp-json\/wp\/v2\/media?parent=1924"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/waltermattos.com\/site\/wp-json\/wp\/v2\/categories?post=1924"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/waltermattos.com\/site\/wp-json\/wp\/v2\/tags?post=1924"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}