Masterclass Adobe Xd — design de UI/UX do início

1. Introdução do curso: Ei designer e meu nome é Alex e bem-vindo a essa classe de compartilhamento de habilidades. Eu sou o fundador de doadores web, produtos de design muito criativo para criativos como você, eu também sou um professor e até agora mais de 30 mil alunos concluíram meus cursos. Nesta classe mestre registrada de mais de 20 horas, você aprenderá o básico do Adobe XD e o que ele pode fazer, como criar um ótimo design, breve. Criar arquitetura de site. Desenhe seus wireframes em papel e, em seguida, importe-os e crie-os no Adobe XD. Crie designs complexos adicionando cores, imagens e animações. Compartilhe esses projetos com os clientes para obter feedback. Crie um design responsivo com vários tamanhos. Apresente seus projetos em um portfólio. E, finalmente, como exportar seus ativos para desenvolvedores usando padrões do setor. Esta aula abrange tudo o que você precisa saber para começar no design de UX da interface do usuário, ou para melhorar suas habilidades, não importa o nível que você está no momento. Você não precisa de nenhum conhecimento prévio de UI, UX ou Adobe XD, vamos abordar tudo neste curso. Seu projeto de classe é criar um site projetado usando as dicas e técnicas que você aprende com esta classe. Então, se você quiser empregar suas habilidades e produtividade, economize muito tempo e dinheiro em iterações V e mudanças e criar projetos promover que eu vou vê-lo na sala de aula. 2. Visão geral do curso: Olá designer Alice aqui e bem-vindo ao curso. Eu realmente espero que você vai encontrar valor nele e eu realmente espero que você vai aprender algo novo ou que você vai melhorar seu conhecimento do Adobe XD ou do processo de design e criação de site design. Então, neste primeiro vídeo deste curso, eu realmente gostaria que você apresentasse o curso, o que vamos fazer, e como vamos começar. E a primeira coisa que vou mostrar é a visão geral do nosso projeto. E eu vou orientá-los muito rapidamente o que vamos fazer neste curso. Por que é tão longo e por que eu levei tempo para criá-lo? Então, primeiro de tudo, vamos explorar nosso resumo de design. Vou mostrar-lhe o resumo de design após a introdução ao Adobe XD parte do discurso. Então, se você estiver familiarizado com dx, dy, se nós soubermos como usá-lo, você pode simplesmente pular essas lições. Mas se não, eu realmente encorajo você a percorrer essas lições e apenas para se familiarizar com o Adobe XD como uma ferramenta, o que ele pode fazer e como ele pode ajudá-lo a elevar seu jogo de design de UI e UX. Então o que vamos fazer é ler o resumo de design que você considera do cliente. Eu também mostrarei um modelo que você pode usar para seus próprios projetos. Vou dizer-lhe e explicar-lhe como é que conseguimos toda essa informação? E depois vamos guiá-lo através de como você pode explorar uma personalidade diferente? Como você pode explorar diferentes casos de uso e diferentes públicos e dívidas estarão usando seu produto, neste caso, o design do site. E então vamos começar com wireframes de papel e vamos criar coisas como estas. Então vamos começar com apenas um pedaço de papel simples e vamos desenhar nele usando caneta simples ou lápis. Nós também podemos usar esses marcadores coloridos como você pode ver aqui. E então eu vou mostrar a vocês como você pode trazer todas as portas pagar fornecer quadros para o Adobe XD. Agora você pode estar se perguntando, por que eu deveria soltar wireframes de papel e, em seguida, fazer tudo o mesmo no Adobe XD, é bastante simples. Talvez você precise compartilhar esse arquivo com outros designers. Talvez você precise compartilhar esse arquivo com seus clientes e é muito bom ter esses pedaços de papel como esta linha ao seu lado. Mas, por exemplo, se você precisa compartilhar isso com alguns colegas de equipe com os clientes, em qualquer caso, talvez até mesmo com os desenvolvedores apenas para que eles possam verificá-lo nesta fase inicial do projeto, então você precisará algo para compartilhá-los largura para que você possa tirar, uh, tirar uma foto com seu telefone e, em seguida, trazer essas fotos dentro do seu computador, arrastá-las e soltá-las no Adobe XD. Ou melhor ainda, se você tiver um scanner, não é obrigatório, mas se você tiver, é ótimo. Você pode digitalizá-lo e simplesmente trazê-lo para dentro do Adobe XD. Vou ampliar apenas um pouco em nosso arquivo Adobe XD, que é o que isso é e o que você pode ver aqui. Então eu vou orientá-los através dos passos e vamos dar ao longo do discurso para alcançar o resultado final. Então, primeiro as coisas, vamos começar com wireframes de papel e você pode vê-los aqui, como eu disse. Então estes são todos os nossos quadros de papel. E nós vamos desenhar todos esses wireframes em um pedaço de papel. Vou explicar-vos todas as minhas decisões porque escolhi fazer estas coisas. Vou mostrar-lhe como você pode escrever anotações apenas para lembrar a si mesmo ou para explicar para seus companheiros ou para cliente algumas de suas decisões e por que você escolheu essa decisão sobre outra música, outra coisa, para exemplo. Então vamos criar essa arquitetura do site. Vamos conectar todas as páginas entre eles. E eu vou explicar a vocês o fluxo do site onde os usuários estão indo para clicar em páginas ricas, eles vão visitar, para onde eles vão de lá e assim por diante. Depois que isso for concluído, vamos passar para wireframes no Adobe XD. Agora você pode estar se perguntando para si mesmo, Por que eu deveria criar wireframes duas vezes? Bem, é muito mais fácil colocar idéias apenas em um pedaço de papel e apenas desenhá-los rapidamente para baixo, apenas Sukh e obter o senso geral, uma imagem geral do seu projeto e oferecer uma direção de design, por exemplo. E então uma vez que você tem dívida, uma vez que você mostrou isso para o seu cliente em qualquer jpeg, como estes estão aqui, ou como um PDF, por exemplo. Assim, você pode combinar tudo isso dentro do Adobe XD ou qualquer outro software em um grande PDF. E você pode enviar esse PDF para o seu cliente que ele possa verificá-lo e ver por si mesmos se isso é algo que eles gostariam de prosseguir com este projeto depois de tudo isso estar concluído e seu exemplo de Fourier obter um luz do seu cliente. Então você vai seguir em frente dentro do Adobe XD e, em seguida, começar a criar wireframes. Como você pode ver, vamos criar todos esses wireframes no Adobe XD. Vou mostrar-lhe como você pode usar e reutilizar determinados ícones. Como você pode criar estilos de fonte, como criar cores personalizadas, torná-las como um componente e, em seguida, aplicar essas cores em todo o design. Eu também vou mostrar-lhe alguns plug-ins para criar estas bandeiras aqui, por exemplo, eu não vou para mostrar-lhe alguns plugins diferentes mais tarde para algumas outras coisas. E depois de concluirmos o design do site, também vamos criar uma tela de painel porque os usuários precisam fazer login a partir deste site e entrar no painel onde eles têm todas as suas informações pessoais. E como este é um projeto bancário, eles terão acesso às suas contas, terão acesso aos seus cartões, empréstimos e assim por diante. Então vamos criar dívidas. Agora, a importância desses wireframes no Adobe XD é que você pode compartilhá-los com seu cliente para obter feedback. Quando eles fornecem feedback sobre esses wireframes , você é capaz de fazer algumas alterações nesses wireframes. Areia densa que volta para revisão. Eles podem fornecer mais feedback e você pode seguir em frente com feedback sobre esses wireframes. Ou você pode aplicar o feedback que você tem e começar a criar designs. Agora, quando você começa a criar designs, como você pode ver aqui, você vai começar a incluir cores diferentes porque se você olhar aqui, você pode ver que é apenas cinza em branco, talvez até mesmo algum cinza mais escuro . Então, essas são apenas a sua cor básica para levar suas ideias ao seu cliente e talvez até mesmo aos desenvolvedores, talvez colegas de equipe, para que você possa reunir todo esse feedback. Estou contando tudo sobre feedback na parte de compartilhamento deste curso. Então eu realmente encorajo você a saltar de volta para a dívida parte do curso. Então você pode assistir todo o curso ou você pode pular direto para essa parte só para se familiarizar com a dívida. Então, tudo depende de você. Como você quer assistir a este curso? Finalmente, vamos começar a desenhar. Nós estamos indo para projetar todas essas páginas, e nós também vamos adicionar algumas animações agradáveis e personalizadas. Vamos dividi-los em fluxos. Isso é o que você vê aqui onde diz design de site, design painel e assim por diante. Vamos ligar todas essas páginas. E como você pode ver aqui, nós apenas temos uma tela de painel dentro do nosso wireframe porque nós vamos continuar construindo a partir daí. E vamos criar todas essas outras telas de painel. Agora, se eu levá-lo aqui e apertar este botão de pré-visualização bem aqui, ele vai abrir na janela externa. E então eu posso mostrar a vocês o que fizemos aqui mesmo com este design enriqueceu a animação. Então nós incluímos algumas animações personalizadas e alguns realmente cuidadoso um colocação planta dessas animações. Então, se eu passar o mouse, você pode ver esses efeitos sobre esses botões. Você pode ver que este menu está nos seguindo. À medida que percorremos. Você pode ver esses efeitos de horror. Esses cartões, por exemplo, você pode ver como isso funciona. Incluímos alguns efeitos mais tarde com esta parte também. Há algum efeito de horror aqui e esta navegação funciona. Então, se eu clicar em minhas contas, por exemplo, vai me levar para a página de contas onde eu tenho todos esses ícones, por exemplo, que quando você clicar neles, vão mudar. E todas essas informações também vão mudar para corresponder melhor com todas essas informações aqui no topo dizendo a seleção que você escolheu. Nós também temos nosso efeito sobre esses botões. Nós também temos Q e a. Nós temos esta pequena pasta agradável e assim por diante. Depois disso, vou mostrar como podemos criar essas páginas de login e inscrição, que você pode ver aqui. E depois de fazer login, ele irá levá-lo para o seu painel onde você tem todos esses efeitos de paginação para esses cartões. Por exemplo, você tem esses efeitos bem aqui no topo. E também posso levá-los a páginas como esta onde vou mostrar como podemos criar esses gráficos animados. Como você pode criar esses botões, como pode criar esses grupos roláveis e muito, muito mais depois que o design é concluído, depois de reunir feedback suficiente, depois de ter feito tudo isso e emissões, que eu vou orientá-los passo a passo, como podemos criá-los de uma maneira inteligente usando componentes, e como você pode então reutilizar esses componentes mais tarde, você vai passar para um design responsivo. Vou compartilhar com vocês qual é o design responsivo. Eu vou mostrar a vocês todas essas grades e tipos de grade diferentes, como eles vão trabalhar dentro do nosso design. E eu vou mostrar como podemos criar esta página inicial, que é esta página e ajustada em quatro tamanhos diferentes. E Dan, eu vou fazer o mesmo e mostrar como você pode fazer exatamente a mesma coisa usando os mesmos princípios na tela de design do painel também. Nós não vamos criar um design responsivo para todas as páginas apenas para o bem do tempo. Mas se você quiser, eu realmente encorajo você a testá-lo em tentar por si mesmo com todas essas páginas que vamos criar neste curso, porque essa é a melhor maneira que você vai aprender. Você vai aplicar esses princípios de qualquer maneira quando você começar a trabalhar com seus clientes ou se você já está trabalhando com seus clientes, esta é uma ótima maneira apenas para melhorar seus conhecimentos ou para pegar algumas novas técnicas que O Adobe XD pode fornecer a você. Finalmente, depois de termos concluído este design responsivo, vamos passar para o guia de estilo do projeto. Vou mostrar-te como podes partilhar os teus desenhos com o teu cliente. Como podemos reunir feedback, Coca-Cola e compartilhar projetos com desenvolvedores, dando-lhes ativos que eles podem baixar e usar em código. Como pode compartilhar código CSS personalizado? Como você pode usar e criar todos esses ativos de documentos aqui. Então, quando a carga, você pode ver que criamos esses tokens de cor. Criamos estilos de personagem diferentes. Nós criamos um monte desses componentes diferentes. Então eu vou mostrar a vocês como você pode compartilhar todas essas coisas com seus clientes e com seus desenvolvedores. Vamos discutir como podemos coletar feedback e como você pode receber esse feedback em qualquer parte do seu projeto. Então, se isso é nesta parte, nesta parte, no design Barth e parte responsiva. Ou, finalmente, quando você começar com o guia de estilo do projeto. Finalmente, ele, vamos encerrar este projeto. Vamos criar o guia de estilo do projeto. E eu vou mostrar a vocês como você pode exportar manualmente todos os ativos deste projeto para mostrá-los para seus desenvolvedores e clientes, eu vou mostrar a estrutura de pastas. Vou mostrar-lhe diferentes técnicas de exportação de ativos, diferentes formatos de arquivo, como eles correspondem uns com os outros, para o que você pode usar, qual formato de arquivo e muito, muito mais. Eu também vou mostrar-lhe tamanhos diferentes e como você pode trabalhar com tamanhos diferentes. Então, por exemplo, para todos esses e como você pode exportar ativos rapidamente? Como fazer, não repetir a exportação de ativos? E como você pode melhorar esse processo ainda mais, acelerar um pouco as coisas. Então, basicamente, esse é o nosso projeto e você pode ver o quanto há em branco. O curso dura tanto tempo. Eu realmente espero que você aprenda algo novo com o discurso. E eu realmente espero que você vai aplicar o conhecimento do discurso em seu trabalho futuro. Então, como eu disse, primeiro vídeo depois deste vídeo é apenas orientá-lo através do projeto em si. Então, se você quiser, você pode assistir que depois desse vídeo vem a parte de introdução ou para o Adobe XD. Então, mais uma vez, se você não está familiarizado com o Adobe XD, se você não sabe o que é possível, haverá UCSD. Eu realmente encorajo você a assistir essa parte do curso antes de realmente passar para esta parte do curso quando vamos começar com o projeto do projeto. Então, vemo-nos lá. 3. Introdução à Adobe XD: Nesta seção do curso, vamos explorar o Adobe X, essas ferramentas e recursos básicos. E eu vou realmente recomendar para quem está apenas começando com o design UX UX ou com o próprio Adobe XD para verificar esta parte do curso, porque ele realmente contém algumas das informações mais valiosas sobre todas as ferramentas que O Adobe XD tem para oferecer. Ferramentas sobre design porque ferramentas de prototipagem, vamos explorá-las um pouco mais tarde no curso, uma vez que realmente começamos a prototipar nossos projetos e adicionar alguma animação e algum tempero a ele. Mas antes de tudo isso, mais uma vez, se você está apenas começando, se você não sabe o que é o Adobe XD, se você não sabe o que você está no design de UX. E então eu vou realmente recomendar para você para verificar esta parte do curso para se familiarizar com alguns desses atalhos. Porque haverá ferramentas realmente valiosas para entender, especialmente quando você começar a seguir em frente e em frente através deste curso. E nós vamos pegar algumas coisas extremamente complexas mais tarde no bug do curso. Antes de tudo isso, eu realmente recomendo para vocês para verificar esta seção do curso, porque como eu disse, ele contém algumas das dicas e técnicas mais importantes do Adobe XD e sobre todas as suas ferramentas básicas para o design. Na próxima seção do curso, vamos começar realmente projetando, vamos planejar. Vamos processar tudo, desde o próprio processo de design. Então, mais uma vez, se soubermos como fazer todas essas coisas, você pode simplesmente pular essa parte do curso. Mas se você não fizer isso, eu realmente recomendo para vocês para verificar e para se familiarizar com todas essas ferramentas e recursos. Então, vejo-te no curso. 4. Instale o Adobe XD: Neste primeiro vídeo desta série, onde eu passo você através do Adobe XD, suas características e todas as suas funções. Vamos explorar o aplicativo de desktop criativo em nuvem. Então, você pode acessar o site oficial da Adobe, Adobe.com, se você não tiver esse aplicativo de desktop da Creative Cloud. E é basicamente usado para todas as atualizações e todas as instalações de cada software que a Adobe tem para oferecer, incluindo um Adobe ser x D. Então é assim que vai ser. Então você pode criar sua conta gratuita e você pode acessá-la a partir daqui. Você também pode conectar sua conta Behance se você tiver uma, e ela será exibida aqui. E aquelas de suas notificações aqui, bem aqui, você tem aplicativos de área de trabalho, você tem aplicativos móveis e você também tem aplicativos da Web. Assim, a maioria desses aplicativos de desktop tem pelo menos versão móvel. E se não, alguns deles também podem trabalhar em uma Web. Por exemplo, fontes Adobe onde você pode baixar fontes, Obviamente, Adobe Stock onde você pode obter fotos de estoque, portfólio, Acrobat, e assim por diante. O que nos interessa são os aplicativos de desktop e o Adobe XD. Então aqui eu tenho ele instalado, como você pode ver, e ele está atualizado quando não está atualizado, você pode simplesmente, como ele diz, bem aqui, clicar em atualizar. Você verá Atualizar barra de progresso aqui. Ele irá atualizar-se para a versão mais recente e, em seguida ele irá exibir esta mensagem visitantes atualizados. Como você pode realmente instalá-lo? Onde é bastante simples a partir desta lista, aqui, você tem este botão de instalação ao lado do Adobe XD, como eu disse, já tem instalado para que você não possa vê-lo, mas simplesmente clique em Instalar. Ele pedirá que você o instale como qualquer outro software em seu computador. Funciona tanto no Mac como no PC. E uma vez instalado em sua máquina, ele dirá instalado um atualizado. E basicamente para abri-lo, você pode simplesmente clicar aqui. E quando você faz isso, tela aparece e deixa-os rapidamente esconder a disciplina fora da vista. E no próximo vídeo vamos explorar este verde, que é chamado de tela inicial. E essa é basicamente a primeira coisa que você vê depois carregar o Adobe XD a partir deste aplicativo de desktop da Creative Cloud, você não precisa carregá-lo a partir daí. Há também um atalho de área de trabalho para poder abri-lo como qualquer outro software. Mas eu realmente recomendo que você verifique periodicamente se há alguma atualização porque essa é a maneira mais fácil de iniciá-lo e acessar todos os seus recursos. 5. Tela home: Então aqui temos a tela inicial, como mencionei no vídeo anterior. E aqui, na tela inicial, você pode acessar todos esses recursos médios antes de começar a trabalhar no Adobe XD. Então, abaixo da tela inicial, temos a guia Aprendizagem. E uma vez que você clicar nele, ele trará esses tutoriais do Adobe XD steam. E você pode ver como nossos compartimentos Q0, que é basicamente o evangelista deles na Adobe Steam, você pode ver sobre como começar, sobre design, protótipo, sistemas de design de colaboração, todos esses tutoriais diferentes para ajudá-lo uma vez que você começa ou quando você fica preso, por exemplo, é a maneira fácil de acessar todos esses tutoriais, mas tudo o que temos documentos em nuvem, e esses documentos são obviamente enviados para a nuvem. E como o Adobe XD é principalmente baseado em nuvem, você pode usá-lo apenas como um aplicativo de desktop. Se você, por exemplo, não tiver acesso à Internet ou não quiser carregar seus arquivos para a nuvem. Mas se o fizer e optar por fazê-lo, poderá ver os seus documentos na nuvem aqui mesmo. E como você pode ver, eu estou em um iniciante, um plano para um discurso porque eu quero mostrar-lhe todas as suas características uma vez que você está em um plano inicial. Portanto, você não tem a Creative Cloud paga ou não comprou o aplicativo em si por um ano. Então, basicamente, isso é o que ele diz, atualizar. Então é isso que você vai ver. Se você estiver usando a versão gratuita do Adobe XD, clique nesse botão. Atreva-se a atualizar se você quiser, mas se você não fizer isso, você pode simplesmente continuar usando esta versão gratuita. Então, dentro de uma versão gratuita, você tem algum armazenamento em nuvem limitado. E se eu clicar aqui, você pode ver como você pode trabalhar com seus documentos na nuvem. E você pode clicar aqui para adicionar documentos adicionais na nuvem se você quiser compartilhá-lo com você são os documentos que são compartilhados com você através da nuvem e excluídos são obviamente os documentos excluídos que você foi e excluído porque você precisa desse espaço adicional em seu armazenamento em nuvem. Abaixo disso, você pode ver links gerenciados. E estes são os links para os protótipos compartilháveis. Então eles estão ocupando espaço também. E porque em um plano gratuito, que é a terra inicial, obviamente aqui, você tem apenas um link compartilhado. Em seguida, se você estiver em outro projeto, talvez você queira excluir esse link compartilhado se ele não for mais necessário. Por exemplo, você concluiu esse projeto com seu cliente e ele não precisa mais ver esse link compartilhado. Então você pode ir em frente e excluí-lo se quiser. Vamos voltar para casa clicando aqui. E o que você pode ver aqui é o slogan deles. Portanto, o compartilhamento de protótipos é tudo o que o Adobe XD não pode fazer. Abaixo disso. Temos alguns são mais tamanhos e nossas placas são basicamente, se você nunca trabalhou com um arquivo vetorial antes e programa vetorial antes. Basicamente, essas são suas dimensões de arquivo dentro do Adobe XD. Então aqui eles introduziram alguns desses atalhos. Então basicamente isso é para o celular e tablet, isso é para a web, e isso é para as mídias sociais, e este é o seu tamanho personalizado. E se você clicar nessas setas em qualquer uma delas, você tem essa lista suspensa com alguns tamanhos principais que são usados. Em toda a indústria. E esses são basicamente padrões da indústria se você estiver trabalhando com esses tamanhos. Então, como você pode ver, nós temos versões para celular e tablet aqui, nós temos versões de um site aqui, nós temos versões de mídia social aqui. E se clicarmos nele, ele realmente levará você a um novo documento. Então deixe-me voltar rapidamente e mostrar-lhe tudo isso. E, finalmente, discutimos o tamanho deles, que você pode abrir e você pode inserir seus valores. Então, por exemplo, vamos usar 1920 por 1080, assim, você pode simplesmente digitar seus números no teclado. Basta pressionar enter ou clicar aqui. Antes de fazer isso, nós carregamos que você tem seus arquivos recentes e estes são basicamente seus arquivos que você abriu anteriormente. Então estes são acessíveis a partir daqui. E você também pode abrir seu Adobe XD e abri-los a partir daí. E vou mostrar isso também. Mas basicamente estes são apenas alguns dos seus arquivos mais recentes. E é útil tê-los aqui porque, por exemplo, estes são os meus modelos que estou usando no Adobe XD. E eu posso simplesmente clicar aqui e ele vai abrir esse arquivo sem mim uma navegação para ele no meu computador. Finalmente, antes de passarmos para quadros de arte reais, e eu mostrarei o XD de dentro. Estes são apenas alguns basicamente boletins informativos que eles estão incluindo aqui. Então alguns conselhos úteis ou recursos e assim por diante. Então você pode clicar aqui para explorar alguns de seus tutoriais. E você pode fazer isso clicando aqui, bem como já lhe disse. Aqui temos alguns colchetes que são obviamente úteis se você quiser baixar e explorar alguns seus filhos que outras pessoas criaram. E vamos mencioná-los também um pouco mais tarde. E, finalmente, o que temos aqui é o desafio criativo diário, que eu realmente recomendo que você se junte, especialmente se você acha que este caminho de carreira é para você lá desafios criativos diários são incríveis e você pode acessá-los simplesmente clicando aqui. E eles são versáteis. Então eles estão incluindo novos desafios o tempo todo. Então eu realmente recomendo que vocês verifiquem. E você tentou sua sorte em alguns de seus desafios diários? Finalmente, vamos em frente e abrir nosso tamanho personalizado que criamos. Mas você também pode acessar essas dimensões exatas daqui. Então você pode ver 1920 por 1080. Então, cabe a você o que quer fazer. Mas como eu já criei isso, deixe-me clicar rapidamente lá. E como você pode ver, ele vai abrir este novo rpart, como eu escalá-lo. Ela tinha o controle do comando é 0 para encaixar em posição. E é basicamente assim que vai parecer. Então este é o seu aeroporto, este é o seu espaço de trabalho. E dentro deste espaço em branco, dentro deste quadro de arte, você pode desenhar, você pode colocar algum texto dentro, você pode criar gráficos. Você pode fazer todos os tipos de coisas diferentes, que vamos cobrir neste curso. Mas basicamente, este é o seu espaço de trabalho. Por todo o lado. Este espaço de trabalho é basicamente este espaço vazio que você pode ir para cima e para baixo. Como você pode ver, há muito espaço para todo o seu aeroporto adicional que você vai criar. E eu vou mostrar-lhe neste curso como você pode fazer isso. E nós realmente vamos passar por todo o processo de design. E eu vou mostrar a vocês um monte de detalhes diferentes neste curso. Mas antes disso, eu só quero cobrir esses conceitos básicos para todas as pessoas que nunca usaram o Adobe XD antes. Então o que você pode fazer é clicar aqui para renomear este documento. Como você pode ver por padrão, ele vai até o momento, sólidos rapidamente renomeá-lo para o meu primeiro projeto, por exemplo. E clique em Salvar. E como você pode ver, este ícone de nuvem aqui, porque ele está atualizando para a nuvem e você pode ver que ele está salvando. O que foi salvo? Você. Você não tem mais esse progresso e você sempre pode pressionar Control ou Command S para salvá-lo se quiser. Finalmente, os nomes dos nossos álbuns podem ser alterados a partir daqui, então você pode clicar duas vezes aqui. Por exemplo, chame esta página inicial. Digamos se isso é algo que você quer. Então, na próxima série de vídeos, vamos explorar todas as três guias que o Adobe XD tem. Então ele tem esta aba esquerda, ele tem a guia stop, e ele tem esta aba direita. E todas essas guias estão fazendo coisas diferentes e eu vou explicá-las nos próximos vídeos. Então, vemo-nos lá. 6. Conheça Conheça Adobe XD: Então, deixe-me guiá-lo rapidamente através dessas guias do Adobe XD. Então, à sua esquerda, você tem a guia de ferramentas. Bem aqui. Você tem o Inspetor de Propriedades. E aqui você tem essa guia principal. Diferença entre Windows e Mac versões da Adobe é o são bastante simples, na verdade apenas a média. E o único fator diferenciador é a navegação. Então, em um Mac você terá navegação aqui no topo, como você normalmente tem em qualquer outro aplicativo, no seu Mac ou no Windows, você tem essas opções aqui, e você também tem este menu de hambúrguer aqui. Assim que você clicar lá, você tem todas as suas opções aqui. E você também pode clicar com o botão direito do mouse na maioria dessas ferramentas e essas opções. E você vai ter alguns recursos adicionais, seja lá o que estiver fazendo. Esse é o principal fator de diferenciação entre as versões para Mac e PC. Agora, aqui à sua esquerda, uma vez que você passa o mouse, você tem todas essas ferramentas diferentes que você pode usar para criar designs diferentes. E vamos começar de cima para baixo. Então esta é a sua ferramenta de seleção e você geralmente está usando para selecionar qualquer objeto que você possa ter dentro do seu arbóreo. Abaixo disso, temos alguns objetos de forma. Então você tem retângulo, elipse, polígono, e uma forma de linha. E você pode notar, uma vez que eu passar o mouse sobre cada um desses, você tem uma tecla de atalho. E também lhes darei um PDF com todos os atalhos. Ou você pode simplesmente ir para o site do Adobe XD, digitar atalhos na barra de pesquisa e você pode encontrá-los lá, ou simplesmente Google, atalhos do Adobe XD, for mais fácil para você. Alternativamente, você também pode clicar aqui e ir para a ajuda. E a partir daqui você pode acessá-lo, por exemplo, ajuda do XD. Você pode clicar lá e você pode encontrar todos esses atalhos. Abaixo que temos a ferramenta lápis e caneta é usado para criar formas complexas. E você vai ver isso no próximo vídeo. E abaixo que temos textual obviamente para criar e gerenciar texto. Abaixo disso temos nossa ferramenta de bordo. Então, se você quiser adicionar rapidamente várias placas R sem ir para a tela inicial, você pode simplesmente clicar lá. E dentro de seu inspetor de propriedades, você pode ver tudo o que está na tela inicial, mas daqui acessível para que você possa facilmente, por exemplo, eu quero criar este. Você pode clicar nele e ele irá adicioná-lo aqui à direita, como você pode ver bem ali. Então eu posso ir em frente e excluí-lo simplesmente pressionando meu controle de tecla delete 0 para encaixar na posição. E finalmente temos a ferramenta de zoom. Então, como qualquer outra ferramenta abaixo disso, temos painel de ativos. E quando eu clicar nele, ele se expandirá para a direita. E você pode adicionar seus diferentes ácidos. Assim, você pode adicionar cores diferentes com as quais você está trabalhando dentro de seu design. E simplesmente clicando nessas cores que você adicionou anteriormente lá. Ele será aplicado a qualquer um que você selecionou. Então, por exemplo, se você está editando texto, é tudo preto e você quer criá-lo, por exemplo, para ser azul e você tem cor azul aqui. Você pode selecionar o texto clique ali, e ele será aplicado. Vou mostrar-lhe tudo isso mais tarde neste curso. Abaixo disso, temos estilos de personagem. Por exemplo, você está criando. H um deixe c e h um deixe ser, por exemplo, 36 negrito. Você pode simplesmente clicar sobre este plus e ele irá adicioná-lo lá como um estilo de personagem. Mais tarde você tem outro que é 18 irregular. Você pode clicar ali e ele irá adicioná-lo lá. Então, mais tarde, se você quiser alterar qualquer estilo de personagem que você possa ter dentro de seu aeroporto, você pode simplesmente selecioná-lo, navegar aqui, clicar nele, e ele será atualizado para esse estilo de personagem. Finalmente, temos componentes, e componentes são um tópico um pouco complexo para discutir, mas vamos discutir isso ao longo deste curso porque você vai ver que vamos usar muitos componentes diferentes. E digamos que você tenha um botão que você deseja usar em todo o seu design. Talvez seja um botão azul. Digamos que a largura é 76 pixels, algo assim. E diz, por exemplo, aprender mais. Você pode pressionar o controle ou o comando K para adicioná-lo como um componente, ou você pode navegar até aqui para nossa batalha de ácidos. Clique aqui neste símbolo de adição, e ele irá adicionar esse componente aqui. Em seguida, você pode simplesmente clicar, arrastar e soltar seu componente em todo o design. E é uma maneira muito mais fácil, mais rápida e simplificada de criar seus designs, em seguida, recriar ou copiar e colar esse botão. O tempo todo. Você não precisa usar componentes apenas para botões. Você pode usá-los para todos os tipos de coisas diferentes. Por exemplo, imagens. Você pode usá-los para diferentes formas, você pode usá-los para ícones e assim por diante. Mas como ele disse, vou explicar isso com muito mais detalhes ao longo deste curso. Abaixo disso, temos painel Camadas. E, obviamente, uma vez que você começar a usar estes, você vai ver que ele é preenchido com suas camadas bem aqui. Você pode reordená-los e reorganizá-los, clicando no destinatário e arrastando-os. E você também tem grupos de bicamadas. Antes de eu te mostrar que você tem algumas opções aqui. Então você pode marcar para exportar qualquer camada, e então você pode apenas pressionar Control ou Command E. E ele vai começar a exportar todas essas camadas que temos marcado para exportação. Ou você pode simplesmente selecioná-los manualmente assim, pressione Control Command E e eles serão exportados assim. Você pode bloquear suas camadas para que elas não possam se mover. E você também pode ocultar certas camadas simplesmente clicando aqui e ela não será mostrada. Então deixe-me mudar a cor. E se eu clicar aqui, você não pode vê-lo mais porque ele está escondido. Finalmente, você pode adicionar suas camadas através do grupo e você pode selecionar várias camadas, bucketing, clique e um deslocamento. Então, se eu clicar bem aqui Hall minha tecla Shift, clique neste, eu vou selecionar todos eles. Ele controlava o comando G para agrupá-los. E você pode clicar duas vezes e renomear o grupo de solidariedade de grupo. E você também pode clicar com o botão direito do mouse e você pode ver todos esses atalhos diferentes aqui. Portanto, é muito importante aprender pelo menos alguns atalhos básicos. Caso contrário, você pode simplesmente clicar com o botão direito do mouse no grupo e você pode renomear essas camadas também. Então eu diria primeiro, segundo, e assim por diante. Então isso é basicamente suas camadas. E para excluir a camada simplesmente selecionada, pressione Excluir no seu teclado e ele irá excluí-la de lá. Você também pode reposicionar isso. Eu já te disse isso. E isso é basicamente sobre camadas. E vamos explorá-los em muito mais detalhes ao longo deste curso. Eu só queria te mostrar rapidamente quais são os dois. Finalmente aqui na parte inferior temos plugins, painel. E plugins são usados para ajudá-lo a projetar uma maneira mais eficiente e mais rápida. Então, por exemplo, como você vê aqui, eu tenho o meu plugin ângulo que é formado minhas maquetes. Eu tenho meu plug-in arranger e todos esses plugins são diferentes. Então, uma vez que você clica em instalá-los, eles fazem coisas diferentes classificar. Vamos ver este ipsum lorem, eu posso selecionar o texto, selecionar a área de texto e digitar algo. Vamos ver, talvez convés. Clique em algum lugar lá fora. Clique em lorem ipsum, preencha o texto do espaço reservado. Inserir texto, como você pode ver, em vez de eu ir a algum site ouvir copiar e colar e assim por diante, em apenas alguns cliques dentro do Adobe XD, eu consegui incluir algum texto fictício aqui. Então, como você pode ver como um monte deles, e para adicionar mais, você pode clicar neste ícone mais e você pode ver descobrir, navegar e gerenciar. Então aqui temos a Escolha do Editor e o que eles acham que os plugins mais importantes são. E você pode vê-los por categorias. Assim, por exemplo, se você quiser cantar para reutilizabilidade e teste, você pode clicar ali e eles irão garantir-lhe os plug-ins mais relevantes e importantes para essa categoria específica. Você também pode clicar em Gerenciar, e estes são todos os meus plugins instalados aqui. Então eu sei que esses mapas gerados não funcionam mais tristemente. Então eu posso clicar em Instalar a partir daqui, clique em Instalar, e você pode ver que ele desapareceu daqui, bem como a partir daqui. Se você tiver uma atualização para seus plugins, você pode clicar em Atualizar tudo. E como você pode ver, dependendo da velocidade da sua conexão com a Internet, você pode ver que ela se atualiza muito rapidamente. Então esses são seus plugins e esse é o seu bar bem aqui à esquerda. Então, sob o topo, nós projetamos protótipos e opções de compartilhamento. Então, o que são? E, basicamente, na guia Design, você está fazendo, todos os seus projetos, quer clicar na guia protótipo. Você pode adicionar todo tipo de animações diferentes aos seus objetos, nosso tabuleiro ou ao próprio aeroporto. Você pode criar vários fluxos e vamos entrar em todos esses detalhes. E você pode notar uma vez que um clique algumas dessas coisas, esses inspetores de propriedade estão à direita estão mudando. Então você pode ver para estes dois, é completamente diferente quando eu troco entre eles. E isso é realmente de propósito, porque especialmente em guias de design e prototipagem, há coisas completamente diferentes. E, finalmente, temos a guia Compartilhar, que na verdade será usada quando você terminar seu projeto e você quiser compartilhá-lo com partes interessadas, com clientes, com desenvolvedores, com seus companheiros de equipe. E você pode configurar tudo aqui. Então você pode escolher a revisão de design, que na verdade seu cliente vai revisar e deixar seu feedback. Você pode fazer o mesmo para um desenvolvimento. Assim, os desenvolvedores podem ver snippets CSS. Eles podem ver todos os ativos diferentes que você usa. Eles podem ver diferentes margens, estofos e assim por diante. Apresentação, teste de usuário, nome diz tudo. E finalmente, fantasia. Se você quiser ajustar algumas dessas coisas, se seu público é um público personalizado, que não está representado aqui. E como você pode ver, um link é chamado Meu Primeiro Projeto porque nosso projeto é chamado Meu Primeiro Projeto. Mas você pode renomeá-lo daqui. E vamos dar a ele alguns não sabem o nome do projeto com base na própria empresa e assim por diante. Então você pode acessar tudo isso lá. Então é basicamente isso para este vídeo. E eu vou mostrar a vocês um inspetor de propriedades e como ele muda na próxima série de vídeos, uma vez que começamos a explorar todas essas ferramentas diferentes, bem aqui no painel Eu vou Ferramentas. Então, vemo-nos lá. 7. Formas: Neste vídeo, vamos explorar algumas formas que estão aqui em oferta dentro do Adobe XD. Então vamos começar com a forma retangular. E você já viu que eu criei alguns desses, mas deixe-me apagar tudo para termos uma boa ficha limpa. Então você pode clicar nele ou você pode usar nosso atalho para ele. Você pode clicar e arrastar e criar o que quiser aqui usando esta ferramenta de retângulo, você pode clicar na ferramenta Selecionar, que é v, como um atalho e você pode posicioná-lo onde quiser, bem aqui. E aqui. Como mencionei em um vídeo anterior, inspetor de propriedades muda com base no que você selecionou a partir daqui. Então aqui temos algumas opções e deixe-me guiá-lo por todas elas. E basicamente eles são bastante parecidos para todas essas formas. E, na verdade, vamos explorar e dívida muito rapidamente. Então eu estou segurando o turno para escalar corretamente. E se você não segurar o turno, isso é o que vai acontecer. Então você pode ver que ele não escala como deveria. E deixe-me usar isso para criar meu retângulo e deixe-me usar isso para criar minha linha. Então, basicamente, é assim que vai parecer. Uma vez que você criar todas essas formas diferentes, Deixe-os rapidamente dar-lhes uma cor. Então podemos dar-lhes uma cor, uma por uma, simplesmente clicando aqui e escolhendo a cor que você quiser. Você pode usar uma cor sólida. Você pode usar gradiente linear, que você pode ver como isso se parece. E vamos explicar isso um pouco mais tarde neste curso. E você pode usar um gradientes radiais, que é basicamente deste círculo. Mas vamos com cor sólida. E você pode usar esse código hexadecimal, especialmente se você tiver um código hexadecimal personalizado. Então vamos usar o meu três, C6 ff, que é um belo azul. Uma vez que você clicar em enter ou return, ele será aplicado. E você pode então usar um descolorido para aplicar a todos os seus objetos simplesmente clicando aqui e depois aqui. E você pode ver que isso se aplica a todos eles. Agora, a outra função é a cor da borda. Como você pode ver, está em todas essas formas, mas difícil bem ali. Ele irá remover a cor da borda de todos eles. Deixe-me selecionar minha linha e deixá-lo trazê-la de volta porque só tem a cor da borda. E deixe-me aumentar o tamanho desta fronteira para, digamos, dez, só para que você possa vê-lo um pouco melhor. E agora vamos passar por algumas dessas opções aqui dentro do nosso inspetor de propriedades. Então, no topo, temos ícones de posicionamento. Então aqui você pode fixá-lo para o topo, para o centro assim, para o fundo, para a esquerda, para o centro como este, e para a direita aqui você distribuiu uniformemente. Então, se você selecionar todos eles, você pode distribuí-los assim. E você pode distribuí-los assim. Então, basicamente, o que você selecionar aqui, ele vai mostrar dentro de seu inspetor de propriedades abaixo que temos repetição opção Grade. Então, uma vez que você selecionar isso, você tem essas duas alças e você pode repetir à direita. E você também pode repetir na parte inferior. Então, se você tem várias dessas formas, você pode posicioná-las assim. E é realmente extremamente fácil de usar e trabalhar com, especialmente se você tiver formas repetidas como grades de imagem e assim por diante. Você pode desagrupá-lo e você pode trabalhar um por um ou você pode, se você não quiser fazê-lo em, ele iria Control Z para ainda tê-los no grupo. E se eu selecionar este primeiro, e se eu escalá-lo é, você pode ver que todos eles estão em escala. Você pode pairar aqui mesmo entre eles. E você pode ajustar o espaçamento entre eles. E você também pode sempre estender e ter quantos deles quiser. Basicamente, qualquer mudança que você está fazendo neste primeiro vai se aplicar a todos eles. Então, vamos rapidamente mudar uma cor. Você pode ver que ele é atualizado em tempo real. E você também pode adicionar todos esses recursos adicionais que vamos explorar. Mas, por enquanto, vamos rapidamente clicar em Desagrupar grade e deixe-me excluir todos eles apenas para que você não se confunda com o que está acontecendo. Abaixo. Temos todas essas opções diferentes. Então, se você já usar ferramentas como Photoshop, Illustrator ou qualquer outra ferramenta de design antes, basicamente o que você tem aqui é adicionar. Então ele vai adicionar à forma. Subtrair, cruzar e, finalmente, excluir sobreposição. Então é mostrado aqui o que eles fazem. Você pode brincar com essas configurações diferentes, mas não vamos fazer isso no momento. Vamos correr rapidamente por tudo. Então, tem largura e altura e você pode ajustá-lo manualmente e a mudança obviamente como você trabalha neles a partir daqui, você tê-los no eixo x e y. Você pode girá-los sólidos, digamos 45 graus. É assim que vai parecer. Você pode virar da esquerda para a direita, de cima para baixo. E aqui temos rolagem horizontal, temos rolagem vertical, e temos rolagem em todas as áreas, tão horizontal e vertical. E estes três vão fazer muito mais sentido assim que começarmos a desenhar. Mas, basicamente, eles estão lá para ajudá-lo com seu processo de design para acelerar ainda mais as coisas. Aqui temos posição fixa ao rolar. Obviamente, se você estender sua placa de braço, o que você pode fazer clicando aqui. E então, uma vez que você desenhar abaixo, você pode ver esta linha de falha. Basicamente tudo o que você vê aqui vai ser visível na tela. Mas abaixo desta linha de falha é onde suas reservas vão precisar rolar. Então vamos desfazer isso. Vamos voltar. Você tem um redimensionamento responsivo e você pode usar esse recurso de redimensionamento responsivo clicando aqui para ativá-lo ou desativá-lo como quiser. E nós vamos começar a redimensionar responsivo mais tarde no curso, quando realmente terminarmos nossa página web e começarmos a ser projetados para responsivos. Mas basicamente você tem opções automáticas e manuais lá. E eu vou filmar que foi que começamos a projetar. Você tem seu controle deslizante de obesidade. Você pode posicioná-lo onde quiser ou você pode usar atalhos de teclado. Então, por exemplo, se eu usar cinco com auto total 53%, ele vai para 30% ou 0, ele vai para 100%. Abaixo disso temos o modo de mesclagem. Então, se uma posição estes dois aqui, e se eu clicar em escuro e se clicarmos na tela, se eu escolher entre todos estes, como você pode ver, ele muda. Assim, você pode brincar com essas configurações, mas elas são usadas principalmente e melhor usadas com imagens em vez de com essas formas. Abaixo disso temos um raio de canto. E você pode ajustar o raio do canto ou também, por exemplo, 50, como você pode ver, ele arredonda todos os lados. Ou se você clicar aqui. No entanto, você tem canto superior esquerdo, superior direito , inferior direito e inferior esquerdo, e você pode acessá-los. Então, por exemplo, vamos usar dez para este. Como podem ver, este é o Dan e todos os outros são 50. Abaixo que temos a cor de preenchimento e eu já disse que você pode escolher entre esses carros diferentes aqui, e esta é a sua opacidade aqui. E vamos voltar rapidamente para esta mesma cor. Então, basta clicar aqui e você pode ver que estes são seus selecionadores de cores. Esta é a sua fronteira e você pode, obviamente, aumentar a espessura da sua fronteira já mostrou que com a linha. Então, digamos 20. E você pode ver que esta fronteira está em 20. Você pode adicionar sólidos traço se 50, você pode ver como isso se parece. E todas essas opções diferentes que são basicamente melhor usadas com lápis. Mas vamos chegar a ele em um segundo no vídeo mental. Mas basicamente você pode pairar e ver o que tudo isso é. Estas são as tuas tacadas. Estes são seus bonés. Então você pode clicar em torno da lacuna e ver que essas linhas pontilhadas não são mais retas, planas, arredondadas. E finalmente você tem junções aqui. Então como você quer que eles se juntem. E abaixo que temos a sombra, mas eu rapidamente removido borda. Uma vez que você clicar em sombra, você tê-lo no x, y, e mais azul. Então x e y são eixos, e azul é quanto azul você quer em sua sombra. Então vamos ver 2020. E você pode ver que ele vai 20 para baixo e 20 para a direita. E se você quiser aumentar desfocado porque por qualquer razão isso é muito forte de uma sombra. Vamos usar 50, por exemplo. E você pode ver como isso se parece. Então, basicamente agora este elemento parece como ele flui para o ar médio. Então você pode ajustar a sombra, você pode escolher sua cor. Ao fazer isso, você também pode selecionar essa mesma sombra da própria cor e quanto menor sua obesidade como esta para qualquer que você deseja usar, 40 por exemplo. E agora você pode ver que é um tipo de forma pulsante bem aqui. Finalmente, temos o advogado de fundo e essa opção é melhor usada com imagens. E eu vou te mostrar isso um pouco mais tarde no curso. E, finalmente, você pode clicar em Marcar para exportação como já mencionado, ou você pode pular aqui, painel de duas camadas. O que estiver selecionado aqui é marcado aqui, e você pode simplesmente clicar aqui para mascarar para Mark para exportação. Então é basicamente isso para as formas. Vamos passar rapidamente por alguns fatores diferenciadores entre todas essas formas diferentes. Então eu já te mostrei isso. Você tem mais algumas opções aqui, mas basicamente tudo o resto é igual. Então o que isso é contagem de legistas. Então, quantos trimestres você quer Atualmente nós tivemos três. Se eu aumentar isso para cinco, você pode ver que temos essas formas diferentes. Se eu disser oito, por exemplo, você pode ver que conseguimos isso. Este é o raio do canto e você não pode fazer isso. Para uma semelhança bem aqui para mudar o raio do canto para cada canto, você tem que fazê-lo para todos os cantos. Então, se eu escolher dez, por exemplo, ou talvez até mesmo algo maior para que você possa vê-lo tão 40. E você pode ver aqui que temos agora esses cantos arredondados. E o que é isso, é a estrela vestida aqui. Então, por exemplo, se eu quiser pairar bem aqui, e diminuir isso para 50, você pode ver que estamos recebendo algumas formas diferentes aqui. Então 45. E se eu trazê-lo de volta para 100, ele vai para a forma original e obviamente vai mudar com o que você mudar aqui. Então, se eu for para cinco, agora mudá-lo para 50, você pode ver que agora temos essa forma diferente. Então tudo depende do que você está selecionando aqui. Se eu escolher três, por exemplo, e depois ir para 15, você pode ver que agora temos este tipo de logotipo Mercedes Benz. Então, basicamente, tudo depende do que você está fazendo aqui. Então isso é basicamente o nosso triângulo e eu vou polígono ferramenta para o círculo. Basicamente, nada muda aqui. E você pode, obviamente, aumentá-lo para diminuí-lo. E se você quiser diminuí-lo ou aumentá-lo uniformemente em todos os lados, você pode usar Shift e arrastar um dos cantos e ele aumentará nesse tamanho. Se você quiser aumentá-lo uniformemente em todos os lados, você pode manter Shift antigo e clicar com o botão esquerdo em um dos cantos. E você pode ver que ele aumenta e diminui proporcionalmente porque você está usando esse Charcot. Finalmente, para a linha, você pode ver que nós só temos a fronteira. Nós não temos a cor de preenchimento como nós temos com estes. E basicamente você pode fazer todas as mesmas coisas. Então deixe-me mostrar-lhe bonés. Você pode ver que agora é quadrado. Mas se eu selecionar esta tampa redonda, você pode ver que agora temos esta redondeza aqui. E você não pode estender, você não pode alterá-lo. Então você não pode mudar o raio do canto como você não pode aqui. Mas você pode realmente fazer é simplesmente aumentar o tamanho desta fronteira para 50, por exemplo. E você pode ver que agora ele mudou de tamanho. Isso basicamente se as portas são suas formas e eu acho que eu cobri tudo, quando se trata de essas formas diferentes, você pode brincar com elas. Você pode fazer todo tipo de coisas diferentes e você pode usá-las para qualquer propósito que você quiser. Deixe-me mostrar-lhe rapidamente um exemplo rápido. Então, digamos que, para o que quer que seja, você queira adicionar imagens aos seus designs. Então deixe-me crescer rapidamente e encontrar uma imagem. Deixe-me usar este, por exemplo. Você pode simplesmente arrastá-lo e soltá-lo. E você pode ver que uma vez que você faz, ele destaca suas formas. E uma vez que você soltá-lo, ele vai povoar. E o Adobe XD fará o seu melhor para encontrar o meio da sua imagem. Mas se você clicar duas vezes dentro, você pode ver como isso se parece. Então, se Adele clicar mais uma vez e estender minha imagem, agora, este será o ponto focal desta borda para que você possa posicioná-la onde quiser. Você pode ver como isso se parece. Se você obviamente quer atualizar sua sombra, você pode fazer isso também. E deixe-me baixar muito a opacidade. Deixe-me ver, por exemplo, eu posso usar cinco e realmente usar cinco para este também. E agora você pode ver que nós temos a imagem do software. Você pode, obviamente, mudar o raio do canto ou vamos com dez neste. E agora você tem essa bela imagem aqui. Então essas são as suas formas basicamente no próximo vídeo vamos cobrir os pais, o que ele pode fazer por você e seu projeto. E vemo-nos lá. 8. Ferramenta Caneta: Tudo bem, então vamos agora para o lápis. E mental está localizado bem aqui, logo abaixo de todas essas ferramentas de forma. E para acessar o lápis, você pode usar um atalho b, como você pode ver aqui. Basta clicar nele. E o que a ferramenta Caneta faz basicamente, é que você pode criar todas essas formas básicas. Eles já te disseram e explicam também. E você pode acessar todas as mesmas configurações aqui no Inspetor de propriedades. Mas o que ele também faz é que você pode criar formas complexas usando o mental. E como funciona é basicamente você tem esses pontos de ancoragem. Portanto, o que quer que esteja a fazer e onde quer que esteja a clicar, como pode ver, XD está a mostrar-lhe guias para que as suas linhas possam ser retas. Por exemplo, se isso é algo que você quer. E uma vez que você fecha a parte simplesmente clicando de onde você parou, onde você começa. E no primeiro é na verdade o último para que você feche o caminho. O que você pode fazer é realmente pairar. E como você pode ver, ele oferece a opção quando você clica para adicionar mais desses pontos de ancoragem adicionais. Então você pode realmente criar formas complexas a partir dessas formas básicas. Então, como você pode ver, começamos apenas com a ferramenta básica de retângulo e você pode usá-lo aqui mesmo com um lápis. Você pode adicionar todas essas funcionalidades adicionais às suas formas. Então, como você pode fazer isso? Onde houver duas maneiras de fazer isso, você pode simplesmente clicar em qualquer um desses pontos de ancoragem e estendê-los. E como você pode ver, ele está se movendo de uma forma linear. Então, como você pode ver, essas linhas são realmente retas e você está recebendo todos esses ângulos retos. E se você estiver segurando Shift enquanto estiver fazendo isso, ele se encaixará na posição original de onde você parou. A outra maneira é simplesmente clicar duas vezes nesse ponto de ancoragem. E agora, uma vez que você a estenda, você pode ver que esta linha está agora curvada. E você pode mudar o ângulo dessa curvatura simplesmente usando essas duas alças se aproximarmos um pouco mais. Então, uma vez que você clicar sobre eles, você pode ver que agora você está recebendo todas essas diferentes formas complexas. E se você entrar, ele irá para a posição original assim. E se você sair todo o caminho para fora, você pode ver que esta curvatura está ficando maior e mais forte. Você também pode usar shift para encaixar em ângulos diferentes, como um C aqui. Então, dependendo do tipo de forma que você deseja, você também pode chamar a tecla Shift enquanto está arrastando-a, para arrastá-la diretamente. E você pode acessar todas essas configurações diferentes simplesmente usando esses pontos de ancoragem e essas alças assim. Então, como eu disse, você pode fazer isso com qualquer um desses. E se você quiser excluir esse ponto, você pode simplesmente clicar nele aqui para excluir, e ele apagará esse ponto. Então agora ficamos com apenas um desses. E você pode ver que agora esses dois estão recebendo essas alças para que possamos estender a curvatura de nossa forma e mudar sua posição como quisermos. Se quisermos voltar atrás, você pode simplesmente clicar duas vezes sobre este ponto. Clique duas vezes neste ponto. E você pode ver que agora temos uma linha reta, mas como costumávamos fazer. Então é basicamente isso para o Pentaho. Mas deixe-me agora ir em frente e mostrar-lhe como podemos criar algumas formas mais complexas e de fontes. Digamos, portanto, que queremos isolar esta parte do nosso relatório. Então, como podemos fazer isso é simplesmente, vamos clicar, depois clicar e segurar. Como você pode ver, você pode mudar esse ângulo como quiser. E digamos que eu queira clicar em algum lugar por aqui. Então eu posso clicar fora e fechar minha forma. Agora que eu estou, minha forma está aqui, eu posso simplesmente usar esta ferramenta de movimento e simplesmente selecionado, ou você pode selecioná-la assim. Então, basta clicar e arrastar para selecioná-lo. E agora, no Inspetor de propriedades, você pode ver que temos exatamente as mesmas configurações que temos com todas as nossas outras formas básicas. Mas agora podemos acessá-los para esta forma mais complexa. Então o que podemos fazer é, por exemplo, adicionar uma cor de preenchimento. Vamos usar esta cor. Podemos remover a fronteira. Podemos, por exemplo, incluir sombra e tudo o que lhes mostrei para todas estas formas básicas. Mc Agora temos essa forma mais complexa. E porque isolamos apenas esta parte do nosso projeto quando eu pairo, você pode vê-lo e você pode acessá-lo. E se você quiser mudá-lo é colocar um duplo clique em sua forma. Ele irá mostrar-lhe todos os seus pontos de ancoragem e você pode, em seguida, clicar e, por exemplo, mudar esta forma para ser algo como isto. Eu não sei, talvez isso seja algo que você está procurando e você pode ver como isso se parece. Então essa é a sua ferramenta de caneta em poucas palavras. E como você pode ver, você pode acessar todas essas formas básicas, especialmente esta. E se você se lembrar do vídeo anterior, você pode alterá-lo na contagem de cantos. Você pode mudar o raio do canto e você pode mudar a proporção dela para acessar todas essas formas diferentes. Mas se você quer algo completamente personalizado, em seguida, um pai uso realmente recomendado porque como você viu, há realmente nenhum limite para o que você pode criar. As pessoas estão usando essa ferramenta de caneta para criar, por exemplo, ícones dentro do Adobe XD. Eles estão usando para criar ilustrações em ferramentas como ilustrador. Eles estão usando para cortar diferentes formas no Photoshop, por exemplo. Portanto, não há realmente nenhum limite para a sua imaginação e você pode fazer o que quiser com o lápis. No próximo vídeo, vamos explorar a porta ao lado. Então, vemo-nos lá. 9. Ferramenta de texto: Neste vídeo, vamos explorar a ferramenta de texto, e aqui está, e o atalho é t. E antes disso, deixe-me ir em frente e remover essa forma mental apenas para que tenhamos um pouco mais de espaço para trabalhar. E deixe-me mover isso aqui, por exemplo, só para que eu tenha esse espaço em branco aqui. Então você pode clicar em sua ferramenta de texto. E há duas maneiras de incluir texto no Adobe XD. Em primeiro lugar, há pontos, textos e tudo o que escrevemos aqui. Então, por exemplo, este é o nosso texto. E quando você clicar no lado de fora, ele irá completar isso. Portanto, este é o nosso texto pontual, e há também mais um texto que é chamado de textos de área. E para incluir isso, você tem que selecionar a área onde você deseja que seu texto apareça. Então, digamos que esta é a nossa área uma vez que você começa a digitar. Então esta é a nossa área de texto. E se continuarmos a escrever , continuará aqui. E deixe-me mostrar-lhe isso rapidamente também. Então, se eu selecionar o controle C, controle V, controle V, controle V. E você pode ver que ele está se envolvendo nesta área porque esta é a nossa área de texto. Mas se eu fizer isso com este texto, e se um monte faltando barra de espaço, você pode ver que ele simplesmente vai para a direita, direita, certo, certo, certo, certo todo o caminho, certo. E nada acontece de verdade. Então, qualquer que seja a sua área, você pode apontar suas mensagens para estar lá. Mas se você está apenas usando este texto do ponteiro, ele vai para onde você quiser. Então este texto é realmente útil para, digamos, títulos, solo, digamos H1, H2, H3, e assim por diante. Legendas e texto que não, ou pelo menos envolve apenas um pouco. Embora este texto seja perfeito para parágrafos e grandes áreas de texto, descrições do seu produto, recursos do produto e assim por diante. Então eu vou, eu realmente recomendo que vocês usem os textos como Dat, especialmente no design UI e UX porque essas duas ferramentas são realmente andam de mãos dadas umas com as outras. Então eu realmente recomendo que vocês olhem para fora e para explorá-los por si mesmos. Então vamos agora mergulhar fundo nisso aqui. Assim, você pode alterar muitas das propriedades aqui no inspetor de propriedades para o texto. E os principais são que você pode selecionar a fonte em si. Então, se você decidir usar uma família de fontes, por exemplo, Open Science, que é uma fonte gratuita do Google, e você pode encontrar gratuitamente nas fontes da Adobe também. Então eu escolhi Open significa isso. E deixe-me escolher Open significa isso também, assim. E agora você pode ver, quando eu clico, você pode ver que é sentido aberto. Mas, por exemplo, quero mudar este para ser um pouco maior. Então, vamos escolher 26, por exemplo, pressione Enter. E você pode ver que agora o, há uma diferenciação entre esses dois. Também usarei negrito para este. Como este. Então, dependendo de qual você está usando, você terá vários pesos aqui. Para algumas fontes, você tem 12, talvez três para algumas fontes como esta que você vê, você tem muitas delas da luz. Todo o caminho até extra ousado, itálico. Então você pode ver como isso se parece. Você também pode combinar texto e cabe a você e ao seu design. Mas eu geralmente não recomendo usar mais de duas famílias de fontes para seus projetos porque, em seguida, seu design apenas parecia muito disperso e muito diferente um do outro. O que também temos aqui, o nosso espaçamento de personagens. Então este é o espaçamento entre cada um dos personagens. E se eu clicar aqui e, por exemplo, digitar, Não. Então vamos ver. Talvez eu possa escrever em 50. Você pode ver que o espaçamento entre cada caractere é apenas mais diferente. Espaçamento entre linhas é basicamente espaçamento entre cada uma dessas Aliança de textos. Então esta é a sua linha um. Esta é a sua linha para, se eu clicar lá e aumentar isso e talvez, vamos ver, talvez eu possa digitar 90 algo fluxo. Você pode ver como isso funciona. E o que isso é, é espaçamento de parágrafos. Então, se eu tomar 50 por exemplo, você não pode vê-lo porque este é o parágrafo com apenas duas linhas de texto. Então eu realmente vou ter que ter mais linhas de texto e, em seguida, ele vai usar esse espaçamento entre cada linha de texto. O que temos abaixo é ferramentas de alinhamento. Então, por exemplo, digamos que este é o nosso texto de cabeçalho. Então H um, ele está atualmente à esquerda alinhado e você pode ver como isso se parece. Se eu digitar no centro, você pode ver que nada muda. Mas agora que eu começar a digitar, você pode ver que ele vai do centro, da esquerda e da direita. Mas se escolhermos alinhar à esquerda, você pode ver que ele permanece preso à esquerda. E também se escolhermos alinhados à direita, você pode ver que ele vai ficar preso à direita. Como assim. Finalmente, deixe-me mudá-lo de volta para aqui e deixe-me clicar em segurar a tecla shift e alinhá-lo aqui. O que temos aqui são textos de ponto e textos de área viram interrupção. Explicar isso para você. Então este é o nosso ponto x, este é o nosso texto de área, mas você pode mudar isso a qualquer momento. Então, por exemplo, eu posso selecionar essa área, clicar aqui, e agora eu converti-a para apontar textos. Então é exatamente o mesmo como este e vice-versa. Você pode fazer o mesmo por este. Você só tem que estender sua área para suas tags. Como você pode ver, ele encolhe e volta a essas duas linhas de texto. Mas eu posso, obviamente, estendido para onde quer que eu queira inserir mais texto. Então é basicamente isso para isso. E na próxima parte você pode ver maiúsculas. Então, se eu clicar aqui e clicar em maiúsculas, ele converte todos os meus caracteres em maiúsculas ou minúsculas, letras maiúsculas. Então a primeira letra de cada palavra é um título sobrescrito. Então você não pode realmente vê-lo aqui, mas deixe-me adicionar um número para, por exemplo. E agora adicionado aqui você pode ver que ele vai bem aqui. Temos subscrito, por isso vai pô-lo aqui. Se selecionarmos arejar e clicar aqui, você pode ver que temos este subjacente. E finalmente temos strikethrough também. Então você pode ver que você tem um monte de opções diferentes. Bem aqui no Adobe XD. Não há futuro Rich, por exemplo, como os aplicativos. Vejamos a palavra por exemplo. Como o Microsoft Word foi projetado para digitar desde o início, enquanto o Adobe XD foi projetado para design de interface do usuário e UX desde o início. Portanto, você tem muitas dessas opções, mas elas não são realmente ricas no futuro, como o Word, por exemplo, ou o Google Docs ou algo assim. Ou a Adobe tem seu próprio software para impressão. Então eles não são borda do futuro assim. Mas você pode obter um monte dessas opções como você acabou de ver abaixo que temos todas as coisas habituais como fazemos no Inspetor de Propriedades. Então, temos aparência. Você pode diminuir ou aumentar a obesidade. Nós temos os modos de mistura que eu mostrei a vocês com esta imagem. Temos a cor de preenchimento, que é a cor de preenchimento do nosso texto. Também temos a cor da borda. Então vamos mudar a cor de preenchimento para algo um pouco mais escuro para que ele diferencie entre esses dois. Temos a cor da água para que você possa adicionar sua borda, se quiser. Vamos com algo extremo. Você pode ver como isso se parece. Mas deixe-me desfazer isso. E a fronteira de Jaime. Você tem a sombra para que você possa adicionar sua sombra aos seus textos, digamos, 55 e 20. Você pode ver como isso funciona. E finalmente temos o desfoque de fundo para que você possa usar seu recurso como você pode em qualquer uma dessas outras ferramentas. Então é basicamente isso para o texto. E você vai ver ao longo deste curso como vamos usar o texto, Javier vai adaptá-lo e como vamos usá-lo em, por exemplo, alguns desses. Então vamos usá-lo em grupos de rolagem e vamos usá-lo em pilhas e também mostrar-lhe quais pilhas são mais tarde no curso. E você vai ver como o recurso morte incrível é usar no Adobe XD. No próximo vídeo, eu vou correr através de nossas placas um pouco mais e mostrar-lhe recursos adicionais que são placas têm um osteoderme. 10. Artboards: Tudo bem, então agora vamos percorrer alguns recursos adicionais que são placas têm. Então, como eu já mostrei, um é a palavra-chave para nos aeroportos, você também pode clicar aqui. E para adicionar um aeroporto diferente, você pode clicar aqui. Agora, se eu selecionar minha ferramenta e eu vou clicar aqui para alterá-la, por exemplo, vamos chamá-la apenas exemplo. E se eu selecionei, você pode ver que temos características diferentes aqui. Então você pode girá-lo para ser uma paisagem ou para ser horizontal. Você pode mudar seu tamanho. Então digamos 400 por 500. Assim, você pode adicionar todos esses recursos adicionais como você pode quando você clicar na casa e ir para o tamanho personalizado aqui mesmo. Então você pode fazer tudo isso aqui. Você pode fazer recitas responsivas assim que criar um aeroporto. Assim, você pode começar a criar designs responsivos desde o início. Você pode incluir rolagem, então vertical ou nenhum. Ou se eu mudar bem aqui, você pode ver que ele ainda me dá cócegas no mundo porque eu criei este quadro de arte nesta proporção. Então este que é o original. E se eu criar isso até que eu este, então ele vai me dar a rolagem horizontal e essa capacidade, altura viewport é este. Então, se você se lembrar dos vídeos anteriores, se você estender isso, como eu disse, esta é a linha de falha e tudo acima da dobra será visível imediatamente enquanto os usuários têm que rolar para baixo para ver o conteúdo que está logo abaixo desta linha de falha. Então essa é basicamente a altura da sua janela de visualização. Se eu estender, você pode ver que ele vai, ele fica em 812. Mas como você pode ver agora nós temos esta linha, que é basicamente a linha de falha para o telefone. Então, digamos que esta tem a tela de formulário e os usuários têm que rolar para baixo para ver o quântico abaixo dessa linha de falha. Então, basicamente, os telefones celulares também têm. Abaixo disso, temos Phil e basicamente você tem essas cores de preenchimento iguais para todas essas outras formas. Então você tem cor sólida, você tem gradiente linear e você ajuda gradiente radial. Você também tem o controle deslizante de opacidade e você pode escolher qualquer uma dessas cores e incluir o código hexadecimal também. O que eles não explicaram sobre as cores é isso. Assim, você pode adicionar amostras diferentes. Então, digamos que eu realmente gosto dessa cor. Posso clicar nele. Eu posso clicar aqui e ele irá adicioná-lo à minha amostra. Se eu for para o meu painel de ácidos, você pode ver que não está lá, é apenas no meu painel de amostras. Então isso é, uh, por exemplo, se você quiser mudar alguns desses objetos separadamente e você estiver usando as mesmas cores, mas você não quer aplicá-los para ouvir. Então, se eu quiser, eu posso simplesmente clicar aqui e ele será aplicado lá. E se eu clicar com o botão direito do mouse, deixe-me selecionar todos os meus objetos. Clique aqui. E se eu, por exemplo, clicar com o botão direito do mouse e ir editar e editar a cor aqui, você pode ver que ela é atualizada em tempo real. Mas se eu clicar aqui e depois bem aqui e mudar minha cor, ele só mudará a cor deste objeto. Então, finalmente, o que nós também temos aqui no nosso inspetor de propriedade aeroportos é a grade. E eu vou mostrar a grade aqui porque isso representa o tamanho básico da página da Web. Então, se eu clicar bem ali, temos o layout e temos quadrado. Então, sob o layout você não vê nada porque eu tenho que selecioná-lo. Mas se eu selecionar meu quadrado, você pode ver que estamos tendo todos esses quadrados e estes são ótimos, especialmente se você estiver usando sistemas de grade. Então, por exemplo, sistema de grade 8 ou um sistema de grade de 16 pontos ou algo assim, onde você realmente tem esses tamanhos quadrados. Então, se você estiver usando 8, você obviamente usará o tamanho de oito para cada um desses quadrados. Mas se usarmos um layout, você pode ver que agora temos o design da coluna. Então, por exemplo, temos 12 colunas para este design. Talvez queiramos mudar para oito. Você pode ver que agora temos oito colunas. largura da calha é basicamente esse espaçamento entre cada uma de suas colunas. E a calma sagacidade é obviamente a largura de cada uma dessas colunas. Agora, você pode alterar todas essas propriedades aqui, e essas são suas margens. Então, as margens são esses espaços em branco à esquerda e à direita. Então basicamente esse espaço entre as bordas de seu rpart e seu layout de grade em si, e suas colunas em si. E você também pode mudar isso aqui. Então você tem margens diferentes para a parte superior, direita, inferior e esquerda. Então, se você quiser mudar todos eles, bem aqui, então esquerda e direita, basicamente, você pode fazer isso simplesmente selecionando isso e escolhendo 120, por exemplo. Mas se o Adobe XD não puder calculá-lo por conta própria, então ele lhe dará todas essas propriedades diferentes aqui. Mas você também pode fazer é, por exemplo, aumentar a largura da calha para relativa 40. E vocês podem ver que agora temos muito mais espaço entre todas as nossas colunas. A largura da coluna é, vejamos, 120, mas vai diminuir a largura da calha para 18. Então você realmente tem que brincar com todas essas configurações diferentes para alcançar o resultado perfeito que você quer. E basicamente, isso é tudo para estes são placas. Espero que veja como é fácil trabalhar com eles. E uma última coisa que eu não mencionei é se isso é muito distrativo para você trabalhar. Então você pode ver que todos esses elementos agora estão se encaixando em nossas grades muito bem. Então você pode realmente contar e posicioná-los onde quiser em sua página. Então, se isso é realmente perturbador, você pode selecionar seu RPL. Você pode clicar aqui e você pode baixar a opacidade da sua grade para algo assim. Então ainda vai estalar, como você pode ver todas essas posições diferentes. Mas agora você pode ver muito melhor. Você também pode mudar sua cor se isso é algo que você quer. Então aumenta apenas um pouco, mudar a cor para vermelho e agora diminuir a obesidade todo o caminho para algo assim para que você possa vê-lo um pouco melhor. Então você pode realmente brincar com todas essas configurações diferentes. E você pode entrar em, em profundidade para encontrar algo que vai funcionar para você e sua falha geral. 11. Guias: Deixe-me agora mostrar-lhe mais uma característica. Nós cobramos guias. E para eles, eu vou simplificado layout grade homem disse posição este aqui. E os caras estão localizados no topo do seu aeroporto, bem como no lado esquerdo do seu teclado. Então, se você pairar bem aqui, você pode ver que você pode extrudir um guia daqui e daqui. Então, digamos que eu queira incluir guias na parte superior e na parte inferior da minha imagem. Então você pode simplesmente como estão aqui, em seguida, clique e posicione o guia e ele se encaixará na posição aqui. E como você não pode fazer isso do lado inferior do seu aeroporto, você tem que fazê-lo do lado de cima também. Então você pode fazer isso para cima, baixo, esquerda e direita. E por que isso é útil se, por exemplo, em alguma área do seu rpart, seus elementos de qualidades de posicionamento. Digamos que superior esquerdo, superior direito, que seja. Você pode posicionar esses elementos para encaixar em uma grade como esta. E você pode posicioná-los para onde você quiser que eles estejam. E eles vão encaixar bem em seus guias. Então, se você quiser usar guias, você pode, se você quiser usar grade, você pode fazer isso também. E os guias também são úteis. Por exemplo, podemos usar esse layout de grade para o layout vertical, mas não temos nada para o ritmo horizontal do nosso design. Então, para fazer isso, digamos que queremos ter um desconhecido. Vamos ver 18, talvez. Ou vamos com 60. E queremos ter esse ritmo vertical em todos os lugares. Então queremos ter 60 aqui, 60 aqui, 60 aqui. Se você não quiser medir esse espaçamento entre cada um dos seus elementos. Assim, você pode incluir grades diferentes para 606060 apenas para manter esse ritmo horizontal, se esse algo que você quer, realmente depende de você e como você gosta de projetar usando o Adobe XD. Mas como eu disse, essas grades são realmente úteis e para tirá-las do seu caminho e removê-las, basta clicar neles e arrastá-las para fora, basicamente da mesma maneira que você os colocou dentro. Então, essas são suas grades no Adobe XD e esses são seus guias no Adobe XD também. Mais uma coisa. Se, por exemplo, digamos que eu quero secar isso aqui. Você quer copiar isso no Guia para isso, nossas portas para que o garoto Controle C clique aqui, aperte Controle V. e deixe-me reduzir o tamanho da minha forma. Digamos que eu queira copiar este guia. Botão direito. Você pode ir a guias, caras da cópia. Clique aqui, clique com o botão direito do mouse em guias, guias baseadas em fim Isso, obviamente, funcionará melhor se você estiver, aeroportos são exatamente do mesmo tamanho. Então, digamos que você está usando, esta é a página inicial e talvez tenhamos blog sobre preços de serviços e assim por diante. E todas essas páginas são exatamente as mesmas dimensões. Então este guia, uma vez que você copiá-lo e colá-lo para a próxima vez, ele será baseado exatamente no mesmo local onde ele está bem aqui. Então isso é realmente útil se, por exemplo, você quiser alinhar algumas coisas à esquerda, à direita, ao centro do que você quer fazer com essas crianças. Essa opção é extremamente útil, N extremamente poderoso. 12. Repetição: Vamos agora cavar um pouco mais fundo na grade de repetição porque a função em si é realmente importante e extremamente poderosa. Então, vamos clicar aqui e excluir isso. E vamos criar um layout rápido a partir daqui. Então, duas pancadas esquerda e direita. Só estou usando minha barra de espaço e meu clique esquerdo do mouse. Então, na imagem nucleada como esta, por exemplo, eu vou posicionar no centro. Vou remover a fronteira e só para vê-la aqui legalmente. Então eu vou bater no meu Tiki para o meu texto e clicar em algo. Por exemplo, como o Rider Number 1. Vamos chamar-lhe o que diz aberto, mas ainda é 26. Vamos usar algo como 80. E eu vou posicioná-lo. Gritar pode mudar a chave, e eu quero 20. Assim, aperte o controle D mais uma vez. Nave 12, e usarei 14 para este. Em vez de ousado, vou com o normal. Então, apenas certifique-se de que estamos 20 em todos os lugares em vez de texto de ponto, vamos usar textos de área e estendido para as bordas da minha imagem assim. E eu também vou em frente e usar o meu plug-in. Então eu vou usar o mesmo plugin que eu mostrei a você. Então Lorem Ipsum, então se você quiser instalá-lo, clique aqui, digite lorem ipsum, instale-o e clique em sentir, substitua todo o texto. Vou usar este, mas você pode usar o que quiser. Clique em inserir texto e ele irá inserir aqui. Vamos ter, por exemplo, três linhas de texto como este. E você também pode estender tudo isso para baixo e, em seguida, reduzir o tamanho de sua área para seus textos. E, obviamente, vamos mudar a cor para que você possa usar esta cor apenas para que ela fique um pouco mais leve. E em vez de regular, você também pode usar a luz se isso é algo que você quer e se isso lhe agrada. Agora, para as imagens, eu não gosto que isso seja assim. Então talvez eu possa usar dez se isso for demais, talvez cinco só para aumentar algum raio de canto. Agora, para usar a grade de repetição, basta selecionar todos os seus itens, pressione a grade de repetição. E o que você pode fazer é simplesmente estender isso para baixo e você pode ver como a grade de repetição é poderosa e importante. Agora, para mostrar que ainda mais, eu tenho algumas dessas imagens bem aqui. Então eu vou arrastá-lo e jogá-lo dentro do meu projeto. Então simplesmente arraste e solte-o no primeiro. Então, só o primeiro e solte. E você pode ver como isso funciona assim, é extremamente fácil, extremamente poderoso de fazer. Então o que eu também posso fazer é criar meu documento de texto, e eu posso simplesmente usar um documento de texto, que é apenas um documento básico. Você pode ver que eu estou usando bloco de notas aqui. Então, em vez de Ryder em um ou outro para escrever ou três, talvez possamos chamar de anomalia, James May, Tyler. E por exemplo, vamos chamar isso de escolher moral ou o que quer que seja. E você pode fechar isso. E, da mesma forma, arraste e solte o nome do documento no próprio texto. E você pode ver que ele se enche de texto. Portanto, esta é uma coisa extremamente importante e poderosa a se fazer se quisermos obter dados avançados em seus projetos. Então você pode realmente brincar com como todo esse texto vai se parecer. Obviamente, você pode fazer o mesmo para todos esses. Então, em vez de apenas este velho lorem ipsum básico simples, digamos que você pode incluir alguns textos reais como, por exemplo, você tem o homem um portfólio antigo, ou em informações reais sobre todas essas pessoas. Você pode copiar e colar essas informações para criar essa rica e designs. Mais uma vez, repetimos as grades. O que podemos fazer é mudar o primeiro. Então, digamos que queremos adicionar uma sombra. Você pode ver que ele vai adicionar o mesmo castelo a todos esses outros, sólido, digamos 5515. E se eu clicar lá fora, você pode ver que ele corta bem aqui, mas eu estendo até aqui. Agora, nós temos estes agradáveis em grande sombra. Então também podemos fazer é mudar a cor. Digamos que clique aqui, clique na minha amostra. Você pode ver que ele atualiza área em tempo real. E é basicamente isso. O que você quiser fazer com sua grade de repetição. Lembre-se que você está editando o primeiro. Você não pode adicionar o segundo. Então, se eu quiser reposicionar esta imagem, eu posso simplesmente clicar duas vezes e reposicionar para aqui. Eu também posso fazer isso com esta primeira imagem, C sólido aqui. E esta última imagem pode estar algures por aqui. Então você pode ver que você pode alterar todos esses detalhes de forma independente. Finalmente, se você quiser aumentar o tamanho entre seus elementos na aderência europeia, simplesmente mais rápido repetir grade, mouse e, em seguida, você pode estender onde todos esses elementos e ir. E, por exemplo, se você quiser visualizar como esse aplicativo vai se parecer, você pode clicar aqui onde diz visualização da área de trabalho. E você também pode fazer Mobile Preview via cabo USB. Se você ir em frente e instalar o aplicativo Adobe XD no seu iPhone ou no seu dispositivo Android. Você pode fazer isso também só para ver se você está, por exemplo, projetando para o iPhone 10 e você tem iPhone 10 em sua mão e vice-versa com todos esses diferentes tamanhos de Android. Assim, você pode fazer um desafio de visualização ao vivo e ver diretamente como ele vai ficar assim que for codificado e concluído dentro do seu dispositivo móvel. Mas se você quiser apenas visualizá-lo para a web, você pode clicar aqui. Esta janela adicional vai aparecer. E quando eu rolar para baixo, você pode ver como isso se parece. Mas como você pode ver, porque nós temos que habilitar isso para ser rolável área. Então, se eu clicar bem ali, use, você pode ver que temos posição fixa quando rasteja, mas eu tenho que estender a minha placa, a fim de ser capaz de rolar. Então, se eu continuar estendendo, você pode ver que esta grade de repetição está nos mostrando uma leitura, mas eu só quero ver esses três. Então 123. E você pode, obviamente, ter quantos quiser, mas vou me estender até aqui. E agora, se clicarmos na minha pré-visualização, poderei rolar para baixo para ver o que eu quiser ver. Então você pode ver que eu estendi meu aeroporto até aqui e essa é minha área de rolagem. Se queremos estender todo o caminho para baixo para adicionar mais elementos adicionais. E então eu serei capaz de rolar mais para baixo e ver todas essas informações adicionais. Então é basicamente isso para sua grade de repetição. Finalmente, se você quiser desagrupar a grade, você pode fazer isso também. E volte para um painel Camadas. Você pode ver que agora temos três grupos. Então este é o primeiro grupo, este é o segundo, este é o terceiro. E eu gosto de encomendá-los assim, então eu não gosto do contrário. E dentro de seu grupo você pode ver que você tem todos esses elementos diferentes e todas essas coisas de design diferentes que você incluiu em seus projetos. Por isso, é muito fácil de trabalhar. É muito divertido. E uma vez que você se acostumar com isso, será extremamente útil ter a função de grade distribuída em seu processo de design. 13. Visão geral de processo de design: Tudo bem, agora que você está familiarizado com o Adobe XD, agora que você sabe o que as ferramentas podem fazer, deixe-me apresentá-lo rapidamente ao projeto que vamos trabalhar no induzir pontuações partir do qual você vai aprender tudo isso técnicas avançadas que o Adobe XD tem para oferecer. Então, primeiro as coisas, vamos começar com o resumo de design. E eu estou sempre recomendando aos meus alunos e todas as pessoas que estão me perguntando por onde começar com o projeto. É sempre o resumo de design. Porque a partir do resumo de design, você sempre pode entender o que o cliente quer, qual é o orçamento, qual é a linha do tempo. Você está fazendo o redesenho? Você está fazendo a revisão completa? Você está fazendo o trabalho do zero, o que você está realmente fazendo neste projeto. Então eu estou sempre recomendando a estudantes e pessoas que são interessantes em design para começar com o resumo de design, porque isso, na minha opinião, é o fundamental de qualquer projeto. E design breve pode basicamente fazer ou quebrar o projeto. Porque se você não começar com o resumo de design de alta qualidade, que você precisa fazer você mesmo, então todo o projeto pode desmoronar imediatamente, basicamente porque o cliente pode então pedir algumas mudanças que foram não acordadas no resumo do projeto. Eles podem pedir algumas coisas com as quais você não está familiarizado. Então você tem que superar algumas outras pessoas para ajudá-lo com isso porque você não sabe como lidar com esses problemas e você não sabe como corrigi-los. Então design breve, como eu disse, é essencial basicamente para qualquer projeto de design. Em seguida, vamos passar para wireframes de papel. Agora você pode fazer wireframes diretamente no Adobe XD, que vamos fazer também. Mas eu realmente gosto de começar com o wireframe de papel porque me dá essa liberdade de usar apenas caneta e papel. E todo mundo tem papel e caneta em casa. Então, basicamente, você pode começar com apenas caneta e papel e você pode criar esses wireframes do zero. Após o papel de wireframes vem o processo de wireframing no Adobe XD. Basicamente, o que vamos fazer é pegar esses wireframes e vamos colocá-los dentro do Adobe XD. E então vamos começar apenas recriando no Adobe XD o que retira em um pedaço de papel. Mais uma vez, se você acha que este passo é desnecessário, eu realmente exorto você a assistir todo o processo e apenas a ver a parte de pensamento por trás dos wireframes de papel. Porque, como eu disse, é muito mais fácil criar esses wireframes em apenas um pedaço de papel. Você pode facilmente usar qualquer proibição, qualquer papel que você quiser, ou você pode ter bordas, tirar algumas idéias de sua cabeça para baixo em um pedaço de papel. E uma vez que você está no Adobe XD, então você pode, por exemplo, tornar portas, wireframes um pouco mais completas, apenas um pouco mais polidas e acabadas. Então você pode apresentar esses wireframes para o cliente, que eu obviamente recomendo porque o Adobe XD tem essas ótimas opções de compartilhamento e funcionalidades. Assim, seu cliente pode deixar feedback diretamente sobre esses wireframes antes mesmo de passar para o processo de design. Querer no meio, basicamente, é que vamos fazer a arquitetura do site. Nós estamos indo apenas para listar algumas páginas básicas e nós estamos indo para vincular e ver veted essas páginas estão indo em nosso site. Então, basicamente, se as pessoas clicarem na página inicial, há na página inicial. Onde eles podem ir de lá e de lá em diante se eles clicarem em páginas adicionais, por exemplo, sobre nós página, onde é que a página está levando-os em? Onde eles precisam clicar para voltar para a página inicial, para voltar para as páginas de produtos e assim por diante. Então é aí que a arquitetura do site é importante e nós vamos fazer isso entre todos esses wireframes. Então, basicamente, vamos terminar wireframes de papel. Vamos digitalizar e trazer o papel no Adobe XD. Se você não tem um scanner, isso também é bom. Você pode simplesmente usar seu telefone para tirar algumas fotos se quiser ter esses wireframes dentro do Adobe XD, não é necessário porque você está desenhando esses wireframes em um pedaço de papel. Então você sempre pode olhar para aquele pedaço de papel e ver onde esses elementos estão, onde você precisa fazer algumas mudanças, como você estruturou tudo. Porque lembre-se, você pode fazer esses wireframes em, digamos segunda-feira e na próxima segunda-feira, EUR iniciando o projeto no Adobe XD. Então, há uma chance e possibilidade de que você vai esquecer algumas coisas daquela melhor segunda-feira. Então é por isso que é importante tê-los à mão. Vou digitalizá-los e trazê-los para dentro do Adobe XD para que possamos juntos olhar para eles e ver o que desenhamos em um pedaço de papel e o que queremos trazer em seguida no Adobe XD. Assim que terminarmos o wireframe em papel, depois de terminarmos a arquitetura do site, quando terminarmos os wireframes no Adobe XD e tornarmos o projeto mais completo. Então vamos passar para os estágios de design. Dentro dos estágios de design, vamos incluir cor. Vamos mudar do texto Lorem ipsum para um texto realista que o redator desta empresa nos trouxe. E se eles não tiverem o redator à mão, você pode ser o redator. Você pode escrever uma cópia para eles. Se você é uma edição qualificada e não qualificada, se não, você pode terceirizar isso para outra pessoa. Então alguém pode direito, para copiar para o site para você e você pode vencê-los. Se não, você pode simplesmente deixar o lorem ipsum dare. E com o recurso de coedição do Adobe XD, você pode compartilhar o link de edição de código e, em seguida, o cliente pode trazer o texto para dentro. Ou quando terminarem o texto internamente, podem enviar-lhe os textos. Somos apenas um arquivo de texto normal, PDF, e-mail, o que quiserem. E você pode então trazer esse texto no arquivo Adobe XD e trazê-lo para dentro de seu design. Uma vez que começamos com o design, uma vez que trazemos todos esses detalhes, uma vez que começamos a polir as coisas aqui e ali, nós também vamos começar com a animação, microtransações, grandes transições, e assim por diante. Então a animação é realmente a principal característica importante do Adobe XD de qualquer projeto moderno. Porque se você apenas compartilhar imagem estática com seu cliente, eles podem não entender onde essas páginas estão levando. Se eu clicar aqui, o que vai acontecer se eu clicar lá, onde vai me levar? Assim, as animações são realmente um fator importante e importante do Adobe XD, bem como com o processo de interface do usuário e UX de hoje. Como o Adobe XD tem todos esses excelentes recursos integrados, vamos explorá-los juntos. Vamos ligar páginas diferentes. Vamos criar componentes. Vamos criar estados dos componentes. Quando as pessoas clicarem aqui, quando as pessoas pairarem lá, o que vai acontecer? Então, vou mostrar-vos tudo isso assim que começarmos com este projecto. Finalmente, vamos terminar com o cliente. Uma vez que tenhamos o objetivo final, então nós vamos empacotar todos esses, todos esses arquivos de tal forma que vai ser fácil para os desenvolvedores acessá-los, vai ser fácil para os desenvolvedores usá-los mais tarde em código. E, finalmente, será fácil e fácil para o cliente verificar rapidamente e ver se ele tem alguma revisão adicional. Se eles tiverem quaisquer solicitações ou alterações adicionais que possam ter para este projeto específico. Então é por isso que a estrutura de arquivos é realmente fundamental. No final do projeto, vou guiá-lo através de todas essas etapas. E eu realmente espero que você goste e goste do discurso. E o que é ainda mais importante é que você vai aprender algo que você não sabia antes. Ou se você fez, isso, você meio que elevou suas habilidades de design e conhecimento ao longo deste curso. Então eu estou realmente ansioso para vê-lo neste curso. E como eu disse, a primeira etapa deste curso é apenas para mostrar a vocês o resumo de design. Vou compartilhar com vocês alguns modelos que você pode usar para seu próprio resumo de design e vai ser muito mais fácil para você fazer isso com seus próprios clientes. Então, vemo-nos lá. 14. Nosso resumo do design: Neste vídeo, vamos seguir em frente de onde paramos no anterior. E eu vou falar sobre o resumo de design. Eu também vou mostrar a vocês este resumo de design para este projeto e discurso em particular. Mas você vai ser capaz de usar este modelo para seus próprios projetos grandes e pequenos, porque eu estou lhe dando um modelo vazio e em branco como este para preenchê-lo com suas próprias informações e usá-lo para projetos futuros. Então, para começar o que temos aqui, como você pode ver no Adobe XD, nossos breves fundamentos, e nossos breves e breves fundamentos são basicamente o que ele diz. É o que você precisa sentir para este breve design. E nosso resumo é basicamente nosso resumo de design para este projeto. E deixei algumas informações de propósito. Vou mostrar-lhe só porque para que você possa entender o que precisamos usar neste projeto. Então deixe-me ampliar para breve essencial são um pouco mais. Então o que temos aqui é o perfil da empresa e eu já escrevi todas essas informações que você pode ler em detalhes. Mas basicamente o que precisamos sob o perfil da empresa é o que a empresa é, em que indústria ela está? Quais produtos tem serviços para oferecer? E alguém proposição de venda única, que é basicamente humilhante característica importante que você vai usar para projetar seu site e seu design ao redor. Então, o que os diferencia da concorrência? Você vai seguir isso uma vez que você começar a projetar principais partes interessadas e as pessoas com quem você está lidando nesta organização. Então, por exemplo, se for, se for uma pequena empresa, você normalmente vai lidar com o fundador, com o CEO. Se é um grande negócio, então você vai estar normalmente falando com algum gerente ou algum diretor de arte, por exemplo, se você tem o departamento de design e assim por diante, uma lista de concorrentes diretos e indiretos para que você pode inspirar-se e ver o que os outros intervenientes nesta indústria estão a fazer. Então você pode saber o que se segue, o que evitar, mas basicamente não copie. Você vai usar uma proposta de venda única para uma dívida, mas você vai apenas se informar sobre a concorrência, o que eles estão fazendo, o que eles não estão fazendo. Então você pode saber o que você precisa seguir e o que não. Abaixo que temos projeto ou real. Então, basicamente, este é o lugar onde você vai criar uma descrição detalhada do projeto, tem o máximo de contexto possível. Tente perguntar ao seu cliente o que ele está fazendo, bem como o que ele está fazendo e o que você está construindo algo novo? Áudio projetando algo do zero? Ou está redesenhando algo que eles já têm? Isto é obviamente importante porque se você está lidando com algo a partir do zero, então você tem uma liberdade muito maior para explorar em desenvolver seu conceito, suas idéias para este produto. Mas se eles já têm algo, e então você precisa seguir algumas diretrizes e alguns princípios chave que eles já têm em vigor. Mas você precisa redesenhar em cima da dívida, que é obviamente muito mais difícil, e odontológico começa do zero. Em seguida, temos o WIP, tentar identificar os problemas que eles têm. Quando você entender os problemas, você vai encontrar a solução mais facilmente, classificar quais são os problemas deles? Obviamente eles querem redesenhar ou eles querem completar o projeto do zero, mas quais problemas você está resolvendo com seus projetos. Então, basicamente, design é tudo sobre resolver problemas. A experiência do usuário está resolvendo problemas que os usuários podem ter uma vez que eles estão no site, uma vez que eles estão no aplicativo. Quais problemas este design está resolvendo? Não há nenhum ponto de design apenas olhando bonito. Precisa resolver problemas concretos. Então é por isso que você precisa perguntar a si mesmo e aos seus clientes, quais problemas você está enfrentando. É uma taxa de rejeição? É uma navegação confusa? As pessoas estão saindo do seu site muito cedo? É um design responsivo? Então, todos estes são problemas diferentes que você está tentando resolver com o seu design. Então, mais uma vez, ele parece bonito, precisa parecer bonito e atraente aos olhos, mas você precisa resolver certos problemas. Vou compartilhar isso assim que passarmos para o resumo de design artístico. Então, em seguida, temos metas e objetivos. Assim, os objetivos refletem a finalidade de origem fora do seu projeto e exemplo de objetivo é cliente quer mais tráfego em seus sites, que eu falei pouco antes. Exemplo de Objetivo, é aumentada a quantidade de sessões semanais em 20% por data específica da dívida. Assim, você pode ver como metas e objetivos, objetivos são diferentes, mas eles são a chave para este projeto e projeto breve. Ao estabelecer metas e objetivos antecipadamente, você não é apenas adequado para tomar decisões mais informadas em torno de seu design, mas também está mais bem armado para provar seu valor e valor para o cliente fora da estética visual de seus site, basicamente diz tudo. Objetivos e objetivos são extremamente importantes e você precisa saber quais metas você precisa seguir, em quais objetivos você precisa seguir para entregar a este cliente. Em seguida, temos público-alvo. Então, para quem você está projetando? Porque, como você deve saber, as pessoas são diferentes, mas são o mesmo Daron, uma criatura de hábitos. Então basicamente pessoas diferentes em diferentes faixas etárias, homens e mulheres. Pessoas dos EUA, pessoas da Europa, pessoas da Índia, pessoas da China. São todos iguais, mas são diferentes. Então você precisa fazer essas diferenciações funcionarem para você e para esse projeto em particular. Então, digamos que eles têm idade entre 20 e 35 anos, por exemplo, essas pessoas não gostam das mesmas coisas que as pessoas na faixa etária de 45 a 65 anos podem gostar. Também as pessoas mais jovens usam a tecnologia, mais as pessoas mais velhas não. Os mais jovens gostam de acompanhar as tendências. Pessoas mais velhas não. Então você tem a minha foto aqui. Próximo. Gênero, sexo masculino e feminino não gostam das mesmas coisas geralmente. Então você precisa projetar com isso em mente. Se você está projetando apenas para mulheres, você pode precisar fazer certas cores. Você pode precisar usar uma certa topografia porque, mais uma vez, qual é o seu objetivo? Qual é o seu objetivo? Então você precisa fazer isso funcionar para você e para essa idade específica e grupos de gênero. País de ressonância. Obviamente, isso é importante porque diferentes países têm costumes diferentes, pessoas diferentes gostam de coisas diferentes e assim por diante. Então precisamos projetar para a dívida em mente. Você pode precisar, você pode viver na Índia, por exemplo, mas as pessoas nos EUA podem gostar de coisas diferentes do que em seu país. Então você tem que manter isso em mente. trabalho, onde eles trabalham para o trabalho em grandes organizações, fazer o trabalho em pequenas equipes e assim por diante. Hábitos de consumo de mídia Isso é obviamente importante para o design, mas mais importante para as mídias sociais e para as equipes de marketing. Mas você também pode ter projetado com isso em mente. Então, se as pessoas gostam mais de vídeos, talvez você possa incluir vídeos em seu design porque obviamente eles gostaram mais de vídeos se eles não gostam de ler, mas como vídeos mais simplesmente usar esse texto convertido em vídeo. Você não vai fazer isso obviamente, mas as pessoas da equipe e do cliente fizeram e fazem isso por você. Se você é bom com edição de vídeo, então tudo bem. Mas neste exemplo, as pessoas não gostam de ler. Eles gostam de assistir vídeos, então dê-lhes o que eles querem. Basicamente. Finalmente, temos hábitos diários de David, como viajar, comer nossa socialização e assim por diante. O que é obviamente importante quando as pessoas estão indo para visitar este site, quando eles vão usá-lo, são as criaturas do hábito e eu vou usá-lo em uma base diária, por exemplo, à noite, em torno de meia-noite, 12 AM, 12:00 PM. Então você precisa basicamente entrevistar essas pessoas e descobrir seus hábitos diários. Abaixo disso, nós projetamos requisitos. Então isso é obviamente para desenvolvedores, o que os desenvolvedores estão pedindo de você, o que eles querem de você. Então dimensão ácida, resolução de erros, para qual resolução você está projetando. Se é um site para o qual resolução e resoluções. Se você estiver projetando para o desempenho de tablets para quais formulários, quais tamanhos. Obviamente, você vai fazer aos desenvolvedores todas essas perguntas. Quando os desenvolvedores voltarem para você, então você pode saber para começar a projetar, nunca fazer isso antes. Você pergunta aos desenvolvedores porque você precisa saber quais tamanhos eles estão indo para apoiar mais tarde em Cote, Quando eu pergunto aos clientes isso fez apenas me olhando cegamente e, em seguida, eu quebrá-lo basicamente para eles. E eu perguntei a eles, seus usuários vão usar este produto em dispositivos grandes, por exemplo, TVs inteligentes e digamos 15 computadores desktop. Eles disseram que não. Ok, então vai usar isso em nossa tela Full HD, por exemplo? Então 1920 por 1080 e eles dizem que sim, ok, eles vão usar este produto em um laptop? Sim. Eles vão usar isso em um tablet talvez, mas não uma grande quantidade. Eles vão usá-lo em um telefone? Sim. Então agora você tem quatro tamanhos e você pode projetar para o qual você anteriormente não tinha n. Você fez isso antes mesmo de ativar o Adobe X, Z e começar a projetar. Então isso é muito, muito importante de entender antes de você ir. Além disso, para os formatos de arquivo, você precisa saber quais formatos de arquivo os desenvolvedores vão suportar porque diferentes formatos de arquivo se adequam a pessoas diferentes e diferentes desenvolvedores trabalham de maneiras diferentes. Então, basicamente, você precisa saber o que eles vão usar, o que eles não vão usar para entender como você vai estruturar seu trabalho. Porque se, por exemplo, eles podem trabalhar com ícones B e G e eles enviam Jacobs europeus, Vamos lá, você não pode mudar ícones PNG mais porque basicamente essas são apenas imagens JPEG sem fundo. Então você pode querer falar com eles sobre trabalhar no SVG porque SVG não perde qualquer qualidade, é muito mais fácil de exportar e é muito mais fácil trabalhar com aspas. Então todas essas coisas que você precisa perguntar a eles antes de realmente ir. Temos ativos de imagem a serem incluídos, paletas de cores e documentos de cópia associados. Então. Tendes todas estas coisas, ou não têm todas estas coisas? Porque a dívida basicamente significa mais trabalho para você, e isso basicamente significa aumento de preço para eles. Então você precisa fazer todas essas perguntas antes mesmo de ir. E antes de você estruturar o preço, falando sobre o preço, nós tínhamos o orçamento e o cronograma. Basicamente, como é o orçamento deles, como eles quebraram, como você quebra? Eu faço cobrá-los todos na frente, 50% agora, 50% no final, você está cobrando em etapas e assim por diante, e também programar para o projeto. Quanto tempo esse projeto vai durar? Então, agora deixe-me mostrar rapidamente o nosso resumo. Então, temos um novo design de site do banco. Este é o nome da empresa. Esta é uma empresa fictícia, mas eu estou baseando toda essa experiência de projeto a partir da experiência anterior porque eu trabalhei para bancos reais antes, para seus projetos de site e aplicativos. Então aqui temos a nova banda Corporation é o nome do cliente. 6 de junho de 2021 é a data em que este projeto precisa ser concluído. Perfil da empresa sal. Não vamos perder tempo você pode pular dentro deste arquivo porque eu estou te dando este arquivo e você pode ler tudo sobre isso. Mas basicamente a essência disso é ousar Bank e eles têm uma grande quantidade de clientes que são pessoas mais jovens. E eles querem focar todos os seus esforços em pessoas mais jovens. Eles não vão recusar pessoas mais velhas, mas as pessoas mais jovens e os millennials especialmente são seu público-alvo porque eles descobriram que essas pessoas estão gastando a maior parte do dinheiro adiantado, não se importavam com os custos de organização suas contas e assim por diante. Então, é muito mais fácil vender serviços diferentes em dívidas. Por que gosto dessas pessoas tanto também dia como pessoas mais jovens, porque eles estão interessados em mudar tecnologias. Eles são a chave para experimentar coisas novas, realidade virtual na realidade e assim por diante. Então temos visão geral do projeto aqui. Eles querem redesenhar para o site atual. E eles querem tornar esse design mais centrado no usuário, mais focado no usuário, e tornar uma experiência de usuário todo o design mais acessível a essas pessoas mais jovens. Porque o que eles têm no momento é muito antigo, muito antiquado. Vamos ver a Índia em algo novo, algo fresco para atrair aqueles jovens para a plataforma. Portanto, temos objetivos e objetivos. Então se misturar ou este projeto é atrair mais usuários para o site e por ter a experiência do usuário taxa, fazendo-os ficar lá como um cliente. E o objetivo deste projeto é atrair pessoas com grande oferta, torná-los ditam longe da competição. E uma vez que eles se tornam um cliente, fazendo-os ficar um, vendendo outros serviços e ofertas. Então, basicamente, em poucas palavras, se você vier a este site por ter uma ótima experiência de usuário, ótimo design, se você estiver no público-alvo deles, pessoas tão milenares, mais velhas e mais jovens, então eles vão atraí-lo, inscrevê-lo para seus serviços e, em seguida, vendê-lo novamente em segundo plano, serviços adicionais, alguns que você pode assinar para um serviço específico. Mas uma vez que você entrar, uma vez que você está logado, eles vão atraí-lo oferecendo diferentes serviços que você pode usar. Este banco e neste site. Portanto, o objetivo é diminuir a taxa de rejeição em 40%. E a taxa de rejeição é tão alta porque o site deles. É tão velho, então eles querem diminuir a dívida nos primeiros seis meses uma vez e psi vai como objetivo adicional é converter 50% mais pessoas nesse tempo em combinação com a estratégia de marketing que eles vão lançar junto com este site. Então, basicamente, em poucas palavras, uma vez que o site entra ao vivo, a equipe de marketing vai publicar todo o material de marketing. Eles vão atrair mais pessoas para o site ao mesmo tempo que decidem entrar ao vivo. Eles querem diminuir essa taxa de rejeição limite em 40% , tendo a excelente experiência do usuário, excelente design. E eles também querem converter 15% mais pessoas do novo tráfego que eles têm. Então eles podem executar o Instagram louco, eles podem executar o Facebook, eu faço duas camas e assim por diante. Para atrair mais pessoas para tirá-los de outros bancos, para ousar banco e para que upsell todas essas coisas adicionais em futuros, temos público-alvo procurado entre 20 e 45 anos de idade e sexo, 40% feminino, 60% masculino. Então podemos querer experimentar algumas cores aqui e elas são ressonância em série. Então basicamente temos Belgrado e Londres porque, como eu disse, este é um projeto fictício, mas eu trabalhei no passado sobre projetos semelhantes a este. E nós também temos sérvio e Reino Unido como eu, o que significa demografia chave. Basicamente, você pode precisar adaptar isso às suas próprias preferências pessoais. Então, por exemplo, se você é dos EUA, como os EUA e, por exemplo, digamos, México, se você é da Índia, faça o mesmo, mas para sua própria demografia pessoal, apenas para explorar coisas adicionais em recursos que você pode usar e fazer com este projeto. Local de trabalho, por isso, principalmente empregos de baixa renda e, mas proprietários de pequenas empresas também, especialmente freelancers. E freelancers, são a demografia chave para um futuro para esta empresa, hábitos de consumo de mídia, como você pode ver lá 60% no Instagram, 20% no Youtube, Dan presente no Twitter, e 10% no tick tock também. Hábitos diários ou consumo de mídias sociais, trajeto de negócios, alimentação saudável, exercício à tarde. Abaixo, nós projetamos requisitos. Então era disso que eu estava falando antes. Então temos demências ácidas dia quer ter basicamente desktop, desktop pequeno, tablet e formas para esses quatro tamanhos. Eu também vou mostrar a vocês uma vez que desenharmos oldies, como você pode adaptar o tamanho do telefone para o iPhone. Então, basicamente, tem um aplicativo para iPhone que eles vão desenvolver mais tarde em um React, eles vão usar Reagir como o meu cliente real fez antes. Porque React é realmente fácil de adaptar todos esses tamanhos para diferentes dispositivos. Formatos de arquivo ou Adobe XD como o arquivo principal do projeto, SVG 40 ecoa PNG e JPEG para imagens porque vamos ter algumas imagens sem o fundo sobre elas. Portanto, podemos querer exportá-los como PNG, que seja mais fácil para os desenvolvedores usá-los mais tarde. E temos PDF para resumo de design que estamos olhando agora e documentação adicional do projeto. Então, basicamente, tudo o que estou lendo aqui é que você pode coletar, combinar e criar, e depois exportado como um PDF, enviá-lo para o seu cliente. E então eles podem passar por esse fim, basicamente concordar com você ou discordar de você. Se discordarem, então. Inclua as alterações de dose que necessitam. Envie-lhes isso novamente até chegar ao acordo completo antes de realmente assinar o contrato e começar a projetar abaixo que exigem chamá-lo palete. Então D desde que este OnRequest imagens são fornecidas a pedido. Eu vou falar sobre imagens em vídeo separado, associar uma cópia de documentos, então eles forneceram onRequest com seu redator. Então não vamos apenas usar lorem ipsum. Vou mostrar a vocês um monte de mips, alguns no processo de discussão e wireframe. Mas mais tarde dentro do processo de desenho do discurso. E vai realmente mostrar como a cópia real vai olhar dentro do orçamento de design e cronograma. Então o orçamento total é de US $15 mil 5K antes do início do projeto tanto que você realmente concorda em todos esses termos. E então você cobra 5 mil. 5k quando começamos com o projeto. Assim que terminarmos a parte wireframing, uma parte da estrutura do site, uma vez que realmente terminarmos tudo isso, começar com o design, então vamos cobrar 5K adicionais. E, finalmente, cinco finalistas deram antes entregar os arquivos para o cliente e para os desenvolvedores. Classificação detalhada da linha do tempo. É basicamente tudo em seis meses mais qualquer Diane adicional para revisões e mudanças ácidas para desenvolvedores após esses seis meses expirarem. E aqui você tem isso aqui embaixo. Então você pode mudar todas essas coisas. Assim, você pode, por exemplo, manter o controle e clicar dentro. E como você pode ver, você pode mudar o que quiser e você pode adaptar isso. Qualquer um deles basicamente faz suas próprias preferências pessoais. Abaixo, você pode escrever seu nome ou nome de sua empresa e seu nome ou e-mail da empresa. Ou você também pode adicionar suas informações de telefone se eles quiserem entrar em contato com você por telefone. Mas basicamente você lê todos os clientes com quem estou trabalhando. Geralmente, eles usam e-mails porque é muito mais fácil e rápido. E, finalmente, se você abrir a paleta Camadas bem aqui, você pode ver que todas elas estão em camadas. E você também pode, por exemplo, vamos para este ícone de orçamento aqui. Você pode mudá-lo. Você pode mudar a cor, como você pode ver agora, é vermelho e você pode adaptar essa cor adicionando calor aqui mesmo. E você pode mudar e adaptar isso basicamente ao gosto do seu cliente. Você também pode alterar a cor do próprio aeroporto clicando aqui, depois aqui. E como você pode ver, você pode mudar isso também torná-lo um tipo de modo escuro de e basicamente deveres para os clientes e basicamente exportar isso e mostrou-lhes tipo de um resumo de design de marca enquanto você realmente usa este modelo. E parece marcado, mas realmente não é. É só um modelo. A fim de exportar isso como um PDF. Digamos que este é o resumo final do projeto. Você pode simplesmente pressionar Control E e usar o recurso PDF a partir daqui, exportação kit. E você pode, obviamente, mudar para onde deseja exportar seus arquivos. Neste caso, é uma área de trabalho para mim, basta clicar em exportar. Ele vai exportá-lo como um PDF. E basicamente você pode compartilhar esse resumo de design com seu cliente. Obviamente, você vai remover alguns detalhes sobre os quais eu não falei antes, mas eles o deixaram para vocês. Então, basicamente, escreva sobre seu público-alvo aqui. Você não precisa incluir isso. Escreva sobre os requisitos de design e o cronograma de orçamento aqui, você pode remover os decks simplesmente selecionados a partir daqui, e simplesmente excluídos assim. E, em seguida, envie isso para o seu cliente. E então eles vão ficar felizes com isso. Então, basicamente, este é o nosso resumo de design, ou realmente espero que vocês tenham gostado deste vídeo porque, como eu disse, é muito importante ter um resumo de design no lugar porque a maioria das vezes você vai usar isso e os clientes vão perguntar você, por exemplo, para algumas mudanças diferentes. Mas se essas mudanças não estão dentro do resumo de design exigido, se eles não estão no contrato, e então sinta-se livre para dizer não. Ou se você quiser trabalhar com aqueles, sinta-se livre para dizer sim, mas certifique-se de sempre cobrar adicional para uma dose porque eles não estavam em breve projeto, eles não estavam no contrato. Então, por que você deveria trabalhar com dívidas? Basicamente, isso é datado para o vídeo breve de design. Na próxima série de vídeos, vou mostrar a vocês um processo de grampeamento de papel. Vamos começar a desenhar em um pedaço de papel. Eu vou explicar meu processo de design pode projetar pensamento por trás de cada um desses sites ou projetos de aplicativos. Vou mostrar a vocês um pensamento adicional sobre design para certas pessoas, design para um determinado grupo demográfico, certos países e assim por diante. Mas tudo isso vai ser explicado nesses vídeos de wireframing. Portanto, certifique-se de assistir aqueles se você estiver interessado. Caso contrário, você sempre pode seguir este curso e passar por diferentes lições. O que lhe interessa, o que vai achar mais interessante, o que precisa bem. O que você acha mais útil e assim por diante. Portanto, assegure-se de explorar plenamente o discurso. E porque eu estruturei assim, para que você não tenha que assistir todas as lições se quiser. Você pode simplesmente pular para a parte de design, se quiser. Mas incluí algumas informações importantes e importantes em cada seção do discurso. Então, se você quiser aprender mais e tirar o máximo proveito deste curso, então certifique-se de seguir todas essas lições. Vai demorar mais tempo, mas prometo que os benefícios serão muito maiores. Então, no próximo vídeo e na próxima série de vídeos, vamos começar a projetar wireframes em um pedaço de papel. Então, vemo-nos lá. 15. Encontre o público alvo.: Neste vídeo, vamos falar sobre a pesquisa do público e o que você pode fazer para pesquisar seu público. Portanto, existem dois tipos de pesquisadores que já está concluída. Então isso significa que se seu cliente já sabe quem são seus clientes e se eles já fizeram a pesquisa, então você só vai pegar essa pesquisa e, por exemplo, poli-la um pouco ou refiná-la um pouco se eles, por exemplo, deseja expandir para público adicional. Assim, você pode saber a partir de seus alvos anteriores e exemplos anteriores o que você pode fazer com o design e onde você pode ir a partir daí. Se você precisa pesquisar novo público, Se, por exemplo, D Apenas saber aproximadamente quem é seu público, então você precisa fazer a pesquisa quando você precisa entender quem é o público-alvo. Então, em nosso resumo de design bem aqui, eu estou olhando para ele na minha tela. Reabilitação, 22 anos, 45 anos. Então isso significa, por exemplo, porque este é o projeto do banco. O banco já sabe a partir da conta que eles já abriram e eles podem verificar em seu sistema que este é o seu público-alvo Porque nesta faixa etária, maioria das pessoas estão lá. E então temos sexo, 40% feminino, 60% refeição. Mais uma vez, sabemos que o banco de dados já tem país de residência. Assim, Sérvia e Reino Unido cidade ressonância Belgrado em Londres, porque é onde eles têm sua localização é sobre. Temos local de trabalho. Então, principalmente empregos de baixa renda. O que os proprietários de pequenas empresas também, especialmente freelancers. Então foi isso que perguntaram quando abriram suas contas. Então eles sabem disso a partir da dívida, experiência da dívida, hábitos de consumo de mídia. Então Instagram, YouTube, Twitter e tique-taque, hábitos diários ou consumo de mídia social. Lidar com o trajeto, comer saudável, exercitar à tarde e assim por diante. O banco pode alertar sobre todas essas informações, principalmente perguntando aos clientes Derek. E você pode aprender com informações de dados o que você precisa fazer para o projeto. Então, porque temos mais clientes masculinos do que mulheres aqui e estamos em audiências ianques. Então, 22, 45 anos de idade, podemos saber instantaneamente que não precisamos usar todas essas cores premium e antigas como cor preta escura real, literalmente ouro e assim por diante. Além disso, não vamos usar essas cores porque este banco não é. Como posso dizer este banquete realmente personalizável? Eu não sei como dizer isso, mas não é para clientes high-end e clientes que já estão em iaques, Dionne super carros. Não há muitas casas diferentes na zona de Mencius. E este banco é para pessoas normais. Portanto, você precisa estruturar sua forma de dívida de voz para que essas pessoas normais possam entender o que você quer dizer a eles. Então eles não querem ver imagens de iaques e mansões e assim por diante porque eles não são donos dessas coisas. E, portanto, você vai usar as cores que são apropriadas para o seu público. Neste caso, 60% masculino, 40% feminino. Então vamos colocar um pouco de tempero no design dela, digamos assim. Então, digamos que vamos usar alguns cantos arredondados e torná-lo macio. Talvez possamos usar algumas sombras de fundo mais tarde, pode ser até mesmo borrão de fundo. Apenas para dar este olhar moderno e suave para que possamos acomodar tanto o público masculino como o feminino. Mais uma vez, você precisa olhar para um país de residência e cidade de ressentimentos. Então você precisa olhar para a cultura dessas pessoas. Você precisa entender o que é a cultura, especialmente a cultura local, especialmente nestes casos em que eles estão focados apenas em, por exemplo, Belgrado e Londres. Então você precisa entender uma cultura de dose para as cidades e você precisa adaptar o seu projetado para essas culturas. Então, mais uma vez, se uma certa cultura ou religião estiver usando um determinado conjunto de cores, você não vai usar esses conjuntos de cores em particular. Outras religiões, cidades, países e assim por diante. Então você precisa pensar sobre todas essas coisas. E como você pode pensar sobre isso simplesmente fazendo sua pesquisa, simplesmente entendendo quem são seus clientes-alvo, quem é seu público-alvo? E se, como no nosso caso, já temos essa informação e a temos pedindo ao banco que nos forneça essa informação, então podemos facilmente estruturar essa informação em nosso desejo. Então, mais uma vez, usando a cor, usando a topografia e sob a frente da topografia, se seu público for pessoas mais velhas, você geralmente usará tipografia maior porque o site das pessoas é muito ruim em certa idade ou Eles estão começando a ficar mal. Portanto, você vai usar tipografia maior. Você está indo para uma tipografia mais escura só para ser mais acessível para essas pessoas. Se as pessoas mais jovens estão em questão como estão no nosso caso, então você pode, por exemplo, usar uma topografia de tamanho menor. Você pode usar cores mais claras apenas para dar essa sensação geral de bem-estar ao seu site. Porque como você pode ver a partir dos hábitos diários, consumo de mídia social diária recomendado comer saudável e malhar à tarde. Então talvez essas pessoas estejam comendo fora em algum lugar saudável e eles estão checando sua conta bancária enquanto estão no lugar da dívida. Então, se eles estão nesse estado de espírito, você não quer que os atolem com a topografia da cama, com cores ruins e assim por diante. Você quer ter essa sensação geral de bem-estar e ser KLT e ser verde e estar unido com a natureza e com a comunidade e assim por diante. Mas usando essas cores certas, a topografia e o imager, que é especialmente importante se você está falando com pessoas mais jovens como nós estamos aqui, então você vai usar imagens de pessoas mais jovens. Porque mais uma vez, a imagem é realmente importante porque está apontando as pessoas para a direção onde o negócio está indo. Então, mais uma vez, se nossa idade demográfica é de 22, 45 anos de idade, não vamos mostrar algumas pessoas mais velhas nessas imagens do Windows, mas pessoas mais jovens, por exemplo, usando seus telefones celulares, usando os tablets, pendurando fora, talvez beber café, andar de bicicleta por aí, talvez sair. É um lugar agradável e assim por diante. Então você só quer se concentrar com quem você está falando? Jogue suas imagens através de suas fontes e através de suas cores. Então é aí que esse público-alvo realmente vem calhar porque você só precisa pesquisar e endividar. Se, como neste caso, já temos isso. E como o banco é fornecido todas essas informações para nós, o que acontece quando você não tem nenhuma dessas informações? Bem, você simplesmente precisa se sentar com seu cliente 101. Basta perguntar-lhes quem é o público-alvo. E então você pode fazer uma série de perguntas como fazemos aqui. Qual é a sua idade, qual é o seu sexo? Onde eles estão localizados? O que eles gostam de fazer, e assim por diante. Então você pode listar todas essas perguntas que já têm modelo de índice que eu estou dando a você, fazer essas perguntas para o seu cliente para entender quem é o público-alvo. Den, uma vez que você segue esse público-alvo, você pode tomar suas próprias decisões simplesmente incorporando isso em seu design. Se precisares de fazer uma pesquisa de público-alvo e, obviamente, vais cobrar mais pelo pai. E isso é mais UX tipo de coisa baseada em campo. Como você faz pesquisa de alvo? Por exemplo, eles estão dizendo que eles pensam que essas pessoas estão, digamos, trabalhando em um banco local, por exemplo. Então você vai ao banco local e perguntar a essas pessoas se elas estão disponíveis para algum tipo de entrevista. Dan, você vai formar a lista de perguntas que vão fazer a essas pessoas. E a melhor coisa que você pode fazer é colocar todas essas pessoas em um grupo, em uma sala ao mesmo tempo, se for possível, durante dois, essa pandemia mundial e assim por diante. Você pode fazer isso online. Obviamente, você pode agendar chamadas Xun, chamadas Skype, Google Hangouts e assim por diante. Então você pode perguntar a todas essas pessoas ao mesmo tempo, ou você pode pré-gravar suas perguntas. Você pode enviar-lhe pai, eles podem enviar-lhe um saco de e-mail para que você realmente não tem que sentar com eles se você não quiser, ou se você é tímido ou se eles não têm tempo e assim por diante. As pessoas gostam de ser pagas por esta triagem. Então essa pesquisa de público-alvo obviamente leva muito tempo. Então, será melhor se você puder pagar a essas pessoas. E como você pode ir pegar p? Como você pode pagá-los é simplesmente pedir ao seu cliente para pagar antecipadamente já que já falamos sobre isso antes, porque se eles pagam adiantado, por exemplo, vamos dizer 30% ou 50% ou o que quer que seja. Você pode usar esse dinheiro para esse público-alvo, você não tem que pagar quantias enormes. E apenas um pouco básico, eu não sei, quantidade regular para essas pessoas porque eles estão usando seu tempo com você. E então uma vez que você formar sua opinião sobre esse público-alvo, você pode então usá-lo em seu trabalho de design e, mais tarde, quando o trabalho estiver terminado ou quase terminado, você pode voltar para essas pessoas e agora perguntar eles para testar seu produto e como você pode fazer isso. Há muitos plugins diferentes dentro do Adobe excedido que você pode instalar para testar com públicos reais. Veja que datação do produto antes de o produto entrar em código e entrar em vigor. Porque vamos usar técnicas de prototipagem, micro interações e assim por diante. Assim, você pode mostrar-lhes como o produto será na vida real uma vez codificado, antes de ser realmente codificado , que economiza tempo tanto para você, seus clientes, desenvolvedores e assim por diante. Porque você vai testar essas soluções em pessoas reais. E você pode entender se as pessoas reais que são realmente nosso público-alvo vão gostar deste produto antes que ele vá ao ar. Se eles não o fizerem, obviamente, você vai anotar todas as respostas deles e você vai incorporar essas respostas em seu design para que você possa mudá-lo. Você pode voltar para eles. Basta fazer essas perguntas novamente ou algumas perguntas diferentes. Como, por exemplo, como você encontrou a navegação? Acha que está muito apertado? Você é capaz de clicar em alguma dessas coisas? Gosta destas animações? Acho que levam muito tempo. Como você acha que as cores fazem, você acha distinto distração para encontrá-lo facilmente para clicar nesses botões para que você possa formatar todas essas perguntas e fazer todas essas perguntas para as pessoas que você e seu cliente acha que é o público-alvo. Se você tiver o público-alvo. Então vamos voltar à história desde o início. Então temos nosso público-alvo porque o banco já forneceu essas opções. download que você pode fazer é quando você chegar à parte de compartilhamento do seu projeto e testar parte do seu projeto, você pode então formar o seu público-alvo usando as informações que o cliente forneceu. Neste caso, o banco, você pode colocar todas essas pessoas em uma sala ou Skype chamar a chamada de zoom e tudo o mais sobre o que eu falei e fazer essas pessoas essas mesmas perguntas. Então você pode obter as respostas deles. Você pode formatá-los e você pode pensar como, por exemplo, se duas ou mais pessoas disseram que este botão é muito distraidor, eu estou alterando-o. Se três ou mais pessoas disseram que sim, eles não podem ler o texto, eu vou tentar melhorar a cor, pode ser fazer algo mais escuro e talvez mudar a cor completamente. Então você entende o que quero dizer. Você tem que testar essas coisas com pessoas reais. E esse é o verdadeiro processo de UX de design. Então limpar, mudar, implementar, destinado novamente, e é basicamente um círculo de falhas e você está fazendo esse círculo durante toda a vida útil do projeto. Então, do ponto em que você começa até o ponto em que você termina e o produto é a vida. Esse não é o fim do processo de design. Você vai fazer isso de novo e de novo. Mas eu só estou mostrando a vocês o formato baseado em projeto estruturado base de projeto. Então, basicamente, para cada um desses testes, por exemplo, depois que o produto está ao vivo através do design do site aqui. Então, quando o site está ao vivo, talvez em um período de três meses, pode ser que você possa coletar alguns dados do banco e você pode sentar-se com a pessoa do banco e, em seguida, falar com eles. Talvez eles tenham um gerente de projeto para este projeto e assim por diante. Ou, se o cliente for menor, você pode se sentar com os clientes diretamente e depois inspecionar todas essas informações. Por exemplo, se eles pensam que a página é realmente importante para a conversão, e você vê no Google Analytics, por exemplo, que a conversão é muito ruim, então você pode sentar-se com seu público-alvo, falar com eles sobre o que eles gostariam de mudar com essa página específica, então você pode aplicar essas alterações, Enviá-los para desenvolvedores. Os desenvolvedores podem implementar essas mudanças porque é muito mais fácil agora porque eles têm um site ativo funcionando. E então você pode dar para mais um mês ou três meses e ver se a conversão melhorou. Obviamente, você pode definir esses prazos com seu cliente e ver, por exemplo, se eles querem alcançar algo em um período de tempo mais curto, digamos que eles querem uma conversão maior em três meses. Então, por exemplo, talvez você possa fazer duas dessas mudanças após cada um dos meses. Espero que entenda. Após um mês, você obtém mais uma vez com seu público-alvo. Você fala com eles sobre essas mudanças, implementa as alterações e os desenvolvedores implementam as alterações. E depois de mais um mês, você explora e vê se eles atingiram o público-alvo. Se eles alcançarem seus objetivos, se eles alcançaram, então tudo bem. Talvez você possa fazer algo para melhorar um pouco mais. Se eles não os alcançaram, então você pode voltar para um público-alvo com algumas novas perguntas, novas mudanças e assim por diante. Então é realmente todo o processo do círculo porque ele começa e então ele nunca termina porque você sempre faz essas mudanças. Mais uma vez, não é sua responsabilidade fazer essas alterações depois que o produto está disponível, mas você pode oferecer isso como um serviço para um cliente e depois dizer a eles, Ok, você tem essas metas podem ser, nós podemos alcançá-los. Se não os encontrarmos, talvez devêssemos nos encontrar novamente. Devemos falar novamente sobre falar o público-alvo para que possamos tentar outra coisa. Podemos tentar algo diferente e talvez melhorar as chances de chegar a esse objetivo. Então é isso para este vídeo, e eu vou te ver no próximo. 16. Recursos de fio de papel: Tudo bem, então vamos agora começar com wireframes de papel. Mas antes disso, eu só quero mostrar rapidamente os recursos que eu estou usando você pode usar e os recursos que você basicamente precisa para wireframing de papel. Então o que você realmente precisa é de papel. Estou usando apenas um papel de impressão normal. Você pode usar qualquer papel que quiser. Pode ter linhas e pontos , pode ter quadrados. É mesmo com você. E que tipo de papel tem, que tipo de papel você gosta de usar? E isso realmente não importa. Coisa desordenada como espessura do papel, classificação do papel e assim por diante. Você pode usar uma folha simples de pessoas brancas como eu estou usando aqui. Este é apenas um papel de impressão básico ou você pode comprar em qualquer loja. S4 depende. Você pode usar lápis de madeira, você pode usar canetas como estas. Você pode usar curvas esferográficas. Cabe a você mais uma vez o que você tem em sua casa. Se você quer ficar chique, você pode comprar essas réguas. Você pode comprar essas réguas que têm ícones gravados dentro deles. Então você pode basicamente estabelecer a regra, uma régua como esta, e então você pode simplesmente desenhar um ícone sobre ela. Então eu não gosto de fazer isso porque isso me atrasa. Mas você pode usá-lo, você pode comprá-lo on-line, você pode basicamente encontrar o que quiser. Você também pode usar marcadores de cores diferentes. Não vou usá-los hoje só para acelerar um pouco as coisas. Você pode usar canetas como DES. Como eu disse, cabe realmente a você o que você tem, o que você está mais confortável em usar. E esse processo é basicamente tudo sobre idéias. Então você só quer tirar idéias da sua cabeça, para baixo em um pedaço de papel e apenas classificadas. Você pode ver onde você pode levar essa ferramenta de processo e em que direção. Então, para começar, o que eu quero é listar todos os serviços que o cliente me deu. Então, mais uma vez, o Cliente é um banco e eles têm todos esses serviços diferentes que eles querem incluídos em seu site. Eles têm todos os sites que eles querem redesenhar. E a navegação no topo é realmente desordenada. Não é muito bom para os olhos. É realmente difícil de entender. Então, a primeira coisa no design UX, que vamos fazer para este site em particular é corrigir sua navegação. Então, basicamente, sua navegação está parada agora mesmo aqui, imagine no topo da página. E é realmente confuso com um monte desses diferentes serviços que eles oferecem. Eu quero corrigir isso porque eu quero que os usuários naveguem facilmente neste site para reduzir a taxa de rejeição. Porque se você se lembrar do vídeo anterior sobre design breve, taxa de rejeição é um de seus principais requisitos. Então, para começar, eu vou apenas listar as páginas que eles basicamente querem fazer para este site. Então eles têm contas, eles têm empréstimos, cartões, investimento, digital e painel com serviços adicionais. Então, se eu pegar minha câmera e aproximar um pouco mais, você pode ver o que estou fazendo um pouco melhor. Você pode ver aqui que temos contas, cartões de crédito, investir, digital e painel de controle. Então, tudo isso tem diferentes serviços dentro. Então, basicamente, em contas, você pode abrir contas diferentes como check-out, salvar conta e assim por diante. Você vai ver que uma vez que realmente começamos com o processo de design e wireframes e assim por diante nos empréstimos do Adobe XD, basicamente a mesma coisa. Então tudo isso tem diferentes serviços, carros, você pode imaginar cartões de débito, cartões de crédito e assim por diante, investe. Então eles têm diferentes pacotes de investimento. Assim, por exemplo, realizada bolsa de estudos investir no futuro e assim por diante. Digital é basicamente ousar ferramentas auxiliares AI. Eles têm serviços bancários online, bancários e assim por diante. E sob o painel, uma vez que você realmente entrar neste site e ir para baixo do painel, você será capaz de acessar todas essas diferentes informações adicionais. Você vai ser capaz de ver seu gasto seu dia limita suas cartas, seus pulmões, por exemplo, que você tem sob este banco e assim por diante. Então, para consertar tudo isso, o que eles realmente me pediram para fazer é incluir os catiões de metal. Rent vai ser pop-up basicamente de suas localizações sob um mapa do Google. Lá me pediu para incluir para empresas. Eles me pediram para incluir nosso número de celular e diferentes idiomas. Então vamos anotar isso. Locais, negócios, telefone e idiomas. Então todas essas coisas precisam ser incluídas dentro de nossa navegação. D precisa ser organizado. D precisa ser fácil de ler, fácil de entender tanto em dispositivos móveis quanto na web. Então este é o nosso primeiro desafio basicamente, porque assim que você pousar neste site, você vai ver essa navegação superior. Você vai se perguntar, ok, eu estou em uma página de banco. Onde eu preciso ir? Talvez você precise abrir uma conta. Talvez você precise pegar um cartão. Talvez você esteja pensando em investir e assim por diante. Então você precisa ser capaz de navegar facilmente neste site. Então, para fazer isso, o que realmente vamos fazer é desenhar o esboço de um site. Então você pode imaginar que este é o esboço. Quando você pousa em um site, o que você vai fazer é incluir uma barra superior como esta, que vai executar uma largura total do nosso site. Dentro de lá, vamos incluir as nossas localizações aqui. Nós vamos fazer para negócios aqui. E na verdade vou anotar. Então, deste lado, vamos incluir um número de telefone. Então deixe-me incluir rapidamente um ícone de telefone. E era disso que eu estava falando antes. Você pode apenas incluir um rabiscado básico como este. E você também pode usar setas da ICN. Então, para a Nikon, se você está compartilhando isso com outro designer ou um desenvolvedor ou quem quer que seja, eles vão ser capazes de entender. Ok, este é um IC estrangeiro e este é um ícone de localização. E você pode escrever todas essas coisas. Para as línguas. Vou incluir duas bandeiras, basicamente a bandeira do Reino Unido e a queima sérvia porque estas são as nossas línguas. Deixe-me anotar. Línguas. E o que vamos fazer é incluir outra navegação, mas dentro deste site, então não vai ser largura total, vai ser uma navegação em caixa. Então, basicamente daqui até aqui, porque vamos usar a grade uma vez que realmente começamos com o design. Então esta vai ser a nossa navegação em caixa. Como este. Vai ter um efeito desfocado, vai ter uma sombra. Você vai ver mais tarde quando nós realmente começar com o design deste lado esquerdo. E nós vamos lidar com o logotipo. Então nós vamos incluir o logotipo lá. E depois contas. E eu realmente perguntei ao cliente o verdadeiro, que eu fiz anteriormente. Como pode uma lista de d's porque você precisa listá-los em ordem de prioridade. Porque, por exemplo, esses serviços digitais são, pode ser secundário para barragem ou terciário ou o que quer que seja. E estes são contagens em empréstimos talvez sejam o min, não significa serviços. Portanto, você precisa listar os serviços em sua navegação em ordem de prioridade porque a maioria das pessoas, especialmente no Oeste, lê da esquerda para a direita se for outro mercado ou Mercado do Oriente Médio, por exemplo, o ler da direita para a esquerda. Portanto, você precisa incluir seus itens de menu em ordem de prioridade da esquerda para a direita para esses países ocidentais em públicos ocidentais. Então contas, empréstimos, cartões, investimentos e digitais. E em vez do painel, eu vou realmente incluir um botão bem aqui. E pode ser um botão de login, que na verdade vai nos levar para a seção do painel de controle. Então eles vão ser capazes de clicar neste botão de login e ir para o painel. Então vamos anotar isso. E eu realmente prefiro escrever todas essas coisas, especialmente talvez você esteja criando este wireframe agora, mas você vai voltar para ele em um mês, digamos, ou em alguns dias ou em algumas semanas. E talvez você vá esquecer o que é isso, o que é para onde isso está levando você. Então, é realmente extremamente fácil como você viu, basta colocar a seta para baixo, por exemplo, este é o nosso ícone de localização. Então vamos anotar. Ocasião eu posso apenas para que você possa ver o que é. E vamos ver isso por enquanto. É apenas um ícone, mas talvez você vá escrevê-lo. Locais aqui. Isto para as empresas vão passar para a direita. Então você precisa ter todas essas coisas escritas. Acabei de ver se você pode lembrar mais tarde quando você voltar para ele, o que é, o que ele faz e assim por diante. Então isso é basicamente não são navegação. E eu vou deixá-lo aqui para este vídeo. No próximo vídeo, vamos voltar a ele. Vou mostrar-lhe alguns estilos diferentes de wireframing, o que você pode fazer. E então, em vídeo depois daquele, vamos finalmente começar com wireframes. E nós estamos realmente indo para desenhar todos os nossos elementos para baixo em um pedaço de papel. Então é isso para este vídeo, e eu vou te ver no próximo. 17. Estilos de redação de papel: Certo, então vamos continuar de onde paramos no vídeo anterior. E neste vídeo, eu vou mostrar a vocês um estilo de wireframe diferente que você pode usar para seus wireframes. Então eu vou usar este mesmo pedaço de papel. E na verdade, vou aproximar um pouco mais. Então vocês podem ver tudo isso um pouco melhor assim. Então, basicamente, os estilos variam de designer para designer? O fator chave aqui é o tempo. Então, quanto tempo você tem neste projeto? E outro fator chave é obviamente o orçamento dos clientes. Então, se eles estão pagando baixo salário mensal ou taxas baixas ou qualquer outra coisa, você não vai investir muito do seu tempo nesse processo porque, como eu disse, eles estão aumentando seu pouco ou nenhum dinheiro. Então você só vai basicamente rabiscar algumas idéias e passar para o Adobe XD. Mas se eles estão pagando um bom dinheiro, se você tem tempo suficiente para fazer isso e você tem talento e você tem algumas idéias que você precisa mostrar a eles. E então você pode investir muito do seu tempo neste processo, especialmente se você está compartilhando com ele com outros designers, na equipe de dívidas ou com o cliente que quer ser prático e assim por diante. Então basicamente esses dois fatores, tempo e dinheiro, são o que diferencia esses estilos diferentes. Então, dado o estilo número um, basicamente, eu vou comprar três cartas como esta. E nestes três cartões, vou mostrar-vos estes três estilos diferentes. Então esta é a imagem e no Primeiro Estilo, que é apenas estilo básico, para mostrar que esta é uma imagem. Você pode apenas fazer isso e mostrar-lhes que, OK, esta é uma imagem. E você pode apontar seu cliente e dizer, onde quer que você veja esta ovelha, significa que é uma imagem. E então, no segundo estilo, se você tiver um pouco mais de tempo e orçamento, é um pouco maior, e então você pode fazer algo assim. Todo mundo já viu ícones como este para as imagens. Então você pode apontá-los e dizer qualquer coisa, nós temos uma imagem, e esta é a imagem real, amassada na catraca. O que você pode fazer é desenhar em uma bela montanha. Se você sabe desenhar, você pode usar marcadores diferentes. Você pode usar sombreamento. Digamos que temos bosques bem aqui. Então você começa a idéia e você começa a foto. Também podemos desenhar nuvens aqui ou podemos usar cores diferentes e assim por diante. Então, basicamente, o diferencial chave aqui são os detalhes. Você tem uma quantidade limitada de tempo. Se você tem um orçamento pequeno na mão, então você vai usar este. Se você tem tudo o que eu disse um pouco maior, você vai usar este aqui. E se você quiser, e se você tiver muito tempo, muito dinheiro em suas mãos, e então você pode usar este. Você pode usar marcadores de cores diferentes. Você pode fazer o que quiser. Mas aqui, e deixe-me realmente mostrar-lhe porque eu tenho alguns marcadores na mão. Então vamos dizer que você vai usar este estilo ou ter este marcador bem aqui. E eu só quero mostrar rapidamente quanto tempo isso vai levar. E só para ilustrar meu ponto de vista, e só para que você possa ver a diferença aqui. Então eu realmente fiz um projeto como este no passado. O cliente tinha um orçamento enorme e eles querem mostrar isso para as partes interessadas apenas para que todos possam ver. Então eu usei esse método, mas isso foi apenas uma vez, na maioria das vezes. Na verdade, estou combinando este e este estilo. Então, dependendo de onde você está colocando suas imagens, especialmente para os avatares. Então $40, você pode fazer um circuito como este. Você pode fazer assim. Então, basicamente, endivida seu avatar. Ou às vezes você pode até ir assim. Então você pode pintar nas partes do seu avatar apenas para fazê-lo se destacar um pouco na página. Você pode fazer cores diferentes. Então, dependendo do seu avatar, obviamente, você pode pintar um fim. Então, cabe a você ou seus clientes, seu orçamento e assim por diante. Não quero me arrastar por muito mais tempo. Acho que entendeu a foto. Então vamos agora mais um. Vamos imaginar que temos um título bem aqui logo abaixo deste carrinho. Então, para este primeiro estilo, eu estou realmente indo apenas para desenhar uma bela linha grossa como esta. Então este é o nosso título. Este é um subtítulo, então é um pouco menor. E finalmente, para o parágrafo, podemos usar linhas como estas. Então temos nossa imagem, título, subtítulo e um parágrafo. Você também pode usar algo assim. Então você pode tomar um int para baixo apenas um pouco para diferenciar estes. Você pode usar cores diferentes e assim por diante. Mas o método mais rápido é esse método. E digamos que temos um botão de chamada à ação aqui abaixo. O que podemos fazer é desenhar um botão como este e encerrar o dia. Talvez você possa fazer isso apenas para indicar que este é um botão para o estilo número dois, o que podemos fazer é anotar título, subtítulo, parágrafo. E finalmente fazer um botão e escrever b n. Assim você pode ver a diferença entre esses dois. Isto é obviamente, mais uma vez, muito mais rápido, muito mais rápido. Isto é um pouco mais lento. Button nos dá mais informações e você pode combinar esses dois. Por exemplo, você pode escrever título, subtítulo e, em seguida, linhas de deveres. E para o btn, use este estilo se quiser. Agora, finalmente, para este último estilo, obviamente você vai usar uma informação real dentro. Então, digamos Montanha. Vejamos, Parque Yellowstone. Nós vamos anotar parágrafos reais, então texto real vai aqui e eu não vou desperdiçar muito seu tempo com isso. Mas você pode imaginar que você vai realmente escrever texto real, que vai para aqui. Agora, para o btn, vamos dar-lhe um como este. E vamos ver carregar ou ler mais. E eu vou usar meu marcador mais uma vez aqui. Vou chamá-lo de meu botão assim. E eu vou usar outra caneta só para ilustrar quanto tempo isso está me levando. Então este só para adicionar sob sombra OK em torno do meu botão. Então você pode basicamente ver apenas a partir desses três exemplos, o que você pode fazer com eles e como a diferenciação entre si. Portanto, temos a versão mais simples, armazenamento rápido e o que você vai usar a maior parte do tempo. Agora temos uma versão um pouco mais lenta, mas você pode usar alguns dos elementos de dispersão nesta versão. E nós temos a versão mais lenta, mas a versão mais detalhada e a que você provavelmente nunca vai usar. Mas eu queria te mostrar isso de qualquer maneira. Para os avatares e imagens de tipo morto, eu recomendo usar algum tipo de ícones. Digamos que você tenha recursos em sua página. E em vez de apenas incluir um círculo como este e encerrar o dia, talvez você possa fazer algo assim. Talvez você possa incluir uma estrela, nosso ícone de tipo diferente, e apontou em um dos wireframes que este é um recurso. Vamos ver. Então você pode saber, seus clientes, podem conhecer desenvolvedores e designers e assim por diante, o que realmente é. Então é isso para este vídeo. Eu realmente espero que você tenha entendido algumas diferenças entre esses estilos de wireframing. No próximo vídeo, nós estamos realmente indo para iniciar um usando esta navegação. E nós vamos realmente começar a projetar algumas páginas e estabelecer alguns elementos. Então, vemo-nos lá. 18. Wireframes de papel 1: Neste vídeo, vamos começar com nossos wireframes e vamos começar com a página inicial. Homepage será basicamente a nossa página básica de empréstimo, que vai mostrar a maioria das informações que eles estão oferecendo, bem como algum tipo de um post de blog ou notícias ou algo assim. Então, para começar, eu vou desenhar rapidamente um esboço que você está percebendo que eu não estou usando nenhuma régua. Você pode usar as réguas se quiser. Eu acho que é mais rápido assim, especialmente história ou naughts acoplando como eu. Mas se você quiser usar réguas para torná-lo chique, se você está compartilhando isso com seu cliente, se você quiser parecer um pouco mais profissional, eu recomendo usar uma régua apenas basicamente para esses contornos. Então, se você se lembra, nós temos essa navegação superior e nós temos essa navegação inferior. Agora, eu não vou perder muito tempo e escrever tudo isso. Então eu só vou desenhar em mais baixo, eu só vou desenhar em log in. Porque nós sabemos o que estes já são a partir deste exemplo anterior que eu mostrei a vocês. E porque eu tenho isso na mão, eu sempre posso verificar e ver o que é tudo. Então, em vez de escrever qualquer coisa porque esta é a nossa página inicial, vamos apenas viver este espaço em branco porque os usuários não clicaram em nenhum lugar. Então, se eles clicarem, por exemplo, em contas, vamos ver que podemos usar este seletor aqui na parte inferior. Assim, eles podem saber que o clicou em contas e eles estão atualmente nessa página específica. Mas como nada é clicado, vamos deixar em branco assim. Então deixe-me desenhar outro esboço deste lado como este. E eu sempre gosto de fazer isso porque eu tenho um espaço vazio deste lado para que eu possa usar esse espaço para me lembrar e para me dar notas do que todas essas coisas estão neste lado da página. Então, para começar, vou desenhar uma imagem de herói. Então eu vou desenhá-lo assim. E aqui estão imagens, basicamente algo que chama a atenção de seus usuários. Então, neste caso, vamos usar imagem e um texto. Vamos usar a imagem do lado direito. Então aqui, e eu realmente vou desenhar uma imagem como fizemos anteriormente. Então deixe-me fazer isso. Deixe-me fazer sujeira, e vamos chamar de acordo. Vamos dar-lhe uma imagem. E talvez possamos usar a imagem das pessoas. As pessoas são mg porque D quer dis site e seu foco principal é sobre as pessoas mais jovens. Então talvez possamos fazer um par de pessoas aqui. Talvez possamos fazer um grupo de pessoas. Talvez possamos fazer sexo masculino e feminino porque eles não são clientes específicos de gênero. Querem clientes masculinos e femininos também. Então, o que podemos fazer aqui no lado direito é título, texto ou legenda, você quiser chamá-lo, e uma cidade. Então ele vai nos levar a alguma parte do site que é importante para eles. Então você pode ver um pouco melhor agora como um hub ampliado, todo esse tipo de olhar abaixo disso, podemos atender alguns serviços. Então vamos anotar os Serviços. E, obviamente, a cópia vai depender de algumas coisas. Será que cliente forneceu a cópia REO fazendo a cópia, mas para a parte wireframe e Para o bem do projeto e esta parte do projeto, você não precisa ser muito específico. Você sempre pode alterar essas tags dentro do Adobe XD depois de realmente trazer esses wireframes. Então, para esses serviços, podemos usar algumas caixas. Então vamos dar três caixas, por exemplo, assim. E para as caixas, Talvez eu possa usar alguns ícones. Bem aqui, no canto superior esquerdo. Posso dar-lhe um título. Posso dar-lhe um parágrafo como este e talvez ler mais. Então, os usuários podem clicar aqui e vamos dar. Eu vejo. E porque às vezes estes são muito pequenos para desenhar qualquer tipo de ícones dentro. Então você pode apenas apontar a sua seta e disse que este é ICN. Vamos fazer esses outros. Então eu induzo ler mais, ler mais. E como você pode ver, eu estou apenas escrevendo basicamente e você pode ver claramente como isso é rápido. E uma também, uma coisa é que você pode ver que eu estou alinhando eles de um lado. Estou alinhando-os do outro lado porque vou usar uma grade dentro. E é por isso que estou desenhando meus wireframes assim. Abaixo. O que podemos incluir é porque é um banco, podemos incluir alguma taxa de câmbio, por exemplo. E talvez possamos fazer uma tira como esta. Mudar a taxa. O encontro vai ser bem aqui. Você está percebendo que eu só estou escrevendo um encontro. Eu não vou incluir o encontro real neste momento. Podemos fazer a bandeira e informação aqui, então esta é a nossa bandeira. E podemos fazer algumas moedas principais como Euro, USD, iene japonês, e assim por diante, o que quer que seja neste mercado e neste banco em um exige, você não está vendo, eu não estou perdendo tempo, mas escrevendo tudo. E este é o nosso primeiro estilo que eu mostrei a vocês anteriormente. Então você pode ver que já estou combinando esses dois estilos, este estilo para a imagem. E você pode ver que está bem aqui. E basicamente esse outro estilo para todos esses outros elementos, porque eu só quero fazer isso rapidamente. Eu queria ser rápido e liberado algumas idéias que eu já tenho. O que podemos fazer aqui é desenhar uma imagem porque eles querem incluir alguns de seus recursos médios que estão usando. Então vamos chamá-lo de título. Vamos dar-lhe um parágrafo. Elementos, dê-lhe btn. E porque talvez estes sejam os servidores deles, esta é a promoção deles, esta em algum momento eu devo. Abaixo disso, o que podemos fazer é usar outra caixa ou talvez caixas de ferramentas e incluir serviços adicionais e que eles têm. Então vamos dar uma imagem. Então eu mg. Você também pode fazer isso. Ou você pode fazer o que quiser, o que for mais fácil. E então talvez título, talvez parágrafo. E podemos incluir um botão abaixo. Este btn apenas para que você saiba o que é abaixo dessa notícia. E o que podemos fazer é incluir três GridLayout aqui. Imagens. Você pode ver o quão rápido e confuso esta casa é sem usar linhas retas. Estou apenas desenhando o que tenho na minha cabeça atualmente. Então podemos ter um título, subtítulo e talvez uma leitura mais. Em todos estes. Abaixo disso, o que podemos fazer é ter uma tira de informação. Eu diria que talvez eu possa incluir um logotipo aqui só para lembrar as pessoas. Então aqui temos um número de telefone. Por exemplo. Aqui temos, vejamos, localizações. E finalmente aqui temos um e-mail. Assim, eles podem rapidamente chegar a esta empresa e eles podem entrar em contato com eles. E finalmente, o que temos no fundo é o rodapé. E rodapé vai ser basicamente um grande, porque este banco tem um monte de serviços diferentes. Portanto, estes são os nossos principais serviços da nossa navegação. E eu vou mostrar-lhe isso em apenas um segundo. Então, se eu levar isso de volta, você pode ver o vídeo. Temos contas, pertences, carros e assim por diante. Então isto é o que vai ser isto. Então isso vai ser contas, pulmões, cartões e assim por diante. E sob cada um desses, teremos itens de navegação adicionais. Eu, itens de fotos. Porque, por exemplo, digamos que esta conta é esta. E como eu mencionei, eles têm contas correntes, contas poupança e assim por diante. Então estes são o que, estes estão bem aqui. Nós vamos escrever ou digitar logotipo ou o que quer que n, vamos terminar um dia. E esta é basicamente a nossa praia. Então o que você também pode fazer é que você pode escrever em cima ou característica deles. Então induz home page. Como você pode ver bem aqui no topo. Então nós temos página inicial aqui apenas para que, você sabe, designers, clientes e todos os outros saibam que estão na mesma página. Então todo mundo sabe o que é isso, é que você pode ver que este processo não demorou muito, 10 minutos porque eu estou falando demais. Mas você pode imaginar que se você está liberando idéias, você pode fazer algo assim em 3-5 minutos. Isso realmente depende do tamanho das páginas, quantos elementos existem e o que você deseja incluir. Uma última coisa que quero fazer porque, como ele disse, vou deixar este espaço bem aqui. Então, para este, eu não preciso de nada porque diz que serve isso como taxas de câmbio, então você sabe o que é. Mas para isso, talvez eu possa ver promo ou outra coisa, talvez oferecer. E podemos ver com o cliente o que é realmente importante incluir aqui. Para este, talvez pacotes ou contas ou combinados como sujeira. E estes são apenas artigos de notícias. Um outro estilo que você pode fazer é colocar seu wireframe no centro do papel e, em seguida, ter espaços vazios à esquerda e à direita. E você pode usar esses espaços vazios para anotar todas essas informações adicionais que você vai usar em sua página. Isso é basicamente para este vídeo, eu vou vê-lo no próximo onde nós vamos começar com as contas e nós vamos basicamente usar o mesmo layout, mas algumas diferenças. E eu vou explicar isso no próximo vídeo. Então, vemo-nos lá. 19. Fire frames 2: Então neste vídeo vamos começar com contas. E se você não quer desperdiçar muito papel, você pode fazer o que eu fiz com esses exemplos. Então você pode usar um lado para um phage, você pode usar outro site para outras páginas e sólido. Mas porque eu tenho essa folha de papel e vou usá-la em outros projetos futuros. Você pode ficar de olho em desperdiçar papel e gastar muito dinheiro basicamente. Então vamos começar com as contas, se você se lembra, e eu estou apenas trazendo isso para mantê-lo atualizado. Temos contas aqui e vou anotar. Então vamos fazer o mesmo que fizemos para o anterior. Esta semana. Vamos incluir o topo. Agora, vamos incluir um lado da soneca. Então, basicamente este nav estilo caixa, botão logotipo, btn e contas como este. Não sei como soletrar hoje aquele que não presta atenção nisso. Então, se eu remover isso para decidir, você pode ver claramente, se eu aproximar um pouco mais, contas e apenas para o seu bem, sãocontas e apenas para o seu bem, e nós vamos anotar aqui, então assim. Então ele pode saber no topo da página o que é eo que você precisa para desenhar em um presente. E eu realmente recomendo que você faça isso para todas as suas páginas. Mas agora vamos seguir em frente. Então, vou estender isso só um pouco. O que nós realmente vamos fazer é basicamente usar o mesmo layout como fizemos aqui mesmo com a página inicial. Então eu vou usar esta mesma seção de herói para todas as minhas páginas porque isso me dá uma grande oportunidade apenas para mostrar algumas diferenças chave entre todas essas páginas. Mas vamos dar uma reviravolta. Em vez de fazê-lo como aqui na página inicial onde a imagem está no lado direito. O texto está no lado esquerdo. Vamos virar, e vamos fazer isso. Então vamos traçar uma linha como esta para a nossa seção de heróis. E vamos fazer um herói de imagem. Então basicamente a mesma coisa. E eu vou colocá-lo aqui para que as pessoas, eu sou G. Como você pode ver, deixe-me aproximar um pouco mais. Então as pessoas imagem e apenas para que eu não possa o que isso é. E eu posso colocar o título aqui, texto e CTA. Agora, esta chamada à ação não precisa realmente levá-lo para páginas adicionais como está na página inicial. Porque na página inicial você quer promover o que é mais importante para o seu projeto ou sua marca ou qualquer outra coisa. Mas nessas páginas internas, que isso realmente é porque estamos no discurso da conta. Você quer realmente promover seções dessa página para que você não queira que as pessoas percam e percam muito tempo. Você quer levá-los direto para aquela seção. Então temos uma conta, sabemos, por exemplo, da experiência dos bancos. A maioria das pessoas abre uma conta corrente. Assim, você pode, quando você clicar lá, ele pode levá-los diretamente para a seção de conta corrente. Então, o que nós realmente vamos escrever isso abaixo é talvez abrir sua conta perfeita ou sua conta ou o que quer que seja. Hoje ou como você quer estruturar mortes são escritas sobre como escrever Daisy e Tom medo. Então a atenção que, então o que podemos fazer é usar uma linha de ícones viu, digamos que eles têm para serviços? Então podemos usar para diferentes ícones como este. Então este é i, c, n. E aqui você pode realmente desenhar porque estes são um pouco maiores, você pode desenhar estrelas, por exemplo, apenas para indicar que este é o seu ícone. Você pode usar qualquer outro importado que você pode desenhar assim. Então é realmente até você quanto tempo você quer investir neste obviamente viu que pode rabiscar rapidamente e você pode ver bem ali. Então essas contas são basicamente contas diferentes e eu estou realmente indo para escrever os nomes dessas contas. Então, por exemplo, torta, estrangeira, milenar e premium. Na verdade, estou escrevendo nomes de contas que o banco me forneceu para que eu saiba qual deles é qual. Agora esses ícones serão um pouco diferentes uns dos outros porque queremos ilustrar o que o usuário clicou. Então, quando o usuário clicou em algo, talvez o ícone fique preto e branco. E todos esses ícones são coloridos. Então vamos anotar isso. Então, ICM, preto e branco. Quando clicado, cor, quando não. Você pode ver bem aqui deste lado. Então esta seção aqui, como eu continuo dizendo, é obviamente muito útil porque você pode usá-lo em seu favor. Você pode anotar algumas anotações. Mais uma vez, se você voltar para este projeto, digamos uma semana depois, se você mostrar esses wireframes para um cliente, talvez você esteja esperando a resposta, talvez eles retornem para você em uma semana, duas semanas ou o que seja. Você será capaz de entender e saber qual foi o seu processo de pensamento quando você realmente criou D. Então é por isso que eu continuo dizendo que este espaço é realmente útil. E agora abaixo mesa, mas ver que este ícone está selecionado. Vamos tomar um pouco. E só para mostrar que ele é selecionado, Talvez possamos fazer uma sombra em torno dele apenas para que nós mostramos que ele está selecionado. Abaixo disso, talvez possamos incluir uma imagem. Talvez possamos incluir, então digamos Conta Iniciar. Porque é o que é. Temos um parágrafo aqui e temos um apelo à ação. E talvez ele possa dizer aplicar agora. E quando um usuário clica neste botão aplicar agora, ele vai levá-los para o fórum on-line que um banco já preparou. Nós não vamos projetar isso porque muitas vezes você vai falar com seus clientes, o que eles prepararam, o que eles não têm. Vou dar-lhe um exemplo, um exemplo rápido, e aquele que você vê na maioria das vezes, nossos mapas, muitas das empresas estão usando o Google Maps porque a integração com o site é extremamente rápida. É extremamente fácil. Qualquer um pode fazê-lo, especialmente pequenas empresas com plug-ins, se as pessoas estão usando sites WordPress, por exemplo, plug-ins em todos os lugares. Então, por que desperdiçar seu tempo, perder o orçamento do cliente redesenhando um mapa, o que você pode fazer no caso Mapas é simplesmente fazer retângulo e anotar mapa. Nesse caso em particular. Muitas vezes os clientes também precisam de alguns players de mídia. Então, mais uma vez, a integração é basicamente ousada. Eles apenas integram desafio ao media player. E, neste caso, eles estão basicamente usando um formulário. Eles estão usando um formulário on-line que eles já têm, que já funciona. E basicamente não importa como parece. Então, quando o usuário clica aqui neste botão de fornecimento agora, ele vai levá-los externamente para um formulário que eles vão preencher com suas informações pessoais. E talvez ele possa trazê-los para a página de confirmação que você pode levar ao design e ver com recusado a se isso é necessário. Se eles não têm a página Confirmação, vai levá-los de volta, por exemplo, para esta página uma vez que eles realmente preenchê-lo lá. E vamos dizer que nosso pequeno pop-up pode aparecer e deixá-los saber a dívida, o caixa do banco vai voltar para eles o mais rápido possível. Abaixo desta seção, o que nós realmente vamos incluir e destruição vai estar em todas as páginas é perguntas comuns. Perguntas tão comuns. E para este, vamos dar a divisão de três. Como este. Como você pode ver, isso é extremamente confuso, extremamente rápido. Mas esse é o ponto desses grampos de papel. Então vamos usar a ICN. Eu vejo, e eu vejo n bem aqui. Então temos título, temos um parágrafo explicando, por exemplo, a seção deste. Então, digamos que estas são nossas perguntas de conta, perguntas bancárias, ferramentas úteis, qualquer coisa, e links podem estar aqui na forma do texto. Então vamos anotar isso. Vejo título mais parágrafo e, em seguida, respostas. Respostas clicáveis como essa. Abaixo disso, vamos ter a nossa faixa infinita. Então logo. O que fizemos foi demitir o membro Localização, telefone e e-mail aqui. Na verdade, vamos incluir informações aqui, mas não perca muito tempo nesta seção. E, finalmente, quatro termos aqui abaixo. Você pode apenas escrevê-lo rodapé porque nós obviamente criá-lo no exemplo anterior aqui. E se você quiser, você pode investir tempo, você pode colocar no esforço e fazer exatamente o mesmo em todas essas páginas. Eu não vou fazer isso. Só quero acelerar um pouco as coisas. Mas mais uma vez, se você quiser, se você tem tempo, se você tem orçamento, você pode fazer isso para todas as suas páginas. Então deixe-me ampliar um pouco. Como assim apenas tipo de você pode ver como nossa página está olhando para o momento. Então, como você pode ver, tudo está tomando forma bem. Tudo está olhando como deveria ser, já estão começando a obter algum tipo de layout que vamos usar em todas as páginas. Então, como já mencionei, temos o nosso equipamento de navegação superior. Temos esta caixa agora, que é a nossa média f. Nós temos a seção de heróis que nós estamos realmente indo para copiar colar em todas as nossas outras páginas. Já temos alguns layouts que podemos explorar e usar em páginas adicionais na forma desses ícones. Nós já temos essas imagens iria texto e um botão para que possamos invertê-los. Por exemplo, podemos colocar uma imagem no topo, podemos colocar o texto abaixo e, em seguida, botão de um lado. Também temos esses cartões que podemos explorar. E, por exemplo, em alguns deles, talvez possamos incluir imagens aqui. Podemos talvez incluir diferentes estilos de botões e assim por diante. Então, já começamos a ter esses exemplos de layout e essas idéias de layout. Então, no próximo vídeo, vamos realmente passar para empréstimos. E eu vou mostrar a vocês basicamente essa mesma dengue, mas em um pacote diferente apenas para que vocês possam ver como podem explorar o conceito de descida em outras páginas. Então, vemo-nos lá. 20. Wireframes 3: Então neste vídeo vamos continuar de onde paramos no anterior e vamos começar com a página Empréstimos. Você pode ver que eu já incluí todas essas informações para economizar um pouco de tempo. Então basicamente a mesma coisa que com esses outros, mas aqui mesmo, diz empréstimos. Se você pode ver um pouco melhor. Aqui. E abaixo disso, o que podemos fazer é usar o mesmo layout que fizemos no anterior. E eu vou escrever, eu preciso de um tempo também. E você pode ver que eu estou começando a usar um texto real aqui. E eu já disse que nos vídeos anteriores você pode fazer uma combinação de textos reais e falsos. E eu só acho que isso é apropriado ter algo semelhante em seu site no momento já. Mas eu vou anotar eu preciso de um empréstimo para e então você pode dar eles basicamente o mesmo layout que fizemos no vídeo anterior. Assim, por exemplo, você pode incluir e essas informações. Dinheiro tão rápido. E também podemos usar ícones aqui, como fizemos nos exemplos anteriores. Biochar, casa e finanças ou o que for. Então nós vamos obviamente mudar isso na sessão de wireframing, mas este é apenas um exemplo rápido. Então, digamos que isso é o que eles selecionaram visto no exemplo anterior. Empréstimo rápido em dinheiro, e talvez possamos anotar e conseguir um dinheiro em 20 minutos ou 30 minutos ou o que for. Como isso. Isto vai ser centrado, obviamente, em descendentes. Mas como eu estou fazendo isso à mão livre, você pode ver um pouco fora aqui. Você também pode apontar isso. Centralizar texto assim, só para que você possa saber. E então eu fui para um layout semelhante. Então imagem no lado esquerdo. Mas em vez de apenas o texto, podemos criar algum tipo de recursos. Então vamos dar ICN aqui. E vamos ver dinheiro em 30 minutos com uma mensagem dessas. Certo? Desviá-lo. Documentação ICM. Talvez eles precisem preparar alguma documentação porque você não pode simplesmente aparecer em um banco e pedir um acordo de empréstimo. Vou pedir-lhe algumas informações. Por exemplo, sua carteira de motorista, você é atualmente informações pradarias informações bancárias e assim por diante e assim por diante. Vamos ver. Online, porque talvez você possa fazer isso online. Então, se eu comparar isso com nosso exemplo anterior, você já pode ver o que estou fazendo aqui. Então eu estou usando este exemplo anterior com uma imagem, texto e um botão. E vocês podem ver que eu insinuei todos esses princípios semelhantes basicamente a este exemplo. Apenas em vez de texto, eu estou usando ícones e a imagem de texto ainda está no lado esquerdo, mas talvez agora ele pode ser um pouco mais alto para acomodar todas essas informações. Isso pode ser mais estreito dependendo deste texto, você tem que pensar sobre todas essas coisas por causa do design responsivo. Então, mais tarde, talvez essa imagem em um telefone, vejamos, possa ir de largura total. E então todos eles podem ir um em cima do outro como eles estão aqui, mas no centro da sua tela porque você está na tela do telefone. Agora, vamos seguir em frente e projetar algumas outras coisas. Então vamos ver as dívidas. Eu posso escrever aqui, por exemplo, resposta em 20 minutos. Porque eles são muito rápidos com esses empréstimos. Talvez eu possa colocar aqui um parágrafo de texto e apelar à ação que diz aplicar agora. Como isso. Em vez de desenhar todas essas outras coisas adicionais, se você se lembrar do vídeo anterior e desculpe, este bom, Eu estou apenas puxando papéis para dentro e para fora. Então, em vez de desenhar esta seção inteira, vamos apenas escrever perguntas com e colocar três caixas porque vai ser muito mais fácil para nós entender o que é. Perguntas tão comuns. Vou colocar três caixas como esta para economizar espaço e tempo. Esta é a nossa tira informativa. Então logo, porque esses ícones são realmente simples, você pode facilmente desenhá-los. E finalmente, temos e-mail, como você pode ver. E, finalmente, podemos escrever em rodapé e logotipo na parte inferior. Então você pode ver que esse processo não precisa levar muito tempo. Você pode realmente facilmente fazê-lo e de uma maneira rápida. Então você pode ver que nós basicamente temos layout semelhante em relação à praia anterior, mas estamos explorando isso de uma maneira diferente. Então, em vez disso, como eu disse, uma imagem e texto e um botão aqui temos um ícone de imagem, texto e botão se moveu abaixo, que é aplicado agora botão de call-to-action, isso e isso e isso, basicamente o mesmo. Esta e todas estas partes superiores são basicamente as mesmas. Então vamos continuar de onde paramos com todas as nossas próximas praias e a dívida virá depois desta. E nós vamos basicamente usar esses elementos de diferentes maneiras. Então é isso para este vídeo, e eu vou te ver no próximo. 21. Wireframes de papel 4: Agora vamos criar uma página para os cartões. Então, para este discurso, diácono, use cartões diferentes ou cartões de crédito, cartões de débito. Eles podem criar seus próprios cartões e talvez até cartões de presente para que eles possam explorar essa opção também. Então podemos ter um título aqui, talvez ele possa escrever acompanhante diário. Vamos ver. Desculpe pelo cão e fundo se você pode ouvi-lo. Mas ele não pode fazer nada sobre isso. Talvez possamos fazer o nosso parágrafo aqui. E vamos ver que podemos incluir nossa imagem atual aqui. Então, talvez este seja um carrinho ou 1-2-3, 4-5-6. E posso até escrever aqui. Cartão para economizar um pouco de tempo. Logo pode ir aqui, Visa pode ir aqui talvez. E o Kingo bem aqui. Como a dívida, só para sabermos que isto é um carrinho. Talvez possamos colocá-lo em algum tipo de forma. Talvez possamos usar o Adobe XD para incluir algumas animações diferentes dentro dele, mas é realmente até, mais uma vez, orçamento de tempo e tudo o mais sobre o qual falamos antes. Bem, é um morto abaixo dat. Podemos usar cartões de crédito. E talvez possamos crescer com Visa e MasterCard. Talvez tenham outras opções, mas não sabemos no momento. Mas se o fizerem, podemos incluir diferentes tipos de seções aqui. Então, para esta seção, podemos incluir uma corrente. E, na verdade, vou escrever. E vamos ver, Visa, correntes de crédito, corrente de reunião. E basicamente a mesma coisa. Podemos ter uma descrição e talvez possamos aplicar agora como um link, que realmente vai levá-los para o fórum de aplicação externa que falamos nos vídeos anteriores. Então talvez eles possam clicar aqui e ir para o formulário externo. Então este é apenas o nosso gráfico. Isto é apenas para mostrar-lhes como algumas cartas no ônibus podem parecer. Como alguns cartões personalizados podem parecer apenas para dar-lhes algum interesse visual. Mas aqui, como o Scroll para baixo, eles podem ver cartões de crédito e em oferta nosso Visa e MasterCard, talvez eles possam incluir algum outro como American Express ou qualquer outro fabricante de cartões D não pode concluir, ousar. Assim, as dissecações são injustas para orientar os usuários para o que está disponível no momento. Então vamos incluir as mesmas seções, mas para cartões de débito, teremos a mesma coisa aqui. Então, duas cartas de corrente. E não vamos perder muito tempo porque essas seções são a mesma, mesma aparência e sensação. Diferentes. Design do cartão. Assim, por exemplo, podemos incluir um design de carro diferente dentro. Só para ilustrar que cartões de débito e crédito são diferentes para que eles possam ver, por exemplo, se você os tem em sua carteira, eles podem ver qual deles é débito, qual deles é crédito, obviamente, meio, que podemos tem uma seção, por exemplo, criar o seu próprio assim. E talvez possamos incluir outra corrente com algum design pode ser que possamos colocar uma sombra, talvez possamos colocar uma forma de fundo ou algum tipo ou qualquer coisa e apenas uma corrente personalizada como essa. Então nós vamos realmente projetar descartar mais tarde em um site fora do Adobe XD. E talvez possamos colocar um apelo em ação. Crie o seu. Este CTA vai realmente levá-los para o formulário d necessidade de preencher o formulário que o banco já tem. Eles podem então começar a criar sua corrente perfeita. Digamos que eles têm este criador de carrinho dentro do banco, então eles têm que crescer na loja e ver diferentes opções. Mas eles estão planejando colocar essas opções on-line para que as pessoas possam escolher entre diferentes formas, cores, eles podem escolher Visa, MasterCard, existem fabricantes? Eles podem, por exemplo, incluir imagens diferentes dentro e assim por diante. Mas isso é tudo com o banco, isso é tudo com eles. O que eles querem dar uma opção D para os usuários para este. Finalmente, abaixo que podemos incluir uma seção com uma imagem e chamá-lo e cartões de presente. Podemos incluir um parágrafo e, por exemplo, e ainda assim, o seu. E eles podem solicitar o vale-presente. Eles podem colocar o dinheiro no carro no final, podem então dar como um presente para alguns de seus familiares, amigos, ou qualquer outra coisa. Abaixo disso, vamos ter perguntas comuns. Vamos fazer o mesmo que fizemos na página anterior. Vamos ter Info strip, logo logo, Localização, telefone, e-mail. E finalmente rodapé na parte inferior. Você vai notar, se eu fizer zoom um pouco assim, você vai notar que especialmente esta seção na parte inferior está realmente esmagada. Mas isso é realmente de propósito, porque a coisa principal e diferenciadora sobre esta página é a seção daqui. Então, logo abaixo da imagem do herói, até aqui, logo acima das perguntas comuns. E porque já temos isso, basicamente esta é a mesma coisa dívida que projetamos em páginas anteriores. Então, como vai mostrar-lhe neste exemplo? Então esta é a nossa página inicial. Nós vamos usar basicamente este mesmo layout exato com um texto de imagem e um botão. Só reduziu um pouco a imagem. Por exemplo, talvez incluir um pouco menos de texto. Talvez este parágrafo seja muito maior do que este e assim por diante. Portanto, não perca muito tempo em seus wireframes que estamos desenhando os mesmos elementos uma e outra vez e tentamos torná-los perfeitos. Você já sabe que isso é uma imagem. A imagem pode ser mais alta e mais larga ou mais estreita, seja o que for. Pode ter, uma sombra de gota e assim por diante, assim por diante. Então não perca muito tempo com ele, simplesmente desenhe e siga em frente. Esta parte, como eu disse várias vezes, é apenas uma descarga para baixo todas as suas idéias que você tem em sua cabeça. E você quer colocá-los em um pedaço de papel só para que você possa mostrá-lo ao cliente ou a outros designers. Esta é a nossa praia de cartas. E basicamente estamos nos limitando ao fim do nosso processo de wireframe. Então nós temos investir login digital e eu vou mostrar a vocês um painel de praia mais tarde. Vemo-nos no próximo vídeo onde vamos investir na praia. 22. Wireframes 5: Vamos agora para a praia do Invest. E mais uma vez o mesmo de antes, tudo é igual aqui. Então vamos seguir em frente e essa é a escrita em que eu quero investir. E nós vamos ter o mesmo layout de antes. Então vamos dar-lhes quatro opções diferentes, Soul e ver que esta primeira é educação. Eu, este, este segundo é imobiliário. Então, o terceiro é a família. E, finalmente, isso é para a dívida de aposentadoria. E nós vamos incluir ícones diferentes aqui. Eu vou ter certeza de que este é selecionado mesmo como em todos os outros exemplos. E abaixo disso, podemos incluir outro título. Então, invista em um futuro mais brilhante ou no futuro. Copiar. Vamos lidar com isso para que as mulheres mais tarde queiram o Adobe XD. Então vamos ter um layout um pouco diferente desta vez. Então você vai ter duas imagens. Então vocês vão notar basicamente, como eu continuo falando, isso é exatamente o mesmo, apenas posicionado um pouco diferente. Então vamos ter um título aqui. Texto e um botão. Call-to-action, talvez saiba mais. Então título e desabotoar. Talvez CTA. Abaixo disso, vamos ter outra imagem para que ela possa ir a partir daqui. E vamos ver, vai escrever em segurança o seu futuro. Mas vamos ter um parágrafo de texto e botão de chamada à ação, por exemplo, aprender mais. E o que esta seção faz com uma imagem. E você pode ver esta mesma seção em outros Bart apenas por exemplo, em alguns lugares imagens cortadas aqui para caber na grade. E, em alguns casos, é estendido para o site da nossa página. E basicamente o que isso é, é que toda essa seção é sobre todas essas seguridade social ou futuro. Você pode fazê-lo investindo em educação, investindo em imóveis, investindo, em família, investindo na aposentadoria. Basicamente, tudo isso é para o seu futuro. Então esta seção está dizendo a vocês como é importante investir em qualquer um desses. E você pode, obviamente, escolher qualquer um desses que você quer investir no futuro porque é educação. E isso vai dar a vocês dois pacotes de investimento diferentes para o pacote educacional. Então é por isso que eu estava dizendo antes sobre o rodapé, por exemplo, nós vamos mover todas essas desordem do topo, que eles têm um atualmente no site atual para baixo para o rodapé. E nós estamos realmente indo para distribuir todos esses itens desnecessários da navegação principal para aqui. Então, em vez de ter, digamos investir e, em seguida, desistir da educação e, em seguida, cair para baixo, digamos dois desses. Então talvez isso possa ser um fundo de educação, este pode ser outro fundo, Legacy Scholarship for node, o que for. Eles têm seis opções diferentes. Então você pode imaginar o calendário bem aqui dentro da navegação. Então, é muito mais fácil para os olhos. É muito mais rápido para as pessoas entenderem se você colocar tudo da navegação que não é necessário. Portanto, investir é necessário porque esse é um de seus principais serviços e ofertas principais. Mas todas essas outras funções e outras estatísticas não são necessárias para estar dentro da navegação. Então é por isso que é importante declutter seu navegador e você pode colocar todas essas informações no rodapé. Se houver muita informação no rodapé, ninguém se importa porque o fórum está sempre na parte inferior da página, mas você sempre pode precisar dela um pouco para baixo e incluir alguns dropdowns para o rodapé também. Mas esse é o ponto principal deste processo de wireframing, apenas para colocar suas idéias em um pedaço de papel e ver tudo o que você tem na frente de você pertence aqui. Eles vão incluir a seção “Parecem”. Pergunta tão comum. Com três caixas parecem como antes, vamos incluir faixa de informações aqui. Então logo, esses três ícones, tão o mesmo que antes. Então, assim. E finalmente rodapé bem aqui na parte inferior. E é basicamente isso para este discurso. Como você pode ver, eu não tenho nenhuma nota, mas talvez mais tarde, se eu me lembrar de algo, talvez eu possa incluir alguns nós. Então vamos ver, talvez incluir uma caixa ao redor do ícone. Só para indicar, talvez, que talvez possamos incluir uma caixa como esta. Se o dinheiro AIG selecionado, talvez a caixa possa ter um esboço. Ele pode ter uma sombra, ele pode ter outra coisa apenas para indicar que esta caixa está selecionada e todas essas outras caixas não estão. Então você sempre pode brincar como ele continua vendo com esta seção do seu artigo. E apenas para incluir algumas informações adicionais aqui na página. Se não, você pode deixá-lo em branco, e é basicamente isso. No próximo vídeo, vamos terminar isso adicionando nosso pêssego digital. E vemo-nos lá. 23. Fire frames 6: Então vamos agora terminar nosso site com a era digital. E como eu disse, no início deste Bij digital vai ter todos os seus serviços digitais que as pessoas podem usar de casa em seus telefones celulares, laptops, computadores e assim por diante. Então Daryl tem título. Então serviços para o futuro moderno. E nós vamos usar o mesmo layout que fizemos em todas essas páginas. Então deixe-me encontrar contas para cada um, por exemplo. Então eu vou usar isso para minha vantagem e basicamente usar pilhas de chamadas futuras no Adobe XD, que eu vou mostrar mais tarde quando começarmos a projetar. Porque eu faço isso de vez em quando. Quando começo a planejar, já começo a ver recursos que posso usar dentro do Adobe XD para acelerar um pouco as coisas. E, em minha vantagem, basicamente, há um recurso chamado pilhas no Adobe XD. Vou te mostrar isso mais tarde. Mas basicamente o que ele faz é que você pode alternar entre eles. Então, por um lado, você pode ter uma imagem à esquerda, por outro você pode ter imagem à direita. Então, basicamente, somos apenas um clique de um botão e um interruptor. Você pode virar isso para acelerar um pouco as coisas. Também podemos fazer isso como um componente e adaptar esse componente ao longo do nosso design. Então, por um lado, pode ser largura total. Por um lado, pode ser assim. Assim, as portas podem ser os nossos estados componentes. Então eu sempre faço isso como um desejo. Planeie sempre o nosso fedor à frente. O que eu posso fazer com meus designs mais tarde quando eu colocá-los em dívidas do Adobe XD, exatamente o que eu faço. E eu realmente recomendei que vocês também o fizessem. Se estás a começar com isto, não te preocupes, podes começar assim e planear à medida que avançares. Eu só estou tentando agilizar meu processo o máximo possível e aumentar minha velocidade o máximo possível porque assim que eu terminar isso, eu posso levar mais dinheiro para casa. E então desperdiçando meu dinheiro, meu tempo e meus clientes orçamento em algumas coisas desnecessárias. Vamos voltar a isto. Então, para este primeiro, eu vou fazer imagem bem aqui. Então vamos chamar isso de “E banking”. Vamos dar-lhe um parágrafo. Vamos dar o botão. E talvez possa dizer que aprenda mais ou onde quer que seja. Eu só vou colocar CTE. Agora, no próximo, podemos colocar uma imagem aqui. Isso pode ser m bancário, então mobile banking. Mesma coisa, parágrafo, CTA. Deixa mais um. Isso pode ser pagamentos de código QR ou cura pode ser qualquer coisa. E, obviamente, vamos lidar com detalhes quando realmente passamos para o Adobe XD. E este é o nosso último assistente virtual da alma. O meu pai. Vamos ter um parágrafo chamado à ação. E finalmente, abaixo, vamos ter o mesmo de sempre. Perguntas tão comuns. Aquelas três caixas para despojado. Então esses três ícones e nosso rodapé na parte inferior. Então você pode ver por não falar muito, quão rápido e fácil isso é. Então basicamente eu posso deixar uma nota, usar pilhas no Adobe X. E então o que isso basicamente significa, mais uma vez, é que eu posso criar um desses. Posso fazer uma pilha. Eu posso então duplicá-lo usando Gary função grade lance ou qualquer função. Caso contrário, ele tem que oferecer e, em seguida, simplesmente trocá-los. Então, a esquerda direita, esquerda sobre a direita, simplesmente com um clique de um botão vai ser muito divertido e realmente super simples. Você vai vê-lo assim que chegarmos à parte de design. Então é basicamente isso para este. No próximo vídeo, vou mostrar-lhe um login e assinar formulários como podemos projetar a dose. Um vídeo. Depois disso, vou mostrar como você pode criar essas páginas de painéis mais uma vez em um pedaço de papel. E porque é importante, porque vai ser diferente. E vamos mover nossa navegação para o lado esquerdo. Você vai ver isso naquele vídeo. E depois desses vídeos, vamos digitalizá-los e movê-los para o Adobe XD, onde realmente vamos transformá-los em wireframes. Então, vemo-nos na próxima. 24. Wireframes 7: Tudo bem, vamos agora passar para as telas de login e inscrição. Então o que eu vou fazer aqui, como você pode ver, eu viro para o meu jornal. Então eu vou fazer isso de uma maneira maior. Deste lado, vamos ter uma imagem. Você também pode fazer isso. E deste lado vamos ter informações. Obviamente, vamos chamá-lo de Login e Cadastre-se. O cadastro obviamente vai ter um pouco mais de informação do que o login, porque o login só requer seu e-mail e senha. Por exemplo, talvez algum coordenado Você precisa entrar com realmente varia de cliente para cliente. O que eles querem incluir lá dentro. Quando você está se inscrevendo para uma conta na empresa, você precisa trazer informações adicionais. Então, para o login e o cadastro, podemos usar exatamente o mesmo layout, apenas um pouco diferente entre eles, como eu disse, porque o cadastro tem um pouco mais de informação. Então, por exemplo, para login, Talvez possamos escrever em Bem-vindo de volta. E faça login na sua conta. E deixe-me aproximar um pouco mais para que vocês possam ver isso um pouco melhor. Agora podemos ter um formulário, então e-mail e um fórum podem ir aqui mesmo. Obviamente, pode ser de largura total. Seu e-mail e senha. Avanço rápido pode ir bem aqui. Como isso. E talvez possamos escrever, não ter uma conta. Contes. Crie um aqui. E isso pode ser um link. Então link de casal colegiado. E leva-os para a página de inscrição. Então este é o nosso login Wendy clique. Não vai levá-los para se inscrever. E na inscrição Talvez disco por escrito ou já tem uma conta de login aqui e, em seguida, leva-os para a tela de login. Então é basicamente isso. E essas são todas as mudanças e a morte precisa acontecer entre esses dois porque outras informações são basicamente as mesmas. O que podemos fazer aqui é adicionar uma grande chamada à ação, que pode direito no login obviamente assim. E talvez possamos escrever uma senha esquecida. Porque as pessoas costumam fazer. E eles podem clicar em desafio. Ele poderia levá-los externamente para página adicional onde eles podem preencher informações, perguntas de segurança e assim por diante, para que eles possam recuperar sua senha e sua conta. Talvez possamos até incluir algumas formas aqui. Então talvez eu possa incluir a forma como esta. Talvez ele pode incluir uma forma de círculo pode concluir algumas mentiras diferentes e assim por diante. Mas vamos ver isso quando avançarmos para o design. Uma última coisa sobre isso antes de passarmos para o painel e vídeo final do nosso wireframe em série de papel é, eu vou manter a minha grade. E digamos que isso tem seis colunas de largura. Talvez se estivermos na tela de inscrição, isso pode ter três colunas de largura para e-mail. Então quatro, desculpe pelo primeiro nome e sobrenome. Isto tem seis colunas de largura apenas para preencher o espaço. E você pode, obviamente, adaptar esses campos de formulário à medida que você avança. E dependendo do que você precisa que os usuários entrem dentro deles. Então é basicamente isso para este vídeo. Verei você na próxima vez que começarmos com o painel, vou mostrar alguns fatores diferenciadores importantes entre todas as páginas que desenhamos até agora e a página do painel e por que é diferente. Então, vemo-nos lá. 25. Fire frames 8: Então, finalmente, vamos agora terminar com nosso próprio painel. E desculpe, eu tenho que usar uma configuração diferente porque eu tive que mover minha câmera por causa dos problemas de barreira. Então, finalmente, eu vou escrever no painel bem aqui no topo. Então, parecia que quando todos os exemplos anteriores eu vou desenhar em esboço como este. Tudo mais uma vez, parece que nos exemplos anteriores. Mas neste caso, porque é um painel e precisamos mostrar informações adicionais na página. Na verdade, vamos ter um tipo diferente de navegação. Nós vamos ter em vez da navegação superior, que vai conter todos os nossos recursos médios, uma navegação importante. Vamos movê-lo para a esquerda e todo o ponto do painel, se você pesquisá-lo no drible ou nos fins de semana, você tem todos esses exemplos diferentes é mostrar o máximo de dados possível, o máximo de informações sobre sua conta, tanta informação sobre e você é um gasto diferente, por exemplo, seus cartões, transações mais recentes, despesas, e assim por diante. Então, em vez de desordenar o site principal com ele, é por isso que temos um botão de login, que vai nos levar para o painel onde nós realmente vamos apresentar todas essas informações de uma maneira agradável e fácil de entender . Agora, em termos de navegação, nós realmente vamos ter que fazê-lo. Então nós vamos realmente ter a faixa de cima bem aqui com o logotipo. Vamos ter Avatar com o nome aqui no topo. E aqui mesmo do lado esquerdo, vamos ter a nossa navegação. Vai ser cerca de dez ou 15% da largura total da página. E em vez de ter nossa navegação no topo, vamos movê-la para a esquerda, que é basicamente a maioria das vezes que você vai acessar esses painéis. Você vai ver a navegação aqui. Mas o que isso faz com nosso layout, nós realmente vamos mover nossa grade daqui. Então, a partir daqui, esta seção, vamos ver do logotipo até aqui. Em vez de linhas correndo aqui, nós realmente vamos movê-lo para esta seção bem aqui. Então este 80 ou 85% vai ser incluído em nosso sistema de grade como este. Enquanto isso vai ficar vazio, vamos conseguir isso aumentando essa margem esquerda do nosso sistema de rede. Vou mostrar isso no Adobe XD. E, na verdade, vamos usar isso apenas para navegação para tamanhos de desktop e para tamanhos de tablet e celular. Vamos fazer o mesmo que sempre fazemos nesses tamanhos. E você vê que na linha é basicamente nós vamos mover esta navegação para o topo ou usar algumas importantes negociações como uma nota adesiva para baixo na parte inferior. Então aqui vamos ter um painel. E todos estes vão conter ícones. Vamos ter uma contagem. Vamos ter transacções. Vamos ter empréstimos. E eu vou mostrar tudo isso em um segundo. Vamos ter cartões, investimentos em digital. E, finalmente, um log out na parte inferior. Como eu disse, você pode usar um logout e posicioná-lo aqui. Então, por exemplo, se os usuários clicarem nesta imagem, talvez ela possa ser uma lista suspensa, talvez logout possa estar lá. Talvez ele possa levá-los de volta para a página inicial, talvez poderia levá-los para algumas ofertas que o banco tem no momento. Então, cabe a você e seu cliente concordar com a morte em termos de navegação aqui, você pode ver, então nós temos um painel, nós temos um cartão de crédito de transação de conta. Então basicamente todas essas mesmas coisas em vez do painel. Então Dashboard vai ser a nossa tela inicial para esta seção de painel. Como temos casa para a tela inicial para a seção do site. E temos um logout aqui. Eu propositalmente espaçado para fora como este para fins de UX porque você não quer que os usuários cliquem acidentalmente aqui e logout leitura querendo fazê-lo. E como eu disse, vamos usar nesta seção aqui para a informação. Então, digamos que esse usuário é chamado Michael. Então podemos escrever, bem-vindo de volta Michael. O Michael. E aqui estão suas estatísticas para essa data em particular. Então vamos ver de fato. Então ele pode saber ou ela pode saber que estas são as estatísticas para essa data em particular. Então podemos ter esses estados assim. Então, digamos conta malvada. E digamos que eles têm 30 chaves na contagem, assim. Em seguida, vamos ter cartas, digamos. Para que possam escolher cartas diferentes como esta. Se houver vários cartões, podemos incluir paginação. Assim, eles podem ver qual cartão é selecionado a partir daqui. Na verdade, vamos incluir outra seção aqui para o problema com a paginação como esta. Ou pode ser uma seção de ajuda. Então, em vez da promoção, se o banco não tem a promoção no momento, talvez eles possam ajudá-los e guiá-los. Então, por exemplo. Qual é a seção longa? Qual é a seção de carrinhos e assim por diante. Eles podem acessá-lo rapidamente simplesmente clicando ou tocando em seu. Agora e abaixo que vamos ter transações, por exemplo, porque é por isso que você veio aqui basicamente. Então transações latus. E essas transações podem ser algo como, sei lá, hoje. Categoria de café é comida com ICN e gastar tão menos, vamos ver, US $15. Então, basicamente, você pode imaginar como isso vai parecer. E podemos, obviamente, incluir nesta seção para repetir e para baixo. E eu vou acabar aqui. E escrever um monte mais. Tudo bem, aqui no fundo. Então eles podem clicar em uma guia lá para carregar mais dessas transações. E, por exemplo, podemos incluir um controle deslizante aqui no lado direito, e eles podem deslizar para cima e para baixo ou cavar simplesmente usar a roda de rolagem em seu mouse para rolar para cima e para baixo para ver todas as suas transações. Mas como já temos transações aqui, eles podem simplesmente clicar em Lord Moore Qualquer pode levá-los para o discurso da transação, onde eles podem realmente ver mais detalhes. Finalmente, talvez possamos adicionar despesas. Então vamos ver todas as despesas. Então talvez diariamente, semanalmente e mensalmente. Assim, talvez possamos incluí-los. Então diariamente, semanalmente, mensalmente. E talvez possamos ter quantias reais. Então está vendendo isso. Então, obviamente, Daly vai ser mais baixo, semanários dispostos a ser mais alto e mensal vai ser o mais. Finalmente, talvez possamos incluir algum gráfico aqui. Então eu vou simplesmente digitar no gráfico. E talvez eu possa incluir algo como roupas, comida, serviços públicos, e pagamentos de carros, talvez. Assim como este. Assim, neste gráfico pode mostrá-los separadamente se eles clicarem neles, ou ele pode mostrar todos eles aqui. Mas você pode imaginar que vai ser um pouco demais se você tem um monte desses itens aqui. Então, o usuário iter pode tocar em todos estes separadamente e ele vai mostrá-los aqui. Ou eles podem realmente incluí-los todos neste gráfico. E isso pode realmente mostrar-lhes isso lá. Então é basicamente isso para esta seção de wireframing. Espero que tenha gostado. E desculpe por este último vídeo por ser perneta esta minha câmera e decidiu amarrar em mim. Então eu tive que usar bateria externa, externa e ângulo de visão assim. Então, se eu puder simplesmente mostrar-lhe assim, para que você possa ver como isso se parece. Na próxima série de vídeos, eu realmente vou digitalizar todos esses wireframes, trazê-los para dentro do D. da Adobe e eu vou realmente mostrar a vocês como você pode começar a criar seus wireframes dentro do Adobe XD, e como você pode realmente passar de wireframes para design. Então, mais uma vez, se você não tiver um scanner, você pode simplesmente tirar uma foto com seu telefone. De todos esses, traga-os para dentro do Adobe XD, como explicado em um dos vídeos anteriores. Se não, se você está sozinho trabalhando nisso, você pode simplesmente tê-los ao seu lado, como eu tenho com todos esses anteriores que nós projetamos nesta seção do curso. Assim, você pode mantê-los doces ao seu lado e simplesmente passar para o digital diretamente dentro do Adobe XD. Mas eu só quero mostrar a vocês essa abordagem também que vocês podem fazer isso também. Simplesmente snapper açougueiro ou escândio, importante no Adobe XD. E você pode tê-los ao seu lado para todas as referências futuras. Então, vemo-nos no Adobe XD. 26. Importando nossos quadros de fios de papel: Ok, então agora que terminamos o processo de wireframing em um pedaço de papel, e agora que você digitaliza seus papéis em que seu scanner ou tirou as fotos em que seu telefone. Agora podemos finalmente abrir o Adobe XD e começar a trazer todas essas informações. E então o que eu tenho aqui é a tela inicial do Adobe XD vai parecer um pouco diferente para você, dependendo do que você não abriu anteriormente. Você pode ver meus arquivos de design aqui que eu abri anteriormente. Vai parecer um pouco diferente para você. Vai ficar em branco se você abrir pela primeira vez e nunca abrir nada. Mas aqui vamos usar esta web padrão 1920, um painel de controle. Basta clicar nele. Vai abrir uma nova guia. Vai abrir uma nova janela. E este arquivo é o arquivo que nós realmente vamos usar para este curso. Então eu vou clicar aqui e eu vou salvá-lo primeiro, as coisas primeiro. Então, se eu clicar aqui, você salvou como um documento local. Vou clicar ali mesmo. Vou dar-lhe um nome e simplesmente apertar salvar. Agora que fizemos isso, podemos ir em frente e começar a renomear esses quadros de arte. Podemos começar a criar outros quadros de arte. Você pode ver aqui no topo que temos o novo design do site do banco. E esse é o nome que eu decidi dar a este projeto. Mas você também pode ir em frente e dar ao seu projeto qualquer outro nome que você possa querer. Agora, a próxima coisa que quero fazer é trazer meus wireframes. E você pode ver wireframes aqui. Eu fui em frente e digitalizá-los e renomeá-los para facilitar a compreensão e para facilitar a importação e, posteriormente, exportar, se necessário. Então, o primeiro wireframe que desenhei, eu renomeei o número um, e então, a partir daí, eu mudei para um número e 09. E você pode vê-los bem aqui. Agora, para importá-los, você pode simplesmente selecioná-los todos. Volte para o Adobe XD, mantenha pressionada a tecla Alterar Opção e role a roda do mouse. E então você pode desfazer todo o zoom apenas para que você possa dar algum espaço a si mesmo. Então eu posso trazer isso de volta e simplesmente trazê-los para dentro para que você possa selecioná-los todos, arrastá-los e soltá-los dentro de seu documento Adobe XD. Então todos eles vão estar aqui e todos eles vão estar na ordem errada. Então você pode ver aqui que a tela de login e inscrição está todo o caminho aqui. Nós não queremos isso. Então o que queremos, e é por isso que você renomeou tudo isso, é que queremos organizá-los um pouco. Então este foi o nosso primeiro Homepage foi o nosso segundo, contas e eu estou simplesmente segurando Shift e você pode ver o espaço entre eles. E você pode ver claramente que isso é baseado, estas são imagens, mas essa é a base está lá e é a mesma e a mesma para as nossas placas. Você vai ver isso um pouco mais tarde. Então, como eu disse, contas são um Próximo, vamos ver, empréstimos e você sempre pode voltar para aqui e c, Então nós tivemos uma página inicial, contas, empréstimos. Então os cartões investem empréstimos digitais e de painel de instrumentos. Vejamos, cartões investem digital. E, finalmente, temos painel, mas antes disso temos um login e inscrever-se assim. Então, agora que nós pedimos tudo isso, o que nós também podemos fazer é selecioná-los e movê-los aqui todo o caminho para o topo. Todo esse espaço que você vê aqui, esse espaço cinza é o espaço vazio que você pode usar para o seu documento. Então dentro de lá você pode manter um texto, você pode manter imagens como nós fazemos aqui. Você pode manter nossas tábuas aqui é a porta R, R bem aqui. Você pode simplesmente clicar no nome do aeroporto em movimento. E eu sempre gosto de fazer isso apenas para liberar algum espaço e apenas para deixar algum espaço para o meu projeto real. Você também pode ver esta estrela bem aqui no topo, que significa que você mexeu com seu documento. Se você o salvou como um documento local como eu fiz, então você pode apertar o controle S. Como se isso fosse salvar e aquela estrela vai desaparecer. Como você pode ver bem aqui. Se você estiver salvando como um documento na nuvem, então como um documento na nuvem vai fazer esse recurso de salvamento automático, mas você pode desativá-lo nas configurações para que você possa salvá-lo sozinho. Então é isso para este primeiro vídeo. Basicamente, eu só queria trazer isso. Agora que temos um arquivo, podemos realmente começar a trabalhar neste projeto. Então, se aproximarmos um pouco mais, só para te acolher. E esta era a nossa tela basicamente de exploração. E aqui fizemos todas as páginas que queríamos. Decidimos sobre como é que a navegação vai parecer com a ordem da nossa doca de navegação agora, superior e este nav in a box. Depois passamos para a página inicial. E agora você pode ver como a página inicial se parece, conta e assim por diante. Então agora temos essa idéia geral de como nosso projeto pode acabar parecendo. E como ele disse no vídeo, eu sempre gosto de fazer isso porque agora eu tenho todos os meus wireframes aqui dentro do Adobe XD. Como eu disse, você não tem que fazer isso. Se você não quiser, você pode simplesmente manter a pilha de papéis com você como eu faço aqui. Então você pode simplesmente folhear todos esses papéis e você pode decidir quais elementos você deseja incluir dentro do seu projeto. Então é basicamente isso para este vídeo. No próximo vídeo, vamos começar com a arquitetura do site. Vamos conectar algumas dessas páginas. Vamos apenas brincar com ele e ver o que precisa ser feito com a navegação, como tudo vai se conectar entre si. Vamos reposicionar alguns desses elementos dentro do nosso documento. E depois disso, vamos finalmente seguir em frente e começar a projetar wireframes dentro do Adobe XD, usando essas referências que fizemos em um pedaço de papel como apenas ideias Blaine. Vamos usar alguns elementos destes e, em seguida, passar para wireframes digitais reais no Adobe XD. Então, vemo-nos lá. 27. Criando arquitetura de sites: Neste vídeo, vamos começar com a arquitetura do site. E arquitetura do site basicamente é quando você se resumiu aos bits gananciosos, é a conexão entre todas as páginas que você tem em seu site. Você também pode usar a arquitetura do site como arquitetura de aplicativo móvel. E algumas pessoas gostam de chamar esses fluxogramas. Nós realmente estamos vendendo os produtos em nosso site, web donut.net. E eu vou deixar o link para esses produtos juntamente com alguns descontos para vocês como estudantes se você quiser comprar esses produtos. Então o primeiro está fluindo. E fluindo vem com 108 telas, 128 elementos para sites e impressão de papéis para um quatro, bem como o tamanho da letra dos EUA. Você pode ver como alguns destes se parecem em basicamente estes são apenas cartões de diferentes elementos que você pode usar para conectar suas telas entre si. E então você pode usar isso traz modelos prontos se você quiser imprimi-los e mostrá-los para sua equipe ou seus clientes. Como você pode ver, se eu começar minha rolagem rápida no meu mouse, você pode ver quantos desses elementos existem. Então este é o fluído. Ele também vem com todos esses elementos adicionais, como maquetes, como números, como ícones mais cruciais e importantes, esses conectores de seta, e como eu disse, esses arquivos. E você pode ver uma vez que você imprimi-los, você pode ver como eles se parecem. Então isso está fluindo. Nós também temos fluxo de fio, fluxogramas que são muito maiores do que fluidos. Você pode ver que temos 200 telas, 200 elementos, bem como dois papéis. Também temos com este, nossas versões claras e escuras. Este é muito mais detalhado se você gosta desse tipo de coisa. E eles estão chegando no Photoshop Sketch nas versões XD, ambas. Então você pode ver como eles se parecem. E se eu começar minha rolagem rápida, só para que você possa olhar para quantos elementos diferentes eles são bem ali. E se você quiser descobrir isso em nosso site, então é web nano.net. Mais uma vez, acredito no link e no desconto para vocês se quiserem conferir. Então você vai para Web nano.net produtos e, em seguida, deixá-lo carregar por um pouco porque nós temos um monte de produtos diferentes e apenas sob UX gets, você vai encontrar todos esses produtos diferentes. Então, junto com fluxogramas, como podem ver, temos wireframes. Assim, você pode construir completamente seus wireframes usando esses produtos. Nós também temos UIkit está bem aqui, então pronto nos fez crianças. Você pode simplesmente trocá-los com suas imagens e assim por diante. Estou te mostrando isso e só para que você possa ver quão detalhado você pode ficar, mas nós não vamos ficar detalhados com isso. Eu posso simplesmente ir em frente e usar meus produtos e trapacear como dívida. Mas quero mostrar a vocês que não precisam usar isso. Se você quiser, você pode comprá-los outro live to desconto para vocês também. Mas você não precisa usá-los Aqui estamos no Adobe XD e tudo que você precisa fazer é simplesmente retangular e algum texto. Então eu vou em frente e zoom, chamei ele de meu velho e minha roda de rolagem no meu mouse. Rato. Vou simplesmente criar um retângulo como este. Não importa o quão grande ou pequeno é. Você pode fazer isso. Como você quiser. Então este retângulo, eu também posso fazer um raio de canto de 25 para, apenas para dar a algum tempero. Você também pode incluir uma sombra apenas para que ela possa se destacar um pouco desse plano de fundo. Então vamos dar-lhe uma sombra de tuh, tuh e talvez 15, só para torná-lo um pouco maior. Está bem? E agora podemos começar a digitar. Então eu posso digitar em home page, por exemplo, se ele é do centro e eu vou usar para coberturas para isso. E eu vou usar Poppins como minha fonte para todo esse projeto. E Poppins é uma fonte gratuita do Google de Aleve e um link para cada material que eu uso na última lição deste curso ou em documentos do curso. E dependendo de onde você está assistindo este curso. Então você pode simplesmente acessá-lo ou você pode simplesmente digitar Poppins no Google ou o que você está usando como um motor de busca e irmão crescer para a página Google Fonts e começar a usar esta fonte Poppins. Então o que vamos fazer é simplesmente segurar a tecla Shift e selecionar esses dois. Clique aqui, aqui em baixo, aperte Control G para agrupá-lo e chamar este site de arquitetura. Corrente. Como este. Estou fazendo isso porque quero criar um componente a partir dele. Basta pressionar a tecla control ou comando para criar um componente. E você pode ver este diamante bem aqui, que é preenchido, o que indica que este é o nosso principal ou componente principal. Se uma marca de marca alterar a tecla Option. Para duplicar este, você pode ver que agora este diamante é tipo de segurar ou vazio dentro enquanto este é preenchido. E isso ocorre porque este é o componente filho deste componente mestre. Então, se eu tivesse isso basicamente funciona. Se eu, por exemplo, decidir saltar dentro deste e aumentar este raio de canto 250, por exemplo, você pode ver que a mudança aplicada ao componente filho também. Mas se eu pular dentro daqui, mudar distal 50, você pode ver que só se aplica a este porque este é o componente filho, este é o componente mestre. Espero que entenda as diferenças entre elas. E vamos acabar usando todos esses componentes em toda a arte e desenhos. Então, como eu disse, você pode usar complexos e designs como esses que eu mostrei, mas você não precisa. Você pode simplesmente usar em Des Moines, que são realmente bastante simples. Então o que vamos fazer com esses é que vamos apenas listar os nomes dessas páginas. Então, temos contas aqui como esta. E depois vamos duplicar este mais uma vez. Então, simplesmente segurando sua Alt ou Option, o que temos a seguir? Esses empréstimos e registros do Dan. Então deixe-me duplicar este. Então, cartões de gramados, por que precisamos investir digital? Tão inversado e digital. E vamos duplicá-lo mais tarde por isso. Então nós temos, mais uma vez, contas pertencem, um SIPOC segurando meu controle para pular dentro e, em seguida, clicar duas vezes em um texto para editá-lo. Desde que tenhamos corrente. Temos investimento, temos digital. E, finalmente, podemos ir em frente e duplicar este porque vamos acabar usando um login. E eu simplesmente vou movê-lo para cá. Então, faça login. Vou posicionar este aqui em baixo. 65 Acho que foram cédulas. Viva assim. Cadastre-se porque nós vamos ter essas duas páginas. E, finalmente, a partir deste, vou posicioná-lo bem no meio destes. Agora que temos estes, precisamos conectar algumas páginas ao painel. Mas porque sabemos quais dessas páginas são porque eu as cobri na seção wireframe de papel. Então eu vou reposicioná-los apenas um pouco diferente daqui porque se você se lembrar de nossa navegação, nós temos este botão de login em cada página, então de cada página aqui e eles podem acessar este login e, em seguida, a partir de uma página de login, podemos ir para a página inicial do painel. E eu vou me posicionar aqui porque uma vez que você está dentro da casa do painel, você tem transações de conta, cartões gramados investimento digital e logout. Se você está pulando de lado bem aqui onde nós realmente desenhamos o painel e é por isso que temos ON acessível esses wireframes dentro do Adobe XD. Assim, você pode ver esse painel, contas domésticas, transações, carros emprestados, investimentos digitais e logout. Então, para economizar um pouco de tempo, vou duplicar esses. Então aperte o controle D para duplicá-lo ou você pode simplesmente ir em frente e segurar sua tecla Alterar Opção e simplesmente duplicá-lo como papai, eu vou movê-lo. O que faremos a seguir? Como se agora a última coisa que precisamos fazer é eu vou simplesmente selecionar tudo isso e posicionar para estar no centro. Então vamos ver, assim, algo assim agora finalmente você pode agrupá-los. Então ele tinha o controle G e você pode agrupar tudo isso você pode apertar o controle G para agrupar todos esses. Você pode pressionar o controle G para agrupar tudo isso. E agora vai ser muito mais simples. Basta selecioná-los aqui e vai torná-los agradáveis e organizados. Você pode posicioná-los aqui Agora, uma última coisa que eu quero fazer com essas é criar setas como você viu que estão aqui neste exemplo. Então, se percorrermos todo o caminho para baixo, você pode ver que aqui temos essas setas de conexão. E você pode realmente facilmente ir em frente e criá-los no Adobe XD sem a necessidade de usar qualquer outro modelo externo. Então o que precisamos é simplesmente neste retângulo. E estou percebendo que esta sombra é um pouco mais escura aqui. Então eu vou remover este aqui. Ele tinha porque tínhamos uma cópia extra, o tweetado, puro. Então o que eu vou fazer é criar um retângulo, talvez como este aqui. E eu vou remover a fronteira. A próxima coisa que vou fazer é criar um polígono segurando a tecla shift. Girá-lo enquanto segura a tecla shift. Então ele pode encaixar na posição assim. Você pode posicioná-lo aqui e remover sua borda. E você também pode dar-lhe um tempero de cor se quiser, o solo pode doer e para a cor de preenchimento, basta clicar nisso e usar esses. Então lá temos a nossa flecha. Vou selecioná-lo, apertar Control G e chamá-lo de Arrow ou arquitetura do site. Seta, apenas para que possamos saber quando reaquecer controle e chave de comando criado como um componente e ir para os nossos componentes. Agora podemos ver quando você paira, ok, então esta é a nossa seta de arquitetura do site. Estes são os nossos cartões de arquitetura do site. E nós estamos mantendo isso agradável e simples, fácil de entender, especialmente se você enviar isso para seus clientes. Então o que eu quero desses é que eu quero conectar esses cartões entre si. Então eu vou posicioná-lo em um grupo. Então, neste grupo, por exemplo, assim. Ou outono rapidamente ver qual grupo é qual. Então vamos chamar isso de um site mau. Va. Porque esse é o nosso site principal. Esta vai ser a nossa seção de login ou registro Ba, No entanto você quer chamá-lo. E esta é a nossa roda do painel, assim. Então eu vou reorganizá-los um pouco, ver quanto espaço nós temos. Vamos dar 100, por exemplo. Então mude 12345678910. E vamos fazer o mesmo por este. Então 12345678910, estou usando shift e bottom seta para empurrá-lo para baixo. E o que eu quero fazer finalmente, nós fazemos uma vez que eu quero incluí-lo dentro desta pasta para que eu possa reposicioná-lo. Posso trazer isto assim. Chego em casa ou troco o equipamento para trazer isto. E é por isso que o criamos como um componente. E você pode simplesmente empurrá-lo para a esquerda ou para a direita. Apresse-se quer. Como você pode ver, estamos faltando algum espaço. E é por isso que esses componentes são fantásticos. E o que queremos agora é simplesmente apertar o controle D. para duplicá-lo e posicioná-lo aqui para que você possa alinhá-lo, por exemplo, a esta borda e borda esquerda, que é do seu cartão como este. Vou resolver este, apertar o controle D e fazê-lo assim. Agora, o que eu quero é apertar o controle D, movê-lo para fora da pasta. Como isso. Vou clicar nele posicionado aqui. Então, o que eu quero é girá-lo. Então eu estou segurando Shift e vou posicioná-lo bem aqui. E eu vou fazer o turno 123, por exemplo, de dois, o que você quiser. Apenas para indicar que a partir de qualquer uma dessas páginas, você pode ir para essas páginas. E o que eu preciso agora é duplicar outra hora, posição, esta aqui, e ir para o meu login. E o que estou fazendo aqui é uma versão extremamente simples e simplificada do que eu mostrei a vocês. Porque se eu descer mais uma vez, você pode ver claramente esses conectores que estão se estendendo para a esquerda e direita para baixo, você pode ver como esses carros se parecem. Então, a partir de 1, digamos que uma página você pode ir para um número de páginas diferentes. Você pode interconectar todos esses pontos e setas e assim por diante, apenas para criar uma imagem realmente complexa de suas conexões entre páginas. Mas o que estou fazendo no nosso exemplo é mais uma vez, extremamente simples porque eu quero manter isso agradável e lento, desculpe, agradável e rápido para vocês entenderem. E o que eu quero deste é fazer uma duplicata e, em seguida, clique automaticamente girado assim. E posicione-o aqui. E eu posso fazer, então 1234, só para dar algum espaço. Segure molto, não se certifique de que eles estão no centro. E o que fizemos aqui é indicar que as pessoas podem ir de um login para se inscrever e voltar novamente na dívida do link, eles podem clicar. Então, se eu voltar aqui e mostrar que mais uma vez, eu estou usando espaço, tomou pan, esquerda e direita. Você pode ver que nós fizemos isso aqui. Então clique no link para se inscrever e ao se inscrever, link clicável para voltar ao login. É por isso que estamos usando armações de papel e essas setas, e eu já te disse isso. Então você pode indicar isso para sua equipe ou seu cliente e também para si mesmo. Acabei de dizer que você pode saber o que está acontecendo. Então, daqui em diante, eu posso usar este. O Controle D foi uma porcaria, digamos 20-30 onde quiser. E mais uma vez, posso usar alguns destes. Então, por exemplo, ele é usado apenas para economizar um pouco de tempo. Posicione-o lá fora, e eu vou usá-lo dentro do nosso painel. Vou clicar nele. É este? - É. Enquanto esconde isso rapidamente. E, em seguida, basta clicar neste apenas para posicioná-lo um pouco para baixo como este. E trazendo isso de volta porque tínhamos a dívida sobreposta. E foi por isso que nos mostrou isso. Está nessa primeira pasta ou enquanto estamos localizados em nossa segunda pasta. Então o que eu estou fazendo aqui é usando o comando de controle d, usando a tecla Shift para posicioná-lo para a esquerda e para a direita. Bem no centro, só para manter as coisas boas e limpas. E lá temos. Concluímos nossa arquitetura do site ou nossa navegação. E por que isso é importante mais uma vez, é que você pode mostrar isso para as pessoas, você pode mostrar isso para sua equipe, seus clientes, e as pessoas podem olhar para isso e entender para onde eles podem ir. Agora, uma última coisa que podemos fazer é a partir deste grito de logout. E porque quando as pessoas clicam lá, e se voltarmos ao nosso painel, você pode ver isso se colocarmos nosso logout bem aqui. Então imagine quando as pessoas clicarem lá, ele vai levá-las de volta para a tela inicial. Então, o que podemos fazer neste caso é fazer um pouco de diversão e jogos. Então eu vou usar esta seta, CTRL D, apenas para mostrar algumas possibilidades com esta. Eu vou posicioná-lo e apenas aqui, ter certeza que está no centro assim, e então movê-lo para fora da nossa tela. O que podemos fazer neste caso é simplesmente pulou dentro de posição nossa flecha todo o caminho onde os screeners home. Então, por aqui. E agora vou voltar a esta linha e estendê-la. Então, basta clicar aqui e estendê-lo. E você pode realmente brincar com ele assim. Agora você pode duplicá-lo, ou você pode simplesmente ver que esta é a altura de nove. Então você pode fazer isso. Você pode ir até aqui. Certifique-se de que você é a altura da linha como esta. E que é assim. Então, se virarmos, isso deve ser o mesmo. Então vamos ver. Como assim. E posicionamento simples, seu posicionamento, se atrevem a garantir que você não tem cor de preenchimento borda é este, e então simplesmente estendido. Então você precisa ampliar um pouco. Mais uma vez, use o espaço para girar em torno disso, assim. E só para dar um truque, o que você pode realmente fazer é pular dentro deste polígono e girá-lo usando este. Assim, posicionado para aqui. E então o que você pode fazer é clicar em Controle C. Saltar dentro deste site médio, controlar V para colá-lo na posição apenas para que você possa encontrar o meio desta página inicial. Ele controlava X para cortá-la. Volte para aqui, controle V, e apague este. Porque agora você está no centro daqui e agora você está de volta ao seu componente. Então o que podemos fazer agora é saltar para dentro daqui, criar outro como este, mas remover a borda. Use nesta mesma cor de preenchimento e girado assim. Posicione-o no lugar. Certifique-se de que você está no centro do seu de seu arrependimento, desta forma como esta. E Terry Herat. Agora nós conectamos este logout que vai até aqui. Então você pode ver claramente como com apenas um pouco de ups holandeses, você pode chegar a esta arquitetura do site olhando agradável e conectando entre todas essas páginas diferentes. Como eu disse, você pode usar modelos, agora você tem que usar o nosso. Se não quiser pagar. Você pode encontrar algumas versões gratuitas on-line com apenas algumas dessas formas e você pode passar um tempo assim. Ou se você quiser usá-lo para obter um de nossos produtos e obter esta enorme biblioteca de formas que você pode usar em seus projetos. Uma última coisa que eu quero fazer é selecionar todas essas formas porque eu quero manter as coisas agradáveis e limpas. Segure o Controle G, arquitetura do site mais frio, assim. E mais uma vez, vou usar nossos wireframes. Ele tinha controle G, papel de qualidade. Se eu escolher, posso movê-los assim. Posso fazer o mesmo com a arquitetura do nosso site. E porque a coisa lógica é ter wireframes de papel em cima de wireframes reais e um wireframes reais em cima do design. Então é isso que vamos fazer aqui mesmo. E nós vamos simplesmente clicar e mover estes para cima. Vamos dar algo como 600. Acho que vai funcionar bem assim. E eu também vou mudar deste para estar em 600 como este. E é basicamente isso. Se você apertar o controle 0, ele vai encaixá-lo em disposição, aperte o controle S para salvar isso. E é basicamente isso para este vídeo. No próximo vídeo, vamos começar com wireframes no Adobe XD. Agora que temos arejamento. E eu vou mostrar a vocês como você pode utilizar esses wireframes de papel para realmente começar a criar wireframes reais que você pode mostrar para seus clientes e você pode compartilhá-los usando uma prototipagem e funções de compartilhamento do Adobe XD para seu clientes para algum feedback real. Então, vemo-nos lá. 28. Frames no Adobe XD 1: Tudo bem, vamos agora começar com wireframes no Adobe XD. E a primeira coisa que vou fazer é falar um pouco sobre os recursos que vamos usar neste curso. Então este arquivo que você está olhando agora, este arquivo Adobe XD, você vai obter este arquivo. Este arquivo vai conter todas as coisas que vamos criar neste curso. Eu também vou lhe dar recursos que estou usando aqui, então ícones, imagens, e assim por diante. Mas o importante que você precisa entender é que você pode usar esses recursos apenas para projetos pessoais. Então você não pode usá-los para clientes, você não pode usá-los para venda. Você não pode usá-los para qualquer outra coisa que não seja projeto pessoal como aprendizagem. Então você pode usar isso para aprender, para entender tudo, como tudo funciona, para seguir junto com este curso. E é isso porque esses recursos são premium, você tem que pagar por esses recursos para usá-los comercialmente em seus projetos, para seus clientes e assim por diante. Vou deixar links para cada coisa que estou usando. Então, mais uma vez, esses recursos são premium. Você está usando-os apenas para projeto pessoal, para fins de aprendizagem e para nada mais. Basta lembrar, se você estiver usando esses recursos para projetos de clientes e para projetos comerciais, é em você. Então, se alguma dessas empresas decidir processá-lo para ir atrás de você no tribunal, então tudo depois de você não voltar para mim por causa desses recursos, é tudo com você. Agora que tiramos isso do caminho, vou começar simplesmente selecionando minhas cores para esse projeto em particular. Então, para fazer isso, eu vou vir aqui e nós vamos chamar esta primeira página inicial rpart. Então podemos vir aqui e clicar duas vezes aqui, Palm Beach. E a primeira coisa que vou fazer é criar uma grade. Então, eu vou vir aqui. E você pode ver essas colunas. Então aqui à esquerda e à direita estão estas margens. Então essas margens são da borda da página no lado esquerdo e direito. Estes pedaços azuis são colunas e estes pedaços brancos entre a nossa sarjeta. Então a calha é basicamente desprezada entre as colunas. E colunas são esses espaços onde o conteúdo vai para ir. O conteúdo é basicamente texto, imagens, ícones e assim por diante. E assim cada coisa que você está incluindo em seu design, que é o conteúdo e largura da calha é basicamente espaço em disco entre seu conteúdo. Então vamos usar 12 colunas, assim como é aqui mesmo. Para a largura da calha, vou usar 60. Vou usar 82 para a largura da coluna e 138 em ambos os lados. Como você pode ver. Agora temos um pouco menos de espaço aqui, e temos um pouco mais de espaço nesses governadores. E nossas colunas são um pouco mais estreitas, então tudo é muito mais limpo. Então você pode ver isso um pouco melhor. Mais uma coisa que vou fazer é diminuir a obesidade das nossas colunas. Então, para fazer isso, basta clicar aqui. E, em seguida, um menor este controle deslizante como você quiser. Você pode baixá-lo todo o caminho para baixo, ou você pode vir até aqui, por exemplo. Então você ainda pode vê-los, mas eles não são dat, distraindo. Você também pode mudar e cor Derek, nós simplesmente clicando aqui, mas eu não vou incomodá-lo com isso. Então, mais uma vez, vamos apenas criar essas caixas, por exemplo. E eu vou usar essas caixas para as cores. Então a primeira cor vai ser branca, então é esta. E então eu vou bater no controle D mais com algum lugar por aqui. E então eu vou usar em disco acadêmico. Então f dois, f quatro, F6, então uma cor cinza claro. E se eu remover essas colunas, você pode ver claramente prejudicado em parece. Para que eu possa duplicar mais uma vez. Posição. Está algures por aqui. Porque esta etapa, você realmente não precisa de colunas para isso. Estamos apenas escolhendo essas cores em dois vão usar. Então esta cor vai ser c2e, c2e, c2e. Um pouco mais escuro, cinza. Você pode ver a diferença entre eles. E eu vou posicioná-los uniformemente entre si. Vou duplicar isto mais uma vez. Para este, eu vou ir com realmente verde claro. Então 0-0, ED procura cinco. Vou duplicar este. Agora. Um pouco mais verde escuro, então 0-0, C6, e depois 89. Agora vamos avançar um pouco mais para o azul escuro. Então 00859 V. Agora estamos indo para ir ainda mais escuro, quase escuro, concordo. Então, para 495463, Então, como você pode ver, é realmente quase um cinza escuro. Agora isso vai ser realmente graça sombria de 46, 4646, assim. E finalmente, vamos criar uma cor de estrada. Então ff 4376, assim. Agora que temos todas essas cores, vamos selecioná-las e adicioná-las às nossas cores aqui como pesquisas de cores para que possamos usá-las em todo o nosso projeto. Então você pode simplesmente selecionar essas cores, clique aqui, e ele vai adicionar suas cores aqui. Você pode organizá-los de forma um pouco diferente, para que você possa adicioná-los como uma grade ou como uma lista, o que for mais fácil para você. Gosto de usá-los assim. E você também pode estender isso se quiser. Então você pode imaginar quando você começar a sentir esses componentes, eles vão ser muitos deles. Assim, você pode rapidamente estender isso para a esquerda e para a direita apenas para ver seus componentes são você sempre pode voltar para esta exibição se for mais fácil para você. Mais uma coisa que eu vou fazer é também criar meus estilos de personagem, mas eu posso lidar com isso um pouco mais tarde. Então eu posso ir em frente e apagar estes. Então eles eram apenas um lugar para nós criarmos isso. Fomos em frente e criamos nossa grade, então temos isso aqui. Agora a próxima coisa que eu realmente vou fazer é incluir meu logotipo. Vou colá-lo do meu documento original. E você pode ver este link porque ao longo deste curso eu vou usar meu documento original que eu criei como um arquivo de referência. Então você vai ver esses conjuntos vinculados ícone. Você pode vê-lo bem aqui. Então este é um componente vinculado porque ele está ligando de volta ao design original ou ter criado. Mas para corrigir isso para este arquivo em particular. Então, por exemplo, se eu for em frente e editar este logotipo no documento original, ele me mostrará uma atualização aqui para que eu possa ir em frente e atualizá-lo. Então, eu tenho ambas as instâncias em ambos os arquivos que têm essa mesma atualização e atualizações mais recentes. Então, eles parecerão exatamente os mesmos. Ou o que eu realmente vou fazer ao longo deste curso é copiar para este documento ou clicar com o botão direito do mouse e simplesmente clicar em tornar local. Então o que isso significa basicamente é que agora este é o nosso principal componente aqui neste documento. E você pode ver que ele tem dois estados. Então ele tem este estado padrão e ele tem este grande estado. E eu fui em frente e criei isso. Agora, para fazer isso, você pode simplesmente ir aqui. Clique em Editar componente principal vai levá-lo aqui. Você pode adicionar um novo estado. Então vamos chamar esse estado preto e branco, só para mostrar como eu fui em frente e criei isso. Então nós temos este belo logotipo. E, por exemplo, digamos que eu queira pegar esse texto para que eu possa segurar meu clique de controle dentro, ir para a cor, transformá-lo em branco. E porque temos todas essas cores, digamos que eu queira usar, eu não sei. Vamos ver essa cor simplesmente chamada Controle clique dentro, e então você pode escolher qualquer uma dessas cores. Então eu posso usar isso, por exemplo. E nós também temos essa forma. Então temos este ponto dentro, mas vamos deixá-lo lá. Então, se voltarmos, vocês podem ver que agora temos esse estado preto e branco. Se eu clicar, este é o nosso estado padrão e este foi o meu grande estado original. E agora temos estado preto e branco. Assim, você pode alternar entre esses estados em vários pontos diferentes do seu design. Então, por exemplo, se você precisar apresentar esse logotipo em um fundo mais escuro, como você pode ver, essa cor não funcionará em seu fundo mais escuro. Portanto, você precisa desse estado preto e branco. Então, em vez de criar outra cópia e, em seguida, editar essa cópia, você pode simplesmente criar um novo estado, transformando-o em preto e branco. Então, onde quer que você precise alternar entre esses estados, você pode simplesmente ir em frente e voltar para onde quiser. Você pode escrever aqui, clique com o botão direito do mouse e clique em excluir como eu vou fazer isso, basicamente, eu posso ir em frente e remover isso porque eu tenho aqui como nosso original. Então, para começar com o nosso wireframe, a primeira coisa que vamos fazer, e é disso que eu estava falando. seção Wireframing é basicamente, você pode ver essas páginas que desenhamos em um pedaço de papel. Se você os tem ao seu lado, então você pode usá-los assim. Caso contrário, você pode trazê-los para o Adobe XD como fizemos para este curso específico. E você sempre pode fazer referência a eles, por exemplo, a idéia que você teve. E porque criamos nossa navegação principal aqui, você possa ver que temos um ícone de localização aqui para negócios aqui e assim por diante. Então podemos fazer isso. Então vamos em frente e começar com essa navegação realmente superior. Então temos um ícone para os negócios. Temos um ícone de telefone, idiomas de símbolos bem aqui. Então eu vou em frente e fazer isso. Vou clicar no meu aeroporto porque precisamos criar uma página longa. Você pode vê-lo. Ou você precisa fazer é clicar neste ponto no meio e estendido todo o caminho para baixo. Não, vamos deixar isso aí. Então vamos deixar o nosso logotipo, Reddit é para o momento. Então vamos usar nossa ferramenta de retângulo estendida até aqui. E vamos ver, talvez possamos usar isso como nossa cor de fundo. Podemos remover a fronteira. E para o tamanho 1920 anos para a largura, morte é final, é usado 70, por exemplo, para a altura. E você pode clicar aqui, ele vai fixá-lo no topo. Agora o que vamos fazer é começar com o texto. Então é aqui que precisamos dos nossos textos. E como eu disse, vou usar Poppins como nossa fonte. Então o que eu vou fazer é clicar no chá e simplesmente clicar aqui. E agora eu posso escrever algo como para negócios ou nossa localização. Isso e eu vou colocá-lo aqui. Vou escolher Poppins e vamos ver, posso usar 18 para este assim. E vamos ver, talvez eu possa usar essa cor. Podemos posicionar para ficar alinhados à esquerda. E podemos manter Shift selecionar esses dois. Clique aqui para posicioná-lo no centro. E então eu posso ir em frente e clicar aqui para adicionar isso ao meu estilo de personagem. E você pode ver que está me mostrando 18 irregulares. Se você quiser editá-lo em qualquer momento, você não editá-lo aqui. Você vai, bem aqui, clique com o botão direito. E você pode editar e, em seguida, fazer alterações a partir daqui. Agora que temos isso, vou continuar e duplicar e digitar ou negócios. Porque se eu pular em frente e mostrar a vocês, você pode ver que temos um ícone de localização e temos quatro negócios. Então vamos ter o texto do formulário aqui, porque temos espaço suficiente neste tamanho da área de trabalho. Então eu vou duplicar minha mensagem e adicionar meu número de telefone aqui, que vai ser apenas um número de telefone falso. Então vamos ver, por exemplo, mais 123456789 ou 0. Bem, vamos deixar assim. Então agora que eu tenho e que o que eu preciso a seguir, nossas línguas. E você pode ver que nós temos essas duas bandeiras bem aqui. Agora, para as línguas, eu vou simplesmente usar um plugin. Então você pode clicar aqui. E eu estou usando esse plug-in de logotipos da interface do usuário, e ele deve funcionar. Vamos procurá-lo aqui mesmo. Então você pode clicar em ousar para procurar por seus plugins. Então vamos ver os logotipos da interface do usuário. Deve estar lá. Aqui está. Então eu estou usando esse, mas por alguma razão não aparece. E o logótipo lá fora. Mas como você pode ver, um hábito instalado. Então o que você realmente precisa fazer é criar algumas caixas. Agora, para criar essas caixas, vamos usar Retangle Tool e você vai usá-los aqui fora. Você precisa criar 194 deles. Então, para os tamanhos, então eu vou usar 40, largura 27. Tão pequeno. Vou remover a fronteira e como eu disse, vou criar 194. Agora para fazer isso, eu vou usar as grades de repetição são simplesmente clique aqui. Então, temos um. E simplesmente vá em frente e estenda para 345678, 910. Então vamos contá-los mais uma vez. É isso. E eu vou descer 20 basicamente. Então, e é basicamente isso. Agora que terminamos isso simplesmente poderia desagrupar a grade. Como eu disse, você precisa de 194. Então eu vou deletar seis deles. Então 246, aperte Delete no teclado. Agora você pode ir em frente e selecionar todos eles. Volte para os logotipos de uma interface do usuário. Clique ali. Você tem bandeiras do país. Então, tem marca de logotipo preto, logotipo de cor marcado tipo de logotipo preto logotipo cor logotipo. Mas estamos interessados neste país. Bandeiras. Basta clicar lá. Ele adicionou 194 flex. Então você pode localizar sua bandeira. Como ele disse, para este projeto em particular, eu estou usando bandeira sérvia e eu também estou usando bandeira do Reino Unido. Você pode usar flor americana, você pode usar a bandeira do seu próprio país. Então, tudo depende de você, o que você quiser fazer com esse projeto em particular. Então o que eu preciso agora é localizar minhas duas bandeiras. Então aqui está a bandeira britânica. E deixe-me ir rapidamente em frente e encontrar a bandeira sérvia. Aqui está. E agora que eu localizei esses dois, tudo que eu preciso fazer é simplesmente selecionar todos os outros. Aperte apagar, porque só preciso destes dois. Eu vou em frente e arrastá-los e soltá-los dentro do meu documento e reposicioná-los apenas um pouco. Então vamos ver, talvez eu possa tê-los aos 40. Então, assim, 1234, assim. E eu vou clicar aqui e digitar dois no meu teclado para baixar isso para 20% de obesidade. Ou eu posso ir em frente e mais ele volta para 30 ou qualquer coisa, apenas para indicar que nesta bandeira britânica é selecionado como um idioma Inglês é selecionado aqui. Então o que eu preciso a seguir são esses dois ícones para localização e para o formulário. Como é dito, estou usando esses ícones e esses ícones, vou mostrar nossos ícones grandes. E você pode obtê-los através do link que eu vou fornecer a você. Então, mais uma vez. Esses ícones são gratuitos para você apenas para fins de aprendizagem. Você não pode usá-los para clientes, você não pode usá-los para trabalhos comerciais, você não pode usá-los para revenda. Se você cumprir todos os requisitos legais e cada condenação é basicamente sobre você. Então, se qualquer uma dessas empresas for até você, se você estiver usando-as, mais uma vez, tudo depende de você. Então vamos voltar ao assunto. Este é o nosso ícone de localização, este é o nosso ícone de telefone. Se eu voltar aqui, você pode ver que estes dois ícones e componentes são transferidos basicamente formado o documento original. Clique com o botão direito do mouse, manso local, clique com o botão direito do mouse tornar local para facilitar Agora que fizemos isso, precisamos reposicioná-los um pouco. Então o que eu realmente vou fazer é começar com este aqui. Então posicionando 20, como dados. E eu vou posicionar isto para estar aqui. Então, para alinhar com isso, para o formulário c, eu posso clicar sobre ele e posicioná-lo. Vamos apenas ver-me. Mas podemos colocar o texto no lado direito e fazer o dobro disso. Então, em 1234. Então, se eu segurar minha chave antiga e passar o mouse aqui, você pode ver que são 80 a partir desta bandeira. E posso posicionar isto para 20, assim. E o que eu vou fazer finalmente é voltar para o meu painel de camadas. Selecione tudo, exceto o logotipo e clique aqui, apenas para posicionar todos no centro. Eu gosto de como isso parece. E também vou mudar o nome para o topo. Agora, BG. E eu vou organizar as coisas um pouco melhor. Então vamos começar com o ícone de localização. Nossos locais, em seguida, vai para negócios como assim, ícone estrangeiro e, em seguida, número de telefone, Inglaterra e Sérvia, topo agora BG e você pode segurar Shift, selecione todos eles, e ligue para este topo agora. Ok, então agora que fizemos isso e este vídeo correu por 19 minutos porque precisamos pré-preparar o arejamento. Basicamente, vou terminar este vídeo aqui. E no próximo vídeo vamos realmente começar com a criação do nosso wireframe para esta página inicial. Então, vemo-nos lá. 29. Frames no Adobe XD 2: Vamos agora voltar a ele e vamos começar com a navegação principal. Então, se ampliarmos novamente, o que eu vou fazer é clicar no meu logotipo e então clicar aqui para usar meu retângulo. E eu vou desenhar um grande fundo para o meu logotipo. Eu também vou para navegação de qualidade, Vg, e eu vou movê-lo para algum lugar por aqui, mas vamos primeiro e dar-lhe uma altura de 1-20. E, finalmente, vamos mais com 50 de uma área de trabalho próxima assim. Então eu vou posicionar o logotipo bem aqui, dentro. E para o logotipo em si, vou posicioná-lo 40 pixels para a direita. Então, navio 1234. Então, novamente, assim, e você pode passar o mouse e ver que você está 40 da esquerda e 26 e quase 26 e quase 26 de cima e de baixo. Agora, para o próprio cochilo BG, vamos dar-lhe um pouco de estilo. Então vamos ver, para uma cor, vamos deixá-la branca. Nós vamos sem qualquer fronteira. Para o raio da esquina, vamos com dez. Agora para a sombra, eu vou para ir com Sang 2020. E vamos ver, talvez possamos ir algo um pouco mais leve. Então vamos dar algum tempo. Dez, por exemplo. E também vou incluir um borrão de fundo. E para os valores de desfoque de fundo, vamos com 2015 e, finalmente, 50 para os 50%. Se eu me esconder em discordância, só por enquanto, você não pode ver isso no momento. Mas uma vez que você realmente começar a rolar para baixo, você vai ser capaz de ver como esse borrão vai agir e como ele vai se parecer. Então vamos deixar isso aí por enquanto. O que precisamos a seguir é de algum texto. Então vamos em frente e direito em alguns textos porque se eu levá-lo de volta aqui, você pode ver que nós temos todas essas páginas. Então contas alongs, cartões, investir digital. E finalmente, temos este botão de login, que vai nos levar para a tela de login e inscrição. Então vamos começar com isso. Vou clicar aqui mesmo. E vamos ver, contas como sujeira. Então temos Poppins, 18 analistas esquerdos irregulares Escolher Cor. E vamos adicioná-lo imediatamente para aqui. E vamos ver o que podemos fazer a seguir. Podemos continuar e adicionar mais desses itens. Então vamos CEO posicionar isso no centro assim, controlar D para duplicá-lo e nossa digitação pertence ao Controle D e eu vou digitar corrente. Isto vai ser invertido. O próximo será digital. E eu também vou duplicá-lo mais uma vez para nosso botão e digitar e Morgan deixá-lo assim por enquanto. E eu vou posicioná-lo para estar alinhado no centro. Agora, o nosso botão em si. Vou desenhar um retângulo como este. E vamos ver para a largura, vamos usar de dois a 44 para se esconder. Vamos usar 64, o raio do canto, vamos chamar de areia. Porque se você se lembra, fizemos o raio de dez para o ângulo agitado, o posicioná-lo no centro. E vamos ver, eu vou misturar 40 do lado direito porque nós fizemos este quadro para o banco. E se você posicioná-lo assim, você pode ver que ele está levando duas colunas de largura. E esse é o ponto principal de nossas colunas porque queremos que tudo seja bem estruturado e organizado. Eu vou em frente e volto aqui mesmo. Vou nomear este btn G, por exemplo, e posicioná-lo até aqui. Vamos organizar essas camadas um pouco melhor. Solo posicione meu logotipo aqui no topo. Vou mover o meu top agora todo o caminho para o topo. Então logótipo. E da esquerda para a direita, temos contas. Temos alongs. Temos cartões, investir, digital, login e BT e B, g. Então vou selecionar estes dois. Clique aqui e, em seguida, bem aqui para posicionar isso no centro e no meu botão, eu vou em frente e selecionar uma cor. Vamos usar este. Por exemplo, esconderei a minha fronteira. Vou clicar aqui e mudar minha cor para branco. E então eu irei em frente e selecionarei esses dois, apertei Control G e os chamei para fazer login. E você pode ir em frente e fazer um componente se quiser. Mas vou deixar isto como está. Vou organizá-lo, é claro, mas deixá-lo como está sem qualquer componente a, que possamos chegar ao estágio de design. E mais tarde no estágio de design, vou realmente ir em frente e criar um componente, estados de componentes e assim por diante e assim por diante. Então daqui para o nosso digital, vamos tê-lo em 80. Então, 12345678, só para dar um pouco mais de espaço para a posição do clique, este para ser 80 também. E isto vai ser aos 80. Então, assim, isso vai ser obviamente o mesmo e conta vai ser a mesma. E é basicamente isso. Então podemos ir em frente agora e agrupar tudo isso, controlar G e chamá-lo de principal. Agora, quando chegarmos à parte de design, vou fazer um pouco mais de estilo para desegregação. Eu também vou adicionar seletor, que vai aparecer em algumas páginas selecionadas. Então, por exemplo, se os usuários clicarem em conta, então seletor vai aparecer abaixo dat. Se eles clicarem cartões vai se mover aqui e nós vamos adicionar alguma animação a ele e assim por diante. Mas vamos chegar a tudo isso um pouco mais tarde, quando realmente começarmos com isso. Agora, se eu levá-lo aqui, você pode ver que na página inicial temos esta seção de imagem herói com texto digital e botão de chamada à ação à esquerda, enquanto a imagem à direita, nós não estamos realmente indo usar qualquer imagem a partir de agora porque é aí que a parte de design entra. Mas posso começar criando meu retângulo. Agora, vou posicionar o meu retângulo até aqui. Vamos chamar este herói. Faça como sujeira. Para separá-lo um pouco e torná-lo se destacar. Vou clicar aqui para adicionar a nossa cor. Ou um Skinneriano, vá em frente e use essas cores para minhas imagens. Vamos usar este. Só para tornar isso um pouco mais óbvio. Vou em frente e remover a fronteira em 1924 e a largura e a altura. Vamos usar 900. E eu vou simplesmente me posicionar para estar aqui. Agora, se eu pegar meu navegador principal, você pode ver que quando eu começar a me mover para cima e para baixo, alguns efeitos estão começando a acontecer. E você pode ver, especialmente se eu mover isso e é aí que o borrão entra. Mas não se preocupe com isso agora. Vamos usá-lo um pouco mais tarde. E eu vou simplesmente ir em frente e usar este aqui porque nós precisamos incluir algum texto e botão e assim por diante. Então não vamos complicar muito as coisas até agora nosso texto, vamos ver. Posso ir em frente e digitar. Este é o título ou título. Aqui, digamos. Então vamos usar coberturas e vamos mudar isso para ficar alinhados à esquerda. Vamos com negrito. Então encontre-o aqui. Mais uma vez, se você não tem Poppins, vá para a página do Google Fonts, ou você pode ir para o PDF que eu forneci nesta última lição de discurso ou nos documentos do curso dependendo de onde você está assistindo este curso, você pode simplesmente abrir um PDF, clique no link. Ele vai levá-lo lá, baixar e instalar essa fonte como normalmente fazer com qualquer uma de suas fontes. Você deve ser capaz de usá-lo neste projeto. Agora, para o tamanho, vamos ficar com 190 enormes assim. E eu vou posicioná-lo em algum lugar por aqui. Vamos dizer. Vou em frente e selecionar este. Ouro de volta para o meu estilo de personagem. Clique aqui para adicioná-lo e posicioná-lo antigo para baixo. E eu vou clicar aqui, porque é muito mais fácil reorganizar isso só um pouco aqui. Agora, eu vou em frente e clique aqui. Então no meu legendado porque se nós levá-lo de volta, você pode ver como ele se parece com texto de título, que vai estar em apenas uma linha de texto e chamada para o botão de ação. Então o que, o que podemos fazer com este aqui é digitar algo assim, é uma legenda de linha. E para isso, vamos usar 24. Vamos também usar irregular. Vamos ver. Como o Dat, analisa mais largura. Vamos ver, talvez eu possa me posicionar em 50, assim. Mova isso só um pouco para baixo. E o que precisamos agora é de um botão. Então, em vez de recriar um botão ou simplesmente pressionar Control C e ir para fora, clique aqui, pressione Control V e, em seguida, simplesmente reposicione-o para baixo. Vamos ver, talvez eu também possa fazer com que seja 50, assim. E vamos simplesmente selecionar tudo isso. Clique aqui para alinhá-los à esquerda, e apenas certifique-se de que você está alinhado à esquerda para a borda da nossa grade. Finalmente, vou estender nosso botão e posicioná-lo para ter três colunas de largura. E eu vou clicar duas vezes dentro, dentro da KPN, saber mais. E você pode ver que tudo se encaixa bem. E porque o Adobe XD está pensando em redimensionar responsivo como você acabou de ver. Então, porque nossos textos são uma linha central, se eu ir em frente e estender este botão, você pode ver que o texto segue muito bem e ele vai sempre ficar no centro, como você alterná-lo para. Então eu vou organizar estes apenas um pouco melhor e agrupar estes gene controle de calor texto cólon como este, posicioná-los aqui. E então usarei minha ferramenta de retângulo. Vá daqui até a borda inferior do nosso herói. Use o texto, clique aqui para posicioná-lo centralmente lá. E o hábito do Derek, esta é a nossa imagem de herói. Nós não vamos nos preocupar com a imagem neste momento, obviamente porque isso é apenas um wireframe. O que você pode fazer é colocar um ícone de imagem aqui apenas para indicar para sua equipe ou seus clientes que isso vai ser uma imagem. Mas como estou mostrando isso para vocês, vocês sabem que, por exemplo, para todas as imagens lá fora, esta será a nossa cor. Então vamos agora seguir em frente e seguir em frente com o nosso design. Então, se eu levá-lo de volta ao nosso wireframe, você pode ver que os serviços estão lá com três cartões, sólidos. Comece por aí. Vou para R, T. Por exemplo. Nossos serviços. Vamos ver. Podemos posicioná-lo para estar no centro e podemos fazer algo maior como 48, por exemplo. Em vez de irregular, vamos com negrito, assim e ter certeza que está no centro. É esta cor, é simplesmente clique aqui. E vamos ver, podemos posicionar para ser 100, por exemplo. Então dê um pouco mais de espaço da nossa imagem de herói. E aqui abaixo vamos começar criando nossos cartões. Então esses cartões serão nossos cartões de conteúdo. Então, para fazer isso, vamos simplesmente contar as colunas porque temos três cartas que vamos usar para colunas como esta porque temos o total de colunas de 12. Então, se eu duplicar, você pode ver nisso, porque eles têm quatro colunas de largura, nós podemos caber três. Se você, se você precisa caber quatro, então haverá três colunas brancas como esta. Então, para esses cartões de conteúdo, vamos em frente e começar criando um primeiro e então vamos seguir em frente e criar outros. E nós também vamos fazer 100 espaçamento. Então, 1020. Vamos ver 90 e este é 100. Agora, vou fazer um raio de esquina de 20. Vamos ver. Posso usar a cor de preenchimento que usamos para imagens. Então este, e vamos ver, posso fazer algumas mudanças na Altura. Então, digamos que será 546, por exemplo. Então, assim, sem qualquer fronteira. Não vamos incluir a sombra por enquanto, talvez possamos usá-la mais tarde, InDesign e uma dica rápida, você não precisa voltar até aqui para clicar e remover a grade. Para ver seu design, você sempre pode clicar duas vezes aqui no espaço vazio e, em seguida, simplesmente clicar aqui para mostrar o InDesign. Então o que eu vou fazer neste momento é simplesmente usar um ícone. Então vamos ver, eu posso encará-lo. E este também é um grande ícone. E se eu clicar aqui, você pode ver que não é um componente, mas vamos torná-lo um componente. Mas antes disso, talvez possamos colocá-lo dentro de um círculo só para mostrá-lo um pouco melhor assim. Selecionou estes dois posicionados no centro como este, e agrupá-los. Então esta vai ser a nossa estrela. Eu vi-o. Vou deixar aqui o fundo branco de propósito. Ele controlaria a chave para criá-la como um componente. E vamos usar este componente em todo o nosso design. Vamos posicioná-lo. Então 12341234, por exemplo. E deixe-o lá porque queremos indicar que o nosso ícone vai para lá. Agora, lá embaixo, vamos digitar penal. Veja, este é o nosso cartão, B, G Por exemplo. Este é o nosso ícone de estrela. Posicione ambos para baixo. E vamos usar minha ferramenta de texto e digitar algo como contar um, assim. Agora eu vou ir em frente e ter certeza que ele está alinhado à esquerda, posicioná-lo aqui, ou ainda melhor ir para aqui. E vamos ver, nós não criamos estilo a partir deste. Então eu vou criar aqui. Então, como você pode ver, 24. E eu vou pular aqui, clique aqui para usar isso como 24. Mas como isso é regular, eu quero criá-lo para ser ousado, apenas para se destacar um pouco melhor. Agora, porque temos regular clique aqui para adicionar negrito. Então, um estilo de personagem geral que você vai em frente e criar. Você pode saltar para dentro daqui e, em seguida, simplesmente adicionar um novo estilo de personagem. Então eu vou ter certeza que está alinhado e tudo vá em frente, pressione o controle D duplicado. E eu vou criar um parágrafo de texto aqui. Agora, para fazer isso, vou simplesmente selecionar este em 18. Parece bem. E eu vou mover estes dois para baixo como eu fiz com este 91. Mais uma vez, 80. E para criar um parágrafo, você pode criar um tamanho fixo e simplesmente estender nesta caixa de texto até aqui. 1234. Então temos 40%, desculpe, 40 pixels aqui, e simplesmente mova isso para aqui. Agora, para a altura, você pode simplesmente estender isso como quiser. E para preenchê-lo com texto, eu vou para direita aqui e escolher lorem ipsum. Então, mais uma vez, você pode clicar aqui, procurar todos os m ipsum como seu plugin, clique, sentir o texto do espaço reservado e você pode escolher o que você quiser. E eu vou simplesmente usar este aqui, inserir texto e vaca leiteira. Agora temos o texto. Agora, abaixo dat. Nós também vamos aprender mais. Então eu vou voltar para a minha paleta de camadas. Ela controlaria D para duplicar isto, movê-lo para baixo. E vamos ver, talvez eu possa fazer um espaçamento de 40 entre todos eles. Então algo assim, assim, e nós temos 32, então vamos posicionar como 40. Vou remover este tamanho fixo e torná-lo auto Whit. E eu vou simplesmente digitar, aprender mais um escritor. E é basicamente isso. O que eu também vou fazer é incluir mais um ícone. E eu tenho este ícone já preparado, mas antes de o fazer, talvez eu possa mudar em disco para alguma outra cor, esta por exemplo. E talvez possamos usar essa cor para todos os links. Porque este é um link, as pessoas vão clicar nele. E vamos ver por este, talvez possamos, sei lá, posicioná-lo para ser 20. Então vamos ver 12. Então, 20. Posso voltar para aqui. Clique com o botão direito do mouse, faça local, como fizemos com todos esses outros. E é basicamente isso. Então o que podemos fazer agora é selecionar todos eles. Então estamos em 40, falhamos em 40 e posicionamos todos para baixo 1234 porque temos 40 daqui, 40 daqui. E nós vamos incluir ícone, que vai ser um pouco maior mais tarde quando começarmos com o design. Então, se nós o levarmos de volta para aqui, agora vamos em frente e organizar tudo isso. Então temos ícone de estrela, e vamos mover todos esses para baixo assim. Então ícone de estrela, conta um. Assim, o ícone de seta Saiba mais está indo para ir aqui. E vamos agrupar disco e chamá-lo de cartão um. Como isso. Agora você pode usar uma função de grade de repetição, muito fácil. Simplesmente extensão, crie três. Mas eu não vou fazer isso. Vou simplesmente duplicá-los todos alinhados assim. E a razão é porque mais tarde eu vou excluir esses, criar um design e, em seguida, criar um componente e desse componente editado para todos esses outros designs. Então é basicamente isso. A única coisa que talvez possamos fazer é dar-nos um pouco mais de espaço. Então, por exemplo, mais uma linha de espaço. Vá para a direita aqui e preencha o texto do espaço reservado. Então vamos ver, precisamos estendê-lo para a escrita de betume. Eu não sei porquê. Não está me dando mais espaço. Então eu vou preenchê-lo sozinho. Como assim. E então eu vou me dar um espaçamento de 40 entre todos esses assim, assim. Porque eu vou adicionar algumas informações reais mais tarde. E eu realmente acho que eu preciso de um pouco mais de espaço para tudo isso. E você sempre pode alinhar este cartão central assim. Agora vamos mudar o nome deles. Este é o cartão número dois, e este último é o carro número três. Vou agrupá-los um pouco diferente, então assim e vamos ver, podemos chamar isso de serviços. E podemos chamar este serviço um, controlar um controle C, controlar V. e finalmente controlar V para este terceiro. E isso é basicamente sua seção de serviços está concluída. Se eu te levar de volta, o que precisamos agora é isto. Então temos a página inicial e temos a taxa de câmbio aqui. Então, para economizar um pouco de tempo, o que eu posso fazer é simplesmente usar Indies Flags Great aqui. Ou podemos realmente ir em frente e começar criando nossa seção de taxas de câmbio. Então, para fazer isso, eu vou selecionar esta posição, assim. E vamos ver, talvez eu possa chamá-lo de taxa de câmbio, BG. O meu pai. E vamos ver, 1924, a altura da largura. Vamos com 240, assim. Para a cor, vamos com a mesma cor que fizemos para nossas imagens e para o brilho do espaçamento. Talvez possamos ir com algo um pouco maior, como 150, por exemplo. Como isso. E agora o que podemos fazer é realmente cavar e começar adicionando nossos textos. Então, sem qualquer tipo de borda. E vamos ver, 24 parafuso funciona bem. Vamos ver eu recomposicioná-lo para estar aqui. 1234 e desça o Controle D. e posicione os detritos aqui. Vamos ver, deixou a linha e isto vai ser quatro. E de fato, como papai e vamos ver, isso vai ser 24, irregular assim. Vamos ver, estamos em 40, então tudo parece bem. Agora, para adicionar todas essas informações, vamos ver o que podemos fazer. Talvez possamos duplicar estes dois. Controle de batida D, posição e para baixo posicionado é estar aqui, certifique-se de que ambos são deixados mais para eles, nosso centro e, por exemplo, disciplina para ser euro. E vai ser algum valor. Então 1.58917, Por exemplo. Vamos ver, talvez possamos dar 15 espaçamento e é basicamente isso. Tudo o que precisamos fazer é criar essas, essas bandeiras. Então, para fazer isso, posso criar uma grade mais uma vez e mostrar isso mais uma vez. Então vamos ver. Vamos com algo um pouco maior, como uma linha, nove semanas em que remover a borda, usou a grade repetida. E eu vou pausar o vídeo aqui porque eu vou criar o mesmo processo que eu já mostrei a vocês. E agora que eu fiz isso, você pode ver que todos eles são selecionados. E eu também fui em frente e afastei esses, que eu realmente vou usar. Então eu tenho dólar dos Estados Unidos, Reino Unido, e Franco Suíço, rublo russo e iene japonês. E você não está vendo que estamos faltando euro. Isso porque aqui não há bandeira da União Europeia. Então vamos em frente e remover tudo isso. Clique aqui. Poderia controlar a posição D aqui. E o formigamento vai fazer é arrastar e soltar uma imagem de uma bandeira da UE. E você pode encontrar essas imagens na Wikipédia. Eles são livres para usar para esses fins. Então eu vou em frente e selecionar, arrastar e soltá-los dentro. E o que eu realmente vou fazer é ver a posição e isso para ser um alinhamento à esquerda, ter certeza que está em 40 como este. Se estes dois estiverem no centro e posicioná-los para estarem bem aqui. Vamos ver. Então talvez 22. Acho que funciona bem. E agora vamos em frente e começar adicionando estes. Então eu vou apertar o grupo de Controle G este texto de qualidade, assim. E então simplesmente faça mais algumas cópias e posicione-as. Então eu vou em frente e posicionar minha bandeira dos EUA aqui. Você alguém. Sim, vamos dar a este capital. Ou você pode ir em frente e clicar aqui para adicionar uma cor maiúscula. É mais fácil para você. Do que precisamos? O próximo é um Reino Unido. Então posicione-o aqui, meça no centro com toda essa posição de Controle D aqui. Esta é uma grande libra esterlina. Faça outra cópia, e faça outra cópia aqui. Então o que precisamos a seguir é franco suíço e o nome é c, h, f. então posicione-o aqui. Você pode ver quando você tem suas cópias, é muito mais fácil lidar com tudo isso porque é basicamente uma situação de arrastar e soltar, como você pode ver. Então para este X, U, B, e finalmente, e japonês ainda, e chame-o um dia. Então esta é a nossa seção mais tarde no fim de semana, vá em frente e faça algumas mudanças, adapte isso, mas basicamente isso é irritante. Então vamos em frente e organizar tudo. Então mova arejando aqui do topo. Vou colocar a taxa de câmbio aqui. Vou apresentar a data também aqui. E então eu vou com o euro. Então é esta posição aqui. E certifique-se de que um texto artesanal, USD com este texto e grupo precisa chamá-lo britânico congruente. Você pode ver com alguns desses, pode levar um pouco de tempo e está batendo e laborioso. Mas como sempre, você pode acelerar um pouco as coisas falando, primeiro lugar, como eu estou fazendo. Mas basicamente você pode aumentar sua velocidade. Agora, finalmente, vamos em frente e agrupar tudo isso. Eu não vou me preocupar com os valores reais no momento. Vamos deixar isso para o projeto assim. E agora vamos em frente e seguir em frente para baixo. Então, se eu levar vocês aqui, vocês podem ver que temos uma imagem alinhada à esquerda, temos o parágrafo do título e o texto. Então o que vamos começar a fazer agora é talvez copiar e colar alguns desses itens. Então, para a nossa imagem e vamos em frente e usar uma ferramenta de retângulo. Irei em frente e removerei a fronteira. E vamos ver, vamos usar essa cor para nossas imagens. Então, é este. Para este enfrentando glitzy. Talvez possamos ir com 150 a partir daqui, assim. E vamos ver para a largura, talvez possamos ir com seis colunas de largura, então 246, de modo a alinhar com este. E temos mais seis para o texto e para todos esses outros elementos. Então a primeira coisa que eu vou fazer na verdade é copiar este botão e vamos renomeá-lo. Saiba mais. Btn, bom controle. A Sue. E vamos ver, posição. Está algures por aqui. E eu vou realmente criar espaço adicional. Então, se eu remover minha grade, você pode ver que eu tenho uma coluna no meio, que é o espaço vazio. Só para me dar um pouco mais de espaço para respirar para que eu possa ver tudo isso um pouco melhor. Agora, eu posso clicar nas minhas mensagens e ver. E eu posso digitar algo como Serviço irá aqui, nosso nome de serviço aqui. E isso é só porque e para mostrar aos seus clientes e o que vai ser possível, o que eles podem incluir aqui. E nós vamos fazer algo um pouco diferente aqui também. Então, vamos com ousadia. Vamos com 48. A cor do texto será a mesma. Basta ir rec aqui estilo de personagem e mais largura bem abaixo aqui. Em seguida, vamos com um parágrafo de texto. E vamos ver, 24 vai funcionar. Bem aqui, Extended. Vamos ver, talvez cinco linhas de texto como esta. Como assim. E eu vou fechá-lo aqui e voltar para meus plugins, preencher o texto do espaço reservado apenas para preencher a coisa toda assim. E vamos ver para o espaçamento, podemos ir com 40 ao redor como fizemos antes. E agora você pode começar a ver essas mudanças repetidas. Então falando sobre várias vezes. Então este espaçamento ou 40 e assim por diante e assim por diante. Então, todas essas coisas vão acontecer cada vez mais à medida que começarmos a nos mover ao longo de nossos projetos. Então aqui vai ser a nossa imagem. E vamos chamar isso, digamos nome de serviço. Por exemplo, só por agora e mais tarde, quando realmente temos conteúdo real para colocar aqui, então vamos mudar e atualizar seu nome. Agora, eu posso apertar o controle S, e eu posso ir em frente e mostrar-lhe o que você pode fazer com isso. Então você pode clicar no nome do aeroporto e clicar aqui apenas para entrar no modo de visualização. E você pode ver como isso parece porque nós estendemos nossa rpart, podemos ir em frente e rolar para baixo. E agora você pode ver que isso começa a parecer um site real. Então você sempre pode ir em frente e compartilhar isso com seu cliente simplesmente indo para o compartilhamento. Mas vou explicar isso um pouco mais tarde. Vamos agora ir em frente e, e basicamente, arredondar este design e terminá-lo. Então agora vamos começar criando nossa corrente. Se levarmos você de volta mais uma vez, você pode ver que temos esses dois cartões, serra, imagem e texto e btn está abaixo. Então os pacotes são contas combinadas. Vamos voltar e começar desenhando a dose. Então, porque temos que fazer, podemos ir com 16 de largura assim. E vamos ver o que podemos fazer com eles. Então vamos chamar este cartão grande, por exemplo. E assim. E vamos dar a mesma cor. Então, em S1. E vamos em frente e mudar o tamanho. Então podemos ir com 7-0 para, por exemplo, assim, raio de canto de 20 vai funcionar bem, remover qualquer borda. E o que podemos fazer é duplicar este. Você controlou D. Vamos chamá-lo de grande imagem atual. Porque vai ser a imagem que vai ficar bem aqui no topo. Então vamos ver. Podemos entrar aqui, 20, 24 o canto superior esquerdo e superior direito, 00 para o canto inferior esquerdo e inferior direito. E para mostrar o que eu fiz, eu posso clicar aqui. E vamos ver, podemos fazer 368, por exemplo. E agora você pode ver que este é o nosso plano de fundo para o texto e este é para a nossa imagem. Então vamos incluir nossa imagem um pouco mais tarde. E vou deixar assim. Então, para colocar o nosso texto, vamos ver aqui. E podemos ir em frente com 24 volts, por exemplo, para este. Sim, acho que funciona muito bem. E vamos ver, podemos ir com 40 por todo o caminho. Então 1234. E podemos fazer o mesmo aqui, 1234. Podemos ir para o controle principal grupo D1, desculpe, duplicar isso, posicioná-lo para baixo. E vamos parecer que talvez possamos fazer este 18 irregular assim. E podemos estendê-lo para ser, vamos ver, assim, 1234 e então posicioná-lo aqui. E eu vou me dar quatro seguidas como esta. E certifique-se de que isso sirva aqui. Vá em frente aos meus plugins. Lorem ipsum, taxa de cliques. Atreva-se. Não entendo por que fez isso. Por alguma razão, não funciona. Talvez possamos desligar isto e ir com o tamanho fixo. Sim, funciona agora. Não sei por que fizeram isso, mas não importa. Então o que eu vou fazer a seguir é usar este botão e realmente colocá-lo dentro. Então eu vou colocá-lo aqui. Certifique-se de que o centro do botão está alinhado aqui. E eu estou realmente indo para posicioná-lo 40 a partir da direita. Então 1234. E ajustar a dívida, dá-lhe algum interesse visual ao invés de posicionar no botão aqui e ter todo esse espaço vazio. Então agora parece um. Você também pode posicionar para estar no centro alinhado à esquerda como quiser. Mas eu acho que para fins de variação, é melhor deixá-lo aqui, mas na verdade é tudo com você. Você pode ir em frente e experimentar, desculpe, experimentar com isso como quiser. Então ele vai posicionar isso aqui. E veja, então precisamos agrupar este dois textos, imagem e aprender mais botão deve controlar g, chamado esta grande corrente. Assim, aperte o controle D para duplicar. E vamos ver, talvez possamos posicionar estes como 150 para que possamos ter o mesmo espaçamento que tínhamos entre todos estes. Agora que esta página está indo bem, o que precisamos fazer por último, basicamente é criar e blog. Porque se eu te levar de volta, você pode ver que temos notícias e temos essas três seções com artigos de notícias. Então o que podemos fazer é realmente usar neste mesmo controle de batida atual D moldado e mordido. Também vou usar os mesmos textos. Então acerte o controle C, controle a missão V. Está no centro. E talvez possamos chamar isso de nossas últimas notícias ou algo assim. Nossos posts mais recentes no blog ou como você quiser ter certeza de que são 150 também. Certifique-se de que está no centro. E o que eu realmente vou fazer com este aqui, vamos ver. Eu posso saltar para dentro e seria, eu posso chamar esta pequena corrente ou algo assim. Ou melhor ainda, podemos realmente usá-los. Então vamos ver. Controle C. Vamos escrever aqui deletado este. Posição de controle v está aqui. E porque temos três deles, então será basicamente o mesmo que este. Então, mais com todo o caminho para baixo. Agora, o que eu realmente vou fazer aqui, vamos ver. Vamos chamar isso de corrente pequena. Porque para nós vamos realmente criá-lo mais tarde para ser um componente. O que você vai fazer com este aqui é certificar-se de que temos apenas duas linhas de texto, assim. Então, 40, mais uma vez, aperte o controle D. Nós vamos colocar a data aqui porque você obviamente precisa de uma data para isso. Vamos usar a largura automática. E vamos ver 1012, 20-24 exemplo. E vamos dar-lhe esta cor, por exemplo, apenas para diferenciar um pouco, isso pode permanecer o mesmo. E em vez deste Ikhwan, vamos ver, podemos obter este controle D. E vamos ver uma pequena parte como esta. Agora para a altura. E vamos ver o que podemos fazer. Talvez 300, eu acho que vai funcionar bem assim. E eles vão mudar a cor para descobrir. O que vamos fazer a seguir é estender isto em altura. Este cartão original. Então vamos ver, 631. Acho que vai funcionar bem. Sim. Então eu vou selecionar esses usando a tecla Shift, posicionando-os para baixo 1234. Vamos ver. E vamos ver o que podemos fazer com este. Então posicione-o a partir daqui. Talvez vejamos, talvez eu possa aumentar essas mudanças só um pouquinho. Ou melhor ainda, posso mover isto um pouco para baixo. Então, tipo 20, isso vai ser 40. E vamos ver, 1234. Isso é bom. Então, o que realmente precisamos é posicionar isso para baixo. Então vai ser para 87, chegou longe 50, sete. E vamos fazer algumas mudanças finais. Então precisamos desses dois de baixo. Então, inferior direito e inferior esquerdo para estar em 0 como este. Então, quando eu clicar lá fora, você pode ver como isso se parece. Então, finalmente, temos 40, temos 40 daqui, temos 20, temos 4040. Então vamos em frente e agrupe isso. Então temos um atual. Posso escondê-lo aqui. E vamos organizar as coisas um pouco. Então, serviço um, ver mais admite. E aqui vamos escrever em algo como o Artigo 1. Só para diferenciar um pouco as coisas porque esta vai ser a nossa última notícia. Vamos ver onde estamos assim. E aperte o controle D para duplicá-lo. E duplique-o mais uma vez. Este é o evento A, B, Artigo Dois e disciplina para ser o Artigo 3 como este. E simplesmente organize estes. Então este é dois, este é o atual três. Posicione-os um pouco diferentes. E finalmente, podemos chamar isso de nossas últimas notícias porque já temos desse título como celular. Agora, as duas últimas coisas vamos criar nossa faixa de informações aqui e o fundo do rodapé. Eu só vou basicamente tê-lo como um pé a fundo porque eu vou explicar a você como você pode editar essas fotos como você vai junto um pouco mais tarde. Mas, por enquanto, vamos ter o fundo do rodapé, Derek. Mas antes disso, vamos dar uma tira informativa. E para fazer isso, vamos usar uma ferramenta de retângulo mais uma vez. E vamos posicionar para ser 150. Então, vendo como todos esses, agora, para isso, vamos chamá-lo de tira. Bg vai conter basicamente a média na informação chave que queremos retratar aos nossos visitantes. Então vamos dar-lhe uma altura de 180. Vamos ver os 50. Isso é bom. Vamos dar essa cor, por exemplo, agradável e escuro. Vamos remover a fronteira. E o que vamos fazer agora, simplesmente usamos nosso logotipo que temos aqui, no topo agora. Ou podemos realmente ir em frente e arrastá-lo e soltá-lo do herói. Foram realmente posicioná-lo aqui. Use a versão cinza ou preto e branco, como eu expliquei a você. E isso é o que eu estava dizendo porque você precisa posicionar estes indiferentes em cima de cores diferentes. É por isso que temos logotipos em diferentes versões, variações diferentes e cores diferentes. Agora, finalmente, o que precisamos é do texto. Então eu vou realmente ir em frente e copiar isso e copiar isso. Então localize, posicione este logotipo para baixo, vá para o meu topo. Agora, use locais. espera pode controlar as nossas localizações. Use o telefone e discipline-o. Controle C, para copiá-lo e ir até o fim. Clique no meu controle BG V e mover papagaios para baixo. Vou segurar meu turno e mais arejado. E agora o que precisamos fazer é basicamente uma reorganizar estes. E só um pouco, vamos ver, talvez eu possa colocar isso e isso em algum lugar por aqui, por exemplo. E eu posso colocar isso, e isso pode parecer estar aqui por enquanto. E o que eu preciso finalmente é de texto para o meu e-mail. Então eles têm um e-mail, então ele teve um empréstimo no bank.com. Você obviamente vai usar o seu próprio, colocar em clientes mais tarde. E o que precisamos finalmente é de um ícone de e-mail. Então eu vou usar um que eu já criei anteriormente. E aqui está. Eu vou voltar aqui, localizado aqui, clique com o botão direito do mouse fazer local, o mesmo que fizemos para todos eles ou pode verificar rapidamente. Então isso é em 20, se bem me lembro, sim. Então vá para cá. Desloque um para ter certeza de que isso está no centro assim. E isso é centralizado. Então vamos ligar para este e-mail assim. E vamos fazer alguns alinhamentos rápidos. Então vou posicionar isso. Podemos ligar para este telefone e locais. E eu vou usar um local real aqui. Talvez veja, porque eu sou um pouco preguiçoso para digitar, eu vou simplesmente dotar o cinza aqui controle V. E vamos ver, eu posso reposicionar estes. É por isso que você está colocando-os em pastas. Vou selecionar isto para estar aqui. E então eu vou selecionar todos os três e clicar aqui, que vai posicioná-lo uniformemente no dissidente daqui até aqui. Agora vamos reorganizar mais uma vez. Então temos logotipo, localização, telefone, e-mail. Uma última coisa e selecionaremos todos eles. Clique aqui para se certificar de que estão no centro. Ele realmente atingiu Controle G e chamar esta informação escorregou. E como esta seção é realmente bastante simples, podemos acabar usando-a em nosso design final. Finalmente, vamos criar um rodapé. E para fazer isso, vou simplesmente usar um retângulo mais uma vez. Então, vamos ver. Vamos dar um dia. Mêncio de 19-21 e por 5-6, cinco, por exemplo. Vou certificar-me de que está no centro. Eu vou voltar aqui e usar nossa cor mais escura, que é este 100 vai realmente movê-lo para baixo. Não sei por que a Adobe está fazendo isso de vez em quando, mas continua me mostrando essas variações. Quero fazer isto aqui, posicionando isto aqui. E agora eu tenho todas as minhas cores estão posicionadas uniformemente. Agora que eu fiz isso, eu posso chamar este rodapé BG, posicioná-lo todo o caminho para baixo. Na verdade, vou ir em frente e fechar a placa RR. Então clique duas vezes e certifique-se de que seu zoom todo o caminho em roupas bonitas, nós temos uma borda, você vai remover isso. E basicamente a única coisa que eu vou fazer é usar e d up itens de nossa navegação. Então, se o levarmos de volta aqui, temos contas, cartões, investimento digital. Isso é o que vamos realmente usar e finalmente usar qualquer um dos links. Então eu vou usar o texto do nosso principal agora. Então, simplesmente selecionado hit Control-C. E vamos ver, eu posso ampliar a posição aderir ao Controle V. Agora o que eu vou fazer é usar uma cor branca, assim. E finalmente, eu vou usar algo como 24 ousado para esses anos fora de cor. E agora eu os reorganizei um pouco para sabonete. Vamos ver. Talvez eu possa posicioná-lo para ser 100 abaixo do topo. Então 12345678910, apenas para nos dar um pouco mais de espaço e ter certeza de que isso está posicionado para a grade. Certifique-se de que você tem colunas de separação porque nós vamos realmente incluir algumas informações adicionais mais tarde. Mas veja como se há “Trate Control D “e digite links de ardor aqui. Isso é basicamente a última coisa que vamos fazer é duplicar este. E vamos ver, eu posso criar algo pequeno. Então, 18, certifique-se que é branco, certifique-se que está no centro. E vamos ver, eu posso, enfrentado neste texto que eu já criei anteriormente. Então vamos ver. Posso posicionar que haverá 40. Até 3-4. E mais tarde, quando começamos o projeto começar a preencher todas essas informações adicionais com páginas, então vamos posicionar isso para estar lá. O que você pode realmente fazer é começar adicionando esses links. Então vamos ver, vou duplicar isto, certificar-me de que está alinhado à esquerda desta vez. E vamos ver, eu posso ter certeza que é 4D no meio. Então 1234. E chame isso, digamos contas um. Por exemplo, pressione o controle D. Contagem também. Conta três. Finalmente, contas para, e é basicamente isso. Então, quando você realmente começa a importar dados reais dentro, quando você realmente começa a trazer dados reais. Então, qual é o nome dessa conta, como essa conta vai parecer, e assim por diante e assim por diante. Então é aí que você realmente vai começar a trazer essa informação. A última coisa que eu queria fazer para este rodapé e para este vídeo é mudou a cor de itens índias de branco puro para uma disciplina. Só um separado, separado, só um pouco melhor. Assim, os usuários serão capazes de dizer qual é o domínio uma extremidade, quais são as secundárias. Então, vamos orga 30. Frames no Adobe XD 3: Vá em frente e continue com o nosso wireframe. Então, se ampliarmos um pouco mais perto, você pode ver que a próxima página que temos que criar contas. E o que eu vou fazer é clicar aqui, apertar o controle D para duplicar meu rpart. E então o que nós vamos fazer, como eu expliquei em vídeos anteriores, nós não vamos tocar neste nav principal. Na verdade, vamos adaptar-nos a ele. Vamos animá-lo mais tarde nos estágios de design, mas por enquanto, vamos deixar isso aqui. Agora, quando se trata de imagem de herói, como você pode ver a partir desses wireframes que desenhamos. Então, na página inicial, que é esta aqui, temos o texto do título e o botão de chamada à ação à esquerda. Mas em cada um destes, Depois disso, temos à direita, como você pode ver, apenas para dar-lhe algum tipo de distinção entre essas duas páginas. Então o que vamos fazer primeiro é saltar para dentro. E eu vou apenas clicar duas vezes porque nós colocamos em uma pasta. Vou posicioná-lo em algum lugar por aqui. Então vamos ver 246. Então vamos alinhar até o sexto. Então, se aproximarmos um pouco mais, você vê 1-2-3, 4-5-6. Então está cobrindo seis linhas de Índias, linhas de grade. Em seguida, vamos clicar duas vezes aqui e digitar contas porque queremos dar-lhe um nome. E mais uma coisa sobre o Adobe XD se quisermos mostrar fluxos. Então vamos ver se eu acertei o controle de um 0, que este é o nosso wireframe, Estes são os nossos wireframes pessoas nesta é a nossa arquitetura do site. Assim, você pode dar um fluxo e mostrar um fluxo para seus clientes, seus clientes ou outros designers da equipe. Basta clicar aqui em um protótipo. Clique neste e clique aqui. Ele vai mostrar o fluxo um, basta clicar duas vezes em insight e dar-lhe um nome. Vamos chamar-lhe “wireframes”. E por que Flo é importante. Se eu voltar ao meu projeto, você pode ver que este nome está colando bem aqui. Bem, mais tarde nós vamos realmente nos dar muito mais desses elementos de design. Muito mais destes são pranchas. Vamos incluir o design responsivo, vamos incluir painéis e assim por diante. Finalmente, vou mostrar como ele pode adaptar tudo isso para aplicativos e tamanhos de aplicativos que vamos projetar para o iPhone. Então todos esses instintos vão nos levar muito espaço. E quando você envia este arquivo para seus clientes e para os desenvolvedores, eles querem saber o que é tudo. E, finalmente, é muito mais fácil para você como designer. Saiba o que é tudo porque você vai vê-lo até o final deste curso. Nós vamos ter muitas dessas informações incluídas dentro. Então é por isso que é importante mostrar seus fluxos. Ou benefício sobre o fluxo é e esses wireframes estão indo apenas para se conectar entre si. Então, se aproximarmos um pouco mais, você pode ver que aqui temos uma primeira página ou um site ou como você quiser chamá-lo. Mas depois da página de login, saltamos para dentro do aeroporto. Desculpe, dentro do painel. Então painel pode ser como fluxo separado. Pode ser o nosso painel de wireframe. Pode ser wireframe painel, você quiser chamá-lo. E vamos ver um pouco mais tarde. Nós realmente vamos projetar todas essas páginas dentro de nossos wireframes? Ou vamos apenas projetar este primeiro painel e, em seguida, saltar para o design e, em seguida, adicionar todas essas outras páginas. Não perca muito tempo. Então, agora que está coberto, vamos voltar. E o que queremos fazer por este é, e mais uma vez, é por isso que você tem tudo isso. Então você pode ver que temos um texto aqui, abra sua conta. Então podemos simplesmente clicar duas vezes aqui. E podemos desagrupar serviços. Então você pode clicar com o botão direito do mouse no controle de grupo ou turno G, Shift Command Z. E vamos chamar de abrir sua conta. E o que vamos ter aqui, se eu voltar a levá-los aqui, teremos quatro ícones diferentes. Então nós vamos basicamente ter quatro caixas diferentes com o texto dentro e nessas caixas nós vamos realmente incluir ícones e o texto. Então vamos ver, talvez possamos começar adicionando isso. Talvez possamos chamá-lo de seletor. Por exemplo. Logo abaixo aqui. Posso saltar para dentro deste cartão número um. Deixe-me apagar esses dois para que eu possa abrir. E em vez de BG atual, talvez eu possa chamar esse seletor assim. E se aproximarmos um pouco mais, posso mudar o que mencionaram porque no momento é muito grande. Então vamos com três 66 largura, 312, assim. Então você pode ver que ele está tomando três colunas de largura. Vamos nos livrar disso. Vamos nos livrar disso. E nós vamos deixar as nossas mensagens de texto, só esta. Então eu vou apenas remover isso também. E agora temos estes dois. Então eu vou ligar para essa conta inicial porque se você se lembra, eles realmente nos deram esses nomes de contadores. Então começar a contagem é o nosso primeiro. E vamos selecionar esta conta de duas estrelas e esta, posicioná-la no centro. Vamos posição r, ícone de estrela. Posicione-o no centro assim, e deixe-o assim por enquanto. Mas eu vou fazer a seguir é criar esta forma. E talvez eu possa até estender um pouco para algo assim. Talvez eu possa virar porque quero mostrar que distinto é selecionado. Então vamos selecionar estes para se certificar de que eles estão na posição central, este polígono seletor para baixo para cima, e vamos chamá-lo de seta. Vamos ver. Vamos diminuir um pouco e ver como se parece. Acho que vai funcionar bem, vai desligar a minha rede por um segundo. Eu acho que vai funcionar bem, eu só preciso posicioná-lo e apenas como no disco talvez. E então eu vou dar a mesma cor e que eu fiz com este fundo. Então eu vou selecionar estes para clicar aqui para combinar nesta forma. Então agora temos uma única forma. Então você pode ver se eu mudar essas cores, você pode ver como ele muda e se atualiza para esta única forma. Então vamos deixá-lo lá. E vamos ver, podemos chamar essa conta inicial assim. E eu posso trazer minha grade de volta porque eu vou precisar dela. Vou duplicar esta posição aqui. Uma posição esta aqui. Mais uma vez, você pode usar a função de grade de repetição se você quiser comprar o mais uma vez, porque este é apenas um wireframe. E mais tarde, eu realmente vou criar isso como um componente e adicionar alguns elementos adicionais a ele. Então eu vou deixar isso assim. Este próximo é chamado de conta estrangeira estrangeira. E eu vou simplesmente clicar duas vezes aqui. Como você pode ver, temos algumas falhas e isso vai ser milenar. Então, conta milenar. E a razão pela qual eu estou renomeando tudo isso é apenas, é mais simples depois entender o que tudo é. E este último é premium. Então eu vou apenas selecionar meu começo a escrever Freemium e chamá-lo de um t. Em seguida, eu vou excluir isso, e eu estou realmente indo para usar isso em minha vantagem. Então vamos ver, talvez Aiken uma posição que em 60, talvez, vejamos. Então 1-2-3, 4-5-6 talvez. Vamos ver como isso parece aqui. E também posso provar isso só para mostrar como vai parecer mais tarde, quando estiver ao vivo. Então, obviamente, você não pode dizer no momento, mas este, digamos, é selecionado. Então, com cada um deles, quando você selecioná-los desdém fois vai atualizar e esta imagem vai ser atualizada também. Então vamos trocá-lo de volta. E para esta imagem, deixe-me escolher rapidamente esta cor porque eu preciso adaptar alguns desses radius coordenadores. Então vamos ver. Vou atualizar o meu canto superior esquerdo e adicionei 20. Isto vai ser 20. Então, se clicarmos lá fora, você pode ver que isso e isso estão em torno dele. O que vou fazer a seguir é incluir mangue de volta. E eu vou saltar para dentro da minha imagem. E eu vou posicioná-lo bem ali. Então vou torná-lo um pouco mais estreito do que era originalmente. Apenas se atreva, ele se encaixa na nossa grade e nossa estrutura um pouco melhor. Então, se vemos que estamos em 100 aqui, estamos em 60 aqui. Para que tudo pareça bem. O que vou fazer a seguir é adicionar uma seção de perguntas comuns logo abaixo da dissecação. Então eu vou apertar o controle D e posicioná-lo para ser em 100. E vamos ver, vou deixá-lo aqui e vamos ver do que podemos nos livrar. Para que possamos nos livrar de todas essas coisas. Então o que eu vou fazer para este é, vamos ver, eu preciso, eu preciso desta seção, por exemplo. Então vamos saltar para dentro daqui. E você sempre pode ir para trás e para a frente entre todos esses e pegar esses diferentes elementos. Eu também vou aprender mais acertar Controle C. E eu também vou voltar aqui e posicionar aqui mesmo. Então vamos organizá-los um pouco. Então, porque estas serão perguntas comuns. E nós podemos realmente ir em frente e terminar esta seção porque vai ser muito mais fácil para nós mais tarde. Então isto é 24 volts. Na verdade, vou aumentar isto para 24. Vou aumentar para 24. E uma mistura que esta cor é selecionada. E vamos ver, posso dar-lhes espaçamento ou 40. Isso parece bem. Vamos ver, isso vai ser na cirurgia ou talvez para algo assim. E deixe-me ir em frente e copiar e colar o texto original que vamos realmente usar aqui. E eu vou pular aqui e ter certeza que isso é 40. E isso vai escrever em perguntas comuns como essas. E eu realmente vou arrastar e soltar meus ícones aqui, que eu preparei. Então eu vou pular aqui e posicionar meu ícone aqui e alinhá-lo à esquerda. E vamos ver, eu posso posicioná-lo para ser em 40, assim. Vou saltar aqui ou clique direito fazer local, e este é o meu ícone. Agora todos esses ícones premium agora são retirados de convites ou elementos. E você vai ver esses ícones em todo o nosso design, especialmente quando tocarmos neles. E eu também vou deixar links para esses ícones e esses pacotes de ícones. Cara, para não me repetir, você não pode usá-los para nada além de aprender. Se você decidir usá-los, então não se surpreenda se algumas dessas empresas tentaram processá-lo para ir atrás de você. Então, se você quiser usá-los para projetos premium, para seus projetos clientes e assim por diante, você tem que comprar esses ícones. Agora vou fazer mais três destes. Vamos ver, controle. Certifique-se de que este é 41234 e Controle D mais uma vez. Então vamos ver. Não sei por que está me dando 39,8, mas não importa. Eu também vou copiar e colar alguns destes do meu design original apenas para economizar um pouco de tempo. Porque como ele disse nesta seção, vai aparecer em todas as nossas páginas. Então, se ampliarmos aqui você pode ver perguntas comuns vêm, perguntas, perguntas e assim por diante. Então, todas essas páginas, ele vai aparecer, então é muito mais fácil para nós corrigi-lo agora e terminar com isso agora do que esperar por ele mais tarde. Agora, vamos saltar para dentro e organizar as coisas um pouco. Então temos informações da conta, ícone, perguntas de ícones, temos o texto. E vamos organizar estes três um pouco assim. E eu vou pular dentro do grupo D do Controle G. E eu vou chamar essas perguntas comuns como essa. E deixe-me posicioná-lo logo acima da tira de informações assim. Perguntas comuns como esta. E vamos saltar para dentro em vez do nome de serviço. Vamos ver o que podemos fazer. Podemos simplesmente renomear esta informação ou informação. Porque, como eu disse, isso vai conter informações que são específicas para cada uma dessas contas ou sempre que um usuário clica nelas e essa informação realmente vai mudar. Então, quando chegarmos ao estágio de design, eu realmente vou mostrar que nós estamos indo para o protótipo cama, adicionar alguém menciona, adicionar um pouco de tempero a ele. E há quando essa informação vai mudar junto com essas imagens. Então, por enquanto, vamos manter em um. Então vamos abrir sua conta e eu vou selecionar tudo isso. Então abra sua conta. Dívida. Abaixo que temos vindo perguntas e temos uma conta comum perguntas. Então, vamos parecer que recomposição merece estar a 140 a partir daqui. Então vamos ver, estamos em 140. Só estou a usar o Shift e a minha seta de baixo. Então eu vou duplicar isso. Controle D. Posicione-o aqui. Controle D, mais uma vez. Posicione este para o fundo, este para o centro. E vamos ver, o centro um vai ser perguntas bancárias comuns como essa. E finalmente, temos este que vai ser ferramentas úteis como essa. Agora, deixe-me saltar para dentro e selecionar meus outros ícones. E eu vou copiá-los e colá-los aqui dos nossos documentos originais. Então, você pode ver, eu apenas fui em frente e nomeá-los ferramentas úteis, ícone e ícone de perguntas bancárias. Então, se pularmos aqui, eu posso fazer o botão direito do mouse e fazer o ME local Klocal, e isso é tudo. Agora, a auditoria que me resta fazer é trazê-los para dentro. Então aqui temos perguntas bancárias que vou usar neste e simplesmente posicioná-lo em 40. E para a esquerda, vou em frente e apagar este. E nós vamos realmente fazer o mesmo para ferramentas úteis. Arraste-o e solte-o dentro da posição de camuflagem aqui aos 40. Certifique-se de que está alinhado à esquerda e apague este. E rebanho leiteiro. Agora, a única coisa que me resta fazer é simplesmente copiar e colar meus textos para não te aborrecer com esses detalhes, vou pausar o vídeo aqui. E agora que eu fiz isso, eu posso voltar e explicar um pouco disso um pouco mais. Então, no momento, nós estamos apenas projetando essas páginas estavam realmente indo para trazer todas essas páginas adicionais do painel de controle. E vamos chamá-lo assim por enquanto. E você também pode ver na arquitetura do site, essas praias exatas que vamos projetar. Todas essas páginas adicionais são páginas secundárias para nosso cliente, que significa que elas são importantes, mas não são tão importantes quanto essas páginas que estamos projetando no momento. E você vai ver isso em todo o seu projeto. Então seu trabalho como designer é ver, por exemplo, se você está fazendo um redesenho de um site como nós estamos fazendo com este exemplo, seu trabalho como designer é dar ao seu cliente a solução que ele está pedindo de você. Então seu trabalho é resolver os problemas que eles estão tendo. Veja quem é o cliente-alvo em como você pode adaptar seu design, design existente e seu design que você irá projetar para suas necessidades. Mas seu trabalho também é ver todas essas páginas adicionais e perguntar-lhes, você precisa delas redesenhadas também? Porque tudo isso varia. Por exemplo, com o seu orçamento e o tempo que você vai gastar neste projeto e assim por diante. Se, na realidade, vamos fazer este site de verdade e vamos redesenhar todas essas páginas. Vai levar cerca de quatro meses para fazer isso. Então você pode imaginar o quão grande essa tarefa é. Mas com algumas páginas como mapas Ubuntu, por exemplo, como com páginas sobre e assim por diante. Tudo o que está fazendo é simplesmente usar algo que alguém já criou. Assim, por exemplo, com mapas, maioria das empresas está usando o Google Maps ou apenas os integrou ao seu design. E os desenvolvedores vão apenas usar SDK ou algum tipo de conexão fria. Para que eles possam integrar isso no site. A mesma coisa com os fóruns. Se eles estiverem usando fóruns de clientes, tudo bem. Mas a maioria das empresas, especialmente pequenas empresas, estão usando algo como um plug-in de fórum ou formulários externos ou formulários do Google e assim por diante. Então você não precisa projetar essas páginas agora para essas páginas, você pode ver claramente que estas são apenas páginas de FAQ. Então basicamente perguntas e respostas em uma forma de texto. Então você pode apenas projetar uma única página, que vai apenas repetir uma e outra vez, mas com informações diferentes, que é o trabalho do desenvolvedor para inserir todas essas informações. Mas, por exemplo, aqui com ferramentas úteis, você pode ver que eles têm calculadora de dinheiro online universal. O que basicamente significa que se você, por exemplo, quiser converter Euros em dólares americanos ou qualquer outra coisa, então você tem que ir para esta página de calculadora de dinheiro, que eles já têm. Então você não está redesenhando a dívida. As taxas de câmbio on-line atuais são, por exemplo, você não vai redesenhar isso também porque eles estão atualizando a dívida todos os dias. Eles já o têm. E ele realmente não precisa estar em sincronia com outros designs da página. Mensal ferramenta calculadora longa é a ferramenta que eles já têm. Então você não precisa redesenhar essa página também. Você tem que manter todas essas coisas em mente. Você tem que fazer tudo sozinho? Eles já têm alguma coisa desenhada? Você tem que preparar algo, e assim por diante. E de todas essas coisas vem o orçamento e vem a hora para este projeto em particular. Então vamos agora agrupar tudo isso porque eu não vou investir muito tempo nele porque ele já está terminado. E podemos chamar de perguntas comuns. E eu só vou mostrar rapidamente uma dica que você pode fazer, especialmente para design responsivo. Então aqui você pode ver que temos 12 colunas diferentes, mas você pode apenas imaginar e dívida. Quando um site está indo e responsivo, ele está reduzindo de tamanho. Então este aeroporto está ficando menor como o disco, por exemplo. E o que você pode fazer no Adobe XD é usar pilhas. E aqui está como as pilhas funcionam. Então ele automaticamente decks e que a sua pilha é assim, tão horizontal. E você também pode criar uma pilha vertical, que é uma função fantástica para ter no Adobe XD quando você está fazendo design responsivo. Então vamos dizer que eu quero posicioná-los não assim, mas um em cima do outro. Você pode simplesmente clicar aqui e ele vai reposicioná-los, mas a ordem não é corrigida momento. Então tudo que você realmente tem que fazer é simplesmente um reorganizar alguns destes. E posso acrescentar uma posição como esta. E agora, se eu reduzir o tamanho da minha arte nascida, você pode ver que ela se encaixa muito bem. Ele mantém todo o espaçamento que originalmente criamos, então tudo parece agradável e limpo. Então essas são as pilhas, e eu vou mostrar a vocês como você pode jogar com elas muito mais tarde no processo de design. Por enquanto, vamos encerrar esse design e vamos dar 100 aqui. Como este. E verificar rapidamente, fazemos ela um ou 150. Então eu vou selecionar estes dois hits 1-2-3-4-5 para aumentá-lo para 150. E vou fechar isto por aqui. Então vamos ampliar um pouco mais perto assim. Vou fechá-lo. Ele controlaria 0, e é basicamente isso. Agora que temos nossa página, em vez de copiar esta daqui para frente, vamos apenas copiar esta e simplesmente adicioná-la em dívida para uso posterior. Então é isso para este vídeo. Vejo-te na próxima, quando começarmos com a praia dos pulmões. Então, vemo-nos lá. 31. Frames no Adobe XD 4: Vamos agora continuar de onde paramos em um vídeo anterior. E vamos duplicar este. E a próxima página será para os empréstimos. Então, vamos clicar duas vezes aqui. Pulmões assim. Então, se você se lembra do wireframe Adobe, você pode ver que eu preciso junto dois. E agora temos esta mensagem aqui e temos um empréstimo em dinheiro em 30 minutos. Então vamos mudar rapidamente as mortes ou eu preciso de um empréstimo para e você pode simplesmente selecionar o empréstimo que você realmente precisa. Então nós temos uma rápida ELA e eu também vou mudar o nome aqui. Neste segundo vai ser chamado por um carro, comprar uma casa. E refinanciar a minha profundidade. Como assim. Então, mais uma vez. E isto vai ser comprar um carro, comprar uma casa. E então você financiado por dívidas. Como assim. Agora, finalmente, irei em frente e fecharei tudo isso assim. E agora o que eu preciso fazer é realmente trabalhar nesta imagem. Porque se você ver bem aqui, eu desenhei com um espaço entre esta borda esquerda e a imagem em si. Mas eu estou realmente decidido, e é aqui que ele, esses wireframes vêm a calhar porque você sempre pode ir em frente e mudá-los. Na verdade, decidi estender minha imagem até aqui e em torno desses dois cantos. Então, superior esquerdo e inferior direito. Então, antes de fazer qualquer coisa, deixe-me ir em frente e estender meus aeroportos para baixo. E eu vou mover estes três para baixo assim. Então eles não estão no meu peso como eu desenho. Na verdade, vou duplicar esta informação assim. Então aperte o controle D e mova-os para fora. Como este. Haverá realmente um separado e cresceu. Então eu vou chamar isso de que eu preciso sozinho ou sim, vamos chamá-lo eu preciso sozinho ou simplesmente empréstimos porque nós temos diferentes tipos de empréstimos, obviamente. E este texto aqui, vamos esconder isso rapidamente para que eu possa mover isso. Este texto vai ser chamado obter um dinheiro sozinho ou obter uma resposta. E vamos adicioná-lo em dívida agora. Então eu vou realmente copiar este texto para tornar a minha vida um pouco mais difícil. Então eu vou copiar essa mensagem e eu vou pular aqui mesmo. Certifique-se de que isto está centrado. R vai abrir antipatia este, certifique-se de que está centrado, botão é centrado assim, e em vez de 40, eu vou aumentar para 80 como este. E eu também tenho certeza de que eu tenho duas linhas de texto aqui em vez de quatro, como este. E agora as garotas são ouvidas. Veja por poeira ou envolva o texto. E vamos ver 41234. Então estamos agora em 80. E eu vou ligar para isso e tenho uma resposta em 20 minutos. E eu vou realmente saltar site e mudar este texto. Então eu vou basear o texto do qual eu originalmente criei mistura. Está no centro. Então, basicamente, nossos operadores estão trabalhando 24 horas por dia para entregar respostas Antonio minutos ou menos. Clique em aplicá-lo agora para ver Esquecer, se dar bem hoje e isso vai escrever aplicar agora, mas não por agora. Vamos apenas manter as coisas agradáveis e simples. Então isso vai ser uma resposta como essa. Vou tirar isso da cintura um pouco porque agora vou me mover e trabalhar na minha imagem. Então, mais uma vez, esta vai ser seção Info e desinfecção vai mudar dependendo de qual desses empréstimos o usuário realmente clica. Então, para a imagem, vamos começar com 930, com 950. Como eu disse, vou movê-lo para a borda esquerda, e isso vai ser 02020. Então isso vai ser em torno dele e isso vai ser arredondado. Agora, para este, eu realmente vou pular aqui e usar 24 parafuso. Vamos ver, posicioná-lo em 40. E eu vou deixar duas linhas de texto aqui, assim. E eu vou clicar aqui para cortá-la nessa linha. Então, dois, eu vou excluir este texto e eu realmente vou colar em alguns ícones que eu originalmente usei no design original. Então deixe-me ir em frente e selecionar esses ícones aqui. E esses ícones são basicamente a mesma coisa que todos esses outros ícones. Então eu vou mostrar a vocês como eu fiz as primeiras coisas primeiro, dinheiro em 30 minutos. Porque mais uma vez, o usuário selecionou GETER um dinheiro rápido. Então, obviamente, eles precisam ser rápidos. Obter minutos internos, posicionar isto aqui e certificar-se que está em 40 e deixe-me ver, e eles estão fora da pasta. É por isso que não se pode alinhar indevidamente. Então vamos tentar mais uma vez. Eu faço isso e 234. E eu vou mais uma vez pulando aqui, clique direito pode Klocal, me Klocal e fazer salto local de volta. Então eu vou alinhar estas três células do lago são cronômetro. Em seguida, eu estou alinhado e este aqui. Tire este do caminho. Então alinhe isso aqui, certifique-se de que está em 40 também. E então pularei para dentro, duplicarei esses dois, e terminarei posicioná-los fora daqui. E certifique-se de que eles são 40 como este. E isso vai ser uma documentação mínima como essa. E, finalmente, posicionado este em 40 também, certifique-se de uma duplicata estes posicionado para baixo e simplesmente empurrá-los de volta para baixo. Isto vai escrever completamente online. E mais tarde, nos estágios de design, vamos usar alguns ícones adicionais aqui. Quando os usuários clicam entre eles, porque quando eles clicam em biochar, ele vai aparecer como um ícone de carro e assim por diante e assim por diante. Mas como ele disse, por agora, vamos deixá-los como estão. Então vamos agrupar estes completamente online. Isto vai ser uma documentação mínima. E, finalmente, o disco em dinheiro B em 20 minutos. Finalmente, vou selecionar todos os três e ter certeza de que eles estão no centro de nossa imagem assim. E isso é basicamente para os nossos gramados. Mais uma coisa que eu posso fazer é realmente trazer essa resposta getter dentro de nossas informações. Então eu vou abrir pulmões, abrir informações, abrir uma resposta e deixá-la em posição. Tudo isso no topo porque essa resposta getter vai estar em todas as nossas seções. Então, sempre que um usuário clica em qualquer uma dessas profundidades vai, desculpe, qualquer um desses empréstimos vai mostrar isso, mas apenas um pouco de informação diferente para cada um deles. Também vou mostrar-lhe isso dentro da nossa parte de design. Então estamos em 150. O que vai fechá-lo? Porque, obviamente, vamos dizer que o usuário quer comprar uma casa. Eles não podem obter uma resposta de volta em 20 minutos porque obviamente a documentação é muito maior do que obter um dinheiro rápido longo, ou especialmente se eles querem refinanciar sua dívida. Bankteller óbvio precisa olhar para cima em todas essas informações, a fim de fornecer-lhes a resposta que eles queriam. Então é por isso que eles precisam esperar um pouco mais e eles precisam fornecer documentação adicional. Então vamos agora terminar esta página. Selecione arejamento, posicione-o aqui, certifica-se de que estamos em 150, como este clique duplo aqui. E vamos fechar a nossa página. No fundo, assim. Ele tinha o controle 0 e é basicamente isso para esta página é que você pode ver que é muito mais fácil agora trabalhar com todos esses elementos, especialmente porque temos todos esses elementos no topo já terminados. Temos todos esses elementos na parte inferior já terminados. Então, basicamente, estamos apenas editando parte do dissidente de nossas páginas. Então é basicamente isso para aquele. No próximo, vamos projetar a seção de cartões. Então, vemo-nos lá. 32. Frames no Adobe XD 5: Bem, agora é mais vento e projetar nossa tela atual e uma página de carrinho. Então eu vou apertar o controle D para lubrificar este aqui e chamá-lo de cartões assim. E mais uma vez, vamos rapidamente dar aulas em nosso wireframe. Você pode ver que esta seção é basicamente um círculo interno cartão com o título e três linhas de texto. Abaixo disso temos cartões de crédito. Então, com dois cartões, ele está se repetindo ou os cartões de débito criar o seu próprio é basicamente nesta seção copiado aqui. E finalmente, temos uma seção que é bastante semelhante, então podemos realmente usar a da página inicial em si. Então a primeira coisa que eu vou fazer é estender minha prancha para baixo porque ele vai ser muito maior, vai ocupar muito mais espaço do que todos esses outros. Eu também vou mover essas seções para baixo. Então selecione toda a tecla Shift, mova-os para baixo. E o que eu gostaria de fazer agora é realmente usar esta seção talvez. Então eu posso movê-lo para fora e obter uma resposta. Posso movê-lo até aqui. E vamos ver. Posso posicioná-lo aqui tão alinhado com este texto, que vou esconder os pulmões. E não precisamos de um botão aqui, mas vamos precisar dele mais tarde. Então vou escondê-lo e talvez até posicioná-lo para que não o confundamos. Ou vamos ver, precisamos do botão morto todo o caminho para baixo. Então talvez isso seja, e isso é o que vamos fazer na verdade. Então posicioná-lo todo o caminho para baixo e deixá-lo lá por enquanto. Agora aqui vou escrever em seu perfeito idealmente Campaniano. E realmente saltar para dentro, copiar e colar o texto do meu design original. Então você pode ver como isso se parece. E eu vou pular em frente, desagrupar este texto e só por agora, mover isso todo o caminho para baixo. E para a seção longa, eu vou realmente ir em frente e excluir edição. Então, se eu levá-lo de volta para aqui, você pode ver que nós temos um círculo e nós temos uma corrente dentro desse círculo. Não vamos desenhar um cartão por enquanto. Então, posição espinhosa assim. E vamos ver, talvez eu possa até dar um pouco mais de espaçamento. Vamos deixar como está. Primeiro, vou criar um círculo. Eu estou segurando minha tecla shift enquanto eu estou fazendo isso, e eu estou simplesmente usando essa ferramenta de elipse para criar meu círculo. Seis sessenta, seis sessenta serão dimensões. E eu vou posicioná-lo no centro e certificar-me de que está em 100 de nossos textos como este. Em seguida, vou chamá-lo de círculo ou um círculo GRANDE. Porque vai estar no fundo do nosso cartão. Para esse círculo, vamos aplicar nesta análise de cores de cena para remover a borda. E agora, quando eu criar meu cartão, eu vou realmente usar nesta cor. Para indicar que esta é a nossa corrente. Então vamos começar com nossos cartões reduz nossa posição atual e apenas dentro do nosso círculo. E vamos ver para o cartão em si, podemos usar algo como 776, semana cinco, ou nove, ou 510 como você quiser. E espero que a posição esteja no centro do nosso círculo assim e assim, também posso selecionar os dois, clique aqui do que aqui, certifique-se de que eles estão em um círculo perfeito. Agora, para o cartão em si, como ele disse, vamos deixá-lo como e dívida. E vamos limpá-lo aos 15, por exemplo, em todos os lados, apenas para indicar que este é o nosso carrinho. Vamos agora ir em frente e selecionar tudo isso. Ele tinha controle g chamado este companheiro perfeito e alívio porque é o que é bem aqui. Próximo para o cartão. Se eu levá-lo de volta mais uma vez, podemos ver que temos em toda esta seção, em seguida um texto atual e título três linhas de texto e aplicado agora, então nós podemos realmente usar isso que nós já criamos para ele antes aqui. Então eu posso apertar o controle C e então eu posso pular bem aqui. Ele tinha o controle V posicionando-se por aqui e mova isso para baixo. Agora, o que eu realmente preciso é deste texto e assim título e subtítulo. Então aperte o controle C, controle V. E vamos ver, talvez eu possa posicioná-lo em 100 desta vez em vez de 150. Como agora. E vamos chamar isto de cartões de crédito assim. E na verdade mais uma vez eu vou copiar e colar meu texto original e eu vou movê-lo apenas aqui. Agora, a próxima coisa que vou fazer é mover isto para 80. Então 12345678. E agora vamos em frente e criar nosso cartão de conteúdo. Então, para o nosso cartão de conteúdo, o que realmente vamos fazer, vai ser bastante semelhante a este, na verdade. Então, sim, vamos realmente usar este aqui. Porque se eu te levar de volta em vez do ícone, onde está? Aqui estão eles. Em vez do ícone, vamos ter este cartão, ilustração ou um gráfico ou alavanca. Então eu vou remover este baseado neste aqui. E mais uma vez, certifique-se de que estamos em 80. Então 1234. Posicione-o aqui. E vamos ver, porque temos nossa linha de grade de 12, podemos realmente estender esse fundo para ser de seis em peso. Assim, agora temos muito mais espaço para brincar. Então este primeiro, vou chamá-lo de Visa. Cartões de crédito como este. E vamos ver, talvez eu possa estender isso. Então, para atirar, eu posso ter duas linhas de texto. Posso cortá-la assim. Em vez de ferramenta, podemos ter três linhas de texto que vou colar nos meus textos originais. E vamos ver. Podemos estar a 60 a partir daqui. Então vamos abaixar isso só um pouquinho. Então, só para que possamos ter um pouco mais de espaço para brincar com ele. Podemos posicionar isso em 40, então assim. E agora vamos saltar para dentro e criar o nosso carrinho. Então nós não vamos realmente projetar todo o gráfico. Agora. Na verdade, vou usar os fundos do carro. Você controlaria um D. E eu vou chamar isso de curadoria atual como este. E para suas dimensões, vamos usar 300 largura um 97, por exemplo. Então algo agradável e pequeno. E vamos usar essa cor mais escura. E vamos ver, talvez possamos deixá-lo lá. Não tenho certeza se veria. Então 1234. E vamos alinhar a edição aqui. Então vamos ver. Para este conteúdo, talvez eu possa deixá-lo assim. Eu só estou tentando descobrir tudo, como tudo vai ser realmente parecido. Então isso pode ser com 40, isso pode ser em 60. Vamos ver, isso pode ser aos 40. E, finalmente, isso pode ser aos 40 também. Acho que funciona bem por enquanto. Eu só vou realmente aumentar a altura desta caminhada de fundo para que eu possa ter um pouco mais de espaço de cinco 46 para realmente 567, assim. Só para que me dê um pouco mais de espaço. Vou alinhá-lo com a borda superior do meu cartão, aperte shift 1234. E agora vamos ver o que isso nos dá. Então estamos em 40, estamos em 40 aqui, estamos em 40, estamos em 60 e estamos em 20 aqui. E então vamos ver, talvez possamos realmente mover isso. Vamos ver o que eu posso fazer porque eu preciso de um pouco mais de espaço e para baixo, eu posso realmente empurrar disco para baixo apenas um pouco. Então vamos ver 234. Então, assim. E lá temos. Temos o nosso cartão de conteúdo. Vamos brincar com ele, obviamente um pouco mais tarde. Então vamos chamar isso de moral atual. Veja, sim, informação atual. Acho que funciona bem. E vamos ver. Agora o que podemos fazer. Podemos mover isso para um DT, então 12345678 para baixo assim. E eu posso manter o controle e D para duplicá-lo, posicioná-lo aqui. E isto vai ser cartões de crédito MasterCard como este. E eu estou realmente indo para copiar e colar minhas informações aqui bem assim. Então, em vez de cartões de crédito Visa pessoais, temos cartões de crédito MasterCard pessoais. Vou mover esta informação para baixo. Vou agrupar tudo isso, chamar de cartões de crédito, assim. E finalmente, eu vou ter exatamente a mesma seção, mas chamado cartões de débito. Então aperte o controle D nesta seção inteira, posicione-o para baixo. Vou ligar para este cartão de débito, obviamente. Assim, vou chamar isso de cartões de débito, assim. E eu estou realmente indo para copiar e colar o texto daqui assim. Então resultado cartões de débito em vez de cartões de crédito Rostow, guardião para informações de cartão. Então isso vai ser o mesmo. Em vez de cartões cinzentos, vamos realmente dar-lhe um nome de cartões de débito. Vou selecionar este texto, copiá-lo e selecionar a palavra crédito, substituí-lo por um débito. E finalmente, eu vou pegar meu texto daqui e fazer o mesmo para isso e colá-lo. Basicamente, é exatamente o mesmo texto que o cliente enviou. E eu só troquei cartões de crédito, cartões de débito, e isso foi basicamente tudo o que eu fiz lá. Agora que essa seção está concluída, basicamente, temos grandes guardas, temos cartões de débito. Vamos reposicioná-lo rapidamente. Então nós vamos ter que ser em 100 como é. E eu vou realmente duplicar esta seção. Então aperte o Controle C ou uma Dee controlada apressada, quero duplicá-lo, posicioná-lo para baixo annelids. A posição da ICANN é estar de 100 mais uma vez, assim. Então vou chamá-lo de criar o seu próprio. Porque esta seção, se eu te levar de volta para aqui, você pode ver criar o seu próprio. Temos cartão e temos criar seus slides vai descrever como você pode criar seu próprio cartão e, em seguida, botão que diz criar o seu. E é por isso que colamos este botão aqui. Então vamos trazê-lo para dentro desta seção. E vamos ver, talvez eu possa posicioná-lo em uma centena, como esta, 100. E é basicamente isso. Agora, para esta seção, vou simplesmente copiar e colar o texto em. Então vamos ver, podemos dar 100 com todas essas formas assim. E como você pode ver aqui, você pode criar um cartão personalizado e adicionar seu toque pessoal a ele, escolher entre cores, formas e até imagens. Então estes são basicamente todos os elementos que os usuários podem criar e se adaptar. Criar o seu próprio. E vai mudar o nome para criar o seu próprio assim. E eu vou movê-lo logo abaixo dos meus cartões de débito. Então, somos cartões cinza, cartões de débito e criar o seu próprio e no topo perfeito comparação diária. Finalmente, precisamos desta seção aqui com a imagem. Quando está aqui é a imagem esquerda do solo e vai ser cartões de presente. Então vamos encontrar essa seção aqui é, Controlo-C, Controlo-V aqui. Agora vamos ver essa seção. Podemos, por exemplo, posicionar a 150. Então vamos ver assim e simplesmente posicioná-lo para a esquerda. Agora, vamos dar-lhe um nome de vales-presente. E vamos mantê-lo assim no momento. Então nome do serviço, vamos chamá-lo de cartões de presente porque sabemos o que é um pouco acima de perguntas comuns. E finalmente, todas essas seções, vamos selecioná-las e movê-las para 150, assim. Finalmente, vou arredondar nosso porto aqui e fechá-lo aqui e ver se está correto. Ou seja, você controlaria S ou Command S no Mac para salvar. E é basicamente isso. Para esta página, você pode ver como é simples e como alguns desses elementos estão se repetindo. Não estou usando propositadamente esses elementos personalizados e esses componentes e assim por diante aqui dentro de nossos wireframes, porque esse estágio de wireframe ainda é sobre ideias quando o cliente confirma suas ideias. E eu vou mostrar mais tarde como você pode compartilhar esses wireframes com seu cliente. Mas primeiro as coisas, vamos rapidamente passar por todas essas páginas. Vou mostrar como podemos projetar todos eles. E então eu vou mostrar como você pode compartilhá-los com seus clientes para obter feedback. Você também pode exportá-los como imagens, enviá-lo assim. Mas por que você faria isso quando você tem essa ótima opção de compartilhá-los como um link? Assim, o cliente pode realmente deixar o seu feedback adequado a partir de baixo. Você pode aplicar esse feedback ao experimento. E então você pode começar criando esses componentes. Tudo isso são apenas ideias. Então isso foi apenas para mostrar a si mesmo como todas essas idéias podem ser transferidas e dois pedaços de papel. Então, a partir daqui, você está criando algo um pouco mais realista. Você já está usando alguns desses elementos que são basicamente predeterminados e, e eles estão chegando basicamente assim. Então, podemos simplesmente seguir em frente com o design, especialmente aqui com a seção de navegação e herói e assim por diante. Então, basicamente, é isso. Agora você pode compartilhar esses wireframes. Quando você tem algum feedback de seu cliente, você pode voltar para ele e, em seguida, você pode começar a trabalhar em um design acabado. Então é isso para este vídeo, e eu vou te ver no próximo. 33. Frames no Adobe XD 6: Vamos agora continuar com a página de investimento. E se aproximarmos um pouco mais, você pode ver que investir é basicamente muito semelhante a todas essas outras páginas. Só tem este padrão aqui. Então temos imagem texto título e chamada para o botão de ação aqui. E nós temos dois deles, o que basicamente significa que eles são seis em sagacidade. Então, em vez de copiar este, vamos saltar dentro n, Por exemplo, copiou este. Então eu vou bater o controle D está disposto a posicionar dois bem aqui. E chamaremos isso de investir. Como este. Eu também vou saltar para dentro, estender isso para baixo, mover todo esse infinito para baixo apenas para que tenhamos um pouco mais de espaço para brincar. Então, em vez de abrir sua conta, vou chamar de “eu quero investir”. E agora eu deveria ir em frente e copiar outra página, mas importa. Eu vou realmente usar esta informação que eu já tenho. Então eu vou simplesmente mover isso para baixo, aperte o controle D, porque eu preciso de uma mensagem bem aqui. E eu vou posicionar esse texto. Vamos ver talvez 100 da página para cima. Então vamos ver 12345678910 assim. E então posicionarei isso como outros. Então 100 largura que vamos ver. Sim, acho que funciona bem. E vamos mudar o nome de todos estes. Então, a educação é a nossa primeira. E vamos renomeá-lo aqui também. E então o segundo é imobiliário. Assim, mais uma vez, os usuários podem escolher no que querem investir. E dependendo do que o clique, esta informação vai mudar obviamente para corresponder à sua escolha. Segurança familiar. Vem a seguir. Eu acidentalmente cliquei para baixo e este está bem. Então, segurança familiar. E o último aqui é uma aposentadoria. Isso e aquilo é basicamente isso. Então, se eles escolheram este primeiro, ele vai ser escrito em um futuro mais brilhante como este. E nós realmente vamos movê-lo para baixo para a pasta de informações no topo. Então o que vamos fazer é realmente criar essas duas seções. Então, na verdade, vou mudar isto para cá. E eu realmente vou ver assim 246, nós já estamos na largura correta apenas para a altura de nossas imagens. Então vamos posicioná-los em 500. E este texto é muito grande. Não precisa ser tão grande. Então vamos ver, podemos brincar com 24. Então vá aqui, 24 em negrito. Este é 24, irregular. E vamos estendê-lo para caber até aqui. E vamos ver, podemos ter três linhas de texto como esta e cortá-la à altura. E finalmente, podemos posicionar o botão para não ser 40, mas 60. Vamos primeiro trazer parece estar em 40 e isso pode ser em 60, assim. Finalmente, o texto em si pode estar em, digamos, 60. E só para que possamos nós mesmos um pouco mais de espaço. Então vamos ver algo assim. E acho que funciona bem. Agora, eu vou saltar para dentro e realmente copiar e colar meu texto original. Eu incluí dentro do nosso, do meu design. E isso vai escrever aprender mais, então tudo bem. Próximo. Então eu vou realmente agrupar esses G controlados HD e chamar este novo fundo de educação banco porque é o que ele é aqui mesmo. E uma última coisa que quero fazer é ver. Posso conseguir 20 em todas as esquinas como esta. Assim como eu tive um, apenas um pouco de uma diferenciação entre todas as minhas imagens em nosso design. Então este vai ser chamado Ute para fontes futuras brilhantes. E eu vou fazer a mesma coisa. Então eu estou realmente indo para copiar e colar texto no meu design original. E esta é basicamente a informação que você vai receber de seu cliente, especialmente se eles têm todos os serviços. Então você pode realmente brincar com eles e reposicioná-los como quiser. Agora, isso vai ser chamado, eu quero investir em ou até melhores investimentos. Porque vamos ter todos esses investimentos diferentes. Agora aqui no meio, se eu ampliar um pouco mais perto, você pode ver que temos esta seção com a imagem indo todo o caminho para a esquerda, futuro seguro e aprender mais botão. Nós temos essa imagem é esta aqui. Então controle C, controle V, médico adere. E logo acima das perguntas comuns, vamos ver como proteger o seu futuro. E nós vamos chamar essa seção como essa notas. E uma última coisa é posicionar e vender sua posição para estar em 150. Como este. E finalmente, vamos simplesmente selecionar esses, posicioná-los para estar em 150 também. Clique duas vezes aqui e reorganizando nossa altura do tabuleiro. Basta cortá-lo assim, e é basicamente isso. Essa é a nossa praia terminada. Agora, se seu cliente perguntar por que algumas dessas imagens são um pouco mais escuras que essas outras. Basta dizer-lhes que essas são as imagens. Você só queria trazer um pouco de foco para partes específicas do seu design. Por exemplo, temos descartar com um cartão de crédito dentro. Então você queria trazer para se concentrar no carro da dívida, por exemplo. E você não quer que eles se esforcem muito. Eles só precisam entender que essas são as imagens e que é basicamente isso para que possamos seguir em frente com esse design. Portanto, temos apenas uma página para projetar para o nosso site antes de passarmos para login e cadastrar telas. Então, vemo-nos na próxima. 34. Frames no Adobe XD 7: Então, a próxima página e última para o nosso site é a digital. E se aproximarmos um pouco mais, você pode ver que basicamente reabilitação uma seção que está se repetindo todo o caminho para baixo. Então, já temos esta seção. Vamos apenas utilizá-lo para estes serviços. Vamos substituir rapidamente alguns desses títulos. E é basicamente isso. Podemos encerrar o dia. Então podemos usar qualquer um desses. Eu posso usar este controle de batida selecionado D, duplicá-lo. E eu vou chamar isso de digital, assim. E finalmente, eu vou simplesmente mover isso para fora, excluir isso, e aqui está nossa seção aqui. Então o que podemos fazer com isso é que podemos posicioná-lo assim. E talvez eu possa me mudar a 100, assim. E deixe-me verificar rapidamente. Então eu posso fazer este B 600, por exemplo, apenas para diferenciá-lo um pouco. E então eu posso selecionar estes e movê-los para o centro. Certifique-se de que está em 100. - É. E o primeiro é, você pode ver, deixe-me rolar para cima. Temos E bancário e bancário, códigos QR, pagamento e assistente virtual. Então vamos fazer isso. Mas antes de o fazermos, vou mostrar-vos pilhas mais uma vez. Então eles vão ser muito úteis aqui. Basta selecionar sua pilha. É basicamente isso. Você já fez isso. Agora, eu vou mudar isso para serviços bancários assim. E eu vou ter 150 espaçamento entre todos estes. Então você pode chamar isso em quatro ou texto ou mal quer. Como as pilhas estão criando essas pastas adicionais, você pode simplesmente renomeá-la ou deixá-la como está. Então eu vou renomeá-lo aqui. E, os serviços bancários atingiram o controle D, posicionem-no 150 para baixo assim. E eu vou posicioná-lo aqui. E eu vou chamar isso de um m bancário. Então um é E, o outro é M. Eu perco. E você está auditando que você precisa fazer com suas pilhas é simplesmente selecionar sua imagem e posicioná-la para decidir. E, finalmente, mova isto para alinhar a nossa escrita. Como. Então. É basicamente isso. Você pode simplesmente trocá-los. Então vamos posição não, 1-2-3-4-5. Basicamente, a única coisa que fizemos com este foi trocar de lugar entre eles. E mais uma vez, isso vai ser muito útil quando você chegar ao design responsivo, porque você pode simplesmente clicar aqui vai posicioná-lo para baixo, e isso é basicamente para o seu design. Então deixe-me verificar minhas margens. Outra vez, tudo parece bem. Então E M Banking e eu vamos fazer uma duplicata destes dois. Então aperte o controle D e posicione-os para baixo 100. Então 150 assim. E eu vou estender meu aeroporto ainda mais. Então estes posicioná-los para baixo apenas para me dar um pouco mais de espaço. E vamos ver, podemos posicionar isto para 150 e podemos fechá-lo aqui bem rápido. Então você pode ver assim que você começa a projetar, assim que você tem alguns elementos, assim que os elementos estão se repetindo, é muito mais fácil fazer todas essas mudanças e adaptar sua mente, aplicá-los ao seu design. Então isso vai ser pagamentos de código QR como este. Vou posicioná-lo aqui em baixo. E finalmente, vou posicionar isto aqui em baixo, organizei isto aqui. Então vamos correr. Então temos copagamentos QR bancários e bancários. E este último vai ser assistente virtual. Vamos mudar o nome aqui também. E uma coisa legal sobre pilhas. Se eu abrir este aqui, você pode ver o texto porque ele está sob vivido vem para o topo. E aqui porque o texto está à direita, ele vem originalmente na parte inferior. Então, o Adobe XD já os organizou de uma maneira agradável e limpa, porque organizamos a edição aqui. Isso é basicamente tudo para a nossa Pequim. Basta pressionar o controle S para salvá-lo. E assim, terminamos nossos wireframes do site. E a única coisa que nos resta fazer agora é projetar este login e inscrever-se telas. Vou mostrar-te a diferença entre eles. E por último, vamos projetar esta página do painel antes passar para o design real do site, onde vamos realmente criar um novo fluxo. Então aqui temos um fluxo de wireframes e, em seguida, vamos ter em fluxo de design. Então é isso para este vídeo. E eu vou te ver na próxima, onde vamos abordar telas de login e inscrição. Então, vemo-nos lá. 35. Frames no Adobe XD 8: Nesta lição, vamos continuar de onde paramos e vamos criar essa tela de login e inscrição. Então vamos começar. Vou fazer as primeiras coisas para nós, duplicar este, chamá-lo de login. E na verdade vou apagar tudo o que está localizado dentro. Então eu posso ter um vazio nosso porto. E então eu vou cortá-lo em altura para tentar AT assim. E agora posso começar com o meu projeto. Primeiro, vou criar minha imagem usando minha ferramenta de retângulo. Eu vou usar essa cor, então o mesmo que fizemos anteriormente. E para a nossa imagem, vou usar a altura de 1080. Então vai de cima para baixo, assim. E para a largura, vamos usar 708, por exemplo. Então, como podem ver, vamos levar cinco colunas do Andy no espaço. Então agora vamos usar este texto e vamos posicionar aqui, torná-lo alinhado à esquerda. E, por exemplo, diga Bem-vindo de volta. E como esta é uma tela de login, você quer apresentar alguém de volta a esta página. Vamos ver, podemos ter um espaçamento de um, então temos uma imagem, temos uma coluna vazia, e então podemos trazê-la de volta e dizer, bem-vindos de volta. Vou posicionar isto para baixo. Vou me certificar que são 24. E podemos simplesmente escrever em um log de volta para sua conta assim. E vamos ver, podemos fazer com que isto seja aos 40. Como este. Bem posicionado aqui só para me dar um pouco mais de espaço. E agora eu posso duplicar este, posicioná-lo para baixo, voltar aqui. E eu vou escrever isso para ser e-mail e duplicá-lo e digitar seu e-mail. Ou vamos usar seu e-mail em email.com apenas para que possamos ser um pouco mais precisos e um pouco mais específicos com este. Agora vamos criar nosso campo de entrada, e ele vai ser seis colunas de largura. Vamos dar-lhe um nome, campo de entrada. E assim. E vamos ver, podemos dar a mesma cor que fizemos com a nossa imagem. Podemos posicioná-lo e voltar atrás do nosso e-mail. E vamos ver, para o nosso e-mail, podemos fazer com que sejam 24 mortes regulares. - Tudo bem. Eu só quero mudar sua cor. Não vamos deixar como está. Então vamos posicioná-lo no centro. Mas antes de o fazermos, vamos dar uma altura a isto. Então o campo de entrada deve estar em 70, assim. E agora vamos agrupar esses dois, posicioná-lo no centro. Vamos ver. Isso parece bem. E vamos ver, primeiro as coisas, eu posso dar a isso uma coronária é de dez, remover nossa fronteira e isso parece muito melhor. E agora, finalmente, posso posicioná-lo para 40, então 1234. E agora isso vai nos dar um pouco mais de espaço. Então deixe-me esconder minhas colunas para ver como isso se parece. Acho que funciona muito bem. Sim. Então vamos organizar isso um pouco. Então este é o nosso campo de e-mail. Ou não, vamos, vamos agrupar. G controlado, qualidade, controle de e-mail, D, posição em analistas para baixo. C, posso posicioná-lo para ser 40 e chamar o fundo da senha. Mude isto. Assim como. E agora eu posso saltar para dentro daqui e simplesmente escrever um turno dez, por exemplo, oito vezes ou o que for. E então eu posso mudar isso para 48, por exemplo. E agora posso voltar e agrupar estes dois e certificar-me de que isto está no centro. Não sei por que está cortando assim. Então vamos ver se podemos falar um pouco disso. Eu posso. Só preciso organizar isso para estar no centro assim. Então, obviamente, este é apenas um exemplo para mostrar aos seus clientes que esta será realmente nossa senha de algum tipo. Você também pode usar pontos se você quiser, mas eu acho que as estrelas vão funcionar muito bem. Agora que já fizemos isso. Agora podemos organizar esses dois para que eu possa ter certeza que eles estão em 80, apenas para nos dar um pouco mais de espaço entre esses dois. Agora, eu posso duplicar esta posição de texto e aqui, e vamos ver, eu posso posicioná-lo para ser em 40, assim. Posicione-o e apenas um pouco para baixo. E eu vou escrever, não tenho uma conta. Crie um aqui. E porque isto vai ser um elo, vou perder esta cor. Assim, as pessoas podem saber RK, eu posso alternar entre login e inscrever-se Mississippi clicando bem ali. Finalmente, vou duplicar isto mais uma vez. Então aperte o controle D e escrevendo esqueceu a senha. interrogação, use este colar agora, certifique-se de que está alinhado e preciso de um botão. Então eu vou usar este aqui. Aperte o Controle C, feche tudo isso aqui, controle V, e eu trarei minha grade de volta mais uma vez, certifique-se de que isso está centralizado. E vamos ver, podemos posicioná-lo em 80. Isso é bom. Posição aqui e uma linha aqui. E certifique-se de que estes dois estão centrados. E é basicamente isso. Agora temos todo o nosso grupo de conteúdo antigo. Basta clicar aqui para se certificar de que está na posição central, logo abaixo da nossa imagem. E mais uma vez, organize tudo mais uma vez. Então temos aprender mais botão vai funcionar para baixo. Voltaremos e-mail, senha, esquecemos a senha. Isto vai acontecer aqui, e é basicamente isso para a nossa tela de login. Agora, para eu me inscrever, eu vou simplesmente duplicar é. Então aperte o controle D na nossa prancha. Isto vai ser inscrito, assim. E nós vamos, em vez de bem-vindos de volta, escrever bem-vindos dois novos bancos, porque isso é para os usuários que estão visitando esta página pela primeira vez. Cria uma conta e comece hoje mesmo. Assim como. Agora vamos deixar estes dois. Nós vamos escrever aqui, eu já sou um membro. Faça login aqui. Mais uma vez, este é um link. Então, quando eles clicarem lá, vai levá-los até aqui. Quando clicarem aqui, será preciso que se atrevam a sugerir alternar entre estes dois. E como não há palavrões, eles estão criando uma conta que não precisamos nesta. Então, finalmente, o que precisamos é o primeiro nome e sobrenome. Eles vão ter o peso de três. Então vamos nos dar um pouco mais de espaço. Então eu vou posicionar isso aqui. Vou posicionar esse cara bem aqui. Vou duplicar este. Certifica-te de que estamos a 40. Vou chamar isso de Sobrenome. Aperte o controle D mais uma vez. Isto vai ser first_name. Como este. Vou esconder este e este vai ser o nome. E vai ser a largura de três. Então vamos ver 123. E vamos dar-lhe o nome de Jacob, por exemplo. Faz. E finalmente, empurre-o de volta para aqui. Primeiro nome, a mesma coisa. Então vamos dar-lhe três e quando dar-lhe o nome de Michael. Por exemplo, FirstName. E é basicamente isso. Nós completamos isso. Vamos trazer isso de volta para 80 anos que era. E vamos agrupar tudo isso mais uma vez. Ele controlaria o G, certificava-se de que está no centro assim. Então temos exatamente o mesmo espaçamento de antes. Se você acha que é um pouco demais lá em cima, você pode reduzir o espaçamento. Você pode reduzir o espaçamento na parte inferior aqui. Mas acho que esse layout funciona muito bem. Apenas certifique-se de que está centrado, desagrupe, e é basicamente isso. Então estas são as nossas duas páginas. Obviamente, você pode alternar essas imagens entre si. Você pode ter uma imagem aqui para o login, uma para a inscrição, mas tudo depende de você. No meu projeto, no meu caso, vou deixá-los como estão. Então isso é basicamente para o site de frente B, apenas no próximo e último vídeo desta série wireframe no Adobe XD, vamos criar esta tela de painel. Nós vamos criar apenas um dentro de nossa sessão de wireframing. Dentro da seção de design, estamos obviamente indo para criar todas essas páginas adicionais. E eu vou mostrar a vocês qual é a diferença entre o layout, entre as grades e assim por diante. Então eu vou te ver no próximo vídeo quando vamos começar com isso. 36. Frames no Adobe XD 9: Neste último vídeo da seção wireframing no Adobe XD, vamos terminá-lo criando nossa tela de painel. Se eu ampliar um pouco, você pode ver que a principal diferença entre a tela do painel e todas as outras páginas do site é a navegação do painel está aqui à esquerda, enquanto todo o conteúdo está à direita. Portanto, temos que criar todas essas colunas para que nosso conteúdo fique à direita. E essa margem deve ser maior para acomodar neste menu. Para explicar do que estou falando, se saltarmos aqui para a tela de inscrição, você pode ver que nossas margens esquerda e direita são basicamente as mesmas. E todas as nossas colunas e calhas estão bem aqui no centro. Para o nosso painel. Vamos mudar tudo isso para a direita e vamos liberar este espaço à esquerda para acomodar todos os nossos itens de navegação. Então, para começar, vou simplesmente duplicar esta página e movê-la um pouco. Assim como. Então eu vou chamá-lo de Dashboard. E vou saltar para o meu protótipo. Clique aqui para criar um novo fluxo. E eu vou chamar isso de painéis de fluxo. Como este. Vou voltar ao meu design e agora vocês podem ver que temos wireframes e temos painel. Agora podemos chamar este site wireframes e site de painel. Mas acho que você e o cliente serão capazes de entender facilmente. Agora vou me dar um pouco mais de espaço depois. E porque se você ver quando diminuirmos o zoom, nós temos todo esse agrupamento basicamente. Então a melhor e mais fácil coisa a fazer é simplesmente mover estes para cima assim. E agora, quando você ampliar, como você pode ver, temos muito mais espaço para ele se reproduzir. Vou apertar o controle S para salvar meu arquivo. E eu vou então saltar para dentro do meu painel e começar a trabalhar nas minhas grades. Então, primeiro as coisas, vou remover todos esses elementos porque vamos voltar a esses elementos um pouco mais tarde. Mas antes disso, eu só quero criar rapidamente minhas colunas e migrar para parecer um pouco diferente. Então, para começar, o que eu quero fazer é usar 12 colunas, então isso vai ser o mesmo. Vou usar 49. E você vai ver o Adobe XD mudando e agindo como louco aqui. Porque assim que você começar a brincar com isso, vai te dar valores diferentes. Então o que aqui na margem direita, eu vou usar 20. Vou usar uma grande margem à esquerda. Então, para 01. Então isso vai ser 12 e isso vai ser 49, isso vai ser 80, e disciplina será 2401. Então, o que fizemos aqui, como podem ver, temos à direita, apenas um espaço de 20. Podemos aumentar isso para o espaço de 40. Se você acha que é apenas um pouco pequeno demais e muito estreito, enquanto aqui temos 401, então 401 pixels para acomodar nossa navegação. Então, se eu levá-lo de volta para aqui, você pode ver que nós temos este espaço para o nosso navegador e nós temos este outro espaço para o conteúdo dentro. Então vamos pular bem aqui. E a primeira coisa que vou fazer aqui é ir em frente e criar minha navegação superior. Então, para fazer isso, eu vou simplesmente usar meu retângulo. Vou para toda a largura. Então 19-21. Posicione a parte superior esquerda. Então Pinot e eu teremos uma cor. Vamos ver, talvez eu possa ter cor branca, então vou deixá-lo lá para a altura. Vamos com 1-20, assim. Vamos com uma pequena sombra porque eu quero separá-la deste fundo. Então vamos com 1020 e depois 20 mais uma vez. E vamos ver, talvez possamos ir com algo muito menor do que isso, então talvez cinco. Então é agradável e leve. Então, se eu clicar aqui para elevar minhas colunas, você pode ver claramente que é agradável e leve. Não é intrusivo de forma alguma. Vamos também adicionar um desfoque de fundo. Então deixe-me clicar rapidamente aqui, borrão de fundo. E para esses valores, vamos ver, talvez eu possa ter algo um pouco menor. Então, 20. Podemos ir com 1550 para a obesidade. Então agora, basicamente, você quase não consegue ver. Mas ainda está lá e ainda está com bom aspecto. Agora, para a nossa cor de fundo do nosso painel, vou simplesmente voltar e clicar aqui. Então agora você pode ver em dívida, cor, cor fundo da própria placa de arte para o painel é essa cor em vez de cor branca. O que isso vai fazer, vai nos permitir separar todos esses elementos que serão brancos na página. E este estreito principal aqui no topo. E vai ficar de pé basicamente muito melhor. E agora você pode ver essa sombra funcionando ainda bem antes. Então a próxima coisa que eu vou fazer é realmente copiar alguns micros que eu usei anteriormente. E eu vou colá-los aqui mesmo. E como você pode ver, eles estão todos ligados. Então eu vou em frente e clique com o botão direito do mouse para tornar local, torná-los locais em todos eles. E mais uma vez, o benefício disso é, em vez de atualizá-los no meu arquivo principal, eu posso simplesmente ir em frente e atualizá-los aqui. O Adobe XD vai reconhecê-los, como eu realmente atualizá-los aqui. Então isso vai ser muito mais fácil para nós trabalharmos. Agora, vamos em frente e encomendá-los. Então eu vou posicioná-los assim. E se saltarmos para trás, você pode ver que temos painel, transações de conta, pulmões, cartões , investimentos, digital e logout. Então vamos em frente e encomendá-los assim. Vamos primeiro usar algum texto. Então vamos usar um texto Poppins regular, e isso parece bem. E vamos ver, eu posso digitar no painel. Certifique-se de que vai pela esquerda. Certifique-se de que está no centro do nosso ícone. E você também pode selecionar ambos. Basta clicar aqui. E vamos em frente e organizá-los um pouco. Sólido C, talvez eu possa posicioná-lo para ser em 30. Então 123. Vamos com 44 agora. Vamos assim. Certifique-se de que eles estão no centro. Eles são. E eu vou simplesmente duplicar isso algumas vezes. Então isso vai ser conta. Isto vai ser apenas transações cartões. Então eu estou apenas usando o controle em D para duplicá-lo em digital. E, finalmente, vamos posicionar o logout aqui na parte inferior. Então a próxima coisa é posicionar esses ícones ao lado de nossos itens. Solver à esquerda alinhe-os assim. Então vou posicionar o disco para estar bem aqui. E mais uma vez, eu vou te dar todos esses ícones, mas se você quiser pacotes maiores para usá-los em projetos profissionais com seus clientes e não apenas para aprender como esses são fornecidos para você, então você será capaz de comprá-los se você assim escolher. E todos esses pacotes de ícones, vou mostrar isso em um vídeo futuro só para ver como eles são enormes. Então decidir compacto, por exemplo, é ícones grandes. Existem 2400 ícones diferentes incluídos no interior. Eles estão vindo em vários formatos de arquivo para que você possa obtê-los em formatos de arquivo do Adobe Illustrator, formato de arquivo catch, Photoshop, PNG e assim por diante e assim por diante. Eu acho que eles têm EPS também. Portanto, há que nós temos digital. Vamos selecionar esses dois. Vamos ver, selecione estes dois. Tudo parece bom. E finalmente temos este logout posicionado bem aqui. Agora o que eu posso realmente fazer é usar esses. Certifique-se de que eles estão alinhados à esquerda, assim. E vamos ver, talvez eu possa posicioná-los com C pode ser 40. Então faça assim. Shift 1234, assim. E então eu posso selecionar todo o nosso texto, certificar-me de que está alinhado à esquerda. É. Posso empurrá-lo aqui. Shift 123, por exemplo. Acho que vai funcionar muito bem. E agora vamos em frente e organizá-los porque você pode ver que esses itens estão acinzentados. Então, temos esta coleira e temos aqui mesmo. Então o que eu realmente vou fazer é selecionar todo o meu texto. Clique aqui para torná-lo desta cor. E este primeiro, eu vou usar esta cor porque essa é a cor do meu aeroporto, que indica que este está selecionado. Agora a próxima coisa que vou criar é o seletor. Então, sempre que um usuário clica em alguns desses itens, seletor vai mostrar por trás do item selecionado de violentamente. Então, para fazer isso, eu vou simplesmente usar minha ferramenta de retângulo. Vou posicioná-lo aqui. Vou certificar-me de que é branco. É. E para o tamanho, vamos ver, 302, largura, 80, assim. Vou chamá-lo de seletor. Assim como. Vou posicionar tudo para trás. Este é o nosso top agora, assim. E vamos lidar com isso daqui a pouco. Na verdade, sabemos o que podemos ir em frente e terminar este antes de avançarmos para isto. Então o que precisamos aqui é o logotipo. Se eu te levar de volta para aqui, nós não temos logotipo, nós nomeamos uma imagem de avatar bem aqui. Então vamos pegar um logotipo de algum lugar. Podemos assumir daqui, na verdade, controlar C. Também temos uma cópia em nossos ativos. Aqui está. Então podemos arrastar e soltar daqui, se quisermos. Eu posso ter certeza que está no centro com este aqui. E vamos ver, eu posso posicioná-lo para ser em 40 como este. Por isso, está bem alinhado com todos os nossos recursos de navegação abaixo. O que vou fazer a seguir é usar o texto do lado direito. Então eu estou realmente indo para copiar uma dessas posições aqui. E vamos ver, porque demos um nome a ele aqui. Onde estava? Michael Jacobs. Então vamos usar o mesmo nome para consistência. Como este. Vou me certificar de que é um direito alinhado a aqui. Agora, vamos em frente e criar nossa elipse. Para a elipse, vamos usar 60 por 60, assim. Eu vou em frente e ter certeza que é esta cor para indicar que a imagem precisa ir lá. Vou certificar-me de que está no centro assim, e vou posicioná-lo até aqui. Vou posicionar minha mensagem em 40. Então, assim, e é basicamente isso. Temos o nosso top agora concluído. Agora o que podemos fazer é agrupar isso. Então eu posso selecionar meu logotipo, texto, nosso piche e fundo, aperte Controle G. Eu vou chamá-lo, vamos ver o topo agora eu acho que vai funcionar bem. Como este. E eu vou organizar as coisas lá dentro. Então este é o nosso DAR, eu vou posicioná-lo aqui, e é basicamente isso. Agora vamos organizar estes também. Então este é o nosso painel. Vamos selecioná-lo. Controla você. Porque mais tarde, dentro do nosso design, vamos realmente usá-los para animá-los. Eles vão mudar de cor à medida que você clicar neles. Então eu vou realmente mostrar-lhe isso do meu design original porque eu pretendia mostrar-lhe o design original um pouco mais tarde, mas eu vou mostrar-lhe isso agora apenas para que você possa entendê-lo. Então este é o projeto final. E quando você clica entre eles, você pode ver em que eles estão mudando de cor. E os usuários podem realmente clicar neles. E você pode ver que os ícones são alterados de cor, bem como os textos e todo esse conteúdo aqui à direita. Então vamos agora em frente e organizá-los. Basta selecioná-los, chamar esta conta. Para ir abaixo das transações do painel. Então, a fim de criar essas animações, você tem que agrupá-las para ser mais fácil para o XD entender e para você realmente organizar essas animações e essas transições de trânsito. Isto é investimentos de cordas. Assim como. Temos digital está indo para baixo. E finalmente temos logout. Um seletor vai ir logo abaixo de todos estes porque ele vai para baixo e atrás deles. Então, para o seletor em si, vamos dar uma volta rápida só um pouco porque eu não cavo este canto porque é simplesmente muito plano para mim. Então eu vou para aqui e dar este 2020. Então em cima, em baixo à esquerda e em cima à direita. Então, se eu puder ampliar um pouco, você pode ver como isso se parece enquanto esses dois estão completamente planos. Então o que vamos fazer é realmente dar a isso o espaçamento de 40, então 1234 e posicionar nosso painel dentro do centro assim. Então, daqui para o próximo item, vamos posicioná-lo em 40. Então 1234. E do nosso próximo item para baixo, vamos dar-lhe o espaçamento de 60. Assim porque quando você faz a transição, você quer ter espaço suficiente entre todos os seus itens. Como você pode ver, é por isso que estamos dando um pouco mais de espaço. Você também pode dar-lhe o espaço de 80 se você quiser. Mas eu acho que 60 vai funcionar muito bem entre todos esses itens diferentes. Então vamos dar um espaçamento de 60. Adobe XD pegou muito bem. O que eu realmente quero fazer com ele. Isso funciona muito bem. Vamos ver 60. E, finalmente, para o logout em si, podemos posicioná-lo para ser em 40. Então turno 1-2-3 por enquanto, o que eu vou fazer é realmente selecionar todos estes devem controlar G e chamá-los de barra lateral. Assim como. Porque quero posicioná-los dentro da minha barra lateral. É assim que se chama esta parte. E esta parte vai realmente ser a nossa área de conteúdo. Então, para a nossa área de conteúdo, queremos algum texto aqui no topo. E então queremos criar todos esses outros elementos. Então, para fazer isso, eu vou realmente copiar este texto e distritos controlar C, controle V. Então eu vou ter certeza que eles estão alinhados à esquerda assim. Eles estão posicionados na mesma altura que este duto. Então, 40 do nosso navegador, vamos escrever aqui, bem-vindo de volta, Michael. E aqui isso para condições como esta, e vai conter a data em si. Então vamos mudar a cor. E para este texto aqui, talvez eu possa ir com 36. Acho que isso é muito grande. Então 36 ousados. Vou adicioná-lo aqui mesmo aos meus estilos de personagem. Músicos que estão aqui. Então, logo abaixo de um no meio destes, porque eu acho que 36 vai funcionar um pouco melhor. E depois 48. E isso vai me dar um pouco mais de espaço para brincar. Nossa posição é estar a 20 à esquerda alinhada a esta borda. E agora vamos em frente e começar criando essas caixas para o nosso conteúdo. Então vamos começar com uma ferramenta de retângulo. Isso vai levar quatro colunas em largura e dimensões serão 467 semanas, 231, assim. E vamos ver, eu posso dar-lhe um raio de canto dez. E para o espaçamento, posso ir com 40. Como este. Eu também posso adicionar uma sombra, pequena sombra, então 55 e 20. E vamos ver, isso é muito brilhante. Vamos com seis. Sim, acho que funciona um pouco melhor. Vou duplicá-lo. Então, Controle D, posicionar a ferramenta mais aqui. E se eu te levar de volta ao nosso esboço original, você pode ver que temos três aqui e temos que escrever aqui. Então o que eu vou fazer é duplicar este, por exemplo. E vamos ver, eu posso posicioná-lo para ser em 40. É. E simplesmente estendido todo o caminho para baixo porque este é em 40 vai muito bem arredondar para cima aqui. Vou estender isso para ser às sete. Então 4567 colunas de largura. E nós vamos duplicá-lo e simplesmente cancelar e este como este. Então, ele vai estar em cinco colunas de largura. Então, se eu incluí aqui e visualizá-lo, e só para que vocês possam vê-lo um pouco melhor, vocês podem ver como isso se parece. Mais uma vez, se você acha que isso é muito estreito, você pode aumentá-lo para 40. Eu acho que realmente não importa e parece bom como está agora. Por isso, vou deixá-la lá por enquanto. Então o que vamos fazer a seguir é incluir algum texto. E eu vou escrever em algo como “Conde”. Na verdade, vou com 18. E funciona bem. Vamos ver se consigo. 123412, por exemplo. E você pode posicioná-lo um pouco para baixo. Vamos dar 48. Vamos dar-lhe alguns números. Então vamos, por exemplo, 34 a 5.186 porque você quer ser exatamente para esses números porque essa é a sua conta. Afinal, turno 12. Eu vou dar-lhe descobrir, por exemplo. E vamos ver. Nova conta bancária. Porque esta é a conta principal que o usuário está usando. Posicione-o no centro assim. Então você pode obviamente adicionar um ícone aqui, se você quiser. Mas acho que vai funcionar muito bem, como está. Então esta é a nossa conta Vg. E eu vou selecionar tudo isso. Ele controlará o G e chamará esta conta principal assim. Então, o que vamos fazer a seguir é passar para alguns desses. Então isso, por exemplo, pode ser sobre suas cartas. Então vamos qualidade que realmente faz, por exemplo. E bem, vamos ver, talvez eu possa copiar e colar. Assim como o texto em como este. E posso salvar algo como a sua corrente. E vamos ver, talvez eu possa posicionar para estar em 40 mais uma vez, então mude 1234 e c, e isso pode ser VSA atual. Vamos mudar sua cor para este texto. Sim, acho que funciona melhor, mas não acho que este tamanho funcione. Então vamos mudá-lo para 16 e vamos adicioná-lo imediatamente. Vai para o topo, o que é bom. Então este é 18 falecido? 16. Acho que funciona bem. Vamos ver. Posso posicioná-lo em $20. E isso pode ser em 20 também, válido até C, nove de 21. Então, nove meses de 202120 em todos os lugares. E isso é bom. E vamos ver, talvez possamos criar uma paginação aqui na parte inferior, só para que os usuários possam alternar entre todos esses cartões. Porque, por exemplo, você pode ter um cartão de débito do que você tem cartão de crédito e assim por diante, salt sempre que eles estão clicando nesta paginação, esta informação vai mudar. Então, por exemplo, reunir carro em um cartão de débito ou o que for. E o cartão em si vai mudar bem aqui. Então vamos para aqueles círculos. Então eu vou simplesmente criar um círculo que vai ser 15 por 15. Isso é bom. Use esta cor assim. E vamos ver, talvez eu possa posicioná-lo para estar em sua garantia. Então 12 como este, controle D E vamos ver, talvez eu também possa dar o espaçamento ou 15 porque é 15 por 15, assim. E estes dois podem ser descoloridos porque este é e o que é selecionado, ou podemos realmente selecionar DS1 e, em seguida, dar-lhe descolorido, digamos apenas para indicar que ele está selecionado. Agora vou agrupar este texto. Vou usar minha ferramenta de retângulo assim daqui até aqui. Use-o e texto, certifique-se de que o texto está centralizado. Em seguida, excluiu este retângulo, voltando para o meu painel de camadas e chamá-lo de texto. Porque mais uma vez, uma vez que você começa a alternar estes, este texto realmente vai atualizar e mudar. Vamos ligar para isso. Então estes serão os nossos círculos. E eu vou simplesmente copiar e colar esse texto. Esta vai ser a nossa paginação. Então, mais com apenas abaixo do texto. E o que resta para você é o cartão. Vou duplicar este fundo. E vamos ver para as dimensões do cartão, eu posso usar algo como dois a oito com 149. Algo agradável e pequeno. Vou usar esta cor só para indicar que esta é a nossa mistura de cartas. Está no centro e vamos ver, posso posicioná-lo a 40 a partir daqui. Então 1234, assim. E eu acho que isso funciona muito bem como nosso layout. Então, como eu disse, você pode apenas imaginar que ele vai apenas renomear isso para Carter PG, assim. E vamos fazer um grupo desses. Então vamos chamá-lo de sua corrente, assim. Então, mais uma vez, você pode imaginar que quando os usuários começam clicar entre eles e alterar essa paginação, essa informação será atualizada. Assim, por exemplo, de VSA para MasterCard, qualquer que seja um válido até datas diferentes e, em seguida descartar gráfico vai atualizar também. Então, mais uma vez, se ele acha que isso é apenas para, por que você pode espaçá-los um pouco mais para dar a si mesmo um pouco mais de espaço aqui ou aqui, como este, por exemplo, então você pode acomodar texto MasterCard e assim por diante. Mas acho que funciona muito bem. Finalmente, o que vamos fazer aqui mesmo para esta guarda superior, eu também vou usar a minha paginação. Vou usar meu controle de texto C, controle V e posicioná-lo aqui. Então 1234 e foi liderar uma paginação. E o que vamos fazer lá é chamá-lo de guia Ajuda porque ele vai mostrar aos usuários algumas dicas. Então, como Tab, Vg, assim? E vai mostrar-lhes dicas. Como eu disse, vou simplesmente ir em frente e copiar meu texto aqui. Só para te mostrar, vou apagar este. E finalmente, vamos ver. Talvez eu possa dar isso assim e espaçamento assim. E eu vou fechá-lo aqui. Vamos ver, eu posso posicionar para estar em 20, o que já é. E isso é bom. Posição bem. E é basicamente isso. Tudo. A única coisa que podemos fazer é em design mais tarde adicionar alguns gráficos. E vou mostrar isso mais uma vez só para ver o que quero dizer. Temos estes cuidados gráficos e, mais tarde, vamos adicioná-los. E você vai ver na seção de design deste curso o que eles realmente estão resolvendo. Os usuários começam a clicar entre eles. Como você pode ver, esses gráficos vão mudar e atualizar onde quer que eles cliquem e mostrar-lhes esses haplotipos que quando eles clicam, eles podem levá-los para páginas diferentes. Então, por enquanto, vamos deixar como está. Eu vou selecionar a próxima geração, tudo isso e chamá-lo. Vamos ver, guia Ajuda, assim. Agora, finalmente, vamos organizar as coisas um pouco. Ou podemos ainda mais e criar esses dois e então podemos organizá-los. Acho que é muito melhor. Então vamos ver, podemos chamar essas transações. Então, assim. E então eu posso mudar isso para aqui. Vamos ver, eu posso dar-lhe o espaçamento de 40. Então 1234, suas transações. E vamos ver, mais uma vez 40. Como este. Isto vai ser Indeed e este vai ser novo nome de negócio para que você possa saber qual negócio você gastar seu dinheiro faria. Agora, isso pode ser um serviço e isso pode ser uma quantia em dólares. Soe me viu antes deste 1234. Acho que funciona bem. Vai da direita, e vamos dar alguns números aleatórios. Então C menos 15.14, Por exemplo. Vamos organizar isso um pouco melhor. Então temos a data primeiro, depois temos um nome comercial, temos o serviço e temos isso. Então vamos chamá-lo de dados. Abaixo de suas transações. Na verdade, vou copiar e colar este texto com uma seta onde está, aqui está. Em vez de aprender mais, vamos renomeá-lo para ver mais. Bem aqui. Vou posicioná-lo no centro assim. Vou posicionar conhecido. Vamos ver, talvez eu possa nos dar base de 20, então turno 12. Vamos ampliar só um pouquinho. Por isto. Vou posicioná-lo todo o caminho para baixo. E esta pasta de dados, eu vou simplesmente usar uma grade de repetição por enquanto. Então eu vou ter certeza de que ele está lá. Eu vou aumentar o espaçamento para, vamos, vamos realmente deixá-lo em 20. Acho que funciona muito bem. E como eu disse, vamos deixar assim por enquanto. Agora. Vou agrupá-los. Portanto, aprenda mais do que dados e transações. Vamos chamar isso de transações mais recentes, eu notei. E finalmente, estamos em uma largura esquerda com este. Então neste vídeo foi um pouco mais longo. Mas eu realmente gosto de entrar em detalhes para que vocês não percam nada. Então eu vou copiar este texto feito em posição em, em 40, então 1234. Todas as despesas como esta. E vamos ver, talvez possamos chamar isso de despesas de chamada BG. Eu fiz isto. E o que também podemos fazer é duplicar este e dar-nos um pouco mais de espaçamento. Então, por exemplo, 40, eu vou ter certeza que este é 16. Vou chamá-lo diariamente. E então o que podemos fazer é tipicamente isso, ter certeza que está em 20, ter certeza que está em 18. Como este. E eu vou dar alguns números aleatórios. Então vamos ver 2.4875, por exemplo, porque esse é o nosso gasto diário. E então eu vou agrupá-los. Primeiro de tudo, vamos voltar ao painel de camadas. Então, isto vai estar idealmente posicionado. Isto aqui. Vamos nos organizar nisso, do contrário, assim. Então isso foi para bater semanalmente. E certifique-se de que criamos outro precisa ser mensalmente assim. Então, para o mensal, mude para alguns números maiores. Então, de mil a cinco pontos, 13, por exemplo. Isto vai ser algo um pouco menor. Então 1,4 a 0,64 no diário e semanal vai ficar bem ali. Então o que eu vou fazer é posicionado é para estar em 40. Então 1234, porque isso é 40, se você se lembra. Agora vou selecionar estes três, assim. E clique aqui para ter certeza que diariamente está no centro entre esses dois. Isto vai ser semanalmente. E, finalmente, isso vai ser mensal. Então você pode ver como isso é fácil organizar e mantê-lo simples. Então o que eu vou fazer a seguir é realmente criar o meu círculo. Então eu vou começar adicionando um círculo aqui, porque ele vai nos mostrar o gráfico de todos os gastos. Então eu vou chamá-lo de servidor por enquanto e nós vamos lidar com isso mais tarde na parte de design do curso. Então vamos querer 86 com 186, assim. E vamos ver, podemos adicionar uma borda de ticker. Então, primeiro de tudo, vamos mudar isso para uma coluna de disco e vamos dar-lhe uma borda de areia, por exemplo, apenas classificada. Você pode vê-lo um pouco melhor e você pode realmente clicar nele. E vamos ver. Podemos posicionar para ser 42, aqui é 36. Então vamos ver, talvez 40 do fundo, assim. Então temos 40 aqui e 38 aqui. Então, 39 aqui, girando, ouvi dizer, isso é quase bom. O que eu vou fazer a seguir é realmente duplicar esta seção. Posicione-o aqui dentro do nosso círculo. E vamos chamar isso, por exemplo, em novembro. E dê-me isto. Alguns gastos de, de c 82513 para corresponder com este número superior que temos. Então, com este, vou me certificar de que ambos estão centrados. Vou me certificar de que eles estão centrados assim. Eu vou ser selecionado assim. E eu vou chamar este texto que eu vou dar a este um nome de gráfico. E, obviamente, isso vai ser atualizado assim que as pessoas começarem a clicar neles. Então o que eu vou fazer em seguida é realmente adicionar algumas tags basicamente texto. Vamos usar este texto de 16 duplicados, mórbidos do lado de fora e quando posicionar tudo bem por aqui. Então vamos ver o que podemos realmente fazer, talvez possamos adicionar algumas coisas aleatórias que as pessoas estão comprando. Sim, vamos deixar isso aqui por enquanto. Vou dar-lhe um nome como roupas. Agora eu vou duplicar isso chamado de comida. E isso vai ser utilitários. E, finalmente, isso pode ser pagamentos de carro têm direito o que você quer incluir lá, dar-lhe um espaçamento ou 20 ou acho que vai funcionar bem e agrupá-los e certifique-se de que eles estão no centro do nosso círculo e posicioná-los aqui por agora porque eu acho que vai funcionar muito bem. Mas mais tarde no design, nós vamos realmente adicionar alguns ícones lá. Então eu acho que vai funcionar muito bem por enquanto. Então vamos ver. Todas as despesas posição para o topo. Temos diariamente, semanalmente, mensalmente posicionado aqui. Então diariamente, semanalmente, mensalmente. E depois temos o gráfico e lançamo-lo, vemos roupas, comida, serviços públicos e pagamentos de carros. E finalmente temos este fundo que vai acontecer aqui. Vou agrupar tudo isso e encerrar todas as despesas e encerrar o dia. Na verdade, precisamos colocar essa posição interna para o fundo assim. E é basicamente em, a última coisa que eu quero fazer é organizar as coisas um pouco. Então adote a navegação e desculpe, barra lateral vai para aqui. Todas as despesas vão para o fundo. E isso e isso vão ficar bem aqui. Então, temos a conta principal, o seu cartão está retido, as últimas transações e despesas, e esse é o nosso painel concluído. E quando chegarmos à parte de design dele, e quando chegarmos a páginas adicionais deste painel, você verá como isso é fácil copiar colar e ajustar alguns desses elementos, especialmente com esses quer, nós vamos realmente criar algumas tags para eles. Nós vamos substituir isso quando ele diz serviço com essas etiquetas. Vai ser muito simples e todos eles vão ter uma cor diferente do Darrell. Então você vai ver como isso vai ser fácil. Então aperte o controle S ou comando tem que salvar e dívidas são wireframing processo no Adobe XD concluído. Espero que tenham aprendido algo novo. Espero que tenham gostado deste processo de criação. Comigo. Eu realmente espero que você vai recriar isso ou fazer algo um pouco diferente para si mesmo. E para explorar este processo de wireframing porque você pode ver que ele pode ser extremamente simples dependendo de qual técnica você pode usar. Você pode usar uma grade de repetição para todos esses elementos. Você pode usar componentes para eles e, em seguida, adaptar esses componentes. Você pode copiar e colar. Você pode usar a Grade para posicioná-los à esquerda e à direita da forma que desejar. Portanto, realmente não há limite para o que você pode fazer no Adobe XD. O limite deles é apenas a sua criatividade, basicamente. Então, eu realmente insisto em explorar o Adobe XD e começar criando esses wireframes. E comece explorando o que você pode fazer pelo seu projeto no Adobe XD. Então é isso para este vídeo, é isso para esta série de vídeos para wireframes no Adobe XD. No próximo vídeo, vou explicar um pouco onde consegui imagens para este projeto. Porque na próxima etapa do projeto, quando chegarmos à parte de design, vamos começar a usar imagens. Então eu só quero mostrar onde eu consegui essas imagens, o que você pode fazer para obtê-las também. E diferença entre imagens grátis e B8, bem como esses ícones premium onde eu os obtive, como você pode obtê-los, bem como as limitações de licenças para este projeto em particular. Então, vejo-te no próximo vídeo. 37. Recursos de premium do VS gratuitos a sua vida: Quando se trata de usar itens em seus projetos, se é que nossos ícones, imagens, maquetes, e assim por diante. Há sempre estas duas partes. A primeira parte é usar itens gratuitos. Então, fontes livres, imagens gratuitas, modelos gratuitos e assim por diante. E a outra parte é usar os premium. A diferença entre a dose dois é obviamente variações porque para cada item livre que você encontrou on-line, há uma boa chance de que você não terá variação suficiente. Então, por exemplo, se você baixar a fonte gratuita, as chances são se você não estiver usando fontes do Google, por exemplo, você não encontrará maneiras de fonte suficientes. Se eles estiverem usando ícones, você não encontrará exatamente os mesmos ícones do mesmo conjunto. Então você terá que acabar comprando esses ícones se você, por exemplo, estiver usando para equipes de mama, há uma boa chance de que você vai encontrar uma equipe com apenas duas ou três páginas e não todas as páginas que você precisa. Mesma história com maquetes, mesma história com imagens, especialmente. Então vou mostrar-lhe imagens exemplo em detalhes, mas valor e variações são o que separa recursos gratuitos e premium. Há sempre essa outra coisa que é cada designer único lá fora que está usando itens gratuitos, vai acabar tendo basicamente muito semelhante, se não o mesmo design que você faz, porque você está usando o mesmo itens gratuitos que você encontrar on-line, sejam essas fontes, imagens, maquetes, e assim por diante. Então neste vídeo eu vou mostrar a vocês itens que eu escolhi para usar neste curso. Estou lhe dando esses itens, mas mais uma vez, os itens premium são apenas para fins de aprendizagem. Portanto, você não tem permissão para usá-los para o trabalho do cliente. Se você optar por usá-los, certifique-se de entender que, no caso de alguém vai atrás de você para o nosso processo, se esses são esses sites ou do autor original, É tudo até você. Portanto, certifique-se de entender que isso é realmente sério. Não use esses itens premium se você não tiver permissões para fazer isso. Portanto, certifique-se de entender que, para itens premium, dívida é o caso para itens gratuitos. Obviamente você está autorizado a usá-los. Então vamos começar com fontes. E o primeiro site aqui é o Google Fonts. Estou usando fonte Poppins ao longo deste curso. Você pode, obviamente, ir para este link, clique em família Donald, e ele vai baixar na família fonte terrível. Então, todos esses links, que vou mostrar neste vídeo, serão vinculados no PDF. Por isso, faça o download do PDF e clique em todos os links que deseja visitar. Então essas são as fontes do Google. E, obviamente, você pode, se você quiser usar qualquer outra fonte, você pode ir para as fontes do Google, você pode clicar aqui. Você pode escolher por categorias, você pode escolher por idioma. Então, quais idiomas são suportados? Propriedades da fonte. Então, se você quiser, quantos números de estilos, espessuras, inclinação, largura, e assim por diante. Assim, você pode fazer o que quiser aqui no Google Fonts. E mais uma vez, esse recurso é completamente gratuito. Se você optar por ir com recursos premium, então eu realmente recomendo Creative Market. Porque criar o seu mercado é realmente este recurso agradável para fontes premium. Você também pode encontrar qualquer outro tipo de recursos aqui. Assim, a partir de fotos, gráficos, modelos, equipes da web, fontes, complementos, até mesmo 3D. Você pode encontrar os premium aqui. Além disso, o Dinka mencionado no início deste vídeo. A principal razão pela qual você não iria fazer isso é porque você quer diferenciar o seu projetado de todos esses outros designers. Você quer dar aos seus clientes essa experiência premium, especialmente se eles têm o orçamento. Então você sempre pode ir aqui e comprar essas fontes para que seus projetos não acabem parecendo o mesmo que todos esses outros caras que estão usando recursos gratuitos. Então esse é o ponto principal aqui. Eu estou recomendando a criação de mercado porque algumas pessoas realmente criativas criaram fontes aqui. E eu realmente recomendo que vocês verifiquem. Em seguida, temos ícones. Eu estava usando esses ícones, tão grande ícone Steyn, e este conjunto foi atualizado. A telha Kinky tem 2400 ícones, algo assim. E você pode clicar aqui para ir para o premium e desculpe para pré-visualizar. E você pode ver quantos ícones diferentes em diferentes estilos nesta parte traseira realmente contém. Então este é o que eu estou usando, seu prêmio como você pode ver. Mas se você quiser ícones gratuitos, mais uma vez, você pode acessar sites como flat icon.com. E para cada ícone que você está usando aqui, você tem que vincular de volta ao autor original, sólido e forma. Se você, por exemplo, escolher, sei lá, este pacote de ícones. E digamos que eu queira baixar esse ícone. Você pode ver que quando eu clicar opção PNG ou opção SVG, Eu sempre recomendarei SVG, se possível. Quando você clica em SVG UC, você tem um diálogo premium. Então você tem todos esses ícones para este preço do mês nem atribuição necessária. Mas se você optar por baixar a versão gratuita, então você tem que atribuir o autor original. Então você tem que copiar este link, você tem que baseá-lo em seu site e assim por diante porque você está usando o recurso de outra pessoa gratuitamente. Então essa é a desvantagem. Você tem que ligar esse cara. Então este é Gregor Krasner, espero ter pronunciado isso corretamente. Então essas são as limitações dos ícones livres. Você sempre pode acessar os sites como design de materiais, que são os próprios ícones do Google. Mas o problema com isso é que estes são os ícones usados no sistema operacional Android I. Então, basicamente, cada telefone agora lá que tem sistema operacional Android, está usando esses ícones. Então, mais uma vez, as chances são de que seu design vai acabar parecendo bastante semelhante a todos esses outros projetos encontrados on-line, especialmente se você estiver fazendo design de aplicativos móveis, especialmente para usuários de Android. Então essas são suas limitações. Se você quiser, você pode, obviamente, baixar e usar esses ícones, como com fontes do Google porque o Google os criou. Eles são basicamente de código aberto, o que eles estão aqui. Mas você ainda tem essas licenças aqui, mas você pode usá-las gratuitamente sem qualquer atribuição necessária. Em seguida, estamos movendo duas imagens, e este é realmente o recurso chave são encontrados on-line que você tem a largura mais limitações. Porque especialmente com as pessoas, se você está usando imagens de pessoas que você quer conjuntos de imagens e as chances são que você não vai encontrar conjuntos de imagens como imagens livres. Então é aí que as imagens premium entram em jogo e as imagens premium SET entram em jogo. A outra forma é a resolução, especialmente se você estiver criando trabalhos para impressão. As chances são de que essas resoluções não são suficientes para o seu trabalho de impressão. Então você ainda terá que acabar comprando essas imagens, conjuntos de imagens. Você pode usá-los mais tarde em seu trabalho de impressão. Sólidos. Tome um bom exemplo. Vamos ver, talvez possamos digitar algo como, eu não sei. Cara, só para ver algumas imagens. E temos esta imagem bem aqui. Então, digamos que queremos usar imagens deste conjunto. Podemos clicar no fotógrafo e você pode ver que eles têm variação dessas imagens diferentes, mas não há nenhum conjunto de imagens deste modelo em particular. Então era isso que eu estava dizendo. Então, se você quiser usar isso para uma equipe, por exemplo, e você tem, digamos, quatro pessoas em sua equipe. Talvez possamos acabar usando essa imagem, pode ser essa imagem, mas é basicamente isso. Estamos presos. Então temos que encontrar imagens online que são realmente semelhantes a estas, que são livres, que têm a mesma iluminação, que têm o mesmo tipo de fundo. Então, eles vão parecer coerentes em nosso site. E então estamos presos. Estamos perdendo nosso tempo procurando por essas imagens on-line boas chances de que você não vai acabar encontrando essas imagens online. Então é aí que um fundo de imagem premium vem a calhar. E o site que estou usando é e elementos vitais porque eles têm todas essas imagens diferentes aqui em conjuntos de imagens. E eles também têm este site chamado 20-20, que eles compraram. Então, se eu escolher, por exemplo, fotos aqui. E se eu clicar neles, você pode ver que podemos refiná-los por retrato paisagístico, fundo quadrado, que é isolado, o que basicamente significa que se quisermos encontrar imagens como esta, é realmente muito simples. Para que eu possa digitar Man Search. E então eu também posso clicar isolado. E você pode ver imediatamente que temos essas imagens isoladas. Então, seja no fundo branco, fundo cinza, fundo escuro, e assim por diante. Então, é muito mais fácil do que para você saltar para dentro, por exemplo, Photoshop ou qualquer outra ferramenta online que pode ser usada para cortar esses fundos para essas imagens. E com apenas um clique, você será capaz de remover fundos dessas imagens. Então vamos tomar, eu não sei, esta imagem por exemplo. E podemos ver imagens semelhantes. Então aqui estão eles. Então você pode imediatamente, basta olhar a partir dessas imagens e remover o fundo como se nós as usássemos em seus projetos. Ou, se você não quiser remover os fundos, você pode simplesmente usá-los assim. Então é aí que essas imagens premium vêm a calhar porque elas vêm em conjuntos. Então deixe-me mostrar esta imagem também. Se você, por exemplo, queria conferir, você vê que temos esse modelo. E você pode rolar para baixo e ver que temos modelos semelhantes a partir deste tipo de configuração. E você também pode clicar no fotógrafo. E você pode ver que eles têm 3 mil imagens. E você pode então procurar por esse modelo em particular e ver outras, por exemplo, poses ou outras coisas que esse modelo em particular fez. E você pode ver claramente, digamos que este homem, você pode localizá-lo na maioria dessas imagens para que você possa vê-lo em várias poses diferentes. Você vê que temos filhos, temos pessoas mais velhas, temos submarinos de chamadas, temos detalhes e assim por diante e assim por diante. Então basicamente dívidas, como isso é fácil de usar. E a coisa que eu queria te mostrar, bem como fotos. Então, quando você clica bem ali, você vê que temos 50 milhões de imagens diferentes neste site, 20-20 pontos com. Então, quando você clicar direito lá vai levá-lo para este site e é muito melhor organizado do que e elementos Watteau, mas ainda é parte de elementos inversor. Então, quando você quer comprar e subscrição de elementos de água, você ainda acaba com este site em particular. Então você pode usar ambas as imagens em seus projetos e imagens de barco são basicamente realmente profissional de alta qualidade e assim por diante. Então você pode ver aqui que você pode configurá-los por conjuntos. E basicamente a mesma coisa mais uma vez, quando você quer usá-los, há apenas uma advertência. Você pode escolher tamanhos diferentes dessas imagens. Então, por exemplo, vamos escolher essa imagem. E você pode ver, você pode escolher pequeno, médio ou grande, e então você pode baixá-los. Mas sagacidade e elementos vitais, você tem que baixar a maior imagem possível e, em seguida, acabar otimizando. Vou mostrar a vocês a Otimização que estou usando mais tarde, mas você sempre pode arrastá-la e soltá-la dentro do Adobe XD como dívida. Mas há boas chances, especialmente se você estiver usando essas imagens premium, você vai acabar com um arquivo realmente grande. Então seu sistema pode ficar atrasado. Então eu estou sempre recomendando otimizar suas imagens, se você puder. Ou se você optar por usar essas imagens premium, você pode usar algo como 20-20 e depois baixar essas versões menores. Eles serão salvos na sua coleção e você ainda pode finalizá-los como coleção. Você pode adicioná-los aos seus favoritos. E quando você acabar compartilhando esses recursos com seus desenvolvedores, então você pode ir em frente e baixar versões maiores, se assim o desejar. Por exemplo, seu cliente pode acabar por ter design de site, design de aplicativo, mas design de impressão também. Então eles podem precisar de versões enormes para impressão. Portanto, você pode voltar e enviar-lhes essas resoluções. Enquanto imagens fray V8, há uma boa chance de que isso é basicamente ele. Foi assim que o fotógrafo metade forneceu. Então talvez você realmente goste dessa imagem e talvez seja 1920 por 1080. Seu cliente requer algo maior e você não pode fornecer-lhes algo maior do que você está preso. Então é assim que é fácil usar essas imagens premium. E realmente uma coisa bastante simples, largura e elementos VO2 é, por exemplo, se escolhermos usar esta imagem, e se escolhermos usar grande, porque eu já estou logado aqui como um usuário premium, Posso simplesmente clicar em Download. Ótima escolha. E você pode ver aqui mesmo no canto esquerdo, meu download vai começar imediatamente assim que eu clicar no botão de download desconfirmado, e você pode vê-lo bem aqui. Então ele sempre começou a baixar em Eduardo Elements. No entanto, para cada recurso que você acaba usando em e elementos Watteau. Você pode simplesmente clicar em baixar e, em seguida, você terá que escolher o projeto que você deseja. Então eu tenho este Projeto Banco, mas por exemplo, eu posso chamá-lo de projetos novos e bancários. Eu posso criar esse projeto e eu posso adicionar e dialogar. E imediatamente, tenho uma licença comercial que posso dar aos meus clientes. E eles não vão se preocupar com alguém processá-los por usar essa imagem e assim por diante porque eles estão cobertos por licença. Um marketing sobre imagens realmente importante. Uma é, por exemplo, que se este fotógrafo, por qualquer razão, optar por sair em splash, deixe-me não escolher apenas este fotógrafo. Então, por exemplo, este, se eles escolherem sair do nosso splash, entreter suas imagens para baixo. Você ainda acaba usando as imagens deles. Há uma boa chance de que eles possam mudar de idéia mais tarde e passar de imagens livres para imagens premium e acabar processando você por usar essas imagens. Então há sempre a morte. Enquanto com este ler esses serviços premium, você acaba tendo um documento escrito licença que você pode então compartilhar com seu cliente, e então seu cliente é realmente coberto se algumas dessas pessoas tentarem ir atrás deles, que é não vai realmente ser o caso enquanto nós esses recursos livres para imagens, maquetes, ícones, quaisquer recursos livres, há uma boa chance de alguém fazer isso. Finalmente, vou mostrar imagens que eu estava usando e estas são imagens premium. E você pode ver bem aqui quando eu clico como isso é fácil de trabalhar. E você pode ver que você acaba com essas imagens sem qualquer cor e essas com cor. E se eu fechar essa visualização, você poderá ver os tipos do Adobe Illustrator. Você pode ver que temos tipos de arquivos, Adobe Illustrator, EPS, PNG, SVG. Você pode ver que dimensões que esses ícones estão chegando, eles são vetoriais e em camadas. Temos licença comercial e você pode clicar para carregar e ver mais informações sobre comercializa. Mas basicamente, eu já cobri isso. E você sempre pode entrar em contato com essa pessoa e pedir, por exemplo, ícones personalizados. Você pode pedir-lhes para alterar uma determinada cores se eles têm algo como componentes embutidos dentro do ilustrador ou dentro do x D, ou dentro do esboço, qualquer ferramenta que você está usando enquanto ele livre ícones, você está basicamente preso com o que eles estão dando a você. Eu sou porque eu estou usando é R, R de apenas ícone. Como você pode ver, eles têm 955 desses ícones premium. E você pode percorrer e ver todos os tipos de serviços diferentes para os quais você pode usar esses ícones. Você pode ver que eles têm educação Startup trabalhando a partir de redes domésticas, esporte e assim por diante e assim por diante. E você pode basicamente ver variação nesses pacotes de ícones diferentes para mostrar mais uma vez. E elementos vitais é basicamente um serviço de assinatura. Então, em vez de comprar a partir da criação de mercado todos os elementos individuais separadamente ou de ajuda UI, você pode comprar uma assinatura para este site elementos inversor. E você basicamente tem downloads ilimitados por um ano e, em seguida, você tem que renovar sua assinatura em dívida um ano, você pode baixar quantos itens quiser. E você pode ver que você está coberto com vídeos, modelos de vídeo, mesmo com música, efeitos sonoros , modelos gráficos, apresentações gráficas, fotos, fontes, adições, modelos da web e ainda mais categorias. Então você pode ver que você tem 3D, você tem eBooks e cursos. Então você pode ir para e Watteau pontos mais n até mesmo aprender em sua assinatura. Então, basicamente, eles cobriram tudo. E realmente se você está procurando o melhor recurso para recursos premium, Eu não posso recomendar e elementos Watteau suficiente. Eu também tenho um canal no YouTube, então eu acabo usando recursos de elementos subaquáticos o tempo todo. Estou usando recursos para esses cursos é que vocês podem ver, e eu também estou usando-os para o meu negócio. Então, eles realmente cobriram todas as bases e estão relatando que não há melhor alternativa dois e elementos vitais lá fora. Então, basicamente, isso é um encerramento para este vídeo. Eu realmente espero ter coberto tudo e eu realmente espero que vocês entendam quão importante é entender quais itens você está usando. Então, mais uma vez, se você estiver usando itens gratuitos, você está realmente limitado com o que o autor original e designer lhe forneceu, especialmente com fotos. Eu já expliquei que se você estiver usando imagens premium, você está coberto com licença. Então você não tem que se preocupar com alguém processando você. Você está coberto por sua licença e você sempre pode dar-lhes licença para seus clientes para que eles são cobertos também. No próximo vídeo, eu vou mostrar a vocês como eu acabo otimizando minhas imagens, especialmente aquelas que eu estou dialogando a partir de um lema elementos porque como eu mostrei, Jarrod enorme. Então vamos verificar isso. Talvez eu possa clicar neste, por exemplo. E você pode ver que são 6 mil por 4 mil em altura e largura. Portanto, é muito importante otimizar essas imagens para uso, especialmente para manter seu arquivo Adobe XD o mais baixo possível em tamanho, pois isso será mais fácil para o seu computador trabalhar. E será mais fácil compartilhá-lo com seus desenvolvedores e clientes. Então, vemo-nos lá. 38. Otimizar suas imagens: Então, quando se trata de usar suas imagens em seu projeto, como eu disse em um vídeo anterior, é muito importante otimizar essas imagens. Otimização realmente significa que você pode fazer, você pode usar essa mesma imagem, mas apenas com tamanho de arquivo menor, o que significa que seu computador não vai ficar atrasado. Seu arquivo XD será menor. Sua pré-visualização para seus clientes on-line será mais rápida porque sua conexão com a internet não precisa carregar todas essas imagens enormes. E então, finalmente, para desenvolvedores, isso significa que você pode simplesmente enviar-lhes essas imagens otimizadas porque eles têm que otimizar essas imagens também no final do dia. Então, se você otimizá-los, isso vai poupar tempo. Carga do diabo para isso. O cliente vai adorar porque o projeto vai estar vivo mais cedo. Então estou usando o Windows e no Windows, estou usando uma ferramenta chamada motim. E você pode vê-lo bem aqui. Basicamente significa uma ferramenta radical de otimização de imagem. E o que isso significa é que ele está usando esses mesmos dados de imagem está apenas tornando-o menor. Então, para mostrar no exemplo real, estas são as duas imagens, imagens premium que baixei do vídeo anterior. Então aqui está o que eu baixei para 20-20. E como você pode ver, é 55 00 de altura e 3-6, 67 pol, desculpe, em 55 00 de largura e 3667 de altura. Portanto, é quase 6K uma imagem, e você pode ver que tem 7,3 megabytes de tamanho. Tudo o que você precisa fazer é simplesmente arrastar e soltá-lo dentro deste topo. Você pode ver que ele contém uma imagem de alta resolução. Chegou pode lidar com essas imagens, mas o processamento pode ser bastante lento nesta situação. Queremos redimensioná-lo primeiro recomendado, as imagens originais não serão modificadas. O que basicamente significa que basicamente vai reduzi-lo na porcentagem. Então 100% manter atos proporção e você pode bater OK. Você pode ver aqui, a imagem inicial é 7,3 megabytes. A imagem otimizada é de 1,8 megabytes. Então você pode ver bem ali como isso foi fácil, quão rápido isso foi, e quanto em tamanho. E isso nos deu, você pode ver que a qualidade é basicamente inalterada. E se eu clicar aqui, mais uma vez, 55 00 com 3667, quando clicar em Salvar, ele vai substituir essa imagem. E quando eu clicar mais uma vez, você pode ver 55 003667731 de tamanho. E basicamente, agora tenho que localizá-lo onde está. Desculpe, estava na minha área de trabalho o tempo todo. Eu só tenho que verificar a parte para o arquivo. Mas quando eu faço uma atualização aqui, você pode ver 5000306, 6-7, mas agora 183, então o mesmo que é aqui. Então, basicamente, você pode reduzir todas essas imagens massivas, torná-las menores, melhorar a velocidade do seu Adobe XD, melhorar a velocidade do seu computador porque não vai ficar com essas imagens enormes. E basicamente o que isso significa vai funcionar muito mais rápido. Deixe-me mostrar-lhe em mais um exemplo. Então este exemplo é de convidar dois elementos. E você pode ver 54723648. Então, essa é a resolução. E você pode ver tamanho quase sete megabytes. Se um arrastar e soltá-lo dentro. Faça a mesma coisa. Então, sim. Ok. Você pode ver a imagem inicial era quase sete, otimizado. A imagem é 1.32. Então, se eu apertar salvar, então lembre-se, quase sete megabytes. Faça um pouco de atualização assim. Você pode ver que agora é 1.32. Então, mais uma vez, as dimensões são as mesmas. A resolução é a mesma. O apenas baixou o tamanho do arquivo geral, comprometendo todos esses pixels e compreendendo-os e tornando-os menores na imagem inicial. Então é basicamente assim que a otimização de imagem funciona. Mais uma vez, um motim. É uma ferramenta grátis. Vou vinculá-lo no PDF também. Se você está usando o Mac, você pode usar algo como imagem ideal ou você pode encontrar algumas ferramentas adicionais de otimização de imagem on-line que você tem que pagar. Mas a imagem ideal sempre foi livre e o motim sempre foi livre no Windows. Então é basicamente isso para este vídeo. No próximo vídeo vamos começar importando mundo essas imagens para nossos projetos. Vou mostrar-lhe como você pode otimizar ainda mais essas imagens, tornando-as ainda menores no XD e como você pode então apresentar esses designs aos nossos clientes. Então, vemo-nos lá. 39. Criando design 1: Vamos agora ir em frente e começar com Dart projetado. Mas antes de fazermos e supor assistiu os dois vídeos anteriores sobre recursos, Deixe-me apenas adicionar uma advertência rápida para isso, porque muitas das vezes em que você está projetando, a maioria do tempo que leva você realmente é para encontrar esses recursos. Então para encontrar imagens, para encontrar ícones, e realmente não importa se você está usando versões gratuitas ou pagas. Você ainda vai acabar usando a maior parte do seu tempo para encontrar esses recursos. Então é por isso que eu estou dizendo para você, organizar-se de tal maneira. Então é muito mais fácil para você encontrar esses recursos. Então, por exemplo, se você estiver usando recursos premium, vejamos nos elementos Watteau, então, eu sempre recomendarei que você, em seu tempo livre, explorasse esses recursos e veja onde você pode economizar muito tempo. Basicamente, você pode criar coleções quando você encontrar algumas imagens para projetos futuros, você pode nomear coleções que irão apenas melhorar sua velocidade na próxima vez que você começar com o projeto. Então, mantenha todas essas coisas em mente. Você vai usar muito o seu tempo apenas pesquisando e encontrando esses recursos. Então, na verdade, criando o design. Isso é no final do dia, parte muito fácil. Se o cliente já tem todos esses recursos e você está apenas usando eles, então tudo bem. É um sonho para você. Mas no final do dia, não é o caso na grande maioria do projeto. Agora que isso está fora do caminho, se eu levá-lo de volta ao nosso arquivo de projeto, você pode ver que nós temos uma arquitetura de site. Temos wireframes de papel, Temos um site wireframes, e temos um wireframe painel a partir do qual vamos construir mais tarde quando chegamos à parte de design da dívida e seção painel de controle. Então, para começar com o design do dardo, o que eu realmente vou fazer é mover todos esses para cima um pouco. Então deixe-me mover rapidamente as índias para cima. Deixe-me mover estes para cima, assim. Deixe-me selecionar estes e ver eu posso realmente apenas selecionar todos os meus aeroportos. Não sei por que não me dá opção hábil. Vamos ver, talvez se eu puder selecioná-lo assim. - Não. Eu não sei porquê. Não me dá a opção de mover todos os meus quadros de arte. De repente, aqui estamos nós. Então você tem que usar shift e você tem que clicar nesses nomes, a fim de selecionar todos os seus aeroportos e movê-los. E a razão pela qual eu fiz isso é porque se eu voltar para o modo de design, agora nós vamos copiar, estas são placas baseadas aqui mesmo. E mais tarde vamos fazer um design responsivo. Então podemos basear pontos também. Você também pode fazer, como você pode ver, temos um monte de espaço vazio aqui. Você pode fazê-los ao lado do outro. Então vamos dizer que eu posso apertar o controle D duplicar este, e então simplesmente movê-lo todo o caminho até aqui. E então eu posso criar meu design, criar meu painel aqui e, em seguida, usar esse espaço para design responsivo. Então, cabe a você como você quer fazer isso. O que eu quero fazer é realmente clicar neste aqui. Então, em nossa página inicial, segure meu Alt ou opção, e então simplesmente crie uma duplicata dele, posicione-o aqui, e então simplesmente certifique-se de posicioná-lo um pouco para baixo. Vou clicar aqui e ligar para este site. Design. Então agora que temos três fluxos diferentes. Então lembre-se mais uma vez, você pode compartilhar esses três fluxos com seus clientes que podem compartilhar wireframes para feedback. Você pode compartilhá-lo painel para feedback. E, finalmente, você pode compartilhar o site projetado para feedback. Explicarei a partilha mais tarde. E você pode então aplicar retroativamente esse conhecimento que você vai ganhar com o compartilhamento simplesmente seguindo essas lições. Mas por enquanto, eu só quero manter as coisas simples e não confundi-lo ainda mais. Então vamos começar com o design do nosso site. Então, se aproximarmos muito mais, você pode ver como isso se parece. E eu vou renomear todas essas páginas também, design. Então, teremos um design de contas de design de página inicial e assim por diante e assim por diante. Só porque quando começarmos a ligar estas páginas mais tarde, vai ser muito mais fácil para nós entendermos. Ok, eu só preciso conectá-los para desenhar abreviatura no final. Então, vamos começar. A primeira coisa que vou fazer é trabalhar na minha navegação principal. E para fazer isso, o que eu tenho que fazer é ampliar. Vou clicar nele. Eu vou abri-lo no meu painel Camadas open-end bem aqui. Porque agora eu quero criar um componente a partir deste nav principal. Mas antes disso, eu quero trabalhar no meu botão de login porque isso é basicamente muito simples. Então, para criar um componente, tudo o que você precisa fazer é simplesmente pressionar a tecla Control ou Command. E você pode ver que ele sempre aparece como um estado padrão. O que eu queria fazer por isso é simplesmente criar um estado de Hórus. Então eu posso clicar aqui onde diz “E estado”. Você pode adicionar um novo estado ou um estado de foco. Eu escolherei pairar, qualidade, pairar. E agora, em Maio, Horace diz que o que quero fazer é entrar. Então, clique aqui para abri-lo. Clique aqui. Tudo o que eu quero fazer é simplesmente mudar a cor do meu botão no estado de foco. Então a maneira como você pode fazer isso são basicamente duas coisas. Então você pode selecionar uma cor aqui, ou você pode escolher outras cores e assim por diante e assim por diante. Você também pode alterar seu tamanho se quiser passar o mouse, você pode alterar a cor deste texto e assim por diante e assim por diante. Eu não quero fazer isso. Eu quero manter as coisas agradáveis e simples e eu vou usar este efeito pairar durante todo o meu desejo apenas para continuar papagaio, olhando organizado. Então, se eu te levar de volta para a pré-visualização, clique aqui. E quando abrir minha pré-visualização, quando eu passar o mouse, você pode ver como isso se parece. Então é muito agradável e simples, muito fácil, e parece muito bom. Ok, então agora vamos em frente e voltar para o nosso cochilo principal. O que eu quero fazer, em primeiro lugar, é criar um ponto de toque para o meu logotipo. Ponto de profundidade é basicamente onde os usuários vão acabar clicando mais tarde, a fim de acessar a página inicial. Então, de todas essas páginas antigas, então contas lançaram cartões e assim por diante. Se as pessoas quiserem voltar para a página inicial, podem simplesmente clicar aqui. Mas em vez de clicar no logotipo em si, não vai clicar sobre esses pontos de toque invisíveis. Então vamos dar-lhe um nome, logotipo, ponto DAP. O que eu queria fazer é remover a cor, remover a borda, então você não pode realmente vê-lo, mas ele ainda está lá porque é obesidade está em 100% e sua única funcionalidade é basicamente ponto de adaptação. E eu vou mostrar isso um pouco mais tarde, quando realmente começarmos. Com a criação de todos estes. Então vamos agora criar um seletor. E seletor vai descer aqui nesta página inferior para a conta. Assim, sempre que um usuário clica em alguns deles, o seletor vai aparecer mostrando que você realmente clicou em qualquer uma dessas páginas. E para fazer isso, vou usar um retângulo. E eu vou criar um retângulo como este. Então vamos ver. Podemos dar 112 com oito. Então um retângulo muito inteligente como esse. E basicamente, eu quero criar nossa cor principal. Então eu escolherei e descobrirei. E vamos ver, para o raio do canto eu posso usar algo como cinco. Acho que funciona bem sem qualquer fronteira. Posso posicioná-lo para a borda inferior assim. E eu também posso ter certeza que é o tamanho do texto em si, assim. Posicione abaixo de todos os nossos itens, seletor de qualidade. E o que vou fazer é sobrepor toda a obesidade. Então acerte 02 vezes assim. E deixe-me diminuir a obesidade da minha rede só um pouco para que vocês possam ver isso um pouco melhor. Então agora que temos tudo isso, temos nosso botão, nosso logotipo. Se eu clicar duas vezes, você pode ver que nós temos, esses dois estados são padrão cinza para o nosso logotipo. Temos Horace State para o nosso botão. Agora chega a hora de criar nosso navegador principal como um componente em si. Assim, você pode selecionar uma chave de controle de feud para criar um componente. E o que vamos fazer na verdade é criar alguns estados diferentes. Então, para criar estados diferentes, o que eu vou fazer é clicar aqui mesmo novo estado e chamá-lo de contas. Então, se pudermos ver no estado padrão, não temos nada selecionado. Mas por conta, este seletor vai aparecer bem aqui. E nós estamos realmente indo para mudar o nome do texto de contas para esta cor apenas para que possamos indicar que isso está selecionado se eu levá-lo para a tela inteira. Então você pode ver como isso se parece. Você pode ver que é muito mais limpo e é muito mais óbvio agora que temos o seletor e isso mudou a cor, que isso é realmente selecionado. Então, agora podemos seguir em frente e voltar para aqui. Posso fechar este clique para adicionar um novo estado. E este estado vai ser chamado pertence. E no lançamento, o que vou fazer é simplesmente selecionar isto. Você pode ver que essa cor está selecionada. Então 495463 para todos eles, que é esta cor. E se eu te levar de volta aqui, você pode ver que estamos em empréstimos. Então agora longs vai ser nesta cor e contas vai ser em descolorido e segurando o controle para clicar em itens diferentes. E eu também vou mover o seletor para cá. E eu também sou um reduzido seu tamanho para caber meu texto de empréstimos. Então, basicamente, é assim que funciona. Clique para adicionar um novo estado, chamá-lo de cartões. E você pode ver que basicamente este é um estado repetitivo, mas você realmente tem que fazê-lo. E você tem que fazer isso apenas uma vez, o que é ótimo. E mais tarde, quando você começar a selecionar todos esses estados diferentes da navegação neural, vai ser muito mais simples e muito mais limpo. Isto vai ser investir. Então selecione nossos investimentos, use este cartão de sílica de cor, use isso e mova nosso seletor dois aqui e dois aqui, então ele se encaixa muito bem. E o estado final do nosso equipamento de navegação é digital. Como este. Vou selecionar digital. Vá aqui, escolha esta cor, os investidores escolhem esta cor. Mova isso aqui, aumente dois aqui, e aí temos. Completamos o nosso nav principal. Então, se eu mudar entre meus estados ou me deixar fechar isso para que você possa ver um pouco melhor. Então, se você vai para Default State vino tem qualquer coisa, contas, empréstimos, cartões, investir, e digital. Vamos começar com o estado padrão, obviamente. E o estado padrão vai ser localizado na página inicial. Mas para cada uma dessas páginas, vai mudar entre todas essas páginas diferentes, n nomes. Então, hoje em dia nós terminamos isso. Vamos passar para a seção de heróis do nosso site. E vou dar um nome a isto. Então eu vou chamá-lo de novo banco ou uma nova era como essa. E também vou reorganizar um pouco o meu texto. Então vamos ver. Eu posso dar-lhe um espaçamento de uma volta, por exemplo, eu acho que vai funcionar bem. Vou me posicionar em 50. Então mude 1-2-3-4-5. Como este. Vou copiar e colar o texto aqui. E eu ainda vou ficar com isso. Saiba mais sobre o botão. E vamos ver, está em 60, vai aumentar isso para 70, assim. E vamos ver, aprender mais textos podem ser 24 irregulares e brancos. E eu também vou posicionado aqui. E vamos ver para o nosso botão principal para o login, eu acho que ele vai funcionar muito bem em 60 e sim, vamos mantê-lo em 60 porque é um pouco menor e cabe bem aqui, mas este é o nosso botão principal. Vai ser visto em todo o nosso site. Então, vamos manter isso aí por enquanto. Então vamos ver, podemos posicionar este botão para ser 50, e este é em 50. Em vez de aprender mais, vou chamá-lo de botão principal. Então, BTM malvado como este. E o que eu também vou fazer é criar componentes. Então aperte a tecla Control, estado padrão, temos. Não em vez de novo estado, clique com o botão direito do mouse para excluir, eu vou escolher o estado Horace, chamá-lo de pairar, e basicamente criar a mesma coisa que eu fiz para a navegação superior. Então eu só vou usar nesta cor assim. Onde voltar para a pré-visualização de batidas de estado padrão apenas para ver como isso se parece. Então aqui temos um pairar, e aqui também temos um pairar. Então eu acho que isso parece muito bem. O que eu vou fazer em seguida para este texto é usado pilha. Eu também estou mantendo-o assim e eu estou usando pilha para mais tarde porque vai ser muito mais fácil para mim trabalhar em design responsivo. Vou espaçar isso um pouco melhor daqui até aqui, selecionar este e o texto, selecionar este e o texto, certificar-se de que o texto está no centro. Apague isso, e é basicamente isso. Agora você pode ver que tudo começa a tomar forma. Tudo parece muito melhor agora. E a próxima coisa, e o próximo passo que vou fazer é basicamente trazer uma imagem. Estou usando uma imagem PNG para este. Então, basicamente, esta é a imagem de elementos invertíveis. E tudo o que eu fiz, eu entrei no Photoshop e eu cortei todos estes são cantos para fora e exportado como B e G, que basicamente significa que a imagem não tem nenhuma cor de fundo ou forma de fundo sobre ele. Então, agora que eu fiz isso, o que eu posso fazer é basicamente posicionar como eu quiser, talvez algo assim. Acho que funciona bem. E você já pode começar a ver que agora temos este site design começando a tomar forma. O que vou fazer a seguir é criar algumas formas. Então, para fazer isso, eu vou usar meu lápis, por exemplo. Clique, clique, segure e, em seguida, clique por exemplo aqui, pressione escape. E o que vou fazer é escolher uma caldeira de cor verde. Então eu escolherei essa cor. E aumentarei o tamanho da minha fronteira para dez. Eu também vou ao redor do acampamento. Então é bom e redondo assim. Então você pode ver como isso se parece e você pode, obviamente, reposicioná-lo onde quiser. Acho que se atreve, parece bem por enquanto. Vamos movê-lo um pouco mais tarde. Posso chamar-lhe uma linha ou uma parte. Como você quiser. Eu vou posicionar obviamente dentro do nosso herói e eu vou mover minha imagem para trás dos meus decks, colocar isso, e eu também vou mover minha linha para trás do texto. A próxima coisa que vamos fazer é criar um círculo. E usarei algo como, sei lá, 70 por 70, por exemplo. Acho que vai funcionar bem. Talvez 80 por 80, só para nos dar um pouco mais de espaço. Sem nenhum campo. Vou usar a mesma cor para a nossa fronteira. Então, este aqui. E para o tamanho de paralelepípedos use dez. Então, para manter a mesma coisa como esta 11, última coisa que eu vou fazer é usar minha música de linha A. Quando usar um retângulo, eu quero criar uma cruz como esta. Eu posso trazer isso em dez e vamos dar, por exemplo, San Juan não casar aos 15 com 80. Acho que vai funcionar bem. Vou girá-lo assim. Aperte o controle D, vire-o. Então, clique bem aqui. E eu vou selecionar esses dois, mesclá-los, e depois remover a borda. E para a cor de preenchimento, vou usar este. E, basicamente, agora, posso virar. Posso posicioná-lo onde quiser. E, por exemplo, vou mantê-lo bem aqui enquanto mantenho o chamado pouquinho mais baixo. E esta é apenas a maneira de um banco estar no tempo com esses projetos mínimos e desmembrados e projetos e assim por diante. Então agora a última coisa que eu vou fazer para o herói é realmente adicionar uma forma de fundo. E para adicionar essa forma de fundo, vou usar a minha mente. Então vamos voltar para o cinto de camadas. Vamos chamar isso de cruz. Chama-se “círculo”. E eu vou agrupar tudo isso, chamá-lo de herói. Elementos. Posicionado atrás do meu texto. E eu vou clicar bem aqui. Em seguida, clique aqui, e simplesmente use minha ferramenta caneta para criar este solo forma começar a partir daqui, por exemplo. E simplesmente clique aqui. Desculpe por isso. Meu telefone enlouqueceu por alguma razão. Então você clica aqui, então você clica aqui, e então você pode estender isso. Então você pode clicar aqui, talvez aqui, e aqui. Então você pode segurar Shift até que esta linha apareça, que basicamente mostra que você pode fechar e disco em forma assim. E você pode, obviamente, brincar com estes para que você possa clicar bem ali, você pode reorganizá-lo. Se você clicar duas vezes sobre ele, você vai obter esta parte externa. Então você pode brincar com ele ainda mais assim. E você pode, obviamente, reposicioná-los como quiser. Você pode alterar o ângulo desses pontos de ancoragem e criá-los como quiser. Então, neste caso, vou abaixar isso um pouco. Possivelmente posicionar isto para estar bem aqui. Porque eu não quero que ele bloqueie MyText porque obviamente o texto é muito mais importante. Em seguida, esta forma de fundo que você está brincando com. E eu também posso clicar duas vezes aqui e posicionar isso aqui, e depois clicar duas vezes mais uma vez. Se eu quiser mudar esta forma um pouco mais para que o selo como este. E agora que terminei de brincar com ele, posso obviamente posicionar aqui. E é sempre meio complicado com essas formas porque você sempre quer alcançar o melhor resultado possível sem perder muito tempo. Mas sempre pode ser um pouco mais complicado do que você pensava. Finalmente, o que vamos fazer é que eu vou posicionar isso um pouco aqui. E como podem ver, temos um estranho. Forma. Então, vou clicar duas vezes da minha parte. E eu vou simplesmente fazer isso para que eu possa conectá-lo e criar distribuído apenas um pouco melhor. Mas isso realmente não importa porque o que vamos usar é um gradiente linear. Então, para o nosso gradiente e quando escolher o meu bumbum e carga ficar no topo por enquanto. O que eu vou fazer é remover a borda, incluir o clique de preenchimento aqui. Em vez de cor sólida, vou usar um gradiente linear. E para o meu ponto mais escuro, você pode ver que está lá em baixo. Eu vou girá-lo. Então eu vou para Marie posicioná-lo assim. E então eu vou mover isso para cima. Está jogando coisas em mim por alguma razão. Mas vamos incluir a cor por enquanto e então podemos brincar com ela um pouco mais tarde. Então, para a cor mais clara, vou baixar a obesidade para 0. Para esta cor mais escura, vou simplesmente selecionar esta cor. E agora que temos o nosso gradiente, podemos obviamente dar-lhe um nome. Então vamos chamá-lo de Hiroshima, assim. E eu vou movê-lo logo abaixo da nossa imagem para que você possa ver como isso se parece. E se você não gosta e configuração de mesa, você pode obviamente mudar esse mórbido para cima. E você pode clicar nesta posição e organizá-los como quiser. Mas se você não gosta de como este parece, você pode obviamente Claire bem aqui, então você pode reposicionar isso e eu não sei por quê. Está me mandando até aqui por alguma razão. Mas, obviamente, você pode brincar com eles e você pode clicar bem ali e baixar a obesidade deste. Se ele acha que é muito escuro para algo assim, vamos mantê-lo em torno de 40% assim. E acho que parece muito melhor. Ainda não gosto desta forma aqui. Então, se eu clicar no meu herói, eu vou esconder minha imagem apenas para que eu possa chegar a ele. Ainda não gostei de como isso acabou. Acho que está melhor agora. E você sempre pode voltar e mudá-lo se você não gostar, e assim por diante. Então é basicamente isso para o herói. Uma última coisa que queremos fazer é adicionar um círculo atrás deles. E para adicionar esse círculo, o que eu vou fazer na verdade é usar meus lábios para segurar a tecla Shift. Criar a minha posição de círculo. Está em algum lugar por aqui porque eu quero criar algum tipo de união entre usuários e um banco. E as pessoas mais jovens estão em foco aqui. Então, posicione-se por aqui. Vou chamar-lhe Círculo Herói. Como este. Posicione-o bem aqui. Agora, vou remover a fronteira. Vou incluir a mesma cor de preenchimento. E agora vamos brincar com o borrão de fundo. Então eu vou clicar em minhas opções de desfoque de fundo. Eu vou dar 50 e dar 50, dar este oito. E agora você pode vê-lo apenas lá no fundo, especialmente se eu remover estes. Então é muito, muito, muito tarde, mas vamos brincar com ele ainda mais. Então aqui está o nosso círculo, nós o temos aqui. O que podemos fazer é aumentar a obesidade. Então vamos mantê-lo, vamos ver às dez, eu acho que é bom. Talvez 12. Sim, estou feliz com este resultado. Agora, o que vou fazer a seguir é duplicar o meu herói BG. Então aperte o controle D. Vou posicioná-lo logo acima do meu herói chamado. Selecionarei ambos, pressionarei Shift Control M ou Shift Command them em um Mac para criar uma máscara. E chamarei de almíscar. E o que isso faz é mascarar a parte inferior do nosso herói. Então, quando você clica no herói, você pode ver como isso se parece. Você pode, obviamente, trazer esta forma de herói ainda mais se você quiser simplesmente clicar aqui. Mas, por enquanto, vamos deixar isso aí. E é basicamente isso. Essa é a nossa imagem de herói concluída. Se um clique aqui para a visualização, você pode ver como essa visualização se parece. Eu acho que parece legal. E agora vamos passar para algumas outras seções do nosso site. Então, para esta superfície, o que vamos fazer é eu vou realmente criar este componente principal. E então vamos seguir em frente e copiá-lo e colá-lo em outros componentes. Então o que eu vou fazer primeiro é eu vou copiar e colar o texto dentro Acho que sim. Vou usar a cópia verdadeira que vou usar de qualquer maneira. E o que eu vou fazer é incluir meu ícone também. Então eu vou deixar meu ícone aqui. E eu vou posicioná-lo 40 das minhas mensagens. Então 1234, vou remover este ícone de estrela. E eu também vou torná-lo o componente principal, torná-lo local. Então vamos chamar esse conteúdo atual, assim. E o que vou fazer a seguir é criar basicamente dois estados. Então o que vamos fazer é usar as formas do nosso herói. Então essas três formas, e nós vamos usar um círculo. Então vamos clicar no nosso herói. Use, vamos ver onde eles estão. Elementos Heróis. Vou copiar todos os três. Feche tudo isso. Apertando aqui, aperte o Controle V. e eu pularei para dentro e selecionarei todos eles. Posicionou-os no centro para que possam vê-los melhor. Então o que eu vou fazer é posicionar minha cruz aqui em cima. Por exemplo, posicionar minha linha em algum lugar por aqui. Posicione este círculo em algum lugar por aqui. Se você apertar o controle D para duplicar e aumentar o tamanho deste. Posição em algum lugar por aqui. E o que vou fazer é chamá-los de elementos. Vou duplicar o carrinho VG, posicioná-lo dentro dos meus elementos e apenas aqui. Então eu precisava ser basicamente o mesmo que fizemos com o anterior. Então eu vou segurar Shift Control M para Mascote, máscara de qualidade. E o que eu vou fazer finalmente é por todos esses elementos, eu vou apenas fazê-los esperar. Então eu vou usar uma borda branca para a linha de um também usar borda branca. E, finalmente, para a cruz, vou simplesmente usar colarinho branco assim. E isso é basicamente o que eu vou fazer. Primeiro de tudo, eu vou posicioná-los aqui mesmo para o fundo. Acertou 02 vezes. E eu fiz tudo isso. Então agora eu posso criar um componente pressionando a tecla Control para o cartão de conteúdo. E eu vou clicar em novo estado, que é basicamente cor. Desculpe, preciso do estado, não do noticiário. Então eu vou chamá-lo de pairar, assim. E em pairar, o que eu vou fazer é usar o carrinho Vg e torná-lo esta cor verde. Exponha os meus elementos. E vou diminuir a obesidade deles. Então vamos ver. Por exemplo, eu posso dar o Senhor a, vamos ver, eu não sei, 10, 20%. Então vamos ver como isso funciona. Acho que parece bem. E o que eu também vou fazer é reposicioná-los um pouco deste ano e NormDis aqui talvez até girar isso um pouco e posicionar para cima. Eu também vou usar este ícone. E eu vou esconder minhas cores sólidas C onde ele, é melhor que eles estão. Então vamos ver p sub t. Eu só preciso ver onde essas cores estão. Aqui estão eles. Então eu vou Laura para baixo estes. Então estas são as cores dos ícones como este. E eu também vou movê-lo para cima. Vejamos, 12, não, dez pixels. Acho que vai funcionar muito bem. Agora, para essas contas pessoais, eu não gosto dessa cor, então eu vou mudar para a cor do disco. Como isso. Eu vou mudar uma seta aprender mais ND. E eu também vou mover o Arrow 20 pixels assim. Eu acho que isso é tudo. Vamos deixar este texto como é cartões de conteúdo. Então isso é basicamente o mesmo, vai voltar para o estado padrão. Você pode ver como ele se parece. E se apertarmos a pré-visualização, role para baixo. Se nós pairarmos, você pode ver como isso se parece. É óbvio que está indo muito rápido. Então vamos mudar de dívida e ir para o protótipo. E aqui nós já vemos que temos pairar ou animar está dentro, fora. E vamos dar-lhe uma duração de 0,06 segundos. Volte para o projeto. Aperte visualização. Desculpe, ele continua sendo lançado na minha outra tela. Então, quando eu pairar, você pode ver como isso se parece. Ainda não gosto do fundo disto. Então o que vou fazer agora é voltar ao meu estado padrão. Vou duplicar cartão BG e chamá-lo de cor ou cor atual. E eu vou dar-lhe nesta cor no estado padrão, mas eu vou diminuir a obesidade para 0%. E agora, se formos para o estado flutuante, ele ainda está lá. Vai ser a 100%. Mas uma cor de cartão bg vai ser esta cor. Ou eu posso simplesmente clicar aqui. E o que isso vai fazer é nos permitir uma transição muito melhor. Então, se passarmos o mouse, você pode ver o quão suave está agora. E você pode ver como é ótimo arejar. O que eu ainda não gosto é esse nome, então contas personalizadas neste caso, eu quero que ele seja descolorido para que ele não mude a cor dessa maneira. Então eu vou para o estado padrão clique aqui, e eu vou selecionar esta cor. E vamos fazer uma prévia final. Então, quando você rolar para baixo, você pode ver como isso se parece. Então, tudo parece bem legal. Agora o que eu vou fazer a seguir é realmente duplicado este cartão de conteúdo, a fim de eu continuar e fazer esses elementos. Então, como posso fazer isso? Eu posso simplesmente clicar aqui, excluir este, clicar aqui e excluir este. E eu posso criar componentes filhos adicionais. Posso manter minha fila antiga, clicar e arrastar para fazer uma cópia. E eu também posso segurar Alt e arrastar para criar outra cópia como esta. E agora posso mudar isto, mas antes de o fazer, só quero encomendá-los. E você pode ver que este é o componente principal e o diamante está cheio. Bem, esses dois estão aguentados e você pode vê-los aqui também. E estes são componentes infantis. Então, primeiro as coisas, vamos mudar alguns textos para que você tenha que mudar o texto em ambos os componentes principais, desculpe, no estado padrão e estado hover. Então eu vou mudá-lo aqui. Volte para o estado padrão e clique duas vezes para colá-lo. Eu vou para Horace State com base em lá também. E deixe-me ir rapidamente em frente e mudar o texto desta primeira vez. Assim, assim. Vou em frente à dívida baseada no estado de horror e vamos ver, eu não o colei por alguma razão. Sim. Como isso. Parece ótimo. E finalmente, vou escolher isto para o meu estado de horror. E agora, finalmente, posso voltar e mudar ícones para estes. Então, para fazer isso mais uma vez, o que você pode fazer é usar seus ícones para que eu possa copiar e colar meu ícone do meu documento original aqui. Vou posicioná-lo no lugar. Solucionador aqui para que você possa ver que são 40. Vou apagar o original e clicar com o botão direito do mouse. E desculpe, não aqui, mas aqui. Clique com o botão direito tornar local E o que eu também posso fazer é selecionar outro para o terceiro. Para que eu possa abrir. Posicione-o no lugar. Como este. Vamos ver o quão longe estamos. Selecione essas ferramentas, certifique-se de que elas estão alinhadas. Exclui o original, ouro de volta aqui, clique com o botão direito do mouse em pode Klocal. E agora o que posso fazer é brincar com eles. Então eu posso clicar neste, ir para o pairar. Mas antes de o fazer, posso clicar ali e copiar o meu ícone. Em seguida, vá para o pairar. Abrindo baseado em kit, posicione-o na mesma posição. Excluí o original, e depois vá aqui e localize minha cor. Então deixe-me ver rapidamente, este é um problema com não apenas este ícone de volta, mas com a maioria de fora de todos esses itens que você vai acabar usando uma linha é que as pessoas não nomear seus itens como deveriam. E é por isso que eu realmente gosto de nomear todos os meus itens. Então não só eu, mas todos os outros designers. E você pode ver que em nossos produtos que vendemos na web donut.net, você pode ver que sempre temos ou todos os nossos itens nomeados, todas as camadas ímpares nomeadas assim por diante. Para que as pessoas possam encontrá-las e organizá-las da maneira que quiserem. Finalmente, o que eu quero fazer é clicar duas vezes aqui, chamá-lo de serviços feitos sob medida apenas para dar-lhe um tempero. E agora podemos bater a pré-visualização, apenas ver onde estamos no momento. Então temos pairar aqui, pairar aqui temos esta forma de fundo agradável com um círculo, belo casal. E você pode ver quando eu começar a pairar, como tudo isso parece. Apenas certifique-se de que o seu texto está lá. E funciona com isso. Então é basicamente isso para esta seção. Concluímos este trabalho de conhecimento seção nesta seção. Então, se ampliarmos um pouco e você pode ver esta seção aqui. E tudo o que eu queria fazer basicamente aqui é importar minha imagem. Então eu posso usar uma imagem como esta. Talvez, vejamos, talvez eu possa clicar duas vezes e posicioná-lo um pouco para o lado. E você sempre pode, eles clicarão em Shift, Alt e clique com o botão esquerdo para aumentá-lo. Se quiser, mantenha a tecla Shift pressionada e clique com o botão esquerdo para aumentá-la para um lado, qual for o lado desejado. E você sempre pode, como eu disse, Shift velho e clique com o botão esquerdo para aumentá-lo em todos os lados. E você também pode movê-lo para a esquerda e para a direita como quiser. Então, para o texto em si, deixe-me copiá-lo. Então vai ser chamado de festival da semana da juventude. E vamos ver, eu vou dar isso aqui. E a última coisa que vou fazer é remover este botão. Porque agora temos o nosso botão aqui. Vou trazê-lo daqui. Ou você também pode ir para a seção de heróis e usá-lo a partir daí. Então vá para as mensagens, botão malvado, aperte Controle C. Volte aqui, ele controlaria V. E você pode ver que está segurando, que significa que é um componente infantil. Então o que eu vou fazer está posicionado em 40. Certifica-te de que isto é 40. Então o que eu vou fazer é simplesmente posicionar no centro e encerrar o dia. Eu também posso agrupar esses textos coloridos. E eu também posso criar uma pilha apenas para que eu possa trabalhar mais tarde sobre isso como um responsivo. Como eu disse, se você quiser trocá-lo, você pode apenas fazê-lo com um único clique. Em seguida, vamos seguir em frente e trabalhar nesses. Então, basicamente, estes aqui são bastante simples e bastante semelhantes. Tudo o que fiz foi criar o nosso componente a partir de um deles e depois criei outro bem aqui. Assim, você não precisa criar o componente se não quiser. Mas eu só queria criar um porque acho que vai ser muito mais fácil de se adaptar em componentes. E você sempre pode criar vários estados para esse componente, para recitos responsivos, por exemplo. Então é aí que isso vem a calhar. Então eu vou reposicionar isso aqui mesmo. Clique em, exclua este. E eu também vou pular aqui e deletar um botão de mesa que o Controle V tomou baseado em nosso botão de amina, que acabamos de criar médico aos 40, então 1234. E o que eu vou fazer é apertar a tecla Control para criar um componente chamado Big Card. Vou mover isto um pouco para baixo e uma torre na minha imagem antes de tudo. Então eu vou arrastar e soltar minha imagem dentro. Clique duas vezes, mantenha pressionada a tecla Shift para posicioná-la no lugar como esta mudança, todos os dez cliques com o botão esquerdo podem estar posicionando aqui assim. E, finalmente, posso trazer a minha cópia verdadeira para dentro assim. E agora que isso está concluído, o que eu posso fazer é simplesmente segurar Alt e fazer uma cópia dele posicionada bem aqui. Abra e eu vou arrastar e soltar uma nova imagem lá dentro. Eu também vou copiar e colar texto, que vai para lá assim. E agora essa fase está concluída. Então, se eu clicar aqui, testamos tudo isso. Por isso, funciona de forma simples e agradável. Você pode ver que este efeito de pairar também funciona. Isso funciona, e isso funciona. Então temos o mesmo efeito de pairar em todos os lugares. E é por isso que nós o criamos para que possamos usá-lo uma e outra vez em todo o nosso design. Então, finalmente, o que podemos fazer é criar novos componentes para este último estado. E o que vou fazer é saltar para dentro e fazer a mesma coisa. Então eu vou deletar esses. Vou pular aqui e apertar a tecla Control para criá-la como um componente. E eu vou simplesmente adicionar este texto aqui. Então vamos ver. A única coisa que eu realmente quero fazer é criar um pairar e mover esta seta. Então vamos realmente desfazer isso. Então aperte o Control Z. e vamos primeiro adicioná-lo, a informação que temos aqui. Então eu vou arrastar e soltar minha imagem dentro. Vou dar-lhe um nome de texto. Como este. Data pode ficar como se baseia descida borrão mais, pode ficar onde está. É basicamente isso. E agora eu posso ir em frente e criar uma propriedade de terror que controlaria a chave no meu estado de horror, que eu vou chamar de pairar. Obviamente, a única coisa que eu quero fazer é basicamente mover minha flecha. Então, mude 12k, e é basicamente isso. Então, o próximo Im vai fazer é bater Alt posição este aqui. Alt posição isso aqui. E agora temos que editar estes para os componentes principais, bem como para sofá significa data, bem como para a heurística da Flórida como esta. E isto. E aprenda mais porque estamos a pairar. Vamos ver, eu posso trazer isso, tocando minha nova imagem. Então, basicamente, o que posso fazer é selecionar tudo isso que ela controlaria. Então, você volta ao meu estado padrão, seleciona tudo e exclui. Ele iria Control-V e posicioná-los para curar. Então, agora, quando eu alternar entre o meu foco e o padrão, arejando parece como deveria. Agora, vamos para o terceiro e vamos organizar isso um pouco. Tão disciplinado para ser cartão três, carro e um, e isso vai ser cartão para obviamente como isso. Então, no carro três e vamos trazer isso para um estado padrão. No cartão três. O que posso fazer é mudar essa imagem. Vou mudar este texto, mudar este texto, mudar este texto. E finalmente, no estado de horror, vamos primeiro copiar isso. Vá para o estado padrão. Apagar e colar. E agora vamos alternar entre o estado do Horace e edição de estado padrão permanece exatamente a mesma. Então estamos em nosso estado aqui, estado aqui. E é basicamente isso. Eu não vou trabalhar em um rodapé ainda. Vou deixar como está por agora porque vou mostrar-lhe isso um pouco mais tarde. Quando realmente chegamos a essas páginas, como você pode trabalhar nele e como você pode mudá-lo. E então você pode criar um componente em qualquer estágio do design e, em seguida, voltar para ele e trabalhar a partir dele. Mas, por enquanto, vamos clicar em Pré-visualizar para ver o que fizemos até agora. Então, mais uma vez, temos um login. Aprendemos mais aqui. Temos efeitos de pairar aqui, olhando muito bem devagar. Temos isso aqui, que vamos criar como grupo rolável mais tarde. E deixamos a data aqui. Então, eu vou voltar a ele logo após esta pré-estréia. Saiba mais. Então, o que funciona bem? Como você pode ver como o poder é realmente bom e dispara porque nós não precisamos de nada chique aqui. Porque só esta flecha está se movendo. Uma última coisa. Então vamos em frente e mudar essa data. Então, para mudar essa data, a única coisa que eu quero fazer é basicamente copiar e colar o texto daqui para o meu encontro e hábitos lácteos. Por isso, concluímos o design do nosso site. Espero que tenham gostado. Desculpe, o tutorial continuou por um pouco e é um vídeo um pouco mais longo, mas eu só queria mostrar-lhe em tantos detalhes quanto possível, o que é possível com o Adobe XD e realmente combinado design e prototipagem neste mesmo seção. Então eu realmente gosto de fazer isso como um objetivo junto porque eu acho que vocês vão tirar o máximo proveito disso quando eu fizer isso ao mesmo tempo. Então, lá temos. Esse é o design do nosso site concluído para a nossa página inicial. No próximo vídeo, vamos passar para a página de contas, e te vejo lá. 40. Criando design 2: Vamos agora voltar ao design e antes passar para a velocidade da conta chegar à próxima página, eu só queria fazer uma mudança rápida aqui. Então, se eu selecionar minha navegação, que é minha média. Agora, bem aqui, eu posso clicar neste botão aqui, que diz posição fixa ao rolar, que basicamente significa que quando os usuários rolam para baixo, esta navegação permanecerá fixada nesta posição. Então, se eu clicar aqui, em seguida, clique aqui para visualizar meu site. Você pode ver que quando eu começar a rolar, meu nav fica bem aqui no topo e nada muda. Mas quando eu clicar direito e erro. Então, aqui, posição fixa ao rolar. Em seguida, clique e visualize-o mais uma vez. Você pode ver que quando eu começar a rolar, meu navegador vai ficar bem ali. E porque nós incluímos neste efeito de borrão no fundo, você pode ver claramente que diferença isso faz porque ele apenas mostra que com todas essas interações e azul permanece basicamente o mesmo e permanece colocado. E você pode ver claramente que há algumas informações sobre o fundo, mas você ainda pode ver todos esses itens de navegação. Você pode ver este botão, você pode ver claramente o logotipo e assim por diante e assim por diante. Então eu realmente gosto de como isso se parece. N nós vamos correr com ele e nós vamos deixá-lo como ele está lá. Então a próxima coisa que vamos fazer aqui é eu realmente vou clicar bem aqui. E eu vou segurar minha tecla antiga ou Option. Vou posicionar esta cópia aqui. Mais com o lugar. E você sempre pode voltar aqui e ver a distância que você tem. Então são 70. Assim, podemos ter uma boa distância para design e wireframes. Então 70, e nós vamos fazer o mesmo. Então o design da página inicial vai ser o design de contas assim. E a primeira coisa que vamos fazer é copiar este NAV. Então aperte o Controle C e apague este, controle V, porque eu vou usá-lo em todo o meu design. Agora. A próxima coisa que vamos fazer é copiar a minha imagem de herói. Então, aperte o Control-C. Apague esses antigos. Você controla V e posiciona logo abaixo do meu navegador principal. E a razão pela qual eu fiz isso é porque agora nós temos neste gráfico, nós temos essa ilustração, e nós vamos apenas mover nosso texto e substituir a posição que estes. Então vamos em frente e fazer isso. Vou selecionar o meu texto e posicioná-lo ou aqui. Por isso, certifica-te que está bem aqui. Então vamos ver 245 colunas. E o que eu vou fazer é remover essa imagem porque eu vou trazer minha nova imagem para dentro E eu vou trazê-lo para algum lugar por aqui. Aqui está. Então, mais uma vez, é de elementos inversíveis. A imagem é a imagem premium. E acabei de usar o Adobe Photoshop para cortar o fundo da minha imagem. Então eu vou posicionar isso em algum lugar por aqui, digamos algo assim. E eu também vou virar minha máscara. Então, em algo assim. Então eu vou saltar para dentro e reposicionar o círculo do herói. Então essas duas pessoas estão no centro do meu círculo. Então, talvez algo assim. Sim, acho que funciona bem. Eu também vou virar minhas formas de herói são simplesmente clique aqui. E, em seguida, reposicioná-lo também. Eu posso mais em algum lugar por aqui porque eu não quero que ele esconda meu botão nesta fase. Eu também vou virar meu herói Elements e reorganizá-los um pouco. Então algo assim, eu acho que vai funcionar bem. Clique duas vezes para entrar e, em seguida, simplesmente clique duas vezes para reposicionar DES E eu também vou mover minha imagem aqui para que eu possa adicionar esses elementos e reposicioná-los ao redor. Finalmente moveu este aqui. E acho que funciona muito bem. O que vou fazer por último é dar aos meus textos o espaço de seis. Então 1-2-3, 4-5-6 colunas. Vou trazê-lo para este aqui. E então vou saltar para dentro e adicioná-lo às minhas ovelhas. Então eu vou posicionar este aqui, talvez este aqui. Ou melhor ainda, eu posso simplesmente mover este para cima. Mova este. Vamos ver, talvez ele ainda possa cortar meu botão total. Talvez algo como um disco. Aqui. Basta baixá-lo um pouco para que possamos evitar o texto, tanto quanto possível. E então eu posso seguir em frente com o próximo e simplesmente reorganizar aquele um pouco. Posso até clicar neste e reposicioná-lo aqui. E como ele disse muitas vezes, você sempre pode saltar para trás e reorganizar essas, essas formas como quiser. Talvez também possamos fazer isso. Sim, acho que funciona muito melhor. Vou clicar duas vezes aqui em uma posição e aqui, e é basicamente isso para nossa seção de heróis. Eu posso simplesmente fechá-lo e depois passar para essas outras seções. Então o que eu vou fazer a seguir é realmente usado alguns ícones aqui. Então você pode ver isso porque começar a contabilizar uma conta, Melanie, e assim por diante. Então eu vou pular para minha conta aberta, ou vamos chamar esta seção de contas porque ele vai conter contas diferentes. Então eu vou apenas saltar para dentro e colar minha sequência em AR ocorreu. E eu vou apenas posicioná-los para baixo. Então a carne aqui com esses ícones de fundo, vamos ver 1234. Talvez. Vamos ver você em um pouco mais de pneumonia. E 40 pixels para cima. Acho que funciona muito bem. E então o que eu vou fazer como eu sempre faço, simplesmente saltar de volta para os seus bens e queremos fazer tudo isso e apenas nosso componente local. Então MC, local, local, simples clique com o botão direito do mouse e clique em Tornar local, saltar para trás. E, e agora vou incluí-los em seus lugares. Então, para cada um desses, eu quero colocá-lo em seu próprio lugar. Então vamos ver. Temos esta conta Start. Vou posicioná-lo aqui e remover o ícone de estrela de uma conta. Vou colocá-lo aqui e fazer a mesma coisa. conta milenar colocou uma cura, quase esta. E, finalmente, conta premium e excluiu este. Mais uma vez, todos esses ícones são de elementos invertíveis. Agora eu vou incluir de volta minha cor só para que você possa ver como este se parece. E o que eu vou fazer é realmente criar o componente principal. E eu vou duplicar essa seção de informações e colocá-la dentro de todos esses. Então, vamos agora fazer isso. Vou fazer quatro cópias no total. E eu vou abrir minha conta inicial e arrastar e posicionar isso em. E vamos ver, vou chamar esse seletor, esse fundo. E eu vou mudar o nome de todos eles. Então não temos esse sindicato. Sabemos o que? - É. Basta clicar duas vezes e com base no seu nome. Agora que temos essa seção de informações, posso escondê-la completamente. Vou arrastar e posicionar outro cruzamento para a conta estrangeira. Arrastar e posicionar outro na minha conta milenar. E, finalmente, em arrastar e uma reposição esta para a minha conta premium. Agora vou mostrar minha conta Start. E eu vou realmente começar por incluir a informação real aqui. Então vamos clicar duas vezes dentro e a posição, todos estes como este. E eu também vou saltar para dentro daqui e saltar para dentro da minha mensagem. Ctrl-C no botão Domínio. Clique aqui. Então eu vou fechar meu ícone e clicar em Minha posição Info lá. E vamos ver o que é. Botão Mean, segure seu turno e seta para baixo para que você possa empurrá-lo para baixo em posição como esta. Vou posicioná-lo ali e vamos ver. Então estamos em 40, o que é bom. E eu simplesmente deletarei este. E vou mudar este texto para se aplicar assim. E eu vou clicar duas vezes, aperte o controle C para copiar este texto. Porque quando eu mudo para pairar, você pode ver que ainda diz Saiba mais. Então eu preciso alterá-lo para aplicar agora para este caso em particular. Então, mais uma vez, se eu te levar de volta aqui você pode ver Maine e botão original ainda diz saber mais. E todas essas instâncias ainda dizem saber mais. Mas aqui diz aplicado. Agora. Agora, mais uma vez, esta página real vai ser bem fácil porque como eu disse na sessão de wireframing, nós vamos adicioná-lo, apenas descartado esta parte do meio e isso, e isso vai continuar o mesmo. Mas finalmente vamos começar com o rodapé porque agora temos nossas contas e vou mostrar como você pode editar no rodapé e fazer as alterações para refletir em seu design. Então vamos começar com isso. Como eu disse, temos um botão principal do braço, temos o estado de horror terminado. Então eu vou fazer o controle C para copiá-lo. Vou me esconder, começar a contar. Mostrar conta estrangeira salto dentro de informações hit Controle V vai estar exatamente no mesmo local. Simplesmente troque de volta. Se verificarmos, você pode ver que está alinhado à esquerda com a grade e está 40 pixels da disciplina. Esconda-se para uma conta, abra uma conta milenar, vá para a informação e faça a mesma coisa. Então, mais uma vez, estamos em 40, mas simplesmente posicionando e abaixando. E, finalmente, vamos fazer o mesmo para uma conta premium. Então apague este controle V. Vamos verificar. E eu sempre faço essas verificações apenas para ter certeza de que quando eu começar a trabalhar, tudo parece bom e limpo e tudo funciona como deveria. Agora vamos saltar para dentro desta imagem e eu vou arrastar e soltar minha imagem dentro em posição como eles. Então eu vou clicar duas vezes em Hall minha tecla shift, minha tecla alt só para aumentar esse cara um pouco velho, posicioná-lo no centro, algo assim. E basicamente é isso para a conta Start. Antes de passarmos para diferentes seções, vamos simplesmente mudar esse texto. Então vai dizer Abra o seu perfeito, assim. Então, vamos dar um pouco mais de, vejamos, sensação diferente. Então parece mais amigável assim do que simplesmente abrir sua conta. Ele meio que se parece com a ordem. Então vamos para a conta estrangeira e vamos mudar seu nome também. Então, vou clicar duas vezes aqui. Isso nós temos aplicar agora decks, o que é bom. E eu vou clicar duas vezes dentro do meu arquivo principal, copiar e colar essa informação. Eu também vou arrastar e soltar minha imagem dentro. E vamos ver. Eu acho que está tudo bem, mas eles sempre podem aumentar um pouco assim, só para colocar esses caras mais em foco. Então, agora que isso está concluído, posso esconder esta seção e sempre posso ir para a seção do milênio, abrir isso. E vamos ver. Agora eu posso bem e copiar e colar minhas informações originais. Farei o mesmo pela mensagem. Vou simplesmente arrastar e soltar minha imagem dentro assim. E eu posso sempre clicar duas vezes e expandir essa imagem um pouco, só para que possamos colocá-la em foco um pouco melhor assim. E em vez de iniciar conta , deveria dizer conta milenar, assim. E vamos ver. Eu tenho que mudar este texto também, então ele escreve, ele corresponde melhor com esta conta real. Tudo bem, então agora que eu colei esse texto em, deixe-me rapidamente apenas verificar com a conta estrangeira. Eu não sei o que realmente aconteceu, mas obviamente há alguma falha aqui. Então eu vou ampliar rapidamente e redigitar tudo isso porque ele está usando o mesmo texto para o início. O Conde. Como você pode ver, o texto não muda aqui. Então eu vou pausar o vídeo ou aqui muito rapidamente e, em seguida, redigitar tudo isso. Ok, e agora que eu terminei, pai, deixe-me voltar e verificar esses outros. Então temos um novo banco começando a contar para uma conta, conta do millennials. E, finalmente, vamos lidar com essa conta premium. Então vamos ver. Tudo o que precisamos aqui é digitar pacote premium. Então o que eu vou usar é mais premium, então tipo de imagem. Então nessas duas pessoas são basicamente jovens empresários que eu acho que funciona bem. E primeiro, preciso me deixar verificar rapidamente com todos esses curadores. Então net, uh, agora que eu copiei e esse texto, o que nós temos que fazer é basicamente criar um componente. Então vamos pular em frente e começar com este primeiro. Então eu vou criar um componente para ele aqui. E a primeira conta que vai ser mostrada é começar a contar porque essa é conta básica deles e vai ser mostrada e como a opção padrão, se você quiser, para as pessoas que estão apenas vindo para este banco. Então eu vou apertar a tecla Control. E este será o nosso estado padrão. E dentro do estado padrão, vamos rapidamente fazer algo diferente. Então, eu vou realmente mais estado padrão esconder todas essas informações abaixo. Então, o que você pode fazer rapidamente é abrir todas as pastas, escolher informações sobre todas elas. Assim, usando sua tecla de controle e simplesmente Laura duplicidade para baixo. E este é basicamente o nosso estado padrão. Está perto disto. Agora vamos adicionar outro estado. E isso vai ser chamado de conta inicial. Então eu estou apenas criando esse estado padrão. Você pode ver que temos este espaço vazio e obviamente codificar pergunta calma vai ser bem aqui. Então, se eu te mostrar que isso vai ser como em código. E então, quando os usuários clicam em. Por exemplo, na conta inicial, que é o que estamos lidando agora, informações para a conta de armazenamento vai mostrar assim e esta informação inferior vai ser empurrada para baixo. Agora porque esta conta está realmente selecionada. Vamos brincar com o ícone. Então eu tenho cor e eu tenho delineado. Então eu simplesmente baixei a obesidade da minha cor para indicar que isso é clicado. Então simplesmente baixou a obesidade assim. Agora que concluímos isso, podemos passar para a conta estrangeira. Então clique aqui, novo estado de contagem de flúor. E nós vamos basicamente fazer o mesmo. Então salte para dentro do início da contagem. Vamos trazer a cor de volta. Vamos esconder a informação do disco. Vamos para a conta estrangeira. Alta a cor dele e mostrar D para fechar tudo isso. Em outro estado. Isto vai ser chamado de Conde Milenar. E basicamente você vê o que está por vir. Basicamente, vamos fazer a mesma coisa aqui também. Então esconda isso, mostre isso, volte para sua conta 400. Mostre isso e esconda isso. E, finalmente, vamos criar um para o pacote premium também. Como este. E eu vou saltar para dentro da conta milenar. Vou mostrar esta altura, esta altura, isto. E finalmente vou mostrar isso. E é basicamente isso. Agora o que podemos fazer é tocar entre eles para que possamos animá-los. Então, no estado padrão, o que precisamos fazer é realmente usar neste, que é o nosso seletor como um seletor médio. Então vamos fazer o protótipo. Basta clicar na aba de prototipagem, clicar duas vezes dentro para escolher o seletor e clicar em. E o que vamos usar um passo. Vamos usar o Auto Animate. Vamos usar está dentro, fora e vamos usar 0.4 segundos. Acho que funciona bem. Então, se eu te levar de volta mais uma vez, você pode ver que estamos no estado padrão. Então, neste estado, nada está aberto ainda. Então, mais uma vez, nada é aberto, tudo está fechado. E se você se lembra, eu mencionei que codificar, esta seção de perguntas comuns vai voltar ao topo. E vai estar em algum lugar por aqui. Mas como não podemos mostrar que no momento no Adobe XD, porque ainda não pode ser ao vivo, digamos que podemos fazer algo assim. Então eu vou mostrar-lhe dentro do design, a primeira conta que vai ser aberta e mostrada é começar a contagem sempre. Então vamos voltar à prototipagem. Como eu disse, nós escolhemos isso. Então, mais uma vez, estamos no estado padrão. Então, eu vou clicar duas vezes aqui, toque ou para animar fácil e fora 0,4 segundos. E você pode escolher o destino, que vai nos levar para o estado, que é conta inicial. E você vai obtê-lo como um gol junto. Então, clique duas vezes aqui. Click vai ter todas as mesmas informações. Então toque auto inimigos, fácil, não 0.4. e, neste caso, vamos para a conta estrangeira. Feche este clique. Vamos para a conta do Millennial. E, finalmente, clique, você vai para o pacote premium. Agora temos que fazer a mesma coisa, mas com conta inicial. Então você vai notar conta de início é aberto. Então o que precisamos fazer é clicar na contagem estrangeira e basicamente fazer a mesma coisa. O Adobe XD manterá todas essas configurações, então não se preocupe com elas. A única coisa que você realmente tem que fazer é simplesmente clicar entre todos eles. E mais uma vez, porque estou falando, está me levando muito mais tempo do que deveria. Mas quando você não está falando, quando você está focado, isso leva apenas alguns segundos. Então comece a conta. Isto vai ser uma conta milenar. Vai ser um pacote Premium, assim. E finalmente, vou fechar tudo isso. Estamos em conta estrangeira. Clique no millennial, faça a mesma coisa. Então comece o prêmio estrangeiro. Vou fechar tudo isso. E, finalmente, estamos no pacote premium. Isto vai ser começar no estrangeiro. E, finalmente, milenar e laticínios. Como isso, nós terminamos isso. Podes voltar e ver o carimbo de data/hora, mas acho que não demorei mais do que um minuto ou dois. Como eu disse, vamos começar com a conta inicial. Então isto é o que vai ser mostrado no início. E se eu te levar de volta para a pré-visualização, clique aqui. Quando abrir, deixe-me trazê-lo aqui. Mais uma vez, temos esses efeitos de pairar quando começamos a rolar, esta navegação rola conosco. E aqui temos. Então, começamos a contar para uma conta milenar e premium. Quando ele clique estrangeiro, Você pode ver que ele muda e alterna entre todos estes. E você pode ver como agradável e sutil esta transição é entre ícones coloridos e aqueles sem qualquer cor neles. Então, como eu disse, vamos manter o início da contagem, e você pode pular entre eles. Então, do início ao premium e assim por diante. E você pode ver que isso muda muito bem aplicando nossos trabalhos, mas não funciona aqui. Então não funciona nesses estados internos. Eu realmente não sei qual é o caso. Eu também contatei o suporte XD. Então você pode ver neste primeiro que ele funciona, mas nesses outros, ele não funciona. Então, se você souber qual é o problema, me avise e eu farei uma atualização ou se eu descobrir o problema, eu farei uma atualização também e deixarei vocês saberem o que podem fazer para corrigir isso. Então funciona em todos os estados. Talvez eu tenha que criar vários componentes deste botão. Eu realmente não sei. Mas vamos deixar assim porque neste primeiro, ele funciona e você pode mostrar que para reclinado abaixo que temos perguntas comuns. E finalmente, vamos voltar à nossa conta. Agora que sabemos que os nomes que sabemos começam estrangeiros, milenares e premium, podemos saltar para este primeiro. Clique duas vezes aqui. Então, chame de “começar”. E vejamos, talvez eu possa. Sim, vamos dar um nome de contagem inicial. Isto vai ser estrangeiro. Isto vai ser milenar. E isso vai ser Premium assim. E agora que terminei isso, o que podemos fazer é apertar a tecla Control para criar um componente. E agora o que podemos fazer é simplesmente apagar este. Clique neste Control-C, Control-V. E você pode clicar aqui para posicioná-lo na posição. E agora toda vez que você adicioná-lo, este primeiro, que é o componente original, ele vai refletir aqui também. Então, se eu te levar de volta aos nossos empréstimos, aqui estão eles. Você pode ver que nós temos e obter um dinheiro rápido, comprar um carro, comprar uma casa, refinanciar minha dívida. Então, mais uma vez, este segundo é, você pode ver que está completamente vazio. Então, se formos para o componente principal do nosso rodapé e eu pulo para dentro, eu posso ir aqui, copiar estes. Então bata no Control-C, Control-V, e posicione-os de acordo com os nossos empréstimos. Como este grupo, todos eles. O que vou fazer é clicar duas vezes aqui e conseguir um dinheiro rápido. Isto vai ser Viacom e comprar uma casa. E que ele encontre o departamento. E agora, se eu te levar de volta para aqui, você pode ver que temos a mesma seção. Então essa é a magia dos componentes. Isso é o quão poderosos eles são. E para mostrar isso ainda mais, posso levá-lo de volta para aqui, que é o nosso botão original, se você se lembra. Então, por exemplo, se eu escolher, por qualquer motivo, mudar essa cor para vermelho, você pode vê-la atualizada não apenas aqui, mas em todos esses botões adicionais. Eu também posso aumentar o raio do canto para 60, por exemplo. E você pode ver que ela aplicou essa mesma mudança em todos os meus botões. Então essa é realmente a magia desses componentes e a magia do Adobe XD. E eu realmente gosto de trabalhar assim, parece a mesma história para o rodapé, por exemplo. Então, se eu escolher mudar a cor, você pode ver que ela vai ser atualizada em todo o nosso design. Grande coisa sobre este rodapé. Se você optar por usá-lo como um componente. A mesma coisa aqui para navegação e é parar agora e assim por diante, é que você sempre pode criar estados de componentes adicionais para design responsivo. E vou mostrar isso mais tarde, quando chegarmos à seção de design responsivo. Então, isso é ótimo. Você pode simplesmente clicar e ele vai aplicar essa mudança em todos esses estados e através do telhado, design responsivo organizar. Mas é isso para este vídeo. Vejo-te na próxima, quando continuarmos com o nosso design. 41. Criando design 3: Vamos agora passar para a próxima página. E a próxima página aqui são empréstimos. Então eu vou fazer a mesma coisa. Então todo o meu velho Q e arrastá-lo para baixo. Estamos em 70 aqui também. Será que vamos chamar isso de design de pulmões. E acho que esqueci de mostrar no vídeo anterior, é porque esta é a página de contas. Vamos selecionar a conta. E agora o que podemos fazer é usar esse hit Control-C, clique aqui. Ou melhor ainda, podemos selecionar os dois. Então pode agora e herói Control-C, clique, clique, exclua estes dois Control-V posicionado no lugar. Mais doca agora em cima e pode agora bem aqui vai mostrar pertences. Então aqui temos. E agora a única coisa que vamos realmente mudar onde aqui estão o texto e a imagem. Então eu vou excluir nossa imagem, e eu vou arrastar e soltar minha imagem dentro daqui. Aqui está. E eu vou segurar Shift Alt e clique com o botão esquerdo do mouse para habilitá-lo para baixo uniformemente. Posicioná-lo abaixo de uma linha como esta, C como aquela. E posso posicionar isto para ser um bem aqui. E você pode brincar com esses elementos. Você pode reposicioná-los. Eu posso, por exemplo, girar isso, eles podem mover isso para cima. Eu posso virar antipatia. Então mova-o lá para fora. E lá temos. Então agora vamos voltar e começar alterando o texto em si. Vou clicar duas vezes lá dentro. Vou clicar duas vezes dentro daqui, mudar este texto e encerrar o dia. Essa é a nossa imagem de herói concluída. E essa é a vantagem de ter “D” já feito seções. E eu posso então saltar para dentro e ajustar minha imagem ou apenas um pouquinho, por exemplo, eu posso movê-la aqui. Se eu quiser posicionar um pouco diferente em torno deste círculo, talvez eu possa colocar isso aqui. Você pode até mudar essas formas se quiser, mas eu vou deixar assim. Então a próxima coisa que vamos fazer é mudar isso. E isso é basicamente vai ser exatamente a mesma seção e exatamente as mesmas configurações que este aqui. Então eu vou pular aqui e eu vou escolher esses ícones e colá-los dentro. Então eu vou pular aqui, clique duas vezes, e baseado aqui, eu vou baseá-lo exatamente na mesma posição. E eu mortes no globo ocular tão bem como aconteceu com a anterior. Então, em algum lugar por aqui, 123440 pixels acima e denso, basicamente saltando bem aqui. Vou clicar com o botão direito do mouse, fazer local, ME Klocal, fazer local, e finalmente fazer geléia local de volta. E o que vou fazer é basicamente a mesma coisa que fiz com a anterior. Vou abrir todas essas pastas e arrastar e soltar o ícone Muito deve ser e simplesmente excluiu o titular do lugar de início. Como este. Então biochar e comprar uma casa. E finalmente, refinanciar meu pescoço. Agora o que eu também vou fazer é chamar este seletor. Então, como eu fiz com o anterior, eu vou apertar o controle D, mover informações para dentro, fechá-lo chamado este seletor também. Controle D mover para informações dentro, assim. E, finalmente, neste primeiro, uma visão mais profunda das informações originais. Mas eu vou fazer o próximo é realmente começar com algumas mudanças aqui. E eu quero criar tudo como eu fiz antes. Então, se você se lembra, primeiro fizemos todo o projeto, todas as informações e, em seguida, criamos componentes ou para os empréstimos e assim por diante. Então vou saltar para dentro e começar a partir daqui. Então vou diminuir a obesidade de todos estes e começar com o meu dinheiro rápido. Então o que eu vou fazer é arrastar e soltar minha visão de imagem para mim dinheiro rápido como esse. Então o que temos é um corte em 30 minutos. E vou simplesmente copiar este texto aqui. E eu vou fazer o mesmo para estes são os campos de texto. Apenas inclua as informações que o cliente me forneceu. E você sempre pode obter essa informação basicamente porque você está obtendo de seu cliente. E o cliente sempre o fez, pelo menos nesta informação. Agora que fizemos isso, vamos mais querer comprar um carro como aquele. E nós fazemos biochar, basicamente vai ser a mesma coisa mais uma vez, mas nós vamos ter algumas informações adicionais incluídas, bem como ícones de largura. Então esses ícones são basicamente vai ser um pouco diferente desses. Então, para nós, vamos saltar para dentro e realmente mudar este texto. Então, neste primeiro texto vai ser assim. Então, uma ampla gama de coro, documentação mínima vai bater no mesmo. Eu só vou mudar nesta circunstância. E finalmente, temos este último texto, como a dívida. E agora eu tenho dois ícones que eu vou copiar e colar dentro. Então eu vou colá-los bem aqui. Vou saltar para trás, clicar com o botão direito, tornar local, clicar com o botão direito, tornar-me local. Volte para o meu painel de camadas. E eu vou posicionar este primeiro ícone todo o caminho até o topo. E o posicioná-lo aqui mesmo no lugar deste ícone de cronômetro, excluir e meu ícone de cronômetro. Vou fechar isto por um momento. Documentação vai ser a mesma e este ícone ecológico vai simplesmente para a posição de discípulo. Assim. Exclua o ícone anterior e é basicamente isso. A única coisa que nos resta fazer aqui é incluir uma nova imagem. Vou arrastar e soltar minha imagem, ousar. E eu vou simplesmente movê-lo e talvez aumentá-lo apenas um pouco de tamanho. Então você precisa ver isso acoplado escolher um carro basicamente. Então esse é o objetivo desta seção. E finalmente, vamos mudar esta seção na parte inferior. Porque como eles disseram no vídeo anterior em que trabalhamos em wireframe, obviamente vai parecer um pouco diferente. Para um empréstimo para comprar um carro, para comprar uma casa, ou para obter um dinheiro rápido. O que nós também vamos fazer é pular dentro de todos eles e mudar, mudar o botão. Então o que eu vou fazer é talvez clicar neste. Escolha este botão. Eu poderia usar este, mas tanto faz, eu posso mudar isso. Então pule dentro da minha informação e obtenha uma resposta. Saltou. Então, aqui mesmo, clique em Aplicar agora posicioná-lo em um lugar como este. E eu vou remover isso e mudá-lo para aplicar agora. Já está em aplicação agora. Então vamos deixar isso aí. Estamos em 74, o espaçamento neste tempo, mas não importa. Parece bem de qualquer maneira. E desta seção para baixo ainda estamos em 150, então isso é bom também. Controle C para copiá-lo e ocultá-lo. Vá para esta seção info, obtenha o controle de resposta V para colá-lo no lugar. Então vamos ver, estamos em 70 aqui também. Vou apagar o antigo, simplesmente substituí-lo aqui. E vamos em frente e editar. Todos esses outros. Veja apagar este 170, escondê-lo e clique aqui. Posição em 70 e quase, e este último também. Então vamos verificar mais uma vez. Então temos no mesmo dia ou resposta. Pagar um carro. Temos resposta em 20 minutos para um fluxo de caixa. E agora podemos ir em frente e trabalhar em comprar uma casa. Então vamos fazer isso agora. Então o que eu posso fazer com isso na verdade é que eu posso incluir o texto aqui no topo, ou eu posso simplesmente deixá-lo assim. Vamos ver. Sim, vamos deixar assim. Porque vamos ter este texto aqui. E este primeiro vai escrever, vamos ver, perto da casa dos seus sonhos, assim, documentação mínima vai continuar a mesma. Mas isso vai mudar. Completamente online e vamos mudar isto aqui mesmo. Então a única coisa que vamos mudar é que temos um ícone aqui para a casa. Então vamos mudar o nome para comprar a casa dos seus sonhos. Em vez do ícone do cronômetro, o posicione esta posição do ícone Início aqui. E estes são grandes ícones finos. Então, onde quer que você veja esses ícones, eles são grande ícone stand. E onde quer que você veja ícones em cores, eles são apenas de ícones em diante e elementos vitais. Então, antes de querermos ouvir, eu só quero fazer uma mudança rápida aqui também, os nomes das pastas. Tão grande variedade de carros, documentação, o mesmo. E aqui vamos escrever assim. Ok, então agora que isso está concluído, vamos voltar para comprar uma casa. Mudamos o texto e a única coisa que nos resta fazer é a imagem em si. Então vamos ver, arraste e solte para dentro. Temos um corretor de imóveis e um casal comprando uma casa. Parece muito bom. Posicioná-lo na polícia assim. Networks, tudo bem. E agora esta seção está concluída. Podemos seguir em frente agora, finalmente, para este último que é refinanciar a minha profundidade. E deixe-me imediatamente e saltar site e adicionar minha imagem. Vou mover um disco acoplado. Então em algum lugar por aqui. Ou talvez um pouco mais, algo assim. E vamos agora seguir em frente e ver como isso vai ficar com nossas informações adicionadas. Então vamos ver. Vamos chamar isso de um pouco diferente e vamos dar a ele alguns outros ícones, bem como texto. Cálculo em 20 minutos. Vamos ver. Documentação vai ficar na mesma. Eu só vou mudar este texto completamente online e nós vamos mudar isso para aqui. O que acabei de notar é que estou usando um texto falso para este primeiro. Vamos ver aqui, rápido, nós mudamos, tudo bem. Então vamos em frente e agora ligar isso de volta. Assim. E vamos mudar este primeiro ícone. Cálculo em 20 minutos. Vamos mudar isso. VP de Controle, sente-se. Temos um ícone de calculadora. E você pode ver o poder dos conjuntos de ícones. Porque todos esses ícones pertencem juntos. Basicamente, todos eles parecem o mesmo estilo negócio tinha a mesma espessura das linhas. Então todos eles funcionam bem com este design. Finalmente, eu só vou renomear isso para calcular a exclusão em 20 minutos. E é basicamente isso. Esta seção está concluída. Ou, finalmente, mudou o texto abaixo para obter uma resposta em 20 minutos. Vamos mudar o texto aqui também. Meu pai e eu acho que eu esqueci de mudar e que para um comprar uma casa, comprar um carro. Nós mudamos. E comprar casa. Sim. Então temos que mudar a dívida agora. Então vamos ver. Neste caso, vamos ter uma resposta rápida hoje. Muitos cliques para saltar para dentro. Como este. Então as respostas de hoje, e é basicamente isso. Completamos todas as nossas seções. Então, finalmente, o que vamos fazer é criar nossos componentes. Então o que eu vou fazer aqui é para este primeiro componente, vamos bater Control K. mais uma vez, como aqui. Se você se lembrar, esta seção inferior com perguntas comuns vai se mover bem aqui para o topo porque toda essa informação vai ser escondida no estado padrão. Então vamos abrir a edição e ocultar todas as informações. Clique duas vezes em mim 0 tecla ou você pode simplesmente Lord obesidade para 0. Vou fechar todas as pastas. Comece criando um novo estado, que vai ser obter um corte rápido como esse no cache getter CPU, o que vamos fazer é mudar o ícone, música vai esconder a cor. E este também. Vou mostrar minhas informações. E é basicamente isso. Vamos agora seguir em frente e criar outro estado que vai ser biochar. No Biochar, vamos voltar ao dinheiro rápido. Vamos trazer a cor de volta assim. Vou esconder esta informação. Vá comprar um carro. Altura, esta altura, esta cor também. Volte e eu mostrarei minhas informações aqui. Agora, vamos seguir em frente e fechar isso. Posso criar um novo estado. Vou ligar para este estado e comprar uma casa. E sobre isso, vamos voltar e comprar um carro. Vamos trazer tudo isso de volta. Então eu vou trazer de volta esta cor, esta cor. Feche tudo, esconda este pecador. Mostrei esta informação. E finalmente, vamos ver. Ocultar esta cor, clique duas vezes para ocultar esta cor. É isso. E, finalmente, vamos em frente e criar um novo estado para um refinanciar minha profundidade, assim, e fazer a mesma coisa basicamente. Então abra isso. Vamos ver. Vou esconder esta informação. E eu vou mostrar cor de volta em ambos estes para que ele financiou a minha dívida. E eu vou esconder descolorida esconder esta cor. Vamos ver se eu fiz isso. Eu fiz. E finalmente mostrar minhas informações. Então é basicamente isso para o processo de criação. Agora vem a parte divertida mais uma vez. E vamos saltar para o modo de prototipagem. No estado padrão, vamos fazer um seletor. E se você está se perguntando por que ainda estamos fazendo este seletor no estado padrão é mostrar aos clientes e aos desenvolvedores como tudo isso vai parecer uma vez que ele está no estado padrão. Então você pode mostrar a eles que todos esses ícones têm cor como você pode ver. E você pode mostrar-lhes que esta seção inferior com as perguntas e rodapé vai vir aqui para o topo. Então vamos começar. Então, como eu disse, estamos em um estado padrão. Vou clicar duas vezes aqui. Clique como você pode ver, Adobe XD manteve todas as nossas configurações da guia anterior ou para animar facilmente. Agora 0.4. o que é importante para a consistência porque você quer mostrá-lo aos seus clientes e aos desenvolvedores e membros da sua equipe. Por exemplo, apenas um quão consistente este site é entidade que você está usando a mesma animação, que vai reduzir o tempo que o desenvolvedor precisa para desenvolver este design no final do dia. Então eu vou escolher obter corte rápido necessário aqui. Comprar um carro, comprar uma casa, e finalmente, refinanciar a minha dívida. Vou fechar todas estas pastas. Se está se perguntando por que estou causando pastas, é porque eu gosto disso. Quero manter as coisas bonitas e limpas e quer me distrair litro. Então isto vai ser comprar um carro. Se você está ouvindo alguns batendo do lado de fora, é apenas alguém se preparando bem para o inverno. Sinto muito se você pode ouvir isso, mas eu realmente não. Não posso fazer nada sobre isso. Então só tentei ignorar. Arranja um corte rápido. Então, mais uma vez, consiga um dinheiro rápido pela casa. E finalmente, nós refinanciamos minha profundidade porque eu escolhi ter meu escritório fora da cidade. Então, em vez de carros correndo lá fora, você pode ouvir algo assim. Arranja um dinheiro rápido. Mas pelo menos o ar é mais limpo e é muito mais silencioso na maioria das vezes. Vamos voltar para nossas roupas de design, tudo isso. E finalmente estamos em refinanciado, jazemos mortos. Então eu vou escolher isso, obter um dinheiro rápido vai ser biochar e comprar uma casa. E chamamos-lhe um dia. Agora que você sabe como trabalhar com tudo isso, como você pode ver, é muito mais rápido. Novamente, o estado padrão que você vai mostrar não é o estado padrão, mas sim obter um dinheiro rápido. Então o primeiro que é selecionado, e é basicamente isso. Posso voltar para a pré-visualização do meu kit de design só para ver como isso se parece. Amplie, vá em tela cheia. Quando ele começa a rolar, você pode ver que temos empréstimos selecionados. Tudo parece bom e limpo. E quando ele começa a rolar para baixo, você pode ver esta seção muito bem. Então, quando eu clico entre eles, você pode ver que essa informação muda muito bem. E ainda temos essa animação bonita e essas transições entre nossos ícones. Mais uma vez, nosso primeiro funciona, mas se eu clicar no biochar, você pode ver que o efeito de pairar não funciona aqui também. Então, mais uma vez, se todos souberem, qual é a razão para isso, me avise e eu resolverei com prazer. Agora, temos que adaptar isso para termos empréstimos em cartões. Então vamos em frente e colar o original. Eu sempre posso fazer isso para que eu possa apertar o controle C nesta cópia do original, posicioná-lo para baixo, trocá-lo de volta. E agora que sabemos quais deles estão incluídos. Então sabemos que temos esses pulmões e os incluímos. É basicamente isso. No próximo vídeo, eu vou mostrar cartões e nós vamos incluir dois cartões aqui também. Mas como você pode ver, já, nós terminamos. Então eu tenho cartões de crédito, cartões de débito, cartões personalizados e cartões de presente. Talvez para os cartões personalizados. Estamos aqui onde diz para criar o seu próprio. Não preenchemos isso, mas ainda temos vales-presente e assim por diante. Então é basicamente isso para este vídeo. Como eu disse no próximo, vamos brincar com essas cartas. Vou mostrar-vos algumas animações avançadas. E vamos terminar essa página também. Então, vemo-nos lá. 42. Criando design 4: Certo, então vamos começar com as cartas. E este vai ser o mais complicado porque nós realmente vamos incluir algumas animações aqui em todos estes e neste. Então vamos começar. Vou mostrar-lhe tudo isso simplesmente cair alt e são os mesmos como fizemos para todos estes outros, são 70 aqui. Eles vão fazer cartas cortadas, nove aqui, assim. Eu também vou fazer a mesma coisa que eu fiz anteriormente. Então, copie isto, apague estes dois. Então eu uso meus homens agora herói poderia controlar V para colá-los em minha média, agora, move-los para nós abaixo de cima. Agora, meu nav principal escolher cartões, obviamente. E aqui, vamos começar com a edição. A primeira coisa que vou fazer é apimentar um pouco as coisas. Então eu vou trocar de lugar para o círculo e 4dx faz. Eu também vou girar apenas um pouco, e eu vou girar este também para gostar desta posição para resolver por aqui. Irei então em frente e incluirei minha imagem. Então vamos arrastar e soltar minha imagem lá dentro. Mais uma vez, a imagem é de um elemento vital e eu apenas fui em frente e usei Photoshop para cortar o fundo desta jovem senhora. Vi posição em algum lugar por aqui. Então olhe meu herói, BG, minha posição de imagem em desafio, mover minha imagem, ousar remover minha imagem antiga e usar minha nova imagem para posicionar. Está algures no centro do meu círculo. Em algum lugar por aqui ou dois. Acho que vai funcionar muito bem. Em nota, vamos começar com a edição do texto. Então eu vou clicar duas vezes, mudar o texto aqui, mudar o texto aqui também, e você não está perdendo a morte. Nós ainda estamos usando pilha, que vai chamar vir realmente útil mais tarde quando realmente chegar à parte responsiva deste design. Agora que isso está concluído, eu posso passar rapidamente para a segunda seção porque nós já completamos esta parte do nosso projeto. O que eu realmente vou fazer aqui é saltar para esta parte do meu projeto. Use meu círculo BG. E eu vou realmente usar nesta cor. E vamos ver. Posso então baixar a obesidade, por exemplo. Ou posso até fazer uma melhor. Escolha um desfoque de fundo e, em seguida, vá com 5050. E depois oito em sagacidade e desculpe, na obesidade. E o que é que isso vai fazer? Será que vai trazer apenas um pouco de diferenciação entre o cartão, o círculo, e todos esses outros elementos. Então eu acho que isso vai funcionar muito bem. Checkpointing anti-herói, forma de heróis. Isso é bom. A máscara está abaixo. Ok, então agora vamos em frente e seguir em frente para o nosso carrinho. Então, para fazer isso, vou precisar de um logo aqui. Eu vou precisar do nosso logotipo Visa e MasterCard aqui de uma necessidade de alguns números, algum nome e uma data bem aqui. Então vamos começar com todas essas coisas. Então, para começar, vou pular aqui mesmo, localizar meu logotipo, arrastar e soltá-lo na posição. E vamos ver. Vou posicioná-lo aqui, certificar-me que está no meu cartão. Como uma dívida. Vou posicioná-lo lá. Paul turno, 12341234. Eu acho que tudo bem. Sim. E agora vou exportá-la daqui. Então, para fazer isso, eu vou segurar Controle ou Comando e E, e eu vou exportá-lo como B e G. A razão pela qual eu estou fazendo isso é porque eu vou escalar design de descartar e usá-lo em todos esses projetos. Então nós vamos basicamente ter o mesmo design, mas este logotipo não é realmente bom com escala. Então, se eu te mostrar isso, você pode ver que está mudando bem aqui. E se eu segurar a tecla Shift e esta forma distorce e assim por diante. Então, isso não é realmente tudo isso. Bem. Eu também irei em frente e renomeá-lo na minha área de trabalho. Então eu vou renomeá-lo para log-log barra Cor. E então eu vou saltar para trás bem aqui. Escolha a versão cinza exportada. Então ele teria o Controle ou o Comando E exportado como PNG. E eu vou adicionar dívida a um logotipo, preto e branco. E então eu vou selecionar a dose para um arrasto e soltá-los aqui mesmo. Então você pode ver que esta é a cor do logotipo. Este é o logotipo em preto e branco. E, obviamente, quando você baixar isso vai escalar muito bem. Sem nenhum problema. Obviamente, a qualidade não é tão grande, mas você vai ser capaz de trabalhar com ela. No entanto. Substitua esses. Vou me certificar de que eles estão no centro assim. Vou posicioná-los na posição original aqui mesmo. E você também pode usar a versão padrão aqui. Então, como versão VG, se você quiser, mas eu vou simplesmente escondê-lo por enquanto. Vou esconder preto e branco escuro para o logotipo. E aqui temos nosso logotipo original. O que eu estou realmente indo para fazer para esta grande versão é usado o original um sólido me esconder estes dois. Local Pushkin White e eu usaremos meu logotipo do meio. Esconda todos esses outros. E lá temos. Então, a primeira coisa que vou fazer é usar os logotipos do meu cartão. Então eu vou usar o logotipo Visa e MasterCard. Então eu fiz basicamente a mesma coisa. Desculpe. Isso é o que acontece quando você arrasta e solta na posição. Quero arrastar e largar lá dentro. Então aqui temos todos os detalhes do logotipo. Então você pode ver que temos deve ter atual preto e branco e em cores temos visto em cores e branco. Eu também baixar estes de e elementos de água. Então, aí está. Como pode ver, estou usando todos esses ativos. Belo membro. Então mude, certifique-se de que está na linha. Shift 1234. Vamos ver se estamos lá. Estamos agora, então estamos a 40. E o que vou fazer é agrupá-los. Então eu vou ter, deve ter conseguido um grupo. E eu também vou ter o grupo SAR assim. E eu vou me certificar de fazer minhas mudanças e fazer meus estados. Mas antes de tudo isso, vamos em frente e vamos. Primeiro baixou a obesidade destas fusões a preto e branco. E para este primeiro, eu vou esconder meu MasterCard completamente, então eu estou apenas com o visto. O que eu vou fazer a seguir é eu vou fazer o mesmo para o logotipo, então eu vou fazer essas mudanças. Então chama-lhe Logo. E o que vou fazer a seguir é usar algum texto. Então vamos em frente e, por exemplo, duplicar este texto. Posicione-o aqui em baixo, certifique-se de que vai pela esquerda. E eu vou simplesmente usar alguns números lá apenas para indicar que isso é realmente um cartão. Então 367 para criar espaço, ou 282 para 938 para 90372, ou você pode simplesmente usar qualquer número antigo. Na verdade, tudo depende de você. Então estamos em 48. Se ele acha que isso não funciona muito bem, você pode tentar com 90, mas eu acho que 48 funciona bem com esta posição caso. Está em algum lugar por aqui ou podemos encaixá-lo no meio como está agora. E também podemos mover esta informação para baixo ainda mais, se assim quisermos. Mas, por enquanto, vamos deixar isso lá para que possamos terminar essa informação de fundo e ver como isso vai parecer. Então eu vou duplicar este, posicioná-lo um pouco para baixo. E vamos ver, para este, eu posso usar algo menor, então vamos chamá-lo de 36. Bem, vamos ver como 24 parece. Sim, 18-24 vai ser muito melhor. Então vamos ver. Expira no nono mês de 2021. Vou duplicá-lo. Certifique-se de que está alinhado à direita e vamos dar-lhe um nome de qual era o nome que realmente usamos lá. Então vamos dar uma olhada. Usamos Michael Jacobs. Então vamos usar o mesmo nome em velhos. Como isso. Vou certificar-me de posicioná-lo 40 do meu cartão. Você também pode selecionar assim, bem profundidade 1234. E você pode ver que estamos a 40 em todos esses. Então o que nós também podemos fazer é ter certeza de que estamos no 40 para baixo para a mudança 123456. E vamos agora ver com esses logotipos, certifique-se de selecionar MasterCard também. Então, seis, agora estamos em 60, estamos em 60. E também posso fazer esse truque que já te mostrei. Portanto, certifique-se de usar Rectangle, vá de cima para baixo do texto. E agora posicione este texto no centro entre seu logotipo e outros textos. E lá temos. Temos o design do nosso cartão concluído. Agora o que eu vou fazer é agrupar tudo isso. Então eu vou posicionar isso aqui, cartão BG, vamos dar esse nome. Como isso. Vou agrupá-los. Chame de cartão de crédito ou simplesmente cartão. Sim, vamos dar-lhe o nome da presa ocorreu porque já temos cartões para que possamos diferenciá-los. Então vamos ver, temos círculo de fundo aqui, temos um carrinho. Nós temos esse texto, seu companheiro diário, e nos tornamos Michael Jacobs por alguma razão indo para fora em nós. Isso é bom. Aqui, reordenado. Então essa é a nossa corrente. Agora o que podemos fazer é realmente usar algumas outras cores que não fazem parte do nosso design. Então eu vou simplesmente usar uma dessas cores. Então eu vou realmente ir para o gradiente apenas para torná-lo um pouco mais chique. E vamos ver, eu posso girar isso para aqui. Eu posso girar isso para aqui, por exemplo, fazer alguns dois como este. Na cor mais escura. Vou aplicar esta cor. Na cor mais clara, vou aplicar a mesma coluna. E então em uma versão mais leve, eu simplesmente vou fazer algo assim. E uma versão mais escura. Talvez eu possa até ir um pouco mais escuro para alcançar este tipo de resultado brilhante ou como você quiser chamá-lo. Eu acho que o visto vai funcionar muito bem aqui, mas como você pode ver, nossas cartas precisam ser brancas. Vamos tentar com esta cor. Acho que funciona bem. E para o nosso logotipo, o que também podemos fazer é simplesmente pular dentro deste estado original e mudar isso para aqui. Então ainda podemos ler nosso logotipo, mas agora o texto é branco. E é isso para a primeira versão, agora vou voltar e pressionar Control ou Command K para usar isso como um estado padrão. Então, mais uma vez, estamos no estado padrão para o nosso cartão Visa. Agora vamos em frente e criar outro. Então isso vai ser no estado padrão para o cartão de visto, mas preto e branco, então v sub w. tão preto e branco. E eu vou entrar aqui, usar meu Visa, couro preto e branco, disciplina. E lá temos. E podemos mudar o logotipo à vontade, se precisarmos. O que vamos fazer a seguir é criar outro estado. Vamos chamar-lhe MasterCard. E basicamente fazer a mesma coisa. Então mostre MasterCard esconder visto, certifica-se de que a versão em preto e branco está escondido. E é basicamente isso para o MasterCard. E agora vamos para o novo cartão mestre de qualidade do estado. Desculpe, MasterCard. O W para o preto e branco, saltar dentro MasterCard e dar este para cair e dar este 0 e Terry Earth. Então essas são as nossas cartas. E agora nós completamos a dívida. Agora o que eu vou fazer a seguir é na verdade eu vou agrupar esses dois e criar um componente a partir deles. E quando a pessoa paira, vai ser bem simples mostrar isso. Então vamos fazer isso. Então o que eu disse foi quando eles pairarem e nós vamos usar o primeiro. Então o estado padrão para este, quando eles pairar vai basicamente aumentar um pouco e mostrar um pouco mais em tamanho. Então vamos fazer isso. Então vamos agrupar esses dois. Então controle G, vamos chamá-lo de pairar cartão, só para que saibamos o que é. Aperte a tecla Control. E a única coisa que vou acrescentar aqui é Horace State, chamá-lo pairado ou atual pairar rápido, quero chamá-lo. E agora em pairar, eu vou simplesmente aumentar meu cartão de crédito e apenas um pouco. Então, dois, algo assim, por exemplo, eu vou ter certeza de que eu ainda estou dentro dos meus pontos centrais, algo assim. Então podemos ir para o estado padrão, para o estado de horror, e podemos verificar entre todos esses números se tudo parece bem, eu acho que parece. E mais uma coisa que eu vou fazer é no estado padrão, eu vou adicionar uma sombra no meu cartão. Então vamos ver, podemos abri-la. Podemos ir para o círculo de fundo e podemos adicionar esta pequena sombra agradável. Então 20 a 2050, por exemplo. Vamos ver como isso funciona. Não está me mostrando nada porque alguns estão fazendo isso sob o círculo. Então eu vou escolher o carro BG e depois fazer a sombra. Então é 10x 2050, eu acho que parece bem. E vamos ver. Vou reduzir a obesidade para 0. E então podemos ir para o carrinho pairar, cartão de crédito, cartão, BG, e aumentar essa obesidade de volta para, digamos, 20% para ver como isso funciona. Ou talvez algo menos. Então, talvez 12 ou 10. Acho que dez funciona bem. Agora, finalmente, vamos em frente e testá-lo. Antes de o fazermos, precisamos voltar para o estado padrão. E clique em Visualizar. Então, agora que a visualização está aberta, você pode ver que selecionamos o botão cartões ainda funciona bem. Tudo parece bem. Então agora você pode ver Descartar olhando muito bonito. Mas quando você passa o mouse, você pode vê-lo aumentando e esses números estão mudando. Também temos essa bela sombra de fundo aparecendo do nada. Você também pode reduzir o tamanho do círculo se quiser. Mas tudo parece bem quando os usuários se arrastam para baixo assim. Então isso abre a interface basicamente. Então nada lá dentro realmente muda. Tudo o que muda é o cartão em si. Então eu acho que funciona bem. Vamos agora ir em frente e editar este cartão para apenas um pouco mais. Então o que podemos fazer é pular dentro do nosso cartão. E podemos ir em frente e adicionar algumas formas só para apimentar as coisas um pouco mais. Então eu posso adicionar uma forma assim. Posso usar uma grade de repetição como esta. Posso remover a borda e rodar a grade de repetição. Mas primeiro vamos desagrupá-lo, chamá-lo de retângulos que são girados para algo assim. Vamos dizer. Escrever a morte funciona bem. Posicionado em algum lugar por aqui. Só para que você não possa ver neste ângulo. Talvez girá-lo só um pouco. Ver jogador em com a posição. E eu acho que isso parece bom. Eu vou então saltar insight. Ele tinha controle x duas posições que dentro eu vou bater o controle de v, posicioná-lo todo o caminho para baixo, bater o controle D no BG atual. Para que eu possa posicioná-lo. E depois o que vou fazer é usar a minha máscara. Então selecione esses dois Shift Control M. E o que isso vai fazer é mascarar essas formas. Então eu vou chamá-lo de linhas. Todos os retângulos. No entanto você quer chamá-lo de forma simples, agora eu posso ir em frente e desagrupar estes se você quiser, mas eu ainda posso deixá-los dentro dessa pasta. A única coisa que vou fazer é diminuir a obesidade. Então, por exemplo, 10%, eu acho que funciona muito bem. O que eu também vou fazer é bater no Controle C e ir para cada um dos meus estados para baseá-lo. Então posicione-o todo o caminho para baixo. Certifica-te que está em todos os Estados Unidos. Então carro BG e, em seguida, retângulos. Então, a primeira camada no topo, como você pode ver, vá para o MasterCard e faça as mesmas coisas. Então, aqui mesmo. E, finalmente, MasterCard, preto e branco, clique aqui. E lá temos. Nós terminamos. E que eu acho que funciona muito bem. Bem, agora é o botão de pré-visualização e veja mais uma vez como isso se parece. Então podemos ver que temos essas lindas linhas, mas como você pode ver, elas não estão mais aqui, então precisamos colá-las, nesse estado também. Então vamos saltar para trás cartão de crédito rígido pairar, e vamos usar esses retângulos. Ir para dentro do meu cartão, idéia clicker horror, retângulos de cartão de crédito. Há, você pode ver, ousar, ousar, mas eles não estão aparecendo por alguma razão. Eu realmente não sei por quê. Vamos tentar de novo. Aqui estão eles. Então, retângulos. E eu vou posicioná-lo lá e garantir que eles não estão na fila. Se eles são esclarecidos Lindert, e nós vamos apagar estes. Então, na sujeira. E de qualquer maneira ele estado padrão, estado porto. Vamos trazer isso mais uma vez. Então, como você pode ver, eles estão aumentando bem. Eles estão se movendo muito bem e tudo funciona como deveria. Você pode sempre saltar lado e adicionar alguma textura de fundo aqui, se você quiser, você pode adicionar um gradiente mais complexo. Cabe a você e o que você quer fazer. Então domínio e fator importante aqui é, é que nós terminamos este cartão de grau, então ele se encaixa em todos estes porque nós vamos saltar dentro de uma notícia este cartão de crédito para todos esses cartões e para baixo. Então, o que eu estou recomendando para você agora é apertar o controle S para salvar seu projeto. E o que nós realmente vamos fazer a seguir é saltar dentro de um adicionado todos esses cartões. Então o que vamos fazer quando terminar de salvar a linha agora é saltar para dentro daqui. Então vamos deixar o nosso cartão aqui. Aqui temos, o cartão de crédito. Vou arrastá-lo e soltá-lo aqui em posição. E eu vou brincar com o nome mencionado. Então é por isso que incluímos esses PNGs apenas para que possamos brincar com a posição assim. Então eu vou manter a tecla Shift pressionada e arrastá-la até aqui. E o que vou fazer a seguir é saltar para dentro com cartão de crédito. E vou simplesmente reorganizar alguns desses detalhes. Então eu vou começar com o logotipo. Vou ocultar meu logotipo original e incluir a cor do logotipo, por exemplo. Ou vamos chamá-lo de log de preto e branco. Vamos ver. Como podemos fazer isso? Vamos ver, porque eu vou precisar da versão com isso e com este texto branco. Então talvez eu possa exportar essa, mas vamos trapacear um pouco. Vamos primeiro posicionar a cor do nosso logotipo aqui. Eu vou reduzir seu tamanho e posicioná-lo para ser em 40, digamos assim. Agora vamos mais palavras para o turno 1212, talvez 20 é melhor. Agora Visa e MasterCard, vamos selecioná-los, certifique-se de que eles estão no centro. Todos eles e amadurecemos e decidimos, OK, não fiques firme, vê, ver como podemos fazer isso. E eles ainda não são por azar ou vamos com as índias. Primeiro. Como este. Agora pule dentro de uma corrente imperdível como esta. Então, apenas certifique-se que holandês, que decide como eu. E você sempre vai ter alguns desses problemas. Então, apenas certifique-se de selecioná-los e que você sabe o que você está fazendo basicamente. Então o que eu vou fazer é realmente cair ambos na pasta de logotipo apenas para que eu possa alinhá-los com o logotipo, secá-los Alto rapidamente. Posicione minha pasta de logotipo, opte por exemplo, Dan o, posicione-os na borda esquerda, certifique-se de que eles são 20. E eu vou esconder a pasta MasterCard. Você sempre pode estender isso se quiser, assim. Mas não acho que seja necessário fazer muito isso. Lorde obesidade. E o que eu vou fazer é realmente usar o meu logotipo, Preto e Branco. Posicione-o até a posição aqui. Ou tamanho, toque duas vezes. E usarei meu logotipo malvado. Vou esconder minha carteira e simplesmente usar meu texto para reduzir seu tamanho. E posicioná-lo no lugar bem aqui. Então você pode simplesmente clicar neste ponto e você pode reposicioná-lo como quiser. Vejamos, acho que está tudo bem. Talvez só um pouco para baixo. Sim. Podemos chamar-lhe assim. Então o que podemos então fazer é apertar o controle C para copiá-lo para fora do nosso logotipo original, Controle V. E agora você pode ir em frente e posicioná-lo lá assim. E acho que vai funcionar bem para o nosso exemplo. O que vamos fazer a seguir, obviamente, é trabalhar nos dutos ou vamos fechar todos esses. Então, como eu disse, nós terminamos isso, nós preparamos tudo. Escondemos o logotipo, escondemos tudo. Então eu vou simplesmente pular aqui. E vamos primeiro posicionar estes dois baixar See. Então, se eles estão agora em 24, vamos baixá-los para 16, por exemplo. Certifica-te de que são brancos assim. E eu vou posicioná-los para baixo. Então vamos descer e descer. Vamos ver, estamos em, eu acho 20 anos, então 20 em todos os lados. Bem aqui. E se uma marca velha você pode ver que somos 20 área. Agora eu posso clicar neste 124. E isso funciona? Bem, vamos ver. Não. Mas o que também podemos fazer é diminuir o espaçamento entre eles. E agora ele vai funcionar apenas mistura fina. Você apenas usa negrito, você apenas usa dívidas de mão branca basicamente isso nós vamos fazer o mesmo truque. Então a posição é um retângulo para o topo. Certifique-se de atrasar os dois. Clique aqui e, em seguida, saltar dentro de um remover o seu retângulo. E o que vamos fazer a seguir é ver que agora temos o nosso cartão. Está parecendo legal. O que vamos fazer a seguir é basicamente usar essas mesmas informações em todos os nossos estados. Então, para mostrar como isso é feito, você pode simplesmente selecionar todas as suas informações em vez de cartão Vg. Então não vamos mudar isso. Clique em Control C. Assim. Vá para o visto, preto e branco, por exemplo. Exclua todas as suas informações, use o seu cartão Bg. Poderíamos ter copiado essa também. Então, vamos voltar ao estado padrão e selecionar tudo. Aperte o Controle C. Vá para o Visa, Preto e Branco, abra tudo e apague tudo. E simplesmente baseado em papagaios de volta. Vamos ver, isso não funcionou. Vamos deixar o cartão VG, controle V, e agora excluir o BG atual para que possamos tê-lo como preto e branco recente. A única coisa que vamos fazer agora é, na verdade correr primeiro entre todos eles e fazer o mesmo por eles. E então podemos simplesmente saltar, mudar e blogueiros dentro. E finalmente MasterCard preto e branco. E remova tudo isso e remova isso. E agora, porque este é MasterCard preto e branco, Eu posso simplesmente deixar em dívida em menor e este original, Eu posso simplesmente lore logotipo Visa vai ficar o mesmo. É isso. Mastercard. Então faça a mesma coisa aqui. Então mostre isso e remova isso. E isso é em 0, tudo bem. Vamos passar para Visa, Preto e Branco. Então, Reesa, vamos mostrar esse esconderijo e assim, e estamos em estado padrão com visto. Isso é bom. Então, lá temos. Nós completamos nestes. Como podem ver, temos cartões de crédito Visa. Este texto é basicamente o mesmo que era, então tudo parece agradável e limpo. O que eu vou fazer a seguir é copiar descartar e baseá-lo em alguns desses lugares. Então eu posso simplesmente apertar Controle C, ou o que eu posso realmente fazer é fazer um componente adicional disso, mas eu não vou brincar com ele aqui. Então eu estou indo apenas para usar Controle C porque este é o componente filho deste componente mestre de qualquer maneira. Então eu posso pular aqui uma forma de desenho animado, bom controle V e movê-lo para o lugar como este. Obrigado. Dê zoom de volta. E o que eu posso fazer é simplesmente deixá-lo na carta de cima. Vg são excluídos, e eu vou então passar para os meus cartões de débito e basicamente fazer os mesmos tanques ou CU Control V, posicioná-lo em posição como este grande EEG traje e removê-lo e passar para o outro. Controle V. Posicione-o no lugar. E lá temos. Vou remover este também. E o que eu preciso finalmente, fraude aqui é que eu vou usar este mesmo cartão antes de voltar e trabalhar em nossas ilustrações e animações, vamos voltar para este mesmo cartão. Cartão de crédito bateu Controle C. E eu vou saltar para esta seção, poderia controlar v. Certifique-se de que eu estou no centro da minha posição carrinho aqui que remover isso e é basicamente isso. Então agora vamos em frente porque temos exatamente as mesmas cartas. Nós realmente queremos fazer algumas mudanças neles. E porque, como eu disse, este é o componente mestre, todos estes são componentes filhos. Então, como você pode ver, tudo funciona bem e perfeitamente. Então o que eu vou fazer lá é basicamente fazer essas mudanças. Então vamos começar com cartões de crédito Visa, por exemplo. Quero adicionar uma cor diferente aqui. Então vamos pular bem aqui. E vamos ver, eu queria adicionar nossas cores originais? Então, talvez este. Então eu pularei aqui, clique aqui, e adicionarei nossa cor original. Clique neste mais leve. E eu adicionarei cor original também. Então vou voltar aqui e aumentar isso para aqui. Talvez eu possa diminuir isso um pouco, algo assim, só para fazer parecer um pouco mais interessante. Obviamente, se você não gosta deste logotipo Visa aqui, você sempre pode saltar para dentro e simplesmente usar em branco. Então eu posso, por exemplo, copiar isso. Então ele tinha o Controle C ou um clique com o botão direito ainda melhor. E então eu posso ir para Visa, Preto e Branco. Selecione meu VG atual, clique com o botão direito na aparência baseada. E você só vai colar nessa aparência para o estado deste componente. Posso fechá-la porque estou feliz com ela. Estou feliz, como é que isso parece? E posso simplesmente passar para o meu MasterCard. Então eu vou apenas clicar duas vezes aqui. Cartão de crédito, use meu MasterCard. E agora você pode ver o poder dos componentes bem ali. Farei a mesma coisa. Então eu vou pular insight, MasterCard. Vamos ver se eu selecionei. Eu tenho alguns carros ótimos, BG, clique com o botão direito. Vamos colar a aparência. Portanto, certifique-se de que eles são os mesmos porque eles são cartões de crédito. Ou você pode até ir mais longe e fazer algumas alterações adicionais a este. Então vamos voltar às nossas cores, por exemplo. Ou melhor ainda, você pode simplesmente pular aqui e tornar este ainda um pouco mais escuro. Clique aqui. Este um pouco mais escuro, ou até mesmo ir para o outro lado. Então, talvez para algo assim, talvez clique aqui, certifique-se de ir ao contrário para algo assim. E eu acho que eles funcionam muito bem? Posso fechar isto e podemos trabalhar nos nossos cartões de débito. Então, em nossos cartões de débito, basicamente o que vamos fazer é exatamente o mesmo. Eu só vou incluir, incluir algumas pequenas mudanças em pequenos ajustes para aqui. Então eu vou mais uma vez selecionar meu plano de fundo para a cor mais escura. Vou realmente selecionar a cor do disco agora. E quatro em cor mais clara. Vou selecionar a mesma cor para a cor mais escura. Estamos obviamente indo para o contrário em torno de tofu, por exemplo, para algum lugar por aqui. E para a cor mais clara, podemos passar para algum lugar por aqui. Eu posso clicar com o botão direito do mouse em copiar para que eles possam ser sentados no meu outro jardim também. Clique bem ali. Vamos escolher um MasterCard. Botão direito na aparência baseada. Acho que a Índia parece muito bem. Mas, mais uma vez, vamos agora fazer algumas dessas mudanças adicionais. Talvez este azul realmente agradável, talvez até mesmo azul mais claro, todo o caminho para branco ou algo assim. Acho que vai funcionar muito bem. Então, agora que terminamos, isso, podemos agora passar para descartar. Mas antes de o fazermos, talvez devêssemos ir em frente e terminar estas seções. E para as seções D, tudo o que eu realmente quero fazer é basicamente criar componentes para elas. E eu vou criar componentes diferentes com basicamente o mesmo, o mesmo efeito de pairar. E basicamente nós vamos ter um tipo semelhante de efeito de pairar para aqui. Então nós vamos realmente usar esses elementos. Então eu vou saltar para dentro deste cartão de conteúdo. Eu vou usar elementos de controle de ervas daninhas C. Tirá-los, voltar aqui e abrir este cartão informações PID controle v. Eu vou incluir o meu ou basicamente de volta posicionado e dois aqui. Então eu não removi o protocolo BEG daqui. Então, selecione-os para se certificar de que estão desativados. Não tenho a certeza se os brancos estão a mover o disco para baixo. Então é bom mudar essa cor para isso, só para que eu possa ver meus elementos um pouco melhor. Então, um pixel para baixo, é isso. E o que eu vou fazer é simplesmente pular dentro deles e ele está localizado. Então aqui está, círculo. Só vou aumentar um pouco o tamanho e ter certeza que está aqui. Cartão BG garante que você é do mesmo tamanho que este novo é. E você sempre pode verificar, então 792587700 para 587. Então, assim. E como você pode ver, nós somos basicamente ousados, eu só vou movê-lo um pouco para baixo assim. E isso é bom. Eu vou fazer Eu vou para o Senhor, você está basicamente para baixo deles mais tarde. Então não vamos brincar com todos esses elementos porque obviamente agora temos um pouco mais de espaço. Talvez eu possa até aumentar o tamanho de D, Então 20. Vamos agora ir em frente e girar para isso, por exemplo, para aqui. Onde está a nossa linha? Curioso? Vamos localizar a dívida também. Ver 20. Agora, Dan trabalha muito melhor e aumenta um pouco o tamanho. E você pode obviamente brincar com esses elementos tanto quanto você quiser. Mas não fique muito preso a eles, porque eles são apenas elementos secundários, porque o acontecimento distinto aqui é a sua principal preocupação. O que eu vou fazer a seguir é simplesmente mais baixo na obesidade para baixo. Mas antes disso, talvez eu possa copiar e colar esses elementos em todos esses. Então aperte o Control-C, pule aqui para esculpir o controle BG v. Vou posicioná-lo todo o caminho até aqui. Vamos ver. Certifique-se de que eles estão alinhados como sujeira em todos os lados. Eles são. E se mudarmos novamente neste contexto, podemos verificar e ver se tudo parece agradável e limpo. Então eu posso mais uma vez saltar de volta para o meu carro BG e fazer o mesmo para os primeiros que esculpiu BG carro VG. Vou mudar a cor para este. E eu também vou copiar e colar esses dois. Então agora vou selecionar os dois. Hit Control-C, apenas resolvido, eu posso me ver um pouco mais de tempo ir para cartões de débito. Em algum lugar por aqui ele tinha controle V. E eu vou realmente selecionar esses elementos, segurar a tecla Shift, e simplesmente empurrar amortecido para fora. E para ver o que eu fiz, eu vou mudar novamente a cor do meu carro BG que eu fiz. Vou selecionar ambos os meus elementos e empurrá-los até aqui. E então eu vou mudar esses elementos de volta. E vamos ver, posição descartando para onde está. Então, elementos do DES ou posição no meu primeiro. Então, aqui. Estes elementos são posicionados no meu segundo aqui, o que podemos fazer agora é simplesmente baixar a obesidade de todos eles para baixo assim. Então se você pode verificar 00 e eu posso fazer o mesmo com os cartões de crédito. Então, onde eles são elementos posicionados logo abaixo da nossa flecha, Senhor obesidade para baixo e fazer o mesmo para estes. Então, agora que terminamos isso, tudo o que eu basicamente quero fazer é adicionar alguns pairamentos a eles. Então vamos ver, separamos cartões, cartões de crédito MasterCard. Talvez possamos mudar esses nomes porque vamos criar componentes. Então vamos ver. Então, informações de cartão de crédito. E nós vamos copiá-lo. E este vai ser o MasterCard. Então, para este, vamos, em vez de crédito, usar débitos e copiar e projetar porque eu sou muito preguiçoso para escrever alguns MasterCard e débitos. E lá temos. Agora, podemos simplesmente apertar Control K, Control K, Control K, Control K, Control K. para que possamos criar todos esses componentes adicionais. Então o que podemos fazer neste primeiro é que podemos realmente, vamos voltar e usar a cor como fizemos com a original. Então aperte o controle D. E quando chamar essa cor, ou vamos chamá-lo de cartão de cor bg. Vamos fazer o mesmo por todos eles. Então vamos fechar este. Controlador D, cartão, bg, cor, controle D, assim. E finalmente para este, o que eu vou fazer é simplesmente selecioná-los no mar. Eu não posso, eu tenho que selecionar um por um. Vou usar vamos ver, estudioso de mesa. Sim. E eu vou baixá-lo para 0 em nosso estado padrão. Clique aqui, use este cloreto de cor até 0 usando a tecla 0 no meu teclado. Aqui mesmo, 0. Pule de volta para aqui. E, finalmente, este, mudar a cor e tudo de volta para 0. E essas são todas as nossas mudanças nos nossos principais estados. Agora, o que realmente vamos fazer é simplesmente criar estados de cobertura para todos eles. E eu vou simplesmente mostrar a vocês como você pode adicionar um pouco mais de interesse ao seu design. Então, para criar esses estados Howard, a única coisa que eu vou fazer é realmente muito simples. Então crie um poder de qualidade de estado. Copie este texto para que eu possa usá-lo mais tarde. E no nosso cartão de crédito, vamos ver, talvez possamos saltar para o fundo do cartão de crédito. Podemos adicionar um pouco de sombra. Vamos ver. Então 5510, por exemplo. Oh desculpe. Mais uma vez usou este errado. Então vamos para o nosso carrinho. Então, cartão Bg, já temos essa sombra, mas vamos mudá-la. Então 55 e Sen, e vamos ver, dez em obesidade. Então nós só queríamos nos destacar um pouco. Então eu vou ver, só para lembrar que cinco, 5-10. Em seguida, vou usar minha seta e movê-la 20 pixels para baixo, assim. Em seguida, vou incluir meus elementos de volta. E finalmente, inclua minha cor de volta. E os elementos serão, na verdade, dez. Vamos ver, 20. Vamos nos encontrar em 151815 vai funcionar muito bem. Você ainda pode ler tudo isso. E, mas porque eu só queria fazer uma mudança rápida, trocar isto para o branco. Assim como você pode vê-lo um pouco melhor porque ainda é chamada à ação no final do dia. Então estado padrão, estado Horace. E podemos sempre saltar para o protótipo e pairar a dinamite. Nota fácil. E vamos ver 0,4 segundos. Vamos usar isso. E vamos usar facilidade para fora em vez de um resultado. É basicamente isso. Vamos testá-lo e ver se este primeiro funciona. E antes de aplicarmos a todos esses outros. Então, aqui temos. Como pode ver, funciona muito bem. Temos todas essas formas. Mas o que também podemos fazer é talvez em nosso estado original, talvez possamos cutucar essas formas. Então, podemos animá-los um pouco. Então vamos fazer isso. Então, em nosso estado padrão, o que eu posso fazer é simplesmente mostrar minha cor, mostrar meus elementos, apenas classificados, eu posso vê-los. Então, em nosso estado padrão, vamos simplesmente mover nossa cruz hmm. Vamos ver. 20 pixels, certo? Linha 20 pixels, direita, circulou 20 pixels para baixo. E este círculo de mesquita, vejamos, 20 pixels abaixo. Então isso é baixo, isso é baixo, isso é certo, e isso é certo ter que se lembrar disso. Vamos abaixá-los de volta mais colarinho Lamda para trás. E vamos verificar os resultados. Vamos ver se isso é e nos dar algum tipo de interesse visual. Vamos ver. Nada realmente aconteceu com eles. Então vamos explorar um pouco mais e ver o que podemos fazer. Então vamos ver em pairar, talvez possamos tentar movê-los para lá também. Então elementos, vamos ver, cruzam 20 pixels e esses 20 pixels à esquerda induziram 20 pixels para cima. E este fundo chamado C 20 pixels para cima também. Então vamos ver se isso fez alguma diferença. Veja como isso parece. Aqui. Como você pode ver, ele é adicionado apenas um pouco de movimento no fundo. Então esta esquerda, isto, deixou isto para cima e isto para cima. Então vamos fazer isso por todos eles. Então, vamos agora passar para este. E vamos basicamente adicionar a mesma coisa. Então lembre-se da phi 5-10. Então temos o estado padrão aqui. Vamos ver o cartão de crédito, BG, sombra 55. E vai baixar a sombra aqui. E eu estou realmente indo para fazer o mesmo para o estado padrão aqui. Então carro B, G, eu aprendi por 5-10, só para que eu possa fazer essa animação um pouco mais inteligente. Em anteriormente, ele é impresso. Você pode vê-lo. Não é a coisa mais suave do mundo, mas ainda é menor do que era com aquela sombra de fundo. Então vamos agora ir em frente e editar este para que possamos. Primeiro de tudo, vamos ver o que podemos fazer aqui. Temos a nossa cor, temos os nossos elementos. E vamos criar rapidamente um efeito de horror. Então pairar estados, e isso vai ser chamado obviamente dentro do pairar ou vamos incluir essa cor. Vamos incluir os elementos, mas deixe-os estar em 15%. Vamos deixar C mover este círculo 20 para cima. Mova-se neste círculo até 20. E esses dois serão movidos para a esquerda 20 pixels também. A seguir, cartão de crédito, BG. Nós vamos ter certeza que isso é às dez. E finalmente, vamos mudar as índias para branco. E também vamos mover a seta 20 pixels para a direita. Então vamos verificar e ver como isso funciona agora que temos dois. Vamos ver. Então nós temos este e nós temos este. O que precisamos fazer para este segundo é realmente saltar para dentro e mudar a duração. Por isso, se te lembrares que isto é 0.4, vamos verificar. Protótipo. Então, se eu clicar neste, então temos um pairar. Calma agora, 0.4. enquanto neste temos a nossa facilidade para fora 0.3. Então essa é a diferença está em nosso 0.4. e agora se eu testá-lo, e talvez seja um pouco chato, mas você ainda tem que testar todas essas coisas o tempo todo. Então agora você pode ver que eles parecem exatamente iguais e eles parecem muito bem. Então, agora que isso está concluído. E fora do caminho, agora podemos seguir em frente e terminar esses dois também. Então deixe-me fazer isso rapidamente. Então, mais uma vez, vamos começar a partir do cartão de crédito superior, BG. E eu vou incluir uma sombra por 5-10. E eu vou reduzir a obesidade mais uma vez. E vamos ver elementos. Tudo vai ficar na mesma. E ousar, vamos criar um pairar. Desculpe, nesse novo estado, mas a data da colheita, quando você tentou trabalhar rápido, às vezes você tem quintil acabam com todas essas questões diferentes. Então vamos mudar isso para branco. Mova estes 20 pixels para a direita, volte para o nosso cartão de crédito, BG. E eu vou aumentar isso para dez, assim. E depois vou fechá-la. E isso já mudou. Elementos vão ser Dare, mas com 15%, vamos mudar a dose ou estes 220, certo? 20 acima, abra isso para qualquer up. É basicamente isso. Agora que você pode saber o que você precisa fazer, volte para o protótipo, paire, autonomia, substantivos fáceis, e 0.4. segundos. Volte ao nosso design e escolha este cartão. Então cartão cinza, cartão BG incluem a sombra Firefly ou diminuir a obesidade para 0. Isso é tudo por aqui. E agora o que podemos fazer é clicar aqui ao pairar. Pôr. E em pairar, Não, a mesma coisa. 43. Criando design 5: Vamos continuar com a nossa próxima página. A próxima página é investir. Mais uma vez, a mesma coisa que sempre fizemos com estas páginas. Certifique-se de que estamos em 70. Amplie, clique duas vezes e altere isso para alistar design. Deixe-me mover meu microfone um pouco mais longe. E eu vou fazer a mesma coisa mais uma vez. Então use o navegador principal do herói, café. Selecione estes dois, exclua u para controlar a posição baseada em V8 m aqui. E vou mudar nas mortes mais uma vez, por isso tem de ser investido. Então clique aqui. E vamos agora começar a trabalhar no nosso design. Então deixe-me saltar rapidamente para dentro e copiar e colar meus novos textos aqui. Então investindo em um futuro brilhante. Vamos ver assim. E vamos ver, talvez possamos até adicionar um pouco de tempero a ele. Então, em vez de apenas rolar para baixo, podemos clicar aqui. Qualquer um pode nos levar até aqui. Então vamos ver dentro dele um herói, temos o texto e vamos ver o botão principal. Nós escolhemos pairar. E vamos a um protótipo. E dentro do estado de horror, podemos clicar. O gatilho é pairar, digitar , automático, animar e escolher um destino. Ou podemos mudar isso para rolar também. Então, quando o usuário passa o mouse, eles podem clicar e ele vai rolar para esta próxima parte. Então, vamos escolher investimentos. Então ele vai rolar para lá. Então, se eu te levar de volta mais uma vez vetor o desejo e ir para o herói, vá para o texto. Quero voltar para o estado padrão do meu botão. E eu posso clicar em pré-visualização, ampliá-lo. Então, em um pairar e clicar, ele vai me levar a este espaço. Obviamente, esta navegação é assim porque não podemos adaptá-la. Mas você pode imaginar que pode ser, por exemplo, em algum lugar por aqui codificar. Assim, os usuários serão capazes de ver esta parte um pouco melhor. E, claro, é aí que você entra como designer, você tem que explicar essas coisas aos desenvolvedores para que eles possam entender isso um pouco melhor. Agora vamos saltar para dentro e eu quero mudar esta imagem. Então eu vou arrastar e soltar e novas imagens desse cara sorrindo. E mais uma vez, como você pode ver com todas essas imagens, são, ter escolhido jovens porque esse é o ponto focal deste banco. Eles realmente querem que os jovens estejam lá clientes maus. Então eu vou apagar essa imagem antiga, mover isso aqui. E, finalmente, vamos brincar com essa maneira ainda mais música de posicionar esta gravação aqui, por exemplo, eu vou mudar para lugares desses dois. Vou clicar aqui mesmo. Assim, por exemplo. Sim. E eu vou para a mesa de posição para estar bem aqui. Saiba mais, basicamente, vai permanecer o mesmo. E essa é a nossa seção de heróis concluída. Agora, vamos passar para a próxima seção. E basicamente isso vai ser o mesmo que fizemos com todos os anteriores. Então, basicamente, vou usar alguns ícones. Então vamos ver. Posso copiá-los e saltar aqui para os meus investimentos. Eu posso colá-los aqui e AR, e vamos ver, eu posso, porque isso não era um componente, eu posso criar um componente e ícone de aposentadoria. E eu posso saltar para todos estes cinza clique me Klocal, Klocal e fazer local. Posso voltar e fazer a mesma coisa. Então eu vou selecioná-los. Vou para o Níger DEM e tiro daqui, 1234. E agora eu posso ir e começar a incluir esses ícones dentro. Então vou colocar a educação aqui. Eu removo este e contorno cores e formas. Vamos ver. Então eu só vou para a Flórida resolver isso mais tarde. Mas como você pode ver, é digno. E isto foi, vamos ver o nosso seletor. Então vamos renomeá-lo. E você pode clicar duas vezes controle v, nenhum controle clique V. Pressione Enter para confirmar. E isso é basicamente obter educação é concluída, imobiliário ou deixá-lo cair em. Uma estrela R remota. Troponina de segurança familiar, removeu o início e aposentadoria e fazer a mesma coisa basicamente. Então, agora que isso está concluído e vamos em frente e fazer um rápido salvamento. Então controle s. E agora o que queremos fazer, como você pode ver, temos este texto aqui, e é uma seção um pouco diferente das seções anteriores. Mas basicamente, como eu disse, quase exatamente o mesmo. O que eu quero fazer primeiro é usar um botão para esses dois, porque como eu disse, vamos copiar esta informação é a mesma que fizemos para os exemplos anteriores. Então o que eu vou fazer é localizar meus botões ou, por exemplo, o que eu quero aprender mais botões. Vamos ver, talvez eu possa usar este só para não rolar muito para baixo. E salte para dentro da nossa seção de informações. Abra os dois e eu vou pular aqui. Saiba mais posicione-o aqui. Vou remover este, deve controlar o infiltrado. Salte para a próxima seção. Controle V para fazer mais com fora da maneira como eles fazem isso, certifique-se de que ele está alinhado e remova este. Isso é basicamente tudo para este. E agora deixa-me saltar para dentro e começar a editar isto. Então, na verdade, vamos fazê-lo ao contrário em sua abrir todas essas pastas. E vamos começar com esta informação. Arraste-o para dentro daqui. Controle D, arraste este aqui. Controle D arraste este aqui. Controle que você dirige é um aqui, bem aqui. Ok. Então agora eu posso fechar todos esses DEM alto completamente. E agora posso entrar na minha seção de informações. Posso abrir tudo isso e vamos ver. Eu já editei esses dois, então eu só preciso de imagens. Então deixe-me abrir minha pasta de imagens e vamos ver, eu posso arrastar e soltar minha imagem dentro. Isso parece bem. Sim. E eu vou arrastar e soltar outra imagem aqui, assim, mas eu vou clicar duas vezes e vou ampliá-la usando minha tecla Shift. Em algum lugar por aqui. Acho que vai funcionar bem. Então, assim. Ou talvez eu possa ainda mais com cima apenas para que possamos cortar esta parte da nossa imagem. Acho que a morte funciona bem. E agora, porque isso está completo, posso esconder minha educação. Posso ir para a minha imobiliária. E vamos ver, para o setor imobiliário, o que podemos fazer é brincar com isso ainda mais. Então deixe-me saltar rapidamente para dentro de lá. E eu posso começar copiando essas mensagens ou vamos ver, assim. Obviamente é muito mais difícil para mim porque estou usando para ela arquivos do Adobe XD. Então é por isso que isso leva muito mais tempo do que deveria ser. Mas basicamente, tudo que você precisa saber é que você vai obter essa informação em algum tipo de arquivo do Word ou um arquivo de texto ou algo assim. Então vai ser muito mais fácil para vocês editarem isso do que eu. E obviamente você não vai falar com a câmera ou com o microfone. Então tudo isso vai ser muito mais rápido para vocês do que para mim. Então vou escrever aqui, vou continuar de onde parei e vou mudar tudo isso. Assim como. Em seguida, vou incluir minhas imagens. Então comece com este. Eu vou talvez mais com apenas um pouco para baixo. Então, há cabeça de caras no quadro como este. E finalmente, vou arrastar e soltar esta imagem dentro daqui. Vou clicar duas vezes dentro, segurar Shift Alt e clicar com o botão esquerdo para que eu possa escalá-lo, posicioná-los no quadro, talvez um pouco para baixo, assim. E é basicamente isso para esta seção. Posso fechar tudo isso. Tudo parece muito bem. Posso esconder este, mostrei este. E eu posso então saltar para trás e começar a editar morto no próximo. Então vamos ver. A próxima é gorjeta de semente de família. Então eles vão chamar isso de investir na sua família. Mas antes de seguirmos em frente, vamos voltar ao mercado imobiliário e mudar o nome deles. Então, dentro de nossas informações, temos fundos imobiliários de Newark. E isso vai ser chamado de novo dinheiro não-bancário Euro. E só para que possamos continuar comendo ratos, Lee e consistentemente. Então vamos mostrar isso de volta. E vamos ver, vamos agora continuar adicionando as informações. Obviamente, essa parte para vocês é a mais chata de assistir, mas o que podem fazer é parte de todos os projetos que eu faço. Então você sempre tem que trabalhar com esse tipo de informação e é sempre melhor se você pode mostrar aos seus clientes informações reais em vez apenas aquele texto chato ou Lorem Ipsum que eles veem. Talvez algumas pessoas não entendam o que é isso. Talvez não tenha pensado que você usou algum tipo de linguagem que eles não entendem. Na verdade, eu tinha um cliente que foi ofendido por lorem ipsum porque ele ensinou que eu estou jogando algum tipo de jogos com eles, mas eu realmente não estava. Então você terá todos os adultos rei. Então isso vai ser num manga em branco t, encontrar mais. E este arquivo um vai ser incentivado por fundos como esse. E finalmente, vamos agora mudar isso para aposentadoria e trabalhar na dívida. Vamos ver. Então inversa o interior pacífico amanhã como este. E vamos ver, isso vai levar chamado futuro novo banco. Eu também estou disposto a copiar e colar este texto em. Tentei trabalhar o mais rápido possível para vocês e conversar ao mesmo tempo. O que? Porque eu não quero que você fique em guerra com esta seção. Mas como você pode ver, esta é a parte que realmente dura mais tempo. Então vamos ver. Posso arrastar e soltar minha imagem aqui. E a imagem final vai ficar bem aqui. E, finalmente, vamos em frente e renomear este tipo de, este é um novo futuro bancário. E esta é a sua característica do euro como esta. E é basicamente isso. Agora vamos em frente e começar a trabalhar nisso. Então, basicamente, o que eu quero fazer com esses é que eu queria primeiro esconder todas as informações. Então, o mesmo que fizemos para todos os outros. Então eu estou apenas pressionando 02 vezes no meu teclado. Temos investimentos obviamente, então ele controlaria a chave, converteria isso em componente. Primeiro, o Estado vai ser a educação. Então, para a educação, eu quero esconder minha cor de fundo. Quero mostrar a minha informação. E vamos criar um segundo estado, que será chamado de Imóveis. Para a imobiliária, a mesma coisa. Então vou esconder isto. Na verdade mostrei de volta. Desculpe. Vou lutar contra esta informação. Vou ao meu ícone imobiliário, esconder as minhas cores e mostrar as minhas informações. Clique aqui, um novo estado. Vou mudar isso para segurança familiar. Então, com isso, vou devolver meus bens imobiliários. Esconder minhas informações, ou voltar para a segurança familiar, esconder isso, mostrar isso. Então, como você pode ver, quando você começa a trabalhar e você começa a repetir as tarefas de Baldi, tudo meio que fica muito mais rápido porque você está repetindo essas mesas ou um Oregon. E vamos esconder isso. Vamos mostrar isso. Vamos esconder a dose, e é basicamente isso. Agora, vamos voltar ao estado padrão e vamos saltar para dentro do nosso protótipo. Vou agora clicar aqui, escolher este e usar toque ou animar está em nosso 0.4. segundos. Escolhido a bordo vai para a educação. Escolha este mesmo, imobiliário, segurança familiar, e finalmente, uma aposentadoria. Vou fechar todos esses pontos novamente e ir para a minha educação. Imobiliária. Isto vai ser autonomia para a segurança familiar. E isso não vai ser uma aposentadoria. Então você pode ver às vezes você pode ter todas essas falhas como até agora. Ele nos mostrou mortos que quer rolar para uma seção por algum motivo e nós não queríamos. Então, só temos que dar uma olhada nelas. Então educação autonomia, isso vai ser segurança familiar, isso vai ser uma aposentadoria. Vamos fechar os velhos. E finalmente, vamos trabalhar nesses dois, que são nossos últimos. Então isso é educação, imóveis e aposentadoria. E finalmente, vamos para o nosso último estado, que é trabalho de análise de aposentadoria sobre mortos. Então educação, imóveis, segurança familiar. E que ele permite fechar tudo isso, voltar para o nosso estado educacional, ou podemos até ir para o estado padrão, clicar em pré-visualização para ver como isso funciona. Na verdade, vamos saltar daqui para aqui. Então você pode ver que funciona. Clique na educação, imobiliário, segurança familiar, aposentadoria ou edição obras ou bem como deveria. Sim. E tudo isso parece legal. E neste primeiro temos os estados de Horace. Mas como eu disse várias vezes nas segundas, nas internas, não temos como declarar. Então, mais uma vez, se alguém souber a solução para esse problema e me avise e eu resolverei isso e farei uma atualização para todos os seus caras. Então, o que temos a seguir, garanta o teu futuro. É óbvio que vamos trabalhar nisso. E vamos ver. Deixe-me primeiro copiar o N3C e o texto de mesa em outro, depois entrar na minha educação de investimento em quatro. Vou usar este Watson porque é o mais próximo. Controle V. E deixe a posição C abaixada, Lindert. Saiba mais vai ficar. Então deixe-me selecionar este texto. Tudo bem, feche. E isso é em 40 índices a quatro, desaparecer futuro é o que vai ser escrito bem ali. Deixe-me rapidamente pegar minha imagem, arrastá-la e soltá-la dentro de um estilo de vida que parece. Eu também vou levar esses quatro decks porque eu vou usar isso como uma pilha mais tarde no meu design responsivo. E é basicamente, é a única coisa que nos resta fazer para esta página em particular é trabalhar em nosso rodapé. Então eu vou apertar o Controle C, excluir o controle v, ter certeza que está para baixo, posicioná-lo todo o caminho para baixo. E depois vou voltar ao meu estado original e ao meu rodapé original. Então vamos ver, temos que investir em seguida. Então eu vou me abrir neste cartão, eu vou escolher todos esses. Então aperte o controle C, controle V. Certifique-se de que está bem aqui. turno de notícias e uma seta para a direita posicionaram-no aqui. Então, sob investimento, temos todos esses, então temos educação, temos imóveis, temos segurança familiar. E finalmente temos aposentadoria. Assim como. Finalmente, vou agrupar todos eles chamados de Invest. E mais uma vez, a razão pela qual estou trabalhando neste primeiro é porque, como você pode ver, ele se traduz muito bem em todos esses. Então, no próximo vídeo, vamos trabalhar na praia digital e desenhar disco dois são conclusão agradável e rápida. Também incluirei em alguns dos outros vídeos outros links que vão direto aqui. E, finalmente, se você estiver indo para trabalhar na transição entre essas páginas, assim que concluirmos esta próxima e passar para a página de inscrição de login porque agora não incluímos nenhuma transição. Então, se você tentou clicar em qualquer um desses itens, ele não vai levá-lo a lugar nenhum porque esses cliques não foram conectados como eles estão, por exemplo, com esta praia. Então é isso para este vídeo. Vejo-te na próxima, quando começarmos a trabalhar nesta página digital. E vamos incluir mais algumas imagens. E eu vou te mostrar mais algumas dicas e truques. Então, vemo-nos lá. 44. Criando design 6: Vamos agora ir em frente e começar a trabalhar na página final, que é exibida aqui mesmo para o digital. Então eu vou manter minha antiga posição chave em ou aqui, zoom in. Vai ser um design digital como este. Vamos fazer a mesma coisa que fizemos por todas estas anteriores. Então posicionou-o aqui, mova isto para baixo. E finalmente, eu vou escolher meu navegador principal, escolher digital, e esse é o nosso último estado, como você pode ver. Finalmente, vou substituir este texto como eles sempre fazem. Tão maduro. E eu o substituí assim? Saiba mais vai continuar o mesmo. E você também pode conectá-lo se você quiser fazer a próxima seção, mas eu não vou incomodá-lo. Assim, você sempre pode explorar dat se quiser. Finalmente, eu quero mudar rapidamente essas formas. Então talvez uma posição semelhante esta aqui. Posso posicionar este aqui. Eu posso rodar este um pouco ou talvez assim, só para que possamos apimentar as coisas um pouco. Deixe-me incluir a minha imagem lá em cima, por isso está nesta. Vou me posicionar aqui. Mais uma vez, a imagem é de elementos convidados. Eu usei o Photoshop para cortá-lo e exportá-lo como PNG. E é o que você vê aqui. E vamos posicioná-lo e atrás do cara da mesa. Vamos ver, talvez cheguemos até aqui. Sim, eu apaguei o antigo e é basicamente isso para o herói. Agora vamos em frente e passar para as próximas seções. Assim diz, eu quero investir em, mas na verdade o que ele deve dizer é um serviço para o futuro moderno. Então, porque eu já fui em frente e adicionou um títulos de índias, A única coisa que eu realmente preciso fazer é neste, e eu também vou escolher o meu botão. Então Controle C. E os botões vão ser basicamente o mesmo começo e eles vão ser aprendidos mais assim. Deletado este antigo. E eu vou basicamente fazer o mesmo por todos eles. Então eu vou deletar essa dobra que ele controlaria V para colar em um novo como este e ter certeza que estamos em 40, como fizemos com este. Então 40 em todos os lugares. E para fechar estes, saltar para dentro daqui controle V. Mais uma vez 40 excluir este que ele organizou e fazer o mesmo para este último. Como este controle V. bem ali. Excluir. Então agora vamos em frente e começar com nossos textos já. Vá em frente e terminei este. Deixe-me mudar o próximo. Bagdá. Me avise. Terminei estes dois assim. E deixe-me terminar este e último. Mais uma vez, você vai fazer isso muito mais rápido porque eu estou copiando e colando de dois arquivos XD diferentes. E isso é basicamente a única coisa que nos resta fazer aqui é adicionar imagens. Então, para este primeiro, eu vou adicionar nesta imagem, fechá-lo. E o próximo será nesta imagem. Eu realmente não vou mudá-los muito porque eu o encontrei para trabalhar assim. Então eu acho que isso vai ser bom. Finalmente, escolha esta imagem para assistente virtual. Mas o que podemos fazer com esse cara é simplesmente ampliar nossa imagem um pouco. Certifique-se de posicionar em algum lugar no centro, algo assim. Eu vou sim. Talvez um pouco mais para baixo para que não vejamos esta frente desta mesa. E é basicamente isso. É isso. Esta página está concluída. Como você pode ver, algumas páginas Degas menos terrível, então páginas nos levar mais. O que precisamos fazer agora é voltar para o rodapé. E nós vamos escolher o controle de V. E eu vou posicioná-los aqui. Então isso, eu vou secá-los lá fora, move-los para baixo ou eu posso simplesmente organizá-los dessa maneira, assim posicionado e para baixo e agrupar narrativa para digital assim. E agora, finalmente, vou em frente e substituir os nomes, obviamente todos esses. Então estes vão conter esses nomes no topo. Então vamos em frente e adicionar o banco. Vamos adicionar os bancos. Isto vai ser o código QR Bay. E, finalmente, neste último é destinado a ser assistente real ou virtual. Como isso. Agora que estamos aqui, podemos adicionar rapidamente qualquer um dos links ao nosso rodapé. Então eu vou mais uma vez copiar estes. Então aperte o controle C, controle V, posicionou-os ou aqui, posicionados e para baixo. Selecione o grupo de outros links. E isso vai ser sobre nós, entre em contato conosco. Isto vai ser reclamações. E, finalmente, a proteção assim. Agora que isso está concluído, vamos verificar rapidamente. Como você pode ver, eles estão localizados em todos os lugares em cada uma dessas páginas em vez desta última. Então, vamos rapidamente corrigir dados. Certifique-se de que está na parte inferior, posicionado a mão deles. Terry Howard, completamos o nosso anti-sionista todas estas páginas. No próximo vídeo, eu vou mostrar a vocês como você pode criar essas tumbas. E eles são muito rápidos porque a única coisa que realmente temos que fazer, ou vamos fazê-lo neste vídeo. Basta usar sua chave antiga. Posicionado assim. Ampliar. Temos um design de login. Temos um design de inscrição assim. E isso é basicamente a única coisa que vou fazer é incluir minhas formas e incluir minhas imagens, Índia. Então vamos entrar rapidamente. Vou arrastar e soltar minha imagem lá dentro. Vamos clicar duas vezes ou reorganizá-lo. Atreva-se assim. Ele controlava C. Delete para controlar V, só para que eu possa fazer as coisas mais rápidas. As imagens ainda vão no topo de qualquer maneira. E o que precisamos é do nosso botão. Então vamos usá-lo. Aperte Control-C. Saltando aqui, deletado este velho, controle V. garante que estamos no centro aqui. Veja 75, queremos que seja em 80, então 12345. Vamos ver por que isso. Vamos posicionar isto e descer. Podemos selecionar tudo e agrupá-lo. Mais. Centro de testemunhas, desagrupe. Controle C para copiar este botão aqui e apagar o controle V. E vamos ver, 345678. Acho que vai funcionar muito bem. Vamos ver. Sim, vamos agrupá-los. Vamos ver o que temos. E então talvez possamos brincar com o espaçamento e um pouco mais. Acho que vai funcionar muito bem. Sim, acho que 80 vai funcionar muito bem com este quadril. E finalmente, vamos desagrupar isso. E a última coisa que eu quero fazer para essas duas páginas é incluir essas formas. Então eu posso simplesmente saltar para aqui e eu posso copiá-lo e essas duas formas basicamente. Então vamos em frente e fazer isso muito rápido. Então eu vou pular dentro do meu herói, localizar meus Elementos herói, apertar Controle C, e saltar de volta para, digamos, página de login. Então este aqui, controle V para basear meu herói Elements velho largou-os em algum lugar logo abaixo do arejamento. Vou posicionar bem aqui. E vamos ver, talvez eu possa clicar duas vezes em posicionar este círculo aqui. Posso posicionar este X aqui, rodado um pouco. Onde está a minha linha aqui? Posso posicionar, está algures por aqui. Vamos ver. Posso girá-lo um pouco para um lugar como este. Aperte o controle C em todos os meus elementos e pulando bem aqui. Você controlaria V, arrastou-o até o fim. E o que eu posso fazer é realmente girar esta posição X aqui. Eu posso seguir em frente e as mortes para estar em algum lugar por aqui, talvez até girar um pouco mais assim. E eu também posso mover meu círculo um pouco mais em algum lugar por aqui, por exemplo. E é basicamente isso para esta praia. O que queremos fazer? Vamos ver. Eu realmente não gosto disso. Cruzar talvez aqui e talvez ele possa ir aqui um pouco. Sim, isso é um pouco melhor. O que vamos fazer agora é realmente interagir entre dois, esses dois links. Vá para um protótipo. Clique aqui neste. Arraste-o. Então, vamos usar passo ou para animar fácil nota zero ponto. Vamos ver seis segundos. E eu também vou fazer o mesmo por aqui. E vamos ver como isso funciona. Então eles vão ser capazes de mudar rapidamente entre não ter uma conta e ter uma conta. Então você pode ver como isso funciona. E todas essas formas estão ocorrendo muito bem. Então você pode ver a cruz e a linha se transformando muito bem. Tudo se posiciona e funciona muito bem. Então é isso para este vídeo. No próximo vídeo, vou mostrar a vocês como você pode começar com os painéis e antes de começarmos com o painel, então eu vou mostrar como você pode realmente conectar essa navegação e como você pode interagir ainda mais entre todos estas páginas. Porque agora temos uma página de login e inscrição concluída, e temos este botão de inscrição de login na parte superior. E esses dois botões que vão nos levar realmente para o próprio Dashboard. Então, vemo-nos lá. 45. Criando design 7: Tudo bem, vamos agora continuar com as telas do painel e vamos fazer o mesmo que fizemos até agora. Então toda a sua velha chave, posição em terror. E design do painel de instrumentos. Como isso. Ou pulando para o protótipo, clique aqui e ligue para esse garoto judeu. O meu pai. Pule de volta ao design. E antes de começarmos o design do painel, terminarei nossa navegação porque queremos conectar todas essas páginas e garantir que elas funcionem. Então agora, no momento, se eu selecionar qualquer um desses, se eu bater na minha visualização da área de trabalho, você pode ver que quando clicamos em qualquer um desses não funcionou. Então temos que conectar todos eles e garantir que eles funcionem. Então, como vamos fazer isso é bastante simples, na verdade. Então vamos saltar entre todos esses estados. Então, se você se lembrar deste vídeo, digamos que você tem que adicioná-lo para cada estado único para que tudo funcione corretamente, porque este é o estado original ou um estado padrão deste principal. Agora, esta é a conta Estado sozinho cartões de palco e assim por diante e assim por diante. Então, precisamos acrescentar é que para cada estado. Então, como fazemos isso? É bem simples. Na verdade. Basta entrar no seu modo de prototipagem e você pode abri-lo e editar a partir daqui. Ou você pode simplesmente copiar para todos esses itens separados e arrastar e soltar essas setas para que você possa fazer o que quiser com elas. Vamos escolher a transição. Destino é contas projetadas. Então é por isso que usamos essa abreviatura de design. Vamos usar a animação dissolver. E eu não estou usando inimigos automáticos para estes porque ao contrário de um login e inscrição, estes, eles têm elementos diferentes. Estes dois basicamente têm exatamente os mesmos elementos. Então, a transição entre si muito bem, mas todos esses outros têm elementos completamente diferentes. Então, por exemplo, esta página e esta página. Então auto animatable não funciona como deveria. Em vez de facilitar, vou usar Easy and out. E eu vou usar 0,4 segundos para a duração da minha transição. Então, se eu levá-lo para a pré-visualização, clique na conta, você pode ver que ela faz a transição bem e a transição não dura uma eternidade. Então, o que podemos fazer a seguir é realmente bastante simples. Podemos ir para Lawrence e como eu disse, posso selecioná-lo daqui. E em vez de arrastar esta seta, vou simplesmente clicar. E eu vou precisar escolher entre isso aqui. Eu vou precisar escolher alongs e design. E vai manter todas as mesmas configurações. Então cartão clique aqui, escolha onde ele aqui, Cards design. Então, aqui estamos nós. Invista. Então, mais uma vez, vamos fazer a mesma coisa. Então inversed e foi clicar localizar investir projetado aqui é, digital parece tick e design digital. Finalmente, o que vamos fazer para o botão é selecionar o nosso botão e em vez de estado padrão ir para o estado de horror porque você quer que as pessoas realmente para pairar e, em seguida, para clicar. Então eles vão clicar no estado de horror e não no estado padrão. Então basicamente as mesmas configurações, mas esta doação vai ser um design de login. Então, nossa primeira página aqui, então disciplina. E eu vou voltar para o estado padrão, e é basicamente isso para este estado de nossa navegação. Nós vamos editar a lei com esse ponto mais tarde porque estamos agora na página inicial e ponto tipo de logotipo está nos levando para a página inicial. Então, infelizmente, temos que editar dados em cada tela, mas não todas essas outras coisas. Então vamos entrar em contas. E pelas contas, basicamente, você vai fazer a mesma coisa. Então, nossa corrente vai ficar o mesmo logotipo nesse ponto. Vamos tentar editá-lo, mas acho que não vai funcionar. - Não. Como você pode ver, não temos a página inicial projetada aqui. Então você pode simplesmente clicar e arrastá-lo para fora. E isso vai basicamente negar sua seleção. Mais uma vez, os Alongs escolhem aqui. Então é aí que somos lançados. Cartões de desejo, bem aqui, Cards design, investir, basicamente a mesma coisa. Então, invista, projete digital aqui mesmo. E vamos ver o design digital. Próximo. Deixe-me verificar rapidamente o meu botão de login, ver se o pairar funciona. Ele não faz. Então nós temos que basicamente fazer isso por todos eles. Então, onde estamos registrando Harrier projetado. Mas mais uma vez, você vai fazer isso apenas neste aeroporto e então nós vamos copiar e colar esta navegação em toda a nossa, nossas pranchas. E basicamente vai funcionar muito bem. Então eu vou clicar duas vezes escolher minhas contas a partir disso e onde estamos em nossos cartões de contagem e design, design para escolhê-lo design estourado, digital, digital, InDesign, onde estamos carreira. E finalmente, mais uma vez, nosso botão Horace State. Vamos escolher um login no InDesign voltar ao estado padrão. E agora vamos passar para alguns desses outros viu, eu vou pausar o vídeo aqui e fazer os cartões, investir em digital e depois voltar para vocês amanhã. Informação. Ok, agora eu completei todos eles aqui eu estou no meu estado padrão, como você pode ver, que é o nosso estado homepage. Então, o que vou fazer a seguir é voltar para a minha guia de design. Vou copiar este salto de navegação aqui, apagar este, apertar o controle V para colar este. E eu basicamente vou selecionar a conta daqui. E se voltarmos ao protótipo, você pode ver que temos todos esses selecionados. A única coisa que não temos é o ponto de toque do logotipo. Mas vamos rapidamente saltou ou projetar para que possamos basear todos estes em. Então eu vou deletar este, manter o controle V tomou parte que m posição logo abaixo do nosso topo. Agora, como sempre fizemos. Eu só vou rapidamente ir em frente e base, base base base para que nós não percamos muito tempo. Nós citamos aqui e área. E agora vamos em frente e isso é digital, então selecione Estado Digital. Este é invertido. Este é o Cards. Este é C, gramados. E finalmente, esta é uma conta e já está selecionada. Agora o que podemos fazer é saltar para o modo de prototipagem. Posso ampliar um pouco para que possamos ver todas as nossas tábuas. E o que queremos fazer basicamente é usado muito com ponto DAP, que é este aqui. Clique e arraste-o para a página inicial e é isso porque ele vai conter todas as mesmas informações. Então, o que temos que fazer isso aqui mesmo porque estávamos na página inicial e você não é capaz de selecionar a página inicial da página inicial. Então é por isso que temos que fazer isso, aqui. Mas como você pode ver, é muito rápido e fácil e comprar apenas alguns segundos. Então essa é a coisa chave com essa navegação. Ele continua repetindo e repetindo, e esse é o princípio básico da interface do usuário e design UX é a repetição. Então tudo se repete o tempo todo. Então, Dairy, como é agora, nós completamos tudo e podemos saltar de volta para o estado de design. Posso clicar na pré-visualização da minha área de trabalho para entrar na minha pré-visualização e mostrar como tudo funciona. Como podem ver, temos todos esses estados em que trabalhamos. Então agora adicionou contas cíclicas e clique em empréstimos, clique cartões, investir digital, tudo funciona como deveria. E eu também posso clicar aqui para voltar para a página inicial. Então você pode ver como essa transição funciona com a dissolução. Acho que funciona bem. E reformar bem aqui quando você passar o mouse e clicar aqui, ele vai levá-lo para a tela de login. Daqui. Você pode verificar esses dois. E você tem essa bela animação. E acabei de notar que não corrigimos esses botões para fazer login e se inscrever. Então vamos fazer isso agora. Então eu vou pular aqui mesmo. Saltando para o nosso texto, insatisfeito escrevendo Login. Vou copiá-lo e ir para o nosso estado de horror, como este estado padrão. E no próximo, vou escrever para ele se inscrever. Assim, vá para o nosso estado de horror, inscreva-se selecionado, laticínios e volte para o estado padrão. Então, uma última coisa que nos resta fazer para este vídeo, e nós estamos realmente indo para começar com o design do painel no próximo vídeo é conectar o login e inscrever-se com esta tela do painel. Então vamos saltar para o protótipo. Clique neste. Eu vou para o estado de horror e arrastá-lo porque está bem aqui. E eu vou basicamente usar as mesmas configurações de dívida que usamos. Então eu vou voltar para o estado padrão. Clique aqui. Vá para o pairar, encadeado assim, e altere-o de volta para o estado padrão. Então vamos visualizá-lo e ver como ele se parece. Então eu vou clicar aqui para visualizá-lo. Mais uma vez, nossas animações funcionam muito bem e tudo funciona como deveria quando você, no entanto, vai levá-lo de volta a esta tela. E vamos testá-lo aqui mesmo. Então vamos mudar para o pairar de inscrição. E funciona assim. Então, no próximo vídeo vamos começar a trabalhar nisso. E nós vamos conectar tudo isso para que possamos alternar entre todas as nossas telas diferentes, que vamos projetar mais tarde, apenas para mostrar a vocês como essa animação vai se parecer, como ela vai trabalho, tudo isso. E vejo-te no próximo vídeo. 46. Criando design 8: Agora que concluímos nossa navegação, vamos entrar no design do painel. E eu vou aproximar um pouco mais do que você pode ver. E basicamente, o design do painel de mesa vai refletir sobre o que já fizemos até agora. Então, basicamente, vamos ter exatamente as mesmas configurações aqui em termos de cor, em termos de imagens, em termos de estilo e assim por diante. Nós vamos basicamente adaptar isso ao design do painel, princípios do painel e assim por diante. Então vamos começar a partir da nossa navegação. Então temos que decidir bar bem aqui. E a primeira coisa que eu vou fazer é realmente sobre os itens selecionados. Então, somos selecionados aqui mesmo no painel. Vou mudar a cor do ícone do painel. Então eu vou usar nesta cor aqui, eu vou aplicá-la. E vamos ver se isso se aplica. Ele fez. E eu vou deixar o texto do painel como está. Eu também vou clicar aqui para que eu possa mudar isso para ficar assim. E talvez possamos trabalhar em nossa navegação um pouco mais tarde, uma vez que realmente tenhamos mais alguns desses criados. Então eu posso ir em frente e transformar isso em um componente por enquanto. Então aperte a tecla Control, e este será apenas o nosso estado padrão, mas vamos trabalhar nos outros estados, litro. Ou posso até fazer isso de vez em quando vamos fazer animações mais tarde. Então, vamos realmente fazer isso agora. Então, como eu disse, estamos sob o estado padrão. Vamos agora mudar para o novo estado. Vamos chamar os dados da conta. Vamos abrir uma conta profunda. E vamos mover este seletor para baixo no centro da nossa conta. Nós vamos mudar isso de volta para esta cor cinza para que eu possa selecionar ambos em simplesmente clique parafuso na cor cinza. Vou selecionar minha conta. E se eu te levar de volta aqui, e podemos ir para o estado padrão, eu posso clicar aqui e ver essa cor. Então este é o meu colar que eu vou acabar usando para todos eles. Então, vamos agora voltar para a seção Conta e vamos selecioná-la e escolher essa cor. E para o ícone em si, vamos selecioná-lo. Vou usar esta cor. Então eu posso voltar, criar um novo estado e vou chamá-lo de transações como essa. E neste, eu vou simplesmente pular aqui. Selecione esta cor cinza. Clique aqui, clique aqui. Agora que temos dados, podemos passar para o próximo estado. E este estado, vou chamar-lhe gramados para os empréstimos. Mais uma vez, desculpe. Podemos voltar para as transações e eu esqueci de mover o seletor de mesa. Acho que sim. Podemos voltar para os pulmões e em longo prazo, vou ter certeza de que eu mude isso. Então, mais uma vez, isso vai ser, este ícone vai ser descolorido. E finalmente, vamos seguir em frente a partir daqui. Transações vão ser criadas. E vamos ver rapidamente o que temos até agora. Então estamos no estado padrão, transações de conta e pulmões. Vamos agora seguir em frente e criar um novo estado. Vamos chamá-lo de atual. E nas cartas vamos mudar isso de novo. Vamos voltar às nossas cores. Eu vou escolher esta cor e para o meu ícone e ir com verde. Feche isto. E vamos criar um novo estado. Vamos chamar-lhe investimentos, assim. Por isso, vou mudar isso mais uma vez. Volte para as minhas cores. Selecione este. Mais uma vez, temos essa repetição, mas o que você pode fazer de UI UX Design como um todo. Então vamos para o digital, que será nosso estado final. Meus investimentos em dívida. Certifique-se de que está cinza digital. E vamos clicar aqui para ver o ícone. E é basicamente isso. Vamos agora correr rapidamente. Então temos digital, temos investimentos, cartões, empréstimos, transações, conta e estado padrão vai ser nosso painel de controle. Se você está se perguntando por que eu não criei nada para o logout. Basicamente, quando os usuários clicam no Logout, eles serão levados para a tela inicial. Então é por isso que o logout está lá. Você também pode trabalhar com seu cliente e com seus desenvolvedores se quiser levá-los de volta para aqui. Mas, por exemplo, no meu caso, acho que é muito mais inteligente levá-los de volta à página inicial porque talvez eles queiram explorar alguns serviços adicionais que seu cliente tem para oferecer. E quando eles estão aqui nas páginas de login e inscrição, e eles simplesmente não são navegação, então eles não podem sair do seu, eles podem simplesmente fazer login novamente. Então esse é o benefício. Se você os levar de volta para a página inicial, eles podem navegar hoje por onde e simplesmente escolher a data de serviço desejada. Então vamos agora continuar e eu vou adicionar rapidamente minha imagem aqui. Então eu tenho essas imagens no meu computador. Eu estava simplesmente arrastando e soltando um do meu computador dentro. Você pode vê-lo bem aqui. E eu estou usando essas imagens e essas são realmente de um splash. E eu fiz isso anos atrás, eu realmente cortá-los para baixo, incluí-los aqui, mas você também pode usar configurações de plugin. Ui faces é o plug-in onde você pode tirar essas imagens de nós prazer e assim por diante. Já fiz o trabalho para você. Mas eu tenho essas imagens no meu computador e, mais uma vez, elas estão livres dos EUA. Blush, e eu os criei anos atrás, eu acho que algo como 50 rostos masculinos, 50 rostos femininos, algo assim. Então vamos agora seguir em frente e começar por incluir nossas informações. E vamos mudar isso para TDT diarreica. Então aqui estão suas estatísticas para, digamos dezembro 222211, por exemplo. Bem-vindo de volta Michael. Acho que funciona bem. Contas principais todos nós criamos isso. Então vamos agora para as cartas. Então vamos ligar para este cartão de débito. E este é o estado que já mostra, então enquanto ele até esta data. Precisamos de um cartão aqui. Então vamos pegar um da seção atual. Então eu vou ligar para isso, então eu vou apertar Control-C para copiar este cartão. Eu vou pular. Nosso painel de instrumentos, pule para dentro daqui, leve o controle V para colar no meu cartão dentro. Como isso. Eu também vou segurar minha tecla shift para reduzi-lo em tamanho. Ou posso até fazer assim, assim. Então, o que podemos fazer em seguida, obviamente, é reduzir o tamanho desses. Então eu vou voltar para o preto e branco recente, por exemplo. Acho que funciona bem. E agora vamos em frente e começar editando nosso logotipo. Então vamos usar o muro da lei. É o novo banco, essa é a cor do logotipo do texto. Então vamos escalá-lo em algum lugar por aqui. E vamos simplesmente ampliar para que possamos mover nossos ataques para algum lugar por aqui. Acho que funciona bem. Logotipo recente, vamos reorganizá-lo um pouco. Então, por exemplo, algo assim. E você também pode ter certeza que você está em dissuadência decentrada. Então você pode basicamente olhá-lo se você quiser. Então vou posicionar meu logotipo. Vejamos, 1010 pixels funciona bem com este caso. Pixels do tanque Vou selecionar meu texto e vamos ver onde podemos ir. Vamos ver 18. Acho que funciona bem. Vamos com ângulo branco. Vou acrescentar negrito aqui. Tão ousado, e vou adicioná-lo aos meus estilos. Vou movê-lo para baixo aqui. Desculpe, não, não 16, mas este parafuso 18, eu vou movê-lo para cá assim. Eu também vou ter certeza que ele está localizado aqui. Para este eu vou usar, vamos ver 16 branco. 16 brancos, e isso funciona bem. Dez, vamos ver. Dez como posição de terra e dez para baixo. Eles vão fazer o mesmo por estes dois. Como este. Talvez 20, sim. E vamos também posicionar e assim podemos olhá-lo daqui até aqui. Selecione-as para certificar-se de que elas estão no centro. E agora podemos apagar este. E é basicamente isso. Agora, tudo o que preciso fazer é voltar para o meu painel de camadas. Então, mais uma vez temos o nosso cartão cinza. Eu vou remover descartar BG e você pode, obviamente, ir em frente e criar a paginação na emissão se você quiser alternar entre o seu carrinho. E talvez possamos fazer isso aqui também. Então vamos ver. Sim, vamos fazer isso. Então eu vou duplicar meu cartão e mais uma vez. Então vamos ter visto atual. Vamos ter MasterCard e Visa mais uma vez. Que qualidade sólida, veja, crédito. Como isso. A razão pela qual estou tendo esses três é porque eu vou criar um componente. E vamos saltar para dentro e ver o que podemos tirar daqui. Então, podemos pular aqui, manter o controle e clicar, clique com o botão direito do mouse em copiar porque nós só queremos ter estilo de disco para o nosso cartão. Então eu vou voltar aqui, esconder nosso primeiro carro porque nós terminamos. Eu posso clicar aqui, com o botão direito na aparência baseada para que possamos assumir dívidas. E o que eles querem fazer é simplesmente usar meu logotipo MasterCard. Vou reduzi-lo só um pouquinho. Eu vou ter certeza que é dez holofotes que eu vou esconder meu visto. E é basicamente isso. Criamos o segundo cartão. Agora vamos em frente e esconder este. Temos crédito recente. Bem, vamos ver o que fizemos até agora. Então estes são realmente crédito. Então vamos pegar e este por exemplo. Então, clique com o botão direito Só estou interessado em cores e nada mais. Então eu vou selecionar este um clique com o botão direito baseado, o botão direito na aparência baseada na verdade não é baseada. E é basicamente isso. Agora temos as nossas três cartas. Então o que eu vou fazer é realmente começar criando nosso componente. E para fazer isso, vou primeiro posicionar estes agora abaixo do nosso texto. E vamos para a edição em grupo. Então ele tinha o controle do G e eu vou chamá-lo de cartão. Ou vamos ver, Dashboard carros ainda melhor para que você possa saber em seus componentes o que tudo é. Daqui em diante, o que podemos fazer é clicar aqui e ver como isso se parece. Ou, na verdade, vamos deixá-lo lá. Talvez possamos até ir um melhor e ter este como selecionado nestes não são selecionados. Vou gostar ainda mais disso. Então vamos fechá-lo e apertar o controle, kay, só para criar um componente. Então esse é o nosso estado padrão. Este é o nosso próximo estado. Então vamos chamá-lo, eu não sei State ou Cart. Dois. Como isso. O que vamos fazer neste é clicar aqui, e então escolher esta cor. Clique aqui, escolha esta cor porque eles vão mudar. Então vamos baixar essa obesidade para 0, só para que possamos mudar para este cartão. E então o que podemos fazer é basicamente mudar isso. Então nós vamos apenas dar-lhe um nome de débito de cartão mestre. E você pode mudar isso se quiser, mas eu vou deixá-lo lá porque é apenas para o exemplo de qualquer maneira. Então vamos agora fechá-lo e criar um novo estado. Então, o cartão três, assim. E neste novo estado vamos basicamente fazer exatamente a mesma coisa. Então eu vou clicar aqui, mudar em disco estudioso para verde, clique aqui, mudar isso para cinza. Vou diminuir a obesidade do descarte. Então eu posso ver Descartar. E eu vou chamá-lo, vamos ver, Visa, cartão de crédito. E eu vou remover deste aqui. Então temos débito e crédito. E isso basicamente, a única coisa que nos resta fazer é, obviamente, protótipo-lo. Então eu vou clicar neste aqui e nós vamos para o estado. Então cartão para inimigos automáticos está dentro, fora e 0.4 segundos, Eu acho que ele vai funcionar bem. E vamos para o carrinho três. Vá para o próximo estado. Então este vai ser um atual ou um estado padrão, desculpe, este vai ser o atual três. E, finalmente, como você pode ver, é muito mais fácil quando você não tem muitos desses estados para animar. Então vamos para o estado padrão, e este será o nosso cartão também. Então vamos saltar para o modo de visualização apenas para ver o que temos até agora. Então eu vou clicar aqui. Você pode ver essas transições agradáveis entre nossos cartões e você pode ver como tudo isso funciona. Eu acho que realmente parece legal. Então vamos agora em frente e fazer basicamente a mesma coisa, mas com este. Então o que precisamos para isso é saltarmos para dentro dela. Nós realmente precisamos que isso seja chamado de guias de ajuda. E é. Então vamos ver, podemos saltar para dentro e onclick, podemos selecionar todos estes. Então vamos fazer o mesmo que fizemos. Então este vai ser o nosso primeiro e original estado. Então eu já copiei este texto. Só vou mudá-lo para descobrir. E eu vou mudar isso para branco, porque em um minuto eu vou fazer rapidamente algumas mudanças nesse plano de fundo. Então, a primeira coisa que vou fazer na verdade é, vamos ver, fechar esse garoto Controle D. e eu vou dar uma cor a isso. Então vamos ver, Ajuda Cor da aba. Meu pai, eu vou realmente aplicar esta cor. E porque agora não podemos usar isso, vamos com branco e vamos com ou melhor ainda, talvez possamos ir com essa cor. Vamos ver. Sim. E estes podem ser brancos. Então, apenas para indicar que isso está selecionado, como você pode ver, agora temos algumas mudanças aqui. Então estes para selecionados são verdes, este não é. Então o que podemos realmente fazer é saltar para dentro bem aqui e escolher esta cor. E agora, para isso, podemos realmente ir verde, apenas para que possamos ter consistência entre esses elementos. Então, o que podemos fazer aqui, se você não gosta desta cor de texto, você pode mudá-lo para esta cor. Acho que vai funcionar muito bem. Vamos saltar para dentro de um modo de visualização e ver como isso se parece. Acho que vai funcionar muito bem. E o que eu preciso aqui são os elementos que usamos em todo o nosso design. Então você pode realmente saltar para dentro e ver onde você usá-los. Então vamos ver, nós os usamos aqui. Então, vamos voltar ao nosso painel Camadas. Então eu posso saltar para dentro, usar meus elementos. Atingimos o Controle C só para copiá-los. E volte até aqui e pule para dentro, posicionado aqui. Então ele tinha controle V e certifique-se de que eles estão em 100% apenas para que você possa vê-los. Vou posicionar a desordem aqui, porque se você se lembra, nós temos aquela mesquita. Vou posicionar todos estes elementos na parte de trás. Vamos abrir o nosso carro desajeitado de Marte BG é muito grande. Então eu vou organizá-lo um pouco assim. E vamos ver. Eu posso até ir para a cor guia ajuda e ver serra para 6723110. Então 46123110. Como isso. Agora ele se encaixa perfeitamente. E eu vou reduzir o tamanho deste círculo para algo assim. Eu acho que vai funcionar muito bem porque mais uma vez, você vai baixar a resolução. Sinto muito, a obesidade desses elementos. Vou me certificar de que esse chamado é menor. E vamos vê-lo às dez. Acho que funciona bem. Onde é delineado aqui é. Vamos posicioná-lo lá ou podemos reduzir seu tamanho também. Vamos ver, podemos mudá-lo para ser tão por aqui que eu acho que vai funcionar bem. E finalmente temos esta cruz e toda a sua posição, vamos ver o que podemos fazer aqui e talvez possamos movê-la para o topo. Por exemplo, aqui mesmo. E em nossos elementos, vamos baixar a obesidade para 15, porque era isso que era. E agora vamos em frente e criou isso ajudou dap como um componente. Para que ele controlasse a chave. Eu não fiz isso para este porque eu acabei incluir um componente dentro com fundo BG de um carro, eu não poderia fazer isso. Então, tudo depende de você. Se você quiser fazer isso assim ou assim, eu só quero mostrar diferentes opções que você tem. Então, para a guia de ajuda, temos o estado padrão. Nós vamos ter um novo estado, C sólido, opção um ou artigo um ou ajudar um ou como você quiser chamá-lo. Então, na verdade, vou copiar essa informação. O meu pai, tal como o meu pai. Então, basicamente, isso é para ajudar seus usuários a navegar no site. E nesta opção um, vamos brincar com a paginação, obviamente. Então vamos escolher isto para ser verde e isto vai ser branco. E deixa-me ver se isto é branco. É. E vamos fechar isso e passar para o próximo e último estado. Então, vamos dar-lhes uma opção para comprarem isto. Na opção de, obviamente, vamos mudar isso para verde, vamos mudar isso para branco. E eu também vou mudar o texto. Não corresponda. Baseado em distritos, com base neste texto. E você também pode integrar o clique se você quiser resolver, por exemplo, eles podem clicar neste texto e ele vai levá-los. Então temos a escolha do cartão perfeito. Então, desconecte-os à seção do carrinho do painel. Você pode integrar o clique obviamente, e quando o clique, ele vai levá-los lá. Mas eu não vou fazer isso. Vou simplesmente mostrar-lhes o que podem fazer. Porque eles estão olhando para esta página daqui e ele pode lê-la. Todas as criaturas, o carbono perfeito vai ocorrer no passo. Aqui está. Então eles podem clicar lá e ir lá. Uma última coisa que eu quero fazer é basicamente brincar com esses elementos. Então, aqui estão eles no estado padrão. E eu vou começar a movê-los só para que possamos ter dat e emissão. Então eu vou girar isso um pouco, posicioná-lo aqui. Eu vou girar isso um pouco, posicioná-lo aqui. Vou mover o meu círculo até aqui, por exemplo. E eu também vou mover esta ferramenta de oráculo para aqui e pode ser para cima. E finalmente, vamos fazer o mesmo para a opção dois. Então eu vou mover minha disposição reticulada e eles são mais meu ID de disposição Laila lá dentro mais do que meu chamado para baixo ainda mais. E eu vou voltar para este círculo e movê-lo cima e talvez até mesmo ampliá-lo um pouco assim. Então agora vamos visualizar o que fizemos até agora. Clique aqui. Então, mais uma vez, eles podem alternar entre essas cartas e você pode ver cartas mudando muito bem entre esses diferentes estados. Agora podemos clicar aqui e temos que fazer o protótipo primeiro. Desculpa, esqueci-me daquele palco. Então, quando eles clicarem aqui, eles podem ir para a Opção um. Clique em Dare está na opção dois, então ele usa as mesmas configurações a partir daqui, o que é uma ótima opção, basicamente a mesma coisa. Então simplesmente escolha Estado padrão, escolha Opção dois. E, finalmente, leilão para. Vamos para um estado padrão a partir daqui. Vamos para a Opção 1 daqui. E agora vamos ver o arejamento. Então vamos simplesmente dar uma olhada. Tudo funciona bem aqui. E você pode ver como esses elementos estão basicamente pulando, ampliando. E eu acho que eles parecem muito bonitos e eles parecem bastante envolventes. Assim, eles podem trazer para os usuários e mais alegria usando este aplicativo. Então o que eu vou fazer a seguir é trazer alguns detalhes mais realistas bem aqui para suas transações. Então vamos ver. Primeiro, vou desagrupar esta grelha e vou chamá-la, vamos ver. Precisamos de algo como transação. Então vamos dar um “dat”. Então este é o primeiro. Vão chamar-lhe Transação Um. Vou duplicar o texto. Eu vou dar esta transação para e posicionado aqui. Esta vai ser a transação três. Mais molhado aqui. Transação para e se você sabe o que estes são, você pode dar-lhes um nome diretamente dentro de uma seção wireframe. Então, se você sabe que essas são transações, você pode chamá-las diretamente. Ali. Mas eu não queria desperdiçar muito seu tempo, então eu coloquei aqui. Então deixe-me mudar os montantes aqui. Então digamos 47.20. Este próximo vai ser 270.73 porque basicamente com esses números você nunca está perto dele. Então você nunca tem 270 dólares, por exemplo. Você sempre aponta algo para que pareça realista aqui. Então vamos ver 9.43, por exemplo. E vamos dar este último 171,18. Se você é honesto vendo por que todos estes são menos é porque você pagou por esses serviços. Então é por isso que eles são menos alguma coisa. Então vamos ver, podemos dar isso hoje. Eu vou dar isso hoje também. Isto vai ser, vejamos, 14 de dezembro de 2020. E se você é um Westerner American, Reino Unido, você pode mudar isso em torno de SAW 1214. Então estamos na Europa, certo? Assim, você sabe, você escreve o contrário. Então, só para não me confundir ainda mais, você pode trocar estes ao redor para atender às suas necessidades. Então, 9 de novembro de 2020, e eu só vou mudar isso para 2020 bem apenas para manter as coisas muito mais consistentes. Como pode ver, vamos cair. Então esta é a transação mais recente e esta é a transação posterior. Então vamos realmente usar esses mesmos dados duas vezes. E vamos dar 24820. Como isso. Na verdade, vou copiar e colar alguns nomes de negócios aqui. Então, por exemplo, você pode imaginar que comprou café. Curio comprou algumas roupas. Aqui, u, por exemplo, pagou por alguns utilitários. Talvez fosse o pagamento do seu carro, digamos que fosse comida. E no mesmo dia em que pagou o carro, talvez tenha esperado na fila. Então você tem que pensar em todas essas coisas para torná-las mais realistas. Então, mais uma vez, vou escrever comida para ele. Vou escrever “Enclose”. Isto é utilitários. E isso vai ser comida ou pagamentos com cartão, desculpe. Isto vai ser comida. E, finalmente, neste vai ser perto. Então agora eu vou mudar as cores destes apenas para indicar como os usuários vão vê-los para que eles possam reconhecê-los um pouco mais fácil. Então, para a comida e sorte padrão aqui também, vamos mudá-lo para mesa verde mais escuro para as roupas. Por exemplo. Podemos escolher isso e ir com, eu não sei, vamos ver, verde claro, se isso não faz muito sentido, talvez possamos fazer um pouco mais escuro. Então talvez este para o fim. Sim. Para os utilitários pode ver talvez possamos mudar isso para vermelho, por exemplo, e pagamentos de carro Florida, podemos ir com esta cor apenas para indicar diferentes opções e que os usuários já clicaram. Então o que eu vou fazer agora é copiar e colar alguns ícones aqui, apenas para que possamos colocá-los na posição certa. Então agora vou colá-los de volta. Missy, e tenho certeza que estou dentro daqui só para que eu possa encomendá-los um pouco mais gentilmente. Então eu vou posicionar esta comida bem aqui. Vou me certificar de que são dez pixels. Aqui. Por exemplo, em 15, vejamos, 12345, ano 18, a morte funciona melhor. Eu vou fazer o mesmo por baixo de perto. Então vamos ampliar um pouco. Certifique-se de que eu estou em um centro e certifique-se de que eu ir 15. Então dez em 2,5 utilitários. Então eu tenho este ícone de posição aqui. Certifica-te de que estou num centro como este. Desculpe, 12345, então 15. E, finalmente, para um pagamento de um carro. Então não faça isso aqui. Quero dizer, como centro 12345. Acho que funciona muito bem. Agora, vamos mudar suas cores. Então, para os pagamentos do carro que descobrimos, para os utilitários, temos essa cor, para as roupas teriam essa cor. E, finalmente, para a comida, temos cor de mesa. O que vou fazer a seguir é criar alguns componentes adicionais. Então vamos usar a comida para que eu possa usar o Control X para cortá-la, ir para a minha comida, apertar o controle V para colá-la na posição. Posso agrupar e chamar de rótulo de comida. Na etiqueta do pé. Eu realmente quero que ele controlou a chave só para que eu possa criar meu componente. E então o que eu posso fazer é usar este ícone. Então clique nele deve controlar x mais uma vez. Localize minhas roupas. Então aqui estão eles. E faça a mesma coisa. Não são aspas, tag, chave de controle. E vamos fechar estes dois. Recebemos o pagamento do carro ao lado do Controle X. Desculpe, temos utilitários, mas vamos ser desperdiçados aqui. Escreva este controle k. e finalmente, vamos arrastar nossos utilitários aqui e crescer poços como este atingiu o Controle K. E agora finalmente, porque temos esses dois repetindo, então comida e roupas, o que podemos realmente fazer é ir bem aqui. Clique na nossa comida e localize a etiqueta de comida. Aqui está. Arraste e solte e simplesmente posicione e no lugar. Então o que eu vou fazer é, na verdade, apenas alinhar as coisas aqui. Porque quero que o meu texto seja alinhado com a nossa grelha. Esse jumpin, mova-o para cá e remova a comida em geral de águas profundas. O meu pai. E você sempre pode pular insight e ver se você está alinhado. Então vamos ver assim, porque eu queria estar alinhado com minha grade. É isso. E, finalmente, para as roupas, LoginData, mesmo. Então arraste nossas abas estão fechadas aqui. Aqui está. Sim, assim. E eu vou posicioná-lo bem aqui e ter certeza que está no centro mais uma vez, e ter certeza que eu sou assim. E é basicamente isso. Concluímos esta seção. Mais uma vez, quando eles clicam, aprendam mais, eles podem ir para as transações e, em seguida, eles podem ver mais dessas transações. Para que possam vê-los em detalhes. Por exemplo, café Starbucks. E então você pode integrar a localização da sua transação. Você pode integrar um pouco mais de trigo, que cartão, por exemplo, profundamente pago e assim por diante e assim por diante. Então você pode realmente mergulhar em todos esses detalhes. Agora o que eu realmente não gosto sobre isso é o espaçamento. Então talvez possamos trabalhar em um espaçamento um pouco melhor. E talvez eu possa mover todas essas tags para corresponder com minhas linhas de grade. Então vamos fazer isso. Então o que eu posso fazer é, vamos ver, mover minha etiqueta de comida para aqui. E posso mover e minhas roupas para agir ou ouvir, utilitários, pagamentos de carro, comida. E, finalmente, cito, só para que eu possa manter as coisas bem organizadas. E, obviamente, se você tem o número maior, se ele terminou, não vai caber, então você pode mover o DES apenas um pouco, por exemplo, para alinhar até aqui, mas tudo depende de você. E você pode ver com seu cliente, que tipo de transações eles esperam? Porque a maioria das pessoas realmente fazem essas pequenas transações como 1597 e assim por diante. Mas se eles pensam que vão fazer transações maiores, então você pode trabalhar com eles e, em seguida, adaptar sua camada Adaptive Layout para isso. O que vamos fazer finalmente, aqui é trabalhar nesta seção e não temos muito o que fazer aqui é simplesmente substituir essas tags e largura, as que acabamos de criar. Então vamos arrastá-los e soltá-los para termos nuvens. E posicione-o aqui assim. Certifique-se de que você está no centro aqui. E eu vou movê-lo para cá. A seguir temos comida, então a mesma coisa. Certifique-se de que você está no centro desta comida. E nós vamos trabalhar em um espaçamento em apenas um pouquinho. Então vamos posicionar rapidamente. Temos utilitários. Então eu vou posicioná-lo ou aqui mesmo. Certifica-te de que estou alinhado. E finalmente temos pagamentos de carro são basicamente a mesma coisa. Vou mostrar-lhe um alinhado e pronto. O que eu vou fazer a seguir é removido e esses textos daqui, eu vou posicionar minhas tags aqui e eu vou organizá-los mais uma vez. Então, os torrões vêm no topo e, em seguida, vem a comida, utilitários, o pagamento do carro após a morte está na extremidade inferior, basicamente em que ele. Agora vou selecionar todos eles e movê-los aqui um pouco mais perto do meu gráfico. E falando em gráfico, vamos trabalhar rapidamente nisso. Então agora temos quatro cores diferentes aqui, e vamos integrar essas quatro cores diferentes dentro para indicar o quão grande de um gasto o item é. Por exemplo, as roupas podem estar debaixo de uma das maiores, especialmente com a comida. Utilitários são o segundo lugar em co-pagamentos são talvez o terceiro porque os pagamentos de carro geralmente não tomar muito dinheiro longe de você a cada mês. Então vamos trabalhar nisso agora. Como vou fazer isso é, obviamente, vamos deixar esta mensagem no Dutcher. Vou fazer quatro cópias. Então aperte o controle D, D, D. Vou chamar esse círculo próximo. Só para que eu saiba o que é. Vou chamar isso de comida. E este vai ser utilitários. E finalmente, este último vai ser o carro de Feynman I, que obviamente nós vamos dar a eles e suas cores. Então, para o círculo fechado, você pode simplesmente clicar aqui para selecionar sua cor. Ou você pode ampliar como quiser. Vamos lá para fora. E eu acho que esses dois, sim, eles são diferentes. Então, vamos agora pular para a tag de fechamento ou clique com o botão direito do mouse em editar como componente médio. Aqui está. Neste componente principal dentro de suas roupas, nós estamos realmente indo para selecionar, vamos ver. Vou selecionar esta cor. E agora combina, como você pode ver com este ícone de camiseta. Então, se eu clicar duas vezes e movê-lo para fora um pouco. Vamos ver o RB da mesma forma. Eles não são os mesmos. Então eu preciso usar essa cor, ok? Então agora eles são completamente iguais, então eu estou usando essa mesma cor para ambos até agora, 606406. E isso é mais uma vez, as vantagens desses componentes e componentes datas porque você sempre pode voltar para o componente principal editado. E agora, se fecharmos isto, levar-vos de volta a revelar. Você pode ver que é o mesmo e levá-lo de volta aqui e você pode ver que nós mudamos a cor. Então, vamos agora voltar aos nossos círculos. Então temos um círculo fechado. Eu vou ampliar um pouco e eu vou ter certeza de que eu selecionar esta cor. E então temos o círculo de comida. Vou certificar-me de que seleciono esta cor. Utilitários, vamos selecionar esta cor. E os pagamentos do carro, vou selecionar esta cor. Se você está se perguntando por que eu estou escolhendo meus carros assim, é porque. Você não pode aplicar colares de borda simplesmente clicando aqui e clicando em uma dessas cores porque elas são aplicadas somente à cor de preenchimento em si, não à cor da borda. Então, infelizmente, você tem que criar uma cor de borda usando essa opção. Então, a próxima coisa, o que vamos realmente fazer é começar com o nosso gráfico. Então, basicamente, como vamos fazer é basicamente criar algumas seções usando o lápis para que possamos mascará-las. Então vamos começar com o círculo fechado. Então vou usar meu lápis. Eu vou pairar bem aqui para que ele possa me mostrar que esse é o meio. Vou clicar em segurar a tecla Shift e ir até, digamos, em algum lugar por aqui. E eu vou clicar aqui e depois aqui para ter esse tipo de triângulo. Vou movê-lo para lá junto com o círculo Claude. Então eu vou segurar Shift Alt e desculpe, controle de turno e amplificador para que eles possam mascarar o aborto. E eu vou chamar isso de perto. Só para que eu saiba o que é. O próximo é comida. E como dissemos, a comida vai ser a maior despesa de provavelmente. Então, pressione p ou clique aqui para o pai, mais uma vez, mouse para o centro, clique, clique em algum lugar no centro. E eu vou, por exemplo, clicar em algum lugar por aqui. Clique fora mais madeira na parte superior do nosso controle de mudança de alimentos m para que possamos mascarar aquele parque. Isto vai ser chamado de comida. Temos utilitários. E, mais uma vez, os serviços públicos podem ser caros, mas eles não precisam ser. Então vamos ver, talvez possamos dar-lhes algo assim. E vamos lá para fora. Vamos até aqui, ou você pode ir o contrário como quiser. membro da posição aqui, atinge o controle de turno, serviços de qualidade do ar. E se em algum momento, por exemplo, seu cliente quiser que você reduza o tamanho desses utilitários. Você pode pular de volta para aqui. Você pode clicar duas vezes dentro e posicionar isso como desejar que você possa aumentar ou diminuir o espaço em disco para todos eles. Então, por exemplo, assim. E vamos posicioná-lo assim. Eu não vou pagar o carro porque o pagamento do carro já está lá. Então vamos deixar isso aí. E isso é basicamente para este projeto que já aplicamos na reformulação de informações de seção para DES. Se você quiser fazer isso para ser ticker para que você possa saltar dentro de todos esses círculos. Deixe-me mostrar-lhe rapidamente uma dívida. Então nós temos o gráfico e você precisa selecionar todos esses círculos. E você pode, por exemplo, fazer com que seja 20. E agora você pode ver como isso se parece. Vamos com 20. E você tem que realmente definir selecionar todos os separadamente, ou você pode fazer isso desde o início apenas para ver o que você tem. Então agora temos muito círculo Dicker. Então, se você está nessa, você pode fazer isso. Mas eu vou colar largura em temperatura apenas para que isso me dê maior consistência com o resto do meu design. Então, lá temos. Concluímos nossa primeira tela do painel. E eu vou simplesmente apertar o controle D e chamá-lo de contas do painel ou conta de design do painel como você quiser. E acho que é basicamente isso. Verei você no próximo vídeo onde vamos abordar esta tela de conta do painel. E vamos trabalhar nisso mais tarde. Então, vemo-nos lá. 47. Criando design 9: Vamos agora começar a trabalhar em e conta de design do painel. E a primeira coisa, obviamente, é selecionar nossa conta aqui apenas para indicar onde estamos. A próxima coisa eu vou apagar este e este aqui porque nós não precisamos dele. Guia Ajuda, você pode deixá-lo lá. Próximo. O que vou fazer são informações da sua conta como essa. E vamos ver, a memória pode posicioná-lo para ser em 40, por exemplo, eu acho que vai funcionar muito bem. Então eu vou mover esses três. Certifique-se de que estamos em 40, porque estamos em 40 aqui. E o que vamos realmente apresentar nesta informação de conta é que o usuário vai ser capaz de ver, por exemplo, quais contas eles abriram. Então, se você se lembra, começamos a contar e assim por diante e assim por diante. Quanto gastaram desde a abertura? Para que possam ver tudo isso. E eles podem, por exemplo, clicar lá e ir para transações para ver suas transações passadas. Eles ainda vão ter isso ajudado dab porque é útil tê-lo lá, obviamente. E finalmente, nós vamos ter esses campos para que eles possam adicionar informações lá, por exemplo, eles podem mudar como eles nomeiam exibe no cartão. Eles podem alterar o endereço se, por exemplo, d movido e alterado o endereço, eles podem alterar o e-mail e senha e assim por diante. Então, vamos agora fazer isso. Vamos agora lidar rapidamente com este. Então eu vou, vamos ver. Eu posso remover estes para que eu possa ter a mim mesmo e guia vazia. E vamos chamar isso de total gasto. Como o papai. Vou entrar na minha conta principal e escolher estes dois. Por exemplo, pressione Control C. Clique aqui, poderia controlar V e simplesmente posicionar e também na tecla shift para posicioná-los lá. Agora o que eu vou fazer é ter certeza que ambos estão alinhados no centro. E vamos ver, eu posso posicionar estes dois para o centro e estes dois para o centro assim. E vamos dar isto. Assim, por exemplo, total gasto desde a abertura. E vamos ver. Vamos dar outro número a isto. Então, por exemplo, 96.507 ferramenta para, vamos ver. Então, um grande número. E este é o número que eles gastaram desde a abertura. Vou me certificar de que eles estão no centro de barcos e vou posicioná-los bem aqui. E vamos encerrar o dia. Mais uma vez, eles podem clicar aqui, ir para a etapa de transação mais tarde e explorar todos os seus gastos desde que eles abriram sua conta. O que vou fazer a seguir é saltar bem aqui. E vamos ver, vamos chamar essa conta inicial. O que vou fazer é saltar aqui e localizar o ícone da minha conta Iniciar. Então eu estou indo para localizado aqui está, e arrastá-lo e soltá-lo em posição. E onde fazer mais com aqui. E eu vou posicioná-lo no centro assim. E vamos ver, talvez, não sei, 12 para os quatro. Por exemplo, vou remover este número e vou posicionar estes dois aqui. Certifique-se de que eles estão na linha esquerda, certifique-se de que eles estão posicionados à esquerda para escrever isso. Vamos chamar uma conta de início de disco assim. E vamos ver. Vou ficar preso em 23 de abril de 2020, mais uma vez, o povo britânico americano, quem quer que esteja usando o contrário. Então 0-4 ponto 23, você pode fazer em dívida também. Então, 40, vamos ver como isso funciona. Acho que funciona bem. Vamos ver onde estamos. Então 1234. Sim, acho que funciona muito bem. O que eu realmente vou fazer é talvez fazer isso e ficar um pouco acinzentado. Então, dê-nos cor. E eu realmente não gosto deste espaçamento. Talvez 20. Sim, acho que funciona muito melhor. E diretoria, nós completamos essas seções. Agora, o que nos resta fazer é preencher os campos abaixo para os fóruns. Então eu vou simplesmente copiar tudo isso. Então FirstName, Sobrenome, senha de e-mail e um botão pressione Control-C. E saltar aqui tinha controle v. Então eu vou colá-los todos n. Agora eu vou fazer é basicamente reorganizá-los um pouco. Mas antes que eu faça, porque você não pode ver nenhum desses campos de formulário. Se você pode ver, porque esta é a cor dos campos estrangeiros é a mesma cor do painel. Então vamos primeiro movê-los todos para baixo ajudou porque não vão para lá de qualquer maneira. Então eu vou abrir todos esses campos estrangeiros, campos de entrada. E isso é selecioná-los, escolha a cor branca apenas para que você possa vê-los no quadro um pouco melhor. Em seguida, vou organizá-los. Então o primeiro e o último nome vão para aqui. Então vamos ver, talvez possamos posicionar isto para 40 também, apenas para manter a consistência. Assim, você pode posicioná-los ainda mais se você quiser, mas eu acho que eles vão funcionar muito bem. A seguir, vou posicionar o meu e-mail aqui, certificar-me de que é aos 40. E vamos brincar com algum espaçamento. Mas vamos primeiro terminar isto aqui. Então vamos ver. Vamos estar no 12345678. Vamos posicionar isso em 80 apenas um pouquinho. E o que eu vou fazer com o botão é porque essas grades foram alteradas. Eu vou mudar o tamanho do botão ligeiramente para que ele possa acomodar três colunas aqui e três colunas aqui. Então vamos alternar entre eles. Funciona bem. E o texto aqui vai escrever na edição de informações. Eu faço isto. E eu vou saltar para dentro da minha casa, estado baseado no texto dentro, saltar de volta para os decks principais e Harrier. Então o que eu vou fazer na verdade é posicionar D como este. Vamos ver, 246. Então, aqui estamos nós. Bem aqui. Vou fazer o mesmo por este. E eu basicamente vou saltar e adaptar meus campos para migrar. Então, assim. Então todos os quatro vão ter seis colunas de largura, assim. E quando fazer o mesmo para o nome. E, basicamente, aqui estamos nós. Concluímos nossa conta Design para a página do painel. Então o que, mais uma vez, o que eles podem fazer aqui é semear a conta em que estão. Então, abriu neste encontro. Se, por exemplo, tiverem várias contas abertas. Então, por exemplo, um está verificando, um está economizando, outro é para dívida, crédito e assim por diante. Então você pode ir em frente e incluir a paginação e fazer o mesmo que fizemos para isso e para os cartões, se você lembrar. Assim, eles podem rapidamente clicar na paginação e mudar entre todas as suas contas ou Dan cerrado, e esta informação vai ser atualizada, bem como o próprio ícone. Então temos o valor total desde os gastos. Então este é o valor que eles gastaram desde que abriram a conta no banco. Mais uma vez, eles podem clicar lá e ir para as transações e explorar todas as suas transações indo para trás, ainda temos a guia Ajuda. E finalmente, temos todas essas informações sólidas agrupá-lo apenas para que possamos manter as coisas simples. Então, por exemplo, informações pessoais como essa. E eles podem adicionar essas informações pessoais. Então, mais uma vez, se eles, por exemplo, se mudaram para que eles mudem seu endereço. Não temos o endereço aqui, mas podemos incluí-lo. Vamos ver, talvez possamos colocar o endereço aqui no topo. Então vamos ver, nós não temos isso aqui, mas nós podemos rapidamente incluído. Então vamos fazer isso. Em vez de usar seis, podemos usar um para, por exemplo. Então eu posso pular aqui, 1234, FirstName, Sobrenome. Para que eu possa posicioná-lo para ser bem aqui. Vamos ver, 1234. Meu pai e eu podemos controlar D e MODIS. E este pode ser o nosso endereço. Ou estou pensando porque temos esse endereço, então vamos mudá-lo rapidamente. Então, se despir. Porque temos o endereço. Talvez possamos estender isso para que possamos brincar com nossas colunas ainda mais. Então vamos ver, talvez em vez de quatro, eu possa dar três porque eu não preciso de muito espaço para o primeiro e último nome. Então vamos ver 33 assim. E finalmente, posso dar a isso o espaçamento de seis, por exemplo. Então 246, porque eu quero incluir um endereço maior, por exemplo, apenas para que eu possa indicar esses interesses. Então houve como ele, e agora estamos concluídos. Então, mais uma vez, se o usuário quiser alterar suas informações pessoais, então seu nome ou sobrenome, se de alguma forma mudou e quiser mudá-lo aqui, eles podem mudar o endereço ou vagamente, se eles se mudaram, eles podem alterar seu endereço de e-mail e a senha. E eles podem fazer tudo isso simplesmente clicando em adicionar informações. Então edite informações. Então vamos para o final, visualize rapidamente isso, veja como tudo parece. E você também pode incluir estados de foco para todos esses, se você quiser. Então você pode, por exemplo, incluir essa sombra de fundo que já temos. Você pode, por exemplo, torná-lo um pouco mais forte quando o pairar aqui. Então você pode indicar que eles fizeram, mas por enquanto, vamos deixar isso aí. Então aqui temos isso ou obviamente funciona bem. Temos o efeito de pairar e temos um selecionado atual. Então, basicamente, é isso para este vídeo. Vejo-te no próximo. E vamos ver o que temos a seguir. Próxima as nossas transações. Então, vemo-nos lá. 48. Criando design 10: Vamos agora continuar de onde paramos no vídeo anterior. E em vez de copiar este, eu vou realmente selecionar e copiar este. Então vamos ver o que podemos fazer aqui. Neste, eu só quero manter suas transações porque estamos na tela de transações. Então vamos chamá-lo assim. Primeiro de tudo, vamos mudar isso para uma transação pulando bem aqui, e vamos chamá-lo de transações assim. E como eu disse, dentro das transações você pode clicar aqui para, em vez de aprender mais, vamos mudá-lo para muito mais. Então vamos ver. Carregue mais. E vamos ver, eu posso mover este seis. Então 123456, como diffs, eu vou ter certeza que está no centro do meu passado assim. Vou bater no Controle C. E vou voltar para aqui. Então eu vou apertar o controle V para colá-lo. Vou apagar estes antigos. E eu vou simplesmente, e pulando bem aqui, selecionar esses dois, posicioná-los um pouco para baixo. Então, dois aqui. E eu vou mais uma vez ter certeza de que eles estão centrados assim. Então, mais uma vez, você pode clicar em carregar mais e você pode estender todos estes para que eles possam fazer uma área rolável. Então vamos realmente fazer isso. Então eu posso saltar para dentro e eu tenho todas as minhas transações aqui. Para que eu possa agrupar termos. Por exemplo, vamos ver, eu posso apertar o controle e G, e eu posso chamar isso de transações assim. E eu também posso clicar e fazer uma grade de repetição. E vamos ver, eu posso estender isso para, por exemplo, e eu não sei, digamos aqui. E o que posso fazer com isso é desagrupar grade com o botão direito do mouse. Então temos três dessas transações. Você pode apertar o controle G Se quisermos, ou você pode simplesmente mover essas transações dentro deste primeiro. Então este é o nosso primeiro. Este é o nosso segundo, então este é o nosso terceiro. Então, o que realmente precisamos fazer é renomear isso. Então nosso último foi seis. Então isso vai ser sete. Isto vai ser 89101112. Eu dat. E, na verdade, vou apertar o Control X para cortá-los. E eu vou largar o mandato aqui mesmo. Verdade, filme posicionado é todo o caminho para baixo clique com o botão direito Desagrupar componente, desculpe sobre o grupo e nosso grupo. E talvez possamos até deixá-lo lá. Não estou te preocupando, mas você entendeu. O que eu vou fazer a seguir é clicar aqui e você tem esses três bem aqui. Então este é um pergaminho horizontal. Na verdade, vamos usar mais tarde quando começarmos com o design responsivo. Este é o rolagem vertical, então para cima e para baixo, e este é o rolo em todas as direções. E basicamente uma dívida é mais útil se você estiver criando um mapa, por exemplo. E você quer mostrar o mapa em todas as direções. Então, para este caso, eu vou usar rolagem vertical. Então eu vou posicionar esta área até aqui, por exemplo, apenas uma espécie de eu posso indicar onde os usuários podem transar. E eu posso pular bem aqui, clicar em pré-visualização. E dentro de nossa pré-visualização, eu só quero mostrar que quando você começar a rolar, você pode ver como isso se parece. Então, basicamente, eles podem clicar em carregar mais. Vai carregar mais. E eles podem começar a rolar e ir até o fim. Obviamente, podemos mudar as ações para tornar as coisas mais realistas, mas não vamos ficar atolados com detalhes. Então, obviamente, essas datas vão sair daqui para baixo. Então este é o mês de agosto do ano, talvez este seja dois de agosto, e então eles vão descer para janeiro e início do ano. Mas como eu disse, não vamos ficar atolados com esses detalhes. O que vou fazer a seguir é talvez possamos até alargar isto. Bem, vamos ver. Temos 245. Eu não sei. Talvez possamos abaixar isso e talvez estender isso um pouco. Vamos fazer isso. Então, vou tornar isto um pouco mais estreito. E você pode ver o design responsivo em ação aqui mesmo. Mas vamos falar sobre design responsivo um pouco, um litro. Então eu vou posicionar todos estes aqui em baixo. E dentro do nosso grupo de rastejamento, o que temos que fazer agora é basicamente eu posso pular aqui e ver se estou com 40. Então eu vou reposicionar alguém então eu tenho 35 anos aqui, então 12345. Então eu estou no 4041 no topo. Vou posicioná-lo em Dare para chegar aos 40. E finalmente, vou mudar isto para aqui. E você pode, obviamente, aumentar o espaçamento entre todos estes. Então o que precisamos fazer é realmente abrir todos eles e começar a organizá-los um por um. Então eu posso usar hoje para d e d e, em seguida, rolar para baixo. Encontro, encontro, encontro para ver onde estamos. Então dois D.D. Não sei por que continua trazendo de volta, mas vou rolar para baixo de qualquer maneira. Então, mais uma vez, precisamos estar aos 40. Então vamos nos mudar para aqui 1234, que estejamos em linha com nossos textos. Em seguida, o que podemos fazer é realmente alinhar todos esses itens a este ponto de grade. Então vamos escolher estas são as empresas. Starbucks são este onde temos rei e depois mais um e selecionamos todos eles. Estou segurando minha tecla Control e clicando para que eu possa, obviamente, selecionar vários neles. Tão azul Rei, e finalmente, este último é polímero. Então, na verdade, simplesmente alinhe-os à grade assim. Em seguida, vamos nos mover nesses números. Então, basta selecionar seus números. Suba daqui. Vou selecionar todos esses números e movê-los para a direita e 40. Então vá até o fim para ouvir 1234 porque agora temos um pouco mais de espaço. E o que podemos fazer é deixar esses itens como dívida, mas eu só quero alinhá-los rapidamente à grade para que tenhamos um pouco mais de espaço. Então o que precisamos fazer é realmente selecionar nossas tags. Vou selecionar a escuridão temporária. Então, basta selecionar suas tags e terminaremos em apenas um segundo. Então Auditoria é alinhá-los com a grade assim. Então agora parece bom e limpo. E o que eu também notei é divulgado pilha deve ir bem aqui. E vamos encontrar outro. Heranças alimentares, porque usamos a repetição maior duplicá-los e tudo o resto parece bem. Vamos agora fechar nosso grupo de rolagem e talvez testemos mais uma vez e ver o que temos aqui. Temos 41, então podemos mover um. Então estamos em 40 e estamos em um nove aqui. Então vamos ver, talvez eu possa fechá-los assim ou eu possa até revelá-los. Aqui. Estamos em 19 e estamos em 19 aqui. Então vamos ver, talvez possamos posicionar este apenas um para baixo para que estejamos em 20 aqui. Então, até o nosso grupo de pergaminho e estamos 18 para baixo. Vamos fazer isso mais uma vez. Veja como isso parece. Vamos ver para que eu possa rolar para baixo e tudo parece bom e limpo. Agora que isso terminou, vamos passar para as seções de parada. Então, na verdade, vou remover este. Vou posicionar este aqui. E também vou certificar-me de que escolhi estar às seis. Então vamos ver, estamos agora em quatro, estamos agora em seis solidus. E finalmente, vou fazer o mesmo por este. E só para me dar um pouco mais de espaço, quando eu realmente vou fazer a seguir é excluído este tipo em suas transações bem ali. E então eu vou selecionar esses dois e posicioná-los para estar em 40. E foi aumentar a altura de ambos. Então vamos selecionar cartões VG conta, VG. Vou aumentar para 291, assim. E agora estamos no 39 para baixo. Vamos ver, estamos em 41 com estes. Então nós podemos realmente mover esses dois, apenas um para baixo. Então estamos no mar. Estamos em 40 e estamos no advogado nove aqui. Vamos ver. Então podemos mudar isso para 290, assim. E agora estamos em 40, estamos em 40. Então tudo parece bom. Mas eu vou fazer é apertar o controle S e explicar o que vai acontecer aqui mesmo. Então aqui vamos incluir alguns gráficos e vamos realmente mostrar suas transações de transição. Então basicamente essas transações serão divididas por renda e despesas. E eles vão voltar uma semana. Assim, os usuários poderão ver essas transações uma semana atrás. E eles serão realmente capazes de verificar entre renda e despesas e basicamente para ela e para ver onde o gastou mais dinheiro em que dia e quanto no total. Bem aqui, à direita. E nós estamos realmente indo para dar-lhes alguns Tablets Utilitários coloridos pelo DADT ou nós vamos ver alguns passos sérios, por exemplo. Então, não vai ser capaz de transferir dinheiro. Então digamos que você tem sua esposa ou sua namorada mãe mais ampla não importa. E você quer transferir o dinheiro da sua conta. Então eles terão a opção lá. Então eles terão a opção de pagar as contas. E eles também terão a opção de converter dinheiro. Então, para a conversão, digamos que sua conta está em dólares americanos e você quer converter esse dinheiro em euros, seja para gastar ou para enviar para outra pessoa. E isso é basicamente o que isso vai ser. Nós não vamos criar essas páginas, vamos apenas criar essas opções porque essas páginas já foram criadas pelo banco. E esses são basicamente apenas um pop-ups de código básico. Abaixo disso, bem aqui. Vamos ter conteúdo de equilíbrio. Então vamos ter renda e despesas. E estes vão ser basicamente totais para o mês. Então, agora vamos começar criando tudo isso. Então eu vou começar aqui para que possamos ir da esquerda para a direita. Vou digitar suas seções assim. E vamos ver, podemos chamá-los de beleza de transações assim. E o que eu vou fazer, vamos ver, talvez eu possa mover isso um pouco para cima. Vamos ver o lugar Suwanee. Vamos ver onde estamos aqui. 12, estamos em 20, estamos em 40. Então, vou deixar assim. Eu também vou posicionar isso um pouco para baixo. Vou apagar este texto, apertar o controle D e este e dar-lhe renda. E neste, eu vou dar caro. Como isso. Vou posicionar os dois para serem alinhados à direita. Então vai ser fácil para mim organizá-los. Mova isto para o verde, mova isto para o vermelho. Obviamente, vamos explorar essas despesas um pouco mais. Certifique-se de que estamos em 40. Então 1234. E mais uma vez, certifique-se de que estamos em 40 com este também. E aqui vamos usar estes sanduíches me levou certeza. Estou 20 para baixo 40 bem aqui. E eu vou digitar a partir do alinhamento esquerdo, então mod para a segunda-feira. E você pode obviamente espaçado quantidade uniformemente se você quiser processar pode controlar D. Você pode usar a grade de repetição e é muito mais rápido. Mas você também pode fazer isso para que você possa posicioná-los assim. Portanto, certifique-se de que você está alinhado à direita. Não vai mostrar, é isso. Então vamos fazer assim. 1234. Agora estamos alinhados e este será obviamente domingo. Eu faço. E você pode duplicar isso e chamá-lo de sábado. Isto vai ser sexta-feira. Esta vai ser quinta-feira. Esta vai ser quarta-feira. E isso vai ser 2Z. Acho que sim. Então, basicamente, vamos agora ter a distância entre eles de 60, por exemplo. Vamos ver como funciona a Terra. 60. E deixe-me organizá-los rapidamente. Então eu vou selecionar minha segunda-feira, movê-lo todo o caminho até o domingo é bem aqui. Como disse, você tem a opção de repetir a grade, mas estou apenas mostrando as duas maneiras para que você possa fazer isso também se quiser. Então eu vou posicionar isso para ser em 60. E agora vamos tentar outra coisa. Vou selecionar todos eles e simplesmente clicar aqui para ver o que Adobe XD gamey. Então me deu 707070707070 aqui. Então tudo bem, porque ele separou todos eles rapidamente e você viu essa opção também. Então eu posso ir em frente e agrupá-los, chamando-lhes dias. E agora o que me resta fazer é basicamente criar meu gráfico. Então eu vou, por exemplo, duplicar este controle D e digitar mais ver para 25. Ou para ter certeza que é do meio. E você pode, claro, brincar com isso. Eu me certifico de que este é deixado, este está alinhado à direita apenas para fins de alinhamento. Mas você pode ter certeza de que este é o centro, por exemplo. E agora vai mostrar um 69 ou 70. Então não vamos comprar atolados com isso e com os detalhes sem importância necessários, vamos seguir em frente. E o que eu vou criar aqui é uma dica de ferramenta. E para criar uma dica de ferramenta, eu vou simplesmente usar minha ferramenta de retângulo e arrastar meu retângulo mais largura aqui. Vou chamar-lhe ferramenta para fazer o que fiz. E eu vou me certificar de que esses dois estão centrados. E eu também posso estender o meu encurralado simplesmente segurando minha chave antiga. Posso estender os cantos ao mesmo tempo. Eu posso ir em frente e digitar, por exemplo, cinco, apenas para dar Índias em cantos e bordas redondas. Eu também posso saltar para dentro e usar a minha ferramenta polígono para criar este retângulo. Vou virar e me certificar de que esses dois estão centrados. Como este. O polígono obviamente vai cair. E eu vou incluir, por exemplo, bem aqui, eu vou chamá-lo de dica. Assim, vou remover a fronteira. E vamos ver, talvez eu possa escolher essa cor. E vamos ver para o texto, você pode deixar esta cor se você quiser. Acho que vai funcionar muito bem. Mas você também pode destinado para fora com branco. Isso funciona bem também. E vamos, você sabe, vamos apenas com branco. Eu acho que é por isso que finalmente, vamos fundir esses 2k. Então eu vou clicar aqui para criar uma forma. E nós chamávamos de Tooltip, assim. E agora você pode movê-lo. Vamos simplesmente agrupá-lo. Vou dar-lhe um nome como este. E vamos deixá-lo lá por enquanto. O que vou fazer a seguir é usar meu lápis e minha mente sobre quando me alinhar aqui. Vou alinhá-lo aqui e acertar a fuga. E só quero ter certeza de que estou centrado. Nós todos estes. Então o que eu posso fazer é obviamente usado minha ferramenta de retângulo bem aqui. Eu posso simplesmente estender. E você também pode passar o mouse aqui em cima do teclado. E você tem esses guias para que você possa desenhar um guia onde quiser e alinhar as coisas a ele. E você pode fazer o mesmo a partir da borda esquerda. E você pode simplesmente alinhar um guia, ao contrário da dívida, e, em seguida, simplesmente seguido em dívida e guia para o alinhamento. Acho que vai ficar tudo bem. Então, quando você quiser removê-lo, clique e arraste-o para fora. Certo, agora vou dar um nome a ele. Então esta vai ser a nossa linha de renda. Eu mudei isso. Vou duplicá-lo. Esta vai ser nossa linha de despesas ou não, vamos primeiro criar e você vai ver o que eu quero dizer. Primeiro, vamos mudar a cor da borda para essa cor. Vou dar a volta ao boné. Então, tanto aqui como aqui vai estar perto do que eu também vou fazer. Vamos ver. Posso aumentar o tamanho de assemelhar-se a cinco. Acho que funciona bem, porque agora você pode ver. E o que vamos fazer a seguir é saltar para adicionar alguns pontos. Então, você pode clicar duas vezes e clicar aqui. Assim, por exemplo, podemos criar um ponto de ancoragem adicional para todos esses dias diferentes. Para que possamos então apresentar todos esses dias de forma que possamos organizar essas animações para que possamos, por exemplo, mostrar aos usuários onde eles podem clicar. Não vamos lidar com domingo e segunda-feira porque esses são obviamente pontos de partida. Mas eu vou fazer o próximo é simplesmente movê-los ao redor apenas para tentar olhar para ele. E você pode ser extremamente específico se quiser usando esses guias, por exemplo, mas eu não vou me preocupar com isso. Vamos deixá-la aqui por enquanto. Agora o que eu vou fazer é simplesmente aumentá-lo assim. Talvez eu possa diminuir esses dois aqui. Estes dois aqui, aqui, e talvez aqui. Talvez isso possa subir um pouco. E podemos posicionar todas as dicas aqui. E, por exemplo, se você quiser, você pode usar essas linhas, mas você também pode usar linhas curvas. Então, para fazer isso, você simplesmente tem que clicar duas vezes, a fim de criar todos estes para ser curvo assim. Assim, você pode mostrar, por exemplo, fluxo muito mais realista desses gráficos. Então, por exemplo, alguém como mesa. E finalmente, o que precisamos é do círculo para que possamos escolher o nosso ponto. Que os usuários podem clicar. Por exemplo, aqui, digamos, acho que funciona bem. Digamos que só queremos mantê-lo no centro, mantê-lo agradável e limpo. E este vai ser o nosso ponto de ponta de ferramenta. E o que eu vou fazer é realmente dar-lhe esta cor removida borda. E é basicamente, também pode incluir algum tipo de sombra. Então, para 25, talvez. Acho que funcionou bem só para separá-lo basicamente formar o nosso passado. Agora que temos dívidas, o que podemos fazer é duplicar este e chamá-lo de linha de despesas. Vou remover minha linha de renda da vista. Clique aqui, selecione esta cor. E o que eu vou fazer basicamente é a mesma coisa, mas eu só vou, por exemplo, aumentar este, diminuir este para baixo. Talvez mova este um pouco para cima. Talvez aqui. Possivelmente posicionou isto aqui. Talvez isso possa saltar todo o caminho e pode cair. Então, agora eu trouxe minha linha de renda? Você pode ver isso. Então é basicamente isso. Você pode clicar em receitas e despesas para mostrar essas coisas diferentes. Então, vamos trazer renda para o ponto mais alto, na verdade. Por isso, vou mudar-me aqui mesmo. Então, é mais a ponta da ferramenta e o ponto da dica de ferramenta. Então, ambos para o ponto mais alto. Então este é o nosso ponto mais alto. Este é um ponto mais alto, na verdade. Então podemos, por exemplo, mais sagacidade, não sei. Vamos deixar aqui onde ele estava em decentrado apenas para mostrar aos usuários e ser um pouco mais preciso e um pouco mais importa não, apenas limpe com ele. Eu também vou duplicar nossas dicas de ferramentas. Então vamos agrupar essa ferramenta de qualidade. Dica como morte ou dica de renda e duplicar, chamar de despesas, assim. E obviamente com despesas e isso vai ser nesta cor vermelha. Então eu vou selecioná-lo e ter certeza de que estamos no vermelho, saltar dentro da dica de ferramenta BG, e dar-lhe nesta cor vermelha. Então, lá temos. E eu também vou remover este mais citação menos. E vamos ver, eu não sei, nove, 4-6 talvez. Acho que está tudo bem. Certifique-se de que estamos em um centro. E é basicamente isso. Então eu vou posicioná-lo para ser, por exemplo, aqui n. Agora vamos em frente e fazer o nosso componente. Então isso vai ser aqui, por exemplo. E podemos criar um componente a partir desta seção inteira. Então qualidade suas transações. Se você controlar a chave para criar um componente e este padrão, por exemplo, pode mostrar renda pode ser. Então vamos esconder a dica de despesas. Vamos alinhar despesas elevadas. E aqui sobre as despesas que vamos esmagar. Então eu que você esta apenas para indicar que a renda é selecionada. O que vamos fazer a seguir é criar um novo estado. Vamos chamar de despesas. O meu pai. E para despesas, obviamente vamos fazer o contrário. Então aqui e aqui, como aumento, as despesas vão ser descoloridas, renda vai agora atender a este colar para que eles possam alternar entre renda e despesas. Então agora vamos em frente e prototipamos isso. Então vamos escolher a guia para as despesas. Transição auto estado animado vai ser despesas e fácil e fora e ponto zero, vamos ver. Seis segundos. Eles acham que vai funcionar bem. Vamos voltar para caro, selecionar nossa renda, fazer a mesma coisa, e voltar para o estado padrão, bater em pré-visualização, só para que possamos ver o que fizemos. Então, até agora, temos um grupo de rolagem bem aqui. Vamos obviamente ter animações aqui. Acho que parece bem. E agora vamos testar isso. Por alguma razão. Ele não quer clicar. Talvez eu não tenha configurado isso, então vamos para as despesas. Clique aqui. E eu não escolhi o estado, então um estado padrão. E vamos ver isso mais uma vez. Vamos ver. Então eu realmente não gosto dessa transição. Mas vamos deixar isso aí por enquanto. Talvez qualquer seletor aqui embaixo, mas vamos deixá-lo lá por enquanto. Não gosto de transições entre estes dois desaparecendo. Então talvez apenas uma dica de ferramenta possa mostrar ou algo assim. Mas não vamos atolar com detalhes porque já estamos 25 minutos e ainda sentimos muito mais trabalho a fazer. Então vou voltar ao design e ao que precisamos aqui. Como um solo mencionado, é chamado isso acabado e eu vou para Default State. O que precisamos aqui são os ícones que mencionei. Então eu posso chamá-lo, por exemplo, Serviços. Eu estou morto. E eu veria que eu poderia apagar corrompendo apenas os textos para apertar o controle C, controlar V para colá-lo lá fora, apagar tudo. Então, em vez de cartões VG, vou chamá-lo de serviços, BG, minha dívida. E para o texto, vou desagrupá-lo muito rapidamente. E vamos ver, vou apagar estes dois. Então este e este eu deixo apenas este. Vou chamar-lhe transferência. Certifique-se de que vai do centro. Então X2 pode transferir dinheiro. Vou chamar a este próximo pagar contas. E finalmente, esta última conversão. Então, o que podemos fazer agora é realmente posicioná-los. Então isso pode ir para o centro. E vamos ver, isso pode ser bem aqui. Então vamos realmente ir em frente e criar nossos círculos. Por isso, vai ser muito mais fácil para nós. Então vamos ver, círculos podem ser, por exemplo, algo fácil como 100 por 100. Acho que funciona bem. Vamos posicioná-los a 40 a partir daqui. Então 1234, e eu vou chamá-lo de um círculo como esse. E vamos realmente duplicá-los. Posicionou-o aqui e bem aqui. E a próxima coisa que vamos fazer é copiar e colar todos esses ícones para que eu possa incluir o interior. Então vamos ver. Deixe-me encontrá-lo rapidamente aqui no meu outro projeto. Então eu vou fazer o ícone de transferência assim, ícone do bebê como este. E finalmente ícone de conversão como este. Vamos mudar rapidamente a cor de nossos círculos para que você possa ver os ícones e certifique-se de que removemos a borda porque não precisamos dela. E finalmente, posso pular aqui e ver meus ícones. Então, aqui estão eles. E eles não são componentes. Então eu vou posicionar faz para o centro. E vamos ver, eu posso selecionar isso. E ele tinha controle G está em breve para ser transferido, amadurecer. Tudo denso como este e este hit Controle G, D vai ser pago contas ícone. E finalmente, eu vou selecionar este e este, controle G, isso vai ser ícone de conversão. E depois vou certificar-me de que os posicionei no centro assim. Faça o mesmo para este número é mais uma vez, estes são ícones grandes, ícones de lata. Então você pode apenas ter certeza de que sempre que eu estou usando esses ícones, eu estou usando ícones grandes. E aqueles preenchidos são de elementos de convite. E eu acho que apenas ícone era o nome do criador. Então, mais uma vez, estamos a 40 bem ali. E o que eu também posso fazer é trazê-los para as próprias pastas apenas para que possamos organizar as coisas um pouco mais. Ver transferência, eu sei. E porque eu sou TOC mentira pai, eu simplesmente os movo para baixo. Como o pai. Lá temos no conhecimento rapidamente, organizá-los. Então isso está obviamente no centro. Vamos primeiro selecionar todos eles e ter certeza de que estamos no centro assim. Então estamos a 60 para baixo, 61 para cima. Então, isso é bom. E o que vou fazer a seguir está posicionado uniformemente aqui. Então simplesmente use um retângulo mais uma vez, posicionado aqui. Neste fim, esta medida, está no centro, percebendo para ele deste lado. Então, estes dois no centro. E agora tudo parece muito mais coeso. Mas eu vou fazer a seguir é simplesmente criar meus efeitos de pairar. Então, para fazer isso, eu simplesmente vou usar basicamente o mesmo efeito para o botão. Então, se você se lembrar, isso muda para verde, e nós vamos fazer o mesmo. Então aperte a tecla Control nisso, no controle de drogas k, vamos adicionar um pairar. Nosso próximo clique aqui. Acrescente horror. Clique aqui em um horror. Então, em vez de dentro do nosso estado de colheita, e devo dizer. Então, como você pode ver, sempre que eu seleciono um, estamos a pairar. Então eu vou selecionar meu círculo e ter certeza que é verde. Vou selecionar meu círculo, ter certeza que é verde, ter certeza que é verde e dívidas basicamente. Posso voltar para esses estados originais. Então estado padrão, você dobra estado e estado padrão rebanho leiteiro. E agora, quando eu apertei a pré-visualização aqui, podemos ver como isso se parece. Então, basicamente, temos esses estados de terror agradáveis. Se não se atreveu a abreviar, você pode obviamente mudá-los. Receitas e despesas funcionam bem. Ainda não gosto deste design. Pensarei em algo, talvez, e depois voltarei. E finalmente temos este Grupo rolável. Finalmente, vamos trabalhar nesta seção e vamos terminar este vídeo porque já estamos em meia hora. Então vamos renomear isso. Vamos ver, talvez possamos chamá-lo de equilíbrio ou equilíbrio de conteúdo ou algo assim. Vamos chamar conteúdo avançado. E eu vou chamá-lo. Aqui. O que eu preciso é que eu vou mudar isso para conteúdo. E basicamente vamos usar esses dois textos. Vou apagar este, e vou apagar todo o resto assim. Então, basicamente, vamos alinhar esses dois. E vamos ver talvez antes do texto que podemos realmente usar, sei lá, 48 talvez. Então vamos começar com isso. Isto vai ser renda. E vamos deixá-la acinzentada assim e decidir que isso vai ser despesas. Conteúdo de títulos. Vamos ver onde estamos. Então talvez devêssemos não saber, em dezembro, novembro, onde estávamos, vamos ver. Então é ele que não temos nenhum encontro agora, mas porque aqui temos hoje e isto é em dezembro. Assim, podemos ter conteúdo equilibrado, Dezembro, por exemplo. Ou talvez seja óbvio porque estamos nesse mês. Vamos ver aqui. Então, 22 de dezembro. Então Wendy pousou aqui e eles vão para esta página, eles ainda vão ser capazes de lembrar que eles estão em dezembro. Obviamente, eles saberão em que mês é. Então este é o conteúdo dos limites para a Caça atual. Então vamos em frente e mudar este texto. Então eu vou escolher 48 negrito. E quando fazer o mesmo por este. Então 48 ousados. E vamos manter isto como está. anelídeos simplesmente mudam essa renda para, vejamos, quatro para 7504018. A dívida funciona bem. E vamos ver, talvez eu possa posicioná-lo para B2 e assim por diante para eu posso fazer isso para ser 20 até assim, e eu vou mudar suas cores. Então esta renda estrangeira nisto para as despesas, que funciona bem. E vamos ver, a separação entre esses dois pode ser talvez em 40, porque 40 é para tudo o resto assim. E vamos ver, talvez possamos movê-lo um pouco. E tudo o que precisamos é de dois ícones aqui para indicar a renda e a despesa. Então eu vou selecionar e dose base dois ícones. Então eu vou pular aqui e ter certeza que eles são locais, assim. E vamos ver, a renda está no topo e as despesas estão em baixo. Então isso vai ser renda. Isto vai ser despesas. Obviamente, tente renomear suas camadas o máximo possível apenas para se manter organizado. Porque você pode ver nesta fase que já temos muitas camadas, muitas opções aqui e ali. Então é por isso que precisamos de dívidas. Vou certificar-me de que este ícone está centrado no nosso conteúdo. Então eu posso fazer isso simplesmente segurando a tecla Shift. Ou melhor ainda, eu posso agrupar meu texto, em seguida, selecionar este clique aqui e, em seguida, desagrupar meus textos porque eu realmente precisava estar em um grupo. Então, por enquanto, vou fazer o mesmo com as despesas e deixar cair aqui. Desagrupe. E o que podemos realmente fazer é talvez posicioná-los com nossos textos assim. 123456, por exemplo, pode ser que vai funcionar bem. E depois alinhe-se. Toda essa largura de conteúdo é tributada na parte superior. Então, lá estamos nós. Deixe-me ver isso mais uma vez para ver onde estamos. Então, mais uma vez, temos receitas e despesas, mais uma vez, já são como isso funciona. Então vou tentar descobrir outra coisa e tentar mudá-la. Transferimos seixos e estados de terror de conversão. Temos grupos roláveis aqui, e temos esse conteúdo de títulos. Então aqui temos na próxima página é alongs. Então, vemo-nos lá. 49. Criando design 11: Vamos agora continuar com a nossa próxima página atinge a música longa, indo para clicar hit control D para lubrificar este, nossa placa. Em vez de transações, vamos dar um nome, pulmões. E basicamente para despacho, só queremos apresentar os empréstimos que o usuário já tomou. Então eles podem adicionar novos empréstimos a partir daqui. Então, por exemplo, eles podem clicar, precisam de um longo desonestos, não muito tempo ou algo assim. E eles podem entrar em contato com alguém do banco e, em seguida, eles podem chegar e oferecer um maldito novo junto usando a informação que eles já têm sobre este usuário. Então o que eu vou fazer é excluir isso e excluir todas essas seções na verdade. E vamos ver, eu posso apagar a mesa também. O que você precisa aqui é de uma imagem. Então vamos ver, talvez eles possam usar o que eu já tenho o suficiente. Vamos em frente e criar um. Então eu vou posicionar neste para ser, vamos ver 4335, vamos ver 725781. Então comprimento que eu também vou dar-lhe um cantos arredondados 20. E vamos ver, somos 3545, então precisamos descer dez. Então, assim, 4040. Então, isso é bom. E tudo o que preciso fazer agora é incluir a minha imagem. Então, para incluir sua imagem, você pode usar as mesmas imagens do seu design. Basta copiá-lo e colá-lo se você quiser. Mas na verdade vou trazer a imagem da minha pasta. Então deixe-me localizar rapidamente essa imagem porque eu já tenho um monte dessas imagens bem aqui. Então eu vou usar este rapidamente. Então, basicamente, é a mesma imagem que já usamos. Deixe-me remover a borda, clique duas vezes dentro, mantenha minha tecla shift pressionada para que eu possa escalá-la um pouco mais por exemplo até eu fazer isso. E vamos encerrar o dia. Em vez de transações, estamos obviamente indo para escrever um empréstimo. E o que você vai fazer é usar o Ikhwan aqui. Para que eu possa te levar de volta para aqui. Analíticos localizado portas, ícones, listas de serra, por exemplo, usar cache de disco único ícone. E vou certificar-me de que está no centro destes. Então temos seis aqui, imagem 614. Então, selecione isso e certifique-se de que está no centro. E é basicamente isso. Então o que eu vou fazer a seguir é escrever um monte de mensagens e para baixo. Então vamos ver. Vamos usar alguns blocos de texto destes anteriores. Vamos para aqui. Selecione estes dois. Você pode, obviamente, começar o novo bloco de texto, mas isso é muito mais rápido para mim. Então eu vou me certificar de que ambos estão centrados, centrados assim. Então o que eu vou fazer é clicar duas vezes e digitar rápido. Dinheiro sozinho. Como isso. E vamos ver, talvez eu possa torná-lo um pouco maior. Vamos ver isto. Acho que funciona bem. E vamos ver, eu também posso posicioná-lo assim. Agora nós temos isso e apenas certifique-se de que isso está centrado. - É. Vamos apagá-lo e vamos ver, talvez possamos posicioná-lo. Vamos ver 40 daqui. Então 1234 para baixo. E vamos ver, talvez eu possa, por exemplo, fazer este 24. Vamos voltar para aqui. E isso é bom. 24 irregulares. E veja, talvez possamos escrever algo como a longo prazo em 23 de maio de 2020. Redes. Bem, certifique-se de que está centrado no texto de parada deles como este. E vamos ver, talvez eu possa posicioná-lo para 40 também. Então 1234, assim. Isso é bom. Ele controlaria D e talvez eu possa fazer com que isto seja 40 também. Vamos ver. Primeiro pagamento, 2352020. Então você fez o primeiro pagamento quando você levou o tempo, obviamente. E então o último pagamento será em 23.52021. Então, digamos que este é apenas um daqueles empréstimos menores. Então é por isso que é chamado de empréstimo rápido em dinheiro. Só para tomar este empréstimo, por exemplo, vai levar um mês ou algum empate que para devolvê-los, ou, neste caso, um ano. Então é posicioná-lo para o centro, 404040. Isso é bom. Vou duplicar isso mais uma vez. Nós temos certeza. Está em 40. E eu vou escrever e baixar seus extratos de pagamento. Então isso obviamente vai estar dentro de um PDF. E porque é um link que vamos usar essa cor. E este feixe em declaração é basicamente para mostrar a eles, por exemplo, em que data eles pagaram qual quantia. Então, digamos que este mês você pagou $100, no próximo mês você pagou $200 e assim por diante. Só quero manter o controle de todos esses pagamentos e ver se você está no caminho certo e se você pode confiar nisso. Finalmente, vou acertar o controle D neste, desta vez. Posicionamento para baixo e bem aqui e chamá-lo de um novo sozinho. Certifica-te de que está alinhado à esquerda e alinha-o aqui. Porque aqui vou incluir um botão. Vamos usar um botão. Então este, por exemplo, você pode controlar, ver qual posição ele aqui, controlar V. E neste botão vamos escrever, fazer o pagamento. Porque mais uma vez, se por alguma razão você quiser terminar isso rápido. Então vamos ver se você tem algum dinheiro, você tem a promoção, você tem algum empréstimo de outra pessoa, eu não sei, qualquer coisa, então você pode rapidamente terminar este pagamento pagando o resto da sua quantia agora. Então é por isso que temos este botão aqui. Ou, por exemplo, se você quiser fazer pagamentos manuais, você pode fazer isso também. Então você pode clicar bem ali. Agora temos estado padrão, estado Horace. Isso é bom. Vamos posicionar isto para estar no centro. Este é o 80. E a última coisa que eu vou fazer é simplesmente selecionar todos esses itens e ter certeza que eles estão no centro assim. Obviamente, nós vamos mudar em empréstimos de desktop e laticínios tê-lo. Terminamos esta tela. Vamos clicar aqui. Quando você passa o mouse One, One, One more time para que eles possam baixar seus extratos de pagamentos em PDF. Eles podem clicar para pedir um novo longo, que vai conectá-los com as coisas do banco. E eles podem finalmente horrorizar aqui mesmo para fazer um pagamento. E vai levá-los para a seção de pagamento externo. E a dívida com o Banco tem. Então é basicamente isso para este. Vejo-te no próximo, quando começarmos com as cartas e vamos fazer um pouco mais de trabalho lá. Então, vemo-nos lá. 50. Criando design 12: Vamos agora seguir em frente e continuar o design aposentado. E a próxima página, que vamos criar um cartões SD. Então eu vou fazer isso mais uma vez. Então, controle D. Em vez de empréstimos, vamos escrever em cartões bem aqui. Vou selecionar minhas cartas, estados. Em vez de seus empréstimos, vamos obviamente escrever seus cartões. E eu vou manter esta mensagem por enquanto. Vou apagar esta imagem. E o que você vai retratar aqui são as cartas. Então estes são os cartões que o usuário já tem. Então, talvez eles têm um cartão de débito Visa pode estar em um cartão de crédito MasterCard. Vamos mostrar os fundos disponíveis e mostraremos a opção de depositar fundos neste carrinho. Então, digamos que eles têm sua conta corrente ou conta de crédito ou qualquer outra coisa, e não está conectado diretamente com o cartão. Assim, eles podem, por exemplo, depositar mais fontes no cartão de uma dessas contas. Ou eles podem, por exemplo, optar por depositar fundos do outro cartão. Então vamos dizer que eles têm o cartão de crédito, eles têm que cartão de débito. Talvez queiram depositar fundos de um acorde para outro. Então vamos fazer isso. Vou deixar tudo isso, vou deletar isso. Dinheiro tão rápido. E enquanto estamos nisso, vamos organizar rapidamente essas coisas porque eu esqueci de organizá-las antes. Então eu vou passar para cima agora, bem aqui, eu vou mover a barra lateral aqui. Em seguida, eu vou pegar seus pulmões texto posicioná-lo bem aqui. E eu vou realmente fazer isso para todas essas telas. Então vamos a partir daqui. Este é organizado. Vamos para aqui. E este também está organizado. Porque como ele disse várias vezes ao longo do discurso, eu realmente encorajo você a organizar suas camadas aqui. E este também está organizado. Então é só este. Eu realmente encorajo você a organizar suas camadas. E só porque você não vai guardar isso para mais tarde, você vai compartilhá-lo como fogo com seus clientes e desenvolvedores. Então é muito importante também, organizou todos esses arquivos em breve, salas em que vamos chamá-lo assim. E vamos organizar essas coisas. Então eu vou organizar antipatia. Este botão vai descer todo o caminho. Tanto tempo. Tomando ângulos aqui, rápido, dinheiro junto vai aqui. Vou posicionar isto aqui, e preciso de um novo tempo que possa descer. Finalmente, vamos fazer isso aqui. Então nós temos o nosso top agora, bem aqui, barra lateral, bem aqui, suas cartas bem aqui. E agora, quando começamos a desenvolver isso em projetar mais, vamos posicionar mais elementos lá. Então vamos, por exemplo, começar com o cartão esquerdo. Então vai ser bem aqui. E podemos, por exemplo, qualidade, vamos ver. Por exemplo, cartão de débito Visa. E vamos certificar-nos de que está alinhado à esquerda. Vou posicioná-lo todo o caminho bem aqui. E vamos primeiro arrastar nosso cartão aqui só para que possamos ter algo com que trabalhar. Podemos usar este para aumentar a escala. Mas eu vou seguir em frente apenas segurando minha barra de espaço obviamente para mais ao redor das telas. E nós vamos pegar este cartão, então o cartão pairar, Control-C. Mas eu vou saltar para dentro e realmente usado jardim de crédito. Não preciso de pairar todo. Então controle C no cartão em si. Vamos voltar para aqui. Clique em desfazer o controle V para posicioná-lo em. Vou me certificar que são 40. Então 246, isso é demais. Vou me posicionar, por exemplo, às cinco. Então, 12345. Vamos ver isso mais uma vez ainda. Só porque eu quero ter esta coluna vazia e eu quero dar-lhe algum espaçamento lá. Então, mais uma vez, 12345. Por isso, vai acabar aqui neste caso. Então, eu só vou mover isso aqui. E em tamanho, vejamos, talvez possamos ter em 391 ou algo assim. Assim como saltando lado 391 e altura, sim, isso parece bem. Então vamos ver retângulos. Podemos movê-los assim, ou podemos selecionar esses dois. Clique aqui. Veja retângulos ali. Vou mover isto para baixo assim. E eu realmente vou pular e vamos ver o carro BG. Vamos ver e retângulos indo para posicionar meus retângulos e manualmente. E o que eu também posso fazer é, na verdade, vamos ver, você é um sem-teto chave Shift para reduzi-los assim, por exemplo. E então simplesmente os moveu para fora do caminho em algum lugar por aqui. Em seguida, vou posicionar myText por um pouco. Assim, certifica-te que está aqui em baixo. Claro que são 20. Vou selecionar meu logotipo e meu logotipo do carrinho lisa. Então 1234, eu acho que parece bom. Vou posicionar isto para o meio e vamos ver, é às 48 agora. Vamos dar-lhe 36. Assim, certifique-se de que é branco. E vamos ver, isto era branco? Não, é esta cor cinza claro. Então podemos fazer isso aqui também. E vamos usar um retângulo. Então, posicione em Deir no topo do texto. Selecione estes dois posicionados no meio e, em seguida, remova o meu retângulo. Agora eu só quero ter certeza de que tudo isso está alinhado. É, isso está alinhado? São hábitos anteriores. E agora temos a nossa corrente concluída. Você pode fazer porque quando eu clicar aqui você pode ver que ele volta para este estado. Então você pode aplicar uma quitação a todos os estados, mas eu não vou fazer isso. Então eu vou simplesmente posicioná-lo aqui e eu vou fazer uma cópia. Então, Controle D. E eu vou posicionar este aqui. Então agora você pode ver que nós temos isso e nós vamos ter um vazio deste lado. Então eu realmente não gosto disso. Vamos ver o prescrito dizer que pode até aumentar para seis. Vamos ver como isso vai parecer. Não é diferente de como isso parece. Então vamos deixá-lo lá e nós vamos ter esta coluna todo o caminho para a direita para estar vazio, apenas ordenado, perdoar, ter algum espaço. Então eu vou posicionar isso aqui. Então você pode ver que temos esta coluna vazia, para que possamos ter mais espaço aqui, e nós vamos ter esta coluna vazia também. O que vou fazer aqui é saltar para o lado. Esconderei a minha pesquisa, mostrarei a minha guarda muscular. E vamos ver, eu vou posicioná-lo para estar no centro do meu logotipo, para estar bem aqui. Então eu vou posicioná-lo, ousar. E também queremos ter certeza de que está bem aqui. Então vamos ver, isto é 37, isto é 40. Então vamos mover este original. Então vamos ver, é 37, então 123, e estamos agora em 40. E se saltarmos para este aqui, você pode ver que ainda estamos em 37, então 123. E eu vou mudar isso para 40 também. Então 1234. E vou ver onde está a minha pesquisa. Está em 40 e isso é em 40. Então, tudo o resto está bem. Vamos ver este texto. Sim, tudo o resto está bem. Então o que eu vou fazer, eu vou deixar este como está, e eu vou mudar rapidamente a cor de fundo deste aqui. Então vamos rapidamente em frente, saltar para dentro daqui. Então, ambos são os MasterCard. Então eu vou saltar para dentro daqui e eu estou usando controle e clique. Então eu posso clicar diretamente sobre este aqui. Então, vou clicar com o botão direito do mouse em copiar. Vou fechar isto e voltar à nossa corrente. Mais uma vez mantenha o controle para que eu possa clicar diretamente na camada BG carro, botão direito e Colar aparência soja, eles podem obter o mesmo efeito de gradiente que eu tenho em que um. Vou posicioná-lo bem aqui. E agora vamos começar a editar nossas informações. Então, para este primeiro, vamos ver onde ele vai mover meu botão médio para baixo, cartão de crédito Visa e quando posicionar para baixo. E vamos ver mais uma vez. Então estamos em 40 aqui, o que é bom. Sua posição faz, então está alinhado com nosso cartão assim. Então vamos ver, talvez possamos nos posicionar para 40 também. Então 1234, o que precisamos a seguir é de fundos disponíveis. Então vamos ver. Podemos digitar algo como encontrar, por exemplo, para três a quatro, digamos. E também vamos posicionar isso para ser alinhado à esquerda e posicioná-lo até aqui. Então vamos ver, talvez possamos dar o mesmo espaçamento de 40. Vou então usar este texto. Certifique-se mais uma vez que está alinhado à esquerda, posicione-o aqui. Tenho certeza que estamos em 40. E vamos isso algo como depósito de fundos para descartar. Então, mais uma vez, os usuários podem simplesmente clicar lá e ele os levará para a opção padrão de fundos de depósito. Então eles podem de lá em diante ir e depositar fundos nessa conta. Então vamos organizar rapidamente estes. Então você tem cartão de crédito, nós temos uma pesquisa. Vamos tirar esta carta do caminho, por enquanto. Fundos disponíveis, ir para aqui e depositar fundos. Isso é bom. O que precisamos a seguir é o botão, talvez aqui. E talvez possamos posicionar este texto aqui, certificar-se de que está alinhado à esquerda. E diga algo como se eu precisasse de um carro novo. Então, eu estou com meu pai só para que possamos ter um espaçamento de dívidas lá. Então vamos ver 24. E isso é final alinhado à esquerda. E acho que funciona bem. O que eu quero é, por exemplo, fazer um pagamento para que você possa fazer um pagamento com este cartão também. Vamos ver, podemos posicioná-lo aqui estamos em 61, tudo bem. Assim, por exemplo, podemos fazer um pagamento para nossas contas de eletricidade, para nossas contas de pagamento de carro, contas de comida e assim por diante. Então, tudo o mais que falamos antes em que projetamos antes, agora mesmo, você está na seção de carrinho de seu painel e você pode, obviamente, fazer qualquer um desses pagamentos diretamente aqui. Então, quando você, por exemplo, mouse e clicar neste botão Fazer pagamento, ele irá levá-lo para a tela externa onde você pode inserir as informações. Assim, por exemplo, uma contagem fora do titular do cartão ou do titular da conta. Então, por exemplo, a empresa de conta de eletricidade ou empresa de pagamento de carro ou qualquer outra coisa. E então você pode usar essa informação para fazer um pagamento usando este cartão concreto. Então, ou cartão Risa ou este MasterCard, vemos este texto aqui. Vou removê-lo. Então vamos organizar isso um pouco melhor. Então eu vou ligar para este cartão de crédito ou uma corrente de visto. Então eu vou simplesmente usar todas as mesmas informações Controle D, movê-lo para fora. E eu vou simplesmente deslocado todo o caminho para baixo. Use pode mudar e tecla de seta para a direita apenas para que eu possa empurrar de minhas informações dessa forma. E é por isso que temos essa coluna vazia, porque você pode ver que temos muito mais espaço lá. Você pode obviamente mudar estes dois para que o botão possa ir para a direita e os textos podem ir para a esquerda. Se isso é algo que você quer. Você também pode agrupá-los gene controle e certificar-se de que eles são pilha. E você pode simplesmente fazê-lo nisso para que você possa clicar duas vezes e reorganizá-los dessa maneira. Assim, você pode ver como seu layout pode ser parecido. Então eu vou desagrupá-los porque eu não quero que eles estejam em uma pilha, mas você pode manter tudo isso em uma pilha. Sue pode organizar dat, dat maneira. O que vou fazer agora é usar isto. Então MasterCard, corrente de crédito, como dívida, fundos disponíveis Átila escolher alguns valores menores ou, por exemplo, 2417 ou o que, e depositar fundos para descartar, ele pode ficar onde está. Vamos ver rapidamente se tudo isso está bem organizado. É, está alinhado com a nossa rede, então está tudo bem. E é basicamente isso. O que eu queria fazer é ter certeza de que eu tenho todos eles agrupados. Então vou chamá-los de cartão de crédito MasterCard. E vamos saltar para dentro e fazer a pré-visualização. E você pode ver que tudo funciona muito bem, e ambos funcionam como deveriam. Descartar está selecionado. Então é basicamente isso. No próximo vídeo, vou mostrar-lhe Investimentos e vou mostrar-lhe tela vazia porque você precisa de telas vazias para tudo isso. E podemos, por exemplo, mostrar que em investimentos apenas para mostrar como tudo ficará sem qualquer informação. Então, por exemplo, o usuário está indo apenas para ir para esses investimentos sem nunca fazer nenhum investimento. Por isso, temos de lhes mostrar o que podem fazer para fazerem o investimento. Então, vemo-nos lá. 51. Criando design 13: Vamos agora ir em frente e fazer a página de investimentos. Então, mais uma vez Control D. Mais uma vez clique aqui, e vamos ver, eu posso clicar na minha barra lateral, selecionar meus investimentos apenas para mostrar que isso selecionado. E deixe-me voltar rapidamente e ver se eu organizei todos estes têm. E finalmente, o que queremos aqui é que vou remover isto. Vou desagrupar isto. Então, mais uma vez, eu posso pegar o texto que eu preciso. Posso apagar isto. Posso apagar este texto e vamos ver, talvez eu possa apagar tudo isso. Posso deixar esta mensagem. Então aqui, como eu disse no vídeo anterior, queremos mostrar o estado vazio. E o estado vazio basicamente é a tela que os usuários vão chegar se eles não selecionaram nenhum serviço ou se eles não compraram nenhum produto ou o que quer que seja. Então você só quer mostrar esse estado vazio e mostrar o que é possível. Então você teria que explicar para eles o que eles podem fazer de lá e para onde eles podem ir a partir daí. Então imagine que você não aceitou nenhum investimento, mas você está interessado em fazer um investimento. Então você pode voltar para aqui, vamos ver onde eles estão. Então aqui estão esses investimentos. Então investimentos em educação, em imóveis, segurança familiar, aposentadoria, e assim por diante. E você pode ver e lembrar esperançosamente desses vídeos que todos estes têm esses dois serviços conectados e eles também têm este serviço bem aqui. Então, temos muitos desses serviços para mostrar a eles, para que possamos organizá-los assim em nossa página do painel. Mas antes de tudo, temos que mostrar um estado vazio. Então eu não vou projetar tudo isso. Você pode imaginar que você pode usá-los como eles estão aqui. Mas também vou mostrar a vocês quatro nossa última tela para o digital. Uma possível solução de layout para isso e possível variação disso. Para que você possa tirar a inspiração disso e seguir em frente e projetar esta página se você quiser. E eu realmente encorajo vocês a explorar todos esses layouts e criar o seu próprio, porque essa é a melhor maneira que você pode aprender e você pode explorar e melhorar como um designer de UX da interface do usuário, não há nenhum ponto de veja apenas assistindo a esses vídeos e copie cada passo. Eu faço. Não incorpore algo próprio. Não importa se comete um erro. É por isso que você está aprendendo com esses cursos. É muito importante que você tente, que você tentou aperfeiçoar seu ofício. E você explorou todos esses layouts por conta própria? Então não vá em frente e copie, tentei fazer a coisa sua. Então, sem mais conversa, vamos mudar isso. Então, seus investimentos como este, eu vou ter certeza que está alinhado no centro e posicionar mais ou menos por aqui. E então eu vou usar este texto e, por exemplo, escrever um pouco de café rápido, na verdade, do documento original. Vou selecioná-lo. Missionários aqui, posicionados aqui. Assim podemos ver, por exemplo, 40. Então 1234, assim. E você pode ver que você não tem nenhum investimento no momento. Contacte-nos se quiser iniciar a sua bagagem de investimento hoje mesmo. Então, mais uma vez, se voltarmos para aqui para esses investimentos, você pode ver que todos esses são pacotes. Então, sob a educação que é selecionado neste caso. Temos estes dois pacotes. Então, por exemplo, você pode dar a eles a opção como fizemos aqui mesmo para selecionar certas categorias. Ou educação, imóveis, segurança familiar, ou aposentadoria. E nessa categoria, eles podem selecionar uma dessas duas opções. Se você acha que há muita informação, você pode criar um grupo rolável como fizemos para este aqui. Então, se eu te levar de volta mais uma vez e te mostrar isso. Então este é o loop rolável e eles têm a opção de rolar todo o caminho para baixo. Então você não tem que colocá-los no fundo branco como fizemos com esse exemplo. Você pode criar esta seção inteira, então este quadrado como um grupo rolável. Então você pode dar-lhes uma enorme quantidade de opções. Por exemplo, se você optar por posicionar este seu texto de investimento aqui, como fizemos para seus cartões, você pode então imaginar que tudo isso pode rolar para baixo. Então essa é outra maneira que você pode mostrar grande quantidade de informação apenas permitindo que isso rolar para baixo. Em seguida, eu vou simplesmente mudar esta posição de baixo para cima bem aqui. E vamos ver, talvez possamos dar algo como 60, só para que possamos dar-lhes um pouco mais de espaço. E o que vou digitar é entrar em contato conosco porque queremos dar a eles a opção de entrar em contato com o banco. Porque talvez eles queiram escolher um desses pacotes de investimento. Então eles podem entrar em contato com o banco e o banco pode então explicar a eles que as malas de investimento são tudo isso. Podem explicar-lhes tudo isto. Ou eles podem, por exemplo, entrar em contato com o banco, digamos, por exemplo , como, hey, eu possuo meu próprio imóvel. Eu queria fazer um desses pacotes imobiliários e quero investir em imóveis. Como posso fazer isso? E então eles podem simplesmente concordar com eles e assinar contratos e tudo o que vem da dívida. Finalmente, eu quero incluir um ícone aqui e eu vou copiar e basear o meu documento original. Vou clicar com o botão direito e tornar-me local. E este ícone é de elementos invertíveis, um de cada vez. Então, apenas sem qualquer cor nele. Porque eu gosto da complexidade adicional que isso aumenta ao meu desejo. Então 123456. Então estamos em 60 a partir deste texto. O que vou fazer a seguir é simplesmente organizar tudo isso. Então eu vou agrupá-los, controlar g. E eu vou basicamente criar um retângulo que vai todo o caminho até aqui. Então, estou cobrindo essa área. Vou selecionar meu retângulo, selecionar meu grupo, clicar aqui e, em seguida, bem aqui para posicioná-lo no centro desse espaço. E agora você pode ver como isso se parece. Vou desagrupá-lo. Bem, você pode mantê-lo em um grupo se você quiser. E finalmente, nossos investimentos em escrita bem aqui. Este l, É HD premium. Mais uma vez aterrissaram aqui na página de desinvestimento. Eles podem ler este texto Hubbard e clicar em contactar-nos para que eles possam ir lá. Não os leva a lado nenhum, só os leva de volta a esta página. Mas você pode imaginar como esse fluxo funcionaria e como isso vai parecer. Então é isso para este vídeo. No próximo vídeo, vamos trabalhar no digital. Vou mostrar alguns layouts possíveis para esta página também. Você pode então ir a partir daí se você quiser projetar essa página para si mesmo. E depois do digital, vamos finalmente seguir em frente e conectar todos esses itens e navegação na barra lateral. Então tudo funciona como deveria. Vamos passar por isso mais uma vez. E depois que terminarmos com isso, vamos finalmente passar para o design responsivo. Vou explicar para vocês o que é um design responsivo, o que vocês precisam olhar para fora e todo o resto da informação. Vemo-nos no próximo vídeo. Onde vamos enfrentar o digital? 52. Criando design 14: Finalmente, vamos começar com os serviços digitais. Então vamos duplicar esse controle D. E é chamado de digital. Que eu também vou selecionar minha barra lateral, selecionar digital principal. E eu vou apagar tudo isso. O Idat. Em seguida, eu vou escolher, a partir daqui, por exemplo. Então vamos escolher este e este Control-C. E só precisa em dívida para colá-lo aqui, porque já está na posição correta. Vejamos, 4040. Isso é bom. E eu vou pular e mover tudo isso para baixo. Em seguida, vou escrever em serviços digitais aqui. E eu vou abrir este aqui e vou apagar toda essa informação. Na verdade, eu posso até desagrupá-lo e eu posso chamar isso, por exemplo, de região bancária E. Porque eu vou listar meus serviços digitais aqui. Em seguida, vamos fazer algumas alterações nos tamanhos. Então, sete a cinco com 371. E agora você pode ver que estamos em seis, então 246, ainda estamos em 40. E vai duplicar a posição em estão bem aqui. Então estamos às seis aqui. Então 246, eu vou chamar este próximo M bancário Vg. Então eu vou duplicar este aqui, posicioná-lo todo o caminho até aqui. Você pode ver que estamos em 39. Então, se eu mover este para cima, e então nós gostaríamos de ter 40. Então, às vezes você tem que lidar com esses pixels porque estamos a 40 a partir do fundo e estamos a 39 a partir daqui. Então eu vou mover isso para baixo e eu vou chamá-lo de QR, código, dores e MEG. E finalmente vou acertar o controle D neste, posicioná-lo todo o caminho para baixo. E eu vou chamá-lo de assistente virtual em Bejing, assim. E então o que eu vou fazer é pular dentro de todas essas seções para que eu possa até fazer algo assim. Então eu posso segurar a tecla Shift Control C e pode mover todo o caminho para aqui controle V, que eles possam colá-los abaixo. E o que posso fazer é simplesmente usá-los a meu favor. Então vamos em frente e desagrupe este primeiro. Vou usar minha imagem, então controle x, vou clicar aqui, controle V para colá-lo aqui. E o que vou fazer com a minha imagem são notícias de outras dimensões. Então para recriar com 371. Então eu vou posicioná-lo para ser três colunas de largura basicamente. Então o que eu vou fazer é fazer algumas mudanças no raio do canto. Então vamos ter Sam e Tank. Então, superior esquerdo e inferior esquerdo vão estar em torno dele como você pode ver. E estes dois vão ser héteros. Vou clicar duas vezes aqui e posso ampliar minha imagem um pouco. Algo como isto. Certifica-te de que estes tipos estão em foco. Talvez um pouco mais como este. Agora que estou feliz com ele, eu posso simplesmente chamá-lo de E banking, IMG, dizer imagem bancária. E vamos em frente e fazer tudo isso. Então, eu vou acertar os atos de controle neste e eu posso desagrupá-lo. Então vamos ver, estamos no M banking, então controle v. Vamos dar a mesma demência. Então, 338371. Vou posicioná-lo aqui à esquerda. Certifique-se de que estamos às dez e estamos. Estou usando Tab para alternar entre estes. Então você pode ver que este e este canto são arredondados. Esta imagem é boa porque é centrada e eu gosto de como ele se parece com sal, nós não vamos fazer nada para ele. Eu posso então mais ganhou este texto aqui para que possamos ter um pouco mais de espaço. Posso clicar com o botão direito do mouse neste, desagrupá-lo para que eu possa usar minha imagem. Então controle X, controle V e C mais uma vez. Então, 338 com 371, posicione-o aqui em baixo. Veja, para a esquerda. E vamos ver, nós vamos chamar isso, posição SO para o banco como este. Então vamos chamá-lo de IMG Ben King. Eles vão posicionar esta imagem para baixo. Então pagamentos de código QR, IMG, assim. Certifique-se de que estamos alinhados à esquerda, estamos centrados. Vamos ver, algo não está certo aqui, então assim. Então 3940 para baixo. Então, isso é bom. E nós vamos arredondar as esquinas aqui também. Então para virar e areia aqui, tudo bem. Ela está no centro, então isso é bom. E finalmente, vamos usar este. Então eu vou posicionar este texto aqui. Vou agrupar este desagrupar o Control X para cortar a sua posição faz aqui mesmo. Clique em Controlar e reposicione-o todo o caminho para baixo. Então IMG. E vamos dar-lhe alguma coisa. 338371. Vamos usar mais um pneu ou areia. Areia. E, finalmente, mover esta imagem para aqui e posicioná-la para aqui. Então, agora que isso é completado em uma canoa e clique duplo pode mover este cara um pouco para a esquerda, assim. Agora que isso está concluído, Eu quero basicamente um seleto esses serviços e mudou-os para seus lugares originais. Ou apenas quer tornar o texto menor. E vou mudar o que diz aqui nestes botões. Então, para cada um deles, algo diferente dirá nos botões. Assim, os usuários podem então ou ler sobre o serviço aqui diretamente dentro do painel. Eles não têm que voltar para a página web e ler informações ousam. E eles podem selecionar diretamente para ativar seu serviço, por exemplo, lá. Então nosso primeiro é E, bancando sólidos usando aquele. E vamos ver, eu não vou realmente usar esses botões, todos os seus desagrupar, estes. E posso apagar este porque já tenho todos estes botões. Então eu posso posicionar aqui, porque se você se lembra, nós temos um pouco de uma grade diferente bem aqui. Agora o que eu vou fazer é clicar neste aqui e vamos ver, talvez eu possa usar algo menor como 24. Posso fazer isso aos 16, e posso baixar o tamanho do meu texto para algo assim. Vamos ver, talvez possamos estar no solenóide C e podemos estar em 20 aqui também. Isto cabe no nosso Watson? Faz, e estamos no 17 para baixo. Então isso é realmente cortar esta simplicidade de uso. Vamos cortá-lo. Atreva-se. Vamos ver onde estamos em 30 florestas. Então vamos dar algum espaçamento de dois quando c, assim, vamos ver. Com uma conexão de internet listas realmente cortá-la lá. E vamos clicar aqui para cortar nossas mensagens. E vamos dar isto a 14, porque não precisamos de muitos destes. Então vamos ver. Vamos ter o texto em três linhas. Talvez eu possa até dar um pouco mais de espaço para que ele possa ler um pouco melhor. E eu gosto de como isso parece. Agora o que eu vou fazer é realmente clicar duas vezes no botão. E vamos fazer isso tão ativamente para que eles possam ser ativados diretamente. Eu posso ir para o meu estado de horror, volta a ele agora. E o que eu vou fazer é realmente ter certeza de que isso tem duas colunas de largura agora. Então, assim. E o que nós também podemos fazer porque este é 24. Agora podemos fazer alterações adicionais e certificar-nos de que este é, por exemplo, 18 irregular e branco. Podemos ter certeza de que está no centro de nossos botões ou ativar. Agora, assim, você pode fazer um novo componente com isso e chamá-lo, por exemplo, ele vê botão de serviços digitais ou o que quiser. Mas eu ainda vou deixá-lo lá. Então, mais uma vez, estamos em 182 colunas de largura e para usar o estado flutuante como este, ativado agora, estamos em 1800 brancos. Certifique-se de que estamos no centro. Nós somos assim, aqui, assim. E isso é bom. Quando eu fechá-lo e movê-lo para aqui, você pode ver como isso se parece. Então você ainda pode deixar para três se você quiser, mas eu não vou fazer isso. Vamos alinhá-lo à nossa grelha. Ainda temos um pouco mais de espaço aqui. Então vamos usá-la. E acho que ficará bem se saltarmos para uma prévia rápida. Você pode ver que o botão ainda funciona. Você pode torná-lo mais estreito para o topo na água. Mas como eu disse, eu não vou me incomodar, eu vou deixar como está, apenas um pouco mais estreito. Você pode obviamente exportado isso para mais tarde para desenvolvedores, mas vamos falar sobre isso mais tarde. Por enquanto, vamos agrupar tudo isso rapidamente. Então eu vou selecionar meu texto e meus botões, movê-los abaixo da minha imagem. Reorganizou-os grupo IDAT todos estes e chamam-lhe Eden banking. E agora vamos passar para o próximo. Então agora temos m bancário. Então eu estou indo para realmente excluir botão. Vou mover as minhas mensagens. Vou desagrupá-lo. Posicione-se logo abaixo da nossa imagem bancária. Alinhe-o à grelha. E se verificarmos que temos 24, somos 16 em três linhas. Então vamos fazer isso aqui também. Então vamos ver. Isto vai ser 24 e parafuso, e este vai ser 16 e em três linhas. Mas vamos cortar para algo assim. Que espaço temos aqui? Então, temos oito. Vamos posicionar isso aí. Então vamos ver dez. E então vamos ver como podemos fazer isso? Então talvez possamos usar um retângulo ou um guia. Então vamos usar um guia na verdade. Então 1012, para que possamos voltar e eu possa desfazer o zoom do mouse aqui, escolher minha posição de guia, é lá assim. E então eu posso mover minhas mensagens e estender até aqui. E agora posso acabar com isso, por exemplo, gerenciar suas finanças e muito mais. Não, não funciona. Então vamos primeiro cortá-lo aqui. Um local Bella para novo pode acessar sua conta. Você tem acesso. Você pode ver gerenciar suas finanças e mais ou digamos que você pode sim, assim. Posso cortá-la de volta. E vamos ver o que temos aqui. Então estamos no 42 bem aqui. Está bem? Então vamos dar que 123412. Estamos em 40 aqui. Então vamos ver 40. E vou simplesmente copiar a posição do botão. Aqui. Estamos em 40 e simplesmente garante que estamos em um centro. Nós somos. Então, isso é bom. E vamos posicionar este botão aqui. E eu posso, por exemplo, digitar o download agora em vez de ativar agora. Porque eles podem clicar e baixar o aplicativo para iOS ou Android. Em vez de ativar agora, porque este é o M banking e eles precisam fazer isso. Então vamos agrupar tudo isso. Então ele controlaria G e quando chamaria de “M” bancando minha dívida. E agora o que podemos realmente fazer é, por exemplo, posicionar todos eles para baixo. Hmm, vamos ver. Sim, na verdade eu posso esconder esta imagem. Posso esconder esta imagem. Posso apagar estes dois. E então eu posso agrupar esses dois só para manter as coisas um pouco mais rápido. 123439 daqui. Então, isso é bom. Vou posicionar os dois para baixo. Então este vai ser o meu código QR, código, pagamentos. E podemos dar a este seu passado assim. VG. E eu só estou fazendo isso para melhorar minha velocidade um pouco. Isso vai ser virtual sistema I e Vg N sendo dado isso assim. E em vez disso, esses dois, vamos trocar de lugar. Então eu vou deletar isso, show. Isso funciona completamente bem. E eu vou fazer a mesma coisa para os meus copagamentos QR. Como pode ver, está perfeitamente alinhado. Tudo está no lugar onde deveria estar porque acabamos de substituir a posição destes. Então, finalmente, vamos mover tudo isso. Vou escrever-lhe pagamentos de código QR. E eu vou escrever em assistente virtual e Adobe XD, corrija-me. Vou apagar este botão e apagar este texto, apagar isto e isto. Então, para um QR, vamos clicar duas vezes em café e deseja excluir este texto e clicar duas vezes no lado e baseado. E vamos ver o que somos aqui. Você pode acessar o pagamento de código QR futuro. Basta abrir o aplicativo para ligar uma câmera. Vamos começar a partir daí. Então ele pode funcionar no geocodificador e ele vai transferir fundos. Para transferir fundos, vamos ver instantaneamente. Então, como podem ver, estamos mudando de cópia em tempo real. Ainda estamos onde precisamos estar com as dimensões. E podemos escrever, por exemplo, abrir aplicativo. Agora, podemos ir para o estado de horror. Porque como você pode ler aqui, basta abrir o aplicativo, virou a câmera no ponto em um código QR e o aplicativo vai transferir fundos instantaneamente. Então, ou você está fazendo pagamentos, você está transferindo fundos para outra pessoa usando esse código QR. Então é por isso que eu fiz isso, por isso eu copiei eles porque é muito mais rápido. Em seguida, vamos terminar com os sistemas virtuais na cópia do texto usando o controle. Veja, eu estou usando controle de veto colá-lo e vamos ver o que podemos usar deste texto. Então economize tempo e dinheiro. Sim, vamos fazer isso. Vamos pegá-lo. Vejamos, 4040, temos 42, então está tudo bem. E como podemos fazer isso? Talvez ativar agora ou iniciar o bate-papo. Comece a conversar agora. Então você pode começar a conversar com o assistente virtual, obviamente. E é basicamente isso. Agora concluímos nosso projeto. Vamos pré-visualizar. E como você pode ver, todos esses estados separados estão funcionando bem. Então, todos esses efeitos estão funcionando bem. Como ele disse várias vezes, você pode incluir o pairar separado para esses cartões, se você quiser. Eu não vou fazer isso porque nós já temos esse bom efeito de pairar e tudo parece bom já na minha opinião. Mas você pode explorar isso e transformá-lo em um componente para o efeito de pairar, obviamente. Então acho que vamos terminar aqui. E no próximo vídeo, eu vou mostrar a vocês como você pode conectar tudo isso e se conectar a esta navegação. E vamos explorar tudo isso um pouco mais. Vou dar-te um pouco mais das minhas opiniões. E finalmente, o que eu queria dizer para este vídeo é que você viu como nós incorporamos tudo isso para serviços digitais. Então, estes se formam. E se eu te levar de volta a este, então investimentos, você pode usar um layout semelhante a estes. Então imagine que, por exemplo, se eu te levar de volta àquela tela onde está, aqui está. Então foi novamente, educação, imóveis, segurança familiar e aposentadoria. Então, em vez de escrever algo como serviços digitais, você pode digitar, por exemplo, algo como educação. E você pode mostrar a dose aqui, assim, neste layout exato, se você quiser, você pode mudar o layout ou o que quer que seja. Em seguida, você pode copiar esse layout. Então imagine esses três elementos. Então o texto e esses dois, você pode baseá-lo abaixo. E você pode criar grupo rolável já. Se esse é o layout que você quer. Você também pode duplicar um layout. Então você pode, por exemplo, usar o mesmo layout, mas por exemplo, escrever educação aqui, usar as duas opções para a educação. E então você pode digitar em imóveis aqui e usar as duas opções para imóveis, e então você pode duplicar a dívida, soltá-la abaixo, e você pode criar tudo isso para ser grupo rolável para que os usuários possam rolar para baixo e ver entre todos esses. Viu o que era? Educação, segurança familiar e aposentadoria? Sim. E como todos eles têm duas dessas opções, você pode fazer isso. E finalmente, você tem essa opção aqui, então garanta seu futuro. Você pode criar isso como uma opção separada. Então essas são apenas algumas das minhas opiniões e como eu vou fazer isso. Vamos remover esse cara rapidamente porque não precisamos mais dele. E você pode fazer o que quiser com este layout. E mais uma vez, eu realmente encorajo você a testá-lo, experimentá-lo, e ver suas idéias ganharem vida. Você pode, obviamente, fazer essas mudanças como quiser em tempo real. Você pode aplicá-los como quiser. Você pode fazer o que quiser com este design. Enquanto eu disse, é para fins de aprendizagem, você não tem permissão. Eu não posso enfatizar isso o suficiente legalmente para usar qualquer um desses ativos para fins premium, solo para seus clientes ou qualquer torre de outra forma, apenas para fins de aprendizagem. Então eu encorajo vocês, se vocês escolherem usar esse mesmo layout, essa mesma estrutura, editando o mesmo. Por favor, substitua essas imagens por suas próprias imagens, e por favor substitua a cópia, escreva sua própria cópia. E dessa forma você pode evitar um possível processos judiciais de mim ou de outros recursos como e elementos Watteau e todos esses recursos premium que são usados deles de. Então eu realmente não posso enfatizar isso o suficiente. Praticar tanto quanto você quiser, mas quando você quer usar isso para fins comerciais, assim em para clientes ou mais tarde quatro, revender tentou incorporar sua própria cópia e seus próprios elementos. Viu ícones e imagens, como disse no próximo vídeo e vídeo final desta seção de design, vamos percorrer a navegação. Vou mostrar-te como podes ligar tudo. Então, vemo-nos lá. 53. Criando design 15: Finalmente, neste último vídeo da nossa seção de design, vamos rapidamente em frente e conectar todos esses itens de navegação. Então, como você viu, nós já temos nossos estados, então tudo está bem conectado. Então vamos começar com as próprias conexões. Então o que eu vou fazer é pular dentro do protótipo e eu vou clicar na minha conta porque ela está na pasta, é muito maior ponto de toque. E isso é muito importante quando você está fazendo todas essas coisas. Você quer ter certeza de que os usuários podem realmente tocar no que você deseja que eles para guia. Então é por isso que estamos colocando coisas dentro desses grupos. Então, quando seus usuários, quando seu cliente, seus desenvolvedores, quem explorar e interagir com este protótipo, você pode realmente compartilhar, compartilhar isso com eles e você pode mostrar-lhes como eles podem usá-lo. E eles serão muito mais simplesmente capazes de clicar nesses itens quando estiverem no grupo. Portanto, há um ponto de toque muito maior. Então, em vez disso, imagine que eles podem clicar aqui ou nesse minúsculo ícone. Então, vamos clicar em arrastar até este ponto. E eu simplesmente vou arrastar por causa de nós somos assim, então é muito mais fácil fazer isso e depois passar por todos eles. Então, para esta primeira transição, o que vamos fazer é usar auto animate. Podemos usar algo como snap porque eu quero este fundo, este seletor para ser capaz de encaixar na posição. E eu vou usar algo como 0,4. E vamos fazer o mesmo por este. Então eu posso realmente clicar e nós vamos para transações. Então transações Dashboard, é realmente mais fácil desta forma, porque eles estão localizados todo o caminho para baixo. E você pode vê-los todos aqui. Então isso vai ser empréstimos. E mais uma vez, você pode ver o que você selecionou aqui. Isto vai ser cartas. O meu pai. Isto vai ser investimentos. Ele investe. Acho que não escolhemos isso corretamente, não escolhi. Então cartas, sim. E digital. Digital. O digital e isso é bom para ser um logout. E logout. Ele vai nos levar aqui para a página inicial. Então, o design da página inicial é onde precisamos ir. Então clique aqui e localize a página inicial em design. Aqui está. E em vez deste, vamos usar algo um pouco diferente. Então vamos para o design da página inicial. Então, em vez de auto animar, vou usar a transição para o em vez de snap DZ e fora em 0.4. o que isso vai fazer é porque todos estes são auto animado porque o contido principalmente os mesmos elementos. Então, pelo menos esses cartões são os mesmos, este texto é o mesmo, botões são os mesmos, e assim por diante e assim por diante. Então tudo vai ficar bonito e coerente, mas com a página inicial, mais uma vez, é completamente diferente. Então você realmente não quer usar auto animate. Então, vamos voltar agora. E o que eu vou fazer é talvez partir daqui em diante. Vamos para a conta. Para que possamos fazer a mesma coisa. Mas vamos ver, como posso fazer isso? Então talvez eu possa voltar ao meu projeto. Ele controlava C, pulava aqui, controlava V, e usava a minha conta. Movê-lo para baixo apenas para que eu possa selecionar um painel em todos estes porque nossa contagem já está criado para que phi. Então vamos agora ir em frente e voltar ao nosso protótipo. Clique duas vezes em nosso Dashboard, arraste e solte. E quando usar animações automáticas, eu vou usar snap e 0.4. Então agora vamos em frente e seguir em frente para o resto deles. Então isso vai ser transações. Vamos ver, Dashboard, empréstimos. Então todo o caminho para baixo cartas, mesma coisa, todo o caminho para baixo. Investimentos como este. Digital. E, finalmente, clique em logout. E em vez de auto animar, transição, destino vai ser o design da página inicial. Dissolver. Em vez de Snap, vamos com fácil e fora 0.4 segundos. Agora, vamos em frente e mudar isso para transações como dat. E podemos fazer a mesma coisa. Então Dashboard e arrastar e soltar conta. Aqui estamos nós. Então VR selecionado, ousar, e vamos ver transações. Empréstimos para se adaptar bem ali. Vamos ver empréstimos, sem cartões, investimentos em digital. E eu acabei de notar que eu estou simplesmente usando AZ e fora. Então eu vou usar snap. E para alterá-los, basta clicar neles. Vá de fácil o suficiente para encaixar. E fazer o mesmo para todos eles assim, onde estamos tão contados porque estamos na conta, não podemos mudar isso. Então vamos ver, talvez possamos fazer o painel em todos eles e depois trazê-lo de volta para casa. Então vamos fazer isso em empréstimos. Vou clicar no meu painel. O meu pai. Vamos voltar. Então nós temos painel de carrinho, investimento, digital, assim. E é basicamente isso. Vamos agora usar este para que possamos voltar ao nosso estado padrão. Vamos ver. Vamos ver se foi atualizado aqui. Não, não aconteceu. Então ainda estamos no estado padrão. Então vamos trazer isso de volta para aqui. E vamos trabalhar a partir daí. Não sei, talvez possamos até continuar a partir daqui, mas neste não posso mudar a conta. Então talvez eu possa copiar isso de volta. Vamos ver como posso fazer isso? Então, Controle C, posso trazê-lo aqui. E de Dan, Dan, eu serei capaz de copiar e colar poços de erro. Então nossa contagem já está terminada. Então, se eu clicar aqui e ir para a minha conta, ir para o protótipo, você pode ver que ele está concluído. Transações concluídas. Agora. Basta conectar nossas transações contábeis, empréstimos, está concluído, cartões, investimentos e digitais. Então conectou todos eles, o que é ótimo. Então eu posso agora ir para o meu estado padrão, voltar para o meu design. Ele controlaria X. Então, como já estamos conectados, vamos trazê-lo até aqui. Então, estas serão as nossas transações. Vamos conferir, ver se está conectado onde quer que esteja, exceto o logout, o painel e a conta. Então vamos conectá-lo lá dentro. Então eu vou clicar lá e ir para a minha conta. Vou usar este snap e clicar aqui e ir para o meu painel. Então vamos ver. E isso vai ser e design painel como dívida. Vamos voltar ao controle de QI C. Clique aqui, controle v. Vou selecionar o protótipo dos pulmões. E vamos ver. Por alguma razão, não me mostrou isso de mente estreita. Vamos em frente e conectados em todos os lugares. Então, no painel, design, painel, painéis de conta, transações, e há mais cartões. O que? Investimentos? E painel e digital. E eu vou deixar o logout para mais tarde porque é muito mais simples clicar entre eles e conectá-los dessa maneira. Então vamos fazer do mesmo tipo. Vou apertar o Controle C, copiá-lo ou aqui mesmo. Posicionado logo abaixo em todos eles classificados veja abaixo do meu nav superior. E abaixo do mater, abaixo. Então, agora, e isso é bom, tudo bem. Certo, vamos seguir em frente. Então, muito deixado de fora é, vamos ver, longínquos nós fizemos. Aqui estamos nas cartas. Vamos voltar ao protótipo. Então clique duas vezes em Dashboard e eu vou fazer tudo o mesmo. Então design, conta, transações, empréstimos, investimentos em digital assim. E finalmente, vamos bater o controle C e voltar ao nosso controle de investimentos V. E eu também vou colá-lo aqui. Então controle. Agora, vamos, vamos primeiro fazê-lo com este. Então vamos para o painel prototipado de investimentos. Clique em OK. Estou tentando fazer isso o mais rápido possível. Então conta, vamos ver. Ações. Estamos em empréstimos. Cartas. Digital é selecionado, ou de volta para o controle de design c e controle v aqui mesmo. Desculpe, assim. Isto é digital. Então, finalmente, este é o último. Vamos escolher o digital. Veja se selecionamos investimentos, cartões, empréstimos, transações, onde estamos aqui, então precisamos estar em conta. Estamos ligados à SPR, está bem? E este primeiro é o painel. Ok, então tudo funciona bem por enquanto. Vamos clicar aqui e explorar isso um pouco mais. Então, somos um painel de protótipos digitais e vamos terminar isso rapidamente. Então Dashboard Design vai ser conta de painel. Então abra transações de painel e painéis para lagoas. E há mais para os investimentos atuais no painel. E é isso. Vamos agora rapidamente ir em frente e conectar esses logotipos. Então eu vou escolher o que dissemos, homepage e design. Eu estou indo para ir com nota fácil 0.4. segundos e transição Dissolver. Então, tudo bem. Vou fazer o mesmo pela disciplina. Então vamos ver homepage e design e maneira de proceder para uma disciplina. Então design da página inicial na página e projetado. E eu veria o design da página inicial. Estarei conectado aqui. Sim, estamos, sim, estamos aqui também. E, finalmente, vamos em frente e ver o que temos até agora. Então, quando você clica aqui, você pode ver que o seletor se move bem. E tudo funciona como deveria. Tudo muda bem. Por alguma razão, não podemos ir para Digital aqui. Então vamos ver, este é o segundo a último, então é este um protótipo. Sim, nós não conectamos. Então nós vamos para aqui. Animar automaticamente. Em vez de nota fácil, vamos usar o snap. Então, vamos rapidamente bater a pré-visualização a partir daí. Desculpe, eu perdi. Aqui está. Então agora o digital funciona como deveria. Então podemos ir a partir daqui. Tudo funciona bem daqui até aqui, daqui até aqui. Então tudo funciona como deveria. E, finalmente, vamos clicar em logout e isso nos leva de volta à tela inicial. Agora que estamos aqui, podemos explorar tudo isso um pouco mais e nos lembrar do que fizemos até agora. Então você pode ver que tudo isso funciona muito bem. Tudo isso está conectado. E mais uma coisa que eu não te disse, isso é que você pode ligar isso. Então você pode vincular conta. Ele pode ir para a página de contas, empréstimos, ele pode ir para a página de lançamento e assim por diante e assim por diante. Você pode, obviamente, vincular essas páginas ao criá-las, mas não pode vinculá-las. Então, quando você vai para a conta, e se eu rolar todo o caminho para baixo em contas, nós começamos nosso carro estrangeiro milenar e moagem de caçamba. Então você não pode fazer isso. Portanto, você não pode clicar na conta Iniciar. E leva você para começar a contagem. Você não pode vincular isso, e ele não pode vincular a esse porque o Adobe XD ainda não é tão avançado. Você pode vincular essas páginas. Então eu acho que nós fizemos isso para cartões ou empréstimos onde nós o conectamos, investir. Sim. Então você pode fazer isso e você pode vinculá-los para levá-lo para baixo para qualquer seção da página. Mas uma vez que você está na página em si, agora você pode ir do rodapé para essa seção particular da página em particular. Então, mais uma vez, vamos alternar entre eles e ver como eles funcionam. Desculpe, meu computador está um pouco mais lento porque estou executando arquivos do Adobe XD ao mesmo tempo e estou gravando, então peço desculpas se algo acontecer, é mais lento. Um digital. Então eu acho que com o LinkedIn também se atreve, não, só por isso. Então você pode ver como isso funciona. E, por exemplo, se você vir algo como, eu não sei, pagamentos de código QR Yep. Dar a você escrever algo como você pode pagar com a lei de copagamentos QR. E então, quando eles clicarem neste botão, ele poderia levá-los diretamente para a seção de pagamentos de código QR. Então, basta ter isso em mente porque para o investimento onde eles clicam bem ali ou apenas levá-los para esta seção onde eu posso levá-los para a decepção. Eu conectei esta seção, basta vincular este botão para qualquer seção em sua página que você deseja que ele vá. Finalmente, vamos verificar isso. Então faça login, nos leva até aqui. Podemos alternar entre login e inscrição. Quando clicamos aqui, ele nos leva ao nosso painel. E, a partir do nosso Dashboard, podemos explorá-los. Então temos esses cartões diferentes. Temos essas seções diferentes animando muito bem. Podemos ir à conta. Então podemos vincular aqui também, editar informações, transações. Podemos alternar entre renda e despesas, e eu ainda não gosto disso, mas vamos manter isso aí. Na verdade, vocês podem explorar mais isso e garantir que criem uma versão melhor do que eu fiz. Então temos um grupo rolável aqui. Temos efeitos sobre estes, bem aqui. Podemos ir para os pulmões. Você pode fazer o pagamento aqui. Cartas. Podemos fazer investimentos de pagamento. Podemos contactá-los para investimento. E finalmente digital. E temos esses botões diferentes para todas essas seções. E no final, quando eu clico em logout, ele me leva de volta para a tela inicial. Então é isso para a seção de design. Espero que tenham gostado. Eu tentei o meu melhor para dar-lhe tantas opiniões diferentes, opções, técnicas de layout, técnicas de formatação, e assim por diante quanto possível. Na próxima seção deste curso, vamos falar sobre design responsivo. Vou lhe dizer o que é um design responsivo, como você pode usá-lo em seu design. Como vamos acabar usando isso aqui no nosso projeto. E mais tarde, eu vou mostrar a vocês como podemos realmente criar uma página para ser responsiva. Então, eu vou vê-lo na próxima seção deste curso sobre design responsivo. E eu realmente espero que você aprenda muito até agora, e eu realmente espero que você goste dessa seção também. Depois que um design responsivo for concluído, vamos cobrir o compartilhamento com nosso cliente. E como eu disse no início do curso, você pode compartilhar no ar em qualquer estágio que você quiser. Então você pode compartilhá-lo a partir daqui e você pode obter o feedback. E isso é realmente o que eu quero de vocês para fazer seus clientes reais. Então, para começar com wireframes do Adobe XD e depois compartilhar com Deir, obtenha feedback de seu cliente e adapte esse feedback. Uma vez que eles aprovaram o wireframe, você pode passar para o projeto. Você pode compartilhar o design obviamente com seu cliente. E então, uma vez que você realmente chegar à página responsiva, você pode compartilhar um design responsivo também. Então essa é a intenção aqui de projetar, protótipo e compartilhar tudo ao mesmo tempo. Então você tem todas essas opções aqui, mas eu só queria economizar um pouco de tempo. Então, em vez de compartilhar todas essas opções e receber algum feedback, podemos compartilhar. Finalmente, aqui mesmo quando estamos na seção de design. Mas mais uma vez, e finalmente, eu realmente quero que vocês comecem a compartilhar a partir daqui e, em seguida, seguir em frente depois de reunir feedback suficiente. Então é isso para este vídeo. Finalmente, eu realmente tenho que conferir muito para conversar. Verei você na próxima seção quando começarmos a trabalhar com design responsivo. Então, vemo-nos lá. 54. O que é design responsivo: Agora que concluímos a parte de design do nosso projeto, vamos passar para uma parte de design responsivo. E eu só quero dizer rapidamente qual é o design responsivo, o que vamos usar e como vamos usá-lo. E então o que você pode fazer a partir daí e seguir em frente para praticar suas habilidades de design responsivo. Então, em primeiro lugar, estamos usando design responsivo como um design, não como um código, mas ainda queremos prepará-lo para desenvolvedores quando eles se juntarem código e quando eles começam a criar design responsivo para estar ao vivo. Então, como vamos fazer isso? Vamos usar o Bootstrap. Bootstrap é basicamente este conjunto já pré-fabricado de componentes em código, mas vamos usar a parte de design desses componentes. E quando chegarmos ao próximo vídeo, vou mostrar a vocês como isso funcionará dentro do Adobe XD. E porque se lembrar, cada um, nosso Conselho tem sua grade, vamos aplicar essa mesma estrutura ao design responsivo. Mas para cada tamanho específico, vamos adaptar o tamanho da grade. E quando adaptamos o tamanho da grade. E então nós vamos adaptar os elementos para esse tamanho da grade, N para o tamanho do aeroporto em si. Então, digamos que temos, por exemplo, imagem à esquerda, textos e a parte inferior à direita. Em vez de simplesmente os encolhermos assim, vamos invertê-los. Então a imagem vai para o topo. Texto e botões estão indo para baixo. E então eles vão começar a estreitar a partir daí como telas menores e menores que você vai para. Então é assim que o design responsivo funciona na teoria, na prática, vou mostrar mais algumas opções que o Adobe XD tem nativamente que podem nos ajudar a trabalhar com design responsivo. Já te mostrei aqueles grupos de pergaminhos. Como te mostrar as pilhas. Mas eu não falei sobre a função de redimensionamento responsivo que Adobe XD tem nativamente soviético vai falar sobre o pai, como papai pode nos ajudar a acelerar o processo. E nós vamos falar sobre os componentes porque nós temos que reduzir o tamanho de nossos componentes. E você já viu que comprar esses cartões de crédito porque nós aplicamos algumas dessas mudanças em nossos cartões de crédito e vamos desses cartões grandes para os carros menores. Os textos também precisam mudar. As imagens também precisam mudar. Então vamos falar sobre todas essas coisas. Como eu disse, eu vou usar os tamanhos Bootstrap se você estiver usando algo como Angular ou outra coisa. E esse princípio basicamente vai ser o mesmo, vai se aplicar a você também. Mas você precisa encontrar seus próprios tamanhos. Porque como eu disse, eu estou usando bootstrap, eu vou usar tamanhos bootstrap. E você, normalmente você pode encontrar esses tamanhos em sites desses criadores. Então, por exemplo, você pode ir para o site do Bootstrap e encontrá-lo lá. Caso contrário, você pode encontrar designers on-line que já criaram a dose usando os princípios do código. Porque na maioria dos casos, essas plataformas e esses sites estão apenas pensando em decodificar. Eles não pensam no design. Portanto, os designers têm que criar recursos a partir de si mesmos. E porque a maioria deles são open source como Angular e Bootstrap bar, então você pode pegar recursos desses designers e usá-los em seus próprios projetos. E é isso que vamos fazer porque eu usei estes do drible e descobri que esses tamanhos de grades no drible, eles eram arquivos de esboço, mas eu apenas apliquei essas mesmas técnicas e tamanhos ao meu arquivo Adobe XD. Então, vou mostrar isso mais tarde. Mais uma coisa que eu quero mencionar é, você tem que ir do tamanho do celular para o tamanho do desktop ou o contrário. Na minha opinião, realmente não importa porque você vai escalar esses componentes ano da maneira que você está trabalhando com ilustrações complexas que nós não estamos neste projeto, mas você pode simplesmente imaginar que, por exemplo, em seções de herói, você tem essas ilustrações complexas, então você vai usar menos partes de sua ilustração ou nenhuma ilustração em tamanhos menores. E assim que você começar a crescer, ou esses elementos vão aparecer do nada. Mas você tem que pensar sobre como isso vai funcionar. Se alguns, por exemplo, alguém estiver usando tablet em um tamanho de paisagem e, em seguida, virar para o tamanho retrato. Então você tem que pensar em todas essas coisas. Você tem que falar com desenvolvedores obviamente para ver quais tamanhos eles vão suportar porque não há nenhum ponto de vista de projetar, por exemplo, eu não sei um tamanho de smartwatch quando eles não estão indo para usar o tamanho de smartwatch dívida, ele adiciona o tempo para o projeto. Ele adiciona o custo para o projeto, para o cliente e para você porque você vai perder seu tempo com o tamanho que eles não vão suportar e eles não vão usar. Se você está pensando em suporte ao navegador, esse não é o seu problema. Esse é o trabalho do desenvolvedor porque eles estão fazendo isso em código. Você só está fazendo a parte de design no Adobe XD. Mais uma vez, um WASD é tudo sobre o design. Você tem alguma funcionalidade de exportação de código, mas é tão básico, que nem vale a pena falar sobre isso. Há algo chamado anima sob mercado e você pode usar isso para exportar código. Mas eu descobri que esses grandes desenvolvedores na linha disse que esse acorde realmente não é tão limpo. E eles estão apenas usando algumas técnicas para copiar e colar linhas e blocos de código. Então, realmente completamente codificado do zero é a melhor maneira de ir do Adobe XD para o produto de vida. Finalmente, quando se trata de design responsivo, também precisamos pensar sobre a tipografia em como ela escala. Vamos falar sobre isso, obviamente. Então, no meu caso ou tentou usar a mesma topografia e apenas com um pouco mais de espaçamento ou um pouco mais de altura de linha ou luz solar que ao longo do meu design responsivo. Mas quando eu venho para a menor parte, Eu realmente gosto de baixá-lo para baixo, especialmente se você está projetando para um telas móveis que são realmente extremamente pequenas. Por isso, estou a tentar reduzir o tamanho à medida que desço. E eu sempre gosto de ir da área de trabalho até o celular. Então, como eu disse no próximo vídeo, vamos começar com design responsivo. Eu vou falar sobre essas grades, tamanhos de grade para o bootstrap. Vou mostrar-lhe como você pode aplicá-los e como você pode criá-los também. Mais uma coisa que eu gostaria de mencionar é que eu vou criar uma, uma página responsiva para um site e uma para o painel. Não vou desperdiçar seu tempo passando por tudo isso e fazendo tudo isso por eles. Você pode fazer isso se quiser, apenas como uma prática. E aplicar o conhecimento dessa página e uma página de painel a todas essas outras páginas. E especialmente mais tarde você está em páginas pessoais se você quiser projetar a dose. Então, basicamente, é isso para este vídeo. E vejo-te no próximo. 55. Criando um sistema de grade responsivo de design: Nesta seção do curso, vamos finalmente começar a trabalhar no design responsivo. E eu vou explicar a vocês o que é o design responsivo através deste exemplo. Então, eu não vou apenas falar de interior, eu vou apenas mostrar a vocês como eu faço isso, como você pode fazer com o que as opções do Adobe XD estão lá para você. E alguns conselhos que posso dar a vocês de todos esses anos trabalhando com design responsivo. Então, como eu disse em um vídeo anterior, vamos usar o sistema de grade Bootstrap. E como eu disse, encontrei estes online no Dribble, na verdade. Então vamos realmente usar cinco tamanhos no total. Então este é o nosso tamanho médio. Então isso é para um site grande. Olhe, então é para grandes áreas de trabalho e, por exemplo, para telas. Vamos ver, de 24 polegadas para cima. E eles vão se adaptar dessa forma para que possam ser vistos em grandes TVs, por exemplo, e assim por diante e assim por diante. E foi isso que o cliente escolheu apoiar. Vamos projetar para tamanhos menores. E, a fim de economizar tempo, iria discursar porque vai literalmente levar 100 dólares ou algo assim para cobrir cada página e cada detalhe. Então é por isso que eu disse que não vou fazer o wireframe para todos esses painéis para economizar tempo. É por isso que eu disse sobre todas essas páginas adicionais, como sobre nós página e assim por diante e assim por diante. Eu não vou projetá-lo porque você pode fazer isso sozinho se você quiser, se você quiser praticar, se você quer aprender coisas novas, usando as dicas e técnicas que você vai aprender com o discurso e aplicá-las ao essas páginas. Dissidência se aplica ao experimento responsivo. Vamos apenas fazer um design responsivo para esta página inicial e para a página do painel. Como a navegação no painel vai mudar assim como com essa navegação, vou mostrar como você pode adaptar componentes, como podemos torná-los menores, e todas essas coisas. Então, sem mais delongas, vamos começar. E neste primeiro vídeo da série de design responsivo, vou mostrar a vocês como podemos criar grades e enriquecer tamanhos que vamos usar. Então, para começar, vou clicar aqui onde diz placa de arte. Você também pode pressionar um no teclado. E quando faço isso, dá-me todas estas opções aqui. Então, se você se lembrar dos vídeos introdutórios, se você assisti-los, você também pode fazer isso chutando, batendo na tela inicial e, em seguida, escolhendo entre os modelos predefinidos. Mas se não, você pode clicar aqui e ele vai mostrar todos esses modelos, além de mais. Eu só vou fazer isso. Então web 19-22. Eu também posso copiar e colar um desses, mas eu não vou fazer isso. Vou me posicionar por aqui e entrar no modo protótipo. Clique aqui e chame esse fluxo, mas design responsivo. Ou melhor ainda, um redesign responsivo do site. Porque mais tarde vamos fazer o mesmo e fazer um design de painel responsivo. Agora que criei meu pai, posso simplesmente me mudar. É apenas um pouco acima para algum lugar por aqui, por exemplo, quando você diminui o zoom, parece bom. E em termos de organização, podemos, por exemplo, painel de mesa de frutas logo abaixo. Em seguida, podemos mover o design do site aqui em vez do painel. Podemos posicionar este painel à direita se não tivermos espaço suficiente. Podemos posicioná-lo abaixo. Então, tudo depende de você e do que está tentando fazer. Nós também podemos posicionar esses wireframes e painel aqui mesmo. E, em seguida, projetar abaixo disso, e, em seguida, Design Responsivo abaixo disso, ele vai nos poupar um pouco mais de espaço, que você não tenha que rolar todo o caminho para baixo. Seus clientes, colegas de equipe e desenvolvedores não precisam rolar todo o caminho para ver tudo isso. No nosso caso, vou fazer assim. Mas mais uma vez, você pode fazer como quiser. Por isso, vou aproximar muito de perto este. E eu vou chamá-lo, por exemplo, ou grandes áreas de trabalho. Mais de 1200 pixels. Para que eu possa mostrar ao meu desenvolvedor o que estou tentando alcançar com este. Então o que eu vou fazer com ele é primeiro as coisas que eu vou reduzir o tamanho. Então a altura vai basicamente ficar a mesma, mas a largura vai mudar. Então isso vai ser 1440 pixels. Então, se você se lembra que neste é 1920, este é 1440. Posso movê-lo um pouco para cima assim. E eu vou, obviamente, adaptar a grade para que ela se encaixe com este tamanho. Então ainda vamos ter 12 colunas, mas a largura da calha vai bater tardy como DAT. A largura da coluna vai ser 65 e ver se podemos aplicar isso. Sem segurança. E vamos usar 165 aqui. Então vamos verificar mais uma vez. Então 12365165. Então, obviamente, isso vai ser margem. Então estas são margens esquerda e direita. Você pode, obviamente, aumentar estes. Então, se você, por exemplo, queria tornar as colunas mais largas, você pode, se você quiser tornar a largura da calha mais larga, você pode fazer isso também. Vou deixar assim. O que eu vou fazer a seguir é apertar o controle D para duplicar este nosso quadro. E eu vou chamá-los, por exemplo, em desktops, ou vamos chamá-lo, eu não sei, ampliar dispositivos. Então estes são, por exemplo, laptops, que são apenas maiores do que os laptops mais pequenos. Então eles vão para até 902 pixels. E mais uma vez, obviamente, se você está fazendo algo como Angular ou algo assim, você vai ter configurações diferentes do que eu. Se você estiver fazendo Bootstrap, você também pode usar outras configurações. Então, como eu disse, você não precisa usar essas colunas. Você pode usar oito colunas para qualquer coisa. Você pode usar largura de calha diferente em largura de coluna diferente e assim por diante. Então, a melhor coisa que você pode fazer aqui é falar com seus desenvolvedores sobre como eles gostam de trabalhar, em que tamanhos e como você pode implementar isso em seu design responsivo? Obviamente, você tem que falar com eles sobre quais tamanhos eles vão suportar. Então, por exemplo, se eles não precisam dos dígitos de tamanho necessários neste tamanho. Então 19-22, então você pode apoiar isso. Agora, para este, vamos seguir em frente. E 19, então 1080 vai ficar, mas vamos reduzir isso, por exemplo, para 10-24, por exemplo. Como uma dívida. Então vamos deixar isso em dívida. Então dispositivos grandes de até 992 pixels. Esse é basicamente o tamanho que você vai suportar e esse é o tamanho da sua grade. Então, como podem ver aqui, estamos em 1440, mas nossa grade, então escrita branca da nossa grade é de 1200 pixels. Então este é o 992. Então vai ser uma largura de nossa grade de 9021024 é a largura total do nosso aeroporto em si. Então vamos seguir em frente. Vamos fazer algumas mudanças aqui também, sólidas de usar. Vejamos 47 para nossas margens. Então, algo assim. E você pode ver imediatamente que temos margens menores aqui e depois aqui. E isso está, obviamente, começando a tomar comprimidos de forma. Então o próximo será tablet. Mas antes de avançarmos para isso, vamos verificar rapidamente. Então vamos ter 12 colunas. Obviamente, se você quiser usar, você pode ter oito colunas ou quatro colunas, mesmo seis colunas. Então, mais uma vez, fale com seus desenvolvedores sobre o que eles gostariam você implementasse e como eles gostariam que você criasse isso. Assim, é mais fácil para eles desenvolver este site. Mais tarde. Vamos ter largura de calha de 30, largura de coluna de 50, e margens estão ligadas esquerda e direita ou 47 controle D para duplicar este. E isso vai ser mediano. E dispositivos. Assim, por exemplo, tablets e até 768 pixels de largura. Então, mais uma vez, 76 oito é a largura do nosso grande, e nós vamos aplicar isso para se adaptar. Então, mais uma vez, como eu disse, várias vezes você pode usar o sistema de grade de oito colunas, você pode usar seis, você pode usar para o que quiser, mas eu só vou usar 12 por causa da consistência. Então vamos abaixar isso. Então vamos mantê-lo em, digamos, 76 lugares. Como uma dívida. Em seguida, vamos ter 12 colunas, 30, vamos ter 30 aqui mesmo. E vamos ter, vejamos, 39 aqui, assim. E vamos ver, está me dando 44 por alguma razão. Vamos ver, Austrália de novo. Então, mais uma vez, o Adobe XD está jogando conosco. Não me deixa terminar isto. 30. Vamos ver, 44. Então, na verdade, sim, vamos deixar assim. Então vamos deixar no 44. Então, basicamente, é isso. Vamos descarregar mais algumas coisas. Então eu vou duplicar isso. Vou chamar isso de pequenos dispositivos. Vamos ver. Telefones e abaixo de cinco, 76 em pixels. Então deixe-me ver isso assim. E isso realmente vai ser, vamos reduzir seu tamanho vai ser 375. Tão pequeno. Vamos ter apenas quatro colunas. Vamos ter a largura da calha de 30. E vamos ver-me, podemos reduzir isto para 20. Isto vai ser 61. Este robusto e colunas são para, mais uma vez, porque estamos fazendo isso, talvez possamos deduzir e distal oito. Vamos ver, só para que possamos nos dar um pouco mais de espaço. E entre estes, isto é às quatro, e é basicamente isso. Criamos nosso design responsivo e sistema de grade. Você pode vê-lo. Eu realmente não gosto dessas grandes margens ao lado. Então talvez possamos reduzi-los mais tarde. Mas, por enquanto, vamos mantê-los deitados e ver o que temos com o nosso design assim que começarmos. Então é basicamente isso para este primeiro vídeo. No próximo vídeo, vamos copiar esta página, desculpe, esta página com o design baixo e vamos realmente começar a adaptá-la ao nosso sistema de grade. Então, vemo-nos lá. 56. Design responsivo 1: Agora vamos começar finalmente a trabalhar em nosso design responsivo. E para começar, você pode lidar com isso de duas maneiras. A primeira maneira é simplesmente pular dentro do seu quadro de arte. E porque nós vamos estar fazendo esta tela de design da página inicial, você pode simplesmente copiar todo esse conteúdo e colado aqui e simplesmente estender esta rpart para baixo que acabamos de criar para este primeiro tamanho. A outra maneira de fazer isso, e eu realmente preferi esse método, é porque ele está mantendo estacas muito agradáveis, limpas, fáceis de ver, fáceis de entender é simplesmente segurar sua chave antiga. Duplicar posição da placa desarmada. Está algures por aqui. Então, se você queria estar perto do seu aeroporto com seu sistema de grade no lugar para que você possa conferir e ver por si mesmo o que você precisa escalar, onde você precisa escalá-lo, quatro e assim por diante. Então, é muito mais fácil assim, na minha opinião. Mas mais uma vez, você pode fazer o contrário. Então a outra maneira, como eu disse, é simplesmente pular aqui. Você pode selecionar todos esses itens, bater o controle C. Você também pode agrupá-los e, em seguida, estendido este nascem todo o caminho para baixo, por exemplo, como este. E então ele controlaria V para colar todo esse conteúdo. Mas como eu disse, gosto de fazer as coisas assim. Então, cabe a você decidir de que maneira quer se mover. Então, para começar, o que eu queria fazer era basicamente adaptar meu layout a esses tamanhos. Então eu queria reformá-lo em 40 de largura. Quero que seja ilimitado em altura. Então, basicamente, seja qual for a altura que for preciso, porque em todos esses sites onde eles estão no Manuel, no desktop e no tablet, o que quer que você esteja rolando para baixo. Então é realmente a inteligência do DES, elementos e restrição de largura, que muda, o que você pode ver aqui através destas placas. Então, basicamente, a altura pode ser tanto quanto você precisa, enquanto a largura é simplesmente restrita com seu conteúdo. Então, como eu disse, várias vezes, esse conteúdo pode simplesmente mudar. Assim, por exemplo, para os tamanhos menores, talvez você não precise de todos esses elementos de fundo porque eles, por exemplo, podem ou não ser facilmente legíveis em um tamanho de tela de telefone celular enquanto na área de trabalho lá lindamente apresentados, limpo, fácil de entender, fácil de ver e de absorver. Então o que você pode fazer é remover alguns desses elementos enquanto você desce. Mas vou tentar manter o maior número possível desses elementos para que eu possa manter minha experiência consistente em todo o design do meu site. Então vamos começar com nosso design responsivo. E para fazer isso, preciso fazer algumas coisas primeiro. Então o que eu preciso fazer é criar grupos para esses elementos separados porque eu queria ser dimensionável para baixo. Então, por exemplo, para este grupo aqui no topo, talvez eu não precise fazer nada. A única coisa que eu queria fazer é agrupá-los assim. Então vamos em frente e aperte o Controle G. e digitando o local. Eu vou sair para o negócio como ele é porque é apenas um texto por conta própria. Para este, vou apertar o Controle G e digitar o telefone. E, finalmente, para este, vou acertar as bandeiras de genotipagem do Controle. E o que isso vai me permitir fazer é quando eu começar a escalar, elementos dentro das pastas vão ficar juntos e não vão escalar uns com os outros. Enquanto se você deixá-los fora de suas pastas e começar a expandir isso e começar a dimensioná-lo. Então, se eu começar a dimensioná-lo assim, você pode ver que as coisas estão se movendo juntas porque estão dentro da pasta. Mas, por exemplo, se eu disser Desagrupar minhas bandeiras e meu telefone. Então vamos fazer isso no grupo. E então quando eu começar um redimensionamento isso, você pode ver que quase parece o mesmo. Mas assim que as coisas chegarem tão longe, você pode ver que o telefone e o ícone do telefone estão se sobrepondo um com o outro. E quanto mais você reduzir o tamanho disso, você pode ver quanto maior o problema fica. Então vamos desfazer todas essas coisas. Vamos para aqui. Tínhamos o telefone e as bandeiras. Basicamente precisamos fazer, pensar. Precisamos fazer isso para todos esses grupos e camadas. Então aqui temos o texto, o que é bom. Nós também posicioná-lo em uma pilha que também é bom e ótimo para posicionamento mais tarde, eu vou mostrar-lhe que mais tarde, elementos herói deve estar sempre dentro de uma pasta de dados. Casais felizes. Então esta é apenas a nossa imagem. Vamos posicioná-lo em forma de herói, basicamente apenas uma forma. Esta máscara está dentro de um grupo. Então basicamente uma máscara é um grupo desses dois elementos e apenas escondendo um ao outro. Então vamos deixá-lo como está e vamos escalar esta máscara conforme necessário. E finalmente, herói bg dt pode ficar assim. Agora, para os serviços, podemos deixá-lo assim porque você pode ver que temos esses cartões de conteúdo e podemos renomeá-los. E obviamente esqueci de fazer isso. Então, em vez de um cartão continente, você deve escrever algo como contas personalizadas, Dan poupança personalizado Dan cartões de débito personalizados. Então você pode fazer isso por todas essas coisas. Agora o que podemos fazer com este é criar uma pilha. E se eu abrir, você pode ver que ele se posicionou para este meio em uma pilha. Não sei por que as pilhas estão fazendo isso. Então, em vez de simplesmente usar este texto fora ou qualquer outra coisa, é apenas posicionar essas coisas em um grupo. Então eu vou clicar com o botão direito do mouse desagrupado em, e eu realmente vou voltar não selecionando minha pilha. Eu também posso fazer isso. Agora. Posso desagrupar isto. E agora, se eu posicionar este texto fora da minha pasta, clique aqui, posicioná-lo em uma pilha e abri-lo. Você pode ver que eles estão todos lá fora. Então, se eu escolher posicionar minha pilha assim, você pode ver que ela posicionou automaticamente todas essas cartas em cima uma da outra. Então eu vou realmente fazer isso. Vou remover meu texto, posicioná-lo fora ou a pasta porque é muito mais fácil assim do que adaptar todas essas mudanças. Agora vamos passar para a taxa de câmbio. Então eu vou posicionar este texto em um grupo. Então assim porque esse é apenas o único texto que precisamos. E o que vou fazer é não me posicionar em uma pilha. E o que eu vou realmente estar fazendo é selecionar todos esses. Cotação, Por exemplo, moedas como esta. E então simplesmente use essa opção, que é rolagem horizontal. E você pode mostrar com esses contornos onde você queria rolar horizontalmente para o início e o fim. Então eu vou adaptá-lo para aqui e dois aqui por enquanto. E, obviamente, uma vez que começarmos a diminuir a escala, você pode seguir em frente apenas todas essas configurações. Então eu vou copiar meu texto colado aqui. Então diz moedas e não rolagem vertical ou horizontal, nome do serviço. Como você pode ver, ele já está dentro da pilha. Nós temos a imagem, nós tivemos o texto, o que é bom. Vamos deixá-lo assim. Agora, para essas cartas, eu posso posicioná-las em um grupo e chamá-las de cartas. E então eu posso colocar que cresceu em uma pilha. Você pode ver que eles ainda são assim. E mais uma vez, será muito mais fácil para nós simplesmente clicar em um botão. Vai posicioná-los onde for necessário. Então, vamos deixar assim por enquanto. Nossas últimas notícias, eu vou fazer a mesma coisa. Então eu vou remover meu texto do lado de fora, posicioná-los em uma pilha. Se eu clicar aqui, você pode ver o que quero dizer. Então está posicionando-os para baixo. Finalmente, tira informações e vamos fazer a mesma coisa. Então eu realmente já fiz isso temos Localização, telefone e e-mail, e nós temos infra-estrutura, BG. Então vamos deixá-lo assim porque é muito mais fácil de ajustar. Estes elementos estão enviando boa aparência para o topo. Agora só temos basicamente se você olhar para ele para diferentes elementos. Então temos o logotipo, temos o nome da rua, temos o número de telefone, e temos o e-mail. Então eu vou realmente remover esta informação mais tarde e apenas deixar os ícones no lugar. Agora, quando se trata de rodapé, se eu abri o Photoshop, você pode ver que já temos todas essas informações dentro. Então o que eu posso fazer é eu posso, tudo que eu posso apenas usar a pilha se eu quiser, mas eu não vou, eu vou deixar isso assim porque vai ser muito mais fácil para mim reposicionar tudo isso mais tarde. Então eu vou te mostrar isso também. E é basicamente isso para as configurações. Agora vamos começar com nosso design responsivo. Então, mais uma vez, precisamos reduzir o tamanho disso são ou não valem a pena. Como você pode ver que está em 1920 agora, precisamos reduzi-lo para 1440. E vamos clicar aqui e renomear as respostas desta página inicial assim. E mais uma vez, para te levar de volta, eu só vou fazer um design responsivo desta página porque mais uma vez, vai me levar horas, se não dias, para conversar e criar esse design responsivo para seus caras, é vai levá-lo como um dia, por exemplo, para todas essas páginas. E pode ser meio dia para todas essas páginas se você quiser ser completamente preciso e assim por diante. Se você quiser cortar alguma folga em alguns cantos apenas para criar um design responsivo. Você pode fazer todas essas páginas em 67 horas, então um dia útil, por exemplo. Então certifique-se de cobrar seus clientes. Além disso, se você estiver criando um design responsivo para eles, apenas certifique-se de que leva tempo, é preciso planejamento, é preciso pensar. Então você sempre pode aplicar esses princípios. Então, por exemplo, os grupos de rolagem, essas pilhas enquanto você cria. Então pratique neste curso, veja o que funciona melhor para você e, em seguida, aplique essas técnicas mais tarde quando você começar a trabalhar com clientes reais. Ou se você estiver trocando técnicas com seus clientes existentes. Então vamos voltar a isso. Se eu clicar aqui mais uma vez, então 1440, eu vou clicar aqui, 1440. E assim que eu pressionar Enter, você pode ver que ele corta todo o nosso quântico, mas tudo bem, isso deveria acontecer. Agora, a próxima coisa é copiar todos esses elementos. Então você pode clicar com o botão direito aqui. E você pode ver que você tem todas essas opções. Você tem cópia, você organizou, você alinhou à grade de pixels, você tem guias e assim por diante. Mas você não tem a opção de realmente copiar layout discordado para aqui. Você pode torná-lo o padrão aqui, mas você pode usar o padrão, que existe um padrão, mas você não pode aplicá-lo como um modelo separado, que é na verdade a atualização que eu realmente gostaria de ver da equipe do Adobe XD é, por exemplo, digamos que esta é a área de trabalho, esta é uma área de trabalho menor, esta é ainda menor. Estes são os tablets e telemóveis dela. Deixe-me criar layouts de grade adicionais para todos eles. Então, se eu clicar aqui, você pode ver que eu tenho meu layout de grade no lugar porque eu já inseri manualmente todos esses valores. Então deixe-me criar esses valores como um modelo. E então, quando eu copiar e colar isso aqui, eu posso simplesmente usar um botão para aplicar esse modelo ao meu trabalho artístico existente. Espero que tenha feito sentido, mas infelizmente, não temos essa opção por enquanto. Então temos que usar essas opções para isso. Então, mais uma vez, temos aqui. Vou usar todas essas opções abaixo. Então vamos usar as 12 colunas. Vamos usar 30 aqui, onde vamos usar 65 e vamos usar 165, Miller, assim. Então isso vai nos dar mais alguns problemas. Então, mais uma vez, 3065165. Então, Dairy, como agora temos esse layout exato para nossa grade, espelhado para esta página bem aqui. Então, agora podemos ir em frente e começar. Somos um design responsivo. Primeiro, posso ir em frente e pular para o topo e ajustar todos esses elementos para que você possa ver onde nossa grade está agora. Novelas, ainda temos uma grade de 12 colunas. Então vamos apenas ir em frente e ajustar todos esses elementos para ele. Então eu vou pular aqui mesmo. Para a nossa localização, vou simplesmente movê-lo aqui, alinhá-lo à minha grelha ou posicionar isto aqui. Vou saber mais e clicar no meu telefone. Clique nas minhas flores, e só preciso ver onde estou telefone pode obter posição manequim e aqui eu acho que vai funcionar muito bem. Você também pode se posicionar para negócios, por exemplo, aqui fora, mas eu gosto de deixá-lo lá por enquanto. E é basicamente isso. Isso é o que vamos fazer com todos esses elementos diferentes. Agora com a navegação vai ser um pouco diferente porque já temos nossa navegação selecionada. Então você tem basicamente duas opções. Uma opção é usar o que você já tem como simplesmente ir em frente e adaptado a todos esses status. Pare. Vamos ver. Temos grandes desktops para que um. Então o que eu precisaria fazer é dentro do meu navegador principal para este. Porque, como você pode ver, este é o diamante oco, não preenchido em diamante, que indica que este não é o componente principal, mas o componente filho fora do próprio componente principal. O que significa que podemos fazer qualquer tipo de mudanças que queremos e não afetará nosso componente médio é apenas afetar este componente gel e componente criança de lá é então eu espero que isso faça sentido. Mas porque só estou fazendo uma página para economizar um pouco de tempo. Vou apenas ajustar isso para o estado padrão em si. Basicamente, se você quiser fazer isso para todas as páginas e dentro dos projetos, você obviamente tem que, então você pode entrar. Depois de ajustar este, você pode pular em conta, ajustá-lo, você pode pular em empréstimos e assim por diante e assim por diante. Você entendeu o ponto. Você tem que fazer isso o tempo todo. Então eu vou saltar para dentro e agrupar todos estes juntos assim e chamá-los, por exemplo, menu ou nav itens como esse. Só para que seja um pouco mais fácil para mim trabalhar. E então eu vou clicar aqui e ajustar a largura dois aqui. E como você pode ver, nós já temos alguns problemas. Por isso, temos de ajustar essas questões à medida que avançamos. Então, basicamente, se eu clicar duas vezes agora, você pode ver que estamos no Poppins 18. Então o que eu vou fazer primeiro é basicamente ajustar meu botão porque eu vou precisar que ele seja para este tamanho. Vou clicar em algo assim. Eu vou para o pairar e fazer a mesma coisa. Ir para o estado padrão é simplesmente movê-lo. E vamos ver, Maria pode se posicionar para ser 20. Posso fazer o mesmo com o meu logotipo. Então 20, só para me dar um pouco mais de espaço. Agora com este, se você estiver usando uma grade de repetição, você pode ajustar automaticamente o espaçamento entre eles. Mas porque não somos e estes são criados como itens separados, temos que ajustar o nosso espaço manualmente. Então o que eu posso fazer é basicamente clicar aqui. E vamos ver, posicionar este 1234 talvez. E, em seguida, vá em frente, selecione todos estes. E vamos ver, mova-os para 40 também. Então 1234, você pode desmarcar este e, em seguida, seguir em frente e criar um espaçamento de 44, todos esses. E como você pode ver, agora está começando a me dar esse espaçamento. Então, hábito de laticínios, se eu esconder minhas grades por um segundo. Só para que você possa ver melhor, você pode ver o que fizemos. Então você pode ver onde isso vai dar. Você tem que saltar para dentro, ajustar todos esses tamanhos, são apenas todos esses espaços para todas as suas páginas. E é por isso que isso é realmente importante. Então vamos em frente e seguir em frente. A realmente não gosto deste espaçamento, mas vamos deixá-lo lá por enquanto. Então eu vou clicar aqui para trazê-lo de volta à minha rede. Então o que eu vou fazer é realmente saltar, mover minha imagem para dentro e eu posso reduzi-la, por exemplo, apenas um pouco, só para ver onde isso está me apostando. Posso então posicionar o meu texto aqui. Posso saltar para dentro e mover o meu botão para este tamanho. Então eu posso ajustar, obviamente. E então você pode copiar e colar este botão se quiser, para todos os outros botões. Então, por exemplo, para este e estes dois, apenas para que pareça o mesmo em todo o seu design. O que posso fazer a seguir é se virmos bem aqui estamos a 90. Então o que podemos fazer é contornar nossos textos. Então, para uma nova página, eu posso clicar fora. Você pode ver como isso se parece. Se você está feliz com isso, você pode posicioná-lo. Eu também posso escrever este texto abaixo. E você pode ver porque eles estão em uma pilha, tudo está se ajustando bem. Então nós somos 50 aqui, 50 aqui. Eu posso simplesmente segurar meu clique e ele vai se ajustar para ouvir. Ou se você está segurando sua tecla shift, ele vai ajustar ambos. E esse é o benefício de usar pilhas porque ele vai permitir que você se ajuste facilmente para todas essas mudanças. Vamos agora mover isso um pouco para cima, por exemplo aqui. Eu posso então reposicionar imagem pode, por exemplo, aqui. E você pode cortar partes de sua imagem, algo assim se você acha que isso é apropriado. Mas como não faço, vou simplesmente ajustar o tamanho da minha imagem. Algo assim, por exemplo, pode ser um pouco maior. Em algum lugar por aqui. Eu acho que está tudo bem. E acho que funciona um pouco melhor do que isso. Você também pode fazer um rap como este para que você possa deixar a palavra de idade para baixo, mas geralmente não é recomendado nunca deixar apenas uma palavra para baixo. Mas neste caso, eu vou deixá-lo porque ele realmente se encaixa na nossa imagem e realmente se encaixa no nosso layout. Então, o próximo passo, formas de RDs. Então vamos em frente e ajustar todas essas formas manualmente. Posição do solo, este aqui. Deixe este aqui. E enquanto estão alinhados aqui é manualmente simplesmente posicionando e talvez até mesmo aqui. E você também pode brincar e ajustar para rotação, digamos assim. Então a próxima coisa é a nossa mesquita procurou simplesmente ajustar a largura da minha máscara assim para que ela se encaixe na raiz do meu tabuleiro. E então pularei dentro de uma lua MyCircle para algum lugar por aqui, por exemplo. Finalmente, ficamos com a forma de herói, e vamos posicionar nossa forma de herói em algum lugar por aqui. O que você pode fazer é também reduzi-lo. Então segure sua tecla shift e você pode ajustá-la para ousar. E a partir daí, você pode simplesmente expandir isso. Como assim. E posso saltar para dentro e mover as minhas formas. Então basicamente rebanho leiteiro, o que nos resta é o herói BG. Eu vou simplesmente mais com bem aqui. Ou você pode usar 1444, a largura. E basicamente quanto mais elementos você tem em sua área, como você pode ver, nós esquecemos de mover o Vg. Então eu posso fazer uma dúvida. 1440, pressione enter, enter, vai cortar para a largura total da nossa página. Basicamente, quanto mais elementos você tem em sua página, isso vai levar mais tempo. Então, por exemplo, vamos deixar isso assim. E eu vou voltar para o layout anterior porque eu realmente não gosto de como isso se parece. Para uma nova era. Eu gosto disso um pouco mais. Abbas ainda não acha muito feliz. Então, porque colocamos este texto fora do nosso grupo, que pode simplesmente clicar aqui e posicioná-lo. E como você pode ver, ainda está mantendo 100 para o espaçamento. Agora chega a hora de ajustar tudo isso. E a coisa difícil sobre estes é porque se você lembrar para cada um deles nós temos o pairar. Então nós temos que ajustar esses dois estados separadamente, o que vai nos levar, obviamente, em apenas um pouco mais no momento. Então eu vou posicioná-lo para a nossa grade assim. Vou saltar aqui e ajustado. Então, mais uma vez, temos três elementos. Então você vai pegar quatro colunas para cada elemento. Porque temos 12 colunas no lugar, vou tentar manter a altura no lugar. Então, basicamente, a altura deve permanecer a mesma. Se não, podemos mudar a altura também. Então, mais uma vez, basta clicar aqui, ajustado para formar. Você pode vê-lo ajustado muito bem. E eu posso saltar para o meu estado de horror e ajustado para quatro também. O que eu vou fazer dentro do estado de horror é simplesmente clicar nessas formas. Posso reorganizá-los. E essa é a magia do futuro de design responsivo para você. Se eu clicar aqui para o estado padrão, você pode ver como isso se parece. Então, basicamente, como o design responsivo funciona é que você pode levá-lo para o seu quadro de arte. Então, quando ele está aqui, você pode ingressar para o nosso conselho e, em seguida, todo o seu relatório vai ser dimensionado de forma responsável. Mas então você tem que pular dentro para entrar por si mesmo o que o XD acha que é o melhor para o seu design. Você obviamente sabe o que é melhor para o seu projeto porque você é o único que fez isso. Então, basicamente, eu estou recomendando a vocês este método, que é o que estamos fazendo aqui, é saltar dentro de uma edição de todos esses elementos separadamente. Por clique aqui você pode ver que temos design responsivo ativado aqui mesmo. Então, agora que nos movemos neste grupo e que o organizamos, você pode ver que ele se move de forma responsável. Mas como ainda estamos em uma pilha, você pode movê-los de forma responsável em todas essas páginas diferentes. Então o que precisamos fazer aqui é mover nossa seta porque você pode ver, porque não estava em uma pasta, você pode ver aprender mais e seta são separados. E deixe-me mostrar-lhe isso também. Então, OK, vamos voltar todo o caminho de volta. Nossa posição original. Então, em Mais como este, agora eu posso saltar para dentro e agrupar essa qualidade, Saiba mais. Controle C. Vou pular designado Mahara State. Agrupe-os para saber mais. E agora, quando eu começar um redimensionar responsavelmente estes, você pode ver que aprender mais e seta estado onde eles devem estar para que eles não se movem em tudo. Então é isso que vamos fazer por todos eles apenas para nos poupar um pouco de tempo. E é por isso que os grupos são realmente importantes. Então, onde quer que você possa colocar itens em um grupo, porque eles virão para mordê-lo mais tarde. É como eles estão fazendo agora. Normalmente coloco todos em grupos. Mas para o discurso, decidi não ir. Foi muito difícil para mim me ajustar a isso porque, como eu disse, eu costumo fazer isso só para mostrar a vocês como é importante quando vocês chegarem a este estágio, que é um estágio de design responsivo. Agora, como eu disse, o que eu vou fazer é adaptá-los a estas colunas de Outono de largura. Então, assim, eu vou mover isso aqui. Então você pode ampliar todo o caminho roupas e ver o espaçamento que é 30, simplesmente ajustado. Então 1234. Então, até aqui, vamos para o pairar. Então 1234, mais uma vez, salte para dentro e mude todos esses elementos onde você achar que é necessário. Então você pode até mesmo posicionar Isto aqui, por exemplo, e girar mesas assim. Como isso. Vamos ver, estado sem culpa. Isso é bom. E finalmente, eu vou ajustar isso para a Turquia também, assim. E se eu te mostrar, somos 30 aqui, somos 30 aqui. Basta passar o mouse sobre ele e ele irá mostrá-lo. E então, finalmente, para este, basta cortá-lo aqui mesmo. Vá para Horace, State, clipe aqui mesmo. E então vamos em frente e ajustar todos esses elementos. Então eu vou posicionar este aqui, talvez girado um pouco, e mover este aqui mesmo. O que nos resta é este círculo, como podem ver. Agora é apenas uma elipse porque não estava em um grupo. Então o que você pode fazer é simplesmente fazer uma cópia daqui. Posicione-o, por exemplo, em algum lugar por aqui. E eu posso apertar o controle C para copiá-lo. E então pule aqui para este, para o estado de horror localizado onde ele está. Então elementos e uma máscara Controle V. Vou colocá-lo em algum lugar aqui, por exemplo. Então você pode até ser preciso. Você pode, por exemplo, posicionar 20 da esquerda. Então vai ser muito mais fácil do que posicionar em todos estes. Então, 20, eu vou remover o círculo original. Vou acertar o Controle C e voltar para este, para o casco assim. E por alguma razão, não mudamos este pairar. Então vamos fazer isso em 1234. E porque você pode ver que estamos no ar. Design responsivo para este elemento, para esses elementos, bem como as pilhas, você pode ver que todos esses elementos estão se ajustando bem. Então vamos primeiro consertar isso. Eu fiz mais para o lado de fora, deveria querer. Eu vou remover este círculo e hábitos lácteos quando eu vou fazer é também ajustar esses elementos. Então aqui, bem aqui. E é basicamente isso. Eu já posso ver você perguntando sobre isso, mas nós vamos chegar a ele. Mas primeiro, como podem ver, nosso texto está um pouco cortado. Como pode ver, temos muitas opções aqui. Então, o que podemos fazer é simplesmente diminuir o tamanho do texto neste ponto. Então o que eu posso fazer VR, é 24. O que você pode fazer é voltar para 18. Mas vamos voltar rapidamente aos estados originais para tudo isso. Então vamos selecioná-los a partir daqui. Portanto, estado padrão, estado sem falha, estado padrão. E agora vamos trabalhar em nosso texto porque, como eu disse, texto é um dos principais elementos importantes. Rich você vai incluir em seu projeto. Então, como podem ver, estamos a 40 aqui. O que podemos fazer para começar com este é sair às 20. Para que eu possa selecionar todos eles. Agora, porque isto não é um grupo, é muito mais fácil. Então, mude 12, você pode então saltar para a data de colheita, selecioná-los todos assim. Turno 12, e então eu posso ir em frente e fazer isso por todos eles. Então me avise. Clique aqui. Então eu disse que queria voltar para o meu estado de horror. Então eu só estou me dando um pouco mais de espaço da esquerda para a direita. Eu perco 12. E você pode ver que o texto se encaixa agora. E nos estágios posteriores vamos envolver o texto. Mas porque ainda podemos usá-lo como está aqui. E então vamos trabalhar com isso dessa forma. E você pode ver que tudo funciona como deveria e tudo parece bem. Então vamos fazer isso pelo Horace State. E mais uma vez, vamos remover o estado de horror assim que chegarmos a este ponto, porque no tablet e no telefone, você realmente não precisa de propriedades mais altas, mas quando você está em dispositivos desktop, então imagine esta é apenas uma área de trabalho menor. Este é o maior desktop. Isso é menor e isso é, por exemplo, um pequeno laptop. Você ainda tem um rato. Ou você tem um mouse real ou um ponteiro do mouse ou atrai cama ou qualquer outra coisa, mas você ainda tem um mouse, portanto, você ainda precisa do estado de foco para todos esses elementos. Mais tarde, nos movemos, seguimos para esses. Você realmente vai precisar de estado de foco e os itens podem basicamente mudar e ajustar a essas posições diferentes, que eu vou mostrar mais tarde. Mais uma vez, estamos a 100. Nós não mudamos nada basicamente. Por isso, agora podemos abordar estes textos. Então, o que é novamente, estamos em 18. Se verificarmos que estamos em 20, mas 60 deste lado, o que significa que temos muito espaço para brincar. Então o que eu posso fazer é clicar em 16 e você pode ver para escolher entre uma ampla gama de opções de conta. Então, basicamente, o que podemos fazer é cortá-la. Por exemplo, aqui mesmo. Estamos em 11, então podemos ajustar isso para ser em 20, assim. E o que eu vou fazer é basicamente ver que cor é esta, é esta aqui. Então eu vou pular aqui mesmo, escolher esta cor Control C para o meu texto. Mas antes disso, eu posso realmente expandir isso como eu disse, 2020. Então, assim. E então eu posso cortá-lo assim. Vamos ver. - Sim. Foi só deixar assim. Então ele controlaria parecer. Posso voltar ao meu estado de horror, saltar para dentro, clicar em Controle V e rebanho leiteiro. Ou você pode ir mais facilmente para o estado padrão porque a cor do texto é a mesma. Posso clicar duas vezes aqui, Controle C. E posso voltar ao meu estado de terror. Clique aqui, excluir Controle V vai colá-lo no mesmo lugar, mas simplesmente mais com aqui. Então estamos em 40. E se vamos mover isso, então temos o espaçamento de 20. E vamos verificar isso mais uma vez. Sim, ainda temos o espaçamento de 20. Então, se eu clicar em pré-visualização neste e rolar aqui, você pode ver que ainda temos este. Nós ainda temos o nosso efeito sobre os nossos botões. Ainda temos esse borrão de fundo quando rolamos para baixo, então tudo funciona bem. E finalmente aqui, você ainda pode ver que estes funcionam e eles funcionam bem. Só precisamos nos ajustar como fizemos com este texto. Temos de nos adaptar a todos estes outros textos. Então deixe-me fazer isso rapidamente. Mais uma vez, estamos em 16. Somos da mesma cor. Somos 20 deste lado, 20 deste lado. Então vamos fazer isso rapidamente. Eu vou pular aqui mesmo. E eu vou começar as coisas primeiro ajustado para 16, usar esta mesma posição de cor e bem aqui, então mudar 12, e então eu posso posicionar esta borda esquerda. Então basicamente eu tenho 20 aqui, 20 aqui. E eu posso saltar para dentro e ajustar este texto um pouco. Então vamos ver. Eu posso clicar fora e depois clicar aqui. Posso posicionar isto em 20. Então o que podemos ver, 12345 linhas de texto, 12345 linhas de texto. Então tente manter essa consistência se você não pode ouvir também. Então controle C neste estado para este texto, saltar dentro da data Horace, clique em Excluir, controle V para colá-lo em filmes logo abaixo. E mova isso para bater 20, assim. Em seguida, feche isso, volte para o estado padrão. Isso é bom. E finalmente, vamos passar para este. Então, mais uma vez, as primeiras coisas mudam primeiro para 16, esta cor. Volte para o painel Camadas, que 22 aqui, então 12 e, em seguida, extensão esta borda esquerda todo o caminho até aqui assim. Finalmente, vamos ajustar nosso texto em nossos desejos. Escolheu impressões digitais e muito mais. Então é 12345, o que é bom. Clique aqui e, em seguida, estenda isso para 20. Copie este texto e vá para a data da colheita. Em seguida, removeu o original, colando o novo, mova-o logo abaixo aqui. E Terry como ele simplesmente voltar para o seu estado padrão. E se apertarmos a pré-visualização agora e saltarmos aqui, você pode ver que a pré-visualização funciona muito bem com tudo isso. O que eu estou percebendo é que este círculo está se expandindo, então este círculo para baixo, você pode verificar. Se eu passar o mouse sobre e, em seguida, passar o mouse para trás, você pode ver que ele vai do círculo original para baixo para este círculo. Então o que podemos fazer é fechar este salto dentro do nosso projeto, mais uma vez, saltou para todos eles. As primeiras coisas que vou fazer primeiro porque ajustamos para pairar. Então eu vou voltar a pairar assim para todos eles. Então o que eu vou fazer aqui é pular dentro deste primeiro, máscara de elementos, círculo Controle C. Então voltar para os elementos do estado original, Mesquita Circle Control v. Então eu posso colá-lo aqui, deletado o antigo como este. E eu posso ver em dívida, meus elementos aqui são reduzidos, a obesidade em 0. Então este elemento vai ser 0 também. Então, agora que fizemos isso, podemos fazer isso por todos eles. Então vamos ver elementos de cartão quântico, círculo de Mohr Controle C, roupas, todos eles voltam para os elementos de estado padrão, controle de mesquita V, e excluir este velho Seroquel assim. Então agora as animações vão funcionar lindamente à medida que você se move. Vamos verificar rapidamente e ver se esses elementos estão em 0, eles estão. Portanto, não vamos vê-los bem antes de passar para a dívida pública mais elevada é. Então, mais uma vez, elementos chamados controle ver, voltar para os elementos de estado padrão, controle de mesquita V, e nós temos isso. Então, agora que cobrimos tudo isso, vamos voltar ao estado padrão que estamos. E vamos ver o que temos até agora. Então, apenas preste atenção ao círculo na parte inferior, você pode ver o quanto mais agradável esta animação lançada agora. Você pode brincar com a posição porque ela está na mesma posição tanto para este estado de horror quanto para o estado padrão. Então você pode brincar e ver o que você quer com ele. Veja bem aqui, eu realmente esqueci de mudar de posição para saber mais. Você pode ver como ele se move quando eu pairo. Então vamos voltar a este para o nosso estado do porto. E vamos mudar o texto aqui para 20. E essa é realmente a parte chata deste design responsivo é fazer todas essas mudanças e, em seguida, certificar-se de que eles funcionam em todas essas animações como eles fazem aqui. Então tudo funciona bem. Vamos passar para a próxima seção. Então, mais uma vez, porque não fizemos holandês na seção, altura. Ainda é o mesmo que era. Você pode ver simplesmente que ele ainda contém o mesmo espaçamento entre todos esses diferentes elementos. O que vou fazer aqui é muito simples. Então eu vou selecionar o barco destes. Vou posicioná-los na grelha. Então eu vou saltar para dentro da minha posição de texto minhas mensagens ou aqui mesmo. E então eu vou ajustar esse grupo de rolagem. Então eu vou ajustá-lo para aqui assim. E, basicamente, quando visualizamos, estou usando meu mouse para rolar para a esquerda e para a direita. E você pode ver como isso se parece. Então, basicamente, é isso. Isso é muito simples. E você pode, por exemplo, mostrar apenas um pouco. Deixa-me mostrar-te isso. Você pode mostrar só um pouquinho. Então, por exemplo, algo assim. E, em seguida, clique em pré-visualização apenas para mostrar às pessoas que, ok, há algo aqui que eu talvez possa clicar e rolar e ainda vai manter essa consistência entre todos esses elementos. Só temos essas falhas, por exemplo, esse número nove. Mas você também pode estender a dívida, por exemplo, para cobrir o todo, por exemplo, dois aqui, para a borda do conselho. Então, obviamente, você terá que explorar com tudo isso, mas agora nos posiciona para ouvir. Por isso, temos de nos adaptar a mais. A outra opção é adicionar um texto, por exemplo, rolar para a esquerda e para a direita, ou adicionar setas ou qualquer outra coisa. Mas você pode ver que com os desenvolvedores o que eles gostam de fazer. Por exemplo, eu posso adicionar seta para a esquerda aqui, eu posso adicionar seta para a direita aqui. E em vez de rolar para a esquerda e para a direita, eles podem clicar nessas setas para a esquerda e para a direita e alcançar basicamente o mesmo resultado. Vamos agora passar para a próxima seção e você pode ver o quão rápido você pode trabalhar com eles. Então, basicamente, o que eu posso fazer aqui é simplesmente ajustar minha imagem. Então vamos ver dois formulários. Talvez 52345 e você pode vê-lo se ajustando muito bem. Posso ajustar este texto ainda mais. Ou exemplo dois aqui para que eu possa alinhá-lo à minha grade. Tudo funciona bem e eu posso ajustar meu texto ainda mais. Posso clicar aqui para expandi-lo. E então o que temos aqui, então temos 40, podemos mover nosso botão para baixo para 40. Isso não estava em uma pilha ou originalmente. Então vamos mudar isso bem rápido. Então este está em uma pilha, mas o texto não está. Então eu vou clicar nisso. Vamos ver, ajustamos a largura da nossa imagem. Podemos organizá-lo um pouco. Eu fiz. E agora eu posso ir em frente e reorganizar meus textos. Então vamos com este. Eu posso clicar aqui, e como você pode ver, ele automaticamente expande myText, desculpe meu botão para baixo. Então o que eu vou fazer é basicamente usar esses dois elementos. Clique aqui para posicionar meus textos no centro e, finalmente, ajustar a largura do meu botão. Eu também posso copiar do acima, mas como você pode ver, é extremamente simples. Simplesmente garante que tem três colunas de largura e é basicamente isso. Então vamos voltar para o estado principal. Este clique na nossa pré-visualização, veja se isso funciona. E faz, você pode ver como isso se parece. Então, basicamente, tudo funciona como deveria aqui. Vamos agora passar para estes. E porque eles não têm nenhum efeito de horror sobre eles, exceto para os botões, eles vão ser muito fáceis de ajustar. Então o que eu vou fazer é simplesmente ajustar o descarte sólido C. Podemos ter que ser às seis, então 246. Então, no final desta linha. Deixe-me verificar mais uma vez. Então, 246. Posso mover isto para ficar aqui. Então para estar aos 30, como se estivesse lá em cima com todos esses outros elementos. E às vezes você tem que ampliar um pouco mais para ser mais preciso. Mas você pode ver que estamos alinhados com nossas linhas de grade. Finalmente, vou ajustar este para caber para que seja seis também. E você pode deixá-lo assim ou eu realmente gosto desta imagem. Então 368. Vamos ver. Eu só preciso mover minha imagem agora e, na verdade, eu não preciso expandir nada assim. Isso funciona. E o que podemos fazer é ajustar nossos textos porque você pode ver que nosso texto está se movendo bem ali. Então vamos ver o que podemos fazer. Podemos deixar todas essas coisas como estão, mas podemos, por exemplo, tornar as imagens menores. Vamos realmente estender nossos textos de. Então vamos ver, é rap. Você quer abrir? Vamos ver, talvez possamos realmente cortá-la. Vamos ver assim. Temos muito espaço entre nós? Talvez façamos. Portanto, há basicamente duas opções. Então eu estou olhando aqui para um está reduzindo o texto como eu fiz. Uma delas é reduzir o tamanho das nossas imagens. Mas porque ainda temos um botão aprender mais e você ainda vai levá-los para páginas adicionais para explorar essas opções, Vamos apenas reduzir o tamanho de nossos textos. Então eu vou, por exemplo, posicionar tudo isso aqui. E só para que eu possa ver o que isso diz, que eu possa reduzi-lo para três linhas de texto. Eu vou copiar esta palavra para que ela possa se adaptar sabiamente ao seu estilo de vida exigente. Vou cortá-la lá. E então clique aqui e certifique-se de que estou na mesma altura, 73. E agora vamos trabalhar nos nossos botões. Então, mais uma vez, vamos ver, em primeiro lugar, estamos em 40, então vamos ajustá-lo para o deserto. Então vamos ver, 123 vontade para o estado de horror em três, movido para o estado padrão. E é basicamente isso. Então eu vou bater Control-C, copiar dados Watson daqui e voltar para aqui, controle V. Vamos ver onde estamos e sua posição está lá. Vou remover este botão principal, usar o meu novo botão. E posição C em 40 aperte Controle C. Volte para o meu, desculpe, não precisamos apena 57. Design responsivo 2: Vamos agora seguir em frente e criar nosso próximo tamanho. E para fazer isso, em vez de fazer o que eu fiz primeiro. Então, em vez de copiar e colar abaixo, vou simplesmente controlar um D neste e colá-lo porque já fizemos essas alterações em nosso design. Então, mais uma vez, vamos começar e esta é a página inicial responsiva. Podemos criá-la como sujeira ou eu posso pular aqui mesmo. E digitando esse nome. Eu posso fazer o mesmo para isso, o que vai ser muito mais fácil para os desenvolvedores mais tarde entender qual deles é. Então a primeira coisa primeiro é 1024. Vamos fazer isso. Então, 1024. E a próxima coisa é, eu quero usar esses valores. Então 12305047 neste. Então, para ir 123050. E, finalmente, neste vai ser 47. Então, mais uma vez 305047. Então, entendeu. Finalmente, vamos em frente e fazer a mesma coisa que fizemos antes. Então eu vou mudar isso para aqui. Vou mover isto um pouco mais para perto daqui. Vou tirar isso do caminho por enquanto. Vou mover as minhas bandeiras para cá. Vou posicionar isto aqui e dizer-lhe como finalmente, vamos ajustar este bem rápido. Eu que agora vamos em frente e ajustar nossa navegação. Então eu vou mover papagaios bem aqui. E vamos ver, tudo isso funciona bem. Eu só vou me certificar que, por exemplo, eu estou em 40 aqui, então 1234, mas eu estou em 24. Todos esses outros itens, de um a 212. E finalmente você quer, então você já pode ver como isso é muito mais rápido do que no primeiro porque nós já temos este no lugar. Então agora vamos em frente e passar para a nossa seção de heróis, que obviamente vai nos levar muito tempo. Então o que eu vou fazer com este aqui é realmente ajustar como o meu texto se parece. Primeiro, vou clicar aqui, para ter certeza que está no centro assim. E então eu vou ter certeza que é em 48, então é muito menor do que era. Então eu vou ajustá-lo ligeiramente para ter certeza que vai toda a largura assim. Vou fazer o mesmo com as minhas outras mensagens. Então certifique-se de que é assim. Certifique-se de que está no centro. Certifica-te de que isto está no centro deles. E para fazer isso, basta selecionar todos eles. Clique aqui e certifique-se de que todos eles estão em dissidente. Próxima posição, todo este grupo de textos para o centro como este, por exemplo. E o que eu realmente vou fazer é me certificar de que eu movê-lo para cima. Então vamos ver, daqui, 123, talvez quatro, vamos ver como isso funciona. E eu posso, mesmo, porque isso está na pilha, como você pode ver, eu posso então ajustar. Então, se eu clicar aqui, vai movê-los. Eu não quero isso. Quero que seja assim. Então eu posso simplesmente ajustar minha pilha. Então, se eu segurar a tecla Shift, ela vai ajustar tudo. Então talvez possamos tê-lo na caixa de 24 discos. Vamos ver como isso se parece. Por enquanto, está tudo bem. Agora, vamos mover a nossa imagem. E primeiro, vamos mover o herói BG para se adaptar a aqui. Então, 1024, eu posso selecioná-lo e minha imagem posicioná-los no centro. E vamos ver o que posso fazer aqui. Então eu posso, por exemplo, mover isso para cima um pouco assim. Talvez eu possa reduzir a minha imagem um pouco mais. Talvez assim. E depois vou ter a certeza de que está no centro. - É. E talvez eu possa até colocar um pouco de compensação. Às vezes eu isso só para que ele botão, que este botão entre essas pessoas. Então, talvez algo assim. Acho que parece bem. Vou deixar isto como está por enquanto. Vamos ver, talvez eu possa empurrá-lo para baixo um pouco assim. Eu gosto de como isso parece. E vamos mais largura para atrasar a partir da nossa navegação superior. Então vamos agora lidar com Elementos Heróis. A mesma coisa, posicionou-o no centro. E agora eu posso simplesmente ajustar estes em bem, para que eu possa posicionar isso neste círculo. Não gosto de como isso parece. Talvez eu possa até mudar para lugares. Talvez eu possa posicionar isto aqui. Às vezes a sujeira pode ser, eu posso colocar minha linha aqui ou eu posso girá-la um pouco. Talvez colocar para fora e posicionar o meu círculo em algum lugar por aqui. Agora vamos mover a nossa forma. Então eu vou posicioná-lo aqui mesmo. E agora que não temos instruções, não importa. Você pode até ir em frente e estender se quiser. Mas vou deixá-la bem ali. Finalmente, para a nossa mesquita, vamos usar o herói BG, colhê-lo. Então 10-24, e, em seguida, usar o nosso círculo de heróis. Como isso. Vamos ver onde estamos. Então eu não gosto de disco rígido parece assim que eu acidentalmente já posicionado antes. Então vamos ver aqui RBG agora está bem aqui um círculo. Vamos nos certificar de que está morto no centro. E você também pode reposicionar o circulado para baixo um pouco se você quiser. Só assim, por exemplo, ele vai do centro do seu botão ou vai para algum lugar por aqui. Eu gosto de como isso parece. E porque está em uma mesquita, vai cortar bem ali. Então, não vai nos distrair de forma alguma. Eu gosto de como isso parece. Então vamos agora passar para este. Ainda vou posicionar isto num centro como este. Vou fazer com que isto seja assim. E agora precisamos fazer, fazer, precisamos fazer a mesma coisa que fizemos anteriormente? Então, mais uma vez, como podem ver, temos o mesmo espaçamento que tínhamos antes. Nós só precisamos saltar para dentro e agora ajustar a quatro colunas cena larga como fizemos antes com este. Então vamos fazer isso. E eu realmente não vou fazer nada direito aqui. Só vou posicionar isto numa linha de duas como esta. E talvez eu possa reduzir o tamanho deste. Vamos ver. Então vamos com, vamos ver algo assim. Você pode criar uma conta personalizada. E diz “Saiba mais”. Então, basicamente, é algo como nosso post no blog ou algo assim. Não vamos ajustar estes para que eu me certifique que este é, eu não sei, 30 ou 40. Então 1234. Vamos ver onde é isso. Então 40, eu gosto de como isso se parece com n. Mais uma vez, o que eu vou fazer aqui é basicamente fazer a mesma coisa que eu fiz antes. Então eu vou usar meus elementos. Vamos primeiro ver o que podemos fazer aqui até agora. Dívida de mistura imobiliária, estamos em quatro aqui. Então o que eu vou fazer é realmente usar este e este texto e eu vou deixar tudo o resto igual. Então vamos voltar para o estado padrão. Então este e este Controle C, e ir para o estado de horror, encontrá-los controle V, e então simplesmente remover os antigos daqui assim. E finalmente, vou me certificar de que estou aqui aos 40. Então, quando eu faço o Hummer, ele ainda está lá assim. Finalmente, o que vou fazer com o meu círculo é ajustado um pouco. Então eu vou ter certeza que vamos ver, duzentos, duzentos. Então eu vou posicionar para ser 20 e algo assim talvez. E aperte o Controle C para que eu possa copiá-lo. Em seguida, voltar para o meu estado padrão, saltar para dentro, abrir os elementos para cima. Então, onde estamos, elementos mesquita e foi para controlar V e remover meu velho círculo mais uma vez, porque esses elementos estão em 0, você não será capaz de vê-los. E antes de fazermos os outros, vamos testá-lo e ver como ele se parece. Então, como podem ver, isso parece muito bom. Isto ainda funciona bem. Isto parece muito bom. Isto funciona. Então, quando eu passar o mouse e para baixo, você pode ver que Learn More permanece exatamente na mesma posição. Estes elementos são os mesmos. E podemos até brincar com a posição desses três elementos. Mas como ele disse, vou deixá-los como estão. Então vamos agora passar para estes são os únicos. Então, vamos clicar em Ocultar disco. Isso é mais aqui. E vamos ver onde estamos. Então estamos na linha realmente atinge Grande. Então vamos ajustar a dívida para quatro colunas de largura como esta. Mais uma vez, vamos ter três filas de patos, o que é ótimo porque termina bem aqui. Vou cortá-la. Certifique-se de que é a altura. E vamos ver. O que posso fazer aqui. Primeiro de tudo, é a posição deste. Agora, se eu ficar aqui, você pode ver que estamos em 40 aqui. Então vamos fazer o mesmo para esta vez que foram anti 30 no garfo. E vamos fazer o mesmo com as nossas mensagens. Então vamos ver 234. Então, lá temos. Agora o que eu vou fazer é basicamente a mesma coisa com este aqui, mas antes que eu faça, eu vou pular aqui mesmo. Vamos ver onde estamos. Então vamos para o estado de horror. Ajuste isso 1234 assim. Irei então avançar sobre estes elementos. Então posicione este aqui, talvez este aqui, este aqui. Vamos ver. Vou posicionar isto para baixo. E pode fazer o mesmo com este porque é muito mais rápido do que antes, ou realmente saber o que eu queria fazer. Então 1234, e eu vou mover isso para ser em 40 também. Então é basicamente isso. E a última coisa que quero fazer é saltar para dentro daqui baseado nesse círculo, posicioná-lo bem aqui. Então, se você se lembrar de 12x, removerei meu círculo antigo, apertarei Controle C e pularei de volta para o meu estado padrão. Volte para a minha mesquita de elementos Controle V, eu removo o antigo. E agora vamos fechar tudo isso. Vamos testá-lo. Veja como se parece. Então estamos no original. Tudo parece bom. Tudo parece como deveria bem aqui. Isso pode verificar rapidamente e o espaçamento à direita para aquele círculo. Parece bem. Esta animação funciona muito bem. Então eu realmente gosto de como isso acabou e você pode ver que é muito mais rápido desta vez porque nós já temos alguns desses elementos no lugar. Já sabemos algumas das coisas que queremos fazer. Por exemplo, aqui vamos cortá-lo em três. Então você pode ver que você tem a opção de personalizar seu carrinho mais na miséria dat vamos ver, eu posso fazer isso assim, ou eu posso até mesmo posicionar estes como este. Cartões de débito tão precisos, talvez seja ainda melhor do que era. Vamos ver. Vamos para o 44. Mova isto para 40 também. Então, assim, e é basicamente isso. Vamos agora ir em frente e ajustar ao estado Horace , bem como a partir da posição de inverno estes aqui. Vou mover esses elementos assim. Mova isso para cima e eu vou mover isso, por exemplo aqui. Vou me ajustar e não gostar. Então eu vou realmente mudar-nos um pouco para lá. E depois vou certificar-me de que estou a 40. Então 1234. O que tínhamos aqui, deixe-me voltar e verificar porque esqueci o estado padrão. Deixe-me realmente copiar meu texto é muito mais rápido. Pire o Controle V ali, nós o temos. Volte para aqui, então 4040 em todos os lugares. E finalmente, vamos fazer o mesmo para este círculo. Então eu vou pular aqui e dar. Vamos ver, de fato, não, vamos voltar para aqui. Elementos A, máscara, círculo de Controle C. Eu vou para este. Aqui, controle V. E simplesmente mantenha a tecla Shift e a tecla de seta para a direita para posicionar no lugar. Eu vou excluir o antigo, certifica-se de que eu estou alinhado e, em seguida, 22 o controle esquerdo C. Então eu posso voltar para o meu estado padrão, estreitar, comportá-lo, abri-lo, elementos mesquita ou desenhar V para colá-lo no lugar. Remova o antigo. E Terry tinha, finalmente, vamos desktop todos os três. Vamos ver como funcionam todos. Então, se eu rolar aqui, você pode ver que isso funciona muito bem. Se você acha que neste momento este texto está ficando um pouco grande demais, então você pode reduzi-lo. Mas eu acho que nós vamos reduzi-lo na próxima etapa quando nós realmente chegar ao tamanho do tablet. Mas acho que por enquanto funciona bem. Vamos verificar isso. Tudo isso parece muito legal. E lembre-se, porque vamos passar para os estágios do tablet, não vamos ter essa animação mais tarde, que vai nos poupar muito tempo porque você não pode passar o mouse em tablets data porque você não usar o mouse em um tablet, você usa o dedo. Então nós vamos ter estes como um ponto de toque. Então, tudo certo, você vê bem aqui vai ser um ponto de toque, na verdade. Então nós vamos, como você os vê agora, eles vão ficar assim. Então você pode simplesmente tocar em seu mais ou em todo este cartão e, em seguida, ir para aprender mais. Não é editar tão rápido. Desculpe, mais uma vez, posicionado em mensagens estão bem aqui. Mova este texto aqui. Mova esta seção inteira por aqui. E então podemos cortá-la, por exemplo, para ouvir o que moveu todo o fundo. Agora, quando eu clicar aqui, vá até o fim, testado. Dá para ver como foi rápido. Então, agora podemos passar para a próxima seção. Porque quando você faz essas coisas, você se encontra trabalhando o tempo todo com os mesmos elementos. Então fique muito bem Ed para ler todos esses elementos diferentes. Então o que podemos fazer aqui é realmente fazer algo um pouco diferente. Talvez possamos fazer nesta imagem em cima, mas eu não vou fazer isso nesta fase. Farei isso em fases posteriores, quando chegarmos ao próximo estado. Por enquanto, vou deixar como está agora. Então vamos ver, talvez eu possa ser às cinco mais uma vez. Então 245, vamos reduzir o tamanho da nossa imagem assim. Então 245, eu acho que funciona bem, talvez alguém possa empurrá-lo um pouco. Vamos ver. Talvez eu possa posicionar um pouco para algo assim. Acho que funciona bem. Vou então simplesmente mover minha mensagem. Por alguma razão. Eu tenho que selecioná-lo assim. Ele não vai reconhecê-lo. Então vamos ver onde estamos e onde estamos. E o que eu posso fazer aqui é simplesmente chegou meu texto ao redor para que eu possa basear e vamos ver, eu posso clicar neste texto expandido. E porque estamos dentro, vamos ver, aqui, estamos em uma pilha, tudo custa bem. A única coisa que o cara gosta é esse texto. Então vamos aumentar o espaçamento de linhas para, por exemplo, 74, este título. Sim, parece muito melhor. Agora selecione os dois. Clique aqui. Mas não, eu não quero que ele mude minha mensagem. Eu só queria mudar isso. Então agora eu fui testado para fora o arejamento funciona como deveria. Você também pode expandir esta imagem, se quiser, para ocupar seis colunas. Assim, e agora simplesmente moveu um texto de volta para aqui. Ao fazer isso, certifique-se de que você tem 30 anos. Então amplie um pouco se começar a brincar com você. Então, aqui mesmo. Então, se você é como isso parece, você pode deixá-lo lá. Se você não fizer isso, você pode seguir em frente de laticínios também pode aumentar o espaçamento de linha para isso. Mas só por uma questão de tempo, quero que seja assim porque acho que funciona bem o suficiente. Agora vamos mover estes dois para cá. Mais uma vez. Certifique-se que é 6246 bem aqui. Certifique-se de fazer o mesmo para este 1s 246. E basicamente você não precisa fazer nada, mas R simplesmente os transferirá para aqui. Então, 12, certifique-se que tenho 20 anos. Assim, vamos ver onde estamos com o botão. Ainda estamos em 40, então podemos deixar que suas imagens pareçam bem, então agora podemos passar para a próxima. Obviamente, nas próximas etapas vamos enrolar estes e vamos posicioná-los para serem mais largos, mas você vai ver isso um pouco mais tarde. Finalmente, vamos brincar com estes para que eu possa clicar aqui. E mais uma vez, precisamos fazê-las ter quatro colunas de largura. Então 1234. E você pode ver o quão inteligente eles estão se ajustando ao nosso layout. Vamos ver se estamos em 30, mas preciso ajustar meu texto dentro. Então vamos ver uma rotina AGORA. Mova tudo para aqui. Então, 20. E eu vou, obviamente, mover este r para o fundo para me dar um pouco mais de espaço. Vamos ver o que eu posso fazer aqui pela excelência e pronto para o Prêmio Excelência em, vamos ver, talvez para prêmio de excelência bancária para 2021. Como aquele revestido. E vamos ver, estamos em 20, o que é bom. Mais uma vez, vamos ter aqui três linhas de texto. O que eu vou fazer, em primeiro lugar, é selecionar tudo isso exceto para o Saiba Mais obviamente, controlar, ver, voltar para o meu horror, estado. Controle v. Eu vou excluir tudo, exceto para o aprender mais controlado, excluído e sua posição hereditária. E aqui eu vou ter certeza que é um 20, o que é, e está tudo bem. Posso simplesmente passar para o próximo. Então eu posso ir aqui. Estamos em 30, o que é bom. Vamos verificar isso. Está alinhado à nossa grelha, como podem ver em ambos os lados. Então, vamos agora trabalhar nisso. Então estamos em quatro, assim. Vou clicar duas vezes para ajustar minha imagem um pouco. Posicione estes dois níveis centro booleano. Então isso é bom, isso é bom. Vou simplesmente ajustar isto através da nossa iniciativa. Então simplesmente usou esta última palavra aqui. Estamos em 20, o que é bom. Então, o que vou fazer é, mais uma vez, selecionar tudo, exceto o Saiba mais. Volte para o estado Horace e você não pode ver nisso é o que eu continuo falando sobre o quanto mais rápido isso é quando você já tem esses elementos, você simplesmente segue em frente e remove-os. E onde você precisa de um Justin, onde você precisa e tudo funciona como deveria. Então, 20, está tudo bem. Você também pode posicionar este 20 para cima se você quiser. Então talvez possamos fazer isso porque estamos baixos aqui e estamos realmente altos aqui. Então, dentro do nosso estado padrão, e nós podemos simplesmente saltar aqui, 12. Então estamos agora em 20 aqui. Vamos ver. Estamos em Harvard. Isso é bom. Posso clicar duas vezes 1-2, anexá-lo, voltar ao meu estado padrão 12. Como estamos em um estado padrão aqui, podemos ir para o pairar 1-2, e é basicamente isso. Vá para o padrão. Você pode ver como ele se parece e nós vamos testá-lo um pouco mais tarde. Vamos agora rapidamente terminar um terceiro. Só quero verificar as coisas aqui. Sim, tudo bem. Você também pode posicionar este texto e você pode brincar e ver o que funciona melhor para o seu layout. Mas eu acho que isso vai funcionar muito bem por enquanto. O que vamos ver. Isto está correcto? Então vamos ver 294 e seu peso. Algo não está certo ou isso aqui. Então vamos ver. Sim, não é grande o suficiente aqui. Então, vou expandi-lo até aqui. Vou expandir a minha imagem também para ouvir. E acho que vai ficar tudo bem. E agora vamos testar isso. Vamos nos certificar de que estamos no estado padrão, que estamos, que estamos aqui também. Então vamos ver. A largura ainda é 90, o peso é 289. Então nove. Agora, está tudo bem. Vamos ver se temos 30, aqui estamos. Crf, temos 30 aqui, quem somos, o que é bom. E vamos ver, este é 90 também. Então agora tudo deve funcionar. Sim, não, está tudo bem. Então você obviamente vai precisar ir em frente e verificar todas essas coisas. Então o que eu vou fazer é voltar para o estado de horror para este número dois e mudar isso para dois nove anos, mudando minha imagem para 29, assim. E agora isso deve ser bom entre os estados. Você, tudo funciona como deveria. Finalmente, vamos em frente e mudar este último. Então, alinhando com a nossa rede, posso deixá-la aqui. Então o que eu posso fazer é, na verdade, vamos ver onde estamos. Então Yar 24 daqui. Para que eu possa alinhar a 20 daqui. E então vamos ver. Talvez eu possa copiar e colar a posição deste texto Googlers para ouvir e colar isso. Então vamos ver. Vou simplesmente usar o texto aqui. Vou certificar-me de que está aqui só para saber onde está a posição. Então eu vou copiar neste texto deletado. Volte aqui com base no rebanho leiteiro. E o que eu quero fazer a seguir é, mais uma vez, ter certeza que tenho três anos. Se quiser trabalhar em Nova Iorque e no ambiente gnómico. Vamos ver minha rota e fazer algum tempo isso. Sim. Então, 20 aqui, vamos verificar. Sim, tudo bem. E mais uma vez, vou simplesmente copiar e colar tudo, exceto o Saiba mais. Pule para dentro daqui. Copie e cole, exclua tudo, exceto a opção Saiba mais posicionada ou Saiba mais na parte superior. E eu só quero ter certeza para 90, tudo bem. Para 90, tudo bem. Então está tudo bem com este. E vamos ver. Estou aqui em Howard e queria estar no estado padrão. No estado padrão. Estou aqui no estado padrão, o que é ótimo garoto premium. Porque mais uma vez, eu só quero ter certeza de que tudo funciona como deveria. Eu realmente não gosto muito deste layout. Então talvez eu possa até reduzir o tamanho deste texto para que seja 24, talvez devesse ser um adolescente. Então leva um pouco menos de espaço aqui. Então, isso é realmente com você e como você quer se ajustar para todos eles. E isso é bom. Porque você pode ver como funciona muito bem. Então tudo funciona como deveria. Talvez possamos até um pouquinho. E só esta imagem, algo assim. Talvez, talvez um pouco menos para ouvir. Controle C indo para o pairar até eu ler este. E acho que funciona muito melhor. Então estado padrão Horace estado, tudo funciona como deveria. Ou vai gostar que o layout distante de Houghton está acabando por ser. Então vamos agora passar para a próxima seção. E na próxima seção, vamos rolar um pouco para baixo. Porque estamos aqui com a nossa infra-estrutura. E o que ele pode fazer é simplesmente fazer isso para ajustar todos esses elementos e , em seguida, clique duas vezes e reorganizá-los apenas um pouco como célula. E posicionar isso aqui, e eu posso ter certeza de que isso está em algum lugar por aqui. Não pode estar no centro no estado D, mas pode ser em um estágio posterior. Desculpe. Desculpe por isso. Assim, pode ser numa fase posterior, mas não pode ser nesta fase. Então, na fase posterior, talvez possamos remover o texto e apenas ter os ícones em vez disso, o que vai mostrar nosso layout muito melhor do que é agora. O que vou fazer a seguir é ajustar estes. Então, se você vê que temos 246. Então talvez possamos ter três inline e, em seguida, três em linha abaixo para que possamos ajustar isso. Então o que eu posso fazer é clicar duas vezes no meu rpart e estender até o fim. Então eu posso clicar aqui, estender meu rodapé BG. Assim como me dá um pouco mais de espaço para brincar. Eu vou fazer é alinhar isso aqui. Eu ainda estou usando a mesma altura daqui até a faixa de informação, então não vai mudar. Mas eu só vou reorganizar alguns desses. Então eu vou posicionar isso aqui, ter certeza que está em um centroide de distância. E eu vou usar contas, cartões de gramado na mesma linha, investir Digital, outros links na outra linha. Então, podemos ver onde estamos aqui, estamos em 100, para que possamos posicioná-los em 100 também. Como este. Então nos dá espaço suficiente. Não está muito desordenado porque estamos em 12. Então temos uma grade de 12 colunas. Podemos posicioná-los como fizemos com estes. Então cada um desses grupos de textos vai ocupar quatro colunas. Ele não precisa, mas ainda vai ocupar quatro colunas apenas para que nos dê espaço suficiente para reproduzir e ele usa espaço suficiente para ler este texto um pouco melhor. E é basicamente isso. Eu vou me certificar de que isso é 100 também. Vamos ver 100. E verei o que posso fazer aqui. Então nós podemos, por exemplo, posicionar isso para ser, eu não preciso que ele seja 100. Vamos ver, talvez possa ser 40. Então, onde está o meu meio, 0.123. Lá está ele. E eu simplesmente mover meu mouse para ajustar à altura desta posição de texto aqui e hábitos Terry. Então, como você pode ver, rodapé ainda parece limpo como ele é bem aqui. Ainda é legível, ainda é respirável, ainda tem espaço suficiente. Mas agora estamos apenas posicionando, dissuadir. Você pode imaginar em uma tela menor, você pode fazer algo um pouco diferente. Você pode rolar para a esquerda e para a direita. Você pode posicioná-los em dois blocos. Então contas e gramados vão estar um ao lado do outro. Cartões e investidores vão cair e b1 ao lado do outro. Finalmente, links digitais e outros estão indo para baixo ou você pode ir para o outro caminho. Você pode criá-los como um ponto de passo separado e você pode , em seguida, expandir e mostrar isso e ver como isso vai se parecer. Nós estamos realmente indo para explorar com alguns desses layouts são um pouco mais tarde, uma vez que realmente chegar ao tablet e tamanhos de fonte. Mas por enquanto, eu acho que isso está funcionando muito bem e eu acho que parece muito bem. Vamos rever rapidamente mais uma vez e garantir até mesmo falar. Então aqui estamos no login. Tudo funciona bem. E lembre-se que ainda estamos em um desktop, apenas um desktop realmente pequeno viu talvez sobre o pequeno laptop como algo como 12 polegadas ou até menos. Então ainda temos a opção de usar um mouse. Então tudo funciona como deveria. Tudo é agradável e suave. Ainda podemos rolar para a esquerda e para a direita. Mais uma vez, você pode usar as setas que eu falei. E você pode, por exemplo, neste caso, posicioná-los em algum lugar por aqui e aqui, digamos que eles são realmente pequenos. Ou você pode escrever uma descrição, por exemplo, clicar à esquerda e à direita ou rolar para a esquerda e para a direita posicionadas na descrição aqui. Para este, ainda não gosto deste texto. Então, talvez no seu caso, talvez você possa praticar e reduzir o tamanho deste texto apenas para que você possa ter um resultado um pouco diferente que eu fiz e ver como isso funciona. Então ele vai ocupar menos espaço vertical. Então, no meu caso, aqui ainda temos essa taxa de procura sem muita mudança. Últimas Notícias ou falta como isso está acabando por ser assim que é bom. Finalmente, novo banco. Então tudo isso parece ótimo e agora você pode ver a pasta. Isso nos dá muito mais espaço para respirar e tudo está parecendo agradável e legível. Então é isso para este vídeo. Vejo-te no próximo vídeo. Vamos enfrentar dispositivos médios ou tablets. E nós vamos fazer um monte de mudanças diferentes porque mais uma vez, estamos indo de telas baseadas em clique. tão grandes e grandes, desktops menores e, finalmente, desktops muito mais lentos e menores, como por exemplo, laptops e assim por diante. E então estamos passando para um tablet dispositivos e dispositivos de formulário, que são dispositivos tocáveis onde você não tem o mouse, você está apenas usando os dedos para navegar ao redor. E é aí que está a diferença. E é por isso que precisamos nos ajustar a todas essas mudanças diferentes. Então, vemo-nos lá. 58. Design responsivo 3: Vamos agora seguir em frente e projetar o tamanho do nosso tablet. E para fazer o mesmo de sempre, vou bater no controle. D vai mais uma vez, nós já projetamos este. E você pode ver que uma identificação de lugar bem aqui, eu vou simplesmente mais sagacidade e baixo estão bem aqui. Então 70 cena, como com todas essas outras. Embora clique aqui para controlar C, Então eu posso copiá-lo localmente caixa aqui. Vou remover o Stokes indevido bom controle VK para a besta. E agora podemos começar ajustando nossos tamanhos para esses. Então você pode ver 76, oito é a largura do nosso solo arbóreo. Mudou aos primeiros 76 e oito. E agora você pode ver aqui que temos oito colunas. Então eu vou mudar isso primeiro. Então vamos pular dentro de mim, pegar II colunas. E vocês podem ver que passamos por isso para 296042, sólidos mudam na dívida. Então, mais uma vez. Vamos ver 8296042296042. Vamos ver 602942. É o lema do verificador sem fio 1. Então, 8296042. É por isso. Agora vamos em frente e começar a ajustar DCE. Primeiras coisas para nós, porque agora estamos em um tablet, estamos começando a ajustar alguns desses elementos e fazer alguns pontos de toque. Então, primeiro as coisas, vou ajustar este bem rápido. Como o pai, vou saltar para dentro posicionar as minhas bandeiras aqui. E então o que eu vou fazer é clicar duas vezes em insight e excluir MyText porque eu só preciso do meu ícone. Posso então desagrupar bits. Posso fazer o mesmo pela minha localização. Eu posso remover minha localização, e eu posso simplesmente zoom em muito perto, ajustar meu ícone para aqui. Eu posso me posicionar para negócios aqui, apenas um pouco de OK, você tem um pouco mais de espaço. E posso posicionar o meu ícone aqui. Você também pode brincar com esses elementos. Por exemplo, posicione para alocação de telefone aqui. Mas só por uma questão de consistência, vamos posicionar onde estava. Agora vamos seguir em frente. E eu vou mudar isso para cá. E o que eu vou fazer para a navegação principal na verdade é que eu vou desagrupar este componente. E um jeito antigo. É aqui. - Sim. Você é um hóquei, o que é confuso. Então o que eu vou fazer na verdade é desagrupá-lo como um componente. Então nós não vamos ter tudo isso porque nós vamos criá-lo para ser um componente separado. Então, eu vou clicar com o botão direito do mouse em Ungroup componente. Mas antes que eu o faça, vamos primeiro movê-lo para dentro. Então não está mexendo com o nosso espaçamento. Agora posso desagrupá-lo para que não saia do nosso aeroporto. Então, agora que o temos, vou torná-lo um monótono. Então, chame-o para mim agora mais uma vez, você pode chamá-lo de um tablet ou como você quiser. Então, seu núcleo, por exemplo, toque na guia nav principal para que saibamos que é para os tablets e é para os dispositivos móveis. Então o que eu vou fazer neste é realmente criar dois estados. Um que é estável, N1, que não é. Vou esconder o meu herói. Apenas resolvido, podemos muito bem focado neste. O que eu vou fazer é criar dois estados basicamente. E eu vou começar com o primeiro estado, que é este estado padrão. Então eu vou duplicar este nav BG, e eu vou esconder meu fundo como este. E então eu vou, por exemplo, esconder este em vez disso, mostrar este. Então só mostrei este plano de fundo, estendido todo o caminho para baixo, apenas para que eu possa ter o meu original para que eu possa ver onde ele deve ir e quais são as dimensões e assim por diante. Então deixe-me escondê-lo rapidamente para que eu vou estender este e inferior um pouco mais. E o que eu vou fazer é usar meus itens de navegação, posicioná-los aqui mesmo. E eu posso organizá-los um pouco para que eu possa colocá-los em uma pilha. Eu posso clicar assim. Você pode ver que eles são bem organizados. Posso selecionar todo o meu texto, certificar-me de que está alinhado à esquerda assim. Certifica-te de que está alinhado à esquerda assim. E eu posso clicar e estender apenas neste. Ou posso segurar Shift e extensão em tudo isso. Então, por exemplo, que seja em 40, apenas classificados. Temos apenas um pouco mais de espaço para os nossos pontos de toque. Então você pode imaginar que vamos incluir um ícone em apenas um segundo. Vamos posicioná-lo aqui mesmo. O que você também pode fazer é posicioná-los em ordem ou em linha. Então vamos ver, temos 24 ou cinco. Talvez você possa colocar um ao lado do outro. Então x3 nesta linha, para esta linha. Mas apenas por causa da consistência e pelo mais simples, eu vou apenas posicioná-lo e deixá-lo assim. Então vamos ver, estamos em 36, vou posicioná-lo em 40. Vamos ver. Sim, acho que vai ficar bem. Então vamos ver 1234. E eu vou usar o meu botão. Mas antes disso, vou apertar o controle D. Só para tomar um café, vou usar esta posição de cópia e todo o caminho para baixo assim, certificar-me de que está alinhado com as minhas mensagens. Então vamos ver onde está a minha mensagem. É às 20. Então, posição para ser 12, assim. E vejamos, talvez possamos nos posicionar para 40 como todos esses outros itens. E finalmente, vou estender isso até aqui e simplesmente aumentar a altura para 40. Então, se eu usar minha calculadora, que é simplesmente a maneira mais fácil de fazer isso e trazê-lo de volta desta tela para que você possa ver que a altura atualmente é 539. Então 539, você pode adicionar 40 porque queremos movê-lo para baixo assim. 579. Esta é obviamente matemática muito simples, mas só assim eu quero mostrar que você pode usar essas ferramentas básicas como calcular áreas para melhorar suas chances de ser um pouco mais preciso e para melhorar o seu velocidade só um pouquinho. Então, mais uma vez, 579 é o nosso alvo para a altura como esta. E porque manteve o espaçamento do disco, então 50 bem aqui. E vamos ver o que é aqui. Então estamos em 50, o mesmo. Vamos para este padrão. Estamos em 50, e se formos chegamos aqui, estamos em 50 ainda estamos deixando o mesmo espaçamento. Estamos usando esses mesmos números para alcançar esses objetivos. Então o que eu vou fazer basicamente é misturar dívidas. Eu tenho meu botão de login, que é este desagrupado. Então eu vou selecionar este desagrupar porque lembre-se, nós não temos nenhum efeito sobre o mouse. Então eu só vou ter certeza que é uma pasta e não um botão real com o mouse, porque mais uma vez, nós não temos nenhum pairar. Esta é a versão tablet. Em seguida, vou desagrupar isso também porque eu só quero criar o meu ícone de menu aqui. Então, para fazer isso, eu vou simplesmente usar esta altura. Então eu deletarei isso. Aqui está. Controle D. Vou chamar esta linha de menu, por exemplo. E vamos ver, porque este é 60, talvez a segunda posição a ser em dez. Vamos esconder isso por um segundo. Vamos ver como isso se parece. Eu não gosto disso. Acho que é muito grande. Então talvez possamos fazer cinco. Acho que é muito melhor. Também para a largura que eu posso posicionar. Será aqui como esse hábito do Derek. E agora o que eu posso fazer é trazer meu botão de volta, bater para, por exemplo, no meu teclado para baixar a obesidade para 40 ou três, só para que eu possa ver o espaçamento para a altura, como isso vai funcionar. Então deixe-me apertar o controle D para duplicar minha posição de linha aqui mod dez, Control D posicioná-lo aqui, movê-lo para dez. Então agora temos dez e temos dez. Eu posso posicionar a dose três, ter certeza que eles estão no centro assim, e ver como eles se parecem em relação ao meu logotipo. Eu sou os dois grandes, eles são muito pequenos? Eu também posso clicar aqui para entrar no modo de visualização completa. E eu acho que, por exemplo, talvez possamos reduzir o tamanho apenas um pouco entre essas linhas para algo como oito, por exemplo. E obviamente movê-lo um pouco mais para a direita também. Então vamos agora em frente e fazer isso. Deixe-me fechar isto. Então, mais uma vez, eu posso clicar aqui 12. Então, mais maneiras de ser um encontro. Clique neste último 112 filmes para ser um Tate, trazer meu botão BG de volta porque eu só deixei lá por causa espaçamento. E eu também vou mais largura aqui para alinhar com a minha posição Botão original. Eu não consegui nenhum parece muito melhor, mas vamos em frente, clique na visualização é que você pode ver que parece muito melhor. O que eu não gosto agora é da largura dessas linhas. Então talvez eu possa reduzir um pouco a largura, mas lembre-se, esta é a largura da nossa coluna. Então talvez possamos deixar o desafio ou talvez possamos apenas apertá-lo um pouco mais. Então estamos em 60 de maio, R3 pode estar em 50. E eu realmente gosto de como isso parece um toque. Agora está começando a precisar de muito mais ovelhas. Então vamos agrupar estes. Agora posso remover este porque não preciso mais dele. E vamos chamar isso de algo como se eu puder cardápio, eu posso. Ou menu principal. Se eu puder soletrar corretamente assim. E o que eu quero fazer é apertar Control K porque eu quero criar um componente a partir dele, porque este é o estado padrão e você precisa mostrar às pessoas quando eles clicaram em algo o que vai acontecer. Então agora vamos criar o estado clicado. Vou chamá-lo clicado ou um toque. Toque nele como você quiser chamá-lo, é realmente tudo com você. E o que eu quero fazer neste aqui é mostrar o que vai acontecer quando eles clicarem lá dentro. Então o que eu vou fazer é clicar neste primeiro, abaixá-lo para o centro, assim. Clique neste último, posicione-o até aqui. Eu também vou voltar para o meu estado padrão apenas para ter certeza de que eles são ordenados corretamente. Então este vai ser o terceiro, assim. Este vai ser o primeiro. Então agora, quando eu for para meus estados de tabulação, movê-lo para cima, movê-lo para baixo. Então, tudo está funcionando corretamente. Mas só para ter certeza de que posso excluir isso, adicione uma nova guia de qualidade de estado. E agora eu posso começar a trabalhar porque eles são ordenados corretamente. Isso é extremamente importante, obviamente por causa do redimensionamento responsivo mais tarde e também para a animação automática porque queremos ter certeza de que esta função está funcionando. Bem. O que eu vou fazer é girar isso. Então, por exemplo, eu posso girar meu primeiro para algo assim. Então 45 graus. E eu posso girar meu último para o outro lado, então menos 45 graus. E eu também vou clicar em Mate do meio um e trazê-lo todo o caminho dentro Então eu estou segurando Alt enquanto eu estou fazendo isso, para ouvir apenas um dissidente, para criar um pequeno círculo agradável. Então, para esconder isso, Anders, você pode ver o que temos, basicamente uma elipse, não apenas o Rayleigh, chamado. Então aqui está como ele vai parecer uma vez que é clicado. Então, aí está. Então, agora que concluímos isso, vamos rapidamente em frente e verificar se este x é muito grande. Eu não acho que seja. Acho que parece bem. Então, agora vamos em frente e criar essa guia de navegação média como um componente em si. Então o que eu vou fazer é trazer este original de volta assim. E eu vou esconder todos esses elementos adicionais. Então isso, vamos trazer isso de volta para o estado padrão. Portanto, há basicamente duas maneiras de fazer isso. Você pode fazer assim. Então você pode posicionar isso onde ele está bem aqui. E você pode, por exemplo, usar um guia. Mas eu não vou fazer isso. Basicamente, vou usar uma máscara para esta de baixo. Então, como isso vai funcionar, você pode simplesmente mover isso todo o caminho até aqui, por exemplo, porque não precisamos mais de um seletor, podemos removê-lo. Vou mover o meu ícone principal e mover isto para baixo assim. Assim como. Então, basicamente, eu vou ter o meu nav b, g, que é este aqui. Eu vou ter meus itens, meu botão de login, e este nav BG aqui em baixo. E o que eu vou fazer é duplicar isso agora BG mais uma vez. Eu sei que é complicado, mas vai fazer muito sentido em apenas um segundo. Aperte o controle D. Vou posicioná-lo até aqui. Então eu vou selecionar esses três. Então isso, isso e esse controle de turno M, para que eu possa mascará-los. E basicamente o que eu posso fazer nesta mesquita ponto é que eu posso fechar isso. Então eu posso localizar minha máscara e eu posso fechá-la aqui. Então o que eu posso fazer é basicamente reduzir o tamanho deste aqui, desculpe, não o tamanho, mas a obesidade porque nós não precisamos vê-lo obviamente. E então uma vez que o passo do usuário, este vai desaparecer. Então, vamos criar rapidamente nosso componente. Então pressione Control K. Este é o estado padrão. Vamos criar um novo estado, chamá-lo de toque. E dentro da torneira, o que vamos fazer é basicamente ir para nosso nav máscara BG e estendê-lo para que ele chegue a este ponto. Então você pode até ir em frente e verificar. Então este é 579 de altura. Eu posso clicar ali mesmo para ir para o 579, assim, só para ter certeza de que temos a mesma altura. E este nav BG vai reduzir em tamanho assim. E este ícone do menu principal vai para a guia. Então agora vamos em frente e protótipo de tudo isso. Então vamos para o protótipo. Mais uma vez, uma vez que os usuários clicam nisso, vamos para o estado de toque. Mas precisamos criar um ponto de tabulação, na verdade. Então vamos em frente e fazer isso. Vamos voltar ao projeto. Por isso, não vamos fazer isto. Então vamos criar um ponto de tabulação. Parecia que fizemos com o logotipo na navegação original, se lembrar. Então vamos trazer esses dois aqui. Vamos chamar esse ponto de passo assim. Certifique-se de que você não vê nada para não sentir, não derrame. Deixe-me apenas posicionado é para o centro. Então remova os dois. Vamos voltar. Vamos ao protótipo. Então, vou selecionar o meu ponto de tabulação onde ele está. Aqui está, ainda temos um ponto de logótipo aqui muito vagamente. Não precisa dele agora, mas você vai precisar dele se você quiser projetar todas essas outras páginas. Então vamos deixar isso aí por enquanto. Então, mais uma vez, se quiser, não pode fazer isso. Vou usar este clique aqui. Então, vamos escolher o estado da guia. Como isso. Vamos usar o Easy and out. Ou você pode usar algo como snap. Então ele vai se encaixar na posição. Vá com fácil agora para ver como isso funciona como ponto zero, digamos seis. Vamos testá-lo. Agora vamos para o estado da guia. Mais uma vez, clique no ponto DAP. Podemos ir para o estado padrão fácil e fora 0.06. E vamos ver como isso funciona. Então, vamos rapidamente para o Estado Padrão. Clique em Visualizar. Vou ampliar isso para que você possa ver melhor. Então, quando você clica lá, você pode ver que temos esta pequena animação agradável. E tudo está se expandindo bem. Isto está a reduzir a obesidade, por isso está a crescer fora do caminho. E isso está mostrando dívida arejando. Ele deveria. Ainda temos aquela bela sombra de fundo ao redor. Então eu realmente gosto de como isso se parece. Tudo está como deveria. Então, só mais uma coisa. E eu pulo bem aqui para este estreito BG. Você pode ver que temos borrão de fundo de sombra. Aqui. Ainda temos sombra e borrão de fundo, mas a obesidade está em 0. Então eu não gosto de como isso parece. Então talvez possamos ir de, vejamos, talvez possamos trazer isso de volta, na verdade. Então vamos ver, estamos na phi 79 no original. Então vamos mudar de dívida. Podemos ir até aqui. Estamos em 0 Bay City. Vamos para o estado da guia. Altere isso para 100 e altere-o para 579. Como isso. Então, ele está realmente expandindo com o resto do nosso projeto. Então vamos ver, isso é em 0. Vamos testá-lo mais uma vez porque menos tempo você não pode ver nesta sombra de fundo. Então, quando eu clicar aqui, e agora você pode ver a sombra de fundo e ela está desaparecendo daqui. E você pode ver esta pequena animação agradável para o nosso ícone mudando bem. Tudo parece como deveria. Eu realmente gostei dessa animação e ainda temos esse pequeno estado drop-down agradável no qual podemos trabalhar. Agora o que podemos fazer mais tarde é obviamente usar este componente e adaptado para vários outros tamanhos. E ainda temos esse tamanho para trabalhar. Então, vou mostrar-lhe um pouco mais tarde como você pode fazer isso. Mas, por enquanto, vamos passar rapidamente para o próximo estágio. Então nós vamos fazer é realmente usar myText, posicioná-lo no centro. Não vou editá-lo muito. Eu também posso reduzir o tamanho da minha imagem para, por exemplo, até que assim, eu acho que funciona bem. Vamos mudar o tamanho da imagem do herói para isso. Vamos para a nossa mesquita. Mude o tamanho da nossa máscara para esta posição, o círculo no centro, como fizemos antes. Só tenha certeza que é um cavaleiro aqui. Você também pode movê-lo um pouco para baixo. Neste caso, acho que está tudo bem. Formas de herói ou que podemos fazer é podemos distorcê-lo ou você pode simplesmente movê-lo. Então eu vou fazer isso realmente simplesmente movê-lo para dentro. E acho que parece um pouco melhor do que isso. Apenas distorcido para o tamanho específico da mesa. Isso funciona bem. Isso parece bem. E talvez para esta linha, talvez possamos posicioná-la para estar em algum lugar por aqui. Vamos ver. Acho que está tudo bem. E, finalmente, o que eu queria fazer para este botão é Desagrupar este componente. Mas ainda chamá-lo de botão principal. Não sei por que isso aconteceu. Por alguma razão ou não, vamos ver onde estamos. Um 59. Talvez possamos chegar aos 50. Acho que funciona um pouco melhor. Tire isso do caminho. Vamos ver. Talvez 40. Sim, 1940, parece um pouco melhor. Então nós ainda temos que desagrupar isso porque nós não precisamos que ele esteja em um estado de horror porque nós não podemos passar o mouse se você lembrar. Então é basicamente isso. Nós concluímos isso e, mais uma vez, você pode ver como isso é mais rápido. Depois de começar a trabalhar com tamanhos D, você pode facilmente ajustar e fazer todas essas alterações. Então vamos nos certificar de que isso está centrado. Agora o que eu vou fazer é simplesmente clicar aqui porque eu quero reposicionar o DES. Então o que eu vou fazer é ter certeza que isso está dentro do grupo e grupo dela. Grupo. E vou saltar para dentro e desagrupar o meu componente. Eu sou o componente Maya do grupo. E finalmente, desagrupe meu componente aqui também. Porque, mais uma vez, não precisamos de estados flutuantes, só precisamos desses estados irregulares. O que vou fazer a seguir é dar-lhes nomes. Então, isto é contas personalizadas. O próximo é o salvamento personalizado. E, finalmente, temos cartões personalizados e de débito como esse. E agora que isso está concluído, o que você pode fazer é simplesmente expandir esses cartões para a direita. Então eu vou selecionar todos eles e clicar aqui para que eu possa expandi-los para a grade. Certifique-se de que você está alinhado aqui perfeitamente o que nós não estamos. Então vou me posicionar lá para consertar isso. Lá temos ele. E agora simplesmente estenda isso para caber na sua grade. Vamos ver as narrativas de alunos de rotor. Então eu vou me certificar de que ele está bem ali. Você pode voltar e verificar. Então nós temos 150, então nós vamos incluir isso um pouco mais tarde. Mas o que podemos fazer pela parede dele é expandido. A altura geral de R nasce todo o caminho para baixo. Vou selecionar meu rodapé e este, este texto, esta seção acima. Então é nome de serviço, taxa de câmbio. Vou descê-los todos, até aqui, só para que eu possa brincar com este texto um pouco mais. Então, eu tinha um pouco mais de espaço para trabalhar? Então o que eu posso fazer por sua parede é clicar duas vezes aqui, posicioná-lo aqui porque agora temos muito mais espaço. Posso fazer o mesmo aqui. Posso fazer o mesmo aqui. Como este. E agora o que você pode fazer é voltar para o seu primeiro, onde nós realmente tivemos mais informações. Então este aqui, controle C. E volte aqui. Controle V. Vamos ver se temos mais informações aqui. Não temos, então podemos colocá-la em posição. Então podemos fazer o mesmo por este. Porque onde você tem mais espaço, você pode obviamente ir em frente e mostrar mais informações. Por que não? Como a morte? E vamos ver, Otimizar conta e criar sua conta. Porque não quero que passe uma palavra para baixo. Isso é inútil para o Dat. Como sujeira e mais assim. Então, lá temos. Agora podemos brincar com esses outros elementos. Então eu posso primeiro ir em frente e fechar D. Façam para que não me incomodem mais tarde. Então, o que eu posso fazer neste caso é, por exemplo, ajustar para espaçamento. E como posso fazer isso é simplesmente entrando. E vamos começar com este primeiro para que você possa experimentar um pouco. Então estamos em 40 aqui, o que é bom. Estamos em 20, está tudo bem. Mas só quero ter certeza de que ainda tenho mais espaço aqui. Então 1234, faça com isso. Então vamos ver. 1234. Eu posso até, por exemplo, posição é estar aqui. Assim como ele se envolve, em torno deste último e eu ainda tenho apenas um pouco mais de espaço aqui. E o que temos aqui é, vejamos, 40 para baixo 1234. Acho que está tudo bem. Então vamos fazer isso por todos eles. Então vamos ver, neste estamos retornando nove ou é um rápido por aí com este. Vamos ver aqui somos 40. Então vamos posicionar que seja 40 também. Então 1234. E o que fizemos para saber mais, deixe-me verificar 40. Então nós fazemos isso aqui também. 1234. Aí está você. Eu vou remover elementos cor do cartão porque aqueles elementos que não precisamos mais, porque nós não temos qualquer efeito sobre estes ousar hábito. Agora o que eu posso fazer é talvez nós também podemos dar este cartão 60 a partir do topo. Vamos ver como isso vai funcionar. Então 60, certo, acho que é trabalho em dívidas trabalhando ainda melhor. Então vamos verificar este e este aqui para 63 daqui. Tão o mesmo. Sim. E o que você vai fazer é fazer o mesmo por este. Então vamos ver, estamos em 40. Reduza em tamanho até aqui. Certifica-te de que estamos a 40. Então 1234, selecione estes 360 lag isso, e certifique-se que este é 40 Tao. Então 1234, vou remover elementos, cor, dívidas de caneta. Basicamente, temos completado neste serviço onde você pode fazer um litro está localizado este, ver que é 150 daqui para a próxima seção. Então, basta trazer a próxima seção. Assim como. Então 123456789101234 Cinco e ver que você está em 150. Você pode, obviamente, reduzi-lo se quiser, mas eu vou mantê-lo como está por enquanto. Vou clicar duas vezes lá dentro. Certifique-se de que eu posicionei para a largura bem aqui. Certifique-se de que você é uma posição pode mensagens onde ele precisa ser assim para a grade. Para a grade também. Vou posicionar isto na grelha, e vou localizar isto para estar aqui em baixo. Isto pode ser aqui em baixo. E vamos bater a pré-visualização. Apenas ordenado. Podemos verificar o que você fez até agora. Então, isso é bom. É óbvio que parece muito bom. Transição é muito bom. Mas você também pode fazer é talvez dentro daqui no estado padrão. Então este, certifique-se de que você tem todos estes em 0. Não os temos porque estão desmascarados. Então talvez possamos tê-los apenas para ter esse elemento adicional e rotação adicional para eles. Então vamos verificá-los aqui. Então estamos no estado padrão. Podemos ir para o nosso log de itens de navegação máscara, login, botão, clique aqui. E eu realmente não expliquei todos esses elementos. Então, deixe-me fazer rapidamente em frente e mostrar-lhe isso. Então, para todos esses elementos de redimensionamento responsivos, onde quer que você os selecione, você pode usar essas restrições de redimensionamento atômico, que é basicamente Auto qualquer faz tudo em auto e isso é o que você fez até agora. Mas você também pode ir em frente e escolher manual se você quiser, quer redimensionar responsivo é selecionado. Então, onde quer que você esteja fazendo algumas alterações, você pode ver onde você deseja que esses elementos sejam corrigidos. Então podemos consertá-los até o topo. Você pode corrigi-los para a esquerda, haste fixa para a direita e corrigi-los para a parte inferior ou qualquer um desses combinados. Então tudo isso ou apenas dois ou três ou o que quer que seja, o que isso significa é basicamente, se eu mostrar isso em um exemplo real, então vamos antes disso, visualize rapidamente isso e veja como ele se parece. Então, agora, quando eu clico, você não pode vê-los por algum motivo. Não sei porquê. Vamos voltar ao estado da tabulação. Volta para a nossa mesquita e mostra-lhes assim. Vamos para o padrão. Clique mais uma vez, amplie-o. N. Agora esta animação é apenas um pouco menor, mais suave. Então essas contas estão desaparecendo muito bem. E eu realmente gosto de como isso se parece. Então, mais uma vez, se eu levá-lo de volta para aqui, você pode ver que um redimensionamento responsivo está em auto para esta guia de navegação principal. Então, quando eu estiver escalando, se você se lembrar, este logotipo fica preso à esquerda. Isto está manchado preso à direita. Então era o botão neste caso. E deixe-me mostrar-lhe nesse caso. Agora você pode ver como isso parece aqui. Então, quando eu começar a rolar, desculpe, administrado, o redimensionamento vai para o estado fixado para este tamanho. Então você pode ver que a posição do logotipo não muda. Menu, a posição do ícone não muda. Então ele fica basicamente onde estava como meio de volta. Mas se eu clicar manual, eu posso ajustar o para que você possa ver que ele permanece fixo à direita, fixo à esquerda, e fixo ao topo. Mas você pode mudar tudo isso mais uma vez para se ajustar para o que você precisa para o seu próprio projeto. Então. Xd vai ajustar automaticamente uma vez que você está em auto, ambos em manual, você pode brincar com todos estes. Você também pode dizer altura fixa. Então, sempre que eu estou redimensionando estes, você pode ver que a altura permanece a mesma. Mas se eu desmarcar isso e começar a redimensionar, em alguns casos, especialmente se você estiver usando shift, vai ajustar a altura também. Então, mais uma vez, brinque com essas configurações e veja o que funciona melhor para você. Normalmente, auto é a sua melhor aposta. Mas na maioria dos casos, você tem que fazer algumas mudanças como fizemos até agora com basicamente todos esses elementos. Portanto, certifique-se de que você está fazendo alterações que são necessárias para seu design e seus propósitos. Então, vamos seguir em frente. E eu realmente não explorei esta taxa de câmbio e ver se funciona corretamente. Então agora você pode ver que não temos nenhum pairar e estes cartões são realmente agradáveis e fáceis de ler. Agora a partir daqui, você pode começar a rolar e você ainda não pode verificar e isso o suficiente, mas eu acho que é suficiente porque você pode ver esses dois, esses dois dígitos no final. Então, assim, eu acho que realmente funciona. Bom. Vamos rolar para baixo e vamos ver, daqui para a próxima seção, ainda estamos em 150, então vamos fazê-lo em também. Então vamos nos certificar de que estou em 150 assim. E o que eu vou fazer isso agora é clicar isso para pilha vertical. Dem. Posso saltar para dentro, por isso ainda estamos a 150. Posso expandir minha imagem assim. Então está ocupando o espaço total. Eu também posso reduzi-lo em tamanho apenas um pouco para algo assim. E você pode ver porque estamos em uma pilha, esses elementos estão se movendo bem imagem de radar, eu posso clicar duas vezes para reposicioná-lo, talvez reorganizá-lo um pouco. Talvez possamos ampliar seus rostos um pouco para que você possa realmente brincar com a posição dessas imagens. E eu realmente gosto de como isso se parece. Agora a próxima coisa é fazer o mesmo para o texto. Então eu vou enrolar meu texto assim. Vou certificar-me de que está no centro disto. Então eu vou posicionar myText no meio. Mas antes de o fazer, certifique-se de que isto está alinhado no centro também. E porque agora temos muito mais espaço para brincar com ele. Vamos primeiro posicionar esta cidade de 40. Então vamos ver, assim. Isto está a 150, por isso está tudo bem. Agora podemos posicionar isto no centro, assim. E o que eu posso fazer é garantir que isso está se expandindo. Então, para fazer isso, eu posso ir desta borda para esta borda. Como você pode ver, o texto está se ajustando muito bem. E podemos selecionar esses três, ter certeza de que estamos no centro. E o que também podemos fazer é desagrupar nossos componentes, certificar-se de que eles estão alinhados. Então podemos dar-lhes um grupo chamado “btn”. Como sempre foi. Certifique-se de que eles estão em um centro como esse. E agora simplesmente certifique-se de que você ainda tem 40 em todos os lugares. Como nós fazemos. E, finalmente, isso deve ser 150, mas não é assim ter certeza que seus mortos fixos e laticínios têm isso. Você pode ver como isso foi fácil. Então, da próxima vez, quando você começar a ajustar para dispositivos móveis, por exemplo, basta começar a ajustar e você pode ver como todos esses elementos estão mudando. Mais uma vez, se você não gosta que eles mudem assim, você pode voltar para o manual e corrigi-los, por exemplo, para o topo e para a esquerda. E agora comece a mudar e você pode ver alguns elementos diferentes. Então vamos agora avançar e começar com as cartas e abaixo. Então vamos ver, estes estão em 150 ainda. Então este é 150, este é 150. Então mantendo essa consistência bem. Então vamos seguir em frente e vamos ver onde estamos no 33. Não sei porquê. Não nos mostra, mas importa. 150. Deixe-os rapidamente ir em frente e posicioná-lo bem aqui. Porque estamos em uma pilha, clique aqui. E agora podemos ir em frente e ajustar os dois ao mesmo tempo. Então, simplesmente expanda para ouvir. E o que eu posso fazer é basicamente mover meus botões. Então este, e este, eu posso movê-lo para onde eu quiser, mas eu vou mantê-lo onde ele está. Mas eu só vou fazer é clicar com o botão direito do mouse sobre o mouse ou adicionar o meu estado padrão, que é este. Não gosto de mudar a posição da dívida do Carlton. Então vamos ver. Eu posso voltar. Ainda preciso desagrupar e esse componente. Então clique com o botão direito no componente cola, controle G. Tudo isso significa BTN gaveta ver, fazer o mesmo para este. Então clique com o botão direito do mouse no controle de componente grub g, assim. Então, Dario, se você quiser ajustar isso para adicionar um pouco mais de texto a ele, você pode. O que eu posso fazer, por exemplo, aqui é, como eu disse, eu não gosto de ter apenas uma palavra para baixo. Não acho que pareça um profissional morto. Você também pode ajustar a largura deste texto e assim por diante e assim por diante. Eu realmente não vou me preocupar com isso, e eu acho que está tudo bem. Finalmente, o que vamos criar aqui é que estamos em 150 e geralmente, então vamos fazer isso. Certifique-se de que está no centro. 123456789105. Então, aí está. Mais uma vez, se você quiser, você pode posicionar este botão no centro se quiser, mas eu acho que funciona muito bem assim. Vamos ter o mesmo espaçamento aqui. Então, 150, eu posso clicar aqui e podemos saltar para dentro. E agora vamos fazer a mesma coisa. Então agrupe este grupo, este grupo, este, este, este vai ser o cartão número um. Esta vai ser a carta número dois. Esta vai ser a carta número três. E dentro de todos esses cartões, podemos clicar com o botão direito do mouse no componente grupo. No componente de grupo e, finalmente, no componente de grupo. O que vou fazer aqui é manter todos esses elementos porque não temos nenhuma cor ou qualquer outra coisa. E que está ligado a ele. E, finalmente, vamos expandir esses cartões para alcançar a largura total. Certifique-se de que você está alinhado à grade aqui. Vamos ver. E nós somos. Então eu vou apenas expandi-los rapidamente para preencher este espaço. E finalmente agora temos que fazer alterações em nossos cartões. Mas você vê como isso foi fácil e quão rápido. Agora você pode mudar todos esses cartões simplesmente habilitando esta pilha e redimensionar responsivo em nosso caso em auto. Então vamos agora saltar para dentro em editar todos estes. E a primeira coisa que eu vou fazer é ter certeza de que eu mudei este texto para ir aqui porque nós temos espaço suficiente, obviamente, e eu posso até movê-lo 40 para baixo ele acho que vai parecer muito melhor do que o mesmo para este aqui. Então mude 1-2 e farei o mesmo por este. Então, turno 12. O que eu vou fazer em seguida é ajustar essas imagens para que eu vou ter certeza de que eu estou toda largura aqui e que está olhando bem. Farei isso em santo por esta imagem. Então eu vou me certificar de que eu mudei. E talvez um você pode ampliá-lo apenas um pouco posição em apenas um pouco para ouvir. Acho que está tudo bem. E, finalmente, faça o mesmo para a imagem de disco aqui. Então certifique-se que eu posiciono isso por aqui só para que você possa ver que eles estão apertando as mãos e posicioná-lo bem ali. Agora a melhor coisa a fazer é posicionar esta data. Então deixe-me selecionar todos os meus três encontros. Eu não posso porque eles estão em uma pilha, então vamos fazer isso assim. Certifique-se de que esta é a cidade de 20. Certifica-te de que esta é a cidade de 20, e certifica-te de que isto é 20. Como o Dat. Em seguida, vamos trabalhar em nossos textos. Então eu vou usar um distintivo que tinha a maioria dos textos, que é deste tamanho bem aqui. Então eu vou desfrutar de champanhe ou aqui, e eu vou clicar em meus textos expandidos para ouvir. E talvez ele possa cortar bem aqui. E só para que tenhamos espaço suficiente, então isso é em 40. E vamos ver, neste pode ser 40 agora, então 1234. Mais uma vez, vamos cortá-la bem aqui. Então vamos fazer o mesmo com os outros. Vou copiar esta mensagem. mudança tomou aqui. Cartão para aqui. Certifica-te de que estou aos 40. Certifica-te de que também estou a 40. Feche este. E finalmente, e faça o mesmo para o terceiro. Então, sempre que você pode mostrar mais informações porque por que não? Você ainda tem esse espaço. Então, por que não usá-lo para mostrar essa informação importante para que as pessoas não tenham que procurá-la em outro lugar e perder seu tempo. Então, Dario, no hoje em dia nós completamos D. Podemos deixá-los assim. Vejamos, isto é a 150, isto é 50, o que é bom. Agora vamos em frente e seguir em frente com a nossa próxima seção. Então vamos ver, estamos em 150 aqui também. Então, vamos escolher isto e isto, certificar-nos de que estamos a 150. Então vamos ver, assim. A primeira coisa que vou fazer é reduzir a largura da minha faixa de informações. Vou selecioná-lo e meu logotipo, ter certeza de que eles estão no centro. E o que eu vou fazer a seguir é que eu não posso organizar esses elementos um pouco diferente, mas eu realmente vou desagrupar esses três assim. E porque você está em seu tablet e alguns dos tablets já têm as opções para fazer uma chamada telefônica, especialmente para os 4G. Então, por que não usou a dívida? Então vamos remover tudo isso. N, Por exemplo, se você quiser enviar um e-mail, basta parar e ele leva você para o seu cliente de e-mail. Se você quiser localizar, você carimba qualquer sapato de dia para um mapa clientes ou, por exemplo, Google Maps ou Apple Maps ou qualquer coisa que você esteja usando. Então posicionar isto aqui, posicionar o nosso mapa está bem aqui. E, finalmente, selecione-o e um telefone, certifique-se de que está em um centro como dívida. E você pode, obviamente, agrupar estes um pouco se você quiser. Então, por exemplo, você pode mover isso para estar aqui e mover para o último para estar aqui se você quiser, se você acha que faz mais sentido, o que você também pode fazer é localizar o logotipo aqui, localizado estes três aqui. Mas só por uma questão de consistência, vou deixar assim, que nos deixa finalmente com o rodapé. Então vamos trazer o rodapé bem aqui. E o que você pode fazer com o rodapé é basicamente expandir como fizemos com o menu aqui no topo. Então, com este. Então você pode causar todos os ícones e você pode clicar e expandir no topo. Ou o que você pode fazer é camada na barragem tal forma que eles ainda serão facilmente legíveis e compreensíveis. Então vamos fazer isso para este caso. E talvez eu possa lhe mostrar como você pode fazer isso nos estágios posteriores. Eu só estou pensando em como eu posso fazer isso no sim. Deixe-me mostrar-lhe isso mais tarde, uma vez que chegar à versão móvel para que você possa decidir qual versão você quer usar para si mesmo. Então primeiro as coisas, vamos pedi-las. Então deixe-me selecionar não tente assim. Certifique-se de que estamos em uma pilha como esta e que funciona bem. E Dan, talvez eu vá desagrupá-los. Vamos ver. conhecimento deixa-os como o R. Então, primeiro as coisas, vou mover tudo isso. Então eu vou posicionar todos eles para nós para todos para alinhar para a esquerda assim, vamos também reduzir o tamanho a partir daqui. Então 123456, por exemplo, só para que não tomemos muito espaço. E então eu vou clicar duas vezes dentro de todos eles, ter certeza de que eles estão posicionados assim. Assim, e assim. Então vamos ver. - Sim. Vamos deixar assim. Acho que está tudo bem. Vamos ver o que temos aqui. Então talvez possamos ter aos 40 ou o que for. Mas vou deixar assim por enquanto. Vamos fechar isto. Mova-se para invertido. Então o que tínhamos era 60. Então podemos ter 60 aqui também. Como este. Certifique-se de que você está alinhado com a grade como esta. Com C, eu posso mover a imobiliária para ouvir a segurança da família, para ouvir a aposentadoria para aqui. E você pode ver porque estamos em uma pilha, ele já se alinha bem com Eric que o que estamos fazendo. Então, mais reduzidos para 60 como este. Mesure sua esquerda alinhada co 59. Design responsivo 4: Vamos agora terminar nosso design responsivo com o tamanho móvel. Então aperte o controle D, lubrifique este também. Vamos posicioná-lo e descer para estar aqui, então 70. E vamos renomeá-lo. Clique duas vezes aqui. Vamos reduzir o tamanho e vai ser dispositivos extra pequenos. Então vamos mudar isso rapidamente também. Então você vê que este é 375. Então vamos mudar de dívida. Então 375. Vamos mudar isso para quatro colunas de largura. Então, de oito a quatro. E o que vamos fazer é realmente usar essas configurações. Então para 306120, então para 30 para 6120, S4 para início 6120, assim. E finalmente, vamos em frente e adaptar todos os nossos elementos como fizemos até agora para todos eles. Então o que eu vou fazer é saltar para dentro e ajustar alguns desses ícones e elementos. Mova-o aqui para negócios mais em toda a Europa. E você também pode contornar o texto se quiser, para dar a si mesmo um pouco mais de espaço. Eu também posso me alinhar nestes dois aqui, talvez 1234, apenas para que eu possa me dar um pouco mais de espaço. Certifica-te de que isto é aos 40 também. E, finalmente, porque estamos em um celular, podemos simplesmente sair e este como um país selecionado. Vamos ajustá-lo para aqui. E, em seguida, uma vez carimbo do usuário, por exemplo, o disco e expandi-lo para baixo e mostrar que eles têm mais uma opção. Então eu vou esconder este país e quando ajustar isso para a altura. E agora temos uma navegação muito mais limpa do que antes. Então, por exemplo, eu posso alinhar isso aqui. Posso mudar isto para cá, se quiser, mas deixarei como era originalmente. Agora que isso está concluído, o que podemos fazer é trabalhar em nossa navegação. Para que eu possa posicioná-lo aqui. Novamente, certifique-se de que ele vai para aqui. Agora, eu preciso fazer meus logotipos menores. Então o que eu vou fazer é importar um dos logotipos que eu exportei anteriormente. Então deixe-me arrastá-lo da minha área de trabalho aqui. Aqui está. Eu posso fazer um controle x para copiá-lo assim. Então eu posso pular dentro do meu navegador principal. Eu posso fazer o controle V para colá-lo, e posso posicioná-lo em um lugar como este. E então eu posso remover meu logotipo antigo e usar este logotipo porque você se lembra do que um falado anteriormente sobre este logotipo, distraindo-o e fazendo essas mudanças nele. Então eu vou selecionar esses dois, ter certeza que está no centro. Eu vou expandir isso e talvez de, vamos ver, talvez eu possa deixá-lo aqui por agora apenas para que possamos ver como ele se parece. E vamos nos certificar de que também faça alterações nesses outros. Então agora BG está aqui. Sim. Vamos saltar para dentro de uma massa. É querido. Estes estão aqui. Isto também está aqui. Então vamos agora em frente e usar a torneira. Mas antes de o fazermos, o que eu queria fazer era copiar o meu logotipo. Volte para o estado da guia. Garante que eu faça mudanças como esta. Então certifique-se que eles têm que ouvir. O que eu também quero fazer é realmente de não vamos, vamos realmente fazer auditoria. Então vamos usar as Índias. Então, agora BG, vamos apenas para eles ouvir. Vamos mover o nosso ponto de toque e o nosso logotipo para dentro para aqui. Vamos ver onde estamos no estado padrão, então 20. Certo, vamos voltar para a conta. Vamos ver. Então simplesmente mais com 20, então 12. E vamos mover o meu ponto de torneira também ou simplesmente deixá-lo lá. Acho que não importa muito. E então eu posso basear meu logotipo, desculpe, que eu criei. Certifique-se de que está no centro. - É. E agora eu posso ir em frente e fazer algumas dessas mudanças. Então vamos ver 2 agora mesquita BG. Então eu vou me certificar de mudar isso para isso como itens de navegação ou desafio, registrando seu desafio. Então tudo está onde deveria estar. O que eu vou fazer também é acertar o Controle C para esses elementos. Então nav e login Control-C. Esconderei tudo o resto. Volte para o meu estado padrão, pule dentro da minha máscara aqui e você controlaria V para posicioná-los lá. Então vou apagar estes porque reduzi o tamanho deles antes. Vou agora reduzir a opacidade para 0 nestes. E agora vamos testá-lo e ver como ele se parece. Então, quando eu abrir, clique aqui. Tudo funciona como deveria antes e tudo está bonito e limpo. Então agora vamos para a seção de heróis. Agora que terminamos isso. E para a seção de heróis em si, o que eu vou fazer é, na verdade, ver se eu posiciono tudo em um centro. Vamos ver como isso se parece. Eu só estou preocupado com o botão do disco porque eu acho que é muito livro. Então vamos posicionar dat muito rapidamente para ouvir que ele decide aqui, saltar para dentro e de 24, ir para D, 18. Assim, mas certifique-se que é branco. Acho que funciona bem. O que eu também posso fazer é saltar para dentro bem aqui e ter certeza que são, por exemplo, 60 porque não precisamos que sejam mais 70. Acho que 60 está bem. Em seguida, uma maneira de fazer é reduzir o tamanho deste texto de 24 para, vamos ver, 18 ou talvez 16, assim. Mas certifique-se de que está descolorido. E eu vou embrulhá-lo, por exemplo, assim. E, finalmente, para desktops, certifica-se de que é, vejamos, 24 parafusos. E acho que funciona muito bem. Agora vamos em frente e ter certeza que está no centro do nosso aeroporto. Certifique-se de que é, por exemplo, em 41234 assim. Acho que funciona bem. E agora vamos em frente e nos adaptar a outros elementos. Então eu vou saltar para dentro da posição. Pode o herói BG aqui, saltar atribuído a minha posição de máscara, meu herói BG aqui, e depois saltar para dentro do meu círculo, certificar-se de que está em dívida num centro como este. Posso até aumentar a altura do meu círculo. Assim ou algo assim. Acho que funciona bem. Então deixe-me posição pode acoplar no centro. Certifique-se de que eles estão em algum lugar por aqui, por exemplo, estou segurando Shift para ajustá-los. Então em algum lugar por aqui eu acho que vai funcionar bem, então eu posso ter certeza que eles estão aqui, o que é bom. Então eu vou posicionar pode herói BG alinhar com a minha imagem assim? Farei o mesmo pela minha máscara. Tão certo, é um terror assim. Então ele corta fora neste momento. Então o que vou fazer é usar a minha forma de herói, posicioná-la aqui e, em seguida, reduzi-la uniformemente. Então segurando Shift, posicionando-o para bem aqui. Certifique-se de que está para baixo. Como índice, e certifique-se de que a minha imagem está para baixo na mesma, então tudo parece correto. O que eu posso fazer a seguir é, obviamente, saltar para dentro e reduzir o tamanho dos meus heróis porque eu não preciso que ele seja muito grande para que eu possa torná-lo menor do que eu posso reorganizá-lo. Então selecione-o e posicione-o em algum lugar por aqui, por exemplo, eu acho que está tudo bem. E o que também podemos fazer é usar o nosso herói Elements. Certifique-se de que eles estão todos em um centro como este. E então podemos pular aqui e reduzir o tamanho dos dados bem como para algum lugar por aqui, por exemplo. Então o que eu posso fazer é usar minha cruz, talvez mais, nós aderir posição como esta. Usar meu círculo pode ser mais dele aqui e simplesmente usar minha posição de linha aqui, por exemplo, se acharmos que isso é um pouco demais, você pode organizá-lo assim. E vamos ver, Laura cai para cinco. Acho que funciona melhor. E isso pode ser um cinco também. E você pode deixar os atos como estão. Ou você pode saltar para dentro e reduzir estes se você quiser Seul ele ver assim e assim. Então 79479, quatrocentos e cinquenta e cinquenta e três Isso é bom. Você pode deixar assim. Vamos agora seguir em frente. Morte. Nós terminamos isso e porque estamos em tamanho extremamente pequeno da tela, eu posso até reduzir isso e movê-lo um pouco para que eu possa selecionar tudo isso assim e ir assim. 1234, por exemplo. Veja onde estamos e podemos olhar para ele. Então eu quero alinhar minha navegação com este aqui. Então 1234, você pode posicioná-lo lá. Em seguida, salte para dentro de seu herói posição e VG para estar aqui. Posição, sua máscara para estar aqui também. Como este. E aí está. Concluímos esta seção agora podemos passar para a próxima seção. E, obviamente, isso é muito livro Soul. É a Experiência 3624. Acho que 24 funciona bem com este caso. Certifica-te de que estás no centro. E então o que eu vou fazer é ter certeza que eu uso algumas distâncias menores. Então 12345678, talvez 80 funciona bem. Então, onde quer que fosse 100, podemos, por exemplo, colocá-lo em 80 e esquecer esses 150. Então podemos tê-lo em 80 área onde você pode ver que estamos em 80 em todos os lugares. E agora vamos em frente e fazer alguns ajustes nesses. Então eu vou clicar neles, ajustar todos eles ao mesmo tempo, certificar-me de que estou alinhado para migrar aqui. Eu sou. Então, a mesma coisa aqui. E isso é bom. Mas eu vou fazer a seguir é talvez um rap myText ao redor, como uma maneira direta de fazer isso assim. Então o que eu posso fazer é estender este texto um pouco para baixo e depois cortá-lo. Então, 12, eu gosto de como isso parece. Vejamos, estamos em 20 aqui, então 12, posicione-o aqui e talvez corte 23 linhas de texto, como fizemos antes. Taylor, uma conta para atender às suas necessidades, vai terminar a frase lá. Vamos ver, podemos estar 40 para baixo, tudo bem. Então três linhas 20, e agora vamos delinear todas elas. Então farei o mesmo por este. Então 12, assim, vamos dar uma olhada. Estamos 20 para baixo, C alinhado em dois. Então três linhas vão cortar bem aqui. E vamos ver 40 para baixo. Isso é bom. Vamos agora passar para este. Tão estendido como este para alinhá-lo aqui. E12 com um dos nossos, vamos ver, pode projetos como esse. Isto é em 48 dívidas, tudo bem. E agora essa seção está completa. Agora podemos passar para a próxima seção. E você pode ver que este é 24. Este é 24, então tudo ainda está bem organizado. Estamos em 80 aqui, então vamos estar em 80 anos também. Então 12345678. Vamos ver, aí está. E o que eu vou fazer por esses é obviamente fazer essas mudanças aqui também. Mas vejamos, talvez eu possa posicioná-los um em cima do outro. Então este é o 24. Este é o 24. Vamos ter certeza de que está aqui, em posição aqui embaixo. E vamos ver, podemos ter certeza que são 16, por exemplo. Vamos ver o espaçamento. Então um, sim, vamos dar um espaçamento de dez. Vamos voltar com essa mensagem. Somos 16 aqui, 1234, só para que possamos ter 20, certificar-se de que estamos alinhados, estamos, e ter certeza que temos 20 aqui também. Então 12 e nós somos 31 lá em baixo, o que é muito bom. E a última coisa a fazer é ajustar isso para aqui assim e taxa de câmbio BG, trazer tudo para dentro. Agora que uma prévia de sucesso, posso mostrar o que quis dizer. Então, mais uma vez, isso está funcionando muito bem, mostrando tudo. Isso está olhando muito bem porque mostra toda essa informação. Eu realmente não gosto de como este imposto se destaca. Então, basta ver quais são os desenvolvedores e seu cliente sobre a cópia, o que você pode mudar em sua cópia porque você só queria embrulhar em determinados estágios. Então c, que são desenvolvedores e clientes, é possível ter um cópias completamente diferentes ou o mesmo apenas em outra ordem proporcionou esses outros tamanhos. Então você tem que semear com seu cliente. E finalmente, vamos verificar isso. Como você pode ver, está olhando muito bem e mostrando a informação como deveria. Vamos agora voltar e ver o que posso fazer aqui. Então talvez eu possa pular moedas de atribuição, posicionar isso aqui. E vamos ver se isso vai fazer alguma alteração adicional. Quando ele se arrastou para baixo, tudo está bonito. Então eu gosto disso. Você pode até mesmo ir em frente e reduzir o espaço e dado mais e entre todos estes. Então, por exemplo, entre aqui e aqui, você pode reduzir o espaço, mas não perder muito tempo. Eu só estou feliz com o que isso parece. Então, agora podemos seguir em frente. Podemos reduzir este espaçamento para 80. E eu vou reduzir isso ainda mais assim. O que vou fazer a seguir é que a imagem do lado pulado está bem. Podemos pedir aqui mesmo. E vamos ver-me. Podemos reduzir a ferramenta de altura. Ver 300. Eu gosto disso. Eu acho que é bom. Em seguida, vamos pular aqui. Então estamos em 40, o que é bom. Vamos ajustar as nossas mensagens. Então este vai ser, vejamos, 24. Mas quem é careca? Eu gosto de como isso parece. Isso é que nós vamos consertar isso mais tarde. Agora, para este texto, vamos primeiro ir em frente e expandi-lo para as bordas de nossa grade assim. E assim. Em seguida, vou usar 16. Vou usar esta cor. Acho que parece bom. Então eu vou ajustar meu botão e usar o mesmo que eu fiz anteriormente. Então duas colunas e vamos ver realmente espelho, podemos copiar este para que não nos incomodem com esses detalhes. Controle C pode saltar para dentro daqui, clique duas vezes para pular dentro do Controle V. Então eu posso colar meus textos, excluir este botão para ter certeza que estou em 40. Estou em 40. Eu estou em 40 com este também. E essa é a sua seção concluída. É basicamente isso. Isso é tudo que você precisa fazer. Agora, finalmente, posicionado é para estar em 80. Isso é bom. Se você acha que isso ainda é muito grande, você pode reduzir a altura da sua imagem ainda mais. Mas vamos verificar a pré-visualização, vamos ver como é. E você também pode baixar o aplicativo para iOS e Android. Então, seja qual for o dispositivo que você estiver usando conectado ao seu cabo USB, e agora você pode iniciá-lo e visualizá-lo diretamente no seu telefone e ver como ele se parece. Talvez eu possa até mostrar isso mais tarde só para que você possa ver como é. Mas basicamente porque você está projetando para esses formulários específicos, É melhor opção usar essa função do Adobe XD para dispositivos móveis reais. Então, se você está usando, se você está projetando para iOS, por exemplo, para iPhones, então eu realmente recomendo que você baixe isso e experimente se você está projetando para Android, mesma coisa, mas apenas certifique-se de usar o dispositivo que tem essas propriedades. Então isso é em 375. Então, se você tem um telefone celular que é 375 de largura, então ele vai ficar muito bem. Se não, vai parecer distorcido e não tão relevante. Então vamos rolar todo o caminho para baixo e ver. Então testamos esses grupos. Bem, usamos esse botão e acho que funciona bem. Talvez apenas uma ligeira altura de redução, mas cabe a você e decidir o que você quer fazer com ele. Eu fui posicionar isso aqui e para ter certeza que está em 80, então 12345678, eu vou pular imediatamente e reduzi-lo assim. Vou entrar e copiar este botão é quem controla C. Vou entrar no meu cartão. Então eu estou indo para ir bem aqui, Control-V para baseado no meu novo botão, excluir o meu antigo, e fui para saltar bem aqui com base no botão de estrume. Certo, isso exclui minha antiga mistura. Isto está no centro e é 40, então 1234, certifique-se que é o mesmo. Então, centro 1234. E, obviamente, você pode aumentar o espaçamento entre seus cartões estavam simplesmente pairando bem aqui. Vou me certificar que é em 40. Isso é bom. Então o que eu vou fazer a seguir é fazer algumas mudanças nesses textos. Então eu vou colocar isso assim que ver, nós estamos em 22 para este. Vamos movê-lo para 20 exatamente. E para fazer o mesmo para este, então 12. E só por uma questão de consistência, podemos movê-lo para baixo assim. Então eu posso expandir meus textos 20. Certifique-se de que estou fazendo o mesmo aqui. Então vamos ver, estamos em dez, estamos em 20 aqui. E posso reduzi-lo a, vejamos, quatro linhas de texto. Vamos ver o que temos aqui, 33, tudo bem. E eu posso fazer o mesmo para esta serra expandir para mais largura bem aqui. Certifique-se de que estamos em 21234 linhas de texto. Então eu vou posicionar meu ponto aqui, excluir isso e estamos em 33 também. O que eu não gosto nesses cartões é a altura dessas imagens. Então, por exemplo, eu posso reduzir a altura para algum lugar por aqui. Então vamos ver 220. Posso fazer o mesmo por desarmamentos. Então esta imagem pode estar onde está. Aqui está 220. Acho que posso clicar duas vezes. Isso é bom. E agora temos um pouco mais de espaço para brincar com nossos elementos. Então, todos em posição aqui. Então 1234, certifique-se de que você está em 40. Certifique-se de que você está em 40 também. Clique neste e certifique-se de que você está no centro do seu botão assim. Então faça o mesmo por isso. Então 1234. Certifique-se de que você está em 40 aqui também, como o papai. Então vamos ver onde estamos com este. Então vamos ver 40. Deixe-me ir em frente e verificar bem aqui. Então eu tenho 4040 porque eu estou facilmente perdendo as coisas facilmente para esquecer as coisas. E vamos ver 1234 linhas de texto. Então estamos em 21234 uns novamente, eu não gosto de como isso parece, então vamos ver um estado da arte. Hmm, se a palavra de tecnologia fosse para lá, mas eles olhos realmente importantes. Libertação do rei. E acho que é algo assim. E vamos ver, podemos posicionar isto para ser 40 também. Então 1234, morte prematura. E, finalmente, mova isso para estar no centro aqui. E deixe-me fazer uma inspeção rápida, finalmente. Então daqui até aqui, 404040, isto é no meio, 404040, e este é no meio aqui também. E aí você tem que nós completamos nesta seção também. Vamos agora passar para as seções posteriores. Então, se eu te levar de volta mais uma vez, você pode ver que isso é 24 volts. Então vamos aplicar essas mesmas configurações a este texto. Então percorra todo o caminho para baixo. Então certifique-se de que está no centro do nosso aeroporto e pulando bem aqui. Então 24 ousados assim. 12345678, como morto. Mais uma vez, certifique-se de que está no centro, é a posição destiladora esquerda. Certifica-te de que são 80. Ajuste tudo isso assim. Vejamos, algo não está certo, aqui, mas os antecedentes estão bem. Deixe-me verificar se os outros é apenas não estão dx escapando de nós. Então, vamos consertar isso. Vamos chamá-lo dentro daqui. Então deixe-me mover esta imagem para o topo. Mortes de Silano. Está bem. Só preciso escalá-lo lá dentro. Então, como nesta posição aqui, ou melhor, como um disco. Então podemos ver esses dois caras como então eu acho que o MIT parece muito melhor. Agora o que eu vou fazer é pular dentro do meu texto, fazer a mesma coisa. Então vamos ver. Estamos em 20 aqui, 12 e mais estão bem aqui. E banca mundial para 2021. E vamos ver se podemos fazer bem aqui assim. Vamos ver onde estamos aqui. Então estamos em 14 de maio, recombinamos em 20, ou variamos em 40. E aqui podemos estar aos 20 só para nos darmos um pouco mais de espaço. Estamos, vamos ver, 1234, assim, 25 para baixo. E acho que parece bem. Ok, então agora podemos querer mais este. Posso clicar duas vezes dentro de um reorganizado minha imagem para ouvir. Acho que está tudo bem. Uma coisa que vou fazer com esta é ajustar as minhas mensagens. Então 20 devolvido. Podemos mover estes para baixo para a comunidade. Mova isso um pouco para cima. Então estamos em 20. Vamos ver o que fizemos aqui. Então estamos em 40 aqui. Mais com, em 20, podemos mais riffs e 20. Eu posso fazer isso. Então vamos ver. Como você pode ver, você tem que fazer todas essas alterações e ajustes. Então é você daqui até aqui que eu tenho 100. Daqui até aqui estou com 100, então tem que ficar lá. Então vamos ver, vamos apenas mover este trabalho da comunidade e para baixo assim, só para que seja um pouco mais legível do que antes. Em seguida, veja isso é às 20. Então primeiro vamos expandi-lo até aqui. 12x, assim. Então vamos ver, isso é aos 20. Tínhamos três linhas de texto aqui. Então eu vou simplesmente mover isso para cima como sujeira e finalmente aprender mais e foi 40 como este. Então 1234 assim. E finalmente, vamos em frente e terminar este último. Então vamos ver, o espaçamento é tardio entre eles. Então você pode aumentar isso segurando Shift e ele vai aumentar para este e este próximo como aquele. E quando saltar dentro da minha imagem em cada posição pode imagem um pouco para algo como isto. Vamos ver, a altura é 631. Isto é o mesmo que isto? É, é o mesmo que o original? Então a altura é 631, mas este é 287 para 87 e finalmente para 87. Então, isso é bom. Vamos agora saltar para trás. Então, mais uma vez, vamos verificar. Aqui é 212. Isto vai ficar onde está. E isto vai ser 20 a partir daqui. Mas vamos primeiro expandir e vai ocupar três linhas de texto. Então, uma mesa para gostar disso, dois, e isso vai ser aos 40 assim. E lá temos. Nós completamos essas seções. Deixe-me verificar rapidamente ou OTUs em linhas e tudo bem. Vamos agora seguir em frente com nossas tiras informativas. Então eu vou ter certeza que está em 80 também. Então 12345678. E você pode, por exemplo, saltar para dentro e agrupar estes assim. E então eles vão escalar para decentrar proporcionalmente e olhar como deveriam. Eu gosto de como isso parece. Então, agora podemos passar para o nosso Fuller. E quatro é o que vai nos levar mais bem aqui. Então, para acelerar este processo um pouco mais, eu vou copiar e colar onde já fiz no meu design original. Só para te mostrar o que eu quis dizer. Então, se quer dizer, salte para dentro daqui e mova esta foto de beleza todo o caminho para baixo. Só para mostrar essas opções também. Então você pode decidir qual deles você deseja criar mais disco para baixo. Então ele pode saltar rapidamente dentro do meu design original. Pule dentro do meu rodapé. E vamos ver. Ok, selecione meu texto. Selecione e estes. Eu estou batendo no Controle V. Então eu posso colar o que eu já fiz com o meu original. Então deixe-me saltar para dentro daqui. Então, tourney, vamos ver o espaçamento entre eles. Isto é aos 40. Então vamos selecionar todos eles com menos de 40 anos. E basicamente você pode ver o que eu fiz aqui. Então eu incluí essa seta, que é basicamente apenas para formas como fizemos com o ícone de menu combinado. E você também pode usar qualquer conduta de ROI que desejar basicamente. E o que eu fiz ali está posicionado todos assim. Então você pode ver que esses itens de menu estão abaixo um do outro com 40 entre eles. Então você pode ver como tudo isso se parece. Então tudo é bom e limpo. Tudo é facilmente rolável. N ilegível. Sabonete. Deixe-me mover para baixo este texto para ser 40 também. Posso posicionar isto. Vamos ver onde está. Podemos posicionar isso como 40 também. Assim, assim. E também posso fechar meu quadro de arte. E vou explicar qual é o problema aqui com o Adobe XD. Então, basicamente, o que você precisa mostrar aqui são todos esses estados diferentes. Então, a partir de seus itens de rodapé, então todos esses itens, cartões de empréstimo, investir Digital, outros links, a música, você terá que agrupá-los assim, controlar G, e basicamente criar um componente. E o que você precisará fazer é criar estados de componente. Então você terá alongs, pulmões fechados, abertos. Pulmões fechados vai ser um estado padrão e aberto vai ser Unio State Cards, cartões padrão abertos. Então, e este é o aberto. Uma vez que você começar a mostrar todos esses itens incluídos, é esta seta vai virar para cima, obviamente, e você vai esconder todos estes. Então parece que fizemos com a navegação do menu no topo. Então, basicamente, você precisará criar. Então diga assim para cada um de seus itens de menu de criações. Então, por exemplo, contas aqui à esquerda. Esta é a seta quando você clica para baixo vai expandir e mostrar todos estes. E o problema com isso, por que você não pode mostrar isso no XD é porque ainda não temos quadros de arte dinâmicos. Temos dinâmicas nossas pranchas. Assim, por exemplo, você pode ver que se eu selecionar meu aeroporto clicando aqui, você pode ver que o redimensionamento responsivo está desativado. Se eu ligá-lo, todo este quadro de arte pode redimensionar para cima e para baixo facilmente. Mas o que não pode fazer é não lidar com vários componentes. Porque, desculpe, vários estados de componentes, porque você vai ter isso como seu componente. Então, todos esses itens de rodapé, apenas primeiro componente e, em seguida, para cada um deles, você terá que criar estados de componente. Ou hub fez sentido como fizemos ao longo deste curso até agora. Portanto, o Adobe XD ainda não consegue lidar com todas essas datas de componentes para que ele se expanda. Ele não pode lidar automaticamente, reajustar um estado, mas ainda não pode lidar com vários estados. Então, se quisermos mostrar ao seu cliente, você pode, por exemplo, manter todos eles abertos ou todos fechados, exceto o primeiro. Então cada um pode lidar com isso e você pode lidar com isso. Basta deixá-lo responsivo, redimensionar no clique aqui para ser fixado no topo. Você não precisa fazer todos esses outros. Então você pode fazer isso. Mas apenas certifique-se de que você selecionar a nossa placa em si, assim, ativar o redimensionamento responsivo. E quando fizer isso, certifique-se de fazer essas alterações nele. Então é basicamente isso. Você tem que fazer essas mudanças. Você tem que mantê-lo assim. Então eu sou um pouco confuso se eu mesmo posso dizer isso. Então você não pode fazer neste belo esconderijo como fizemos com nosso navegador principal aqui. Você ainda tem que mantê-los no lugar assim. Então isso é basicamente para este vídeo, e isso é basicamente para esta parte do curso. Concluímos agora o nosso design responsivo do site. Mais uma vez, se você quiser um realmente encorajá-lo a fazer isso exatamente o mesmo processo para todas essas outras páginas. E para cada página que você faz até ou de sua própria, porque este é o seu trabalho como designer, você ainda tem que fazer todas essas páginas de design do site responsivo porque no desenvolvedor e não sabe por conta própria ou o que você tinha em sua cabeça e o que você quer fazer com essas páginas. Porque às vezes eles podem entender, como por exemplo, se saltarmos para esta página aqui. Então, é bastante óbvio, digamos que nós, se incluirmos uma pilha como esta, podemos mostrá-la a eles. Vai ser assim no responsivo. Vai ser assim em um desktop dispositivos e testá-lo basicamente. Mas eles não sabem o que fazer com essas páginas, por exemplo. Então eles não sabem se você quer que essa garota seja centrada. Se quiser que seja da esquerda para a direita onde ele queria mensagem. Se você quiser que o texto fique alinhado à esquerda, ganhe assim. Ou se você quiser que este texto seja posicionado em um centro como este. Então você ainda tem que criar design responsivo para ambos os clientes, seus companheiros de equipe, Se você tem um e desenvolvedores para entender onde você quer ir com este design, o que você deseja criar, que mudanças queremos como telas começar a ir para baixo e para baixo em tamanho. Então é por isso que o design responsivo é realmente importante. Mas apenas em termos de tamanho do discurso e comprimento do discurso, eu expliquei tudo o que sei basicamente sobre design responsivo, seca essas páginas. E agora eu vou fazer o mesmo para esta página para o design do painel. Vou mostrar-vos como podemos adaptar isto porque, como podem ver, temos esta margem aqui, que é muito maior do que esta margem à direita. Então eu vou usar basicamente essas mesmas configurações, mas apenas ajustá-las um pouco por causa dessas margens para mostrar como esta página vai se parecer quando os usuários começarem a usar esse design responsivo. Então é isso que vem a seguir. E vemo-nos lá. 60. Design responsivo 5: Vamos agora começar a trabalhar no design responsivo do nosso painel. E basicamente o que vamos fazer é exatamente o mesmo processo que fizemos para um site. Mas a principal diferença é a margem esquerda que deixará para a nossa navegação. Então o que eu vou fazer é basicamente duplicar isso, nossa posição do conselho em todo o caminho para baixo. E eu vou tentar alinhá-lo com estes são placas, maioria simplesmente segurando minha tecla shift assim. E então eu vou selecionar todas essas placas são como essa. Faça uma obrigação ou Controle D posicionado aqui. E então eu vou saltar para dentro do meu modo de prototipagem. Clique aqui e chame isso, vamos ver painel que responde a isso e ver onde estamos. responsivo painel de design de site design responsivo. Então, isso é bom. Volte para Design e vamos fazer algumas alterações. Então vamos ver, podemos chamá-los como eram originalmente, porque isso importa. Estes são ajustados para ponteiros para nós, que vamos usar para real responsivo e design e apenas vamos remover um de cada um deles. E agora o que vamos fazer é experimentar alguns desses layouts. Então aqui temos a coluna de 12165 em cada lado. E se eu clicar aqui, então vamos chamar isso, vamos ver. Clique duas vezes aqui. E design do painel de instrumentos. E esta, uma área de trabalho tão grande. Então, se olharmos bem aqui, presumo que em apenas um pouco mais perto, você pode ver em dívida que temos margem para a direita, que é esta de 20 em margem à esquerda, que é esta de 401 pixels. Mas se dermos uma olhada aqui, o que temos é 165 à esquerda e à direita. Então o que podemos realmente fazer aqui é, por exemplo, dar esta esquerda 1200. E você pode ver que já começou a adaptar Marika posição faz para ser 20 como este. Agora estamos em dois ou dois e já vemos algumas mudanças acontecendo aqui, que é bom, o que vamos fazer de qualquer maneira. Então o que podemos fazer é seguir em frente a partir daí. Então vamos ver que estamos em, digamos 14401024. Então talvez porque este é 202 com 20, vamos ver, vamos mantê-lo em 20 aqui, então vamos abri-los. Então, certo vai ser 20, mas vamos manter isso em 180, por exemplo. Veja como os dados se parecem. 2182, por exemplo. Podemos posicioná-los assim. Agora podemos, vamos querer, e para os tablets, não precisamos mudar nada porque quais são os comprimidos? Nós ainda vamos ter nossa navegação bem aqui no topo. Que vai se expandir. E para esses dispositivos extra pequenos de situação ocupada vai ser exatamente o mesmo, sugere que estes dois são os que você tem que se preocupar se ele acha que essas colunas são muito largas ou largura da calha Índias são muito largas. Você pode, obviamente, brincar com eles. Então, por exemplo, eu posso baixar a largura da calha para 20. Posso aumentar a largura da coluna para 60, mas depende de você. Só vou usar essas opções. Primeiro, o que vou fazer é basicamente replicar o que fiz aqui. E fizemos o mesmo com estes. E, obviamente, no espaço. E o que você pode fazer é quando você começa a fazer design responsivo, como fizemos aqui, você pode organizá-los aqui. Então da esquerda para a direita com todas essas páginas, como você pode ver agora temos 246 páginas com essas que são oito. E você pode posicionar esses dois assim. Então eles são, eles vão apenas um pouco até aqui, ou você pode trocá-los e posicionar alguns deles aqui no topo. E então, quando você ficar sem espaço, você pode posicioná-los. Agora, obviamente temos o design do painel. Você pode movê-lo para a direita. Você pode mais responsivo para a direita também. Então, cabe a você mesmo. Isso obviamente vai nos levar muito menos espaço do que isso porque o conteúdo não está indo tanto para esse site. Sólidos. Você começou mais uma vez 1440. Então vamos começar com isso. Então vá para aqui, 1440. E vamos ver o que temos aqui. Então temos 123074. Então vamos tentar mudar isso. 3074. Vamos ver o que temos lá embaixo. Então 220 em dois. Então vamos abrir a dose. Então 2222 para tentar a dívida. Vamos ver mais uma vez. Então 30-70 para girar 7422 ou dois, e é basicamente isso. Então vamos verificar mais uma vez só para ter certeza. Então 12307422 para 12307422 para N, Tudo bem. O que eu vou fazer a seguir é basicamente fazer os mesmos ajustes que fez anteriormente. Então o que eu posso fazer é ter certeza que isso vai para aqui, assim eu não preciso fazer nenhuma mudança no papai. Basicamente. O que eu posso fazer a seguir é basicamente ajustado à inteligência de todos estes. Então o que eu também posso fazer, ele está basicamente escondendo meu texto assim. Então eu estou apenas com esses ícones e talvez essa seja a sua melhor aposta de qualquer maneira. Então, quando as pessoas passam o mouse sobre ele, por exemplo, você pode então mostrar-lhes isso. Então vamos fazer isso rápido. Então, para a conta eu vou escondê-lo, transações , empréstimos, e foi novamente porque eu vou fazer apenas esta página. Estou deixando isso com vocês. Se você quiser, você pode explorar e criar páginas adicionais apenas para que você possa praticar um pouco. E agora você pode ver que temos um olhar muito mais limpo. E se eu ampliá-lo só para que você possa ver como ele se parece. Temos agora uma aparência extremamente agradável e limpa bem aqui, enquanto mantemos tudo isso intacto. Então vamos agora trabalhar nesses outros elementos. Então eu vou selecionar meu posicionamento de texto aqui. Não há necessidade de mudar nada. Vou posicionar o disco aqui. E vamos ver. Mais uma vez, vamos mantê-la em quatro colunas de largura. E quando saltar aqui. Mais uma vez, por causa de nós temos esses cartões Dashboard. Podemos, obviamente, adaptar-nos. Então 1234, então vai ser bem aqui. O que podemos fazer com a dose é que eu posso mover essa informação, por exemplo 12, e então eu posso escalar meu cartão. Para que eu possa saltar para dentro de onde está. Aqui está. Posso deixar ver, apagar ou simplesmente esconder estes como este. E agora eu posso simplesmente ajustar este, SOT 12, por exemplo. E então eu posso fazer alterações nesses textos. Então eles estão em, vejamos, 16. Não temos tamanho menor. Então o que você pode fazer é realmente adaptado, então cartão de débito. E você pode chamá-lo, por exemplo, até 921 porque ele mostra bem aqui e você sabe o que é basicamente. Agora que isso está concluído, vamos trabalhar na próxima seção, que é as seções de ajuda e comórbida aqui, eu vou ajustar a largura do meu cartão assim. E eu vou simplesmente saltar para dentro e reposicionar alguns desses elementos ou colocar isso aqui. Vou colocar isto aqui, por exemplo. E eu acho que parece ou escreve algo assim. Você também pode reduzi-lo para aqui para oito talvez apenas para dar a si mesmo um pouco mais de espaço. E vamos dar isto e isto são 20. Então, 12. Só para continuar com este também. Podemos fazer o mesmo com este texto. Então, em dois, apenas para manter tudo parecendo coerente e agradável. Para ela aqui com C é a mesma altura, a mesma largura, o que é bom. Isso é ótimo. Agora vamos em frente e trabalhar nesses outros elementos. Então vamos trazer toda essa informação. Então, se saltarmos para dentro do nosso original, podemos ver que 1234567. Então isso está nos levando sete colunas e isso está nos levando 1-2-3-4-5. Então vamos trabalhar nisso também. Vamos ver 12345. Então vamos reduzi-lo a isso. Então vamos nos esconder rapidamente neste primeiro 12345. Então tem que ser aqui. E ainda temos muito espaço para trabalhar com nossos elementos, então não preciso fazer alterações. Basicamente, o Adobe de fez tudo por mim. Tudo o que preciso fazer agora é mais do que discos para aqui, por exemplo. E você pode ver que eu realmente não tive que fazer nenhuma mudança aqui em tudo. Então você pode, por exemplo, deixá-lo como mortes. E isso é basicamente a única coisa que eu realmente tenho que mudar nosso espaçamento d porque você pode ver aqui mesmo que eles não estão na linha. E eu realmente não gosto disso, então eu vou rapidamente saltar para dentro de todos esses. Vamos ver, e eu posso alinhá-los. Então, por exemplo, eu posso talvez, vejamos, selecionar esta posição aqui e, em seguida, movê-la, por exemplo, 40 pixels. Então você pode ir para baixo, selecionar os nomes de negócios como este e, em seguida, simplesmente posicioná-los até que você se alinhe com o texto 1234. Talvez. Acho que vai funcionar bem. E, em seguida, faça o mesmo para estes. Então aqui, aqui, aqui e aqui, vamos ver se podemos alinhá-los. Podemos, o que é fantástico. Mudou-o para cá. 12, talvez. Acho que está tudo bem e vai funcionar muito bem. Quando você realmente começa a ficar menor e menor, o que você pode fazer é você pode deixar isso, você pode deixar isso, você pode deixar isso. Mas para este uso simples ícones porque eles estão mostrando aos usuários o que eles selecionaram. Então eu vou mostrar isso na próxima seção do curso. Mas por enquanto, para este vídeo, acho que terminamos. Acho que isso parece muito bom. Então deixe-me fazer a prévia final para vocês. Então, Howard, acho que isso parece muito legal. Acho que isto parece muito coerente. E ele realmente mostra o que você pode fazer quando você está usando esse layout inteligente para pesquisar, por exemplo. Então eu acho que isso parece legal. E a última coisa que vou mudar é isto aqui. Eu realmente não gosto disso. Então talvez eu possa mover este texto um pouco aqui. Por exemplo. Ou talvez possamos até cortar isso. Então deixa-me mostrar-te isso. Então, em vez de 2020, eu posso simplesmente mostrar a chorões como este para me dar espaço suficiente. Então, obviamente, as pessoas vão saber o que é isto. Então vamos começar selecionando esses. Então, mais uma vez, use esses nomes de negócios. Assim, nós não selecionamos e este. Então vamos fazer isso mais uma vez. Como isso. Certifique-se de alinhá-los assim. Posicionou-o aqui, 123, então talvez 30 pixels, tudo bem. E agora todos eles estão posicionados corretamente e estão todos em linha. Então eu realmente gosto de como isso se parece. Então é basicamente isso para este vídeo. No próximo vídeo, fechamos todas essas pastas para manter as coisas consistentes. No próximo vídeo, vamos pular e passar para essa seção de dispositivos grandes. Vou mostrar a vocês como podemos adaptar isso, obviamente. E talvez precisemos ir um pouco mais de altura, mas vamos ver o que vai acontecer quando começarmos a reduzir tudo isso. Então, vemo-nos lá. 61. Design responsivo 6: Tudo bem, vamos agora passar para este. Então, mais uma vez, o Controle D duplicado, todos saltando aqui para o controle C, e pulando aqui e excluindo daqui no controle V, assim. E agora vamos em frente e adaptar um pouco mais. Então o que eu vou fazer é antes de tudo, vamos reduzir o tamanho, então 10-24. Vamos fazer isso primeiro. Então, 1024. Agora, a próxima coisa é, obviamente, adaptar estes. Então 123041, Buda ensinou o advogado 41. E estamos 2182 lá em baixo. Então é 21822082 e isso vai ser 3041. Então vamos ver, 30412182304121 H2, 30412182. Derek, como é 1230 quarenta e um vinte e um oitenta e dois. Isso é bom. Então o que podemos fazer aqui são basicamente duas coisas. O que você pode fazer é posicionar esta seção de Ajuda abaixo dessas seções e fazer tudo bem aqui área rolável, que eu estou realmente pensando em fazer. Então, basicamente, vamos deixar este texto superior e vamos começar do início. Então eu vou posicionar este URL bem aqui. Vou deixar a lei, enquanto é, vou deixar isto como está. Vou mover este texto um pouco para aqui. Então o que eu vou fazer é posicionar isso aqui, certifica-se que AM a 46 largura, assim. E vou certificar-me de que estou a fazer o mesmo aqui. Eu também vou mover meu cartão e um pouco, então 12, só para nos dar um pouco mais de espaço aqui. Então, isso é bom. Bem, podemos fazer é mover esta seção de ajuda. Então eu vou estender todo o caminho até aqui. E vamos ver, ter certeza de que nosso círculo é algo como, eu não sei, 300. Com 300, talvez possamos posicioná-lo aqui. Podemos posicionar, distribuir aqui. Edite facilmente suas informações. Podemos mover isto para cá. Podemos posicionar isso em uma linha de texto. Mas primeiro temos que expandi-lo para, vamos ver bem aqui. Uma linha, deite-se morto, Cotard. E vamos ver, podemos posicionar isso aqui. Então vamos ver onde estamos. Estamos em 20, estamos em 35. Então vamos ver 123420. Podemos fazer 20 aqui, então 121234. Então, podemos cortar neste ponto. Então vamos fazer isso. Vou me certificar de selecionar esses dois. Posicionou-o assim. E então vamos ver, esta massa pode ficar onde está. Eu posso mover este chamado aqui. Posso mover isto para cá, e é basicamente isso. Para esta seção em particular. Isso é bom. Agora o que eu vou fazer é realmente passar para essas outras seções. Então vamos esconder isso. Suas cartas. O que é esta guia Ajuda? Ou alguma razão em mudou-se para o topo iria ver por que ele está cortando. Então, a lacuna de massa do elemento, precisamos nos ajustar à mesquita para ouvir e tudo bem. Agora está bom. E deixe-me organizar um pouco as coisas. Então aqui temos a navegação superior no mórbido para o topo na barra lateral Bruce Lee vai depois disso. O texto vai depois disso. Vais ter a nossa conta principal após a morte, teus cartões depois disso. Agora vem as abas. Teremos as últimas transações e todas as despesas. Vamos esconder rapidamente todas as despesas. Últimas transações que posso mostrar pontos. Então vamos ver onde estamos aqui. Então estamos em 40 mesure. Estamos em 40 aqui também. Então 1234, eu vou ter 40 aqui também. Eu vou fazer isso? Certifica-te de que estou alinhado à esquerda, certifica-te de que expiro isto até aqui. Dan, o que eu vou fazer é saltar rapidamente para dentro e organizá-los um pouco melhor. Porque agora tenho muito mais espaço para trabalhar. Então vamos ver, vamos começar com as nossas etiquetas. Como este. Etiqueta alimentar. Certifica-te de que estás alinhado assim. Não há necessidade de espaçamento. Então vamos deixá-lo como o R. Selecione todos esses assim. E eu não escolhi o número cinco por algum motivo. Então eu tenho que fazer isso mais uma vez. Então deixe-me selecionar minha comida, utilitários e fechar por sujeira, alinhados. Agora está tudo bem. Agora vamos voltar aos nomes das marcas. O meu pai. Agora está tudo bem. E como eu disse, não vou ajustar nada. Vou deixar tudo como está. E finalmente, vou esconder isto, trazer isto de volta assim. Posicione-o aqui. Certifique-se de que se expande até aqui. Vou pular bem aqui. Certifique-se de que todos estes estão seleccionados desta forma. E para economizar um pouco de espaço, o que vou fazer é posicioná-los um ao lado do outro. Então vamos de um desconhecido, temos que olhar porque mesquitas são um veado. C, assim, 1234 por exemplo. E então eu vou posicioná-lo aqui. Deixe-me trazer todo este ano. Esconda minha conta de saúde só para que eu possa vê-lo um pouco melhor. Então o que podemos fazer é mover tudo isso para ouvir como div estamos, e é isso. E em vez deste moveu um gráfico. Assim, precisamos de pagamentos de um carro também. 40, então 1234 assim. E eu vou organizar isso um pouco melhor. Então, por exemplo, algo como induzir deve funcionar, mensalmente deve funcionar bem. E aí está ele. Lá temos ele. Talvez possamos até mesmo posicionar faz para bater 20. Vamos ver onde estamos no topo. Sim, vamos posicionar tudo para ser 20, então em dois. E é basicamente isso. Você pode se certificar de que selecionou isso. Ou podemos posicionar tudo isso no centro. Tudo depende de você e o que você quer fazer com ele. Então, vamos realmente fazer isso. Vamos fazer isso assim. E vamos nos certificar de que isso está no centro. Vamos ver como solto. Então, no centro do nosso círculo, e agora podemos simplesmente fechar nosso fundo BG. Então vamos ver, estamos em algo como, eu não sei. Vamos ver o Controle D para que eu possa duplicá-lo. Ou exemplo para ouvir mais um. Então 37, Watson, eu posso mover isso para aqui assim e simplesmente garantir que eu feche o meu original para este novo. Eu removo. E lá temos. Nossas despesas estão concluídas. Então traga de volta para ajudar a se atrever a trazer de volta as últimas transações. E o que eu vou fazer é obviamente posicionar todos eles em um grupo. Então, cada pedaço de conteúdo que você vê aqui está dentro de um grupo. Chame de conteúdo assim. E o que eu vou fazer é mover todas as despesas todo o caminho para baixo assim. Então é posicioná-lo e vamos ver onde estamos. Então 1234, assim. E vaca leiteira, se você quiser, você pode criar uma pilha. E então você pode mudar esses elementos. Quem pode posicionar isto aqui e isto aqui, se quiser. Eu não vou fazer em dívida. Então você pode usar uma pilha, mas o que eu realmente quero usar é uma rolagem vertical. Então, como você pode ver, é inteligente o suficiente para cortá-lo bem ali. Então, se eu clicar para visualizar, e isso é o que vamos conseguir. Então você pode, obviamente, clicar nestes itens de menu e esta altura obviamente permanece a mesma. Mas agora você pode começar a percorrer essa área e você pode ver muito bem que ele corta bem aqui, que é simplesmente fantástico se usarmos a versão animada disso. Então ele pode realmente rolar dentro deste grupo, bem como, dentro do grupo rolável. Assim, você pode ter grupos dentro dos grupos que rolam. Mas para esta necessidade e propósito em particular, eu acho que isso realmente parece fantástico. Você também pode estender isso para que você não tenha essa falha estranha uma vez que você realmente começar a rolar. Então você pode ver a cor aqui em vez de aqui. Mas na verdade não se importa porque temos este painel de cima bem aqui que permanece o mesmo. Então eu realmente gosto de como isso está aparecendo. E é basicamente isso para este vídeo. No próximo vídeo, vamos começar com a versão tablet. E basicamente você pode começar já visto onde isso está indo. Vamos apenas alinhar todos estes elementos à nossa grelha. E eu vou mostrar a vocês como você pode criar uma navegação aproveitável e onde você pode colocá-la. Então, vemo-nos lá. 62. Design responsivo 7: Vamos agora começar a trabalhar em uma versão tablet. Mais uma vez, eu vou rapidamente e duplicar isso. Então, Controle D. E vamos dar um nome a isto. Então, clique duas vezes dentro. Desculpe. Vou simplesmente remover e este controle de informação V para colá-lo assim. E vamos ver. Então estamos em 76 e oito. Então vamos em frente e 768. Estamos em oito colunas, como dat. Então, oito colunas. E vamos ver o que temos aqui. Primeiro, temos 296042 para ambos. Então agora não precisamos disso. Então deixe-me lembrar-me mais uma vez. Então, 296042. Então, dois correndo na 6042. Isso é bom. Então rebanho leiteiro. E o que eu vou fazer aqui é realmente usar as mesmas opções que eu tenho no topo. Então deixe-me ajustar rapidamente o meu top agora da mesma forma. Então meu pai, o que eu posso fazer é talvez carregar esse cara aqui. Talvez eu possa mostrar tudo isso aqui. Vamos ver o que podemos fazer com nossa navegação. Basicamente, o que eu queria fazer é expandir todo o caminho para baixo e, em seguida, mostrar todas essas informações da própria barra lateral. Então vamos rapidamente, vamos rapidamente passar para a barra lateral dentro assim. E vamos ver o que podemos fazer. Talvez possamos usar o que usamos aqui. Então eu posso clicar duas vezes aqui, controle C. Então eu posso usar este ícone de menu exato. Pule aqui, controle V, posicione-o no centro aqui, certifica-se de que estamos à esquerda, desculpe, alinhados à direita aqui. Hábito leiteiro E agora vamos trabalhar na nossa navegação. Alguns atingiriam o controle D. Vou expandir este e um plano de fundo. Então, todo o caminho para baixo assim. E então eu vou pular dentro da minha Barra Lateral e deixar você carregar todos os meus itens a vácuo. Então aperte 0. Desculpe, eu escondo aqui, então vou mostrar-lhes aqui. Então, basta clicar nesses ícones do globo ocular, o que está tudo bem. Como em dívidas. O que eu também vou fazer é que vamos deixar isto como está. Vamos remover o seletor porque não precisamos dele no momento para esta tela específica. Então vamos remover o seletor. E eu também vou mudar algumas cores desses itens. Basta deixar este primeiro no lugar porque nós queremos mostrar que estamos em um painel afinal de contas, mas ele apenas inclui um pouco de cores mais escuras para esses outros, apenas para que possamos vê-los um pouco melhor. Então vamos agora em frente e fazer isso. Vou simplesmente clicar em cada um deles. E eu aplicarei essa cor. Só para que possamos vê-los um pouco melhor, porque você pode ver, especialmente aqui com este aplicativo ajudou, você não pode vê-los realmente muito bem. Então eu vou simplesmente aplicá-lo nesta cor para eles. Assim como. E para mostrar que isso é selecionado, eu vou aplicar esta cor apenas para diferenciar ajustado um pouco para que você possa vê-los um pouco melhor. Então, lá temos. Isto é uma dívida. O que eu vou fazer a seguir é me mover aqui ou aqui, por exemplo. E c, eu posso escalá-lo com meus próprios avatares. Vamos ver isso. 1234, por exemplo. E eu posso movê-lo e a barra lateral todo o caminho para baixo. Vejamos, 1234 mortos. E eu posso obviamente mover meu logout para cima 1234. Então, assim, eu gosto de como isso parece. Finalmente moveu Michael J. Egos, certifique-se de que está alinhado à esquerda, certifique-se de que está centrado, direita para ousar. E manadas leiteiras. Acho que isso parece muito bem. Vamos ampliá-lo para ver como ele se parece, e tudo bem. O que vamos fazer é basicamente a mesma coisa que fizemos antes. Então, vamos criar um ponto de toque aqui onde nosso principal ícone de menu notícias. Então vamos chamá-lo desse ponto. Menu Principal, Ponto de tabulação. Como isso. Posicione-o abaixo do menu principal ou remova a borda e a cor, e é isso. E então o que eu vou fazer é basicamente dizer como eu fiz anteriormente. Então eu vou duplicar este. Então, Controle D, vou posicioná-lo em cima de tudo isso. Então, assim. Isso é bom. Então vamos ver. Eu posso movê-lo um pouco para baixo também aqui. Ou não, vamos deixar tudo assim. E, em seguida, selecione todos eles assim. Vamos ver onde estamos. É isso. Aperte Shift Control M, para que eu possa criar uma máscara como dívida. E eu vou mover tudo isso aqui para baixo porque este é o meu top nav VG depois de todos os índices este fundo completamente. Então, finalmente, e vamos testar esta mesquita, e vamos trazer isso até aqui. Isso é bom. Bem, vamos trazer isso à tona também. E isso é bom. Ou reduza sua visibilidade a isso. E agora, finalmente, vamos em frente e brincar com o nosso conteúdo. Então eu posso clicar aqui para removê-lo de uma seção de disco. Então eu ainda vou chamá-lo de conteúdo, então tudo bem. Mas eu também posso expandir isso até aqui para que eu possa ver o que estou fazendo. E o que eu posso fazer é basicamente ajustar todos estes para caber para que possamos colocá-los dentro da pilha. Coloque-os em cima um do outro de um expandir isso para ir para aqui. Enquanto expandiu isso para ir para aqui também. Vou mover meu cartão para ouvir, por exemplo, vamos ver onde estamos. Pequeno. 23, vejamos 1234, porque obviamente temos muito mais espaço agora. Posso posicioná-los para serem centrados e posso garantir que estejam centrados até tarde, Dennis. E posso posicioná-los para ouvir. E agora eles parecem um pouco diferentes. Posso colocar o texto muito mais perto. Mesmo líquido para paginação. Então vamos ver 1234 talvez em algum lugar como desafio. Eu realmente não gosto desta seção. Então talvez possamos ir e ver para, com este, para, com este. Vamos ver como isso vai parecer. Então, para a posição ou cartão para aqui. Vejamos, talvez possamos fazer algumas alterações neste texto. Então, como este 1212. E vamos copiar este cartão de texto até posicioná-lo aqui em, vejamos, 20 distend. Vou colocar o meu cartão no centro ou você pode fazer é certificar-se de que este e este estão no centro. Este é 20 para baixo. Certifique-se de que está no centro também. Então, vamos posicioná-lo aqui. Sim, eu vou expandir meus cartões BGN para baixo um pouco. Posição aqui. E vamos ver. Então, aqui estamos nós aos 20. E vamos ver, podemos dar isso para estar bem aqui. Então é por isso. E finalmente, vou posicionar isto aqui. Vamos ver. Então eu realmente precisarei movê-los para fora da minha pilha. Então eu removo esta pilha. E, em seguida, o disco de posição aqui, desculpe, ainda estamos em uma pilha para o conteúdo. Então eu vou deixá-lo todo estab por isso. E mais tarde talvez possamos trazê-lo de volta. Então, eu ouso, eu vou desagrupar todas essas posições faz aqui, assim. Porque agora, na verdade, não precisamos de nenhum ponto de corte. Podemos simplesmente posicionar esses itens onde você deve estar de qualquer maneira. Assim como as mortes, podemos levar tudo isso ao decentro. E seu, vamos ver, assim. Ok? E posso dimensionar a largura do meu texto, talvez até as bordas, algo assim. Trazendo isso de volta Gleick. Então, certifique-se de que isto está centrado. Certifica-te de que estás bem aqui. Então, 12. E isso está no centro do nosso BAG, assim. Posicione-o em um pouco. Veja assim. E isso é bom. Posicione nossa paginação para o centro. Vamos ver o que tínhamos aqui. Então tivemos que ser 28 para baixo. Então isso é muito 12312, então 28, então é exatamente a mesma posição que esta aqui. Vamos abaixar isso um pouco. Então 1234 talvez, e eu posso rapidamente ir em frente e organizar esses elementos. Vamos ver onde está. Então, circule. E podemos até remover essa máscara porque não precisamos mais dela. Talvez possamos ter esses três preenchendo nosso espaço porque eu realmente acho que é demais. Às vezes, com esses elementos você pode, se você quiser , mas eu acho que vai funcionar muito bem assim. Então estamos em 30. Vou movê-los dez para baixo assim. E vamos ver, vai ser 40 assim. Vou posicionar todas essas coisas assim. Então tudo está parecendo bem. Só precisamos reorganizar as coisas um pouco. Então 35 alertas posicionaram estes para serem, vejamos, 20. Como este. E vamos ver agora eu posso saltar e fazer alterações em todos estes. Então vamos começar com os números, na verdade. Então eu posso colocar os números para ser em 20 também, todo o caminho até aqui. Então eu gosto deste 12. Então o que posso fazer é alinhar as minhas etiquetas assim. Certifique-se de que eles estão alinhados e eles podem posicioná-los. Por exemplo, C 123, tudo bem. Agora vamos alinhar nossos negócios e ver onde eles podem ir. Eu Se eles estão alinhados e ver, por exemplo, 123, tudo bem. E eu acho que há muito espaço para respirar, então está tudo bem. Mais uma coisa é com a carga mais. Então, na verdade, reorganize-o um pouco. Então ícone de seta e ver 20 pixels e certifique-se de que ele está no centro como este. Então agora está tudo bem. E eu só quero verificar se eu cometi um erro no anterior também. Onde está, aqui está. Nós fazemos isto. Então olhe para este nó, está tudo bem. Você pode ver que a flecha está bem aqui. Mas cometi um erro aqui. Então vamos organizar isso um pouco mais tarde também. Isso é bom. e certifique-se de que está no centro assim. Direcção. Tão conhecido que isso está concluído. Vamos agora voltar para a seção de disco. E finalmente, vamos trabalhar neste último. Então estamos em 40. Assim como. E eu vou me ajustar para o nosso novo layout de grade como este. Posso deixá-los assim. Ou eu posso ter meu próprio layout separado, o que eu realmente vou fazer. Então vamos ver, estamos em 20. Agora podemos organizar os Ds para serem assim. Então, 20, vamos ver lambdas. Então, 20, eu posso expandir isso para descer. Isso pode ser em 20 eu dat. E vamos ver onde estamos aqui. Então, 22, vamos selecionar todos estes, 1-2. Eu vou colocar isso para baixo 12, então 20, e eu posso trazer tudo para dentro Então o que posso fazer é ter certeza que isso está centrado. Eu posso selecionar todos esses, ter certeza que eles estão alinhados à esquerda. Eles estão centrados dentro do círculo e da própria obra de arte. Talvez para ouvir, e é basicamente isso. Nós já completamos isso, o estado do nosso design apenas mais com um pouco assim. E isso é basicamente para a versão tablet. Vou cortar este ponto para algum lugar por aqui. Vamos ver 1234. Então isso é perfeito. E o que podemos fazer é clicar em pré-visualização apenas para ver onde estamos por causa da turbulência, você pode obviamente rolar para baixo. Então eu acho que essa informação parece muito mais limpa e muito mais bem organizada assim. Então talvez possamos até remover essa informação porque ela mostra a validação aqui mesmo. Então, só vai dizer suas cartas e eu acho que vai ficar tudo bem. Isso também é bom. Isso está ótimo. Então vamos agora rapidamente para isso. Então ele recebe essa informação e tudo bem. Vou desagrupá-lo porque não precisamos mais dele como texto e grupo. E isso é basicamente a única coisa que nos resta fazer agora é criar essa navegação. Então vamos fazer isso. Eu posso, por exemplo, chamar este tablet top agora. Ou posso até chamá-lo de laboratório móvel, no entanto, assim. E vamos ver o que podemos fazer com isso. Para que possamos apertar a tecla Control. Podemos ir para o estado da guia. Dentro deste estado de topo, vamos expandir a nossa mesquita onde está, aqui está. Então eu vou expandi-lo todo o caminho até este ponto de corte aqui. Para que eu possa aproximar um pouco mais. Assim como. Está tudo bem. Eu também vou fazer o mesmo para este top agora Vg, por isso vai ser em 100. Vai até aqui assim. E, finalmente, nosso ícone de menu principal estará em seu estado de tabulação. Então, as dívidas. Agora vamos em frente e rapidamente protótipos e ver o que temos até agora. Então, eu vou localizar o meu ponto de guia Menu Principal de um clique em anúncios. Vou escolher Auto animar. Escolha o estado está dentro de 0,6 segundos porque é isso que usamos no tempo anterior. E então irei para o estado de tabulação, abra o clique principal do ponto do Minitab. Vou para o estado padrão e vamos ver rapidamente o que temos. Então vamos voltar ao nosso estado padrão. Aperte a visualização, amplie este clique aqui. Entra, nós temos. Temos uma pequena animação que nos mostra tudo o que precisamos ver. E eu realmente acho que parece bom porque em painéis nos mostram que ele é selecionado. Todos estes estão acinzentados. Você pode ver que é você, Michael Jacobs. Você pode até mesmo posicionar descrito aqui se você quiser. Mas acho que está tudo bem. Nós ainda temos este agradável e emissão porque usamos o mesmo ícone. Acho que está ótimo. E eu realmente tomei delta, este design saiu para ser muito agradável e muito feliz com ele. E é basicamente isso para este vídeo. No próximo vídeo, no último vídeo sobre design responsivo, vamos trabalhar no tamanho do celular. E basicamente o que vamos fazer é usar exatamente as mesmas configurações. Só vamos fazer algumas mudanças. Então você pode ver como tudo isso vai parecer. Então, vemo-nos lá. 63. Design responsivo 8: Vamos agora terminar nosso design responsivo para o painel. E eu quero pedir desculpas antecipadamente para os funcionários em segundo plano, mas eu não posso fazer nada sobre isso é apenas alguns vizinhos barulhentos sabendo algum trabalho. Então, a última coisa que precisamos fazer é mais uma vez clicar aqui, controlar D para duplicar este quadro de dardos, clicar duas vezes aqui. Copie este texto. Vou pular aqui e clicar duas vezes e vou apagar todas essas informações e simplesmente controlar V para colar nesse texto. Novamente, agora as dívidas concluídas, o que precisamos fazer é, obviamente, reduzir o tamanho do nosso conselho para decidir ou 375. E vamos rapidamente fazer isso acrescenta ou 375 assim. Vamos usar para colunas como essa. E vamos ver, temos 306120, então vamos usar esses valores. Então 306120, vamos fazê-lo novamente ao início 6122. E aí está. Eu realmente não sei por que Adobe XD faz este pesos manter Y continua trazendo estes Berlioz, por que queremos mudar a primeira vez, mas ele está fazendo este tapete complexo em segundo plano. Talvez por essa razão não o faça. Vamos agora ir em frente e, em primeiro lugar, lidar com a nossa navegação. Então, para fazer isso, vou ter que baixar tudo isso. Porque se eu começar a abaixar meu logotipo, mas você pode ver como isso se parece. Então eu vou em frente e arrastar e soltar meu logotipo dentro assim. E eu vou posicioná-lo aqui mesmo. Então este é o meu logotipo PNG e eu estou basicamente fazendo a mesma coisa que eu fiz anteriormente quando eu mostro a vocês isso. Sim. Anteriormente. Então vamos nos esconder. E isso talvez diminua para algo assim, talvez. E o que eu também posso fazer é pular dentro da nossa navegação móvel aqui mesmo. E eu posso copiar meu logotipo da Cure, e eu posso copiar isso do herói. Mas porque já criamos isso aqui, não vamos nos incomodar. Vamos pegar o logotipo porque é o mesmo. Então eu vou pular aqui mesmo. Vou usar o logotipo e vamos ver o ícone do menu principal, controle soo. Vamos voltar para aqui. Pule dentro do Controle V. Vou posicioná-los no lugar assim. Vou apagar este. Excluirei meu ícone de menu principal, Menu principal, toque em ponto. Vamos ver onde está. Então, vamos posicioná-lo aqui. Por exemplo. Vamos verificar a cor apenas para que eu possa clicar sobre ela por dívida e eu vou aumentá-la para algo assim. Acho que está tudo bem. E vamos ver. Top agora BG é este um ponto. Agora BG é disciplina sólidos trazem os dois assim. Vamos posicionar nosso logotipo e nosso ícone de navegação, algo assim. E eu posso simplesmente selecionar esses dois. Selecione este e certifique-se de que todos eles estão no centro. Como isso. Vou me certificar de que meu ícone de menu está alinhado com meu logotipo está alinhado, o que é. E isso é bom. Dot agora BG e vamos agora lidar com máscara de alcatrão. Então fale agora BG, vou trazê-lo todo o caminho até aqui, como dívida. E agora vamos lidar com todas essas outras informações. Então vamos ver, temos essa barra lateral. E como você pode ver, a barra lateral funciona bem. Então tudo funciona bem. Avatar está lá. Michael Jacobs é o melhor achado de Derrida agora BG. Então, se eu descobrir, como você pode ver, podemos ver claramente toda essa informação, o que é bom. Vamos simplesmente lidar com top agora BG e eu acho que vai funcionar muito bem. Então o que eu posso fazer neste ponto é realmente copiar todas essas informações para obter o Controle C. Eu posso ir para o estado da tabulação, saltar para dentro, apertar Controle V. Eu excluiria isso, isso, isso, isso, isso, e apenas Deixe isso aqui. Assim como. Vou mudar meu ícone de menu principal para tocar assim, porque já tocamos nele. Vou expandir minha máscara para que ela possa ir até aqui, assim. Por isso, cobre a totalidade disto. O que também podemos fazer é escolher todas essas informações e empurrá-las para a esquerda. Dois são grade para que ele possa se alinhar com a nossa grade bem assim. Não sei por que Al-Azhar não está alinhado como gostaria de dúvida. E talvez eu possa alinhar meu texto a um ponto discreto, o que é muito bom. E é basicamente isso. Esse é o nosso estado de tabulação. Isso é voltar para o estado padrão. E o que eu quero fazer é ajustar isso aqui também. Então deixe-me mover minha barra lateral para a grade. Deixe-me mover meu avatar. E Michael Jacobs deveria ir aqui. Hábito leiteiro Então, agora que tudo isso está alinhado e funcionando bem, agora é lidar com o nosso conteúdo. Então, em primeiro lugar, podemos alinhar nosso conteúdo assim. E como você pode ver, você pode saltar direto para dentro e lidar com esses porque eles são realmente os mais fáceis. Cartão. Não há realmente nada para mudar. Mas vamos primeiro saltar para dentro e lidar com as nossas mensagens. Então, se eu levá-lo de volta ao painel do nosso site, desculpe, site responsivo. Então aqui estamos nós em 24 parafusos e este texto é 16 irregular. Então vamos agora fazer o mesmo aqui. Então estamos a 24 volts para este. Então vamos encontrá-lo aqui. Dario. E isso vai ser 16 irregular. Aí está você. Agora as dívidas terminadas. Eu não acho que eu preciso fazer mais nenhuma mudança porque ele corta o texto direito na linha. Mas se formos mais longe, então você vai envolver o texto, por exemplo, assim, para que possamos colocar dezembro e para baixo nesta linha. Mas acho que está tudo bem para o nosso caso por enquanto. Vamos agora lidar com o espaçamento bem rápido. Então, se eu te levar de volta para aqui, se bem me lembro, eram 80. Mas vamos verificar. E sim, são 80 por todo o lado. Então vamos fazer o mesmo truque para este. Então eu vou selecionar meu conteúdo e vamos ver onde estamos. Estamos em 50, então 123, estamos em 80. Vou posicionar isto vai ser 35 mas 40, assim. Isto é 40 a partir dele também. E agora vamos lidar com o nosso conteúdo. Agora, o que eu vou fazer primeiro é simplesmente estender este cartão. Então aqui eu não vou mudar o conteúdo e não vou lidar com nenhuma coisa velha morta. O que vou fazer a seguir é usar tudo isso. Então vamos ver, isto são guardas. Use estes dois no fundo. E eu também vou expandir o meu quadro para que ele possa ir até o fim. E lembre-se, este é o seu ponto de rolagem ou você está acima do vento de falha, por exemplo. Então, ele só vai descer todo o caminho. Então vamos ver, talvez este 80 funcione, talvez 4234, porque eu acho que é muito melhor agora porque nós temos o mesmo espaçamento entre todas essas cartas. E se verificarmos aqui temos 40, o que é ótimo. E agora vamos rapidamente em frente e mover todos esses para baixo assim. Vou mover minha guia de ajuda para estar alinhada a aqui. Vamos ver, estamos em 40, tudo bem. Basta ajustar isso assim e você não precisa fazer mais nada. Isso também é ótimo. Agora o que nós vamos fazer para as transações e para isso é que nós temos que planejar um novo layout porque obviamente isso não vai funcionar assim. Portanto, não podemos alterá-lo, não podemos editá-lo nesta fase. Então, o que temos que fazer é simplesmente ajustar como todas essas coisas serão parecidas. Então o que eu vou fazer primeiro é realmente lidar com este porque é muito mais fácil. Então eu vou pular para dentro. Todas as despesas, beleza. Vou expandi-lo para ouvir uma mesa de posição para ouvir. E o que eu posso fazer é simplesmente usar isso e isso, posicioná-lo como uma posição de aversão. Então eu vou posicionar meu gráfico bem aqui no centro. E vamos ver, agora eu posso lidar com esses para que eu possa ter certeza de que isso está no centro. E posso usar minha ferramenta de retângulo e posicioná-la daqui até aqui. Use-o e este texto para se certificar de que está no centro. Então posicione meu retângulo daqui até aqui. Então desta borda para esta borda, certifica-se que estes dois estão em um centro como este. E então eu removi meu retângulo. Agora, o que eu posso fazer com este gráfico é que eu vou deixá-lo lá, mas deixá-los lidar rapidamente com estes. Então o que eu posso fazer é basicamente colocar dois ao lado do outro. Então eu posso colocar comida, por exemplo, aqui. Utilitários e vamos ver os pagamentos do carro pode ir bem aqui. Então, posicionou-os para serem, por exemplo, 40 um do outro. Vamos ver onde estamos. E uma mesa para estragar o meu espaçamento assim. Então 1234. E você pode posicionar precisa estar no centro. Então eu posso posicionar perto bem aqui e comida aqui só para que nós tenhamos. Aproximadamente o mesmo espaçamento. Então eu vou colocar esses dois juntos assim. E então certifique-se que eu faço 1234, assim. E os laticínios têm. Vou posicioná-los 40 para baixo. Então, em 1234, eu vou fechar isso aqui mesmo. Você pode usar guias, mas eu achei isso, isso muito mais simples, muito mais rápido, e eu posso terminar com isso e mais um. Então todas as despesas estão concluídas. Agora vem a parte mais complicada basicamente, porque você ainda quer apresentar todas essas informações aos seus usuários. Ainda queres dizer-lhes onde gastaram o dinheiro. Mas só para lembrar, este é o seu painel básico. Então, se eu te levar até aqui, ao nosso menu, ao estado de profundidade, você pode ver que estamos no painel. Então, estamos no painel básico mostrando apenas as informações básicas para obter informações adicionais sobre suas transações. Você está indo para ir para as transações toque. Então você está indo para tocar de navegação de menu, você está indo para ir para a guia de transação e, em seguida, você vai ser capaz de acessar sua transação e, basicamente, aplicá-lo para o que você quiser. Então, como vamos fazer isso é que vamos fazer algumas mudanças no nosso layout aqui mesmo. Primeiro, vou pular para dentro e estender tudo para baixo, assim. Eu vou ter certeza de posicionar isso bem aqui assim. E o que eu vou fazer é descobrir um layout que vai ser o melhor para essas coisas. Então eu vou mover isso aqui, ter certeza que está em um centro, 1234. Acho que vamos ter espaço suficiente, mas se não, vamos lidar com isso mais tarde. Então, vamos começar agora. Vamos ver. Podemos, por exemplo, escolher isso come aos 18 anos. Para podermos ajustar o pai. Mas eu não vou fazer isso. Vou simplesmente mover todos estes para baixo. Por isso dá-me espaço suficiente. Vou mudar o meu preço assim. Vou certificar-me de que está alinhado. Dan 20. Vejamos, isto é aos 20, o que é bom. Posso posicionar isto aqui embaixo. Certifica-te de que são dez. E eu posso, por exemplo, ver o que posso fazer aqui. Talvez eu possa posicionar isso para alinhar com isso e alinhar minha comida assim e hábito de laticínios. Agora nós completamos esta seção. Então agora vamos seguir em frente e lidar com outras seções. Você pode, obviamente, explorá-lo com esses layouts tanto quanto você quiser. Mas acho que este é bom para os nossos propósitos. Então, dez, eu vou posicionar perto de ser 20. Então eu vou colocar o preço para baixo assim e vamos ver 12. Porque, obviamente, essas empresas podem cortar. Então, por exemplo, talvez ele possa apenas ver Zara, talvez possa apenas dizer Starbucks. Quando você não tem espaço suficiente e você vai ainda mais baixo com o seu, com o seu tamanho. Então vamos com isso. Eu vou mover isso mais uma vez vai ser dez para baixo, assim. Eu vou colocar dois utilitários aqui, ter certeza que eles são 21. Mais uma razão que eu estou colocando o preço e para baixo eo nome de D, Então utilitários e assim por diante é porque se eu quiser, por exemplo, adicionar mais a isso. Então, por exemplo, vamos apenas imaginar que essa despesa não foi de US $270,73, mas digamos por US $1000 ou US $20 mil ou qualquer coisa, então vamos expandir esse preço para a esquerda e reduzir isso para a esquerda. Espero que isso faça sentido. Então, mais uma vez, neste caso, em vez de 0 e eu armazenar, será apenas Zara. Então nos dá mais espaço e pode ir automaticamente. Então codifica, ele pode cortar automaticamente este nome enquanto expande este preço para a esquerda. Espero que não tenha feito sentido. Finalmente, vamos lidar com esses outros. Então eu vou posicionar isso e descer até aqui e ter certeza que é às dez. Como este. Eu vou ver mais disso aqui, então 12. E você pode ver claramente por que eu fiz isso, para que ele não corte com o nome bem aqui. Vamos posicionar isto rapidamente para estar aqui. Certifique-se de que está ajustado para 20. E vamos fechar estes. Certifica-te de que isto é aos 40. Vou levar isto no caminho até aqui para que nos dê espaço suficiente. Posicionado é aqui, assim, e certifique-se de que a comida está alinhada aqui. E mais uma vez, se você não quer que isso seja assim, eu posso rapidamente me posicionar para que eu possa explicar. O que você também pode fazer é trocar esses lugares. Então, o que você pode fazer é em vez de posicionar pagamentos de carro, o que você pode fazer, por exemplo, é colocar o logotipo de pagamentos de carro próximo, desculpe, ícone de pagamentos de carro ao lado deste nome. Então, ao lado de Mercedes Benz, por exemplo. E você pode colocar o preço acima da dívida maneira. Você vai ser capaz de ter muito mais espaço para brincar. Então você pode posicionar o preço aqui. Em vez de pagar o carro, este espaço vai ficar vazio. Então, não importa quanto tempo o nome da empresa é, ela pode se expandir para a direita. Enquanto esta lei, este ícone pode ir ao lado do nome da empresa real. Então você pode fazer isso também. Você também pode codificado por cores para corresponder com isso. Então nós podemos apenas para mostrar isso rapidamente, deixe-me ir em frente rapidamente e terminar este layout. Assim, você pode escolher como você deseja que este layout se pareça. Então T2. E deixe-me posicionar meu preço assim. Este é um 20. Deixe-me mais esses dois. Então 2341234. Vou escolher este movimento para aqui. Como isso. O que estou fazendo agora é simplesmente usar exatamente as mesmas informações, como fazemos em todo o nosso design. Eu só já estou pedindo de maneira diferente. Mas o que você pode fazer é olhar e dar um exemplo para a comida, digamos. Então o que podemos fazer é simplesmente posicionar isso aqui. Use a etiqueta de comida, mas exclua e texto de comida. Então nós somos apenas deixado com o ícone basicamente. E você pode posicionar esse ícone aqui. E moveu um nome como este, por exemplo. Em seguida, selecione essas ferramentas, certifique-se de que elas estão no centro. E agora o que podemos fazer é simplesmente aplicar essa mesma cor ao nosso texto. Como este. E rebanho leiteiro. Este layout é muito mais limpo, parece muito mais agradável. E o que você também pode fazer é, por exemplo, trocar de lugar, viu café Starbucks pode crescer em cima e abaixo pode ir para exemplo hoje eo preço n, o que mais você quiser. Mas se você achar que esse layout é melhor, o que realmente faz isso, vamos rodar com ele na verdade. Mas você tem que falar com os desenvolvedores sobre isso. Então você teria que exportar essas camadas separadas e eu vou compartilhá-lo mais tarde com você. Mas primeiro, vamos completar os DES. Então, uma transação, vamos ver Claude Stagg e estamos incluindo todas as cargas de trabalho texto. Vou certificar-me de que este ícone está alinhado com o meu texto assim. Meu pai duque dez, foi dez? Aqui? - Foi. E certifica-te de que este texto da Zara é desta cor. E simplesmente posicionar seu preço para cima. Isso é bom. Vamos lidar com todos esses outros. Então eu vou usar minha tag utilitários, remover meu texto, posicionar meu ícone utilitários aqui. Certifique-se de que este texto vai dez, o preço sobe. Este texto vai para esta cor. E esta camada já parece matemática muito mais agradável. Como eu disse, eu só queria mostrar a vocês qual é a maneira ideal para os desenvolvedores não mudarem demais. E desta forma, design e experiência real do usuário vai ser muito melhor, muito mais limpo. Mas os desenvolvedores vão tristemente ter esse trabalho extra, que eles terão que fazer. E você vai ter o trabalho extra porque você vai exportar essas tags separadamente e dispostos a compartilhar isso com você mais tarde. Então vamos lidar com a etiqueta de comida e foi remover o texto. Posição pode ícone lambdas, movido para aqui. E verde no centro, assim. E finalmente, vamos lidar com as roupas e vamos terminar. Eu preciso mover todo o meu ícone que usa este texto mais com dez. E finalmente, mova isso também. E lá temos. Nós completamos nosso celular. Para ele e e painel, mas posicionado é para ser 40. Então 1234. Vou fechar meu braço ou ousar. E veja 1234. Vou fechá-lo lá. Mais uma vez, você pode usar guias, mas no meu caso, achei muito mais simples. Eu, isso que eu deveria ter é 40 hábitos cativantes. Agora é rapidamente pré-visualizar isso, veja o que fizemos até agora. E deixem-me mostrar-vos desta forma. Então, se eu tocar bem aqui, eu tenho que protótipo na verdade. Então eu tenho feito isso rapidamente. Mais uma vez, vamos tocar no nosso logotipo. Ele vai nos levar para, vamos ver, guia de autonomia. E vamos para, vamos ver, vamos ver, vamos ver o que eu fiz. Tão terrivelmente fácil. Nota 0.06 segundos, meu pai. E vamos para o estado da tabulação. orgulho deles aqui. Estado padrão. Vamos ver se fizemos o que acho que fizemos. Vamos ver, TAP. Eu sabia porque eu tenho que criar o ponto de toque para o nosso ícone de menu, ícone. Então deixe-me pular aqui. E é por isso que você tem que criar esses pontos de profundidade chatos. Porque se você clicar no ícone como você acabou de ver, e deixe-me mostrar-lhe isso mais uma vez. Então, se eu clicar no ícone vai animar o ícone, não toda a animação do menu. Então é por isso que precisamos tristemente colocar estes ponto Guia Menu Principal. E eu vou incluir o modelo aqui atrás do ícone Menu Principal. Vá para a posição para decentrar. Como este. Certifique-se de que está em algum lugar por aqui, o que é bom. Dan, vamos clicar no protótipo. Então, no próprio ponto de guia, Clique nele. Autonomia está na nossa aba 0.06. E vá para o seu estado de tabulação assim. Encontre-o aqui. E eu tenho que colá-lo aqui também. Então você movê-lo para aqui e movê-lo para aqui, logo abaixo do meu protótipo de ícone, clique nele. Toque em ponto. E vamos para o Estado Padrão. Vamos verificar e ver se funciona. E agora vamos clicar em pré-visualização. Ainda não funciona. Oh, aí está. Demora muito tempo por alguma razão. Não sei porquê. Talvez meu computador esteja apenas atrasando. Vamos verificar mais uma vez. Certo, então nada acontece de verdade. Oh, eu vejo porque eu preciso clicar em algum lugar lá fora. O erro foi meu. Mas de qualquer forma, aí está. Você pode ver como isso parece legal. Então eu tenho que clicar em algum lugar apenas aqui porque se clicarmos no próprio ícone, ele irá animar o ícone em si. Então você pode ver como isso funciona e você pode ver como parece que ainda temos esse efeito de borrão agradável. Se você acha que é demais neste caso, você pode abaixá-lo por causa de toda essa cor branca. Isso só faz com que tenha sido demais, talvez. Mas acho que funciona muito bem. Mais uma coisa que quero mostrar a vocês é que ainda temos essa navegação, então estamos no estado padrão. Eu posso clicar aqui. Então posição fixa quando rasteja porque quando eu visualizo e começo a rolar, você pode ver, nós não vemos a navegação no topo. Então o que você pode fazer é selecionar essa área de navegação. Você pode fazer isso tanto para tablet quanto para celular porque você pode ver que este é o nosso ponto de corte para o tablet. Então eu vou clicar em Vans posição fixa rastejando. Vou fazer o mesmo por este. E acho que não fiz isso pelo celular. Então vamos ver. Eu posso fazer isso por todos eles. Então isso está consertado. Isto está consertado. Mas isso não é porque mudamos. Então vamos em frente e voltar para o painel e ver como ele se parece agora. Então, agora, quando você começa a rolar, você pode ver que ele está fixo no topo e ainda tem esse efeito brilhante agradável. Mas eu tenho que remover a cor do meu ponto de toque para o logotipo porque você pode ver essa cor aqui. Mas basicamente você tem a essência disso. Você pode ver como tudo isso funciona. Então vamos em frente e corrigir isso rapidamente. Por isso, é o ponto principal Menu Tab. Você pode ver que temos a cor. Remova isso. Vamos para o estado da guia e ver se ele ainda está lá. - É. Estado padrão. E agora, quando eu aperto a visualização e começo a rolar, você pode ver através e tudo funciona como deveria. Navegação funciona muito bem. Bem ali também. Pode isso e remover a animação dele porque você pode ver, vamos em frente e corrigir isso para que ele não nos confunda. Então protótipo. Vamos selecionar isso e ver o que é. E eu vou simplesmente tocar lá fora. O que é isto? Cada ponto 4R Tab. Ok, então está tudo bem. Eu posso realmente saltar para dentro e estender este ponto de passo todo o caminho até a borda. E eu posso fazer o mesmo em um estado de tabulação. Para que eu possa encontrá-lo aqui. Ponto de tabulação expandido para aqui. E vamos ver, quando eu tocar no meu ícone, ele não vai a lugar nenhum. Então vamos consertar esse hábito de laticínios. Agora. Vamos testar e ver se isso funciona agora. Ou talvez ainda melhor porque é transparente apenas para remover qualquer dúvida. Vamos ver onde estamos no estado padrão. Posso usar o meu ponto de profundidade e movê-lo para cima do meu ícone de menu principal. Dessa forma, eu realmente vou tocar no meu ponto de torneira. Vamos alterá-lo aqui também em uma espécie de estado de tabulação. Então vamos ver onde estamos nesse ponto. Só mais retorno top, laticínios fora. Volte para o estado de design e padrão. Clique em Visualizar. E agora, quando clicamos lá, como você pode ver, tudo funciona como deveria, como deveria fazer. E eu acho que esta velocidade de 0,06 fácil e funciona muito bem com o nosso design. Então hábito de laticínios, um pouco mais de rádio, mas eu ainda tinha que explicar tudo o resto que estava lá para explicar mais uma vez e última vez. Se você quiser se organizar, essas placas são um pouco melhores do que eu tenho no meu caso. Por favor, faça. Mas mais uma vez, eu fiz isso porque eu não desenhei o resto das páginas para o discurso. E é por isso que eu me deixei um pouco mais de espaço aqui no caso de um projeto-los sempre. Mas se não, se este é o seu projeto, então simplesmente certifique-se de organizá-los um pouco melhor. Você pode clicar e arrastar, reposicioná-los da mesma forma que fiz em todo o nosso design. Você pode, por exemplo, posicionar essas armações índias aqui, em seguida, todo o seu design em uma linha, ele responsivo na outra linha, assim por diante. Então, cabe a você como você quer organizar isso. Você pode ver, você pode rolar para cima e para baixo para ter mais espaço e XD real adicionar mais espaço. Então, basicamente, não importa quantas páginas você tem, você ainda pode ter essa rolagem e adicionar quantas dessas páginas quiser. Então, basicamente, é isso para esta parte do curso. Completamos nosso design responsivo. E mais uma vez, para um design responsivo, se você quiser. Eu fiz isso por causa do tempo e propósitos de tempo. Se você quiser, por favor vá em frente e faça um design responsivo para todos estes agora você sabe como ele pode ser concluído em como eu gostava de fazer as coisas. E eu mostrei para design de site, bem como design responsivo para painel de controle. Na próxima seção do curso, vamos começar a falar sobre compartilhamento e feedback. Vou dizer-lhe o que você precisa para pedir feedback ao seu cliente, para o tipo de que você deve estar procurando em um feedback, não apenas o que você acha deste design, como você pode melhorar ainda mais o design e como você pode fazer as coisas no mínimo de revisões possível. Porque você vai armar para o seu cliente dessa forma. Em seguida, depois disso vem exportar. Então eu vou mostrar a vocês a estrutura exportadora. Como pode compartilhar ácidos com clientes e desenvolvedores e como você pode utilizar melhor o espaço que você não desperdiçar o espaço em seu computador para qualquer um desses projetos porque depois que eles concluídos, você ainda tem que manter esses arquivos para alguns tempo no caso do cliente quer algumas alterações adicionais feitas a eles. Então agora você tem que pedir a eles para enviá-lo de volta para os arquivos e perder tempo dessa maneira. Finalmente, vamos encerrar este curso. Vamos chegar a uma conclusão e recursos. Vou mostrar-lhe muito, você pode obter todos esses recursos que falei no curso, premium, bem como grátis. Vemo-nos na próxima lição em que vamos começar a falar sobre partilha. 64. Importância da partilha: Agora que o design está concluído, vamos em frente e falar sobre o compartilhamento. E obviamente, como eu mencionei várias vezes ao longo deste curso, você deve compartilhar assim que começar com wireframes. Mas mais uma vez, não fiz isso porque queria mostrar tudo ao longo do processo e começar a compartilhar. Então eu não os confundo mais com muito mais informações do que você precisa saber nessa fase específica, especialmente se você está começando. Porque mais uma vez, tudo isto pode demorar muito para algumas pessoas. E para algumas pessoas, tudo isso pode ser muito complicado. Mas como ele disse no início deste curso, se você já sabe algumas dessas coisas e você só quer aprender coisas adicionais que você não sabia antes. Ou ele só precisa melhorar o seu conhecimento do Adobe XD ou deste processo de design, então simplesmente saltar em frente e assistir tudo o que eu estruturei discurso como este. Então, por qualquer motivo, se você quiser saltar entre as seções do curso. Então, se isso é wireframing de papel, wireframing em XD e design responsivo e, finalmente, compartilhar. Você pode saltar entre todas essas seções e simplesmente aprender o que você realmente precisa aprender com essa seção específica. Então, como eu disse nesta seção do curso, vamos falar sobre o compartilhamento no Adobe XD. opção de compartilhamento é fantástica. Anexo D, porque eles têm essas três opções, design, prototipagem e compartilhamento. E porque compartilhar como seu próprio é realmente uma das coisas mais importantes do processo de design. Porque nessa fase, você está compartilhando seu design com o cliente e pedindo feedback. E o feedback é extremamente importante, obviamente porque molda o produto é enviado para design de tal forma que ele precisa ir. Porque às vezes você terá essa visão clara em sua cabeça onde você precisa ir com esse design, mas outras vezes você não tem. E é por isso que você precisa do cliente para que eles aprovem esse projeto, para que eles desaprovem. Assim que você obtê-lo, assim que você pode obter o feedback adequado do seu cliente, melhor, porque mais cedo ou você pode moldar o produto e o design de tal forma que ambas as partes ficarão felizes. Tanto você quanto o cliente, apenas certifique-se de entender que você nunca estará 100% satisfeito com seu design. O cliente pode não estar 100% satisfeito com o design, mas também é bom porque, como eu disse, este é um processo contínuo. Você vai investir muito tempo ao longo deste processo, explorando depois refinando. Se você, especialmente se estiver lidando com grupos focais, especialmente se estiver lidando com pessoas que estão lhe dando feedback fora deste projeto. Então, como eu disse, você está procurando um público-alvo em sua entrevista com essas pessoas, seja pessoalmente ou on-line, então você vai focar todo o feedback que você recebeu desse grupo de foco e dessas pessoas neste design. É por isso que é realmente importante entender como o compartilhamento pode moldar o projeto e como o compartilhamento pode moldar o produto em geral. Então, a coisa que você precisa perguntar ao seu cliente quando começar a compartilhar são todas essas perguntas focadas. Então o erro número um que os designers cometem é, o que você acha deste design? O cliente não é um designer. Se eles fossem, eles projetarão isso sem você, então eles não precisarão de sua ajuda. Eles precisam de sua ajuda porque você é o designer e não eles. Então você precisa apontá-los em uma direção específica sobre seu design. Então, por exemplo, quando você está começando com wireframes e quando você está compartilhando wireframes e deixá-los saber com antecedência, este não é o design, este não é o layout final. Estas não são as cores finais. Esta não é a tipografia final. Este não é o estilo final deste design. Este é apenas o layout básico. Certifique-se de dizer a eles que a dívida é assim. Eles vão começar a pensar sobre o design de forma diferente. E eles vão dizer, ok, então isso é apenas uma estrutura. O que precisamos mudar sobre a estrutura. E então uma vez que eles entendam isso, certifique-se de fazer-lhes perguntas específicas. Então, por exemplo, o que você acha sobre o espaçamento entre esses dois elementos? E acho que está tudo bem. Acho que precisamos de mais dever em cadete. Este branco em cinza, por exemplo, funciona bem para você. Você acha que vai funcionar bem com o público? Como você gosta desta configuração? Por exemplo, se o texto estiver à direita, imagens à esquerda, acha que isso parece bom, ou você deve pensar que devemos trocá-las? Fazendo isso, devemos colocar a imagem no topo, texto na parte inferior. Então esse é o feedback que você precisa do seu cliente. Quando eles dizem, “Oh, ok, talvez devêssemos fazer essas mudanças, tudo bem. E uma vez que você começar a receber esse feedback, você pode começar a aplicá-lo ao seu design. Então, uma vez que você compartilhar seu design, st ing, certifique-se de concentrar sua atenção em alguns desses detalhes porque a maioria das vezes os clientes não vai gostar de colorir por algum motivo. É por isso que estamos usando esses componentes. É por isso que estamos usando essas cores conectadas no XD. Porque se eles não gostam de colorir por qualquer motivo, você pode alterá-lo com apenas um simples clique. Aliviar o texto é um pouco grande demais, você só um pouco pequeno demais. Certifique-se de dizer a eles que ele vai parecer apenas um pouco diferente mais tarde no código que vai economizar muito tempo com eles mudando todas essas pequenas coisas. E ele vai mostrar dois DEM, del, enquanto o design vai ficar assim, em aspas, a juventude nunca pode ser 100% precisa só porque a forma como o código funciona. Então será algo como 9697%, mas não 100. Então, apenas certifique-se de dizer a eles que também para o responsivo, se eles gostam, como este design responsivo parece, mas eles não estão certos sobre algum tipo de coisas. Certifique-se de dizer-lhes que você vai resolver isso com o desenvolvedor da melhor maneira possível para o próprio site. É por isso que eu estava dizendo no último vídeo de design responsivo, por exemplo, para esses ícones, você pode ocultar o texto desses ícones e desses rótulos. Mas você precisa falar com seus desenvolvedores e você precisa dizer ao seu cliente. Então, isto vai ser assim. E por causa disso, então você precisa fazer o seu raciocínio, não apenas fazer o design e enviar-lhes uma esperança para o melhor. Então você precisa explicar a eles por que você escolheu esses tipos de decisões e por que você fez as coisas da maneira que você fez. Porque dessa forma eles vão olhar para um design diferente porque você está se aproximando dele do ponto de vista lógico, não apenas para fazer as coisas parecerem bonitas. Espero que entenda o quão importante é o feedback, quão importante é o compartilhamento. E no próximo vídeo, vamos entrar no Adobe XD. E mostrarei todas as funcionalidades que o Adobe XD tem em termos de compartilhamento comprado tanto para clientes como para desenvolvedores. Então, vemo-nos lá. 65. Opções de compartilhamento para design: Finalmente, deixe-me agora mostrar todas as opções de compartilhamento que o Adobe XD tem. Então, mais uma vez, se você olhar bem aqui nós temos design, protótipo e compartilhamento. E se eu esconder minhas camadas bem aqui, você pode ver isso ainda melhor assim. Então, nós projetamos o compartilhamento de protótipos. E mais uma vez, design é onde você está fazendo todas essas mudanças em seu design, onde você está criando, onde seu embarque Agora todos esses elementos, prototipagem é onde você está conectando todos esses elementos diferentes, que eu lhe mostrei ao longo deste curso. E, finalmente, compartilhar é se você quiser compartilhar esses projetos, criações, protótipos com seu cliente, desenvolvedores ou equipe de testadores. Então vamos rapidamente passar por isso. Assim que você clicar no compartilhamento, você pode ver que ele está dando a você todas essas opções diferentes. Então, quando eu clicar no design do meu site, comer completo Saiba que criamos esse fluxo e ele vai me mostrar que o fluxo de dívida está conectado. É aí que você pode começar a compartilhar. Então é por isso que temos todos esses ícones Homepage. Então, se eu ampliar todo o caminho perto daqui, se eu navegar zoom assim, você pode ver que nós temos este pequeno ícone de página inicial bem aqui, que basicamente significa que esse é o fluxo para seus wireframes. Se eu clicar nesse, você pode ver que nada realmente acontece. Mas se eu clicar em meus wireframes, você pode ver que podemos compartilhar apenas uma opção, que significa que se você quiser compartilhar isso com seu cliente, nesta fase, você pode compartilhá-lo porque esse era o único design que realmente tínhamos em nosso relatório. Se você se lembra, acabamos de ter essas 2468 páginas diferentes. Então nós só temos esses. Nós não tínhamos nenhum painel e especialmente nós não tínhamos qualquer design de site em tudo. Então, apenas certifique-se de entender que você pode compartilhar esses fluxos. Então é por isso que eu criei todos esses fluxos separados para partes separadas do discurso e deste projeto. Mas se você quiser compartilhar todas as telas com seu cliente, então você não cria nenhum fluxo. Você apenas continua criando, criando, criando sem rotular todos esses fluxos como fizemos ao longo deste curso. E assim você pode compartilhar todo o seu processo com seu cliente e sem fazê-los notar todas essas outras coisas. Esses fluxos são extremamente úteis, especialmente se você estiver compartilhando partes específicas do seu design. Como, por exemplo, se eu clicar em meu design de site responsivo aqui, e se eu clicar na minha página aqui abaixo. Então você pode imaginar que você pode compartilhar essas partes específicas do seu design com seus testadores, por exemplo. Então eu posso compartilhar meu design de site responsivo com eles e assim por diante. Eu não posso compartilhá-los agora, como você pode ver, porque antes de tudo, eu criei para esta página, que é apenas a nossa página de layout, então eu não posso compartilhá-los. Mas se você está conectado com quem conectou todas essas páginas. Como fizemos, por exemplo, com nosso design de painel , você pode compartilhá-los com seus clientes, desenvolvedores de desktop e assim por diante. Falando em compartilhamento, eu posso clicar nos designs do meu site para que eu possa começar a partir daqui. Porque lembre-se, todo esse processo está conectado porque começamos a partir da página inicial e, em seguida, movendo-se ao longo dessas páginas para as páginas de login e inscrição. E então nos mudamos para aqui. Então, qual é o design do painel. Mais, Passamos por todas estas páginas diferentes. Então vamos ver, temos o link. Então temos o design do site. Podemos então chamá-lo de outra coisa. Então, por exemplo, este era um novo banco, então eu posso chamá-lo de novo banco. Design de site como este. E o que você pode fazer aqui é configurações de documentos. Então você pode compartilhar revisão de design, que é basicamente como ele vai ser revisado pelo seu cliente. No modo de dívida, o cliente pode deixar seu feedback, você pode responder a esse feedback. Você pode apontá-los para as partes específicas do seu design arrastando e soltando esses pinos de comentário. E então você pode deixar comentários em locais específicos em todo o seu design. Eles podem responder a esses lugares específicos. Então vocês dois, você e seu cliente podem estar sempre no mesmo caminho. Ok, o que precisamos fazer aqui, o que precisamos fazer algumas mudanças aqui. Assim, você pode ser específico com a parte do seu design que você quer mudar ou que eles querem que você mude. Abaixo que temos desenvolvimento, que é compartilhamento para desenvolvedores. E nesse modo, eles serão capazes de ver todas essas cores diferentes que você usa, todas as fontes diferentes e tamanhos de fonte diferentes que você usou. E eles vão ser capazes de ver todas as imagens que você usa naquele momento em particular. Eles não podem ver o código. Mais uma vez, você pode usar algo como Anima, mas pessoalmente eu não recomendaria porque não é perfeito o suficiente. E você realmente vai dar a você um desenvolvedor mais emprego. E porque eles terão que entrar em código e, em seguida, começar a refinar e atualizar seu código, o que é basicamente apenas uma perda de tempo. Terá que codificar tudo isso do zero. Abaixo disso temos apresentação. Então, por exemplo, se você está apresentando seu projeto para um grupo de pessoas, se você está fazendo algo como um Roll Skype, apresentação de zoom ou qualquer outra coisa, então você pode entrar no modo de dívida e ele remove todas as distrações. Ele remove todos os ícones, ele remove tudo, e ele apenas se concentra na apresentação em si, teste de usuário. Então, mais uma vez, ele remove todo o resto. Os usuários não podem clicar em qualquer lugar fora do local onde você os definiu para clicar. Esse é o caminho. Você vai testar a usabilidade do seu design. É fácil clicar neste ponto de guia? É fácil entender para onde eles precisam ir? É a navegação fácil de entender. Cara, as animações duram muito e assim por diante. Então é aí que o teste do usuário entra em jogo, e é aí que você pode usar o XD para iniciar o teste do usuário. Você também pode encontrar diferentes plug-ins no painel de plugins, feitos especificamente para testes de usuários por empresas externas. Integrado ao Adobe XD. Então, por exemplo, se você estiver usando qualquer um desses, você pode encontrar um plug-in lá e então você pode começar a testar o usuário diretamente do Adobe XD, coletar comentários no Adobe XD e aplicá-lo imediatamente. Então esse é o ponto principal do Adobe XD é como você pode otimizar tudo para ser o mais suave possível, apenas para que você possa começar a trabalhar muito rapidamente. Custom é o que diz. Você pode personalizar todas essas coisas. E aqui temos qualquer um com o link. Então, quem pode acessar este projeto? Qualquer pessoa com o servidor de link recebendo este link, link compartilhável, que você pode compartilhar com seus clientes ou desenvolvedores, eles podem acessá-lo. Então, qualquer pessoa a quem enviar esse link pode acessar esse protótipo também, o que é ótimo para compartilhar dentro da empresa. E todos dentro da empresa podem estar em um centro e acessar esse protótipo e talvez fazer um comentário sobre ele se precisarem. Só convidamos pessoas. Assim, apenas as pessoas que são convidadas via e-mail podem acessar este protótipo e basicamente fazer a mesma coisa como qualquer um com o link. E finalmente qualquer um com senha. Assim, você pode proteger tudo isso por senha. Então, por exemplo, se alguém enviar este arquivo por engano para qualquer outra pessoa na organização que não deveria vê-lo. Ou, por exemplo, seus concorrentes, concorrentes estão em mãos com este arquivo. Não será capaz de abri-lo porque é protegido pelo possível. Então vamos ver podemos compartilhá-lo com revisão de design qualquer pessoa com o link. E agora o que você pode fazer é simplesmente clicar em criar um link aqui. Ele vai começar a criar fim dependendo do número de nossas placas que você tem e dependendo de sua conexão com a internet, porque ele está carregando tudo isso para nuvens da Adobe maneira dívidas. E assim vai demorar mais ou menos dependendo dessas duas coisas. Então, quão grande é o seu arquivo e quão rápido é a sua conexão com a internet. E agora o link dois é carregado e agora você pode começar a compartilhar. Estou usando propositadamente versão gratuita do Adobe XD porque eu já tenho um plano premium. Estou usando uma versão gratuita apenas para compartilhar isso com você para que você possa vê-lo aqui. Desbloqueio ilimitado, links de compartilhamento limitado. Você alcança a capacidade de compartilhamento de links com suas atualizações de plano para publicar mais links e usar recursos premium para que você possa clicar em atualizar aqui. O que isso significa é que, se você estiver em uma versão gratuita do Adobe XD, você só tem um link disponível. Então, se você estiver trabalhando em dois projetos ao mesmo tempo, você não poderá compartilhá-los com seus clientes. Você só tem um plano livre. Se você atualizar para Dan premium, você tem um número ilimitado desses links de compartilhamento. Você tem um número ilimitado de opções e assim por diante e assim por diante. Mas eu estou propositadamente usando esta versão gratuita ao longo deste curso para mostrar que tudo o que eu estou criando vermelho aqui é possível em uma versão gratuita também. Então, se você estiver trabalhando com vários clientes, então, por todos os meios, atualize para o plano premium porque eles realmente têm muitas dessas opções, especialmente documentos em nuvem, o que vai ser muito mais rápido, especialmente se você estiver usando bibliotecas do Cloud. Mas se não, se você está apenas trabalhando com um cliente, se você está apenas começando, então você simplesmente usa a mistura livre porque o Adobe XD é uma ferramenta de aprendizado fantástica e uma maneira fantástica de entrar neste mundo de design UX da interface do usuário. Agora, finalmente, vamos terminar isso. E como você pode ver, um link é criado. Você pode clicar aqui para copiar este link. E você pode clicar aqui para copiar o código de incorporação. Então você pode incorporar nesse código, por exemplo, dentro de sua apresentação de beacons. Assim, as pessoas podem percorrer sua apresentação de beacons e clicar em sua apresentação apenas para entender o que você fez com seu protótipo. Então, se você fizer quaisquer alterações dentro da guia de design ou prototipagem, você pode voltar para o compartilhamento e clicar em Atualizar link. É o mesmo link, você compartilha, você só encontra a atualização desse link. Então não se preocupe, você não cruzará essa parte de um link por conta. Mas você pode simplesmente atualizar esse link para garantir que o cliente tenha as alterações mais recentes. Um link em si, então o nome do endereço do link e assim por diante. Então você pode ver aqui, então todos esses números, 90 pontos, 918 e assim por diante, não vão mudar. conteúdo do link será alterado e será atualizado para a versão mais recente. Então, mais uma vez, você pode clicar aqui. Ele abrirá esse link no seu navegador. Você pode copiar este link aqui e ir para o seu navegador e abri-lo dessa forma. Então, cabe a você como você quer interagir com esse link. Então agora vou mostrar-lhe a abertura dentro do meu navegador. Mais uma vez, dependendo de sua conexão com a Internet, dependendo de quantas telas você tem, quantas animações você tem. Todo esse processo pode demorar mais ou menos, dependendo de todas essas coisas. Então, quando sua tela é carregada e quando você faz o upload para a internet, isso é o que realmente parece. E para cobrir todas essas informações, eu acho que é melhor fazer uma pausa aqui e voltar no próximo vídeo para que possamos explicar o que toda essa informação é, como você pode interagir com seu cliente. E, finalmente, como pode interagir com seus desenvolvedores. Então, vemo-nos lá. 66. Compartilhando o design com clientes: Certo, então aqui estamos nós, onde paramos no vídeo anterior. E neste vídeo eu só quero cobrir tudo o que você vê aqui. E eu só queria explicar todas essas opções, a dívida que você tem. Então, primeiro as coisas, vamos começar do topo e mais ROA ao redor. Você tem o seu trabalho bem aqui. Então, se clicarmos em seu trabalho, ele realmente o levará à Adobe Creative Cloud e o levará ao seu trabalho. Então você pode ver porque estamos em uma planta livre nesta conta, como eu disse, você só tem este protótipo. E diz aqui, é um protótipo e isso indica que qualquer pessoa com o link pode ver. Então, basicamente, todas as configurações que você criou ao compartilhar seu arquivo, ele aparecerá no cuidado certo. Então, se voltarmos para o nosso protótipo e para a visão do protótipo publicada, podemos voltar e você pode ver aqui. Então, temos o novo design do site do banco, design do traço da página inicial. Então é por isso que eu estava mencionando o discurso da seca. Como é importante nomear suas camadas, nomear seus aeroportos, que todos os envolvidos possam entender onde eles estão. Então este é o caso claro aqui. É tão novo design do site do banco é o nome do projeto que demos pouco antes, compartilhamento de links. E, finalmente, temos o design da página inicial, que é, na verdade, esta página inicial em particular. Você pode clicar aqui. E ele irá levá-lo para a lista de todas essas páginas separadas. E você pode mostrar isso para seu cliente ou desenvolvedores para que eles possam ser capazes de entender, OK, isso é design de contas, não wireframe, mas design. E é por isso que eu disse que é importante se você está fazendo coisas como esta e como fizemos no discurso, nomear seus arquivos apropriadamente para que todos os envolvidos possam entender onde eles estão em um determinado período de tempo ou em um ponto específico de tempo. Então diz 15 telas atualizadas nesta data neste momento. Então, quando eu clicar de volta em um design de página inicial, ele vai me levar de onde paramos. Este é o nosso design real. E você pode ver quando eu começar a pairar qualidades, efeitos de horror já funcionam. Então, basicamente, este é o seu design em um navegador. É assim que os clientes podem ser capazes de vê-los. E há alguns comandos aqui que precisamos executar rapidamente. Então, basicamente, descartar a parte aqui é para o seu design. E quando eu começar a rolar, você pode ver onde o design e n, onde isso aqui na navegação mostra que essa negação é o lar. Então, quando você clicar ali mesmo, ele irá levá-lo a esta página porque esta é a página inicial. E você também pode clicar nessas setas para a esquerda e para a direita para interagir entre todas essas telas diferentes. Além disso, se eu usar minhas setas ou fazer teclado, como você pode ver, ele vai me levar para as diferentes telas esquerda e direita. E se, por exemplo, eu só quero clicar aqui, ele vai me levar de volta para a página inicial. Certifique-se de entender que isso vai funcionar muito mais devagar do que no seu computador. Então, por exemplo, quando eu comecei a rolar, você pode ver que Scrolls dão, me dá esse tipo de giro. Então você pode ver que eu estou rolando, então aqui está o meu mouse, mas ele não se move tudo isso rapidamente. O que precisa acontecer é que o Adobe XD precisa percorrer todas essas páginas, percorrer todas essas páginas para que ele funcione. Portanto, não se preocupe se ele não funcionar na primeira vez que você abrir isso, ele funcionará na próxima vez ou na hora depois disso na velocidade que se pretende. Então, certifique-se de dizer isso ao seu cliente. Porque às vezes, especialmente se o seu cliente tiver uma conexão lenta com a Internet, isso não funcionará como deveria, pois funciona diretamente no Adobe XD quando você o cria. Mas, por exemplo, rolagem talvez funcione lentamente, mas você pode ver que esses itens de navegação e nesses ícones funcionam muito bem. Então você pode ver que temos o efeito de pairar e assim por diante. E podemos clicar aqui, e a navegação funciona muito bem. Então, se você se lembra 0.06 estava aqui, ele narrando funciona como deveria. Como você pode ver, quando você clica onde você não pode clicar, basicamente como este, ele mostra onde você pode realmente clicar na página. Não entendo por que ele não me mostra isso. Eu posso clicar aqui, mas talvez eu precise pairar, então ele vai me mostrar. Então vamos verificar a descarte. Como você pode ver, a animação funciona como se pretende. É só essa parte de rolagem, que é um pouco demais. E por alguma razão este texto está pulando para cima e para baixo. Eu realmente não sei por quê. Talvez possamos verificar isso em nosso projeto. Mas eu acho que é apenas obliterar aqui. Então, como pode saltar para cima e para baixo no mesmo estado? Então isso é provavelmente uma falha porque você pode ver, por exemplo, aqui, ele está de pé. Quando um pairar ele vai para efeitos de horror para cima, para baixo e, em seguida, para cima, para baixo novamente. E você movê-lo para cima e para baixo como você viu. Então isso é provavelmente só uma falha aqui. Se verificarmos isto, funciona. Então tudo funciona muito bem. E vamos saltar rapidamente para o login. Veja como isso funciona. Então tudo funciona bem. Vá para o login e vá para o nosso painel de controle. Aí está você. Vamos verificar rapidamente entre todos estes. Então a ferritina funciona como deveria. Verifique rapidamente Ds. Eu ainda não gosto disso, mas você me ouviu dizer isso muitas vezes. Vamos ver, o grupo de rolagem funciona muito bem. Vamos ver empréstimos, cartões e toda vez que um usuário clica fora, então, por exemplo, se eu clicar aqui, você pode ver que ele está me mostrando onde quais itens estão realmente vinculados a algumas áreas clicáveis. Então eu posso clicar em todos esses, mas eu não posso clicar aqui. Assim que eu clicar lá, ele está me mostrando nesta cor azul, onde eu posso realmente clicar para que ele me leve a algum lugar? Então nós temos todos estes concluídos e quando eu clicar em logout, ele vai me levar de volta para a página inicial. Agora vamos cobrir o que você vê aqui à direita. Então você pode ver aqui, tenho algo a dizer. Comentário para iniciar a discussão pode conotar ou anotar o painel. O que isso significa basicamente é que você pode fazer um comentário aqui. Então digamos, bem-vindos ao Design. Eu realmente espero que você goste. E você pode clicar em enviar. E isso vai ser apenas um comentário geral sobre este quadro de arte em particular e nesta página. Então você pode ver o desejo da página inicial, que é obviamente esta página, é onde este comentário está localizado, mas não está localizado em nenhum lugar dentro do design real. Então o que você pode fazer para a dívida é aqui você tem este mencionado um usuário que é este no sinal. Então você pode mencionar o usuário dentro de seu documento sólido dizer que você é um cliente é chamado RNR, John Doe, por exemplo. E eles têm uma conta da Adobe. Você pode mencionar em John Doe e ele irá notificá-los cada vez que você faz um upload que você faz uma mudança de link, Você fez ganhar dados HCUP, eu devo dizer, fazer qualquer comum Você fez alguma alteração? Ele fará a notificação em sua conta e não vai encontrá-los sobre essa mudança e ele vai entrar e verificar por si mesmos. Então é para isso, isso é mais fácil. Você pode ver aqui que temos um comentário, que é este, e isso será atualizado à medida que você adicionar mais e mais comentários. E o que eu queria mostrar a vocês é, por exemplo, isso. Então, digamos que o rolou para a disposição, você tem esse giro. Você pode clicar sobre ele segurar. E como você pode ver, você pode colocá-lo onde quiser. Então, por exemplo, eu posso colocá-lo aqui e dizer algo como, o que você acha de induzir Harvard? dever perfeito na cor verde é muito forte. Por exemplo, devo reduzir a obesidade e torná-la menos direta, brilhante ou mais leve ou superior? Queremos dizê-lo. Clique em Enviar. E mais uma vez, temos isto. Então, temos o design da página inicial. Está nos mostrando dois comentários. Um é o comentário geral, Um é o comentário específico. E quando você paira bem aqui, você pode ver que isso fica azul e você pode passar o mouse aqui e você pode clicar nele e ele irá levá-lo para aquela área específica. Então, mais uma vez, você pode fazer isso em qualquer área do seu design e seu aviso quando ele começa a rolar, ele não está lá, mas eu tenho que subir. E aqui está na verdade para que eles possam clicar ele vai levá-los para esse comentário. E o que eles podem fazer é clicar em responder. E você também pode colocar um compartimento partes específicas do seu design para este comentário específico e assim por diante. E, finalmente, o que eles podem fazer é se escolhermos clicar em responder e tudo bem. Um, por exemplo, clique em enviar. E o que temos aqui é que eu posso excluir isso, eu posso editar este comentário, mas a opção que está faltando sobre isso está completa. Então eles podem, você pode, você é capaz de completar certas tarefas dentro daqui. Então, digamos que você fez essa mudança. Digamos que você carregou a nova versão do seu projeto e protótipos são atualizados, desvincular, alteração é feita, o cliente é notificado, eles estão felizes e você pode clicar na opção resolver, que você vai ter. E isso vai remover esse comentário e ele vai se certificar de entender. Vocês resolveram isso, vamos chamá-lo de problema, mas digamos que mudança de design, mudança design é feita. Esta é a nova versão. Isso é bom. Vamos agora seguir em frente. Então você terá essa opção de resolução. Não o tenho porque divido com vocês, basicamente, só comigo mesmo. Então é por isso que você não pode vê-lo lá. Em seguida, o que temos é isso aqui, então você pode convidar pessoas. Você pode clicar aqui, convidá-los por e-mail ou convidá-los por meio de sua conta da Adobe, o que é ainda melhor porque eles têm mais opções do que apenas chegar a esse protótipo. E uma coisa importante aqui, seus clientes não precisam da conta da Adobe para acessar este protótipo ou para comentários ao vivo, eles podem simplesmente entrar aqui e deixar comentários imediatamente. que é, eu acho que a grande coisa que a equipe da Adobe fez porque essas pessoas não são que seus clientes de qualquer maneira, então eles não vão usar esses produtos como XD, Photoshop, Illustrator e assim por diante. Você é cliente deles. Então, como designer, e portanto você precisa dessa conta, eles não precisam, e tudo bem. Aqui temos o nível ampliado para que você possa ir para o padrão, por exemplo, você pode ver como isso funciona. Aqui você tem a opção de tela cheia. Você tem perguntas. Estas são notificações para sua conta e você pode acessar sua conta aqui. Temos todos os comentários de tela aqui abaixo. Para que eu possa escondê-los, por exemplo, mostrá-los. Posso esconder anotações. Então, se um salto bem aqui, esta é a anotação. Então você pode ver esses círculos laranja. Eu posso simplesmente escondê-lo e eu posso filtrar comentários. Então eu posso filtrar, por exemplo, por quem postou pelo dia e assim por diante, n pelo aeroporto também. E, finalmente, posso sinalizar comentários inapropriados aqui. Se eu quiser. Deixe-me mostrar rapidamente apenas para o final e isso, que é a opção de tela cheia. Desculpe, minha câmera ficou um pouco nervosa lá, mas acho que agora funciona bem. Então, mais uma vez, esta é a sua opção de tela cheia. Então, quando você clica lá, você pode ver como ele funciona e você pode então mostrar ao seu cliente tela imposta quando este site é realmente publicado como ele poderia parecer quando ele é publicado. Então, como você pode ver, todas essas opções funcionam. Cada coisa aqui funciona. E você pode pular para a página que quiser. Ele vai levá-lo lá e você pode mostrar a eles como tudo isso vai funcionar e parece que uma vez que ele é realmente codificado e ao vivo, o que você pode fazer para voltar daqui é clicar em Escape e seu teclado. E isso o levará de volta a esta página anterior. Então isso é basicamente sobre a partilha com o seu cliente. No próximo vídeo, mostrarei como funciona o compartilhamento com desenvolvedores. Então, vemo-nos lá. 67. Compartilhando o design com desenvolvedores: Então, aqui estamos de volta ao Adobe XD e eu só queria mostrar rapidamente como ele funciona quando você compartilha com desenvolvedores. Então, basicamente, eles têm todas as mesmas funções que os clientes, mas eles são um pouco mais avançados porque eles são desenvolvedores depois de tudo terminou precisa de coisas diferentes. Depois clientes. Os clientes precisam de um design visual e é por isso que você os compartilhou com essa avaliação de designer. Eles precisam fornecer o seu feedback e revisão sobre o seu design, a fim de que você faça as mudanças necessárias para alcançar esse certo ouro que você e seus clientes têm enquanto os desenvolvedores têm outros objetivos. É por isso que quando você clica em desenvolvimento aqui, você pode ver exportação para web, exportar para iOS ou exportar para Android. Então, se você escolher exportar para uma web, que é o que isso basicamente é porque nós criamos um site design bem aqui. Você pode incluir ativos para download, mas eu não marquei nenhum ativo usando marc para exportação. E eu posso mostrar rapidamente isso aqui dentro do nosso projeto. Então, se um salto dentro daqui, e vamos dizer que eu queria exportar esta imagem diretamente. Posso entrar no meu painel Camadas. Então aqui temos um casal feliz e você tem essa opção. Então você pode usar o turno E ou você pode clicar aqui. E incluirá essa visão de imagem. Se eu for para a minha forma de herói, por exemplo, eu posso clicar nela também. E vamos usar esses Elementos Heróis apenas como um exemplo, apenas para que você possa ver como tudo isso parece. E você pode, obviamente, fazer isso em todo o seu projeto. Não estou fazendo isso porque gosto de exportar meus bens mais tarde. E mostrarei como isso funciona também na próxima seção do discurso. Mas por enquanto, vamos torná-los exportáveis aqui, voltar para o desenvolvimento de opções de compartilhamento. E agora você pode ver que temos cinco ativos. Então, se eu passar o mouse aqui, você pode ver que podemos incluir SVG B e G, um e 2x, bem como PDF. Então, mais uma vez, cinco ativos. Se eu pular para o meu design, se eu mostrar o que eu incluí, então eu incluí esta imagem, faz formas, então isso é 2345. Então ele sabe quantos itens eu incluí para compartilhar e para um download. Então, vamos clicar em seus desenvolvedores serão capazes de baixar esses ativos diretamente do navegador. Então você não terá que exportá-los mais tarde e depois compartilhar com eles dessa forma. Só queria mostrar-vos os dois caminhos. Eu gosto de fazer a segunda maneira, que é exportar manualmente todos os meus ativos, porque eu vou então criar um litro, o guia de estilo. E dentro do guia de estilo, vou listar todos esses itens, mas não imagens. Vou listar todos esses outros itens, mas você pode fazer isso também. Então, mais uma vez, qualquer um com o link, você pode escolher o que quiser aqui. Você pode adicionar pessoas diferentes aqui para clicar em Derek, elas precisam ter sua própria conta da Adobe para acessar essa opção. Mas como eu disse, você não precisa de outro link. Esta é basicamente a mesma ligação. Você pode simplesmente clicar no link de atualização e ele vai parar, começar a atualizar. E uma vez que ele atualiza e atinge 100 aqui. E então eu vou mostrar a vocês como isso se parece dentro do navegador. E agora que terminou de atualizar o link, eu posso simplesmente ligar aqui para o meu navegador. Posso clicar em Atualizar, ou posso voltar para o XD e clicar em direitos autorais aqui e posso compartilhá-lo dessa forma com meu cliente. Então agora você tem essas opções aqui, que nós não tínhamos antes, que são para desenvolvimento. Então eu vou simplesmente deixá-lo carregar por apenas um segundo, e então eu vou explicar para você quais são essas duas opções. Então agora quando ele carrega e você paira bem aqui, você pode ver que ele diz, se nós apenas pensamos que é, então deixe-me apenas clicar nele. São especificações de design. Então basicamente tomou banda, use uma alça para zoom, use controle e roda do mouse, ou use uma lista suspensa se você quiser zoom. Basicamente o que isso significa é sempre que você passar o mouse sobre todos esses elementos, você pode clicar e ele irá mostrar-lhe todas essas opções diferentes. Assim, você pode ver a largura do texto, você pode ver a altura do texto. Você pode ver as distâncias entre todos eles. Então, se eu pairar como este, por exemplo, você pode ver que estamos a 91 do topo. Estamos a 71 da direita. E estamos 3.3.2 do fundo da nossa imagem de herói. Se eu escolher meu botão, você pode ver que é 366 com 70. E você pode passar o mouse aqui e ver 296 do final deste texto. É o que diz, 140, são 50 aqui. Se eu clicar aqui, são 50 aqui e assim por diante. Você pode fazer o mesmo basicamente para todos esses elementos. E quando você clica em qualquer um deles, você pode ver o nome. Então Launch criado para todos, esse é o texto, mas vamos apenas usar a imagem, por exemplo. Você pode ver a imagem. Homem tão feliz, esta é a largura, esta é a altura, esta é a aparência. A opacidade é 100%. Este é o inferno. Então nós não temos nenhum ovo porque é a imagem e nós temos este código CSS. Assim, eles podem selecionar este código CSS e copiar se quiserem usá-lo em seu processo de desenvolvimento. Então, basicamente, eles podem fazer isso também. Eles podem clicar sobre isso e você pode ver que temos a borda desta cor. E podemos nomear a cor e, em seguida, dar-lhe esta variável de token de design. Portanto, é muito mais fácil para os desenvolvedores trabalhar com esses tokens de design. Eu não fiz isso porque ele não queria confundi-lo com todas essas opções, que é basicamente um pouco mais avançado e tudo isso. Mas basicamente eles podem simplesmente usar essa cor. E porque nós vamos exportar todas as nossas cores mais tarde, então eles podem escolher essas cores, colocá-las dentro do CSS e então simplesmente usá-las assim com seu próprio nome. Então, ele não precisava usar nenhum token de design. Aqui. Mais uma vez, temos círculo, temos em pixels, então basicamente 8080 e temos x e eixo y. Eles podem clicar aqui e usar pontos ou usar DP se quiserem. Temos a variável 6x aqui, mas eles também podem usar RGBA. Eles podem usar um. Nós não temos um traço, nós não temos nenhuma lacuna em um acidente vascular cerebral comprado Gapminder juntou-se ao Festival alta porcentagem. Então todas essas opções estão incluídas dentro para que os desenvolvedores possam acessá-los facilmente e simplesmente copiar essas opções, baseando-as dentro de sua cotação, é muito mais rápido para eles trabalhar assim. Se eu clicar aqui, podemos ver que estes são os nossos componentes. Basicamente, o sistema de navegação principal, o estado dos pulmões. Então estamos nesse estado específico nessa página em particular. E então eles podem ver todas as opções dentro. Então temos embrulhado retângulo chamado nav Bg, temos aparência, então 10101010, redondo em todos os cantos, se você se lembra. Obesidade é 100% cor. É este fff, mais uma vez cor sem nome porque eles não deram a ele o token de design. Mas mais uma vez, você pode fazer isso também se quiser. Tem esta sombra. Então, quando você paira, você tem essa cor. Então você pode clicar nessa cor, ele irá copiá-lo e, em seguida, você pode colar borrão de fundo, obesidade brilho. E finalmente temos CSS para isso. Então você pode optar por copiar, e eu posso clicar no meu CSS para copiá-lo. E pode, por exemplo, selecionar este. Css copiado, e eles podem simplesmente colado ao seu editor de código de escolha. Mais uma vez, você tem essas distâncias, então estamos 50 do topo, 138, esquerda e direita, e 70-30 até a borda inferior do nosso design. Você também pode rolar para baixo e fazer isso para qualquer um desses que desejar. Então, se eu pairar aqui e movê-lo, você pode ver que para este, nós somos, vamos ver 100 a partir daqui. Estamos a 100 daqui. E você pode, você consegue a foto, você pode obter isso por todos esses. Finalmente, deixe-me clicar aqui para mostrar essas variáveis. Então você pode ver, deixe-me mover meu hub para a maneira como você tem todas essas variáveis. Então cores raiz, fonte, valores de texto, estilos de caractere, estilo de caractere sem nome para estilo F3, assim por diante software. Então eles têm essas variáveis e eles podem copiar e usá-las em seu trabalho de código. Então é basicamente isso. Bem aqui na tela principal. Somos detalhes selecionados, por isso temos todas as cores usadas e apenas certifique-se de entender que não é amostragem apenas as cores que usamos. Então estas são as nossas cores reais bem aqui no topo. Todas estas outras cores são basicamente amostradas a partir desta imagem, destes ícones, esta imagem e assim por diante. Então, basicamente, só para entender, essas são todas as cores usadas em todo o nosso design, mas você vai enviar-lhes nossas cores principais. Então eles vão usar essas cores principais em vez disso. Este é o tamanho da janela de exibição, este é o tamanho do design. Então 1920 por 4959. Então essa é a altura geral do nosso quadro de arte de design real. Nós temos estilos de personagem, então nós os temos aqui, e você pode clicar aqui para acessar. Então Poppins font-family, font-weight, tamanho de fonte normal 18. Esta é a cor, espaçamento entre caracteres e o espaçamento entre linhas, que é mais uma vez realmente importante para o CSS porque eles podem, diretamente daqui, usar todas essas configurações. Então, mais uma vez, se você quiser, você pode selecionar todas as coisas carregadas aqui e eles podem baixá-lo diretamente daqui. Mas se não, eu vou mostrar a vocês na próxima parte do curso, que nós estamos chegando mais tarde. Como eles podem, como você pode organizar, editar, exportar tudo, e enviá-los para um uso posterior. Grade de layout. Você pode ver que nós temos até a grade. Assim, colunas largura da calha, largura da coluna, margem n. Obesidade. Obesidade é basicamente a obesidade dessas linhas de grade para que você possa vê-los melhor uma vez que você começar a projetar. E, finalmente, aqui temos interações diferentes para páginas diferentes. Então temos ação é transição, destino é design de cartão. Se clicarmos nisso, ele me levará a essa página. E eu sou capaz de ver todas essas coisas aqui. Então é basicamente isso. Vamos voltar rapidamente para a página inicial. Se eu puder ir a partir daí, eu posso clicar no estrondo menu para levar para a página inicial. E então, se eu clicar aqui, você tem esses ativos bem aqui. Então eles podem simplesmente clicar nos ativos. Está mostrando o botão de download, espero que você possa vê-lo. E, em seguida, uma vez que você clicar em Download, Como você pode ver, ele já começou a baixar. Ele vai baixá-lo como um SVG, que é de longe o melhor formato para trabalhar com os codificadores mais tarde, finalmente, se eu clicar nele, ele está me mostrando o que ele está selecionado, Mostre-me para baixar e assim por diante e assim por diante. Mas se eu quiser passar o mouse sobre ele, por exemplo, aqui vai mostrar a aparência, vai mostrar o gradiente porque esta é a direção de gradiente, porcentagem ou ativo de basicidade. E, finalmente, eles têm a opção de baixar. Então, mais uma vez, se você planeja fazê-los baixar esses ativos diretamente daqui, então você pode, assim que você posicionar algo dentro dele afeta D, você pode marcar para exportação mais tarde quando você carregar seu design para revisão e para um eles vão ser capazes de clicar aqui e baixar os ativos diretamente a partir daqui. Mas, mais uma vez, lembre-se se você está apenas usando este único projeto em uma versão gratuita do Adobe XD. Os desenvolvedores precisam de tempo para desenvolver isso. Nessa altura, você passou para o próximo projeto e precisa excluir neste projeto da sua conta e do seu computador. E, portanto, eles não poderão mais acessar esse projeto. Então a próxima opção que vou compartilhar com vocês é permanente. E você poderá compartilhar essa opção com seu cliente e desenvolvedores. Então eles vão ser capazes de manter o arquivo indefinidamente. Então, por exemplo, se eles escolherem desenvolver esse arquivo, digamos que daqui a dois anos, eles ainda o terão. Mas desta forma, você terá que manter este protótipo on-line para que eles possam baixar e desenvolver todas essas coisas. Então é isso para este vídeo. Eu realmente espero que você entenda como isso é fácil de compartilhar, como é fácil acessar seus clientes e desenvolvedores, quão simples e simplificado tudo dá. Então toda a animação funciona bem, toda a interação funciona como deveria, e tudo está em um só lugar. Partilha de desenvolvimento de design, para que todos na equipa possam aceder bem a isto e todos possam trabalhar juntos neste projecto em particular. Na próxima seção do curso, eu vou mostrar a você como você pode extrair todos esses ativos, como você pode estruturá-los, empacotá-los e, em seguida, enviá-los para seus clientes e desenvolvedores para uso posterior. Porque, como eu disse, às vezes esses projetos podem levar meses para se desenvolverem. Portanto, este caminho não é a melhor opção para quem está usando o plano gratuito. Se você estiver usando o plano pago oferecido obesidade e você tem armazenamento ilimitado, você tem opções de compartilhamento ilimitadas para os links e assim por diante. Então quem se importa? Você pode simplesmente deixar esse link e eles podem acessá-lo mais tarde, se você quiser. Mais uma vez, você pode protegê-lo por senha. Então toda vez que alguém tem que acessá-lo, ele tem que usar a senha e assim por diante. Então, tudo o que falamos nessas lições sobre compartilhar. Então, mais uma vez, no próximo vídeo, vamos passar para a estrutura de compartilhamento e empacotamento e, finalmente, entregar seus ativos para desenvolvedores e clientes. Então, vemo-nos lá. 68. Criando Tokens do design: Antes de realmente saltar para a exportação, e eu mostro como você pode exportar ativos diretamente para o seu computador e depois compartilhá-los com desenvolvedores e clientes. Quero cobrir rapidamente duas coisas. número um é tokens de design e o número dois é sistemas de design. Então ambos são muito importantes. Ambos são basicamente críticos no sistema de design. Se você quiser implementá-los, eu propositalmente não queria implementá-los neste projeto e vou explicar porquê. Mas eu só queria mostrar que você também tem essas opções, especialmente se o projeto está crescendo e ficando cada vez maior. Então, como você pode ver, estou de volta no meu arquivo Adobe XD e vou pular aqui mesmo. E como você pode ver aqui, nós temos apenas essas cores básicas. E essas cores básicas são feitas assim de propósito, apenas para mostrar o que você pode fazer com o projeto de Tolkien agora. Então, tokens de design são basicamente nomes de suas cores, nomes fora de suas fontes, e assim por diante. Então os tokens de design serão usados mais tarde pelos desenvolvedores. E ninguém mostrou que no vídeo anterior em compartilhar com os desenvolvedores. Então agora eu vou mostrar a vocês, se vocês se lembram, nós tínhamos a cor da dívida sem nome e assim por diante. Vou mostrar-lhe como você pode corrigir isso e algumas dicas e truques para melhorar o piso do telhado ainda melhor e compartilhar com os desenvolvedores ainda melhor. Então vamos começar a mudar a cor da sua fonte. Você pode, desculpe pela sua cor. Você pode simplesmente clicar com o botão direito do mouse e você pode renomear ou você pode clicar duas vezes aqui, e você pode ver que é chamado de nome do item. Podemos chamá-lo, por exemplo, branco liso. E usarão Candice Dash. E estou usando traços basicamente por causa do código. Então, se você sabe algo sobre dois códigos, você não pode usar letras maiúsculas, você não pode usar espaçamentos. Portanto, você pode usar traços ou esses traços inferiores. Então, ou este ou deixa-me mostrar-te este. Então, ou uma reta ou esta de baixo. Então, tudo depende de você. Eu uso a parte inferior em todo o meu design, mas eu só quero mostrar que você tem essa opção também. Em seguida, podemos clicar duas vezes aqui e chamar este cinza claro. Podemos chamar isso de cinza escuro. Agora podemos chamar isso, por exemplo, verde médio. E este é verde secundário. E esta porque está entre verde e azul. Podemos chamar-lhe algo como, sei lá, cor malvada. Podemos chamar isso, vamos ver. Cinza escuro. Podemos chamar isso de quase preto. E finalmente, podemos chamar esse perigo de vermelho. Eu propositadamente dei essas cores, esses nomes em vez de simplesmente branco para cinza e assim por diante. Só porque você, desenvolvedores e clientes serão capazes de entender todas essas cores. Em alguns casos, por exemplo, se o seu cliente já tem parte da marca, placa de marca integrada ou eles têm algo como diretrizes de marca. É ótimo porque você tem todas essas cores ou pronto. E na maioria dos casos você já tem nomes de cores, então você só vai usar esses nomes de cores como estes. E, portanto, vai ser muito mais simples para os desenvolvedores finais do cliente trabalhar com Dana porque eles já têm essas cores. Se eles não têm as cores, como no nosso caso, nós vamos criar as cores do zero. E eu já mostrei que por alguns, experimentando outras cores copiando e colando cores semelhantes a estas e simplesmente dando nomes a elas. Mais uma vez, esses nomes são realmente importantes como tokens de design. E mais uma vez, eu propositalmente não criá-los no início ficou um deck é mostrar-lhe como podemos criá-los aqui e como é mais fácil para os desenvolvedores trabalhar a partir daqui. Além disso, mais tarde, quando começamos com o guia de estilo, em vez de simplesmente colocar branco, cinza e assim por diante, vamos colocar esses nomes exatos mais os valores hexadecimais. E eu vou mostrar a vocês que mais tarde no vídeo mais tarde quando nós realmente chegar ao guia de estilo. Agora vem a parte de compartilhar isso com os desenvolvedores. Então, agora que criamos isso, você pode ir em frente e clicar em salvar porque você pode ver que temos isso aqui. Eu vou realmente seguir em frente para compartilhar. Clique no design do meu site. Já temos o link que criamos anteriormente. Vou simplesmente apertar o link de atualização. E agora, quando as atualizações de link, Eu vou voltar para você e eu vou mostrar-lhe que na opção de compartilhamento de especificação do desenvolvedor, o que mudou para as versões anteriores. Ok, então agora que está terminado, você pode ver que está atualizado. Deixe-me movê-lo rapidamente para o protótipo em si. Então, aqui estamos nós. Se quisermos aqui para as especificações do desenvolvedor, você pode ver que temos todos esses ativos. Agora, quando eu passar o mouse sobre isso, você pode ver imediatamente que nós temos o código hexadecimal, que é tudo F neste caso porque é simplesmente branco liso. E temos o clareamento plano que demos à nossa cor original. Ao lado disso você vê que temos cinza escuro. Cinza claro, quase preto e cor média. Agora, se eu passar o mouse e clicar aqui, por exemplo, neste botão você pode ver que é a cor principal. Se eu clicar aqui, você pode ver que é branco. Se eu for mais um e, por exemplo, clique aqui e vá mais fundo. Vamos ver. Posso fazer isso? Então nós temos um verde amina aqui é claro grande quando eu clicar sobre este fundo. E se avançarmos mais e, por exemplo, clicar aqui, você pode ver que temos o cinza claro, mas este botão, por exemplo, é a nossa cor principal. Se eu clicar no mouse e clicar diretamente dentro de lá, você pode ver que nós temos que significa verde e sob estado padrão temos a cor principal em vez disso. Então é isso para este. E aqui você pode ver que temos dentro do CD, CSS, todos esses valores mudando. Então, por exemplo, se eu voltar para minhas variáveis, você pode ver que nós temos a cor perigosa e hexadecimal ao lado dela, quase preto, escuro, racial. Todas as cores que renomeamos estão aqui do lado esquerdo. Então, esses também estão aparecendo aqui nas opções do d para compartilhar. E os desenvolvedores serão capazes de simplesmente encontrar essas variáveis e simplesmente selecionar, Copiá-los e colá-los dentro de seu código. Portanto, é muito mais fácil para eles mudar globalmente as cores quando você tem esses nomes de cores em vez de quatro DEM, dando esses nomes de cores de mais tarde quando você está realmente mais dentro de seu processo de design e desenvolvimento. Então é isso. Esses são seus tokens de design. Espero que entenda como eles são importantes. Espero que entenda como são fáceis de implementar. Basicamente, a dica aqui é assim que você começar a trabalhar, assim que você começar a aplicar essas cores, dê nomes a essas cores porque será muito mais fácil trabalhar com essas cores assim que você der nomes a elas. Então é basicamente isso para tokens de design. No próximo vídeo, vamos passar para sistemas de design. Nós não criamos nenhum sistema de design para este projeto, mas vou mostrar-lhe um ótimo exemplo. Mostre por que eles são importantes e como você pode ir em frente e criar um. Então, vemo-nos lá. 69. Criando um sistema de design: Finalmente, deixe-me mostrar-lhe o sistema de design, o que eles são. Por que eles são úteis no que você pode fazer para criar um para si mesmo? Então aqui eu abri este sistema de design livre que encontrei on-line. É chamado de sistema de design de carbono. E é criado pela IBM. E se você sabe alguma coisa sobre tecnologia, IBM é essa enorme marca global trabalhando em torno da tecnologia por décadas. E você pode ver tudo aqui. Então você pode digitar em carbono design system.com. E você pode abrir todos esses painéis e explorar o que ele é explorado, explorador de dados diferentes e componentes diferentes, elementos diferentes, visualização de dados e assim por diante e assim por diante. Então, basicamente, o que é um sistema de design, é uma linguagem da marca. Então tudo o que você faz em torno do design, não apenas todos esses elementos, mas como o design vai falar com seu cliente? Como ele vai se adaptar a diferentes telas, esconderijos entrar em posição no mercado ao lado da concorrência. Como vai parecer em, por exemplo, cinco ou dez anos, como vai escalar. Então digamos que agora você tem cinco páginas, mas no próximo ano, você vai adicionar 100 páginas diferentes. Então você precisa de todos esses diferentes elementos para escalar proporcionalmente, escalar uniformemente, e para se adaptar a todas essas mudanças de mercado em todas essas posições. Portanto, é por isso que os sistemas de design são redigidos e é por isso que eu sempre recomendo que você comece com sistemas de design. Os sistemas de design não são apenas para grandes marcas, eles também podem ser usados para marcas menores. Mas apenas certifique-se de entender que para marcas menores, há obviamente menor quantidade de todos esses componentes, menor quantidade de história e assim por diante e assim por diante. Então, se levarmos de volta apenas mais uma vez aqui, você pode ver projetando, desenvolvendo, contribuindo com o que está acontecendo. Então você pode conferir suas diretrizes. E você pode ver, por exemplo, ousar usar esta grade 2x. E você pode rolar para baixo e ver e brincar com esses vídeos. Foi colina machado maior é o quadro de organização para como ele funciona e como ele se adapta a todas essas páginas diferentes. Então você pode ler mais sobre isso. Se você não estiver usando esta grade e estiver usando grade Bootstrap por exemplo, como nós estamos, você vai fazer esta documentação, não neste caso obviamente, mas você pode criá-la, por exemplo, como um ovo separado, um arquivo, como um PDF. Você pode criar uma página da Web on-line, por exemplo, para essa marca e assim por diante. Em seguida, temos acessibilidade, chamada facilmente inacessível. Seu site é para pessoas necessitadas, por exemplo, conteúdo. Você pode ver voz e tom, níveis de conversação, menos conversa, mais conversação, assim por diante. Cor. O que a cor representa neste sistema de design? Ícones, como você está indo para usar esses ícones, você pode ver lá ou não. Não há variação de ícones aqui. Eles estão todos parecidos com isso. Pictogramas, espaçamento de movimento considera tipografia. Então, obviamente, muitas dessas coisas diferentes são o que faz o sistema de design completo e completo. Agora não tenha medo de tudo o que vê aqui à esquerda porque, como eu disse, esta é a IBM. Eles têm milhares de pessoas diferentes trabalhando para eles. Eu realmente encorajo você a explorar sistemas de design on-line que são um pouco menores do que este e mais fáceis de entender, mais fáceis de consumir. Mas estou apenas mostrando o que os gigantes da indústria estão fazendo para que você possa entender melhor o que evoluiu nos dados do sistema de design. Então você pode ver, por exemplo, vamos usar movimento. E você pode ver todos esses movimentos diferentes e como eles são compostos neste pacote completo de sistema de design. Então você pode ver esta moção bem aqui. Então tocando pontos, pontos de expansão, pontos de navegação e assim por diante. Então tudo vai para um ponto, ponto está trocando seus círculos em mudança e assim por diante. E apenas note que nós temos e este contorno bem aqui, então nós não temos nenhuma forma preenchida. Temos os contornos. Estas são curvas bayesianas, então como elas estão se movendo e assim por diante. Assim, todas essas informações estão incluídas dentro do Sistema de Design. Então, para evitar que eu fique sentado aqui conversando com você por horas, você pode simplesmente ir para o design de carbono system.com e eu vou me certificar de deixar um link no PDF para que você possa clicar e acessá-lo dessa maneira também. Então você pode conferir. E agora vamos voltar para o arquivo e ver como ele se traduz para o próprio arquivo do Adobe XD. Como podem ver, ainda temos essas cores. E você pode ver que eles chamam de foco de nível 20 de TI, o que significa que é cinza, 20% de opacidade e ele aparece ao pairar. Então você pode ver como eles lidam com tokens de design. Então este é roxo, 60, este é azul 20. Mas basicamente eles estão simplesmente se movendo em todo o design e você pode ver tudo isso. E lá temos estilos de personagens, muitos deles, temos componentes diferentes, também, muitos deles. Então, basicamente, eles estão criando componentes para cada etapa da jornada do projeto. Então, se eu te levar aqui, este é o arquivo de Introdução. Obviamente, leia isto se quiser. Como você pode usar esse arquivo e assim por diante. Em seguida, temos tokens de tipo. Então, os tokens de tipo não são suportados no XDS desligado ainda, mas eles serão no futuro definitivamente. Portanto, apenas tokens de cor são suportados. E eu mostrei a vocês que no vídeo anterior, esses Dawkins profundos serão definitivamente apoiados mais tarde. Então você pode muito bem se familiarizar sobre isso. Então, em vez de sua fonte ficar assim, você pode renomeá-la. E depois vai parecer algo assim. Então você pode chamá-lo, por exemplo, código 01, código 02. E você pode dar a eles esse tipo de hashes e esse tipo de, vamos chamá-lo de nomes. Então os desenvolvedores vão ser mais fácil ser capaz de usá-los dentro do código em vez de simplesmente assim. Então, por exemplo, você pode ver a imitação. Então é mono tipo barra, mono tipo barra mono, IBM tipo barra Mano. Então, todos esses são tokens de tipo. Em seguida, temos fichas coloridas, e essas são as que eu já mostrei a vocês. Então estes são os valores de hash estão em desenvolvedores estão indo para usá-los. Esta é a função, então fundo da página padrão, este é o valor, então branco e fff também é código hexadecimal. Então você pode passar por tudo isso e você pode dialogar. Isso é gratuito, para que você possa explorá-lo com mais detalhes. Temos componentes, componentes, acordeão e assim por diante. Então, se eu clicar no meu componente e voltar para aqui, e vamos ver onde ele pode mostrar-lhe isso melhor. Vamos ver. Deve estar em algum lugar no fundo. Aqui está. Como podem ver, temos este esqueleto. Temos desativado, aberto, foco e pairar. Então, basicamente, eles criaram um único componente para este elemento em particular e, em seguida, deu-lhe todas essas opções. Então, no estado padrão, é assim que ele se parece. Então esta é uma lista suspensa. Então acordeão item pairar. Então, como parece quando as pessoas passam o mouse, concentre-se como ele parece, por exemplo, quando você clica e deseja digitar algo, esse é o estado de foco, o estado aberto, obviamente quando ele se expande desativado. Então, quando as pessoas não podem clicar nele, esqueleto, que é apenas um quadro básico básico, básico e esqueleto aberto. Então você quer mostrar o estado aberto para o seu wireframe também. Eles têm distinta para todos esses outros itens. Então você pode saltar rapidamente aqui e ver, por exemplo, vamos ver quatro botões, por exemplo. Ou se pudermos encontrar alguns fóruns, vamos ver a dívida. Então vamos ver o que eles também como aqui, vamos testá-lo para fora nestes. Então aqui temos, por exemplo, este menu suspenso agradável. Então temos pairar, foco, esqueleto e aberto. E você pode notar um quatro a partir de agora, eles estão usando as mesmas cores dia usando as mesmas técnicas. Eles estão usando as mesmas sobreposições, eles estão usando os mesmos contornos, então tudo é o mesmo. Em todo o seu design. É aí que um sistema de design entra em jogo. E no quadro geral, quando você começa a usar este produto como um site, tem um aplicativo móvel como um painel, o que quer que seja, ele vai olhar como ele está pertencendo ao mesmo produto. Então você pode ver estes aqui eu estou no estado padrão. Aqui estamos a pairar. Então basicamente você pode ver que eles criaram todos esses estados e basicamente apresentaram todas essas opções bem aqui dentro deste porto de arte. Então aqui temos o horror de estado padrão, foco, que é este, esqueleto, que é este, aberto, que é este. Então você pode ver claramente o que eles fizeram com este sistema de design. vez, esta é uma opção fantástica para mostrar aos seus clientes e desenvolvedores todas essas opções diferentes. E também é uma maneira fantástica. Por exemplo, você concluiu este projeto. Você pegou seu dinheiro, você terminou, você enviá-lo para os clientes e desenvolvedores. Isso é bom. Todo mundo está feliz. Mas daqui a um ano, por exemplo, se alguém vier aqui e quiser editar este arquivo, vai ser muito mais difícil para eles fazerem isso. Leia qualquer sistema de projeto em vigor ou, pelo menos, diretrizes de projeto. Então. Ter um sistema de design no lugar, mesmo para projetos e produtos menores é uma maneira fantástica de fazer as coisas. Aqui. Em seguida, posso mostrar-lhe isso para que você possa ver que temos coisas modais, tão diferentes aparecendo aqui e ali. Temos notificações. Então, por exemplo, algo dá errado erro aqui e assim por diante. E você pode notar para todos estes, eles incluíram esses estilos diferentes. Então tudo funciona como deveria. Parece que tudo pertence a este mesmo projeto. Então você pode ver que eles incluíram todos esses componentes diferentes para todos esses estilos diferentes. Mais tarde, os desenvolvedores podem integrar essa codificação. Por exemplo, vamos aqui e vamos ver. Então, por exemplo, foco por página. Então você pode ver que temos este contorno azul desenvolvedores pode usar, por exemplo, espessura do prazo, cor do prazo, um retângulo arredondado ou não. Neste caso, é completamente reto e eles podem imediatamente, adaptar-se a essas mudanças no frio. Então, toda vez que há foco, como você pode ver aqui, e essas mudanças vão se aplicar. Mas você ainda tem que mostrá-los em design e você ainda tem que aplicá-los em todos os seus elementos apenas para mostrar ao cliente, desenvolvedores e, em seguida, usuários, talvez até colegas de equipe como ele vai parecer quando ele está aqui. Então, basicamente, é isso. Você pode verificar todas essas coisas, todas essas mudanças. E agora vamos minimizar isso para que eu possa levá-lo ao nosso arquivo e explicar como tudo isso pode ser feito em nosso arquivo. Então, basicamente, se eu levá-lo de volta ao nosso botão original, por exemplo, que é este 1 de maio ser Rican, dê a este botão todas essas mesmas configurações para que possamos mostrar o mouse, o que já temos. Podemos mostrar foco incapacitado. Mas aqui não temos nenhum estado desativado porque não podemos desativar o login. Eles têm que clicar lá. Então você tem que pensar em todas essas coisas também. Para algumas coisas como para os formulários, por exemplo, como dia mostrado no exemplo IBM, você tem que fazer todas essas coisas porque nem todas as vezes que você pode clicar, digamos que você deseja clicar no botão Enviar, mas você não inseriu o endereço de e-mail, por exemplo, dentro do formulário, então esse formulário deve ser, por exemplo, desativado até que você insira as informações necessárias aqui. Então você vê onde isso vai dar. Você tem que apresentar todos esses estilos diferentes. Então, no caso de, por exemplo, em um ano, os clientes decidirem que querem mudar este botão de login para um formulário em qualquer coisa. Você ainda tem esse estado desabilitado, você ainda tem o foco selecionado e assim por diante. Então você pode fazer isso por todas essas coisas diferentes, não apenas por essas. Você pode fazer isso para esses tipos de cartões. Por exemplo, você pode fazer isso para esses cartões, para este Q e um por exemplo, e assim por diante. Assim, você pode criar todos esses componentes com todos esses estados aplicados. Apenas certifique-se de usar exatamente as mesmas configurações. Então, se você estiver usando contorno, certifique-se de usar exatamente o mesmo contorno em todos os lugares. Se você está usando o hover como fizemos aqui mesmo, certifique-se de usar exatamente a mesma cor durante todo o seu desejo. E é assim que seu sistema de design vai crescer. E é assim que você vai se desenvolver e se tornar ainda maior e maior e ainda mais útil nos próximos anos. Então é basicamente isso para esta seção. Eu realmente espero que você tenha gostado e eu realmente espero que você aprenda algo novo. E se você fez uma regra, realmente recomendo que você confira este IBM Design System. Então, mais uma vez, o design de carbono system.com, porque ele oferece muitas, muitas opções diferentes e insights sobre o que todas essas grandes empresas estão fazendo, como elas estão dimensionando seus produtos. E você pode vê-lo em ação porque este é ao vivo em seu site. Esta é a linguagem de design deles. E você pode entender o que esses grandes jogadores estão fazendo e o que você pode esperar de projetos menores. Mas mais tarde se você entrar na empresa de cerveja, o que grandes empresas estão fazendo bem para que você possa saber onde você pode aplicar seu conhecimento. E se outra pessoa, por exemplo, disser: “Ok, dê-me fichas de design de tipo, você não será perdido. Agora você sabe que tipo de tokens de design são, como eles são usados e como você pode usá-los também. 70. Crie uma apresentação de projeto: Ok, então agora, agora que tudo isso está concluído. Só tenho mais duas coisas para compartilhar com você. número um é a apresentação, e essa apresentação que você pode usar em seu site ou em seu perfil de beacons no drible. Ou você pode criar uma apresentação para seus clientes para mostrar às partes interessadas, para mostrar aos seus parceiros de negócios, para mostrar aos membros da equipe e assim por diante. Só para que as pessoas possam entender em, digamos, um formulário PDF ou em um fórum baseado em páginas web, como esse projeto pode se parecer e como esse design veio a ser. Então você pode usar a apresentação para mostrar todos os tipos de coisas diferentes. Você pode começar do seu pensamento. Você pode começar a partir de seu papel de wireframes. Você pode começar a partir da arquitetura do site, da exploração, da conversa com as pessoas. Portanto, há muitas, muitas, muitas maneiras diferentes de criar essa apresentação, bem como como o profissional quer que sua apresentação seja. Então, o nível mais baixo é basicamente apenas colocar todas as suas páginas uma em cima da outra em um dia. Você pode fazer com a apresentação como morto se você não precisar de quaisquer elementos adicionais dentro. Mas eu realmente encorajaria você, se você está criando essas apresentações para mostrar pelo menos seu pensamento por trás do projeto. Assim, a pessoa que está assistindo essas apresentações, por exemplo, em seu site ou em seu perfil de beacons, drible ou qualquer outra coisa, pode entender sua lógica, seu pensamento e suas habilidades organizacionais por trás desses para que eles possam entender melhor como você chegou a essas conclusões e por que você fez as coisas parecerem como você fez? Então, neste vídeo, eu vou primeiro compartilhar com vocês alguns backends, exemplos. Vou mostrar-te o que outras pessoas estão a fazer. E então eu vou mostrar a vocês onde você pode obter modelos para usar em seus projetos do Adobe XD? E eu vou te mostrar essas maquetes. E como você pode trabalhar com essas maquetes para criar apenas o ponto de partida da apresentação? Porque as apresentações podem levar horas, às vezes dias, até semanas para serem criadas, dependendo mais uma vez da complexidade que uma pessoa tende a ser. Então vamos começar com beacons, exemplos, e eu vou mostrar para onde você pode levar suas apresentações. Certo, então aqui temos alguns exemplos do Behance. E como você pode ver, eu simplesmente digitei o design do site do banco porque nós fizemos o design do site do banco e eu só queria mostrar alguns exemplos. Ordenei aqui por curadoria, o que significa que tem todas estas etiquetas. E como o design do site é geralmente em design de UX da interface do usuário, você deve olhar para coisas como esta. Você também pode resolvê-lo por recomendado. E isso vai dar alguns exemplos diferentes aqui. Vai ser um pouco mais preciso, mas você não vai ser capaz de procurar curadoria o tempo todo. Mas você ainda vai ser capaz de procurar curados assim. Então, essa pessoa criou seu design no Adobe XD é mostrado também nesta galeria de membros, e finalmente destaque nos EUA no design UX. Então vamos começar realmente com este design. Eu abri bem aqui e você pode ver que eles estão começando com ilustrações. Nós não criamos nenhuma ilustrações para o nosso projeto, mas você pode ver claramente o que eles fizeram aqui. Eles fizeram uma identidade de marca completa, que nós não fizemos porque nosso projeto já tinha alguma marca dentro, como o logotipo, cores, fontes e assim por diante. Então eles fizeram tudo isso. Eles fizeram a exploração do logotipo. Eles fizeram todos esses cartões e layout do cartão, então apenas imaginar como esses cartões vão parecer uma vez que eles são concluídos. Eles fizeram algumas dessas animações básicas e eles criaram desordem de wireframe é estilo. E você pode ver algumas cartas voando dentro e fora e como toda a morte pode ser completada. Obviamente, eles estão usando algumas ferramentas mais avançadas, como o Adobe After Effects, por exemplo, para todas essas animações. Mas você também pode fazer isso no Adobe XD e você pode gravar um protótipo e você pode exportar isso como um vídeo e depois mostrá-lo assim. Mas você ainda precisa de algumas ferramentas como após efeitos, por exemplo, apenas para colocá-los dentro desses modelos animados. Ou você pode usar ferramentas online ou algumas outras ferramentas pagas, especialmente se você é um usuário de Mac, porque às vezes somos usuário do Windows, não se atreve a ter muitas opções disponíveis. Mas basicamente você pode ver o que eles fizeram aqui mesmo no listado em todas as telas de mapas e telas de sites e assim por diante, ilustrações de clientes. Então eles apresentaram o papai. E você também pode clicar aqui para assistir a este vídeo e ver todas essas animações. E basicamente essas animações são feitas em alguns, uma ferramenta um pouco mais avançada, como mais uma vez, após efeitos. Ou você pode fazer algo assim em preencher Mora de compartilhar vagar. Então aqui está o site deles e eles colocaram para fora assim. E você pode ver que eles estão usando esses elementos de fundo apenas para destacar o design um pouco mais. E eles estão usando essa abordagem angular. Então, em vez de colocá-los assim, eles simplesmente inclinaram para um lado apenas para criar um pouco mais de interesses visuais. E você pode ver que as páginas móveis combinadas, bem como as páginas da área de trabalho dentro. E eles criaram esta bela animação para o fim. Você também pode criar algo assim para usar modelos reais ou formulários de dispositivos reais neste caso. E você pode começar com a tipografia. O que é topografia? Você usou branding e difícil de branding parece, especialmente se o seu cliente tem a marca on-line, então site da marca e você pode ver que eles usaram, e este maquete fora do nosso laptop aqui na NDI têm criou esta apresentação mais longa com estes elementos de fundo. Por exemplo, dan, eles apresentaram este aplicativo e você pode ver que tudo está em branding, tudo está em grande estilo. E para criar algo assim, você realmente precisa praticar. Você realmente precisa explorar todos esses exemplos profissionais. E você pode ver que alguma animação é feita aqui também. Assim, você pode ver que eles estão usando efeitos secundários, Adobe Illustrator, InDesign e Photoshop. E finalmente eles concluíram isso com isso. Então, para usar maquetes, senhoras, estou usando ângulo no Adobe XD. É o serviço de maquete da APEDE. Então você pode estar nessa quantidade de dinheiro para obter todas essas maquetes. Então você pode ver que eles têm 2800 e maquetes no momento. Eles estão disponíveis para Sketch XD e figo Maya também. E se eu começar a rolar para baixo, você pode ver como todas essas maquetes se parecem. Você tem versão argila para ter versões reais, versões escuras, versões lite e assim por diante e assim por diante. E você pode ver o que eles fizeram aqui. Então você tem 1620 dispositivos iOS, 780 dispositivos Android para 30 dispositivos desktop e assim por diante. E você pode ver a pré-visualização rápida ou aqui. Todos esses dispositivos. Agora você pode ver o iPhone 11 e pro incluídos. Pro monitores, DR. iMac e pixel Samsung dispositivos. Como o iPhone 12 foi lançado, eles atualizarão isso de volta para incluir o iPhone 12 também. E uma vez, o que é ótimo sobre isso é que eles incluíram esses papéis de parede em resolução 5K. Assim, você pode usá-los como fundos de área de trabalho. Você pode usá-los como algum tipo de sobreposições e assim por diante e assim por diante. Estas são as empresas que estavam, estão usando este projeto. Alguns depoimentos do usuário aqui, perguntas frequentes e assim por diante. Então, se você gosta disso, você não pode ser morte. E eles também têm uma versão gratuita para que você possa experimentá-lo, mas é realmente limitado e você pode baixar a amostra aqui do início. Eu também vou deixar o link para que você possa acessá-lo muito rapidamente. Então, quando você pagar por isso, ou se você baixar uma amostra gratuita, você vai apenas obter alguns dispositivos. Mas se você decidir pagar, é assim que eles ficam no Adobe XD assim que são abertos. Então você pode clicar aqui no painel Camadas e ver quantos desses dispositivos diferentes existem. Eu estou realmente mostrando a você uma versão um pouco mais antiga, mas você pode ver modelos angulares eram XD. E se eu lançar aqui você pode ver modelos angulares eram XD. Então, esta é uma versão um pouco mais antiga de largura, dispositivos mais antigos, mas ainda funciona, no entanto. Então, para que você possa usar qualquer um desses modelos, se eles são versão gratuita ou esta versão de velocidade, que eu realmente recomendo. By the way, você tem que clicar nos plugins e você tem que instalar plugin ângulo de sua loja. Então, basicamente, você pode clicar aqui e digitar o ângulo a partir desta barra de pesquisa. Então, clique aqui, digite o ângulo, pressione Enter ou Return. E o Howard ousado. Então nós temos este plugin ângulo bem aqui. Eu tenho instalado. Você pode simplesmente instalá-lo e, em seguida, você pode usá-lo. Então, como você pode realmente usar estes eu sólido mostrar-lhe isso também. Aqui estamos nós em nosso projeto. E, por exemplo, vou usar este guia de estilo de projeto. Então deixe-me navegar até ele. Vou apertar o controle D para duplicá-lo. E vamos ver, ele vai se posicionar bem aqui, o que é ótimo. E eu vou simplesmente chamá-lo de apresentação de projeto assim. Então eu vou pular para dentro e excluir todos esses itens porque eu não preciso mais deles. E agora posso começar a construir a minha apresentação. Então, mais uma vez, você pode saltar para ser mãos e você pode explorar todos esses diferentes exemplos de apresentação. Mas eu vou apenas começar minha apresentação e eu vou apenas mostrar a vocês como você pode construir suas apresentações diretamente dentro do Adobe XD para que você possa ter todas as coisas que você criou dentro do Adobe XD. Então, primeiro de tudo, clique aqui e, em seguida protótipo e faça a mesma coisa como sempre fizemos. Então projeto de qualidade, apresentação como essa. Pule de volta ao design. E, por exemplo, eu posso arrastar e soltar minha imagem que eu usei neste projeto aqui. Então eu posso posicioná-lo aqui, por exemplo. Eu posso fazer isso bem ali. E então o que posso fazer é usar algo como um retângulo. Ou vamos ver, talvez eu possa fazer algo assim. Gradiente linear e, em seguida, girado um pouco. Certifica-te de que a minha blusa é mais escura. Certifique-se de que a posição deles não goste. Então, por exemplo, então eu posso clicar aqui. Certifique-se de que eu já vou obesidade todo o caminho para baixo. Certifique-se de diminuir a obesidade deste também. E então o que posso fazer é trazer essa imagem de volta. Eu poderia posicioná-lo bem aqui no corredor superior. Minha tecla Shift, volte para o meu painel de camadas. E eu posso, por exemplo, chamar este gradiente z. E posso reduzir a obesidade da minha imagem para, digamos, 40%, algo assim. E então eu posso ir em frente e estender meu gradiente para que ele cubra minha imagem. Posso saltar para dentro dele assim. E posso ajustar onde distinto. E assim, por exemplo, se for assim pode ser assim. Então você entendeu o ponto. Você também pode mascarar esses dois. Então você pode criar algo assim. Então gradiente vai no topo, obviamente Anakin Laura desce ainda mais para 20% talvez. Então o que posso fazer a seguir é saltar para dentro daqui. Posso copiar esta mensagem. Então, novo banco para New Age. Posso ir para a minha apresentação. Posso visitá-lo aqui mesmo. Vai posicioná-lo bem aqui. E então o que eu posso fazer porque nós criamos nosso logotipo, eu posso simplesmente arrastá-lo e soltá-lo aqui mesmo. Eu posso expandi-lo assim, mas eu vou recomendar que você use e versão PNG como fizemos. Então você pode posicioná-lo assim, ou 1234, por exemplo, apenas para manter as coisas agradáveis e simples. Agora, como isso é 1920, você pode simplesmente usar todos os ativos que fizemos para este projeto. E você também pode reduzir o tamanho disso, por exemplo, agora vamos seguir em frente. E se você quiser criar o mesmo layout que temos aqui, você pode simplesmente pular aqui e ir para o painel Camadas e usar esse texto para simplesmente copiá-lo. Volte para a nossa apresentação pulando aqui, por exemplo, colado. E eu posso remover nosso botão e chamar isso, por exemplo, eu não sei, digamos que novo banco para uma nova página. E vamos ver, porque ainda estamos em uma pilha, você também pode pular dentro daqui e aumentar ou diminuir isso de basicamente eu posso pular aqui, aumentar isso para, eu não sei, 58 por exemplo, ou 68. Só para que pareça um pouco mais agradável. E madeira morta que eu poderia fazer é que eu também posso substituir este texto, obviamente. Então não é exatamente o mesmo texto como este é, mas eu só queria incluir um maquete rápido bem aqui da nossa página. Então, para fazer isso, vou saltar para as minhas maquetes angulares e quando usar um laptop. Então eu posso usar algo assim, por exemplo, Controle C. Eu posso deixá-lo aqui, controle V. E como você pode ver, é extremamente enorme. Você pode desativar o tamanho da responsividade. Você pode segurar sua tecla shift e reduzi-lo em tamanho para algo um pouco mais agradável como este. Talvez você possa ampliar um pouco e posicioná-lo aqui mesmo. Vou posicionar o disco bem aqui. E então o que eu vou usar é talvez criar uma forma que vai para um fundo. Então eu vou usar meus pais começar a partir daqui e então simplesmente desenhar uma forma como esta. Ou eu posso voltar. Vamos começar do início. Então eu vou clicar aqui e excluir tudo, e começar mais uma vez. Então comece com o P. Clique aqui, e depois aqui, só para que tenhamos uma curva mais bonita. E então aquele era assim e para baixo assim e então simplesmente a demanda de Kahlo como sabão. Agora o que vou fazer é saltar aqui para a minha forma. Vou selecioná-lo a partir daqui. Então minha forma de herói, eu vou clicar com o botão direito sobre ele, copiar e depois voltar para a minha forma. Então você pode ver como isso é realmente simples. Clique nele, clique com o botão direito e Colar aparência. Então, como você pode ver, ele vai colar esse gradiente N. Então eu vou posicionar meu texto no topo assim. E você já pode ver onde isso está começando a tomar alguma forma. Então podemos posicionar o disco aqui mesmo. Você pode fazer isso ainda maior. Você pega a foto. O que eu quero mostrar é que eu também posso reduzir obesidade deste caso se eu não gostar de algo assim. Então o que eu queria te mostrar é isso. Tudo o que você precisa fazer é selecionar sua tela. E então o que eu vou fazer é realmente usar algumas dessas músicas. Porque se eu minimizar isso e voltar aos meus modelos de ângulo para o Mac Book. Você pode localizar isso e estes são os quadros de arte para o MacBook maquete. Então, 1440 com 900, você pode realmente copiar este quadro de arte. Volte para o seu projeto e colado, por exemplo, em algum lugar por aqui. E então o que você pode fazer é realmente usar isso. Então Controle C ou você pode segurar sua chave antiga ou qualquer outra coisa e posicionar todos esses elementos dentro de seu rpart. Então vamos fazer isso. Eu posso, por exemplo, selecionar meu herói e selecionar esses são os, SO Control C. E então eu posso pular aqui. E posso apagar todos esses elementos. Deve controlar V, por exemplo, para posicioná-lo em. Vou remover o fundo original deles. E o que eu posso fazer é aplicar apenas um pouco de mudança. Então, por exemplo, posso saltar para dentro daqui. Laura, este baixo isto só para que eu possa trazê-lo mais de perto. Eu posso mover o texto inteiro um pouco para cima e eu posso mover isso acoplado para aqui, a posição raiz, alguns desses elementos. Então isto pode estar aqui e isto pode estar aqui. Isto é bom. E é basicamente isso. O que você precisa fazer a seguir é chamado de MacBook. Então precisamos selecionar a camada de tela como eu fiz aqui. Você pode saltar para plug-ins, saltar para o ângulo, bater, aplicar maquete e simplesmente localizar o MacBook em seus aeroportos. Agora, porque temos muitas placas diferentes, talvez seja um pouco difícil de navegar, mas simplesmente encontrá-lo e é convenientemente no final, então selecionado e você pode escolher todas essas opções diferentes se você Quero. Eu não vou, eu sou simplesmente apertado aplicar e esperar por ele para fazer a sua magia. E vai aplicar o modelo da dívida em apenas alguns segundos. Obviamente, quanto maior for o seu projeto, isso vai levar um pouco mais de tempo para aplicar, mas dê apenas alguns segundos. E como você pode ver, aplicou essa maquete muito bem. Você também pode remover esta marca MacBook se quiser do painel Camadas. Mas acho que está muito bonito. Agora, o que você pode fazer a seguir é simplesmente começar a cultivar isso. E mais uma vez, se eu te levar de volta a essas apresentações, você pode ver o que eles fizeram. Então eles usaram este telefone. E se você está se perguntando como eles fizeram isso, deixe-me mostrar isso rapidamente também. Então tudo o que você precisa fazer é, por exemplo, selecionar, eu não sei. Digamos que este iPhone Control C, pulando aqui, controle V. E você pode simplesmente ir para o seu painel Camadas, localizado a sombra aqui é um remover a sombra e é apenas uma maquete plana agora para que você possa bater o controle D, faça cópias dele e posicione-o no espaço assim, e então preencha essas telas com suas telas. Então é assim que eles fazem. É assim que você pode fazer. Obviamente, quanto mais tempo você passar com isso, mais vai parecer profissional Dumouriez vai parecer melhor. Então, obviamente, eu recomendaria que você passe o máximo de tempo possível com suas apresentações. Se você precisa fazer algo assim, se você só queria apresentar, por exemplo, esta página da Web, tudo o que você pode fazer é clicar em Control E, Selecione uma área de trabalho, por exemplo. A partir daqui eu vou simplesmente selecionar o meu JPEG, hit export. Vai exportar. E o que eu vou fazer é simplesmente trazer da minha área de trabalho e posicioná-lo aqui mesmo. Então é assim que você pode mostrar suas páginas concluídas. Então, por exemplo, eu posso apresentar outra página aqui. E quando os usuários rolam em mãos de praia, por exemplo como nesses exemplos, você pode mostrar-lhes isso para que você possa mostrar quanto mais páginas, todos esses elementos diferentes. E você pode preencher partes de seu projeto usando coisas como d, então você pode usar essas maquetes e assim por diante. Uma última coisa que quero mostrar com essas apresentações de projetos é 3D. E 3D é uma nova opção no Adobe XD. E você não pode realmente chamá-lo de um 3D real, mas ele vai imitar 3D. Então eu vou mostrar a vocês isso no próximo vídeo. Então, vemo-nos lá. 71. 3D no Adobe XD: Quando se trata de 3D, o Adobe XD não é realmente construído para 3D, mas recentemente eles incluíram essa opção 3D. E você pode ir em frente e brincar com ele se você quiser adicionar um pouco de tempero e um pouco mais de interesse visual para seus projetos. E eu realmente recomendaria isso em alguns lugares, especialmente quando você está criando essas apresentações. Porque você pode então mostrar como seus elementos podem parecer em 3D e simplesmente dar-lhes um pouco mais de tempero visual em um pouco mais de interesse visual do que o habitual. Mais uma vez, o Adobe XD não é um software 3D ou 3d2 por qualquer meio, você pode usar algo como 3D Max. Você pode usar algo como um liquidificador. B também tem seu próprio software. Acho que é chamado de “i dot adobe Dimension”. Também é um pouco delimitado procurado. Se você quiser criar um verdadeiro 3D real, eu realmente recomendo para você usar algo como um liquidificador, que é gratuito, ou para usar algo como 3DS Max ou Autodesk Maya ou coisas assim. Mas você realmente não precisa dessas ferramentas para funcionar como um designer de UX da interface do usuário. Esses são apenas se você quiser expandir seus conhecimentos e expandir sua área de trabalho e campo para que você possa testar a dose. Agora, vou mostrar a vocês o que é possível no Adobe XD. Mais uma vez, certifique-se de entender que isso é extremamente limitado, mas tem alguns usos. Então eu vou mostrar a vocês esses aqui, especialmente em apresentações. Então aqui estamos de volta no Adobe XD onde eu deixei você no vídeo anterior. Então, mais uma vez, você pode imaginar que você pode construir esta apresentação e você pode clicar duas vezes em seu quadro de arte estendido todo o caminho para baixo tanto quanto você precisa. Então deixe-me mostrar rapidamente o que você pode fazer com 3D em XD. Então vamos começar com um desses cartões. Por exemplo, eu posso escolher este, garoto Controle C. Ou você pode selecioná-lo no seu painel de ácido. Obviamente, se você quiser e simplesmente arrastar e soltar. Vou copiá-lo desta forma. Eu vou pular aqui, controle de criança V para colar aqui. Aqui está. Posso posicionar, está algures por aqui. E eu também posso ampliá-lo um pouco se eu quiser, mas vai aumentar assim. Então, se você quiser fazer isso, eu realmente recomendo que você o exporte como um JPEG ou um PNG. Então, para criá-lo para ser um 3D, o que você vai notar aqui é que temos essa opção de transformação 3D. Então, quando você clica nele, você obtém esta ferramenta bem aqui. Então você pode adicioná-lo manualmente, todas essas opções diferentes. Então, para rotação, se você passar o mouse, você pode ver o que ele faz. Então exposição, Isso vai ser rotação ampla e isso vai ser rotação z. Então, em todos os três eixos, ou você pode simplesmente fazer algo assim manualmente. Então você pode girá-lo assim. Você pode girá-lo assim. E isso é o que eu vou realmente acabar usando. Assim, você pode criar uma sombra de fundo, por exemplo, em seu componente principal, e ela será mostrada como uma sombra aqui neste componente também. O que eu vou fazer é posicionar isso em algum lugar por aqui. Vou acertar o Controle D. E vou garantir que eu posicione esta duplicata bem aqui no fundo. Então vamos alinhá-lo ao nosso grupo, por exemplo, essa é a posição, está em algum lugar por aqui. Vamos nos posicionar no fundo. E eu vou clicar no estado do horror. E você pode ver que ele me apresentou com o estado de horror em 3D. Então você pode simplesmente posicionar qualquer um desses que você pode trabalhar como quiser. E o que é ótimo sobre isso é que se você clicar em um cartão VG, você pode, por exemplo, incluir uma sombra. E vamos incluir uma bela sombra grande. Então 20-20 e 50 por exemplo, algo assim. E se eu arrastar meu cartão completo, você pode ver que a sombra está bem em 3D e está se aplicando para descartar também. Então, o que você pode fazer é criar uma pequena seção agradável como DES. Talvez em algum momento isso, e então vamos usar um texto mais uma vez. Então eu vou apertar o controle D nesta posição de texto, por exemplo, bem aqui. E você pode simplesmente imaginar como determinado disco e acabar olhando como um tipo separado de seção em sua apresentação ou em seu design. Você não precisa fazer isso apenas para componentes. Você pode criar elementos 3D usando todos os tipos de imagens diferentes. Você pode criar designs como DES. Então vamos encontrar outro. Então vamos usar, eu não sei, apenas esta imagem ou vamos usar alguma coisa. Sim, sim, vamos realmente usar esta imagem. Então eu vou pular. Então, para o controle C, vou voltar para a minha apresentação. Pule bem aqui. A posição controlo-V pode imagem lá. Vou incluir a sombra imediatamente. Então 202020. Então este é um pouco mais escuro e porque minha transformação 3D está incluída, eu posso simplesmente girar em outra direção. Então, algo assim. E você pode ver como isso se parece. Então você pode posicioná-lo na grade, o que é fantástico. Então você pode fazer Controle D e incluir caixas de imposto como DES, por exemplo. Então você pode ver onde isso vai dar. Você também pode aumentar o tamanho assim, para que ele aumente em 3D. E se você quiser desligar esta opção porque você pode ver o que eu selecionar, ele me mostra que em 3D você pode simplesmente clicar aqui e, em seguida, você pode começar a editá-lo em tempo real e em um tipo real de olhar e sentir se você quiser. Então esse é o visual e 3D no Adobe XD. Mais uma vez, como você pode ver, é muito limitado, muito básico, mas você pode usá-lo para algumas coisas básicas. E se você quiser algumas coisas mais avançadas são realmente recomendar algo como um liquidificador, porque mais uma vez, é gratuito e você pode encontrar um monte desses tutoriais diferentes no YouTube, especialmente para que você possa aprender um pouco mais sobre liquidificador ali. Mas, mais uma vez, o ponto deste vídeo é apenas para mostrar como você pode adicionar um pouco de tempero ao seu design. Como você pode melhorar suas habilidades de apresentação e como você pode levar seu design para o próximo nível. Porque talvez algum outro designer possa não usar animações. Você faz. Designers mães podem usar 3D. Você pode. Assim, você pode se elevar em cima de todos esses outros designers e melhorar suas chances de conseguir um emprego, por exemplo. Então você pode fazer todas essas coisas dentro do Adobe XD, como eu mostrei. Assim, você pode começar do planejamento à arquitetura do site, wireframes de papel, wireframes em design e animação de ovo dxdy, design responsivo, guia de estilo do projeto para finalmente apresentação. Você pode fazer tudo isso no Adobe XD. E se você estiver usando um plano gratuito, você pode fazer todas essas coisas de graça. Então é isso para este curso. Este é o vídeo final deste curso, e eu realmente espero que você tenha gostado e eu vou vê-lo na próxima lição. Vamos explorar um pouco mais coisas do Adobe XD. 72. Estrutura de pastas para exportação de ativos: Nesta parte do curso, vamos falar sobre a meta de exportação de nossos ativos para clientes e desenvolvedores. E eu vou mostrar-lhe como você pode fazer isso da maneira mais segura. Então, basicamente, na seção anterior, eu expliquei a vocês como você pode compartilhar isso. Tudo isso no Adobe XD quando você carregá-lo para a nuvem e os desenvolvedores podem basicamente baixar todos esses ácidos. Mas, mais uma vez, se você estiver usando a versão gratuita do Adobe XD, você só tem esse projeto. Assim que o projeto for concluído, você não terá mais a opção de compartilhar esses arquivos. Então, basicamente, você tem que esperar que eles desenvolvam esse produto para que em tern seja proibido você em criar novos arquivos, em trabalhar com novos clientes. Então, para evitar isso, o que você pode fazer é exportar para sua área de trabalho e, em seguida, simplesmente colocar todos esses arquivos dentro de uma pasta zip e, em seguida, compartilhar essa pasta zip com seus clientes e desenvolvedores. Agora há muitas opções diferentes que você pode compartilhar isso, mas eu vou mostrar o meu caminho. E basicamente vamos exportar todos esses ativos como ativos JPEG, PNG ou SVG. Facetas PDF são basicamente apenas para todos esses arquivos. E como já lhe mostrei, como, por exemplo, para um resumo de design, por exemplo, para algumas propostas de projetos e assim por diante. Então, todas essas coisas que você pode fazer em z e essas são ótimas para exportar este PDF. Mas basicamente esses três formatos de arquivo, então JPEG, PNG e SVG é o que você vai usar o tempo todo. Então, mais uma vez, temos um novo design de site bancário. Esse é o nome do nosso projeto. Para que eu possa criar minha pasta. WC, por exemplo, banco real, site, design, ativos. Qualidade que dentro desta pasta. E deixe-me trazê-lo aqui. Você vai colocar seu arquivo Adobe XD, obviamente quando o cliente for x2. E dentro desta pasta principal, vamos colocar algumas pastas adicionais onde vamos realmente incluir nesses ativos dentro. Além disso, nesta pasta principal, você pode incluir algo como um PDF onde você criou links para as fontes que você usa ou você pode baixar uma fonte, colocá-lo dentro do pacote. Por exemplo, para a fonte Poppins, ele vem dentro de um arquivo zip. Você pode colocar esse arquivo zip aqui dentro desta pasta. E, em seguida, desenvolvedor pode usar fonte de dívida imediatamente. Então vamos começar e eu vou mostrar a vocês como eu gosto de fazer coisas assim. Então, se pularmos dentro de um design de site como este, temos todas essas páginas diferentes. Então, se clicarmos aqui para selecionar esta página, você pode ver que temos o design da página inicial. Então a primeira pasta que vamos criar, e eu vou rotulá-los em números porque vamos da página inicial em diante é o número um. Página inicial. Então vamos seguir em frente. E se ampliarmos um pouco para que possamos ver todos esses nomes de páginas diferentes. O número dois vai ser contas. O número três vai ser um empréstimo. Número quatro cartas. E deixe-me Controlo-C, Controlo-V. E isso vai ser cinco inversed. Vamos fazer isso mais uma vez. Isto vai ser seis digitais. E porque se você se lembrou, nós temos os mesmos recursos basicamente no login e no cadastro. Então o que eu posso fazer é realmente combinar essas duas páginas. Então eu posso fazer algo como sete login barra Siam. E só para que possamos arredondar a dose para páginas ao mesmo tempo, então podemos passar para o design do painel e ver o que temos aqui. Então, temos o design do painel. Então esse vai ser o nosso mandado número oito de traço. Para projetar. Em seguida, vamos ter uma contagem. Então, podemos selecionar este nove. Isso vai ser na conta do painel. Como isso. Vamos criar mais um. Então isso vai ser um painel de transações. E vai ser o número dez. E deixe-os pausar rapidamente o vídeo aqui para que eu possa fazer tudo isso e então podemos seguir em frente para que eu não te aborreça mais. Ok, então agora que isso está concluído, como você pode ver, agora temos 14 dessas pastas. Dentro de cada uma dessas pastas, vamos incluir tamanhos diferentes. Então vamos agora explorar a dívida. Se eu levá-lo de volta à nossa página inicial aqui, você pode ver que nós temos este tamanho único, que é o nosso tamanho original, e então nós temos todos esses outros tamanhos. Então vamos criar essas pastas. Então, para saltar para a minha estrutura de valência , mais uma vez, você vai colocar seu arquivo XD aqui. Você vai colocar o arquivo zip, que as fontes, por exemplo, aqui, você vai colocar no projeto breve aqui, proposta de projeto. Então todos esses documentos, você pode colocá-los aqui ou você pode chamá-los, Por exemplo, documentos, e, em seguida, colocar todos eles em uma pasta separada bem aqui com todas essas outras pastas, tudo depende de você. Dentro da página inicial dela, vamos criar uma lista de pastas diferentes. Então eu vou chamar este principal criar número dois. Então esse é o nosso tamanho principal. O número dois é grande e desktops. Número três é um grande e dispositivos. O número três é, por exemplo, comprimidos. Ou podemos dar exatamente a cena chamada superior ou você quer. Então dispositivos médios cortam os dublets. O meu pai. E finalmente, temos esses dispositivos extra pequenos no final de cinco dispositivos extra pequenos. Então o que você vai fazer é basicamente eu acho que você vai entender. Vamos exportar separadamente todos esses tamanhos. Obviamente, o que você pode fazer é simplesmente selecionar todas essas pastas Controle C, voltar aqui, controlar v, voltar para este, controlar V, e fazer isso para todas essas pastas, obviamente. Mas como nós temos apenas esses tamanhos para a página, nós vamos apenas fazê-los para uma página inicial. Eu também vou mostrar como você pode exportar o painel. Mas basicamente temos apenas uma página que tem homepage no nosso caso. Mas você pode imaginar quando você faz todos esses outros, você vai exportá-los também. Então, basicamente, essa é a nossa estrutura. No próximo vídeo, vou mostrar como você pode começar a exportar quais formatos de arquivo são importantes e como você pode decidir qual formato de arquivo deseja exportar para qual deles. Então, vemo-nos lá. 73. Exportando seus ativos: Tudo bem, agora vamos voltar a isso e eu vou mostrar a vocês como você pode começar a exportar isso. Então, obviamente, vamos pular aqui e começar a exportar todos esses elementos. Então Camadas, painel é obviamente muito importante. Eu vou pular aqui mesmo. E para começar com a exportação, o que eu posso fazer é bater o controle ie. E a primeira coisa que eu realmente vou fazer é mudar para onde meus arquivos de exportação estão indo. Então você pode acertar essa mudança. E a partir da sua área de trabalho ou onde quer que esteja, você pode selecionar esta pasta que já criamos, que é esta pasta. E nós queremos basicamente posicionar isso dentro da nossa pasta principal. Então esta é a nossa página inicial. É a nossa pasta principal porque é um tamanho médio e você pode simplesmente selecionar essa pasta e, em seguida, todos os ativos sua exportação deste discurso vão para essa pasta particular. Então o que eu vou fazer para este é escolher SVG. E você obviamente tem todas essas configurações diferentes que você pode usar. Você pode ver com o seu desenvolvedor se você precisa ajustar qualquer um destes um pouco mais, ou se você pode simplesmente usar estes como padrão, eu quase sempre usá-los como padrão e eu nunca tive qualquer problema. Então, basicamente, quando você acertar exportação, ele vai começar a exportar. E é isso. Demos esses nomes. É por isso que eles são importantes para exportar. Temos ícone de telefone, temos ícone de localização, e temos essas duas bandeiras. Então ícone estrangeiro e localização, Eu vou exportar como SVG também. Mas esses dois folhetos, por exemplo, eu posso exportar como qualquer PNG, que você pode, não há realmente nenhum problema, ou você pode exportá-lo como GPX. Portanto, existem essas configurações para JPEGs e PNGs, e vamos percorrê-las rapidamente. Então o formato é a qualidade JPEG é 100%. Você pode diminuir a qualidade para otimizar sua imagem e torná-la menor, se quiser. Você pode exportar para design, que é basicamente apenas este tamanho. Ou você pode exportá-lo para web e ele irá exportar em um tamanho, n o dobro do tamanho, que vai ser mais fácil do que para desenvolvedores para usar mais tarde. Então vamos fazer isso. Exporta-lo assim. Agora vamos passar para o nosso herói seção N para o nav. Basicamente, o que você pode fazer é exportar o logotipo. Então acerte o controle ou seja. Vamos exportá-lo como SVG porque queremos manter a qualidade o máximo possível. E para o botão, basicamente, você nunca está exportando para botão como este porque os desenvolvedores estão sempre indo para incluir a própria fonte dentro do botão. Então, basicamente, você nunca está exportando apenas como o botão de avião como ele está aqui. Então, basicamente, o que você precisa fazer é exportar este botão como em seu estado padrão, como ele está aqui, e exportado em estado hover. Então aqui temos o botão de login. Então o que eu posso fazer é simplesmente esconder o texto de login, clicar nele. Ela controlaria a ie. Vou exportá-la como SVG. Clique aqui. E eu vou voltar para a minha pasta localizada quando ela estiver aberta, clique em Exibir, ícone grande para que você possa vê-lo. Então botão Login aqui está. Vou mudar seu nome para padrão. Porque esse é o estado padrão. E agora se eu mudar para o estado Horace, eu posso esconder meu texto mais uma vez, exportado mais uma vez, mais uma vez como SVG. E se eu entrar aqui e atualizar isso, você vê que temos um botão de login agora. E eu vou mudar seu nome para pairar, apenas para que o desenvolvedor saiba qual estado ele está em questão. Então eu posso voltar, trazer isso de volta, trazer isso de volta também. E isso é basicamente um dois. Agora podemos mover um, mas antes de fazer nav, BG precisa ser exportado. Então controle de batida, ou seja, eu vou exportá-lo como SVG. E mais uma vez, porque eu exportei este nav e o fundo como arquivos SVG, que você pode fazer é basicamente selecionar vários arquivos e que você deseja exportar como SVGs, que eu vou mostrar a vocês agora. Então eu vou selecionar meu herói Bu Jue, forma de herói. E eu vou selecionar vários desses elementos ou todos os três, forma de herói e herói BG. Vou exportar todos eles como SVG. Então ele tinha controle Lee, eu vou manter todas essas configurações pressionado Exportar. E assim você pode exportá-los muito mais rápido do que exportá-los um por um. Aqui, eu vou exportar apenas esses círculos de herói. Então ele controlava como SVG, eu não quero exportar a mesquita porque os desenvolvedores podem entender onde eu coloquei a mesquita e eles podem então exportados como dívida. Se eles quiserem usar a versão PNG, você pode clicar em Control E, e você pode selecionar isso como um PNG para a Web. Então, 12 tamanhos, ele é projetado em um x, então neste tamanho específico, eles possam saber como exportá-lo e como mover um de lá. Você não exporta o texto. Os desenvolvedores vão usar o texto. Vamos exportar isto como um PNG. Então ele tinha controle li, escolher PNG aqui, escolher a exportação hit web vai exportá-lo como 1X e 2X. E, finalmente, precisamos fazer a mesma coisa para o nosso botão. Então lembre-se, como usamos exatamente esse mesmo botão em todo o nosso design, nós só o mudamos aqui mais tarde dentro do nosso painel. Vamos chamá-lo de botão principal, como se já estivesse aqui. Então eu vou fazer a mesma coisa. Vou ocultar MyText hit control, exportado como SVG hit export, pulando aqui e ver o que é. Então ele para o botão principal e renomeá-lo para padrão, que é o nosso estado padrão. E você pode ver que é bem aqui onde podemos digitar o estado padrão como você quiser. Vou mantê-lo assim, o que vai trazer isso de volta, voltar a pairar, esconder isso, apertar Controle, Lee, Exportar, e voltar para aqui. Isto vai ser um botão mau pairar. Então, mais uma vez, os desenvolvedores podem saber qual deles é, e é basicamente isso. É assim que você vai e continua exportando tudo isso. Agora, quando se trata destes, o que você pode fazer é selecionar o seu cartão de conteúdo e exportado assim, apenas sem quaisquer textos. Então você pode esconder todos os textos. Você pode até se esconder, aprender mais. Você pode até mesmo ocultar esta seta e você pode exportá-la assim. Então você pode ir para o estado de horror em exportado da mesma maneira. Mas o que eu realmente recomendo é que você exporte todos esses elementos separadamente. Então, mais uma vez, você pode trazer este texto. E porque queremos exportar tudo isso como SVG, o que eu vou fazer é realmente selecionar meu cartão BG, selecionar minha seta, seta e selecionar meu ícone. Vou cagar, aperte o Controle E SVG. E então eu vou voltar para o estado de horror. Eu estou indo para ir para o cartão BG cor atual porque nós precisávamos agora. E eu vou exportar ícone de seta, mas eu vou mudar seu nome. Então, mais uma vez, você pode fazer isso. Você tem que fazer assim de outra forma. E a função de animação automática não funcionará. Então, porque exportamos DC-3 daqui, os desenvolvedores podem usá-lo diretamente daqui e eles não precisam copiar e colar o que quer que seja. Porque temos este círculo. Eles podem usar o mesmo círculo, mas aqui é um pouco diferente. Então, porque isso é chamado de cartão de conteúdo, talvez possamos dar-lhe o nome do círculo de parte de conteúdo. Tão mortíferos, eles vão ser capazes de entender dados de arcade, dívidas. Ou se você quiser, você pode fazer isso para todas essas formas. Então, em vez de círculo de linha cruzada, você pode chamá-los de cartão de conteúdo, conteúdo cruzado linha corrente círculo cartão de contato, e, em seguida, fazê-lo assim. Deixe-me apertar o controle D para explorar este círculo, porque como eu disse, eu vou simplesmente usar estes. Então vamos ver, círculo de cartão de conteúdo e realmente em massa adivinhar, você o veria exportado como uma máscara? Então você tem que desagrupar esta mesquita e, em seguida, agrupá-la mais uma vez, a fim de exportar isso. Então deixe-me mostrar-lhe que desagrupar mesquita, esconder este cartão de conteúdo círculo controle SVG, tudo bem. Então você pode mostrar este turno Controle M para colocá-lo de volta dentro da máscara, máscara, e é basicamente isso. Então o que eu preciso fazer aqui é exportar este ícone assim. Então, como posso fazer isso? Eu posso criar um estado diferente para ele, que vai ser muito mais rápido, muito mais simples do que você pode simplesmente mudar esses estados. Mas, finalmente, não posso exportá-la como está aqui. Então eu posso mudar seu nome aqui. Mas, mais uma vez, não funcionará sob inimigos automáticos. Então você tem que fazer o que importava. Então você tem que encontrá-lo aqui. Vamos ver o que é. Então P para contas personalizadas ícone e alterar seu nome para um padrão como esse. E depois volte para aqui. Ele controlaria isto mais uma vez. SVG exportado, e agora vamos chamá-lo de pairar. Vamos ver o que é. Esta é a decisão padrão de passar o mouse. E agora, mais uma vez, os desenvolvedores serão capazes de acessar essa enorme alta qualidade, como você pode ver, sem qualquer preocupação, porque nós exportamos como SVG. E é basicamente isso. Eu não vou aborrecê-lo com fazer todos esses elementos ou recentemente porque agora este vídeo vai nos levar sirene em quantas horas. Vamos agora voltar a isto. E por exemplo, para essa taxa de câmbio, posso selecionar todas essas bandeiras e exportá-las como jpegs. Porque já temos a Inglaterra, porque a tiramos daqui. Não precisamos exportá-lo, mas ainda vou exportá-lo. Mas antes disso, posso pular aqui e chamar isso, vamos ver a Inglaterra no topo agora. Porque eu quero ter certeza de que o desenvolvedor usa o tamanho correto. E isso vai ser Inglaterra 2x top nav, assim. Porque no nav superior temos um tamanho e aqui temos outro tamanho. Então, se eu selecioná-lo a partir daqui, controle ou seja, Eu posso escolher SVG, mas eu vou com PNGs, bateu exportação. Vai exportar todos eles ao mesmo tempo. Como você pode ver se eu atualizar, você pode ver que, por exemplo, Suíça tem dois tamanhos, pesquisas em tamanhos, porque a Sérvia não está repetindo aqui. Ainda podemos mantê-lo assim. Mas, por exemplo, eu também posso fazer o tanque de navegação superior. Então, Sérvia, navegação superior. Eu posso selecionar estes e alterar este nome também. Então, mais uma vez, o desenvolvedor sabe para onde deve ir. Deixe-o fechar tudo isso rapidamente e podemos seguir em frente. Então, mais uma vez, isso tem o nome da imagem. Então este é o festival da semana. Então eu vou recomendar que você chamá-lo assim ou você pode dar-lhe um nome mais curto. Então, por exemplo, assim. Então você acordaria a imagem do festival. Você pode manter as coisas simples assim se quiser. Mais uma vez, esta imagem aqui, como você pode ver, é apenas chamada de imagem de cartão grande, mas você pode chamá-la, por exemplo, incrível. Em investimentos. Para trás. Apenas imagem, que eu sei que é um pouco demais. Ou você pode fazer algo como, por exemplo, imagem de serviços modernos. Então agora você encurtou isso ou você pode fazer isso assim. Então, tudo depende de você. Certifique-se de concordar com clientes e desenvolvedores como deseja exportar essas imagens. E, finalmente, mais uma vez, imagens, você pode exportá-las como JPEG ou PNG. Png é geralmente recomendado se você tem uma imagem com um fundo transparente, como nós fazemos, por exemplo, como eu exportar esta, como fazemos aqui. Esta é a imagem sem qualquer plano de fundo, então é geralmente preferido exportar isso como PNG de qualquer maneira que é recomendado. Mas com todas essas outras imagens que não têm recortes em torno delas, você pode simplesmente exportá-las como jpegs. Então isso é basicamente para todos estes duradouros ou o que mostrar é para o rodapé, A única coisa que eu vou exportar aqui é o fundo. Mas aqui eu vou exportar todos estes como SVGs, solares saltar dentro de lá, Eu tenho o meu logotipo exportado já. Então, se eu pular para dentro, clique em L para encontrar meu logotipo. Vamos ver o que é. Curioso. E podemos chamá-lo de cor do logotipo, por exemplo. Porque aqui temos o logotipo preto e branco. Então, agora, se eu selecionar todos estes, então vamos selecionar o logotipo, ícone de localização, formar um ícone e ícone de e-mail. Mais uma vez, eu tenho isso, então eu tenho minha localização e ícones estrangeiros lá em cima. Eles são do mesmo tamanho, então eu não vou selecionar a dose. Então localização na fonte, mas eu vou selecionar o meu ícone de e-mail e eu vou selecionar Info tira BG controle. Eu vou escolher SVG daqui, onde ele está, clique em Exportar e ele vai exportar aqueles como SVG. Então lá você tem que basicamente dívidas sua exportação. É assim que eu faço. É assim que eu sempre fiz. Então, basicamente em poucas palavras, embrulhe as coisas quando você estiver exportando esses ícones. Por exemplo, se você tem vários estados, você precisa informar seus desenvolvedores através dos nomes de arquivo que você tem esses vários estados. Então, como fizemos aqui em Logo e cor do logotipo. A mesma coisa para os botões. Então botão principal e botão principal pairar. O que você também pode fazer é criar um sistema de design como você está trabalhando como um mostra-lhe um exemplo adulto. Então, nesse exemplo, você viu que eles colocaram todos esses diferentes elementos um em cima do outro. Então você pode simplesmente selecionar o elemento que já tem esse nome. Assim, por exemplo, cor do logotipo ou preto e branco ou qualquer outra coisa, e depois exportar esses elementos diferentes. Esqueci de renomear isso para logroll, preto e branco, por exemplo. Então, quando você começar a exportar todos esses quatro desenvolvedores, eles serão capazes de entender o que tudo é. Então, quando eles abrirem, será exatamente do mesmo tamanho que é no design. Terá exatamente as mesmas cores. Ele terá exatamente as mesmas opções. E finalmente, os mesmos nomes que você pretendia para todos esses diferentes elementos. Então isso é basicamente para exportar. Você pode imaginar que todo esse processo que eu lhe mostrei, você vai fazer isso para todas essas páginas diferentes. Mas, por exemplo, aqui temos, o que é essa conta? Você irá, em vez de nesta pasta, Escolher a pasta Contas principal e, em seguida, exportar todos os seus ativos. São desta página em particular. Agora, vamos passar para responsivo. E dentro do responsivo, você vai fazer exatamente a mesma coisa. Então, por exemplo, digamos que você tenha completado tudo. Você completou todos estes neste tamanho do que todos estes neste tamanho, todos estes indecisos, basicamente você tem todas as páginas em todos os tamanhos. O que eu recomendaria que você fizesse é muito simples. Vá para a página inicial, exporte. Todos estes, em seguida, podem ir para este tamanho da página inicial, exportação, este tamanho da página inicial, exportação este e este. E depois que terminar, vá para a próxima página. O que você pode fazer é em vez de perder tempo exportando tudo isso, você pode simplesmente exportar, digamos isso uma vez. Este principal, vamos ver como chamamos o nav BG. Então você exportou apenas uma vez e, em seguida, você pode simplesmente copiar e colar esses elementos entre pastas. Então temos exatamente a mesma coisa no topo. Temos exatamente a mesma coisa com o topo. Temos exatamente o mesmo herói com os mesmos elementos. Você só coisa que está mudando é esta imagem e a localização de todos esses itens por desenvolvedores irá alinhar todos esses itens mais tarde no código. Você não exportará este botão mais uma vez porque já o exportou. Então você pode simplesmente ir aqui onde estamos para a página inicial. Quero dizer, você pode encontrar seu botão. Portanto, o botão Login passa o mouse e o botão de login padrão. Você vai para o Controle C, por exemplo. Então você está indo para ir para Contas Maio e Controle V. Então certifique-se de todos os elementos que estão se repetindo. Então, por exemplo, aqui abaixo, temos esse novo banco e todas essas informações. Copiei essa informação da sua página inicial principal da área de trabalho a partir daqui, e então simplesmente vá para dentro de todos esses tamanhos médios e pressione Control V. Você vai fazer isso a mesma coisa para todas essas outras páginas. Para esta seção, especialmente, você pode ver que temos esses três ícones que estão repetindo em todas as nossas páginas. Então, por que você desperdiçar seu tempo e ir e exportar todos eles entre todas essas páginas, você pode, se você quiser. Mas por que você perderia tempo quando você pode simplesmente ir em frente e copiar e colar todos esses elementos em todo o seu design. Então, basicamente, a mesma coisa se aplica com a exportação como é com o design. Quando você está começando, vai levar muito tempo para aplicar todos esses princípios, elementos, cores, tamanhos e assim por diante. Mas quando você começar, especialmente com este exemplo e este exemplo. Então, basicamente, como eu disse, quando estávamos projetando isso, esta seção no meio é o que vai mudar. Basicamente, todas essas organizações vão ficar quase exatamente iguais. O que você está fazendo aqui no herói é mudar o texto e esta imagem, é basicamente isso. Cabe a você se você quiser ajustar a posição desses três elementos, por exemplo, nesses elementos de fundo. Mas você geralmente quer que tudo no meio é o que vai mudar. Então, por que você exportaria tudo quando você pode exportá-lo uma vez e, em seguida, simplesmente copiar e colar durante o seu desejo. Então é assim que faço a exportação, e é por isso que gosto de exportar desta forma porque é muito mais simples para mim exportá-lo para desenvolvedores. E eles serão capazes de acessar esses arquivos daqui a um ano, daqui a dois anos, daqui a dez anos, não importa. Exportei todos esses arquivos e depois envio-lhes arquivos de dose. Antes de terminar, quero terminar com isso. Então você pode exportar estes se você quiser simplesmente como um JPEG, mas eles não terão muito senso. Mas como eu mostrei a vocês nos vídeos de compartilhamento, os desenvolvedores, quando clicarem em um desses quadros de arte serão capazes de ver todos estes são layouts de grade para eles mesmos para que eles possam aplicá-los diretamente em código. O que eu queria te mostrar é isso. Então, basicamente, você pode exportar todos estes como este, porque este é apenas um texto. Você não vai exportar o texto. Quanto a esses rótulos, você pode exportá-los assim, ou você pode simplesmente saltar para dentro daqui e exportá-los exatamente como este ícone. Então você pode exportá-los como a marca. Mas, obviamente, marca vai mudar o tempo todo porque os usuários não estão continuar indo para as mesmas marcas. Por exemplo, um dia você pode ir ao café Starbucks, No dia seguinte você pode ir para custar o café são no dia seguinte ao pai, você pode ir para o café sonho. Então, todas essas diferentes cafeterias não vão aparecer aqui como logotipos, mas são apenas textos simples. Portanto, você não vai exportar isso. Você só vai exportar este ícone para a comida, porque a comida entra em jogo para comer e beber também. Para a roupa. Talvez você tenha ido comprar os sapatos, vamos ver, a TI faz, mas ainda assim vai ficar nesse ícone porque é a roupa. Portanto, não importa se é XYDA adicionado AS H&M, seja o que for, ele ainda vai manter este ícone. Portanto, basta exportar apenas este ícone. Tal como acontece com estas formas de fundo, você pode, por exemplo, exportá-las se quiser, digamos, a partir desta primeira página, onde está no topo. Então a partir daqui, você pode exportá-los daqui e depois deixá-los assim. Você pode fazer a mesma coisa para paginação e simplesmente copiar e colar em todo o seu design. O que você vai estar fazendo para isso na verdade é que você pode pular dentro deste gráfico. E você pode ir em frente e esconder suas máscaras. Então você pode fazer isso e, em seguida, exportar seu círculo assim, ou você pode simplesmente desagrupar a máscara como eu já mostrei anteriormente. Então clique com o botão direito do mouse na máscara de grupo e oculte essa parte Clique aqui, controle P e exporte como SVG. Vou exportá-la para a mesma pasta, não importa. Então clique aqui para trazê-lo de volta. Ou você pode simplesmente clicar em Control Z três vezes para voltar e, em seguida, mover a partir daí. Você vai exportar estes como SVGs também. E é basicamente isso. Isso é tudo o que eu queria te dizer. Este vai ser o logotipo J Berg. Você só exporta uma vez e copie e colou em todo o seu design porque é exatamente o mesmo. Você pode exportar esses ícones e é basicamente isso. Isso é para exportar dívidas, para compartilhar. Uma última coisa que quero mostrar é a criação do guia de estilo. E no próximo vídeo vou mostrar a vocês como podemos criar esse guia de estilo, como você pode personalizá-lo. E, finalmente, como pode compartilhá-lo com seus clientes e desenvolvedores. Saw, vejo você lá. 74. Criando o projeto: Então, finalmente chega a hora de terminar este projeto e terminar basicamente o discurso de Graham. E agora é a hora de criar o guia de estilo. E vou mostrar-lhe qual é o guia de estilo, como você pode usá-lo e como podemos criá-lo para o seu projeto, não importa o tamanho do seu projeto. Basicamente, o guia de estilo é a coleção de todos os seus elementos e diretrizes para o seu design. Então estilo, guia de estilo pode ser extremamente enorme com milhares de elementos diferentes. E é aí que é melhor criar esse sistema de desejos, que eu já mostrei a vocês. Mas se você está criando um pequeno projeto como nós estamos aqui, você pode simplesmente criar um quadro de arte e você pode colocá-lo dentro de seu arquivo. E então você pode compartilhar esse guia de estilo com seus clientes e especialmente desenvolvedores. Então, como você pode começar? Basta clicar aqui para criar um novo aeroporto. E eu vou criar este grande, então 19-21, e ele posiciona-o bem aqui, mas eu vou colocá-lo todo o caminho abaixo de tudo o resto. Por aqui, vou mudar para o meu protótipo. Vou clicar aqui para criar outro enredo. E eu vou chamá-lo stylobate ou guia de estilo do projeto. E agora posso movê-lo um pouco mais para baixo. Volte ao meu design, dê-lhe um nome do guia de estilo de projetos. E agora porque ele criou esses valores que eu realmente não quero. O que vou fazer é usar a minha chave antiga para copiar o meu RPART para aqui. Então o que eu posso fazer é basicamente ver esses valores que eu criei. Então eu vou usar os mesmos valores. Então eu vou colocar isso para baixo para 7% bem aqui. Então vamos ter a mesma obesidade fora da nossa rede. Então 12 colunas, 6080 a 1038. Então vamos fazer isso. Então 6080 para 138, o que é bom. Agora eu posso ir em frente e remover isso porque eu não preciso mais dele. E agora vamos em frente e começar com o nosso guia de estilo. O que eu posso fazer é basicamente listar todos os meus itens. Primeiro vou expandir isso e mover isso cima ou para baixo como você quiser, porque eu não preciso mais dele. O que você pode fazer é pular dentro de suas bibliotecas, dentro de seu painel de ativos e ver o que você tem aqui. Então você tem cores, estilos de caractere e tem todos esses componentes diferentes que você criou em todo o processo de design. Agora o que você pode fazer é passar por aqui e simplesmente arrastar e soltar esses elementos aqui. Ou você pode ir ao longo do seu design. Então aqui, por exemplo. Em seguida, selecione e copie elementos a partir daqui e, em seguida, basee-os no seu guia de estilo. Então, vamos começar. O que posso fazer primeiro é, por exemplo, listar todas as minhas cores. Então você pode pressionar t para a ferramenta de texto, Digite em cores. Ou eu posso ir todo o capital. Como você quiser. Você pode selecioná-lo e aplicar, por exemplo, este 92, ele assim. Só para que seja bem visível e que vá bem com o nosso texto. posição tão antiga que ali. E vamos ver, talvez eu possa posicionar tão 12345678, digamos, por exemplo, em seguida, sobre ele controlou você, posicionado é para baixo e usado. Vamos ver. Não sei, 24 normais. Certifica-te de que é assim. Certifica-te de que isto também é assim. Então o que eu vou fazer é ver, 123456789. Vou criar um retângulo. Por exemplo, assim pode ser. Então dois a quatro largura, vamos ver dois a quatro. Então, apenas um quadrado básico e o que eu disse nove. Então repita a grade e crie nove instâncias. Então, 2467. Na verdade, é muito grande, então vamos voltar ao original e talvez torná-lo um pouco menor. Então algo assim, eu acho que vai funcionar bem. Vou remover a minha fronteira. Ele repetiria a grade e agora criava nove overdose. Então, se você não pode vê-los, você pode simplesmente terminá-los como esta grade de desagrupar e C, então 24689. Então eu vou remover esses dois. Então, na verdade, esses dois. E agora você pode começar aplicando suas cores. Então eu posso clicar sobre estes, para que eu possa clicar neste. Isto é branco. Clique no próximo, cinza claro, próximo cinza escuro. E então simplesmente seguir em frente a partir daí e aplicar todas as minhas amostras de cores para agradável. Então, assim. O que eu posso fazer é também dar-lhes nomes aqui, mas eu vou simplesmente organizá-los de uma maneira diferente. Então eu vou posicioná-los assim. Então, mais uma vez, da esquerda para a direita, talvez haja apenas fazendo coletados fazer coisas de maneira muito organizada, mas é tudo realmente até você como você quer fazer isso. Então, agora que você apresentou tudo isso, o que você também pode fazer é mudar a cor do seu guia de estilo. Nosso relatório. Então você pode clicar aqui e ir todo o caminho preto, por exemplo. E agora você pode apresentá-lo como DES. Então, em uma espécie de modo escuro, se você quiser, você pode usar uma cor neutra que você não usou. Por exemplo, este porque não aparece em nenhum lugar em nosso projeto onde poderíamos simplesmente usar branco. Tudo depende de você e como você quer estruturar as mortes. A próxima coisa que você pode fazer com suas cores é bastante simples. Você pode fazer o Controle D, posicionar distritos aqui, mais. É todo o caminho bem aqui. E basicamente certifique-se de que isso está no centro disso. E simplesmente use o código hexadecimal para isso. Então volte para as cores. Botão direito. Você pode copiar ou clicar com o botão direito do mouse. Vamos ver, mudou as cores assim. Posso clicar com o botão direito Editar. E agora você pode copiar o código hexadecimal em si, pulando aqui, controle V. E agora você pode basear esse código hexadecimal. Então você pode mais vinho que você pode para controlar o disco de posição bem aqui. Clique com o botão direito E você pode copiar o código hexadecimal deste aqui. E deixe-os pausar rapidamente o vídeo para que eu possa ir em frente e terminar tudo isso só para mostrar como isso se parece. E agora que terminei a dose, o que posso fazer a seguir é saltar bem aqui. Certifique-se, por exemplo, de que isto está no centro da minha praça assim, e chamá-lo de branco claro. Posso ter certeza de que é x 16, por exemplo. Então, muito menor para que você possa caber e eu posso usar esta cor, por exemplo. E você pode posicioná-lo aqui assim. Controle D. E para tornar as coisas mais rápidas, você pode clicar duas vezes controle CDO Club controle V, e simplesmente alterar isso para induzir colorido. Certifique-se de que eles estão em sua posição de controle D no centro. Certifique-se de que este é disco vai do centro e não está alinhado à esquerda. Então isso não nos dá essas falhas. Mude-o e devemos descolorir e morreremos. E, na verdade, você pode ir em frente e fazer essas mudanças para todas elas. Então este é o nosso verde médio porque sempre que você clicar neste texto vai aplicar a cor da dívida a ele. Controle D, tenho certeza que está aqui. Eu posso fazer é verde secundário, assim. E vamos rapidamente fazer o mesmo para todos eles. Vi que o administrador o posicionou aqui. Como esta cor principal, este cinza escuro. Eu posso fazer isso. Quase preto como você pode ver, se você é Tom falar como eu, então você vai ser capaz de fazer todas essas mudanças mais rápido e finalmente mudou de volta para aqui, alinhá-lo e gado leiteiro, nós temos completou todas as nossas cores. Agora você pode posicioná-los para ter, por exemplo, 40. Vamos ver onde estamos, 123, Dario. E você pode selecionar todas essas boas epidemias e posicionar isso para ser, por exemplo, 81 onde trabalhamos aqui, 80. Então, a mesma disciplina Witten para resolver assim. E então, quando você terminar suas cores, você pode simplesmente passar para as fontes. A posição é conhecida aqui chamada de cores. Então você pode fazer uma duplicata deste, certificar-se de que está em 80 e fontes de qualidade ou topografia. E como você pode lidar com a tipografia é realmente bastante simples. Então deixe-me mostrar-lhe isso rapidamente também. Então você pode realmente ir para a Wikipédia, por exemplo, e encontrar o alfabeto inglês. E o que você pode fazer é realmente selecionar todas essas letras, pressione Controle C, por exemplo. E então você pode duplicar este, posicioná-lo lá embaixo, e localizar o tamanho mais baixo. Então este é, vocês podem ver que temos essas falhas aqui. Certifique-se de que está alinhado à esquerda e clique duas vezes dentro do Controle V. Se aumentarmos o zoom, você pode ver que ele fez todas essas mudanças, mas às vezes você pode ver que ele as inverteu por algum motivo. Então controle x e, em seguida, você pode posicioná-los assim. Então, obviamente, um capital de dívida mais baixo vem primeiro e, em seguida, letra menor vem secundária. Então deixe-me pausar o vídeo enquanto faço isso por todos eles. E agora que eu fiz isso, você pode ver onde isso está indo, obviamente. Por isso, certifique-se de que está a anotar o Controlo D, posicione-o para baixo. Você pode clicar neste. Certifique-se de que está em 80 também. Como este disco de posição D de controle para baixo em 80. E então você pode clicar entre todos esses estados diferentes. Você criou? E se você não gosta de dívidas, isso é muito espaçado, obviamente, em miniatura 80. E vamos rapidamente ir em frente e terminar tudo isso para que possamos saltar e criar silêncio adicional por trás disso. Então, se você não gosta disso, este é um dia também, você pode, obviamente, mudá-lo para, por exemplo, 40 para que você tenha espaço suficiente para tudo isso. Então 40 em todos os lugares. Como este. Não sei por que está nos dando. Então nós mostramos que este é 40 também, porque ele vai todo o caminho até aqui. O que você pode fazer é, obviamente, cortá-lo aqui e, em seguida, aumentar o espaçamento para Arno conhecido procura, por exemplo , ou, vejamos, 60. Garoto, está tudo bem. E finalmente, faça a mesma coisa aqui. Então, 40, eu corto aqui. Vamos ver o crédito aqui também. E vamos encerrar o dia. Vamos dar esta. A, por exemplo, acho que está bem. E basicamente a dívida é sua tipografia. Você não tem que fazer isso para cada um desses, mas se você quiser, você pode, e essas não são suas soluções. Então eu vou simplesmente agrupar toda essa topografia de qualidade. E agora posso passar para a próxima coisa. E a próxima coisa pode ser ícones. Então eu posso posicionar isso em 90 ou 80. Posso chamar-lhe iconografia, por exemplo. E se pensar que estes são apenas um pouco óbvios demais, você pode mudar a cor destes. Então vamos dar a eles essa cor média, por exemplo, apenas para diferenciá-los para todos eles. Agora, para ícones, o que você pode fazer é simplesmente ir para a direita aqui, ir todo o caminho para baixo, e localizar seus ícones separados e arrastá-los e soltá-los na posição. Então, por exemplo, reabilitar essa seta, mas não vamos usá-las porque as usamos para arquitetura de sites. Na verdade, vamos começar a localização. Então arraste e solte na polícia onde está. Aqui está. Telefone. Então, mais uma vez, usamos esta estrela para o nosso wireframe, mas podemos posicioná-la aqui se você quiser. Ícone de seta, ícone de e-mail, on-line, recomendação, cronômetro. E agora temos esses ícones sólida Missy, Se eu puder selecionar C mais velho como este e tentar arrastar e soltar todos eles no lugar. Eu posso, como você pode ver. Então você pode fazer isso também. Você entendeu o ponto. Então você começa com estes e então você começa a pedir umidade esquerda e direita. Então, como posso fazer isso? Eu posso simplesmente copiar, desculpe, posição disco 80, posição e este para 80 bem, assim. Certifique-se de que este, por exemplo, está no centro porque é bem menor. Posicione-o para me ouvir, nós nos certificamos de que isso é organizado até aqui, digamos assim. E então o que posso fazer é fazer o mesmo por este. Ou posso posicionar este abaixo, por exemplo. E, em seguida, certifique-se de que todos estes estão aqui, porque estes são do mesmo tamanho que D. Posso posicioná-los aqui e posso espaçá-los ainda mais. Então, por exemplo, eu posso dar a eles, eu não sei. Vamos ver. Talvez eu possa selecioná-los. Tempo para três, por exemplo. Em seguida, selecione este 1123. O selecionado este 130. Esses mesmos quatro D são os mesmos para reduzir. O mesmo para estes dois. Finalmente visto por disciplina assim. Agora você pode colocar estes três no final aqui. Como você pode ver, às vezes pode ser um pouco complicado selecioná-los. Portanto, certifique-se de que estes são, por exemplo, 30 também, e você pode certificar-se de que eles estão alinhados corretamente. Agora você pode posicioná-los para ter certeza de que eles estão em um centro como este. E estamos, vejamos, aos 34. Posso desselecioná-lo. Posso posicioná-lo aqui. Em seguida, no geral, você começa a imagem para onde isso está indo. Agora, o que você pode fazer é, na verdade, ainda temos isso. Então eu não sei por que ele continua pulando para cima e para baixo quando eu seleciono Notícias. É muito irritante. Então eu posso posicioná-los aqui porque eles são os mesmos que estes. Então, obviamente, você pode posicionar isso aqui, o selecionar este. E vamos ver, posso posicioná-lo para 30. Posso me certificar de que são 30 também. E estes selecionam este e certifiquem-se de que este é 30 também. E vamos dar uma olhada, ver se temos mais desses ícones que parecem iguais. Temos estes dois. Então deixe-me selecionar Gastadores de disco. Posso arrastá-lo e deixá-lo cair aqui. Vamos ver se eles podem caber aqui uma tarefa assustadora bem, para que eu possa rapidamente posicionar isso muito derrotado. E então eu posso selecionar estes para ter certeza que eu estou em 40, por exemplo, do DES ou até mais, digamos 80, assim. E, em seguida, certifique-se de que este é 30 deste, assim. E você pode obviamente espaçar todos eles, mas você entende o ponto. Você começa a imaginar, você vai arrastar e soltar todos eles dentro. Em seguida, eu vou fazer o mesmo com estes três, por exemplo. E posso selecioná-los posicionados aqui. Vamos ver. A caridade vai ser 30 também. Isto também vai ser soberania. E você pode pular dentro de todos eles. Então conversão, por exemplo, eu posso excluir o texto, contas beta e transferência. Você pode até ocultar o fundo da mesa, se quiser. Então deixe apenas os ícones, mas eu vou sair com como sujeira. E agora vou posicionar o meu círculo aqui porque obviamente se encaixa nesta imagem toda em Batalden antes de ter certeza que ele se alinha ao centro com estes. E basicamente dentro de casa estão seus ícones. Talvez possamos verificar se temos outro. Temos isso foi assim, por exemplo, eu posso clicar aqui. Eu posso posicioná-lo no centro desses, assim ter certeza que eu estou em um território como este. Controle D. Estou com 30 mais uma vez e acerte isso. Para que eu possa saber que me encontrei neste estado. Finalmente, você tem meu ícone de investimentos, que é muito maior do que todos esses outros. Então, por exemplo, eu posso posicioná-lo aqui ou eu posso torná-lo o primeiro ícone ou qualquer outra coisa, mas você entende o ponto. Finalmente, o que nós também podemos fazer é bater o controle D para ter certeza de que estamos em 80 a partir deste. Então, e o que podemos fazer aqui é incluir esses componentes para que você possa simplesmente arrastar e soltar esses componentes. Então, por exemplo, assim, você pode posicioná-lo como herói. Então vamos chamá-lo de componentes, ou componentes principais ou componentes de navegação ou como você quiser. Você pode posicioná-lo aqui, mas vamos chamá-lo de navegações como esta, por exemplo. E então vá de baixo para cima. E vamos ver, onde foi a nossa primeira navegação? Então vamos ver. Podemos achar que ele significa navegação aqui é a nossa posição aqui. E 80. Podemos usar esses cartões de contato. Por exemplo. Eu não vou, eu posso incluir o rodapé, mas eu não vou para quarentena para investimentos. Barra lateral. Talvez possamos colocar a barra lateral só para mostrar isso também. Então, aos 80 e você pode, obviamente, estender seu braço para baixo ainda mais assim. Deixe-me ir até aqui. Então vamos ver onde estamos. Temos top médio agora eu posso arrastá-lo e posicioná-lo para estar em algum lugar por aqui, por exemplo. E nós temos top móvel agora, então eu posso posicioná-lo aqui também. Lá temos todas as nossas navegações. O que podemos fazer a seguir é lidar com as sombras, por exemplo, e um borrão. Podemos incluir isso. Finalmente, podemos incluir todos esses ícones coloridos. Então vamos fazer isso. Vamos realmente mover tudo isso e para baixo. Então isso é iconografia. E podemos, por exemplo, posicionar essa dose na mesma pasta para não complicarmos muito as coisas. Então o que eu posso fazer é ampliar um pouco e eu posso encontrar de onde esses ícones estão começando. Então eles estão começando a partir daqui. Para que eu possa arrastar e largar aqui. Arraste este aqui, certifique-se de que eles estão alinhados. Ou podemos simplesmente arrastá-lo e soltá-lo aqui. E vamos ver, certifique-se de que temos 30, por exemplo. Como este. Certifique-se de que seu advogado aqui também, assim. Selecione todos eles. Certifique-se de que eles estão alinhados, posicione-os na grade. Certifica-te de que estás a 80 a partir daqui. Assim, agora B são 80. E agora eu posso passar e arrastar e soltar todos esses outros ícones para que eu possa posicionar este. Você pode até mesmo criar espaços para mostrar que esses ícones pertencem juntos, enquanto estes são semelhantes, mas mais uma vez, um pouco diferente e fez em pertenciam juntos. Mas você também pode fazer para estes é mostrar estados diferentes. Então ele pode bater o controle D, posicionar isso em território como este, e então mostrar o estado diferente do ícone porque nós não criamos um estado diferente. O que posso fazer é simplesmente ir em frente e vamos ver onde está a minha cor. Se me lembro daqui. Foi este? - Não. Então vamos ver onde estava. Aqui está. Então esta é a cor. Então você pega a foto. Você pode mostrar variações desses ícones diferentes mostrando seus estilos. Ao mostrar que existem diferentes variações com cor, sem a cor e assim por diante. Este era o que ele estava posicionado como aqui. Controle D. Literalmente abra isso. Vaca leiteira. E agora você pode fazer o mesmo para o resto deles. Então vamos saltar para o lado. Vou selecionar este. Selecione este. Não sei por que continua pulando para cima e para baixo. É muito irritante. Mas vamos passar o poder. Então é que ele precisa fazer é ter certeza de que isso é 30. E certifique-se de que este é 30 também. Como assim. E, finalmente, mude isso para 30 também e você começa a imagem. Você pode fazer o mesmo que fizemos com essas paredes. Então mova este controle D mais disco para estar em 30. Salte dentro de suas camadas e veja se esta é a cor que é. Selecione o resto deles. Certifique-se de que eles são totalmente Controle D, assim. E vou esconder a cor deste também. Como assim. E eu vou duplicar este último. E eu não vou me preocupar em mostrar todos os ícones. Olha, basta fechá-lo lá e chamá-lo de concluído. Mas você pode ver o ponto e você pode entender o que eu estava tentando te mostrar de qualquer maneira. Então vamos dar isso para ser um T6, 80. Talvez possamos até mesmo a posição é estar em 100. Então, 20 para baixo para D. Posso mover este 20 para baixo. Então eu posso mover este 20 para baixo, e eu posso finalmente mover minhas cores 20 para baixo também. Então, em todos os lugares temos 100. Mas você também pode fazer aqui. Ele inclui elementos adicionais. Assim, elementos adicionais ou até mesmo estilos adicionais podem ser, por exemplo, efeitos de desfocagem podem ser sombras e variações diferentes de sombras. Então, por exemplo, aquele que tem 20% de obesidade, um tem 41%, tem 60%. Então eu sempre recomendo que você mostrar-lhes ousadia em profundidade. Agora, uma vez que o desenvolvedor pode fazer com estes é bastante simples. Você pode selecionar, por exemplo, esses ícones. Então vamos dar a volta por aqui. E digamos que eu queira selecionar e exportar todos esses ícones. Eu posso fazer isso. Basta selecionar todos eles. Controle de batida, ou seja. Talvez você tenha alguns problemas aqui porque nós já temos esses já exportados. Então talvez eu possa mudar minha pasta. Allready fez. Bem, vamos ver. Por exemplo, posso usar este só para mostrar a vocês. Assim como SVG apertar Exportar e ele vai exportar todos esses ícones, SVG. E, obviamente, isso vai ser muito mais fácil para os desenvolvedores acessarem porque eles tê-los na pasta como dívida. Todos alguns você pode saltar dentro daqui, por exemplo, e dar este pessoal como um ícone de conta de candidato, preto e branco. E você pode fazer isso por todos esses outros. Então você pode então, depois de terminar renomeado, você pode simplesmente selecioná-los. Ele controlava e na exportação, todos esses ícones para que eles pudessem acessá-los assim. Eles também podem abrir este arquivo. Clique aqui e veja, por exemplo, ok, este é Ba pins 24 irregular, é alinhado à esquerda e tem, por exemplo, obesidade ou 100 e tem esta faculdade. Então eles têm a opção aqui também. Para explorar todas essas fontes que você usou. Eles têm as opções de ver essas cores. Eles têm as opções de ver esses códigos hexadecimais e dizer r k. Então este é este código hexadecimal. Eles podem saltar para dentro daqui, bater no Controle C e aplicar diretamente a partir daqui em código como esta cor de código hexadecimal. Então é basicamente isso. É assim que você está usando este guia de estilo de projeto. Deixe-me finalmente selecionar estes. Chame-o e componentes de navegação. Mova o grupo de discos até o topo, selecione meus ícones e veja onde estão todas essas setas. Então aqui, controle g, chamou esses ícones e movê-los aqui, ou iconografia assim. E o que eu quero mostrar para o final é que você também pode exportar isso como um PDF. Assim, eles podem copiar esses valores PDF. Eles podem ver daqui. Eles podem ver todos esses ícones, componentes de navegação, como eles se parecem. Obviamente você pode exportá-lo como JPEG, como PNG, mas você também pode exportá-lo como PDF para fazer isso, controlando, escolher o PDF a partir daqui. Então, aqui está. Pressione Export e ele vai exportá-lo para esta pasta. Então deixe-me ver. Estava aqui? Sim, é. Aqui está. Então guia de estilo do projeto, clique duas vezes e deixe-me abri-lo para mostrar como este PDF vai se parecer. Então, aqui está. Se um bom controle é 0, ele vai desfazer zoom e você pode ver como ele se parece. Mas se eu ampliar um pouco, você pode ver que eles ainda podem selecionar este texto se quiserem, e eles podem acessá-lo e editá-lo à vontade, se quiserem. Eles podem rapidamente olhar para a topografia, para as cores, para todos esses ícones diferentes, componentes de navegação. E eles podem ver todos esses elementos diferentes, como eles se parecem. E você também pode incluir quaisquer outros elementos adicionais que você deseja em seu design. Então isso é basicamente para o guia de estilo, e isso é basicamente para o discurso. Vejo você no próximo vídeo onde vou falar sobre o outro, o que você pode obter fora do discurso. E eu também vou falar sobre um recurso que eu usei no discurso mais uma vez e mostrar-lhes onde você pode obtê-lo por mais uma vez. Então, vemo-nos lá. 75. Conclusão e recursos: Chegou ao fim do curso. Muito obrigado por assistir a este curso e eu realmente espero que você tenha algum valor dele e que você tenha entendido como o Adobe XD é fácil de usar e como é fácil usar este processo de design assim que você chegar ao FANBOYS. Então lembre-se, você não vai usar esse processo de design exato para cada projeto. Mas por exemplo, se você está trabalhando em um projeto um pouco maior como este é, então eu realmente recomendo que você use este processo de design, que também vai elevar seus ganhos porque você pode justificar o dinheiro que você está pedindo de seu cliente simplesmente mostrando a eles este processo de design, o que está envolvido dentro e todos os passos que você precisa tomar para finalizá-lo e para concluí-lo. Então, mais uma vez, obrigado mais uma vez por assistir. E eu realmente espero que você vai usar pelo menos algumas dessas técnicas em seu trabalho quando se trata de links e recursos já mencionados algumas vezes ao longo deste curso. Assim, você pode usar recursos gratuitos o quanto quiser, tanto quanto precisar. Afinal, eles são livres. Mas como eu expliquei em alguns dos vídeos, para alguns recursos você tem que ligar de volta para o autor original. Caso contrário, você pode ter alguns problemas mais tarde. Mas para recursos premium que estou compartilhando com vocês agora, eu só queria enfatizar mais uma vez porque é extremamente importante. Por favor, certifique-se de usar esses recursos apenas para fins de aprendizagem. Não use esses recursos para o trabalho do cliente porque isso pode acabar com você em um problema sério mais tarde, se algum desses criadores ou elementos convidados decidir processá-lo porque você está usando-os sem permissão e sem licença. Mais uma vez, se você gostaria de site, se você gosta de elementos VO2 são aliviados um link para vocês para verificar. E eu acho que o preço realmente não é tão caro considerando o que você tem que baixar naquele site e não há limites. Por exemplo, há um site chamado Branco, e eu mostrei a você que eu tenho meus ícones de escolha do site usaid e eu os comprei lá. E eles também têm esses tipos de associação para os downloads de produtos, mas você está limitado com a quantidade diária de downloads. Então, apenas certifique-se de entender que se você precisa de certos tipos de downloads Hoje, você vai usar e elementos vitais porque é apenas um investimento muito melhor, porque você não tem nenhuma dessas limitações. Você pode simplesmente baixar e usar quantos deles quiser. E a razão principal é que muitas das vezes em que você vai ver que você vai pensar que o recurso vai se encaixar bem. 76. Projeto de curso Skillshare: O que uma habilidade compartilhar Classe B sem projeto de classe de compartilhamento de habilidade. Então, para o seu projeto de classe de show de habilidades, eu realmente gostaria que você criasse o mesmo design que fizemos ao longo deste curso. E você pode postar uma imagem na habilidade, compartilhar arquivos de projetos ou criar algo seu próprio, que eu realmente encorajo você a fazer porque essa é a melhor maneira de praticar o que você aprendeu ao longo deste curso. Portanto, certifique-se de publicar uma imagem em um projeto de classe de compartilhamento de habilidades ou outros alunos podem vê-lo. Para que eu possa ver. E posso, por exemplo, dar-lhe mais alguns comentários. Como você pode melhorar esse design e seu estilo de design oral. Então eu realmente encorajo você o que quer que você faça de, de mistura de discurso para publicá-lo para o projeto de classe de compartilhamento de habilidades. Então, eu e outros alunos podemos ver isso para que possamos construir essa comunidade dessa maneira. Não te preocupes com outra pessoa a julgar o teu trabalho. Somos só amigos aqui e queremos ajudar-nos uns aos outros com este curso. Portanto, certifique-se de postar em projetos de classe de show de habilidades. Assim, eu e outras pessoas do discurso também podemos ver isso. 77. Canal do YouTube para mais conteúdo: Ei designer, Alex aqui e eu só queria dizer um rápido obrigado. Obrigado por fazer este curso e eu realmente espero que você tenha obtido o máximo de valor possível fora dele. Se você quiser conferir mais conteúdo. Recentemente lancei meu canal do youtube onde exploram alguns tópicos que podem interessar designers de freelancer a técnicas de renda passiva de web design, design de aplicativos, design de interface do usuário, design de UX. Então, se você estiver interessado em algum desses tópicos, vá ao meu canal no YouTube. Eu vou ligá-lo para baixo em PDF e você pode simplesmente clicar lá e ele vai levá-lo para o meu canal do YouTube. Se você gosta desse conteúdo, certifique-se de se inscrever e certifique-se de acompanhar, porque eu vou tentar ser realmente irregular com esse canal do YouTube e aplaudir o máximo de conteúdo possível. Então, obrigado mais uma vez por fazer o meu curso e eu realmente espero vê-lo no meu canal do YouTube, creche. 78. Junte-se ao meu grupo gratuito no Facebook: Ele é um designer. Eu realmente espero que você tenha gostado do curso e do alvo o máximo de valor possível fora dele, se você quiser receber ainda mais valor de mim e da comunidade de design, Eu comecei um grupo no Facebook onde você pode participar é apenas um grupo do Facebook para Meus alunos junto. Então você pode participar clicando no link abaixo. Ordinate, é claro que é uma conta do Facebook e é um grupo gratuito para participar. O grupo é formado para fornecer feedback adicional para que você possa anexar seus projetos seguindo este curso e usando exemplos do discurso ou qualquer outro dos meus cursos. Ou se você tem seus próprios exemplos de trabalhos de design do passado ou do presente, você pode enviar esses trabalhos para o grupo do Facebook e, em seguida, receber feedback de mim ou de outros membros do design. Eu também encorajo você se você tem um emprego, cargos disponíveis para compartilhá-los nesse grupo. Para que todos possam se beneficiar desse grupo. Mais uma vez, o grupo é gratuito, é fácil de participar. Basta clicar no link no PDF. E eu realmente espero ver o maior número possível de vocês nesse grupo apenas para compartilhar nossas experiências como designers e vou tentar postar alguns vídeos adicionais, algumas dicas e técnicas adicionais nesse grupo do Facebook. Mas, por enquanto, estamos apenas a começar. Nós só vamos formá-lo. E eu realmente encorajo você a participar e compartilhar seu melhor trabalho lá, para inspirar outros designers ou para pedir feedback adicional. Apenas certifique-se, por favor, quando você está pedindo feedback, quanto a algumas coisas específicas, não apenas como o que você acha deste design, porque ninguém vai responder a isso. Se eles fizerem suas próprias coisas, eles vão dizer para você, se parece bonito ou não parece legal. Certifique-se de pedir comentários específicos sobre seus designs. Por exemplo, como esta combinação de cores, você acha que eu deveria usar uma fonte diferente? Pense que essas imagens correspondem bem com a cor de fundo, por exemplo, coisas assim. Então, certifique-se de pedir feedback específico sobre seus projetos, porque vai ser muito mais fácil para mim e para outros designers desse grupo para lhe dar feedback específico que você pode melhorar muito mais rápido do que apenas perguntando O que você acha deste projeto? Então, obrigado mais uma vez por fazer o meu curso e eu realmente espero vê-lo dentro do meu grupo no Facebook. Daguerre.