Crie um site de portfólio simples no Figma

1. Boas-vindas: Ei, estou tão feliz que você esteja aqui. Sou Viros e sou designer de UX trabalhando na Deloit. Você já quis criar um site de portfólio que não só tivesse uma boa aparência, mas que levasse muito menos tempo? Bem, se isso é algo que você está procurando, então eu acho que esta aula é a combinação perfeita para você. Nesta aula, usaremos Figma para criar um site de portfólio de duas páginas O design será muito simples e eu vou explicar tudo o que você precisa para projetá-lo. Vamos abordar o básico do FiGMA e prosseguiremos com o design das diferentes páginas Criaremos uma página inicial e, em seguida, criaremos uma página sobre mim. O design será simples, mas com uma aparência muito profissional , e levará muito menos tempo. Se isso é algo para o qual você está pronto, nos vemos na aula. Muito obrigado 2. Introdução ao Figma: Oi, aí. Olá, bem-vindo à aula e espero que você goste desta aula. Então, o que vamos aprender é como criar um site de portfólio minimalista e bonito. Você pode ser alguém que já é designer, quer criar um site de portfólio ou alguém que está apenas começando a se dedicar ao design ou design de coisas. De qualquer forma, precisará de um bom site de portfólio. Neste tutorial ou nesta aula, vamos fazer exatamente isso. Quem sou eu? Bem, meu nome é Perros e sou designer sênior de UX Eu trabalho na Deloit na Índia, Bangalore, e faço design há mais de quatro Comecei como designer gráfico e lentamente mudei para o design de UX. Gosto muito de trabalhar em designs mínimos, mas ao mesmo tempo muito utilizáveis Para esta aula de design, não haverá muitos recursos, mas será um design muito limpo e minimalista mas será um design muito limpo e Vamos começar. Eu vou sair do caminho. Talvez eu me torne um pouco menor e coloque isso aqui. Então, o que você vê na tela é FIGMA. Então, quando você se inscreve pela primeira vez no FIGMA, deixe-me dizer o que é FIGMA FIGMA é um software de design feito especificamente para design de UX ou não para design de UX, mas para design de interface de usuário usando design de interface As pessoas que trabalham com designs de interface são chamadas de designer de interface ou designer de UX. Isso é para alguém que é muito novo e não conhece a terminologia Para pessoas que já são experientes, por favor, tenham paciência comigo. Então, quando você inicia o FiGMA, você vê algo assim No botão home, ao clicar nele, você pode ter essa página totalmente em branco se estiver iniciando o InFima pela primeira vez Eu tenho muitas coisas acontecendo aqui. Mas ao clicar nesse design, você verá que Figma criará um novo arquivo de design aqui, chamado Untitle Eu já iniciei um arquivo que fazia o nome do site do portfólio. Se você quiser alterar o nome, basta clicar duas vezes e dar qualquer nome a ele. Por enquanto, vou apenas desfazer. Presumo que você seja novo Figma e vou apenas orientá-lo em algumas ferramentas básicas do Figma para que comecemos esta aula pensando em todos Mesmo se você for novo, você pode acompanhar. Veja, Figma tem três, quatro caminhos diferentes. A parte superior é onde estão nossos arquivos. Você pode ver que o arquivo de trabalho atual é este, que está selecionando. Esse é outro arquivo. Você pode abrir vários arquivos diferentes aqui. Além disso, se você quiser ir para a Página Inicial, basta clicar em Página Inicial. No lado esquerdo, você tem um painel onde você tem um arquivo interno, você tem páginas, então você pode ter várias páginas e você pode criar em várias páginas dentro de um arquivo Então, agora estamos na primeira página e, dentro da página, você também pode ter várias camadas em andamento. Então, quando começarmos a projetar, você verá essas camadas começarem a aparecer. Então, no lado direito, você tem poucas ferramentas. Portanto, esse painel é muito dinâmico e basicamente muda com base em qualquer ferramenta que você esteja usando no momento. E na parte inferior, temos a barra de ferramentas. No momento, o que temos é nossa ferramenta de movimento selecionada, e essa é aquela seta apontando e é usada para mover coisas aqui e ali. Temos duas outras ferramentas lá dentro. Então, onde quer que você veja essa divisa ou essa seta, significa que ela tem ferramentas ocultas dentro dela, mas vamos manter essa introdução muito curta e veremos apenas as ferramentas básicas e mais úteis que usaremos no que usaremos A primeira é, obviamente, nossa ferramenta de movimentação. Usaremos isso extensivamente para mover coisas aqui e ali Então temos a ferramenta de moldura. A ferramenta de moldura é como uma caixa delimitadora ou uma prancheta onde você cria uma moldura de determinado tamanho e, dentro dessa moldura, você É aqui que entram os diferentes tamanhos de tela. Você cria uma moldura para desktop, cria uma moldura para design móvel e, basicamente, é apenas um contêiner com design contínuo Então você tem uma ferramenta de fita e uma ferramenta de forma dentro dela, você tem muitas formas diferentes, linha retangular, seta, elipse, estrela, polígono, etc Então você tem essa ferramenta de caneta que você não vai usar muito. Se você não vai desenhar à mão gráficos vetoriais, acho que não os usará. Se você não vai usar caneta, há uma chance mínima de usar lápis. Não vamos falar sobre isso. A próxima ferramenta que vamos usar extensivamente é nossa ferramenta de texto A interface do usuário é basicamente duas coisas. Temos formas diferentes e, em seguida, temos texto. Esses dois se fundem para criar um design. Você pode dizer que isso é muito básico. Isso nem é correto, mas é uma definição muito Se você observar qualquer design, verá que há muitas formas, gráficos e textos. Basicamente, não é a definição, mas, mais ou menos, estou apenas tentando facilitar as coisas. Então você tem uma ferramenta comum. A ferramenta comum basicamente entra em ação quando estamos trabalhando com outra pessoa e ela pode fazer comentários sobre nosso design e, em seguida, podemos responder a esse comentário. Perdoe-me. Basicamente, é isso. Esse é o básico do Figma. Então, vamos demonstrar uma coisa. Vou até a moldura e, ao clicar na moldura, você vê que o lado direito acabou de mudar. Você tem diferentes predefinições pré-construídas e vamos usar o dektop Quando eu clico em Deck Stop, você vê uma moldura aparecer e agora você pode movê-la usando a ferramenta de movimentação. Vamos ver o que podemos fazer agora. Agora que temos a moldura, podemos ver que muitas opções diferentes estão aqui, quais abordaremos nos próximos capítulos Então temos o preenchimento. O preenchimento é basicamente a cor da moldura. Muito fácil. Preencher. Qual cor você deseja preencher. Fácil, fácil. Então, temos uma cor branca e, dentro dela, podemos fazer um retângulo Usando nossa ferramenta de forma, você pode mover esse retângulo. Se você quiser fazer uma elipse, você pode fazer uma elipse. Quando você inicia a elipse, vê que o lúpulo não era perfeitamente redondo Está indo a todos os lugares. É pop grátis. Mas se você pressionar a tecla Shift, agora ela está se movendo na proporção adequada. Então, agora está corrigido. Quero dizer, não está deformando. É assim que você registra a proporção. Agora, se você clicar aqui, verá formas ou coisas diferentes, teremos opções diferentes no painel direito. Agora vamos também inserir um texto. E você pode aumentar esse texto. Então, sim, esses são os princípios básicos do FIC MA. E você verá que, à medida que avançamos e progredimos, você começará a aprender todas essas opções , todas essas ferramentas, e será divertido. Confie em mim Então, sim, nos vemos no próximo capítulo e começaremos. Ok. 3. Como criar a página inicial parte 1: Ei, bem-vindo novamente. Então, o que vamos fazer agora é começar com a primeira página. Então, como eu disse, este será um site de portfólio mínimo muito simples. E vamos supor, vamos fazer alguma suposição. Então, vamos começar por aqui. Então, para quem estamos criando este site. Então, o nome é, digamos, John Doe. Esse é um nome muito comum, nome espaço reservado que usamos e qual é o trabalho dessa pessoa Digamos que, uh, designer, devemos levar designer ou fotógrafo. Acho que se como e o que essa pessoa faz moldará a aparência do portfólio porque se ele for alguém que faz muitas fotografias, o portfólio será muito dominado por imagens Muitas imagens em tamanho real, mas se for, digamos, um designer de interface de usuário, estará em telas e no design de interfaces junto com muito texto explicando o processo de design. O que devemos tomar? Vamos ver, por exemplo, que ele é designer de interface do usuário. E também mostraremos alguns dos projetos. Para projetos, usaremos apenas imagens de espaço reservado de talvez dribles ou B mãos. Não vou usar minhas próprias imagens porque poucas delas são protegidas por direitos autorais e algumas delas estão sob NDA Então, eu não quero ter nenhum problema legal. Então, sim, acho que isso seria suficiente. Então, vamos começar agora. Antes de tudo, o que vamos fazer também é ensinar como criar páginas. Esta é nossa primeira página. Se eu clicar duas vezes, posso chamá-la de introdução Então, vamos manter esta página como está e clicar no ícone de adição. O que isso adicionará é adicionar outra página, que é a página dois, e podemos dizer design, sim, vamos dar a ela o nome de design. Vamos usar nossa ferramenta de moldura e fazer nosso dex de moldura. Esse é o primeiro passo que estará lá. E vamos falar sobre o site. Então, site do portfólio, o que estamos realmente tentando fazer. Estamos tentando transmitir quem somos, o que fazemos e mostrar o que já fizemos E a maneira como fazemos isso é usando uma configuração muito básica de um site, que é nossa barra de navegação, depois o herói principal ou a área de exibição e, em seguida, o rodapé Vai ser muito básico, muito simples. Qualquer site, qualquer site pequeno e bom que você veja, na verdade, segue o mesmo caminho. Então, teremos o Navbar. Então, vamos começar a bloquear os detalhes. Isso vai ser, digamos, Navbar. E se você apenas pressionar R, ele mudará para retângulo Isso é o que eu fiz agora. Este é o nosso NAB. Vamos dar a esse NAB uma cor diferente. Depois, temos outra, que é a introdução básica do nosso herói, você quiser chamá-la, então você tem essa área onde está mostrando algumas coisas Vamos dar uma cor mais escura. O que eu fiz agora foi apenas duplicá-lo e como você faz isso rapidamente é clicar e pressionar Alt Estou em uma máquina com janela, então Alt esqueci o que é equivalente a Alt em um Mac ou acho que não é comando, desculpe, controle é para comando Eu simplesmente esqueci. Qualquer que seja o substituto da matemática, por favor, use-o. Se eu segurar a tecla Alt e clicar e arrastar, você verá que a seta dupla significa que está sendo duplicada, e isso será um rodapé Faça disso um rodapé. E isso lhe dá uma cor diferente. Temos o pensamento básico de, marcamos o básico de onde as coisas estarão. Sem perturbar isso e vou copiar isso. Você também pode usar os atalhos Control C, Control V, e ele simplesmente copiará , colará e fará uma cópia duplicada Agora vamos remover esses blocos e começar a colocar um guia. Você coloca um guia e vem aqui e clica no guia de layout. No momento em que você clicar, ele fornecerá muitas notas, uma grade muito pequena, mas você precisará ir para as colunas. E uma vez que você tenha colunas, você pode ver que pode usar Se você estiver familiarizado com o sistema de grade, você pode usar essas 12 colunas, o que quiser usar. Mas vamos manter as coisas muito simples. Vamos escolher um, que está meio cheio. Então daremos alguma margem. A margem é, uh, os espaços, fora de onde você quer trabalhar, basicamente. Você pode dar uma olhada no Google, mas estou apenas tentando simplificar. Não vou entrar em detalhes absolutos, qual é a definição correta. Você pode simplesmente ver todas essas coisas no Google. Apenas saiba qual é o foco desta aula para que você comece a criar termos e definições que você sempre possa aprender. Mas projetar não há substituto para o design, então você precisa projetar design de design. Então, vamos dar a ele 32 pixels. Então, em muitos designs, você verá pessoas usando 32, 16, oito. Então, basicamente, para manter as coisas consistentes, usamos múltiplos de, você sabe, quatro, quatro unidades são quatro, quatro em 28, quatro em três, 12, quatro em 416 É por isso que usamos 16, 24 e outros enfeites. A calha é a lacuna entre duas colunas. Então, no momento, ele não está aparecendo porque temos apenas uma coluna, e é por isso que não temos uma sarjeta Mas se você quiser mudar isso, aparecerá uma sarjeta Digamos que temos dois. Agora você vê que temos uma medianiz de 20 pixels e se aumentarmos isso, isso também Agora que temos nossa tela definida, vamos começar projetando a barra de navegação O que vem na barra de navegação, na barra de navegação, é simplesmente seu logotipo e quaisquer links importantes para os quais você deseja que o usuário navegue no site Para um site de portfólio, isso se traduz na primeira coisa que você terá é seu nome Para o site do seu portfólio, a identidade é basicamente o seu nome. Então, podemos ter links sobre você. Também podemos ter links sobre onde entrar em contato com você, se você tiver um LinkedIn, blá, blá, blá, o que quiser adicionar, você pode começar Vamos começar com o logotipo. Por aqui, vou colocar o logotipo de forma muito simples. Vai ser um texto muito simples, John Doe, vamos colocá-lo aqui Agora, o que podemos fazer é dar uma fonte diferente. Mas agora eu vou dizer que gosto dessa fonte, na verdade. Na verdade, gosto muito dessa fonte, mas você também pode começar com o Inter Inter é uma fonte malvada, é uma ótima fonte. Eu adoro isso. E então você também pode brincar com o peso e o peso da fonte. Então, vamos dar um pouco de variedade. Metade do nome você pode ter em negrito e depois a outra metade nós podemos ter em negrito. Digamos que. Então, também podemos ajustar o espaçamento. Isso está parecendo muito bom. Se você quiser verificar o espaçamento, basta selecionar o item, pressionar Alt e mover o c de onde deseja ver o espaçamento e ele mostrará que é 57 Vamos fazer com que seja 64 porque é múltiplo de quatro ou oito, o que você quiser fazer Sim. John Doe, temos nosso logotipo ou a primeira coisa do mapa Vamos apenas fazer alguns links. Sobre mim ou sobre, você pode simplesmente escrever sobre. Vamos fazer um tratamento mais leve, e isso não vai ser tão grande. Acho que 24, acho que 32 foi. E também, vamos manter isso em zero sobre mim ou talvez possamos diminuí-lo um pouco mais e mudá-lo para o normal Acho que parece bom porque não está muito alto, mas, ao mesmo tempo, não está ficando escondido. Tudo o que estamos fazendo é encontrar um equilíbrio visual entre tudo. Em seguida, basta copiar e colar isso e entrar em contato. Agora, vamos verificar o espaçamento, clique aqui, pressione e depois passe o mouse sobre isso e você pode simplesmente se mover e ver diferentes Então, basicamente, agora temos a leitura do NaBBA. Você pode jogar no suporte do protótipo. Você pode ver como fica. Essa é a opção de apresentação e abrirá a apresentação e basicamente mostrará como tudo isso se parece, o que você projetou até agora. Isso está parecendo bom. Só acho que precisamos de mais espaçamento dos dois lados. Vamos fazer com que isso seja 48. Agora, quando voltarmos, está tudo bem. Também podemos tentar alinhá-lo com isso. Então, já posicionamos isso e vamos ver como fica agora Isso parece bom. Então, agora podemos seguir em frente e começar a projetar o resto da página. 4. Como criar a página inicial parte 2: Então, vamos colocar algumas informações ou uma introdução sobre a pessoa. Vamos dizer oi. Sou designer de UI Qx e trabalho no Google. Google. Eu desenho interfaces que são divertidas e prazerosas de usar e facilitam a vida das pessoas. Então, escrevemos uma introdução de um litro sobre a pessoa, vamos ver quanto e é assim que fica Nada mal. Parece bom. Agora que usamos o nome da empresa Google. Vamos também colocar o logotipo do Google. Quero dizer, é adicionar um pequeno toque. Então, essas pequenas coisas farão muita diferença. Logotipo do Google SIG. Estoura alguma coisa. Agora estamos aqui. Vamos usar esse logotipo e acabei de copiar e colar aqui. Agora, você pode ver, quero dizer, isso está adicionando um pequeno toque de cor. Vamos apenas alinhá-lo. E se pudermos torná-lo maior, perfeito. Agora, esse é um arranjo muito básico, mas vamos brincar com ele e tentar ver como podemos realmente fazer esse bastão em um lugar onde pareça, quero dizer, não pareça estranho Neste momento, há muitas coisas acontecendo aqui. Esse logotipo e esse logotipo são muito conflitantes. Então, vamos tentar remover isso e criar algum espaço aqui. Que tal movermos tudo para baixo ou para cima e tornarmos isso um pouco mais pequeno e depois colocá-lo aqui. Agora, você veria que isso parece muito bom e não está fora de lugar. Mamãe. Perfeito. Então, isso parece bom. Agora, vamos também. Sim, isso parece melhor. O design de UOI consiste basicamente em mover coisas até você sentir que faz sentido ou parece bom Basicamente, nós, como designers passamos muito tempo movendo coisas aqui e ali até que tudo faça sentido. Nós vamos e voltamos, vendo o que fizemos e como está. É divertido. F. Vamos mantê-la em duas linhas e agrupá-la Que grupo é? Se eu simplesmente mover isso, você verá que são duas coisas diferentes. Se eu quiser mover tudo de uma vez, basta arrastar e selecionar tudo e pressionar Control G. Isso agrupará essas duas coisas dentro de um grupo. Agora, quando eu movo isso, tudo. Vamos nos mover juntos. Você vê? 128 está bem. Vamos sair do caminho. Isso é bom. Agora vamos começar a criar as peças do portfólio e como vamos fazer. Primeiro, vamos começar colocando alguns blocos. Dois blocos, podemos colocar dois blocos, podemos selecionar os dois e torná-los em tamanho real. Agora que colocamos os blocos onde queremos que as peças do portfólio fiquem. Vamos pegar alguns designs do Dibble ou não sei. Talvez usemos, vamos usar o que você diz, Unsplash Quando vamos aos plug-ins, você pode ver nos plug-ins que você obtém o Unsplash. Como você obtém isso, ou seja, você pode gerenciar plug-ins e simplesmente adicionar um splash lá gerenciar plug-ins e simplesmente adicionar um splash Então, vamos abrir Splash e ele chega e nós lhe daremos um design de interface Vamos ver se isso nos dá alguma coisa. Isso nos dá muitas coisas. Vamos usar isso porque isso é basicamente Figma e vamos usar isso Então, quando eu clico, ele meio que aplica aquela imagem a essa caixa. Agora, se eu selecionar a segunda caixa, vamos dar outra imagem, vamos usar uma imagem muito boa e atraente Mamãe. Qual deles usará? Novamente, quando eu disse que passamos muito tempo movendo coisas aqui e ali, também passamos muito tempo selecionando imagens e também passamos muito tempo alternando entre formulários apenas para ver qual fonte ficará boa. Estou tendo muita dificuldade em selecionar qual imagem deve ser coerente. Mas só para facilitar as coisas, vamos escolher essa porque é uma imagem de tela. E agora você vê que temos duas imagens e quando eu vou para a nossa análise, veja, agora temos o Navba, o contato, os links, basicamente, uma pequena introdução e também duas das Mas, no momento, essas duas imagens não nos dão nenhuma informação sobre o que são essas imagens Precisamos adicionar mais alguns detalhes a essas imagens. Vamos ver como vamos fazer isso. Primeiro de tudo, se você quiser, basta enviá-los Os cantos estão bem nítidos no momento. Cantos afiados estão basicamente bem. Mas a tendência é para cantos arredondados. Tudo, desde Apple, iPhones até qualquer uma das interfaces que você vê no celular Todo mundo, tudo tem cantos arredondados, vamos dar um pouco de redondeza ao canto. Perdoe-me. A opção que vamos usar é o raio do canto, e este é o lugar onde colocaremos quatro e vamos ver quais são esses dois Isso arredondou os cantos em quatro pixels. Agora, quando vamos aqui, podemos ver esses looks arredondados e bons, lindos. Agora vamos começar adicionando algum contexto a esses blocos de imagem, o que eles são. Se você quiser, você pode simplesmente fazê-los. Vamos mantê-lo um pouco mais curto. E a razão pela qual vou te dizer o porquê é que sempre que alguém acessa um site, se você tem algo errado , é uma dica de que há mais na página e que eles deveriam rolar para baixo para ver mais conteúdo Caso contrário, se houver uma lacuna e essa lacuna cair exatamente onde a janela de visualização termina, eles nunca saberão que há algo na página e nunca irão rolar Agora vamos adicionar algumas coisas aqui. Então, a primeira coisa que adicionaremos aqui é o nome do projeto. Um, digamos. Então, basicamente, quero dar um nome que diga imediatamente o que você fez. Hum, projetando Pigma ou designers. Então, basicamente, não faz nenhum sentido porque essa pessoa trabalhou no Google, mas agora eu usei algo da Pigma, e lamento muito que isso não esteja fazendo nenhum sentido Então, vamos mudar. Vamos mudar ou talvez possamos, porque quero dizer, essa pessoa talvez digamos que essa pessoa estivesse trabalhando na Sigma para o Google Então, sim, faz sentido. Sim, eu estava errado. Sim. Para designers, vamos reduzi-lo um pouco e como fica? Nada mal, mas ainda podemos fazer isso, algo assim. Ou podemos abandoná-lo um pouco mais e usar isso. 24. Isso é 16. Perfeito. Projetando Figma para designers Além disso, se quiser, você também pode adicionar um pouco mais sobre todo esse projeto. Como enviamos o novo design do PGMs com modo de profundidade para Pig Mas Quer dizer, acabei de inventar isso, mas você entendeu, certo? Então, agora temos isso. Eu posso ir para duas linhas. Então, basicamente, ele também pode ter em uma linha. Então, basicamente, isso é apenas adicionar contexto. Vamos configurar as coisas e vamos agir muito rapidamente e criá-las. Tudo bem Então, adicionamos um pouco de íntron. Vamos apenas verificar. E precisamos de algumas coisas para mostrar que este é um link e eles podem clicar aqui e simplesmente ir Vamos criar um pequeno botão com, digamos, abrir ou visualizar. Vamos apenas digitar view e, em seguida, também podemos abrir a seta para cima. Então, vamos começar dando uma parte inferior. Vamos apenas enquadrar isso. Quando enquadramos isso, podemos simplesmente controlar o traçado que podemos dar e também podemos controlar o tamanho disso. Você pode ver aqui. E basicamente, basicamente, o que aconteceu é que isso se torna um layout quando damos a ele uma moldura agora, isso é uma forma livre. Então, isso não tem nenhum acolchoamento ou uh embutido. O que vamos fazer é mudá-la para horizontal. Depois de mudarmos para horizontal, você pode ver que mais algumas opções se abriram. O que são essas? Este é o nosso preenchimento horizontal e esse é o preenchimento vertical Basicamente, o que ele vai fazer é adicionar o espaço dentro do contêiner. Então, quando eu aumento isso, você vê que está adicionando espaço dentro do contêiner e também aqui. Agora, o que faremos é basicamente dar uma borda arredondada. Agora, isso se parece muito com um botão. E você pode usar qualquer coisa no lugar da vista ou simplesmente usar qualquer uma, mas existem certas diretrizes, certas práticas recomendadas quando se trata de redação de UI ou UX. Você pode acompanhar isso, mas não vou entrar em detalhes. Tudo o que você vai usar para o seu site, basta usá-lo. Agora você vê, vamos dar um tempo para atualizar. Agora está bonito. É bonito. Agora eles sabem que isso tem um link que é visualizado , agora Figma tem uma coisa , chamada autoayout O que ele vai fazer é colocar tudo em um tipo de layout. Portanto, é mais fácil para você quando você está espaçando. Por exemplo, eu já espacei isso em quatro pixels, se eu clicar e selecionar os dois e pressionar Shift A. Ele o adicionará a um quadro e, basicamente , ao layout externo, e detectará automaticamente o que deveria ser o alinhamento No momento, essas duas coisas estão empilhadas verticalmente. Ele será adicionado verticalmente. Agora vamos ver o que acontecerá se eu selecionar isso e isso e pressionar Shift A, que é um adolon, que é um adolon, ele automaticamente desanima que agora todo esse pedaço e esse botão estão empilhados horizontalmente e agora tudo está perfeitamente alinhado e também, se você ver se eu mudar o alinhamento, isso mudará o Agora, o que posso fazer é simplesmente copiar e colar isso ou outro. E digamos que se eu quiser diminuir o espaçamento, você pode ver que posso simplesmente usar este ícone onde há uma lacuna horizontal e ele me dará, vamos mantê-lo 48 Mas então vamos supor que vamos usar esse design. Então, o que acontecerá é que, se algo tiver um título menor, esse botão não será alinhado corretamente e, em cada ladrilho, o posicionamento será muito Então, vamos mantê-lo do jeito que era antes. Então, o título e esse subtítulo começam na extremidade esquerda e o botão está alinhado à direita. Vamos continuar assim. Então, vamos agora expandir isso e agora podemos simplesmente copiar, colar tudo e duplicar. Basicamente, agora temos quatro gravatas, mude as fotos. Vou iniciar novamente o plugin unsplash. E digamos que eu desenhe, vamos dar isso. Vamos apenas, senhor. O que devo dar? Como tal. Eles já usaram este. Não podemos usar isso. N. Não estamos obtendo boas imagens. Acho que vai levar muito tempo se eu continuar pesquisando dessa maneira. Portanto, usaremos apenas algumas imagens aleatórias por enquanto, mas certifique-se de usar absolutamente as melhores imagens para seu portfólio. E acho que a que compramos é boa. Basicamente, agora temos nossa grade de peças do portfólio. Além disso, vamos dar um pequeno contexto aqui, o que exatamente estamos vendo nos trabalhos selecionados. Portanto, sempre que você tiver um texto mais longo que deseja apenas encurtar, basta clicar duas vezes nessa borda e ela o encurtará para onde exatamente o texto está Vamos também alinhá-lo. 32 é bom. Vamos ver como fica. Parece bom. Vamos ver se podemos alterá-lo para médio. Sim, acho que isso parece bom. Isso funciona. Vamos ver o que temos de espaçamento aqui. Está tudo bem. Cerca de 88. Ok. Agora, quando chegamos aqui, vemos que está tudo bem. Temos a Navbar, ou também podemos fazer uma coisa Podemos liberar espaço e empurrar a barra de navegação um pouco para o topo Vamos manter 32. Agora você vê isso um pouco de espaço, quero dizer, não somos capazes de ver. O que vou fazer é ir um pouco mais longe. Vamos ver, 64. E agora você vê que algum texto está visível e vamos deixá-lo lá. Ou se eu puder apenas tentar aumentá-lo. Vamos ver 96 96. Vamos ver uma coisinha rápida. Para essa visão, demos a ela um tratamento nuclear, ao passo que, para esses links, eles são links simples O que podemos fazer é tornar os links um pouco diferentes por cor ou forma. Então, basicamente, neste lugar, só será visível quando alguém passar o mouse sobre o botão Então, no momento, não estamos nos aprofundando e fazendo diferentes estados do botão. Não estamos projetando os diferentes estados de como, como ele parecerá ativo, como ficará. Então, o que vou fazer é dar um pequeno toque de cor Então, vamos usar cores, que são basicamente algo que chama sua atenção Vamos apenas usar isso. E se usarmos a mesma cor, ficará bem? Acho que talvez não pareça bom. Eu não sei Parece que está tudo bem. Parece que está tudo bem. Você também pode usar esse botão. Mas agora que fizemos isso, vamos ver se podemos usar uma cor um pouco diferente. Uh, vamos colocar esse azul escuro. Sim. Acho que isso fará o trabalho. Isso é bom. Agora que mudamos em um lugar, o que podemos fazer é simplesmente controlar C e, em seguida, ir aqui e colar para substituir. O que isso fará é colar isso substituindo o botão antigo. Deixe-me fazer isso com o outro também. E agora nossa página é mais ou menos assim. É uma descrição clara de que isso é um botão e também esses são links que o usuário pode acessar Portanto, nossa página está quase pronta. O que precisa ser feito a seguir é o rodapé. O rodapé não precisa ser muito elaborado. Pode ser muito mínimo. Para isso, basicamente queremos fornecer um rodapé muito básico, provavelmente o nome, não o nome, talvez os detalhes de contato onde alguém possa entrar em contato rapidamente com o endereço de e-mail ou o número de telefone 5. Como criar a página inicial parte 3: Então, vamos também. Então, vamos reduzir isso um pouco mais e mudar a cor para dar uma divisória horizontal para que possamos dividir tudo uma divisória horizontal para que possamos dividir Está tudo bem, como isso parece. Eu acho que isso parece bom. Só que precisamos diminuir o tamanho. Agora parece bom. Acho que só precisa de um pouco mais de espaçamento, e acho que isso parece bom Vamos terminar o oleiro rapidamente e nossa página estará pronta E com isso, acho que estamos de volta aos trilhos. Vamos dar um Hello em no.com. O telefone precisa descer para, digamos, 12 , para ficar bem. Está parecendo bom. Também podemos colocar o número de telefone mais 91 um, um, dois, três, quatro, cinco, seis. Se você for aqui, podemos ver que agora temos os detalhes de contato e podemos brincar com a colocação. Mas, basicamente, para isso, você pode usar apenas uma pegada mínima ou menor para o rodapé Vamos apenas alinhá-lo. Vamos ver agora. Eu acho que parece bom. Você quer adicionar um pouco mais usando alguns ícones e como você adiciona ícones. Novamente, vá para Plugin e, se você não tiver um plug-in, poderá ir. Vou apenas mostrar como adicionar um plugin. Vá para casa. E em casa, você pode ver que há uma guia chamada Comunidade. E quando você acessa a Comunidade, pode ver que tem plug-ins. E se você apenas pesquisar o ícone, obterá vários plug-ins diferentes. Quando você vê que há uma guia para o plug-in à medida que eu entro, posso simplesmente abrir ou simplesmente abrir e ser adicionado a esse plug-in. Eu já tenho alguns plug-ins para o ícone. Eu tenho usado bastante o Fs para ícones e gosto muito deles. Vamos apenas empilhá-lo. Agora, tudo bem. Vamos ver de que tipo queremos. Queremos um homem normal e temos nosso ícone masculino aqui. Então, o que você quiser usar, eu vou usar este. Também temos prisioneiros de guerra. Também para peões, usaremos o ICA. Vamos usar esse. No momento, quando eu arrasto e solto, basta arrastar e soltar, mas não dentro desse DetptFrame, vou apenas removê-lo para fora e movê-lo novamente Então, agora está dentro dessa área de trabalho. Vamos reduzir a escala. No momento, tem 24 por 24 pixels e isso também. O que faremos é reduzi-lo para 16 por 16 pixels. E quando você está andando com proporções fixas, o que você pode fazer é clicar neste Vou bloquear ou desbloquear a proporção. No momento, como temos um ícone, ele já está bloqueado. Às vezes, você o desbloqueará e, ao aumentar um, o outro não aumentará porque está desbloqueado O que você precisa fazer é, se não tiver isso ativado, basta ativá-lo. Agora, quando você alterar o primeiro, o segundo será alterado automaticamente. A mesma coisa com isso. E o que faremos é selecionar isso e isso e Shift Control, pressionar Shift A, o que adicionará esses dois no layout automático. O layout automático é apenas uma maneira mais rápida de alinhar as coisas e dar espaço entre tudo, então você não precisa apenas usar os botões para mover as coisas, uh, aqui e ali, vou pressionar Shift A e ele o adicionará ao layout automático e você poderá ver que o espaço entre é cinco, vou reduzi-lo para quatro e tudo está A mesma coisa acontece com isso. Vamos ver como isso vai funcionar. Se eu continuar assim e, em seguida, selecionar e pressionar Auto Yout, você verá que tudo se alinhará, mas o espaço ainda é grande Então eu posso clicar aqui, pressionar quatro e pronto. Agora vou pressionar novamente a tecla Shift A. Agora você vê que está alinhado O espaçamento, 16, vamos colocá-lo lá. A mesma coisa com vamos ver se isso parece bom. Vamos verificar o espaçamento. Vamos manter 24 Pi e também 24 aqui. Agora vamos remover o espaço extra e como você faz isso é apenas clicar com o botão direito do mouse. Quando você clica com o botão direito do mouse, o quadro é selecionado e você vê quando eu chego à borda, o ícone do cursor muda e, em seguida, pressiona o controle e, em seguida, basta movê-lo para cima. Agora o que você tem, deixe apenas atualizar e agora o que você tem é isso, vou apenas movê-lo Vou me mudar para algum lugar aqui. Agora, o que você tem é um rodapé mínimo, que parece bom Então você tem seu nome e também o e-mail e o número. Muito mínimo, muito fácil. E é assim que você cria uma página inicial de design de site de portfólio muito simples. Então, no próximo capítulo. O que vamos fazer é também criar uma página e, para contato, podemos criar um formulário ou , se você quiser, basta adicioná-lo ou vinculá-lo ao LinkedIn, que funciona muito bem, eu acredito Vamos também criar outra página sobre página e, em seguida, você terá um site mínimo muito básico para seu portfólio. Acho que você está se divertindo até agora, porque estou me divertindo muito projetando isso. Então, é muito rápido, muito fácil. E você pode simplesmente começar a adicionar seus próprios e ajustes de design e pequenas coisas diferentes e torná-las suas Então, sim, estou realmente ansioso. 6. Como criar a página Sobre + prototipagem: Bem vindo de volta. E agora que fizemos nossa página inicial, vamos fazer de outra página uma seção A. Sim. Então, vamos começar duplicando esse TextOpt e o que fazemos é manter todos os guias e tudo intacto, e vamos remover essas coisas que Não precisamos remover a barra de navegação e também não precisamos remover o rodapé Então, agora que removemos tudo. O que a minha página deveria ter de bom em mim? Basicamente, sua foto na cabeça e também uma redação explicando quem você é, e isso é algo que será pessoal para cada pessoa. Então, se você estiver trabalhando, digamos que, como fotógrafo, a introdução ou o texto da seção Sobre mim serão diferentes para você Basicamente, você precisa passar algum tempo e escrever para que isso reflita quem você é. Começaremos adicionando uma foto de rosto. Vamos fazer um retângulo aqui. E o motivo pelo qual estou fazendo um retângulo é porque quero colocar uma imagem dentro desse retângulo Então, vamos selecioná-lo, acessar os plug-ins e, novamente, usaremos o plug-in splash Foto da cabeça certa. Vamos ver, o nome é John Doe, então selecionaremos algo que reflita John Doe Então, vamos encontrar algo que pareça bom. Que tal algo divertido que eu estou procurando. Devemos apenas usar isso? Talvez possamos ir, podemos usar este. Isso tem um lindo buquê na parte de trás. Vamos usar isso. Vamos verificar o espaçamento. Vamos movê-lo para, acho que no anterior, temos o espaçamento em 96 Nós vamos fazer 96 aqui também. Agora, o que vamos fazer é colocar um parágrafo, contando o que é esse John faz. O que vamos fazer é adicionar algum texto, pressionar T ou você pode simplesmente vir aqui, clicar aqui no E o que faremos aqui é clicar e arrastar. O que ele vai fazer é colocar uma caixa de texto. Então, vamos colocar uma caixa de texto aqui e eu escreverei algo Lam Isso dá alguma coisa. O motivo pelo qual escrevi isso é porque eu queria usar, digamos, usaremos a IA para reescrever isso A Figma agora tem capacidade de IA integrada, então você pode usá-la Esse recurso é chamado reescrever isso e vou dar a ele um pequeno parágrafo de introdução para a página sobre mim de John of UI UX designer que trabalha no Google O nome dele é John Doe. Vamos ver se eles conseguem reescrevê-lo. E isso vai levar algum tempo e vai te dar uma ideia de que é bom o suficiente, eu acredito. Vamos apenas usar isso. O que vou fazer é apenas aumentar o espaçamento entre as linhas Vamos fazer com que seja 50%. Estamos apenas tentando preencher um pouco do espaço lá. Vamos dar um pouco de espaço. Então, agora temos nossa página que se parece com isso. E você pode ver que está com boa aparência. Está parecendo bom. É simples e funciona muito bem com a primeira página que criamos. O que também podemos fazer é adicionar um pouco de, digamos, informações de contato. Você pode escrever para mim em John doe@gmail.com. Algo, algo assim. Muito básico, muito mínimo. Você também pode tentar torná-lo um pouco menor para preencher esse espaço e também adicionar mais espaço em branco Então, sim, e qualquer outro link que você precise adicionar, basta adicioná-lo aqui. Se você também quiser mostrar algumas coisas pessoais, como algumas, algumas fotos de hobbies, você também pode colocá-las aqui Mas, por enquanto, eu não vou fazer isso. Mas você pode encontrar muitas inspirações diferentes na web sobre a aparência do site das pessoas. Eu só vou dar e estamos praticamente prontos. Portanto, esta aula não era sobre fazer mais, mas apenas projetar algo que pareça bom e que você possa fazer em muito menos tempo, mas ainda assim terá uma aparência muito boa e feita profissionalmente Mais uma coisa que precisamos fazer é quando você já está na página sobre, não há uma distinção clara entre qual link está ativo e qual link é padrão. Então, o que faremos é adicionar, digamos, retângulo a isso para que as pessoas saibam que estão nesta página Há muitas maneiras diferentes de fazer isso, mas essa é a mais fácil e rápida que você pode fazer Você também pode tentar colocar um traçado exatamente como fizemos neste botão de visualização e mostrar o ativo dessa forma. Mas, por enquanto, vou continuar com isso. E para contato, o que estou pensando é que, em vez disso, o que podemos fazer é simplesmente alterá-lo para LinkedIn para que muitas informações de contato já sejam fornecidas no site, mas só queremos facilitar recrutador ao Acabamos de nomear o LinkedIn. Também faremos isso aqui. Vamos chamá-lo de LinkedIn. E aqui está. Esta é a nossa página inicial, e é assim que ela parece muito limpa, minimalista Enquanto estamos fazendo isso, vamos fazer um pouco de prototipagem O que faremos é acessar a guia de protótipos, e o que faremos é que agora você possa ver que em todos os lugares em que eu passar e o que faremos é que agora você possa o mouse, você verá esse ícone de adição Digamos que, se você quiser, isso é um grupo. Isso será vinculado como um grupo. Então, se você quiser entrar , basta clicar duas vezes e você irá para o A. Vou apenas arrastar e você verá uma seta saindo e eu apenas a apontarei para este texto de três, que significa que agora está vinculado a esta página. Temos algumas opções de interação, como a interação ocorrerá. Ou será um clique ou um atraso ou algo assim. Para a coisa mais simples, usaremos onclick e manteremos tudo exatamente assim Agora, quando você voltar para sua apresentação, veja se você clicar em, você verá esta caixa aparecendo em A, que significa que há um link de protótipo ativo vindo de A. Quando eu clico em Sobre, você vê a página mudar É basicamente vincular páginas, como você faz em um site real, e é assim que você tem Mas também precisamos de uma maneira de voltar à página inicial. O que faremos é colocar esse logotipo volta na página inicial Agora você tem isso. Agora, quando eu clico aqui, você eu estou de volta aqui. Não é legal? Se você é novo no FiGMA, levará algum tempo para se sentir realmente confortável com a prototipagem ou apenas com o uso Acho que é isso que queríamos abordar nesta aula. Talvez eu faça uma aula mais longa com recursos mais avançados, mas sei que essa aula foi criada para exercícios de design muito básicos e muito rápidos que você pode fazer e criar seu site de portfólio. Se você tiver alguma dúvida, basta comentar no Skillshare ou simplesmente escrever uma consulta para mim Além disso, recomendo fortemente que você crie seu próprio projeto e publique na seção de projetos para que eu possa ver as coisas incríveis que vocês estão fazendo Se você precisar de alguma ajuda, estarei à disposição para fornecer feedback. O que quer que você faça, eu fornecerei feedback sobre isso. Então, por favor, publique seus projetos, e eu estarei ansioso para ver tudo Muito obrigado e espero que tenham gostado. Se você estiver assistindo esta aula durante o Ano Novo ou o Natal, desejo-lhe um Feliz Natal e um Ano Novo muito feliz Muito obrigado por fazer este curso. Tchau. 7. Agradecimentos: Então, chegamos ao final da aula e espero que você tenha gostado aprender e já esteja trabalhando no design do site do seu portfólio. Então, se você projetou algo, eu gostaria de ver e, se quiser ajuda ou feedback, ficarei feliz em fornecer isso também. Portanto, para o projeto da classe, quero que você faça o upload do design em que está trabalhando ou já terminou Se tiver alguma dúvida, sinta-se à vontade para me perguntar. Espero que este Ano Novo seja muito alegre e produtivo para você Então, eu realmente gosto de te ensinar esta aula e espero que você tenha gostado da mesma. Muito obrigado e tenha um bom dia.