Criar um sistema de grade (UI Bootcamp semana 6)

1. Introdução: Esta semana vamos construir um sistema de grade. Primeiro, analisaremos as grades históricas, olhando para trás livros antigos, etc. E, em seguida, veremos como algumas dessas regras podem se aplicar aos sites. Especialmente como a grade vertical vai ditar tudo, especialmente com design responsivo. Sem nos preocupar com codificação, vamos falar um pouco sobre como o modelo de caixa funciona em CSS e como isso se aplica ao CSS Flexbox e à grade CSS. Novamente, não se preocupe, não veremos nenhum código. Usaremos esse conhecimento para construir uma grade básica de boa aparência para um artigo simples em uma página da Web. E, finalmente, criaremos grade um pouco mais complicada que pode ser usada para um aplicativo da Web de UI baseado em componentes moderno. Veremos como a grade funcionaria para os componentes individuais que seriam adicionados a este site. O uso de sistemas de grade para design de interface do usuário mudou muito nos últimos anos, agora que criamos componentes individuais para nossas interfaces de usuário. Portanto, é realmente útil saber como construir esse estilo de grade. Então, vamos começar. 2. Geometria: Em muitos países por volta do início do século XX, as pessoas se mudaram para cidades por causa da industrialização, havia mais empregos e cidades e abandonaram os antigos sistemas aristocráticos ou feudais que existia em muitos países. Junto com isso, abandonamos as antigas artes clássicas e formas de design e olhamos mais coisas como cubismo, construtivismo e futurismo. Começamos a criar formas de arte e projetos que eram um pouco mais geométricos e um pouco mais ordenados do que as gerações anteriores. É claro que, na Pérsia, na Arábia e na Ásia Central, eles já usam projetos geométricos há milhares de anos. Às vezes, esses estilos são atribuídos ao fato de que alguns conjuntos islâmicos não permitem o desenho de humanos ou animais porque eles não querem idolatrar nada. Mas, na verdade, muitas dessas formas não são projetadas anteriores ao Islã e muito mais propensas a serem relevantes porque essas são as áreas onde as pessoas adoravam matemática, ciência e engenharia muito antes do resto do mundo, já falamos um pouco sobre geometria quando falamos sobre tipografia, falamos no início do século XX, muitas fontes geométricas se tornaram mais populares. E as pessoas usam a desculpa de que eram mais fáceis de ler como se fosse mais racional ou lógico ter esses tipos de letra. E, na verdade, agora sabemos que eles são quase os mais difíceis de ler porque as formas são tão parecidas. Da mesma forma, quando adicionamos grades geométricas ao resto do nosso design, na verdade é um pouco mais sobre as tendências atuais que equivalem, como elas são utilizáveis. Gostaríamos de dizer que parece limpo e, portanto, é mais fácil de usar. Mas, na verdade, é só porque é isso que as pessoas esperam que os projetos sejam atualmente parecidos. Quando olhamos para essas tendências de arte, como o cubismo, o futurismo do início do século XX, percebemos que as que são realmente bastante atraentes e gostamos de olhar para eles têm um elemento de caos em eles. Quando tentamos criar nossas composições no primeiro módulo, uma grande vantagem era que queríamos criar um senso de ordem, mas precisamos estragar tudo com um pouco de caos para, podemos crie algo razoavelmente agradável visualmente usando nada além de formas geométricas. E falaremos mais sobre a criação imagens para o nosso site um pouco mais tarde. Mas se usássemos isso para parte do nosso site, gostaríamos de garantir que essa grade seja baseada na grade que já criamos para nossa tipografia. E observe que, pelo próprio ato de ter tipografia nesta página, já criamos inadvertidamente um ritmo horizontal com todas essas linhas verticais no texto. Se esse design usou um tipo de letra mais amplo ou até mesmo um tipo de letra monoespaçado, ele dará uma sensação muito diferente ao ritmo horizontal da página. E na grade que criamos deve seguir esse sentimento. Se nossa página tivesse apenas um bloco de texto, ela naturalmente já teria uma grade com as linhas horizontal e vertical criadas a partir do texto. E o resto da nossa página deve seguir essa grade. Talvez essas formas geométricas à esquerda possam parecer bem diferentes. Se tivéssemos um tipo de letra mais amplo, talvez ficasse melhor com linhas mais largas para a grade. Estou razoavelmente feliz com esse design que criei aqui apenas usando uma grade muito simples, algumas formas geométricas baseadas nessas escolhas tipográficas. Mas semelhante a como aqueles artistas revolucionários criaram o cubismo e o futurismo, as melhores peças de arte realmente tinham um elemento de caos e semelhante a como as composições que você criou no primeiro módulo tinha um elemento de caos que os tornava mais interessantes. Nosso design não é uma lágrima completa. Este design parece um pouco uniforme demais. Deixe-me tentar adicionar algumas formas orgânicas. Você pode ver que eu adicionei em uma fotografia real, coloquei algumas linhas nas quais não estão alinhadas à grade. E no canto inferior esquerdo há uma forma que é quase como uma forma estranha do tipo flor com exceção da fotografia, essas formas não se encaixam naquela grade original que o resto dessas formas geométricas fazem. Eles rompem as linhas dessa grade, mas dão a ela uma sensação orgânica mais real e chama nossa atenção um pouco melhor. Agora isso parece mais uma composição completa. Se você observar seus sistemas tipográficos criados nos módulos anteriores, notará que dois sistemas tipográficos diferentes têm uma sensação muito diferente para eles apenas por causa de os ritmos horizontais e verticais criados pelas grades naturais de diferentes tipos de letra. Você também tomou decisões sobre alturas ou embarque de Berline e o rastreamento ou espaçamento entre letras. Isso foi principalmente para tornar fácil e confortável de ler. Mas observe como se eu pegar esse sistema tipográfico e eu mudar massivamente as alturas de rastreamento e linha. Ele muda completamente a sensação da página e, portanto, mudará todas as grades que eu criei em torno dela. Se eu fiz um exercício semelhante ao que fiz anteriormente, onde adicionei algumas formas geométricas a isso. Eu acrescentaria alguns que talvez sejam muito altos e mais finos, muito mais magros. Lembre-se no primeiro módulo quando criamos todas essas composições malucas, tente isso agora com um de seus sistemas tipográficos. Basta adicionar algumas formas malucas aleatórias e notar como elas vão se sentir ou parecer bem diferentes, dependendo da grade natural já criada pelo seu tipo de letra. Este que eu criei aqui na tela, é completamente ilegível. Mas se você tivesse algo com essa altura de linha alta, talvez pareça ruim. Então, com algumas formas altas e algumas linhas bastante finas, tem estado muito na moda nos últimos 100 anos para ter trabalhos de artes e design muito geométricos. Através do resto deste módulo, falaremos sobre a criação de uma grade para que todos os elementos do seu design se encaixem perfeitamente. Você já tem uma grade natural do sistema tipográfico que você criou. Então, vamos seguir essa grade natural quando criarmos a grade para o nosso site, nunca queremos que tudo em nossa página se encaixe perfeitamente nessa grade e seja perfeitamente geométrico, sempre vamos querer adicionar algumas formas orgânicas e algumas coisas que simplesmente não se encaixam na grade para torná-la visualmente mais interessante. 3. Tipos de grade: Antes de olharmos para qualquer grade em páginas da Web ou aplicativos da Web, vamos começar analisando as primeiras grades de todos os tempos e começar a construí-las a partir daí. Os primeiros livros já tinham uma espécie de grade e é chamado de punho manuscrito. Parece assim. Todas as letras da página se encaixam confortavelmente nesta caixinha bonita e arrumada. Agora você notará que há muita decoração em torno de uma casa, muitas formas orgânicas. É muito clássico. Mas ainda há essa área designada onde as letras vão, a grade real para esta página, parece assim, como essas linhas vermelhas aqui. Agora, mais cedo no início, quando emolduramos a caixa, quando estávamos aprendendo sobre nossas composições, aprendemos que, na verdade, apenas com uma forma simples como uma caixa emoldurada, há todos os tipos de variações. Você ainda pode se divertir com isso, e você notará que essa grade está fora centrada como uma margem grande e muito maior na parte inferior e no lado direito. E ainda é criativo mesmo antes de adicionarmos todas essas formas orgânicas e todas as letras, apenas com essa simples grade manuscrita, poderíamos torná-la central. Poderíamos ter uma carga inteira mais margem na parte inferior, ou podemos ter uma margem muito mais dramática em um dos lados. Por exemplo, depois disso veio a grade de colunas onde podemos ter mais de uma caixa de texto na página. Se continuássemos pensando nisso apenas em termos de composição, isso nos dá uma nova medida para pensar sobre o espaço entre essas duas caixas, chamamos isso de calha. Isso obviamente precisa ser grande o suficiente para diferenciar entre essas duas caixas de texto. E pequeno o suficiente para que não acabemos usando muito espaço na página. Mas isso também afetará a sensação da página. Esta página em particular tem uma caixa extra na parte superior e outra caixa na parte inferior. Estes são, claro, cabeçalhos e rodapés. Mas agora você notará que há realmente uma sarjeta entre eles também. Provavelmente queremos manter esse tipo de uniforme com o espaço que já temos entre as outras caixas, ou pelo menos elas, se encaixa em uma proporção confortável. Aqui está uma página mais moderna. Essas duas colunas têm exatamente a mesma largura. É muito mais óbvio que você leu o da esquerda e depois o monômero certo? É definitivamente mais claro. Parece mais moderno. Mas espere um segundo. Na verdade, há esse pequeno texto extra à esquerda. Então, na verdade, temos uma terceira coluna aqui, que é uma largura completamente diferente. E isso faz com que pareça um pouco mais interessante. Lembre-se de nossas composições quando estávamos falando sobre tornar as coisas relacionáveis, essa coluna mais estreita também nos diz que não é a mesma coisa. Podemos dizer imediatamente que esta outra coluna serve a um propósito um pouco diferente. Como queremos que nossas colunas e calhas sempre sintam que pertencem juntas. Pode parecer estranho ter uma largura diferente, mas na verdade há outra possibilidade não ser três colunas, pode realmente ser cinco, com alguns dos elementos abrangendo mais de um coluna. Você vê, quando criamos nossa grade subjacente, não estamos dizendo que tudo nela terá uma coluna de largura. Vamos supor que essa grade foi usada para uma revista. Agora, em outras partes da revista, a mesma grade pode ser usada, mas pode haver diferentes áreas que abrangem colunas diferentes. Podemos até usar elementos que abrangem todas as colunas ou nenhuma das colunas. Poderíamos ter uma área que acabou de sair aberta. E só para fazer você pensar sobre grades de uma maneira um pouco diferente, também é possível que sejam cinco colunas, mas na verdade elas não têm a mesma largura, mas não como pensamos originalmente. Isso não faria diferença para essa página exata, mas faria algumas diferenças interessantes outras páginas da mesma revista. E podemos ter alguns layouts criativos um pouco mais interessantes por causa disso. E o próximo tipo de grade que eu quero falar é uma grade modular. Isso é mais como uma mesa. Ele tem linhas, bem como colunas do que já falamos. Você provavelmente já pode dizer que isso se presta melhor a sites e aplicativos da web porque estamos lidando com algo que você pode rolar para baixo para muitas, muitas páginas. É muito mais longo do que é largo. Dividir as coisas verticalmente repente faz muito mais sentido. Uma página da Web pode ter seções diferentes à medida que você rola a página para baixo. E por termos uma grade modular, estamos garantindo que haja alguma uniformidade na altura desses e algum tipo de ritmo vertical. À medida que você desce a página. Você deve ter notado no layout da página original, essa imagem e textos no canto inferior esquerdo da página realmente não se separam nessa grade modular. Esta seção tem sua própria grade dentro dela. E isso está totalmente bem. Muitas vezes vamos incorporar uma grade dentro de outra. Na verdade, como veremos no próximo vídeo, quando começarmos a trabalhar em sites, raramente temos apenas uma grade para tudo. Na verdade, se eu mostrar este último exemplo de uma revista um pouco mais moderna , talvez até pareça uma revista que você ainda pode pegar hoje, você verá uma imagem que abrange toda a largura, alguns títulos que estão alinhados centralmente e usam o mesmo módulo à esquerda e à direita, essas colunas de texto e, em seguida, alguns módulos com algumas notas de rodapé na parte inferior. Essas páginas estão claramente tentando se encaixar em muitos tipos diferentes de informações lá. E há muitos tipos diferentes de módulos descendo a página. Mas há alguma uniformidade, não apenas de uma página para a outra, mas também em algumas das entranhas há larguras e coisas assim que dão uma sensação de uniformidade ao descer a página ainda. Sei que os exemplos neste vídeo têm tudo a ver com o design de impressão. E, obviamente, até este último são todos bastante antiquados. Mas espero que isso nos prepare para o próximo vídeo. Quando estamos projetando um aplicativo web ou uma página da Web, geralmente usamos alguma forma de uma grade modular onde ela tem linhas e colunas, uma grade vertical e horizontal. Cada elemento na página pode cruzar várias colunas ou linhas. Eles apenas dão uma aparência mais uniforme depois. E normalmente, especialmente com o design do site, podemos incorporar uma grade dentro de outra. 4. Importância das grides: Aqui temos um design simples e agradável para talvez uma página inicial ou um banner de herói em um site. Agora, esses elementos, eu não os coloquei em qualquer lugar. Eu me certifiquei de que eles se alinham um pouco um com o outro de alguma forma. Se eu fosse mover tudo um pouco fora dessa grade subjacente que acabei de mostrar, você notará que instantaneamente parece muito pior. Parece instantaneamente muito menos profissional. Você confia menos, você se sente um pouco ansioso só de olhar para ele. No entanto, são as mesmas cores, os mesmos tipos de letra, tudo é a mesma proporção, a mesma ilustração, é o mesmo fundo. Eles simplesmente não se alinham uns aos outros. Na minha opinião pessoal, a coisa melhor e mais importante que um designer pode fazer para melhorar instantaneamente seus projetos. Faça-os parecerem mais profissionais e mais confiáveis é apenas garantir que eles alinham essas coisas. Se olharmos para a topografia primeiro porque já somos especialistas nisso, já criamos uma grade vertical para nossos tipos de letra. Tudo isso já parece bom aqui porque se encaixa perfeitamente nessa grade vertical. Agora sabemos que a maioria das coisas em nossa página da web será topografia, e isso já é baseado nesta grade vertical. Portanto, devemos usar a grade vertical da nossa tipografia para ditar todo o resto. Se adicionarmos essa grade de volta agora e quisermos fazer com que esse cabeçalho tenha uma cor de fundo. Queremos ter certeza de que essa área se alinha à mesma grade vertical. Então acabei de dividir esta página em três seções verticais com fundos coloridos ligeiramente diferentes. E essas três seções alinham à grade vertical inicial. Agora vou preencher esta página com alguns outros pequenos elementos que encontrei e encaixá-los nessa grade, e então vamos dar uma olhada em onde achamos que essa grade pode estar. Esta seção superior aqui parece que talvez haja duas colunas, uma com o texto à esquerda e outra com esta imagem à direita. Mas então, se eu rolar para baixo e você vir esta seção, você pode dizer, bem, na verdade, esta é uma grade de três colunas porque olhe para essa área. Então, talvez ele tenha usado uma grade de três colunas para esta página inteira. Agora, é claro que estou afirmando que o óbvio especificamente queria algo em que pudéssemos usar essa seção superior e inferior. Poderíamos ter essa grade de seis colunas. E esses elementos na parte superior podem abranger apenas três das colunas. Bem, na verdade, originalmente com web design quando eu comecei, todos teriam esse tipo de grade de 12 colunas, que colocaríamos em tudo e tornaríamos todos os elementos alinhados de alguma forma para essas 12 colunas. E, na verdade, algumas estruturas CSS mais antigas costumavam forçar você a pensar assim também. Uma das desvantagens de ter apenas esta grade de 12 colunas padrão para tudo é quando você começa a usá-la, você percebe para torná-la versátil, você precisa de calhas muito grandes e isso nem sempre funciona. Então você acaba meio que invadindo e tendo algo não está realmente alinhado a ele por causa dos avanços no CSS, agora podemos trabalhar em uma página da Web mais como se trabalharíamos em um layout de revista moderno. Essa área superior, talvez seja apenas uma grade de duas colunas, e então essa área inferior é apenas uma grade de três colunas completamente separada. Teremos que entender algumas das teorias do CSS subjacente para que possamos projetar nossas grades. Mas você já pode ver as vantagens de ter uma grade que é apenas duas colunas e, em seguida, uma grade completamente separada que é três colunas. Porque agora temos controle sobre a sarjeta. Podemos fazer com que essa sarjeta seja relativa à nossa grade vertical e ao estilo que estamos criando em nossa página. E será uniforme à medida que olharmos no desktop móvel e toda a capacidade de resposta está no meio. Temos controle sobre essa largura. Podemos fazê-lo se encaixar em nosso design uniforme agradável. Garantir que os elementos em nossa página alinhados a algum tipo de grade sejam a coisa mais importante que podemos fazer para que nossos projetos se sintam confortáveis, profissionais e torná-los confiáveis. Nossa topografia vai ditar a grade vertical inicial, dando alguma uniformidade e algum ritmo às alturas de cada seção. Mas cada seção realmente terá uma grade horizontal diferente. páginas da Web variam ocasionalmente em largura, dependendo do dispositivo que estamos vendo e ocasionalmente, outros motivos também. Então, a única medida sobre a qual temos controle é na verdade, a calha entre as colunas. E podemos fazer esse uniforme em todo o nosso site. 5. Modal de caixa: Se você não sabe nada sobre CSS, precisará conhecer alguns conceitos para poder criar grades. Mas se você já está bem ciente do que é o modelo de caixa CSS, fique à vontade para pular este vídeo. Cada elemento em uma página da Web potencialmente tem. Essas três coisas são borda, preenchimento e margens. Não se preocupe se isso não fizer nenhum sentido. Vejamos um exemplo do último design que mostrei. Vejamos essa área de conteúdo aqui que estou mostrando atualmente como uma caixa roxa. Esta caixa tem preenchimento. Agora é isso que estou mostrando como verde na tela aqui. Tem uma borda que estou mostrando como amarela, mas não era azul marinho. Um momento para ir. Agora, a borda é a parte que você realmente pode ver na tela. E tem uma margem. Essa é a área que estou mostrando atualmente em laranja, o preenchimento, a borda e a margem podem ter tamanhos diferentes. Tudo o que eles podem ser 0. Eles não podem existir. Por exemplo, se não houvesse borda, e eu acabei de fazer o fundo aqui preto para torná-lo um pouco óbvio onde está a diferença entre o preenchimento e a margem. Podemos ter algo parecido com isso. O conteúdo é mostrado em roxo, o preenchimento é mostrado em verde e a margem ainda é mostrada em laranja. Só para ajudá-lo a visualizar exatamente como isso funcionaria, Vejamos outro exemplo. Mas desta vez não temos preenchimento. Sem preenchimento, ficaria assim. Em vez disso, a área de conteúdo é roxa. Temos a borda mostrando agora em amarelo e a margem novamente em laranja. E por que não terminar o conjunto mostrando como essa parte do design ficaria se não houvesse margens. Novamente, deixe-me destacar a área de conteúdo em roxo e o preenchimento é verde e a borda é amarela. Espero que isso esteja tudo incrivelmente claro agora, mas sinta-se à vontade para voltar e ter outra olhada rápida. Se você ainda está um pouco confuso. Também é totalmente possível que o tamanho da borda superior, inferior , esquerda ou direita, margem ou preenchimento possa ser completamente diferente. Por exemplo, aqui, eu fiz dela a borda direita mais espessa do que as outras três. Cada elemento em cada página da Web tem essas três coisas, preenchimento, borda e margem. Embora, claro, eles possam estar definidos como 0, então você não pode vê-los. Cada uma dessas quatro seções aqui, a imagem e o texto, e talvez este seja um botão na parte inferior. Cada um deles tem suas próprias caixas com preenchimento, margens e bordas. Esses quatro elementos que temos um nome para texto e imagens de todos embrulhados dentro desta caixa. Agora você pode ouvir os desenvolvedores usarem bastante a palavra div. É abreviação para a palavra divisor. Isso é chamado de div. Ele agrupa essa imagem e esse conteúdo de texto dentro dela. E como vimos anteriormente, isso tem seu próprio preenchimento, borda e margens. E podemos ter quantas dessas divs invisíveis quisermos, dividindo nossa página da Web em grupos convenientes. Agora vamos voltar a falar sobre design em breve. Mas antes de tudo, você precisa ter certeza que todos os elementos em uma página, incluindo as divs Invisíveis que agrupam coisas juntas, têm bordas, margens e preenchimento. Agora, há algumas técnicas muito boas que podemos usar. Então, esses divisores separam a página, como queremos que ela seja separada. Um deles é chamado Flexbox e um deles é chamado grid. E vamos olhar para eles nos próximos dois vídeos. Então, haverá um pouco mais de CSS. Então, de forma muito simples, cada elemento em uma página da Web tem preenchimento, borda e margem. Estas podem ser diferentes larguras em tamanhos diferentes e podem até ser zeros para que não apareçam de forma alguma. Podemos agrupar elementos em divs e eles também terão preenchimento, bordas e margens. Para controlar convenientemente os tamanhos dessas divs, podemos usar flexbox e grade, que são duas regras CSS que veremos nos próximos dois vídeos. 6. Caixa flexível: Se começássemos a criar um site, talvez criemos algo primeiro que pareça muito simples assim. Vamos supor que esta caixa no canto superior esquerdo seja um logotipo. E essas duas caixas no canto superior direito, botões incríveis, esses elementos em si sempre terão a mesma largura, independentemente da largura da janela do navegador. Fará sentido para nós agrupar estes juntos em um desses elementos invisíveis que mencionei chamado de div. Isso faria sentido aqui porque queremos que seja uma largura máxima que essa div possa ser. Se olharmos para ele em um monitor muito, muito grande, não queremos que o logotipo seja bem no canto superior esquerdo do monitor e, no canto inferior direito, no canto superior direito, queremos que essa div seja restringida por uma largura máxima e para ele se sentar relativamente central na página. Se eu fosse agora adicionar uma segunda seção à página, como talvez alguns textos de cabeçalho. Pode parecer bem alinhado ao logotipo simplesmente porque a div circundante tem a mesma largura máxima e tem o mesmo preenchimento e margens. Mostrei a borda da div em amarelo aqui só para que você possa vê-la com mais clareza, mas também tem algum preenchimento. Os botões não se encaixam na borda do desenvolvimento. E também tem alguma margem. A div não toca na parte superior da tela ou no elemento abaixo. Se olharmos para esta página da Web , por exemplo, em um iPad, isso significa que o logotipo não está tocando lateral da tela e nem os botões. Se simplificarmos isso agora e olharmos apenas dentro desta barra de cabeçalho para os elementos dentro dela, temos dois botões de um lado e um logotipo do outro lado. E poderíamos simplificar isso dizendo que os dois botões estão simplesmente em outro grupo. Agora, essas duas caixas que agora temos à esquerda e à direita, esses dois grupos ou elementos sempre terão o mesmo tamanho. Isso significa que o espaço intermediário crescerá e diminuirá à medida que o tamanho do navegador cresce e diminui. E é aqui que podemos optar por usar o Flexbox. Esta é uma regra bastante simples, mas é muito importante entender como designer porque você percebe rapidamente que as medidas que são importantes para nós para criar uma sensação de uniformidade e garantir que as coisas estejam alinhadas de forma limpa em nosso design provavelmente não é uma grade subjacente e provavelmente mais as larguras desses revestimentos e margens em torno desses diferentes elementos. Quando adicionamos a regra de flexbox a uma div ou a um grupo, podemos fazê-lo para que o espaço seja igual em torno de cada elemento. Poderíamos esticar qualquer um dos elementos dentro e podemos alinhá-lo para que todos os elementos sejam esmagados no centro, à esquerda ou à direita. Então, é claro, todas essas regras podem funcionar horizontalmente e verticalmente. Vamos dar uma olhada naquele design simples que criei alguns vídeos atrás. E vamos ver como faríamos o menu no topo aqui, temos um logotipo à esquerda, temos um botão à direita e temos um pequeno menu no meio. Não podemos controlar o posicionamento exato dessas coisas. Vai depender da largura do navegador. E isso pode depender potencialmente de como o usuário definiu o tamanho de texto padrão no navegador. Quando desenvolvemos isso ou entregamos isso a um desenvolvedor, eles provavelmente usarão um flexbox para garantir que esse menu esteja no centro. E esses dois outros elementos estão na extrema esquerda e na extrema direita. O dimensionamento sobre o qual somos um designer tem controle é o padrão desse botão e o espaçamento entre esses itens de menu. Poderíamos criar um estilo uniforme e fazer com que ele se sinta alinhado, fazendo com que estes sejam todos do mesmo tamanho. Por isso quero dizer, poderíamos dizer que o preenchimento neste botão e o espaçamento entre esses itens de menu é exatamente a mesma quantidade de pixels. Agora isso não vai funcionar em todos os lugares. E eu não acho que isso realmente funcione nessa situação em que provavelmente os itens do menu precisam de um pouco mais de espaço ao redor deles. Semelhante a como já temos uma escala tipográfica. E há apenas um número finito de tamanhos de fonte que usamos em todo o nosso design, só teremos uma quantidade finita de tamanhos de preenchimento e margem também. Portanto, não há problema que o espaço entre esses itens de menu e o preenchimento desse botão tenha tamanhos diferentes. Mas, idealmente, queremos que eles se encaixem na mesma proporção. No exemplo desta tela, fiz com que eles se encaixassem na proporção áurea. Como a tipografia quase sempre compensará a maior parte do que está em seu design. Faz sentido que essa proporção seja baseada na relação linha-altura que você já tem no exemplo de design que estou mostrando na minha tela, o preenchimento para o botão é exatamente o mesmo tamanho que o altura da linha do parágrafo. E para os itens do menu onde há um pouco mais de espaço, usei as alturas de linha de um dos meus títulos. Isso significa, no geral, o design ainda tem esse elemento de conformidade, apesar do fato de que a grade pode mudar drasticamente. Flexbox nos dá controle sobre como os elementos dentro um grupo ou DIV são justificados, espaçados e alinhados. Isso nos deixa com os elementos de largura fixa dentro dessa div, bem como os padrões nas margens que estão dentro do nosso controle. E realmente queremos aproveitar mais isso para que ainda possamos criar uma sensação de uniformidade em nossos projetos, mesmo que eles possam ser responsivos. E há todos os tipos de coisas que podem mudar. 7. CSS GRID: grade Css nos dá muito menos controle do que o Flexbox, mas nos permite aplicar algumas regras em várias linhas. Se você imaginar uma tabela como um Excel ou algo assim, você tem colunas e linhas, e é isso que você tem na grade CSS. Se você imaginar essa bagunça de penalidade do corpo docente que tenho atualmente na tela com a grade CSS, podemos forçá-las a ter a mesma largura e as mesmas alturas. Isso se tornará rapidamente mais útil quando você percebe que poderia definir um elemento como duas linhas, por exemplo. Isso torna a grade CSS muito mais útil para os layouts todo o módulo ou componente do nosso aplicativo web. Como vimos anteriormente, um design como o da tela agora, talvez possa ser uma sexta coluna ou grade de 12 com diferentes elementos abrangendo número diferente de colunas. Mas, na verdade, faria muito mais sentido para cada um desses componentes simplesmente ser grades CSS diferentes, com a seção do meio simplesmente sendo uma grade de duas colunas e as seções superior e inferior sendo três grade de colunas. Cada elemento na grade terá uma largura uniforme, que pode mudar à medida que as mudanças de tamanho do navegador tiveram todos os tipos de coisas diferentes. Então, novamente, a coisa que temos controle como preenchimento e margem. Então, é isso que vamos usar para criar uma sensação de conformidade em nossos projetos. Isso não é apenas muito útil para se perceber como designer, mas pode realmente tornar suas vidas muito mais fáceis. A maneira que muitos web designers pensam. E a maneira que costumávamos pensar tradicionalmente é ter uma grade padrão de seis ou 12 colunas sobre tudo. E para torná-lo versátil, teríamos que dar uma calha muito maior do que a mostrada na tela aqui, que, como sabemos, vai tirar a única variável que nos preocupamos em fazer nossos projetos parecerem uniformes ou nos fazer adicionar um preenchimento tão grande a cada elemento que realmente não nos dá tanto espaço para brincar com a área branca aqui dentro de cada um dos esses elementos, por exemplo, foram todos baseados na grade modular original que costumávamos ter no design de impressão. E só para lembrá-lo de um exemplo, aqui está um aqui. Uma coisa que você notará com esse design de revista não é tudo. As seções são preenchidas. Algumas seções ou apenas branco liso e algumas apenas têm uma direção em um canto superior em algum lugar. Estamos usando a grade para nos ajudar a alinhar elementos e fazer com que as coisas se sintam uniformes depois. Mas ninguém nunca precisa ver a grade ou saber que ela está lá. E certamente não queremos nos forçar a preencher cada parte dela. A grade CSS também torna muito melhor trabalhar com a visualização móvel ou a visualização do tablet. Simplesmente temos que dizer que, em larguras específicas, uma coisa vai abranger todas as colunas, enquanto anteriormente ela apenas abrangia metade das colunas. Isso significa que não precisamos mais pensar nossos designs como uma visualização móvel ou uma visualização de desktop. Mas, em vez disso, podemos pensar um componente individual como se divide em uma única coluna com uma largura específica ou sendo duas colunas em outra largura. Se olharmos novamente para uma seção daquela página simples que criei, talvez isso não esteja funcionando em uma única grade. Talvez sejam dois componentes diferentes, cada um deles tem sua própria lista de colunas e suas próprias margens e paddings. Então, a coisa que os torna mais uniformes, que os faz sentir como se pertençam juntos são os preenchimentos, as margens, o espaçamento e as larguras máximas. Agora, à medida que reduzimos a largura geral do navegador, ou talvez olhamos para ele em um iPad. Talvez o componente inferior se encaixe apenas em ter uma coluna, enquanto o componente superior está em duas colunas. E então, à medida que ficamos um pouco mais estreitos ou olhamos para um celular, talvez o componente superior também seja apenas uma única coluna. A largura exata na qual essas mudanças acontecem agora está completamente dentro do nosso controle. E eles podem acontecer em larguras completamente diferentes. Não queremos necessariamente pensar uma grade como algo que criamos no início. Criamos uma grade para cada componente e eles não precisam necessariamente ser os mesmos. O que queremos criar agora é possivelmente algumas regras uniformes sobre o que essas margens e paddings podem ser e possivelmente, uma escala para tamanhos diferentes. grade Css nos permite posicionar alguns elementos em uma tabela com linhas e colunas. Agora todos eles terão uma largura uniforme e as linhas também podem ter uma altura uniforme. Podemos adicionar regras para que o número de linhas largas e o elemento seja alterado em diferentes largura do navegador. E não há mais nenhum motivo lógico para termos um número definido de colunas para toda a nossa página da Web. Cada componente pode funcionar completamente separado entre si. Semelhante ao flexbox, podemos novamente criar uma sensação uniforme de conformidade, tendo uma escala para nossas margens e larguras de preenchimento. Se você não tem experiência em desenvolvimento, esses últimos vídeos podem ter sido um pouco confusos, mas vamos trazê-lo completamente em seguida. 8. Responsibilidade de vs fluido: Ao longo dos anos, existem várias maneiras diferentes de fazer com que seus sites se adaptem a telas de dispositivos de diferentes tamanhos. Originalmente, as pessoas faziam o que chamavam de design adaptativo, onde você tentaria identificar o que era o dispositivo e depois carregava uma folha de estilo CSS diferente para que um iPhone e um computador desktop teriam dois sites diferentes. Isso foi muito trabalho, e também se tornou absolutamente impossível, pois conseguimos mais dispositivos com todos os tipos de telas de tamanhos diferentes. Os dois sobre os quais ainda falamos hoje são fluidos e responsivos. Nós tocamos no design fluido mais cedo. Falamos sobre como você poderia usar a unidade VW, a largura da janela de exibição para ajustar o tamanho do tipo de letra à medida que o tamanho do navegador se ajusta. Isso significa que, à medida que a largura do seu navegador muda de 999 pixels de largura para cem, dez centenas de pixels de largura, seu design vai se ajustar ligeiramente. Para cada ajuste na largura da janela de exibição, o design será um pouco diferente. E à medida que aumentamos a largura, aumentamos o tamanho da fonte, aumentamos a altura da linha e aumentamos o comprimento da linha à medida que criamos nossos projetos e criamos o código para implementar esses projetos sempre queremos estar cientes de onde estamos fazendo trade-offs. Agora, com algo como topografia, na verdade há várias coisas. Sempre queremos que nosso site tenha uma boa aparência. Na minha opinião pessoal, a parte mais importante das experiências do usuário, ter um site de boa aparência, tem o maior efeito sobre a experiência de um usuário. É claro que queremos que o usuário possa ler o texto de forma rápida e eficaz. E, até certo ponto, nos preocupamos com a experiência de leitura porque as pessoas podem sentir estão progredindo com textos mais em textos que eles realmente lêem mais devagar. Falamos sobre isso anteriormente em nosso módulo sobre legibilidade. Agora, para todas essas três coisas, quão bom parece, a experiência de leitura e a legibilidade. Vamos fazer trade-offs em diferentes pontos do nosso design. No entanto, com essa ideia de design fluido, não beneficia nenhum deles fazer texto fácil para alguém ler. A única variável com a qual nos preocupamos é a distância do texto do rosto deles? Já trabalhamos com o tamanho perfeito da fonte, o comprimento perfeito da linha e a altura da linha perfeita para as pessoas lerem o texto ou a fonte exata que usamos de diferentes distâncias. E, portanto, temos um design responsivo. É aqui que temos essencialmente três designs diferentes de alterações ligeiramente diferentes em nosso CSS para larguras de dispositivos ligeiramente diferentes. Tudo o que precisamos fazer é decidir qual é a maior largura que um telefone celular pode ser, a maior largura que um iPad pode ser. E podemos definir algumas regras CSS usando esses números. Há um problema aqui, não há? Porque em algum momento alguém pode simplesmente criar um telefone muito grande ou um monitor de mesa muito pequeno. As pessoas podem começar a usar suas TVs para visualizar sites. No entanto, é a técnica que geralmente é considerada boa prática por muitas pessoas, incluindo o Google e o Google usam isso para decidir se ele deve classificar um site como bom ou não em seu ranking de SEO. Então, mesmo que você não ache que responsivo é um bom sistema para fazer um site funcionar em um telefone celular. Você pode considerar como isso afetará a classificação do seu site nos mecanismos de busca. O que podemos fazer é criar código responsivo. Então, ele muda entre um telefone, um iPad e um desktop. Mas podemos permitir algum nível de fluidez entre talvez um iPad grande e um iPad pequeno. Nunca queremos fazer isso com nosso texto de parágrafo, mas para algo como nossos textos de cabeçalho exibem texto ou mesmo imagens e outras partes do site como aquela, onde talvez não seja importante quão fácil de ler é ou até mesmo o quão bom parece, mas talvez o quão bem ele atrai a atenção das pessoas seja mais importante do que realmente isso pode ser uma boa técnica. design fluido é onde o design ajusta à medida que a largura do navegador muda. Isso não é muito útil para nós na tipografia porque não ajuda com a legibilidade. Tudo o quão bom o site parece. Responsive é onde temos pontos específicos na mudança da largura onde as regras CSS atualizadas e isso mudará o estilo do site. Isso é muito mais útil, pois apenas tentamos fazer com que nosso site fique bem e funcione bem em três designs diferentes para alguns elementos em nosso CSS, podemos querer usar um pouco desses dois. Podemos querer ter o design responsivo onde ele muda entre celular e desktop, mas com um certo nível de fluidez. Então, ele se ajusta ligeiramente dependendo do tamanho do telefone. Veremos todas essas três técnicas nos próximos três vídeos. 9. Anatomia de uma grade - parte 1: Nossa grade, uma vez criada, não será exibida em nossos sites concluídos. Criamos a grade para ajudar a colocar as coisas na página. E nunca os mostramos no site acabado real. Mas isso faz uma grande diferença. Como vimos quando criamos nossas composições, podemos fazer com que as coisas se sintam mais conformadas e conectadas. Se tivermos regras sobre onde elas podem aparecer na página. Porque isso é tudo sobre regras que temos dentro de uma equipe. Vamos acabar falando muito sobre isso. E, portanto, precisamos conhecer a terminologia em torno de uma grade e todas as coisas diferentes são chamadas. Já temos nossa grade vertical mostrando aqui na tela. E lembre-se, provavelmente não queremos chamar isso de grade de linha de base porque isso é algo usado no design de impressão e é aí que a topografia fica na linha, algo que não podemos fazer com CSS. Então, vamos chamar isso de grade vertical. É bastante típico ter essas linhas divididas em incrementos de quatro pixels. Mas se você tiver um site específico com texto pesado e estiver muito preocupado com a legibilidade. Você pode querer ajustar isso um pouco com base no tipo de letra que você está usando como falamos em módulos anteriores, assim como trabalhar com uma planilha do Excel, colunas são as coisas que separa nossa página horizontalmente. Esse espaço entre cada coluna é chamado de calha, ou às vezes uma lacuna ou um beco, mas eu usaria a palavra sarjeta. E não queremos chamar esse preenchimento porque vamos usar a palavra preenchimento mais tarde, mas sempre queremos ter algum espaço aqui. A área no local da nossa grade aqui é chamada de margem. E não vamos necessariamente fazer disso o tamanho da sarjeta. Na verdade, normalmente tornaríamos um pouco maior, talvez o dobro da largura da calha. Vamos usar a margem para outras áreas da nossa grade. Mas isso é bom porque essencialmente queremos dizer a mesma coisa quando usamos essa palavra. Se você imagina que essa caixa branca é um site, mas nós olhamos para ela em uma tela muito maior em algum momento, haverá espaço nos dois lados. Essas margens externas mostradas em vermelho aqui são margens flexíveis. Eles vão crescer para preencher o espaço quando atingirmos a largura máxima do nosso site, é claro, também como o Excel, as seções que dividem verticalmente são chamadas de colunas. E se vamos usar esses dois separam nossos projetos, provavelmente queremos que essas colunas sejam um múltiplo dessa grade vertical. Já criamos essas caixas que você obtém onde a linha e a coluna se cruzam. Chamamos esses módulos. Vimos anteriormente a grade modular. Não é um ótimo nome porque os desenvolvedores usam o módulo de palavras para significar algo bem diferente, mas raramente precisamos nos preocupar em nomeá-los. Essas vezes são chamadas unidades e esse é provavelmente um nome ainda pior. Você pode ouvir as pessoas dizerem uma grade de doze unidades, nesse caso elas significam colunas, mas a unidade de palavras também pode significar Rho ou módulo. Portanto, esteja ciente dessas duas palavras, mas provavelmente evitaria usá-las realmente. Um campo é um grupo de linhas porque isso é usado para quebrar a monotonia visual, idealmente, gostaria que não seja o mesmo número de linhas, mas queremos garantir que ele se encaixe em nossa grade. Eu não gosto do campo de nome, particularmente quando estamos falando de web design, porque obviamente um campo é algo que um formulário de entrada também possui. Em vez disso, você poderia chamar isso de um grupo de linhas ou uma região vertical. A palavra região vertical é muito boa porque uma coleção de colunas às vezes é chamada de região. Novamente, eu evitaria tornar essas regiões o mesmo número de colunas de largura porque isso faz as coisas parecerem monótonas. Finalmente, isso é chamado de zona espacial, mas raramente falamos sobre quebrar as coisas dessa maneira no web design. Então, eu não me preocuparia muito em lembrar disso. Você só pode ouvi-lo de um designer de impressão em algum momento. Havia um pouco de terminologia neste vídeo, mas os poucos que você definitivamente deve se lembrar porque você vai usá-los, é a grade vertical. Já conhecemos as colunas e linhas que são semelhantes ao que você teria em uma planilha. As calhas, o espaço entre as colunas. A margem é o espaço ao lado. A margem variável para quando a página é muito grande ou muito pequena. Suas regiões verticais e horizontais que são uma coleção de linhas ou colunas. 10. Anatomia de uma grade - parte 2: Eu tenho uma grade vertical, uma grade de sexta coluna e tenho algumas regiões horizontais, ou também chamado de campos. E eu tenho essa grade vertical. Agora eu posso esconder isso de forma independente para que eles não se distraiam muito. E, obviamente, quero ligar e desligar regularmente alguns desses para que eu possa ver como todo o meu design parece. Como veremos em um momento. Um programa gráfico como sketch, InVision Studio ou Figma nos permitirá criar algumas dessas grades para que possamos ativá-las e desligá-las rapidamente com teclas de atalho. Mas para alguns deles, como as regiões teremos que criar nossas próprias camadas. Faz sentido adicionar cada um deles a uma camada diferente para que possamos ativá-los e desativá-los para nos ajudar a ver nosso design melhor. É muito confuso se tivermos todas as nossas grades ligadas ao mesmo tempo. Vamos começar a ver algumas das partes da grade que você pode ver visualmente de alguma forma. Uma linha pendurada é quase algo que você pode ver. Isso é algo que um designer de revistas costumava usar onde uma linha específica na grade vertical mostrada aqui em um vermelho um pouco mais escuro é sempre usada para colocar o título. Mesmo que o design de uma página seja completamente diferente, sempre colocamos o título nesta linha pendurada. Agora, em uma revista, às vezes é usado para um pouco de efeito visual, um pouco de gênero soco, se uma página tiver um título particularmente importante para que ela não esteja na linha de espera. E então ele quebrará a convenção e fará com que isso se destaque mais com nosso aplicativo web. É bom não fazer isso porque as pessoas estão navegando aleatoriamente e sempre precisam algo em algum lugar da página. Eles sempre sabem onde estão no site. Então, eu encorajaria ter uma linha específica na grade vertical, que é uma linha suspensa para nossos textos de cabeçalho. Já temos nossas regiões verticais e às vezes vamos separá-las, quebrar um pouco a monotonia visual dando-lhes uma cor de fundo diferente. E isso chama a atenção e nos ajuda a manter nosso ritmo vertical. Mas, em vez disso, poderíamos separar nossas seções usando linhas de fluxo como esta. Apenas uma linha preta na página realmente mostrando fisicamente uma das linhas e nossa grade vertical. As linhas de fluxo geralmente podem ser usadas para chamar a atenção das pessoas e muito para algo logo acima ou abaixo da linha. Eles são bastante exigentes de atenção e adicionam muita complexidade visual a um design com muita facilidade. Então eu diria que, a menos que você realmente precise de algo como uma dessas linhas de fluxo, eu realmente não as colocaria com frequência. Normalmente, queremos ter muitos espaços em branco em nosso design, especialmente porque não nos limitamos a quanto papel usamos, como os designers de impressão. Por que não fazer uso de todo esse branco? Isso significa que nossa grade que tomamos todo esse cuidado para criar pode não ser óbvia e pode fazer com que o site pareça um pouco de marca. Bem, já equilibramos nossas composições e oferecemos módulos. Então, talvez às vezes possamos usar um pouco disso. Poderíamos adicionar um pouco de cruz ou pontos no canto inferior para ajudar a tentar equilibrar os elementos na página. Quando o fizermos, provavelmente queremos colocar isso em algum lugar em um dos cantos da nossa grade. Realmente, quando estamos colocando nossas grades juntas, queremos pensar nisso como se estivéssemos projetando onde nosso espaço em branco vai. Pense nisso mais como uma maneira de garantir espaço para respirar do que uma maneira de colocar o máximo de conteúdo possível na página. Nem todas as regiões da nossa página terão algo nela. Muitos deles ficarão vazios. E realmente é assim que queremos. Se tivermos uma caixa colorida em torno de uma de nossas regiões e quisermos adicionar texto dentro dela, será necessário garantir que ela tenha algum preenchimento interno. Não queremos que os textos fiquem em direitos contra a borda desta caixa de limites. Mas agora, infelizmente, nossos textos de cabeçalho não se alinham bem com nosso corpo de texto. Claro, poderíamos alinhar os textos do cabeçalho a esse texto corporal. Ou outra opção pode simplesmente ser que a caixa colorida não se encaixe perfeitamente na grade. Talvez fique um pouco fora da TI. O problema com essa técnica pode ser talvez tenhamos em caixas aqui embaixo e então eles vão parecer muito, muito próximos um do outro. Não há muito espaço entre essas duas caixas. Não há realmente uma solução perfeita para esse problema. Mas para este exemplo exato, eu diria que você quer que as caixas coloridas se estendam até as bordas das regiões e cada região tenha preenchimento. Então temos um design onde tudo se sente alinhado, mas nada está muito próximo da borda de se sentir muito desconfortável. Para exemplos como este, você pode ter criado essas regiões específicas que você está usando para seus designs. E talvez você queira apenas adicionar o preenchimento diretamente para facilitar o trabalho com ele. Seu programa gráfico provavelmente terá uma maneira de ligar e desligar as grades, mas você provavelmente deseja colocar suas regiões verticais e horizontais em uma camada separada para que você possa ligue-os e desligue facilmente. Uma linha pendurada é uma das linhas em sua grade vertical qual você sempre colocará seu título para sua página. linha de fluxo será onde você mostrará uma das linhas em sua grade vertical para ajudar a chamar a atenção para algo. E quando você cria regiões horizontais e verticais e as coloca em uma camada separada, talvez você queira adicionar algum preenchimento lá também, especialmente se você tiver uma borda ou uma cor de fundo. 11. Resumo: Com tipografia, cor e composição ou grades, precisamos desenvolver nosso olho para identificar quando ele está funcionando bem. Precisamos ser capazes de ver intuitivamente quando o design parece bom e quando não, e o que precisa ser feito. Fizemos nossos exercícios de construção de intuição no início deste curso quando tocamos com composições. Agora, desenvolvemos nosso vocabulário para falar sobre grades. Quase sempre trabalhavam em equipe ou com um cliente. E em uma equipe, precisamos nos comunicar bem. Precisamos de um vocabulário compartilhado. Agora podemos falar sobre toda a anatomia e tipos de grades. Com o desenvolvimento web moderno, os componentes são construídos como pedaços individuais de código que podem ser reutilizados em diferentes partes em um aplicativo e podem ser mantidos e trocados de forma independente. Por esse motivo, todos os componentes da nossa página, na verdade teremos sua própria grade. 12. Alinhe com a grade: Como um exemplo prático para algumas das coisas que acabamos de falar. Eu criei uma grade de sexta coluna aqui e vou usá-la para alguns designs com base nas seis colunas que criei três regiões verticais. Agora, cada região tem, na verdade, uma largura diferente. Vou tentar evitar usar as colunas originais o máximo possível, porque essas regiões são muito possível, porque essas regiões mais interessantes para trabalhar com suas larguras variáveis, enquanto ainda se sentem uniformes porque eles são baseados na mesma estrutura de coluna. E sei que funcionará com CSS pelo mesmo motivo. Sei que vou precisar algum preenchimento para essas regiões verticais mais tarde, então vou adicionar isso. Agora. Estou adicionando dez pixels de preenchimento em cada um desses, que usaremos um pouco mais tarde. Aqui está um pouco do texto que criei para um dos meus sistemas tipográficos em um dos módulos anteriores, eu o fiz abranger duas regiões verticais, que tem, na verdade, três das colunas originais. E isso é totalmente bom para fazer. Agora vou adicionar apenas uma caixa de cores. Talvez eu ache que isso ajuda a equilibrar meu design ou algo assim. Está parecendo bastante vazio agora. Isso eu não posso fazer. O que eu fiz aqui é que alinhei a caixa ao lado de fora das minhas regiões verticais. Não posso fazer isso. Só posso alinhá-lo com o interior. Por exemplo, posicioná-lo aqui seria totalmente bom. Realisticamente, não vou colocá-lo aqui. Um bom lugar para colocá-lo obviamente estaria por trás do texto. E então é aí que esse preenchimento será útil. Agora eu tenho um pouco de preenchimento à esquerda e à direita, então o texto não está nivelado com a borda da caixa, o que, como vimos anteriormente, é perfeitamente bom para fazer, desde que garantimos que usemos o mesmo preenchimento para quaisquer textos subsequentes em outras partes da página. Agora, atualmente, acho que isso está muito bonito, mas não está realmente utilizando muito nossa grade. Na verdade, usei duas das regiões verticais juntas, o que significa que podemos ter apenas uma grade de duas colunas. Por exemplo, eu poderia colocar uma foto à direita aqui. E esta é uma página bem definida, mas não é tão interessante. Poderíamos fazer com que a grade funcione a nosso favor um pouco melhor. Talvez. Uma coisa que poderíamos fazer para torná-lo mais interessante instantaneamente é alinhar a imagem à grade. E esta é uma técnica bastante usada e web design, mas pode ser muito difícil de alcançar tecnicamente neste exemplo aqui eu fiz com que os barcos desta imagem se encaixem confortavelmente na sarjeta entre minhas duas regiões. Este é o meu aluno de designer me mostrou recentemente e achei que era realmente, realmente impressionante, o que você pode não notar primeiro é que a imagem à esquerda e o texto à direita usa quase a mesma grade. Ambos estão alinhados centralmente. Há um tipo de caixa de limite dentro de ambos os lados. E a imagem realmente tem algumas linhas na parte superior e inferior aproximadamente onde o preenchimento entre parte do texto começa e termina. Esta página é quase completamente simétrica porque a mesma grade é usada para a imagem e o texto, pode ser muito, muito difícil encontrar ou editar imagens para se encaixar perfeitamente nisso. No entanto, de volta ao meu design, estou muito feliz com o tamanho e o posicionamento da imagem, mas isso vai dificultar o encaixe desse texto novamente, especialmente no cabeçalho. Vamos supor por um momento que estou muito feliz em deixar o fundo escuro e os textos acendem e vamos mudar isso. Essa é outra técnica que é totalmente boa, mas você nem sempre vê com muita frequência porque precisa verificar se suas imagens vão funcionar bem, mas você pode sobrepor texto sobre uma imagem. Aqui meu corpo de texto está abrangendo uma das minhas regiões verticais. Meu texto de cabeçalho está abrangendo dois, e minha imagem está se estendendo. São regiões verticais completamente diferentes. É o mesmo conteúdo, mas é visualmente muito mais interessante do que aquele em que acabei de separá-lo da esquerda para a direita. Agora vamos imaginar que eu queria deixar tudo isso e encaixar um ícone estranho de um iate ou algo assim no topo aqui. Como um ícone é por conta própria e é uma forma obscura, muitas vezes pode ser um pouco mais difícil alinhar o texto ou imagens semelhantes ao que vimos quando estávamos olhando para as composições diretamente no comece. Não queremos que o ponto no topo deste iate toque a borda desta linha de grade. É um pouco, muito minúsculo do ícone. Ele pode se sobrepor um pouco. Então, podemos querer apenas empurrar isso sobre a caixa de limites. Ou, como é uma forma um pouco complicada de se trabalhar. Talvez se eu quisesse adicionar um ícone aqui, seria melhor alinhá-lo centralmente dentro dessa região vertical um pouco. Vamos supor que realmente não temos uma imagem nesse design e estamos usando o texto para abranger as duas regiões verticais à esquerda , como originalmente tínhamos aqui. Agora talvez gostaríamos de adicionar o ícone. Podemos querer usá-lo para que uma espécie de âncora seja projetada para tentar equilibrar o peso de cima para baixo e da esquerda para a direita um pouco. Poderíamos posicionar esse ícone no centro morto na linha limite da nossa grade para que o mestre da falha esteja bem nessa linha lá. Porque esse ícone é usado apenas como forma de ancorar nossa composição um pouco. Tudo bem se não estiver sentado exatamente dentro da grade. E também quando adicionamos pontuação tipográfica, como falamos em um módulo anterior, queremos que a pontuação fique fora da nossa grade, assim. Infelizmente, isso também não é tão fácil de fazer com a programação. E você pode querer apenas recuar algo como pontos de bala para que você não tenha o problema de tentar descobrir o que fazer com isso. Antes de falarmos mais em profundidade sobre grades, dê uma chance a este exercício. Crie uma grade simples de seis colunas. Certifique-se de que eles tenham comprimentos iguais e tenham calhas iguais. Agrupe alguns deles em regiões verticais. Adicione um pouco de preenchimento aos lados de cada um deles e, em seguida, em uma camada separada e seu programa gráfico e alguns textos do seu sistema tipográfico que você já criou. Tente adicionar algumas imagens, ícones e qualquer outra coisa que você possa ver em uma página. E tente alinhá-los dentro dessa grade que você criou. E vamos ver como isso parece. Para um desafio extra, tente manter a grade vertical que você já criou. Quando você o cria, o sistema tipográfico. 13. Grid incorporado: Espero que o exercício tenha sido relativamente produtivo. Em breve vou pedir que você crie uma grade e layouts de uma página inteira. Mas antes de fazermos isso, vamos ver alguns exemplos um pouco mais completos. E então mostrarei como realmente criar a grade corretamente. Desta vez vou começar com uma grade de 12 colunas, mas vou simplificá-la novamente em regiões ligeiramente menos verticais, cinco regiões verticais de tamanhos ligeiramente variados. Agora é aqui que elementos em potencial como texto ou imagens, poderiam ficar. Eles poderiam gastar uma região vertical dois ou três da seguinte forma. Como você pode ver, isso potencialmente nos dá algumas opções de layout para onde nossos diferentes elementos poderiam se sentar. Isso nos dá muitas maneiras diferentes de posicionar as coisas em nossa página. Vou pegar esse sistema tipográfico que criei em um módulo anterior, e vou tentar transformar isso em uma página de postagem do blog. Vou fazer isso apenas adicionando algumas imagens e talvez algumas formas coloridas. Mais tarde. Pretendo usar essas cinco regiões verticais que acabei de criar, mas vou adicionar esse texto e essas imagens a ele. E isso é o que eu inventei. Bem, a primeira coisa a saber é que eu realmente usei uma grade diferente para esta seção de cabeçalho com um fundo azul escuro e uma das imagens, eu estou usando apenas esses cinco grade de região para a área de texto mais abaixo. O cabeçalho desta página é baseado na mesma grade de 12 colunas, mas na verdade está usando duas regiões verticais diferentes, que é obviamente seis à esquerda e seis à direita. Falaremos sobre isso um pouco mais em apenas um momento. Mas antes de tudo, vamos ver o texto real baseado nessas cinco regiões. Como você pode ver, ele tem um sentimento de conformidade porque há apenas essas cinco regiões nas quais se baseia, mas ainda tem algum interesse visual porque diferentes elementos estão abrangendo regiões diferentes. E como você pode ver, eu costumava usar a grade para permitir áreas de espaço em branco, particularmente no canto superior esquerdo da área branca. E eu tentei ter algum equilíbrio visual com a forma como as imagens são posicionadas ao redor do texto. Vamos supor que decidimos que o comprimento da linha desse texto era um pouco longo demais. Aqui está outro layout com um comprimento de linha um pouco mais limitado. E então ele permite um pouco mais de espaço em branco ao redor do texto. Para o bem dos próximos exercícios que estamos prestes a fazer, recomendo brincar e ver quais opções diferentes estão realmente disponíveis para você. Talvez tente criar algumas versões de cada uma. Em seguida, vou pegar esse sistema tipográfico que criei em um vídeo anterior. E desta vez vou tentar aplicar isso a um painel de interface do usuário com alguns gráficos de dados e coisas assim. Algo um pouco mais complexo. Desta vez, na verdade, vou ter menos colunas. Vou ficar com seis. E há uma boa razão para isso, que veremos em breve, é que eu vou realmente incorporar grades diferentes. Vou separar isso em apenas três regiões verticais e dar-lhes uma certa quantidade de preenchimento. E vamos colocar nosso conteúdo lá. Por enquanto, estou usando apenas caixas e linhas para representar texto e imagens em vez de adicionar muitas coisas. Vamos supor que agora realmente queríamos adicionar mais algumas coisas a esta página. Não é complicado o suficiente. Queremos mais coisas nisso. Bem, é aqui que vamos incorporar uma grade em vez de confiar na grade que tínhamos para toda a página, que decide onde esses componentes vão e tentando trabalhar com essas regiões verticais, Vou criar uma rede totalmente nova aqui. Isso nos dá um pouco mais de controle, significa que podemos fazer mais coisas, mas também é muito mais fácil desenvolver laser e funciona muito melhor com a forma como desenvolvemos sites atualmente. Além disso, só porque eu posso, e acho que funciona melhor com o conteúdo que estou prestes a colocar. Eu fiz dela uma grade de sete colunas, não faz absolutamente nada de errado torná-lo um número ímpar como este. Separei isso em cinco sétimo e dois sétimo. E agora posso adicionar meu novo conteúdo aqui ao lado do texto. Esse novo conteúdo e essas novas regiões verticais não se relacionam necessariamente de forma alguma com a grade corporal principal que criamos em primeiro lugar. Mas tem uma sensação de uniformidade porque usamos a mesma largura da calha. E se tivéssemos margens nisso, usávamos margens semelhantes. Lembre-se, com design responsivo, essas são as áreas sobre as quais temos controle. Agora tenho certeza que você vai querer ir. Falamos de grades há séculos e você provavelmente está desesperado para abrir um programa de design e começar a criar algo. Mas apenas segure e assista aos próximos vídeos. Vou falar um pouco sobre os aspectos técnicos de usar algum software de design para criar algo assim. Acabamos de ver dois exemplos no exemplo do post do blog, o cabeçalho das postagens do blog usava um conjunto diferente de regiões verticais para o corpo da postagem do blog. E no tipo de layout mais painel, vimos como você pode incorporar uma grade separada em partes do design. Quase sempre hoje em dia vamos criar nosso design como componentes individuais. E esses componentes funcionarão em grades diferentes. A área que lhes dará uma sensação de unidade e conformidade será que eles têm a mesma largura da calha ou largura e margens semelhantes da calha. Vamos abrir nosso software de design e começar a criar isso agora. 14. Como criar nossa grade - parte 1: Quando você olha em volta de algumas das galerias de inspiração ou vê um trabalho de design realmente incrível. Muito disso, infelizmente, não funciona no mundo real. Então, quando estamos colocando isso na Figma, queremos ter certeza de que estamos criando algo que, quando o desenvolvedor o pega, eles podem realmente criar algo real com ele e realmente vai trabalho. O desenvolvedor sempre tomará algumas decisões de design. Sempre haverá mudanças nesse estágio porque você não pode criar um design que funcione completamente em toda a capacidade de resposta e tudo mais. Sempre há algumas decisões tomadas pelo desenvolvedor. Vamos tentar reduzir a quantidade de decisões que os forçamos a tomar. E eu estarei trabalhando em Figma. Recomendo usar isso como seu software preferido . E há várias razões, novamente, eu não vou entrar, mas não se preocupe muito. Não estou, isso não explicará como usar Figma, apenas explicando as coisas que eu ligo e uso para ajudar a criar uma grade. Então, para nossa topografia, já criamos uma grade vertical como essa aqui, tenho uma grade vertical de quatro pixels. Se estamos particularmente preocupados com a legibilidade, provavelmente não teremos algo que seja exatamente quatro pixels para nossa grade vertical, porque ela será baseada na altura da linha do nosso ideal altura do corpo do texto, como já falamos em algum comprimento. No entanto, porque alguns softwares de design simplesmente não nos deixarão trabalhar com três pontos cinco pixels ou algo assim. Às vezes, pode fazer sentido apenas fazer quatro pixels enquanto estamos fazendo o design e depois explica o desenvolvedor depois, todos os números precisam ser ajustados um pouco quando o criam, porque não parecerá muito diferente se você não estiver lendo um grande corpo de texto em seu design. Mas isso vai fazer uma grande diferença quando você estiver, um usuário vem ler o texto. Então, se no módulo de topografia para um determinado tipo de letra, você decidiu que a melhor altura da linha realmente lhe daria uma grade de 5,7 pixels ou algo um pouco obscuro assim. Talvez apenas faça seis para o design e diga ao desenvolvedor depois que você o ajustou. Se não estamos super preocupados com a legibilidade, as pessoas tendem a gostar de trabalhar com algo como quatro pixels, porque é muito fácil metade para 2,5 para um, se precisarem e dobrá-lo e trabalhe com ele dessa maneira. Porque essa grade de layout de quatro pixels é para coisas muito granulares. Vou transformá-lo em uma grade como em linhas e colunas completas. Agora estou usando Figma. Então, se eu selecionar uma placa de arte ou um componente, posso ir até onde ela diz grade de layout. Posso adicionar um e posso alternar entre linhas, colunas e grão. Vou ter esse pixel completo como uma grade. Agora, podemos adicionar uma grade vertical mais proeminente para múltiplos maiores, digamos 16 pixels, é quatro vezes quatro. Agora, a maioria dos elementos vai se alinhar a essa nova grade de 16 pixels. Mas quando precisamos fazer algo como treinar altura da linha topográfica e garantir que coisas menores como essa se encaixem no lugar. Temos essa grade de quatro pixels que podemos ligar novamente para o design que estou prestes a criar usando essa grade, todas as margens, todos os padrões, todos eles serão múltiplos de quatro, mas idealmente múltiplos de 16, e isso vai torná-lo ainda mais uniforme. Agora, vamos começar a olhar para algumas colunas. Então, nosso exemplo que acabamos de fazer, tínhamos uma grade de colunas como essa. Agora, historicamente, fazemos esses 12 só porque essa era a restrição de estruturas CSS como o Twitter Bootstrap set que deveríamos, mas pela minha experiência é 12, um número muito bom. Agora, como vimos em nosso último exemplo, vamos incorporar grades menores nisso. Na verdade, vamos usar esta grade de coluna principal 12 para posicionar onde nossos principais componentes vão. Eles não serão realisticamente nenhum texto ou imagens ou algo parecido alinhado diretamente a essa grade. Isso é muito importante lembrar porque se você falar com um designer de impressão, eles pensarão, bem, você só tem mais 12 colunas grade e coloca tudo lá. E, na verdade, se você falar com um web designer de mais de alguns anos atrás, eles podem pensar a mesma coisa. Mas a maneira como desenvolvemos sites e aplicativos agora significa que os componentes realmente não têm acesso a essa grade. Eles realmente têm suas próprias grades independentes, como vimos no último vídeo. Um último ponto nesta fase antes de seguirmos em frente é que você vai ter um monte de grades. Claramente, você terá grades em diferentes componentes. Você tem essa grade vertical, você tem essa grade granular, a de quatro pixels. E agora você tem essas colunas. Há grades em todos os lugares. Agora estou usando Figma. Se eu segurar o Control G, ele vai desligar todas as grades. E se eu segurar o Control G novamente, ele vai ligar todos eles. Se você estiver usando algum software de projetos diferentes, provavelmente há uma chave diferente para ligar e desligar rapidamente a grade. Provavelmente é a mesma coisa. Eu também posso, é claro, esconder cada grade de forma independente com o ícone de olho pequeno ao lado da grade, onde diz grades de layout ao lado. Morto simples. Primeiro passo aqui, dê um dos sistemas tipográficos que você já o criou. Pegue a grade vertical que você usou para ela e multiplique-a por digamos, quatro para criar uma grade vertical maior que irá alinhar a maioria dos seus itens na página. E então também crie essa grade horizontal. Geralmente, são 12 colunas, mas não precisa ser. E também você pode voltar e mudar isso mais tarde se descobrir que realmente não funcionou aos 12 anos. Depois de começar a traduzir a página, seu exercício simplesmente cria uma grade vertical maior e cria a grade horizontal inicial, potencialmente cerca de 12 colunas. 15. Como criar nossa grade - parte 2: O que eu tenho aqui é uma página com uma grade de 12 colunas, que tem uma margem de 48 pixels nas laterais, 32 calhas. E isso porque tem uma grade vertical de 16 pixels. Isso só será usado para posicionar esses dois componentes principais. Este cinto à esquerda, que obviamente vai ser algum tipo de menu ou algo assim. E há urso à direita, que obviamente vai ter alguns gráficos de painel e coisas assim. Ocasionalmente, talvez alguns componentes menores que possamos alinhar diretamente a essa grade de 12 colunas. Por exemplo, coloquei um logotipo e um cabeçalho de página aqui. Vamos colocá-los. Para os outros dois componentes. A coisa que é obviamente que você vai ser um menu à esquerda. E o que obviamente é que você terá o conteúdo da página à direita. Eu os fiz componentes. Eu desenhei duas caixas alinhadas à grade original de 12 colunas. Selecionei um deles e cliquei no botão Componente na parte superior. E isso agora me dá a opção de adicionar minhas próprias grades de layout a cada um desses componentes individuais. Poderíamos ter o mesmo efeito na Figma usando pranchetas. Mas a vantagem de um componente é que, na verdade, provavelmente não vamos reutilizar alguns desses bits em outras páginas quando construirmos o resto de nossos projetos. Agora, para esses dois novos componentes, eles têm suas próprias colunas e linhas, margens e calhas. E lembre-se, claro, as margens e calhas são todos múltiplos de quatro e idealmente múltiplos de 16 porque isso é o que temos controle. Então é isso que vai fazer com que pareça uniforme. Nesse estágio atual, isso pode ser um modelo. Esse pode ser um modelo que usamos em várias páginas para garantir que elas tenham um layout semelhante. Eu poderia colocar isso de um lado e fazer uma cópia dele e simplesmente chamar isso de modelo mestre do meu aplicativo. Agora vou dividir esta seção à direita em componentes diferentes. E novamente, farei os componentes Figma para que eu possa dar-lhes suas próprias margens e calhas. O número de colunas aqui pode ser diferente. Não precisa ser três no topo aqui. Poderia ser quatro, pode ser qualquer coisa. Ele não precisa se relacionar de forma alguma com as colunas originais que tínhamos na página. Neste exemplo, criei três para ajudar a ilustrar um ponto muito importante para você, que é que temos um espaço entre os componentes na parte inferior e temos uma calha nos componentes no topo. E estes não estão perfeitamente alinhados. Não podemos levá-los sempre perfeitamente alinhados. Essa é apenas uma das baixas de ter uma grade responsiva. Não há a mesma quantidade de espaço rígido e espaço fluido. E então nunca seremos capazes de fazer com que estes combinem perfeitamente. Agora posso adicionar algumas coisas reais no meu menu à esquerda, garantir que ele se alinhe bem à minha grade, alguns textos, alguns ícones. Posso alinhar algumas coisas neste componente superior e na direita e na parte inferior. E vou colocar outro subcomponente neste inferior aqui também. Então, o que temos agora é que há outra caixa dentro desta caixa, que também terá suas próprias margens. É seu próprio componente. Agora, o conteúdo dos subcomponentes realmente não se alinha com mais nada na página, mas ainda parece uniforme e ainda se sente em conformidade porque usamos margens semelhantes em torno dessa margem ainda é um múltiplo de quatro. E então há algumas coisas que não se alinham. Mas eu sinto que o design tem esse senso de conformidade, mas também tem essa área de sala de manobra. Há áreas de fluidez. Se eu apenas pegar o lado direito de todo o design, posso esticá-lo, posso encolhê-lo, e eles ainda funcionam. Mas observe que só posso esticá-lo e encolhê-lo dentro de um pequeno espaço confinado aqui, é por isso que coloquei essa caixa roxa atrás do design. Para esse segundo estágio na criação de sua grade, você criará algumas grades de componentes. Posicione que alguns componentes nas grades, você o cria no último vídeo, vertical e na grade horizontal principal. E dê a cada um desses componentes sua própria grade com suas próprias margens e suas próprias calhas. E tente usar medições universais para essas calhas e margens que você já usou em todo o seu design. Idealmente, múltiplos dessa grade vertical que você criou originalmente. Tente experimentar um pouco como esses componentes se encaixam na página e como eles são grades funcionam e, em seguida, adicione algum conteúdo a ela. Você pode voltar ao artigo original da Wikipédia que você usa para obter seu texto. Ou você pode simplesmente abrir um aplicativo que você usa com bastante frequência e simplesmente copiar o texto do que imagens e símbolos e coisas assim fora dele. Não se preocupe muito se o conteúdo não fizer sentido. Nesta fase, estamos aprendendo a alinhar as coisas em nossa grade. E também estamos aprendendo a usar essas habilidades que criamos no primeiro módulo, criando uma composição bonita que é equilibrada e todas essas outras coisas. Então, por favor, sinta-se à se divertir e experimentar isso. 16. Como criar nossa grade - parte 3: Vamos dar uma olhada em como podemos tornar nossa grade mais responsiva para simplificar isso um pouco e facilitar a compreensão. Acabei de fazer isso uma grade de seis colunas desta vez. Mas o que eu também vou fazer é dizer que quando estiver em um tablet, na verdade vai ser três colunas. E quando estiver em um celular, será uma coluna. Nunca podemos dizer com certeza se alguém está em um celular, tablet ou desktop, e também não é realmente a coisa mais importante. Na verdade, estamos falando sobre a largura da janela do navegador. Esses três projetos são, na verdade, 600 a 900 pixels, novecentos e cem, cento, dezentos e duzentos pixels, e 1201 a 1600 pixels. Para tudo abaixo de 600 pixels, não haverá alteração. E para tudo acima de 1600, teremos margens variáveis maiores no lado esquerdo e direito. Então, abaixo de 600 ou acima de 1600, nada é fluido, tudo é estático. E então, entre cada uma dessas seções, é aqui que temos o sistema de bloqueio do canal. Falamos sobre isso. Há um certo elemento de design fluido entre seiscentos e novecentos, por exemplo, não queremos que nossa tipografia cresça e diminua à medida que a janela do navegador cresce e diminui porque já trabalhamos meticulosamente bons números para legibilidade. Mas certas coisas em nossa página vão se esticar e esmagar. Para tornar isso um pouco mais fácil de ver, adicionei uma caixa roxa atrás do lado direito de cada um desses projetos para que possamos ver a sala que ela tem que se mover. Então, por exemplo, no maior design, que obviamente seria para uma tela de desktop de onde cerca dos marcadores de pixel 1201 para onde o 1600 pixel March ele marca. Existe essa caixa roxa. Dessa forma, posso facilmente esticar e encolher minha placa de arte entre esses dois pontos de interrupção e ver como essas colunas ficarão diferentes. E depois de adicionar conteúdo da página, posso ver como eles ficarão diferentes em larguras ligeiramente diferentes. Para cada uma das caixas eu adicionei a cada um desses três layouts. Selecionei as restrições para ser esquerda e direita. O que significa que esses componentes permanecerão nas restrições de onde a grade de coluna estava. Esses pontos de interrupção adicionei à grade mestre a 900 pixels, onde ela muda entre 13 colunas e 1200 pixels, onde ela muda de três para seis colunas. Estas são posições relativamente padrão para que os freios ocorram para que o número de colunas mude. Se fizer mais sentido no seu design para eles quebrarem em um ponto diferente, sinta-se à vontade para não colocá-los nessas posses exatas. E, claro, páginas potencialmente diferentes em seu site também podem ter pontos de interrupção em lugares ligeiramente diferentes, se isso fizer sentido. Mas esteja ciente de que isso adicionará mais complicações ao trabalho de desenvolvimento e precisará ser comunicado e compreendido pelo resto da equipe de design. Se olharmos para o layout dos componentes nessas três visualizações de largura diferentes, podemos ver que alguns dos componentes se separaram de ser metade da grade para toda a largura do a grade e coisas assim em várias larguras diferentes. Vamos dar uma olhada em um componente específico. Aqui temos um componente que abrange metade da largura do design. E ele vai ter sua própria grade. Eu liguei uma única linha e uma única coluna com uma margem de 16 pixels. 16 pixels sendo bastante uniformes em todo o design que estou criando. Agora, tudo neste componente precisa funcionar nessa grade. Esse componente também pode ter várias linhas ou várias colunas. E se assim for, teria uma largura de calha uniforme, que seria um múltiplo de quatro pixels. Deixei um texto alinhado e tenho direitos alinhados com um gráfico de pizza. E na Figma nas restrições, o texto está definido como restrição à esquerda e o gráfico de pizza é definido como restrição, certo? Isso significa que agora posso ver como esse componente fica dentro das restrições de fluidos desse experimento atual. O design grande é fluido para 400 pixels e isso é metade da largura. Portanto, é fluido para 200 pixels. Eu só quero verificar se funciona dentro desse intervalo de 200 pixels. Agora vamos dizer que quando nossa página se encaixa com apenas três colunas de largura, esse componente é apenas uma dessas colunas, então é um terço da página. Isso tornará a largura do componente drasticamente menor. Então, talvez o layout mude, talvez agora apenas todo o conteúdo esteja um sobre outro e esteja alinhado centralmente. No entanto, é claro, ainda está trabalhando dentro das margens. E então digamos que quando a largura do navegador estiver abaixo de 900 pixels, talvez esse componente se encaixe para estar em largura total porque existe nesse ponto apenas uma coluna, como já sabemos. Agora, isso realmente significa que o layout para esse componente será idêntico nas paredes móveis e de desktop realmente foi um pouco diferente em tablets, ou devo dizer um pouco diferente, entre novecentos e cento, dezentos, duzentos pixels. Mas a posição real que ela se encaixa está em algum lugar entre aqui e aqui. Agora, pode ser que o ponto em que o layout desse componente muda esteja, na verdade, em algum lugar entre 901.200 pixels, pelo que quero dizer o ponto em que ele se encaixa de ser seis colunas em três colunas para o layout da página não são necessariamente a posição exata em que o layout desse componente individual muda. No entanto, novamente, para tornar as coisas mais fáceis para o desenvolvimento e também mais fácil se comunicar com outros designers, eu normalmente tentaria evitar fazer isso. Observe também que eu fiz a topografia menor para a versão móvel do componente do que para a versão desktop do componente. Porque, como já sabemos, estou trabalhando em um programa de design na tela do meu computador. O que significa que estou trabalhando com os pixels de referência da tela da minha área de trabalho. Não estou vendo os designers no meu celular, o que, claro, terá pixels de referência menores. Este é um tópico um pouco mais avançado e não algo que você sempre fará com frequência ao acompanhar o desenvolvedor fará algumas chamadas de julgamento no momento do desenvolvimento sobre exatamente como ele funciona várias larguras. Então, tudo pode caber. No entanto, queremos ajudar o máximo que pudermos quanto designers. Então, vamos nos certificar de que criamos pelo menos uma outra versão. Pegue o design que você criou no último vídeo e, desta vez, crie um novo, mas uma visão muito mais estreita. Talvez tenha duas colunas em vez das 12 originais. Agora, adicione os mesmos componentes que você entregar no último vídeo a essa nova visualização. Então, eles serão componentes muito mais estreitos. E talvez você queira pensar em restringir tudo nesses componentes à IVR esquerda, direita ou esquerda, direita, para que você possa ajustar a prancheta um pouco e ver como ela se parece, por exemplo, um telefone um pouco mais largo ou um telefone um pouco mais estreito. Se você tem todo o tempo e todo o orçamento do mundo, você pode fazer o que eu fiz com componentes únicos neste vídeo onde verifiquei se ele funciona em cada largura possível. 17. Resumo: Uma grade uniforme dará instantaneamente aos nossos projetos uma sensação de conformidade. Ao alinhar nossos elementos a uma grade. Não estamos apenas facilitando a vida do nosso desenvolvedor, estamos fazendo uma das mudanças mais simples designer pode fazer para melhorar drasticamente a estética geral de um design. Estamos prestes a criar nossa própria grade para usar com nosso design. Mas primeiro, precisamos entender algumas coisas sobre como o CSS moderno funciona. E na próxima seção, aprenderemos um pouco mais sobre como o desenvolvimento moderno baseado afetará a forma como usamos grades no design. Na minha opinião, o mundo do design e do desenvolvimento tornou-se complicado demais para qualquer um dominar ambos. Mas, para projetar usando grades, precisamos entender o CSS Flexbox e grade CSS que vimos nesta seção. Agora você está pronto para parar de criar uma grade para seu design.