Resumo - Essências do Design - Malhas

Prévia do material em texto

Revisão de Literatura 
GODOY, Robson. Grids: o que são e para que servem. De-
sign Blog. Design Gráfico. 20 de abril de 2012. Disponível 
em <http://design.blog.br/design-grafico/grids-o-que-sao-
e-para-que-servem>. Acesso em 03 de abril de 2013. 
 
UMA DEFINIÇÃO 
 
Um grid é uma malha construída com diversos retângulos, 
usada para ordenar elementos gráficos. 
 
(...) só podemos partir para a criação de um grid após 
termos definido o tipo de projeto que estamos trabalhan-
do. O grid sempre é construído após termos definido o 
conceito do trabalho, afinal, “o conteúdo determina a es-
trutura que o grid terá” (TONDREAU, 2009). 
 
PARTES DE UM GRID 
 
Margens: espaços negativos entre a borda da página e a 
área do conteúdo. (...) Podem servir tanto como área de 
descanso para os olhos, como para chamar a atenção para 
o conteúdo que elas enquadram. 
 
 2 
Linhas de fluxo: alinhamentos horizontais no espaço. Não 
são linhas visíveis, mas são usadas para guiar o sentido de 
leitura do usuário pela página. 
Zonas especiais: grupos de módulos que formam campos 
distintos. Esses campos servem para informações específi-
cas do projeto (imagens, publicidade, etc). 
Módulos: cada pequena unidade que compõe a malha. São 
espaçados uniformemente e permitem inúmeras possibili-
dades de composição. 
Marcador: elementos que auxiliam na navegação pelo do-
cumento, como número de página, título de seção, etc. 
Coluna: áreas verticais que contém texto ou imagens. As 
colunas podem ter o mesmo tamanho ou tamanhos varia-
dos, dependendo da informação que está sendo trabalha-
da e dos elementos gráficos a se dispor no layout. 
 
TIPOS DE GRIDS 
 
Grid de uma coluna: geralmente usado em textos corridos 
como relatórios e livros. O foco nesse tipo de grid é o tex-
to. 
 
Grid de duas colunas: pode ser utilizado quando temos 
grande volume de texto e precisamos apresentar conteú-
 
 3 
dos diferentes. As colunas podem ser iguais ou diferentes, 
dependendo do contexto. 
 
Grid de múltiplas colunas: usualmente aplicados em sites e 
revistas, permitem uma flexibildiade muito maior que os 
anteriores. Combina colunas de larguras iguais ou diferen-
tes (...). 
 
Grids modulares: permitem um controle mais refinado em 
trabalhos com grande número de informações, como jor-
nais, calendários, etc. São compostos por uma combinação 
de colunas, que organizam o conteúdo em porções peque-
nas de espaço. 
 
Grids hierárquicos: estrutura organizada em zonas de hie-
rarquia, muitas vezes compostas por colunas horizontais. 
 
 
 4 
Revisão de Literatura 
ANÁLISE Geométrica. Disponível em 
<http://www.ocw.unicamp.br/fileadmin/user_upload/curso
s/au909/CDgeoHM/novaversao/criacao3.htm>. Acesso em 
01 de novembro de 2012. 
 
As malhas (...) podem ser utilizadas na estruturação da 
composição. 
 
As malhas estruturais auxiliam o desenhista a controlar o 
espaçamento e a distribuição dos módulos pela composi-
ção. 
 
Na maioria dos casos a malha estrutural é invisível, portan-
to, apenas conceitual. 
 
 
 5 
Revisão de Literatura 
MÓDULO IV: elaboração. INTERAD – Interfaces Inte-
rativas digitais. Disponível em 
<http://www.nuted.ufrgs.br/interad/mod4_estrutural.html
>. Acesso em 01 de novembro de 2012. 
 
p. 4 
MALHA ESTRUTURAL 
 
A malha estrutural, ou wireframe, trata-se da composição 
inicial (...) em módulos onde os elementos (...) serão dis-
postos, observando-se sua relevância, e agrupados con-
forme sua natureza. 
 
A malha estrutural (...) reflete muito dos requisitos de pro-
jeto estabelecidos. 
 
(...) os wireframes consistem em esboços preliminares (...) 
que mostram o esqueleto do sistema (...) independente-
mente do design visual final (...) 
 
p. 5 
MALHA CONSTRUTIVA 
 
 6 
A malha ou grade de construção é (...) um sistema modu-
lar que serve de base para a construção do leiaute (...). 
 
Para Samara (...) a grade “consiste num conjunto específi-
co de relações de alinhamento que funcionam como guias 
para a distribuição dos elementos num formato”. 
 
 
 7 
Revisão de Literatura 
SEBASTIANY, Guilherme. Por que fazer malhas estru-
turais? Disponível em 
<http://www.sebastiany.blog.br/index.php/porque-fazer-
malhas-construtivas>. Acesso em 04 de abril de 2013. 
 
 (...) a execução de muitas das peças tridimensionais para 
sinalização ainda demandam projeto executivo de suas 
partes e moldes. (...) Esse ao meu ver é o primeiro argu-
mento em favor das Malhas Construtivas. 
 
(...) o segundo principal motivo para se desenvolver uma 
Malha Construtiva é CONTROLE. E aqui a tecnologia é uma 
faca de dois gumes. Se por um lado o arquivo digital pro-
porciona uma facilidade de aplicação, possibilita também 
uma facilidade de alteração. 
 
(...) a Malha Construtiva passa a assumir um papel de con-
trole e verificação das proporções do desenho. Como veri-
ficação, serve para detectar erros através da comparação 
(...) e verificar se existe ou não problemas de reprodução. 
Como controle, serve como documento legislador, que re-
ge o uso da marca. 
 
 8 
O quarto e principal ponto que justifica o desenvolvimento 
de uma malha construtiva, é que (...) constitui uma opor-
tunidade para um último estudo de aperfeiçoamento do 
desenho através do detalhamento e do estudo de propor-
ção e geometria da marca. 
 
 
 9 
Revisão de Literatura 
SAMARA, Timothy. Grid: construção e desconstrução. 
São Paulo: Cosac Naify, 2007. 208 p. 
 
p. 22-23 
FUNDAMENTOS DO GRID 
 
Construir um grid para um determinado projeto significa 
destrinchar cuidadosamente seu conteúdo específico, em 
termos das qualidades visuais e semânticas (...) Uma linha 
após a outra cria um parágrafo. Já não é uma simples li-
nha, mas uma forma com um limite sólido e um limite ma-
leável. O limite sólido cria uma referência à página, e o 
parágrafo conforme se alonga no comprimento, se conver-
te numa coluna (...). As colunas repetidas ou de propor-
ções variadas criam um ritmo de espaços entrelaçados (...) 
Os vazios entre os parágrafos, as colunas e as imagens 
ajudam a orientar o movimento dos olhos pelo conteúdo, 
tanto quanto a massa densa das palavras cercada por es-
ses vazios. 
 
Os alinhamentos entre massas e vazios estabelecem liga-
ções ou separações visuais entre eles. Uma composição 
passiva, em que os intervalos entre os elementos são re-
 
 10 
gulares, cria um campo de textura estática. Ao introduzir 
mudanças, como um maior intervalo entre linhas ou um 
peso maior, o designer cria um destaque na uniformidade 
da textura A mente percebe esse destaque como algo im-
portante. Criar importância estabelece uma ordem, ou hie-
rarquia, entre os elementos da página, e cada mudança 
sucessiva introduz uma nova relação entre as partes. As 
mudanças de ênfase dentro da hierarquia são indissociá-
veis do efeito que provocam sobre o sentido verbal. Um 
designer tem opções limitadas de mudar o corpo, o peso, a 
posição e o espaçamento do tipo para afetar a hierarquia 
e, assim, a sequência da informação percebida pelo obser-
vador. O grid organiza essas relações de alinhamentos e 
hierarquias numa ordem inteligível que pode ser repetida e 
é compreensível para os outros. 
 
p. 24-25 
ANATOMIA DE UM GRID: as partes básicas de uma página 
 
Um grid consiste num conjunto específico de relações de 
alinhamentos que funcionam como guias para a distribui-
ção dos elementos num formato. Todo grid possui as 
mesmas partes básicas, por mais complexo que seja. Cada 
parte desempenha uma função específica; as partes po-
 
 11 
dem ser combinadas segundo a necessidade, ou omitidas 
da estrutura geral a critério do designer, conforme elas 
atendam ou não às exigências informativas do conteúdo. 
 
O projeto de um grid depende de duas fases de desenvol-
vimento. Primeiro, o designer tenta avaliar as característi-
cas informativas e as exigênciasde produção. 
Além disso, o designer deve prever eventuais problemas 
que podem surgir ao diagramar o conteúdo dentro do grid, 
como títulos compridos demais, cortes de imagens ou es-
paços vazios em alguma seção por falta de conteúdo. 
 
A segunda fase consiste em dispor o conteúdo de acordo 
com as diretrizes dadas pelo grid. (...) o grid, mesmo sen-
do um guia preciso, nunca pode prevalecer sobre a infor-
mação. Sua tarefa é oferecer uma unidade geral sem des-
truir a vitalidade da composição. 
O designer não deve ter medo de seu grid e deve testá-lo 
até o limite. Um grid realmente bom cria infinitas possibili-
dades de exploração. 
 
Cada problema de design é diferente e requer uma estru-
tura de grid que trate de suas especificidades. O primeiro 
passo é avaliar qual tipo de estrutura 
 
 12 
 
 
 
p. 120-121 
EXPLORANDO OUTRAS OPÇÕES 
 
(...) existem várias outras maneiras de organizar a infor-
mação e as imagens. A decisão de usar um grid sempre 
depende da natureza do conteúdo num determinado proje-
to. 
 
Às vezes, o conteúdo tem uma estrutura interna própria, 
que nem sempre o grid consegue esclarecer; às vezes o 
 
 13 
conteúdo deve ignorar totalmente a estrutura para criar 
tipos específicos de reações emotivas no público-alvo; às 
vezes o designer simplesmente que um envolvimento inte-
lectual mais complexo do público, como parte de seu con-
tato com o objeto. 
 
 
 14 
Revisão de Literatura 
GOMES, L.V.N.; MEDEIROS, L.M.S. Ordem e arranjo em 
desenhos industriais: malhas e grelhas, revisão e retoma-
da. In: GRAPHICA, 2005. 
 
p. 3-4 
REVISANDO A MALHA PARA DESENHO INDUSTRIAL 
 
Em inglês, grid possui denotações diretamente relaciona-
das ao trabalho do desenhador industrial, engenheiro ou 
arquiteto: “um sistema básico de linhas de referência para 
uma região, consistindo de linhas retas, intersecionadas 
em ângulos de 90º, computadas pelo estabelecimento de 
sistema de correção de escalas para medição de distân-
cias; uma rede de linhas de horizontais e perpendiculares, 
uniformemente espaçadas, para a locação de pontos em 
mapa, carta náutica ou fotografia aérea por meio de sis-
tema de coordenadas; sistema retangular de coordenadas 
usadas para locação dos principais elementos de um pla-
no”. 
 
Em português-brasileiro uma das denotações da palavra 
malha é: “cada uma das voltas ou nós formados pelo fio 
de seda, lã, linho ou qualquer fibra têxtil, quando entran-
çados os tecidos por certos processos (nas meias, nas re-
 
 15 
des de pescar, etc.)”. Daí poder-se dizer que uma rede – 
artefato de pesca feito com fio que forma malhas, mais ou 
menos largas, que deixam passar a água e retêm os peixes 
– tem uma malha de “x” nós. Com base nessa denotação, 
conotaríamos o termo malha como: Cada uma das estrutu-
ras gráficas elementares resultantes, em geral, de linhas 
retas perpendiculares, formando módulos geométricos com 
função: 
 Estrutural (definição dos limites matemáticos da área 
de trabalho gráfico); 
 filosofal (delimitação da proporção para ordenação do 
diagrama); 
 diagramacional (representação das relações de compo-
sição entre os elementos da informação a serem confor-
mados no projeto). 
 
p. 6 
No artigo “Retículas, grelhas e malhas: noções fundamen-
tais e aplicações” (...) explicamos que há três tipos de ma-
lhas, cujas funções permitem a ordenação, a composição e 
a apresentação de idéias que devem ser representadas, 
graficamente, ao longo de um projeto. (...) malha estrutu-
ral (...) malha filosofal (...) malha diagramacional. 
 
 
 16 
Revisão de Literatura 
GOMES, L.V.N.; MEDEIROS, L.M.S. Retículas, grelhas e 
malhas: noções fundamentais e aplicações. In: GRAPHICA, 
2005. 
 
p. 3 
NOÇÕES FUNDAMENTAIS DE “REPERTÓRIO” GRÁFICO-
FORMAL 
 
A malha estrutural é a primeira etapa do desenho de pro-
jeto de produto industrial. Todo e qualquer produto, fruto 
da indústria (industrialidade e industriosidade) humana 
deverá ser, tanto no plano teórico (filosófico) quanto no 
plano prático (matemático), inserido em uma malha estru-
tural. 
 
p. 4 
A malha estrutural, então, seria a base matemática 
para todo o desenvolvimento do trabalho em Desenho. 
 
Malha Filosofal 
 
(...) por que filosofal? Porque tem a ver com definição de 
proporções da forma e de produto e estes dois termos, 
 
 17 
têm tudo a ver com estética industrial, logo, Desenho In-
dustrial. A noção de “forma” pode ser encontrada nos se-
guintes sentidos: (i) filosófico geral; (ii) lógico; (iii) episte-
mológico; (iv) estético. A noção estética não é menos im-
portante do que as três noções anteriores. Na estética é 
comum distinguir entre a forma e o conteúdo. O termo 
“forma” é usado para designar a ordem em que estão dis-
postos os elementos num conjunto – para falar, por exem-
plo, de simetria. Neste caso, a forma não se contrapõe ao 
conteúdo. 
 
p. 6 
Figura 2: Princípios de movimentos para composição da malha 
filosofal baseados em Ostrower (1983); Ribeiro (1983); Lidwell 
(2003) 
 
 
Lidwell et al. (2003) dão o nome de Diagrama de Guten-
berg ao conjunto de elementos gráficos que, didaticamen-
te, são utilizados para explicar orientações e direções es-
paciais. Eles dizem também que o diagrama que descreve 
o padrão geral de movimentos dos olhos quando se depara 
 
 18 
com a distribuição de informação homogênea é também 
conhecido por "Regra de Gutenberg" ou "Padrão Z de Pro-
cessamento". 
 
p. 5-6 
Ostrower ensina (1983, p.53-54) que “em realidade, cada 
forma possui dupla estrutura espacial. As duas estruturas 
ocupam a mesma área física e perfazem a mesma tonali-
dade visual. Coexistem no espaço da forma, mas não coin-
cidem nas qualificações”: (i) Estrutura geométrica – perce-
bem-se centros e eixos centrais fixos. É sempre uma estru-
tura no sentido simétrico, cujas qualificações estáticas e 
dinâmicas são iguais em ambos os lados. (ii) Estrutura vi-
sualperceptiva – percebe-se também o centro, mas os ei-
xos centrais são relativos (pelo fato do núcleo perceptivo 
ter uma posição relativa). Essa segunda estrutura é assi-
métrica, cada lado tendo um valor diferente e transmitindo 
qualificações diversas: o lado esquerdo superior funciona 
como entrada, dando início a um desenvolvimento formal; 
o lado de cima confere leveza; o lado direito, ação e ener-
gia, o lado de baixo, peso visual. “Os dois últimos, em con-
junto, sustentam o clímax do desenvolvimento formal”. 
[...] “No contexto geométrico vemos o equilíbrio mecânico 
da forma; no contexto visual-perceptivo, essas partes não 
 
 19 
são iguais, mas equivalentes se compensam; assim sendo 
de ordem unicamente funcional, o equilíbrio adquire cará-
ter orgânico”. 
 
Ostrower denomina área de "ação e energia" [o] quadran-
te inferior direito (...) Fayga chama de "peso visual/base" 
[o] canto esquerdo inferior (...) Às diagonais que atraves-
sam retângulo no diagrama Ostrower chama de "desenvol-
vimento". (...) Ostrower nomeia o ponto resultante do en-
contro dos eixos vertical e horizontal no retângulo de “cen-
tro geométrico”; e aos dois pontos localizados um pouco 
acima, de "centros perceptivos". 
 
Escolhemos a clássica proporção, baseada no retângulo 
áureo. Note-se que nesse desenho se pode encontrar mó-
dulos diagramacionais distintos, para diversos tipos de a-
presentações gráficas. Cabe-nos destacar palavras de Vi-
trúvio – “Proporção significa a harmonia das partes com-
ponentes do todo, de que derivam as leis de simetria”. 
 
 
 20 
 
Figura 3: malha filosofal (perceptiva) para escolha de módulos 
diagramacionais 
 
 
p. 7-8 
Malha Diagramacional 
 
(...) desse modo se pode dispor os elementos de modo 
clássico e com alta qualidade informativa e educacional. 
 
Figura 4. Construção da malha diagramacional, com módulo de 
36mm x 21 mm. 
 
 
 21 
p. 9 
 
Figura 5. Adequação do texto à malhadiagramacional, hierar-
quizando informação. 
 
 
 22 
Revisão de Literatura 
GOMES, L.V.; MEDEIROS, L.S.; JUNIOR, M.B.; TEIXEIRA, 
R.C. Ordem e arranjo no desenho operacional. In: GRA-
PHICA, 2011, Rio de Janeiro. 
 
p. 5 
SIMETRIA DINÂMICA COMO PROCEDIMENTO AUXILIAR 
NA COMPOSIÇÃO 
 
O desenhador deve dominar os elementos básicos de 
composição e de definição matemática para a obtenção de 
formas harmônicas, proporcionadas e simétricas. 
 
No projeto de um produto qualquer, a ser arranjado num 
dado espaço, deve-se dispor os elementos de modo que se 
crie uma relação de interdependência com as outras partes 
do arranjo, visando o equilíbrio da composição. Esses pro-
cedimentos contribuem para a formação de unidade, sínte-
se e coerência no produto. 
 
 
 
 23 
p. 6 
Figura 4. A MƐ permite a definição das margens ESD e I para os 
retângulos harmônicos a partir do quadrado ou, nessa condição 
gráfica, o “Quadrato” (Q= 1:1) 
 
 
Há diversas maneiras de se calcular a divisão de áreas 
harmônicas em retângulos. A simetria dinâmica, segundo 
Ribeiro (2007) consiste em encontrar os quatro pontos 
originados pelo cruzamento de perpendicu-lares traçadas 
dos vértices às diagonais do retângulo (Figura 5) e, a par-
tir daí, traçam-se verticais e horizontais que dão origem a 
várias áreas de dimensões diversas em harmonia constan-
te. O retângulo a partir do qual Ribeiro realiza os traçados 
é o √3 (raiz de 3), ou Sixton, na denominação de Wolf-
gang von WERSIN, no livro de 1956, Das buch vom re-
chteck: Gesetz und gestik des raumlichen. 
 
 
 24 
A Simetria Dinâmica é construída visando equilíbrio dinâ-
mico, que, diferentemente do equilíbrio estático, “sugere 
mais vida e movimento” (HAMBIDGE, 1967, p. xv). 
Para Hambidge (1967), a simetria é a maneira elementar 
de se conseguir harmonia, e a decomposição de uma man-
cha gráfica em seus retângulos, evidencia os esquemas 
simétricos que podem ser usados para definir os arranjos. 
Esse sistema auxilia o desenhador a, por exemplo, definir 
áreas a serem utilizadas num produto gráfico, num artefa-
to, ou até mesmo na apresentação de pranchas de proje-
to. 
 
p. 7 
Figura 5. O Sixton e seus pontos harmônicos para composição 
gráfica 
 
O procedimento (...) para encontrar pontos harmônicos em 
retângulos com razão menor que 1:2 usando o compasso 
como ferramenta básica consiste em: i. traçar as diagonais 
do retângulo, com a ponta seca do compasso em um vérti-
ce qualquer e a ponta molhada, no vértice adjacente de 
 
 25 
maior distância, tornando assim, a abertura do compasso 
igual ao maior lado do retângulo; ii. traçar um arco que 
cortará uma das diagonais em um ponto A; iii. projetar o 
ponto A para o lado do retângulo, originando o ponto B; 
traçar outro arco com a ponta seca no vértice adjacente ao 
anterior de menor distância e a ponta molhada no ponto B. 
Onde o arco cortar a diagonal, formar-se-á o ponto C, que 
será um ponto áureo do retângulo; iv. A partir do ponto C, 
existe um sem-número de possibilidades e alternativas 
para dividir harmonicamente a área do retângulo. Perpen-
diculares traçadas a partir ponto C dão origem ao traçado 
primário (Figura 6). 
 
p. 8 
 
Figura 6. Processo para a formação do traçado primário, con-
forme a Simetria dinâmica 
 
 26 
 
Dividindo a área do retângulo dessa maneira, formam-se 
retângulos harmônicos que auxiliam a composição. Esse 
processo pode ser repetido em qualquer retângulo com 
razão menor que 1:2. Além de auxiliar a configuração for-
mal de artefatos, a Simetria Dinâmica baseada em arcos é 
eficiente para auxiliar o desenhador na geração de alterna-
tivas de uma malha diagramacional (...). 
 
 
 27 
Revisão de Literatura 
HULBURT, Allen. Layout: o design da página impres-
sa. 2 ed. São Paulo: Nobel, 1986. 
 
p. 82 
DIAGRAMAS E SISTEMAS 
 
(...) um diagrama (grid) é uma solução planejada para de-
terminados problemas (...). O diagrama de um designer 
organiza um conteúdo específico em relação ao espaço 
que ele irá ocupar. Quando funciona, o diagrama permite 
ao designer criar diferentes layouts contendo uma varieda-
de de elementos, sem, todavia, fugir da estrutura prede-
terminada. 
 
(...) o diagrama proporcionará um sentido de sequência, 
de unidade, mesmo que haja variações consideráveis no 
conteúdo de cada unidade. 
 
Ao determinar as melhores proporções de um diagrama, o 
designer pode depender inteiramente da sua intuição ou 
pode basear seu sistema em regras estabelecidas de divi-
são do espaço, entre as quais se incluem o quadrado, o 
duplo quadrado, a divisão áurea. 
 
 28 
p. 83 
O diagrama tem muitos defensores e muitos detratores. 
Usado com habilidade e sensibilade, pode produzir layouts 
de bom efeito e funcionais. (...) Todavia, nas mãos de um 
designer não muito habilidoso, pode se converter numa 
autêntica camise-de-força, resultando em layouts duros, 
de rígido formato. 
 
Nas palavras do suíço Josef Müller-Brockmann, “o diagra-
ma torna possível reunir todos os elementos do design (...) 
de uma forma harmônica. É um processo de disciplinamen-
to do design”.