Mockplus RP - UX - Design de IU do zero ao herói

1. Introdução ao curso: O Mock plus rp é uma ferramenta online de design e colaboração de UI UX. E o melhor de tudo é que você não precisa baixá-lo para sua máquina. Você não precisa incomodar muito sua máquina. Qualquer máquina que você tenha funcionará muito bem porque tudo funciona dentro de um navegador. Você pode criar designs e protótipos ricos em interação compartilhá-los com seus clientes e desenvolvedores para entrega. E sempre incluirá o código em segundo plano, o que é sempre útil para seus desenvolvedores usarem quando você realmente iniciar esse processo de transferência. Olá designer, Alex está aqui e bem-vindo a esta aula da Skillshare sobre Mach plus rP from zero to hero, um criador de produtos digitais. E até agora eu criei mais de 500 produtos de design digital. Também sou criador de cursos e até agora gravei mais de 40 cursos diferentes de design de UI UX. E eu tenho mais de 60.000 estudantes matriculados nesses cursos. Neste curso simulado e rP, abordaremos o que é a tela de boas-vindas e como navegar na interface, como trabalhar com páginas diferentes e navegar entre elas. O que são componentes e componentes integrados no ma plus rP e como criar os seus próprios. Como trabalhar com ícones no mock plus rP, como criar diferentes ativos e conjuntos de ativos. Como trabalhar com o painel Propriedades e o que é e como ele muda. Diferentes interações que você pode obter no mod plus rP. Como trabalhar com nós são portos e aeroportos. E qual é a diferença? Quais são nossos modelos, por que usá-los e economizar tempo e como ser mais produtivo. Como escolher um modelo entre uma grande variedade deles no meu site. Como personalizar o modelo, como editá-lo, alterar a cor da cópia, o layout e as imagens. Vamos começar a trabalhar com alguns fluxogramas, depois passar para wireframes e usar componentes para criar wireframes muito rapidamente. Em seguida, transforme esses wireframes em um design adicionando cores, imagens e textos diferentes para criar nosso design final. No final, vamos adicionar as diferentes interações e dar vida ao nosso design. Por fim, vamos pré-visualizar, compartilhar e usar o MC plus Cloud para trabalhar com outros membros de nossa equipe, nossos clientes e nossos desenvolvedores. E vou explicar alguns recursos de colaboração que o mock plus rP tem. Seu projeto de aula para esta aula é acompanhar e criar um design usando as dicas e técnicas que você aprenderá nesta aula. Há um vídeo de aula dedicado ao Skillshare. Não deixe de conferir para saber mais informações sobre ele. Além disso, o rp é ótimo porque é muito fácil começar e é gratuito para que todos possam se juntar à comunidade de design de UI UX. Então, estou ansioso para ver você na aula e vamos criar um design de site incrível. 2. Projeto do curso: Seu projeto de aula para esta aula é criar um site usando algumas dessas dicas e técnicas de simulação rP que você aprenderá ao longo desta aula. Você pode usar modelos ou criar seu próprio design do zero, seguindo algumas dicas e técnicas aprendidas nesta aula, seguir minha estrutura ou criar sua própria estrutura. Realmente não importa. Tudo depende de você. E qual é a largura de design mais confortável para você e quais são algumas abordagens que funcionam para seu estilo de design? Não deixe de se divertir e, quando terminar, certifique-se de exportar como imagens JPEG ou fazer qualquer tipo de captura de tela e enviá-las para seus projetos de classe. Eu adoraria ver o que vocês podem fazer e adoraria ver seus resultados no final desta aula. 3. O que é o Mockplus RP: Mock plus rp é uma ferramenta de design de UI UX online criada para designers como você, porque você pode trabalhar quando, onde quer que esteja no mundo, tudo o que você precisa fazer é usar navegador que você já tem no seu computador. Ao contrário de algumas outras ferramentas, não exige que você tenha máquina de design definitivo, mas você pode usar qualquer computador que já tenha porque, como mencionei, ele funciona dentro do navegador e não consome memória RAM e memória cache da máquina. Você pode colaborar com outras pessoas usando mais Rp usando a função de compartilhamento de desafios e sua função de equipe. Assim, você pode criar sua própria equipe quando estiver trabalhando internamente com o projeto. Ou você pode ser convidado para fazer parte da equipe de outra pessoa. E você pode trabalhar em tempo real e colaborar em tempo real com outras pessoas da equipe. Ou se você é apenas um freelancer , pode trabalhar sozinho. Você pode criar interações e animações complexas dentro do mom plus rP. E então você pode compartilhá-los com seus clientes ou partes interessadas para obter feedback e melhorar ainda mais. E o melhor de tudo é que você pode exportar isso e compartilhá-lo para que os desenvolvedores usem mais, além da nuvem e sua integração perfeita. Começar é totalmente gratuito . E dentro do seu pré-plano, existem centenas de componentes diferentes, componentes pré-fabricados que já estão incluídos em centenas de modelos diferentes que você pode utilizar em seu fluxo de trabalho simplesmente editando-os e abrindo-os dentro do More plus rP. 4. Tela de boas-vindas: Como qualquer outro software disponível, o mock plus rP tem uma tela de boas-vindas e é usada para ajudá-lo a navegar pelo início do seu projeto. Então, deixe-me mostrar como isso funciona. Então, aqui estamos na tela de boas-vindas do mod plus rP. E o que você pode ver aqui no seu lado esquerdo é tudo o que mastigamos, que é o que você vê na tela agora, que são todas as opções possíveis ao mesmo tempo. Então, abaixo disso, editamos recentemente. Então, esses são os projetos que você editou recentemente. Obviamente, meus favoritos, porque você pode adicionar qualquer projeto a um furão. É muito simples clicar nesta estrela aqui. E você pode trabalhar em vários projetos diferentes ao mesmo tempo, mas talvez apenas alguns deles sejam seus favoritos. Então nós criamos por mim. E esses são projetos criados especificamente por você. Porque quando você cria um projeto e cria uma conta para Mach plus rP, você pode ver que ele exibirá seu identificador. Então, independentemente de como você criou sua conta, no meu caso, eu uso meu nome e ele vai dizer equipe do que você. No entanto, você criou sua conta. O que isso significa é que você pode adicionar diferentes membros da equipe clicando neste botão aqui à sua equipe específica. Aqui, o que você pode ver é o plano em que está. Você pode ser gratuito ou ter um plano definitivo, eu acredito. Então. É aqui que ele vai mostrar isso. Então, se você faz parte da equipe, é aquela criada por você ou outra pessoa o convidou para a equipe, por exemplo você está trabalhando como freelancer para uma agência ou como freelancer para um cliente, ou se você está trabalhando em tempo integral para uma agência, então você verá todos os projetos criados por você mesmo. Comecei sozinho, mas você sempre pode convidar outras pessoas para isso. Então, reciclamos, participamos todos os projetos que você excluiu. Finalmente, temos modelos aqui. Vamos abordar os modelos um pouco mais tarde. Mas, basicamente, se você precisar usar um modelo rápido, basta clicar aqui. E você será direcionado para a página de modelos abaixo, onde temos o mock plus Cloud. Quando vemos que diz Compartilhe projetos, colete feedback e gerencie especificações e ácidos, o que é muito importante se você quiser sair do mock plus rP e quiser ir ao marketplace Cloud para fazer as coisas que acabamos de mencionar. Você pode fazer isso clicando aqui. E então temos plus d t, que é a melhor ferramenta de design de interface de usuário colaborativa online. Como nenhum outro, você pode usar o MC plus d t para abrir arquivos de diferentes ferramentas, como Sketch, Figma. E você pode criar seus arquivos completamente do zero lá. Ou você também pode usar mais RB, o que estamos fazendo neste curso. Então, se eu voltar a tudo o que podemos ver aqui é o novo projeto, então temos uma nova pasta de projeto, o que é ótimo se você quiser adicionar arquivos diferentes à mesma pasta do projeto ou diferentes inícios do projeto à pasta do projeto. Por exemplo, talvez você queira criar um aplicativo móvel ou site, criar uma tela de painel dentro de um projeto. Em seguida, você pode criar uma pasta de projeto e colocar todos os projetos criados nessa pasta específica do projeto. Mais uma vez, eu já mencionei convidar membros, a opção e o que ela faz. E agora, como eu disse, a planta está localizada aqui. Você pode ver seu espaço pessoal e ver a equipe. Assim, você pode alternar entre os dois se optar por trabalhar nos projetos sozinho e ninguém da sua equipe poderá vê-los ou como parte da equipe, como já mencionei, se você clicar na foto do seu perfil, poderá editar seu perfil. Você pode verificar suas equipes porque pode fazer parte de várias equipes. Notificações e solicitações. Você pode ver a ajuda aqui e como obter ajuda sobre RP. E, finalmente, você pode sair. Se você tiver vários produtos, poderá pesquisá-los aqui. E você pode organizar seus projetos clicando aqui. Se você quiser obter mais detalhes para ver como era o tipo do projeto quando ele foi criado e atualizado. E, claro, você pode excluí-lo se quiser, como eu disse, você pode adicioná-lo aos favoritos aqui. Você pode clicar aqui para visualizar, clonar, duplicar rapidamente, renomear, mover para outra pasta do projeto, por exemplo, compartilhá-la com outros membros da equipe. Adicione ou remova membros da equipe desse projeto específico ou exclua completamente o projeto em geral. O que vou fazer agora é clicar em Novo. E eu vou ver você no próximo vídeo, onde vamos explicar o que é isso e vamos abordar a interface. Então eu vou te ver lá. 5. Interface: interface de um pedágio é onde você passará a maior parte do tempo trabalhando nessa ferramenta. E o mesmo vale para Ma mais rP. Então, vamos continuar de onde paramos no vídeo anterior. Deixe-me dar uma visão geral de uma interface, o que ela pode fazer e onde todas as opções estão localizadas. Então, aqui estamos de volta de onde paramos na vez anterior. Abrimos essa janela. E o que vamos fazer é dar um nome a ele. Então, vamos dar um nome ao nosso projeto . E vamos chamá-lo, por exemplo, nosso primeiro projeto. E aqui o que você pode ver são todas as predefinições. Portanto, essas diferentes predefinições podem oferecer opções diferentes, por exemplo, iPhone. O que você pode ver aqui é para dispositivos móveis e, se você clicar nessa pequena seta, ela abrirá todas as predefinições que a equipe mock plus rP forneceu a você. Mas se você não vê sua predefinição, pode escrever para eles Se o dispositivo for popular, eles o apresentarão. Ou você sempre pode escolher um tamanho personalizado aqui para saber mais sobre o tamanho personalizado que deseja usar Você pode visitar o site do fabricante e ver a seção de design. Ou se você tiver um sistema de design próprio, poderá encontrá-lo dentro dele. Que tipo de densidade de pixels usar e que tipo de dimensões eles usaram. Além disso, temos o iPad, que obviamente é um tablet. E aqui você pode ver todos os tablets populares aqui. Mais uma vez, se você não vê sua dimensão, você sempre pode escrever para a equipe, eles vão adicioná-la. Então temos a web. E você pode ver alguns tamanhos mais usados. Claro que existem outros por aí, mas se você quiser, como eu disse, você pode criar um tamanho personalizado. Todos esses tamanhos estão em pixels. Então, para começar, vou simplesmente selecionar 1920 por 1080. E, mais uma vez, você pode acessar modelos gratuitos aqui. Você pode fazer isso daqui ou daqui ou dentro da própria interface. Então, vamos clicar em OK, e deixe-me mostrar a interface. Então, enquanto isso carrega, eu posso voltar aqui e você pode ver agora que criamos este, meu primeiro projeto, nosso primeiro projeto, desculpe, alguns segundos atrás, eu vou me livrar desse, excluí-lo, ok? E agora eu tenho apenas esse projeto porque não quero confundir você ao longo deste curso. Então, nosso primeiro projeto é o que acabamos de criar. Aqui está a aparência. E se eu segurar o controle e roda de rolagem do mouse ou pressionar Control e um no meu teclado, ele voltará a se posicionar. Deixe-me me esconder para que você possa ver um pouco melhor. E é assim que a interface se parece. Então, no lado esquerdo, você pode ver todos os tipos de opções diferentes. Aqui temos componentes, ícones, ativos, páginas e camadas. E vou explicar todos eles nos próximos vídeos. Além disso, temos algumas opções mais usadas e temos opções de compartilhamento e colaboração aqui. E então temos o painel à direita, que pode ser qualquer propriedade, que será diferente para qualquer coisa que você selecionar no interior da sua prancheta, interações, que são usadas quando você deseja adicionar animações e interações entre diferentes pranchetas. E então temos notas, se você quiser adicionar outros nós, o que é muito útil para seus clientes, por exemplo, ou seus colegas de equipe explorarem. Vamos começar do início. Se você clicar de volta, a seta o levará volta para aqui, que é a página inicial. E você pode ver o projeto editado recentemente e nenhum projeto desse tipo foi encontrado porque este é nosso primeiro projeto, obviamente. Então, se clicarmos aqui, você poderá ver o projeto. Eu posso criar novos. Eu posso importar o arquivo RPI. Posso salvá-lo para controlar S ou o comando S nas preferências de um Mac. Então, quando clico com o botão direito, posso alterar as opções gerais. Portanto, posso alterar esses atalhos, compensar as cores coladas do Canvas para que você possa escolher o plano de fundo da sua tela. Então, neste caso, é esse tipo de cinza médio a escuro, mas você também pode alterá-lo e adicionar sua cor personalizada a esse plano de fundo. Pode ser totalmente preto, cinza claro, branco, vermelho, qualquer cor que você quiser. Você pode marcar e desmarcar algumas dessas opções gerais. Depois, temos as configurações de layout, que são o layout em segundo plano, e você pode ver como isso funciona. Portanto, temos duas outras colunas, largura da coluna e largura da calha. Então, vamos ver. calha do lado de fora temos as fileiras, temos o visual. Então, digamos algo como, sei lá, Largura da coluna. Vamos dar algo como 86. Então, obtemos colunas um pouco mais estreitas, largura da calha. Podemos aumentar a largura da calha para 100 apenas para que você possa ver o que ela faz. Então é essa opção aqui, mas vamos voltar para 74, por exemplo, então temos 12 colunas. Mas se voltarmos para oito, você não viu como isso parece, mas vamos voltar para 12. E, claro, a largura total, você pode reduzi-la. Então, em vez da década de 1920, vamos passar para 18, 20, por exemplo e você pode ver que agora temos esse espaço desse lado, mas vamos voltar para 1920 porque é assim que o configuramos. Lá vamos nós. E então você tem a compensação. Então, o que você pode fazer com esse deslocamento é transformá-lo em um centro ou colocar o valor do pixel e ele o empurrará para esse lado específico. Então temos as linhas. Se trocarmos as linhas, você pode ver que as linhas são aquelas colunas horizontais que acabaram de aparecer. largura da calha é a largura entre as linhas. Obviamente, parece que está entre as colunas e a altura. Então, vamos chamar de dez, por exemplo, e você pode ver o que isso faz. Mas deixe-me me livrar dessas flechas. Finalmente, temos o visual. Então, grade completa ou contorno do traçado. Você pode ver essa aparência e o que ela faz. E você pode mudar as cores aqui mesmo. Por fim, quando estiver satisfeito com suas configurações, se estiver usando esses valores o tempo todo, poderá ativá-los para fazer as configurações padrão. Por que isso é importante é especialmente quando você está trabalhando como parte de uma equipe ou como freelancer em monossomia para os mesmos projetos ao mesmo tempo. Isso economizará muito tempo, porque você pode simplesmente clicar nas configurações padrão e, da próxima vez, abrir mais, as configurações de rP D esperarão por você, certo, de onde você as parou. Em seguida, vamos passar para as configurações da grade. A grade é basicamente esses blocos de pixels ao redor de seus quadros de arte. E você pode configurá-los como quiser. Então, se eu o defini para 40, você pode ver que aumentou o tamanho desses blocos porque antes eram 20, parecia o que fizemos anteriormente. Você pode alterar a cor aqui para poder mudar a direção e o local. E, mais uma vez, você pode fazer as configurações padrão. Então temos uma medida. Você pode ter um alinhamento básico. Então, quando você move seus objetos pelo quadro de arte, eles se alinham na parte superior, inferior , esquerda, direita e central em cada lado. Especificações uniformes de distribuição e espaçamento. É basicamente isso. Então, quando eu clicar em OK, vamos voltar para o aeroporto em si. Deixe-me me esconder para que você possa ver um pouco melhor. Nosso quadro é basicamente o lugar onde você coloca todos os seus elementos dentro. Aqui eu tenho todos os meus componentes básicos. Vamos abordá-los um pouco mais tarde. Mas se eu arrastar e soltar um elemento dentro, posso reposicioná-lo e reorganizá-lo da maneira que eu quiser. E está localizado dentro da própria placa de arte. Você pode arrastá-lo para fora da prancheta e ver que agora está localizado do lado de fora. Mas se você quiser criar designs dentro do seu quadro de arte, basta arrastá-lo e colocá-lo dentro. Como mencionei anteriormente, esse painel de propriedades mudará para qualquer coisa que você selecionar para colocar na sua prancheta. Mas vamos lidar com isso um pouco mais tarde. E o que você também pode fazer é criar alguns quadros de arte, que abordaremos um pouco mais tarde. Mas basicamente essas portas são usadas, por exemplo, quando você cria um efeito ou efeito de rolagem para a esquerda e para a direita, digamos que você coloque essas diferentes páginas ou seções diferentes de sua página ou aplicativo móvel ou o que você escolher. Pode ser, por exemplo, um pop-up, adicionar um banner ou algo parecido. Talvez uma forma voadora ou algo diferente de você possa usar esses subaeroportos e conectá-los à placa de arte principal usando o painel de interações aqui. Portanto, tudo o que o usuário fizer dentro do porto principal abaixo da média do aeroporto seguirá n e será implementado. Então, se voltarmos aqui para renomear sua prancheta, você pode simplesmente clicar duas vezes aqui e chamá-la, por exemplo página inicial, digamos. E para isso, vamos apenas duplicá-lo. Por exemplo, eu quero ter dois deles. Você pode pressionar Control ou Command D. Para duplicar sua prancheta, você pode clicar duas vezes aqui e dizer, por exemplo , a página Shoppe. Se estivermos criando este site e todos os elementos que estavam na página inicial forem traduzidos para a página da loja, que você também pode fazer é movê-lo se achar isso irritante, por exemplo, e você pode ver as distâncias entre suas pranchetas. Portanto, se você quiser ser gentil e arrumado com eles, basta posicioná-los como quiser. Então, isso é suficiente para nossas portas agora porque vamos lidar com elas um pouco mais tarde O que eu quero fazer é explicar rapidamente todos esses elementos na parte superior. Então, abordamos esse painel no lado esquerdo. Então aqui você tem suas páginas, aqui você tem suas camadas, obviamente. Então, quanto mais camadas você adicionar, mais delas aparecerão. Então, se duplicarmos isso, você pode ver como fica. E se eu clicar duas vezes e chamá-lo, por exemplo , de retângulo, aí está. Retângulo, lá vamos nós. E agora eu tenho três camadas diferentes. Essa primeira opção aqui é o modo Conectar. Mas isso permitirá que você conecte essas interações entre seu aeroporto e uma porta abaixo da média ou entre diferentes elementos dentro de sua RPA, por exemplo, você tem o botão e deseja criar um estado de flutuação para diferentes componentes que estão localizados dentro da prancheta. Você vai fazer isso com o padrão de interação. Portanto, ele pode ser usado nos dois sentidos. Além disso, criamos uma placa de arte secundária. Então, se eu clicar na minha placa de subarte e arrastar e desenhar a opção aqui, você pode ver que agora eu tenho minha porta sub R, que é exatamente o que mencionei. Então, digamos que essa seja nossa janela pop-up. E ele será acionado quando eu clicar aqui. Então, temos essa opção para o modo Connect. Então, quando meus usuários clicarem ali mesmo, ele será vinculado. Então, quando clicarem, ele comandará e mostrará a prancheta, que é esta, posicionando o centro. E vamos resolver isso um pouco mais tarde. Apenas processado, não confuso, mas basicamente, é assim que essas coisas funcionam. Além disso, temos a ferramenta Caneta, obviamente, que é usada se você quiser criar todos os tipos de objetos diferentes que não estão localizados aqui, e você pode simplesmente clicar fora dela para desmarcá-la e movê-la. E mudamos para Propriedades. Você pode ver que tem algumas propriedades diferentes que não tinha antes. Ao lado disso, há um ícone de lápis n para a ferramenta de lápis. Além disso, está desfazer e refazer. Mas você pode ver os atalhos aqui. Então, Control Command Z ou Control Shift, conjunto Command Shift. Então temos a opção de grupo. Então, se eu selecionar todos os meus elementos aqui, posso pressionar isso ou pressionar Control G para agrupá-los. Ou eu posso pressionar Control G mais uma vez para desagrupá-los, se eu quiser. Então você pode fazer isso aqui. Então, posso selecioná-los aqui, pressionar Control G para agrupá-los, clicar duas vezes e chamá-los, por exemplo retângulos, porque é isso que eles são. Ou se eu não os quiser dentro de um grupo, posso desagrupá-los. Mas você também pode mover isso para cima, mover para baixo, fazer com ele o que quiser, e depois trazer para a frente e trazê-lo para trás. Então, para demonstrar a dívida, vou preencher esse objeto com a cor vermelha só para que você possa vê-lo. Então, agora está na frente desses retângulos. Se eu escalar pressionando a tecla Shift, você pode ver como fica. Então, quando eu clicar aqui, enviar para trás, ele vai enviá-lo para trás desses retângulos. E agora, se quisermos trazê-lo para a frente, se eu puder selecioná-lo, posso simplesmente clicar aqui. Mas se eu não conseguir selecioná-lo, posso clicar no item que está na frente desse item e enviá-lo para trás. Então é assim que isso funciona. E então o que temos aqui é nossa lista de portos. Atualmente, temos apenas uma prancheta, mas, por exemplo se eu voltar e controlar D para duplicá-la. E agora, quando clico nessa opção aqui, temos duas pranchetas. Agora, pode parecer um pouco tolo quando você tem apenas duas pranchetas. Mas esses projetos de interface às vezes podem ter 200 palavras, 300 aeroportos. Ter uma opção como essa é muito importante porque você pode simplesmente pular para aquela prancheta específica clicando nela e ver o que ela faz. Então você pode imaginar que você está em algum lugar por aqui e eu quero clicar na página inicial para me levar direto para ela. Controle o comando um para voltar à posição, livre-se deste. E é por isso que nossa lista de portos é tão valiosa e tão importante ao lado dela, o que temos. Se eu passar o mouse, você pode ver todos os tipos de opções diferentes, mas esta é um painel de propriedades, agora States é a aparência do elemento quando o usuário interage com esse elemento. Então, por exemplo, a dívida pode ser um estado padrão, um estado flutuante, estado clicado, um estado de imprensa , um estado com deficiência e muito mais. Portanto, dependendo do seu projeto, você terá mais ou menos desses estados. Então, para demonstrar isso rapidamente, vamos selecionar um botão rápido e digitar algo como Leia mais aqui. Clique em algum lugar externo. E vamos ampliar esse botão para que você possa vê-lo um pouco melhor. Vamos mudar a cor de preenchimento para esse azul. Vamos mudar a cor do texto para branco. Vamos mudar isso para, digamos, Roboto e algo grande como chorão para talvez algo parecido. Então agora temos nosso botão. Vamos nos livrar dessa borda e desse botão porque a arrastamos do painel de componentes aqui, onde diz que o composto é o componente padrão. Obviamente, você pode criar seu próprio componente e adicioná-lo aos ativos aqui mesmo. Vamos falar sobre isso um pouco mais tarde. Então, quando você clica aqui, você tem todos esses estados que desativaram foco pressionado, o mouse , o mouse e muito mais. Então, neste momento, estamos no estado normal. Então, quando eu mudo para o mouse, passe o mouse, e quando eu vou e faço algo com a cor de preenchimento, por exemplo, algo assim. E eu volto ao estado normal e alterno entre o normal e o mouse. Você pode ver a aparência, mas como você pode visualizá-la? Você pode fazer uma prévia rápida aqui. Assim que isso acontecer, você pode simplesmente passar o mouse e ver o que isso faz com o botão. Você pode alterar o conteúdo dentro de seus componentes, neste caso, o botão em qualquer um desses estados. Então, por exemplo, ao passar o mouse , não deve dizer o botão Leia mais, clique agora ou qualquer outra coisa. Você pode alterar o tamanho do botão. Você pode mudar a cor. Você pode incluir o gradiente para que ele possa ser realmente criativo com essas datas. E você pode ver que tem vários desses diferentes estados pré-fabricados para todos esses componentes pré-fabricados. E é claro que você pode criar o seu próprio. Você pode clicar em Adicionar, indicar, nomear como quiser. Então, por exemplo, digamos que está desativado também porque já estamos desativados. E agora, com isso desativado, você pode prosseguir com as edições e adicionar novas alterações. Você pode renomeá-lo e fazer o que quiser com ele. Então, basicamente, esses são os estados em poucas palavras. Depois, temos a opção Zoom e Zoom. Você pode simplesmente clicar neles. Ou se você tiver a roda de rolagem no mouse, você pode usar Controle ou Comando e apenas usar a roda de rolagem do mouse. E como eu disse, Controle Zero, controle um controle para, você pode simplesmente brincar com essas configurações. Então você tem a opção de publicação, o que é ótimo se você quiser publicar isso como um protótipo para outras pessoas verifiquem, seja da sua equipe ou de alguma outra equipe. Então, mais uma vez, temos membros e você pode clicar e convidar membros diferentes. Você pode alterar o tipo de projeto de privado para equipe. E estará acessível a todos os membros da equipe atual ou a todos os membros deste projeto, o que é muito importante porque talvez você queira convidar apenas alguns designers, poucos colegas de equipe para esse projeto em particular antes de torná-lo público e disponibilizá-lo para a equipe mais ampla, como marketing, como, sei lá equipe atual ou a todos os membros deste projeto, que é muito importante porque talvez você queira convidar apenas alguns designers, poucos colegas de equipe para esse projeto em particular antes de torná-lo público e disponibilizá-lo para a equipe mais ampla, como marketing , finanças e coisas como isso. Você pode convidar membros. Função, você pode simplesmente adicionar essas funções, algum membro, colaborador, convidado. Você pode ver o que cada um deles pode fazer quando o link expirar e convidar o link para que você possa copiar e enviar esse link e eles poderão participar. E quando o fizerem, você os verá aqui. Além disso, o que precisamos é baixar pacote de apresentação de protótipos on-line, que é muito útil quando você está tentando vender o NVP para investidores ou para membros superiores de sua equipe, como diretores de diretores, coisas assim. Assim, você pode baixar esse protótipo e compartilhá-lo com eles pessoalmente para explicar melhor o que você está tentando fazer aqui, ou se você não quiser publicar seu projeto e não quiser convidar a diretoria, por exemplo, para ver este projeto, então você pode simplesmente compartilhar esse projeto com eles. Eles podem abri-lo em sua própria máquina e poderão ver tudo o que você fez. E eu vou mostrar como isso parecer um pouco mais tarde. Além disso, tivemos a opção de pré-visualização. Então, eu vou clicar ali mesmo. Isso abrirá uma nova janela. Depois de carregar, você pode ver todas essas opções que vimos. E é isso que sua diretoria, por exemplo a. poderá ver se baixarem o protótipo. Portanto, a lista de páginas estará aqui e elas ainda terão a opção de pesquisa. Eles podem navegar por essas páginas, eles podem ir para a tela cheia. Eles podem esconder esses painéis aqui. Portanto, oculte o painel de hidreto esquerdo se eles escolherem tela cheia e pressione Escape para sair da tela cheia. E, claro, eles podem ampliar para caber na tela, por exemplo, voltar para a tela cheia e agora você tem seus sites completos, por exemplo, pacote de apresentação. E é ótimo porque tudo é explicado ali mesmo. Eles ainda podem compartilhar esse link de pré-visualização. Ou você pode definir no que eles podem clicar e no que não podem clicar, sempre mostrar a área do link. Então, isso vai mostrar o que, o que está vinculado a esta página em particular, Charlene carrega o mouse. Então, quando eles passarem o mouse sobre seu link e o que você realmente tornou clicável nesta página, ele mostrará que o conteúdo externo nasceu, não os marcadores e ocultará a barra de ferramentas. É aqui que as notas vão ficar. Então, por exemplo, se você quiser que eles saibam o que será incluído na próxima versão, o que será incluído posteriormente? O que está aqui agora? O que eles precisam fazer se você quiser ajudá-los com alguns aspectos desse design, você pode colocar isso nas notas aqui. Então, essa é a aparência da prévia. E na quarta-feira, depois de baixá-lo e compartilhá-los, é isso que eles poderão ver. Se você clicar aqui, poderá começar página inicial ou pela página atual, que obviamente é ótimo se você tiver várias pranchetas e quiser mudar a página inicial do What's para esse projeto específico. E aqui entramos em tela cheia ocultar painel esquerdo, painel de hidreto. E agora você pode simplesmente concentrar seus esforços no design completo, se quiser. Agora, você não pode mostrá-los ao passar o mouse, você precisa clicar aqui para mostrar o painel esquerdo e mostrar o painel direito, por exemplo, talvez você esteja usando apenas os atalhos para pesquisar o que quiser e incluir dentro do seu projeto, então você poderá simplesmente ocultar isso ou você não precisa de camadas, você só precisa criar algo realmente usando rapidamente esses retângulos. Então, por exemplo, se eu digitar R, ele vai me mostrar o retângulo. Se eu digitar tudo, por exemplo vai me mostrar o círculo. Se eu pegar t, vou me levar para a ferramenta Type. Então, às vezes você realmente não precisa dessas camadas para distraí-lo. E é aí que essa opção é útil. Você pode simplesmente esconder esses dois painéis. E, finalmente, como mencionado, mas quero mencionar mais uma vez muito rapidamente, este painel no lado direito mudará tudo o que você selecionar. Então, deixe-me te mostrar. Se eu voltar e selecionar, digamos, a ferramenta de texto, temos as opções de tipo e temos opções limitadas aqui porque essas são as opções para o tipo em si. Então temos o círculo. Você pode ver que isso vai mudar um pouco. Então temos o retângulo. Isso vai mudar. Mais uma vez, isso vai me dar algumas opções adicionais. E se escolhermos minha forma personalizada que eu criei anteriormente , ela também me dará todas essas outras opções. Mas há uma opção que é muito importante e se chama páginas. Está localizado aqui. E eu vou te dizer o que ele faz e como você pode usá-lo no próximo vídeo. Então eu vou te ver lá. 6. Páginas: Quando você está trabalhando em um projeto, você quer dividi-lo. Portanto, é fácil para você navegar e para seus colegas de equipe. É aí que a opção de páginas é útil. Porque dentro da opção de páginas você pode fazer exatamente isso. Então, vamos voltar ao modo mais rP, eu mostro como funciona. Então, aqui estamos de onde paramos na vez anterior, e aqui estão as páginas do lado esquerdo. Agora, atualmente, temos apenas a página inicial e é isso que você vê aqui. Se eu clicar duas vezes aqui e mudar para a página da loja, por exemplo e quando eu clicar na página inicial, essa é a página inicial real. Mas se quisermos criar outra página, clique ali mesmo, ela vai me mostrar a primeira página. Então, para a primeira página, ele ainda criará esse nosso quadro, porque nós o configuramos como nosso quadro padrão. Criamos aquele para a própria página inicial. Mas aqui o que podemos fazer é, vamos ver, vamos ver o que fizemos aqui. Então, ela chamará aqui. Podemos fazer algo como um blog, por exemplo, para que você possa fazer isso. Então, quando você alterna entre a página inicial, que será a página da sua loja, você pode clicar duas vezes com o botão direito do mouse para renomeá-la. Portanto, compre, por exemplo isso pode ser blogado , por exemplo , para que você possa alternar facilmente entre essas páginas, se quiser. Mas isso não é realmente o que eu usaria nessas páginas sem usá-las algo como fluxogramas. E esses serão nossos fluxogramas, por exemplo, então esse será nosso wireframe. E vamos dar a ele o nome de wireframe. Então, quando eu clicar em Novo, vou usar este para design. E se eu ampliar e colar isso, vamos usar este para design. E, finalmente, para criar um novo, vamos dar algo como projeto ou resumo do design. Assim, posso alternar facilmente entre eles. Deixe-me renomear isso também, meu Excel. Então, como eu disse, eles podem alternar facilmente entre eles e eu posso movê-los. Portanto, dentro dos fluxogramas, posso incluir o resumo do design, se eu quiser, ou posso movê-lo um pouco para fora. Basta colocá-lo do lado de fora. Clique com o botão direito e você verá que pode copiá-lo. Você pode inserir uma página ou um grupo. Você pode clonar uma renomeação ou excluir se quiser. Mas o que eu quero fazer , na verdade, é voltar para ele e simplesmente movê-lo para fora, assim. Se quiser, você pode selecionar vários e simplesmente adicionar uma página ou adicioná-los a um grupo. E você pode ver que ele adicionou esse grupo. Mas o que você também pode fazer é selecioná-los e criar um novo grupo aqui. E você pode colocar o que quiser nesse grupo. Por exemplo , arquivos de design, porque você pode ter várias páginas em seu projeto. E, digamos, um resumo de design, eu quero incluir nesse grupo. E você pode ver que está incluído aqui, digamos, design. E vai mostrar o número dois porque tem dois arquivos dentro. Obviamente, se você tiver vários arquivos incluirá vários arquivos internos. Vamos voltar algumas etapas e eu vou selecionar minha pasta, clicar em excluir e vai dizer que vou excluir esse grupo. Então, basicamente, é para isso que eu usaria essas páginas. Quando você recebe o resumo de design de seu cliente, por exemplo, se quiser lê-lo e navegar com muita facilidade aqui , você passará para os fluxogramas. Crie alguns fluxogramas rápidos são gráficos página ou fluxos de usuário incríveis ou o que você quiser. E então, quando você terminar com eles e tiver sua estrutura pronta, passaremos para os wireframes projetamos rapidamente alguns wireframes básicos. Desenhe alguns retângulos em uma página, por exemplo, ou vamos ver alguns círculos e colocá-los onde quiser na página. Então, digamos algo assim para obter alguns layouts rápidos sem cores, talvez você possa usar bela cor cinza fácil apenas para diferenciar seus elementos. E então você pode passar desses elementos para o design, onde você adicionará algumas cores. Você adicionará uma cópia clara do projeto, uma topografia clara. Há divisões claras com ícones, imagens, animações e interações. E então esse design é o que você realmente publicará ou baixará como um protótipo para compartilhar com seus clientes. No próximo vídeo, falaremos sobre componentes porque eles são uma parte muito importante do mock plus rP. Existem centenas deles e eu vou mostrar o que eles realmente fazem e como você pode utilizá-los em seu trabalho usando mais Rp. Então, nos vemos lá. 7. Componentes: O trabalho de design de interface de usuário geralmente é bastante repetitivo. O que isso significa é que muitos dos elementos estão se repetindo o tempo todo. Então, se você puder economizar um pouco de tempo sem criar esses elementos, toda vez que começar um novo projeto, você será bom porque economizará muito tempo em seu projeto todas as vezes. É aí que os componentes são úteis. E os componentes podem ser super simples, como um retângulo, por exemplo, ou podem ser componentes realmente complexos feitos de vários elementos diferentes como barra de navegação, por exemplo , um controle deslizante, uma página de loja concluída, um carrinho de compras ou algo parecido. De qualquer forma, os componentes são muito úteis e eu realmente encorajo você a começar a explorar os componentes e começar a usá-los. Porque, especialmente com botões, digamos que eles se repitam o tempo todo. E você não quer perder seu tempo criando-os todas as vezes. Então, vamos pular para mais Rp. Eu mostro alguns componentes padrão que estão incluídos desde o início, quando você começa a usar o block plus rP. Então, aqui estamos dentro da interface de onde paramos na vez anterior. E aqui temos a página de design selecionada. E abaixo disso temos esse composto, que é a abreviação de componentes. Abaixo disso, temos a opção de pesquisa. Então, se eu pesquisar, por exemplo, um retângulo porque eu posso vê-lo, você pode ver o retângulo aqui. Então, está dentro do básico e dentro das formas, basicamente o mesmo componente ali. Vamos nos livrar disso e vamos voltar. Tão básicas são as formas básicas que você vê ali. Deixe-me mudar para o wireframe porque será muito mais simples demonstrá-lo lá. Então, se eu arrastar e soltar um retângulo como fizemos anteriormente, como mencionei anteriormente, você tem opções diferentes para seu retângulo. Aqui mesmo. Você pode brincar com a cor de preenchimento, com a cor da caldeira. Você pode colocar onde quiser que sua fronteira esteja. Você pode arredondar seus cantos com qualquer um dos cantos separados. Então, quando você passa o mouse, você pode ver e quando você muda muito, 50, você pode ver que esse é canto superior esquerdo porque é isso que ele atualizou. Ou se você quiser adicionar tudo a 50, então você pode fazer isso aqui. Ele vai se atualizar, atualizar cada canto. Então você pode adicionar isso por porcentagem, você pode adicioná-lo por sombra. Ou a melhor coisa sobre componentes é que quando eu seleciono meus componentes, você tem essas extensões. Assim, você pode mostrá-los ou ocultá-los. E você tem essa opção de formato. Agora, essas extensões serão diferentes para o que você selecionar na sua página e para os componentes que você escolher. mesmo que o próprio painel Propriedades, dependendo da forma que você escolheu, do componente que escolhemos aqui. Obviamente, você pode adicioná-lo a diferentes opções para cada uma delas. Você pode alterar as cores, alterar a cor da borda , por exemplo, adicionar um tipo em cada uma delas. Mas para alguns deles, será muito específico dependendo do componente selecionado e do que esse componente deve fazer. Aqui, o que temos para esse retângulo específico é a opção de forma. Então, quando eu clico nele, você pode ver todos os tipos de formas diferentes aparecendo aqui. Então, isso é muito útil porque você pode facilmente alterná-lo cantos retos para os cantos arredondados, por exemplo, quando eu clico fora dele, você pode ver que agora temos esses cantos arredondados. E quando eu voltar para aqui e selecionar minha opção, volte para minha forma e mude para aqui ou para aqui. Você pode ver que agora temos esses cantos arredondados. Então, se eu estendê-lo, você pode brincar com ele e eu posso ajustar o que eu quiser com essas formas. Mas se voltarmos ao meu padrão, você pode ver que agora eu não os tenho. Então essa é a opção com essas formas. E eu realmente gosto de usá-los porque você pode facilmente alternar entre essas opções. Então, temos, por exemplo a opção de linha, que é ótima para divisores de linha entre diferentes seções e quebras de página, digamos texto. Você pode arrastar e soltar e digitar algo. Então, vamos digitar alguma coisa. E o que você pode fazer com o tipo é estender a zona em que o texto falhará para a esquerda, direita, superior e inferior, dessa forma. Se você quiser criar um parágrafo rápido que preencha esse espaço específico , você pode girar seu texto clicando aqui. E mais uma vez, você pode vinculá-lo para qualquer tipo de interação diferente que desejar com esse link específico. Assim, você pode criar, digamos, efeito de passar o mouse sobre ele. Ou você pode vinculá-lo a outras partes do seu design. Mais uma vez, a extensão tem opções diferentes para o tipo. Assim, você pode fixar a posição em que está rastejando. Você pode adicionar uma dica de ferramenta ou um link externo. Se você quiser que esse tipo adicione algo mais na linha, você pode usar a cor de preenchimento, a cor da borda para a forma ou escolher a tipografia aqui. No momento, as fontes do Google Fonts e da Adobe não estão funcionando, mas vamos trabalhar com texto em uma aula separada. Então, vamos seguir em frente. Mas essas são suas opções para o tipo ao lado, você tem sua imagem, então você pode dimensionar essa imagem, algo assim. Por exemplo ou você pode escalá-lo para algo assim. Assim, você pode fazer o que quiser e ver que, quando eu o mover, ele vai me mostrar opções diferentes. Você pode segurar a tecla Shift para selecionar diferentes elementos e movê-los juntos, por exemplo, quando eu segurar minha tecla Shift e a seta inferior, ela se moverá em incrementos de dez, como você pode ver aqui. E quando eu clico e mantenho minha tecla Alt, você pode ver as distâncias entre todos os elementos e todas as bordas diferentes. Então, para adicionar uma imagem diferente, o que você pode fazer é selecionar e, mais uma vez , em extensão, como se trata de uma imagem, ela ficará um pouco diferente. Você tem suas opções de upload. Obviamente, você pode fazer o upload do seu computador e usar todos os tipos de imagens diferentes e enviá-las para lá. Mas, basicamente, o que você também pode fazer é usar alguns links e copiar e colar essas imagens dentro, por exemplo se quisermos usar imagens on-line, mas eu sempre recomendo armazenar essas imagens em sua máquina. Se algo der errado, você não conseguirá encontrá-lo on-line. Sua Internet não funciona, seja o que for, então você pode simplesmente usá-la. Clique em Carregar e ele vai te mostrar. Então clique para fazer o upload ou arraste e solte aqui. Você pode manter o tamanho original, mas pode deixar mais imagens de morte otimizadas para rP para você. Mas eu quero mostrar isso, que é uma opção fantástica que eles têm. Portanto, esse é o estilo padrão, ou você pode alterá-lo para o estilo wireframe. Então, vai aparecer assim, o que eu realmente adoro ver. Você pode alternar entre elas e seus clientes podem facilmente perceber, ok, então essa é uma imagem e você pode ver que, quando começar a esticá-la, ela assumirá formas diferentes. Digamos que, como estamos em 1920, vamos posicioná-la nos centros das mortes e, vamos ampliar, digamos que essa seja uma imagem de herói. Você pode ver como é legal e como nosso design já está formado, e incluímos apenas um elemento. Depois, temos a parte inferior, que provavelmente é a opção mais usada on-line e dentro do espaço UI UX. Então, se eu mudar isso para 300 para a largura, e vamos ver, 64 e uma altura. O que eu posso fazer lá dentro é mudar o tamanho da minha fonte para 32, talvez. E você pode ver que é enorme. Política de volta aos 24 ou até aos 18. Eu acho que esse é bom. Então eu posso mudar para negrito. Vamos ver. Eu posso mudar a cor de preenchimento para, digamos, essa bela cor azul. Vamos nos livrar da fronteira. E vamos usar algo como uma bela cor branca para nossos textos. E você pode clicar duas vezes para alterá-lo, clicar aqui, por exemplo, e mais uma vez, você pode levá-lo para um link externo. Você pode usar uma dica de ferramenta. Você pode fixar a posição ao rolar. E o que isso faz é que, quando você seleciona sua prancheta, você pode esticá-la. E quando você começar a rolar, esse elemento permanecerá fixo, o que geralmente é ótimo para itens de navegação , como menus. Então, abaixo disso, temos a entrada. Como eu disse, é basicamente o mesmo que um botão, mas a entrada é mais amplamente usada nos fóruns. Depois, temos a área de texto, que é ótima para parágrafos. Temos contêineres. E o primeiro é um painel. E o painel é um componente que permite colocar todos os elementos necessários em um só lugar e usá-los todos de uma vez. É um bom componente que você pode usar para criar designs como cartões, por exemplo, ou seções roláveis para seu projeto. Além disso, temos o painel de conteúdo. E esse é um componente que ajuda você a criar o efeito de uma guia, por exemplo, para troca de conteúdo. E você pode usá-lo facilmente com portas abaixo da média para obter esse efeito, se quiser. E abaixo disso, finalmente, temos a visualização da web, que é um componente que ajuda você a criar sites rapidamente. E o mais importante, ele permite que você insira diretamente URL de um site para incorporar diretamente esse site à sua interface. Portanto, ao ser pré-visualizado, você poderá interagir com esse site incorporado da mesma forma que o faz diretamente on-line. Abaixo disso, temos componentes comuns, que eu realmente gostei de chamar de componentes do sistema de design. Porque você encontrará esses componentes na maioria dos sistemas de design existentes. E, mais uma vez, eles serão diferentes para qualquer componente que você selecionar. E eles vão te dar opções diferentes no lado direito. Então, digamos que a barra de navegação do aplicativo. Você pode ver como fica aqui, temos algumas opções diferentes. Então, temos o ícone, selecionamos as cores. Então, ao clicar com o botão direito, você pode ver o que isso faz quando você seleciona a opção diferente. Então, deslize o ícone diretamente para selecionar um ícone no componente e clicar no ícone que você deseja nas bibliotecas, que é esse que abordaremos no próximo vídeo. Mas, basicamente, é assim que esse componente funciona. E você tem a maioria deles aqui. Depois, temos os gráficos, obviamente autoexplicativos, qualquer que seja o tipo de gráfico que você queira incluir, basta arrastá-lo e soltá-lo. Vamos usar esse gráfico e você pode brincar com todas essas opções aqui. Depois temos a marcação, que é uma das minhas opções favoritas. Vamos mudar para os fluxogramas. E vamos nos livrar de alguns desses elementos. Algo parecido com isso. Estou muito feliz com isso. E quando eu quiser adicionar algo, posso clicar duas vezes nos meus elementos. Ou se eu os selecionar e colocá-los em um grupo, ao clicar duas vezes. Você pode ver que ele está se concentrando em um elemento, que é o que estou tentando editar no momento. E vai se concentrar agora nesse elemento. Então, ao terminar, você está editando, adicionando textos, alterando cores, alterando formas, adicionando imagens Tudo o que você estiver fazendo ao clicar do lado de fora sairá do efeito de foco e apenas permitirá que você os mova e os selecione, obviamente, para voltar ao modo focado para edição. Mas voltar à marcação em que isso é importante, especialmente com fluxogramas, é usar essas setas. Então, se ampliarmos um pouco mais, você tem dois pontos e pode mover esses dois pontos da maneira que quiser. Você pode ver a opção Iniciar aqui. Então, digamos que nenhum. Ou melhor ainda. Vamos adicioná-lo. Vamos adicionar de volta como era para, para, para, digamos, essa opção. Lá vamos nós. Então, meu ponto final será nenhum. Então, eu vou usar Control C, Control V para colá-lo. E então eu vou segurar minha tecla Shift. E então, para este, você pode ver que ele está trocado. Ponto de partida. Ele o colocou aqui, mas o terminal não o colocou nenhum. Então, para esse ponto principal, vou usar esse círculo. Vamos ver o que é. Lá vamos nós. Eu só vou mudar um pouco para algo assim. E agora, para o meu endpoint, vou usar a seta. Então você pode ver como isso é simples. Digamos que aqui temos nosso componente retangular. Basta arrastá-lo e soltá-lo dentro, algo assim. Digamos que copie e coloque aqui e dentro dela, eu posso colocar, digamos, a página inicial, algo assim. E obviamente posso reduzir o tamanho para talvez dez ou algo parecido. E você pode facilmente ampliar isso e mostrar aos usuários como navegar em seu produto ou mostrar às partes interessadas seus colegas de equipe, suas ideias e as melhores abordagens que eles podem adotar. Obviamente, isso pode se expandir amplamente e incluir vários elementos diferentes, mas isso é apenas nesses métodos de apresentação que você pode usar. Agora, abaixo disso, o que temos dentro da marcação é um marcador circular. Você pode usar isso em conjunto com a seta. Você pode usar as notas adesivas se quiser adicionar notas rápidas dentro do seu design ou fora dele, basta colocar sua nota adesiva aqui. Então, quando seu colega de equipe entrar, você pode dizer a ele algo como adicionar imagens diferentes sobre as quais falamos ontem ou algo parecido. Então, você pode simplesmente brincar com essas notas adesivas e elas são muito úteis quando concluídas Basta clicar em Excluir e eliminá-las completamente da página e soltar o marcador, obviamente um ótimo componente para criar mapas. Abaixo, temos todos os tipos de formas diferentes que você pode usar. E o Mach plus rp inclui todos os tipos de formas diferentes, desde as muito, muito básicas até aquelas que são complexas como essa. E isso me lembra um ícone que eu consultei sobre o qual falaremos no próximo vídeo. Então, nos vemos lá. 8. Ícones: Você sabe como dizem que uma imagem vale 1.000 palavras. É para isso que servem os ícones. E neste vídeo, vou mostrar os ícones, o que eles fazem e o que você pode fazer com os ícones dentro de mais mais r p. Então, aqui estamos de volta em uma passagem rp de onde paramos. E aqui temos o ícone. Então, eu vou clicar aqui. Você pode ver todos os tipos de opções diferentes. Então, mais uma vez, temos a pesquisa separada para os próprios ícones. Então, se eu digitar pessoalmente, por exemplo, você pode ver todos os tipos de ícones de pessoas diferentes. E quando eu arrasto o ícone aqui e amplio um pouco mais, temos todas as opções que já abordamos. Mas a melhor coisa sobre isso é quando você arrasta e solta o ícone aqui. Como você pode ver, é tão rápido quanto isso, mas você pode mudar o estilo. Então, temos a lata e temos o estilo do parafuso, podemos mudar a cor. Então, vamos atualizá-lo para essa cor, por exemplo, temos a dica de ferramenta e o link externo. E dependendo da preferência desse ícone, temos a melodia e o parafuso. Então, para todos eles, às vezes isso vai mudar drasticamente, às vezes não. Mas basicamente você pode ver como isso parece. Obviamente, você também pode simplesmente colocar esses ícones onde quiser. Então, por exemplo , se escolhermos esse componente, volte para as camadas e você verá que aqui estamos no componente do botão. Se eu tentar arrastá-lo para dentro, ele simplesmente o colocará aqui. Então, na verdade, eu teria que agrupá-los assim para poder ver esse ícone dentro desse botão. Então, é claro que você pode criar um botão diferente com o ícone dentro dele, se quiser. Mas agora, quando eu começo a movê-los, você pode ver que agora eles estão dentro do mesmo componente. Quando eu tentei arrastá-lo, você pode ver que ele reduz o tamanho de todos eles. E se eu segurar minha tecla Shift, ela reduzirá o tamanho uniformemente. Isso é ótimo sobre ícones. Você pode trocá-los, você pode mudá-los. Dentro. Aqui você pode ver que temos o gesto gráfico do Office e todos os tipos de categorias diferentes que você pode brincar com eles. E você pode ver que alguns deles têm um estilo um pouco diferente. Então, temos o estilo de lata aqui. E se atualizarmos e mudarmos para negrito, você poderá ver como fica. Uma última coisa que quero observar é isso com a interação. Então, se eu clicar e arrastar minha interação para aqui, por exemplo, você pode alterar os gatilhos, você pode mudar o estado. Você pode mudar o estado de normal para desativado, por exemplo, e coisas assim. Mas vamos abordar isso em uma das aulas futuras. Mas, por enquanto, vou deixar você com isso. Então, basicamente, esses são os ícones e isso é o que você pode fazer com os próprios ícones. E você pode trocá-los, reposicioná-los, reordená-los, colocá-los onde quiser e fazer com eles o que quiser. E o melhor de tudo é que todos esses ícones estão pré-incluídos no mock plus rP. Portanto, você não precisa perder seu tempo procurando esses ícones on-line e alternando entre diferentes pacotes de ícones. Você pode, é claro, arrastar e soltar seus ícones do seu computador, por exemplo, dentro do nosso p.sit, eles funcionarão muito bem. Mas neste exemplo em particular, eu gosto de usar esses ícones porque eles já estão incluídos em cada ícone que você possa imaginar que já está aqui. Então, por que perder seu tempo pesquisando diferentes ícones online. Além disso, temos os ativos e vamos abordar isso no próximo vídeo. Então, nos vemos lá. 9. ativos: Ter todos esses ativos e itens padrão dentro do mob boss rp é ótimo. Mas e se você quiser criar seus próprios ativos e salvá-los para uso posterior, sozinho ou com seus colegas de equipe? Bem, é aí que a opção de ativos entra em jogo. E vamos voltar ao meu plus rP. Deixe-me mostrar o que isso faz e o que você pode fazer com isso. Então, aqui estamos de volta de onde paramos no vídeo anterior, e aqui temos a opção de ácidos. Então, quando eu seleciono minha opção de ativos, você pode ver que temos três opções diferentes. Temos cores, texto e componentes. Então, como mencionei, você pode criar seu próprio componente padrão do zero. Então, deixe-me mostrar como isso funcionaria. E ainda estamos nas camadas, ainda estamos dentro dos wireframes, estamos entediados. Então, vamos fazer exatamente isso. Vamos criar um botão, por exemplo , nosso, arrastá-lo para algo assim. Então, vamos escolher 50, talvez. E vamos digitar algo que eu diria, leia mais. Vamos ver. Vou posicionar esse texto no centro do meu botão. Vou selecioná-lo e usar, digamos, algo como dez para o raio do canto. Vamos nos livrar desse canto. E para o preenchimento, vamos usar essa cor que escolhemos ali mesmo. Então, vamos usar algo diferente, como Little Border, por exemplo e vamos escolher, sei lá, talvez 16, só que analistas um pouco diferentes ligam do centro. E eu vou usar um parafuso nesta capa, e vamos selecioná-la para ser branca, talvez. E depois vou voltar aos meus ícones. E vamos ver, ganância. Vou usar esse ícone, por exemplo, coloque-o aqui. E vou mudar sua cor para essa cor ou para a que acabamos de selecionar anteriormente. Certifique-se de que esses dois estejam centralizados clicando em selecioná-los e clicando aqui. E então você pode selecionar todos os seus elementos e centralizá-los dessa forma. Então, vou deixar isso aí mesmo. É 18 deste lado, é 21 deste lado. Então, vamos usar algo assim. Então, talvez 20 deste lado e 19 indecisos. Acho que vai funcionar muito bem. Então, agora temos essas opções. Então, vamos chamar isso de BT e cortar Biji para criar nosso próprio botão para isso. E eu vou selecionar todos os três, pressionar Control G e chamá-lo de btn, por exemplo, para o botão principal. E eu vou mudar para ativos dentro dos componentes, vou clicar aqui, adicionar componentes aos ativos. Vai aparecer como btn principal. Então, botão principal, você pode colocá-lo em um grupo padrão ou criar outro grupo, alterar, sincronizar automaticamente com todas as instâncias. Um exemplo é basicamente a versão desse botão latente on-line, decidimos criar talvez um botão mais largo ou um botão mais alto ou um botão menor. Essa será apenas uma versão desse botão principal. Então, tudo vai ficar o mesmo por dentro. Portanto, o conteúdo não vai mudar. Talvez as cores não mudem. As interações continuarão as mesmas. Apenas o tamanho será diferente. Então é aí que as instâncias entram em jogo. E você pode mudar. Você pode sincronizar as alterações automáticas pensando nessa opção em todas as suas diferentes instâncias. E é aí que essa opção é ótima. Então eu posso simplesmente clicar, Ok. E você pode ver que vai aparecer aqui. Então, aqui temos nosso botão principal. Dentro do nosso grupo padrão, temos nosso botão principal. E você pode ver como isso parece. Agora está na cor vermelha. E se eu quiser, posso simplesmente mudar, voltar para uma página diferente, digamos, design. Aqui você pode ver que temos uma página em branco e eu posso simplesmente colocá-la mais ou menos por aqui. Agora, se eu voltar para meus wireframes e editar algo, por exemplo, posso clicar duas vezes em dentro. Isso vai me levar para a página separada onde adicionei meus elementos. Então, digamos que eu queira mudar algo como talvez uma cor diferente para essa cor. Digamos que clique em Aplicar e volte. E você pode ver que estamos em um wireframe, mas se voltarmos ao design, ele ainda aplicará a alteração porque essa é uma instância do nosso botão principal. Mesmo que seja completamente o mesmo, é apenas uma cópia do design do que temos dentro de dois wireframes. Agora, como eu uso essa cor e gosto muito dessa cor, posso simplesmente clicar duas vezes nela para aplicar. Mas digamos que eu queira selecionar minha camada, entrar aqui, chamá-la de botão principal, tudo bem. E eu quero escolher essa cor. Então, talvez porque a cor já tenha sido adicionada, eu possa clicar duas vezes aqui e abrir o botão Vg. O que eu posso fazer é usar essa cor dentro dos meus ativos. Portanto, essas cores podem ser diferentes e eu posso me livrar dessa, por exemplo, ou simplesmente selecionar esta ou clicar duas vezes e chamá-la, por exemplo, soma. Ou isso pode ser, digamos, cinza escuro ou algo parecido. Mude para vender, clique em Aplicar. E então, quando você voltar para aqui, você pode ver suas cores aparecendo aqui. Mas se eu quiser clicar duas vezes posso selecionar meu texto aqui. Mas eu posso fazer abaixo dos textos é só clicar. E aqui temos a versão de refutação desse texto. Se você alterar a cor, por exemplo, ou alterá-la para não ficar em negrito ou mudar. Fonte, tipo ou tamanho de fonte completamente diferentes. Nesse caso, você pode simplesmente clicar em mais e ele o adicionará aos seus textos. Basta clicar em aplicar. Quando você sai dela. Aqui, você pode ver o que ele faz. E a melhor coisa sobre isso é que, se eu decidir escolher outro texto, digamos este, por exemplo, e eu posso alterá-lo para Roboto e você pode ver que ele foi atualizado em tempo real, mudar para evitar usar 16, que é o que eu disse para ele fazer aqui. Ou se selecionarmos meu botão, alguém aplicará essa cor. E você pode ver por que essas opções são ótimas. Se eu optar por mudar essa cor para o cinza escuro, agora você pode ver onde os ativos estão sendo úteis. Obviamente, você pode usar ativos em várias opções diferentes. Por exemplo, você pode criar componentes completos, como, digamos, formulários de contato. E você reutilizará o formulário de contato em todo o seu design. Portanto, ter um ativo, em termos de componentes, será muito benéfico para você, porque você pode simplesmente arrastá-lo e soltá-lo na posição certa e usar e reutilizar esse componente. E se você precisar atualizá-lo, por exemplo, seu cliente não gosta desse estilo de ícones. Talvez eles não queiram campo, talvez queiram um esboço. Você pode simplesmente selecionar esse componente para a instância principal dele. Aplique essa alteração ao nosso ícone e ela será sincronizada automaticamente em todas as suas instâncias e em todos os seus componentes, não importa onde eles estejam localizados dentro do seu design. Portanto, essa é a diferença entre os ativos que você criou e esses componentes. Porque os componentes são, na verdade, opções padrão que você obtém em mais rP. Mas os ativos são algo realmente pessoal para você e algo que você criou para cada projeto em que trabalhará. Agora, uma última coisa que quero mencionar é como você pode realmente compartilhar sua biblioteca com seus colegas de equipe. Então, aqui, quando você passa o mouse e clica nesses três pontos, você tem a opção Compartilhar. Quando você clica nela, diz, eu quero mostrar se você tem certeza de que deseja compartilhar essa biblioteca de ativos com a equipe de culinária, você diz, ok, porque você faz parte dessa equipe, lembre-se, quando você acessa a página inicial e lá você poderá vê-la. Agora temos essa opção vinculada e temos essa opção. Então, quando eu clico aqui, você pode ver a biblioteca, nosso primeiro projeto, que é nossa biblioteca. E se você é membro de outras equipes, por exemplo em sua equipe, existem outras bibliotecas das quais você faz parte. Como membro da equipe, você poderá vê-los aqui para poder alternar facilmente entre eles. Mas como só temos um que acabamos de criar, esse é o único que é mostrado no momento. Mas lembre-se de que você pode ter bibliotecas ilimitadas aqui. Então, por exemplo , em uma biblioteca, digamos que seus colegas de equipe criaram uma paleta de cores que você usará. Outra biblioteca é, por exemplo elementos gráficos que você usará para, digamos, trabalhos colaterais ou de marca ou algo parecido. Então, em algumas outras bibliotecas, talvez haja algumas imagens que você vai usar em seu site. Portanto, essa é uma ótima opção, pois você pode alternar facilmente entre todas essas bibliotecas. Pegue os elementos que você precisa deles. Então, quando você clica neles, os elementos dentro dessas bibliotecas serão apresentados aqui. Você pode facilmente arrastá-los e soltá-los em sua página, por exemplo, se tivermos componentes diferentes, vamos ver diferentes botões ou formulários de entrada ou algo parecido. Ou se você quiser usar diferentes estilos de texto ou cores diferentes, tudo isso será apresentado aqui. E uma ótima opção, como eu disse, é aquela função compartilhada que você também pode cancelar o compartilhamento se, por exemplo a biblioteca não estiver concluída no momento e você a terminará em outro momento. E então você pode compartilhá-lo novamente com seus colegas de equipe No próximo vídeo, mostrarei um pouco mais de informações sobre painel Propriedades e o que ele pode fazer. Então, nos vemos lá. 10. Painel de propriedades: Já abordamos o painel de propriedades neste curso, mas vou abordá-lo um pouco mais e mostrar mais algumas opções que eu não mencionei nos vídeos anteriores. Então, vamos começar. Então, como mencionei, o painel Propriedades está aqui no lado direito. Portanto, não importa o que você selecionar, ele mudará e será atualizado em tempo real. Mas o que eu não mencionei são essas opções aqui no topo. Aqui temos opções de alinhamento para que você possa alinhar seus objetos em relação à prancheta onde eles estão dentro. Então, por exemplo, se você pegar esse objeto, colocá-lo do lado de fora, selecionado, obviamente ele não saberá para onde alinhá-lo. Então, ele vai apenas atacar sua prancha de arte e apontar para sua prancha de arte para que você possa posicioná-la da esquerda para o centro horizontalmente, certo? Ou você pode posicioná-lo no topo. Modo de linha vertical ou inferior, então você pode separar seus itens. Então isso é ótimo. Se você tiver várias opções como essas, por exemplo, então você as tem. Assim, você pode distribuir horizontalmente. Veja o que acontece quando eu clico aqui para garantir que ele tenha o mesmo espaçamento entre meus ícones. Ou você pode distribuí-los verticalmente. Se eles estiverem localizados assim, você pode selecioná-los e clicar nessa opção e ela os colocará aqui. Mas se você quiser, você pode clicar aqui. E isso vai organizá-los muito bem e posicioná-los como você quiser. Mas vamos voltar algumas etapas e posicioná-las como funcionavam anteriormente. Porque eu quero mostrar essa opção para que você possa colocá-las aqui se o ícone for mais alto, por exemplo não estará com os padrões, mas se você estiver usando o seu próprio, basta clicar aqui. E então, quando você passa o mouse, você tem essas opções, o que é ótimo se você quiser aumentar o espaçamento entre elas. E, obviamente, ajuste automático entre todos os tipos de opções diferentes. Agora, quando você seleciona uns, é, quando você seleciona vários, como você viu, diz que três componentes foram selecionados. Ou digamos que dois componentes tenham sido selecionados. Um, um 11 padrão que eu criei, por exemplo , e então você tem essas opções. Então isso é para esconder isso. Então, ainda está aqui para que você possa ver o que é. Mas quando você for visualizá-lo, ele não ficará visível. Isso é para desativá-lo. Portanto, seus usuários não poderão clicar, por exemplo e então você poderá bloqueá-lo ou desbloqueá-lo, e então ele não conseguirá se mover, eles não conseguirão selecioná-lo e coisas assim. Você tem o layout inteligente. Então, quando eu seleciono isso e vou para o layout inteligente, você pode escolher automático ou manual. Você pode usar largura fixa, por exemplo, ou altura fixa. Você pode marcar ou desmarcar o barco. Então, quando eu começar a arrastar, ele só vai manter a altura fixa, mas a largura vai ser diferente. Ou você pode fazer o contrário. Então você pode ver, eu não posso mais mudar a altura. Desculpe, espere mais, mas eu posso mudar a altura neste caso. E você pode escolher onde seus itens ficarão grudados. Nesse caso, eles estão grudados no lado esquerdo, mas você pode alternar para o lado direito e ver que eles estão se movendo para a direita agora. Mas, em qualquer caso, você pode usar automático e ajustar como quiser e deixar que mach plus rP faça sua mágica e aplique a partir daí. Aqui temos a largura, temos a altura, eixo x, eixo y e depois temos a rotação. Então, por exemplo, 45 graus, você pode ver o que isso faz. E essas são as opções avançadas para espaço horizontal e espaçamento vertical. Então, quando eu seleciono esses, você pode ver aqui que temos espaçamento horizontal, mas se os invertermos, você pode ver que então teremos espaçamento vertical. O que também temos dentro do painel Propriedades para a maioria dos objetos são sombras. Então, quando clico em sombra e digito algo como, sei lá, 6,10 ou dez. Você pode ver que agora eu tenho o fundo superficial incluído aqui. Eu posso mudar esse canal clicando aqui e alterando seu valor alfa, que é basicamente seu valor de opacidade. Aqui você pode alterar as cores para escolher a cor que quiser. Mas vou usar o preto padrão neste caso, talvez algo assim. Mas alfa, obviamente, é muito forte. Talvez dez por cento, isso diminuirá muito bem. Mas como isso está selecionado, vou apenas desmarcar a sombra para ele. E então, quando eu seleciono tudo, vai funcionar como antes. Então, quando eu aumento isso para 20, tenho que selecionar isso e desmarcar a sombra mais uma vez. Só vai ter a sombra no fundo de seus elementos. posição fixa de rastreamento é ótima, como mencionei anteriormente. Se tivermos, por exemplo navegação aqui na parte superior, você deseja selecionar a navegação inteira. Digamos que essa seja toda a nossa navegação, algo assim. Então, quando você usa uma rolagem inicial e suas despesas com a prancheta de arte , ao fazer isso, ela permanecerá nessa posição específica e não se moverá de jeito nenhum. Mais uma vez, com base no que você selecionou, você terá opções diferentes aqui. E já abordamos isso em vídeos anteriores. Portanto, não vou gastar muito tempo com isso porque quero passar para a próxima lição, que é a interação. Está localizado aqui, e nos vemos no próximo vídeo. 11. Interações: Ter designs estáticos é ótimo, mas quando você adiciona interações a eles, isso dá um pouco de vida aos seus designs. Então é aí que o painel de interações é útil e tem ótimas opções dentro do ma plus rP. Então, vamos entrar e deixar eu mostrar o que você pode fazer. Tudo bem, então aqui é de onde paramos na vez anterior. E agora vamos falar sobre interações. Agora. Basicamente, as interações estão localizadas aqui e é o que acontece entre dois elementos ou dois aeroportos ou em um único elemento onde você deseja adicionar algum tipo de animação apenas para mostrar o que acontecerá quando o usuário interagir com esse elemento específico Você pode ver o que diz aqui. Você pode selecionar um componente ou uma prancheta e clicar em Adicionar interação para adicionar diferentes interações. Ou você pode beber um link dos componentes para qualquer componente ou página de destino. Agora, esse ponto de ligação é o que diz aqui. Então, esses são esses pontos vermelhos e, basicamente, você pode apontá-los para si mesmo, apontá-los para outros elementos ou apontá-los para outros aeroportos, até mesmo outras páginas, se quiser que ele interaja entre essa página ou aeroporto em particular ou alguma página separada ou RPA. Então, basicamente, quando você quiser adicionar interações diferentes, você pode escolher alvos. Assim, você pode escolher entre os componentes e entre as páginas. E você pode alterá-lo para, por exemplo, self. E aqui você tem os gatilhos. Os gatilhos são basicamente o que fará com que ele tenha essa interação. Então, que tipo de gatilho que o usuário fará fará com que essa interação realmente comece e realmente aconteça. O que temos aqui, nosso clique duplo, clique com o botão direito do mouse para baixo, mouse para cima e todos os tipos de gatilhos diferentes. Então temos comandos. Quando tivermos realmente o gatilho, o que acontecerá? Então, temos o Mover, ampliar, girar, mostrar, ocultar, rolar. Então, esses são apenas alguns comandos básicos, mas também teremos alguns comandos mais avançados posteriormente. Então, temos um valor relativo. Portanto, se estiver mais marcado em relação à posição, se for mais inexplorado no local específico. Portanto, se for mais para esse local específico, você pode usar valores x e y para posicioná-lo nesse local específico. Depois disso, vem a flexibilização. E, basicamente, é assim que essa interação vai ser. Será estritamente do ponto a ao ponto B? Ou será linear? Será que vai haver uma flexibilização, uma atenuação? O que isso significa basicamente é : será que vai facilitar a inserção na animação? Vai sair facilmente da animação? Ou será apenas direto do ponto a ao ponto B? Durante essa interação. Depois disso, temos a duração. Então, por quanto tempo essa interação vai acontecer? E então temos o atraso no final, atrasos basicamente o que diz. Então, depois de clicar aqui ou depois de dar algum tipo de comando, não há atraso ou aconteceu instantaneamente? Então é aí que o atraso é útil. Então, vamos explorar nosso exemplo perfeito com um estado básico de flutuação. Então, aqui temos o botão que criamos anteriormente. E para explorar ainda mais esse botão, vamos clicar duas vezes nele e pular para dentro daqui. E vamos selecionar nosso botão. E aqui o que temos é o intestino do estado. Então, aqui temos todos os estados pré-fabricados que o MC plus rP deseja que incluamos. Claro que isso é tudo. Se quisermos. Caso contrário, você pode clicar em Adicionar um estado como já exploramos anteriormente e adicionar seu próprio estado personalizado. Então, aqui temos todos os estados que geralmente são usados no design de UI UX. Portanto, temos o normal, que é apenas esse estado básico sem nenhum tipo de animação, que selecionamos. Então, geralmente, em estados selecionados, você quer que seus usuários se concentrem para que eles entendam que selecionaram algum elemento. Temos o estado desativado, que é basicamente que eles não podem selecioná-lo neste momento, geralmente porque precisam realizar determinadas operações para poder selecioná-lo. Então é aí que os deficientes são úteis. Temos o horror em massa. Então, o que acontece quando eu passo o mouse sobre ele? Isso não vai mudar. E isso é especialmente útil porque queremos que nossos usuários entendam que podem fazer alguma coisa. E passar o mouse é a opção perfeita para que eles chamem sua atenção para realmente serem capazes de realizar uma determinada tarefa. Finalmente, estamos deprimidos. Então, o que acontece quando eles clicam no botão, quando o pressionam? O que vai mudar? Vamos passar o mouse sobre o mouse. Então, quando eu clico aqui, ele editará especificamente esse mouse. Então, vamos mudar sua cor, por exemplo, vamos mudar para Propriedades. Agora vamos selecionar a cor de preenchimento e escolher uma cor um pouco mais escura. Então, por exemplo, algo assim. Como eu gosto dessa cor, vou adicioná-la. Estamos no estado de passar o mouse. Então, vou adicioná-lo às minhas cores aqui. E vou clicar duas vezes e chamá-lo, por exemplo mouse, algo como dívida. E então você pode passar para as interações, se quiser. E quando eu mudo para o normal, você pode ver que temos essa cor. Quando mudei para o mouse , temos essa coluna. Assim, você pode alternar facilmente entre eles. E você pode clicar em Aplicar para aplicar esse botão. E para fazer uma prévia rápida, posso clicar aqui. E quando eu passo o mouse, você pode ver as mudanças, a cor. Para a cor do mouse que realmente criamos agora. Ok, então vamos tentar conectar isso a uma placa de arte separada, por exemplo, então vamos adicionar uma subparte R. E vamos criá-lo aqui mesmo. Então, opa, não é isso. Vamos clicar na seta e ampliar um pouco. E vamos adicionar um quadro secundário diferente. Vamos para Propriedades. Ellen vai para 1920 em 1080. Então, ele foi selecionado para ser o mesmo. Ou vamos ver, este é 1080, algo assim. Portanto, temos a porta sub R aqui. E quando eu clicar aqui, ele será vinculado a este quadro de arte. Então, vai mostrar nosso porto. Você pode posicionar o centro, você não pode animar nenhum. E digamos que o SlideUp esteja desaparecendo ainda melhor. Você pode mostrar a máscara e a atenuação da máscara facilitará a entrada e a saída. Então, a facilidade na animação depende da animação, clique em Ok, agora dentro desta placa subR, mas vou mudar para Propriedades. Pressione T para a ferramenta de texto e digite algo como Aqui está sua janela pop-up, por exemplo, e obviamente vamos mudar isso para algo um pouco mais escuro, como talvez a cor cinza escuro. Vamos mudar de 16 a 45, algo muito grande. E vamos posicioná-lo no centro da nossa página, algo assim. Então, quando eu voltar aqui e pré-visualizar nosso protótipo, então eu desclico, ele vai aparecer, mas como você pode ver quando eu clico nele, nada realmente acontece. Então, o que fazer nesse caso, basicamente quero clicar para fechá-lo. Então, o que você pode fazer é voltar aqui. Você pode clicar duas vezes e aqui você pode ver suas opções de edição. Em comandos, você pode ver esses três pontos. Clique em Editar, tudo bem, aqui, e aqui você pode ver Mostrar máscara e clicar na máscara para fechar. Clique em Ok, vá para fora , clique em Atualizar e vamos tentar esse e ver se funciona e funciona. Depois de carregar, clique lá e ele mostrará a máscara. Quando eu clico na máscara, ela vai escondê-la. Então, mais uma vez, clique aqui para ocultá-lo. Mais uma vez, isso é ótimo, não apenas para os pop-ups, mas digamos que os módulos de assinatura sejam para os módulos de e-mail ou domingos desse tipo. Quando você quer apenas mostrar uma informação rápida, ela não precisa estar em tela cheia. Lembre-se de que eu o criei para ter o mesmo tamanho desta prancheta. Pode estar no centro. Essas são interações. Você pode ver que é possível adicionar interações, dois componentes separados ou o aeroporto inteiro. Ou uma coisa que eu não mencionei é que você pode até mesmo vincular essas duas páginas separadas, se quiser. Então, você pode simplesmente arrastar essa pequena alça vermelha para a página separada que você deseja e vinculá-la para onde quiser, algo assim. Então, quando os usuários clicarem nele, isso os levará ao design. Você pode ver o salto de página. Então você pode pular para essa página, você pode animá-la. Você pode ver onde quiser e fazer com isso. O mesmo que fizemos e exploramos anteriormente com essas opções. Então, essas são as interações e é para isso que servem. No próximo vídeo, vou mostrar notas. Então, nos vemos lá. 12. Observações: As notas são ótimas se você quiser adicionar nós aos seus colegas de equipe ou aos seus clientes, apenas para informá-los sobre a página que estão vendo e o que está incluído nela. Ok, então aqui estamos de volta em nosso arquivo e os nós estão localizados aqui. E você notará que meus wireframes estão selecionados, então diz notas de página e eu posso adicionar algo como, por exemplo, esses são apenas wireframes. E quando eu clico em Control S para salvá-lo e clicar em pré-visualizar, ele vai me mostrar a nota da página aqui. Agora, se você tem vários nós deixe-me mostrar como isso funciona. Então, por exemplo, se eu selecionar isso e apenas criar alguns espaços abaixo, colar, colar e pagar, por exemplo pressione Control S e clique em visualizar mais uma vez. Vai me mostrar aquelas notas de várias páginas. Agora, você pode limpar todos os nós aqui. Você pode simplesmente pressionar Excluir na sua tecla ou simplesmente selecioná-la desta forma. Clique em backspace e exclua todos os nós desnecessários que você deseja. Agora, essas são as notas da página. Você também pode adicionar notas a diferentes elementos de suas páginas. Por exemplo se eu selecionar esse botão, esse botão, você pode ver que aqui temos o componente e aqui temos o grupo porque esse é o nome do grupo. Então, se eu selecionar esse componente, digamos, por exemplo se você gosta desse ícone, talvez. E então eu posso selecionar os textos. Digamos que diga algo como você acha que esse tamanho é muito pequeno ou algo parecido? Então você pode ver como isso é realmente útil. Então, quando eu clico em Control S e o visualizo , mais uma vez, você pode ver que agora temos vários elementos, então temos as notas da página. Portanto, esse é o nó da página inteira. Em seguida, temos o botão principal. E quando eu passo o mouse, você pode ver o número de um e aqui está o número um localizado aqui. E aqui temos um para o tipo. E será exibido o número dois ao lado desse tipo para que seus clientes sejam colegas de equipe. Sabe do que trata essa nota? Então, aqui temos as notas da página inteira. Aqui temos o botão principal sobre esse botão. E, finalmente, no tipo desse tipo ou localizado no wireframe. Então, quando eu mudo para o resumo do design, por exemplo, você pode ver que ele está em branco e não temos as notas porque os nós estão relacionados às suas páginas. No próximo vídeo, falaremos sobre nossos portos e aeroportos. Qual é a diferença e o que você pode fazer com eles. Então, nos vemos lá. 13. Artboards e sub artboards: Já falamos muito sobre pranchas de arte e portas abaixo da média nesta aula. Mas eu só queria mostrar um outro exemplo agora com o aplicativo móvel, porque essa aula é voltada principalmente para sites e esses tipos de tamanhos. Então, eu também quero mostrar este e o que você pode fazer nesse caso. Então aqui estamos de volta com uma toupeira e eu abri para o kit Joe, Joe go UI, que é esse kit de interface de usuário. E para abrir seus modelos, você pode simplesmente abrir, clicar, editar, salvar e escolher em qual equipe ou espaço pessoal deseja salvá-los. E vai se abrir assim para que você possa alternar entre todas essas páginas diferentes aqui. No momento, estou na página de login e criei rapidamente esse quadro secundário clicando novamente neste botão aqui. Agora, eu já mostrei esse exemplo, então não vou entrar em muitos detalhes, mas quando você clica aqui e conecta, você pode clicar em, mostrar nossa porta. Você pode posicioná-lo onde quiser resolver, digamos, na parte inferior, deslizar para cima ou diminuir o zoom ou o que quiser. Você pode clicar em Fechar obrigatório. O mesmo que expliquei em um dos vídeos anteriores. E acabei de colocar uma flexibilização um pouco mais longa neste caso. Então, é assim que fica quando você clica no botão, ele vai mostrar quando você clica do lado de fora, não vai mostrar nada. Isso é ótimo para criar protótipos por motivos óbvios, pois você pode mostrar aos seus clientes o que você quer mostrar com essas mensagens de erro, por exemplo, e coisas assim ou com seus colegas de equipe para explorá-las um pouco mais. Mas a diferença aqui é que agora temos a maquete do dispositivo e, neste caso, temos a estrutura do dispositivo. Assim, você pode facilmente mostrar isso aos seus clientes. E é iPhone porque esse tamanho da prancheta é o tamanho do iPhone. Se você escolher outro tamanho , ele nos mostrará esse tamanho diferente para esse projeto específico. Mas cada página está endividada, tamanho do iPhone, o que quer que eu tenha tentado pré-visualizar, vai me mostrar nesse tamanho. Outra coisa que eu queria mostrar é que quando você seleciona sua prancheta, mais uma vez, você pode definir o layout inteligente, a cor de fundo e coisas do tipo, mas também pode invertê-la. Então, se eu escolher posicioná-la um pouco mais acima, selecione essa prancheta e inverta sua posição. Você pode ver que pode facilmente alterá-lo do modo retrato para o modo paisagem. Basta clicar neste botão para manter as mesmas dimensões, basta invertê-las para a largura e a altura. Então, isso é basicamente tudo o que eu queria mostrar sobre nossos conselhos e subaeroportos. E essa é a única coisa que imaginei ainda não mencionamos Mostrei como usar esses modelos gratuitos. Mais uma vez, se você quiser acessar os modelos, basta clicar aqui e clicar em modelos. E você será direcionado para esta página com os modelos para que você possa editar qualquer um desses modelos e ajustá-los como quiser. Você pode ver quantas páginas e elementos eles têm, quantas cores e pode prosseguir e alterá-los e atualizá-los conforme desejar. No próximo vídeo, mostrarei algumas opções de tipo e como trabalhar com texto dentro do mock plus rP. Então eu vou te ver lá. 14. Trabalhando com tipografia: tipografia é um elemento crucial de qualquer design de interface de usuário existente. Portanto, saber como trabalhar com tipos, especialmente mock plus rp, é muito importante. Então, neste vídeo, abordaremos algumas configurações básicas de tipos e elementos básicos. Como você pode trabalhar com o tipo e como você pode trabalhar com ele dentro do nosso p.ball. Vamos começar. Então, aqui estamos de volta em nossos antigos e confiáveis wireframes. E quando eu seleciono esse tipo ou posso excluí-lo, aperte T no botão do meu teclado e ele colocará esse tipo de algo no lugar. Como já criei isso, posso aplicar isso ao meu tipo e você pode ver que ele muda de cor. E eu posso mudar essa cor de preenchimento para algo como preto escuro ou algo assim. Eu sempre posso voltar e clicar aqui. E agora ele vai me dar essas opções diferentes para que eu possa alternar entre claro e escuro com o clique de um botão e manterá a mesma configuração, mesmo posicionamento desse. Portanto, você também pode ir para Componentes e arrastar e soltar a opção Tipo ali mesmo, se você escolher ou simplesmente pressionar D já explicado, e então você pode brincar com a digitação. Então, quais são suas opções reais? Então, aqui temos a família de fontes. Portanto, essas são as famílias de fontes incluídas atualmente, mas estou falando com a equipe em futuras atualizações que eles adicionem . Espero que eles adicionem o Google Fonts e o Adobe Fonts. Então você terá uma variedade muito maior de suas fontes. E o upload personalizado de sua opção de fontes personalizadas também será desativado no futuro, mas essas são suas opções por enquanto. Portanto, ao selecionar sua família de fontes, você pode selecionar vários tamanhos diferentes desses tamanhos predeterminados. Ou você pode alterá-lo simplesmente digitando o que quiser , do tamanho que quiser. Então já abordamos a cor e como a cor funciona em mais analisador p. Aqui temos a opção em negrito aqui temos a opção itálico. Aqui temos a opção subjacente. Se você quiser adicionar o subjacente, temos o tachado e aqui temos o espaçamento entre caracteres. Então, é apenas o espaçamento entre os personagens. Então, se a Lei de Direitos 20, você pode ver o que ela faz. Aqui. O que temos é que, se eu aumentar isso para, digamos, 80, nada realmente acontece porque esse é o espaço entre duas linhas. Então, se eu digitar algo, colocá-lo em uma nova linha e trazê-lo de volta para 56, você pode ver como isso funciona. E se voltarmos para 36, você pode ver o quão esmagado nosso tipo realmente é. Abaixo disso, temos opções de alinhamento. Então, alinhamos um alinhamento à esquerda, centro, alinhamento, alinhamento à direita, justificar, o que significa que ambos os lados terão os mesmos valores e a mesma largura. Nesse caso, esse valor máximo será diferente. A Guatemala será diferente, mas se você as justificar, elas serão exatamente iguais. Aqui. Letras maiúsculas. Portanto, tudo estará em maiúsculas, minúsculas ou minúsculas. Então, cada palavra será exatamente assim. E se você não quiser, basta clicar e ele vai desmarcá-lo. Aqui temos o recuo do texto, o que é ótimo para parágrafos. Obviamente. Aqui temos recuo vertical do texto. Aqui temos uma lista numerada e aqui temos uma lista com marcadores. Mais uma vez, clique para desmarcá-lo. O que temos aqui é a largura automática, que é a largura do texto incluído. Aqui temos altura automática, basicamente a mesma coisa, e aqui temos tamanho fixo. Então, quando você verifica isso, não vai sair desse tamanho fixo. Então, deixe-me usar a largura automática. Então, o que quer que eu esteja digitando, posso ajustá-lo e digitar algo novo na página. Você pode ver isso porque largura será dimensionada automaticamente. Mas se for um peso fixo, por exemplo , algo novo na página que você pode ver é colocá-lo na nova linha, algo parecido. Então, vou usar a largura automática e vou me livrar desse texto daqui em diante desse jeito. E eu quero mostrar algumas opções adicionais para que você possa ter o preenchimento e as aquarelas. Você pode adicionar uma borda ao redor do texto. Você pode adicionar uma cor de preenchimento separada, se assim desejar. E você pode simplesmente curvar essas bordas se quiser, mas eu não vou recomendar que você faça isso. Para as extensões, temos uma posição fixa com o rastreamento, como sempre, temos as dicas de ferramentas quando você mouse para ver o que é. E, finalmente, temos links externos. Então, quando eu adiciono isso, digamos google.com, por exemplo, hit. Ok, e você pode ver que ele adicionou um link. Então, quando eu clico em pré-visualizar rapidamente e depois volto e vejo digitar algo, quando eu passo o mouse sobre ele, você pode ver que agora temos o link quando você clica, ele vai me levar ao google.com. Então, esse é basicamente o tipo em poucas palavras. O que eu quero te mostrar finalmente é que vamos nos livrar desse link externo. Quando eu clico no Controle D para duplicá-lo algumas vezes, você pode ver que a opção de espaçamento aparece, é 19 em um momento, mas digamos que eu queira usar algo como a turbina T. Talvez lá vamos nós. Aqui estamos. E agora, quando eu passo o mouse aqui, você pode ver que agora estamos com 20. Além disso, quero mostrar se essas opções funcionariam exatamente da mesma forma para formas e para o texto. Então, quando você quiser separá-los, você pode fazer isso. Você pode posicioná-los como quiser. Você pode espaçá-los, distribuí-los com eles, o que quiser. Então, vou mostrar como isso funciona se eu conseguir pegar e selecionar todos os três, algo assim, clique aqui. Então, basicamente, a mesma coisa que acontece com as formas. Você pode segurar a tecla Shift e ela mostrará o mesmo espaçamento entre seus elementos. Então esse é o tipo. Basicamente, no próximo vídeo abordaremos o modo premium. E eu vou te dar um pouco mais de informações sobre isso do que antes. Então eu vou te ver lá. 15. Modo de pré-visualização: O modo de visualização é onde você vê seus protótipos e como outras pessoas da sua equipe ou pessoas que você convida para visualizá-los podem vê-los. Então, é uma parte muito importante de mais r p. Então, deixe-me mostrar como funciona um pouco mais de detalhes do que eu fiz até agora. Então, se voltarmos para aqui, aqui está, nosso modo de pré-visualização. Então, mais uma vez, você pode clicar e começar da página inicial ou começar da página atual. página inicial, em nosso caso, são fluxogramas porque essa é a primeira página da lista. Ou você pode começar na página atual. Você pode escolher isso pressionando Control Command P. Agora, quando ele é lançado, como você pode ver, ele carrega porque tem todos os tipos de opções diferentes. E tudo começou nesta página. Já explicamos as notas da página. E aqui você pode ter o Zoom para ajustar a largura, ajustar à tela, algo assim. E aqui você pode ter a tela cheia, você pode sair dela como eu já expliquei. E você pode ocultar esses painéis, se assim for, escolha. Quando você clica em Compartilhar, você mostra o Painel de Controle. Você tem todas essas opções. Então, quando você realmente compartilha esse link de pré-visualização com outra pessoa da sua equipe, você pode realmente escolher o que você quer que essa pessoa veja. E isso é muito importante por um motivo simples. Ao compartilhar isso com alguns usuários testadores, você quer poder eles possam testar seu protótipo, mas não oferecer muitas opções. E, basicamente, segure mão deles enquanto fazem isso, porque você quer que eles descubram as coisas sozinhos onde precisam clicar, onde precisam mostrar. Se você está cronometrando essas interações, você quer que elas não recebam nenhuma ajuda, mas se gerenciem sozinhas. Dessa forma, você poderá medir o que eles estão fazendo. E para isso, essas configurações são uma parte muito importante, pois você pode mostrar ou ocultar painéis de controle. Então, quando eu clico ali e clico em copiar, por exemplo e abro uma nova guia, clico em Control V e cole-a dentro. Esta é nossa nova guia, e você pode ver que eles não veem nada. Então, eles terão que se virar sozinhos porque nós o fechamos propositalmente a partir daqui. Então ela controlará o painel. Você pode mostrar a área do link o mouse ou não descobrir por si mesmo. Estamos mostrando à operadora o conteúdo fora do quadro de arte, não os marcadores definem a senha e coisas assim. Portanto, é muito importante, se você quiser se aprofundar um pouco mais no compartilhamento, explorar também essa opção. Então, quando voltarmos para aqui, temos mais opções. Então, sempre mostrando a operadora, basicamente o que vimos aqui para o compartilhamento. Mas isso é o que você seus colegas de equipe e os líderes do projeto, por exemplo, é o que eles verão aqui. Então, isso é basicamente para o compartilhamento. No próximo vídeo, vou explicar nesta opção de protótipo de download o que é e para que serve. Então eu vou te ver lá. 16. Download de protótipos: Às vezes, você quer baixar seus protótipos do Mach plus rP, compartilhando-os com colegas de equipe, com clientes, e ainda não quer enviá-los e publicá-los. Talvez você esteja sob NDA. Talvez você não tenha acesso à internet. Talvez você esteja viajando para algum lugar e queira ter apenas esses protótipos. Pense neles para revisar algumas notas que você tem. Todos os tipos desses diferentes cenários e mortes em que a opção de download é útil. Deixe-me te mostrar. Então aqui está, aqui no topo, você tem essa opção de download. Assim, você pode baixar o pacote de apresentação de protótipos offline. E essas são as frases-chave aqui, pacote de apresentação, usado para apresentações. Então, quando você quiser apresentar isso off-line, quando estiver em trânsito, talvez esteja em seu laptop, talvez esteja viajando, talvez esteja indo para o local de trabalho ou para seus clientes. Existem várias opções e cenários diferentes em que você pode usar algo assim. É muito importante fazer isso porque você sempre quer ter um backup. É ótimo tê-lo na nuvem, mas às vezes as pessoas podem não ter acesso à Internet. Talvez você esteja lá. Então, por que você os levaria para a nuvem quando tem a opção disponível em sua localização, por exemplo, talvez queira compartilhá-la internamente por causa dos NDAs, como eu disse. Portanto, existem poucos cenários em que você pode usar algo assim e isso é realmente útil. Então, tudo o que você precisa fazer é clicar aqui. Ele vai te mostrar um intervalo de páginas. Vou selecionar a faixa de pintura e selecionar minha loja desejada para que você possa desmarcar o que, marcar o que deseja fazer. Quero explorar e explorar os dois para que possamos simplesmente selecionar todos. Você pode ver que dois deles estão selecionados. E você pode ver o intervalo de páginas porque eu tenho duas páginas dentro da minha pasta. Você pode mostrar o painel da página, você pode mostrar para o norte, mostrar a barra de ferramentas. Você pode mostrar links para todas essas configurações sobre as quais falamos e acessamos. Ok, quando estiver pronto para fazer o download, o download levará um pouco de tempo. E dependendo da sua máquina, dependendo do seu projeto. Então, por exemplo, se você otimizou suas imagens, vai demorar um pouco mais. Se você usou várias páginas diferentes, vai demorar um pouco mais. Mas neste caso, como você pode ver, ele foi exportado muito rapidamente. Então, deixe-me colocá-lo em uma pasta. Agora deixe-me mostrar essa pasta, como ela se parece. Então lá vamos nós. Temos essa opção para um arquivo zip, clique com o botão direito do mouse. E eu vou extrair dois aqui e esconder isso só para que você possa ver um pouco melhor. Lá vamos nós. E extraiu esses ativos de forma sólida e se livrou desse arquivo zip. Na verdade. Livre-se dele pressionando delete. Lá vamos nós. E aqui temos todos esses ativos que são incluídos por padrão para vários SRP. Depois, temos as opções de dados, que são todas as imagens incluídas nela. E, obviamente, é muito importante que você nomeie suas camadas. Caso contrário, você vai acabar com um resultado como esse. Mas, basicamente, basta exportá-los como arquivos de espaço reservado. Quando você realmente compartilha isso com seus desenvolvedores, manterá os nomes das camadas que você postou. Finalmente, temos a página de índice, clique duas vezes nela e ela se abrirá como uma nova página e você poderá ver o que seus usuários verão dentro, digamos, do pacote de apresentação que você deseja mostrar a eles. Então, eles têm todas essas opções sobre as quais falamos anteriormente. Se quiser, você pode incluir alguns nós aqui. Você pode ocultar esses painéis. Você pode mostrar esses painéis. Você pode fazer o que quiser e vamos explorá-los uma última vez. Aí está. Isso nos levou a esta página. Os efeitos de passar o mouse ainda funcionam. Isso ainda funciona. Então, tudo está como estava aqui, mas é apenas uma versão portátil e mais, digamos, na qual você pode levá-la para onde quiser porque a tem armazenada em sua máquina. E é por isso que baixar protótipos é uma opção tão legal. Eu vou gostar e recomendo que vocês o usem o tempo todo. Parece que eu também estou fazendo isso. 17. Publishing Protótipos: Quando estiver pronto para publicar seus protótipos e movê-los fora de suas mãos para a organização em geral, por exemplo, ou simplesmente compartilhá-los com seus clientes, colegas de equipe, partes interessadas, investidores e quem quer que seja. É aí que a opção de protótipo de publicação entra em ação. E está localizado aqui , no canto superior direito. Mas talvez possamos brincar com algumas configurações. Talvez eu possa ajustar isso e, por favor, sente-se para acessar a página de fluxogramas jump animate. Vamos usar o non easing. Isso é bom. Então, eu só quero poder animar para essa página e você pode ver que, quando eu a seleciono, ela mostra que ela se anima em direção aos fluxogramas. Agora, quando eu seleciono meus wireframes, deixe-me pressionar Control ou Command S para salvá-los, clicar em Publicar, publicar no mock plus Cloud. Assim, você pode ver Anthropologist plus Cloud para colaboração on-line instantânea, transferência e verificação de dados em camadas. Você pode segmentar um projeto de nuvem, um exemplo de projeto, por exemplo, ou criar um novo. Nosso primeiro local do projeto. Tudo certo, OK, clique em Ok, e ele publicará esse projeto. Agora, mais uma vez, o mesmo líquido, todas essas outras coisas. Dependendo do tamanho do seu projeto, quantas imagens você tem, quantos ícones você tem, isso levará mais ou menos tempo. Então, dependendo do seu projeto, esse é o tempo que esse projeto vai levar N, especialmente a velocidade da sua internet. Assim, você pode ver seu projeto porque ele foi publicado com sucesso, como você pode ver. E isso vai levar você a simular mais o Cloud. Agora, aqui está, nossas novas páginas de projetos. Você pode ver detalhes e, basicamente resolver o que já criamos aqui são todos esses elementos, wireframes, coisas assim. Assim, você pode obter o código aqui para desenvolvimento. Então você pode mudar isso. E vai mostrar as aspas ou o que elas selecionarem, por exemplo, esta imagem vai me mostrar CSS, Objective-C, Swift e Android. E isso é ótimo porque você pode mudar para plataformas diferentes. Você pode ir para a tela cheia, recolher, visualizar e agora você pode baixá-la como uma opção separada. Você pode entrar no modo de apresentação se quiser apresentar isso aos seus clientes durante o processo de desenvolvimento. Então, tudo o que você selecionar aqui vai narrar e mostrar. Então, por exemplo, aqui temos essa opção que já escolhemos. Se eu clicar aqui, vou me levar aos fluxogramas, por exemplo, possamos apresentar esse modo de comentário. Então isso é ótimo porque digamos que eu queira adicionar um comentário aqui, talvez mudar essa cor para azul. Digamos que. Você pode tentar rotular os comentários. Você pode pressionar control enter para compartilhar este comentário. Então você pode mudar essa cor para azul. Ok? Então, quando eu passo o mouse e clico, se eu o vendi, posso resolvê-lo. E vai desaparecer. Mas se eu não resolvi isso, eu sempre posso voltar. Cor tão ruim que você pode mudá-la. E vamos realmente fazer isso muito rapidamente. Então mude isso para azul, digamos, compartilhei. Lá vamos nós. E agora você pode ver que temos isso em comum. Então, quem vem aqui pode passar o mouse, clicar e ver, mudar isso para azul. Ok, isso será feito. Lá vamos nós. Controle Enter para servir. E eu serei notificado em meu projeto de que alguém comentou. Eu posso ver esse comentário. Então eu posso ver o que fazer. E se eu fiz isso, posso responder a eles. Mas a revisão, eles podem revisá-la, podem ter a intenção. E há todo tipo de opções diferentes que eles podem fazer com isso. Por exemplo, se você passar o mouse aqui e clicar em Selecionar, verá que tem a ferramenta de seleção que permite mover esses elementos. E basicamente para selecionar elementos específicos. Você pode selecionar o texto e anotar morto. Você pode coordenar a marcação. Você pode fazer uma marcação de espaçamento e uma marcação de região se quiser marcar alguma região do seu design e ser extremamente específico sobre as alterações que você deseja destacar ou sobre as alterações que você deseja destacar e que você fez anteriormente. Eles ainda não avaliaram. Eles também podem fazer a mesma coisa com você. Então, basicamente, eles podem entrar aqui e dizer, por exemplo se eu selecionar e fazer o tipo, digamos, eles podem anotar esse tipo e dizer algo como, por exemplo essa topografia é muito grande ou muito escura, você pode alterá-la para mais clara, mas eles podem ser extremamente específicos sobre esta seção do seu design e sobre os elementos do seu design que eles querem que você mude. Se você voltar aqui, poderá editar este projeto ou ver os detalhes. E se você quiser ver todos os aeroportos em uma tela, você pode inserir o storyboard. Ele mostrará todos os seus aeroportos em uma tela. Você pode clicar e clicar duas vezes nas páginas para adicionar comentários e verificar as especificações. Então isso é o que eu já mostrei, ou você pode voltar para a lista de protótipos. Então, basicamente, essa é a facilidade de publicar seu protótipo. E uma última coisa: você também pode compartilhá-lo, compartilhá-lo de forma privada, compartilhar publicamente ou incorporar o projeto se quiser copiar o código e incorporá-lo em um site separado, por exemplo, o editor é ótimo se não estiver sob o NDA ou se você quiser obter algum feedback externo adicional ou compartilhamento privado, se quiser compartilhá-lo de forma privada dentro de sua equipe. Também peça perdão, para se tornar um membro do projeto, se você quiser adicioná-lo ao seu projeto ou, se não, você pode simplesmente copiar e compartilhar este link com eles. Meu pai. E quando eu abro uma nova guia na minha máquina, pressione Control Enter. Mas como eu já estou logado, só vai me mostrar uma versão diluída como está. Mas, basicamente, isso é algo que eles vão ver. Eles têm o design, têm a tarefa, o guia de estilo do recurso, a atividade, todos os tipos de coisas diferentes aqui. Mas é basicamente assim que você compartilha seu protótipo e o publica. E é muito importante que você faça isso porque deseja obter feedback adicional sobre seu design em cada projeto que você faz e não passar pelo RP combinado com o mock plus Cloud oferece essa ótima opção para fazer isso. 18. O que são modelos: Os modelos são uma ótima maneira iniciar seu processo de criação porque você, na experiência do usuário, o design nada mais é do que tarefas repetidas o tempo todo. Se você pensar bem, você está criando esses botões e esses elementos novamente. Então, por que não escolher usar um modelo criado por outra pessoa, ou você pode criar um modelo próprio e simplesmente reutilizar alguns desses elementos se você optar por criar elementos realmente separados e delicados. Na maioria das vezes, isso é chamado de sistema de design. E então você pode escolher usar sistematicamente esses elementos de design em seus designs. Como botões, como seletores de tempo, como entradas e coisas assim. Mas nesta parte do curso, falaremos sobre modelos, que são layout completo, layout finalizado para que outra pessoa tenha criado. E você pode simplesmente arrastar e soltar alguns desses elementos desses modelos para criar seus próprios layouts personalizados. A partir daí, você pode adicionar suas próprias cores, sua própria tipografia, suas próprias imagens , sua própria cópia e pode realmente personalizá-la para seu projeto específico. Você também pode alterar o logotipo, por exemplo, para o cliente em que você está trabalhando no momento. E você pode realmente personalizar esse modelo para você e para o projeto em que está trabalhando. Então, basicamente, esses são os modelos em poucas palavras, o buraco e o ponto principal Por que você usaria o modelo é para economizar muito tempo, porque, como eu disse, esses elementos estão se repetindo novo e o tempo todo em cada projeto. Então, por que não usar o poder do mock plus rP e os modelos que ele fornece. Afinal, todos esses modelos são gratuitos e são super fáceis de usar, e tudo bem. Eu vou te mostrar no próximo vídeo. Então eu vou te ver lá. 19. Escolhendo o modelo: Neste vídeo, vou mostrar como escolher o melhor modelo que funcionará para seu projeto específico, onde clicar, como fazer isso e todas essas coisas boas. Então, vamos começar. Então, aqui estamos de volta em nossa página inicial, em nossa página inicial. E aqui temos a opção de modelos. E ao longo do mock plus rP, você poderá ver essa opção para modelos posteriormente. Eu vou mostrar isso também. Quando você abre a interface em si, dentro da interface, você pode abrir modelos diretamente de lá. Mas aqui dentro da nossa página inicial, é aqui que eles estão localizados. Então, aqui temos amostras e modelos. Todos os recursos de design são totalmente personalizáveis, reutilizáveis e escaláveis. O que é muito importante porque, à medida que sua empresa cresce, à medida que você adiciona mais telas , mais páginas ou qualquer outra coisa, você poderá ampliá-las. Então, temos essas categorias. Então você pode curtir alguns desses modelos. Você pode simplesmente clicar aqui neste ícone de coração e ele será adicionado às minhas pernas. Você pode clicar na mídia e ela classificará diferentes páginas de mídia, comércio eletrônico, viagens, ferramentas sociais, gerenciamento, alimentos, notícias e kits de interface de usuário, o que você quiser. Agora, os kits de interface do usuário são especialmente importantes porque são realmente úteis porque são criados com a escalabilidade em mente. O que isso significa é que você obterá vários desses componentes diferentes que poderá usar conforme estão em seu design ou poderá adaptá-los para atender às suas necessidades. Por exemplo você pode escolher usar um elemento de um kit de interface de usuário, adicionar cantos arredondados a ele, adicionar planos de fundo, sombras e realmente personalizá-lo para se adequar à sua marca e ao que você está tentando alcançar com seu design. Ou se quiser, você pode usá-lo como está e simplesmente substituir as cores que são colocadas na cópia talvez adicionar algumas novas imagens. Então, tudo depende de você e de como você deseja personalizar esses modelos para que se adequem melhor ao seu projeto. Então, se voltarmos a tudo o que eu queria mostrar aqui, é novo e popular. Eu vou escolher, digamos, popular. E eu vou escolher, em vez de para todos os dispositivos, escolher entre dispositivos móveis e sites. E eu vou escolher sites nesse caso. Então, porque estou mostrando tudo aqui, vai me mostrar todos os tipos de opções e modelos diferentes. E você pode ver como cada um deles está organizado, como cada um deles está estruturado e, na verdade, há vários deles para escolher. Agora, o que você pode notar aqui é que temos wireframes, temos modelos. E a principal diferença entre os dois são as imagens. Dentro dos wireframes, geralmente, você não vê nenhuma imagem. Enquanto estiver dentro dos modelos, você o faz. Então, na verdade, depende de você como você deseja apresentar isso, porque os como você deseja apresentar isso, wireframes são melhores se você quiser criar rapidamente algum tipo de layout e apenas testar algumas ideias que você tem. Talvez obter algum feedback adicional do cliente no início do projeto possa ser explorado como as coisas serão dispostas na página. Então, talvez você possa trabalhar muito mais rápido se estiver trabalhando apenas com wireframes em vez de com imagens. Porque às vezes as imagens podem ser um pouco confusas, especialmente se elas não funcionarem com o nicho em que você está ou se seu cliente está. Portanto, na minha opinião, trabalhar com esses wireframes é muito melhor, especialmente no início do projeto, se você já tem suas imagens e as coletou em uma pasta, por exemplo , você pode até escolher wireframes e carregar as imagens que você tem diretamente em wireframes e depois trocar as cores posteriormente durante o processo de design. Mas, na verdade, tudo depende de você e de como você deseja estruturar seu fluxo de trabalho ao trabalhar com esses modelos simulados e de rP. Então, como eu disse, esses são os wireframes. Se rolarmos um pouco mais para baixo, você pode ver que algumas delas já têm imagens preparadas, e vamos abrir uma delas. Digamos que este, por exemplo, e se rolarmos para baixo, você verá que diz comprando kits de interface de usuário na web. Então você pode ver que está dentro de kits de interface de usuário, kits simulados e de compras de interface de usuário na web. E temos várias dessas opções diferentes aqui. Agora, em alguns deles, deixe-me realmente mostrá-los. Digamos que este. Você pode ver que essas são as páginas e diz 19 páginas no total. Mas se você contar essas coisas aqui, diz nove porque são nove pastas. Porque a equipe que criou isso, e você pode ver, foi mais uma equipe de PaaS que fez isso. Eles colocaram todas essas páginas em pastas separadas. Portanto, eles têm poucas opções domésticas, poucas opções de filtros de produtos, poucas opções de login. E é assim que você chega a essas 19 páginas no total, o que é muito útil quando você está criando versões diferentes de suas páginas. Então, por exemplo, seu cliente quer ver como o pequeno carrinho de compras ficará o pequeno carrinho de compras quando falhar, quando o cartão for recusado, ou quando não inserir algumas informações, ou quando concluir todo o processo de pagamento, como será e quando não o fizer. Então você pode realmente ver por que essas pastas são realmente uma ótima opção para simular repentinamente mais rP na próxima, você pode ver que temos apenas esses estilos diferentes. Assim, você pode escolher qualquer um desses estilos. Você pode personalizá-los, adotá-lo como quiser. Então essa é a diferença entre apenas páginas simples. E pastas em páginas específicas e versões diferentes de páginas específicas. Então, basicamente, você pode rolar aqui e ver que eles têm 19 páginas. É um arquivo RPI, então funciona perfeitamente em what plus rP. E você pode ver descrição mais detalhada aqui abaixo. Então, o que temos é um modelo com mais de 20 telas, mais de 30 componentes, o que é ótimo porque podemos reutilizar esses componentes um pouco mais tarde. Ajude você a criar diferentes sites de compras comerciais em minutos. Todas as páginas-chave necessárias, como compras na página inicial e assim por diante. E componentes como botões, controles deslizantes e muito mais são compactados e totalmente personalizáveis, que é ótimo porque você não quer perder muito tempo, cumpre todo o objetivo dos modelos e por que os usará para economizar muito tempo. Então, o que podemos fazer aqui é clicar em 50% só para ver como fica. Eu posso caber em duas larguras. Eu posso caber na tela, ir até 200 por cento só para ver a qualidade dela. Volte para aqui. Ou eu posso clicar aqui e ocultá-los se eu não quiser vê-los. Por exemplo, eu não quero ver esse painel de notas, então vou clicar aqui para expandi-lo. Ou se eu quiser esconder isso rapidamente e ver isso dentro, digamos que se encaixe na tela. Agora eu posso ver como fica na tela. É por isso que eles são super úteis e super importantes. Vamos voltar para 50% ou algo parecido. Então, para finalmente encerrar este vídeo sobre como usar um modelo como esse, basta clicar em editar e salvar. Então, quando eu fizer isso, isso vai me levar para uma nova tela. E você pode ver que está visualizando este projeto de amostra em simulação mais rP. Clique para salvar o projeto na equipe atual. Então, por que essa parte específica é importante e útil. Aqui, você pode obter uma prévia completa de como tudo fica dentro do plus rP. Então, aqui a prévia estava no próprio site, mas aqui está como ela fica diretamente na simulação mais rP. Então, o que eu posso fazer é voltar para onde escrito páginas aqui e abrir algumas dessas páginas para que eu possa clicar aqui para abrir o tipo de menu e digitar manualmente um, digitar três e pronto. E eu posso navegar rapidamente entre elas, mas não estou editando elas no momento. Então é assim que eles se parecem. Eu posso alternar entre eles. Então, 12.3, você pode ver facilmente qual é a diferença entre esses tipos. Ou eu posso ir até a página inicial e selecionar, por exemplo , casa de moda, como a casa de móveis é assim. Então, é assim que tudo isso se parece e você pode facilmente alternar entre eles. Você pode escondê-los, você pode mostrá-los. E aqui temos essas pranchetas separadas. Pranchetas que nos mostram a aparência dessa tela, por exemplo, este é o nosso controle deslizante. Podemos escolher entre essas diferentes opções de slides e escolher quais queremos integrar. Portanto, para poder usar esse modelo em seus projetos, tudo o que você precisa fazer é não importa em qual página você esteja ou em qual pasta urina, basta salvar o projeto na equipe atual. Então, o que você pode fazer é escolher entre espaço pessoal ou sua equipe. Nesse caso, vou escolher a equipe, porque, mais tarde, talvez eu convide outros colegas da minha equipe para me ajudar a adicionar esses modelos e me ajudar a transformar esse design em algo um pouco mais avançado. E, finalmente, o que eu vou fazer é bater, ok. Agora você pode escolher uma pasta de projeto diferente, se tiver criado uma, eu não criei na minha página inicial e você pode ver ali mesmo. Portanto, não tenho nenhuma pasta criada, mas posso criar uma nova pasta de projeto com muita facilidade e qualidade, por exemplo, site de moda ou algo parecido. Lá vamos nós. E ele estará localizado aqui. Então, quando eu fecho esse clique para salvar a equipe, garoto do site de moda, ok, e ele vai salvá-lo dentro dessa pasta. Então, quando eu voltar aqui mais tarde, ele está localizado dentro deste site e não vai bagunçar minha página inicial. Então, lá vamos nós. Agora que o abrimos, podemos editá-lo, e é isso que faremos no próximo vídeo. Vou mostrar como fazer algumas edições, como fazer algumas alterações, como ajustá-las e ajustá-las à sua marca e como realmente começar uma nova página e começar a criar do zero, mas usando modelos. Então eu vou te ver lá. 20. Personalizar o modelo: Agora que escolhemos nosso modelo, o que queremos fazer com ele, é hora de personalizá-lo e, para isso, é super simples fazer uma simulação mais rP. Então, deixe-me mostrar o que vamos fazer com esse modelo específico e como vamos ajustá-lo às nossas necessidades. Então, digamos que, como esse é um modelo de loja, vamos usar os elementos de loja para ele e criar nossa própria loja, por assim dizer. Então, quando eu seleciono isso, você pode ver que é 1.600 por 798. Então, obviamente, criaremos uma saída como essa. Mas antes de prosseguirmos, vamos primeiro criar nosso grupo. Então, quando eu clico em Criar grupo, é criado um grupo aqui. Então, eu posso movê-lo aqui, ou eu posso movê-lo um nível acima, o que basicamente vai empurrá-lo para fora. Clique com o botão direito, vá para cima. Então, ele vai colocá-lo no topo. E eu posso dizer algo como meu design ou design de loja, algo assim. Dentro disso, vou criar uma página e chamá-la de página inicial. E você pode ver que é 1.600 por 1080 porque, por padrão, a largura é o que importa, a altura. Não importa muito porque, como você pode ver, ele herdou esses tipos de elementos dessa página específica nesse grupo específico , como, por exemplo, largura e a altura da nossa porta. Então, o que vamos fazer nesse caso é mudar para o painel Camadas. E eu vou dizer algo como menu de conteúdo que foi excluído. A edição do componente o separará dos ativos ou você deseja mostrar que deseja continuar. Vamos primeiro explorar esse grupo e ver, então temos alguns ícones dentro. Então, basicamente, é para o conteúdo aqui abaixo. Mas o que me interessa é basicamente esse menu. Então, clicando duas vezes nele, desconecte-o. Sim, desagrupe-o. E o que temos aqui são todos os tipos desses diferentes elementos. E deixe-me diminuir um pouco isso para que eu possa ver um pouco melhor. O que me interessa é esse grupo e esse retângulo. Então, quando eu o escondo, você pode ver que é necessário para toda a largura. O que me interessa é primeiro o ID do grupo, então Control D, por exemplo, e eu vou chamá-lo de Top Nav, BG. Então, plano de fundo do Top Nav. E vou reduzi-lo em tamanho para algo assim. Até agora, 71 ou vamos usar 72 números redondos flexíveis. E vamos voltar ao topo. Vamos estender isso um pouco para que tenhamos um pouco mais de espaço. O que vou fazer é, antes de tudo, reduzir sua opacidade para que possamos ver o que está por trás dela. Então, vamos voltar para aqui. Vamos para o grupo. O que é esse grupo? Sim, é nisso que estamos interessados em alguns itens de NAV ou de navegação superior. Lá vamos nós. E dentro desses principais itens de navegação, o que temos é nosso logotipo, que substituiremos se for um projeto real. Então, temos esses três ícones assim. Depois, temos nossos itens de menu e temos o retângulo, que é o fundo oral deste projeto. Então, se eu fechá-lo, navegue por cima dos itens e mova-o direto para o topo. Então, algo assim. Lá vamos nós. Então, já falamos sobre itens suficientes e temos o Top Nav be G, que acabamos de criar. Deixe-me arrastá-lo para esse grupo. Então, vamos abrir o grupo. Vamos tentar movê-lo. Ou melhor ainda, talvez possamos desagrupar isso assim. Em seguida, selecione isso, pressione Control G e chame de top. Agora, o que vou fazer é clicar Controle C e depois voltar para minhas páginas. Selecione minha página inicial, clique em Controle V. E você pode ver que ela está colada aqui. O que eu vou fazer antes de tudo é pular para dentro daqui. Selecione esse texto onde diz Ativos. Vou adicioná-lo como meus textos. Então você pode ver que essa é a fonte, esse é o tamanho. Vou seguir em frente e ver isso como uma cor. É preto puro, então eu realmente não gosto da UPS, eu realmente não gosto disso. Então, deixe-me selecioná-lo e vamos mudar isso para algo um pouco mais realista para algo assim. Vou adicioná-lo como minha cor. Livre-se do preto puro. Selecione este, aplique a cor, aplique a cor. Lá vamos nós. E para esses ícones em particular, eu realmente não gosto dessa cor. Então, vamos mudar isso para algo agradável e vibrante. Talvez algo assim. Pronto, eu gosto. Então, vou clicar duas vezes aqui e chamá-la de cor do texto, só para saber onde está. E esta é a cor do meu ícone ou minha cor principal, ou como você quiser chamá-la. Assim, podemos aplicar as cores dos nossos ícones para que você possa ver imediatamente que obtemos a aparência que queremos. E não vou me preocupar muito com o logotipo, mas tudo o que você precisa fazer é simplesmente observar as dimensões. Então 136 com 36, você pode ter dimensões um pouco diferentes se quiser, mas é melhor. Como resultado, para usar as dimensões que eles já usavam, tudo o que você precisa fazer é ir aqui, onde diz Upload. Clique em Carregar, faça o upload do seu próprio logotipo. Desta vez, no formato PNG, por exemplo, pode funcionar muito bem. E simplesmente faça o upload para lá quando estivermos prontos com nosso menu principal. E quando eu mudo para as camadas, você pode ver a navegação superior copiando uma. Eu realmente não gosto dessa cópia, de estratégias de nomenclatura, então vou chamá-la de navegação superior. Lá vamos nós. Abaixo disso, vou adicionar alguns novos elementos. Então, vá até as páginas uma casa de moda caseira, como você mencionou, queremos usar esses elementos. Então, quando eu vou até as camadas, clique duas vezes aqui. Portanto, temos todos os tipos de opções diferentes. Então, temos o retângulo, temos a imagem, e eu quero usar um pouco dela. Não vou usar todos eles pequenos. Vamos primeiro selecionar vários desses elementos, algo assim. Porque eu realmente não os quero. Você pode pressionar 02 vezes para reduzir a opacidade apenas para que possamos ver com o que estamos trabalhando. E você pode selecionar alguns desses elementos restantes 02 vezes, para reduzir a opacidade deles e selecionar esse contêiner. Você pode ampliar um pouco, reduzir sua opacidade, porque eu não quero usar tudo isso. Tudo que eu preciso é usar apenas alguns deles. Então, por exemplo, eu gosto dessa opção de controle deslizante. Então, eu os usaria e apenas os selecionaria. Eu usaria esse texto porque gosto dele. botão Comprar agora funciona muito bem. E eu vou usar o retângulo e a imagem abaixo dele. Você pode desmarcar e verificar se essa foi a imagem que você escolheu. Parece que temos que fazer tudo de novo, mas isso importa. Então, vamos fazer isso. Você pode manter seu espaço enquanto navega para se mover para a esquerda, para a direita, para cima e para baixo. Então, vamos usar a loja agora e deixe-me realmente usá-los. Sim. Mas antes de fazer isso, deixe-me usar tudo isso. Clique em Controle C, volte para minhas páginas, volte para minha página inicial, pressione Controle V para colá-las no lugar. Lá vamos nós. E eu vou alinhá-los muito bem com aqui. E quando eu mudar para as camadas, vou adicioná-las ao grupo. Mas, na verdade, antes de fazer isso, deixe-me mudar para o Fashion Home e eu vou usá-los. Então, mude para as camadas, selecione-as e veja o que é. Lá vamos nós. Então, temos ícones e retângulos. Você pode ver isso. Então, vamos selecioná-los. Clique em Control C e volte para nossa página inicial Controle V. Pronto. Tudo o que eu preciso fazer realmente é alinhá-los bem aqui. Então, segure Shift, Seta Esquerda 123440 pixels, Shift Up Arrow um-dois-três-quatro para obter 40 pixels a partir daqui, ou você pode ajustá-los de acordo com sua preferência. Eu realmente não gosto do alinhamento disso, então vou posicioná-lo. Vamos ver o que podemos fazer aqui. Talvez eu possa alinhá-lo de forma um pouco diferente. Então, vamos ver, talvez algo assim funcione muito bem. Lá vamos nós. E talvez eu queira movê-lo um pouco para a direita. Então, talvez um décimo quinto funcione muito bem. E lá vamos nós. Nós seguimos em frente e criamos nosso próprio plano de fundo personalizado. Agora, o que você pode fazer aqui é selecionar sua imagem. E porque eu realmente tenho muitas dessas imagens aqui no meu computador. Eu costumo usar algumas coleções on-line. Então, talvez isso funcione muito bem. Mas digamos que eu queira substituir essa imagem. Então, o que vou fazer é chamá-la de imagem de herói. Venha aqui para a direita. Clique em Carregar, clique em Carregar. Vá para o banco de fotos, luz certa. Essa é a coleção que eu tenho que, por exemplo, algo como esse hit Open. Ela abrirá a imagem dependendo do tamanho dela. Vai demorar mais ou menos, por exemplo, e você pode clicar em OK. Ele vai esticá-lo um pouco para que você possa preenchê-lo, por exemplo isso vai preenchê-lo muito bem porque temos um retângulo na parte superior. Eu posso chamar isso de sobreposição de cores. Só para não saber o que é. E, por exemplo, se eu selecioná-lo, você pode ver que temos essa cor de preenchimento. Posso configurar o alfa para 40, por exemplo, ou algo mais dramático como 60, vamos ver. Algo como 50. Eu acho que na verdade vai funcionar muito bem. E lá vamos nós. Prosseguimos e criamos um botão separado. O que eles precisam fazer aqui talvez seja ajustar isso dentro das interações. Você pode ver que é inválido porque nos levará à página separada que criaremos em algum momento, por exemplo, para adicionar mais elementos a esta página, o que farei é simplesmente selecionar minha prancheta e estender até a parte estender até a inferior para ter um pouco mais de espaço, passando para páginas, passando para a página inicial. E agora vamos selecionar alguns desses elementos. Então, vou selecioná-los aqui na parte superior. Mudando para minhas camadas. E selecione-os da mesma forma. Então lá vamos nós. Acho que selecionei tudo o que precisava. Clique em Control C, volte duas páginas, camadas da página inicial. Aperte o controle V. Pronto. Bom. Clique em Control G para agrupá-los, e eu vou chamá-los, por exemplo de produtos promovidos, algo assim. E porque todos esses outros elementos estão espalhados por toda a nossa página, que vou fazer é simplesmente selecionar todos eles, como Então, pressione Control G e chame essa imagem de herói ou o que você quiser. Você pode mover essa navegação para baixo, movê-la para cima e ver como nosso site já começa a tomar alguma forma. Vou segurar minha tecla alt para medir. E você pode ver que isso é 160, o que é bom, e 80 do topo, o que é ótimo. E eu quero usá-lo. Depois, podemos voltar para a página inicial. E, por exemplo, eu posso simplesmente fazer a seleção de todos esses elementos, algo assim. E também podemos selecionar o rodapé. Clique em Control C, só para economizar um pouco de tempo. Pressione Control V mais uma vez. E lembre-se de que somos ATP. Então, vamos manter a consistência do nosso design. Vamos selecionar nossa prancheta clicando duas vezes nela e estender até o fim. Aí está. Criamos uma página, ajustamos uma página. E, obviamente, o que você fará é, digamos que você queira adicionar algo assim e editá-lo. Então, talvez em vez de recém-chegados, talvez eu possa ver a preparação para o inverno. Porque ela parece fria e com neve. Prepare-se para a magia do inverno. Talvez algo assim. Camisetas básicas, tudo bem. Então, vamos clicar do lado de fora e ajustar isso. Então, à venda neste verão. Sim, talvez aproveite os itens mais populares à venda. Algo parecido. Eu acho que isso vai funcionar muito bem. E você obtém a imagem completa, pode ir em frente e substituir essas imagens para poder clicar duas vezes para desenhar as duas propriedades. Você tem essa opção de upload. Então, o que eu posso fazer é clicar em Carregar, por exemplo, clicar para fazer upload e encontrar outra imagem. Talvez este tenha sido aberto. E mais uma vez, dependendo do tamanho da sua imagem, e eu sempre recomendo que você otimize suas imagens, o que quer que esteja fazendo, levará mais ou menos tempo para você fazer isso. Então aqui está. E eu posso clicar em OK, por exemplo, n é que você pode ver que ela substituirá a imagem original por esta imagem. Finalmente, o que precisamos é adicionar algo diferente aqui. Então, vou chamá-la, por exemplo, calças masculinas justas masculinas. Talvez. E talvez eu possa adicionar esse preço. Talvez possa ser 49, 99 ou algo parecido a esse preço. E você pode ver claramente o que isso fez. Mais uma coisa que quero observar é que quando você clica duas vezes dentro, você pode ver que está acessando esse modo de edição. Todo o resto está sombreado e tudo o que você está editando no momento é destacado. Além disso, o que você pode fazer é segurar a tecla Shift para restringir a imagem, se quiser, ou aumentá-la. Mas vou manter a consistência disso e colocá-la aqui. E, a propósito, gosto muito de como isso parece porque não faz muito sentido incluir calças. Próximos dois modelos. Então, vou manter o layout original como estava. Por que eles deveriam nos escolher? Você pode aplicar isso, você pode ajustá-lo. E, por exemplo, talvez eu queira aplicar essa cor de ícone no fundo. E agora selecione esta. Então é uma imagem e agora arraste e solte nosso dólar dentro. Você pode selecionar esses dois e garantir que estejam centralizados. E aí está, você pode ver como isso é simples de editar, como é simples de ajustar. E, o mais importante, você pode selecionar esses elementos, pressionar Control G e chamar de frete grátis. Em seguida, você pode agrupar esses controles G pagamentos iguais. E você entende tudo. Assim, você pode agrupá-los e ajustá-los como quiser. Vai ser bem simples para você organizá-lo. E então, simplesmente, você pode pegar todo esse conteúdo, pressionar Control G e chamá-lo, por exemplo, por que escolher isso? Porque é apenas minha preferência e eu sempre gosto de fazer isso. Tive a sorte de selecionar esses elementos e colocá-los em grupo, organizá-los bem. Então eu sei, e meus colegas de equipe saberão mais tarde quem criou o que fizemos, o que alcançamos e onde tudo está organizado em determinados momentos. É por isso que gosto de nomear minhas camadas, meus grupos e manter as coisas organizadas. Então, mais tarde, quando as coisas ficam maiores, quando os prazos ficam mais curtos, tudo está bem organizado e todos estão na mesma página, o que precisamos fazer e de onde paramos na vez anterior. Portanto, se seguirmos adiante, você poderá ver alguns produtos hoje. Você pode mudar algo assim para o nosso máximo. Um produto popular. E o que vou fazer nesse caso é selecionar isso, ter certeza de que está centralizado. Então, quando eu estou digitando, ele vai se estender em cada lado. Lá vamos nós. Nós temos essa opção. Então, o que vou fazer aqui talvez seja adicionar um pouco de fundo. Ou talvez vamos ver a imagem. Essa imagem. O que eu posso fazer é adicionar uma sombra rápida, então algo como 610 e depois 20 para o desfoque. E talvez ajuste o Alpha para que não fique completamente preto, mas é algo assim. Pronto, só para adicionar um pouco de sombra ao redor. E talvez, enquanto estamos nisso, talvez possamos adicionar algumas opções diferentes. Então, talvez eu possa usar dez para o raio do canto e me certificar mudar esse retângulo também para virar, porque ele cobre a parte superior da imagem. E agora você pode ver que temos essas belas esquinas arredondadas em vez de esquinas, se isso é algo que você está procurando. Agora, aqui o que podemos ver são todas essas informações dentro do nosso rodapé. O que eu faria é obviamente substituir isso e alterá-lo. Então, vamos ver o que temos aqui. Temos homens, mulheres e crianças. E eu realmente não gosto de como isso é centralizado. Então, eu vou realmente selecionar tudo assim e vir aqui e certificar de que tudo esteja centralizado, assim. Então, quando eu amplio, você pode ver que tudo está centralizado. Agora, se você quiser que esse seja o seu rodapé, você sempre copiará e colará na parte inferior. Mas vou continuar como está porque isso é um componente. Vou clicar para abri-lo e editá-lo. Então, o que eu vou fazer é talvez você possa mudar isso, o que diz. Você, você pode ver as compras on-line. Então, talvez vamos ver o contato de informações. Então, talvez você queira mudar isso, digamos que armazene em meu site.com ou em qualquer linha direta que você possa escolher. Então, digamos número de telefone, telefone. Talvez você queira adicionar algum telefone adicional abaixo ou algo assim, talvez um endereço, o que você quiser, você pode ajustá-lo. E, finalmente, aqui temos algumas opções diferentes e alguns ícones diferentes. Assim, você pode substituir facilmente esses ícones. Você pode adicionar os seus, você pode trocá-los. Você pode fazer o que quiser com eles. Por exemplo, talvez esta loja não tenha LinkedIn. Assim, você pode se livrar do LinkedIn e selecionar esses dois, simplesmente empurrá-los e ver que 31 pixels é a distância entre eles e você pode ajustá-los facilmente. Nesse caso, o que podemos fazer é simplesmente selecionar todos eles da mesma forma. Então, vá até nosso painel de ativos e selecione a cor do ícone, porque lembre-se que essa é a cor do ícone que escolhemos para isso. Mas também selecionamos este, garantir que seja parafuso. E certifique-se de que estamos realmente usando essa fonte para essas opções aqui. Lá vamos nós. Portanto, temos a mesma fonte de antes. Eu vou usar negrito. Eu vou por algum motivo não mudou lá e lá vamos nós, ousados. E nós temos um parafuso. Agora que adicionamos dívida, o que podemos fazer é adicionar essa opção aqui. Lá vamos nós. E você pode simplesmente aplicar essa opção em negrito. Lá vamos nós. Agora, quando você o adiciona, esse parafuso, ele o adicionará ao seu design. Agora, finalmente, o que eu quero fazer é selecionar esses três e talvez adicionar uma cor diferente a eles. Portanto, não é tão óbvio, talvez algo assim. Acho que está muito mais legível do que antes. E vamos ver, temos essa cor. Vou adicioná-lo às minhas cores. E eu vou chamá-la, por exemplo, cor do parágrafo. Assim. Vou selecionar esse parágrafo e aplicar a cor do parágrafo a ele. Então você entendeu tudo. Talvez eu possa selecionar isso e aplicar esse negrito, mas não acho que funcione muito bem. Mas você pode simplesmente ajustá-los e aplicar o que quiser com eles. Então, esse, eu realmente não gosto da aparência. Então, talvez possamos até mesmo movê-lo para fora da pasta. Então, vamos ver por que nos escolher, clique com o botão direito do mouse e desagrupe. Em seguida, posicione isso para ficar no centro. Lá vamos nós. Controle G, e então por quê? Escolhe-nos? Ótimo. Então agora eu posso selecionar esse controle G, os produtos mais populares. Então eu posso selecionar esse controle G, e talvez chamá-lo. Vamos ver por que eu não controlei o grupo G. Pronto. Você pode chamá-lo de CTA, por exemplo, para call to action. E posso agrupar nosso novo rodapé porque lembro que o desagrupamos anteriormente. Então, Control G, vamos chamá-lo de Footer, vá. E o que nos resta são todos esses elementos no topo. Então, vamos ver. Ok, então para você, selecionado para você assim. E vamos verificar. Agora você pode ver que estamos muito mais organizados do que antes. que podemos fazer é começar do topo. Portanto, temos a navegação superior, você pode movê-la para cima. Imagem do herói. Em seguida, promovemos produtos selecionados para você. Lá vamos nós. Então nós temos y, você nos escolhe. O filtro vai cair muito. Controle de um call to action, dos produtos mais populares e do rodapé. Agora, se eu quiser criar uma nova página, digamos que eu não sei, cliquei nessa camiseta ou qualquer outra coisa e a abri, tudo que eu preciso fazer é simplesmente encontrá-la aqui. Então, vamos entrar nos detalhes do produto e ver o que temos. Então lá vamos nós. Temos exatamente essa camisa que vamos procurar. E temos todos os tipos dessas opções diferentes como uma placa de arte secundária. Então, temos a descrição, temos as avaliações. E é assim que as avaliações parecem, e eles usaram portas abaixo da média para fazer isso. E aqui você pode ver que temos essas duas opções. Então, gostei muito do que eles fizeram aqui. Assim, podemos fazer o mesmo em nossa segunda página. Então, dentro do design da nossa loja e da nossa página inicial, o que eles podem fazer é colocá-la dentro da pasta. Dentro disso, o que podemos fazer é criar outra página. Desculpe, não é um grupo. Eu queria dizer outra página. Lá vamos nós. E vou chamá-lo, por exemplo, detalhes do produto. Lá vamos nós. E tudo que eu preciso fazer aqui é basicamente começar a copiar e colar elementos da minha página inicial. Então, agora vai ser muito mais simples fazer isso, então vamos pegar isso, esse e esse controle C. Mude para o controle de detalhes do produto V. Pronto. E eu preciso estender meu aeroporto um pouco para algo assim. Lá vamos nós. E vou até os detalhes do produto e selecionarei tudo o que você vê aqui. Então, vou selecionar tudo isso, clicar em Controle G, mudar para as camadas e chamá-lo, por exemplo , detalhes do produto, Controle C, clicar em Páginas. Volte para o controle de detalhes do meu produto V. Pronto. Mude para as camadas. Sempre diz o botão Copiar, não se preocupe com isso. É só porque você o copiou de outra página. Então, a laranja a fazer é clicar duas vezes e simplesmente renomear esses detalhes do produto. Lá vamos nós. Algo parecido. Copie e mantenha as coisas organizadas e organizadas. Porque às vezes seus clientes perguntam a você, essa é uma cópia do que você copiou de algum lugar on-line e depois precisa explicar a eles. Não, não. Acabei de copiá-lo de outra página. Então, o que precisamos fazer, finalmente, é voltar aos detalhes e copiar isso, que, como você pode ver, é o painel de conteúdo. Dentro desse painel de conteúdo, temos U1 e U2. Você pode ver que isso é V1, isso é VW dois. E se você clicar duas vezes, você pode ver como você pode verificar entre elas e o que você pode fazer com elas. E, claro, interações já foram adicionadas para isso. Assim, você pode se ajustar facilmente entre eles. Então, se eu clicar em Controle C para copiá-lo, volte para minhas páginas, volte para o controle de detalhes do meu produto V. Pronto. E lembre-se de que usamos AT, então talvez possamos usar 100. Então sólido ainda é 123. E se eu me esconder, se eu passar o mouse e selecionar Alt e clicar com o botão esquerdo, você verá que estou 100 na barra de navegação superior. E vamos mudar isso para o painel de conteúdo aqui. Lá vamos nós. E, basicamente, o que vou fazer é simplesmente ir até Exibir e selecionar esses Controles C. Volte aos detalhes do produto Control V e verifique se eles estão localizados aqui. Então, eu vou apenas posicioná-los por aqui. Lá vamos nós, bem organizados. E vou selecionar todo o meu conteúdo e direcioná-lo para que seja 100 cliques duplos. E lá vamos nós. Então, agora que temos isso preparado, tudo está como deveria ser. Obviamente, você fará mais algumas mudanças. Então, digamos que esse ícone dentro dessa mudança para as Propriedades, você pode ver que é um ícone. Então, mudando para a cor do ícone, se esse é o estilo que você deseja escolher, talvez essa venda não seja algo que você goste. Você deseja ajustar esses tamanhos e tipos de fonte, por exemplo, coisas assim. Então você pode fazer tudo isso. E, crucialmente, quando você clica em pré-visualização aqui, quando eu rolo para baixo, você realmente não vê isso porque precisamos conectá-lo. Mas você pode ver a prévia. E quando eu volto para a página inicial, você pode ver a página inicial. Agora, isso é exatamente o que criamos, isso é exatamente o que adicionamos. E no próximo vídeo, eu vou te mostrar como ajustar e criar essa interação para realmente se integrar entre elas. E talvez possamos adicionar ao carrinho, talvez possamos adicionar um pequeno efeito de passar o mouse. Então, nos vemos lá. 21. Adicionando interações aos modelos: Adicionar interações aos seus designs pode realmente dar vida a eles, porque eles não são apenas designs estáticos. Você adicionará um pouco de vida, um pouco de emoção e um pouco de narrativa nacional aos seus designs para que seus espectadores, clientes e desenvolvedores entendam o que você quis dizer com isso no que está falando em seu design. Então, vamos continuar de onde paramos na lição anterior e deixe-me mostrar como adicionar algumas interações básicas ao mock plus rP. Então, aqui está a página de detalhes do produto, mas eu realmente quero começar pela nossa página inicial. Portanto, quero que meus usuários possam selecionar essa imagem e depois acessar os detalhes do produto. E então vamos abordar algumas dessas opções. Então, para fazer isso, vou direto para aqui e digo, vá para a primeira página. Eu realmente não gosto de como isso é estruturado. Então, eu vou editá-lo. E eu vou clicar em Saltar página. E vou direcionar e voltar aqui para ver os detalhes do produto sobre emissões, nenhuma. Então, vamos ver se conseguimos isso. E então vamos clicar rapidamente na pré-visualização aqui. Então, quando abre essa prévia, posso rolar até esta imagem. Quando eu clicar nele, ele vai me levar para esta página. Então, tudo isso funciona muito bem. Então, quando vamos aos detalhes em si, o que eu quero ajustar aqui são apenas duas coisas. Uma coisa é o botão Adicionar ao carrinho. Quero adicionar um efeito rápido de passar o mouse a ele. E então eu quero acessar esse painel de conteúdo para adicionar meus efeitos de focagem. O que eu vou fazer é clicar duas vezes no meu botão. E então você pode ver que temos todos esses comandos, mas eu realmente quero adicioná-lo, esse botão. Então, vou selecionar o mouse para passar o mouse neste caso. E eu vou para Propriedades aqui mesmo. Para o mouse, passe o mouse sobre si mesmo. Em vez dessa cor de preenchimento, vou alterá-la para essa cor do ícone, por exemplo, e no próprio texto. Então, vamos ver, o texto estará aqui. Lá vamos nós. Então, vamos passar para o normal. Vamos passar o mouse para passar o mouse. Vamos visualizar rapidamente e ver o que fizemos. Então, quando você passa o mouse aqui, você pode ver que ela muda a cor de fundo e você pode fazer isso com tudo isso. Então, por exemplo, isso não tem nenhuma cor, exceto o próprio ícone. Então, quando os usuários passam o mouse sobre ele, talvez esse ícone possa mudar de verde para roxo ou algo parecido, como fizemos aqui. Mas ainda temos problemas com esse painel de conteúdo porque você pode ver que ele não mostra nenhum conteúdo dentro dele. Então é aí que alguma mágica precisa acontecer e nós realmente temos que conectar parte dela. Então, se ampliarmos um pouco, você pode ver que nascem inválidos. E isso porque nós o copiamos dessa visão específica. E aqui, nessa visão, tudo funciona muito bem. Assim, você pode ver a visualização do YouTube. Assim, você pode renomeá-los como quiser. Se voltarmos às nossas células T, o que vou fazer é clicar duas vezes aqui. E se você puder ver, temos uma prancheta inválida. Então, vamos nos livrar disso simplesmente clicando em Excluir. Em seguida, vou adicionar aos nossos quadros. E você pode vê-los aqui. Agora, em vez disso, o que eu quero fazer é que isso será uma descrição. A próxima serão as avaliações. Tão rápido. Descrição. Segure a barra de espaço e clique duas vezes nas avaliações. Lá vamos nós. E agora, se eu voltar aqui, você pode ver que ele foi atualizado em tempo real para descrição e avaliações. Então, tudo que eu preciso fazer aqui é simplesmente copiar o conteúdo daqui. Controle C. Opa, desculpe, eu acidentalmente selecionei a ferramenta de caneta. Então você pode se livrar disso que eu criei. Então, vamos voltar mais uma vez. Controle C. Vá para a minha descrição control V. Aí vamos nós, limpos e limpos. Então vá direto para aqui, controle C e cole dentro dos meus comentários. Agora, como eu já usei esse conteúdo, não preciso dessas portas abaixo da média, que são apenas copiadas. Então, posso simplesmente posicionar minha descrição aqui e usar minhas avaliações. Posicione-o aqui mesmo. Agora, se eu voltar e visualizar isso mais uma vez, você verá que está aqui, mas quando eu clico aqui, nada realmente acontece. Então, como posso alternar entre esses dois e como posso fazer com que eles mudem entre essas duas partes de conteúdo? Então, para fazer isso e voltar aqui, mais uma vez, tudo tem a ver com esse painel de conteúdo. Então, se eu mudar para as camadas, selecione-as, você poderá ver seus nomes. Neste caso, é chamado de painel de conteúdo um. Então é isso que precisamos atingir. Então você pode ver que ele já tem algumas interações aqui mesmo nas avaliações e na própria descrição. Então, basicamente, o que precisamos fazer é quando os usuários clicam nas avaliações, para levá-las às avaliações, quando clicam na descrição para levá-las volta à descrição. Como fazer isso? Basta acessar o padrão de interação. Selecione suas avaliações aqui e você verá que os comandos já foram definidos. Então, tudo o que você precisa fazer é vinculá-lo à nova página que acabamos de criar. Então clique em Editar gatilhos, clique, tudo bem. Selecione o alvo. Então, na prancheta principal, que é essa saída aqui, eu posso abrir, localizar meu painel de conteúdo, clicar lá, alternar conteúdo. Então, o conteúdo, eu preciso selecioná-lo para acessar as avaliações. Porque quando eles selecionam avaliações, preciso que elas acessem as avaliações, porque são avaliações, vou selecioná-las aqui mesmo. Você pode escolher a animação que deseja. Você pode deslizar para baixo para a esquerda e para a direita e escolher a atenuação ao escolher a animação. Então, deixe-me mostrar, digamos que deslize para a esquerda e você terá todas essas opções. Então, eu vou simplesmente não escolher nenhum. Bata, está bem? E então você precisa fazer o mesmo com este. Então clique nesses três pontos aqui. Clique em Editar. Clique em, selecione o alvo. Vou escolher o painel principal de conteúdo da prancheta, mesmo que fizemos na vez anterior. E você pode ver que você pode ter essa opção de loop contínuo, se quiser. Mas eu não vou porque estamos na descrição, queremos direcionar a descrição. Então selecione a descrição aqui. Clique em OK, mais uma vez, você pode escolher todos os tipos de opções diferentes aqui. E você também tem gatilhos diferentes. Então você tem cliquish, você tem que clicar duas vezes, clicar com o botão direito do mouse para baixo, para cima, mouse enter, mouse sair. Mall center significa isso. Folhas do mouse significam esse Slider flúor Zoom, todo tipo de coisas diferentes, mas vou usar o mesmo clique básico de segurar, pressione OK, para confirmar isso. E agora vamos clicar em Visualizar em nosso quadro principal, nosso quadro também, você pode chamá-lo do jeito que você o chamou aqui. Por isso, chamamos isso de detalhes do produto. Assim, você pode clicar duas vezes nos detalhes do produto. Tudo será vinculado porque você não alterou nenhum link e não fez nada a mais. Agora você pode ver que ele está localizado aqui. Então, clique nas avaliações. Lá vamos nós. Você tem duas avaliações. Talvez devêssemos mudar isso para três avaliações porque temos três revisores. E, obviamente, você pode alterar essa descrição. Você pode brincar com isso e fazer o que quiser. Uma última coisa que eu quero fazer é talvez, quando clicarem no logotipo, isso os leve para a página inicial. Então, vamos adicionar isso rapidamente. Vou até aqui, selecioná-lo aqui selecioná-lo e depois clicar e arrastar até minha página inicial. Portanto, o gatilho serão os comandos de clique. Vai pular para essa página. Janela aberta e atual. Não quero que ele abra em nenhuma animação adicional de Windham. Então, talvez eu possa fazer algo com isso. Talvez se alimente. Não sei, talvez isso funcione e resolva o problema. Vamos ver. Sim, vamos usar o desbotamento. A atenuação será facilitar a duração da animação, dois milissegundos a segundos, e depois clicar em “Ok”. Agora, quando eu clico na pré-visualização, isso ainda funciona. Tudo funciona muito bem. Você tem que acertar o alvo. E então, quando você passa o mouse, você pode ver que ele muda da seta para o ponteiro. Você pode clicar lá e ela o levará a esta página específica, com um bom efeito. Você também pode transformá-los em estados de flutuação e talvez possamos fazer exatamente isso. Então, volte para a página inicial e selecione-os. Mude para as camadas e teremos que fazer alguns ajustes básicos. Então, talvez os produtos promovidos, talvez eu possa até mesmo desagrupá-los por enquanto para poder agrupá-los. Então, Control G. Isso vai ser mágica de inverno, desse jeito. A próxima será uma camiseta básica. E, finalmente, este último serão itens à venda ou à venda ou algo parecido. Então, eu vou agrupar todos eles. E não me lembro como os chamamos, mas talvez da seção promocional da seção promocional, algo assim. Agora, o que vou fazer com este é adicionar interação ou adicionar um novo estado ao passar o mouse, por exemplo dentro do mouse, posso abri-lo alterná-lo para o painel Propriedades. Então, o que você pode fazer é brincar com eles. Você pode incluir sombras, bordas e coisas assim. Mas tudo o que me interessa é isso. Aqui. Vou apresentar os loops. Mas primeiro selecione o mouse sobre o mouse. Aqui, vou introduzir um pouco mais de opacidade em algo como, não sei se 50. Lá vamos nós e mudamos para o normal. Em seguida, selecione este. Camisetas básicas. Vou selecionar o mouse sobre o mouse. E dentro dele, vou selecionar o mouse para ele e alterná-lo para 50 por cento. Certifique-se de sempre voltar ao normal, feche-o. E, finalmente, temos a opção de venda. Então, vou selecionar esse mouse retangular e me certificar de alterá-lo para 50 por cento. Você pode, é claro, mudar a cor, se quiser. Assim, podemos escolher essa cor do ícone, por exemplo, que pode ser a cor do mouse. Volte ao normal, selecione este também, passando para o mouse, então podemos selecionar essa cor de 40 ícones. E vamos nos certificar de que deixamos isso normal. Lá vamos nós. Selecione este novamente, escolha a mudança de cor do ícone do mouse para normal. Lá vamos nós. E agora que isso está concluído, o que podemos fazer é fazer uma prévia rápida, ver o que fizemos até agora. E uma vez carregado, você pode fazer isso com eles. Você pode fazer essas flechas saltarem um pouco. Você pode movê-los um pouco para cima. Você pode adicionar usando nossos quadros, como acabei de mostrar. Você pode adicionar isso como um painel de quantidade. Depois, você pode conectar diferentes placas de subarte com slides diferentes, com produtos diferentes e coisas assim. Talvez você possa mudar isso ao passar o mouse. Mas você pode ver quando eu passo o mouse sobre eles, você pode ver o que eles fazem. E o poder é um incidente. Então, funciona muito bem. Mas você também pode fazer com que, talvez, nessas imagens, você possa esclarecê-las um pouco. Então, quando você passa o mouse sobre qualquer um desses, ele apenas amplia um pouco. Talvez a morte possa ser uma coisa para tentar. Então, talvez nesta imagem que já escolhemos aqui tenhamos a imagem, temos o mouse passando o mouse sobre o mouse. O que podemos fazer é adicionar diferentes interações. Eu posso selecionar meu alvo. Então, eu teria que escolher esse manualmente. Portanto, é imagem PNG. Então, talvez possamos chamá-lo de homem, modelo ou algo assim, apenas para que possamos diferenciá-lo um pouco. Então, dentro daqui, vamos tentar encontrá-lo. Não. Lá vamos nós. modelo louco aciona. Vamos ver, substituído pelo mouse, digite, Zoom. Em seguida, podemos adicionar outra interação. Se voltarmos às páginas, acesse os detalhes do produto. Então, em vez de inserir o mouse, vou adicionar um clique em Página, pular. Eu conheço, nenhum, bati. Ok, e aí está. Agora temos duas interações. Então, vamos testá-lo rapidamente e ver o que fizemos. Esperamos que o mouse enter nos mostre esse efeito de passar o mouse. Assim. Você pode ver como isso parece. Então, ele só aumenta um pouco de tamanho. Quando você clica nele, ele ainda o levará a essa página específica quando você tiver todos esses elementos que acabamos de adicionar e editamos. Então, é muito simples trabalhar com isso. E você pode ver isso simplesmente voltar. Ele volta ao estado original em que estava. Mas quando você acessa o mouse enter, você pode clicar em Editar. E talvez, talvez possamos mover esses comandos c. Recuperação automática. Acho que funcionará muito bem porque a recuperação automática o levará de volta ao local original de onde você parou. E vai te mostrar aquele lugar original e que você editou. Então, basicamente , isso serve para revisar nosso painel de interação e o que você pode fazer com as interações. E no próximo vídeo, abordaremos a publicação nossos protótipos e como visualizá-los e quais são algumas das nossas opções que temos dentro do mock plus rP? Então, nos vemos lá. 22. Pré-visualização e publicação de protótipos: Quando você quiser visualizar seus protótipos dentro do more plus rP, há algumas opções que você pode explorar e também quando quiser compartilhar esses protótipos e publicá-los para que outras pessoas vejam quais estão fora da sua equipe, também existem algumas opções. Então, deixe-me te mostrar. Quando você vai até aqui, você tem seu modo de pré-visualização. Assim, você pode clicar nessa seta para começar da página inicial ou da página atual. Se eu selecionar isso, ele começará na página atual de onde paramos. E você pode ver, como se todas as nossas interações ainda funcionassem, como mostrei no vídeo anterior. Mas você também pode selecionar isso para começar na página inicial. Então, tudo o que você definir como sua página inicial é onde ela vai começar. Por fim, quando quiser pré-visualizar, basta clicar nessa seta. Agora, em vez do modo premium, também temos algumas opções. Então, aqui você pode selecionar como deseja que isso seja ampliado. Você pode caber muito molhado, você pode caber na tela. Oregon se ajusta à largura. Ou você pode ampliar e 200 por cento, ou você pode fazer o que quiser com ele. E agora temos a opção de tela cheia, que será essa opção. Mas eu realmente não gosto porque, na verdade, preciso ampliar um pouco até 100%. E então eu preciso entrar em tela cheia. E isso é basicamente o que seus usuários verão como um site em tela cheia. Obviamente, tenho uma tela um pouco maior, então tenho essas margens no lado esquerdo e direito. Mas se você tiver, por exemplo tela de laptop, porque lembre-se de que fizemos isso com 1.600 pixels de largura. Vai ocupar a tela inteira. Portanto, lembre-se dessas coisas quando quiser sair de casa, basta pré-visualizar. Você pode ver que isso volta quando eu clico e vai me levar a esta página. No entanto, o efeito funciona. Então, tudo o que fizemos anteriormente, funciona bem. E quando eu clico, ele vai me levar de volta para a página inicial. Se eu quiser escapar, eu simplesmente pressionaria Escape no seu teclado e isso o levaria de volta para aqui. Agora, a seguir, temos esses painéis à esquerda e à direita. Você pode ocultar o intestino da página e não mostrar quantas páginas você realmente tem. E você tem um pouco mais de espaço para explorar o protótipo. E então você pode mostrar suas notas agora, nós não adicionamos nenhuma nota aqui. Mas, basicamente, você pode anotar e dizer algo como quando será para todo o projeto. Nesse caso, os nós podem ser algo como você gosta de estilo e cores minimalistas? Devo adicionar mais cores ao design? Aí está. Você pode pressionar Enter duas vezes n Então, por exemplo, digitando algo como Por favor, envie-me a imagem de volta. Falamos sobre linhas horizontais que talvez não tenham compartilhado essas imagens, mas você pode pressionar Controle S e pressionar Controle R ou Comando R. Se você estiver dentro do Google Chrome para atualizar esta página. E aí está. Você tem suas anotações de página. Se você quiser se livrar dos nós da página, basta selecioná-los aqui. Você pode selecionar um, como Então, pressione backspace para se livrar dele. Ou você pode selecionar outro clique em Control S e pressionar Control R Mais uma vez aqui para atualizar a página e ver as mudanças acontecendo aqui. Se você não quiser ver o nariz cair porque no momento não temos nenhuma nota. Você pode clicar ali mesmo para se livrar dele. Então você tem suas opções de compartilhamento. Assim, você pode compartilhar o link de pré-visualização. E você pode optar por incluir ou remover algumas dessas opções, dependendo de para quem as está enviando. Se for um cliente, por exemplo, você quer que ele possa ver todas as opções. Mas se houver alguns usuários, talvez você queira ocultar algumas opções, como, por exemplo, áreas de links. Você pode marcar ou desmarcar a opção Mostrar área de clique. E isso é útil porque você quer que eles possam clicar no link ou descobrir onde estão os links por si mesmos. Você pode até mesmo definir senhas se quiser proteger seus projetos e protótipos. E você não quer que todos os acessem, mas apenas algumas pessoas. Então, quando estiver pronto, você pode clicar em Copiar e enviar este link para eles e eles poderão acessá-lo. Além disso, algumas opções que você tem são essas. Então, basicamente, o que acabamos de falar área do link você pode mostrar a área do link, mostrar o efeito de passar o mouse mostrar essas coisas ou ocultá-las, dependendo se você está fazendo alguns testes ou se está fazendo alguns anteriores. Então, basicamente, isso é para o premium e, finalmente, para a publicação. Quando você quiser publicar seu protótipo, digamos que você esteja pronto. Você está feliz com isso. E digamos que eu não goste desses. Talvez eu queira excluí-los porque só queria poder usar as coisas que criei. E não quero necessariamente que meus clientes vejam que posso usar algum modelo ou algo parecido. Então, eu vou me livrar disso e tenho meus próprios designs que acabaram de ser criados. Fazer um check-up rápido será bom porque você sempre quer ter certeza de que, antes de prosseguirmos com isso, se tudo funcionar, tudo funcionará aqui. Se eu clicar aqui, funciona aqui. Então, tudo está como deveria, mas basta fazer uma verificação rápida antes de realmente publicar. Mas quando estiver pronto, você pode clicar em publicar e segmentar ou selecionar um novo projeto. Então, aqui temos nosso primeiro projeto, por exemplo, ou amostra de projeto, mas eu quero criar um novo projeto. Então, em vez disso, que é o nome de um kit de interface do usuário. Vou chamá-lo de design nítido porque é nisso que eu localizei. E eu posso selecionar tudo como minha folha de localização. Ok, crie uma loja, clique em Ok, e ela vai publicá-la na nuvem mock plus. E eu poderei trabalhar com desenvolvedores, com colegas de equipe ou com partes interessadas neste projeto. Você pode fechar ou optar por ver o projeto aqui. E isso vai te mostrar isso. Então, aqui temos kits de interface de usuário para compras na web. Temos Exibir detalhes. Vamos clicar em Exibir detalhes para ver o que temos. Portanto, temos a página inicial e os detalhes do produto, então temos a descrição e as avaliações como subpranchetas dentro dela. Então, aqui temos que para esta seção específica , na qual você pode fazer aqui você pode postar notas para que seus clientes possam responder algumas notas. Então, talvez eu possa, talvez eu queira adicionar alguns comentários aqui. Vamos ver. Você gosta da cor amarela dos botões? E você pode pressionar control enter para enviar esse comentário. E você pode ver isso como não resolvido ou pode resolver com isso aqui. Você pode fechá-lo se estiver concluído e coisas assim. E seus clientes poderão ver isso em tempo real e responder em tempo real. Então, quando clicarem, poderão postar uma resposta aqui. Você pode ver essa resposta aqui. notificação volta para aqui e simplesmente adicionei a pior solução para esse problema. A seção de desenvolvimento foi criada especificamente para desenvolvedores. É um lugar onde os desenvolvedores podem obter tudo o que precisam para começar a codificar o mais rápido possível, como as especificações, como o código CSS, como trechos dos valores hexadecimais das cores e muito mais. Portanto, temos as anotações dos ativos, link para o sistema de design, switch de plataformas e cores para surdos. Então, o que tudo isso significa é que quando você começa a passar o mouse, você pode ver as distâncias entre todos os seus elementos, o que obviamente é crucial para HTML e CSS. Mas digamos que eu queira escolher essa imagem. Posso obter o código como CSS, Objective-C, Swift e Android. Eu posso ver as dimensões aqui. Então x, y, posições, largura e altura, raio e opacidade. Então, eu posso ver tudo isso, e tudo está localizado dentro do meu costume. Você pode ver web h5, que é o tamanho, iOS, Android e personalizado. E eu posso fazer isso em pixels. Eu posso fazer unidades personalizadas aqui, para que eu possa escolher entre pixels, pontos, DP e assim por diante. E eu posso confirmar que personalize a largura e aplicará essa alteração específica. Então, é muito simples compartilhar isso dentro de uma nuvem mais próxima Você pode entrar no modo de apresentação se quiser apresentar esse design aos seus clientes, por exemplo , às partes interessadas, aos proprietários do projeto ou a quem quer que seja. E então você pode escolher entre esses dois projetos. Assim, você pode ir da página inicial aos detalhes do produto e basicamente trabalhar com eles em tempo real. E eles serão capazes de entender o que você fez. E aqui você pode ver as áreas selecionadas e destacadas quando elas realmente podem clicar. Você pode ver isso mudando em tempo real. Então, tudo funciona como deveria. E você pode ver essas áreas aqui, aqui mesmo. Então, tudo funciona como deveria. E essa é a publicação dos projetos em mock plus r p. No próximo vídeo, vou falar sobre como baixar seus protótipos. Por que é útil e como fazer isso, e como está tudo isso? Então, nos vemos lá. 23. Download de protótipos: Às vezes, você quer baixar seus protótipos do Mach plus rP, compartilhando-os com colegas de equipe, com clientes, e ainda não quer enviá-los e publicá-los. Talvez você esteja sob NDA. Talvez você não tenha acesso à internet. Talvez você esteja viajando para algum lugar e queira ter apenas esses protótipos. Pense neles para revisar algumas notas que você tem. Todos os tipos desses diferentes cenários e mortes em que a opção de download é útil. Deixe-me te mostrar. Então aqui está, aqui no topo, você tem essa opção de download. Assim, você pode baixar o pacote de apresentação de protótipos offline. E essas são as frases-chave aqui, pacote de apresentação, usado para apresentações. Então, quando você quiser apresentar isso off-line, quando estiver em trânsito, talvez esteja em seu laptop, talvez esteja viajando, talvez esteja indo para o local de trabalho ou para seus clientes. Existem várias opções e cenários diferentes em que você pode usar algo assim. É muito importante fazer isso porque você sempre quer ter um backup. É ótimo tê-lo na nuvem, mas às vezes as pessoas podem não ter acesso à Internet. Talvez você esteja lá. Então, por que você os levaria para a nuvem quando tem a opção disponível em sua localização, por exemplo, talvez queira compartilhá-la internamente por causa dos NDAs, como eu disse. Portanto, existem poucos cenários em que você pode usar algo assim e isso é realmente útil. Então, tudo o que você precisa fazer é clicar aqui. Ele vai te mostrar um intervalo de páginas. Vou selecionar a faixa de pintura e selecionar minha loja desejada para que você possa desmarcar o que, marcar o que deseja fazer. Quero explorar e explorar os dois para que possamos simplesmente selecionar todos. Você pode ver que dois deles estão selecionados. E você pode ver o intervalo de páginas porque eu tenho duas páginas dentro da minha pasta. Você pode mostrar o painel da página, você pode mostrar para o norte, mostrar a barra de ferramentas. Você pode mostrar links para todas essas configurações sobre as quais falamos e acessamos. Ok, quando estiver pronto para fazer o download, o download levará um pouco de tempo. E dependendo da sua máquina, dependendo do seu projeto. Então, por exemplo, se você otimizou suas imagens, vai demorar um pouco mais. Se você usou várias páginas diferentes, vai demorar um pouco mais. Mas neste caso, como você pode ver, ele foi exportado muito rapidamente. Então, deixe-me colocá-lo em uma pasta. Agora deixe-me mostrar essa pasta, como ela se parece. Então lá vamos nós. Temos essa opção para um arquivo zip, clique com o botão direito do mouse. E eu vou extrair dois aqui e esconder isso só para que você possa ver um pouco melhor. Lá vamos nós. E extraiu esses ativos de forma sólida e se livrou desse arquivo zip. Na verdade. Livre-se dele pressionando delete. Lá vamos nós. E aqui temos todos esses ativos que são incluídos por padrão para vários SRP. Depois, temos as opções de dados, que são todas as imagens incluídas nela. E, obviamente, é muito importante que você nomeie suas camadas. Caso contrário, você vai acabar com um resultado como esse. Mas, basicamente, basta exportá-los como arquivos de espaço reservado. Quando você realmente compartilha isso com seus desenvolvedores, manterá os nomes das camadas que você postou. Finalmente, temos a página de índice, clique duas vezes nela e ela se abrirá como uma nova página e você poderá ver o que seus usuários verão dentro, digamos, do pacote de apresentação que você deseja mostrar a eles. Então, eles têm todas essas opções sobre as quais falamos anteriormente. Se quiser, você pode incluir alguns nós aqui. Você pode ocultar esses painéis. Você pode mostrar esses painéis. Você pode fazer o que quiser e vamos explorá-los uma última vez. Aí está. Isso nos levou a esta página. Os efeitos de passar o mouse ainda funcionam. Isso ainda funciona. Então, tudo está como estava aqui, mas é apenas uma versão portátil e mais, digamos, na qual você pode levá-la para onde quiser porque a tem armazenada em sua máquina. E é por isso que baixar protótipos é uma opção tão legal. Eu vou gostar e recomendo que vocês o usem o tempo todo. Parece que eu também estou fazendo isso. 24. Repartição de projetos de cursos: Neste vídeo, vamos fazer uma análise rápida do projeto do curso. E eu faço isso para cada um dos meus projetos. Nós simplesmente não vamos incluir alguns detalhes mais profundos, como por exemplo, resumo de design ou proposta de projeto. Vou presumir que eles já foram criados porque esse é o projeto que realmente não existe. Mas eu ainda quero levar você ao processo completo de design, que eu gosto de usar quando estou criando meus projetos, tanto sites quanto aplicativos móveis. Primeiro, vamos começar com alguns fluxos de tarefas ou com alguns fluxogramas, você quiser chamá-los e estruturá-los. Vou apenas mostrar como as coisas serão estruturadas na própria página. Depois, com algumas informações básicas, vamos passar para os wireframes. Vamos apenas colocar alguns elementos na página e criar uma estrutura de elementos básicos em nossos designs. Depois disso, vamos passar para os designs. Vamos pegar esses wireframes, transformá-los em designs adicionando cores, adicionando imagens diferentes, adicionando estrutura, adicionando cópia real a eles. E, finalmente, adicionaremos algumas interações e animações ao nosso design para dar vida a ele e fazer ele se destaque um pouco mais do que no final Vou mostrar como compartilhar esse design com seus colegas de equipe, clientes e desenvolvedores. E, finalmente, como exportá-lo como um protótipo, que você pode levar para onde estiver sem internet e pode abri-lo em qualquer dispositivo. Então, vamos começar. No próximo vídeo, criaremos alguns fluxos de tarefas rápidos para descrever o que é nossa página. Então eu vou te ver lá. 25. Flowcharts: Neste vídeo, vamos criar alguns fluxogramas rápidos para nossos projetos. Então, vamos começar. Então, aqui estamos em simulação mais rP, e eu vou imediatamente criar um novo projeto. E eu vou usar o 1080 da década de 1920. Tudo bem porque isso vai estar no site de realidade virtual. É assim que vou chamá-lo. Clique em OK e abrirá uma nova guia. Não vou usar nenhum modelo porque quero começar a criá-lo do zero. E antes de prosseguirmos, vamos definir algumas preferências muito rapidamente. Então, vamos com as configurações de layout. Vou usar 12 colunas. Para a largura da coluna. O que eu posso fazer é usar algo como 82. largura da calha pode ser talvez algo um pouco menor, como 60 ou algo assim. Lá vamos nós, mas vamos tentar nos encontrar no meio. Então, 8.080,80, acho que vai funcionar muito bem. E essas fileiras vão ficar bem. Cores. Talvez possamos escolher algo como 40, algo assim. Isso é bom. E não precisamos de nenhuma linha por enquanto. Eu só vou usar isso. Então, vamos ver, deslocar talvez 20 pixels, mas não do centro. Calha do lado de fora. Algo como dívida. Vamos ver, talvez um e vinte. Aí está. Mas eu realmente não gosto disso. Então, vamos usar um t mais uma vez. Então, visualizamos, mostramos o layout. Lá vamos nós. Então esse é o nosso layout. Esse será o layout automático desta página. Então, primeiro de tudo, vamos esconder isso rapidamente. Então, visualizações, porque eu não quero ver isso muito rapidamente. Então, alt mais l é como vamos esconder isso. Clique em Alt mais l para ocultá-lo rapidamente. E eu vou até a página, e esta página, eu realmente vou renomear. Vamos ver, quando ele criar uma nova página, vai me derrubar. Lá vamos nós. Então, nesta primeira página, vou renomear como fluxograma desse jeito. Então, na segunda página, vou renomear para wireframe. A terceira página será nosso design. Lá vamos nós. Então, todos eles são 1920 por 1080 porque é assim que os definimos. E você pode ver que está aqui. E vamos voltar ao nosso fluxograma porque vamos começar a colocar alguns elementos. Então, pelos componentes, tudo o que preciso fazer aqui é usar uma dessas formas. Então, talvez esse aqui dentro dessa forma. Vamos ampliá-lo um pouco. Vou clicar duas vezes dentro e digitar algo como a imagem do herói. Lá vamos nós. E eu vou ampliar esse texto para talvez 30 ou algo assim. Lá vamos nós. Só para que tenhamos um pouco mais de espaço enquanto trabalhamos aqui. Talvez algo um pouco menor, como 20, só para que possamos ver com o que estamos trabalhando. Agora vamos mudar isso para Roboto, eu acho, e torná-lo ousado, assim mesmo. Então, dentro daqui, talvez possamos mudar isso e usar uma cor diferente. Então, eu já tenho uma cor preparada na minha área de trabalho, que é uma bela cor azul. E o texto nesse caso será branco puro. E vamos nos livrar dessa ousadia. Nós não precisamos disso. Finalmente, vou me livrar da fronteira. E neste caso, estamos prontos para ir. Então, o que eu preciso fazer aqui é ir até a marcação, arrastar algumas setas para dentro daqui e vamos colocá-las, digamos cerca de 20 a partir daqui. Então, de agora em diante, o que eu vou fazer é aumentar a largura para cinco. Talvez não seja tão grande. Talvez três, talvez dois. Na verdade. Lá vamos nós. Então, estendi um pouco para que possamos vê-lo um pouco melhor. O que eu vou fazer é duplicar isso, posicioná-lo aqui. Então, a partir da imagem do herói, vamos para a seção Explorar. E dentro dessa seção de exploração, vamos apenas fornecer algumas informações sobre o que você pode explorar usando essa realidade virtual. Agora, para essa primeira forma, eu realmente vou mudá-la. Então, vamos mudar para os pontos de entrada, algo assim, eu acho que funciona. Bem. Vamos reduzi-lo um pouco desse lado. Vamos selecionar todos eles, movê-los mais ou menos assim. Em seguida, da seção de exploração passaremos para a próxima seção, que será de possibilidades. Porque queremos mostrar às pessoas o que é possível quando elas compram esse fone de ouvido VR , por exemplo , na próxima seção, passaremos para jogos e jogos. E eu quero destacar esta seção, então vou usar outra cor. Já tenho essa cor preparada assim porque quero que jogos sejam uma característica de destaque deste site, algo assim. Porque jogar é muito benéfico no mundo em que estamos atualmente. É aqui que a maior parte do dinheiro realmente está nesse material de jogo. Então, vamos posicioná-lo em 20. Lá vamos nós. E eu vou passar para algumas outras seções. Agora, esta seção pode ser, por exemplo, seção de vídeo. E dentro dessa seção de vídeo, talvez possamos explicar para que serve a realidade virtual, como ela é usada ou algo parecido. Então deixe-me duplicar isso. Posicionamento aqui. Duplique isso abaixo da seção de vídeo. Talvez possamos explorar algumas características ou alguns elementos. Então, fones de ouvido VR. Então, talvez as pessoas possam comprá-los ou algo parecido. E, finalmente, vamos lidar com isso. Dê uma olhada em um pouco de prazer. Essa posição aqui é até 20. Lá vamos nós. Controle D neste, posicione-o aqui. E talvez possamos digitar alguns depoimentos. Lá vamos nós. E vamos duplicar essa seta mais uma vez. Então, eu quero apenas criar algum tipo de circuito fechado. Então, quero mostrar aos meus clientes, por exemplo , como isso vai funcionar. Então, vamos ver a seção Promo, algo assim. Lá vamos nós. O que podemos fazer talvez seja duplicar essa flecha e talvez brincar um pouco com essa forma. Então, no final, vamos ver aqui, eu vou usar esse Controle D para duplicá-lo e, em seguida, posicioná-lo para ficar mais ou menos por aqui. O início não será nenhum grupo. Talvez eu deva girar para o lado diferente assim. Portanto, o início não deve ser nenhum. Lá vamos nós. E eu quero reduzir isso um pouco. Então o fim vai ser assim. Lá vamos nós. E eu vou duplicar esse. Certifique-se de que esteja aproximadamente no centro e certifique-se de que seja 20, assim. Então, abaixo disso, vamos dizer algo como acessórios afiados. Porque existem muitos desses. E deixe-me duplicar um desses, talvez este. E posicione-o aqui, onde diz 20. Lá vamos nós. E duplique esse mais uma vez, assim. E vou dizer algo como a seção final do prompt ou o mundo da realidade virtual. Porque vai descrever o que o mundo de nós realmente é. E finalmente chegamos ao final da página. Então eu posso duplicar isso mais uma vez, Control. Opa. Não é isso. Posicione-o aqui para ser 20. Isso também para o B2C. E esse será o rodapé da nossa página. Lá vamos nós. Talvez eu possa chamá-lo e dar algumas variações diferentes. Então esse primeiro pode ser algo como, sei lá, essa cor. Este último pode ser dessa cor. Ou melhor ainda, talvez possamos usar algo um pouco diferente. Então, para este primeiro, o que eu vou fazer é usar uma cor mais escura como essa. Portanto, nossos pontos de entrada e saída podem ser essas cores escuras. E para todas essas outras cores, podemos usar esses tons de azul e tons de azul e coisas assim. Talvez possamos mover isso um pouco para baixo e estender essa seta para ser algo assim. Então, essa é apenas minha abordagem e como eu gosto de criar fluxogramas. Você pode fazer isso por diante. Qualquer tipo de técnica diferente é uma forma que você escolhe. E há também mais um recurso que é incrível em vez de simular mais rP, chamado modo Connect, que ajudará você a criar esses fluxogramas ainda mais rápido. Então, deixe-me mostrar como isso funciona. Em primeiro lugar, não vou excluir isso porque, como eu disse, essa é apenas minha abordagem. Vou duplicar essa prancheta usando Controle ou Comando D. E então vou me livrar dessa flecha, dessa seta e dessa seta, por exemplo, e continuar excluindo essas setas. E então eu vou realmente selecioná-los para tirá-los do caminho e selecionar este também, só para me dar um pouco mais de espaço. Então, o mesmo que fizemos aqui. Digamos que essa seja a nossa imagem de herói encerrada. Estamos começando daqui. Então, para entrar no modo de conexão, basta clicar aqui ou usar Alt C, clicar lá. E então você pode simplesmente arrastar de um dos cantos, por exemplo , este, e soltar. Em seguida, você terá a opção de criar qualquer tipo dessas formas que você quiser, por exemplo, vamos usar esta. Deixe-me ampliar um pouco. E a partir daqui, vou clicar duas vezes e digitar isso porque essa funciona em nossa próxima etapa. Então, vamos imaginar que não o criamos de jeito nenhum. Então, seção Explore. Lá vamos e clicamos em algum lugar lá fora. Agora, para clicar neste , vamos ver, 28793. Vou clicar nesse. Então 28793, algo assim. Lá vamos nós. E quando você a move para cima, você pode ver que a seta é gerada dinamicamente, o que é incrível. E isso só vai te dar um pouco mais de precisão com seus designs e com suas seleções. Então, deixe-me seguir em frente e copiar essa cor. Deixe-me aplicá-lo ao preenchimento aqui. Deixe-me selecionar a cor do texto que deve ser branca e vamos usar o Roboto. Vamos com 20. Então, para imitar essas seções no futuro. Então, o que você pode fazer a seguir é simplesmente selecionar este pressionar o Controle D para duplicá-lo. Posicionado no solver do lado de fora, clique e basta clicar e conectar esses dois pontos. Agora, na próxima, você pode dizer algo como possibilidades. E então você pode clicar e arrastar para reduzir seu tamanho, por exemplo, então o jogo foi o próximo. Então, o que podemos fazer nesse caso é se eu selecionar esses dois e movê-los, você pode ver como as setas estão se movendo dinamicamente. Então talvez possamos dar uma volta aqui e pressionar o controle D mais uma vez e digitar o jogo aqui. Lá vamos nós. Mas vou usar essa cor dourada desse jeito e depois colá-la aqui. Agora, no jogo, o que eu posso fazer é talvez conectar esses dois aqui, ou eu possa conectá-los aqui e, em seguida, simplesmente posicioná-los aqui para que você possa ver o quão dinâmico ele é e você possa movê-lo e organizá-lo da maneira que quiser. E essas flechas continuarão. Se eu não estiver satisfeito, sempre posso ir e desfazer algumas vezes e depois voltar para aqui. E então, se quisermos nos conectar à próxima seção, o que posso fazer é pressionar Controle D, por exemplo, aqui. Em seguida, deveria dizer Seção de vídeo, assim. E então, basta conectar este e este. Então, a partir disso, você pode ir para aqui, por exemplo , desta você pode descer até aqui, digamos que daqui você pode ir até aqui e ver a rapidez com que isso pode se ramificar e se ajustar de várias maneiras , formas e tamanhos diferentes. Assim, você pode criar todos os tipos de layouts complicados usando esse incrível modo de conexão para sair dele, basta clicar aqui. E então vai deixar você com todas essas flechas e como você as posiciona. E você pode ver que ainda é dinâmico, embora tenhamos saído do modo Connect e, o que quer que ele tentado ajustar e alterar, as setas continuarão. Apenas uma observação rápida, mais uma vez, essa é uma abordagem muito melhor do que a minha, mas ainda gosto de usar minha abordagem porque a uso há anos e estou acostumada com ela, mas certifique-se de usar o modo Kinect. É uma maneira muito mais rápida de criar esses fluxogramas, especialmente se você tiver várias páginas diferentes e estiver trabalhando em um grande projeto. E você precisa conectar essas páginas cruzadas e multiplataformas que suportem layouts, telas e tamanhos diferentes para suas pranchetas. Portanto, essa é uma maneira muito melhor de fazer isso usando o modo de conexão. Mas, como eu disse, vou clicar em Excluir aqui. Vamos usar essa abordagem nesse método, que eu já mostrei. Porque, como eu disse, estou acostumado com isso. Obviamente, esses fluxogramas são melhor usados quando você tem várias páginas e quando você está se movendo entre páginas quando você tem várias telas. Mas é claro que você pode ver como eles são super simples de configurar aqui, para que você possa planejar o conteúdo da sua página antecedência antes de realmente passarmos para wireframes e designs. E não perca tempo depois de realmente chegar à parte de criação do seu design. Falando sobre a parte de criação no próximo vídeo, abordaremos alguns wireframes e mostrarei como configurar esses wireframes e como se preparar para esse layout, o que incluir e o que não incluir. Então, nos vemos lá. 26. Wireframe: wireframes são uma parte muito importante de todo processo de design, pois nele você pode realmente experimentar o layout, ver onde pode estar o posicionamento de diferentes elementos , como ajustá-lo, como posicioná-lo e fazer com ele o que quiser nas primeiras etapas do projeto. Antes de realmente passarmos para a fase de design, o objetivo principal do wireframe é fazer as coisas rapidamente e seguir em frente. E se algo quebrar, simplesmente deixe e continue com a próxima ideia, porque isso é tudo o que é. Processo de geração de ideias de wireframing antes de passarmos para o design final. Então, vamos voltar para ma mais rpm. Deixe-me mostrar como criar alguns wireframes. Então, aqui estamos no modo mais r p. E vou selecionar minha página de wireframe. Lembre-se de que 1920 por 1080 já está configurado. E vou ampliá-lo um pouco porque vamos adicionar bastante conteúdo interno. Então, a primeira coisa que eu quero fazer é clicar em Control L. Ok, então o problema aqui é que eu não defini os valores originais na primeira página antes criar essas outras páginas, por exemplo, wireframe e design. Então, o que você precisa fazer aqui é, ao abrir sua primeira página, definir os valores desejados e salvá-los como padrão e criar outras páginas. Em seguida, ele será traduzido para todas as outras imagens que você criou. Mas você precisa fazer isso na primeira página criada e depois salvar esses valores por padrão. Então, temos 80, 80, 87. Então, vamos ajustar isso rapidamente. Portanto, temos 8.080,87, 80, 80, 80. Vamos experimentar e sarjeta do lado de fora. 80, 80, 87. Mas antes de prosseguirmos com outras preferências, quero alterá-las com apenas um toque. Então, talvez eu queira reduzir isso para talvez 20, ou talvez até algo menor, como dez. Lá vamos nós. Ok? Portanto, isso não colide muito com nosso design, que não é o que realmente queremos fazer. Então, primeiro de tudo , podemos criar algum tipo de seção de heróis. Para fazer isso. Você pode usar retângulos, você pode usar imagens, você pode usar o que quiser. Eu vou usar a imagem neste caso. Então, eu vou arrastar uma imagem para isso e vou definir alguns valores. Então, 1920 por 1.000. Lá vamos nós. Vou colocá-lo no topo assim. E ainda por cima, vou adicionar nosso retângulo. Então, 1920 por 1.000. Então, mesmas dimensões. E eu vou simplesmente colocá-lo no topo me livrar da borda. Venha aqui mesmo. Imagem. E vou chamá-la, por exemplo, imagem de herói. Lá vamos nós. E isso pode ser Hero Color Overlay. Lá vamos nós. Agora vou adicionar outra imagem aqui. E eu vou nomear essa imagem de logotipo. Lá vamos nós. E para o logotipo em si, o que posso fazer é dar a ele algumas dimensões de 106, largura 56, por exemplo, encaixá-lo na parte superior. Pesquise-o, por exemplo , talvez 50 pixels abaixo algo assim, e posicione-o aproximadamente por aqui. Lá vamos nós. Pressione T no meu teclado e eu vou digitar algo como produtos. Lá vamos nós. E eu vou posicioná-lo para ficar mais ou menos por aqui. Agora, para isso, o que eu quero fazer é usar o Roboto nesse caso. E eu vou com 18. Lá vamos nós. Vou fazer algumas duplicatas. Então, primeiro de tudo, controle e D. Agora, este vai dizer, por exemplo, parceiros. O próximo vai dizer apoio. Lá vamos nós. E um último. E vai dizer algo como “lá vamos nós”. E agora, finalmente, tudo que eu preciso fazer é simplesmente espaçá-los uniformemente. Então, talvez eu vá posicionar isso aqui até o fim, posicionar isso aqui. Então, está em torno de 60. Lá vamos nós. Espero que isso aconteça. Isso. Faz. Isso também acontecerá. É verdade. Então, o que eu posso fazer é selecionar todos eles, pressionar Control G para colocá-los em um grupo chamado itens de navegação. Coloque-os abaixo do meu logotipo e certifique-se de que estejam centralizados , como Então, pressione Control G e talvez eu o chamarei de Top Nav. E com isso, nossa seção de heróis está quase pronta. Mas precisamos de algum tipo de sobreposição de cores aqui. Então, o que eu vou fazer é usar a cor e colocá-la aqui. Lá vamos nós. E eu vou imediatamente para meus ativos e selecionar cor sem essa cor de fundo porque eu não preciso dessa. Eu só preciso desse. E eu vou chamá-lo, por exemplo, algo como cinza escuro ou escuro principal. Escuro, algo assim. Lá vamos nós. E nesse caso, quero ter certeza de que meu texto está completamente branco. Então, eu vou até aqui. Totalmente branco. Mas vamos selecionar os elementos de texto tipo Bordeaux, completamente brancos. Sim. Ok. Vou até a cor, selecionar uma delas, não importa. Branco. Lá vamos e selecionamos um deles. E vou adicioná-los aos meus textos porque é isso que vou usar em todo o meu design. Vamos fazer a compostagem e adicionar texto ao texto básico. E eu vou colocar isso mais ou menos por aqui. Em seguida, vou retirá-lo ou o Control X para cortá-lo do lado de fora e depois colá-lo aqui. Então eu posso posicioná-lo no topo. E uma vez que ele saltou para o topo, o que eu posso fazer é criar alguns textos maiores nesse caso. Então, vou usar o Roboto mais uma vez, mas vou usar algo como 70. Lá vamos nós. Certifique-se de que esteja centralizado, alinhado, certifique-se de que seja algo grande. E eu vou dizer que algo como o título está aqui. Lá vamos nós. E eu vou, como eu disse, ter certeza de que seu centro está alinhado, ter certeza de que está centralizado. Lá vamos nós. E eu posso posicioná-lo logo abaixo aqui. E então eu vou ousar. Lá vamos nós. Volte para meus ativos e adicione-os como meu texto. Então eu vou duplicá-lo, posicioná-lo aqui e vou fazer algo como personalizar o seu. Lá vamos nós. Mas em vez disso, vou escolher 18. 18 funcionará muito bem neste caso específico porque eu preciso criar um botão para poder usar o componente do botão e, na verdade, vou colocá-lo aqui. Então meu botão será algo como 366 de largura 60, o ego deles. E o texto interno, como dissemos, será 18. Então você pode selecioná-lo. Vá com 18, vá com Roboto, escolha branco. Então eu vou escolher o branco. E para a cor do meu botão, o que eu vou fazer é usar a cor que eu já usei. Então aqui, lá vamos nós. E vamos adicionar essa cor e nos livrar dela porque não precisamos dela. Vou usar isso e isso será chamado de nosso azul principal. Lá vamos nós. E aqui eu vou usar apenas esse texto. Clique duas vezes, personalize o seu. Lá vamos nós. Livre-se desse. E para o raio da esquina, vamos nos livrar da borda. Para o raio da esquina, vamos usar algo grande como Swanee. Veja como isso parece. Parece bom. Certifique-se de que esteja no centro, assim certifique-se de que esteja localizado à direita ou aproximadamente por aqui. Desculpe, vamos lá. Então esse será nosso principal btn. E imediatamente, o que vou fazer talvez seja criar um componente para isso. Então, ao passar o mouse, mas eu vou fazer é mudar sua cor. Então, talvez possamos escolher , na verdade, vamos mudar esse azul médio, azul principal. Vamos ver o que podemos fazer. Venha aqui, mude para aqui, lá vamos nós. Então esse será nosso azul principal. E esse vai ser nosso azul escuro. Aí está. Então, para o azul principal, ele estará dentro do normal. Lá vamos nós. E ao passar o mouse, ele ficará azul escuro. Então, é simples assim. Vamos voltar ao normal. Vamos pré-visualizar rapidamente para ver se aplicamos essa alteração. E você vai ver, lá vamos nós. Então, já está lá. Adorável. Então, se voltarmos a isso, vamos começar a projetar alguns desses outros elementos. Antes de prosseguirmos, quero ter certeza de colocar o botão aqui. Lá vamos nós. E vou chamar essa seção de heróis. Agora, a próxima seção abaixo da seção de meus heróis conterá minha imagem e algum texto. Então, basicamente, o que vou fazer neste momento é usar algum texto. Lá vamos nós. E eu vou dizer algo como o título da seção. Lá vamos nós. E vou me certificar de que está alinhado à esquerda. E desta vez eu vou escolher algo mais baixo, como 60. E eu vou usar essa cor escura principal, certifique-se de que ela esteja alinhada à esquerda. Mais uma vez. Posicione-o até que fique alinhado ali, controle D para duplicar isso. E agora vamos fazer algo diferente mais uma vez. Então, primeiro de tudo, vamos adicionar isso como nosso texto. Este vai ser algo diferente, como 24, por exemplo e a cor vai ser um pouco diferente. Então, vou transformar essa cor aqui, depois selecionar a cor aqui. Chame isso de parágrafo. Lá vamos nós. E esse parágrafo , na verdade, vai se estender para, digamos, um para um. Algo parecido. Esse é esse 792. Lá vamos nós. E a altura será 121. Agora, aqui estou usando meus próprios textos, mas se você quiser usar um espaço reservado para textos, tudo o que precisamos fazer é mouse nesse componente de texto e clicar em preenchimento automático para preenchê-lo rapidamente com texto de espaço reservado automático. E este será o texto do parágrafo da seção que ficará aqui. Então lá vamos nós. Agora, finalmente, o que eu preciso é incluir alguma imagem. Então eu vou direto para os componentes, ir para Imagem, esticá-la bem, posicioná-la mais ou menos por aqui. Isso realmente não importa por enquanto. E então o que precisamos é girar o botão que temos. Então abra isso. Grupo padrão, mas não o criamos como um componente, então vamos adicioná-lo aqui mesmo. Pressione o botão principal, Ok, e abra esse grupo padrão. Aqui temos o botão principal, basta arrastá-lo e posicioná-lo aqui. Por alguma razão, ele continua aparecendo na seção principal de heróis. Então, vamos sair disso e apertar Controle X e fechar tudo isso. Lá vamos nós. Então, ele está posicionado aqui. Parágrafo da seção, imagem, título da seção. Lá vamos nós. E eu vou simplesmente agrupá-los. Mas antes disso, talvez eu queira ter algum espaço entre eles. Então, talvez 48 seja um bom número. Então vamos ver, 58, 48, lá vamos nós. E isso também pode ser 48. Então, o que eu posso fazer é selecionar essa seção de qualidade, conteúdos como esse. E eu posso chamar essa seção inteira de seção. Posicione-o abaixo da minha seção de heróis. E vamos ver quanto ao distanciamento, o que podemos fazer talvez seja mantê-lo. Vamos mantê-lo em 100. Acho que isso vai funcionar muito bem por enquanto. E dentro dele, o que podemos fazer é selecionar esses dois elementos e garantir que eles estejam centralizados. E lá vamos nós. Agora, abaixo disso, podemos ter uma seção diferente. E eu vou realmente reutilizar alguns desses elementos. Mas antes disso, deixe-me selecionar este e adicioná-lo como meu texto. Lá vamos nós e saímos. E o que podemos fazer é criar algumas seções diferentes. Então, vamos criar um novo de qualquer maneira. Então, isso vai dizer possibilidades ilimitadas. Possibilidades, certifique-se de que está centralizado e certifique-se de que é este no centro. Certifique-se de que somos 100 Control D. Agora, use este. Na verdade, vou ir um pouco mais rápido. Então, eu vou realmente colar esse conteúdo, o conteúdo original. E vamos ver, o distanciamento pode ser algo como 40. Eu acho que é muito bom. Lá vamos nós. Então, aqui temos 100. Agora, abaixo disso, o que vamos realmente criar são algum tipo de cartão. Portanto, esse cartão pode estar dentro de um contêiner. Então, para criar o contêiner, você pode criar com nosso retângulo. E pode ser porque vai ser, digamos, quatro deles. Pode ter algo como três colunas de largura. Vamos ver, talvez possamos dar algo como 40, 87 para a altura ou algo parecido. Vamos ver que a distância entre ele e as camadas no topo pode ser algo como 100. Então, se eu selecionei 100, lá vamos nós. E podemos adicionar o raio do canto. Portanto, sem qualquer canto da borda, o raio pode ser dez. Lá vamos nós. E uma coisa que esqueci de mencionar é que podemos definir a cor da nossa prancheta para uma cor diferente, porque no momento ela não está realmente se destacando muito. Então, eu vou usar essa cor somada assim. E eu também vou adicioná-lo às minhas cores aqui. Mas vou aplicá-lo rapidamente aqui. Lá vamos nós. Então preencha, você pode ver f b, f b, f b. E eu vou adicioná-la às minhas cores, chamá-la de cor do quadro de arte. Lá vamos nós e simplesmente nos livramos dessa cor. Agora, em vez da cor da prancheta, vou usar o branco agora para continuar o que fizemos anteriormente. Eu não preciso que isso seja ousado, eu acho. Então, talvez eu possa configurá-lo assim. Lá vamos nós. E o que eu posso fazer é realmente usar esse texto. Então, Controle D, posicione-o aproximadamente por aqui. E eu posso adicionar algum conteúdo a ele. Lá vamos nós. E talvez eu possa definir a largura para, digamos, três a três, algo assim. Eu posso ajustá-lo ao centro do meu cartão mais ou menos por aqui. E eu posso voltar aos componentes e adicionar uma nova imagem. Desta vez, podemos escolher algo como um e vinte de largura 108, talvez, algo assim. Posicione-o no controle central D neste. E aqui o que podemos fazer é configurar um novo estilo de texto de 32. E talvez eu possa dar um nome de educação. E desta vez pode ser Bolt. Lá vamos nós. Eu quero dar a ele a cor escura principal para diferenciá-lo. Só um toque. E vamos ver, podemos ir 40 de cada lado. Digamos que eu ache isso bom. Então, vamos ver. Em primeiro lugar, vamos tirar 58 desta borda superior. Então 58 e isso pode ser 40 para baixo. Assim. Isso também pode ser reduzido em 40%. Lá vamos nós. E então podemos estender o cartão talvez um pouco, só um pouco para baixo. Lá vamos nós. Agora que temos nosso cartão, o que podemos fazer é chamar esse BG atual. Lá vamos nós. E eu posso agrupar esses elementos. Então isso pode ser ícone, aprender novas habilidades, educação, ícone. Lá vamos nós. Então esse vai ser nosso carrinho. E vamos colocar nossas cartas. Vamos ver, aqui mesmo. Então, isso estará aí. Lá vamos nós. Esta é a grade 100. E agora tudo que eu preciso fazer é simplesmente duplicar esse cartão e posicioná-lo aqui. Posicione-o aqui e, finalmente posicione-o aproximadamente por aqui. Agora vamos ver, 369. Estamos perdendo uma coluna aqui por algum motivo. 23 456-789-1011, 12 colunas. Então, vamos voltar às nossas preferências. Configurações de layout. Você pode ver 12 colunas, mas esse deslocamento é do centro. Então, talvez possamos configurá-lo para algo mais baixo. Sabe, vamos fazer uma sarjeta lá fora, às 14h. Vamos com zero. Aí está. Só para que possamos ter algum revestimento do nosso conteúdo neste caso. E eu não quero perder muito tempo porque, no final das contas, isso realmente não importa quando se trata de desenvolvimento, porque os desenvolvedores o criarão de qualquer maneira. Ou você o cria assim ou eles o editarão mais tarde, quando terminarem de usá-lo. Então, primeiro de tudo, acho que está tudo bem. Talvez isso possa ser movido um pouco. Talvez isso possa ser movido um pouco para ouvir que todo o resto funciona bem. A última coisa que eu queria acrescentar e abordar é esses cartões podem ser um pouco mais estreitos, algo assim. E assim. Lá vamos nós. Então, assim. E, finalmente, controle D, duplique-o. A posição está aqui. Aí está, e esse é o nosso cartão. Então, basicamente, o que vou fazer neste estágio é selecionar esse controle G, chamá-lo de possibilidades e basicamente organizá-lo logo abaixo desta seção. O próximo Controle D desta seção, organize-o abaixo das possibilidades, segure minha tecla Shift e a seta inferior para que eu possa movê-los um pouco pelo local. E basicamente o que eu quero fazer com esta seção é simplesmente substituir a posição desses elementos. Então essa imagem vai ficar aqui. Este texto vai circular mais ou menos, digamos que aqui eu acho que vamos esboçar isso mais tarde e ver isso mais tarde. Este será apenas o nosso jogo. Lá vamos nós. Abaixo dos jogos, o que precisaremos é desse vídeo. Então, vou criar uma imagem rápida. Então volte para aqui, arraste e solte a imagem. Agora, essa imagem será algo como 16, 44, largura 863. Lá vamos nós. Verifique se está no centro. E eu vou basicamente criar um retângulo com exatamente as mesmas dimensões dessa imagem. 16, 44 com 863. Lá vamos nós. Era essa a imagem aqui? Então isso vai ser Color Overlay. Vamos aplicar a mesma cor escura principal nele. E vou reduzi-lo para talvez 60% ou algo parecido realmente não importa. Então, esse será nosso vídeo ou vídeo promocional. Aí está. Assim. E, finalmente, precisamos de alguns textos. Então aperte T e digite. Veja o mundo com novos olhos. Agora, esse texto terá um estilo enorme e ficará localizado no centro desse elemento. Você pode selecionar todos esses elementos, chamá-los de promocionais, vídeos e reduzi-los até o fim. Agora, ajuste isso para 100 a partir daqui, por exemplo, ou obviamente você pode configurá-lo para 150, talvez, e ajustar ainda mais. Vou abordar isso um pouco mais tarde, quando realmente tivermos todo o nosso conteúdo pronto. Mas, por enquanto, estou pensando em cortar esse vídeo porque eu realmente não tenho muitos dos diferentes conteúdos que quero criar abaixo. Talvez eu possa configurar isso, possivelmente. E então talvez eu possa realmente duplicar essa seção inteira. Posicione-o até, digamos, 150, mova-o totalmente para baixo. Isso pode ser inovador, algo assim. E então eu vou me livrar desse cartão. Todos eles gostam disso. E, na verdade, copiar o texto interno será muito mais rápido do que digitar. Lá vamos nós. E eu vou realmente criar três cartas diferentes aqui. Então, vamos usar r para retângulo mais uma vez. E vamos usar algo assim. 246 colunas Control D, posicione uma aqui. E eu vou realmente reduzi-los um pouco. Vamos ver o que podemos fazer com esse layout. Esse primeiro pode ter algo como 618 de altura ou algo assim, mas vamos deixar como está por enquanto. Então aqui vamos ter uma imagem, então eu vou arrastá-la e soltá-la dentro. Essa imagem será algo como 680 por 386. Lá vamos nós. Muito bom, amplie. Adorável. E então eu vou selecionar essa, arrastar e soltar minha imagem aqui também. Essa imagem vai ser um pouco menor. Então 146 de largura, dois a três, por exemplo, algo assim. Lá vamos nós. E então uma imagem final cobrirá os elementos abaixo. Então, vamos arrastar e soltar. E eu vou usar basicamente as mesmas dimensões. Então, 880 por 3198080 por 319, vamos lá. E apenas posicione-o ali mesmo. Obviamente, vou ter algum texto aqui, então vou chamá-lo de Explorer para. Esse será o nome do nosso fone de ouvido. E vamos ver o tamanho. Sim. Eu acho que é muito bom. Então, certifique-se de que esteja no centro. Aí está, posicionando seu controle D. E eu vou dar a ele algumas cores diferentes. Então, azul escuro, por exemplo, ou azul principal aqui. E vou dar alguns textos como o seu personalizado, por exemplo, talvez queiramos personalizar isso um pouco. Então eu vou clicar em Controle C, Controle V. Para duplicar isso, vou posicioná-lo aqui. Certifique-se de que eles estejam alinhados ao lado esquerdo desta forma. Então eu vou digitar, por exemplo, controller. Pronto, mas esqueci de alinhá-lo à esquerda para o texto. Isso ficará na linha, em vez dos clientes seus. Talvez você possa dizer algo como explorar agora. E esses dois podem ser links. Agora, finalmente, posso duplicar isso mais uma vez, posicioná-los no centro aqui. Neste primeiro, você pode ter ideias, e no próximo pode se inspirar. Lá vamos e ajustamos o plano de fundo dessa imagem. Vamos ver, está nesta. Eu posso dar a cor azul escuro, por exemplo, esta imagem vai ficar aqui por enquanto. Então, basicamente, aqui temos isso, essas seções. E, obviamente, vou entrar e, por exemplo , grupo, esse grupo, esse grupo e esse, para que tenhamos três grupos diferentes. Serão ideias. Isso vai ser um controlador. E isso vai ser Explorer para este, o fone de ouvido real. Então, vou dar a ele o nome de tecnologia. Pronto, mova isso um pouco para baixo e, finalmente, passe para a próxima seção que serão depoimentos, será a mesma que esta seção. Então, basta movê-lo até aqui. Lá vamos nós. E eu vou dar a ele o nome de depoimento. Lá vamos nós. Vamos ajustá-lo um pouco mais tarde. Então, faremos com que essa mesma seção a posicione mais ou menos aqui. E eu vou dar a ele um nome diferente. Como todos em um aparelho. Teremos algumas opções aqui. Lá vamos nós. E eu vou basicamente me livrar disso e disso, me livrar disso também. Então, clique com o botão direito em Desagrupar e vou deixar a imagem aqui dentro. Agora essa imagem também será Explorer, porque esse será o fone de ouvido do nosso dispositivo. Portanto, esse fone de ouvido do dispositivo pode ser algo como 1190650. Lá vamos nós. Certifique-se de que esteja no centro. Adorável. E, finalmente, basta arrastar o componente do botão principal que criamos anteriormente e posicioná-lo como algo como eu não sei. 80 talvez, algo assim. Lá vamos nós. Apenas certifique-se de que esteja abaixo da nossa imagem. Agora, isso pode ser fone de ouvido. Adorável. E então, finalmente, o que temos na parte inferior serão cerca de três cartas. E vamos realmente duplicar essa seção. Vamos ver. Sim, na verdade, posso até mesmo duplicar esta seção porque ela vai dizer algo como liberar o mundo de nós somos tecnologia ou algo parecido. E deixe-me, na verdade, estender isso um pouco mais para baixo. Entre esta e esta seção deve haver uma outra seção. Então, vamos colocá-lo aqui. Liberte. Lá vamos nós. E como eu disse, teremos um rodapé aqui na parte inferior. Então, o que podemos fazer é realmente criar esse retângulo. Use nossa posição aqui. E eu vou usar essa cor escura principal. E vou chamá-lo de algo como rodapé. Bg. Essas dimensões serão de 1920 por 740 e um vento para se livrar da borda, encaixá-la na borda inferior, assim. Mude para o composto à minha imagem. E vamos ver, 1920 por 740. Então, 1920 por 740. Lá vamos nós. Certifique-se de que está aqui, depois está aqui e certifique-se de enviá-lo de volta. Então, faça o pedido e envie para trás. Lá vamos nós. Vamos reduzir isso para talvez 50% apenas para que possamos ver o que está localizado atrás. E outra coisa que eu gostaria de fazer é criar esse mesmo logotipo. Então aperte Control C neste. Volte para aqui onde estamos, o rodapé seja G. Pronto. E eu vou basicamente agrupá-los, chamá-los de rodapé. Dentro do rodapé, vou colar esse logotipo. Então, localizado aqui, clique com o botão direito do mouse no pedido. Não sei por que isso não vai me mostrar isso, mas importa. Então desagrupe o Controle G e chame-o de rodapé. Lá vamos nós. Logo abaixo disso, incluiremos algumas cópias posteriormente para que eu possa pressionar T, por exemplo, e digitar algo parecido. Vamos ver os produtos. Lá vamos nós. E para esses textos de produtos, vou usar um dos meus ativos, que é 100 vezes o Controle D. E para este, vou salvar parceiros Controle D. Isso vai ser apoio, grupos. Suporte. E, finalmente, para esta última , lá vamos nós. Agora que temos todos eles, vou selecioná-los e simplesmente separá-los um pouco, posicioná-los no centro e, mais tarde, adicionar alguns elementos nos bastidores. Mas basicamente isso vai parecer o Controle D, duplique-o e adicione algo como fones de ouvido. Mas eu não quero que vocês fiquem entediados enquanto assistem isso. Em vez disso, o que vamos fazer é criar outra seção aqui. Então, para fazer isso, o que precisamos é de uma seção e logo acima desta seção. E essa seção será algo como, eu não sei, talvez sim, Vamos ver. Talvez possamos aumentar isso, apenas um toque desse tipo. E acima desta seção, talvez possamos criar algo como acessórios afiados ou algo parecido. Então, vamos usar a digitação T aqui. Acessórios afiados. Lá vamos nós. Agora, isso pode ser, sei lá, 32. Por que não criamos aquela coisa de 32. 24, onde está o 32? Então isso é 60. Onde estava? Foi, foi isso? Não. Isso foi 32. Tudo bem, então criado aqui. Lá vamos nós. E agora vou selecionar a dívida, transformá-la na posição de 32 metas de leite à esquerda alinhada aqui, Controle G. E vou dizer algo como uma maleta de transporte. Estojo de transporte. O próximo pode ser um cabo estendido. E neste próximo pode ver todos os acessórios. E talvez eu possa dividi-lo em duas linhas ou algo parecido. Lá vamos nós. Abaixo desses. Vou adicionar algumas imagens. Mas antes disso, eu posso realmente criar alguns retângulos para colocá-los neles porque temos três, talvez eu possa dividi-los em quatro grupos diferentes. Então clique com o botão direito do mouse e faça o pedido, envie para trás. Lá vamos nós. Então, isso vai estar aqui. Na verdade, deixe-me me livrar desses. E deixe-me realmente criar um. E então podemos duplicá-lo como fizemos anteriormente. Então, talvez eu possa posicioná-lo 40 de cada borda. Assim. E então eu posso duplicar isso e colocar o preço aqui. E pelo preço, posso escolher esse tamanho menor. E talvez isso possa ser algo como, sei lá, 98 ou algo parecido. $98. Lá vamos nós. 40. E dentro daqui, vou adicionar uma imagem rápida como essa. E essa imagem pode ser algo como 417 por 417. Lá vamos nós. Bonito e grande. E vamos ver, o cartão oral em si pode ser um pouco maior. Então, vamos ver. Não, vamos colocar essa imagem. Então peça, envie para trás. Lá vamos nós. Clique com botão direito em Pedir Avance. Aí está. Portanto, está logo abaixo do nosso texto. Então, eu vou selecioná-lo. E, na verdade, antes de mim, talvez possamos virar isso e adicionar um raio de canto de 20. Talvez se livre dessa fronteira. A cor de fundo é branca, o que é ótimo. E esta será nossa loja BG ou produto. Então, produto do plano de fundo. E, na verdade, vou selecionar todos esses itens assim, 98 Control G. E esse será nosso cartão de produtos, talvez algo parecido com aquele cartão de produto. Lá vamos nós. Controle D para duplicá-lo, posicione-o aqui. Controle D para duplicá-lo, posicione-o aqui. Agora, esse próximo pode ser chamado, vamos ver, de cabo estendido. Talvez. Lá vamos nós. O preço disso pode ser algo mais parecido com 54. Lá vamos nós. E então esse último pode ser algo como C. Todos os acessórios desse tipo. Meu inglês não está muito bom hoje. Lá vamos nós. E tudo o que eu quero fazer aqui é dizer algo como explorar tudo. E ao lado, quero poder adicionar o ícone de erro. Então, vamos ver, essa flecha vai funcionar muito bem. Assim. Lá vamos nós. Certifique-se de que estamos em 20, por exemplo e esta seta será apenas branca. Vamos acrescentar, o que é isso? Branco? Lá vamos nós. E isso também pode ser branco. Tão branco. Lá vamos nós. Não, não é cor de preenchimento, mas a cor do texto pode ser branca. Lá vamos nós. Isso também pode ser branco. Assim. E o plano de fundo pode ir para Ativos e ficar escuro. Obviamente, você não a vê abaixo desta imagem, mas ela realmente não precisa dessa imagem. Então, eu vou me livrar dele completamente. E a loja de acessórios, vou mantê-la em 40 e essa também é 40. E, basicamente, lá vamos nós. Prosseguimos e concluímos tudo o que precisávamos. Uma última coisa que eu quero fazer é aproximar isso um pouco, talvez para 60, talvez para 40. Podemos fazer o que você quiser com ele. E posso dizer algo como acessórios. E vamos rapidamente organizá-los um pouco. Então, vai ficar logo abaixo daqui. Esta seção ficará logo acima daqui. Lá vamos nós. Então, quando vamos soltar, rodapé e os acessórios vão além do soltar. E, obviamente, vamos organizá-los um pouco melhor para algo assim. Clique duas vezes e reduza um pouco. Então, se formos às nossas preferências de layout e eu desligo nossas colunas aqui, ok? E isso é o que temos até agora. Então esse é o nosso design, isso é o que criamos atualmente, e esse é o nosso wireframe. Você pode ver como isso foi super simples, como foi rápido. Obviamente, demorei 40 minutos para criar, mas a parte do design será muito mais rápida porque vamos criar isso sem nenhum arranhão. Assim, você pode ver quando ele começa a rastrear, tudo está bem disposto na página e tudo pode funcionar conforme o esperado. Então, no próximo vídeo, abordaremos o design. Então eu vou te ver lá. 27. Criação de design: Nesta lição, vamos criar o design e transformar esses wireframes em design. Então, sem mais delongas, vamos começar. Então, aqui está o wireframe que criamos anteriormente. O que eu posso fazer é simplesmente selecionar todos os meus elementos dentro da página. Clique em Control C, volte para Pages, clique em Design, diminua o zoom e estenda até aqui, por exemplo, pressione Control V e ele colará todos os elementos internos. Deixe esse espaço vazio ficar na parte inferior, porque obviamente vamos fazer algum espaçamento um pouco mais tarde. Então, primeiro de tudo, quero adicionar uma cópia real aqui. Então, eu vou colá-lo aqui e ter certeza de que isso é, digamos, 59, 60 ou algo parecido. Lá vamos nós. E eu vou colocar isso aqui. Em seguida, mude para as camadas e encontre a imagem do meu herói, que é essa imagem aqui. Vou fazer o upload, clicar em Carregar e depois vou para minha área de trabalho. Vamos ver onde a pasta está localizada. Então aqui está. E se eu acessar imagens e vídeos, que serão meu passado de herói, é assim que vai parecer que vou clicar em Ok, e lá vamos nós. Então, deixe-me diminuir um pouco a sobreposição de cores para 60, 50, talvez, algo assim. E deixe-me usar minha blusa agora para o logotipo. Vamos substituir isso. Vamos clicar para fazer upload e voltar aos ícones dos meus ativos. Vamos ver se estamos lá. Não, está dentro das imagens. Logotipo. É SVG, então funciona muito bem. Lá vamos nós. Então você pode ver como isso é fácil de substituir. Agora, essa imagem será VR em garota, por exemplo, para a grelha VR, vou clicar em Carregar, clicar em imagens e usar essa garota aqui. Lá vamos nós. E você pode ver como a morte era super simples. Nós nos tornamos humanos, aumentamos um pouco para algo assim. Lá vamos nós. Vou clicar lá fora. Você pode ver como isso parece. Agora, aqui vou colar a cópia do meu design original que criei fora da tela. Obviamente, use isso para o meu parágrafo. Lá vamos nós. E o que eu posso fazer aqui é que seis tendem a apenas um toque para que se encaixe no papel de nós somos talvez ou até melhor, eu posso reduzi-lo para que possamos ir em três linhas para algo assim. 48, 48, isso é bom. Mas eu ainda não acho que essa imagem deva ser tão grande. Ou talvez possamos usar os dois assim. E apenas certifique-se de que eles estejam no centro assim. Então, com todas essas outras seções, vamos movê-las obviamente, para algo assim. Vamos ver como isso funciona. Talvez possamos trazer isso um pouco mais de perto. E talvez possamos até mesmo ativar nossas configurações de layout de preferências. Lá vamos nós. Sim, acho que isso vai funcionar muito bem. Mas por que não se aplica a preferências, configurações de layout. Ok, então L, e eu vou empurrá-lo até o limite. Lá vamos nós e apenas cutucamos essa imagem um pouco. E eu acho que isso vai funcionar muito bem. O que eu vou fazer mais uma vez é apertar Control D. Mais uma vez. Vamos voltar para aqui. Então, vamos ver onde está nossa imagem? Aqui está. Somos meninas. Então, vou adicionar outra imagem aqui em cima dela. Esperançosamente. Por algum motivo, ele não quer ir. Mas isso não importa. O que vou fazer é transformar 200 por 200 e fazer o upload do meu logotipo, desculpe, meu ícone. Em vez dos ícones, o que eu tenho aqui é o ícone VR. Lá vamos nós. Clique em Colocar e, em seguida , posicione-o aproximadamente por aqui. O que isso vai fazer é me dar um pouco mais de interesse nesta seção. Diga. Então, eu acho que esta seção está bem. Então, tudo o que eu preciso fazer é ir em frente e clicar em Carregar. Então troque isso. Essa será a nossa educação. Então, mude para aqui, lá vamos nós. O próximo será um jogo. Lá vamos nós. E eu vou apenas substituir isso por jogos. E na próxima seção, vamos clicar duas vezes e colar em algum texto. O próximo será a música. E clique duas vezes na música. Então, basta clicar aqui, clicar em Carregar, clicar e encontrar músicas. Lá vamos nós. Aqui. Ok? E então esse último será de metal, porque isso está na moda no momento. Como eu vejo online. Pronto, Mehta, e finalmente substituímos esse ícone seu próprio ícone do Icon Matter. Lá vamos nós. Atingir. Ok, ótimo. Agora que isso está feito, o que posso fazer é selecionar toda a seção e simplesmente colocá-la aqui para que eu possa ver onde ela se encaixa com o resto do meu design. E eu posso selecionar todas essas outras seções e simplesmente movê-las para baixo até ver o que fazer com elas um pouco mais tarde. É por isso que é ótimo. Então, vamos ver os jogos aqui. E eu posso fazer o upload desse clique em Carregar, voltar para minhas imagens, jogos, que é esse cara. Lá vamos nós. Você pode ver algo assim. Acho que vai funcionar muito bem. Portanto, selecione os dados para garantir que eles estejam no centro. E talvez eu possa movê-los com apenas um toque. Ou talvez eu possa simplesmente mover a imagem desse jogo um pouco para aqui, algo assim. Talvez alguns não tenham algumas formas no fundo. Então, talvez eu possa adicionar algumas formas de fundo um pouco mais tarde ou algo parecido. Mas acho que vai funcionar muito bem por enquanto. A próxima coisa que vou fazer é adicionar uma nova imagem aqui e usar a mesma técnica. Então, 200 por 200, lá vamos nós. E dentro dessa posição, pode estar mais ou menos por aqui. Vou clicar em Carregar e passar para os ícones dos meus ativos. E vamos ver o ícone dos jogos. Não, não esse. Então, vamos ver mais, ganhar jogos. É este e posicione-o mais ou menos por aqui. Agora, quando eu tiver isso, vou incluir minha cópia em um jogo definido. E eu vou fazer o mesmo com esse texto. Lá vamos nós. Este botão tem o recurso de sincronização automática. Mas se você quiser apenas alterar esse botão e não quiser que a alteração seja sincronizada com todas as instâncias. Tudo o que você precisa fazer é clicar com o botão direito do mouse nesse botão e clicar em Desanexado dos ativos. E então as alterações serão aplicadas somente a esse botão. E, obviamente, precisaremos alterar algum texto aqui. Então, em vez disso, vou dizer que compre o seu. Lá vamos nós. Clique em Aplicar e veja se ele foi atualizado em tempo real em qualquer lugar. Então, o que eu preciso fazer é basicamente fazer uma cópia e depois alterar a dívida. Mas eu não vou fazer isso por uma questão de tempo. Então, vamos seguir em frente e seguir em frente. Então, vou selecionar esses dois e ter certeza de que eles estão no centro. Eles são ótimos. Então, vou selecionar isso e ter certeza de que está na mesma distância que este na parte superior para dar um pouco mais de espaço para respirar. Lá vamos nós. Então, agora, para o próximo, vou alinhá-lo para ser o mesmo e isso vai ser bem simples. Então, vídeo promocional, basta clicar em Carregar, clique aqui, vá até meus ativos e Ikhwan, desculpe, vídeo promocional de imagens é este aqui. Ok, lá vamos nós. É colocado diretamente no interior. Então, nesta seção, suba. E tudo que eu preciso fazer aqui é basicamente substituir essas imagens à medida que elas sobem. Aqui, faça o upload de imagens selecionadas. Vai ser esse aqui, ok? Como você pode ver, agora aqui vamos usar o controlador, clique em Carregar para clicar para fazer o upload do controlador. Lá vamos nós. Clique em OK. E, finalmente , para este, vai ser um pouco complicado. Então selecione a imagem aqui, faça o upload, clique em Carregar. E eu vou usar essa imagem porque é uma imagem PNG dessa garota. Como você pode ver, isso vai se traduzir muito bem nesse plano de fundo. Mas, para isso, precisamos realmente substituir um pouco disso. Portanto, essa obtenção de ideias deve ser completamente obscura. Portanto, a escuridão principal nesta inspiração deve ser branca. Nesse caso. Lá vamos nós. Então você pode ver como isso parece. Mas, finalmente, preciso me livrar de algumas dessas fronteiras. Se eu selecionei isso, vamos ver, ele não tem uma borda desse retângulo, tem uma borda. O mesmo que esse retângulo. O mesmo que esse retângulo. Lá vamos nós. E agora podemos passar para esta seção, que podemos adicioná-la ainda mais. Então, primeiro de tudo, para esta, o que vou fazer é substituir o tamanho da imagem por algo como 792 por 500. Lá vamos nós. Certifique-se de que esteja mais ou menos por aqui. Lá vamos nós, e nos certificamos de que eu os coloque em posição. Então, o que faremos é transformar título desta seção e alterá-lo de 60 para algo um pouco menor, como 32. Clique duas vezes em colar em alguns, é uma mudança de vida. E vamos incluir algum parágrafo do texto aqui. Portanto, certifique-se de estendê-lo apenas para que ele possa cobrir o texto. E vamos ver o distanciamento, talvez possamos usar 48. Então, vamos ver o que temos aqui. Então, temos 35. Então, estamos com 48 agora. Em vez disso, o que vou fazer é incluir alguma paginação. Então, eu posso simplesmente apertar 0 para criar um belo círculo, algo assim. E vamos ver Fourier, mas 48, talvez um pouco grande. Então, 40 por 40, lá vamos nós. Vou incluir uma fronteira. E essa borda vai ser essa, digamos, a cor azul. Então, aplique na borda. E eu vou me livrar da largura da borda de preenchimento que será de dois pixels, algo assim. Lá vamos nós. A partir daqui, somos 54. E eu vou ter 48 anos, o mesmo que fiz com o anterior. Controle um D. Pronto. Controle D, onde estamos no momento, temos 29 anos. Então 20, vamos ver 20 e Controle D neste, somos 20. Então, vamos selecioná-los rapidamente. Então, esses outros, na verdade, não, vamos selecionar todos eles e usar a cor do parágrafo como borda. E vou selecionar o segundo e clicar em azul principal como a cor de preenchimento sem nenhuma borda para indicar que esta está selecionada. Mas eu ainda acho que eles são realmente grandes demais. Então, vou selecionar todos eles assim e reduzi-los para 20 por 20. Vamos ver como isso parece. Sim, acho que é muito melhor. Distribuí-los uniformemente, caso não sejam pressionados em Control G, vamos chamar isso de paginação. E você já tem o componente para a paginação, mas eu gosto de criar minhas coisas do zero. Então, eu só gosto de ter, digamos, controle total sobre isso. Então, vou selecionar esse texto, ter certeza de que está no centro dessa imagem. Assim, eu posso selecionar meu conteúdo, selecionar minha imagem. Portanto, separe o conteúdo e a imagem e verifique se o centro está alinhado. Lá vamos nós. E eu vou selecionar essa imagem aqui. Faça o upload, clique em Carregar e adicione a imagem do depoimento a ela. Bata bem, lá vamos nós. E eu só quero acrescentar alguns detalhes adicionais. Então aperte R e talvez crie algum tipo de retângulo no fundo. Talvez dobre um pouco as esquinas. Vamos ver. Talvez 20. Lá vamos nós. E eu vou me livrar do preenchimento e, para a borda, vou aplicar a cor principal e fazer com que ela seja, por exemplo, dois pixels. Clique com o botão direito do mouse em Pedir, Enviar para voltar. Então, está logo atrás dessa imagem. Lá vamos nós. Acho que funciona muito bem. Então, apenas um aparelho. Vai ser muito simples de fazer. Tudo o que precisamos fazer é simplesmente carregar esse dispositivo de realidade virtual. Lá vamos nós aqui. Ok, e eu acho que isso funciona muito bem. Então, estamos às 01:20. Vamos ver, cinco de cada lado, 24. 24. Sim, 123 de cada lado. Acho que vai funcionar muito bem. E, finalmente, para eles aqui, o que precisaremos é usar o cartão do produto. Esta primeira carta será a maleta de transporte, como diz, na lata. Clique em OK, lá vamos nós. O segundo serão esses cabos. Então clique em Carregar, clique em Carregar cabos. Aí está. E talvez porque esteja cortada, talvez você possa colocá-la na borda inferior da imagem e aumentá-la um pouco e, em seguida, simplesmente alinhá-la ao centro desta forma. Acho que vai funcionar muito melhor. Agora, finalmente, pois aqui o que precisaremos é, vamos ver. Precisaremos do título. Então, liberou o mundo da tecnologia VR. Lá vamos nós. Certifique-se de que seja 48, assim. E então eu vou adicionar textos aqui. Lá vamos nós. E vou manter isso como está. E, finalmente, basta substituir essa imagem. Clique em Carregar. Escolha essa mulher de realidade virtual. Lá vamos nós. E eu vou torná-la muito maior do que isso, bonita e grande. Selecione os dois, clique no centro e mova esta foto para baixo. Para a imagem do conteúdo em si, vou usar componentes para arrastar outro componente, com 200 por 200. Lá vamos e o colocamos em algum lugar, mais ou menos por aqui. Clique em Upload, clique aqui. E então eu precisarei dos ícones de ativos. E eu vou usar o ícone da tecnologia, eu acho. Sim. Então, basta posicioná-lo aproximadamente por lá. O que você pode fazer também é usar algumas formas de fundo para preencher essas imagens. Se você quiser, isso fará com que eles se destaquem um pouco mais. E talvez eu realmente devesse exportá-los e trazê-los. Então, deixe-me realmente ver o que eu posso fazer. Então, talvez eu possa fazer algo assim. Então, o que podemos fazer com isso é trazer a nova imagem. Certifique-se de que seja escalável. Posicionamento aproximado por aqui. Peça Send to Back, clique, faça o upload. Clique para fazer o upload e onde está, clique em forma de bolha, ok? E você pode ver como fica imediatamente a partir daqui, tudo o que você precisa fazer agora é colocar essa imagem na forma de bolha em si. Lá vamos nós. E basta mover os dois ao mesmo tempo para mais ou menos por aqui e tudo funcionará muito bem. Eu vou um pouco mais tarde e ajustar todas elas. Mas agora vejo que eu precisaria de algo como 20 aqui para o retângulo. Então, vamos com 20. Pronto, só para que possamos ter um layout um pouco mais interessante dentro desta imagem. Nossa última coisa que eu queria fazer para isso, mas antes de seguir em frente, deixe-me rapidamente ter certeza de que isso está centralizado. Lá vamos nós. Vou selecionar a imagem do rodapé, filtrar a imagem. Lá vamos nós. Clique em carregar e clique ali mesmo, selecione a imagem número dois do dispositivo VR. Somos dispositivos para. Lá vamos nós. Clique em OK. E talvez eu apenas amplie um pouco para algo assim. E apenas certifique-se de que o fundo do rodapé esteja no topo, talvez em 80%, algo assim. O bom truque é que você pode simplesmente cortar sua prancheta mais ou menos por aqui e ela não rolará mais. Mas se você quiser, obviamente você pode simplesmente estender o pé ali mesmo. Acho que será um truque muito bom e uma ótima maneira de terminar essa sessão de design. Mas como estou muito irritado com essas formas de fundo, vou simplesmente exportá-las do meu design original. Adicione-os aqui mesmo. Então, vou adicionar uma nova imagem, colocá-la em algo aqui, clicar com o botão direito do mouse e pedir, enviar para trás. Clique em, Carregue. Clique em Carregar, vá para Ativos, forma de bolha número dois, clique em. Ok, lá vamos nós. E talvez eu possa ampliá-lo apenas um pouco para aproximadamente por aqui, talvez. Sim. E então eu posso ajustá-los e movê-los. Vamos ver onde está. Sim, então aqui está. Isso, isso e isso. eu possa me mudar para aqui Talvez eu possa me mudar para aqui. Lá vamos nós. E ficamos com uma única bolha e deixe-me exportá-la , prepará-la e simplesmente trazê-la aqui. E enquanto estou fazendo isso, vamos rapidamente adicionar uma nova imagem. Dimensione, clique com o botão direito do mouse em Pedir, Enviar para trás, clique em Carregar. E será a forma de bolha número três, mas por algum motivo ela não existe lá. Então, deixe-me tentar isso mais uma vez. Clique para fazer o upload da forma de bolha número três. Lá está, aqui, tudo bem, e está localizado aqui. Obviamente, você pode brincar um pouco mais com as configurações e ajustá-las um pouco mais. Mas essas bolhas existem apenas para dar a você um pouco de interesse em seu design. Vamos clicar rapidamente na pré-visualização para ver o que fizemos até agora e ver o que criamos até agora. Então, aqui temos nossa seção de heróis nossos botões, tudo funciona como deveria. Eu começo a rolar para baixo. Você pode ver explorar novos mundos. E temos essa garota, mais uma vez, o botão funciona muito bem. Possibilidades ilimitadas Então, temos essas opções aqui, mas acho que esqueci de adicionar é para o aeroporto principal, quero mudar essa cor. Então, ativos. Clique com o botão direito Vamos ver o que podemos fazer. Então foi esse. Lá vamos nós. Então, quando eu troco aqui, isso deve fazer com que ele mude e se destaque um pouco mais se estiver salvo. Vamos dar uma olhada. Sim, porque agora podemos ver a cor branca desses cartões. Então, tudo funciona como deveria. Parece bom. Você pode ver como essas bolhas destacam sua imagem. Talvez eu deva mudar isso um pouco mais. Mas acho que está indo muito bem. E para este vídeo, o que vou fazer é simplesmente arredondar os cantos desse vídeo. Localize a sobreposição de cores e certifique-se de que somos 20 aqui. Lá vamos nós. E agora, quando você salvar e abrir aqui, ele funcionará muito bem. Você pode imaginar que esse vídeo é reproduzido continuamente em bloop, talvez sobre nucléico. Ele vai levá-lo para o Vimeo ou YouTube ou algo dessa natureza. Essas cartas também devem ser arredondadas. Então, vamos fazer isso. Então, vamos com 20. Vamos usar 20 aqui também. Lá vamos nós. E vamos dar uma olhada nesta seção para ver os depoimentos. Então, este está selecionado, funciona bem. Fone de ouvido tudo-em-um, personalize o seu. Lá vamos nós. Então, temos esses três. Explore tudo, talvez possamos adicionar alguns efeitos de flutuação. Lá vamos nós. Portanto, tudo funciona como deveria ser aceito nesta seção. Talvez eu devesse até mesmo cortá-lo e incluí-lo aqui dentro. Então, o que podemos ver, vamos ver. Portanto, temos rodapé, BG é 740. Então, vamos usar 740. E eu posso ir com Phil. Lá vamos nós. E eu acho que isso vai ser quase sal nesse caso, desse jeito. Lá vamos nós. Então, isso é tudo para o nosso design. Eu realmente espero que você tenha gostado. No próximo vídeo, vamos abordar um pouco de animação. E eu vou te mostrar, por exemplo como animar uma dessas duas seções só para ver como tudo funciona. Então, nos vemos lá. 28. Adicionando interações: Vamos adicionar rapidamente algumas pequenas interações interessantes para tornar nossa página um pouco mais interessante do que é agora, quando está quase totalmente estática. Tudo bem, então aqui foi de onde paramos na vez anterior. Vamos adicionar algumas interações. Então, a primeira interação que vou adicionar é na verdade, quando essa página for carregada, quero que esses elementos se movam um pouco. Então, como fazer isso? Bem, vamos passar rapidamente para a interação. Vamos selecionar o alvo e eu vou selecionar essa seção de heróis. Então, role até aqui, uma seção. E você tem sua imagem de herói, por exemplo, e você tem todos esses outros elementos dentro da seção do herói. Então, primeiro de tudo, vamos selecionar esse texto dessa forma. Portanto, ele direciona o texto no carregamento. Assim. E queremos começar a nos mudar. E vamos fazer algo como no eixo y, vamos lá, sei lá, talvez dez pixels. Então, três a cinco para aliviar 200, talvez 300, algo assim. Ok, então faça outro. Então, adicione interação, selecione o alvo dentro da seção do herói. O que podemos fazer a seguir talvez seja usar o botão principal. Também podemos usar o movimento. E vamos usar, sei lá, talvez dez pixels aqui. Então, vamos usar algo como 604300 milissegundos. Isso é bom. Vamos adicionar outro para o menu, por exemplo, para interação com o AD. Vamos até o topo. Então, temos o nervo superior, temos o movimento. E no eixo y, que é superior e inferior, vou movê-lo, por exemplo 40 pixels. Algo como uma dívida. Talvez eu possa, não sei, talvez eu possa ampliar a imagem de fundo. Então, vamos fazer isso. Então, mais uma vez, seção de heróis. Vamos usar a imagem do herói carregada e usar o Zoom. Então, vamos com a largura, talvez 105, algo assim. Vamos rápido. Lá vamos nós. Você pode ver a rapidez com que isso aconteceu porque configuramos para 300 milissegundos. Se você quiser que essas mudanças aconteçam um pouco mais lentamente do que isso , você pode brincar com isso. Vamos agora seguir em frente e ajustar a próxima seção. E eu vou tocar rapidamente nesse ícone. E talvez quando você passa o mouse sobre ele, ele possa girar. Quando você move o mouse, ele pode simplesmente pular para trás. Então, para fazer isso, em vez desses gatilhos, primeiro deixe-me explicar o que acabei de fazer. Então, quando eu clico e arrasto para si mesmo, ele aplica alterações em si mesmo. Então, eu vou usar o mouse enter. Então, quando o mouse entra, e em vez do Zoom, vamos girar e vamos 180. Vamos usar a duração linear 400, acho que pode ser muito boa. Você pode usar a facilidade de entrada e saída. Acho que vai ficar um pouco melhor. Clique em Ok e, em seguida, faça outro. Então, saia com o mouse e eu vou usar o ângulo zero. Então, vamos pré-visualizar rapidamente o que fizemos ali mesmo. Então, quando eu me movo para baixo, você pode ver que está destacado em vermelho, o que significa que tem um efeito sobre ele. Então, quando eu passo o mouse, você pode ver o que ele faz. E quando ele se move para dentro, talvez você deva configurá-lo para menos 180. Então, vamos testá-lo na licença de Moussa. Vamos clicar em Editar aqui e usar menos 180 para que ele volte à sua posição original. Então, vamos ver se isso funcionou. Lá vamos nós. Então, quando o mouse sair, ele voltará para a posição original. Você pode usar 360 se quiser. Mas eu acho que 180 é bom. Não vou tocar nesses botões porque eles já têm o efeito de passar o mouse sobre eles. Você pode fazer todo tipo de coisa com essa imagem, por exemplo, você pode ampliá-la ao passar o mouse sobre ela. Por exemplo, quando você desliza sobre a interseção da luz do sol, o que eu quero fazer é brincar com a posição dessas cartas. Já temos o efeito de passar o mouse sobre eles que definimos anteriormente. Mas o que eu vou fazer é selecionar o cartão inteiro e arrastá-lo. Use o mouse enter. Em vez de girar, vou usar o eixo Y do Move. Vou usar dez pixels, 300 milissegundos, o que é bom. E então use isso e vá embora. Vamos ver. Vamos escolher zero e ver o que isso faz por nós. Então, vamos em vez do mouse enter. Sim, vamos fazer isso mais uma vez. Então, quando eu clico aqui, o eixo y do movimento centrado no homem. Vamos usar dez pixels. Clique em Ok. Quando eu clico aqui. Em vez do centro do mouse, vou usar o mouse leave. Vou mantê-lo em zero. Atingir. Ok? Agora temos o mouse enter com dez, o mouse sai com zero e vamos clicar em Preview. Então, quando eu passo o mouse aqui, você pode ver quando ela sai, ela volta e tem esse efeito elástico, que vai ficar bem com o que estamos tentando alcançar aqui. Então eu vou com o mouse enter, mova dez para cá, ok? Faça o mesmo com o centro do mouse, mova 10, mi centro, mova dez. Lá vamos nós. E então eu vou escolher este. Saia do mouse, vai ser zero. O mouse deixa zero e o mouse deixa zero. É claro que você pode copiar e colar esses efeitos, mas descobri que são igualmente rápidos quando você faz isso. Quando você é apenas Blair, planeje o seu estado antecedência e quando você planeja sua animação com antecedência. Agora que temos esse efeito, uma espécie de efeito elástico, quando você move o mouse sobre essas cartas. Eles brincam e mostram essas posições diferentes. Então, quando você rola para baixo, talvez possamos girar este, mas vou ignorá-lo por enquanto e ir direto para esta seção. E o que vou fazer nesta seção é selecionar essa cor ordenadamente a partir daqui. Vá até meus estados, vá até o mouse selecionado, vá para Propriedades. Dentro das propriedades. Vou reduzir isso para talvez algo como, vamos usar 40 por cento. Algo parecido. Volte ao normal. Clique em pré-visualizar mais uma vez, porque quando você passa o mouse sobre ela, quando você está rolando para baixo, eu quero que você possa para baixo, eu quero que você clicar rapidamente nela ou ver que você pode realmente fazer algo com ela. E nesse caso, seria um vídeo sendo reproduzido em segundo plano. Então, talvez quando você clica nele, ele possa se expandir, ampliar para tela cheia ou algo parecido. Então esse é o ponto principal. Quando você clica do lado de fora, quando passa o mouse do lado de fora, a obesidade só aumenta. Então, agora vamos brincar um pouco com essas seções. Então, o que podemos fazer aqui é talvez ampliar isso um pouco. Então, quando você clica e arrasta o mouse enter, podemos redimensionar. Então você pode fazer o valor relativo, ou você pode, se você tiver um aqui, você pode ver se desmarque o redimensionamento para um tamanho específico, que é realmente o que eu quero. Porque eu queria ampliar em Enter para dez pixels. Então, 710. E vamos continuar, vamos com o número redondo aqui. Então, talvez 407, na verdade 200 milissegundos. Eu acho que está tudo bem. Calma agora, isso é ótimo. Então era o mouse, entre, arraste mais uma vez, passe o mouse para sair. E vamos mantê-lo nesses tamanhos. Lá vamos nós. Vamos clicar pré-visualização mais uma vez, porque eu quero saber se isso funciona ou não. Assim, posso saber se preciso fazer alguma alteração. Lá vamos nós. Assim, você pode ver como isso fica ao passar o mouse sobre ele. Basicamente, vai mostrar essa imagem e mostrar como ela se parece. Isso é ótimo. Então, a próxima coisa que eu quero fazer é talvez, talvez fazer a mesma coisa com isso. Então, o que eu posso fazer é fazer a mesma coisa. Então, clique com o mouse enter, apenas para que possamos entender que tudo isso faz parte da mesma seção. Vamos ver. Então, 156.233. Lá vamos nós. E então o mouse sai. Isso nos levará de volta às configurações padrão. Esperançosamente. Então, vamos ver 156146. Lá vamos nós. Então, vamos brincar com esse também. Então, eu vou selecionar a imagem assim. E nesse caso, eu quero ser capaz de escalá-lo para algo assim. Então 9 443-594-4350. Então, mais uma vez, selecione sua imagem. Então 944 com 350, isso está no mouse. Entre, aperte, OK. E agora adicione outro. Em vez do centro do mouse. Vamos com a licença do mouse. Você pode ver 880319. Lá vamos nós. Então, vamos visualizá-los rapidamente. E se essas animações funcionarem conforme o esperado nessas seções, esta funciona muito bem. Este funciona muito bem, e este também funciona. É só pular fora dessa soma. Se quiser, você pode brincar com o posicionamento dele. Para que chegue um pouco ao topo. Então, talvez em vez disso seja ampliado e talvez você possa fazê-lo se mover apenas pelo eixo y, mas lembre-se de que as pernas dela ainda ficarão assim. Mas, por enquanto, vou pular esta seção porque geralmente essas seções são bastante estáticas porque as pessoas estão interpondo entre elas e mudando. Então, talvez possamos ampliar este. Então, vamos tentar com dívidas. Então, o que podemos fazer aqui? Vamos fazer o mesmo truque. Então, vamos passar o mouse, inserir, redimensionar. Vamos escolher 1206, talvez 60. Vamos usar algo um pouco mais lento, como 400 milissegundos. Lá vamos nós. E então o mouse sai. Vamos manter as mesmas configurações. Algo parecido. Lá vamos nós. Finalmente, para D é o que eu quero, eu quiser selecionar esta imagem e mudar para passar o mouse, passe o mouse aqui. Eu quero reduzir a opacidade para talvez 70% ou algo assim. Volte ao normal e selecione essa imagem também. Então, passe o mouse sobre o mouse, 70%. Lá vamos nós. Volte ao normal. E, finalmente, volte para este produto PG, passe o mouse. Mas aqui vamos realmente mudar a cor. Então, dentro do mouse, nossa mudança para o azul escuro, volta ao padrão. Lá vamos nós. E aqui está o que podemos fazer talvez porque seja a última seção, talvez você possa fazer o mesmo truque para que ela gire ao passar o mouse. Então, digite o mouse, em vez de redimensionar, talvez eu possa. Vamos ver, se eu girar 100 graus. Lá vamos nós. E o mouse sai de -100 graus, 100 graus, e lá vamos nós. Então, agora que temos isso, é claro, você pode adicionar todos os tipos de animações diferentes. Vamos testar rapidamente todo o design e ver o que temos até agora. Então, quando eu clicar na pré-visualização mais uma vez, teremos aquele pequeno efeito de carregamento de todos esses elementos em segundo plano. Como mencionei, você pode adicionar animações adicionais ao plano de fundo, se quiser. Mas, por enquanto, acho que é bom. Isso funciona conforme o esperado. Temos esses que funcionam como um efeito de trampolim em segundo plano. Então, talvez você possa clicar aqui e você será direcionado para uma seção de página dedicada sobre jogos ou para uma seção de página dedicada sobre jogos uma página separada de jogos. Nesse caso. Podemos fazer isso girar se quisermos, então temos esse efeito redutor de passar o mouse sobre esta carta. Temos esses elementos escalonados, incluindo este. Em seguida, ampliamos lentamente e entrevistamos. Temos esse pequeno efeito de passar o mouse em todas as nossas cartas. Então, finalmente, temos este para a rotação. Lá vamos nós. Isso mostra como é fácil adicionar diferentes interações dentro do mock plus rP. E você pode ver como eles são simples quando você seleciona sua prancheta, você pode ver no carregamento o que acontece quando você seleciona elementos específicos como este, por exemplo, você pode ver os gatilhos que ela tem e o início que ela tem ali mesmo. No próximo vídeo, mostrarei como visualizar e publicar no mock plus Cloud por que isso é importante e o que você pode fazer quando estiver lá. Então eu vou te ver lá. 29. Preveja, compartilha e nuvem do Mockplus: Obter feedback de seus clientes é a coisa mais importante que você pode fazer no projeto. Porque o feedback errado pode levar o projeto para parte errada e como realmente obter o feedback de seus clientes. E é sobre isso que vamos falar nesta lição. Ok, então foi aqui que paramos no vídeo anterior. Agora, vamos pré-visualizar isso mais uma vez. Então, aqui temos esse painel na parte inferior. Então, aqui temos o ajuste à largura. Você pode ajustar a tela se quiser ver todo o seu design. E, mais uma vez, todos esses elementos descritos têm algumas interações incluídas neles. Você pode voltar para ajustar a largura ou usar 50%, dependendo do tamanho da tela. Então, o que temos ao lado é a tela cheia. E você pode clicar em Escape para sair da tela cheia. E você pode mostrar ou ocultar esses painéis na lateral. É claro que aqui, no lado esquerdo, você pode alternar entre suas diferentes páginas. E aqui, seus nós serão localizados. Se você tiver suas anotações, mais uma vez, poderá mostrar ou ocultar rapidamente esses painéis. Se você não precisar deles. Depois, temos a opção de link de visualização. E o que temos aqui é o que diz aqui. Portanto, esse privilégio será diferente quando você alterar as configurações abaixo. Então, copie o novo link para compartilhar. Então, o que isso significa é que, ao marcar e desmarcar algumas dessas opções, certifique-se de sempre clicar no novo link obtido ao marcar e desmarcar algumas dessas opções. Então, o que temos aqui é mostrar o painel de controle. Você pode mostrá-lo se quiser. Você pode mostrar essa barra de ferramentas se quiser ou não. Você pode mostrar a área do link ao passar o mouse. O que isso vai fazer é mostrar aos seus espectadores que eles podem realmente clicar nessa área específica. Isso é ótimo, especialmente para testes com usuários, porque você sempre quer que seus usuários entendam por si mesmos se podem clicar em algum lugar ou não. Porque isso vai melhorar a velocidade do seu design e a usabilidade do seu InDesign. Você sempre pode mostrar o transportador de GNL. Você pode mostrar conteúdo fora da nossa empresa. Essas podem ser as subpranchetas ou alguns elementos que você criou fora da prancheta. Você pode mostrar marcadores de nós e definir a senha para que todos com uma senha possam acessar essa prévia. Todo mundo sem senha não pode acessá-la de forma alguma. Então, essas são apenas algumas das suas configurações quando você compartilha o link de visualização. E finalmente, temos aqui, que são apenas algumas configurações rápidas que eu já mostrei aqui, apenas congestionadas e condensadas aqui. Então, mais uma vez, sempre mostrando transportadora, link curto, continue com o mouse. Então, uma vez que acontece aqui, vai mostrar essa área de link. Esta é a sua área de links. Mostre conteúdo fora do quadro de arte. Como mencionei, mostre marcadores de notas e oculte automaticamente a barra de ferramentas. Então, essas são apenas algumas das suas opções quando você deseja compartilhar seu protótipo muito rapidamente. Mas o que acontece se você realmente quiser publicá-lo? Então, publicar algo no mock plus Cloud, mas na verdade selecionado e deixe-me mostrar, vai dizer aqui. Assim, você pode sincronizar seu projeto com o mock plus Cloud, por exemplo, colaboração on-line, transferência e dados em camadas. Verifique o que isso significa é quando você simplesmente compartilha o pour para pré-visualização, as pessoas podem realmente visualizá-lo. E então talvez eles possam lhe dar alguns conselhos sobre o que mudar. Talvez eles possam indicar a direção certa sobre o design. Mas quando você realmente compartilha com o mock plus Cloud, você pode colaborar com outros designers e outras pessoas da sua equipe, como partes interessadas, como redatores e desenvolvedores. Para que todos vocês dentro dessa equipe possam moldar esse design para que seja o que você realmente quer que seja no final. Então, vamos seguir em frente e direcionar o Projeto de Nuvem. E, claro, para desenvolvedores, eles podem ver as especificações dos dados. Eles podem ver as cores. Eles podem ver CSS, trechos e todo tipo de coisas diferentes que serão úteis para desenvolverem esse design mais rapidamente no final do dia. Assim, podemos direcionar o projeto Cloud. Nós somos nosso site, tudo bem. Clique em OK, e você pode alterá-lo. Você pode usar o que quiser daqui. E eu vou usar nosso site neste caso, clique em, OK? E dependendo do tamanho do seu projeto, publicá-lo demorará mais ou menos. Foi publicado com sucesso. Assim, você pode clicar em Exibir projeto como um ambiente separado e ver como ele fica. Então você tem todos os tipos dessas opções diferentes aqui. Prestes a documentar o design do protótipo, guia de estilo de recursos da tarefa e a atividade. Você pode verificar tudo isso. Você tem a equipe, então a permissão do projeto. Quem tem permissão para acessar esse projeto? Você pode visualizá-lo novamente. Aqui você pode começar pela página inicial ou pela página atual. Você pode baixar o que já mencionamos anteriormente e compartilhá-lo ainda mais fora daqui. E você pode definir algumas configurações aqui. Então, vamos ver os detalhes muito rapidamente. Vamos entrar no design aqui porque ele estava começando com o fluxograma, porque essa foi a primeira página padrão inserida. Então, o que temos aqui são algumas opções na parte superior. Em primeiro lugar, temos a análise. Então, dentro dessa guia, as pessoas podem revisar. Todas as mudanças que você criou podem basicamente ter sua opinião sobre seu design. Então, aqui temos algumas opções. Na parte inferior, eles podem selecionar algumas opções dentro do seu design. Eles podem adicionar os textos, coordenar o trabalho. Eles podem adicionar a marcação de espaçamento e a marcação de região se quiserem adicionar alguns comentários em uma região específica do seu design. Eles também têm um estilo de alfinete, então você pode mostrar marcadores de anotação ou comentários não resolvidos para ter várias opções quando estiver trabalhando com alguém, como clientes ou partes interessadas. Assim, eles podem realmente expressar sua opinião sobre seu design e sobre as mudanças que precisam ser feitas em seu design. Você pode adicionar rapidamente essas referências. Você pode adicionar cores diferentes e coisas assim. Então você realmente tem muitas opções. Você tem anotações aqui e seu histórico de revisões, o que é sempre ótimo porque você pode ver quantas revisões seu design realmente teve. Então, o que temos aqui é o modo de comentários. Então, ao entrar no modo de comentários, você pode rapidamente deixar alguns comentários. Então, por exemplo, mude essa imagem de fundo. Você pode ver que diz Controle, Enter para postar isso. Então, ele é enviado quando eu clico do lado de fora, alguém pode ver isso e clicar e dizer: Ok, mude essa imagem de fundo e outra pessoa pode ver, eu já fiz. Verifique o histórico de revisões. Assim, eles poderão ver no histórico de revisões o que já alterou essa imagem de fundo. Então, é basicamente assim que funciona e parece. Você pode escolher qualquer tipo de parte do seu design que você queira anotar. Talvez você possa dizer algo como adicionar alguns gráficos e o plano de fundo aqui ou algo parecido. Então você entende tudo e entende como isso funciona. Depois, temos o desenvolvimento. E isso é especialmente útil, é claro, para desenvolvedores. É aqui que eles poderão ver todos os tipos de trechos de código. Lá, poderemos ver todas as cores que você usa, tipografia que você usa. E eles poderão inspecionar ainda mais seu design antes que eles realmente comecem com o desenvolvimento e agilizem muito o fluxo de trabalho. Então, o que temos aqui são os ativos. Então, esses são os ativos que você preparou para baixar ácidos, temos anotações. Portanto, se alguma anotação tiver sido adicionada, se você estiver vinculado ao sistema de design, poderá alternar entre plataformas para surdos e definir cores e obter os valores na página atual. Então, quando eu clico ali, você pode ver que temos todas essas cores. E você pode encontrar uma cópia dessas cores. E você pode alternar entre hexadecimal, RGB e todos os tipos desses diferentes modos de cores. Porque, dependendo do modo de cor que seus desenvolvedores usarão, será fácil para eles fazer isso. Portanto, você pode ver que os ácidos atualmente não são suportados nas páginas de protótipos. Você pode usar mais plug-ins para importar designs dessas ferramentas. E você pode assistir aos tutoriais se quiser importar ativos e ver as anotações. Ainda não temos nenhum. E você pode se conectar ao sistema de design, como eu disse, se quiser. E você pode mudar a plataforma de desenvolvimento. Então, agora temos a web. Então, essas são suas unidades. Temos iOS, temos Android e customizado. E você pode inserir os valores aqui mesmo. Então, se eu selecionar a web, esse será nosso principal tipo de plataforma que desenvolveremos para ela como desenvolvedores. Então, quando você realmente passar o mouse sobre o design, verá que o tamanho da prancheta é 1920. E você pode ver que isso tem 1.000 pixels de altura, que é a seção desta página. E você pode ver quando eu passo o mouse sobre várias seções diferentes, as distâncias entre cada um desses elementos. Então você pode estar se perguntando como os desenvolvedores realmente usarão isso. Bem, é muito simples quando eles realmente veem que esse botão, por exemplo, é 366 por 60. Eles podem selecioná-lo. E eles não vão apenas obter os valores aqui. Eles também receberão os trechos de código. Eles verão a largura e a altura com facilidade, poderão copiar o código e colá-lo em seu editor de código para que possam trabalhar muito mais rápido. Temos isso, por exemplo , que é o logotipo. Você pode ver como fica. E, claro, você pode mudar as plataformas de desenvolvimento aqui se quiser obter alguns valores diferentes, por exemplo, e coisas assim. E, finalmente, temos opções de compartilhamento diferentes. Assim, você pode compartilhar projetos privados, públicos ou incorporar projetos. Isso é muito útil, especialmente quando você está trabalhando com colaboradores externos, como, digamos, alguns conselhos de administração ou pessoas de outra empresa com quem você está colaborando nesse projeto específico. Portanto, pode ser muito útil compartilhar isso fora da sua organização ou fora do seu círculo de pessoas que estão trabalhando nesse projeto específico com você. É por isso que essa versão é útil e é por isso que essa opção é útil para falar sobre colaboração. O Mock plus rP tem ótimos recursos de colaboração e falaremos sobre eles no próximo vídeo. Então, nos vemos lá. 30. COLABORAÇÃO: A colaboração é uma parte muito importante de um processo de redesenho, porque é aí que você receberá o feedback ou receberá ajuda de alguns designers externos, seja como parte de sua equipe ou alguns designers que vêm ajudá-lo de fora da equipe. Mas como você pode fazer isso com mais Rp? Deixe-me mostrar rapidamente como fazer exatamente isso. Então, aqui estamos de volta com mais rP. E se você quiser convidar seus colaboradores, tudo o que você precisa fazer é clicar aqui onde diz membros. Agora, você pode convidar esses membros e conceder a eles todo tipo de permissões diferentes. Assim, eles podem editar, finalizar o design, comentar e visualizar especificações, ou podem ser adivinhados apenas para pré-visualização. Então, na verdade, tudo depende de você. Obviamente, se você quiser convidar alguém para ajudá-lo com o design, você deve dar a essa pessoa a função de editar e projetar. E tudo o que você precisa fazer é simplesmente copiar esse link, compartilhar esse link com eles, e eles serão convidados para sua equipe, primeiro lugar, e depois para este projeto para poderem editar com você. Agora, permissões, tipo de projeto, você pode defini-lo como privado, modo que seja acessível a todos os membros desse projeto ou equipe. Acessível a todos os membros da equipe do Alcorão. No meu caso, eu mudaria para isso e clicaria em Enviar, clicaria em Fechar, membros brancos. Aí está. E então eles poderão acessar isso comigo. Agora, em tempo real, o que é realmente importante é usar nós. Agora mude para os nós aqui. E então, se você tiver que dizer alguma coisa, adicione-a às notas. Eles poderão vê-lo, eles poderão acessá-lo. E, obviamente, será muito fácil para eles entenderem o que você quer dizer. Mas você também pode fazer sua comunicação fora do mock plus rP, mas é mais fácil ter tudo em uma única ferramenta , como se estivesse aqui. Então, sempre que você quiser adicionar algo, remover algo, basta adicionar a nota e a outra pessoa da equipe verá essa nota. Então, é muito simples colaborar com outras pessoas em seu projeto. E lembre-se, você também pode fazer isso no mock plus clubbed. Um pouco mais avançado usando as ferramentas para desenvolvedores, por exemplo, e você pode fazer com que seu projeto seja trabalhado por várias pessoas. Então, por um lado, você pode fazer a apresentação, os clientes, por exemplo , as partes interessadas ou alguns novos colegas de equipe. Por outro lado, os desenvolvedores podem pegar essas especificações e medidas e simplesmente editá-las e recortá-las prontas para o desenvolvimento. Por outro lado, você pode trabalhar nos bastidores e criar e ajustar algumas dessas mudanças em tempo real e simplesmente atualizar o protótipo, atualizar o link, atualizar o projeto MOP plus Cloud, por exemplo, e todos na equipe também podem ver essa versão e ver o controle de versão por trás desse projeto ver essa versão e ver o controle de versão por trás desse projeto dentro da nuvem. Se você quiser compartilhar rapidamente a biblioteca que você já criou com seus colegas de equipe, tudo o que você precisa fazer é clicar aqui nesses três pontos. Clique em compartilhar. E vai mostrar esse diálogo se você quiser compartilhá-lo com a equipe atual, ok? E então você poderá compartilhar isso com a equipe atual. E todos da sua equipe receberão uma notificação de que essa biblioteca foi compartilhada com eles. Conforme mencionado anteriormente, você pode vir aqui para baixar o pacote de apresentação off-line se precisar levá-lo com você, por exemplo, em seu laptop ou telefone. Talvez você só queira empacotá-lo e levá-lo para mostrar a alguém pessoalmente, então você pode simplesmente clicar aqui para poder baixá-lo e levá-lo offline. Se você quiser exportar esse arquivo RPI, você pode ir até aqui no menu e clicar em Exportar arquivo RPI. E ele exportará esse arquivo RPI para sua máquina e você poderá compartilhá-lo assim com seus colegas de equipe ou levá-lo para onde quiser. Então, é muito simples trabalhar dentro do mock plus rP. E você pode simplesmente voltar para aqui. E você pode ver um histórico de revisões. Você pode clicar aqui. E você pode ver quem criou o quê em que dia. Então, quando você passa o mouse, você pode ver algumas alterações feitas. Se eu clicar ali mesmo, se eu clicar ali e diminuir o zoom um pouco, poderei ver todo tipo de mudanças diferentes, como elas pareciam. Então, eu posso clicar aqui. Então foi aqui que começamos. E, finalmente, foi aqui que paramos ou posso clicar na versão atual e ver como fica. Então, é muito fácil trabalhar em simulação e Rp, especialmente com alguns membros externos da equipe ou também com membros da equipe local. 31. Conclusão: Pronto, chegamos ao final desta aula. Eu realmente espero que você tenha se divertido aprendendo sobre Mach plus rP e explorando como usá-lo. Estou ansioso para ver suas criações no projeto de aula. Há um vídeo dedicado sobre seus projetos de aula, então não deixe de conferir e estou ansioso para ver o que vocês podem criar. Isso é tudo para este. Se você quiser acessar o mock plus rP, certifique-se de conferir o PDF com um link interno, então você pode acessá-lo facilmente e criar sua conta gratuita dessa forma. Dessa forma, certifique-se de começar hoje e começar essas criações. Muito obrigado por assistir a esta aula. Mais uma vez, se você estiver interessado, tenho algumas outras aulas sobre design de UI UX aqui no meu perfil do Skillshare. Portanto, certifique-se de conferi-los também. Obrigado novamente por assistir este e até a próxima vez, tome cuidado.