Como projetar e prototipar um cabeçalho de site responsivo no Figma (passo a passo)

1. Boas-vindas ao curso: O cabeçalho do site é uma das primeiras coisas que as pessoas veem quando acessam um site. É onde eles encontram seu logotipo, sua navegação principal e, muitas vezes, a chamada à ação mais importante. É também um desses elementos que todo designer precisa criar em algum momento, e é exatamente isso que faremos nesta breve aula. todos bem-vindos. Eu sou Adi. E hoje, estamos projetando e criando protótipos um cabeçalho de site responsivo que parece ótimo e também funciona perfeitamente em Abordaremos as melhores práticas, trabalhar com layouts diferentes para vários pontos de interrupção e usar o layout automático para que tudo se adapte bem Também usaremos o Figma make para criar um protótipo interativo do cabeçalho E para nossa chamada à ação, usarei o botão reutilizável inteligente de uma das minhas aulas anteriores Então, se você quiser aprender como fazer isso do zero, há um link para você na descrição da aula. Não precisa de habilidades avançadas de Figma para isso, um arquivo novo, cerca de 15 minutos do seu tempo, e nós o criaremos passo a passo Obviamente, também há um projeto de classe, para que você possa colocar essas ideias em prática. Então, vamos abrir o Figma e começar. 2. Entendendo cabeçalhos eficazes: Antes de começarmos a criar nosso próprio cabeçalho, vamos dar uma olhada rápida em alguns exemplos do mundo real e detalhar os quatro princípios fundamentais que tornam um cabeçalho bonito e eficaz. Primeiro, uma marca clara. Em um ótimo cabeçalho, o logotipo fica instantaneamente visível, geralmente no canto superior esquerdo. E isso não é apenas tradição, é o que os usuários esperam, e isso os ajuda a reconhecer instantaneamente a marca. Em seguida, navegação simples. Você deve sempre manter o número de links gerenciável. Agrupe itens relacionados e certifique-se de que o texto seja claro e fácil de ler. Muitos links e o cabeçalho parece confuso, poucos, e os visitantes têm dificuldade em encontrar o que precisam O objetivo é um equilíbrio entre os dois. Então, temos uma ação de chamada forte, algo que se destaca visualmente, geralmente um botão em uma cor contrastante Esse é o elemento que direciona as pessoas a darem o próximo passo, seja se inscrevendo, fazendo uma compra ou entrando em contato com você Finalmente, design otimizado para dispositivos móveis. Um cabeçalho deve funcionar perfeitamente em todos os tamanhos de tela. No celular, isso geralmente significa mudar para um menu de hambúrguer e ajustar o espaçamento para que o design permaneça limpo Se você mantiver esses quatro princípios em mente, marca clara, uma navegação simples, uma forte ação fria e um design otimizado para dispositivos móveis, você estará no caminho certo para criar cabeçalhos que não só tenham uma ótima aparência, mas também Ótimo. Então, vamos pegar essas ideias e começar a criar nosso próprio cabeçalho responsivo no Figma 3. Como criar o cabeçalho do site para desktop: Esse é o arquivo inicial que você pode baixar clicando nos links na descrição da classe e contém algumas instruções sobre o que você precisa para fazer com alguns ativos do projeto. Isso é basicamente uma lista de componentes que você pode usar. maioria deles foi emprestada da minha aula anterior sobre a criação do componente SMR. E fiz alguns pequenos ajustes no componente do botão. Basicamente, mudei a variante secundária e também adicionei duas outras variantes que são basicamente versões menores das duas primeiras. E então temos um logotipo fictício que podemos usar em nosso design Além disso, incluí alguns layouts predefinidos. Temos um layout para desktop com cerca de 1.400 pixels de largura e, em seguida, dois para dispositivos móveis com 400 pixels de largura E na versão para desktop, temos o conteúdo que precisamos incluir. Então, vamos direto ao assunto. Vou começar substituindo o logotipo. Então, vou copiar esse componente. Vou selecionar o espaço reservado aqui e pressionar Control Shift R para fazer a substituição Ou se você estiver em um Mac, você pode usar o Command Shift R. E, imediatamente, vou para a seção de layout. Vou verificar a proporção do bloqueio e vou alterar a altura para 48 pixels. A seguir, temos esses links. Então, como estamos projetando um cabeçalho muito simples e direto, vamos manter nossa tipografia agradável e simples, muito legível, e vamos Por padrão, eles estão usando 16 pixels interregulares. Vamos mudar um pouco as coisas. Vou usar o medium porque quero que esses links se destaquem um pouco mais e vou reduzir o tamanho da fonte para 14 pixels e usar 140% da altura da linha Além disso, com esses selecionados, pressionarei Shift A para adicioná-los ao seu próprio quadro de layout automático. Vamos fazer isso de novo, Shift A, e vou definir 32 pixels como a lacuna entre os itens, desse jeito. E vou me certificar de que tudo esteja alinhado ao meio, assim Por fim, vamos selecionar o espaço reservado para iniciar o teste gratuito. Precisamos substituir isso por um botão. Vou usar a pequena variante primária desse componente de botão. Então copie esse controle Shift R novamente para substituí-lo. E aqui, vou mudar o rótulo do botão para iniciar o teste gratuito e vou usar uma seta para a direita como meu ícone. Agora, vamos pegar esses três elementos e pressionar Shift A para adicioná-los ao seu próprio quadro de layout automático. Então, no inspetor, vou alinhar tudo ao meio, assim, e gostaria que esse cabeçalho abrangesse toda a largura disponível da minha moldura principal Além disso, eu queria poder adaptar seu tamanho, mudar seu tamanho dependendo do tamanho de seu pai. Então, quando o pai fica menor, o cabeçalho também fica menor. Podemos fazer isso com o layout automático. Então, vou selecionar a moldura da área e adicionar layout automático a ela assim. E vou apenas redefinir esses padrões, o espaçamento, o preenchimento Vou colocar tudo em zero. Agora, com minha área de trabalho selecionada, vou aumentar sua altura para que possamos ver o que está acontecendo aqui. E vou selecionar meu cabeçalho. E vou me certificar que o tamanho aqui esteja definido para encher o recipiente Agora, vamos mudar algumas coisas aqui. Em primeiro lugar, gostaria que minha navegação e meu botão fossem agrupados Na verdade, vou pegar o botão, recortá-lo, controlar ou comandar X e, em seguida, selecionar um dos elementos dentro da navegação e colá-lo lá. Isso basicamente moverá esse elemento dentro do meu quadro de navegação que tem um layout automático aplicado a ele. E isso garante que eu tenha o mesmo espaçamento de 32 pixels entre o menu e a ação chamada Em seguida, vou selecionar o espaço entre os itens aqui e vou mudar isso de um valor fixo para automático, assim. E isso vai me permitir agora redimensionar a área de trabalho. Enquadre e o cabeçalho será redimensionado junto com ele. Vamos fazer alguns retoques finais. Vamos adicionar algum espaço ao redor do cabeçalho. Então, vou adicionar 64 pixels de preenchimento horizontal, 20 pixels, preenchimento E vamos tornar isso um pouco mais visível. Então, na área de preenchimento, vou adicionar uma cor de preenchimento branca. E também vou adicionar um traço. Então deixe-me te mostrar isso. Traço que será E quatro, e6e7, e eu só vou aplicar isso Isso criará uma boa separação entre o fundo da nossa página, que é cinza muito claro, e o cabeçalho, que é apenas branco. Por fim, selecione o cabeçalho e substituirei o preto puro que estou usando para o texto e o logotipo por 27292 A, que é um cinza mais escuro E aí está nosso design de cabeçalho finalizado para o desktop. Agora, a razão pela qual precisamos tornar um cabeçalho responsivo é porque nem todo mundo navega na Internet em uma tela de desktop do mesmo tamanho Então, se as pessoas navegarem em um dispositivo móvel com uma tela menor, eventualmente, isso vai acontecer. Nossa tela ficará cada vez menor e menor e os elementos começarão a se sobrepor e os layouts começarão a se quebrar É por isso que precisamos criar um layout diferente para as telas menores. Vamos fazer isso na próxima lição. 4. Como criar o cabeçalho do site para tablet e celular: Deixe-me começar mostrando uma das maneiras mais fáceis de criar um cabeçalho responsivo ou navegação responsiva Então, estamos no site cleanhot.com, e eles têm um cabeçalho muito simples, muito parecido com o nosso, com um logotipo, uma navegação e, em seguida, uma chamada Então veja o que acontece quando redimensionamos isso. Certo? A navegação e a ação fria desaparecem e, em vez disso, temos esse botão de menu que, se clicarmos, basicamente nos mostrará o menu que acabou de desaparecer. Então, podemos clicar aqui para ocultá-lo. Podemos clicar para mostrar. E quando vemos isso em uma tela maior, temos a experiência completa. Então é isso que precisamos criar basicamente. Agora, voltando ao Figma, vamos começar copiando nosso elemento de cabeçalho e indo para o quadro fechado móvel, que tem 400 pixels de largura E isso ocorre mais na área das telas móveis em termos de largura da tela. É claro que existem telas maiores do que isso, algumas são ainda menores do que isso, mas 400 pixels é uma boa quantidade. Então, se colarmos isso, você notará que as coisas começam a se sobrepor Obviamente, não queremos isso. Então, vamos realmente selecionar esse quadro que tem a navegação e a ação de culto, e vamos simplesmente excluí-lo. Agora, vou voltar aos meus botões. Vou pegar um desses pequenos botões secundários, copiar, selecionar o cabeçalho e colar. Isso vai colá-lo . E vou mudar o ícone aqui para um ícone de menu de hambúrguer E vou selecionar o rótulo e pressionar delete. Além disso, vou selecionar esse botão e definir sua largura para 44 pixels, exatamente a mesma que a altura, e vou mudar o alinhamento para o meio Em seguida, selecione o cabeçalho e eu vou mudar o preenchimento lateral ou horizontal para 24 pixels, porque em dispositivos móveis, precisamos preservar o máximo de espaço possível Portanto, precisamos tornar as coisas um pouco mais compactas do que faríamos no desktop. Também vou mudar o preenchimento vertical para 16 pixels desse jeito A ideia está no celular, esse elemento é substituído por esse botão. Então, quando tocamos nesse botão, precisamos mostrar essa navegação e a chamada ação. Vamos fazer isso no próximo quadro aqui. Copie isso, cole. Quando o botão aqui é tocado ou clicado, queremos mudar o ícone do ícone do menu para um ícone de fechamento exatamente assim Porque queremos dizer aos usuários que, ok, você tocou nesse botão, ação bem-sucedida, e também vamos alterar seu conteúdo para eles saibam que da próxima vez que tocarem nele, fecharão o menu Então, agora vamos criar o menu suspenso real, certo? Então, vamos copiar isso. Vamos colá-lo e fazer algumas alterações nele. Primeiro, vamos mudar a direção para vertical, para que todos os itens sejam exibidos verticalmente, dessa forma, e depois adicionarei uma cor de preenchimento branca Vou configurar, deixe-me realmente mudar isso um pouco. Vou definir a largura para encher o recipiente, forma que ela atinja toda a largura da moldura principal, e vamos alinhar tudo na parte superior e central desse jeito E, finalmente, vou adicionar cerca de 24 pixels, preenchimento horizontal e 32 pixels De um acolchoamento vertical tão superior quanto inferior. Também vou copiar a cor do traçado que usei aqui e adicioná-la a esse elemento. E vamos nos certificar de que estamos aplicando isso apenas na parte inferior do elemento, assim. Então esse é o fluxo, basicamente. Vamos do desktop, onde nosso cabeçalho fica assim. Quando a área de trabalho fica muito pequena para acomodar todos esses elementos, mudamos para a visualização móvel onde inicialmente esse menu está oculto, mas podemos acessá-lo clicando ou tocando no botão do menu Então, isso é legal e, do ponto de vista do design, nosso trabalho está meio que concluído, mas podemos dar um passo adiante e realmente criar um protótipo funcional disso Deixe-me mostrar como na próxima lição. 5. Prototipagem do menu móvel com Figma Make: Agora que criamos nosso layout de cabeçalho móvel, vamos torná-lo interativo e prototipar o menu Hamburger, para que ele abra e feche usando E caso você não saiba, Figma make é uma nova ferramenta AI Power FiGMA que permite aos usuários criar protótipos funcionais, aplicativos e sites da web a partir de instruções de texto e sites da web a partir de instruções de texto E é muito fácil começar a usar o Figma make. Tudo o que você precisa fazer é clicar no ícone Figma aqui, ir para Arquivo Novo e escolher M. E, sem mais nem menos, você está pronto para começar A primeira coisa que queremos fazer é copiar e colar os quadros Figma no make para que a IA saiba o que construir Então, vamos ir e voltar. Então selecione a área de trabalho, copie e, em seguida, entre aqui na parte inferior e cole, e faremos o mesmo com o celular. Então copie isso, cole e, em seguida, abra o celular , copie e cole. E então você tem que descrever sua ideia. O que você quer que a IA faça com isso? Então, eu vou dizer, crie um tipo P do cabeçalho responsivo E eu vou pressionar Enter e pronto. Eu dei o comando para a IA. Agora, está pensando. Ele faz algum raciocínio, você sabe, determinando o que precisa fazer E em breve, começará a ser construído. Então aí está. Ele criou nosso cabeçalho aqui. Eu adicionei algum conteúdo extra aqui do qual, você sabe, sempre podemos nos livrar. Mas, essencialmente, o que nos interessa é a funcionalidade, certo? Então, vou abrir a visualização móvel e, como você pode ver, quando eu redimensiono isso, sim, quando chego a esse ponto, ela muda para a visualização móvel E quando clicamos nesse ícone, ele me mostra o design móvel que eu criei. Clique nele para fechar, redimensionar esse backup e, se houver alguma alteração que você queira fazer em algum momento, solicite alterações à IA Por exemplo, posso dizer que ele mude para a visualização móvel mais cedo. Eu entro e agora ele está fazendo a mesma coisa. Mais uma vez, isso mudará algumas coisas no código e basicamente fará o que você pede normalmente. Ok, a versão dois agora está completa e, quando redimensionamos, você pode ver que a mudança acontece muito mais cedo, que é exatamente o que eu queria, e ainda é um protótipo totalmente funcional Tudo bem. Agora é a sua vez. Seu projeto é criar o cabeçalho do seu próprio site responsivo no FIGMA Ou, se preferir, você pode recriar o que eu construí nesta classe Para o botão CTA, você pode criar o seu próprio ou usar o que eu forneci Se você está curioso sobre como eu crio esse botão inteligente do zero, confira minha outra aula do Skillshare Há um link para você na descrição, ou você pode navegar no meu perfil para ver todas as minhas aulas de design. Pronto, compartilhe o design do cabeçalho na galeria de projetos da turma. Eu adoraria ver o que você inventaria. Ok, obrigado por assistir. Feliz design, e nos vemos na próxima aula. Tchau por enquanto.