Implementação de design de interiores de uma rede modular. Grade modular

Como começa o design do logotipo? Está pensando na ideia de uma placa gráfica? Ou seleção de fonte? Ou talvez de uma grade modular? É difícil dizer, uma vez que abordagens diferentes são necessárias em casos diferentes. No entanto, muitos designers que já têm uma ideia aproximada de como um logotipo deve ser, começam criando uma grade modular. O uso da grade permite criar um logotipo harmonioso, geometricamente verificado e bem organizado, que pode ser reproduzido em qualquer tamanho.

A grade modular é uma ferramenta muito útil no arsenal de um designer. Especialmente para iniciantes - mesmo dominando os fundamentos do trabalho com guias, você pode evitar muitos erros de design. Na maioria das vezes, uma grade quadrada regular com células de um determinado tamanho é usada, mas isso não significa de forma alguma que seja necessário usar essa opção. A estrutura da grade para a criação de um logotipo pode ser qualquer, por exemplo, pode ser uma combinação de guias horizontais, verticais e inclinadas que interagem com círculos de diferentes diâmetros. Qual será a grade modular, o próprio designer decide. Se você precisa criar um logotipo estrito e simples com base nos princípios da harmonia geométrica, não pode prescindir de uma grade modular. Só assim será possível criar um logotipo único, no qual a largura das letras, o raio de curvatura dos elementos e a distância entre os personagens obedecerão a determinados padrões.

Sim, essa abordagem de design de logotipo pode ser considerada muito mecânica, mas os logotipos construídos com base em uma grade modular parecem mais "corretos" - afinal, eles são criados usando certos princípios. Além disso, não se esqueça que, uma vez desenvolvido, um logotipo será reproduzido por outros designers e, se eles souberem como é a grade modular, será muito mais fácil para eles lidar com a tarefa.

As grades modulares são usadas em uma ampla variedade de designs. As regras básicas para a construção de grades foram formadas há muito tempo - os primeiros sinais do uso de guias podem ser vistos, por exemplo, em manuscritos antigos. As grades foram amplamente utilizadas na impressão e, com o advento da era do computador, elas encontraram seu caminho naturalmente para o design da web.

O mais interessante é que muitas pessoas, não apenas designers, seguem inconscientemente as regras para a construção de grades modulares. Por exemplo, os fotógrafos, tentando obter uma foto verificada em termos de composição, usam a regra dos terços ou a regra da proporção áurea. Mesmo a expressão clássica "o horizonte está obstruído" significa que o fotógrafo "usou" incorretamente as guias horizontais. Assim, os designers de logotipos que não gostam de usar uma grade, dizendo que isso limita sua criatividade, devem estar atentos que qualquer objeto visual que tenha uma composição é criado usando uma grade modular. Mesmo que tenha acontecido completamente por acidente.

VANTAGENS DA GRADE MODULAR

O tipo de malha a ser escolhido depende de muitos motivos - apenas o caso específico é importante. Ao mesmo tempo, é importante não esquecer que o designer deve se sentir confortável trabalhando neste ambiente. Se o uso de uma grade é incômodo e não beneficia o logotipo, então sua estrutura precisa ser revisada. Quadros invisíveis podem realmente atrapalhar, então você precisa ter bastante calma sobre o fato de que alguns elementos violam uma organização rígida. E isso é completamente normal - afinal, os símbolos com os quais o logotipo é digitado têm larguras diferentes. Em logotipos que usam cirílico, é muito difícil aderir aos princípios geométricos. O alfabeto cirílico contém letras que podem levar o designer ao desespero. Se olharmos para a mesma letra U, fica claro que vemos um desenho completamente ridículo, que não se harmoniza bem com o contorno de outras letras tiradas do alfabeto latino. E a mulher parecida com um inseto? Isso geralmente é um pesadelo para qualquer designer de logotipo. Mas você tem que trabalhar com o que é, e não há tempo para uma grade modular. Esses símbolos ainda vão além dos limites dos guias e você precisa chegar a um acordo com isso.

POR QUE VALE A PENA USAR A GRADE

Um logotipo pode ser criado sem o uso de uma grade modular. Uma fonte pronta é tirada, o nome da marca é digitado e pronto. Para uma sinalização gráfica, muitas vezes você também não precisa trabalhar com guias. Existem muitos desses logotipos e isso geralmente não afeta o conhecimento da marca de forma alguma. Por exemplo, o logotipo do Google está em Catull. A designer Ruth Kedar apenas pintou as letras em cores diferentes e acrescentou sombras.

Mas se um logotipo for criado do zero, o uso de guias pode ser muito útil para um designer. A grade ajuda você a focar e prestar mais atenção à estrutura organizacional do logotipo. O uso de uma grade modular permite que você se concentre e crie um logotipo que seja simples, mas consistentemente relevante. Se você olhar os logotipos de empresas como Apple, Shell ou Nike, verá que foram criados usando formas simples e clássicas.

Usando a grade, você pode criar um logotipo versátil que ficará ótimo em um cartão de visita e em um banner enorme. Ao mesmo tempo, guias, círculos e curvas não limitam de forma alguma o voo do pensamento do designer, pelo contrário, tornam o seu pensamento mais flexível. Às vezes, você pode ver muito mais opções de design nas linhas da grade - as células parecem sugerir como você pode mover os símbolos para que pareçam harmoniosos. Ou seja, ao trabalhar com uma grade, o designer trabalha de forma mais eficiente com o espaço disponível.

QUANDO VOCÊ NÃO PRECISA USAR A GRADE

Em geral, como observado acima, em qualquer logotipo criado usando a composição básica, você pode aplicar uma grade modular que mostrará exatamente como foi criado. No entanto, existem vários argumentos contra o uso de guias.

A grade pode restringir a criatividade, pois o designer se sente "preso" aos guias. Tentando não ultrapassar os limites estabelecidos, tal designer experimenta desconforto, o que não contribui para a criação de um logotipo de alta qualidade.

Criar uma grade pode consumir muito tempo, especialmente se o logotipo for complexo. Isso é frequentemente encontrado por designers novatos que ainda não estão familiarizados com as leis da composição e, portanto, não podem criar uma malha rapidamente.

Como a malha é de natureza matemática, é fácil se confundir com todas essas formas e, como resultado, esquecer a ideia principal. Você deve sempre lembrar que um logotipo de sucesso não é apenas um conjunto de formas geométricas, mas sua combinação harmoniosa. A tendência de alguns designers de "seguirem as regras" muitas vezes leva ao fato de eles obterem um logotipo sem rosto e totalmente ruim.

SAÍDA

Todos os designers de logotipo trabalham de maneira diferente. Algumas pessoas preferem esboçar no papel primeiro, outras imediatamente começam a desenhar o logotipo em um computador. Alguns começam construindo uma malha modular, enquanto outros preferem gerar uma imagem primeiro e só depois torná-la mais coerente. Portanto, não se pode dizer de forma inequívoca que uma grade modular é uma obrigação na hora de criar um logotipo. No entanto, projetar um logotipo pode ser comparado a construir um edifício. Uma casa bem projetada vai durar mais, porque é baseada em um projeto bem pensado. O mesmo vale para o logotipo: se for uma identidade corporativa, o rosto de uma marca, então o melhor é usar uma grade modular - afinal, o logotipo será usado pela empresa por muitos anos. E será muito bom se estiver composicionalmente correto. Bem, para qualquer site que é criado, como dizem, para a alma, um logotipo digitado em qualquer fonte bonita é bastante adequado. E a grade modular não é necessária neste caso.

Não faz muito tempo, enquanto trabalhava em mais uma aula do curso “Design Gráfico. Básico ”(com lançamento programado para o início de janeiro), percebi que o tópico de uso e construção de grades modulares não é abordado em muitos lugares.

Há muitas informações sobre o que é e para que serve uma grade modular, mas muito poucas sobre como construí-la e quais regras seguir. Portanto, decidi que a entrada de hoje terá um foco prático e tentarei cobrir este tópico da forma mais clara possível.

Portanto, uma grade modular é o layout do seu trabalho, uma forma de organizar e alinhar os elementos. É a espinha dorsal da solução composicional e serve como meio de organizar não apenas as partes constituintes da obra, mas também o espaço livre.

A grade pode nos ajudar a resolver as tarefas atribuídas e ser parte da solução. O exemplo mais marcante é a interface do Windows Phone:

Para quem precisa de uma parte teórica mais detalhada da questão, existe a oportunidade de usar a busca ou se inscrever no curso e receber uma carta correspondente, onde isso é descrito com detalhes suficientes, e vamos direto para a prática.

Primeiro, devemos decidir para que precisamos uma grade modular. Fazemos um site ou editamos uma revista, ou a capa de um livro, ou algo mais? Dependendo do tipo de atividade, devem ser destacados os principais elementos estruturais. Freqüentemente, o tamanho de um módulo é determinado por um desses elementos, por exemplo, o logotipo, a posição do menu no site, etc. No layout, o tamanho mínimo é determinado pelo tamanho legível em uma situação particular.

Para maior clareza, darei um exemplo de grade modular de um periódico impresso. Se formarmos uma revista, os elementos estruturais podem ser título, subtítulo, texto, ilustrações. Normalmente existem diferentes tipos de artigos em revistas, onde o papel da parte do texto pode variar. Nesses casos, para tornar a grade mais flexível, uso de 5 a 7 módulos (horizontalmente):

A combinação de módulos pode ser realizada em quase qualquer formato conveniente para você:

Na verdade, quanto menor o módulo da grade, mais flexível ela será sem perder a proporcionalidade. Mas muitas pessoas acham inconveniente trabalhar com grades se o tamanho de seu módulo tende para o tamanho da distância entre os módulos. Essa grade é deslumbrante aos olhos e é fácil se confundir com ela, especialmente para um iniciante:

Pode haver muitas opções para construir uma grade modular, aqui você é limitado apenas pelos desejos do cliente e sua imaginação. Não se esqueça que as grades modulares não precisam ser verticais, também podem ser construídas na diagonal, em um determinado ângulo, etc.

No caso de sites, o número ótimo de colunas é considerado 12, 16 e 24, o que se deve às peculiaridades do layout do site e ao uso dos recursos do framework. Considero que a altura mínima do módulo para a web é de 20px, o que está relacionado ao tamanho ideal da fonte (12-14pt) e sua legibilidade.

Agora é hora de falar sobre o lado técnico do problema.

Criando uma grade modular em

  • A primeira e mais fácil maneira é ativar a grade do próprio editor gráfico (Ctrl + ’) e, guiado por ela, definir as guias. Vai demorar muito e com grande probabilidade de erros.
  • Instale plugins especiais para Photoshop ( GuideGuide , Padrão de grade modular , GridMaker 2).
  • Baixe um modelo pronto de um dos geradores de grade gratuitos, como 960.gs, Golden Grid, 1Kb Grid, Simple Grid. Defina os parâmetros desejados e clique em "GERAR".

Na verdade, existem muitos serviços para a criação de grades, inclusive para sites de "borracha". Eles podem ser encontrados facilmente usando a pesquisa, então não vejo razão para listá-los todos no artigo. Esses serviços são ótimos auxiliares para iniciantes.

Criando uma grade modular em

Ao contrário do Photoshop, o InDesign tem suas próprias ferramentas de criação de grade modular. No menu Layout você deve selecionar um item Crie guias e na caixa de diálogo insira os parâmetros de que você precisa:

Esta ferramenta possui configurações bastante flexíveis, por isso não será difícil criar a estrutura desejada. A malha é melhor feita em Pagina principal para evitar repetir o procedimento para cada página.

Criando uma grade modular em

  • O primeiro método (semelhante ao Photoshop) é ativar a grade do próprio editor gráfico e, guiado por ela, definir as guias. Também é possível fazer um guia de qualquer formato, o que ajudará na organização de uma grade inclinada.
  • Baixe modelos de grade prontos. Onde - a pesquisa aparecerá. Você pode encontrar muitos deles na Internet.

Espero que o tópico das grades modulares tenha se tornado mais próximo e claro para você. Certifique-se de praticar sua construção. Eu entendo perfeitamente que esta é uma ocupação muito chata, mas vale a pena. As grades desenvolvem seu senso de proporção, permitindo que você veja melhor quaisquer imprecisões de alinhamento posteriormente.

Um artigo extremamente útil sobre as regras para a criação de um layout de revista! Eu recomendo a leitura.

Antes de falarmos sobre a grade modular, vamos entender o que é um módulo.

MóduloÉ uma imagem, tamanho ou proporção de repetição múltipla. É a estrutura (moldura, modelo) da disposição dos elementos gráficos nas páginas. A base da grade modular é um “módulo”, ou seja, o espaçamento da grade principal, que é visualmente determinado pela largura e altura da gaiola (unidade modular). As células são construídas usando colunas verticais e linhas horizontais.

A grande maioria das grades é baseada no tamanho do papel usado como base para a publicação. Como você pode imaginar, as colunas e a grade básica de páginas são criadas usando os comandos automáticos do programa. A grade pode ser muito diversa, dependendo do propósito da publicação e da ideia do designer.

A grade é criada para toda a distribuição, não para cada página separadamente. Isso é feito para que toda a distribuição da revista seja percebida como um todo único, e não dividido em partes esquerda e direita, e toda a publicação não pareça um fichário de páginas heterogêneas. A grade de reversão pode ser composta por 2, 3, 4, etc. larguras de coluna iguais e desiguais.

Colunas de largura igual são criadas na janela de criação de documentos ou no painel "Margens e colunas". Se precisarmos definir 3 colunas, direcionamos o número 3 para o campo correspondente, etc.

Mas e se, de acordo com nosso plano, nem todas as colunas tiverem a mesma largura? Por exemplo, e se o texto e as imagens estiverem em 2 colunas largas e as informações explicativas estiverem em uma coluna lateral estreita?

Neste caso, nossa grade modular será construída com base em Diversos o número de colunas automáticas do programa. Por exemplo, se definirmos 8 colunas automáticas para uma página, nossas 2 colunas largas (para texto e imagens) ocuparão 3 colunas automáticas cada, e uma coluna lateral estreita será construída com base em 2 colunas automáticas.

Além da distribuição por colunas, a grade modular também usa réguas horizontais básicas... Linhas de texto e bordas de elementos gráficos são ancoradas a eles para ordenação visual e alinhamento.

Títulos pode caber em uma única coluna ou abranger várias colunas. Não é incomum que o título seja o único elemento de toda a página. Tudo depende da ideia criativa e da preferência pessoal do designer.

Da mesma forma, imagens gráficas (fotografias ou ilustrações) podem ocupar uma ou várias colunas, ou podem preencher toda a propagação. Uma técnica bastante comum é quando uma fotografia ocupa uma parte da propagação em sua totalidade e se estende ligeiramente para a segunda parte, a fim de unir visualmente as duas partes.

-

A grade modular não é necessariamente construída a partir de linhas perpendiculares. Às vezes o designer decide inclinar a malha ou até mesmo dar-lhe uma forma original.Se você quiser ir além do normal, saia!
Apenas tente não transformar seu trabalho em um trabalho de Sísifo em busca da originalidade. Imagine como seria digitar 40-50 páginas com uma grade inclinada ou ondulada ...

-

Portanto, antes de obter o original, pergunte-se: é realmente tão necessário e para quê? Se toda a revista for construída sobre uma grade inclinada, invertida ou ondulada, então, provavelmente, tal originalidade surpreenderá o leitor não mais do que durante as primeiras 5 páginas, e então se tornará irritante.

Porque? Porque o leitor deseja antes de mais nada ler e assimilar informações interessantes com calma, e não se distrair com nenhum excesso do gênio do designer.

Mas se o layout original aparecer apenas em uma seção específica da revista, não será apenas interessante, mas também apropriado, pois dará à seção um visual elegante e reconhecível.

“A grelha é um sistema de ajuda, mas não é uma garantia, tem apenas uma série de utilizações possíveis, e cada designer pode encontrar uma solução que se adapte ao seu estilo individual. Mas é preciso aprender a usar a grelha. É uma arte que requer prática. "

Joseph Müller-Brockmann

Na verdade, o próprio uso da grade está associado a um dos princípios de design mais antigos e básicos - o alinhamento. Nosso cérebro quer simplificar tudo e torná-lo mais compreensível. É por isso que tentamos colocar ordem nas coisas que parecem caóticas.

Naturalmente, quanto mais rápido organizamos tudo corretamente, mais rápido nosso cérebro pode identificar o modelo e seguir em frente. As grades são tão organizadas que quase não requerem interpretação de nossa parte. .

Considere dois layouts de página apresentados na imagem abaixo:

Embora ambas as imagens sejam apenas alguns retângulos, o conjunto na parte superior parece ser fundamentalmente melhor do que a parte inferior. Podemos reconhecer instantaneamente o padrão, aceitá-lo e seguir em frente. A imagem abaixo, por outro lado, causa desconforto visual, uma vez que não tem uma imagem, ordem ou propósito claro e se parece com um conjunto aleatório de formas.

Deve-se notar que a desorganização também pode ser bela. . Na natureza, por exemplo, não existem linhas claras. As malhas parecem frias e rígidas, mas lembre-se de que são um método muito eficaz e eficiente para evitar que sua imaginação se prenda a estruturas.

Dê uma olhada em alguns dos sites mais populares com designs de primeira linha. Provavelmente eles usaram uma grade. As grades ajudam a estabilizar a estrutura de uma página da web e fornecem ao designer um modelo lógico para a construção de um site.

Usar uma grade não significa que seu design terá um design enfadonho. Um bom projetista deve conhecer e ser capaz de aplicar as regras básicas para o uso da grade, mas isso não significa que ele não possa quebrar as regras.

Em termos simples, uma grade é a divisão de um layout com guias verticais e / ou horizontais, incluindo margens, espaço e algumas colunas para estabelecer a base para organizar seu conteúdo.

As grades são tradicionalmente usadas na indústria de impressão, mas também são comumente usadas em web design. A malha é apenas uma ferramenta que auxilia no design.

Ao começar a aprender novas habilidades em uma área específica, você deve primeiro seguir as diretrizes. Aprender o básico garante que você possa aplicar os princípios de maneira eficaz. Isto é, primeiro - teoria e depois - prática.

É importante notar que existem duas maneiras de criar uma grade de modelo:

Método # 1: crie sua própria malha

Existem muitas maneiras diferentes de criar sua própria malha, mas no final do dia, você é livre para escolher a que mais lhe convier.

Você pode dividir um documento em branco matematicamente, criando um número par ou ímpar de colunas para trabalhar. Sua rede pode ser complexa ou simples, você pode usar as regras de terços ou a proporção áurea como quiser.

Talvez os seguintes artigos o ajudem com isso:

  • How You Make A Grid (livro em inglês no formato .pdf)

Aqui estão alguns exemplos de malhas criadas no Photoshop usando guias ( Ver> Novo Guia):

Plugins para criar grades no Photoshop

5. Gerador de sistema de grade - gerador de grades populares como 960.gs, Golden Grid, 1Kb Grid, Simple Grid / defina os parâmetros necessários e pressione "GERAR".

Grades para sites pegajosos / responsivos

O design responsivo da Web é extremamente popular hoje. O principal de seus princípios é o uso de uma tela de borracha. Você pode ler mais sobre eles, mas gostaria de complementar um pouco esta coleção e adicionar mais alguns recursos.

1. - gerador de rede adaptativa

2. Calculadora de grade fluida - um serviço que permite criar uma grade de borracha. Insira os parâmetros e obtenha um código pronto.

Escrito por Josef Müller-Brockmann (1914–1996), é designer gráfico e professor. Seu trabalho exemplifica a simplicidade no design e o uso sutil de tipografia, forma, cor. Eles influenciaram muitos designers contemporâneos.

O site do Lebedev Studio informa que o livro não está à venda. Aconselho você a procurar em uma das lojas oficiais. Há muito tempo eu queria ler Sistemas modulares em design gráfico. Achei que não estava mais sendo vendido. Depois de defender trabalhos semestrais no BHShD, me deparei com a loja do estúdio de Lebedev. Acontece que eles imprimem e vendem.

Eu comprei, li o livro. Vou compartilhar minhas impressões e ideias interessantes.

Exemplos de layouts são fornecidos para cada tópico. Como o livro é um pouco maior do que a folha A4, as ilustrações são grandes e detalhadas.


Páginas de amostra usando uma grade modular

Nota para o designer

Josef descreve o processo de trabalho no layout do pôster, no layout da página do livro e na revista. A parte é dedicada a questões de tipografia, pois afeta a percepção. Um designer precisa ser capaz de compreender essas complexidades para concluir seu trabalho com sucesso.

Sobre grades

Um sistema modular ajuda um designer a organizar racionalmente os elementos em uma página, mas é importante lembrar: primeiro o conteúdo, depois a grade.

Apreciado?

contar