Criação de websites do zero em Adobe Xd — agência de viagens

1. Introdução do curso: Ei designer e meu nome é Alex e bem-vindo a esta aula de Skillshare sobre design de site no Adobe XD. Eu sou o fundador da web donut, onde criamos sondas de design para criativos como cubo. Eu também sou professor, e até agora mais de 30000 alunos se matricularam em minhas aulas. Nesta aula, vamos projetar um site para agência de viagens. E vamos abordar como começar com o resumo do projeto e explorar nosso público-alvo e explorar o mercado, análise do concorrente e ver o que eles estão fazendo e o que podemos melhorar em nosso design. Crie um quadro de humor para determinar o estilo e a direção de nossos projetos. Desenhe wireframes no papel para explorar a estrutura e colocar ideias da nossa cabeça no pedaço de papel. Então vamos importar esses desenhos para o Adobe XD e criar wireframes e compartilhá-los com nossos clientes para obter feedback. Com esse feedback, vamos passar para o design e adicionar cores, imagens, ícones e muito mais. Com o design em vigor, adicionaremos animações e interações para dar ao cliente uma melhor sensação do fluxo do usuário e das transições. Em seguida, crie um design responsivo e adaptado para trabalhar em diferentes tamanhos de tela, de desktops a tablets e telefones. Finalmente, vamos compartilhar nossos arquivos com clientes e desenvolvedores usando diferentes métodos e técnicas. Qualquer pessoa pode seguir essa classe, mas como ela contém algumas técnicas e animações mais avançadas, conhecimento básico do Adobe XD é necessário para seguir essa classe sem problemas. No final desta aula, você poderá criar layouts complexos de sites no Adobe XD usando técnicas avançadas de organização e animação. Sua classe de projeto Skillshare para esta classe é usar uma das páginas, ou se você quiser, você pode até mesmo projetar ou quatro. Eu exorto você a usar suas próprias imagens, talvez usar seus próprios ícones e talvez até mesmo usar suas próprias cores apenas para apimentar as coisas um pouco, seguir as técnicas e seguir as diretrizes desta classe para chegar a seu próprio design. Então publique esse projeto em seus projetos de classe para mim e todos os outros verem. E ficarei feliz em fornecer-lhe o feedback. Então, se você quiser melhorar suas habilidades e produtividade, economize muito tempo em iterações e alterações e crie designs mais rapidamente. Então, vejo-te na aula. 2. Resumo sobre design: Certo, então a primeira lição com a qual vamos começar esta aula é com o resumo de design. E eu sempre recomendo que vocês comecem com o resumo de design porque dessa forma você pode obter tantos detalhes quanto você precisa para começar a trabalhar em seus projetos. E é sempre melhor fazer isso antes de começar a trabalhar em um projeto porque assim você pode fazer ao seu cliente quantas perguntas quiser e como você precisa para obter uma imagem melhor de uma marca, de um projeto ou o que eles Necessidade. Então eu vou mostrar a vocês nosso modelo que vocês podem usar para projetos pessoais e comerciais. E eu vou dar-lhe seu modelo come Adobe XD modelo e você pode, obviamente, editado tanto quanto você quiser. Então aqui é esse modelo, bem aqui você tem breves fundamentos. E aqui temos o nosso resumo. E, obviamente, o nosso resumo é o que vamos focar neste vídeo. Mas você também pode explorar breves fundamentos e aprender mais sobre tudo isso. Basicamente, estas são apenas as perguntas que você vai fazer ao seu cliente para obter uma melhor imagem da própria marca, para obter uma melhor compreensão do que eles precisam deste projeto. Então aqui temos o resumo preenchido. Mais uma vez, você vai obter um modelo vazio que você pode sentir com seus detalhes. Mas aqui temos este resumo preenchido com o perfil da empresa. Chama-se Design de site Viajante. E você pode ver que o prazo é 6 de abril de 2020. Um perfil de empresa, tão gravelly é uma agência de viagens localizada em Belgrado, Sérvia. Eles têm parceiros em todo o mundo e suas especialidades combinando viagens para ótimos locais com ferramentas e exploração da cultura e gastronomia locais. Os mais focados em excursões em grupo, mas têm opções para ferramentas individuais onde eles estão fornecendo tudo, desde bilhetes, hotel, comida, passeios, tudo em um pacote exclusivo. Suas viagens duram entre três e 14 dias e eles estão tentando se concentrar nas viagens aéreas, tanto quanto possível, porque isso economiza muito dinheiro. Enzima entre as excursões. Eles têm dez funcionários em tempo integral, tão pequena empresa aqui e têm agentes freelance trabalhando com eles de todo o mundo, de operadores turísticos a proprietários de acomodações e serviços de transporte. O objetivo principal deste projeto é atrair mais usuários para seu site e encomendar um tempo, fechar lojas físicas e mover tudo on-line. O design de aplicativos móveis é possível no futuro. Então, basicamente, o que temos aqui são algumas características importantes e importantes. Número 1, eles realmente não são tão grandes de uma empresa. Eles só têm 10 funcionários. Eles só têm uma localização em Belgrado, Sérvia. E seu principal objetivo para este projeto é ao longo do tempo, eles querem atrair o maior número possível de pessoas de outras partes da Sérvia e também de outras partes da Europa para seu site para que eles possam reservar essas tiras. E porque o seu foco principal é as viagens aéreas, é muito mais fácil para eles do que expandir-se para todos esses outros países e mais tarde em toda a Europa. E expandir nossa força de trabalho simplesmente usando as viagens aéreas em vez do ônibus. Porque se você quer viajar de ônibus ou de trem, você tem que estar lá fisicamente. Mas com os aviões, você pode reservar aviões para ir de qualquer aeroporto do mundo, basicamente para o local desejado. Então, digamos que você tem, por exemplo, 20 pessoas que querem visitar a Grécia e são da Irlanda, por exemplo. Então você pode reservar uma viagem personalizada na Irlanda para ir para a Grécia. E eles podem ser os operadores turísticos guiando e reservando todos esses serviços. Então é basicamente isso para esta seção. Vamos agora passar para a próxima seção. E na próxima seção temos projeto ou real. Portanto, o projeto está focado em um redesenho de seu site atual, que parece datado e muito complicado para usar a experiência do usuário ou seu site atual requer mudança imediata, a fim de que os usuários tenham uma melhor experiência enquanto no site. divulgação de texto e as imagens são antigas e todo o design não fala bem com o público-alvo. Em seguida, tentar chegar projeto vai consistir em pesquisa, wireframes, design e entregáveis para o cliente. E seus principais problemas no momento estão atraindo mais pessoas para o site. E quando eles estão, eles estão convertendo-os para usuários porque muitos chegaram ao site, mas saem antes que eles se convertem para ser os usuários. Este é o principal objetivo porque os curriculares estão fazendo isso tudo na loja quando as pessoas visitam o local. Então, é o trabalho do agente no momento. Eles estão tentando mover o máximo de coisas on-line possível. Então, mais uma vez, você pode ver aqui a partir deste projeto ou você o que eles precisam. E eu realmente aconselharia vocês a falar com seus clientes e obter máximo de detalhes possível, porque todos esses detalhes que vocês vêem bem aqui eu tenho estou falando com o cliente. Basta fazer-lhes todas estas perguntas. Você pode seguir essas perguntas a partir deste resumo de design, ou você pode criar suas próprias perguntas, que eu realmente encorajaria você a fazer, porque nem todos os projetos são iguais e você não vai ser obrigado a usar todas essas informações para todos os seus projetos. Porque às vezes você vai ter apenas um projeto de página de destino e às vezes você vai ter um site com, por exemplo, 50 ou 100, 100 páginas diferentes. E obviamente para esse site tão grande você vai precisar de muito mais detalhes e muito mais informações do que para aquela única praia de pouso. Então, abaixo temos metas e objetivos. Então, como dissemos, principal objetivo deste projeto é atrair mais usuários para o site, tendo a grande experiência de usuário fazendo-os ficar e reservar a viagem. Então, mais uma vez, você pode ver o padrão aqui e eles querem que seus usuários tenham ótima experiência de usuário para reservar a viagem e mover o máximo de coisas possível on-line, basicamente para evitar que as pessoas vão à sua loja física. Os objetivos deste projeto é acompanhar as pessoas com grande oferta e tirá-las da concorrência. E uma vez que eles se tornam um cliente, fazendo-os ficar um, upselling deles outros serviços e ofertas como turistas, por exemplo. O objetivo deste projeto é diminuir a taxa de rejeição em 30%. E taxa de rejeição é basicamente essas pessoas que visitam o site e sair antes de se comprometer com uma compra ou reservar a viagem ou algo assim. Os primeiros seis meses, uma vez que o site entra em funcionamento, objetivo adicional é converter 15 por cento mais pessoas nesse tempo em combinação com sua estratégia de marketing. E eles vão lançar junto com este site. Então, mais uma vez, eles querem diminuir essa taxa de rejeição, aumentar o número de inscrições, número de reservas de viagens. E eles também querem fazer isso em conjunto com suas táticas de marketing. Então, por exemplo, dedicados a reservar nossos comerciais de rádio, eles queriam reservar comerciais de TV. Eles querem usar ferramentas de marketing on-line, como Facebook e Instagram marketing. Eles querem criar, por exemplo, clipes do YouTube. E o que eles querem fazer com todos esses esforços é atrair pessoas para seu site, que vamos projetar. E então possivelmente converter 30% mais pessoas nos primeiros seis meses desse esforço. Objetivos muito diretos, mas muito difíceis de alcançar. E é por isso que estamos aqui para tentar converter o maior número possível de usuários através de um excelente design. Abaixo temos público-alvo. Então você pode ver que a idade é de 20 a 70. Então uma faixa etária muito grande porque esta é uma agência de viagens e eles têm algo para todos. Eles têm algumas viagens que os mais jovens podem preferir. têm alguns lutadores fora viagens com pessoas mais velhas, que eles podem preferir sexo ou 40 por cento masculino, 60 por cento feminino. Porque a partir de suas pesquisas geralmente 60%, todas elas são mulheres porque as mulheres geralmente são as que estão reservando distritos para seus maridos, para seus irmãos, para seus namorados e assim por diante. País de residência atualmente apenas Sérvia. Mas como dissemos, eles queriam expandir a cidade de ressonância Belgrado porque eles são seu local de trabalho, principalmente empregos de baixa renda com pequenos empresários, bem como, especialmente freelancers, especialmente para viagens mais distantes, como, por exemplo, Tailândia, como por exemplo, caubóis Indonésia, coisas assim. Porque esses nichos estão longe de Belgrado, Sérvia. Hábitos de consumo de mídia Então 60 por cento Instagram porque denotam isso por quantos seguidores eles têm e quantas tração eles atraem e todas as mídias sociais. Então é por isso que eles os colocam em um pedaço de papel como este. Por cento úmido está no Twitter e 10 por cento está em tiktok. Hábitos diários, consumo de mídia social, entrega , alimentação saudável e exercício à tarde. Finalmente, estamos atingindo esses dois requisitos de design. Eles querem ativos demências, resoluções para estar no desktop, desktop menor, tablet e telefone. E estas são a resolução de redimensionamento responsiva. Os formatos de arquivo são Adobe XD como o arquivo de projeto principal, SVG para os ícones porque eles querem dimensioná-los mais tarde e usá-los na impressão, por exemplo. Então, SVG é o caminho a seguir. Imagens Png e JPEG, obviamente B e G para as imagens sem quaisquer fundos. E, finalmente, cerveja para projeto breve e recomendação adicional projeto, breve design. É isso que você vê aqui? Então você pode simplesmente pular aqui. Pressione Control E, selecione em vez de PNG, selecione PDF, selecione seu destino porque eu não tenho isso e simplesmente pressione Exportar. É por isso que ele vai ser exportado como um PDF. E então você pode compartilhar este PDF com seu cliente para que ele tenha este resumo de design também. O que temos a seguir são formatos de arquivo. Então, como dissemos, todos eles exigem paleta de qualidade fornecida a pedido. Então eles forneceram uma paleta de cores e nós vamos usá-la. Mas eu ainda vou mostrar a vocês como você pode usar os moodboards para gerar sua paleta de cores e trabalhar o seu caminho ao redor com seu cliente. Ativos de imagem a serem incluídos, fornecidos a pedido e associar Copy documento fornecido a pedido e comunicação que incorporamos ao longo do projeto porque precisamos de detalhes desses destinos para nos ser fornecidos. Por último, estamos a chegar ao orçamento, ao calendário e à repartição orçamental. Portanto, o total é de dez K, cinco K antes do início do projeto e cinco chave após a conclusão, quebra cronológica. Então, obviamente, você pode ter sua própria linha do tempo aqui, mas aqui é como o meu geralmente funciona. Portanto, um cronograma do projeto é três meses de tempo adicional para revisão e alterações de ativos para os desenvolvedores. Então isso é um plus, mas esse plus também vai ser uma cobrança. Além disso, por exemplo, você pode dar uma revisão gratuitamente enquanto estiver trabalhando, ou você pode dar duas divisões. Então, por exemplo, um após os wireframes e um após o projeto, e então cada ilusão depois disso vai ser cobrado mais. Então eu sempre recomendo que você faça isso porque quando você definir seus limites com seu cliente , eles estarão mais focados em seu design. E então eles vão lhe dar mais feedback de qualidade. Portanto, não desperdiçando seu tempo e não desperdiçando seu tempo também. Portanto, você tem que ser objetivo. Você tem que dizer a eles diretamente antes mesmo de ativar o Adobe XD. Quando sua máquina basicamente, você tem que dizer a eles todos esses preços. Você tem que dizer a eles a linha do tempo. Portanto, eles sabem no que estão se metendo. Então, se pularmos de volta aqui, você também pode alterar essa linha do tempo para que você possa ver o planejamento, a pesquisa, a apresentação de design do público, essa divisão e, finalmente, a entrega. Então esta é a minha linha do tempo e obviamente você pode mudá-la para o que quiser. Você pode alterar as datas aqui para quanto cada etapa do projeto vai levar você. Você pode alterar isso para o seu nome ou seu site e este deve ser o seu e-mail em vez de mente. Finalmente, eu só quero te mostrar isso rapidamente. Você pode pular aqui e mudar todas essas coisas para que você possa mudar a cor se quiser. Eu não queria criar nenhum tipo de componentes aqui, como você pode ver, qualquer tipo de cores. Porque eu queria que fosse tão fácil de editar para vocês quanto possível. Talvez queiras que isto seja, não sei, algum tipo de efeito de pairar. Talvez você queira criar isso para ser 3D. É por isso que eu não queria editar mais isso. E é por isso que vocês têm a opção completa de editar este modelo. Então, basicamente, as dívidas por este vídeo. No próximo vídeo, vamos saltar para a análise concorrente. Vamos analisar alguns sites reais e eu vou mostrar a vocês o que há de errado com eles e o que vamos tentar alcançar com este projeto de site e o que vamos tentar evitar aprendendo com esses erros nossos concorrentes. Então, vemo-nos lá. 3. Análise de concorrência: Neste vídeo, vamos começar com uma análise rápida do concorrente. Vamos analisar os concorrentes de músicas neste campo. E o que é mais importante de tudo, concorrentes de logotipo, porque este negócio quer competir localmente com empresas locais. Portanto, vamos explorar o que eles estão fazendo certo e também o que eles estão fazendo errado. Para que possamos tentar evitar usar isso em nossos próprios projetos. Então o que temos aqui são todos esses sites. Eles estão em sérvio, mas eu tentei traduzi-los para Inglês aqui no Chrome usando o botão direito do mouse e, em seguida, traduzir para a função Inglês. Então, desculpe, se você vê algum sérvio e você não entende, mas basicamente, nós vamos apenas focar no design e usabilidade, então isso realmente não importa. Então vamos começar com este. Você pode ver layout obviamente encaixotado e todo esse espaço vazio, então não ajustando dívida realmente antiga. Bem, você também pode ver que você não sabe onde se concentrar. Então temos este menu, este menu, este menu, temos estes menus, temos estas imagens, estas imagens. Então, onde devo me concentrar? Simplesmente me guie através deste site. E isso é tudo porque esses negócios fedem e você vai notar que isso é uma espécie de equipe aqui, dívida. E quanto mais informações eles tentaram juntar, a bateria vai ser para profundidade, que obviamente não é o caso porque os usuários desses sites são basicamente os mesmos que os usuários de todos esses outros sites. que basicamente significa que eles só querem alcançar a sua oferta e eles só queriam obter o que é certo para eles e simplesmente seguir em frente com suas vidas, parece com todos os outros sites online. Portanto, esses sites não são tão diferentes de todos esses outros nichos e todas essas outras categorias. Portanto, oriente seus usuários através do seu site e mostrou-lhes peça por peça para que você possa seduzi-los a clicar em para ir para essas outras seções do seu site ou das outras seções da sua página. Portanto, o que temos aqui não é tão bom. Além disso, o que eu notei em todos esses sites é que a topografia é extremamente pequena, que é difícil se você lembrar que alguns de nosso público-alvo vai todo o caminho para 70 plus. Portanto, eles podem ter alguma dificuldade em ler todo este texto. Além disso, como você pode ver, este controle deslizante não está funcionando muito bem porque eu não posso mudar nada. Simplesmente funciona por si só. Tenho que clicar aqui, o que não é óbvio desde o início. Portanto, quando você está trabalhando com controles deslizantes, torná-lo o mais óbvio possível para as pessoas. Onde eles devem clicar para ir para a próxima imagem se eles querem ir em tudo. Aqui temos todas essas categorias diferentes divididas. E eu não acho que isso funcione tão bem. Vamos dar uma olhada para um responsivo. E responsivo funciona bem até o ponto, mas você pode ver imediatamente aqui eles estão apenas usando layout em caixa e todo esse espaço vazio perdido aqui à direita, você pode ver que todas essas imagens não estão dimensionando corretamente, mapa não está dimensionando corretamente, rodapé e assim por diante. Então, portanto, eu apenas, se você tem que usar o layout da caixa para usá-lo, mas certifica-se de dimensioná-lo corretamente. Comece a usar o design responsivo. E você pode ver aqui mesmo com os ícones de mídia social, basta tirá-los daqui. Certifique-se de que eles estão aqui ou dentro do rodapé. Você pode ver quanto espaço você tem aqui. Então vamos passar para o outro. E este é um dos maiores aqui na Sérvia. Então eles têm os mesmos erros, mas o corrigido alguns deles, como por exemplo, você pode ver que nós podemos realmente clicar nesses pontos de paginação e mover entre nossos controles deslizantes. E eles também têm isso aqui para que possamos escolher o que quisermos e podemos clicar na Pesquisa. E leva-nos onde nos leva a esta página aleatória, a busca. Você pode ver os resultados da pesquisa. Então, ele só nos leva aqui, mas eu só quero clicar e mostrar a barra de pesquisa para que eu possa inserir meus detalhes e você pode ver que eles não têm nenhum detalhe de pesquisa aqui. Então você tem que passar por todos esses e, em seguida, clicar em Pesquisar, que basicamente evita o ponto de ter essa pesquisa. Talvez devesses ter um botão em vez deste ícone. Mais uma vez, temos essa navegação confusa. E quando eu pairo bem aqui, você pode ver que ele cobre esta parte inferior. Então, quando eu passar o mouse, você pode ver que eu não posso clicar na parte inferior, eu não posso vê-lo. E isso é realmente um grande problema. Mas quando eu clico aqui, você pode ver que eu ainda não consigo ver tudo isso, mas isso cobre isso. Então é apenas uma enorme dor de cabeça usando esta navegação e é muito complicado, assim como esta seção, mais uma vez, todas essas cores gritando para mim fontes muito minúsculas. Não há imagens. Então, por exemplo, esta sala de reuniões, como, o que é, como se parece? É R C, é uma montanha? É isso? Não sei, ao contrário, recorrer ao que é. Além disso, essas imagens aqui, ajustam essas imagens para que elas não sejam banners ou dan indo para escalar razoavelmente, ou pelo menos se elas estão diminuindo a mistura com seus designers para criar, por exemplo, três ou quatro adições diferentes de estas imagens de banner para que você possa usá-las em todas essas seções diferentes, porque aqui estão elas. E quando eu começar a redimensionar, você pode ver que esses banners estão permanecendo os mesmos e este texto é realmente difícil de ler. Mais uma vez, o que temos aqui é a navegação desapareceu e esta parte superior desapareceu completamente. Mais uma vez, temos isso, o que é bom. Isso é ótimo quando você quer economizar muito espaço. Isso também é bom. Mas mais uma vez, esta confusão. Então vamos com a Sérvia. E você pode ver que isso fica bem aqui, então é muito confuso. Esta navegação. Mais uma vez, as imagens não são tão boas. Você pode ver que as imagens não estão dimensionando aqui. Então, por quê? E eles têm efeitos de pairar. Portanto, note que esta é a versão móvel, mas eles ainda têm efeito de pairar. Como vai pairar quando você passar o dedo sobre ele. Então isso deve realmente consertar isso. Além disso, você pode ver que as imagens não estão dimensionando para o tamanho. Você pode ver todo esse texto. Então azul e preto em vermelho e branco realmente não funciona tão bem. Mais uma vez, espaço vazio com apenas mostrar que isso é feito por um designer elisa ou por alguém que não sabe o que eles estão fazendo tão bem. Estes ícones são muito grandes, mas pelo menos eles têm algum grande rodapé e eles têm essas opções de pagamento, o que é sempre ótimo. E, finalmente, eles têm ícones de mídia social aqui e de volta ao topo, o que é sempre ótimo. Então, mais uma vez, eles fazem algo bom, mas muitas dessas coisas não são tão boas. Então vamos passar para este chamado Big Blue. E eles têm algumas informações bem feitas como esta, por exemplo, como eu disse, esta navegação é muito melhor. Então vamos com o verão Cherokee. Você pode ver que esta navegação funciona muito bem. Eles também têm uma barra de pesquisa que é grande, que se expande, que eu tenho que elogiá-los. E finalmente, o que eles fazem. Mas você tem que clicar sobre ele para fechá-lo. Mais uma vez, por que não pode simplesmente clicar em outro lugar e ele vai fechar. Mas não importa, pelo menos o hábito, isso é meio que um pesadelo com todos esses campos. Mas mais uma vez, pelo menos eles os têm. Eles também têm isso, mas pelo menos eles não têm tantas cores como esses caras. Então inteiros têm basicamente três cores. Blue, que é o nome da empresa em que está bem, continua com a marca. Eles têm duas versões de cor preta, por exemplo. Eles têm essa cor dourada, por exemplo, e eles têm esses quadros em torno dela. Pelo menos você sabe que isso é uma seção por si só. Eles têm essas imagens, mas o que eu não gosto é dessas por doações e esses controles deslizantes se movendo em seu próprio ritmo. Você pode clicar entre todos esses itens. Vai mudar, o que é ótimo. Mas, mais uma vez, muitos desses e R simplesmente os separariam em seções diferentes e faria os usuários clicarem se quisessem. Porque assim é apenas uma distração. Se eu deixar bem aqui. Você pode ver que está funcionando como louco em um fundo. Então eu realmente não gosto disso. Aqui eles têm essas imagens, o que é bom, mas eu vou apenas torná-las muito maiores porque você pode ver este espaço vazio esquerda e direita aqui para ter essas imagens, o que é bom. E eu realmente gosto do layout deles, então eles estão usando o espaço de sabiamente e não apenas enchendo essas imagens onde eles podem encontrar que eles têm destino de bordo da Best Buy. E você pode ver esta lista que é ótimo. Eles têm marcas com as quais trabalharam ou ainda trabalham. E eles têm essa foto que não é tão grande, mas não pode passar. E, finalmente, e-mail boletim informativo, o que é ótimo para que você possa entrar com. Finalmente eles têm aqui na parte inferior, eles têm algo como um logotipo, e eles têm esses ícones de mídia social, que é ótimo e de volta ao ícone de cima aqui, que não é mais velho, visível, mas Pelo menos eles têm. Vamos ver, em redimensionar. Como pode ver, funciona muito bem. Fica na marca. Isso é facilmente legível, mas mais uma vez, essas ações, essas imagens estão dimensionando terrivelmente. Você não pode lê-los mais aqui. Então, o que diz aqui nesta seção vermelha, ou realmente não faço ideia. E você pode ver mais uma vez que as seções não são tão boas. Isto é terrível. Você deve dimensionar corretamente e não como este ou por que você não apenas escala imagens e colocá-los em cima um do outro ou simplesmente usar esses controles deslizantes como eles realmente gostam de fazer aqui. E o que temos aqui são “D”. Então por que não usa essas flechas para tudo isso? Eu realmente não entendo. E, finalmente, o que temos aqui são essas imagens usadas mais uma vez como são, elas não são dimensionadas corretamente. Estes fóruns mais uma vez, então você terá duas telas. Então, por que usar um pouco disso? Enquanto esta seção realmente escala muito bem. Escalas de rodapé muito bem. Ícones de fóruns e redes sociais de volta ao topo ainda está aqui. E vamos ver o horror. Veja se eles desligaram. Vamos ver. Eu acho que eles realmente fizeram. Gosto desses caras que não desligaram a energia. Você pode ver aqui, eu acho que datado para as versões móveis, o que é ótimo. E finalmente, vamos passar para este site, que é para pessoas mais jovens e públicos mais jovens. Então você pode ver imediatamente aqui que eles usaram algumas técnicas um pouco diferentes, então todos esses outros sites que eu mostrei a vocês, você pode ver que eles têm grandes textos bem aqui no meio de sua imagem. Eles têm flechas esquerda e direita, o que é bom. Basta usá-los e deixe-me escolher o que eu quero fazer. E eles têm paginação bem aqui. Eles têm navegação agradável e simples com grandes animações. E você pode ver, se eu pairar bem aqui, não cobre toda essa área. Só cobre o que precisa cobrir. Abaixo disso, eles têm todos esses grandes cartões que funcionam em Howard muito bem. E eles têm pavimentos separados para uma imagem de fundo e para o próprio botão. Eles têm claro em cima bem aqui, o que eu realmente gosto que eles estão usando vídeo. Então, como você percebe, nenhum desses sites anteriores usava vídeo. Eles apenas usam imagens e eles estão usando vídeo para atrair os mais jovens para basicamente comprá-los deles porque eles são principalmente focados em pessoas mais jovens, viagens de festa de Andy. E você pode ver aqui, essas cartas estão realmente ótimas, mas mais uma vez, escale-as e preencha o resto do espaço. Eles têm uma citação aqui, mas eu iria apenas usar pelo menos um banner, por exemplo, toda a largura do seu site e talvez você como uma imagem de viagem para inspirar as pessoas com esta citação, porque isso é o que as citações devem fazer em sites como estes. Então talvez use uma imagem de banner com a citação no meio. Temos alguma França que é ótimo, subscrever, que sempre ficar aqui, que são realmente como, mas não há botão aqui. Então, uma vez que eu entrar meu e-mail deve ter pressione Enter. O que devo fazer quando estiver usando dispositivos móveis? Então pense em coisas como dívidas. Então, finalmente, eles têm este grande e incrível rodapé. Eu realmente gosto. É bem simples. Então aqui é seu destino e suas localizações, ou eles têm seus números de telefone, eles têm seu endereço de e-mail, eles têm destino diferente. Então nesta outra cidade chamada graduados, e eles têm números de telefone separados para essa cidade. E você pode ver os sites de seus parceiros locais. E finalmente, ícones de mídia social bem aqui. Chat não está disponível no momento, mas pelo menos eles têm o bate-papo, que nenhum desses outros e fazer. Finalmente, quando eu clico no topo, você pode ver como isso se parece e basicamente é isso. Portanto, o ponto principal dessas explorações é entender o que seus concorrentes estão fazendo. Tentei copiar coisas boas, mas obviamente ajustá-las para a marca que você está trabalhando e tentar evitar coisas ruins como eu mostrei aqui. Então, por exemplo, imagens de topografia muito pequenas que não são dimensionadas bem, pontos de toque muito pequenos. Então, quando você estiver trabalhando com design responsivo e os usuários precisarem tocar em algum lugar, verifique se esses botões são grandes se o texto é legível. As imagens são claras e certifique-se de que você está comunicando sua mensagem da melhor maneira possível para que seus usuários entendam você desde o início. E assim que chegarem ao site. 4. Criando um moodboard: Neste vídeo, vamos criar quadros de humor para o nosso projeto. E os moodboards são basicamente Derek, só para te deixar no clima, como o nome sugere. E basicamente eles estão lá para você explorar possíveis combinações de cores, possíveis humores, e que essas imagens estão usando para deixar o seu no clima. E basicamente é por isso que eles são chamados de moodboards. Agora você pode usá-los para você mesmo. Você pode usá-los em um formato digital ou você pode criar, por exemplo, algo como um tamanho de letra de quatro ou EUA e imprimi-los mais tarde e mostrá-los aos seus clientes. E, obviamente, você pode sempre exportá-los como PDF, por exemplo, e enviá-los para os clientes dessa forma. Agora as placas de humor podem ser tão elaboradas quanto você quiser ou tão simples quanto você quiser. Você pode incluir, por exemplo, algo como duas ou três imagens diferentes ou você pode usar, sei lá, dezenas de imagens diferentes. Você pode usar diferentes combinações de logotipo dependendo do que você está trabalhando. Como estávamos trabalhando em um projeto de site, por exemplo, podemos incluir diferentes navegações. Podemos incluir diferentes para nós e coisas assim para entrar no modo. Então eu vou mostrar alguns modelos que vendemos na web Donald, que é a minha empresa. Você pode obter esses modelos com desconto e deixarei o desconto em um PDF. Basta clicar nesses links e o desconto já será aplicado. E apenas para a facilidade de uso para vocês, se você quiser ou se não, você pode simplesmente criá-los facilmente no Adobe XD. Deixe-me mostrar rapidamente o que quero dizer. Aqui estão meus sites, web, rede de Pato Donald. E você pode ver que temos seção Produtos. E dentro dessa seção de produtos, temos todos esses produtos diferentes. E se você escolher placas de humor, é assim que eles se parecem. Então temos este quadro de humor. E você pode ver que ele vem no formato de arquivo Photoshop e XD. Ele vem em dimensões de quatro letras. E basicamente isto é antes e este é o depois. Você pode ver como eles são fáceis de usar. Você pode provar cores. Você pode incluir imagens diferentes, e estes são os tamanhos diferentes e você pode ver quantos deles temos. Basta navegar na nossa seção de produtos. E também deixarei o link no PDF para esses que estou mostrando a vocês, para que possam navegar facilmente. Estes são os Instagram e, obviamente, eles são quadrados. E há esses retangulares para as histórias. Se você quiser usá-los, você pode ver como eles se parecem e como eles podem se parecer. No Instagram, temos mídias sociais que são basicamente a mesma coisa. E, obviamente, porque o XD suporta nativamente arquivos do Photoshop e abre arquivos do Photoshop, você pode facilmente abrir qualquer um desses arquivos porque mais uma vez, XD suporta arquivos do Photoshop e você pode ver como eles se parecem. E, obviamente, temos quadradas, temos retangulares para o Twitter e Facebook. E nós também temos DES quer para o Pinterest, e você pode obviamente usá-los para Instagram Stories. E finalmente, temos estes que são para a impressão. E nesses, eu acho que a versão sketchier sketch também está incluída. Mas, como eu disse, você pode facilmente abrir seu arquivo do Photoshop, que vou mostrar-lhe em apenas um segundo. E é assim que eles se parecem. E você pode ver a ilustração aqui de se você imprimi-los, você pode usá-los assim e você pode comentar com seus clientes. Então, quando você abri-los no Adobe XD, desmontado, eles realmente se parecem. Então, basicamente. Eu cheguei aqui na página inicial e criei um quadro de arte de areia em 1080, você pode ver bem aqui. E eu simplesmente fui e abri um desses moodboards. E você pode fazer isso aqui a partir da página inicial. E você pode simplesmente abrir do seu computador ou você pode navegar em XD arquivo e você pode abrir o arquivo como esse. Este é o arquivo que eu abri e é um dos nossos produtos. E você pode ver aqui nós temos ícones de imagem. Vou simplesmente cumprimentá-los e fazer o mesmo para o logotipo. Eu vou clicar no meu logotipo e eu vou usar o logotipo do meu cliente realmente formado para este projeto. Aqui está. E porque eu não acho que vai caber e eu não tomo a escala bem, o que não serve. Vou simplesmente clicar em Control E e exportá-lo para a minha área de trabalho. Deixe-me escolhê-lo rapidamente a partir daqui, selecione a pasta, e eu vou exportá-lo como PNG. Então eu vou remover meu logotipo daqui, e eu vou olhar para a direita aqui, simplesmente arrastá-lo e soltá-lo dentro como um PNG para que eu possa facilmente dimensioná-lo para baixo se necessário. Posso simplesmente me posicionar aqui no centro. Você também pode selecionar estes dois clique aqui e seguida, direita aqui para se certificar de que ele está no centro. E como este é o objeto, você pode facilmente mudar sua cor e então você pode fazer o que quiser. Mas não vamos nos concentrar nisso agora. Em vez disso, vamos nos concentrar nessas imagens. Então eu fui em frente e baixei algumas imagens de ampliar ou elementos. E basta clicar duas vezes aqui e posicioná-lo aqui, por exemplo. Então eu posso sempre entrar e virar, por exemplo, assim. Mas acho que isso não funciona muito bem. Mas vamos deixar isso aí. Ou talvez possamos arrastar e soltar essa imagem lá dentro. Acho que funciona muito melhor. E podemos sempre virar porque o nosso logotipo está deste lado. E podemos usar essa primeira imagem nesta, por exemplo. E eu acho que isso funciona muito melhor porque você pode ver a pessoa no quadro aqui. Eu sempre posso arrastar e soltar outra imagem dentro. E como eu disse, essas imagens são usadas apenas para nossa inspiração. E eles são usados e apenas classificados. Podemos ver as cores e em termos de cores, por exemplo, vamos clicar duas vezes aqui no nosso login mais uma vez, e eu posso provar a cor do céu, por exemplo. E talvez eu devesse usar um mais escuro deste azul. E você pode ver como isso se parece e as próprias cores. Você pode simplesmente clicar nesta amostra e você pode experimentar algumas cores apenas para ter uma idéia geral dessas cores. E vamos do azul mais escuro. Vamos provar um pouco de azul mais claro assim. Vamos usar nosso AN ou algo no meio, talvez algo assim, cor da terra. Talvez possamos usar algo assim e depois trocá-los. E você pode ver como isso é extremamente simples de navegar. E talvez possamos usar uma cor mais escura. Vamos usar, não sei, talvez este. E isso basicamente é o nosso moodboard feito. E obviamente você pode brincar com eles o quanto quiser. Mas vamos deixar assim. E você também pode trocar por isso. Você pode clicar duas vezes nessa imagem ou simplesmente clicar e estender até aqui para alterar o layout da ordem. Se você quiser, você pode fazer isso para todas essas imagens que você pode ver simplesmente clicar e estender entidades basicamente como esses quadros de humor funcionam. Agora porque eu tenho meu esquema de cores para este projeto e eu vou mostrar que em um segundo uma vez que começamos com o design, eu não vou usar nenhuma dessas cores particularmente, mas você pode imaginar que você pode usar imagens concorrentes para provar algumas cores. Você pode usar trabalhos anteriores do seu cliente para provar algumas cores e, em seguida, você pode usar essas cores em seu design. Obviamente, você viu que este logotipo é branco e eles estão usando a versão branca e escura deste logotipo. Mas basicamente não tem nenhuma cor por dentro. Mas se o logotipo do seu cliente tem cor, obviamente você vai acabar usando essa cor. Simplesmente experimente desta forma. E mais uma vez, se você quiser, você pode obter esses produtos em nosso site. E eu vou deixar os links e descontar o PDF de todos esses que eu mostrei a vocês. Mas se você não quiser simplesmente pular dentro do Adobe XD, crie um desses. Você não tem que usar 1080. Por 1080, como eu fiz. Você pode usar 1920 por 1080, você pode usar ainda menor. Você pode incluir maior quantidade de imagens, mais imagens, menos imagens, fazer o que quiser com isso. Isto é só para a tua inspiração. E obviamente você pode compartilhar isso com seu cliente que pode saltar para dentro daqui e exportar este, por exemplo, e depois compartilhar isso com seu cliente e eles podem ver e aprovar ou desaprovar suas escolhas de cores. Então, basicamente, estes são os moodboards e como eles funcionam. Você pode brincar com eles. Você pode incluir todos os tipos de imagens diferentes dentro. Você pode incluir logotipos diferentes. Você pode incluir, por exemplo, cartões de visita dependendo do que você está fazendo, você pode incluir todos os tipos de imagens diferentes. Você pode até incluir gradientes. Você pode fazer o que quiser com isso. Como eu disse, estas são para te deixar no clima. Estes são para que você entenda com o que você está trabalhando e para quem você está trabalhando e, portanto, siga em frente com seu projeto com muito mais facilidade. No próximo vídeo, vou mostrar-lhe como configurar este arquivo porque já começamos com este quadro de humor. Vou arrastar e soltar nosso resumo de design lá dentro. E eu vou mostrar a vocês como vamos construir esse arquivo mais tarde e o que vamos fazer a seguir. Então, vemo-nos lá. 5. Configuração do projeto: Muito bem, vamos agora preparar o nosso ficheiro. E este vídeo vai ser bastante simples e curto ou apenas queria correr rapidamente através de como eu costumo configurar meus arquivos. Você pode usar a mesma configuração, mas não precisa. Você pode usar sua própria configuração se quiser. Só quero mostrar o que estou usando. Então aqui temos nosso resumo de design e como eu disse, você vai conseguir isso simplesmente. Eles vão estar localizados dentro do arquivo zip, descompactar esse arquivo e usá-los para seus próprios projetos pessoais ou comerciais. Basicamente, eu vou selecioná-los, apertar Controle ou Comando C. E eu vou fechar este arquivo, e aqui está o nosso moodboard. Vou simplesmente ao Controle V aqui. E o que eu vou realmente fazer é movê-las aqui deste lado. E, por exemplo, posicioná-los para estar em algum lugar por volta de 100. Eu acho que é bom, e mover este fim para 100. Então, basicamente, o que temos aqui são breves fundamentos, são breve e conselho humor. E basicamente vamos construir este arquivo a partir daqui. O Adobe XD por padrão posiciona-o no centro, mas eu geralmente gosto de mover isso um pouco mais para me dar um pouco mais de espaço vertical ou em algum lugar por aqui. Agora o que você pode fazer é, por exemplo, li seus wireframes de papel aqui e você pode mover para aqui para seus wireframes do Adobe XD, em seguida, projetar bem aqui, den Export, prototipagem, o que você está fazendo em seguida, talvez até mesmo design do aplicativo, então você pode mover para baixo e para baixo. Mas o que eu realmente gosto de fazer é simplesmente mover esses arquivos para o canto superior esquerdo do arquivo. Então, portanto, uh, ter muito maior imobiliário tela realista bem aqui. E o que eu também gosto de fazer é salvar o arquivo localmente, bem como o documento Cloud. Então, o que isso me permite se, por algum motivo, o Adobe XD trava e o documento Cloud é salvo, mas meu documento local não está com as últimas alterações. Portanto, eu posso simplesmente puxar o documento da nuvem mais tarde, salvá-lo na minha área de trabalho. Por exemplo, se eu precisar editar este arquivo mais tarde sem conexão com a Internet enquanto estou em movimento na minha cafeteria local onde quer que seja. Portanto, eu realmente gosto de ter essas duas opções. Então, tanto o documento Cloud quanto o meu documento local, e é basicamente isso para este vídeo, eu vou bater Control S. E na próxima parte vamos nos concentrar em wireframes de papel. Vou te mostrar por que eles são importantes. Nós vamos desenhar wireframes em um pedaço de papel. E mais tarde vamos voltar para este arquivo. Nós vamos trazer esses wireframes de papel no Adobe XD apenas para nossa referência. E então vamos passar mais tarde para alguns wireframes reais no Adobe XD, que então vamos transformar em designs, que finalmente vamos animar. Então, vemo-nos lá. 6. Arame papel 1: Tudo bem, então agora vamos começar a criar wireframes de papel. E vamos começar com a própria estrutura. Mas antes disso, eu só queria ver rapidamente o que você precisa para esse processo. Basicamente, você precisa de qualquer tipo de papel. Você tem linha do Reno em torno de sua casa ou seu escritório, e você precisa de qualquer tipo de caneta ou lápis. Você pode até usar marcadores coloridos. Você pode usar governantes, mas eu gosto de fazer as coisas à mão livre só porque torna muito mais rápido para mim colocar as idéias em um pedaço de papel. Porque este processo é apenas um processo inicial. Mais tarde, vamos trazer isso para o Adobe XD e elaborar sobre os próprios elementos sob design, posição, dimensionamento e muito mais. Então esta é apenas a primeira parte deste processo, é colocar suas idéias para baixo em um pedaço de papel apenas para que você possa colocá-los em um pedaço de papel e, em seguida, você pode começar mais tarde. Inner, haverá extremo ou sua outra ferramenta favorita de escolha e começar a criar peso morto. Então a primeira coisa que vamos criar neste processo é a estrutura da nossa página assim. Então eu vou realmente começar com a navegação em si. Então eu vou fazer rapidamente algo assim. Então você pode imaginar que este é o esboço do próprio site. Então vamos começar com o logotipo aqui. Então vamos escrever em destinos. E os usuários podem realmente clicar nesses destinos em indicar para levá-los a qualquer um desses destinos e dívidas que eles têm em oferta. Em seguida, vamos escrever no inverno para passeios de inverno. Então vamos ter bem-estar para portas de bem-estar, individuais. E esta é a página onde os usuários podem reservar viagens individuais. Eles podem escolher o que quiserem. Então eles podem escolher entre bilhetes de avião para alojamento, comida, para todas essas coisas que eles vão ver lá. Então atividades e excursões e muito mais dentro desta praia individual. Vamos ter cruzeiros. E você pode ver que eu estou sem espaço. E finalmente vamos ter sobre nós. Então esta página vai realmente correr aqui, então não deixe essa linha distrair você. E finalmente, nós vamos escrever em bilhetes de avião aqui. Como assim. Então vamos ter um boletim informativo. E nós também vamos ter números de telefone, então 123. E também podemos ter esses ícones aqui. Então, por exemplo, eu posso ter um ícone de avião aqui. Posso ter um ícone de boletim de e-mail aqui. E também eu posso ter um ícone de telefone aqui apenas para que quando reduzirmos isso mais tarde, possamos realmente ter isso aqui. Vamos ver. Temos o ícone e o texto em uma tela grande, e temos apenas o ícone em si nas telas menores, especialmente para este número de telefone. Assim, os usuários podem realmente tocar lá e ele poderia levá-los para essa tela específica. Então é isso para este primeiro vídeo. No próximo vídeo, vamos começar com a própria página inicial. Então vamos seguir em frente, basta usar algo assim. Então talvez possamos criar algo assim para a navegação. E você sempre pode voltar. E eu realmente encorajo você a, para todos os projetos que você faz para quebrar isso apenas para que você saiba sua navegação realmente se parece para que você sempre possa voltar para ele e ver para quais páginas você está projetando. 7. Wireframes 2: Tudo bem, então agora que a navegação em si está terminada, vamos agora passar para esta parte, que na verdade vai ser a nossa página inicial. E como a página inicial vai ser extremamente longa, eu vou criar, por exemplo, duas caixas como esta. Então, mais uma vez, se você quiser, você pode usar a régua, mas eu realmente não gosto de usar as réguas porque eu acho que elas diminuem. Então eu posso apenas criar um esboço como este. Então, o que podemos começar com é o que criamos anteriormente. Então este vai ser o nosso logotipo. Esta vai ser a nossa navegação. E também temos estes aqui no topo. Então a primeira coisa que vamos criar é a seção de heróis como esta. E talvez possamos criar setas para ir para a esquerda e para a direita. O que discutimos nos exemplos que mostrei a vocês. E talvez possamos criar texto aqui. E digamos que talvez este seja o local de Pequim. E talvez possamos colocar no botão que diz “explorar agora”. Como assim. E eles podem tocar neste botão para ir para a página de Pequim dentro do destino. Então você já pode começar a ver como tudo isso vai se amarrar um com o outro. O que podemos criar aqui, e esta pode ser a parte da imagem de herói, ou pode descer abaixo da imagem de herói em si, dependendo do tamanho para o qual você está criando é nós podemos criar esses seletores. Então vamos ver, talvez possamos dividir isso em cinco partes. Então 1234, e este vai ser o quinto. E esta primeira parte pode ser, por exemplo, destinos. E vamos criar um ícone como esse. Então, o próximo destino é o tipo de viagem. Então talvez possamos criar um ícone perna faz assim viagem. Em seguida, podemos ter atividades. Então, talvez ícone de uma pessoa caminhando para VTS. E, finalmente, podemos procurar. E uma vez que eles tocam na pesquisa, esta barra de pesquisa, Kim, por exemplo, estende até aqui para que possa cobrir todos esses campos adicionais. E finalmente, podemos ter um botão para Aplicar. E ele pode aplicar todos esses filtros para aqui. Então deixe-me aproximar rapidamente apenas um pouco você possa ver melhor o que eu estou fazendo aqui. Então você pode ver que temos tudo isso aqui. Em seguida, o que podemos fazer é, por exemplo, criar algum tipo de seções diferentes. Então talvez possamos criar uma seção chamada ofertas especiais aqui. Então ofertas especiais, como todos esses outros sites têm. E aqui podemos ter, por exemplo, os primeiros minutos. E aqui podemos ter um último minuto assim. E para ambos, podemos ter esses cartões diferentes. Então vamos criar um cartão e um cartão aqui também. Claro, podemos ter o ícone aqui, por exemplo, das horas, e podemos ter uma cena um aqui. E o que podemos criar nessas ofertas é que podemos, por exemplo, incluir uma imagem aqui. Então vamos arrastá-lo para fora assim. E você pode usar marcadores diferentes se quiser, apenas para indicar que esta é a sua imagem. Em seguida, o que podemos criar aqui é. Estrelas. E podemos criar, por exemplo, de um a cinco ou qualquer outra coisa. E com essas estrelas, o que você pode fazer é você pode apresentar a localização em si ou você pode apresentar os próprios hotéis. Então, dependendo do que você está mostrando aqui. Então, se você está mais abaixo de nossas estrelas, o que podemos criar é algum tipo de descrição. Então vamos usar, por exemplo, Paris aqui e por aqui. E podemos criar uma descrição adicional aqui. O que também podemos incluir são, por exemplo, sete dias ou 14 dias. E talvez possamos incluir alguns ícones diferentes aqui. Então eu vejo, e apenas para indicar que, por exemplo, você pode viajar para o destino deles usando o avião, usando o vagão de trem ou ônibus ou algo assim. E finalmente, podemos criar um preço aqui. Então vamos ver 1250 e digamos 930. E finalmente, podemos criar um ícone aqui à direita. E talvez com estes possamos criar separadores diferentes como este. Então podemos incluir diferentes linhas divisórias ou algo assim. Só para terminar, essas seções são um pouco mais. E aqui como eu disse, podemos incluir apenas um ícone de seta, que podemos acionar ao passar o mouse. Uma vez que eles pairam, eles podem tocar lá e eles podem ir para aquele destino específico. E podemos, por exemplo, fazer essas seções vezes quatro, então quatro no total, por exemplo, apenas para economizar um pouco de espaço para desenhar. E podemos, por exemplo, usar dois botões. Então C Todos e ver tudo. Por exemplo, veja seu sobrenome e veja tudo para nós. Ofertas de primeiro minuto, não FirstName. Primeiro minuto e último minuto, vejo todos os primeiros minutos, vejo todos vocês no último minuto. Então podemos fazer algo assim. O que podemos fazer abaixo é incluir outra seção. Então você pode ver o que eu estou fazendo aqui. Eu estou simplesmente dividindo esta página em diferentes seções apenas para manter os interesses do visitante alto, tanto quanto possível. Então o que podemos fazer aqui é incluir nosso botão play para indicar que este é o vídeo. Para que possamos posicioná-lo assim. E nós podemos, por exemplo, usar a função de reprodução automática como eu mostrei em um dos exemplos, ou podemos mostrá-los ícone de exibição e deixá-los reproduzir este vídeo em si. Então vamos seguir em frente. E, por exemplo, para a próxima seção, podemos usar destinos diferentes. Então vamos usar destinos europeus assim. E nós podemos, por exemplo, incluir uma descrição separada aqui. E podemos usar vezes 4, 4 continentes. Assim, podemos usar destinos europeus, asiáticos, africanos e americanos. E dentro dos destinos americanos, podemos, por exemplo, incluir a América do Norte e do Sul. E então talvez possamos dividi-los um pouco melhor, apenas para que possamos dar aos nossos usuários a escolha. Para que eles possam escolher imediatamente, onde querem viajar e trabalhar para que destino? E dentro destes, podemos, por exemplo, incluir quatro cartões diferentes como este. Portanto, estas cartas são talvez as mesmas que estas, apenas uma girada verticalmente. Então é aqui que podemos usar o Adobe XD, essas funções avançadas como pilhas, por exemplo, e redimensionar responsivo também. Então o que vamos fazer aqui é incluir imagens como esta. Vamos incluir a classificação aqui. Então eu vou apenas usar uma estrela porque basicamente nós vamos usar exatamente o mesmo layout é este. Então vamos usar Paris, Roma, Londres e Berlim, por exemplo. Vamos usar a descrição desse local. Então, como eu disse, exatamente o mesmo layout que este. Serão sete dias com os ícones. Ícones de sete dias aqui. Eu fiz. E vamos incluir o preço. Então vamos usar 100 River só para nos poupar um pouco mais de tempo. Eu fiz, e vamos usar o ícone de seta ao pairar. Portanto, este ícone não será visível a menos que o cursor do mouse. Então, ele só vai mostrar quando a data realmente paira. Abaixo disso. O que vamos criar nossas flechas, elas podem ir para a esquerda e para a direita se quiserem. E, finalmente, podemos incluir um botão como este para ver ou para que eles possam ver todos os destinos, quer europeus, asiáticos , africanos ou americanos. Assim, como eu disse, podemos, por exemplo, incluir o europeu abaixo que podemos incluir destinos africanos. E então podemos quebrar essas seções, incluindo algo como uma imagem. Então vamos incluir, por exemplo, imagem posicionada à direita como esta. Talvez possamos até apimentar adicionando uma cor de fundo como esta. E podemos até apontar e dizer cor como o papai, só para sabermos o que é. Ou se você estiver compartilhando isso com seus clientes ou colegas de equipe. Então Daikin sabe o que é. Para que possamos colocá-lo aqui. E, por exemplo, podemos escrever algo como livro, sua viagem de sonho conosco. Tributado bem aqui. E finalmente botão, que diz obter uma cotação gratuita. Então, citações gratuitas como essa. E eles podem obter uma cotação gratuita para qualquer tipo de viagens individuais, se você lembrar bem aqui no topo do vídeo anterior. Assim, eles podem obter uma cotação gratuita para essa viagem específica do que eles escolherem. Em seguida, podemos incluir, por exemplo, tropas asiáticas e americanas abaixo. Então o que podemos incluir é uma seção completamente diferente que diz, por exemplo, nossos principais destinos. Podemos incluir setas para a esquerda e para a direita aqui. Podemos incluir nossa breve descrição aqui. E finalmente, podemos incluir, por exemplo, três cartas, desta vez. Então podemos ir com o layout assim e você pode ver o que estou fazendo. Estou simplesmente quebrando o layout. Então, não estamos usando como esses sites que eu mostrei a vocês. Não estamos usando exatamente o mesmo layout para todas as seções em nossa página, estamos usando layouts diferentes. Então aqui estamos usando cartões posicionados como este. Aqui estamos usando cartões posicionados como este. Então estamos quebrando essas seções. E aqui estamos usando três cartões diferentes, exatamente o mesmo layout, mas apenas posicionados de forma diferente. Então o que eu vou fazer aqui é estender estes para baixo um pouco. Então, por exemplo, minhas folhas, isso pode ser, digamos Toscana. E isso pode ser Aaron ou Paris de novo, só para que possamos ter algo. Podemos incluir texto e dizer algo como a partir e preço aqui. Então 998, então preço 1, 0, 0, 0, 0 e preço 700. Só para que possamos dizer a partir de indicar que eles podem mudar o que diz aqui nesta página. Então o que podemos fazer a seguir é eu simplesmente vou passar para esta parte vazia da página porque, como eu disse, esta é realmente uma página mais longa. Então o que eu vou fazer aqui é fazer exatamente a mesma coisa. Então, estendido todo o caminho até aqui. Estou simplesmente estendido todo o caminho até aqui. E digamos que os viajantes nos amam. Texto aqui e aqui, podemos incluir depoimentos. Então talvez possamos incluir uma imagem aqui. Vamos ver, nome. Alguns testemunhos e viajou para Paris. O que é importante porque agora você está aumentando as chances de vender esse destino. Então, por exemplo, se algum destino é realmente quente e as pessoas realmente querem ir até ele, então talvez compartilhá-lo bem aqui dentro do depoimento com pessoas reais que realmente viajaram para lá já vai mostrar e dar um pouco mais interesse para esse destino. Então vamos com 0, um de quatro. E podemos usar flechas aqui, então esquerda e direita. E com essas setas, podemos criá-las como componentes no XD, e então podemos usá-las em todo o nosso design. Então o que podemos fazer a seguir é talvez quebrar o layout mais uma vez. Então vamos ver que eu posso incluir três cartas como esta. E isso pode ser assim, tão menstruada estilo Mansuri. Então, por exemplo, bem-estar. E digamos de e o preço 998. E isso pode ser uma imagem em segundo plano. Então eu estou certo que a largura da imagem, por exemplo, a sobreposição de cores, ou oito ou algo parecido. Podemos dizer cruzeiros aqui e esquiar aqui. Para os viajantes de inverno. E, por exemplo, de 908 e de 998. Então exatamente a mesma coisa. Estas são imagens com a sobreposição de cores. Então você pode ver aqui, eu estou simplesmente quebrando o layout e fazendo essa página parecer. Um pouco mais interessante para os telespectadores. Por exemplo, podemos escrever parceiros como esses sites têm descrição e, por exemplo, um logotipo bem aqui. Então estes são logotipos que eu devo. E talvez possamos usar exatamente o mesmo layout que fizemos aqui, mas simplesmente alterá-lo. Então imagem, cor. E então aqui, por exemplo, escrevendo, há viagem perfeita para todos. Um pouco de texto e chamada à ação, que diz obter uma cotação gratuita. Então podemos usar o Adobe XD e pilhas, e podemos, por exemplo, criar esse layout e simplesmente copiá-lo e colá-lo para aqui, para esta seção e simplesmente mudar a ordem desses elementos dentro. Então, o que podemos fazer a seguir é dar aos usuários e taxa de câmbio, por exemplo, porque isso é realmente útil, especialmente se você estiver viajando para outras partes do mundo e você não estiver usando sua moeda. Então, a taxa de câmbio, digamos assim. Então três ou quatro nós vamos ver mais tarde dentro ou programas de design estrangeiros, nós podemos nos incluir o euro, e por exemplo, britânico obrigado. Então vamos ver o que é aqui mesmo. Então, USD e quanto é a palavra em sua própria moeda? Então vamos para a próxima seção, que pode ser, por exemplo, Q e a. Então eu posso criar outra seção aqui. Então prepare-se para a viagem dos seus sonhos. E um pouco de texto aqui e fundo com contato conosco. Eu fiz. E aqui o que você vai fazer é criar uma pergunta que vamos usar um ícone de mais e vamos criar uma resposta como essa. E com estes, podemos destruí-los. Então q mais divisor, q mais e o mais amplo. Então aqui, o que eles podem fazer é realmente tocar neste ícone de adição. Vai abrir esta secção. Então ele vai passar de mais para menos ou dois atos. Talvez possamos girá-lo e depois que eles tocarem lá, ele vai fechar e eles podem abrir uma dessas perguntas adicionais e eles podem aprender mais sobre o tópico. Ou, alternativamente, eles podem simplesmente clicar no botão Fale Conosco aqui e entrar em contato. E talvez possamos escrever, manter-nos informados. Um pouco de texto aqui. E podemos criar um formulário de aceitação por e-mail aqui mesmo. Então e-mail e um botão que diz subscrever. E não queremos que seja muito proeminente, mas ainda queremos que os usuários venham aqui e se inscrevam. Finalmente, o que resta é o rodapé em si. Então talvez possamos incluir um logotipo aqui. Podemos incluir itens nav. Então eu vou me ver um pouco de tempo para escrevê-los na verdade. Destinos, bem-estar no inverno, cruzeiros individuais sobre nós aqui, espalhem pela página. Talvez possamos incluir uma divisória. Divisor tão agradável e simples como este. E podemos, por exemplo, incluir ícones de mídia social. Então, Facebook, Instagram e YouTube, por exemplo, ou LinkedIn ou o que quer que a agência realmente tenha. Podemos incluir os direitos autorais originais aqui e aqui podemos escrever em termos, por exemplo. Então rebanho leiteiro, este é o nosso olhar para a nossa página inicial. Como você pode ver, vai ser muito longo, mas vai mostrar todos os elementos cruciais dentro dele. Então aqui temos essas seções que vamos copiar, vamos reorganizar. Você vai reposicionar um pouco. Talvez possamos criar um componente padrão e, em seguida, realocá-lo e reposicioná-lo de diferentes maneiras que podemos criar componentes filho adicionais a partir desse componente principal. Por isso, pode ser muito útil para nós em todo o nosso design. Podemos simplesmente copiar e colar e talvez possamos criar elemento adicional para ele. Então, lá temos. No próximo vídeo, vamos realmente ver o que acontece quando os usuários clicam em um desses destinos. Então eu vou mostrar a vocês como você pode criar isso seguindo exatamente a mesma estratégia. 8. Wireframes 3: Agora vamos em frente e criar uma praia de destino. E você pode até escrever aqui, então esta nação, direito isso. E vamos criar um esboço rápido como fizemos com a página inicial. Que NÃO é como deixar esta parte em branco porque eu sempre tenho algo para me lembrar. Então, ou teve que compartilhar algo com outros designers da equipe ou com meus clientes ou com os desenvolvedores. Então, é sempre útil ter algo aqui ou até mesmo você mesmo se você estiver criando esses wireframes e, em seguida, voltando para eles em alguns meses ou algo assim. Então o que vamos fazer primeiro é exatamente o mesmo que fizemos com exemplos anteriores. Então esta vai ser a nossa navegação. Talvez possamos incluir uma seção de heróis e digamos que os usuários pisaram em uma oferta de Paris na página anterior, que foi a página inicial. Então podemos escrever em algo como CT do amor, Paris com esta grande fonte agradável e talvez um botão que diz explorar agora. E talvez quando o toque neste botão Explorar Agora, ele pode então levá-los para a próxima parte da página, que neste caso seria uma parte informativa para este local específico. Para que possamos escrever algo como visitar Paris. Podemos incluir uma descrição aqui. Então sobre e, em seguida, texto sobre isso, atividades. E então podemos, por exemplo, incluir ícones diferentes aqui. Então ícones. E esses ícones podem ser algo como visitar museus ou porque é um Paris talvez River Cruises, andar de bicicleta, comer lugares de Deus para ver algo assim. Então, abaixo disso, vamos ter as melhores ofertas de Paris, que se destacam de todas essas outras ofertas, seja em termos de preço ou em termos de popularidade ou qualquer outra coisa. E aqui podemos incluir todos esses filtros diferentes que os usuários podem escolher. Então podemos ter cinco deles, por exemplo, e talvez um botão aqui no final. Então vamos com seis. Então 1, 2, 3, 4, 5 e depois 6. Isso pode ser aplicado. E vamos ver, talvez possamos trocá-los por preço, duração. Então vamos usar um ícone de calendário aqui. Atividades. Então, mais uma vez, nesta pessoa andando ou algo assim, excursões. Então vamos com um ícone de sinal. Então esquerda e direita, por exemplo, em algum momento eu fiz. E finalmente uma classificação. E então eu posso até escrever algo assim. Então classificar excursões, atividades. E esta é a duração. E este é o preço. Então o que nós vamos ter então nossos hotéis que correspondem bem com esses filtros que você escolheu aqui. Então podemos ter exatamente o mesmo layout, mas um pouco mais elaborado, porque aqui temos informações adicionais, inclusive dentro. Então o que eu posso fazer é criar um cartão como este, que abrange toda a largura do nosso site porque temos muito espaço aqui. Então o que podemos incluir uma imagem aqui. Então podemos incluir uma classificação aqui no topo. E podemos dizer o nome do hotel. Podemos incluir endereço aqui. Assim. Talvez possamos incluir um site em algum lugar por aqui. Então vamos ver que uma vez que começamos a projetar, esta pode ser a descrição e depois 14 dias. E estes podem ser os ícones. Então eu vejo n e esses ícones podem ser os mesmos que na página inicial. Então, por exemplo, como você pode chegar a este hotel? Você pode voar, varchar, ir de trem ou de carro ou algo assim. E então vamos incluir um preço. Então 1290, por exemplo, de e aqui vamos ter esse mesmo efeito de horror com a mesma flecha. Então é por isso que estou dizendo que você pode criar um cartão e depois elaborar mais a partir daí. Então podemos escrever algo como tipo 4 ou algo assim. E podemos ter, por exemplo, botão Load More abaixo dele ou algo assim. Então podemos realmente usar seções da página inicial. Então eu vou realmente usar isso. Então há uma viagem perfeita para qualquer um. Mais livre de impostos. Citação. Então vamos ter uma saudação de troca. O meu pai. E lembre-se, eu simplesmente incluí três caixas diferentes indicando o euro USD e, por exemplo, libra esterlina. E eles podem ir para a esquerda e para a direita e rolar e ver todas essas moedas. E então podemos ter Q e uma seção aqui. Então Q e a para acelerar um pouco as coisas, eu não vou desenhá-lo porque vai ser exatamente o mesmo que na página inicial. Então aqui podemos ficar no loop e podemos ter esses dois campos. Então assine o e-mail. Finalmente, bem aqui no fundo, em vez de desenhar tudo, vamos ter o rodapé. Então, lá temos. Fomos em frente e preparamos esta página. Então, como você pode ver, é bem simples, é bem fácil. Em seguida, nós estamos realmente indo para criar uma página que nos leva quando eles clicam em uma dessas ofertas. Vai levá-los para a página dedicada do hotel. E nessa página eles podem explorar recursos adicionais como, por exemplo, o que o hotel tem para oferecer, o que os quartos têm para oferecer? Que comodidades estão incluídas dentro dos quartos como Wi-Fi, ar condicionado, mini-frigorífico, e muito mais detalhes. Então vamos brincar com isso no próximo vídeo. 9. Wireframes 4: Tudo bem, então a próxima página, como eu disse, vai ser uma oferta selecionada. Então vamos escrever aqui. Então, oferta selecionada. E eu vou criar um esboço. Então, o mesmo que eu fiz anteriormente. Mas nós vamos fazer algo semelhante à página inicial porque nós vamos ter um monte dessas seções adicionais aqui na página. Primeiro, vamos mostrar aos nossos usuários imagens deste hotel. Então isso pode ser um quarto de hotel ou como o hotel em si se parece. Então vamos começar com o nosso logotipo e navegação. Assim, o mesmo como recriado para todas essas páginas adicionais. E vamos criar algo como 1234 ou cinco imagens diferentes. E isso podemos incluir aqui. E podemos incluir, por exemplo, setas para a esquerda e para a direita para que os usuários possam rolar para a esquerda e para a direita através dessas imagens. E como eu disse, isso pode ser fora de um quarto de hotel ou do próprio hotel. Então vamos começar com a informação do hotel. Então vamos começar com uma classificação. Digamos que este é um hotel cinco estrelas. Nome do hotel. Por exemplo, podemos incluir um site aqui. E podemos incluir, por exemplo, uma descrição deste hotel. Então, quando foi construído? Quanto tempo leva para chegar lá e coisas assim? Então, movendo-se para baixo, vamos incluir características do hotel como essa. E vamos dividir esta seção em duas seções. Porque aqui mesmo deste lado, vamos ter uma seção pegajosa, que significa que esta seção, que vai ser mais ou menos este GRANDE, não vai se mover. E dentro da seção de morte, vamos usar o que todos esses outros sites realmente usaram. Então vamos usar informações como check-in, check-out, tipo de quarto, quantos adultos, quantas crianças e coisas assim. Então vamos em frente e criar isso imediatamente para não nos distraia de todos esses outros serviços. Então, check-in, check-out. Vamos ter um tipo de quarto. E, por exemplo, podemos adicionar um ícone de adição para que eles possam escolher adicional aqui. Então eles podem ir com um quarto, túmulos, três quartos, coisas assim. Então vamos ter algo como adultos. E eles podem escolher 12 ou três crianças. Mesmas coisas. Então, não digita o nome. Então vamos ter serviço. Então, digamos que tudo incluído. Excursões. E tudo isso pode ser descartado, por exemplo. Então não digam crianças, adultos. Por isso, estas entregas vão permitir-nos ter mais informações incluídas. Assim, em excursões, podemos escrever em museus, por exemplo. E finalmente, podemos ter total. Então 1290, por exemplo. E vamos ter um grande livro de cantar agora. E razão. E isso vai ser assim, é, por exemplo, este pode ser um menu pegajoso como eu disse. Então, esta seção pode ser rolável seção. E uma vez que eles realmente começam a rolar nesta seção, eles podem ver todas essas informações diferentes incluídas dentro. Mas esta seção, que vai ser seção pegajosa, vai manter-se com eles, não importa onde eles rolam para esta página. Então, como eu disse, recursos do hotel, podemos incluir ícones diferentes. Em seguida, podemos incluir um tipo de quarto. E, por exemplo, podemos ter dois ou três quartos diferentes, então eu não tenho um. Eu quero adicionar no três. E estas podem ser imagens destas salas abaixo do dat. Podemos ter algo como comodidades. Como eu disse. Assim, podemos incluir ícones diferentes. Então, por exemplo, para ar condicionado, para um mini-frigorífico, para um bar, Wi-Fi, coisas assim. Assim, podemos ter abaixo serviços disponíveis, por exemplo, serviços. E dentro do DAT podemos incluir, por exemplo, pão e manteiga, cama e café da manhã. Então eu posso e B, e B ou, e depois descrição. E aqui podemos ter algo como tudo incluído e descrição. E você pode ver quando você começar a somar toda essa informação vai ser muito longo. Assim por diante. Portanto, é realmente útil ter essa parte adesiva de sua página. Por exemplo, Dan, abaixo que podemos incluir algo como plano de viagem. E vamos ver d um e, em seguida, descrição, os dois e, em seguida, descrição e movendo-se ao longo. Quantos dias você realmente tem uma tira? Então podemos cair abaixo das excursões disponíveis. E podemos ter ícones diferentes para excursões diferentes que estão realmente disponíveis. Então eu posso, por exemplo, e dividir nesta página assim. Só para que saibamos que esta é realmente a área rolável e esta é a área fixa. Então podemos ter algo como, não sei, talvez sobre hotel ou algo assim. Então vamos falar sobre a localização. E, por exemplo, podemos incluir um mapa desse local e, em seguida, descrição aqui abaixo. Então, podemos dizer algo como preço inclui e nós vamos realmente colocar isso aqui para que eu não tenho que escrever seção adicional. Então o preço inclui, e vamos trazer isso assim. Então, a flecha bem aqui. Então o preço inclui. E então podemos colocar texto adicional sobre o que está incluído dentro do preço. E, por exemplo, podemos escrever em algo como algodão próprios termos de serviços ou em algum momento que me são prometidos. Dentro dessa agência pode ver o que está incluído, o que não está, e por exemplo, o que não está incluído. E então eles podem escrever em dívida lá também. Basicamente, além deste, eles rolam para baixo, vai ser exatamente o mesmo. Então vamos passar para esta seção na praia. E vamos realmente escrever algo aqui. Então, quando a rolagem para baixo passado esta parte da página e passar nesta, na verdade, o que vai cumprimentá-los é exatamente a mesma configuração que na página anterior. Então o que vamos ter uma imagem com uma cor, viagem perfeita com a escrita. Citação. Então vamos trocar notas com esses três. E você pode ver bem aqui porque eu estou usando caneta e papel porque você pode ver claramente como isso é rápido. E não há nenhuma maneira que você pode fazer isso mais rápido em qualquer tipo de software em vez de apenas escrever em um pedaço de papel. É por isso que adoro pessoas que estão a incriminar tanto. Aqui vamos ter Q e A. Então exatamente a mesma seção de qualquer outra praia. Fique no circuito. E como de costume, nós vamos ter e-mail com um ícone de e-mail e botão de assinatura aqui mesmo. E, finalmente, vamos ter termo completo. Então manada leiteira, isso é RPG. Então, uma vez que eles clicam no destino foi a escolha qual destino eles realmente querem, então eles podem ir para esta página que vai dar-lhes todas as informações adicionais sobre o hotel que eles precisam saber sobre? E daqui, a partir desta seção pegajosa que tem livro agora, eles podem clicar no livro agora em, que vai nos levar para o próximo ritual de contas indo para projetar e criar, que é a página de pagamento. E dentro dessa página nós vamos realmente quebrar para três páginas diferentes. Portanto, será muito mais simples para nossos usuários e muito mais rápido para eles verificarem, pagarem e seguirem o caminho separado. 10. Wireframes 5: Então, como eu disse, a próxima página e pH final para nós é a página de pagamento. Então vamos criá-lo muito rapidamente. Então vamos avançar e criar este esboço. Mas em vez de criar este esboço como um todo, como eu disse, deixe-me escrever rapidamente o pagamento porque a navegação para ele vai permanecer o mesmo. E isso. Então parece que a criámos. E aqui o que vamos criar é, por exemplo, detalhes da viagem. O meu pai. E queremos criar um fundo totalmente branco porque não queremos que nossos usuários se distraiam e deixem esta página porque realmente queremos que eles concluam seu pedido. Então é por isso que vamos fazer algo assim. Pagamento. E finalmente, confirmação. E este é um selecionado e estes dois estão acinzentados ou este é mais escuro. E assim eles podem realmente vê-lo muito bem e estes podem ser ótimos fora. Então, dentro dos detalhes da viagem, o que podemos criar é algum tipo de cartão como fizemos anteriormente. Então imagem, então podemos incluir um hotel de classificação. E então podemos incluir, por exemplo. Então, a mesma informação que fizemos naquele cartão. Então este pode ser um destino ou endereço. E aqui temos todas as informações que os usuários escolheram. Assim, por exemplo, as pessoas também. E por exemplo, mais um, que é para a criança em casa tipo, que é, por exemplo, o quarto número um e ir com esse tipo de serviço número um ou inclusivo. E finalmente, excursões? Sim. E eles podem concordar com a agência sobre essas excursões. Talvez possamos ter uma divisória aqui e digamos 14 dias. Os mesmos ícones como nós tínhamos, e um total de 1280, por exemplo. E esse é basicamente o nosso primeiro passo. Vamos ter o próximo passo, que é o pagamento. E é isso que vamos criar agora. Então é por isso que eu disse, imagine isso como uma seção. Então, vamos movê-lo por aqui. Então eu vou ter a mesma coisa. Então viagem e detalhes, confirmação de pagamento. E agora o pagamento vai realmente ser selecionado e estes dois vão estar em cinza para fora. Então, vai ser bastante simples para os usuários navegarem porque eles basicamente têm apenas uma seção e vamos animá-la mais tarde no XD. Para mudar entre estas três seções diferentes. Assim, para o pagamento em si, podemos ter, por exemplo, nome do titular do cartão, nome do titular do cartão, e podemos ter campo aqui. Então, nome. Então podemos ter o número do cartão. E podemos ter um número aqui. Então 1, 2, 3, 4, 5, 6, 7, e assim por diante. Teremos datas de validade. Então, quando o carrinho expira? E 12 a 24, por exemplo. E, finalmente, CVC, que é o número na parte de trás do seu cartão, então 123 e ou largura B, PayPal, por exemplo, ou qualquer outra opção que a agência vai suportar. Vamos ter o botão P Agora aqui, que vai levá-los para a página de confirmação, obviamente. Então agora vamos em frente e anote isso mais uma vez. Então, detalhes da tropa, pagamento e finalmente confirmação. E para a confirmação, vamos selecioná-lo. E aqui podemos ter um AACN, que é um diminutivo de Icon. Sua viagem foi reservada. Dat principal. E aqui podemos ter duas linhas de texto, por exemplo. E então podemos ter dois botões diferentes como esse. Então, de volta para casa, por exemplo, com o ícone home aqui, podemos ter um ícone PDF, por exemplo, o recibo de download. Porque, por exemplo, talvez devesses mostrar este recibo na tua agência ou no aeroporto ou coisas assim. Ou talvez quando chegar ao seu destino no hotel. Talvez precisem que lhes mostre lá. Então é por isso que o download recebido é realmente útil. E você também pode imprimi-lo como um PDF, por exemplo, ou coisas assim. Então você pode trazê-lo junto com você em sua viagem. Abaixo de toda essa informação, como eu disse, imagine isso como uma única seção. Então, abaixo desta única seção com três áreas diferentes dentro dela, vamos ter coisas normais como fizemos nas páginas anteriores. Então vamos ter uma imagem com a cor e a viagem perfeita, certo? O texto. Citação. Vamos ter taxa de câmbio. E nós vamos ter esses três. Vamos ter Q e um subscrever minhas anotações. Então mesma seção, assim serve caixa de e-mail web e, finalmente, rodapé, bem aqui na parte inferior. Então aqui temos, e esses são os nossos wireframes. E se eu me esticar e alcançar meus outros wireframes e dívidas que criamos durante esses poucos vídeos. Então aqui nós selecionamos ofertas. Aqui temos um destino. Aqui temos nossa grande página inicial, e aqui temos essas páginas que criamos. Então, no geral, você pode ver quão rápido este processo é, quão rápido ele é. Você não precisa de nenhum equipamento chique. Você não precisa de nenhuma espessura extravagante e classificação de papel. Você não precisa de réguas, você não precisa de nenhum tipo de marcadores, canetas especiais, lápis e tudo mais. Você só precisa do papel normal, velho e simples. Você precisa de um lápis ou caneta, o que você escolher. Eu escolhi este preto só para que vocês possam ver melhor contra o papel branco, mas vocês podem escolher o que quiserem. Agora, o próximo passo para nós é que você pode tirar uma foto de todos esses wireframes, depois trazer a foto para sua área de trabalho e simplesmente arrastá-la e soltá-la no Adobe XD. Ou, se você tiver um scanner como um hub, você pode digitalizar essas páginas individualmente e, em seguida, simplesmente salvá-las como imagens em nossa área de trabalho e, em seguida, simplesmente arraste e solte essas imagens no Adobe XD para que você possa usá-las como referências. Você não precisa fazer isso se você não está compartilhando isso com seus clientes, mas se você está compartilhando seu arquivo com os clientes ou com os desenvolvedores ou colegas de equipe ou coisas assim, então é realmente útil ter essa opção dentro do Adobe XD, apenas para que você possa lembrá-los ou lembrar-se dessas idéias que você tem em seus wireframes. E esse é o principal recurso aqui no processo de wireframe de papel. São só ideias. Então tudo isso, que eu criei durante esse processo são apenas idéias simples. Então nada tem que ser exatamente igual a isso. E, por exemplo, algumas dessas páginas não vão se parecer com isso. Vamos dividi-los e mudá-los um pouco mais tarde quando começarmos a criar. Mas essa é a questão. Isso é apenas para que você possa colocar suas idéias em um pedaço de papel muito rapidamente, mais rápido do que você pode fazer em qualquer software. E, em seguida, traga-os dentro do Adobe XD ou seu autor favorito e, em seguida, comece a trabalhar a partir daí. Então é basicamente isso para esta seção. Na próxima seção, como eu disse, vamos trazer isso para o Adobe XD. Você pode usar seu telefone para tirar uma foto de cada um deles, trazê-los da sua área de trabalho para o Adobe XD. Ou se você tiver um scanner como eu, você pode simplesmente escandium e salvá-los em sua área de trabalho e trazê-los para o Adobe XD. Vemo-nos no próximo vídeo. 11. Como importar fios de papel: Tudo bem, agora que nossos wireframes de papel estão acabados, como eu disse, você pode usar seu telefone para tirar uma foto e trazê-la para dentro do Adobe XD assim. Ou, se você tiver um scanner como eu, você pode simplesmente digitalizá-los e trazê-los para sua máquina e, em seguida, arrastá-los e soltá-los no Adobe XD. E é isso que vou fazer. Agora. Por que você deveria fazer isso de qualquer maneira? Bem, no caso de você querer compartilhar este papel wireframes com seus clientes, com seus companheiros de equipe, com seus desenvolvedores apenas para obter um feedback rápido. Esses tipos de coisas raramente aconteceram porque estas são geralmente apenas para você colocar algumas idéias para baixo em um pedaço de papel que você tem em sua cabeça como explicado no processo de criação. Mas só para o caso de algumas dessas pessoas realmente querer ver esses wireframes. E para dar a você o primeiro feedback sobre o layout em si, então você pode compartilhá-los assim com seus clientes, colegas de equipe ou desenvolvedores. Então, para começar, o que eu tenho aqui é aquele arquivo que criamos anteriormente, e eu vou simplesmente selecionar minhas imagens da área de trabalho, arrastá-las e soltá-las para dentro e você pode ver como elas se parecem. Então deixe-me selecioná-los assim e deixe-me arrastá-los e posicioná-los assim. E deixe-me aproximar um pouco mais. Então deixe-me separá-los por 100. Vou separar este, depois este. Este, e finalmente este. E vamos correr rapidamente através deles. Então o que temos aqui é a nossa navegação. E isso vai ser muito útil para nós. Logo quando começamos, temos a página inicial e você pode ver e lembrar que esta era página longa que criamos com todas essas várias seções diferentes. Então o que temos é a tela de destino. Quando eles estão indo para ir, quando eles clicam em um destes e ir para esta tela de destino. A partir daqui, eles podem escolher a oferta, se você se lembrar. Então oferta selecionada, e esta oferta vai ser obviamente para o hotel com todas as suas características. Finalmente, uma vez que o clique reservado e escolher todas essas opções, ele, eles vão ser levados aqui para a tela de pagamento onde eles são obviamente bom para completar o seu pagamento. Então é isso para esta parte desta classe e esta seção do projeto. Próxima seção vai ser, na verdade, vamos começar a criar wireframes aqui no Adobe XD usando estes como nossas referências. Então foi por isso que os criamos em primeiro lugar. Só uma última coisa a anotar. Se você quiser, você pode mantê-los em papel. Caso contrário, você pode simplesmente jogá-los fora e tê-los aqui mesmo no Adobe XD mais uma vez, se quiser compartilhá-los, porque é muito fácil compartilhá-los, basta selecionar um clique em Controlar E. Você pode selecionar a opção você pode escolher, por exemplo, PNG ou JPEG, o que quiser, clique em Exportar e, em seguida, você pode simplesmente compartilhá-los com seu cliente. Ou, como você fez, tirou uma foto com seu telefone, você os trouxe para dentro ou digitalizou como eu fiz. E então você pode simplesmente enviar-lhes esses escaneamentos e eles podem fornecer o feedback sobre a dívida. Então, basicamente, como eu disse, estes são apenas o processo de ideação. Eles estão lá para liberar algumas idéias em um pedaço de papel e agora vem a parte real com wireframes no Adobe XD. E eu sempre encorajaria você, se algumas dessas pessoas não pedissem que você enviasse esses wireframes de papel, então, obviamente comece com o feedback na via enquadramento parte do processo no Adobe XD, porque você pode realmente compartilhar o com seus clientes e desenvolvedores e eles podem começar a analisar seus projetos imediatamente. E então eles podem fornecer o primeiro feedback sobre o primeiro rascunho, certo? Atreva-se, porque é muito mais simples e você sempre pode fazer esses links clicáveis. Você sempre pode incluir alguma interação, algumas animações lá, enquanto você não pode fazer isso, porque estes são apenas os wireframes de papel. Então, como eu disse na próxima seção, vamos começar com wireframes no Adobe XD. Então, vemo-nos lá. 12. Recursos de projetos: Antes de entrarmos no projeto e começarmos a trabalhar nele, eu só quero mencionar recursos rapidamente, porque cada projeto que você vai criar, você vai precisar de alguns recursos. E neste projeto e nesta classe estou usando recursos premium de elementos Envato. Você vai colocar esses recursos dentro do arquivo para que você possa usá-los para fins de aprendizagem, mas você não tem permissão para usá-los em qualquer tipo de projetos pessoais ou comerciais, porque você terá que pagar por eles. Acredito que o link para baixo no PDF para esta coleção que estou usando. Então, no caso de você querer explorar elementos Envato em, no caso de você querer usá-los para, por exemplo, o seu projeto de portfólio ou para o trabalho do cliente, então você terá que comprar esses itens. Mas no caso de você só querer usá-los para fins de aprendizagem, apenas para seguir ao longo desta aula, tudo bem. Mas, por favor, não os dividas porque não tens a licença. E isso é realmente importante para entender porque se alguém pegar você usando esses itens sem uma licença, você está arriscando um possível processo judicial. Então, mantenha isso em mente. Agora, eu quero mostrar rapidamente esta coleção, o que está incluído e o que você pode baixar em uso a partir de elementos Envato. Então aqui está aquela coleção de que eu estava falando. Como você pode ver, estou usando uma fonte premium e estou usando uma fonte livre. Estou usando Poppins da fonte do Google como fonte livre. E eu estou usando este refrigerante de Envato Elements, que é claro uma fonte premium. Você também pode ir em frente e baixar versões maiores dessas imagens, por exemplo, a partir daqui. Mas você vai colocar esta marca d'água em cima de todas essas imagens. Então deixe-me abrir. Você pode ver que você vai pegá-lo bem aqui. Agora isso é realmente crucial e por isso estou usando elementos Envato para todo o meu trabalho premium. Você pode ver que eles mencionaram aqui. Então quase seis K de tamanho. E também as coleções são realmente enormes porque você pode obter essas coleções impressionantes com essas imagens parecendo bastante semelhante porque e esse é o ponto chave médio por que eu estou usando um recursos premium ou os recursos gratuitos. Com recursos premium, especialmente com imagens, você está recebendo essas coleções. Em seguida, você pode usar coleções do mesmo fotógrafo que são fotografadas no mesmo ambiente usando a mesma iluminação, usando o mesmo equipamento no mesmo dia. Então essas imagens parecem extremamente coerentes. Parecem pertencer um ao outro. Ao invés de usar todas essas imagens aleatórias de sites gratuitos como Unsplash, por exemplo, acabando com seu site olhando coerente e olhando inconsistente e realmente amador. Então, com esses recursos, seus projetos podem acabar parecendo premium porque você está usando-os do mesmo fotógrafo que eu disse, nesta extremamente alta qualidade. E a mesma coisa vale para os ícones, por exemplo. Então, se eu rolar todo o caminho até aqui e ir para a última página desta coleção, você pode ver quantos eles são. Você pode ver que eu estou usando esses ícones premium feitos por este mesmo cara ou pessoa ou empresa, o que quer, estes ícones redondos. E você pode ver que esses ícones realmente parecem pertencer um ao outro. Você pode ver que todos eles parecem uma parte da mesma coleção que eles são. Então eles estão parecendo extremamente premium. E se eu abrir alguns deles, você pode ver todos esses tipos de arquivos em que eles estão entrando. Então você pode realmente escolher o que quiser. E você pode ver que todos eles são criados nessas exatamente as mesmas dimensões. Então 1906 com 96, o que os torna extremamente simples de usar. E como você vai ver em todo o nosso design, vamos usar versões de contorno, bem como as versões coloridas, que mais uma vez, você não vai conseguir com nenhum desses três ícones. O mesmo vale para as ilustrações. Especialmente se você estiver usando algo como andro, que cada designer do planeta parece estar usando agora, só porque é grátis. Don faça isso. Se você quer fazer seus projetos parecer polido e profissional, certifique-se de usar esses serviços premium, como Envato Elements. Você não tem que usá-lo, mas eu realmente gosto porque ao contrário de algo como um peso enorme, por exemplo, elementos Envato trigo, você não está recebendo limites diários de download, então você pode baixar quantos itens quiser onde quiser. Mas com algo como, UH, por exemplo, eles estão limitando você a algo como 18, talvez quatro ou oito itens por dia. Então, o que acontece se esse item não for um bom ajuste, por exemplo, o que acontece muito. E você vai ver que uma vez que você começar a projetar, então você está preso. Você tem que esperar o amanhã para baixar e usar outra coisa. Mas com Envato Elements, você pode simplesmente baixar todo o site se quiser hoje, e simplesmente usá-lo em seu projeto. Quando se trata de licenciamento, é extremamente simples de usar. Então vamos dizer que eu quero usar meus próprios ícones Ds. Por exemplo. Eu simplesmente clicar no botão Download e eu posso simplesmente digitar aqui. Por exemplo, viagens, uma agência de viagens, que é este projeto. Eu posso simplesmente clicar nele, apertar Adicionar e baixar, e é basicamente isso. Dentro deste download. Quando você chegar aos downloads aqui mesmo, você será coberto com uma licença, para você possa compartilhar essa licença com seu cliente. E eles são cobertos apenas no caso de eles ter que usar esses itens em qualquer outro lugar on-line ou impresso por um quarto, qualquer outra coisa. Então você está recebendo essa licença coberta para si mesmo, bem como para o seu cliente, o que é outra grande coisa sobre os elementos Envato. E não apenas malditos, mas serviços premium em geral é que você está coberto com uma licença, mas quando você está baixando esses itens gratuitos, você nunca saberia se outra pessoa baixou o item premium, por exemplo, deu de graça, e então você está arriscando o processo. Portanto, certifique-se de se familiarizar com todas essas licenças e itens diferentes. Como eles disseram, Você vai ter todos esses itens que estamos usando dentro do design. Mas certifique-se de usá-los para fins de aprendizagem. Só para seguir esta aula. Se você quiser usá-los em qualquer lugar fora para o seu portfólio, para o seu trabalho de cliente, você terá que pagar por eles e licenciá-los para si mesmo, como eu acabei de mostrar aqui. Uma última coisa que eu queria passar antes de passar para o design é que eu quero mostrar a vocês o que está incluído nos próprios elementos Envato. Então você pode ver aqui todas essas categorias diferentes. Então modelos de vídeo de estoque, músicas que estou usando para essas aulas, bem como meu canal do YouTube, efeitos sonoros, modelos gráficos. Você pode ver kits de UX e UI e há milhares deles para ajudá-lo a acelerar seu fluxo de trabalho. Modelos de apresentação gráfica, fotos, fontes, setas, modelos da Web e mais categorias. Agora, quando se trata de fotos, eles têm suas próprias fotos, que são esta basicamente. Mas você também pode ir para o site chamado 2020 para 50 milhões de fotos adicionais em cima de todas essas fotos aqui em elementos Envato porque eles possuem esse site. E dentro de mais categorias você pode ver CMS, modelos, WordPress, 3D, e eles também têm seus e-books e classes. Então, basicamente, é isso quando se trata de licenças, quando se trata desses arquivos e o que estou usando para um dia de aula. Então agora você sabe, mais uma vez, você pode usar esses elementos que estão incluídos no arquivo apenas para fins de aprendizagem. Então você pode seguir ao longo desta classe e você pode criar todos esses elementos. Mas no caso de você querer colocá-los em seu portfólio, ou pior ainda, no caso de você querer trabalhar com seu cliente, você terá que comprá-los. Ou você pode simplesmente usar este layout que criamos nesta classe e simplesmente adicionar em suas próprias imagens, seus próprios ícones, e seus próprios elementos para que você possa usá-lo para esse fim. Então vamos seguir em frente. 13. Como criar estilo: Vamos agora passar para os wireframes no Adobe XD. Mas antes disso, precisamos rapidamente terminar algumas coisas. Em primeiro lugar, precisamos criar um guia de estilo. E o guia de estilo é ótimo porque dentro dele, haverá coleção de imagens, de ícones, cores diferentes, fontes, tamanhos de fonte e combinações de fontes, e todos os outros elementos que você quiser, para exemplo, botões, controles deslizantes, tudo o resto pode estar dentro desse guia de estilo, que é extremamente útil tanto para você, seus companheiros de equipe, porque eles podem simplesmente copiar e colar esses elementos desse guia de estilo para o seu porque eles podem facilmente olhar para todos os elementos que você usou em seu design. Finalmente, e mais importante para seus desenvolvedores, porque eles podem facilmente um olhar e exportar a partir daí, se eles querem. Mas você vai começar a exportar recursos mais tarde. E eu vou compartilhar com vocês algumas maneiras que você pode compartilhar seus arquivos com seus desenvolvedores. Mas este é apenas um deles e esta é apenas uma das opções que está disponível para você no Adobe XD. Agora, antes de passar para o guia de estilo e para os wireframes reais no Adobe XD. Eu só queria compartilhar rapidamente com vocês os outros produtos que temos em um donut web. E também temos UX, UX Kids, que são basicamente kits de wireframing e você pode usá-los para acelerar seu fluxo de trabalho. Agora, você não precisa usá-los para este projeto em particular, mas você pode usá-los para seus próprios projetos no futuro, tanto pessoais como comerciais, se você quiser saber. Só estou a dizer que esta é apenas uma opção para ti, se quiseres, mas não é obrigatório para esta aula. Então o que temos aqui são todas essas várias crianças UX. E também temos kits de interface do usuário, que basicamente são a mesma coisa, mas com textos reais incluídos e largura incluídos imagens dentro. Em nós crianças geralmente este é apenas um texto fictício e geralmente ser incluído algo como Lorem Ipsum texto ou algo assim. Mas dentro dos kits de interface do usuário, existem alguns elementos reais. Você pode obter isso com uma assinatura ou se você quiser ainda melhor negócio, eu poderia sugerir que você vá para o meu próprio site pessoal. E, a propósito, deixarei os links para tudo o que está falando no PDF e você pode acessá-lo com todos os descontos que mencionei anteriormente. E aqui você pode ver que tudo está em um só lugar. Temos cursos e temos filiação. E, claro, esses pacotes são muito melhores. Em seguida, simplesmente visitando meu site. Você também tem uma ligação de 30 minutos todos os meses comigo. Você também tem um grupo privado no Facebook. Então, se isso é algo que lhe interessa, eu conheci, exorto você a verificar e obter todos esses produtos em todos esses cursos para si mesmo, se você estiver interessado, é claro, eu também tenho um canal do YouTube e eu vou ligá-lo em que PDF também. Você pode conferir se quiser algum conteúdo adicional, mas se não, vamos passar rapidamente para o Adobe XD. E eu quero mostrar a vocês o que está incluído dentro do guia de estilo e o que vamos usar. Então aqui estamos no Adobe XD, e como você pode ver, aqui que paramos o vídeo anterior. Então, basicamente, temos modelo breve projeto. Nós temos essa placa de humor e nós temos wireframes de papel. Agora, antes de passarmos para wireframes no Adobe XD, uma coisa útil a ter é o guia de estilo. Não é obrigatório, especialmente quando você está apenas começando com esses projetos. - Obviamente. Muitas vezes você não tem as cores, você não tem as fontes, você não tem os ícones, você só vai pegá-los. Mas neste caso, porque já criei este projeto, vou começar com o guia de estilo. Agora, guia de estilo está sempre evoluindo. Então, à medida que você segue em frente através do seu projeto, medida que você obtém mais e mais recursos dentro, por exemplo , imagens, diferentes fundos, sombras, ícones diferentes, então você vai preencher este guia de estilo muito mais. Mas para começar, você pode começar simplesmente usando tipografia, por exemplo. Então, quaisquer estilos de tipografia que você tem, quaisquer cores de tipografia, você pode simplesmente incluí-los dentro. E, obviamente, você pode criar algo como componentes no Adobe XD para que você possa facilmente alterá-los mais tarde e guia de estilo atualizado em tempo real. Então, mais uma vez, o que temos aqui é este documento do Adobe XD. Vou saltar para dentro do meu documento que eu já criei e apertar Control V, Control C para copiá-lo e depois Control V aqui para colá-lo dentro. E como você pode ver, há algumas falhas aqui. Então deixe-me desfazer isso algumas vezes e deixe-me pular. Vamos ver as bibliotecas. E vamos saltar para dentro daqui e criar 1920, nossa prancha. Não sei por que continua fazendo isso. Então vamos realmente duplicar este. E fazendo isso, eu vou posicioná-lo bem aqui abaixo. Para saltar, chamá-lo estilo, ir assim. Então eu vou pular dentro do meu painel de camadas e remover todos eles, incluindo VG. Então eu vou saltar aqui e dar-lhe 1920 por 1080, por exemplo, layout. Vamos usar uma largura de calha de 68. Acho que vai ficar tudo bem. Aqui. Vou diminuir a obesidade profunda destas linhas para virar talvez até oito. Então não é muito distrativo para você assistir. Acho que isso é bom. E agora eu vou pular. Primeiras coisas primeiro, eu vou realmente usar uma cor de fundo para este guia de estilo em vez de branco, apenas para que você possa ver todos esses outros ícones que não são, que não vão se destacar. Então eu vou simplesmente copiar e colar todos esses elementos em. Aqui estão eles. E basicamente é isso, esse é o nosso guia de estilo. Estes são os ícones que vamos usar. Então, basicamente, estes são todos os ícones que eu compartilho com vocês na coleção Envato Elements. E basicamente você pode usar esses ícones ou você pode usar outros ícones que você encontrar online. Basicamente, cabe a você o que quer fazer. Como eu disse, você tem que seguir as regras sobre as licenças para que você possa usá-las apenas estritamente para fins de aprendizagem. Você não pode usá-los para qualquer tipo de trabalho de cliente. Ambos os projetos pessoais e comerciais são proibidos. Use-os estritamente para fins de aprendizagem. E deixa-me saltar para dentro daqui. E deixe-me ir para Envato Elements. E você pode ir para os meus itens apenas para mostrar que a coleção mais uma vez, então você vai ser capaz, como ele disse, para acessar esse link de coleta vai estar no arquivo PDF e simplesmente acessar a cobrança de dívidas e navegar através do que eu incluí. Então, basicamente, esta é aquela coleção, como você pode ver bem aqui. Você pode navegar por todas essas imagens diferentes. E você pode obter essas ilustrações, você pode obter esses pacotes de ícones. E basicamente o que eu fiz é que você pode vê-lo na máquina de lavar bem aqui. E se eu voltar para o nosso arquivo original onde ele está, aqui está. Então você pode ver que eu peguei alguns ícones desses pacotes e basicamente colá-los aqui. O que eu também fiz foi usar o logotipo. Nós temos o estado padrão e nós temos o estado escuro, que é essa data, e eu apenas movo isso aqui para que vocês possam vê-lo. O que também temos nossos estados para esses ícones. Então temos o estado padrão se ampliarmos realmente de perto, porque este é o ícone SVG, você pode ver como ele é bonito e nós também temos o contorno. Então, talvez vamos usar o estado padrão. Talvez nós vamos usar o estado delineado. Eu só fui em frente e removido desta cor do ícone original para obter este estado de contorno. E você pode ver que nós delineamos Estados para todos eles. Agora, uma última coisa que vamos fazer antes de realmente começarmos a criar wireframes no XD. Vou saltar aqui para os meus componentes. E o que eu vou fazer é basicamente selecionar todos eles são clicar com o botão direito do mouse e fazer glocal porque eles estão atualmente conectados com o meu arquivo de design original que eu criei primeiro. Mas eu quero torná-los locais e aplicá-los aqui mesmo antes de avançarmos com o design ainda mais, o que realmente quero fazer é provar algumas cores. Então o que eu vou fazer é arrastar um retângulo como este. Então, por exemplo, três colunas de largura. Vou me certificar de arredondar os cantos só um pouco, só para que possamos estilizá-lo um pouco. E vamos usar isso como uma cor branca. Então vamos realmente usar o texto. Coloque-o bem ali. E digamos que toalhetes simples. Como dívida e disposto a usar Poppins para este e escolher Poppins 24, eu acho. Acho que funciona. Bem. Ele 6, Vamos movê-lo para, por exemplo, 60. Fiz o Controle D. Certifica-te de que isto está alinhado e vamos basicamente usar o código hexadecimal. Então deixe-me copiar e colar rapidamente o código hexadecimal do documento original. E este é apenas um código hexadecimal para esta cor branca. Certifique-se de que são 40, porque eu não acho que é necessário estar em 60. E vamos pular em nosso painel de camadas e chamar essa amostra de cores assim. E eu também gosto de organizá-los. Isto é cor, obviamente. Coloque bem aqui. Isto é bem largo, isto é bem aqui. E finalmente, vamos agrupar todos esses controles G. e eu vou chamá-los de ícones. Isto vai ser logótipo, obviamente. E mais tarde, eu realmente vou exportar este logotipo, que é o arquivo SVG neste ponto, mas eu vou exportá-lo mais tarde. E arraste e solte mais dois PNGs aqui porque precisamos reduzir a escala. E se você se lembra do exemplo que eu mostrei quando eu começar a reduzi-lo, como você pode ver, porque estes são três elementos. Eles não escalam muito bem. Então é por isso que em tamanhos menores vamos realmente usar PNG em vez de SVG. Então vamos agora seguir em frente e usar algumas outras cores. Então vamos posicioná-lo bem aqui. Amostra de cor, você pode obviamente usá-lo um pouco grade, mas eu não vou, eu vou simplesmente usá-lo assim. Oops. Vamos posicioná-lo assim apenas para preencher nossa grade muito bem. Então a primeira cor que vamos usar é principalmente azul. Como isso. Vou acertar a cópia da própria cor. E eu vou realmente colorir bem aqui. Agora, eu posso clicar nesta amostra e eu posso adicioná-la como um componente, ou eu posso simplesmente ir aqui onde diz Cores, clique aqui e chamá-la de branco liso. Como isso. Eu posso pular aqui, adicionar este também, chamá-lo de azul principal, assim. E então eu posso seguir em frente. Isto vai ser pairar e azul. E deixe-me copiá-lo rapidamente do meu documento original. Obviamente, você vai trabalhar seu caminho em torno desses arquivos. Eles simplesmente selecionando-os a partir do seu logotipo real, do seu documento real, de todos esses ícones deste quadro de humor que criamos. Então, basicamente, vamos trabalhar o seu caminho em torno destes porque eu já os criei. E para nos poupar um pouco de tempo, vou simplesmente seguir em frente e criá-los aqui mesmo. Então vamos chamar esse texto escuro ou melhor texto preto, ou chamá-lo quase preto. Eu estou realmente indo para copiar e colar neste clipe de texto aqui, colar e eu vou adicioná-lo às minhas cores, quase preto assim. E agora porque nós preenchemos todos eles, vamos duplicá-los antes que DoubleClick e estender nossa prancheta. Isso é o que eu estava dizendo. Então, obviamente, você vai ter esta prancheta ser grande como você precisa. Vamos dar-lhe um espaço de 80 para baixo. E vamos ver, talvez agora eu possa passar para o texto escuro. Talvez. Vamos colá-lo aqui e colá-lo aqui. E vamos chamá-lo de cinza escuro. Como isso. Vamos clicar aqui, clicar aqui mesmo. Mude seu nome para cinza escuro assim. E nós vamos chamar isso de cinza médio, por exemplo, ou cinza claro como você quiser. E, obviamente, esses nomes podem ser usados como tokens de cor mais tarde pelos desenvolvedores. Tão leve, porque é muito mais fácil no código ver essas cores do que usá-las como estão aqui. Finalmente, o que vamos usar a amostra algumas cores. Então eu vou provar a cor desta estrela que você vê aqui. Então eu vou chamá-lo de laranja estrela, só para que saibamos de onde é e para que é usado. Então clique aqui e ali está. Clique para adicioná-lo, renomeá-lo para estrela, laranja, assim. E finalmente, eu vou adicionar mais uma cor, que é basicamente apenas vai ser amostrado a partir de alguns destes e nós vamos usá-lo mais tarde como um suporte basicamente cores para que possamos usá-lo para outra coisa e chamá-lo simples sabe, cor de pêssego assim. Cole o código hexadecimal e você pode ver por que eu lhe dei esse nome. Finalmente, vamos adicioná-lo rapidamente a aqui. Mude seu nome. Hábito do Derek. E finalmente, o que queremos fazer neste momento é agrupá-los todos. Vamos ver. Então vamos colocar esses quatro no topo. Assim como. Vamos ver, este é o primeiro e este é apenas o meu TOC. Você não tem que fazer isso, mas eu realmente gosto de manter as coisas organizadas e bem posicionadas. Então eu vou colocar isso aqui, colocar isso aqui, lá nós temos e agrupar todos eles e chamá-los de cores. Então lá temos, Agora temos nossas cores, somos capazes de prová-las. Nós também vamos usar este Poppins e uma outra fonte, que é a fonte premium. E você pode obtê-lo na coleção Envato Elements se você quiser. Se não, você pode, obviamente, como ele disse, encontrar algumas fontes livres para corresponder bem com a fonte premium que eu usei. Mas se não, como eu disse, você pode simplesmente encontrá-lo aqui nesta coleção e, em seguida, usá-lo se você quiser. Então é isso por enquanto. Agora vamos passar para a criação de wireframes no Adobe XD. E eu vou mostrar a vocês como podemos transformar esses wireframes de papel em alguns wireframes que você pode realmente compartilhar com seus clientes para obter algum feedback adequado sobre. 14. Como criar wireframes no Adobe XD 1: Tudo bem, agora que o guia de estilo foi criado, vamos seguir em frente e realmente começar a criar nossos wireframes no Adobe XD. Então a primeira coisa que eu vou fazer é clicar na minha prancheta, pulando aqui, clique neste 1920 por 1080. E finalmente passa, para aqui. As primeiras coisas primeiro, só para que vocês possam ver isso, vamos abaixar para oito, então é o mesmo que este. Vamos saltar para algo largo como 60, por exemplo. Então isso a torna, para saber maior, que é a largura entre nossas colunas e larguras de coluna, muito menor. Então, é realmente fácil de trabalhar. E vamos clicar duas vezes aqui, chamá-lo de praia. E a primeira coisa que eu realmente vou fazer é estender todo o caminho para baixo. Porque se eu saltar para dentro daqui você pode ver que a página vai ser extremamente grande. Então vamos pular aqui. E a primeira coisa que realmente queremos fazer é incluir uma imagem. E vamos ver. Podemos, por exemplo, campeão e criar 1920 por 1080 retângulo como este, 1920 por 1080 e posicioná-lo. Vamos ver aqui e aqui. Vamos remover a fronteira e dar-lhe um nome apropriado. Então, digamos, por exemplo, herói, IMG. Vamos deixar assim. E vamos dar-lhe uma cor de cinza escuro, por exemplo, ou ainda melhor cinza claro, apenas para que possamos ver o que estamos fazendo. E vamos indicar que este cinza claro, por exemplo, é a cor da imagem na manhã. Então, na verdade, vamos pular aqui. E como eu disse, você pode usá-lo a partir daqui, todos esses elementos guia de estilo. Ou você pode simplesmente saltar aqui, encontrar o logotipo, arrastá-lo e soltá-lo dentro. Que é o que eu realmente vou fazer. E eu vou movê-lo, por exemplo, 40 do topo, como dívida. Agora, a primeira coisa que vou fazer se eu levar vocês aqui para o nosso wireframe, vocês podem ver que temos navegação de dois níveis como todos esses sites fazem, mas vamos fazer isso de uma maneira muito mais limpa. Então vamos ter essa parada, que vai dizer, por exemplo, bilhetes de avião, boletim informativo, e o número de telefone. E este de baixo vai ser a nossa própria navegação. Então vamos saltar para lá e vamos ver, por exemplo, eu posso arrastar aquele ícone de bilhetes de avião e eu posso realmente saltar para dentro daqui. Ícone dos bilhetes de avião. E preciso de mais dois. Preciso do boletim informativo. Aqui está. E é por isso que é importante nomear suas camadas novamente. E, finalmente, o ícone do telefone aqui está, e arraste e solte-o dentro. Agora o que eu vou fazer é pular para aqui, selecionar todos os três e simplesmente organizá-los melhor assim. Certifique-se de que todos eles estão abaixo Logo e simplesmente clique aqui apenas para que eles são encomendados bem e que eles estão na linha. Finalmente, eu vou mover a direita aqui por agora, e eu vou realmente usar a ferramenta de texto, clique aqui. E eu vou escrever em bilhetes de avião. Certifique-se de que é da esquerda. E vamos ver, vamos usar Poppins. E vamos ver luzes como pais e talvez 18. E vamos também dar-lhe uma cor de branco. Eu posso simplesmente fechar isso e eu posso ver Lee usar branco claro para este aqui. Posso posicioná-lo aqui mesmo. Vamos ver, por exemplo, eu posso dar-lhe uma distância de c. Por exemplo, 28 acho que vai ficar bem. Então, assim. E vamos selecionar esses dois. E eu simplesmente o tirei do caminho por enquanto, pulei de volta para o meu painel de camadas, apertei Control D mais uma vez. Vou mover o disco para 20 também. Certifique-se de que está alinhado. E duplique-o mais uma vez e posicione bem aqui. E agora eu vou simplesmente fazer induzir bilhetes de avião indo para abaixo boletim informativo. E finalmente, eu vou selecionar estes para movê-los para aqui. E vamos ver. Esta vai ser a nossa superclasse de números de telefone. Você pode apenas escrever em algum imaginário para o número um. Então 1234567890, por exemplo. E vamos ver. Eu posso, por exemplo, ter certeza que eles são, eles estão indo da direita, então alinhados à direita. E a primeira coisa que vou fazer é adicioná-lo aos meus estilos de personagem. Então nós temos, Poppins luz 18 aqui. E agora vamos seguir em frente e explorar e DS mais. Então, 20. E vamos ver, talvez possamos dar isto para 40. Ao contrário de induzir, então 40 e isso vai dizer boletim, como dívidas e simplesmente mover neste ícone em um pouco mais como dívidas e dar-lhe para 20, o que é bom. Então, finalmente, eu vou posicionar essas passagens de avião para 40 também. Apenas tenha certeza. E isso, às vezes esses ícones não são tão bons, então vamos conseguir esses meio-pixels, mas tudo bem. Você pode simplesmente agrupá-lo. Correlacionar bilhetes de avião, boletim informativo, e finalmente telefone assim. E vamos ver, podemos chamar isso de navegação secundária. Se eu puder soletrar corretamente, e eu posso até incluir esses traços inferiores assim. E finalmente, o que eu posso fazer é colocá-lo em uma pilha e como você pode ver, Stack organizou corretamente. Então agora, se você quiser movê-los, você pode fazer isso. Ou você pode simplesmente manter sua tecla shift e simplesmente estendido como quiser. E então, por exemplo, se eu posicionar esse navegador secundário em algum lugar por aqui, eu posso clicar aqui e estender isso assim ou segurar o turno. E vai estender e movê-los assim. Então eu acho que é realmente bom recurso para ter nesta pilha no Adobe XD. E, finalmente, vamos posicioná-los para ser 40 a partir do topo. Então vamos ver assim. E, a propósito, estou segurando a tecla Alt ou Option em um Mac apenas para ver onde estou com meus espaçamentos. Então vamos agora seguir em frente e adicionar nossa navegação principal. Então vamos ver o que podemos fazer com ele. Vamos escrever em destinos. E para isso, Vamos ver talvez possamos usar pop em ligeira, mas 24 por exemplo. E vamos também dar-lhe uma cor branca. E vamos também adicioná-lo aqui. E vamos ver, podemos posicioná-lo para estar alinhado assim, o que é bom. Vamos ver os destinos 24 luz, tudo bem. Vamos ver o inverno. Mais com aqui e ver bem-estar. Isso pode ser individual. Porque se você se lembra, e esse é o principal ponto de venda deles, e eles querem vender essas viagens individuais tanto quanto possível. Então é isso que estamos fazendo aqui. Temos cruzeiros, e finalmente temos sobre nós. Agora, finalmente, para este, vamos ver. O que também podemos fazer é movê-lo para aqui e fazer com que isto seja 80. Faz isso ser 80. E será tão útil porque está nos mostrando toda essa navegação ou barreiras. Então ele nos mostra distâncias e nos mostra onde tudo está em conjunto com todos esses outros elementos. E mais uma vez, aqui está o meu TOC porque eu realmente gosto de organizar coisas. Então vamos chamar isso de navegação principal. Como mortes posicionadas bem aqui. Vamos ver. A morte pode ser posicionada, por exemplo, para o fundo bem aqui. E nós temos 47 distância entre estes dois, e tudo bem. Nossa navegação está concluída. E vamos ver talvez possamos adicionar isso e qualidade, por exemplo,navegação primária como aquela, navegação primária como aquela, porque essa é a nossa navegação em todo o nosso design. Agora vamos seguir em frente e adicionar mais alguns elementos à nossa página. Então o que eu realmente vou fazer é localizar minhas flechas. E eu sempre posso usar essa busca. Então linhas, temos uma seta para a esquerda, arrastar e soltar, seta para a direita, arrastar e soltar. E eu vou pular aqui, selecionar estes para ter certeza de que eles estão alinhados corretamente. E eu também vou usar o retângulo porque esta vai ser a nossa seção de heróis com o controle deslizante. Use esse retângulo. Selecione estes dois. Clique aqui, certifique-se de que eles estão no centro. Em seguida, exclua este retângulo porque não precisamos mais. Finalmente, para esta seta para a esquerda, eu vou apenas alinhá-la com a nossa linha de grade assim. E faça o mesmo para a seta para a direita. Então simplesmente mais aqui e alinhá-lo assim. A próxima coisa que quero fazer é usar minha ferramenta de texto. Clique. Por exemplo, explorar, místico. E vamos dar isso, vamos primeiro fechar isso. Vamos dar azul cruel. Certifique-se de que é da posição central em como sujeira. C. Por exemplo. Vamos ver. 24 luz é bom, então não vamos mudá-lo. Eu acho que é bom. Podemos deixar assim. Mas a próxima coisa que vamos fazer é duplicá-lo. Mas para a nossa posição em um centro, duplique-o. E vamos chamar esse gene B, por exemplo. E agora eu vou realmente mudar a fonte para que possamos este, o que eu vou fazer é saltar para fontes de prémio de dívida e mudá-lo para dívida. Então acho que se chama canto nimbus. Bucks refrigerante. Aqui está. E eu vou mudar para 200. Tão enorme. Vou usar quase cor preta. E vamos ver as distâncias entre estes dois, eu não sei. Podemos, por exemplo, ter certeza de que eles estão alinhados corretamente porque temos espaço suficiente entre eles. E finalmente, o que vamos fazer é incluir um botão dentro. Então vamos ver. Podemos arrastar um retângulo como este e podemos fazê-lo de duas a quatro semanas, 70, por exemplo, certificar-se de que está no centro. E vamos ver, podemos dar-lhe um canto arredondado de cinco. Podemos remover a cor de preenchimento na verdade, vamos deixar a borda n, mas vamos mantê-la em branco. E vamos ver, para a distância que podemos, por exemplo, posicioná-la para 40 de nossos textos. Ou ainda mais. Parece AT, acho que funciona bem. E finalmente dentro dele, eu posso pular, copiar e arrastar este texto digitando explorar. Agora, podemos ter certeza que é branco. E vamos dar este btn, pequeno BG, por exemplo, Data Explorer agora. Então certifique-se de que ele está no centro assim, e certifique-se de que este texto do botão está alinhado no centro como ele está. E finalmente, eu vou realmente bater Controle D e chamar isso de BG e de cor pequena assim. E vamos ver, por exemplo, posso incluir a cor. E este aqui. Bem, vamos ver a cor ainda melhor, porque vamos usar Herakles pouco mais tarde. E, na verdade, vou remover a fronteira e baixar a obesidade até o fim. Então eu vou agrupar todos eles e chamá-lo de botão herói assim. E eu sempre posso pressionar Control K para ter certeza de que eu crio isso como um componente. E nós vamos lidar com componentes um pouco mais tarde, mas eu só quero mostrar a vocês o que é possível agora. Então vamos organizar isso um pouco melhor. Vou posicionar isto aqui. Vamos chamá-lo de texto de herói, assim. E vamos ver. Posicioná-lo. Atreva-se, acho que está tudo bem. Aqui. A única coisa é, vamos lidar com o espaçamento um pouco. Então faça isso com o mesmo crédito para as setas. E é basicamente para a nossa seção de heróis, está concluída. Agora o que resta a fazer por nós é incluir essa navegação inferior aqui está. Então, esta viagem de doação atividades, pesquisar e aplicar para o fundo. E é isso que vamos fazer a seguir. Mas vamos deixar isso para o próximo vídeo porque este tem quase 15 minutos de duração e eu não quero aborrecê-lo demais. Mas basicamente o que fizemos neste é que estamos acabados e completou nossa configuração e finalmente fomos a um adicionado todos esses diferentes componentes. Esqueci de adicionar o texto para este, então vou adicioná-lo rapidamente aqui. E como você pode ver, agora continuamos a construir este guia de estilo e a construir nosso arquivo oral porque estamos, uh, mais tarde, quando adicionar esses textos ao nosso guia de estilo em todos esses pesos diferentes. Mas vou mostrar isso mais tarde, quando terminarmos o design e terminarmos o guia de estilo em si. 15. Como criar wireframes no Adobe XD 2: Vamos agora seguir em frente de onde paramos. E vamos criar essa seção inferior, que é esta aqui. Então deixe-me pular aqui. E o que vamos fazer antes de tudo, é criado que descreve. Então vamos arrastá-lo por todas as nossas colunas. Mas certifica-te que estou fora da minha mensagem de herói porque queria estar separada. Vou movê-lo todo o caminho até aqui. Um texto de herói vai ficar abaixo da nossa navegação. O mesmo que com as flechas. Vamos agrupá-los, chamá-lo de setas assim, e posicioná-lo aqui mesmo. Então o que isso vai nos permitir é criar essa seção inferior e vamos chamá-la de fundo agora, por exemplo, annelids dar-lhe um nome de fundo agora BG por exemplo. E vamos ver, podemos manter isso uma largura, mas vamos aumentá-lo para, por exemplo, 1640. Sim, vamos mantê-lo em 640 porque é a largura oral da nossa grade. Como debates na verdade 1644, desculpe. Então vamos remover a borda e para a altura, vamos com 70. Assim como com este botão. E vamos ver pela distância que podemos usar algo como 60. Então, 1, 2, 3, 4, 5, 6. Para estar distante desta borda inferior. O que eu realmente vou fazer também é bater cinco apenas para que nós temos bordas arredondadas como com o nosso botão. Então, a mesma coisa aqui. E o que vamos fazer é usar esses outros elementos. Então vamos saltar para dentro e vamos ver o que podemos criar primeiro. Então vamos ver, os destinos vão ser o nosso primeiro. Bem, vamos ver. Podemos usar isso para nações. E deixe-me mudar isso rapidamente para estourar coisas. Vamos usar uma luz mais uma vez. E vamos usar 18 desta vez, como pontos. E nós vamos realmente usar um cinza claro, eu acho. E isso vai funcionar muito bem para ter certeza de que ambos estão centrados assim. E eu também vou usar este ícone de pin aqui. Então vamos ver onde ele está e por que eu não posso vê-lo. Então vamos verificar aqui mesmo. Veja onde está. Não sei por que não consigo ver. Vamos tentar isso mais uma vez. Então, fixe os curadores do ícone e certifique-se de que é cinza claro, por exemplo. Ou, na verdade, vamos localizar no outro aqui está. Então destino eu posso me desculpar, eu escolhi o errado. Como papai, por exemplo, vamos ver algumas distâncias entre eles. Talvez eu possa incluí-los aos 40. Então 1, 2, 3, 4 e destinos que também podemos posicionar para ser 40 assim. E vamos entrar em nosso painel de camadas e destinos de qualidade assim. Finalmente, o que podemos fazer é controlar a posição D aqui mesmo. Isso pode ser tipo Journey, mas em vez de centralizar alinhado, vamos mantê-lo alinhado à esquerda. Minha dúvida, é chamado esse tipo de jornada assim. E vamos assim que deve ser por perto assim. E vamos ver o que podemos fazer aqui é substituir este ícone de destinos com Journey type Python. Então aqui é simplesmente arrastar e soltá-lo dentro porque este é o componente vai atualizar em tempo real. Simplesmente cutucar mortes são 40 para a direita, e é basicamente isso. Controle D para duplicar este, movê-lo para baixo. Isso vai ser atividades como essa. Meu pai selecionou este ícone, clique e localize atividades e arraste-o e solte-o dentro. Certifique-se de que este é 40. Então 1234? Eu fiz. E como você pode ver, os nomes estão atualizando como deveriam e mudando porque nós mudamos esses ícones, apertamos o controle D neste, posicionando-o para baixo. Isto vai ser procurado por viagens como essa. Vaca leiteira, e use este e procure viagens. Vamos ver, podemos usar este ícone de busca assim e ter certeza de que somos 40 assim. Finalmente, o que vou fazer é duplicar o nosso traseiro. Agora BG aperte Control e D, e eu vou realmente criar um botão. Então vamos chamá-lo de aplicar BTM. E vamos ver, podemos dar-lhe uma largura de 36, 6 assim. E vamos dar a cor principal assim. E finalmente posicioná-lo aqui e alinhá-lo com nossa grade. O que eu também vou fazer é usar Poppins 24 Luzes, basta digitar algo como aplicar filtros. Minha mistura de sujeira está alinhada no centro, certifique-se que é Poppins 24 centro. E vamos ver onde está aqui, certifique-se de que estes dois estão no centro. E finalmente, o que eu vou fazer é fazer algumas mudanças para ouvir porque eu não quero que esses dois cantos sejam arredondados. Então eu só vou pular aqui e ver raça superior esquerda para 0. E no canto inferior esquerdo, que é este, abaixe para 0. Então temos estes dois achatados e estes dois arredondados. Finalmente, certifique-se de que eles estão no centro. Dr. Controle G. E aperte Apply btn. E lá temos. Nós completamos isso. Agora, dentro de nossa seção de design, nós realmente vamos pular e organizar isso um pouco melhor porque eu ainda queria dar espaço suficiente para tudo isso. E nós vamos posicioná-los mais tarde na verdade e incluir alguns divisórias quando chegarmos ao estágio de design mais tarde. Mas por enquanto, na verdade, talvez eu devesse lidar com divisórias imediatamente. Então é muito mais fácil para nós trabalhar neles. Então o que eu realmente vou fazer é pular aqui e apertar colar em um dos meus divisores, que eu criei anteriormente. Então você pode ver largura é um, altura é 70 como é com este. Estas são as cores de preenchimento. Então, basicamente, a cor que já temos. E o que eu vou fazer é realmente certificar-me de que esse divisor é, por exemplo, eu não sei, cento e cem, por exemplo, pixels deste. Como morto. Controle D. E certifique-se de que isto é 40. Então use esse divisor. Tudo bem aí. Certifique-se de que este é 40 também. Certifique-se de que este é 100. Finalmente, certifique-se de que este é 40 do divisor também. E ainda temos espaço suficiente aqui. Então, lá temos. Deixe-me pausar rapidamente o vídeo para que eu possa organizar esses divisórias e não te aborreça muito. Então o que eu fiz foi simplesmente incluir esses divisores em sua pasta, só para não te aborrecer demais. Finalmente, permitam-me agrupar rapidamente tudo isto assim. E vamos chamá-lo, por exemplo, de robôs agora. Porque temos nervos primários, temos fundo agora, vamos ver, talvez possamos dar outra coisa. Agora, vamos mantê-lo no fundo agora e seguir em frente. Agora vamos passar para essas seções que são basicamente vai ser o mesmo. Então temos ofertas especiais. Vamos ter algum texto abaixo. Então vamos criar isso muito rapidamente. Aqui estamos nós. Então vamos digitar ofertas especiais. Eu sujarei. Vamos saltar para dentro quase preto e vamos dar-lhe um ônibus coda que está posicionado bem aqui. E vamos parecer que talvez possamos até baixá-lo para 120 e adicioná-lo aqui mesmo. E vamos ver o que podemos fazer com ele. Talvez posicionar para ser 150. Como isso. Certifique-se de que está no centro e vamos organizar rapidamente estes. Então esta vai ser a seção superior. Tudo isso. Como ofertas especiais vão para aqui abaixo do Controle D. E vamos ver, para este o que podemos fazer é usar Poppins 24 luzes como essa, mas apenas mantê-lo cinza claro, por exemplo, ou cinza escuro. Isso é bom. E eu simplesmente adicionei aqui e certifique-se de organizá-lo um pouco melhor para que você saiba o que você está fazendo. Certifique-se de que está alinhado no centro e no centro. E vamos realmente copiar e colar o texto do documento original apenas para que possamos manter as coisas um pouco mais rápido assim. E vamos ver. Podemos chamá-lo, por exemplo, título de seção, meu pai. E podemos usá-lo em todo o nosso design. Então o que vamos ter aqui, nossas ofertas de primeiro minuto e ofertas de última hora. Então vamos em frente e criar isso. Deixe-me duplicar isso aqui. Posicione-o em algum lugar por aqui, certifique-se de que está alinhado à esquerda e vamos usar outra coisa. Então vamos ver por esse texto talvez eu possa usar 24 parafuso. Veja o que é. Aqui está. E vamos usar a cor azul média, alinhada à esquerda. E vamos chamar de primeiro minuto, primeiro Controle D. e selecionar as ofertas de última hora. E vamos incluir esses ícones lá dentro. Então vamos ver. Tenho o meu cronômetro onde está. Então vamos realmente digitar o ícone do cronômetro. Aqui está. E vamos ver, eu acho que é relógio. E aí está ele. Então ícone relógio, então para os primeiros e últimos minutos, e vamos selecionar tudo isso. E vamos começar com esta posição aqui. Certifique-se de que isso está no centro e certifique-se de que eles são, por exemplo, 20 um do outro assim. E agrupá-lo. E volte para aqui, ligue primeiro, precisa de ofertas. E faça o mesmo por este. Então, certifique-se de que são 20. Isso e o grupo licita e oferece minha dívida. E isso é bom. Posição da tríade aqui. E o que eu vou fazer é selecionar esses dois clipes bem aqui. E vamos ver, certifique-se de que eles são 80, por exemplo, a partir deste texto. Então 1, 2, 3, 4, 5, 6, 7, 8. Segurando meu turno para baixo. E seção intitulada basta ir abaixo. E porque temos 12 colunas, esta seção vai ter seis colunas de largura. Isso vai ter seis colunas de largura, então certifique-se de contar seis. Então, 1, 2, 3, 4, 5, 6. É este aqui. Eles são Harut e isso já está à esquerda. Então o que vamos fazer primeiro é realmente criar o cartão que você viu. Então oferta cartão, que é este aqui. Então vamos saltar para dentro e criar isso. Rapidamente. Então eu vou me certificar de que tem seis colunas de largura como esta. 1, 2, 3, 4, 5, 6. E aí está ele. E vamos dar-lhe alguma demência. Então 79 para 39, um como esse. E vamos arrastá-lo até aqui e chamá-lo de cartão de oferta. Você fez Dario e vamos ver. Dê-lhe um cantos arredondados ou cinco. Branco para a cor de preenchimento é bom. Vamos dar uma sombra de 55 e som. E vamos ver, por exemplo, podemos fazer com que seja 5%. Por exemplo, só para que seja agradável e leve assim. E vamos ver, nós também podemos posicioná-lo do nosso texto para 40. Como aquela manada leiteira. Agora vamos criar uma imagem, então Controle D. E para esta imagem, vamos remover a sombra e trazer a cor. Então vamos fechar isso e vamos usar cinza claro porque essa é a cor que usamos. Então vamos ver para a altura 39 um, está bem, mas para a largura três, 66, eu acho que é bom. E vamos ver para essas bordas, então para o canto superior direito, vamos usar 0 porque é este aqui do fundo bem aqui. Na verdade, também vai usar zeros. Então é assim. Agora o que eu vou fazer é realmente arrastar aquele ícone de estrela. Então, aqui está. E eu vou usar uma grade de repetição. Vamos ver 2345. E isso é bom. Vamos ver entre nossas estrelas estão simplesmente indo para ter a distância. Ou, por exemplo, para pixels para algo realmente pequeno. Ou talvez eu possa usar cinco assim, o que é bom. É simplesmente saltar para dentro daqui e fechar nossa grade de repetição apenas para a borda. Vá para a grade de desagrupar. Controle G para as estrelas e classificação de qualidade como essa. E você me conhece, gosto de organizar joelhos. Então, realmente rapidamente apenas organizá-los como eles são da esquerda para a direita. E você pode notar que todas essas estrelas têm dois estados, que é o que eu criei também. Então esta é a estrela original e esta é a startups cinza. Então você pode mostrar, por exemplo, classificação de quatro estrelas, classificação de três estrelas simplesmente ligando o estado cinza, que é imensamente útil, obviamente, para aumentar sua velocidade. Vamos desfazer o zoom um pouco. Vou me posicionar bem aqui. Então Offer Card, IMG assim. E vamos ver. Podemos, por exemplo, posicionar estes 60 aqui. E vamos ver 60 assim, o que é bom. E podemos, por exemplo, posicioná-los para serem 20 do topo. Como isso. E agora vamos lidar com os textos. Então vamos ver podemos caber t digitação por exemplo, ou sob. E só para que tenhamos alguns textos reais para trabalhar. E vamos ver, podemos usar algo como 36, negrito, alinhado à esquerda. E vamos usar a cor quase preta apenas para diferenciá-la de todos os outros. Adicionado para ouvir, posicione-o logo abaixo. E vamos ver para o espaçamento que podemos usar 20 de nossas estrelas, Controle D. E vamos ver abaixo, podemos usar Poppins 18 luz. Aqui está, mas apenas dê nesta cor cinza escuro. E vamos ver, talvez eu possa dar uma distância de dez. Não precisa ser demais. E deixe-me copiar e colar esse texto em manadas leiteiras. E o que vou fazer a seguir é criar um divisor. Então deixe-me copiar e colar rapidamente o meu divisor dentro daqui. Lá está ele. E este divisor, trezentos e quatrocentos e seis. Esta é a cor, este é o tamanho. E você pode criar isso dividido simplesmente usando a linha, clique em segurar, mudar, seu hábito e você pode mudar a cor aqui. Lá temos ele. Este é o nosso divisor. Agora vamos seguir em frente e controle D posição daqui e certifique-se de que é deixado alinhado 24 dias, por exemplo, que esta viagem dura. E vamos ver, Poppins 18 luz. Isso é bom. Vamos agora trazer o ícone de calendário para dentro. Como isso. Vamos ver. Talvez eu possa fazer com que seja 20 anos. Daqui. Eu sei disso. Vamos ter certeza de que estes estão centrados como R. e talvez 20 distância entre eles vai ser muito bom, que é bem aqui. Isso é ótimo. E o que posso fazer é chamar de dias e agrupá-lo e qualidade assim. E vamos movê-lo abaixo de uma classificação. E vamos mover o escritor. E há gada e o texto mover-se abaixo da classificação também. Então agora temos esse padrão organizacional. E o que eu vou fazer é arrastar e soltar mais alguns desses ícones. Então primeiro é o avião, depois o trem, depois o carro, e finalmente o ônibus. E você pode ver que todos eles têm estado indisponível e padrão. Vamos mantê-los no estado padrão por enquanto não disponíveis. É basicamente a mesma coisa como com as estrelas, apenas uma cor cinza para indicar que não está disponível para escolher. Vamos posicionar-nos aqui e certificar-nos de que estão todos alinhados corretamente. Precisamos fazer uma vez isso e vamos ver, distância entre eles pode ser algo como 28. Acho que vai funcionar muito bem. Então vamos organizá-los rapidamente dessa maneira. Primeiro, vamos alinhar este ícone aqui. E vamos posicionar isto para 20. Posicionado deve ser 20 também. Em seguida, finalmente exibindo ícone para ser 20 também. E eu posso organizá-los rapidamente assim. E muito Howard Control G, vou chamá-lo de transporte por isso. E movê-lo apenas aqui onde diz dias e quando usar um NANDA, fazer mais amplo. Certifique-se de que é 20 para baixo assim. E finalmente, eu vou usar isso mais uma vez, depender de como, vamos ver 18 luz, tudo bem. Controle D mais uma vez. E vamos ver, Poppins, 36 volts. Podemos usá-lo para isso. Então 1250, por exemplo, vamos ver Poppins 36 bold, o azul principal assim. E finalmente podemos movê-lo para ser, por exemplo, San para baixo. E isso pode ir 20 a partir daqui. E estamos 24 para baixo, estamos 20 para cima. E podemos sempre selecioná-los e organizá-los um pouco melhor, o que eu vou fazer agora. Então transporte, selecione estes para movê-los todo o caminho para baixo, que vai ser o nosso preço. Então aperte o Controle G. Meu pai, esta vai ser a nossa divisória. Dias de transporte, NOVO ou os tipos chamam este meio de meu pai. E vamos ver, podemos chamar isso de informação. Lá temos ele. Basicamente, este é o nosso padrão organizacional. Então o que eu vou fazer é usar, por exemplo, pilha para estes. Então eu posso incluir uma pilha como esta. Certifica-te que é este. Mas o que eu posso realmente fazer, vamos mudar isso. Eu posso usar uma pilha para esses como esse, só para que eu possa aumentar o espaçamento entre eles, diminuí-los quando começamos a trabalhar com redimensionamento responsivo. E vai ser muito mais simples de fazer. Então vamos chamar de meio. Porque este vai ser o nosso cartão padrão e vamos copiar e colar em todo o nosso design basicamente. Então vamos lidar com isso. E pelo preço, vamos deixar como está. Então vamos organizá-lo rapidamente e vamos agrupá-los. Isto vai ser, como dissemos, cartão de oferta. Como papai, temos ofertas de primeira e última hora e temos o título da seção bem aqui. Estamos em 40. Então o que podemos fazer é realmente usar a grade de repetição. Uma última coisa que eu esqueci é que nós vamos realmente adicionar a seta bem aqui, o fundo. Então vamos usar isso. Vamos chamá-lo de rho, Vg. Vamos posicioná-lo todo o caminho até aqui. Vamos movê-lo para aqui, por exemplo. Certifique-se de que está bem aqui. E vamos ver o tamanho, vamos com largura de 82 e altura de 98, por exemplo. Como isso. Coloque aqui e vamos nos livrar de nossa fronteira. Vamos ver, vamos dar a cor azul principal. E vamos ver, talvez possamos usar mesquita. Então Controle D. E vamos ver para a largura que podemos ir com dez, por exemplo. E certifique-se de que está bem aqui. E tudo isso vai fazer sentido em apenas um segundo. E vamos ver, eu vou simplificar e uma seta para a direita aqui é arrastar e soltar para dentro. Certifique-se de que está centrado. E eu vou simplesmente selecioná-los. Então vamos encontrar a minha seta para a direita. Aqui está bem aqui. Então temos isso, que vamos chamar de Máscara. E isso que vamos chamar, vamos ver, seta BG, o que é bom. Selecione todos eles, aperte Shift Control M. E apenas esta seção vai ser deixada, bem aqui. E podemos chamar-lhe flecha. Então este pode ser, por exemplo, nosso estado padrão e podemos mais tarde Incluído para ser nosso estado Horace, por exemplo, apenas para expandir esta seção para que possamos ver a seta inteira. E este pode ser o estado padrão, apenas para que possamos ver esta seção. Então agora, agora que o cartão de oferta está concluído, o que podemos fazer é usar a grade de repetição, por exemplo. Ou você pode simplesmente controlar D neste. Controlo D. Seleccione isto para três Controlo D e coloque-o aqui. Vou pausar o vídeo aqui e organizar. E agora que acabou. Então daqui até aqui, este vai ser o último. O que realmente vamos fazer é seguir em frente e eu vou adicionar esses botões. Então, para os fundos em si, Vamos usar nossa ferramenta de retângulo e vamos com três colunas de largura, por exemplo. E vamos ver, podemos chamá-lo, por exemplo, botão grande. E isso vai ser btn. E Biji, assim. Nós vamos usar cores, então a mesma configuração, então BTN ser grande cor. Então, sem qualquer borda, com a cor de preenchimento de pairar assim. E também vamos usar um texto e tudo mais. Primeiro, manutenção. Poppins 24 luz é o que podemos usar. Qual é este? Sim. E coloque-o para ter certeza que é azul. E para estes dois, nós vamos ter que ser em cinco como esse e certificar-se de que este texto é selecionado também. Isto vai ser assim. E isso vai ser cinza no começo. Tão cinza escuro. E então vamos seguir em frente e adicioná-lo para ser branco dentro de nossa cor pairar. Então Controle G. Vamos ver, e podemos chamá-lo de grande e btn. E vamos ver. Posso posicioná-lo logo abaixo destes três aqui. Então, no primeiro minuto, vamos ver, talvez possamos posicioná-lo para ser um T como este. Vamos ver. Na verdade, o que eu posso fazer é usar isso em um estado normal e dar-lhe a altura de um como esse. Mas certifique-se de que é todo o caminho para baixo assim. E eles são atingidos no Controle K e depois dão um estado de horror, como mortes. E isso é o que dissemos, 72. Na verdade, deve ser 70. Então vamos para o estado padrão. Então 70 que isso deve se alinhar e isso deve ser bem aqui. E certifique-se de que está lá. Ali. Nós o temos dentro do estado de horror. Aqui está bem aqui, simplesmente estendido até 70. E o aumento da obesidade neste vai ser, vamos ver, rebanho leiteiro branco. E podemos testá-lo rapidamente apertando este botão de pré-visualização aqui. E quando eu descer e pairar, você pode ver como nosso botão se parece. Na verdade, eu vou entrar e editar nesse botão de herói também, que é este. Hero Textos Herói botão estado padrão, sua realidade no estado padrão, vamos ter este ser na altura um para a cor. E simplesmente posicione-o para estar na borda inferior. E vamos criar um estado de horror como esse. Dentro do estado de horror, vamos estendê-lo para 70, aumentar a opacidade Dairy Herd. E agora se apertarmos a pré-visualização, e lá estamos nós. Quando nós pairamos, você pode ver que parece muito agradável e coerente. E também este botão funciona bem. Agora, finalmente, porque temos este segundo botão, que é o nosso grande botão, o que eu vou fazer é simplesmente segurar minha chave antiga, posicioná-lo aqui mesmo. Certifique-se de que é todo o caminho para a direita, como está aqui. E mova-o para cá. Eu também vou fazer isso. Então de última hora até aqui, primeiro minuto aqui, e então agrupe estes. Então, primeiro minuto. E eu vou agrupar todas essas colunas com limites como esse. E aí temos, nossa seção está completa. O que posso fazer agora é criar rapidamente uma seção de vídeo aqui. E para esta imagem de herói, eu não sei por que ela não entrou em nossas seções superiores, então vamos movê-la para dentro de lá. realidade deles. E eu posso realmente fazer uma cópia bater Control D posição e fora posicioná-lo aqui mesmo. Certifique-se de que estamos, vamos ver 150, por exemplo. Estamos dizendo como o que está bem aqui. E vamos ver, podemos chamar esta primeira seção de ofertas especiais porque nós temos isso. Vamos agrupar tudo, bater no Controle G. Chame de ofertas especiais como essa. E vamos chamar isso, por exemplo, vídeo, planos de fundo ou vídeo promocional, ainda melhor. Vídeo promocional. E vamos ver para a altura para ele, vamos com 600. Ainda estamos a 150. Vou localizar o ícone do jogo. ícone de jogo aqui está bem aqui. E eu vou realmente selecionar estes para garantir que o ícone Play está no centro. E se eu apertar a visualização mais uma vez muito rapidamente, o que você vai notar que realmente criou um efeito de pairar para o botão Exibir. Então eu simplesmente adicionei algum movimento para o ícone em si e exibir dentro. Eu fiz um pouco maior. E eu também critérios, você tem a opacidade de 0 para a cor de fundo. E em pairar, você tem a opacidade de eu acho, 50 ou 60 ou algo assim. Então, basicamente, essas são as coisas que você pode fazer com seus ícones apenas para apimentar as coisas um pouco. Podemos dar a isso um nome de vídeo promocional, por exemplo. E vamos agora passar para a próxima seção, que vai ser para o destino. Vou pausar o vídeo aqui e voltar para você no próximo vídeo porque você pode ver que há muito a ser feito aqui. E, mas mais uma vez, esses cartões são realmente semelhantes a esses cartões que acabamos de criar. Então talvez possamos usá-los e editá-los de tal forma que possamos organizá-los melhor e reutilizá-los aqui mesmo. Então, vemo-nos lá. 16. Como criar wireframes no Adobe XD 3: Tudo bem, vamos agora continuar de onde paramos. E como você pode notar, esta página está nos levando um monte de vídeos para completar porque é realmente enorme. E se eu te levar de volta às nossas gravações de papel, é claro que é a maior. Mas assim que obtivermos todos esses componentes principais, você vai notar não dentro, não apenas neste design, mas ao longo de seus projetos ou rolo, alguns desses componentes e elementos vão mudar, vão somar e você vai acabar reutilizando-os o tempo todo. Então é por isso que a primeira página sempre leva muito tempo para ser concluída, porque você vai então passar para todas essas outras páginas. Agora, como eu disse, vamos agora começar com esses destinos e vamos começar com esses cartões. Então, basicamente, vamos usar este e reutilizá-lo. Então, primeiro, vamos entrar aqui. Aperte o Controle C no controle do título da seção, reposicione-o aqui mesmo. E eu vou usar minha tecla Shift e movê-la até aqui. Eu deveria realmente fazer da próxima vez, usá-lo acima e, em seguida, movê-lo para baixo. Então, basicamente, nós vamos estar em 150, como com esses. E em vez de ofertas especiais, vamos escrever destinos europeus como sujeira. E eu vou simplesmente copiar e colar texto do meu design original assim. E lá temos. Este é o título da nossa seção mais uma vez. Agora, a primeira coisa que vamos fazer é copiar um desses cartões. Então aperte Control C, Control V Eden e simplesmente mova-o assim. Eu deveria fazer isso da primeira vez. Então agora vamos realmente posicioná-los. Então talvez devêssemos posicioná-lo em 80. Então 80 segure meu Alt ou Option. Você pode ver que está em 80, o que é bom. E agora o que eu vou fazer é realmente chamado este cartão de destino assim. E o que vou fazer é reduzi-lo até aqui. Certifique-se de que é 36, 6 como sujeira, e certifique-se de que tem, por exemplo, 690 de altura assim. Para a imagem, vamos ver, podemos chamar essa imagem de destino assim. E para isso, vejamos, 36 seis é bom, que para 60. Mas agora temos o mesmo problema mais uma vez. Então nós vamos ter que arredondar para cima uma borda superior esquerda e superior direita. Então, superior esquerdo, superior direito, cinco, e esses dois vamos manter em 0. Agora, finalmente, vamos usar todas as nossas informações e flechas também, então tudo isso, e certifique-se de movê-lo por aqui. E vamos ver. Agora eu posso realmente movê-lo 40 para baixo. Então, 1, 2, 3, 4 jazem mortos. E vamos ver, aqui é onde nosso destino atual termina, o que é bom. E basicamente é isso. A única coisa que vamos fazer é, por exemplo, mover tudo, excluindo a seta, então ela vai ficar onde está. Então mova tudo isso 10 pixels para a direita. Como isso. Só para nos darmos um pouco mais de espaçamento. Então o que estamos aqui, estamos em 43, então podemos arredondar um pouco. Então, três pixels acima, por exemplo, fonte 6, 8, 7 vai funcionar melhor para nós assim. Vamos ver, estamos em 40 e tudo bem. Aqui é 40 daqui. Então vamos ver, isso é 20, isso é 20, isso é 40, que é bom, você sabe, é como arredondar meus valores e para baixo para o ponto decimal porque é muito mais simples Dan, seguir em frente e criar mais. Então vamos chamá-lo de destino, assim. E vamos deixar todos eles na gala porque é muito mais simples e rápido para nós fazer. Como eu disse, você pode usar a grade de repetição. Eu não vou, eu vou simplesmente bater o Controle D. Controle D mais uma vez. Controle D. E você me conhece, vou mantê-los organizados assim. Vejamos, este é o nosso primeiro. Mova-se para o topo. Segundo, 1, terceiro, 1, quarto, 1, tudo bem. E nós vamos ter esse botão bem aqui. Tão grande botão, arraste e solte aqui. Posicione-o aqui. E vamos ver, talvez possamos ter mais largura a 80, como dívidas. E em vez dos primeiros minutos, vamos escrever em toda a Europa, viagens como essa. Vão certificar-se de que está centrado. Pule de volta. E vamos ter certeza de que ele está posicionado no centro, clique duas vezes em Controle C porque eu quero copiar este texto. Vá para a propriedade dos horrores e o Controle V lá dentro. Certifique-se de que isso está centrado também. E certifique-se de que está localizado no centro. Então agora funciona. Um de n você paira também. Então eu vou movê-lo para cá. E vamos chamar isso de controle GIL. Chama-se CTs. Porque estas vão ser cidades. E vamos nos certificar de que usaremos rolagem horizontal mais tarde, mas por enquanto vamos apenas mantê-lo como está. Finalmente, o que vou fazer é usar essas flechas mais uma vez. Então seta para a esquerda e seta para a direita, vamos ver. E talvez eles possam até saltar para dentro daqui. E vamos ver, lá estão eles. Mas vamos criá-los para serem com uma cor azul como esta. E só estou fazendo isso para nos poupar um pouco de tempo. Então arraste-os e solte-os aqui e certifique-se de que eles estão no centro. Então setas e botões grandes como este, laticínios são, então estamos a 80 ainda do topo. E basicamente essas flechas são exatamente as mesmas que essas de cima, mas hoje só tem essa cor azul dentro. E se eu clicar na minha seta para a esquerda, você pode ver no estado pairar, a única coisa que mudou é o tamanho da seta dentro e também a opacidade da cor deste círculo. Então é basicamente isso. E você pode obter essas setas do arquivo do projeto e ver como eu fiz isso. Mais uma vez, só estou fazendo isso para aumentar a velocidade com que eu crio esses vídeos. Controle G e vamos chamá-lo de destinos europeus. Então deixe-me realmente copiar e colar isso do meu documento original. Lá temos ele. Agora abaixo que vamos ter outra seção, então Controle D e certifique-se de que estamos em 150. Mais uma vez, clique duas vezes aqui, estenda isso, mova isso para baixo, e vamos chamar isso de África ensolarada. O meu pai. Vamos ver. Eu posso entrar assim e me deixar copiar o texto original e colá-lo aqui. Então, assinando a África, e como eu disse, vamos deixar esses destinos por enquanto. Porque queremos passar para a próxima seção da nossa página, que na verdade vai ser reservada a sua viagem de sonho. E se eu te levar aqui, você pode ver sua viagem de sonho. Esta é a citação livre de texto, imagem com o fundo de cor. Então vamos trabalhar nisso muito rapidamente. Como este. Então vamos começar com a imagem em si, por exemplo. Posso posicioná-lo bem ali. E vamos ver para a imagem, vamos usar algo como 930 com 560. E vamos ver, podemos ir sem qualquer borda e para a cor de preenchimento, podemos usar essa mesma cor mais uma vez. Então vamos ver. Podemos posicioná-lo para estar aqui e o Controle D mais uma vez. E vamos posicionar isso. Então isso vai ser azul, azul principal, de modo que fundo colorido. E para suas dimensões, vamos usar 930, largura 560. Então basicamente a mesma coisa. O que eu vou realmente fazer é posicionado em 40 pixels para baixo. Então Shift 1, 2, 3, 4, e vamos ver para 34 da direita para a esquerda também. E vamos dar-lhes nomes. Então esta vai ser uma viagem de sonho, IMG, e isso vai ser viagem de sonho e cor bg, só para que nossos desenvolvedores saibam o que é, controle G disciplina para ser nossa imagem. Mais o caminho todo para baixo. E agora vamos trabalhar no nosso texto. Então, para os nossos textos, vamos escrever em algo como livro, seu sonho, viajar conosco. E para o texto e tamanho, vamos com este. Vamos com a esquerda alinhada, e vamos com algo assim por enquanto. A posição é algures por aqui, Controle D. E vamos ver o que podemos usar. E abaixo, podemos usar Poppins luz 24 e cinza escuro assim. Então eu estou simplesmente copiando o texto do meu documento original e eu vou ter certeza que eu estou com 40 apenas para aumentar nossa velocidade um pouco. E finalmente, vamos usar esse botão grande mais uma vez, arrastar e soltar aqui, posicionar aqui mesmo. E vejamos, talvez possamos posicionar isso em 80, só para nos dar um pouco mais de espaço. E dentro vamos escrever e obter um cotações grátis e garantir que estamos em uma posição central C para estar no centro. Clique em corte de cabelo de laticínios, e vá para o estado de horror, centro de colar. Como esse centro, o hábito do laticínio central e o estado padrão. O que são certamente pode fazer é editar o meu componente principal, que é este. E posso entrar aqui e ter certeza de que meu texto está centralizado. Posso entrar no meu estado de horror, ter certeza de que meu texto está alinhado no centro. E, portanto, toda vez que eu copiar este componente, como eu fiz aqui, por exemplo, ele vai ser centralizado para que eu não tenha que refazê-lo o tempo todo. Então, lá temos. Isto vai ser um texto. Vejamos, por exemplo, posso ter certeza de que está no centro da nossa imagem assim. E apenas em cima e rebanhos leiteiros. Então o que podemos fazer é desagrupá-lo, chamá-lo de conteúdo, e então dar-lhe uma pilha como essa, apenas para que mais tarde, quando quisermos trocar de lugar com eles, por exemplo, sólido diga que eu quero mover esta imagem para aqui. Você pode ver como isso é fácil de fazer, ou ainda melhor se eu quiser usar uma pilha como esta ou para reposicioná-los assim, você pode ver como áreas simples para o nosso layout e isso vai nos ajudar imensamente. Mas vamos colocá-lo em outro grupo só para sabermos o que é. Reserve, sua viagem de sonho. E vamos dar a essa seção com o nome L, agora é mais uma. E o que vamos ter mais duas dessas seções. Mas primeiro, vamos ver onde estamos com o espaçamento. Então vamos ver. 150, reduza. E vou simplesmente usá-los para acertar o Controle D e posicioná-los assim. Posição, todos para baixo. Este primeiro será chamado de Ásia mística. E a segunda será chamada de “Beautiful Americas”. Então vamos realmente usar texto para o meu arquivo original. Encontre em. Então, como eu disse, isso significava ser uma Ásia mística. Permitam-me copiar rapidamente e o texto original. Cole isso aqui. E, finalmente, quatro. E isso vai se chamar “Lindas Américas “, assim. E deixe-me copiar e colar o texto original em sabão. A próxima coisa que vou fazer, que vai nos poupar muito tempo ou mais tarde, é ver que temos todas as viagens para a Europa. Então eu vou pular aqui, chamar de viagens africanas. Salte para o estado de horror das viagens africanas. E Depakote. E agora temos que fazer isso por tudo isso. Então, toda a Ásia. E eu sei que é tedioso, mas vai nos poupar muito tempo depois, quando começarmos a projetar. Porque muitos desses elementos vão realmente acabar parecendo todos prontos para a América. E vamos ver, talvez possamos adicionar um S ou todo o gotejamento americano. Ali. Nós o temos, nosso estado e seu rebanho leiteiro. E é basicamente isso para esta seção. E vamos ver, talvez possamos adicionar outra seção. Sim, vamos adicionar uma seção abaixo para este vídeo e depois vamos para o próximo. Então vamos adicionar esta seção, basicamente uma. Mais uma vez, vamos ter estas cartas e vamos ter estas flechas. Então, nossos principais destinos, e nós vamos ter outro texto abaixo. E então nós vamos realmente adicionar essas duas flechas, que nós já temos hoje, certo? Então vamos agora colocar um anúncio e uma dose. Então o que eu realmente vou fazer é clicar duas vezes dentro do Controle D, movê-lo para fora da posição do título da seção, está em algum lugar por aqui. E deixa-me mesmo saltar para dentro daqui. E vamos ver. Posso certificar-me de que está alinhado à esquerda. Vamos ver. Podemos escrever em algo como o nosso top, esta nação. E eu posso entrar e mudar esse texto, ter certeza que está alinhado à esquerda. Posicione-o à esquerda. Lá vai você. E posso saltar para dentro daqui. Use o Controle D com as setas e simplesmente mova-as para fora desta seção e certifique-se de que eles estão em um centro, por exemplo, aqui e movido para a direita, bem ali. Porque estes têm os pontos de toque, vou simplesmente empurrá-los para a borda. E ponto de toque é basicamente apenas um quadrado vazio para que você possa usar suas animações mais tarde. Então, o que você pode fazer é simplesmente arrastar uma área onde você deseja que seus usuários toquem e simplesmente ocultem o preenchimento e a borda. Por isso, é muito mais fácil do que tocar nele e depois tocar no ícone original. Então vamos ficar com esses dois e vamos seguir em frente. E eu vou realmente pegar um desses cartões. Então vamos usar este. Controle C, controle V. Certifique-se de movê-lo para baixo posição para aqui. Cartão de destino. Sim, isso funciona bem. Vamos com AT mais uma vez. Então, algo assim. E em vez de todas essas informações, o que eu realmente vou fazer é eu realmente vou arrastar isso para ter quatro colunas de largura e arrastar isso para ter quatro colunas de largura também. O que eu vou fazer é deixar este texto dentro, então eu vou remover a classificação. Vou mudar o nome para texto assim. E eu vou me certificar de que ambos estão centrados, alinhados assim. Vou me livrar dessa seção do meio e vou me livrar da flecha também. Eu vou deixar o preço como está, mas eu posso simplesmente posicioná-los em uma pilha, ter certeza que eles são assim. E vamos ver para estes, talvez eu devesse posicioná-los para estar em 40. Então, algo assim. Vamos ver. Eu posso ter certeza que eles estão em 40. Mais uma vez, este texto vai da esquerda. Este texto vai da esquerda. Então, o que quer que digita aqui vai ficar sempre no meio. Então vamos agora seguir em frente e posicioná-lo na posição central este texto no centro também. Certifique-se de que isso está corretamente no centro, assim ou você pode realmente posicioná-los lá fora. Clique aqui e depois aqui. E, em seguida, basta selecionar esses dois aperte Control G e certifique-se de que eles são chamados de texto mais uma vez. Então o que vou fazer é dar a isto o nome das Maldivas, por exemplo. E eu vou dar a isso um pouco mais de mensagens. E eu também vou ter certeza de que ele é fixo em tamanho. É muito mais fácil do que dimensionar esse texto e movê-lo para baixo e incluir todas essas informações adicionais. Então o que eu vou fazer é dar a estes os espaçamentos de 40. Como este. Certifique-se de que o meu texto é 40 do meu preço. Então eu vou ter certeza de que meu preço e todas as minhas informações são 40 do fundo, como está aqui. E, finalmente, eu vou ter certeza de que isso é um pouco mais estreito porque eu não preciso dessa altura sólida S5 e S6. Lá vai você. E agora vou usar essa informação. 234 laticínios Herat, é 40 do topo e vamos verificar rapidamente. Então nossa imagem vai ter 260 de largura, o que é bom. E o hábito de Terry, temos o nosso carro de destino, que é 80 do topo. Controle D, certifique-se de criar uma cópia Controle D para criar uma cópia, e lá temos ela. Então deixe-me organizar isso rapidamente. Vamos selecionar todos eles. Aperte o Controle G. Agora vamos chamá-lo de locais, por exemplo, assim. E lá temos. A única coisa que nos resta fazer é, obviamente, certificar-nos de que são 150. Igual a todos os outros. Longa matriz bem aqui. E eu também vou estender muito isso. E claramente você pode ver que esta é a razão pela qual este vídeo está realmente demorando tanto para criar é por causa de todas essas seções adicionais que estamos continuando adicionando, adicionando e estreitar parece. E basicamente, então é isso para este vídeo, vamos continuar de onde paramos neste, no anterior, no próximo vídeo. E esperamos que terminemos esta primeira página. 17. Como criar wireframes no Adobe XD 4: Tudo bem, vamos continuar agora. E a próxima seção que vamos criar são, na verdade, testemunhos. E se eu te levar aqui para os depoimentos, você pode vê-lo. Então o viajante ama, nos ama. E este é outro texto. Vamos criar esta seção com as setas, você possa ver claramente que as setas estão aparecendo mais uma vez. Então vamos primeiro as coisas, na verdade copiar esta seção na parte superior ou até mesmo variar porque seu centro alinhado, vamos usar esta seção. Controle C, Controle V, e posicione-o até aqui. Então, 150 locais, nós temos. Então eu estou realmente indo para copiar e colar este texto em apenas para manter as coisas agradáveis, suaves e rápidas. Aí está você. Então a primeira coisa que vamos fazer é criar esse cartão. Então vamos dar algumas dimensões e quando usar, vejamos, 10 8000. Acho que está tudo bem no centro. E vamos ver, talvez eu possa posicioná-lo para 80. E só para termos alguma consistência, vamos mantê-la em cinco. Vamos remover a fronteira, incluir uma sombra de 55, 10. E vamos ver, podemos usar cinco. Então basicamente as mesmas configurações que para todas essas outras cartas. Então é basicamente isso para isso. Vamos chamá-lo de cartão de testemunho. Meu pai Controle D imagem de depoimento. E vamos ver para a imagem que podemos dar-lhe uma largura de três 66. E vamos ver. Podemos, por exemplo, deixar o canto superior esquerdo e inferior esquerdo em cinco, e esses dois estarão em 0. Então, basicamente, só esses dois. E vamos dar uma cor apenas para que saibamos com o que estamos trabalhando. Lá temos ele. E vamos ver, vamos dar um nome a ele. Por exemplo, James Martin. Algum dia que se certifique de que está alinhado à esquerda. Então vamos ver 36 negrito, o que é bom. E vamos dar uma distância de 60, por exemplo, desta imagem. Meus dados basicamente alinhados a esta grande linha de Controle D. E eu obviamente vou me certificar de copiar e colar isso porque eu não quero aborrecê-lo isso vai ser, vamos ver, esta cor vai ser Poppins 18 deste. E vamos arrastar e posicionar e testemunhos reais para dentro para que eu não te aborreça com isso e vamos dar uma distância de 40, assim. E uma última coisa, eu vou para o Controle D mais uma vez e escrever o destino onde eles realmente trocaram. Então viajou para Oregon. E este vai ser o nosso azul principal. E vamos ver, por exemplo, 40 diretos daqui e ter certeza de que todos eles estão centrados na nossa imagem. Aí está você. Vamos agora organizá-los rapidamente assim e assim. E isto vai ser um texto. Posicione-o abaixo da nossa imagem. E vamos ver o cartão de testemunho. Eu fiz. E o que eu vou fazer é usar essas flechas mais uma vez. Então certifique-se de selecioná-los daqui, controle C, controle V, e posicioná-los até aqui em algum lugar. E vamos ver, eu posso alinhá-los com o meu cartão, na verdade, aqui mesmo. E vamos ver, eu posso realmente criar esses números. Sólido C. Por exemplo, eu esqueci de remover a sombra da minha imagem, e é por isso que está mostrando sombra dupla. Então vamos criar esse texto 0, 1 e cinza e 0 para, por exemplo, distorções 36, negrito é bom, apenas esta cor, certifique-se de que a mistura está alinhada à esquerda deve posicionar aqui. E, finalmente, vamos posicioná-lo para 80, por exemplo. Como este. Certifique-se de que nossas flechas estão no centro. Ou simplesmente use isso. Verifica a AT e lá temos. Vamos lidar com este texto um pouco mais tarde. Então nós não vamos lidar com isso agora, uma vez que você realmente chegar à parte de design, eu vou criar vários cartões e então nós podemos brincar com ele e editar. Então vamos ver, somos 80 de nossos ícones, o que é bom. O que é chamado de depoimentos. O meu pai. E vamos passar para a próxima seção, que vai ser, se eu te levar aqui, esta seção. Então nós vamos ter essas três cartas em uma espécie de grade Mansori. E nós vamos dar uma alma cruzeiros de bem-estar e esqui. Então, vamos lidar com os dados muito rapidamente. E vamos ver, podemos chamá-los, por exemplo, categorias de viagem ou algo assim. Então vamos ver para as categorias de viagem, Eu posso criar esses três cartões. Então vamos fazer isso agora. Como isso. Vamos dar, por exemplo, categoria de tropa. Corrente eu fiz. E vamos dar-lhe uma largura de seis colunas. 3, 4, 5, 6, que é isso, o que é bom. E vamos ver, para a altura, vamos a semana para 420, e vamos com cinco. E vamos usar todas essas mesmas configurações. Então 55, 10, e vamos dar-lhe a sombra de fundo, opacidade de cinco, o que é bom. Então eu vou ter certeza de uma imagem de cartão de categoria de viagem duplicada. Porque a imagem vai estar no topo assim. E também vamos adicionar uma sobreposição de cores mais tarde. Mas eu também posso adicionar agora, mas eu não vou fazer porque eu não vou incomodá-lo com todos esses detalhes. Vamos deixá-la para o projeto em si. Então vamos ver. O que podemos fazer aqui é copiar este texto. Então o controle de preço C, controle V, e certifique-se de que eu arrastá-lo até aqui. E vamos ver. O que podemos escrever dentro daqui está começando. De, e você pode obviamente ver as vantagens que e usando sob redimensionamento responsivo e pilha nos dá porque é muito mais simples de alinhar e adicionar e alterar todas essas mudanças. Então 2450 e vamos ver, eu posso, por exemplo, posicionar que não seja 60 do fundo. Vamos ver. Então, em algum lugar por aqui, digamos. Então 40 e 40, o que também é bom. Vamos movê-lo para cá. E vamos ver o que eu posso fazer é selecionar este texto, por exemplo, Controle C, Controle V. Certifique-se de que está em algum lugar por aqui, posicioná-lo logo acima do nosso preço. E vamos ver. Podemos ter certeza de que é branco lá. E vamos ver, podemos posicioná-lo para ser 20 e alinhá-lo. Certifique-se de que está alinhado à esquerda e alinhe-o à esquerda com o preço em si. E vamos ver, podemos usar algo como bem-estar e manadas leiteiras. E vamos dar a verdade. Mas você incorporar um chamá-lo de viagens de bem-estar. Vamos fazer o Controle D, ter certeza de que isso é para baixo. Vamos ver, talvez possamos dar um 60, algo assim. E vamos chamar este cruzeiros. Meu pai e dizer que queremos mudar isso para 240, por exemplo, assim. Lá temos ele. E vamos também fazer uma duplicata que vai para esta página e saltar bem aqui. E certifique-se de estendermos isso para o topo. E vamos ver por quanto. Por exemplo, podemos ter certeza de que é altura de, vejamos, 900. Como isso. Eles são Harut. E aqui estamos indo para escrever, esquiar. E a partir de algo menor como um 40 centímetros que eles são ouvidos e posição descer para baixo. Esqui. E isto vai ser Wellness. Isto ia ser cruzeiros, o que é bom. O que podemos fazer é agrupar essas três categorias de viagem. Certifica-te de que estamos a 150. Vamos ver 150 estamos, o que é bom. Então o que podemos fazer é criar outra seção título Controle V. Certifica-se de que, mais uma vez, estamos em 150, posicioná-lo todo o caminho para baixo. E vamos chamar isso de nossos parceiros. E eu fui copiar o texto, colá-lo. E o que eu realmente vou fazer é saltar para dentro e copiar e colar os logotipos do parceiro, que realmente usado, porque estes são apenas alguns logotipos fictícios que eu encontrei online. E, obviamente, você pode usar algo como Envato Elements para encontrar logotipos mais profissionais. Ou melhor ainda se você estiver trabalhando com o cliente real, basta pedir seus logotipos. O que eu fiz aqui é, você pode ver que eu usei a rolagem horizontal, que vai ser obviamente útil mais tarde quando começarmos a rolar entre todos eles. Então, basicamente, vamos chamar esta seção de nossos parceiros, por exemplo, hábitos lácteos. E o que eu vou fazer a seguir, se você se lembrar do nosso wireframe, nós temos outra seção que é exatamente a mesma seção que esta, apenas invertida. E vamos fazer exatamente isso. Então aperte o Controle D. Claro que é 150 e posicione-se todo o caminho para baixo. Então, o que vamos chamar a isto é uma viagem perfeita para qualquer um. E nós realmente vamos saltar para dentro do conteúdo, alterná-lo assim, e certificar-se de que ele está alinhado à esquerda assim. E agora podemos trabalhar nesse conteúdo adicional. Então deixe-me copiar e colar o texto dentro. Assim, quanto mais você obter uma cotação de consulta agora permanece o mesmo. Mas esta é basicamente a vantagem de usar isso. Mas o que eu quero fazer é adicionar rapidamente a imagem aqui e depois empurrar este 40 para a direita. Como este. E simplesmente, por exemplo, alinhe meu texto com minha linha de grade. Você pode vê-lo bem aqui. Então basicamente 16, três, só para que eu tenha um pouco mais de espaço para brincar, ter certeza que é 150, é. E todos os hábitos. A próxima coisa que vou criar é a taxa de câmbio. Mas eu, eu não vou realmente criá-lo. Vou copiar e colar, posicioná-lo no lugar. Certifique-se de que está bem aqui tão alinhado com a grade. E eu vou realmente explicar para vocês como eu o criei para que vocês possam brincar com ele se quiserem. Rebanho leiteiro. Então, basicamente, o texto vai ficar exatamente o mesmo que é. Então, aparecendo 36 em negrito, isto é 24 luz. Mas em termos disso, para as moedas, o que temos são euro, USD, grande libra esterlina, franco suíço, rublo e Japão para o iene. Então é isso que temos aqui e como eu os criei. Bem, simplesmente, se você fizer o check-in aqui, você pode ver que o euro é 120, trigo 80. Então o que eu posso fazer é pular fora disso. Então 120 com dois e eu posso remover a fronteira. E o que você pode fazer é pular aqui para seus plugins. E você tem um plugin chamado logotipos da interface do usuário. Você pode clicar nele. E o que você tem é linho country. Agora o que você precisa fazer é criar, vamos ver quantos. Então é simplesmente baseado em um único país. Mas se eu voltar, use a grade de repetição, por exemplo, crie tantos. Tantos assim. Acho que é algo como 294 ou algo assim. Então desagrupe a grade e tente agora você pode ver 126 formas. Então, basicamente, você pode usar qualquer um desses. E se eu mudar para o meu painel de camadas, você pode ver que esta é a bandeira da Mongólia. Se eu clicar neste aqui, esta é a Finlândia, México, esta é a Eslovénia e assim por diante. Então foi assim que eu criei esses. Não vou aborrecê-lo demais para que possamos aumentar a velocidade com que trabalhamos nisso. Então, no próximo vídeo, nós realmente vamos terminar nosso processo de criação porque nós temos este Q e a, que vai ser um pouco difícil de criar. Uma Ananda vai aborrecer-te com isso neste vídeo. Mas finalmente, depois daquele Q e A, a única coisa que nos resta criar, se verificarmos bem aqui. Então aqui está o P&A. Então temos o texto e o botão do lado. Estes vão ser um pouco complicados de criar. E também temos a assinatura e finalmente temos o rodapé na parte inferior. Vemo-nos no próximo vídeo. E no próximo vídeo vamos realmente terminar esta primeira página finalmente, e depois passar para a próxima página. 18. Como criar wireframes no Adobe XD 5: Tudo bem, vamos agora em frente e finalmente terminar o trabalho na nossa página inicial. E para fazer isso, como eu disse, deixe-me ampliar semanalmente. Nós temos este Q e uma seção, que vai ser um pouco complicado para nós criarmos, mas nada muito importante. Então o que eu vou fazer é realmente usar isso. Então eu vou apertar Controle C e copiar este texto porque ele está perfeitamente colocado para usar nesta seção. Vou posicioná-lo bem aqui, mais até lá embaixo. E para economizar um pouco mais de tempo, o que eu realmente vou fazer é copiar e colar no texto que eu já criei. Eu fiz. E certifique-se de que movi meu botão aqui para 80, por exemplo. E vamos dar uma olhada. Sim, 18 anos, Katie está bem e deixe assim. Então a parte complicada aqui é esta aqui, que vai ser perguntas e respostas. Então a primeira coisa que eu vou fazer é realmente usar minha ferramenta de texto clique aqui e diz algo como, minha tropa é protegida nacionalmente? E para isso, vamos usar algo como Bop é 36 negrito, mas eu realmente vou mudá-lo para 24 volts porque eu preciso de um texto um pouco menor para caber bem aqui. E eu vou adicioná-lo aos meus estilos de personagem e simplesmente mais isso aqui abaixo do meu 36. E meio que é bem organizado. O que eu também vou fazer é ter certeza que tem seis colunas de largura. Então 246, então 123456. Lá está ele. E eu também vou incluir esse ícone, que é este ícone tão próximo. E mais tarde, quando começarmos a animar, ele vai realmente se animar. Então ele vai ir de mais 2 perto de x. mas nós vamos lidar com isso um pouco mais tarde. E como você pode ver, nós apenas temos o estado padrão porque nós não precisamos e depois do estado. O que eu também vou usar é uma divisória. Então eu vou copiar e colar aqui mesmo. Mais uma vez, a largura é 702, cor é esse padrão. Um tamanho é um, e eu criei simplesmente usando esta ferramenta de alinhamento. Deixe-me voltar e eu vou arrastar e soltar todas as minhas camadas estão aqui. Então o que eu vou fazer é basicamente adicionar outro texto. Então vamos ver. O que eu posso fazer é usar como pop in slide para isso. E vamos ver a posição aqui. Fechar ícone pode ir por cima, então em algum lugar por aqui. E vamos ver, podemos usar, por exemplo, Poppins 24 e luzes, que é isso. Vou colar esse texto. E vejamos, por exemplo, posso posicioná-lo para 60. Então, assim. E vamos ver, eu posso, por exemplo. Posicione meu divisor para ser 60 também, assim. Agora vamos dar uma olhada. Está tudo bem, tudo parece ótimo. Analytes agora desagrupá-lo, aperte Controle G. E isso vai ser, é minha viagem protegida, por exemplo, assim. E o que eu vou fazer agora é basicamente usar esses mesmos elementos, mas basicamente movê-los um pouco. E eu vou fechá-los e vou mostrar-lhe mais tarde o que quero dizer. Primeiro as coisas, vamos criá-las. Então eu vou bater primeiro, ter certeza de que isso é até o topo como está aqui. Pressione Control D para duplicá-lo e certifique-se de que este é 60 bem como este. Aqui está. Mais, é abaixo e eu vou chamá-lo de política de cancelamento assim. E eu vou simplesmente copiar e colar o texto do meu design original. Vamos ver, só para eu não te aborrecer muito com isso. E mova este divisor para 60. Como isso. Eles são Harut. E eu vou duplicar esse, movê-lo para 60, assim. Vamos ver. O próximo é parceiros assim. Então deixe-me organizar rapidamente meu arquivo original porque, como eu disse, estou copiando e colando da dívida. Então vamos ver como você escolhe seus parceiros assim? E então vamos ver parceiros. Podemos copiar e colar o texto. E vamos mover este divisor em mais uma vez. Então 60 é, você pode ver que o Adobe XD é inteligente o suficiente para organizar o que você precisa aqui. Então vamos finalmente seguir em frente com outra seção. E isso vai ser chamado, Desculpe, como as viagens personalizadas funcionam? E finalmente, eu vou arrastar este aqui e finalmente mover isso para 60 também. Então, assim. E basicamente o que vamos fazer é organizá-los um pouco melhor. Primeiro, vou chamar isso de viagens de fantasia assim e saber que temos todas as nossas seções. A seção padrão será, todas essas respostas serão fechadas. Então temos que editar todos eles para nossa seção padrão. E eu vou criar um componente. E mais tarde nós vamos realmente seguir em frente e animado Há componente e criar estados adicionais uma vez que realmente começamos com o nosso design. Então, as primeiras coisas primeiro, eu realmente vou mover isso para a ferramenta de topo bem aqui. E posicionado no topo, por exemplo, certifique-se de que está no topo do meu texto, como está aqui, então certifique-se de que é 60. E finalmente, vou descer até a sua basicidade do texto em si. Em seguida, vou fazer isso por todos eles. Então vamos, deixa-me mostrar-te outro e depois vou pausar o vídeo. Então o divisor vai em cima e certifique-se de que ele vai bem aqui. Então, certifique-se de alinhá-lo com o seu texto e certifique-se de que você está 60 a partir daqui. Assim como este e, em seguida, mais baixo você basicamente você pode bater 0 em seu teclado para vezes. E, uh, deixe-me pausar o vídeo e fazer estes dois e então eu volto para você. Ou eu não vi que isso está completo. Temos que organizá-los um pouco melhor porque agora você pode ver que eles estão basicamente desconectados e eles apenas sentam aqui no espaço vazio. Então temos que organizá-los um pouco melhor. O que eu vou fazer é olhar para ele. Então alinhados em algum lugar por aqui. Certifique-se de que são 60 e faça o mesmo para esses dois outros também. Então certifique-se de que o nosso globo ocular terminou, a borda superior do texto vai com a borda inferior de nossas linhas estão bem aqui. Certifica-te de que são 60. E finalmente faça o mesmo para este último. Então, na verdade, eu acho que um guardado a primeira vez narrativas como essa. E lá estamos nós. Essa seção está completa. Então, o que realmente vamos fazer agora é que vamos colocá-lo na seção. Então viagens personalizadas. Então vamos chamá-lo de perguntas comuns, por exemplo, assim. E eu vou apertar Control K para criar um componente porque este vai ser o estado padrão do nosso componente. E mais tarde você vai ver quando nós os animarmos, o primeiro estado vai ser uma viagem financeira. E ele vai mostrar os divisores de texto indo para baixo e tudo vai ser animado. Isto vai girar. Então você vai ver que mais tarde quando nós realmente começar a animar nossos elementos são projetados e tudo o resto. Primeiro, vou agrupar isso e chamar de conteúdo. E então as perguntas do Khan vão ser o nome das nossas seções. Então, mais uma vez, perguntas comuns. E para o conteúdo, vou usar a pilha. E pilha vai ser assim porque mais tarde podemos querer movê-lo assim. Então é por isso que a pilha é realmente útil. Vamos posicioná-lo aqui, organizá-lo um pouco melhor. Funciona bem. Vamos ver onde estamos. Então, estamos muito longe. Então 150 hábitos de laticínios. E agora vamos criar o outro. Então Controle C, Controle V. E para esta seção, que será nosso boletim informativo, seção de boletim informativo. Como você pode ver, temos o texto, texto inferior, e-mail e subscrever. Então realmente muito simples de criar. E vamos primeiro as coisas primeira posição para ser 150. Vou copiar e colar o texto para acelerar um pouco as coisas. Então vamos copiar e colar no texto abaixo, sustentado um loop. Subscreva a nossa newsletter para obter as últimas ofertas e descontos. Mova isso para baixo, certifique-se que é 150, é. Então o que eu vou fazer é criar uma entrada. Então, para a entrada de texto, Vamos ver, eu posso usar minha ferramenta de retângulo. Vá a partir daqui. Em algum lugar por aqui. Certifique-se que é 76, como todos os outros botões. Ou 79 2 vai ser. Então vamos chamá-lo de entrada. VG vai conter a fronteira e não preencher nenhuma sombra. E vamos deixar as bordas retas assim. Mais largura todo o caminho para baixo. Use a ferramenta de texto e use algo como inserir seu endereço de e-mail. hábito deles. E para este, vamos ver o que podemos usar. Podemos usar 18 luzes, por exemplo. E vamos ver, eu posso criá-lo com essa cor, por exemplo. Certifique-se de que estes dois estão seleccionados. Certifique-se de que o texto de e-mail vai para o centro. Mas eu vou fazer é procurar por e-mail boletim informativo. Aqui está. Basta arrastar e soltar na posição. E eu vou me certificar de fechar isso e mudar sua cor para isso. Querida, como é, e eu acho que é um pouco pequeno. Então o que eu vou fazer é transformá-lo um pouco. Certifique-se de que é, por exemplo, 42 com 31. Nat funciona muito melhor com a nossa seção. Certifique-se de que está no centro. - É. E finalmente, o que eu vou fazer é ter certeza que são 40 desta busca. Então, 1, 2, 3, 4. E eu vou fazer o mesmo para mensagens de texto, então certifique-se que são 40 também. Lá temos ele. E agora vamos mover isso para baixo, desagrupá-lo, e vamos chamá-lo de entradas de texto. Eu dat. E precisaremos criar nosso botão. Então o que podemos fazer é ver. Talvez possamos usar esse conhecimento superior criar outro botão. Então vamos assim. Vamos com 70. Certifique-se de que ambos se alinham corretamente. E vamos ver o que podemos fazer. Podemos chamá-lo, por exemplo, botão Aplicar ou botão grande ou algo assim. Então aplique btn porque vai ser a ação que usa, então eu vou tomar neste caso para se inscrever. Então vamos ver para a largura 36, 6, altura de 70, o que é bom. Vou usar cinco por todo o lado. Vou remover a fronteira. Use este azul médio como nossa cor e finalmente acerte T e eu imprimir algo como assinar. Certifique-se de que está centrado, alinhado. E vamos ver o que posso usar. Por exemplo, Poppins 24 luzes, certifique-se de que é branco assim. E então eu vou selecionar estes para ter certeza de que eles estão no centro assim. Veja. E eu posso chamá-lo, por exemplo, botão Assinar. E imediatamente podemos criá-lo como um componente Control K, e podemos adicionar um estado de foco. E a única coisa que você está indo para realmente mudar dentro do estado de horror é a cor do botão para esta cor pairar como essa. Então, basicamente, uma vez que eles pairam , vai ficar assim. A próxima coisa, vou posicionar os dois no centro assim. E vamos ver, talvez eu possa ter certeza de que eles estão em 60, por exemplo, assim. E eu vou me certificar de chamar de entrada. Também certifique-se de que você está em uma pilha porque mais tarde podemos querer fazer algo assim. E, finalmente, podemos querer reduzir essa entrada de texto para algo assim que possamos alinhá-los corretamente no tamanho móvel, por exemplo. Então isso pode fazer isso muito mais facilmente. Certifique-se de que está no centro. E finalmente, a partir dos textos, podemos dar algo um pouco maior como 100. E podemos chamar esta seção de boletim assim. E finalmente, vamos agora passar para o rodapé e terminar esta primeira parte do nosso design. Então deixe-me primeiro estender isso até aqui e ter certeza de que são 150, é. Então, para o rodapé, eu vou arrastar um grande retângulo agradável, certeza que eu não tenho nenhuma borda. Então eu vou chamá-lo de imagem de rodapé. Eu, que eu vou ter certeza que é este cinza claro para que saibamos que é a imagem. Certifique-se de que está no centro, sem fronteira, tudo bem. E agora vamos dar algumas dimensões. Então, para a altura, vamos com o 632 que, e certifique-se de que estamos 150. Clique duas vezes aqui para que possamos fechar nossa página corretamente. Amplie todo o caminho, e simplesmente certifique-se de fechá-lo mais antigo como para XD ter esta opção para reduzir. Mas infelizmente não tem, então temos que lidar com isso. Agora. Vamos fazer o logotipo, arrastar e soltá-lo dentro. Certifique-se de que está no centro, assim. Posição em algum lugar por aqui. Vamos ver. Agora, eu posso basicamente usar todos esses elementos de topo. Então o que eu posso fazer é arrastar isso para baixo seções superiores, navegação primária, navegação principal. Então eu vou usar esse hit Controle C, Controle V. E eu vou ter certeza que é todo o caminho para baixo, ter certeza que está no centro assim. E agora o que posso fazer é simplesmente dividi-los em duas seções, por exemplo. Mas antes de o fazer, vamos aumentar o espaçamento para 100 entre eles e a música logo assim. E vamos ver. Isto pode ser um 24. Primeiro, vamos selecioná-los todos e certificar-nos de que eles estão alinhados à esquerda. Assim, em vez de alinhados à direita. Então eu vou para a posição e o destino aqui. E porque vamos ver, 1, 2, 3, 4, 5, 6, todos eles podem ter duas colunas de largura assim, assim. Isto pode ir bem aqui, isto pode ir bem aqui. E então, finalmente, isso sobre nós pode ir nos fins, bem aqui, e bem aqui. O que eu posso fazer então é dividi-los em esquerda e direita. E eu estou fazendo isso apenas para os propósitos responsivos. Então as escritas, e isso vai ser deixado assim. E eu posso chamá-lo de nav principal, por exemplo, e simplesmente usar o recurso de pilha apenas para que mais tarde eu possa fazer isso e redimensioná-los ainda mais se eu precisar. E eu acho que é muito mais simples fazer isso do que ficar atolado com todos esses outros elementos. Então vamos selecionar o logotipo, Vamos selecionar nossos itens, ter certeza que estamos em 100, então eu sei disso. Então, VR. E finalmente, deixe-me usar minha divisória mais uma vez. Vou colá-lo bem dentro daqui. Posicione-o logo abaixo da nossa navegação principal. E você mal pode vê-lo porque é esta cor cinza claro, mas vamos usar a cor branca apenas para que você possa vê-lo muito mais facilmente. E ele, Vamos posicioná-lo não em 100, mas sim em 80, por exemplo. Algo como isto. Acho que funciona bem. E finalmente, vou simplesmente copiar e colar meus textos Watson. Cole bem aqui. Certifique-se de que estou todo o caminho até aqui. E eu vou me certificar de que tudo é branco só para que seja visível. E podemos mudá-lo para um cinza claro um pouco mais tarde. Então vamos ver, talvez possamos posicionar para estar em 80 planadores, certificar-nos de que estamos alinhados à direita. E finalmente o que eu tenho são esses ícones de mídia social, que eu vou colocar em um bem aqui, ter certeza de que eu estou aqui. E vamos mudá-los para serem brancos também. Eu que movê-los e, finalmente, posicioná-los para estar bem aqui e alinhados com nossos textos para que possamos fazer isso, alinhá-los, ter certeza que estamos em 80 e estamos 76 agora. Então nós podemos realmente aumentar esses quatro pixels para baixo se quisermos. Então o que podemos fazer é clicar no Controle G chamado isso, comprar algumas informações só para que possamos tê-lo. E também podemos usar a pilha aqui. E o que eu também posso fazer é, por exemplo, agrupar todos esses elementos daqui até aqui. E chamá-lo, por exemplo, informações de rodapé. E eu posso colocá-los em uma pilha, vai colocá-los nesta pilha. E o que isso vai nos permitir fazer é basicamente estender ou colapsar como quisermos. E vai manter a consistência e vai ser muito mais rápido para nós editá-lo mais tarde. Finalmente, controle G para rodapé de qualidade de disciplina. E uma coisa que eu quero fazer antes de deixar você é bottoming para ícones, Control K, tecla Control e tecla Control para este, apenas para que eu possa adicioná-los como nossos ícones. E antes de irmos, vou arrastar e largar isso aqui. Onde estão os ícones e ver como ele ícone home é o nosso último. Vou dar um zoom só um pouquinho. Saltando aqui, Facebook, Instagram, YouTube, todos eles estão ali. Agora, eu vou posicioná-los para ser todo o caminho para baixo. Não sei por que XD faz isso. Porque eu colei para baixo. Eu não sei por que isso mostra que eles estão aqui, então isso realmente não importa. Posicionado e bem aqui garante que estamos a 80 a partir daqui também. Acho que eram 80. Vamos verificar isso. Então vamos ver deste para este estamos em 80, então use estes 38080. E, finalmente, com este ícone do YouTube AT bem organizado agora mais uma vez, então eles vão assim. Terry tem. Concluímos o design finalmente, para este wireframe Adobe XD. E você pode ver que a página é realmente muito grande. E saiba que antes de deixar vocês, eu só quero fazer uma prévia rápida e ver o que criamos até agora antes de passar para a próxima página, mais uma vez, aperte o ícone de reprodução, amplie isso. Então o que temos é que temos este bom efeito de pairar. Lá, nós temos. E a coisa que podemos fazer aqui é diminuir a opacidade deste quadro no fundo. Então deixe-me fazer isso agora. Então eu vou olhar para o botão Hero. Aqui está. E dentro da propriedade, o que eu posso fazer é simplesmente baixar isso para 0, por exemplo. Só para que seja muito mais agradável aos olhos. E agora, uma vez que eu passar o mouse, você não pode ver em que formas gerais de fundo ou parece muito melhor. Aplique filtros. E isso funciona porque, como eu disse, já os criei, então tudo bem. Você pode ver que isso funciona bem. Parece adorável. Isso funciona bem. E o espaçamento entre todas essas seções funciona muito bem. Então você pode ver que todos esses ícones estão pairando e mudando. Tudo parece bom. Temos alguns problemas com esta seta para a direita, mas vamos corrigi-lo mais tarde no estágio de design. Mas basicamente temos todos alinhados lindamente e funciona muito bem. Tudo isso, como você pode ver, seta para a direita simplesmente se recusa a brilhar. Isso parece ótimo. Isso funciona muito bem. Vamos animar isto mais tarde e, basicamente, vai expandir-se até aqui. Então é por isso que eu coloquei aqui no topo. Isso funciona bem. Então você pode ver que o horror está ótimo, e isso funciona muito bem também. Então basicamente é isso para este vídeo e esta primeira página, obviamente, essas próximas páginas serão muito menores em tamanho de conteúdo. Então, basicamente, eles vão ser muito mais rápidos para gravar e criar. Então eu vou vê-lo no próximo vídeo onde nós estamos realmente indo para trabalhar nesta tela de destino. E vamos seguir em frente a partir daí. 19. Como criar wireframes no Adobe XD 6: Ok, agora que a página inicial está terminada, vamos passar para esta página de doação. E antes de o fazermos, vamos verificar rapidamente o que temos aqui. Então temos a mesma navegação, a mesma configuração, mesma imagem de herói em casa, apenas cuspir o controle deslizante. Vai ser apenas uma imagem. E então temos um título de seção e então temos sobre atividades de localização e todos esses ícones diferentes. E finalmente, temos esta seção que vai nos levar um pouco de tempo. Temos este tempo atual 4, que vai ser bastante semelhante aos que já temos. E então essas seções na parte inferior são basicamente exatamente as mesmas que estão na tela inicial. E isso é o que eu estava vendo em um vídeo anterior. Vai levar muito tempo, especialmente com essas páginas mais longas, para chegar à mesma estrutura que você vai usar mais tarde em todas essas outras páginas. Mas uma vez que você fizer isso, vai melhorar sua velocidade e aumentar sua produtividade drasticamente. Então vamos rapidamente para cima. Clique aqui. Vou apertar o Controle D para duplicar este. Então eu vou movê-lo para baixo. Eu realmente não sei por que ele continua fazendo isso e colá-lo aqui. Sólidos mantêm Alt e posição a uma taxa aqui. Então vou chamá-lo de destino. Assim. Então a primeira coisa que vou fazer é me livrar disso e da navegação inferior. Então vamos abri-lo para cima e para baixo agora está indo para ir, setas estão indo para ir. E vamos mudar isso. E vamos chamá-la, por exemplo, de cidade do amor. E vamos mudar isto para Paris e explorar. Agora botão vai ficar o mesmo. E se uma pré-visualização de sucesso bem aqui, você vai notar que essas animações estão permanecendo as mesmas e o trabalho exatamente o mesmo. Então, como eu disse, vamos manter esta seção de heróis. Então o título da seção, vamos desagrupar isso. Ok, então para o título da seção, deixe-me ir rapidamente em frente e copiar meu texto do meu documento original. Então visite Paris. E vamos ser Steyn isso, então veja o que Paris tem para oferecer e onde você pode declarar. Então, a primeira coisa que eu vou fazer na verdade é ir em frente e excluir isso e fazer para que eu tenha muito mais espaço para brincar. E a próxima coisa que vamos fazer é criar essa seção Sobre. Então eu vou usar o meu clique Tiki aqui para digitar sobre Paris. E vamos ver o que podemos fazer. Deixei a linha, tudo bem. Vamos usar Poppins 36 bold, por exemplo. Acho que funciona bem. Agora vamos ver o que podemos fazer aqui. Vamos posicioná-lo em algum lugar em torno de 100, por exemplo. Então vamos ver onde estamos. 100 e fomos para a posição por um ano ou mais uma vez, certifique-se de que está alinhado à esquerda como está aqui. Então eu vou ter certeza que eu duplicar este e eu vou usar 24 irregulares. Então eu vou criar uma caixa de texto de tamanho fixo. Vou estender todo o caminho até aqui. E vamos ver talvez três ou quatro linhas, algo assim. E deixe-me ir em frente e rapidamente copiar e colar algumas informações sobre barreiras. E há duas coisas que você pode fazer nesses casos. Primeiro, você pode restringir sua caixa para a borda do texto até que ele desapareça e depois trazê-la de volta assim. Ou você pode usar a altura automática e ele vai ajustar automaticamente a altura de seus textos assim que você começar a alinhá-lo. Vai fazer isso, o que é fantástico. E ele vai basicamente agir como um parágrafo responsivo de texto. Então é por isso que eu realmente gosto disso. E essa função do Adobe XD, vamos manter auto altura, como eu disse, annelids agrupar isso, Vamos posicioná-lo no grupo. Saiba sobre Paris e ele tem o título de seção. E vamos mantê-lo assim. A primeira coisa que vou apresentar aqui é esta divisória. Então simplesmente use sua ferramenta de linha assim. E vamos ver, talvez possamos usar essa cor mais clara para a borda. Então, um cinza claro aqui está, porque nós não queremos que ele seja muito intrusivo, nós apenas queremos mantê-lo bastante simples e mínimo. Então deixe-me posicionar como 40 dos meus textos. Então 1234. Eu fiz. E eu vou chamar este divisor. Eu vou duplicá-lo e eu vou posicionar este dentro do meu título de seção, então dentro daqui. E eu vou trazer este próximo muito para algum lugar por aqui. Então o que eu vou fazer em seguida é duplicar este controle de texto D para baixo. Então por que eu duplicei isso? Desculpe por isso. Eu deveria ter duplicado sobre Paris assim. Então, mais com analistas externos ver, talvez possamos posicioná-lo 100 do nosso divisor. Está contando a partir deste texto, mas como eu disse, apenas a partir do divisor, então divisor está lá. E aqui vamos escrever em atividades para ter aqui assim. E então eu vou posicionar alguns desses ícones que eu mostrei antes. Então estes ícones, porque estes são os ícones de atividades. Então o que eu posso fazer é simplesmente pular aqui. Passeios turísticos, museus, River Cruises, ciclismo, comer fora. E este. Então eu vou simplesmente copiá-los. Pulando bem aqui e baixo caem. Então, a próxima coisa que eu vou fazer é para cada um deles, eu vou saltar para dentro e usar a versão de esboço. Então, como ele disse, eu fiz isso porque os ícones geralmente estão vindo em contorno ou na versão colorida. Então, o que você pode fazer se eles estão vindo em versão colorida, que eu recomendaria vocês para baixar, você sempre pode saltar para dentro e uma mais baixa para baixo a opacidade dessa cor. Crie componentes adicionais, data ou uma instância como eu fiz aqui. E então você pode mostrar ao seu cliente ou seus companheiros de equipe dose duas opções para que eles possam escolher. E também você pode usar esses dois em diferentes tipos de cenários. Então, para organizá-los melhor, o que eu vou fazer é criar um retângulo. Você pode usar a tecla de atalho ou rápido aqui. E então eu vou clicar e reposicionar este. Selecione meu retângulo, clique aqui, clique no retângulo, arraste-o aqui, clique neste aqui. Selecione ambos apenas para ter certeza de que eu estou no centro dessas duas colunas porque eu quero colunas para ocupar dois espaços cada. Então vamos selecionar este ícone assim. E então eu vou posicionar este aqui e arrastar este aqui para aqui, secar este aqui para aqui, alinhar e subir. Isso é bom. Lá, nós temos. Então é basicamente isso. Agora, vamos organizá-los. Vou movê-los para baixo, e vou empurrá-los um pouco para cima. Então vamos ver, talvez eu possa posicioná-los para 100. Então vamos alinhá-los assim. Vamos verificar 100. Isso é bom. Então a próxima coisa que vamos fazer é duplicar esta posição de texto aqui embaixo. E o que eu vou fazer é usar Poppins 24 luz por exemplo. Então, vamos ver os dados sobre, mas apenas usar e mortes texto. E deixe-me entrar, copiar e colar e o texto do meu documento original. E vejamos, talvez eu possa posicioná-lo para 40. Então, em algum lugar por aqui, eu acho que está tudo bem. Controle D e, em seguida, você pode digitar em museus. Certifique-se de que está no centro de controle D River Cruises, Control D rotas de ciclismo Control D e, finalmente, passeios culturais. Agora você pode falar com seus clientes e informá-los disso para cada destino que eles têm. Por exemplo, neste caso, neste site filho, para cada destino que eles têm, podemos, por exemplo, criar ícones adicionais. Então vamos 40 I isso, podemos criar ícones adicionais. Então este é totalmente eu caí ou Torre Eiffel em Paris porque este é barest funciona bem. Mas talvez você queira incluir algum tipo de ícones diferentes, então você pode falar com eles e ver se eles estão interessados em algo assim. Então o que eu vou fazer é selecionar esses dois e chamar esta pasta de turismo. Vou selecionar estas duas posições bem aqui. Museus fecham um pouco mais e para fora. E isso vai ser ciclismo. 18 nota. E finalmente este que é turistas culturais posição bem aqui. Agora eu vou pausar o vídeo e a única coisa que eu vou fazer é simplesmente encomendá-los para que o ícone vá para o topo. E agora que eu fiz isso, como você pode ver, o ícone está no topo, texto está na parte inferior. Vamos rapidamente em frente e organizar em dívida. Então, o que podemos chamar a esta seção são atividades. Então eu vou agrupar as atividades divisórias e todas essas pastas sólidas primeiro grupo Ds, chamá-los de atividades e eu vou agrupar tudo o resto e chamá-lo de atividades mais uma vez. Então agora vamos seguir em frente e eu vou duplicar esta seção porque se você se lembrar de um bem aqui, o que nós temos é isso, então isso, o que nós criamos com a ICANN parou as ofertas de Paris. Então é isso que você vai criar a seguir. Então, mais uma vez, use o título da seção. E não sei por que essa divisória entrou aqui. Vamos ver onde é sobre Paris, o ar. Vamos organizar essas coisas um pouco. Então deve estar dentro daqui. Então o título da seção deve estar no topo sobre Paris e, em seguida, dividir deve haver dentro assim. Então a seção intitulada Controle D mais uma vez. Vou posicioná-lo bem aqui. Vou me livrar de todas essas seções. Eu vou deixar apenas uma parte inferior porque nós vamos realmente usá-lo. Então daqui até aqui, e vejamos, talvez possamos nos livrar dos sócios. Vamos ver o que criamos aqui. Então temos isso, em seguida, taxas de câmbio. Então, sim, vamos nos livrar dos sócios e deixar essas seções na parte inferior, eles vão ser exatamente os mesmos que nós terminamos esses. Então a primeira coisa que vamos fazer na verdade é saltar aqui e posição é ser 150. Assim. Porque eu quero manter a mesma distância daqui até aqui, mas estes podem ficar em 100 como nós fizemos. Então eu posso agrupar tudo isso. Controle G e escrita visitam Paris. E este título de seção vai cair. Então o que você vai escrever aqui é ofertas top barris assim. Então eu vou saltar e colar neste texto, assim. Então vamos agrupar tudo isso, Controle G e chamá-lo de informação inferior. E também podemos escondê-lo ou simplesmente segurar um Derrick só que eu saiba mais tarde que posso trazê-lo até aqui. Então o que vamos fazer a seguir é criar essas categorias. Então essas opções que os usuários podem tomar antes de escolher seu hotel. Assim, para o preço, duração, atividades, excursões, arejamento e, finalmente, aplicar filtros onde está. Aqui está bem aqui. Então duração do preço, atividades, excursões, classificação e aplicar. Então vamos criá-los. E porque há seis deles, o que podemos fazer é simplesmente criar um botão. Duas colunas assim. E vamos ver o que podemos fazer com ele. Então a primeira coisa é, vamos ver, vamos começar pela dimensão. Então 22 Para uma largura 70, vamos deixar a cor branca, remover a borda, mas incluir a sombra de 55, 10 desta vez. Então, um bem maior. E depois o que costumávamos fazer e ter certeza que são cinco. Então vamos com isso e você mal pode ver, mas tudo bem. E vamos também ao redor dos cantos e descer para cinco, o que eu acho que é bom. E vamos trazê-lo para 100 a partir daqui, então mude e 10 vezes, o que é bom. Agora o que vou fazer a seguir é digitar o preço assim. Vou usar Poppins 18. Vou certificar-me de que está alinhado à esquerda e cinza claro na posição aqui e certificar-me de que está no centro. É rebanho leiteiro. E eu vou simplesmente localizar aquele cifrão. Então vamos ver o que está lá. É. Basta arrastar e soltar para dentro. Agora vamos ver. Talvez eu possa posicionar aquele cifrão bem aqui no centro. E também certifique-se de que são 40. E o preço é de 40 também. Assim. Então vamos ver, eu posso, por exemplo, chamar essa entrada BEG. Ou vamos ver, drop-down BG. Porque mais tarde, quando começarmos a projetar, vamos incluir alguns elementos diferentes. Faça isso, vai cair como eu mostrei no primeiro vídeo desta aula. Então vamos chamar de preço. Agora vamos em frente e criar algumas cópias. Controle D, posicione-o aqui, controle a posição e aqui. E antes de avançarmos, vamos renomeá-los. Então, o segundo vai ser a duração. A primeira vez vai ser atividades e duplicá-lo. Então este vai ser excursões. E, finalmente, neste aqui vai ser classificação. E para o final, simplesmente duplicá-lo e chamá-lo botão em Aplicar filtros de lítio lá ainda. Então, a próxima coisa que vou fazer é começar com meu botão porque é o mais simples. Vamos começar com isto. Aplique filtros assim. Removemos o ícone do dólar, BTN, BG, meu pai. Então isso vai ser azul principal. Vamos nos livrar das sombras. E simplesmente para o filtro de aplicação, vamos usar branco. Simplesmente se certifica que isso está no centro como está. E eu vou apertar Control K para criar um componente. Vou criar um estado de horror. A única coisa dentro do pairar, o que vai mudar é a cor do pairar em si, tão azul claro. E agora vamos em frente e trabalhar em tudo isso. Então, como dissemos que esta vai ser uma duração assim. E durante o tempo, vamos encontrá-lo. Vamos ver. Então vamos ver o calendário. Acho que é este. Vamos ver se está 0 na posição e bem aqui. E também vou me certificar de que mudou de cor para cinza claro. Vamos ver. Então 40. E vamos mudar isso para 40 também. Assim, o que é bom. Próximo, atividades. Vamos selecionar meu ícone de valor em dólar, localizado minhas atividades e arrastá-lo e soltá-lo dentro e ver 40. E isto é 35. Então, 1, 2, 3, 4, 5, rebanho leiteiro. E o próximo vai ser excursões. Localize o meu ícone e arraste-o e solte-o dentro. Vejamos, estamos a 40 daqui. Sim, e aqui estamos nós 31. Então agora estamos em 40. E finalmente, este vai ser o nosso 18. E para a escala de classificação, está localizado aquele ícone de estrela. Aqui está. E arraste e solte para dentro. Vou me certificar de que está no centro assim. E então eu vou ter certeza que é 40 que eu posso usar, e 33. Então vamos assim. E a última coisa que quero mudar é isto. Então eu estou indo apenas para usar e esboço D. E para o contorno, eu vou usar essa cor apenas para que nós vamos e ter alguma consistência com todos esses ícones diferentes. Dario. E agora vamos realmente nos certificar de organizar estes um pouco melhor em chamá-lo filtros assim. Então nós temos a seção superior, que é desculpa, título da seção, que é este. Temos filtros. Visite Paris é esta seção aqui. E finalmente, agora precisamos projetar esses cartões. Então vamos verificá-los. Você pode ver que temos a imagem bem aqui e nós temos a classificação, o nome. Temos endereço aqui, e então temos basicamente a mesma informação que tínhamos antes, vezes 4. Então vamos saltar para dentro e criar dívidas. Então o que podemos fazer é realmente usar disciplina. Então podemos copiar isso fora do registro. E arrastá-lo aqui, colado, posicionado aqui, e ver Talvez possamos, sim, acho que 100 é uma boa maneira de morrer. Então o que podemos fazer com ele é que eu posso clicar aqui e arrastá-lo. Como você pode ver, redimensionar responsivo se extingue, mas não muito bom. Então o que vou fazer é mudar o nome para cartão de hotel. E aqui chamou isso de cartão de hotel vg, porque uma vez que você exportá-lo mais tarde, obviamente vai ser um pouco diferente. Então nós podemos realmente selecionar a seta e o cartão do hotel e simplesmente dimensioná-lo. E aqueles dois vão basicamente permanecer os mesmos. A próxima coisa que a imagem vai ficar a mesma. Isto vai continuar o mesmo. O nome vai permanecer o mesmo, mas nós vamos realmente nos livrar deste, deste divisor. Então, segundo divisor, vamos removê-lo. E este divisor vai estender basicamente todo o caminho até aqui para que tenhamos espaço suficiente. Então, dois aqui. Então o que vamos fazer é, na verdade, eu posso me livrar dessa pilha. Então vamos ver, no meio desta pilha, vamos nos livrar dela. E o que eu vou fazer é realmente mover meu preço para algum lugar por aqui, por exemplo. Então eu me dou espaço suficiente quando este ícone se expande mais tarde, o que é bom. E o que vou fazer a seguir é mudar os dias. Então primeiro se livra deste grupo completamente. Agora vamos descer para o centro do nosso texto assim. Eu vou deixar os dias aqui e eu vou realmente usar o transporte selecionado daqui para aqui, por exemplo. E então use isso e aquilo para ter certeza de que está no centro. Livre-se do retângulo, e lá está. Então eu acho que isso funciona bem. Agora, a próxima coisa que eu vou usar meu divisor selecionado a partir daqui, certifique-se de que é 40. Como isso. Acho que isso é bom. E uma última coisa que eu vou fazer é realmente usar este texto para a altura automática. E vamos ver, eu vou copiar e colar o texto do meu documento original. E então eu vou estender minha altura para algum lugar por aqui. Acho que vai funcionar bem. E deixe-me envolver o texto para que tenhamos um pouco mais de espaço para brincar. E se verificarmos aqui, são 46 na verdade. Então vamos ver o que podemos fazer. Talvez possamos mover isso em quatro para baixo seis pixels. Então, assim, aqui temos 26 e vamos verificar aqui estamos em 24, o que é bom. Então, sim, podemos deixar assim. Na verdade. A última coisa que eu vou usar é este texto Controle D. Certifique-se de que está completamente fora e certifique-se de que é largura automática. Então o que eu vou fazer é saltar para o meu documento original, copiar e vamos ver, com base no endereço. Então eu vou voltar para a informação. E eu vou me certificar de que eu alinhá-lo com minhas estrelas assim. Então está no centro. E vamos ver, eu posso, por exemplo, ter certeza que são 60 a partir desta borda direita, algo assim. Por isso, vou certificar-me que está alinhado à direita. Então, quando uma mudança todos esses endereços mais tarde vai se expandir para a esquerda. E uma última coisa que queremos adicionar é nesse ícone de localização. Então este ícone pin, arraste e solte-o para aqui. Certifique-se de alterar a cor para isso. Então agora vamos ver, talvez eu possa ter certeza que são 20 daqui. Assim. Então a última coisa que vou fazer é agrupar estes para chamar de localização, posicioná-lo. Sim, vamos deixar na classificação, mas vou usar a pilha. Então, mais tarde, por exemplo, você pode imaginar que digamos que esta é a primeira rua na esquina 24. Você pode ver que o ícone fica a 20 pixels daqui, e é escala. Então, não importa o que você está digitando aqui, ele vai se expandir. Vai manter a distância do texto. Basicamente o mesmo que você colocou dentro da pilha bem aqui. Então foi assim que o definimos e eu acho que parece bom. Então vamos seguir em frente e duplicá-los. Então eu posso realmente mudar isso para o nome real do hotel assim. Aqui dentro. Podemos mudar isso para, por exemplo, 14 dias. Assim. Acho que funciona bem. E o que eu vou fazer é usar minha grade de repetição e criar quatro desses. E eu vou desagrupar a grade. Claro que este vem por cima. Este é o número 2, este é o número quatro e este é o número 3. Aí temos. Então, a última coisa que precisaremos nesta seção para terminá-la. Então vamos primeiro agrupar todas essas seções. Então vamos ver. Podemos, por exemplo, hotéis de qualidade, porque todos estes vão ser hotéis. Então, vamos selecionar tudo isso. Então nós temos seção intitulada filtros, cartões de hotel, Controle G. Eu vou chamá-lo de cartéis, e então simplesmente colocar tudo no grupo, na pilha. E vamos ver bem aqui. Na verdade, não vou. Vamos, vamos fazer isso mais tarde, quando chegarmos ao estado desejado, porque eu vou te mostrar o porquê. É ótimo se você tiver pilhas habilitadas. Assim, ele pode realmente ajudá-lo a alcançar seus esforços de design responsivo mais tarde. Então vamos ver 150, assim. E eu vou clicar com o botão direito Desagrupar isso ou você pode simplesmente deixá-lo em um grupo porque nós vamos copiar e colar mais tarde em todas essas outras páginas. Então eu vou arredondá-lo para cima. Mais uma vez, eu realmente odeio que XD não tem essa opção para arredondar para cima a borda inferior do seu design. Mas basicamente é isso. Terminamos esta página. Levou-nos um pouco menos do que den a página anterior, porque já temos todos esses elementos. O próximo vai nos levar um pouco mais porque precisamos criar todas essas seções roláveis. Mas como eu disse, porque todos esses elementos já foram criados, vai ser um pouco simples de criar, então não vai ser difícil. Mas este último, vai ser muito simples. Então é isso para este vídeo, e eu vou te ver no próximo. 20. Como criar wireframes no Adobe XD 7: Vamos agora passar para a próxima página que vai ser oferta selecionada. Mas antes de o fazermos, vamos verificar rapidamente. Então aqui temos, em vez da seção de heróis, vamos ter a seção branca. Então vamos mudar a cor geral de nossos itens de navegação para esta cor cinza claro que estamos usando. Vamos ter algumas imagens aqui com algumas setas, Nan, classificação, nome do hotel e site com a descrição. E, em seguida, abaixo nós vamos ter todas essas características diferentes do hotel que vão nos levar a maior quantidade de tempo. E nós vamos ter esta seção bem aqui que vai ficar quieta e isso não vai mudar. Vou mostrar isso e como vamos conseguir isso. E também vamos ter esta seção que vai ser exatamente a mesma que com esses anteriores. Então, para começar, eu vou simplesmente ter certeza de que eu uso minha tecla Alter Option, zoom e chamar esta oferta selecionada. Então eu vou pular aqui e me certificar que ele mude meu logotipo muito escuro. E então vamos ver, eu posso usar meu navegador principal e eu posso mudar esses itens para cinza escuro. Dê um salto aqui, mude tudo isso para cinza escuro. Clique aqui e, em seguida, exclua isso e clique aqui, exclua tudo isso. Então, basicamente, estamos agora com esta seção. Então ele vai ler muito mais, muito melhor na imagem. E depois antes. Então o que eu vou fazer é criar uma imagem. Então, para começar, eu vou simplesmente desenhar um r, que tem três colunas de largura. Vou clicar com o botão direito do mouse e colar a aparência apenas para mostrar como ele se parece na imagem original. Então o que temos aqui é 55, 10. Então, basicamente, a mesma sombra que fizemos com os EUA antes. Cinco é o raio do canto e o tamanho é 36, seis com 305. Então eu vou chamar essa imagem de carrossel número 1. Eu vou ter certeza de selecionar este controle C. E eu também vou ter certeza de chamá-lo para cima porque nós vamos usar imagens mais tarde no próprio processo de design. Então vamos ver. Podemos posicioná-lo para estar em algum lugar, sei lá, 100, por exemplo, ou 80. Talvez seja bom. Eu acho que AT, funciona bem, mas vamos fazê-lo em 100, só para nos dar um pouco mais de espaço de respiração entre a navegação e todas essas imagens diferentes. Então vamos ver, podemos criar, por exemplo, seis imagens diferentes. Então o que posso fazer é desagrupar este e chamá-los de imagens de carrossel. Então certifique-se que eu me mova abaixo da minha seção superior assim. E então eu vou fazer essas duplicatas. E a razão pela qual eu coloquei isso no grupo é simplesmente porque quando você está em um grupo, você pode colocar itens fora de sua prancheta para a placa base. Eles não vão se mover de todo. Eles vão ficar bem ali. Então número dois e este é o número três. Então este vai ser o número quatro. E você pode ver que eu estou simplesmente usando as mesmas distâncias entre todos eles que são usados. Então a largura da calha, se você se lembra, para a nossa prancheta, é de 60. E é isso que o Adobe XD usa como espaçamento. Então ele é usado mais um com 60 e que vai ser imagem no número 6, assim. Então, a próxima coisa que vamos precisar, essas duas flechas, sólidos, encontre-as. Eles estão em cada uma dessas seções. Então vamos saltar para dentro do controle C. E eu vou ter certeza de que eu os aprendi bem aqui. Então eu vou usar um, basicamente uma distância de pensar, anos sessenta vai funcionar muito bem. Então vamos ver. Estamos recebendo 60. Então, mais uma vez, por causa deste toque aponta simplesmente Níger seta para aqui. E vamos nos certificar de que posicionamos 60 por aqui. Certo? Que as imagens do carrossel são completadas assim. E, claro, para esta próxima seção, vamos basicamente copiar e colar essas outras seções. É por isso que eu copio esta página porque isso se encaixa perfeitamente com o que precisamos. Vou me livrar do título da seção. Aqui. Eu vou realmente digitar o nome do hotel. Eu vou entrar e copiar e colar as informações do meu hotel assim. E então eu vou me certificar de mover os dois logo acima do meu divisor. Ponha isso aí. E vamos chamar isso de hotel. Então, o que eu vou fazer é me livrar dessa seção inferior e colocá-lo lá fora. Então vamos ver. Talvez eu possa escrever isso aqui. Desagrupe este. Tenho a minha seção de hotel acima lá e posso ter certeza que são 100, então assim. E finalmente, o que eu vou fazer é também eu posso colocá-lo em uma pilha se eu quiser, mas eu não vou fazer isso. Não vou me incomodar com todos esses detalhes. Eu vou simplesmente usar isso e eu vou usar os textos de MyLocation. Então este e o texto, vamos ver, Controle D e Controle C. Controle D. Então eu vou usar esses dois. Você pode pressionar Control X se quiser. Para cortá-los fora desta seção. Pulando aqui para esta seção de controle V. E o que eu vou fazer é simplesmente usar minha classificação, posicioná-la aqui mesmo. E vamos ver, por exemplo, eu posso ter certeza que são 20 porque eu não acho que precisa ser muito maior. E certifique-se de que este texto está bem alinhado à nossa grade. Então eu vou ter certeza que isso está no centro. E eu vou simplesmente usar os textos do site fictício como então certifique-se de que está alinhado direito mais uma vez. Certifique-se que vai até aqui e Terry hábito que temos é sobre a seção de hotéis. Agora vou posicioná-lo em 100 assim. E aqui nós vamos ter seção de dívida que não vai se mover, mas esta seção vai mover sal. Vamos rapidamente nos livrar disso porque não vamos precisar disso. Vamos precisar de tudo isso. Então, vamos colocá-los lá dentro. Então daqui até aqui. Mas alguma informação. E mais uma coisa que eu vou fazer é simplesmente estender tudo até aqui, só para me dar um pouco mais de espaço aqui do que aqui, porque vamos precisar desse espaço. Então a primeira coisa que vou fazer é posicionar isto para ser 100 daqui. E dentro daqui, vou escrever em feições de hotel como essa. Então eu vou me livrar deste divisor ou melhor ainda, eu posso simplesmente movê-lo para baixo para algum lugar por aqui porque eu quero que esta seção seja mais estreita. Quero que tenha seis colunas de largura. Então 2, 4, 6, eu queria terminar aqui. Então eu estou realmente indo para pegar meu divisor, clique e segure a tecla Shift até aqui escrevendo para 1, 2, 3, 4, 5, 6. Sim, isso é bom. Simplesmente estendido até aqui. Agora, vamos usar esse divisor muito em todo o nosso design. Então, vamos avançar rapidamente e projetar esta seção. E, em seguida, no próximo vídeo eu vou voltar e projetar nesta seção direita porque vai ser bastante complicado às vezes. Então o que você vai fazer é realmente usar essas atividades, colocá-las em um clique de pilha bem aqui. E na verdade não, vamos deixá-los fora da pilha. Por agora. Vou usar estes três. Posicione-os aqui, certifiquem-se de que isto está no centro. E então o que eu vou fazer é usar esse truque de retângulo mais uma vez. Então use até aqui. Certifique-se de que tem duas colunas de largura como é. Seleccione o meu ciclismo. Em seguida, clique nele mais uma vez e use minha comida fora. Posicione-o aqui e use turistas culturais assim. Agora vou me livrar dele. E agora eu vou começar com a mudança de todos esses ícones. Então, a primeira coisa que vamos mudar na verdade é estacionamento gratuito. A próxima coisa é academia particular. O próximo é o porteiro. Então, porque estas são características do hotel, isso é o que você tem dentro do próprio hotel, não dentro do quarto. Essa informação vai vir um pouco mais abaixo porque você tem que escolher seus quartos. Então o que temos aqui é acesso Wi-Fi. Então vamos em frente e mudar tudo isso também. Então este vai ser estacionamento grátis e eu vou pausar o vídeo aqui, então eu não te incomodo em renomear todas as minhas pastas. Certo, agora que eu fiz isso, a última coisa que precisamos fazer é trocar esses ícones. Então eu preciso localizá-los aqui mesmo. Então eu tenho que encontrar meu latido livre. E vamos ver o que é aqui. Então simplesmente arraste e solte-o no lugar do ícone anterior e certifique-se de posicioná-lo no centro do texto. Use a versão do contorno e siga em frente. Este é o ginásio privado, por isso aqui está. Certifique-se de que está bem ali. E o que vou fazer é medir. Então eu aos 40, preciso ter 40 aqui. Goste disso e use a versão de contorno. Em seguida, mais 12 concierge, arraste e solte-o e veja 23, 40, use a versão esboço e Jumpin aqui mesmo. Estamos na piscina privada. Então está localizado aqui, está bem aqui. E esse é realmente o recurso elegante do Adobe XD. Eu realmente gosto de como eles fizeram isso, porque você pode facilmente alternar entre todos esses ícones diferentes a qualquer momento. Então, um serviço de quarto como esse. Use o contorno, certifique-se de que está no centro. E, finalmente, para o ícone Wi-Fi. Aqui está. Mas primeiro tenho que selecionar meu ícone aqui. Vamos verificar isso. Então ícone de passeios culturais, isso vai ser ícone de Wi-Fi como aquele. 40. Só tenha certeza que está no meio disso. Então, lá temos. Terminamos esta seção. Você pode ver como isso foi simples e fácil. Agora a última coisa que eu vou fazer é realmente certificar-me de que estes três na parte inferior estão 80 a partir do topo. Então vamos fazer isso agora. E se verificarmos, são 85. Agora são 80, o que é ótimo. E algo não se alinha muito bem com os sólidos do ícone de parada, confira isso rapidamente. Então eu vou fazer isso com meu estacionamento grátis. Por alguma razão, não se alinha. E é melhor corrigir isso agora, depois dentro do estágio de design, este concierge. Agora vamos, na verdade, enquanto estamos aqui, verificar esses de baixo. E há algumas pequenas alterações neles. Porque às vezes, quando você muda esses ícones vai alterar sua posição apenas um pouco. Então hábitos de laticínios, isso agora está completo e podemos colocar esses ícones e ver talvez 100, algo assim. Sim, vamos ver, podemos usar o divisor e posicioná-lo para 40. Como isso. Lá dentro nós o temos. Esta seção de recursos do hotel está feita. Assim como. Em seguida, vamos ter um tipo de quarto. Então eu vou duplicar esta seção, movê-la para baixo. Vamos ver, talvez eles possam posicionar para 100, assim. E eu vou chamá-lo como um conjunto, nossos próprios tipos. Agora eu vou me livrar dessas atividades, mas eu vou deixar a divisória dentro O que eu vou fazer é usar essas mesmas configurações para as imagens. Então, mais uma vez, duas colunas de largura, algo assim, então veríamos que podemos ter cinco sem sombra de borda, então 55, 10. E podemos usar essa mesma obesidade de 5%. E o que podemos chamar isso é, por exemplo, uma imagem do tipo OEM. Vou posicioná-lo bem aqui. E vamos ver para a distância que podemos ir com 40, por exemplo. E vamos rapidamente mudar seu nome para que você possa ver que é assim. E agora vamos em frente e adicionar alguns textos. Mas, por exemplo, posso até duplicar este, posicioná-lo até aqui. Vamos ver. Podemos usar, não sei por que estão todos fora de ordem. Vamos verificar aqui mesmo. Acho que está tudo bem. Então, talvez seja necessário mudá-lo para aqui também. Desculpe por isso, mas é melhor prevenir do que remediar. Eu digo, tudo bem. Ok. Então, vamos seguir em frente. E como eu disse, nós vamos ter um tipo de quarto. Então primeiro as coisas, vou usar Poppins 24 parafuso como este e ter certeza que é cinza escuro. Vamos ver 24. 24 negrito. Ok, e vamos ver cinza claro. Cinza escuro funciona bem. Vamos chamá-lo de pequeno. E vamos ver pela distância que podemos colocá-lo em 20. Então, aqui mesmo. E, em seguida, Controle D para duplicá-lo. E eu vou usar Poppins 18 para isso. E eu vou usar o mesmo cinza escuro para melhorar manter, copiar e colar este texto. Eu vou auto alturá-lo e posicioná-lo para aqui para que ele escale muito bem com este. Tão legal. Como se o pai quisesse privacidade e tudo bem. E posicionar isso para ser 20 também. Vamos organizá-lo rapidamente tão pequeno quando dois ou para baixo em todos os tipos. Então, aqui está. Isso vai ser pequeno em tudo. Controle D para duplicá-lo, posicionado aqui e a posição de Controle D está bem aqui. Esta segunda sala vai ser chamada de Presidente. Então este último mandato vai ser chamado de executivo. Assim como. Então, para o Presidente. E nós também vamos copiar e colar texto do meu design original. Não é como esta imagem de tempo de execução. Número dois, eu também sou renomeado para isso porque vai ser muito mais simples mais tarde quando você começar a exportá-los. E vou mostrar-lhe isso mais tarde, quando chegarmos à parte exportadora. Então executivo, mais uma vez, coisas que você pode fazer enquanto você está projetando, faça-as porque mais tarde eles vão se acumular muito rapidamente e Daniel vai ficar realmente preso. E não sei onde encontrar tempo para terminar todas essas tarefas. Então o que fazer aqui, bem aqui são os tipos de quarto. E agora acho que é a boa altura para guardar este ficheiro. Então aperte o Control S, ou como eu disse, se você o usou na nuvem, ele vai economizar automaticamente. Então, basicamente, uma vez que ele atinge Salvar, o que eu vou fazer é duplicar esta seção e movê-la para baixo para aqui. Posicione-o até aqui. E eu vou chamar este quarto são muitos t é como então mudar isso para um quarto. Sim. Assim como. A primeira coisa é o ar condicionado. E deixe-me ir rapidamente em frente e copiar e colar tudo isso. Isto vai ser cozinha. Portanto, estas são obviamente as coisas que estão localizadas na própria sala. TV a cabo. Isto vai ser uma fechadura de segurança. E finalmente temos microondas. Assim como. Então agora eu vou pausar o vídeo para que eu possa renomear minhas pastas. E agora que eu fiz isso, vamos rapidamente mudar todos esses ícones. Então, mais uma vez, vou selecioná-los e vamos ver o ar condicionado. É por isso que é sempre útil salvar todos esses ícones. Então você tem ar condicionado, eu posso arrastar e soltar contorno. Vamos ver, Estamos no 40 cozinha é o próximo, mas como sempre, Esqueci de selecioná-lo. Então cozinha. E lá vai você. É 40 linha direta lavadora de contornos e certifique-se de que está no centro com o nosso texto. Assim como. Obrigado Dawn é TV a cabo. Então TV que 40 delineou seguro para bloquear o contorno do corte de cabelo e certificar-se de que está nos dados centralizados. Então finalmente temos este ícone de microondas. Mais uma vez, certifique-se de que está no centro e eu vou realmente deixá-lo aqui. Você pode ver que é 62 palavras tipo de parece que está no centro destes, então eu vou apenas deixá-lo lá. Então, mais uma vez, apenas rapidamente globo ocular ele se certifica de que eles estão todos no centro de. Um desafio linhas grade, que eles são felizmente aqui. E eu vou fechar todos eles muito rapidamente. Assim como. E basicamente o mata, a próxima seção vai ser serviços disponíveis e basicamente vai ser apenas um texto básico. Então vamos ver o que podemos copiar. Podemos, por exemplo, copiar esta seção aqui. Então Controle D, médico em estão aqui e certifique-se de que você vá em frente e exclua a classificação, por exemplo. E neste, e eu vou posicioná-lo todo o caminho para baixo logo acima do nosso uniforme inferior. Certifique-se de que estamos em 100 como se fôssemos como sujeira. E quando chamar isso de serviços disponíveis como sujeira. E eu também vou me certificar de me livrar deste divisor. Vou usar um divisor daqui, posicionado aqui. Certifique-se de que eu colocá-lo em algum lugar por aqui, por exemplo, porque esta seção vai ser um pouco mais longo. Então o que vamos fazer aqui é, vamos ver. Podemos usar esse ícone. Primeiro, vamos duplicar isto. Vamos chamar de serviço de cama e café da manhã. Vamos ver Poppins 24 luz, mas eu vou mantê-lo largura automática para isso. E vamos ver, isso vai ser Poppins 18 para algum lugar por aqui. Vamos ver. Eu posso ficar com isso. Então, seis, eu posso posicionar aqui e simplesmente em torno meu texto onde estamos para ouvir função jantar acima, concierge, serviço é limitado lá como, então, finalmente , por exemplo, podemos mantê-lo em 20. Algo como isto. Acho que funciona bem. Mas em vez de Poppins 24, vou mudar para 18. Então, até que eu fiz cinza escuro. Agora vamos ver. Acho que funciona muito bem. Então, mais uma vez 20 e o que eu vou fazer aqui é incluir o ícone da dívida. Então vamos ver onde está. Se eu realmente trouxe, eu fiz ícone de café da manhã, eu vou trazê-lo aqui. A posição é bem aqui. E eu vou me certificar de que esses dois estão em 40 e fui para ter certeza de que isso está em 100. Meu texto só assim eu tinha espaço suficiente para brincar com ele? E uma última coisa que vou fazer é certificar-me de que isto é delineado. Então ícone de café da manhã, vamos chamar esta seção de serviços disponíveis. Então eu vou posicionar isso aqui e cama qualitativa e café da manhã assim. Vou fazer uma duplicata disso. Vou mover esta parte de baixo para baixo. E vamos ver. Por exemplo, posso ter certeza que é 40 a algo assim. E o que eu posso fazer é chamar isso de serviço tudo incluído. Como isso. Um pouco rápido, vá em frente e copie e cole meu texto na minha mesa. Finalmente, eu vou mover este divisor para baixo e quando para ter certeza que é 40 mais uma vez. E isso é basicamente para esta seção, basta renomear isso para serviço com tudo incluído assim. E posso fechar esta seção e seguir em frente. próximo é o plano de viagem, mas vou fazer uma pausa. Eu vou parar o vídeo aqui e podemos continuar no próximo vídeo só para que eu possa organizar as coisas um pouco melhor, mas nós não temos muito mais informações lá em baixo. O que temos é a viagem sem graça e temos excursões disponíveis. Temos localização, preço inclui política de cancelamento N. Então é isso para este vídeo, vamos agora passar para o próximo. 21. Como criar wireframes no Adobe XD 8: Vamos agora seguir em frente com a próxima seção, que vai ser viagem planejada. Então, vou acertar o Controle D neste caso. Certifica-te de que estou à mesma distância. Então, em posição 100 aqui em baixo e chamar este plano de viagem. Então dentro daqui, e vamos chamar de viagem. E isso vai ser basicamente um. Isto vai ser em D dois a 13, por exemplo. E vamos criar mais um dia 14. Antes de o fazermos, vou livrar-me destes dois ícones assim. Vou certificar-me de que estes estão a 40 um do outro assim. E eu vou fazer mais uma cópia final para aqui. Então 123. Este vai ser o 14º dia. Como isso. Então eu vou mover todos eles basicamente para estar a 100 a partir daqui. Como isso. E como eu disse, vai ser um. Este vai ser o dois, 13. E isso vai ser d 14 porque vamos apenas imaginar que este serviço durou 14 dias. Eu posso ir rapidamente em frente e copiar e colar alguns deste texto. E finalmente mais um. Eu fiz. Vamos agora ir em frente e organizá-los um pouco melhor. Então, mais uma vez, certifique-se de que isto é 40. E eu estou usando uma cópia real aqui só para que nós não percamos muito tempo mais tarde no projeto porque seção wireframing vai nos levar na verdade a maioria do tempo. Então, agora que isso está concluído, podemos passar para excursões disponíveis. E para a dívida, vamos precisar de uma seção com ícones. Então, aperte o Controle D. Eu vou chamá-lo de excursões disponíveis. Eu vou movê-lo todo o caminho até aqui e ter certeza que são 100. E isso vai ser museus, River Cruises, passeios culturais e passeios de balão. Isto vai ser exploração da cidade. E finalmente, acampamentos. E porque você já viu esse processo algumas vezes n Você vê o que eu fiz? Eu vou substituir todos esses ícones e eu vou renomear todas essas pastas e então eu vou voltar. Ok, então agora que eu fiz isso, podemos passar para a próxima seção. E a próxima seção vai ser bastante simples na verdade, ele vai apenas conter um mapa e uma localização de hotel. Mas antes disso, vamos verificar rapidamente e ver se nosso divisor está em 40 aqui. Veja, o que é ótimo. Então, excursão disponível, eu vou movê-la até aqui. E para este que eu vou usar realmente é esta seção. Tão bom Controle D, porque vou precisar de algumas coisas dele. Ou, na verdade, talvez até importa. Talvez possamos usar este porque já tem uma imagem. Sim, vamos fazer isso. Então seu celular um pouco mais de tempo. Ouça-a bem aqui. E o próximo vai ser chamado como um hotel de set. Alquilação. Vento para movê-lo até aqui. E se você está se perguntando como tudo isso vai funcionar, não se preocupe, quando terminarmos essas seções, eu vou explicar. Então, como dissemos, esta é a localização do hotel como o pai. E para isso, eu vou usar, vamos ver, Poppins 24, mas eu vou usar um regular. Vamos encontrar aqui à direita ou alfinetes 24, não luz. Na verdade. A luz é meio boa, então aplicada para usar sujeira. E o que eu vou fazer é voltar para aqui e remover e DCE 2. Vou colocar isso fora de um grupo e vou usá-los e movê-los para um holandês. Então, para o nosso mapa, eu vou usar 7, 9 para a semana 3, 0, 3. Então é bom e grande. E finalmente, eu vou colocar este texto para 40. Foi a divisória também. Em algum momento isto para as nossas mensagens, vou usar esta. Vou simplesmente esticá-lo até aqui, que funciona muito bem. E finalmente, eu vou simplesmente escrever em vermelho aqui sobre a localização. E para isso, o que você pode usar é um plugin. Então vamos ver o que eu tenho aqui. Tenho um plug-in chamado “mapas extravagantes”. E o que eu posso fazer é inserir alocações parecidas com Paris. Posso clicar aqui. E então uma vez que é falsa Paris, você pode estilizá-la. Então você pode escolher um mapa como este. Você pode escolher um mapa como este, e você pode ampliar o nível da cidade, algo assim e clicar em Aplicar mapa. Vai fazer a sua magia. E como você pode ver, ele vai localizar aquele. O problema é que você não pode ir. Então talvez você possa ampliar um pouco mais para se livrar do sinal de Paris e, em seguida, apertar aplicar mapa. E vai se livrar da própria Paris. Então eu posso entrar aqui e encontrar o meu mapa de localização. Aqui está. Vou arrastar e soltar aqui mesmo. E eu vou chamar essa imagem de mapa. Mapa de outono e BG, como quiser chamá-lo. E eu vou colocá-lo em um mapa de qualidade de grupo. E eu vou chamar esse texto, por exemplo. E só para manter as coisas organizadas um pouco melhor. E é basicamente isso. As próximas duas seções serão basicamente as mesmas. Eles vão ser tudo sobre o texto. Então, para economizar um pouco mais de tempo, Vamos copiá-los rapidamente e colá-los aqui mesmo. E vou arrastá-los até aqui só para não te aborrecer. Mas, basicamente, como você pode ver, essas seções são exatamente as mesmas e parecem exatamente as mesmas que todas essas outras. E vamos ver, isto não funciona para nós. Então vamos mudar isso para pop é 36 negrito. Então o preço inclui, vai ser quatro pinos, 36 volts. Então, assim. E vamos movê-lo para cima assim. Isto vai ser 36 ousado. Mova-se assim. E vamos ver. Podemos descer para 100 e descer para 100. E basicamente essas seções estão concluídas. Como você pode ver. O que eu vou fazer é agrupar todos eles. Então eu vou chamá-lo de informação de viagem, por exemplo, porque ele contém todas as informações sobre a nossa viagem. Então, sobre o nosso hotel, sobre onde estamos hospedados, sobre os tipos de quartos, sobre tudo isso. Então política de cancelamento e sobre o hotel e logo abaixo. Então, desde as características do hotel até a política de cancelamento atingiu o Controle G. E como eu disse, vou chamá-lo de informação de viagem. Agora o que eu vou fazer, e se você está se perguntando como nós vamos realmente diminuir e como tudo isso vai parecer. Na verdade, é muito fácil porque vamos usar grupos de rolagem no Adobe XD. Então vamos dizer que eu quero mantê-lo, por exemplo, de apenas colocá-lo em um grupo primeiro. Então, este rolo vertical. E você pode, claro, escolher onde você quer que ele termine no topo, eu só queria terminar em algum lugar por aqui, então logo acima do meu hotel características. E no fundo, eu queria acabar por aqui. Então eu quero que as pessoas vejam que eles são quartos e há esses nomes ou os quartos, mas eles também podem se mover mais para baixo. E você sempre pode ter certeza de que para estender isso ou para reduzi-lo ou fazer o que você quiser. Também sou renomeado para informações de viagem. Então, se eu apertar a pré-visualização onde eu ouço e arrastá-la para aqui, se nós rolarmos para baixo, você pode ver que ele fica bem ali. Então, vai ser uma boa e grande seção. E a próxima seção que realmente vamos projetar é esta seção aqui à direita. Então, esta seção, como você pode ver, os usuários podem facilmente rolar para baixo, navegar facilmente enquanto esta seção vai ficar quieta, Não vai mudar e vai melhorar as vendas e massivamente, porque eles não podem rolar além desta parte, eles tiveram que percorrer esta parte. Eles podem ver isso e, em seguida aumenta o potencial deles realmente reservar a viagem e realmente usar esse recurso mais em vez de simplesmente ignorá-lo Indo para a próxima página. Então o que eu vou fazer é mover esta informação de fundo porque agora nós terminamos com ela. E eu vou me mover por aqui, por exemplo, e cortar esta página para mais ou menos por aqui para que possamos nos aproximar mais de nós. Então vamos ver. Talvez possa mudar isto para algo assim. Veja onde estamos. Então estamos em 95, c 100. Agora estamos a 150. Então, agora, se eu apertar pré-visualização só para mostrar a vocês, Aqui está. Então o ainda pode ver esta seção aqui. E eles podem interagir com ele. Mas isso permanece o mesmo e isso fica parado. Então era para isso que estávamos projetando e era para isso que estávamos buscando. Uma conversão maior e uma estadia maior nessas seções e espero que muito mais inscrições e muito mais reservas. Então é isso para este vídeo. No próximo vídeo, vamos voltar e projetar esta seção que vai estar cheia de campos em formulários. Vai ser muito tedioso. Então eu vou deixá-lo para o próximo vídeo em vez de incluir neste. E vejo-te no próximo. 22. Como criar wireframes no Adobe XD 9: Vamos agora ir em frente e projetar esta barra lateral. E para fazer isso, vou usar meu retângulo e ter certeza que tenho seis colunas de largura, assim. Eu também vou usar essas mesmas configurações. Então, sem qualquer borda e quando usar sombra. Então zona 55, basicamente a mesma sombra. E eu vou me certificar de que estou 5% na opacidade. E eu vou chamá-lo de barra lateral BG. Eu também vou colocá-lo logo abaixo da minha informação de viagem, então ele fica bem aqui à direita. O que eu vou fazer é reciclar alguns elementos e usá-los ao redor. Então a primeira coisa que vou usar é aquele botão grande. E eu posso ir aqui mesmo, procurar por um grande BTN, arrastar e largar aqui mesmo. Vou fechar isto. E antes de seguir em frente, eu vou usar e preço. Então vamos ver se consigo pegar esse controle de preço C. Eu posso pular aqui mesmo. Controle V, eu posso posicioná-lo aqui, e eu posso pular dentro da minha pasta, arrastá-lo aqui mesmo. E vamos ver onde está esse botão grande aqui. E solte-o aqui mesmo. Vou escrever no livro agora, mudar isto para 1290. Antes de seguir em frente, vamos ver rapidamente se estamos no caminho certo. Nós somos. Vamos alterá-lo dentro do estado de horror também livro agora ir para o estado padrão. E esses dois eu vou ter certeza que estão no centro. Então, primeiro vamos alinhá-los no interior e vamos centralizar posicioná-los assim. Então a primeira coisa que vou mudar é a distância. Então vamos agrupá-los, ter certeza de que eles estão no centro. Botão grande. Certifique-se de que está no centro também. E para isso, vamos ter certeza que está 40 para baixo. Então vamos realmente selecionar esses dois rápido aqui, 1, 2, 3, 4. E então faça o mesmo por este. Assim como mortes. Então aqui vamos ter todos esses campos. E deixe-me mostrar-lhe isso muito rapidamente para que você possa ver bem aqui. Então temos check-in, check-out, o tipo errado, serviço para adultos, excursões e total. Basicamente, a mesma informação que criamos aqui. Assim, os usuários podem simplesmente selecionar a partir dessas ofertas aqui à esquerda. Eles podem selecionar e aplicar essas ofertas aqui à direita. Finalmente, isso vai atualizar o preço em tempo real. E então eles podem clicar no botão livro agora, e então eles podem passar para a próxima página, que vai ser a página de pagamento, e nós vamos projetar isso em seguida. Então a primeira coisa que vou usar é isso. Então eu vou usar esse preço, por exemplo, eu vou pular aqui mesmo. Clique em com base. E eu também vou posicionar isso para ser 40 acima, assim. E então eu vou movê-lo um pouco acima do meu preço. Então isso vai ser chamado de excursões. E eu estou me movendo de baixo para cima porque nós vamos mudar alguns elementos um pouco mais tarde. Então, as primeiras coisas primeiro para excursões de dívida, o que queremos fazer é chamar isso de entrada vg, por exemplo. Mas melhor ainda, Vamos deixá-lo no dropdown BG porque era assim. A primeira coisa que eu vou mudar é a largura de 500, oito, eu vou mudar que 70 vai ser para a altura. Então, isso é bom. E vamos simplesmente usar esse ícone de seta. Então vamos ver, seta para baixo, eu vou arrastar e soltar no lugar. Era isso? Não era. E arrastá-lo até aqui. Aqui está. E eu vou movê-lo para arejar por aqui porque eu vou remover este cifrão. Não vamos precisar dele. E vou certificar-me de que isto é 40. E vai dizer tudo incluído, por exemplo. Porque dívidas, por exemplo, a opção que os usuários escolheram. E então eu vou me certificar que esta flecha é 40 da direita. Então, 1, 2, 3, 4, assim. Mais uma vez, certifique-se de que todos eles estão no centro assim. Eles são. Em uma última coisa, eu vou selecionar a barra lateral E excursão, certifique-se de que eles estão no centro. E, finalmente, certifique-se de que eles são 40 daqui a seguir quando eu duplicar, então Controle D e posicione-o para cima. Como você pode ver, vai ser como aquele inseto antes de seguirmos em frente. O que eu preciso aqui acima é o texto em si. Então eu vou usar, por exemplo, que Poppins 24. Então eu vou duplicar. E vamos ver, certifique-se de que é, por exemplo, 20. E vou certificar-me de que se alinha com a minha opinião. Então o meu caiu no BG, eu vou posicionar isso aqui em inclusivo, apenas encomendou-os um pouco. Isto vai ser, como eu disse, Poppins 24. Então vamos derrubar isso. Poppins 24 luzes. Certifique-se de que ele se alinhe e certifique-se de que são 20, assim. E finalmente mistura, é esta cor cinza escuro que é tudo inclusivo. E nós vamos chamá-lo, desculpe, que devem ser excursões. E isto vai ser museus. Então excursões. Museus, o que é bom. Mais uma vez, só uma rápida verificação antes de seguirmos em frente. Isso é ótimo. Isto é 40, tudo bem. Agora o serviço é o que vai ser a seguir. Então, mais uma vez, certifique-se de que estamos em 40. Isto é serviço. E eu estou fazendo isso porque quando você duplicar o Adobe XD coloca no topo. Porque eu já sei o meu layout, eu já sei como ele se parece. Vou de baixo para cima. É muito mais simples assim. Então, serviço. E aqui vamos escrever em tudo incluído, assim. E então o Controle D. Vou colocá-lo bem aqui. Vai dizer “adultos”. E vamos escrever em dois assim. E para este, porque queremos torná-lo metade do tamanho deste, C sólido, podemos colocá-lo para ser, então suspenso BG, podemos colocá-lo de dois a quatro, por exemplo. Então é apenas metade da distância das entradas originais. Talvez eu possa fazer isso. Sem mudanças. Vamos tentar agora. Aí está, 1, 2, 3, 4. Lá temos ele. Então temos adultos para o Controle D. E eu vou mudar isso, chamá-lo de crianças. Isso vai ser adultos assim. Então isso vai ser crianças. E digamos um, por exemplo. Então, apenas uma criança está vindo junto com seus pais. Então vamos alinhá-lo com este e todos os seus alinhados com este aqui. Então temos a distância de 60. Então esta é a distância entre as nossas calhas. Como expliquei anteriormente. Mais uma vez, estamos a 40 aqui, então tudo bem. Eu vou duplicar este aqui, movê-lo para o topo assim. Posicione-o para mim. Claro, são 40 e isso vai ser tipo em casa assim. E um tipo de quarto vai ser presidente, por exemplo. Porque essas pessoas precisam de seu quarto porque estão viajando com crianças. Então, com uma criança, neste caso, o tipo de quarto. Finalmente, o que queremos incluir aqui é o ícone mais. Então vamos procurar por isso. Acho que se chama “perto”. Sim, é. Basta arrastar e soltá-lo aqui. Vou fechá-la. E então eu vou para localizado bem aqui. Então é um tipo de quarto aqui. Feche o ícone, coloque-o dentro e certifique-se de que ele se alinha com isso. Um texto tipo de cúpula como esse. E também certifique-se que vai todo o caminho para a direita, assim. Como eu disse, temos o ponto de escuta lá dentro. Ícone tão perto porque é girado, ele nos dá essa ilusão de que ele tem ponto de toque. Então, basicamente, as dívidas. Agora, a única coisa que nos resta fazer é criar essa reserva lá em cima. Então, para o check-in e check-out, finalmente, vamos criar dat. Então, para fazer isso, eu vou duplicar um desses. Então vamos usar nossos adultos, por exemplo, porque vamos ter dois. E vamos movê-lo para cima assim. Como assim. E vamos ver o que posso mudar. Por exemplo, posso excluir isso. Posso saltar para dentro disto. E eu vou mudar isso mais tarde e incluir animações diferentes dentro. Mas por enquanto. Vamos rapidamente incluído, então eu vou mudar a altura para 118, assim. E então eu vou movê-lo 40. E vamos ver, estamos a uma distância de 18 a partir do topo. Assim, talvez possamos até aumentar a dimensão deste fundo global. Ou podemos diminuir essas distâncias para 20, ou podemos brincar com isso um pouco mais tarde. Mas, por enquanto, vamos deixar e ver onde estamos. Então vamos chamar isso de checar meu DAT. E dentro do check-in, eu realmente vou me livrar da seta suspensa. Vou ligar para isto, verificá-lo. Controle D. Vou posicionar isso conhecido e, por exemplo, 22 de março. Então, quando ele quer abril 2021. E eu também vou mudar isso para cinza escuro apenas para diferenciá-los um pouco mais. E vamos dar-lhes uma distância de 20, por exemplo. E reserve-os assim. E certifique-se de que estamos 40 a partir desta borda, o que estamos. Então esse é o nosso check-in. E nós também temos que projetar um checkout. Então eu vou duplicá-lo rapidamente, certificar-se de que a nossa acenda assim. Isto vai ser verificado. E digamos que seja 28 de abril, por exemplo, e que seja um dia. Eu vou desenhar um calendário mais tarde e apenas mostrar rapidamente como eu fiz isso. Mas antes de o fazermos, vou rapidamente deixá-la aqui. Então, basicamente, isso determina quanto tempo as pessoas vão ficar aqui. Então, basicamente, quanto mais tempo as pessoas ficarem dentro do hotel, obviamente maior o preço será quatro para o quarto em si. Portanto, quando eles atualizarem essa informação, ele vai atualizar o preço abaixo e também a quantidade de pessoas, desculpe, o número de pessoas que estão vindo para esta sala vai determinar, obviamente, quantas camas eles precisam, tipos de quarto ou quão grande é a sala para começar? Excursões. Se eles não têm nenhuma excursão, Dan, eles podem escolher nenhuma, por exemplo, e o preço vai cair. Você entendeu a ideia oral. Então, uma última coisa que eu quero fazer é aumentar o tamanho deste BG barra lateral na verdade. Então o que vou fazer é usar todos os meus elementos. Coloque-os aqui, 1, 2, 3, 4 para baixo. E então eu vou alinhar minha barra lateral BG assim. Use o botão, abaixe 40 e depois leve isso para baixo. Porque eu não sei, como Matt, você pode usar o tapete se quiser. Agora, finalmente, isso é completado. Vou agrupar todos eles, chamá-lo de barra lateral. E, obviamente, vamos criar isso mais tarde para ser menus suspensos e para ser todo tipo de coisas diferentes. Mas, por enquanto, vamos deixar como disse, porque vamos mantê-lo como está. Uma última coisa que quero fazer é alinhar com isto. Então nós teríamos características do hotel. Então podemos alinhar isso com esta seção aqui, para que ambos fiquem exatamente como deveriam. Então, quando eu apertei a pré-visualização e quando ele salta bem aqui, você pode ver que isso vai ficar bem por aqui. E, obviamente, os desenvolvedores podem corrigi-lo no lugar. Então, imagine que é bem aqui e toda esta seção à esquerda vai rolar para baixo e os usuários podem, obviamente, ver todas essas informações antes de apertar livro agora botão. Então vamos fechar isso. E a seção que eu esqueci de trazer para dentro daqui é se eu te mostrar. Então vamos ter hotéis semelhantes, que não incluímos aqui dentro desta seção, dentro da armação de papel. A seção de hotel similar está basicamente lá. Só para lhe dar algumas outras opções porque esta agência está trabalhando com todos esses hotéis diferentes. Então, obviamente, eles não se importam. Assim que reservar alguma coisa. Eles, eles realmente, eles estão recebendo seu dinheiro de volta então eles realmente não se importam se seu livro este hotel ou qualquer outro hotel. Obviamente, quanto mais caro for o hotel, mais dinheiro eles receberão. Mas eles são creche obviamente para você reservar qualquer coisa em vez de nada. Então o que eu vou fazer aqui é pular bem aqui, apertar Controle C. Eu posso copiar esta seção. Deixe-me fechar todas essas coisas. Controle V, mova isso aqui. E eu vou ter certeza que isso é em 150. A partir deste. Vou colocá-lo logo abaixo da minha barra lateral. Vou datilografar hotéis semelhantes assim. E só sem dois T e apenas um. E vou copiar a minha mensagem. E o que vamos fazer aqui é basicamente usar os mesmos para o local. Então, os mesmos que aqui para essas cidades. E usaria o Controle C para copiar um desses. Saltando aqui, aperte o Controle V. E vamos ver, de lá em diante podemos passar para 100, por exemplo, assim. E este vai ser o Hotel. E obviamente, eu vou mudar isso um pouco porque eu só quero incluir três hotéis diferentes, por exemplo. Então vamos estender isso até aqui. E vamos ver que podemos, por exemplo, vamos ver, digamos que eu quero mudar esses dias. Então, hoje em dia, todo o caminho até aqui, por exemplo, para ser 10 pixels, porque todas essas informações acima são 10 pixels também. E então porque isso está em uma pilha, eu posso simplesmente estendê-lo para ser todo o caminho até aqui. E então eu posso mover meu divisor na parte inferior para ser a mesma largura que este e fazer o mesmo para os divisórias superiores ou algo assim. E obviamente porque eu vou precisar incluir um pouco mais de informação, o que eu vou fazer na verdade é conluir uma pilha para toda esta seção. Então vamos seguir em frente até aqui. E toda esta seção vai ser a pilha. Então o que eu vou fazer agora é realmente usar essa informação para o endereço. Então, neste, eu vou realmente copiá-lo. Então aperte o Controle C. E eu vou pular aqui dentro da minha pilha e colocá-lo bem aqui em cima. Então, Controle V, vou colocá-lo aqui. Vou certificar-me de que está alinhado à esquerda. E vamos ver, talvez eu possa fazer com que seja 20. E então coloque bem aqui e então certifique-se de que esses dois são 20, como você pode ver, porque estamos em uma pilha, tudo está escalando muito bem. Então eu vou me certificar de incluir essa informação e eu vou apenas ter certeza que é 18. Vou cortá-lo à altura automática e vou trazê-lo de volta para algum lugar por aqui. Então corta nossos textos muito bem aqui. E então eu vou derrubá-lo mais 10 pixels. Então, temos muito mais espaço aqui. Vou copiar o nome do hotel. 24 dias. Digamos que isto vai ser, na verdade, 12 dias assim. Agora, porque isso está completo, vamos aumentar o espaço como o papai. E, finalmente, vamos ver algo diferente. Então, em 1960, por exemplo, para este caso particular, e este vai ser o preço. Isso é tudo para o nosso hotel. Agora vamos fazer mais duas cópias. Então, o Controle D e este vai ser o Hotel. E finalmente hotel lá também. E podemos até dar-lhes nomes se quisermos resolver o hotel um, hotel dois e, finalmente, o hotel três. Todos eles controlam G. Isto vai ser hotéis. E finalmente, podemos agora trazer este fundo para dentro e trazê-lo para 150. Escuro como aqui. Feche nossa prancheta até a parte inferior do rodapé. Então, todo o caminho até aqui e ali nós temos. Estas informações nesta página e seções estão concluídas. Como você pode ver, às vezes você vai levar um pouco de tempo para completar. Às vezes vai ser muito mais simples de completar. Mas usando essas técnicas avançadas ou como um grupo de rolagem e como pontos de rolagem e uma largura, todos esses elementos fixos, como você pode ver, você vai ficar realmente bom página, especialmente se você já sabe como seu layout vai parecer, como tudo isso vai parecer com apenas algumas animações. Agora você pode ir em frente e compartilhar isso com seu cliente. E eles podem simplesmente percorrer com as teclas de seta no teclado para a esquerda e para a direita. E eles podem fornecer alguns primeiros comentários básicos sobre este layout, sobre essas cores, sobre a topografia, sobre os tamanhos, eles gostam do estilo desses ícones? Pouco como o estilo desses fundos, sombras e todos esses elementos adicionais que podem fornecer um feedback. E podem dizer-te Gostam ou não? Então é isso para este vídeo e esta página. Finalmente, no próximo vídeo, vamos passar para esta página final, que será nossa página de pagamento. E esperançosamente vamos completá-lo em um único vídeo. Então, vemo-nos lá. 23. Como criar frames no Adobe XD 10: Vamos agora mais uma extremidade projetar nossos pagamentos verdes, que será nossa tela final para o nosso wireframe. Vou simplesmente Hall minha tecla alt e arrastar para duplicá-la. Vou chamar de pagamento. E a primeira coisa que eu vou fazer é realmente excluir isso e excluir isso, excluir todas essas seções exceto a seção inferior. Então, o mesmo que fizemos para todas as nossas páginas e eu vou deixá-la aqui por enquanto. Em seguida, vou agrupá-lo até aqui, Controle G e chamá-lo de Watson doloroso. E deixe assim por enquanto. Agora, o que vamos fazer aqui consiste em três partes. Então os detalhes da viagem, que vai listar todos os detalhes que os usuários reservaram aqui. Vai consistir em pagamento. Quem são os usuários que poderão escolher seu método de pagamento. E finalmente, ele vai estar fora da conformação, que vai ser fora da tela de confirmação. E eles vão ser capazes de confirmar a sua escolha. Então a primeira coisa que vamos projetar é o cartão que vai conter ou toda essa informação. Então vamos ver. Podemos colocá-lo em algum lugar em torno de 100 pixels. Então basicamente o mesmo que a largura aqui. Então, apenas para manter a consistência, eu vou copiar e colar esta seção e, em seguida, alinhar esta afirmação. Então lá nós temos cerca de 100. E eu vou ter certeza e descarte morto. Então vamos chamar de pagamento. Pode ser G. Vou movê-lo para cá. E como vemos, é cerca de 100, tem 774 de altura assim. E podemos usar todas as mesmas informações. Então cinco sem sombra, 55, 10, finalmente 54, a opacidade. Em seguida, vou digitar três detalhes como esse. E eu vou mudá-lo aqui mesmo. Primeiro de tudo, eu vou escolher, vamos ver os detalhes da viagem. Posso usar Poppins 36 negrito, por exemplo, por isso. E eu vou alinhá-lo assim e assim. E então eu vou me mudar para 40 para baixo. Então, 1, 2, 3, 4. E eu também vou movê-lo para o a da esquerda para a direita. Então, 1, 2, 3, 4. Em seguida, vou duplicar. Posicione este aqui. Vou chamá-lo de pagamento assim. E porque temos 12 colunas, vamos ter certeza de que isso é assim. Então isso ocupa quatro colunas. Basicamente, este pagamento vai ocupar quatro colunas n. Finalmente, se duplicá-lo mais uma conformação. Isso vai levar quatro colunas também. Então 1, 2, 3 e 4. Agora embayment de confirmação, vamos baixá-lo para um cinza claro. E nós também vamos organizar essas coisas um pouco melhor assim e indo para mais frequentemente para baixo assim. Porque os detalhes da viagem é o que é selecionado, pagamento vai vir em seguida e, finalmente, confirmação. Então vamos usar as informações do nosso cartão de hotel. Então este, eu vou fechá-lo, posicioná-lo aqui mesmo. Certifica-te que está algures por aqui. E vamos ver, talvez eu possa movê-lo para ser vamos ver. Eu não sei. Estou pensando em algo como 80. Acho que vai ficar tudo bem. Então 12345678 destes, tudo bem. Vamos rapidamente alinhar algumas dessas informações e rapidamente nos livrar de algumas delas. Então temos o hotel, temos um destino, temos a classificação, temos a imagem do hotel. Deixe-me movê-lo para baixo assim. Mas aqui vamos mudar todos esses outros elementos. Então, primeiro de tudo, vamos incluir informações como pessoas, por exemplo, quantas pessoas estão dentro de um, quantas pessoas estão realmente reservando esta viagem? Então vamos rapidamente ir em frente e desagrupar essa informação. Então eu vou deixar isso, mas eu vou me livrar disso. Então, para DAT, vamos usar algo como dois adultos e uma criança. E eu também vou clicar aqui para que eu possa movê-lo assim. Ele poderia controlar D e vamos ver, talvez 20. Mas primeiro, vamos mudar para 24. E vamos ver, podemos tornar isso mais escuro, eu posso fazer isso mais leve, só para diferenciá-lo um pouco. E vamos ver, eu posso mover isso para 20. Por algumas razões. Às vezes me dá esses meio-pixels. Então eu não sei por que ele está fazendo isso. Então vamos ver. Posso mudar isso para ser tão cedo. Acho que vai funcionar bem. E então podemos mover essas seções para 40 para baixo. E então podemos mover isso para estar no centro. Vamos ver. Eu posso usar isso e eu posso escrever no total. E vamos dar uma olhada assim. Posso colocá-lo em uma pilha, posso usar uma pilha como esta. E posso ter certeza que está no meio. Então 26 e 40 daqui, 56 a partir daqui, vamos ver, 41, então é 40 para baixo, mas 27 daqui. Então vamos usar esta posição aqui. Vamos deixar esses ícones de onde eles estão. E podemos, por exemplo, nos livrar disso. E então pode colocar isso aqui, 1, 2, 3, 4, 5, 6. Então é basicamente o mesmo que este aqui. Vou simplesmente estender. dois aqui e esta é a beleza destes layouts porque eles são bastante simples de mudar. Eles são muito simples de contornar. E nós vamos digitar as pessoas bem aqui. E eu vou agrupar isso, chamá-lo de pessoas. Então eu vou usar o Controle D porque nós vamos ter quatro deles. Vamos alinhar uma coluna vazia e ir direto para aqui, por exemplo, e coletar isso. Acho que funciona bem. Então este é 18 a 24, o que é bom. Isso vai dizer o tipo errado. Então, não digita. E vai salvar o quarto do presidente. Então, basicamente, o que quer que tenhamos selecionado aqui na barra lateral, vamos simplesmente certificar-nos de confirmar aqui mesmo na tela do pagamento. Então eu vou duplicar isso, ter certeza que está bem aqui. Então eu tenho uma coluna vazia. Isto vai ser um serviço. E o serviço vai ser tudo incluído. Profundidade. E finalmente, vamos ter mais um aqui. E vamos chamar isso de excursões. Agora, eu só vou digitar. Sim. Mas você pode falar com seu cliente se eles quiserem excursões personalizadas aqui. Assim, por exemplo, museus, caminhadas, passeios turísticos. Então todas essas coisas com três pontos no final, por exemplo. Então deixe-o cortar aqui mesmo a 60 da direita. Eu só estou pensando que sim é o suficiente para esta seção. E eu acho que vai ficar muito bem. Então, agora que temos toda essa informação, o que eu vou fazer é basicamente usar isso. Então temos este cartão de hotel. Vou entrar aqui e usar meu botão grande e arrastar e soltar no lugar. Vou fechar isto, voltar para o meu painel de camadas e vou posicioná-lo aqui mesmo. Certifique-se de que está no centro assim. E vamos ver, talvez eu possa fazer isso e estar no 14 para baixo. Então vamos primeiro posicioná-lo assim. Então, 1, 2, 3, 4. O que temos aqui é 94, o que é basicamente bom. Talvez fosse melhor tê-lo a 100, mas acho que está tudo bem assim. Talvez possamos cortar para este cartão para seis pixels, talvez. Então vamos ver, estamos em 39 um. Então eu não sei. Talvez, mas estamos a 40. Então vamos deixar assim e não vamos brincar muito com isso porque esta é basicamente a seção de pagamento. Então vamos ter os detalhes do hotel e depois vamos ter as informações do cartão. Então vamos primeiro mudar este botão para continuar. Tomou o pagamento porque o pagamento é a tela, a seção de tela que vamos projetar em seguida. Então continue a pagar. E o que eu vou fazer é basicamente duplicar este botão. Vou agrupar estes dois. Vou chamar de detalhes do hotel. Como uma dívida. E basicamente o que vou fazer é esconder isso. E eu vou projetar as informações do cartão ou mais tarde. Mas antes de um escondê-lo, Eu só quero desenhar rapidamente Índias que são diretrizes. Porque eu basicamente quero manter a consistência de todos esses elementos e eu quero que todos esses elementos estejam neste estádio como um bem aqui. Então os detalhes do hotel, agora eu posso simplesmente escondê-los. E nós temos este botão que vai escrever em pagamento agora, por alguma razão está incomodando, então vamos conferir. Eu não sei porquê. Ele faz. Não sei por que não está aparecendo. Como podem ver, temos uma escuta aqui. Então, quando eu mudei para pairar, você pode ver que nada está mudando. Então deixe-me salvar rapidamente meu documento e voltar a ele porque obviamente há algum tipo de bug com um Adobe XD. Então, ou talvez tenha mudado isso. Então vamos dar uma olhada. Sim, estava a mudar este botão para não ser um insecto. Então vamos trazer isso para dentro e foi para escrever estão aqui, continuar para o pagamento. E vamos ver se ficou o mesmo aqui. Sim, ele fez. Então eu vou realmente baixar a opacidade mas escondê-la para que não mostre tudo aqui. Vou escrever em pagamento agora. Então agora é bom e às vezes essas coisas podem acontecer e você vai notar que mais tarde, uma vez que realmente chegamos aos estágios de animação do nosso design. Então vai ser muito complicado navegar pelo seu caminho, mas vamos simplesmente esconder todos esses elementos. Então você pode simplesmente imaginar que os usuários estão indo para clicar em pagamento. Eles virão para esta tela. Então deixe-me até indicar isso aqui. Com isto, vou esconder isto. Então aqui estamos na tela de pagamento. O que precisamos de tela independente são algumas opções de cartão. Então vamos usar isto. E quando usar este serviço, por exemplo, porque é agradável e branco. E vamos trazê-lo aqui. Controle V. Eu vou colocá-lo em algum lugar por aqui, são aproximadamente então nós temos quatro colunas de largura, por exemplo. Vamos fazer isto. Sim, temos quatro colunas de largura. Então eu vou dizer o nome da pasta atual. E agora vamos usar algum nome aleatório como JSON milhas e vai ser nome mais antigo Control D. Eu vou posicionar este aqui, mas antes de fazer, eu sou o que remover a seta suspensa porque nós não precisamos ele. E em vez de drop-down BG, isso vai ser entrada vg porque ele vai ser InputField no lugar. Como assim. E este vai ser o número do cartão. Então, número do cartão. E deixe-me rápido. Copie e cole o número do meu carro aqui. Então, aqui está. Agora eu vou duplicar este mais uma vez e ter certeza que eu estou em, vamos ver, eu acho que 40 vai ficar bem. Então vamos ver, sim, 40. Vamos manter a mesma consistência assim. Então esta vai ser a data de validade como essa e quando ser algo como 12 meses de 2025. Acho que isso é bom. Então as datas de validade, eu vou movê-lo para baixo abaixo do número do meu carro e, finalmente, mover este baixo para aqui. E este vai ser C VC, que é que afasta o seu código. Então código CVC. E vamos dar algum número aleatório como 1, 2, 3. E, finalmente, o que precisamos aqui é a opção para eles pagarem com PayPal, por exemplo. Então vamos saltar rapidamente para dentro, duplicar isso, e soltá-lo mais com bem aqui. E o que eu vou fazer é realmente usar todos eles. E ele simplesmente se certifica de que eles estão no centro assim. E, finalmente, morte dx, que nós duplicamos. Vou posicioná-lo direito. Portanto, agora eu vou ter certeza que é aos 18. É isso ou ou pagar com PayPal. Certifique-se de que está alinhado centralizado, certifique-se de que é assim. E eu vou ter certeza que está em jogo. É 62, mas realmente não importa porque podemos derrubá-lo mais tarde ou podemos aumentar o tamanho deles para que você possa fazer o que quiser, mas eu vou mantê-lo assim. Então vamos agrupar todos eles, derrubá-los. Vou chamar essa corrente para a formação assim. E agora o próximo passo para nós é a conformação. Então a conformação vai ser muito simples. Então ele vai ter apenas dois textos e ele vai ter um desses ícones, mas ele vai conter dois botões diferentes. Então, vou fazer uma cópia. Mais uma vez, certifiquem-se de trazer o meu botão para dentro. Trocar de lugares assim. Toque duas vezes para baixar para 0. Este vai ser o nosso grande botão e nós vamos realmente mudá-lo um pouco e fazer outra cópia. Mas antes disso, vamos lidar rapidamente com esta seção. Então, o que vou precisar é que a sua viagem foi marcada por SMS. Então está fracamente digitado. Então sua viagem foi reservada assim. E eu vou ter certeza que é 36 negrito. Em algum momento eu vou posicioná-lo no centro. E isso, e claro você pode imaginar que esta é a tela de confirmação. Então, no centro, sua viagem foi reservada Controle D. Vamos seguir em frente e vamos usar isso para ter 18 anos. Vou deixar uma mensagem, para ter certeza que está cinza. Agora vamos ver. O que eu posso fazer é, por exemplo, mistura que eles são 40. Assim, certifique-se de que está em um centro, este é em um centro como aquele. E vou certificar-me de que está algures por aqui. E vamos agora incluir rapidamente esse ícone. Então o ícone que eu quero usar é det de um globo. Então deixe-me encontrá-lo rapidamente aqui neste ícone do viajante do mundo. Então eu vou me posicionar e me atrever a ter certeza que está no centro. Use a versão do outline. E vamos ver, talvez eu possa estar em 80, em algum lugar por aqui. E vamos rapidamente configurar isso para aqui para que tenhamos espaço suficiente para que basicamente para esta seção, a única coisa que nos resta fazer é projetar esses botões. Então eu vou incluir um ícone dentro. Mas antes de o fazer, quero ter a certeza de mudar isto para alinhar à esquerda. Vou escrever e baixar recebido. Porque eles vão ser capazes de baixar receber obviamente. E eu vou digitar no ícone PDF, arraste e solte-o no lugar. Então eu vou posicioná-lo para estar dentro assim. Selecione-o e este lado e estes dois, o centro que está. Então, mais uma vez, eu vou realmente misturar para colocá-lo direito assim. Então 1234. Vamos ver se é grande o suficiente ou também. Vejamos, porque tudo isso é bom demais para estar no centro. Achamos que parece bem. Então o que eu vou fazer é acertar o Controle C para ambos, saltar para o meu estado de horror, Controle V, eu vou apagar o pagamento agora. E para estes dois, eu vou simplesmente virar e rebocar para branco assim. Então vamos voltar para o estado padrão. E eu vou realmente fazer uma cópia dele, posicioná-lo aqui mesmo. E nesta cópia vamos escrever-lhe de volta. Então os usuários vão ser capazes de saltar para trás deste botão, ícone de casa, droga e substituir neste. Como assim. Vou me certificar de que estou com 40, o que basicamente estou. Mas vamos verificar mais uma vez assim. E eu vou fechar isso. Selecione os dois e certifique-se de que estou no centro do meu botão. Como não são simplesmente colocá-los em um grupo e certificar-se de que eles estão no centro do grupo desse grupo, e simplesmente pressione Control C para copiá-los. Saltei para o estado de horror Controle V. Vou apagar esses dois, trazer esses dois e ter certeza que eles são brancos como. Então. Volte para o estado anterior padrão, nós temos isso. Então, a última coisa a fazer é agrupar essa informação para, apenas criada ao lado de nossos ícones e ao lado de nossos dois botões. Então, lá temos. Este vai ser o texto para uma organização mais fácil, obviamente sólidos e agrupá-los e chamar esta conformação assim. Eu vou baixá-lo para 0 e quando trazer isso de volta 100, o que é bom, e isso vai ser 0. Eu vou trazer isso de volta e trazer até 100 detalhes da viagem. Vou colocá-lo em preto e conformação para este cinza claro. A última coisa que quero fazer é agrupar tudo isso. Então vou chamar-lhe simplesmente pagamento. E vamos trazer as minhas informações de fundo. E vamos ver onde estamos. Então 1, 2, 3, 4 como trazendo para 150, o que é bom. E vamos fechar nosso, nosso quadro finalmente, para terminar esta página, obviamente, mais tarde, eu vou animar esta seção e eu vou me certificar de que essas animações são agradáveis e suaves como você viu no primeiro vídeo da introdução desta classe. Então, basicamente, vamos animar na guia entre todos esses estados diferentes. Mas, basicamente, isso é tudo para a seção de wireframing. Como eu disse, é um pouco longo para este projeto em particular, porque temos um monte desses elementos nesta página e nesta página. Então é por isso que demoramos tanto para criar isso. No próximo vídeo, nós realmente vamos começar com o design em si, vamos começar com e navegação porque é bastante complexo neste projeto, como é com todos esses outros elementos. Vamos começar com ele. E depois de terminarmos, vamos passar para o design de todas essas outras seções. E eu vou mostrar a vocês algumas interações realmente complexas e interessantes. Então, vemo-nos lá. 24. Adobe XD: O Adobe XD tem seus bugs aqui e ali, mas a equipe está trabalhando duro com as atualizações regulares. Estão fazendo atualizações no software todos os meses. Às vezes, essas atualizações são apenas algumas pequenas correções de bugs, mas às vezes há algumas atualizações importantes como você viu em, como você vai ver realmente no meio desta classe quando eles atualizaram a interface do usuário. Então nós fomos do menu de hambúrguer para o menu superior como a cabeça deles em um Mac por anos, basicamente, às vezes você vai ver algumas falhas e você vai vê-los ao longo desta aula. Mas entenda que algumas dessas falhas estão do meu lado , porque estou usando software de gravação em cima do Adobe XD. Estou usando duas janelas do Adobe XD ao mesmo tempo, ambos os arquivos são enormes. Estou usando processamento de áudio para este microfone. Por isso, é um processo naturalmente para o vídeo. Portanto, todas essas opções diferentes estão fazendo um esforço na minha máquina. E, portanto, você vai ver alguns insetos aqui e ali. Quando se trata de bugs em seu computador, você não deve ver nenhum bug desde que você atualize o Adobe XD regularmente. Portanto, onde quer que você veja que essas atualizações estão disponíveis, certifique-se de atualizá-lo e certifique-se de que ele está na versão mais recente. Portanto, há uma boa possibilidade e uma boa chance de que você está indo para evitar esses bugs. Mas como qualquer outro software lá fora e não apenas software Adobe ou qualquer outro software. Eles vão ser alguns insetos aqui e ali. Mas de qualquer forma, o Adobe XD, na minha opinião, ainda é uma das melhores ferramentas em sua classe, especialmente para o design UX, porque você tem todas essas opções diferentes em uma ferramenta. Então, poucos bugs aqui e ali não vão determinar a parte traseira do XD e todos os seus recursos e funcionalidades. Portanto, eu só queria que você soubesse que você vai ver alguns bugs aqui e ali, especialmente com salvamento, especialmente com entrada de dados e especialmente com textos. Por exemplo, você verá alguns bugs nesta classe com, por exemplo, uma mudança de nome de pasta ou estrutura de pasta renomeando, copiando aqui e ali. Mas eu tentei na edição corrigir todos esses erros. Então você não vai vê-los tanto quanto você provavelmente iria se você está aqui comigo e trabalhando comigo neste projeto diretamente. Também em alguns casos estou mudando de idéia. Então, como designers, estamos sempre tentando obter a melhor solução possível para o nosso projeto. E neste caso, estou mudando de idéia sobre o UX algumas vezes. Portanto, estou fazendo algumas mudanças e , portanto, XD está tentando me acompanhar o tempo todo. Portanto, apenas esteja ciente disso. Você não vai ver isso muito. Mas eu como designer e como criador de conteúdo, sempre tentar lutar pela perfeição, que é basicamente impossível, mas eu estou fazendo o meu melhor aqui para tornar isso tão fácil e agradável para vocês que estão assistindo como possível. Então você não vê esses bugs, você não vê essas falhas e você não vê essas poses e erros do Adobe XD. Então eu só queria que você soubesse. E com tudo isso dito, vamos voltar ao design e começar a criar design no Adobe XD. 25. Como criar navegação: Tudo bem, agora que os wireframes estão finalmente concluídos, vamos agora para o projeto. E antes de avançarmos para o design, há uma característica chave que temos que projetar, que é a navegação, porque este projeto vai ser um pouco complexo em termos de navegação e em termos de animações. Nada muito louco, mas requer um monte de trabalho adicional em vez apenas este navegações básicas que estão indo para levá-lo de página em página. E isso vai conter uma lista separada. Então, a primeira coisa a começar é que eu vou apenas usar esta página de herói bem aqui. E eu vou realmente copiá-lo e movê-lo para este lado. Então, para começar, vou simplesmente selecionar segurar minha tecla alt como fizemos até agora, e simplesmente duplicá-la e posicioná-la em algum lugar por aqui. Agora porque mais tarde vamos ter um design responsivo também. É por isso que o posiciono aqui. Então você pode imaginar que nós vamos ter esses três bem aqui. E se tivermos espaço suficiente para o design responsivo também, mais tarde, se você quiser, você pode projetar uma experiência móvel aqui mesmo para o aplicativo móvel, por exemplo, se isso é algo em que você está trabalhando. Mas como eu disse para este vídeo, vamos focar estritamente na navegação porque vai ser um pouco complexo. Então, página inicial, vou digitar o InDesign apenas para que saibamos que esse é o design real. Então o que nós faríamos primeiro é que eu vou abri-lo. E dentro da seção superior temos a imagem do herói. E posso começar trazendo imagens. E só para que tudo isso se destaca muito bem, é isso que eu realmente vou fazer. Então eu preparei todas essas imagens diferentes para a seção de heróis e assim por diante. Então o que eu tenho aqui é a primeira imagem. Então deixe-me arrastar e soltar dentro desta imagem. Então eu vou chamá-lo de imagem de herói número um, por exemplo. Vou duplicar duas vezes. Então este vai ser o número 1, este vai ser o número dois, e este vai ser o número três. Então eu vou baixar a opacidade deste primeiro, passar para o segundo e localizar minha segunda imagem. Então deixe-me ver. Esta é a minha segunda imagem, que é a imagem de Paris. Mas, infelizmente, fez a mesma coisa mais uma vez. Então, vamos esconder rapidamente este. E então arraste e solte minha imagem aqui para este segundo, assim. Então este vai ser o número 2. Uma maneira de diminuir do que a obesidade escondida n para o número três, que vai ser em Pequim. Vou arrastá-la e soltá-la bem aqui. Agora que temos todas as nossas imagens, vou mostrá-las assim. Então vamos ver, isto é Paris. Não sei por que faz isso, mas vamos trazer isso vai ser toda gada, Paris e Pequim. Então essas três imagens. Agora, antes de seguirmos em frente, o que eu preciso criar é algo como. Um borrão. Então o que eu vou fazer na verdade é duplicar uma dessas imagens, Controle D. E eu vou chamá-la de navegação primária e borrar assim. Então o que eu vou fazer é usar uma cor. Por exemplo, este, vamos ver. Então 300, 300, 300. Acho que funciona bem. E eu vou incluir o borrão de fundo n para a quantidade que eu vou usar 25. Aqui, vou usar 50. Então, um grande valor. E aqui vou eu usar 65 assim. E eu vou manter a obesidade em 100. Então você pode ver que estes estão se destacando muito bem. E o que vamos fazer agora é basicamente imagem de herói vai cair de qualquer maneira. Então nós vamos basicamente apenas mover este herói, Hero Textos e para baixo. Vamos mover flechas e para baixo, assim. E nós vamos ficar com apenas este borrão. Então, borrão de navegação primário. Agora, a próxima coisa que vamos fazer é trabalhar com o nosso equipamento de navegação principal. Então temos o nosso nav principal e abaixo dos destinos vamos criar um seletor. Então eu vou usar um retângulo e arrastar um grande retângulo como este. Então vai ser altura de dois. Não vai conter nenhuma borda e o preenchimento vai ser branco. Então, o objetivo é ser a mesma distância que este texto, assim. E eu vou simplesmente em torno das esquinas para ser cinco. Agora, em termos de distância, podemos fazer com que seja em 10, por exemplo. Então, mude e na cidade. Então ele vai mostrar que isso é o que é selecionado. Então vamos chamá-lo como pontos ou seletor, assim. Para colocá-lo bem aqui. E a próxima coisa que vamos fazer é realmente desagrupar isso. Então nós vamos ter tudo dentro de um grupo e nós vamos fazer o mesmo para navegação secundária em um pouco, mas vamos movê-lo rapidamente para aqui, por exemplo, apenas para mantê-lo fora do caminho. A próxima coisa que eu vou fazer é realmente criar esse ponto de tabulação para o nosso logotipo. Então, basta criar um retângulo como este ponto de toque inferior qualidade como esse. E eu vou remover a borda ou remover o preenchimento. E é basicamente isso. Você pode simplesmente arredondá-lo para o pixel mais próximo do seu logotipo para algo assim, por exemplo. Só para que ele se destaca e é facilmente aproveitável. Então vamos manter isso para o nosso logotipo e podemos chamá-lo de logotipo. Eu fiz. Então, para os nossos destinos, precisamos criar esses destinos. E vamos rapidamente tirar isso do caminho também porque ele vai se esconder. Então, para esses destinos, Vamos rapidamente duplicar este texto. Vou movê-lo para cá, certificar-me de que está alinhado à esquerda assim. E eu vou ter certeza que são 80 do meu seletor assim. E vamos ver, podemos chamar-lhe algo como destinos na Europa. Poppins 24 luz é bom, e vamos encontrar dat. Então Europa, aqui está, Europa destinos ícone. Vou posicioná-lo bem aqui. E eu vou ter certeza que está no centro, assim. Como isso. Vou fechá-la. E finalmente, eu posso trazê-lo para algo como 20, por exemplo. Vamos ver como isso se parece. Eu acho que funciona bem com o nosso logotipo, desculpe, com o nosso ícone. E agora vamos trazê-lo para aqui. E vamos ver se estamos em 80. Nós somos. E isso é ótimo. Portanto, o próximo passo para nós é realmente criar esses destinos na Europa. Então, vamos mover tudo para cá. Então este seletor de nação. Então, Europa, destinos ícone na Europa. Vamos copiar isto. Então, Controle D, vou posicioná-lo aqui mesmo. E esses destinos serão um pouco menores. Então um t. E, por exemplo, podemos colocá-los algo como 40 a partir daqui. Certifique-se de que eles estão alinhados à esquerda. Então o primeiro vai ser Paris. Porque vão ser seis deles. Eles vão para cada um ocupar duas colunas. Então você pode usar uma grade de repetição se você quiser, que eu realmente vou ser algo parecido com isso. Então 23456, o que é bom. E basicamente eu vou simplesmente aumentar o espaço para que eu possa colocá-los mais ou menos por aqui, em algum lugar ao redor da grade de desagrupar. Então o segundo vai ser Londres. Este vai ser Praga. O próximo vai ser por aí. E, finalmente, neste vai ser Barcelona. Não deixá-los alinhá-los rapidamente com a nossa rede. Então isto aqui, isto aqui, isto é bom e Barcelona está bem. E finalmente temos mais um e vamos colocá-lo bem aqui no centro deste texto stop como este. Certifique-se de que está alinhado à direita. E você vai digitar C. Tudo. Vou me certificar de que está sublinhado e vou posicioná-lo aqui mesmo porque os usuários vão ser capazes, quando eles tocar nos destinos, vai ver destinos na Europa e eles vão ser capazes de ver Tudo. Estou perdendo algo aqui. Então, sim, desaparecida Lisbon, que é um quatro para um. Então eu vou mover estes assim. E eu vou usar em casa meu pai, meu pai agora, eu tenho todos eles. Vamos pausar rapidamente o vídeo para que eu possa organizá-los. E agora que eu fiz, vamos seguir em frente. Então o que quero dizer aqui é a divisória. Então você pode usar um desses. Oregon simplesmente faça assim. E para o divisor em si. Vamos usar a cor do branco e vamos reduzir a obesidade para 40, por exemplo. Vamos chamá-lo de divisor. Encontre isso. E vamos trazê-lo. E eu vou usar algo como 20 daqui. Assim como se isto funcionasse bem. E a última coisa que eu vou fazer é usar este C todos os textos e criado como um componente, então tecla Control. E a única coisa que vou incluir é pairar. E para a cor do pairar, vou usar a dívida flutuante e azul. Então, basicamente, as pessoas vão ser capazes de pairar. Então veja tudo, chame assim. E basicamente eu vou agrupá-lo e destinos de qualidade, Europa em algum momento isso e eu tenho que incluir isso em mais amplo assim. E lá nós temos isso em basicamente debitado para os destinos. Vou pausar o vídeo e copiar e colar todos esses outros destinos dentro. E agora que eu fiz sujeira, você pode ver como todos eles se parecem. Então temos a Europa, a Ásia, a África e as Américas bem aqui. Então eu vou agrupar todos eles, acertar o Controle G e chamá-los de destinos. Eu vou pegar 0 duas vezes. E finalmente vou escondê-lo para não corromper com mais nada que estamos tentando fazer. Então, basicamente, vamos agora passar para o próximo, que vai ser inverno. Obviamente isso vai se mover e encolher para caber o texto de inverno. Então, para o inverno em si, vamos ter algumas ilustrações. Então eu vou copiar um do design original e quando colocá-lo aqui. Então temos ilustração de inverno. Eu vou me mudar para a direita aqui, e eu vou me certificar de que é um componente local daqui. Então clique com o botão direito do mouse E o que vou fazer é usar o texto. Então eu vou usar a ferramenta de texto aqui, digitando com a gente e explorar para ter certeza que está alinhado à esquerda assim. E vai ser Poppins luz 18 como ele é, mas eu vou simplesmente usar esta cor azul média. E eu vou colocá-lo bem aqui ao lado da nossa ilustração. Então vamos ver 2, 4, 6. Como isso. Acho que está tudo bem. E finalmente eu posso colocá-lo, por exemplo, algo assim. Acho que funciona bem. Controle D e eu podemos digitar algo como maravilhas de inverno. E eu posso pular aqui e usar 120 brancos americanos, mais com e para baixo. Então 12, por exemplo, eu acho que vai funcionar muito bem. E finalmente, eu vou basicamente copiar e colar este texto do meu documento original. Vamos movê-lo rapidamente para a borda do nosso texto para pensar que vai ficar tudo bem. Vamos ver aqui reduzir 37. Então eu vou ficar com os 20 IDAT. E finalmente, eu também vou usar esse botão grande que é usado pesquisa. Botão grande, arraste e solte. Lá, nós temos. Botão grande, movê-lo todo o caminho para baixo neste texto. Posicione-o aqui e certifique-se de que estamos 40 desta vez, assim. E dentro do estado padrão neste aqui, o que vamos fazer na verdade é que eu vou esconder essa cor. Para esta fronteira. Vou simplesmente selecionar esta cor. E aqui eu vou digitar Explorer agora. E eu vou pular aqui, fechar isso e usar minha cor branca assim. Então eu vou selecioná-lo e ir para o meu estado de horror. E em vez disso, por alguma razão, continua incomodando. Então vamos excluir este salto, explorar agora dívidas voltar para o estado padrão. E você pode ver como isso se parece. Então, basicamente, o que vou fazer agora é organizar isso. Então eu vou chamá-lo de texto. Vou agrupar estes dois. Vai ser inverno, assim. E o que eu realmente vou fazer é selecioná-los, clicar aqui e ter certeza de que eles estão no centro e hábitos lácteos. Então isso é o que vai ser mostrado quando os usuários clicarem no inverno. Então eu vou clicar duas vezes na minha tecla 0 e eu vou pausar o vídeo aqui para que eu possa caber em cruzeiros finais individuais de bem-estar porque esses são exatamente as mesmas configurações e exatamente o mesmo visual e sensação do inverno. Então, não vou aborrecê-lo com isso. Ok, então agora que eu fiz isso, deixe-me mostrar rapidamente o que eu criei. Então você viu esses destinos e viu como isso se parece. Então deixe-me escondê-lo rapidamente. O próximo é o inverno. Então eu criei isso e você viu isso. Então vamos agora para o Wellness. Basicamente, exatamente a mesma coisa, apenas ilustração diferente. E isso diz para começar a relaxar em vez de livro agora, por exemplo. Então você pode simplesmente mudar aqueles em torno daqueles chamados para ações. Temos viagens individuais, então Gary e ir onde a parte segue você e você pode entrar em contato conosco aqui para granel sua viagem individual. E finalmente, temos esses cruzeiros. Então, se eu trouxer isso de volta, teremos exóticos acumulados de livros de cruzeiros. Finalmente, o que precisamos é entrar em contato conosco para esta seção Sobre Nós. Então o que eu vou fazer é duplicar esta seção de texto aqui. Vou esconder isto. Vou posicionar isso logo abaixo sobre nós. Então o que eu vou fazer é realmente esconder todos eles. Então eles não interferem na minha digitação. Eu posso digitar facilmente. Então vamos realmente copiar e colar o texto do meu design original porque ele vai encontrar muito mais simples para nós terminá-lo dessa maneira. Eu que, e finalmente, vamos em frente e copiar o texto. E aqui vamos dizer entre em contato conosco. Meu pai, entendido, vá para o estado do horror. E você pode ver basicamente é apenas copiar e colar entre todos os seus estados. Agora o que precisamos aqui é do mapa e eu vou cortar. E colar no mapa que eu originalmente usei no meu design em simplesmente explicar rapidamente a dívida e ver o que eu fiz lá sólida e rapidamente. Selecione estes dois. Clique aqui. Ou melhor ainda, talvez não. Talvez eu possa simplesmente deixar a informação do mapa aqui em cima deste texto. Acho que está tudo bem. Então basicamente este mapa é o mapa desta rua que está em Belgrado. E eu uso o pino, basicamente exatamente a mesma configuração que fizemos nesta tela. Se você se lembra, nós rolamos todo o caminho para baixo e eu te mostrei como gerar seu mapa usando o mapa chique. Então eu fiz exatamente a mesma coisa, exatamente a mesma configuração aqui. Mas em termos disso, se eu clicar aqui, você pode ver Poppins luz 18, exatamente a mesma fonte que sempre usamos. E distância entre esses ícones e é 20 pixel. Basicamente, este é apenas um e-mail onde as pessoas podem entrar em contato, eles podem clicar bem ali para enviar um e-mail diretamente. Se eles estão em um celular ou tablet, eles podem clicar ali para entrar em contato diretamente ou se eles têm isso conectado, por exemplo, digamos que a agência usa algo como WhatsApp Viber ou algo assim. Eles podem clicar ali e fazer um contato diretamente com a agência através do site. E finalmente, este é o endereço da rua. Então deixe-me entrar rapidamente bem aqui e ter certeza de que eu faço tudo isso local porque eu já tenho alguns desses. Vou, obviamente, consertá-los mais tarde. Mas basicamente é isso. Este é o mapa em 4D, este é o texto. Vou agrupá-los, chamá-lo Sobre Nós. E é basicamente isso. Agora, a última coisa que precisamos fazer aqui é animar estes no topo. Então navegação secundária, Vamos criá-los como um componente. Então aperte a tecla Control K, Control K, Control aqui mesmo. Então o que eu quero fazer com eles é simplesmente adicionar algum tipo de interação. Então, ao passar o mouse, por exemplo, você pode usar o estado de horror. E ao passar o mouse, por exemplo, podemos torná-los cinza claro. E isso, também podemos usar um estado de horror. E podemos torná-los cinza claro. E isso pode ser estado de horror. E podemos torná-los cinza claro. Mas o que também podemos fazer é criar um estado adicional chamado estado escuro. Dentro do estado escuro, podemos criá-los para ser cinza escuro, que podemos então usar em páginas como DES. Assim, podemos alternar facilmente entre todos esses estados. Vou clicar em escuro e vou usar cinza escuro. E, finalmente, para este, clique e escuro. E eu vou usar cinza escuro. Vamos voltar ao padrão, voltar ao padrão e voltar ao padrão. Então você pode ver como é fácil trabalhar com isso. Agora, finalmente, o que podemos fazer é começar criando essas animações. Então vamos ver. O que eu posso fazer é esconder meu seletor assim. E o que eu também posso fazer é secundário agora está tudo bem. Mas o que eu posso fazer é ver, então este é 1080. Então eu vou baixá-lo para um pixel de altura, por exemplo. Então você não pode realmente vê-lo. E vamos trazer, o que você vai precisar é de algum tipo de sobreposição de cores aqui. Então vamos realmente fazer e sujeira. Então vamos ver a sobreposição de cores. Então eu posso, por exemplo, duplicar nesta imagem e chamá-la, por exemplo, sobreposição de cor de imagem de herói. O que posso fazer é usar essa cor escura. Então vamos aqui até aqui, quase preto. E podemos baixá-lo para 70. Assim, você pode pressionar 7 no seu teclado, por exemplo. E o que são realmente violentos neste texto é que ele deve ser branco para que ele se destaque mais para ouvir. E também o que eu não gosto é da posição, então eu acho que deve ir mais alto. Então vamos fazer isso muito rapidamente sólidos e fazer isso, e depois isso. Agora podemos selecionar esse retângulo e podemos selecionar se é um nervo tão primário. Aqui está. Então, podemos selecionar esses três. Clique aqui para trazê-lo para cima um entalhe, apenas para que possamos posicioná-lo no centro. E você já vê que ele tem muito mais espaço para respirar do que tinha antes. Mas eu vou fazer é realmente agrupar todos estes, bater Controle G, chamá-lo imagem herói, por exemplo, porque isso vai ser muito mais fácil seção a altura. Agora vamos voltar para o nosso equipamento de navegação principal e temos o fundo agora amado. Então, navegação primária, nós vamos, por exemplo, agrupá-lo, apertar Controle G em, chamá-lo de navegação principal, assim. E o que posso fazer é criar um componente. Não sei por que continua fazendo isso e me deixou descobrir rapidamente. Mais uma vez. Rebanhos leiteiros Controle K para trazê-lo como um componente, sabão para executá-lo rapidamente através deste componente. Esta é a nossa navegação. Será o nosso componente principal, e agora está em seu estado padrão, que significa que nada foi selecionado ainda. Então, se eu levá-los de volta ao exemplo anterior, você pode ver que estes funcionam aqui em cima, mas nenhum deles funciona. E porque estamos no estado padrão, nada realmente aconteceu ainda. Então o que você vai fazer a seguir é criar nosso primeiro estado e vamos chamá-lo de destinos. Dentro de nossos destinos, o que vamos fazer é expandir esse borrão antes de tudo, então 1920 por 1080, assim. E vamos saltar. É uma navegação primária do lado. Vamos trazer o seletor de volta e vamos trazer nossos destinos de volta assim. Então, basicamente, esse será o nosso primeiro estado, nosso segundo estado, e vamos criá-lo a partir daqui. Então, notícias, vamos chamar de inverno ou desculpe, antes de fazermos, sabe o que podemos fazer? Aperte Excluir dentro de um destino. Nós podemos realmente selecionar todos estes. Então inverno wellness cruzeiros individuais sobre nós e deixá-los para baixo para 40 por cento, por exemplo, ou ainda menos, digamos 20 por cento ou algo assim. Acho que 40. Sim, vamos usar 20% que possamos voltar e agora criar cujo estado vamos chamar de inverno, assim. Então, dentro deste novo estado, os destinos serão 20. O inverno vai ser 100. Então eu estou apenas pressionando 0 no meu teclado. seletor vai mover-se para aqui. E nós realmente vamos reduzir isso em tamanho para caber bem aqui, assim. Então esses destinos vão cair. Então, 0 e um Inverno vai aparecer aqui mesmo. E basicamente vamos seguir em frente e fazer o mesmo para todos os outros. Vou criar bem-estar. Dentro do bem-estar de Wesley, vamos começar com destinos inverno. Então 20, bem-estar, 100. Mova o seletor para o bem-estar bem aqui. Simplesmente expandido para ouvir. O conteúdo de bem-estar vai aparecer. O conteúdo do inverno não vai aparecer, então é assim. Então vamos criar o próximo, que é individual. Como isso. Dentro do indivíduo. Mais uma vez, a mesma coisa. Sólidos vão com individual, 100, bem-estar 20. Vamos com o seletor. Então, vamos movê-lo aqui. Veja se ele se encontra. Expande um pouco, assim. Então, basicamente individual vai mostrar que o bem-estar vai se esconder assim. Agora vamos passar para o próximo estado, que vai ser cruzeiros. Então vamos saltar para dentro daqui. Mais uma vez, cruzeiros 100, indivíduo 20. Além disso, o seletor bem aqui. E você vai ver mais tarde uma vez que nós animamos, vai ser realmente uma dinâmica. Vai parecer muito fixe. Então cruzeiros, eu acho que está tudo bem. E, finalmente, vamos trazer isso. Vamos esconder isso. E finalmente, vamos criar nosso estado final, que é sobre nós. E dentro Sobre Nós. Basicamente vamos trazer isso para 100 listas para 20, localizado nosso seletor e mudá-lo para aqui. E basicamente expandir isso para a borda da nossa rede. Vou trazer a seção de volta e vou esconder meus cruzeiros. Basicamente, é isso. Essa é a única coisa que vamos animar aqui dentro da nossa página inicial, navegação de design. Então agora a próxima coisa vem e precisamos animar todos esses elementos adicionais. Então o que vamos fazer é mudar para o estado padrão. Vou mudar para o protótipo. E aqui eu vou basicamente tocar no estado padrão, clique em nosso destino. Então eu vou usar a torneira. Transição vai ser auto animar, estado vai ser destinos. Vamos usar a entrada fácil. 0.4 segundos. E então basicamente temos que animar todos esses outros usando exatamente as mesmas configurações. Então, no inverno, vamos usar o bem-estar de inverno. Vamos usar wellness individual, como o nome sugere, cruzeiros como esse e sobre nós, vamos clicar aqui. Então vamos rapidamente percorrer esses estados e ver o que ele animou. Então temos tudo isso sobre nós e todos esses outros. Mas o problema é que não temos estes nabs primários, itens niave. Então, basicamente, esse é o problema com o Adobe XD na minha opinião, porque em cada um desses estados, infelizmente, você tem que saltar para dentro e basicamente fazer isso à mão. Então isso vai ser individual, isso vai ser cruzeiros. Pelo menos, isso ajuda você lembrando essas configurações. Não sei porquê. Está me mostrando sobre nós e não percorrer, mas auto animar e sobre nós. Então eu vou pausar o vídeo aqui e fazer todos esses outros e depois voltar e mostrar a vocês o resultado final. Ok, agora que eu fiz tudo isso e animei tudo isso, agora, mais uma coisa que eu queria mencionar é o logotipo em si. Então, dentro do logotipo, o que criamos são esses pontos de toque. Então aqui estou eu neste, que é o estado de destino. Então, um ponto de logotipo, você pode clicar nele e ele vai trazê-lo para o estado padrão, que é basicamente ler qualquer um desses elementos dentro. Então vamos voltar rapidamente para o estado padrão e eu posso verificar rapidamente e ver. Então bem-estar de inverno, que é bom cruzeiros individuais porque você pode ver que eu fiz a mesma animação para todos eles. Só queria poupar um pouco de tempo. Então vamos para o estado padrão e vamos clicar em pré-visualização e ver o que temos até agora. Então, aqui estamos nós. Temos tudo isso que criamos. Temos esses Horace State. Então, vamos clicar no nosso destino. Você pode ver como ele se parece. Vamos para o inverno. Você pode ver e isso funciona bem, mas eu talvez devesse mudar isso e remover esse fundo branco do bem-estar padrão original. E aqui está o problema porque dentro desses componentes aninhados profundos, não temos nenhum desses estados Hover. Eu realmente não sei por quê. E eu estava escrevendo para a equipe do Adobe XD sobre isso, mas eles ainda não me responderam. A única coisa que eles disseram é que estamos trabalhando nisso e vamos deixar você saber, mas basicamente você pode criá-lo em dois estados. Então imagine aqui, por exemplo, eu tenho esses estados pairando, mas aqui eu tenho, e aqui eu não tenho. Então, em qualquer uma destas, não posso usar a propriedade dela. Eu realmente não sei por que, mas basicamente é assim que isso funciona até agora. E finalmente, em qualquer um desses estados, se você clicar no logotipo, vai levá-lo de volta para este estado padrão. Então é isso para este vídeo. No próximo vídeo, vamos seguir em frente e um design e esta seção de herói. Então podemos passar o mouse sobre essas setas e podemos alternar entre essas imagens de herói e, mais tarde, passar para essa navegação inferior. Então, vemo-nos lá. 26. Como criar design 1: Vamos agora seguir em frente com o nosso design e vamos começar mudando esta seção de heróis e animando-a. Então, se eu clicar duas vezes aqui para abri-lo e pular dentro do nosso texto de herói. Como podem ver, só temos um soviético, vamos mudar isso e temos três. Então deixe-me duplicar isso para mais roupas. Então aqui no teste dois e aqui um texto três porque fomos animá-lo. Então vamos começar por mudar este. Então este é o Beijing e nós vamos deixá-lo lá. Mas vamos rapidamente nos livrar do botão herói. E vamos trazer o botão de herói para fora. Então eu vou posicioná-lo aqui porque eu só quero animar o texto como estas e emissões acontecem. Não quero mexer com dois botões, só quero mantê-lo onde está. Então, para este, porque é um brilho de Pequim, rapidamente esconda isto, isto e isto. Então vamos organizar isso para ser o número um, como sujeira. E então, por exemplo, eu poderia querer incluir Paris, que vai ser desonrado. Então vamos ligar para este número dois. E finalmente, vamos ver isso. Não, vamos dar isso para ser o número dois, porque aqui é Paris. Então vamos ver. Temos Pequim. Temos o Mercado, que vai trabalhar com menos de três. E isso vai ser barreiras. Então coloque bem aqui. Eu só me confundi. Então, novamente, nós temos uma Pequim, nós temos Paris, e finalmente nós esquecemos. Então, estamos prontos para ir. Isto é Pequim como um CRD, então agora precisamos criar um texto número 2 para Paris. Então vamos mudar isso. Então, como eu disse, isso vai ser barreiras. E vamos ver, aqui podemos escrever em algo como CTO do amor, por exemplo. Então podemos esconder isso e agora podemos passar para Regather. Rápido, pulando bem ali. E vamos escrever em algo mágico, Egito, por exemplo. E vamos deixar isso aí. Agora, sob financiamento, o que eu queria fazer com esses textos, como você pode ver, eu vou usar uma máscara. E é por isso que eu liguei-os todos porque eu queria ver quão largo é o texto mais largo, que é o Hagana neste caso, simplesmente usar nosso retângulo e simplesmente desenhar um como este. Então você pode baixar para baixo para a sua obesidade, zoom em apenas um pouco só para ver onde as bordas de seus textos estão. Por exemplo, em algum lugar na audição, isso não precisa ser muito específico e exato. É bom ir assim. Vou chamar-lhe máscara. O que posso fazer é trazê-lo de volta para 100 esconderijos, sentimentos e fronteiras porque, como ele disse, esta será apenas a nossa máscara. Então eu vou selecionar todos eles. Controle de turno, M mudará o Comando em um Mac. Vou chamar-lhe mesquita de texto, por exemplo. Eu fiz. E o que eu vou fazer é deixar o primeiro texto dentro e usar minha seta Shift e inferior para empurrar esses dois para baixo. Em algum lugar por aqui. Então você pode ver talvez 20 pixels abaixo, apenas para que você não os veja. Então eu vou trazer minha imagem de herói de volta. Vou trazê-los de volta, diminuir a obesidade destes dois. Então, quando uma mesa alta, você não vê nenhum outro. E este será apenas o nosso primeiro estado ou o nosso estado padrão. Então vamos fazer isso agora. Então o que eu vou fazer é basicamente pressionar a tecla Control ou Command. Ou você também pode clicar aqui, se quiser. Então aqui mesmo para criá-lo como um componente. E agora eu quero criar um novo estado. Então esta vai ser a imagem dois, por exemplo. Então, dentro dele, vamos baixar isso para 0, trazer isso para 100, entrar no nosso texto. E eu vou mover meu texto de Pequim para cima. Mas antes disso, quero mudar a minha Paris polícia só para me alinhar facilmente assim. Por isso, está perfeitamente alinhado e, em seguida, simplesmente mude o seu Beijing para fora do caminho. Agora, finalmente, vamos entrar e criar a imagem três, assim. E para a imagem três, claro que você vai baixar isso para 0, trazer isso para 100, saltar para dentro de seu texto e trazer o texto número três. Como este. Até que tudo se alinhe perfeitamente, basta mover Paris para fora do caminho até que se alinhe acima. E é basicamente isso. Então, se eu clicar entre eles, temos estado padrão, que é Pequim, varus, e Hoegaarden, que tudo funciona bem. Agora vamos animá-los rapidamente. Então estado padrão, eu vou pular dentro do meu protótipo, localizar minhas setas. E no meu estado Horace, na minha seta para a direita, vou mudar para passar o mouse e, em seguida, clicar e usar Tap, transition, auto, animar. E eu vou escolher o estado, estado padrão. Como você pode ver, nós imediatamente temos um problema. Então deixe-me pular dentro do meu estado padrão e no meu design porque eu esqueci de criar isso. Então aqui estamos em nosso estado padrão dentro das setas e precisamos criar esses pontos de passo. Então vamos saltar rapidamente e criar um. Então, algo assim, eu vou simplesmente esconder essa qualidade amado ponto de toque. Ou podemos usar esta abreviatura. Então, a seta esquerda aponta. E eu vou duplicá-lo. Controle D, vou movê-lo até uma porta, certo? Assim como. Então, todo o caminho até aqui. Zoom direito em mais semanas apenas para que ele se encaixa assim. E eu vou colocá-lo acima seta direita e simplesmente mudar isso esquerda para direita Dario ir. E agora o que eu quero fazer é simplesmente ver se a Adobe é a atualização da dívida de maio. Então, dentro da nossa flecha, aqui estamos nós. E vamos verificar rapidamente a imagem número três setas, ousar VR. Então agora vamos protótipo rápido. O que eu queria fazer mais uma vez. Então, dentro do nosso estado padrão, eu quero saltar rapidamente para dentro das minhas flechas. Ponto de guia de seta para a direita Vá para o protótipo. Vou clicar nele. Toque em animar automaticamente. Eu vou escolher esta imagem de estado número 2 porque é onde eu quero que ela vá. Depois vou mudar os meus estados para a imagem número dois. E então eu vou para duas flechas mais uma vez. Agora, à esquerda, vou tocar no estado padrão de destino de animação automática porque eu queria voltar, facilitar. Eu quero usar nota fácil para todos eles. Então, ponto zero para e quando usar as mesmas configurações. Tão disciplinado para ir para a Imagem 3. E vamos voltar porque eu quero mudar isso de facilidade para facilitar para fora e ponto zero para. Finalmente, quero ir para a imagem número três. E neste, nas setas, não vamos tocar neste. Nós só vamos usar este aqui. E nós vamos para a imagem número dois é 0.4. Então é basicamente isso. Volte para o estado padrão, clique aqui. Porque eu quero lançar uma prévia rápida e ver como tudo isso se parece. Então você pode ver que ainda temos um pairar sobre essas setas porque o pairar funciona não importa o que você colocar na frente dele, desde que você não tenha a cor do sentimento. Então, quando eu clicar aqui, você pode ver que o texto está animando bem. Podemos ir para o número 3, número 2. E aqui estamos nós. Se você acha que é um pouco rápido demais, que eu acho que é, talvez possamos mudá-lo para 0,6, por exemplo, para a velocidade. Então podemos ir aqui em setas de estado padrão, seta para a direita. Em vez de, vamos ver, em vez de 0.4, podemos passar para 0.6 ou até 0.8 se você quiser. Então você pode realmente retardar sua animação. Flechas. Clique nele, 0.6, este 1.60. Então podemos ir para o número 3. Localize a esquerda, 1,60 aqui. Volte para o primeiro, e isso é basicamente tudo o que você vai fazer. Vamos simplesmente testar todas essas coisas que seu cliente é. Você pode ver que não é realmente tudo que grande, mas ele realmente traz este tipo de efeito abrandamento e realmente faz facilidade nessas transições por trás dele não oral permite que seus usuários. Então eu estou indo para a qualidade para este vídeo porque o próximo vídeo vai envolver a criação de mortes. Então eu vou vê-lo lá e em que show você pode criar um drop-downs. 27. Como criar design 2: Tudo bem, agora vamos em frente e criar este menu suspenso. E para criá-lo, o que eu vou usar são basicamente dois recursos. Vou usar Repetir Grade e esses grupos roláveis. Então aqui temos navegação inferior. E basicamente o que eu vou fazer é pular aqui mesmo para esta busca primeiro, e eu vou incluir um ícone de fechamento do pai. Então eu vou pular bem aqui. Quem fechar? Aqui está. Mais escrito bem aqui. Perto disto. E vamos ver, simplesmente posicioná-lo para estar no centro e talvez 20 a partir daqui. Então o que eu vou fazer mais tarde é girado para animá-lo. Mas, por enquanto, vou mantê-lo aqui como está. O que você vai precisar de nossos antecedentes para todos esses campos. Então, primeiro de tudo, eu vou usar este original. Vou apertar o Controle D para duplicá-lo. E eu vou colocá-lo dentro de todos esses solidus. E o que eu vou fazer é basicamente reduzi-lo para aqui e para aqui, para a borda mais próxima. Então estamos neste divisor mentiras. E eu vou chamar isso de busca legi. Vou clicar em copiar, colar aqui mesmo. E eu vou simplesmente chamar isso de atividades. Coloque-o dentro das minhas atividades, meu pai. Então, basta movê-lo aqui. Então, mais uma vez para a borda mais próxima. E aqui, vou apertar o Controle D mais uma vez, e colocá-lo lá fora. Por que eu preciso próximo é tipo de viagem. Então eu vou posicioná-lo aqui mesmo. Mórbido, bem aqui no lugar, posicionando aqui. Qualidade, viagem, tipo, vg, eles estão feridos e simplesmente trazê-lo para dentro do meu tipo de viagem, como sujeira. E finalmente temos mais um para os destinos. Então, controle D para duplicá-lo. E vou chamar-lhe destinos. Agora porque eu estou fazendo isso é porque eu preciso animar todos eles e criar drop-downs e vai fazer muito mais sentido em apenas um segundo, uma vez que realmente começar a animar todos esses rebanhos leiteiros. Então, agora que temos tudo isso, o que eu posso fazer é usar esse filtro aplicado aperte Control K. E basicamente tudo o que eu queria fazer é criar um estado de foco. Como assim. Então, basicamente, estamos criando estados dentro de estados dentro de componentes. Então, basicamente, o que você não pode começar com esses componentes menores porque todo esse drop-down vai ser um componente em si mesmo. Ou você pode simplesmente colocá-lo dentro da pasta como está aqui. E então dentro dessa pasta, cada um deles pode ser componentes separados e você pode fazer o que quiser. Então a primeira coisa que vou fazer é usar pesquisa e vou posicioná-la em cima de todas elas. E foi por isso que usei esse fundo. Porque quero expandi-lo e movê-lo até aqui. Então o que eu vou fazer é basicamente criar meu estado padrão, que vai ser este. E para fazer isso, a única coisa que eu quero fazer é usar meu ícone de roupas, que eu estou indo mais dois aqui. E é simplesmente baixar a obesidade para 0. Como você pode ver, agora é uma vantagem, mas no próximo estado vamos girá-lo assim. Assim, ele pode ser fechado e os usuários podem então tocar nele. Então, como eu disse, estado padrão, eu vou reduzi-lo para baixo. Então o que eu vou fazer é basicamente apertar a tecla Control. Porque este vai ser o nosso estado padrão. Criar novo estado, clicado. Dentro do estado clicado. O que eu vou fazer é basicamente usar minha pesquisa BG, ícone de pesquisa e procurar viagens. E eu vou movê-lo todo o caminho até aqui. Vamos ver o que temos no ícone Pesquisar. Então temos 40. E vamos levar isto para 40 anos. Bem, eu acho que eram 40, então podemos verificar rapidamente. Era isso? Sim, foi. Está bem. Então aqui temos estado padrão, então nós clicamos estado, assim. E para o estado clicado, o que eu vou fazer é trazer isso de volta. Então digite 0 para ir para 100 e simplesmente girado assim, então é um x. Então o que temos é esta barra de pesquisa. Se você se lembra da análise do concorrente, esse é o desejo que eu criei tamanho pesadamente porque aquelas barras de pesquisa realmente difíceis de obter. Segure em. Então aqui o que temos é procurar viagens sem interromper. Assim, os usuários podem simplesmente tocar em Pesquisar, acessar a página ou simplesmente fechar se não quiserem pesquisar. Então o que vamos fazer a seguir é animado ir para o protótipo. Você pode selecionar todo o campo porque não importa onde ele usa passo aqui vai expandir. Então, clique aqui. Use o toque auto animar, vá para o estado de clicado. Facilidade para fora 0.6 porque podemos usar todos os outros. Em seguida, clicou. Os usuários podem tocar em qualquer lugar mais uma vez. Então, toque em animar automaticamente e vá para o estado padrão está fora, e vamos visualizá-lo e ver como ele se parece. Então, aqui está. Uma vez que uma guia, você pode vê-lo muito bem expande e fazer notar este ícone de fechamento. Você pode ver como é suave, como é bom. E aqui temos esse efeito de pairar uma vez que eles querem aplicar filtros. Então você pode imaginar, ok, eu quero pesquisar, clique aqui. Ela se expande, parece legal. Eu toquei no que eu quero, apertei Aplicar filtros e ele vai levá-lo para aquela página específica. Vamos agora mais desgastados e animar todos esses outros. Então todos eles podem ser um pouco complicados. Então eu mostraria como você pode fazer um e depois copiar e colar todos esses outros para que não percamos muito tempo. Então aqui temos destinos e temos este ícone de destino. Então o que eu vou fazer é usar meus textos de destino que é alinhado à esquerda 18 Poppins luz. Vou duplicar o Controle D. E vou posicioná-lo em algum lugar por aqui, por exemplo. E vamos ver, talvez eu possa posicioná-lo para se alinhar bem com o meu ícone. Então eu posso movê-lo, por exemplo, 20 pixels para baixo. Ei, então, e o que eu posso fazer é usar meu divisor de controle D, e eu vou girá-lo assim. E vamos ver, eu quero medir algo como algo assim que eu acho que vai ser bom. Então vamos executá-lo para 200 de largura. Posicione-o bem aqui. Certifique-se de que está, por exemplo, dez pixels abaixo. Então, porque você não pode vê-lo e que me permitem estender meus destinos BG. Foi por isso que a criámos afinal. Então aqui temos areia, talvez 20, sim, acho que 20 funciona melhor. Então eu vou selecionar isso e meu divisor posicionado e aqui em baixo. Então use uma grade de repetição e eu vou chamá-lo de destinos. Então vamos ver mais uma vez. Somos 40 do nosso texto. Então vamos manter isso para todos esses outros. Então, mais uma vez, temos destinos e isso é o que você pode fazer. Você pode simplesmente estender todo o caminho para onde quiser. E vamos estender isso para que possamos ver o que temos para que possamos acabar corretamente. Assim, para que eu possa cortá-la bem aqui. E é aqui que entra a parte divertida. Então o que você pode fazer é usar elementos de texto. Então, que herói aqui, deixe-me abri-lo rapidamente. Eu tenho uma lista de cidades e eu simplesmente usar o Bloco de Notas no meu Windows. Você pode usar o que quiser em um Mac e ele vai funcionar muito bem em um simplesmente digitado em todas essas cidades. Então o que eu vou fazer é arrastar esse arquivo no Adobe XD, colocá-lo em cima da minha primeira cidade, colocá-lo em, e os laticínios têm todas essas cidades. Então, porque eu realmente gosto de como isso parece, mas eu não quero que ele vá até aqui. O que posso fazer é simplesmente clicar aqui. Então rolagem vertical. Agora o que eu vou fazer é expandir para Bangkok e por exemplo direitos para aqui para que eu possa cortá-lo apenas na frente dos meus textos. O que posso fazer é chamar isto de cidades. Então eu sei o que é. E, finalmente, usar meus destinos BG e simplesmente baixá-lo até um ponto, talvez em algum lugar por aqui. Então altura de 500, por exemplo. Acho que vai funcionar. Bem. Em seguida, clique nas minhas cidades e corte-o para mais ou menos por aqui. Eu acho que é bom. Sim. E agora vamos clicar em pré-visualização e ver imediatamente como isso se parece. Então, uma vez aberto, você pode rolar e ele vai ficar lá. Então eu acho que está muito bonito. Mas uma coisa que eu acho que isso está faltando é algum tipo de sombra de fundo porque você pode ver que ele não está muito bem contra o fundo branco aqui. Então vamos fazer isso a seguir. Então aqui temos essas cidades e a última coisa que precisamos é da máscara. Então você sabe que isso era 70, assim. Então o que vou fazer é incluir essa sombra. Então 55 Sen, e eu vou para cinco assim. E agora você não pode ver nada, basicamente, pelo menos dois aqui. A única coisa que você pode olhar é para a sombra por aqui, mas nós vamos nos livrar disso em apenas um segundo. O que precisamos basicamente é de uma máscara, que possamos ir aos destinos BG, apertar o Controle D, e chamar isso de máscara. O que eu vou fazer é colocá-lo bem aqui. Vou me livrar da sombra e me livrar do preenchimento. Então eu vou usar essa máscara. Vamos ver. Vamos usar as máscaras, máscaras, CTs e destinos. Ou podemos colocar a máscara em cima de todo o tanque assim. Selecione tudo, pressione Shift Control. M vai mascarar tudo. Então eu vou simplesmente chamá-lo de destinos. E eu vou basicamente criar um componente agora. Mas antes que eu faça nos destinos BG, Eu quero esconder minha sombra porque eu não quero que ela seja vista. E basicamente eu quero expandir uma máscara ou apenas um pouquinho até aqui. Então, quando o expandirmos, você será capaz de ver a sombra abaixo. Há até como essa chave de controle PID para criar um componente. Criar uma nova qualidade estado clicou minhas dívidas. Dentro do estado clicado, o que queremos fazer é basicamente expandir isso. Então, o que demos para eu acho que foram 500 aqui. E simplesmente expandir nossa máscara até aqui e trazer nossa sombra de volta. Então, agora, quando eu fechá-lo, vá para aqui, eu vou para a guia Protótipo. Vamos usar o estado fácil e fora é clicado, passar para clique, clique em algum lugar fora, passar para o estado padrão. Então, não importa onde você clicou, manipula, clique em pré-visualização e veja como isso se parece. Então, uma vez que estamos aqui, você pode ver que ele se expande muito bem. Deixe-me mostrar isso mais uma vez. Isso realmente se destaca, mas o problema é que eu ainda não vejo essa sombra toda a dívida. Bem, eu acho que é bom, mas sim, vamos deixar isso aí. Eu acho que funciona bem, eu estou alternando por sinal, entre meus monitores porque o que você é visto tem o menor contraste. Então, eu só estou trocando entre eles. Só veja como se parece. E eu acho que parece bom e eu acho que funciona bem. Então vamos deixar assim. O que vou fazer a seguir é usar exatamente as mesmas configurações e trabalhar nesses dois. E quando terminar, voltarei e mostrarei os resultados. Ok, então agora que todos eles estão concluídos, deixe-me mostrar rapidamente a estrutura. Então este é o que eu mostrei em detalhes, esta nação. Então, como você pode ver, tudo está bem ali. Eu simplesmente uso exatamente a mesma estrutura e elementos. Então simplesmente copiou isso e colou em todos esses outros. Então, se eu mostrar que aqui é o único para o tipo de viagem. Se eu abrir, aqui está a das atividades. O genótipo não tem muitas atividades, tem no lote. E você pode incluir obviamente muito mais destinos ou até mesmo muito mais atividades. Então, finalmente, há uma busca por viagens, o que já fizemos. E em termos de animações, cada animação é exatamente a mesma. Então, os que usei aqui. Assim, a facilidade de animação automática de tabulação dentro de 0,6 segundos para ambos os estados são usados tanto para todos estes. Então, se eu acertar a pré-visualização rapidamente, você pode ver como isso se parece. Então, podemos saltar aqui mesmo. Então este é o que fizemos para destinos. Você pode simplesmente rolar para cima e para baixo tipo de viagem. Você pode ver que não há muitos. Então, no caso de você querer, não importa, basicamente qualquer viagem que você quer, você pode clicar bem ali. Atividades. Então nadando, circulando, e você pode ver quantos eles estão bem ali. E, finalmente, procurar viagens. Temos aquela bela animação. Você pode fechá-lo e nós temos aplicar filtros. Então é isso para este vídeo, você pode ver como isso foi fácil. Uma última coisa que você pode fazer para destacar isso é basicamente dentro do estado. Talvez possamos transformá-los e mudá-los desta cor mais clara para a cor mais escura. Mas não acho que isso seja necessário. Mas você pode explorá-lo se quiser. Vá desta cor para destino e o ícone para esta cor mais escura se você quiser e veja como isso se parece uma vez que eles são clicados e expandidos, você também pode adicionar vários efeitos de focagem para todos esses textos. Mas não vamos entrar em muitos detalhes com mortos, especialmente se você está apertado em sua agenda e o cliente é estado em um orçamento, Eu realmente não recomendo fazer isso porque você pode brincar com todas essas emissões como tanto quanto você quiser. E você pode ver que você pode incluir realmente alguns fáceis e esses realmente complexos. Mas tudo depende no final do dia sobre o orçamento do cliente e quanto dinheiro eles têm que gastar nesses projetos. Portanto, você pode determinar a quantidade de todas essas animações que você pode fazer nesta classe, eu estou simplesmente mostrando todas essas emissões que você pode fazer. E basicamente você pode abrir todos eles se quiser gostar disso. Basicamente jogar como você quiser. Estou simplesmente mostrando todas as opções que o adobe XD tem para oferecer sem escrever uma única linha de código. Então é isso para este vídeo. No próximo vídeo, queremos passar para as ofertas especiais, e eu quero finalmente mostrar-lhe como podemos criar este ícone para passar efeito e basicamente combiná-lo com todos esses outros elementos. Então, vemo-nos lá. 28. Como criar design 3: Vamos agora passar para a seção de ofertas especiais. E como você pode ver, e se você pode se lembrar, aqui é onde nós criamos todos esses diferentes elementos. Nós incluímos todos eles. E como eu disse, por exemplo, para essas imagens de transporte, então se eu clicar aqui no meio, meio transporte, você pode ver que Blaine trem, e ônibus, todos eles não têm estados disponíveis. Então, como eu disse, eu criei isso apenas por exemplo, se você está saindo de, digamos, Belgrado, porque mais uma vez, esta agência está localizada em Belgrado, Sérvia. E você quer sair para Haggadah, que é o Egito, por exemplo, nossa viagem de carro não está disponível ou pode não estar disponível por qualquer motivo, talvez seja muito longe, não há estradas que seja. Portanto, você tem todas essas opções. Mais uma vez, talvez essas opções possam estar focadas e você possa mostrar uma dica de ferramenta, por exemplo. E ao passar o mouse, você pode informar seus espectadores sobre Dan, por exemplo, uma vez que eles chegam a um destino, não há nenhum desafio de viagem de trem disponível para eles ou não está incluído na oferta. Então é só com você para falar com seu cliente, para explicar a eles todas essas diferentes opções que eles têm com esses ícones. Mas o principal no ponto chave bem aqui. E o que eu estou tentando dizer é, é sempre ótimo se você puder, ter todos esses estados diferentes para seus ícones apenas para que as coisas fiquem um pouco mais tarde. Então o que eu vou fazer primeiro é, como você sabe, temos nossos cartões de oferta e temos ofertas de primeiro minuto e ofertas de última hora. Então o que eu vou fazer na verdade é que eu vou excluir todos esses cartões, mas eu vou mantê-los por enquanto porque eu quero criar meus componentes principais e, em seguida, distribuído e, em seguida, editado mais tarde. Então eu só fiz isso em uma seção de wireframing apenas para que nós tenhamos estrutura, apenas para que nós entendamos para onde o projeto está indo. Agora que temos tudo isso e agora que determinamos como vai ser, agora podemos seguir em frente e talvez incluir todas essas informações diferentes. Por isso, porque criámos a Gada dela e vou deixá-la como está. A primeira coisa que eu vou fazer é, na verdade, eu posso pular bem aqui no meio para o nosso transporte. E, por exemplo, o trem não está disponível. E, por exemplo, chefes não estão disponíveis. Por exemplo, talvez você possa chegar lá de avião e de carro, digamos. Então podemos seguir em frente. E o que eu vou fazer, se você se lembra oferta de carro, BG tem essa sombra fora 5% da basicidade, Eu vou aumentá-lo no próximo estado. Mas antes de seguirmos em frente, precisamos de uma imagem. Então eu vou arrastar e soltar uma imagem dentro daqui. E eu vou chamá-lo ou Gada, imagem assim. E o que eu vou fazer também é criado como um componente. Então vamos ver, talvez possamos chamá-lo de especial. Ofereça cartões. Ele teria a chave de controle. E o que vamos fazer é criar um estado flutuante como esse dentro do nosso estado Horace, as duas únicas coisas que eu quero fazer é com o nosso cartão de oferta, BG, ou mesmo podemos chamá-lo de cartão de oferta especial. Então, ele tinha as coisas consistentes? E eu mudei isso no estado padrão. Então, uma vez que estamos em estado de horror, você pode ver que ele foi atualizado. Então, dentro do estado de horror, você pode clicar nele. Aumenta para 8%. Por exemplo, apenas classificados, você pode chamar a atenção para isso um pouco mais. Agora podemos ir para a seta LBG e eu posso expandir nossa máscara para aqui para que a largura é 82 e que ele cobre muito bem. Então, se eu for para o estado padrão e uma coisa a menos que eu quero mudar é a imagem em si. Então, quando clicamos nele, eu quero clicar duas vezes para que eu possa entrar na máscara de imagem. Então eu vou segurar Shift Alt e clique com o botão esquerdo em um dos cantos, não importa qual é simplesmente expandido apenas ligeiramente como este. Então, quando você vai entre o estado padrão e o estado Horace, tudo parece que está se expandindo. Então eu vou bater na minha pré-estréia. Traga-o aqui mesmo. Vá para aqui. E você pode ver uma vez que estamos em pairar, como ele se parece. Então, mais uma vez, temos aquela bela sombra de fundo e temos essa imagem se movendo ao lado de nosso ícone. Então talvez nós queiramos talvez até mesmo excluir este estado híbrido aqui. Talvez isso não seja tão necessário. Talvez possamos manter a flecha como está. Eu não acho que o estado de horror funciona tão bem aqui porque nós temos o primeiro passo, que é ver seu segundo passo que está pairado, depois o terceiro passo que está bem aqui. Mas talvez, talvez possamos até deixá-lo apenas para indicarmos que isso é possível. Faça neste estado. Bem, vamos deixar e ver onde vai a partir daí. Então o próximo passo para nós é realmente duplicar as devoluções. Então o que eu vou fazer é segurar meu Alt, arrastá-lo posição é bem aqui. Alt e arraste-o, posicione-o aqui, como sujeira. Então eu vou movê-lo para aqui, e então mover este aqui para cá. E então eu vou fazer o mesmo. Posição tão antiga e esta aqui e depois ALT bem aqui. Tudo bem aqui. Então eu vou organizar esses três. Então, selecione todos eles. E eu vou apertar Control X realmente para movê-los para fora das ofertas de primeiro minuto e excluir esses dois cartões porque nós não precisamos deles. Vá para o último minuto, aperte o Controle V, cole-o no lugar, posicionando e aqui mesmo, e depois apague estas três cartas aqui. Então, o que temos? Basicamente, se eu clicar aqui para entrar no modo de visualização, o que você tem são todos esses cartões. Como você pode ver, os efeitos de pairar funcionam muito bem. Nós dissemos a eles. E basicamente, o que quer que você altere neste componente principal vai atualizar para todos esses componentes adicionais. Então, por exemplo, se eu arredondar os cantos mais. Ele será atualizado em todos esses componentes. Se eu, por exemplo, mudar uma cor de qualquer um desses ícones, se eu mudar a cor do texto, se eu fizer o que estiver neste componente em atualização em todos esses outros componentes. Mas não é que você vai ver em um segundo, uma vez que você começar a atualizar todos esses componentes filhos que vieram deste componente pai, que é este, não vai reverter as mudanças de dose. Então, mais uma vez, o que você está fazendo no componente estéril, que é o componente principal , vai atualizar em todos os seus componentes filho, mas não vai funcionar o contrário. Então, o que quer que você mude nesses componentes filhos, não vai propagar este pai ou componente principal. Então vamos começar com o segundo. E, por exemplo, eu posso escrever em Tóquio aqui, talvez. Para que eu possa saltar para dentro desta qualidade, Tóquio. Eu fiz. Eu posso ampliar. Veja explorador e a terra do sol nascente pela terra. E vamos ver, talvez possamos deixar o avião nesta. Então, para o transporte móvel, nós vamos apenas deixar o avião, mas todos esses outros não vão comer dele disponível para deslocação. Um dos dias talvez possamos colocar 14 dias em vez de 24, então 14. E nós também podemos aumentar isso para 50, sentido para mim, sim, 58 Eu acho que funciona bem. É por isso que o colocamos na pilha. O preço vai ser muito maior. Então, por exemplo, $2430 neste. E o que você pode fazer é eu vou chamar este estoque de sua imagem. Não me deixo localizar a minha imagem de Tóquio dentro da minha pasta. Então vamos ver Tóquio. Vou arrastá-lo e soltá-lo para dentro. O que você pode fazer neste caso, porque temos toda essa informação que é alterada, em seguida, também vamos trazer algum tempero para ele. Vamos entrar na nossa classificação. Vamos localizar a estrela menos, que é esta, e colocá-la em um estado cinza. Então, temos uma classificação de quatro estrelas, por exemplo, para esta. Então o que eu vou fazer agora é eu vou selecionar todos eles. Em vez de a seta bater no Controle C, pule dentro do meu estado Horace, controle QED V. e então vou apagar tudo, exceto a seta. Então, basicamente, temos todas essas mesmas informações. E agora dentro de nossa imagem, vou clicar duas vezes para entrar no modo de máscara, mudar o Controle M, para que eu possa ampliá-lo um pouco, por exemplo, dois aqui. E depois podemos, vamos querer entre os nossos estados. E você pode ver como isso é simples. Vai ser demorado porque temos todos esses estados diferentes. Mas pelo menos você tem esse bom efeito. Então, mais uma vez, temos o Hoegaarden, temos o Tokyo ligado, e tudo funciona como deveria. Então, para não te aborrecer com muitos desses detalhes, vou pausar o vídeo aqui. Eu vou fazer o resto deles e então eu vou voltar para que possamos trabalhar neste vídeo um aqui em baixo. E agora que todos eles estão concluídos, o lítio rapidamente aqui para ir para pré-visualização e você pode vê-lo tão regata, barris, Kroc ou Tóquio, cevada e Taipei. E, claro, eu fiz algumas mudanças neles. Então você pode ver que para o tipo a, por exemplo, temos o carro e um avião bem aqui. Temos apenas um passeio de ônibus aqui. Temos três deles em vez do avião aqui, temos estes dois aqui, temos o avião. Então, apenas a variedade para o cliente verificar principalmente. E você pode verificar e clicar aqui a partir de qualquer um destes. E eles podem realmente ir realmente como essas setas porque eu acho que a pausa o cliente e forçou-os a clicar nesta área. Mas você também pode tornar essa área inteira clicável se você quiser que eles vão para a próxima página. Então agora vamos trabalhar rapidamente neste vídeo promocional para que eu possa fechar isso de um vídeo. Então a única coisa que eu quero fazer aqui é arrastar e soltar minha imagem dentro dela. Vejamos, talvez possamos até incluir alguma sobreposição de cores porque eu não acho que seja tudo bom para a dívida. Eu não acho que ele se destaca muito bem, então Control D, eu vou renomear isso para sobreposição de vídeo promocional. E vamos usar a mesma cor que usamos. Então quase preto e eu posso acertar sete no meu teclado. Lori caiu para 70. Agora parece muito melhor. Então, no próximo vídeo vamos basicamente fazer exatamente a mesma coisa que fizemos para descartar. Nós vamos apenas criar um componente a partir deste cartão e Dan basicamente transformá-lo em todos os nossos projetos. Então basicamente copie e colado em todos eles. E isso vai acelerar o nosso fluxo de trabalho massivamente. Mas também vou explicar como você pode fazer isso também. Então, vemo-nos lá. 29. Como criar design 4: Vamos agora passar para os destinos e eu vou começar criando este cartão de destino. Então, mais uma vez, a mesma história, como foi com esta seção aqui. Quando você está criando estes como wireframes, é importante colocar o máximo de informação possível para dar aos seus clientes o máximo de contexto possível e, em seguida, explicar em tempo hábil como eles vão se parecer uma vez Eles estão acabados. Mas você não quer investir todo o seu tempo adiantado. E no começo, porque você quer mantê-lo agradável e curto e você quer dar a eles o máximo de contexto possível como eu disse, sem incluir toda essa informação dentro, como todas essas imagens, todas essas todas essas transições porque você deseja manter o contexto baixo e você deseja determinar a estrutura e a aparência geral do seu design. Antes de passar para todas essas informações adicionais e incluir todas essas informações adicionais dentro. Então, antes de passarmos para essa seção, notei que você pode ver tudo por um minuto, mas eu não mudei isso para tudo de última hora. Então deixe-me fazê-lo rapidamente em todos os últimos minutos. Vou copiá-lo. Volte para o meu estado de horror. Volte aqui ou hábitos de laticínios de última hora. E agora podemos ir para os destinos. Mais uma vez, vou fazer a mesma coisa. Vou criar um componente a partir deste. Eu vou pausar o vídeo e eu vou preencher, e não apenas esses, mas todos esses outros, só para economizar um pouco de tempo neste vídeo. Mas como eu disse, eu quero dar a vocês o máximo de contexto possível sobre este design geral, sobre a estrutura desordenada e sobre este fluxo geral, só para que vocês possam entender como você pode avançar isso. Eu não quero desperdiçar seu tempo recriando todos esses cartões porque nós vamos ter oito cartões nesta seção procurados para seções com oito cartões preenchidos in vitro informações. Como eu disse, não quero desperdiçar muito do seu tempo. Então, para começar, o que vamos fazer realmente mais uma vez, eu vou ir em frente e excluir esses três porque sabemos que se eu clicar duas vezes em nosso quadro de arte, sabemos que a largura da calha é 60, então essa é a distância que vamos ter entre as nossas cartas. Então, para começar, o que eu vou fazer na verdade é fazer as setas primeiro. Porque se eu clicar na minha seta para a esquerda, você pode ver que temos estado padrão em pairar. Se saltarmos para o protótipo, você pode ver que no estado padrão temos pairar animado automático selecionado, facilidade de entrada e 0.3 segundos. Então eu vou fazer isso na seta para a direita também. Então eu vou clicar, eu vou usar em vez da guia, eu vou usar o pairar. Animar automaticamente. No entanto, aliviar e ponto zero três segundos. 3.3, desculpe, 0.3. Pressione Enter apenas porque eu quero manter a consistência igual. E mais tarde, quando eu copiá-lo e colá-lo para baixo, eu vou fazer o mesmo para todas essas outras flechas. Então, porque somos ousados, vamos com o design e mais uma vez, vamos voltar para as cidades. Vou desagrupar este e vou chamá-lo de cartão de destino assim. Então o primeiro destino será Paris bem aqui. Então, portadores. E eu vou digitar Explorer. A Cidade das Luzes assim. E em vez de 24 dias, podemos lidar com algo como sete dias, por exemplo. Então, mais uma vez, é aqui que isso vem a calhar. Porque nós empilhávamos incluído. Eu posso simplesmente saltar aqui, por exemplo, e dizer que eu quero estar no 24, Eu quero estar no 65 Talvez. Acho que isso é bom. Acho que parece bem. E você pode sempre saltar para a direita e alterar esses valores aqui, em vez de simplesmente clicar nele, em seguida, puxar para a esquerda e para a direita, você pode sempre, como eu disse, simplesmente clicar e digitar o valor aqui que você deseja. Então, uma última coisa é que vamos mudar o preço disso, vai ser 450, assim. Então nós tivemos o Paris e vamos dar-lhe quatro estrelas, por exemplo. Então classificação para estrelas, eu acho que isso é bom. E em vez de imagem de destino, vamos chamá-lo de imagem de Paris. Ing, porque como eu disse, vamos ter vários destes e vamos incluir diferentes destinos dentro. Então deixe-me saltar rapidamente para a minha pasta de imagens. Então, faraós aqui e arrastá-lo e soltá-lo para dentro. E basicamente é assim que minha pasta de imagens se parece. Eu só vou arrastar e soltar essas imagens lá dentro. Também tenho este logótipo de parceiro. Também tenho estas bandeiras, como te mostrei. E basicamente você pode fazer lá também. Agora, eu os exportei como essas dimensões, então dimensões originais dentro do arquivo. Mas, mais uma vez, se você quiser obter a dimensão total dessas imagens, use-as para o seu portfólio ou para o seu trabalho de cliente. Vá até a Envato Elements e obter a assinatura para si mesmo vai valer a pena porque você vai obter todas essas imagens maciças. Acho que esta imagem original era algo como oito mil ou algo assim. Mas aqui, exportado, como você pode ver, é apenas 366 semanas para 60 vai ser suficiente para este projeto. Mas como eu disse, se você quiser, você pode fazer isso e obter a assinatura para si mesmo e explorar todas as imagens que eu mostrei para você agora, aperte a tecla Control para este cartão de destino. E se eu te levar aqui, você pode ver que temos um cartão de oferta especial e temos um cartão de destino. Então acho que está tudo bem. Agora vamos fazer o poder do estado. Eu vou abri-lo e mais uma vez, apenas imagem. Então Shift Alt e clique com o botão esquerdo. Você tem que clicar duas vezes dentro para acessar a máscara. Porque se você não fizer isso e você fizer Shift Alt assim, ele vai aumentar o tamanho geral da sua imagem. Então, vai sair assim. Mas uma vez que você clique duas vezes dentro vai entrar no modo Máscara de imagem, mude Alt, e clique com o botão esquerdo aumentá-lo apenas ligeiramente. Mais uma vez, vamos passar para flechas. Desculpe, então essas cartas de tradição, estamos no estado flutuante, então eu vou passar para a máscara de seta. E vou expandi-la até aqui. E finalmente, vou seguir em frente aqui e incluir isto para ser oito. E é basicamente isso. Então a próxima coisa é voltar para o estado de horror. E vamos usar grade repetida. Então você pode usar a grade de repetição ou você pode simplesmente Alt ou opção e, em seguida, arrastá-los e soltá-los como quiser. Mas vou usar a grade de repetição só por causa da consistência. Então, como eu disse, vou precisar de oito deles. Então, 2, 4, 6, 7, mais um. Então, assim. E eu vou posicioná-los em um grupo de cidades de qualidade como essa. E eu vou pular para minha grade de repetição, desagrupar grade. Então eles estão ficando dentro da própria pasta. Eles estão ficando dentro da prancheta em si. O ponto principal aqui é obter a aparência consistente entre eles. Então, como você pode ver, eles estão ficando dentro da nossa prancheta. Então, se você clicar em Preview client, 100 usuários sabem que eles são mais cartas para estar aqui, então eles podem usar essas setas para ir para a esquerda e para a direita. Então o que eu vou fazer agora é pausar o vídeo para que eu possa organizá-los. Sabe como gosto de fazer coisas. Então eu vou colocar este 1 em primeiro lugar, eu vou colocar este 1 segundo. E agora que fiz isso, preciso incluir o mesmo espaçamento entre eles. Então eu vou usar 60 mantenha a tecla Shift pressionada para desmarcar esta, mantenha pressionada Shift, mantenha pressionada, Shift, mantenha a tecla Shift e faça o mesmo para todos esses outros. Então, eu estou simplesmente segurando Shift para arrastar, em seguida, pressionando Shift e clique para desmarcar e, em seguida, simplesmente arrastando-o para aqui. Então, primeiro as coisas, se acertarmos a pré-visualização só para ver esses destinos europeus. E se eu rolar todo o caminho até aqui, você pode ver que uma vez que eu carrego o mouse, tudo funciona como deveria, mas você não pode alcançar todos esses outros. Então, como mudar isso? É muito simples com sua pasta selecionada e eu vou copiar este título. O que você pode fazer é simplesmente usar rolagem horizontal, clique bem ali. E ele vai para a borda bem aqui. Mas bem aqui, o que eu vou fazer é basicamente deixar um pouco de espaço aqui à esquerda. Então, agora, quando eu apertei a pré-visualização e chegamos ao estágio do nosso projeto aqui está. Agora, uma vez que você clicar e arrastar, como você pode ver, você ainda pode ver todos esses cartões como este, e você ainda pode ver um pouco de descartar aqui agora que é usado apenas porque para dar aos seus usuários indicação de que eles são mais alguns cartões para estar bem ali. Então eles podem clicar nessas setas na parte inferior e eles ainda podem acessá-las assim. Então é isso para esta parte. Vou mudar o nome para cidades como esta. E eu vou agora pular e mudar todas essas cidades. Eu vou mudar todos esses nomes tanto para o estado padrão quanto para o estado hover. E o que você também pode fazer é se você conhece suas cidades, você pode mudar o nome deste cartão. Então também podemos fazer isso aqui. Então você pode saltar dentro do primeiro minuto cartão oferta especial. Posso deixar assim ou clicar duas vezes aqui. E Ricardo qualitativo. Agora que não vai acabar adicionado aqui porque nós apenas usando cartão oferta especial como nosso componente principal. Isso só vai ajudar você a organizar as coisas um pouco aqui. Então Tóquio e eu vamos mudar o nome para Bali. Você também pode fazer isso aqui. Então Paris, Kharkov. E finalmente temos o tipo B, a cabeça deles. E agora que isso está concluído, como eu disse, eu vou seguir em frente e eu vou fazer 1 primeiro, só para mostrar mais uma vez, então Paris. E digamos que isto vai ser Londres, por exemplo. Então Londres, e eu vou pular aqui mesmo. Eu vou embora, a floresta começa, então vou chamá-la de Londres. Vou dizer Explore e, por exemplo, a história de Londres. Para os dias que vamos ter, por exemplo, os anos 70 também. Então acho que está tudo bem. Mas aqui nós estamos indo apenas para remover o carro, então não disponível. E dentro de Paris, por exemplo, podemos fazer isso também. Então vamos ver Moodle, carro de transporte moodle. Podemos nos livrar dele. E assim que você fizer isso, se formos para o estado Horace, ele vai estar lá também, mas eu vou removê-lo aqui também. Portanto, notas de carro de transporte disponíveis, hábito de laticínios, e também deve atualizar em todos esses outros. Ele não talvez eu precise salvar o arquivo e, em seguida, ele irá atualizar. Mas não importa o que, como você pode ver, nós atualizamos esse 1, primeiro lugar, o preço, então vamos mudar para 820, meu pai. E agora o que quero fazer é o mesmo de antes. Primeiro, mude isto para Londres. Vá para a minha pasta de imagens e localize Londres. Arraste e solte minha imagem para dentro. Agora selecione tudo, exceto para a seta Controle C. Ir para o meu estado de horror controle V, e, em seguida, excluir tudo, exceto o destino final seta BG atual. Agora vou clicar duas vezes aqui, mudar o controle e aumentá-lo. Volte para aqui. E agora se apertarmos a pré-visualização só para mostrar a vocês, mas antes de tudo, eu tenho que trazer isso de volta para o estado padrão assim. Então, agora, se voltarmos para aqui, percorra todo o caminho para baixo. Você pode ver que temos Paris, temos Londres. Os preços são diferentes. Então, se eu pairar bem aqui, se eu pairar bem aqui, e eu posso simplesmente alternar entre eles e nós vamos animar isso mais tarde. Vou mostrar-te isso no próximo vídeo. Então, para este vídeo, é isso. Agora vou mudar todos eles. E então no próximo vídeo eu vou voltar e mostrar a vocês como isso se parece. E então podemos passar para todas essas outras seções do nosso projeto. Mas eles são apenas ponto para explicar tudo isso em um único vídeo e adicionar sua dívida. Como eu disse, perca seu tempo saindo horas e horas a fio para mudar todos esses estados diferentes. Então eu vou te ver no próximo vídeo e então você vai ver todos eles mudarem, assim como todos esses outros. 30. Como criar design 5: Bem-vindo de volta e vamos continuar de onde paramos na hora anterior. Então, no último vídeo, eu deixei você com isso e eu vou em frente e terminá-los. Então eu fui em frente e depois preenchi a mística Ásia, belas Américas. Basicamente, agora temos um continente de quatro grandes. Então temos destinos europeus, africanos, asiáticos e americanos. E basicamente eu fui em frente e criei todos eles. Então, se eu apertar a pré-visualização e saltar bem aqui, ampliar isso bem rápido, eu posso ir para baixo. Então você pode ver que temos Paris, Londres, Roma, Praga, e eu posso arrastar tudo isso. Também temos o mesmo para a África, por isso todos estes destinos funcionam bem. Temos o mesmo para a Ásia e temos o mesmo para as Américas. Na edição que são corrigidos é o efeito sobre todas estas setas. Então todas essas flechas direita aqui que você pode ver. Então agora todos eles funcionam como deveriam. Uma última coisa que consertei foram os CTs. Então, dentro de cada cidade, eu fui em frente e usei este um pergaminho tão horizontal. E eu cortei esta borda esquerda na borda da nossa grade. Então, foi basicamente tudo o que fiz. Então o que vamos fazer a seguir antes de passar para qualquer uma dessas próximas etapas, é que eu vou e basicamente criar uma animação para eles e basicamente criar dois estados diferentes. Assim, os usuários podem rolar por aqui ou ainda mais elegantemente clicar aqui nessas setas e, em seguida, ir para a esquerda e para a direita. Então o que vamos fazer é basicamente podemos converter essa coisa toda para o componente se quisermos. Mas eu vou basicamente fazer isso. Destinos europeus. Ou melhor ainda. Sim, vamos fazer isso só para poupar tempo. Então aperte a tecla Control e crie tudo isso como um componente. Então, dentro disso, temos esses componentes aninhados para o botão e para as setas. Então vamos adicionar apenas mais um estado. Qualidade clicada. Por exemplo, como fizemos antes. E dentro do estado clicado, vamos saltar para dentro de nossas cidades. Clique em nossa pasta cidades e simplesmente arraste até que a cidade se alinhe com esta linha de grade aqui à direita. Então, quando rolamos entre eles e o estado padrão e a data de cliques, essa é a única coisa que muda. Vamos agora fazer o mesmo pela África. Então Control K para criar uma nova chamada clicou. E eu vou copiar esta mensagem. Uma auditoria, que vamos fazer é, como eu disse, saltar para as cidades e mover esta pasta aqui. Em seguida, feche todo o backup. Mudou-se para a Ásia, Chave Control. Adicionar uma nova qualidade de estado clicada. E é neste momento em que você começa a adicionar todos esses elementos diferentes, todas essas imagens diferentes que você pode ver o Adobe XD correndo um pouco devagar. E especialmente no meu caso e dívida, eu estou usando parede deste programas e software em cima do Adobe XD para que eu possa realmente gravar todas essas lições. Então você pode imaginar que o seu vai correr um pouco mais rápido. Mas é por isso que é importante otimizar essas imagens. E é por isso que é importante tê-los assim. Então, em termos de otimização de imagem, o que estou usando no Windows é chamado de motins. E eu vou trazê-lo rapidamente. Então, aqui está. Chama-se Motins. Basicamente, a única coisa que estou fazendo um, um, isso é de graça, a propósito. Acho que se chama imagem do Tim no Mac. Vou tentar desenterrá-lo e deixo-o no PDF para que possam ter acesso a ele. Mas eu sempre recomendarei que você otimize suas imagens. O que isso vai permitir que você faça é um tamanho de imagem mais baixo. Não vai mexer com a resolução, só vai reduzir o tamanho. Então seu software, Adobe XD, neste caso, vai ser executado muito mais suave e muito mais rápido porque você otimiza essas imagens mais tarde ele vai ser importante porque você vai enviar esses ativos para seus clientes e desenvolvedores. Então, o que quer que você envie esses arquivos enormes para seus desenvolvedores, eles precisam fazer isso mais tarde. Então, basicamente, é seu trabalho fazer isso por eles. Basicamente, você vai arrastar e soltar sua imagem aqui para a imagem inicial, clique em Otimizar n vai otimizá-lo para o seu, desculpe, você não tem que clicar mesmo você pode simplesmente arrastá-lo para aqui. Ele vai começar a otimizar automaticamente, e então ele vai mostrar-lhe isso aqui mesmo. Então, para trazer uma imagem, eu tenho uma imagem aqui na minha área de trabalho para que eu possa arrastá-la e soltá-la aqui. Ele vai mostrar que você pode otimizar o início. Então, como você quer otimizá-lo? Esta é a resolução original. Então, desculpe, tamanho original. Eu quero clicar sim, ele vai otimizá-lo. E como isso já está otimizado, não é mostrado. É um enorme potencial. Então deixe-me voltar ao meu computador e encontrar uma orelha. Então aqui está a minha imagem do meu computador. E vou mostrar-vos isso num verdadeiro exemplo. Então aqui você pode ver que a imagem original é 2,5 megabytes otimizado é de 1,7. A última coisa que você precisa fazer é simplesmente clicar em Salvar. Vai salvar para esse destino. Vai parecer estranho aqui e vai parecer que fica distorcido. Mas confie em mim, não é, é só que a pré-estréia que se parece com isso. Uma última coisa sobre isso é especialmente em projetos tão grandes quanto este que estamos trabalhando nesta classe. Quando você tem várias dessas imagens, elas têm essa função de lote. Então, basicamente, você pode fazer exatamente a mesma coisa. Lote, importe todas as imagens que desejar. Clique em Salvar. Ele vai salvá-los e otimizar cada um deles para o melhor valor possível. Basicamente, isso é tudo para as imagens. Agora vamos em frente e animar tudo isso. Então eu vou para o protótipo para destinos europeus. Vou encontrar as minhas flechas, um ponto de tabulação direito. Vou clicar nele. Então vamos usar toque, auto animar, escolher o estado, clicado, fácil e fora e ponto zero, digamos seis segundos apenas para que tenhamos esse fluxo agradável. E agora podemos voltar ao estado clicado, localizar nossas setas mais uma vez. Agora, ponto de toque esquerdo. Use as mesmas configurações, mas vá para o estado padrão. E manadas leiteiras. Agora podemos voltar ao estado padrão. Foi na África. Use setas. Então à direita, guia, aponte, clique aqui. Vá para o estado clicado. Mude para o nosso estado clicado. Setas, ponto DAP esquerdo clique ali. Vou para o estado padrão. Como você pode ver, o Adobe XD, pelo menos três membros, todas essas configurações, para que você não precise inseri-las. Mais uma vez, o que não era o caso sempre, você costumava ter que fazer todas essas coisas. Então, foi realmente uma tarefa. Mas agora está muito melhor, Dandy, melhore, pai. Só desejo que continuem a melhorar isso. E eles disseram que viram, eu confio neles porque todas essas mudanças ao longo do tempo com esses estados. Então, por exemplo, eu não teria que pausar o vídeo e depois voltar e editar todas essas imagens. Talvez eles, haverá outra opção no futuro que você pode simplesmente arrastar essas imagens e você não precisa adicioná-las a todos esses estados manualmente e alterá-las todas. Então vamos voltar finalmente aqui para clicar Estados e setas esquerda para apontar. Clique bem ali. Nós vamos para o estado padrão está em nosso 0.6 e voltar para o nosso estado padrão. E podemos voltar ao design e clicar em Preview. Vamos ver como tudo isso se parece. Podemos ir para os nossos destinos europeus, localizar a nossa seta, clicar nela, e vai mudar para saber como estão aqui. Clique em, vai mudar para ouvir. Isso ainda funciona, efeito pairar ainda funciona. Vamos fazer isso rapidamente por todos eles. Então funciona. Funciona bem aqui. Vamos voltar para aqui. Funciona. E eu sempre vou recomendar que você verifique seus projetos porque às vezes há falhas no lado XD, mas na maioria das vezes há alguns erros que, por exemplo, você esqueceu de incluir e coisas assim. Então, antes de passar para esta seção com os nossos principais destinos para este vídeo, Eu quero corrigir e um rapidamente adicionado estes elementos simples como este em, por exemplo. Então reserve a viagem dos seus sonhos. Vou apenas localizar minha imagem na minha pasta de imagens e arrastá-la e soltá-la dentro de um canário. Posicioná-lo se eu quiser, mas acho que parece bom. Eu não quero fazer o próximo é saltar bem aqui de, então há uma viagem perfeita para qualquer um pode ver. Eu vou trazê-lo e eu vou realmente, em vez de sonhar e quando mudar isso para parecer perfeito. E a razão pela qual estou fazendo isso é porque vamos exportar isso mais tarde. Então, é melhor mudar todas essas imagens agora e mudar seus nomes. Então, é muito mais simples exportar mais tarde. Finalmente, vou saltar para o rodapé. E para o nosso rodapé vai ser realmente bastante simples. Nós vamos ter imagem de rodapé, que vai ser neste. Então deixe-me ver na minha pasta. E lá está ele, e arrasta e solta em lugares como uma garota deitada por aí, Chilling. Então o que vou fazer é duplicado. Então, a mesma coisa mais uma vez, nós vamos para aqui para quase preto. Vamos chamá-lo de rodapé. Cor, sobreposição e pintura, como fizemos com o vídeo, vamos baixar para 70%. E é basicamente isso para este vídeo. A última coisa que posso fazer por este antes seguir em frente e terminar com isto e isto aqui, que nos levará a maior parte do tempo. Esta seção na parte inferior, talvez eu possa deixá-los com esta seção. Então categorias de viagem, podemos talvez mais 12 dívida. E eu posso fazer isso muito rápido. Então vamos saltar para dentro de lá. Então o que vamos fazer é abrir todos os três assim. Então vamos chamar este cartão de bem-estar. Vamos chamar este esquiar e chamar este cruzeiros. E nós vamos dar isso para cruzeiros ordem de cor cartão, Lee. E nós basicamente vamos copiar esta seção aqui. Segure bem aqui, então use isso como corrente Keaton. Embora clique aqui, colá-lo assim, e colá-lo bem aqui, mas eu tenho que copiá-lo. Tão conhecido cachecol pulando bem aqui baseado nele, e é basicamente isso. Agora, para essas sobreposições coloridas, o que queremos fazer é basicamente baixá-la para 50%, por exemplo. Então vamos fazer isso. Clique bem ali, volte para 50. Vá para este, clique nele, volte para 50. E, finalmente, clique neste, mude sua cor, volte para 50. E agora temos a nossa imagem. Então eu vou usar isso. Então talvez possamos fazer como esqui atual e, em seguida, cartão de esqui, imagem, cruzeiros, carrinho vai imagem Gag e assim por diante. Então talvez possamos fazer isso. Vamos esconder rapidamente e essas sobreposições coloridas, eu posso trazê-los para baixo para 0. 0. Agora vou duplicar este. Então, guarda de bem-estar, IMG, você vai receber este cartão de cruzeiros. E finalmente, neste, então cartão esquema, eu sou G. Agora precisamos esconder este, e só para que não tenhamos essas falhas que eu expliquei na seção de heróis. Então deixe-me localizar minhas imagens. Então vamos começar com a imagem de bem-estar. Então eu vou arrastar e soltar no lugar. Lá está ele. Vou passar para cruzeiros e arrastar e largar. E finalmente, eu vou trazer minha imagem de esqui m, Iso. Eu vou trazer minha cor ou apenas 50%, trazendo isso em 50%, e finalmente colocar isso em posição em 50%. E agora o que podemos fazer é Vamos ver, neste Wellness, Wellness viagem, por exemplo. Passeio de cruzeiros, meu pai, e finalmente viagem de esqui. Então podemos fugir decola bem aqui. Então aperte a tecla Control, Control K aqui e a tecla Control aqui mesmo para criar estes como componentes. E finalmente, igual a todas as outras, mas vamos ficar com a propriedade dela, desculpe, não o estado em si. Então pairar e sujar. E dentro do Howard, o que vamos fazer é esconder rapidamente este duplo clique na nossa imagem. Então basicamente a mesma coisa. Basta ampliar a imagem dentro da máscara um pouco assim. Voltar ao estado padrão, cruzeiros, a mesma coisa. Então crie um pairar. Dentro do pairar, vou esconder minha cor oralmente. E a razão pela qual eu deixei esses fundos, por exemplo, é talvez eu queira adicionar algum tipo de sobreposição de cor em cima dele. Talvez eu queira adicionar algumas sombras de fundo. Talvez queiramos adicionar todos esses elementos diferentes. Então vamos manter isso aí por enquanto e talvez mais tarde queiramos voltar a ele. Portanto, é sempre melhor ter essa opção desde o início. Então aqui vou usar um estado de horror. Mais uma vez, horror. Vamos ver. Então talvez eu possa me esconder, faz duplo clique aqui e ampliá-lo. E, na verdade, já tenho uma ideia. Então, porque eles já têm essa sombra, eu vou aumentá-la para ajudar em basicamente ter o mesmo efeito que nós fazemos com todas essas outras cartas. Então é por isso que nós temos isso apenas como uma opção. Então talvez queiramos editá-lo mais tarde, como estamos fazendo neste caso, mas não no estado padrão. Fui ficar com ele às cinco. Atreva-se. Quero ir para Horace State e depois abri-la. Localizado, transformá-lo em assim. Voltar para o estado padrão. E, finalmente, no nosso bem-estar, quero ir para Horace State e depois mudá-lo para comer hábitos lácteos. E isso é tudo o que vamos fazer para este vídeo. Então, como podem ver, fizemos bastante. Em seguida, vamos lidar com os principais destinos, e então vamos lidar com esses depoimentos. E finalmente com esta seção, que na verdade vai ser o mais desafiador em termos de animações, porque nós vamos lidar com um monte de esconder um monte de dois estados diferentes. Mas não vai ser tão difícil. É só que consome muito tempo. Mas antes de fazermos isso, vamos visualizar rapidamente o que fizemos até agora. Então nós terminamos tudo isso. Tudo isso parece bem, como você pode ver, a imagem parece ótima aqui. Tudo isso parece bem. Vamos lidar com isso mais tarde. E agora aqui temos isso. Então o que eu não gosto sobre isso, obviamente, é que nós temos que mudar este texto de cinza claro para branco. Então, vou fazer isso agora. Então localize-os. Então eu vou mudar, isso vai ser mais fácil. Branco, branco aqui para branco. E então eu vou mudar de volta. Ok, tudo bem. Então paire, paire e paire. Isto é branco, branco, branco, o que é bom. Então, basicamente um seguido o estado padrão como deveria. Mas como ele disse, sempre muda e sempre. Quando você estiver fazendo alterações, verifique sempre se elas se aplicaram. Então, como disse no vídeo anterior, se você quiser mudar um desses cartões, se você, por exemplo, saltar bem aqui. Agora sabemos que este foi o primeiro cartão para a Paris que eu criei. Mas se um salto bem aqui e mudar isso para vermelho, por exemplo, como você pode ver, ele não está atualizando em tempo real em todos eles como deveria. O que podemos fazer é clicar com o botão direito nele. O componente principal vai mostrá-lo aqui mesmo. E agora neste componente principal, se eu abri-lo porque mudamos os nomes de todos esses carros, por exemplo. Agora, se eu mudar para vermelho, você pode ver que ele muda e se atualiza em tempo real em todos eles. E, por exemplo, se eu voltar controle zed, talvez eu queira arredondar as curvas para 10, 80 por cento, por exemplo. E você pode ver como esses cantos se parecem bem aqui no fundo. Mas talvez eu não queira fazer isso. Talvez eu queira arredondar, eu não sei, talvez eu queira expandir isso para, digamos, 500. E se eu voltar aqui, você pode ver. E isso mostrou que a mudança em tempo real em todos eles. Portanto, certifique-se de que, quando estiver fazendo isso, clique com o botão direito do mouse em Editar componentes principais para qualquer tipo de componente que desejar. Se você quiser se certificar de que ele foi aplicado corretamente em todas as alterações de design. Então é isso para este vídeo, Eu vou vê-lo no próximo quando estamos indo para continuar com uma mudança estes e fazer essas mudanças. 31. Como criar design 6: Vamos continuar de onde paramos o vídeo anterior. E agora vamos em frente e terminar esta página inicial, que mais uma vez, por causa de seu comprimento, será a mais difícil. E porque nós já fizemos muito do trabalho aqui na página inicial, vai ser muito mais simples porque se você se lembrar desses wireframes, toda essa seção inferior é basicamente nós estamos apenas copiando e colando. E esta seção aqui está basicamente quase concluída, então será muito mais fácil nessas próximas páginas. Então vamos agora para o nosso destino principal. E o que vou fazer é o mesmo que fiz antes. Vou abrir esta. Deixe-me primeiro fechar todos estes top para que não nos incomode destino. E vamos chamá-lo, por exemplo, topo. Este cartão de doação. E o que vou fazer lá dentro é um pouco diferente do que antes. Vou agrupar tudo isso, acertar o Controle G, chamar de conteúdo. Eu fiz. E vou incluir uma pilha. Ele vai reconhecer a pilha como ele vai de cima para baixo e o mesmo que antes. Você pode obviamente aumentar ou diminuir a pilha entre eles. Mas o que eu realmente vou fazer não é dívida. Então vamos agrupar todos eles. Acho que vai ser muito mais divertido. Conteúdos como esse. E agora inclua isso em uma pilha. Então, sempre que você se move, um deles vai atualizar a corrente em tempo real, como você pode ver, e ele vai dimensioná-la de forma responsável. E isso é especialmente importante mais tarde quando chegarmos à parte responsiva de redimensionamento desta classe. Então, como eu disse, eu vou fazer isso para este fornecido o cartão de destino. Então vamos chamá-lo de primeiro cartão de destino, Vg. Assim, podemos saber que uma vez que começamos a exportar, mais uma vez , temos a mesma sombra ou cinco, vamos aumentá-la no estado flutuante. Primeiro, vamos criar nossos componentes. Então aperte a tecla Control. Vamos para os nossos estados flutuantes. Na verdade, vamos primeiro lidar com o conteúdo em si. E eu vou chamar essa imagem de destino de topo. Selecione esta imagem de destino superior, rebanho leiteiro. E eu vou voltar para minha pasta Imagens, localizar as Maldivas. E eu vou trazê-lo assim. Em seguida, o que vamos fazer é basicamente criar esse estado de pairamento. Então vá com o pairar. Dentro do nosso estado Horace, posso clicar duas vezes aqui, aumentar a minha imagem. E basicamente descer aqui e aumentar a sombra para AIDS como essa. E a razão pela qual coloquei tudo no Hubbard, imagine que, às vezes, seus clientes não gostam desse layout. Então, por exemplo, eles querem que você alterne entre os preços. Talvez eles queiram colocar o preço em cima em vez deste texto. Então é por isso que ter tudo isso em uma pilha é realmente. Economize tempo, porque imagine que eles dizem, “ Ok, coloque o preço em cima.” Quem disse, só não se preocupe. Clique aqui e simplesmente substitua-o assim. E aí está. Você tem seu novo layout com apenas um clique. Então, essas dicas são realmente demoradas, especialmente mais tarde quando você expandir este projeto, quando você entra em muito mais detalhes com ele. E eu realmente acho que essas dicas e técnicas são realmente grande economia de tempo é quando se trata de trabalhar, especialmente em um grande projeto. Então vamos apagar estes e eu vou para o mesmo que eu fiz antes. Aperte o Controle G. E eu vou chamá-lo, por exemplo, destinos. E o que eu vou fazer é manter minha antiga posição chave, esta aqui, fazer 60. E isto deve ficar bem aqui. Isto é velho, mais uma vez aqui. E como têm 44 colunas de largura, desta vez, vamos criar seis delas. Então vamos com 69 sujeira. Vou me posicionar bem aqui. E eu vou simplesmente selecionar estes para realmente descobrir, segurar minha chave antiga. Certifique-se de que eles são 60 bem aqui e posicioná-los para as semeadoras sólidas. Isto e isto. Agora o que eu vou fazer é pular dentro do primeiro, chamá-lo para não-DVS ou folhas mofadas mais simples. E deixe-me pausar o vídeo aqui para que eu possa preencher todas essas informações e voltar. E agora que eu trouxe todo esse conteúdo e incluí uma leitura, deixe-me guiá-lo rapidamente para que você possa ver para o pairar, eu fiz basicamente exatamente a mesma coisa para todos eles. A única coisa que eu fiz é em vez de usar este texto aqui, como este ou tamanho fixo, eu mudá-lo para auto altura apenas para que ele possa escalar muito mais facilmente mais tarde como você pode ver no redimensionamento responsivo. E vai empurrar este texto para baixo. Vai ser muito mais simples mais tarde projetá-lo. Assim que chegarmos a uma parte redimensionada responsiva desta classe. Finalmente, dentro do conteúdo que você vê para que nada realmente mudou, tudo permaneceu o mesmo e incluiu imagens para todos esses diferentes. Então você pode ver para a Toscana e assim por diante, assim por diante. Então vamos finalmente mudar isso e substituí-lo. Então a primeira coisa que eu quero fazer na verdade é ir para a minha seta para a direita, ir para um protótipo clique aqui, e eu vou escolher o mouse. Vou escolher “Easure Out”. E 0.3 se lembrar apenas de ter as mesmas configurações que este. Então, no entanto é o nosso 0.3 e aí você tem. Então eu vou voltar para meus locais, voltar para Design, clique duas vezes aqui, qualidade, topo, em nosso topo, há a nação por aquele hit Control K. E basicamente a única coisa que eu sou vai fazer aqui é usar um novo estado. Então, cliquei minha dívida. E antes disso, podemos ir para o estado padrão e usar nosso destino. E faça a mesma coisa. Então, crie grupo de rolagem horizontal. Então, podemos então ajustado mais tarde em nosso design responsivo deixar a dúvida e vamos chamá-lo e destinos como esse. Então, agora, quando voltarmos para clicado, ele deve traduzir. Simplesmente abriu-o e moveu a nossa lista de nações para este ponto aqui. Lá temos ele. Então podemos voltar para o estado padrão e ir para o protótipo, procurar por nossas flechas, certo? O ponto de tabulação vai usá-lo. Então use a aba auto animar. Clicado é o estado fácil agora e 0.6 segundos. Agora podemos mudar de volta para clicado, localizar nossas setas, critérios de clique do ponto de passo esquerdo, e usar o estado padrão 0.6 está dentro. Vá para o estado padrão, e agora vamos visualizá-lo rapidamente e ver como ele se parece. Então eu posso ir até o fim, evitando todas essas seções diferentes. E aqui estamos nós bem ali. Então paire. Por alguma razão, esta seta ainda não funciona, então eu vou verificá-la, mas pelo menos a animação funciona como deveria. Então eu vou precisar verificar isso porque você pode ver que esta seta para a esquerda funciona muito bem. Então vamos ver setas de estado padrão, uma seta para a direita. Podemos usar hover e ir para Horace estado é 0.3 itemsets. Então podemos ir para o estado de clique e seta para a esquerda já está lá. Então vamos visualizá-lo novamente e ir até aquela seção que está aqui. E agora funciona muito bem. Então, mais uma vez, quando eu clicar nele, ele vai mudar para diferentes locais, o que é bom. Vamos voltar ao Design. E o que vou fazer a seguir é clicar em Salvar. Portanto, controle S ou comando S em um Mac. Ou, mais uma vez, se você estiver usando um documento da Nuvem vai economizar em medicamente. Então o que vou fazer a seguir é trabalhar nesses depoimentos. Então, dentro da seção de depoimentos, o que vamos ter são basicamente quatro imagens diferentes. Então vamos trabalhar neles a seguir. Então eu posso clicar aqui, e nós já criamos este primeiro. Então talvez devêssemos duplicá-los. Então aperte o Controle D, Controle D, Controle D. Acabei de ver que temos para e talvez possamos até nomeá-los. Então cartão de testemunho número um, há o cartão mono, número 2, carrinho de testemunho e número três e, finalmente, testemunho de carbono número 4. Então eu vou clicar no primeiro, localizar na primeira imagem e rebanho leiteiro testemunhos imagens. Vou escondê-lo. Clique no segundo é uma imagem individual número dois. Então vamos fazer masculino, feminino, masculino, feminino. Então vamos fazer uma imagem número três. E mais uma vez, para D é que você pode usar plugins diferentes, mas eu achei muito mais simples me organizar assim. Porque a partir de anos de trabalho, eu acumulei todas essas imagens diferentes que eu posso usar em meu design. Então, mais uma vez, porque temos este primeiro, eu vou passar por estes e eu vou mudar os nomes deles e eu vou voltar em um segundo. E agora que fiz isso, posso mostrar-te rapidamente. Então este é o número um, número dois, número três, número quatro. Agora, o depoimento de Derek permaneceu o mesmo, mas você pode se quiser mudar esses depoimentos e eu realmente encorajo você a fazer porque é muito mais real quando você tem todos esses depoimentos diferentes em vez de apenas um como eu faço neste caso. Então, antes de avançarmos, eu só quero localizar minhas flechas, seta para a direita, ir para o protótipo, corrigi-lo aqui, imediatamente. Então, passe o mouse auto animate, eu vou ir para pairar está fora. É isso. Então isso agora está consertado. E vamos agora seguir em frente e trabalhar com essas cartas para começar. Então o que eu vou fazer na verdade é que vamos trocar entre eles. Então nós vamos ter este 04 vai ficar quieto. Isso eu vou ficar consertado. Isso vai mudar, então precisamos de quatro cópias. Então vamos lá 1234 para isso, mais um para isso, e mais um para 0 para, tudo vai fazer muito mais sentido em um segundo. Então vou esconder isto no fundo. Então 1234, então 0, 1, vou esconder isso e depois escondê-lo. E se eu esconder todos eles, você pode ver o que estou fazendo. Então 2, 0, 2, e depois esconde-o. Eu tinha 01. Vou clicar duas vezes aqui, 0, 3. Eu adicionei 0. Por isso. Vou escondê-lo. Agora, para esta, precisamos da linha da justiça. Como isso. Posso escondê-lo. E finalmente 0, 4, e posso esconder isso também. Agora vou mudar o meu 04. Vou mudar minha linha para algo como, vamos ver, acho que 10 funciona muito bem assim. Então eu vou trazer tudo isso para dentro. Mais uma vez, certifique-se de que todos eles estão alinhados à esquerda. Então vai ser muito mais simples e posicionado na minha lista e ter certeza que eles estão 10 separados, como eles estão aqui. Então o que vamos fazer é fazer uma máscara, obviamente. Então vamos fazer um retângulo como este. E vou chamar-lhe mesquita. E o que você pode fazer porque só a represa está mudando. Você não precisa posicionar todo o caminho até aqui. Você pode simplesmente posicioná-lo aqui, por exemplo. Mas o que eu realmente gosto é incluir todos os meus textos para que tudo fique em uma linha, basicamente. Você pode baixar a obesidade e o xarope, ver onde está. Então pode ser um pouco mais preciso. Você pode ocultar Phil e borda e você pode selecionar tudo Shift Control M ou Shift Command M em um Mac. E podemos chamá-lo de máscara de texto, por exemplo. Agora dentro de nosso primeiro estado e nosso estado padrão, vamos ter apenas o número um para que possamos movê-los para fora do caminho. Pode posicioná-los aqui e, em seguida, 10 pixels para baixo, por exemplo. Então, 0, 1 de 4. E eu não acho que isso realmente funcione bem. Vamos verificar isso. São 19 por alguma razão, por causa dos quatro. - Sim. Apenas deixe isso aí. Acho que está tudo bem. Então o que vamos fazer em seguida, na verdade, é VR indo agrupar estes. Então desagrupe todos eles, Controle G, e eu vou chamá-lo assim de Manion, assim. Agora o que vamos fazer é simplesmente usar rolagem horizontal e expandido apenas para aqui, apenas para que possamos ver esta sombra de fundo aqui. Ou pode até fazer um pouco mais e ver onde estamos aqui. Então, apenas até a borda da sua imagem. E então posso renomeá-lo para um testemunho. Então é a mesma ideia. Vou usá-los, movê-los para fora um pouco assim. E vamos ver, podemos talvez posicionar para 40, por exemplo. São 60. Acho que isso é bom. Agora podemos seguir em frente com os próximos. E eu posso garantir que 60 anos bem, ter certeza de que isso está lá fora e ter certeza que são 60 também, como aquele rebanho leiteiro. Agora que está terminado ou você pode simplesmente movê-los como as letras fazem. Tudo depende de você como você quer fazer isso. Então o que queremos fazer a seguir é acertar o Controle K em nossos depoimentos. E podemos, por exemplo, dar testemunho deste estado. E o que podemos fazer obviamente é saltar para dentro nossos depoimentos e vamos seguir em todos eles. Então vou selecioná-los assim. E lá, lá temos. Então, apenas para que eles se alinhassem com a nossa grade bastante bem. E dentro de nossa máscara de texto, o que queremos fazer é selecionar o número um e o número 2. Primeiro de tudo, posição número 2 em seu lugar como dívida. Mais. Número um fora do caminho, meu pai, por exemplo, cria um novo testemunho. Desta vez, vai ser o número três. Número três, assim. Dentro de nossos depoimentos, você pode simplesmente pegar sua pasta. Podemos posicioná-los aqui. E só para ser um pouco mais preciso, posso me mudar assim. E finalmente vá até sua máscara de texto e faça a mesma coisa. Então mova o número três no lugar até que ele se encontre bem ali. E depois mais número dois fora do caminho até que se encontre com o número um. Então você pode ver onde isso vai dar. É realmente bastante direto. Finalmente, vou usar este texto e criar mais um estado, que será o último. Então o testemunho número 4, salto É ou em depoimentos, use sua pasta e clique aqui e simplesmente posicione isso para se alinhar com sua grade perfeitamente. E, em seguida, máscara de texto do usuário e vá para o número 4. E parece posicioná-lo no lugar com estes. Certifique-se de que, mais uma vez, você está alinhado corretamente. Tire isso do caminho assim. E a última coisa que quero verificar é o número dois. Veja se consegui. Eu não fiz. Como pode ver, bem aqui. Então eu vou movê-lo apenas um traço como esse. Então nós temos isso. Vamos agora passar para prototipagem densa, então testemunhos. Vou passar para o protótipo e vamos usar e flechas, obviamente. Então flechas, certo? Ponto de tabulação. Nós vamos usar guia auto animate, escolher o testemunho número dois é 0.6 segundos. Então, mais uma vez, o mesmo tempo de animação. Vamos com o testemunho dos heróis. O ponto de tabulação direito. Testemunho três à esquerda nesse momento vamos ter um depoimento, que é o padrão, que é o número um. Vamos para o número 3 e usar a mesma coisa. Então as setas deixaram esse ponto vai nos levar ao número dois. Certo? Nesse ponto vai nos levar para o número quatro. E finalmente dentro de um número quatro, vamos ter uma seta para a esquerda e um ponto de passo para a esquerda, que vai nos levar ao número três, rebanho leiteiro. Vamos voltar ao estado padrão e verificar rapidamente e ver o que temos aqui. Então, se nos movermos até aqui, onde estão os nossos depoimentos? Eles são bons e grandes. Então o que vamos fazer é pairar bem aqui. Como você pode ver, flechas estão balançando. Finalmente, clique em. Vai mudar. Os números vão mudar muito bem. Clique aqui e aqui. Então tudo funciona como deveria em vez de r. seta para a direita mais uma vez. Então eu realmente não sei por que é tão teimoso. Então teria que ir muito rápido. Testemunho. Então testemunho de que eu vou encontrá-lo seta para a direita, clique sobre ele e usar o meu hover. Vá para os estados de terror, vá com calma e 0.3 segundos. Então vá para o depoimento três. Mais uma vez, eu realmente não sei por que ele está fazendo isso comigo, mas como você pode ver, às vezes você vai ter esses bugs teimosos do Adobe XD. Porque eu não, eu não entendo. Eu consertei no estado padrão. Deve propagar-se para todos esses outros estados. Mas como você pode ver, ainda não é. Por alguma razão desconhecida. Lá temos ele. Então estado padrão e mal ir. Então, basicamente, as dívidas. E eu vou pausar o vídeo aqui para que eu não te aborreça e te sobrecarregue com muita informação. A última etapa que teremos é esta aqui. Então eu vou vê-lo no próximo vídeo onde quando finalmente estamos indo para terminar esta seção, e eu realmente posso ir sobre isso neste vídeo. Mas como eu disse, eu não quero sobrecarregá-lo muito porque esses vídeos são longos como eles são. Porque como você pode ver, há muita informação para eu incluir em um único vídeo. Então, eu vou vê-lo no próximo quando estamos finalmente indo para terminar esta página e seção de mesa coberta. 32. Como criar design 7: Finalmente, vamos em frente e terminar esta página trabalhando nesta seção. E eu vou simplesmente transformá-lo porque você viu que nós temos como um componente. Talvez possamos editá-lo no estado padrão, ousar, mas o que eu realmente vou fazer é clicar com o botão direito do mouse em Ungroup componentes, depois Control G. E finalmente, eu vou chamá-lo, vamos ver. Não sei por que se fez isso. Então vamos ver. Vou colocá-lo em um grupo para que eles não voem para longe como fizeram. E eu vou selecionar este texto ou clique com o botão direito em OK no componente grupo agora e agora o estado onde eles devem estar, eu vou pressionar a tecla Control para criar essas perguntas comuns. E eu vou criar um novo estado, que é chamado, é a minha viagem. Protegido assim. E vamos fazer isso, obviamente, por todos eles. Então, no estado padrão, todos eles são fechados. No primeiro estado, o primeiro vai ser aberto e todos eles vão mudar para baixo. Então, como você pode fazer isso? Você pode fazer isso com a pilha se você quiser, mas eu não vou, eu só não vou muito complicado. Vou lidar com isso assim. Então, primeiro de tudo, porque está aberto, vamos mudar isso para aqui. Então vamos trazer esse texto de volta. Então, para 0. Vamos mover o divisor para baixo assim para a borda dos nossos textos, assim. Shift 1, 2, 3, 4, então está 40 pixels abaixo. O meu pai. E então nós simplesmente vamos selecionar todos esses outros como este e mudar para baixo 40 também. Ou isso ou podemos até ir mais longe, por exemplo, então talvez 80 apenas para nos dar um pouco mais de espaço. Então vamos ver 1234. Eu acho que funciona ainda melhor porque você pode ver, por causa desses resultados, ele não corta muito longe daqui, mas talvez possamos até ir 60. E agora é muito mais perto daqui. Então você pode ver apenas alguns pixels para baixo. Então 40 e 60 são os valores que vamos realmente cobrir. Então o que você vai fazer é ir para o nosso estado padrão. Clique aqui, novo estado. E a partir daqui vamos para a política de cancelamento porque essa será a nossa próxima. Encontre a política de cancelamento e faça a mesma coisa. Então gire isso para a esquerda para se aposentar. Então, assim, eu vou trazer isso de volta. Vou usar o meu divisor e o Julian vai empurrar todos estes para baixo assim só para nos dar um pouco mais de espaço com ele. Então eu vou usar minha linha divisória, este 1234, e trazê-lo de volta até que esteja em 60, assim. E lá temos. Então vamos agora passar para o estado padrão mais uma vez. Agora, neste vai ser seus parceiros ou escolher seus parceiros. Eu fiz. E para os parceiros, para nós, vamos mover esta viagem personalizada para fora do caminho todo para que tenhamos algum espaço para trabalhar com o ícone de fechamento. Então eu vou simplesmente segurar minha tecla Shift assim. E eu vou trazer isso de volta. Eu dat. E vamos ver. Eu posso mover meu divisor todo o caminho para baixo 1234. E eu vou trazer isso de volta para 60, assim. E finalmente, vamos voltar ao estado padrão e criar um novo estado mais uma vez. E isso vai ser um propósito personalizado e fazer a mesma coisa para ele. Então viagens personalizadas, eu vou girar este ícone para ler cidades assim. Traz as costas dele e move o meu divisor e para baixo 40, o meu pai. E é basicamente isso. Então, a única coisa que nos resta fazer agora é, obviamente, protótipos. Então o que eu vou fazer primeiro é ir para o protótipo. E no meu estado padrão, o que eu quero fazer é a partir deste estado padrão, eu quero clicar em cada um deles para chegar onde eu quero ir. Então o que isso significa é quando você clica aqui. E, por exemplo, podemos até ir um pouco mais fundo, mas acho que está tudo bem. Clique bem ali. Então eu vou usar a etapa auto animate, escolher o estado, então minha viagem está protegida? Vamos fácil e sair e 0,6. Então ele vai se lembrar dessas configurações. Clique neste, faça o mesmo, mas esta política de cancelamento, esta é para os parceiros viram, vamos aqui. E finalmente, viagens personalizadas. Eu vou para aqui mesmo. Agora. Eu vou para esta parte assim. Então, com este, é minha viagem protegida, eu vou usá-lo para voltar ao estado padrão porque eu quero que ele seja fechado. A política de cancelamento obviamente vai nos levar lá. Então, política de cancelamento, isso vai nos levar aos sócios. Eu estou morto. E finalmente, isso vai nos levar a viagens personalizadas. Vamos para o próximo. Então política de cancelamento, mais uma vez, este vai nos levar para a minha viagem protegida política de cancelamento vai nos levar para o estado padrão porque queremos que ele seja fechado. Os sócios vão levar-nos aos sócios júnior e, finalmente, viagens personalizadas. Vai levar-nos a viagens aos clientes. E finalmente, vamos lidar com escolher seus parceiros. Então aqui está a minha viagem. Detectado. Política de cancelamento que parceiros, vamos para o estado padrão. Mais uma vez, queríamos fechar. E este vai para viagens personalizadas. E agora, finalmente, vamos lidar com o último estado. Então, finalmente, isso vai ser, é Madrid política de cancelamento protegido. E a propósito, estou selecionando-os daqui porque você pode ver que eles estão se sobrepondo. Então eu não quero que ele tenha quaisquer falhas porque é muito mais fácil para mim assim. Escolha seus parceiros é este. Esta é a política de cancelamento e você pode clicar sobre eles e ver aqui o que você selecionou. E depois, finalmente, viagens personalizadas. Queremos que ele vá para o estado padrão porque queríamos fechar. E agora vamos em frente e ver o que criamos. Então podemos voltar ao Design. Clique aqui e, em seguida, estado padrão. E mais uma vez, a razão pela qual eu os coloquei em uma pilha como esta, essas duas seções é mais tarde, eu posso clicar aqui e você pode ver que eles vêm aqui e eles vão manter todas essas animações incluídas dentro. Então vamos voltar aos tempos e vamos finalmente Anterior. Veja o que temos. Meu pai, vamos até o fim e localizar nosso Q&A. Então, uma vez que você clica bem ali, você pode ver que ele se abre e isso vira de um plus para fechar muito bem. Isto faz a mesma coisa. E você pode ver algumas falhas aqui dependendo de onde você clica assim. Então, se eu clicar aqui, você pode ver que abre este. Então talvez não devêssemos usar algumas máscaras aqui. Mas quando você clica bem ali, por exemplo, ele se abre neste. Então, certifique-se de dizer isso aos seus clientes. E talvez você possa até clicar nesses ícones. Mas agora porque descobre. Então você pode ver alguns problemas aqui, mas você pode dizer aos seus clientes e apenas para prestar atenção a isso, e obviamente isso é apenas para uma conveniência desafio. Todos esses protótipos, e, claro, para a conveniência dos desenvolvedores eles sabiam o que você quer deste design? Então, mais uma vez, você pode dizer a eles , por exemplo, se isso, se você clicar aqui e ele abrir este, é porque este texto se sobrepõe. Então, certifique-se de clicar, por exemplo, em algum lugar por aqui. Em seguida, abrirá esta e a mesma história para esta. Então, finalmente, isso é tudo para esta página, é isso para este vídeo. Uma última coisa que quero fazer é usar todos eles. Então aperte o Controle G. Eu vou colocá-los em um grupo, chamá-lo de homepage assim. E eu vou usar a pilha. E a razão pela qual eu estou usando a pilha, você pode ver que ele reconhece 150 é mais tarde quando você começa com o design responsivo, é muito mais simples de usar pilhas, especialmente se você quiser reduzir esse espaçamento entre seus itens, entre suas seções. Especialmente em, por exemplo, design móvel onde você realmente não precisa de 150 pixels entre todas essas pequenas seções. Você pode ir embora com, por exemplo, 80 ou 60 ou centralmente, que é muito mais simples reduzir o espaçamento entre eles quando você simplesmente seleciona, por exemplo, a seção da sua página inicial, mantenha pressionada a tecla shift e simplesmente reduzi-los assim. Você pode ver como isso funciona. E, claro, Stack é ótimo porque se você quiser, por exemplo, colocar isso aqui, você pode simplesmente fazer isso e mostrar a um cliente se ele quiser algumas mudanças rápidas. Então, como eu disse, é isso para este vídeo. Vejo-te na próxima, quando começarmos com a página de destino. 33. Como criar design 8: Vamos agora para a praia de destino. E espero que isto seja muito mais simples do que este. Então o que eu vou fazer é segurar minha tecla ALT e arrastá-la aqui e ver o que temos aqui. Acho que eram 70 entre estes. Sim, é. Então eu mantenho minha tecla ALT e você pode ver aqui, diz 70. Então eu vou arrastá-lo para 70 bem aqui. Chame de destino InDesign. O mesmo que fizemos aqui atrás. E o que eu vou fazer é clicar aqui, usar minha seção superior, então clique nela. E vamos ver. Sim, vamos copiar toda a parte superior. Vamos pular bem aqui. E eu posso clicar dentro e eu posso, por exemplo, apertar Controle V. para que eu possa basear toda a minha seção superior em. O que vou fazer em seguida é removido meu traseiro agora porque eu não preciso mais dele. Minha imagem de herói porque eu não preciso dela. Vou remover o meu antigo equipamento de navegação primário assim. E o que vou fazer é usar a minha imagem de herói e vou duplicá-la. Vou chamá-lo de sobreposição de cor de imagem de herói. Eu não sei. E porque isto vai ser Paris, vou chamar esta imagem de herói barris. Então eu vou esconder minha sobreposição de cores, saltar para a minha pasta de imagens, arrastá-la para aqui, assim. Traga de volta a minha cobertura de cores. E vamos ver, eu posso usar as mesmas configurações. Então eu posso ir aqui. Quase preto. E vamos ver, 70% como o pai. Finalmente, eu vou pular dentro do meu texto e mudá-lo para branco porque eu acho que ele se destaca mais como dívida. E lá nós temos isso nesta seção superior é feito basicamente navegação funciona exatamente o mesmo como aqui. Mas aqui temos a imagem da justiça. Então você pode imaginar que as pessoas estão, por exemplo, pairando aqui e clicando e vindo a esta página para explorar Paris um pouco mais. Então podemos seguir em frente. E, por exemplo, eu posso entrar aqui, selecionar todos esses aqui para excluir, e então ir até aqui. Vamos ver o que podemos escolher. Por exemplo, daqui. Daqui para baixo Controle C, eu posso vir aqui controlar V, e simplesmente movê-los todos para baixo com uma mudança como essa. E é basicamente isso. Então, uma última coisa que precisamos mudar é esta seção com o hotel e também com esta. Então vamos primeiro lidar com esses filtros. Então o que podemos fazer com os filtros é basicamente o mesmo que fizemos na página anterior. Então nós podemos basicamente usá-los como um componente e então nós podemos estendê-los para baixo. Então temos o preço baixado BG, podemos simplesmente estendê-lo todo o caminho para baixo, assim. E então podemos ter toda essa informação. E então o que eu realmente vou fazer para economizar um pouco de tempo é eu vou usar meu texto. E eu vou clicar aqui mesmo, Controle V, vou me posicionar bem aqui. Então estes são apenas os meus textos originais que eu usei. Ou melhor ainda, vamos fazer isso mais uma vez. Então ele pode vir aqui para a parte superior, superior. Posso abrir a navegação inferior. Posso usar os meus destinos. Posso ir aqui, usar minhas cidades, Controle C. E posso fechar todas essas coisas. Eu posso ir aqui só para mostrar como você pode usar todos esses elementos diferentes. Então ele pode ir para o meu menu suspenso, aperte Controle V. Eu posso posicioná-lo aqui mesmo. Certifique-se de que estou, por exemplo, 20 para baixo. Então o que eu posso fazer é pular dentro da minha divisória com um turno, por exemplo, mais em algum lugar por aqui. E porque estamos na grade de repetição, isso deve mudar tudo isso para baixo. Então deixe-me esconder rapidamente esta seção para que você possa realmente vê-la. Como você pode ver, propagou a mudança. Então, sempre que você mudar este aqui, vai mudar através de todos eles assim. E o que vou fazer agora é usar essas mudanças. Então, por exemplo, clique duas vezes e eu vou digitar algo como cifrão. Eu preciso mudar e salvar porque, e depois voltar porque o Adobe XD mais uma vez tem algumas dessas falhas. Mas como você pode ver, eu não posso nem digitar. Então deixe-me salvar meu documento e voltar. E agora que ele se consertou uma vez que eu mudei, eu vou mudar isso para preços como esse. E vamos ver. Eu posso, por exemplo, mudar neste primeiro para cifrão 100 para 500. E este próximo pode ser de 500 a 100. Não sei, ou podemos incluir nosso sinal aqui. Então, para ambos, por exemplo. E isso pode ser de 100 a 1500. E este pode ser de 1500 a 2000. E, finalmente, podemos escrever neste último, por exemplo, mais de duas chaves de 2000 hierarquia querem. E basicamente podemos simplesmente fechar nossa grade até esse ponto. Então eu posso simplesmente arrastá-lo todo o caminho até aqui. Os preços dos hábitos deles, tudo bem. Vamos ver, onde está o nosso menu suspenso? E eu posso simplesmente fazer a mesma coisa. Então vá para o Controle D. Eu posso chamar essa mesquita. Mas antes de eu ter e fazer todas essas coisas, o que eu posso fazer é pausar o vídeo aqui e basicamente fazer o mesmo que eu fiz anteriormente e fazer todas elas. E então nós vamos voltar e conhecê-los e basicamente terminar nesta seção. Ok, então agora que eu tenho todos eles no lugar, eu só quero rapidamente mostrar a você uma melhor classificação. Porque dentro da classificação, em vez de todas estas, o que eu queria fazer é incluir estrelas reais. Então eu vou clicar bem aqui. Vou desagrupar a grade e vou selecionar todas, exceto a primeira. E classificação de qualidade assim. Então eu vou fazer zoom de volta e eu vou localizar meu ícone de estrela. Vou clicar aqui mesmo. Clique na estrela, arraste-a para aqui. Volte para o meu painel de camadas e posicione-o onde o topo do texto é assim. Então eu vou remover o texto, ter certeza de que este é 40. Na verdade, vamos posicionar para ser 20, porque não precisamos que seja 40. Então, 20. E o que eu vou fazer é usar nossa grade responsiva, desculpe, repetição aqui para criar cinco deles assim. Certifique-se de cortar todo o caminho até aqui. E então por causa do espaçamento, vamos reduzir o espaçamento para algo como cinco. Acho que vai ser bastante bom assim. E vamos ver, podemos chamá-lo de uma classificação como essa. E saiba que temos nossa grade de repetição. O que podemos fazer é agrupar os dois e criar grade de repetição deles. Então podemos chamá-lo de classificação também. E então podemos chamar a primeira estrela. Como isso. Podemos até desagrupar essas estrelas, fazer o que quiser com elas como quiser. E para este segundo, o que queremos é ter cinco deles. Então, 3, 4 e 5, e feche-o no fundo bem aqui. Então, obviamente, queremos ir do número um para o número cinco. Vamos clicar duas vezes aqui. Certifica-se de que todos eles são cinza. Mas como podem ver, ainda temos alguns problemas aqui. Não sei por que XD faz isso comigo. Então eu vou desagrupar e este só para tê-los dentro, mas eu vou ficar com este. E agora vamos ver o que podemos fazer. Podemos fazer uma grade de repetição aqui. Então 12345, e vamos fechar isso na parte inferior. Então agora, mais uma vez, temos apenas este. E uma vez que você entra, você tem todas essas estrelas. Então o que podemos fazer a seguir é tentar dessa maneira. Então vamos ver, isso deve ser dois. Vamos ver dois a dois. Veja isto. Um. Ainda é um lote. Então vamos realmente desagrupá-los, desagrupar a grade. Então o que temos aqui são cinco grupos diferentes. Então agora podemos facilmente saltar para este aqui. Então padrão vamos ir padrão, padrão. Então, às vezes como você viu, certo, neste exemplo, você pode usá-los como uma espécie de ponto de partida e então você pode desagrupá-los mais tarde e saltar para dentro de todos eles. Mas, mais uma vez, não se preocupe, isso é apenas para seus clientes e desenvolvedores entenderem o que você está fazendo. Basicamente mais tarde, você só vai exportar um deles. E basicamente, os desenvolvedores podem fazer seu trabalho e reorganizá-los e posicioná-los mais tarde. E você pode até dar-lhes nomes separando um. Isso pode ser ou comer também, e isso pode ser classificação 3, isso pode ser classificação para. Finalmente, Disco e B estão comendo. Por. Agora. Vamos em frente e animar todos eles. Então o que eu vou fazer é para cada um deles, como você viu no preço, nós vamos copiar este texto, copiar a mesquita. Então, pule dentro da duração, suspenda BG, copie-o para o topo, renomeie para mascarar e faça o mesmo para atividades. Mesquita, posicione-o no topo. Excursão para a mesma posição da mesquita em direção ao topo. Finalmente, classifique o Controle D e mova-o para o topo bem ali. Então o que eu vou fazer é mascarar sobre eles ou inútil ou Shift Control M. Eu vou chamar este primeiro preço. Controle de Turnos M. Para estes, vou chamá-los de duração. Depois, atividades, Controle de Mudanças M. Vou chamá-los de atividades. Selecione este texto Shift Control M excursions. E finalmente, ficamos com eles comendo neve. Controle de Turnos. Selecione a classificação, laticínios são. Então, agora vamos em frente e criar componentes para cada um deles. Então ela controlava a chave para a disciplina. Ou como eu disse, você pode simplesmente clicar em displays aqui se for mais fácil, mas para mim, é apenas uma memória muscular. Então, a tecla Control para cada profundidade. Então, o que você vai fazer para cada um deles é criar estado clicado. Então eu vou para o Controle K para cada um deles. Vou criar um estado clicado para DS1, excursão, clicado e classificação finalmente, assim. Agora, porque nós temos essa sombra, o que eu quero fazer é dentro do estado padrão para cada um deles. Então, vamos voltar. Na verdade, eu deveria fazer isso primeiro, mas às vezes quando estou falando, meu cérebro é mais lento que minha quantidade. Então, basicamente, estamos em 2, 2, 4, então talvez, talvez, 20, 30 a 35. Vamos ver onde estamos. Acho que 234, podemos ir com 240. Acho que é bom o suficiente para a máscara em si. Vamos fazer o mesmo por este. Então localize a mesquita 240 de largura apenas para que possamos ver a sombra depois. 240. Faça isso é o mesmo para a excursão. Então você pode ver por que eu estou pausando esses vídeos só para eu não entediar você com muitos desses detalhes. 240, e isso é basicamente tudo por agora. Agora, vamos entrar em um estado de clicker para cada um deles para que possamos expandi-los para baixo. Clicou. Eu fiz. Então, indo dentro do preço e simplesmente, vamos primeiro expandir nosso menu suspenso e ver onde ele está neste caso. Então, para algo assim que é 450, vamos chamá-lo. E podemos fazer o mesmo pela máscara. Tão expandido, como ousar, por exemplo, eu acho que está tudo bem. Então, por 70. - Sim. E vamos em frente e fazer o mesmo durante a duração. Então vamos ver, podemos fazer o mesmo. Então, para o menu suspenso, podemos usar 40 a 50 e para a máscara podemos usar para 70. Agora, vamos em frente e fazer o mesmo pelas atividades. Para as atividades, Vamos ver 450 ou para mascarar para 17. Encontre isso. E vamos passar para excursões. Porque isto é muito menor. Como você pode ver, nós só temos dois deles. Podemos olhar tão grosseiramente por aqui. E, em seguida, com mesquita aproximadamente por aqui, por exemplo. E a mesma coisa para a classificação porque é muito menor. Podemos usar um menu suspenso e expandido para aproximadamente por aqui. E então faça o mesmo para as mesquitas ou expandido para mais ou menos por aqui. Agora que você fez isso, o que eu vou fazer na verdade é usar todos eles em um inverno, mudar a cor para o ícone e para o texto em si. Então o que eu vou fazer é saltar para dentro e usar um ícone de dólar e um preço e mudá-lo para cinza escuro. Meu pai, por alguma razão, não vai mudar. Então eu vou salvar e voltar para você mais uma vez. Tudo bem, então agora está consertado e eu posso realmente mudá-los. Então o que eu faria, porque há uma mesquita no caminho, eu simplesmente selecionaria o ícone e o texto e voltava para aqui e mudá-lo como papai, é um pouco mais demorado, mas o que você pode fazer? O Adobe XD tem suas maneiras às vezes. Então eu vou mudá-lo lá. E basicamente por que estou fazendo isso é apenas para indicar que isso é selecionado. O que também pode, o que isso também pode dar ao seu cliente? Ideia fácil se eles querem fazer a mesma coisa na página inicial. E também dá a você, como designer, uma idéia do que você pode fazer para explorar os itens selecionados. Então, agora que temos todos esses filtros no lugar, podemos ir para o estado padrão para todos eles. Agora que concluímos todas as nossas animações e reabilitação, aplicar botão filtros, estado padrão, estado Horace. Então vamos deixá-lo no padrão. Vamos ao protótipo. E assim, quando eles clicam bem ali, toque, estamos usando estado inimigo automático é clicado. Facilidade em 0,6 segundos. Podemos alterá-lo para clicado, clique aqui e voltar para o padrão, estado. Duração, a mesma coisa. Então clique bem ali. Clique em estado, mude para clicado, clique aqui e volte para as atividades de estado padrão. Então, mais uma vez, não se preocupe com a área. É importante incluir. Ele também usa Não perca. Então ponto de toque é bem grande. Voltar para clicar e clicar aqui e ir para o estado padrão. E, finalmente, para a classificação iria mudar isso de volta para o padrão. Para a classificação, clique em, ele vai levá-lo para animar automaticamente. Ele vai levá-lo para clicado, mudar para clicado clique aqui mesmo. Ele vai levá-lo para o padrão, estado, alterá-lo novamente, e vamos pré-visualizar rapidamente esta página. Então, mais uma vez, temos este botão bonito bem aqui. E se eu te levar aqui, você pode ver que a navegação está funcionando muito bem. Tudo isso funciona como deveria. Clique aqui, como você pode ver, ele se expande bem. Funciona como deveria. Para todos eles. Foi ótimo e pairar funciona aqui. - Tudo bem. Então vamos agora focar rapidamente nesses cartões de hotel e eu vou tentar passar por eles o mais rápido que eu puder. Então, basicamente, o que queremos com eles é que nós queremos que eles façam a mesma coisa que nós fizemos anteriormente basicamente. Então nós queremos que eles mostrem todas as coisas que todos esses outros cartões estavam mostrando em páginas anteriores. Então basicamente queremos criar um, criar esses elementos e Dan basicamente ajustar e descer assim. Então eu vou mostrar o primeiro cartão. Vou remover estes. Mas deixe-me ver, são 50 pixels aqui por alguma razão. Vamos ver, talvez possamos incluir 60 mais tarde. Então vamos deletar. Então nós temos corrente adulta e deixe-me entrar e eu vou usar a imagem do hotel número 1. Então isso vai levar o hotel laranja 1. Temos a informação que é boa e divisor. Então, tudo está onde deveria estar. Eu só quero mover estes para um pouco para baixo. Eu realmente não o vejo aqui. Então, talvez aqui, então posicione isso aqui. E então vamos ver, estamos onde dez pixels, 20 pixels, por exemplo. E simplesmente mova o cartão do hotel para aqui. Quando isso acontecer. Então vamos ver, 10, 12, 20. Sim, vamos deixar isso aqui por enquanto. Eu acho que está tudo bem. Para mim ainda melhor, podemos simplesmente mover este 10 pixels para cima e agora temos muito mais espaço para respirar. E finalmente, vou empurrar esta imagem para que ela se encontre. Agora que temos nossa primeira seção concluída, vou pressionar a tecla Control criada como um componente. Vamos ter estado pairando. Meu pai dentro do pairamento, mesma coisa de antes. Então eu vou aumentar isso para deletar. Vou trocar minha flecha, localizar minha máscara. Aqui está. E eu vou simplesmente posicionar em dois aqui. Então eles estão feridos quando voltar para o nosso estado padrão e finalmente fazer a mesma coisa como antes. Então segure sua tecla Alt, posicione-a aqui, e vejamos, 60 pixels. Eu acho que está tudo bem. Então, para o cartão número um, e este é o cartão do hotel número 2. Este vai ser o cartão número três do hotel. O meu pai. E finalmente, este vai ser o cartão de hotel número 4. E eu vou trabalhar neste segundo só para mostrar a vocês como isso vai parecer. Então deixe-me copiar rapidamente alguns elementos. Enfrentei um Min Eu vou fazer o mesmo para este texto e vamos rapidamente analisá-lo. Vou trazê-lo de volta para aqui. E trazer isso de volta para aqui, por exemplo, eu acho que vamos ver, talvez eu possa até expandir meus textos para aqui para que ele não distraia meu divisor. Deixe-me copiar o novo e destino, que é este aqui, porque ele está em uma pilha, ele vai se mover muito bem. Então, finalmente, para a classificação, vamos dar quatro estrelas desta vez. Eu fiz. Em vez de 14 dias, vamos ter 12 dias, por exemplo, o meu pai. E em vez de 1250, vamos ter, vejamos, 960 como dúvida. Mais uma vez, imagens são tiradas de elementos Envato em que renomear esta ferramenta para a imagem do hotel e selecionar tudo, exceto para a seta. Vá para o meu horror, abra e controle V. E eu vou apagar tudo mais uma vez, exceto o adulto. Então, querida, como você pode ver o quão fácil e simples disco é. Deixe-me pausar o vídeo e, na verdade, nomear foi pausar o vídeo. Vamos terminá-los rapidamente para que eu possa terminar este vídeo. Isto está ligado à imagem do hotel número três. Esta será a imagem número quatro recortada. E vamos ver. Isso também pode ter estrelas Forrest, por exemplo. Vejamos, classificando quatro estrelas. Clique em Copiar. Não localize. Como isso. E as garras estão arejando. Pode finalmente, vamos copiar rapidamente nossas descrições. Então vamos ver. Eu não copiei o certo. Dairy quem? Leão Terminus, aquele. E vamos ver mais uma vez, vamos ajustar este texto para, por exemplo, algo assim. E vamos ver, talvez possamos até estender um pouco mais até aqui. Vejamos, 30, acho que é bom. Em vez de 14 dias, o que podemos fazer é anos noventa, por exemplo, meu pai Fechar Tudo isso. E pelo preço, temos 740. Então, obviamente, ele vai do mais caro para o topo, para o mais barato adiciona a garrafa. Mas, obviamente, estes hotéis na parte inferior vão ser muito piores do que estes no topo em termos de qualidade de alojamento, qualidade de serviço, e assim por diante. Então isso é o que diz o número três. Eu vou selecionar tudo além da seta Control C. Voltar ao meu pairar Control V. Eu vou excluir tudo além da seta e voltar para o meu estado padrão. E finalmente, cartão de hotel número 4. Vamos primeiro incluir imagem pagar. E vamos lidar com a informação contida nisso. Deixe-me copiar o local rapidamente. Como isso. E para este, por exemplo, classificação pode ser, digamos, três estrelas. Então, 12. Então aqui temos, três estrelas, este é o nome, este é o endereço analítico. Finalmente, copiar a descrição do hotel e eu teria que ajustar algumas dessas coisas para que eu não e eu vou posicionar estes dois aqui. Vou ver se serve. Eu posso até movê-lo para aqui, e isso me dá um pouco mais de espaço. 14 dias está bom. 740 vai ser um preço. E, claro, você pode brincar com esses ícones se você quiser destilar, tem, se um show você, isso ainda tem esses dois estados. Então você pode brincar com eles se quiser. Mas acho que está muito bem. Então, selecione tudo além do ícone. Desculpe, o rebanho de laticínios de flecha, e é isso. A elastina que eu quero fazer é aumentá-los. Então clique duas vezes e aumente-os um pouco assim. E, em seguida, dentro do pairar e fazer o mesmo para este. Então Shift Alt, clique com o botão esquerdo, duvido, e faça o mesmo para este no cursor Shift Alt para a esquerda e, finalmente, o estado padrão. Vamos ver se realmente fizemos isso aqui com não. Então, às vezes, você vai de trás para frente com essas coisas e lá está. A última coisa que eu quero fazer é basicamente uma mudança nessas questões de espaçamento. Então podemos ir da posição 400 tudo isso para baixo. E eu posso ir com algo como 150. Meu pai e simplesmente ir para baixo. Onde está o meu rodapé? Clicando duas vezes no espaço vazio da minha prancheta e expandido para mais ou menos por aqui. Lá temos ele. Agora, mais uma coisa que podemos fazer é agrupá-los como fizemos com este. Aperte o Controle G para colocá-los em um grupo. E podemos chamar esse grupo de destino assim. E, finalmente, clique em pré-visualização para ver o que temos. Então, mais uma vez, se eu pairar bem aqui, menu e irrigação funcionam como deveria. Isso tudo funciona bem. Isso funciona bem, então podemos clicar neles e eles funcionam bem. Eu duvido que isso vai girar sobre o pairar. Parece muito bom. Espaçamento é bom. edição funciona como deveria. Hábitos Derek neste funciona como deveria. Porque nós apenas copiamos e colamos. Tudo funciona como deveria. Então tudo parece bom e limpo. Então, basicamente, isso é tudo para este vídeo. Na próxima, vamos passar para esta página e te vejo lá. 34. Como criar design 9: Vamos agora seguir em frente e criar a tela de oferta selecionada. Então, mais uma vez, vou simplesmente usar a minha chave antiga. Certifique-se de colá-lo aqui, oferta selecionada e quando mudar esta linha germinativa assim. E primeiro, vamos selecionar nossa navegação. Então vamos realmente copiar toda a seção superior. É muito mais rápido. Arraste e solte bem aqui. Veja tentar bem aqui. Então rebanho leiteiro. E dentro desta seção de paradas, vou me livrar disso. Vou me livrar da seção de heróis. Dentro de uma seção superior, temos nosso navegador principal. Então o que você vai fazer dentro deste nav principal é basicamente mudar todas essas coisas. Então eu vou saltar para dentro daqui, entrar no meu logotipo e mudá-lo para escuro. E no estado principal e padrão. O que eu vou fazer é usar todo o texto colocado para fora e mudá-lo para cor cinza escuro. Eu também vou para a navegação secundária e escolher escuro para todos eles como e que eles são Herat. Então agora ainda quando você clica ele vai atualizar e mudar para branco. Mas quando você está em um fundo branco vai ser esta cor. Então vamos ver a seção superior e foi para se livrar do antigo. Temos carrossel, imagens de carrossel. E deixa-me arrastar e largar rapidamente as minhas imagens. Então este é o número um, número dois, número três. E mais uma vez pareceu que com todas essas páginas antigas, eu tenho todas elas de elementos Envato. Então imagem de carrossel. Também temos essas imagens. Então, estes são quartos menores. Então eu não sou o número 1. Este é o número dois. E finalmente, este é o quarto número 3. E basicamente essas são mais ou menos todas as imagens que vamos precisar, exceto por uma seção de hotel similar aqui. Então vamos trabalhar nisso e então podemos seguir em frente para animar isso, exceto pelo conhecimento. Vamos animar rapidamente esta seção porque não é tão difícil. A única coisa de que vamos precisar mais uma vez, esta seta para a direita está nos causando problemas. Então vamos usar o hover e vamos passar para pairar, aliviar 0,3 segundos para que tenhamos o mesmo. E vamos criar isso como um componente pressionando a tecla Control. Estamos de volta ao nosso estado padrão de design. Vamos usar clicado mais uma vez dentro do estado clicado. E a única coisa mais uma vez é que essas imagens vão mudar para aqui assim. Então podemos agora protótipo Petco de volta ao protótipo, voltar às setas, direita, ponto de tabulação, clique nele. Vamos usar a torneira. Autonomia está dentro, fora clicado como um estado. E 0,6 segundos, então parece que fizemos. E finalmente, agora podemos mudar para o estado clicado. Use um ponto de tabulação esquerdo porque queremos que ele volte para aqui. Então nós queremos ir para o estado padrão 0,6 mortes multa. E pré-visualização padrão do garoto, só para ver o que temos até agora. Então temos o pairar sobre os dois. Click, vai mudar. Click, vai mudar. Acho que parece bom. E agora vamos passar para a próxima seção. Mais uma vez, temos essas salas aqui, e você pode clicar duas vezes se quiser adicionar essas imagens. Mas vou deixá-los como estão aqui. O que eu vou me concentrar nesses hotéis semelhantes e não deixou esta seção para o final, porque é o mais complicado nesta página. Então o que temos aqui é que temos informações completas para este. E vamos basicamente criar um componente a partir dele. Então vamos ver. Hotel similar. Os nossos hotéis. Eu fiz hotéis tão semelhantes, atual BG, hotéis semelhantes, IMG, laticínios ir. Então eu vou colocar na minha imagem número 1. Então vamos ver, talvez eu possa usar essas imagens que usamos anteriormente para os destinos. Então vamos ver. Posso ir com, por exemplo, o hotel número 1. Mas digamos que eles selecionaram neste hotel. Então, este primeiro. Então, na verdade, vamos com o que Dell número dois. Então, por exemplo, se eles selecionaram este, eles vieram para esta página, então podemos mostrar-lhes estes três, estes três cartões, por exemplo. Então vamos deixar lá dentro. E agora vamos ter, porque temos essa informação aqui, vamos usá-las como nossa informação secundária. Então, vamos criar rapidamente um componente. Chave de controle é o que você vai usar. Estado Horace. Então paire. E dentro de nossa seção de colheita, mais uma vez parecia que sempre fizemos. Então, oito aqui, vamos mostrar o preço. Então a flecha vai aparecer assim, nosso ego. E, finalmente, a imagem vai melhorar apenas um pouco, para ampliar apenas um pouco. Volte para o estado padrão e mantenha pressionada a tecla Alt, faça uma duplicação. Segure a chave antiga, faça uma duplicata. Então este vai ser mais uma vez hotel um ou ainda melhor hotel também. Só para que saibamos da página anterior. Hotel três e finalmente hotel para. Agora, neste segundo, o que eu vou fazer é rapidamente e arrastar essa imagem. E eu vou fazer o mesmo por este. O meu pai. E agora posso me concentrar em fazer essas mudanças. Então, primeiro de tudo, este primeiro, eu, segundo vai ter a classificação de quatro estrelas, então não cinco estrelas. Então eu posso ir para o meu estado Horace e mudar minha classificação para ser quatro estrelas, como é. Então, isso é ótimo. O segundo vai ser quatro, mas este terceiro vai ter uma classificação de três assim. Agora vamos nos concentrar neste segundo. Então eu vou realmente copiar mais uma vez, informações do meu design original. Então eu mesmo um pouco de tempo. Vou copiá-lo aqui mesmo. E finalmente, a descrição deste hotel vai ficar bem aqui. Em vez de 12 dias, vamos nos concentrar em nove dias. Nove dias. E vamos ver o que podemos fazer com esse espaçamento. Então talvez possamos aumentá-lo para dois ou seis. Acho que está tudo bem. E o preço é de 20. Vamos verificar aqui. Na verdade não é, é 740, então vamos usar esse. Então 740 e usamos 744, este último. Então vamos com isso mais uma vez. 49 dias. E este é o que C na verdade nove dias e 14 dias é para este último. Então, 14 dias eu sujarei. E finalmente o que vou fazer é fazer a mesma coisa. Copie a informação do meu design original, cole isso aqui. O meu pai. E finalmente, copie e cole meu texto no rebanho leiteiro. Então é isso para esses estados originais. Nestes. Eu vou fechar todos eles assim, então eu vou fechar esta única informação. E finalmente, basicamente posso mudar os nomes. Isto vai ser, vamos ver, hotel ou hotel similar na imagem. Vamos deixar isso. Isso vai ser semelhante hotéis imagem dois e semelhantes hotéis imagem três. O meu pai. Então o que eu vou fazer é selecionar todos eles. Ou o que eu estou pensando é que isso pode ser porque ele diz hotel para imagens semelhantes, ferramenta de hotel. São imagens semelhantes, hotel três. E este é semelhante imagens hotel para, só porque nós criamos estes hotel para hotel de três hotéis para. Então eu vou simplesmente copiar este nome. Volte para o meu estado de horror. Como sujeira e dentro dela, vou mudar o nome assim. E vamos simplesmente ver se ele aparece. Não funciona, então temos que atualizá-lo mais uma vez. Então, em vez da data do Horace, clique duas vezes aqui, e vá para dentro da sua imagem, amplie. - Ele. Parece ótimo. Vamos verificar agora. Ainda não funciona. Então vamos em frente e voltar para o estado padrão, copiá-lo daqui, ir para o estado de horror, colá-lo aqui. Mais uma vez, não sei porquê, por causa das pilhas. Está bem. Então, basicamente, aqui. Então eu vou remover o antigo e eu vou clicar duas vezes dentro, ampliá-lo um pouco assim. Volte para o estado padrão, e agora vamos pressionar a visualização e ver se ele aparece agora. Ainda tem alguns problemas entre essas imagens. Então o que eu vou fazer na verdade é voltar para o padrão, estado, selecionar todos os meus itens, Controle C. Então, em vez do em vez da seta, nós ainda vamos ter que expandi-los feito, não é? Sim, mas podemos mudar isso depois. Então o que vamos fazer é ir da imagem 2 aqui. Então imagem em Mill, copiá-lo, ir para pairar com base nele. E onde fez isso, colou. Meu Deus, estou me confundindo. Então eu vou remover este em quatro do meio. Vou me livrar disso. E clique duas vezes em. Vamos ver se funciona agora. Hotéis semelhantes, ok. Vamos ver se a animação funciona agora. Ainda não funciona. Então deixe-me fazer outra coisa. Então isso é apenas solução de problemas. Isto é o que eu faço diariamente. E você vai fazer isso também. Então o que você vai fazer é selecionar tudo, controlar C, ir para o mouse, selecionar tudo excluído. Então, obviamente, em vez do atual BG Control V para colá-lo e simplesmente mudar para lugares como esse. E então o que vamos fazer é posicionar isto no topo. Agora temos o mesmo problema que tínhamos antes. Então vamos ver. Eu ainda não entendo. Então agora temos outro problema que é que não podemos colocá-lo fora da pilha porque você pode ver que é, é, está dentro da pilha. Então o que teríamos que fazer é basicamente começar tudo de novo. Então o que eu vou fazer é voltar algumas vezes. Meu pai, e eu basicamente vou arrastar e soltar a mesma imagem. Então volte para o estado padrão, meu pai. E eu vou. Use este nome. Então hotéis semelhantes, pelo menos a informação está correta. Ou imagem de hotéis semelhantes e esse é o nome. Estado padrão. Vou arrastar e soltar a mesma imagem mais uma vez. Então eu fui localizado aqui, é isso. Ir para o estado de horror e arrastar e soltar um 10. Clique duas vezes. Agora, amplie Terahertz. E agora eu posso ver se eu finalmente faço isso funcionar. Sim, você pode ver que a imagem está suave agora e a transição é suave. Mas mais uma vez, vai ser um verdadeiro desafio, mudar tudo isso. Então o que eu vou fazer é editar com base abaixo da classificação. A classificação vai ficar onde está. Nós só vamos atualizar manualmente porque podemos ver que temos quatro estrelas aqui para nossas estrelas aqui, nós só temos três estrelas aqui. Então, vamos atualizar manualmente as classificações. Vamos fazer isso agora. Então, dentro daqui, podemos ir para a classificação e remover este. Então agora temos três. De modo que quando, quando arrastarmos e soltarmos para dentro vai ser muito mais simples. Então o que eu vou fazer é copiar tudo. E o controle de preços C, I, que eu vou para o estado de horror baseado tudo isso logo abaixo aqui. Vou remover as minhas informações assim. Então eu vou remover minha imagem. Então esta imagem original fica onde está. E eu vou deixar ver, manter este preço. Removemos isso em quatro, por exemplo, porque precisamos manter nove dias dentro. O meu pai retirou-se deste preço e agora temos o que precisamos. Então, se eu mudar entre eles, esta informação está correta, exceto pelo preço. Então eu posso mudar o manual de preços anos ou assim. Então, 740. E isso, e isso porque está em estado de horror, nós também podemos alterar manualmente este preço para 1740 como este feito agora vamos voltar para aqui e podemos trabalhar nesta imagem. Assim, no estado padrão, dano é chamado de imagem de hotéis seminal 3. Posso voltar ao estado Horace e mudar o nome desta imagem. E então simplesmente da minha pasta, arraste e solte essa imagem em um clique duplo e eu posso ampliá-la. E imediatamente. Antes de seguirmos em frente, vamos verificar rapidamente se funciona. Deve agora. - Sim. Então funciona. Tudo permanece o mesmo que deveria. Então agora vamos trabalhar neste terceiro e vamos terminar isso finalmente. Então preço, nós mudamos o DAT. Vamos ver, estamos em um estado de horror. Vamos para o estado padrão. Mais uma vez, vou escolher tudo. Aperte o Controle C, volte para o meu estado de horror. O Controle V pertencia à minha imagem. Então vou me livrar dessa imagem, mas antes disso, vou renomear meu top. Então eu vou me livrar dele. Livre-se dessa informação. E livra-te disto. Vamos ver, 14 dias é o certo, então eu vou deixá-lo. O preço está certo, mas eu vou deletar 12 dias deletados, e manter essa informação dentro. Então, mais uma vez, eu simplesmente vou arrastar e soltar minha imagem aqui, clique duas vezes para entrar na zona de Moscou, ampliá-la e rebanho leiteiro. Sinto muito por todos esses problemas, mas quando eu estava projetando, eu não tinha esses problemas. Então, o Adobe XD às vezes decide que o que você está fazendo talvez não seja o melhor, então ele tenta lutar contra você. Mas no caso de você achar que está certo, você tem que lidar com isso e você tem que trabalhar contra isso só para ter a sua opinião porque este é o software afinal de contas, não é um ser humano procurado. Você tem que trabalhar contra isso. E agora, finalmente, vamos trabalhar nesta barra lateral e terminar esta página. Então vamos ver, estamos 149 para baixo por alguma razão. Então vamos olhar para tudo. Mova-se. Vamos ver, na verdade, eu vou selecionar esta informação inferior. Livre-se dele. Selecione-o a partir daqui. Então daqui até aqui, controle C, feche, controle V, e desça 150, assim. Então vamos ver se cortou nosso rodapé. Acho que não gostou disso. O que vou fazer para não te aborrecer muito com estes é copiar e explicar o que fiz. Então eu vou abrir minha barra lateral. Vou abrir meu documento original e meu design original só para mostrar o que fiz. Então eu vou copiar toda essa informação. Eu vou pular aqui mesmo. Vou colá-lo, alinhando com a minha informação original. E então eu vou descer todo o caminho, exceto pelo preço e removê-lo. E agora que é um hábito, posso ir entre eles e explicar o que fez. Então aqui, deixe-me apenas verificar se manteve as transições originais. Ele não fez. Então eu precisaria incluir as transições e mais tarde. Então o que eu fiz aqui é que você pode ver que dentro desta verificação, eu tenho meu estado padrão e eu tenho meu calendário. E o que eu fiz por esse cara, e eu simplesmente uso a grade de repetição. Então, se eu pulei para dentro, você pode ver aqui como uma semana. E para esses dados, basta usar um círculo com a cor principal. Esta é a grade de repetição. Então basicamente coisas básicas realmente. E eu fiz o mesmo por este. Então, se eu pular aqui, você pode ver que eu tenho calendário também. Agora, o que eu fiz para todos esses outros, para o tipo de sala, por exemplo, ainda manteve o estado padrão, mas não me mostrou o estado aberto. Estado tão clicado. O que tenho aqui é basicamente a mesma coisa que tínhamos antes. Então, vamos rapidamente libertá-los para que eu possa mostrar-vos. Então, para o check-in, vamos ter, por exemplo, estado clicado. Então vamos fazer o mesmo tipo de clicado dentro do estado clicado. Vamos ver, podemos, por exemplo, mostrar nosso calendário assim. E isso é basicamente tudo para este. Então, checkout, eu posso criar um estado de clicker também. Como o pai, dentro do estado do clique, ocorrem curto meu calendário. É isso. Para o tipo de quarto, podemos criar. Clique nos estados. Se ele decidir trabalhar assim. E para o tipo errado, o que queremos é que essa entrada mude. Então, primeiro as coisas, este ícone de seta vai girar. Eu posso girá-lo desta forma. Então eu tenho minha entrada BG, que vai escalar basicamente exatamente a mesma coisa que fizemos até agora. Vamos aumentar nossas máscaras para algum lugar por aqui. Por exemplo, o hábito do Derek. Podemos voltar ao estado padrão, adultos. Então, para nós, vamos criar esse estado clicado. Dentro do estado clicado, vamos girar nossa seta, como fizemos com a de cima. Entrada BG. Vou expandi-lo todo o caminho para algum lugar por aqui, por exemplo, máscara. Vou pairar assim. Vou passar para as crianças. Novo estado, clicado I dat entradas e seta para baixo. E certifique-se quando você estiver girando essas setas para girá-las na mesma direção. Porque se você não fizer isso, vai realmente mostrar e vai ser um pouco problemático mais tarde. Então massa. E você pode fazer isso exatamente no mesmo lugar. Mas acho que vai funcionar independentemente. SLI, serviço clicou estado. E eu estou indo para baixo em tudo exatamente na mesma direção. Entrada de texto BG, Vamos ver, máscara. Eu vou desmascará-lo, inserir Vg, posicioná-lo mais ou menos por aqui, por exemplo, em seguida, expandir nosso mascote um pouco para baixo. E finalmente, vamos lidar com excursões. Então, basta adicionar um novo estado. E mais uma vez, estou usando o nome clicado para todos eles apenas para que os desenvolvedores saibam litro ou quando você envia esses arquivos, como todos eles vão basicamente e Hub todos eles vão se parecer. Então eu vou alinhá-lo com a nossa forma de fundo. E este é um grupo de rolagem, então eles vão ser capazes de rolar para baixo, voltar para clicar no estado e laticínios como vender. Agora vamos animá-los e terminar esta página. Então primeiro para o check-in. Eu vou selecioná-lo, mas como você pode ver, ele ocupa realmente uma enorme quantidade de espaço. Então vamos ver. Sim, vamos simplesmente clicar aqui. Estado padrão, toque em animar automaticamente. Ele vai ir para o estado de clique é agora 0.6 e clicou basicamente a mesma coisa. Basta ir para o estado padrão. Dan, para o check-out, podemos fazer a mesma coisa. Tão correto. Assim, dentro do estado clicado, ele pode ir para o estado padrão. E simplesmente, vamos trazê-lo de volta para aqui. Um tipo errado. Então, uma vez que eles clicam bem ali, ele vai levá-los para o estado clicado. Uma escada em clicado, ele vai levá-los para o estado padrão Switching back, que aqui também, adultos. Então você pode ver que muitas dessas tarefas são realmente repetitivas e muito chatas, mas tudo parte deste trabalho. Então veja, eu acho que vou colocá-lo lá fora porque ele decidiu ter sua própria opinião mais uma vez. Então clicado estado, quando você está em clicado e voltar para o padrão. Imagine se o Adobe XD não mantivesse todas essas configurações, você ficaria louco. E foi assim quando começou. Mas, felizmente, a equipe está trabalhando duro com todas essas atualizações e mudanças. Então, de vez em quando, eles estão realmente batendo o prego na cabeça com todos esses recursos úteis. E, claro, você pode adicionar sua voz indo para voz do usuário. E eles podem simplesmente ouvir todas as pessoas e o que as pessoas estão dizendo. E Dan, evite essas mudanças ou aplique essas mudanças dependendo se elas precisarem aplicá-las. Então, mais uma vez, o que temos é isto aqui. Então funciona muito bem. E eu não mostrei isso. Uma vez que você clica em qualquer um destes, ele se transforma de volta ao estado original ambos uma vez que você clicar lá, ele vai voltar para este estado mais escuro. Então, ele se levanta muito bem contra um fundo branco. Então aqui, se eu clicar, ele vai pegar o calendário. As pedras estavam lá. Bem, mas aqui está o nosso problema. Então você tem que clicar em algum lugar por aqui. E era isso que eu estava dizendo. Então você teria que falar um pouco do seu cliente sobre isso. Então talvez possamos colocar o calendário um pouco acima talvez ou sol, pai, porque todos esses outros estão funcionando bem. Mas temos alguns problemas sobrepostos com o calendário. Então, se eu clicar em exemplo aqui, ele vai mostrar. Mas, mais uma vez, calendário é o problema aqui. Então eu não sei. Talvez você possa falar com seu cliente, apenas explicar a eles como tudo isso vai funcionar, ou talvez até mesmo escondê-lo apenas atrás disso para que isso não traga todos esses problemas. Mas basicamente, como você pode ver, você pode clicar em algum lugar fora daqui como este, por exemplo. E então ele vai aparecer, e talvez você possa clicar em algum lugar bem aqui para os adultos. Saber. Talvez você possa trazer o ponto de tabulação bem aqui para os adultos viram Dan, vai aparecer assim. Então, vamos realmente fazer isso. Eu vou mostrar isso. Então os adultos voltam ao Design. Vou usar a minha máscara. E eu vou estender só um pouco até aqui. Então agora esses serão os nossos pontos de escuta. Então, se voltarmos para a Preview, voltamos para aqui. Se eu clicar em algum lugar por aqui, você pode ver que abre esses adultos. Então eu preciso fazer o mesmo por aqui, mas eu nem preciso porque ele está aberto aqui. E agora, finalmente, vamos rolar para baixo e ver o que temos até agora. Por isso, concluímos estes trabalhos como deveriam muito bem. E então temos um pairar dentro do pairar, o que eu realmente gosto. Temos este botão e estes funcionam como deveriam. Então, mais uma vez, você pode fazer o mesmo truque aqui. Então você pode expandir sua máscara e você pode dizer ao seu cliente para apenas clicar nessas áreas estão fora apenas para que eles possam obter a imagem completa de como tudo isso vai funcionar. E basicamente isso é tudo para esta página. Desculpe por isso no meio. Mas como ele disse, no meu design original, costumava funcionar sem problemas, mas por alguma razão aqui, realmente não funciona desde a primeira vez, então eu realmente não sei por que essas coisas estão acontecendo. Vamos agrupar todas as nossas informações. Então, aperte o Controle G. e eu vou chamá-lo de oferta selecionada. Meu pai as colocou em uma pilha. E não vai reconhecer a pilha. Mas, mais uma vez, você pode saltar para dentro e mudar essas seções porque entre todas elas estão 150. Mas aqui no topo estamos no fórum 80, bem aqui. Reconhece-o daqui. Então 100 porque temos essas flechas. Então, certifique-se de manter isso em mente. O que isso vai ser. Podemos chamá-lo, por exemplo, uma seção de informações sobre o hotel. E vamos ter tudo isso recriado lá dentro. E isso é basicamente para a tela de disco. Mais uma vez, desculpe por isso, mas às vezes você vai notar que você vai fazer querer, você vai fazer isso, certo? Por exemplo, você está usando o redimensionamento responsivo, digamos, e ele funciona, então você vai tentar da próxima vez. Mas o Adobe XD não deixa você porque ele acha que você está tentando fazer outra coisa. E basicamente essa era a questão aqui. Mas seu trabalho como designer é resolver todos esses problemas que vão surgir e aparecer em seu caminho. Então eu gosto muito disso. Mostrei a você que todos esses erros podem ser facilmente corrigidos. Você só tem que seguir esses padrões simples ou o que quer que você faça. O primeiro estado, certifique-se de repetir no segundo estado, certifique-se de que todas as suas camadas são nomeadas corretamente. Então eles são o mesmo nome entre os estados e tudo vai funcionar como deveria. No próximo vídeo, vamos finalmente passar para esta página. Vamos desenhá-lo e vemo-nos lá. 35. Como criar design 10: Vamos agora ir em frente e terminar nosso processo de design projetando esta tela de pagamento. Então, a mesma coisa de antes. Segure sua chave antiga, certifique-se que são 70. Ampliar. E eu vou chamá-lo de design de pagamento. E então eu vou simplesmente saltar aqui, seção superior usado bater Controle C porque este é o fundo branco, então o mesmo como é aqui. Eu vou removê-lo, em seguida, aperte o controle V para colá-lo aqui mesmo. Eles são Herat. Então basicamente temos todos os mesmos detalhes agora porque este era o nosso hotel, nosso hotel original, este aqui. Então eu vou simplesmente saltar aqui para o cartão de hotel detalhes do hotel e eu vou chamá-lo de atual hotel, IMG. Eu fiz. E eu também vou saltar para dentro da minha pasta de imagens e eu vou bloquear essa mesma imagem. E eu vou basicamente arrastá-lo e soltá-lo para dentro assim para que saibamos que é este. Então, Uli diz Union Hotel aqui, reduza. Todas essas imagens são ousadas. Então, basicamente, esta é a mesma imagem que esta aqui. E você verá seu novo hotel. Então, certifique-se de ter todas as suas informações no lugar. E a dívida, eles parecem iguais, terminou a olhar como deveriam. Então, basicamente, é isso. E a única coisa que precisamos fazer nesta página é trazer esta informação inferior desta página. Por exemplo, eu vou apertar Controle C. Vá para esta página, aperte Controle V. Certifique-se de que estamos aqui e vamos ver 150, tudo bem. Vou arrastá-lo e soltá-lo para o grupo de ferro inferior. E uma coisa a menos é, claro, animar esta seção. Então o que eu vou fazer é apertar a tecla Control. Para criar isso como um componente. novo estado vai ser o pagamento. Dentro do pagamento, o que vamos fazer é baixar isso para 0, trazer as informações do cartão para 100, ir para o pagamento, mudar a cor para preto, e isso vai ser cinza claro. Isso é basicamente tudo. E, finalmente, criar um novo estado para confirmação como essa. E dentro da conformação, vamos trazer isto para 0 e trazer isto para 100. E finalmente, selecione este quase preto, e isso vai ser cinza claro, e é basicamente isso. Então agora vamos em frente e protótipo-lo. Se você fizer o protótipo, eu vou selecionar o pagamento. Clique nele e vamos ver, podemos ir para a seção de pagamento está em nosso 0.6. Isso é bom. E clique aqui que podemos ir para a confirmação. Passe para o pagamento. E eu vou selecionar detalhes da viagem para ir para o estado padrão. Conformação é informação. E finalmente, confirmação. Pagamento usado ir para o pagamento. Detalhes da viagem vai ser o nosso estado padrão e vaca leiteira. Agora vamos rapidamente clicar em pré-visualização e ver o que você tem. Então, uma vez que você clicar em pagamento, ele vai mudar facilmente. E eu não acho que isso esteja centrado, então na verdade é. Mas vamos ver o que podemos fazer com ele. Eu realmente não acho isso tão atraente. Conformação. Funciona bem. Isso funciona como deveria, e isso funciona, mas você tem que esperar um pouco para que o XD desbloqueie por algum motivo. Então tente atacá-los de lado. Então tentou vir daqui em vez de diretamente daqui. Então, às vezes, não funciona. Então, mais uma vez, pagamento e detalhes aparar, tudo parece como deveria. Deixe-me verificar rapidamente o pagamento da dívida e ver o que temos aqui. Então projete até hoje, deixe-me esconder as informações do meu cartão de detalhes do hotel, e vamos ver o que temos aqui. Então está tudo bem, mas não acho que seja tão bom porque é compensado. Então tente quando você estiver recriando esse design, tentar descobrir algo mais com esses campos de formulário. Então, ou mova-os todos para a esquerda ou coloque o texto do número do cartão no centro do campo ou no domingo, que talvez a morte traria um olhar mais agradável e mais agradável para ele. Mas vamos deixar assim por enquanto e não perca muito tempo. Mas é basicamente isso por enquanto. Vamos alternar rapidamente entre estados e é isso. Isso é bom. E como um certo débitos para o estágio de design. Então, na próxima série de vídeos, vamos trabalhar no design responsivo. Eu não vou incomodá-lo muito com um design responsivo para todas as páginas. Em vez disso, vamos nos concentrar na página inicial porque é a maior. E quero mostrar a vocês como todas essas mudanças afetam seu design responsivo assim que você começar a projetar para todos esses vários tamanhos de telas. E eu vou mostrar algumas dicas e truques que você pode usar, especialmente com a função de redimensionamento responsivo no Adobe XD. Isso vai realmente ajudá-lo quando você começar com este design responsivo. Então, vemo-nos lá. 36. Como começar com design responsivo: Agora que terminamos nosso projeto, é hora de passar para um design responsivo. Mas antes disso, eu só quero mencionar rapidamente o que é e como você pode abordar o design responsivo. Basicamente, projetar quando você está fazendo isso, a maneira que fizemos nesta classe é colunas e conteúdo. Basicamente, todo o conteúdo que você tem você vai distribuir por todas essas colunas. Não importa se o seu layout tem 4861216 colunas, não importa. A única coisa que importa é o conteúdo, que é infinitamente escalável. O que isso significa, você tem, por exemplo, em 12 layout de coluna, você tem a imagem que é 12 colunas de largura. Então você tem que ser capaz de reduzi-lo para tamanhos menores, como o seu telefone celular, por exemplo, para ter, por exemplo, quatro colunas de largura ou seis colunas de largura ou oito colunas de largura. Então você tem que ter isso em mente quando você começar a projetar. Você não pode adaptar isso mais tarde. Quero dizer, você pode, mas vai ser muito mais difícil do que manter todas essas coisas em mente quando você começar a projetar. É por isso que eu, ao longo desta classe, coloquei todos os meus elementos, por exemplo, dentro das pilhas. Eu me certifico de que eu tenha um espaçamento consistente entre eles só porque uma nova dívida, nós vamos projetar isso para responder mais tarde. Quando se trata de design responsivo como um todo, você tem que falar com seus desenvolvedores porque às vezes suas preferências são boas o suficiente. Digamos que você gosta de projetar, por exemplo, dentro das 12 colunas para a área de trabalho, dentro das oito colunas para o tablet e quatro colunas para celular, às vezes com os desenvolvedores, isso é bom para eles. Então você só precisa criar esses tamanhos porque eles precisam saber onde estão os pontos de interrupção, o que significa onde o tamanho da tela está mudando, onde ele vai de desktop para tablets, para dispositivos móveis e assim por diante. Então você tem que projetar todos esses tamanhos diferentes para que eles possam saber a largura da imagem, por exemplo, a largura do botão, a largura do texto, a quantidade de texto dentro de determinado elemento e assim por diante. Portanto, você tem que projetar para todos esses tamanhos. Agora, alguns desenvolvedores gostam de usar seus próprios tamanhos, seus próprios estilos, suas próprias diretrizes. Portanto, antes de começar com o design responsivo, certifique-se de falar com seus desenvolvedores. Certifique-se de perguntar a eles quais tamanhos eles vão suportar. Porque alguns desenvolvedores gostam de suportar, por exemplo, essas telas enormes como TVs, por exemplo. Outros gostam de suportar apenas desktop básico, que é neste caso 1920 por 1080, algo como nós projetamos. E alguns outros desenvolvedores também gostam de suportar todos os tamanhos. Por exemplo, 1920 por 1080 Dan, 1280 por 860 e assim por diante. Então eles vão deste tamanho enorme todo o caminho até o tamanho menor. Enquanto outros desenvolvedores gostam de projetar, por exemplo, três tamanhos principais, como eu disse, por exemplo, desktop, tablet e celular, nunca foram projetados em tamanhos para iPads, por exemplo, porque esse não é o tamanho correto. Dessa forma, você acabou de projetar para a própria tela do iPad, certifica-se de se familiarizar com essas linhas de grade. Você pode usar sites como Bootstrap e você pode explorar Angular, por exemplo, apenas para ver o que outros designers lá fora estão fazendo. O que eles estão criando mistura para se familiarizar com o que algumas dessas linhas de grade são, o que alguns desses tamanhos de grade, nossa mistura para explorar sistemas, como eu disse, como Bootstrap, tentou. Use algo como sistemas de design. Certifique-se de usar a grade 8. Basta familiarizar-se se você está apenas começando com todas essas coisas. Mas com o tempo, uma vez que você começa a trabalhar nele, uma vez que você tem poucos projetos sob seu cinto, então você vai determinar os tamanhos e espaçamento que funciona para você, seu estilo, seu fluxo de trabalho, e Daniel vai aplicá-lo a projetos que estão avançando. Mas mais uma vez, assim que você começar a projetar com essas coisas em mente, então colunas em quantitativo, vai ser muito mais simples para você aplicar este método a qualquer tipo de tamanho de grade, qualquer tipo de espaçamento, qualquer tipo de da largura da calha, largura da coluna. Não importa, desde que você tenha essa abordagem de design responsivo em mente. Agora, com isso dito, alguns designers gostam de começar com tamanhos móveis, o que é bom. Gosto de começar, por exemplo, com tamanhos de área de trabalho. O que projetamos até agora e o que criamos até agora, realmente não importa nos dias de hoje, desde que você tenha essa abordagem em mente, essa abordagem escalável. Porque, mais uma vez, você não pode alterar a largura da tela, mas você pode alterar a altura. E é por isso que, por exemplo, um dispositivos móveis que você pode infinitas colas rastejar no Facebook ou Instagram, por exemplo, porque o conteúdo está se ajustando à altura da tela, Não está se ajustando à largura da tela. largura permanece a mesma, mas está se ajustando à altura da tela. É por isso que essa abordagem responsiva é importante. E se você aprendê-lo, se você começar a aplicá-lo, você vai colher os benefícios mais cedo ou mais tarde. Agora vamos voltar para o arquivo Adobe XD e eu vou mostrar os tamanhos que serão usados e eles serão incluídos neste arquivo de prática. Portanto, certifique-se de verificar, certifique-se de explorá-lo e certifique-se de usá-lo e testá-lo por si mesmo. Veja se funciona para você. Se não acontecer, realmente não importa. Você pode encontrar os online e você pode usar os diferentes que se encaixam para você e seu estilo de trabalho. Então, vamos agora mudar para o arquivo Adobe XD. Vou mostrar-te o que quero dizer. Então, o que temos aqui é o arquivo Adobe XD em que trabalhamos. E eu vou simplesmente selecionar alguns destes são placas do meu design original. Vou copiá-los e depois vou colá-lo aqui mesmo. Então aqui estão essas pranchetas e eu vou mostrar a vocês o que elas são em um segundo. E eu ainda tenho esse problema que eu tenho anteriormente. Então deixe-me desfazer isso. E deixe-me, por exemplo, tentar isto. Deixe-me escrever aqui. E deixe-me fazer um por um. Então, por exemplo, eu posso, Ele ainda está enfrentado bem ali. Então, não importa. Vou criá-los à minha maneira. Então o que eu vou fazer é usar minha prancheta, criar um novo aeroporto. Ou se eu fizer isso, ele vai simplesmente fazer isso mais uma vez como aconteceu. Então o que eu vou realmente fazer é usar isso e então eu vou duplicá-lo segurando minha chave antiga. E eu vou remover todo o conteúdo dentro do meu pai. E eu vou chamá-lo, vamos ver. Desktops grandes. Assim, ou 1200 pixels. E vamos remover esta linha de grelha. Eu dat. E agora vamos começar a trabalhar nisso. Então o que você vai ter aqui, em vez de 1920, vamos ter 1440 assim. Então ainda teremos 12 colunas, mas agora a largura da calha será 30 porque esse espaçamento é muito menor. Vamos ter 65 aqui e aqui vamos ter 165. Agora, às vezes XD vai lutar com você, mas você tem que avançar sortes bem, com 30, que 65, com 16, 5, que eu acho que é muito bem. Agora, antes de avançarmos, deixe-me explicar o que é isso. Então isso é basicamente para os tamanhos menores de desktop, talvez para os laptops que são, vamos ver, 14 polegadas ou 13 polegadas ou algo assim porque nós queríamos ter esse tamanho, que vai no meio, esses grandes tamanhos para grandes desktops e tamanhos pequenos para tablets, por exemplo, porque queremos a continuidade do nosso site e, portanto, queremos que ele se pareça com isso. Deixe-me ir para o mais próximo. Então eu vou usar um 1084, este também, só para que eu possa fechá-lo para que não nos distraia muito. E eu também vou movê-lo para cá. Porque aqui abaixo, vou usar esses sites e tamanhos originais. Então eu só quero manter isso fora do caminho. Então, mais uma vez, temos grandes áreas de trabalho ou 1200 pixels. E você viu que eu ainda estou usando 12 colunas. Ainda estou usando a largura da calha. Mas agora de 30, então era 60, então é metade pai e largura da coluna é 65. Ainda estou usando as margens vinculadas de 165, que são essas. Então é 165 deste lado e 165 deste lado. Mas você pode usar qualquer uma das margens que você quiser. Na verdade, tudo depende de você. Agora vamos duplicar este. Vou segurar minha tecla ALT e ter certeza que são 70. Mais uma vez, como era antes. Agora, isso vai ser grandes dispositivos até 992. O que isso vai ser, É apenas aqueles laptops menores e esses grandes tablets, por exemplo, no tamanho da paisagem. Então, mais uma vez, eu quero apoiar todos eles. Mas, mais uma vez, quando você estiver trabalhando em um projeto real, certifique-se de falar com seu cliente sobre o tamanho que ele vai suportar. Então, como eu disse no início deste vídeo, talvez não queria apoiar tudo isso. Talvez eles só queiram 1920 por 1080 e, em seguida, movam-se diretamente para tamanhos de tablet. Então, mais uma vez, certifique-se de falar com eles, certifique-se de ver quais eles vão apoiar. E, obviamente, o orçamento do projeto e quanto você vai cobrar vai depender de quantos desses tamanhos você tem nesta classe. Nós só vamos adaptar a página inicial porque é a maior para todos esses tamanhos. Mas imagine que você tem, por exemplo, 20 páginas. Não é a mesma coisa se quisessem aquelas 20 páginas em três tamanhos. E se quiserem essas 20 páginas em, por exemplo, 10 tamanhos diferentes. Então não é a mesma coisa. Você tem que falar com eles quais tamanhos eles vão suportar antes de começar o projeto. Se você voltar para o vídeo breve de design e se você abrir o modelo de design breve, você pode ver que todos esses tamanhos de que estou falando estão listados no resumo de design. E essa é uma parte importante do resumo de design e do processo de design em si é falar com seu cliente e seus desenvolvedores sobre quais tamanhos eles vão suportar. Porque não só depende de quanto você vai cobrar por este projeto. Também depende em grande parte de quanto, quanto tempo vai demorar? Porque mais uma vez, quanto mais tamanhos você tiver, mais tempo levará para adaptar todas essas diferentes pranchetas e telas a todos esses tamanhos. Agora vamos voltar e criar outro. Então, como eu disse, isso vai ser até 992. E vamos ver, vai ser 1024, assim. Então você pode ver que ele está começando a ficar menor e menor botão bem aqui. Você pode usar 88 colunas, mas eu ainda vou usar 12 só para mostrar. Então vamos usar 30 e vamos usar 50 para a largura da coluna. Então vamos voltar aqui de novo. Então 30, 50, e vamos usar 47 aqui. Certifique-se de que temos 47 anos. Você pode ver que XD vai lutar com você, mas você tem que continuar. Então, 12305047. E você pode ver que porque o XD é uma ferramenta afinal de contas, é um software, ele não vai reconhecer imediatamente o que você está tentando fazer. Portanto, você só tem que perseguir e persuadir. Então eu vou segurar minha chave antiga, duplicar isso mais uma vez. E agora estamos começando a entrar em território tablet. Agora, estes têm até 76, oito pixels de largura. Assim, você pode vê-los como, por exemplo, retrato para iPad, retrato para Microsoft Surface e comprimidos dose. Então estas são a largura de 768 assim. E lá vão ter oito colunas agora. Então, temos muito mais espaço entre nossas colunas. Eles vão ser 29 para a largura da calha, eles vão ser 64 largura da coluna, e finalmente 42 para essas margens. Então, mais uma vez, 296042. E agora que terminamos esses, vamos agora criar uma dimensão final, que será para telas móveis. Agora, como eu disse, não é realmente necessário e não é realmente uma boa idéia projetar para telefones, por exemplo, um direto para iPhone, direto para uma galáxia, direto para o Google Pixel. Porque as pessoas que estão usando telefones que não são essas fontes, não vão ter boa experiência. É por isso que codifique seu suporte esses pontos de interrupção para que seu conteúdo seja dimensionado muito bem. Por exemplo, se seus usuários têm esses telefones enormes, talvez ele vai abrir como este. Se eles têm essas fontes realmente pequenas, ele vai se abrir como este. Então é realmente tudo dependendo de todos esses tamanhos. Então vamos lá e certifique-se de que a largura é 375. Certifique-se de que agora estamos usando quatro colunas. Certifique-se de que estamos usando 30. Há um 61 e 20 aqui. Então, vou me certificar de que funciona. Então, mais uma vez, 3061 e vamos usar 20 abaixo. Então Derek, oh, e agora você pode ver que nós temos essas quatro colunas. Agora, como nosso conteúdo vai ser dimensionado, você vai ver em apenas um segundo. Mas basicamente vamos adaptar esse mesmo layout que temos em nossa página inicial a todos esses tamanhos diferentes. Então a primeira coisa que eu vou fazer é realmente usar esta página inicial, manter minha tecla Alt, e arrastá-la para aqui. E então eu vou pular para dentro e chamar de responsivo. Ou melhor ainda, chame-o de abreviatura aqui. Então homepage em design e neste aqui, porque vamos usar todas essas outras abreviaturas, M, antes de chegarmos ao design e design responsivo, eu só quero usar meu nav principal, navegação primária e meu logotipo. Então eu vou exportar meu logotipo porque eu quero usar PNGs para isso, porque este logotipo, como eu expliquei anteriormente, porque ele tem esses três elementos dentro quando uma tecla de deslocamento de MMA inteira, você pode ver que ele não escala muito bem, se eu pressionar Shift e Alt e clicar com o botão esquerdo, como você pode ver, todos eles estão começando a se acumular. Então o que eu vou fazer é clicar em Control ou Command E. Escolha minha área de trabalho, por exemplo, e simplesmente exportá-la como PNG. E depois vou voltar e encontrar o meu logótipo. Vou trazê-lo de volta para aqui. Então por aqui. E eu vou simplesmente posicioná-lo aqui. Certifique-se de que ele está no mesmo lugar que o logotipo original como esse. Vou movê-lo abaixo do ponto do meu pai e quando apertar Excluir no meu logotipo. Agora, vamos explorar rapidamente. Então destinos, logotipo de navegação principal, como você pode ver, ele não atualizou, então eu tenho que fazer isso manualmente. Então o que eu vou fazer é usar um logotipo do meu navegador principal, apertar Controle C. E então meio para fazer isso para todos esses outros e todos esses outros estados, eu vou pular, atribuir um logotipo, apertar Control V Posição bem aqui. E ele vai simplesmente posicioná-lo no mesmo lugar. Por isso vou continuar a fazer isso. Vou colá-lo em todos os outros estados. E basicamente no próximo vídeo vamos continuar de onde paramos aqui e vamos começar a adaptar nosso conteúdo a todos esses tamanhos de design responsivos. Além disso, uma última coisa que quero mencionar antes de entrarmos design responsivo real é que às vezes você vai usar menos conteúdo. Então, em alguns desses casos, como por exemplo, aqueles cartões de destino, se você lembrar, porque usamos seta esquerda e direita, usamos oito no total para esses tamanhos menores que você pode usar e dividi-los. Por exemplo, não sei, dois por dois. Assim, os usuários têm que tocar algumas vezes. Mas o que eu realmente gosto de fazer é sem desperdiçar seu tempo. Por exemplo, podemos ir de oito neste tamanho maior para seis neste tamanho menor para quatro nestes tamanhos médios, por exemplo, tamanhos de tablet, um único cartão no tamanho móvel. Assim, eles podem deslizar para a esquerda e para a direita entre todos esses cartões e tocar no botão de qualquer maneira. Então também, você tem que pensar sobre estados pairando e nós vamos falar sobre eles uma vez que realmente chegar a esses estados superiores e adaptá-los. Então, como os estados não são obviamente necessários nos tamanhos de celular e tablet porque você não pode passar o mouse lá. Então, vamos removê-los e nosso conteúdo vai parecer um pouco diferente do que é em nossos tamanhos de bico para desktops. Então eu vou te ver no próximo vídeo e eu vou continuar trabalhando neste logotipo. Baseando-os em todos os nossos Estados para que possamos adaptá-los facilmente mais tarde. Então, vejo-te no próximo vídeo. 37. Criação de design responsivo 1: Ok, então agora que eu terminei de ajustar meu logotipo e incluir este ser e Jean para todos os estados. Vamos agora começar trabalhando realmente no design responsivo. Então o que temos aqui é a opção de design responsivo para o próprio quadro de arte. Mas eu não recomendaria que você o usasse porque se eu selecionasse e depois crescesse aqui no meio do meu quadro de arte aqui, e então começar a trabalhar no meu design responsivo. Você pode ver que alguns elementos estão funcionando bem, mas outros não. E eles estão esmagando infinitamente, mas você pode usá-lo para páginas mais simples. Por exemplo, páginas de destino com poucos detalhes e opções. Mas como eu disse, não vamos usá-lo porque temos vários estados, temos várias opções para cada uma dessas seções diferentes de nossas páginas. Portanto, eu queria fazer tudo à mão e apenas mostrar-lhe o processo geral. Então, o que eu vou fazer na verdade, há duas maneiras. Você pode realmente fazer isso de duas maneiras separadas. Então o método número um é que você pode simplesmente ir aqui e copiar todos esses elementos desta página. Então vá aqui e cole-os bem aqui. Estender este aeroporto todo o caminho para baixo, e então simplesmente ajustar elemento por elemento ou o outro caminho como eu fiz e como eu vou fazer é você pode segurar sua chave antiga, arrastar sua cópia como fizemos até agora. E então eu vou simplesmente refazer todas essas configurações para esta prancheta bem aqui na parte inferior. Então eu vou fazer isso é bem simples. Você pode primeiro começar com a largura, então 1440, clique aqui, então duvidamos de um redimensionamento responsivo. Então eu vou usar trabalhar 40 lá, pressione Enter, e você pode ver que ele é reduzido. E depois de passar o mouse, você pode ver o contorno da nossa prancheta original. Então, em seguida, eu vou ajustar todas essas configurações. Então 365165. Então 30 a 65 e 165 aqui. Como isso. E agora que temos, você sempre pode verificar novamente. Então 123065165365165, tudo está bem. Agora podemos começar a trabalhar no nosso design. Então, como você pode abordar isso é simples. Você pode fazer elemento por elemento, como nós realmente vamos fazer, porque eu achei que era o mais fácil e preciso importado para trabalhar. Ou o que você também pode fazer é fazer alguns desses elementos semelhantes como este, por exemplo, basta clicar, arrastá-lo para dentro, e isso é basicamente para todos esses elementos mais simples. Você também pode abordar este o mesmo método. Você pode abordar este porque realmente não é tão difícil de fazer. Talvez simplesmente colocá-lo no centro assim, por exemplo. Veja se ele se alinha corretamente, ele termina basicamente nesta seção. Não há mais trabalho a ser feito. Você também pode fazer as seções mais pequenas, especialmente essas seções de parceiros. Então eu posso, por exemplo, posicioná-lo bem aqui no centro. Vou certificar-me de que está bem aqui. E depois vou ter a certeza que está bem aqui. E então eu posso pular dentro dos logotipos do meu parceiro, segurar minha tecla Shift. E como estamos usando pilhas, você pode ver como o layout abaixo está agindo e redimensionando de forma responsável. Você também pode fazer é sem segurar Shifts, basta clicar aqui e, em seguida, ajustá-los assim. Então, tudo depende de você. Então, como você pode ver, alguns elementos são realmente simples de fazer, mas você também tem que ajustar isso para aqui. Então, agora, quando eu clico nesta seção, ela não vai para fora. Então, como diz, alguns elementos são realmente simples de fazê-lo como este, por exemplo, simplesmente ajustados para aqui. Clique aqui, certifique-se de que está aqui. E, em seguida, usar a moeda em simplesmente ajustado para aqui, por exemplo, você também pode expandi-lo para aqui apenas para que os usuários saibam que há muito mais para ver em uma esquerda e direita. E também esta seção, por exemplo, é realmente bastante simples. Então vamos ajustá-lo no centro clique aqui e fazer essas alterações por enquanto. Então o que eu posso fazer é realmente mover isso para dentro e então ver onde isso está me levando para ouvir, por exemplo, assim. Então o que eu posso fazer é simplesmente estender e torná-lo, por exemplo, longa coluna de largura. E então eu posso trazê-lo de volta para aqui. Então posso saltar para dentro daqui e reduzir o tamanho. Certifique-se de que meu texto de assinatura está no centro. Ir para o meu estado de horror, e então simplesmente ajustar meu estado Horace também. Certifique-se de que você se inscrever está no centro. Volte para o estado padrão, e é isso por enquanto. Então, como eu disse, você pode fazer todas essas coisas assim, ou você pode fazê-las ao contrário. Então é realmente tudo até você como você está realmente indo para se ajustar. Isso garante que este é 40 como e mortes. Ou agora porque estamos em tamanho menor, podemos até descer para 20. E vamos em frente e nos concentrar agora em um tarefas mais difíceis à mão, que são basicamente navegação e esses menus suspensos e esses cartões especialmente é o que vai levar a nós e o maior tempo quantidade. Então, primeiro de tudo, vamos trabalhar com nossa seção de heróis. Então eu vou saltar para dentro de nossas imagens de herói, selecioná-las todas, e simplesmente trazê-las para aqui. E então o que você pode fazer é esconder seu herói e, em seguida, saltar para dentro de cada um deles. Clique duas vezes dentro e simplesmente focalize a área que você deseja que os usuários vejam. Como este, por exemplo, posso esconder este, trazer este de volta e clicar duas vezes e talvez simplesmente empurrá-lo para aqui. Eu posso abaixar para 0, trazer este aqui, e talvez vamos nos esconder. Este terminou. Então eu quero que esses barcos fiquem no centro assim. Isso é bom. Traga isso de volta. Como assim. E traga isso de volta. Ok, então eu vou usar 0 com base nesta imagem, 0 com base nesta imagem. E eu vou simplesmente trazer minha cobertura de cor de volta e laticínios tê-lo. Você também pode ajustar isso mais se quiser, mas eu acho que vai funcionar muito bem. Próximo passo é ajustar essas setas porque mais uma vez, você pode trabalhar o seu caminho em torno de Estes elementos que são mais fáceis ajustar e passar para esses elementos que são mais difíceis de ajustar. Então eu vou mover meu árabe assim e também começar sempre com o primeiro estado. Então vamos mover nossa máscara de texto para estar no centro assim. Vamos mover o botão para estar no centro assim. E o que podemos fazer agora é também expandir o tamanho deste botão para algo assim. Vá pairar, algo assim. Isso é bom. E então simplesmente movê-lo para o centro para que ele se encaixe no nosso novo layout basicamente. Então, agora que corrigimos tudo isso, vamos agora trabalhar em nosso software de navegação para mim agora, vamos fechar rapidamente tudo isso e trabalhar nisso. Primeiro, vou mover o meu logo aqui. E o que eu vou fazer porque eu tenho todos esses itens de texto. O que eu vou fazer, em vez de colocá-los aqui, eu vou colocá-los mais ou menos por aqui. E então, por exemplo, mais de 20 abaixo do meu logotipo. Acho que está tudo bem. E então eu vou saltar para dentro e ajustar este. E então eu vou selecionar todos eles. Meu que ng-click aqui, que vai distribuí-los uniformemente através da nossa grade. Agora você pode seguir as linhas da grade, se quiser. Então posicione o inverno aqui, posicione o Wellness aqui. Então, cada um deles ocupa duas colunas, por exemplo. Mas eu não vou fazer isso. É muito mais simples de fazer. Dissuadir. O que você também pode fazer é mover isso para o centro, assim agora porque temos muito mais espaço. E também o que podemos fazer é reduzir o tamanho geral do nosso logotipo, por exemplo. Então vamos saltar para dentro do nosso logotipo e manter a tecla Shift pressionada. Podemos posicioná-lo aqui porque, como eu disse, não precisamos de muito espaço para o nosso logotipo. Podemos trazer nosso ponto de guia para o centro do nosso logotipo. Traga isso aqui e use todos esses itens. E agora traga-os em 20, por exemplo. E acho que vai funcionar muito bem. Então agora isso é tudo dívida, tudo isso está concluído. O que eu posso fazer é o que é mais demorado e o que eu vou mostrar rapidamente para este primeiro estado, e então eu vou seguir em frente, fazê-lo eu mesmo e depois voltar para você e mostrar os resultados é que você tem para fazer isso para todos os seus outros estados. Primeiro, o que precisamos é ajustar esses destinos para que possamos trazê-los de volta, trazê-los para a 101 coisas primeiro, mostrá-los como o DOS. E eu também vou usar o meu principal agora Borrão certifique-se é 1080, por exemplo, apenas para que eu possa ver todos os meus elementos ajustados em assim. E é aqui que a pilha, por exemplo, pode ser útil. Então vamos ver que eu quero selecionar esses itens como dat, CEO, como sujeira e colocá-los em uma pilha. Então estou vendo a Europa assim. Coloque-os em uma pilha. E dentro da pilha, o que você pode fazer é simplesmente clicar em um odor e simplesmente ajustar o espaçamento entre eles. E vamos segurar a tecla Shift. Certeza Darrell vai escalar uniformemente assim. E vamos ver, é 115 assim. Então vamos usar esse espaçamento para todos eles. E vamos ver, acho que um deles está desaparecido. Qual deles é? Vamos ver. Algo está faltando aqui. Então vamos ver se algo escapou de mim porque, como você pode ver, está me mostrando lá. É uma divisória, desculpe. Você sempre tem que verificar essas coisas e ver para onde eles te levam. Então divider com é isso. Então 11 e 10. Então o que eu vou fazer primeiro é saltar para dentro desta divisória. Baseado neste valor. Vou fechar este, saltar para dentro deste divisor, base, este tamanho divisor. E finalmente, para as Américas, não temos uma divisória lá. Então vamos agrupá-los. Américas. E eu também vou cair em SEO lá, como fizemos com uma Europa. Isso é certo. E caiu em todos eles e pulou dentro da África. Então, vamos nos lembrar e ver a Europa. Então é 115. Vou usar esse mesmo valor. Então 115, como você pode ver, ele funciona muito bem, mas nós também podemos saltar para dentro e ajustar este. Então, basta seguir a regra para isso são 108 dependendo de uma droga. Quantas letras estão dentro de todas essas outras. Então, para a pilha de África, vamos saltar para dentro daqui na USU, a pilha e 115. E vamos ver para este último, eu posso ajustá-lo para mais ou menos por aqui. E mais uma vez, faça o mesmo para as Américas, pilha 115. E como podem ver aqui, temos que sobrepô-los um pouco. Então, por exemplo, podemos ajustar este último. E então podemos clicar aqui para que eles não se sobreponham muito. Vou voltar e as primeiras coisas sugeriram este um pouco e depois ajustar este para algum lugar por aqui. Agora que estou feliz com isso, o que vou fazer é escondê-los. Então eu vou tocar duas vezes em Mizuki para escondê-los e eu vou mostrar todos esses outros. Então eu vou mostrar o inverno primeiro. Um que vou fazer é ajustá-lo aqui, por exemplo. E então eu vou usar o salto de texto dentro daqui. E vamos ver, por exemplo, talvez eu possa diminuir isso em tamanho. Vejamos, 120, o que é bom. Mas talvez eu possa movê-los mais um. Então, vamos clicar aqui. Na verdade, vamos esconder essa denoção. Assim como os destruidores não terminaram em perturbação. Então eu vou simplesmente movê-lo para esta linha bem aqui. Eu vou clicar na minha ilustração e eu vou simplesmente segurar minha tecla shift e ajustado para aqui, certifique-se de que ambos estão centrados assim. E basicamente as dívidas sobre o inverno. Agora podemos saltar para dentro do botão grande e simplesmente ajustado para aqui. Vá para o estado de horror, ajustado para aqui, certifique-se de que ele se encaixa. - Ele. Vê se está na linha da grelha? - É. Então, basicamente, isso é bom para o inverno. Vou clicar duas vezes no meu 0, incluir o meu bem-estar de volta, e fazer a mesma coisa basicamente. Então eu vou usar minhas mensagens. Veja onde ele se encaixa. Então, aqui mesmo. E o que eu posso fazer é usar altura automática, poderia simplesmente ajustar alguns destes. Eu posso ir em frente e esconder minha ilustração só para que eu possa ver onde faz o texto e como Derek. O Derek. Então vamos ver o que temos aqui. Então temos 40, o que é ótimo. Posso voltar e ajustar o meu texto aqui, a cabeça deles. Então, para a ilustração de bem-estar em si, e se você não pode ver isso, você pode simplesmente ajustar a largura, trazê-lo de volta, e então trazer isso de volta assim. Então, a mesma coisa que fizemos antes. O que podemos fazer é simplesmente ajustar nossa ilustração assim ou mantê-la aqui porque eu não quero que ela seja muito ampla. O texto da mistura está aqui. Em seguida, ajuste a largura do nosso texto mais uma vez para caber. E então mova isso para baixo simplesmente usando 40 assim. E basta selecionar esses dois e trazê-los assim. Ou você pode até usar menos texto se quiser. Para os textos de bem-estar aqui, tudo depende de você e como você quer abordar isso. Vamos trazer esse indivíduo de volta, alinhá-lo aqui. Vou trazer o texto para algum lugar por aqui. Por exemplo, analitos ver na ilustração, vai caber? - É? É annelids simplesmente usar os textos para cortar o tamanho. Eu vou clicar aqui e ajustado e injusto neste como DAT, e simplesmente mover nosso botão e movê-lo assim. Agora observe que, se você estiver usando o mesmo botão, por exemplo, aprenda mais aqui e não diferentes, como nós. E então você pode simplesmente ajustar esse mesmo botão uma vez e, em seguida, usá-lo em todo o seu design para que você possa simplesmente mostrar em alta DID mais uma vez, mais uma vez. Então vai ser muito mais rápido do que esta abordagem. Mas eu queria ser o mais pessoal possível para esses caras. Então é por isso que estamos usando todos esses botões diferentes. E, claro, traz esse tipo de interesses visuais para sua página. Quando você tem esses botões N aumenta a probabilidade de clickability porque você tem todos esses botões interessantes em vez de um aprender mais em todas as suas páginas. Então, tenha isso em mente. Em alguns projetos você vai ter um botão que vai ser exatamente o mesmo para todos os seus diferentes propósitos e páginas e assim por diante. Portanto, alguns deles podem parecer um pouco diferentes em alguns casos. Agora, estamos chegando ao fim. Eu vou lidar com nesta seção muito rapidamente. Vamos tirar isso do caminho e eu vou esconder minhas informações do mapa por enquanto. Mais quando os textos para mais ou menos por aqui, clique duas vezes, certifique-se de que é auto altura ajustado mais uma vez, e vamos mudá-lo para aqui. Vamos ver, vamos ralar e ter certeza que temos 40 e ajustar nosso botão final. Como isso. Aí está você. Mais uma vez, estamos a 40. E agora para o texto de informação do mapa, o que posso fazer é saltar para dentro do meu mapa. Eu posso ajustá-lo para aqui, por exemplo, posso ter certeza de que ele está na mesma rua que estava. E agora para isso, o que você pode fazer é incluí-los dentro dos grupos. Então vamos ver, isso vai ser mapeado. Isto vai ser boletim informativo, isto vai ser telefone. E finalmente, este vai ser o endereço. Agora, uma vez que eles estão lá, você pode colocá-los em um grupo e colocá-los em uma pilha. Mas antes de fazer isso, quero ter certeza de que eles estão alinhados assim. Então eu vou usar meu telefone, alinhá-lo aqui, e usar meu endereço, por exemplo, um alinhamento para aqui. Certifique-se de que está 20 para baixo. Agora posso agrupá-los assim e ver o que as pilhas mostram a costa. Acho que está tudo bem. Como você pode ver quando você clica assim, ele vai posicioná-lo para o centro. Vou tentar anular isso. Isso é bom em manadas leiteiras. Portanto, esta seção está agora concluída. Parece que está tudo bem. E eu não posso me adaptar por 0, Qi escondê-lo. E basicamente o que eu vou fazer agora, por favor copie todas essas mesmas informações e basicamente colá-las em todas essas outras informações. Mas antes de fazer isso, o que vou fazer com o meu borrão de navegação, vou trazê-lo de volta para um. Então eu vou selecionar tudo, exceto o borrão de navegação, aperte Controle C. Ir para os meus destinos, estado. Abrindo. Veja aqui é onde está o borrão do agora. Vou remover o meu equipamento de navegação principal, apertar o Control V para colar todas as minhas informações. E eu vou simplesmente mostrar meu destino neste primeiro estado como aquele rebanho leiteiro. Agora vou para o estado de inverno. Faça a mesma coisa. Então apague este, mostre todo o resto. E a primeira coisa que vou fazer é usar meu seletor. Mova-o aqui até que se encontre com o inverno. Basta trazer tudo isso assim e rebanho leiteiro e ter certeza de que todos eles são 20. Então vamos selecioná-los assim. 20. E antes de seguirmos com o inverno, vamos para os destinos, abri-los. Doença de inverno, cruzeiros individuais. E, a propósito, estou simplesmente segurando o Controle para selecionar todos eles assim. Volte para o inverno, Derek. Oh, é todo o inverno é selecionado e simplesmente localizar o seu inverno. Aqui está, e trazê-lo de volta para que ele apareça. Então eu vou pausar o vídeo aqui enquanto eu faço o resto deles. E eu vou voltar e mostrar a vocês como podemos nos mudar para cá e ajustar todas essas outras seções. E agora que terminei tudo isso, deixe-me guiá-lo para ver como se parece. Então aqui temos o principal. Agora, este é o estado padrão. Temos os destinos, obviamente os mesmos de antes. Temos o inverno, temos o bem-estar, ouvimos o indivíduo. Então basicamente tudo o que eu expliquei neste vídeo, eu apenas fui em frente e fiz. Então, uma última coisa que eu queria mencionar são animações. Então, porque mudamos, tudo isso, substituímos os tamanhos, mudamos tudo para fora do caminho. Nós mudamos o logotipo do SVG original para este B e G, e também dentro desses estados, por exemplo, para esse indivíduo, digamos que movamos todos eles ao redor. Mudamos a posição Fale Conosco e o espaçamento e assim por diante. Todas essas animações desapareceram. Então, se eu clicar no protótipo e você não pode ver que dentro do estado padrão, ainda podemos ir até eles. Então, se eu abrir em um modo de visualização e você pode ver que a janela de visualização agora é um pouco menor do que era. Você pode ver que o efeito de pairar ainda funciona. Mas, por exemplo, quando eu tentei clicar aqui, ele nos leva para o segundo, segundo espaço e segundo animação original . Como você pode ver, ele não se alinha bem com este primeiro. Primeiro, eu teria que ajustar nossos textos. Então você pode ver que o texto está se movendo bem aqui. Então eu vou ter que posicioná-lo no centro como você gostaria aqui e toda essa informação outra metade para ingerir uma animação mais uma vez, mas muito mais importante para este elemento no topo, quando eu clicar no inverno, você pode ver que eu não posso clicar em nenhum outro lugar. Então isso é realmente, a questão principal, é que você terá que animar todos eles mais uma vez, exceto esses estados Hover porque nós não os mudamos em tudo. Eles são, eles estão permanecendo o mesmo e este botão permanece o mesmo. Mas como ele disse, teremos que animar todos eles mais uma vez. Então, basicamente, para liberar seu tempo, se eu posso dizer satélite que você pode ir ao herói e selecioná-los. Então seção superior pode agora usar um protótipo e, em seguida, basta clicar em um deles e ver a transição. Então, basicamente, porque usamos em todos os lugares a mesma transição, ele toca auto animar, facilidade em 0,4 segundos. Então você pode usar isso ou você pode usar 0.6. Cabe a você como você quer se ajustar a isso. Mas basicamente isso é o que você teria que fazer. Agora, vou animar isso e voltar no próximo vídeo. Mas para este vídeo, eu só quero terminar com uma imagem de herói. Então eu quero usar minha mesquita de texto de herói e botão, aperte Controle C. E eu também estou usando, na verdade , vamos, vamos usar edição. Da máscara de herói até a última imagem Control-C. para a imagem para baseado em todos os lugares, tudo no topo. Em seguida, remova tudo da mesa, máscara de texto para baixo assim. Vou baixar a opacidade desta imagem para 0. Isto vai ser às 100. Então vamos alterá-lo novamente e ver como ele se parece no estado padrão. Porque eu não me lembro se era essa imagem para uma imagem três, se eles estavam em 100% no primeiro estado. Então vamos ver a animação. - Sim. Então teríamos que ir para o estado padrão e trazê-los para 100, ambos assim. E então, quando eu lancei meu protótipo, e clique aqui, você pode ver que esta animação parece muito melhor. Então agora que você fez isso no estado padrão, no segundo estado, o que eu posso fazer é ir para o meu texto de herói e eu vou trazer meus segundos textos para Paris assim. Vou tirar este assim. E agora eu posso selecionar todos esses itens, Controle C, você pula para o estado alvo, controla V, e simplesmente exclui todos eles para baixo. Vou reduzir isto para 0. E isto deve ser em 100. Mas não foi por alguma razão no segundo estado. Vamos voltar e consertar isso. Então isso deve ser em 100, apenas por causa da consistência. E deve estar a 100 aqui. Isso é bom. Finalmente, vamos mudar este texto para que mais textos número 3 no lugar, bem aqui, e então mover o texto número dois fora do caminho, assim. E é basicamente isso. Vamos finalmente tocar Preview mais uma vez e ver como tudo isso se parece. Então, como o poder funciona bem. E agora você pode ver que todas essas imagens estão mantidas no lugar, mas você pode ver que isso não funciona neste, então nós teríamos que animá-lo mais uma vez. Então, no protótipo de estado padrão, eu posso saltar dentro de minhas setas e ver ponto de guia seta direita é fácil agora 0.6. Então vamos para a imagem número dois. Então essa é a parte complicada com tudo isso porque estamos mudando seus lugares, estamos movendo-os por aí. Esse é o problema com eles. Então, quando clicarmos aqui, vamos usar animações automáticas. Nós estamos indo para ir para o estado padrão atenuando fora e 0.6 segundos. E vamos clicar aqui e ir para a Imagem 3, usar as mesmas configurações e, em seguida, ir para a imagem número três setas esquerda. E neste vamos para o estado anterior, e é basicamente isso. Então, como eu disse, pode ser uma tarefa animar todos eles de uma vez. Mas essa é a principal questão que eu tenho com o Adobe XD em geral, é porque quando você começa a trabalhar nessas animações, em vez de deixar você animá-las uma por uma, por exemplo, e então manter essas animações onde quer que você as coloque, seja qual for o tamanho deles, saiba que terá que animar tudo de uma vez. Mas a boa notícia é que a equipe está trabalhando duro para fazer esses ajustes para os lançamentos futuros do Adobe XD para que possamos melhorar nossa velocidade ainda mais e não precisamos fazer isso para todos eles. Então vocês podem imaginar que agora, eu vou entrar e animar todos esses estados diferentes como fiz no tamanho original. Mas no futuro, espero que chegue um momento em que você, onde você quer animar todos eles. O Adobe XD ainda manterá essas configurações. Vemo-nos no próximo vídeo. E como eu disse, eu vou ir em frente e animar todos eles como eu fiz no primeiro. E no próximo vídeo vamos lidar com essa navegação inferior. Então, vemo-nos lá. 38. Criação de design responsivo 2: Tudo bem, então agora que eu terminei de criar essas emissões, vamos rever rapidamente e ver como ele se parece. Basicamente, exatamente o mesmo de antes. Então, todos esses outros estão permanecendo os mesmos e você pode clicar entre eles e o seletor vai mudar. Você pode clicar no seu logotipo, ele vai voltar aqui. O pairar funciona. E como você pode ver, uma vez que você clicar bem aqui, ele vai levá-lo lá. Então agora vamos nos concentrar no novato nessa. Mas antes de o fazermos, só quero mencionar uma coisa rapidamente. Eu não criei animação entre todas essas páginas diferentes porque você não pode ir daqui para aqui para aqui para aqui diretamente, porque eu quero mantê-lo para o fim. E eu quero explicar isso para vocês, essas conexões entre as páginas antes de começarmos com a parte de compartilhar essa aula. Portanto, vamos manter isso para o fim. E eu vou obviamente conectar essas páginas e mostrar todos os métodos que você pode usar para dívidas. Mas antes de seguirmos em frente, vamos trabalhar nesta seção aqui. Então, nesta navegação inferior e mais uma coisa, porque essas emissões agora são cozidas assim, a madeira mais tarde, uma vez que realmente dimensionamos isso para um tamanho diferente. Então não se preocupe muito com isso. Então, como eu disse, vamos trabalhar neste caso. E para isso, o que eu realmente vou estar fazendo é para cada um deles, exceto para a busca, eu vou me livrar desses ícones porque os ícones estão ocupando espaço. Então eu vou me livrar disso. E eu vou posicionar isso para ser 24 exemplo. E então eu vou fazer duas colunas de largura como esta. Eu vou estender meus destinos BG e trazê-lo aqui animais que foram para clicar na minha máscara e estendido para algum lugar por aqui, por exemplo. Como isso. E então o que vamos fazer é fazer a mesma coisa por estarem presos. Então eu vou clicar bem aqui, abrir nosso divisor e trazê-lo para mais perto de algo como isso, por exemplo. E aqui temos. Então o que eu vou fazer é usar tudo isso. Então, basicamente, posso até usar as mesmas mesquitas. Hit Control C, saltar para a minha data cliques, abrindo, Control-V, excluir o antigo e simplesmente estender o novo para baixo. Por isso, posso estendê-lo até aqui, por exemplo. E então eu posso trazer minha máscara até aqui. E vamos ver agora se nossas animações funcionam. Então clique volta para o padrão. O padrão vai para clicar. Então você pode ver que ele funciona dessa maneira quando você não está mexendo muito com posições. Então, quando eu clicar bem ali, ele vai expandi-lo todo o caminho para baixo e vai funcionar muito bem. E você ainda pode lê-lo. Diz “Em destinos “, então acho que estamos bem. Então eu vou pausar o vídeo, consertar o resto deles e depois voltar. E agora que eu consertei esses principais, como você pode ver, eu fiz a largura de duas colunas para todos eles apenas a máscara vai um pouco para fora para que a sombra cair pode aparecer. Vamos agora consertar e morrer. Primeiro de tudo, e trazê-lo de volta para aqui. Eu uso este botão e fiz três colunas e eu queria mostrar-lhe este de busca. Então eu vou trazer a busca que BG estão aqui. Então, dois aqui. E eu também vou trazer isso muito mais de perto. Então eu vou usar o ícone de pesquisa e procurar viagens. Vou me certificar que são 20, por exemplo. E, em seguida, trazer este pouco mais perto daqui, e em seguida, trazer o nosso ícone de roupas aqui. Eu também posso trazê-lo de volta apenas para que você possa vê-lo em algum lugar por aqui, por exemplo, INT e, em seguida, trazê-lo para baixo para 0. Então este é o nosso estado padrão, e eu vou simplesmente copiar a edição que fiz aqui mesmo. Vá para o nosso kit de estado clicado aqui, e, em seguida, exclua todos esses outros assim. Então, a primeira coisa que vamos fazer obviamente é trazer isso volta um girado por isso. Então é o mesmo que era antes. Esta onda BG vai se expandir para cobrir bem aqui. E nós vamos simplesmente mover estes dois para cá e depois 22 para cá. Então vamos verificar rapidamente e ver se funciona. Ele faz. E finalmente, vamos fazer a pré-visualização e ver como tudo se parece agora. Então destinos. E vamos ver essa sombra de fundo mostrando bem. Tudo parece bem. Procurar funciona, Ele mostra e, finalmente, aplicar filtros funciona como deveria. Então, agora que esta seção superior está concluída, vamos em frente e trabalhar nisso porque, como eu disse, essas seções na parte inferior vão ser o que é mais desafiador. E antes de tudo, vamos alinhá-lo assim. E eles vão ser muito desafiadores porque obviamente você tem toda essa informação dentro. Então, primeiro de tudo, vamos alinhar estes ao topo. Então, nessas seções serão seis colunas de largura. Então vamos ver onde está. Então 246, então eles têm que terminar aqui. E, portanto, eles podem precisar ser um pouco mais largos. Então o que eu vou fazer primeiro é usar minha imagem primeiro, ter certeza de que tem três colunas de largura. Em seguida, use todo o meu conteúdo, minha dose, e certifique-se de que está bem por aqui. E então vamos ver, 1, 2, 3, 4, 5, 6. Então ainda teríamos que cortá-la bem aqui. Então, digamos, por exemplo, desfrutar do belo Egito como este. E então, por exemplo, podemos pular aqui e usar isso, posicioná-lo como uma pilha. E vamos ver, por exemplo, talvez eu possa colocar todos eles em desagrupar e, em seguida, usar uma pilha posicionada como esta, e não funciona assim. Então, basicamente, o que eu teria que fazer é saltar para dentro daqui e então posicionar o nosso transporte. Vem abaixo. Mas como pode ver , não me permitirá fazê-lo. Então há uma boa chance de eu ter que desagrupá-los, colocá-los no meio. Mas em uma pilha e por que agora e posicioná-los assim. Em seguida, simplesmente pule para dentro, certifique-se de que eles estão alinhados assim, e mova-os aqui para que eles se encontrem com a posição alinhada borda. Fiz esta linha aqui, certifique-se de que o preço está bem aqui. E então o que eu vou fazer é obviamente trazer isso de volta para aqui e trazer esse BG de volta para aqui. Agora eu posso mover esses dois, então posicionado e divisores movê-los aqui para a borda. Veja onde estamos. E, por exemplo, posso até reduzir a largura deles. Faça algo assim, porque agora não precisamos que eles sejam tão altos. E obviamente eu posso posicionar este divisor inferior para baixo e eu posso mover esses ícones para talvez 20. Acho que não precisamos que sejam muito mais do que isso. Posso posicionar isto para ambos, para ser 20. E c. Eles não estão mostrando como deveriam. Então vamos ver, talvez possamos trazê-los assim e, em seguida, movê-los dez para a esquerda e, em seguida, clicar em um deles e trazê-lo de volta, clicar em outro. Então, este de baixo. É bastante complicado selecionar esses divisores porque eles são muito pequenos. E é basicamente isso. Então, o que vou fazer agora é ajustar nosso conteúdo em geral. Então vamos fazer isso com o carrinho. Então vamos ver talvez possamos fazer a altura de 437, talvez. Veja como isso funciona. Acho que funciona bem. Em seguida, basta ajustar a altura da nossa imagem um pouco. E vejamos 40. Talvez possamos lidar com 20 e depois 20 para baixo. Isso é bom. Alinhe isso assim. E vamos ver, o conteúdo é 20 do top 22 aqui, 22 aqui, então tudo parece bem. Finalmente, eu posso simplesmente ajustar minha imagem assim, por exemplo. E o que eu quero fazer a seguir é basicamente selecionar tudo. Controle C. Vá para o estado de horror, controle V, cole tudo dentro Simplesmente, você pode ir em frente e excluir o conteúdo antigo. Vou clicar duas vezes dentro e simplesmente ampliar minha imagem assim. E também vou saltar para dentro e expandir a minha máscara adulta para aqui. Então, como eu disse, esta é a coisa mais demorada sobre este design. Porque você pode imaginar que se não tivéssemos todas essas mudanças, todos esses efeitos de pairar dentro dos efeitos de pairar, todas essas sombras mudando com os estados de Horace, especialmente aqui. Então, se eu clicar aqui, você pode ver que é às cinco, deve ser às oito. Então, se não tivéssemos um design complexo como este, seria muito mais simples de ajustar. Então, mais uma vez, quando eu rolar para baixo naquele novo design, você pode ver como isso se parece, mas essas paredes estão parecidas com isso. Então outra parte que você pode pegar é usado este design exato, transformá-lo na pilha e, em seguida, posicionar a imagem em cima deles. Mas apenas Dan em vez de 3.52, por exemplo. Você pode fazer essa abordagem se quiser, mas tudo depende de você e como você quer abordar essas coisas. Então, por enquanto, vou em frente e mudar tudo isso usando essas mesmas técnicas e mesmos métodos. E estes vão, então, para seis colunas bem aqui. Então 12345 e depois seis aqui. Então você pode ver como vamos ajustá-los. Vamos ver 3, 4, 5, 6. Então este tribunal deve acabar aqui mesmo. Então deixe-me trazer meu passado e minha flecha. Então aqui, vamos contar mais uma vez. Então 123456, o que é bom. E então eu teria que trazer minhas divisórias. Então vamos ver, eu posso trazer este em dois mais ou menos por aqui. Então vamos com 240 assim e simplesmente usar este para baixo para 40 também. E agora tudo dentro do nosso conteúdo está alinhado corretamente. Então o que eu faria é saltar para o estado Horace e trazer isto de volta para cá. Vamos ver. Então 123456 e, em seguida, ir no meio, usar nossos divisórias e simplesmente usar para 40 assim. E é basicamente isso. Então, como eu disse, é isso para este vídeo. Eu vou pular em frente e mudar tudo isso porque, como eu disse, eu não quero aborrecê-los demais, todas essas mudanças, mas nós ainda vamos manter a mesma distância. E porque estamos em uma pilha, se um show que, então eu vou selecionar todos estes. Você pode ver que o conteúdo na parte inferior está diminuindo. E é isso que queremos alcançar com isso. Então eu vou vê-lo no próximo vídeo uma vez que eu terminar estes e, em seguida, nós podemos continuar trabalhando nas próximas seções. 39. Criação de design responsivo 3: Tudo bem, então agora eu fiz esta seção está completa. Deixa-me mostrar-te como é na pré-visualização. Então, se eu rolar para baixo aqui, você pode ver basicamente que parece exatamente o mesmo que era antes. Então nós temos a sombra de fundo, nós temos imagens ampliando e nós temos este botão bem aqui com o cursor do mouse. E eu também ajustei a largura de ambos os botões. Então, basicamente, eu fiz a mesma coisa que eu mostrei para, para esta primeira carta. E agora vamos em frente, porque nós concluímos isso e você pode ajustar a largura deste vídeo se você quiser. Mas para este tamanho, vamos deixar assim. Vamos agora seguir em frente e lidar com esses cartões de destino. Então, mais uma vez, como eu disse, esses cartões de destino vão se ajustar ao nosso layout. Então, se aproximarmos bem ali. Então vamos ajustar os decks muito rapidamente. Certifique-se de que está no centro assim. E o que vamos fazer com as cidades é, obviamente, como eu disse, eu vou remover alguns cartões porque nós temos todas as viagens na Europa botão abaixo de qualquer maneira, então nós podemos fazer isso. Então o que eu vou fazer é ter seis deles. Então, agora que os usuários podem clicar, eles vão ver três por três. Então eu vou me livrar desses dois na parte de trás. E eu também vou saltar para dentro das cidades africanas e me livrar desses dois aqui. E eu também vou para a Ásia, CTs, e me livrar dos dois últimos. E finalmente temos as Américas. E eu vou fazer a mesma coisa e eu estou fazendo isso agora só eu não esquecer mais tarde porque às vezes nós fazemos tudo isso, especialmente se você está correndo em um prazo apertado, pode ser extremamente complicado. Então agora vamos trabalhar em cidades europeias. Primeiro, vamos selecionar a pasta e movê-las aqui no lugar. Eu também vou ajustar nosso grupo de pergaminho dois aqui. Então, só para a borda da nossa grade assim. E basicamente o que eu vou fazer é ajustar cada cartão para liberdade para colunas em largura. Então o que eu posso fazer é simplesmente fazer isso e ele vai se ajustar bem. A única coisa que não funciona, e você pode simplesmente alinhá-lo um pouco melhor é, por exemplo, você usa 60 aqui. E então podemos, por exemplo, posicionar ou divisores para aqui, assim. E, por exemplo, Laura, isso caiu para 340, talvez. Acho que vai funcionar muito bem. Mas o ponto é alinhar todo esse conteúdo à esquerda e certificar-se de ajustá-lo, por exemplo, 10 pixels para a esquerda, e então ajustar o tamanho aqui no centro, C sólido, bem aqui, podemos usar algo como 5000 pense, Sim, 50 parece bom. E o que podemos fazer é simplesmente alinhar este primeiro divisor para aqui. É o tamanho 32018. E então podemos fazer o mesmo para este segundo. Então, 328. Então temos 53, 28. Então é isso que vamos fazer no segundo estado. Então vá assim. Então vamos ver. Vou me mudar e ajustar esses dois e a imagem também. Como assim. Então vamos ver, isso é bom. Então vamos saltar para dentro, usar isto. Então, 328 e eu podemos saltar para dentro daqui. A energia tem que ir para 15. E antes de chorarmos mais, vamos entrar e ver se isso estragou a nossa animação. Ele não fez. O que é ótimo. E é por isso que eu continuo dizendo sempre verificar suas animações e ver se tudo funciona como deveria ser entre seus estados. Então agora vamos seguir em frente e ajustar a mesma coisa para Londres. Então, mais uma vez, pulando bem aqui. E eu vou saltar para dentro deste aqui e movê-lo para cá. Então, para Londres, eu vou usar esses dois, desculpe, imagem final em si ajustada para aqui. Estes vão ficar os mesmos. Então vamos rapidamente para Paris. Divisor médio é 328. Então eu vou usar esse 1 primeiro. Então, 3, 28, assim. E vamos ver, eu posso ajustar isso para 50 também. Do meu pai. Isso é ótimo. E podemos saltar para o nosso estado e destino padrão, seta e imagem. Alinhe para aqui, vá para o meio. Isto vai ser 50. E esses dois serão 320, oito, o que é ótimo. E agora, finalmente, vamos ajustar este último para Roma. Vou fazer a mesma coisa por aqui. E a propósito, posso simplesmente saltar para dentro do horror se eu quiser fazer isso. Mas o que eu realmente gosto é primeiro fazer ajustes no estado padrão para todos eles, depois saltar para o estado terrorista e depois ajustá-los. Atreva-se. Também podemos usar 50 aqui porque vai funcionar muito bem e depois saltar para dentro da propriedade do cavalo. E vamos ver. Então aqui podemos ajustá-los para ser 328. Clique aqui, certifique-se de que são 50. E porque ajustamos isso de antemão, vai funcionar muito bem. Então, antes de seguirmos em frente com esses outros, eu só quero passar o mouse rapidamente e ver se todos eles funcionam como deveriam. Então isso funciona, isso funciona, e isso funciona, e eles parecem realmente ótimos. Mas quando você clicar aqui, ele vai levá-lo para a seção anterior. Então não é isso que queremos fazer. O que realmente queremos fazer é ajustar o espaçamento para todos eles corretamente. Então o que eu vou fazer é mover o DC-3 aqui. Então, até que se alinhem e escondam esses três. E antes de seguir em frente, posso simplesmente mover minhas flechas no lugar até aqui, por exemplo. E eu também posso mover meu botão e ter certeza que tem quatro colunas de largura, por exemplo. Posso ajustá-lo aqui e dentro do estado de horror, funciona muito bem. E agora eu posso lidar com essas três cartas. Então neste vídeo eu vou consertar todos eles e então eu vou voltar e ajustar todos eles e depois voltar e mostrar como todos eles se parecem para que possamos seguir em frente com essas outras seções. E como eu disse muitas vezes, é só porque eu não quero desperdiçar muito do seu tempo porque caso contrário, esta aula poderia ser algo como, eu não sei, 10 horas de duração ou algo assim. Então vamos tentar 50 aqui. Como pode ver, porque temos 10 dias, não funciona muito bem. Então vamos tentar 40. Acho que 40 funciona melhor. E ainda podemos fazer com 328, quatro aqui. Então lembre-se que são 40. Então, dentro do estado de horror, podemos trazê-los de volta assim. Indo citou um moinho, este vai ser 240. E estes dois são 328. O que funciona muito bem. Vamos voltar para o estado padrão agora, trazer este de volta para aqui. Como assim. Vou trazer estes três, como no meio. Vamos com 328. E aqui, porque temos a mesma coisa, vamos usar 40 ou muito da Terra. Podemos usar 50 aqui porque temos apenas um nos dias. Ou se você quiser manter a consistência, você pode fazê-lo, por exemplo, 40 para este 44 dias. Então, cabe a você o que quer fazer com eles. Então, agora que isso está concluído, vamos passar a pairar e trazer isso de volta para aqui. E é novamente 320 oito. E esses divisórias são basicamente a maior tarefa aqui. Então, na verdade, tudo depende de você. Se você quiser usar o divisor, se você não usar, mas se você fizer, lembre-se que eles podem ser um pouco de uma tarefa para ajustar. Ao contrário de todo esse outro conteúdo, que é muito mais simples de ajustar simplesmente fazendo isso. Se eu, por exemplo, mais desses divisórias, mais do que desse lado, você pode ver que eles estão se movendo todo o caminho e eles não estão se ajustando como a camisa, o que é, eu acho que um grande problema em XD, mas eles vão corrigi-lo em atualizações futuras. E vamos ver em estado de horror finalmente, vamos terminar isso para que eu possa mostrar como alinhá-los na grade. Então, 328 assim. E vamos ver aqui podemos usar 50 e chamá-lo por dia e dizer que agora nós completamos tudo. Agora, finalmente, temos 30 espaçamento entre cada um deles. Então eu vou selecionar estes, movê-los assim. Então eu vou trazer isso de volta. E para estes, vou simplesmente mudá-lo para 30 assim. Vou ajustar este grupo de pergaminho para vir até aqui. E o que eu também vou fazer é basicamente saltar para dentro e eu posso simplesmente usar este grupo inteiro porque nós temos os dois estados, se você se lembra. Então o que eu posso fazer é saltar aqui, selecionar todas as minhas informações e, em seguida, saltar para o meu estado clicado. Controle baseado em kit V e, em seguida, remova todos eles assim. E então dentro de nossas cidades, o que eu posso fazer é simplesmente empurrá-los para a borda. Então, assim, assim. E vamos ver se isso está correto. - É. Então, o que você também pode fazer se você quiser, você pode ajustar esta linha apenas um pouco se você quiser. Mas eu não acho que seja necessário porque este lado é plano de qualquer maneira. Então, agora, se alternarmos entre nosso estado padrão e nosso estado clicado, você pode ver como isso se parece. Então vamos saltar rapidamente para a pré-visualização e ver se a animação funciona. Aqui estamos nós. Então, tudo parece bom. Quando eu passar o mouse e clicar, ele vai traduzir para aqui vai olhar agradável e limpo. E quando eu voltar, eu teria que clicar e criar uma transição nesse estado. Então vamos para o estado clicado. Mas, na verdade, antes de fazermos vamos ver rapidamente, então destinos europeus setas, certo, passo ponto C, o que usamos. Então, toque em auto, animar os destinos rápido, fácil. Agora 0,6. Então podemos ir para o estado de cliques. Localize nossas setas ponto de passo esquerdo, clique direito Dara, toque autonomia, vá para o estado padrão, facilidade para fora e ponto zero 86. Então agora, finalmente, antes de terminarmos este vídeo, vamos visualizá-lo mais uma vez, ver como ele se parece. Então eu vou para a Europa. Bem ali. Horror, clique. Funciona. Howard clique que funciona. E obviamente este pergaminho não funciona. Então vamos ver por que as cidades de design e isso devem funcionar. Eu não entendo. Por que não funciona. Aqui está. Então, como você pode ver, às vezes há alguns bugs com o Adobe XD, mas basicamente funciona. E quando eu clicar aqui, também podemos trazê-lo de volta. Então Derek, oh ele, e também todos esses efeitos de pairar do trabalho como eles deveriam. Nosso botão funciona como deveria, e tudo está tão conectado. E também este texto entre o seu estado fica no topo, por isso parece agradável e limpo. Você também pode pensar em ajustar a altura da seção para que você possa ajustar a altura das cartas se quiser. Você pode simplesmente fazer isso ajustando a altura desta imagem e ajustando a altura de todas essas seções. Se eu for para Paris, por exemplo, Digamos que se você fizer isso, você pode simplesmente ajustar a altura de todas essas outras seções se você quiser. Você também pode colocá-los em um grupo, usar a pilha e, em seguida, quando você ajustar isso, ele irá ajustar automaticamente. Então essas são apenas algumas das opções que você pode fazer e você pode usar. Mas eu não vou, eu acho que parece bom como deveria aqui. Então, como eu disse, o que eu vou fazer agora é ir em frente e trabalhar nesses três. Então África, Ásia e América. E depois voltarei e mostrarei os resultados. E então vamos trabalhar em todas essas outras seções da nossa página. 40. Criação de design responsivo 4: Ok, então agora que eu fiz todas essas mudanças, deixe-me rapidamente orientá-lo e mostrar-lhe como eles se parecem. Então basicamente o mesmo que em todos esses outros layouts e o mesmo que fizemos aqui. Eu fiz exatamente a mesma coisa e exatamente os estribos, os mesmos passos para todos eles. Só não queria te aborrecer com detalhes. Agora, vamos trabalhar nesta seção, que é reservar a viagem dos seus sonhos e foi posicioná-la aqui mesmo. E vamos ver, talvez vamos dar a volta. Então eu vou posicionar minha imagem aqui e, em seguida, saltar entre as seções. E vamos ver, eu posso até reduzir o tamanho da minha imagem. Largura, por exemplo, ver como isso se parece, e então eu posso aplicar as alterações aqui. Então vamos ver se eu seleciono os dois. E simplesmente encolher termo como este. Vamos ver, talvez dois para alguns até assim, talvez. E então eu posso trazê-los de volta e ver posição, posicionar esse conteúdo aqui. E então vamos ver. Traga a imagem para algo como quatro colunas de largura, talvez. Até Nova Iorque. Isso na verdade, vamos ampliar um pouco mais para que possamos ajustar todos esses detalhes antes de seguirmos em frente e reduzir o tamanho. Agora podemos saltar para dentro, selecionar ambos e simplesmente reduzir a demanda. Vou clicar duas vezes na minha imagem em cada posição aqui. E é por isso que temos todo esse conteúdo como refazer aqui. A próxima coisa que vou fazer é clicar aqui mesmo. Vou certificar-me de que é altura automática porque vamos escalá-lo mais tarde. Vou clicar aqui mesmo. Certifique-se de que esta é a altura automática também, só porque vamos copiar mais tarde este texto, movê-lo em torno de todos esses outros tamanhos. E, portanto, eu quero explorá-lo dessa maneira e eu quero mantê-lo assim. Como você pode ver, a pilha ainda mantém a distância de 150 entre todas as nossas seções. E podemos mantê-lo lá ou podemos mudá-lo mais tarde. Tudo depende do que queremos fazer. Então, vamos para os nossos principais destinos. Vou alinhá-lo aqui. E basicamente eu vou fazer a mesma coisa como com todas essas cartas. Primeiro de tudo, vamos trazer as setas e posicionados por aqui. Então eles estão lá. E basicamente eu vou fazer a mesma coisa. Então, em primeiro lugar, para os destinos, eu vou trazê-lo aqui. Agora vamos ver se ele se alinha à nossa grade. Ele faz. Então as primeiras coisas primeiro, porque mais uma vez temos três cartas, podemos ajustá-las para ter quatro colunas de largura. Então eu vou saltar para dentro deste e nós podemos ajustá-lo para estar aqui para quatro colunas de largura. E eu acho que os textos que você vê aqui, realmente não importa, desde que seja compreensível e legível. Então você pode saltar para dentro daqui e ajustar isso para o que quiser. Então vamos ver, talvez eu possa ajustá-lo para aqui. Eu poderia fazer isso. Não importa, desde que faça sentido. Então vamos ver. Vamos manter quatro linhas de texto em altura. Então o que eu também posso fazer é usar o conteúdo daqui, então Controle C. E basicamente a única coisa que fizemos aqui, que é diferente, está naquela sombra de fundo. Então eu vou para aqui, clique aqui e, em seguida, usar oito para o fundo raso. E eu também vou clicar duas vezes e ampliar esta imagem em apenas um pouco até aqui. Então, agora que isso está concluído, posso voltar ao estado padrão e posso trazer esses dois. Como você disse, quatro colunas de largura. Então aqui, certifique-se de que faz sentido. Ele faz. E eu também posso passar o mouse porque não requer nenhuma alteração. E você pode ver que ainda temos esses dois estados. E o texto tem quatro linhas de altura. Para que eu possa voltar a este. E você pode ver com alguns desses elementos, é muito mais simples de ajustar porque eles estão naturalmente ajustando e preenchendo todo esse espaço. Agora vou fazer a mesma coisa que fiz com as anteriores. Então eu vou usar esta posição aqui mesmo. E eu vou trabalhar em mais. Michelle, e certifique-se de que tem quatro colunas de largura aqui, imediatamente, temos o problema. Então o que eu vou fazer é usar isso. Então St apenas como uma espécie de abreviação para o nome original. Então todo mundo ainda sabe o que é, mas em apenas diz pestis em vez do nome completo. Então esse Derek saiu. E eu vou voltar para a posição padrão do estado aqui. E para uma Sydney, eu vou ter certeza que tem quatro colunas de largura como esta. Vá para a data do Horace, certifique-se de que tem quatro colunas de largura. E você pode ver quando você está projetando com esses elementos simples, sem divisores, por exemplo, e sem todas essas animações complexas, fazer isso é realmente muito fácil. Então, como você pode ver, é realmente bastante relaxante na verdade fazer isso e realmente muito simples. Então, finalmente, o que vamos fazer é tirá-los do caminho assim e trazer todos esses caras para dentro E, em seguida, reposicionar para 30, certifique-se de que este é o lugar onde deve estar. E então simplesmente parecia com outros, selecionar seu conteúdo, copiá-lo, ir para o estado clicado, baseá-lo aqui e, em seguida, excluir o conteúdo antigo. E a única coisa que eu quero fazer aqui é dois meus destinos e simplesmente mover os destinos para aqui. Também vá para Prototype, vá duas setas, um ponto de guia esquerdo clique nele porque queremos voltar para auto animar, escolher o estado padrão, fácil em nosso 0.6. Então isso vai ficar na mesma mão, voltar para o estado padrão, e aí você tem. Agora vamos passar para esta seção, que é depoimentos. Agora, dentro de nossos depoimentos, o que eu quero fazer é ir aos nossos próprios testemunhos. Porque você pode ver que este fundo, se eu mostrar a vocês, se eu clicar no meu cartão aqui, ele não vai até aqui, o que eu realmente gostaria que ele fosse e expandisse. Então o que eu vou fazer é copiar este texto, ele Controle C. Então desagrupe isso. Vá Control G mais uma vez e baseado em, e eu vou usar a pilha. Então o que eu vou fazer dentro da pilha é que eu vou simplesmente ajustar esta largura do cartão. Então eu vou ajustá-lo para aqui. Então largura deste, então 11, 12. E então eu vou pular dentro do segundo. Baseado no valor da dívida. E você pode ver que a pilha vai ajustar automaticamente apropriadamente. Então eu vou colá-lo bem ali. E eu vou fazer o mesmo por isso. Então agora o que podemos fazer é fazer essas mesmas mudanças em todas elas como eu vou fazer. Ou você pode simplesmente copiar e colar domínio, se quiser. Então o que eu vou fazer é usar esses mesmos. Exceto, por exemplo, para o herói ou conhecimento. Vamos posicionar todos eles. Então, como você pode ver , organizou-os de uma maneira agradável aqui. Então vamos ver depoimentos. Teríamos que fazer isso mais uma vez, infelizmente, então desagrupe, você pode acertar depoimentos de qualidade do Control G. O meu pai. E vamos incluir essa mesma distância. Mas vamos começar com a ferramenta de testemunho porque é este. Então eu vou colá-lo assim. Eu vou fazer o mesmo neste primeiro. Eu fiz. E vamos ver se voltamos ao nosso estado padrão, vamos aos depoimentos e vemos a distância é de 60. Então essa é a distância que vamos usar para este aqui. Então, testemunhos. Então pilha, eu vou usar 60, eu duvido. E então o que eu vou fazer é simplesmente empurrá-los todos que este segundo preencha bem o espaço. Vamos tentar desta forma. Eu tenho isso e agora que temos isso, deixe-me saltar para dentro daqui, copiar este valor. Então, estamos aqui. E agora vamos passar para o próximo guarda. Então vamos fazer o mesmo por isso. Vou colá-lo assim. E, finalmente, faça o mesmo por isso. Então, cola-o aqui mesmo. Agora, o que eu posso fazer para evitar esse tipo de confusão é simplesmente usar um Controle C na seção de depoimentos e ir para o depoimento número 3, remover este aqui, colá-lo aqui, e eu posso simplesmente ajustá-los para que eu me encaixe neste. E isso nos evitará criar animação para o texto, que é basicamente. O mais exigente de todos nesta seção particular. E volte para aqui, apague este. Controle V posiciona-o aqui em cima. Porque mais uma vez, você ainda tem que fazer isso para o bem da animação automática. Então ele terá que reposicionar igual e sujeira e ver onde ele está. Ainda tenho que empurrá-lo um pouco até aqui. O que eu realmente não gosto sobre isso são as flechas, então eu gosto de tributar isso. Eu acho que é bom. Mas para as setas, Vamos voltar para o estado padrão. Vamos trabalhar neles lá. Então o que eu vou fazer é simplesmente posicioná-los bem aqui e apertar o Controle C e ir para o segundo estado, controle V. E quando posicioná-los para baixo, excluir os antigos. Controle V. Neste, exclua os antigos e simplesmente mova para os novos para baixo. E finalmente, estado número quatro, eu vou fazer o mesmo. Então mudou-o para cá. Removi os antigos, manada de laticínios. E agora vamos trabalhar rapidamente em nossa animação. Então, protótipo, como você sabe, temos apenas um “D “bem aqui. Então, na seta para a direita, temos fácil agora 0.6. Então é isso que vamos criar para todos eles. Então depoimento para localizar suas setas, ponto de passo esquerdo vai nos levar para o estado padrão, direita. O ponto de tabulação vai nos levar ao depoimento três. Mais desgastados para o depoimento três vão localizar nossas flechas. Aqui estamos nós. Clique aqui. Você vai para o depoimento para, isso vai nos levar para o Testemunho Quatro. E finalmente ir para o último. E neste último vamos usar endpoints esquerdos para ir para o anterior, que vai ser o testemunho três. E lá temos. Antes de avançarmos, só quero verificar rapidamente e ver se temos tudo isso e emissões, certo? Então vamos começar com este. Então nós temos, como nós temos tudo isso, que é ótimo, e ele funciona como é camisa vestida. Muito satisfeito com isso. Então vamos ver, deixamos este em pairar, então vamos consertar isso. E isso funciona como deveria, então tudo parece bem. E finalmente, vamos conferir esses depoimentos. E eles parecem bons. Vamos voltar, ver para as linhas para 32. E finalmente um, o que é bom. Então, vamos resolver isso rapidamente. Então, como eu disse, deixamos a Toscana aqui. Então, destinos, Toscana, deixámo-lo nos estados de terror. Basta clicar em estado padrão e eu posso fazer uma verificação rápida e ver se eu deixei algum deles e eles são tão bem não. E finalmente temos que ir para os destinos estaduais clicados. E vamos ver, Maldivas está no padrão. Padrão. E você pode ver que a Toscana está horrorizada aqui também. Então você tem que mudá-lo em ambos os estados para que você possa evitar qualquer tipo de. Confusão e qualquer tipo de falhas no futuro. Então vamos ver o que temos. Completamos todas essas seções. Vamos agora passar para a disciplina. E o que eu vou fazer basicamente é fazer o mesmo para categorias de viagens como fizemos para todas essas outras. Eu vou simplesmente ajustá-los e ter certeza de que eles têm seis colunas de largura. E foi para NIJ Dares, vamos contar 1, 2, 3, 4, 5, 6. Então, mais uma. 23456. Isso é bom. E eu vou mover este aqui e ajustado para aqui. Basicamente, como você pode ver, a única coisa que realmente vai ajustar é a largura da imagem, assim. E vamos rapidamente fazer o pairar para estes. Então eu vou selecioná-los. Certifica-te de que são um seis. E eu vou me certificar de voltar para o estado padrão em todos eles. Assim como. Assim funciona bem, nós terminamos os parceiros, e agora vamos lidar com este para que possamos usar as mesmas dimensões que fizemos antes. Então eu posso ir aqui e ver que minha imagem tem 514 de largura. Então vamos usar essas mesmas configurações para esta seção aqui. Então imagem, eu posso ir com 514. Algo não funcionou lá. Vamos ver. Talvez possamos fazer isso manualmente. Então, vamos ver, quatro deles assim. Acho que está tudo bem. E talvez possamos até ajustar isto para que se alinhe com esta linha de grade, um lago que está bem aqui. Deixe-me verificar. E isso é ótimo. E uma última coisa que esqueci de fazer para essas seções é ajustar os botões. Então você pode ver nestes, as coisas estão se movendo em um ritmo muito mais rápido. Vamos lidar com este. Eu vou clicar aqui e só o meu botão ali, nós temos. E basicamente as dívidas por essas seções. Como eu disse, alguns deles vão ser muito mais simples. Alguns deles como este vai ser muito mais difícil. Mas antes de passarmos para este, eu quero clicar duas vezes na minha prancheta, estendido todo o caminho para baixo para que eu possa trabalhar no meu rodapé. Então deixe-me primeiro ajustar estes dois. Então eu vou fazer nesta imagem parece bem. E vamos agora lidar com as informações do rodapé em si. Vamos primeiro alinhá-lo à nossa grelha assim. Vou usar meu logotipo se puder, e posicioná-lo no centro do meu quadro de arte. Não sei por que não me deixa fazer isso. Então vamos usar um retângulo. Vou usar um retângulo aqui. Mas antes de o fazer, vamos ver rapidamente a distância entre eles. Então são 100. Ok? Então vamos usar um retângulo. Muito rápido. Selecione e um logotipo. Certifique-se de que o logotipo está no centro ou um movimento nosso retângulo. E agora para a informação do rodapé, podemos posicioná-lo a 100 a partir do topo. Como isso. Então agora está em 100. E agora vamos lidar com a navegação principal. Então, como você se lembra, fizemos tudo isso com um propósito. Então o que eu posso fazer é talvez alinhá-los à grade do espaçamento de dois, como ele faz. E assim. Então posso fazer o mesmo por estes, por estes. Então vamos ver, talvez eu possa alinhar isto aqui e depois fazer o mesmo por isto, isto e isto. E talvez eu possa até aumentar para aqui e talvez colocar isso aqui e, e ver o que podemos fazer aqui. Então, talvez aqui, isso possa ficar lá e ficar lá. Então é bem e uniformemente espaçado. Então o que eu vou fazer a seguir, estes perto, estes dois. Eu vou saltar para o meu divisor de áreas aqui é simplesmente trazê-lo para aqui, fechar este e, em seguida, trabalhar no meu fundo forçado. Então o que eu vou fazer aqui é que primeiro de tudo, reduzir o espaçamento muito como sujeira. E então, por exemplo, eu posso chamar isso de termos talvez. Vamos ver. Talvez possamos trabalhar nisso assim. Então vamos ver, bem ali. Só estou a tentar pensar em como podemos ajustar isto. Então, vamos realmente clicar aqui e usar o mesmo espaçamento fora, digamos 40. Ou talvez algo um pouco maior. Então talvez 80. Katie trabalha melhor. Então, agora vamos tirá-lo do caminho para aqui. E lá temos. Nós completamos nosso rodapé. Agora, a última coisa que quero fazer é clicar duas vezes aqui e fechá-la na parte inferior. E agora podemos seguir em frente e trabalhar nesta seção aqui mesmo para as perguntas e respostas. Então a primeira coisa que eu vou fazer é movê-lo aqui e então eu preciso ajustar todos eles para ser capaz de caber todas as minhas informações dentro. Mas não vou me preocupar com isso agora. Vou fazer outra coisa. Eu vou realmente usar minha pilha, virá-la assim. E então eu vou posicionar toda a seção no me conhece centralizado certeza de que meus dados estão no centro, aproximadamente por aqui. E eu vou fazer a seguir é certificar-me de que todos estes estão centrados. Vou certificar-me de que ambos os meus textos, nosso centro alinhado assim. E eu também vou me certificar de converter meu texto para isso para que eu possa estender e preencher o resto do meu espaço assim. Então eu vou entrar e me ajustar. Assim como. Então, como eu disse, este é aquele pedaço chato neste primeiro estágio. Mas mais tarde, quando avançarmos para outros tamanhos, vai ser muito mais simples de ajustar, porque vai manter todos eles como para que você possa até mesmo fazer isso em uma linha se você quiser, mas eu vou mantê-lo assim. Quero dizer, vamos ver. Talvez possamos mantê-lo em 60. Acho que vai ficar tudo bem. Finalmente, vamos tentar ajustá-lo agora e ver se é Sim, eu acho que vai ser bom. Ver desafio e rebanho leiteiro. E finalmente, vamos trabalhar neste botão. Vamos posicioná-lo assim. E então como Este ousar hábito. E finalmente, vamos lidar com isso. Não vou mudar muito para todos nós. Vou trazê-lo para 100, por exemplo. E então eu simplesmente vou centralizá-lo porque eu não acho que é necessário para ele ser esquerda e direita ou o que quer que seja e centralizá-lo ainda melhor, o que eu posso fazer é usar o centric. Então vamos usar o 100 de qualquer maneira da distância. Certifique-se de que está no centro. Remova nosso retângulo assim e, finalmente, mova isso para baixo. Então vamos ver, eu posso pular aqui e digitar impressão 100, assim, e lá nós temos. Agora, uma última coisa que vou fazer é mover isto para baixo. Mas antes de me mexer, vamos verificar rapidamente se funciona. Deve funcionar porque trocamos de lugar. Então vamos ver, ele funciona e é ótimo porque empurra o conteúdo para baixo, que é o que queríamos em primeiro lugar. Agora estou percebendo um problema aqui. Você pode ver que neste campo não vai todo o caminho até a linha. Então eu vou mover toda a entrada 2 aqui e ver o que temos que fazer a seguir. Então, entrada de texto, eu vou simplesmente mover isso para alinhar aqui. E agora nós o temos no lugar porque eu acidentalmente movei-o provavelmente da vez anterior. Então eu vou simplesmente estender isso para baixo, fechá-lo na parte inferior como assim em vaca leiteira que, nós temos nossa página completa. Agora, se você não quer que este espaçamento seja assim, porque nós temos essa soma, essa quantidade de espaço bem aqui. Uma vez que tudo isso está fechado, você pode trazê-lo para, por exemplo, 100 aqui se você quiser. Mas eu não vou me preocupar com isso porque, como ele disse, eu prefiro que tudo isso pareça consistente e coerente e, em seguida, mudar de lugar aqui. E foi por isso que usei 150 para todos. Como eu disse, você pode fazer o que quiser, você pode usar o que quiser. E isso é basicamente para este tamanho. No próximo vídeo, vamos passar para o próximo tamanho. Vou mostrar a vocês como todo esse processo vai se parecer. Vai ser exatamente igual a tudo o que te mostrei. Que as coisas vão realmente mudar e seguir em frente quando passamos para o tamanho do tablet. Então é isso que é mais importante nessa área. E então, finalmente, vamos ajustado principalmente para um tamanho móvel. E é aí que vai parecer mais diferente de todos esses outros tamanhos. Então, como eu disse, eu vou vê-lo no próximo vídeo onde nós vamos trabalhar neste próximo tamanho. 41. Criação de design responsivo 5: Vamos agora passar para o próximo tamanho. E esse tamanho vai conter algumas mudanças. Não vai ser nada muito importante assim. Ele vai estar aqui para o tamanho do tablet e especialmente para o tamanho do celular. Porque, como eu disse, vamos remover a maioria desses componentes para os tamanhos menores por causa da propriedade da tela. Mas para esses grandes dispositivos, até 99 dois, nós realmente vamos fazer interesses futuros, que vai tornar nossa vida muito mais fácil mais tarde para todos esses dispositivos médios. Então, primeiro de tudo, o que eu vou fazer é segurar minha tecla Alt e arrastar isso até aqui, assim. Certifique-se de alinhá-lo. Então eu vou copiar este texto no topo. Vou clicar aqui. E também estou fazendo isso em apenas porque eu sei que tamanho é. Mais tarde, assim que eu começar a exportar isso para meus desenvolvedores. Então, quando eu clicar aqui e você pode ver 1024, então é o que vamos fazer primeiro. Então, 10, 24, assim. Então ainda temos 12 colunas. Então 30, 50, 47. E esses são os valores, então 30, 50, e quando inserir 47 aqui. Então vamos mais uma vez. 3050 e 47. Então, lá temos. Agora, primeiro, vamos trabalhar em nossa primeira música de navegação superior e quando saltar para dentro, usar meu nav principal e eu vou entrar e ir para o meu nav principal e também usar meu borrão. Então eu vou até aqui e ver o 1024. Então vou saltar para dentro do meu borrão de navegação principal. E para o duit, use 1024 assim. E depois vou abrir isto para o meu secundário. Agora. Ainda posso usá-lo como está. Posso trazê-lo aqui. E eu também posso, por exemplo, baixá-los para 20 talvez. Então, algo assim. Eu estou segurando o turno assim para que nós tenhamos apenas um pouco mais de espaço para o nosso logotipo, que nós realmente vamos mover aqui mesmo. Também para todos estes, Vamos selecioná-los. Então eu vou selecionar o meu seletor, bem como para que ele se mova com o nosso texto. Bem-estar de inverno, cruzeiros individuais animais faz. Vamos movê-los para cá. Então o que vou fazer é trazer-nos até aqui. E eu vou tentar fazer isso o que eu fiz anteriormente. Então, selecione-os todos, distribuí-los assim. E ele ainda funciona com este tamanho de fonte soviético tem que mudar os sites de fonte ainda. Mas vamos mudar isso um pouco mais tarde. Vou cutucar o meu logo aqui. Então a primeira coisa que vamos fazer é expandir nosso navegador primário e borrar todo o caminho até aqui, por exemplo, 10, 76, para que possamos facilmente ver o que estamos fazendo aqui. Então vamos começar com o nosso destino. Então eu vou abri-los e escondê-los e trazê-los aqui e vamos ver como estamos com eles. Então estamos em 42. Talvez eu possa usar 60. E desta vez, acho que funciona bem. E o que eu vou fazer é a mesma coisa que fizemos anteriormente. Então eu vou saltar para os meus destinos. E vamos ver, eu tenho opção automática aqui, mas eu só vou verificar quais funcionam melhor. Então, até assim, acho que funciona bem. Então vou fazer o mesmo pela Ásia. Então. Muito difícil às vezes com alguns deles, mas como seu mostrar-lhe em um tamanho anterior, você pode fazer isso manualmente se você quiser, especialmente um lá para baixo para a dívida da América e, finalmente, para as Américas. Vamos fazer isso aqui mesmo. Então esta é a questão. Nós estamos indo para correr em uma música, indo para deixá-los em algum lugar por aqui, por exemplo, apenas vi que o grosseiramente alinhado para o topo, eu sempre posso fazer algo assim e, em seguida, saltar para SEO e eu posso movê-lo manualmente para ouvir seu código. Agora que temos o nosso destino, vou escondê-los. Clique aqui. Vou trazer meu inverno de volta. E a coisa com isso é o que você vai fazer na verdade é se livrar dessa ilustração. Porque ilustrações são ousar em tamanhos de tela maiores para que você tenha toda essa tela real e você pode usá-lo muito mais facilmente. Mas quando você chega a esses tamanhos de tela mais baixos, não há necessidade de você usar todos esses elementos diferentes. Então, basicamente, o que eu vou fazer é pular para dentro, excluir minha ilustração de inverno, e então pular dentro do meu texto. Vou para o centro de arejamento. Vou clicar aqui para que eu possa alinhá-los todos assim. E eu também vou selecionar meu botão, ter certeza de que tudo está no centro, e então simplesmente trazer meu texto aqui para o centro, assim. Então o mesmo de antes. Vou saltar para dentro e ajustar o meu botão, então vou posicioná-lo aqui mesmo. E vamos ver, 2, 4 eu acho que é bom o suficiente. É. E faça o mesmo para o pairar. Derek 0 do meu pai. Então agora temos o mesmo espaçamento, temos os mesmos elementos, temos o mesmo texto sem a própria ilustração. O que você pode fazer é, na verdade, você pode ajustar a altura se você quiser. Você pode posicionar e este texto é um pouco mais baixo se você quiser. Mas se eu acertar a pré-visualização bem rápido, você pode ver como isso parece uma serra. Gosto sempre de manter o meu texto lá em cima porque mantém muito mais a atenção do espectador e do visitante. Quando o texto é mais alto para o topo, em seguida, os ganhos para baixo, porque então eles podem concentrar seus esforços aqui. E ainda vamos manter nossos efeitos de pairar porque ainda temos uma largura para o mouse aqui, porque estes ainda são tamanhos de desktop. Então vamos baixar nosso inverno. Vamos ao Wellness mostrar e fazer a mesma coisa. Excluir, ilustrar, posicionar texto, certifique-se de que está centralizado, alinhar, selecionar tudo. Certifique-se de que está no centro. E, em seguida, basta trazer texto para o centro bem ali, rebanho leiteiro. E faça a mesma coisa para os botões. Eu vou realmente alinhá-lo aqui mesmo. E quando se certificar de usar para como este e usar para lambdas sempre ir da esquerda para a direita com esses botões para que você não tenha nenhuma dessas falhas e erros. E, a propósito, enquanto eu estava gravando esta classe, Adobe XD inicia uma atualização para que você não possa ver o. Menu de hambúrguer aqui, mas você tem todas essas opções aqui. Portanto, em vez de hambúrguer e todas essas outras opções, é a mesma coisa que é em um Mac. Então, basicamente, você pode passar o mouse aqui e usar qualquer uma dessas opções se quiser. Ambas as opções do botão direito ainda funcionam como estavam. E a equipe do Adobe XD lança essas atualizações de tempos em tempos. E basicamente às vezes há pequenos como este, mas às vezes eles são um pouco maiores e um pouco maiores. Portanto, basta manter os olhos abertos para essas atualizações para que você corra sempre atualizado. E eu sempre recomendo que você atualize seu XD sempre que puder, ou se você tiver, você pode configurá-lo para atualizar automaticamente. Se você tiver a assinatura do Cloud, se não estiver usando a versão gratuita do XD. Certo, agora que o indivíduo acabou, tenho cruzeiros e meio para consertar. Então deixe-me deletar minha ilustração de cruzeiros. Vou certificar-me de que todos estes estão centrados. Isto está centrado. Vou trazer a minha mensagem até aqui, assim. E eu vou consertar meu botão aqui e depois usar quatro. Assim, abrigam seus hábitos. E eu vou escondê-lo. E, em seguida, trabalhar com a seção Sobre Nós. Agora, para esta seção Sobre Nós, o que você pode realmente fazer é que eu vou fazer a mesma coisa para o texto. Então eu vou selecionar todos eles, ter certeza de que eles estão alinhados no centro, certifique-se de que o botão está no centro também. E eu vou trazer meu texto todo o caminho até esta borda bem aqui, assim. Então basicamente carros endividados, vamos ver, eu tenho quatro deles vazios basicamente. Então o que posso fazer talvez seja reduzir um pouco mais. Então vamos ver. Primeiro vou esconder meu mapa e ver que este texto está realmente fazendo um problema. Então o que eu posso fazer é simplesmente agrupar meus textos assim e deixar as quatro colunas vazias para o meu, para o meu mapa. Mas antes que eu faça, nós temos 40 aqui, então nós vamos apenas mover nosso botão para pixels para baixo. Mas antes de fazer mais uma vez, vamos ter certeza de que tem quatro colunas de largura, assim. E assim. Então eu vou mudar com 40 agora, vamos ver assim. E finalmente, vou me certificar de que tudo está centrado assim. Agora vamos trazer a informação do mapa de volta. E basicamente o que eu vou fazer aqui porque nós temos essa pilha. Se me lembrar, vou entrar no meu grupo, temos a pilha disponível. E eu estou basicamente indo para habilitar minha pilha mais uma vez aqui para que tenhamos basicamente duas opções de pilha. Vou levar isto para a esquerda assim. E vamos ver, daqui até aqui temos 20. Então podemos fazer isso também. Eu posso digitar 20 aqui. Então temos 24 estes dois e 24 isto no fundo. E finalmente para o mapa, eu vou apenas clicar duas vezes dentro e posicionamento para estar em quatro como este e ajustar meu mapa P90 indo para algum lugar por aqui. Acho que isso é bom. E lá temos. Essa é a nossa navegação concluída. Mas eu também posso fazer é talvez empurrar nosso texto um pouco. Então, basta movê-lo até que ele se alinhe melhor com nossa linha de grade, por exemplo, aqui mesmo. Só para termos um pouco mais de espaço entre o nosso mapa e o nosso texto. E nós não quebramos nenhuma regra, mas vamos, na verdade, trazê-lo um pouco para a esquerda, assim. E o chapéu deles. Então agora o que me resta é fazer a mesma coisa. Então eu tenho que basicamente copiar e colar todos esses itens dentro. Mas navegações ou deveria realmente funcionar porque eu não fiz mais nada com essa navegação superior. Basicamente, eu posso simplesmente reorganizar estes no topo sólido C. Vamos ver, eu posso usar um logotipo secundário. E deixe-me copiar todos, exceto a navegação primária desfocada. Então isso vai ser em 1024, 10, 76. Então vamos copiar todos eles. Eu isso, e para este primeiro, eu vou trazer meu borrão de volta para um, assim. E neste estado padrão, vamos ver, vamos realmente esconder o seletor. Então vai ser no 0 I que nós vamos para as nações. Isso, e se você quiser manter suas animações, você pode basicamente ajustar tudo. Mais uma vez, como eu disse, mas não vou me preocupar com isso. Eu vou remover todos eles e fazer as animações novamente mais tarde porque eu acho que é muito mais simples. Então 10 a 24 e ele faz isso em 10, 80, o que é bom. Então basicamente destinos e eu vou mostrar meus destinos e vamos usar todos esses outros, trazê-los para 20. Vá para a base de inverno 10, todo ele, e então vá em frente e remova tudo, exceto o principal agora borrão. Então eu vou trazê-lo para 24 assim. Vou, vamos ver, trazer o meu conteúdo de inverno. E agora destinos e todos esses outros que foram para ser aos 20. E eu vou saltar para o meu seletor mais que aconteceu aqui mesmo. É demorado. Mas se você quer fazer tudo corretamente, então você realmente tem que pular e fazer todas essas coisas. Então, vamos excluir tudo isso com base nas novas informações. Isto vai ser um bem-estar. Então isto, isto, e vamos ver. Todas essas outras filas serão 20. Seletor vai se mudar para o bem-estar assim. Vamos ver. E eu vou simplesmente movê-lo aqui, trazer o meu conteúdo de bem-estar, mostrá-lo assim. E eu vou terminar com esse indivíduo e então eu vou pausar isso para que eu possa fazer os itens de navegação. Eles podem fazer as animações sem te aborrecer demais. Então vamos ver, estamos em estados individuais ou vamos esconder todos eles para 20 exceto para o indivíduo. Vou usar a minha posição seletora aqui mesmo. Vamos, aqui, estamos trazendo meu conteúdo individual e eu vou simplesmente ajustar meu seletor até que ele se encaixe. E veja bem ali para trazer meu painel de camadas e rebanho de laticínios. E aqui temos que ajustar isso ao Dan 24, certo? Então vamos para cruzeiros. Exclua tudo, com base nele. Então todos estes vão ser 20 seletor e vamos trazer cruzeiros. Basicamente, este seletor é o tedioso, mais tedioso de todos, porque você tem que ajustá-lo, movê-lo, mas tudo a favor de uma boa animação. E vamos finalmente acabar com eles sobre nós. Então eu vou remover todos eles. Primeiro de tudo, isso vai ser 1024 e é incorrido para vigiado nos cruzeiros anteriores? Eu acho. Então vamos ver, antes de agora borrão. Sim, então 1024. E você pode rapidamente saltar entre todos esses estados e ver, por exemplo, para o indivíduo, você pode ver se você fez isso para o bem-estar para todos os sólidos ir para sobre nós e vamos trabalhar nisso. Então, sobre nós, vou selecionar todos eles e trazer novos 220, usar meu seletor. Mais foram para escrever aqui, trazendo o meu sobre o conteúdo da tarefa. Traga isso para 1024, tudo bem. E, finalmente, trabalhar no nosso seletor. Assim. E lá vamos nós. Agora que todos os nossos estados, acabados, o que eu vou fazer é basicamente saltar para aqui, ir para o protótipo e ver. Quando eu clico no primeiro, Eu tenho tipo auto animar, facilidade em fora 0.4 segundos. Então esse é o que eu vou usar em todos esses outros estados. Então vamos para destinos. Você pode ver que ele manteve todos esses e todos esses, o que é ótimo, mas não manteve todos esses outros. Então vamos para aqui e vamos ver. Portanto, os destinos não vão ser selecionados um inverno. Clique, toque em, animar automaticamente. Vamos para o inverno, entrar , sair e 0.4 segundos. E basicamente agora que o Adobe XD se lembrou, ou você precisa fazer, é simplesmente ir em frente e conectar todos eles. Então isso é individual, isso é cruzeiros IDAT sobre nós, e é isso. E, finalmente, para o logotipo, agora você pode clicar no próprio logotipo. Você realmente não tem que clicar no logotipo nesse ponto porque é o PNG de qualquer maneira vai voltar para o estado padrão. Vou pausar o vídeo aqui enquanto faço todos esses estados e depois volto. Ok, agora isso está completo. Vamos passar para a próxima seção, que será obviamente nossa seção de heróis. Então vamos trabalhar no próximo n. Basicamente a única coisa que vamos fazer. Mas antes de eu fazer isso, deixe-me mover rapidamente este fundo agora mesmo aqui para que não nos distraia muito. A única coisa que vamos fazer é mover essas flechas. Então eu vou para o ponto de guia de seta para a esquerda, e eu vou movê-los aqui mesmo. Assim. E eu também vou fazer isso aqui mesmo. Posicione-o até o limite assim. E eu vou mover a nossa mensagem para o centro. Vamos com o botão Herói e a máscara de texto. Certifique-se de que eles estão em um centro. E finalmente, o que eu vou fazer com meu botão é expandido dois aqui e dois aqui. E é basicamente isso. Você pode ajustar todas essas imagens, é claro, mas eu acho que esta funciona bem. Este ainda funciona bem. E vamos ver, este terceiro funciona muito bem, na verdade. Então vamos deixar todas essas imagens. Então, mais uma vez, isso vai ser quatro para o padrão e para pairar assim. E setas e texto virão no meio. Então, sem mais alterações para eles, vamos simplesmente alinhá-los todos para o remetente. Assim. Mais uma vez, certifique-se de que meu botão tem quatro colunas de largura, assim. Então você pode ver às vezes com esses estados, você pode facilmente ajustá-los. Você pode fazer todas essas coisas muito mais facilmente. Então vamos ver, esta é a linha que está bem e a direita simplesmente ajustada. Onde é que está? Aqui? É. Assim. Então você pode deixar suas imagens penduradas como eu estou fazendo aqui. Ou você pode simplesmente trazê-los de volta assim, se você quiser. Então vamos fazer isso para todos os estados porque não altera muito a imagem. Então tudo o que estou vendo aqui é que você pode fazer o que quiser, porque quando você exportar esta imagem, vai ser para a largura do aeroporto de qualquer maneira. Então realmente não importa. É só para não distrair você enquanto você está trabalhando. Então vamos ver, flechas do centro do jardim de coral. Mova-os assim. Deixe-me mover minha segunda flecha aqui. E se você está pensando que às vezes eu estou indo muito rápido é só por causa da experiência. Tudo isso se torna uma espécie de memória muscular. Então você começa a conhecer todos esses atalhos. E você, obviamente, começa a aprendê-las assim que começar a trabalhar. E, obviamente, quanto mais projetos você tiver, mais fácil será ajustar a todas essas mudanças diferentes. Então, por exemplo, esta nova mudança que acabou de trazer para esta nova versão do XD. Eu nem notei que alguém disse isso no Twitter e eu apenas verifiquei muito rápido e não é nada muito importante realmente. Então vamos em frente e verificamos. Veja se temos todas essas animações. E agora você pode ver, ao contrário deste menu no topo, nós mantivemos todas essas animações porque nós simplesmente ajustamos o que tínhamos anteriormente e simplesmente movemos isso para o lugar assim. Então todas essas animações permaneceram exatamente as mesmas. Enquanto com este. Quando eu clicar aqui, você pode ver que a animação ainda funciona. Mas como ajustamos o conteúdo tanto quanto eu expliquei, tivemos que ajustá-los enquanto todos eles no topo ainda estão funcionando como deveriam. Porque, como eu disse, nós apenas movemos o conteúdo um pouco mais para perto usando essas pilhas. Agora, finalmente, vamos em frente e trabalhar nesta navegação inferior. Então o que podemos fazer aqui é, por exemplo, os EUA 30 deles e apenas usar dois para o botão. Então deixe-me mostrar o que quero dizer. Vou trazer este fundo bem aqui, ter certeza que está posicionado aqui à esquerda como está. Então vou usar o meu botão. Vou posicioná-lo aqui e simplesmente digitar mentira. Não vou usar filtros. E então eu vou usar meu botão e simplesmente movê-lo para aqui. Deixe-me esconder a barra de pesquisa para que você possa ver como o botão vai ficar. Então nós somos realmente muito pequenos e muito pequenos, mas ele vai fazer o seu trabalho como deveria. Então aplique e simplesmente ajuste nosso botão aqui. Então, alternando entre os estados, você pode ver o que temos. Então, vamos agora esconder a pesquisa, por exemplo. E eu fiz isso apenas para que pudéssemos ter, por exemplo, três colunas para cada uma delas. Então eu vou usar meus destinos. E para este primeiro estado, vou expandir o meu BG até aqui. Por isso, alinha com este. Eu também vou usar a minha posição divisória aqui e usar a minha máscara e simplesmente estendê-la até aqui. E basicamente a única coisa que você vai mudar aqui é isso. Então vamos fazer a mesma coisa aqui. Então destinos e máscara, podemos realmente selecionar ambos ao mesmo tempo e posição aqui. Então vamos usar o destino e alinhá-lo com a nossa linha de grade. Como se essa máscara fosse sair um pouco. E finalmente temos essa divisória, que vai ficar bem aqui. E o que você pode fazer é expandir essas linhas de conteúdo se você quiser, mas eu vou apenas mantê-las como são genótipos. Vamos ajustá-lo também. Então eu vou movê-lo aqui para que ele se alinhe corretamente. Eu também vou fazer o mesmo para seus deveres. Então 123, assim. Vamos ver. Então vamos ver para o tipo, vamos mudá-lo na verdade e qualidade apenas tipo assim. E então nós vamos realmente usar duas linhas de grade apenas para que tenhamos um pouco mais de espaço para a pesquisa. E vamos ajustá-lo. Então nós vamos ter que ser aderir e também mover o divisor ao mesmo tempo até aqui. Ajuste a máscara e um pouco até aqui. E talvez possamos ajustar e o quântico abaixo. Então eu posso usar minha divisória e me mover. As linhas estão bem aqui, eu acho, e vai ficar tudo bem. Mas você pode ver que aqui temos viagem individual que vai bem aqui. Então eu vou remover isso. Vou remover isto. Então é individual. Talvez eu possa até remover este cruzeiro para usar o tipo. Podemos removê-los para todos eles assim. E o que eu vou fazer é simplesmente usar cópia para todos eles. Então vamos ver. Eu vou realmente apenas usar cópia para este e ajustá-los mais tarde em nosso estado clicado. Então eu vou abri-lo com base nos EUA. Mova-o aqui para baixo. Então vamos ver aqui. Se eu puder, ele deixou isso lá. Então, vamos deletar. Vai clicar aqui e ver que ainda é macarrão até o topo? Não sei por que continua fazendo isso. Então vamos, na verdade, porque você tem que tê-los no mesmo lugar para que esta animação realmente funcione. Vamos trabalhar rapidamente nisso e eu vou te mostrar uma maneira de dar a volta. Então digite como sujeira, eu vou usar meu divisor BG, movê-los para aqui. Vou usar a minha máscara, movê-la para aqui mesmo. E eu vou copiar isso. Vá para o estado padrão, abra-o e pressione Colar. Então agora está exatamente no mesmo lugar que no segundo estado. Então, agora que eu ligo para eles e quando um hit para a minha pré-visualização, você vai ver como isso funciona. Então digite, você pode clicar e você pode ver que ele permanece exatamente no mesmo lugar. Agora, porque temos esse espaço, o que podemos realmente fazer é talvez empurrar todo o nosso conteúdo aqui, se você quiser. Isso vai nos dar muito mais espaço aqui, porque com essas atividades, vamos ter basicamente a mesma coisa. Então, cabe a você se quiser preenchê-los, mas vou deixá-los como estão aqui. Acho que vai funcionar muito bem. Então, para as atividades, eu vou movê-lo aqui. Bem ali. E vamos ver para as atividades, nós também podemos ter. Vamos ver. Bg e nosso divisor podem ir para aqui, por exemplo, eu acho que vai funcionar bem, e isso vai acontecer aqui. Então vamos ver, eu não acho que nós precisamos fazer muitas mudanças aqui. Acho que não podemos fazer qualquer mudança aqui, acho que está tudo bem. E finalmente, para a busca, vamos trabalhar nisso. Então o que vou fazer é alinhar a minha caixa aqui. E então eu vou trazer o meu estado padrão. Vou trazer isto para cá. E eu vou simplesmente usar a Pesquisa porque eu não preciso usar arejamento. Vou trazer isso de volta para 100. Posicione bem aqui. Certifique-se de que são 20, assim, reduza para 0. Então eu vou para o estado clicado. E vamos ver dentro do estado clicado, eu posso trazê-lo aqui. Então CBG fechar ícone, eu posso simplesmente mover dois deles aqui, e eu posso simplesmente digitar. Ou melhor ainda, podemos usar a pesquisa de viagens aqui e, em seguida, pesquisar no estado padrão. Vamos ver se funcionam. Acho que isto deve funcionar. Algo não está certo aqui. Não sei por que está fazendo isso. Como você pode ver, ele continua movendo isso. Então vamos ver no estado padrão eu vou movê-lo aqui. E eu vou ajustar manualmente meu BGP para aqui. Ok? E agora vamos para o estado clicado. E eu vou ajustar isso, posicioná-lo assim. E então use apenas minha pesquisa BGN, meu ícone de roupas, e mova-os aqui. Então, agora vamos ver se funciona. Ele faz. Então você não pode simplesmente mover o campo. Você tem que ajustar manualmente os elementos dentro. Então, o XD realmente conhece as distâncias entre todos os seus itens dentro. Então, agora, quando eu clicar aqui, você pode ver que diz procurar viagens. Enquanto aqui diz que a pesquisa se aplica ainda funciona. E se clicarmos nas atividades, elas ficam bem. O tipo parece bem. Mais uma vez, se você quiser, você pode simplesmente estender isso até aqui. Se você quiser. Destinos, eles funcionaram bem. Então, tudo depende de você. Agora vamos em frente e passar para a próxima seção. E vou mostrar-vos o que vamos fazer aqui mesmo. Primeiro de tudo, é simplesmente alinhá-lo à nossa grade. Certifique-se de que está alinhado. O que eu vou fazer aqui é, em primeiro lugar, alinhar nosso texto ao centro assim. Basicamente, vou criar dois estados diferentes para estes cartões. Então, neste, vamos usar basicamente abas. Então, a primeira guia vai ser ofertas de primeiro minuto e a segunda guia vai ser ofertas de última hora. Então o que eu vou fazer com este aqui é ter certeza de que tem seis colunas de largura. Então 1, 2, 3, 4, 5, 6. Então, vai ser bem aqui. E então eu vou deixá-lo porque vai ser o primeiro estado. Vou clicar e usar o cinza claro para indicar que este está selecionado. Então, como este vídeo é executado um pouco mais, agora, é quase meia hora de duração. Vamos parar com isso aqui. E então, na próxima, eu vou voltar e explicar a vocês como você pode criar basicamente duas guias para essas seções. Assim, os usuários podem alternar entre overs de primeiro e último minuto e, em seguida, você pode economizar algum espaço neles. 42. Criação de design responsivo 6: Vamos agora ir em frente e fazer isso. E para fazer isso, o que eu vou fazer é realmente desagrupá-los. Então eu vou desagrupar este primeiro minuto. Vou desagrupar este último minuto. E eu vou usar as ofertas de última hora em ofertas primeiro minuto e um grupo deles como este. Vou chamá-los de abas, por exemplo, porque é isso que eles são. E então essas cartas, vamos ajustar um por um. Então, primeiro de tudo, vamos lidar com esses aqui. Então vamos primeiro alinhá-los aqui à esquerda, para que eles não estejam distraindo. Assim como. E finalmente, para os botões, o que vamos fazer é lidar com isso primeiro. Então vamos ver dois, podemos usar quatro colunas. Então eles são os mesmos que todos esses outros botões assim. E vamos usar para neste também. Então vamos ver 2, 4 bem aqui. Como isso. E o que vou fazer é alinhar os dois botões aqui. Então, quando as ofertas de primeiro minuto são mostradas, este botão vai mostrar a minha. Mas quando os últimos minutos são clicados, isso vai aparecer, então basicamente dois botões exatamente no mesmo local. Então vamos ver, vou alinhá-los assim. E vamos chamá-los de botões assim. E vamos ver. Vou simplesmente esconder estes três por agora porque não precisamos deles por enquanto. Primeiro, vamos trabalhar em nossa música de fundo, vamos abrir todas elas e vamos trazê-la aqui. E então eu vou trazer este aqui mesmo. E também vou usar este último e trazê-lo aqui. Então o que vou fazer é aumentar o tamanho da nossa imagem. E talvez eu possa usar cinco colunas para a largura da imagem. E vamos mover todo esse conteúdo aqui, por exemplo. Então vamos ver 1, 2, 3, 4, 5. Isso é bom. E eu acho que a posição da imagem é muito boa como é aqui. Então, agora vamos trazer o conteúdo de volta. Vou movê-lo para cá. Primeiro, vamos lidar com isso. Então eu vou usar esta pilha. E vamos ver Aiken aumentar o espaçamento para, sei lá, algo muito grande. Vamos ver Na verdade, podemos aumentá-lo manualmente e depois ver onde ele se encaixa. Por exemplo, vamos posicionar este ícone de barramento para atingir esta linha de grade. Então, algo assim. Acho que funciona bem. Então vamos para nossos analistas divisórias expandidos para esta linha de grade assim, e usar o outro também. Mas traga de volta para que seja 20, assim. E então eu vou selecionar esses dois posicionados bem aqui. E então eu vou usar Shift e seta inferior. Então, 1, 2. E eu vou trazer isso. Para ouvir. Então eles alinham o turno 12 para que eu possa trazê-los de volta. E então eu posso trazer minha imagem para a borda inferior do nosso cartão, que está bem aqui e ali nós temos. Agora temos opção completamente diferente, design completamente diferente para o mesmo cartão. Então o que eu vou fazer é exatamente o mesmo. Então eu vou selecionar todos eles, apertar Controle C, ir para o estado de horror, controle QED V, e então saltar para dentro e matar todos eles assim. Então o que vou fazer é clicar duas vezes na minha imagem, aumentar a minha imagem. Vou abrir minha máscara assim. E eu vou clicar no meu plano de fundo. Clique aqui, clique no oito, assim. E rebanho leiteiro. Agora, basicamente, o mesmo processo começa. Você tem que copiar e colar todos esses elementos. Mas antes de o fazermos, vamos ver, temos 40 entre estes dois. Então vamos trazê-los aqui. E primeiro, vamos ajustar a altura para que a altura seja 387. Então, para isso, eu vou clicar dentro. Altura vai ser três, 87 por cento são. E eu vou pular bem aqui. A altura vai recuar 8, 7, assim. E então basta ajustar minha imagem para a nova altura. 87. Vou fazer o mesmo aqui. Então 387, certo, isso, e lá temos. Então agora eu vou pausar o vídeo aqui mais uma vez e trabalhar nisso. Então, como eu disse que em incomodá-lo muito com todos esses detalhes e vocês não se cansam de me ver ajustando todos eles assim. E eu vou voltar assim que eu terminar DC-3 e também esses três aqui que eu escondi. E então eu vou mostrar como podemos criar animação entre todos eles. E agora que os completei, deixe-me mostrar-lhe como criá-los. Mas antes disso, deixe-me mostrar-lhe rapidamente. Então, aqui temos o hover padrão. E quando eu esconder estes três, você pode ver que nós temos Paris. Então aqui padrão e pairar, e nós temos esses botões ea distância é 80, enquanto entre todos esses carros a distância é 40. Então deixe-me trazer estes 3 primeiro, e então eu vou selecionar estes três inferiores que estão atrás destes três, aperte 0 no meu teclado para duas vezes para que ele possa baixar para baixo, você é basicamente 0. Além disso, eu posso ir para meus botões e para as ofertas de última hora, que está por trás deste primeiro minuto ofertas, eu vou diminuir a opacidade para 0 também. Vou manter isto cinzento, manter isto azul. E o que vou fazer é qualidade, por exemplo, ofertas especiais. E vamos ver ofertas especiais. Vamos ver dispositivos grandes pressionando Control K para criar um componente desta seção inteira. Mas é um pouco antes de nós. Vamos ver gada e voltar para o estado padrão. Então é isso que nosso estado padrão é para todo este componente. Então eu vou criar um novo estado e chamar a morte de novo estado. Uma oferta de última hora. Isso e, em seguida, para as ofertas de última hora, obviamente, vamos criar as coisas diferentes. Então este vai ser este cinza claro. Este vai ser um azul principal. Vamos esconder estes três primeiros. Então clique duas vezes são 0, Qi. E também vamos esconder este botão, mostrar esses botões ou para o último minuto. E vamos mostrar a estes três. Mais uma vez. Finalmente, vamos para o estado padrão, usar nosso recurso de prototipagem. Clique em nossas ofertas de última hora. Clique nele. Toque em auto, animar, fácil agora 0.6, por exemplo. E podemos ir ao estado de ofertas de última hora. Em seguida, podemos mudar os Estados aqui, clicar duas vezes aqui, escolher as ofertas de primeiro minuto, clicar sobre ele e ir para o estado padrão 0.6, fácil e sair e auto animar. Vamos para o estado padrão e pressione a visualização, apenas para que possamos ver como ele se parece. Então deixe-me voltar para aqui. Assim, você pode ver que esses recursos ainda funcionam e ampliando ainda funcionam. Isso ainda funciona muito bem. Então, quando eu clico em Nossas ofertas de última hora, você pode ver que leva para ouvir o primeiro minuto ou dois aqui. Mais uma vez, todos os primeiros minutos. Clique aqui e todas as ofertas de última hora. Então, lá temos. Essa é a seção n. Agora vamos passar para esta seção de vídeo. Porque ainda estamos em uma pilha para todo esse conteúdo. Você pode ver quando uma alta taxas 150, 150. Para o vídeo em si, posso baixá-lo até aqui. E o que eu também posso fazer é trazer meu vídeo porque eu não preciso que ele seja tão grande neste tamanho pequeno. Então, por exemplo, algo assim. Mas como você vê, Stack é essa inteligência para manter o espaçamento entre eles. Primeiro de tudo, deixe-me alinhar esta seção inteira para aqui assim. E eu vou fazer é trazer o meu botão para aqui e ter certeza que tem quatro colunas de largura, pairar bem ali. E quando eu era um vento para fazer é clicar em minhas flechas e trazê-los direto para a borda, bem ali. Depois vou usar as minhas cidades e alinhá-las à grelha assim. E é só trazer isso para fora. Então, Cities, eu vou alinhá-los à linha da grade assim. E então eu posso trazer isso e fechá-lo aqui mesmo. E também neste lado direito, vou fazer o mesmo por aqui. Então, basicamente, o que podemos fazer aqui é exatamente a mesma coisa. Só vamos ajustar estas cartas. E vamos ver, temos seis deles, o que é bom. E vamos fazer a mesma coisa. Então eu vou usar esses três, trazê-los todos aqui, e então escondê-los para que eles possam trabalhar nesses três e então simplesmente fazer os mesmos ajustes nesses. Então o que vamos fazer aqui é basicamente bastante simples. O que temos são estes e temos que ajustá-los individualmente como fizemos para todos eles por causa desses divisores. Agora o que eu posso fazer por isso é que eu posso me livrar desses divisores e então o conteúdo vai aumentar muito mais. Itália. Então deixe-me mostrar-lhe essa opção. Então, agora, quando eu clico em My Paris, você pode ver que o conteúdo está dimensionando muito melhor. Mas ainda temos esse problema que podemos corrigir simplesmente alinhando isso e clicando aqui e, em seguida, diminuindo nossa distância entre eles, se quisermos. Então vamos ver como podemos fazer isso? O que eu vou fazer aqui mesmo é, vamos voltar ao layout anterior com nossos divisórias. O que eu vou fazer aqui na verdade é me livrar dessa matando seu ícone, o que vai nos dar muito mais espaço. E isso vai nos permitir muito livre, mais livre ou layout para nossas seções. Então vamos trazer a seta e cartão de destino e imagem 24 colunas. Mais uma vez assim. Então eu vou saltar para dentro do meu meio e, em seguida, simplesmente trazer este conteúdo para algum lugar por aqui. Finalmente, vou usar uma das minhas divisórias e segurar a tecla Shift até sair daqui. E 262 é o tamanho. Então 262, às vezes vai funcionar, às vezes não é defesa ou tem um monte desses problemas que eles normalmente não têm. Eu realmente não sabia o que aconteceu. Será que eles lançaram alguma atualização que não vai funcionar ou Zinedine que eu não conheço. Mas isso não importa para isso. O que você pode fazer é abaixá-lo como explicado em um dos vídeos anteriores. Então você pode colocar tudo isso em uma pilha mais uma vez. Então, aperte o Control G e coloque-o em uma pilha. Em seguida, clique aqui e simplesmente ajuste a imagem para que você possa trazer este caminho quântico para cima se você quiser. Você pode fazer isso se quiser. Mas eu não sei. Vamos ver algo assim. Então a altura pode estar em algum lugar em torno de 200 matéria nem talvez seja boa. Sim, vamos fazer isso. Então deixe a altura b para um 100, e vamos colocar tudo isso em uma pilha. Então o que eu vou fazer é realmente salvar aqui e depois voltar quando eu terminar todos eles. Mas, na verdade, antes de o fazer, deixa-me saltar para dentro do meu horror e mostrar-te como isso pode parecer. Então, basicamente, com o pairar, tudo o que fizemos até agora será exatamente o mesmo, mas com o pairar, essa imagem também vai flutuar, também vai ampliar um pouco. Então você tem que ajustá-lo como anteriormente para o estado padrão e morte data hover. Então é isso que vamos fazer agora. Então vamos rápido. Em nosso estado padrão, poderia critérios de controle C, ir para o nosso estado de horror, clique aqui, e, em seguida, Controle V. Selecione todo o nosso outro conteúdo, e, em seguida, apenas deixe-me verificar aqui. Então eu acho, sim, são oito. Então vendo como todos esses outros aqui para excluir nele, e eu vou ter certeza de que eu clique duas vezes, zoom aqui realmente rapidamente. Então abra, minha máscara, expandida até aqui. Clique aqui. Traga isso para oito mais uma vez e rebanho de laticínios. Então, agora, se eu mudar entre nossas cidades, você pode ver como isso se parece. Agora, obviamente todo esse processo é incrivelmente tedioso, como você provavelmente pode dizer. Mas quanto mais dessas animações você colocar, obviamente, quanto mais complicado vai ser, mais entediante vai ser. Então, basta manter todas essas coisas em mente quando você está projetando desde o início. Porque quando você chegar a este ponto e quando você começar a aumentar e aumentar todas essas coisas vai ser obviamente muito mais complicado para gerenciar todas essas coisas. Primeiro, vamos reduzir isto para 200. Desculpe, eu não incluí a pilha, então primeiro de tudo, inclua a pilha e, em seguida, traga isso para 200, assim, e pule para dentro daqui. Eles removeram o ícone do calendário. Traga esses dois aqui. E então vamos ver, podemos mover este c Londres e cartão de destino. Posso fazer quatro colunas de largura. Também posso saltar para aqui e mudar isto para aqui. Assim como. E então vamos ver por isso, ou eu realmente odeio esses divisórias, mas o que você pode fazer? Então, para o meio, eu posso clicar duas vezes dentro e posicionado ou aqui. Vamos ver o que tínhamos aqui. Então temos 33 um dia, para que possamos ter as mesmas configurações aqui. Eu posso saltar 33, pressionar Enter, e então usar este divisor, trazê-lo todo o caminho para aqui. Então, como eu disse, realmente depende do seu layout, o que você está fazendo com ele, como você está ajustando. Mas basicamente, é assim que parece bem aqui. Controle C no nosso estado de Londres Horace, controle V. Vamos terminar esses três e então eu vou voltar e mostrar como eles se parecem. E eu também vou mostrar a vocês como a animação em si se parece uma vez feita. Então, Arrow, vou expandi-lo até aqui e reduzir isto para oito. Agora vamos verificar rapidamente entre o estado padrão e o estado Horace e Paris. Passe o mouse padrão, parece bem. Então agora vamos trabalhar em nossa Roma. Mais uma vez agrupe todos eles, certifique-se de que eles estão em uma pilha como essa. Clique duas vezes aqui e certifique-se de que você está em 200, assim. E então eles vão clicar bem aqui. Vou me livrar de dias como esse. Vou dizer que são 33, assim. Vou alinhá-lo à esquerda. Use a divisória. E definitivamente, eu acho que as camadas de forma são muito melhor opção em vez dessas linhas para divisores. Porque terroristas moldados estão sempre indo para seguir o que você está fazendo e você sempre pode ajustá-los, sofrer. Então não há necessidade para este Pfaff em torno de seus divisórias. Então eu realmente não gosto desses aligns n no futuro ou definitivamente usar camadas de forma. Porque como eu disse, camadas de forma, como você pode ver a propósito, com isso, com esta imagem, ele apenas se move lindamente. É apenas funciona como funciona como deveria. Então eu realmente acho que as camadas de forma são muito melhor opção no futuro para todos esses divisores e linhas. Controle C, U e descontentamento e, em seguida, Controle V, saltar para dentro daqui, remover tudo e, em seguida, trazer isso de volta para oito. Então, e vamos incluir nossa flecha de volta para aqui. E, finalmente, vamos clicar duas vezes para ampliar esta imagem. E lá temos. Então estado padrão, estado de horror. Então, finalmente, o que eu quero fazer com isso é obviamente trazê-los de volta. Então eu vou posicioná-los para 80, como se tivéssemos um entre o texto e ele. E finalmente, para o texto em si, vamos movê-lo para o centro bem aqui. Vamos ver essas cidades onde estão fechadas. Eu gosto disso. E é basicamente isso. Vou trabalhar nestes três surpreendidos Amsterdã, Veneza. E eu também vou trabalhar em todos esses outros. Por isso, permitam-me que os alinhe em primeiro lugar. Então vamos trazê-los para a nossa luz de grade lá. Este. Traga nossos principais destinos, leve isso ao centro mais uma vez, ou até mesmo para ouvir tão bem ajustado mais tarde. Traga esses dois aqui, nossos parceiros. Então, mais uma vez, obviamente com estes seus itens, é muito mais simples de fazer. Então, ele pode simplesmente ajustado para aqui. E você pode ajustar o pergaminho. E o grupo 2 aqui, certifique-se de que o texto está centralizado. E a mesma coisa para estes aqui. Então se atreva e coloque isso aqui. E isso deve simplesmente ir direto para aqui, por exemplo. Assim, os usuários podem facilmente rolar e mortes. Eu não acho que nós vamos trabalhar muito com ele. Basta ajustar este texto para aqui. E vamos ver, você encoraja a ser, basta mover esta última linha para aqui. Hamlet vê, este botão pode estar no centro. Então, vamos simplesmente selecionar tudo. Certifique-se de que estamos em um centro. Nós somos. Vamos ver, a distância é 40, então isso vai ser 40 bem e apenas certifique-se de usar quatro colunas ou aquele botão. Então você pode ver claramente a estrutura. Tudo vai estar no centro e isso vai ser no centro. Então eu posso realmente selecionar esses dois e clicar aqui e ter certeza que eles estão em uma linha central que. E, finalmente, clique nisso, certifique-se de que ele está alinhado a aqui e clique aqui. O próximo é no centro. E então, mais uma vez, mesma coisa com isso simplesmente ajustado para aqui. E eu vou ter certeza que se eu colocá-lo bem aqui, vamos ver, porque como você se lembra, você tem que fazer para baixo da esquerda para a direita. Então 1234, e no estado Horace, 1234, assim. E então simplesmente volte e expanda isso até que o botão atinja a borda bem ali e lá nós o temos. A seção da dívida está concluída. Então vamos chamá-lo, vamos chamá-lo de um dia para este vídeo porque eu queria mostrar, você sabe, eu realmente quero mostrar-lhe isso e então eu vou chamá-lo um dia. Então, primeiro de tudo, esta seção, eu vou movê-la para cá e eu vou fazer. Então reserve a viagem dos seus sonhos. Estamos no conteúdo, que está em uma pilha. Então, o que podemos realmente fazer com ele? Posso, por exemplo, posicioná-lo para estar no topo. Então vamos dizer que eu quero colocar essa imagem no topo. Como posso fazer isso? Primeiro de tudo, mude-o para esta pilha vertical, em seguida, salte para dentro do conteúdo e simplesmente mova seu quantum assim. Ele vai manter a mesma consistência vai manter o mesmo efeito, a mesma coisa basicamente. Expanda a tua imagem assim. Certifique-se de colocar sua máscara de volta em seu lugar. E então para esta viagem de sonho, o que podemos fazer é basicamente alinhá-la à esquerda, assim, por exemplo. E certifique-se de fazer o mesmo por aqui, mas alinhe-o a esta linha de grade. Agora, para o texto, vamos entrar e torná-lo no centro alinhado. Já que alinhamos isto aqui, posso simplesmente passar para o pairar aqui. Então, aí está. E então eu posso simplesmente usar meu conteúdo e ter certeza de que ele está centrado. E então eu posso simplesmente selecionar estes para ter certeza que eles estão centrados assim. Agora, temos todo esse espaço vazio no meio da seção. Então eu vou realmente trazê-lo para baixo para 100, por exemplo, simplesmente pairando esta seção e então você pode ajustá-lo. E agora entre estes dois, 150, o que é bom. Antes de te deixar, vou fazer o mesmo por esta secção. Então simplesmente pule dentro do conteúdo. Certifique-se de usar este preenchimento vertical. Vou entrar e expandir a minha imagem até aqui. E depois todo o caminho até aqui. Certifique-se de que isto vai para a esquerda. Certifica-te de que isto vai para este aumento. Finalmente, certifique-se de que o texto está alinhado ao centro assim. E certifique-se de, em primeiro lugar, alinhá-lo à esquerda e linha de grade como esta para que possamos ajustar nosso botão, torná-lo quatro colunas de largura. Então, é a mesma coisa que fizemos anteriormente. E, finalmente, selecione-o, certifique-se de que tudo está no centro mais tarde para selecionar ambos para eles. Certifique-se de que eles estão em um clique central aqui e, em seguida, ajuste isso para 100, assim. Mas você também pode fazer é obviamente clique aqui e, em seguida, usar 100, pressione Enter, e lá nós temos isso. Obviamente, isso permanece como 150. Então, não importa quantas dessas pilhas você tem, elas simplesmente vão se ajustar lindamente para baixo. E agora, porque temos nosso conteúdo assim, temos que obviamente expandir nosso aeroporto todo o caminho para que ele possa acomodar nosso rodapé. Então, como eu disse, eu vou embora agora e trabalhar nesses três e, em seguida, terminar em seções usando exatamente as mesmas configurações para todos eles abaixo. Então Europa, Ásia, Américas, e o que quero dizer, África. E então volte no próximo vídeo e explique para você como podemos arredondar tudo isso? Vamos trabalhar nesses primeiro, esses depoimentos, depois esses três cartões, que serão bem simples. Finalmente, vamos refazer o rodapé e, em seguida, terminar este tamanho. Mais uma coisa para os nossos principais destinos. Deixa-me mostrar-te como podemos trabalhar nisso. Então, primeiro, para este primeiro estado, vou simplesmente mover os principais destinos e depois trazer minhas flechas de volta assim. Porque este deve ser bem simples porque, como você se lembra, nós não fizemos muito com eles. Então deixe-me fechar estes dois aqui. Então o que vou fazer é fazer a mesma coisa por todos eles. Então vamos ver, vamos estar em quatro colunas como essa. Por alguma razão. Vamos ver. mesma coisa com o conteúdo não está certo aqui enquanto o texto não está certo. Então, vamos clicar nele e ver a altura automática. Maldivas. Não sei por que não estão no centro. Deveria ser assim, mas meio que quebra o não sei o que aconteceu. Os sólidos os trocaram assim. Então, quatro colunas de largura. E então quando pular aqui e simplesmente estender minha imagem até aqui. E isto deve estar no centro assim. Então eu não sei por que isso aconteceu, mas como você pode ver, você pode facilmente ajustar. O que podemos fazer aqui é também ajustar a altura da nossa imagem, se quisermos. Mas não vou me incomodar com muita coisa. O que eu vou fazer por último é selecionar nosso conteúdo assim. Vá para o nosso encontro com o Horace, bem ali. Saltou decidir acertar o Controle V. Eu vou removê-lo daqui. E o que eu vou fazer é ampliar um pouco e, em seguida, levar isso para oito. Como isso. Volte para o estado padrão. E eu não sei por que você viu que eu estou copiando o conteúdo aqui. Então eu vou pairar. E agora ele enfrenta o conteúdo. Então eu realmente não sei às vezes este XD com todos esses problemas. Mas, em geral, é só porque estou usando todos esses outros softwares porque eu tenho que gravar meus Y, eu tenho que gravar este vídeo. Eu tenho que executar algum tipo de eu não sei, todas essas ferramentas diferentes em segundo plano, então provavelmente é tudo até isso. Então eu quero mostrar rapidamente porque você pode ver que este texto está correndo muito selvagem. Então vamos primeiro corrigi-lo, trazê-lo aqui, por exemplo, porque nós vamos estar dentro dessas quatro colunas que devemos, isso está no centro. Então eu vou levar isso e isso para o centro. Então eu vou realmente remover meu texto. Vamos ver dois aqui, então e certifique-se de que isso está no centro. O que importa mesmo? Você pode simplesmente selecionar todos eles e clicar aqui e certificar-se de que eles estão em um centro como esse. Finalmente, clique no conteúdo. Saltar dentro de um estado de horror baseado. Apague o antigo. Quais são os novos? Clique duas vezes, amplie a máscara e, finalmente, clique aqui e, em seguida, leve-a para oito. E o rebanho leiteiro vai para o estado padrão e nós vamos com este. Vamos primeiro lidar com esses tubos. Então, eu vou ter certeza de que isso está no centro de uma sujeira. Eu não sei porquê. Algo realmente estranho está acontecendo com o Adobe XD hoje. Não sei por que, mas está simplesmente se recusando a desistir. Então vamos alinhar nosso texto assim e vamos fazê-lo com o preço também, ver se ele faz, ele faz, o que é ótimo. Finalmente, experimente assim. Algo muito estranho está acontecendo. Então mostra que meu BG atual é dois aqui. Por alguma razão. Enquanto eu expandi e confira isso, quando eu clicar e selecionar todos os meus elementos, clique aqui. Reduz o tamanho. Então eu realmente não tenho idéia por que ele faz isso. Mas isso não importa. Vamos ligar através dele. Então eu vou alinhá-lo aqui. E vamos ver, todos eles são do mesmo tamanho, o que é ótimo. E o que eu vou fazer é pausar o vídeo aqui. Então eu não te aborreço com todos esses detalhes porque eu estou me entediando com o feriado neste acoplamento, porque eu estou fazendo tudo o mesmo uma e outra vez. Então eu vou, como eu disse, pausar o vídeo aqui para que eu possa terminar esta seção e depois voltar para mostrar a vocês a animação e tudo mais. E depois vou pausar o vídeo. E o vídeo, desculpe, para que eu possa consertar todas essas outras áreas e então podemos voltar. Então, como eu disse, vou pausar o vídeo para que eu possa consertar esses três e depois voltar para você. E agora que eu fiz isso, deixe-me trazê-lo de volta à velocidade. Então eu vou selecionar esses três. Os turnos de espera são os mesmos que antes. Vou tirá-los do caminho. Certifica-te de que têm 30 anos. Em seguida, clique aqui e certifique-se de que isso está cortado na borda. Certifica-se de que está cortado aqui. É, o que é ótimo. E finalmente, o que eu vou fazer é obviamente usar todos os meus destinos. Então eu vou clicar em controle C, em seguida, ir para o meu estado clicado. E o que eu vou fazer aqui é apertar o Controle V, para que eu possa colá-los bem aqui. Você apaga, e então eu vou movê-los de volta para aqui. Eu também vou fazer a mudança para o texto que eu fiz anteriormente. Então, nossos principais destinos, e eu também vou mover minhas flechas direto para o lugar, acabei de ver. Posso tentar manter minha animação para não ter que refazê-la mais uma vez. Eu acho que isso é bom. E vamos para o estado padrão e ver se a animação funciona corretamente. Eu realmente espero que sim. Então, como você pode ver, nós realmente fizemos muito neste vídeo. E eu gosto de como essas imagens funcionam com essas imagens menores porque agora o conteúdo pode caber muito melhor aqui. Mas eu tenho que mudar isso para o botão padrão. Vamos lidar com isso mais tarde. Esta seção é, você pode ver que é realmente fácil de ler agora. E aqui estamos nós. Então, finalmente, vamos verificar rapidamente. Funciona. Tudo funciona e podemos clicar ali. E a única coisa que fiz aqui foi pelo Monson Michelle, eu mudei o texto, mas ainda não está centrado. Então vamos ter que consertar isso. Mas vamos verificar a animação, ver se funciona. Faz, o que é ótimo. Então vou mudar o Monson Michelle. Ótimo aqui e destinos. Vamos ver. Posso movê-lo aqui. Algo não está certo com este texto. Como pode ver, esta é a minha vantagem. Então é realmente o fundo, mais uma vez, pregando peças. Por alguma razão, como você pode ver, eu não posso alinhá-lo com isso aqui. Então esses são todos os bugs do Adobe XD e essas técnicas realmente mais avançadas, como você pode ver, é um fugitivo aqui, realmente muito. Então vamos tentar fazer isso assim. Então a largura é 290 e aqui é 290 um. Então vamos com 90 IDAT, e agora o texto parece como deveria. Então o que eu vou fazer é trazer tudo isso de volta assim, e então fazer a cópia e colar mais uma vez. Então, do padrão para o clicado, remova esses e traga esses de volta. Posicione-os bem na parte inferior para que pareçam exatamente o mesmo. E, finalmente, mude esses destinos para aqui. Hábitos de laticínios, mortes. Esse é o nosso design por enquanto, é isso para este vídeo. Mais uma vez, estamos demorando mais de meia hora, mas como podem ver, há muito conteúdo a ser mostrado. E também uma última coisa que eu quero compartilhar com vocês para este vídeo são essas imagens. Se você acha que eles são muito grandes, você pode simplesmente saltar aqui e ajustar a altura de suas imagens. Então estamos a uma altura de cinco, vamos ver 520. Então podemos arredondar as coisas, clicar duas vezes aqui, reposicioná-lo, e então fazer a mesma coisa para a parte inferior. Então vamos posicioná-lo para ser em 520, assim. E porque estamos em uma pilha, como você pode ver, o conteúdo está seguindo lindamente. Então é isso para este vídeo. Eu vou em frente agora e mudar tudo isso e voltar no próximo vídeo que possamos terminar esta página e, em seguida, passar para essas outras páginas. 43. Criação de design responsivo 7: Vamos agora continuar e terminar esta página. E antes de o fazermos, só quero partilhar o nosso detalhe com vocês. Então vamos dizer que eu fui em frente e terminei tudo isso, então eu vou apenas ir em frente e copiar este. E eu só queria mostrar a vocês o que funciona melhor para essas linhas e esses guias. Então, digamos que queremos reduzir seu tamanho ainda mais para três colunas, por exemplo. Então, sobre esses divisores, como ele disse no vídeo anterior, eu acho que é melhor se você usá-los. Então, basta usar o retângulo. E então uma vez que você começar a reduzir o tamanho do retângulo como este, vai simplesmente seguir o layout. Então você pode imaginar que vamos criá-lo de qualquer maneira. Então eu vou usar a cor para o preenchimento assim. Vou remover a fronteira. Vou reduzir a altura para dois, por exemplo. E você pode imaginar, e podemos até chamar isso de mais amplo assim. E digamos que queríamos ajustar nosso layout para ter três colunas de largura. Então eu posso simplesmente selecionar meu divisor. Eu posso selecionar minha imagem, e eu posso selecionar meu preço aqui mesmo. Então minha seta e meu cartão BG, quando eu reduzir o tamanho, você pode ver que tudo segue. Mas temos um problema aqui abaixo com esses divisores porque eles são elides, a melhor coisa a fazer é ajustar a largura deles primeiro. Então o que quero dizer com isso é olhar, livre-se deste só para mostrar o que quero dizer, um pouco melhor. Digamos que você queira reduzi-los. E vamos dizer que queremos que eles toquem linha discordada aqui apenas como um exemplo. Então você pode clicar nele, segurar seu turno e dizer que são dois a sete. Então eu vou ajustar este um para dois para sete, por exemplo. E então vamos dizer que eu quero reduzir isso ainda mais para algo como Vamos dizer que nós só queremos digitar em 3D. Então, três dias. E agora queremos expandir isso até aqui. Então esta é a melhor maneira, porque esses divisores são linhas e eles são realmente difíceis gerenciar basicamente como uma opção responsiva de redimensionamento. Então é por isso que eu estou dizendo para se certificar de lidar com eles primeiro antes de passar para todo esse outro conteúdo. Porque agora, quando escalamos, quando eu selecionar minha imagem, quando eu selecionar meu ícone aqui para o efeito de pairar e gerenciar selecionar meu BG, por exemplo. Eu posso movê-los e você pode ver que o conteúdo está escalando lindamente enquanto tudo isso permanece colocado. Então é por isso que eu estou dizendo simplesmente garante que você faça a mudança para este divisor antes de aplicar todas essas outras mudanças n mais uma vez, é a minha dica superior. Não use essas linhas como divisórias. Certifique-se de usar sempre a ferramenta de retângulo porque ela vai seguir muito melhor quando você estiver trabalhando com esse redimensionamento responsivo. E mais uma coisa a observar nesta visão de classe de trabalhar com essas pilhas e com esses grupos. Todas essas são opções avançadas que foram introduzidas ao Adobe XD relativamente recentemente. Portanto, todos nós estamos aprendendo como esta ferramenta está crescendo, como esta ferramenta está atualizando, porque esta é uma nova função introduzida apenas alguns meses atrás. E alguns desses recursos nem se destinam a esse redimensionamento responsivo. Há simplesmente para projetar, mas todos nós, como designers, estamos explorando todas essas opções o tempo todo. Portanto, se você ficar preso, se você tentar fazer algo que não funciona, tente o contrário. Tente algo diferente, tentou adaptá-lo ao seu fluxo de trabalho e, portanto, você terá opções muito melhores. Então, como eu disse, eu fiz todos eles. E, e deixe-me mostrar rapidamente, por exemplo, neste cartão, o que eu fiz é obviamente incluído tudo dentro do cartão de conteúdo. Eu entrei e reduzi a altura desta imagem para 200. Então entrei na minha pasta do meio. Reduzi o divisor para 66. Fiz isso por todos eles. E então eu reduzo o destino entre esses dois, 230, então entre os dias e os ícones. E como eu disse, se você quiser ir ainda mais longe, você pode fazer o que eu fiz agora. Então, por exemplo, em vez de 12 dias, você pode simplesmente escrever 12 d. E as pessoas vão entender, porque isso é basicamente abreviatura óbvia do pai e a maioria das pessoas está usando isso, especialmente no celular aplicativos. E, claro, no estado de horror, o que eu fiz foi simplesmente incluir a sombra de fundo 8. Então eu entrei no destino BG, cliquei bem aqui 8%, então simplesmente estendi isso para AD2, então 82 de largura para que você possa ver esta seta um pouco mais claramente. E, finalmente, clique duas vezes aqui e simplesmente estendeu essas imagens e é basicamente isso. Simplesmente alinhei todos eles. 30 é o destino entre cada dos cartões e um simplesmente copiado e colado estes efeitos. E basicamente para a segunda animação aqui, tudo o que eu fiz foi simplesmente usar este para o ponto de tabulação esquerdo, toque auto animate, estado padrão. Então isso remonta e simplesmente moveu todas as minhas cidades e moveu todos os meus cartões. Então você pode ver que a última aqui é Carta Hannah. Mas quando eu cliquei aqui, é Miami. Então eu simplesmente os movia para a esquerda e para a direita, basicamente, exatamente o mesmo que eu fazia antes. Então é por isso que eu disse que não queria desperdiçar muito do seu tempo. Quero avançar com esta classe o mais rápido possível sem perder qualquer ritmo com ela. Então, o que vamos fazer com os depoimentos, primeiro lugar, alinhou o texto aqui. E eu também vou alinhar isso, que é o grupo de rolagem. Eu quase esqueci o nome, então eu vou simplesmente alinhá-lo com as linhas da grade. Vamos ver se isso está correto. Eu acho que é. - Sim. Então, como eu disse, alinhe com nossas linhas de grade. E, portanto, a única coisa que resta é mover esses depoimentos para dentro. Vou selecionar o meu testemunho e trazê-lo até aqui, para o limite. E aqui o que vou fazer é simplesmente mudar o tamanho. Mas antes que eu faça isso, vamos lidar rapidamente com as flechas. Então eu vou simplesmente mover as flechas assim. E posso fazer isso por todos eles antes mesmo de progredirmos. Então testemunho de que eu posso simplesmente clicar duas vezes, mudar minhas setas, movê-los para ouvir. Eu posso ir ao Testemunho 3, e eu gosto de fazer essas coisas porque se elas são repetitivas, é melhor fazê-las uma por uma. Então, se você está fazendo flechas, por exemplo, como eu estou fazendo agora, é melhor lidar com elas imediatamente. Depois, dois voltam depois de algumas tentativas e depois esqueceram o que fizeram e algo assim. Então, como você pode ver, os números continuam iguais. Então nossa animação não vai mudar. As flechas continuam iguais e agora vamos lidar com o nosso carrinho. Então eu vou abrir esses cartões, cartão de testemunho número um. E a única coisa que eu vou fazer aqui é, primeiro lugar, vamos reduzir o tamanho do cartão. Vamos trazê-lo aqui. Então eu vou clicar no meu texto convertido em altura automática. E eu vou basicamente mudá-lo para aqui e depois adaptado algo assim. Não fui até aqui. E eu vou atualizá-lo. Apenas as minhas próximas férias devem caber. Vamos ver, sem o meu assim para as próximas férias. E vamos ver 40 bem aqui. 40 bem aqui. Eu vou simplesmente copiar este texto porque se você se lembra, nós usamos exatamente a mesma citação em todos eles. Então eu vou clicar aqui neste convertido clique duas vezes Control V. Mas eu ainda deveria fazê-lo assim porque é a largura que vai mudar. Então vamos ver, a largura é cinco ou quatro. Então, se eu puder mudá-lo aqui, então 500 para, vamos ver se funciona. Ele faz. Então vamos ver 1234 linhas. 1234 linhas, o que é ótimo, e o destino é bem aqui. Então, 5, 4. Eu vou saltar aqui, convertido, em seguida, ir arquivo para, em seguida, clique aqui, controle V, assim. Porque então ele vai colar em que textos convertidos ou cinco ou quatro. Agora clique em Control V e certifique-se de fazê-los assim. Vou saltar para a primeira carta. Vamos ver, qual é este e o destino. Então é, a largura é 930. Então eu posso ir em frente e mudar tudo isso. E porque estamos usando pilhas bem aqui, eles vão se adaptar. Então vamos com 930 I que, e você pode ver que ele se adapta lindamente. Então podemos ir com etiquetas fechadas, ir com esta. Então a imagem 930 não vai mudar, vai ficar a mesma. Só estamos mudando a largura desses cartões. Então vamos ver 930 assim. E lá temos. Também a distância é permanecer a mesma. Mas dois, você vai mudá-lo. Você pode ver que ele vai todo o caminho até aqui. Vou prendê-lo de volta ao meu quadro de arte assim. E mais uma vez, o casaco é que funciona, é bom. Então o que eu vou fazer é, eu acho que você está adivinhando neste momento, simplesmente copiar este texto ou eu nem preciso fazer isso. Eu posso simplesmente posicioná-lo no centro, mas eu vou copiar depoimentos e os textos ou eu não vou me incomodar muito com eles, ir para este estado. Clique aqui. Então removido título da seção e depoimentos. E a partir deste, eu vou simplesmente selecionar todos os meus cartões, por exemplo, e então mover isso para alinhar às minhas linhas de grade. Então, só um pouco mais assim. E então eu vou copiar este título de seção. Então eu não tenho que fazer a mesma coisa duas vezes. Então, Controle V, você pode ver que são patos. Está fixado a este segundo. Então, vamos agora mover nossos depoimentos para este terceiro. E basicamente estou fazendo isso só para não ter que animá-los. Mais uma vez, feche-os, selecione o título da seção e, finalmente, cole-o aqui. E salte para dentro dos depoimentos. E, finalmente, mover este último para aqui. Basta ver um alinhamento. Parece bom. E é basicamente isso. Agora vamos verificar e ver se funciona. Então vamos para a nossa pré-visualização. Deve funcionar porque não mudamos essas flechas. Simplesmente mudamos a casa deles. Aqui estamos nós. Então os horrores ainda funcionam, o que é ótimo. Você pode ver que isso ainda funciona e ele se encaixa em toda a nossa tela. Então você pode ver os números estão funcionando, tudo está funcionando, o que é ótimo. Então, vamos agora passar para essas seções aqui. Mais uma vez, porque temos 12 colunas, vamos dividi-las 66. Então eu vou clicar duas vezes neste aqui para reduzi-lo. Então 1, 2, 3, 4, 5, 6, e o destino vai ficar 60. Então, isso não vai mudar. Vou adaptá-lo e porque é apenas uma imagem, está se adaptando bem. O que você vai fazer é esconder minha cor, sobreposição, clique duas vezes no meu cartão e usar Shift 1, 2, 3, 4, 5 por exemplo. E é importante lembrar porque quando você entra em pairar, então abra, esconda isso. Clique duas vezes em 1, 2, 3, 4, 5, para que a imagem permaneça exatamente no mesmo local. Você pode ver que ainda é uma ampliação ao passar o mouse, mas a imagem está permanecendo no mesmo local. Então vamos para aqui pairar, porque não mudamos isso. Deve funcionar bem e funciona. Estou feliz com isso. E, finalmente, viagens de esquema, eu vou me mover com bem aqui, posicioná-lo até o final da nossa grade e fazer o mesmo para o pairar. Então, quando eu mudá-lo, você pode ver que ele ainda funciona e parece que deveria. Então, agora vamos seguir em frente. E o que nos resta basicamente fazer é apenas o rodapé. Então o rodapé, rodapé está mudando bastante, obviamente, como você pode ver ao longo desses tamanhos. Mas basicamente o que vou fazer é esconder isso. Vou clicar duas vezes aqui e posicionar essa garota para ser mais ou menos no centro, mas talvez compensar um pouco para a esquerda assim, só para que possamos trazer nosso interesse visual. E vamos tentar alinhá-los. Então vamos ver a imagem. E tente posicionar esse conteúdo para o centro assim. E vamos ver o que podemos fazer com todas as nossas informações. Então, em primeiro lugar. Vamos lidar com este nav principal. Então o que eu vou fazer é realmente usar um tipo diferente de pilha. Vou usar este aqui. E depois vou certificar-me de que me posicionei assim. E vejamos, a distância aqui é 100. Talvez possamos reduzi-lo a talvez 60 porque ainda temos tela de desktop, mas agora é muito menor. Então eu vou saltar para dentro deste e eu vou reposicioná-lo. Então, por exemplo, aqui. E talvez eu possa levar isso para o centro assim. Então eu vou fazer o mesmo por este aqui, trazê-lo para o centro assim. E estou feliz com esse resultado. Agora, para estes dois, vamos simplesmente reduzi-los. Você pode fazer algo como 40, por exemplo. Acho que vai funcionar bem. Sim, acho que funciona bem. E você pode ver que ainda temos o mesmo problema com o divisor, mas este é simples porque você pode simplesmente alinhá-lo às suas linhas de grade e chamá-lo por um dia. Mas se você não quiser fazer isso, então eu realmente recomendo que você use a ferramenta retangular e use isso como um divisor. Vamos usar isso como um 60 como este para que possamos ter o mesmo espaçamento aqui, sensibilidades aqui. E vamos fazer a mesma coisa aqui. Eu também poderia usar o turno, mas como eu disse, às vezes eu estou escolhendo usar esses. Agora, para este, vamos alinhar rapidamente para aqui. Então o que eu vou fazer com esses na verdade é, vamos ver as informações de fundo. Posso trocá-lo assim. Eu posso, Vai ser um pouco complicado para clicar nesses ícones. Posso, por exemplo, posicioná-los assim. Certifique-se de que o meu Instagram está no centro, por exemplo. Então o que eu vou fazer é reduzir o espaçamento entre eles para 60, assim. E o que eu posso fazer é basicamente ajustá-los como eu quiser. Então talvez eu possa posicionar este aqui. Vamos ver, talvez possamos mover todos eles para a esquerda, assim. E então vamos clicar aqui e simplesmente mover esses dois aqui. E, finalmente, expanda nosso rodapé. Então vamos ver. Talvez isso possa até ser 240, mas vamos mantê-lo assim. Porque temos 60, temos 60 aqui mesmo. E vamos ver o que temos. Nós temos, eu acho que 100 do topo. Então vamos ver. Sim, vamos usar 80 só um pouquinho. Então o que eu vou fazer a seguir é usar minhas informações de rodapé e, por exemplo, duplicado, mas eu não gosto desses termos e condições. Então o que eu vou tentar é talvez posicioná-lo aqui e, em seguida, estender isso até aqui. Você pode ver como essas pilhas são simples de usar, especialmente se você não quiser ter as mesmas distâncias entre o item. Então eles são realmente muito simples quando você começa a pendurar por eles, obviamente. Então, como eu disse, bem, eu vou fazer porque o que fizemos aqui temos 80. Eu vou duplicar esta informação e simplesmente usar shift e bottom seta oito vezes. E, em seguida, mover a minha imagem e para baixo até que ela se encontre bem aqui e mover a minha sobreposição de cores também. Como assim. E, em seguida, excluir esta cópia que eu criei e rebanho leiteiro, nós temos nosso rodapé concluída. Agora que tudo está pronto, vou simplesmente clicar duas vezes aqui. Posicione-o aqui, e ali, nós o temos. Então essa é a nossa página. É assim que parece. Como você pode ver, alguns elementos são realmente muito difíceis de gerenciar como esses. Mas mais uma vez, como eu disse várias vezes ao longo desta classe, se você não quiser ter muitos desses efeitos. Porque mais uma vez, temos o foco básico onde esta imagem amplia, onde esta seta se expande. E então temos outro pairar dentro dessa flecha. Se você não quiser todos esses elementos, você pode simplesmente usar um layout mais simples como tínhamos aqui. Então, basicamente, tudo o que muda aqui é zoom da imagem e, em seguida, soltar sombra no fundo. Você nem precisa fazer isso. Você pode simplesmente usar a sombra em segundo plano que seria suficiente para a maioria das necessidades. Mas, mais uma vez, eu queria mostrar a vocês esse layout realmente bastante complexo. Mas você pode dizer claramente a partir de todas essas configurações e chegando, em torno de todas essas opções diferentes. Vai levar muito tempo para dominar e mudar N, para fazer alterações em todos esses elementos. Portanto, basta ter isso em mente, especialmente quando você está começando com o seu projeto, certifique-se de considerar todos os custos de tempo em porque ele vai custar-lhe tempo. E você pode ver quanto tempo leva para criar justiça em uma página e torná-la responsiva. E ainda temos três páginas adicionais neste projeto. Obviamente, eles não vão ser tão complicados como esta página inicial. É por isso que eu mostrei a você homepage porque você pode simplesmente aplicar todas essas diferentes alterações a todas essas outras páginas. Mas você pode imaginar, como um dito, certifique-se de considerar tudo isso aqui desde o início neste breve resumo. Por isso, certifique-se de que quando estiver a ponderar o orçamento, tenha a certeza de que está dentro do orçamento para quantas resoluções eles querem. Então você pode ver desktop, desktop pequeno, tablet, telefone e, finalmente, certifique-se de incluir isso na linha do tempo do projeto, porque obviamente ele vai levar muito mais e muito mais tempo do que se você, por exemplo, apenas fazendo, digamos, três tamanhos diferentes ou dois tamanhos diferentes. Então é isso para esta página. No próximo vídeo, vamos passar para esta página, que é a página do doublet. E dentro dele vamos criar um menu de hambúrgueres. Então isso vai criar um monte de desafios e mudanças adicionais que vamos enfrentar juntos. Então, vemo-nos lá. 44. Criação de design responsivo 8: Vamos começar com o tamanho do tablet. E como eu disse em vários desses vídeos anteriores, vai ser muito diferente porque agora estamos removendo todos os nossos estados. Porque todos os nossos estados Horace, isso é porque nós não vamos ser capazes de contratar em tablets agora em alguns tablets, obviamente tablets Windows, especialmente você, vão ter a capacidade de usar o mouse, por exemplo, e passar o mouse e também em alguns outros tablets, como dispositivos Samsung, por exemplo. Eles têm a opção DAX da dívida. Então você será capaz de fazer isso nesses dispositivos, mas na maioria dos dispositivos, você não pode anexar um mouse. E, portanto, todos esses dispositivos, porque eles têm telas sensíveis ao toque, é muito melhor otimizar seus projetos para experiência de toque. Então vamos com 76 oito aqui. Então vamos mudar isso rapidamente para 768. E o que vamos fazer aqui é usar, vamos ver, vamos usar oito colunas. Então vamos pular aqui seria para ir para oito. E aqui vamos usar 296042. Então 29, 60 e 40 para fazê-lo 8296042. E basicamente, a pintura que vai mudar é a nossa própria navegação. Então vamos criar o menu de hambúrgueres. Mas antes de o fazermos, o que quero fazer é saltar para dentro daqui. E vamos organizar rapidamente algumas coisas porque não vamos fazer suspensões adicionais dentro de suspensões dentro desses menus, porque isso apenas criaria uma confusão. Para que eu possa lhe dar um exemplo. Agora temos o destino. Quando os usuários tocam lá, ele abrirá a seção de destino. Então vamos clicar em dívida. Então, ele abrirá todas essas opções adicionais. E vemos, temos todas essas opções adicionais de pairar. Temos todos esses divisórias, temos todas essas opções. Então, quando eles clicam em um inverno, por exemplo, temos todos estes mais o botão que vai pairar e tudo o resto. Nós não vamos fazer nada disso aqui, dentro da versão tablet e dentro da versão móvel, só por causa do espaço. Então, a única coisa que vamos ter é o ícone Menu aqui. Então, quando você pisar nele, ele vai apenas abrir estes destinos para, bem-estar de inverno e assim por diante. E uma vez que eles clicam na página de destino, por exemplo, vamos levá-los para o discurso de destino dedicado, onde eles podem explorar diferentes opções como estas, por exemplo. Assim, eles podem ver todas essas opções diferentes para destinos, em vez dessas. E você pode imaginar que aqui no lado esquerdo será um menu ou bem aqui no topo, como fizemos aqui mesmo. Assim, eles podem escolher diferentes destinos por preço, duração da viagem, atividades e assim por diante. Portanto, eles podem tocar em ousar e usar essas opções. Então é por isso que estamos economizando espaço em uma versão tablet, porque mais uma vez, você pode imaginar que os usuários podem tocar nos destinos. E então dentro dos destinos, temos todas essas opções. Esses são menus suspensos adicionais no menu suspenso adicional. Então isso só cria muita confusão. Ele só cria um monte de desordem desnecessária. E é por isso que eu quero remover todos eles e simplesmente colocá-los dentro Um simples desistiu. Então o que vamos fazer primeiro é ajustar algumas dessas coisas. Então vamos para aqui e eu vou, vamos ver mais uma vez. Então temos 76 8. Eu vou ajustar isso para um ativador primário são 76 8 assim. E vamos ver, talvez um você pode reduzir o tamanho do meu logotipo um pouco? Por exemplo, pule para dentro do meu login, segure minha tecla shift e ajustado para, por exemplo, algo assim porque eu não quero que ele seja muito grande. E deixe-me ajustar rapidamente meus pontos de toque do logotipo para que ele não fique muito assim. Mas nós não vamos animá-lo neste caso porque nós vamos ter o ícone do menu da dívida. Agora, para começar, vou simplesmente mover todos esses para baixo assim. E nós vamos trazer nossa primária agora borrão de volta só porque podemos ver o que estamos fazendo um pouco melhor dessa maneira. E eu vou estendê-lo para um carro alegórico por aqui. Então 10, 75, eu acho que vai ser bom. Como isso. E isso é bom. Eu só vou movê-lo assim. E vamos realmente estendido ver, onde isso nos leva? Então, 1018, tudo bem. E como eu disse, vamos manter esses itens aqui. E porque temos 20, podemos incluir, por exemplo, 50. Mas até importa 60. Porque agora vamos ter muito mais espaço para brincar porque o colocamos aqui. Ou o que podemos fazer é dividi-los assim. Em seguida, você pode clicar duas vezes dentro. Certifique-se de que este está no centro, este boletim informativo. E simplesmente movê-lo, por exemplo, para aqui e, em seguida, trazer isso de volta para aqui. Assim, temos muito mais espaço, mas como eu disse, acho que desta forma parece um pouco melhor, um pouco mais limpo, e um pouco mais juntos. Então, a próxima coisa que eu vou fazer é realmente criar essa linha de logotipo. Então, para fazer isso, eu vou simplesmente clicar em algum lugar aqui. Por exemplo, use minha ferramenta de retângulo, pulando aqui e crie esta linha agradável e simples. Vejamos, por exemplo, e os analistas usam, por exemplo, 56 semanas, nove. Acho que é um pouco grande demais. Então, por exemplo, 56 com cinco. Vamos ver. Sim, acho que funciona. Uma morte parece um pouco melhor. E eu posso simplesmente ampliar todo o caminho. Use minha ferramenta de seleção, clique e segure Shift para que eu possa criar essas bordas arredondadas. Removi a minha fronteira. E vamos ver. Sim, acho que funciona muito bem. Vamos posicioná-lo aqui e vamos ver. Acho que isso é bom. Vamos chamar de linha. Aperte o Controle D. e a posição C, por exemplo. Acho que bronzeado é demais. Vamos ver, talvez oito. Sim, Controle D mais uma vez. Oito. Cert e simplesmente alinhá-los assim porque vamos animá-lo em apenas um segundo. Então, o que eu vou fazer é agrupar Controle G, qualidade e menu. Eu vejo, sim, Para o ícone de menu, pressione Control K para torná-lo como um componente. E então vamos ver, nós podemos agrupar estes dois não são agrupados eles, mas posicioná-lo assim. E vamos ver, temos 34, talvez possamos descer um pouco mais. Vamos ver, 40. Sim, acho que isso é bom. Porque agora estamos deixando o espaço aqui no topo para os compradores de navegador necessários ou coisas assim que virão em tablets diferentes. Primeiro de tudo, o que eu vou fazer é que temos esse estado padrão, e eu não sei o porquê. Está me mostrando esse componente principal de edição. Eu não sei porquê. Mas de qualquer forma, vamos criar um novo estado. Vou chamá-lo clicado. E dentro desse estado clicado, o que eu vou fazer é usar nesta linha posicioná-lo bem aqui. Use esta posição de linha aqui, linha central que você não vê. Então deixe-me destacar escrever isso. Então esta é a linha central. Vou simplesmente segurar minha chave antiga e trazê-la até que basicamente crie esse pequeno círculo. Então, todo o caminho até aqui, por exemplo. E eu posso pressionar 0 duas vezes. Deixe-me trazer aqueles dois de volta. Basicamente neste primeiro, eu vou girá-lo por exemplo, assim. Então vamos ver que 60 C45 levam para ir com 60 e ver como isso se parece. Basta manter a tecla Shift pressionada até chegar aos 60. Acho que é demais. Então 45, e reduza isso para 45. Acho que funciona bem. Então agora temos padrão e nós clicamos. Então vamos removê-lo. Se voltarmos para aqui, para o nosso menu ícone Menu, agora temos esse estado clicado. Você pode vê-lo. Então vamos rapidamente protótipo em. Então, quando os usuários clicam aqui, ele vai com o toque auto animar, Estados clicados, facilitando e ponto zero. Vamos com 0.4 e ver como isso se parece com um estado onclick. Mais uma vez, uma vez que eles clicam em critérios, DAP auto animar, facilitar o ponto zero para annelids, voltar para o estado padrão. Vamos clicar em Pré-visualização sobre ele muito rapidamente para ver como ele se parece. Então, lá temos. Temos uma animação agradável e rápida. Se você acha que é muito rápido, você pode reduzi-lo para 0,6. Mas acho que vai funcionar bem assim. E como eu disse, como você pode ver, agora temos uma boa quantidade de espaço bem aqui no topo. Então vamos ajustar nossos itens. Vamos voltar ao projeto. E o que eu vou fazer aqui é basicamente ou colocá-los de lado ou colocá-los aqui à esquerda, por exemplo. Mas porque nós temos estes no centro, no fundo, eu vou realmente fazer o mesmo para o DES. Então eu vou, o que eu vou fazer é usar a seleção é tunisiano e basicamente remover todas essas pastas porque nós não vamos precisar mais delas. Vou agrupar todos estes deve controlar gene chamado ele, por exemplo, itens de menu. Isso e, em seguida, simplesmente usar a pilha. Use esta pilha e basicamente ajustar meus itens de menu para o centro do meu quadro de arte como este. Onde 36, então certifique-se de que temos 40. Os analistas do meu pai agora os derrubam. Acho que vou empurrá-los para baixo para 80. Então vamos ver como dívida e temos 110. Então vamos chamá-lo assim. Então nós somos 100 e então nós temos este espaço vazio lá em baixo. Então o que eu vou fazer aqui é realmente clicar com o botão direito do mouse e desagrupar componente. Vou ligar para o Controle G mais uma vez, chamá-lo de navegação principal. Mas tablet. Desta vez, Ike que aperte a tecla Control. E eu vou criar um novo estado. Mas neste estado padrão, o que eu vou fazer é pular dentro daqui, desfoque de navegação primária vai subir para um pixel. Estes itens do menu vão desaparecer. Itens secundários, eu vou escondê-los e menu vai ficar assim. Então a última coisa que precisamos fazer é criar realmente o ponto de tabulação para o nosso botão de menu. Então, para fazer isso e simplesmente clicar ali, saltar para o nosso botão de menu. E, por exemplo, expandido para algo assim. Remover a borda, remover o preenchimento, usar a ferramenta Selecionar, trazê-lo para, eu posso até deixá-lo assim. Isso realmente não importa porque nós vamos animar o estado aberto também, que vai expandir um pouco de altura. Então, por exemplo, algo assim vai ficar bem e vamos chamá-lo de um ponto de guia de menu. O meu pai. Então vá para o nosso estado 2, que vai ser o nosso estado clicado. E então dentro de lá, vamos ver, eu posso expandir isso para ser 1080. Quero dizer que eu posso mudar meu clicado de estado padrão para estado no ícone Menu, navegação secundária, trazê-lo de volta e são vistos itens de menu. Vamos trazê-los de volta mais uma vez assim. Então eu vou para o protótipo, abrir meu ponto de toque menu. Vou clicar nele. Use o estado clicado, facilitar o ponto zero. Vamos com 0.6 porque estamos abrindo o menu afinal. E isso deve manter nossa animação indo bem. Então o menu vai abrir mais rápido do que o resto. Ícone de menu vai animar mais rápido do que o resto do menu em si. Mas acho que vamos nos safar dessa. Então, vamos verificar e voltar para clicar em Estado, navegação primária, ponto de guia de menu e, em seguida, usar exatamente as mesmas configurações. Estado padrão pressione Preview, e vamos ver como isso se parece. Então, quando eu clico aqui, você pode ver inicialmente que tivemos uma falha, mas isso é apenas o meu computador porque eu estou executando todas essas coisas em segundo plano. Mas como você pode ver aqui, está indo muito bem. E todos esses itens estão mostrando muito bem. Você pode até incluir uma máscara se você quiser classificar máscara vai dar-lhe ainda melhor opção. Então simplesmente esconda todos esses itens. Então esses itens de texto dentro de uma mesquita colocaram em algum lugar por aqui, por exemplo. E então, quando você clicar aqui, máscara vai expandir todo o caminho para baixo como fizemos para alguns desses itens anteriores. Ok, vamos agora seguir em frente. Então é isso para esta parte 1 que eu vou fazer em seguida é a imagem de herói. Então vamos ver para a imagem do herói em si, o que eu vou fazer é vamos ver. Por exemplo, posso criar um layout um pouco diferente. Então vamos ver. Talvez eu possa usar o botão do explorador de texto, mas eu vou, por exemplo, mover meu humor, meus ícones para baixo. Então vamos fazer isso primeiro. Vou alinhar o meu texto aqui. Vou para a imagem número 2. Vou usar o meu texto, alinhe-o ao centro. Imagem número 3. Use minha pesquisa baseada em texto para verificar se tudo funciona como deveria. Ele faz. Então vamos voltar ao estado padrão e ver o que podemos fazer com esses ícones. Então, primeiro de tudo, o que eu vou fazer é posicionar tudo bem aqui na borda inferior da nossa máscara de texto. E vamos ver, ou talvez melhor, eu posso movê-los para baixo. Então 12345678, por exemplo. Então eu vou mover minha mensagem para o centro. Vamos ver meu botão expandido para ter quatro colunas de largura, assim. E vamos ver, para isso, o que eu posso fazer é eu estou pensando como eu posso abordar isso? Então vamos ver, estamos em 80. E, por exemplo, posso dividi-los por apenas uma coluna. Então, assim. E depois vai assim. Só para manter a animação e ver se o alinhamento está correto. Talvez você incorporar eu posso, eu posso posicioná-los no centro de sua coluna bem aqui. Então eu só estou pensando, o que não vai distrair o usuário quer guia dia. Então temos que dar espaço suficiente entre esses dois para que eles tenham espaço para sua língua, por exemplo, apenas para tocar neles na tela. Mas ainda queremos manter a aparência agradável e limpa. Então foi por isso que fiz isto. Por isso, temos de alinhar todos eles em todos os nossos Estados e certificar-nos de que este é o quatro. Então, vamos fazer isso rapidamente. Imagem número 2, vou colocar o botão de herói aqui. Certifica-te de que é às quatro. Eu deveria ser para isso também. Vá com nossas flechas e simplesmente alinhe-as para ouvir e ver. Isso é nos 80 e 18 que criamos isso para ser 80 também. Se bem me lembro. Sim. Então vamos fazer a mesma coisa aqui. E zoológicos para a esquerda posição seta para aqui e ir com a direita posição seta para aqui. E eu vou simplesmente me certificar de que está no limite. - É. E para ir para a esquerda, ver se está na borda. É, o que é bom. E agora a única coisa que nos resta fazer é a imagem número três. Então vamos consertar isso muito rapidamente, alguns assim. E finalmente derrubar as flechas mais uma vez. Então eu vou me alinhar assim. E o MIT deve usar 80 a partir daqui. Pule para dentro daqui, e certifique-se de alinhá-los a aqui. E este até aqui. Então eu estou simplesmente usando Shift e teclas de seta no meu teclado. Certifique-se de alinhar este. Certifique-se de alinhar este. Eu sou Derek, como é e agora o que eu não gosto é todo esse espaço vazio aqui. Então, o que realmente vamos fazer é ajustado para ser, por exemplo, 100 do topo. Então o que eu vou fazer é ir para o estado padrão. E porque temos todas essas opções selecionadas de qualquer maneira, vou selecionar minha máscara de herói, mesquita de texto, um botão de herói e setas. Vou alinhá-los até aqui. Vamos ver, mais ou menos dois aqui. Então 12345678910, ou ainda melhor e ir para 150. Agora vamos com um termo. Então vamos ver. Não sei o que penso. Sim, acho que devo usar uma divisória porque isso vai ser muito mais simples para mim nos meus próximos estados. Então vamos posicionar aqui e ir 100, assim. E da mesma forma como escrevo aqui, clique e arraste meu divisor para aqui. Então ele vai se alinhar com a borda superior do meu texto de herói. Em seguida, vou para o Número da imagem para selecionar todos estes e simplesmente movê-los para cima assim. Foto imagem número três. Selecione todos eles, clique e mova-os para cima assim. E agora vamos visualizá-lo rapidamente e ver como ele se parece. Então, se eu clicar aqui, vai fazer uma transição bem agradável como esta. E se você acha que essas imagens não funcionam muito bem, você pode ajustá-las. Mas o que eu gosto agora é que ainda podemos ver esses iates. Ainda podemos ver estas cabanas. Podemos ver a praia das pessoas, ver as pessoas a sair daqui. Então, isso é ótimo. E aqui podemos ver a areia do rio em Paris. Isso é ótimo. E finalmente aqui em Pequim, ainda podemos ver a covinha. Isso é bom. Isso funciona como deveria. Então não preste atenção a essa falha. Porque como você pode ver. Quando eu começo a clicar, ele desaparece. Então é só para o meu computador. Assim como eu, como eu disse, você pode ajustar essas imagens, mas eu vou mantê-las onde estão. E a última coisa que vamos ajustar é esta navegação inferior. Então, a primeira coisa que vou fazer na verdade é mudar este botão. Então, porque esse botão é apenas ousar uma coluna de largura, desculpe, duas colunas de largura, bem aqui. Eu vou realmente movê-lo para baixo e criar uma espécie de este olhar separado. Então vamos ver, podemos mover isso para aqui. Mais largura para ser 100, por exemplo. E, em seguida, use, botão Aplicar, posicione-o aqui mesmo. Certifica-te de que temos, por exemplo, 40 anos assim. E o que eu vou fazer é realmente mudar um pouco. Então eu vou usar cinco para todos os ângulos, para todas as arestas. Repare, mova-o para aqui. Expandido para ter quatro colunas de largura, por exemplo. Então vá para o estado de horror, expandido para ter quatro colunas de largura também. E também saltar para dentro daqui e certificar-se de que todos eles são 5. Então, porque temos mais espaço agora, vou usar Aplicar filtros que copiam meu texto. Salte para dentro do meu estado Horace. Com base em aplicar filtros e laticínios têm. Então, agora, para todos esses, vamos ajustar isso rapidamente porque não precisamos que ele seja tão branco. O que você realmente vai fazer é simplesmente ajustar alguns desses. Então, basicamente, para a pesquisa que vai ser a principal, eu vou realmente usar duas colunas. Então, algo assim. E eu vou trazer esses dois aqui. Eu também vou trazer o meu perto daqui. Então todo o caminho até a borda e depois 12, porque mais uma vez ele vai expandir todo o caminho até aqui. Então podemos ir para o estado clicado agora. E vamos ajustar-nos para aqui. E vamos trazer um BG de busca e fechar o ícone todo o caminho até aqui. Como isso. Vamos ficar entre eles. E eu ainda teria que mudá-lo aqui. Então isto, isto e isto vão passar para aqui. Vamos trazer a busca. Coloque em 10, por exemplo, e quando trazer esses dois assim. E agora vamos ver se conseguimos. Sim, agora está ótimo. Então, antes de seguirmos em frente, vamos verificar rapidamente e ver como fica aqui. Então, clique em uma pesquisa bem ali. Mas isso não está alinhado corretamente. Então vamos ver o que você fez de errado. E primeiro de tudo, eu vou realmente remover este estado de horror porque nós não precisamos dele para este tamanho porque nós estamos no tamanho do tablet. Então o que eu vou fazer é realmente copiá-lo. Estamos em um estado padrão. Vou desagrupá-lo. Eu vou colocar simplesmente chamá-lo aplicar botão e eu não preciso que componente realmente lá. Então vamos voltar à busca e ver o que fizemos de errado. Então, no ícone de roupas, eu vou selecionar estes para clicar aqui para colocá-lo aqui mesmo para esta borda. Eu vou ter certeza que é 20 para a esquerda, assim. E então eu vou fazer o mesmo estado interno clicado. Então eu vou colocá-lo bem aqui. E vamos ver, eu posso girá-lo de volta. Então, há assim. Eu faço essa borda e, em seguida, mudar 1 , 2, e finalmente girado assim. Então, agora vamos ficar entre eles. Vou bater na minha pré-estréia mais uma vez. Clique bem ali. E como você pode ver, agora, ele fica onde não deveria estar. Diz para procurar viagens aqui. Tudo está se expandindo bem. Então, o que podemos realmente ajustar aqui? Podemos deixar como está. Se você quiser. Vamos pré-visualizar mais uma vez. Então podemos deixá-lo como está, ou você pode ajustá-lo ainda mais se quiser. Mas acho que vou continuar assim. Podemos saltar, é fora de ações de barcos e simplesmente ajustar estes e dar especialmente o tipo de pouco mais espaço para a esquerda e para a direita. Mas há uma certa largura para mantê-lo apenas para o bem do tempo. E o que eu posso fazer é mover tudo para 80. Então deixe-me selecionar rapidamente que algum nav inferior. Como você pode ver, estamos em 100 aqui, então vamos subir 20. E é assim que parece em um prémio. E a propósito, eu não mencionei isso. Se você tiver duas telas em sua máquina, você pode realmente criar uma visualização ao vivo. E eu preciso remover essa exploração agora também. Então você pode criar uma visualização ao vivo, pode simplesmente abrir esta pré-visualização clique aqui para abri-lo para a visualização da área de trabalho. E então você pode colocar a visualização da área de trabalho na segunda tela e você pode projetar em tempo real. Então vamos para a imagem de herói. Vamos ao nosso botão de herói. E eu vou simplesmente copiar meu texto e clicar com o botão direito nele. Vamos lá, apareça. Desagrupe componente, Controle G. E desculpe por todas essas falhas, mas é só minha máquina. É apenas um pouco lento porque eu estou executando duas versões do XD, duas telas do XD. E eu também estou executando todo esse software em cima dele. Eu estou executando este anterior fora do software de áudio deles é todas essas coisas. Então é por isso que você pode ver todas essas falhas de vez em quando. Mas você não deveria ter todas essas falhas quando começar a trabalhar nisso. Então agora nós removemos isso. Então agora, quando eu apertar a pré-visualização e depois voltar para aqui, volte para aqui. Você pode ver que nós temos apenas este botão vazio dentro. Também precisamos remover o estado de foco dessas setas. Então o que eu vou fazer na verdade é Aleve-lo em estado de pairar e depois desagrupá-lo. Então vamos fazer isso. Vamos mudar rapidamente nossas flechas para o estado Horace, seta para a direita para o estado Horace. E eu vou simplesmente, por exemplo, desagrupar componente. Chame-o, certo. Nesta fase, Controle C. Eu vou desagrupar componente Controle G. Você vai ser seta para a esquerda. E é pré-visualizar rapidamente e ver se ainda funciona. Então, quando eu clico aqui, você pode ver porque estávamos na propriedade do horror, você ainda pode clicar nele porque nós não estávamos realmente animando setas. Estávamos animando esses pontos. Então vamos em frente e fazer isso para a imagem número dois. Então eu vou abrir minhas flechas. Vou desagrupar o componente Controle G aqui, seta para a esquerda. Agora, desculpe, tenho que mudar para o meu estado de horror primeiro no botulinum. Assim, clique com o botão direito do mouse desagrupar componente Control G, seta para a esquerda, desagrupar componente Control G e, ou seta para a direita assim. E, finalmente, vamos fazer isso para o primeiro estado, para as linhas de estado padrão, Vamos mudar para pairar. Vamos mudar para pairar. Controle C no grupo, controle G. Aí está. E finalmente, desagrupe o componente aqui, Controle G. E eu vou renomear esse hábito de laticínios da seta direita. Então agora você pode ver como é fácil trabalhar com ele. Só porque em uma versão tablet você está se livrando de todos esses estados de horror. Então basicamente isso vai tornar nosso trabalho muito mais simples porque não vamos ter nossos estados, por exemplo, para esses cartões e esses cartões bem aqui. Então, o que realmente vamos fazer aqui, e eu vou pular em apenas um segundo e explicar tudo isso no próximo vídeo. Mas deixe-me mostrar rapidamente isso em um exemplo real. Então, por exemplo, vamos com o título da seção. Vamos movê-lo aqui. E o que eu vou fazer é trazer isso um pouco mais perto também. Agora, porque temos oito colunas, não temos mais 12 colunas. Cada um deles vai ocupar quatro colunas. E vamos voltar para aqui. Então, o cartão de oferta especial , o Arrow e ele sim, só aqueles dois vão trazê-los aqui. Vou saltar para dentro do meio. Porque estamos na pilha bem aqui. Vou ajustar a minha pilha, ver onde isso me leva. E vamos ver, por exemplo, eu posso tornar minha imagem mais estreita. Então vamos ajustá-lo para ter quatro colunas de largura. E então vamos mover todo o nosso conteúdo para aqui. Agora temos um pouco mais de espaço para a nossa pilha brincar com ela. Para que eu possa ajustá-lo para aqui. Mas se você acha que está muito perto e você quer se livrar desse ícone por algum motivo, então você pode, e você pode ajustá-lo assim. Mas acho que vai funcionar assim de qualquer maneira. Agora, finalmente, para estes divisórias, que são a coisa mais irritante sobre este layout, vamos movê-los para aqui. E quando você estiver ajustando todos esses outros, basta lembrar o valor para este divisor. Então são três para dois. Então vamos ver o fundo. Sim, estamos lá. E como ele disse, porque nós vamos nos livrar do efeito de pairar em si, o que nós realmente vamos fazer é que você pode realmente saltar para o pairar bem aqui. E vamos fazer isso. Eu deveria realmente fazer isso. Então estamos agora em estado de horror para todos esses, como você pode ver, eu vou pular dentro da minha flecha e da seta direita. Você certamente me deixou entrar para que você possa ver quando eu estou fazendo um pouco melhor. E vamos ajustar nossa imagem para quatro e vamos mover todo o nosso conteúdo mais uma vez até aqui. Agora vamos clicar aqui e simplesmente trazer todos esses caras para mais ou menos por aqui. E posicione-o bem aqui. Então 313, copie e pule aqui no vício do 13 Dairy. Então agora o que eu vou fazer é pular de lado nossa máscara porque estamos agora no estado Horace. O que eu vou fazer é clicar aqui, clicar aqui mesmo. E então, em vez de 8%, eu vou para 5%. E o que você pode fazer é deixar essas imagens um pouco ampliadas se quiser. Mas a coisa chave é isto aqui. Então eu vou para a minha seta para a direita e ir para o meu efeito de horror. Selecione. Então Controle C ou clique com o botão direito e desagrupe componente. Você também pode fazer é deixá-lo assim. Acho que deve ficar. Portanto, não há necessidade de fazermos mais nada. - Sim. Porque não a animamos de volta do pairar. Então ele vai ficar em um pairar. E acho que fica bem assim. Se você não quiser deixá-lo assim, você pode simplesmente mudá-lo de volta para o estado padrão, então assim. Então, agora, quando você clicar em pré-visualização, ele vai permanecer neste estágio padrão, mas você tem que removê-lo. Portanto, clique duas vezes em Control C ou clique com o botão direito do mouse em desagrupar componente Control G para agrupar com as costas e com base no nome, então seta para a direita Então, como ele disse no próximo vídeo, vamos brincar com tudo isso e animar esses dois e, finalmente, quatro mortes botão na parte inferior, agora podemos torná-lo muito mais branco porque temos esse espaço. Então, posição e direita por aqui, por exemplo. E eu vou ter certeza que tem quatro colunas de largura. Mas mais uma vez, porque agora nos movemos para esses dois, você pode ver, então se eu esconder este e mostrar este, você pode ver que nós movemos esses dois e eles funcionam assim. Então o que eu vou fazer é chamar tudo isso para nós, minutos, btn. E eu vou clicar com o botão direito sobre ele, desagrupar o componente Control G para agrupá-lo de volta. Então, tudo no primeiro minuto. E eu vou fazer o mesmo por este. Mas neste, em vez de primeiro, vou chamá-lo de classe. Eu fiz. Deixe-me esconder este. Como você pode ver tudo primeiro ou último minuto, tudo funciona como deveria. E vamos esconder esta de baixo. E vaca leiteira, É, então é isso para este vídeo. Como eu disse, vamos lidar com isso no próximo vídeo. Vamos nos ajustar e podemos fazer o vídeo neste porque é realmente muito simples. E eu também vou ajustar um pouco a altura. E por causa da pilha como de costume, layout está se ajustando bem. Então, eu vou vê-lo no próximo vídeo quando vamos continuar nosso trabalho neste tamanho de tablet. 45. Criação de design responsivo 9: Certo, vamos continuar de onde paramos. E antes disso, estou pensando em algo porque temos todas essas flechas em todos os lugares estão parecidas com isso. Eles vão ficar assim aqui, nestes estados. E também os temos aqui como estes azuis. Eu estou pensando que voltar deve realmente mudá-los aqui mesmo. Então, em todos os nossos Estados heróis, então para a imagem de herói, lá, eu vou pular dentro das minhas flechas e eu tenho a minha chamada cor. Vou simplesmente reduzi-lo a 0. E eu vou fazer o mesmo para aqui apenas para manter a consistência deles, porque eu não acho que essas opções parecem tão grandes apenas nesta seção sem alterá-los em todas essas outras seções. Então eu estou apenas pressionando 0 duas vezes e eu vou fechá-los bem aqui. Voltando ao número 3 e localizá-los aqui. E saúde dos laticínios. Agora vamos passar rapidamente para as ofertas especiais. E sob ofertas especiais, o que eu vou fazer na verdade é pular dentro desta, por exemplo, e ver todas essas configurações. Então eu vou pular um meio repentino. C, o espaçamento de 2002, por exemplo, e divisor está em 3, 1, 3. Então eu vou usar isso para este. Então, primeiro, pule para dentro daqui, mova todas as minhas informações para ouvir mais da minha flecha até aqui e do meu passado até aqui. Então eu vou saltar designado meu divisor, usar 313 sujeira e eu vou saltar para dentro daqui e usar 22 e Derek tê-lo. Então, é muito mais rápido e você simplesmente copiar e colar todos esses elementos. Então eu vou esconder estes, aparecer, estes três. Então vamos saltar para dentro de nossa Paris, mas eu tenho que escondê-los assim para que eu possa editar este. Vamos criar até aqui. E eu vou pular para dentro e mover tudo isso. E eu vou selecionar estes para movê-los ao mesmo tempo, dois aqui. E eu vou abrir minha máscara. Posicione-o aqui e clique duas vezes nesta seta. Clique com o botão direito do mouse Desagrupar componente Control G e chame-o de seta para a direita E vamos ver, o que está aqui foi 313. E aqui podemos usar 22. E esse é o grande benefício e poder de usar essas pilhas porque você pode simplesmente ajustá-las como quiser. E seguirá enquanto mantém a mesma distância que você pode ver aqui. Então eu realmente gosto desse recurso, mas mais uma vez, parece que todos esses recursos, ele vai ficar melhor no tempo e vai ser muito mais simples de usar. Quanto mais você usá-lo e mais eles são atualizados ao longo do tempo. Tão perto que vou saltar para dentro do meio aqui. Use 313 e vamos usar 2250, este Howard leiteiro e simplesmente entrou no Herói mental 3, 1, 3, e use 22 para este. E agora as dívidas acabaram. Um que eu vou fazer é trazer estes de volta, selecionar todos os três Q para 0 placa MCI para que eu possa trazê-los de volta. Vou selecionar meu Controle de Haggadah C ou clique com o botão direito do mouse Desagrupar componente Control G e trazê-lo de volta. Faça o mesmo por Tóquio. E estou fazendo isso porque, como expliquei, não temos mais estados de terror. Então, vai ser muito mais rápido para nós criar todos estes apenas porque estamos usando apenas um estado, apenas queremos um olhar basicamente cortar chamado botão direito Ungroup. E, finalmente, para digitar um clique Desagrupar. E aí está. Então agora, se você se lembra, temos o estado padrão e temos ofertas de última hora. Então o que eu vou fazer é realmente o mesmo que sempre fez ao longo desta classe, é selecionar todos os meus itens, Controle C. Ir dentro de ofertas de última hora com base no topo, e depois remover todos os antigos. Então, o que eu vou fazer aqui, eu vou primeiro para o meu estado padrão. E estes três vão ficar no topo enquanto estes três vão ser escondidos. Então eu vou pular dentro das ofertas de última hora. Então estes três para o topo, vamos estar escondidos e estes três vão aparecer enquanto estes botões. Então vamos ver, no primeiro minuto eu vou escondê-lo. No último minuto, vou mostrá-lo. Fim. A animação deve funcionar porque não mudamos a dosagem. Então, quando eu clicar aqui, você pode ver que ele muda de volta para aqui. Mas por alguma razão não animou. Então vamos protótipo de estado padrão. E vamos ver o que tínhamos aqui. Eu acho que foi, está em nosso 0.6. Então vamos rapidamente para as ofertas de última hora e eu vou selecionar este está em nosso estado padrão 0.6. Vamos pré-visualizar para ver como isso se parece. Então, em um clique aqui para ir para o primeiro minuto, clique para ir para o último minuto. Mas dentro das ofertas de última hora, esqueci de mudar o texto. Então aqui nós tínhamos, aqui estamos nós no estado padrão. Selecionamos ofertas de primeiro minuto. Quando nos mudarmos para o último estado, no último minuto, o que vou fazer é garantir que este floresça no azul principal. E certifique-se de que isso é cinza claro assim. Então agora, quando eu vou para o protótipo e clique para visualizá-lo, estamos nos últimos minutos. Estamos no primeiro minuto e você pode ver as mudanças. E se eu rolar para baixo, você pode ver que temos todos os primeiros minutos sem qualquer pairar, nós também temos que remover o Hubbard aqui. Então vamos em frente e fazer isso. Então eu vou pular dentro do nosso ícone de reprodução de vídeo promocional. Vou me certificar de que estou no estado padrão, copiar texto, desagrupar componente Control G. E isso é basicamente o que vai levar a maior quantidade de tempo basicamente, nestes não são esses ícones. Então, porque temos destinos europeus bem aqui, o que eu realmente vou fazer é simplesmente EUA, Europa, assim. E, em seguida, use a seção intitulada posicioná-lo no centro. E o que vou fazer aqui é. Talvez possamos ter quatro deles, digamos, ou até seis deles, mas podemos ajustar o tamanho deles. Então o que eu vou fazer antes de tudo é ajustar meu grupo rolável para Hyrum. E depois vou ajustar as minhas cidades. Vamos ver. Sim, acho que podemos usar 6. Então, o que vamos fazer por cada um? Estes basicamente têm quatro colunas de largura. Então, não vai realmente exigir todas essas grandes mudanças. Então, primeiro de tudo, salte para dentro de cada um e simplesmente você paira. Meu pai, meu pai. E o que também podemos fazer é saltar dentro de cada conteúdo. Então este grupo seta e recapitular esta seta para a direita. O que podemos fazer é ir para o protótipo e simplesmente para cada um, clicar e arrastá-lo para fora. Assim, clique e arraste-o para fora para passar o mouse. Ou podemos até, vamos ver como podemos removê-lo? Nenhum. Então vamos visualizar isso e ver como ele se parece. Então eu posso ir para baixo com ele. Diz Paris. Posso pairar sobre ele. Então você tem que simplesmente selecionar nenhum. Não mostrará o horror , não ficará assim. E para estes de baixo podemos, como eu disse, você pode deixá-lo assim ou você pode mudar para pairar se você quiser flecha maior. Então, tudo depende de você. Assim, você pode simplesmente selecionar Nenhum para cada um deles. E eu posso clicar neste. Posso selecionar o cursor do mouse. Então, vamos com nenhum. Então. Posso selecionar este, destino nenhum e destino nenhum, para que não tenhamos que desagrupá-los e fazer todas essas coisas. Nenhum. E finalmente, nove bem aqui. E o Dario. Então é basicamente isso. Vou fazer o mesmo por estes. Então, dentro das minhas flechas, eu não vou com nenhuma porque eu não quero que ele mude para pairar. Bem aqui. Não vou fazer nada e vou deixá-los como estão, certo? Compartilhe. Se também podemos fazer é fazer a mesma coisa para o botão. Então vamos voltar ao design. E antes de tudo, vamos ajustar para ter, por exemplo, quatro colunas de largura. Vou ajustá-lo assim. E eu também vou fazer o mesmo para o pairar apenas no caso, por exemplo, mais tarde você pode mudar de idéia e você quer usar o estado de horror por algum motivo. Então você pode ir para o protótipo e você pode ir. Então agora quando eu apertei a pré-visualização, ele deve ficar assim para todos eles para que nós temos opção de não desagrupar todos eles. Então vamos ver. Está ali. Se eu trocá-los, está lá. Então você pode até deixar esses cartões como eles estão aqui para acelerar todo o processo. Mas como eu disse, talvez seja melhor matá-lo um pouco. Talvez você possa até se livrar dessas flechas. Então, como você quiser fazer isso, mas eu realmente vou ter apenas dois deles e, em seguida, fazê-los rolar para a esquerda e para a direita. Então, antes de fazer tudo isso, deixe-me voltar para esses cartões porque algo não está certo, bem aqui. Então estamos em uma oferta de última hora neste momento. E eu vou fechar tudo isso. Agora. Vamos ver. Estes são R3. Então nós temos Paris crack de Taipei e eu vou trocá-los por aí. Vamos ver. O que eu realmente não fiz é que eu não selecionei meu conteúdo. Então vamos voltar para o estado padrão. O que vou fazer aqui é entrar, assinar cidades para mim. Eu vou, vamos ver. Desculpe, estou mudando os destinos europeus e me perguntando o que está acontecendo. Por isso, aqui mesmo, vou ajustar estes. Porque se eu selecionar esses três no topo, você pode ver que fizemos essas mudanças muito bem, mas com esses na verdade esqueceu-se de expandir essas máscaras. Então vamos fazer isso rapidamente. Uma flecha. Máscara vai ser 80 para o meu pai e seta para a direita ir para o protótipo e simplesmente usar nenhum. Então não nos preocupamos com todas essas coisas. Vá para digitar uma máscara de seta. Seu projeto 82 flecha protótipo. Dê tempo para mudar porque como eu disse, tenho várias coisas funcionando. Então eu vou com o Non, voltar ao Design, trocá-lo assim. E agora vou simplesmente copiar todos eles mais uma vez. Então eu vou usar estes e os botões e Controle C e ir para o estado padrão. Vamos esconder estes três no topo e trazê-los de volta. Então vamos ver, eu posso selecionar chamado gada todo o caminho até botões de controle V. Lá temos o título da seção, e logo acima das guias, XD está agindo estranho hoje. Então, ofertas, eu vou mostrar este aqui, esconder este. Vou esconder 123 no fundo. Vou mostrar esses três primeiros, porque agora terminamos tudo isso. Então eu vou mostrar esses três no estado padrão. E na oferta de última hora, temos de última hora e temos estes três no fundo, o que é bom. Tudo funciona como deveria, terminá-lo basicamente. Então, antes de eu selecionar estes e editar todos eles, eu quero mostrar a vocês um, e eu quero mostrar como eu vou realmente ajustado. Porque, como eu disse, estamos no estado de horror, não vamos mudar isso demais. O que vou fazer primeiro é saltar para dentro de cada um. Assim, abra meu conteúdo. E para cada um desses cartões de destino. E vamos clicar aqui e digitar cinco. Então eu vou fazer isso muito rápido porque como eu disse, nós não temos mais esse efeito de pairar. Estamos simplesmente usando todos esses outros sem qualquer efeito de pairar. Então eu vou usar cinco. Clique aqui. Use cinco e pule aqui. E, finalmente, este clique, use cinco e sua cabeça. Então eu vou fechar tudo isso porque eu vou estar trabalhando no de Paris e ver o que eu quero dizer. Então, para a Paris, o que eu vou fazer é realmente tirar todos esses outros do caminho para que eles não me incomodem muito. Oi, Neste, Eu vou simplesmente estender todo o meu conteúdo para aqui. E é basicamente isso. Então, o que você pode fazer neste momento é simplesmente saltar para dentro do meio, selecionar seus divisórias, e simplesmente alinhá-los aqui com a borda esquerda de seus textos. Eles ainda vão ficar lá. Mas você também pode fazer é expandi-los se você quiser. Então, por exemplo, 300, veja onde isso leva você. E, em seguida, saltar para dentro daqui e ajustar cada uma dessas ferramentas, digamos linha 741 e, em seguida, pode ser 642 linhas de texto. E eu acho que isso é bom. Então vamos verificar mais uma vez. Então 36074 D's. Então salte para dentro de Londres. Expandido. Volte para a seção do meio. Na verdade, moveu toda a seção, o que é bom. E vamos ver. Então eu posso clicar aqui entrando 300 por isso. E posso fazer o mesmo por este. Por exemplo, 60 ou 70 porque temos apenas um texto de linha aqui. E lá tínhamos. Então eu vou terminar o vídeo aqui e eu vou voltar quando eu terminar, não só este, mas todos esses outros, mais uma vez, para não te aborrecer. E então vamos seguir em frente e continuar com todas essas outras seções porque, mais uma vez, essas seções ocupam muito tempo. Como eu disse, não quero me preocupar, aborrecê-los demais com todos esses detalhes desnecessários porque o que estou fazendo é o que acabei de mostrar a vocês. Basta enxaguar e repetir, enxaguar e repetir. E então eu vou mostrar a vocês o que eu fiz para esses estados porque nós temos padrão e nós clicamos. Então, como eu disse, é isso para este vídeo. Vejo-te no próximo. Assim que eu terminar tudo isso para que eu possa te mostrar onde vamos a seguir. 46. Criação de design responsivo 10: Certo, então vamos continuar. Mas antes disso, eu já fui em frente e criei componentes para esses novos que acabei de criar. Mas não fiz isso porque queria te mostrar o que vou fazer porque tenho seis deles. E você viu morto. Eu cortei estes grupos de livros de pergaminho aqui. Assim, para a borda de nossas linhas de rede, bem como para a borda de nossos aeroportos. A mesma coisa que fizemos até agora para todos os nossos tamanhos. Então o que eu vou fazer porque nós temos seis, eu vou realmente criar três estados diferentes. Então, para fazer isso, eu tenho que desagrupar este componente e criar um novo. Mas eu não vou clicar com o botão direito do mouse e desagrupá-lo assim porque, como você pode ver, isso quebra nosso layout porque Adobe XD coisas que queremos 150 entre todos esses diferentes elementos. Porque, por exemplo, esses dois não são agrupados. Portanto, é só enviá-los para lá. O que eu vou fazer é realmente voltar, abrir meu componente, selecionar todos eles, apertar Control G e mergulhar na Europa, por exemplo. E então eu vou clicar com o botão direito do mouse e desagrupar componente, que vai manter 150 para esses dois. E vai manter tudo isso lá dentro. Então eu vou acertar o Controle K para este. Então, só para criá-la como uma Europa. E então eu vou chamá-lo de estágio dois, por exemplo. Assim dentro do estado para o que eu vou fazer é pular, assinar comigo, cidades alinhar-se e este aqui, assim. E então eu vou criar outro estado, que vai ser chamado de estado três. E dentro do estado três, vou usar minhas cidades mais uma vez e alinhá-las assim. Então agora vamos em frente e protótipos. Então vá para o padrão, protótipo de estado. Vou abrir minhas flechas, certo, ponto de tabulação. Vou clicar em você estab auto animate, fácil. Agora o nosso 0.6, assim como para todos estes outros ir para o estado dois. E então, em vez de o estado para, eu vou fazer a mesma coisa. Então aqui eu vou clicar, Voltar para o estado padrão, e eu vou clicar neste. Volte para o estado três, assim. E finalmente, dentro do estado três, vou usar meu ponto de dados do laboratório de setas. Vou para o estado 2. Então, agora, se eu voltar para o design de estado padrão, clique em Visualizar e mostrar a vocês como esse anterior se parece. Então vamos rolar para baixo para destinos europeus. Aqui estão eles. Então, uma vez que atingimos a seta, porque não temos nenhum efeito de pairar, é que você pode ver que os usuários podem simplesmente tocar e isso vai levá-los a todas essas coisas, todos esses lugares diferentes. E ele pode simplesmente escolher o carro que eles quiserem. Porque excluímos o efeito de pairar de todas essas setas. Como você pode ver, uma vez que eles pairaram o dedo basicamente sobre eles, não vai fazer nada e não vai mudar nada. Então, basicamente, deixe-me pressionar Control S para salvar todas as nossas mudanças até agora. E eu quero explicar esta seção. Então, basicamente, vai ser extremamente simples de ajustar. A única equipe que vai fazer para ele é basicamente apenas ajustar a largura de nossa imagem e colocar nosso conteúdo no centro. Então, basicamente, faça a mesma coisa para o botão em si. Então, primeiro de tudo, vamos ajustar rapidamente nossa imagem. Então eu vou usar minha imagem ajustada assim. E eu também vou clicar aqui e ajustado para a direita aqui. Então, como nossa imagem mover o bit para baixo, eu vou clicar duas vezes sobre ele e eu vou movê-lo para cima assim para ajustar. Então eu vou posicionar meu conteúdo no centro assim. Ele ainda mantém as mesmas distâncias e edição. Vamos agora seguir em frente com este botão posicionando o Reich, assim. Eu também vou usar o pairar apenas para o caso de seus clientes mudarem de idéia e eles querem usá-lo assim. Podemos ir para o protótipo e simplesmente clicar aqui para nenhum, também. Desative este efeito de pairar. Então não queremos esse efeito de pairar. E você sempre pode voltar e contar a eles. Ok, então é assim que parece, porque nós mantemos como um componente. Mais uma vez, mostro-lhes as duas opções. Se você se lembra da seção de heróis, desagrupamos o componente para o estado que queríamos. Você pode ir por esse caminho ou você pode simplesmente desativar esses efeitos a partir daí. E então você pode simplesmente desativar esse cursor e eles podem escolher o que quiserem fazer com ele. Como eu disse, fiz o mesmo pelas Américas e pela Ásia. E agora vamos passar para esta seção. Então este destino de topo e lítio rapidamente alinham para aqui assim. Deixe-me pular para dentro, ver minhas setas, e verificar rapidamente nossos destinos, ver se eles estão alinhados corretamente. Eles são. Então o que eu vou fazer com essas flechas, porque obviamente não temos muito espaço aqui. Eu posso, por exemplo, remover de destinos de desktop, e eu posso simplesmente escrever em destinos, mas eu não vou fazer isso. Na verdade, vou colocar minhas flechas bem aqui. E eu vou me certificar de que eles estão centrados como nós fizemos lá em cima. Então eu vou pular dentro da minha seta para a esquerda e vou movê-la por aqui. Vou fazer a mesma coisa por uma flecha de escritor como essa. E vamos ver, por exemplo, eu posso posicioná-los para ser, vejamos, 80 por exemplo. Ou melhor ainda, 60 porque não precisamos que sejam tão grandes. Então, o que vamos lidar com este é bem simples. Eu vou fazer exatamente a mesma coisa que eu fiz antes. Então o que eu vou primeiro fazer é acertar o Controle G neste, destinos de qualidade superior. Eu gosto disso. Vou clicar com o botão direito do mouse aqui no componente grupo porque não precisamos mais dele e não vamos usar hovers. Vamos usar exatamente a mesma sombra em todos esses campos como fizemos lá em cima. Então, o que vou fazer a seguir é saltar para dentro e ajustar cada um. Então, primeiro de tudo, vamos trazer esses dois aqui. Então nós vamos ter que ter quatro colunas de largura para cada um. Agora, vamos ajustar estes. Então deixe-me esconder estes dois primeiros. Vou usar Munson, Michelle. E posicione-o para aqui. E então, finalmente, eu vou mudar Sydney aqui, e então Capadócia, eu vou movê-la aqui mesmo. Agora, vamos trazer estes de volta. Então, primeiro de tudo, vou clicar nas minhas Maldivas e simplesmente estendê-las até aqui. Clique no último Lake District, depois esconda estes para que não estraguem o nosso layout. Então nós podemos realmente clicar sobre os que estão na parte inferior. Assim pode comer monstro Michelle. E como podem ver, ainda temos alguns problemas com o texto. Então ele está posicionado no centro e certifique-se que estamos em um centro como este. Então, lá temos. E eu vou esconder estes dois e trabalhar no Sydney, encontrá-lo e trabalhar na Capadócia assim. Então você pode ver que temos alguns problemas aqui. Então vamos ver o que podemos fazer. Posso colocar, por exemplo, chaminé de fada para baixo, só para que não tenhamos uma palavra no fundo. E eu também vou avançar, por exemplo, formações para o topo. Como isso. Rico em permissões do Iraque mantidas, mantidas habitações e eu vou colá-lo aqui, sugere que mantenhamos o mesmo espaçamento e as mesmas distâncias para todos eles. Porque temos o conteúdo para cada um deles e temos a pasta chamada conteúdo. Eu não vou fazer, porque se você se lembra, nós temos o efeito de pairar bem aqui. Então eu vou apenas clicar duas vezes aqui, selecionar meu texto, clicar duas vezes aqui. E estou baseado no texto das Maldivas. E quando fazer o mesmo por isso? Baseada em Lake District. Vou fazer o mesmo aqui. Baseada bem ali, e ainda tenho alguns bugs. Então deixe-me salvar meu documento. Porque às vezes o XD, como você pode ver, ele está mostrando todos os tipos de bugs diferentes. Não sei o que acontece porque estou atualizando o get assim que eles veem as atualizações. Então eu só queria mostrar a vocês que isso também pode acontecer. Então, apenas certifique-se de entender como você pode ver, algumas falhas aqui. Então vamos tentar isso. Se eu clicar fora e, em seguida, clique em voltar para a Toscana, por exemplo, clique duas vezes aqui. Ainda mostra essas questões, mas pelo menos dá-me a opção de trabalhar nos meus textos. Então, basta copiar e colar. E finalmente para a Capadócia, e vamos copiar e colar. E lá temos. Então, o que eu vou fazer agora é simplesmente clicar com o botão direito do mouse no grupo, clicar com o botão direito do mouse E eu obviamente estou colocando-os lá dentro porque nós temos essa pilha. Então é por isso que estou colocando-os em um grupo e renomeando-os para que saibamos qual deles é qual. Então vamos agora selecionar estes quatro. Mova-os um pouco para fora e vamos ver, eu acho que temos 29 porque essa é a nossa largura da calha. - É. E finalmente, vamos tirar estes dois últimos do caminho. Então eu vou posicionar em beat 2009 e ter certeza de que este pergaminho, grupo de rolagem está bem ali. Agora eu vou pular. Então o protótipo vai para as minhas flechas e vê o que temos ali. Então, em uma seta para a esquerda, temos o pairar. Vou clicar aqui mesmo, em seguida, usar non para que eu possa removê-lo. E é basicamente isso. Então agora vamos fazer a mesma coisa porque temos os melhores destinos. Vou apertar Controle K ou Comando K para criar um componente. E então vamos criar o estado 2. E então para o estado, o que eu vou fazer é saltar para dentro daqui e ir para os destinos. Alinhe aqui, assim. E vamos criar um novo estado. Então, estado três, dentro de um estado 3 vá para destinos, clique e arraste-os direto para aqui. E agora vamos para o protótipo de estado padrão, abra suas setas, clique com o botão direito do mouse, ponto de profundidade direito, desculpe. Então, em vez de passar o mouse, vamos sair para animar o estado para facilitar e 0,6 segundos ir para o estado à esquerda nesse ponto vai para um estado padrão, assim, logo naquele ponto vai para o estado número 3. E finalmente podemos ir para o estado número t e usar a seta para a esquerda assim. Clique ali e vá para o estado dois. E finalmente, agora as dívidas concluídas, eu posso bater Salvar e podemos seguir em frente e um projeto, o viajante nos ama. Então, essas seções de depoimento. Então o que podemos realmente fazer enquanto ele está economizando é que podemos ajustá-lo de uma maneira que podemos, por exemplo, remover os números ou podemos até mesmo manter os números porque queremos manter essa animação funcionando. Então podemos manter os números e as setas, mas podemos, por exemplo, nos livrar dessas imagens. Então, se nos livrarmos dessas imagens, então teremos que reajustar como tudo parece. Então, para fazer isso, vamos passar para depoimentos. E eu vou mover o título da minha seção para o centro assim. E Dan e quando usar minhas flechas e posicioná-las neste lugar. Porque se você se lembra, vamos nos livrar dos efeitos do pairamento. Então, pulando aqui, seta para a direita, vou me livrar do pairar, seta para a esquerda. Vou me livrar do pairar assim. E vamos ver. Direita nesse ponto é simplesmente toque à esquerda ponto DEP não está disponível. Então vamos voltar ao Design. E como eu disse, vamos ficar com eles, mas para os cartões de depoimento, o que eu vou fazer é pular dentro desta chave para excluir na minha imagem. E eu vou simplesmente ajustar a largura do meu cartão para ouvir e mais o meu texto no centro. E porque eu fiz isso, todo esse conteúdo vai seguir. Agora, para o texto em si, eu vou selecionar todos os três, certificar-me de que eles estão alinhados ao centro, certifique-se de que eles estão alinhados ao centro assim. E eu vou simplesmente me certificar de que eles estão no centro do meu cartão. Então eu vou fazer a mesma coisa para este número 2. Vamos passar para aqui. E vamos ver qual é a largura deste cartão. É 678. Então vamos trabalhar no nosso texto. Primeiro de tudo, certifique-se de que está no centro. Certifica-te de que está centrado assim. Então vamos ver, 6, 7, 8, pressione Enter. E eu vou mover o meu texto ooh, o centro assim. E, obviamente, parece que fizemos com todos esses outros, 678, nós vamos realmente mover todos eles para o centro. Então vamos voltar, clicar ali, ajustar meu texto. E eu fui pular para dentro, ter certeza que eles estão centrados e centrados, alinhados, centrados. E mais uma vez, selecione estes dois homens devem enviar mensagem está no centro. E, finalmente, você faz o mesmo pela indecisão do módulo número quatro. Então eu vou ter certeza sobre o dissidente de Marion deles são credores. Então deixe-me ir em frente e verificar. 678 é a largura das nossas cartas sobre quando fazer a mesma coisa. Então, 6, 7, 8, assim. E mais uma vez, porque nosso texto está centrado e vamos movê-lo para o centro assim. Então, lá temos. A única coisa que realmente precisamos fazer agora é mover as setas e mover-se sob os próprios cartões de testemunho. Então eu vou mover isso rapidamente. Basicamente, vamos fazer a mesma coisa. Então vamos nos livrar de todas essas outras animações, exceto essas. Então vamos copiar o título da seção, depoimentos e setas. Aperte o Controle C. Vá ao nosso depoimento, então eu vou apertar o Controle V e me livrar de tudo, exceto o texto para mascarar. Então eu vou mover a máscara de texto logo acima assim. Rebanho leiteiro. E para os depoimentos em si, vou colocar o segundo aqui. Deixe-me ver se está alinhado. Então, o testemunho do carro número 2. É, o que é ótimo. Então vamos ver mais uma vez. Não é neve. Deixe-me movê-lo só um pouquinho. E eu vou realmente estender isso para a linha de grade de laticínios para fora para que tudo fique bem. E antes de seguirmos em frente, vou voltar aos depoimentos padrão da esquina estadual e ver se estamos, não vamos. Agora estamos é o primeiro a nossa linha Lytton, rapidamente verificar que não é assim que eu simplesmente vou alinhá-lo assim. Então eles estão feridos, não vamos em frente e seguir em frente. Então, está verificado. E número 2, e eu vou realmente copiar o título da sessão e depoimentos deste aqui. E também as setas Controle C e ir para o depoimento 3, pulando aqui, Controle V, eu vou me livrar desses três e posicionar a máscara de texto logo acima de nossas setas para os depoimentos, eu vou me mover eles sobre posição testemunho número 3, dois aqui. E veja se está alinhado. Não é. Ok, então agora é. Mas, por alguma razão, está a mostrar-me isto. Então vamos incluir mais demoing isso. Vamos ver agora. Agora acho que funciona. Então vai ser bom. E finalmente, vamos copiar este Controle C e saltar para o depoimento para o controle V. E eu quero me livrar destes mais, a máscara de texto logo acima. E para os próprios depoimentos, vamos mudar o quarto assim. É um pouco curto, mas vai funcionar porque eu não quero voltar atrás e ajustar todas essas larguras mais uma vez, para todas elas, mas você começa a imagem. Então, para o protótipo, eu vou pular. Então, estado padrão. O que temos aqui para as flechas veria. Então seta para a direita, temos pontos de toque certos ou testemunho de toque também, o que é ótimo. Vamos passar para o depoimento também. Então aqui vamos usar a nossa seta para a esquerda. Então guia auto animar, estado padrão, facilidade em fora 0.6 segundos como sujeira, certo nesse ponto vai fazer a mesma coisa, mas ir para depoimento árvore como. Então vamos ao depoimento três. Então, nesta seta, vamos voltar para o depoimento de sobre este, vamos para a forma de testemunho. E finalmente, vamos passar para o depoimento para n para ele, vamos usar esta seta para ir para um depoimento para estado padrão do meu pai. E vamos clicar, clicar em visualizá-lo e ver como tudo se parece. Então, se descermos até nossos depoimentos, em primeiro lugar, vamos verificar nossos principais destinos e ver que eles ficam bem. Claro, se você quiser, você pode remover o destino, desculpe, o texto superior, alinhar os textos destinos à esquerda. E há simplesmente usar as setas como sempre fizemos com este layout. Mas acho que funciona bem de qualquer maneira. Agora, para esses depoimentos, se eu clicar aqui, vocês podem ver que ainda temos a animação, temos os depoimentos, então tudo funciona como deveria. Então agora vamos passar para esta seção. E para esta seção, obviamente porque estamos nos livrando de nossos efeitos de cor, o que eu vou fazer é basicamente colocar tudo isso dentro de um grupo e uma cópia do meu texto aqui, colá-lo aqui mesmo. Eu vou fazer o mesmo para este controle G. Copie meu texto, baseado em, dentro disso. E, finalmente, para a viagem esquema e quando usar cópia, eu vou selecionar todos eles. Aperte o Controle G e a base bem aqui. Então o que eu vou fazer com esses é antes de tudo, eu vou desagrupá-los porque nós não precisamos mais desses efeitos de pairar. E é por isso que os coloquei nessas pastas. E para este, vamos habilitar a pilha. Eu vou realmente usar esta pilha assim. E eu vou usar essas configurações. Então, para descartar, vamos ver. Então viagem de bem-estar. Estamos, vejamos 420 na altura. Primeiro, vamos ajustar a mesa para 420. Então eu vou usar estes e ajustar e altura para 420 assim. E o preço e o esqui vão, obviamente, acompanhar. Então vamos movê-los assim e ver de onde eles estão da morte daqui. Então este é 40 para baixo. Então vamos ajustar a mesma coisa para as mortes. Então, alinhe-os assim, 1234, então, para baixo, o que é bom. E agora vamos ajustá-los rapidamente em largura. Então eu vou simplesmente ajustá-lo assim. Vá para os cruzeiros. Selecione todos os três, ajuste-os em largura como este. E, claro, se uma de suas imagens precisa ser ampliada, por exemplo, esta se você quiser focar uma área diferente ou esta, você pode simplesmente clicar duas vezes porque não importa, porque agora não temos mais dívidas que essas efeitos de pairar. Então, basicamente, isso é o que fizemos até agora. Com os nossos parceiros. Eu vou posicioná-lo no centro e com esses logotipos, por exemplo, o que eu posso fazer é ampliá-los um pouco, na verdade moveu-o bem em torno de dois aqui. Talvez Nan Dan simplesmente corte isso aqui. E agora os usuários podem usar seus dedos para rolar para a esquerda e para a direita, porque mais uma vez, eles estão nos tamanhos dos tablets. Para este. Vamos simplesmente fazer a coisa que fizemos anteriormente. Então, basta ajustar nossa imagem assim. Certifique-se de que isso esteja alinhado com a borda que está. A imagem parece boa, então não há necessidade de mudar isso. E para o texto, simplesmente alinhe-o ao centro assim. E nós vamos ajustar nosso botão, certifique-se de movê-lo para aqui, mantenha pressionado Shift, e então há Hover, fazer a mesma coisa assim, voltar para o estado padrão. E agora, finalmente, o que eu vou fazer, escolher o botão, ir para o protótipo e simplesmente se livrar dessa capa usando nenhum. Então ele não sabe para onde ele deve ir e ele não vai criar qualquer tipo de animação. Para estes. É exatamente a mesma história, então simplesmente alinhe-os assim. Vou usar o meu texto mais uma vez, posicioná-lo aqui. E talvez eu possa até ir um pouco menor com este texto, então é aos 24. Então vamos ver o que podemos fazer aqui. Podemos, por exemplo, ir com 18 e o que usamos ali. Então esta cor, então mais uma vez, 18, esta cor, e simplesmente alinhe-a aqui mesmo. Acho que parece bom o suficiente. Agora, para este, vamos simplesmente ajustado para ouvir e os usuários podem rolar para a esquerda e para a direita. Isto é para a linha da grelha? - É. Finalmente, para este, e isso é um pouco complicado para que você possa reduzir o texto que você colocou dentro daqui. Então eu vou simplesmente, primeiro de tudo, ajustar nossa posição de texto para o centro assim. Então eu vou ajustar todo o meu texto, certifique-se que ele vai para as bordas da linha de grade como este. Certifica-te de que isto está no centro. E eu vou clicar duas vezes aqui controlar V e colar. Um pouco menos de texto e, em seguida, antes, então eu simplesmente cortar um corte que o texto para baixo um pouco, apenas para que não seja muito esmagador para ler em seu dispositivo tablet. E vá para o protótipo. Vou selecionar Nenhum daqui. E voltar ao conteúdo do design. E então, para as perguntas comuns, nós realmente vamos alinhá-los aqui mesmo. O que você pode realmente fazer é, vamos deixar isso para o próximo vídeo porque eu quero entrar em um pouco mais de detalhes sobre isso. Mas basicamente o que vamos fazer é para cada um deles, vamos, e vamos começar com o estado padrão. Agora. Vou mover meu botão Fechar até a borda. Então, neste, e eu vou posicioná-lo bem aqui. Mas como você pode ver, ele continua movendo meu divisor, ele continua mudando isso. Então, 6, 8, 2, 4, todos esses divisores. E você pode saltar para dentro, abrir todas as suas pastas, dividir 60 para fazer esse salto dentro deste 162, e finalmente saltar para dentro deste último 1682 e rebanho leiteiro. Mas como você pode ver, agora que se você mudar o divisor, ele não moveu o ícone. Então é por isso que eu continuo dizendo para esses divisores, É, Eu acho que uma opção muito melhor para usar. Formas são adicionadas nessas linhas. Então vamos ver onde colocamos o primeiro na linha. Faça muito mais com apenas um pixel. E vamos fazer o mesmo por este. Então, um pixel dentro. Eu não vou selecionar isso. E você pode ver que eles são um pouco difíceis de selecionar só porque eles estão fora do nosso quadro de arte. Então, são as perguntas comuns. O meu verdadeiro protegeu o primeiro que fizemos. Então mova-o divisor, tudo bem. Ícone de roupas. Então eu vou usar minha tecla Shift e usar minha tecla Shift para este simplesmente para empurrá-los para dentro. Então eu vou usar nesta posição aqui mesmo. Vou fazer zoom duas vezes e vou usar este. Então eu realmente não sei o que está acontecendo hoje. Adobe XD realmente não, quer trabalhar comigo. Então está tudo bem agora. E, finalmente, para este, vamos clicar nele. Então, mais uma vez, vou usar minha tecla Shift. Normalmente eu não tenho tantos bugs ou tenho poucos aqui e ali, mas porque eu estou gravando isso, provavelmente é por causa disso. Por isso, agora que temos todos os nossos textos, teremos de os ajustar. E vamos fazer isso no próximo vídeo e basicamente terminar esse design com essas seções na parte inferior. Então, vemo-nos lá. 47. Criação de design responsivo 11: Vamos em frente e finalmente terminar esta página. Então, como eu disse, o que vamos fazer é ajustar o texto para todos eles. Então, para fazer isso, eu vou simplesmente esconder todos esses de baixo. Eu faço isso ou vamos simplesmente reduzir a obesidade são conhecidos apenas para que este layout na parte inferior permanece como ele é e nos dá espaço suficiente. Então eu vou trazer isso de volta assim. E eu vou usar o recurso de altura automática e quando simplesmente trazê-lo assim. E porque havia duas linhas de texto, ainda vamos mantê-lo em 202 vezes. E então eu vou trazer o próximo e depois trazer isso. E porque nós temos três linhas de texto, eu vou clicar aqui e ajustado e certifique-se apenas de manter três linhas de texto como o worm. Então traga isso de volta para aqui. Vamos ver se Dan se encaixa. Não traz simplesmente este sensor. Ainda temos três linhas, Texto, clique duas vezes em 0 aqui para se livrar dele. E depois ir para os parceiros. E vamos ajustar isso. Então, trazendo isso, clique aqui. Ajuste isso e certifique-se de que temos duas linhas de texto. E viagens de turismo. Ou vamos fazer apenas viagens. Então temos que nos livrar deste texto aqui, Trips. E vamos aproximar isso bem ali. E finalmente, para as viagens personalizadas, e é injusto e aquele. Então precisamos ter três linhas de texto clique aqui. E vamos ver o que podemos inventar. Então ele vai troll condições alimentos. Na sua viagem. Vamos fechar esta última linha e o hábito de laticínios. Então é isso que vamos fazer por todos eles. Por isso lembra-te, fechamos este. Ou melhor ainda, ainda podemos movê-los assim. Então vamos verificar o que tínhamos aqui em termos de espaçamento. Então, entre esses dois, temos 60 e entre o texto e o divisor na parte inferior temos 40. Então vamos agora voltar para o estado padrão e vamos ver o que podemos fazer para que possamos copiar todos eles controle C. E podemos ir, minha viagem está protegida? Então é assim. Vamos deletar esses antigos. E vamos ver se está protegido por métricas. Vamos trazer isso de volta. Mais do divisor para baixo, torná-lo 40, fechar este e mover o resto deles para 60. Como este. E agora, como você provavelmente imagina, eu vou voltar para o estado padrão. Selecione Todos e, para baixo, Controle C, volte para a política de cancelamento. Então feche, encontre. Então traga-o de volta. Vou mover o meu divisor para baixo. Certifica-te de que são 40. Feche isso, selecione esses dois na parte inferior e mova-o assim. Vá para o estado padrão e eu nem preciso porque eu já o copiei. Fizemos a política de cancelamento. Nós fizemos é muito reprodutivo. Vá para escolher seus parceiros, Controle V colar em tudo. E finalmente, enquanto estou aqui, um objetivo bem aqui para viagens personalizadas e baseado lá também. Então ele pode ser ajustado um pouco mais tarde, vamos escolher seus parceiros, clique aqui. Então, parceiros, eu vou trazer isso de volta. Vou mover a minha divisória agora. Certifica-te de que são 40. Finalmente mover viagens personalizadas para baixo. Certifique-se de que são 60, e, finalmente, ir a viagens personalizadas e abrir a última. Viagens personalizadas, trazer isso de volta, mover seu divisor assim. Então agora vamos em frente e animá-lo. Então vamos para o estado padrão. Dentro do nosso protótipo está você pode ver que ainda os temos, o que é ótimo. Então eu vou clicar bem aqui. Então temos guia ou China Made Easy agora 0,6 segundos, o que é ótimo. Vamos agora seguir em frente e passar para o próximo estado. Então eu vou para é minha viagem protegida, eu vou para guia ou para animar, facilitar dentro, fora, voltar para o estado padrão, fácil e fora 0.6 segundos e quando clicar aqui. Então, política de cancelamento, eu vou para a política de cancelamento. Parceiros. Ir para parceiros e, finalmente, viagens personalizadas. Ir para viagens personalizadas. A política de cancelamento da minha viagem está protegida? Padrão, cancelamento, desculpe, é o açúcar protegido por métrica para amadurecer protegido, e isso deve ir para o padrão. Obviamente, é muito difícil, muito mais difícil e muito mais demorado quando você fala como eu estou fazendo. E isso obviamente vai ser muito mais rápido quando você está fazendo isso por conta própria. As perguntas comuns são protegidas por métricas? Vai para aqui. A política de cancelamento vai para aqui. Escolha o seu parceiro vai para o padrão. E, finalmente, como as viagens personalizadas funcionam vai para Viagens personalizadas. E agora vamos em frente e lidar com o último estado. Então, isto vai para aqui. Cancelamento vai para a política de cancelamento. Escolha seus parceiros. Finalmente, este último vai voltar para o estado padrão. E mais uma vez, parecia equipe trabalha com todos eles. Então, basicamente, em qualquer um desses tamanhos, você pode dizer ao seu cliente que ele tem que clicar em algum lugar um pouco fora apenas para que eles saibam que eles se sobrepõem. Então vamos para o estado padrão aqui, assim. E agora vamos trabalhar no nosso boletim informativo. Então vamos ver o que podemos fazer manchar um loop. Mas, por exemplo, para este e se atrasar para soneca. Vamos ver. Talvez possamos colocar isso no centro assim. Traga isso aqui. E então para o botão de assinatura, podemos ir para o protótipo e podemos simplesmente nos livrar do pairar. Volte para Design. E para a entrada em si, vamos trazê-la de volta. Então vamos usar 84. Então, na verdade, vamos assim. Agora vamos assim. E então para este botão, o que podemos fazer é simplesmente ampliar um pouco. E lá temos. E eles simplesmente trazem para cá. Faça o mesmo com o Hubbard aqui. Então são 53 porque eu quero manter esse mesmo texto. Se você não fizer isso, você pode simplesmente digitar o e-mail aqui e depois mantê-lo assim. Estamos a 60 e aqui estamos a 150 por isso. E agora, finalmente, para terminar esta página, vamos começar a trabalhar no rodapé. Mas antes de o fazermos, vou clicar duas vezes aqui e expandir isto para que tenhamos espaço suficiente. Então o que eu vou fazer para o rodapé é eu vou começar com o óbvio. Vou trazer estes dois de volta para dentro. Vou trazer minhas informações de rodapé para baixo em um centro como este. E basicamente eu vou simplesmente agrupá-los um pouco mais perto, então nada muito importante. Vamos primeiro lidar com o nosso divisor. Então eu vou trazê-lo de volta aqui. Bem ali. Vou fazer a mesma coisa por aqui. Basta manter a tecla Shift pressionada. Então, para estes, vamos alinhá-los assim. Vá com a esquerda e veja. Talvez possamos apenas pensar. Talvez possamos trazer todos os malvados. Vamos ver, vamos usar Winter posicioná-lo no centro. Vamos com a posição de bem-estar. E aqui mesmo cruzeiros no centro e isto aqui. Então Derek Harris e finalmente quatro D's no que eu acho que devemos fazer é, por exemplo, para o texto inferior, talvez possamos usar este. Posicione isso no centro, assim. E, em seguida, trazer estes dois para outro grupo. E então eu posso usar a pilha lá e usar esta pilha posicionada bem aqui. E vamos ver o que podemos fazer. Por exemplo, 40. Vamos ver. Com este, posso ir com 40 assim e depois simplesmente estendê-los agora. Então Shift 1, 2, 3, 4. Vamos com o afundamento para as florestas. Então o turno um ainda é querer que eles se movem. Então vamos com o tanque inteiro. Então. O informante atingiu o controle D shift 1234. Expanda a minha sobreposição de cores e a minha imagem para baixo. Vou me livrar dessa cópia e depois voltar aqui. E para este fundo, eu vou, por exemplo, ajustado para aqui. Clique duas vezes dentro, mova esta direita para aqui para que eles sejam recuperados, rodapé é concluído. Obviamente, uma última coisa com que vamos lidar aqui é aquela imagem de fundo. Tão localmente conciso e posicionar essa garota no centro. Traga isso de volta, clique duas vezes aqui. E simplesmente feche toda esta página, assim. E lá temos. Terminamos agora de trabalhar neste tamanho. Então, este era o dobro do tamanho. E desculpe que esses vídeos são muito longos, mas eu realmente quero entrar em tantos detalhes quanto eu puder, apenas para dar a vocês todas essas opções diferentes ou opiniões diferentes, como eu fiz, por exemplo, para essas flechas aqui e todas essas outras flechas. Então eu quero dar a vocês duas opções e então você decide qual opção funciona melhor para você, seu cenário, seu projeto, seu cliente, dependendo do seu tempo que você tem neste projeto, dependendo do orçamento que você tem neste projeto. Então, certifique-se de se familiarizar com todas essas opções diferentes. Porque pode parecer a opção óbvia, como, por exemplo, esta seta aqui, ou eu vou fazer isso. Mas acredite em mim, em alguns casos, você não tem a opção de fazer isso. Você não tem a habilidade de fazer isso. Então você tem que fazer o contrário. Como eu mostrei a você, por exemplo, com essas setas e este botão para que o assunto, porque estamos desagrupados também, também garante sempre usar pontos de toque. Porque se você se lembrar bem aqui, se nós não usamos o ponto de tabulação porque nós temos a animação dentro da animação, ele não funcionaria, então nós realmente não seríamos capazes de fazer a transição. E estes, esta navegação aberta, por exemplo, para o segundo estado de sua navegação Doppler se não usássemos o ponto de toque em si. Portanto, certifique-se sempre de prestar uma atenção especial a todos esses detalhes. E como você pode ver, stack está funcionando muito bem aqui para nós porque ele ainda mantém 150 por tudo isso. E, a propósito, você pode simplesmente clicar aqui. Volte para aqui, como fizemos com todas essas etiquetas. E se nós rolarmos para baixo, você pode ver o espaçamento entre todos os nossos itens. E então você pode simplesmente ajustado para aqui. E ele vai ajustar o espaçamento igualmente, em todos os lugares ou como eu disse várias vezes, você pode usar o espaçamento diferente para todos os seus itens. Então é isso para este tamanho, como eu disse na próxima série de vídeos, vamos abordar o tamanho móvel, que vai ser o tamanho final. E depois disso, vou compartilhar com vocês como começar a compartilhar com seus clientes, desenvolvedores e colegas de equipe. E então, finalmente, vamos começar a exportar opções. Então, vemo-nos lá. 48. Criação de design responsivo 12: Vamos em frente e terminar nosso processo de design responsivo criando um tamanho móvel. E como eu disse, o tamanho móvel vai conter provavelmente a maior quantidade de mudanças. Então vamos segurar nossa chave antiga e duplicar essa assim. E eu vou fazer é o mesmo de antes. Copie este texto, clique duas vezes aqui, e eu vou remover este texto todo o caminho até aqui. Então vamos ter quatro colunas. Vai ser 30, 60, 120. Então vamos rolar um pouco para baixo. Então, quatro colunas. Então vou checar mais uma vez, 30, 60, 120. Então vamos fazê-lo no 3061 e isso vai ser 203061. Não sei por que continua fazendo isso. Como você pode ver, é realmente complicado, mas este é o problema. Esqueci-me de me trocar. As larguras são 375, sahib tem 375. E vamos verificar agora. Então 30, 60, 120, então 3061, e finalmente 20. Então, lá temos. Assim que você consertá-lo, ele vai funcionar muito bem. Então vamos começar como de costume com estes no topo. Então eu vou fazer, eu vou fazer é mover o logotipo bem aqui. E também vou reduzir os dois assim, por exemplo. O que eu também vou fazer é trazer o meu ícone de menu. Empurre assim. E nós também vamos ter certeza que ele está bem ali, assim. Então, dentro do nosso estado padrão, eu vou trazê-lo para dentro. Então deixe-me abrir. E vamos ver, eu posso reduzi-los para 40, por exemplo, é pontual isso. E então eu posso usar meu ponto Tab, que é todo o caminho bem aqui, e posso estender, colocá-lo aqui e bem aqui. Traga-o. Apenas um toque como sujeira. E o que eu realmente vou fazer é fazer a animação mais uma vez porque é muito mais simples do que isso. Então desagrupe o componente Control G. E eu vou chamá-lo de ícone de menu mais uma vez. E vamos posicioná-lo mais ou menos por aqui. Ou melhor ainda, podemos ir para esta borda para que tenhamos um pouco mais de espaço para brincar aqui. Então a tecla Control e eu podemos criar um novo componente, mas porque temos o mesmo nome, e eu vou fazer é ir menu, ícone, celular, em seguida, pressionar Control K. E então ele vai nos mostrar, ele ainda nos impede de editá-lo Bem aqui. Então eu vou ter que editá-lo aqui mesmo. Então vamos ter que saltar para dentro. Em, criar, estado clicado. Dentro do meu estado clicado, como de costume, trarei isto aqui. Traga isso aqui. Esconder primeiro, terceiro 1 clique ano de idade. Traga-o para o centro, toque duas vezes para reduzi-lo para 0. E, em seguida, mude para, por exemplo, 45. Mude isto para 45 também. E ir do estado padrão para coletar estado. Acho que funciona muito bem. Vou apertar “Delete”. Volte para aqui, veja como fica lá dentro. Então estado padrão, estado clicado, que funciona bem. E vamos ao protótipo. E vamos ver o que temos aqui. Então eu vou, vamos ver. Clique no separador Transferir, animar automaticamente. Estado está inout 0.4 segundos. Vamos mudar isso para facilitar a entrada e saída 0.4. Se você se lembrar que isso está indo um pouco mais rápido do que toda a animação, então vá para o estado clicado. Eu vou fazer a mesma coisa. Clique aqui e vá para o estado padrão 0.4. Isso é bom. E, finalmente, vamos visualizá-lo rapidamente e você pode ver como nossa janela de visualização é pequena agora. Então, quando eu clicar aqui, desculpe, eu tenho que mudar para estar aqui. Então vamos fazer isso primeiro antes de verificarmos isso. Então primário padrão agora borrão Eu vou reduzi-lo para 375 como dívida. E eu vou para a navegação primária, eu vou, vamos ver navegação secundária. Na verdade, vamos estender nosso borrão para que eu possa ver o que estou fazendo. Estendido até aqui, por exemplo. E vamos ver o que estamos fazendo. Então, onde é o ponto de corte bem aqui? Então eu posso realmente trazê-lo para baixo apenas por agora. E vamos ver o que realmente vamos precisar bem aqui. Tão secundário, agora vou trazê-lo. Vou trazer os meus itens do menu. O Dan. Vou levá-los para o centro, para ter certeza que estão um pouco menos para baixo. Então Shift 1, 2, 3, 4. E dentro deles porque estamos usando pilha, eu vou reduzi-los para 40, por exemplo. Então são 40 entre cada um de nossos itens, como você pode ver. Finalmente, eu vou trazer isso de volta para 40 também. E um que vou fazer aqui porque não temos espaço suficiente. Vou simplesmente desagrupá-los. Mas chame-o de navegação secundária. Então copiar faz no controle de grupo G para agrupá-los e, em seguida, torná-los em uma pilha como esta. Certifique-se de que estamos em um centro e certifique-se de que somos um 40. Para este pilhas ou navegação secundária, eu também vou usar 40, mas por exemplo, vamos descer para 60, apenas para que tenhamos um pouco mais de espaço. Finalmente, para o nosso facilitador principal, não precisamos que ele vá até o fim para ousar. Então, por exemplo, podemos cortá-lo em algum lugar por aqui. Então vamos com 100. Por exemplo. Vamos ver 10, 5, 1 ou 2. Centenas, então rebanho leiteiro. Então o que eu vou fazer obviamente é que eu vou trazer todos eles. Controle C, clique em estados, eu vou para o Controle V, em seguida, trazer isso para baixo, então escondê-lo. Eu estou indo para ir para o meu menu de navegação principal agora mais bile clique bem ali e, em seguida, ir para o meu estado padrão e eu vou esconder todos eles. Então, navegação secundária e itens de menu, eu vou trazê-los para baixo para 0. Desfoque de navegação principal. Eu vou trazê-lo até 1, como este em altura. E então o que vou fazer é usar o meu protótipo. Então temos o protótipo ali, clicado. Isso nos traz de volta porque nós o mantemos no ícone do menu. Então, se eu abrir, temos os pontos de toque do menu. Nós não mudamos para apenas mudar o espaçamento para ele e apenas para colocar. Então vamos ver se o ponto de guia do menu está bem aqui. Vamos ver se está bem ali, o que é ótimo. Vá para o estado padrão hit Preview, e vamos ver com o que estamos trabalhando aqui. Então clique. Temos aquela grande animação. Então vamos ver estado padrão, estado clicado e isso está mudando. Então algo não está certo, bem aqui. Vamos verificar isso. ponto de toque do menu de navegação principal nos leva ao estado clicado. E o estado do clique nos leva ao ponto próximo primário, ponto MiniTab. Quando clico ali, leva-nos ao estado predefinido, está bem? Então, facilidade em 0,6 segundos. Vamos ver se esse é o caso do primário. Então 0,6, como você pode ver, isso é ótimo. Então, agora, quando eu apertei a pré-visualização, ele deve funcionar muito bem. Aí está, porque não estava conectado. E Dan, quando eu cliquei nele, ele apenas animou o ícone em si sem todos esses outros. Então vamos agora seguir em frente e eu vou voltar ao design aqui, e eu vou trabalhar na minha imagem de herói antes de tudo. Então vamos ver o que podemos fazer primeiro, vou saltar para dentro daqui e trazer tudo isso de volta. Como assim. E porque é muito mais fácil. E então vá para o meu estado padrão de imagem de herói. Vou trazê-los assim. E rebanho leiteiro. E finalmente, o número da imagem para trazê-los assim. Então, todos eles parecem bastante coerentes. E eu não acho que precisamos muito desse espaço, mas vamos explorar e ver o que podemos fazer. Então, primeiro as coisas, este texto obviamente vai precisar ser muito menor. Então, para este primeiro, vamos usar 18 para este top. Então ele tem máscara de texto de imagem de herói de estado padrão. Por isso, para este texto, teremos de ir com 18. Vamos mudar para 18 e, em seguida, azul principal e ver o que temos aqui. Então eu vou movê-lo para 10, por exemplo. E para este, vou criar um novo de 80, como sujeira. E vejamos, talvez isso não seja o que eu quero. Talvez eu possa aumentar para 120 ou em algum momento que vamos ver. Acho que isto é muito pequeno. Então vamos primeiro de tudo realmente voltar aos tempos em que eu. E então você traz todos eles para o centro e vê com o que estamos trabalhando? Meu pai e quando ir e trazer meu botão também. Como isso. Posicione-o bem aqui. Então vamos ver com o que estamos trabalhando aqui. Então, eu vou expandir isso porque se você se lembra, nós os extraímos quando desligamos o interruptor, como fizemos para todas essas setas na parte inferior. Então eu vou movê-lo para cá. Então eu vou remover este aqui porque nós não precisamos dele porque ele não está mais lá. E, em seguida, selecione os textos como o botão, certifique-se de que está no centro. Então eu vou mover minhas flechas para estar no centro também. E vamos ver pela distância, porque era 18. Agora vamos reduzir para 60, por exemplo, n, Isso deve ser um pouco menor, mas vamos começar a trabalhar nisso também. Então, por enquanto, o que vou fazer é mudar o texto. Vamos ver se escondo o nosso equipamento de navegação principal. Vamos esconder o nosso equipamento de navegação inferior para que não nos distraia. Na verdade, não precisamos porque é lá embaixo. Então, para a nossa imagem de herói, eu vou primeiro de tudo, clique duas vezes em minha Pequim, clique aqui e então vá 120 por exemplo. Funciona, mas acho que não vai funcionar para a Gada dela. Então, se formos com 80, acho que é um pouco pequeno. Vamos lidar com isso. Então, eu não sei, eu não gosto muito disso. Então, é totalmente 100 por este. Acho que vai ficar tudo bem. Vamos ver 20. Vamos brincar com esses outros. Então vamos ver quem dugata. Então, primeiro de tudo, vamos trazer nossa mesquita para que possamos fechá-la bem. Como este. Eu vou posicioná-lo assim apenas para as bordas de nossos textos como este. Então eu vou trazer o meu segundo texto e eu vou escondê-lo sólido C, e este é 100. Então vamos em frente e criá-lo aqui mesmo. Então vamos esconder o texto número 1. Então eu vou com Paris. Clique aqui e escolha 100. Lá vamos nós. Vou clicar neste e escolher 18 e depois ir azul principal. E mais uma coisa que quero verificar é a distância entre estes dois. Então acho que coloquei 20 no hábito árabe. Então esconda. E eu vou mostrar isso, ter certeza que eles estão centrados como essa posição, este veado. E, finalmente, trazer o texto de Paris a uma distância de 26º 1789, 120, assim. Lá vamos nós. E vamos ver, este é 18, este é 100, o que é bom, e então simplesmente esconde-o e traga o texto número 3. Então mostre-o e depois traga-o. Vou clicar neste. Então, mais uma vez, estamos em 18, posição azul em estão bem ali e isso vai ser 100. Vamos ver se funciona. Faz 17, 18, 20 assim. E a última coisa que eu quero fazer é mudar nossa máscara um pouco porque vai cortar nossos textos de Haggadah para que eu possa mudar de ponta para ponta. Então daqui até aqui até o ego deles. E finalmente o que posso fazer é trazer todo o meu texto. Vamos ver. O número três está bom. O número dois está bom. número um não é bom porque temos de mudar isto para este azul. Portanto, antes de avançarmos com nossos textos, o que eu gostaria de fazer é reduzir a altura geral de nossas imagens. Então o que eu vou fazer é selecionar todos eles porque você pode ver onde eles estão indo e talvez movê-lo para algum lugar, algo por aqui talvez. Agora vamos trazer nossa navegação principal. Podemos ir com os textos, então mesquita de texto e podemos mover nossa máscara de texto para cima. E isso segure a tecla Shift e, em seguida, simplesmente use , por exemplo, vamos ver onde isso termina? Bem por aqui. Mova para baixo AT e, em seguida, mova o resto deles AT. Então vamos ver, onde está nossa mesquita de texto aqui é 80, e então estes são 60. Se selecionarmos o nosso botão pairar aqui estamos em 60, o que é ótimo. E a última coisa que eu quero mudar é essa seta simplesmente empurrá-la bem aqui e entalhe e este só um pixel aqui. Agora que isso está concluído, o que vamos fazer é animar o resto deles. Mas antes de fazermos isso, ainda não gosto de como isto parece baixo. Então eu vou fazer uma duplicata de minhas flechas e ir 80 pixels para baixo e então trazer tudo isso de volta em mais uma vez aqui. Então, onde ele corta com nossas flechas, então eu vou remover a cópia de nossas flechas. E lá temos. Então agora temos imagens de heróis muito mais concisas. Então a próxima coisa que eu quero fazer, porque nós vamos obviamente reanimar a coisa toda é brincar com nossas imagens. Então, nossa primeira imagem, eu vou realmente ajustado para algo assim. Talvez, vamos ver qual ângulo é melhor. Talvez este esconda. Então faça o outro para Paris. Então eu vou clicar aqui e, em seguida, simplesmente usar este. Assim, ou talvez até mais para aqui só para que possamos ver que é, é um mais raro. E finalmente, este terceiro, o que você quiser, eu vou colocar essas pessoas neste quintal, por exemplo, em segundo plano. E lá temos. Então eu vou trazer tudo para dentro e eu vou chamá-lo, Vamos primeiro colocá-lo em um grupo. Vai ser muito mais simples para nós. Então imagem herói, quando chamá-lo de herói imagem móvel. E, em seguida, desagrupe este componente, pressione a tecla Control. E para este primeiro componente que eu vou fazer é obviamente esconder meus dois textos para baixo. Então eu vou tirá-los do caminho. Tudo bem por aqui, então está tudo bem, desde que eles não sejam visíveis para aqui. Então vamos criar um estado adicional e chamá-lo, por exemplo, vamos chamá-lo de vírus. E para Paris, vamos para a mesquita de texto. Mova nosso segundo texto para dentro. Certifique-se de que está alinhado como dat. Mova nosso primeiro texto para fora da baleia e da sujeira e crie outro texto e outro estado chamado dados. E por isso, obviamente, mova nosso terceiro texto. Eu fiz. E mais um segundo texto lá fora. Eu recebo. Finalmente, vamos animá-lo. Então vá para o protótipo, vá para a imagem do herói, e quando ir para as setas, seta direita apontar toque, vamos para Paris, 0.6. Vá para Paris. Flechas. Esquerda vai nos levar para o estado padrão e um direito para nomear vai nos levar para manter dados. E, finalmente, os mesmos quatro que, independentemente. Então eu vou clicar bem aqui. Flechas, ponto de definição esquerdo vai nos levar a Paris. E um ponto de tabulação certo não vai nos levar a lugar algum porque esse é o nosso estado final. Agora, finalmente, vamos lidar com as imagens. Então, no estado padrão, estamos mostrando Pequim, no estado de Paris. Na seção de design, vamos realmente esconder este e mostrar Paris. E no estado de Haggadah, vamos esconder os dois. Eu fiz e apenas mostrar Calcutá. Finalmente, vamos editar a área de trabalho. Veja se funciona como deveria. Aqui está. Para clicar bem ali. Como você pode ver, ele vai até o fim, que eu não me importo, você pode redistribuí-los se você quiser posicioná-los para a esquerda e para a direita. E, alternativamente, você também pode baixar a altura deste texto e colocá-lo para ser assim. Ainda temos o pairado aqui para que possamos nos livrar disso se quisermos. E eu vou fazer isso em um segundo. Mas, por enquanto, vamos simplesmente explorar estes e ver o que temos. E eu realmente gosto de como isso parece. Então, antes de avançarmos, vamos verificar rapidamente. Então vá para o estado clicado e vá para dizer navegação secundária e vá para o protótipo. Vamos nos livrar desses efeitos de pairar. Não vou a lugar nenhum com isso. A mesma coisa para este, então não vá para nenhum. E finalmente, a mesma coisa para este, não vá para nenhum. Então agora não temos nenhum efeito sobre estes. Agora, finalmente, para esta próxima seção, o que eu vou fazer é eu vou realmente redistribuí-los bastante. Então em um, de um lado, eu vou ter destino e digitar abaixo, eu vou ter atividades. E abaixo disso nós vamos ter pesquisa em si. Então, você pode animar a pesquisa neste ponto, se você quiser. Eu não vou fazer isso. Vou simplesmente posicioná-los ali para o fundo. Agora, como eu disse, vou posicioná-lo bem ali. Então é a busca por viagens e quando realmente movê-lo para baixo abaixo dos destinos. Vou alinhá-lo à nossa grelha assim. E eu vou me livrar da minha divisória. Destinos. Bg vai dar a volta por aqui, por exemplo. Então, em algum lugar no centro, talvez aqui. Vamos ver. Eu gosto disso. Em seguida, ir para cidades, destino o piloto e simplesmente trazê-lo de volta. Só um toque. É óbvio que a máscara vai ser um pouco maior para algo assim. Então eu vou obviamente copiar tudo isso Controle C e ir para o controle estado clicado V. E vamos ver, eu vou ter que realmente voltar cópia interrogando. Então não apenas elementos de dentro da máscara. E remova o velho clique aqui e estenda minha máscara até aqui. Então o que você pode fazer é realmente estendido para mais ou menos por aqui, ir duas direções, bg, onde é aqui? É estendido até aqui, por exemplo. E então simplesmente expanda nossa mascote um pouquinho mais. Expanda isto para aqui e depois vá para aqui, e depois traga-o até aqui. Então, esta seção inteira é rolável com esses três itens e, em seguida, os usuários terão que tocar e, em seguida, rolar para baixo através de todos esses itens adicionais. Então, estado padrão. Agora vamos trabalhar no nosso tipo. Vou alinhá-lo assim. Eu também vou me livrar do meu divisor porque eu não preciso mais dele. Obviamente, eu vou usar BG ou todo o caminho até aqui. Vou expandir a nossa máscara até aqui. Posso até ir até o fim da página. Realmente importa. Então vamos ver, para o genótipo, vamos primeiro fazer a mesma coisa. Então vamos mostrar, vamos ver, 123. Então vamos mostrar três dessas viagens. Feche-o muito bem, atreva-se. E então, finalmente, vamos ver se expandimos nosso BG. Vamos primeiro ocultar nosso botão Aplicar. Cbg e linhas vão mostrar corredor bem ensopado, tudo bem. Agora vamos em frente e copiá-lo. Vá para o estado clicado com base em excluir o antigo e simplesmente estender isso para baixo. Tudo bem, por aqui e vá com nossa máscara e expanda nossa máscara até aqui, por exemplo. Volte para o estado padrão e eu vou usar minhas atividades, posicioná-los aqui. Vamos ver que somos 20 por exemplo, para este você pode posicioná-lo para 40 se você quiser. Na verdade, tudo depende de você. Vou me livrar do nosso divisor porque não precisamos mais dele. Atividades. Vou expandi-lo até aqui e a máscara que vou expandir para ouvir porque estamos simplesmente ajustando nosso espaço agora para as atividades em si. Clique rapidamente ali e vamos cortá-lo para três. Então, por aqui. Aí está você. Vamos ver, máscara VG, tudo funciona bem. Então copie-o, vá para o estado clicado, Baseie-o em, exclua o antigo. E finalmente expandir nossas atividades no caminho até aqui, e expandir nossa máscara até aqui. Finalmente, vamos voltar ao estado padrão e usar a pesquisa de viagens. E eu vou posicioná-lo bem aqui, ter certeza que são 20. E nós temos o fundo agora VG, que obviamente não vamos precisar mais. Então, para a busca em si, o que eu vou fazer é expandi-la aqui mesmo. E eu vou, vamos ver, usar o fechamento. Vamos trazê-lo, ver como se parece. Posicione-o aqui 20 pixels e, em seguida, reduza o tamanho. E eu posso realmente usar todos eles como este Controle C. Então ir para o meu estado clicado, apertar o Controle V, eu removo os antigos. E eu vou simplesmente trazer isso de volta e girar um pouco assim. Então vá entre o estado padrão e clique, e eu acho que está tudo bem. Finalmente, para o botão Aplicar, eu posso movê-lo para baixo para aqui. Posso ter certeza que são 20. Posso expandi-lo até aqui e Derek fica com ele. Então, 20. Vamos ver, este tamanho de texto é 18, este é um 24. Então talvez devêssemos baixar isto para 18, ter certeza que é branco assim. E finalmente, vamos agrupar todos eles como alguns. Mas ele também pode fazer é fazer a mesma coisa para este botão porque eu acho que é muito grande. Então vamos para o herói, botão herói. Explore agora, simplesmente ajustado para 18 anos. Volte para trás. Certifique-se de que está no centro. E o que você pode fazer é, na verdade, você pode clicar e copiá-lo se quiser. Mas como você pode ver, ele aplicou-o muito bem em todos os nossos estados porque nós o alteramos no estado padrão. Então, aqui temos, Isso é tudo para esta seção. A última coisa que quero fazer é ajustar aqui. Como você pode ver, estamos em 26, então talvez eu possa ir até Turley e depois 40, só para termos um pouco mais de espaço para brincar. E, finalmente, quando eu bater pré-visualização, Eu vou ampliar esta posição no centro. Então isso funciona como deveria, o que é ótimo. Quando você clicar neste, ele vai mostrar três e você pode rolar para baixo se você quiser. E você clica neste. É a mesma coisa que funciona muito bem. Clique neste. Funciona muito bem. E finalmente, para a busca, temos essa animação agradável e podemos aplicar filtros. Então é isso para este vídeo, e é isso para essas seções que são basicamente as partes mais chatas de todas. No próximo vídeo, vamos seguir em frente e refazer algumas dessas outras seções e eu vou mostrar a vocês o que nós também podemos fazer. Finalmente, uma vez que terminamos a versão móvel e o tamanho do celular, vamos abordar este espaçamento um pouco. Então, 150 para o celular, é obviamente demais porque, como você pode ver, reduzimos o tamanho de praticamente tudo aqui. Então eu vou fazer o mesmo para a versão móvel também. Então é isso para este vídeo e eu vou vê-lo no próximo quando vamos continuar com essas mudanças. 49. Criação de design responsivo 13: Vamos agora continuar trabalhando neste layout. E vamos começar com a oferta especial. Então vamos basicamente fazer a mesma coisa que fizemos lá em cima. Então, para este primeiro, eu vou reduzi-lo para 100, trazê-lo para quase preto. E para este segundo eu vou usar 18 e, em seguida, usar cinza escuro. Vou certificar-me de que ambos estão centrados e depois centralizá-los assim. Porque agora eu não sou capaz de encaixar o texto fisicamente dentro. Vou ainda mais longe. Então eu vou com 80, por exemplo. E, em seguida, usar 64, a distância. Acho que vai ser estrangeiro ou não. Vamos até com 40. Então este é, este é 18 e este vai ser 80. E agora porque este é o nosso novo, vou simplesmente clicar aqui para adicioná-lo. E para todas essas seções vamos usar 80 e depois 18. Então vamos em frente e se eu clicar aqui, você ainda pode ver que ele ainda mantém 150 distância. Então o que vamos fazer com este, obviamente porque agora temos esses cartões e temos essas ofertas de primeira e última hora. O que vou fazer primeiro é brincar com estes. Então, antes mesmo de começarmos, eu quero rapidamente acertar um conteúdo, ofertas especiais, dispositivos móveis assim. E eu vou obviamente desagrupar este componente. Agora, por enquanto, eu vou usar e guias. E eu vou fazer algumas mudanças aqui e ali. Então eu vou posicionar este cronômetro bem aqui para o topo e, em seguida, usar, por exemplo, 10. E então eu vou simplesmente usar o primeiro minuto. Vamos ver o que podemos fazer. Posicione bem aqui. Acho que isso não funciona. Então vamos usar, por exemplo, 18 volts. Hábito de leite de 18 volts. Ele funciona muito melhor e, em seguida, simplesmente adicioná-lo a Estilos de Caracteres. Agora, vamos fazer o mesmo para este, então alinhá-lo. E eu vou, em primeiro lugar, ajustar nosso ícone para o topo é o 10. Clique aqui e vá com 18 volts, e então simplesmente mude a cor para cinza claro. Vou usar uma mensagem de última hora lá dentro. Você tem isso. Agora o que eu vou fazer é criar o retângulo e eu vou ter certeza que tem duas colunas de largura. Eu fiz. Eu vou selecionar todos os três posicionados no centro e simplesmente garantir que eles se encaixam bem aqui. Vou remover meu retângulo e fazer o mesmo aqui. Então, selecione um retângulo como este, certifica-se de que todos eles estão no centro. Selecione todos os três. E aí você removeu esse retângulo. E se eu simplesmente olhar para ele, certifique-se de que eles estão posicionados como eles deveriam, como eles estão bem aqui como você pode ver. Então, tudo está alinhado corretamente. Então, agora que as guias estão terminadas, seu trabalho em nossa oferta de primeiro minuto, e isso vai ser regata. Então, em primeiro lugar, descartar obviamente não vai funcionar para nós. Então, o que podemos fazer, podemos saltar insight e, por exemplo, grupo, todas essas coisas. Em um grupo, incluindo o nosso cartão BG. Então vamos primeiro reduzi-lo para aqui, por exemplo. E é alta a imagem deles ver o que temos. Então eu acho que isso pode realmente funcionar. Então eu vou realmente escolher todo o nosso conteúdo. Certifique-se de que está alinhado assim. Vamos ver, somos sete, então 1, 2, 3 para ser 10 a partir desta borda. E vamos ver a seta. Vou posicionar a flecha nesta borda aqui, e agora precisamos da imagem. Então fui trazer minha imagem de volta. Vou expandi-lo até aqui. E vamos ver. Agora vamos parar à esquerda e à direita e livrar-nos desta. E para a altura, vamos ver, talvez possamos ir com 150, ver como isso se parece. Acho que funciona bem. E talvez até 160, apenas para dar-lhe um pouco mais imobiliário tela, 160, lá você tem, n agora basta selecionar tudo. Vamos ver, e eu posso mover para baixo 20. Selecione o nosso carrinho e posicione-o até aqui. Então, mais uma vez, a imagem tem 1, 60 de altura, isto é 20, desculpe, 40 para baixo. E agora podemos brincar com o resto deles. Se você quiser, você pode ajustar o texto e você pode alterar o tamanho de todo esse texto. Mas eu não vou fazer isso. Vou selecionar nossa Tóquio e vou fazer a mesma coisa, mas antes disso, vou esconder isso. E eu estou fazendo tudo isso porque agora não vamos mais ter rolagem. Vamos ter rolagem para a esquerda e para a direita, mas agora não para cima e para baixo. Então vamos trabalhar em Tóquio. E vamos realmente trazê-lo até aqui assim. E vamos fazer o mesmo por todos eles. Vamos com Bali, movê-lo para aqui assim. E vamos trazer estes três. E vamos ver onde eles estão. Ok, então Paris está lá. É mais crack de NTP assim. E depois assim. E lá temos. Então eu vou reduzir a visibilidade de todos esses e eu vou apenas trabalhar em nossa Tóquio. Então, mais uma vez, a imagem é 160 e a distância é 40 entre estes. Então vamos escondê-lo. E em primeiro lugar, vamos trazer isso de volta para aqui. Assim. Então vou esconder a minha imagem. Vou trazer todas essas informações para o turno aqui. E uma vez, então eu vou trazer a minha imagem, ter certeza que tem 160 de altura. Vou expandi-lo até aqui. Então, para o nosso aplicativo e ver algo não está certo com o nosso quantum. Mova a nossa seta assim, e então basta verificar a minha imagem, certificar-se de que está tudo bem. É duplo clique em um ajustado para provavelmente por aqui. E, em seguida, escondê-lo muito rapidamente para que possamos selecionar tudo. Vamos ver 160, tudo bem. Selecione tudo e simplesmente mova-o para baixo 40. Ou acho que 20 vai ser um pouco melhor que 40. Então eu vou consertar a primeira carta em apenas um segundo. Então Tóquio está acabado. Abra o Haggadah e selecione todos eles, leve para 20, e feche isso. E lá temos. Vamos trabalhar no nosso Bali. Vamos trazê-lo de volta. Então, primeiro, traga o cartão oral para aqui, traga a imagem para aqui. Claro. Somos 55 mil assim. E certifique-se de que estamos 160, como dat, vou clicar duas vezes na posição para ser mais ou menos por aqui. Ou melhor ainda podemos, por exemplo, movê-los, ocultar nossa imagem e eu vou selecionar todos os meus itens, movê-los para aqui. Em seguida, dez pixels movem a seta. Então ele precisa de uma vantagem assim. Mostre a nossa imagem de volta, selecione todo o nosso conteúdo e traga-a até aqui. E, em seguida, fazer 20 e simplesmente usar nosso fundo e movê-lo para cima até que ele se encontre bem aqui. E então eu vou fazer o resto deles. Então deixe-me fazer estes três. Vou pausar o vídeo e depois voltar. E agora que temos todos eles, deixe-me mostrar o que vamos criar. Então vamos criar grupo rolável são os três primeiros para cada um, porque temos seis. Então, quando eles tocam no primeiro minuto, nós vamos ver este primeiro grupo rolável. E, em seguida, com a torneira de última hora, vamos então sentar o segundo grupo rolável. Então, para fazer isso, eu vou realmente usar Tóquio e Bali, movê-los para fora assim e ter certeza que eles estão. Por exemplo, vamos usar, vamos usar 30. Tire Bali do caminho, traga-o de volta. Vamos usar 30 também. Então eu vou agrupá-los, chamá-lo no primeiro minuto que isso e então eu vou escondê-los para que eu possa fazer o segundo stents. Então vamos trazer estes de volta, deslocados para fora. Certifique-se de que eles são 30, e certifique-se de trazer o tipo a, que vai ser em 30, bem como isso. E eu vou agrupá-los, chamá-los de última hora sobre isso. E então eu vou trazer o meu primeiro minuto clique bem aqui. Então eu posso criar um grupo rolável. E o que eu posso realmente fazer é trazê-lo para cá. Então, da borda à borda, porque temos um tamanho de tela menor e escondê-lo e, em seguida, fazer o mesmo para este. Então clique aqui, traga-o de ponta a ponta e chame-o de última hora. Então, para este primeiro estado, eu realmente vou reduzir a opacidade deste último minuto e quando trazer isso de volta. Então é com isso que vamos trabalhar. E finalmente, o que falta campo aqui são os botões. Então, obviamente, vamos trazê-los para cá. Como este. E vejamos, talvez possamos fazê-los chegar a 60 milhões. E vamos alinhá-los à borda esquerda fora de nossa grade. E vamos saltar para dentro dos dois. Então todo o primeiro minuto vamos reduzi-lo para 18 e, em seguida, cinza escuro. E faça o mesmo para todos os últimos minutos. Então, para trazer de volta os critérios, 18, cinza escuro. E eu vou me certificar de me livrar dessa cor porque nós não precisamos mais dela e quando fazer a mesma coisa aqui. E primeiro de tudo, vou certificar-me de que estes dois estão centrados. Que estes dois estão centrados. Traga isso para 0. Mas antes de o fazer, quero expandi-lo até aqui. Então certifique-se de que está no centro. Para agora reduzi-lo para 0. Vou mostrar este mais uma vez, clicar aqui e expandi-lo para aqui. Certifique-se de que está no centro. E então, finalmente, vamos medir mais uma vez. Então são 60, o que é bom. Este é em 0 obesidade, este é em 100 obesidade, o que é ótimo. E agora vamos criar um componente para este móvel ofertas especiais. Então aperte a tecla Control. E vamos clicar em criar uma nova qualidade de estado de última hora. Então, neste primeiro estado, não vamos fazer nada porque os usuários podem rolar para a esquerda e para a direita. E no último estado, o que você vai fazer é realmente fazer essas mudanças. Então, para as guias, vamos mudar isso para ser azul. E vamos mudar isso para ser cinza claro. Para este, vamos reduzir o primeiro minuto, aumentar no último minuto. E finalmente para os botões vamos esconder isso primeiro, aparecer, este último e conhecimento. Vá em frente e alterne de volta para o estado padrão, pressione a visualização e veja o que temos até agora. Então, aqui estão as ofertas especiais e carga levantada apenas por um segundo. Aqui está. Primeiro de tudo, quando eu clico primeiro e último minuto, mas eu deveria primeiro animá-lo, apenas me dê um segundo. Então vá para o protótipo, e eu vou selecionar este. Clique nele. Então vamos usar toque automático animar, facilidade de entrada, saída de última hora e 0,6 segundos. Então eu vou fechá-la. Volte para o último minuto. Clique aqui, toque em, e vamos para o estado padrão. Vamos trocar de volta agora. E agora, se eu pegar você e clicar aqui, você pode ver que transições bem entre o primeiro e o último Estados, o que é ótimo. E você também pode clicar aqui e arrastar entre esses estados. Então não sei por que não funciona aqui. Eu vou porque eu não mudei, eu não copiei. Então vamos fazer isso. Então, desenhe. No último minuto, vamos mostrar isso. E na verdade, sim, neste temos que esconder isso porque ele distrai de nossos usuários para poder clicar e passar o mouse. Então deixe-me mostrar-lhe “clique e arraste”. Note, então este é o primeiro. No último minuto, isso escondeu de você. É assim que parece. Primeiros minutos, tudo funciona. última hora, tudo funciona só porque o escondemos aqui mesmo de ti. Então agora vamos em frente e lidar com isso. Então vamos ver, deixamos no estado padrão, o que é bom para o vídeo promocional. Obviamente, eu vou reduzi-lo para aqui e trazê-lo de volta para aqui, por exemplo, para algo, algo pequeno e agradável como isso. E vamos ver, nosso ícone de jogo permaneceu o mesmo. Portanto, para a Europa, vamos basicamente fazer a mesma coisa. Então, primeiro de tudo, vamos trazer um título de seção. Vamos colocá-lo no centro assim, e vamos lidar com essas mudanças. Então, para a Europa, vou ver onde está. Então Muskoka, 18 anos, isso vai ser 18, cinza escuro. E deixe-me verificar o espaçamento aqui. Então, entre estes, é 40, então este é 18, este é ATN, o espaçamento é 40. Então vamos fazer isso aqui abaixo para a Europa. Então, apenas 20 para cima. Ou eu posso derrubar isso e vai trazer todo o nosso layout para baixo um pouco, o que é bom. E nós vamos obviamente ajustado um pouco mais tarde para o topo, ou eu posso até fazê-lo agora basta clicar aqui, depois voltar e ajustá-lo. Então vamos ver, estamos em 84 aqui, o que eu não gosto. Eu vou trazer para cima quatro pixels. Vamos ver. E, em seguida, trazê-lo para 60. Vamos ver onde estamos bem aqui. Então, temos 48 aqui, o que não é o ideal. Então vamos realmente fazer isso também. 40 por isso. Eu não gosto disso. Então vamos ver. Posicione-o aqui. Certifique-se de que são 60 e leve isso para 40. Acho que 150 para cima. Então, mais uma vez 60 e depois 40 aqui. Vou mudar para o último minuto, e vamos mudar de volta aqui. Se for necessário. Isto é 60, isto é 40. Então ele mudou no estado padrão, o que é ótimo. Agora vamos em frente e seguir em frente para aqui. Então o que eu vou fazer aqui é realmente extremamente simples. Vou simplesmente me livrar de alguns deles. Então, primeiro de tudo, vamos clicar em RCTs e eu vou fazer a mesma coisa. Simplesmente ajustado a esta onda. E eu vou ajustá-lo a esta borda bem aqui. Então o que vou fazer é entrar nas cidades. E agora, como podem ver, temos seis deles. Então eu vou me livrar de três e deixar três deles lá dentro. E o que eu vou fazer é basicamente ver onde ele precisa ser ajustado. Então, basicamente Paris, vejamos. Nós vamos ter que movê-lo como este foi apenas um pouco. E, em seguida, simplesmente expandir nosso cartão apenas um pouco. Então, todos esses itens como este. Então estamos basicamente movendo nossa imagem, nosso fundo, nossa seta e nosso botão. Tão alto que está trazendo a posição de Londres bem aqui. Então vamos ver. Só para ser preciso, abra-o, selecione estes três e simplesmente expandido para a borda assim. Esconda-o e simplesmente trazendo Roma. Isso é o que eu estava dizendo. Alguns, alguns deles estão ficando muito mais fáceis porque agora não temos nenhum efeito sobre o que nos preocupar. Nós só temos todos esses elementos para que possamos brincar com eles como quisermos. Você pode até reduzir isso para 20 se quiser. Então ele permanece o mesmo que é aqui no topo. Mas como essa imagem é maior, por exemplo, podemos baixá-la para 160. Então agora essas cartas vão ser quase exatamente as mesmas. Quero dizer exatamente o mesmo que estas cartas aqui no topo. Então, mais uma vez, 160 e depois 20 aqui. Então, porque eu ajustei este, eu vou ter que voltar e ajustar este. Então, mais uma vez, para a altura, vá com 160 assim, e então simplesmente mova o conteúdo para 20 assim. Haida London, volte para Paris, 160 para a altura. E então simplesmente colocando isso em 20. Agora o que eu vou fazer é animar este primeiro, e então eu vou voltar e editar todos esses outros. Então eu vou fazer um último para a Europa e então eu vou em frente e mudar os para África, Ásia e Americanos, porque como sempre eles vão ser exatamente os mesmos. Então, a primeira coisa que realmente vamos fazer é substituir alguns deles. Então eu vou usar antes de começarmos a animar, vamos em frente e reposicioná-los. Então traga-o de volta. E vamos ver. Posso, por exemplo, reduzi-los para 30 como fiz com os anteriores. Então, assim, e então simplesmente trazer o nosso próprio colocar lá fora. E vamos ver 30 assim. E eu só quero verificar rapidamente o que é melhor para minhas setas para que eu possa posicioná-las logo abaixo do meu botão. Então é isso que eu vou fazer. Eu vou usar a minha posição de botão e aqui se certifica que eu estou seguindo e essas linhas de grade como este. E eu vou saltar para dentro um pouco estendido. E então eu vou reduzir o tamanho disso para 800, certificar-me de que é cinza claro. E eu vou me certificar de que ele vai no centro assim, seus hábitos. E eu também vou fazer o mesmo para pairar, mas se você se lembra, nós não incluímos o horror, então não vai ser obviamente afetado. Mas como sempre, se o seu cliente quer e lá está, você tem a opção. Finalmente por aqui, vamos ver, entre o nosso botão e as nossas cartas, não temos espaço. Então eu vou posicioná-lo para ser, por exemplo, em 40. E eu vou fazer o mesmo com nossas flechas. Então vamos com 40. Vou certificar-me de que estão num centro. Esta flecha vai para esta borda bem aqui. Esta flecha vai para esta borda bem aqui. E lá temos. Vamos verificar o ponto da aba esquerda. Certifique-se de que ele atenda a nossa flecha. Isso é o mesmo para o ponto de tabulação direito, o que ele faz. E é basicamente isso. Isso é o que precisamos fazer. Isso é tudo criado e agora vamos animá-lo rapidamente. Então, o que posso fazer é ir com a Europa. Ou podemos até usar o mesmo ponto de tabulação. Então vamos realmente fazer isso. Controle G, vou chamá-lo de Europa e tirá-lo do lado de fora. Então simplesmente desagrupar componente. E eu vou me livrar dessas flechas no fundo. Eu só vou ter o mesmo layout basicamente que eu fiz aqui. Então todo o primeiro minuto, e então ele vai dizer toda a Europa. Então, a partir daí, basicamente, o que podemos fazer é simplesmente visualizá-lo. Que fechar todo o caminho para baixo porque temos abas bem aqui, você pode manter as setas se você quiser animar intensamente três estados, se isso é algo que você quer. Mas eu acho que isso vai funcionar muito bem porque ele mostra todas essas cartas principais e este botão fica preso na parte inferior. Toda a seção é bem legível e fácil de acessar. Então eu acho que isso vai funcionar muito bem. Mas mais uma vez, se você quiser, você pode criar exatamente o mesmo layout como fizemos aqui. Então, se eu levá-lo de volta aqui, nós temos três estados porque os usuários podem clicar três vezes, mas em vez de ver dois cartões, eles podem simplesmente ver um cartão neste layout móvel. Então é isso para este vídeo. Eu vou embora agora e terminar a África, Ásia e América usando exatamente as mesmas técnicas, tamanhos, espaçamento, então tudo vai ser o mesmo. Então eu não perco muito do seu tempo. E então eu vou voltar e nós vamos abordar algumas dessas outras seções. Vemo-nos no próximo vídeo. 50. Criação de design responsivo 14: Ok, então agora que eu ajustei todos esses diferentes elementos, vamos mover um analito, explorá-los. E toda vez que ajusto algo para baixo, todo o layout se move porque está em uma pilha, basta selecionar a pasta principal. É por isso que eu colocá-lo lá e simplesmente esmagá-lo de volta para o topo e ele vai se alinhar bem. Como podem ver, temos a Europa, temos a África, temos a Ásia, e temos as Américas. Então tudo é exatamente o mesmo. E você pode saltar para dentro e verificar em arquivo de projeto e ver por si mesmo como tudo parece. Vamos agora abordar essas imagens. E basicamente o que eu vou fazer é simplesmente me ajustar assim. E eu vou simplesmente saltar para dentro daqui, ajustado para aqui. E eu também vou mudar o tamanho para algo assim. Então podemos ir com 375 com 260, por exemplo, 375 com 260. E posso fazer o mesmo pelos outros. Então 375 largura 260. Vou mudar isso para 375 largura para 60. Agora que temos exatamente o mesmo layout. Agora vamos voltar para aqui. E eu vou mudar esse texto. Vamos saltar para dentro daqui. Então vamos mudá-lo para 80 e engoliu 0 por algum motivo. Não sei porquê. Então reserve a sua viagem de sonho conosco. Deixe-me verificar. Sim, ele realmente fez isso em todos os lugares. Então deixe-me ir em frente e corrigi-lo. Vai curar a viagem dos sonhos conosco. E eu vou ter que realmente mudar a largura deste texto para acomodá-lo para algo assim. Aí temos. Mude aqui também. Vamos mudar a largura do nosso texto para a nossa grade assim. E vamos mudar isso aqui mesmo. Então reserve a sua viagem de sonho conosco. E eu vou expandi-lo para bem aqui. E então simplesmente trazendo de volta um pouco mais perto assim. Vejamos, só para atingir a borda da nossa imagem. Então, lá temos. E agora vamos em frente, porque acho que fiz isso em todos os lugares. Deixe-me fazer isso aqui também. Viagem de sonho mais volumoso coloca-nos simplesmente certifique-se de alinhar a nossa imagem aqui. E há uma viagem perfeita. Então eu basicamente consertei tudo isso. Então essas são apenas algumas coisas que você vai ajustar aqui e ali. E a beleza de usar o Adobe XD para todo o seu design é exatamente isso. Então você pode corrigir rapidamente e facilmente alguns desses erros, como geralmente clientes ou quando dizer para o texto Tóquio, trazer isso para dentro, tirar isso, fazer isso maior, tornar isso menor. Então você pode realmente fazer todas essas grandes mudanças realmente facilmente em seu texto e em seu arquivo geral. Então vamos trabalhar nisso agora. Eu também vou clicar neste. Certifique-se de que é mistura 18, é cinza escuro. E eu vou trazer minha mensagem aqui. E vamos ver o que podemos fazer. Simplesmente ajuste-os. Vamos ver o que podemos saber. Talvez possamos nos livrar do sonho. Veja bem rápido, eu ainda tenho alguns problemas estranhos que tomamos D. Então MOOC você está com a gente assim. E eu vou simplesmente selecionar o meu texto e trazê-lo aqui e aqui assim. E então eu vou fazer a mesma coisa aqui e aqui. E vamos ver o que podemos fazer aqui. Podemos ajustá-lo para, por exemplo, 40. E vamos ver o que temos aqui no topo, temos 100 para que possamos saltar aqui, mudar para 60, assim. Então temos 40 entre estes dois e temos 60 entre a nossa imagem e os nossos textos. Então imediatamente eu vou pular lá embaixo e mudar nossa distância para 60, como lá. E então vamos lidar com o texto um pouco mais tarde. Vamos terminar primeiro, bem aqui. Então, diz: “Receba uma citação grátis”. E este botão, eu vou posicioná-lo bem aqui, ter certeza que é 40. Vou expandi-lo para ouvir notícias. A mesma coisa para o horror, saltar bem aqui. Use branco e ajustado para decentrar assim. Então eu vou para o estado padrão aqui. Em seguida, use 18 cinza escuro selecionado e certifique-se de que ele está no centro assim. E lá temos. Então, agora que esta seção está concluída, eu vou ir em frente e fazer o outro que está em baixo, que é este. Então, primeiro de tudo, vamos mudar esta música indo para clicar bem aqui e certificar-se que é 80. Use este 18 cinza escuro lá, nós temos. Então vou alinhar o meu texto aqui ao centro, saltar para dentro daqui. E vamos ver. Então, primeiro de tudo, certifique-se de que esta é a altura automática. Certifique-se de que esta é a altura automática e, em seguida, simplesmente ajustado para a largura de nossas linhas de grade como esta. E depois isto também. E então vamos ver o que vamos mudar aqui mesmo. Então Derek, um perfeito, eu não acho que nós vamos ser capazes de encaixá-lo. Não. Há uma viagem perfeita para todos. Então, se você não gosta de como isso parece, talvez possamos ajustá-lo para ir um pouco para fora. Toque bem aqui, perfeito. E depois movam-se, tropeçam. E, em seguida, clique aqui para todos. Então faça algo assim, e então podemos ajustá-lo mais uma vez. Então vamos ver se vai funcionar. Mas está lá. E finalmente, vamos lidar com isso. Então eu vou para 20 e, em seguida, 40 e, em seguida, notícias e este botão, certifique-se que é 40 posição abaixo e aqui, aqui. E, em seguida, selecione este, certifique-se de que é 18. Volte para trás. Certifique-se de que está no centro como esse estado padrão. Isto vai ser 18 cinza escuro. Certifique-se de que está no centro assim. E vamos verificar que são 40, isto é 40. E como eu disse, isso vai ser 60. Então, agora que a seção está concluída, Vamos agora trabalhar em algumas dessas outras seções me solidificar, ver onde começamos. Finalmente página inicial, alinhe-a até o topo porque fizemos algumas alterações em nossas seções. Então vamos ver a Ásia, as Américas, e vamos trabalhar em nossos principais destinos. Então vamos ver o que podemos fazer aqui. Nós realmente vamos nos livrar de nossas flechas assim. E podemos nos livrar desses, alguns desses destinos. Então vamos usar três. Vamos nos livrar desses três. E eu vou realmente selecionar um desses botões e simplesmente copiá-lo. Controle C, controle V, e posicione-o dentro de nossos principais destinos. Mas antes disso, vou copiar este texto. E eu vou colocá-lo em um grupo. Então estes dois controle G. Adote este tenaz e eu vou clicar com o botão direito do mouse Ungroup componente e, em seguida, usar botão bu e trazê-lo aqui. Então eu vou trazê-lo todo o caminho para baixo, ter certeza de que são 40. Então vamos ver o que podemos fazer aqui para ajustar isso assim. E eu vou clicar bem aqui em nossos destinos. Certifique-se de usar o grupo de rolagem aqui. Então eu vou abrir. Use todos os três, certifique-se de que eles estão centrados. Posicione-os aqui para que eu possa alinhá-los à nossa grelha ao escrever isto assim. E eu vou em frente e agora ajustar todos os três. Então, mais uma vez, você pode saltar para dentro e alterar seu texto se quiser, você pode alterar seus tamanhos. Mas eu não vou, eu acho que este layout vai funcionar muito bem, especialmente porque estamos em uma grade responsiva. Então, lá temos. E agora, finalmente, vamos trabalhar nisso. Então vamos ver se eu cliquei aqui. Vamos ver eu posso reduzir isso para 160 para que possamos ter a mesma altura de conteúdo que tivemos para a placa superior. Então tudo parece exatamente o mesmo e coerente. Então, para a altura bem aqui, use 116. Esconda isto. E, finalmente, para este, use 160. Agora, desculpe, não em largura, mas em altura. Então, mais uma vez, algumas coisas estranhas e estranhas acontecendo com o Adobe XD. Então vamos desfazer, redimensionar e trazer a opacidade de volta. Vou clicar aqui um. Mais uma vez, não sei porquê. Continua acontecendo. Mas mais uma vez, vou salvar meu arquivo e depois voltar. E agora que eu consertei isso, vamos agora ir em frente e reposicionar alguns desses. Então vamos ver, algo ainda não está certo, bem aqui com o multi-uso, eu acho que é apenas a máscara de imagem que é. Então deixe-me clicar duas vezes e movê-lo. Lake District. Está tudo bem. Toscana está bem. Então, vamos trazer isso de volta. Vou segurar a tecla Shift, usar esta, manter a tecla Shift assim. Então eu me curvo a eles e me certifico que eles são 30. Assim e finalmente mudou Toscana 30 também. Eu que verifico os destinos. Edição é bom. Certifique-se de ajustar isto para 40. Vamos ver, então 80. Agora são 40. E finalmente, vamos lidar com o texto superior neste ponto. Então isso ainda vai ser 80. Então vamos mudar para isso. Vamos ver se cabe dentro, não. Então talvez o que podemos fazer é escolher nossos principais destinos e depois colocá-lo aqui, certificar-se de que está centrado, alinhado assim. E então simplesmente posicionando bem aqui. Certifica-te de que são 40. Deixe-me apenas verificar rapidamente se as distâncias aqui, por isso é 40 e 60 abaixo. Então vamos ver, ainda temos 150 aqui. Vou mudar isto para 18 e depois cinza escuro. E eu vou resolver isso para ter certeza que eles estão em um centro. Essa seção intitulada posicioná-lo no centro assim. E vamos ver. Nós somos 60. E porque eu os movi para baixo, mais uma vez, isso vai acontecer. Então, se isso acontecer a você, não se preocupe com isso. Basta selecioná-lo e movê-lo para cima. Então simplesmente lado para a pasta principal, clique aqui e ele vai direto para o topo. Então, agora que terminamos tudo isso, o que nos resta fazer é, na verdade, ajustar essas coisas. E o que podemos fazer com esses cartões é realmente muito simples. Então eu vou fazer a mesma coisa que eu fiz antes. E eu vou parar o vídeo aqui mesmo. Mas, na verdade, não, vamos continuar. Vamos trabalhar com isso. Então vamos ver o que podemos fazer com ele. Testemunhos, eu estou indo para realmente agrupá-los, aperte Control G. Copiar este texto depoimentos de qualidade em grupo este componente. Porque mais uma vez, vamos usar a mesma coisa aqui. E talvez desta vez possamos usar flechas. Assim, os usuários podem tocar nessas setas porque temos setas bem ali no topo. Talvez possamos fazer isso só para apimentar um pouco as coisas. Então vamos primeiro lidar com isso, ou eu vou usar 80. E para isso eu vou usar 18 cinza escuro. Agora, vamos ver o que podemos fazer. Então, selecione-os todos assim. Certifica-te de que estamos num centro como este. Veja o que as pessoas estão dizendo. Podemos cortá-la lá e os viajantes adoram-nos. Certifique-se de colocá-lo em alinhamento abaixo. Mais uma vez, vamos ver. Então, 1, 2, 3, 4, acho que foi? Sim, e depois 60 para baixo. Então vamos ver, 123460. Então 40 e 60. Vamos verificar rapidamente aqui. Então aqui vocês podem ver que temos 47, o que é estranho. Então, 40? Eu não acho que provavelmente porque sim, então 40 e 60. E vamos verificar o nosso layout para ver onde vai parar. Página inicial no canto superior direito, ali. Sim. Então eu acho que isso parece bom. Então 150, tudo bem. E isto é 40, isto é 60 mortes, óptimo. E agora vamos trabalhar em nosso testemunho. Então a primeira coisa que eu vou fazer é o mesmo que eu fiz com esses, é realmente expandir isso, fechar, este fim. Eu vou ajustar meu primeiro cartão, então cartão de testemunho e quando trazê-lo para a borda. E eu vou levar este aqui para o limite também. Então, bem ali. E depois vou ajustar o nosso texto. Então vamos primeiro trazê-lo para o centro. Então vamos ver o que precisa ser ajustado arejando. Então vamos ver o que podemos consertar aqui. Podemos mudá-lo para aqui e podemos mudá-lo para aqui. Vamos ver, estamos a 40. Vamos mudar este para um modelo 24 parafuso 24 como este. Vamos com, vejamos, 40. E eu vou mudar isso para algo ainda menor. Por exemplo, vamos com 16. Veja como isso parece. Isso parece bom. Isto vai ser 18 e vamos ver, 40. Como isso. Selecione o nosso texto e o nosso cartão de testemunho clique ali mesmo, e lá nós temos. Então o que eu vou fazer na verdade é copiar este cartão de testemunho e então eu posso fazer mudanças lá. Então aperte o Controle D, o Controle D, o Controle D. assim. Então, na verdade, não, vamos voltar. Então o que eu vou fazer aqui é cortar um pouco para algo como, vamos ver, organizar as tropas vão ser embaralhadas e tudo o mais entre eles. Para que possamos cortar esse problema. Talvez eu possa mover isso para baixo. Basicamente o que eu queria evitar estes ter uma palavra em linha. Então é isso que estou fazendo agora. Então, tudo bem. E agora, neste ponto, eu posso realmente copiar este cartão. Então, Controle D, Controle D, Controle D. Eu quero ter quatro deles. E basicamente eu vou saltar para dentro e correlacionar com Bree Jackson. E ela viajou para Paris para que eu possa me livrar deste cartão. Viajou para Paris. Esta pessoa viajou para Bali e seu nome é Arthur Hammond. Então talvez você possa copiá-lo e colá-lo aqui mesmo. Espero que não estrague nosso layout. Não funcionou, o que é ótimo. Então posso apagar este. Mas mais uma vez, como você pode ver, temos alguns problemas aqui e ali que eu sou marrom vai para este último e ela viajou para Tóquio assim. E finalmente, vamos nos livrar deste carrinho. Agora que temos para nós podemos começar com nossas animações. Então vamos trazer tudo isso de volta, mudar para nomes, então texto para três. E, finalmente, quatro. Eu gosto disso. Vou me livrar de nossas mensagens. Vou usar nossas flechas, posicioná-las no centro, certificar-me que estão, digamos 80 e quando movê-las para 60. E eu vou fazer a mesma coisa. Então eu vou ajustar esta seta para ir para esta borda e um pouco mais assim. Rebanho leiteiro e faça o mesmo por este. Então eu vou ajustá-lo para aqui, ponto de tabulação usado e ajustado para aqui. Agora que temos tudo isso, podemos começar com animações. E obviamente isso vai ser bem simples. Salt, vamos chamar de depoimentos mais sobre o meu pai. E obviamente você pode incluir algumas imagens se você quiser, não apenas para este, mas para o texto também, se você quiser, mas eu não vou fazer isso. E temos que adicionar mais este porque usamos 16. Vou movê-lo todo o caminho até aqui porque é o mais pequeno. E agora vamos criar nosso componente hit Control K. E eu vou criar um novo testemunho de qualidade de estado para copiar neste texto. Para um testemunho para, obviamente, estão indo para movê-los. Então, mova isso. Vamos ver onde estamos com nossos depoimentos. Isso é bom. Feche. Novo depoimento estadual três. Vou saltar para dentro, movê-los mais uma vez assim. Vamos zoom. E rebanho leiteiro. E, finalmente, crie um novo. Só amônia para saltar para dentro. Testemunhos e lamentou o arquivo em um lugar como aquele. E, finalmente, vamos em frente e protótipos. Então volte ao padrão, protótipo de estado. E vamos usar flechas, certo? Toque em ponto. Nós vamos parar. Autonomia. A ferramenta Testemunho é de 0.6 segundos. Saltar dentro do depoimento duas flechas restantes. Então nós vamos para a autonomia da torneira. O estado padrão está em nossos 0.6 segundos e, em seguida, faça o mesmo para este. Mas aqui estamos indo para o depoimento três. Agora, no terceiro, volte para o segundo. Isto vai para o quarto. E finalmente, no quarto, vou saltar de volta com a nossa seta para a esquerda para o terminal. E lá temos. Então, agora que isso está concluído, podemos voltar ao projeto. E finalmente, para terminar este vídeo, vou trabalhar nesta seção. Então, simplesmente mova-o assim. E o que eu vou fazer na verdade é pular bem aqui. Então, como estamos em 120, o que podemos fazer é ajustar para 80, ter certeza de que é branco. E eu vou pensar que estes vão ficar bem, então talvez possamos movê-los. Vamos primeiro fazer e fazer isso por todos eles. Então, onde estamos 80 brancos. No branco. E vamos verificar com o primeiro, bem-estar soviético. O que temos aqui é 32. Eu não gosto disso. Então eu vou com 40. E eu vou selecionar esses dois e ter certeza que estamos 20 a partir desta borda, então temos muito espaço aqui. E, em seguida, basta selecionar todos eles e trazê-los de volta para aqui. Também não gosto da altura deste cartão oral. Então, por exemplo, podemos pular aqui e para a altura, podemos fazer algo como, não sei, talvez 60. Bem, vamos com 300. Acho que vai funcionar um pouco melhor com este bem-estar. O 12, 20, e depois 20 para baixo. Acho que não funciona bem. Então, mais uma vez, 300 será a altura. Então, em primeiro lugar, reduza isso a algo assim. Cruzeiros. Vamos mudar a altura para 300. Vr, vai ter certeza que isso é 40, não é? Vamos verificar rapidamente aqui, ou são 20? É 20. Então, 20. E então o que vamos fazer é simplesmente trazer estes de volta para cá. Mova estes para 20 e depois 20, assim. E os laticínios têm. Finalmente, vamos lidar com o final 1, terceiro 1. E o que podemos fazer é ajustá-lo daqui, então 300. E eu vou trazer esses dois aqui, 2020, e então certifique-se que esquiar, ele está posicionado 20 assim. E vamos verificar rapidamente as distâncias entre estes. Então 30 não é bom e quando usar 40. E vamos ver aqui, 43 não é bom, então eu vou, vamos ver mais com três. E então viagem esquema se moveu ao longo do caminho, que é ótimo e tudo ajustado como deveria. Isto é 150. E, finalmente, para este vídeo, e eu quero ajustar nossos parceiros porque é um pouco mais fácil seções. Então vamos com 80. Vamos com 18, nove dat. E vamos colocar em nosso título de seção no centro assim, nossos parceiros se encaixam muito bem. E o que podemos fazer é colocar isso em duas linhas, o que também é bom. 60 e quando ter certeza que isso é 40, nem sempre foi esquecer essas coisas. Era 40, ótimo. E vai ser 60 até aqui. Então vamos selecionar nossos logotipos e vamos usar 60. E então o que vamos fazer na verdade é usado este grupo rolável para vir direto para aqui e depois trazê-lo direto para aqui. E finalmente, vou ajustar o tamanho dos nossos logotipos. Primeiro de tudo, certifique-se de ajustá-los aqui. E então todo o caminho até aqui, por exemplo. Então podemos ver dois logotipos e, em seguida, eles podem rolar para a esquerda e para a direita se eles quiserem ver. O resto desses logotipos viu algo assim. Então, quando eu clico fora, é assim que parece. Então, querida, como é, isso é tudo para este vídeo. No próximo vídeo, vamos voltar e terminar nosso design, design responsivo completamente porque vamos trabalhar nessas seções e, finalmente, em um rodapé e, em seguida, terminar nosso design responsivo. Então, vemo-nos lá. 51. Criação de design responsivo 15: E agora vamos em frente e finalmente terminar nosso design responsivo para esta versão móvel e para toda a classe. Então eu vou começar com esta seção aqui porque é 36. Vou reduzi-lo para 24 volts. E eu vou clicar aqui, certificar-me de que isto está alinhado à esquerda. E eu vou posicioná-lo por aqui. E porque é 18 luz e quando ter certeza que é 20 em Dan e quando levar toda esta seção para 40, por exemplo. E quando trazer tudo isso para dentro, vou me mover para dentro, selecionar nossas moedas posicionadas aqui mesmo. E eu posso até fazer se eu quiser, eu posso colocá-los em uma pilha. E então para cada um deles eu posso, por exemplo, reduzir a quantidade de pilha talvez para 40. Acho que vai ser muito bom, mas preciso segurar Shift e descer para 40 assim. Então agora são 40 em todos os lugares para todos esses. E, obviamente, os usuários podem rolar. Vamos simplesmente ajustado à direita por aqui para que os usuários saibam que há mais espaço para rolar para escrever seus 150. E isso é basicamente para a seção de taxa de câmbio DES. Vamos agora passar para as perguntas. E este obviamente vai ser o nosso maior desafio porque precisamos ajustá-lo para caber e precisamos ajustar todas essas animações inferiores. Então, primeiro de tudo, vamos lidar com isso. Então, se você se lembra, isso era 40, isso, e vamos trazer isso para algo como aqui. Então vou usar o meu texto. Certifique-se de que ele está centrado, alinhado e, e quando também posicionar isso aqui. Então certifique-se que está centrado mais ou menos em torno de lá. Então prepare-se para a viagem dos seus sonhos. Vou convertê-lo em altura automática. E vamos ver, posso expandi-lo daqui até aqui. Vamos ver no sonho não vai caber. Vamos usar o Trip. Então prepare-se para sua viagem e vamos ver o que podemos cortar aqui. Então, se eu ajustar isso, ver como ele parece tomar e muito mais, vamos, vamos apenas usá-lo como está aqui. Então, 40. E vamos ajustar este botão, deslizar para baixo. Então vamos voltar para aqui, consertar isso assim. Vamos clicar no nosso botão, movê-lo para baixo 40 e 60. Mova o nosso botão aqui. Certifica-te de que são 60. Clique aqui, aqui embaixo, clique ajustado dentro. Use branco. Desculpe, não 16, mas 18. Porque agora um 16, seu menor. Então clique em algum lugar por aqui. E Dan, eu vou para o estado padrão, clicar nele e usar 18, e também usar uma mistura cinza escuro. Está num centro como este. E agora temos que enfrentar, abordar isso, uma seção de perguntas comuns. Então estamos em 100, e obviamente vamos precisar ajustar muitas dessas coisas diferentes aqui. Então, primeiro de tudo, vamos lidar com esses divisórias irritantes. Então eu vou selecionar este, segurar a tecla shift e ver onde eu termino. Então eu vou acabar em 3344, a largura. Então eu vou usar as mesmas configurações para o resto de nossos divisores. Então, 334. Clique neste 1334, e finalmente clique neste 1334. Em seguida, vou selecionar todos os meus ícones de roupas como este. Segure minha tecla Shift, moveu todos de volta e simplesmente ajuste-se à nossa grade assim. Então, simplesmente um pixel e então eu vou selecionar todos esses textos. Então isto, isto, isto e isto. Podemos ver que é 24 parafuso. Então vamos ver o que podemos fazer aqui. Então talvez possamos até fazer algo como 18 parafuso que fizemos aqui atrás, mas vamos simplesmente usar 18 preto porque temos 18 negrito aqui. Então estamos fazendo a mesma coisa, mas mantendo-a preta para que pareça exatamente a mesma coisa. Vou me certificar de alinhar todos eles ao centro de nossos ícones assim. Vamos esconder isso para que eu possa trabalhar nisso. Obviamente, ainda temos algumas dessas questões sobrepostas. Então o que eu vou fazer aqui é basicamente mover a próxima linha baixo e então realmente ajustado para o centro porque eu acho que funciona muito melhor. Deixe-me esconder este por um segundo. Clique aqui. Então a política de cancelamento vai cair. Ajustado para o centro. Vou escondê-lo. Clique aqui. Escolha seus parceiros podem ir para baixo, certifique-se de que ele está no centro. E, finalmente, faça o mesmo para viagens personalizadas. Então grupos personalizados trabalham ajustados para o centro como este. E nós vamos fazer é trazer tudo isso de volta para cima. Agora que temos dados, configurá-los, o que eu vou fazer é realmente ver onde chegamos com isso. Então, na verdade, podemos fazer distâncias personalizadas mais tarde. Vamos mover todos eles para a onda para que possamos trabalhar neste. Então eu vou trazer nossas mensagens de volta. É 24. Obviamente é muito grande, então vamos ajustá-lo para 18, e vamos usar cinza escuro. E finalmente, vou ajustar nosso texto assim. Certifique-se de que seja, por exemplo, três linhas grandes como esta. E então vamos fazer o mesmo por todos eles. Então eu vou trazê-los de volta, ter certeza que eu olho para ele e então ir 60, por exemplo. Como isso. Em seguida, faça o mesmo para a política de cancelamento. Deixe-me mais do que estes dois para baixo assim. Então vá com a política de cancelamento. Mostre isso. Certifique-se de que eu vá com 18 cinza escuro e simplesmente ajustado assim. Como este. Simplesmente ajustado um pouco. Então, não importa se desce um pouco. Isso é bom. Parceiros, vamos trazê-lo de volta aqui e olhar assim. Certifica-te de que são 60. E então eu vou mudar minha viagem personalizada para baixo, trabalhar nos sócios, trazê-la de volta. 18 anos, cinza escuro. Clique novamente e ajustado para isso. Eu realmente não gosto de como isso parece, mas o que você pode fazer isso vai ser altamente confiável para, vamos remover essas palavras para alojamento, transporte e viagens. Então isso vai funcionar bem para nós. Remova ou esconda, e traga este último. Dois, mais ou menos por aqui. Vamos ver. Lá vamos nós, 60. E depois traga isto de volta. Vou me certificar que é finalmente 18 cinza escuro e trazê-lo de volta. E nós não nos importamos com o que parece aqui. Parece bem, mas não nos importamos porque é o último. Então finalmente vou escondê-lo e vamos agora animar todos eles. Então, se você se lembrar de exemplos anteriores, nós realmente temos que animar todos eles. Então eu vou saltar para dentro, selecionar todos eles, controlar C, saltar para dentro daqui. Controle V. Vou trazê-los de volta. Este aqui, Controle V, e este aqui. E finalmente, vou lidar com este último. Coloque isso aqui e remova isso por enquanto, porque este é o nosso último. Vamos de trás para a frente. Então eu vou fazer assim, mover nosso divisor para baixo. Então a distância aqui é 52. Na verdade, não gosto da distância. Desculpe por isso. Quando eu deveria realmente fazer é voltar para o nosso estado padrão e , em seguida, ajustar as distâncias entre todos os nossos divisores. Então eu vou ter que fazer isso primeiro. Vejamos, são 50 para selecioná-lo e um texto. E então talvez estes descansem. Então, dois e depois 40. Então vá para aqui. E vamos ver, isto é, por exemplo, 60, como nós selecionamos para ser. Então divisor e quinto 40. E selecione estes dois. Então, assim. E vamos ver a partir do divisor para ouvir. Sim, temos 40. E, finalmente, para as viagens personalizadas, podemos simplesmente fazer 12 e depois 40. Lá vamos nós. E agora eu vou realmente copiar e colar em todos estes. Sinto muito por isso. Mas como você pode ver às vezes enquanto você está trabalhando, eu estou basicamente criando todas essas soluções porque eu estou tentando obter a usabilidade ideal de todos esses projetos. Portanto, estou fazendo mudanças para sofrer porque essa mudança não era a parte do design original que criei. Portanto, estou simplesmente a criá-la à medida que avança. Finalmente, estamos neste quarto estado, então viagens personalizadas, para que possamos realmente ir para o primeiro. Então vai ser muito mais fácil de seguir. A minha viagem está protegida? Então ele localizado aqui está. Vou abri-la. Traga isso de volta, traga meu divisor para a borda. Certifique-se de que é 40 para baixo. E, em seguida, selecione estes três. Alinhe com o nosso divisor. Como este. Posso ir com 40 ou até melhor, posso ir com 60 para manter o mesmo espaçamento. Política de cancelamento. Então não está, está virado. E C, Então 040. E, em seguida, basta selecionar estes dois. 60. Escolha seus parceiros. Traga de volta, divisor. É 40. E então, finalmente, viagens personalizadas se movendo até a minha mesa. É 60. E finalmente, para a última, viagens personalizadas, eu vou trazê-la de volta. Vou usar nosso divisor, trazê-lo todo o caminho para baixo e depois ir para 40, assim. E lá nós temos agora, obviamente a última coisa que vamos fazer antes da animação é girar esses ícones. Então vamos passo a passo. Vamos para vir perguntas, padrão, estado. Então todos eles são S Plus minha viagem está protegida? Então eu vou pular dentro dessa. Mantenha a tecla Shift pressionada e girada como esta política de cancelamento. Então é este. Feche o mouse e depois girado como sujeira. Mude, escolha seus parceiros. Vai ser este. Isso, e finalmente o último para as viagens personalizadas. E eu vou clicar nele. Fechar ícone e gostar assim. Então, agora que todos eles estão concluídos, podemos voltar para o estado padrão e começar a animar assim protótipo. E mais uma vez, vamos manter as mesmas configurações. Super clique no primeiro. Podemos ver toque o que animar a facilidade em 0,6 segundos. Então, basicamente, vamos usar esse também. Assim é a minha viagem protegida e quando voltar para o disco de estado padrão manteve as mesmas configurações. Então a política de cancelamento vai para a política de cancelamento parceiros vão para parceiros. Então escolha seus parceiros. E, finalmente, viagens personalizadas vão para viagens personalizadas e sexualmente testadas e ver se isso faz algum sentido e pode ir até o fim. Localizada. Aqui estamos nós. Então, se eu clicar aqui, ele vai me levar lá, o que é bom. Se clicarmos aqui, vai me levar até lá. Mas eu não a animei de volta. Então vamos lidar com isso. Então, venham as perguntas. Estamos protegidos na minha viagem. Então vamos ver. Este é este vai para o estado padrão, política de cancelamento. Vai para parceiros de política de cancelamento vai para parceiros e viagens personalizadas. Ir para viagens personalizadas. Ok. Vamos animar todos eles e depois vamos dar uma olhada. A minha viagem está protegida? Ele vai se mover para, desculpe, estado padrão porque ele está aberto. Isso vai escolher seus parceiros. Então, finalmente, viagens personalizadas vão para Viagens personalizadas e escolher seus parceiros. Isso vai funcionar para o estado padrão. E, finalmente, viagens personalizadas. Ele vai para viagens personalizadas. E finalmente, no final, vamos lidar com o último estado, que é viagens personalizadas. Então, a métrica dele está protegida? Isso vai para a política de cancelamento e isso vai ser um problema porque ele ou laboratórios ou são muito, escolher seus parceiros. E, finalmente, isso vai para o estado padrão. Então, mais uma vez, você terá que explicar ao seu cliente se você estiver usando animação como dados DES, alguns deles vão se sobrepor e majorly. Então vamos dar uma olhada. E isso funciona bem. Isso funciona bem. Então, agora, se eu clicar aqui, vai me levar, o que é bom. Se eu clicar aqui. Então, no fundo vai abrir. E se eu clicar aqui na parte inferior, ele vai abrir muito bem. E como você pode ver, ele ajusta nosso layout muito bem porque estamos usando essas pilhas como esta, então agora ele deve funcionar um pouco melhor. E finalmente, vamos lidar com essas duas últimas seções. Então deixe-me clicar neste e ir 80. Vou clicar neste, 18 cinza escuro. Então vamos ver o que podemos fazer. Fique no circuito. Talvez possamos colocar duas linhas como esta e depois ajustar isto para 40. Ajuste esta entrada para ser, vamos ver 60. Vamos ver 59, 60, tudo bem. Agora, para a entrada de texto, o que podemos fazer para a entrada em si, podemos alterná-lo assim. Podemos usar isto. Então, entrada de texto, eu posso trazê-lo de volta para aqui. E eu posso trazer entrada VG para aqui. Então podemos simplesmente escrever seu e-mail assim. E então, em vez de 40, podemos trazê-lo para 20. Podemos trazer isso para 20 também. Assim como. E finalmente, vamos trabalhar com o nosso botão. Então vou me posicionar bem aqui. Estamos em 29. Então vamos reduzir para 40, por exemplo. E eu vou abri-la. Então o botão de assinatura vai ser bem aqui. Se eu for para o protótipo, como você pode ver, não é prototipado. Então, volte ao Design. Nós vamos usar 18 liso branco e garantir que nós posicionamos no centro e é basicamente isso. Então este é 40 e este é 60, que é o que queríamos em primeiro lugar. E tudo isto se encaixa onde o mundo, este é 150. Este é o nosso problema aqui porque temos este espaço vazio, então vamos lidar com isso no final, mas vamos agora lidar com o nosso rodapé. Então, primeiro de tudo, eu vou trazer minha imagem de rodapé e sobreposição de cores. E então eu vou lidar com aquele divisor irritante de mais uma vez. Então posicione-o aqui e clique aqui, traga-o de volta para aqui. Então eu vou usar o logotipo. Certifique-se de que está no centro. E ele pode realmente torná-lo um pouco menor, mas porque nós não estamos usando PNG aqui, deixe-me realmente agarrar nossa posição PNG no Mirador aqui. E pode posicionar-se para o centro. Eu posso me livrar desse. E certifique-se de que eu estou no centro Shift Alt, clique com o botão esquerdo, e apenas torná-lo um pouco menor. Para a informação do rodapé como um todo, eu vou fazer algo menor. Então talvez 60 do topo. Acho que vai funcionar um pouco melhor assim. Agora vamos lidar com todas as nossas informações. Vamos primeiro ajustar esses. Então, navegação principal. E se eu saltar para dentro daqui, você pode ver que todos eles são 24. Então vamos lidar com isso. Vamos lidar com 18 e depois com branco. Vamos selecionar estes e ir com 18. E se pudermos, e selecioná-los. Então vamos assim. E vamos ver 18 brancos, o que é bom. Agora vamos lidar com nossas distâncias. Então o que podemos fazer aqui é, na verdade , eu posso, por exemplo, posicionar este para decentro, mas não vai funcionar muito bem. Eu não acho que por causa desses pontos de toque, mas na verdade funciona. Bem, vamos ver se conseguimos lidar com a mesma coisa aqui. Isso é bom. Então nós podemos realmente mantê-lo assim só porque o texto é menor, você pode usar 16 se você quiser porque é o rodapé e então ele vai ser muito melhor. Então vamos testá-lo na verdade. Então, 16 anos, Daniel é branco. Usa estes. 16 e então branco. E acho que funciona ainda melhor assim. Então, posicione-se aqui, aqui. E isto vai ser no centro. E isto vai ser no centro. Isto nós vamos para aqui, e isto vai para aqui. Então, na verdade, funciona muito melhor. E a posição é 40 entre o nosso logotipo é 60, o que é bom. Divisor é bom. Agora, vamos lidar com o fundo por si só. Vamos mover nossos ícones de mídia social para o centro. Tudo bem, por aí, analitos agora mudaram o tamanho desses textos para 16 também. Então, para nós lidarmos com esses. Então 16 branco, escolha este 16 branco. Lá temos ele. E agora vamos alinhá-lo rapidamente. Então eu estou indo para comprar algumas informações, certifique-se de que está centrado bem ali. Certifica-te de que isto está centrado ali. Acho que aqui. Algo como isto. Agora, vamos na verdade. Vamos trabalhar com nosso texto primeiro. Então eu vou mudar esses dois aqui, bem ali, e então ajustar isso para aqui. E agora que temos que podemos realmente ajustar isso para estar no centro como sempre deveria estar. E agora vamos lidar com o nosso passado. Então eu vou selecionar esses dois e trazê-los de volta. Apenas um pouco. informações do rodapé podem ir, e então isso pode ir. Para que eu possa consertar minha imagem. Clique duas vezes em posições por aqui, traga isso de volta, traga isso de volta, e aí está. Então, você pode ter mais informações de fundo, se você quiser. Você pode até fazer algo assim e posicionar esta informação para o centro. Então agora é 7171. Então eu posso até ir um pouco mais. Então eu posso posicionar todos eles e simplesmente trazê-los mais. Então vamos ver onde estamos agora. Estamos em 55. Então essa é a questão aqui. Por isso é fixe. Só me certifico de que temos 60 de Controle D. Certifica-te de que estamos lá 60. E simplesmente expansivo, basicamente a mesma coisa que fazíamos antes. E lá temos. Este é o nosso projeto concluído. Tudo está concluído. Então o que eu vou fazer é verificar rapidamente mais uma vez para o topo Pinot. Aperte visualização. Vá até o topo. Analytes, explora mais uma vez. Então nós temos esta seção. Nós temos estes, nós temos estes. Tudo funciona como deveria. Bonitas animações. E temos estes primeiro e último minuto, e podemos rolar para a esquerda e para a direita. Tenha este belo vídeo. Podemos rolar para a esquerda e para a direita aqui, aqui, aqui e aqui. Nós temos esses, então podemos rolar aqui também. Eles parecem um pouco diferentes desses no topo, mas têm as mesmas dimensões. Basicamente. Nós temos estes. Temos estes três parceiros. Podemos rolar para a esquerda e para a direita. Temos estas taxas de câmbio. Podemos rolar para a esquerda e para a direita aqui também, o que é ótimo. E temos essas respostas para que você possa ver como o conteúdo se ajusta. Então tudo funciona como deveria. Mas aqui, sim, você tem que clicar para baixo para que ele funcione. Não gosto deste espaçamento. Então eu vou lidar com todos os espaçamentos de uma vez e então eu vou consertar este separadamente. Mas eu gosto de como o resto do nosso conteúdo se parece. Então, primeiro, o que eu vou fazer é selecionar nossa página inicial como eu fiz, e eu vou reduzi-la para, por exemplo, 80. E vamos ver como isso se parece. Acho que funciona muito bem. O espaçamento ainda está bom, então tudo ainda é bom e suave. O espaçamento é bom lá, então tudo é bom. Você pode até aumentá-lo para 100 se você acha que AT é muito pouco. Na verdade, 118 funciona muito bem. Então, como eu disse, a última coisa que vamos abordar aqui é esta. Então eu vou ajustar manualmente para algo como 20, por exemplo. Então, agora, quando o conteúdo se expande, quando as animações estão funcionando assim, eu posso chegar a essa seção para realmente mostrar a vocês. Então podemos voltar até aqui. Então, quando eu clicar aqui, você pode ver que o conteúdo está se sobrepondo. Então esse era o nosso principal problema desde o início. Então 20 podem não funcionar por causa disso. Sólidos combinam com 60, por exemplo. E vamos ver como isso vai se ajustar. Então vamos com 60. E quando eu estiver trazendo isso de volta para aqui, clique bem aqui. Você pode ver que agora é bom. Então ajusta bem para ouvir, porque você não vai ser capaz de ver isso. Mas se você fizer, se você for todo o caminho até aqui e depois aqui, talvez você possa até expandir isso para 100 e mantê-lo exatamente o mesmo. Finalmente, para terminar isso, o que eu vou fazer é obviamente clicar duas vezes aqui no nosso quadro de arte para aumentar a altura e ir até o fim, fechá-lo assim. E rebanho leiteiro. Então, essas são opções de design responsivas que você tem no Adobe XD. Desculpe por alguns desses erros e a morte aconteceu durante este processo de design responsivo. Mas como eu disse no vídeo introdutório para a seção de design, é tudo por causa do meu software de gravação. Então usei Camtasia para gravar vídeo e uso todos os tipos de processamento para áudio. Portanto, todos eles estão misturando em largura. Meu Adobe XD, eu também costumava usar o Adobe XD ao mesmo tempo. Portanto, é por isso que todos esses bugs diferentes estão acontecendo aqui e ali. Então Dan, você está assistindo a essa seção de redimensionamento responsivo. E na próxima seção, vou explicar a partilha. Vamos lidar com a partilha. E finalmente, uma vez que tenhamos feito isso, vou finalmente dizer-lhe como você pode exportar todos esses ativos e enviá-los para seus clientes e desenvolvedores para verificação e, finalmente, espero, terminar seus projetos. Então eu vou te ver no próximo vídeo quando vamos começar a compartilhar. 52. Como conectar nossas páginas: Antes de começarmos a compartilhar com nossos clientes e desenvolvedores, eu só quero mostrar rapidamente como você pode conectar todas essas páginas no design do site. Então, se eu mudar para o Adobe XD, posso mostrar o que quero dizer. Então aqui temos os passos básicos que fizemos no início deste projeto. Então design breve moodboard, guia de estilo do projeto wireframes de papel, que vamos terminar um pouco mais tarde. Tivemos wireframes no Adobe XD, em seguida, design e, finalmente, design responsivo. Então, se mudarmos para o protótipo, você não verá nenhum desses conectores. Mas se eu selecionar todos eles, você pode ver quantos desses conectores nós temos Palavra sobre emissões. Então, para começar com animações, porque queremos que nossos usuários sejam capazes de navegar entre essas páginas. O que eu vou fazer é selecionar barris de alguns destes porque você pode ver que temos bagas como um destino aqui. Então podemos fazer isso daqui ou daqui, ou até mesmo incluído para os principais destinos aqui, por exemplo, e então conectado. Então o que eu vou fazer é selecionar este que é ofertas especiais. Vá até o último minuto, localize o Paris. E eu vou mudá-lo para o estado Horace e, em seguida, escolher esta seta inteira como esta, e simplesmente clicar e arrastá-la para aqui. E então eu vou usar torneira e quando usar transição, Dissolver, aliviar. E, por exemplo, 0,8 segundos. Acho que vai funcionar bem. E então eu vou trazê-lo de volta para o estado padrão para que os usuários serão capazes realmente dizer como navegar sua visualização de calor, ampliá-lo e apenas um pouco para que você possa ver. Então ainda temos esses efeitos de pairar. Eles funcionam muito, muito bem. Então paire. E se eles escolherem clicar aqui, ele vai levá-los para esta página. Agora. Vou conectar este botão agora explorado para que eu possa mostrar como funciona a opção de ferramenta de rolagem. Então ele vai rolar para esta seção em particular. E para fazer isso, eu vou voltar ao design porque vocês se lembram, nós incluímos todos eles como uma pilha bem aqui. Mas porque eu não usei pilha nesta página e você pode ver, eu posso simplesmente clicar com o botão direito do mouse e desagrupar todos os meus elementos de dentro. Eu não usei pilha porque eu estava usando diferentes destinos entre as seções. Então você pode ver que temos 150, temos 150, temos 150, e aqui temos 150 também. Mas como este não é 150, ele nos mostra isso, mas não é por causa disso. Simplesmente removi do grupo. Então, se eu for explorar, agora, abra, localize meu botão. Vá para o seu estado de horror. Vá para Protótipo. Clique nele. E vamos fazer é tocar em vez de transição ou animação automática. Vou usar pergaminho também. E o que isso basicamente faz é imitar hiperlink. E isso é realmente útil, especialmente se você tem a navegação que vai seguir em rolagem. É útil porque os usuários podem clicar onde quiserem. E ele vai levá-los para essa seção da página porque a navegação ainda vai seguir. Como eu disse, isso é realmente útil especialmente para páginas de destino onde você só tem uma página e todo o conteúdo está em que uma página. Mas no nosso caso, não é muito útil porque temos todos esses drogados adicionais e todos esses sistemas de navegação complexos. Portanto, vamos apenas navegar para esta seção, mas eu queria mostrar-lhe isso como uma opção. Então aqui mesmo para o destino, o que precisamos fazer é escolher visitar Paris aqui mesmo, que é esta seção. E você pode escolher, por exemplo, aliviar 0,8 segundos. Você pode escolher a velocidade na qual vai traduzir uma transição. Então eu vou escolher 0.6 porque eu não acho que 0.8 é tudo o que necessário. Vou trazê-lo de volta ao estado padrão. Clique em Pré-visualização. Então, quando os usuários passam o mouse aqui, Vamos ver se ele funciona. Por alguma razão, não funciona. Então vamos para o protótipo. Bem aqui. Eu nem incluí o pairar no nosso estado padrão. Então eu vou clicar bem aqui. Vou escolher o pairar. O destino vai pairar assim. E vamos voltar e pré-visualizar agora. Então agora o pairar funciona. E quando o clique vai levá-los lá, você pode obviamente retardar esta animação. Então, mais uma vez, eu posso clicar aqui. Vá para pairar. Temos guia de rolagem para visitar Paris. Vou sair com facilidade e, em seguida, 1 segundo, por exemplo, voltar para o estado padrão, pressione a visualização mais uma vez. Então, passe o mouse, clique aqui, e você pode ver como é suave. Isso só traduz você para esta seção. Então você pode imaginar isso a ser usado, por exemplo, se você tem aquela navegação flutuante aqui ou bem aqui com as seções. Assim, você pode incluir diferentes efeitos de cor para mostrar diferentes opções. E, em seguida, clique vai levá-lo para seções diferentes. Então agora precisamos conectar este hotel para a próxima página. Vou abrir isso de perto nesta seção. Podemos ir para este hotel. E temos o cartão de hotel um. Vou escolher o pairar. Então, a mesma animação. Eu vou usar seta, arrastá-lo para esta página. Então toque, transição, Dissolver , aliviar, e vamos com 0,6 segundos, por exemplo. Porque eu não acho que, uh, um segundo é necessário. Então vamos pré-visualizar, ver como ele se parece. Então, mais uma vez, temos esta opção clique e podemos rolar para facilmente. Como você pode ver, todos esses efeitos de terror funcionam. Então, sentando a sorte na página inicial. Quando você passar o mouse aqui e clique, Ele vai levá-lo para esta página onde você pode facilmente navegar essas imagens usando essas setas. E o que queremos fazer em seguida é corrigir este livro agora botão e certificar-se de que ele vai para a próxima página. Então vamos fazer isso. Por causa da próxima página é Billings que pode imaginar que os usuários escolheram todas essas opções diferentes. Eles escolheram este hotel em particular. Então agora o que eles querem é ir a esta página de faturamento e fazer um pagamento. Então temos que localizar nossa barra lateral. Então, informações do hotel, barra lateral. Vou localizar o meu botão grande, que é este. Vá para pairar. Clique, eu estou indo para a transição passo, Dissolver, aliviar 0.6. Então exatamente as mesmas configurações. E você pode até escolher preservar a localização de rolagem. Então, se você escolher que vai transição e colocá-lo nesta seção da sua página, que é ótimo se você quiser que seus usuários para a transição para determinada seção de cada página e não ir direto para o topo. Mas, neste caso, queremos que eles vão direto para o topo. Então, vamos deixar isso desmarcado. Em seguida, eu vou clicar no meu botão mais uma vez, trazê-lo de volta ao estado padrão. Porque, mais uma vez, eu quero que os usuários sejam capazes de selecionar e esse estado. Então clique aqui, Pré-visualização. E uma vez que eles vão bem aqui e você pode passar o mouse clique, ele vai levá-los para despachar n. Agora nós temos que animar apenas este botão aqui. Então, para fazer isso, eu vou clicar bem aqui, obviamente. E nós também animamos estes anteriormente. Então, quando os usuários clicam lá, ele vai levá-los para esta seção, mas eu quero animar nosso botão neste caso. Então vamos com os detalhes do hotel. Cartão do hotel, botão grande. Vou passar o mouse e passar o mouse e ver Tap Transition. Veja se podemos ir. Agora podemos apenas ir para o estado padrão do nosso botão. Então o que eu preciso fazer é deixá-los como eles estão aqui e simplesmente animar nosso último botão, que é este aqui. Então, para confirmação, eu posso ir para a confirmação, localizar o nosso botão, ir para o pairar. O recibo de download não vai nos levar a lugar nenhum porque não temos essa opção para projetar isso. Mas podemos animar essa calma. Então, quando eles passam o mouse, podemos clicar nele, arrastá-lo para casa, ou você pode simplesmente selecioná-lo aqui onde diz destino. Então essa página inicial de transição se dissolveu, facilitar todas as mesmas configurações e eu vou trazê-la de volta. E usos podem ser, podem animar simplesmente aqui se quisermos incluir diferentes opções. Então, quando eles clicarem nesses botões aqui, deixe-me levá-lo para o estado padrão. Eu teria que criar o ponto de tabulação para o nosso botão aqui. Então eu vou simplesmente voltar ao design. Crie um ponto de dados aqui. Ponto de toque do botão de qualidade. Eu teria que usar o Controle X para cortá-la. Em seguida, vá para a direita aqui, aperte o Controle V para colá-lo, e tente posicioná-lo em algum lugar por aqui. Então eu posso abaixar tudo isso. Volte para o protótipo e, em seguida, selecione-o. Clique nele. Vou tocar, ir para animar automaticamente porque eu quero fazer a transição para o próximo estado. Então deixe-me fazer isso mais uma vez. Então, toque em auto, animar, escolher um estado, eu quero ir para o pagamento. Eu vou fácil e sair e 0.6 segundos, por exemplo. Então vamos fazer a transição para o próximo estado, que é este. Ainda temos aquele ponto de tabulação. Vamos clicar nele agora. E eu vou para a confirmação agora. E finalmente confirmação que temos esta animação, o que é bom. Então vamos clicar em pré-visualização, ver como isso se parece. Então, como eu disse, podemos clicar aqui. Vai fazer a transição de qualquer maneira, mas se você quiser, você pode passar o mouse e clicar aqui porque nós temos esse botão ou ficar aqui como um suporte de lugar, ele vai fazer a transição aqui. Acerte B agora. E finalmente, estamos aqui. E quando quisermos clicar em voltar para casa, e isso vai nos levar de volta para a página inicial. Então, lá temos. É assim que a animação funciona. Como eu disse, você terá este arquivo. Você pode explorá-lo em mais detalhes. E como eu disse, você pode usar rolagem agora, que na minha opinião é um recurso fantástico, especialmente se você tem páginas de empréstimo porque você pode conectar todas as suas seções em uma única página e usar a opção de navegação de rolagem. Eu não o usei aqui porque temos todos esses tipos diferentes. O que você pode fazer é simplesmente incluir de volta para a seta Top, que vai ser localizado para baixo. Então ele vai seguir tudo o resto porque nós realmente temos pilhas incluídas. Você pode simplesmente incluí-lo como uma parte desta pilha ou ainda melhor, você pode colocá-lo fora de uma pilha apenas na parte superior e preservar a posição de rolagem lá desde o início, ele vai rolar facilmente quando seus usuários rolar para baixo através sua página e basicamente simplesmente conectado a rolar para a posição, para voltar para o topo. Então é assim que é fácil trabalhar com esses protótipos. Agora vamos falar sobre compartilhar. E no próximo vídeo vou mostrar quais opções de compartilhamento o Adobe XD oferece suporte e como você pode compartilhar seu projeto com seus clientes e desenvolvedores? 53. Compartilhado com clientes: Agora que temos tudo resolvido, vamos falar sobre compartilhar. E, obviamente, compartilhar é extremamente importante porque você pode projetar o compartilhamento de protótipos no Adobe XD, que é uma ótima função e você não precisa alterar ferramentas diferentes. Você não precisa explorar diferentes opções e pagar principalmente por diferentes serviços. Você tem tudo dentro do Adobe XD, quer esteja usando um plano gratuito ou um plano premium para esta classe? Eu estava usando um plano grátis o tempo todo só para mostrar como tudo funciona. E no plano gratuito você só tem uma opção de compartilhamento de prototipagem. Portanto, essa não é realmente uma ótima opção para você se você estiver trabalhando em vários projetos ao mesmo tempo. Mas se você está trabalhando em um projeto por projeto base, se você está apenas trabalhando em um único projeto que é um projeto longo, por exemplo, então a opção livre do XD é realmente uma ótima opção para qualquer um, não importa se você é um profissional ou você Só estou a começar. Tudo isso é, se você tiver o Adobe XD instalado, se estiver usando a Creative Cloud da Adobe, se estiver pagando pela assinatura da Creative Cloud , isso realmente não importa. Você pode simplesmente usar o XD em seu potencial porque você já tem a Creative Cloud instalada. Agora vamos voltar para o nosso projeto e eu vou mostrar algumas opções de compartilhamento. Então, certo para uma direita aqui no topo, o que temos é mais uma vez projetar protótipos compartilhados, exploramos design, exploramos um protótipo. Mostrei todas essas opções diferentes. E finalmente, estamos alcançando nossa parte. Então o que vamos fazer aqui é mostrar-lhes como você pode ajustar algumas dessas opções e como você pode compartilhá-las. Agora, ele nos mostra que tudo é selecionado além de B, fornecer quadros porque wireframes de papel, nós não somos opcionais, não foram colocados dentro das pranchetas. Arrastei-os e deixei-os lá dentro. Portanto, eles estão simplesmente lá. Quando eu voltar para o protótipo, pode fazer aqui é que eu posso, por exemplo, clicar nesta opção e eu posso clicar aqui. E ele vai me mostrar essa opção que se chama Fluxo 1. Agora porque estes estão conectados como um fluxo um. E se eu clicar aqui, você pode ver algumas dessas opções diferentes. Mas eu não conectei essas páginas entre si. Conectei apenas essas páginas entre si. É por isso que está me mostrando assim. Então, todos estes vão ser Fluxo 1 e esta vai ser a página inicial do fluxo um. E eu vou clicar duas vezes dentro e chamá-lo de wireframes. Que porque estes eram wireframes de papel em, estes eram wireframes em XD. E então eu vou clicar aqui e fazer a mesma coisa. Clique e este fluxo, eu vou chamar de design. E finalmente, vou clicar bem aqui. Clique aqui, clique duas vezes e chame esse design responsivo assim. E agora temos esses três fluxos. Agora, o que é ótimo sobre esses fluxos é que você pode simplesmente conectar um deles e apenas compartilhar um fluxo, por exemplo, design. Ou você pode compartilhar todos os seus fluxos e usuários, clientes, desenvolvedores podem simplesmente rolar entre seus fluxos. Veja todas as suas opções. Então, agora, se voltarmos para compartilhar, vocês podem ver que temos esses três fluxos. Então, se eu selecionei este, ele vai compartilhar apenas este. Se eu selecionar este, vai compartilhar apenas este. Se eu conectar as páginas entre si e se eu selecionar meus wireframes, eu ainda teria que fazer as mesmas conexões. Eu mostrei a você em um vídeo anterior entre essas quatro páginas. Assim, você pode compartilhar nesta fase do seu projeto. Você pode compartilhar nesta fase, você pode compartilhar nesta fase, ou você pode simplesmente começar aqui, fazer conexões entre todos os seus aeroportos e todos os seus estágios e todos os seus fluxos, em seguida, compartilhar tudo com seus clientes e desenvolvedores. Realmente tudo depende de você o que você quer fazer e apenas manter uma coisa em mente, que é a velocidade. Portanto, depende do tamanho geral do arquivo. É por isso que eu disse, por favor, otimize suas imagens porque isso vai diminuir o tamanho do arquivo. N vai permitir que você trabalhe muito mais rápido no XD. E quando se trata de compartilhar, ele vai permitir que você compartilhe seus arquivos muito mais rápido do que com todos esses arquivos grandes. Além disso, depende da velocidade da sua conexão com a Internet. Então, se você tem internet muito lenta e arquivos realmente grandes, obviamente vai demorar muito mais para que ele faça o upload para a Adobe Cloud. E, portanto, você poderá compartilhar o arquivo com os clientes e desenvolvedores. Então, se voltarmos para o arquivo, como eu disse, wireframes e design e sem resposta, vamos apenas compartilhar o design. É por isso que eu propositalmente deixei todas essas coisas de fora. Mas, mais uma vez, você pode começar a compartilhar. E eu realmente encorajo você a começar a compartilhar nesta fase do seu projeto. Porque nesta fase, cliente, um cliente pode ser facilmente dar-lhe feedback. Você pode facilmente ajustar tudo porque agora você projetou. Em vez de fazer isso em um papel wireframe etapas do seu projeto. É aqui que você deve começar a compartilhar com seus clientes depois que eles lhe dão feedback, depois de coletar esse feedback, fazer essas alterações e, em seguida, você pode passar para o design. Então você pode simplesmente desconectar esses dois fluxos. Imagine, por exemplo, ir desta página para esta página, digamos simplesmente desconecte esse conector, como eu mostrei aqui antes. E então agora você projetou e você também pode compartilhar o design e design responsivo, como eu disse, para que eles possam ver tudo. Finalmente, vamos voltar para aqui. Então, um link é para design e você pode gerenciar o link. Como eu disse, você só tem um link. Quando você tem o plano gratuito, como eu estou mostrando aqui, se você tem um plano premium, se você criou uma assinatura chamada, então você tem opções de compartilhamento ilimitadas. Você pode trabalhar em quantos projetos quiser. Exibir configurações. Então, por que você está compartilhando isso? É para revisão de design, para desenvolvimento, para apresentação, teste de usuário ou personalizado, onde você pode escolher todas essas opções diferentes. Então, vamos clicar rapidamente, passar por eles. Revisão de design, eu realmente recomendo para compartilhar isso com seus clientes ou seus companheiros de equipe, porque então eles vão ser capazes de deixar você feedback específico. Eles vão poder deixar seus comentários. E então, com esses comentários, você pode simplesmente progredir e fazer essas mudanças. Desenvolvimento, obviamente para desenvolvedores porque vai ser um ambiente muito mais complexo. Dentro desse ambiente, eles poderão baixar ativos que poderão ver trechos de código. Eles vão ser capazes de ver algumas cores. Opções de fonte e muito mais apresentação é basicamente ele remove todas essas opções e apenas deixa você com basicamente experiência em tela cheia para apresentação, que é ótimo se você quiser apresentar seu design final, por exemplo, para seus clientes ou para diferentes partes interessadas são parceiros ou algo assim. Teste de usuário é diferente mais uma vez, porque ele remove todas essas opções diferentes que estão lá para os usuários. Então eles não vão ser capazes de ver pontos de toque. Por exemplo, eles teriam que descobrir o DOM, descobrindo-os sozinhos. Então você terá que medir quanto tempo leva para clicar nesses pontos de dados, como é fácil navegar por toda a sua interface do usuário e quão rápido eles estão chegando ao seu local de destino. No nosso caso, por exemplo, reservar este hotel, digamos. Então você terá que medir todas essas coisas em testes de usuários. E finalmente, costume. Como o nome sugere, você pode personalizar sua experiência aqui. Então vamos começar com a revisão de design. Primeiro. Link eixos, você pode clicar aqui. Assim, qualquer pessoa com o link pode ver isso apenas pessoas convidadas que podem convidá-las via e-mail e qualquer pessoa com senhas. Assim, você pode proteger seu arquivo e seu link com senha. Então nem todo mundo pode ver. Eu escolherei qualquer pessoa com o link e, em seguida, pressione Criar link mais uma vez, dependendo do tamanho do arquivo e das velocidades de conexão com a Internet, vai demorar mais ou menos. E agora que terminou de compartilhar, como você pode ver, temos todas essas opções. Então você pode simplesmente copiar este link e você pode colá-lo em seu navegador e abri-lo. Mais uma vez, temos para uma revisão de design. Temos para qualquer um com o link. Você pode compartilhá-lo com desenvolvedores aqui, e você pode atualizar o link também. Você pode clicar aqui e ir para o desenvolvimento, que é o que vamos fazer. Mas, finalmente, quero explicar essa opção. Como você pode ver agora nós temos que atualizar porque nós atingimos esse limite de um link livre. Se você estiver trabalhando e fazendo algumas alterações, você pode ver que temos essa opção. Você pode copiar o link a partir daqui de qualquer maneira. Então, se voltarmos ao Design, faremos quaisquer alterações adicionais. Podemos voltar para Compartilhar, clicar em Atualizar, Link News ainda tem que um link que você pode compartilhar com seus clientes vai estar localizado exatamente no mesmo local, vai estar exatamente no mesmo lugar. Portanto, este link não vai mudar, mas o conteúdo dentro deste link vai mudar quando você fizer algumas alterações de design aqui. Então, como eu disse, você pode simplesmente fazer uma mudança. Clique em Atualizar link vai girar mais uma vez uma atualização. E então você pode clicar aqui para copiar o link e compartilhá-lo com seu cliente. Agora, se eu te mostrar como tudo parece online. Então, como eu disse, eu vou clicar bem aqui, basear isso no meu navegador. Pule bem aqui. E é assim que parece uma vez que está dentro do navegador. Mais uma vez, todas essas opções funcionam da mesma forma que antes de podermos ver. E por exemplo, se eu clicar bem aqui, ele vai fazer a transição para Paris, vai fazer a transição para Hogarth faz assim como você pode ver, tudo funciona como deveria e como nós criamos, se eu clicar aqui é vai nos mostrar bem-estar destino. Então tudo funciona como deveria. E eu também posso rolar para baixo e porque isso tem um monte desses diferentes elementos dentro. Como você pode ver, tudo funciona como deveria. E vamos verificar esses elementos aqui. Então, se clicarmos bem aqui, vai nos levar para ouvir, basta dar tempo para carregar e ele vai remover todos esses soluços diferentes. Finalmente, vamos conferir para a transição para a próxima página, explorador. Agora, como você pode ver, tudo funciona como nós imaginamos e como nós o conectamos. E eu sempre recomendo que você verifique tudo isso antes de enviar isso para o seu cliente. E só para poder dizer, Ok, agora tudo funciona. Certifique-se de dizer a eles que eles deixam. Então está carregado nisso e no lado deles também. Então tudo funciona como deveria. E vamos voltar para casa, para casa. Porque quero mostrar-lhe as opções de comentários. Então você pode convidar as pessoas para ouvir. Você pode simplesmente convidá-los para editar, você pode convidá-los para visualizar. Ou, mais uma vez, você pode simplesmente compartilhar esse link. Eles não precisam da conta da Creative Cloud para poder fazer comentários. É sempre melhor se o fizerem, mas não precisam. E basicamente, o que você pode fazer é compartilhar esse link com eles e então eles vão ser capazes de deixar seus comentários quando se trata de alimentar de volta, o que eles podem fazer é mencionar pessoas. Então, se eles têm uma conta e, por exemplo, seu nome é John e o nome da outra pessoa é, por exemplo, Mark. Você pode simplesmente mencionar a marca, em John, e então eles serão capazes de ver que você os mencionou em uma página particular e em um comentário particular. Aqui estamos em uma página inicial para que você possa clicar, ele vai levar a sua direita aqui para esta página, e você também pode navegar aqui. Então esta é a segunda página, terceira página e quatro páginas, e ele irá conter muitas dessas páginas adicionais se você compartilhar todas elas em um único fluxo, como eu expliquei. E você também pode clicar aqui para voltar para a página inicial quando se trata de comentários, você pode simplesmente deixar um comentário como ele é. Então, obrigado pelo design. Por exemplo, você pode clicar em Enviar e ela estará disponível nesta página específica, que é o design da página inicial, o que é ótimo. E você também pode ver o design da página inicial aqui. Você pode clicar aqui. E ele vai mostrar essas páginas assim. Então, para uma visualização mais fácil, ou eu posso clicar aqui e ele vai me levar de volta para aqui. Além disso, você pode identificar uma determinada parte da sua página. Então, vamos até aqui, por exemplo. E você pode simplesmente clicar neste pin, soltá-lo para aqui, por exemplo, estão diretamente em elementos e dizer, por exemplo, fazer este texto. Por exemplo, você pode clicar em Enviar. E finalmente você pode trabalhar nisso, torná-lo azul, e depois vir aqui e obter um resultado. Vai desaparecer porque você fez essa mudança. Portanto, você pode acompanhar todas as suas alterações. Você pode acompanhar o que seu cliente e exigiu para você fazer essas alterações. E você pode acompanhar onde o projeto está indo nesta fase específica. Você também pode mostrar ou ocultar comentários aqui. E aqui você pode ocultar anotações, que são essas coisas. Então, por exemplo, quando eu clicar aqui, arrastar e digitar mais uma vez fazer esse fluxo, por exemplo, como clique para que eu possa escondê-lo e eles não vão ser capazes de vê-lo, mas eu vou ser capaz de vê-lo. Então, quando um pairar sobre ele, ele vai me mostrar que também, se você fizer mais mudanças, se assemelha aqui. E vamos escrever isto, tornar isto mais estreito. Submeter. Então, quando eu clicar aqui, ele vai me mostrar que é o número 1. Vamos mostrar-lhes por um segundo. Então, quando eu clicar ali vai me mostrar que é este. Quando eu clicar aqui, deve me levar bem aqui, mas não acontece por algum motivo. Aqui estamos nós. Então está me levando aqui e você também pode movê-lo desta posição para esta posição. Mas de qualquer forma, você pode ver que todos esses comentários estão localizados em um design de página inicial. Finalmente, aqui você pode filtrar comentários que você pode rolar para entre, por exemplo, comentários de John marcas comuns. Então você pode fazer o que quiser com que a NSA disse que você pode simplesmente clicar aqui, acertar o resultado aqui. E, finalmente, você também pode excluir esses comentários, clique aqui. E você pode excluí-lo desta página específica. Então, basicamente, é isso. A última coisa é que você pode clicar aqui para entrar no modo de tela cheia. Então você não tem todas essas opções ao lado. Talvez esta seja a melhor opção para apresentar aos seus usuários ou clientes ou qualquer outra coisa. E então você pode simplesmente bater em fuga. E vai trazê-lo de volta a esta página. Então é isso para compartilhar com seus clientes. No próximo vídeo, vamos falar sobre compartilhamento com desenvolvedores. Quais são algumas opções que você pode usar para compartilhar com desenvolvedores? E quais são algumas opções que os desenvolvedores estão procurando para que você saiba para que compartilhá-lo. Então, vemo-nos lá. 54. Compartilhado com desenvolvedores: Os desenvolvedores precisam saber as coisas técnicas enquanto o cliente precisa saber onde a estrutura está indo, você usa as informações que eles solicitaram e o projeto está indo na direção que eles queriam? Mas, mais uma vez, os desenvolvedores querem saber coisas completamente opostas como, por exemplo, qual é o tamanho da fonte que você usa, quais cores você usou? Que espaçamento, margens, estofamento. Então, todos esses tipos de coisas técnicas. Enquanto do outro lado, os clientes só querem ver se você acertou a estrutura. Eles gostam do design? Você incluiu o conteúdo lá dentro? Se a mensagem foi espalhada como eles queriam. É por isso que projetamos opções de compartilhamento para um cliente e, em seguida, desenvolvedores compartilhando opções. Então, se eu voltar ao Adobe XD e mostrar isso a vocês, teremos uma revisão de design, que eu mostrei no vídeo anterior. E aqui temos desenvolvimento. Então eu vou clicar lá. E o que você tem é exportar para a web. E você tem esses ativos para download. Então nós os temos como PNG. Então eu posso clicar aqui para incluí-los no pacote para download. Qualquer pessoa com o link pode vê-lo e eu posso simplesmente apertar Atualizar Link. E mais uma vez, ele vai atualizar este link com todas essas configurações que eu acabei de incluir. E quando terminar, o que podemos fazer é clicar aqui para copiar o link. E eu vou fazer é outra vez, abrir a minha página. Vou pressionar Control V para colá-lo, pressionar Enter e esperar que ele carregue um pouco. Porque, mais uma vez, depende se o seu arquivo é grande ou se é pequeno. E quando terminar de carregar, você pode notar que agora temos essas opções aqui. Então, quando eu clicar aqui, nós temos todos os ativos para desenvolvedores que nós carregamos. Você pode ver nossos logotipos, você pode ver todas essas coisas e eles podem simplesmente clicar nele e baixar se quiserem. E aqui o que temos são basicamente trechos de código. Então eles podem facilmente olhar para essas cores porque eu as criei como tokens de design. Então, se eu levar vocês de volta ao nosso design, por exemplo, se eu abrir nosso painel de ativos e nossos ácidos de documento, esperar que ele carregue um pouco porque nós temos muitos deles. E quando o fazem, você pode ver que todas essas cores são nomeadas corretamente como tokens de cor. E você também pode fazer isso com suas fontes. Então, por exemplo, você pode chamar este título número um. Então H1, H2, H3, você pode fazer isso. Você também pode renomear suas fontes para, por exemplo, fonte de parágrafo. Você pode chamá-lo para sub-cabeçalho, e você pode dar suas fontes todos esses nomes diferentes. Assim, os desenvolvedores serão capazes de entender facilmente onde todas essas fontes estão entrando na página. Então, se eu levá-lo de volta para aqui, você pode ver que nós temos, por exemplo, estrela cor de pêssego, cinza claro laranja, que são basicamente todas as nossas cores aqui. E os desenvolvedores podem facilmente copiar este código hexadecimal a partir daqui, e eles podem incluí-lo sob este nome em seu código. Agora, quando se trata de compartilhamento de desenvolvimento, e quando eu clicar aqui, você pode ver que o tamanho da viewport é 1920 por 1080, que é isso que os usuários veem aqui. E o tamanho geral do design é 1920 por 16.640, que é basicamente quando eles começam a rolar para baixo. Além disso, eles podem inspecionar elementos individuais porque aqui temos todos os nossos ativos, todas as nossas cores, todos os nossos estilos de personagem. E eu nem incluí imagens, que vou mostrar a vocês na próxima parte quando chegarmos a exportar. E isso vai preencher aqui também, para o qual eu vou voltar só para mostrar todas essas opções diferentes. Finalmente, aqui temos Estilos de Personagem. E se eu clicar aqui, podemos ver fonte, família da fonte, peso da fonte, tamanho da fonte, cor, cuidado com o espaçamento e espaçamento de linha para que eles possam saber o que incluir no código. Se eu rolar todo o caminho para baixo, você pode ver diferentes interações. Então lay-out grade, colunas, largura da calha, se você lembrar o que incluímos, que é especialmente importante para design responsivo, temos uma coluna com margens ou basicidade. Então essas margens são apenas para o conteúdo dentro das interações. Então diferentes interações entre diferentes elementos. E você pode ver quantas interações mais fracas, é por isso que este curso obviamente leva tanto tempo. Finalmente, o que eu queria mostrar é isso, por exemplo, eu quero clicar aqui. Mostra-me distâncias diferentes entre elementos diferentes. Mostra-me aqui mesmo. Então largura do texto, altura do texto. Ele me mostra x e y. eixos é mostrar-me font-style. Então qual deles é, é regular, arrojado lata qualquer tamanho. Então, um alinhamento de 120 pixels está no centro. Temos este que é o espaçamento de caracteres altura mentira e assim por diante. Temos aparência. Então cor que é quase preto, e eles sabem o que incluir sua obesidade 100%, que mais uma vez é realmente importante para eles. Conteúdo, ofertas especiais, que é basicamente esta seção inteira. Nós temos o CSS, então no topo esquerdo, uma largura e altura. Eles podem incluir todas essas opções e têm propriedades de interface do usuário diferentes. Então variações para a fonte, temos espaçamento de letras, cor, fonte de alinhamento de texto. Então eles podem usar todas essas informações CSS e colocá-lo dentro do código. Então, estamos tornando a vida dos desenvolvedores muito mais fácil com todas essas opções diferentes, porque anteriormente eles não tinham essas opções. Agora eles fazem dentro do Adobe XD. E, mais uma vez, eles podem simplesmente clicar aqui e escolher entre todos esses trechos de código e eles podem simplesmente incluir em seu próprio design. Agora, isso, o que eu expliquei pode ser aprovado e aplicado a qualquer outra coisa. Então agora eu cliquei bem aqui nós temos o estado padrão, nós temos a data do Horace, então eu posso alternar entre eles aqui mesmo no meu navegador. Você pode ver que o grupo é chamado Paris, que é o nome do componente bem aparência de 100% CSS. Temos interações bem aqui. Então temos todos esses elementos diferentes e você pode até ir mais fundo. Por exemplo, aqui mesmo, posso mudá-lo para pairar. Eu posso clicar aqui. E podemos ver a transição de guias de interação. Destino é o design de destino. Então, qual é a próxima página. Então, o que mostra dois desenvolvedores que tipo de transições eles precisam usar facilidade dentro, fora e todas essas informações diferentes. Então, basicamente, isso é. Sonho do desenvolvedor porque eles podem facilmente navegar seu caminho em torno de todos esses elementos. Eles podem ver distâncias, eles podem ver o estilo, eles podem ver todos os tipos de elementos diferentes dentro, o que também pode ser verdade para isso. Então temos o estado padrão. Eles podem facilmente inspecionar todos esses diferentes estados de nossa navegação. Eles podem ver, por exemplo, onde está esta ilustração, por exemplo, localizada a partir deste texto? Quão longe isso está localizado, por exemplo, dessa borda, dessa borda e assim por diante. Então, basicamente, eles podem navegar em torno da edição e todos esses detalhes diferentes. Você pode ver que estamos a 40 daqui, somos 40 daqui. E eles também podem manter ALT e controle e ver quando eles mantêm o controle e paira as distâncias entre todos os elementos ao redor dos elementos selecionados, como, por exemplo, explorar agora neste caso. Então, finalmente, o que eu quero mostrar a vocês é este, Digamos que eu quero incluir esta imagem, por exemplo, que eu possa clicar sobre ela diretamente. Posso segurar meu controle e clicar. E o que eu tenho aqui é marca para exportação. Então eu não usei essa opção. E eu vou mostrar-lhe isso mais tarde na próxima seção para a parte de exportação. Porque quando você comercializa para exportação pode facilmente marcar todas as suas imagens para exportação, você pode simplesmente clicar nele e clicar aqui, que vai marcá-lo para exportação. Ou você pode simplesmente usar Shift E, que vai marcar esse ativo para exportação. Então podemos mudar aqui mesmo para o pairar. Se você tinha essa imagem com um nome diferente, e então quando você marcá-la para exportação e voltar aqui, ela aparecerá aqui. Então podemos ir para algum lugar lá fora. E com estes ácidos vão aparecer imagens. Então, quando você está marcando para exportação, você pode marcar imagens, você pode marcar ícones. Você pode marcar nesses itens B e G como esses logotipos, ativos Andes são. Então você pode marcar todos esses ativos para exportação e você pode prepará-los assim. Você também pode marcar seus botões para exportação, por exemplo, você pode marcar todos os tipos de elementos diferentes como esses ícones para o topo, por exemplo. Mas eu não recomendaria isso necessariamente. E na próxima sessão, eu vou mostrar diferentes opções que você pode realmente usar quando você está marcando essas coisas para exportação. Porque queremos garantir que os desenvolvedores obtenham o layout perfeito e a estrutura perfeita porque isso vai tornar suas vidas muito mais fáceis, mas também nossas vidas muito mais fáceis porque nós não vamos o layout perfeito e a estrutura perfeita porque isso vai tornar suas vidas muito mais fáceis, mas também nossas vidas muito mais fáceis porque nós não vamos para trás e para frente neste projeto entre nós e desenvolvedores. Então é por isso que estou vendo preparar tudo, que é seu trabalho, que é sua responsabilidade na frente. Então eles não te incomodam mais tarde quando este projeto chegar à fase final. Assim, os desenvolvedores podem fazer o seu trabalho. Você fez o seu trabalho corretamente e todo mundo está feliz na equipe. Então, como eu disse na próxima seção do curso, vamos falar sobre exportação. Eu mostrei essas opções de exportação e vamos falar sobre elas um pouco mais tarde. Mas também vou mostrar algumas opções de exportação diretamente do Adobe XD, que são alguns dos formatos de arquivo para os quais você pode exportar. E quais são algumas opções estruturais para você quando se trata de pastas de arquivos, empacotamento e compartilhamento entre seus clientes e desenvolvedores. Então, vemo-nos lá. 55. Como exportar seus ativos: Quando se trata de compartilhar seus arquivos com seus clientes, geralmente é apenas enviar o arquivo e é basicamente isso. E então esses desenvolvedores de lá podem editar esse arquivo, podem exportar esse arquivo por conta própria. Mas o que eu gosto de fazer é basicamente exportar todos os meus arquivos. Então eu não tenho notícias desses clientes e seus desenvolvedores para esse projeto em particular. Eu sempre gosto de voltar para eles e perguntar-lhes: Você precisa de alguma outra ajuda? Precisa de outra ajuda? Mas como eu fiz meu trabalho corretamente, eles não vão me incomodar no futuro. Compartilhei tudo o que eles solicitaram e muito mais durante o processo de criação deste projeto. Portanto, eles não vão me incomodar mais tarde. Agora, quando se trata de compartilhar, você tem várias opções para compartilhar seus arquivos com seus clientes e desenvolvedores. Mais uma vez, os clientes geralmente estão interessados em como o design se parece. Está tudo funcional? Você incluiu toda a cópia dentro e todas aquelas coisas basicamente cosméticas. Enquanto os desenvolvedores, por outro lado, como ele disse em alguns vídeos anteriores, estão mais interessados nessas coisas específicas, como margens, preenchimentos, cores, tamanhos de fonte, e assim por diante. Portanto, você tem que conhecer o seu público basicamente, quando você está compartilhando com o cliente, basicamente geralmente é suficiente para enviar-lhes o arquivo original, arquivo Adobe XD, e é basicamente isso. Mas quando você está trabalhando com desenvolvedores, você tem que entender a estrutura de arquivos. Você tem que entender diferentes formatos de arquivo porque nem todos os formatos são iguais, não formatos, nem todos os formatos são usados exatamente para a mesma coisa. E é isso que vamos discutir nesta parte da turma. Vou compartilhar com você, como você pode exportar coisas diferentes do Adobe XD e quais opções você está compartilhando? Então, se eu mudar para o Adobe XD e eu mostrarei que aqui temos nosso arquivo. Mas se eu minimizar isso e criar uma nova pasta aqui na minha área de trabalho e chamá-lo, por exemplo, projeto. Desde a minha profundidade e torná-lo um nome, ácidos projeto. E quando eu abrir e trazê-lo aqui, o que eu vou fazer é criar algumas pastas. Então eu vou com uma página inicial. E deixe-me voltar para o XD para ver os nomes dessas páginas. Então o destino é o segundo. Então o número 2 vai estar na distribuição. Vamos ver. O número três vai ser a oferta selecionada. E finalmente, o número quatro vai ser para o pagamento. Então o que eu vou fazer e o que eu costumo fazer é pular dentro de cada uma dessas pastas para cada uma dessas páginas diferentes. E então eu crio meus tamanhos. Então eu vou criar o número um original, que é esse tamanho que nós projetamos, que é 1920. E depois para baixo. E então eu vou criar todos esses outros tamanhos de projeto. Então eu vou criar pasta adicional, chamá-lo de grandes áreas de trabalho. Então eu vou apertar o Controle V, e eu vou renomear isso. Para, por exemplo, três dispositivos grandes. Vou usar o Controle V e ligar para este número de quatro comprimidos. Eu sujeira e faço número 15 fontes. Agora, dentro de cada um desses, vamos exportar elementos separados. Obviamente, não vou incomodá-lo com a exportação de todos os elementos, mas vou mostrar-lhe, por exemplo, aqui na nossa página inicial porque contém a maioria dos nossos elementos, como tudo isso pode ser exportado. Agora você tem duas opções, porque criamos este guia de estilo, que vamos terminar em um segundo, mas nós criamos e você pode exportar todos os seus elementos a partir daqui. Então o que vamos fazer na verdade é selecionar todos os nossos ícones como este. Mas nós temos que selecioná-los de nossa pasta assim então porque nós temos isso aqui. Então, viajando ativos do projeto, temos que localizar essa pasta agora para exportar todos os nossos ativos. E isso é o que eu faço. Basicamente, eu exporto todas as minhas imagens como JPEGs ou PNGs. Eu os exporto como JPEGS se eles não tiverem fundos transparentes. Então, por exemplo, se você está cortando pessoas de imagens, se você está usando imagens de logotipos como fizemos e eu mostrei a você na seção anterior da classe. Ou se, por exemplo, você tem algumas opções diferentes que você inclui como um gradiente ou alguns elementos diferentes que têm seus fundos cortados, então você vai usar PNGs. Mas caso contrário, se apenas tiver imagens planas como temos aqui, por exemplo, para as imagens desses locais e assim por diante, então eu recomendaria que você as exporte como JPEGs. - Obviamente. Depois, você pode otimizá-los ainda mais usando motim ou imagem opt-in para Mac, por exemplo, como já explicado. Ou os desenvolvedores podem fazer isso em seu próprio software. Se eles têm software específico ou quaisquer requisitos específicos, eles podem otimizá-lo ainda mais lá, apenas para tornar essas imagens ainda menores em tamanho do que são aqui mesmo no XD. E o tamanho obviamente é realmente importante quando se trata de carregamento do site. Então, quando se trata de carregamento de página, quanto menores forem seus itens, mais rápido a página vai carregar. Portanto, o Google vai gostar mais de você porque sua página é carregada mais rápido. experiência do usuário para seus usuários é muito melhor. E, portanto, eles vão otimizar mais sua página quando começarem a rolar e rastreá-la. E eles vão empurrá-lo até o topo. Se é bem otimizado para SEO, obviamente. Mas é apenas um desses requisitos para garantir que tudo seja carregado o mais rápido possível, que tudo seja facilmente acessível, facilmente acessível, visível e assim por diante para seus usuários. Portanto, ter todos os seus itens otimizados e torná-los tão pequenos quanto possível em tamanho é apenas um desses muitos componentes diferentes que vem em otimização de SEO. Então, se voltarmos para aqui, como eu disse, se selecionarmos todos os nossos itens, eu vou exportá-los como SVG. E SVG é um ótimo formato de arquivo para ícones porque ele escala para baixo infinitamente. Não vai perder qualidade. Então, portanto, se você estiver exportando seus ícones e você tê-los nesses tipos de arquivos como fizemos. Então podemos editar cada um desses itens aqui. É por isso que eu continuo recomendando Envato Elements e não qualquer um desses itens gratuitos e sites gratuitos. Portanto, certifique-se de exportá-los como SVGs. Porque mais uma vez, os desenvolvedores serão capazes de dimensionar todos esses SVGs em código. Mudanças mansas e mais fáceis facilitam as adaptações. Portanto, SVG é o caminho a seguir. Agora, para começar, eu vou realmente ir aqui com nosso logotipo e eu posso exportá-lo como SVG. Mas como você viu, tivemos alguns problemas ao fazer redimensionar responsivo. Então eu vou simplesmente selecionar esses dois. E eu posso chamar esse logotipo de escuro, por exemplo, assim. E então eu vou para o Controle E. E e bem aqui eu vou me certificar de localizá-lo para viajar pela página inicial. E eu vou usar a página inicial ou ainda melhor. Eu posso, por exemplo, clicar aqui e, por exemplo, criar uma nova pasta chamada ícones e logotipos. Como isso. Selecione-o, clique em Selecionar pasta. E porque, como eu disse, vamos usar PNG como nosso logotipo, basta selecionar design. Png hit export vai exportar. E então vamos selecionar todos os nossos ícones, é por isso que estamos criando o guia de estilo em primeiro lugar hit Control E em vez de PNG, eu vou escolher SVG. Vou escolher a mesma pasta, clique em Exportar. E eu estou usando basicamente essas opções padrão para exportação. E vai demorar um pouco porque as índias têm a cor e eles têm o fundo plano dentro. O que eu também posso fazer é saltar bem aqui. Vá para meus ícones, então volte para aqui, ícones e logotipos. E você pode ver todos esses ícones como suportados como SVGs. E temos todos estes como PNGs, que o nosso logotipo e logotipo escuro. Se uma visão de criança e, em seguida, ícones grandes, você pode ver nossos logotipos, logotipo luz e logotipo escuro em todos estes são exportados obviamente como SVGs. Finalmente, temos essas opções transparentes para todos esses ícones. Também posso exportar isso. Então, por exemplo, eu posso clicar em contorno e, em seguida, eu posso clicar em ícones de contorno de lá. Ou eu posso realmente saltar para a página onde todos esses ícones estão. Eu posso selecioná-los como So. Pressione Control E para esta página específica, para este tamanho específico e, em seguida, exporte-os assim. Então você tem essas duas opções. Você pode ir exportá-los todos de uma vez, como nós fizemos. Eu só teria que mudar tudo isso para delinear estados como este. Clique aqui, clique neste esboço e, em seguida, faça para todos eles e, em seguida, simplesmente exportá-los para fora. O que eu também faria é talvez aqui, certifique-se que eu escolher pasta de cores e colocar todos esses coloridos dentro de lá, e, em seguida, criar outra pasta chamada delineado, e, em seguida, colocar todos esses ícones delineados lá. Além disso, o que você pode fazer é o que eu mencionei anteriormente para essas imagens. Por exemplo, eu posso entrar aqui, selecionar este mercado de imagens para exportação. Mas o problema com o marketing para exportação, e eu posso mostrar isso com, por exemplo, este ícone. Eu posso clicar nele localizado aqui, aqui está. Então mercado para exportação. Se você marcá-lo para exportação, o que você pode fazer é ir direto para o arquivo e, em seguida, exportar. E você pode fazer o lote. E você pode selecionar, por exemplo, SVG ou PNG. Este é o nosso problema porque eu quero que esta imagem seja exportada como um JPEG, mas eu quero que este ícone seja exportado como SVG. Então essa é a sua principal questão e é por isso que eu estou dizendo não usar essas opções porque você pode facilmente marcar isso e criar um guia de estilo como este e , em seguida, exportá-los como eu mostrei a você, e então simplesmente escolher o seu imagens. Então eu vou desmarcar isso para exportação. E então, por exemplo, eu teria considerado marcado. Eu teria ancorado a sua marca. E porque tínhamos este para ser o nosso componente principal, ele apenas criou e as instâncias deste componente. Então, mais uma vez, temos o design da página inicial. Então, vamos para Arquivo Exportar Lote. Eu vou escolher, por exemplo, P&G, e então eu vou escolher o design da página inicial. Então vá para aqui, página inicial original e clique em Selecionar pasta, pressione Exportar. Então, como eu disse, ou como PNGs ou SVGs, ele vai fazer a sua coisa. E finalmente, se formos para essa pasta particular, então homepage original, você pode ver que ele exportou cada coisa que foi marcada, que são basicamente todas essas imagens em tamanhos diferentes, todas essas imagens em diferentes tamanhos. Então, esses quatro basicamente, exportaram todas as nossas bandeiras em tamanhos diferentes e nossos logotipos em tamanhos diferentes. Se eu fizer isso para este, por exemplo, e eu também exportaria isso como PNG, vídeo promocional Color Overlay e vídeo promocional. Você também pode selecioná-los assim. Tão bobos para bater no Controle E, está na mesma pasta que o PNG. Ou melhor ainda, eu posso mudá-los para JPEG, por exemplo, mas eu não vou fazer isso porque este Color Overlay tem uma obesidade, como você pode ver aqui. Então eu vou exportá-los como sendo G. Isso realmente não importa. Você pode exportar imagens planas como esta, por exemplo, sb e G. Realmente não importa. Então, ele vai apenas acelerar seu fluxo de trabalho um pouco mais, mas você também pode exportá-los, pois JPEGS é realmente com você. Então, se eu rolar para a direita aqui, e se eu pressionar Atualizar nesta pasta específica, veja para onde ele os exportou. Aqui estamos nós. Então, vídeo promocional e sobreposição de cores de vídeo promocional. Então você tem todas essas opções diferentes. E vamos tentar com este porque era o nosso principal componente. Então, se eu bater marca para exportação e, em seguida, fazê-lo mais uma vez, então Arquivo Exportação, Lote, PNG, exportação. Deve me dar esse aviso. Então, com todos esses lugares de desculpas. E quando terminar de carregar, deve colocar todas as nossas imagens daqui para lá. Então vamos ver se isso funcionou porque nós fizemos obviamente todas essas grandes e maciças mudanças neles. Então eu só queria ver se ele vai incluir ou clicar com o botão direito e atualizar nossa pasta, porque quem teria tudo isso? Então não incluiu apenas esta barreira. E era isso que eu estava dizendo. Quanto mais mudanças você fizer em seus itens, basicamente, você terá que ir para o mercado de Londres para exportação, mercado errado para exportação. E isso é obviamente muito mais simples se você estiver fazendo isso enquanto você estava projetando. Então, assim que, por exemplo, você posicionar isso, Digamos Barcelona imagem dentro. Assim que você colocá-lo dentro, basta clicar aqui e, em seguida, você esquecê-lo depois de terminar seu design e é hora de exportar, então você vem aqui para o lote de exportação de arquivos, e é isso. Você também pode notar opção de mudo aqui. Então mupling é basicamente essa ferramenta externa que é usada por equipes em todo o mundo, especialmente neste campo UX da interface do usuário. E é realmente extremamente útil no Adobe XD também. Assim funciona mudas de madeira dura e há também muitas opções diferentes lá fora disponíveis. Se você está trabalhando como parte da equipe, talvez consulte sua equipe e veja se há essa opção para você no Adobe XD, porque há muitos softwares e ferramentas diferentes por aí. Realmente, os usuários não sabem qual escolher, mas como eu disse, Zeppelin é um dos maiores. Então, para usar Zeplin, basicamente você teria que pular aqui para nossos plugins. Clique em seus plugins, volte para aqui. E então eu vou clicar aqui para ir à procura de novos plug-ins. E basicamente este plugin é usado apenas para fazer essas integrações entre sua conta Chaplin e sua conta do Adobe XD. Então, é muito mais simples para ele funcionar dessa forma. Então, se eu procurar por ele aqui, eu centralizo, por exemplo, aqui está. Portanto, ele está aplicando para XD, você teria que instalá-lo e, em seguida, conectar sua conta de mudas com seu XD. Então, basta entrar na sua conta de mudas a partir do XD e, em seguida, funciona um pouco diferente. Então, em vez de você compartilhar todos esses elementos diferentes, todas essas imagens e opções diferentes com seus desenvolvedores. Você faria upload de toda a prancheta. E então a amostragem mostraria o que eu já te mostro aqui. Então ele mostraria todas essas opções diferentes, todas essas atualizações diferentes e todas essas configurações diferentes. Assim, os desenvolvedores serão capazes de exportar facilmente esses ativos diretamente de mupling para qual formato de arquivo ARAF eles querem. Então eu estou dando a vocês todas essas opções e exemplos diferentes. Então você pode escolher o que você quer fazer. E às vezes você não pode escolher porque seus desenvolvedores escolherão. Por isso, sempre varia. Depende das preferências do usuário. Então, como eu disse, alguns desenvolvedores realmente gostam de fazer o método do disco, como eu mostrei a você, por exemplo, colocar todos esses ácidos nas pastas. Você pode ver como é fácil exportar apenas os ícones porque basicamente eles não mudam em todo o nosso design e como é fácil exportar imagens. Então, quando você começar a projetar misturas para o mercado para exportações, mais tarde, você simplesmente vai exportar todos os seus ativos para a pasta designada, até o tamanho designado com um único clique. Então vai ser muito mais simples fazer isso. Ou, alternativamente, você pode ir página por página, selecionar todos os seus ativos diferentes, clicar em Control E, selecionar opção, por exemplo, PNG JPEG, PNG, SVG, o que quer, e, em seguida, exportá-los diretamente para essa pasta específica, para esse tamanho particular. Além disso, alternativamente, você pode fazer todos os seus ativos para download, enviá-los para a Nuvem, como eu mostrei a você. E então os desenvolvedores serão capazes de, no modo de desenvolvimento do modo de compartilhamento de apresentação, eles poderão baixá-lo a partir daí. Ou alternativamente, mais uma vez, eles podem usar algo como Zeplin. Então você pode conectá-lo com XD. Você pode carregar suas pranchetas lá. E então eles podem fazer a exportação sozinhos. Realmente, quando se trata desta parte, você tem que aconselhar com os desenvolvedores do seu cliente. Ou, se estamos trabalhando como parte da equipe, você pode falar com os desenvolvedores dessa forma. Ou se você é um desenvolvedor você mesmo simplesmente se certifica de escolher a opção que funciona melhor para você. 56. Terminando nosso guia de estilo: Vamos agora terminar o nosso guia de estilo. Porque mais uma vez, guia de estilo é realmente importante, especialmente para você como designer, porque você pode simplesmente copiar e colar elementos a partir dele. E como um desenvolvedor, porque os desenvolvedores podem facilmente verificar tudo o que eles precisam para verificar dentro. Então, se voltarmos ao nosso projeto e eu o levarei de volta ao nosso guia de estilo. O que realmente precisamos incluir aqui são basicamente duas coisas. Se você estiver usando qualquer tipo de ilustração, eu realmente recomendo incluí-lo aqui também. Porque, mais uma vez, é muito mais fácil, como você viu em um vídeo anterior, exportar essa ilustração. E eu sempre exportava ilustrações como SVGs. Ou se alguns elementos são estranhos, como eles estão bem aqui com este elemento dentro do nosso logotipo, então eu iria exportá-lo como um PNG. Mas basicamente, sempre que você teve a chance com esses elementos vetoriais como eles são com ícones como as ilustrações árabes. Eu sempre, sempre, sempre escolheria exportá-los como SVG porque dessa forma eles vão manter sua qualidade máxima e eles não vão perder essa qualidade sempre que você estiver mudando esses tamanhos de seu documento. Então, como eu disse, se você estiver usando ilustrações, certifique-se de incluí-las aqui. Mas como não estamos, vamos apenas incluir tipografia e porque temos todas essas opções diferentes, mas eu vou fazer é simplesmente estendê-la aqui, certifique-se de remover isso. Então o que você pode fazer é simplesmente dividir todas essas seções. Então vamos mover isso aqui, e é por isso que eu incluí-los como pastas. E eu vou clicar aqui e digitar sendo logo, por exemplo. Opções de logotipo. E vamos ver, eu vou usar algo maior como 36 negrito, por exemplo. Vou alinhá-lo aqui mesmo. Vou certificar-me de que estou a 80 a partir daqui. E eu também vou ter certeza que eu tenho 80 a partir daqui, ou melhor, 100 assim. Então eu vou duplicar isso, ter certeza que eu tenho 100 aqui e usar ícone ou iconografia, o que você quiser. Posicione isso aqui, certifique-se que tenho 100 anos. E depois Controle D 100. Mais uma vez, eu, que eu vou ter certeza de chamar isso de cores. Clique aqui. Por alguma razão, é estranho, mas vamos colocar aqui, importa. E finalmente, controle D. Certifique-se de que está aqui e chame isso de tipografia. E para a tipografia, Vamos estender isso um pouco mais para baixo porque temos todas essas opções diferentes para incluir. Então atingiu a mistura de controle D. Eu tenho 80 anos. E eu vou começar basicamente com a minha maior fonte e depois ir até o fim. Então você pode encomendá-los assim. Então eu posso clicar aqui, posicionar isso no topo, então, bem com 120, então ir com 100. Olá IT AT e eu posso ir com 36. E então use 24, que é este escuro, 24, que é este. Você nem precisa incluir essas opções diferentes. Você pode mudar as cores como eu mostrei ao longo do design. Mas lá nós gostaríamos de dar isso aos desenvolvedores apenas para que eles possam ver todas essas mudanças diferentes que eu fiz em nossos textos. Então vamos começar com o maior, que é este. E o que eu gosto de fazer é ter um arquivo de texto com as letras do alfabeto. Basta selecionar isso, certifica-se de que o texto está alinhado à esquerda e eu posso simplesmente clicar ali e posicioná-lo lá. Você pode fazer isso se você quiser, mas eu vou fazer bem, é, por exemplo, chamar este refrigerante para centenas, BT. E simplesmente deixe-o lá. Certifique-se de que eu sou 100, por exemplo, controlar o, certifique-se de que eu sou 100, este, certifique-se 120, então eu posso ajustá-lo assim. Então este é 120. Controle a posição aqui em algum lugar, aqui é 100. E eu posso colocá-lo bem aqui. Controle D 100, aqui é 80. Então eu vou mudar isso para 100. Isto vai ser um 2. Eu fiz. E finalmente, agora que todos eles estão acabados, eu posso seguir em frente com meu alfabeto e incluído, porque você pode incluir alfabeto com este, mas você viu quão grande vai fazer seu arquivo. Você também pode clicar e mover isso aqui e movê-los aqui na mesma linha. Então, tudo depende de você. Como você deseja ajustar isso, como você deseja trabalhar com ele. Mas eu vou simplesmente usá-lo assim. Vou clicar aqui e mudar o nome. Então este vai ser Poppins. E eu posso chamá-lo, por exemplo, parafuso 36, BT. E então eu posso incluir meu alfabeto assim. Mas porque ele vai até aqui, talvez o que eu possa fazer é simplesmente clicar assim e posicioná-lo assim. E o Controle D. Vou me certificar que são 100. E eu vou chamar isso de Poppins 24. Então clique aqui. Agora que você tem o texto, é bem simples. Então, 24, apenas certifique-se de usar as configurações. Você também pode incluir espaçamento entre linhas. Você pode incluir espaçamento de caracteres, Lucan incluem espaçamento de parágrafo, altura de linha, o que você quiser, você pode incluir aqui. Mas como ele disse, eu acho que é um pouco de perda de tempo porque os desenvolvedores que também têm isso incluído. Quando você compartilhar, vou posicionar isso aqui e clicar duas vezes aqui. Então isto é leve. Então, em vez de ousado, vamos usar luz 24. E eu vou mudar seu nome para este aqui. As mudanças parecem mais vermelhas apenas para que possamos vê-las. E eu não vou incluir texto branco porque é difícil de ler. Mas eu incluí este porque nós só tivemos uma instância. Mas com este 24, também temos opções brancas, escuras, ousadas e irregulares com essa cor, que é cinza escuro. Finalmente, estamos em 24. Vamos incluir isso como 18. Então eu vou com 18. E eu vou mudar isso para uma linha ousada. Isso garante que estamos 100 de Controle D. mais uma vez. Vou incluir isto como um leve. Mas, por exemplo, posso mudá-lo para cinza escuro. E isto vai ser luz 18. Certifique-se de que estamos em 100 com este também. E finalmente, eu vou expandir isso um pouco mais para baixo, apenas para que eu possa incluí-los no meu último, que é este que é 16. E é leve também assim. E laticínios como é assim que esta é a nossa tipografia. Este é o nosso guia de estilo concluído para este projeto em particular. O que também podemos incluir aqui é que podemos colocá-los todos em grupos separados. Então deixe-me mostrar-lhe isso em um segundo. Então volte para aqui para as camadas. Então nós temos nossas cores, nós temos nossos ícones, logotipo, e nós temos nossa tipografia. Então eu vou colocar o meu tipo bem aqui, selecionar todos eles. Controle G chamou isso de tipografia. E o que eu me certificaria de fazer é alinhá-los corretamente. Então isso vai acontecer aqui, aqui. Aqui. Obviamente você não tem que fazer isso, mas eu realmente gosto de manter minhas coisas organizadas como você viu durante toda a aula. Então não é grande coisa para mim, mas vai ser muito mais agradável para os desenvolvedores e para os clientes. Eu posso colocá-lo bem abaixo de nossas cores, dentro de nossas cores, eu posso colocar este texto aqui. Dentro dos ícones. Posso colocar as mensagens aqui. E você também pode colocar os ícones em um grupo. Por exemplo, primeira linha, segunda linha, terceira linha ou contorno colorido. Você pode fazer o que quiser. N Finalmente, para as opções de logotipo, eu posso colocá-lo aqui. E agora posso agrupar todos eles e criar uma pilha. Então, por exemplo, posso substituir esses espaços e me certificar de mudá-los. Mas o que isso também me dá, deixe-me mudar isso para guia de estilo é a opção de uma pilha para trabalhar como deveria. Então, o que eu vou fazer nessas cores, eu vou simplesmente usar minhas cores e usar esta última amostra de cores, por exemplo. Vou duplicá-lo. Aqui está. E eu vou movê-lo para baixo. E vamos ver, temos 80 aqui, então vamos ter 80 aqui. E eu também vou movê-lo para cá. Vou usar esse e também vou bater no Controle D mais uma vez. E eu vou posicioná-lo bem aqui. Então o que isso vai ser é a nossa sombra. Então vamos substituir a temperatura assim. Isto vai ser uma sombra de gota ou uma luz de sombra ainda melhor. Isto vai ficar escuro assim. Então, na luz de sombra, eu vou usar uma cor branca neste também. Cor branca. E o que vamos fazer é copiar essa sombra de algum lugar. Por exemplo, vamos aqui. Selecione esta opção, clique com o botão direito e copie. Você também pode ir com 55, 10, e depois escolher 5, que é ainda mais apropriado para nós em ainda mais utilizável. E eu vou clicar aqui em uma cor. Eu vou chamá-lo na verdade, não, vamos sair com cor. Então eu vou ou clique com o botão direito colar aparência, Ele vai colar essa sombra. Também posso fazer isso manualmente. Então vá com 55 para dez e, em vez de cinco, vou ajustar isso para oito assim. Então isso vai ser, por exemplo, vamos ver. Podemos ir com x, y ser 55, 10. Então eu posso chamá-lo x, y. isso vai ser 5, 5, 10, ou basicidade 5% por exemplo. E posso clonar isto aqui mesmo. E isso vai ser em 8%. Então, mais uma vez, os desenvolvedores podem facilmente fazer isso e nós apenas temos que selecionar essa cor, que vai ser descolorida. Então copie. Vou pular aqui, colar essa cor. Então vamos ver isso mais uma vez. Vai ser tudo zeros. Então seis zeros saltam aqui, 1, 2, 3, 4, 5, 6. Ele selecionou Controle C, Novamente selecionado aqui controle V. E o que eu posso fazer é também certificar-se de, por exemplo, posição e direita aqui, e ter certeza de que eu estou em dez. E faça a mesma coisa por este. Certifica-te de que estou às dez, e certifica-te de que está alinhado à esquerda. Igual a este só no caso de eu querer fazer algumas alterações adicionais em algumas das minhas cores. E porque todos eles estão em uma pilha, todos eles ajustados bem e você pode simplesmente fechar isso. E, finalmente, quando se trata deste guia de estilo, você pode exportá-lo como um PDF. E você também pode salvá-lo em seu arquivo como estamos fazendo basicamente quando se trata de compartilhar seu arquivo com seus clientes e desenvolvedores. O que eu faria é basicamente compartilhar todo o meu arquivo. Então tudo o que você viu aqui, eu iria compartilhar com eles eu não iria remover design breve ou com mantido direito em se eles querem que eu para exportar o resumo de design, nossa exportação como um PDF e, em seguida, eles vão ser capazes de imprimi-lo, mostrou que dois lá. Por exemplo, colegas proprietários de negócios, parceiros, designers, desenvolvedores, quem mais estiver na equipe. E então eu também me certificaria de exportar, por exemplo, guia de estilo se eles quiserem como um PDF, compartilhar isso com eles. E esses wireframes de papel, eu os exportaria como simplesmente imagens JPEG, para que eu possa compartilhar isso com eles se eles quiserem. Quando se trata de guia de estilo, como eu disse, você pode exportá-lo como PDF se eles quisessem imprimi-lo. Você pode gastar tanto tempo e esforço quanto quiser para este guia de estilo. Mas na minha opinião, realmente, essa estrutura básica é realmente tudo o que é necessário, tudo o que é suficiente para esses tipos de projetos porque eu vi esses guias de estilo na web e você pode ver essas mudanças elaboradas, elaboram configurações onde os guias de estilo, mas eu realmente não acho que isso é necessário, especialmente se você não tem tempo enquanto trabalha nesses projetos, porque isso vai facilmente comer em seu tempo, em seu orçamento. E isso vai realmente variar você fora enquanto não é realmente tão necessário. Então, crie seu guia de estilo à medida que você constrói seu projeto, medida que você adiciona mais e mais elementos, basta ir em frente e construir seu guia de estilo e adicionar mais a ele. Mas basicamente, é isso. É assim que é fácil trabalhar com guias de estilo. E é por isso que eles são importantes, especialmente quando se trata de exportar em seus ácidos, porque você pode simplesmente selecionar todos os seus ativos, clicar em Control E e exportá-los em qualquer formato de arquivo que você quiser. 57. Projeto de curso Skillshare: Para o seu projeto de classe Skillshare, eu realmente gostaria que você recriasse uma dessas páginas, mas você pode usar elementos diferentes. Por exemplo, você pode usar fontes diferentes, você pode usar cores diferentes, você pode usar ícones diferentes. Você pode usar imagens diferentes apenas para apimentar as coisas um pouco e aprender um pouco melhor. Porque se você seguir esta classe passo a passo, você vai aprender muito, mas você vai aprender ainda mais quando você tentar e usar diferentes elementos que você encontrar online, especialmente com imagens, porque nem todos essas imagens vão escalar exatamente o mesmo em diferentes cenários. Portanto, eu acho que com imagens, especialmente, você vai mudar a aparência geral do seu design e a sensação geral do seu design muito mais do que, por exemplo, com fontes. Eu também encorajaria você a escolher fontes diferentes, para escolher cores diferentes, ícones diferentes, apenas um tempero as coisas um pouco ao usar esses métodos, você também pode usar este layout exato. Você pode usar essa estrutura exata, nomes de pastas. Tudo pode ser o mesmo, mas simplesmente apimente um pouco adicionando imagens diferentes, adicionando ícones diferentes, cores diferentes, topografia diferente. Então todas essas coisas, e isso vai ajudar você a aprender tudo isso muito mais e muito mais rápido e muito de uma maneira muito melhor. Depois, seguindo-me passo a passo e simplesmente fazendo o que faço para criá-los. Você pode simplesmente criar pranchetas adicionais dentro deste arquivo e, em seguida, simplesmente seguir passo a passo, porque isso vai ser muito mais fácil para você, então simplesmente verificar seus erros e ver o que eu fiz e verificar se você fez isso corretamente. E isso vai ajudá-lo muito, porque você terá tudo dentro do mesmo arquivo para que você possa facilmente comparar e contrastar. Obrigado mais uma vez por fazer esta aula e eu realmente estou ansioso para ver o que vocês estão indo para criar para seu projeto de classe Skillshare e certifique-se de enviar isso como uma imagem para que você possa exportar toda a prancheta, por exemplo, como um JPEG. E você pode carregar esse JPEG para projetos de classe Skillshare. E eu realmente estou ansioso para ver o que vocês podem criar e espero dar-lhes algum feedback também, sobre o que vocês podem seguir em frente. Mas como eu disse, tentei apimentar as coisas um pouco adicionando, por exemplo, cores diferentes, topografia diferente e imagens diferentes. Mais uma vez, estou ansioso para ver o que vocês podem criar. 58. Conclusão e recursos: Obrigado por assistir esta aula. Eu realmente espero que você tenha algum valor fora disso. E eu realmente espero que você vai aplicar o que você aprendeu nesta classe em seu fluxo de trabalho. E eu realmente espero que você tenha pego algumas dicas aqui e ali. Não vão melhorar o seu fluxo de trabalho e acelerar o seu fluxo de trabalho, que eu acho que é a coisa mais importante no negócio de design em geral, é ser capaz de trabalhar rapidamente e ser capaz de trabalhar da maneira inteligente sem perder muito do seu tempo porque no final do dia, tempo é dinheiro neste negócio como em qualquer outro negócio porque você pode chegar a qualquer coisa que você quiser. Mas se você não tem tempo suficiente que realmente simplesmente, não importa. Então você tem esse arquivo, você pode brincar com ele. Certifique-se de seguir as diretrizes que eu disse para usar essas imagens e esses ícones para apenas certificar-se de usá-los como ferramentas de aprendizagem. Certifique-se de usá-los apenas para aprender a usá-los neste projeto. Não os use para seus projetos pessoais ou comerciais. Porque se você fizer isso, então você está arriscando todas essas questões legais. Certifique-se se você quiser usá-los, você pode usar Envato Elements e eu vou deixar os links para tudo o que eu estava falando no checkout PDF, esse PDF e simplesmente clique no link que lhe interessa, visite esse link e depois faça o que quiser com isso. Basicamente, tudo o que estou dizendo é prática, prática, prática, prática. Só o torna perfeito. Então, quanto mais vezes você fizer isso, mais vezes você praticar a criação desses arquivos, criar esses layouts, você será melhor nisso. Então, obrigado mais uma vez por assistir e eu realmente espero que você tenha algum valor desta aula e que você vai aplicar esse valor ao seu trabalho futuro. Cuide-se.