Design com Figma: site de restaurante de uma página

1. Boas-vindas: Ei lá e seja bem-vindo. Meu nome é Adi Purdila. Sou web designer e desenvolvedor e esta classe é sobre projetar um site de restaurante de uma página na Figma. Isso é o que estaremos criando. É um site simples para um restaurante fictício chamado Birdhouse Bar and Grill. Entre outras coisas, possui uma boa seção de menu de comida, navegação no menu, galeria de fotos do Instagram, um formulário de contato com um mapa e também uma área de inscrição no boletim informativo. Agora, ao fazer essa aula, você aprenderá duas coisas design UI/UX e Figma. Em termos de design UX, você aprenderá a ler um resumo do projeto e, com base nele, criar wireframes. Mas também discutiremos a arquitetura da informação ou como estruturamos o conteúdo na página da Web. Em seguida, ele está na interface do usuário ou no design da interface do usuário. Aqui, você aprenderá como definir a tipografia para que ela corresponda ao tipo de site que você está projetando e como escolher cores apropriadas e aplicá-las a vários elementos. Você aprenderá a usar o sistema de oito pontos para espaçamento e dimensionamento. Portanto, você nunca terá que adivinhar quais valores usar para preenchimento de margem, largura ou altura. Você também aprenderá a criar designs responsivos. Inicialmente, projetaremos para telas grandes e , em seguida, criaremos versões para médio e pequeno. Enquanto isso está acontecendo, você também está aprendendo a usar a Figma para design de sites. Claro, você aprenderá o básico, como trabalhar com molduras, texto, cores, formas, páginas e atalhos de teclado. Mas também você terá um gostinho dos recursos mais avançados. Você aprenderá a usar o layout automático para alinhamento e movimentação de elementos com muita facilidade. Você também aprenderá sobre os vários modos de redimensionamento na Figma, como conteúdo de abraço ou recipiente de preenchimento e quando você deve usar cada um. Há também um projeto de classe disponível para que você possa acompanhar e aplicar a teoria. Em suma, acho que essa classe é perfeita para iniciantes porque vou passar por cada etapa do processo, desde wireframing até o design de versões responsivas do site. Então estou ansioso para vê-lo na sala de aula. Na primeira lição, falaremos sobre o projeto da aula. Chegando. 2. Projeto do curso: Eu acho que você não pode aprender corretamente algo simplesmente lendo a teoria que você precisa praticar. É por isso que essa classe tem um projeto que você pode fazer. Você também pode chamá-lo de lição de casa ou tarefa. Essas tarefas e essas coisas assim, usando o resumo do projeto fornecido, projetam um site de uma página para um restaurante chamado Birdhouse Bar and Grill. Você pode usar o software que quiser, mas vou trabalhar na Figma e recomendo que você faça o mesmo. Agora, nesta aula, vou fazer exatamente a mesma tarefa. Estarei usando o mesmo resumo do projeto. Vou discutir isso com você. Criarei alguns wireframes e, em seguida, criarei o site de uma página. Então cabe a você fazer o mesmo. Você pode seguir meus passos exatamente, ou pode se inspirar no que estou fazendo e criar sua própria versão do projeto. A escolha é realmente sua. Para começar com esse projeto de classe, existem alguns passos que você precisa seguir. A etapa 1 é baixar os recursos da classe. Agora, na descrição da classe, você encontrará os links para baixar esses arquivos. Aqui, temos o logotipo fictício em formato SVG para Birdhouse Bar and Grill. Temos um resumo do projeto que basicamente detalha tudo o que precisamos saber sobre o design do site que vamos fazer. Em seguida, temos um PDF para todos os recursos que usarei nesta classe. Aqui você encontrará links para o arquivo Figma acabado. Você encontrará um link ou links para todas as fotos stock que usei no design. Finalmente, alguns links para os ícones. Estarei usando os Ícones de Bootstrap e também os tipos de letra. Então, como bônus, também há alguns links úteis adicionados aqui, links para Figma e algumas outras ferramentas que usaremos. A primeira coisa que você faz antes de iniciar esta aula é baixar os recursos. passo 2 é criar uma conta Figma e, se você já tiver uma, sinta-se à vontade para pular para a etapa número 3. Mas se você não fizer isso, você precisa de uma conta para trabalhar na Figma. Porque, em seu núcleo, o Figma é baseado em navegador, então qualquer arquivo que você criar precisa ser vinculado a uma conta. Criar um é muito simples. Você vai para figma.com e você pode clicar neste botão ou neste botão para levá-lo à janela de criação da tela. Aqui você pode se inscrever com um e-mail ou senha ou com sua conta do Google, se você tiver um. É um processo muito simples. Também é totalmente gratuito criar uma conta Figma. Vá em frente e faça isso agora. Agora, eu disse que criar uma conta Figma é gratuito, e usar Figma também é gratuito, mas até certo ponto, você vê que existem alguns recursos avançados que você só obtém no Figma professional e Figma planos de organização, coisas como arquivos ilimitados, histórico de versões ilimitado, bibliotecas de equipe. Estes não estarão disponíveis neste plano inicial, que é gratuito. No entanto, como iniciante, se você está apenas começando, o plano gratuito é mais do que suficiente, então este é o que eu recomendo que você obtenha. Etapa 3, que é opcional é duplicar meu arquivo de design finalizado. Deixe-me explicar por que isso é opcional. Para esta aula, recomendo que você comece com uma tela em branco e trabalhe ao meu lado assistindo aos vídeos da aula. Qualquer coisa que eu faça, você vai fazer também no seu lado. Acho que essa é uma ótima maneira de aprender. No entanto, se você quiser trabalhar separadamente, talvez crie sua própria versão do projeto e use meu design como referência, então você pode querer duplicar meu design finalizado. Veja como você pode fazer isso. Você começará abrindo o arquivo PDF de recursos. Na segunda página, você encontrará o link que diz Design de Sites da Adi. Você clicará nisso e isso o abrirá no seu navegador. Você precisa se certificar de que está logado. Agora, por padrão, você verá que esta versão do site é somente leitura. Você pode clicar em elementos para selecioná-los, encontrar distâncias e também explorar várias propriedades aqui para o elemento selecionado. Mas uma coisa que você não pode fazer é editar este documento porque é o arquivo mestre que eu compartilhei com você. É por isso que, para você, é somente leitura, só eu sou capaz de editar isso. Agora, você pode ficar tentado a clicar neste botão que diz pedir para editar e isso só me enviará uma notificação sobre sua solicitação. Isso só vai me dizer que você está pedindo permissões de edição neste documento e eu não posso dar isso a você porque esse documento precisa ser acessível a todos. Em vez disso, o que você precisa fazer para editar este documento é clicar neste link suspenso aqui e selecionar duplicar para seus rascunhos e agora Figma nos diz que o arquivo foi duplicado para seus rascunhos. Se voltarmos em rascunhos em sua conta, você deve ter o arquivo. Agora você pode fechar isso e abrir o arquivo em seus rascunhos. Observe que ele diz direitos autorais aqui. Mas a única diferença é que este arquivo agora é editável para que você possa selecionar o texto, você pode excluir, reorganizar elementos, você pode fazer o que quiser. No final, esta é sua própria cópia do documento e não o arquivo original vinculado aqui no PDF de recursos. Repito, certifique-se de duplicar o arquivo se você quiser ter acesso de edição a ele. Agora, eu entendo. Nem todos se sentem confortáveis mostrando seu trabalho para outras pessoas. No entanto, para esta aula, eu encorajo você a nos mostrar seu design finalizado, enviando-o para a galeria do projeto. Dois motivos para isso. Número 1, você receberá feedback de mim ou de outros alunos, é claro, se quiser isso. Isso pode ser muito útil. Número 2, você incentivará outras pessoas a publicarem seus projetos e isso é sempre uma coisa boa. Por favor, aceite minha recomendação e mostre-nos seu projeto finalizado, enviando-o para a galeria do projeto. Finalmente, lembre-se de que estou aqui para ajudá-lo, não importa quais perguntas você possa ter sobre essa aula ou sobre web design em geral, publique-as na área de discussão. Eu respondo a todos e garanto que seja qual for o problema que você possa ter, chegaremos ao fundo disso. Com isso dito, estou ansioso para vê-lo na próxima lição onde vamos dar uma olhada rápida no resumo do projeto, entender o que o cliente está nos perguntando, e também discutiremos alguns conceitos básicos de wireframing. Vejo você lá. 3. Atualização do Figma 2025: o que mudou: Ei, pessoal, essa é a Adi do futuro. Este vídeo bônus está aqui para ajudá-lo a navegar por algumas das mudanças pelas quais Figma passou desde que gravei esta aula pela primeira alguns anos, o Figma parecia um pouco diferente e, desde então, recebeu várias atualizações sua funcionalidade e mais notavelmente Portanto, se sua tela não se parecer muito com a minha nessas aulas, não se preocupe. Vamos analisar rapidamente o que mudou para que você possa acompanhar sem nenhuma confusão. E só para ficar claro, essa classe ainda é totalmente relevante hoje em dia. Os conceitos básicos não mudaram, apenas a forma como a Figma apresenta algumas de suas ferramentas Começaremos com a mudança mais perceptível, que é a nova interface do usuário ou o redesenho da interface do usuário Isso é chamado de UI three no momento desta gravação. E uma das coisas que você pode notar imediatamente é que a barra de ferramentas agora foi movida da parte superior, onde costumava estar, para a parte inferior, aqui. Então, basicamente, temos as mesmas ferramentas que tínhamos antes, exceto talvez pela seção. Acho que isso foi adicionado nos últimos anos. Ainda temos as ferramentas principais de linha, polígono e retângulo com as quais estamos acostumados Temos a ferramenta Caneta, ferramenta de texto. Temos algumas ferramentas novas aqui, como a anotação e a Eles foram adicionados recentemente. Temos algumas ferramentas de IA que estão disponíveis por meio desse menu de ação aqui. Recentemente, o FGMA também introduziu o Figma draw e também o modo Dev , voltado para desenvolvedores, mas isso não é realmente importante para Outra mudança é o fato de que agora podemos reduzir essas duas barras laterais clicando aqui neste botão de minimizar a interface Basicamente, isso lhe dará mais espaço para brincar. E você pode clicar nesse botão novamente para mostrar a barra lateral esquerda e direita. Agora também temos a opção de recolher camadas clicando neste botão aqui. Então, se você tem camadas abertas, essa é uma maneira muito rápida de reduzir tudo E a maioria das mudanças realmente aconteceu na barra lateral direita do inspetor Então, deixe-me revisar rapidamente alguns deles com você. E você verá que a barra lateral direita agora parece um pouco diferente da dos meus vídeos. Os controles de alinhamento estão posicionados de forma um pouco diferente agora temos algumas opções relacionadas a variáveis, que é outro recurso introduzido nos últimos anos As operações booleanas foram movidas neste menu aqui, e acho que provavelmente a maior mudança foi feita no layout automático Então, o painel de layout automático agora se parece com isso. Era muito mais simples nos anos anteriores, mas agora seu layout mudou Ele tem alguns recursos extras, como, por exemplo, esse modo de grade que foi introduzido recentemente. Agora temos a capacidade de definir a largura e a altura de um elemento específico para conteúdo fixo ou amplo, que basicamente redimensionará esse elemento para caber em seus elementos secundários recipiente de enchimento basicamente expandirá isso para preencher todo o espaço disponível. Também temos a opção de adicionar largura ou alturas mínimas e máximas, e agora as variáveis estão incluídas aqui. Na maioria das vezes, alguns desses elementos são movidos como esse seletor de alinhamento aqui, o espaço ou a lacuna entre os itens agora está posicionado E para cada valor numérico que você vê aqui, você também tem a opção de aplicar variáveis agora Falando em variáveis, acho que não as usei em nenhuma das minhas aulas anteriores porque são relativamente novas, mas elas podem ser acessadas se você clicar fora ou clicar em qualquer lugar do Canvas e acessar a seção de variáveis aqui. E as variáveis são basicamente uma forma de armazenar valores reutilizáveis, como números, cores e até texto E de todas essas, acho que a principal mudança à qual você precisa prestar mais atenção é a mudança no layout automático, porque acho que é a mais desatualizada. Agora, é muito mais poderoso do que, digamos, o layout automático de 2020 ou 2022, mas funciona exatamente da mesma maneira, então você não precisa se preocupar com isso. Portanto, não se preocupe se sua tela parecer diferente da minha. As ferramentas ainda estão lá e você poderá concluir o projeto da turma de qualquer maneira. Agora, vamos voltar para a aula. 4. Noções básicas de arame: Antes mesmo de pensarmos em tipografia, cores ou layout, precisamos fazer um pouco de preparação. Isso consiste em duas coisas, entender o resumo do projeto e criar uma armação de arame. Nós não abrimos apenas Figma e começamos a projetar, isso é um erro que muitas pessoas cometem. O design deve ser baseado no conteúdo, não o contrário. Não criamos apenas o design e, em seguida, fazemos o conteúdo se encaixar, em vez disso, criamos o conteúdo e, em seguida, criamos em torno disso. Essa é uma abordagem muito melhor. Para criar o conteúdo, vamos dar uma olhada no resumo do projeto e entender o que o cliente está nos perguntando como designers. Então, no resumo do projeto, vamos começar com a primeira seção, e isso nos fala sobre os restaurantes, Birdhouse Bar and Grill. Temos uma descrição geral aqui, basicamente nos diz que é uma empresa familiar, aberta em 95, e atualmente está sendo administrada pelo filho dono original chamado Robert Wilson. Birdhouse Bar and Grill é um pequeno estabelecimento onde você pode tomar uma cerveja gelada, você pode obter uma comida deliciosa e eles também entregam. Há alguns pontos-chave que precisamos lembrar. Temos o nome do restaurante aqui, a localização e o número de telefone, o lema que vem como convidado, diz-lhe como amigo. A descrição dos serviços, servindo comida e bebidas saborosas desde 95, e também o horário comercial. Seguindo em frente, podemos encontrar a estrutura da página. Lembre-se de que este é um site de uma página, então precisamos encaixar todo o conteúdo em uma única página. Em nenhuma ordem particular, a estrutura é assim. Precisamos de um menu de comida, uma seção com informações sobre o restaurante, algumas fotos do Instagram, um formulário de contato, um formulário de newsletter e também o cliente quer que exibamos o lema em algum lugar na página. Em seguida, o resumo do projeto também descreve cada seção com mais detalhes. Em seguida, chegamos à descrição do menu. Esta é, na verdade, a descrição do menu de comida. Isso é algo que podemos realmente colocar no site, provavelmente em algum lugar antes dos itens reais do menu de comida porque está bem escrito. Em seguida, temos o conteúdo do menu. O menu basicamente tem cinco categorias. Temos estacas, e para cada um, temos o nome do prato, o preço e também seu conteúdo. Então temos hambúrgueres e sanduíches, quickies e depois saladas. Este é todo o conteúdo que precisamos colocar na seção do menu de alimentos. Não é muito, mas definitivamente vai exigir algum uso criativo do espaço se quisermos encaixar tudo isso em uma página. Então, finalmente, após o menu de alimentos, temos algumas diretrizes de design com as quais realmente não nos importamos neste momento porque ainda não estamos no estágio de design da interface do usuário. Vamos guardar isso para mais tarde. Mas, sim, esse é o resumo do projeto com o qual começamos a trabalhar. O bom disso é que ele contém todo o conteúdo que precisamos colocar no site, toda a cópia está lá, as descrições, a localização, o número de telefone, o modelo, tudo está definido bem aqui, então tudo o que temos que fazer ao criar os wireframes é apenas copiar e colar. Agora que sabemos do que se trata o projeto, podemos seguir em frente e criar um conteúdo com base nas informações que recebemos e criaremos esse conteúdo como um wireframe. Um wireframe é uma representação de baixa fidelidade do produto final, e seu objetivo é exibir o conteúdo final do projeto. Pense nisso como um esboço, algo que você desenharia em um pedaço de papel. Em um wireframe, você não está preocupado com layout, cores, tipografia, espaçamento ou qualquer coisa assim; é apenas um esboço bruto. No entanto, o que você precisa se preocupar é com o conteúdo, porque isso precisa estar em sua forma mais ou menos final. Você pode fazer pequenos ajustes no conteúdo mais tarde, mas eu diria 95%, ele precisa estar na forma final porque você está projetando em torno desse conteúdo. Você pode pensar em um wireframe como um esqueleto ou uma base. Depois de ter isso, você pode começar a construir sobre ele, você pode começar a adicionar as camadas externas, cor, tipografia, espaçamento, dimensionamento, todas essas coisas boas. É muito simples criar wireframes. Como eu disse, eles são apenas esboços brutos, então a opção mais barata é caneta e papel. No entanto, se você preferir trabalhar digitalmente , há aplicativos dedicados para isso. Uma das ferramentas mais populares é o Balsamiq Wireframes. Isso é super simples de usar, porque tem uma biblioteca de componentes pré-fabricados que você pode simplesmente arrastar e soltar. No entanto, é um aplicativo pago, portanto, se você não estiver criando wireframes regularmente, talvez não valha a pena para você. Existem, é claro, outros aplicativos wireframing que você pode usar, mas pessoalmente e isso é o que eu recomendo a você também, eu uso Figma. Dois motivos para isso. Número 1, é fácil. Figma é a minha ferramenta preferida para o design da interface do usuário, então estou muito familiarizado com isso. Isso significa que eu trabalho muito rápido nele, e criar algo tão simples quanto um wireframe é fácil. Número 2, é conveniente. Isso é o mais importante para mim, porque depois de criar o wireframe, faço uma cópia dele e baseio meu design final nessa cópia. Isso significa que não preciso recriar todos esses elementos se eu estivesse usando um software diferente. Porque estou trabalhando no mesmo software na Figma, está tudo lá. Todos os elementos que criei no wireframe, eu apenas os dupliquei e começo a editá-los diretamente. Isso é uma enorme economia de tempo, e você verá como é fácil mais tarde nesta aula. Você pode criar os wireframes como quiser, mas eu recomendo que você faça isso na Figma. Agora, vamos fazer uma recapitulação rápida. Sempre inicie um projeto entendendo o resumo do projeto. Wireframes são representações de baixa fidelidade do produto final. Um wireframe deve conter aproximadamente a versão final do conteúdo. Para sua conveniência, crie um wireframes no mesmo software que você usará para criar o design final. Temos o resumo do projeto, sabemos o que é um wireframe e como criar um, vamos começar a trabalhar. Na próxima lição, começaremos a fazer wireframing as seções de cabeçalho e herói. 5. Wireframing: a seção de cabeçalho e heres: Nota rápida antes de começarmos, wireframing é um processo bem simples, e geralmente é muito rápido. No entanto, nesta aula, abordarei wireframing em cinco lições porque quero explicar o processo com o máximo de detalhes possível, e não quero fazer apenas uma lição super longa. É por isso que, em cada um desses cinco vídeos, abordaremos apenas uma ou duas seções de cada vez. Com isso dito, vamos começar com as seções de cabeçalho e herói. Vamos começar fazendo login na Figma e criando um novo arquivo de design. Vou colocar meu arquivo dentro da pasta Rascunhos, e isso é o que eu recomendo a você também, porque quando você está criando arquivos dentro de seus Rascunhos, você pode ter tantas páginas e tantos arquivos quanto você quer, você não está restrito a um determinado número. Se você fosse criar equipes aqui e organizar seus arquivos assim, precisará comprar um dos outros planos na Figma. Mas, se você quiser criar quantos arquivos quiser, vá em frente e crie-os em Rascunhos. Vamos clicar em “Novo arquivo de design”, e vamos chamar isso Site do Restaurante Birdhouse, e vamos renomear a primeira página para Wireframes. Aqui, pegue a Ferramenta Frame ou pressione “F” no teclado, você também pode acessá-la daqui e desenhar um quadro e fazer esse quadro 1.800 pixels de largura. Vamos diminuir um pouco, você pode aumentar ou diminuir o zoom clicando neste botão e selecionando uma opção, ou você pode manter pressionada Command ou Alt, e usando a roda de rolagem do mouse, para cima e para baixo, para ampliar e diminuir o zoom, então vamos chamar este quadro de arame. Vamos também definir uma altura para, digamos, 3.000 pixels, por enquanto, para torná-lo mais alto. Então, vamos abrir nosso resumo do projeto, e vamos rolar para baixo até a estrutura da página e pensar sobre o que devemos colocar dentro do cabeçalho. Agora, normalmente, um cabeçalho de site contém alguma identificação de marca, como o logotipo. Ele também contém o menu de navegação e também pode conter talvez informações de contato ou ícones de mídia social. No nosso caso, usaremos, logotipo, menu de navegação e ícones de mídia social. Vamos começar com o logotipo, podemos pegá-lo nos Recursos da classe, basta clicar e arrastar, e onde ele diz Cores de seleção, vamos deixar tudo preto porque lembre-se, no wireframe, não estamos interessados em nenhuma cor, então usaremos apenas preto, branco e cinza. Agora, para facilitar o alinhamento de diferentes elementos na página, vamos usar algo chamado guias. Para isso, precisamos primeiro exibir as réguas, são essas duas na parte superior e à esquerda da página. Você pode fazer isso indo “Shift R” para alternar sua visibilidade, ou você pode entrar no “Menu”, “ Exibir”, “Réguas”. Com as réguas visíveis, podemos simplesmente clicar e arrastar assim, para criar um guia. Normalmente Figma exibe a posição do guia bem aqui, mas por algum motivo, às vezes ele se incomoda e não o exibe, e se você quiser posicionar a régua a uma certa distância das bordas, uma maneira rápida seria apenas fazer com que isso seja o tamanho desejado, digamos 120, e depois clicar e arrastar a régua até que ela se encaixe no lugar, assim. Agora esta régua está posicionada a 120 pixels da borda, podemos fazer o mesmo aqui, arrastar outra régua assim, e estamos prontos para ir, agora podemos excluir esse retângulo. Agora, vamos pegar nosso logotipo, alinhá-lo com a régua e podemos seguir em frente. Vamos ver sobre o menu de navegação. De acordo com o resumo do projeto, esta é a estrutura da página, e vamos criar itens do menu de navegação com base nisso. Vamos começar com o link para Home, vamos usar Helvetica como fonte, você pode, claro, usar a fonte que quiser, mas para um Wireframe, recomendo algo neutro, como Helvetica ou Roboto. Vamos fazer isso 20 pixels e, em seguida, o Comando D para duplicar e, em seguida, clicar enquanto mantém pressionada “Shift”, para manter a mesma posição horizontal, este será Menu. A mesma coisa, “Comando D, “Shift”, clique e arraste, vamos fazer isso, Sobre nós, e o que mais temos? Contato e boletim informativo do Instagram. Também podemos manter pressionada “Shift” e “Opção” para duplicar um item assim, então vamos dizer aqui, Feed do Instagram. Faça isso novamente, entre em contato conosco e, novamente, para o formulário de newsletter, vamos chamar esta seção Assinar. Agora podemos pegar esses, “Comando G” para agrupá-los. Você também pode ir para “Objeto”, “Seleção de grupo”, então é Command G em um Mac, Control G em um PC. Então vamos ver sobre os ícones de mídia social, e vamos usar três ícones clássicos, e vamos exibir ícones para Instagram, Facebook e Twitter. Para os ícones, abrirei o aplicativo Iconset, este é um dos meus aplicativos favoritos, funciona tanto no macOS quanto no Windows, e é gratuito, e é um aplicativo que você pode usar para organizar ícones, e eu tenho um monte de conjuntos de ícones diferentes adicionados aqui, e é muito simples. Tudo o que preciso fazer é clicar e arrastar para o meu software de design, e isso só pega o ícone. Mas vamos em frente e procure pelo Facebook, Instagram, e estou usando os ícones do conjunto “Bootstrap Icon”, arraste-o para lá e também o Twitter. Vamos fazer isso. Agora vamos minimizar esse pouco, vamos tornar esses ícones um pouco maiores. Na Figma, você pode clicar neste ícone que diz Restringir proporções, e isso garantirá que qualquer valor inserido para a largura e a altura será replicado nas outras medidas, então vamos fazer esses 32. Se eu mudar o tamanho sem esse botão clicar, tudo isso só mudará a largura ou a altura. Vamos fazer 32 por 32 e também aqui, novamente, 32. Agora, vamos agrupar esses. Novamente, não estou preocupado com a distância entre esses dois, estou fazendo o meu melhor para criar uma distância igual, mas, no que diz respeito ao número real , isso vai ser cuidado quando chegarmos o estágio de design real, então novamente, “Command G” para agrupá-los, e vou alinhar isso assim. Posso até pegar tudo isso e usar as ferramentas de alinhamento na Figma, onde diz Alinhar Centros Verticais, clique nisso e, em seguida, com todos esses três selecionados, “Comando G” novamente, e este será o nosso cabeçalho. Em seguida, vamos ver sobre a área do herói. Agora, normalmente, uma área de herói contém o título principal de um produto. Ele também contém um call to action, e geralmente algumas mídias, um vídeo, uma imagem, talvez uma ilustração. Mas como nosso site é um pouco diferente, é um site para um restaurante, na verdade não estamos vendendo um produto, então na área do herói, porque é uma das primeiras coisas que um visitante vê, vamos colocar alguns elementos diferentes. Vamos colocar o lema do restaurante, vamos colocar o horário comercial e, em seguida, talvez algumas informações de contato, e uma imagem de tipos, talvez uma imagem de dentro do restaurante, isso poderia funcionar muito bem. Vamos começar com a imagem, vou pegar a “Ferramenta Rectangle” ou R no teclado, e vou desenhar um retângulo como este, e isso funcionará como uma imagem de espaço reservado em nosso Wireframe. Em seguida, vamos ver sobre o lema, podemos voltar ao resumo do projeto, em pontos-chave, podemos encontrar o modelo, então vamos copiar isso daqui, T para “Ferramenta de Texto”, colar isso em. Agora vamos fazer isso um pouco maior, digamos 70, e vamos torná-lo ousado. A qualquer momento com um campo de texto selecionado, posso pegar um dos lados e redimensioná-lo assim, e então posso posicioná-lo. Vamos também adicionar a localização, por que não? Vamos tornar esses 20 pixels, novamente, regulares e, em seguida, duplicar este, vamos adicionar o número de telefone e, em seguida, o horário comercial. Vamos apenas copiá-los do resumo do projeto, “Opção Shift” para duplicá-lo, clicar duas vezes para entrar no modo de edição e, em seguida, copiar e colar. Vamos corrigir isso um pouco aqui, e vamos também adicionar um texto descritivo que diz Horário Comercial, e vamos deixar isso em negrito. Agora podemos pegar isso, agrupá-lo, e podemos pegar os dois, e alinhá-los assim. Como você pode ver, estamos indo muito rápido aqui, não nos importamos com as fontes que estamos usando, não nos importamos com cores, espaçamento, dimensionamento, nada disso. Nosso objetivo agora é apenas colocar o conteúdo no Wireframe. Este será o formulário final? Muito provavelmente, não. Podemos até mover certos elementos para outras seções, por exemplo, se não gostarmos do fato de que o endereço e o número de telefone estão na área do herói, podemos movê-lo para outro lugar, talvez no cabeçalho de alguma forma, ou talvez possamos até criar uma barra superior aqui, no design final. Mas para o wireframe, podemos posicioná-lo no cabeçalho, sem problema. Se você estava acompanhando, então é sua vez de colocar o cabeçalho e a seção de herói. Depois de fazer isso, estamos prontos para passar para o menu de comida, que está chegando. 6. Wireframing: o menu de alimentos: A próxima seção da nossa lista é o menu de comida. Vamos dar uma olhada no resumo do projeto e ver que tipo de conteúdo precisamos criar para ele. Vamos para a seção de estrutura da página do resumo do projeto, onde vemos um pouco mais detalhes sobre as várias seções de página que precisamos criar. Sob o menu, o menu de comida, podemos ver que o cliente gostaria que exibíssemos o menu do restaurante uma maneira muito simples e fácil de navegar e ler e, se possível, também mostrar a descrição do menu. Temos a descrição do menu. Se rolarmos aqui para baixo, é este, então podemos simplesmente ir em frente e copiá-lo agora. Então, também vamos manter isso à mão porque vamos fazer referência ao conteúdo do menu à medida que avançamos. Então vamos voltar para Figma e vamos realmente fazer apenas um pouco de limpeza aqui Eu vou selecionar todos esses elementos, Comando G para agrupá-los, Comando G para agrupá-los, então essa é a nossa área de herói que criamos anteriormente, agora, vamos cuidar da seção do menu. Para isso, posso realmente duplicar esta seção. Comando D em um mac para duplicá-lo, porque eu quero começar com a descrição do menu de alimentos. Talvez eu vou usar algum tipo aqui. Veremos quando chegarmos à parte do design, mas vou manter aproximadamente a mesma estrutura. Aqui, na verdade, vou colocar a descrição do menu que acabamos de receber do resumo do projeto. Deixe-me redimensionar isso, algo assim. Para um título, podemos realmente voltar ao resumo do projeto, e lembro-me de que tínhamos alguma descrição para a comida que eles estavam servindo ou alguma descrição dos serviços, e é este certo aqui que diz servir, degustação de alimentos e bebidas desde 1995. Vamos usar isso como um título para esta seção. Vamos tornar isso realmente um pouco menor, vamos com 48 pixels, algo assim. Vamos mover isso para cima. Vamos agrupar tudo e essa será a descrição do menu de comida. Agora, vamos ver sobre o cardápio de comida real. Se você se lembrar do resumo do projeto, o cliente gostaria de exibir o menu uma maneira muito simples e fácil de navegar e ler. Então, observando o menu real, podemos ver que ele está dividido em algumas categorias. Temos estacas, temos hambúrgueres e sanduíches, quickies e saladas. Basicamente cinco, se você contar hambúrgueres e sanduíches como categorias separadas. Mas no menu aqui, eles são agrupados como uma categoria. Uma maneira de fazer isso como logo cara é com um controlador de tabulação. Como o controle de abas ou uma guia é um padrão que nos permite exibir grandes quantidades de conteúdo, como um menu em uma quantidade relativamente curta de espaço. Poderíamos usar guias para cada uma dessas quatro categorias e o conteúdo de cada guia será os itens de menu correspondentes. Vamos seguir em frente e fazer isso, deixe-me copiar este pedaço de texto aqui vamos alinhá-lo assim. Vamos chamar esse menu. Aqui, sob os controles de texto, vou configurá-lo para largura automática. Em seguida, vamos criar os links de tabulação para as categorias de menu. Vou duplicar isso. Vamos fazer isso 21 pixels. A primeira categoria é o que adere. Vamos duplicar isso. Este próximo é hambúrgueres e sanduíches. Vamos apenas copiar e colar, duplicar novamente mantenha pressionada a tecla shift enquanto arrasta para restringir o movimento a um eixo. O próximo é o quê? Rapidinhas. Finalmente, saladas. Ótimo. Agora vamos supor que vamos abrir as abas com estacas sendo a ativa. Vamos selecionar esses três e vamos mudar de negrito para regular. Só para destacar o fato de que esse é o controle de abas ativo, isso realmente não importa. Podemos tornar este ousado e este irregular. Nem sabemos se vamos usar guias quando criamos o design real. Isso é apenas uma ideia. Vamos supor que sim, temos as quickies selecionadas e gostaríamos de exibir alguns itens de quickies. Vamos seguir em frente e fazer isso. Em vez disso, asas de búfalo, vamos pegar a ferramenta retângulo ou R no teclado, e vamos criar um espaço reservado de imagem, algo assim. Não precisa ser exato. Então vou colar o texto aqui e depois o conteúdo. Novamente, eu realmente não me importo com espaçamento ou dimensionamento, é apenas um esboço bruto. Acho que o preço deve ser listado separadamente. Vamos fazer isso. Esse é um wireframe rápido de um item no menu, vamos seguir em frente e agrupar isso. Comando D para duplicar, depois deslocar, arrastar, algo assim, e vamos fazer isso novamente. Vamos alinhá-lo assim e vamos fazer os outros. Tão doce chili cachorros, vamos fazer isso. Isso foi $6 e depois batatas fritas $3, vamos copiar isso. Essa é uma ideia de como podemos representar todo esse menu em nossa página. Temos guias que representarão as quatro categorias de itens do menu de alimentos. Em seguida, cada guia contém os itens apropriados. No wireframe apenas exibiria uma amostra. Não analisamos todos os conteúdos de menu. Isso é um desperdício de tempo. Podemos fazer isso mais tarde quando chegarmos à parte do design. Se estivermos usando guias como essa, nem precisamos adicionar todo o conteúdo porque isso ficará oculto de qualquer maneira, isso está acontecendo no lado do desenvolvimento das coisas. Por outro lado, se não vamos usar um controle de abas como este e, em vez disso, optarmos por exibir todo o conteúdo do menu de alimentos, sim, o design final incluirá todos os conteúdo listado aqui. Mas vamos atravessar essa ponte quando chegarmos a ela. Por enquanto, em termos de wireframing, isso é mais do que suficiente. Finalmente, vamos em frente e selecionar todos esses elementos. Comande G para agrupar tudo e agora temos uma boa descrição do menu de comida, depois o menu de comida real. Agora é hora de praticar. Vá em frente e crie a parte do menu de alimentos na sua versão do wireframe para que possamos seguir em frente com a classe. Se você já fez isso, isso é incrível, significa que estamos progredindo. Agora vamos cobrir as seções sobre e Instagram. 7. Wireframing: as seções de About e Instagram: Se você se lembra, o resumo do projeto afirmou que precisamos de uma seção com informações sobre o restaurante e outra com fotos do Instagram. Vamos prosseguir e criá-los agora. Vamos abrir nosso resumo do projeto e, na verdade, vamos rolar para cima, onde vemos alguns detalhes sobre as duas seções que precisamos criar. Sobre nós, o cliente diz que gostaríamos de mostrar uma pequena descrição do que é nosso restaurante e talvez mostrar uma foto ou duas de dentro do restaurante. Aqui, basicamente, temos um título sobre nós ou sobre o restaurante, descrição do texto e talvez uma ou duas fotos, imagens. Em seguida, fotos do Instagram. Precisamos exibir algumas fotos, fotos Instagram e, em seguida, um botão de seguir. Legal. Vamos voltar para a Descrição geral e vamos usar muitos dos textos daqui, a partir do resumo para isso, vamos em frente e copiar esse bit, vamos reutilizar os elementos porque vai ser muito mais rápido. Para esta seção, vamos basicamente chamá-lo sobre Birdhouse Bar and Grill. Aqui vamos ter uma ou duas fotos. Isso realmente depende. Podemos fazer isso assim. Talvez tenhamos duas fotos lado a lado, veremos e quanto ao texto aqui, bem, vamos copiar e colar. Esse é o texto que vamos usar. Essa é a seção Sobre. Acho que podemos mover isso um pouco para cima. Isso realmente não importa. Este é apenas o perfeccionista em mim perdendo tempo para ser honesto. Podemos selecionar esse grupo e terminamos com a seção Sobre. Agora vamos ver sobre o Instagram. Antes de fazer isso, vamos selecionar o quadro pai. Veja como atingimos quase a parte inferior, a borda inferior, então vamos redimensionar isso que tenhamos muito mais espaço para trabalhar. Vamos usar 5.000 pixels aqui. Ótimo. Agora vamos ver as fotos do Instagram. certo, vamos copiar esse elemento aqui. A propósito, aqui está uma dica rápida ao trabalhar com elementos que estão dentro de grupos ou quadros. Observe que, como este é um grupo, quando eu passar o mouse sobre um determinado elemento e clico, ele seleciona o grupo e, para selecionar um elemento específico do grupo, posso clicar duas vezes e entrar dentro do grupo. Você pode ver que eu passei de selecionar Grupo 13 para selecionar o Grupo 12. Se eu clicar duas vezes novamente, entrarei no Grupo 6 e assim por diante até chegar ao elemento que eu quero. Por exemplo, se eu não tiver nada selecionado, para selecionar, por exemplo, esta imagem, posso clicar duas vezes, clicar duas vezes novamente e depois atravessar toda a estrutura da árvore para chegar ao elemento Eu quero. Mas, na verdade, há uma maneira mais rápida de segurar o Command em um Mac, acho que em um PC é Control. Eu mantenho pressionado Command e pairo sobre o elemento que quero selecionar e posso simplesmente clicar nele imediatamente e ele selecioná-lo através de toda a estrutura de árvore que tenho aqui no painel de camadas. Independentemente de quão profundamente ele esteja aninhado, posso apenas manter pressionado o Command, clicar nele e posso selecioná-lo assim. É super simples. Agora, para a seção do Instagram, vamos clicar com a tecla Command-clique neste item para selecioná-lo. Comando C para copiá-lo. Vou clicar do lado de fora, depois colar e vamos chamar essas fotos do Instagram. Vamos também selecionar esse retângulo. Comando C, clique fora do Comando V. Às vezes, isso é colado no mesmo lugar, mas você pode movê-lo e vamos criar a seção de fotos. Mais uma vez. Eu só vou para o olho, algo como esse Comando D para duplicar. Em seguida, podemos selecionar esses três e ir aqui no Inspetor, onde ele diz Mais opções. Posso distribuir o espaçamento horizontal. Isso criará um espaço igual entre esses dois itens. Essa é a quantidade final de espaço? Definitivamente não. Mas para um wireframe, ele vai se dar muito bem. Temos uma linha com três fotos. Vamos duplicar isso. Arraste-o para baixo para criar a segunda linha. Em seguida, basta selecionar todos esses Comando G para agrupá-los, então é mais fácil movê-los se precisarmos e, na Figma, Command Z funciona da mesma forma para desfazer. Se você quiser desfazer uma alteração, basta fazer o Command ou Control Z, assim como em qualquer outro aplicativo. Se você se lembra, o resumo do projeto também disse algo sobre um botão Seguir. Vamos seguir em frente e adicionar esse. Vamos pegar a ferramenta de texto. Clique em. Vamos dizer, siga-nos. Vamos fazer 21 pixels em negrito. Vamos também pegar um ícone do Instagram. Vamos selecionar o elemento pai aqui, Comando C para copiar. Eu selecionaria este Comando V para colá-lo aqui e vamos alinhar isso no meio, algo assim, algo assim, e depois com a ferramenta retângulo ou R no teclado, vamos desenhar como um plano de fundo de botão. Observe que isso está atualmente no topo do nosso texto e ícone do Instagram. Para movê-lo mais para trás no painel de camadas, podemos clicar e arrastá-lo assim, ou podemos usar o Comando e colchete esquerdo para movê-lo para baixo uma vez, duas vezes, três vezes. Então podemos usar o suporte certo para ir na outra direção. Comando o colchete esquerdo para enviá-lo para trás, Comando o colchete quadrado direito para enviá-lo para frente. Essa é uma maneira fácil de manipular a ordem dos elementos ou a ordem das camadas na Figma. Com isso feito, vamos selecionar esses três Comando G e apenas, vamos alinhá-lo assim. Observe que Figma é muito útil com o alinhamento porque nos dá todos esses guias e nos dá todos esses guias e Guias Inteligentes que nos dizem “Ei, seu elemento está bem alinhado com os outros elementos em torno dele”, o que é muito legal. Agora, vamos selecionar esses três elementos. Comando G para agrupá-los e com isso, a seção do Instagram está pronta. Tudo bem então. Como de costume, esse é o momento da prática, então, se você não criou as seções Sobre e Instagram, vá em frente e faça isso. Depois de fazer isso, é hora de passar para a área de contato. 8. Wireframing: o formulário de contato: Bem, estamos quase fazendo um Wireframing. Existem apenas mais duas seções que precisamos criar e a primeira é O Formulário de Contato. Para começar, primeiro vamos dar uma olhada no resumo do projeto. Sob o formulário de contato, o cliente nos pede para criar um formulário que as pessoas possam usar para enviar mensagens ou fazer reservas e também querem um mapa que identifique a localização. Vamos seguir em frente e fazer isso. Vou rolar para cima e vou copiar esta seção porque ela tem uma estrutura que podemos usar. Vou colá-lo assim. Vamos chamar esse contato. Vamos tornar esse texto um pouco menor, como 48. Na verdade, vou manter esses três elementos porque é uma seção de contato, faz sentido que o endereço, o número de telefone e o horário comercial estejam presentes aqui, bem como não apenas na área do herói. Vamos ter isso, isso e isso. Vamos ter um mapa aqui. Vamos fazer isso um pouco maior, talvez para diferenciá-lo do resto, podemos torná-lo um pouco mais escuro e por que não adicionar um texto dentro do mapa. Observe o quão áspero é o esboço, exatamente qualquer texto, apenas texto sem estilo em cima de fundos cinza. Essa é a beleza de um wireframe, não precisamos prestar atenção a detalhes como este. É apenas uma maneira rápida de colocar o conteúdo. Sabemos para o que devemos projetar. Finalmente, a última coisa aqui é criar um formulário de contato. Para isso, vamos realmente desagrupar isso e vamos agrupá-lo novamente mais tarde. Vamos criar um retângulo. Esse será o campo do fórum, algo assim e, em seguida, o texto dentro, digamos nome, agrupe isso. Vamos manter isso super simples. Vamos pedir um endereço de e-mail. Vamos pedir um número de telefone, e vamos pedir a mensagem real e claro, isso precisa ser um pouco maior, assim e no final, precisamos de um botão. Na verdade, criamos um botão aqui. Vamos pegar isso, e vamos colá-lo aqui. Vamos excluir o ícone e vamos escolher o texto para enviar mensagem. Posso aumentar o botão se quisermos e isso é apenas um detalhe insignificante. Então podemos pegar todos esses comandos G para agrupá-los e, em seguida, podemos pegar tudo isso, comandar G novamente para agrupá-lo, então agora é um grupo que podemos mover livremente e com isso, o formulário de contato ou a área de contato está concluído. Nós exibimos um título, exibimos um endereço de restaurante, número de telefone, horário comercial, um formulário de contato conforme o cliente solicitou e também um mapa. Este é um espaço reservado para um mapa, mas o design final terá um mapa. Então, é hora de praticar. Como eu disse, estamos quase terminando wireframing. Vá em frente e crie a área de contato para que você esteja atualizado sobre sua versão do wireframe e, em seguida, estará pronto para seguir em frente. Em seguida, e a área final que precisamos para wireframe é o rodapé. 9. Wireframing: o rodapé: Chegamos à lição final de wireframing onde cuidaremos do rodapé. Vamos. Quando se trata do rodapé, não temos uma direção exata do cliente, mas geralmente o rodapé contém informações que realmente não pertencem a nenhum outro lugar da página. Uma coisa que ainda não adicionamos à nossa página é um formulário de newsletter e o rodapé é, na verdade, um lugar perfeito para isso. Então, vamos adicionar o formulário de newsletter, mas também algum outro conteúdo típico que você encontrará em um rodapé, como informações de direitos autorais. Também adicionaremos o logotipo mais uma vez. Esse é o tipo de conteúdo que você geralmente encontra em um rodapé. Você também pode adicionar links de navegação, se for isso que você quiser. Você pode adicionar um botão Voltar ao topo. Depende realmente do site. Você pode torná-lo tão complexo ou tão simples quanto quiser, mas no nosso caso, vamos mantê-lo super simples. Vamos começar com este formulário de newsletter. Mais uma vez, vou aumentar o tamanho do nosso quadro para, digamos, 6.000 pixels, que deve nos dar espaço suficiente aqui. Vamos começar copiando esse texto e, enquanto estivermos nele, podemos muito bem torná-lo largura automática. Este também. Agora vamos ver, temos outros? Sim, nós fazemos. Quando você está definindo uma largura fixa em um pedaço de texto como este, isso significa apenas que sempre que você adiciona mais texto do que os limites, ele simplesmente transborda para a próxima linha. Mas se você configurá-lo para largura automática, isso não transbordará em uma linha separada. Em vez disso, ele apenas redimensionará e aumentará sua largura para caber em todo o seu conteúdo. Para títulos como este, é mais do que bom configurá-lo para largura automática. Quando se trata de parágrafos como este, por exemplo, onde você deseja que o texto pare em um ponto específico, é claro, você pode configurá-lo para altura automática, o que significa que ele tem um fixo largura e sua altura são ditadas por seu conteúdo. Mas em coisas como essa, que são títulos, você pode configurá-lo para largura automática, sem problema. A menos, é claro, que o título seja muito longo, nesse caso, você pode querer configurá-lo para altura automática. Mas então vamos cuidar do formulário de newsletter. Aqui vamos dizer: “Assine nosso boletim informativo”. Vamos também pegar um desses elementos de texto e vamos fazer com que isso seja grande. No interior, vamos adicionar um subtítulo que diz “Inscreva-se nosso boletim informativo para saber mais sobre notícias e eventos especiais”. Então teremos um formulário simples aqui, e como já criamos um formulário na área Contato, vamos em frente e copiar esses dois elementos, trazê-los para fora. Vamos alterar o texto aqui para se inscrever. Agrupe isso, mova-o para cima e, em seguida, selecione grupo, e esse é o nosso formulário de assinatura de boletim informativo. Agora, para o resto do rodapé, é super simples de fazer. Vamos adicionar um texto de direitos autorais que diz Copyright 2021 Birdhouse Bar & Grill. Todos os direitos reservados. Vamos fazer esses 21 pixels para corresponder ao resto do nosso texto e isso também deve ser 21. Não que isso importe demais, mas é apenas algo que podemos fazer agora. Vinte e um aqui. Vamos ver, esses são todos 21, então estamos bem. Então podemos apenas alinhar isso aqui, e então podemos voltar ao topo. Podemos pegar o logotipo e, em seguida, rolar de volta para baixo, colá-lo. Podemos tornar o logotipo um pouco menor no wireframe. Então essa é a seção de rodapé. Vamos selecionar todo esse grupo e, em seguida, podemos selecionar o quadro pai e redimensioná-lo assim. Com isso, nosso wireframe agora está pronto. Claro, é preto e branco, você pode pensar que, “Oh, isso parece terrível.” Bem, é claro que parece terrível, é um esboço. Não tem nossa tipografia final, nossas cores finais, nosso espaçamento final, dimensionamento, nada disso. O wireframe é simplesmente um esboço, e seu propósito, como eu tenho dito nas lições anteriores, é apresentar o conteúdo. Fazemos isso de forma muito difícil, porque nos permite trabalhar muito rápido. Quando chegarmos ao design, é claro, vamos pegar cada seção e começaremos a adicionar as fontes, as cores, vamos alinhar os elementos de forma diferente, decidiremos, queremos usar esses ícones ou talvez não? Talvez não queiramos usar ícones. Veremos quando chegarmos à parte do design. Mas, por enquanto, este é o nosso wireframe acabado. Como você provavelmente já está acostumado, é hora de praticar. Se você tem trabalhado ao meu lado, então você deve ter um wireframe completo. Caso contrário, vá em frente e faça isso agora para que esteja pronto para seguir em frente com a classe. Agora, desde que terminamos o wireframing, vamos fazer uma rápida recapitulação das últimas cinco lições. Wireframing é como esboçar, e você pode fazê-lo digitalmente ou com caneta e papel. Em um wireframe, você pode usar as fontes que quiser, mas eu recomendo as neutras como Helvetica ou Roboto. Um wireframe deve ser criado em escala de cinza. As cores não pertencem a esse estágio do processo. espaçamento e o dimensionamento não são finais neste momento, então não tente tornar seu pixel de wireframe perfeito, é uma perda de tempo. Com isso fora do caminho, podemos iniciar o processo de design real e começaremos definindo a tipografia. 10. Definindo a tipografia: Nesta lição, estamos iniciando oficialmente o processo de design. Fazemos isso definindo primeiro a tipografia. Isso significa o tipo de letra ou os tipos de letra. Usaremos a escala de tipo e o espaçamento entre letras, os pesos da fonte, as alturas da linha e assim por diante. Agora começamos assim porque em uma página da Web típica, a maioria do conteúdo é texto. A tipografia terá o maior impacto visual. Além disso, acho muito fácil trabalhar assim porque simplifica o fluxo de trabalho. Claro, você pode fazer alterações na tipografia mais tarde, mas lidar com isso primeiro lhe dá uma base sólida para construir. Ao escolher os tipos de letra para um projeto como esse, há vários fatores a serem considerados. Embora este seja um tópico que será realmente adequado para uma aula inteira separada porque há muito o que falar, vou tentar simplificar o processo e explicar basicamente minhas escolhas. Acredito que tudo se resume ao propósito do design e ao sentimento que você quer transmitir aos visitantes. A maneira mais fácil de começar é descobrir o tom ou o humor do site que você deseja projetar. É casual ou mais formal? É mais sério ou mais do lado lúdico? Depois de responder a essa pergunta, você terá uma direção muito mais clara. Então, para descobrir o tom e o humor do site que estamos tentando criar, vamos dar uma olhada mais de perto no resumo do projeto. Se você se lembra das lições anteriores , no final temos algumas diretrizes de design. Agora é o momento perfeito para olhar para eles. O cliente quer que criemos um site de aparência moderna. Observe a palavra moderno. Esta é uma informação fundamental. Mesmo que seja uma empresa familiar aberta em 95, os proprietários gostariam que nos adaptássemos proprietários gostariam que nos e acompanhássemos os tempos modernos. Eles também querem que o site pareça amigável e não muito chique. Eles não são um desses restaurantes sofisticados e super caros. Observe as palavras-chave aqui, amigáveis, não muito chiques. O design deve atrair pessoas mais jovens e mais velhas. Com base nisso, podemos começar a formar uma opinião sobre quais tipos de letra devemos usar. Existem duas categorias principais que podemos escolher. Temos serifas e sans serifs. Deixe-me mostrar o que ambos se parecem. Para isso, abrirei o Google Fonts, que é um dos melhores serviços que temos atualmente para obter fontes de qualidade. Por exemplo, Playfair Display. Agora, acho que estamos todos familiarizados com esse tipo de fonte. A categoria é chamada de serif por causa disso aqui. Essas decorações que você vê nas letras, são chamadas de serifas. É assim que as fontes se parecem no início. Essas são consideradas fontes mais clássicas. Em contraste, se olharmos para algumas fontes sans serif, o que basicamente significa sem serifas, e vamos procurar por algumas dessas, por exemplo, Roboto, você notará que nas serifas sans, não temos mais essas decorações sobre os personagens. Estes são mais geométricos, têm aparência mais moderna porque não compartilham essas características com as fontes serif. Então, como diretriz geral, quando você está tentando decidir entre serifas e sans serifs, você deve se lembrar do seguinte; sans serifs, por exemplo Roboto, são mais modernos e são mais amigáveis, são mais casuais, são mais geométricos. serifas, por outro lado, como as que eu mostrei anteriormente, estão mais do lado sério. Eles são mais clássicos, são mais elegantes e evocam sentimentos diferentes. Você usaria uma fonte serif no site que deseja transmitir elegância ou parecer mais séria, vamos chamá-la. Se você quer um site mais divertido ou moderno , então você iria para um sans serif, como o que estou mostrando aqui. Isso é em poucas palavras. Como eu disse, esse tópico provavelmente seria adequado para uma aula inteira, mas por enquanto eu só quero lhe dar uma versão muito condensada. Então, com base no que acabei de dizer e com base nas diretrizes de design fornecidas para nós, porque o cliente quer um site de aparência moderna e ele quer que o site pareça amigável e não muito chique, nós pode imediatamente fazer uma escolha em relação ao tipo de letra. Usaremos um tipo de letra sans serif. O que eu escolhi para este projeto chama-se Poppins. Deixe-me mostrar a você. Este aqui está disponível gratuitamente no Google Fonts e é assim que parece. Há algumas razões pelas quais escolhi Poppins. Primeiro de tudo, é um sans serif. É de aparência moderna, é muito amigável, mas também, e essas são coisas muito importantes, parece muito bem em tamanhos grandes, assim, mas também em tamanhos menores. Por exemplo, isso, podemos usá-lo para o corpo do texto, mas também para títulos, para títulos. O segundo motivo é que ele tem uma ampla gama de estilos ou pesos para escolher. Vai de fino, que se parece com isso, até o preto, que se parece com isso. Ser uma fonte versátil e ter todas essas opções em termos de peso da fonte torna muito útil, especialmente em sites onde usaremos um único tipo de letra como temos aqui. Outro motivo é, claro, o fato de que ele é gratuito. Todas as fontes do Google Fonts são gratuitas para uso mesmo em projetos comerciais, o que é fantástico. Isso significa que nosso cliente não precisa pagar por uma fonte. Finalmente, Poppins também se sai muito bem em termos de legibilidade e legibilidade. Esses são todos os fatores que você precisa considerar ao escolher um tipo de letra para seu projeto. Para resumir, usarei Poppins para todo o site, então um único tipo de letra. Mas você pode ser atraído por outra coisa. É totalmente bom se você quiser usar um tipo de letra diferente para sua versão do projeto. Eu recomendo que você use o Google Fonts porque é um serviço gratuito e você encontrará muitas fontes de alta qualidade aqui. Mas se você estiver procurando por uma alternativa e estiver usando, por exemplo, a Adobe Creative Cloud, poderá usar o Adobe Fonts. Isso pode ser acessado em fonts.adobe.com, e aqui você pode navegar por todas as fontes. Você pode filtrá-los por propriedades de classificação, tags. Você pode procurar por fontes just geometric e isso vai lhe dar todas essas. Você pode até encontrar Poppins aqui mesmo no Adobe Fonts. Este é outro ótimo recurso, mas isso não é gratuito, enquanto o Google Fonts é gratuito. Depende realmente de você e o que você acha que ficará melhor. Mas para este projeto, vou usar Poppins. Agora que sabemos qual tipo de letra usaremos, vamos em frente e aplicá-lo ao nosso design junto com todas as outras características tipográficas, como altura da linha, tamanho da fonte, peso da fonte, e assim por diante. Em Figma, vamos às páginas. Crie uma nova página. Podemos chamar esse design, apenas para termos alguma separação entre os wireframes e o design final. Vamos copiar o wireframe e vamos colar isso em nossa nova página. Agora temos uma boa cópia e estaremos trabalhando nesta. Então vamos começar chamando essas telas grandes. Não se preocupe muito com esse nome agora, só está lá para nos dar uma indicação do tamanho da tela. Agora, a primeira coisa que faremos é selecionar todos os elementos de texto e alterar sua família de fontes para Poppins. Claro, você precisa ter isso instalado em seu sistema, então, se você não fizer isso, é muito fácil. Você pode simplesmente abrir as fontes no Google Fonts e clicar em “Baixar família”. Ele fornecerá todos os arquivos de fonte, que você pode instalar em seu sistema. Eu não vou passar por isso porque presumo que você saiba como instalar uma fonte. Depois de instalar o Poppins, vamos voltar para Figma. Se você estiver trabalhando no navegador, talvez não veja a fonte imediatamente aqui, caso em que você precisaria atualizar ou recarregar a página. Em seguida, vamos selecionar esse elemento. Aqui está uma dica rápida, você pode ir para Editar e selecionar todos com a mesma fonte. Isso selecionará todos os elementos que estão usando Helvetica e vamos mudar para Poppins assim. Vamos ver, ainda precisamos dos títulos. Eles estão usando Helvetica bold, então eles não foram selecionados também. Mas vamos fazer isso agora. Selecionarei todos com a mesma fonte. Vamos mudá-los para Poppins, e vamos ver se temos mais alguma coisa que ficou de fora. Estou apenas mantendo pressionado o comando e selecionando cada elemento de texto apenas para garantir que ele use o tipo de letra correto. Como você pode ver no Inspetor, todos eles estão usando Poppins. Claro, você também pode ver isso visualmente, mas prefiro apenas ter certeza de que é um processo simples. Poppins, Poppins, Poppins. E quanto a esses? Correto. Poppins. Parece que temos todos eles. Essa é a Etapa 1, alterando a família de fontes. Em seguida, vamos trabalhar nos tamanhos de fonte, e é aqui que entra uma escala de tipos. Aqui está a coisa, sempre que você estiver decidindo qual tamanho de fonte usar para seu projeto de design, há duas maneiras de fazê-lo. Um é olhar para ele e dizer, ok, bem, talvez este pareça melhor, um pouco maior. Este talvez um pouco menor como 46. Mas a coisa com essa abordagem é que ela pode levar muito tempo. Em vez disso, o que eu recomendo que você faça é usar uma escala de tipo e uma escala de tipo se parece com isso. Vou abrir uma ferramenta chamada escala de tipo, e uma escala sempre começa com um tamanho base e uma proporção. É algo assim. Você começa com o tamanho base e multiplica isso com a proporção, e obtém outro passo na escala. Você pega esse valor, multiplica com a escala ou a proporção e obtém o próximo passo, o próximo e o próximo e o próximo, você pode até adicionar quantas etapas quiser. Como você pode ver, isso é como uma progressão dos tamanhos de fonte de grande para pequeno ou de pequeno para grande. Isso é o que é basicamente uma escala de tipos. Como você está fazendo isso dessa maneira, você não precisa mais adivinhar os tamanhos de fonte. Eles são todos bem definidos para você com base nesse tamanho inicial e na proporção. Dependendo da proporção, sua escala ficará assim ou assim ou assim. Quanto maior a escala, maior o contraste entre cada etapa na escala. Em um terço maior uma proporção de 1,250, temos um contraste relativamente pequeno entre esse tamanho e esse tamanho, ou entre esse tamanho e esse tamanho. Mas se formos para a proporção áurea, então temos uma diferença muito maior entre esse tamanho e esse tamanho, entre este e este, e assim por diante e assim por diante. Neste ponto, você pode usar essa ferramenta que eu recomendo, eu a uso o tempo todo. Você o usa para criar sua própria escala de tipos. Isso lhe dará exatamente os tamanhos de fonte que você precisa. Para o nosso projeto, tenho certeza que quero começar com um tamanho base de 21 pixels. Esse é o tamanho do corpo do texto. Esse é o tamanho de um parágrafo normal, basicamente. Quero um tamanho de fonte maior que o normal. Em um navegador, normalmente, o tamanho da fonte base é de 16 pixels, então 21 é um pouco maior do que isso. Mas estou fazendo isso intencionalmente porque quero que o texto seja legível. Se você se lembrar do resumo do projeto, acordo com as diretrizes de design, nosso design deve atrair pessoas mais jovens e mais velhas. As pessoas mais velhas definitivamente apreciarão um tamanho de fonte maior porque podem ler mais facilmente. É por isso que estou escolhendo iniciar a escala de tipos em 21 pixels. Agora, devemos decidir sobre a escala ou a proporção que vamos usar. Eu acho que para este tipo de projeto, a quarta proporção perfeita de 1,333 será exatamente o que precisamos porque temos um pouco de contraste entre cada passo na escala, mas não é exagerado como, por exemplo, a proporção áurea. Isso é demais. Para este tipo de design para o que estamos fazendo neste projeto, acho que o quarto perfeito é nos dar tudo o que precisamos. Então, uma vez que nos estabelecemos no tamanho da fonte base e na escala e descobrimos nossa escala tipográfica, podemos voltar para Figma e podemos criar outra página, e eu costumo chamar esses ativos. Aqui, geralmente tenho meu logotipo. Mas também gosto de criar um quadro que mostre todos os tamanhos de fonte e alturas de linha que estarão usando. Isso só vai tornar meu trabalho muito mais fácil mais tarde. Vamos criar um quadro. O tamanho realmente não importa. Vou começar com um pedaço de texto que vai dizer 21/, digamos 32 por enquanto, e vou explicar o que esses números fazem em um pouco. Vinte e um pixels é o tamanho da minha fonte base. É este aqui. O que eu faço é realmente fazer o texto 21. Vou usar Poppins também para exibir isso porque isso me dará a chance de ver como o texto se parece com meu tipo de letra escolhido. Mas vou usar regular e, em seguida, o segundo valor é a altura da linha. Agora aqui está a coisa legal sobre Figma, ela calcula automaticamente a altura da linha para mim com base em uma proporção predefinida e a altura da linha é a altura de uma linha de texto. Por exemplo, se eu tiver um têxtil aqui e eu disser, olá, este é um texto de várias linhas. Vamos definir isso para altura automática. Observe que quando seleciono um elemento ou uma palavra, a seleção me dará a altura exata dessa linha de texto. Se eu fosse mudar isso de 32-48, essa seleção, essa altura da linha agora será maior em comparação com essa altura de linha, que ainda está definida como 32 pixels. Isso é importante porque altura da linha afeta a legibilidade. Você não quer uma altura de linha muito pequena. Por exemplo, se eu definisse uma altura de linha de oito pixels, isso seria muito pequeno. Você simplesmente não consegue ler o texto porque as linhas de textos se sobrepõem umas às outras. E se eu fizer isso 52 pixels? Bem, isso é muito longo ou muito grande. O texto não é legível no momento. Em vez disso, você precisa escolher uma altura de linha adequada para o tamanho da fonte. Em 21 pixels, se eu excluísse esse valor, Figma calculará automaticamente uma altura de linha para mim, caso em que seria 32. Para 21 pixels, uma altura de linha de 32 pixels é muito boa, então vou mantê-la nisso. Em seguida, vamos duplicar isso e determinar o próximo tamanho da fonte, que no nosso caso é 27,99. Vamos arredondar isso para 28. Aqui, vou dizer 28. Vamos também mudá-lo aqui. Para a altura da linha, Figma calcula isso em 42. Vou definir 40 neste. Algumas dessas medições estão relacionadas ao sistema de oito pontos que estou usando para espaçamento e dimensionamento. Há uma lição separada para isso e você verá isso muito em breve. Mas, por enquanto, qualquer altura de linha que eu estiver usando será um múltiplo de oito. No meu caso, Figma recomendou 42, mas escolhi 40. Em seguida, vamos duplicar esse valor. O próximo tamanho da fonte é 37. Vamos 37. Também vamos mudar a altura da linha aqui, e você verá em apenas um pouco por que isso é tão útil. Por 37 pixels, a Figma recomenda 56 pixels como altura de linha, mas vou usar 48, assim. Em seguida, temos o tamanho da fonte de 50 pixels, assim. Vamos ver. Para a altura da linha, Figma recomenda 75, mas vou usar 64. Assim. Vamos continuar. Sessenta e seis pixels. Para altura da linha, a Figma recomenda 99. Vou trazer isso um pouco para 80. Vamos ter 66 e 80. Isso é 64 para a altura da linha, esqueci de mudar isso. Acho que precisamos de mais um, e isso será para os títulos maiores. Vamos ver, 88. Então 88 tamanho da fonte, e para a altura da linha, vou arredondar isso para 104, o que também é um múltiplo de oito. Agora vamos colocar isso aqui, 104. Legal. Também começamos com 21 pixels e mudamos para cima. Mas também podemos precisar de tamanhos de fonte menores que 21 pixels. Vamos dar um passo mais baixo e a ferramenta também nos dá valores mais baixos e, no nosso caso, é 15,75. Vamos arredondá-lo para 16. Terei 16 pixels, 24 pixels de altura da linha. Isso está correto, então direi 16 e 24. Com isso, agora temos a escala final do tipo. Os tamanhos da fonte são 16, 21, 28, 37, 50 , 66 e 88. Ao lado de cada tamanho de fonte, temos a altura da linha que será aplicada a cada elemento. Então, com isso no lugar, vamos seguir em frente e aplicar essas características tipográficas ao nosso design. Só para facilitar para nós, podemos copiar esse quadro em nosso design apenas para que tenhamos esses valores ali mesmo quando precisarmos deles. Vamos começar com o menu e selecionar todos esses. aqui vamos usar 21 Poppins. Acho que vamos para preto porque parece muito bom, e também acho maiúsculas. Para acessar opções adicionais de texto, basta clicar neste elemento e ir para a letra maiúscula, escolher este, em maiúsculas. Agora podemos movê-los um pouco assim. Em seguida, temos os itens do menu atendidos, 21 pixels. Vamos também adicionar a altura correta da linha, que é 32, assim, e podemos seguir em frente. Vamos, na verdade, abordar todos os títulos agora. Este aqui, isso é fácil. É um cabeçalho 1. Também usaremos o peso da fonte preta e para o tamanho da fonte, é 88, este aqui e 104 para a altura da linha. É claro que, quando fazemos isso, talvez precisemos nos movimentar por alguns desses elementos porque eles têm tamanhos de fonte muito maiores. Vamos ver sobre este. Para isso, usaremos um tamanho um pouco menor como este, mas também o peso da fonte preta, 66 e 80. Também nos títulos, quero reduzir um pouco o espaçamento entre letras e vou dizer menos três por cento. Isso apenas aproxima a letra um pouco. Eu sinto que isso parece muito melhor para esse tipo de letra em particular para Poppins. Vou fazer o mesmo para o cabeçalho 1. Se vamos chamá-lo assim, menos três por cento. Isso é o cabeçalho 1, basicamente. Este é o título 2. Vamos também mover isso para cima. Este, este também será um título 2 e aqui está o que você pode fazer na Figma pro tip. Você pode selecionar os elementos de texto. Você pode clicar com o botão direito do mouse, copiar colar como, você pode copiar as propriedades. Em seguida, você pode selecionar outro, clicar com o botão direito do mouse, copiar colar como e colar propriedades. Ou você pode usar os atalhos de teclado. Isso receberá exatamente o mesmo estilo que este. Muito legal. Vamos ver sobre os outros títulos. Vamos selecionar isso, vamos também selecionar este e este. Vamos clicar com o botão direito do mouse, Colar propriedades. Bom. Para este, vamos realmente ir um tamanho mais baixo e um lado é menor de acordo com nossa escala de tipo é 50. Ou podemos ir dois tamanhos mais baixos e ir para 37, então 37 tamanho da fonte, 48 linhas de altura. Vamos fazer isso, 37, 48, também preto, também menos três por cento. Ótimo. São todos os títulos atendidos. Agora, vamos ver o resto do texto. Vamos selecionar os grandes parágrafos. Este, este, e este, e este. Vamos adicionar um tamanho de fonte de 21 pixels, que é o tamanho da fonte base e 32 pixels como uma altura de linha. Vamos manter o peso da fonte regular. Também para este, porque está no rodapé, quero dar um estilo um pouco diferente. Vou fazer 16 pixels e 24 pixels de altura da linha, novamente, com base na nossa escala de tipos. O que mais? Vamos garantir que elas tenham as configurações corretas. Vamos 21, 32. Então esses 21, 32. A propósito, podemos alterar algumas dessas propriedades tipográficas à medida que estamos progredindo com nosso design. Neste momento, é basicamente uma base. Vamos passar para esses. Estes são, na verdade, os títulos ou os títulos do prato, e talvez queiramos dar-lhes um pouco mais de importância. Vou aumentar o tamanho da fonte em um passo aqui. Em vez de 21, usaremos 28. Selecionaremos esses três. Vamos dizer 28 e 40 e também menos três por cento, e vamos usar Poppins negrito desta vez porque preto, eu quero reservá-lo para os grandes títulos. Acho que para esse tipo de conteúdo, negrito funcionaria muito melhor. Para isso, vou manter 21 pixels. Vamos fazer a altura da linha e para isso também. Este já está definido. Este, 21, 32. O que mais temos? Nós temos esses, também devemos ter a altura da linha de 32 pixels. Também temos estes, que devem ser 21 e 32. Este está correto. Este, vamos atualizar também, 21 32. Este é 16 e 24. Deveria ser isso. Deixe-me realmente mostrar a diferença entre nosso wireframe original e a primeira iteração do nosso design depois de aplicarmos a tipografia. Claro, parece uma bagunça agora porque não há espaço suficiente entre os elementos. Na verdade, vamos consertar isso rapidamente. Vamos colocar mais espaço para respirar aqui, algo assim. Talvez faça isso um pouco menor. Mova isso para baixo. Você vê a diferença. Este é o wireframe. Foi aqui que começamos, e esse é o primeiro passo no processo de design definindo a tipografia. Veja quanta diferença isso faz. Porque, como eu estava dizendo, a maioria do conteúdo em uma página da Web é representada por texto. Ao alterar a tipografia, você causará o maior impacto visual. Isso é tudo o que faremos em termos de tipografia por enquanto. Agora, é hora de uma recapitulação rápida. Ao projetar um site, comece com a tipografia. Antes de escolher um tipo de letra, defina o tom e o humor do site que você está projetando. Use fontes sans-serif para sites mais modernos, casuais ou minimalistas. Use um tipo de letra serif para sites mais elegantes ou sérios. Agora que você conhece o básico de trabalhar com tipografia e escolher os tipos de letra certos, vá em frente e faça isso. Se você quiser, você pode escolher um tipo de letra totalmente diferente para sua versão do projeto. Expliquei por que escolhi Poppins, mas você deve escolher o que acha que funcionaria melhor para o tipo de site que estamos projetando. Agora, o que vem a seguir? Bem, em seguida, trabalhamos com cores e vamos criar a paleta de cores para este projeto e faremos isso na próxima lição. 11. Escolha as cores: Trabalhar com cores é divertido e definitivamente pode transformar um design, espero que de uma boa maneira. Mas também pode arruinar um. Se você estiver usando muitas cores ou simplesmente as erradas, um bom design simplesmente descerá pelo ralo, por assim dizer. Deixe-me mostrar as cores que vou usar para este projeto, por que as escolhi e também mostro algumas ferramentas úteis para trabalhar com cores. Para mim, tudo começou com o logotipo. Porque imediatamente quando eu vi, e quando vi essa laranja acastanhada, soube que queria usar isso para um sotaque. Aqui na pasta Assets, vamos também chamar essa escala de tipo. Vamos criar um novo quadro. Vamos chamá-lo de cores. By the way, pro-tip com um quadro selecionado, você pode pressionar Command R ou provavelmente é Control R no Windows para entrar no modo de renomeação. Ou você pode simplesmente clicar duas vezes no painel de camadas ou clicar duas vezes aqui e renomeá-lo assim. Com as cores, o que costumo fazer é desenhar um retângulo ou um círculo como este e apenas colar nessa cor. Isso é o que usaremos para o sotaque. Algumas razões muito boas, uma é que ele combina com o logotipo, por isso combina muito bem com a marca. Mas também é muito próximo da cor laranja, que é entre marrom e amarelo. Amarelo significa felicidade, alegria e também é um chamador de atenção, um chamador de atenção. Brown é uma cor mais séria e imponente e representa estabilidade e sabedoria. A combinação desses dois, eu acho, funciona muito bem para esse tipo de site, mas também para a própria marca. Porque se nos lembrarmos, esta é uma empresa familiar aberta em 95. Embora eles também estejam procurando ser modernos e amigáveis, eles também querem preservar parte desse legado, como podemos ver nessa descrição geral. É uma empresa familiar. Eu acho que, no geral, para este projeto, isso fará uma ótima cor de destaque. Uma cor de destaque significa uma cor que vamos usar com moderação, aqui e ali em certos elementos para destacá-los. Além disso, tem um grande contraste em branco e em um fundo escuro. Falando em contraste, isso é algo que você sempre deve considerar porque usar cores com um contraste muito baixo será muito ruim em termos de acessibilidade, pessoas com deficiência visual não será capaz de distinguir entre essas cores, então você está dificultando para elas. É por isso que sempre que você estiver escolhendo as cores do seu projeto, certifique-se de que elas tenham um bom contraste. Existem várias maneiras de verificar. No macOS, há um aplicativo que fica na barra de menus, chamado Contraste. É muito simples de usar. Você pode simplesmente escolher uma cor e, em seguida, escolher a outra cor, e qualquer coisa que esteja acima do Double A está pronta para usar. A Apple também diz se ela falha, como faz aqui, então significa que essa cor sentada em um fundo cinza claro como este não terá contraste suficiente, mas definindo em um branco como este terá contraste suficiente. Você pode até verificar isso com fundos mais escuros e verá que temos um bom contraste. Há também maneiras de verificar isso na web. Se você não quiser pagar por este aplicativo, ou talvez esteja usando o Windows e não tenha este aplicativo disponível, você pode simplesmente fazer uma pesquisa no Google por verificador de contraste e você pode encontrar este no WebAIM, e aqui novamente, você pode colar os valores ou escolhê-los manualmente e isso lhe dará a proporção aqui e também alguns que são muito úteis. Agora, para complementar essa cor de destaque, vamos falar sobre as cores pretas ou a cor que usarei para o texto. Essa cor é essa, 081E26 que se parece com isso. Agora, essa cor é um azul muito escuro. Observe que a tonalidade é essa. É uma cor azul muito agradável, que, a propósito, o azul é um elogio de laranja, então eles funcionam muito bem juntos. Mas também atenuei muito porque quero usá-lo para texto. Outra dica que posso dar aqui é que sempre que você estiver definindo as cores do seu texto, fique longe do preto puro. Isso vai ser muito duro, vai contrastar demais com o resto da sua página. Em vez disso, use um cinza ou misture um pouco da cor com esse cinza como fizemos para este exemplo. Estamos usando 081E26, que é cinza misturado com azul. Acho que esses dois juntos formarão um par muito bom. Novamente, essa cor contrasta muito bem com branco ou com outras cores com as quais podemos usá-la. As duas cores que usaremos são esta, D9366 e 081E26. Este é o sotaque, este é o preto. Eu chamo isso de preto mesmo que não seja tecnicamente preto 100%, mas é muito mais fácil referir-se a ela como a cor preta porque é isso que vamos usar para texto, para vários fronteiras, fundos e coisas assim. Agora que mostrei as duas cores que vou usar, vamos em frente e aplicá-las ao design. Vou começar selecionando essa cor aqui, a preta. Vamos ao nosso design, na verdade duplicaremos esse elemento. Na Figma, isso é super simples de fazer. Sempre que você está selecionando um grupo de elementos como eu fiz aqui. No inspetor, você receberá algo chamado cores de seleção. Isso basicamente mostra todas as cores que estão sendo usadas no design. Como trabalhamos apenas com preto, branco e cinza, posso clicar no campo com a cor preta e simplesmente colar o novo valor. Isso vai definir ou substituir o preto puro por essa cor em todos os elementos ao mesmo tempo. Agora, como você pode ver, estamos usando a cor atualizada. Quão fácil é isso? Essa é uma das razões pelas quais eu adoro Figma, também adicionou essa cor ao menu, aos ícones, a tudo. Uma coisa que vou fazer aqui é mudar a grelha de empréstimo de volta para a cor do axônio. Para isso, pode ser um pouco complicado. Vamos apenas selecioná-los individualmente. Voltaremos aos ativos, pegaremos essa cor e, em seguida, voltaremos ao design e usaremos isso. Ótimo. Isso é tudo o que faremos com a cor neste momento, porque outras mudanças serão feitas à medida que estamos progredindo com nosso design. Podemos decidir que talvez este parágrafo precise ser um pouco atenuado Nesse caso, podemos mudar a opacidade da cor para 80% ou 70%. Mas isso não é algo que podemos fazer agora. Isso acontece mais tarde, quando começamos a criar os layouts e ver como organizamos elementos e como suportamos elementos espaciais. Por enquanto, adicionar a cor do texto e a cor de destaque ao logotipo é mais do que suficiente, e isso nos dá uma base muito forte na qual podemos construir. Agora, ao trabalhar com cores, você pode simplesmente escolher aqueles que você acha que ficarão melhores, isso é totalmente bom. Mas existem certas ferramentas que podem ajudá-lo com essa tarefa. Lá eu digo, torná-lo mais preciso. Vou mostrar algumas dessas ferramentas, que pelo jeito que uso regularmente. A primeira é a cor da Adobe. Essa é uma ótima maneira descobrir paletas de cores acessando a guia Explorer. Se você está se sentindo sem inspiração, talvez esteja procurando criar algo com verde dourado. Você pode procurar por verde dourado ou qualquer termo que quiser e encontrará paletas de cores que correspondam a esses critérios. Você pode baixá-los como JPEG se estiver usando o pacote Creative Cloud, adicioná-los à sua biblioteca ou pode abri-lo e copiar cada cor individual. Ou você pode copiá-los como CSS diretamente ou XML ou SAS ou RSS. Esta é uma ferramenta muito útil, mas você também pode criar suas próprias paletas de cores. Por exemplo, se eu selecionasse minha cor de destaque, irei para a cor da Adobe, então eu a colaria bem aqui no meio, onde tenho a seta de cor base. Com base na harmonia, posso ter combinações diferentes. Isso é analógico e você pode realmente ver onde cada cor está na roda de cores. Esta é uma monocromática, variações diferentes da mesma cor, mas com mais branco ou mais preto adicionado a elas. Você tem tríade, cortesia, split gratuito. Existem várias regras de harmonia que você pode escolher. Mas fazer isso permite que você descubra e crie paletas de cores para o seu projeto. Por exemplo, em complementar ou dividir complementar, veja que a cor laranja que está na base do nosso sotaque é complementar com azul. Para o seu próprio projeto, você pode escolher esse para o plano de fundo ou para este e apenas brincar com a leveza da cor. Este aqui. Isso realmente lhe dá muita liberdade e torna seu trabalho muito mais fácil. O próximo aplicativo é chamado ColorSnapper. Isso é algo que eu uso há muito tempo em um Mac. Infelizmente, ele não funciona no Windows. Mas o ColorSnapper permite que você basicamente exiba um seletor de cores como esse que você pode usar para escolher cores de qualquer lugar na tela. Isso será copiado automaticamente para sua área de transferência. Você também pode ver o histórico de cores aqui. Posso escolher entre vários formatos. Em suma, é um ótimo aplicativo. Se você estiver usando um Mac e estiver trabalhando com cores, muitas vezes, eu recomendo este. Uma alternativa também para Mac é o Sip. Isso é um pouco mais complexo, porque também oferece a opção de salvar determinadas paletas de cores. É um pouco mais avançado, mas isso também é novamente, apenas para Mac. Se você estiver usando o Windows, você pode instalar o aplicativo power toys, e isso também tem um seletor de cores integrado. Não funciona tão bem quanto esses dois, mas é um começo. Se você estiver usando o Windows, poderá se beneficiar da mesma funcionalidade. Outra ferramenta que uso quando estou trabalhando no Windows, por exemplo, é colorcontrast.cc. Este é um verificador de contraste na web, e faz exatamente a mesma coisa que este no sentido de mostrar o contraste entre duas cores e se ele passa ou não nos testes. Mas este é gratuito e é acessível a partir de qualquer sistema operacional. Finalmente, este é o aplicativo sobre o qual eu estava falando antes. Mas, novamente, isso é apenas para Mac. Escolha as cores com cuidado. Eles podem fazer ou quebrar um design. Não use muitas cores. Para manter as coisas simples, escolha uma cor para o texto e outra para acentuar certos elementos, como botões ou links. Se escolher mais de duas cores, certifique-se de que elas funcionem bem juntas. Agora as cores estão dentro, e acabamos de concluir outra tarefa enorme no processo de criação deste site. Você verá que, uma vez que a tipografia estiver definida, e você tiver aplicado algumas cores ao texto ou a alguns dos elementos no site, você terá muito mais facilidade para concluir o design. Agora, como de costume, é hora de praticar. Vá em frente e selecione e aplique as cores para sua versão do design. Depois de fazer isso, estamos prontos para passar para espaçamento e dimensionamento. Para isso, na verdade, vamos usar algo do sistema de oito pontos. Eu o uso há muito tempo e é tão útil para mim, realmente elimina as adivinhações quando se trata de elementos de espaçamento e dimensionamento. Deixe-me contar mais sobre isso na próxima lição. 12. Trabalhando com o sistema 8pt: O sistema de oito pontos tornará nossas vidas muito mais fáceis porque vamos usá-lo para espaçamento e dimensionamento. Isso é algo com o qual muitas pessoas lutam. Quero dizer, ao criar um design, quão largo ou alto ou você deve fazer um elemento? Qual margem ou preenchimento você deve adicionar a um botão? Por exemplo, você só o globo ocular? Ou existe algum padrão que você pode usar? Bem, esse é o poder do sistema de oito pontos. Ele cria um conjunto padronizado de tamanhos em que cada item é um múltiplo de oito, por exemplo, 16, 24, 32, 48 e assim por diante. Agora você não precisa mais adivinhar porque cada valor é um múltiplo de oito. você nem precisa se lembrar do valor total. Podemos nos lembrar do multiplicador. Por exemplo, em um botão, você pode aplicar um preenchimento de 16 pixels, superior e inferior e 32 pixels à esquerda e à direita. Em vez de lembrar esses valores, você pode simplesmente lembrar o multiplicador dois para cima e inferior, quatro, para esquerda e direita, então duas vezes oito e quatro vezes oito. Os exemplos podem continuar e continuar. A questão é que esse sistema é simples e facilita seu trabalho. Como todo o espaçamento e dimensionamento são baseados no mesmo número, você terá muito mais consistência entre os elementos. Agora você pode me perguntar, bem, por que oito, por que não cinco ou dez? Bem, acho que o número oito está gravado em nossa consciência porque estamos trabalhando muito com computadores. os múltiplos de oito em 16, 24, 32, 120, 256, 512. São todos números muito comuns usados em TI. Agora 32 gigs de RAM, 512 gigs de armazenamento, 1024 pixels como largura de tela. Os exemplos podem continuar e continuar. O ponto é o número oito e seus múltiplos são muito fáceis de lembrar. Outro motivo muito bom é que oito escalam até um número inteiro, mesmo quando se usa determinados multiplicadores de atrito. Por exemplo, 8 vezes 1,25 é igual a 10, 8 vezes 1,5 é igual a 12 e assim por diante. Agora, obviamente, você pode usar o número que quiser como base, você pode usar três ou usar sete. A ideia é que você usaria múltiplos desse número. Mas acho que usar oito é muito mais simples porque nos lembraremos desses valores multiplicadores ou desses múltiplos muito mais fácil para o número oito. Agora, deixe-me mostrar rapidamente como usarei esse sistema de oito pontos neste design. Deixe-me duplicar isso mais uma vez e dar a você um ou dois exemplos de onde vou usar o sistema de oito pontos. Um deles está bem aqui no menu. A distância entre cada item de menu será um múltiplo de oito. O que vou fazer é simplesmente usar a mesma distância. No meu caso, provavelmente será em torno talvez 32 ou 48. Depende realmente do design final. Por enquanto, vamos usar apenas 32 pixels. Tenho 32 aqui. Tenho 32 aqui. Vou mostrar uma maneira mais simples de fazer isso, mas por enquanto, apenas para fins de demonstração, vou fazer isso manualmente. Você pode pressionar Option, a propósito, e passar o mouse sobre um elemento específico para ver a distância entre o que você selecionou e esse elemento. Só estou mantendo pressionado o shift para selecioná-los e, em seguida, apenas usando as teclas de seta. Estou movendo isso para a esquerda e para a direita. Também posso pressionar Shift e usar as teclas de seta para fazer isso em incrementos de 10 pixels em vez de um pixel. Lá vamos nós. São 32 pixels. Esse é um exemplo de onde eu usaria o sistema de oito pontos. O mesmo vale para esses elementos aqui. Esses ícones estão posicionados a 26 pixels de distância, mas talvez eu queira que eles tenham 24 pixels. Novamente, isso é um múltiplo de oito. E quanto à vertical? Bem, a mesma coisa se aplica. Talvez eu queira ter uma distância entre esse cabeçalho para este texto de 32 pixels. Só vou mover isso para baixo e agora, tenho 32 pixels. E entre isso e isso? Talvez eu queira oito pixels lá. Entre esses dois, talvez eu queira 16 pixels, novamente, múltiplos de oito. Talvez eu queira que isso seja assim. Como estou usando 32 pixels como altura de linha, estou mantendo o mesmo sistema funcionando. Acho que agora você pode entender por que eu redefini as alturas da linha assim. Se você olhar 24, 32, 40, 48, 64, todas essas alturas de linha são múltiplas de oito. Mesmo antes de chegar à parte do projeto, eu ainda estava usando esse sistema de oito pontos ao definir a topografia. Falando em tipografia, os tamanhos das fontes não precisam necessariamente ser múltiplos de oito. O importante para manter um ritmo vertical adequado é que as alturas da linha são múltiplos de oito. Como eu estava dizendo, venho fazendo isso há muito tempo e sempre produz bons resultados. Bem, pelo menos eu os considero bons resultados. Eu recomendo que você faça o mesmo. Continuaremos aplicando o sistema de oito pontos à medida que estamos projetando cada vez mais elementos. Por enquanto, acabei de mostrar duas, três implementações ou exemplos de onde podemos usar esse sistema. Mas acho que isso deve lhe dar uma boa ideia. Além disso, como estamos no tópico de alturas para imagens, podemos fazer esses múltiplos de oito. Embora no caso de imagens, seja um pouco mais complicado porque você também deve considerar uma proporção. Mas, de um modo geral, quando você deseja definir uma altura fixa para uma imagem, você pode defini-la como um múltiplo de oito. No meu caso aqui, a imagem seria de 480 pixels. Agora, antes de encerrarmos as coisas, apenas uma menção final. Se você está descobrindo que múltiplos de oito são grandes demais às vezes para certos tamanhos ou distâncias entre elementos , sinta-se à vontade para usar múltiplos de quatro. Isso lhe dá um controle granular e mais apertado sobre como as coisas se parecem. Mas, por exemplo, digamos que os 32 pixels sejam demais, é uma distância muito grande entre esses dois itens manuais. O múltiplo anterior de oito seria 24. Mas 24 pode ser muito pequeno, nesse caso, você pode se comprometer. Você pode ir com 28, e 28 é, na verdade, um múltiplo de quatro. Se isso parecer bom, então ótimo. Vá em frente e use isso. Mesmo que seja chamado de sistema de oito pontos, isso não significa que a cada distância, cada medição precisa ser um múltiplo de oito. Você pode dobrar um pouco as regras se não parecer certo. Usar um múltiplo de quatro geralmente é a solução certa para esses tipos de situações. Agora vamos fazer uma recapitulação rápida. O sistema de oito pontos cria um conjunto padronizado de tamanhos em que cada tamanho é um múltiplo de oito. Esses tamanhos podem ser aplicados a qualquer aspecto de espaçamento ou dimensionamento. Por exemplo, margem, preenchimento, altura da linha, largura, altura e assim por diante. Usamos o número oito porque ele e seus múltiplos são muito conhecidos e fáceis de lembrar. O número oito também é dimensionado para um número inteiro, mesmo quando se usa determinados multiplicadores fracionários. Por exemplo, 1,5. Com o sistema de oito pontos explicado, estamos prontos para seguir em frente. Mas antes de fazermos isso, quero falar com você sobre layout automático. Esta é uma das maiores e mais importantes características da Figma. Eu adoro isso. Eu uso isso o tempo todo e também vou usá-lo muito neste projeto, e eu recomendo que você faça também. Agora, sendo um recurso tão grande, eu queria dedicar uma lição a ela. Estou fazendo isso porque quero que você aprenda o básico de trabalhar com layout antes de voltarmos ao processo de design. Acho que isso vai te ajudar tremendamente à medida que estamos avançando. Na próxima lição, vou mostrar o básico de trabalhar com layout oral na Figma. Se você já estiver confortável usando esse recurso, sinta-se à vontade para pular para a lição 13. 13. Uma introdução rápida ao layout Auto Figma: Acho que o layout automático é o maior recurso da Figma. É tão poderoso e tão útil que eu simplesmente não consegui trabalhar sem ele. Em poucas palavras, o layout automático permite criar layouts dinâmicos em quadros e componentes. Esses layouts diminuirão ou se expandirão à medida que o conteúdo interno for alterado. Você também pode usar um alinhamento bastante avançado nesses layouts. Para dar um exemplo simples com layout automático, você pode criar um botão que redimensiona automaticamente quando o texto dentro dele muda. Você também pode adicionar o preenchimento desse botão, o que é fantástico. Deixe-me dar uma rápida turnê sobre como usar o layout automático que você esteja mais preparado para as próximas lições. Vamos começar com algo simples. Vamos criar dois retângulos, um, um menor. Uma coisa que você precisa entender logo no início é que layout automático só funciona em quadros. Você não pode ter um grupo de elementos com layout automático. Você pode aplicar o layout automático a esse grupo, mas ele será automaticamente convertido em um quadro. Para adicionar o layout automático, basta selecionar os elementos que deseja incluir no layout automático. No meu caso, vamos selecionar esses dois. Existem várias maneiras de adicionar o layout automático. Você pode clicar com o botão direito do mouse e selecionar Adicionar layout automático ou pressionar “Shift A” como um atalho de teclado, ou pode ir para o objeto Menu, Adicionar layout automático. Como alternativa, se o objeto selecionado for um quadro, por exemplo, selecionei esse mainframe aqui, você também terá uma opção para adicionar o layout automático do inspetor clicando neste botão ou apenas clicando aqui. Mas, por enquanto, vamos nos concentrar nesses dois elementos. Vou selecioná-los, Shift A, para adicionar o layout automático. Isso criou automaticamente um quadro com esses dois elementos. Claro que este é um quadro aninhado. Isso é algo que você pode fazer em Figma. Você pode ter um quadro dentro de outro quadro e isso está perfeitamente bem. Como você pode ver, esse quadro agora contém esses dois retângulos. No Inspetor, você pode ver que o layout automático está ativo neste quadro. Em seguida, com base no arranjo ou na posição desses elementos em sua tela, Figma atribui automaticamente uma direção. No meu caso, é horizontal. Mas sempre posso mudar para uma direção vertical. O legal é independentemente da direção, cada elemento é intercambiável. Posso alterar essa posição usando as teclas de seta ou alterando a posição do elemento no painel de camadas. Como você pode ver, alterando a posição ou a ordem dos elementos, eles realmente mantêm o alinhamento e a distância entre os elementos que defini para esse quadro. Isso é simplesmente fantástico. Mostrei a você mudando a direção. Eles podem fazer isso com essa alternância aqui no Inspetor. Você também pode alterar o espaçamento entre os elementos indo com o cursor do mouse, clicando e indo assim, ou você pode inserir um valor manualmente. Isso garantirá que eu sempre tenha 240 pixels entre esses elementos. Posso adicionar um terceiro elemento. Por exemplo, digamos que eu queira adicionar um círculo dentro do meu quadro. Posso clicar e arrastar para adicionar meu círculo. Como você pode ver, o quadro redimensionado automaticamente para acomodar o novo elemento. Esse novo elemento agora está posicionado 240 pixels dos outros dois. Claro que se eu mudar isso para 120, o quadro será redimensionado automaticamente. Quão legal é isso? Agora, além de poder adicionar um espaçamento fixo entre elementos, você também pode adicionar um preenchimento dentro do quadro. Por exemplo, com o quadro selecionado, posso adicionar uma cor de preenchimento. Digamos que eu queira adicionar algo assim. Então eu posso adicionar um preenchimento. Posso dizer algo como 32 pixels. Isso adicionará 32 pixels de preenchimento dentro do meu quadro principal. Mas posso ir ainda mais longe e clicar no botão que diz alinhamento e preenchimento e posso alterar individualmente o preenchimento para cada lado; superior, direita, inferior e esquerda. Digamos, por exemplo, eu quero o 32 no topo, mas talvez 64 no lado direito, talvez 48 na parte inferior, e talvez 16 no lado esquerdo. Neste momento, esse elemento tem quatro valores de preenchimento diferentes adicionados a ele. Você tem um alto grau de controle sobre como isso se parece. Agora, alterar os valores assim definirá o valor da propriedade aqui misto porque você tem um conjunto misto de valores, mas você sempre pode substituir esse comportamento inserindo um valor manualmente. Digamos que eu queira 32 pixels de volta. Isso vai aplicá-lo a todos os quatro lados. Outro fato muito interessante sobre o layout automático é que você pode alinhar elementos de várias maneiras. Por padrão, os elementos estão alinhados à parte superior e à esquerda, mas posso alinhá-los no meio. Isso se torna mais aparente se eu definir uma largura fixa no meu quadro. Este é [NOISE] o comportamento padrão no canto superior esquerdo, mas este é o topo central. Posso alinhá-los no canto superior direito. Se eu vou adicionar uma largura fixa ao meu quadro ou uma altura fixa, desculpe-me, também posso alinhá-los ao meio assim. Posso alinhá-los centro-centro, centro-esquerda, e então posso alinhá-los ao fundo. É super simples e muito intuitivo, e também muito poderoso. Além das opções de alinhamento, também temos algumas opções de distribuição de itens, duas delas na verdade, embaladas e espaço entre elas. Embalado é a opção que usamos quando queremos ter um espaçamento fixo entre os itens. Neste momento, temos 120 pixels, então os itens são colocados um ao lado do outro com 120 pixels no meio. Mas também posso selecionar espaço entre eles. Isso definirá o espaçamento entre os itens como automático, o que significa que os itens ocuparão todo o espaço disponível do quadro pai e o espaçamento entre eles será calculado automaticamente. Neste momento estamos em 471 pixels, mas se eu fizer isso menor, o espaçamento entre eles também muda. Isso é muito legal. Isso, é claro, funciona em ambas as direções. Se eu vou mudar para vertical, você verá que esses itens agora estão espaçados verticalmente em vez de horizontalmente e a distribuição permanece a mesma, espaço entre eles. Enquanto estou no espaço entre eles, também alinho elementos um pouco diferente do que antes, porque o espaçamento entre eles agora é calculado automaticamente, mas ainda posso alinhá-los a a esquerda, o meio, a direita, ou se a direção for horizontal, posso alinhá-los superior, médio ou inferior. Isso é espaço entre eles. qualquer momento, posso alternar entre o espaço entre descompactado e também trabalhar no alinhamento. Isso é muito útil para muitos casos de uso diferentes. Por exemplo, posso ter uma lista de itens como um menu de navegação. Digamos que Home, Sobre, Contato. Posso selecionar esses três e posso fazer o Shift A para adicionar Layout automático. Isso os alinha automaticamente assim. Também posso definir o espaçamento entre eles, digamos 32 pixels. Agora, independentemente do conteúdo de cada item de texto, Layout Automático sempre garantirá que o alinhamento esteja correto e também o espaçamento entre os itens esteja correto. Não preciso realinhar elementos manualmente toda vez que faço uma alteração. Também posso pegar um dos itens e mudar sua posição simplesmente usando as teclas de seta. Quão legal é isso? Quero tornar este menu vertical em vez de horizontal? Acabei de mudar a direção aqui. Claro, também posso usar as teclas de seta para cima ou para baixo para alterar a ordem desses elementos. Outro caso de uso muito comum para layout oral é criar um botão. Digamos que tenhamos um pedaço de texto que queremos transformar em um botão. Bem, com isso eu posso, é claro, adicionar Layout automático. Isso definirá automaticamente um espaçamento padrão de 10 pixels e um preenchimento de 10 pixels. Posso adicionar uma cor de preenchimento ao quadro. Digamos que eu queira torná-lo azul. Digamos que eu queira deixar esse texto branco, talvez em negrito. Então, com meu quadro selecionado, posso ir em frente e alterar o preenchimento. Digamos que eu queira 32 pixels superior e inferior, 64 pixels esquerda e direita. Talvez eu queira adicionar cantos arredondados e torná-lo um botão pálido. A beleza disso é que posso mudar esse texto para o que eu quiser e o botão será redimensionado automaticamente. Posso até acessar meu aplicativo de conjunto de ícones e arrastar um ícone para dentro. Digamos que eu queira adicionar este ícone de preenchimento de alarme. Posso clicar e arrastar esse ícone na minha tela e, claro, posso arrastá-lo para dentro do meu quadro Layout automático. Então vamos fazer esse botão ou esse ícone, desculpe-me, 32 pixels, e então eu posso selecionar meu quadro e posso escolher alinhar tudo no centro assim. Posso optar por mudar sua cor para branco e posso escolher a distância entre os itens, digamos 16 pixels. Talvez isso seja muito grande, vamos fazer 24 pixels. Ou talvez seja muito pequeno, vamos fazer 128 pixels. Você verá que, independentemente do tamanho do elemento porque eu defini o alinhamento para estar no meio, o texto e o ícone estão sempre alinhados corretamente. Vamos voltar para 24 aqui. Além disso, sempre posso alterar a mensagem ou o texto dentro do botão e o botão será redimensionado automaticamente. A distância entre o texto e o ícone sempre permanecerá exatamente a mesma. Se eu quiser, sempre posso mudar a posição. Talvez eu queira que o botão fique à esquerda em vez de à direita. Tudo isso está acontecendo super facilmente sem nenhum mexer da minha parte. O que significa que não preciso reposicionar elementos manualmente. Acabei de pressionar uma tecla. É realmente tão simples assim. Estes são apenas dois casos de uso para Layout automático. Isso é super poderoso e, como você verá nesta classe, há muitas maneiras diferentes de usá-lo e eu recomendo que você aprenda a usar esse recurso, pois ele será útil e economizará você muito tempo. Ah, e eu mencionei que você pode aninhar quadros com Layout Automático dentro de outros quadros com Layout Automático? Por exemplo, posso pegar esse ícone e posso colocá-lo dentro desse quadro de menu. Vamos mudar sua cor para que possamos vê-la melhor. Mas digamos que eu queria ser empacotado com o link Sobre nós. O que posso fazer é selecionar isso e isso. Posso fazer Shift A para criar outro quadro com Layout Automático e posso escolher a direção para horizontal, talvez adicionar algum espaçamento adequado entre os elementos, alinhar tudo no meio. Talvez um pouco menos espaçamento aqui e talvez eu queira tornar isso um pouco menor. Agora, temos o mainframe, que tem Layout Automático, mas dentro disso, tenho um quadro adicional também com Layout Automático. Isso pode ir para quantos níveis você quiser, para que você possa aninhar tão profundamente quanto quiser. Esses são apenas os conceitos básicos de trabalhar com o Layout Automático. Como eu estava dizendo, acho que essa é a característica mais importante da Figma. É uma das maiores razões pelas quais eu uso Figma diariamente para o design da interface do usuário. Eu encorajo você a brincar com ele, aprender tudo o que há para aprender sobre isso, e uma vez que se torne uma segunda natureza para você, você construirá layouts muito mais rápido na Figma. Agora vamos fazer uma recapitulação rápida. O Layout automático permite criar layouts dinâmicos em quadros e componentes. Esses layouts diminuirão ou se expandirão automaticamente à medida que o conteúdo for alterado. O Layout automático fornece opções avançadas de alinhamento e distribuição de conteúdo. Com o Layout automático, você pode definir preenchimento individual para o elemento pai, bem como uma distância definida entre todos os elementos filho nesse pai. layout automático funciona nos modos horizontal e vertical. Bem, espero que agora você tenha uma compreensão muito melhor de como o Layout Automático funciona e por que é um recurso tão importante. Acredito que você terá um tempo muito mais fácil e agradável trabalhando na Figma depois de dominar esse recurso, então não se esqueça de praticar. Eu só mostrei alguns exemplos básicos e casos de uso. Mas vá em frente e brinque com isso por conta própria e acho que você vai pegar o jeito dentro de pouco tempo. Agora, estamos fazendo um pouco de design aqui adicionando cores e configurando a topografia. Mas agora é hora de realmente entrar nisso. Vamos dividir a página em seções menores e vamos lidar com uma seção de cada vez basicamente, e vamos começar na próxima lição com o cabeçalho do site. Vejo você lá. 14. Cabeçalho de site: Ao projetar um site como esse, eu sempre começo no topo e trabalho meu caminho para baixo. A primeira seção que vamos abordar é o cabeçalho do site. No wireframe, isso contém o logotipo, menu de navegação e os ícones sociais. Agora, antes de começarmos, observe rapidamente, o wireframe está lá como um guia. Seu objetivo é nos mostrar o conteúdo. No entanto, no design final, é perfeitamente bom ignorar o layout do wireframe e é perfeitamente bom reorganizar os elementos para que eles façam mais sentido para o design final. Você verá exatamente o que quero dizer com isso em um pouco. Vamos começar. Estarei trabalhando em uma cópia do nosso wireframe, mas o mais recente que tem as mudanças de tipografia aplicadas e também as cores. Como você pode ver aqui, aplicamos essa cor 081826. Só para tornar as coisas um pouco mais simples para nós, vamos seguir em frente e definir dois estilos de cores. Eu não falei sobre isso antes, mas eles são muito fáceis entender e eles vão algo assim. Sempre que você estiver usando uma cor que planeja reutilizar em vários lugares, é uma boa ideia criar um estilo de cor. Você faz isso selecionando um elemento e indo para a seção de cores, clicando em Estilo e, em seguida, criando um estilo clicando no botão de adição. Vamos chamar isso de preto. Agora, em vez de exibir a seção de cores, ela só exibe preto, e eu posso fazer o mesmo para o resto dos elementos. Em vez de usar 081826, posso clicar aqui e posso escolher preto, e aqui está a parte legal. Agora, quando clico fora dos meus quadros, então, se eu clicar na tela, posso ver todos os meus estilos de cores aqui e posso clicar em Editar, e posso alterar suas propriedades e todos os elementos que estão usando esse estilo de cor será atualizado automaticamente. Isso é super legal. Agora, deixe-me colocar essa cor de volta. Para alterar o valor da cor codificada para o estilo de cor que acabei de criar em toda a página, posso selecionar a página inteira, e sempre que vejo 081826, posso clicar nisso e pode escolher preto. Agora, todos os elementos da minha página que estamos usando, esse valor codificado agora está usando preto. Isso vai tornar super simples para mim mudar a cor se eu decidir em algum momento que não gosto mais, ou preciso fazer pequenos ajustes nela. Esta é uma maneira super rápida de fazer isso. Vamos também criar um estilo de cor para essa cor, D09366, e vamos chamar isso de sotaque. Incrível. Agora vamos ver sobre o cabeçalho do site. Para facilitar muito o trabalho, vamos usar o layout automático. O primeiro lugar em que vamos adicionar layout automático é na verdade, o quadro pai. Veja como faremos isso. Vamos selecioná-lo, iremos para o layout automático, clicaremos nele. Vamos nos certificar de que a direção é vertical e vamos definir o espaçamento entre os itens em 240 pixels, e também vou definir o preenchimento para zero. Você vai ver por que em um pouco. Também vou definir uma largura fixa neste quadro para 1800 pixels. Vou mudar o alinhamento para o meio, então tudo está bem alinhado no meio. Como todos os elementos filho desse quadro pai estão dentro de grupos, eles são bem organizados, alinhados e posicionados exatamente a 240 pixels um do outro. Isso é exatamente o que eu quero. Isso vai tornar super simples para nós trabalharmos, porque se em algum momento eu decidi, ok, eu quero trocar as posições desses dois elementos, posso simplesmente selecioná-lo e movê-lo para onde eu quiser no página. Veja como isso é fácil. Talvez eu queira que o menu esteja no topo da página, bem, eu posso simplesmente movê-lo assim. Muito legal. Mas agora vamos voltar nossa atenção para o cabeçalho. Por padrão, essa é a estrutura que adicionamos no wireframe. Mas isso é como uma estrutura típica para um cabeçalho, e eu realmente não quero fazer isso. Quero algo um pouco mais especial para este site de restaurante. Em vez disso, vou selecioná-lo, e atualmente esse é um grupo, mas sempre posso transformá-lo em um quadro com layout automático. Posso clicar aqui. Posso torná-lo vertical. Posso alinhar tudo no centro assim, e posso definir o espaçamento entre os itens para 64 pixels. Isso parece muito bom. Agora, vamos chamar esse cabeçalho. Vamos ver sobre o logotipo. Isso tem 80 pixels de altura. Acho que vou mantê-lo nesse tamanho porque parece muito bom, e se você está se perguntando por que 80 pixels? Por que 240 pixels aqui? Bem, esses são todos múltiplos de oito. Estou usando o sistema de 8 pontos, então se você perder essa lição, volte e assista, então você entenderá o porquê. Agora, estávamos falando sobre o logotipo, nossos 80 pixels de altura. Acho que este é um tamanho muito bom. Estou configurando-o em 64 pixels do menu de navegação. Como estamos no menu de navegação, vamos também renomear isso como menu de navegação, e também vamos transformar isso em um quadro com layout automático, e vamos nos certificar de que temos o espaçamento adequado entre esses itens. Deixe-me realmente ampliar aqui um pouco. Acho que quero um pouco mais, talvez 48 pixels assim, então eles estão um pouco mais distantes. Isso parece muito bom. Agora, o que eu não gosto é a posição desses ícones. Eles parecem fora do lugar abaixo do menu. O que posso fazer é colocá-los em outro lugar na minha página. Não importa se o wireframe original disse que eles precisam estar ao lado do menu. No design final, posso fazer qualquer alteração que eu quiser desde que eu mantenha o mesmo conteúdo, mas posso pegar esse conteúdo e reorganizá-lo como quiser. Isso é exatamente o que vou fazer aqui. Vou pegar isso, que vou chamar de ícones sociais, e também adicionar um layout automático a ele. Vou comandar X. Vou apenas para o “Comando V” para colá-lo na minha página. Agora, como meu quadro inteiro usa layout automático, isso foi colocado na parte inferior e eu quero no topo, então vou movê-lo assim. Agora, depois de algum zoom, agora tenho meu quadro de ícones sociais posicionado bem no topo. Mas provavelmente vou colocá-los em algum lugar do lado direito, que significa que tenho algum espaço livre aqui à esquerda e no canto superior esquerdo. Posso usar esse espaço para adicionar algumas informações talvez úteis. E se adicionarmos o endereço e o número de telefone do restaurante que está no topo. É fácil de ver e na verdade é um bom uso do espaço adicionando informações de contato ali mesmo. O que faremos é criar uma barra superior que conterá essas informações, o endereço, o número de telefone e também os ícones sociais. Em seguida, com o quadro de ícones sociais selecionado, posso adicionar o layout automático a ele novamente para criar um quadro pai. Posso “Shift A” novamente para criar outro quadro. Observe que o Quadro 1 agora contém ícones sociais. Vamos chamar essa barra superior do quadro. barra superior apenas arrastará seus lados para torná-lo largura total ou podemos realmente definir sua largura manualmente a partir daqui, podemos configurá-la para 1.800 pixels. Mas aqui está uma dica rápida para você. Opção de redimensionamento de cd aqui que agora está disponível dentro do quadro com layout automático. No momento, ele está definido para largura fixa. Mas também podemos alterá-lo para abraçar o conteúdo, que tornará o quadro tão grande quanto seu conteúdo. Ou posso escolher “Recipiente de preenchimento”. Isso o tornará tão grande quanto o espaço disponível no contêiner pai, que no meu caso é o quadro principal. Eu percebo que isso pode parecer um pouco complicado demais agora, mas não é realmente. Deixe-me tentar explicar um pouco mais. Temos nosso quadro principal chamado Telas grandes. Esta é a nossa página da web. Dentro da minha página, deixe-me realmente colapsar alguns desses grupos para que você possa entender um pouco melhor, dentro do meu quadro principal, temos dois filhos, cabeçalho e barra superior. A barra superior tem layout automático, e dentro da barra superior temos o quadro de ícones sociais, que também possui layout automático. Agora, eu defini a barra superior para preencher o contêiner. Isso significa que sua largura será 100% do contêiner pai. O contêiner pai é Telas grandes, que são 1.800 pixels. Você notará que se eu for redimensionar a tela dos pais ou o quadro pai para 1.645, minha barra superior também será 1.645 porque está definida para preencher o contêiner. Espero que isso faça um pouco mais de sentido. Tenho certeza de que, ao brincar com esses recursos, você começará a entendê-los muito melhor. Então eu disse que vamos adicionar esses dois elementos dentro da nossa barra superior. Se você quiser colocar elementos diretamente em um quadro com layout automático, basta selecionar esse quadro e simplesmente colá-los. Agora, vamos mudar a direção para horizontal. Porque eu quero que eles sejam exibidos em uma única linha. Também vou mudar a altura para abraçar o conteúdo. Isso tornará a barra superior tão alta quanto o conteúdo interno. Agora eu quero que os ícones fiquem no lado direito, e às vezes Figma tem um bug estranho onde se você brincar com o redimensionamento aqui, este está na horizontal bugs para fora. Nesse caso, você precisa selecionar novamente alguns desses elementos, como nessa situação. Acabamos de passar do conteúdo do abraço para encher o recipiente para redimensionar esta barra superior de acordo. Vou usar um bom recurso aqui, distribuição de espaço. Vou mudar isso de empacotado para espaço porque quero exibir os ícones na borda muito distante aqui no lado direito e o texto no lado esquerdo. Usando espaço entre, Figma definirá automaticamente o espaçamento entre cada item para ser igual. Vamos também alinhá-los ao centro, assim. Por enquanto, vamos nos livrar desse preenchimento de 10 pixels, não precisamos dele. Em vez disso, usaremos preenchimento de 24 pixels na parte superior, 24 na parte inferior, e também, vou definir um preenchimento para a esquerda e para a direita para 64 pixels. Agora, temos 64 pixels aqui e 64 pixels aqui, a distância entre os elementos e as bordas. Além disso, se você se lembrar, nós definimos esses guias para 120 pixels. Mas vamos mudar isso para que eles fiquem em 128 pixels. Como isso está em 120, vou fazer 1, 2, 3, 4, 5, 6, 7, 8, então 128. Usando as teclas de seta, vou empurrar isso para a esquerda, 1, 2, 3, 4, 5, 6, 7, 8. Além disso, vou criar um novo guia em 64 pixels, que está aqui e aqui. Normalmente, o valor dessas guias será mostrado aqui na régua, ou a posição das guias será mostrada na régua. Mas por algum motivo, Figma está me incomodando agora. Não sei por que, mas normalmente, você pode ver esse valor ao lado do guia aqui, mas podemos ficar sem isso por enquanto. Agora, eu quero tornar esse texto um pouco menor, então vou selecionar ambos. Vou usar 16 pixels. Também precisamos alterar a altura da linha. Se referenciarmos nossa página Ativos, podemos ver que em 16 pixels, precisamos usar 24 pixels como altura de linha. Voltaremos ao nosso design com esses dois elementos selecionados, altere a altura da linha para 24. Agora, eu também gostaria de adicionar alguns ícones a este texto. Talvez um ícone de um pino de mapa para este e um ícone com um telefone para este. Acho que isso só vai tornar as coisas um pouco mais interessantes. Para isso, abrirei minha configuração de ícones, onde tenho todos os meus ícones SVG. Vamos usar um conjunto de ícones chamado de ícones de Bootstrap, e você também encontrará o link para isso no arquivo PDF de recursos. Este é o conjunto de ícones Bootstrap. Vamos procurar por um pino de mapa, que se parece com isso. Talvez localização. Não, talvez apenas alfinete. Vamos ver se podemos encontrar alguns ícones diferentes. Talvez algo com geografia, geo-alt. Acho que isso funcionaria muito bem, então vou copiar isso e colá-lo aqui. O tamanho está correto, 16 por 16, mas eu quero empacotar isso com o texto. Vou selecionar o ícone e o texto. Pressione “Shift-A” para adicionar outro quadro com layout automático que contém apenas esses dois elementos. Vou me certificar de que está alinhado assim no meio. Quero que o texto fique à direita. Vou definir o espaçamento para oito pixels, assim. Também quero usar uma cor ligeiramente silenciada para o ícone, em torno de 50%. Duas maneiras de fazer isso, podemos alterar a opacidade da camada para 50%, ou podemos criar um novo estilo de cor que tenha a opacidade da cor definida para 50%. É realmente com você. Eu acho que isso é realmente um pouco mais fácil definir a opacidade na camada porque se você mudar a cor subjacente, a opacidade permanecerá a mesma. Eu só vou fazer isso, 50% usando a cor preta. Vamos fazer o mesmo pelos outros textos, que é este. Vou procurar o ícone do telefone, e vou usar este que diz telefone. Mesmo negócio, vou copiar e colar isso, e fui em frente e, claro, mudo a largura, altura para 16 opacidade, 50% de cor para preto. Agora, vou fazer a mesma coisa que fiz com o outro texto. Selecione texto e ícone, Shift-A, certifique-se de que o espaçamento seja de oito pixels, alinhe-os no meio e tenha o texto definido no lado direito. Agora, também, eu gostaria que esses dois elementos fizessem parte do mesmo grupo, então, com eles selecionados, Shift-A novamente para criar outro quadro de layout automático. Vou definir a distância entre eles para 32 pixels, assim. Agora, também quero adicionar um pequeno separador de bordas na parte inferior desta barra superior. Deixe-me realmente Shift-R esconder esses guias. para que possamos ver o que estamos fazendo. Com a barra superior selecionada, posso simplesmente ir para Stroke, clicar para adicionar, vou usar preto. Vou escolher lá fora. Na verdade, o preto aqui é um pouco demais. Precisamos diminuir sua opacidade, para que possamos separar o estilo, mudar sua opacidade para 15%. Agora, se quisermos, se soubermos que vamos reutilizar essa cor em outro lugar, podemos criar um estilo de cor para ela. Na verdade, vamos clicar no “Plus” e chamá-lo de Black 15. Quinze significa 15% de opacidade. Agora, você tem os dois métodos para trabalhar com uma cor completa e uma cor com opacidade. Aqui no ícone, adicionamos a opacidade à camada, enquanto aqui, adicionamos a opacidade à cor. Você pode ver que você pode usar os dois métodos. Depende realmente do que você quer fazer. Finalmente, vamos ver sobre esses ícones. Eles estão um pouco grandes demais agora, então vamos redimensioná-los para 24 pixels. O Facebook não recebeu a atualização. Além disso, o ícone do Instagram está um pouco torto. Às vezes, Figma faz isso com alguns ícones SVG, então deixe-me consertar isso muito rápido. Acabei de usar uma nova cópia do ícone para substituir o antigo. Esses também são ícones do conjunto de ícones Bootstrap. Como você pode ver aqui, o ícone do Instagram parece correto. Além disso, vamos seguir em frente e mudar a distância aqui, ou o espaçamento entre itens de 24 para 32. Acho que isso vai parecer um pouco melhor. Vamos nos certificar de que as cores estão corretas e elas estão. Acho que acabamos. Agora, essa é a nossa barra superior e o cabeçalho do site. Como usamos o layout automático, eles estão posicionados corretamente. O cabeçalho agora está centralizado na página. O logotipo está posicionado corretamente longe do menu de navegação. Também movemos algum conteúdo da área do herói para esta barra superior, que, a propósito, a barra superior agora se comporta assim. Veja como quando estou redimensionando a página, a barra superior também é redimensionada e os elementos se reposicionam automaticamente? Isso é super legal. Esse é o poder do layout automático e as várias opções de redimensionamento que temos na Figma. Em seguida, barra superior, cabeçalho do site, verifique. Agora, é sua vez de criar o cabeçalho do site. se você tem trabalhado ao meu lado, então ótimo. Isso significa que já está feito. Caso contrário, vá em frente e assista ao vídeo novamente. Pause-o, se necessário. Se houver algo que você não entende ou tem uma pergunta, basta começar uma nova discussão abaixo, e eu vou ajudar de qualquer maneira que eu puder. Com isso dito, vamos passar para a próxima seção em nosso design, que é a área do herói. Chegando. 15. Seção de herói: A seção Herói é uma parte muito importante de um site porque é uma das primeiras coisas que um visitante vê. Normalmente, ele contém um título e alguma descrição do serviço ou produto que está sendo apresentado, e algum tipo de ação, compre agora, experimente gratuitamente, assine e assim por diante. Nossa área Hero é um pouco mais simples por causa da natureza do site que estamos projetando. Vamos chegar a ele. Com base no wireframe que criamos, esta é a nossa seção Herói. Aqui temos o lema do restaurante que vem como hóspede, sair é um amigo e também temos o horário comercial e, em seguida, algum tipo de imagem. Vamos começar com a imagem real e você encontrará links para todas as imagens de estoque que usei para este projeto no arquivo PDF de recursos, então vá frente e baixe aquelas de lá ou use suas próprias fotos. Mas para mim, para esta seção, vou usar uma foto que mostra o restaurante basicamente. Obviamente, este é um restaurante fictício mas a imagem que vou usar pode ser vista como o interior do restaurante. Com essa forma selecionada, lembre-se que este é apenas um retângulo simples, posso ir para Preencher e, em vez de uma cor “Sólida”, posso escolher uma “Imagem”. Posso clicar neste botão e, na pasta Recursos de classe, eu realmente baixei a imagem que vou usar do Unsplash. Só vou selecionar isso. Se você quiser, você pode brincar com algumas das opções de edição de imagens aqui na Figma. Para mim, vou deixar como está. A única coisa que vou fazer a ele é adicionar uma cor de sobreposição. Para isso, posso adicionar outro preenchimento, assim. Para cores, vou usar o “Preto” 081826. Vou usar isso em vez da cor preta pura e vou adicionar uma opacidade de 25%, assim. Agora, eu quero que esta seção Herói atue como um separador entre o lado superior do site e o resto do conteúdo. Uma boa maneira de fazer isso é fazer essa seção toda a largura para que ela ocupe toda a largura da página. Atualmente, este é um grupo, é assim que o criamos quando fizemos o wireframe, mas vamos transformá-lo em uma largura de quadro. Você adivinhou, layout automático. Vamos clicar neste botão e vamos definir seu redimensionamento para “ Contêiner de preenchimento ” para que ele ocupe toda a largura. Agora, quero que a imagem seja posicionada à esquerda, então vou selecioná-la e usar a tecla de seta para a esquerda para movê-la. Também vou definir sua largura como “Recipiente de preenchimento”. Agora vou selecionar esse outro elemento e também vou definir sua largura como “Contêiner de preenchimento”. Dessa forma, ambos os elementos ocuparão exatamente metade da quantidade de espaço disponível. Mas também há uma lacuna entre eles. Eu não quero isso, então vou selecionar o quadro que tem Layout automático, e vou definir o espaçamento para zero, assim. Agora também, vou alterar a altura dessa imagem para 960 pixels. Como estou usando a imagem como plano de fundo nessa forma, no momento em que eu redimensionar a forma, o plano de fundo da imagem se reposicionará automaticamente para preencher toda a forma. Incrível. Agora, vamos ver sobre esta seção aqui. Antes de seguirmos em frente, vamos realmente renomear isso para Hero. Vamos renomear isso para Imagem e vamos renomear isso para Conteúdo do Herói. Com o segundo quadro selecionado, vamos definir sua altura para também ser “ Contêiner de preenchimento ” e também vamos adicionar o layout automático a ele porque quero centralizar esse conteúdo. Eu também quero adicionar um pouco de preenchimento, então vamos fazer isso. Layout automático, verifique se ele está vertical. Vou alterar o espaçamento entre os itens para 64 pixels, e então vou mudar seu alinhamento para centro, centro, assim. Além disso, vou adicionar 128 pixels de preenchimento à esquerda e à direita. Em seguida, vou selecionar esse pedaço de texto e vou definir seu redimensionamento para “Conteúdo do Abraço”. Na verdade, verticalmente, ele deve ser “ Conteúdo do Abraço ”, mas horizontalmente deve ser “Recipiente de preenchimento”. Ele só vai ou só preenche o espaço disponível. Agora você pode estar se perguntando, bem, por que ele não é redimensionado para preencher esta caixa inteira? Bem, isso é porque adicionamos esse preenchimento lembre-se, 128. Você verá que agora, se nós, por exemplo, removermos o preenchimento, o texto preencherá todo o espaço disponível mas realmente queremos usar esse preenchimento. A última coisa a fazer aqui é centralizar o alinhamento do texto. Agora vamos também selecionar o quadro de conteúdo Hero e preenchê-lo com nossa cor preta. Em seguida, podemos selecionar todo o nosso texto e podemos desanexar o estilo de cor e usar nossa própria cor. Também vou tornar este quadro um pouco transparente, 95%, só para que o branco não seja muito duro. Eu apenas diminuo um pouco a opacidade para que ela se funda um pouquinho com o fundo. Então, finalmente, ainda temos o horário comercial para cuidar. Vamos usar a cor “Accent” para isso, e na verdade há algumas mudanças que precisamos fazer aqui. Primeiro de tudo, acho que não precisamos usar as palavras horário comercial porque é bastante autoexplicativo que este seja um cronograma, e depois vou separar esses dois elementos. Primeiro de tudo, coloque-os em linhas diferentes e, em segundo lugar, vou selecionar esse elemento ou aquele pedaço de texto e cortá-lo a partir daí. Vou definir uma “ Largura automática” para esse bit. Vou alinhá-lo no meio, e depois vou duplicá-lo, comando D. Então vou colar nos textos que cortei anteriormente. Agora vou selecionar ambos, mudar A, para criar outro quadro com eles, e vou definir a distância entre eles ou o espaçamento entre eles para 16 pixels, e vou me certificar eles estão alinhados no meio. Agora, o texto aqui é um pouco pequeno demais em comparação com o grande título acima. Atualmente, estou usando 21 pixels, mas quero algo um pouco maior do que isso. Vamos voltar aos ativos. Vamos ver, o próximo tamanho disponível com base na nossa escala de tipos é 28 tamanho de fonte, altura de 40 linhas. Vamos fazer isso. Selecione ambos, 28 e 40 e, finalmente, vamos selecionar a primeira linha de cada caixa de texto e vamos torná-la “Negrito”. A mesma coisa para isso, “Negrito”, e deveria ser isso. Essa é a nossa área de Heróis. Agora, é claro, se vou redimensionar minha tela, veja como a imagem também é redimensionada e o texto também é redimensionado enquanto ainda está alinhado ao centro nesta caixa preta? Por assim dizer. Esse é o poder das opções de layout automático e redimensionamento da Figma. Muito legal. Isso é o que temos até agora e eu fiz isso de propósito. Eu mantive os wireframes originais e nomeei as etapas. Você pode ver a diferença entre o wireframe original para quando adicionamos nossa tipografia pela primeira vez ao local onde adicionamos algumas das cores ao design final. Foi aqui que começamos, e é aqui que estamos agora. Veja que tipo de diferença você pode fazer em um design apenas aplicando a tipografia adequada, algumas cores e algum espaçamento e dimensionamento bem pensados para elementos? Só para garantir que tudo ainda esteja alinhado corretamente, podemos abrir as guias e podemos verificar se nossos elementos estão alinhados corretamente e estão. Como você pode ver, como usamos o preenchimento de 128 pixels aqui no quadro pai para o Herói, esse texto é posicionado exatamente a 128 pixels da borda, que é exatamente o que queremos. Como de costume, agora é sua vez praticar e criar a seção Herói. Você pode fazer isso da sua maneira, você não precisa replicar exatamente o que eu faço. Se você não gosta das cores ou das fontes que eu escolhi, vá em frente e mude-as. Use um layout diferente, não tenha medo de experimentar. Nesta aula, estou mostrando minha maneira de fazer as coisas, mas obviamente, essa não é a única maneira e eu adoraria ver algumas variações do meu design original. Com isso dito, também é perfeitamente bom replicar meus passos exatamente porque você está aprendendo, você está se acostumando a usar Figma para seu design e isso também é uma grande vitória. Com isso dito, vamos para a seção de descrição do menu. Isso está chegando. 16. Descrição do menu de comida: A seção de descrição do menu tem o papel de descrever o menu em poucas palavras. Para ter a aparência que queremos, vamos usar alguns quadros aninhados com layout automático. Deixe-me mostrar-lhe. Esta é a seção que vamos abordar nesta lição e, com base no wireframe, temos um título, a descrição em si e uma imagem. Isso é opcional. Como eu estava dizendo anteriormente, o wireframe está lá para servir como guia, e nosso design final não precisa necessariamente usar o mesmo layout. Com isso em mente, olhando para as coisas que projetamos até agora e as coisas que estão à nossa frente, a seção do menu, eu realmente não acho que precisamos dessa imagem aqui. Em vez disso, vou mantê-lo simples e usar o título e o texto. Mas como este não é um texto muito longo, e temos todo esse espaço livre aqui, vamos colocar esses dois elementos lado a lado, então o título à esquerda, o texto à direita. Com isso em mente, vamos selecionar o grupo que contém e vamos chamá-lo de Descrição do Menu de Alimentos. Como este é um grupo, vamos transformá-lo em um quadro adicionando layout automático. Vamos mudar a direção para horizontal. Na verdade, vamos desagrupar esses dois grupos e vamos definir a largura fixa para preencher o contêiner nesses dois elementos. Além disso, vamos usar o contêiner de preenchimento no elemento pai. Dessa forma, ambos os elementos ocupam exatamente metade do espaço disponível. Isso é muito bom. Agora, também, gostaria que este guia servisse como um limite para os textos. Basicamente, esse texto precisa começar aqui, e esse texto precisa terminar aqui. Fazer isso é muito simples. Selecionaremos o quadro pai e adicionaremos algum preenchimento. Vamos dizer 128 e 128. Eu realmente gosto do fato de que esse texto aqui começa exatamente na mesma linha que divide essa área de herói. Mas o que eu não gosto é o fato de que esse texto está muito próximo ou o título está muito próximo do meu texto principal. Para corrigir isso, quero adicionar algum preenchimento ao lado direito deste texto. Obviamente, não posso fazer isso por padrão, preciso adicionar layout automático. Vamos fazer isso com o título selecionado, Shift A, para colocá-lo em um quadro que tenha layout automático e, por padrão, Figma adiciona 10 pixels de espaçamento e preenchimento, mas eu quero removê-lo. Em vez disso, basta adicionar 128 pixels de preenchimento ao lado direito. Agora, isso realmente criou um comportamento inesperado que esse elemento empurrou o texto para o lado. Eu não quero isso porque quero que esse texto se alinhe com essa linha do meio aqui. Isso está acontecendo porque quando adicionamos esse quadro, ele alterou automaticamente o modo de redimensionamento para o conteúdo do hub, mas não queremos isso, queremos preencher o contêiner. Além disso, precisamos ir e selecionar o texto dentro e selecionar o contêiner de preenchimento daqui. Agora temos o quadro pai que tem o preenchimento de 128 pixels e, em seguida, o texto, que está definido para preencher o contêiner, e ele preenche seu contêiner até essa marca de 128 pixels, porque temos esse preenchimento. Ao usar alguns quadros de layout automático aninhados, conseguimos obter a aparência desejada. Além disso, gostaria de fazer algumas alterações neste texto porque atualmente, temos muitas linhas vazias, e também a cor está um pouco desligada. Está usando, é claro, nossa cor preta, mas quero algo um pouco mais silenciado. Para a maioria dos parágrafos em nosso design, usaremos uma opacidade preta de 75%. Como mostrei em uma lição anterior, você pode fazer isso de duas maneiras. Você pode alterar a opacidade da camada para 75% ou alterar a opacidade da cor. Vamos seguir em frente e fazer isso. Estou fazendo isso para mostrar aos dois sentidos, você pode escolher o que você está mais confortável. A primeira coisa que precisamos fazer é porque estamos usando um estilo de cor, precisamos separar e, em seguida, mudar a opacidade da cor e, em seguida, criar um novo estilo de cor, assim como criamos preto 15. Agora vamos criar preto 75. Agora temos o estilo preto 75 cor disponível se quisermos usá-lo em outro lugar. Além disso, vamos fazer isso parecer um pouco mais interessante adicionando algum preenchimento certo como fizemos para este texto, porque tenho a sensação de que esse texto pode ser um pouco longo demais para esta seção. Com o texto selecionado, Shift A, para adicionar o layout automático, remova o espaçamento e o preenchimento padrão, adicione o preenchimento de 128 pixels à direita e certifique-se de que o quadro pai está definido como contêiner de preenchimento e também o texto interno está definido para preencher o contêiner. Agora, o texto ainda se alinha com linha do meio que criamos no herói, mas também tem uma boa separação aqui no lado direito. Finalmente, para que isso pareça ainda melhor, vamos mudar a cor desse título de preto para sotaque. Acho que isso apenas amarra tudo muito bem. Seguindo isso será nosso menu. Mas, na verdade, para adicionar outro grau de separação entre essas duas seções, vamos em frente e adicionar o que é chamado em CSS, uma regra horizontal, é basicamente uma linha de separação. Vou pegar a ferramenta de linha ou pressionar L no teclado e apenas clicar e arrastar uma linha. Não importa o tamanho, porque podemos configurá-lo para preencher o contêiner assim. Quanto à cor do traçado, posso escolher preto 15. Ele compartilha exatamente o mesmo estilo com a linha que criamos aqui na barra superior. Agora, temos a descrição do menu de alimentos criada. Se pegarmos a tela e começarmos a redimensioná-la, você verá que as seções de texto redimensionadas de acordo, o que é ótimo. Agora é hora de praticar. Vá em frente e crie a descrição do menu se você ainda não tiver feito isso. curiosidade, você teve algum problema até agora? Qualquer técnica que você não entendido, talvez, lembre-se, você sempre tem a opção de me deixar uma mensagem na área de discussão, e eu vou ajudar de qualquer maneira que eu puder. Seguindo em frente, estamos chegando a uma das seções mais complexas do nosso design, que é o menu de alimentos. Vamos seguir em frente e lidar com isso em seguida. 17. Menu de comida para tambores: Como eu estava dizendo anteriormente, a seção do menu de alimentos é uma das partes mais complexas do nosso design. Não tecnicamente complexo, mas em termos de conteúdo porque é a maior seção da página, e é por isso que estamos dividindo-o em três partes. Nesta primeira parte, estamos enfrentando o menu para bifes. Vamos. Agora, voltando ao nosso design na Figma, podemos ver que, de acordo com o wireframe, a seção do menu deve ter um título. Em seguida, temos as categorias de menu, bifes, hambúrgueres e sanduíches, quickies e saladas, apresentadas como tablings. Quando clicamos em uma dessas tabelas, revelamos o conteúdo de uma guia como os pratos reais. Agora, mesmo que eu tenha usado guias no wireframe, não vou usá-las no design final. Algumas razões para isso. Na minha opinião, usar guias é bom quando você tem conteúdo semelhante em tamanho. No nosso caso, se olharmos para o resumo do projeto, podemos ver que o menu é muito diferente em tamanho de categoria para categoria. Temos 1, 2, 3, 4, 5 itens em apostas. Temos 1, 2, 3, 4, 5, 6, 7, 8 em hambúrgueres e sanduíches. Só temos três aqui em quickies, e temos quatro em saladas. Acho que exibir essas informações em um controle de abas parecerá um pouco estranho. Além disso, este é um site de uma página e quero manter as coisas super simples e fluidas. Não quero introduzir um padrão complexo como um controle de abas. Em vez disso, vou exibir todo o menu de uma só vez. Vamos ter uma categoria e vamos listar todos os pratos dessa categoria e, em seguida, abaixo disso, a próxima categoria e assim por diante e assim por diante. Então, vamos começar cuidando do menu de apostas. A primeira coisa que vou fazer é selecionar esse grupo, e vou mudar A para mudá-lo para um quadro com layout automático, e vou mudar a direção para uma vertical, e vou definir a largura ou as opções de redimensionamento para preencher o contêiner. Também vou definir um espaçamento entre itens de 128 pixels. Então vamos mover alguns elementos ao redor. Temos o menu e, em seguida, o primeiro que faremos são bifes. Na verdade, irei em frente e excluirei o restante das seções e também excluirei parte desse conteúdo porque não estamos usando o controle de abas no final. Vou recriar a maioria desses elementos como achar melhor. Vou começar adicionando a tipografia correta ao título da categoria. Stakes, vamos voltar aos ativos. Vou usar esse tamanho aqui, 37 fonte tamanho 48 line-height. De volta aqui, 37 e 48. Vou definir o peso da fonte para bloquear e também menos três pixels no espaçamento entre letras. Além disso, no wireframe original, optei por exibir uma imagem para cada prato. Agora, eu não acho que vou seguir esse caminho para o design final porque vamos ter muitas imagens. Aqui, fazia sentido porque estávamos exibindo apenas pratos de uma categoria específica por vez. Foi bom ter 2, 3, 4, 5 fotos de pratos dessa categoria. Mas no design final, porque estamos mostrando todos os pratos, acho que isso é apenas muita multidão na página da web. Em vez disso, o que vou fazer é exibir uma imagem por categorias de prato. Uma imagem para bifes, uma imagem representativa, uma imagem para hambúrgueres e sanduíches, uma para saladas, outra para quickies. Na verdade, vou mover essa imagem para cima ou cima do título. Vamos ver. Temos isso em um grupo? Nós fazemos. Vamos realmente mover isso assim. Agora vamos falar sobre layout. Embora eu tenha isso selecionado, vamos realmente adicionar essa imagem. Vou para Preencher, vou mudar de sólido para imagem, escolha Imagem. Fui em frente e baixei todas as imagens que você encontrará no arquivo PDF de recursos. Vamos ver. Vou usar uma boa imagem, esta, por exemplo, é uma boa imagem de um bife. Vamos usar isso, e por enquanto, estamos prontos para ir. Obviamente, podemos redimensionar essa imagem como acharmos melhor. Mas agora vamos falar sobre layout, porque seria muito fácil adicionar um pouco de preenchimento a esta seção para que o conteúdo se alinhe bem com esses guias que eu configurei aqui. Mas às vezes é uma boa ideia quebrar um pouco o layout e fazer algo inesperado. Se rolarmos a página para baixo, podemos ver como as coisas estão alinhadas de acordo com esses guias. Aqui eles estão alinhados também. Mas para torná-lo mais interessante, como eu disse de vez em quando, basta separar um pouco o layout e fazer algo inesperado. Isso é o que faremos aqui. Na verdade, vamos empurrar esse conteúdo para a direita em uma quantia justa. O menu será alinhado no lado direito da página. Então, para fazer isso, vamos fazer uma limpeza primeiro. Vamos chamar esse menu de comida. Isso é como a seção principal e, em seguida, vou selecionar esses elementos dentro do shift A para o layout automático, e vou definir que ele está redimensionando para preencher o contêiner para ele seja redimensionado para toda a largura do seu pai. Agora vamos empurrar o conteúdo para a direita adicionando algum preenchimento à esquerda neste quadro, que vamos chamar de apostas. Para isso, vou aqui e vou adicionar um pouco de preenchimento e 260 ou 240 é um pouco pequeno demais. Vamos com 560 pixels. Isso deve ser, eu acho muito bom. Também posso arrastar um guia para 560 apenas para garantir que quaisquer itens que eu alinhe da mesma maneira no futuro, eles estarão alinhados corretamente com o mesmo guia. Agora, vamos pegar essa imagem, vamos fazer com que ela preencha o contêiner, então ele vai para o resto do espaço restante. Vamos definir sua largura para 640 pixels. Novamente, estou usando o sistema de oito pontos para dimensionar elementos. Então temos o título. Em seguida, começaremos a exibir os pratos reais. Mas antes disso, quero adicionar uma pequena coisa a este título aqui, só para fazer com que pareça mais um separador. Para isso, assim como um toque decorativo, vou desenhar um retângulo, e vou fazer 128 pixels por 4. Para preenchimento, vou usar preto. Agora vou pegar isso e o menu de apostas mudar A para criar outro quadro com layout automático, definir sua direção para horizontal. Certifique-se de que os elementos estejam alinhados ao centro e defina o espaçamento entre os itens como 32. Assim mesmo. Agora, vamos ver sobre os alimentos. Primeiro, vamos ver o título. Isso está usando os estilos tipográficos corretos porque já os defini, mas não tenho certeza sobre esse texto. Em vez de regular, por que não torná-lo itálico. Também vamos mudar para preto, 75 para a cor. Isso, o preço, vamos ver negrito e vamos mudar sua cor para o acento em vez de preto. Agora vamos pegar isso, vamos transformá-lo em um quadro com layout automático, e vamos definir seu espaçamento entre os itens para 32 pixels, assim. Isso é bom. Agora vamos começar a preencher. Vamos chamar esse prato. Vamos começar a preencher com o conteúdo real para apostas. Temos isso. [RUÍDO] Temos o conteúdo, e também temos o preço 29. Ótimo. Agora, também vou alterar as opções de redimensionamento para o título e o conteúdo do prato para preencher o recipiente, e vou configurar o prato para ser recipiente de preenchimento também. Ele ocupa todo o espaço disponível. Estou fazendo isso porque, eventualmente, vou usar duas colunas nesta seção. Cada uma dessas colunas ocupará exatamente metade do espaço disponível. Mas, por enquanto, tudo parece em ordem aqui. Vamos realmente duplicar o prato. Vamos ver exatamente quantos pratos temos para bifes, então 1, 2, 3, 4, 5, então precisamos de mais quatro. Duplicar isso é 2, 3, 4 e 5. Agora, é simplesmente uma questão de usar o conteúdo correto, assim. Agora, obviamente, porque temos muito espaço para trabalhar aqui, vamos separar esse conteúdo em duas colunas. A primeira coluna terá três itens, a segunda coluna terá dois itens. Veja como vamos fazer isso. Temos os bifes pai, que contém os pratos, mas também o título, a imagem aqui e o título do menu. Vamos realmente separar os pratos e colocá-los em seu próprio quadro. Vamos chamar isso de pratos. Novamente, temos o layout automático aplicado aqui. Mas em vez de 128 pixels de espaçamento, vou usar 64, então metade disso. Agora, para separá-los em duas colunas, na verdade é muito simples. Vamos selecionar os três primeiros. Vamos fazer Shift A. Vamos chamá-los de coluna 1 e os outros dois, Shift A coluna 2. Agora, vou levar os pratos pai, e vou mudar a direção para horizontal, e vou me certificar de que o tamanho está definido para encher os recipientes, então ele só vai até aqui. Em seguida, também vou selecionar a coluna 1 e a coluna 2 e definir o redimensionamento para preencher o contêiner. Isso permitirá que eles peguem cada uma exatamente metade do espaço disponível. Vamos tornar esse espaço entre essas colunas um pouco maior. Agora é 64 pixels, mas posso escolher pratos, e posso aumentar isso para 128, e então, finalmente, posso selecionar cada prato e alterar o redimensionamento para encher o recipiente, e fazer o mesmo para estes. No entanto, observe que o texto aqui vai além dos meus guias. Eu não quero isso. Quero que tudo esteja bem contido neste guia e neste guia. O texto aqui deve terminar neste guia. Na verdade, é muito fácil fazer porque estamos trabalhando com layout automático. Temos a moldura pai dos pratos e posso simplesmente adicionar um preenchimento direito de 128 pixels. Isso adicionará o preenchimento nesta área aqui. Então as duas colunas ocuparão o resto do espaço, e elas terão larguras iguais. Muito legal. Veja como o layout automático é poderoso. Ele permite que você crie layouts relativamente complexos com facilidade. Então a última coisa que eu queria fazer aqui é adicionar algumas linhas separadoras entre cada prato. Para fazer isso, vou direcionar as colunas, e vou usar a ferramenta de linha ou L no teclado e simplesmente desenhar uma linha como essa. Vou definir o redimensionamento para preencher o contêiner. O traço vai ser preto. Talvez apenas preto não preto 75. Mas eu quero colocá-lo pontilhado, assim como você pode ver esta linha azul pontilhada aqui. Acho que pontilhado ficaria muito melhor. Em seguida, abriremos as configurações avançadas de traçado, e eu vou selecionar o traço 2, 2 e, em seguida, essa coisa para a lacuna do traço, vamos ver como se parece. Isso é muito bom. Mas acho que posso ir para uma cor mais silenciosa. Vou manter o preto, mas vou diminuir a opacidade da camada para 50%. Acho que isso parece muito bom. Agora, é apenas uma questão de duplicar isso mais uma vez e movê-lo abaixo do segundo item para separar o segundo e o terceiro item. Então, vamos copiar isso uma vez e ir para a coluna 2 colar isso, movê-lo para cima para que ele separa o primeiro e o segundo item na segunda coluna. Com isso, acabamos de terminar a seção de menu para bifes. Como você viu, adotamos uma abordagem diferente. Nós separamos o layout movendo todo esse conteúdo para o lado direito da página, e também fizemos algo completamente diferente do que inicialmente esboçamos em nosso wire-frame. Em vez de usar guias, decidimos exibir todo o conteúdo do menu de uma só vez. É por isso que decidimos organizar e exibir cada prato sob sua própria categoria. Além disso, em vez de exibir uma imagem para cada prato, estamos exibindo uma imagem representativa para cada categoria. Esses são os resultados até agora. Como você já está acostumado, este é o momento para você praticar. Vá em frente e crie a seção do bife no menu de alimentos. Depois de fazer isso, podemos seguir em frente. Agora, eu percebo que usei o auto-layout muito pesado nesta lição, e eu o uso para criar alguns layouts que podem ser um pouco mais difíceis para você compreender, especialmente se você é um iniciante em Figma. Mas assista novamente à lição se você não entendeu. Se você ainda não entender o que eu fiz lá, basta me deixar uma linha na área de discussão, e eu farei o meu melhor para ajudar. Agora, ao criar o menu de bifes, nós realmente fizemos a maior parte do trabalho para as outras subseções do menu de alimentos porque tudo o que temos que fazer agora é copiar colar os elementos de bifes e apenas substituir o conteúdo. É muito simples. Próximo passo, vamos cuidar dos hambúrgueres e sanduíches. Chegando. 18. Menu de alimentos para Burgers e areia: Para as outras seções do menu, podemos simplesmente copiar colar o menu para bifes e alterar o conteúdo. Não adianta recriar essas seções repetidas vezes. Vamos seguir em frente e fazer isso, também mostrarei a solução que escolhi para a navegação do menu de alimentos. Vamos. Primeiro, vamos copiar e colar o menu de bifes, então vamos duplicar isso, e como ainda está dentro do menu de alimentos, ele só será colado mais abaixo. Vai estar bem alinhado. Tudo é feito automaticamente para mim. Observe que, enquanto estou trabalhando nesta página e criando elementos e adicionando e duplicando e outras coisas, a página, meu quadro principal apenas se redimensiona e todos os elementos são empurrados para baixo portanto, mantendo, é claro, a mesma distância ou espaçamento de 240 pixels. Isso porque, se você se lembrar, adicionamos layout automático ao nosso quadro principal. Tudo é feito automaticamente para nós. Agora, para esta seção, vamos chamá-lo de hambúrgueres e sanduíches. Primeiro, vamos excluir esse título do menu. Vamos mudar a imagem, vamos escolher esta. Ótimo. Vamos mudar o nome e, para isso, vamos realmente abrir o resumo do projeto. Temos hambúrgueres e sanduíches. Incrível. Agora, vamos atualizar o conteúdo aqui. Vamos ver, temos, acredito oito, então 1, 2, 3, 4, 1, 2, 3, 4, então temos oito itens, quatro em cada coluna. Vamos seguir em frente e duplicar este prato, e também duplicar um dos separadores e colocá-lo no meio, e então vamos duplicar isso uma e duas vezes, e então basta colocar os separadores na correta lugares. Agora, é simplesmente uma questão de copiar colar do resumo do nosso projeto para o nosso design. Vamos prosseguir e acelerar esse processo. Terminamos de copiar e colar, o conteúdo do resumo do nosso projeto em nosso projeto finalizado. Agora, na introdução a esta lição, mencionei algo sobre uma navegação no menu de alimentos. Eu acho que esse é um recurso muito importante para adicionar porque esta é uma seção bastante alta, o menu. Ajudaria ter alguma navegação que nos permitisse clicar e rolar automaticamente para certas categorias, como bifes, hambúrgueres e sanduíches e as outras que estamos indo para adicionar. Como temos todo esse espaço em branco no lado esquerdo, vamos em frente e usá-lo para um menu que vai rolar à medida que a página rola, então será um menu fixo. Para este design, acho que a seção de hambúrgueres e sanduíches será um bom lugar para abrigá-lo. Então vamos fazer algumas mudanças aqui. Vamos envolver esse quadro em outro quadro com layout automático. “Shift” “A” novamente, e isso vai ser hambúrgueres e sanduíches. Vamos renomear isso para o conteúdo de hambúrgueres e sanduíches. Vamos remover o espaçamento e o preenchimento que adicionamos aqui. Para este, na verdade, vamos remover o preenchimento que adicionamos à esquerda porque vamos adicionar outra seção. Então vamos começar adicionando algum texto dentro desse quadro, e começaremos com os bifes. Vamos cortar isso e adicioná-lo exatamente no quadro pai. Assim mesmo. Em seguida, vamos envolver isso em outro quadro com layout automático, que vamos chamar de menu de comida agora para navegação. Aqui está o que faremos, hambúrgueres e sanduíches. Esta seção, é claro, será de direção horizontal. Vamos definir um espaçamento de 128 entre itens. Em seguida, vamos selecionar a seção principal, e tudo o que vamos fazer é definir o redimensionamento para Contêiner de preenchimento. Em seguida, vamos selecionar o quadro principal novamente e reescolher Preencher contêiner no menu suspenso em vez de largura fixa. Isso é algo que você terá que fazer de vez em quando. Quando você está em um reempacotamento, enquadrando novamente outros quadros, com layout automático, às vezes Figma mudará automaticamente do recipiente de preenchimento para Largura fixa. Então, fique de olho nisso para garantir que você não esteja quebrando seus layouts. Agora também, eu gostaria que essa navegação começasse a partir daqui. A partir deste guia, que está em 128. Vamos selecionar o menu de alimentos. Por enquanto, vamos definir o espaçamento para zero, preenchimento para zero e vamos adicionar um preenchimento à esquerda de 128. Isso é muito bom. Além disso, vou redimensionar a seção do menu de alimentos para que minha seção principal se alinhe corretamente com as outras. Nesse caso, minha navegação agora tem 432 pixels e é uma largura fixa. Agora posso selecionar o texto e posso configurá-lo como Contêiner de preenchimento, e posso duplicar esse texto mais três vezes. Enquanto eu estiver nisso, vamos nos certificar de que minha direção está definida na vertical. Isso é novamente, outra coisa para ficar de olho. Às vezes, quando você está mudando a direção em um quadro de layout automático, o redimensionamento muda de conteúdo fixo para abraço, caso em que você precisará redefinir esse valor. Também vamos definir a altura para o conteúdo do Abraço. Vamos também selecionar todo esse texto e definir a altura para o conteúdo do Abraço e a largura para Contêiner de preenchimento. Agora devemos ser bons para ir. Vamos substituir o texto aqui pelos nomes reais das seções. Então hambúrgueres e sanduíches, tivemos o que rapidinhas e saladas. A ideia aqui é que este menu seja corrigido. Quando eu chegar ao menu real, enquanto eu estou rolando para baixo, este menu permanecerá no mesmo lugar. Isso é muito fácil de fazer em CSS, mas como estamos lidando com a parte do design, agora vamos colocá-lo aqui, anexado a esta segunda seção. Agora, vamos fazer isso parecer um pouco mais bonito. Vamos supor que estamos navegando para esta seção, para hambúrgueres e sanduíches, e precisamos de uma maneira de fazer com que o menu destaque esta seção específica em que estamos. Para isso, é muito fácil de fazer, podemos simplesmente mudar a cor desta seção para sotaque. Então, o resto, vamos apenas defini-los para preto. Vamos também torná-lo um pouco mais arejado, por assim dizer, adicionando algum espaçamento entre todos esses itens. Vamos também adicionar como uma linha a este item, para que ele corresponda à linha que adicionamos aqui. Na verdade, percebi que usei o método errado para criar isso. Ou, na verdade, não está errado, essa é uma maneira de fazer isso com um retângulo, mas você também pode fazê-lo com uma linha. Vou mostrar-lhe os dois sentidos agora. Mas antes de fazermos isso, deixe-me realmente definir alguns cantos arredondados neste elemento. Não é apenas uma barra simples, tem um belo canto arredondado, apenas um pequeno detalhe. Vamos fazer o mesmo aqui, oito pixels. Vamos fazer aproximadamente a mesma coisa aqui. Mas eu vou usar um elemento de linha em vez disso, apenas para mostrar uma opção diferente de fazê-lo. Usando a ferramenta L, ou linha, vou desenhar uma linha com 48 pixels de largura. Vou definir a espessura do traçado para quatro. A partir daqui, vou escolher Round. Começa em volta e termina em volta. Além disso, vou mudar a cor para o sotaque. Agora, podemos pegar a linha e este texto, Shift A para criar um novo quadro, mudar de direção, definir o redimensionamento para Contêiner de preenchimento. Além disso, vamos mover a linha para exibi-la primeiro. Vamos alinhar tudo no meio, assim. Vamos alterar a distância entre isso para 16 pixels. Dois problemas com esse layout. Primeiro de tudo, o texto é um pouco grande demais. Ele vai além das bordas do meu quadro pai aqui. Em segundo lugar, mesmo que no papel esta linha esteja corretamente alinhada com o texto, visualmente não é. Isso acontece por causa da altura do texto. Temos muito mais espaço aqui na parte superior do que na parte inferior. O texto não está perfeitamente alinhado visualmente dentro de sua linha. É por isso que também temos esse desalinhamento. Mas isso é realmente muito fácil de consertar. Só temos que empurrar esse elemento para baixo alguns pixels. Normalmente, isso seria muito fácil de fazer. Mas como estamos trabalhando com layout automático e estamos alinhando elementos automaticamente, a única maneira de mover esse elemento para baixo é adicionando preenchimento a ele. A única maneira de fazer isso é aplicando o layout automático. Shift A, para criar um quadro com apenas esse elemento, redefina o espaçamento e o preenchimento, e basta adicionar um preenchimento superior de, digamos, quatro pixels. Isso só vai empurrá-lo um pouco para que agora visualmente ele esteja alinhado com o texto. Agora, o que fazemos sobre essa situação em que o texto transborda nossa navegação no menu de alimentos? Porque lembre-se, decidimos adicionar um espaçamento de 128 pixels para ser consistente com o outro espaçamento. Poderíamos torná-lo menor , mas eu não quero isso. Quero esse espaço exato. Vamos ver. Dentro deste quadro, temos o texto e a linha. O texto atualmente está definido como Largura fixa. Mas vamos configurá-lo para Contêiner de preenchimento. Isso redimensionará automaticamente o texto, para que ele se encaixe dentro dos limites de seu quadro pai. Mas agora o texto é exibido em duas linhas, o que é bom. Mas agora a linha não corresponde. O que vamos fazer é selecionar isso e, em vez de nos alinhar com o meio, vamos alinhá-lo ao topo. Em seguida, selecionaremos o quadro de linha real e alteraremos seu preenchimento superior. Vamos tentar 16. Talvez um pouco mais,18. Estou fazendo isso até que a linha se alinhe visualmente com essas duas palavras. Agora, corrigimos a navegação. É claro que, quando este site está sendo desenvolvido, o desenvolvedor pode escrever o CSS e o JavaScript necessários para aplicar esse estilo ativo outras seções à medida que estamos rolando para elas. Por exemplo, se eu estivesse no site real agora, se eu estivesse rolando de volta para bifes, esse menu estaria alinhado com essa área com bifes. O item de menu destacado seria este, em vez deste. Espero que isso faça sentido. Mas sim, com isso, terminamos a segunda seção do nosso menu. Espero que tudo esteja indo bem do seu lado e você está progredindo com sua versão do projeto ou do projeto de classe. Se você não está trabalhando ao meu lado e prefere assistir a aula, então acho que está tudo bem, mas eu recomendo o exercício. Eu recomendo a prática. Isso só permitirá que você aumente suas habilidades e aprenda a trabalhar na Figma muito mais rápido do que apenas confiando na teoria. Agora, criamos duas seções no menu. Só temos que enxaguar e repetir para criar os outros dois. Vamos fazer isso na próxima lição. 19. Menu de alimentos para Quickies e saladas: Estamos quase na linha de chegada com o menu de alimentos, só precisamos criar as seções para quickies e saladas. Vamos fazer isso agora. Vamos começar duplicando o quadro de bifes porque ele tem o layout correto sem a navegação do menu. Então simplesmente Comando D para duplicá-lo e vou movê-lo para baixo na categoria hambúrgueres e sanduíches. Você tem que amar o AutoLayout. É super simples. Isso vai ser quatro quickies, assim. Vamos mudar a imagem de fundo para as asas. Em termos de conteúdo, temos apenas três itens. Vamos ter dois na primeira coluna. Vamos excluir isso e isso, e isso, e isso, então dois e um. Então, é simplesmente uma questão de substituir o conteúdo. Essas são as rapidinhas. Agora, vamos selecionar esta seção e vamos renomeá-la. Vamos duplicá-lo e vamos criar a seção para saladas. Vamos substituir a imagem aqui também por esta. Então, no interior, temos quatro itens, então vamos duplicar este e vamos também colocar um desses separadores no meio. Agora, vamos enxaguar e repetir. É isso, super simples. Apenas copiando e colando a seção inicial que criamos para bifes e apenas mudando uma imagem, um título e os pratos reais, conseguimos completar o menu de comida junto com o seu navegação. Isso é o que temos até agora. Vamos dar uma olhada rápida na página até agora em nosso design. Temos a barra superior, o cabeçalho, a área do herói e, em seguida, a descrição do menu de comida e, em seguida, o menu de comida real. Eu acho que isso faz um pouco mais de sentido para este site ter o menu definido assim de uma só vez, em vez de usar guias como discutimos inicialmente no estágio de enquadramento de fio. O que vem a seguir? Bem, próximo é praticar de você. Você viu que acabamos de concluir a maior seção da página, que é o menu de comida. Mesmo que no começo possa parecer assustador por causa de todo esse conteúdo, no final, você viu que era super simples por causa do AutoLayout. Isso tornou nosso trabalho muito mais fácil. Com isso dito, espero que você esteja acompanhando e que tenha concluído sua versão do menu de alimentos para seu design. Quando você terminar e quando estiver pronto para seguir em frente, vamos cuidar da seção sobre, que está chegando. 20. Sobre a seção: Tudo bem, vamos cuidar da seção Sobre. Isso é bem simples de fazer e usará um layout muito parecido com a seção Herói. Vamos. Com base no wireframe, esta é a estrutura da página Sobre. Temos um título, o texto descritivo e, em seguida, uma ou duas imagens. Agora, olhando para o design usando uma visão panorâmica, gostaria de criar alguma separação entre a seção do menu e o resto do site. Esta seção Sobre realmente me dá uma ótima oportunidade de fazer isso porque posso usar um layout muito parecido este e acho que isso vai conseguir a separação muito bem porque vamos ter uma imagem que é uma das, vamos chamá-la de requisitos para a seção Sobre. Mas também estamos usando esse fundo escuro e isso servirá como um bom separador visual entre as seções na superior e as que estão na parte inferior. Vamos em frente e duplicar a seção Herói. Usando as teclas de seta, vou movê-lo para a posição sob a seção Menu e vou renomeá-lo para “Sobre nós”. Agora, vamos ampliar. Há algumas mudanças que precisamos fazer aqui. Primeiro de tudo, a imagem, vou movê-la para o lado direito e vou mudá-la para outra coisa. Vamos ver que tipo de imagens temos aqui. Acho que isso pode funcionar muito bem. Vamos usar isso. Além disso, o conteúdo aqui também precisa mudar. Vou usar esse texto. Só vou colar isso. Na verdade, vamos usar a cor do acento. Na verdade, há um pequeno erro de digitação aqui. Com isso, posso excluir esse bit. Também vou excluir esse quadro porque vou pegar esse texto e colá-lo aqui. Vamos usar branco. Mas também, não vou usar branco puro. Vou usar opacidade branca de 95% como fiz aqui na seção Herói. Porque eu não quero que esse contraste seja muito duro. Então, vamos com 95 por cento. Para o texto, podemos realmente ir com 90%. Acho que isso vai se misturar ainda melhor com o plano de fundo. Acho que temos muitas linhas vazias aqui, então vamos nos livrar disso. Além disso, se eu abrir os guias, podemos ver que não estamos alinhando isso corretamente. Então, se formos ao conteúdo do herói, estamos usando preenchimento 128 e 128. Isso está correto. Mas acho que esses dois têm uma largura fixa, então vamos trocá-los para preencher o contêiner. Agora, eles estão bem alinhados com nosso guia e estamos prontos para ir. Essa é a seção sobre. Agora podemos simplesmente excluir a divisão. Estamos prontos para seguir em frente. Agora, é claro que é a sua hora de praticar. Então vá em frente e crie sua seção Sobre e, quando você fizer isso, estamos prontos para passar para as fotos do Instagram. Isso está chegando na próxima lição. 21. Seção do Instagram: A seção do Instagram é basicamente uma grande galeria de imagens. Isso realmente me dá uma ótima oportunidade para mostrar como trabalhar com imagens e layout automático de uma forma que permita que essas imagens redimensionadas de acordo quando você altera o tamanho da galeria. Vamos. Vamos ver o que temos com base em nosso wireframe. Temos o título, um botão para o Instagram seguir e, em seguida, algumas imagens. A primeira coisa que faremos aqui é que vamos transformar isso em um quadro com layout automático. Mas, na verdade, primeiro, deixe-me me livrar dessa linha de imagens. Deixe-me apenas fazer um Shift A para adicionar o layout automático a essas três imagens futuras e, em seguida, farei um Shift A nessas duas. Finalmente, vamos desagrupar isso. Apenas um pouco de limpeza realmente. Vamos chamar essa galeria de imagens, mas, na verdade, vamos transformá-la em um quadro primeiro com o layout automático e chamá-lo de Instagram, na verdade fotos do Instagram. Em seguida, vamos abrir os guias para garantir que estamos alinhando tudo corretamente. Vou definir sua largura para um contêiner de preenchimento. Vamos adicionar 128 preenchimento à esquerda e à direita. Em seguida, enquadrar em 10 e quadro 11, ambos serão configurados para preencher o recipiente. Vamos começar com o texto aqui. Vamos definir a cor desses dois sotaque. Em seguida, vamos selecionar o quadro pai. Em vez de definir um espaçamento fixo entre esses dois itens, vamos seguir em frente e definir a distribuição do item para o espaço entre eles. Como temos apenas dois itens, um deles será enviado para a esquerda do elemento, um à direita do elemento. Além disso, vamos alinhar tudo no meio. Em seguida, vamos trabalhar neste botão porque agora, ele é feio, então as primeiras coisas primeiro, o texto Poppins, negrito, 21, 32, preto. Isso está correto. O texto é como deveria ser. Vamos atualizar esse ícone porque ele está usando uma versão ligeiramente incorreta do ícone do Instagram. Vamos copiar isso. A propósito, você pode se mover pela tela assim mantendo o espaço no teclado até que o cursor se transforme em uma mão, e então você pode simplesmente clicar e arrastar para se mover. Então vamos colar isso. Então, vamos nos livrar desse plano de fundo porque criaremos nosso próprio plano de fundo transformando isso em um quadro de layout automático. Na verdade, não vamos usar um plano de fundo, vamos usar um derrame. Vamos configurá-lo para preto, um pixel dentro. Perfeito. Agora vamos adicionar um pouco de preenchimento. Acho que cerca de 24 pixels seriam apropriados. Vamos definir o espaçamento de 16 pixels entre o texto e o ícone. Vamos alinhar esses dois no meio assim. Esse é o nosso botão, super simples. Em seguida, vamos ver sobre as imagens. Mas, na verdade, vamos aumentar o espaço entre o título e as imagens reais. Neste momento, é um número aleatório. Precisamos definir isso em 128, assim, definindo o espaçamento no quadro pai, então as imagens. Todos os três serão usados como planos de fundo para esses retângulos. Eu acho que essa é a maneira correta de usá-los para algo assim na Figma porque, à medida que a forma se redimensiona, o plano de fundo se reposicionará e se redimensionará. Você sempre verá uma parte da imagem. Com o quadro pai selecionado, na verdade, cometi um erro aqui. As imagens vão de ponta a ponta, elas não terão esse preenchimento de 128 pixels como o texto. Mas, na verdade, apliquei esse preenchimento aqui nos elementos pai. Vamos remover isso. Em vez disso, vamos adicioná-lo a este quadro superior aqui, 128, 128. Isso me permite definir o contêiner de imagem para ir de ponta a borda usando o contêiner de preenchimento. Em seguida, cada imagem individual será definida para preencher o contêiner. Além disso, deixe-me remover o espaçamento aqui. Na verdade, vamos definir isso como 0 e defini-lo como embalado. Assim. Agora, as imagens, vamos configurá-las para preencher contêineres para que cada um ocupe exatamente um terço do espaço disponível. Agora, você provavelmente não consegue ver isso muito bem porque eles são todos cinza. Vamos adicionar algumas imagens a eles. Vamos alterar a cor de preenchimento de sólido para imagem. Vamos ver que tipo de imagens vamos usar aqui. Talvez este. O importante aqui é que você definiria as imagens para preencher aqui. Não se encaixa em corte ou azulejo, certifique-se de que eles estão definidos para preencher. Finalmente, vamos fazer a terceira imagem. Vamos adicionar este. Agora vamos também mudar sua altura para 480 pixels, assim. Essa é nossa primeira linha de imagens. Vamos duplicá-lo, linha 2. Na verdade, vamos mudá-los para um novo quadro chamado imagens. Aqui, vamos apenas remover o espaçamento. Agora, vamos mudar as imagens. Use isso e aqui, onde vamos usar talvez esse. Aqui, a propósito, você também pode clicar duas vezes. Este é um atalho, então você pode clicar duas vezes em uma imagem para abrir essa janela de diálogo. Por que não este? Ao usar imagens como essas como planos de fundo, agora podemos pegar esta página e ver o que acontece. Opa. Isso não foi tão dramático quanto eu pensava. Vamos alterar isso para preencher o contêiner. Recipiente de enchimento. Agora devemos ser bons. Agora também, alterou as linhas para preencher o contêiner. Isso deve estar tudo configurado para preencher o contêiner. Como eu estava dizendo, agora se você pegar a tela e começar a redimensioná-la, verá que essas imagens também serão redimensionadas. Claro, eles terão a mesma altura porque é assim que eles estão definidos agora como uma altura fixa. Mas em termos de largura, as formas reais, os retângulos mudarão sua largura. As imagens porque elas são definidas como planos de fundo, bem, só podemos ver certas partes delas, que é exatamente o comportamento que você obteria, ou você pode obter em um site real. Agora vamos trazer isso de volta para onde estava. Essa é a seção do Instagram. Com a seção do Instagram concluída, estamos realmente chegando muito perto de terminar nosso design agora. Só temos mais duas seções para completar e, em seguida, podemos passar para a parte de design responsivo da classe. Mas, por enquanto, vamos ver sobre essas duas seções. O primeiro é o contato e, na próxima lição, lidaremos com o cabeçalho e a barra lateral do contato . Vejo você lá. 22. Contato de cabeçalho e barra lateral: É hora de criar a seção de contato e, como ela é um pouco maior do que o normal, vou dividi-la em partes. Nesta lição, criaremos cabeçalho e a barra lateral. Vamos começar. Vamos dar uma olhada no layout que criamos durante o wireframing. Podemos ver que temos um título, temos um mapa, o endereço, número de telefone, horário comercial e, em seguida, o formulário de contato real. Agora, logo antes, eu disse que nesta lição vamos criar o cabeçalho e a barra lateral da seção de contato. Isso é o que estou pensando, vou usar um layout semelhante ao do menu. Vou ter o título do contato aqui, vou ter o mapa aqui, e o formulário de contato aqui, e na barra lateral onde coloquei o menu de navegação, teremos as outras informações; o endereço, o número de telefone e o horário comercial. Para tornar as coisas muito mais fáceis para nós, vamos seguir em frente e duplicar esta seção. Vou copiá-lo, e vou selecionar meu quadro principal e vou colá-lo e depois movê-lo para cima assim. Também deixe-me trazer esse título ou, na verdade, posso trazê-lo daqui, cortá-lo de lá e colá-lo ali nesse quadro. Onde diz contato, vamos nos certificar de que o espaçamento está correto, 128 lá e depois 128 lá, e podemos excluir este. Posso pegar o formulário de contato e posso colar isso aqui, vamos lidar com isso mais tarde. Então, em vez do menu de navegação aqui, vou pegar as informações de contato, cortá-las de lá e vou colá-las aqui. Então eu vou me livrar desses itens. Agora, algumas coisas que precisamos fazer aqui. Primeiro de tudo, vamos mudar essa imagem para um mapa real. Para isso, você pode tirar uma foto de um mapa da web, mas Figma tem um plugin chamado Mapsicle. Vamos prosseguir e fazer uma rápida navegação por isso. Vamos instalá-lo. Ótimo. Agora vamos voltar ao nosso arquivo Figma, e o que faremos é selecionar esse retângulo, abriremos o plugin. A propósito, você acabou de me ver usar a funcionalidade QuickFind na Figma, você pode acessar isso usando comando e barra invertida. Então você pode digitar nomes de plugins, vários comandos, na Figma é muito fácil de acessar. Vamos olhar para os atalhos de teclado. Vamos ver. Onde diz ações rápidas, você encontrará o atalho de teclado para seu sistema operacional. Então vamos abrir Mapsicle. Vamos criar um mapa aleatório aqui, isso realmente não importa. Alguma coisa assim talvez. Vamos apenas criar o mapa aqui, e isso vai colocá-lo bem ali como uma imagem de fundo, e terminamos. Vamos também nos livrar desse título que não precisamos dele agora. Vamos voltar nossa atenção para a barra lateral. Agora, eu realmente quero que a barra lateral esteja alinhada com meu formulário de contato. Isso significa que teremos que fazer algumas mudanças em nossos quadros aqui. Vamos dar uma olhada na estrutura. Vamos chamar esse contato e, em seguida, temos um quadro aqui, vamos chamar essa barra lateral. Vamos chamar esse conteúdo. Temos a barra lateral aqui e o conteúdo aqui. Que tal fazermos isso, pegamos a barra lateral e a agrupamos com o formulário de contato, que é o Grupo 23. Vamos ver. Vamos pegar o grupo 23, vamos movê-lo para fora. Na verdade, podemos excluir esta seção aqui, não precisamos dela. Vamos ver, vamos pegar isso e isso, criaremos um novo quadro com os dois, e vamos mudar a direção para vertical. Vamos mudar a altura aqui para abraçar o conteúdo. Agora vamos selecionar o conteúdo, alterar a altura para abraço e o quadro 16. Agora estamos chegando a algum lugar. Vamos mover o contato para cima, assim. Isso deve ser colocado à esquerda assim. Vamos mostrar os guias apenas para garantir que estamos fazendo as coisas corretamente. Agora, vamos selecionar o conteúdo e vamos definir o preenchimento ou o redimensionamento como contêiner de preenchimento. Vamos adicionar um preenchimento à esquerda de 560 pixels. Legal. Agora, esta seção está devidamente alinhada com isso. Avançando, o formulário de contato também está alinhado corretamente, e isso também está alinhado corretamente. Agora estamos chegando a algum lugar. Agora, para tornar esta seção de informações de contato um pouco mais interessante, que tal usarmos ícones como fizemos aqui na barra superior? Na verdade, podemos copiar essas informações e colá-lo abaixo, para que não recriamos esses ícones. Vamos selecionar o quadro da barra lateral, vamos colar e vamos abrir as guias mais uma vez. Vamos definir isso para vertical. Temos um item, segundo item. Vamos defini-los como Contêiner de preenchimento e, em seguida, selecionaremos o contêiner real e definiremos esse contêiner para preencher. Vamos ver por que esse texto não está se comportando corretamente? Container, lá vamos nós. Vamos copiar esse elemento, vamos usá-lo para adicionar o horário comercial. Vamos dizer de segunda a quinta, das 12:00 às 22h, e de sexta a domingo, das 10h às 23h. Ótimo. Agora vamos realmente mudar a cor desses ícones para acento e acho que 100% sobre a opacidade. Vamos fazer o mesmo por este. Para este, para o terceiro, na verdade, temos que escolher outro ícone. Vamos abrir o aplicativo conceito de olhos novamente para escolher uma cor diferente. Enquanto esperamos por isso, vamos realmente mudar a opacidade ou detectar a opacidade neste texto para preto 75. Lá vamos nós. Agora que isso está aberto, vamos procurar um relógio em nosso conjunto de ícones Bootstrap. Vamos pegar este e substituir o ícone existente, assim. Excluiremos o antigo e também faremos os ícones um pouco maiores. Atualmente eles têm 16 por 16, mas eu quero que eles sejam 24 por 24. Na verdade, uma coisa que eu não gosto aqui é que eles estão alinhados no centro com textos que se estendem em duas linhas. Eu quero que eles estejam alinhados no topo. Vamos em frente e mudar isso aqui e aqui. Mas, obviamente, agora eles não estão alinhados visualmente corretamente. O que precisamos fazer é aplicar a mesma técnica que usamos quando criamos o menu aqui. Lembre-se, adicionamos algum preenchimento superior a essa linha envolvendo-a com um quadro com layout automático. Vamos seguir em frente e fazer o mesmo aqui. O que precisamos fazer é envolvê-lo com outro quadro adicionando layout automático. Shift A. Uma coisa estranha aconteceu aqui porque isso já era um quadro. Veja o ícone. Ao adicionar layout automático, isso alinhará esses dois elementos em uma determinada direção, e não queremos isso. Algumas maneiras diferentes de superar isso, podemos clicar com o botão direito do mouse e ir para a seleção de quadros. Criamos um quadro em cima dele. Nós o envolvemos em outro quadro. Nesse caso, aqui podemos simplesmente fazer Shift A neste quadro para adicionar o layout automático e, em seguida, podemos adicionar a quantidade de preenchimento que queremos. Digamos que talvez como quatro ou dois. Vamos ver o que parece melhor. Acho que dois seriam o valor apropriado, e faremos o mesmo por esse ícone. Clique com o botão direito do mouse em seleção de quadros, Shift A para adicionar layout automático e, em seguida, vamos ver quatro ou dois. Acho que isso parece muito bom. Além disso, lembre-se de como eu disse que de vez em quando precisamos quebrar o layout. Bem, isso é algo que podemos fazer aqui também. Primeiro de tudo, deixe-me me livrar de ver elementos. Esse grupo inteiro deveria ter desaparecido. Para quebrar um pouco o layout, que tal alinhar a largura do texto? Neste guia, vamos alinhar os ícones com este guia. Isso deve ser interessante. Para fazer isso, vamos ver o que temos. Temos um quadro com 128 preenchimento esquerdo. Vamos mudar isso para 64. Agora temos que empurrar o texto para alinhar com este guia. Como fazemos isso? Na verdade, é bem simples. A distância entre aqui e aqui é de 64 pixels. O que fazemos é calcular o tamanho do ícone e adicionamos o resto como preenchimento correto. Isso vai empurrar o texto para a direita, ou porque este é um quadro e estamos usando o espaçamento entre itens, posso aumentar o espaçamento até chegarmos ao número correto. Acho que esta é realmente a maneira mais fácil de fazer isso. Vamos 40. Isso realmente depende. Acho que 40 é, na verdade, a quantidade correta. Vamos fazer o mesmo aqui, 40 e aqui, ótimo. Agora, tudo está devidamente alinhado. Exatamente como eu quero. Ícones com este guia, texto com este guia e, em seguida, o cabeçalho, mapa e o formulário de contato estão alinhados com este guia, que é exatamente a mesma coisa que fizemos para o menu. Isso não foi muito difícil, não é? No momento, a única coisa que resta a fazer aqui é o formulário de contato. Bem, espero que seu processo de design esteja funcionando sem problemas e que você esteja progredindo em sua versão do site. Se você terminou o cabeçalho e a barra lateral da seção de contato, estamos prontos para passar para o formulário de contato, que terminaremos na próxima lição. Vejo você lá. 23. Formulário de contato: É hora de trabalhar no formulário de contato, e acredite ou não, projetar formulários é uma das minhas coisas favoritas a fazer porque eu simplesmente não gosto da aparência padrão de formulários na web. Eu sempre tento fazê-los parecer melhores e serem mais utilizáveis. Deixe-me mostrar como eu criaria esse formulário. Primeiro de tudo, precisamos de um título para este formulário. Vamos pegar algum texto, e vou aqui sob o grupo de formulários. Você sabe, vamos primeiro mudar isso de um grupo para um quadro, então “Shift A” para adicionar layout automático, e vamos alterar o espaçamento aqui para 32, isso deve fazê-lo. Vamos brincar com essa camada se precisarmos aumentar o preenchimento ou outra coisa, mas vamos chamar isso, envie-nos uma mensagem. Vamos Poppins 21, 32, negrito, e apenas use preto aqui. Agora, para os campos de formulário reais, aqui está o que estou pensando, em vez de um campo com um plano de fundo sólido, vamos mover o rótulo um pouco mais para cima, e então teremos o valor do campo. Em seguida, teremos apenas uma pequena linha de um pixel como borda para separar o campo dos outros. Vai parecer algo assim. Vamos primeiro cuidar da linha, vamos preenchê-la com preto e iremos 50% de opacidade. Vamos alterar o grupo para um quadro com layout automático, e vamos selecionar novamente a borda e alterá-la para preencher o contêiner, e também alterá-lo para preencher o contêiner. Vamos definir o espaçamento interno dos itens para 16. Este é o valor do campo, então ele deve ser 21, 32 regular e preto, e também vamos duplicá-lo para criar o rótulo. Para isso, usaremos um texto muito menor, e o menor que definimos aqui como 16, 24, então 16 tamanho de fonte, 24 altura de linha. Vamos fazer isso, então 16, 24. Vamos chamar isso de seu nome. Vamos realmente colocar alguns valores aqui. Vamos reduzir a opacidade desse texto, vamos usar preto, 75. Estou pensando que talvez algum espaçamento entre letras menos 3% apenas para fazer com que pareça um pouco diferente do texto abaixo dele, e esse é um dos nossos campos. Agora, para facilitar as coisas para nós, vamos apenas duplicar esse quadro 1, 2, 3 vezes mais. Aqui, teremos seu endereço de e-mail. Vamos adicionar meu endereço de e-mail aqui. Então, o que mais? O número de telefone. Vamos fazer isso. Obviamente, este não é o meu número de telefone real, e aqui será sua mensagem. Vamos mudar a mensagem, algo assim. Finalmente, só precisamos excluí-los. Na verdade, vamos mudar o botão também. Na verdade, criamos um bom botão aqui, podemos simplesmente copiar isso e podemos colá-lo. Só temos que remover o ícone, alterar os textos. Podemos definir o redimensionamento para preencher o contêiner e podemos realmente alterar o alinhamento também para que o texto seja centralizado. Uma coisa que eu realmente quero mudar é o espaçamento, acho que 32 é um pouco baixo demais, então 64 pixels devem fazer o truque. Além disso, eu gostaria de limitar o quão grande esse formulário realmente é. Para isso, vamos ver quais são nossas opções aqui. Temos um quadro que está realmente configurado para abraçar o conteúdo. Agora, o que acontece se eu configurá-lo para preencher o contêiner. Isso aumentará seu tamanho. Então temos esse quadro que podemos definir para preencher o contêiner, e então podemos pegar o quadro inicial e podemos adicionar um preenchimento ao lado direito, digamos 560, que é exatamente a mesma quantidade de preenchimento que usamos aqui. Para empurrar o mapa e o conteúdo do menu da borda esquerda. Acho que isso parece muito bom. A única mudança aqui, vamos fazer esse contêiner de preenchimento de texto, e acho que o resto deve se encaixar. Vamos mudar isso para preencher o contêiner, e vamos mudar isso também. É praticamente isso. A seção de contato agora está completa. Anteriormente, criamos o cabeçalho com o título e o mapa, e a barra lateral que contém informações de contato. Nesta lição, criamos o formulário de contato. Se você está acompanhando, espero que sua seção de contato esteja completa também e, se não estiver, então vá em frente e crie-a para que possamos seguir em frente. Agora, apenas olhando para nossa página, podemos ver que as únicas partes não polidas são as seções de boletim informativo e rodapé. Vamos cuidar desses a seguir. 24. Newsletter e rodapé: Newsletter e rodapé, estas são as duas últimas seções em nosso site que ainda não projetamos. Vamos seguir em frente e fazer isso agora e finalizar o design deste site. Vamos. Primeiro, vamos cuidar do rodapé porque é a coisa mais fácil de fazer. Vou selecionar todo esse grupo e vou chamá-lo de boletim informativo e rodapé e, claro, Shift A para usar o layout automático. Vamos alterar o espaçamento entre itens para 128. Vamos alinhar tudo no meio e claro, vamos fazer com que isso preencha o contêiner. Além disso, vamos adicionar um preenchimento 128 na parte inferior para que a distância entre esta seção e a parte inferior seja a mesma entre esta seção e o formulário de newsletter. Agora, apenas olhando para esse layout, não tenho certeza se o logotipo se encaixa aqui porque vejo isso como uma seção muito limpa, então não acho que devemos usar o logotipo. Mesmo que o usemos no wireframing. Mas, como eu tenho dito, o wireframe é apenas um guia. Podemos alterar layouts, podemos remover certos elementos se, é claro, eles não forem críticos, como conteúdo muito importante. Mas o logotipo aqui é principalmente por razões estéticas. Então, vou apenas ir em frente e excluir isso e também vamos desagrupar esse pedaço de texto. Para o texto, vamos usar preto 75, 16, 24 que está correto. Já definimos essa tipografia. Agora, com o rodapé feito vamos ver sobre esta inscrição no boletim informativo. Primeiro vou pegar esse grupo, transformá-lo em um quadro, vamos chamá-lo de conteúdo do boletim informativo, e vamos adicionar uma cor de preenchimento como preto, e vamos fazê-lo preencher o espaço disponível. Vamos remover o espaçamento aqui e vamos definir um preenchimento superior e um preenchimento inferior de 128 pixels e vamos também alinhar o conteúdo ao meio. Agora vamos deixar esse texto branco e também esse texto branco. Acho que cerca de 90% deveriam fazer um truque. Então 90% de opacidade e em vez de ter dois elementos separados aqui, que tal apenas combiná-lo em um único. Vamos dizer, assinar nosso boletim informativo para notícias e eventos especiais e agora podemos excluir esse bit , então , com esses dois selecionados, realmente vamos transformá-los em um quadro. Vamos adicionar um pouco de espaçamento, 64 pixels devem fazer o truque. Talvez 95% de opacidade para este texto porque é um título em um fundo escuro e se eu me lembro corretamente no herói onde também temos um título em um fundo escuro, usamos 95% de opacidade. Então, trata-se de manter as coisas consistentes. Então, em vez desses dois campos, tal usarmos os que criamos aqui. Então, vamos copiar este. Vamos colar isso. Vamos realmente excluir isso e também precisamos de um botão. Vamos colar isso também. Obviamente, não podemos ver nada agora porque está tudo escuro. Então, cor preta na cor preta. Na verdade, vamos selecionar ambos e Shift A para adicioná-los em seu próprio quadro separado. Vamos seguir em frente e mudar as cores. Em vez de preto, vamos desvincular as cores daqui. Vamos usar branco. Isso é melhor. Agora vamos mudar a direção desse quadro para horizontal e vamos mudar o texto dentro do botão para se inscrever. Então vamos mudar o redimensionamento para o conteúdo do abraço. O texto aqui é o contêiner de preenchimento. Este quadro tem uma largura fixa, então que tal configurá-lo para preencher também o contêiner. Vamos realmente mover o botão para lá e vamos definir isso como conteúdo de abraço e na verdade, acho que uma largura fixa para isso seria melhor. Que tal fazermos esses 640 pixels de largura. Isso deve ser muito espaço para um endereço de e-mail e vamos realmente fazer esse contêiner de preenchimento para que ele se encaixe no espaço disponível lá. Isso deve fazer isso. Vamos ver sobre o botão aqui. Temos um pouco de desalinhamento. O botão está alinhado na parte superior com o elemento do quadro. Que tal alinhá-los na parte inferior dessa forma. Acho que isso parece muito melhor porque temos uma continuação clara entre esta linha aqui ou o traçado ou a borda do botão. Esse deve ser nosso boletim informativo e rodapé. Então, vamos ver onde começamos. Este é o wireframe original e, em seguida, começamos a adicionar algumas propriedades de tipografia alterando a família de fontes, os tamanhos da fonte e também alturas de linha, espaçamentos de letras, pesos de fonte e assim por diante. Em seguida, adicionamos um pouco de cor e, em seguida, foi isso que acabamos. Deixe-me realmente esconder isso. Começamos com cada seção e criamos o cabeçalho do menu superior, depois passamos para a seção de heróis, descrição do menu de comida, criamos o menu de comida junto com um menu de comida navegação e, em seguida, chegamos à seção sobre, galeria de imagens do Instagram e, em seguida, ao contato e, finalmente, nesta lição, criamos o formulário de assinatura e o rodapé e esse é o nosso concluído design ou pelo menos minha versão dele. Espero que você tenha terminado seu design também. Espero que você não tenha problemas até agora, e espero que tenha aprendido algo útil nesta aula até agora. Agora, como venho dizendo ao longo desta aula, recomendo que você trabalhe ao meu lado e crie sua própria versão do projeto. Além disso, recomendo que você publique isso na galeria de projetos de classe porque outras pessoas podem ver o que você fez e, se você quiser, também posso dar alguns comentários. Agora, neste momento, você pode se sentir tentado a chamá-lo um dia e enviar o design para seu cliente ou desenvolvedor, mas o trabalho ainda não está feito porque um aspecto que é negligenciado por muito das pessoas é um design responsivo ou como seu design ficará em vários tamanhos de tela? Bem, eu quero contar mais sobre isso na próxima lição. 25. Design para telas médias: O que se passa com um web design responsivo? Tenho certeza que a maioria de vocês já ouviu esse termo antes, mas no caso de não terem, deixe-me dar-lhe um guia rápido. Design responsivo é a prática de fazer com que um site ou um aplicativo da web responda ao comportamento e ao ambiente do usuário. Em outras palavras, o design responsivo garante que esse site ou aplicativo da Web seja utilizável em qualquer tamanho de tela, plataforma ou orientação do dispositivo. Aqui está um exemplo. Vamos pegar o site da figma.com. Atualmente, estou usando a tela aqui, que é 1920 por 1080. Uma tela típica da área de trabalho. E no tamanho, é assim que o site da Figma se parece. Mas assim que começarmos a diminuir a janela do navegador para simular a aparência do site em um dispositivo menor, você começará a ver algumas alterações. Como por exemplo, agora algumas dessas imagens se tornaram largura total. Se formos ainda mais longe, você verá o menu desaparecer, transformando-se em um desses menus suspensos ou suspensos, e se formos ainda mais longe, você verá que as imagens estão começando a redimensionar automaticamente. O texto está começando a ficar menor, como por exemplo, nesse cabeçalho, e ainda menor. Todo o site adaptará seu layout e sua topografia para que ele ainda pareça bom e seja utilizável em tamanhos de tela menores. É disso que se trata um web design responsivo. É garantir que você crie ou crie uma versão do seu site que ficará ótima, independentemente do ambiente. Então, ele é exibido em uma grande tela da área de trabalho como esta? Ou talvez esteja em uma paisagem ou tablet e retrato, ou talvez até mesmo em um smartphone. Esse layout precisa se adaptar. Espero que isso faça sentido e que você entenda por que web design responsivo é um aspecto tão importante de qualquer site ou aplicativo da web. Agora, o design que fizemos é para telas grandes. Começamos com um tamanho de tela relativamente normal, mas agora precisamos garantir que ele fique tão bom em telas menores. Para fazer isso, fará pequenas alterações em vários elementos. Essas mudanças variam de modificar a posição e o tamanho até mesmo ocultar certos elementos e mostrar outros. Agora, vamos criar o design responsivo para telas médias. Como essas são telas relativamente pequenas, precisamos fazer algumas alterações. Vamos começar. A primeira coisa que vou fazer na Figma é duplicar o quadro chamado telas grandes e vou renomeá-lo para telas médias. Para determinar quais alterações você precisa fazer, você precisa determinar em que ponto as mudanças são necessárias. Quando o layout é pequeno o suficiente para que ele exija que façamos alterações? O que vou fazer é simplesmente redimensionar o quadro pai e porque estamos usando o layout automático e para todo o quadro e todos os diferentes elementos em nosso design são construídos com layout automático, isso faz é super simples para nós porque é muito fácil ver os elementos se moverem em tempo real, pois estou redimensionando automaticamente este quadro principal. Quando chego a um ponto em que posso ver claramente que, tudo bem, algo está errado com o layout e precisamos fazer algumas alterações. Bem, é aí que faremos a mudança. Do meu teste, descobri que cerca 1400 pixels é onde precisamos adicionar o que é chamado de ponto de interrupção. Esse é apenas um ponto em que precisamos começar a fazer alterações. O layout que criamos aqui para telas grandes, é 1800 pixels. Este quadro deve conter um layout adequado para dispositivos com larguras entre 1400 e 1800 pixels. Espero que isso faça sentido. Só para deixar as coisas um pouco mais claras, vamos renomear isso para 1800 plus. Esse layout o usará para tamanhos de tela de 1800 pixels e mais. As telas médias, estaremos usando-as por 1400-1800. A razão pela qual escolhi 1400 é que, por exemplo, no herói, esse texto está começando a ficar um pouco apertado demais. Estou basicamente exibindo duas, três palavras por linha, e isso não é bom o suficiente para fins de legibilidade. Além disso, esta seção aqui, parece um pouco barulhenta demais. Vejamos os outros elementos. O menu. Este layout aqui onde compensamos o conteúdo do menu. Funciona muito bem na tela maior, mas aqui, não tanto. Eu prefiro usar o espaço disponível aqui. Porque, novamente, o texto está começando a ficar um pouco curto demais e então a página ficará muito longa e eu quero evitar isso. Além disso, provavelmente ficaremos longe deste menu, provavelmente o esconderemos completamente em telas médias. Vamos ver o que mais temos. Aqui está outro problema com esse layout. Temos muito texto aqui, mas a página agora é muito menor, então eu não tenho esse preenchimento superior e inferior que tenho aqui. O texto toca as bordas aqui, então eu quero consertar isso também. As fotos do Instagram, elas encolheram. Claro, eles ficaram menores em termos de largura, mas agora eles são um pouco altos demais. Idealmente, quero manter uma relação entre largura e altura perto de algo que tenho aqui nas telas grandes. Precisamos torná-los um pouco menos altos. Em seguida, é a seção de contato. Novamente, agora este mapa parece fora de lugar porque é uma proporção estranha. Quero fazer essa largura total. O formulário pode ser um pouco menor. Lembre-se, anteriormente adicionamos muito preenchimento certo aqui porque tínhamos muito espaço para trabalhar, mas aqui, esse preenchimento ainda existe e precisamos nos livrar dele. São mudanças como essa que definem um web design responsivo. Ele está passando pelas várias larguras de tela e vendo o que funciona e o que não funciona nessa largura específica e fazendo as alterações necessárias. Com este quadro definido em 1400 pixels, vamos começar a fazer alterações e começaremos com o herói. Para corrigir esse problema que o texto aqui não tem largura suficiente, vamos mudar a direção dos elementos heróis. Agora ele está definido na horizontal. Vamos alterá-lo para vertical para que a imagem fique na parte superior e o conteúdo fique na parte inferior. Vamos, em primeiro lugar, alterar a largura da imagem ou o redimensionamento a serem preenchidos contêineres para que ela preencha o espaço disponível. Então, aqui, vamos também trazer os guias. Vou manter os mesmos guias de 64 pixels e 128 pixels, mas também temos alguns guias fora do nosso quadro aqui, mas porque redimensionamos que não podemos mais vê-los. Na verdade, vamos criar alguns novos guias. Vamos ver. Vamos colocá-los aqui e outro, então isso está a 64 pixels da borda e deste. Vamos ver se consigo fazer isso visualmente. Se fizermos uma medição rápida aqui, são 67. Mas podemos realmente fazer um cálculo simples, então 1400 menos 128, isso é 1272. Agora sabemos que este guia está exatamente 128 pixels da borda. Vamos usá-los para garantir que estamos alinhando os elementos corretamente. Agora, vamos selecionar esse conteúdo de herói. Isso ainda está definido para vertical, o que é bom. É o que queremos, mas vamos adicionar um pouco mais de preenchimento na parte superior e inferior. O preenchimento lateral é exatamente o que precisamos, 128, mas no topo, vou adicionar 96 e novamente, 96 na parte inferior. Vamos também garantir que isso esteja configurado para abraçar o conteúdo para que ele seja redimensionado junto com seu conteúdo. Além disso, como temos todo esse espaço horizontal, vamos transformar esse layout de uma coluna para o horário comercial em duas colunas. Este é um quadro com layout automático. Tudo bem. Vamos mudar essa direção. Vamos definir uma lacuna entre essas duas colunas para 64. Vamos apenas nos certificar que eles estão definidos corretamente, alinhe ao centro. Isso é bom. Além disso, este guia aqui que usamos anteriormente para alinhar o conteúdo do menu, bem, não precisamos mais dele. Você pode selecioná-lo e, quando estiver azul, clique em “Excluir”. Essa é a primeira mudança que fizemos assim que não tivemos espaço suficiente para exibir verticalmente essas informações, exibir horizontalmente essas informações, mudamos para uma forma vertical. Agora, o texto é exibido bem em duas linhas. É muito mais fácil de ler do que o que tínhamos antes. Em seguida, vamos ver sobre a seção, a descrição do menu de alimentos. Neste tamanho de tela, não há espaço suficiente para exibir esses dois elementos lado a lado porque o texto do cabeçalho fica muito pequeno, e é o mesmo problema que tivemos aqui . Está dividido em muitas linhas e é mais difícil de ler, além disso, não parece muito bom. Portanto, a solução óbvia é exibir o título acima do texto abaixo. Em vez de lado a lado, eles serão empilhados. Para isso, porém, precisamos fazer algumas alterações porque aqui temos quadros aninhados dentro de quadros porque tínhamos um layout um pouco complicado aqui com muitos enfeites adicionados. A primeira coisa que faremos é selecionar o quadro pai, alterar a direção do layout para vertical, definir o espaçamento entre os itens para, digamos, 64 pixels. Em seguida, vamos selecionar cada um, cada elemento e desagrupar para nos livrar do quadro. Em seguida, alteraremos o redimensionamento para preencher conteúdo do contêiner e abraçar. Faça o mesmo por isso, preencha os contêineres. Horizontalmente, ele preenche todo o espaço disponível e também abraça verticalmente o conteúdo. Portanto, é tão alto quanto seu conteúdo. Isso parece muito bom. Mas esse texto provavelmente é um pouco longo demais. Que tal adicionarmos um preenchimento extra neste lado para que tanto os textos quanto o título sejam um pouco mais curtos. Isso realmente melhora a legibilidade do texto. Selecionaremos o quadro pai novamente e, para o preenchimento direito, vamos adicionar algo um pouco maior, algo como 400 ou talvez algo menor. Que tal 360? Ou algo que parece bom para você. Para mim, 360 faz o trabalho, então vou mantê-lo assim. Agora, antes de seguirmos em frente, vamos realmente fazer outra alteração nesse layout, porque à medida que a largura da tela fica menor, obviamente o conteúdo ficará mais longo ou mais alto. Em um dispositivo menor, você terá que rolar muito mais. Portanto, só para que não transformemos isso em uma página super longa. Vamos realmente reduzir o espaço entre os elementos. Se você se lembra, nas telas grandes, usamos 240 pixels. Fizemos isso aplicando 240 como espaçamento entre itens no quadro principal, que tem layout automático. Em telas médias, vamos diminuir um pouco esse valor, algo como talvez 160. Isso parece um pouco melhor. Talvez algo um pouco maior, 176, que possa funcionar também. Você já pode ver que, ao fazer isso, nós realmente ganhamos muito espaço verticalmente. Além disso, você não precisa de toneladas e toneladas de espaço em branco em uma tela menor. Funciona muito bem aqui na tela grande, mas à medida que a tela fica cada vez menor, precisamos preservar esse espaço vertical. Agora, vamos seguir em frente. Até agora fizemos o herói e fizemos essa descrição do menu de comida. Vamos ver sobre o menu real. Primeiras coisas primeiro, vamos nos livrar dessa navegação. Não precisamos disso, e vamos selecionar a seção de hambúrgueres e sanduíches, e digamos, quero alinhar a imagem com este guia aqui e o texto também, mas quero apenas a imagem vá para o comprimento total da página no lado direito. Para fazer isso, vamos ver, selecionaremos o quadro principal e, em seguida, iremos aqui e adicionaremos 128 preenchimento à esquerda. Deveria ser isso. O restante do conteúdo ainda está devidamente alinhado porque temos o preenchimento definido do design anterior. Isso parece bom. Vamos cuidar das outras seções. Vamos ver, bifes, vamos 128, assim, quickies, 128, e saladas, um. Ótimo. Isso parece bom. Agora, vamos para a seção sobre, e faremos algo semelhante ao herói, onde vamos empilhar a imagem e o conteúdo do texto. Vamos selecionar o quadro, alterar a direção do layout para vertical. Vamos mover a imagem para cima, vamos mudar para preencher o contêiner. Vou manter a mesma altura de 480, e nesta seção, vou configurá-la para preencher o contêiner, abraçar o conteúdo, e vou mudar o preenchimento superior, inferior para 96, o mesmo valor que usamos para a seção herói. Observe que a imagem ficou consideravelmente menor agora. Isso porque eu preciso definir isso para uma altura fixa. O conteúdo geral ou quadro precisa ser configurado para abraçar o conteúdo assim. Essa é a seção sobre, vamos seguir em frente. Fotos do Instagram. A única mudança que fará aqui está na altura dessas imagens. Neste momento, existem 480, mas vamos mudar isso para 400. Isso deve nos dar uma relação muito melhor entre largura e altura. Em seguida, vamos ver sobre o formulário de contato. Aqui as coisas são muito simples, precisamos alinhar este e o mapa com nosso guia, e precisamos fazer com que este formulário seja de largura total. Como eu selecionei isso, vamos realmente mudar esse valor para 128. Você tem que adorar o layout oco, porque o quadro do formulário estava usando o recipiente de preenchimento, ele apenas preencheu todo o espaço disponível e o espaço disponível ficou maior porque removemos um grande pedaço desse preenchimento. Agora, vamos dizer sobre esses elementos. Aqui, vamos mudar isso para 128, e estamos prontos para ir. Finalmente, vamos cuidar desta seção aqui. O conteúdo do boletim informativo, e aqui, na verdade, não precisamos fazer nada porque isso ainda parece bom em telas médias. Você pode torná-lo com largura total para que ele se encaixe entre este guia e este guia. Mas, pessoalmente, acho que não precisa de nenhuma mudança, então vou deixar assim. Precisaremos fazer algumas alterações quando chegarmos às telas pequenas, mas no meio, isso parece muito bem. Vamos fazer uma rápida recapitulação do que fizemos nesta lição em termos de web design responsivo, e eu realmente vou mostrar isso lado a lado, para você possa ver as mudanças que fizemos. Em primeiro lugar, diminuímos o espaçamento entre itens no mainframe. Tínhamos 240 aqui, fomos com 176, creio eu. Em seguida, mudamos o herói desse layout horizontal para um vertical, e mudamos o horário comercial de um layout vertical para horizontal apenas para tirar o máximo proveito do espaço disponível. Também alteramos esta seção de horizontal para vertical. Nós mudamos o menu primeiro removendo a navegação do menu e depois removendo também aquele grande deslocamento que tínhamos no lado esquerdo. Agora, tudo se alinha corretamente. O que mais? Vamos seguir em frente. Também alteramos a seção sobre. Assim como fizemos com o herói, passamos de um layout horizontal para um vertical. Então, na seção do Instagram, alteramos a altura das fotos de 480 para 400. Então, no formulário de contato, é claro que aumentamos o mapa ou parecemos maiores, alinhando-o com os guias. Também fizemos com que o formulário de contato ocupasse todo o espaço disponível alterando ou diminuindo o preenchimento que definimos aqui. Essa é a nossa versão de design responsivo para telas médias. Como você está acostumado a agora, é hora de praticar. Então vá em frente e crie o design responsivo para as telas médias para obviamente sua versão do design. Depois de terminar, podemos seguir em frente porque estamos na reta final. Estamos muito perto da linha de chegada, mas ainda precisamos cuidar das telas pequenas ou como o site ficará em telas menores. Isso requer a maior quantidade de alterações devido ao tamanho dessa tela. Vamos cuidar disso na próxima lição. 26. Design para pequenas telas: Quando se trata de ajustar o design para telas pequenas, há algumas coisas que precisamos fazer. Precisamos alterar os tamanhos da fonte, o layout e também introduzir um novo elemento na forma de um menu de sobreposição. É por isso que vamos dividir os ajustes de tela pequena em três lições. Neste, cuidaremos dos tamanhos da fonte. Vamos. Primeiro de tudo, vamos voltar para a Figma e duplicar as telas médias, projetá-las e renomeá-las para telas pequenas. O intervalo que estamos indo é pouco menos de 1.400 pixels. Qualquer alteração que fizer nesse layout será aplicada em telas com 1.400 pixels ou menos. Para ver algumas dessas mudanças, vamos realmente redimensionar a tela para um tamanho típico de uma tela pequena como um smartphone ou algo assim. Vamos buscar algo como 540 pixels, que é um tamanho bonito e bem pequeno. Como você pode ver nesse tamanho, temos muitas coisas para fazer. Os elementos estão apenas sobrepostos. Não temos espaço suficiente para o texto do menu de navegação seja muito grande. O menu parece estranho. Temos muitas coisas para fazer. Mas, na verdade, vamos tornar isso um pouco maior para que ainda tenhamos acesso a alguns desses elementos. Isso só vai tornar mais fácil para nós trabalhar. Agora, como eu estava dizendo nesta lição, vamos cuidar dos tamanhos de fonte porque aqui está a coisa. Em uma tela pequena, você não deve realmente usar os mesmos tamanhos de fonte que você está usando em uma tela grande. Porque em uma tela grande você tem muito espaço. Você tem muita tela, imóveis, mas em uma tela pequena, esse não é o caso. Um dos métodos que você pode usar para garantir que todo o seu conteúdo se encaixe e seja exibido corretamente é reduzir os tamanhos de fonte. Se você se lembra da lição de topografia, usamos uma escala de tipos. Usamos este com um tamanho de fonte base de 21 pixels. Se eu me lembro corretamente, foi um quarto perfeito. Vamos ver se os tamanhos da fonte correspondem, 88, 66, 50. Este foi base 21 razão 1, 3, 3, 3. Agora, o que eu gosto de fazer para telas menores é manter o mesmo tamanho de fonte base, mas alterar a proporção porque veja o que acontece quando você altera a proporção para apenas um passo menor. Os tamanhos das fontes também ficam mais baixos, especialmente os grandes, o título, o título dois. Acho que essa é uma ótima maneira de controlar a tipografia em um site responsivo. Em telas pequenas, basta diminuir a fonte alterando a escala de tipos. Então, vamos duplicar esse quadro. Vamos abrir espaço para isso aqui. Na verdade, vamos chamar essa escala de tipo para telas pequenas e acima. Vamos chamar essa escala de tipo, para telas pequenas. Esta será a base 21, então 21 pixels. Este é o ponto de partida, mas para a escala, vamos usar esse terceiro de 1.250 ou maior. Vamos renomear isso também. Agora vamos em frente e altere os tamanhos da fonte aqui. Vamos ver, temos 21 pixels como base, vamos manter os 16 como um passo para baixo na escala, então 1624. Mas nos tamanhos de fonte maiores, temos os 26 a seguir. Então 33, 41, 51 e 64. Agora, irei em frente e alterarei os tamanhos da fonte aqui também, então 26. Enquanto eu estiver nisso, também vou mudar as alturas da linha. Vamos manter isso em 40, 33. Vamos definir isso para 48. Isso é 41. Se você está se perguntando por que estou excluindo esse valor de altura da linha e configurando-o como automático, bem, quando está em auto, e eu clico nele, Figma calcula automaticamente para mim com base em uma proporção predefinida. Posso usar esse valor de 62 ou posso adicionar o meu próprio. Nesse caso, acho que vou adicionar o meu próprio, então provavelmente iremos com 56. Enquanto eu estiver nisso, também vou atualizar o texto aqui. O próximo é 51. Vamos mudar isso para 72. Finalmente, este é 64, e vamos mudá-lo para 80 para a altura da linha assim. Agora que temos os novos tamanhos no lugar, vamos aplicá-los à nossa página, e para torná-lo um pouco mais fácil para mim, vou tirar uma captura de desses valores e vou fixar para a minha tela. Algo assim. Vamos mudar para o nosso design para as telas pequenas. A propósito, se você está se perguntando como eu sou capaz de fazer isso, é um aplicativo no macOS chamado Clean Shot. Vamos ver sobre a topografia. Basicamente, o que precisamos fazer aqui é mudar o valor antigo com o novo valor. Agora que digo isso, acho que também precisamos saber do que eram os valores antigos. Vamos tirar uma captura de tela disso também. Vamos também fixar as capturas de tela, então vamos organizá-lo um pouco aqui. Também posso redimensioná-los. Vou ter o valor antigo e, em seguida, os novos valores aqui. Agora vamos examinar o design e alterar esses valores de acordo. Este texto aqui, este é 16 ele permanece o mesmo. A navegação 21, permanece a mesma. Este, 88.104, este é o H1. Vamos mudá-lo para 64 e 80. Isso é 28 e 40. Vamos ver a Posição 3 aqui. Precisamos mudá-lo por 26 e 40, assim. Próximos 66, 80, isso é um H2. Vamos mudá-lo para 51, 72. Assim. Este é um parágrafo, então ele permanece o mesmo. Isso e já que estamos nisso, isso é novamente 66, 80. Precisamos mudá-lo por 51, 72. Assim. Este está usando o estilo tão 37, 48. Número 4 aqui na lista. Precisamos mudá-lo com 33, 70 ou 48, então 33. Este e este, vamos realmente selecionar todos esses. Só estou pressionando Command and Shift para selecionar todos esses elementos. Eles estão usando 28, 40. Número 3 aqui, vamos substituir por 26, 40. Não vamos nos preocupar com isso, mas ainda precisamos. Vamos selecionar esse estilo Copiar Propriedades. Selecione isso, e isso, e isso, cole propriedades para aplicar os novos tamanhos de fonte. Agora, vamos selecionar ambos e isso e alterar esses dois, 51, 72. Este é um texto normal, mantém o mesmo estilo. Isso também. Este, 51,72 também lá, e o resto deve ser praticamente o mesmo, exceto talvez este. 37,48, vamos mudá-lo para 33, 48. Deveria ser isso. Como uma rápida recapitulação, o que fizemos aqui foi usar uma escala de tipo diferente. Agora podemos realmente nos livrar dessas capturas de tela. Mudamos de usar uma proporção de 1,333, para uma proporção de 1,250, que na verdade tornou os tamanhos de fonte menores em telas pequenas. Com base nesses novos valores, acabamos de selecionar todos os elementos de texto e alteramos os tamanhos de fonte onde precisávamos. Isso, como você já pode ver, teve um grande impacto no tamanho geral da nossa página. Porque mesmo que isso seja muito menor do que isso, é quase igual em altura. Claro que vai ficar maior ou mais alto porque começaremos a empilhar alguns elementos. Mas cada pouquinho ajuda. Alterar a topografia ou o tamanho da fonte em telas pequenas é definitivamente algo que eu recomendo. Agora é sua vez de alterar a escala de tipos e aplicar os novos tamanhos de fonte à sua versão do design. Se você já fez isso, ótimo, você está pronto para seguir em frente. Mas se você não o fez, você deve seguir em frente e fazer isso agora para que estejamos no mesmo nível em termos de progresso com nosso design e também certifique-se de entender por que estamos fazendo isso. Tentei explicar o melhor que pude no vídeo. Mas se você ainda não entende por que precisamos fazer essas mudanças em um design responsivo. Em seguida, deixe-me uma linha na área de discussão e vou tentar explicar de outra forma. Agora, quando você estiver pronto, verei você na próxima lição, onde mudaremos o layout do nosso site em telas pequenas. 27. Design para telas pequenas: mudança: O próximo passo para adaptar ou projetar a telas pequenas é alterar o layout, e a maior mudança aqui é mover tudo para um layout de uma coluna. Devido ao tamanho da tela, raramente é o caso em que você pode encaixar duas colunas de conteúdo. É por isso que, quando você abre um site em seu telefone, normalmente, você verá que tudo está empilhado um sobre o outro em uma única coluna. Vamos seguir em frente e fazer isso também. Vamos começar do topo. Como estamos lidando com telas pequenas, observe que, à medida que chegamos a um tamanho menor e menor, esses elementos se sobrepõem. Vamos fazer algo inteligente aqui e nos livrar completamente dessa área e, em vez disso, movê-la em seu próprio contêiner de sobreposição, que criaremos na próxima lição. Basicamente, quero substituir esse conteúdo pelo logotipo e um pequeno ícone para o menu, e a ideia é que, quando clicarmos nesse ícone de menu, teremos um pop-up ou algum contêiner de sobreposição exibindo o menu e também essas informações que estamos removendo daqui, porque aqui está uma dica rápida, quando você está criando designs responsivos ou versões responsivas para o seu layout, não há problema em remover certos elementos, mas na maioria das vezes, você vai querer trazê-los de volta, especialmente elementos críticos como a navegação. No nosso caso aqui, em uma tela muito pequena, a navegação é muito longa, então vamos removê-la desse layout, mas adicionaremos mais tarde em um elemento separado que será aberto sob demanda. Vamos seguir em frente e fazer isso. Vou remover isso. Também vou copiar o logotipo e remover esse bit. Na verdade, vou renomear isso para, bem, na verdade, podemos mantê-lo como top bar. Está tudo bem. Vou colar no logotipo, mas vou torná-lo menor. Vamos mudar sua altura para 48 pixels, algo assim. Isso deve ter altura suficiente para uma tela pequena como um smartphone. Você ainda pode ver o logotipo claramente, mas ele não ocupa muito espaço. Vamos então movê-lo para esse lado. Vamos nos livrar desses elementos. Além disso, vamos adicionar mais um ícone aqui para servir como nosso ícone de menu, e vou abrir o ícone configurado novamente, e vou procurar List no ícone bootstrap. Este é o que vamos usar. Vamos em frente e adicioná-lo à nossa página. Assim mesmo. Acabei de colar com a barra superior selecionada e também mudei o tamanho para 32 pixels. Agora posso simplesmente remover os ícones sociais. Não vamos precisar deles agora, e também me certifiquei de que nossa navegação esteja usando a cor preta. Ao fazer isso, eu me certifico de que , mesmo nas menores telas, ainda obtemos um bom layout para o nosso cabeçalho. Agora, algumas mudanças aqui. Primeiro de tudo, o preenchimento, superior e inferior, vamos aumentar isso um pouco porque agora temos apenas um único elemento. Vamos também remover este guia porque não vamos mais usá-lo, e também vamos desagrupar esse elemento, o herói com a barra superior para que nos livremos dessa lacuna entre eles. Vamos apenas mudar A e vamos chamá-lo de cabeçalho e herói, e vamos remover completamente o espaçamento entre eles. Vamos seguir em frente. Vamos selecionar o quadro principal e alterar o espaçamento entre itens de 176 para 128, assim, e como você pode ver, temos algumas coisas muito estranhas acontecendo aqui. Eu realmente me pergunto por que isso está virado de cabeça para baixo. É tão estranho. Vamos virar. Mas vamos chegar a isso em um pouco. Vamos fazer esse contêiner de preenchimento. Vamos fazer esse contêiner de preenchimento e vamos fazer esse contêiner de preenchimento assim. Vamos redimensioná-lo para lá. Agora, vamos ver sobre essa área de herói. Na verdade, podemos aumentar o tamanho dessa imagem para cerca de 480. Algo assim, e no que diz respeito a essa seção, vamos definir a altura para ser conteúdo de abraço e vamos conferir o conteúdo do herói, onde vou mudar o preenchimento esquerdo e direito para 64 pixels. Isso vai se alinhar corretamente com este guia. Isso terá exatamente o mesmo espaço à esquerda e à direita. Esses dois serão os mesmos, mas também alinharão tudo à esquerda, assim, e isso garantirá que esteja alinhado à esquerda. Faz mais sentido assim em uma tela pequena para que tudo esteja bem alinhado à esquerda. Vamos também selecionar esses dois, alinhá-los à esquerda assim, e acho que se quisermos economizar um pouco mais de espaço, podemos alterar o preenchimento aqui para 64. Vai ser 64 ao redor. É realmente com você. Acho que ainda 96, parece bom porque esta é uma seção muito importante, e não quero que pareça muito amontoada, mas como eu disse, cabe a você. Esse é o herói. São mudanças muito, muito simples. Como você pode ver agora, se redimensionarmos mesmo para um tamanho muito pequeno, ele ainda parece muito bom. Vamos ver sobre isso, a descrição do menu de comida. Primeiro de tudo, vamos mudar para abraçar o conteúdo, encher o recipiente. Certifique-se de que mudamos os remendos aqui para 64. Isso é virado de cabeça para baixo novamente. Provavelmente algum bug na Figma. Vamos virar para trás, e deve ser isso. Para este, apenas mudamos o preenchimento. Em seguida. Vamos ver sobre o menu, e a maior mudança para o menu aqui será que vamos empilhar ou usaremos um único layout de coluna porque agora em duas colunas, como você pode ver, o texto é um pouco um pouco muito amontoado. É um pouco curto demais para uma legibilidade adequada. Vamos seguir em frente e fazer isso. Primeiro, selecionarei o menu de comida e vamos realmente mudar a distância entre os itens ou o espaçamento para 96 só para ser um pouco mais cauteloso com o espaço que estamos usando. Então, nos bifes, vamos também mudar isso para 96 e isso para 64, e depois nos pratos, observe que temos uma coluna e duas colunas. Bem, não precisamos mais disso, então vamos desagrupar, e vamos desagrupar a coluna 2 também. Agora, os pratos serão exibidos apenas um empilhado em cima do outro. Agora vamos realmente fazer algumas alterações aqui. Também devemos adicionar um preenchimento ao lado direito. Acho que temos um pouco distância demais entre os pratos. Que tal mudarmos para 64, algo assim. Isso parece muito bom. Podemos tentar complicar isso um pouco mais, criando espaçamentos separados entre o título do bife e o primeiro item. Mas acho que isso parece bem como está. Provavelmente vou redimensionar essa imagem para ser 480 porque ela era um pouco alta demais. Isso parece muito bom. Vamos fazer isso nas outras seções também. 96, espaçamento aqui, 64 e 64 preenchimento à esquerda e preenchimento à direita. Então também temos o conteúdo, vamos mudar isso e, em seguida, para os pratos, também temos a coluna 1 e a coluna 2. Vamos em frente e desagrupar e desagrupar também e, em seguida, debaixo da louça, vamos garantir que tudo esteja configurado para vertical. Como o conteúdo do pai. 64 pixels, preenchimento à direita. 64 pixels de distância entre eles e, em seguida, cada prato realmente precisa ir todo o comprimento. Por que não está fazendo isso? Vamos ver. Vamos mudar isso para 480. Hambúrgueres e sanduíches, foi aqui que aplicamos 64 e 64, e então o conteúdo não tem nenhum preenchimento. Isso está correto, e depois os pratos, é daí que o preenchimento extra estava vindo. Essa é a segunda seção do menu. Vamos fazer o mesmo pelos outros, exatamente a mesma coisa, 96, 64 e 64. Em seguida, pratos novamente, nós os temos em colunas, então vamos desagrupar a direção definida para vertical, abraçar o conteúdo 64 entre zero aqui, e deve ser isso para esta seção e, finalmente, para saladas, vamos abandonar as colunas. Quero selecionar o item principal. Vamos usar 96 lá e 64, e 64 aqui à direita, e vamos mudar essa imagem para 480 de altura. Nós mudamos este? Não, não fizemos. Vamos fazer isso agora, e acho que é sobre isso. Quase. Na verdade, estamos perdendo alguns desses separadores. Deixe-me voltar e ver exatamente o que estamos perdendo. Porque lembre-se quando estávamos usando colunas, o último elemento em uma coluna não tinha um separador embaixo dela. Obviamente, quando nos livramos das colunas, alguns desses elementos ficam sem um separador. Vamos apenas duplicar e posicionar o separador onde ele precisa. Vamos ver, preciso de outro aqui. Para quickies, precisamos de outra, e para saladas, precisamos de mais uma assim. Agora, na verdade, temos algum espaço extra aqui. Vamos ver o que isso se trata. Este é o menu de comida e está pronto para abraçar o conteúdo. Um dos conteúdos é muito grande. Vamos ver qual deles. Saladas? As saladas estão realmente configuradas para abraçar o conteúdo, então não é isso. Rapidinhas? Todos eles estão prontos para abraçar o conteúdo, mas ainda provavelmente estão em saladas. Vamos ver, sim, os pratos aqui. Altura fixa em vez do conteúdo do abraço. Então, vamos mudar isso e tudo está onde deveria estar. Há um erro de digitação aqui. Esse é o menu. Acabamos de passar de duas colunas em telas médias para uma coluna nas telas menores e também mudamos a altura das imagens e também brincamos com diferentes paddings ou espaçamentos entre elementos. Agora, vamos seguir em frente, estamos muito perto de terminar isso. A seção sobre. Aqui, na verdade, acho que não precisamos fazer nada. Manterei o mesmo tamanho de imagem, espaçamento está correto ou, na verdade, não, no conteúdo do herói, vamos mudar o preenchimento aqui de 128 para 64. Agora, está alinhando corretamente. Em seguida, vamos ver fotos do Instagram. Isso é um pouco mais complicado. Primeiro de tudo, vamos selecionar isso, alterar o preenchimento, e é aí que começamos, e então mudaremos a direção de horizontal para vertical. Vamos mudar a distribuição para embalada, alinhar tudo à esquerda. Vamos mudar para o conteúdo do abraço e vamos definir uma distância ou espaçamento entre itens de 64. Vamos também fazer esse botão com largura total , então preencha o contêiner. Vamos alinhar tudo no meio e estamos prontos para ir. Vamos também reduzir o espaço entre a galeria de fotos e o título. Em vez de 128, definiremos 96 e, em vez do layout de três colunas, que pode não ser utilizável em determinadas larguras, vamos fazer um layout de duas colunas. Mas, na verdade, este, ele deve ser configurado para preencher o contêiner assim. Layout de duas colunas para as fotos em vez de três colunas. Vamos ver como podemos fazer isso. Temos algumas imagens e elas estão organizadas em linhas. É bem simples. Só precisamos duplicar uma linha e simplesmente mover as imagens. Vou excluir, ou, na verdade, vou mover este da Linha 1 para a Linha 2, e vou excluir este e excluir este, e agora devemos ter imagens distintas. Agora, exclua este também, e agora devemos ser bons. Além disso, vamos alterar a altura dessas imagens para 240 pixels, assim. Este é um layout muito mais apropriado para uma tela pequena. Então, vamos passar para o contato. Vamos mudar o espaçamento aqui para 96. Isso é bom, vamos mudar o preenchimento para 64. Se você quiser, também pode adicionar 64 aqui. Se você não quer que o mapa fique em toda a largura, no meu caso, acho que vou ignorar isso. Além disso, vamos tornar o mapa um pouco menor 480, e vamos ver o que podemos fazer sobre esses dois elementos. Que tal movermos essa barra lateral para o topo aqui e vamos nos livrar desse preenchimento ali mesmo, e vamos definir seu dimensionamento para preencher o contêiner. Na verdade, vamos adicionar um preenchimento de 64 pixels à direita para que, quando o redimensionarmos ou redimensionarmos o pai, ainda temos algum espaço aqui no lado direito. Vamos garantir que o espaçamento esteja correto e está. Vamos realmente selecionar esse quadro e vamos mudar o espaçamento entre o ícone e o texto para algo um pouco melhor, como 32, assim. Então, temos o mapa e, em seguida, o formulário de contato. Vamos adicionar algum preenchimento à esquerda e à direita. Vamos mudar o espaçamento para 96, e agora que eu vejo, na verdade não precisamos de dois quadros aqui. Só precisamos ter certeza de que o espaçamento está correto, mas podemos subagrupar isso e apenas ter o único quadro para o qual definiremos como contêiner preenchido 64, preenchendo 64 novamente, e deve ser isso para o seção de contato e, finalmente, vamos ver sobre o rodapé e a newsletter. Primeiro de tudo, o rodapé deve ser configurado para preencher todo o contêiner, e vamos colocá-lo em um quadro para que eu possa adicionar algum preenchimento a ele, 64, 64. Vamos definir isso para preencher o contêiner e garantir que o texto esteja alinhado à esquerda e, em seguida, para o boletim informativo, vamos alterar o preenchimento superior e inferior para 96 e, em seguida, o lado do enquadramento, vamos alterá-lo para preencher o contêiner. Vamos adicionar um pouco de preenchimento aqui a 64, e vamos ver nosso texto. Ele preenche o contêiner, então isso é bom. Mas este, o formulário não. Então, que tal fazermos esse preenchimento do contêiner e , em seguida, vamos ver este a entrada também deve preencher o contêiner. O botão está definido para abraçar o conteúdo, então ele só será tão grande quanto o texto dentro dele, mas a entrada, pode crescer ou pode diminuir então vou definir isso como contêiner de preenchimento. Agora, se eu redimensionar a tela, esse é o comportamento que ela tem, que é exatamente o que queremos. Finalmente aqui no rodapé, temos algumas distâncias ou algum espaçamento que é um pouco grande demais , então vamos mudar isso para 96, e 96 para isso, e é isso. São todas as alterações de layout que farão na versão responsiva do site em telas pequenas. Vamos dar uma olhada mais rápida no que fizemos em comparação com as telas médias. Primeiro de tudo, removemos a barra superior onde, na verdade, substituímos seu conteúdo pelo logotipo e um ícone de menu. Nós nos livramos desses elementos, do endereço, dos ícones das mídias sociais e da navegação, mas os adicionaremos mais tarde de outra forma. Nós mesclamos esses elementos aqui para que o cabeçalho com a área do herói, alinhamos à esquerda praticamente todos os elementos na página. Também diminuímos o espaçamento entre itens em um nível global ou no nível superior de 176-128. Então também mudamos o menu um pouco. Passamos de duas colunas para os itens do menu para uma coluna. Também fizemos as imagens um pouco menores em altura, e também globalmente passamos de ter um espaçamento de 128 pixels entre os itens e a borda esquerda e direita para uma distância ou espaçamento de 64 pixels, e isso só permite que o conteúdo cresça um pouco mais horizontalmente, então ele ocupará normalmente um pouco menos de espaço verticalmente. Fizemos o mesmo para a seção sobre. Na seção de fotos do Instagram, na verdade, empilhamos o título e o botão de seguir, e migramos de um layout de três colunas para um layout de duas colunas para a galeria de fotos. Então, no contato, na verdade, movemos alguns elementos. Pegamos a barra lateral daqui e movemos para cima do mapa. Também fizemos com que o formulário de contato fosse de largura total e, em seguida, aplicamos algumas opções de redimensionamento inteligentes ao formulário de inscrição para que ele seja redimensionado automaticamente dependendo do tamanho da tela, e pronto. Agora, é a sua vez. Vá em frente e crie a versão responsiva para telas pequenas para que estejamos na mesma página. Agora, você acabou de ver que, ao mudar o layout, nós realmente nos livramos de alguns elementos muito importantes em nosso design, como o endereço, os ícones sociais e a navegação que é a grande. Então, precisamos de uma maneira de adicioná-los volta para que eles estejam acessíveis ao usuário. Fará isso com um menu de sobreposição e isso está chegando na próxima lição. 28. Design para pequenas telas: É incrível que você tenha chegado até aqui, Lição 27. Tem sido uma longa jornada, mas estamos quase no final dela. Tudo o que preciso fazer agora é criar o menu de sobreposição para as telas pequenas, e terminamos. Vamos seguir em frente e fazer isso. Esta será uma tarefa muito simples e o menu de sobreposição é basicamente um contêiner que será exibido quando clicarmos neste ícone Menu em telas pequenas porque ocultamos o navegação e todas essas informações, precisamos de uma maneira de colocá-la volta para que ela seja acessível ao usuário. Quando clicamos neste botão, simplesmente deslizaremos para baixo um contêiner que contém todas essas informações. Vamos criar um novo quadro aqui, não importa qual tamanho, apenas faça isso, eu não sei, talvez 600 pixels. Basta mantê-lo abaixo de 1.400 pixels. Então vamos nomear essas telas pequenas, menu modal/sobreposição. Vamos copiar a barra superior, vamos precisar disso. Vamos também aplicar um layout automático a esse quadro para que ele seja definido como conteúdo do Hug. Vamos remover o espaçamento lá. Então, o que precisamos exibir? Bem, precisamos basicamente desses. Precisamos dos ícones sociais , então vamos começar com eles. Também precisamos da navegação do menu, então copie isso e vamos colá-lo. A navegação deve ir primeiro, os ícones sociais a seguir, e estes estarão no final. Veja como vamos fazer isso. Primeiro de tudo, vamos selecionar esses três, devo dizer e “Shift A” para criar outro quadro. Vamos adicionar um espaçamento de 96 pixels entre eles. Vamos definir o preenchimento para 64, algo assim. Vamos definir o redimensionamento desse elemento como Contêiner de preenchimento. Em seguida, vamos selecionar o Menu, mudar sua direção para vertical e vamos defini-lo como Contêiner de preenchimento. Em seguida, vamos selecionar esses ícones. Na verdade, porque estamos projetando aqui para telas pequenas onde você provavelmente usará seu dedo para tocar em elementos, vamos aumentar o tamanho dos ícones para 32 por 32. Em seguida, com ele selecionado, vamos definir o redimensionamento para Contêiner de preenchimento. Vamos alterar a distribuição para Espaço entre eles para que eles sejam bem exibidos com uma quantidade igual de espaço entre eles. Finalmente, vamos selecionar esse bit vamos torná-lo vertical também, 32 pixels parecem muito bons, configurá-lo como 32 pixels parecem muito bons, Contêiner de preenchimento e deve ser isso. Não vamos esquecer de alterar o ícone aqui então, em vez do ícone do menu, vamos exibir um x. Voltando ao nosso ícone configurado, vamos ver, tenho um x aqui para fechar? Devemos e fazemos. Vamos pegar este x aqui e vamos colá-lo. Vamos garantir que nossa cor seja preta e também pareça um pouco menor em comparação com o ícone do menu, então vamos aumentar ligeiramente seu tamanho para 40 pixels, assim. Vamos remover isso e acho que devemos ser bons para ir. Vamos testar a capacidade de resposta se redimensionarmos isso, não, algo está errado. Isso deve ser definido como Contêiner de preenchimento. Agora ele está sendo exibido corretamente. Vamos ver, também eles devem ser definidos como Contêiner de preenchimento, isso também e o quadro pai. Agora eles também devem redimensionar, mas não o fazem o que está acontecendo aqui? Por que esses não são redimensionados? Vamos ver, Quadro 27, 64 pixels, Contêiner de preenchimento, então isso está correto. Este é o Quadro 3 e está definido como Contêiner de preenchimento. Temos um quadro adicional dentro, então vamos definir esse contêiner de preenchimento. Isso é bom. Agora tudo deve parecer do jeito que deveria. Esse é o menu de sobreposição, ele contém informações que são muito importantes para a usabilidade do nosso site, como a navegação. Ele só é acessível em telas pequenas quando clicamos no ícone Menu. Isso é realmente algo que muitas pessoas negligenciam quando estão projetando, eles só vão colocar este ícone do Menu aqui e enviarão seu design para o desenvolvedor, mas o desenvolvedor não sabe o que acontece quando clico neste ícone Menu porque se você não projetou o modelo, o menu de sobreposição, o que quer que você queira chamá-lo, o desenvolvedor não sabe o que colocar nele ou como ele deve se parecer. Então, quando você estiver criando versões responsivas para o seu site e estiver lidando com as telas pequenas, certifique-se de que você também está projetando para qualquer elemento que possa aparecer após uma interação do usuário como clicando em um botão, isso abrirá algum tipo de elementos, uma janela, um modal? Se isso acontecer, certifique-se de que seu design seja responsável por isso. Então vamos fazer uma recapitulação final para ver onde começamos e onde acabamos. Começamos com o wire-frame. Essa é apenas uma representação de baixa fidelidade do design. Em seguida, iniciamos o processo de design adicionando tipografia, algumas cores e, em seguida, criamos o design final para telas grandes, é o que você pode ver aqui. Então, é claro, tivemos que explicar telas menores e telas médias. Em cada um deles, fizemos várias mudanças. Movemos elementos, os tornamos menores, alteramos os tamanhos da fonte. Passamos de duas colunas para uma coluna. Passamos de layouts horizontais para layouts verticais e assim por diante e assim por diante. Ao fazer isso, estamos nos certificando de que nosso design fique ótimo em todos os tamanhos de tela. Bem parabéns, suponho que você terminado o design também e agora você tem um design completo de site de restaurante de uma página, juntamente com todas as adaptações necessárias para tamanhos de tela pequena e média. Trabalho bem feito e, como eu estava dizendo, tem sido uma longa jornada, mas também espero que seja muito informativo para você e que você tenha aprendido algo útil. Agora, por favor, confira a lição de conclusão para meus pensamentos finais e também um anúncio no qual você pode estar interessado. Vejo você lá. 29. A conclusão épica: Você terminou a aula, grandes parabéns e muito obrigado por ter a paciência de passar por 28 aulas. Agora, você pode estar se perguntando o que você deve fazer a seguir. Primeiro de tudo, você deve trabalhar no projeto da classe. Se você tem trabalhado ao meu lado enquanto está assistindo a aula, isso é incrível. Mas se você não o fez, acho que você realmente deveria fazer os projetos de classe, então assista novamente e tente seguir minha liderança, por assim dizer. Se eu estiver cuidando de outras seções no design, vá em frente e faça isso também até você pegar o jeito e ficar muito mais confortável trabalhando na Figma. A ideia aqui é apenas praticar. Em segundo lugar, encorajo você a publicar seu design na galeria de projetos de classe. Como você pode ver nas minhas outras aulas de design Figma, muitos alunos enviaram seu trabalho na galeria do projeto e eu ofereci feedback para quem quisesse isso. Eu acho que essa é uma ótima maneira de aprender porque você começa a praticar e imediatamente sabe o que pode melhorar. Também havia projetos que exigiam muito pouco ou nenhum feedback de mim. Eles eram tão bons e eu não estou falando de cópias exatas do meu trabalho. Estou me referindo a projetos que foram baseados no meu trabalho, mas eles tinham seu próprio estilo o que me deixou super feliz de ver. Eles também me mostraram uma maneira diferente de olhar para um projeto como este, o que foi fantástico para mim como instrutor. Eu recomendo que você faça o mesmo. Vá em frente e publique seu projeto, mesmo que você não sinta que é bom o suficiente, mesmo que você seja apenas um iniciante porque somos todos iniciantes em algum momento. Agora, eu gostaria de convidá-lo para conferir minhas outras aulas aqui no Skillshare e, no momento desta gravação, eu realmente tenho outra classe de design Figma publicada. É semelhante a este, mas mais curto, e também abrange um tipo diferente de design. Você pode tornar uma landing page mais precisa. Eu usei um fluxo de trabalho um pouco diferente nesse então, se você quiser explorar mais opções sobre como trabalhar de forma mais eficiente, talvez queira conferir essa classe também. Além disso, dependendo de quando você estiver assistindo a este vídeo, talvez eu tenha ainda mais aulas publicadas no Skillshare então não deixe de conferir meu perfil para ver tudo o que publiquei. Agora, durante esta aula, estive te provocando um pouco sobre um anúncio que eu ia fazer na conclusão, então aqui está. Minha próxima aula do Skillshare será sobre codificar o site do restaurante birdhouse que projetamos nesta classe. Esta aula é sobre design. O próximo será sobre codificação desse design usando HTML, CSS e JavaScript. Legal. Espero que você esteja tão animado quanto eu com a nova classe e compartilhe mais detalhes medida que me aproximar de concluí-la. Certifique-se de me seguir aqui no Skillshare, bem como nas minhas mídias sociais. Com isso dito, é hora de agradecer muito por assistir esta aula e estou ansioso para vê-lo na próxima. Tome cuidado e esteja seguro. Já estou saindo.