Cultura na Web: Designs de Layout Baseados em Grade
A web semântica trouxe uma nova geração de tecnologia da Internet. À medida que designers e desenvolvedores trabalham juntos para redefinir as regras da Web, o número de projetos de código aberto e APIs de terceiros continua crescendo.
As opiniões dos estudiosos da web diferem no uso de sistemas de grade . Muitos argumentam que estabelecer pontos de grade limita a criatividade dos designers. Outros afirmam que uma grade fornece uma base científica para um design ser aperfeiçoado.
Ambos os lados fornecem argumentos interessantes. Essas idéias se tornaram parte de uma cultura web única, caracterizada por influentes regras de design e projetos de código aberto.
A grade não é uma chave mestra para aperfeiçoar o design. No entanto, a matemática provou que certas especificações de projeto fornecem as melhores proporções para elementos de página e layouts. Se você tiver ouviu falar sobre isso antes , você pode estar familiarizado com as muitas opções que os layouts baseados em grade oferecem aos designers.
Uma comparação com a web clássica
As gerações mais antigas usavam o design como um mecanismo de controle. Seus projetos apresentavam informações precisamente e de uma maneira fácil de gerenciar. Isso ainda é verdade hoje, mas esses princípios de design obsoletos estão sendo desenraizados.
Na sua esteira, uma nova cultura da web está se mexendo. Uma cultura de padrões e protocolos abertos, código-fonte compartilhado e plataformas poderosas executadas por programadores em todo o mundo.
Uma razão para esse desenvolvimento é o aumento significativo no número de pessoas trabalhando na web semântica. A causa subjacente decorre do impulso humano em contribuir para algo mais que nós mesmos.
Trabalhar para um dia de pagamento é satisfatório, mas não é algo para se apaixonar. Desenvolvedores que realmente se importam com novos padrões querem deixar sua marca.
Onde as grades evoluíram
Não houve um grande estudo comparando técnicas de web design pré-padrões e pós-padrões. Somos capazes de rastrear, no entanto, como as redes se tornaram mais populares ao longo do tempo.
O sistema de grade é baseado nas tendências e avanços tecnológicos atuais. Isso inclui estatísticas sobre o número de pessoas que acessam a Internet em um determinado momento, os dispositivos que usam para acessar a Internet e as resoluções de tela e sistemas operacionais de seus dispositivos. Os sistemas de grade fornecem um equilíbrio estrutural aos layouts de sites. Eles fornecem medições consistentes e permitem flexibilidade entre as estruturas.
No final da década de 1990, poucas máquinas domésticas tinham uma resolução superior a 800x600 e menos ainda 1024x768. Nos últimos 20 anos, sistemas operacionais intrincados e complexos foram desenvolvidos para exibir resoluções muito maiores. 1024 × 768 é uma configuração comum nos dias de hoje.
As resoluções do monitor estão crescendo exponencialmente e essa tendência não parece estar diminuindo. Confira a tabela de dados de Estatísticas e Tendências da Web ; Ele detalha as medições de resolução de tela via W3Schools.
Visual Grid Designs
Todas as páginas da web são baseadas em grades, quer o designer esteja consciente disso ou não. O trabalho digital é composto de pixels e, como tal, irá se adaptar a uma largura e altura definidas, produzindo também efeitos artísticos visualmente com espaçamento e distância entre os pontos.
Em vez de pintar no escuro, por assim dizer, você é capaz de usar grades para iluminar o projeto. Grids primeiro tornou-se popular com o surgimento do Adobe Photoshop como a ferramenta de fato para web designers. Os tutoriais da Web apresentam maneiras de exibir e implementar linhas de grade ao criar modelos, logotipos, gráficos, ícones e outras artes digitais.
Com o tempo, os desenvolvedores perceberam isso e começaram a implementar sistemas em seu próprio trabalho. Projetar um layout de grade no Photoshop é muito diferente de criar o mesmo layout em HTML e CSS.
O trabalho necessário para cada caminho é muito diferente, mas o próprio sistema de grade é universal. À medida que padrões abertos se encaixam, a cultura de design atual está se movendo em direção a estruturas baseadas em grade.
Regras básicas de HTML e CSS
As grades usam algumas das propriedades mais comuns das páginas da Web em HTML. Os layouts de grade HTML geram o mesmo modelo geral a cada vez.
A estrutura começa com um invólucro contendo apenas o suficiente para conter todas as colunas. Dentro da divisão de invólucro, deve haver uma coleção de subdivisões. O número de subdivisões deve ser o mesmo que o número de colunas que você precisa.
Para um layout de duas colunas, você pode ter duas divisões, classificadas como .left e .right . Todas as suas colunas internas devem ter suas propriedades flutuantes CSS definidas para a esquerda ou para a direita, enquanto o wrapper deve conter uma classe clearfix .
Para ter uma ideia do código HTML, você pode verificar um gerador dinâmico de layout de grade. O popular solução da coluna da página oferece uma ótima estrutura e suporta layouts de várias colunas. Todo HTML e CSS são gerados instantaneamente e passam no teste de conformidade com padrões.
Quebrando com preenchimento
Preenchimento e calhas são partes integrantes de qualquer sistema de grade. Pedaços de conteúdo formatados lado a lado exigem espaço entre eles, o que poderia fazer com que o layout se expandisse de maneira pouco natural, resultando em páginas quebradas.
Crie definições em áreas preenchidas criando um layout preenchido com conteúdo fictício. Coloque suas colunas em uma página e dê a elas contornos de 1 pixel usando várias cores. Isso fornece uma representação precisa de como será seu design, delineando a parte de conteúdo de cada área.
Essa técnica funciona com layouts fixos e fluidos, facilitando muito a integração às estruturas de grade atuais.
As calhas também não precisam seguir uma estrutura definida. Você pode estar disposto a sacrificar a área de conteúdo para aumentar o espaço entre uma divisão de duas colunas. Frameworks de código aberto são maleáveis e permitem que você edite estilos diretamente ou até mesmo implemente seus próprios para sobrescrever regras e definir propriedades.
Propriedade CSS da Grade de Layout
o layout-grid property é uma especificação CSS mais antiga adotada pela Microsoft. Está escrito de forma abreviada para definir uma infinidade de propriedades de grade. Especificamente, eles fazem referência layout-grid-mode , layout-grid-type , layout-grid-line , layout-grid-char e layout-grid-char-spacing .
Cada um destes pode ser definido como sua própria propriedade e pode ser escrito sem a abrangente layout-grid . Aqui está uma pequena lista explicando cada um:
layout-grid-mode
Controla qual tipo ou modo de grade de layout é usado. Valores possíveis incluemnonepara nenhuma grade,linepara elementos de grade em linha,charpara caracteres e elementos de linha de bloco, ebothpara suporte geral.layout-grid-type
Controla qual grade é usada para renderizar tipografia de página e elementos de texto internos. Pares de valor sãoloose, que é usado para texto em chinês e coreano,strict, que é usado para caracteres japoneses efixed, que usa monospacing para aplicar a mesma distância entre os caracteres, independentemente do idioma.layout-grid-line
Controla a granularidade do comprimento da grade quandolayout-grid-modeestá configurado paralineouboth. Esta propriedade se comporta comoline-heighte pode receber valores numéricos definidos em cm, px, pt, em ou percentagens.layout-grid-char
Controla o tamanho da grade de caracteres para o conteúdo de texto de um elemento quandolayout-grid-modeestá configurado paralineouboth. Os valores aceitos pela propriedade são os mesmos acima e afetam diretamente a altura da linha da página. A diferença é quelayout-grid-lineafeta a grade da página, enquantolayout-grid-charafeta a grade de espaçamento entre texto e caractere.layout-grid-char-spacing
Controla o espaçamento de caracteres quandolayout-grid-modeestá configurado paracharoubothe alayout-grid-typepropriedade está definida paraloose. Esta propriedade se comporta comoline-heighte deve ser usado para áreas de texto em nível de bloco.
O objetivo da criação dessas propriedades é adaptar os layouts de grade para páginas codificadas asiáticas. Os caracteres em idiomas asiáticos geralmente exigem layouts de página personalizados.
Quando vistos em outros países, esses personagens podem se comportar de maneira estranha e quebrar seus cálculos de grade. Essas propriedades exclusivas permitem melhor formatação visual, utilizando um sistema de grade unidimensional ou bidimensional.
Ritmo de Página Vertical
Muitos artistas gráficos vão encobrir a importância do espaçamento vertical no design da grade. As linhas de grade suportam o design de layout horizontal e alinham elementos de página verticais e tipografia. Quatro propriedades importantes manipulam o espaçamento vertical: tamanho da fonte, altura da linha, margens superior e inferior e preenchimento.
A altura da linha é o maior fator no espaçamento vertical. O texto da página é dimensionado pelo tamanho das letras individuais e pela quantidade de espaço necessária para as linhas intermediárias. Geralmente, a altura da linha é definida em pixels ou ems, dependendo da flexibilidade do layout. Ems mantém a consistência tipográfica em todas as resoluções e navegadores. A melhor abordagem é aplicar estilos de fonte a todos os principais elementos HTML, incluindo títulos, citações de bloco e parágrafos.
O ritmo vertical pode ser retocado uma vez que uma grade tenha sido definida, tornando o dimensionamento para diferentes ambientes simples. Os usuários de desktop terão uma experiência muito diferente dos usuários de laptops e dispositivos móveis, que lidam com resoluções muito menores.
Você não pode planejar o alinhamento vertical com precisão exata, mas na maioria dos casos, um palpite educado produzirá resultados de qualidade.
A regra dos terços
Divida um desenho em três espaços horizontais e verticais. Isso criará uma grade de nove retângulos aninhados em bolsos recém-formados. É muito mais fácil trabalhar com desenhos que são divididos em áreas de blocos com pontos finitos.
A ciência por trás dessa tendência vem da “proporção divina”, também conhecida como “proporção divina”. A proporção de 1,618, que é a proporção divina, é uma constante matemática. Quando dividimos qualquer layout de tamanho fixo nesse valor, podemos calcular a divisão mais precisa para uma estrutura de duas colunas.
Tomemos como exemplo um layout de 960 pixels. Se dividirmos 960 por 1,618, obtemos aproximadamente 593. De acordo com a proporção áurea, então, devemos definir o comprimento da nossa coluna principal como 593 pixels. Este método remonta a artistas há séculos atrás. Felizmente, com a disseminação de frameworks de código aberto, a maior parte da matemática já foi calculada.
Construindo um Retângulo Dourado
Essa teoria para criar layouts retangulares baseados em grade é baseada na Regra dos Terços. Os retângulos divididos são geometricamente sonoros em comparação com a proporção áurea. Valores numéricos para a largura e altura do retângulo estão em proporção à regra de ouro.
Esses tipos de retângulos são conhecidos como “retângulos dourados”. O lado mais curto e mais longo deve conter os valores das variáveis a e b, respectivamente.
Esses retângulos são úteis para criar layouts de página: eles medem o tamanho dos elementos de bloco. Eles são extremamente fáceis de calcular e as ferramentas para muitos frameworks de grade populares são incorporadas.
Esses elementos são muito benéficos para os web designers que usam grades matemáticas. Imagine os múltiplos cenários em que um retângulo dourado cuidadosamente estruturado aumentaria a estética de uma página. Isso pode incluir widgets de páginas, imagens de produtos de comércio eletrônico e até mesmo tabelas ricas em conteúdo.
Começando com 960gs
Com todas essas informações disponíveis ao público, os web designers começaram a definir seus próprios padrões.
De todas as estruturas, a Sistema de Grade 960 (960gs) é provavelmente o mais conhecido. Isso não quer dizer que é o melhor - nenhum sistema de grade se encaixa perfeitamente em todos os critérios - mas é fácil trabalhar com ele. O 960gs é adaptável e funciona bem com praticamente qualquer site. E é bem reproduzido na maioria dos navegadores e dispositivos
A matemática inclui 12 colunas de 60 pixels cada, junto com uma margem de 10 pixels em cada lado, produzindo uma medianiz de 20 pixels. A maioria das estruturas de grade é baseada em colunas de 12 a 24 pixels. Claro, você não deve incorporar 12 colunas em seu layout.
Eventualmente, você combinará as colunas e calhas em uma única unidade de grade. A publicação de conteúdo é muito mais fácil quando você pode criar detalhes específicos para imagens, widgets, vídeos e outros elementos da página.
O 960gs conquistou tanta publicidade porque se adapta bem à web. A maioria das resoluções de tela pode exibir um site de 960 pixels sem uma barra de rolagem horizontal. Cada vez mais, os layouts estão se encaixando nessa proporção, indicando que esse é o futuro da web. A largura extra não tira o design e a expansão ou contração de um modelo é totalmente possível.
Entendendo um Layout Completo 960
Somente tantas colunas podem se encaixar racionalmente em um design. Uma grade não serve para bloquear você em uma mentalidade limitadora. As grades são guias a seguir: elas aprimoram a interatividade do usuário e o posicionamento dos elementos da página.
A maior grade que você pode criar é uma área de conteúdo de 940 pixels com calhas de 20 pixels. É um uso bobo da grade, mas é bom entender as possibilidades. Layouts de duas colunas são bastante simples e oferecem muito espaço para o conteúdo. Exemplos comuns incluem:
- 780 x 140
- 700 x 220,
- 620 x 300.
Observe que todos eles somam 920. A perda de 40 pixels pode ser contabilizada por medianizes em cada “bloco” do layout. Esses espaços mantêm os usuários focados e permitem que o conteúdo se separe sem problemas. Com elementos de conteúdo dividido, temos medianizes no lado oposto e entre os blocos, cada um representando 10 dos 40 pixels.
Esses espaços aumentam à medida que você adiciona novos blocos ao layout. Um design de três colunas tem um espaço ligeiramente menor para o conteúdo do que um design de duas colunas.
Se este conceito ainda é confuso, consulte a imagem acima. A maneira mais simples de trabalhar com grades é projetar uma folha de referência semelhante ao gráfico acima, com todas as quebras possíveis para blocos de conteúdo. Com essas informações, misture e combine estilos para determinar o tipo de design que melhor se adequa ao seu projeto.
Por exemplo, digamos que queremos criar um modelo usando três colunas e a maior área de conteúdo possível. Com o gráfico acima, podemos dividir nossa área de conteúdo em duas partes: uma cheia de conteúdo, mas dividida ao meio para conter duas colunas. Isso exigiria um bloco de conteúdo de 450 pixels e duas colunas de 210 pixels.
Mais uma vez, essas grades não são destinadas a sufocar a criatividade. Eles permitem flexibilidade, mas mantêm sua estrutura de back-end segura. A maioria dos designers não vai deliberar sobre a ciência de tudo isso. A quantidade de tempo que esses sistemas de código aberto salvam um projeto é extraordinária, e vale a pena dar uma olhada na documentação e implementar seu próprio layout.
Layouts de Grade Fluida
Não é comum ver grades presas a layouts fluidos. Os pixels são a unidade de medida mais precisa para um site. Para mover-se para uma medida como percentagens ou ems exigiria uma análise cuidadosa. Esses layouts são possíveis com algumas alterações e seletores CSS adicionais.
Sistema de Grade Fluido 960 é bem conhecido, embora a maior parte do código não seja acessível para versões mais antigas do Internet Explorer. Através de prototipagem interativa e trabalhando em inúmeras resoluções de tela, você pode dimensionar um design de 960 pixels em muitas resoluções de tela. Este framework aberto não é uma cópia exata do 960gs, e vem com nova documentação. Se você estiver interessado, confira o Repositório GitHub para discussões ativas em fóruns e sessões de perguntas e respostas arquivadas.
Como o resto da comunidade de web design, você provavelmente está ansioso por algo mais estável. Algumas estruturas fluidas que geram layouts incríveis.
Layouts de grade do YAML
Yet Another Multicolumn Layout (YAML) é uma das estruturas CSS mais populares. Ele contém uma grande base de código para manipular layouts XHTML e CSS flexíveis. Ele é constantemente atualizado por desenvolvedores ativos da comunidade.
O quadro é extremamente versátil, oferecendo inúmeras exemplos práticos com código. O menor layout de largura fixa estará em conformidade com 740 pixels, ajustando resoluções de tela de 800 × 600. As resoluções de largura máxima são definidas como 80 em, oferecendo escalabilidade entre navegação em dispositivos móveis e desktop.
Definido com fontes padrão da Web, cerca de 75% dos layouts estarão em conformidade com um máximo de 960 pixels, embora isso possa ser substituído.
Muitos dos bugs encontrados em navegadores mais antigos foram corrigidos. O YAML suporta o Google Chrome, o Mozilla Firefox, o Safari e todas as versões do Internet Explorer 5+. Veja o Visão geral e recursos do framework para informações mais detalhadas.
Yahoo! Biblioteca de Interface do Usuário
YUI é um conjunto de bibliotecas JavaScript e CSS disponibilizadas pelo Yahoo. A maior parte do código do projeto e correções de bugs foram escritas por desenvolvedores profissionais da comunidade YUI. A revisão mais atual é YUI2, embora Documentos da API do YUI3 foram liberados para a v3.1.1.
o Página inicial do YUI2 tem links que levam aos projetos mais populares. Na parte inferior, listados em “Ferramentas CSS do YUI2”, há quatro estruturas influentes: Redefinição de CSS, Base, Fontes e Grades. Este artigo está preocupado com CSS Grids, embora muitos desses outros frameworks tenham sido mencionados.
O arquivo de download é de apenas 4 KB e oferece mais de 1000 layouts de página da web exclusivos. As configurações incorporadas permitem tamanhos de largura de layout de fluido e fixo. As colunas são auto-limpas, portanto, se você estiver executando divisões de dois ou quatro caminhos, o conteúdo do rodapé permanecerá sempre abaixo do conteúdo principal. As propriedades tipográficas são vinculadas em conjunto para ajustes específicos do usuário flexíveis. Muitos recursos principais são atendidos, o que torna o trabalho no YUI2 tão legal.
O framework CSS Grids oferece um pequeno número de layouts baseados em dispositivos móveis. Eles são processados corretamente apenas em navegadores com uma versão relativamente nova do mecanismo do Webkit. Isso inclui smartphones, como dispositivos Android, iPhone, BlackBerry e muitos dispositivos Windows Mobile.
A integração é boa, mas essa nova mídia não foi totalmente testada e ainda pode ser exibida incorretamente em alguns dispositivos móveis. Mas, no final das contas, vale a pena, porque a maioria dos visitantes de dispositivos móveis que desejam ler o conteúdo do seu website provavelmente possui um smartphone.
A evolução da cultura da Web
Web designers tornaram-se bastante enfáticos sobre sistemas e regras abertos. A web inicial não era muito de uma comunidade. Havia padrões HTML e CSS, mas a mentalidade por trás da maioria dos layouts era "o que quer que funcione". Após desenvolvimentos significativos na tecnologia da Web, a Internet se tornou o melhor meio de publicação em todo o mundo.
Web designers e desenvolvedores visam simplificar o processo de criação de sites sem tirar a qualidade ou a experiência de um site. As grades são um instrumento harmonioso na medida em que dão aos projetos uma ordem e estrutura. Caos e criação aleatória geralmente não produzem resultados.
É por isso que os projetos de grade são tão acessíveis. A web foi reformada em um sistema de desenvolvimento ágil. Layouts baseados em grade produzem websites estáveis: não é surpresa que a comunidade tenha adotado frameworks como prática comum.
Em vez de depender de métodos antigos não confiáveis, o designer da web comum hoje pode se concentrar na criação de sites que agrade aos usuários, em vez de coordenar criações perfeitas de pixel.
Hoje, os designers são muito mais jovens e têm mais paixão pelo design do que nunca. Isso, juntamente com o movimento da web aberta, significa que um fluxo de novo código da web está sendo constantemente liberado para o público. Repositórios GitHub oferece oportunidades de networking com outros desenvolvedores de CSS.
Desenvolvimento de estrutura de grade personalizada
Os designers criticaram muitos frameworks abertos por estarem muito inchados. Muitos são rotulados como confusos, com muitas classes e regras para trabalhar. Isso pode ser verdade para alguns, e eu certamente não desacredito essas observações.
Em última análise, quanto mais flexível for o design, melhor. Os artistas procuram ferramentas que facilitem seu trabalho. Estruturas não são adequadas para todos os projetos. Desenvolver frameworks sobre projetos web menores economizará tempo a longo prazo. No entanto, considere os sistemas CSS mais como uma ferramenta de aprendizado do que como um ambiente de produção.
As grades podem ser confusas no começo, sem dúvida. Ter um framework para referência e documentação para checagem durante todo o processo ajudará os iniciantes a se integrarem rapidamente e com menos estresse.
Com bastante prática, o desenvolvimento de uma estrutura CSS customizada será simples. Os benefícios disso superam as vantagens de se trabalhar com a fonte de outra pessoa. Você pode estruturar todos os formatos de layout em um local e definir propriedades como tamanho da fonte, altura da linha e elementos de bloco. Ninguém nunca escreveu um código CSS perfeito, então fique com o que funciona melhor para você.
Frameworks comuns de grade CSS
Abaixo estão alguns dos frameworks CSS mais populares. Embora nem todas essas estruturas se concentrem apenas no design da grade, elas oferecem bibliotecas úteis para estudar e implementar em projetos da web. O código-fonte do projeto é gratuito em cada caso e geralmente vem com documentação.
Grade de 1KB
Grade de 1KB é um ótimo framework CSS que enfatiza principalmente a velocidade. Os arquivos de download têm menos de 1 KB no total e armazenam a maioria dos seletores de CSS necessários para criar um layout de site bonito. O código CSS é personalizável antes de baixar, o que é um grande benefício para todos os web designers. Você pode escolher entre quantas colunas incluir e quão largas as colunas e medianizes devem aparecer. Esta grade é extremamente amigável para os recém-chegados e uma ótima maneira de se quebrar.
CSS de linha de base
Linha de base é outro modelo CSS padrão disponível gratuitamente para download. Esse pacote não apenas inclui código para grades, mas também estrutura elementos de tipografia e de bloqueio de página. Todo o código é compatível com elementos CSS3 e HTML5, dando aos desenvolvedores controle sobre como estruturar o fluxo de páginas. O Baseline CSS oferece soluções para manipulação vertical de espaço, integrando a tipografia de página em uma grade flexível.
Sistema de Grade CSS 1140px
CSSGrid.net é o lar de uma nova estrutura fluida para sites baseados em grade. Com 1140 pixels e uma divisão de 12 colunas, a estrutura é dimensionada corretamente em todos os dispositivos, desde as resoluções de monitor maiores até os dispositivos de mão. A estrutura usa consultas de mídia para verificar quando exibir um determinado layout e como distribuir o conteúdo da página. Autor Andy Taylor freqüentemente atualiza o projeto, e você pode baixar o mais recente lançamento 1.6 aqui .
YAML
YAML fornece a estrutura mais flexível para desenvolver layouts. A documentação oferece uma solução completa para todos os layouts fixos, elásticos e fluidos. Os arquivos principais foram testados extensivamente em sites pequenos e grandes. Se você está procurando um framework CSS estável, o YAML é uma ótima solução.
CSS do Blueprint
Blueprint contém muitos dos benefícios da linha de base. A vantagem deste framework é seu nome de marca bem reconhecido. Muitos desenvolvedores ativos atualizaram o projeto com novas classes. As grades compreendem uma grande parte da estrutura, mas muitos modelos são usados para formar telas tipográficas, móveis e de impressão e muito mais!
CSS Boilerplate
o CSS Boilerplate O projeto foi iniciado por um dos desenvolvedores do Blueprint. O código é uma versão mais refinada e despojada da estrutura do Blueprint, otimizada para velocidade e fácil legibilidade. Embora o projeto não tenha sido atualizado recentemente, ele oferece uma oportunidade para que os iniciantes descubram suas próprias definições de projeto CSS.
YUI 2: Grades CSS
Grades YUI2 é uma estrutura muito popular lançada pelo Yahoo sob sua linha YUI2. O código é perfeito para layouts fixos e fluidos, seguindo as regras definidas em CSS2 e CSS3. A estrutura está bem documentada na Biblioteca de Interface do Usuário do Yahoo e é considerada uma das melhores estruturas para iniciantes.
Este post foi escrito exclusivamente para Webdesigner Depot por Jake Rocheleau , um web designer apaixonado e entusiasta de mídia social. Jake adora ler e escrever sobre as últimas tendências da Internet digital e redes dentro da comunidade de design. Confira ele no Twitter @jakerocheleau para mais sobre o seu trabalho.
Você usa uma estrutura baseada em grade para seus projetos? Compartilhe suas opiniões conosco!