Desenhe seu primeiro site no Adobe Xd

1. Boas-vindas ao curso: Então me diga, você gostaria de aprender a projetar e criar um protótipo de um site usando o Adobe XD? Bem, se você estiver aqui, você claramente faria. E eu queria agradecer por escolher este curso. Ei, eu sou David, e aqui você aprenderá a projetar e criar protótipos de seu primeiro site usando o Adobe XD. E se você é completamente novo no assunto, deixe-me dizer que com o XD, você pode projetar um site interativo para que você possa mostrar aos seus clientes não apenas como seria o site, mas também como funcionaria. E a melhor parte é que o XD vem com uma versão gratuita completa que usaremos neste curso. Portanto, realmente não há desculpa para não, pelo menos, experimentá-lo. Então eu dividi esse curso em duas partes principais. No primeiro, você aprenderá tudo o que há para saber para começar com o software. Então, você aprenderá coisas como usar a interface, como criar arquivos, como usar as ferramentas, plugins e ativos. Quais são as diferenças entre design e prototipagem e apenas aspectos reais da tipografia web, melhores práticas em web design. E na segunda parte, arregaçaremos as mangas e sujaremos as mãos e projetaremos e protótipos de um site. E criaremos uma versão para desktop e uma versão móvel de um site de freelancers de web design. E no processo, vamos nos aprofundar na adição e no uso de elementos que você provavelmente usará em projetos de web design da vida real. Então coisas como menus móveis, controles deslizantes, depoimentos, portfólios e muito mais. E quando isso for feito, você aprenderá a salvar e compartilhar seu design com um cliente ou com outras partes interessadas. Portanto, o curso o levará passo a passo de aprender os conceitos básicos de usar o XD até projetar e criar protótipos de um site, até salvá-lo e compartilhá-lo. Então, se você quer se tornar um freelancer de web design, ou talvez queira conseguir um emprego em uma agência de web design. Aprender o Adobe XD é realmente uma obrigação. Então, pule direto e eu realmente espero vê-lo lá dentro. 2. O que você vai encontrar neste curso: O Adobe XD é um software extremamente popular que permite criar layouts profissionais de interface interativa. Se você quiser conseguir um emprego como web designer ou designer de aplicativos móveis, ou se quiser se tornar um freelancer de design, XD é definitivamente um dos programas que você precisará conhecer, você sabe, basta dar uma olhada nas ofertas de emprego para designers ou projetos de design disponíveis para freelancers. Muitos deles esperam o conhecimento do Adobe XD. Claro que existem alternativas. Mas se você já estiver usando programas como Photoshop, Illustrator, InDesign, adicionando, sair do seu portfólio de habilidades é meio natural. Então, quero que este curso ajude você a começar criar layouts da Web o mais rápido possível. Quero que você se torne um web designer independente e usuário do XD. Então é por isso que eu dividi isso em duas partes principais. Então, primeiro você aprenderá os principais conceitos como o que é x e como baixá-lo. Além disso, você conhecerá o programa explorando a tela inicial, o espaço de trabalho e entendendo a diferença entre design e prototipagem. Você também entenderá como criar novos arquivos, como gerenciar pranchetas e as ferramentas. E você também se familiarizará com plugins e ácidos. Então, uma vez que soubermos de tudo isso, passaremos a criar o design. E nesta segunda parte do curso, você aprenderá a encontrar inspiração de cores e design para seus projetos. Como projetar e, em seguida, protótipo de um layout da web e como salvar e compartilhar seu design final. Vamos passo a passo de aprender a instalar e usar as funcionalidades básicas do XD até o design e prototipagem até a finalização do seu projeto. E até o final deste guia, você poderá projetar e criar protótipos de layouts da Web de forma independente no Adobe XD. 3. O que é o Adobe Xd: O design experiente da Adobe, ou Adobe XD, para abreviar, permite projetar e criar protótipos de designs digitais interativos, como sites e aplicativos móveis. Então, estamos de volta ao dia para obter a funcionalidade que permitiria que seus clientes e desenvolvedores vejam a interatividade que você criou para o design, você teria que usar um aplicativo para design e outro para protótipo. Por exemplo, como o aplicativo Marvel. Com o Adobe XD. Você pode fazer tudo em um único aplicativo. Mas também há mais uma coisa que você pode fazer aqui. Depois de projetar e criar protótipos de seu projeto, você pode compartilhá-lo com clientes e desenvolvedores. E a funcionalidade de compartilhamento InDesign não se limita apenas ao salvamento e, em seguida, ao envio do arquivo. Mas também vem com um poderoso recurso de geração de código necessário para recriar a funcionalidade do seu design. E isso pode ajudar muito os desenvolvedores tornar seu design ganhar vida em um servidor web. Então, em poucas palavras, XD permite que você crie seus projetos como sites ou aplicativos móveis. Protótipo seu design, o que significa que você pode adicionar diferentes efeitos e funcionalidades aos seus elementos de design. E você também pode compartilhar seus projetos com código gerado automaticamente usado no desenvolvimento da Web e de aplicativos. Como o x D vem da Adobe, ele coopera bem com outros programas no Creative Cloud Suite, especialmente Photoshop, ilustrador e After Effects. Portanto, se essas ferramentas de design não forem suficientes para você, você pode usar outros softwares para projetar seus ativos e, em seguida, imprimi-los no XD. Então, geralmente você criaria um logotipo ou elementos gráficos personalizados , como ícones ou ilustrações. No Illustrator, você editaria as fotos no Photoshop ou talvez no Lightroom e as adicionaria ao seu projeto XD para criar um novo protótipo e compartilhá-lo com desenvolvedores e clientes. Claro, isso não significa que você possa projetar seu layout do início ao fim usando apenas o XD. Tenho certeza que você pode. Se, por exemplo, todos os ativos do cliente já estiverem entregues a você, você pode simplesmente ir direto para o XD e começar a projetar o layout usando as ferramentas fornecidas, que, a propósito, nós falará mais um pouco mais tarde. E se você estiver usando outros programas do Creative Cloud Suite, especialmente o Illustrator e o Photoshop. Alguns aspectos do uso do XD serão muito mais fáceis de entender. Por exemplo, o layout dos usuários faz interfaces semelhantes. O conceito de quadros de arte, opções específicas dedicadas às ferramentas, ferramentas em si, etc. Se, no entanto, este for o seu primeiro encontro com o software da Adobe, não se preocupe, vamos levá-lo bom e lento. Então, você se familiarizará com o XD e espero poder começar a usar o programa de forma independente. Portanto, definitivamente vale a pena experimentar o Adobe XD, especialmente desde o final de 2021. Além de apenas experimentar o programa, você pode baixar e instalar a versão inicial gratuita e quase não cortada, sobre a qual falaremos a seguir. 4. A versão inicial: Desde o final de 2021, o Adobe XD vem com um plano Starter gratuito. Então, vamos dar uma rápida olhada no que se trata. O plano inicial permite que você faça todas as coisas que puder. Na versão premium. Isso significa que não há limitações para o número de arquivos que você pode criar. As ferramentas que você pode usar dentro do programa, na biblioteca de plugins e todas as outras extensões disponíveis, as ferramentas e opções de prototipagem e salvando e exportando seus projetos como imagens. Então parece que você conseguiria tudo o que precisaria, certo? Mas tem que haver uma pegadinha. E, claro, há um ou alguns. Mesmo no plano de inicialização, eles estão compartilhando funcionalidades são limitadas. Não é que você não possa compartilhar seus projetos ou que o arquivo compartilhado esteja de alguma forma prejudicado. Mas você pode compartilhar apenas um arquivo por vez. Além disso, você pode exportar seus designs para PDF apenas até duas vezes. O histórico do documento é limitado a apenas dez dias, oposição a três dias no plano pago. Você acessa somente fontes básicas da Adobe. E seu armazenamento em nuvem é limitado a dois gigabytes. Portanto, se você estiver trabalhando em uma equipe de designers, desenvolvedores e gerentes de projeto, provavelmente você está lidando com muitos projetos diferentes ao mesmo tempo. Isso significa que ter apenas um arquivo é compartilhado dentro de uma equipe é uma grande limitação. No entanto, se você está apenas começando como web designer ou se quiser encontrar um emprego como um só, você pode aprender o XD simplesmente usando o plano padrão. E isso é uma ótima notícia, especialmente considerando o fato de que produtos da Adobe são um padrão do setor e que eles não são baratos. Então, em suma, você pode aprender um software que está em alta demanda no mercado de trabalho e você pode usá-lo livremente. Então, vamos supor que você seja uma daquelas pessoas que deseja aprender ou apenas experimente o Adobe XD. Você está pensando em se tornar um designer gráfico, freelancer. Ou você está pensando em encontrar um emprego como designer gráfico. E você quer apenas ver se X d é algo para você. Para esses propósitos, o plano inicial será mais do que suficiente para você. E neste curso, é isso que usaremos. Então, vamos ver agora como você pode baixá-lo e instalá-lo. 5. Como baixar o Adobe Xd: Sabe, tenho que dizer que não é tão fácil chegar à página de download do x, o plano inicial. O site da Adobe realmente se esforça para fazer com que você obtenha a versão de teste ou a versão completa, mas isso não é nada que não possamos lidar. Portanto, a melhor maneira de encontrar a página de download é simplesmente pesquisando no Google o download do plano Adobe XD Starter. Você pode clicar no primeiro link que aparece e você será direcionado para o site da Adobe. Lá você verá um botão de link azul que diz obter o XD, que quando clicado, tentará abrir um link de download. Se você já tiver a Creative Cloud Desktop instalada, seu sistema tentará abrir o arquivo usando esse aplicativo. Caso contrário, você pode ser solicitado a baixá-lo, embora eu aconselho instalá-lo de qualquer maneira. Você pode gostar antes, Google Creative Cloud Desktop App e basta clicar no primeiro resultado de pesquisa na página que será aberta, basta clicar no botão de download do link da Creative Cloud e o download o processo começará. Assim que o aplicativo estiver instalado, você terá que entrar ou se inscrever se não tiver uma conta da Adobe. E no próximo, você pode instalar o XD através da área de trabalho da Creative Cloud ou simplesmente seguir esse link de download direto, não qualquer maneira que você escolher XD estará instalado e pronto para uso. Acho que a maneira mais fácil de tudo isso seria primeiro instalar o Creative Cloud Desktop App e, em seguida, apenas instalar o XD. Dessa forma, você evitará todo o incômodo de procurar o link direto em algum lugar e página da Adobe e instalar acidentalmente o relógio, você realmente não queria. 6. A tela de casa: Quando você abre o XD, primeiro você verá a tela inicial, que geralmente é dividida em dois espaços principais. Então, à esquerda, você verá alguns links úteis que permitirão executar tarefas específicas. E dependendo do link que você clicar à esquerda, o espaço à direita mudará e permitirá que você controle seus arquivos. Então, vamos dar uma olhada nesses links rapidamente. Então, primeiro obtivemos um novo arquivo. Este é esse grande botão azul que Taylor, quando você clica nele, você criará um novo arquivo com um quadro de arte padrão. Em seguida, obtivemos o link aberto, que permitirá que ele abra um Photoshop como um arquivo PSD, e o Illustrator, que é um arquivo AI, um arquivo de esboço ou um arquivo XD. Também temos o link inicial que permitirá que você volte para a tela inicial. Também temos o link Learn que basicamente o levará ao guia oficial da Adobe para começar a usar o XD. Em seguida, na guia Arquivos, você encontrará seus arquivos. E aqui você encontrará todos os seus arquivos criados anteriormente. Então, se você clicar em qualquer um deles, esse phi será aberto. No entanto, se você selecionar o arquivo usando a pequena caixa no canto superior esquerdo, poderá usar uma das opções de controle que aparecerão no canto superior direito. Então, aqui você pode renomear, excluir e mover os arquivos selecionados. E se nenhum arquivo for selecionado no canto superior direito, você verá uma opção para criar uma nova pasta para a qual você pode mover seus arquivos. Portanto, um é clicado, você verá uma caixa de diálogo Criar nova pasta. Então, basta nomear sua pasta e clicar em Salvar. Depois que a nova pasta for criada, você pode selecionar os arquivos que deseja colocar nela e clicar em mover para o link que você verá no canto superior direito. Isso abrirá uma nova janela onde você pode pressionar Mover para mover os arquivos. Ou você pode criar rapidamente uma nova pasta usando o link que você encontrará no canto inferior esquerdo. Então, em seguida, compartilhamos com você. Então, se alguém compartilhar um arquivo com você, ele será mostrado aqui. Também gerenciamos links. Então, quando você clicar neste link, você será redirecionado para sua conta da Adobe. Mais especificamente para uma seção em que as fontes que você compartilhou ficarão visíveis. E sob essa guia excluída, os arquivos que você removeu serão armazenados aqui. Caso você mude de ideia e queira trazê-los de volta à vida, para fazer isso, basta selecionar o arquivo e ele terá a opção de restaurar ou excluir. Sob as predefinições da prancheta, você pode escolher um dos arquivos predefinidos com predefinições de prancheta de arte. Se você clicar em qualquer um deles, você receberá um arquivo com o quadro de arte padrão. Se, no entanto, você clicar em uma pequena seta cinza à direita, verá uma lista de outras pranchetas disponíveis. Como alternativa, você pode selecionar a predefinição personalizada e simplesmente inserir os valores de largura e altura abaixo. E, nos últimos tempos, você verá todos os arquivos em que você tem trabalhado recentemente. Basta clicar em um para abri-lo. Como você pode ver, essa tela inicial foi bastante simplificada para permitir que você trabalhe em seus arquivos e compartilhá-los sem pensar muito nisso. Se você apenas entender esse tipo de entendimento de que o que você clica à esquerda, efeitos, que você vê à direita. Trabalhar com esta tela se tornará muito, muito fácil e intuitivo. 7. O espaço de trabalho: Vamos agora dar uma olhada no XD is workspace. Afinal, este é o lugar onde você passará a maior parte do tempo com o programa. Então, se você já usou como qualquer outro software de design antes, especialmente os softwares de design mais recentes da Adobe. Entendendo x, esse espaço de trabalho pode ser um pouco mais fácil para você. É muito logicamente dividido em duas partes principais e muito simplificado, talvez às vezes um pouco simplificado ao meu gosto. Mas tudo isso torna o processo de design um servidor não tão suave quanto possível. Então, por cima, você tem o menu principal. E aqui você encontrará todos os principais comandos separados em duas guias, como arquivo, adicionado, objeto, plugins, visualização, janela e ajuda. E é claro que seus nomes correspondem ao que você pode encontrar depois de clicar neles. É claro que, no meio, chegamos ao espaço de trabalho de design principal, que é o primeiro espaço de trabalho que você verá depois de iniciar um novo arquivo. E, claro, todas as suas ferramentas de design estão aqui. Mas é claro que também temos o espaço de trabalho do protótipo. E esse espaço de trabalho permitirá que você adicione e controle as opções interativas que você pode atribuir aos seus elementos de design. E também temos o espaço de trabalho compartilhado. E aqui você encontrará todas as ferramentas e opções essenciais para compartilhar seu projeto. Também ouvimos, como no canto superior direito, você pode ver essa visualização em uma opção de dispositivo. E você pode conectar um dispositivo móvel ao seu computador. E, em seguida, usando essa função, você pode visualizar seu design. Agora também temos essa visualização no botão XD que permitirá que você visualize seu design com interatividade adicional. Seu projeto se comportará como se fosse visualizado ao vivo em um navegador da Web. E à direita, você verá como opções e configurações contextuais chamadas de Inspetor de propriedades. Portanto, essa dor mudará toda vez que você selecionar um elemento de design, ferramenta ou espaço de trabalho diferente. Portanto, ele só lhe dará as opções e configurações que correspondem ao elemento ou à ferramenta que você selecionar. Então, é claro, no centro você terá sua prancheta e tudo o que estiver nela será renderizado no arquivo final. Tudo o que cair fora não ficará visível quando você exportar seu arquivo e tudo o que estiver fora da prancheta, você pode vê-lo simplesmente como seus rabiscos, algo assim. A prancheta basicamente fica em uma prancheta. É basicamente um lugar onde você manteria seus elementos de design como suas imagens, seus, seus ícones ou ilustrações, talvez algumas partes de texto, coisas assim. Aqui no canto inferior esquerdo, você tem seu gerenciador de plugins. E é aqui que você pode gerenciar todos os seus plugins, sobre os quais, a propósito, falaremos mais tarde. Então, subindo um nível, temos nossas camadas. E, claro, você verá aqui todos os seus elementos, como pranchetas, grupos, elementos de design, todas essas coisas. Também temos aqui que documentos ativos. E aqui você pode adicionar e gerenciar cores, estilos de personagens, componentes e vídeos. E, claro, temos nossas ferramentas aqui. Mas existem algumas ferramentas que não são visíveis aqui, mas que você pode acessar usando atalhos de teclado. E novamente, falaremos sobre isso mais tarde. Portanto, conhecer o espaço de trabalho é essencial para um processo de projeto rápido e produtivo. Eu encorajo você a passar pelo menos um pouco de tempo com ele apenas para se familiarizar com os aspectos mais importantes do x, este espaço de trabalho. 8. Design vs prototipagem no Xd: Ao trabalhar dentro de uma equipe de designers e desenvolvedores, ou quando simplesmente não trabalha sozinho com seus clientes, é uma coisa muito importante poder apresentar como você gostaria que seu design interaja com o usuários. E projetar, aplicar essas interações é chamado de prototipagem. Então, em poucas palavras, quando você está adicionando elementos visuais do seu projeto, você está projetando e quando você está adicionando interações entre esses elementos, ou o mais importante, entre o usuário e os elementos de design. Você está fazendo protótipos e Adobe XD oferece a capacidade de fazer as duas coisas. Usando o espaço de trabalho de design. Você pode adicionar elementos visuais ao seu projeto. E usando o espaço de trabalho do protótipo, você pode apresentar como você imaginou as interações entre o usuário e o designer. E isso pode, obviamente, ajudar muito passar suas ideias para pessoas que desenvolverão seu projeto ou apenas para o cliente se você estiver desenvolvendo esse projeto sozinho. Portanto, a prototipagem é realmente importante do ponto de vista da experiência do usuário. Quero dizer, pense nisso. Você, como designer não é apenas responsável pela aparência do seu projeto , você também é responsável por como seu projeto funcionará no mundo real. É por isso que é uma boa ideia pensar o que acontecerá quando alguém clicar em um botão, abas em um link ou rolar a página para baixo ou até X d é que as ferramentas de prototipagem ajudarão você a visualizar todos esses eventos, incluindo estados de paira, transições, cliques e muito mais. E isso, por sua vez, deixaremos que outras pessoas lhe dêem feedback sobre como eles querem que os projetos se comportem. E pode ser uma ótima economia de tempo. Agora, no XD, temos a capacidade de projetar e criar protótipos em um único software. Então, à medida que projetamos nosso projeto, também iremos, medida que avançamos e os recursos de interatividade para ele. Agora, como disse um Wiseman, uma viagem de mil milhas começa com um único passo. E nossa jornada de design começa com a criação de um novo arquivo. Então, vamos fazer isso em seguida. 9. Crie um novo arquivo: Tudo o que faremos a partir de agora nos permitirá começar a projetar nosso site. Então, vamos dar uma olhada em como criar novos arquivos no XD. Primeiro. Você pode fazer isso como já sabemos na tela inicial. E você basicamente tem três maneiras de fazer isso. Assim, você pode clicar no botão Novo arquivo e isso criará rapidamente um documento padrão com um quadro de arte padrão. Você pode usar uma das placas de arte predefinidas para criar um novo arquivo com esse cartão específico. Ou você pode simplesmente inserir valores personalizados para largura e altura para criar um documento com uma prancheta personalizada. Agora, seja qual for a opção escolhida, você verá um novo arquivo aparecendo na tela. E só, deixe-me dar-lhe uma palavra de cautela aqui. Se você criar apenas um arquivo e por qualquer motivo, decidir fechá-lo, você sairá do programa. Você não voltará para a tela inicial. Em vez disso, você terá que reiniciar o XD. Então, se você estiver trabalhando em um arquivo, você quer fechar, é melhor primeiro clicar no botão Início no canto superior esquerdo. Em seguida, crie um novo arquivo e só depois feche o arquivo anterior. Isso permitirá que você mantenha o programa em execução e cancele o arquivo. Você não precisa mais. A maneira mais rápida de salvar seu arquivo usado para pressionar uma combinação de controle de teclado mais S. Se for a primeira vez que você estiver fazendo isso, você verá uma caixa de diálogo aparecendo pedindo que você nomeie seu arquivo que serão armazenados na Creative Cloud. Você verá a mesma caixa de diálogo quando acionarmos o comando Salvar como pressionando control plus shift mais combinação de teclado S, ou usando a opção de menu apropriada, você pode encontrar no menu Arquivo. E os arquivos salvos assim serão armazenados na Creative Cloud. No entanto, você pode salvar seus arquivos no disco rígido local. E para fazer isso, você deve escolher a opção de menu Salvar como documento local. Ou você pode usar a combinação de teclas de controle mais shift mais Alt mais S. E você pode ver uma mensagem informando que salvando seu arquivo localmente, vamos permitir que você use alguns dos opções que você normalmente obteria. E tudo bem, basta clicar em continuar e você poderá salvar seu arquivo ou um arquivo que você salvou localmente não ficará visível na guia seus arquivos na tela inicial. No entanto, ele ficará visível na guia recente. A propósito, você também pode salvar rapidamente seu arquivo na Creative Cloud clicando no nome do arquivo na parte superior da janela do documento. Então lá vai você. É assim que você pode criar e salvar arquivos no XD. Como você notou, todos eles vêm com pranchas de arte, que são realmente importantes para projetar telas específicas. É por isso que é essencial entender como adicionar e gerenciar pranchetas, que, a propósito, vamos dar uma olhada em seguida. 10. Como gerenciar pranchetas: Agora, entender como trabalhar com pranchetas é essencial para um processo de design rápido e suave. No XD, qualquer documento terá pelo menos uma placa de arte. Embora na maioria das vezes você queira criar mais do que apenas um. Sua ferramenta de prancha de arte. Teremos um nome padrão com base em seu tamanho. Você pode, no entanto, alterá-lo clicando duas vezes em seu nome acima e apenas digitando um novo nome ou renomeando-o no painel de camadas. Portanto, como estaremos projetando para web, nosso quadro de arte deve ser alto o suficiente para acomodar layouts modernos e verticalmente longos. E, por padrão, essa citação, placa de arte sem aspas criada no XD será de 1920 pixels por 1080 pixels, o que não é suficiente. É claro que podemos torná-lo um pouco mais longo. Assim, podemos, no Inspetor de propriedades, simplesmente inserir um novo tamanho ou simplesmente pegar a prancheta pela alça inferior e arrastá-la para baixo. O que é um pouco peculiar sobre o gerenciamento do tamanho da placa de arte é que, uma vez que você tenha alguns elementos de design adicionados, você não pode acessar as propriedades das pranchetas ativando a ferramenta de prancheta. Se você clicar com ele em qualquer lugar na janela do documento, basta adicionar um novo quadro de arte. Então, para acessar as opções de pranchetas, use a ferramenta de seleção e clique no sname Prancheta ou simplesmente não selecionado no painel de camadas. Como estamos no tema da adição de novas placas de arte, veja como podemos fazê-lo. Podemos duplicar uma placa de arte existente pressionando Control ou Command se você estiver em uma combinação de teclado Mac mais d. E isso fará com que a nova prancheta fique ao lado da anterior. Com a ferramenta Prancheta selecionada. Também podemos clicar em qualquer lugar na área de trabalho para adicionar uma nova prancheta. E o tamanho desse novo quadro de arte será baseado em qual modelo você selecionar no painel de propriedades. outro lado da criação de quadros de arte, aliados, excluindo-os para colocar isso um pouco poeticamente. E isso é tão fácil quanto simplesmente selecionar uma palavra ímpar e ocultar a tecla delete ou a tecla backspace no teclado. Como alternativa, você pode clicar com o botão direito do mouse em um sname de quadro de arte no painel de camadas. E no menu de contexto, basta escolher Excluir. Como você pode ver, as placas de arte são uma parte essencial do processo de design aqui no XD, cada novo documento virá com um, mas você pode adicioná-los, modificá-los e removê-los completamente a qualquer momento. 11. CAMADAS: O conceito de camadas é tão comum no mundo do software de design. Isso é muito difícil imaginar um programa que não o estaria implementando, pelo menos de alguma forma. E é claro que é a mesma história com o XD. O painel de camadas deve estar ativado por padrão. Mas se você puder vê-lo em seu espaço de trabalho, você pode ativá-lo clicando no ícone de pequenas camadas no canto inferior esquerdo. Você também encontrará um item de menu chamado camadas no menu Exibir. Também vem com um pequeno atalho prático de Controle ou Comando. Além disso. Se você der uma olhada no painel de camadas, notará que o nível superior da sua organização de ativos são suas pranchetas. Assim que você clicar em qualquer um deles, seus objetos serão revelados. E cada objeto que você criar receberá um nome genérico. Baseado em sua natureza. Estou em um objeto criado com a ferramenta retângulo será chamado de retângulo. E o objeto criado com a ferramenta elipse será chamado de elipse, etc. É sempre uma boa ideia. Quero dizer, é uma ótima prática de produção renomear seus objetos para que você possa adicionar um estágio posterior do processo de design. Reconheça facilmente elementos específicos em seu projeto. Outra boa prática de produção é agrupar elementos semelhantes e renomear o grupo para que seus nomes indiquem o que está sendo colocado dentro. Você pode renomear um objeto ou um grupo clicando duas vezes no nome de um determinado elemento ou clicando com o botão direito do mouse e selecionando Renomear. E, claro, você pode excluir facilmente uma camada pressionando uma das teclas Delete ou Backspace no teclado ou clicando com o botão direito do mouse e selecionando a opção de exclusão. Você também pode duplicar um item escolhendo a opção duplicada no menu de contexto. Portanto, clicando com o botão direito do mouse nesse item ou usando a combinação de teclado Control ou Command plus d. No painel de camadas, você pode gerenciar todos os seus quadros de arte, grupos e elementos. manuseio deles é uma parte muito importante do processo de projeto. Portanto, é uma boa ideia se familiarizar com o painel. Especialmente que, uma vez que começamos a projetar nosso projeto, nos referiremos ao painel com muita frequência. 12. Ferramentas de trabalho: Agora vamos analisar rapidamente as ferramentas que você tem à sua disposição no Adobe XD. Agora não vamos passar por eles em detalhes ainda. Faremos isso assim que iniciarmos o processo de design, mas descobriremos rapidamente o que você pode fazer com eles. O painel de ferramentas fica no lado esquerdo do espaço de trabalho. Como já mencionamos brevemente, cada ferramenta é nomeada de uma forma que facilita adivinhar simplesmente o que ela faz. Então, primeiro, obtivemos a ferramenta Selecionar. Para mover um objeto. Primeiro, você precisa selecioná-lo. E você pode fazer isso com a ferramenta Selecionar. Mas isso ainda faz muito mais do que isso. Não é a maneira mais rápida de redimensionar e girar seus objetos. Então, para fazer isso, basta mover o cursor para perto dos objetos selecionados, pontos de ancoragem, clicar e arrastar para iniciar essa transformação. E com essa ferramenta, você também pode alterar a redondeza das curvas. Dentro de um objeto selecionado. Você verá pequenos marcadores redondos. Então clique em um deles e arraste para arredondar todos os cantos de uma só vez. Você também pode clicar e pressionar Alt ou Option e arrastar para arredondar apenas o canto selecionado. Além disso, a ferramenta Selecionar permite controlar e verificar as distâncias entre objetos. Tudo o que você precisa fazer é selecionar os objetos em questão e, em seguida, pressionar a tecla de opção Alt para ver guias e medidas indicando que as distâncias entre os objetos selecionados e a placa de arte. Então, em seguida, obtivemos a ferramenta Retângulo e Elipse. E eu estou falando sobre eles juntos porque eles trabalham basicamente da mesma maneira. Claro, a ferramenta retângulo permite criar retângulos e a Ferramenta Ellipse, reticências, sobre a maneira como você pode criar essas formas é basicamente a mesma. Se você estiver apenas pressionando e segure a tecla Shift, você criará uma antiga reticências perfeitas ou basicamente quadrados. Se você pressionar e manter pressionada a tecla Alt, iniciará isso, bem, a transformação na criação a partir do ponto central. Em seguida, temos a ferramenta de polígono. E você pode usar os mesmos modificadores de teclado para criar triângulos, quadrados, pentágonos, etc A principal diferença é que você pode pressionar as teclas de seta para cima ou para baixo para aumentar ou diminuir o número de lados. Com a ferramenta polígono, você também pode criar formas de estrela. Então, para transformar uma forma de polígono em uma loja, você precisa clicar e arrastar a estrela que Rachel manejou no canto superior direito da forma. Então arraste-o para dentro e altere o número de lados. Então, em seguida, temos a ferramenta de linha. Então, se você apenas clicar e arrastar, você criará uma linha reta. E se você segurar a tecla Shift pressionada, você criará uma linha em incrementos de 45 graus. Se você manter pressionada a tecla Alt, iniciará o processo de criação novamente a partir do ponto central. Em seguida, temos a ferramenta caneta. E a ferramenta Caneta como a famosa batalha. É uma dessas ferramentas que você conhece, você realmente precisa usá-la para entender seus benefícios. É aprender, pode ser um pouco difícil, mas há algumas coisas que podemos fazer ou entender para tornar todo esse processo de aprendizado um pouco mais fácil. Então, aqui no XD, você pode torná-lo ativo clicando em seu ícone no Painel de Ferramentas ou simplesmente pressionando a tecla P no teclado. Então, para facilitar as coisas para você, lembre-se de que você pode clicar para criar linhas retas conectadas. Você pode clicar e arrastar para criar curvas. Você pode clicar e clicar e arrastar. Para combinar linhas retas com curvas. Você pode usar a ferramenta caneta quando precisar de formas personalizadas que permitam que você não possa criar com nenhuma outra das ferramentas disponíveis. Em seguida, temos a ferramenta de texto. E, claro, lidar com texto é uma das principais habilidades. Você precisará ao trabalhar em seus projetos. E existem basicamente duas maneiras pelas quais essa ferramenta funciona. Então, primeiro você pode clicar para adicionar uma única linha de texto ou uma única palavra. E dessa forma funciona melhor quando você quer apenas adicionar um texto de logotipo, um link ou um texto como um texto artístico. Você também pode clicar e arrastar para criar um campo de texto. Então, se você precisar de parágrafos de texto, dessa forma seria sua melhor opção. Agora, infelizmente, no XD, não podemos criar um campo de texto e simplesmente usar uma opção que nos permita preencher o campo com algum texto fictício, como algum texto de Lorem Ipsum. Em vez disso, teríamos que usar um plugin para isso, mas falaremos sobre isso mais tarde. Assim que nosso texto artístico estiver definido, claro que você ainda pode ajustá-lo. Você pode clicar duas vezes dentro para inserir um novo texto. Ou você também pode arrastar a alça inferior para alterar rapidamente o tamanho desse texto. Se você arrastar as alças do texto do parágrafo, alterará o tamanho do campo de texto, não o texto em si. Agora, lidar com a digitação x D usando a ferramenta de texto é apenas uma ponta do iceberg. Vamos olhar para o assunto muito mais de perto. Assim que chegarmos ao estágio de design deste curso, também temos a ferramenta de placa de arte e, como já sabemos, cada novo documento que você criar virá com uma prancheta. Infelizmente, você não pode definir quantas pranchetas deseja ao criar um novo arquivo, mas você pode adicioná-las e, claro, removê-las mais tarde usando a ferramenta Prancheta. E você pode estar se perguntando por que precisaria mais pranchetas em um documento. Bem, no XD, as Pranchetas podem simular experiências e telas. Portanto, uma experiência seria o seu design colocado em uma placa de arte, simulando um celular ou um tablet. E uma tela seria uma instância do seu layout dentro do mesmo design, como uma subpágina de blog, uma página sobre nós, etc. E você pode assimilar todos aqueles com pranchetas. Portanto, a maneira mais fácil de adicionar uma prancha de arte é clicando com a ferramenta Prancheta em qualquer lugar da sua área de trabalho. E se você clicar acima do quadro de pedidos existente, o novo será adicionado lá. Se você clicar à direita, a nova prancheta aparecerá à direita e assim por diante. E, em seguida, no Inspetor de propriedades, você verá todas as predefinições disponíveis que você pode usar para criar sua nova prancheta. Então, basta selecionar um e , em seguida, clicar em qualquer lugar dentro documento para criar um quadro de arte com base nessa predefinição. Como você já sabe, você pode ver rapidamente um acesso às suas placas de arte no painel de camadas. E todos eles receberão nomes genéricos que podem ser alterados lá. Além disso, quando você pressiona um pequeno quadro de arte como ícone à esquerda do sname do quadro de arte. Você será direcionado para ele e poderá começar a adicionar seus elementos de design lá. Em seguida, obtivemos a ferramenta de zoom. E com essa ferramenta você pode aumentar ou diminuir o zoom em uma área específica. Portanto, com essa ferramenta ativa, basta clicar uma vez para ampliar, alternar, clicar uma vez para diminuir o zoom ou clicar e arrastar para indicar uma área que você deseja ampliar. Como estamos falando de zoom, aqui estão alguns atalhos úteis que você pode querer usar. Portanto, se você usar a combinação de teclado Control plus 0, você caberá todas as suas placas de arte na tela. E se você pressionar Control mais um, você definirá o nível de zoom para 100. Se você usar Control mais duas Combinações de Teclados, você definirá o nível de zoom para 200. E se você pressionar Control mais três combinações de teclado, você não definirá o nível de zoom para 300, mas ele aumentará e centralizará em um objeto selecionado. E, a propósito, se você quiser alternar rápida mas temporariamente para a ferramenta de zoom, pressione e mantenha pressionada a tecla Control ou Command se você estiver em um Mac mais barra de espaço. Isso permitirá que você amplie uma área selecionada. E se você adicionar a tecla Alt ou Option a ela, poderá diminuir o zoom. Nem todas as ferramentas disponíveis são mostradas no Painel Ferramentas. Por exemplo, a ferramenta manual. Se você pressionar e manter pressionada a barra de espaço, você a tornará ativa. E, em seguida, se você clicar e arrastar, poderá mover o espaço de trabalho ao redor. E há também a ferramenta conta-gotas, que permite que você escolha um valor de cor de qualquer lugar dentro do seu espaço de trabalho. E a única coisa que você precisa se lembrar disso é que, antes de poder ativá-lo, você precisa ter alguns outros objetos selecionados. Porque se você não pressionar o QI, não inicializará o conta-gotas. Resumidamente falando, a ferramenta conta-gotas permite adicionar rapidamente uma cor personalizada ao objeto selecionado. No entanto, essa não é a única maneira de usar a ferramenta conta-gotas. Sempre que você tiver um objeto selecionado no Inspetor de propriedades, você verá pequenos lanches de ícone de conta-gotas nas opções de preenchimento e borda. E basta clicar no ícone e você poderá provar as cores que quiser. As ferramentas no Adobe XD são muito simples de usar. O que você obtém é basicamente o que é essencial em um cenário de design típico. E essa simplificação significa que, se você quiser executar algumas operações mais avançadas, como caminhos de união ou objetos, você terá que usar o inspetor de propriedades ou os plugins, sobre os quais falaremos em seguida. 13. Como adicionar e gerenciar plugins: Se você não está familiarizado com o conceito de plugins, veja o que você precisa saber. Portanto, os plugins são basicamente pequenos aplicativos que expandem a funcionalidade padrão do XD. Você pode instalá-los, desativá-los ou desinstalá-los. Claro, eles tornam sua vida de design muito mais fácil. Então, por exemplo, você pode adicionar imagens gratuitas ou pagas ao seu projeto. Você pode adicionar elementos de interface do usuário, como ícones, botões, controles deslizantes, partes de textos, todas essas coisas. Você pode até adicionar modelos de blocos inteiros. página Sobre Mim é homepages. E você pode adicionar ativos personalizados, como ilustrações. Você pode encontrar inspiração de cores, gerar código HTML e CSS, e muito mais para gerenciar os plugins, XD usa o aplicativo de desktop Creative Cloud. Então, depois de selecionar os plugins e, em seguida, procurar plug-ins ou plug-ins gerenciados, se preferir. Você verá esse aplicativo aparecendo. Quando você abre este aplicativo, assim, ele se transformará essencialmente em um navegador de plug-in. Portanto, note que, por padrão, você verá plugins para todos os programas. Mas você pode verificar a marca XD à esquerda. Então, você só verá os plugins criados apenas para este aplicativo. E à direita você verá todos os plugins disponíveis. Então, basta clicar nele para instalar rapidamente esse plug-in. E, claro, se você não tiver certeza que esse plugin específico faz, basta clicar em qualquer lugar dentro do carro para ver mais detalhes sobre ele. Assim que o plug-in estiver instalado, ele ficará visível tanto no menu plugins quanto no painel Plugins. Então, uma vez que você não precisa mais ou simplesmente, você não gosta desse plugin específico. Você pode desabilitá-lo ou desinstalá-lo. Então, para fazer isso, volte para o navegador de plugins. Apenas para encontrar o plugin que você não precisa mais, e basta clicar no pequeno ícone de três pontos na parte inferior, e você terá as opções para desabilitar ou excluir esse plugin. plugins são uma ótima maneira de expandir os recursos projetados do XD. E com o tempo você definitivamente encontrará os que você mais gostará e os que você precisará quase em todos os projetos de design. 14. Plugins que você tem mais probabilidade de usar em seus designs: Bem, já mencionei que os plugins permitem expandir as habilidades do XD de várias maneiras. Então, vamos agora dar uma rápida olhada naqueles que eu recomendaria para pelo menos se familiarizar. A propósito, todos os plugins que vou mencionar. Agora você pode baixá-los livremente. Eles são todos gratuitos. Você pode instalá-los a partir do x, este plugin, então Repositório. Então, o primeiro é o ícone para design. E este permite que você adicione vários ícones aos seus layouts. E tenho que dizer, não consigo imaginar um projeto de web design no qual você precisaria usar ícones, especialmente para links de mídia social, coisas assim. Portanto, muitas vezes é um pouco tedioso procurar os ícones certos e depois adicioná-los ao layout. E é aqui que esse plugin entra em jogo. Aqui para procurar ícones, basta digitar qualquer palavra-chave que você quiser. E você verá uma lista de diagonais correspondentes de vários ícones gratuitos, repositórios. E depois de encontrar o que estava procurando, basta clicar nele e você verá esse ícone aparecendo em sua prancha de arte. E, claro, todos esses ícones são editáveis para que você possa mudar sua cor, tamanho, rotação, etc. Então, o próximo é chamado de maquete rápido. E permite que você crie layouts rapidamente usando um único elemento de design ou até mesmo um modelo inteiro. Primeiro, você precisa escolher um tema para sua maquete. Depois de fazer isso, você verá três bibliotecas separadas. Então, o primeiro é elementos que se mantêm como ícones, botões, rótulos e coisas assim. O próximo é chamado de ativos com ilustrações, gráficos e formas. E o último é chamado de modelos. E este contém designs de retenção para páginas únicas, como a página inicial, a página do blog, a página sobre nós ou a página de contato. Então, o que você só precisa fazer aqui é clicar em qualquer ativo para colocá-lo em seu quadro de arte. Dessa forma, você pode facilmente criar seções dentro do seu layout, mas também manter páginas e sobre apenas para visualizar rapidamente como seu design pode ser. Bem, este plugin também é uma maneira fantástica de construir seus wireframes, que não estão familiarizados com o conceito de wireframes. Eles são como representações muito esquemáticas dos seus elementos de layouts. E eles apenas permitem que você visualize o design e apresentado ao cliente de uma forma muito, muito, muito simplificada. Apenas para focar primeiro nos fluxos do usuário, em vez de cores, fontes, imagens, etc. Agora, para fins de wireframing, eu sugeriria usar modelos do tema mínimo. Eles são despojados de cores. Eles parecem muito simplificados. Preciso de muito elegante. Assim, seu cliente pode entender sua visão como toda a experiência do usuário. Portanto, é mais importante entender isso em vez dos elementos artísticos do seu design. E adicionar como modelos inteiros, não significa que você não pode alterá-los da maneira que quiser. Você ainda pode adicionar ativos diferentes ou remover os elementos que você não precisa. Eu só acho que adicionar um modelo inteiro ajudará você a entender todo o conceito de wireframing e fazer com que o processo de construção desses fluxos de usuários esquematicamente saiba muito mais rápido e mais fácil. Então, o próximo plugin que eu realmente gosto é chamado UI Faces. Quase todos os negócios têm uma seção onde eles apresentam alguns membros da equipe ou alguns depoimentos. Essas seções geralmente vêm com cartões contendo uma foto e uma breve descrição. E esse plugin é absolutamente ótimo gerar e adicionar fotos de avatar nessas situações. A maneira como funciona é extremamente simples. Então, primeiro, você precisa ter uma forma, não um grupo criado e selecioná-la. E isso será como um contêiner para a imagem. Em seguida, basta escolher qual repositório você gostaria de usar e clicar em Aplicar aleatoriamente se estiver trabalhando apenas em uma versão simulada do seu design. Isso extrairá uma imagem do banco de dados de repositórios e colará diretamente dentro do layout. E você nem precisa redimensionar ou ajustar nada. O plugin fará todo o trabalho pesado para você. Claro, você não está limitado a certas fotos aleatórias. Às vezes, quando você quer adicionar uma foto de uma mulher, você vai aleatoriamente em uma foto de um homem e vice-versa. E isso pode ser um problema. É por isso que você pode usar a opção Selecionar fotos para escolher uma imagem que você gosta de uma nova janela que aparecerá. Na nova janela, você verá muitas fotos de retrato aleatório. Infelizmente, você não pode alterar o repositório do qual as imagens estão sendo extraídas. Então, se você não gosta de nenhum dos que vê, você teria que voltar e selecionar uma fonte diferente de imagens. No entanto, se você gosta uma foto específica e quiser adicioná-la, basta selecionar e pressionar Aplicar. E essa foto será adicionada ao contêiner de imagem selecionado. O próximo é chamado Lorem Ipsum, que é um nome muito genérico para um plugin muito genérico. E devo dizer que adicionar impostos fictícios é algo tão comum em um cenário de design típico. Estou realmente surpreso. É muito difícil acreditar que no XD, não temos nenhuma funcionalidade nativa para isso. É por isso que temos que usar um plugin como Lorem Ipsum. Ele funciona de forma semelhante ao UI Faces, como em. Você precisa primeiro selecionar um retângulo para poder adicionar algum texto aleatório. E depois de fazer isso, você pode optar por adicionar um pedaço de Lorem ipsum ou abrir uma nova janela selecionando preencher com texto de espaço reservado. E os textos de edição serão completamente personalizáveis. Você pode alterar seu tamanho, cor da família da fonte, altura da linha, etc. Então, o próximo é chamado de Pexels, e permite que você pesquise no repositório Paxos.com de imagens gratuitas. E é um dos sites mais populares onde você pode encontrar. Agora, somos fotos de alta qualidade e gratuitas em basicamente qualquer assunto. Assim que o plugin estiver instalado, basta digitar sua palavra-chave, selecionar uma forma ou adicionar uma imagem e clicar na imagem selecionada para adicioná-la. E, como acontece com o UI Faces, essa forma que você selecionou funcionará basicamente como um quadro de imagem que restringirá essa imagem adicionada. Então, o próximo é chamado OnDraw. E é absolutamente um dos meus plug-ins favoritos porque o próprio Android, esse repositório, permite pesquisar ilustrações personalizadas e de aparência profissional. E em muitos designs modernos, você notará ilustrações personalizadas nas seções de heróis sobre nossas seções e quase qualquer outra seção. Eu acho que essas ilustrações têm muita personalidade para layouts da web. E as ilustrações encontrarão aqui são gratuitas e até livres de atribuição. E você pode usá-los em seus projetos pessoais e comerciais. Então, tudo o que você precisa fazer aqui é digitar uma palavra-chave se você estiver procurando por algo específico, é claro. E, em seguida, basta clicar em uma das ilustrações para baixá-la na área de transferência. Ele não será adicionado diretamente ao seu quadro de arte depois que você clicar nessa ilustração. Mas, quando ele é baixado e fica na sua área de transferência, e então você pode simplesmente colá-lo em qualquer lugar que quiser em sua prancheta de arte. Além disso, você pode selecionar uma cor primária para combinar a ilustração com o esquema de cores do layout. Esses são os plugins mais comuns que você pode querer usar em X d. Certamente há muito mais para escolher, mas isso depende de você explorar e decidir quais você precisará e quais você vai pular. Aqueles que mostrei aqui definitivamente ajudarão você a adicionar ativos personalizados, como imagens, ícones e textos, que são essenciais em qualquer design de layout. 15. Como usar os ativos de documentos: Já falamos sobre o uso de camadas e plugins no XD e no canto inferior esquerdo da janela principal, você também encontrará bibliotecas. Dentro desses, assente seus ativos de documentos. E aqui, você encontrará os toques para fontes ausentes. Se houver algumas fontes, fontes bagunçam em seu documento. Você verá os nomes de suas fontes que não estão instaladas em seu sistema, mas elas estão sendo usadas no documento. Também encontrará as cores com códigos de cores usados em seu documento. Em seguida, você terá estilos de caracteres com famílias de fontes em cores e tamanhos específicos. Você verá componentes com as seções do layout. E também encontraremos vídeos que contêm vídeos usados em seu documento. Portanto, clicar com o botão direito do mouse em cada um desses ativos revelará um menu contextual ligeiramente diferente que permitirá que você execute ações diferentes. Portanto, por exemplo, se você clicar no ativo de fontes ausentes, encontrará uma opção de substituição de fonte que permite substituir os fundos que estão faltando no documento. Claro, você pode fazer isso com uma fonte diferente. E depois que você fizer isso, a guia fontes faltantes desaparecerá dos ativos do documento. Você também verá um destaque no Canvas, que permitirá que você encontre rapidamente os ativos específicos em seu documento. Você também encontrará uma cor de preenchimento de aplicação ou aplicará uma cor de borda. Se você clicar com o botão direito do mouse em um, em uma cor adicionada aos ativos do documento. E isso simplesmente permitirá que você adicione essa cor como uma borda ou um preenchimento a um item selecionado. E, claro, além disso, podemos executar mais opções padrão aqui, como renomear, excluir ou simplesmente agrupar. Então, o que você realmente precisa saber sobre os ativos do Document neste momento é que esse painel é uma ótima maneira de simplesmente organizar seu projeto e tudo o que você tem nele. Agora, às vezes, especialmente quando você está criando um design que requer muitas páginas, cores, fontes, componentes diferentes , trabalhar forma rápida e eficaz pode se tornar um pouco difícil. Você sabe, vai ser difícil controlar todos os ativos que você tem dentro do seu documento. E o painel Ativos do documento definitivamente ajudará você a manter seu projeto o mais consistente possível. 16. Introdução rápida ao design em Xd: Os sistemas de design são uma ótima maneira de tornar seu design e consistente, não apenas em todas as partes, mas também ajudam outros membros da equipe a manter os layouts lógicos. E eles podem ser bastante elaborados e vêm com uma extensa documentação sobre todos e todos os aspectos de qualquer peça de design que você possa projetar também no futuro. Mas para nossos propósitos, vamos manter as coisas simples. Então, para construir seus próprios sistemas de design, você pode usar essas ferramentas e armazenar os elementos de design. Você pode usar os ativos Documento. Em um sistema de design típico, você teria as cores primária e secundária. Você teria a tipografia para títulos e o corpo do texto. E você também teria vários componentes, como botões, listas, ícones, etc. Então, montei rapidamente um sistema de design simples, simples e muito simples que contém esses elementos. Então, é claro, você poderia adicionar quantos elementos quiser. Mas o objetivo principal deste exercício é que você entenda o que eu crio um sistema e como usar os ativos do Documento para gerenciá-lo. O que fiz aqui é que adicionei alguns retângulos simples e os enchi com cores que estou usando no meu projeto. Em seguida, adicionei alguns elementos de tipografia como títulos e corpo de texto. Claro, usando a fonte que eu normalmente usaria no meu projeto. E, por último, com a ajuda do plug-in de maquete rápido, adicionei alguns componentes, como rótulos e botões. Assim que os elementos de design estiverem prontos, você poderá adicioná-los aos ativos do documento e o processo é super simples. Tudo o que você precisa fazer é selecionar os elementos que você deseja adicionar aos Ativos de documento. E, em seguida, clique no pequeno símbolo de mais ao lado do nome da guia. Por exemplo, cores, estilos de caracteres, componentes, vídeos, etc. E o painel Ativos de documento acabará por ser preenchido com o, com os elementos que você pode reutilizar dentro do seu design. Então, quando passarmos para a parte de design deste curso, criaremos elementos de design para nosso layout. E, à medida que avançamos, adicionaremos as cores, a tipografia e outros elementos que manteremos no painel Ativos do documento. Os sistemas de design são um ótimo final. Na maioria das vezes, uma maneira essencial de manter seu design consistente em todas as suas iterações e em todas as etapas. Eles não precisam ser super elaborados, mas devem conter pelo menos as informações sobre as cores e fontes que você usa em seu projeto. Isso simplesmente ajudará você a economizar muito tempo ao criar seus layouts. 17. Como escolher as cores certas para seus designs: Escolher o esquema de cores certo para o seu próximo web design é, eu acho, juntamente com a topografia, o mais importante a ser feito. As cores que você escolher serão a primeira coisa que chamará a atenção do visitante. E se escolhido corretamente. E eles simplesmente não farão seus olhos doerem. E eles não farão com que seus dedos rapidamente procurem isso. Tire-me daqui. Botão vasto. Há toda uma teoria por trás do significado das cores, mas não acho que neste momento seja algo essencial para discutir. Na minha opinião, a única regra geral que você deve seguir a dele apropriadamente. Tudo o que você realmente precisa fazer é pensar na cor que você escolheu é apropriada para o tipo de serviço ou negócio que você está projetando. E depois pense nisso. David rosados ou amarelos ficariam bem em um local para advogados são arquitetos e os verdes escuros são ótimos a simpatia ou energia de um jardim de infância ou parques de diversões. Então, a menos que você esteja indo para alguma estratégia de marketing inteligente e arriscada aqui, a resposta é uma nota óbvia. Então, apropriadamente, é uma coisa. Mas e quanto a encontrar um esquema de cores para o seu design? Agora, isso simplesmente funciona. Felizmente, nestes dias, você poderia ser totalmente colorido, ignorante e ainda criar lindas paletas de cores. Imagine um cenário em que você tem um cliente que precisa de um site e ele ou ela diz que laranja queimada é a cor de sua escolha agora, eles simplesmente adoram. É uma cor fácil de emparelhar. Mas você pode começar pegando a roda de cores e verificando qual é o contraste nas cores de laranja. E, ao contrário, quero dizer, sentado no lado oposto da roda de cores. Nesse caso, você pode ver que violetas, azuis e verdes, os verdes mais escuros, seriam uma boa base para sua paleta de cores. Mas pode ser ainda mais fácil do que isso. Você pode simplesmente ver a paleta de cores laranja queimada no Google e apenas ver os resultados da imagem que você obtém. E confie em mim, você vai ter muito. Depois de encontrar algo que você gosta, você pode simplesmente copiar a imagem e trazê-la para o XD. E agora você pode experimentar as cores e adicioná-las aos ativos do Documento. Então, vamos fazer isso agora. Assim que a paleta de cores estiver colada, podemos criar um retângulo cuja largura será mais ou menos a mesma que uma cor, uma amostra de cores. E agora poderíamos simplesmente copiar e colar o retângulo algumas vezes, apenas para tornar o número de formas igual ao número de cores na paleta. Mas há uma maneira melhor sobre isso. Poderíamos simplesmente usar a grade de repetição para isso. E essa função permite que você crie uma grade de várias instâncias do objeto selecionado. Então, para criar uma grade, basta selecionar o retângulo e, em seguida, pressionar a opção Repetir grade. Então, vamos arrastar a alça direita para criar mais anastomose do retângulo. Se você colocar o cursor em qualquer lugar entre os retângulos, poderá controlar o espaço entre os objetos. Assim que tudo estiver pronto, basta pressionar o botão desagrupar grade que você verá substituindo a grade de repetição. E agora podemos pegar cada retângulo, pressionar a tecla I no teclado para inicializar a ferramenta conta-gotas e provar todas as cores que você pode adicionar aos ativos de documento. Acho que essa é a maneira mais fácil de primeiro encontrar a paleta de cores certa para o seu projeto e depois transformá-la em ácidos do documento. No entanto, se você quiser criar mais paletas personalizadas, há tantos lugares e ferramentas que você pode usar e falaremos sobre eles a seguir. 18. 5 ferramentas para encontrar as cores certas para seus layouts: Você sabe o que é a web, enxame e com ferramentas que visam e ajudam você a encontrar as cores certas para o seu próximo design. E alguns deles são úteis. Alguns deles são mais confusos do que úteis. Então, aqui está a lista das ferramentas que eu acho que simplesmente funcionam. Então, o primeiro agora na nossa lista são refrigeradores. Então, para mim, o cooler diz decidir ir sempre que preciso de uma interessante paleta de cores gerada automaticamente. E é a primeira ferramenta que você pode escolher no menu Ferramentas no canto superior direito. Então, para gerar uma paleta, basta pressionar a barra de espaço e cada vez que você obterá um resultado completamente diferente. No entanto, se você gosta uma única cor e quiser usá-la, poderá copiar o código hexadecimal. Mas se você quiser gerar uma paleta inteira em torno dela, basta bloqueá-la pressionando um pequeno ícone de cadeado. Você verá quando passar o mouse sobre uma determinada amostra de cores. Uma vez bloqueado, você pode pressionar a barra de espaço novamente para alterar apenas as cores não selecionadas. E é claro que eles combinarão com o que você escolheu, aquele que você mantém trancado. Se você gosta da paleta de cores, você pode exportá-la pressionando o botão Exportar no canto superior direito. E isso abrirá uma nova caixa de diálogo com uma infinidade de formatos de exportação. Um deles é o ASE da Adobe, que significa o Adobe Swatch Exchange, que permite importar paletes de amostras. E, infelizmente, o XD não suporta essa funcionalidade. Então, eu recomendaria exportar o paladar como uma imagem e criar bibliotecas de amostras dentro do XD. Se você escolher a imagem como seu método de exportação, verá outra janela solicitando que você forneça um nome para sua nova paleta. Essencialmente, ele se tornará o nome do arquivo de imagens. Depois de salvá-lo em seu computador, você poderá importar a imagem com as paletes de cores para seus projetos do XD. O curso vem com ótimas ferramentas de seleção de cores. Deles. Acho que gostei mais das paletes de exploração. Então, aqui, você pode encontrar muitas paletas de cores prontas para se inspirar. Você também pode encontrar uma paleta pesquisando um nome de cor específico, código hexadecimal ou até mesmo um tópico. Refrigeradores que o carvão poderia realmente ser o único lugar que você teria que visitar para obter tudo o que você precisaria. Em termos de geração de paletas de cores ou cores únicas ou amostras ou gradientes, etc Mas, claro, também existem outras fontes que valem a pena visitar. Um deles é chamado de ponto de cor. E este é muito divertido. Você pode criar rapidamente um esquema de cores usando o mouse ou o touchpad. Então, aqui basta arrastar para a esquerda ou para a direita para alterar a tonalidade e arrastar para cima ou para baixo para alterar a luminosidade. E você também pode rolar para cima ou para baixo para alterar a saturação. Então, se você estiver satisfeito com a cor, clique para salvá-la e repita o processo com outra cor. E a ferramenta só mostrará as cores que funcionam bem com a que você escolheu antes. E, claro, você pode repetir o processo quantas vezes quiser. Em termos de exportação em suas cores, acho que seria melhor salvar sua tela e copiá-la para salvar sua tela e copiá-la seu projeto XD porque essa ferramenta não vem com a exportação em recursos como colors.com. O próximo é chamado de palatável. E aqui você pode escolher sua própria cor ou simplesmente clicar no botão de antipatia. Então, o programa escolhe essa cor para você. E se você gosta, clique no botão Curtir e veja se a próxima cor Vamos supor que corresponda à anterior corresponde ao seu gosto. Claro, você também pode remover uma cor específica para encolher toda a paleta. Portanto, o próximo não é realmente um aplicativo da web, mas é um plugin do XD e é chamado de cores no escopo. É realmente uma pequena ferramenta fantástica que ajuda e informações que você pode encontrar aqui são basicamente inestimáveis. Por exemplo, você pode navegar pela biblioteca de paletas de cores prontas. Você também pode permitir que a IA gere paletas de cores para você. Você pode verificar a acessibilidade da cor selecionada. Você também pode gerar gradientes e tons de gradiente. Você também pode adicionar paletas de cores usadas por algumas das principais marcas do mundo. Basicamente, o que você pode fazer aqui é clicar em uma funcionalidade específica e depois adicionar cores. Ou você pode verificar algumas informações adicionais fornecidas. Por exemplo, se você quiser adicionar uma paleta de cores, clique na opção de paletes de cores e você verá muitas paletas de cores predefinidas. Assim, podemos simplesmente copiar um palete ou simplesmente clicar um pequeno ícone de mais no canto superior direito para adicionar o paladar ao quadro de arte. Você também pode clicar no botão editar esta paleta para colorir ácidos. E essa paleta é claro que será adicionada aos ativos do documento. Então, as cores no esporte são um plugin fantástico. Para adicionar e criar paletas de cores. Em um pequeno aplicativo, você obtém toneladas de opções e ajudantes. Então, o último da nossa lista são as cores do Canadá. E eu acho que você provavelmente já ouviu falar do Canva, mas você usou as ferramentas de cores deles? Você pode realmente criar e visualizar paletas de cores aqui. Você também pode descobrir o significado de cada cor escolhida. Então, agora todas essas ferramentas de geração de cores são apenas elas se realocam, representação humilde de uma era de recursos de cores que você pode encontrar online. A maioria deles funcionará praticamente da mesma maneira. Então, se você encontrar seus favoritos, basta ficar com eles. Isso é realmente tudo o que você vai precisar. 19. Como escolher o tipo de fonte certa para seus sites: Agora que você sabe como escolher as cores certas para seus designers, é hora de aprender a escolher as melhores fontes para eles. Antes de começarmos, há uma coisa importante a saber, a diferença entre um tipo de letra e uma fonte. Então, muitas pessoas usam esses termos de forma intercambiável, o que é, o que é errado. E a diferença é realmente muito fácil de entender. Um tipo de letra é uma família de pesos e estilos específicos. Por exemplo, surf de entrada. E eles descobriram que é uma instância específica do tipo de letra. Por exemplo, o meio de serviço de entrada. Bem, isso é fácil, não é? A coisa toda fica um pouco mais complicada quando você tenta classificar as faces do tipo. Mas, felizmente, existem apenas quatro grandes variantes de tipos de letra. Então, o primeiro é serif, que são tipos de letra e incluindo letras com esses pequenos ornamentos. Como Laura Libre, Baskerville, ou apenas o velho Times New Roman. Há também fontes san-serif, que inclui letras sem esses ornamentos, por exemplo, Open Sans, Roboto ou Montserrat. Também temos serifa de laje com serifas que são realmente ousadas e grossas, como laje ou laje de Roboto. E também há tipos de letra de Script que simplesmente não se assemelham a caligrafia, como graduado , Paris, iene ou América. Portanto, essas são as principais categorias de tipos de letra. Mas há também outro que de certa forma se relaciona com todos eles. E estou falando para exibir rostos de tipo. Mas um dos maiores erros os designers cometem é que eles usam fontes de exibição para longas passagens de texto. Enquanto eles são destinados especificamente títulos e talvez subtítulos. Para muitos designers, use esses tipos de letra para o texto do corpo principal, o que essencialmente o torna legível. Isso não é o que você deve querer para seus projetos. Então agora você provavelmente está se perguntando, ok, mas quais fontes devo usar? Tudo o que poderíamos simplesmente tentar encontrar os melhores traços de fontes que deveriam, que devem ajudá-lo a encontrar o tipo de letra certo para o trabalho. O primeiro será legibilidade. Quero dizer, basta escolher o tipo de letra que é simplesmente legível. Seu site deve comunicar informações muito específicas. Claro, a menos que seja apenas um projeto de arte. Portanto, as pessoas devem ser capazes de ler sua mensagem e você não quer dificultar isso para elas. O teste mais fácil é apenas tornar a fonte menor para cerca de dez pontos e verificar se você pode incutir distintas, as letras únicas, por exemplo, minúsculas e de uma minúscula c. E também muitas vezes o, a maiúscula eu poderia parecer letra minúscula l. Geral, caracteres mais abertos serão mais visíveis em tamanhos menores. E se assim for, eles, é claro, também serão visíveis em tamanhos maiores. Por exemplo, em cabeçalhos. Agora, para os cabeçalhos, você pode usar os tipos de letra de exibição ou os tipos de texto do corpo. Embora tanto serifs quanto sans serifs e até scripts funcionem bem. É mais sobre sua escolha de design aqui em vez de encontrar uma fonte perfeitamente legível. Agora, os títulos geralmente são bem grandes. Então você não deve encontrar problemas com legibilidade. E, novamente, por favor, não use tipos de letra para o corpo do texto. Passagens mais longas de texto precisam um tipo de letra que seja antes de tudo legível. E em segundo lugar, combina bem com seus títulos e metas de design. Algumas pessoas tentaram argumentar que, para leitura de tela, letra san-serif são melhores e as fontes serif são melhores para leitura fora da tela, como livros ou panfletos. E eu não acho que seja tão simples assim. Quero dizer, se um tipo de letra pode ser chamado de legível, isso significa que é bom para telas e páginas. Serif ou sans-serif. Se for fácil de ler, você pode usá-lo onde quiser e sua escolha será verdadeiramente baseada na estética que você está buscando. Ter uma sela que existe qualquer tipo de rosto que você possa usar e tenha certeza absoluta de que você fez a escolha certa. Bem, adivinhe, mas o método que você está prestes a aprender vem com uma armadilha um pouco eficaz. Então, digamos que, para o seu design, você quer usar uma das Fontes do Google. E depois de decidir se quer serifs, sans serif ou scripts, você pode refinar sua pesquisa por popularidade, escolhendo o mais popular à direita. Isso classificará os tipos de letra pelo número de downloads a partir do valor mais alto. Os tipos de letra mais populares serão os primeiros da lista. Além disso, alguns deles como o último, Open Sans ou refutação, foram encomendados pelo Google e criados por designers experientes, como bem estabelecidos. Então você pode ter certeza de que esses tipos de rostos são simplesmente bons. Então, se esses tipos de letra são os mais populares, eles devem ser os melhores, certo? Bem, eles podem ser ruins. Eles também podem ser muito usados em excesso. Tome Lobster and Lobster Two, por exemplo, é um tipo muito legal, mas tem sido usado tantas vezes que foi chamado de switch New Comic Sans. Ao mesmo tempo, é uma indicação de seu sucesso. E o motivo dos meios, é claro, você não está limitado às fontes do Google. Você também pode visitar fontes da Adobe, onde encontrará tipos de letra da própria Adobe, mas também de muitos designers de tipos e fundições. Assim, você pode clicar no nome do tipo de letra. Você gosta de ver todas as variantes disponíveis. Então, para adicioná-lo ao x dy, clique em ativar fonte no canto superior direito. E, finalmente, você verá essas fontes adicionadas à sua biblioteca de fontes dentro do XD. Portanto, esses são os conceitos básicos da boa tipografia que você pode aplicar em seus próprios projetos. Mas e se você for uma topografia completa nova e não souber qual fonte ou tipo de letra é. Vá bem juntos. Há duas fontes que costumo usar com mais frequência sempre que estou em dúvida ou só preciso de alguma inspiração. E o primeiro é chamado Font Pair.co. E aqui você encontrará pares de fontes, inspiração de fontes e muitos exemplos de diferentes usuários de fontes. As fontes que você encontrará aqui podem ser baixadas diretamente. Mas você também pode conferir os sites de criadores de tipos de letra para aprender um pouco mais sobre eles. A outra fonte que uso é chamada de tipo woof.com. E este lado tem muitos ótimos recursos e classificações de fontes, como fontes sans serif top, fontes de serifa superior, as principais fontes da Adobe para fontes do Google, etc. para fontes do Google, como fontes sans serif top, fontes de serifa superior, as principais fontes da Adobe para fontes do Google, etc. o tipo de letra que você escolheu seu bem, Você pode apenas consultar o tipo de.com. Então, acho que cobrimos bastante em termos de encontrar os tipos de letra certos para seus projetos. Agora você sabe que a distinção entre san-serif serve como letra de roteiro e slab serif. Você sabe a diferença entre exibir e fontes de texto de corpo. Você sabe onde encontrar fontes para seus projetos e sabe para onde ir se tiver dúvidas sobre sua escolha de fonte. Então, boa tipografia é um dos elementos-chave de um layout de site bem-sucedido. No entanto, existem alguns outros elementos que podem criar ou quebrar um bom design. Então, vamos falar sobre eles em seguida. 20. Práticas recomendadas do design web moderno: Com cada novo layout da web que você criar, suas habilidades vão melhorar. Criaremos mais rápido. Você entrará em alguns hábitos saudáveis. Mas há algumas coisas que você pode empregar em seu fluxo de trabalho desde o início. E estou falando sobre as melhores práticas de web design. Então, antes de tudo, lembre-se de simplificar a experiência. Simplificar seu design para obter a melhor experiência do usuário deve ser a regra geral do seu projeto. Não apenas para projetos de web design para esse assunto. Agora, isso pode parecer duro, mas a maioria das pessoas que visitam um site que você projetou não virá ver todas as belas cores e fontes que você usa. Visitaremos por causa de um serviço específico que o site fornece. Portanto, se o usuário não conseguir o que quer rapidamente, ele irá para outro lugar. E realmente o pesadelo das empresas em termos de seus sites, é a alta taxa de rejeição, o que significa que os usuários deixam seus oócitos muito rapidamente e não interagem com ele como esperado. É por isso que é tão importante apresentar todos os elementos e dados desnecessários de uma maneira facilmente compreensível. Então, o que tudo isso significa na prática? Bem, é uma boa ideia minimizar o texto, por exemplo. Portanto, crie parágrafos curtos, como duas ou três frases, que serão fáceis de ler tanto em computadores quanto em dispositivos móveis. Além disso, tente não usar mais de três a cinco cores e talvez duas adicionais para estados de paira. E definitivamente evite a confusão. Portanto, lembre-se de fazer cada seção sobre uma ideia e tentar minimizar o número de chamadas para ações para uma por seção. Portanto, a simplicidade é a chave para taxas de rejeição mais baixas. Um design simples será mais fácil de desenvolver e exigirá menos recursos para carregar no dispositivo do usuário. Então, em seguida, temos consistência. Então, depois de encontrar suas fontes e cores, basta ficar com elas. Não há nada mais pouco profissional do que botões e pedaços de textos que têm cores diferentes em diferentes páginas do seu site. Portanto, é uma boa ideia usar os ativos Documento para manter seus estilos de texto, cores, componentes e fontes em um só lugar. Também temos hierarquia visual, e esta está intimamente ligada à noção de usabilidade. Se concordarmos que o objetivo principal do nosso design é incentivar os usuários a realizar uma determinada ação no site. Temos que facilitar para eles. Assim, podemos fazê-lo, por exemplo, pelo uso correto de cores, posicionando pesos de fonte variáveis, adicionando botões facilmente clicáveis, etc. Você também deve se lembrar da simpatia móvel. A maioria dos designers afirma que, quando criam seus layouts, eles fazem isso primeiro com as versões de desktop em mente. Eu faço isso assim sozinho. Acho que é mais fácil trabalhar assim em vez de primeiro criar a versão móvel da interface do usuário. Mas isso não significa que você deva negligenciar as versões responsivas do seu design. Agora, qual é a maior parte do tráfego da web proveniente de dispositivos móveis nos dias de hoje , é um mestre absoluto, tendo em mente como será seu design em smartphones e tablets. E uma preocupação humana até mesmo adotando a primeira abordagem móvel, o que significa primeiro projetar a versão móvel do site e depois construir a versão para desktop sobre isso. Então, o que tornaria um design móvel amigável? Então, já que o custo dos dados móveis ainda é um problema em muitas partes do mundo. Tente tornar seu design leve no celular. Isso significa que talvez seu site não precise de tantas imagens ou vídeos. Um é exibido em um smartphone. Talvez o controle deslizante não seja tão legal e eficaz em um dispositivo menor quanto em tela maior. Além disso, você pode precisar deles mais espaços em branco ou maiores lacunas entre os elementos. Então, eles são mais fáceis de tocar. E também o texto pode precisar alguns ajustes em termos de tamanho, posicionamento e talvez altura da linha. Portanto, essas são as coisas que você precisa considerar ao tornar seu design amigável para dispositivos móveis. Portanto, também temos acessibilidade, que está intimamente ligada a toda a experiência. Os usuários estão recebendo isso do seu site. E se você está projetando seu lead web com acessibilidade em mente, você tem que torná-lo, quero dizer, o layout acessível a todos os usuários. Se você quiser se aprofundar no assunto, você deve usar as diretrizes de acessibilidade de conteúdo da Web do Google. No entanto, você pode usar as quatro diretrizes gerais a seguir para ajudá-lo a entender esse tópico. Portanto, um site acessível seria percebível pela primeira vez. Portanto, os usuários devem ser capazes de perceber seu conteúdo usando uma de suas frases. Por exemplo, pessoas com deficiência visual podem ter problemas com os campos obrigatórios vistos em seu formulário de contato se estiverem marcadas apenas com uma borda vermelha. Então, algo como um asterisco e um pedaço de textos como o necessário deve ser adicionado. Além disso, os usuários devem poder operar a interface do usuário de alguma forma. Por exemplo, clicando nos botões, parando ou pausando o vídeo com alguns controles fornecidos. Usando pelo menos duas formas de sistemas de navegação, como talvez navs de topo, links de fotos ou até mesmo breadcrumbs. Além disso, o conteúdo deve ser compreensível para os usuários. Assim, por exemplo, o estilo e o posicionamento do menu devem ser consistentes entre diferentes páginas ou exibições da página. Além disso, o site precisa ser, precisa ser robusto, que simplesmente significa que os sinais devem ser compatíveis com os navegadores atuais, mas também com suas versões futuras. Mas isso é mais um desafio de desenvolvimento web. E existem certas convenções ao usar um site. Quero dizer, hoje em dia, os usuários estão bastante acostumados a operar em sites de uma maneira específica. Por exemplo, eles costumavam usar o sistema de menus. E isso inclui o menu móvel estilo hambúrgueres que pode ser encontrado no lado superior ou esquerdo da página. Eles estão acostumados a ver o logotipo no canto superior esquerdo ou na parte superior central da página. E eles são usados para clicar no logotipo. E é claro que isso pode ser uma imagem ou uma imagem mais eu taxei e isso bem, essa imagem, esse logotipo quando clicou, vai levá-los para a página inicial. Eles também entendem que links têm quando você passa o mouse sobre eles ou clica neles, eles vão mudar sua aparência. Eles também entendem uma navegação adesiva, que basicamente aparece quando um usuário marca, role para baixo na página. E eles também entendem algo como um padrão de saco para cima que aparecerá quando o usuário rolar a página. E então é quando um clique irá levá-los para o topo da página. Todas essas regras podem parecer, a princípio uma enorme limitação ao processo criativo. Mas acho que há muito espaço para projetar layouts originais, tornando-os fáceis de entender para os usuários. 21. Preparar-se para começar a criar: Desde que presumo que você seja um aspirante a web designer e, claro, o próximo usuário de D. Achei que seria uma boa ideia criar um design que simplesmente mostre suas habilidades. E você pode usar o layout para que você criará aqui como base para o seu próprio site. Se você quiser se tornar um designer, freelancer ou elementos de portfólio. Se você quiser conseguir um emprego como web designer. É por isso que adicionaremos os elementos e seções mais comuns em designs criativos que também são um pouco mais orientados para os negócios. Eu só quero encontrar o equilíbrio certo entre incluir as coisas que você precisa saber sobre o XD e coisas que são interessantes o suficiente para as pessoas que gostariam de contratá-lo. Então, vamos projetar a versão para desktop da primeira página junto com ela. Então, versão móvel, mas também uma única página de postagem do blog. E, claro, é a versão móvel dois. E, a propósito, é uma boa prática utilizar algo que eu chamo de design medley. Assim que a versão para desktop de uma seção específica estiver concluída, acho que você deve criar sua versão móvel logo depois disso, vamos permitir que você controle seu design muito melhor e simplesmente mantê-lo consistente. Mas, claro, também vamos protótipo nosso design, o que significa que adicionaremos interatividade a ele. Só para imitar a aparência, parecer e se comportar como se fosse como um site ao vivo. Portanto, no final do processo de design e protótipo, você deve ter seu próprio projeto criado. E não mais importante, você deve entender como construir um projeto de web design completo do XD. E eu o encorajo a experimentar. Eu encorajo você a tratar esse design como um ponteiro, como um exemplo que você poderia usar para seu próprio design, suas próprias variações desse design. 22. Vamos criar um novo arquivo: Então estou aqui no XD na tela inicial. Então, vamos começar com a criação de um novo arquivo. Claro, poderíamos usar como uma predefinição padrão da web 19201920, mas vou usar um tamanho personalizado. Acho que podemos começar com 1920 de largura e 4 mil em altura. E eu só vou clicar nesse cara. E, claro, é claro, como você já sabe, você sempre pode simplesmente pegar esse fundo tratado aqui e alterar o tamanho do seu documento e notar como isso afeta o tamanho do nosso layout aqui em eles. No Inspetor de Propriedades, é claro, se apenas pegarmos esse cara assim, isso também afetará a largura. E, a propósito, estamos fazendo isso com a ferramenta de seleção. Então, como você pode ver, essa ferramenta é bastante poderosa. Você pode transformar objetos com ele, selecionar os objetos, é claro, e também pode pegar. Mas é claro, desde que se estiver, se estiver vazio, você pode pegar um quadro de arte e simplesmente mudar seu tamanho assim. Você pode torná-lo maior, você pode torná-lo menor. Então, é claro, quero voltar ao meu tamanho anterior de forma tão diferente, preciso usar a década de 1920 porque é como, você sabe, como um full HD padrão. Largura do poço. E vou voltar para 4 mil assim. Outra coisa, eu acho muito, muito, muito importante para entender aqui antes de começarmos a projetar qualquer coisa é que você pode usar o layout de grade aqui no Inspetor de propriedades, se nós apenas soubermos, acioná-lo, você pode ver que temos tudo isso. Deixe-me apenas aumentar o zoom. Temos todas essas colunas que simplesmente nos permitirão decidir quão amplos nossos elementos serão ou nosso designer no total. E, claro, isso pode nos ajudar a posicionar os elementos dentro do nosso design. Agora, esta aparece uma lista baseada em uma grade de 12 colunas que você pode, você pode ver como no Bootstrap, por exemplo. E se você não está familiarizado com o Bootstrap, é simplesmente um ambiente de desenvolvimento semelhante, é um ambiente CSS e JavaScript que é muito, muito popular no mundo do desenvolvimento. E isso, esse sistema usa 1212 colunas. E, claro, você pode mudar a cor se quiser fazer isso. E você pode alterar o número de colunas para outra coisa, se preferir. Mas eu acho que do jeito que parece, é bastante padrão e eu não convidaria eu não aconselharia largura como não mexer com o número de colunas ou com a largura da calha. E, a propósito, a largura da calha é como essa margem entre essas duas, essas duas colunas bem aqui. Assim que começarmos a criar em nossos elementos de design, podemos, por exemplo, anexá-los à esquerda, como a coluna mais esquerda e a coluna mais direita. Mas, honestamente, eu não sou que, se você der uma olhada nos desenhos como desenhos contemporâneos, eles não são estritamente anexados a todas essas colunas internas. Como mais e mais designs como web design 3, você verá que muitos elementos gostam de se sobrepor. Eles não são como, como colados a qualquer estrutura, a qualquer tipo de layout de grade. Mas é um bom indicador de como, quão amplo seu design deve ser realmente. E isso pode ajudá-lo a se posicionar em seus elementos se você estiver tendo problemas com o posicionamento deles em relação um ao outro, ao contrário dos outros elementos de design. Mas isso é opcional. Vou voltar e voltar para essa opção de layout. Agora, durante o processo de design, acho que ajuda um pouco. E se você quiser acompanhar, você pode, você pode, você sempre pode manter esse layout como essas colunas e, se você não fizer isso, você não precisa. Mas só para você saber, eu vou me referir a essas colunas, como durante o processo de design bastante. Então, é claro que é bom salvar nosso documento. Talvez eu vá salvá-lo localmente porque quero compartilhá-lo com você como mais tarde, mais tarde. Então, vou salvá-lo como um documento local. E eu vou chamá-lo como um novo design deles para os alunos, é claro que você deve nomeá-lo, dar um nome que corresponda ao seu, com o seu próprio design. Então, vou salvar esse cara. E lá vamos nós. Podemos, acho que podemos começar com nossa seção de cabeçalho. Então, começaremos adicionando algo como logotipo e talvez adicionaremos algum tipo de navegação. E talvez, e talvez eu vá adicionar uma imagem, mas vamos fazer isso no próximo vídeo. 23. Encontre as cores certas para nosso design: Então, temos nosso novo arquivo pronto. Então eu acho que agora poderíamos, por exemplo, começar adicionando um logotipo aqui no canto superior esquerdo e talvez adicionando sua navegação aqui no canto superior direito. Mas como eu quero fazer como prototipagem e design ao mesmo tempo, para protótipo da nossa navegação, teríamos que ter algumas cores, certo? Quero dizer, eu não quero que eu não quero gostar do estado do mouse quando estou passando o mouse sobre os links de navegação. Eu não quero apenas sublinhá-los em maio ou torná-los mais ousados. Quero mudar a cor porque também nos permitirá aprender a protótipo um pouco melhor e também ter essas cores, teríamos que encontrá-las. E se não o fizermos, se estamos projetando nós mesmos, e se não tivermos, se não tivermos nenhuma pista do nosso cliente, então só precisamos encontrar essas cores nós mesmos. Claro, se você já algumas imagens ou ativos enviados para você, enviaremos para você do seu cliente. Você deve usá-los como um ponteiro em termos de busca das cores. Ou talvez seu cliente adorasse por uma cor específica em quem sabe. Mas se você não o fez, acho que seria uma boa ideia primeiro encontrar como uma imagem de herói para o nosso design e, em seguida, basear nosso esquema de cores nas cores que você pode ver nisso, naquele herói específico imagem. E o que eu quero é que eu quero encontrar como uma imagem falsa basicamente de um retrato, foto de um designer ou um freelancer que não teria nenhum plano de fundo, mas ainda assim teria algumas cores agradáveis que podemos simplesmente usar em nosso design. Então, para isso, vou usar o site chamado pixel bruto. E você só precisa configurar uma conta gratuita aqui. E então você pode procurar, bem, se você quiser procurar fotos premium, você pode, mas é claro que você teria que pagar por elas. Mas também temos como domínio público e fotos gratuitas aqui. Então, o que eu vou, bem, o que você poderia fazer é procurar simplesmente por algo como retrato, eu adicionaria PNG. E isso, isso vai saber como tentar encontrar algumas fotos de retrato que simplesmente não têm fundo. Claro, os mais agradáveis são a seção premium e premium. Então, vamos tentar retrato aqui, retrato P e G. E, claro, isso vai ser um pouco melhor. Mas o que eu encontrei aqui é esse tipo de um, não é como uma imagem. Parece um, como um scat como uma ilustração feita a partir de uma imagem, mas acho que parece muito legal. É, essa garota é como uma moderna, criativa, algo que há muitas cores aqui que podemos simplesmente recuperar desse design que poderia ser uma cores aqui que podemos simplesmente recuperar desse design que poderia ótima base para o nosso design. Então, acabei de decidir baixar esta imagem. E se formos ao XD, e vou tentar descobrir que essa imagem, como você pode ver, experimentei outra. E eu vou simplesmente imprimir aqui. E acho que vou me deixar selecionar o quadro de arte e vou simplesmente desligar o layout. E é claro que teremos que fazê-lo, torná-lo menor assim. Mas essa imagem ou essa ilustração, eu acho, será uma ótima base para nosso design para encontrar as cores certas e certas. Mas, na verdade, vamos começar a fazer isso no próximo vídeo. 24. Vamos adicionar o logotipo e a navegação: Então, quando se trata de adicionar o logotipo à sua disciplina, aos seus designs, é claro, você tem opções diferentes. Você pode adicionar como um logotipo gráfico que talvez você mesmo tenha projetado. Você pode adicionar um logotipo que seu cliente lhe deu porque ele já tem um logotipo. Ou poderíamos usar alguma sorte tipográfica muito rápida do logotipo, como vamos fazer neste caso. Porque novamente, estamos apenas projetando um logotipo simples, como um simples para o nosso, para nossas células, basicamente porque somos os freelancers que são como mostrar nosso trabalho. Então, vou pegar a ferramenta de texto e deixar-me apenas ampliar. Por enquanto, vou me livrar da grade. E eu só vou clicar em algum lugar aqui. E digamos que nosso nome, eu não quero digitar diferente de Jane Doe. Vamos fazer como Tiffany Jones. Espero que seja genérico o suficiente. Então, eu simplesmente vou pegar o sobrenome aqui. Acho que tenho um espaço aqui, então vou pegar o LastName e vamos mudar a cor para talvez essa cor vermelha assim. Ou talvez o sangue azul deixe a cor azul assim. Então agora eu posso simplesmente cérebro nosso layout de volta. E agora podemos ver que precisamos colocar esse cara faz em algum lugar, em algum lugar aqui contra a nossa coluna esquerda, esquerda. Agora, é claro, esse logotipo não precisa ser tão grande. Então, agora podemos simplesmente visualizar nossa página usando esta opção de visualização da área de trabalho. Agora você pode ver que como, basicamente, esse logotipo vai se parecer se você puder verificá-lo para cada lag do tamanho ou não. Acho que é um pouco grande demais, então vou torná-lo menor. Vou deixá-lo para algo como 24 talvez. E agora vamos visualizar esse cara. Acho que parece muito melhor assim. Temos o logotipo. Talvez eu vá me livrar da grade assim. Então, agora é uma boa ideia apenas adicionar a navegação como no, à direita, aqui. Então, já que quero manter tudo consistente, vou pegar esse cara. Então, o logotipo, vou pressionar e manter pressionado o Shift e a tecla Alt é simplesmente clonar esse cara para o lado. Só vou me livrar desse logotipo da Tiffany Jones e vou escrever algo como casa. Agora temos esse logotipo e recebemos nosso primeiro link. Talvez eu vá deixá-lo para algo como 18 pontos. E podemos simplesmente pré-visualizar esse cara. Agora você pode estar pensando que, que poderíamos simplesmente pegar esse elemento e talvez apenas clonar, clonar esse cara algumas vezes à direita para simplesmente construir nossa navegação e poderíamos usar a grade de repetição para isso, se você quisesse. E será muito, muito mais rápido. Mas como eu disse, não vamos apenas projetar algo aqui no XD, também vamos criar protótipos. E a coisa sobre a clonagem coisas aqui dentro do XD é que, se você estiver fazendo isso, apenas pegando e arrastando algo com a tecla Alt selecionada e bem pressionada. Ou, se você estiver usando a grade de repetição, também será como nenhuma clonagem dos elementos de protótipo atribuídos a um elemento específico. Como queremos trabalhar não duro, mas inteligente, acho que seria uma boa ideia primeiro curtir o primeiro protótipo nosso elemento e depois cloná-lo com esse recurso de protótipo adicionado a esse elemento. Então, isso significaria simplesmente que estaríamos trabalhando um pouco mais rápido e um pouco mais inteligente. Então, vamos realmente aprender como adicionar os elementos de prototipagem no próximo vídeo. 25. Vamos criar um protótipo do nosso primeiro elemento: Então, vamos começar a adicionar nosso primeiro protótipo em recurso. E vamos fazer isso simplesmente mudando a cor deste link inicial quando simplesmente alguém estiver pairando sobre ele. E para adicionar alguns recursos de prototipagem a um elemento. E aqui dentro do XD, precisamos transformar esse elemento em um componente primeiro. E podemos fazer isso aqui no Inspetor de propriedades simplesmente clicando neste símbolo de mais nesta guia de componentes. Ou, se você quiser, você pode usar o atalho Control plus K. Então, vou clicar nele. E como você pode ver, agora temos nosso componente e ele também aparece aqui em nossos componentes, no documento, nos ativos do documento. Então, o que é um componente? Component basicamente é um elemento aqui no XD que permite adicionar alguma interatividade a ele. Essa interatividade pode ser como o palco pairando ou talvez como mudar a aparência. Estou mudando a posição, todas essas coisas. E isso pode ser feito dentro de 11 componentes ou em uma série de componentes. Agora, nosso primeiro componente será ultra, ultra simples. Tudo o que realmente precisamos é mudar a cor do nosso link quando passarmos o mouse sobre ele. E isso é como o comportamento típico de um link em um menu que você veria em um site. Então, em nosso estado padrão, nada muda. Este é apenas um avião como um cinza muito, muito escuro. Basicamente texto. Vou clicar neste símbolo de adição que diz Adicionar estado. E aqui eu quero adicionar o estado do mouse. Então, é claro que você pode mudar seu nome, se quiser. Mas eu acho que esse estado de paira é bastante autoexplicativo e só faz o truque aqui. Então, em nosso estado de focalização, como mencionei antes, tudo o que precisamos é apenas mudar a cor. E poderíamos usar a mesma cor azul como temos em nosso logotipo. Então, essa cor azul. Mas também podemos usar outra cor agora, apenas para adicionar alguma variedade, só para que você entenda o que está acontecendo aqui um pouco melhor. Então, no estado de paira, vou apenas fazer o texto ser lido assim. Estado padrão. Deixe-me apenas ampliar. Então, estado padrão cinza, paira o estado vermelho. E podemos verificar e entender essa funcionalidade um pouco melhor depois de atingirmos isso, depois de atingirmos a visualização da área de trabalho. Então agora, se eu passar o mouse sobre esse cara, você pode ver que ele se transforma em vermelho assim. Agora, se você estiver usando a visualização da área de trabalho e se quiser verificar o estado do mouse ou qualquer outro estado, lembre-se de primeiro voltar ao estado padrão de um componente específico. Porque se você voltar para o estado de focalização e, em seguida, se clicarmos na Visualização, você sempre verá esse estado de focalização no OB e como ativado ativo. E não seremos capazes de simplesmente ver o efeito de pairar. Portanto, lembre-se de voltar ao estado padrão quando quiser visualizar alguma coisa. Então, como eu disse, acho que agora, agora é um bom, é um bom momento para tutor transformar esse componente em uma grade de repetição. Então, vou clicar em Repetir Grade. E quando fazemos isso, você pode ver que temos basicamente duas opções aqui que nos permitem repetir esse cara verticalmente assim, o que não queremos. Quero dizer, não estamos construindo um menu vertical ou repetir esse cara horizontalmente, assim, e só temos que decidir quantos links queremos. Agora, normalmente você estaria, se você não estivesse construindo este site para si mesmo, você receberia algumas dicas do seu cliente. Mas digamos que queremos ter um Home Blog, um portfólio de contatos e sobre nós, algo assim. Então Home Blog portfólio sobre nós e contato. Então, mais um link assim. E lá vamos nós. Este é o nosso, esta é a nossa navegação. Precisamos mudar o comprimento. Mas se acabamos de visualizar esse cara, você pode ver que tudo o que como protótipo, a nova funcionalidade é clonada com o, com os filmes de design. Então agora, acho que, acho que poderíamos simplesmente pegar nossa grade de repetição e podemos desagrupá-la. E como você pode ver, temos todos esses componentes aqui. Então, esses são todos os links que temos. Então, vou pegar esse primeiro componente e vou chamá-lo de lar. O próximo será chamado de blog como esse. Este será chamado de portfólio. Este vai ser como sobre nós, Sobre nós. E este vai ser algo como o tato Kong. E, claro, todos esses elementos ainda são componentes, então eles têm o estado de focalização e esse estado padrão. Se agora só queremos pegá-lo, este link como este blog aqui. E só queremos mudar esse texto de casa para blog. Observe que, se você for para o estado do mouse, ainda teremos esse texto anterior. Portanto, não apenas no estado de focalização, no gene da cor, mas também temos um texto separado para esse estado de focalização. Então, aqui, também temos que digitar no blog. Então, agora, se formos para o componente e o estado padrão somente que a cor muda. Então isso é, isso é algo que você precisa saber, deixe o Leve em mente. Lembro-me de que quando eu estava aprendendo isso, o vendedor, esse recurso, fiquei muito confuso. Por que, por que não está mudando como eu quero que mude, porque agora, por que funciona assim? E então eu acabei de perceber que o hardware que você tem que saber, você terá que mudar esses elementos em todos os estados porque se você não fizer isso, você terá algumas surpresas desagradáveis. Então, o Sobre nós, vou para o estado de pairar e vou digitar sobre nós assim. O último deveria ser contato. Então vou mudar isso para entrar em contato assim. E, claro, o mesmo vai para o estado de paira. Então entre em contato. Lá vamos nós. E vamos ver, padrão, estado padrão. A cor muda, apenas a cor muda e apenas a cor muda. Só queremos avisar que você quer mudar, alterar a cor, não o texto. A última coisa a fazer aqui seria apenas pegar talvez nosso layout, como nosso, nossas colunas. E eu só vou prender esse cara para o lado direito e talvez apenas mover esses caras um pouco para o lado. Talvez em algum lugar aqui. E então vou selecionar todos esses componentes. E vou usar esse elemento aqui que diz distribuir horizontalmente. E se eu fizer isso, você pode ver que nossa navegação é simplesmente bem, bem, bem distribuída. Então, agora podemos simplesmente pegar todos esses elementos e simplesmente não ver como essa funcionalidade está funcionando. E podemos ver que temos esse bom efeito de pairo, basicamente muito bom, eu acho. E, além disso, mais importante, aprenderemos como usar isso. Bem, basicamente, como adicionar os primeiros recursos de prototipagem aos nossos elementos. Então agora eu posso, agora acho que podemos simplesmente pegar todos esses elementos. Vou agrupá-los. Vou pressionar Control G no meu teclado. E vou chamá-lo de navegação assim. E essa Tiffany Jones. Vou chamá-lo de logotipo. Lá vamos nós. Lá vamos nós. Basicamente, concluímos nossos primeiros elementos de cabeçalho. 26. Vamos adicionar o Estado ativo e os primeiros elementos do herói: Antes de passarmos a adicionar como alguns Elementos de Herói, selecione a imagem, talvez algum plano de fundo e alguns como principal, cabeçalho principal, chamada à ação principal, todas essas coisas. Acho importante entender uma coisa. E essa coisa são os estados ativos. E eu não estou falando sobre os recursos de prototipagem aqui dentro do XD, mas algo que é importante no mundo do desenvolvimento web e web design também. E isso é importante do ponto de vista da usabilidade, do ponto padrão ou do ponto de vista da UX. Então, em seus designs, você terá que indicar aos usuários qual elemento está atualmente. Digamos que está funcionando como se estivesse ativo no momento. E neste caso, neste caso específico, quando estamos falando de nossa navegação, queremos indicar a eles, bem, queremos dizer aos usuários em qual página eles estão atualmente. Então, neste caso, eles estão atualmente na página inicial, certo? Então, teríamos que dizer aos usuários que essa é a base em que eles estão atualmente. E geralmente será indicado da mesma forma ou usando os mesmos atributos os links que estão sendo pairados ou algo assim. Então, no meu caso, vou pegar o link inicial. E eu quero, eu quero apenas denotar, mudar a cor do texto deste cinza. Deixe-me voltar aos meus ativos, para esta cor vermelha que você bem, usamos há apenas um segundo para criar o estado de paira. Então, se agora vamos ao nosso design, você pode ver que temos nosso link inicial sendo como bem indicado por essa cor vermelha. E então, quando passamos o mouse sobre esses elementos, você pode ver que eles foram bem, bem, eles mudaram as cores quando eles estão pairando assim. Sabe o quê? Quando estou olhando para ele, edite a luz agora, acho que vou mudar rapidamente a cor disso, deste texto aqui só para manter as coisas consistentes e talvez seja um pouco mais atraente. Deixe-me ver. Sim, vai ficar tudo bem. Eu acho. Eu sei que é, é um pouco genérico. Mas não, é mais sobre aprender o XD, aprender a projetar e protótipo em vez como torná-lo o melhor design do mundo. Então, ok, temos o logotipo, temos a navegação. Agora vamos adicionar nossa imagem. E como você já sabe, esta é essa imagem aqui. E acho que deveria ter salvo essa imagem antes. Então deixe-me pegar rapidamente novamente o Retângulo. Vou mascarar muito, muito rapidamente essa imagem assim. Vou para minhas camadas. Vou pegar esse retângulo e a imagem, e vou pressionar Control Shift M no meu teclado para simplesmente mascará-lo. Então agora eu poderia simplesmente entrar, talvez colocá-lo em algum lugar aqui. Então, agora o que eu quero fazer é que eu simplesmente quero acrescentar, talvez eu só vou fazer um pouco maior. Eu simplesmente vou adicionar talvez como um plano fundo aqui. E para isso, vou pegar a ferramenta caneta. E vou simplesmente marcar alguns pontos e estou pressionando a tecla Shift, vou tentar encontrar essas bordas aqui. Claro, podemos sempre, sempre mudá-lo um pouco mais tarde, talvez em algum lugar aqui. E então eu vou fechar a forma para fazer com que pareça algo assim. E eu quero preenchê-lo com a cor do meu tom de pele. E, claro, esse cara precisa ir até a parte de trás. Então, vou pegá-lo e pressionar o Shift de controle mais à esquerda, Suporte esquerdo. Então teclado, tecla no meu teclado. E lá vamos nós. Talvez, talvez este seja um pouco demais, muito grande. Esta imagem é muito vaga, algo assim, e vamos movê-la ligeiramente para o lado. Agora vamos visualizar nosso design. Então começa, começa a parecer bem. Agora, é claro, você não precisa fazer como um plano de fundo como esse, mas está se tornando uma tendência de design comum. Você pode simplesmente adicionar um simples como um retângulo. Você não precisa fazer isso também. Não. Eu tenho que fazer isso como eu não sei. É uma armadilha, pois tenho trapézio ou algo assim. Mas agora é apenas um, acho que é apenas um bom toque de design. E também nos permite ter mais espaço, como aqui à esquerda para adicionar algo como, Oi, sou Tiffany, sou designer. Obrigado por passar por aqui para me conhecer essas coisas. Mas antes de adicionarmos todos esses elementos, ainda temos que fazer uma coisa. Ou seja, temos que cuidar da capacidade de resposta de nossos projetos até agora. E o mais importante aqui é cuidar da capacidade de resposta do nosso cardápio. E bem para fazer isso, teremos que adicionar uma placa de arte separada diferente, separada. E, claro, adicione um menu completamente novo bem construído na verdade. Mas você sabe o quê? Vamos começar a fazer isso no próximo vídeo. 27. Vamos começar a versão móvel: Então, para adicionar nosso design móvel, precisamos ter algo para colocá-lo, certo? Então, precisamos de uma nova prancheta. Então, para isso, vou pegar a ferramenta Prancheta. E a partir das predefinições móveis, acho que vou usar o iPhone 13, Twelve Pro. E eu não quero que fique frio assim. Vou ao meu painel Layers e perceber que já temos isso, bem, esse nome sendo apresentado aqui. Então, temos nossa página inicial da prancheta, temos nosso iPhone 13, 12th Pro home bem, prancheta. Então, vou chamá-lo de um celular doméstico assim. Antes de adicionarmos a navegação, vou pegar o logotipo. E eu simplesmente vou pegar esta prancheta é a prancheta móvel em casa. E aqui também podemos usar o layout da grade. E se agora colarmos esse cara e você pode ver onde temos que anexá-lo. Então, para significar para o lado esquerdo, esquerdo. E acho que é um pouco grande demais. Vamos tentar algo como 18. E agora vamos nos livrar da sobreposição. E talvez até vamos pré-visualizar esse cara. Acho que deve parecer bem. E também antes de adicionarmos essa navegação aqui temos dois. Acho que seria uma boa ideia adicionar nosso plano de fundo, esse plano de fundo aqui. Antes de fazer isso, antes de copiar isso, você pode ver que eu não acho que cliquei corretamente aqui. E podemos consertar isso facilmente. Então, com isso, o que a ferramenta de seleção ativa, o que poderíamos fazer é simplesmente clicar duas vezes dentro uma forma e talvez nada realmente aconteça. Mas você pode ver que eles são como esses delimitadores, essas mudanças na caixa delimitadora têm isso. Você pode ver que temos essas linhas aqui indicando que acabamos de selecionar toda a forma. Mas quando clicamos duas vezes dentro, esses desapareceram. E agora podemos simplesmente pegar os pontos de ancoragem e simplesmente movê-los. Então, é basicamente como se a ferramenta Selecionar estivesse se transformando em uma ferramenta de ponto de ancoragem, algo assim. Deixe-me ir, Oh cara. É um grande. Então, vamos descer aqui. E eu só vou movê-lo para algum lugar aqui. E então vamos ver, acho que esses caras ficarão bem, mas talvez devêssemos mover isso, esse elemento um pouco para o topo. E vamos ver aqui, esse cara parece bem. Agora, talvez, em vez de simplesmente copiar esse cara e, em seguida brincar com esses pontos de ancoragem, eu posso pegar todas as capturas móveis, pegar a ferramenta retângulo. E vamos simplesmente criar um retângulo que se foi e se estende por toda a nossa primeira tela dispersa. Claro, não preciso da fronteira. Eu só preciso preencher e o que seria a ferramenta Conta-gotas que estou inicializando pressionando a tecla I, podemos simplesmente provar essa cor. E novamente, vou pressionar o colchete esquerdo Control Shift para colocá-lo até eles, na parte inferior da pilha, que basicamente seria como usar o menu Objeto, organizar e depois enviar para trás. Então, agora temos que adicionar nosso ícone de menu aqui ao lado. E eu acho que a maneira mais fácil de fazer isso não seria pegar a ferramenta caneta e apenas desenhar tudo nós mesmos, mas podemos usar os ícones para o plugin de design para isso, o eigentlich, o plugin que já conhecemos. E vamos tentar digitar algo como menu. E como você pode ver, temos todos os tipos de menus diferentes e diferentes aqui. Então, talvez eu só me certifique de que estou na prancheta certa. Vamos tentar este menu. Lembro-me não do plano de fundo, mas do menu. Vamos tentar outro. Este é um pouco menor, Definitivamente. E este eu acho que vou com este e agora parece tudo bem. Então agora também podemos alterar a cor deste menu para combiná-lo com o nosso, com nosso logotipo. Mas se você acha que é tão fácil quanto apenas clicar na cor, bem, infelizmente, não é. Quero dizer, você pode ver que a fronteira está verificada aqui. Portanto, deve ser lógico que, se apenas clicarmos em uma cor, essa cor da borda deve mudar. É. Como você pode ver, não funciona assim. Acho que o que eu sugeriria é simplesmente pegar o menu do objeto, ir para o caminho e simplesmente escolher o traçado de contorno, o que faria todos esses elementos em caminhos preenchidos, em vez de simplesmente não fronteiras. E, como você pode ver agora, neste, o Inspetor de propriedades, você obtém o preenchimento selecionado. E agora podemos realmente mudar essa cor para algo que corresponda ao nosso logotipo. Poderíamos escolher a cor vermelha, poderíamos escolher Não, como esta cor cinza. O ponto é aqui que às vezes, se você não sabe por que algo está funcionando como no caso desses, esses ícones, talvez seja uma boa ideia simplesmente trocar os traços com os preenchimentos um Além disso, agora você pode ver que se eu segurar a tecla Shift pressionada, não teríamos problemas com como alterar o tamanho deste ícone. E teríamos problemas com se eu pudesse mostrar o que quero dizer. Se eu for gostar novamente, vou adicionar este menu. Vou movê-lo. Se eu agora tentar ampliá-lo ou torná-lo menor, você pode ver que estamos perdendo isso. Bem, estamos agora distorcendo as distâncias entre eles, entre esses elementos deste menu de hambúrguer. Nós recebemos este menu aqui. Deixe-me verificar rapidamente se tudo está bem alinhado à grade. Como você pode ver, não é. Então, vou movê-lo para algum lugar aqui. E novamente, vou pegar o logotipo e me certificar de que tudo está bem, esteja bem alinhado. Então, conseguimos o logotipo, pegamos o menu e obtivemos o plano de fundo. Então, agora acho que é hora de simplesmente adicionar nosso menu móvel e móvel que acionaríamos assim que clicarmos neste ícone do menu de hambúrguer. 28. Vamos adicionar o menu móvel: Então, vamos agora criar nosso menu. Então, para isso, acho que vou simplesmente reutilizar o que já tenho. Quero dizer, precisamos de uma placa de arte separada para que esse efeito funcione corretamente. Então, vou pegar toda essa prancheta móvel e vou simplesmente duplicá-la. Agora, eu não vou precisar desse logotipo aqui. Claro, também não vou precisar desse ícone de menu. Então, vou simplesmente ir aos meus ícones para o plugin de design. E aqui, vou tentar encontrar algo como um botão fechar. Acho que este deve estar bem, este deve ser suficiente. E eu simplesmente vou movê-lo para algum lugar aqui. Então, ele combina com esse ícone, como o ícone do menu principal do qual, claro, vou me livrar. Então este é meu como um super, super simples, como uma estrutura simples do nosso menu móvel. E vou ligar como menu móvel acionado ou talvez sobrepor assim. Mas, claro, não precisa se parecer com o nosso histórico principal aqui. Na verdade, acho que gostaria de torná-lo não tão significativo. Também só para agora mostrar como, hum, como eles logo entram em interações, como eles seriam. Então eu vou para meus ativos e acho que vou mudar o monte como a cor de fundo para essa cor azulada. E também vou mudar as cores, a cor disso, esse símbolo próximo. Talvez verifique como esse cara vai se parecer. Acho que vai parecer bem. Agora vamos criar rapidamente nossos links. Então, temos um portfólio de blogs em casa sobre nós e contato. Então deixe-me rapidamente, rapidamente, tentar digitar isso. Então em casa. E vamos me fazer verificar essa cor. Esse loop deve parecer OK. E talvez vamos torná-lo um pouco maior, algo como 22. Então, vai ser o blog em casa. Eu sei, vamos rapidamente Repetir o Blog Inicial do Grid. Então será portfólio, Bowers e contato. Então, 12345 no total, podemos simplesmente não, apenas alteramos os links. Então em casa. Havia um blog do que acho que era portfólio do que era sobre nós. E, por fim, temos contato assim. E agora vou desagrupar todos esses elementos. E se você quiser, você pode deixá-los assim, ou simplesmente alinhá-los ao centro. E talvez possamos agrupá-los. Então eu estou pressionando Control G no meu teclado porque agora se apenas o presidente se alinhar no meio da vertical, esse grupo será alinhado em relação à nossa prancheta subjacente. Então, temos nossa sobreposição de menu móvel e temos nosso primeiro logotipo e esse ícone de menu. E temos nossa segunda placa de arte com apenas o efeito de sobreposição do menu móvel. Mas é claro que ainda precisamos inserir esse efeito sabia que Ted algum tipo de interação entre esse ícone e o menu móvel e o ícone de divulgação e nossa tela principal principal. Então, vou para o painel do protótipo. E como aqui, o que eu quero fazer é fazer esse ícone e quando acionado, quando, bem, quando tocado, eu queria gostar de abrir este menu. Primeiro. Vou tentar selecioná-lo. Acho que será mais fácil selecioná-lo aqui. E como você pode ver, temos esse pequeno, o pequeno marcador aparecendo. E podemos simplesmente pegá-lo e trazê-lo para nossa sobreposição de menu móvel. E como você pode ver, ele já criou uma animação para nós, então temos um gatilho definido para tocar. Podemos alterar o tipo dessa animação de transição para animação automática e ou outra. Eu costumo usar animação automática. Parece o mais bonito, eu acho. Portanto, essa é uma maneira de fazer isso, mas você também pode pegar o ícone, selecionar esse ícone, divulgar o ícone. E então podemos apenas a partir deste Inspetor de Propriedades, sem sequer tocar nesta seta branca azul e branca contra o fundo azul, podemos escolher a guia. Mas primeiro temos que definir a interação do AD e, em seguida, temos os mesmos elementos. Então, podemos adicionar o auto animate e, em seguida, podemos simplesmente escolher o quadro de arte, que no nosso caso é o celular doméstico. Se agora começarmos essa funcionalidade de visualização, deixe-me colocá-la no topo. Você pode ver que tudo está funcionando corretamente. Então, quando clicamos neste ícone de menu, você pode ver que esse elemento de sobreposição, prancheta de sobreposição realmente está aparecendo bem. Então está tudo bem e bom. Está tudo funcionando. Mas, para meu gosto, é meio chato. Quero dizer, hoje em dia você pode ver tantas opções diferentes, como as interações entre, como o menu de sobreposição e o ícone que o está acionando. Então, vamos ver como poderíamos pelo menos imitar essas interações embora fossem formas mais modernas de mostrar uma sobreposição de menu móvel. 29. Vamos aprender uma maneira melhor de animar o ícone de menu: Ok, então sabemos como criar transições entre basicamente pranchas de arte. Mas, como eu mencionei antes, acho que isso é, bem, isso é usado para o moderno. Isso foi, pelo menos é um gosto um pouco chato. Então, vamos realmente fazer algo mais divertido. Deixe-me apenas desligar isso. E eu vou reutilizar alguns desses elementos, mas a maioria deles, bem, alguns deles eu não vou precisar mais, então vou pegar esse plano de fundo e este como esse menu. E vou colocá-lo talvez em algum lugar aqui. Por enquanto. Eu não vou usar isso bem, toda essa prancheta na verdade, então eu vou removê-la. Também vou me livrar desse ícone. Quero começar do zero. O que vou fazer é criar um menu, ícone de menu eu mesmo. Então, vou criar como, talvez algo assim. Portanto, é apenas um retângulo simples que vou preencher com cores apropriadas assim. E eu quero que esse cara tenha como cantos arredondados. Vamos, digamos algo como 50. Mas talvez a altura seis seja um pouco demais. Vamos ver, três. Isso deve estar tudo bem. E então eu vou pressionar e segurar a tecla Alt para apenas imprimir esse cara está em algum lugar aqui. Ou também poderíamos usar a opção Repetir Grade para criar apenas mais dois elementos. E então podemos, talvez , fazer algo assim. Deixe-me ver. Parece um pouco bem, embora talvez seja um pouco grande demais, então podemos simplesmente desagrupar esses elementos e simplesmente tornar esse cara um pouco menor. Isso deve ser suficiente. Sabe, eu só não quero dividir os cabelos aqui, mas eu quero ativar esse layout e eu só quero, deixe-me agarrá-los e vou colocá-los em algum lugar aqui. Isso deve ser, isso deve estar tudo bem. Então, o que eu quero fazer aqui, eu quero criar uma transição entre assim, como todo esse estado que seria acionado por esse ícone e esse estado aqui, que basicamente é o nosso histórico e nossos e nossos links. Então, para fazer isso, primeiro, talvez eu vou agrupar esses elementos e vou chamá-los como ícone do Menu Principal. Lá vamos nós. E eu quero que seja como no topo aqui. O próximo passo seria pegar assim, este menu. Pegue esses elementos. Talvez eu os agrupe também. Então, novamente, esse menu e esse cara aqui, e eu vou criar um componente desses dois elementos. No estado padrão. Este menu aqui se foi. Não podemos ver certo? Mas também podemos adicionar um novo estado que eu vou chamar como talvez, eu não sei, grampeado e nesse estado e esse cara, deixe-me pegar todo o grupo. Esse cara vai até aqui. Então, ele vai cobrir tudo. Mas precisa ser assim, esse ícone. Então, novamente, o estado padrão como este, mantido assim. Mas no estado grampeado, também quero alterar esse ícone aqui. Deixe-me apenas me livrar desses elementos. Eu só quero girar esses 33 marcadores três, basicamente três linhas. Então estes, deixe-me apenas, deixe-me abrir este grupo. Então, esses elementos, quero transformá-los em um símbolo X. E para fazer isso, vou pegar esse meio e vou deixar sua opacidade até 0, mas também vou mudar sua cor de preenchimento. Deixe-me voltar, ir para meus bens. E então vou pegar esse elemento. Vou voltar para minha camada. Então esta é, esta, essa linha. Basicamente, o que eu quero fazer é que eu quero virar e girar em 45 graus, eu acredito. E eu quero colocá-lo como derrubá-lo um pouco. Então, vou aumentar esse valor y. E então eu vou pegar esse elemento inferior. E também vou girar, mas acho que vou ter que girá-lo em menos 45. E esse cara tem que subir um pouco. Deixe-me apenas, deixe-me apenas ampliar. Vamos ver em algum lugar aqui. E, claro, eles também precisam ter suas cores mudadas. Então, vou para meus ativos de documentos. E novamente, esse retângulo novamente Document Assets. E então temos algo assim. Então deixe-me voltar aos meus componentes. Então, camadas do componente N, estado padrão como este e, em seguida, estado tocado como este. E também o posicionamento desses elementos também é, também é importante porque este menu de sobreposição está vindo do topo, neste caso, à direita. Mas podemos brincar com ele em apenas um segundo. Vou pegar esse componente, certo? E eu vou para talvez vamos chamá-lo como menu f x, assim. E vou para o protótipo. E no meu protótipo de espaço de trabalho, vou tentar encontrar esse ícone do menu principal. E novamente, eu só vou fazer, o que eu quero é ter certeza de que tudo está bem alinhado. Então eu vou pegar este ícone do menu principal e quero colocá-lo, quero colocá-lo em cima do meu topo da minha pilha aqui. E eu quero que seja o mesmo para padrão e para grampeado. Então, vamos ver. Sim, ok, então está tudo bem. Então, novamente, o espaço de trabalho do protótipo padrão. E no estado padrão, novamente, vou tentar encontrar meu ícone do menu principal. E eu quero dar um gatilho bem, o que vai ser um toque auto animate. Mas aqui podemos, como você pode ver, escolher entre uma placa de arte em um estado para o estado que eu quero escolher aproveitado. E então eu vou para o meu, vamos voltar para o espaço de trabalho de design. E então vou ao meu protótipo estadual de estadias grampeadas. E nesse estado, eu só quero encontrar meu ícone principal do menu principal. Quero adicionar um gatilho de toque, que me levará de volta ao meu estado padrão. E novamente, vou voltar ao Design. Há muitos cliques, mas isso é realmente muito importante aqui. Então. Agora, se acabarmos de visualizar nosso design, se agora tocarmos nesse cara, você pode ver que temos assim, como essa animação agradável. Então, estamos basicamente fazendo com que eles gostem dessa linha média, do meio, a linha do menu do meio aqui para simplesmente desaparecer. E estamos fazendo todos esses elementos como esses, aqueles marcadores restantes para se transformar em símbolos x ou eles estão girando e eles estão mudando essa cor. E, na verdade, escolhendo o, vamos voltar ao protótipo. Escolher a função de animação automática aqui é realmente muito importante porque apenas torna tudo muito melhor. Claro que você pode jogar com a flexibilização. Vamos talvez eu não saber se você quer. Você pode escolher como os limites, se quiser. E então talvez possamos verificar se isso vai mudar alguma coisa. Tem, mas se for melhor, não tenho certeza. Mas você sabe, você sempre pode, você sempre jogará com ele. Como mencionei, o posicionamento de nossos elementos também é importante. Então, por exemplo, se você quiser torná-lo ainda mais legal, poderíamos me deixar pegar meu componente no estado padrão. Poderíamos pegar assim todo o grupo e simplesmente movê-lo para algum lugar assim. E agora, se acabarmos de disparar nossa animação, você pode ver que é como vir de cima, canto superior direito, algo assim. Também poderíamos, por exemplo, brincar com a opacidade de alguns estados. Então, nesse estado padrão, meu plano de fundo é o plano de fundo do grupo e saiba o que, deixe-me chamá-lo de plano de fundo. Este plano de fundo. Sua opacidade está definida para anotar 100 por cento, mas podemos levá-la até 0 por cento. Mas quando voltamos ao nosso estado explorado, esses antecedentes, opacidade precisa voltar a 100%. Então, se agora voltarmos ao estado padrão e agora acionarmos nosso menu, você pode ver que esse efeito de opacidade também está lá. É muito, muito sutil, mas é, está lá. Agora. Acho que gostei mais quando esse homem que estava vindo, como do topo. Então, para o meu estado padrão, eu só quero movê-lo. Deixe-me voltar ao meu passado. Quero movê-lo para algum lugar aqui, e quero trazer a opacidade de volta para 100%. Agora também, se você quiser tornar as coisas ainda mais interessantes, você pode, por exemplo, brincar com a rotação. Então, se eu apenas pegar meu plano de fundo no estado padrão, poderíamos, por exemplo, girar esse cara. O que vamos fazer 360. Sei que não vamos ver uma mudança pode ser alterada aqui porque é um círculo completo. Mas então vamos nos certificar de que isso está definido como 0 quando voltarmos ao nosso estado grampeado. Então, BG definido como 0. Vamos para, vamos voltar ao estado padrão. E vamos ver se isso realmente faz alguma diferença. Como você pode ver, temos antipatia, funky pouco como caneta de rotação acontecendo aqui. Pode ser um pouco demais. Talvez gostássemos mudá-lo de três dezesseis para dizer como 118. E acho que funcionará muito bem. Ainda teremos algumas coisas descoladas acontecendo, mas não é, não é, eu acho que não é demais. Espero que não seja demais. Mas, de qualquer forma, é assim que você também pode criar um efeito de transição como este ou clicar em um fato aqui dentro de X, Z e meio para se mover entre várias pranchetas diferentes. Você pode fazer tudo dentro de um componente, não apenas adicionando interações semelhantes entre pranchetas aqui dentro do design do protótipo, mas simplesmente adicionando interações entre elementos dentro de um componente. 30. Vamos adicionar mais elementos herói: Agora vamos adicionar um pouco mais como Elementos de Herói. E vou trazer de volta essa grade de layout. O que eu quero fazer é simplesmente querer saber, fazer algo como uma breve introdução. Então, vou pegar a ferramenta de texto e vou digitar algo como olá lá. Sou algo assim. E então eu vou ficar como vermelho. Talvez eu vá torná-lo um pouco menor. Então, vamos como 18. E acho que talvez aumentarei o rastreamento aqui. Vamos fazer algo como talvez dois. Pode não ser suficiente, isso é como 20 ou talvez até 60. Agora vamos deixá-lo aos 60. Isso deve estar tudo bem. E então, claro, preciso escrever o nome. Então talvez vamos clonar esse cara aqui. E vou torná-lo significativamente maior. E vou mudar essa cor para a mesma. Então eu acho que vai ser essa cor. Não tenho certeza. Deixe-me desligar esse cara. Sim. Então, precisamos fazer isso talvez assim ou assim. Lá vamos nós. E agora vamos fazer algo como um, como um subtítulo, algo assim. Então, vou pegar esse cara emprestado. E vou digitar algo como designer gráfico freelancer assim. E vou torná-lo significativamente menor, algo como 16 ou 18 deve ser suficiente. Vou colocá-lo em algum lugar aqui. Talvez apenas um pouco para o fundo. E agora vamos criar algo como uma caixa de texto aqui para nossos textos Lorem Ipsum. Só vou criar um retângulo. Vai ficar mais ou menos assim. E do nosso plugin Lorem Ipsum, vou adicionar um pouco de Lorem Ipsum. Agora, é claro, precisamos alterar esse texto para corresponder ao nosso documento basicamente. Então, vamos tentar alterá-lo para nossa fonte. Não tenho certeza se isso está bem, acho que é um pouco vamos também mudar essa altura da linha de 18 para algo como talvez 26. Isso vai ficar um pouco melhor assim. Por fim, talvez vamos adicionar um botão aqui. Então, para fazer isso, vou pegar a ferramenta retângulo, criar algo como um botão com alguns cantos talvez arredondados também. Vamos tentar como talvez 48. E eu só quero que as pessoas aprendam mais. Então, vou pegar esse cara emprestado. E vou digitar algo. Ou talvez eu pegue emprestado, bem, vamos ver como será. Vou pegar esse cara emprestado. E vou digitar como aprender mais. E vamos colocá-lo em algum lugar no meio. E talvez vamos mudar a cor desse cara para gostar desse azul. Isso deve ser suficiente. Isso deve estar tudo bem. E vamos, talvez façamos essas pilhas como branco liso. Então, vamos mudar a cor para branco e colocá-la em algum lugar aqui. E talvez vamos ter certeza de que tudo esteja bem alinhado ao centro. Acho que parece tudo bem. Não quero selecionar cabelos divididos aqui, mas também gostaria de adicionar alguma interatividade ao meu botão. E acho que seria nosso botão principal aqui. Então, vamos pegar esses dois elementos e talvez eu os agrupe e vou transformá-los em um componente. Deixe-me verificar isso no meu painel, no meu painel de camadas. Então, vai ser como Learn More btn. E eu só quero adicionar um estado de focagem. Lá vamos nós. E nesse estado de focagem, meus botões simplesmente vão mudar. É como essa cor de fundo para talvez essa cor vermelha. Então, sempre que alguém passar o mouse sobre esse botão, então vamos apenas visualizar isso. Simplesmente mudará a cor. E talvez eu só vá torná-lo um pouco menor. Vou fazer com que pareça algo assim. E agora vamos visualizar. Parece tudo bem. Eu só, eu só não quero gostar de cabelos divididos aqui. Isso não é como a coisa mais importante aqui. Acho que você já entende como adicionar esse tipo de interatividade. Agora acho que a próxima coisa a fazer aqui para terminar com isso, essa parte seria adicionar como ícones de mídia social, como talvez em algum lugar aqui na parte inferior. Mas vamos fazer isso no próximo vídeo. 31. Vamos adicionar os ícones de redes sociais: Então, agora vamos adicionar os ícones de mídia social. E eu acho que a maneira mais fácil disso seria apenas pegar os ícones para o plugin de design e vamos apenas digitar no Facebook. Eu sugiro manter, manter seus ícones como ícones de mídia social, como dentro de um conjunto. Então, se você quiser usar o Awesome Font Awesome, você pode usar o Font Awesome. Se você quiser usar ícones de iônicos ou de qualquer outro, você sabe, eu aconselho você a manter seus ícones consistentes. Então, talvez vamos com o simples. Não sei por que gosto disso. Talvez porque seja simples. Este ícone do Facebook. E vou tentar colocá-lo aqui, talvez em algum lugar, em algum lugar aqui embaixo. E vou torná-lo menor. Mas primeiro vou me certificar de que essa proporção de bloqueio esteja verificada. Portanto, não temos distorções quando somos elétrons formando nossos ativos. Então, agora vamos adicionar o Instagram. Este é esse cara aqui. Deixe-me tentar agarrá-lo. E vamos manter as coisas consistentes. Vamos fazer 24. Agora vamos adicionar talvez o Twitter. Este é esse cara aqui. Mais uma vez, altura 24. Talvez vamos adicionar, vamos adicionar o LinkedIn. Vamos ver se o temos aqui. Nós fazemos. Então 24, mas vamos bloquear a proporção. Então 24, acho que talvez possamos adicionar como o Pinterest. Temos isso aqui? Nós fazemos. Então, vamos fazer novamente Proporção, taxa proporção de bloqueio e 24. Oh, temos que fazer agora é simplesmente colocá-los onde eles precisam ir. Então, vou tentar agarrar todos eles e alinhá-los ao centro. E talvez vamos distribuí-los para que eles se pareçam mais ou menos assim. Vou colocá-los aqui em baixo. E eu vou trazer, esse padrão pode estar em algum lugar aqui. Isso vai saber, vamos usar mais espaço que temos disponível aqui. E eu acho que todos esses ícones, deixe-me tentar agarrar todos eles devem ter, devem ser consistentes em sua aparência como em sua aparência primária. Mas vamos fazê-los acender esse cinza claro. Isso vai parecer um pouco melhor para o meu gosto. Mas acho que seria um bom, como um toque de design agradável se fizéssemos esses caras mudarem as cores para combinar, pelo menos como combinar vagamente as cores da marca. Então, para fazer isso, simplesmente precisamos transformar esses caras em componentes. Então eu vou primeiro fazer esse componente cara, vamos chamá-lo. Embora eu acho, acho que é bastante autoexplicativo. Então, o estado padrão desse cara é como está, mas o estado do mouse será simples, deixe-me apenas pegar esse preenchimento e tentar torná-lo mais parecido com o Facebook, azul. E este sapato. Acho que isso deve estar tudo bem. Então, vamos fazer agora o Instagram. Acho que vou usar algo como uma cor roxa muito clara. Como apenas um rosa louco. Isso deve ser, isso deve ser suficiente. Agora, para o Twitter novamente, Control K, crie um componente. E vamos criar um estado de focalização. E no estado de paira, vamos fazer esse cara como azul claro. Acho que isso é pairar. Isso é um, esta é a cor do Twitter, algo assim. A maioria delas é, a maioria dessas mídias sociais. Logotipos de mídia social são praticamente parecidos no reino de algo azul. Porque agora, quando adicionamos a cor para o LinkedIn, acho que também é assim azul. E então vamos fazer o Pinterest. Vamos adicionar um estado de focalização do Pinterest. E eu acho que esse cara é, logotipo é um pouco vermelho. Isso deve ser, isso deve ser suficiente. Então volte para o estado padrão agora, LinkedIn, Vamos voltar ao estado padrão, também ao Pinterest e ao estado padrão do Instagram. Então agora vamos apenas visualizar esses caras. Como você pode ver quando passamos o mouse sobre esses elementos, eles simplesmente mudam suas cores para combinar mais ou menos as cores da marca. Então, tudo bem, agora temos alguns elementos de design semelhantes. Temos alguns efeitos semelhantes a protótipos adicionados. E antes de chamarmos isso de um dia, pelo menos com esta seção de heróis, acho que seria uma boa ideia terminar a capacidade de resposta. Então, temos dois agora. Basta pegar essa imagem e todos esses elementos e transformá-los ou transpô-los para nossa prancheta móvel para celular. Mas vamos fazer isso no próximo vídeo. 32. Vamos tornar a seção do herói responsivo: Então, para tornar nossa seção responsiva, basicamente o que precisamos fazer é apenas pegar todos esses elementos, esses elementos à esquerda e à direita, e simplesmente empilhá-los aqui à direita. Então, vamos começar com esses textos. Só vou pegar todos eles. Como esses caras aqui, vou copiá-los. E em toda a minha prancheta móvel, vou ligar a grade. E vou colar todos esses elementos. Então, poderíamos simplesmente tentar tornar esses caras menores assim. Mas não acho que funcionará perfeitamente. Se adicionarmos a tecla Shift a ela, você pode ver que ela começa a parecer um pouco melhor. Também seria uma boa ideia simplesmente gostar de não, alinhá-los ao centro. Então esse cara, então o botão agora, esse texto, todos esses elementos aqui. Só vou alinhá-los ao centro. Vai parecer um pouco melhor. Eu acho que também esse pedaço de texto precisa ser centrado assim. Vou pegar o botão, mas pode estar em algum lugar aqui. E deixe-me desligar a visibilidade desse layout. E como você pode ver, como esses ícones, como esses caras aqui, eles não são como os melhores visíveis. Então eu acho que poderíamos simplesmente não, apenas para o estado padrão, talvez como apenas mudar suas cores para algo como muito, muito cinza claro. Eu costumo ir com um destino de 88. Eu não gostei dessa cor agora. E então teremos que fazer isso por todos os outros. Portanto, para o estado padrão, preencha, basta copiar e colar esse efeito F8, afetar o valor. Claro que você pode. Você pode usar algum outro valor, se quiser. Se você acha que alguma outra cor simplesmente ficaria melhor. Mas acho que parece, parece decente. E agora podemos simplesmente pegar nossa, esta, nossa imagem, esta imagem aqui. E então eu vou colá-lo. E, claro, precisa ser significativamente menor. Estou segurando a tecla Shift e simplesmente vou colocá-la em algum lugar aqui no centro. Mas acho que também podemos usar essa viewport como máscara de corte de sorte. Máscara de recorte em vez de ser ferramenta de corte e talvez torná-la algo assim apenas para que fique mais visível assim. E lá vamos nós. Acho que parece meio, meio certo. Então lá vai você. É assim que você simplesmente saberia, como versões responsivas de seu pelo menos, suas seções iniciais. Basicamente, o que tínhamos que fazer é criar como um menu móvel para o nosso site. E então nós apenas pegamos todos os elementos do nosso menu de seção, seção de heróis, e depois os adicionamos. Nós os empilhamos verticalmente, como aqui, então eles simplesmente correspondem à nossa porta de visualização. Então, o próximo passo aqui seria simplesmente começar a adicionar alguns como nenhum ponto principal do nosso design, como talvez alguns como alguns de nossos serviços ou coisas assim. Então, basicamente precisamos começar outra seção, mas vamos fazer isso no próximo vídeo. 33. Vamos começar a seção Sevices: Certo, então nós criamos a seção principal, criamos a seção de heróis. Então eu acho que agora poderíamos começar a próxima seção. E este simplesmente mostrará o que podemos fazer por nossos clientes. Então, simplesmente queremos enumerar nossos serviços. E você sabe o que, antes de eu fazer isso, antes de criar como um bom plano de fundo aqui. E talvez antes que eu apenas goste Não mova este lado para cima para que possamos seguir isso, como este esquema de design aqui. Talvez eu queira encontrar uma cor diferente para esta seção. Então, é como, muito visualmente distinto da seção anterior. Porque aqui temos muita coisa acontecendo. Temos todas as nossas cores principais e principais. E, na verdade, se eu olhar para eles, sinto que talvez haja algo faltando algum, algum sotaque na cor, talvez algo mais vívido, algo mais brilhante. E eu vou apenas, só quero tentar encontrar algo interessante. Então, para fazer isso, vou copiar todos esses códigos hexadecimais. Talvez não todos esses, mas como os mais proeminentes, como o azul, isso como o tom de pele e talvez o vermelho. E então eu vou apenas para coolers.co, colá-los, esses valores e apenas tentar encontrar algo mais interessante. Certo, como eu disse, estou aqui na coolers.co. Eu liguei o gerador de energia. Só vou começar a trazer as cores. Então, primeiro este azul que eu vou colar esse valor, n assim. E então eu só quero bloquear essa cor e, em seguida, a próxima cor, o tom de pele. Só vou copiá-lo. E vou colá-lo em algum lugar aqui. E novamente, tranque esse cara. E a terceira cor, então esta vermelha. Vou colá-lo novamente, registrar esse cara. E agora podemos apenas pressionar a barra para tentar, tentar encontrar algo, algo como interessante. Eu acho que esses verdes, eles, eles podem realmente funcionar bem. E não tenho certeza se eu gosto mais desse verde mais escuro ou este verde mais claro melhor. Então, acho que podemos simplesmente copiá-los. Então, vou clicar em Copiar hacks. Então vou voltar para o XD. Então, aqui vou adicionar essa cor verde a como esse swell básico, esse fundo. E eu só vou adicioná-lo aqui. E vou pegar o segundo verde. Então esse cara aqui, podemos simplesmente copiar o código. E, novamente, vou adicioná-lo a esse preenchimento. Vou voltar aos meus bens, aros mais uma vez e adicionar esses verdes. Então agora temos isso, isso, bem, esta nova seção com um novo plano de fundo. E podemos ter certeza de que ambos , como este verde mais claro e este verde mais escuro, ambos trabalham com as cores que extraímos, basicamente da nossa seção de heróis. Antes de decidirmos, na verdade, vamos continuar, vou clicar duas vezes aqui para pegar um desses pontos de ancoragem. E eu estou segurando a tecla Shift para fazer Bill, assim como um cérebro velho, esse cara só um pouco até talvez como em algum lugar aqui. E isso deve estar bem, deixe-me ver se eu acertei tudo. Talvez como em algum lugar aqui e vamos descer. Não tenho certeza se acho que parece tudo bem, então agora podemos basicamente decidir se queremos, queremos este verde ou talvez este verde. Acho que vou com este. É um pouco mais como meios de subsistência, é um pouco mais animado. E porque essas cores são, ou talvez um pouco aborrecidas. Então eu acho que podemos saber como animar as coisas com essa cor verde aqui. Então agora podemos simplesmente adicionar como alguns como rho, ver meus serviços ou como posso ajudá-lo. Tipo de título e, em seguida, podemos adicionar os cartões. Mas vamos começar a fazer isso no próximo vídeo. 34. Vamos adicionar os serviços: Então, vou começar adicionando o título. Então, vou pegar a ferramenta de texto. E vou clicar em algum lugar aqui. E vou digitar algo como eu posso ajudá-lo. Lá vamos nós. Eu geralmente gosto de fazer como não, esses títulos que são um pouco mais parecidos as expectativas de Nenhum cliente orientadas. Então, um sub semi ousado, acho que parece tudo bem, mas deixe-me ver que este era médio, o meio aqui também. Tão médio assim. E vou pegar a Ferramenta Rectangle, e vou criar um retângulo no qual vou adicionar algum texto. Então, vou tentar encontrar meu Plugin Lorem Ipsum e vou adicionar um texto assim. E a partir dos meus ativos eu vou escolher isso o mais rápido possível 16, mas você sabe o que, talvez possamos fazer isso como 22. E vamos aumentar a altura da linha para algo como 30. Eu geralmente gosto de fazer. Para a altura da linha, geralmente gosto do tamanho da fonte mais seis ou oito. Agora, da minha prática, acabei de perceber que geralmente funciona, funciona melhor em termos de legibilidade. E também, vamos mudar o preenchimento para apenas branco liso. E vamos deixar esses caras centrados. E talvez eu só precise de duas linhas de texto. E vou tentar colocá-los no meio. Então, vou usar essa opção Align Center. Vou fazer o mesmo por este texto. Vamos colocá-los em algum lugar aqui. Então lá vamos nós. Temos basicamente nosso título. Talvez possamos fazer, fazer um pouco, movê-lo para o topo. Temos o título, temos o subtítulo. Então agora podemos simplesmente adicionar, como, como eu mencionei antes, alguns cartões. E esses cartões serão simplesmente como ícones, títulos e algumas legendas das coisas que podemos fazer por nossos clientes, como web design, desenvolvimento web e Blake, SEO, design de logotipo em preto, marketing de mídia social, todas essas coisas. Então, novamente, vou usar um dos meus plugins para iniciar pelo menos isso como adicionar processo de serviços. Então, vou para ícones para design. E digamos que eu quero fazer como web design primeiro. Então, se você digitar um web design, não tenho certeza se vamos encontrar alguma coisa. Bem, não vamos encontrar nada. Então, vamos fazer algo como talvez laptop. Vamos ver, laptop. Vamos fazer talvez como laptop, Mac. Mas vou clicar neste plano de fundo para ter certeza de que vamos adicionar esse ícone em algum lugar próximo. Então, vou tentar agarrá-lo. Deixe-me apenas ampliar. E digamos que esse ícone deveria ser um pouco maior. Vamos fazer isso assim, talvez como 36 de altura. E vou tentar movê-lo para algum lugar aqui para o lado. E eu acho que se nós apenas se o tornássemos branco, seria chato, eu acho. Então. Em vez de apenas torná-lo branco, vou torná-lo branco, mas também estou no fundo. Então, vou pegar essa ferramenta retangular e vou segurar a tecla Shift pressionada para criar um quadrado perfeito que ficará mais ou menos assim. Então, não preciso do plano de fundo. E para o preenchimento, deixe-me pegar meus bens pegados e talvez vamos começar com este azul. E vamos aumentar o raio do canto aqui para algo como talvez 12. Observe que agora estamos ajustando o raio para todos esses cantos. Então, se você quiser fazer isso, você pode ter que verificar esse mesmo raio para valor de todos os cantos e então você pode inserir esse raio de canto aqui. Mas se você quiser adicionar raios diferentes para diferentes trimestres, você precisa clicar neste raio diferente para cada canto primeiro. E agora você pode fazer como valores diferentes e diferentes para cantos diferentes. Então, se eu não me engano, o primeiro será superior esquerdo, então vamos ter o canto superior direito, inferior direito, aqui e canto inferior esquerdo. Então, vamos apenas entrar no sentido horário com essa taxa, com essas irradiações. Então, acho que 12 pontos devem ser suficientes. Vamos agora tornar esse cara branco assim. E vamos ver se isso vai funcionar bem. Então, é claro que preciso mover esse cara um passo abaixo. Então, vou manter pressionada a tecla Control ou manter pressionado o comando se você estiver em um Mac. E então a tecla do colchete esquerdo para mover esse cara um passo, um passo para baixo. Então talvez vamos aumentar o tamanho desse cara para algo como talvez 4040 deva ser suficiente. Então agora vou segurar a tecla Shift pressionada e clicar neste plano de fundo para adicionar isso à seleção. Então, tudo o que precisamos fazer agora é apenas pegar o ícone e, em seguida, pegar o plano de fundo subjacente clicando nele. E eu só vou me certificar de que tudo esteja bem alinhado ao centro. E assim que for, vou pressionar Control G para agrupar. Ambos os elementos e podemos simplesmente movê-lo talvez como em algum lugar aqui. Então, agora tudo o que precisamos é apenas adicionar o subtítulo aqui ou o título. E depois, como alguns, como alguns textos. Então, para isso, posso simplesmente, e vou selecionar o título e o subtítulo. E agora, se eu segurar a tecla Shift e Alt, e vou apenas executá-la aqui. Vou simplesmente nuvem esses dois elementos. Claro, se você estiver em um Mac, você pode usar a tecla de opção para isso. Então, vamos digitar algo como web design. Lá vamos nós. E é claro que precisa ser sólidos significativamente menores fazer algo como 28. E vamos colocá-lo em algum lugar aqui. E vamos tornar esses caras menores. Vamos fazer talvez algo assim e eu vou colocá-lo em algum lugar aqui. E como você notou, quando movemos esses elementos , você pode ver que obtemos, obtemos esses marcadores nos mostrando esses indicadores nos mostrando as distâncias entre elementos específicos, como nesta região. Então agora podemos ter certeza de que esses caras não são como entre si em distâncias iguais e iguais, certo? Então, temos web design. Então agora podemos apenas pegar todos esses elementos. Mais uma vez. Vou segurar a tecla Alt e a tecla Shift para clonar esses caras em algum lugar por aqui. E vou começar mudando o plano de fundo e lembro que é um grupo. Portanto, temos que clicar duas vezes para chegar a esse retângulo. E pelas minhas cores, talvez vamos continuar, isso, deve ir com o tom de pele. E agora temos que mudar o ícone porque isso vai ser, digamos que isso vai ser um desenvolvedor web. Significou desenvolvimento web. E vamos tentar encontrar algo como o código ou ícone e código de codificação. Vamos fazer talvez como este. E ele precisa ir a algum lugar aqui embaixo. E esse cara precisa entrar nesse grupo. E acredito que foi, sim, é esse grupo 20. Então, vou pegar esse ícone e vou simplesmente imprimi-lo aqui. E não precisamos mais desse ícone, então vou me livrar dele e sua altura é 40. Certo? Então vou usar esse ícone, mudar sua cor para branco, e vou mudar seu tamanho para 40. Analogist, pegue o retângulo para que o plano de fundo e o ícone. Então, vou simplesmente clicar com a tecla Shift pressionada neste elemento restante aqui nas minhas camadas. E eu só vou me certificar de que tudo esteja bem alinhado ao centro. E então podemos simplesmente, você sabe, como mover esse cara para algum lugar aqui. E é claro que podemos simplesmente ter certeza de que estes são, esses caras também estão bem alinhados. E vou movê-los para algum lugar aqui. Então vou fazer, vou repetir o processo. E, claro, até depender totalmente de mu, quantos serviços você quer, você quer compartilhar, você quer mostrar. Pode ser três, pode ser quatro. Isso é totalmente, totalmente com você. Certo. Então eu fiz uma limpeza básica. Como você pode ver, eu tenho um grupo como à esquerda que podemos realmente chamar um cartão de web design. E tem nosso ícone e tem nosso texto de fundo e o título aqui. E este top vai ser web, o cartão. E tem os mesmos elementos. Então agora podemos simplesmente gostar de agarrar, digamos que este. Poderíamos simplesmente cloná-lo para o lado e criar outro cartão. Ou podemos simplesmente clicar com o botão direito do mouse sobre isso, bem, essa entrada de camadas e simplesmente escolher duplicar. Mas, como você pode ver, ele simplesmente o empilhará no anterior. Então, acho que seria uma maneira melhor. Melhor técnica de produção seria simplesmente manter pressionada a tecla Alt e mover esse cara para o lado. Então você pode decidir quantos, quantos elementos você quer aqui. Pode ser três, pode ser para, você sabe, é, é totalmente, totalmente, totalmente com você. Você pode ter como SEO, coisas, você pode ter como marketing de mídia social, talvez como a criação de cursos on-line de você nada. Isso será totalmente com você. Então mudei a cor e mudei o título. Claro, precisamos mudar o ícone. Então, vou para meus plugins e SEO. Eu não acho que vamos ter como um ícone para SEO, mas podemos fazer algo como pesquisar. Vamos ver, talvez eu vá com isso como esse ícone de lupa. E novamente, este é meu cartão copiado. É claro que preciso mudar seu nome. Então, vai ser como um cartão de SEO. E eu vou pegar esse ícone e vou colocá-lo dentro desse grupo. E eu não preciso desse ícone. Nosso ícone Metro, vai ter 40 pixels de altura. E vai ter uma cor diferente. Tão branco. E nós simplesmente precisamos tentar colocá-lo dentro. Então, vamos ver se eu posso simplesmente saber. Acho que parece. Tudo bem. Claro que vamos ter que alinhar essas cartas. Também. Mas, por enquanto, talvez copiei esse cara mais uma vez. Eu só quero ter como outro curinga aqui vai. Eu só quero fazer algo como talvez design de logotipo, algo, mas é mais como o web design também é como design gráfico de certa forma, mas nenhum design de logotipo seria, acho que um pouco mais específico. E esse cara, então esse retângulo, vou mudar seu nome para design de logotipo. Lá vamos nós. Então, esse retângulo vai passar. Vamos talvez verificar essa cor, talvez como a cor preta. Vamos com esse design escuro, cinza escuro e logotipo. Que tipo de ícone devemos procurar, como design de logotipo. Vamos tentar algo como uma ferramenta de caneta. Talvez. Não tenho certeza se vamos ter algumas plantas ou menos é como caneta. Eles tiveram lápis de sorte, um suporte de caneta. Parece um pouco bem. Gosto disso. E não precisamos desse ícone. Vamos fazer, vamos nos certificar de que esse ícone é altura definida como 40, como os outros. E vou tentar movê-lo para dentro do meu plano de fundo. Lá vamos nós. Agora, o que eu faria é pegar o quadro de arte e trazer de volta o layout. E agora podemos ver se podemos realmente gostar de fazer isso, como esses cartões tão grandes, por exemplo, quanto nossas colunas. Então, se eu agora apenas pegar esses e vou segurar a tecla Shift pressionada. Talvez possamos torná-los grandes e esse cara também. Então, vou ser impresso em algum lugar aqui. Talvez um pouco menor, algo assim. E então vamos fazer o mesmo com este. Claro, não é obrigatório. Se você tiver algum tipo de tamanho definido, você pode definitivamente usá-lo porque eu só quero mostrar como você pode usar essa grade de coluna e coluna para agora definir como, quão grande o tamanho deve ser. Talvez vamos imprimir esse cara em algum lugar aqui. Acho que esse cara deveria ser maior. Claro, poderíamos simplesmente saber, ver o tamanho dos nossos primeiros grupos. Então, qual é o tamanho desse grupo, 398 por 353. Então, podemos tentar fazer o mesmo aqui. Então, três, 98353. Então, vamos fazer 353. Este 1398 por três, acredito que foi 3353353. E então esse cara, então 398353. Deixe-me colocá-lo em algum lugar aqui. Então, agora podemos simplesmente pegar todos esses elementos e simplesmente como alinhá-los, distribuí-los horizontalmente. Talvez alinhe-os ao topo. E deixe-me agora apenas clicar no editor de layout. Vai parecer algo, algo assim. Agora, é claro, talvez pudéssemos simplesmente mover algumas coisas. Digamos que eu acho que esse cara deveria ser um pouco, apenas esse texto deve ir para algum lugar aqui. E o resto acho que parece bem. Agora, se você quiser, você pode pegar apenas esses pedaços de texto e talvez mais do que apenas um pouco acima. Como o resumo aqui. Isso deve ser, isso deve estar tudo bem. E talvez vamos ter certeza de que eles estão bem definidos para o topo também. E acho que parece tudo bem. Novamente, você não precisa fazer esses ícones tão grandes quanto as colunas. Então, eu só queria mostrar como você pode usar essa grade para, por exemplo, colocar seus elementos aqui. Então, antes de chamarmos um dia com esta seção, acho que vou apenas clicar duas vezes dentro e pegar esses dois pontos de ancoragem e apenas movê-los para baixo. Eu só quero gostar, adicionar como um botão aqui. Como um call to action vai dizer algo como ver mais ou aprender mais. Mas vamos, na verdade, talvez façamos isso no próximo vídeo. 35. Vamos adicionar o botão chamada ao toque: Então, nosso botão call to action vai ser muito, muito simples. Podemos apenas ir pegar este. Então deixe-me tentar achar que o botão dentro deste grupo será este. Só vou copiá-lo. E vou tentar colá-lo em algum lugar aqui. Vamos descer aqui. E se agora apenas visualizarmos nosso design, podemos simplesmente ter tudo consistente. E, você sabe, e basicamente adicione um botão como este. Mas talvez eu só vá movê-lo um pouco para cima. E acho que pode ser, pode torná-lo um pouco maior. Então, em vez de ocultar 72 camadas, vamos ser como 96. E vamos colocá-lo no centro. Vamos ver agora como ele vai se parecer. Ou eu não quero estar dividindo os cabelos aqui. Mas acho que parece tudo bem. Talvez pudéssemos adicionar mais espaço para respirar aqui. Então, vou pegar primeiro, é claro, precisamos clicar duas vezes dentro desse elemento, o plano de fundo. Shift, clique nestes dois pontos âncora inferiores, e eu só vou derrubá-los. Então agora podemos pegar esse botão e movê-lo talvez como aqui para manter o espaçamento, o espaçamento consistente. Então, agora, se verificarmos o que parece agora, sim, acho que parece muito bem. Talvez esses elementos, esses hidrogênios, sejam um pouco grandes demais. Então, se você não gosta disso, você sempre pode torná-los menores, mas pelo menos eles são proeminentes e, portanto, tudo vai, todos notarem, notará isso. Deixe-me verificar o tamanho desse texto. Então são 18 e acredito que isso seja 18 também. Então, talvez desde que aumentamos o botão, talvez aumentemos o tamanho dessa fonte para algo como 26. Isso vai ser um pouco demais. Talvez 22. E é claro que precisamos fazer esse cara ir para o centro. Então, vamos ver agora, acho que parece um pouco, um pouco melhor, eu acho, do que a última coisa a fazer aqui em termos de criação desta seção seria simplesmente adicioná-la, como torná-la responsiva. Então, ainda precisamos adicioná-lo à nossa prancheta móvel doméstica. Vamos começar a fazer isso no próximo vídeo. 36. Vamos tornar os serviços responsivos: Abrir para fazer agora é pegar toda a placa de arte móvel. E vamos realmente torná-lo significativamente mais alto. Vamos ser brilhantes. Todo o caminho até aqui, talvez. E vou começar com agarrar, agarrar o fundo. Então, vou copiá-lo. E vou à minha prancheta móvel doméstica. E eu só vou colá-lo e trazê-lo até talvez tipo, eu só quero saber, eu só não quero que essa garota seja como flutuando no ar assim e ela parece que foi cortada ao meio. Então, vou tentar trazê-lo talvez como em algum lugar aqui. O que deve estar bem. Eu nem quero saber, como se preocupar com ou talvez, você sabe, talvez eu queira que eu não queira incomodar como fazer esse cara um pouco menor. Então, vamos trazê-lo como em algum lugar aqui. E novamente, vou apenas clicar duas vezes dentro para trazer esse cara para baixo, talvez como em algum lugar aqui, isso deveria ser o k. E acho que teremos que talvez gostar estendido, ainda mais para acomodar todos, todos os elementos restantes. Mas, por enquanto, vou pegar esses dois elementos e, novamente, ir para o meu celular doméstico. Então, esses caras são copiados para minha área de transferência Control V para colá-los. Então agora eu posso simplesmente pegar antipatia desse grupo aqui. E observe que temos esse tamanho responsivo, como verificado aqui. Está ativo. Então, quando estivermos diminuindo, o tornará responsivo. Nós bem, podemos levar ao XD, fazer o trabalho pesado para nós e torná-lo como um dois do tamanho da nossa prancha de arte. Bem, às vezes você pode obter resultados semelhantes que você realmente não queria obter. Quero dizer, se agora tentarmos fazer com que esses caras gostem de adaptar livros. Então, vou tentar fazer esses caras para que você possa ver que o tamanho está ficando pequeno demais, assim. Tudo bem, como este texto aqui embaixo. Mas definitivamente não queremos que esse texto seja tão pequeno. E acho que a diferença é, é porque isso é como o Texto Artístico. E isso é feito usando, bem, primeiro criando-os o quadro com a ferramenta retângulo e, em seguida, adicione algum texto dentro. E aqui, acabamos de adicionar algum texto com a ferramenta de texto. E não, não parece tão bom. Então o que eu faria é pegar esse cara aqui. Quero dizer, eu só saberia como entrar, colocar meu cursor aqui e eu pressionaria Shift mais Enter. E agora eu posso simplesmente pegar como esse cara de baixo e talvez torná-lo um pouco maior assim e imprimir esse cara aqui. Mas vamos ver se agora gostamos de agarrar, como remover esse. Vai olhar, vou remover essa entrada difícil. Vai ficar bem? Vamos, vamos trazer de volta a grade de layout. Como você pode ver, é um pouco grande demais. Então, vamos torná-lo menor para talvez algo assim, como 35, talvez 34 e para baixo. Vamos apenas trazer esse cara para cima. E vamos ver se 34 é suficiente. Acho que seria suficiente. Não é maior do que este e este é 41. Mas se fizermos isso 141 para manter as coisas consistentes, acho que vai ser muito grande. Definitivamente vai ser muito grande. Então, aqui, poderíamos novamente fazer isso duro, difícil Enter e ver como será. Eu não acho que parece que eu não acho ótimo, mas este é o nosso caminho para então não precisa ser tão grande quanto este, que seria o nosso primeiro título. Então este poderia ficar assim, e este estava definido para 22. Talvez vamos tentar fazer como 18. Talvez pareça um pouco, um pouco melhor. Mas se fizermos isso, precisamos aumentar ou diminuir a altura da linha de 30 para 18. Vamos selecionar mais seis será um 24. E vamos ver o que parece. Saiba o que vamos fazer. Talvez como 26, então 18 mais oito. Acho que parece um pouco melhor. Então, novamente, agora podemos pegar como este ícone de Web Design. E acho que vou trazer de volta a grade de lay-out. E vou tentar colá-lo e colocá-lo em algum lugar aqui no centro. E agora vamos ver se nosso tamanho ou recursos responsivos funcionarão corretamente. Então, vamos tentar tornar esse cara menor para algum lugar como aqui. Vamos tentar colocá-lo ao sol, no centro. Acho que ainda precisa ser um pouco menor, algo assim. E acho que talvez vou gostar do cara, esse cara. Então, fizemos esse 1800. Isso é 22. Eu acho. Você sabe o quê? Vamos fazer esse cara como básico, básico 16. Então, vou pegar esse estilo de personagem do meu. Do meu poço, basicamente dos meus ativos. Mas é claro que precisamos mudar a cor e vamos ver como ela se parece. E acho que vou torná-lo significativamente menor, algo assim. E eu acho que deve parecer bem, eu só quero manter algo como uma hierarquia aqui, então eu quero tornar esses caras maiores. E eu não quero fazer esse subtítulo tão grande quanto esses caras aqui. Acho que se mantivermos isso assim, deve estar tudo bem. Então, outra coisa que acho que poderíamos fazer é talvez pudéssemos fazer isso assim. Eu posso um pouco menor para algo, talvez assim. Isso deve estar tudo bem. E é claro que talvez devêssemos trazer esses caras um pouco para cima. Só para que pareça um pouco mais limpo, talvez como aqui na nossa versão móvel. Então, vamos ver rapidamente como será. Aqui. Acho que parece tudo bem, então basicamente o que precisamos fazer agora é que precisamos pegar todos os elementos restantes e simplesmente empilhá-los verticalmente aqui. Então, como exemplo, vou pegar a parte de desenvolvimento web aqui e talvez estar, antes de fazer isso, novamente, vou clicar duas vezes dentro, pegar esses dois pontos âncora e simplesmente suco em nosso cérebro e burro, prenda-os, talvez como dois em algum lugar aqui. Só para, só para ter certeza. E eu vou novamente, deixe-me apenas desligar isso porque agora podemos simplesmente colar aquele cara de volta. Talvez coloque-o para gostar de algum lugar aqui. E se agora apenas pegarmos esses elementos ou este web design, um cartão, podemos ver que seu tamanho está definido para 269 altura, 318 de largura. Então, vamos saber, vamos ver se podemos nos safar de saber como inserir esses valores. Então, foi novamente 38269. Então, vamos ver 318 e vamos fazer como 269. Vamos ver se vai funcionar. Não acho que tenha desaparecido. Então eu acho que seria melhor simplesmente saber, apenas fazer, não fazer esses elementos basicamente como antes. Então, primeiro de tudo, vou pegar este. Vou mudar o tamanho para 16 e a altura da linha para 22. E é claro que precisa ser significativamente menor para algo assim. E vou fazer com que pareça mais ou menos assim. Agora, este fica aqui, mas esse é como esse ícone e o plano de fundo precisa ser menor. Se você notou, esses caras não estão agrupados, então não temos como valores de largura e altura aqui. Se fizermos grupos, esse pode ser o primeiro. Vou agrupar esses elementos. Então, esse ícone e esse retângulo, vou agrupá-los. E agora podemos ver esses valores aqui. Então, se eu agora apenas pegar esse retângulo e esse ícone, vou agrupá-los. E então vamos fazer, acho que foi um 114. Então, vamos fazer 114. Lá vamos nós. E novamente, vou me certificar de que esses caras estejam bem alinhados ao centro. Lá vamos nós. Então podemos simplesmente pegar esses dois elementos e simplesmente colocá-los no topo. Mais uma vez, vamos ao nosso, agora este, vamos pegar nosso design móvel doméstico e vamos ver como ele se parece. Parece um pouco bem, então agora tudo o que precisamos fazer é apenas adicionar o SEO e o design do logotipo. Então deixe-me fazer isso muito rápido e eu vou voltar para você. Ok, então adicionei todos os cartões e adicionei o botão Saiba mais. Também mudei isso, mas o tamanho do nosso plano de fundo. Então, agora podemos simplesmente visualizar como seria em nosso dispositivo móvel. Então, temos o cardápio. E agora, se acabarmos de diminuir o zoom e rolarmos para baixo, você pode ver que temos todos os nossos elementos adicionados. Agora, é claro, se você quiser, você pode alterar o tamanho disso, talvez títulos e talvez os ícones. Vai ser totalmente, totalmente com você. Eu acho que, parece bem do jeito que parece agora, sempre podemos ajustá-lo, ajustá-lo mais tarde. Mas o mais importante é que você entenda como ganhar adicionar todos os cartões como esses e como adicioná-los mais tarde? Bem, como empilhá-los na versão responsiva do seu design. 37. Vamos começar a adicionar os itens de portfólio: Portanto, temos nossa seção de serviços e, claro, também a tornamos como dispositivos móveis. Como você pode ver, eu não consertei alguns, algum posicionamento. Eu apenas ajustei o tamanho um pouco só para fazer tudo parecer um pouco, um pouco mais agradável. E agora podemos realmente começar a adicionar a seção de portfólio. Então, o que vou fazer é pegar esses dois elementos. Vou copiá-los. Vá até aqui e vou colá-los, é claro, o que eu gostaria de fazer é mudar as cores. Então, dos meus ativos, vou escolher talvez como essas cores, essas cores mais escuras. E aqui eu vou apenas, vou digitar algo como conferir meus projetos ou algo assim. Isso deve ser, isso deve estar tudo bem. Então, é claro, o que gostaríamos de fazer aqui é adicionar itens como portfólio. E você pode fazer isso de várias maneiras. Normalmente, os portfólios que você veria nas homepages seriam apresentados em uma forma de galeria. E essa galeria pode ser empilhada bem, pode ser apresentada estagiário. Eu gosto de uma grade ou talvez gosto de um layout de alvenaria, layout de azulejos e coisas assim. Mas o que vamos focar aqui é adicionar interatividade aos itens do seu portfólio para que alguém pairando sobre a miniatura do portfólio veja algum tipo de um interação. Mas antes de fazer isso, vou trazer de volta o layout desse jeito. Porque eu só quero saber, eu só quero basear minha, minha grade basicamente no meu sistema de 12ª coluna. Então, primeiro, vou adicionar talvez como um simples retângulo. E isso vai ser como se fossem primeiro, primeiro item de portfólio, miniatura, e depois vamos adicionar interatividade a ele. Então, vou pegar a ferramenta retângulo. E vou criar um retângulo que vai se estender por essas três colunas. Vamos torná-lo um pouco maior, algo assim. E eu só vou preenchê-lo com um, acho que não precisa de uma fronteira. Eu só vou preenchê-lo com um pouco da cor, mas só para que você possa ver melhor agora, eu só vou caber com essa cor. Mas, em última análise, eu só quero preenchê-lo com algum tipo de foto. Então, estou usando o plug-in Pexels aqui. Só vou digitar o design. As imagens aqui realmente não são tão importantes. É sobre, é sobre o fato de que estamos indo, mas talvez eu só vou adicionar como design gráfico. E eu só vou adicionar este. Por que não? Então, vou clicar nele. E como você pode ver, já temos essa imagem de aparecer aqui e estar bem restringido pelo nosso retângulo que está basicamente funcionando como uma máscara. Então, eu só vou esgotar clique neste layout para que você possa ver tudo um pouco melhor. Vou movê-lo um pouco para baixo. Então o que eu quero fazer aqui é que sempre que eu passar o mouse sobre essa imagem, eu só queria ver como um título desse projeto aparecendo. E vamos pedir algum subtítulo que seria mais, talvez mais parecido com algumas categorias ou algumas informações adicionais. Com este retângulo selecionado, talvez eu vou adicionar outro retângulo que vai ser como, você sabe, como, tão grande. Talvez eu só vá pegar minha ferramenta retângulo e criar um retângulo que será algo assim. Mais uma vez, sem uma borda. Deixe-me verificar se o tamanho está bom. Portanto, é 5366285366 a oito. E vou apenas cobri-lo assim. E agora vou pegar uma cor mais escura, talvez como esta. E o que estou fazendo agora é, bem, este será o nosso estado de pairar. Mas, por enquanto, só quero que você entenda o que está acontecendo aqui. Então eu tenho essa pequena chave. Como um coberto que também será um pano de fundo. Mas bem, está cobrindo a imagem abaixo e será o de fundo do título e do subtítulo. Então, vou pegar a ferramenta de texto. E eu só vou clicar em algum lugar aqui. E vou digitar algo como item de portfólio. E talvez isso seja um pouco grande demais. Vamos tentar algo como 42. Talvez até algo menor, menor como 36. E vou colocá-lo em algum lugar aqui no centro. E vou clonar e descer alguns segurando as teclas Shift e Alt para clonar. Estes, esse cara e restrição, é, seu movimento. E aqui em baixo vai ser como, você sabe, alguma maré, algum título aqui. E esse cara vai ser menor e talvez mais leve. Vamos tentar como 22. Acho que deve parecer bem. E vou tentar colocá-los em algum lugar no centro. Isso deve ser, isso deve ser suficiente. Isso parece, parece tudo bem. Então, o que você está vendo agora é o estado de focalização disso em breve para ser componente. Vou selecionar tudo e vou pressionar Control. Ou se você estiver em um Mac, pressione Command K para criar um componente desse cara. Então, podemos até chamá-lo como item de portfólio assim. Então, no estado padrão, ocioso deseja ver esses elementos. Então, esse retângulo subjacente. Então esse cara aqui, esse cara precisa ter ido embora. Então eu vou trazer isso à tona, trazer sua opacidade todo o caminho para 0. E esses caras, eu quero, eu sou Paul, quero trazer a opacidade deles para 0 também, mas também quero movê-los. Então eu vou levar esse cara para o lado, para a borda desse componente. E vamos imprimir sua opacidade até 0. E com esse cara, vou trazê-lo para o lado, para o lado direito. E vou imprimir sua opacidade para 0 também. Então agora esse é o nosso estado padrão, mas quando adicionamos o estado de focalização a ele, então, no estado de paira , vou voltar para minhas camadas. Então, aqui, eu quero pegar o, este é o retângulo subjacente. Então eu quero trazer essa opacidade todo o caminho para 100%. E então o item do portfólio, esse cara precisa ir ao centro. Então, deve ser como em algum lugar aqui. Lá vamos nós. E é claro que a opacidade também tem que ir para 100%. Claro, podemos sempre verificar, não gostaríamos do item do portfólio. Esse cara, podemos sempre clicar neste Align Center, mas acho que o alinhamos muito bem. E esse cara também precisa ter sua opacidade definida para 100 por cento. E novamente, podemos fazer a mesma coisa. Podemos apenas alinhá-lo ao centro assim. Então, agora no estado padrão, bem, não vemos nada além do estado de focalização. Esses caras estão de volta, para trás aqui, então vou rapidamente para o modo de visualização. Então, vou pressionar Command or Control e Enter no meu teclado. Se você estiver em um Mac, pressione Command Return. E isso vai parecer algo assim, então não podemos ver tudo e nada agora. Passe o mouse sobre ele. Você pode ver esses caras como aparecer. Então, temos nosso fundo subjacente, recuperando sua opacidade. E esses dois elementos. Então, como o item do portfólio, nome e algum tipo, bem, algumas legendas devem estar aqui escritas na verdade. Então, esses caras são como voar pelos lados e também estão recuperando sua opacidade. Então, o que podemos fazer agora é que podemos simplesmente clonar esse elemento para saber, para criar basicamente como uma grade de miniaturas basicamente de itens de portfólio. E não teríamos nossa seção de portfólio criada. Mas, na verdade, vamos começar a fazer isso no próximo vídeo. 38. Vamos terminar o portfólio: Então, antes de adicionarmos mais elementos de portfólio, o que poderíamos fazer é simplesmente adicionar alguns como, como, como um sistema de filtragem desconhecido apenas para indicar o que gostaríamos de alcançar aqui. Então, sempre que alguém clica nesse filtro, como categoria, isso, bem, ele ou ela veria ajustados os elementos correspondentes. Então, vou clonar rapidamente esse cara aqui. E vou digitar algo como tudo primeiro. E, claro, precisa ser muito menor. Então, vai parecer algo assim. E talvez vamos fazer isso como 18. Isso deve estar tudo bem. E então eu vou cloná-lo para o lado e digitar algo como o chamado web design pode ser. E é claro que vou torná-lo um pouco maior. E novamente, Colonia para decidir que vou digitar algo como talvez algo como desenvolvimento web. Quando o loteamento. E, claro, a última coisa seria adicionar, vamos adicionar o design do logotipo. Acho que tínhamos um design de logotipo em nossos serviços. Então, design de logotipo, e eu vou fazer com que eles se alinhem bem. Mas acho que precisamos consertar textos, esses quadros de textos. Então, esses caras estão realmente bem alinhados. Isso deve ser melhor assim. Vou colocá-los em algum lugar aqui. E talvez também pudéssemos não gostar, não indicar qual categoria está ativa. Portanto, a categoria, enquanto a categoria ativa não seria mais proeminente. Então, podemos pegar todos esses elementos. Podemos de nossos ativos, talvez, assim como podemos simplesmente mudar a cor para ser menos proeminente. E talvez eu só traga esses caras. Esses caras têm que se aproximar e colocá-los no centro em algum lugar aqui. Então, vou trazer de volta meu layout de grade assim. Agora o que podemos fazer é simplesmente gostar de clonar esse cara para este lado, alguns novamente segurando as teclas Shift e Alt. E eu vou talvez torná-lo um pouco maior e talvez mais alto para algo assim. Então, vamos criar como um layout de alvenaria. Então agora vamos mudar essa foto aqui, mas primeiro vamos nos certificar de que estamos no retângulo direito que ela está realmente selecionada. Então esse é esse cara aqui. E vamos escolher algo um pouco mais como algo diferente. Ou este é descolado. Então, vamos escolher este. Não sei que tipo de projeto de web design ou desenvolvimento web seria, mas parece tudo bem. Agora, se acabarmos de visualizar nosso elemento, você pode ver que, de fato, temos como esses os mesmos elementos acontecendo aqui quando passamos o mouse sobre esse cara. Mas eles são exatamente os mesmos, os mesmos valores que adicionamos a esse componente. Então, temos que alterá-los, como o estado do mouse também aqui com esse componente. Então, para fazer isso, vamos pegar nosso componente e vamos para o estado de focalização. Então, a primeira coisa que vou fazer é pegar meu item de portfólio ou este item. Vou para o estado padrão e só quero verificar o tamanho dele. Então diz 674997. Acho que vou apenas copiar a largura e vou tentar lembrar a altura, então 997. Então, agora no estado de focalização, novamente, temos que pegar esse retângulo e na verdade, podemos pegar esse retângulo também e apenas colar isso e digitar 997 e no estado de focalização, também estes caras precisam ir para o centro. Então eu acho que eles deveriam ir a algum lugar aqui. E se eu for para o meu estado padrão, podemos verificar se tudo está funcionando corretamente. Acho que ainda precisamos trabalhar como no posicionamento desses elementos como neles. Embora pareça bem assim. Mas, para agora gostar de manter o mesmo efeito que aqui, precisamos definitivamente trabalhar no posicionamento padrão do argumento posicional desses elementos. Então, se formos para o estado de pairar, acho que parece legal, assim, parece tudo bem. Eu acho que essa é a maneira mais prova de erro sobre como corrigir o posicionamento desses elementos Quando simplesmente copiamos os valores e depois os colamos novamente. Então, se você for para o estado do mouse, podemos simplesmente pegar, vamos pegar esse item de portfólio. Então este título aqui, e realmente tudo o que precisamos é o valor y, então a posição, como a posição vertical, por assim dizer. Então, vou copiar isso. Vou voltar ao estado padrão. Vou pegar o título do item do portfólio e vou colá-lo. E então vou voltar para o estado do mouse, pegar essa legenda, pegar essa posição vertical y, ir para o estado padrão do item do portfólio. É como se fosse muito trabalhoso mas acho que, para manter as coisas consistentes, acho que é eu acho que é a melhor maneira. Então, obtivemos esses valores, cole-os. E se agora passarmos o mouse sobre esse cara, você pode ver que estes, na verdade, esses caras estão na posição certa. Mas é claro que acho que esqueci de mudar essa imagem. Então, vamos para isso. Vamos tentar descobrir que essa imagem descolada era esse cara. Então, novamente, se agora eu realmente não estraguei nada, se voltarmos ao modo de visualização, você pode ver que tudo está funcionando como esperado. Tudo o que realmente precisamos agora é manter, continuar criando nosso layout para que possamos saber, clonar esse cara em algum lugar para decidir. E então talvez como diminuir o tamanho para talvez algo assim. Você pode torná-lo ainda menor do que podemos clonar e talvez aqui em baixo e aumentar o tamanho deste guia para algo assim. Então poderíamos talvez, talvez não, vamos talvez até torná-lo um pouco maior. Então agora que podemos, agora nós apenas derrubamos esse cara. Deixe-me apenas construí-lo bem. Então, parece mais ou menos assim. Acho que esse cara deveria ser, deveria subir um pouco. Vamos colocá-lo em algum lugar aqui em cima. E talvez eu vou torná-lo um pouco menor, mas aumentar seu tamanho, algo assim. E por último, esse cara vai descer, aqui e eu vou fazer com que pareça algo assim. Claro. Agora, se eu apenas clicar nisso, se formos para nossa pré-visualização. Então, obtivemos esse elemento, elementos adicionados. Mas, como você pode ver, novamente, precisamos apenas consertar o posicionamento, as imagens e nosso portfólio deve estar, ele deve estar completo. Então deixe-me fazer isso agora muito rápido e eu vou voltar para você o mais rápido possível. Então, como você pode ver, tudo leva muito tempo. Você precisa fazer muitos ajustes e alguns ajustes. Mas quando você terminar, acho que o efeito parece bastante interessante. Quando terminarmos, podemos simplesmente saber talvez apenas algum posicionamento. Quando terminarmos, ainda precisamos usar, você sabe, colocar nosso portfólio em nossa prancheta móvel. E acho que vai ser bastante longo. Mas vamos realmente começar a fazer isso no próximo vídeo. 39. Vamos criar o portfólio: Assim como em todas as nossas seções anteriores, o que precisamos fazer agora é apenas colocar nossa seção de portfólio nelas na prancheta móvel. Então, vou pegar este primeiro título do slide e o subtítulo. E novamente, deixe-me apenas trazer a grade de layout. E aqui, vou colar esses caras. E vamos verificar se podemos realmente fugir com Lucknow tornando esses caras um pouco menores, talvez algo assim. Acho que não podemos deixar, vamos talvez agora ver o que temos aqui. Então, vamos verificar se este é 34 médio e esse cara é uma loja regular dos anos 800. Então 34 médio. Talvez. Vamos apenas verificar. Faça isso com força. Coração entra aqui. E esse cara deveria ser um time. E eu acho que deve parecer, tudo bem, talvez eu só vá torná-lo um pouco menor. E isso deve estar tudo bem, vamos deixá-lo assim. Então, em seguida, vamos adicionar esses filtros. Som basta copiar, copiando esses elementos ou Control C ou Command C se você estiver em um Mac e, em seguida, simplesmente colá-los aqui. Então, vamos agora simplesmente não colocar esses caras como uma lista que vai ficar mais ou menos assim. Eu quero manter como maiores lacunas entre esses elementos porque isso só faria, facilitaria o toque neles em um dispositivo móvel e móvel. Mas é claro que preciso colocá-los no centro e para todo o grupo também. Isso deve parecer bem, mas é claro que ainda precisamos pegar todos esses elementos e distribuí-los corretamente. Então, parece mais ou menos assim. Então, agora podemos simplesmente pegar esse item de portfólio copiado e colado aqui e colocá-lo em algum lugar aqui. E novamente, teremos que brincar com o posicionamento assim. E não se esqueça de que vamos ter que fazer isso por todo o mundo, como todos os estados. Então, não vou ser como manter as variações nos tamanhos apenas para tornar as coisas um pouco mais limpas e mais fáceis de fazer. Então. Eu só vou adicionar rapidamente esses elementos. Então copie e cole em algum lugar aqui. E eu vou fazer isso, tornar esse cara menor. Então, vou ver o quão grande esse cara é. Portanto, é 454 e, claro , precisamos anexá-lo às colunas. Então, para 54, assim, talvez eu vá falar sobre isso. Mais uma vez. Esse cara cópia colada aqui, torná-lo menor. E novamente, foram quatro ou 54? Acredito que foi. E então talvez vamos fazer esse cara. Então, cópia colada aqui. Mais uma vez, torná-lo menor. E quatro ou 54. E ainda temos esses dois caras restantes. Então cole-o aqui. Faça com que seja menor para quatro ou 54. E suba. E novamente, esse cara cola-o aqui, coloque-o onde ele precisa ir. Então quatro ou 54, assim. Mas é claro, não terminamos porque, você sabe, uma vez que passamos o mouse sobre esses caras, então, se acabarmos de visualizar esse cara, eu vou para cá. Você pode ver que quando passamos o mouse sobre ele, não vai ficar bem. Na verdade, vai parecer muito terrível. Então, temos que fazer de novo, fazer todas essas coisas para todos os estados. Então, pelo menos você sabe o tamanho. Então, faça com que seja menor. E para 54 assim, novamente com esse cara, para o estado de paira. Tão menor e quatro ou 54. E acho que ainda precisa ser menor, esse cara assim. E, claro, teremos que consertar isso. Bem, o texto. Então esse cara parece bem. Vamos pegar esse cara. E vamos ver, como no estado padrão, vamos fazer algo como 38. Vinte e cinco, isso pode ser um pouco demais. Vamos u1. 0 de maio seja um pouco mais. Então eu só vou fazer um aqui e então eu vou, não, eu não vou ser como aborrecê-lo sem como verificar as distâncias de todos os outros elementos. Vou fazer isso rapidamente como fora da câmera. Mas só para ver o que vai, como isso precisa ser feito. Então, estado padrão, vamos apenas fazer três. Talvez eu tenha copiado esse cara. Lá vamos nós. Portanto, o estado padrão deve parecer, deve procurar. Ok, então deixe-me agora fazer isso rapidamente para todos os elementos restantes. Certo? Então, quando tudo estiver pronto, quando todas as distâncias e tamanhos são basicamente rastreados e, claro, também gosto de mudar ligeiramente o tamanho desses elementos. Você pode ver como parece, parece um pouco melhor agora. Até agora, tão bom, mas não queremos que apenas alguém passe o mouse para ver. Gosto desses elementos, como esses elementos interativos. Também queremos indicar que quando alguém clica em um desses elementos, bem, o usuário será realmente levado para uma subpágina como uma subpágina para com eles, com nossas imagens de portfólio leve ou para um galeria separada que está de certa forma conectada com um desses elementos aqui. Assim, podemos, é claro, fazer isso aqui dentro, dentro do Adobe XD e, na verdade, vamos fazer isso. Mas no próximo vídeo. 40. Vamos adicionar um carrossel de imagem: Portanto, o efeito que eu quero alcançar aqui não é apenas alguém passar o mouse, mouse sobre qualquer um desses itens. E ele vai ver algum título e um subtítulo, esse tipo de efeito. Mas também quando essa pessoa clica em qualquer uma dessas miniaturas, ela será como não redirecioná-la para ele, para um carrossel de imagem que , naturalmente, será interativo também. Então, vamos fazer isso agora. Então, o que eu vou fazer é um pouco ir para criar uma nova prancheta. Então, vou pegar a ferramenta Prancheta. E eu quero que este carrossel de imagem cubra toda a janela de exibição. Então, vou escolher como desktop web 19, 1920. Quero adicionar alguns elementos aqui. Primeiro de tudo, vou criar uma impressão de que na verdade ainda estamos no mesmo quadro de arte. Então, vou copiar todos esses elementos e vou colá-los aqui neste carrossel de imagem. Porque sempre que você gosta em uma página típica, quando você clica em algo como um elemento de portfólio, como a cama, o pano de fundo permanece, mas é como, como coberto com esse carrossel de imagem. Então é isso que eu quero alcançar aqui. Então esse cara fica. Mas vou cobri-lo com um retângulo como um simples que todas as bordas. Mas vai ter um preto da sorte e depois preencher. E vamos tentar algo como 90% talvez de opacidade. Então, basicamente, pareceria algo assim. Talvez vamos fazer oitenta e cinco, assim. Então, sobre esse plano de fundo, quero adicionar como basicamente alguma imagem, carrossel de imagem. E vou criar algo como muito, muito simples, como um controle deslizante onde as três imagens apenas para que você entenda como criar um carrossel de imagem ou um controle deslizante como este aqui dentro do XD. A primeira imagem que vou usar será essa imagem aqui. Talvez, na verdade, vamos tentar copiá-lo. Então, vou apenas copiar esse cara e tentar colá-lo aqui. E, claro, eu gostaria torná-lo significativamente maior. Então, parece mais ou menos assim. Talvez um pouco mais alto. Algo assim. Isso deve ser suficiente. Agora, aqui na parte inferior, vou digitar algo como o título do projeto. Então, título do projeto, mas eu quero que seja uma lista significativamente menor de algo como 26. E eu vou mudar sua cor para branco simples. E vou tentar colocá-lo em algum lugar no centro, em algum lugar aqui. Para que tudo funcione, precisamos adicionar mais imagens e precisamos mascará-las. Então deixe-me pegar este retângulo e vou copiá-lo para o lado, talvez como em algum lugar aqui à esquerda. E talvez você saiba o que, na verdade é como, pegar tudo, todos esses elementos e eu vou junto com o quadro de arte e esse cara. Então, primeiro vou tentar pegar a prancheta. Vou colocá-lo em algum lugar aqui. Apenas sono, as imagens não estão cobrindo essas pranchetas aqui. E vamos ver se o que vamos apenas copiá-lo mais uma vez para o lado. E vou tentar mudar essa imagem. Vamos fazer algo como talvez, eu não sei, Designer. E vamos adicionar uma imagem. Lembre-se, como talvez vamos tentar encontrar algum tipo de web design. E, na verdade, talvez seja normal, como Vamos adicionar esta imagem. Por que não? E vamos novamente copiar isso, ir para este lado. Os rapazes colocam em algum lugar aqui, e vamos talvez, vamos adicionar este. Por que não? Então agora temos que, como mencionei antes, temos que mascarar esses caras. Então, novamente, vou pegar a Ferramenta Rectangle e vou criar um retângulo que vai cobrir essa imagem. Não precisa ter uma borda, mas temos que adicionar todos esses elementos. Então, essas duas imagens e também os elementos subjacentes, ou talvez seja mais fácil pegar esses dois caras. Vou colocá-los em algum lugar aqui para o topo, só para que você possa ver tudo melhor. E esse cara vai, talvez vamos colocá-lo no topo também, em algum lugar aqui. E esse elemento também vai para o topo para algum lugar aqui. E vou ter certeza de que todos esses caras estão bem alinhados. Então, é claro, essa soma, como esse retângulo branco, precisa ir para o topo. Esta será a nossa máscara em elemento. Então, vou pegar todos esses elementos e podemos ir ao menu Objeto e escolher Máscara com Forma antiga simplesmente ou simplesmente usar o atalho Shift plus Control plus M. Então, isso não é, isso é mascarado. Então, vou trazê-lo para cá. Então, aqui em algum lugar, para algum lugar por aqui, isso deveria ser, isso deve ser um pouco melhor. Então agora precisamos de algum tipo de navegação aqui. Então, vou pegar a ferramenta caneta. E eu simplesmente vou criar, mantendo pressionada a tecla Shift como uma cabeça de seta que ficará assim. Vamos torná-lo branco. E vamos torná-lo significativamente mais espesso, mas talvez menor para algo assim. E vou colocá-lo em algum lugar aqui. Claro, também poderíamos colocá-lo aqui para o lado. Mas eu só, eu só, eu só gosto disso aqui. Então, em seguida, vou cloná-lo para o lado. Então eu estou mantendo pressionadas as teclas Shift e Alt. E a partir do painel de transformação aqui, vou escolher virar horizontal. E quando selecionamos todos esses elementos agora, podemos simplesmente distribuí-los horizontalmente. E talvez eu vá agrupá-los por enquanto, porque eu só quero ter certeza de que eles estão bem no centro. E agora podemos desagrupá-los. Lá vamos nós. O que precisamos fazer agora é que precisamos criar um componente fora da nossa máscara. E esta pequena flecha e esta pequena flecha nas setas esquerda e direita. Então, vou fazer dele um componente. E esse é o nosso estado padrão, mas precisamos de mais alguns estados na verdade. Então, vou adicionar um novo estado que será chamado de slide um. E nesse estado, se tentarmos chegar à nossa máscara, só precisamos pegar esse retângulo, esse retângulo e esse retângulo. Então, todas essas imagens e simplesmente mova-as para o lado para algum lugar aqui. Então, em seguida, vou adicionar um novo estado. E será o nosso slide através não porque o estado padrão é, na verdade, nosso slide, slide para gostar neste grupo. Então nosso slide três vai ser, deixe-me pegar novamente a máscara, todos esses caras e simplesmente movê-los para o lado para algum lugar aqui. Então, o estado padrão, deslize um , então o esquerdo, imagem esquerda, slide três, a imagem direita. Então, agora podemos ir para o painel protótipo. E aqui, tudo o que temos que fazer isso. Temos que dizer às setas para apontar para um estado específico. Então, no estado padrão, eu quero pegar isso. Vamos começar com a seta para a esquerda. A seta para a esquerda quando estamos nesse estado, quando clicados, precisa ir para o slide, o primeiro slide. Então, vou adicionar uma interação. Haverá toque, animação automática, e eu vou escolher Slide um. E esse caminho, essa seta vai ter uma interação e animar automaticamente, escolha o quadro de arte. E vamos com o slide três. Então, agora, quando clicarmos na seta para a esquerda, vamos para o slide. E a seta para a direita, quando clicada, nos levará a este slide três. Mas temos que fazer isso para todos os slides. Então, vou para o modo de design. E no componente, vou escolher deslizar um de volta para o protótipo. E aqui, quando clicamos neste slide, esta seta para a esquerda. Então, quando clicado, esse cara deve nos levar ao nosso terceiro slide porque estamos criando algo como um loop infinito aqui. E esse cara, então a seta para a direita, quando clicada, deve nos levar ao estilo padrão, que é o nosso segundo slide. E o último cara é o nosso slide três. Então, novamente protótipo. E aqui, quando clicamos, bem, ok, vamos começar com este. Então, quando clicamos na seta para a direita, é suposto nos levar a este slide, um. E quando clicamos nesse caminho cinco, então nossa seta para a esquerda, esse cara deve nos levar ao nosso estado padrão e eu estou, eu não estou brincando com essas coisas. Agora, como a duração em que ela é definida por padrão assim, acho que parece tudo bem. Então, agora podemos realmente, quando eu voltar ao design, ao design e configurá-lo para o estado padrão, podemos simplesmente verificar como será. Portanto, esse é o nosso estado padrão. Vamos clicar uma vez. Vamos voltar para o slide para o slide um, clicar novamente, deslizar três novamente, novamente. E como você pode ver, tudo está bem, bem funcionando. Mas ainda há duas coisas que precisamos fazer bem, antes de tudo, precisamos ser capazes de cancelar esse carrossel de imagem. Então, para isso, vou para o protótipo. E aqui podemos adicionar como um símbolo X. Mas eu quero que você aprenda como outra, uma técnica diferente. Estou selecionando toda a minha placa de arte e vou adicionar uma interação. Mas em vez do gatilho de toque, vou configurá-lo para perder e ganhar Pad. E aqui podemos simplesmente pressionar uma tecla para basicamente torná-la como um gatilho para nossa interação. Então eu quero apenas, eu quero que o usuário possa simplesmente pressionar a tecla Escape no teclado para cancelar isso, desta placa de arte. Então, vou apenas pressionar Escape. E nosso destino é nossa página inicial. E também quando vamos para o nosso, vou para o design e vou pegar esse componente, ir para o estado de paira, então, e depois voltar para o protótipo. Então, quando alguém clicar nesse componente, vou adicionar uma interação. E essa interação será aproveitada. Quero que ele ou ela seja direcionado para o nosso carrossel de imagem. Então, vou voltar ao design. Então agora eu só quero que você entenda que todo esse padrão de interatividade aqui. Então, vou rolar para baixo até o nosso portfólio. Quando eu passar o mouse sobre ele, você pode ver que essa animação está acontecendo. Clique nele. Vamos ao nosso carrossel de imagem. E, claro, aqui, temos nosso carrossel funcionando e pressionamos Escape para voltar à nossa página inicial. 41. Vamos começar a adicionar a seção Blog: Tudo bem, então nós criamos nossa seção de portfólio aqui. E se você notar, eu já tenho simplesmente alongado meu, meu quadro de arte. Então eu só peguei o quadro de arte e simplesmente fiz isso um pouco mais longo. Porque aqui, agora eu quero adicionar outra seção. E essa seção será nossa blob. Mas como estamos começando a adicionar muitas coisas aqui, acho que é uma boa ideia fazer uma limpeza básica nesta fase do nosso design. Então, se quisermos e selecionarmos todos esses elementos e ir para nossas camadas, você pode ver que temos, todos esses elementos estão simplesmente sendo colocados em nossa página inicial, seu quadro de arte. E eu não quero que não quero que fique assim. Eu quero apenas agrupá-los. Então, vou pressionar Control G no meu teclado. E vou chamá-lo como portfólio, seção, assim. Então vou tentar pegar todos esses elementos. Então, não gosto da seção de serviços. Então, esses são todos esses elementos. Vou agrupá-los novamente. E esse cara vai ser como Sir, seção de serviços. E então eu vou pegar todos esses elementos. Então esses caras aqui, vou agrupá-los e vou chamá-los como seção de heróis nav plus. E dessa forma, quando você tiver isso, bem, quando você vai trabalhar com eles com esse arquivo específico que eu vou fornecer a você. Dessa forma, estou mantendo as coisas organizadas, mas também estou mantendo-as organizadas para você. Então, como você vai trabalhar com esse arquivo, acho que será mais fácil para você entender o que tudo está aqui. Então, agora podemos realmente começar a criar nossa seção de blog. E eu quero que seja diferente disso da seção anterior do portfólio. Então, vou para a Ferramenta Rectangle, criar um retângulo com uma aparência mais ou menos assim. Eu não quero que ele tenha nenhuma fronteira, mas eu quero que ele tenha um preenchimento. Estou pensando que vai ser um pouco mais escuro. Então, quando rolamos para baixo, você pode ver que ele simplesmente parece muito mais diferente do que na seção anterior aqui. E, claro, tudo o que temos que fazer aqui é adicionar algum tipo de título com a ferramenta de texto. Vou digitar algo como aqui está meu blog. E eu gosto da cor branca, mas quero ter certeza de que o tamanho é exatamente como os títulos da seção anterior. Então, é um subquatro médio. E é claro que fica aqui em nossos ativos. Mas se clicarmos nos ativos, você poderá ver que a cor muda. Eu não quero isso. Gosto disso. Bem, o pulmão branco vai colarinho branco aqui, cor clara. E eu quero que ele vá para o centro, talvez um pouco até o topo. Também poderíamos pegar isso, esse cara aqui. Então, o subtítulo, e também talvez quando eu estiver aqui, eu vou pegar esses elementos também. E vou copiá-los e colá-los aqui e colocá-los em algum lugar aqui. Então, é claro, a cor desse cara também precisa ser branca. E no que diz respeito a esses caras, o que eu quero fazer com eles é que eu simplesmente quero transformá-los em categorias semelhantes do meu blog. Eu só quero mostrar que, você sabe, que eu tenho posts como na categoria web designer, desenvolvimento web, SEO, todas essas coisas. Então eu quero ter o botão Tudo assim aqui, mas vou mudar sua cor para talvez como esse cara. E esses caras. Vamos ver. Acho que esta é essa cor cinza. Sim, é. Acho que parece tudo bem. Você sabe o quê? Acho que parece bom e definitivamente vai ser consistente. Mas vou mudar o texto para categoria, talvez como um. Lá vamos nós. E é claro que precisa ser um pouco maior. Esse cara. Talvez possamos simplesmente copiar esse cara e colar o, colar esse cara n. E vai ser dois. E esse cara vai ser a categoria três. Lá vamos nós. E é claro que precisa ser um pouco maior assim. Então, tudo o que precisamos fazer agora é selecionar todos esses elementos. Talvez eu só vá trazê-los e selecioná-los e simplesmente ter certeza de que eles estão bem distribuídos para o centro. Ok, então temos nossos primeiros passos na criação desta seção de blog atrás de nós. E acho que no próximo vídeo podemos realmente começar a adicionar os trechos da postagem do blog. 42. Vamos começar a adicionar os trechos de posts do blog: Assim como no caso do nosso portfólio, podemos adicionar trechos de postagem do nosso blog. Primeiro, ative a grade de layout dessa forma. E agora podemos simplesmente decidir quantos, quantos trechos de postagens do blog queremos aqui. Então, vamos criá-los rapidamente como um modelo de trechos de postagem do nosso blog. Só vou pegar a ferramenta retângulo. E digamos que eu vou criar algo assim, talvez um pouco menor assim. E então eu posso pegar meu retângulo e talvez imitar algo como um título. E então eu vou pegá-lo mais uma vez e apenas torná-lo maior, algo assim. Então, isso seria basicamente nosso como um nulo. Esta será a nossa imagem, esse seria o nosso título e esse seria nosso, basicamente deixe alguns, algo como um trecho do nosso post no blog. Talvez eu vá trazê-lo um pouco aqui. Mas também acho que poderíamos adicionar algo que não gostávamos antes. Então, vou copiar esse cara para o topo e vou torná-lo menor, como significativamente menor. E isso basicamente poderia imitar nosso nome de categoria à esquerda e talvez como um encontro à direita. E talvez eu só traga esse cara só um pouco aqui em cima. E então o que poderíamos fazer é simplesmente pegar todos esses elementos, Klong eles para o lado. E depois mais uma vez para ver se realmente queremos que esses caras pareçam algo, algo assim, qualquer coisa que três seja suficiente. Mas eu quero pegar esses elementos. Então nós simplesmente os elementos de texto, por assim dizer. Vou trazê-los em algum lugar aqui. E vou fazer esse cara em um pouco mais. Então, talvez até um pouco mais ou algo assim. Só para você saber, só para que não pareça em uma grade super, super uniforme, até mesmo, talvez até um pouco mais. Então, dois, algo assim. E eu também vou pegar esses elementos, puxá-los para algum lugar aqui, e imprimir esse cara para algum lugar aqui. Então esse basicamente seria nosso layout de grade. Mas também podemos pegar todos esses elementos, exceto o plano de fundo. E acho que meu histórico não está sendo colocado corretamente assim. Então deixe-me agora apenas fazer esse plano de fundo um pouco mais longo. Então, parece mais ou menos assim. Agora poderíamos simplesmente gostar de brincar com o posicionamento da nossa célula de grade sem o fundo. Então, vou clonar esses caras. Estou segurando a tecla Alt. Vou cloná-lo para gostar de algum lugar aqui. Então vou pegar esses caras. Então, esses elementos, exceto o plano de fundo, acho que talvez possamos bloquear o plano de fundo. Então este é o nosso retângulo aqui. Este é o nosso passado. Então, vou trancá-lo. E agora podemos pegar esses caras e simplesmente cloná-los em algum lugar para decidir. Isso deve ser, isso deve estar tudo bem. Agora deixe-me pegar esses elementos e cloná-los na parede, até o fundo em algum lugar aqui. Então isso basicamente seria algo como um, como uma grade para o nosso, para nossos elementos. E você pode brincar com grades como essas para que eles saibam, então eles parecem exatamente do jeito que você gostaria que eles parecessem. E basicamente o que precisamos aqui é simplesmente transformar esses elementos como esses principais em imagens em destaque. E, claro, não quero que esse cara tenha uma fronteira. Eu também não quero que esse cara tenha uma fronteira. Talvez eu só vá selecionar todos eles e apenas me certificar de que nenhum deles tem fronteiras realmente assim. Então agora eu posso selecionar talvez como este retângulo. Mais uma vez, paxos. Então, vamos tentar não gostar de encontrar algo como um designer talvez desta vez. Vamos fazer talvez como esse cara. Vamos agora fazer essa garota aqui. Então vamos ver, talvez vamos fazer alguma coisa. Talvez como esse cara. Então vamos fazer, vamos carregar mais. E vamos adicionar o designer de moda antipatia Angus. nada, é claro que a representação é apenas uma maquete. Talvez vamos fazer esse cara. E, por último, este aqui. O próximo passo aqui seria apenas adicionar texto aos nossos títulos, como títulos de maquete e maquete como aceita. Assim como o plug-in certo. Então Lorem Ipsum plugin, podemos preenchê-lo com texto de espaço reservado. E é claro que precisa ser maior. Então, vamos para nossos ativos. Vamos tentar assim, um submédio 36, e vamos torná-lo branco assim. E acho que neste momento, talvez pudéssemos ligar, desligar a grade de layout assim para que você possa ver melhor o que está acontecendo aqui. Acho que é. Ok, talvez possamos até adicioná-lo como um ativo assim. Vamos fazer, em vez de como o SF-36, vamos fazer postagem no blog ou como x, ou talvez o título da postagem do blog. Assim. Poderíamos fazer o mesmo aqui. Então, plugins, últimas configurações, esse cara. Mais uma vez, o título da publicação do meu blog. Talvez vamos tentar encontrar algo como um texto diferente. Mas, novamente, vou para o resíduo dos meus plugins como Lorem Ipsum. E vamos fazer o título da publicação do nosso blog. Vamos fazer o mesmo aqui. Então Lorem Ipsum, Alice, basta adicionar, adicionar aqui e depois aqui. E então podemos simplesmente clicar nesses caras. Talvez isso seja um pouco mais rápido e apenas mude a cor. Então, parece mais ou menos assim. Agora podemos fazer o mesmo com esses caras. Vamos ver se eu, se eu selecionar todos esses elementos, todos esses retângulos, vou para o plugin. Vamos ver se é inteligente o suficiente para adicionar texto a todos esses. Então, vamos fazer um Lorem ipsum rápido. O a estava sobre como podemos assumir que talvez achar uma fonte melhor para isso. Então, vou começar com talvez um sub 16. E vou mudar a cor para branco. Mas acho que esse trecho talvez seja um pouco grande demais. E talvez vamos tentar algo como 22. E vamos fazer como 32k, talvez isso pareça um pouco melhor. Então, 20 a 32, vamos adicioná-lo aos nossos estilos de personagem, e vamos fazer um trecho de blog assim. Então, podemos selecionar esses elementos subjacentes enquanto isso, esses fragmentos. E vamos fazer um trecho de postagem do blog assim e parece ruim. Ok, talvez, talvez esses resultados extras sejam um pouco longos demais, mas sempre podemos saber como talvez transformá-los, fazê-los parecer um pouco diferentes, algo assim. E talvez esse cara também para algo como talvez três linhas ou duas linhas. O mesmo com esses caras. Claro. Então nós teríamos que simplesmente não gostar de trazê-los um pouco para cima. O mesmo para esses caras e o mesmo para esses caras. Claro, a última coisa a fazer aqui seria adicionar como uma data e um nome de categoria silícica. Esses metadados, geralmente, são menores. E eles também podem ser escritos em uma fonte diferente, mas em uma cor de fonte lipídica e diferente. Então eu vou manter esses elementos, então esses dois retângulos. E vou adicionar como um pedaço de texto em algum lugar aqui no centro. E vou digitar o nome da categoria semelhante. Lá vamos nós. Vou mudar sua cor para talvez, vamos ver se esse cara vai trabalhar. Claro, precisamos mudar a cor de fundo, mas por enquanto, vou colocá-la em algum lugar aqui. E vou torná-lo significativamente menor, como algo como 12 talvez, ou talvez 14. Isso deve ser suficiente. E vamos fazer com que esses caras se pareçam com essa frase. Esse cara é muito, muito pequeno. Vou colocá-lo em algum lugar aqui. E vou digitar a data. Isso deve estar tudo bem. Talvez como esse nome de categoria. Só vou digitar como um espaço. E então eu acho que é chamado como um símbolo de tubo e não algo assim. E talvez agora eu só vou digitar a data. Talvez seja um pouco mais fácil para nós. E vamos ver se ele vai ser realmente visível. É um pouco visível, mas talvez possamos torná-lo um pouco mais visível. Então, vamos torná-lo um pouco mais leve para algo assim. Então tudo o que realmente teríamos que fazer é talvez trazer esse cara. Então, mas até algum lugar aqui. E acho que parece muito bem. Então, na verdade, tudo o que podíamos fazer agora é pegar talvez até todos esses elementos e apenas copiá-los. E podemos simplesmente substituí-los por esses caras aqui. Sei que estamos dando talvez até alguns passos demais aqui, mas eu só queria mostrar a vocês o processo de conceituar coisas, coisas como essas. Claro, com o tempo, você vai encontrar como, você sabe, suas próprias melhores maneiras de fazer essas coisas. Então, vou pegar esses caras e remover todos esses elementos assim. Só vou colar esses caras. Mas eu só acho que é simplesmente como um bom, bom exercício para nós simplesmente passar por esses passos que sabem como talvez com o tempo, você vai, você vai pensar que eles são como desnecessário, que eles são excessivos. Mas você sabe, isso é, eu acho que é apenas uma boa maneira, uma boa maneira de aprender a, como criar grades, grades como essas. Então deixe-me apenas ter certeza de que estou copiando tudo o que preciso copiar. Vou baseá-los em algum lugar aqui e eles precisam ir aqui. Então, vou colocá-lo assim. Isso deve estar tudo bem. Vou cortar esses caras, remover esses elementos e depois colá-los. Sam vai buscar esses elementos. Então, novamente, vou colar esses caras aqui e trazê-los para o lado. Deve parecer bem, e novamente, corte-os, remova esses elementos, cole-os de volta. E eu só vou colar esses caras, colocá-los aqui, cortá-los e substituí-los por L, remover esses elementos e substituí-los por barco pelo nosso, com nossos elementos de grade. Então, o último passo aqui será adicionar como um botão que diria não, como aprender mais ou como ler mais, talvez isso seja melhor. Então, vou pegar isso emprestado da nossa seção de serviços. E deixe-me ter certeza de que esses caras estão bem ajustados para o centro. Então, em vez de aprender mais terras tipo dor, vamos digitar e ler mais. Isso deve ser, isso deve estar tudo bem. E agora vamos ver o que parece quando o visualizamos em nosso design principal. Acho que parece, tudo bem, é claro. Então, o que precisamos agora é simplesmente protótipo algumas dessas coisas. Quero dizer, queremos, por exemplo, quando clicamos em qualquer um desses elementos, queremos ir ao nosso blog principal, postagem no blog. Ou quando clicamos no botão Leia mais. E como você pode ver, preciso mudar esse cara para o estado de paira também. Então, quando clicarmos no botão Leia mais, deixe-me copiar esse cara. Queremos ir para a nossa subpágina do blog. Mas isso é algo que eu acho que vamos fazer no próximo vídeo. 43. Vamos configurar páginas de blog: Ótimo, então temos nossos trechos de postagem no blog aqui em nossa primeira página. E o que agora seria o momento certo para realmente criar um único layout de postagem no blog. E também goste de uma subpágina com nossas postagens no blog. Então, normalmente, isso é o que faríamos. Mas o problema é que fazer isso não gostaríamos, aprenda mais coisas novas para criar esse tipo de páginas. Você poderia usar todas as técnicas que já aprendemos. Mas, claro, isso não significa que não vamos olhar para algum post no blog nas páginas e não, não vamos explorá-las e explicar como criá-las. Então o que eu fiz foi, foi que criei rapidamente para você páginas separadas de bloqueadores. Então, vamos passar rapidamente, passar por esses projetos. A primeira página do blog que eu criei, você pode ver aqui. Então, é claro, no topo, temos nosso logotipo e o mesmo logotipo que adicionamos à nossa primeira página. E o mesmo vale para a navegação. E precisamos disso. Temos uma simples foto. Estou com uma opacidade voltada para algo em torno de 15 a 16 por cento. Claro, um over que obtivemos como um título de página e legenda. Então, isso seria como um exemplo de herói, seção de herói para nossa subpágina do blog. Agora, abaixo disso, você pode ver que eu criei tudo que basicamente adicionou as categorias. Portanto, essas são basicamente as mesmas categorias que podemos ver na primeira página. E abaixo disso, adicionei simples como um mosaico daqueles posts ou trechos do blog. Mas aqui embaixo, criei algo um pouco diferente. Então, em algumas páginas, em alguns designs, você pode ver algo como um botão Carregar mais. Existem várias maneiras de carregar mais postagens no blog. Você pode ver algo como uma técnica de carregamento preguiçoso acontecendo. O que significa que, depois de rolar para baixo, você verá mais e mais postagens de blog sendo carregadas. Mas você também pode ver algo como um botão Carregar mais. E, na verdade, este é um componente, como você pode ver aqui. Na verdade, poderíamos chamá-lo como o botão Load More. E esse componente tem dois estados. Então esse é o estado padrão e temos o estado de carga Morris, que basicamente nos mostra mais algumas postagens. E esse botão muda de carregar mais para saber mais posts nos mostrando que agora basicamente chegamos ao final da lista. Não há mais postagens disponíveis. E se acabamos de visualizar esse design, então vamos descer, a propósito, como você pode ver, esse cara, essa navegação está funcionando exatamente como as anteriores. Então, quando descemos, quando clicamos neste botão Carregar mais, você pode ver que temos mais postagens sendo apresentadas aqui. E, claro, deixei algum espaço aqui em baixo para nosso basicamente nosso rodapé. Ainda não o criamos. Mas uma vez que fizermos isso, vamos adicioná-lo à nossa postagem no blog. Bem, blog, subpágina do blog. E é claro que precisa ser o mesmo em todas as páginas. Então eu deixei algum espaço aqui na minha página do blog, design alternativo. Basicamente adicionei a mesma seção de heróis. Mas quando descemos, você pode ver que eu tenho algo como uma postagem de blog em destaque aqui. À esquerda, obtemos nossa imagem de herói. Em seguida, obtivemos o nome da categoria e o espaço reservado da data, obtivemos o título, obtivemos o subtítulo. E à direita aqui embaixo temos o continue lendo um botão que quando ele clicou. E enquanto esse link nos levaria a um único post no blog. Então, aqui em baixo, temos as categorias. Talvez eu só venha a algum lugar aqui. E então temos basicamente o mesmo mosaico de antes. No entanto, aqui você verá que temos, bem, não temos mais esse botão Carregar mais , mas temos uma paginação. Então, quando visualizamos esse cara, você desce. Você pode ver que quando você passa o mouse sobre esses elementos, esses caras estão parecendo esse elemento ativo aqui. Então, como eu disse, quando clicarmos neste botão continuar lendo aqui, seremos direcionados para uma única página de postagem do blog. E esse é o design que eu criei. Apenas um velho tempera as coisas, ou pelo menos torná-las um pouco mais diferentes. Não é tão chato. Isso não é mais como escuro. É como mais leve agora, só para que tenhamos alguma variedade aqui. Mas é claro, essa navegação e logotipos são os mesmos. Temos a imagem em destaque aqui. E aqui em baixo temos nossos espaços reservados para nome e data da categoria. Conseguimos o título, recebemos o texto principal aqui. E então conseguimos alguns elementos típicos de postagem de blog. Temos o número de curtidas. Chegamos aos ícones das redes sociais, depois recebemos a caixa de comentários, obtivemos basicamente os comentários. Então, temos como uma navegação simples. Então, para as postagens relacionadas, podemos, talvez se eu apenas ampliar esses caras, você pode ver que temos como um link de post anterior com um título de maquete do post anterior. E obtivemos o próximo link do post também com um título. Aqui à direita. Temos a barra lateral. E aqui nós simplesmente conhecemos nosso, digamos que isso é, este é o nosso designer freelancer. Sei que esta é uma foto diferente de antes, mas em nossa disciplina é simplesmente legal. Temos alguns sobre mim, bem, temos basicamente esses títulos e sobre mim pesquisamos postagens mais recentes, que são basicamente títulos para essas subseções. E é claro que temos a barra de pesquisa, temos as últimas postagens, temos as categorias, a junção do meu boletim informativo e seguimos nas mídias sociais e nesses links aqui. E, claro, esses links, se apenas clicarmos aqui, estes são, estes são o mesmo tamanho que estão em nossa primeira página e o mesmo acontece aqui. Então estamos basicamente, estou tentando manter as coisas consistentes. Assim que tivermos todos esses elementos são criados. E como eu disse antes, sabe, eu não fiz nada que não usássemos antes. Não usei nenhuma técnica que fosse como você desconhecida. Então eu só queria mostrar as variações que você pode fazer. O que você pode, o que você pode mudar em seus layouts e como seus layouts devem ser. E, claro, você terá esse arquivo de layout de postagens de blog entregue a você para que você possa simplesmente baixá-lo e ver como tudo foi configurado. Mas, claro, ainda precisamos protótipo de algumas coisas. Então, vamos dizer isso. Digamos que queremos usar a página do blog para nossa página do blog. Então, vou simplesmente tentar selecionar todo esse quadro de arte e vou copiá-lo. E aqui, vou tentar colá-lo. Acho que pode ficar em algum lugar aqui. Claro, também teremos que gostar em última análise, deixar tudo sem resposta. Então esta é a nossa página do blog, esse cara aqui. E eu vou fazer o mesmo para o post único do blog. Então eu vou pegar esse cara e colar em algum lugar aqui. Então, agora podemos realmente começar a prototipar algumas coisas. Então, primeiro vou pegar isso. Bem, minha página principal, vou para o protótipo. E aqui, eu só quero tentar pegar o link do meu blog. Então esse cara aqui, eu quero adicionar uma interação a ele e vai ser tocado. E esse cara, vamos animar automaticamente esse cara que deveria nos levar à nossa página do blog para nossos trechos de postagem no blog. Vamos tentar pegar talvez como este. Como você pode ver, eu fiz algumas coisas organizadoras. Eu vou ter organizado meus elementos em grupos. Então, digamos que este guia seja um trecho do blog, terá uma interação que será guia. E isso nos levará a uma única postagem no blog. Então isso é agora, isso é algo que poderíamos fazer por todos esses caras, mas estou apenas mostrando, mostrando isso para você como um exemplo, como todos esses caras querem clicar, eles devem leve-nos para uma única página de blog. Eu também acho que devemos pegar como esse link de casa, esse cara aqui. E devemos adicionar como uma interação a ele. E eu sou tab, ele deve nos levar à nossa página inicial. Homepage aqui. O mesmo para o nosso único blog. Então, novamente, a interação não passa o mouse, no toque. Leve-nos para a página inicial. E acho que também podemos pegar nosso logotipo e também adicionar interação de toque a ele. E isso deve nos levar a uma página inicial é como uma funcionalidade padrão. Você sabe, sempre que alguém estiver clicando no logotipo, essa pessoa deve ser levada para a página inicial. E acho que seria melhor se fizéssemos isso como um componente normal para o nosso design principal e principal aqui. Mas desde que eu esqueci disso, bem, lá vai você. Isso, bem, isso deve funcionar corretamente. Agora. Vamos agora ver como nossas interações podem ser. Então, vamos ao meu blog. Então, vamos clicar em, digamos que este. Como você pode ver, você está sendo transportado pela nossa principal página principal. Se clicarmos no link Home, vamos voltar para nossa página. Se clicarmos no Blog, seremos nosso blog. E é claro que há, esse cara está trabalhando também. E também se clicarmos no logotipo, voltaremos à nossa página inicial. Então, acho que o próximo passo seria simplesmente não tornar tudo responsivo. Mas no nosso caso, seria como agarrar isso, vamos pegar esse cara, esse quadro de arte, tornando-o muito mais longo. E então nós teríamos que pegar esses elementos e simplesmente não os empilhar horizontalmente. Acho que poderíamos começar com talvez como tornar esse fundo menor. E então poderíamos trazer esses caras para o centro. Vamos ver o quão grandes esses caras eram. Então 34. Então, vamos fazer 34. Vamos tornar esses caras menores. Agora basicamente, não estou fazendo aqui nada que não fizemos antes. E eu acho sinceramente que seria como um ótimo trabalho independente para você. Quero dizer, você poderia simplesmente fazer tudo o que deveria ser feito em termos de torná-los, esses caras são responsivos. E eu acho que seria uma ótima tarefa para você fazer basicamente por conta própria. Vou mover rapidamente esses caras para o centro, colocar isso, colocar esses caras no centro também, essas categorias. E agora podemos simplesmente pegar todos esses elementos e simplesmente colocá-los, torná-los responsivos, torná-los menores. São apenas os tamanhos. E então podemos simplesmente passar para nossa próxima seção. Claro, uma vez que isso seja feito e uma vez que esses caras também sejam responsivos, e novamente, é claro que você terá esse arquivo para você , então você pode simplesmente ver como será tudo. E então podemos simplesmente passar para nossa seção. A próxima seção que eu acho que será algo como um símbolo da Nike Sobre mim. Seção. 44. Vamos aprender alguns efeitos de paginação: O que eu decidi que talvez fosse uma boa ideia mostrar a você como alcançar esses efeitos de paginação. Então, sim, então vamos começar com o botão Carregar mais primeiro. Como você pode ver, simplesmente copiei todos esses elementos do nosso design principal aqui. Só acho que pode ser um pouco mais limpo para nós trabalharmos. Eu também tenho três trechos de postagem no blog aqui. Então, vamos me fazer começar rapidamente adicionando muito mais botões. Vou pegar a ferramenta de texto, clicar em algum lugar aqui, e vou digitar carga mais assim. Claro que vou torná-lo um pouco mais visível para você. Então, vamos torná-lo branco. Não estou muito preocupado com a fonte nesta fase porque, você sabe, não é tão importante. Embora eu acho que poderíamos simplesmente imprimi-lo como o mais rápido possível. E talvez vamos fazer meio. E vamos fazer algo como 26. Talvez vamos aumentar a faixa em algo chamado U5, ou talvez vivendo em 50 anos. E também vou adicionar um retângulo simples que terá como uma borda branca. Lá vamos nós. E vamos nos certificar de que eles estejam bem alinhados ao centro. Então, vou agrupar esses caras. Então, o que queremos fazer aqui é que queremos mostrar mais posts assim que clicarmos neste botão Carregar mais, certo? Então eu acho que devemos começar adicionando mais esses posts. Vou derrubar esse cara aqui porque queremos criar um componente com dois estados, certo? Então eu vou segurar a tecla Alt com esse cara selecionado e vou trazê-la aqui para algum lugar aqui. Isso deve ser suficiente. Esse cara vai para algum lugar aqui. E esse cara vai para algum lugar aqui. Isso deve estar tudo bem. O que poderíamos fazer é simplesmente transformar todos esses elementos neste botão e esses três trechos de postagem do blog em um componente. Então, vou segurar a tecla Shift pressionada, clicar em todos esses caras. E vou simplesmente pressionar Control K no meu teclado para criar um componente desse cara. Vamos chamá-lo como carregar mais posts. Lá vamos nós. Então esse cara precisa ter dois estados para o nosso estado padrão, não queremos ver como esses elementos, então não queremos ver esse grupo. Isso, na verdade, queremos ver esse grupo porque esse é o nosso botão. Mas não queremos ver esses três grupos restantes. Então, essas postagens, certo? Então esses caras aqui, o que vou fazer é simplesmente baixar a opacidade desse jeito. E poderíamos fazer coisas diferentes. Então, talvez, vamos ver, talvez vamos pegar esse cara certo. E vou movê-lo para o lado em algum lugar aqui. E eu vou pegar o cara esquerdo e vou movê-lo para o lado só para que soe como fora dos limites aqui. E o botão Carregar mais tem que ir a algum lugar aqui. Portanto, esse é o nosso estado padrão. Mas eu quero adicionar um novo estado. E eu vou chamá-lo como talvez como carregado, postagem traseira carregada. Vamos fazer isso como posts, dívida baixa. E neste estado, deixe-me pegar o botão. O botão precisa ir para algum lugar aqui e precisa dizer como não há mais posts. E, claro, isso também precisa ser maior, como algo assim. E, claro, eles precisam ser colocados no centro. Esse elemento precisa ter sua opacidade trazida de volta para 100%. O mesmo para esse cara. E, claro, também precisa ir ao centro. Gosto, é como o lugar anterior, que seria como em algum lugar aqui. E esse cara também. Então, opacidade para 100 por cento e sua posição a ser colocada, para ser definida como em algum lugar, em algum lugar aqui. E esse cara precisa descer significativamente, talvez como em algum lugar aqui. Então, este é o nosso mais estados carregados. Então, agora podemos realmente protóti-lo. Então, vou para o espaço de trabalho do protótipo. E aqui, o que eu quero fazer é que eu quero definir nosso gatilho para nossos botões de carga mais. Então deixe-me pegar este botão. E na torneira, quero que esse cara anime automaticamente. E eu quero que ele vá para postagens carregadas, certo? Então, agora, quando vamos para o nosso modo de visualização, se for futuro, se clicarmos neste botão Carregar Mais, você pode ver que esses barcos estão bem animados. Portanto, esta é a nossa primeira maneira de somar o efeito de paginação bem semelhante. Vamos agora adicionar o segundo. Você pode ver que eu tenho minha paginação padrão aqui. E o que está acontecendo aqui é, bem, antes de tudo, temos nossa página ativa sendo indicada aqui. E quando passamos o mouse sobre qualquer um desses números como este, no efeito subjacente, como se um efeito de fundo estivesse acontecendo. Então, vamos ver como podemos conseguir isso. Então, vou pegar a ferramenta de texto e simplesmente vou recriar essa paginação. Vamos fazer como um e talvez vamos repetir a grade. Então, vai ser 12345. Isso deve ser suficiente. Vou fazer com que pareça algo assim. E vou desagrupar a grade porque agora vou adicionar rapidamente os números apropriados aqui. Então, 12345. Portanto, nossa página atual precisa ser como, bem, precisa ter um plano de fundo adequado. E podemos simplesmente pegar uma elipse. Podemos criar uma elipse. E eu vou pegar rapidamente essa cor emprestada. Lá vamos nós. Não precisa de uma borda. E esse cara precisa ir até lá, bem, pelo menos por trás dos nossos números. Então isso deve ser, isso deve ser suficiente. Eu acho. Isso deve parecer bem. Então agora eu quero gostar sempre que mouse sobre qualquer um desses números, quero ver como se esse círculo apareça abaixo. E, de fato, pode ser um círculo, embora também pudéssemos gostar, como um retângulo arredondado sendo completamente arredondado Até formar um círculo. Vamos realmente fazer isso. Então, vou pegar um retângulo e vou criar um parecendo mais ou menos assim. Isso deve estar tudo bem. E é claro que eu quero que esse cara tenha um Phil apropriado. E eu quero que ele fique novamente abaixo dos meus números. Então, vamos movê-lo para algum lugar aqui. E será uma boa ideia deixar esses caras centrados e devemos torná-lo um componente, certo? Então, vou pegar esses dois elementos e vou pressionar Control K no meu teclado para transformá-lo em um componente. Vamos ter um estado padrão. Vamos ter um estado de pairar. Então, no estado padrão, nosso plano de fundo. Então esse cara, esse retângulo aqui, vai ter sua opacidade virada simplesmente para 0. Mas no estado de paira, esse retângulo terá sua opacidade virada todo o caminho para 100 por cento. E é como um raio de canto definido como, vamos como 100% ou 100. Acho que isso deve ser suficiente. Então, vamos agora garantir que o estado desse cara esteja definido como padrão. E vamos apenas visualizar esse cara. Vou descer aqui. E como você pode ver, quando passamos o mouse sobre ele, esse cara está se transformando em, bem, podemos ver esse círculo aqui. 45. Vamos configurar a página de post e finalizar a seção: Quando clicarmos neste botão continuar lendo, aqui, seremos direcionados para uma única página de postagem do blog. E este é o design que F surgiu. Apenas, você sabe, apimentar as coisas ou, pelo menos, torná-las um pouco mais diferentes. Não tão chato. Isso não é mais como escuro. É como mais leve agora, só para que tenhamos alguma variedade aqui. Mas é claro, essa navegação e logotipos são os mesmos. Temos a imagem em destaque aqui. E aqui em baixo obtivemos o nome da categoria e os espaços reservados de data, e obtivemos o título. Recebemos o texto principal aqui. E então temos alguns elementos típicos de postagem de blog simples. Então, temos o número de curtidas. Chegamos aos ícones das redes sociais, depois pegamos a caixa comum, obtivemos basicamente os comentários. E então temos como uma navegação simples. Então, para as postagens relacionadas, podemos, talvez se eu apenas ampliar esses caras, você pode ver que temos como um link de post anterior com uma maquete, um título do post anterior. E obtivemos o próximo link do post também com um título. Aqui à direita. Temos a barra lateral. E aqui nós simplesmente conhecemos nosso, digamos que isso é, este é o nosso designer freelancer. Sei que esta é uma foto diferente de antes, mas em nossa disciplina é simplesmente legal. Temos alguns sobre mim, bem, temos basicamente esses títulos e sobre mim pesquisamos postagens mais recentes, que são basicamente títulos para essas subseções. E é claro que temos a barra de pesquisa, temos as últimas postagens, temos as categorias, recebemos a junção do meu boletim informativo e seguimos nas mídias sociais e nesses links aqui. E, claro, esses links, se apenas clicarmos aqui, estes são, estes são o mesmo tamanho que estão em nossa primeira página e o mesmo acontece aqui. Então estamos basicamente, estou tentando manter as coisas consistentes. Assim que tivermos todos esses elementos são criados. E como eu disse antes, sabe, eu não fiz nada que não usássemos antes. Eu não usei nenhuma técnica que fosse como você desconhecida. Então eu só queria mostrar as variações que você pode fazer. O que você pode, o que você pode mudar em seus layouts e como seus layouts devem ser. E, claro, você terá esse arquivo de layout de postagens de blog entregue a você para que você possa simplesmente baixá-lo e ver como tudo foi configurado. Mas, claro, ainda precisamos protótipo de algumas coisas. Então, vamos dizer isso. Digamos que queremos usar a página do blog para nossa página do blog. Então, vou simplesmente tentar selecionar toda essa prancheta e vou copiá-la. E aqui, vou tentar colá-lo. Acho que pode ficar em algum lugar aqui. Claro, também teremos que gostar em última análise, deixar tudo sem resposta. Então esta é a nossa página do blog, esse cara aqui. E eu vou fazer o mesmo para o post único do blog. Então eu vou pegar esse cara e colar em algum lugar aqui. Então, agora podemos realmente começar a prototipar algumas coisas. Então, primeiro vou pegar isso. Bem, minha página principal, vou para o protótipo. E aqui, eu só quero tentar pegar o link do meu blog. Então esse cara aqui, eu quero adicionar uma interação a ele e vai ser tocado. E esse cara, vamos fazer animação automática. Esse cara deveria nos levar à nossa página do blog para nossos trechos de postagem no blog. Vamos tentar pegar talvez como este. Como você pode ver, eu fiz algumas coisas organizadoras. Eu teria organizado meus elementos em grupos. Então, digamos que este guia seja um trecho do blog, terá uma interação que será guia. E isso nos levará a uma única postagem no blog. Então isso é estranho, isso é algo que poderíamos fazer por todos esses caras, mas estou apenas mostrando, mostrando isso para você como um exemplo. Como todos esses caras, quando cliquei, eles deveriam nos levar a uma única página de blog. Eu também acho que devemos pegar como esse link de casa, esse cara aqui. E devemos adicionar como uma interação a ele. E eu sou tab, ele deve nos levar à nossa página inicial. Então homepage aqui, mesmo para o nosso único blog. Então, novamente, a interação não passa o mouse, no toque. Leve-nos para a página inicial. E acho que também podemos pegar nosso logotipo e também adicionar interação de toque a ele, e isso deve nos levar a uma página inicial. Isso é como uma funcionalidade padrão. Você sabe, sempre que alguém estiver clicando no logotipo, essa pessoa deve ser levada para a página inicial. E acho que seria melhor se fizéssemos isso como um componente normal para o nosso principal design principal aqui. Mas você sabe, desde que eu esqueci disso, bem, lá vai você. Isso, bem, isso deve funcionar corretamente. Agora. Vamos agora ver como nossas interações podem ser. Então, vamos ao meu blog. Então, vamos clicar em, digamos que este. Como você pode ver, você está sendo transportado pela nossa principal página principal. Se clicarmos no link Home, vamos voltar para nossa página. Se clicarmos no Blog, seremos nosso blog. E é claro que há, esse cara está trabalhando também. E também se clicarmos no logotipo, vamos voltar para nossa página inicial. Então, acho que o próximo passo seria simplesmente não deixar tudo sem resposta. Mas no nosso caso, seria como pegar isso. Vamos pegar esse cara. Então, este quadro de arte faz com que seja muito mais longo. E então nós teríamos que saber, pegar esses elementos e simplesmente não os empilhar horizontalmente. Acho que poderíamos começar com talvez como tornar esse fundo menor. E então poderíamos trazer esses caras para o centro. Vamos ver o quão grandes esses caras eram. Então 34. Então, vamos fazer 34. Vamos tornar esses caras menores. Agora, basicamente, não estou fazendo aqui nada que não fizemos antes. E acho sinceramente que seria um ótimo trabalho independente para você. Quero dizer, você poderia simplesmente fazer tudo o que deveria ser feito em termos de torná-los, esses caras são responsivos. E acho que seria uma ótima tarefa para você fazer basicamente por conta própria. Vou mover rapidamente esses caras para o centro, colocar isso, colocar esses caras no centro também, essas categorias. E agora podemos simplesmente pegar todos esses elementos e simplesmente colocá-los, torná-los responsivos, torná-los menores. São apenas os tamanhos. E então podemos simplesmente passar para nossa próxima seção. Claro, uma vez que isso seja feito e uma vez que esses caras também sejam responsivos, e novamente, é claro que você terá esse arquivo para você , então você pode simplesmente ver como será tudo. E então podemos simplesmente passar para nossa seção. A próxima seção que eu acho que será algo como um símbolo da Nike Sobre mim. Seção. 46. Vamos adicionar a seção Sobre mim: Antes de avançarmos para adicionar em nossa seção Sobre mim, deixe-me mostrar rapidamente o que fiz em termos de capacidade de resposta com nossos designs de blog. Então, no design do nosso blog principal. Então, este blog principal, que design móvel? Simplesmente não tenho como configurar tudo verticalmente. Então, é claro, me adaptei ao tamanho das fontes das imagens. Todas essas coisas, todas essas coisas. E eu decidi simplesmente nenhum anúncio como este, botão Leia mais no mesmo que temos aqui. Quanto à nossa página móvel do blog, como você pode ver, adicionei o logotipo aqui e adicionei o menu para dispositivos móveis. E então, basicamente, coloquei isso sobre as ideias de design da página principal. Então acabei de adicionar a mesma imagem em segundo plano. Adicionei o mesmo texto e subtexto ou subtítulo. E então acabei de adicionar as categorias e, claro, as empilhei verticalmente. E depois conseguimos os trechos do blog. E desta vez acabei de adicionar o botão Carregar mais para que saibamos que se alguém apenas em um dispositivo móvel quer ver mais páginas, quer carregar mais postagens. Eles podem simplesmente clicar no botão Carregar mais. E, no que diz respeito a eles, um único bloco imóvel. Então deixe-me ir rapidamente. Vá aqui. Lá vamos nós. Então, temos, é claro, nosso logotipo, recebemos o menu e, em seguida, temos a imagem em destaque. Abaixo. Acabei de adicionar os metadados, o título e, claro, o texto em si. E então recebemos nossa seção de comentários com os nomes, então a capacidade de adicionar um comentário aqui nesta caixa. E então temos os elementos da barra lateral que, claro estão agora como não do lado , mas abaixo desses elementos. Então, temos nossa seção Sobre mim, a seção de pesquisa, os trechos de postagem do blog. É claro que obtemos as categorias que a caixa de pesquisa e, claro, os ícones de mídia social. E eu deixei rapidamente algum espaço para os elementos do rodapé que eventualmente chegarão ao nosso design. Uma vez feito tudo isso, agora estamos prontos para passar para adicionar em nossa seção basicamente, você sabe, a seção sobre nós. Então não vai ser como nada super, super funky. Aqui. Eu só quero adicionar uma imagem como talvez à direita, alguns textos à esquerda. E talvez eu vá adicionar algum plano de fundo à imagem. Então, a primeira coisa que vou fazer é simplesmente arrastar uma imagem, e esta é uma imagem que tirei do pixel bruto. Então, do mesmo lado que usamos o antes, talvez eu só vá torná-lo um pouco maior. E vou colocá-lo como talvez em algum lugar aqui. Quero adicionar um plano de fundo a essa imagem. E eu não quero que seja um retângulo simples, sei, nem uma elipse. Eu só quero, quero que a forma seja um pouco irregular. Então eu vou pegar a ferramenta caneta e vou começar a clicar como em algum lugar aqui, talvez agora eu esteja pressionando a tecla Shift para algum lugar aqui. E talvez vamos fazer algo assim. E então, assim, sempre podemos mudá-lo mais tarde. Eu não acho que tenhamos como uma cor de preenchimento semelhante que seria ideal para isso, para esta imagem. E deixe-me mover isso de volta um passo para o, bem, para o fundo. Temos algumas cores que podem funcionar. Mas não tenho certeza se há ótimos para esse tipo de n, esse tipo de imagem. Então, o que poderíamos fazer é que talvez pudéssemos pegar esse plano de fundo. E vou pressionar a tecla I no meu teclado para inicializar a ferramenta conta-gotas. E vamos apenas procurar por algo assim. Talvez isso pareça um pouco melhor. Ou talvez vamos apenas tentar tirar algo do cabelo. Talvez algo mais leve, talvez algo um pouco mais escuro. Agora poderíamos estar fazendo isso. Estou apenas tentando encontrar cores que ao mesmo tempo, como ir bem junto com o esquema de cores que temos aqui nesta imagem. Mas, ao mesmo tempo, como realmente ser como um plano de fundo que separaria a imagem do plano de fundo. Então, vamos ficar com esse cara. Mas acho que poderíamos trabalhar um pouco nessa imagem bem, neste fundo aqui. Então, vou simplesmente clicar duas vezes dentro, o que basicamente me permitirá controlar os pontos de ancoragem. Talvez pudéssemos trazer esse cara para algum lugar aqui em cima. Talvez você possa selecionar esse cara e eu simplesmente vou pressionar Delete para simplesmente ir e me livrar dele. E vou mover esse cara para o lado ainda mais. Talvez esse cara também e fale com o fundo. Poderíamos talvez o cara da Brenda apenas um pouco levantado. E então talvez eu vá pegar a imagem e vou torná-la significativamente maior. Então parece. Mais ou menos assim. Agora eu só quero ter algo diferente. Eu só quero que eu não quero ter apenas linhas retas como a neve, como dividir nossas seções além disso, já temos alguma seção de luz dividida, dividida aqui. Então, acho que pode funcionar assim. Agora, é claro, poderíamos saber simplesmente tentar encontrar o equilíbrio perfeito entre, entre isso ser funky. E agora, ao contrário de não muito atraente, quero dizer, é, eu não quero que ele atraia muita atenção. Este é agora, este é apenas o plano de fundo, mas eu não quero muito chato ao mesmo tempo. Então, às vezes, é apenas uma questão de encontrar o equilíbrio certo. Então, agora vou pegar a ferramenta de texto e vou clicar em algum lugar aqui e digitar algo como em mim. E vamos fazer isso um pouco maior. Talvez eu vá torná-lo um pouco mais ousado desta vez. Vou fazer isso como 54. E vamos fazer com que seja lido. Talvez me deixe verificar com esse cara. Era médio 54 sólidos, o meio. Acho que a diferença entre médio e negrito não é tão grande. Então, acho que podemos deixá-lo assim. Vou colocá-lo em algum lugar aqui. E então talvez eu só pegue emprestado algumas mensagens desses caras. Então eu só vou pegar este rolo e epsilon. Vou colá-lo como em algum lugar aqui. Claro, esse cara precisa ser um pouco mais visível. Então eu vou conseguir, vamos fazer esse cara como 22. Vou fazer isso um pouco como Boulder. E vamos mentir vir 30 em termos de altura da linha. E talvez eu vou torná-lo um pouco menor e colocá-lo em algum lugar aqui. E então talvez pudéssemos gostar de clone e em algum lugar aqui e torná-lo um pouco maior. E depois clone mais uma vez. Mas faça esse cara talvez gostar, mas menor. Então, parece mais ou menos assim. Então, digamos que temos texto suficiente, o suficiente sobre mutex. E talvez eu só vá pegar a ferramenta caneta novamente. E talvez eu só vou criar algo como uma linha reta. Estou segurando a tecla Shift a propósito. E essa linha ficará mais ou menos assim. E talvez vamos fazer a fronteira. Vamos dar a ele uma cor adequada. Mas, como você pode ver, infelizmente, não podemos simplesmente mudar a cor da borda assim. Então, vou apenas copiar e colar esse código hexadecimal em uma ambulância para parecer algo como 33 pontos para o tamanho. Isso deve ser suficiente. Eu também talvez vou pegar nossos ícones, como este, ícones de mídia social, esses caras aqui, deixe-me tentar. Agarre-os corretamente. Talvez seja melhor se os pegássemos do painel de camadas. Então eu acho que vai ser esse cara, então vou copiá-los. Vou descer a algum lugar aqui e colá-los. E mova-os aqui para algum lugar aqui. Agora, se você quer talvez gostar de fazer esse cara Justin Boulders. Então talvez seja como algo como uma pista aqui, mas acho que deve ser ainda mais ousado do que isso. Acho que ficaria bem. Talvez gostaria de quebrar a monotonia desses parágrafos. E eu acho que parece, parece tudo bem, então, é claro, tudo o que precisamos é apenas pegar esses elementos, talvez sem a imagem por enquanto. E temos que colocá-los aqui em nossa versão móvel. Mas antes de fazermos isso, vamos pegar todos esses elementos. Então, todos esses caras, vou agrupá-los e vou chamá-los sobre mim assim. E eu também vou pegar talvez como apenas estes, tentar pegar apenas esses elementos. Então vai ser como ícones e esse Lorem Ipsum. Acho que esses são esses parágrafos. E o caminho sem a imagem, acho que vai ficar tudo bem, então não esse caminho, mas esse caminho. E vou agrupar esses caras. Vamos chamá-lo como sobre mim texto. E vou apenas copiar isso sobre o meu texto. E vou tentar colá-lo em algum lugar aqui e vamos movê-lo para baixo. Talvez pudéssemos trazer de volta a nossa grade de layout. Vamos descer aqui. E eu simplesmente vou pegar esse grupo e vou tentar tornar tudo menor para pareça mais ou menos assim. Acho que devemos pegar isso como intertidal e são 34 médiuns. Então, vamos torná-lo 34 médio. E vamos colocá-lo exatamente no centro. Então, vou tentar colocá-lo no centro. O mesmo para esse cara. Talvez também pudéssemos pegar esses parágrafos e colocá-los no centro também. Acho que os ícones estão bem. Então agora temos que pegar a imagem. Então esse cara aqui e o fundo. Então eu só vou copiar esses e quebrar como tentar encaixá-lo aqui, então parece tudo bem. Então, vou tentar tornar esses caras menores. Misture, algo assim. E vamos movê-lo para cá. Vamos levar esse cara só para o colapso. Talvez sem o, sem a grade de layout móvel, ficará um pouco melhor. Talvez você possa até tentar tornar a imagem um pouco maior. Lá vamos nós. Criamos a seção Sobre nós. E sei que não é nada muito extravagante, mas pelo menos tivemos a oportunidade de aprender a modificar pontos de ancoragem dentro das formas personalizadas. 47. Vamos adicionar a seção entre em contato: Ei pessoal, temos a seção Sobre mim. Acho que podemos continuar adicionando os elementos da seção Fale Conosco. Então o que eu quero fazer é à esquerda, vou adicionar como algo simples, como entrar em contato ou entrar em contato comigo, textos do que algum subtítulo da sorte. E então, é claro, talvez alguns gostem de algumas informações de contato. E abaixo disso podemos adicionar um formulário de contato. E à direita, acho que vou simplesmente adicionar algum tipo de imagem. Então, novamente, antes de começar, vou trazer de volta minha grade de layout assim. Eu só vou pegar emprestado talvez isso sobre mim mandar um texto para esse cara aqui. E eu simplesmente vou copiá-lo. E vou colá-lo em algum lugar aqui e vou movê-lo para algum lugar aqui. E talvez pudéssemos trazê-lo todo o caminho para decidir. Não tenho certeza se eu quero mover esta seção como toda essa seção também para o lado, isso vai nos dar um pouco mais de espaço aqui. Mas, você sabe, se é suposto ser como esse design da Web 3, não precisa ser isso, alinhado. Então, aqui, vou digitar alguns, como entrar em contato e nós vamos e talvez eu vá mudar a cor. Basta voltar para minhas cores e B para esta cor cinza. E vamos, por enquanto, nos livrar da grade de layout. Só quero ver como vai parecer. E, abaixo, vamos adicionar algum texto. Mais uma vez. Deixe-me apenas pegar emprestado alguns textos daqui , como este parágrafo. Vou colá-lo e pobre o que ele precisa para ir a algum lugar aqui. E vou torná-lo significativamente menor. Agora, poderíamos simplesmente gostar de ir a alguns geradores de endereços falsos, geradores de números de telefone falsos. Mas para isso, vou usar minha coisa padrão, padrão de Lorem Ipsum. Precisamos cortar esses caras que eles não estejam no mesmo grupo. Então este e este, vou cortá-los, colá-los de volta. Então, primeiro vou para o meu plugin de ícones. Então, ícones para design. E aqui eu vou digitar algo como telefone talvez. E talvez desta vez vamos com os ícones de penas. Eu só vou gostar de colar esse cara e clicar nele. E como você pode ver, às vezes eles são colados como, não, não realmente o que eu quero que eles sejam colados. E eu vou pegar a mesma cor, mas precisa ser para a borda. Então, vou copiar esse código hexadecimal, colá-lo e simplesmente colocá-lo em algum lugar aqui. E como eu disse, posso simplesmente pegar emprestado o Lorem Ipsum. Vou copiá-lo, mas só para que eu simplesmente não possa reter a mesma, a mesma cor, os mesmos recursos de fonte. Mas vou apenas digitar como um falso falso número de telefone 123, talvez algo como quatro ou 56789. Isso deve ser suficiente. E vou deixar essa caixa de texto menor e vou colocá-la em algum lugar aqui. Então vamos. E talvez eu só vou imprimi-los em algum lugar. Talvez vamos começar com um ícone de endereço. Então, vamos digitar algo como mapa. E vamos ver se temos algo aqui com ícones de penas. Vamos ver se acabo de clicar nesse cara e clicar no ícone. Sim, ele virá em algum lugar aqui. Então, novamente, acho que não tenho minhas cores mais na minha área de transferência. Quero dizer, eu não tenho esse código hexadecimal, então vou colá-lo em mais uma vez e vou colocá-lo, talvez esteja em algum lugar aqui. E vamos derrubar esse cara. E vamos remover esse texto. Vai parecer algo assim. E, por fim, vamos fazer como um endereço de e-mail. Então, vamos apenas pegar um e-mail talvez para isso, a pena terá apenas isso. Vamos tentar como um envelope. Normalmente, há muitos ícones de envelope, não neste caso. Vamos fazer algo como correio. E novamente, vou marcar esse ícone e vou , Ei, esse cara não é? E vamos ver se podemos colar essa cor de volta. E vou tentar pegar esse ícone. E, a propósito, se for muito difícil para você pegar um elemento, porque o XD está agindo, você sempre pode pressionar e manter pressionada a tecla Control ou Command. Isso será licenciado como uma seleção direta de uma técnica de objeto. E vou fechar esse cara. Claro que estou pressionando e mantendo pressionadas as teclas Alt e Shift juntas. E aqui, vamos fazer algo como despir ou talvez não duas letras maiúsculas. Ou vamos fazer algo como informações no meu email.com, algo assim. Isso deve ser suficiente. E deixe-me talvez agora certifique-se de que tudo esteja bem alinhado. Mas eu quero tornar essas caixas de texto o mais pequenas possível para que nossa transformação seja tão precisa quanto possível enquanto nosso alinhamento, talvez não seja a transformação. Então, vamos fazer algo assim. Então, vamos nos certificar de que temos esses caras bem alinhados ao centro horizontalmente assim. E dizer, o mesmo com esses caras. Talvez eu só vá fazer essa caixa um pouco menor. Então, para o centro, lá vamos nós. Agora podemos, talvez, como agrupar esses elementos. Mas antes disso, deixe-me verificar se esses caras estão bem alinhados à esquerda também. Eu acho que eles são. E vamos nos certificar de que esses caras estejam bem alinhados com o centro assim. E agora vou realmente agrupá-los. Então agrupe, agrupe esses caras também. Lá vamos nós. E agora podemos simplesmente ter certeza de que eles estão bem distribuídos. E podemos colocá-los em algum lugar aqui. Talvez apenas um pouco assim. Então, agora que temos esses elementos, podemos realmente começar a criar nosso formulário de contato. E vai ser super fácil. Tudo o que realmente precisamos é apenas um retângulo simples. Primeiro, isso vai ficar mais ou menos assim. E então lá dentro, vou digitar algo como um Primeiro vamos fazer talvez como o seu nome. Então, vou fazer o seu nome. Portanto, este será o nosso espaço reservado e geralmente os espaços reservados são menores. Então, vou fazer algo como 14 ou talvez 16. E vou às minhas cores e torná-lo mais leve, algo assim. E vou colocá-lo em algum lugar aqui e talvez esse cara seja menor assim. E vou me certificar de que eles estão bem alinhados com o tubo central. Todos esses elementos estão bem alinhados ao centro. Então, estou pensando que vou me livrar do preenchimento e também vou aumentar o valor semelhante ao arredondamento, cantos arredondados. Vamos fazer algo como 16 ou talvez até um pouco maior como 26. Vamos fazer 32. Ok, vamos deixá-lo assim. Parece decente o suficiente. Então agora eu posso pegar esses elementos e vou apenas escolher Repetir Grade. Vou descer o Mike One, dois. Eu acho que isso vai ser suficiente porque o que eu quero aqui é apenas adicionar como um endereço de e-mail e seguida, a área de texto aqui embaixo, poderíamos ir como um passo para baixo novamente para criar como um botão, mas já temos um botão, então acho que não precisamos disso, então três devem ser suficientes. Agora, o que é realmente legal sobre a grade de repetição é que, mesmo que tenhamos, estamos manipulando apenas um elemento. Você ainda pode ver isso. Agora isso é, bem, é basicamente como um efeito ao vivo até você desagrupar a grade. Então, todas as mudanças que agora farão em nosso elemento principal serão refletidas ou adicionadas a todos eles elementos repetidos. Então, se agora quisermos mudar o valor de arredondamento dos cantos, você pode ver que ele está mudando bem para que possamos manipulá-los também. Então eu vou fazer em preto 32, e então vou pegar esse elemento e vou desagrupar a grade assim. Agora vou selecionar o último cara e vou torná-lo significativamente mais alto, algo assim. E acredito que teríamos que mudar a redondeza também. Tim, para combiná-lo com os elementos restantes. Então, em vez de 32, talvez vamos aumentar um pouco. O 64, como o dobro, o dobro desse tamanho. Não acho que pareça tão bom. Vamos fazer algo, talvez, vamos fazer como 16 com esses caras. Então, esses dois elementos, estou selecionando-os mantendo pressionadas as teclas Control e Shift. Vamos fazer como 24 com eles ou talvez 20. Oh, parece, parece decente o suficiente. Então, agora tudo o que precisamos é mudar esse imposto do seu nome para o seu e-mail. E aqui vai ser algo como sua mensagem. E é claro que esse cara precisa ir a algum lugar como resumo aqui. E agora vamos apenas ir para nossos componentes como nossos. E vou tentar encontrar meu botão. Então esse é esse cara aqui. Então, vou colocá-lo em algum lugar aqui e aqui. E em vez de saber mais, vamos digitar algo como enviar uma mensagem assim. E é claro que teremos que alinhar esses elementos bem. Então deixe-me apenas tentar clicar nesses elementos e alinhá-los ao centro. E não se esqueça, temos que fazer o mesmo para o estado de paira. Então, deixe-me apenas copiar esse texto. E depois vou novamente para o meu componente. Então por diante e paire o estado. Em vez de saber mais, vamos digitar a mensagem de envio. E, novamente, precisamos ter certeza de que tudo está bem alinhado ao centro assim. Então, agora, quando visualizamos nosso design, vamos aqui. Você pode ver que quando passamos o mouse sobre esse cara, ele muda de cor e parece, parece tudo bem. Então agora, realmente tudo o que precisamos é apenas adicionar imagem semelhante agora só para que ela não fique assim, tão chata. Talvez gostaríamos de adicionar um Mapa do Google, se você quisesse, apenas para mostrar onde seu escritório está localizado, é uma coisa bastante comum a fazer, mas talvez eu só vá adicionar, em vez disso. Em vez disso, vou adicionar algo como uma imagem simples, como uma imagem simples, que vai mostrar como enviar, enviar um processo de mensagem. E vou começar em algum lugar aqui. Então, vou adicionar um retângulo. Em algum lugar aqui. Lá vamos nós. Não preciso de uma fronteira. Eu também não sinto, mas preciso de uma imagem. Então, vou ao Pexels de novo e vou digitar algo como talvez contato. Não tenho certeza se vou encontrar algo interessante. Ou talvez vamos apenas adicionar essa imagem. Na verdade, não é tão importante ter a melhor imagem do mundo. Bem aqui. É mais para fins de apresentação. Então lá vamos nós. Temos nossa seção sendo tocada criada. Eu acho que agora tudo o que você precisa fazer é apenas adicioná-lo à nossa página principal, quero dizer, nossa página principal de design móvel. Então, vou fazer isso rapidamente. Então, como você pode ver, eu rapidamente fiz essas seções como entrar em contato responsivas. E realmente não há como ciência de foguetes aqui. Tudo o que precisamos fazer é simplesmente ajustar o posicionamento e o espaçamento para que ele fique bem em dispositivos móveis. 48. Vamos adicionar o rodapé: Então, vamos agora adicionar um rodapé. E para isso, vou pegar rapidamente um retângulo porque quero deixar minha mente pé ou um pouco mais proeminente, um pouco mais visível. E eu vou mudar sua cor de preenchimento para, digamos que este vermelho. E vou torná-lo menor. Então, ele se encaixa em nossa tela. E vou colocá-lo em algum lugar aqui. Agora, os rodapés cresceram nos últimos anos no do design, no mundo do web design. Mas é claro, se você não tem muito o que colocar dentro do seu rodapé, você sempre pode simplesmente deixá-lo como simplesmente como realmente, muito simples. Você pode adicionar exatamente como seu nome, como informações de direitos autorais, e é isso. Mas, na verdade, vamos fazer as duas coisas. Então, vamos fazer como um rodapé mais longo. E vamos fazer provavelmente informações simples, menores, como básicas como básicas e básicas, para como na parte inferior. Então, vou começar com talvez como pedir emprestado alguns textos. Então eu só vou pegar esses caras e vou tentar colá-los em algum lugar aqui. E, claro, eles precisam mudar suas cores. Então, vamos fazer branco simples. Então esse cara vai ser branco. Esse cara também. Mas talvez eu só vá adicionar um pouco mais de texto aqui. E vou digitar algo como se estivesse perto algo como obrigado por visitar. Porque, você sabe, estou assumindo que alguém como nenhum desça até esta parte da página, então é um gesto legal agradecê-los. Então, vou deixá-lo assim. E aqui na parte inferior, talvez vamos adicionar nossos ícones como nossos. Mas deixe-me primeiro tentar encontrá-los dentro dos meus ativos. Então, talvez eu vou selecionar esse cara primeiro. Então, vamos começar a adicionar alguns ícones. Então, como esse cara aqui. E vamos torná-lo branco. Lá vamos nós. E vamos adicionar os restantes. Agora, é claro, precisamos ter certeza de que eles estão bem alinhados. E será ótimo se eu puder selecioná-los corretamente. E vou apenas distribuí-los. E talvez eu vá agrupá-los. Então, talvez eu só vá tornar essa fonte menor também. Então, vou para algo como 16. E vou trazê-lo de volta, reduzir a altura da linha para algo como 24. E aqui à direita, gostaria de criar última análise, três listas contendo algumas informações, como nossos projetos, postagens de blog mais recentes e talvez nossos serviços. Então, vou pegar emprestado os textos da esquerda. E para esse cara como esse cara vai ser significativamente menor como um pouco mais simples como 26 talvez, ou talvez 32. Isso deve ser suficiente. E digamos que isso vai ser como, vamos coletar projetos mais recentes. E agora vamos listar, bem, fazer uma lista de, digamos, como links de nossos projetos mais recentes. Então, basicamente, o que vou fazer é simplesmente pegar como um pedaço de textos como este. E nós os colocamos, talvez pudéssemos simplesmente clonar e descer para algum lugar aqui. E eu vou tentar pegar algum outro como o fragmento de Lorem Ipsum assim. Só assim, só para que não tenhamos o mesmo exatamente os mesmos textos aqui. E vou alinhar esses elementos. E novamente, vou clonar esse cara para baixo. Vou fazer a mesma coisa. Então, digamos que vou começar com esta frase. E então vamos, como você pode ver, nosso quadro de texto está simplesmente limitando isso, esse texto. Portanto, não precisamos nos preocupar como todo esse texto transbordante. Mas isso é apenas para apresentação. Mas talvez eu os faça um pouco mais curtos, algo assim. Acho que isso deve ser suficiente. Então agora vou selecionar ambos, como todos esses elementos, mudar alt, pressionar e segurar o Shift Alt. E esse cara vai ser como últimas postagens talvez. Lá vamos nós. E vou fazer a mesma coisa aqui. Então, vou remover alguns desses elementos. E a mesma coisa aqui. Então, talvez vamos gostar de algum lugar aqui. E novamente, assim. Talvez eu só me certifique de que esse cara pareça corretamente. E vamos fazer, vamos fazer algo assim. E lá vamos nós. Você gostaria projetos mais recentes, postagens mais recentes. E talvez vamos fazer como se nossos serviços fossem meus serviços na verdade. Então, como por que serviços? E vamos digitar web design. E então vamos fazer como desenvolvimento web, talvez desenvolvimento web se eu puder soletrá-lo corretamente. Então, vamos descer aqui. Vamos fazer algo como talvez design de logotipo. E, por fim, vamos fazer algo como talvez SEO. Vou clonar esse cara para baixo. Porque, como na parte inferior, eu só quero adicionar algo como uma informação de direitos autorais. Talvez como um link para nossa política de privacidade ou coisas assim. As informações de direitos autorais começam com o símbolo de direitos autorais, certo? Então, se você estiver em um Windows, aqui está um pequeno truque que você pode fazer. Você pode simplesmente pressionar e manter pressionada a tecla Alt e depois apenas 0169. Se você tiver um teclado numérico e isso adicionará um símbolo de direitos autorais em um Mac. É, é muito mais simples. Tudo o que você precisa fazer é pressionar e segurar a tecla Option e, em seguida, basta pressionar a tecla G. E se você não tiver um teclado numérico no teclado, basta ir ao Google e digitar o código de símbolo de direitos autorais. E simplesmente selecione e copie o símbolo de direitos autorais e, em seguida, basta colá-lo dentro do XD. Então, aqui vamos apenas digitar algo como 20192022. Claro, se você acabou de criar este site como hoje, este ano, é claro que você sairia dessa data atual como essa. E, claro, porque adicionamos esse símbolo de direitos autorais aqui, é, bem, é uma fonte basicamente. Então, como você pode ver, os valores são os mesmos, mas vou pensar que vou mudar isso talvez para regular. Vou digitar algo como qual era o nosso nome? Não me lembro. Na verdade. Tiffany Jones. Tiffany Jones. Certo. Portanto, os direitos autorais pertencem à Tiffany Jones. E vou torná-lo menor. E acho que vou gostar de dar essa bela e ótima cor cinza. E vou cloná-lo para decidir. E vou digitar algo como política de privacidade. Lá vamos nós. Também poderíamos ter que fosse como um lado maior e maior. Você pode ter algo como termos, termos de serviço. E, claro, ambos os links precisam ir para o lado direito. Talvez vou colocá-los em algum lugar aqui. Então eles vão para o lado. E, claro, por último, o que devemos fazer é garantir que todas essas informações estejam bem alinhadas à nossa rede. Então, talvez eu vá deixar isso menor e colocar esse cara em algum lugar para decidir. Então eu vou pegar esses elementos e colocá-los talvez em algum lugar aqui. E o mesmo para esses caras. Vamos apenas garantir que eles estejam bem alinhados com a grade. Então, vou agrupar todos esses elementos agora. Então esses caras também, esses caras estão agrupados. Então agora vou selecionar tudo e simplesmente distribuí-los assim. O mesmo para esses elementos. Eu simplesmente vou pegar esses links e colocá-los para a direita. E esse cara está quase correto. Então, basicamente, a última coisa a usar para pegar todos esses elementos. Então, o plano de fundo e os links, e simplesmente colocá-los no centro assim. Então, é claro, a última coisa a fazer aqui seria adicionar nosso rodapé às partes restantes do nosso site e, claro, torná-las responsivas. Mas vamos realmente fazer isso no próximo vídeo. 49. Vamos tornar o rodapé: Sabe, eu decidi que talvez não seja a melhor ideia aborrecê-lo com outro, outro vídeo de apenas empilhamento de elementos verticalmente. Então, acabei de tomar a liberdade de adicionar os elementos do rodapé às nossas versões responsivas do design. Mas há apenas uma coisa que eu gostaria de apontar. Quero dizer, para alguns dos designs, também decidi adicionar não apenas esses elementos de rodapé, mas também os elementos de informações de contato. Então, quando vamos para, por exemplo, nossa página de blog móvel e móvel, então, neste modo de blog por um, diminuímos. Você pode ver que eu também adicionei a seção sendo tocada , bem como a foto. E, a propósito, como você pode ver, é tudo simplesmente nenhuma coluna de elementos empilhados. Então, adicionei as informações de contato, adicionei-as no rodapé. Mas eu não fiz isso para nosso post único no blog porque acabei de decidir que talvez fosse demais. Quero dizer, nós já temos esses ícones que são repetidos aqui, como os ícones das mídias sociais. Eu pensei que já tínhamos contado aos nossos usuários o suficiente, como eles podem entrar em contato conosco? Então, basicamente, como você pode ver, adicionando nos rodapés, é apenas uma questão de adicionar esses elementos como verticalmente, como com todos os outros elementos. E também você pode decidir se deseja adicionar pelas informações de contato ou outras informações que precedem a comida ou, para esse assunto, ao seu celular. Versões móveis do design. 50. Os toques finais: Ok, então criamos nosso projeto e, ao longo do caminho, criamos nossa seção principal de heróis com a imagem. Claro, adicionamos o logotipo, adicionamos a navegação. E então informações aqui à esquerda. Em seguida, passamos a adicionar os serviços. Então, adicionamos os ícones, é claro, muito texto e um botão. Em seguida, adicionamos esta seção de portfólio com miniaturas de portfólio animado. Em seguida, passamos a adicionar um blog. Em seguida, adicionamos a Sobre mim, seguida da seção de contato e do rodapé. E, claro, ao longo do caminho, tornamos tudo responsivo. E lembre-se de que é uma boa ideia quando, depois de criar uma versão como uma área de trabalho de uma seção e depois segui-la com uma versão móvel dessa seção. E também adicionamos que, como um efeito de controle deslizante aqui, este carrossel de imagem. Adicionamos uma página de blog. Adicionamos, é claro, a versão móvel da página do blog. E adicionamos uma única postagem no blog. E é claro que ele é um único blog post versão móvel. É claro que poderíamos continuar e criar como uma seção Sobre nós, como uma seção como uma Fale conosco. Mas, honestamente, simplesmente repetiríamos os elementos que já temos aqui. Então, para a seção Sobre mim, vamos adicionar basicamente os mesmos elementos mais o logotipo e a navegação. Claro, seguiu bem com o rodapé. Para a seção Fale Conosco, basicamente adicionaremos o logotipo, a navegação, esta parte aqui e o rodapé. Então eu acho que deve ser como um desafio de design para você além de adicionar ou criar sua variação, sua versão de um site como este. E, claro, uma vez que tudo esteja feito, devemos verificar se todo o texto, se o espaçamento, se os tamanhos da fonte estiverem bem, poderíamos, é claro, pegar como a página inicial e ver a interatividade. Então, digamos que temos nosso botão Saiba mais. Temos esse botão aqui. Temos elementos do nosso portfólio como este. Botão Leia mais. Esses ícones funcionam da mesma forma que na seção anterior. Na seção de heróis, temos nossa seção de contato, recebendo seção tocada. E, claro, poderíamos verificar se, por exemplo, se nossos links funcionam. Portanto, esse link do blog funciona corretamente. E se clicarmos no logotipo, ele nos levará de volta à nossa página inicial. Então, em suma, acho que fizemos bastante. Nós cobrimos bastante. Então, como sempre, encorajo você a criar suas próprias variações do design ou talvez criar algo completamente mais. Contanto que você esteja utilizando todas as técnicas e os fatos e truques que aprendeu ao longo desse processo de design. 51. Compartilhar: A maneira mais fácil e óbvia de compartilhar seu projeto e elementos únicos dele é simplesmente exportar nele. Então, vamos ver como podemos fazer isso no XD. Então você pode estar se perguntando como a exportação é diferente da economia. Então deixe-me explicar. Você deseja salvar seu arquivo quando estiver ou algum outro usuário vai trabalhar nisso, nesse mesmo arquivo, você deseja exportar seu projeto quando ele concluído ou você quer apenas compartilhar alguns elementos disso, como algumas imagens ou ícones, Exportar TI. Os ativos podem ser fechados, o que significa que eles não são mais editáveis ou podem permanecer editáveis. Tudo depende do formato de arquivo escolhido ao exportar. Então, na verdade, como exportar seu projeto. Então, no menu Arquivo, você descobrirá que a função de exportação contém ainda mais opções. A opção em lote permitirá exportar vários ativos de uma só vez. Você só precisa marcá-los para exportação, seja no Inspetor de propriedades ou clicando no pequeno ícone de exportação ao lado do nome do ácido no painel de camadas. Se você escolher, selecione-o. Você pode exportar ativos específicos apenas selecionando-os sem precisar marcá-los para exportação. E você pode escolher Todas as pranchetas se quiser exportar todas as nossas placas, mesmo sem selecioná-las primeiro. Se você estiver usando o After Effects, você pode exportar seus ativos para esse aplicativo usando a última opção do After Effects. Portanto, seja qual for o método escolhido, você verá uma caixa de diálogo exportar ativos, que permite controlar ainda mais o processo de exportação. Dependendo do formato de arquivo escolhido, você verá um conjunto diferente de recursos disponíveis. E, por padrão, você pode salvar seus ativos como P e G. E usar esse formato permitirá que você controle o tamanho das exportações. E você pode escolher entre um tamanho de exportação personalizado predefinido que varia de 0,5 a quatro. Ou você pode escolher uma predefinição especializada, como Web, Android e iOS. A primeira ferramenta é simplesmente exportar seus ativos usando tamanhos personalizados predefinidos. Mas a predefinição do iOS exportará os ativos usando densidades de tela predefinidas. A opção Exportar para permitirá que você decida onde você salvará seus ativos exportados. Então clique no botão Alterar para selecionar o lugar certo no disco rígido. Portanto, o próximo formato de arquivo é AVG. É usado principalmente para armazenar gráficos vetoriais, mas você pode usá-lo para exportar imagens e textos também. E quando você selecioná-lo, você terá muitas outras opções , como estilo. E aqui você pode usar a opção de atributos de apresentação quando quiser exportar seus ativos para serem usados no Android Studio. E você também pode usar a opção CSS interna, que resultará basicamente em um tamanho de arquivo menor. Na opção Salvar imagens, você pode usar a incorporação para colocar a imagem dentro do arquivo. Ou você pode usar o link para adicionar uma referência à imagem armazenada separadamente. Em tamanho do arquivo, você pode usar a opção otimizada e minificada para manter o tamanho do arquivo menor. opções de caminho, você pode usar o traçado de contorno para converter Nas opções de caminho, você pode usar o traçado de contorno para converter traços dois caminhos para evitar que pareçam distorcidos. Os especialistas, novamente, permitem que você decida onde você salvará seus ativos de TI de exportação. Portanto, o próximo formato de arquivo é PDF. E aqui você pode decidir principalmente se deseja exportar seus ativos como vários arquivos PDF ou um único arquivo. E r é que, se você estiver usando a versão inicial do programa, você pode exportar apenas até dois arquivos PDF. E o último formato de arquivo dois é JPEG. É o único formato que permite controlar a qualidade da exportação em seu tamanho. A menor qualidade significa maior compressão. E isso resulta em um tamanho de arquivo menor. E uma qualidade superior significa que menos compactação é usada e um tamanho de arquivo maior é produzido. Então, geralmente, um bom equilíbrio entre o tamanho do arquivo e a qualidade é algo em torno de 75%. Agora acho que na maioria dos casos, você usará os formatos de exportação PNG e JPEG, especialmente para apresentações rápidas. No entanto, o XD vem com um espaço de trabalho compartilhado completamente separado que permite compartilhar seus projetos para vários cenários. 52. O espaço de trabalho de compartilhar: Portanto, esse espaço de trabalho é particularmente útil quando você está trabalhando com uma equipe de partes interessadas, como designers, desenvolvedores ou simplesmente revisores. Então, aqui você pode criar links que podem ser usados, editados e revisados para colaborar em seu design. No Inspetor de propriedades, você pode escolher uma das configurações de exibição dependendo de quem deseja compartilhar o design. Uso dessa revisão de design para obter feedback sobre seu design de outros designers dentro da equipe. Portanto, por padrão, para comentar hotspot portanto, os controles de navegação estarão ativos e usarão seu desenvolvimento presente para compartilhar seu design com os desenvolvedores. Por padrão, comentar hotspot, portanto, controles de navegação e especificações de design serão compartilhados. A predefinição de apresentação otimizará seu design para ser melhor apresentado às partes interessadas. E, por padrão, o hotspot, portanto, os controles de navegação e a opção de tela cheia estarão ativos. E a predefinição de teste do usuário permitirá que outros usuários testem seu design. E aqui, por padrão, somente a opção de tela cheia estará ativa. E, claro, você pode personalizar a experiência do design que está compartilhando e opções de compartilhamento de conhecimento e interação podem ser adicionadas ou removidas livremente. Então, depois de definir todas as opções de configurações de visualização, você pode definir as permissões de acesso ao link. Então, as opções aqui são alguém com o link? Bem, isso basicamente significa que qualquer pessoa que tenha o link poderá visualizar o projeto. Mas você também pode restringir o arquivo a ser visualizado apenas por pessoas selecionadas. Claro, se você escolher a única opção de pessoas convidadas. E qualquer pessoa com senha, o que significa que qualquer pessoa que conheça a senha que você disse pode acessar o arquivo. Então, quando você estiver pronto para compartilhar seu arquivo, basta clicar no botão Criar link. E depois de algum tempo, o link será criado, você descobrirá que o link em si, juntamente com alguns botões que permitirão copiar o link do projeto embutido em um iFrame codifique ou compartilhe no Behance. Você pode clicar no link gerado e será redirecionado para uma página onde você verá o design junto com painéis adicionais à direita. Então, novamente, se você estiver usando a versão inicial do XD, você só pode compartilhar um projeto por vez. E se você precisar compartilhar mais, você precisa atualizar para um plano premium. No entanto, você sempre pode simplesmente excluir o que você compartilha e a neve simplesmente compartilhe outro. E para fazer isso, temos que selecionar a opção de links gerenciados, que abrirá a guia Arquivos publicados na sua conta da Adobe. E aqui você pode excluir permanentemente o arquivo. Claro, o design original permanecerá intacto e você pode simplesmente, você sabe, compartilhar outro. Lá vai você. É assim que você pode compartilhar seus arquivos em uma equipe de partes interessadas no XD. Agora, se você está apenas começando e quer aprender o programa, pode estar trabalhando dentro de uma equipe não será sua rotina diária. Mas ainda acho que essa é uma funcionalidade importante e é simplesmente uma boa ideia se familiarizar com ela. 53. Compartilhar com um cliente: Uma pergunta que eu realmente recebo muito dos meus alunos é em quais formatos de arquivo devo entregar meu design ao cliente? E a resposta é, em última análise, uma das mais frustrantes. E é, hum, depende. Quero dizer, antes de tudo, se você concordou em entregar ao cliente todos os direitos sobre o projeto, então você deve entregar na maioria dos formatos. E isso inclui o arquivo de origem. Então eu normalmente exporto o projeto em JPEG, PNG. Eu adiciono o arquivo de origem, por exemplo, p XD, XD ou AI. Eu também uso PDF e se o projeto não foi feito usando o Photoshop, eu o exporto para PSD porque é tão onipresente. Todo mundo entende P como o n. Quando isso for feito, eu zip todos os arquivos. Se, no entanto, você não concordou com o cliente em transferir os direitos autorais para o projeto. Você não precisa compartilhar o arquivo de origem. Agora, nesse caso, eu ficaria apenas em JPEG, PNG e PDF. Além disso, se o seu projeto estiver usando vários quadros de arte, eu os salvaria como arquivos JPEG ou PNG separados e um único arquivo PDF. Dessa forma, você facilitará a visualização do projeto para seu cliente. Então, em poucas palavras, se você tiver dúvidas sobre quais formatos de arquivo usar, basta usar PNG, PDF e, opcionalmente, o arquivo de origem. Então, como eu mencionei, é sempre uma boa ideia compactar seus arquivos. E a maioria dos sistemas operacionais modernos permitirá que você faça isso sem nenhum aplicativo separado. No entanto, se você precisar de um programa autônomo para arquivamento, você pode usar sete zip que é gratuito, código aberto e pode ser instalado no Windows, PC, macOS e Linux. Compartilhar seus arquivos é sempre a última etapa do processo de design. Então, uma vez que o projeto tenha sido aceito e pago, você pode chamá-lo de um completo e total parabenizar-se por um trabalho bem feito. 54. RESUMO: Então, eu realmente espero que você tenha gostado de aprender o XD e espero que você o use em seus futuros web designers. É um software muito importante para ter em seu portfólio de habilidades. Então, vamos resumir rapidamente o que aprendemos aqui. Então, primeiro, abordamos o básico absoluto, como a tela inicial contornando o espaço de trabalho e entendemos a diferença entre design e prototipagem. Em seguida, criamos nosso primeiro novo documento. Aprendemos a gerenciar obras de arte, camadas e ferramentas. E na próxima seção, aprenderemos como usar plugins e ativos. Também compartilhei com você meus plug-ins favoritos estão usando o XD. Então aprendemos um pouco sobre a teoria do web design, ou seja, as cores, a tipografia e as melhores práticas do web design moderno. Depois disso, passamos para a parte principal do design e criamos um projeto de site pessoal para um design de freelancer. Por fim, aprenderemos como você compartilha seu projeto? Então, obrigado por chegar até esta parte do curso. Espero que, com algum tempo e prática, você possa criar seus próprios projetos de forma independente. E se este curso ajuda você a embarcar em um design bem-sucedido de carreira freelance ou emprestar um emprego de web designer. Isso significará que foi útil e que serviu ao seu propósito. E isso me faria muito feliz.