{"id":940,"date":"2012-04-20T14:25:02","date_gmt":"2012-04-20T14:25:02","guid":{"rendered":"http:\/\/aulas.pro.br\/paulo\/?p=940"},"modified":"2012-06-01T11:02:21","modified_gmt":"2012-06-01T11:02:21","slug":"grids-o-que-sao-e-para-que-servem-design-blog","status":"publish","type":"post","link":"https:\/\/paulopedott.com\/paulo\/?p=940","title":{"rendered":"Grids: O que s\u00e3o e para que servem – Design Blog"},"content":{"rendered":"

Original:\u00a0Grids: O que s\u00e3o e para que servem – Design Blog<\/a>.<\/p>\n

Por\u00a0Robson Godoy<\/a>\u00a0| 20 de abril de 2012 |<\/p>\n

Um grid (ou malha) \u00e9 um dos elementos\u00a0fundamentais\u00a0do design. O grid \u00e9, por natureza, o elemento mais ordenado do Desenho, sendo \u00fatil para in\u00fameros tipos de projeto.<\/p>\n

Os grids surgiram com a proposta de serem uma ferramenta de ordem e arranjo de elentos visuais, uma forma estudada de se resolver visualmente uma composi\u00e7\u00e3o e obter coes\u00e3o no layout.<\/p>\n

\n
\"\"<\/div>\n

Cartaz de Josef M\u00fcller-Brockmann<\/p>\n<\/div>\n

Atualmente, alguns designers contestam o uso de Grids pois o consideram restritivo demais.<\/p>\n

Uma defini\u00e7\u00e3o<\/h2>\n

Mas enfim, o que \u00e9 um grid?<\/p>\n

Um grid \u00e9 uma malha\u00a0constru\u00edda\u00a0com diversos ret\u00e2ngulos, usada para ordenar elementos gr\u00e1ficos. Segundo Derek Birdsall (apud Tondreau),<\/p>\n

Os grids s\u00e3o os elementos mais mal compreendidos e mal-utilizados no layout de p\u00e1ginas. Um grid \u00e9 \u00fatil apenas se for derivado do conte\u00fado que ele pretende tratar.<\/p><\/blockquote>\n

Ou seja, s\u00f3 podemos partir para a cria\u00e7\u00e3o de um grid ap\u00f3s termos definido o tipo de projeto que estamos trabalhando. O grid\u00a0sempre\u00a0\u00e9\u00a0constru\u00eddo\u00a0ap\u00f3s termos definido o conceito do trabalho, afinal, \u201co conte\u00fado determina a estrutura que o grid ter\u00e1\u201d (TONDREAU, 2009).<\/p>\n

As maiores vantagens de se usar grids em um trabalho \u00e9 a clareza, organiza\u00e7\u00e3o e facilidade de distin\u00e7\u00e3o entre as diferentes informa\u00e7\u00f5es contidas no layout (tanto na hora de cria\u00e7\u00e3o pelo designer, quanto pelo usu\u00e1rio que consegue navegar com uma\u00a0facilidade\u00a0muito maior pelo trabalho).<\/p>\n

Partes de um grid<\/h2>\n

A imagem abaixo ilustra um exemplo de grid:<\/p>\n

\"\"<\/div>\n

Margens: espa\u00e7os negativos entre a borda da p\u00e1gina e a \u00e1rea do conte\u00fado. As margens exercem grande influencia sobre o conceito trabalhado no projeto, e por isso seu tamanho deve ser muito em estudado. Podem servir tanto como \u00e1rea de descanso para os olhos, como para chamar a aten\u00e7\u00e3o para o conte\u00fado que elas enquadram.<\/p>\n

Linhas de fluxo: alinhamentos horizontais no espa\u00e7o. N\u00e3o s\u00e3o linhas\u00a0vis\u00edveis, mas s\u00e3o usadas para guiar o sentido de leitura do usu\u00e1rio pela p\u00e1gina.<\/p>\n

Zonas especiais: grupos de m\u00f3dulos que formam campos distintos. Esses campos servem para informa\u00e7\u00f5es espec\u00edficas do projeto (imagens, publicidade, etc).<\/p>\n

M\u00f3dulos: cada pequena unidade que comp\u00f5e a malha. S\u00e3o espa\u00e7ados uniformemente e permitem in\u00fameras possibilidades de composi\u00e7\u00e3o.<\/p>\n

Marcador: elementos que auxiliam na navega\u00e7\u00e3o pelo documento, como n\u00famero de p\u00e1gina, t\u00edtulo de se\u00e7\u00e3o, etc.<\/p>\n

Coluna: \u00e1reas verticais que cont\u00e9m texto ou imagens. As colunas podem ter o mesmo tamanho ou tamanhos variados, dependendo da informa\u00e7\u00e3o que est\u00e1 sendo trabalhada e dos elementos gr\u00e1ficos a se dispor no layout.<\/p>\n

Tipos de grids<\/h2>\n

Os tipos mais comuns de grid s\u00e3o:<\/p>\n

\"\"<\/div>\n

Grid de uma coluna: geralmente usado em\u00a0textos corridos como relat\u00f3rios e livros. O foco nesse tipo de grid \u00e9 o texto.<\/p>\n

Grid de duas colunas: pode ser utilziado quando temos grande volume de texto e precisamos apresentar conte\u00fados diferentes. As colunas podem ser iguais ou diferentes, dependendo do contexto.<\/p>\n

Grid de m\u00faltiplas colunas: usualmente aplicados em sites e revistas, permitem uma flexibildiade muito maios que os anteriores. Combina colunas de larguras iguais ou diferentes (geralmente larguras diferentes).<\/p>\n

Grids modulares: permitem um controle mais refinado em trabalhos com grande n\u00famero de informa\u00e7\u00f5es, como jornais, calend\u00e1rios, etc. S\u00e3o compostos por uma combina\u00e7\u00e3o de colunas, que organizam o conte\u00fado em por\u00e7\u00f5es pequenas de espa\u00e7o.<\/p>\n

Grids\u00a0hier\u00e1rquicos: estrutura organizada em zonas de hierarquia, muitas vezes compostas por colunas horizontais.<\/p>\n

E voc\u00ea, utiliza grids em seus trabalhos? Ou tamb\u00e9m os considera restritivos demais?<\/p>\n

Refer\u00eancias Bibliogr\u00e1ficas<\/h2>\n

CARUSONE, Antonio.\u00a0The grid system.\u00a0Dispon\u00edvel em:\u00a0http:\/\/www.thegridsystem.org\/<\/a>. Acesso em 18 de abril de 2012.<\/p>\n

SAMARA, Timothy.\u00a0Elementos do design: guia de estilo gr\u00e1fico.\u00a0Tradu\u00e7\u00e3o Edson Furmankiewkiewicz \u2013 Porto Alegre: Bookman, 2010.<\/p>\n

TONDREAU,\u00a0Beth.\u00a0Criar Grids: 100 fundamentos de layout.Tradu\u00e7\u00e3o Luciano Cardinali \u2013 S\u00e3o Paulo: Editora Blucher, 2009.<\/p>\n","protected":false},"excerpt":{"rendered":"

Original:\u00a0Grids: O que s\u00e3o e para que servem – Design Blog. Por\u00a0Robson Godoy\u00a0| 20 de abril de 2012 | Um grid (ou malha) \u00e9 um dos elementos\u00a0fundamentais\u00a0do design. O grid \u00e9, por natureza, o elemento mais ordenado do Desenho, sendo \u00fatil para in\u00fameros tipos de projeto. Os grids surgiram com a proposta de serem uma […]<\/p>\n","protected":false},"author":1,"featured_media":3030,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[62],"tags":[],"class_list":["post-940","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design"],"_links":{"self":[{"href":"https:\/\/paulopedott.com\/paulo\/index.php?rest_route=\/wp\/v2\/posts\/940","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=940"}],"version-history":[{"count":3,"href":"https:\/\/paulopedott.com\/paulo\/index.php?rest_route=\/wp\/v2\/posts\/940\/revisions"}],"predecessor-version":[{"id":2056,"href":"https:\/\/paulopedott.com\/paulo\/index.php?rest_route=\/wp\/v2\/posts\/940\/revisions\/2056"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/paulopedott.com\/paulo\/index.php?rest_route=\/wp\/v2\/media\/3030"}],"wp:attachment":[{"href":"https:\/\/paulopedott.com\/paulo\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=940"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/paulopedott.com\/paulo\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=940"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/paulopedott.com\/paulo\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}