Como criar uma tabela de preços responsiva no Figma | Série de padrões de UI

1. Boas-vindas ao curso: Se você quiser melhorar seu layout de tipografia e suas habilidades de cores sem assumir um grande projeto, então esta aula é para Pessoal, eu sou Adi, e nesta breve aula, criaremos uma tabela de preços responsiva no Figma É rápido, focado e cada etapa é acionável Você verá exatamente como estruturar um layout, escolher e escalar a tipografia, trabalhar com espaçamento consistente e criar um esquema de cores simples e eficaz E como estamos projetando apenas uma parte de um site, é fácil acompanhar. Além disso, preparei um arquivo inicial com instruções breves e molduras prontas para uso, que você possa começar imediatamente Esta aula faz parte da minha série de padrões de interface de usuário, compilações práticas curtas que se concentram em um padrão por vez Assim, você pode aprimorar suas habilidades e praticar os principais fundamentos sem se perder no escopo de um site completo Então abra o Figma, pegue o arquivo inicial e vamos começar 2. Layout base e tipografia: Essa é uma cópia do arquivo inicial. Deixe-me mostrar o que temos. Primeiro de tudo, instruções. Precisamos criar nossa própria tabela de preços responsiva com base no resumo da aula e incluir três planos de preços Os nomes dos planos, preços, descrições curtas e listas de recursos. Precisamos destacar o plano mais popular. Precisamos ter um botão de CTA claro para cada plano e criar layouts para desktop e celular Agora também temos alguns ativos do projeto. Estamos criando essa tabela de preços para uma startup do SAS chamada fluxo de tarefas. Temos os três planos, Basic Pro e Enterprise, e precisamos destacar o plano pro. Para começar, temos algumas cores de marca. Em termos de tipografia, precisamos usar uma fonte San serif limpa e também temos a cópia ou o conteúdo do texto Oh, vamos realmente começar aqui. Vou pegar a cópia do plano Básico e vou para o layout do meu desktop. É aqui que vamos começar. Vou colar isso e começar a dividir o texto conforme Então, vou pegar o texto, recortá-lo daqui, criar outro elemento de texto e vou pegar essa descrição, recortá-la daqui, criar outro elemento de texto e, em seguida, pegar o nome do plano. Colado aqui, tudo o que nos resta aqui é uma lista dos recursos do nosso plano Então, agora vamos organizá-los um pouco. Basicamente, teríamos o nome do plano, depois o preço, a descrição aqui e, em seguida, os recursos do plano. Esse é um layout bastante padrão. E no final, vamos adicionar o CL à ação. E se olharmos para o resumo, você pode ver que o texto do botão CTA deve ser iniciado Então, vamos copiar isso e colar. Então, agora temos todo o conteúdo do texto preparado. Vamos usar o Auto Layout para isso porque é muito, muito mais fácil. Selecione tudo. Shift A. Isso adicionará tudo a um quadro de layout automático e, em seguida, começarei a agrupar os elementos dependendo de onde eles pertencem Então, por exemplo, o preço por mês e essa descrição provavelmente devem ser agrupados Então, pressione a tecla A novamente, para adicioná-los ao seu próprio quadro de layout automático. Então eu acho que na verdade vou separar esses elementos também. Então, vou cortar cada um deles, criar um novo elemento de texto e não vou usar uma lista aqui. Vamos duplicar isso mais duas vezes. Vamos copiar isso, colar, copiar isso, colar. Vamos apenas removê-los. E, finalmente, o último elemento que permanece aqui é o suporte por e-mail. E vamos limpar isso também. Agora, selecione isso, este e esse turno A para adicioná-los ao seu próprio quadro de Layout automático. E, por enquanto, vamos configurar um espaçamento aleatório assim. A próxima etapa é aplicar uma escala de tipos a tudo isso. E uma escala de tipos é basicamente um sistema tipográfico em que cada tamanho de fonte é baseado no tamanho da fonte anterior multiplicado por Isso permite que você crie tamanhos de fonte com aparência muito natural, por assim dizer. Portanto, você pode fazer isso de várias maneiras. Minha forma preferida de fazer isso é usando um plugin. Então, vou pressionar Control ou Command K para abrir as ações. Vou acessar plug-ins e widgets, deixe-me realmente ampliar aqui e vou pesquisar a escala de tipos E eu vou simplesmente clicar em um desses. Acho que o primeiro funciona muito bem. Vou salvar isso e vou executá-lo. E vou escolher 16 pixels como tamanho de fonte base. E a escala, eu vou usar 1,333, que também é conhecida como a quarta perfeita desse tipo E esse é o tipo de escala de tipos que estamos vendo. Então, vou clicar em gerar e vou abrir isso assim. Agora você pode ver que temos os 16 pixels aqui, e então o próximo tamanho de fonte na escala é 21, e então é 28, e então é 38 e assim por diante. E também vai para níveis abaixo, onde temos 12 e nove pixels para textos muito, muito pequenos. Essa é uma ótima maneira de definir os tamanhos das fontes se você estiver perdido. Basicamente, se você não souber quais tamanhos de fonte usar, sempre use uma escala de tipos. OK. Então, agora vamos aplicar essa ou essa escala aos nossos elementos de design. Começaremos com o maior, que deve ser o preço. E se voltarmos para cima, eu não vou usar, tipo, o primeiro elemento aqui porque é muito grande. Vamos tentar 51 pixels porque parece o tamanho certo. Então, aqui, vamos definir 51 pixels, 150% da altura da linha. Isso parece muito bom até agora. seguir, para essa pequena descrição, vamos dar um passo acima do tamanho da fonte padrão. O padrão é 16, usaremos 21. Então selecione isso. Vamos colocar 21 ali mesmo. Isso parece muito bom. Vamos definir 16 pixels. Aos recursos, porque eles se parecem mais com um corpo de texto, como um corpo de texto normal O nome do plano, vamos também usar 21 pixels. Portanto, é do mesmo tamanho dessa descrição. E então o botão aqui tem 16 pixels, mas vamos mudar isso para negrito porque eu quero que o botão se destaque um pouco mais. Ok, então fizemos o layout básico. Aplicamos a escala de tipos, mas também precisamos escolher um tipo de letra, certo? Porque, por padrão, isso é usar o Inter, mas o Inter é um ótimo tipo de letra, mas é muito usado, certo Portanto, existem muitas opções excelentes por aí. E uma ótima fonte de fontes que eu uso o tempo todo é o Google Fonts. Eles são gratuitos. Basicamente, há uma grande seleção e eles estão pré-carregados no Figma E se olharmos resumo do nosso projeto sob a tipografia, podemos ver que a sugestão é usar uma fonte Sans Serif limpa Então, vamos até o Google Fonts, e vamos rolar para baixo na barra lateral aqui onde está escrito San Serif, e eu vou escolher tudo E isso só vai me mostrar todas as fontes sãs Aqui, você pode ver o Inter. Aquele que estava lá por padrão, Monstera é outra grande variação E você pode simplesmente escolher qualquer um deles e testá-lo em seu design. Eu, pessoalmente, vou escolher os filhos do DM. Eu realmente amo esse tipo de letra. É muito legível. Funciona muito bem para o corpo do texto e tem apenas, você sabe, um pouco de personalidade, então não tem uma aparência muito branda Então, dmSnsf Google Fonts, vou escolher cada elemento de texto aqui e vou rapidamente mudá-lo aqui para E isso é o que parece de perto Linda, linda fonte Ok, então com isso feito, o próximo passo é trabalhar nas cores. Isso será abordado na próxima lição. 3. Aplicação de cores: Vamos criar rapidamente uma paleta de cores para nosso projeto. E com base no resumo, se você se lembra, o resumo nos disse que, ei, temos algumas cores de marca que você pode escolher. Há um primário, que é como uma cor índigo, e há um sotaque, que é como uma laranja quente Agora, eu tenho essas cores aqui, e a primeira coisa que quero fazer é criar uma cor cinza com base na minha cor primária. Eu posso fazer isso facilmente duplicando isso, abrindo o seletor de cores E escolhendo o modo de cor HSL para criar uma versão mais escura e menos saturada da cor da minha marca, que será a cor cinza base Então, aqui está como eu faço isso. Eu mudo, em primeiro lugar, de hexadecimal, que provavelmente é o modo padrão em seu seletor de cores para HSL Isso significa luminosidade de saturação de matiz. É basicamente outra forma de representar uma cor. A primeira caixa aqui representa a tonalidade. Essa é a saturação, essa é a leveza Então, o que eu quero fazer é manter a mesma tonalidade, mas diminuir a saturação Portanto, remova muitas dessas informações de cores e também diminua a luminosidade. Então, a saturação, vou diminuí-la até aqui para cerca de 16 Então, é mais cinza, mas ainda tem um pouco dessa cor por dentro. E eu também vou torná-lo mais escuro. Em vez de 63, vou reduzi-lo para aproximadamente 32, certo? Então, ao fazer isso, obtive uma versão mais escura e menos saturada da minha cor primária Agora, vamos criar alguns tons e tonalidades para essas cores, especificamente para o primário e o cinza E uma tonalidade é basicamente uma versão mais clara da cor. Uma sombra é uma versão mais escura da cor. É como misturar branco ou preto com essa cor. E existem várias maneiras de criar latas e sombras. Pessoalmente, prefiro usar um plug-in Figma, e também há vários plug-ins disponíveis Os que eu tenho usado recentemente se chamam Hu Hu Tins and Shades Assim, você pode abrir o painel de ações aqui e acessar plug-ins e widgets e pesquisar por Hue Hue Então, quando você clica aqui, ele permite que você selecione uma cor, basicamente. Vou apenas fazer uma amostra do meu primário e vou deixar o resto padrão e clicar em Gerar cores, certo? Então, isso vai gerar algumas cores bonitas para mim aqui. E vou ligar o plugue novamente. Mas desta vez, vou provar a cor cinza. E isso gera novamente. E eu posso simplesmente fechar a janela do plugue. Vamos copiá-los e colá-los na minha seção, certo? Então agora eu tenho minha paleta de cores. Se, em algum momento, eu precisar criar tons e tonalidades para a cor de destaque, posso fazer isso com a mesma facilidade, mas, por enquanto, isso não é Agora que tenho algumas cores para trabalhar, vamos começar com o plano de fundo. E vamos fazer algo diferente. Desta vez, vamos fazer um modo escuro. Está bem? Então, vou selecionar a área e pressionar I, e vou tirar uma amostra dessa cor muito escura. E em vez de usar uma cor sólida, vamos usar um gradiente. Então, vou voltar para a cor de preenchimento aqui. E eu vou clicar em um gradiente. Eu vou escolher o rádio, e eu queria irradiar, digamos, desse ponto para fora, ok E eu vou trocar as cores aqui, então vai de uma cor mais clara para uma mais escura E para a cor mais clara, vamos provar talvez essa. Ok, então eu acho que isso é bom o suficiente. Não precisa ser uma grande diferença de contraste, apenas o suficiente para sabermos que temos um gradiente lá OK. Agora, vamos trabalhar nesses cartões. Vamos começar adicionando uma cor de fundo a eles. Então, vamos adicionar um preenchimento e vamos dar uma amostra dessa cor escura aqui. Vamos usar talvez 60% dessa cor apenas para dar um fundo um pouco mais escuro, para que ainda possamos mesclá-la no fundo Vamos também adicionar uma cor de borda a ela, clique no traçado. Vou definir a fronteira para o lado de fora. E vamos ver. Também vamos usar uma cor cinza. Então, vamos provar talvez este. Ok, clique lá fora, veja como fica, e isso parece muito bom para mim. Ele ainda se distingue do plano de fundo e adiciona uma pequena borda de destaque ao cartão Em seguida, vamos adicionar um pouco de preenchimento a essa caixa. Como estamos usando o Auto Layout, é muito simples. Vamos adicionar apenas 40 pixels à esquerda e à direita e, em seguida, 80 pixels na parte superior e inferior. E vamos também adicionar um raio de borda de 40 apenas para torná-lo um pouco mais arredondado Agora, vamos colorir esses elementos de texto porque mal podemos vê-los agora. Então selecione o cartão. E, você sabe, em vez de usar preto aqui, poderíamos mudar isso para branco. Mas acho que isso tem muito contraste. Então, o que eu gosto de fazer é usar outro cinza, mas muito, muito claro. Então, vou selecionar essa tonalidade muito clara. E isso torna o texto visível. Tem um ótimo contraste, mas também se mistura um pouco mais com o fundo E vamos selecionar o texto aqui e, para isso, vou usar uma cor mais escura Então, vamos dar uma amostra, talvez vamos ver este. Está muito escuro. Vamos subir dois degraus. Isso parece muito bom. E acho que vou manter isso. Agora, o que mais? Vamos criar o botão, certo? Na verdade, o botão deve usar, exemplo, a cor principal da marca. Então, selecionaremos o texto. Faremos o Shift A para adicioná-lo ao seu próprio quadro de layout automático e usaremos um preenchimento de 32 pixels Preenchimento horizontal de 16 pixels na vertical, alinharemos o texto ao meio Garantiremos que o preenchimento aqui ou a largura configurados para preencher o recipiente para que, quando eu redimensionar meu cartão, o botão também seja redimensionado com ele Vamos selecionar o texto interno e definir sua largura aqui para abraçar o conteúdo E deixe-me mostrar a imagem completa aqui. E agora vamos pegar esse botão. Pressione I para obter uma amostra da cor primária e adicionaremos apenas um raio de borda de 100 Então, é como uma forma de pílula. Então, agora, por causa do Auto Layout, o botão é redimensionado junto com o cartão Legal. Vamos também enfeitar isso um pouco mais e adicionar alguns ícones à lista de recursos aqui. E um dos meus conjuntos de ícones preferidos que também é gratuito são os ícones de fósforo Você pode obtê-lo em phosphor icons.com. E se clicarmos nos ícones Explorar, podemos pesquisar talvez um cheque, e eu vou selecionar o círculo de verificação. E aqui na parte inferior, temos a opção de baixar ou copiar um SVG Então, vamos copiar esse SVG. Voltaremos ao Figma e selecionaremos um dos elementos de texto aqui Vamos colar isso e definir seu tamanho para 16. Até 16. E também precisamos aplicar cores a ela. Então, na verdade, vou usar a cor desse texto aqui, copiá-la, colá-la nesse ícone, selecionar o ícone e o texto ao qual estamos aplicando. Desloque A para adicioná-lo ao seu próprio quadro de Layout automático. E então, no inspetor aqui, vamos definir sua direção para horizontal e o alinhamento para o meio, e então simplesmente selecionaremos o texto e o moveremos para a direita Agora, tudo o que resta a fazer é aplicar o mesmo layout aos outros quatro recursos. E o jeito que eu gosto de fazer isso é simplesmente duplicar o primeiro, então controle ou comande D, e então basta selecionar o texto, copiá-lo e colá-lo Copie, cole. E copie, cole assim, e então eu posso selecioná-los, excluir. E agora meu layout está pronto. Finalmente, outro detalhe aqui, eu vou selecionar o cartão e vou definir a diferença entre os itens para 40, ok? Mas eu gostaria que o botão, o CTA, fosse colocado mais abaixo. E eu também gostaria que ficasse na parte inferior do cartão quando eu redimensiono o cartão verticalmente. Então, como fazemos isso? Muito simples. Selecionamos esses três elementos. Você mudaria A para adicioná-los ao seu próprio quadro de layout automático. E agora, no cartão principal, definimos o espaçamento como Automático Isso significa que quando eu redimensiono este cartão, esses elementos permanecem na parte superior enquanto o cartão permanece fixo na parte inferior E antes de concluirmos esta lição, só mais duas mudanças. Vamos selecionar esse quadro, que contém o preço e a descrição. E só precisamos ter certeza de que o espaçamento aqui está correto. Vamos configurá-lo para quatro pixels exatamente assim. E, finalmente, o nome do plano, vamos dar a ele uma cor diferente. Vamos usar essa cor de axônio aqui. Então, agora o nome do plano está mais visível. E para o resto dos elementos, usamos o primário e também os tons de cinza que criamos anteriormente OK. Então, com isso feito, o próximo passo é apenas criar os outros dois cartões. Isso será abordado na próxima lição. 4. Concluindo o layout: Vamos completar o layout criando primeiro os outros dois cartões. Então, vou simplesmente redimensionar isso um pouco, movê-lo aqui e controlar ou comandar D para duplicá-lo, e vou movê-lo para a direita, fazer isso de novo, criar o terceiro e agora selecionar todos os Mude A para adicioná-los ao seu próprio quadro de layout automático, e eu vou definir o espaçamento aqui para 40 pixels OK. Agora vamos atualizar o conteúdo de cada cartão. Então fizemos o básico. Vamos fazer o Pro. Portanto, o Pro custa $19 por mês. E deixe-me copiar o texto lá. Vou substituir aqui o Pro 19. Controle a tecla Shift R para substituir o texto. E então vamos editá-los também. Temos projetos ilimitados. Temos 100 GB de armazenamento. Temos análises avançadas. Temos suporte prioritário por e-mail e ferramentas de colaboração em equipe. Então, vamos copiar esse texto e, em seguida, entraremos aqui e duplicaremos um desses elementos e selecionaremos esse Control Shift R para substituir o texto ou o comando Shift R se você estiver em um AMAC, e então faremos o mesmo para a Enterprise A Enterprise custa 49 por mês. É para grandes organizações e temos projetos ilimitados, 1 terabyte de armazenamento Temos análises personalizadas. Temos um gerente de contas dedicado e suporte telefônico 24 horas por dia, 7 dias por semana Adorável. Agora, há mais uma coisa a fazer, que é destacar o meio, o plano profissional, e adicionar um emblema mais popular ou algo assim um emblema mais popular ou algo Portanto, há muitas maneiras de destacar esse plano. Podemos dar a ele um fundo muito mais brilhante e colorido ou podemos adicionar, como um emblema colorido Nós podemos torná-lo maior. Para este aplicativo, aqui está o que vou fazer. Vou selecionar a moldura principal e clicar com o botão direito nela, e vou selecionar a moldura, certo? Isso o envolverá em sua própria moldura. Então, com isso feito, vou adicionar o Auto Layout a ele. Podemos fazer isso entrando no inspetor e pressionando usar Auto Layout Agora, deixe-me realmente trazer isso para que você possa ver um pouco melhor. Para o Auto Layout, vou dar quatro pixels de preenchimento em todos os lados Eu também vou preenchê-lo. E essa cor de preenchimento será uma das variações da cor primária. Então, vamos escolher primeiro a cor base. Está tudo bem. Definitivamente se destaca, mas acho que é um pouco brilhante demais. Então, vamos diminuir o tom. Vou escolher essa cor aqui, a terceira de baixo. Além disso, vou selecionar a placa principal que está dentro e vou aumentar a opacidade da cor em 60-80. Tudo bem? Porque eu quero poder ver o plano de fundo, mas não muito. OK. E agora vou selecionar o cartão inteiro e dar a ele os mesmos 40 pixels de raio de canto Então fica assim. E então eu vou selecioná-lo, e vou ampliar aqui para que você possa ver o que estamos fazendo. E vou clicar nesse botão de preenchimento individual e, na parte superior, vou configurá-lo para 64 pixels E isso basicamente adiciona um espaço superior aqui que podemos usar para colocar nosso texto mais popular. OK. Então, vamos fazer isso agora. Vou clicar em T para ver o texto e vou digitar Mais Popular. E eu quero que esse texto flutue livremente. Então, vou até aqui no topo, onde diz posição, e vou pressionar Ignorar layout automático. OK. E assim que eu faço isso, o texto ainda está dentro do meu quadro de layout automático, mas agora eu posso movê-lo para onde eu quiser. Então, para o texto, vamos colocá-lo em negrito e vamos deixar tudo em maiúsculas Assim. E como estamos colocando em maiúsculas, vamos aumentar um pouco o espaçamento entre letras Acho que 6% é suficiente e quero diminuí-lo. Então, para determinar qual tamanho de fonte eu quero, posso voltar à minha escala de tipos, certo? Podemos ver que as fontes menores que 16 pixels com base na escala devem ser 12 ou nove. Então, vamos tentar 12. E vamos ampliar para 100% e ver como fica, e acho que funciona muito bem. Se isso não funcionar para você, é claro, você pode aumentá-lo ou diminuí-lo ainda mais. A escala de tipos existe como diretriz. Você não precisa respeitá-lo 100%. Então, vamos pegar isso. Vamos alinhá-lo ao centro e vamos movê-lo para cima ou para baixo. Só para colocá-lo no meio desse espaço, eu também vou selecioná-lo e alinhá-lo no meio Então, se mudarmos, ele permanecerá nessa posição. E foi assim que escolhemos destacar esse plano intermediário. Agora, antes de concluirmos, aqui está uma dica rápida, e essa é uma dica profissional para você. Observe como esses dois cantos parecem um pouco estranhos. E isso é porque eles têm exatamente o mesmo raio de canto Mas algo que eu aprendi há um tempo foi que se você tem, tipo, cantos aninhados como este, o do lado de fora deve ter um raio de canto maior do que o do lado de dentro, então eles pareçam Então, vamos selecionar isso. E em vez de 40 pixels, que é o raio do canto interno, vamos fazer 40 pixels mais a distância entre os dois, que no nosso caso, é de quatro pixels Então, vou definir 44 pixels. Então, ao fazer isso, os cantos agora parecem muito mais naturais, e isso faz com que tudo pareça um pouco melhor. É um pequeno detalhe, mas os detalhes importam. Então, aqui está o design da tabela de preços para desktop. Mas e quanto ao celular? Porque se copiássemos isso em uma tela de celular, não ficaria muito bom. Então, vamos fazer a mudança na próxima lição. 5. Como adaptar o layout para dispositivos móveis: Antes de criarmos a tela do celular, vamos fazer um pequeno ajuste na tipografia Vou selecionar todos os três preços e vou alterar tamanho da fonte de normal para negrito. Eu só acho que isso é um pouco mais equilibrado e chama a atenção para essa área um pouco melhor. OK. Agora, tela do celular. Aqui, eu tenho uma moldura com 428 pixels de largura. Obviamente, quando você está projetando para dispositivos móveis, você pode, você sabe, torná-lo menor ou maior, dependendo dos dispositivos para os quais você está projetando. Mas a primeira coisa que vou fazer é selecionar minha área de trabalho, clicar com o botão direito do mouse em copiar e colar, copiar propriedades e, em seguida, copiar e colar como propriedades de colagem. Isso basicamente copiou o plano de fundo. Em seguida, vou selecionar isso. Vou para o celular. Vou colar isso. E, claro, é muito grande para a tela. Então, em vez de um layout horizontal, precisamos fazer um layout vertical. Então, no automático ou no inspetor, vou mudar o layout automático para vertical Vamos colocá-los aqui e aumentar a tela do celular. Assim. E vamos movê-los de volta porque eles tinham suas restrições Defina para o centro. Vamos redefini-los para o canto superior esquerdo. Vamos aumentar isso para 40 pixels. E vamos realmente selecionar a tela do celular e adicionar o Auto Layout a ela. Vamos configurá-lo como vertical, selecionar isso e desagrupar E com a tela do celular selecionada, vamos definir 40 pixels de preenchimento nela também Em seguida, selecionarei todos os três cartões da tabela de preços e os configurarei para encher os recipientes Então, agora, toda vez que eu redimensiono a tela do meu celular, elas são redimensionadas com E podemos ver agora que temos um pequeno problema aqui em que o salmão não é redimensionado, mas é uma solução rápida, selecione-o e, no inspetor, altere sua largura de fixo para recipiente de enchimento, Agora, como estamos lidando com uma tela de celular, setor imobiliário é muito importante. Então, vamos tornar tudo isso um pouco mais compacto. Vamos selecionar isso e isso. E em vez de um preenchimento vertical de 80 pixels, vamos mudá-lo para 40 E também vamos definir a lacuna entre eles em 40 e também definiremos essa lacuna 40 e definiremos a altura de cada um desses itens para abraçar o conteúdo Portanto, eles são tão altos quanto o conteúdo interno. Nós faremos o mesmo aqui. Mude isso para 40, altere a lacuna aqui para 40 e definiremos a altura para abraçar o conteúdo E a mudança final aqui, mude isso para 40 e a altura para abraçar E essa é a nossa versão móvel da tabela de preços. Agora é vertical em vez de horizontal e é um pouco mais compacto. E aí está uma tabela de preços responsiva, construída a partir de um breve resumo e adaptada para desktop e celular Acredite que esses exercícios rápidos e focados são realmente bons para desenvolver suas habilidades, porque você está praticando tipografia, espaçamento, dimensionamento, cores e mantendo os layouts consistentes, tudo sem a Então, se você assistiu apenas aos vídeos, mas não acompanhou, eu o encorajo fortemente a fazer o projeto da classe. E sua tarefa é simples. Abra o arquivo inicial. Você encontrará um link na descrição e criará sua própria tabela de preços responsiva Você pode seguir exatamente o resumo ou personalizá-lo de acordo com sua preferência Isso depende inteiramente de você. E quando terminar, vá em frente e compartilhe seu design na galeria de projetos da turma. Eu adoraria ver sua opinião sobre isso, e você também pode se inspirar no que outros estudantes criaram. E se você gosta disso, confira minhas outras aulas de design visitando meu perfil ou os links na descrição da aula para obter minhas recomendações pessoais. Ok, obrigado por assistir, feliz design, e nos vemos na próxima aula. Tchau por enquanto.