Como quebrar a grade sem fazer uma bagunça

Uma grade é a base de quase qualquer design de site. Essas linhas invisíveis ajudam a criar espaço rítmico e fluxo visual, de modo que cada projeto carrega um senso de organização e harmonia.

Mas você não precisa manter a grade 100% do tempo. Você pode até quebrar a grade de tempos em tempos sem fazer uma bagunça total. Veja como você faz isso, mantendo um site que é um prazer de usar!

Noções básicas sobre sistemas de grade

Antes de poder quebrar a grade, você precisa entender por que ela existe. Independentemente do tipo de sistema usado, a grade é uma parte fundamental do processo de design. As grades ajudam a determinar onde colocar os elementos, como os elementos podem quebrar ou empilhar em diferentes tamanhos de tela e geralmente ajudam a manter as coisas organizadas.

A grade é uma base invisível que ajuda a projetar algo que parece organizado, limpo e fácil para os usuários seguirem.

Designers usam grades praticamente desde sempre. Volte e veja jornais e livros antigos - o texto está alinhado em colunas. Até os escritos antigos em tabletes incluem essa estrutura harmoniosa.

As grades podem fazer o seguinte:

  • Mantenha o conteúdo organizado e fluindo. Os usuários estão acostumados a elementos alinhados horizontal e verticalmente e seguem a abordagem da leitura da esquerda para a direita (e para trás), de cima para baixo.
  • Torne o design um trabalho mais eficiente, porque você verá apenas onde colocar os elementos e o espaço entre eles.
  • Ajude um site a parecer consistente de uma página para outra.
  • Crie apenas o espaço certo entre os elementos para que o design permaneça organizado.
  • Equilíbrio é menos desafiador. Siga a grade e os elementos quase se encaixam conforme você dimensiona os elementos dentro dos parâmetros definidos.

Então, por que você pensaria em quebrar a grade?

Quebrar a grade pode adicionar ênfase extra a um elemento específico. É uma daquelas regras de design que, quando fracassadas, podem melhorar o significado de um projeto. Ao quebrar a grade, é importante seguir muitas das outras "regras" do design. (Use apenas esse truque para aproveitar ao máximo.)

Criar Camadas

Os elementos de camadas permitem que você saia da grade enquanto mantém a unidade no design. Como os elementos tocam e cruzam planos, eles se sentem parte da mesma unidade.

Essa técnica se tornou bastante popular recentemente, graças às influências do Material Design e a mais designers se arriscando com elementos na tela. Pode ser complicado, porém; os elementos que se sobrepõem de alguma forma devem permanecer distinguíveis para funcionar de maneira eficaz.

O Cmmnty faz isso com uma ampla linha e texto, criando uma espécie de equilíbrio de deslocamento usando tipografia e espaço em branco. Você quase pode ver várias pequenas grades no design, como a navegação e o alinhamento de elementos de texto à esquerda, mas nenhum padrão consistente. Essa quebra da grade é perfeitamente equilibrada e fácil para o usuário entender.

Design Espaço em branco proposital

Uma razão para sair do caminho de uma grade é criar mais espaço em branco com mais ênfase nos lugares certos. Pode ser para destacar elementos de texto ou marcas ou uma imagem estelar.

Uma coisa que muitas vezes é confundida com sair da grade são os alinhamentos ímpares. Embora o alinhamento contínuo possa ser parte integrante do uso de um sistema de grade - horizontal ou verticalmente - elementos podem ser alinhados enquanto se afasta da grade.

Ao quebrar a grade para adicionar espaço em branco, considere manter todo o resto alinhado. Isso ajudará a criar um cluster de elementos que chama a atenção, como o texto e a ação de Surfers Against Sewage, com espaço suficiente para que o elemento pareça mais importante que outros. O exemplo acima funciona maravilhosamente porque o espaço ajuda a atrair os usuários para a chamada à ação.

Colocar elementos dentro de um contêiner

Quando os elementos estão contidos de alguma forma, eles se sentem juntos, mesmo quando a grade está quebrada. Isso pode incluir o uso de um plano de fundo colorido, colocar elementos em caixas ou colocar camadas de texto em uma foto ou vídeo, como o exemplo acima.

O bom de qualquer elemento do contêiner é que ele fornece aos usuários uma indicação de que tudo está relacionado de alguma forma. Os elementos estão vinculados.

Sair da grade em um padrão no estilo de contêiner é uma maneira visualmente interessante de separar o que muitas vezes acaba parecendo uma carta de baralho. Muitos projetos no estilo de contêineres terminam com um design perfeitamente simétrico; sair da grade é uma maneira infalível de adicionar brilho ao design e quebrar a monotonia.

Jogue com elementos específicos

A melhor maneira de sair da grade é com um detalhe simples. Se todo o design não possuir um sistema de grade, você provavelmente terminará com uma bagunça. (E é exatamente isso que estamos tentando evitar.)

Comece com um elemento de fundo ou destaque para chamar a atenção. Swashes legais ou formas interessantes são um bom lugar para começar. Considere adicionar também uma cor ousada para destacar o elemento.

A Land of Nod faz isso de maneira eficaz com linhas angulares grossas para mostrar aos usuários onde há grandes vendas em todo o site. Às vezes, essas linhas estão contidas em imagens e às vezes cruzam espaços em branco em imagens. A variação é visualmente interessante e garante que a quebra ocasional da grade seja incomum o suficiente para chamar a atenção, mas corresponde ao restante do design o suficiente para parecer que ele pertence.

Move It Around

Use movimento e movimento para remover elementos da grade, ou talvez até apenas mudar um pouco. Animações simples ou elementos que funcionam em conjunto com o vídeo podem fazer com que uma grade pareça menos semelhante à grade.

Esse conceito funciona muito bem com projetos que se concentram em um único elemento.

A ênfase de Trippeo, acima, é o gráfico de despesas de viagem. Não altera a localização em todo o design do site. Mas tudo o que o rodeia se move, desde o vídeo na tela inicial até as informações sobre o aplicativo que aumentam o zoom usando a rolagem de paralaxe clicável. Esse elemento mantém o restante de um design desequilibrado e fora da grade, com caprichos e talento modernos.

Crie uma ilusão de quebrar a grade

Você pode quebrar a grade sem quebrá-la.

Use uma pequena grade vertical para criar combinações interessantes de formas e alinhamentos enquanto permanece na grade (mesmo que não pareça).

O bom de não quebrar a grade para criar esse tipo de design é que você retém todos os benefícios de um design baseado em grade enquanto faz algo um pouco diferente. As melhores opções geralmente incluem desenhos que funcionam em múltiplos da grade - três, cinco, sete etc. - para que as formas nunca se alinhem exatamente, mas sempre pareçam semelhantes.

A Marche Notre Dame, acima, usa esse conceito para exibir imagens de sua localização. O padrão de grade fora da grade é usado na vertical e na horizontal para criar uma colagem com apenas o espaço em branco certo. Essa é uma boa maneira de romper com os mesmos padrões de alvenaria antigos para fotos que parecem estar praticamente em todos os lugares.

Conclusão

Quebrar a grade nem sempre é fácil de fazer. Muitas vezes, pode acabar se tornando uma bagunça.

Os melhores usos são aplicados a uma página ou conjunto de elementos para evitar que o design fique fora de controle. Isso também é útil quando se pensa em capacidade de resposta e em como lidar com elementos que podem não se encaixar bem em telas menores, porque você não terá tantas esquisitices para lidar.

Quebrar a grade - quando bem feito - pode ser uma maneira divertida e envolvente de tentar algo diferente.

© Copyright 2021 | computer06.com