Uma introdução ao web design responsivo: um design para cada dispositivo

1. Introdução: Oi. Sou a Spencer. Sou um web designer aqui na Skillshare. Na verdade, eu sou parte da equipe que projetou o vídeo que você está assistindo a cena agora. Então, quando você está navegando, olhando para seu próprio perfil, carregando seu projeto, tudo foi tocado pelo processo de design que eu e os outros designers fazemos aqui. Nesta aula rápida, você aprenderá o básico da criação de uma grade adaptável. Adaptável significa que esta grade vai conter todos os elementos do seu design e se você está olhando para ele em um laptop, um tablet, um telefone, tudo realmente vai se ajustar de acordo com uma grade em qualquer tamanho da tela que você puxa para cima este site. Com alguns ajustes, você geralmente pode ajustar o design que você já tem para caber dentro de uma nova grade que você faz. Mas você também pode usar o conjunto de habilidades que você tem para quaisquer projetos novos que você pode apresentar. Isso realmente ser colocado em uma grade. Você pode ouvir grades e pensar que as grades são limitadas, que elas vão restringir seu design, mas isso realmente não é o caso. As grades são um sistema visual subjacente. Eles não são a representação visual do que você está criando. Então, uma grade realmente simples vai funcionar para qualquer coisa que você criar seja limpo, complexo, caprichoso, até mesmo o seu floco de neve de um design. Não há muito tempo, Skillshare não era responsivo e não parecia bem em telefones, que é um problema porque hoje em dia muitas pessoas estão acessando a web em seus telefones, em seu tablet. O que você vê nesta aula é que não é tão inacessível, não é tão difícil de fazer. Então, eu realmente vou mostrar a vocês o processo do que fizemos de pegar a página inicial e ajustá-la para caber na grade que criamos para o Skillshare. 2. Introdução: por que ser responsivo é importante: Então, aqui temos a página inicial de marketing do Skillshare de algum momento do ano passado, e isso é mostrado agora em 100% e essa é a única maneira que ele foi projetado. Ele foi projetado para o desktop, para um laptop. Por direito, parece muito bom neste tamanho. Você tem seu cisalhamento no topo, principal chamada para ações, quer que você se torne um membro a partir daqui, ou você pode clicar para saber mais e obter mais detalhes. Então temos algumas sub-seções abaixo. Então, essas são principalmente feitas de imagens, link de texto, que é o título, alguns sub-cópia abaixo disso, e até mesmo o mesmo para a seção da comunidade, vídeo, imprensa, e nós temos um rodapé na parte inferior com um monte de links em ele. Se diminuirmos um pouco e vamos dizer que estamos fingindo que agora isso é reduzido e ajustado em um tablet. Não é tão ruim reduzido a este tamanho, não é ideal, mas nenhum dos elementos realmente são tão pequenos. Então, você ainda pode ler o texto, o botão ainda parece muito grande, as imagens ainda são agradáveis, você sabe o que você está olhando. Então, no geral, meio que funcionou, não um disjuntor de negócios. Mas se formos até aqui e olharmos para o celular, então isso é 100 por cento. Então, o que eu fiz aqui foi pegar o design anterior e reduzi-lo, que é o que aconteceria. Então, você tem seu design que é cerca de mil pixels aqui, e eu acho que é um pouco mais e nós o dimensionamos para cerca de 400 pixels de largura, que vai depender do telefone que você usa mas apenas da maneira que o ilustrador , é ainda mais difícil de ler, mas você pode ter a idéia do tamanho do botão e do tamanho do texto, esse texto é realmente pequeno e difícil de ler. Esses links de texto antes e os botões, não mais muito legíveis, não podem realmente tocá-los muito facilmente, e é realmente difícil de entender, você precisa ampliar para realmente fazer qualquer coisa ou ler qualquer coisa nesta página, que não é uma experiência de pouso ideal. Então esta, a página inicial, foi na verdade a nossa página mais visitada no celular. Quase 20% dos nossos visitantes da página inicial estavam vindo por telefone. Meio que por direito. Esta página da Mobile tinha mais de 40 por cento de taxa de rejeição e o que isso significa é que, as pessoas que estavam visitando o site de um telefone estavam saindo imediatamente a uma taxa muito maior do que o desktop. Com isso, a quantidade de pessoas que estavam fazendo o que nós queríamos que eles fizessem a partir desta página que é tornar-se um membro era realmente baixo. Muito mais baixo do que o desktop e isso porque você realmente não vê a chamada à ação muito bem, você não vem aqui e realmente entende o que você deve fazer ou o que Skillshare está tentando lhe dizer. Então, nós realmente sabíamos que precisávamos otimizar esta página para celular ou vocês continuariam saindo. Então, nós embarcamos na criação de um sistema de grade responsivo em todo o site, que seria adaptar todas as nossas páginas antigas, como esta, para uma nova grade e usar como base para cada nova página que projetamos para avançar. No próximo vídeo, vou explicar um pouco mais sobre o que é uma grade básica. 3. Projeto: projete uma página inicial de forma responsiva: Então, brevemente, antes de começar a falar sobre grades e pontos de interrupção, eu quero falar sobre o projeto rápido que você vai criar aqui, que é encaixar ou projetar uma página de um site em uma grade responsiva. Então, se você tem um site agora que não é responsivo, vamos corrigir isso, vamos fazer esse projeto aqui. Mas se você não tem um site, ou você realmente não quer trabalhar em seu site, eu entendo que, nós poderíamos escolher o site do seu restaurante favorito. A maioria dos restaurantes tem sites. Eles são muito simples, mas não é surpreendentemente responsivo. Até uma grande corrente como o Olive Garden. Desculpe, Olive Garden, não meu restaurante favorito, tem um site simples, não responsivo. O primeiro passo é tão fácil. Você deveria fazer isso agora. Cinco minutos no máximo. Pegue uma captura de tela do site que você está fazendo como está, seja seu próprio site, o site do restaurante que você quer fazer, ou um design que você colocou em prática, mas ainda não construiu. Pegue essa captura de tela, faça o upload para a galeria do projeto, e esse é o primeiro passo. O projeto final que você vai compartilhar para esta classe vai ser pegar aquela tela que você decidir fazer e você vai fazer o upload em três tamanhos. Então, haverá desktop, tablet e telefone, e ele vai funcionar dentro dessa grade. 4. O que é um sistema de grade?: Aqui, eu tenho um design pared para baixo tipo de um wireframe. Na verdade, é totalmente wireframe. Como pode ver, coloquei uma grade em cima dela. Então, esta é a grade de 12 colunas que usamos Skillshare, e divide o espaço horizontalmente nessas unidades chamadas colunas. As colunas são os bits mais largos brancos. Entre eles temos as calhas. Então, essas 10 linhas e calhas realmente só estão lá para fornecer espaçamento uniforme entre colunas. Do conteúdo que você vê qual é o texto e as imagens, eles estão contidos na grade, mas podem variar de largura. Então, obviamente, eles vão ocupar mais do que uma única coluna de grade. Este texto aqui vai todo o caminho através de todos os 12 e essas imagens são divididas em unidades menores de quatro colunas cada. Isso permite que três imagens se encaixem em uma linha. Essas colunas vão diminuir proporcionalmente com o conteúdo dentro. Então, à medida que nos movemos para cá, à medida que chegamos a uma tela menor que faz uma grade menor e mais apertada, então não faz uma grande diferença notável de como ele funciona. Então, você verá que muitos dos textos caiu para esta terceira linha, porque o tamanho do texto não mudou apenas a quantidade de espaço que podemos exibi-lo mudou. Mas é um pouco mais óbvio quando você olha para esses rostos sorridentes lado a lado, como esses rostos sorridentes na tela menor ainda ocupam quatro colunas, mas as quatro colunas agora não são tão largas. O que acontece com o texto abaixo como este está contido como uma unidade é um texto semelhante ao que vimos antes cai. Na verdade, ele está caindo de duas linhas para três, que significa que todo o conteúdo que se sentaria abaixo vai apenas ser empurrado para baixo ainda mais. Agora aconteceu que a página tão geralmente quando você pega uma página como esta, e você torná-la um pouco menos larga em uma grade, a página se torna uma página de rolagem mais longa. Então você pode estar se perguntando como você decide sobre o seu sistema de grade. Que tamanho, e quantas colunas e que é uma boa pergunta. Então, vamos rolar até aqui. Esta é apenas uma tela que mostra que, geralmente, quanto mais colunas você tem em sua grade, mais opções de layout você tem. Então, neste momento, esta é uma grade de duas colunas. Então, se olharmos especificamente para os objetos de rosto sorridente, você pode ver que você tem duas opções de layout, quatro itens dentro de uma linha. Você tem uma largura total que vai ocupar ambas as colunas ou você pode colocar um item em cada coluna. Então, o que você tem aqui em metade do tamanho. Se transformarmos isso através da grade de coluna em uma grade de quatro colunas, você vai ter muito mais opções, porque como você pode ver, você mantém as mesmas opções de largura total que agora está em quatro metade, que agora está em Dois, e pegamos esses caras. Então, agora você tem colunas individuais que são metade do tamanho do que é em uma grade de duas colunas, e quando você tem várias colunas, você pode tornar as coisas maiores e menores dentro da mesma linha. Então, se você quiser tratá-lo como uma seção primária com algo secundário ou misturar e combinar um pouco o layout, você tem essa opção. Então, isso vai crescer exponencialmente à medida que você adicionar colunas em sua grade. Acabamos indo com uma grade de 12 colunas na escultura, nós brincamos com um monte de opções diferentes. Então, isso o que temos aqui é na verdade uma grade com 12. Sabíamos que queríamos um design que fosse divisível por dois, três e quatro. Então, aqui vemos que é divisível por três, para que possamos ter linhas com itens de família e ter variedade de se quiséssemos itens menores, poderíamos colocar quatro imagens através e tê-las três colunas cada, e assim por diante. No próximo vídeo, mostrarei como ajustamos um de nossos designs para caber neste novo sistema de grade de 12 colunas. 5. Criando uma grade: Então, agora vamos olhar para trás para o design da página inicial que vimos antes de alguns vídeos atrás, e em cima dele estava a grade que vimos no último vídeo. Então, o que vamos fazer agora é mostrar como podemos ajustar um design existente. Às vezes muito facilmente para esta grade para que possamos fazê-lo funcionar de forma responsável, e em tamanhos de tela menores que, como vimos, esta página inicial não faz atualmente. Então, as duas primeiras seções são realmente muito boas. Nós realmente projetamos esta grade com base em torno dessas páginas existentes que estão às 9:30. Então, ele vai olhar à primeira vista como se tudo se encaixasse dentro dele muito bem, como as coisas se alinham à grade externa aqui, e aqui à direita. Nós realmente não precisamos ajustar esses botões ou esse texto, eu não vou. Eu não acho que cada botão precisa estar em cima de uma sarjeta e que tudo precisa ser espaçado a largura de uma calha, eu acho que na verdade seria um pouco estranho neste caso. Então, vamos deixar isso em paz e saber que, como quebra de texto, vamos acertar um ponto de interrupção, sobre o qual eu vou falar um pouco mais tarde, que eu vou ajustar os botões quando chegar a um certo tamanho. Então, isso podemos deixar sozinho neste tamanho e o mesmo para isso. Então, isso nós investigamos, mas porque nós temos uma grade de 12, e nós temos uma linha de três, ele já funciona. Ele se encaixa dentro da grade, eles estão espaçados 30 de distância que são essas calhas. Então, esta seção para agora meio que já está feito. No entanto, quando chegarmos a esta peça, temos uma fileira de cinco itens. O que não funciona porque 12 não é divisível por 5. Então, como esses itens não têm calhas entre eles, quando essa grade fosse encolher, eles não seriam espaçados corretamente. Então, temos algumas opções aqui. Estamos vendo isso, podemos dizer que podemos ir a uma fileira de seis projetos, em outro projeto aqui, o que significaria tornar esse cara menor e ter dois, mas isso cria um pequeno problema. Então, além de ser muito pequeno, você pode ver que com certos nomes e seguidores, isso vai criar um problema. Eu realmente não quero que isso flua para a próxima linha e vá muito mais alto do que essas imagens. Então, eu não acho que ser dois condenados vai funcionar. Mas, se formos para três, então temos mais espaço do que temos agora para nomes e metáforas. À medida que isso cresce neste empurra para baixo, isso vai empurrar todo o resto para baixo. Por causa da velocidade, eu não vou ir em frente e fazer isso, mas como você mover as coisas para baixo apenas para ter certeza de que tudo se move de acordo. Mas como você vê aqui, com este sendo três, não podemos caber cinco itens com três colunas de largura. Então, um vai ter que ser cortado. Então, nós vamos descer para quatro, que neste caso, eu acho que está tudo bem. Se você não acha que quatro é suficiente, mas quer mantê-lo tão largo, você pode dizer que você vai ter duas filas de projetos e ter oito projetos. Então, eu vou ir em frente e excluir isso, e através da magia da TV, eu vou puxar isso que eu fiz antes, e estou pronto para ir. Vou deixar cair assim. Aí está você. Agora você pode ver que eles estão espaçados pela sarjeta, e você pode imaginar que enquanto isso encolhe, a sarjeta permanece a mesma. Todos eles trabalharão proporcionalmente juntos nesta grade mais apertada. Vamos em frente e fazer o mesmo para esta fila de cinco. Então, novamente, digamos que quatro é bom o suficiente para nós e vamos eliminar um. Então, desculpe TechCrunch. Gosto muito de você. Mas você não se encaixa agora. Então, nós iria em frente e fazer essas todas as linhas de ou três colunas de largura. Aí está você. Esta seção agora se encaixa dentro da grade. Para este tipo lá em baixo, temos cinco. Neste caso, e em todos esses casos você pode querer discutir a UX do que é importante manter, você pode querer reconfigurar as coisas para caber dentro desta grade, fazer uma mudança maior, mas eu acho que para nós agora Tudo bem tirando assuntos, porque aqueles vivem dentro das escolas. Agora, mesmo que os links da mesma forma que esses prisioneiros ficam menores, isso vai se aproximar, e eles só vão se aproximar. Então, vamos ter estes alinhados a essas grades. Ele não tem que estar todos alinhados sob a mesma grade quando você tem quatro colunas, mas eu acho que parece bom ele mantém muito simples. Então, é assim que eu vou fazer isso funcionar aqui. Aí está você. Agora, o que uma vez não foi contido corretamente dentro de uma grade, com alguns ajustes simples. Isso poderia ter sido mais fácil do que algumas outras páginas que estão lá fora. Ele se encaixa muito bem dentro da grade. Tudo está contido na coluna, espaço por uma calha que precisa ser. Como eu disse antes, estes não são. Eu acho que se isso tivesse um espaço de sarjeta entre ele, na verdade é demais. Eu acho que muito espaço entre a imagem e o nome, parece ruim. Então, sob a unidade, eu realmente não estou tão preocupado com isso ficando menor. Aqui temos para isso. No próximo vídeo, vamos falar sobre pontos de interrupção. Os pontos de interrupção são a forma como as grades se ajustam quando necessário com base na largura da tela que você está visualizando. 6. Demonstração ao vivo do ponto de interrupção: Agora, vamos fazer uma pequena demonstração ao vivo. Então, no site Skillshare, Skillshare.com/classes, vou mostrar-lhe, apenas alterando a largura do navegador, esta grade encolhendo em ação e pontos de quebra. Então, enquanto eu o faço menor, você pode ver que ainda estamos no ponto de interrupção um, mas as imagens estão ficando menores proporcionalmente, sarjeta permanece a mesma e está mantendo-as separadas. Você pode ver o texto abaixo nessas unidades começa a quebrar. Muito em breve, você vê-lo embrulhado para uma terceira linha. Então, nada disso é realmente considerado um ponto de interrupção, mas ainda está empurrando o conteúdo abaixo. Se você viesse para o local com este tamanho, parece bom. Se a sua janela é assim tão larga, ainda parece bom. Então, o conteúdo está realmente se encaixando na janela em que ele está. Uma vez que começamos a olhar para alguns pontos de interrupção, que você possa ver rapidamente, ele cai para uma segunda linha, então esse é um pequeno ponto de interrupção que você colocou lá, porque nós não queríamos que o cinto se sobrepusesse com a barra de pesquisa. Mas aqui, você vê isso indo para o tablet. Então, no tablet, o menu muda. Temos menu de hambúrguer em ambos os lugares. Então, antes disso, tínhamos Minhas Classes e o sino lá. Ele vai para dentro e pode parecer um pouco cedo, mas ainda é geralmente bom manter o menor número possível de pontos de interrupção. Ele realmente simplifica o design, simplifica o desenvolvimento dele, e funciona todo o caminho para dispositivos móveis. Então, movendo-se para o tablet, vemos algumas outras mudanças acontecendo como o trilho que existia no lado esquerdo, que tinha todos esses pavimentos. Agora, ele foi removido e colocado no topo. Ele só fez links, o que faz sentido porque você não precisa de estados de rollover em um tablet porque você está apenas tocando nele, então você pode realmente obter o estado de rollover. Você também percebe que as calhas mudam para 20 pixels. Como esses itens são menores agora, geralmente gostamos de mantê-los um pouco mais juntos e acho que parece um pouco melhor como uma grade. Se continuarmos ainda menores, em breve alcançaremos o celular. Então, móvel há algumas outras mudanças que acontecem. Então, nós fizemos isso no ponto de quebra, o título menor, e nós alinhamos no centro. Então essa é uma pequena mudança que fizemos lá. Também tornamos essas opções mais amplas. Fizemos largura total que é agradável e móvel. Você quer que as coisas que queremos que você toque como botões ou menus sejam um pouco maiores porque seus dedos são um pouco mais gordos do que o cursor do mouse. Sem ofensa. Também mudamos para uma grade de uma coluna. Então, essas imagens são realmente um pouco maiores agora, mas é uma visão muito mais simples que realmente se adapta muito melhor para dispositivos móveis. Então, agora, podemos olhar para outro exemplo de site, que é The New Yorker. Encontrei um artigo aleatório sobre tartarugas marinhas. Se você rolar para baixo, você vai notar, nós sabemos que há muito mais colunas, e dois, mas eles geralmente têm duas seções para que eles têm o artigo e as imagens, e, em seguida, a seção direita que tem sua anúncios e links para descobrir artigos diferentes. Então, se começarmos a tornar a janela um pouco mais estreita, você pode ver um pequeno ponto de ruptura onde os itens de navegação se tornam menores, modo que eles se encaixam confortavelmente nesta nova janela mais fina. O título é um pouco menor, e ele fica menor ainda para que ele se encaixa com o anúncio lá. Mas, em geral, nenhuma grande mudança aconteceu na grade aparentemente. Uma vez que você vai um pouco mais, então você vê-lo virar para um ponto de ruptura principal que é uma coluna longa. Então o menu foi embora e se tornou um hambúrguer, semelhante ao que você viu no Skillshare. Eles lidam com isso diferente. O título agora está alinhado ao centro, simplificado do que estava em duas áreas agora trazido em uma. Isso parece mais uma seção geral. Então, as coisas que eles tinham à direita, como os anúncios, eles agora incluem na seção de conteúdo principal. Então, se você ver que ele ainda fica menor. Eles só têm o contorno de texto à medida que essas colunas ficam menores. Eles geralmente mantêm o anúncio o mesmo. Acho que são apenas os constrangimentos das imagens que eles têm. Eles não querem que este texto fique muito menor porque é uma imagem. Onde isso, eles têm um pouco mais de espaço de manobra com a forma como ele é tratado. Rolando para baixo, antes, onde vimos no lado direito a seção mais popular, eles tiraram e adicionaram ao fundo. Então, novamente, uma grande mudança dentro de um ponto de interrupção, você pode fazer pequenas coisas como mudar alguns tamanhos, mantê-la no lugar, ou você pode fazer grandes mudanças como cortá-la de uma seção e adicioná-la a outra. Muito disso vai ser chamada de julgamento com base no conteúdo. Eu gostaria de poder dizer que há uma regra certa e uma maneira certa de lidar com isso, mas realmente depende do que você está fazendo. Então, eu recomendo que você realmente, se você está fazendo este projeto em seu próprio site ou quando você faz este projeto na classe, para ir para diferentes sites, brincar ao redor. É tão fácil como ampliar e fazer navegador menor e ver como um monte de lugares fazê-lo. 7. Determinando pontos de interrupção: Pontos de interrupção são larguras que você define em seu experimento. Assim, quando seu navegador se torna a largura do ponto de interrupção, ele fica mais fino, você o carrega em um tablet, você o carrega em um telefone, ou mesmo se você expandir seu navegador para ser mais amplo. Isso vai forçar uma mudança maior em seu layout maior para torná-lo melhor ajustado à nova largura. Assim, mudanças de exemplo podem estar mudando o tamanho da sua calha. Então, na versão desktop 3.1, temos calhas de 30 pixels e na versão tablet, temos calhas de 20 pixels. Parte disso é apenas proporcionalmente pensamos que parece um pouco melhor para que você possa ver as imagens do rosto sorridente. As imagens são maiores do que são neste tamanho de tablet. Então, quando você tem uma imagem maior como esta, dar um pouco mais de espaço entre ele faz sentido. Mas, quando as coisas são dimensionadas um pouco menores, se estivessem 10 pixels mais distantes, poderia parecer um pouco distante demais. Mas isso também vem um pouco fora da necessidade de nós, e nós apenas estabelecemos uma regra que em nossa grade, as colunas nunca serão menos largas que as calhas. Então, com essa grade de 12 colunas e com calhas de 30 pixels, a grade tem um mínimo de 750 pixels de largura antes que essas colunas se tornem mais finas do que as calhas, que não queremos. A mesma coisa acontece no ponto de interrupção dois, que é a nossa versão tablet, mas isso é de 500 pixels de largura quando as colunas se tornam a mesma largura que a calha que nós realmente não queremos e então nós dividimos para celular. No celular, nós realmente reduzimos o número de colunas e tornamos uma grade de seis colunas, e isso também tende a se emprestar para telas móveis onde e coisas móveis são simplesmente realmente simplificadas. Então, nós realmente tornamos os botões maiores para que seja mais fácil tocar. Simplificamos o layout desta linha de três para uma única peça de coluna. Com isso, você pode até ver que você tem seis aqui e ocupa um bom tamanho em duas fileiras, mas quando você coloca todas elas singularmente, seis se tornam super longas. Então, outra coisa que você pode fazer em um ponto de interrupção é realmente atualizar ou remover conteúdo. Podem ser seções inteiras ou imagens. Então, e algo assim se adicionarmos seis aqui nestes dois primeiros pontos de interrupção e o movermos para o ponto de interrupção três, eu provavelmente cortaria três desses e diria, só vamos mostrar três imagens. Eu acho que um comprimento como este, para celular, se encaixa mais apropriadamente porque presumivelmente, você pode ter conteúdo abaixo que isso vai empurrar para baixo e você não quer que sua página móvel seja muito longa de um pergaminho, mas, é claro, isso depende de qual é o seu conteúdo. Outras alterações são a navegação. Então, aqui você pode ver que temos muito espaço entre a barra de pesquisa e a guia da comunidade. Mas à medida que começa a ficar menor, quando a barra de pesquisa se fecha, podemos definir um ponto de interrupção para dizer, “Ok, x pixels de largura, digamos, é 800 pixels de largura, a barra de pesquisa fica muito próxima da comunidade, então, vamos deixar isso para a segunda linha.” Poderíamos dizer, “Quando isso chegar perto demais, então provavelmente não quereríamos menos do que isso e isso agora é... o que é isso? Esta é a 610 de largura”. Então poderíamos dizer às 610 e abaixo, vamos passar para um menu de hambúrgueres que é este estado desmoronado. Então, todos esses itens seriam apenas escondidos aqui embaixo e, em seguida, isso pode ficar tão pequeno quanto é mostrado aqui. Com todas essas alterações, você pode ter pontos de interrupção diferentes. Você tem vários pontos de interrupção em um design para dizer que, em um ponto de interrupção diferente, você vai cair para uma segunda linha de navegação e então você mudaria para calhas de 20 pixels de largura. Geralmente, é bom mantê-los com o menor número possível de pontos de interrupção. É apenas geralmente um ótimo guia para não ter que manter o controle de muitos, mas realmente depende do seu conteúdo, então, eu acho que falar com seu desenvolvedor local sobre o que é possível. Para o nosso próximo vídeo, aprofundando os pontos de interrupção, vamos dar uma olhada em alguns pontos de interrupção ao vivo em ação. Então, isso vai ser um site Skillshare e uma diferença de site no Skillshare. 8. CONCLUSÃO: Apenas embrulhando. Lembro-me de quando estava a pesquisar, a aprender sobre notas, a diferença que fazia quando estava criá-las e a brincar com elas versus a ler sobre elas. Então, eu realmente encorajo você a fazer uma facada neste projeto de classe. Dê uma olhada no guia do projeto, eu ainda postei um exemplo do que são Skillshare Grid é. Não dizendo que você tem que segui-lo ou necessariamente você deve segui-lo com base em qualquer conteúdo que você tem. Mas, isso pode ser muito fácil saltar fora do ponto só para ver como fazemos e como você pode querer fazê-lo também. Não hesite em fazer perguntas na seção de discussão. Além disso, é um ótimo lugar para deixar links ou compartilhar quaisquer insights que você tenha feito você mesmo ou feito no passado ou aprendê-lo pela primeira vez nesta aula. Estou ansioso para ver o que vocês inventaram. Estarei na galeria do projeto, bisbilhotando, deixando comentários, então me mostre o que tem. 9. Explore o design na Skillshare: maneira.